@font-face {
  font-family: "Vazirmatn";
  src: url("/static/fonts/Vazirmatn.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/*
  CoverCast Design System
  -----------------------
  One token layer drives every theme, density, radius and motion preference.
  Page templates may keep layout-specific rules; visual decisions belong here.
*/
:root {
  color-scheme: dark;
  --font-ui: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
  --font-mono: "Cascadia Code", Consolas, monospace;
  --font-scale: 1;
  --density: 1;
  --radius-scale: 1;
  --motion-factor: 1;

  --space-1: calc(4px * var(--density));
  --space-2: calc(8px * var(--density));
  --space-3: calc(12px * var(--density));
  --space-4: calc(16px * var(--density));
  --space-5: calc(20px * var(--density));
  --space-6: calc(24px * var(--density));
  --space-8: calc(32px * var(--density));
  --r-xs: calc(6px * var(--radius-scale));
  --r-sm: calc(9px * var(--radius-scale));
  --r-md: calc(13px * var(--radius-scale));
  --r-lg: calc(18px * var(--radius-scale));
  --r-xl: calc(24px * var(--radius-scale));

  --bg: #06101d;
  --bg-elevated: #081524;
  --card: #0c1a2a;
  --surface-1: #0c1a2a;
  --surface-2: #112238;
  --surface-3: #172b43;
  --surface-glass: rgba(10, 24, 40, .88);
  --ink: #e8f0fb;
  --ink-strong: #f8fbff;
  --ink-on-light: #102a43;
  --muted: #94a6be;
  --muted-2: #70839c;
  --line: rgba(148, 163, 184, .17);
  --line-strong: rgba(148, 163, 184, .28);
  --navy: #d9e8ff;
  --navy-d: #07111e;
  --brand: #3b82f6;
  --brand-d: #2563eb;
  --accent: #22d3ee;
  --brand-soft: rgba(59, 130, 246, .14);
  --brand-pale: rgba(59, 130, 246, .08);
  --brand-ring: rgba(59, 130, 246, .28);
  --row-hover-bg: color-mix(in srgb, var(--surface-1) 88%, var(--brand));
  --row-selected-bg: color-mix(in srgb, var(--surface-1) 76%, var(--brand));
  --row-danger-bg: color-mix(in srgb, var(--surface-1) 90%, var(--bad));
  --row-danger-hover-bg: color-mix(in srgb, var(--surface-1) 82%, var(--bad));
  --ok: #34d399;
  --ok-soft: rgba(52, 211, 153, .13);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, .13);
  --bad: #fb7185;
  --bad-soft: rgba(251, 113, 133, .13);
  --info: #38bdf8;
  --info-soft: rgba(56, 189, 248, .13);
  --disabled: #52627a;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .24);
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, .18);
  --shadow-md: 0 18px 50px rgba(0, 0, 0, .28);
  --shadow-focus: 0 0 0 3px var(--brand-ring);
  --header-height: 74px;
  --control-h: calc(40px * var(--density));
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --fast: calc(140ms * var(--motion-factor));
  --normal: calc(220ms * var(--motion-factor));
}

html[data-theme="ocean"] {
  --bg: #03111e;
  --bg-elevated: #061a2c;
  --card: #092037;
  --surface-1: #092037;
  --surface-2: #0c2946;
  --surface-3: #123655;
  --surface-glass: rgba(5, 24, 42, .9);
  --brand: #38bdf8;
  --brand-d: #0284c7;
  --accent: #67e8f9;
  --brand-soft: rgba(56, 189, 248, .14);
  --brand-pale: rgba(56, 189, 248, .08);
  --brand-ring: rgba(56, 189, 248, .28);
}

html[data-theme="graphite"] {
  --bg: #0d0f12;
  --bg-elevated: #111419;
  --card: #171b21;
  --surface-1: #171b21;
  --surface-2: #1d232b;
  --surface-3: #252c35;
  --surface-glass: rgba(18, 21, 26, .9);
  --line: rgba(203, 213, 225, .13);
  --brand: #a3b4cc;
  --brand-d: #7f94b2;
  --accent: #d5deea;
  --brand-soft: rgba(163, 180, 204, .13);
  --brand-pale: rgba(163, 180, 204, .07);
  --brand-ring: rgba(163, 180, 204, .25);
}

html[data-theme="emerald"] {
  --bg: #05130f;
  --bg-elevated: #071b15;
  --card: #0b241c;
  --surface-1: #0b241c;
  --surface-2: #103126;
  --surface-3: #164234;
  --surface-glass: rgba(6, 27, 20, .9);
  --line: rgba(110, 231, 183, .15);
  --brand: #34d399;
  --brand-d: #10b981;
  --accent: #5eead4;
  --brand-soft: rgba(52, 211, 153, .14);
  --brand-pale: rgba(52, 211, 153, .08);
  --brand-ring: rgba(52, 211, 153, .27);
}

