/* --- tokens.css --- */
/* ═══════════════════════════════════════════════════════════════════
   BonicBD User Panel — Design Tokens (Single Source of Truth)
   v2.0 — 2026-05-24
   All pages import this first. No other file defines :root tokens.
   dashboard.css, components.css, layout.css, pages.css all inherit here.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Light mode (default) ─────────────────────────────────────────── */
:root {
    /* Surfaces */
    --bg-body:          #f4f6fb;
    --bg-card:          #ffffff;
    --bg-input:         #f0f3f9;
    --bg-hover:         #e8ecf5;
    --bg-secondary:     color-mix(in srgb, var(--bg-card) 82%, var(--bg-body) 18%);
    --bg-tertiary:      color-mix(in srgb, var(--bg-input) 85%, var(--bg-card) 15%);

    /* Text */
    --foreground:       #111827;
    --secondary:        #4b5563;
    --muted:            #9ca3af;
    --text:             var(--foreground);

    /* Borders */
    --border:           #e1e7f0;
    --border-subtle:    #edf1f8;

    /* Brand / Primary */
    --primary:          #e8451a;
    --primary-hover:    #d43e17;
    --primary-dim:      rgba(232, 69, 26, .10);
    --primary-glow:     0 0 24px rgba(232, 69, 26, .16);
    --p-rgb:            232, 69, 26;

    /* Status */
    --success:          #059669;
    --success-rgb:      5, 150, 105;
    --warning:          #d97706;
    --warning-rgb:      217, 119, 6;
    --danger:           #dc2626;
    --danger-rgb:       220, 38, 38;
    --info:             #2563eb;
    --info-rgb:         37, 99, 235;

    /* Radius */
    --r-xs:  6px;
    --r-s:   10px;
    --r-m:   14px;
    --r-l:   18px;
    --r-xl:  22px;

    /* Shadows — subtle, not dramatic */
    --shadow-xs: 0 1px 2px  rgba(16, 24, 40, .04);
    --shadow-sm: 0 1px 6px  rgba(16, 24, 40, .06);
    --shadow-md: 0 4px 16px rgba(16, 24, 40, .08);
    --shadow-lg: 0 12px 36px rgba(16, 24, 40, .10);

    /* Transitions */
    --trans:   .15s ease;
    --easing:  cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --sidebar-w:  252px;
    --header-h:   60px;
    --crumbbar-h: 42px;
    --content-max: 1480px;

    /* Legacy aliases */
    --bg:           var(--bg-body);
    --surface:      var(--bg-card);
    --surface-2:    var(--bg-input);
    --hover:        var(--bg-hover);
    --accent:       var(--primary);
    --accent-hover: var(--primary-hover);
    --accent-soft:  var(--primary-dim);
    --border-strong: color-mix(in srgb, var(--border) 60%, var(--foreground));
    --radius:       var(--r-s);
    --radius-md:    var(--r-m);
    --radius-lg:    var(--r-l);
    --text-muted:   var(--secondary);
    --text-subtle:  var(--muted);
}

