/* ================================================================
   AFFILIATEBOT — DESIGN SYSTEM  ds.css
   Tokens · Reset · Typography · Utilities
   Be Vietnam Pro · Blue Primary · Light Theme
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --c-bg:        #f6f8fc;
  --c-surface:   #ffffff;
  --c-surface-2: #f8fafd;
  --c-border:    #e4e9f2;
  --c-border-2:  #cbd5e1;

  /* Text */
  --c-text:    #0f172a;
  --c-text-2:  #64748b;
  --c-text-3:  #94a3b8;
  --c-text-inv:#ffffff;

  /* Primary – Blue */
  --c-primary:    #2563eb;
  --c-primary-h:  #1d4ed8;
  --c-primary-s:  #e8f0fe;
  --c-primary-st: #1e40af;
  --c-primary-d:  #1e3a8a;

  /* Success – Emerald */
  --c-success:    #059669;
  --c-success-h:  #047857;
  --c-success-s:  #d1fae5;
  --c-success-st: #065f46;

  /* Warning – Amber */
  --c-warning:    #d97706;
  --c-warning-h:  #b45309;
  --c-warning-s:  #fef3c7;
  --c-warning-st: #92400e;

  /* Danger – Red */
  --c-danger:    #dc2626;
  --c-danger-h:  #b91c1c;
  --c-danger-s:  #fee2e2;
  --c-danger-st: #991b1b;

  /* Info – Sky */
  --c-info:    #0284c7;
  --c-info-s:  #e0f2fe;
  --c-info-st: #075985;

  /* Purple */
  --c-purple:    #7c3aed;
  --c-purple-s:  #ede9fe;
  --c-purple-st: #4c1d95;

  /* Pink */
  --c-pink:    #db2777;
  --c-pink-s:  #fce7f3;
  --c-pink-st: #831843;

  /* Radius (V8.4: sm 6→8, lg 20→16 theo tokens v2; tên cũ giữ nguyên) */
  --r-xs:      4px;
  --r-sm:      8px;
  --r-control: 8px;
  --r-card:    14px;
  --r-lg:      16px;
  --r-xl:      24px;
  --r-pill:    999px;

  /* Shadow */
  --sh-card:   0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --sh-raised: 0 4px 16px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --sh-modal:  0 24px 64px rgba(15,23,42,.18), 0 4px 16px rgba(15,23,42,.08);
  --sh-focus:  0 0 0 3px rgba(37,99,235,.22);
  --sh-danger: 0 0 0 3px rgba(220,38,38,.22);
  --sh-success:0 0 0 3px rgba(5,150,105,.22);
  --sh-inner:  inset 0 2px 4px rgba(15,23,42,.06);

  /* Spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* Typography */
  --font:       'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* Layout */
  --sidebar-w:    240px;
  --sidebar-icon: 68px;
  --topbar-h:     64px;
  --bottom-nav-h: 64px;
  --content-max:  1400px;

  /* Motion */
  --ease-spring: cubic-bezier(0.16,1,0.3,1);
  --ease-out:    cubic-bezier(0,0,0.2,1);
  --ease-inout:  cubic-bezier(0.4,0,0.2,1);
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    320ms;

  /* V8.4 tokens mới (dùng cả light/dark) */
  --grad-primary: linear-gradient(135deg,#7C3AED,#3B82F6);
  --c-money:      #b8860b;
  --c-tier-a:     #059669;
  --c-tier-b:     #d97706;
  --c-tier-c:     #64748b;
  --sh-glow:      0 0 24px rgba(109,93,246,.25);
  --r-md:         12px;

  /* Alias --ab-* (app.css cũ) -> token design-system, tự đổi theo theme.
     Sửa luôn bug --ab-surface-2 trước đây không hề được định nghĩa. */
  --ab-bg:           var(--c-bg);
  --ab-surface:      var(--c-surface);
  --ab-surface-2:    var(--c-surface-2);
  --ab-line:         var(--c-border);
  --ab-text:         var(--c-text);
  --ab-muted:        var(--c-text-2);
  --ab-primary:      var(--c-primary);
  --ab-primary-soft: var(--c-primary-s);
  --ab-primary-ink:  var(--c-primary-st);
}