html[data-theme="professional"] {
  --brand: #2563eb;
  --brand-d: #1d4ed8;
  --accent: #0891b2;
  --brand-soft: rgba(37, 99, 235, .12);
  --brand-pale: rgba(37, 99, 235, .06);
  --brand-ring: rgba(37, 99, 235, .22);
}

html[data-mode-resolved="light"] {
  color-scheme: light;
  --bg: #eef3f9;
  --bg-elevated: #f7f9fc;
  --card: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #edf2f8;
  --surface-glass: rgba(255, 255, 255, .9);
  --ink: #172033;
  --ink-strong: #07111f;
  --muted: #66758d;
  --muted-2: #8794a8;
  --line: rgba(51, 65, 85, .13);
  --line-strong: rgba(51, 65, 85, .23);
  --navy: #102f5c;
  --navy-d: #071d3a;
  --ok: #15803d;
  --ok-soft: #e9f8ef;
  --warn: #b45309;
  --warn-soft: #fff6df;
  --bad: #be123c;
  --bad-soft: #fff0f3;
  --info: #0369a1;
  --info-soft: #eaf7ff;
  --disabled: #a5afbf;
  --shadow-xs: 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-sm: 0 9px 28px rgba(30, 64, 110, .09);
  --shadow-md: 0 22px 60px rgba(22, 49, 86, .15);
}

