/* ============ Citi Scope V3 — Executive OS ============ */
:root{
  --page:#0d0d0d;
  --surface:#1a1a19;
  --surface-2:#232322;
  --surface-3:#2c2c2a;
  --ink:#ffffff;
  --ink-2:#c3c2b7;
  --ink-3:#898781;
  --hairline:rgba(255,255,255,0.10);
  --hairline-soft:rgba(255,255,255,0.06);
  --grid:#2c2c2a;

  --blue:#3987e5;
  --green:#008300;
  --magenta:#d55181;
  --yellow:#c98500;
  --aqua:#199e70;
  --orange:#d95926;
  --violet:#9085e9;
  --red:#e66767;

  --good:#0ca30c;
  --warn:#fab219;
  --serious:#ec835a;
  --critical:#d03b3b;

  --gold:#fab219;
  --r:14px;
  --font:system-ui,-apple-system,"Segoe UI",sans-serif;

  /* theme-driven roles (dark defaults) */
  --chrome:#111110;
  --modal:#161615;
  --toastbg:#232322;
  --accent:#3987e5;
  --accent-ink:#ffffff;
  --series:#3987e5;
  --series-red:#e66767;
  --good-ink:#54d354;
  --warn-ink:#fab219;
  --serious-ink:#ec835a;
  --crit-ink:#ff9c9c;
  --red-ink:#e66767;
  --info-ink:#7fb4f0;
  --violet-ink:#b5aef5;
  --gold-ink:#fab219;
  --crisis-bg:#3a1210;
  --crisis-border:rgba(230,103,103,.35);
  --crisis-ink:#ffb3b0;
  --shadow:rgba(0,0,0,.6);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font);
  background:var(--page);
  color:var(--ink);
  font-size:14px;
  line-height:1.45;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea{font-family:inherit;color:inherit}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:5px}
::-webkit-scrollbar-track{background:transparent}

/* ============ layout ============ */
.app{display:flex;height:100vh;overflow:hidden}
.main-col{flex:1;display:flex;flex-direction:column;min-width:0}
.view{flex:1;overflow-y:auto;padding:22px 26px 60px}

/* ============ sidebar ============ */
.sidebar{
  width:232px;flex-shrink:0;background:var(--chrome);border-right:1px solid var(--hairline-soft);
  display:flex;flex-direction:column;
}
.brand{display:flex;align-items:center;gap:11px;padding:18px 16px 14px;border-bottom:1px solid var(--hairline-soft)}
.brand-mark{width:34px;height:34px}
.brand-name{font-weight:800;letter-spacing:.14em;font-size:14px}
.brand-sub{font-size:10.5px;color:var(--ink-3);letter-spacing:.06em}
.nav{flex:1;overflow-y:auto;padding:10px 8px}
.nav-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 10px;border-radius:9px;color:var(--ink-2);font-size:13px;font-weight:600;
  margin-bottom:2px;position:relative;
}
.nav-item .ico{width:17px;height:17px;flex-shrink:0;color:var(--ink-3)}
.nav-item:hover{background:var(--surface-2);color:var(--ink)}
.nav-item.active{background:var(--surface-2);color:var(--ink)}
.nav-item.active::before{
  content:"";position:absolute;left:-8px;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--gold);
}
.nav-item.active .ico{color:var(--gold)}
.nav-count{
  margin-left:auto;background:var(--surface-3);color:var(--ink-2);
  font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:9px;
}
.nav-count.hot{background:var(--critical);color:#fff}
.sidebar-foot{padding:12px;border-top:1px solid var(--hairline-soft)}
.user-chip{display:flex;align-items:center;gap:10px}
.user-name{font-size:13px;font-weight:700}
.user-role{font-size:11px;color:var(--ink-3)}

/* ============ topbar ============ */
.topbar{
  display:flex;align-items:center;gap:16px;padding:12px 26px;
  border-bottom:1px solid var(--hairline-soft);background:var(--chrome);
}
.search-wrap{
  display:flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--hairline);border-radius:10px;padding:7px 12px;width:340px;
}
.search-wrap .ico{width:15px;height:15px;color:var(--ink-3)}
.search-wrap input{flex:1;background:none;border:none;outline:none;font-size:13px;color:var(--ink)}
.search-wrap input::placeholder{color:var(--ink-3)}
.ticker{display:flex;gap:8px;flex:1;overflow:hidden}
.tick{
  display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;
  background:var(--surface);border:1px solid var(--hairline-soft);font-size:12px;white-space:nowrap;
}
.tick b{font-weight:700}
.tick .up{color:var(--good);font-weight:700}
.tick .dn{color:var(--red);font-weight:700}
.topbar-right{display:flex;align-items:center;gap:12px;position:relative}
.clock-wrap{text-align:right}
.clock{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.03em}
.clock-sub{font-size:10.5px;color:var(--ink-3)}
.icon-btn{
  position:relative;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--hairline-soft);color:var(--ink-2);
}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}
.icon-btn .ico{width:18px;height:18px}
.badge{
  position:absolute;top:-5px;right:-5px;background:var(--critical);color:#fff;
  font-size:10px;font-weight:800;min-width:17px;height:17px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
}
.badge-green{background:var(--good)}

