/* ═══════════════════════════════════════════════════════════════════════
   CliqXpress theme layer — loaded AFTER app.css.
   Admin picks the preset (data-preset), each user picks a mode (data-mode).
   data-theme stays "light"/"dark" so every existing [data-theme="dark"] rule
   in app.css and the views keeps working.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────── 1. TOKENS ───────────── */

/* Obsidian · Night (default) */
:root[data-preset="obsidian"]{
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --radius:12px; --radius-lg:18px;
}
:root[data-preset="obsidian"][data-mode="dark"]{
  --bg:#0B0D12; --surface:#12151C; --surface-2:#181C25; --surface-3:#1F2430;
  --border:rgba(255,255,255,.07); --border-dark:rgba(255,255,255,.12);
  --text:#ECEDEF; --text-secondary:#A3A8B6; --text-muted:#80869A;
  --primary:#D4A94F; --primary-dark:#B88D35; --primary-light:rgba(212,169,79,.13); --on-primary:#1A1406; --accent-2:#EBCB86;
  --btn-grad:linear-gradient(180deg,#EBCB86,#D4A94F);
  --success:#3DD68C; --success-light:rgba(61,214,140,.12); --danger:#F2777A; --danger-light:rgba(242,119,122,.12);
  --warning:#F5B94A; --warning-light:rgba(245,185,74,.12); --info:#60A5FA; --secondary:#A3A8B6;
  --shadow:inset 0 1px 0 rgba(255,255,255,.04); --shadow-md:0 12px 32px rgba(0,0,0,.35);
  --side-bg:linear-gradient(180deg,#0E1016,#0B0D12); --topbar-bg:rgba(11,13,18,.82); --tabbar-bg:rgba(24,28,37,.9); --menu-bg:#181C25; --modal-bg:#151821; --input-bg:#12151C;
  --hero-bg:radial-gradient(120% 140% at 100% 0%,rgba(212,169,79,.24),transparent 55%),linear-gradient(160deg,#171A22,#101218);
  --hero-border:rgba(212,169,79,.25); --hero-text:#F3EEE2; --hero-muted:#A9A391; --hero-chip:rgba(255,255,255,.05); --hero-chip-border:rgba(255,255,255,.14);
  --bal-card:#12151C; --bal-border:rgba(212,169,79,.22); --nav-active:linear-gradient(90deg,rgba(212,169,79,.15),rgba(212,169,79,.02));
  --ring:rgba(212,169,79,.18); --glow:radial-gradient(60% 50% at 90% -10%,rgba(212,169,79,.10),transparent 70%);
}
/* Obsidian · Ivory (light) */
:root[data-preset="obsidian"][data-mode="light"]{
  --bg:#F6F3EC; --surface:#FFFFFF; --surface-2:#FAF8F3; --surface-3:#F1EDE3;
  --border:rgba(23,21,15,.08); --border-dark:rgba(23,21,15,.15);
  --text:#17150F; --text-secondary:#57524A; --text-muted:#756F64;
  --primary:#8A6420; --primary-dark:#6F4F16; --primary-light:#F3EBDA; --on-primary:#FFFFFF; --accent-2:#8A6420;
  --btn-grad:linear-gradient(180deg,#9C7428,#7E5A1A);
  --success:#0F7A4F; --success-light:#E5F4EC; --danger:#B42318; --danger-light:#FCE9E7;
  --warning:#9A6100; --warning-light:#FDF1DC; --info:#1D4ED8; --secondary:#57524A;
  --shadow:0 1px 2px rgba(23,21,15,.04),0 4px 14px rgba(23,21,15,.05); --shadow-md:0 14px 34px rgba(23,21,15,.12);
  --side-bg:#FFFFFF; --topbar-bg:rgba(255,255,255,.86); --tabbar-bg:rgba(255,255,255,.94); --menu-bg:#FFFFFF; --modal-bg:#FFFFFF; --input-bg:#FFFFFF;
  --hero-bg:radial-gradient(120% 140% at 100% 0%,rgba(212,169,79,.30),transparent 55%),linear-gradient(160deg,#1C1A15,#11100C);
  --hero-border:rgba(138,100,32,.35); --hero-text:#F7F1E3; --hero-muted:#B9B19E; --hero-chip:rgba(255,255,255,.07); --hero-chip-border:rgba(255,255,255,.18);
  --bal-card:#17150F; --bal-border:rgba(138,100,32,.4); --nav-active:linear-gradient(90deg,#F3EBDA,rgba(243,235,218,.2));
  --ring:rgba(138,100,32,.16); --glow:radial-gradient(60% 50% at 90% -10%,rgba(212,169,79,.16),transparent 70%);
}
/* Obsidian · Emerald */
:root[data-preset="obsidian"][data-mode="emerald"]{
  --bg:#0A0F0D; --surface:#101714; --surface-2:#151E1A; --surface-3:#1B2621;
  --border:rgba(255,255,255,.07); --border-dark:rgba(255,255,255,.12);
  --text:#E8EFEB; --text-secondary:#A2B3AA; --text-muted:#7F9288;
  --primary:#34D399; --primary-dark:#10B981; --primary-light:rgba(52,211,153,.13); --on-primary:#04160F; --accent-2:#6EE7B7;
  --btn-grad:linear-gradient(180deg,#6EE7B7,#34D399);
  --success:#4ADE80; --success-light:rgba(74,222,128,.12); --danger:#F87171; --danger-light:rgba(248,113,113,.12);
  --warning:#FBBF24; --warning-light:rgba(251,191,36,.12); --info:#60A5FA; --secondary:#A2B3AA;
  --shadow:inset 0 1px 0 rgba(255,255,255,.04); --shadow-md:0 12px 32px rgba(0,0,0,.35);
  --side-bg:linear-gradient(180deg,#0C1310,#0A0F0D); --topbar-bg:rgba(10,15,13,.82); --tabbar-bg:rgba(21,30,26,.9); --menu-bg:#151E1A; --modal-bg:#121A16; --input-bg:#101714;
  --hero-bg:radial-gradient(120% 140% at 100% 0%,rgba(52,211,153,.22),transparent 55%),linear-gradient(160deg,#13201A,#0D1411);
  --hero-border:rgba(52,211,153,.25); --hero-text:#ECF7F1; --hero-muted:#9DB5A9; --hero-chip:rgba(255,255,255,.05); --hero-chip-border:rgba(255,255,255,.14);
  --bal-card:#101714; --bal-border:rgba(52,211,153,.22); --nav-active:linear-gradient(90deg,rgba(52,211,153,.15),rgba(52,211,153,.02));
  --ring:rgba(52,211,153,.18); --glow:radial-gradient(60% 50% at 90% -10%,rgba(52,211,153,.10),transparent 70%);
}
/* Obsidian · Sapphire */
:root[data-preset="obsidian"][data-mode="sapphire"]{
  --bg:#0A0D14; --surface:#10141E; --surface-2:#151A26; --surface-3:#1C2230;
  --border:rgba(255,255,255,.07); --border-dark:rgba(255,255,255,.12);
  --text:#E9ECF3; --text-secondary:#A3ABBE; --text-muted:#808AA0;
  --primary:#60A5FA; --primary-dark:#3B82F6; --primary-light:rgba(96,165,250,.14); --on-primary:#06101F; --accent-2:#93C5FD;
  --btn-grad:linear-gradient(180deg,#93C5FD,#60A5FA);
  --success:#3DD68C; --success-light:rgba(61,214,140,.12); --danger:#F2777A; --danger-light:rgba(242,119,122,.12);
  --warning:#F5B94A; --warning-light:rgba(245,185,74,.12); --info:#93C5FD; --secondary:#A3ABBE;
  --shadow:inset 0 1px 0 rgba(255,255,255,.04); --shadow-md:0 12px 32px rgba(0,0,0,.35);
  --side-bg:linear-gradient(180deg,#0D111A,#0A0D14); --topbar-bg:rgba(10,13,20,.82); --tabbar-bg:rgba(21,26,38,.9); --menu-bg:#151A26; --modal-bg:#121722; --input-bg:#10141E;
  --hero-bg:radial-gradient(120% 140% at 100% 0%,rgba(96,165,250,.24),transparent 55%),linear-gradient(160deg,#141A27,#0E121B);
  --hero-border:rgba(96,165,250,.25); --hero-text:#EEF3FC; --hero-muted:#A1ACC4; --hero-chip:rgba(255,255,255,.05); --hero-chip-border:rgba(255,255,255,.14);
  --bal-card:#10141E; --bal-border:rgba(96,165,250,.24); --nav-active:linear-gradient(90deg,rgba(96,165,250,.16),rgba(96,165,250,.02));
  --ring:rgba(96,165,250,.2); --glow:radial-gradient(60% 50% at 90% -10%,rgba(96,165,250,.10),transparent 70%);
}

/* Aurora (all modes share Sora + glass) */
:root[data-preset="aurora"]{
  --font:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Sora',system-ui,sans-serif;
  --radius:14px; --radius-lg:22px;
}
:root[data-preset="aurora"][data-mode="dark"]{
  --bg:#070A1A; --surface:rgba(22,26,56,.66); --surface-2:rgba(255,255,255,.06); --surface-3:rgba(255,255,255,.10);
  --border:rgba(255,255,255,.10); --border-dark:rgba(255,255,255,.16);
  --text:#F3F4FF; --text-secondary:#B7BCD9; --text-muted:#9096B8;
  --primary:#8B5CF6; --primary-dark:#7C3AED; --primary-light:rgba(139,92,246,.18); --on-primary:#FFFFFF; --accent-2:#C4B5FD;
  --btn-grad:linear-gradient(135deg,#8B5CF6,#3B82F6);
  --success:#4ADE9B; --success-light:rgba(74,222,155,.13); --danger:#FB8A8A; --danger-light:rgba(251,138,138,.13);
  --warning:#FBBF5A; --warning-light:rgba(251,191,90,.13); --info:#7DD3FC; --secondary:#B7BCD9;
  --shadow:inset 0 1px 0 rgba(255,255,255,.07); --shadow-md:0 18px 44px rgba(3,4,20,.5);
  --side-bg:rgba(12,15,38,.62); --topbar-bg:rgba(9,12,32,.6); --tabbar-bg:rgba(16,18,44,.82); --menu-bg:rgba(20,23,54,.92); --modal-bg:#121633; --input-bg:rgba(255,255,255,.05);
  --hero-bg:linear-gradient(135deg,rgba(139,92,246,.38),rgba(59,130,246,.18) 60%,rgba(34,211,238,.12));
  --hero-border:rgba(255,255,255,.16); --hero-text:#FFFFFF; --hero-muted:#CDD0F0; --hero-chip:rgba(255,255,255,.10); --hero-chip-border:rgba(255,255,255,.22);
  --bal-card:rgba(255,255,255,.07); --bal-border:rgba(255,255,255,.14); --nav-active:linear-gradient(90deg,rgba(139,92,246,.30),rgba(59,130,246,.10));
  --ring:rgba(139,92,246,.28);
  --glow:radial-gradient(40% 35% at 15% 10%,rgba(139,92,246,.42),transparent 70%),radial-gradient(35% 30% at 85% 5%,rgba(59,130,246,.38),transparent 70%),radial-gradient(30% 30% at 65% 70%,rgba(34,211,238,.16),transparent 70%);
}
:root[data-preset="aurora"][data-mode="light"]{
  --bg:#F4F2FF; --surface:rgba(255,255,255,.74); --surface-2:rgba(255,255,255,.6); --surface-3:#ECE8FF;
  --border:rgba(76,29,149,.10); --border-dark:rgba(76,29,149,.18);
  --text:#1B1640; --text-secondary:#4B4770; --text-muted:#686490;
  --primary:#6D28D9; --primary-dark:#5B21B6; --primary-light:#EDE7FE; --on-primary:#FFFFFF; --accent-2:#6D28D9;
  --btn-grad:linear-gradient(135deg,#7C3AED,#2563EB);
  --success:#047857; --success-light:#DDF5EA; --danger:#B91C1C; --danger-light:#FDE8E8;
  --warning:#92400E; --warning-light:#FEF0D7; --info:#1D4ED8; --secondary:#4B4770;
  --shadow:0 1px 2px rgba(49,23,120,.05),0 6px 18px rgba(49,23,120,.07); --shadow-md:0 18px 44px rgba(49,23,120,.16);
  --side-bg:rgba(255,255,255,.62); --topbar-bg:rgba(255,255,255,.62); --tabbar-bg:rgba(255,255,255,.88); --menu-bg:rgba(255,255,255,.96); --modal-bg:#FFFFFF; --input-bg:rgba(255,255,255,.85);
  --hero-bg:linear-gradient(135deg,#7C3AED,#2563EB 70%,#0891B2);
  --hero-border:rgba(255,255,255,.4); --hero-text:#FFFFFF; --hero-muted:#E4E1FF; --hero-chip:rgba(255,255,255,.16); --hero-chip-border:rgba(255,255,255,.35);
  --bal-card:linear-gradient(135deg,#7C3AED,#2563EB); --bal-border:rgba(255,255,255,.3); --nav-active:linear-gradient(90deg,#EDE7FE,rgba(237,231,254,.3));
  --ring:rgba(109,40,217,.18);
  --glow:radial-gradient(40% 35% at 15% 10%,rgba(167,139,250,.35),transparent 70%),radial-gradient(35% 30% at 85% 5%,rgba(96,165,250,.30),transparent 70%),radial-gradient(30% 30% at 65% 70%,rgba(103,232,249,.18),transparent 70%);
}
:root[data-preset="aurora"][data-mode="sunset"]{
  --bg:#12070F; --surface:rgba(46,16,38,.62); --surface-2:rgba(255,255,255,.06); --surface-3:rgba(255,255,255,.10);
  --border:rgba(255,255,255,.10); --border-dark:rgba(255,255,255,.16);
  --text:#FFF1F7; --text-secondary:#E3BED0; --text-muted:#B9919F;
  --primary:#EC4899; --primary-dark:#DB2777; --primary-light:rgba(236,72,153,.18); --on-primary:#FFFFFF; --accent-2:#F9A8D4;
  --btn-grad:linear-gradient(135deg,#EC4899,#F97316);
  --success:#4ADE9B; --success-light:rgba(74,222,155,.13); --danger:#FCA5A5; --danger-light:rgba(252,165,165,.13);
  --warning:#FCD34D; --warning-light:rgba(252,211,77,.13); --info:#93C5FD; --secondary:#E3BED0;
  --shadow:inset 0 1px 0 rgba(255,255,255,.07); --shadow-md:0 18px 44px rgba(20,3,14,.55);
  --side-bg:rgba(30,10,26,.6); --topbar-bg:rgba(24,8,20,.6); --tabbar-bg:rgba(40,13,32,.84); --menu-bg:rgba(44,15,36,.94); --modal-bg:#2A0F23; --input-bg:rgba(255,255,255,.05);
  --hero-bg:linear-gradient(135deg,rgba(236,72,153,.40),rgba(249,115,22,.22) 65%,rgba(250,204,21,.10));
  --hero-border:rgba(255,255,255,.16); --hero-text:#FFFFFF; --hero-muted:#F6D3E3; --hero-chip:rgba(255,255,255,.10); --hero-chip-border:rgba(255,255,255,.22);
  --bal-card:rgba(255,255,255,.07); --bal-border:rgba(255,255,255,.14); --nav-active:linear-gradient(90deg,rgba(236,72,153,.30),rgba(249,115,22,.10));
  --ring:rgba(236,72,153,.28);
  --glow:radial-gradient(40% 35% at 15% 10%,rgba(236,72,153,.40),transparent 70%),radial-gradient(35% 30% at 85% 5%,rgba(249,115,22,.30),transparent 70%),radial-gradient(30% 30% at 65% 70%,rgba(168,85,247,.18),transparent 70%);
}
:root[data-preset="aurora"][data-mode="ocean"]{
  --bg:#041318; --surface:rgba(8,42,52,.6); --surface-2:rgba(255,255,255,.06); --surface-3:rgba(255,255,255,.10);
  --border:rgba(255,255,255,.10); --border-dark:rgba(255,255,255,.16);
  --text:#ECFEFF; --text-secondary:#A9D6DC; --text-muted:#82AEB5;
  --primary:#2DD4BF; --primary-dark:#14B8A6; --primary-light:rgba(45,212,191,.16); --on-primary:#042F2E; --accent-2:#99F6E4;
  --btn-grad:linear-gradient(135deg,#2DD4BF,#38BDF8);
  --success:#4ADE9B; --success-light:rgba(74,222,155,.13); --danger:#FCA5A5; --danger-light:rgba(252,165,165,.13);
  --warning:#FCD34D; --warning-light:rgba(252,211,77,.13); --info:#7DD3FC; --secondary:#A9D6DC;
  --shadow:inset 0 1px 0 rgba(255,255,255,.07); --shadow-md:0 18px 44px rgba(1,10,14,.55);
  --side-bg:rgba(5,28,35,.6); --topbar-bg:rgba(4,22,28,.6); --tabbar-bg:rgba(7,38,46,.86); --menu-bg:rgba(8,40,48,.95); --modal-bg:#082A33; --input-bg:rgba(255,255,255,.05);
  --hero-bg:linear-gradient(135deg,rgba(45,212,191,.32),rgba(56,189,248,.20) 65%,rgba(99,102,241,.12));
  --hero-border:rgba(255,255,255,.16); --hero-text:#FFFFFF; --hero-muted:#C7EEF0; --hero-chip:rgba(255,255,255,.10); --hero-chip-border:rgba(255,255,255,.22);
  --bal-card:rgba(255,255,255,.07); --bal-border:rgba(255,255,255,.14); --nav-active:linear-gradient(90deg,rgba(45,212,191,.26),rgba(56,189,248,.08));
  --ring:rgba(45,212,191,.26);
  --glow:radial-gradient(40% 35% at 15% 10%,rgba(45,212,191,.32),transparent 70%),radial-gradient(35% 30% at 85% 5%,rgba(56,189,248,.30),transparent 70%),radial-gradient(30% 30% at 65% 70%,rgba(99,102,241,.16),transparent 70%);
}

/* ───────────── 2. BASE ───────────── */
:root[data-preset]{ color-scheme:light }
:root[data-preset][data-theme="dark"]{ color-scheme:dark }
:root[data-preset] body{ font-family:var(--font); background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent }
:root[data-preset] body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:var(--glow) }
:root[data-preset="aurora"] body::before{ inset:-15%; filter:blur(30px) }
:root[data-preset] ::selection{ background:var(--primary-light); color:var(--text) }
:root[data-preset] *{ scrollbar-width:thin; scrollbar-color:var(--border-dark) transparent }
:root[data-preset] ::-webkit-scrollbar{ width:8px; height:8px }
:root[data-preset] ::-webkit-scrollbar-thumb{ background:var(--border-dark); border-radius:8px }
:root[data-preset] :focus-visible{ outline:2px solid var(--primary); outline-offset:2px }
:root[data-preset] h1,:root[data-preset] h2,:root[data-preset] h3,:root[data-preset] .page-title,:root[data-preset] .card-title,:root[data-preset] .modal-title{ font-family:var(--font-display); letter-spacing:-.015em; text-wrap:balance }
:root[data-preset="obsidian"] .page-title{ font-weight:600 }
.cx-switching *,.cx-switching *::before,.cx-switching *::after{ transition:background-color .25s ease,border-color .25s ease,color .2s ease!important }
:root[data-preset] .text-muted{ color:var(--text-muted)!important }

/* ───────────── 3. COMPONENTS (app.css) ───────────── */
:root[data-preset] .card,:root[data-preset] .stat-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow) }
:root[data-preset="aurora"] .card,:root[data-preset="aurora"] .stat-card{ -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px) }
:root[data-preset] .card-header{ border-bottom:1px solid var(--border); background:transparent }
:root[data-preset] .card-footer{ border-top:1px solid var(--border); background:transparent }
:root[data-preset] .card-title{ font-weight:600; font-size:1.02rem }
:root[data-preset] .stat-card .stat-value{ font-family:var(--font-display); letter-spacing:-.02em }

:root[data-preset] .btn{ border-radius:var(--radius); font-weight:650; font-family:var(--font); transition:transform .12s ease,filter .15s ease,background-color .15s ease,border-color .15s ease; touch-action:manipulation }
:root[data-preset] .btn:active:not(:disabled){ transform:scale(.98) }
:root[data-preset] .btn-primary{ background:var(--btn-grad); color:var(--on-primary); border:1px solid transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 18px var(--ring) }
:root[data-preset] .btn-primary:hover{ background:var(--btn-grad); color:var(--on-primary); filter:brightness(1.06) }
:root[data-preset] .btn-secondary{ background:var(--surface-2); color:var(--text); border:1px solid var(--border-dark) }
:root[data-preset] .btn-secondary:hover{ background:var(--surface-3); color:var(--text) }
:root[data-preset] .btn-outline{ background:transparent; color:var(--text); border:1px solid var(--border-dark) }
:root[data-preset] .btn-outline:hover{ border-color:var(--primary); color:var(--accent-2); background:var(--primary-light) }
:root[data-preset] .btn:disabled{ opacity:.5; box-shadow:none; filter:none }
:root[data-preset] .btn-lg{ min-height:50px }

:root[data-preset] .form-label{ color:var(--text-secondary); font-weight:600 }
:root[data-preset] .form-control{ background:var(--input-bg); color:var(--text); border:1px solid var(--border-dark); border-radius:var(--radius); min-height:46px; transition:border-color .15s,box-shadow .15s }
:root[data-preset] textarea.form-control{ min-height:96px }
:root[data-preset] .form-control::placeholder{ color:var(--text-muted); opacity:.8 }
:root[data-preset] .form-control:focus{ border-color:var(--primary); box-shadow:0 0 0 4px var(--ring); outline:none }
:root[data-preset] select.form-control option{ background:var(--modal-bg); color:var(--text) }
:root[data-preset] .form-hint{ color:var(--text-muted) }
@media (max-width:640px){ :root[data-preset] .form-control{ font-size:16px } }

:root[data-preset] .table-wrap{ border-radius:var(--radius) }
:root[data-preset] .table th{ background:transparent; color:var(--text-muted); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--border) }
:root[data-preset] .table td{ border-bottom:1px solid var(--border); color:var(--text) }
:root[data-preset] .table tbody tr:hover td{ background:var(--surface-2) }
:root[data-preset] .badge{ border-radius:999px; font-weight:650 }
:root[data-preset] .alert{ border-radius:var(--radius); box-shadow:var(--shadow-md) }
:root[data-preset] .modal-backdrop{ background:rgba(4,6,14,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px) }
:root[data-preset] .modal{ background:var(--modal-bg); border:1px solid var(--border-dark); border-radius:20px; box-shadow:var(--shadow-md); color:var(--text) }
:root[data-preset] .modal-header{ border-bottom:1px solid var(--border) }
:root[data-preset] .modal-footer{ border-top:1px solid var(--border) }
:root[data-preset] .page-link{ background:var(--surface); border:1px solid var(--border); color:var(--text-secondary); border-radius:10px }
:root[data-preset] .page-link.active{ background:var(--btn-grad); color:var(--on-primary); border-color:transparent }

/* Older views paint white text on var(--primary). On light accents (gold, mint, sky, teal) switch that text to the
   readable ink colour. Remove once Stage 2 replaces those inline styles. */
:root[data-preset] [style*="background:var(--primary)"][style*="color:#fff"],
:root[data-preset] [style*="background: var(--primary)"][style*="color: #fff"]{ color:var(--on-primary)!important }

/* ───────────── 4. THEME PICKER ───────────── */
.tp{ position:relative; flex-shrink:0 }
:root[data-preset] .tp-btn{ width:40px; height:40px; padding:0; border-radius:12px; display:inline-grid; place-items:center; gap:0;
  background:var(--surface-2); border:1px solid var(--border-dark); color:var(--text-secondary); cursor:pointer; transition:border-color .15s,color .15s,transform .12s }
:root[data-preset] .tp-btn:hover,.tp.open .tp-btn{ color:var(--text); border-color:var(--primary); background:var(--surface-2) }
:root[data-preset] .tp-btn:active{ transform:scale(.94) }
.tp-btn svg{ width:19px; height:19px; display:block }
.tp-menu{ position:absolute; right:0; top:calc(100% + 8px); z-index:700; width:240px; padding:6px; border-radius:16px;
  background:var(--menu-bg); border:1px solid var(--border-dark); box-shadow:var(--shadow-md); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  animation:tpIn .18s cubic-bezier(.22,1,.36,1) }
.tp-menu[hidden]{ display:none }
@keyframes tpIn{ from{ opacity:0; transform:translateY(-4px) scale(.98) } to{ opacity:1; transform:none } }
.tp-head{ font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); padding:8px 10px 6px }
.tp-item{ display:flex; align-items:center; gap:11px; width:100%; min-height:42px; padding:6px 10px; border:0; border-radius:10px; background:none;
  color:var(--text); font:500 .875rem/1.2 var(--font); text-align:left; cursor:pointer }
.tp-item:hover,.tp-item:focus-visible{ background:var(--surface-3); outline:none }
.tp-sw{ width:22px; height:22px; flex-shrink:0; border-radius:50%; background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%); box-shadow:inset 0 0 0 1px rgba(128,128,128,.4) }
.tp-sys{ background:linear-gradient(135deg,#111318 50%,#F4F2EC 50%) }
.tp-tick{ margin-left:auto; color:var(--accent-2); opacity:0 }
.tp-item.on .tp-tick{ opacity:1 }
.tp-item.on .tp-name{ font-weight:700 }
.tp-sep{ height:1px; background:var(--border); margin:4px 6px }

/* ───────────── 5. CLIENT LAYOUT ───────────── */
:root[data-preset] .c-wrap{ background:transparent }
:root[data-preset] .c-sidebar{ width:252px; background:var(--side-bg); border-right:1px solid var(--border) }
:root[data-preset="aurora"] .c-sidebar,:root[data-preset="aurora"] .a-sidebar{ -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px) }
:root[data-preset] .c-brand{ border-bottom:0; padding:20px 20px 14px; min-height:64px }
:root[data-preset] .c-brand-name{ font-family:var(--font-display); font-size:1.08rem; font-weight:700; letter-spacing:-.01em }
:root[data-preset] .c-sidebar-bal{ margin:2px 14px 8px; padding:14px 16px; border-radius:16px; background:var(--bal-card); color:var(--hero-text,#fff); border:1px solid var(--bal-border); box-shadow:var(--shadow) }
:root[data-preset="obsidian"]:not([data-mode="light"]) .c-sidebar-bal{ color:var(--text) }
:root[data-preset] .c-sidebar-bal-label{ opacity:1; color:var(--hero-muted); font-size:.62rem; letter-spacing:.12em }
:root[data-preset="obsidian"]:not([data-mode="light"]) .c-sidebar-bal-label{ color:var(--text-muted) }
:root[data-preset] .c-sidebar-bal-val{ font-family:var(--font-display); font-size:1.45rem; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
:root[data-preset] .c-sidebar-bal-fund{ color:var(--accent-2); font-weight:700; margin-top:8px }
:root[data-preset="obsidian"][data-mode="light"] .c-sidebar-bal-fund{ color:#EBCB86 }
:root[data-preset="aurora"] .c-sidebar-bal-fund{ color:#fff }
:root[data-preset] .c-sidebar-bal-fund:hover{ color:var(--text) }
:root[data-preset] .c-nav{ padding:4px 0 28px }
:root[data-preset] .c-nav-label{ color:var(--text-muted); font-size:.62rem; letter-spacing:.14em; padding:16px 22px 6px }
:root[data-preset] .c-nav-link,:root[data-preset] .c-nav-acc,:root[data-preset] .c-nav-logout{ margin:1px 10px; width:calc(100% - 20px); padding:10px 12px; border-left:0; border-radius:11px; font-size:.875rem }
:root[data-preset] .c-nav-link,:root[data-preset] .c-nav-acc{ color:var(--text-secondary) }
:root[data-preset] .c-nav-link:hover,:root[data-preset] .c-nav-acc:hover,:root[data-preset] .c-nav-logout:hover{ background:var(--surface-2); color:var(--text) }
:root[data-preset] .c-nav-link.active,:root[data-preset] .c-nav-acc.active{ background:var(--nav-active); color:var(--text); font-weight:650; box-shadow:inset 2px 0 0 var(--primary) }
:root[data-preset] .c-nav-link.active svg,:root[data-preset] .c-nav-acc.active svg{ color:var(--accent-2); opacity:1 }
:root[data-preset] .c-nav-sub{ background:transparent }
:root[data-preset] .c-nav-sub .c-nav-link{ background:transparent; padding-left:40px; font-size:.84rem }
:root[data-preset] .c-nav-sub .c-nav-link.active{ background:var(--primary-light); color:var(--text); box-shadow:none }
:root[data-preset] .c-main{ background:transparent }
:root[data-preset] .c-topbar{ height:64px; background:var(--topbar-bg); border-bottom:1px solid var(--border); box-shadow:none; padding:0 24px; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); position:relative; z-index:300 }
:root[data-preset] .c-topbar-title{ font-family:var(--font-display); font-size:1.18rem; font-weight:600; letter-spacing:-.01em }
:root[data-preset] .c-topbar-right{ gap:10px }
:root[data-preset] .c-topbar-bal{ background:var(--primary-light); color:var(--text); border:1px solid var(--bal-border); padding:8px 14px; font-variant-numeric:tabular-nums; font-size:.82rem }
:root[data-preset] .c-avatar{ width:38px; height:38px; background:var(--surface-3); color:var(--text); border:1px solid var(--border-dark) }
:root[data-preset] .c-profile-link:hover{ background:var(--surface-2) }
:root[data-preset] .c-mob-logout-btn{ width:40px; height:40px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border-dark) }
:root[data-preset] .c-content{ padding:28px 28px 40px }
:root[data-preset] .c-footer{ background:transparent; border-top:1px solid var(--border); color:var(--text-muted) }
:root[data-preset] .c-overlay{ background:rgba(3,4,10,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px) }
:root[data-preset] .c-ham span{ background:var(--text) }

/* Mobile bottom tab bar */
.c-tabbar{ display:none }
@media (max-width:900px){
  :root[data-preset] .c-sidebar{ background:var(--modal-bg) }
  :root[data-preset] .c-topbar{ padding:0 14px; padding-top:env(safe-area-inset-top); height:calc(60px + env(safe-area-inset-top)) }
  :root[data-preset] .c-content{ padding:16px 14px calc(104px + env(safe-area-inset-bottom)) }
  :root[data-preset] .c-content.hist-page{ padding-bottom:calc(92px + env(safe-area-inset-bottom)) }
  :root[data-preset] .c-footer{ display:none }
  .c-tabbar{ position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:180; height:66px; border-radius:22px;
    display:grid; grid-template-columns:repeat(5,1fr); align-items:center; background:var(--tabbar-bg); border:1px solid var(--border-dark);
    box-shadow:var(--shadow-md); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px) }
  .c-tab{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; height:100%; min-width:0; padding:0; border:0; background:none;
    color:var(--text-muted); font:600 10.5px/1.1 var(--font); text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent }
  .c-tab:hover{ text-decoration:none; color:var(--text) }
  .c-tab:visited{ color:var(--text-muted) }
  .c-tab svg{ width:22px; height:22px; padding:3px 9px; box-sizing:content-box; border-radius:12px; transition:background-color .15s }
  .c-tab.on{ color:var(--accent-2) }
  .c-tab.on svg{ background:var(--primary-light) }
  .wa-fab{ bottom:calc(88px + env(safe-area-inset-bottom))!important }
  .c-flash{ top:calc(70px + env(safe-area-inset-top))!important }
}

/* ───────────── 6. ADMIN LAYOUT ───────────── */
:root[data-preset] .a-sidebar{ background:var(--side-bg); border-right:1px solid var(--border) }
@media (max-width:900px){ :root[data-preset] .a-sidebar{ background:var(--modal-bg) } }
:root[data-preset] .a-brand{ border-bottom:0; padding:20px 20px 12px; min-height:64px }
:root[data-preset] .a-brand-name{ font-family:var(--font-display); font-size:1.05rem; font-weight:700 }
:root[data-preset] .a-nav-label{ color:var(--text-muted); font-size:.62rem; letter-spacing:.14em; padding:16px 22px 6px }
:root[data-preset] .a-nav-link{ margin:1px 10px; padding:9px 12px; border-left:0; border-radius:11px; color:var(--text-secondary); font-size:.86rem }
:root[data-preset] .a-nav-link:hover{ background:var(--surface-2); color:var(--text) }
:root[data-preset] .a-nav-link.active{ background:var(--nav-active); color:var(--text); font-weight:650; box-shadow:inset 2px 0 0 var(--primary) }
:root[data-preset] .a-nav-link.active svg{ color:var(--accent-2); opacity:1 }
:root[data-preset] .a-nav-badge{ background:var(--danger); color:#fff }
:root[data-preset] .a-main{ background:transparent }
:root[data-preset] .a-topbar{ height:64px; background:var(--topbar-bg); border-bottom:1px solid var(--border); box-shadow:none; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px) }
:root[data-preset] .a-topbar-title{ font-family:var(--font-display); font-size:1.15rem; font-weight:600 }
:root[data-preset] .a-avatar{ width:36px; height:36px; background:var(--surface-3); color:var(--text); border:1px solid var(--border-dark) }
:root[data-preset] .a-footer{ background:transparent; border-top:1px solid var(--border) }
:root[data-preset] .a-content{ padding:28px 28px 48px }
@media (max-width:480px){ :root[data-preset] .a-content{ padding:16px 14px 40px } }
:root[data-preset] .a-ham span{ background:var(--text) }
.a-nav-ic{ width:17px; height:17px; flex-shrink:0; opacity:.75 }

/* ───────────── 7. AUTH PAGES ───────────── */
:root[data-preset] .auth-wrap{ min-height:calc(100vh - 56px); display:flex; align-items:center; justify-content:center; padding:32px 16px; background:transparent }
:root[data-preset] .auth-card{ width:100%; max-width:430px; padding:36px 32px; background:var(--surface); border:1px solid var(--border-dark); border-radius:24px; box-shadow:var(--shadow-md) }
:root[data-preset="aurora"] .auth-card{ -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px) }
:root[data-preset] .auth-logo{ margin-bottom:20px }
:root[data-preset] .auth-logo .site-name{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; letter-spacing:-.02em; color:var(--text) }
:root[data-preset] .auth-title{ font-family:var(--font-display); font-weight:600; font-size:1.3rem; color:var(--text) }
@media (max-width:480px){ :root[data-preset] .auth-card{ padding:28px 20px; border-radius:20px } }
.auth-corner{ position:fixed; top:calc(14px + env(safe-area-inset-top)); right:14px; z-index:50 }
.auth-foot{ text-align:center; padding:16px; font-size:.75rem; color:var(--text-muted); border-top:1px solid var(--border) }
.auth-foot a{ color:inherit; text-decoration:none; font-weight:600 }

/* ───────────── 8. CLIENT DASHBOARD ───────────── */
:root[data-preset] .dash-welcome h1{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.35rem,4vw,1.85rem); letter-spacing:-.02em }
:root[data-preset] .dash-role{ background:var(--surface-2); border-color:var(--border-dark) }
:root[data-preset] .dash-role-dot{ background:var(--primary-light); color:var(--accent-2) }
:root[data-preset] .dash-bal{ background:var(--hero-bg); border:1px solid var(--hero-border); border-radius:22px; padding:26px 26px 24px; color:var(--hero-text); box-shadow:var(--shadow),var(--shadow-md) }
:root[data-preset="aurora"] .dash-bal{ -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px) }
:root[data-preset] .dash-bal::before{ top:auto; right:-60px; bottom:-90px; width:240px; height:240px; background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%) }
:root[data-preset] .dash-bal::after{ display:none }
:root[data-preset] .dash-bal-label{ color:var(--hero-muted); opacity:1; letter-spacing:.12em }
:root[data-preset] .dash-bal-val{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.3rem,7.5vw,3.4rem); letter-spacing:-.03em; margin:8px 0 18px; font-variant-numeric:tabular-nums }
:root[data-preset="aurora"] .dash-bal-val{ font-weight:300; letter-spacing:-.045em }
:root[data-preset] .dash-bal-cur{ font-size:.48em; opacity:.8; margin-right:6px; vertical-align:.5em }
:root[data-preset="obsidian"] .dash-bal-cur{ color:var(--accent-2); opacity:1 }
:root[data-preset="obsidian"][data-mode="light"] .dash-bal-cur{ color:#EBCB86 }
:root[data-preset] .dash-bal-actions{ gap:10px }
:root[data-preset] .dash-bal-actions a{ min-height:46px; padding:0 18px; border-radius:13px; font-size:.86rem; font-weight:700; transition:transform .12s,filter .15s }
:root[data-preset] .dash-bal-actions a:active{ transform:scale(.98) }
:root[data-preset] .dash-bal-fund{ background:var(--btn-grad); color:var(--on-primary); box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 22px var(--ring) }
:root[data-preset="obsidian"][data-mode="light"] .dash-bal-fund{ background:linear-gradient(180deg,#EBCB86,#D4A94F); color:#1A1406 }
:root[data-preset="aurora"][data-mode="light"] .dash-bal-fund{ background:#fff; color:#4C1D95 }
:root[data-preset] .dash-bal-hist{ background:var(--hero-chip); border:1px solid var(--hero-chip-border); color:var(--hero-text) }
:root[data-preset] .dash-bal-actions svg{ width:16px; height:16px }
:root[data-preset] .dash-stats{ gap:12px }
:root[data-preset] .dash-stat{ background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:16px 18px; box-shadow:var(--shadow) }
:root[data-preset="aurora"] .dash-stat,:root[data-preset="aurora"] .dash-action{ -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px) }
:root[data-preset] .dash-stat-label{ color:var(--text-muted); letter-spacing:.1em }
:root[data-preset] .dash-stat-val{ font-family:var(--font-display); font-weight:600; font-size:1.85rem; letter-spacing:-.02em; margin-top:4px; font-variant-numeric:tabular-nums }
:root[data-preset] .dash-actions{ gap:12px; grid-template-columns:repeat(3,1fr) }
:root[data-preset] .dash-action{ background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:18px 10px; box-shadow:var(--shadow) }
:root[data-preset] .dash-action:hover{ border-color:var(--primary); box-shadow:0 0 0 4px var(--ring) }
:root[data-preset] .dash-action-icon{ width:48px; height:48px; border-radius:15px; background:var(--primary-light); color:var(--accent-2); border:1px solid var(--bal-border) }
:root[data-preset] .dash-action-icon svg{ stroke:currentColor }
:root[data-preset] .dash-action-title{ font-size:.85rem }
:root[data-preset] .dash-empty-icon{ width:52px; height:52px; margin:0 auto 10px; border-radius:16px; display:grid; place-items:center; background:var(--primary-light); color:var(--accent-2) }
:root[data-preset] .dash-ref-link{ color:var(--accent-2) }
.dash-app{ display:flex; align-items:center; gap:14px; padding:16px; margin-bottom:16px; border-radius:18px; text-decoration:none; color:var(--hero-text); background:var(--hero-bg); border:1px solid var(--hero-border) }
.dash-app:hover{ text-decoration:none; filter:brightness(1.05) }
.dash-app-ic{ width:46px; height:46px; flex-shrink:0; border-radius:14px; display:grid; place-items:center; background:var(--hero-chip); border:1px solid var(--hero-chip-border) }
.dash-app-cta{ flex-shrink:0; background:var(--hero-chip); border:1px solid var(--hero-chip-border); border-radius:10px; padding:8px 14px; font-size:.8rem; font-weight:700 }
@media (max-width:640px){
  :root[data-preset] .dash-bal{ padding:20px; border-radius:20px }
  :root[data-preset] .dash-bal-actions a{ flex:1 1 auto; justify-content:center; padding:0 12px }
  :root[data-preset] .dash-stat-val{ font-size:1.5rem }
  :root[data-preset] .dash-action-icon{ width:44px; height:44px; border-radius:14px }
}
@media (prefers-reduced-motion:reduce){ :root[data-preset] *{ animation:none!important; transition:none!important } }

/* ───────────── 9. STAGE 2 SHARED (buy data, bulk, history, wallet) ───────────── */
.bd-seg{display:inline-flex;padding:4px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border)}
.bd-seg a{padding:9px 18px;border-radius:10px;font-weight:650;font-size:.875rem;color:var(--text-secondary);text-decoration:none;min-height:40px;display:flex;align-items:center}
.bd-seg a:hover{color:var(--text);text-decoration:none}
.bd-seg a.on{background:var(--surface-3,var(--surface));color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 3px rgba(0,0,0,.12)}
@media (max-width:480px){ .bd-seg{width:100%} .bd-seg a{flex:1;justify-content:center} }
.cx-i{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.17em;flex-shrink:0}
.cx-ic-tile{width:56px;height:56px;margin:0 auto 12px;border-radius:18px;display:grid;place-items:center;background:var(--primary-light);color:var(--accent-2,var(--primary))}
.cx-ic-tile svg{width:26px;height:26px}
.cx-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;border:1px solid var(--border-dark);font-size:.84rem;line-height:1.45;background:var(--surface-2);color:var(--text)}
.cx-note>svg{flex-shrink:0;width:18px;height:18px;margin-top:1px}
.cx-note b,.cx-note strong{font-weight:700}
.cx-ok{background:var(--success-light);border-color:color-mix(in srgb,var(--success) 35%,transparent);color:var(--text)} .cx-ok>svg,.cx-ok .cx-t{color:var(--success)}
.cx-warn{background:var(--warning-light);border-color:color-mix(in srgb,var(--warning) 35%,transparent);color:var(--text)} .cx-warn>svg,.cx-warn .cx-t{color:var(--warning)}
.cx-bad{background:var(--danger-light);border-color:color-mix(in srgb,var(--danger) 35%,transparent);color:var(--text)} .cx-bad>svg,.cx-bad .cx-t{color:var(--danger)}
.cx-info{background:var(--primary-light);border-color:var(--bal-border,var(--border-dark));color:var(--text)} .cx-info>svg,.cx-info .cx-t{color:var(--accent-2,var(--primary))}
.cx-code{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:14px;font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:.82rem;line-height:2;color:var(--text-secondary)}
.cx-code .k{color:var(--success)} .cx-code .v{color:var(--accent-2,var(--primary))} .cx-code .c{color:var(--text-muted)}
.cx-th{background:var(--primary-light)!important;color:var(--text)!important;text-align:center}
.cx-step-n{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:800;font-size:.9rem;background:var(--btn-grad,var(--primary));color:var(--on-primary,#fff)}
.cx-pill-shop{background:color-mix(in srgb,var(--accent-2,#6366f1) 18%,transparent)!important;color:var(--accent-2,#6366f1)!important}
:root[data-preset] .network-btn{border-radius:999px;min-height:42px;padding:0 16px}
:root[data-preset] .fund-tab-btn,:root[data-preset] .tab-btn{border-radius:999px}
:root[data-preset] .hist-card{border-radius:var(--radius-lg);box-shadow:var(--shadow)}
:root[data-preset="aurora"] .hist-card{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
:root[data-preset] .hist-foot{background:transparent}
:root[data-preset] .stat-card .stat-label{color:var(--text-muted);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
:root[data-preset] .stat-card .stat-value{font-weight:600;font-variant-numeric:tabular-nums}
.cx-wallet-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.cx-wallet-hero .dash-bal-val{margin-bottom:6px}
.cx-wallet-hero .cx-sub{color:var(--hero-muted);font-size:.82rem}
/* Let grid children shrink on phones (stops wide tables/textareas pushing the page sideways) */
:root[data-preset] .grid > *{ min-width:0 }
/* Balance card base (the dashboard defines these inline; other pages reuse the same card) */
.dash-bal{ position:relative; overflow:hidden; margin-bottom:16px }
.dash-bal > *{ position:relative; z-index:1 }
.dash-bal-label{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em }
.dash-bal-val{ line-height:1.05 }
.dash-bal-actions{ display:flex; flex-wrap:wrap; gap:10px }
.dash-bal-actions a{ display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; text-decoration:none }
.dash-bal-actions a:hover{ text-decoration:none }
/* Stage 4: card headers with several buttons wrap instead of spilling off small screens */
:root[data-preset] .card-header{ flex-wrap:wrap; gap:8px }

/* ───────────── 10. SUB-AGENT DASHBOARD + SHOP OWNER (final stage) ───────────── */
:root[data-preset] .d-wrap,:root[data-preset] .d-main{ background:transparent }
:root[data-preset] .d-sidebar{ background:var(--side-bg); border-right:1px solid var(--border) }
:root[data-preset="aurora"] .d-sidebar{ -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px) }
@media (max-width:900px){ :root[data-preset] .d-sidebar{ background:var(--modal-bg) } }
:root[data-preset] .d-brand{ border-bottom:0 }
:root[data-preset] .d-brand-name{ font-family:var(--font-display); font-weight:700 }
:root[data-preset] .d-sidebar-bal{ margin:2px 14px 8px; border-radius:16px }
:root[data-preset] .d-sidebar-bal-val{ font-family:var(--font-display); font-variant-numeric:tabular-nums }
:root[data-preset] .d-nav-label{ color:var(--text-muted); letter-spacing:.14em }
:root[data-preset] .d-nav-link{ margin:1px 10px; border-left:0; border-radius:11px; color:var(--text-secondary) }
:root[data-preset] .d-nav-link:hover{ background:var(--surface-2); color:var(--text) }
:root[data-preset] .d-nav-link.active{ background:var(--nav-active); color:var(--text); box-shadow:inset 2px 0 0 var(--primary) }
:root[data-preset] .d-topbar{ background:var(--topbar-bg); border-bottom:1px solid var(--border); box-shadow:none; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px) }
:root[data-preset] .d-topbar-title{ font-family:var(--font-display); font-weight:600 }
:root[data-preset] .d-ham span{ background:var(--text) }
:root[data-preset] .d-overlay{ background:rgba(3,4,10,.55) }