html[data-accent="cyan"] { --brand:#22d3ee; --brand-d:#0891b2; --accent:#67e8f9; --brand-soft:rgba(34,211,238,.14); --brand-ring:rgba(34,211,238,.28); }
html[data-accent="blue"] { --brand:#3b82f6; --brand-d:#2563eb; --accent:#60a5fa; --brand-soft:rgba(59,130,246,.14); --brand-ring:rgba(59,130,246,.28); }
html[data-accent="green"] { --brand:#34d399; --brand-d:#059669; --accent:#6ee7b7; --brand-soft:rgba(52,211,153,.14); --brand-ring:rgba(52,211,153,.27); }
html[data-accent="violet"] { --brand:#a78bfa; --brand-d:#7c3aed; --accent:#c4b5fd; --brand-soft:rgba(167,139,250,.14); --brand-ring:rgba(167,139,250,.28); }
html[data-accent="amber"] { --brand:#fbbf24; --brand-d:#d97706; --accent:#fcd34d; --brand-soft:rgba(251,191,36,.14); --brand-ring:rgba(251,191,36,.28); }
html[data-font-scale="small"] { --font-scale:.91; }
html[data-font-scale="large"] { --font-scale:1.1; }
html[data-density="compact"] { --density:.82; }
html[data-density="comfortable"] { --density:1.08; }
html[data-radius="sharp"] { --radius-scale:.58; }
html[data-radius="round"] { --radius-scale:1.32; }
html[data-motion-resolved="reduced"] { --motion-factor:.01; scroll-behavior:auto; }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: calc(16px * var(--font-scale)); background: var(--bg); scroll-behavior:smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-ui);
  color: var(--ink);
  background:
    radial-gradient(900px 540px at 92% -10%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%),
    radial-gradient(760px 520px at -8% 105%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 72%),
    var(--bg);
  line-height: 1.75;
  transition: background-color var(--normal) var(--ease-out), color var(--normal) var(--ease-out);
  accent-color: var(--brand);
}
body::before {
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .13;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, #000, transparent 62%);
}

::selection { background: color-mix(in srgb, var(--brand) 35%, transparent); color:var(--ink-strong); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--bg-elevated); }
::-webkit-scrollbar-thumb { background:var(--surface-3); border:2px solid var(--bg-elevated); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:color-mix(in srgb,var(--surface-3) 72%,var(--brand)); }
a { color:var(--brand); text-underline-offset:3px; }
a:hover { color:color-mix(in srgb,var(--brand) 78%,white); }
button, input, select, textarea { font:inherit; }
button, a, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]) { outline:none; }
:focus-visible { outline:2px solid var(--brand) !important; outline-offset:3px; box-shadow:var(--shadow-focus) !important; }
button:disabled, input:disabled, select:disabled, textarea:disabled, .disabled { opacity:.52; cursor:not-allowed !important; filter:saturate(.45); }
.skip-link { position:fixed; top:8px; right:50%; translate:50% -140%; z-index:300; padding:8px 15px; border-radius:var(--r-sm); background:var(--brand); color:#fff; font-weight:800; transition:translate var(--fast); }
.skip-link:focus { translate:50% 0; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

/* App shell */
html[data-theme] header {
  min-height:var(--header-height);
  padding:10px clamp(12px,2vw,28px);
  display:flex;
  align-items:center;
  gap:12px;
  position:sticky;
  inset-block-start:0;
  z-index:60;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  background:var(--surface-glass);
  box-shadow:0 12px 34px rgba(0,0,0,.12);
  backdrop-filter:blur(16px) saturate(1.15);
}
html[data-theme] header::after { background:linear-gradient(90deg,transparent,var(--brand),var(--accent),transparent); opacity:.5; }
.header-spacer { flex:1; }
.brand-logo { color:var(--ink); }
html[data-theme] .brand-wordmark {
  width:132px;
  height:46px;
  border-radius:var(--r-md);
  background:linear-gradient(145deg,color-mix(in srgb,var(--brand-d) 62%,#061126),color-mix(in srgb,var(--brand) 72%,#112b54));
  box-shadow:0 12px 30px color-mix(in srgb,var(--brand) 20%,transparent),inset 0 1px 0 rgba(255,255,255,.22);
}
.brand-wordmark::before { content:""; position:absolute; inset:-55% 42% -55% -20%; rotate:18deg; background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); }
.brand-wordmark span { color:#fff; }
.brand-logo .lt { color:var(--muted); letter-spacing:0; }
.brand-sep { background:var(--line); }
html[data-theme] .topnav { background:color-mix(in srgb,var(--surface-2) 76%,transparent); border:1px solid var(--line); border-radius:var(--r-md); padding:4px; }
html[data-theme] .nav-link { color:var(--muted); min-height:38px; border:1px solid transparent; border-radius:var(--r-sm); transition:color var(--fast),background var(--fast),border-color var(--fast),transform var(--fast); }
html[data-theme] .nav-link:hover { color:var(--ink-strong); background:var(--surface-3); border-color:var(--line); text-decoration:none; box-shadow:none; transform:translateY(-1px); }
html[data-theme] .nav-link.active { color:var(--ink-strong); background:linear-gradient(135deg,var(--brand-soft),color-mix(in srgb,var(--surface-3) 88%,var(--accent))); border-color:color-mix(in srgb,var(--brand) 38%,var(--line)); box-shadow:inset 0 -2px 0 var(--brand); }
.nav-action { appearance:none; cursor:pointer; font-family:inherit; }

html[data-theme] .wrap { max-width:1500px; width:100%; margin:0 auto; padding:clamp(16px,2vw,28px); position:relative; z-index:1; }
html[data-theme] .card,
html[data-theme] .sec,
html[data-theme] .pcard,
html[data-theme] .tok,
html[data-theme] .chartbox,
html[data-theme] .gate {
  color:var(--ink);
  background:linear-gradient(145deg,var(--surface-1),color-mix(in srgb,var(--surface-2) 56%,var(--surface-1)));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs);
}
html[data-theme] .card { padding:var(--space-5); margin-bottom:var(--space-5); }
html[data-theme] .card:hover { border-color:color-mix(in srgb,var(--line) 65%,var(--brand)); }
h1,h2,h3,h4,h5,h6 { color:var(--ink-strong); text-wrap:balance; }
.muted,.muted-s,.sub,.hint,.foot { color:var(--muted)!important; }
.pf-head h2,.card-h h3,.sec-title,.panel-h,.chartbox h4,.editor-head h3,.column-drawer-head h3 { color:var(--ink-strong)!important; }
.sec-title::after { background:linear-gradient(90deg,var(--line),transparent)!important; }

/* Forms and controls */
html[data-theme] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme] textarea,
html[data-theme] select {
  width:100%;
  min-height:var(--control-h);
  padding:calc(8px * var(--density)) calc(12px * var(--density));
  color:var(--ink);
  caret-color:var(--brand);
  background:var(--surface-2);
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  transition:border-color var(--fast),background var(--fast),box-shadow var(--fast);
}
html[data-theme] input::placeholder, html[data-theme] textarea::placeholder { color:var(--muted-2); opacity:1; }
html[data-theme] input:hover,html[data-theme] textarea:hover,html[data-theme] select:hover { border-color:color-mix(in srgb,var(--line-strong) 60%,var(--brand)); }
html[data-theme] input:focus,html[data-theme] textarea:focus,html[data-theme] select:focus { color:var(--ink); background:var(--surface-1); border-color:var(--brand); box-shadow:var(--shadow-focus); }
html[data-theme] option { background:var(--surface-1); color:var(--ink); }
label { color:var(--muted); font-weight:650; }
input[type="range"] { accent-color:var(--brand); }

html[data-theme] .btn,
html[data-theme] button:not(.pbtn):not(.nav-link):not(.tabulator-page):not(.tabulator-paginator):not(.appearance-close):not(.theme-card):not(.swatch) {
  min-height:36px;
  border-radius:var(--r-sm);
  transition:transform var(--fast),filter var(--fast),background var(--fast),border-color var(--fast),box-shadow var(--fast);
}
html[data-theme] .btn:hover,html[data-theme] button:hover { filter:brightness(1.05); }
html[data-theme] .btn:active,html[data-theme] button:active { transform:translateY(1px) scale(.99); }
html[data-theme] .btn-ghost { color:var(--ink); background:var(--surface-3); border:1px solid var(--line); }
html[data-theme] .btn-ghost:hover { color:var(--brand); background:var(--brand-soft); border-color:color-mix(in srgb,var(--brand) 45%,var(--line)); }
html[data-theme] .btn-brand { color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-d)); box-shadow:0 8px 22px color-mix(in srgb,var(--brand) 25%,transparent); }
html[data-theme] .btn-navy { color:var(--ink-strong); background:linear-gradient(135deg,var(--surface-3),color-mix(in srgb,var(--surface-3) 72%,var(--brand))); border:1px solid var(--line); }