/* ============ crisis strip ============ */
.crisis-strip{display:none;align-items:center;gap:12px;padding:9px 26px;background:var(--crisis-bg);border-bottom:1px solid var(--crisis-border)}
.crisis-strip.show{display:flex}
.crisis-dot{width:9px;height:9px;border-radius:50%;background:var(--critical);animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.crisis-strip b{color:var(--crisis-ink)}
.crisis-strip span{color:var(--ink-2);font-size:13px}
.crisis-strip .btn{margin-left:auto}

/* ============ common components ============ */
.section-head{margin-bottom:18px}
.section-title{font-size:21px;font-weight:800;letter-spacing:-.01em}
.section-sub{color:var(--ink-3);font-size:13px;margin-top:2px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:1fr 1fr 1fr}
.g4{grid-template-columns:repeat(4,1fr)}
.g23{grid-template-columns:2fr 1fr}
.g32{grid-template-columns:1fr 2fr}
@media(max-width:1500px){.g4{grid-template-columns:1fr 1fr}}
@media(max-width:1150px){.g2,.g3,.g23,.g32{grid-template-columns:1fr}}
.card{
  background:var(--surface);border:1px solid var(--hairline-soft);border-radius:var(--r);
  padding:16px 18px;min-width:0;
}
.card-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;gap:10px}
.card-title{font-size:13px;font-weight:800;letter-spacing:.02em}
.card-tag{font-size:11px;color:var(--ink-3);white-space:nowrap}
.mt{margin-top:14px}