/* ── RESET ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;height:100%}
body{
  font-family:var(--font);font-size:14px;font-weight:var(--fw-normal);
  line-height:1.6;color:var(--c-text);background:var(--c-bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;min-height:100%;
}
img,video,svg{display:block;max-width:100%}
input,button,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{font-weight:var(--fw-semi);line-height:1.3}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px;border-radius:var(--r-xs)}
::selection{background:var(--c-primary-s);color:var(--c-primary-st)}

/* ── TYPE SCALE ─────────────────────────────────────────────────── */
.text-3xl{font-size:28px;font-weight:var(--fw-bold)}
.text-2xl{font-size:22px;font-weight:var(--fw-semi)}
.text-xl {font-size:18px;font-weight:var(--fw-semi)}
.text-lg {font-size:16px}
.text-base{font-size:14px}
.text-sm {font-size:13px}
.text-xs {font-size:12px}

.fw-normal{font-weight:var(--fw-normal)}
.fw-medium{font-weight:var(--fw-medium)}
.fw-semi  {font-weight:var(--fw-semi)}
.fw-bold  {font-weight:var(--fw-bold)}

.text-primary  {color:var(--c-primary)}
.text-secondary{color:var(--c-text-2)}
.text-muted    {color:var(--c-text-3)}
.text-success  {color:var(--c-success)}
.text-warning  {color:var(--c-warning)}
.text-danger   {color:var(--c-danger)}
.text-info     {color:var(--c-info)}
.text-white    {color:#fff}

/* ── SKELETON SHINE TOKEN ──────────────────────────────────────── */
:root { --c-skeleton-shine: #edf2fb; }
[data-theme="dark"] { --c-skeleton-shine: #232734; }

/* ── SCROLLBAR ──────────────────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--c-border-2);border-radius:var(--r-pill)}
::-webkit-scrollbar-thumb:hover{background:var(--c-text-3)}

/* ── FLEX / GRID UTILITIES ──────────────────────────────────────── */
.flex       {display:flex}
.flex-col   {display:flex;flex-direction:column}
.inline-flex{display:inline-flex}
.grid       {display:grid}
.hidden     {display:none !important}

.items-start  {align-items:flex-start}
.items-center {align-items:center}
.items-end    {align-items:flex-end}
.items-stretch{align-items:stretch}
.justify-start  {justify-content:flex-start}
.justify-center {justify-content:center}
.justify-end    {justify-content:flex-end}
.justify-between{justify-content:space-between}
.flex-1  {flex:1}
.flex-0  {flex:0 0 auto}
.flex-wrap{flex-wrap:wrap}
.self-start  {align-self:flex-start}
.self-center {align-self:center}
.self-end    {align-self:flex-end}

.gap-0{gap:0} .gap-1{gap:var(--sp-1)} .gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)}
.gap-4{gap:var(--sp-4)} .gap-5{gap:var(--sp-5)} .gap-6{gap:var(--sp-6)}
.gap-8{gap:var(--sp-8)}
.row-gap-2{row-gap:var(--sp-2)} .col-gap-2{column-gap:var(--sp-2)}

/* ── SIZING ─────────────────────────────────────────────────────── */
.w-full{width:100%} .w-40{width:40%} .w-60{width:60%} .w-75{width:75%} .h-full{height:100%}
.min-w-0{min-width:0} .min-h-0{min-height:0}
.max-w-full{max-width:100%}
.flex-shrink-0{flex-shrink:0}
.flex-grow-0{flex-grow:0}
.flex-grow{flex-grow:1}

/* ── POSITION ───────────────────────────────────────────────────── */
.relative{position:relative} .absolute{position:absolute}
.fixed{position:fixed} .sticky{position:sticky;top:0}
.inset-0{inset:0} .z-10{z-index:10} .z-20{z-index:20}
.z-30{z-index:30} .z-40{z-index:40} .z-50{z-index:50}

/* ── SPACING ────────────────────────────────────────────────────── */
.p-0{padding:0} .p-2{padding:var(--sp-2)} .p-3{padding:var(--sp-3)}
.p-4{padding:var(--sp-4)} .p-5{padding:var(--sp-5)} .p-6{padding:var(--sp-6)}
.px-2{padding-inline:var(--sp-2)} .px-3{padding-inline:var(--sp-3)}
.px-4{padding-inline:var(--sp-4)} .px-5{padding-inline:var(--sp-5)}
.px-6{padding-inline:var(--sp-6)}
.py-2{padding-block:var(--sp-2)} .py-3{padding-block:var(--sp-3)}
.py-4{padding-block:var(--sp-4)} .py-5{padding-block:var(--sp-5)}
.mt-1{margin-top:var(--sp-1)} .mt-2{margin-top:var(--sp-2)}
.mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)}
.mt-5{margin-top:var(--sp-5)} .mt-6{margin-top:var(--sp-6)} .mt-8{margin-top:var(--sp-8)}
.mb-1{margin-bottom:var(--sp-1)} .mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)}
.mb-4{margin-bottom:var(--sp-4)} .mb-5{margin-bottom:var(--sp-5)} .mb-6{margin-bottom:var(--sp-6)}
.mb-8{margin-bottom:var(--sp-8)}
.ml-auto{margin-left:auto} .ml-2{margin-left:var(--sp-2)} .ml-3{margin-left:var(--sp-3)} .ml-4{margin-left:var(--sp-4)} .mr-auto{margin-right:auto}
.mx-auto{margin-inline:auto}

