/* Swiss Pulse — Swiss Systems brand system
   ink #001433 · navy #282C68 · periwinkle #5D6BA9 · green #1f9d6b · amber #ffb100 · rose #e85b6b */
:root {
  --ink: #001433;
  --ink-2: #0a2748;
  --ink-3: #143a6b;
  --navy: #282C68;
  --blue: #5D6BA9;
  --blue-soft: rgba(93, 107, 169, .12);
  --grey: #8A8A8A;
  --green: #1f9d6b;
  --green-hi: #25b87d;
  --green-soft: rgba(31, 157, 107, .12);
  --amber: #ffb100;
  --amber-soft: rgba(255, 177, 0, .14);
  --rose: #e85b6b;
  --rose-soft: rgba(232, 91, 107, .10);
  --water: #2f8fd8;
  --water-soft: rgba(47, 143, 216, .12);
  --diesel: #b4652f;
  --diesel-soft: rgba(180, 101, 47, .12);

  --paper: #ffffff;
  --paper-2: #f6f8fb;
  --paper-3: #eef2f7;
  --text: #001433;
  --text-2: #3b4a64;
  --text-3: #6b7a90;
  --line: rgba(0, 20, 51, .10);
  --line-2: rgba(0, 20, 51, .06);
  --line-on-ink: rgba(255, 255, 255, .12);

  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 22px;
  --shadow-1: 0 1px 0 rgba(0,20,51,.04), 0 1px 2px rgba(0,20,51,.04);
  --shadow-2: 0 6px 18px rgba(0,20,51,.06), 0 2px 4px rgba(0,20,51,.04);
  --shadow-3: 0 18px 48px rgba(0,20,51,.12), 0 6px 12px rgba(0,20,51,.06);
  --ease: cubic-bezier(.2,.7,.2,1);
  --sidebar-w: 260px;

  --src-solar: var(--green);
  --src-grid: var(--amber);
  --src-battery: var(--blue);
  --src-load: var(--navy);
  --src-water: var(--water);
  --src-diesel: var(--diesel);
  --src-generator: #7c3aed;
}

html, body { height: 100%; }
body {
  font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--paper-2);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.mono, code, kbd, pre, .num { font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--navy); text-decoration: underline; }