/* stat tiles */
.stat{padding:14px 18px}
.stat-label{font-size:11.5px;color:var(--ink-3);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.stat-value{font-size:26px;font-weight:800;margin:3px 0 1px;letter-spacing:-.01em}
.stat-delta{font-size:12px;font-weight:700}
.stat-delta.up{color:var(--good-ink)}
.stat-delta.dn{color:var(--red-ink)}
.stat-delta.flat{color:var(--ink-3)}
.stat-foot{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.sparkline{margin-top:8px;width:100%;height:34px;display:block}

/* rows / lists */
.row{
  display:flex;align-items:center;gap:12px;padding:10px 2px;
  border-bottom:1px solid var(--hairline-soft);
}
.row:last-child{border-bottom:none}
.row-main{flex:1;min-width:0}
.row-title{font-size:13px;font-weight:600}
.row-sub{font-size:12px;color:var(--ink-3);margin-top:1px}
.row-end{text-align:right;flex-shrink:0}
.row-val{font-size:13px;font-weight:700}
.row-val-sub{font-size:11px;color:var(--ink-3)}
.row.done{opacity:.42}
.row.done .row-title{text-decoration:line-through}

/* pills & status */
.pill{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  padding:2px 9px;border-radius:20px;white-space:nowrap;
}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.p-good{color:var(--good-ink);background:rgba(12,163,12,.14)}
.p-warn{color:var(--warn-ink);background:rgba(250,178,25,.12)}
.p-serious{color:var(--serious-ink);background:rgba(236,131,90,.12)}
.p-crit{color:var(--crit-ink);background:rgba(208,59,59,.18)}
.p-info{color:var(--info-ink);background:rgba(57,135,229,.14)}
.p-neutral{color:var(--ink-2);background:var(--surface-3)}
.p-violet{color:var(--violet-ink);background:rgba(144,133,233,.15)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:9px;
  font-size:12.5px;font-weight:700;border:1px solid var(--hairline);background:var(--surface-2);color:var(--ink);
}
.btn:hover{background:var(--surface-3)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{opacity:.86}
.btn-good{background:var(--good);border-color:var(--good);color:#fff}
.btn-good:hover{background:#0a8f0a}
.btn-danger{background:transparent;border-color:rgba(230,103,103,.5);color:var(--red)}
.btn-danger:hover{background:rgba(208,59,59,.15)}
.btn-ghost{background:transparent}
.btn-sm{padding:4px 10px;font-size:11.5px;border-radius:7px}
.btn-gold{background:var(--gold);border-color:var(--gold);color:#1a1200}
.btn-gold:hover{background:#e0a017}

/* progress */
.prog{height:7px;background:var(--surface-3);border-radius:4px;overflow:hidden}
.prog>i{display:block;height:100%;border-radius:4px;background:var(--accent)}

/* avatars */
.avatar{
  width:38px;height:38px;border-radius:50%;background:var(--surface-3);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;
  flex-shrink:0;color:#fff;
}
.av-ceo{background:linear-gradient(135deg,#c98500,#fab219);color:#1a1200}
.avatar.sm{width:30px;height:30px;font-size:11px}

/* tables */
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{
  text-align:left;color:var(--ink-3);font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  font-weight:700;padding:6px 8px;border-bottom:1px solid var(--hairline);
}
.tbl td{padding:8px;border-bottom:1px solid var(--hairline-soft);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}

/* charts */
.chart{width:100%;display:block}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.legend-item{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2)}
.legend-swatch{width:10px;height:10px;border-radius:3px}

/* schedule */
.sched-row{display:flex;gap:12px;padding:8px 2px;border-bottom:1px solid var(--hairline-soft);align-items:center}
.sched-row:last-child{border-bottom:none}
.sched-time{width:64px;flex-shrink:0;font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px;color:var(--ink-2)}
.sched-bar{width:3px;align-self:stretch;border-radius:2px;flex-shrink:0}
.sched-row.now{background:rgba(57,135,229,.07);border-radius:8px}
.sched-cut .row-title{text-decoration:line-through;color:var(--ink-3)}

/* kanban-ish columns */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.colcard{background:var(--surface-2);border:1px solid var(--hairline-soft);border-radius:10px;padding:10px 12px}
.colcard h5{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin-bottom:8px}
.mini{background:var(--surface);border:1px solid var(--hairline-soft);border-radius:8px;padding:8px 10px;margin-bottom:7px;font-size:12px}
.mini b{display:block;font-size:12px}
.mini span{color:var(--ink-3);font-size:11px}

/* ============ right rail ============ */
.rail{
  width:300px;flex-shrink:0;background:var(--chrome);border-left:1px solid var(--hairline-soft);
  display:flex;flex-direction:column;
}
.rail.hidden{display:none}
.rail-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 16px 12px;font-weight:800;font-size:13px;letter-spacing:.05em;
  border-bottom:1px solid var(--hairline-soft);
}
.rail-close{font-size:20px;color:var(--ink-3);width:28px;height:28px;border-radius:7px;line-height:1}
.rail-close:hover{background:var(--surface-2);color:var(--ink)}
.rail-scroll{flex:1;overflow-y:auto;padding:12px 14px}
.rail-sec-title{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:700;margin:10px 0 8px}
.exec{
  display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;margin-bottom:4px;
  border:1px solid transparent;
}
.exec:hover{background:var(--surface);border-color:var(--hairline-soft)}
.exec-name{font-size:12.5px;font-weight:700}
.exec-role{font-size:11px;color:var(--ink-3)}
.exec-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.exec-actions{margin-left:auto;display:flex;gap:6px}
.exec-btn{
  width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--hairline-soft);color:var(--ink-2);
}
.exec-btn:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.exec-btn.call:hover{background:var(--good);border-color:var(--good)}
.exec-btn .ico{width:14px;height:14px}
.integrations{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.integ{
  display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px;
  background:var(--surface);border:1px solid var(--hairline-soft);
}
.integ:hover{background:var(--surface-2);border-color:var(--hairline)}
.integ img{width:20px;height:20px;object-fit:contain;flex-shrink:0}
.integ .fallback{
  width:20px;height:20px;border-radius:5px;background:var(--surface-3);
  display:none;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0;
}
.integ-name{font-size:11.5px;font-weight:700;line-height:1.15}
.integ-sub{font-size:9.5px;color:var(--ink-3)}
.integ-unread{margin-left:auto;font-size:9.5px;font-weight:800;background:var(--critical);color:#fff;border-radius:8px;padding:1px 5px}
.rail-note{font-size:9.5px;color:var(--ink-3);margin-top:14px;line-height:1.5}

/* ============ modals ============ */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(6,6,6,.72);display:none;
  align-items:center;justify-content:center;z-index:100;
}
.modal-backdrop.show{display:flex}
.phone-card{
  width:320px;background:var(--modal);border:1px solid var(--hairline);border-radius:24px;
  padding:34px 26px 30px;text-align:center;box-shadow:0 30px 80px var(--shadow);
}
.phone-status{font-size:12px;color:var(--gold);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.phone-status.live{color:var(--good)}
.phone-avatar{
  width:84px;height:84px;border-radius:50%;margin:18px auto 12px;background:var(--surface-3);
  display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;
}
.phone-name{font-size:19px;font-weight:800}
.phone-role{font-size:12.5px;color:var(--ink-3)}
.phone-number{font-size:13px;color:var(--ink-2);margin-top:6px;font-variant-numeric:tabular-nums}
.phone-timer{font-size:15px;font-weight:700;color:var(--ink-2);margin:14px 0 20px;font-variant-numeric:tabular-nums}
.phone-actions{display:flex;justify-content:center;gap:18px}
.phone-btn{
  width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--hairline);color:var(--ink-2);
}
.phone-btn .ico{width:22px;height:22px}
.phone-btn.end{background:var(--critical);border-color:var(--critical);color:#fff}
.phone-btn.end:hover{background:#b53232}
.phone-btn.active{background:var(--blue);border-color:var(--blue);color:#fff}
.sms-card{
  width:400px;max-width:94vw;height:540px;max-height:88vh;background:var(--modal);
  border:1px solid var(--hairline);border-radius:18px;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 30px 80px var(--shadow);
}
.sms-head{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--hairline-soft)}
.sms-head .rail-close{margin-left:auto}
.sms-name{font-weight:800;font-size:14px}
.sms-sub{font-size:11px;color:var(--good)}
.sms-thread{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}
.bubble{
  max-width:78%;padding:8px 12px;border-radius:14px;font-size:13px;line-height:1.4;
}
.bubble.them{background:var(--surface-2);border-bottom-left-radius:4px;align-self:flex-start}
.bubble.me{background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:4px;align-self:flex-end}
.bubble-time{font-size:9.5px;color:var(--ink-3);margin-top:3px}
.bubble.me .bubble-time{color:rgba(255,255,255,.65)}
.sms-composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--hairline-soft)}
.sms-composer input{
  flex:1;background:var(--surface);border:1px solid var(--hairline);border-radius:10px;
  padding:9px 12px;font-size:13px;outline:none;
}
.sms-composer input:focus{border-color:var(--accent)}
.detail-card{
  width:560px;max-width:94vw;max-height:86vh;background:var(--modal);border:1px solid var(--hairline);
  border-radius:18px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px var(--shadow);
}
.detail-head{
  display:flex;align-items:center;justify-content:space-between;padding:15px 18px;
  font-weight:800;border-bottom:1px solid var(--hairline-soft);
}
.detail-body{padding:16px 18px;overflow-y:auto;font-size:13px;color:var(--ink-2)}
.detail-body h4{color:var(--ink);margin:12px 0 6px;font-size:13px}
.detail-body h4:first-child{margin-top:0}
.detail-body p{margin-bottom:8px}

/* ============ toasts ============ */
.toasts{position:fixed;bottom:22px;right:22px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{
  background:var(--toastbg);border:1px solid var(--hairline);border-left:3px solid var(--good);
  border-radius:10px;padding:11px 16px;font-size:12.5px;font-weight:600;min-width:240px;max-width:340px;
  box-shadow:0 12px 40px var(--shadow);animation:slideIn .25s ease;
}
.toast.warn{border-left-color:var(--warn)}
.toast.crit{border-left-color:var(--critical)}
.toast.info{border-left-color:var(--blue)}
.toast small{display:block;color:var(--ink-3);font-weight:500;margin-top:2px}
@keyframes slideIn{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}

/* inbox */
.mail{cursor:pointer}
.mail-unread .row-title{font-weight:800}
.mail-unread .row-title::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:middle}

/* energy ring */
.ring-wrap{display:flex;align-items:center;gap:16px}
.ring-lbl{font-size:12px;color:var(--ink-2)}

/* checkbox rows */
.chk{
  width:17px;height:17px;border-radius:5px;border:1.5px solid var(--ink-3);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:transparent;
}
.row.done .chk,.chk.on{background:var(--good);border-color:var(--good);color:#fff}

/* util */
/* ============ theme picker ============ */
.theme-pop{
  position:absolute;top:48px;right:0;width:316px;background:var(--modal);
  border:1px solid var(--hairline);border-radius:14px;padding:14px;z-index:95;display:none;
  box-shadow:0 22px 60px var(--shadow);
}
.theme-pop.show{display:block}
.theme-group{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:800;margin:4px 0 8px}
.theme-group + .theme-grid{margin-bottom:12px}
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.theme-chip{
  display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:9px;
  border:1px solid var(--hairline-soft);background:var(--surface);font-size:11.5px;font-weight:700;
  color:var(--ink-2);text-align:left;
}
.theme-chip:hover{background:var(--surface-2);color:var(--ink)}
.theme-chip.active{border-color:var(--accent);color:var(--ink)}
.theme-chip.active::after{content:"✓";margin-left:auto;color:var(--accent);font-weight:800}
.theme-dot{width:18px;height:18px;border-radius:50%;flex-shrink:0;border:1px solid var(--hairline)}

/* ============ light mode base (each light theme layers on this) ============ */
html[data-mode="light"]{
  --ink:#161511;
  --ink-2:#4c4b47;
  --ink-3:#7d7b74;
  --hairline:rgba(20,19,15,0.16);
  --hairline-soft:rgba(20,19,15,0.09);
  --grid:#dcdbd3;
  --good-ink:#006300;
  --warn-ink:#8a5b00;
  --serious-ink:#a84318;
  --crit-ink:#b3261e;
  --red-ink:#c62828;
  --info-ink:#1c5cab;
  --violet-ink:#4a3aa7;
  --gold-ink:#8a5b00;
  --series-red:#d03b3b;
  --crisis-bg:#fbe9e7;
  --crisis-border:rgba(208,59,59,.35);
  --crisis-ink:#8f1d18;
  --shadow:rgba(30,30,25,.20);
  --gold:#c98500;
}
html[data-mode="light"] .p-crit{background:rgba(208,59,59,.10)}
html[data-mode="light"] .p-info{background:rgba(42,120,214,.10)}
html[data-mode="light"] .btn-gold{color:#231800}

/* ============ dark themes ============ */
/* 1. Midnight = :root defaults */
html[data-theme="obsidian"]{
  --page:#070b14;--chrome:#0a101d;--surface:#111827;--surface-2:#1a2334;--surface-3:#232e42;
  --modal:#0e1522;--toastbg:#1a2334;--grid:#232e42;--accent:#4a8fe8;--series:#4a8fe8;
}
html[data-theme="carbon-gold"]{
  --page:#0b0b0b;--chrome:#0f0f0e;--surface:#181816;--surface-2:#211f1c;--surface-3:#2a2822;
  --modal:#141412;--toastbg:#211f1c;--grid:#2a2822;--accent:#d9a521;--accent-ink:#1f1500;
  --gold:#d9a521;--gold-ink:#e8bd4a;--series:#d9a521;
}
html[data-theme="forest"]{
  --page:#071008;--chrome:#0a140c;--surface:#111f14;--surface-2:#18291c;--surface-3:#1f3324;
  --modal:#0e1a11;--toastbg:#18291c;--grid:#1f3324;--accent:#34a853;--accent-ink:#04180a;
  --series:#4caf6e;
}
html[data-theme="royal"]{
  --page:#0d0a1a;--chrome:#110e22;--surface:#1a1530;--surface-2:#241d40;--surface-3:#2e2650;
  --modal:#161230;--toastbg:#241d40;--grid:#2e2650;--accent:#9085e9;--accent-ink:#100b30;
  --series:#9085e9;
}
html[data-theme="ember"]{
  --page:#120a0a;--chrome:#170d0d;--surface:#221212;--surface-2:#2c1818;--surface-3:#361e1e;
  --modal:#1c0f0f;--toastbg:#2c1818;--grid:#361e1e;--accent:#e66767;--accent-ink:#2a0505;
  --series:#6d9fe0;
}
html[data-theme="ocean"]{
  --page:#05100f;--chrome:#081514;--surface:#0e211f;--surface-2:#142c29;--surface-3:#1a3733;
  --modal:#0b1b1a;--toastbg:#142c29;--grid:#1a3733;--accent:#1fbf9f;--accent-ink:#02201a;
  --gold:#f2c14e;--gold-ink:#f2c14e;--series:#2bb3a3;
}
html[data-theme="espresso"]{
  --page:#100c09;--chrome:#140f0b;--surface:#1f1712;--surface-2:#2a1f18;--surface-3:#35281e;
  --modal:#1a1310;--toastbg:#2a1f18;--grid:#35281e;--accent:#c98850;--accent-ink:#241100;
  --series:#6d9fe0;
}
html[data-theme="slate"]{
  --page:#0e1116;--chrome:#12161c;--surface:#1a2028;--surface-2:#222a34;--surface-3:#2a3440;
  --modal:#161b22;--toastbg:#222a34;--grid:#2a3440;--accent:#7fa6c9;--accent-ink:#0c1620;
  --series:#7fa6c9;
}
html[data-theme="cyber"]{
  --page:#050505;--chrome:#0a0a0a;--surface:#121212;--surface-2:#1a1a1a;--surface-3:#242424;
  --modal:#0f0f0f;--toastbg:#1a1a1a;--grid:#242424;--accent:#00e5c3;--accent-ink:#00251e;
  --gold:#ffd60a;--gold-ink:#ffd60a;--series:#00c9ac;
}

/* ============ light themes ============ */
html[data-theme="daylight"]{
  --page:#f4f4f1;--chrome:#fbfbf9;--surface:#ffffff;--surface-2:#f1f1ed;--surface-3:#e4e3dc;
  --modal:#ffffff;--toastbg:#ffffff;--accent:#2a78d6;--accent-ink:#ffffff;--series:#2a78d6;
}
html[data-theme="ivory"]{
  --page:#f7f3e8;--chrome:#fbf8f0;--surface:#fffdf6;--surface-2:#f2ecdc;--surface-3:#e6ddc7;
  --modal:#fffdf6;--toastbg:#fffdf6;--accent:#b8860b;--accent-ink:#ffffff;--series:#256abf;
}
html[data-theme="arctic"]{
  --page:#eef3f8;--chrome:#f6f9fc;--surface:#ffffff;--surface-2:#e9eff5;--surface-3:#d9e3ed;
  --modal:#ffffff;--toastbg:#ffffff;--accent:#1c5cab;--accent-ink:#ffffff;--series:#2a78d6;
}
html[data-theme="sage"]{
  --page:#eef3ec;--chrome:#f5f8f4;--surface:#fdfffc;--surface-2:#e7eee5;--surface-3:#d7e2d3;
  --modal:#fdfffc;--toastbg:#fdfffc;--accent:#2e7d32;--accent-ink:#ffffff;--series:#2e7d32;
}
html[data-theme="lavender"]{
  --page:#f1eff8;--chrome:#f7f5fc;--surface:#fffeff;--surface-2:#eae7f4;--surface-3:#dcd6ec;
  --modal:#fffeff;--toastbg:#fffeff;--accent:#5b4bc4;--accent-ink:#ffffff;--series:#5b4bc4;
}
html[data-theme="blush"]{
  --page:#f8f0f1;--chrome:#fcf6f7;--surface:#fffcfc;--surface-2:#f3e7e9;--surface-3:#e8d6da;
  --modal:#fffcfc;--toastbg:#fffcfc;--accent:#c2185b;--accent-ink:#ffffff;--series:#c2185b;
}
html[data-theme="sand"]{
  --page:#f5f0e6;--chrome:#faf6ee;--surface:#fffdf8;--surface-2:#efe8d8;--surface-3:#e2d8c2;
  --modal:#fffdf8;--toastbg:#fffdf8;--accent:#8d6e2f;--accent-ink:#ffffff;--series:#256abf;
}
html[data-theme="mist"]{
  --page:#f0f0f0;--chrome:#f7f7f7;--surface:#ffffff;--surface-2:#eaeaea;--surface-3:#dcdcdc;
  --modal:#ffffff;--toastbg:#ffffff;--accent:#455a64;--accent-ink:#ffffff;--series:#2a78d6;
}
html[data-theme="sky"]{
  --page:#e9f2fb;--chrome:#f3f8fd;--surface:#ffffff;--surface-2:#e2edf8;--surface-3:#d0e1f1;
  --modal:#ffffff;--toastbg:#ffffff;--accent:#2a78d6;--accent-ink:#ffffff;--series:#2a78d6;
}
html[data-theme="mint"]{
  --page:#eaf6f2;--chrome:#f3faf8;--surface:#ffffff;--surface-2:#e2f0eb;--surface-3:#d0e5dd;
  --modal:#ffffff;--toastbg:#ffffff;--accent:#0e8a6d;--accent-ink:#ffffff;--series:#199e70;
}

.muted{color:var(--ink-3)}
.small{font-size:11.5px}
.flex{display:flex;align-items:center;gap:8px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ico{width:16px;height:16px}
.hide{display:none!important}
.hl-gold{color:var(--gold-ink)}
.hl-blue{color:var(--info-ink)}