/* ── OVERFLOW / TEXT ────────────────────────────────────────────── */
.overflow-hidden{overflow:hidden} .overflow-auto{overflow:auto}
.overflow-y-auto{overflow-y:auto} .overflow-x-auto{overflow-x:auto}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whitespace-nowrap{white-space:nowrap}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.break-all{word-break:break-all}
.text-right{text-align:right} .text-center{text-align:center}
.uppercase{text-transform:uppercase;letter-spacing:.06em}

/* ── BORDERS & SURFACES ─────────────────────────────────────────── */
.surface   {background:var(--c-surface)}
.border    {border:1px solid var(--c-border)}
.border-t  {border-top:1px solid var(--c-border)}
.border-b  {border-bottom:1px solid var(--c-border)}
.divide-y>*+*{border-top:1px solid var(--c-border)}
.rounded-xs     {border-radius:var(--r-xs)}
.rounded-sm     {border-radius:var(--r-sm)}
.rounded-control{border-radius:var(--r-control)}
.rounded-card   {border-radius:var(--r-card)}
.rounded-pill   {border-radius:var(--r-pill)}
.shadow-card  {box-shadow:var(--sh-card)}
.shadow-raised{box-shadow:var(--sh-raised)}

/* ── POINTER ────────────────────────────────────────────────────── */
.cursor-pointer{cursor:pointer} .cursor-default{cursor:default}
.select-none{user-select:none;-webkit-user-select:none}
.pointer-none{pointer-events:none}

/* ── GRID HELPERS ───────────────────────────────────────────────── */
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-auto{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

/* ── SR 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:0
}

/* ── OPACITY ────────────────────────────────────────────────────── */
.opacity-0{opacity:0} .opacity-50{opacity:.5} .opacity-100{opacity:1}

/* ── OVERLAY POINTER-EVENTS FIX ─────────────────────────────────── */
/* Invisible overlays must NEVER block clicks */
.modal-backdrop:not(.open)          { pointer-events:none !important }
.bottom-sheet-backdrop:not(.open)   { pointer-events:none !important }
#drawer-overlay:not(.visible)       { pointer-events:none !important }
#sidebar-overlay:not(.visible)      { pointer-events:none !important }
#mobile-drawer:not(.open)           { pointer-events:none !important }
#offline-banner:not(.show)          { pointer-events:none !important }


/* ── DARK MODE (V8.4 — AI-Studio kiểu CapCut/Runway, MẶC ĐỊNH) ── */
[data-theme="dark"] {
  /* Surfaces — nền sâu, card surface nổi */
  --c-bg:         #0B0C10;
  --c-surface:    #13151C;
  --c-surface-2:  #1A1D26;
  --c-border:     rgba(255,255,255,.07);
  --c-border-2:   rgba(255,255,255,.12);

  /* Text */
  --c-text:       #F2F4F8;
  --c-text-2:     #9AA3B2;
  --c-text-3:     #646E7E;
  --c-text-inv:   #0B0C10;

  /* Primary — tím AI-studio (CTA dùng --grad-primary) */
  --c-primary:    #6D5DF6;
  --c-primary-h:  #8B7DF8;
  --c-primary-s:  rgba(109,93,246,.15);
  --c-primary-st: #B9AFFB;
  --c-primary-d:  #5546E0;

  /* Success */
  --c-success:    #2DD4A7;
  --c-success-h:  #25b58e;
  --c-success-s:  rgba(45,212,167,.12);
  --c-success-st: #7fe7c9;

  /* Warning */
  --c-warning:    #F5A623;
  --c-warning-h:  #d99012;
  --c-warning-s:  rgba(245,166,35,.12);
  --c-warning-st: #f9c870;

  /* Danger */
  --c-danger:     #F0506E;
  --c-danger-h:   #d63a58;
  --c-danger-s:   rgba(240,80,110,.12);
  --c-danger-st:  #f693a6;

  /* Info */
  --c-info:       #38BDF8;
  --c-info-s:     rgba(56,189,248,.12);
  --c-info-st:    #8ad7fa;

  /* Purple */
  --c-purple:     #a78bfa;
  --c-purple-s:   rgba(167,139,250,.12);
  --c-purple-st:  #c4b5fd;

  /* Shadows */
  --sh-card:   0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.35);
  --sh-raised: 0 4px 20px rgba(0,0,0,.6);
  --sh-modal:  0 24px 64px rgba(0,0,0,.8), 0 4px 16px rgba(0,0,0,.4);
  --sh-focus:  0 0 0 3px rgba(109,93,246,.35);
  --sh-danger: 0 0 0 3px rgba(240,80,110,.35);
}