h1, h2, h3, h4, h5 { font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .page > *, .tile, .kpi .value { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* ---- shell --------------------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w);
  background: var(--ink);
  background-image: radial-gradient(120% 120% at 100% -10%, rgba(93,107,169,.18) 0, transparent 55%);
  color: #c9d3e3;
  display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0;
  padding: 20px 16px 16px;
  overflow-y: auto;
  z-index: 1030;
  transition: transform .22s var(--ease);
}
.content { margin-left: var(--sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; }
.brand { display: block; padding: 4px 8px 18px; border-bottom: 1px solid var(--line-on-ink); margin-bottom: 14px; }
.brand img { width: 150px; height: auto; display: block; }
.brand-product { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; color: #fff; font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.brand-product small { color: var(--blue); font-weight: 500; font-size: 12px; letter-spacing: 0; }
.tenant-chip { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.06); border: 1px solid var(--line-on-ink); border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 14px; font-weight: 500; color: #fff; font-size: 13.5px; }
.tenant-chip i { color: var(--blue); }
.nav-label { font-size: 12px; color: #7f93ab; padding: 14px 12px 6px; font-weight: 500; }
.nav-section { display: flex; flex-direction: column; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--radius-sm); color: #c9d3e3; font-weight: 500; font-size: 14px; transition: background .12s var(--ease), color .12s; }
.nav-item i { width: 18px; text-align: center; font-size: 15px; opacity: .8; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.nav-item.active { background: var(--blue); color: #fff; }
.nav-item.active i { opacity: 1; }
.sidebar-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-on-ink); }
.user-line { display: flex; align-items: center; gap: 8px; color: #fff; margin-bottom: 10px; font-weight: 500; font-size: 13.5px; }
.sidebar .btn-outline-light { border-color: var(--line-on-ink); color: #c9d3e3; }
.sidebar .btn-outline-light:hover { background: rgba(255,255,255,.08); color: #fff; }

.topbar { position: sticky; top: 0; z-index: 1020; background: rgba(246,248,251,.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-2); display: flex; align-items: center; gap: 12px; padding: 12px 28px; min-height: 60px; }
.topbar-title { font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.live-indicator { font-size: 12px; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--paper-3); }
.live-indicator::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #b8c2cf; }
.live-indicator.on { color: #0f6b47; background: var(--green-soft); }
.live-indicator.on::before { background: var(--green); box-shadow: 0 0 0 3px rgba(31,157,107,.2); }
.live-indicator.off { color: #9b2f3b; background: var(--rose-soft); }
.live-indicator.off::before { background: var(--rose); }
.page { padding: 24px 28px 48px; flex: 1; }
.page-footer { padding: 12px 28px; color: var(--text-3); font-size: 12px; border-top: 1px solid var(--line-2); }
.sidebar-toggle { color: var(--text); padding: 0; }

@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  body.sidebar-open .sidebar { transform: none; box-shadow: 0 0 0 100vw rgba(0,20,51,.45); }
  .content { margin-left: 0; }
  .page, .topbar { padding-left: 16px; padding-right: 16px; }
}

/* ---- surfaces ------------------------------------------------------------ */
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); background: var(--paper); }
.card-header { background: transparent; border-bottom: 1px solid var(--line-2); font-weight: 600; padding: 12px 18px; color: var(--ink); }
.card-body { padding: 18px; }
.card-footer { background: var(--paper-2); border-top: 1px solid var(--line-2); border-radius: 0 0 var(--radius) var(--radius); }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
.kpi { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 2px; position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--kpi-color, var(--blue)); }
.kpi .label { color: var(--text-3); font-size: 12.5px; font-weight: 500; }
.kpi .value { font-size: 26px; font-weight: 600; font-family: "JetBrains Mono", monospace; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.kpi .value small { font-size: 12px; color: var(--text-3); font-weight: 500; margin-left: 4px; font-family: "Inter Tight", sans-serif; }
.kpi .delta { font-size: 12px; color: var(--text-3); }
.kpi .delta.up { color: var(--rose); }
.kpi .delta.down { color: var(--green); }
.kpi.solar { --kpi-color: var(--src-solar); }
.kpi.grid { --kpi-color: var(--src-grid); }
.kpi.battery { --kpi-color: var(--src-battery); }
.kpi.load { --kpi-color: var(--src-load); }
.kpi.water { --kpi-color: var(--src-water); }
.kpi.diesel { --kpi-color: var(--src-diesel); }
.kpi.alert { --kpi-color: var(--rose); }
.kpi.ok { --kpi-color: var(--green); }

.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 12px; }
.tile { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; transition: box-shadow .4s var(--ease); }
.tile.flash { box-shadow: 0 0 0 3px var(--blue-soft); }
.tile.stale .tile-value { opacity: .55; }
.tile-head { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; font-weight: 500; }
.tile-head i { color: var(--blue); font-size: 15px; }
.tile-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-value { display: flex; align-items: baseline; gap: 6px; min-height: 32px; }
.tile-value .num { font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.tile-value .unit { color: var(--text-3); font-size: 13px; }
.tile-foot { display: flex; align-items: center; gap: 6px; }
.state-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 600; font-size: 12px; background: var(--paper-3); color: var(--text-3); }
.state-pill.on { background: var(--green-soft); color: #0f6b47; }

.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #b8c2cf; margin-right: 6px; vertical-align: middle; }
.status-dot.online { background: var(--green); box-shadow: 0 0 0 3px rgba(31,157,107,.18); }
.status-dot.offline { background: var(--rose); }
.status-dot.disabled { background: #c9d1dc; }

.table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--paper-2); }
.table thead th { font-size: 12.5px; color: var(--text-3); font-weight: 500; border-bottom: 1px solid var(--line); padding: 10px 14px; }
.table td { vertical-align: middle; padding: 10px 14px; border-color: var(--line-2); }
.table-card .table { margin-bottom: 0; }
.badge { font-weight: 500; border-radius: 6px; padding: 4px 8px; }
.badge.sev-Info { background: var(--blue-soft); color: var(--navy); }
.badge.sev-Warning { background: var(--amber-soft); color: #7a5300; }
.badge.sev-Critical { background: var(--rose-soft); color: #9b2f3b; }
.text-bg-success { background: var(--green) !important; }
.text-bg-danger { background: var(--rose) !important; }
.text-bg-warning { background: var(--amber) !important; color: var(--ink) !important; }

.form-label { font-weight: 500; font-size: 13px; color: var(--text-2); }
.form-control, .form-select { border-color: var(--line); border-radius: var(--radius-sm); font-size: 14px; }
.form-control:focus, .form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.form-text { font-size: 12px; color: var(--text-3); }
textarea.code { font-family: "JetBrains Mono", monospace; font-size: 12.5px; line-height: 1.45; }
.btn { font-weight: 500; border-radius: var(--radius-sm); }
.btn-primary { background: var(--navy); border-color: var(--navy); }
.btn-primary:hover, .btn-primary:focus { background: var(--ink-3); border-color: var(--ink-3); }
.btn-accent { background: var(--green); border-color: var(--green); color: #fff; }
.btn-accent:hover { background: var(--green-hi); border-color: var(--green-hi); color: #fff; }
.btn-outline-secondary { border-color: var(--line); color: var(--text-2); }
.btn-outline-secondary:hover { background: var(--paper-3); border-color: var(--line); color: var(--ink); }
.btn-outline-primary { border-color: var(--blue); color: var(--blue); }
.btn-outline-primary:hover { background: var(--blue); border-color: var(--blue); }
.btn-outline-success { border-color: var(--green); color: var(--green); }
.btn-outline-success:hover { background: var(--green); border-color: var(--green); }
.btn-outline-danger { border-color: var(--rose); color: var(--rose); }
.btn-outline-danger:hover { background: var(--rose); border-color: var(--rose); }
.alert { border-radius: var(--radius-sm); border: 0; }
.alert-success { background: var(--green-soft); color: #0f6b47; }
.alert-warning { background: var(--amber-soft); color: #7a5300; }
.alert-danger { background: var(--rose-soft); color: #9b2f3b; }
.alert-info { background: var(--blue-soft); color: var(--navy); }
.list-group-item { border-color: var(--line-2); padding: 11px 18px; }
.scene-card { display: flex; align-items: center; gap: 12px; }
.scene-card .scene-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--blue-soft); color: var(--navy); display: grid; place-items: center; font-size: 18px; }
.chart-box { position: relative; height: 320px; }
.chart-box.sm { height: 220px; }
.chart-box.xs { height: 140px; }
.key-box { font-family: "JetBrains Mono", monospace; background: var(--ink); color: #d8e3f2; padding: 12px 14px; border-radius: var(--radius-sm); word-break: break-all; }
.empty { text-align: center; color: var(--text-3); padding: 44px 20px; background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius); }
.empty i { font-size: 32px; display: block; margin-bottom: 8px; color: var(--blue); }
.section-title { display: flex; align-items: baseline; gap: 10px; margin: 24px 0 10px; }
.section-title h5 { margin: 0; }
.section-title .hint { color: var(--text-3); font-size: 12.5px; }
pre.bg-light { background: var(--paper-2) !important; border: 1px solid var(--line-2); border-radius: var(--radius-sm); }

/* ---- energy flow --------------------------------------------------------- */
.flow-card { background: var(--ink); background-image: radial-gradient(120% 120% at 100% -10%, rgba(93,107,169,.22) 0, transparent 55%); color: #fff; border: 0; border-radius: var(--radius-lg); overflow: hidden; }
.flow-card .card-body { padding: 22px 26px; }
.flow-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.flow-head h5 { color: #fff; margin: 0; }
.flow-head .hint { color: #8fa3bb; font-size: 12.5px; }
.flow-head .cost { margin-left: auto; text-align: right; }
.flow-head .cost .num { font-size: 22px; font-weight: 600; color: #fff; }
.flow-head .cost small { display: block; color: #8fa3bb; font-size: 12px; }
.flow-svg { width: 100%; height: auto; display: block; max-height: 460px; margin: 4px auto 0; }
.flow-svg text { font-family: "Inter Tight", sans-serif; fill: #fff; }
.flow-svg .lbl { font-size: 12px; fill: #b8c4d6; font-weight: 500; }
.flow-svg .sub { font-size: 11px; fill: #8fa3bb; }
.flow-svg .val { font-family: "JetBrains Mono", monospace; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.flow-svg .nbox { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.14); stroke-width: 1; transition: stroke .4s, fill .4s; }
.flow-svg .fnode.solar .nbox { stroke: rgba(31,157,107,.55); }
.flow-svg .fnode.grid .nbox { stroke: rgba(255,177,0,.55); }
.flow-svg .fnode.battery .nbox { stroke: rgba(93,107,169,.7); }
.flow-svg .fnode.load .nbox { stroke: rgba(255,255,255,.35); }
.flow-svg .fnode.gen .nbox { stroke: rgba(124,58,237,.6); }
.flow-svg .nbox.inv { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.4); }
.flow-svg .fnode.active .nbox { fill: rgba(255,255,255,.09); }
.flow-svg .fedge { fill: none; stroke-width: 2; stroke-linecap: round; opacity: .18; transition: opacity .5s; }
.flow-svg .fedge.on { opacity: .55; }
.flow-svg .fedge.solar { stroke: var(--src-solar); }
.flow-svg .fedge.grid { stroke: var(--src-grid); }
.flow-svg .fedge.battery { stroke: var(--src-battery); }
.flow-svg .fedge.load { stroke: #e9eef6; }
.flow-svg .fedge.gen { stroke: var(--src-generator); }
.flow-svg .particle { filter: url(#glow); }
.flow-svg .particle.solar { fill: var(--src-solar); }
.flow-svg .particle.grid { fill: var(--src-grid); }
.flow-svg .particle.battery { fill: var(--src-battery); }
.flow-svg .particle.load { fill: #fff; }
.flow-svg .particle.gen { fill: var(--src-generator); }
.flow-svg .fnode.grid.export .nbox { stroke: rgba(31,157,107,.6); }
.flow-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; font-size: 12px; color: #c9d3e3; }
.flow-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--c); }

/* ---- device picker ------------------------------------------------------- */
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.type-card { display: flex; gap: 12px; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; cursor: pointer; transition: border-color .12s, box-shadow .12s; color: var(--text); }
.type-card:hover { border-color: var(--blue); text-decoration: none; color: var(--text); box-shadow: var(--shadow-2); }
.type-card .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--blue-soft); color: var(--navy); display: grid; place-items: center; font-size: 18px; flex: none; }
.type-card .nm { font-weight: 600; font-size: 14px; }
.type-card .ds { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.type-card .tg { font-size: 11.5px; color: var(--blue); margin-top: 6px; }
.wizard-steps { display: flex; gap: 0; margin-bottom: 18px; font-size: 13px; }
.wizard-steps span { padding: 8px 14px; border: 1px solid var(--line); background: var(--paper); color: var(--text-3); }
.wizard-steps span:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.wizard-steps span:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.wizard-steps span.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.wizard-steps span.done { color: var(--green); }
.guide { background: var(--paper-2); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 16px 18px; font-size: 13.5px; }
.guide h6 { font-weight: 600; margin-bottom: 8px; }
.guide ol { padding-left: 18px; margin-bottom: 8px; }
.guide li { margin-bottom: 4px; }
.guide code { background: var(--paper); border: 1px solid var(--line-2); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.test-result { border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; }
.test-result.ok { background: var(--green-soft); color: #0f6b47; }
.test-result.fail { background: var(--rose-soft); color: #9b2f3b; }

/* ---- reports ------------------------------------------------------------- */
.report-tabs .nav-link { color: var(--text-2); font-weight: 500; border-radius: var(--radius-sm); }
.report-tabs .nav-link.active { background: var(--navy); color: #fff; }
.heat { display: grid; grid-template-columns: 56px repeat(24, 1fr); gap: 2px; font-size: 10.5px; }
.heat .h { color: var(--text-3); text-align: center; }
.heat .d { color: var(--text-3); padding-right: 6px; text-align: right; line-height: 18px; }
.heat .c { height: 18px; border-radius: 3px; background: rgba(40,44,104, var(--a, .05)); }
@media print {
  .sidebar, .topbar, .page-actions, .btn, form.no-print { display: none !important; }
  .content { margin: 0; }
  .page { padding: 0; }
  .card { box-shadow: none; break-inside: avoid; }
  body { background: #fff; }
}

/* ---- dark theme ---------------------------------------------------------- */
:root[data-theme="dark"] {
  --paper: #0f1b2d;
  --paper-2: #0b1424;
  --paper-3: #15243a;
  --text: #e9eef6;
  --text-2: #b8c4d6;
  --text-3: #8fa3bb;
  --line: rgba(255, 255, 255, .12);
  --line-2: rgba(255, 255, 255, .07);
  --blue-soft: rgba(93, 107, 169, .22);
  --green-soft: rgba(31, 157, 107, .2);
  --amber-soft: rgba(255, 177, 0, .18);
  --rose-soft: rgba(232, 91, 107, .18);
  --shadow-1: 0 1px 2px rgba(0,0,0,.3);
  --shadow-2: 0 6px 18px rgba(0,0,0,.35);
  --shadow-3: 0 18px 48px rgba(0,0,0,.5);
  --src-load: #c9d3e3;
}
:root[data-theme="dark"] body { background: var(--paper-2); color: var(--text); }
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, :root[data-theme="dark"] h5 { color: var(--text); }
:root[data-theme="dark"] .sidebar { background: #08101e; }
:root[data-theme="dark"] .topbar { background: rgba(11,20,36,.86); }
:root[data-theme="dark"] .card-header, :root[data-theme="dark"] .kpi .value, :root[data-theme="dark"] .tile-value .num { color: var(--text); }
:root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select { background: var(--paper-3); color: var(--text); border-color: var(--line); }
:root[data-theme="dark"] .form-control::placeholder { color: var(--text-3); }
:root[data-theme="dark"] .form-control:disabled { background: var(--paper-2); color: var(--text-3); }
:root[data-theme="dark"] .table { --bs-table-color: var(--text); --bs-table-hover-color: var(--text); }
:root[data-theme="dark"] .table td, :root[data-theme="dark"] .table th { color: var(--text); }
:root[data-theme="dark"] .text-muted { color: var(--text-3) !important; }
:root[data-theme="dark"] .list-group-item { background: transparent; color: var(--text); }
:root[data-theme="dark"] .state-pill { background: var(--paper-3); color: var(--text-2); }
:root[data-theme="dark"] .state-pill.on { background: var(--green-soft); color: #25b87d; }
:root[data-theme="dark"] .badge.text-bg-light { background: var(--paper-3) !important; color: var(--text-2) !important; border-color: var(--line) !important; }
:root[data-theme="dark"] .bg-light { background: var(--paper-3) !important; }
:root[data-theme="dark"] pre, :root[data-theme="dark"] .guide { background: var(--paper-3); color: var(--text); border-color: var(--line); }
:root[data-theme="dark"] .guide code { background: var(--paper-2); border-color: var(--line); }
:root[data-theme="dark"] .type-card { color: var(--text); }
:root[data-theme="dark"] .wizard-steps span { background: var(--paper-3); color: var(--text-3); }
:root[data-theme="dark"] .wizard-steps span.active { background: var(--blue); color: #fff; }
:root[data-theme="dark"] .btn-outline-secondary { color: var(--text-2); }
:root[data-theme="dark"] .btn-close { filter: invert(1); }
:root[data-theme="dark"] .heat .c { background: rgba(93,107,169, var(--a, .08)); }
:root[data-theme="dark"] .alert-success { color: #25b87d; }
:root[data-theme="dark"] .alert-info { color: #aab4e0; }
:root[data-theme="dark"] .dropdown-menu { background: var(--paper); border-color: var(--line); }
:root[data-theme="dark"] .dropdown-item { color: var(--text); }
:root[data-theme="dark"] .dropdown-item:hover { background: var(--paper-3); }
:root[data-theme="dark"] .modal-content { background: var(--paper); color: var(--text); }
:root[data-theme="dark"] .empty { background: var(--paper); }
.theme-toggle { border-radius: 999px; width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center; }
:root[data-theme="dark"] .theme-toggle .bi-moon-stars::before { content: "\f4d4"; }

/* ---- auth / public (VMS pattern) ---------------------------------------- */
body.auth { min-height: 100vh; background: var(--paper-2); }
.auth-toggle { position: fixed; top: 20px; right: 20px; z-index: 10; background: var(--paper); border: 1px solid var(--line); color: var(--text-2); }
.auth-toggle:hover { color: var(--text); }
.auth-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }
.auth-panel {
  background: var(--ink);
  background-image: radial-gradient(120% 120% at 100% -10%, rgba(93,107,169,.28) 0, transparent 55%), radial-gradient(70% 60% at 0% 100%, rgba(31,157,107,.16) 0, transparent 60%);
  color: #e9eef6; padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.auth-panel::after { content: ""; position: absolute; inset: auto -120px -160px auto; width: 520px; height: 520px; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 0 0 60px rgba(255,255,255,.025), 0 0 0 130px rgba(255,255,255,.02); pointer-events: none; }
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand img { width: 46px; height: 46px; }
.auth-brand .name { font-weight: 700; font-size: 17px; color: #fff; letter-spacing: -.01em; }
.eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--green-hi); }
.auth-hero { margin: auto 0; padding: 48px 0; max-width: 560px; position: relative; }
.auth-hero .eyebrow { margin-bottom: 14px; }
.auth-hero h1 { font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; color: #fff; margin: 0 0 16px; }
.auth-hero h1 em { font-style: normal; color: var(--green-hi); }
.auth-hero p { font-size: 17px; line-height: 1.5; color: #b8c4d6; max-width: 52ch; margin-bottom: 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chip { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #d9e4f0; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 8px 14px; display: inline-flex; gap: 8px; align-items: center; }
.chip i { color: var(--green-hi); font-size: 12px; }
.auth-stats { display: flex; gap: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); flex-wrap: wrap; }
.auth-stats .num { font-family: "JetBrains Mono", monospace; font-size: 26px; font-weight: 600; color: #fff; }
.auth-stats .lbl { font-size: 12.5px; color: #b8c4d6; }
.auth-foot { display: flex; gap: 18px; align-items: center; font-size: 12.5px; color: #b8c4d6; position: relative; }
.auth-foot a { color: #fff; font-weight: 500; }
.auth-side { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-card { width: 100%; max-width: 440px; background: var(--paper); color: var(--text); border-radius: 22px; padding: 40px 40px 32px; box-shadow: var(--shadow-3); }
.auth-card h2 { font-size: 34px; font-weight: 700; letter-spacing: -.03em; margin: 8px 0 4px; }
.auth-card .lead { color: var(--text-3); font-size: 15px; margin-bottom: 22px; }
.input-icon { position: relative; display: flex; }
.input-icon > i { position: absolute; left: 0; top: 0; bottom: 0; width: 44px; display: grid; place-items: center; color: var(--text-3); border-right: 1px solid var(--line-2); }
.input-icon .form-control { padding-left: 56px; height: 48px; background: var(--paper-2); }
.input-icon .eye { position: absolute; right: 0; top: 0; bottom: 0; width: 44px; border: 0; background: transparent; color: var(--text-3); border-left: 1px solid var(--line-2); }
.btn-pill { border-radius: 999px; height: 50px; font-size: 16px; font-weight: 600; }
.auth-note { margin-top: 18px; font-size: 12.5px; color: var(--text-3); text-align: center; }
.auth-note i { color: var(--green); }
.auth-secure { margin-top: 24px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); display: flex; align-items: center; gap: 8px; }
.auth-secure .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(31,157,107,.2); }
.auth-copy { margin-top: 8px; font-size: 12px; color: var(--text-3); }
@media (max-width: 991.98px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-panel { min-height: auto; }
  .auth-hero { padding: 28px 0; }
  .auth-foot { flex-wrap: wrap; }
}
:root[data-theme="dark"] body.auth { background: #08101e; }
:root[data-theme="dark"] .auth-card { background: #0f1b2d; }
:root[data-theme="dark"] .input-icon .form-control { background: #15243a; }
:root[data-theme="dark"] .auth-toggle { background: #0f1b2d; }

/* ---- motion ----------------------------------------------------------------- */
.kpi .value, .tile-value .num, .flow-svg .val { transition: color .3s var(--ease); }
.kpi .value.bump, .tile-value .num.bump { color: var(--blue); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page > .row, .page > .card, .page > .kpi-grid, .page > .tile-grid { animation: rise .35s var(--ease) both; }
.page > *:nth-child(2) { animation-delay: .04s; } .page > *:nth-child(3) { animation-delay: .08s; } .page > *:nth-child(4) { animation-delay: .12s; } .page > *:nth-child(5) { animation-delay: .16s; }