/* ── Dark mode ────────────────────────────────────────────────────── */
html.dark {
    /* Surfaces */
    --bg-body:          #0e1117;
    --bg-card:          #161b27;
    --bg-input:         #1d2538;
    --bg-hover:         #263248;
    --bg-secondary:     color-mix(in srgb, var(--bg-card) 82%, var(--bg-body) 18%);
    --bg-tertiary:      color-mix(in srgb, var(--bg-input) 85%, var(--bg-card) 15%);

    /* Text */
    --foreground:       #e2e8f8;
    --secondary:        #8896b0;
    --muted:            #64718a;

    /* Borders */
    --border:           #263248;
    --border-subtle:    #1e2a3e;

    /* Brand */
    --primary:          #ff6b3d;
    --primary-hover:    #ff5a28;
    --primary-dim:      rgba(255, 107, 61, .12);
    --primary-glow:     0 0 24px rgba(255, 107, 61, .20);
    --p-rgb:            255, 107, 61;

    /* Status */
    --success:          #34d399;
    --success-rgb:      52, 211, 153;
    --warning:          #fbbf24;
    --warning-rgb:      251, 191, 36;
    --danger:           #f87171;
    --danger-rgb:       248, 113, 113;
    --info:             #60a5fa;
    --info-rgb:         96, 165, 250;

    /* Shadows */
    --shadow-xs: 0 1px 2px  rgba(0, 0, 0, .20);
    --shadow-sm: 0 2px 8px  rgba(0, 0, 0, .28);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, .36);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .44);

    /* Legacy aliases */
    --bg:           var(--bg-body);
    --surface:      var(--bg-card);
    --surface-2:    var(--bg-input);
    --hover:        var(--bg-hover);
    --accent:       var(--primary);
    --accent-hover: var(--primary-hover);
    --accent-soft:  var(--primary-dim);
    --border-strong: color-mix(in srgb, var(--border) 80%, var(--foreground));
    --text-muted:   var(--secondary);
    --text-subtle:  var(--muted);
}

/* ── Z-Index Scale ─────────────────────────────────────────────────── */
:root {
    --z-dropdown:   100;
    --z-sticky:     200;
    --z-sidebar:    300;
    --z-header:     400;
    --z-overlay:    500;
    --z-modal:      600;
    --z-toast:      700;
    --z-tooltip:    800;
}

/* ── Spacing Scale ─────────────────────────────────────────────────── */
:root {
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:   12px;
    --space-lg:   16px;
    --space-xl:   24px;
    --space-2xl:  32px;
    --space-3xl:  48px;
    --space-4xl:  64px;
}

/* ── Typography Scale ──────────────────────────────────────────────── */
:root {
    --text-xs:    0.75rem;    /* 12px */
    --text-sm:    0.875rem;   /* 14px */
    --text-base:  1rem;       /* 16px */
    --text-lg:    1.125rem;   /* 18px */
    --text-xl:    1.25rem;    /* 20px */
    --text-2xl:   1.5rem;     /* 24px */
    --text-3xl:   1.875rem;   /* 30px */
    --text-4xl:   2.25rem;    /* 36px */

    --leading-tight:   1.25;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;

    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
}

/* ── Animation Tokens ──────────────────────────────────────────────── */
:root {
    --anim-duration-fast:    150ms;
    --anim-duration-normal:  250ms;
    --anim-duration-slow:    400ms;
    --anim-easing:           cubic-bezier(0.4, 0, 0.2, 1);
    --anim-easing-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);

    --anim-fade-in:    opacity var(--anim-duration-normal) var(--anim-easing);
    --anim-slide-up:   transform var(--anim-duration-normal) var(--anim-easing), opacity var(--anim-duration-normal) var(--anim-easing);
    --anim-scale:      transform var(--anim-duration-fast) var(--anim-easing-bounce);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Focus Ring (Brand Color) ──────────────────────────────────────── */