/* V8.4 tokens mới — giá trị dark */
[data-theme="dark"] {
  --c-money:  #FFD84D;
  --c-tier-a: #2DD4A7;
  --c-tier-b: #F5A623;
  --c-tier-c: #646E7E;
}

/* Component-level dark overrides */
[data-theme="dark"] body { color-scheme:dark; background:var(--c-bg); }
[data-theme="dark"] .skeleton {
  background:linear-gradient(90deg,#1A1D26 25%,#232734 50%,#1A1D26 75%);
  background-size:300% 100%; animation:shimmer 1.6s ease-in-out infinite;
}
[data-theme="dark"] select.input { color-scheme:dark; }
[data-theme="dark"] ::-webkit-scrollbar-track { background:var(--c-bg); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background:#3c4551; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background:#4a5568; }
[data-theme="dark"] .topbar-search input::placeholder { color:var(--c-text-3); }
[data-theme="dark"] .input { background:var(--c-surface-2); border-color:var(--c-border); color:var(--c-text); }
[data-theme="dark"] .input::placeholder { color:var(--c-text-3); }
[data-theme="dark"] .btn-secondary { background:var(--c-surface-2); border-color:var(--c-border); color:var(--c-text); }
[data-theme="dark"] .btn-secondary:hover { background:var(--c-surface); }
[data-theme="dark"] .btn-ghost:hover { background:var(--c-surface-2); }
[data-theme="dark"] .card { background:var(--c-surface); border-color:var(--c-border); }
[data-theme="dark"] .card:hover { border-color:var(--c-border-2); }
[data-theme="dark"] .stat-card { background:var(--c-surface); }
[data-theme="dark"] .table td, [data-theme="dark"] .table th { border-color:var(--c-border); }
[data-theme="dark"] .table tbody tr:hover { background:var(--c-surface-2); }
[data-theme="dark"] .table th { background:var(--c-surface-2); }
[data-theme="dark"] .modal { background:var(--c-surface); }
[data-theme="dark"] .dropdown-menu { background:var(--c-surface); border-color:var(--c-border); }
[data-theme="dark"] .dropdown-item:hover { background:var(--c-surface-2); }
[data-theme="dark"] .tabs { border-color:var(--c-border); }
[data-theme="dark"] .filter-chip { background:var(--c-surface-2); border-color:var(--c-border); color:var(--c-text-2); }
[data-theme="dark"] .filter-chip:hover { border-color:var(--c-border-2); color:var(--c-text); }
[data-theme="dark"] .filter-chip.active { background:var(--c-primary-s); border-color:var(--c-border-2); color:var(--c-primary-st); }
[data-theme="dark"] .tag { background:var(--c-surface-2); border-color:var(--c-border); color:var(--c-text-2); }
[data-theme="dark"] .source-chip { background:var(--c-surface-2); border-color:var(--c-border); }
[data-theme="dark"] .source-chip.ok   { background:var(--c-success-s); border-color:rgba(14,203,129,.3); }
[data-theme="dark"] .source-chip.warn { background:var(--c-warning-s); border-color:rgba(240,185,11,.3); }
[data-theme="dark"] #topbar { background:var(--c-bg); border-color:var(--c-border); }
[data-theme="dark"] #sidebar { background:var(--c-surface); border-color:var(--c-border); }
[data-theme="dark"] #sidebar .sidebar-logo { border-color:var(--c-border); }
[data-theme="dark"] #sidebar .sidebar-footer { border-color:var(--c-border); }
[data-theme="dark"] #sidebar .sidebar-collapse-btn { background:var(--c-surface); border-color:var(--c-border); }
[data-theme="dark"] #bottom-nav { background:var(--c-surface); border-color:var(--c-border); }
[data-theme="dark"] .progress { background:var(--c-border); border-color:var(--c-border-2); }
[data-theme="dark"] .wh-card, [data-theme="dark"] .comp-card, [data-theme="dark"] .batch-job,
[data-theme="dark"] .wu-card, [data-theme="dark"] .acc-card, [data-theme="dark"] .bot-card,
[data-theme="dark"] .camp-card, [data-theme="dark"] .key-card { background:var(--c-surface); border-color:var(--c-border); }
[data-theme="dark"] .skeleton-card { background:var(--c-surface); border-color:var(--c-border); }
[data-theme="dark"] .skeleton-row { border-color:var(--c-border); }
[data-theme="dark"] .code-block, [data-theme="dark"] .json-viewer,
[data-theme="dark"] .msg-preview, [data-theme="dark"] .event-stream { background:#080b0d; }
[data-theme="dark"] .stream-header { background:#111519; border-color:var(--c-border); }

/* ── DARK MODE TRANSITION ───────────────────────────────────────── */
/* Smooth bg/border transitions on structural containers only */
body, #sidebar, #topbar, #bottom-nav, #mobile-drawer,
.card, .stat-card, .modal, .dropdown-menu {
  transition: background-color 200ms ease, border-color 200ms ease;
}

/* Explicit dark text overrides — ensure readability */
[data-theme="dark"] .stat-value   { color: var(--c-text) !important; }
[data-theme="dark"] .stat-label   { color: var(--c-text-2); }
[data-theme="dark"] .page-title   { color: var(--c-text); }
[data-theme="dark"] .page-subtitle{ color: var(--c-text-2); }
[data-theme="dark"] .card-title   { color: var(--c-text); }
[data-theme="dark"] .card-subtitle{ color: var(--c-text-2); }
[data-theme="dark"] .section-title{ color: var(--c-text); }
[data-theme="dark"] .stat-card    { color: var(--c-text); }
[data-theme="dark"] a.stat-card   { color: var(--c-text) !important; }
[data-theme="dark"] .user-name    { color: var(--c-text); }
[data-theme="dark"] .table td     { color: var(--c-text); }

/* Direct layout dark overrides (V8.4 — palette AI-studio) */
[data-theme="dark"] body            { background-color: #0B0C10 !important; color: var(--c-text); }
[data-theme="dark"] #app            { background-color: #0B0C10; }
[data-theme="dark"] #page-wrapper   { background-color: #0B0C10; }
[data-theme="dark"] #main-content   { background-color: #0B0C10; }
[data-theme="dark"] .card           { background-color: #13151C; border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .stat-card      { background-color: #13151C; border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .filter-chip    { background-color: #1A1D26; border-color: rgba(255,255,255,.12); color: var(--c-text-2); }
[data-theme="dark"] .filter-chip:hover { border-color: rgba(255,255,255,.2); color: var(--c-text); }
[data-theme="dark"] .filter-chip.active { background-color: rgba(109,93,246,.15); border-color: rgba(109,93,246,.4); color: var(--c-primary-st); }
[data-theme="dark"] .search-bar     { background-color: #1A1D26; border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .search-bar input { color: var(--c-text); }
[data-theme="dark"] .input          { background-color: #1A1D26; border-color: rgba(255,255,255,.12); color: var(--c-text); }
[data-theme="dark"] .tabs           { border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .nav-section-label { color: var(--c-text-3); }

/* ── KBD ─────────────────────────────────────────────────────────── */
kbd { background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:4px;padding:1px 6px;font-size:11px;font-family:ui-monospace,monospace;color:var(--c-text-2); }
.nav-kbd { display:none;font-size:9.5px;margin-left:auto;opacity:.6; }
.nav-item:hover .nav-kbd { display:block; }
.search-kbd { font-size:10.5px;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:4px;padding:1px 6px;color:var(--c-text-3);font-family:ui-monospace,monospace;flex-shrink:0; }}

[data-theme="dark"] select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23848e9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
[data-theme="dark"] .topbar-search input:focus { border-color:var(--c-primary); box-shadow:var(--sh-focus); }
[data-theme="dark"] .search-kbd { background:#1c2127; border-color:var(--c-border); color:var(--c-text-3); }
[data-theme="dark"] .topbar-icon-btn:hover { background:var(--c-surface-2); }
[data-theme="dark"] .topbar-notif-dot { border-color:var(--c-bg); }