/* ==================================================================
   HyperRecursor — Appearance layer (theme.css)
   Loaded after auth.css + app.css. Holds:
     1. Theme presets (design tokens) — selected via <html data-preset>
     2. Density / radius / sidebar-style switches
     3. Component restyling so every preset reads as a finished,
        commercial admin console (sidebar, cards, tables, forms …)
   Legacy token names (--green*) are kept as the "primary/brand"
   colour so existing inline styles in views keep working.
   ================================================================== */

/* ── 1. PRESETS ─────────────────────────────────────────────────── */

/* Petal Peach — default. Peach blush sidebar with a sky-blue tint */
html[data-preset="petal"]{
  --bg:#fbf9f9; --bg2:#f4f1f2; --surface:#ffffff; --surface2:#f6f8fb; --surface3:#edf2f8;
  --border:#e1e7ef; --border2:#cfd8e4;
  --text:#1b2440; --text2:#4a556f; --text3:#7f899d;
  --green:#1d3f8f; --green-dark:#152f6e; --green-light:#2e58bd;
  --green-dim:rgba(29,63,143,.08); --green-glow:rgba(29,63,143,.18); --on-primary:#ffffff;
  --link:#23409a;
  --success:#2a9550; --success-dim:rgba(42,149,80,.1);
  --danger:#d93b3b; --danger-dim:rgba(217,59,59,.09);
  --warning:#c97c04; --warning-dim:rgba(201,124,4,.1);
  --info:#2b78c6; --info-dim:rgba(43,120,198,.1);
  --violet:#6e4fc0; --violet-dim:rgba(110,79,192,.1);
  --alert-success:#1d6b3a; --alert-error:#a32424; --alert-warning:#7f4f00; --alert-info:#1e4e8c;
  --sidebar-bg:linear-gradient(180deg,#d3ebfb 0%,#dfe6f6 34%,#f2d9e2 68%,#f9c6cc 100%);
  --sidebar-solid:#f3e4e8;
  --sidebar-text:#1d2540; --sidebar-muted:#4e5874; --sidebar-head:#141b33;
  --sidebar-hover:rgba(255,255,255,.45); --sidebar-active-bg:rgba(255,255,255,.78);
  --sidebar-active-text:#1d3f8f; --sidebar-border:rgba(29,37,64,.08);
  --topbar-bg:#ffffff;
  --card-head-bg:linear-gradient(90deg,#fbfdff 0%,#ebf5fd 55%,#d6eafb 100%);
  --card-head-text:#1d2540;
  --thead-bg:#f5f8fc;
  --input-bg:#ffffff;
  --auth-panel:linear-gradient(160deg,#d3ebfb 0%,#e6e4f4 45%,#f9c9cd 100%);
  --overlay:rgba(23,31,56,.42);
  --shadow:0 10px 30px rgba(27,36,64,.10); --shadow-sm:0 1px 3px rgba(27,36,64,.06);
  --code-bg:#f6f8fb;
  color-scheme:light;
}

/* Sky Mist — cool blues */
html[data-preset="sky"]{
  --bg:#f7fafd; --bg2:#eef4fa; --surface:#ffffff; --surface2:#f4f8fc; --surface3:#e9f1f9;
  --border:#dbe5f0; --border2:#c8d6e6;
  --text:#14233b; --text2:#435570; --text3:#7a8aa2;
  --green:#1565c0; --green-dark:#0f4e98; --green-light:#2f7fd8;
  --green-dim:rgba(21,101,192,.08); --green-glow:rgba(21,101,192,.2); --on-primary:#ffffff;
  --link:#1565c0;
  --success:#22924c; --success-dim:rgba(34,146,76,.1);
  --danger:#d33a3a; --danger-dim:rgba(211,58,58,.09);
  --warning:#c47a00; --warning-dim:rgba(196,122,0,.1);
  --info:#0e7fb8; --info-dim:rgba(14,127,184,.1);
  --violet:#6a4fc2; --violet-dim:rgba(106,79,194,.1);
  --alert-success:#196a37; --alert-error:#a12424; --alert-warning:#7a4c00; --alert-info:#124d85;
  --sidebar-bg:linear-gradient(180deg,#e2f2ff 0%,#cfe6fa 55%,#b7d9f5 100%);
  --sidebar-solid:#dcecf9;
  --sidebar-text:#15253f; --sidebar-muted:#475a77; --sidebar-head:#0f1d33;
  --sidebar-hover:rgba(255,255,255,.5); --sidebar-active-bg:rgba(255,255,255,.85);
  --sidebar-active-text:#1565c0; --sidebar-border:rgba(20,35,59,.08);
  --topbar-bg:#ffffff;
  --card-head-bg:linear-gradient(90deg,#fbfdff 0%,#e9f3fc 60%,#d4e8f9 100%);
  --card-head-text:#15253f;
  --thead-bg:#f3f7fb; --input-bg:#ffffff;
  --auth-panel:linear-gradient(160deg,#e4f3ff 0%,#c9e2f8 60%,#b2d5f3 100%);
  --overlay:rgba(16,30,52,.42);
  --shadow:0 10px 30px rgba(20,35,59,.10); --shadow-sm:0 1px 3px rgba(20,35,59,.06);
  --code-bg:#f4f8fc;
  color-scheme:light;
}

/* Lavender Dusk — lilac to blush */
html[data-preset="lavender"]{
  --bg:#fbfafd; --bg2:#f3f1f8; --surface:#ffffff; --surface2:#f8f6fc; --surface3:#efebf7;
  --border:#e5e0f0; --border2:#d4cde6;
  --text:#231d3b; --text2:#544c6f; --text3:#857f9c;
  --green:#5a3ea6; --green-dark:#46308a; --green-light:#7457c4;
  --green-dim:rgba(90,62,166,.08); --green-glow:rgba(90,62,166,.2); --on-primary:#ffffff;
  --link:#5a3ea6;
  --success:#2a9550; --success-dim:rgba(42,149,80,.1);
  --danger:#d33a4a; --danger-dim:rgba(211,58,74,.09);
  --warning:#c47a00; --warning-dim:rgba(196,122,0,.1);
  --info:#3870c4; --info-dim:rgba(56,112,196,.1);
  --violet:#7c4fc0; --violet-dim:rgba(124,79,192,.1);
  --alert-success:#1d6b3a; --alert-error:#a3243a; --alert-warning:#7a4c00; --alert-info:#28508d;
  --sidebar-bg:linear-gradient(180deg,#e8e4fb 0%,#efdff4 50%,#f8d7e6 100%);
  --sidebar-solid:#eee6f6;
  --sidebar-text:#251f3d; --sidebar-muted:#5b5378; --sidebar-head:#1c1631;
  --sidebar-hover:rgba(255,255,255,.45); --sidebar-active-bg:rgba(255,255,255,.8);
  --sidebar-active-text:#5a3ea6; --sidebar-border:rgba(35,29,59,.08);
  --topbar-bg:#ffffff;
  --card-head-bg:linear-gradient(90deg,#fdfcff 0%,#f1ecfb 60%,#e6ddf7 100%);
  --card-head-text:#251f3d;
  --thead-bg:#f7f5fb; --input-bg:#ffffff;
  --auth-panel:linear-gradient(160deg,#e8e4fb 0%,#f1def3 55%,#f8d3e3 100%);
  --overlay:rgba(30,22,52,.42);
  --shadow:0 10px 30px rgba(35,29,59,.10); --shadow-sm:0 1px 3px rgba(35,29,59,.06);
  --code-bg:#f8f6fc;
  color-scheme:light;
}

/* Corporate Slate — dark rail, neutral workspace */
html[data-preset="slate"]{
  --bg:#f1f4f8; --bg2:#e8edf3; --surface:#ffffff; --surface2:#f7f9fb; --surface3:#eef2f6;
  --border:#e2e8f0; --border2:#cbd5e1;
  --text:#0f172a; --text2:#475569; --text3:#7b8798;
  --green:#2563eb; --green-dark:#1d4ed8; --green-light:#3b82f6;
  --green-dim:rgba(37,99,235,.08); --green-glow:rgba(37,99,235,.2); --on-primary:#ffffff;
  --link:#2563eb;
  --success:#16a34a; --success-dim:rgba(22,163,74,.1);
  --danger:#dc2626; --danger-dim:rgba(220,38,38,.08);
  --warning:#d97706; --warning-dim:rgba(217,119,6,.1);
  --info:#0284c7; --info-dim:rgba(2,132,199,.1);
  --violet:#7c3aed; --violet-dim:rgba(124,58,237,.1);
  --alert-success:#166534; --alert-error:#991b1b; --alert-warning:#92400e; --alert-info:#1e40af;
  --sidebar-bg:#1e293b; --sidebar-solid:#1e293b;
  --sidebar-text:#cbd5e1; --sidebar-muted:#94a3b8; --sidebar-head:#f1f5f9;
  --sidebar-hover:rgba(255,255,255,.06); --sidebar-active-bg:rgba(59,130,246,.18);
  --sidebar-active-text:#ffffff; --sidebar-border:rgba(255,255,255,.07);
  --topbar-bg:#ffffff;
  --card-head-bg:#ffffff; --card-head-text:#0f172a;
  --thead-bg:#f8fafc; --input-bg:#ffffff;
  --auth-panel:linear-gradient(160deg,#1e293b 0%,#273449 100%);
  --overlay:rgba(15,23,42,.5);
  --shadow:0 10px 30px rgba(15,23,42,.10); --shadow-sm:0 1px 3px rgba(15,23,42,.06);
  --code-bg:#f8fafc;
  color-scheme:light;
}

/* Midnight Petal — dark counterpart of Petal Peach */
html[data-preset="midnight"]{
  --bg:#0e1322; --bg2:#111728; --surface:#161d30; --surface2:#1b2339; --surface3:#222b44;
  --border:#252f48; --border2:#313c58;
  --text:#e7ebf5; --text2:#acb4c9; --text3:#78829b;
  --green:#f2a79c; --green-dark:#e48e82; --green-light:#f7c1b9;
  --green-dim:rgba(242,167,156,.12); --green-glow:rgba(242,167,156,.25); --on-primary:#1b1f2e;
  --link:#9cc3f5;
  --success:#4ccb7f; --success-dim:rgba(76,203,127,.12);
  --danger:#f26b6b; --danger-dim:rgba(242,107,107,.12);
  --warning:#f0b04a; --warning-dim:rgba(240,176,74,.12);
  --info:#6fb2f2; --info-dim:rgba(111,178,242,.12);
  --violet:#b39af5; --violet-dim:rgba(179,154,245,.12);
  --alert-success:#9be3b7; --alert-error:#fbb0b0; --alert-warning:#f8d79c; --alert-info:#b6d6fa;
  --sidebar-bg:linear-gradient(180deg,#17223d 0%,#1b2038 50%,#2a1f35 100%);
  --sidebar-solid:#161d30;
  --sidebar-text:#c9d0e2; --sidebar-muted:#8d97b0; --sidebar-head:#eef1f8;
  --sidebar-hover:rgba(255,255,255,.05); --sidebar-active-bg:rgba(242,167,156,.14);
  --sidebar-active-text:#f7c1b9; --sidebar-border:rgba(255,255,255,.06);
  --topbar-bg:#141a2c;
  --card-head-bg:linear-gradient(90deg,#171e32 0%,#1a2540 60%,#1e2c4a 100%);
  --card-head-text:#e7ebf5;
  --thead-bg:#1a2136; --input-bg:#121828;
  --auth-panel:linear-gradient(160deg,#17223d 0%,#21203a 55%,#2e2036 100%);
  --overlay:rgba(4,7,15,.65);
  --shadow:0 10px 30px rgba(0,0,0,.45); --shadow-sm:0 1px 4px rgba(0,0,0,.3);
  --code-bg:#0f1526;
  color-scheme:dark;
}

/* Graphite — neutral dark */
html[data-preset="graphite"]{
  --bg:#121417; --bg2:#15171b; --surface:#1a1d22; --surface2:#20242a; --surface3:#272b32;
  --border:#2a2e35; --border2:#353a43;
  --text:#e6e8eb; --text2:#a9afb9; --text3:#7a818c;
  --green:#5b9cf5; --green-dark:#3f82e0; --green-light:#86b7f8;
  --green-dim:rgba(91,156,245,.12); --green-glow:rgba(91,156,245,.25); --on-primary:#0b1220;
  --link:#86b7f8;
  --success:#46c27a; --success-dim:rgba(70,194,122,.12);
  --danger:#ef6363; --danger-dim:rgba(239,99,99,.12);
  --warning:#eaa63d; --warning-dim:rgba(234,166,61,.12);
  --info:#5fb3e8; --info-dim:rgba(95,179,232,.12);
  --violet:#a98ef2; --violet-dim:rgba(169,142,242,.12);
  --alert-success:#9ddcb6; --alert-error:#f8b0b0; --alert-warning:#f5d49b; --alert-info:#b3d6f6;
  --sidebar-bg:#16181c; --sidebar-solid:#16181c;
  --sidebar-text:#c4c9d1; --sidebar-muted:#868d98; --sidebar-head:#eef0f3;
  --sidebar-hover:rgba(255,255,255,.05); --sidebar-active-bg:rgba(91,156,245,.15);
  --sidebar-active-text:#9cc4fa; --sidebar-border:rgba(255,255,255,.06);
  --topbar-bg:#16181c;
  --card-head-bg:#1d2026; --card-head-text:#e6e8eb;
  --thead-bg:#1e2127; --input-bg:#16191d;
  --auth-panel:linear-gradient(160deg,#1a1d22 0%,#22262d 100%);
  --overlay:rgba(0,0,0,.65);
  --shadow:0 10px 30px rgba(0,0,0,.5); --shadow-sm:0 1px 4px rgba(0,0,0,.35);
  --code-bg:#14161a;
  color-scheme:dark;
}

/* Classic Green — the original console look */
html[data-preset="guardian"]{
  --bg:#080d08; --bg2:#0b110b; --surface:#0f180f; --surface2:#162016; --surface3:#1c2c1c;
  --border:#1c2e1c; --border2:#243824;
  --text:#e4ede4; --text2:#96b496; --text3:#5e7e5e;
  --green:#22c55e; --green-dark:#16a34a; --green-light:#4ade80;
  --green-dim:rgba(34,197,94,.1); --green-glow:rgba(34,197,94,.2); --on-primary:#04110a;
  --link:#4ade80;
  --success:#22c55e; --success-dim:rgba(34,197,94,.1);
  --danger:#ef4444; --danger-dim:rgba(239,68,68,.1);
  --warning:#f59e0b; --warning-dim:rgba(245,158,11,.1);
  --info:#38bdf8; --info-dim:rgba(56,189,248,.1);
  --violet:#a78bfa; --violet-dim:rgba(167,139,250,.1);
  --alert-success:#86efac; --alert-error:#fca5a5; --alert-warning:#fde68a; --alert-info:#93c5fd;
  --sidebar-bg:#0f180f; --sidebar-solid:#0f180f;
  --sidebar-text:#96b496; --sidebar-muted:#5e7e5e; --sidebar-head:#e4ede4;
  --sidebar-hover:#162016; --sidebar-active-bg:rgba(34,197,94,.1);
  --sidebar-active-text:#22c55e; --sidebar-border:#1c2e1c;
  --topbar-bg:#0f180f;
  --card-head-bg:#0f180f; --card-head-text:#e4ede4;
  --thead-bg:#162016; --input-bg:#162016;
  --auth-panel:#0b110b;
  --overlay:rgba(0,0,0,.7);
  --shadow:0 4px 24px rgba(0,0,0,.5); --shadow-sm:0 1px 6px rgba(0,0,0,.3);
  --code-bg:#0b110b;
  color-scheme:dark;
}

/* ── 2. SWITCHES ────────────────────────────────────────────────── */
html[data-radius="sharp"]{--radius:4px;--radius-sm:3px;--radius-xs:2px}
html[data-radius="soft"] {--radius:8px;--radius-sm:6px;--radius-xs:4px}
html[data-radius="round"]{--radius:14px;--radius-sm:9px;--radius-xs:6px}
html[data-sidebar="solid"]{--sidebar-bg:var(--sidebar-solid)}

/* ── 3. BASE ───────────────────────────────────────────────────── */
html[data-preset] body{font-family:var(--font-body);background:var(--bg);color:var(--text);
  font-size:13.5px;letter-spacing:0;font-feature-settings:"tnum" 0}
html[data-preset] a{color:var(--link)}
html[data-preset] a:hover{color:var(--green-dark)}
html[data-preset] ::selection{background:var(--green-glow)}
html[data-preset] ::-webkit-scrollbar-track{background:transparent}
html[data-preset] ::-webkit-scrollbar-thumb{background:var(--border2)}
html[data-preset] ::-webkit-scrollbar-thumb:hover{background:var(--text3)}
html[data-preset] :focus-visible{outline:2px solid var(--green-light);outline-offset:2px}

/* Icons (SVG sprite) */
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:currentColor;flex-shrink:0;overflow:visible}
.ico-sm{width:.85em;height:.85em}
.ico-lg{width:1.35em;height:1.35em;vertical-align:-.25em}
.ico-xl{width:2em;height:2em}
.ico-spin{animation:spin 1s linear infinite}
.icon-chip{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:var(--radius-sm);background:var(--green-dim);color:var(--green);flex-shrink:0;font-size:15px}
.icon-chip-lg{width:44px;height:44px;font-size:20px;border-radius:var(--radius)}

/* ── 4. LAYOUT: SIDEBAR ─────────────────────────────────────────── */
html[data-preset] .sidebar{background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);box-shadow:none}
html[data-preset] .sidebar-logo{height:64px;border-bottom:1px solid var(--sidebar-border);padding:0 18px}
.brand-lockup{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.brand-mark{width:34px;height:34px;border-radius:9px;flex-shrink:0;box-shadow:0 2px 6px rgba(22,48,111,.25)}
.brand-name{font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:-.2px;color:var(--sidebar-head);white-space:nowrap}
.brand-name b{font-weight:600;color:var(--sidebar-active-text)}
html[data-preset] .sidebar-nav{padding:6px 0 12px}
html[data-preset] .nav-section{font-family:var(--font-display);text-transform:none;letter-spacing:0;
  font-size:13.5px;font-weight:600;color:var(--sidebar-head);padding:16px 20px 6px}
html[data-preset] .nav-item{color:var(--sidebar-text);font-size:12.75px;font-weight:500;padding:7px 12px 7px 14px;
  margin:1px 10px;border-radius:var(--radius-sm);gap:11px}
html[data-preset] .nav-item:hover{background:var(--sidebar-hover);color:var(--sidebar-head)}
html[data-preset] .nav-item.active{background:var(--sidebar-active-bg);color:var(--sidebar-active-text);font-weight:600;
  box-shadow:0 1px 2px rgba(20,30,60,.06)}
html[data-preset] .nav-item.active::before{background:var(--sidebar-active-text);margin-left:-10px;width:3px;top:22%;bottom:22%}
html[data-preset] .nav-icon{width:16px;font-size:14px;display:inline-flex;align-items:center;justify-content:center;opacity:.9}
html[data-preset] .nav-badge{background:var(--green);color:var(--on-primary)}
html[data-preset] .sidebar-footer{border-top:1px solid var(--sidebar-border)}
html[data-preset] .sidebar-user:hover{background:var(--sidebar-hover)}
html[data-preset] .sidebar-user-name{color:var(--sidebar-head)}
html[data-preset] .sidebar-user-role{color:var(--sidebar-muted)}
.sidebar-copy{padding:8px 16px 12px;font-size:10.5px;color:var(--sidebar-muted);text-align:center;line-height:1.5}

/* ── 5. LAYOUT: TOPBAR ──────────────────────────────────────────── */
html[data-preset] .topbar{background:var(--topbar-bg);border-bottom:1px solid var(--border);height:60px;box-shadow:0 1px 0 rgba(0,0,0,.02)}
html[data-preset] .topbar-title{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--text)}
html[data-preset] .topbar-btn{border-color:var(--border2);color:var(--text2);background:var(--surface)}
html[data-preset] .topbar-btn:hover{border-color:var(--green);color:var(--green);background:var(--green-dim)}
.topbar-btn-icon{width:34px;height:34px;justify-content:center;padding:0!important;font-size:15px}
html[data-mode-toggle="off"] #theme-toggle{display:none!important}
html[data-preset] .status-pill{background:var(--success-dim);border-color:color-mix(in srgb,var(--success) 30%,transparent);color:var(--success);font-weight:600}
.topbar-user{display:flex;align-items:center;gap:9px;padding:4px 10px 4px 4px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface2);text-decoration:none;color:var(--text)}
.topbar-user:hover{border-color:var(--border2);color:var(--text)}
.topbar-user .user-avatar{width:28px;height:28px;font-size:11px;border-radius:6px}
.topbar-user-name{font-size:12.5px;font-weight:600;line-height:1.2}
.topbar-user-role{font-size:10.5px;color:var(--text3);text-transform:capitalize;line-height:1.2}

/* ── 6. PAGE / CARDS ────────────────────────────────────────────── */
html[data-preset] .page{padding:24px 28px}
html[data-preset] .page-header-left h1{font-family:var(--font-display);font-size:21px;font-weight:600;letter-spacing:-.2px}
html[data-preset] .page-header-left p{color:var(--text3)}
html[data-preset] .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
html[data-preset] .card > .table-wrap:first-child,html[data-preset] .card > table:first-child{border-radius:var(--radius) var(--radius) 0 0}
html[data-preset] .card-header{background:var(--card-head-bg);border-bottom:1px solid var(--border);padding:12px 18px;min-height:48px}
html[data-preset] .card-title{font-family:var(--font-display);font-size:13.5px;font-weight:600;color:var(--card-head-text);display:flex;align-items:center;gap:8px}
html[data-preset] .card-title .ico{color:var(--green);opacity:.9}
html[data-preset] .card-subtitle{color:var(--text3)}
html[data-preset] .card-footer{background:var(--surface2);border-top:1px solid var(--border)}

/* Stat tiles */
html[data-preset] .stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
html[data-preset] .stat-card:hover{border-color:var(--border2);box-shadow:var(--shadow)}
html[data-preset] .stat-card-accent{height:3px;background:linear-gradient(90deg,var(--green),var(--green-light))}
html[data-preset] .stat-label{color:var(--text3);font-weight:600;letter-spacing:.06em}
html[data-preset] .stat-value{font-family:var(--font-display);font-weight:600;color:var(--text)}
html[data-preset] .stat-icon{opacity:1;color:var(--green);font-size:18px;width:36px;height:36px;border-radius:var(--radius-sm);
  background:var(--green-dim);display:flex;align-items:center;justify-content:center;top:14px;right:14px}

/* ── 7. TABLES ──────────────────────────────────────────────────── */
html[data-preset] thead th{background:var(--thead-bg);color:var(--text2);font-weight:600;font-size:11px;letter-spacing:.05em;border-bottom:1px solid var(--border)}
html[data-preset] tbody tr{border-bottom:1px solid var(--border)}
html[data-preset] tbody tr:hover{background:color-mix(in srgb,var(--green) 4%,var(--surface))}
html[data-preset] .table-empty-icon{opacity:.45;font-size:34px;color:var(--text3);display:flex;justify-content:center}

/* ── 8. BADGES ──────────────────────────────────────────────────── */
html[data-preset] .badge{font-weight:600;border-radius:999px}
html[data-preset] .badge-green {background:var(--success-dim);color:var(--success);border-color:color-mix(in srgb,var(--success) 28%,transparent)}
html[data-preset] .badge-red   {background:var(--danger-dim); color:var(--danger); border-color:color-mix(in srgb,var(--danger) 28%,transparent)}
html[data-preset] .badge-yellow{background:var(--warning-dim);color:var(--warning);border-color:color-mix(in srgb,var(--warning) 30%,transparent)}
html[data-preset] .badge-blue  {background:var(--info-dim);   color:var(--info);   border-color:color-mix(in srgb,var(--info) 28%,transparent)}
html[data-preset] .badge-violet{background:var(--violet-dim); color:var(--violet); border-color:color-mix(in srgb,var(--violet) 28%,transparent)}
html[data-preset] .badge-slate {background:var(--surface3);   color:var(--text2);  border-color:var(--border2)}
html[data-preset] .badge-primary{background:var(--green-dim); color:var(--green);  border-color:color-mix(in srgb,var(--green) 28%,transparent)}

/* ── 9. BUTTONS ─────────────────────────────────────────────────── */
html[data-preset] .btn{font-family:var(--font-body);font-weight:500;border-radius:var(--radius-sm)}
html[data-preset] .btn .ico{font-size:1.05em}
html[data-preset] .btn-primary{background:var(--green);border-color:var(--green);color:var(--on-primary)}
html[data-preset] .btn-primary:hover{background:var(--green-dark);border-color:var(--green-dark);color:var(--on-primary);box-shadow:0 2px 8px var(--green-glow)}
html[data-preset] .btn-ghost{background:var(--surface);border-color:var(--border2);color:var(--text2)}
html[data-preset] .btn-ghost:hover{border-color:var(--green);color:var(--green);background:var(--green-dim)}
html[data-preset] .btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
html[data-preset] .btn-danger:hover{background:color-mix(in srgb,var(--danger) 85%,#000);border-color:color-mix(in srgb,var(--danger) 85%,#000);color:#fff}
html[data-preset] .btn-danger-ghost{border-color:color-mix(in srgb,var(--danger) 35%,transparent);color:var(--danger)}
html[data-preset] .btn-danger-ghost:hover{background:var(--danger-dim)}
html[data-preset] .btn-success{background:var(--success);border-color:var(--success);color:#fff}
html[data-preset] .btn-success:hover{background:color-mix(in srgb,var(--success) 85%,#000);color:#fff}
html[data-preset] .spinner{border-color:color-mix(in srgb,var(--on-primary) 30%,transparent);border-top-color:var(--on-primary)}

/* ── 10. FORMS ──────────────────────────────────────────────────── */
html[data-preset] .field-input{background:var(--input-bg);border-color:var(--border2);color:var(--text);font-family:var(--font-body)}
html[data-preset] .field-input:hover{border-color:color-mix(in srgb,var(--green) 35%,var(--border2))}
html[data-preset] .field-input:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-dim)}
html[data-preset] textarea.field-input{font-family:var(--font-mono)}
html[data-preset] .field-label{color:var(--text2);font-weight:600}
html[data-preset] select.field-input{appearance:none;-webkit-appearance:none;padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%237f899d' d='M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:11px}
html[data-preset] .toggle-track{background:var(--border2)}
html[data-preset] .toggle-track::after,html[data-preset] .toggle-track::before{background:#fff}
html[data-preset] .toggle input:checked+.toggle-track{background:var(--green)}
html[data-preset] .toggle input:checked+.toggle-track::before{background:#fff}
html[data-preset] .pw-toggle{display:inline-flex;align-items:center;font-size:15px}
html[data-preset] .search-icon{display:inline-flex}
html[data-preset] input[type=checkbox],html[data-preset] input[type=radio]{accent-color:var(--green)}

/* ── 11. ALERTS / FLASH / TOAST ─────────────────────────────────── */
html[data-preset] .alert{border-left-width:3px}
html[data-preset] .alert-success{background:var(--success-dim);border-color:var(--success);color:var(--alert-success)}
html[data-preset] .alert-error  {background:var(--danger-dim); border-color:var(--danger); color:var(--alert-error)}
html[data-preset] .alert-error > span{color:inherit}
html[data-preset] .alert-warning{background:var(--warning-dim);border-color:var(--warning);color:var(--alert-warning)}
html[data-preset] .alert-info   {background:var(--info-dim);   border-color:var(--info);   color:var(--alert-info)}
html[data-preset] .alert-icon{display:inline-flex;margin-top:3px}
html[data-preset] .flash-success{background:var(--success-dim);border-color:color-mix(in srgb,var(--success) 30%,transparent);color:var(--alert-success)}
html[data-preset] .flash-error  {background:var(--danger-dim); border-color:color-mix(in srgb,var(--danger) 30%,transparent); color:var(--alert-error)}
html[data-preset] .flash-info   {background:var(--info-dim);   border-color:color-mix(in srgb,var(--info) 30%,transparent);   color:var(--alert-info)}
html[data-preset] .flash-warning{background:var(--warning-dim);border-color:color-mix(in srgb,var(--warning) 30%,transparent);color:var(--alert-warning)}
html[data-preset] .toast{background:var(--surface);color:var(--text);border:1px solid var(--border);border-left:3px solid;box-shadow:var(--shadow)}
html[data-preset] .toast-success{border-left-color:var(--success)} .toast-success .ico{color:var(--success)}
html[data-preset] .toast-error{border-left-color:var(--danger)}   .toast-error .ico{color:var(--danger)}
html[data-preset] .toast-info{border-left-color:var(--info)}      .toast-info .ico{color:var(--info)}

/* ── 12. MODALS / TABS / PAGINATION ─────────────────────────────── */
html[data-preset] .modal-overlay{background:var(--overlay)}
html[data-preset] .modal{background:var(--surface);border-color:var(--border);border-radius:var(--radius);box-shadow:0 24px 64px rgba(10,16,35,.28)}
html[data-preset] .modal-header{background:var(--card-head-bg)}
html[data-preset] .modal-title{font-family:var(--font-display);font-weight:600;color:var(--card-head-text);display:flex;align-items:center;gap:8px}
html[data-preset] .modal-footer{background:var(--surface2)}
html[data-preset] .modal-close{display:inline-flex;align-items:center;justify-content:center}
html[data-preset] .tab.active{color:var(--green);border-bottom-color:var(--green)}
html[data-preset] .tab{display:inline-flex;align-items:center;gap:7px}
html[data-preset] .page-btn{background:var(--surface);border-color:var(--border2)}
html[data-preset] .page-btn:hover{border-color:var(--green);color:var(--green)}
html[data-preset] .page-btn.active{background:var(--green);border-color:var(--green);color:var(--on-primary)}
html[data-preset] .chart-range-btn.active{background:var(--green)!important;border-color:var(--green)!important;color:var(--on-primary)!important}

/* ── 13. MISC COMPONENTS (legacy hard-coded greens) ─────────────── */
html[data-preset] .text-green{color:var(--success)}
html[data-preset] .status-dot-green{background:var(--success);box-shadow:0 0 0 3px var(--success-dim)}
html[data-preset] .status-dot-grey{background:var(--text3)}
html[data-preset] .perm-item{background:var(--surface)}
html[data-preset] .perm-item.granted{border-color:color-mix(in srgb,var(--green) 30%,transparent);background:var(--green-dim)}
html[data-preset] .perm-item.granted .perm-item-label{color:var(--green)}
html[data-preset] .perm-cat-item:hover{border-color:color-mix(in srgb,var(--green) 35%,transparent)!important}
html[data-preset] .session-card{background:var(--surface)}
html[data-preset] .session-card.current{border-color:color-mix(in srgb,var(--success) 35%,transparent);background:var(--success-dim)}
html[data-preset] .day-pill.active{background:var(--green-dim);color:var(--green);border-color:color-mix(in srgb,var(--green) 30%,transparent)}
html[data-preset] .module-card:hover{border-color:var(--green);box-shadow:var(--shadow)}
html[data-preset] .channel-card:hover{border-color:var(--border2)}
html[data-preset] .card-dashed:hover{border-color:var(--green)}
html[data-preset] .breadcrumbs a{color:var(--link)}
html[data-preset] .secret-key,html[data-preset] .backup-code{color:var(--green);background:var(--surface2)}
html[data-preset] .step-num{background:var(--green-dim);border-color:color-mix(in srgb,var(--green) 30%,transparent);color:var(--green)}
html[data-preset] .security-badge{color:var(--green);background:var(--green-dim);border-color:color-mix(in srgb,var(--green) 25%,transparent)}
html[data-preset] pre,html[data-preset] code{font-family:var(--font-mono)}
html[data-preset] .sev-critical{color:var(--danger);background:var(--danger-dim);border-color:color-mix(in srgb,var(--danger) 28%,transparent)}
html[data-preset] .sev-warning{color:var(--warning);background:var(--warning-dim);border-color:color-mix(in srgb,var(--warning) 28%,transparent)}
html[data-preset] .sev-info,html[data-preset] .sev-low{color:var(--info);background:var(--info-dim);border-color:color-mix(in srgb,var(--info) 28%,transparent)}

/* Avatars */
html[data-preset] .user-avatar,html[data-preset] .sidebar-avatar{background:linear-gradient(135deg,var(--green-light),var(--green-dark));color:var(--on-primary);font-family:var(--font-display);font-weight:600}
html[data-preset] .avatar-superadmin{background:linear-gradient(135deg,#7e5ad6,#5532b0);color:#fff}
html[data-preset] .avatar-admin{background:linear-gradient(135deg,#3f7fe0,#1d4fa8);color:#fff}
html[data-preset] .avatar-viewer{background:linear-gradient(135deg,#9aa6ba,#6c7891);color:#fff}

/* ── 14. AUTH SCREENS ───────────────────────────────────────────── */
html[data-preset] .auth-brand{background:var(--auth-panel);border-right:1px solid var(--border)}
html[data-preset] .auth-brand::before{opacity:.18;background-image:linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px)}
html[data-preset] .auth-brand::after{display:none}
html[data-theme="dark"] .auth-brand::before{opacity:.05}
html[data-preset] .brand-title{font-family:var(--font-display);font-weight:600;color:var(--sidebar-head)}
html[data-preset] .brand-title em{color:var(--sidebar-active-text)}
html[data-preset] .brand-sub{color:var(--sidebar-muted)}
html[data-preset] .brand-logo-mark{background:none;box-shadow:none;width:72px;height:72px}
html[data-preset] .brand-logo-mark::after{display:none}
html[data-preset] .brand-logo-mark img{width:72px;height:72px;border-radius:18px;box-shadow:0 8px 24px rgba(22,48,111,.3)}
html[data-preset] .brand-feat{background:color-mix(in srgb,var(--surface) 72%,transparent);border-color:color-mix(in srgb,var(--sidebar-text) 10%,transparent);backdrop-filter:blur(4px)}
html[data-preset] .brand-feat:hover{border-color:var(--sidebar-active-text)}
html[data-preset] .brand-feat-icon{background:var(--surface);border-color:var(--border);color:var(--sidebar-active-text);font-size:14px}
html[data-preset] .brand-feat-text{color:var(--sidebar-text)}
html[data-preset] .brand-version{color:var(--sidebar-muted)}
html[data-preset] .auth-form-panel{background:var(--surface)}
html[data-preset] .auth-card-header h1{font-family:var(--font-display);font-weight:600}
.auth-icon-head{width:60px;height:60px;border-radius:16px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;
  font-size:26px;color:var(--on-primary);background:linear-gradient(140deg,var(--green-light),var(--green-dark));box-shadow:0 8px 22px var(--green-glow)}
.auth-center-bg{background:var(--auth-panel)!important}
.auth-center-bg .auth-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow)}
html[data-preset] .error-code{font-family:var(--font-display);font-weight:600;color:var(--border2)}

/* ── 15. APPEARANCE SETTINGS UI ─────────────────────────────────── */
.ap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px}
.ap-preset{position:relative;display:block;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--surface);
  cursor:pointer;overflow:hidden;transition:border-color var(--transition),box-shadow var(--transition)}
.ap-preset:hover{border-color:var(--border2);box-shadow:var(--shadow-sm)}
.ap-preset input{position:absolute;opacity:0;pointer-events:none}
.ap-preset:has(input:checked){border-color:var(--green);box-shadow:0 0 0 3px var(--green-dim)}
.ap-preset-check{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;background:var(--green);color:var(--on-primary);
  display:none;align-items:center;justify-content:center;font-size:10px}
.ap-preset:has(input:checked) .ap-preset-check{display:flex}
.ap-mini{height:86px;display:grid;grid-template-columns:34% 1fr;border-bottom:1px solid var(--border)}
.ap-mini-side{padding:8px 6px;display:flex;flex-direction:column;gap:5px}
.ap-mini-side i{display:block;height:5px;border-radius:3px;background:currentColor;opacity:.35}
.ap-mini-side i:first-child{opacity:.9;width:70%}
.ap-mini-main{padding:8px;display:flex;flex-direction:column;gap:6px}
.ap-mini-card{flex:1;border-radius:4px;border:1px solid rgba(0,0,0,.08);overflow:hidden;display:flex;flex-direction:column}
.ap-mini-card b{display:block;height:9px}
.ap-mini-btn{width:38%;height:8px;border-radius:3px}
.ap-preset-meta{padding:9px 11px 10px}
.ap-preset-name{font-size:12.5px;font-weight:600;color:var(--text)}
.ap-preset-desc{font-size:11px;color:var(--text3);line-height:1.4;margin-top:2px}
.ap-row{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.ap-row > div:first-child{flex:1 1 180px;min-width:0}
.ap-seg,.ap-row select{flex-shrink:0}
.ap-row:last-child{border-bottom:none}
.ap-row-label{font-weight:500;font-size:13px}
.ap-row-hint{font-size:11.5px;color:var(--text3);margin-top:2px}
.ap-seg{display:inline-flex;border:1px solid var(--border2);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface)}
.ap-seg label{position:relative;cursor:pointer}
.ap-seg input{position:absolute;opacity:0;pointer-events:none}
.ap-seg span{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;font-size:12.5px;color:var(--text2);border-right:1px solid var(--border2);transition:background var(--transition)}
.ap-seg label:last-child span{border-right:none}
.ap-seg input:checked+span{background:var(--green);color:var(--on-primary)}
.ap-seg input:focus-visible+span{outline:2px solid var(--green-light);outline-offset:-2px}
.ap-color{display:flex;align-items:center;gap:8px}
.ap-color input[type=color]{width:38px;height:34px;padding:2px;border:1px solid var(--border2);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer}
.ap-swatches{display:flex;gap:6px;flex-wrap:wrap}
.ap-swatch{width:22px;height:22px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border2);cursor:pointer;padding:0}
.ap-swatch:hover{transform:scale(1.1)}
.ap-font-sample{font-size:12px;color:var(--text3);margin-left:8px}
.ap-preview-note{font-size:11.5px;color:var(--text3);display:flex;align-items:center;gap:6px}

/* ── 16. DENSITY ────────────────────────────────────────────────── */
html[data-density="compact"] body{font-size:12.75px}
html[data-density="compact"] .page{padding:16px 20px}
html[data-density="compact"] .card-header{padding:9px 14px;min-height:40px}
html[data-density="compact"] .card-body{padding:14px}
html[data-density="compact"] td{padding:7px 12px;font-size:12.5px}
html[data-density="compact"] thead th{padding:8px 12px}
html[data-density="compact"] .nav-item{padding:5px 12px 5px 14px}
html[data-density="compact"] .nav-section{padding:12px 20px 4px}
html[data-density="compact"] .btn{padding:6px 13px;font-size:12.5px}
html[data-density="compact"] .field-input{padding:6px 10px;font-size:13px}
html[data-density="compact"] .stat-card{padding:12px 14px}
html[data-density="compact"] .stat-value{font-size:22px}
html[data-density="compact"] .topbar{height:52px}

/* ── 17. RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:900px){
  html[data-preset] .sidebar{box-shadow:var(--shadow)}
  .topbar-user-meta{display:none}
}
@media(max-width:600px){
  html[data-preset] .page{padding:16px}
  html[data-preset] .topbar{padding:0 12px;gap:8px}
  .status-pill,.topbar-user{display:none!important}
  .topbar-signout-label{display:none}
  html[data-preset] .topbar-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
}
html[data-preset] .app-main{min-width:0}