:root {
    --focus-ring-width:  3px;
    --focus-ring-offset: 2px;
    --focus-ring-color:  rgba(var(--p-rgb), 0.40);
    --focus-ring:        0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

/* Global focus-visible style — brand orange ring on every interactive element */
:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ── Skeleton Loading ──────────────────────────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* --- components.css --- */
/* ═════════════════════════════════════════════════════════════════
   BonicBD User Panel — Shared Component Library
   v2.0 — 2026-05-24 (clean rewrite, brutal removed)
   Import order: tokens.css → components.css → layout.css
   ═════════════════════════════════════════════════════════════════ */


/* ─ Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', 'Hind Siliguri', system-ui, sans-serif;
    background: var(--bg-body);
    color: var(--foreground);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background .2s var(--easing), color .2s var(--easing);
}

/* ────────────────────────────────────────────────────────────────
   BUTTONS
──────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: var(--r-s);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    text-decoration: none;
    font-family: inherit;
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
    transition:
        transform .16s var(--easing),
        box-shadow .16s var(--easing),
        background .16s var(--easing),
        border-color .16s var(--easing),
        color .16s var(--easing);
    background: var(--bg-input);
    color: var(--foreground);
}
.btn:hover {
    transform: translateY(-1px);
    background: var(--bg-hover);
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
    box-shadow: var(--shadow-sm);
}
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.btn:disabled, .btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(var(--p-rgb), .22);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(var(--p-rgb), .30);
    transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(var(--p-rgb), .18); }

.btn-secondary {
    background: var(--bg-input);
    color: var(--secondary);
    border-color: var(--border);
}
.btn-secondary:hover { color: var(--primary); }

.btn-ghost {
    background: transparent;
    color: var(--secondary);
    border-color: transparent;
    box-shadow: none;
}
.btn-ghost:hover {
    background: var(--bg-input);
    color: var(--foreground);
    border-color: var(--border);
    box-shadow: none;
}

.btn-danger {
    background: rgba(var(--danger-rgb), .10);
    color: var(--danger);
    border-color: rgba(var(--danger-rgb), .22);
}
.btn-danger:hover {
    background: var(--danger);
    color: #fff;
    border-color: transparent;
}

.btn-sm  { padding: 6px 12px;  font-size: 12px; border-radius: var(--r-xs); gap: 5px; }
.btn-lg  { padding: 13px 26px; font-size: 15px; border-radius: var(--r-m); }
.btn-xl  { padding: 15px 32px; font-size: 16px; border-radius: var(--r-m); }
.btn-full { width: 100%; }

/* Icon-only button */
.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--r-s);
    font-size: 16px;
}
.btn-icon.btn-sm { width: 30px; height: 30px; font-size: 13px; border-radius: var(--r-xs); }
.btn-icon.btn-lg { width: 42px; height: 42px; font-size: 18px; border-radius: var(--r-m); }

/* ────────────────────────────────────────────────────────────────
   CARDS
──────────────────────────────────────────────────────────────── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-l);
    overflow: hidden;
    transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}
.card:hover {
    border-color: rgba(var(--p-rgb), .18);
    box-shadow: var(--shadow-md);
}
.card.card-lift:hover {
    transform: translateY(-2px);
}

.card-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(120deg, rgba(var(--p-rgb), .03), transparent 55%);
}
.card-title {
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -.015em;
}
.card-title i { color: var(--primary); font-size: 17px; }
.card-subtitle {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}
.card-body  { padding: 22px; }
.card-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-input);
}

/* Section card (common dashboard widget) */
.section-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-l);
    overflow: hidden;
    transition: border-color var(--trans), box-shadow var(--trans);
}
.section-card:hover {
    border-color: rgba(var(--p-rgb), .14);
    box-shadow: var(--shadow-sm);
}
.section-card-header {
    padding: 17px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(120deg, rgba(var(--p-rgb), .03), transparent 55%);
}
.section-card-title {
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 9px;
    letter-spacing: -.01em;
}
.section-card-body { padding: 20px; }

/* ────────────────────────────────────────────────────────────────
   FORM ELEMENTS
──────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }
.form-group:last-child { margin-bottom: 0; }

.input-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
}

.input {
    width: 100%;
    padding: 11px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--r-s);
    color: var(--foreground);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
.input:hover { border-color: rgba(var(--p-rgb), .28); }
.input:focus {
    border-color: rgba(var(--p-rgb), .55);
    box-shadow: 0 0 0 3px rgba(var(--p-rgb), .11);
    background: var(--bg-card);
}
.input::placeholder { color: var(--muted); }
.input:disabled { opacity: .55; cursor: not-allowed; }

.input.is-error { border-color: rgba(var(--danger-rgb), .55); }
.input.is-error:focus { box-shadow: 0 0 0 3px rgba(var(--danger-rgb), .12); }

/* Input with icon prefix */
.input-group { position: relative; }
.input-group .input-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 16px;
    pointer-events: none;
}
.input-group .input.has-icon { padding-left: 40px; }
.input-group .input-suffix {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 14px;
    cursor: pointer;
}