/* Tables / admin density */
html[data-theme] table { color:var(--ink); }
html[data-theme] th,html[data-theme] td { padding:calc(9px * var(--density)) calc(10px * var(--density)); border-color:var(--line); }
html[data-theme] th { color:var(--muted); background:color-mix(in srgb,var(--surface-2) 72%,transparent); }
html[data-theme] tr:hover td { color:var(--ink-strong); background:var(--row-hover-bg); }
html[data-theme] tr:is(.selected,.is-selected,[aria-selected="true"]) > td { color:var(--ink-strong); background:var(--row-selected-bg); }
html[data-theme] .tabulator { color:var(--ink); background:var(--surface-1); border:1px solid var(--line)!important; border-radius:var(--r-md)!important; }
html[data-theme] .tabulator .tabulator-header { color:var(--muted); background:var(--surface-2)!important; border-color:var(--line)!important; }
html[data-theme] .tabulator .tabulator-header .tabulator-col { color:var(--muted); background:var(--surface-2)!important; border-color:var(--line)!important; }
html[data-theme] .tabulator .tabulator-row { color:var(--ink); background:var(--surface-1); border-color:var(--line); }
html[data-theme] .tabulator .tabulator-row.tabulator-row-even { background:color-mix(in srgb,var(--surface-2) 45%,var(--surface-1)); }
html[data-theme] .tabulator .tabulator-row:hover { color:var(--ink-strong)!important; background:var(--row-hover-bg)!important; }
html[data-theme] .tabulator .tabulator-row.tabulator-selected,
html[data-theme] .tabulator .tabulator-row.tabulator-selected:hover { color:var(--ink-strong)!important; background:var(--row-selected-bg)!important; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 48%,transparent); }
html[data-theme] .tabulator .tabulator-row:is(:hover,.tabulator-selected) .tabulator-cell:not(.cell-edit):not(.cell-live) { color:inherit!important; }
html[data-theme] .tabulator .tabulator-row.dead-row,
html[data-theme] .tabulator .tabulator-row.dead-row.tabulator-row-even { color:var(--bad); background:var(--row-danger-bg)!important; }
html[data-theme] .tabulator .tabulator-row.dead-row:hover,
html[data-theme] .tabulator .tabulator-row.dead-row.tabulator-selected { color:var(--bad)!important; background:var(--row-danger-hover-bg)!important; }
html[data-theme] .tabulator .tabulator-cell { border-color:var(--line); padding-block:calc(8px * var(--density)); }
html[data-theme] .tabulator .tabulator-footer { color:var(--muted); background:var(--surface-2); border-color:var(--line); }
html[data-theme] .tabulator .tabulator-page,html[data-theme] .tabulator .tabulator-page-size { color:var(--ink); background:var(--surface-1); border-color:var(--line); }
html[data-theme] .tabulator .tabulator-page.active { color:#fff; background:var(--brand); }

/* Semantic feedback */
html[data-theme] .alert { border:1px solid transparent; border-radius:var(--r-md); }
html[data-theme] .alert-ok { color:var(--ok); background:var(--ok-soft); border-color:color-mix(in srgb,var(--ok) 35%,transparent); }
html[data-theme] .alert-err { color:var(--bad); background:var(--bad-soft); border-color:color-mix(in srgb,var(--bad) 35%,transparent); }
html[data-theme] .rule,.eq-warn { color:var(--warn); background:var(--warn-soft)!important; border-color:color-mix(in srgb,var(--warn) 38%,transparent)!important; }
html[data-theme] .eq-safe { color:var(--ok); background:var(--ok-soft)!important; border-color:color-mix(in srgb,var(--ok) 38%,transparent)!important; }
html[data-theme] .b-low,.ptag.bad,.hpill.cooling { color:var(--bad)!important; background:var(--bad-soft)!important; }
html[data-theme] .b-mid,.hpill.near { color:var(--warn)!important; background:var(--warn-soft)!important; }
html[data-theme] .b-ok,.ptag.ok,.hpill.healthy { color:var(--ok)!important; background:var(--ok-soft)!important; }
html[data-theme] .bar,html[data-theme] .gbar,html[data-theme] .bar-track,html[data-theme] .conf { background:var(--surface-3)!important; }
html[data-theme] .chips span,html[data-theme] .shared-panels span,html[data-theme] .stat-chip,html[data-theme] .tag-other { color:var(--muted); background:var(--surface-2); border:1px solid var(--line); }
html[data-theme] .toast { color:var(--ink-strong); background:var(--surface-3); border:1px solid var(--line-strong); box-shadow:var(--shadow-md); }

/* Portfolio and accounting bridges for legacy page layout rules */
html[data-theme] .stat { color:var(--ink); background:linear-gradient(145deg,var(--surface-1),var(--surface-2)); border-color:var(--line); box-shadow:var(--shadow-xs); border-radius:var(--r-md); }
html[data-theme] .stat .n { color:var(--ink-strong); }
html[data-theme] .stat:hover { border-color:color-mix(in srgb,var(--brand) 38%,var(--line)); box-shadow:var(--shadow-sm); }
html[data-theme] .stat .ic,.card-h .ic,.sec-title .ic { background:var(--brand-soft)!important; color:var(--brand)!important; }
html[data-theme] .charts .card,html[data-theme] .acc-grid .card,html[data-theme] .an-grid .card { background:var(--surface-1); }
html[data-theme] .feed > div,html[data-theme] .an-row,html[data-theme] .pl-row,html[data-theme] .ap-row { border-color:var(--line); }
html[data-theme] .feed > div:hover,html[data-theme] .an-row:hover,html[data-theme] .ap-row:hover { background:var(--brand-pale); }
html[data-theme] .tabs { background:var(--surface-1); border-color:var(--line); box-shadow:var(--shadow-xs); }
html[data-theme] .tab { color:var(--muted); }
html[data-theme] .tab:hover { color:var(--brand); background:var(--brand-soft); }
html[data-theme] .tab.active { color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-d)); box-shadow:0 6px 18px color-mix(in srgb,var(--brand) 24%,transparent); }
html[data-theme] .tab-badge { color:var(--muted); background:var(--surface-3); }
html[data-theme] .ctrl-strip,html[data-theme] .st-progress { color:var(--ink); background:var(--surface-2); border-color:var(--line); }
html[data-theme] .seg-chip,html[data-theme] .view-btn,html[data-theme] .grid-tool-btn,html[data-theme] .grid-focus-btn { color:var(--muted); background:var(--surface-2); border-color:var(--line); }
html[data-theme] .seg-chip:hover,html[data-theme] .view-btn:hover,html[data-theme] .grid-tool-btn:hover,html[data-theme] .grid-focus-btn:hover { color:var(--brand); background:var(--brand-soft); border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); }
html[data-theme] .seg-chip.active,html[data-theme] .view-btn.active { color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-d)); border-color:var(--brand); }
html[data-theme] .grid-viewbar { top:calc(var(--header-height) + 6px)!important; background:var(--surface-glass); border-color:var(--line); box-shadow:var(--shadow-sm); }
html[data-theme] .grid-pan { background:var(--surface-2); border-color:var(--line); }
html[data-theme] .grid-pan button { color:var(--ink); background:var(--surface-1); box-shadow:var(--shadow-xs); }
html[data-theme] .catalog-card { background:var(--surface-1); }
html[data-theme] .snap-tile,html[data-theme] .switch-row { color:var(--ink); background:var(--surface-2); border-color:var(--line); }
html[data-theme] .editor-shell,html[data-theme] .column-drawer { color:var(--ink); background:var(--surface-1); border-color:var(--line); }
html[data-theme] .editor-head,html[data-theme] .editor-foot { background:var(--surface-glass); border-color:var(--line); }
html[data-theme] .editor-body,html[data-theme] .column-drawer-body { background:var(--bg-elevated); }
html[data-theme] .edit-product,html[data-theme] details.edit-block,html[data-theme] details.doc,html[data-theme] .eq-card { color:var(--ink); background:var(--surface-1); border-color:var(--line); }
html[data-theme] details.edit-block summary,html[data-theme] details.doc summary { color:var(--ink-strong); background:var(--surface-2); }
html[data-theme] .edit-block-body,html[data-theme] details.doc .b { border-color:var(--line); background:var(--surface-1); }
html[data-theme] .edit-info { color:var(--warn); background:var(--warn-soft); border-color:color-mix(in srgb,var(--warn) 36%,transparent); }
html[data-theme] .calc-field input,html[data-theme] .cell-edit { color:var(--brand)!important; background:var(--brand-soft)!important; border-color:color-mix(in srgb,var(--brand) 40%,var(--line))!important; }
html[data-theme] .modal-backdrop,html[data-theme] dialog::backdrop { background:rgba(1,8,18,.72); backdrop-filter:blur(6px); }
html[data-theme] dialog { color:var(--ink); background:var(--surface-1); border-color:var(--line-strong); border-radius:var(--r-lg); box-shadow:var(--shadow-md); }

