/* ==========================================================================
 * Money Record — shadcn dark design tokens
 *
 * Source of truth for the dark theme chosen in the design brief:
 *   surface #000000 · elevated #3B3B3B · accent #F97316 · text #FFFFFF
 *   muted #9CA3AF · border #2A2A2A · radius 8px everywhere · flat
 *
 * Two rules govern this file:
 *
 *  1. Everything is scoped to [data-theme="dark"]. The user-facing app does
 *     not opt in yet, so a mistake here can only affect the admin panel, and
 *     flipping the rest of the app later is a one-attribute change rather
 *     than a rewrite.
 *
 *  2. A token remap alone is NOT enough. Several load-bearing components in
 *     app.css hardcode light values instead of reading tokens — .card and
 *     .stat are `rgba(255,255,255,.72)`, table row hover is
 *     `rgba(245,245,245,.7)`, button hover is `#000`. Those would leave
 *     white glass panels floating on a black page while every token looked
 *     correct. Part B corrects them, and only them — app.css itself is left
 *     alone so the light theme cannot drift.
 *
 * Loaded after app.css. The token block outranks :root on specificity
 * (:root[data-theme] beats :root), so load order is belt-and-braces only.
 * ========================================================================== */

/* ---------------------------------------------------------------- Part A */
:root[data-theme="dark"] {
    /* --- surfaces (Obsidian / Zinc dark ramp) --------------------------- */
    --bg:           #09090b;   /* deep obsidian canvas               */
    --surface:      #121216;   /* elevated carbon cards & panels     */
    --surface-elev: #18181f;   /* raised / hover surface             */
    --wash:         #18181f;   /* accent wash                        */

    --border:        #24242c;
    --border-strong: #3f3f4e;

    --text:        #f4f4f6;
    --text-muted:  #a1a1aa;
    --text-subtle: #71717a;

    /* --- achromatic ramp ------------------------------------------------ */
    --graphite: #f4f4f6;
    --steel:    #a1a1aa;
    --slate:    #71717a;
    --mist:     #22222a;
    --fog:      #18181f;
    --ash:      #1f1f28;

    /* --- brand: vibrant amber-orange ramp ------------------------------- */
    --brand-50:  #fff7ed;
    --brand-100: #ffedd5;
    --brand-200: #fed7aa;
    --brand-300: #fdba74;
    --brand-400: #fb923c;
    --brand-500: #f97316;
    --brand-600: #ea580c;
    --brand-700: #c2410c;
    --brand-800: #9a3412;
    --brand-900: #7c2d12;
    --brand:     #f97316;
    --info:      #fb923c;

    /* --- semantic money colours ---------------------------------------- */
    --income:      #34d399;
    --income-bg:   rgba(16, 185, 129, .14);
    --expense:     #f87171;
    --expense-bg:  rgba(239, 68, 68, .14);
    --warning:     #fbbf24;
    --warning-bg:  rgba(245, 158, 11, .14);

    /* --- shape ---------------------------------------------------------- */
    --radius-sm:   10px;
    --radius:      14px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-pill: 999px;

    /* --- depth ---------------------------------------------------------- */
    --shadow-xs:     0 1px 2px rgba(0, 0, 0, .35);
    --shadow-sm:     0 2px 6px rgba(0, 0, 0, .4);
    --shadow:        0 8px 24px -4px rgba(0, 0, 0, .5);
    --shadow-md:     0 12px 32px -6px rgba(0, 0, 0, .55);
    --shadow-lg:     0 20px 48px -8px rgba(0, 0, 0, .65);
    --shadow-brand:  0 6px 20px rgba(249, 115, 22, .22);
    --shadow-orange: 0 16px 40px -6px rgba(0, 0, 0, .7), 0 0 0 1px rgba(249, 115, 22, .18);

    /* --- motion --------------------------------------------------------- */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --motion: .15s var(--ease);

    /* --- accent helpers -------------------------------------------------- */
    --focus-ring: 0 0 0 3px rgba(249, 115, 22, .22);
    --row-hover:  rgba(255, 255, 255, .035);
    --lift-hover: rgba(255, 255, 255, .06);
}

/* ---------------------------------------------------------------- Part B */
[data-theme="dark"] body { background: var(--bg); color: var(--text); }

/* --- cards & stat tiles ------------------------------------------------- */
[data-theme="dark"] .card,
[data-theme="dark"] .stat {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .04), var(--shadow-xs);
}
[data-theme="dark"] .card-hover:hover,
[data-theme="dark"] .stat:hover {
    background: var(--surface-elev);
    border-color: var(--border-strong);
    filter: none;
}
[data-theme="dark"] .card-foot { background: rgba(0, 0, 0, .24); }