.input-hint  { font-size: 12px; color: var(--muted);   margin-top: 5px; line-height: 1.5; }
.input-error { font-size: 12px; color: var(--danger);  margin-top: 5px; display: none; align-items: center; gap: 4px; }
.input-error.visible { display: flex; }

/* Floating label variant */
.input-float { position: relative; }
.input-float .input { padding: 20px 14px 9px; }
.input-float .input-label {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    margin-bottom: 0;
    pointer-events: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
    transition: all .2s var(--easing);
}
.input-float .input:focus + .input-label,
.input-float .input:not(:placeholder-shown) + .input-label {
    top: 10px;
    transform: translateY(0);
    font-size: 10px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Form section heading */
.form-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    margin-bottom: 14px;
}
.form-divider {
    height: 1px;
    background: var(--border);
    margin: 20px 0;
}

/* Password strength */
.pw-strength { display: flex; gap: 4px; margin-top: 8px; }
.pw-bar {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--border);
    transition: background .25s var(--easing);
}
.pw-bar.weak   { background: var(--danger); }
.pw-bar.medium { background: var(--warning); }
.pw-bar.strong { background: var(--success); }
.pw-label { font-size: 11px; font-weight: 600; margin-top: 5px; }

/* ────────────────────────────────────────────────────────────────
   BADGES & PILLS
──────────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid transparent;
    white-space: nowrap;
}
.badge-primary { background: var(--primary-dim);                color: var(--primary); border-color: rgba(var(--p-rgb),     .22); }
.badge-success { background: rgba(var(--success-rgb), .10);     color: var(--success); border-color: rgba(var(--success-rgb),.20); }
.badge-danger  { background: rgba(var(--danger-rgb),  .10);     color: var(--danger);  border-color: rgba(var(--danger-rgb), .20); }
.badge-warning { background: rgba(var(--warning-rgb), .11);     color: var(--warning); border-color: rgba(var(--warning-rgb),.22); }
.badge-info    { background: rgba(var(--info-rgb),    .10);     color: var(--info);    border-color: rgba(var(--info-rgb),   .20); }
.badge-muted   { background: var(--bg-input); color: var(--muted); border-color: var(--border); }

/* Live / pulsing badge */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(var(--success-rgb), .10);
    color: var(--success);
    border: 1px solid rgba(var(--success-rgb), .20);
}
.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    animation: bbdPulse 2s ease infinite;
}
@keyframes bbdPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .5; transform: scale(1.4); }
}

/* ────────────────────────────────────────────────────────────────
   ALERTS & BANNERS
──────────────────────────────────────────────────────────────── */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--r-s);
    font-size: 13px;
    border: 1px solid transparent;
    line-height: 1.55;
}
.alert i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.alert-success { background: rgba(var(--success-rgb), .09); color: var(--success); border-color: rgba(var(--success-rgb), .20); }
.alert-danger  { background: rgba(var(--danger-rgb),  .09); color: var(--danger);  border-color: rgba(var(--danger-rgb),  .20); }
.alert-warning { background: rgba(var(--warning-rgb), .10); color: var(--warning); border-color: rgba(var(--warning-rgb), .22); }
.alert-info    { background: rgba(var(--info-rgb),    .09); color: var(--info);    border-color: rgba(var(--info-rgb),    .20); }