/* Panels / observatory / switcher */
html[data-theme] .pswitch .pbtn { color:var(--muted); background:var(--surface-2); border-color:var(--line); border-radius:var(--r-sm); }
html[data-theme] .pswitch .pbtn:hover { color:var(--brand); border-color:var(--brand); background:var(--brand-soft); }
html[data-theme] .pswitch .pbtn.on { color:#fff; background:linear-gradient(135deg,var(--brand-d),var(--brand)); border-color:var(--brand); }
html[data-theme] .pswitch .pbar { background:var(--surface-3); }
html[data-theme] .pcard.on { border-color:var(--pc); box-shadow:var(--shadow-sm); }
html[data-theme] .addcard { color:var(--ink); background:color-mix(in srgb,var(--surface-1) 86%,var(--brand-soft)); border-color:var(--line-strong); border-radius:var(--r-lg); }
html[data-theme] .ptag.on { color:#fff; background:var(--brand-d); }
html[data-theme] .ephchip { color:var(--muted); background:var(--surface-2); border-color:var(--line); }
html[data-theme] .seg button,html[data-theme] .panelchips button { color:var(--muted); background:var(--surface-2); border-color:var(--line); }
html[data-theme] .seg button.on,html[data-theme] .panelchips button.on { color:var(--ink-strong); background:var(--brand-soft); border-color:var(--brand); }
html[data-theme] table.eptable th { color:var(--muted); background:var(--surface-2); }

/* Appearance drawer */
.login-page,
body:has(.shell .brand + .card form[action="/login"]) {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 15% 18%, color-mix(in srgb,var(--brand) 18%,transparent), transparent 34%),
    radial-gradient(circle at 86% 82%, color-mix(in srgb,var(--accent) 11%,transparent), transparent 36%),
    var(--bg);
}
html[data-theme] .shell { width:min(440px,100%); position:relative; z-index:1; }
html[data-theme] .shell > .brand { color:var(--ink-strong); }
html[data-theme] .shell .mark { color:#fff; background:linear-gradient(145deg,var(--brand-d),var(--brand)); border-radius:var(--r-lg); box-shadow:0 14px 36px color-mix(in srgb,var(--brand) 26%,transparent); }
html[data-theme] .shell > .card { color:var(--ink); background:var(--surface-glass); border:1px solid var(--line-strong); border-radius:var(--r-xl); box-shadow:var(--shadow-md); backdrop-filter:blur(18px); }
html[data-theme] .shell > .card h1 { color:var(--ink-strong); }
html[data-theme] .shell > .card label { color:var(--muted); }
html[data-theme] .shell > .card button[type="submit"] { color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-d)); box-shadow:0 10px 24px color-mix(in srgb,var(--brand) 25%,transparent); }