/* --- tables ------------------------------------------------------------- */
[data-theme="dark"] .table tbody tr:hover { background: var(--row-hover); }
[data-theme="dark"] .table thead th { background: rgba(255, 255, 255, .025); }

/* --- buttons ------------------------------------------------------------ */
[data-theme="dark"] .btn {
    --btn-bg: #f4f4f6;
    --btn-fg: #09090b;
    --btn-bg-hover: var(--brand-500);
    border-radius: var(--radius-pill);
}
[data-theme="dark"] .btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }
[data-theme="dark"] .btn-primary:hover { background: var(--btn-bg-hover); }

[data-theme="dark"] .btn-secondary {
    --btn-bg: rgba(255, 255, 255, .04);
    --btn-fg: var(--text);
    --btn-bg-hover: rgba(255, 255, 255, .09);
    border-color: var(--border-strong);
}
[data-theme="dark"] .btn-ghost {
    --btn-bg: transparent;
    --btn-fg: var(--text-muted);
    --btn-bg-hover: rgba(255, 255, 255, .07);
}
[data-theme="dark"] .btn-accent  { --btn-bg: var(--brand-500); --btn-fg: #09090b; --btn-bg-hover: var(--brand-400); }
[data-theme="dark"] .btn-danger  { --btn-bg: #dc2626; --btn-fg: #FFFFFF; --btn-bg-hover: #ef4444; }
[data-theme="dark"] .btn-success { --btn-bg: #059669; --btn-fg: #FFFFFF; --btn-bg-hover: #10b981; }
[data-theme="dark"] .btn-danger:hover,
[data-theme="dark"] .btn-success:hover,
[data-theme="dark"] .btn-accent:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }

/* --- forms -------------------------------------------------------------- */
[data-theme="dark"] .input,
[data-theme="dark"] .select,
[data-theme="dark"] .textarea {
    background: #0d0d11;
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .input::placeholder,
[data-theme="dark"] .textarea::placeholder { color: var(--text-subtle); }
[data-theme="dark"] .input:focus,
[data-theme="dark"] .select:focus,
[data-theme="dark"] .textarea:focus {
    border-color: var(--brand-500);
    box-shadow: var(--focus-ring);
    background: #09090b;
}
[data-theme="dark"] .input:disabled,
[data-theme="dark"] .select:disabled,
[data-theme="dark"] .textarea:disabled {
    background: var(--bg);
    opacity: .55;
}

/* --- modal & menu ------------------------------------------------------- */
[data-theme="dark"] .modal-backdrop { background: rgba(0, 0, 0, .72); }
[data-theme="dark"] .modal {
    background: var(--surface);
    border-color: var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-orange);
}

/* --- liquid glass ------------------------------------------------------- */
[data-theme="dark"] .liquid-glass,
[data-theme="dark"] .liquid-glass-strong,
[data-theme="dark"] .liquid-glass-subtle {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--border);
}

/* --- alerts ------------------------------------------------------------- */
[data-theme="dark"] .alert-success { border-color: rgba(52, 211, 153, .3); color: var(--income); }
[data-theme="dark"] .alert-error,
[data-theme="dark"] .alert-danger  { border-color: rgba(248, 113, 113, .3); color: var(--expense); }
[data-theme="dark"] .alert-warning { border-color: rgba(251, 191, 36, .3);  color: var(--warning); }
[data-theme="dark"] .alert-info {
    background: rgba(249, 115, 22, .11);
    border-color: rgba(249, 115, 22, .3);
    color: var(--brand-300);
}

/* --- badges ------------------------------------------------------------- */
[data-theme="dark"] .badge-brand,
[data-theme="dark"] .badge-info {
    background: rgba(249, 115, 22, .15);
    color: var(--brand-400);
}
[data-theme="dark"] .badge-danger {
    background: rgba(248, 113, 113, .15);
    color: var(--expense);
}

/* ==========================================================================
 * Part C — the rest of the app. Every page now opts into the dark theme
 * (layouts/app, guest, setup, admin and every standalone landing/help/legal
 * view set data-theme="dark"), so this layer covers the user-facing shell,
 * auth screens, setup wizard, landing, help and the AI drawer — everything
 * that still hardcodes a light value or inverts a token.
 *
 * Rule 1 still applies: keep selectors >= the originals in the base sheets.
 * ========================================================================== */

/* --- app shell: sidebar & topbar ---------------------------------------- */
[data-theme="dark"] .app-sidebar {
    background: rgba(13, 13, 17, .94);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border-inline-end: 1px solid var(--border);
}
[data-theme="dark"] .sidebar-link.is-active {
    background: var(--brand-500);
    color: #09090b;
    font-weight: 600;
}
[data-theme="dark"] .sidebar-link.is-active i { color: #09090b; }
[data-theme="dark"] .sidebar-logout { color: var(--expense); }

[data-theme="dark"] .sidebar-help {
    background: rgba(249, 115, 22, .10);
    border-color: rgba(249, 115, 22, .28);
    color: var(--brand-300);
}
[data-theme="dark"] .sidebar-help:hover { background: rgba(249, 115, 22, .16); color: var(--brand-200); }
[data-theme="dark"] .sidebar-help > i:first-child { color: var(--brand-500); }

[data-theme="dark"] .app-header {
    background: rgba(9, 9, 11, .82);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .header-search-input {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .header-search-input:focus {
    background: var(--bg);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, .35);
    border-color: var(--brand-500);
}
[data-theme="dark"] .header-avatar {
    background: var(--brand-500);
    color: #09090b;
    font-weight: 600;
}
[data-theme="dark"] .header-avatar .header-avatar-caret { color: rgba(9, 9, 11, .75); }
[data-theme="dark"] .header-avatar:hover { background: var(--brand-400); color: #09090b; }

/* --- app.css leftovers --------------------------------------------------- */
[data-theme="dark"] .modal-foot,
[data-theme="dark"] .card-foot { background: rgba(0, 0, 0, .24); }

[data-theme="dark"] .toast,
[data-theme="dark"] .install-bar {
    background: var(--surface);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .empty-icon {
    background: rgba(249, 115, 22, .12);
    color: var(--brand-400);
}
[data-theme="dark"] .brand-tinted {
    background: rgba(249, 115, 22, .10);
    border-color: rgba(249, 115, 22, .28);
}
[data-theme="dark"] .stat-violet {
    --stat-accent: #a78bfa;
    --stat-icon-bg: rgba(139, 92, 246, .18);
}
[data-theme="dark"] .bg-white-brand {
    background: rgba(249, 115, 22, .14);
    color: var(--brand-300);
}
[data-theme="dark"] .switch input:focus-visible + .switch-track { box-shadow: var(--focus-ring); }

/* --- guest / auth -------------------------------------------------------- */
[data-theme="dark"] .guest-brand {
    background: radial-gradient(90% 80% at 15% 10%, rgba(249, 115, 22, .12), transparent 65%), #0c0c10;
    border-inline-end: 1px solid var(--border);
    color: #f4f4f6;
}
[data-theme="dark"] .guest-brand-text  { color: rgba(244, 244, 246, .68); }
[data-theme="dark"] .guest-features li { color: rgba(244, 244, 246, .84); }

/* --- setup wizard -------------------------------------------------------- */
[data-theme="dark"] .setup-body {
    background: var(--bg);
    color: var(--text);
}
[data-theme="dark"] .setup-card,
[data-theme="dark"] .setup-toggle-item,
[data-theme="dark"] .setup-summary li {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-xs);
}
[data-theme="dark"] .setup-card { border-radius: var(--radius-lg); }
[data-theme="dark"] .setup-step.is-current { color: var(--brand-400); }
[data-theme="dark"] .setup-step.is-current .setup-step-dot { background: var(--brand-500); border-color: var(--brand-500); color: #09090b; }
[data-theme="dark"] .setup-toggle-item:has(input:checked) {
    border-color: var(--brand-500);
    background: rgba(249, 115, 22, .14);
    color: var(--brand-400);
}

/* --- landing ------------------------------------------------------------- */
[data-theme="dark"] .landing-body { background: var(--bg); }
[data-theme="dark"] .lp-nav {
    background: rgba(9, 9, 11, .80);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .lp-hero {
    background:
        radial-gradient(75% 55% at 50% 0%, rgba(249, 115, 22, .15), transparent 72%),
        var(--bg);
}
[data-theme="dark"] .lp-badge {
    background: rgba(249, 115, 22, .14);
    border-color: rgba(249, 115, 22, .38);
    color: var(--brand-300);
}
[data-theme="dark"] .lp-h1 span,
[data-theme="dark"] .lp-eyebrow { color: var(--brand-400); }

[data-theme="dark"] .lp-feature,
[data-theme="dark"] .lp-faq-item,
[data-theme="dark"] .lp-shot {
    background: var(--surface);
    border-color: var(--border);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .04), var(--shadow-xs);
}
[data-theme="dark"] .lp-feature:hover,
[data-theme="dark"] .lp-faq-item:hover { background: var(--surface-elev); border-color: var(--border-strong); filter: none; }
[data-theme="dark"] .lp-feature-icon,
[data-theme="dark"] .help-card-icon,
[data-theme="dark"] .help-article-icon {
    background: rgba(249, 115, 22, .14);
    color: var(--brand-400);
}
[data-theme="dark"] .lp-step::before {
    background: var(--surface-elev);
    border: 1px solid var(--border-strong);
    color: var(--brand-400);
}
[data-theme="dark"] .lp-cta-panel {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #09090b;
}
[data-theme="dark"] .lp-cta-panel h2 { color: #09090b; }
[data-theme="dark"] .lp-cta-panel p { color: rgba(9, 9, 11, .78); }
[data-theme="dark"] .lp-cta-panel .btn { background: #09090b; color: #f4f4f6; }
[data-theme="dark"] .lp-cta-panel .btn:hover { background: #18181f; }

/* --- help ---------------------------------------------------------------- */
[data-theme="dark"] .help-topbar {
    background: rgba(9, 9, 11, .80);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .help-brand:hover { color: var(--brand-400); }
[data-theme="dark"] .help-search input {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 0 0 1px var(--border);
}
[data-theme="dark"] .help-card,
[data-theme="dark"] .help-section {
    background: var(--surface);
    border-color: var(--border);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .04), var(--shadow-xs);
}
[data-theme="dark"] .help-card:hover { color: inherit; background: var(--surface-elev); border-color: var(--border-strong); filter: none; }
[data-theme="dark"] .help-section li::marker { color: var(--brand-500); }

/* --- AI drawer ----------------------------------------------------------- */
[data-theme="dark"] .ai-panel {
    background: rgba(14, 14, 18, .96);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border-inline-end: 1px solid var(--border);
}
[data-theme="dark"] .ai-fab {
    background: var(--brand-500);
    color: #09090b;
}
[data-theme="dark"] .ai-fab:hover { background: var(--brand-400); color: #09090b; }
[data-theme="dark"] .ai-head-icon {
    background: var(--brand-500);
    color: #09090b;
}
[data-theme="dark"] .ai-msg.is-user .ai-msg-avatar {
    background: var(--brand-500);
    color: #09090b;
}
[data-theme="dark"] .ai-msg.is-user .ai-msg-bubble {
    background: var(--brand-500);
    color: #09090b;
    font-weight: 500;
}
[data-theme="dark"] .ai-msg.is-assistant .ai-msg-bubble {
    background: var(--surface-elev);
    border: 1px solid var(--border);
}
[data-theme="dark"] .ai-status.is-ok    { color: var(--income); }
[data-theme="dark"] .ai-status.is-warn  { color: var(--warning); }
[data-theme="dark"] .ai-status.is-error { color: var(--expense); }
[data-theme="dark"] .ai-send:hover:not(:disabled) { background: var(--brand-500); color: #09090b; }
[data-theme="dark"] .ai-chips { background: transparent; border-color: var(--border); }
[data-theme="dark"] .ai-scan-card {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: none;
}
[data-theme="dark"] .ai-scan-head {
    background: rgba(249, 115, 22, .14);
    color: var(--brand-300);
}
[data-theme="dark"] .ai-scan-row.is-selected {
    border-color: var(--brand-500);
    background: rgba(249, 115, 22, .08);
}

/* --- print: the PDF export must stay light regardless --------------------- */
@media print {
    [data-theme="dark"] {
        --bg: #ffffff;
        --surface: #ffffff;
        --border: #e5e7eb;
        --border-strong: #d1d5db;
        --text: #111827;
        --text-muted: #4b5563;
        --text-subtle: #6b7280;
        --graphite: #111827;
        --steel: #4b5563;
        --slate: #6b7280;
        --mist: #e5e7eb;
        --fog: #f3f4f6;
        --ash: #f3f4f6;
    }
    [data-theme="dark"] body { background: #ffffff !important; }
    [data-theme="dark"] .card,
    [data-theme="dark"] .stat,
    [data-theme="dark"] .modal,
    [data-theme="dark"] .ai-panel,
    [data-theme="dark"] .app-sidebar,
    [data-theme="dark"] .app-header {
        background: #ffffff !important;
        border-color: #e5e7eb !important;
    }
}

/* --- legibility: links & accent text ------------------------------------- */
/* app.css links use --brand-600 (blue-600). After the remap that is #ea580c,
   which on an elevated #3B3B3B card reads 3.15:1. The brief's accent is
   #f97316 (--brand-500), so links lift one step and pass easier. */
[data-theme="dark"] a:not(.btn) { color: var(--brand-500); }
[data-theme="dark"] a:not(.btn):hover { color: var(--brand-400); }
[data-theme="dark"] .skip-link { background: var(--brand-500); color: #000; }
[data-theme="dark"] .skip-link:focus { color: #000; }
[data-theme="dark"] .text-brand,
[data-theme="dark"] .fs-brand,
[data-theme="dark"] .code-chip,
[data-theme="dark"] .error-code { color: var(--brand-500); }

/* a:not(.btn) outranks a bare .skip-link (0,2,1 > 0,2,0), so the skip link
   needs the element too or its orange-on-orange colour would win. */
[data-theme="dark"] a.skip-link { color: #000; }
[data-theme="dark"] a.skip-link:focus { color: #000; }

/* --- tiny icon chips that still leaned on orange-50 ----------------------- */
[data-theme="dark"] .stat-brand,
[data-theme="dark"] .stat-brand-soft,
[data-theme="dark"] .stat-info {
    --stat-icon-bg: rgba(249, 115, 22, .16);
    --stat-accent: var(--brand-500);
}
[data-theme="dark"] .ai-msg-avatar {
    background: rgba(249, 115, 22, .16);
    color: var(--brand-400);
}

/* --- all buttons are now fully rounded (owner 07-10-2026) ----------------- */
/* .btn already inherits --radius-pill. Icon-only buttons that were left at
   --radius-sm are pills too, so 32px icon buttons read as clean circles. */
[data-theme="dark"] .ai-icon-btn,
[data-theme="dark"] .sidebar-close,
[data-theme="dark"] .header-search-input { border-radius: var(--radius-pill); }

/* --- Modul 2: impersonation notice + user id copy (admin) ---------------- */
[data-theme="dark"] .impersonate-bar {
    position: sticky;
    top: 0;
    z-index: 61;
    background: var(--brand-500);
    color: #000;
    box-shadow: var(--shadow-md);
}
[data-theme="dark"] .impersonate-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
[data-theme="dark"] .impersonate-bar-text {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    line-height: 1.35;
}
[data-theme="dark"] .impersonate-bar-btn {
    background: #000;
    border-color: #000;
    color: #fff;
    white-space: nowrap;
}
[data-theme="dark"] .impersonate-bar-btn:hover {
    background: #1a1a1a;
    color: #fff;
}
[data-theme="dark"] .user-id-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
}
[data-theme="dark"] .user-id-copy:hover {
    color: var(--brand-500);
    border-color: var(--brand-500);
}
[data-theme="dark"] .user-id-copy code {
    font-family: inherit;
    color: inherit;
}

[data-theme="dark"] .theme-pill-group {
    background: #18181f;
    border-color: #272732;
}
[data-theme="dark"] .theme-pill-btn {
    color: #94a3b8;
}
[data-theme="dark"] .theme-pill-btn:hover {
    color: #ffffff;
}
[data-theme="dark"] .theme-pill-btn.is-active {
    background: var(--brand-500);
    color: #09090b;
}

.gap-2-5, .gap-2\.5 { gap: 10px; }

/* Asset page Hero typography */
.asset-hero-label {
    font-size: 0.9375rem !important;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.asset-hero-nominal {
    font-size: 2.75rem !important;
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-weight: 800;
}
.asset-hero-meta {
    font-size: 0.875rem !important;
}
@media (max-width: 640px) {
    .asset-hero-nominal {
        font-size: 2rem !important;
    }
    .btn-cta .btn-cta-text {
        display: none;
    }
    .btn-cta {
        padding: 8px 12px;
        min-width: 38px;
        justify-content: center;
    }
    .dashboard-filter-desktop {
        display: none !important;
    }
    .dashboard-filter-mobile {
        display: flex !important;
    }
}
@media (min-width: 641px) {
    .dashboard-filter-mobile {
        display: none !important;
    }
}

/* User search autocomplete dropdown */
.user-search-wrap {
    position: relative;
    width: 100%;
}
.user-search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--surface, #1e1e1e);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: var(--radius, 8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    max-height: 220px;
    overflow-y: auto;
}
.user-search-dropdown[hidden] {
    display: none !important;
}
.user-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border, #2a2a2a);
    transition: background 0.15s ease;
}
.user-search-item:last-child {
    border-bottom: none;
}
.user-search-item:hover, .user-search-item:focus {
    background: rgba(249, 115, 22, 0.15);
}
.user-search-empty {
    padding: 10px 12px;
    text-align: center;
    color: var(--text-muted, #9ca3af);
    font-size: 0.85rem;
}