/* ────────────────────────────────────────────────────────────────
   TOAST NOTIFICATIONS
──────────────────────────────────────────────────────────────── */
.toast-stack {
    position: fixed;
    top: 80px;
    right: 18px;
    z-index: 115;
    display: grid;
    gap: 10px;
    width: min(360px, calc(100vw - 28px));
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    pointer-events: auto;
    padding: 14px 16px;
    border-radius: var(--r-l);
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    animation: bbdFadeUp .22s var(--easing) both;
}
.toast i { font-size: 18px; margin-top: 1px; flex-shrink: 0; }
.toast.success { border-left: 3px solid var(--success); }
.toast.error   { border-left: 3px solid var(--danger); }
.toast.warning { border-left: 3px solid var(--warning); }
.toast.info    { border-left: 3px solid var(--info); }
.toast-copy    { flex: 1; min-width: 0; }
.toast-title   { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.toast-text    { font-size: 12px; color: var(--secondary); line-height: 1.55; }
.toast-dismiss {
    appearance: none;
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}
.toast-dismiss:hover { color: var(--foreground); }

@keyframes bbdFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ────────────────────────────────────────────────────────────────
   STEPPER
──────────────────────────────────────────────────────────────── */
.stepper {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 16px 0;
}
.step {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    background: var(--bg-input);
    color: var(--muted);
    border: 1px solid var(--border);
    transition: all .25s var(--easing);
}
.step.active    .step-circle { background: var(--primary-dim); color: var(--primary); border-color: rgba(var(--p-rgb), .35); }
.step.completed .step-circle { background: var(--success); color: #fff; border-color: var(--success); }
.step-label { font-size: 13px; font-weight: 600; color: var(--secondary); white-space: nowrap; }
.step.active    .step-label { color: var(--foreground); font-weight: 700; }
.step.completed .step-label { color: var(--success); }
.step-divider {
    flex: 1;
    min-width: 32px;
    height: 1px;
    background: var(--border);
    margin: 0 6px;
    transition: background .25s var(--easing);
}
.step-divider.completed { background: var(--success); }

/* ────────────────────────────────────────────────────────────────
   SKELETON LOADERS
──────────────────────────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-input)   25%,
        var(--bg-hover)   50%,
        var(--bg-input)   75%
    );
    background-size: 200% 100%;
    animation: bbdSkeleton 1.5s ease-in-out infinite;
    border-radius: var(--r-xs);
}
@keyframes bbdSkeleton {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-text  { height: 14px; }
.skeleton-title { height: 20px; }
.skeleton-card  {
    height: 120px;
    border-radius: var(--r-l);
    border: 1px solid var(--border);
}

/* ────────────────────────────────────────────────────────────────
   EMPTY STATES
──────────────────────────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 52px 24px;
    text-align: center;
    color: var(--muted);
}
.empty-state-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--r-l);
    background: var(--bg-input);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--muted);
}
.empty-state-title { font-size: 15px; font-weight: 700; color: var(--foreground); }
.empty-state-text  { font-size: 13px; max-width: 320px; line-height: 1.6; }

/* ────────────────────────────────────────────────────────────────
   DIVIDERS & MISC UTILITIES
──────────────────────────────────────────────────────────────── */
.divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: 12px;
    margin: 20px 0;
}
.divider::before, .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--r-xs);
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--secondary);
    cursor: pointer;
    transition: all var(--trans);
}
.copy-btn:hover { color: var(--primary); border-color: rgba(var(--p-rgb), .28); }

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skip link */
.skip-link {
    position: fixed;
    left: 16px;
    top: 14px;
    z-index: 120;
    padding: 10px 14px;
    border-radius: var(--r-m);
    background: var(--primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transform: translateY(-140%);
    transition: transform var(--trans);
}
.skip-link:focus { transform: translateY(0); }

/* Offline banner */
.offline-banner {
    position: fixed;
    inset: 16px 16px auto 16px;
    z-index: 110;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--r-m);
    background: rgba(var(--danger-rgb), .10);
    border: 1px solid rgba(var(--danger-rgb), .22);
    color: var(--danger);
    box-shadow: var(--shadow-md);
    font-size: 13px;
    font-weight: 600;
}
.offline-banner.open { display: flex; }

/* Theme toggle fab */
.theme-fab {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 50;
    width: 38px;
    height: 38px;
    border-radius: var(--r-s);
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 17px;
    transition: all var(--trans);
    box-shadow: var(--shadow-sm);
}
.theme-fab:hover { border-color: var(--primary); color: var(--primary); }