.appearance-backdrop { position:fixed; inset:0; z-index:180; display:none; background:rgba(1,8,18,.68); backdrop-filter:blur(5px); }
.appearance-backdrop.open { display:block; animation:dsFade var(--normal) var(--ease-out); }
.appearance-drawer { position:absolute; inset-block:0; inset-inline-end:0; width:min(460px,96vw); display:flex; flex-direction:column; color:var(--ink); background:var(--surface-1); border-inline-start:1px solid var(--line-strong); box-shadow:var(--shadow-md); animation:dsDrawer var(--normal) var(--ease-out); }
.appearance-head { display:flex; gap:12px; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line); background:var(--surface-glass); backdrop-filter:blur(12px); }
.appearance-head-icon { width:42px; height:42px; display:grid; place-items:center; flex:none; border-radius:var(--r-md); color:var(--brand); background:var(--brand-soft); font-size:20px; }
.appearance-head h2 { margin:0; font-size:17px; }
.appearance-head p { margin:1px 0 0; color:var(--muted); font-size:11.5px; }
.appearance-close { margin-inline-start:auto; width:38px; height:38px; border:1px solid var(--line); border-radius:var(--r-sm); color:var(--muted); background:var(--surface-2); cursor:pointer; font-size:20px; }
.appearance-body { flex:1; overflow:auto; padding:18px 20px 32px; }
.appearance-section { padding:0 0 19px; margin:0 0 18px; border-bottom:1px solid var(--line); }
.appearance-section:last-child { border-bottom:0; }
.appearance-section h3 { margin:0 0 4px; font-size:13.5px; }
.appearance-section > p { margin:0 0 11px; color:var(--muted); font-size:11px; }
.theme-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.theme-card { position:relative; min-height:82px; padding:10px; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; overflow:hidden; color:#eaf2ff; border:1px solid rgba(255,255,255,.13); border-radius:var(--r-md); cursor:pointer; text-align:right; }
.theme-card::before { content:""; position:absolute; inset:0; background:var(--preview); }
.theme-card::after { content:""; position:absolute; inset:8px 8px auto; height:24px; border-radius:7px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); box-shadow:0 28px 0 rgba(255,255,255,.05); }
.theme-card span { position:relative; z-index:1; font-weight:800; font-size:12px; text-shadow:0 1px 2px rgba(0,0,0,.4); }
.theme-card[aria-pressed="true"] { border-color:var(--brand); box-shadow:var(--shadow-focus); }
.theme-card[aria-pressed="true"] span::after { content:" ✓"; color:var(--accent); }
.choice-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.choice-row label { position:relative; margin:0; }
.choice-row input { position:absolute; opacity:0; pointer-events:none; }
.choice-row span { min-height:38px; display:grid; place-items:center; padding:6px 8px; color:var(--muted); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer; font-size:11.5px; text-align:center; }
.choice-row input:checked + span { color:var(--ink-strong); background:var(--brand-soft); border-color:var(--brand); box-shadow:inset 0 -2px 0 var(--brand); }
.choice-row input:focus-visible + span { outline:2px solid var(--brand); outline-offset:2px; }
.swatches { display:flex; gap:9px; flex-wrap:wrap; }
.swatch { width:34px; height:34px; padding:0; border:2px solid var(--surface-1); border-radius:50%; background:var(--swatch); box-shadow:0 0 0 1px var(--line-strong); cursor:pointer; }
.swatch[aria-pressed="true"] { box-shadow:0 0 0 2px var(--surface-1),0 0 0 4px var(--swatch); scale:.9; }
.appearance-foot { display:flex; gap:9px; padding:13px 20px; border-top:1px solid var(--line); background:var(--surface-glass); }
.appearance-foot .btn { flex:1; }
body.drawer-open { overflow:hidden; }