/* Form links */
.form-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: opacity .2s;
}
.form-link:hover { opacity: .8; text-decoration: underline; }
.form-footer-text {
    font-size: 13px;
    color: var(--secondary);
    text-align: center;
}
.form-footer-text a { color: var(--primary); text-decoration: none; font-weight: 600; }

/* --- layout.css --- */
/* ═════════════════════════════════════════════════════════════════
   BonicBD User Panel — Layout System
   Covers: Dashboard app layout, Auth split-screen,
           Standalone page layout (checkout / pricing / renew / profile)
   Requires tokens.css to be loaded first.
   ═════════════════════════════════════════════════════════════════ */

/* ╔══════════════════════════════════════════════════════════════╗
   SECTION 1 — DASHBOARD APP LAYOUT
   ╚══════════════════════════════════════════════════════════════╝ */

/* ─ Sidebar ──────────────────────────────────────────────────────── */
.pf-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    z-index: 55;
    background: color-mix(in srgb, var(--bg-card) 96%, transparent);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 14px 12px 92px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    transition: transform .26s var(--easing);
}

.pf-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.pf-brand-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(var(--p-rgb), .18);
    border: none;
}
.pf-brand-text {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.15;
}
.pf-brand-sub {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .01em;
    margin-top: 1px;
}

.pf-nav-group { margin-top: 8px; }
.pf-nav-label {
    font-size: 10px;
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    margin: 12px 10px 5px;
}

.pf-nav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 2px 0;
    padding: 8px 10px;
    border-radius: var(--r-s);
    color: var(--secondary);
    text-decoration: none;
    font-size: 13.5px;
    border: 1px solid transparent;
    transition: all var(--trans);
    cursor: pointer;
    background: transparent;
    width: 100%;
    text-align: left;
}
.pf-nav-link i { font-size: 15px; flex-shrink: 0; }
.pf-nav-link:hover {
    color: var(--foreground);
    background: var(--bg-input);
    border-color: var(--border);
}
.pf-nav-link.active {
    color: var(--primary);
    background: rgba(var(--p-rgb), .09);
    border-color: rgba(var(--p-rgb), .18);
    font-weight: 600;
}

/* Parent nav items (collapsible) */
.pf-nav-parent {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin: 2px 0;
    padding: 8px 10px;
    border-radius: var(--r-s);
    color: var(--secondary);
    background: transparent;
    border: 1px solid transparent;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: all var(--trans);
}
.pf-nav-parent:hover {
    color: var(--foreground);
    background: var(--bg-input);
    border-color: var(--border);
}
.pf-nav-parent.active { color: var(--primary); font-weight: 700; }
.pf-parent-icon { font-size: 15px; flex-shrink: 0; }
.pf-parent-label { flex: 1; min-width: 0; }
.pf-parent-caret {
    font-size: 11px;
    opacity: .6;
    transition: transform .18s var(--easing);
}
.pf-nav-parent.open .pf-parent-caret {
    transform: rotate(90deg);
    opacity: 1;
}

/* Sub-nav */
.pf-sub-list {
    margin-left: 14px;
    padding-left: 10px;
    border-left: 1px solid var(--border-subtle);
    overflow: hidden;
    max-height: 0;
    transition: max-height .26s var(--easing);
}
.pf-sub-list.open { max-height: 600px; }
.pf-sub-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 1px 0;
    padding: 7px 10px;
    border-radius: var(--r-xs);
    color: var(--secondary);
    font-size: 13px;
    border: 1px solid transparent;
    transition: all var(--trans);
    cursor: pointer;
    background: transparent;
    width: 100%;
    text-align: left;
}
.pf-sub-link:hover {
    color: var(--foreground);
    background: var(--bg-input);
}
.pf-sub-link.active {
    color: var(--primary);
    background: rgba(var(--p-rgb), .07);
    font-weight: 600;
}

/* Sidebar footer */
.pf-sidebar-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

/* ─ Top header / topbar ────────────────────────────────────────── */
.top-header {
    position: fixed;
    top: 0;
    left: var(--sidebar-w);
    right: 0;
    height: var(--header-h);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: background var(--trans);
}