/* Searchable help */
.help-shell { max-width:1220px; margin:0 auto; }
.help-hero { position:relative; overflow:hidden; padding:clamp(22px,4vw,42px); margin-bottom:18px; border:1px solid var(--line); border-radius:var(--r-xl); background:linear-gradient(125deg,var(--surface-1),color-mix(in srgb,var(--surface-2) 70%,var(--brand-soft))); box-shadow:var(--shadow-sm); }
.help-hero::after { content:"؟"; position:absolute; inset-inline-start:clamp(16px,6vw,72px); inset-block-start:-42px; color:var(--brand); opacity:.08; font-size:210px; font-weight:900; line-height:1; }
.help-eyebrow { display:inline-flex; gap:7px; align-items:center; padding:4px 10px; color:var(--brand); background:var(--brand-soft); border:1px solid color-mix(in srgb,var(--brand) 28%,transparent); border-radius:99px; font-size:11.5px; font-weight:800; }
.help-hero h1 { margin:10px 0 5px; font-size:clamp(24px,3vw,38px); }
.help-hero p { max-width:750px; margin:0; color:var(--muted); }
.help-search-wrap { position:sticky; top:calc(var(--header-height) + 10px); z-index:30; display:flex; align-items:center; gap:10px; margin:0 0 18px; padding:10px; background:var(--surface-glass); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); backdrop-filter:blur(14px); }
.help-search-wrap .search-icon { width:42px; height:42px; display:grid; place-items:center; flex:none; color:var(--brand); background:var(--brand-soft); border-radius:var(--r-md); }
.help-search-wrap input { margin:0; border:0!important; background:transparent!important; box-shadow:none!important; font-size:15px; }
.help-count { min-width:max-content; padding-inline:10px; color:var(--muted); font-size:11.5px; }
.help-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:18px; align-items:start; }
.help-toc { position:sticky; top:calc(var(--header-height) + 84px); padding:13px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface-1); }
.help-toc h2 { margin:0 7px 8px; font-size:12px; color:var(--muted); }
.help-toc a { display:flex; gap:8px; padding:7px 9px; color:var(--muted); border-radius:var(--r-sm); font-size:11.5px; }
.help-toc a:hover { color:var(--brand); background:var(--brand-soft); text-decoration:none; }
.help-results { min-width:0; }
.help-card { scroll-margin-top:calc(var(--header-height) + 100px); padding:20px 22px; margin-bottom:13px; color:var(--ink); background:var(--surface-1); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-xs); }
.help-card[hidden] { display:none; }
.help-card h2 { display:flex; align-items:center; gap:9px; margin:0 0 8px; font-size:17px; }
.help-card h2 span { width:34px; height:34px; display:grid; place-items:center; flex:none; color:var(--brand); background:var(--brand-soft); border-radius:var(--r-md); }
.help-card h3 { margin:17px 0 5px; font-size:13.5px; }
.help-card p,.help-card li { color:var(--muted); font-size:13px; }
.help-card li { margin-block:5px; }
.help-card code,.kbd { padding:2px 7px; color:var(--ink); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-xs); font-family:var(--font-ui); font-size:11.5px; }
.help-callout { padding:11px 13px; margin:10px 0; border-inline-start:3px solid var(--brand); border-radius:var(--r-sm); background:var(--brand-pale); }
.help-empty { display:none; padding:42px 20px; text-align:center; color:var(--muted); border:1px dashed var(--line-strong); border-radius:var(--r-lg); }
.help-empty.show { display:block; }
mark.help-mark { padding:0 2px; color:var(--ink-strong); background:color-mix(in srgb,var(--warn) 35%,transparent); border-radius:3px; }