.dashboard-crumbbar {
    position: sticky;
    top: var(--header-h);
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    background: color-mix(in srgb, var(--bg-body) 90%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 13px;
    color: var(--secondary);
}
.dashboard-crumbbar a {
    color: var(--secondary);
    text-decoration: none;
}
.dashboard-crumbbar a:hover { color: var(--primary); }

/* ─ Dashboard shell (main content area) ────────────────────────── */
.dashboard-shell {
    margin-left: var(--sidebar-w);
    padding: calc(var(--header-h) + 8px) 24px 120px;
    min-height: 100vh;
    transition: margin-left .26s var(--easing);
}

.dashboard-panel { display: none; }
.dashboard-panel.active {
    display: grid;
    gap: 16px;
    animation: bbdFadeIn .22s ease both;
}

/* ╔══════════════════════════════════════════════════════════════╗
   SECTION 2 — AUTH LAYOUT (Split-screen)
   ╚══════════════════════════════════════════════════════════════╝ */

.auth-layout {
    display: grid;
    grid-template-columns: 1fr 460px;
    min-height: 100vh;
    background: var(--bg-body);
}

/* Left brand panel */
.auth-brand-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 52px 56px;
    background:
        radial-gradient(600px 500px at 10% 20%, rgba(var(--p-rgb), .08), transparent 60%),
        radial-gradient(500px 400px at 80% 75%, rgba(var(--p-rgb), .05), transparent 55%),
        var(--bg-body);
    overflow: hidden;
    border-right: 1px solid var(--border);
}
.auth-brand-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h1v48H0z' fill='%23000' fill-opacity='.016'/%3E%3Cpath d='M0 0h48v1H0z' fill='%23000' fill-opacity='.016'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: .5;
}
.auth-brand-content { position: relative; z-index: 1; }

.auth-brand-logo {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    box-shadow: 0 8px 24px rgba(var(--p-rgb), .28);
    overflow: hidden;
    margin-bottom: 32px;
}
.auth-brand-title {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
}
.auth-brand-title span { color: var(--primary); }
.auth-brand-desc {
    font-size: 15px;
    color: var(--secondary);
    margin-top: 12px;
    line-height: 1.7;
    max-width: 400px;
}

/* Feature list on brand panel */
.auth-feature-list {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.auth-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--secondary);
}
.auth-feature-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(var(--p-rgb), .10);
    border: 1px solid rgba(var(--p-rgb), .16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 15px;
    flex-shrink: 0;
}

.auth-trust-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 36px;
    flex-wrap: wrap;
}
.auth-trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
}
.auth-trust-item i { color: var(--primary); font-size: 14px; }

.auth-brand-footer {
    position: relative;
    z-index: 1;
    font-size: 12px;
    color: var(--muted);
}

/* Right form panel */
.auth-form-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 52px;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
}
.auth-form-panel .form-card {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}
.auth-form-panel .form-header { margin-bottom: 28px; }
.auth-form-panel .form-header h2 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.025em;
}
.auth-form-panel .form-header p {
    font-size: 14px;
    color: var(--secondary);
    margin-top: 5px;
}

/* Mobile-only brand header */
.auth-mobile-brand {
    display: none;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}
.auth-mobile-brand .auth-brand-logo {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    font-size: 17px;
    margin-bottom: 0;
}

/* ╔══════════════════════════════════════════════════════════════╗
   SECTION 3 — STANDALONE PAGE LAYOUT
   (checkout, pricing, renew, profile, pixel_v2)
   ╚══════════════════════════════════════════════════════════════╝ */

/* Standalone topbar (profile, pixel_v2, and similar pages) */
.standalone-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background: color-mix(in srgb, var(--bg-card) 90%, transparent);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Branded logo link used in standalone pages */
.logo-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--foreground);
}
.logo-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(var(--p-rgb), .22);
}
.logo-text {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
}
.logo-text span { color: var(--primary); }

/* Centered content shell */
.standalone-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px 80px;
}

.standalone-shell-sm {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 24px 80px;
}

/* Page header block (title + description inside a page) */
.page-header {
    margin-bottom: 24px;
}
.page-header-title {
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.15;
}
.page-header-desc {
    font-size: 14px;
    color: var(--secondary);
    margin-top: 5px;
    line-height: 1.6;
}

/* ╔══════════════════════════════════════════════════════════════╗
   SECTION 4 — MOBILE RESPONSIVE
   ╚══════════════════════════════════════════════════════════════╝ */

@media (max-width: 900px) {
    /* Auth: collapse to single column */
    .auth-layout {
        grid-template-columns: 1fr;
    }
    .auth-brand-panel {
        display: none;
    }
    .auth-form-panel {
        border-left: none;
        padding: 28px 24px;
        min-height: 100vh;
        background: var(--bg-body);
        justify-content: flex-start;
        padding-top: 40px;
    }
    .auth-form-panel .form-card {
        max-width: 100%;
    }
    .auth-mobile-brand {
        display: flex;
    }

    /* Dashboard: sidebar hidden, bottom nav shows */
    .pf-sidebar {
        transform: translateX(-100%);
        z-index: 70;
        width: min(280px, 78vw);
        box-shadow: var(--shadow-lg);
    }
    .pf-sidebar.mobile-open {
        transform: translateX(0);
    }

    .top-header {
        left: 0;
        width: 100%;
    }
    .dashboard-crumbbar {
        margin-left: 0;
        width: 100%;
    }
    .dashboard-shell {
        margin-left: 0;
        padding: calc(var(--header-h) + 4px) 14px 130px;
    }

    .standalone-shell,
    .standalone-shell-sm {
        padding: 20px 16px 80px;
    }

    .standalone-topbar {
        padding: 0 16px;
    }
}

@media (max-width: 480px) {
    .auth-form-panel {
        padding: 24px 16px;
    }
}

/* Dashboard sidebar overlay (mobile) */
.pf-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 65;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.pf-sidebar-overlay.active { display: block; }

/* Wide screen cap */
@media (min-width: 1540px) {
    .dashboard-shell {
        max-width: calc(1540px + var(--sidebar-w));
    }
}

/* ─ Keyframes ─────────────────────────────────────────────────────── */
@keyframes bbdFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes bbdSlideIn {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* --- utilities.css --- */
/* ═══════════════════════════════════════════════════════════════════
   BonicBD User Panel — Utility Classes
   Shared helpers that complement Tailwind. Loaded after tokens.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Screen Reader Only ────────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ── Visually Hidden (still focusable) ─────────────────────────────── */
.visually-hidden:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ── Text Truncation ───────────────────────────────────────────────── */
.truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Focus Ring Override (brand orange) ────────────────────────────── */
.focus-ring:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Remove default outline for mouse users, keep for keyboard */
.focus-ring:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* ── Skeleton Loading ──────────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-input) 25%,
        var(--bg-hover) 50%,
        var(--bg-input) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--r-xs);
}

.skeleton-text {
    height: 1em;
    margin-bottom: var(--space-sm);
    border-radius: var(--r-xs);
}

.skeleton-text.w-75 { width: 75%; }
.skeleton-text.w-50 { width: 50%; }
.skeleton-text.w-25 { width: 25%; }

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.skeleton-card {
    height: 120px;
    border-radius: var(--r-l);
}

/* ── Spinner ───────────────────────────────────────────────────────── */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.spinner-sm {
    width: 14px;
    height: 14px;
    border-width: 1.5px;
}

.spinner-lg {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

/* ── Scrollbar Hide (for horizontal scroll containers) ─────────────── */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* ── Safe Area Insets (mobile notch support) ───────────────────────── */
.safe-top    { padding-top: env(safe-area-inset-top); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* ── Print Utilities ───────────────────────────────────────────────── */
@media print {
    .no-print { display: none !important; }
}