/* Empty/loading affordances */
.skeleton { position:relative; overflow:hidden; color:transparent!important; background:var(--surface-2)!important; border-radius:var(--r-sm); }
.skeleton::after { content:""; position:absolute; inset:0; translate:-100% 0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); animation:skeleton 1.3s infinite; }
[aria-busy="true"] { cursor:progress; }
[aria-busy="true"]::after { content:""; width:14px; height:14px; border:2px solid currentColor; border-inline-end-color:transparent; border-radius:50%; animation:spin .7s linear infinite; }

@keyframes dsFade { from{opacity:0} to{opacity:1} }
@keyframes dsDrawer { from{translate:28px 0;opacity:.5} to{translate:0;opacity:1} }
@keyframes skeleton { to{translate:100% 0} }
@keyframes spin { to{rotate:360deg} }

@media (max-width:1500px) {
  :root { --header-height:118px; }
  html[data-theme] header { align-items:flex-start; flex-wrap:wrap; }
  html[data-theme] .topnav { order:4; width:100%; }
  .header-spacer { display:none; }
}
@media (max-width:760px) {
  :root { --header-height:112px; }
  html[data-theme] header { padding:8px 10px; gap:8px; }
  html[data-theme] .wrap { padding:12px 10px 34px!important; }
  .brand-wordmark { width:108px!important; height:38px!important; }
  .brand-wordmark span { font-size:20px!important; }
  .brand-copy,.userbox .who { display:none!important; }
  .pswitch { max-width:45vw; overflow:auto; }
  .nav-link { padding:7px 9px!important; font-size:11.5px!important; }
  .theme-grid { grid-template-columns:1fr 1fr; }
  .choice-row { grid-template-columns:1fr; }
  .help-layout { grid-template-columns:1fr; }
  .help-toc { position:static; display:flex; gap:4px; overflow:auto; }
  .help-toc h2 { display:none; }
  .help-toc a { min-width:max-content; }
  .help-search-wrap { top:calc(var(--header-height) + 4px); }
  .help-count { display:none; }
  .help-card { padding:16px; }
  html[data-theme] .charts,
  html[data-theme] .acc-grid,
  html[data-theme] .an-grid,
  html[data-theme] .charts2 { grid-template-columns:minmax(0,1fr)!important; }
  html[data-theme] .charts .card,
  html[data-theme] .acc-grid .card,
  html[data-theme] .an-grid .card { min-width:0!important; width:100%!important; }
  html[data-theme] .catalog-card { overflow:hidden!important; }
  html[data-theme] #grid { max-width:100%; overflow:hidden; }
  html[data-theme] .toolbar input[type="text"] { width:100%!important; }
}
@media (max-width:480px) {
  :root { --header-height:106px; }
  .theme-grid { grid-template-columns:1fr; }
  .appearance-head,.appearance-body,.appearance-foot { padding-inline:14px; }
  .help-hero { padding:20px 16px; }
}
@media (prefers-contrast:more) {
  :root { --line:rgba(148,163,184,.32); --line-strong:rgba(148,163,184,.54); }
  html[data-theme] .muted,html[data-theme] .sub { color:color-mix(in srgb,var(--muted) 70%,var(--ink))!important; }
}
@media print {
  header,.appearance-backdrop,.help-toc,.help-search-wrap { display:none!important; }
  body { background:#fff!important; color:#000!important; }
  .wrap { max-width:none!important; padding:0!important; }
  .card,.help-card { box-shadow:none!important; break-inside:avoid; }
}