/* StationIQ v2 stylesheet (UI redesign, Figma IB2iEb4JBmCq2jqYwPFLIL,
   "Screens · v2 Desktop 1920"). Design tokens come from ../design/tokens.css,
   generated from the Figma variables; nothing here redefines one.

   The interface is still an instrument panel. Three things carry that:

   SURFACES at three levels — the ground, the panel, and the recessed well a
   measured value sits in — plus one new one, the dark BAND that states the
   answer before the figures (KPI Cockpit's narrative band, here in the
   substation's own words).

   COLOUR BY VOLTAGE is the structural device: 220 kV, 33 kV and 6.6 kV keep
   their colours on the mimic, the 3D twin, the topology map, the energy flow
   and the telemetry. Brand red is the wordmark, the one primary action and a
   critical state — never "which page am I on".

   TYPE is one family: IBM Plex Sans for prose, Condensed for the labels an
   instrument panel silk-screens, Mono for every measured value, Plex Sans
   Arabic for the Arabic interface.

   MOTION animates transform and opacity only (design/motion.js); nothing
   loops off-screen; everything stops under prefers-reduced-motion. */
:root{
  color-scheme:light;
  --well-line:rgba(16,21,28,.07);
  --grid:rgba(14,19,25,.04); --glass:rgba(255,255,255,.86); --bezel:rgba(255,255,255,.9);
  --trace:rgba(14,19,25,.10);
  --shadow-sm:0 1px 2px rgba(14,19,25,.06);
  --shadow-md:0 1px 2px rgba(14,19,25,.05), 0 8px 20px rgba(14,19,25,.07);
  --shadow-lg:0 2px 6px rgba(14,19,25,.06), 0 24px 52px rgba(14,19,25,.14);
  --panel-shadow:0 1px 2px rgba(14,19,25,.04);
  --well-shadow:inset 0 1px 2px rgba(14,19,25,.05), inset 0 0 0 1px var(--well-line);
  --ff-sans:"IBM Plex Sans","IBM Plex Sans Arabic",ui-sans-serif,system-ui,sans-serif;
  --ff-cond:"IBM Plex Sans Condensed","IBM Plex Sans","IBM Plex Sans Arabic",ui-sans-serif,sans-serif;
  --ff-mono:"IBM Plex Mono","IBM Plex Sans Arabic",ui-monospace,SFMono-Regular,monospace;
  --lbl-track:.12em;
  --rail-w:248px; --top-h:64px;
  --tbg:#0f151c; --tgrid:rgba(63,192,232,.055);
  --cover:var(--panel);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --well-line:rgba(0,0,0,.5);
  --grid:rgba(232,238,244,.035); --glass:rgba(15,19,24,.9); --bezel:rgba(255,255,255,.04);
  --trace:rgba(232,238,244,.10);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 2px 14px rgba(0,0,0,.42);
  --shadow-lg:0 24px 56px rgba(0,0,0,.6);
  --panel-shadow:0 1px 2px rgba(0,0,0,.35);
  --well-shadow:inset 0 2px 5px rgba(0,0,0,.42), inset 0 0 0 1px var(--well-line);
}
:root[data-theme="light"]{ --tbg:#0e1620; --tgrid:rgba(63,192,232,.07); }
:root.rail-min{ --rail-w:72px; }

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--ff-sans); -webkit-font-smoothing:antialiased; }
/* The panel ground: a fine engineering grid, the way a drawing sheet is ruled. */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 120% 80% at 50% 0%, #000 25%, transparent 100%);
}
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; }
svg{ display:block; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:4px; }
[hidden]{ display:none !important; }

/* Measured values: mono, tabular, isolated so "220 kV" never reorders in RTL. */
.n, .mono, .pill, .rdg, .lbl{ unicode-bidi:isolate; }
.n{ font-family:var(--ff-mono); font-variant-numeric:tabular-nums; letter-spacing:0; white-space:nowrap; }
.mono{ font-family:var(--ff-mono); font-variant-numeric:tabular-nums; }
[dir="rtl"] .n, [dir="rtl"] .rdg{ direction:ltr; text-align:inherit; }
[dir="rtl"] .mono{ unicode-bidi:plaintext; text-align:inherit; }
[dir="rtl"] .mimic svg text{ direction:ltr; unicode-bidi:bidi-override; }
.ident{ unicode-bidi:isolate; direction:ltr; display:inline-block; }
.eyebrow{ font-family:var(--ff-cond); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }

/* ====================================================================== shell */
.shell{ display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr); min-height:100vh; position:relative; z-index:1; transition:grid-template-columns var(--dur-drawer) var(--ease); }
.rail{ background:var(--rail); border-inline-end:1px solid var(--line); padding:16px 12px 12px;
       display:flex; flex-direction:column; gap:14px; position:sticky; top:0; height:100vh; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; }
.brandmark{ display:flex; align-items:center; gap:10px; padding:2px 4px 2px; min-height:36px; }
/* The CONTROWARE logo (design/controware.svg). It reads left to right in Arabic too. */
.cw-mark{ flex:none; display:block; width:38px; height:28px; }
.cw-word{ display:block; width:66px; height:9.4px; color:var(--ink-muted); }
.cw-logo{ display:block; width:auto; aspect-ratio:380/112; }
.brandname{ font-family:var(--ff-cond); line-height:1.05; color:var(--ink); display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.brandname .bn-b{ font-weight:700; color:var(--ink); font-size:17px; letter-spacing:-.01em; }
.rail-tg{ width:28px !important; height:28px !important; flex:none; }
.rail-tg svg{ transition:transform var(--dur-drawer) var(--ease); }
[dir="rtl"] .rail-tg svg{ transform:scaleX(-1); }
.rail-min .rail-tg svg{ transform:scaleX(-1); }
[dir="rtl"].rail-min .rail-tg svg{ transform:none; }
.site-wrap{ display:flex; flex-direction:column; gap:6px; }
.site-box{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); }
.site-dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none; }
.site-box select{ appearance:none; border:none; background:transparent; font-size:12.5px; font-weight:600; width:100%; min-width:0; cursor:pointer; padding:0; box-shadow:none; text-overflow:ellipsis; }
.site-box select:focus{ box-shadow:none; }
nav{ display:flex; flex-direction:column; gap:2px; }
.navlabel{ font-family:var(--ff-cond); font-size:9.5px; font-weight:700; letter-spacing:var(--lbl-track); text-transform:uppercase; color:var(--ink-faint); margin:14px 10px 6px; white-space:nowrap; }
.navlabel:first-child{ margin-top:4px; }
/* Active is a raised surface with the brand on the icon and a leading edge-light. */
.navbtn{ display:flex; align-items:center; gap:12px; text-align:start; padding:8px 10px; border-radius:var(--r-sm); min-height:36px;
         border:1px solid transparent; background:transparent; font-size:13px; font-weight:500; position:relative; color:var(--ink-muted); white-space:nowrap;
         transition:background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease); }
.navbtn .ic{ width:16px; height:16px; flex:none; color:var(--ink-faint); transition:color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease); }
.navbtn:hover{ background:color-mix(in srgb, var(--surface) 70%, transparent); color:var(--ink); }
.navbtn:hover .ic{ color:var(--ink-muted); transform:scale(1.08); }
.navbtn:active{ transform:scale(.98); }
.navbtn.active{ background:var(--surface); color:var(--ink); font-weight:600; border-color:var(--line); box-shadow:var(--shadow-sm); }
.navbtn.active .ic{ color:var(--brand); }
.navbtn.active::before{ content:""; position:absolute; inset-inline-start:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--brand); }
[dir="rtl"] .navbtn.active::before{ border-radius:3px 0 0 3px; }
.navbtn .badge{ margin-inline-start:auto; font-family:var(--ff-mono); font-size:10px; font-weight:600; padding:1px 6px; border-radius:20px; background:var(--bad-soft); color:var(--bad); }
.rail-foot{ margin-top:auto; padding-top:12px; border-top:1px solid var(--line); display:flex; align-items:center; gap:8px; }
.avatar{ width:32px; height:32px; border-radius:var(--r-sm); background:var(--surface-2); border:1px solid var(--line); flex:none;
         display:flex; align-items:center; justify-content:center; font-family:var(--ff-mono); font-size:11px; font-weight:600; }
.rail-foot .who{ min-width:0; flex:1; }
.rail-foot .who b{ display:block; font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rail-foot .who span{ font-family:var(--ff-cond); font-size:9.5px; font-weight:600; color:var(--ink-faint); letter-spacing:.1em; text-transform:uppercase; }
.rail-foot .iconbtn{ width:30px; height:30px; }
/* collapsed rail: icons and tooltips (the nav buttons carry a title) */
.rail-min .rail{ padding-inline:12px; align-items:stretch; }
.rail-min .brandname, .rail-min .site-wrap, .rail-min .navbtn span:not(.badge), .rail-min .rail-foot .who, .rail-min #btnPw{ display:none; }
.rail-min .brandmark{ flex-direction:column; gap:10px; padding:0; }
.rail-min .navlabel{ font-size:0; margin:10px 8px 6px; height:1px; background:var(--line); }
.rail-min .navbtn{ justify-content:center; padding:8px 0; }
.rail-min .navbtn .badge{ position:absolute; top:3px; inset-inline-end:3px; min-width:8px; height:8px; padding:0; font-size:0; }
.rail-min .rail-foot{ flex-direction:column; }

main{ display:flex; flex-direction:column; min-width:0; }
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 28px; min-height:var(--top-h);
         border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:20; }
.tb-title{ min-width:0; }
.topbar h1{ font-family:var(--ff-cond); font-weight:600; font-size:22px; margin:0; letter-spacing:-.005em; white-space:nowrap; }
.topbar .sub{ font-size:10.5px; color:var(--ink-faint); margin-top:4px; font-family:var(--ff-mono); }
.topbar-actions{ display:flex; align-items:center; gap:8px; }
.liveline{ position:absolute; inset-inline:0; bottom:-1px; height:2px; background:linear-gradient(90deg, transparent, var(--accent), transparent);
           transform:scaleX(0); transform-origin:var(--lo, left); opacity:0; pointer-events:none; }
[dir="rtl"] .liveline{ --lo:right; }
.content{ padding:22px 28px 72px; flex:1; }
/* The signature under every view. It sits inside the padding above, so no view grows. */
.cw-sign{ display:flex; justify-content:center; height:52px; margin-top:-52px; pointer-events:none; color:var(--ink-muted); opacity:.5; }
.cw-sign .cw-logo{ height:24px; }
#boot{ position:fixed; inset:0; display:grid; place-items:center; color:var(--ink-muted); animation:cwBoot .4s var(--ease) .2s both; }
#boot .cw-logo{ height:64px; }
#login:not([hidden]) ~ #boot, #app:not([hidden]) ~ #boot{ display:none; }
@keyframes cwBoot{ from{ opacity:0; } to{ opacity:1; } }

.readout{ display:flex; align-items:stretch; margin-inline-end:6px; }
.readout .rd{ padding:0 14px; border-inline-start:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; gap:4px; }
.readout .rd:first-child{ border-inline-start:none; }
.readout .rk{ font-family:var(--ff-cond); font-size:8.5px; font-weight:600; letter-spacing:var(--lbl-track); text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; }
.readout .rv{ font-family:var(--ff-mono); font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:0; }
.hdr-stat .v.ok{ color:var(--ok); }
@media (max-width:1380px){ .readout .rd:first-child{ display:none; } }
@media (max-width:1180px){ .hdr-stats{ display:none; } }
.cmdbtn{ display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 8px 0 10px; border-radius:var(--r-sm); border:1px solid var(--line);
         background:var(--surface); color:var(--ink-faint); font-size:12px; min-width:220px; transition:border-color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease); }
.cmdbtn span{ flex:1; text-align:start; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmdbtn:hover{ border-color:var(--line-strong); color:var(--ink-muted); }
kbd{ font-family:var(--ff-mono); font-size:10px; padding:1px 4px; border-radius:4px; border:1px solid var(--line); color:var(--ink-faint); background:var(--surface-2); }
@media (max-width:1280px){ .cmdbtn{ min-width:0; } .cmdbtn span, .cmdbtn kbd{ display:none; } }

.livechip{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:20px; border:1px solid var(--line); background:var(--surface-2);
           font-size:11px; font-weight:600; font-family:var(--ff-mono); font-variant-numeric:tabular-nums; }
/* Live dots pulse with a scaled ring (transform + opacity), not a box-shadow. */
.livechip .dot, .scada .dot{ width:6px; height:6px; border-radius:50%; background:var(--ok); position:relative; flex:none; }
.livechip .dot::after, .scada .dot::after{ content:""; position:absolute; inset:-3px; border-radius:50%; border:2px solid var(--ok); opacity:0; animation:ping 2.6s var(--ease) infinite; }
@keyframes ping{ 0%{ transform:scale(.5); opacity:.7; } 70%,100%{ transform:scale(1.8); opacity:0; } }
.livechip.stale .dot{ background:var(--warn); } .livechip.stale .dot::after{ animation:none; }
.scada{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-muted); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scada #vScadaTxt{ overflow:hidden; text-overflow:ellipsis; }

/* ====================================================================== controls */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 14px; border-radius:var(--r-sm); border:1px solid var(--line);
      background:var(--surface); font-size:12.5px; font-weight:600; white-space:nowrap;
      transition:background var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), transform var(--dur-press) ease-out, color var(--dur-hover) var(--ease); }
.btn:hover{ border-color:var(--line-strong); background:var(--surface-2); }
.btn:active{ transform:scale(.97); }
.btn.primary{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }
.btn.primary:hover{ background:var(--brand-2); border-color:var(--brand-2); }
.btn.ghost{ background:transparent; border-color:transparent; }
.btn.ghost:hover{ background:var(--surface-2); border-color:var(--line); }
.btn.sm{ padding:4px 10px; font-size:11.5px; }
.btn.block{ width:100%; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.iconbtn{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--r-sm); border:1px solid var(--line);
          background:var(--surface); position:relative; color:var(--ink-muted); transition:background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease), transform var(--dur-press) ease-out; }
.iconbtn.ghost{ border-color:transparent; background:transparent; }
.iconbtn:hover{ background:var(--surface-2); color:var(--ink); }
.iconbtn:active{ transform:scale(.94); }
.iconbtn .ndot{ position:absolute; top:6px; inset-inline-end:6px; width:7px; height:7px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 2px var(--bg); }
/* A segmented control is a rotary selector: the chosen position is seated. */
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--well); box-shadow:var(--well-shadow); padding:4px; gap:2px; }
.seg button{ padding:4px 12px; border:none; border-radius:var(--r-xs); background:transparent; font-size:11.5px; font-weight:600; color:var(--ink-muted);
             transition:color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease); }
.seg button:hover{ color:var(--ink); }
.seg button.on{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }
.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; border:1px solid var(--line); background:transparent;
       font-size:11.5px; font-weight:600; color:var(--ink-muted); transition:all var(--dur-hover) var(--ease); }
.chip b{ font-family:var(--ff-mono); font-weight:600; color:var(--ink-faint); }
.chip:hover{ border-color:var(--line-strong); color:var(--ink); }
.chip.on{ border-color:var(--accent); background:var(--accent-soft); color:var(--ink); }
.chip i{ width:7px; height:7px; border-radius:50%; background:var(--cc, var(--ink-faint)); }

/* ====================================================================== layout */
.grid{ display:grid; gap:16px; }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.g5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.ghero{ grid-template-columns:2fr 1fr 1fr; }
.g-side{ grid-template-columns:minmax(0,1fr) 400px; }
.g-side-l{ grid-template-columns:420px minmax(0,1fr); }
.stack-v{ display:flex; flex-direction:column; gap:16px; }
.toolbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.toolbar .sp{ flex:1; }
.mt{ margin-top:16px; }
@media (max-width:1420px){ .g5{ grid-template-columns:repeat(3,minmax(0,1fr)); } .g-side{ grid-template-columns:minmax(0,1fr) 340px; } }
@media (max-width:1180px){ .g4{ grid-template-columns:repeat(2,minmax(0,1fr)); } .g3{ grid-template-columns:repeat(2,minmax(0,1fr)); } .g-side,.g-side-l{ grid-template-columns:1fr; } }
@media (max-width:1100px){ .ghero{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){ .g2,.g3,.g4,.g5,.ghero{ grid-template-columns:1fr; } .shell{ grid-template-columns:1fr; } .rail{ position:static; height:auto; } }

/* ====================================================================== panels */
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--panel-shadow); min-width:0; }
.panel-hd{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px 12px; }
.panel-hd + .tbl-wrap, .panel-hd + .panel-bd{ border-top:0; }
.panel-hd h3{ font-family:var(--ff-sans); font-size:14px; font-weight:600; margin:0; color:var(--ink); display:flex; align-items:center; gap:10px; letter-spacing:0; }
.panel-hd h3::before{ content:""; width:3px; height:14px; border-radius:2px; background:var(--pc,var(--accent)); flex:none; }
.panel-hd .hint{ font-size:11.5px; color:var(--ink-faint); text-align:end; }
.panel-hd .acts{ display:flex; gap:6px; align-items:center; }
.panel-bd{ padding:4px 18px 18px; }
.panel-bd.tight{ padding-top:0; }
.hint{ color:var(--ink-faint); }

/* ====================================================================== the narrative band */
/* The answer first, always dark (both themes): KPI Cockpit's band in the
   substation's own words. Figma: Narrative band. */
.band{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px; align-items:center; padding:24px 28px; margin-bottom:16px;
       border-radius:var(--r-lg); background:var(--band); color:var(--band-ink); border:1px solid var(--band-line); overflow:hidden; }
.band::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 140% at 100% 0%, rgba(67,195,234,.10), transparent 60%), radial-gradient(60% 120% at 0% 100%, rgba(242,179,58,.06), transparent 60%); }
/* dark: the band is lifted above the page (tokens), and its light is a little stronger so it reads as the first card */
[data-theme="dark"] .band::after{ background:radial-gradient(90% 140% at 100% 0%, rgba(67,195,234,.18), transparent 60%), radial-gradient(60% 120% at 0% 100%, rgba(242,179,58,.08), transparent 60%); }
.band > *{ position:relative; z-index:1; }
.band .b-eyebrow{ font-family:var(--ff-cond); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--band-ink-2); }
.band .b-head{ font-family:var(--ff-cond); font-size:26px; font-weight:600; line-height:1.22; margin:8px 0 8px; letter-spacing:-.01em; max-width:68ch; }
.band .b-head .n{ font-weight:600; }
.band .b-sub{ font-size:13px; line-height:1.55; color:var(--band-ink-2); max-width:84ch; }
.band .b-bar{ display:flex; gap:2px; height:6px; border-radius:3px; overflow:hidden; margin-top:14px; max-width:720px; transform-origin:var(--lo,left); }
[dir="rtl"] .band .b-bar{ --lo:right; }
.band .b-bar i{ display:block; height:100%; }
.band .b-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.band .b-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; border:1px solid var(--band-line); font-family:var(--ff-mono); font-size:11px; color:var(--band-ink-2); }
.band .b-chip i{ width:6px; height:6px; border-radius:50%; background:var(--cc, var(--ok)); }
.band .b-side{ display:flex; align-items:center; gap:18px; }
.band .b-tiles{ display:flex; flex-direction:column; gap:8px; min-width:168px; }
.band .b-tile{ padding:8px 12px; border-radius:10px; border:1px solid var(--band-line); background:rgba(255,255,255,.03); text-align:start; color:inherit; transition:background var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease); }
.band .b-tile:hover{ background:rgba(255,255,255,.07); transform:translateY(-1px); }
.band .b-tile span{ display:block; font-size:11px; color:var(--band-ink-2); }
.band .b-tile b{ display:block; font-family:var(--ff-mono); font-size:17px; font-weight:600; margin-top:2px; }
.band .gauge .g-track{ stroke:rgba(255,255,255,.10); }
.band .gauge .g-read b{ color:var(--band-ink); }
.band .gauge .g-read span, .band .gauge .g-scale{ color:var(--band-ink-2); }
.band .gauge .g-needle line{ stroke:var(--band-ink); } .band .gauge .g-needle circle{ fill:var(--band-ink); }
@media (max-width:1180px){ .band{ grid-template-columns:1fr; } }

/* ====================================================================== instrument tile */
/* Every tile opens something. The board's smaller sibling: same well, same trace floor. */
.tile{ position:relative; text-align:start; width:100%; padding:0; border-radius:var(--r); border:1px solid var(--line); background:var(--panel); box-shadow:var(--panel-shadow);
       overflow:hidden; display:flex; flex-direction:column; color:inherit;
       transition:transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease); }
.tile::before{ content:""; position:absolute; inset-inline-start:0; inset-block:0; width:3px; background:var(--tc,var(--accent)); opacity:.9; }
.tile .twrap{ padding:14px 16px 12px; position:relative; z-index:1; }
.tile .tl{ display:flex; align-items:center; gap:8px; font-family:var(--ff-cond); font-size:10px; font-weight:600; letter-spacing:var(--lbl-track); text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px; }
.tile .tl .vl{ font-size:9px; font-weight:600; letter-spacing:.06em; padding:1px 4px; border-radius:3px; background:color-mix(in srgb, var(--tc) 18%, transparent); color:var(--tc); }
.tile .val{ display:flex; align-items:baseline; gap:8px; }
.tile .val b{ font-family:var(--ff-mono); font-variant-numeric:tabular-nums; font-size:var(--t-xl); font-weight:600; line-height:1; letter-spacing:-.03em; }
.tile .val span{ font-size:11.5px; font-weight:500; color:var(--ink-faint); }
.tile .sub{ margin-top:8px; font-size:11px; color:var(--ink-muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tile .why{ margin-top:8px; font-size:10.5px; color:var(--ink-faint); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tile .floor{ margin-top:auto; height:34px; position:relative; background:var(--well); box-shadow:var(--well-shadow); }
.tile .floor:empty{ height:6px; }
.tile .floor svg{ position:absolute; inset:0; width:100%; height:100%; }
.tile.na{ opacity:.7; } .tile.na .val b{ color:var(--ink-faint); }
.tile.ok{ --tc:var(--ok); } .tile.warn{ --tc:var(--warn); } .tile.bad{ --tc:var(--bad); } .tile.info{ --tc:var(--accent); } .tile.neutral{ --tc:var(--ink-faint); }
.tile.warn, .tile.bad{ border-color:color-mix(in srgb, var(--tc) 45%, var(--line)); }
.ring{ position:absolute; inset-block-start:12px; inset-inline-end:12px; width:44px; height:44px; }
.tile .ring + .twrap .tl{ padding-inline-end:52px; }
.tile .tvis{ position:absolute; inset-block-start:12px; inset-inline-end:12px; }

/* ====================================================================== executive boards */
/* A measured value sits in a recessed well whose floor is its own trace. */
.board{ position:relative; padding:0; border-radius:var(--r); border:1px solid var(--line); background:var(--panel); box-shadow:var(--panel-shadow);
        overflow:hidden; text-align:start; width:100%; display:flex; flex-direction:column; color:inherit;
        transition:transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease); }
.board .bwrap{ padding:16px 18px 14px; position:relative; z-index:1; }
.board .bk{ font-family:var(--ff-cond); font-size:10px; font-weight:600; letter-spacing:var(--lbl-track); text-transform:uppercase; color:var(--ink-faint); display:flex; align-items:center; gap:8px; }
.board .bk::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--bc,var(--accent)); flex:none; }
.board .bv{ display:flex; align-items:baseline; gap:8px; margin-top:12px; }
.board .bv b{ font-family:var(--ff-mono); font-variant-numeric:tabular-nums; font-size:var(--t-xxl); font-weight:600; line-height:.95; letter-spacing:-.035em; }
.board .bv span{ font-size:12.5px; font-weight:500; color:var(--ink-faint); }
.board .bd{ display:flex; align-items:center; gap:8px; margin-top:12px; font-size:11.5px; min-height:20px; flex-wrap:wrap; }
.board .delta, .dchip{ display:inline-flex; align-items:center; gap:4px; font-family:var(--ff-mono); font-weight:600; font-size:11px; padding:2px 8px; border-radius:5px; }
.board .delta.up, .dchip.bad{ background:var(--bad-soft); color:var(--bad); }
.board .delta.down, .dchip.good{ background:var(--ok-soft); color:var(--ok); }
.board .delta.flat, .dchip.flat{ background:var(--surface-2); color:var(--ink-muted); }
.dchip i{ font-style:normal; font-size:9px; }
.board .bn{ font-size:11px; color:var(--ink-faint); }
.board .floor{ margin-top:auto; height:44px; position:relative; background:var(--well); box-shadow:var(--well-shadow); }
.board .floor:empty{ height:8px; }
.board .floor svg{ position:absolute; inset:0; width:100%; height:100%; }
.board .floor::after{ content:""; position:absolute; inset-inline:0; bottom:0; height:1px; background:var(--bc,var(--accent)); opacity:.35; }
.board.ok{ --bc:var(--ok); } .board.warn{ --bc:var(--warn); } .board.bad{ --bc:var(--bad); } .board.info{ --bc:var(--accent); }
.board.warn, .board.bad{ border-color:color-mix(in srgb, var(--bc) 60%, transparent); }
.board.warn .floor, .board.bad .floor{ background:color-mix(in srgb, var(--bc) 10%, var(--well)); }
.board.hero{ grid-column:span 1; }
.board.hero .bwrap{ padding:20px 24px 18px; display:flex; flex-wrap:wrap; align-items:flex-end; column-gap:24px; row-gap:8px; }
.board.hero .bk{ flex:0 0 100%; }
.board.hero .bv{ margin-top:14px; }
.board.hero .bv b{ font-size:var(--t-hero); }
.board.hero .bv span{ font-size:16px; }
.board.hero .bd{ margin-top:0; margin-inline-start:auto; flex-direction:column; align-items:flex-end; gap:4px; text-align:end; }
.board.hero .floor{ height:70px; }
@media (max-width:1200px){ .board .bv b{ font-size:30px; } .board.hero .bv b{ font-size:44px; } }
/* every card is a button — make that legible without being noisy */
.tile::after, .board::after{
  content:""; position:absolute; inset-block-start:12px; inset-inline-end:12px; width:16px; height:16px; opacity:0; transform:translateX(-4px);
  transition:opacity var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease); background:currentColor; color:var(--ink-faint); z-index:2;
  -webkit-mask:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
  mask:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
}
[dir="rtl"] .tile::after, [dir="rtl"] .board::after{ transform:translateX(4px) scaleX(-1); }
.tile:hover, .board:hover{ transform:translateY(calc(-1 * var(--lift-hover, 3px))); box-shadow:var(--shadow-lg); border-color:var(--line-strong); transition-duration:var(--dur-drawer); }
.tile:hover::after, .board:hover::after{ opacity:.75; transform:none; }
[dir="rtl"] .tile:hover::after, [dir="rtl"] .board:hover::after{ transform:scaleX(-1); }
.tile:active, .board:active, .repcard:active, .vcard.click:active{ transform:scale(.98); transition-duration:var(--dur-press); }

/* allocation bars (executive) */
.alloc{ display:flex; flex-direction:column; gap:12px; }
.alloc .a{ display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:baseline; border-radius:6px; }
.alloc .a[data-act]:hover .nm{ color:var(--accent); }
.alloc .a .nm{ font-size:12.5px; font-weight:600; }
.alloc .a .vl{ font-family:var(--ff-mono); font-size:12.5px; }
.alloc .a .track{ grid-column:1 / -1; height:7px; border-radius:4px; background:var(--track); overflow:hidden; }
.alloc .a .fill{ display:block; height:100%; border-radius:4px; background:var(--accent); transform-origin:var(--lo,left); }
[dir="rtl"] .alloc .a .fill{ --lo:right; }

/* opportunity cards */
.opps{ display:flex; flex-direction:column; gap:10px; padding:4px 16px 16px; }
.opp{ display:flex; flex-direction:column; gap:10px; padding:12px 14px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2);
      transition:border-color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease); }
.opp:hover{ border-color:var(--line-strong); transform:translateY(-1px); }
.opp .oh{ display:flex; align-items:center; gap:12px; }
.opp .rank{ width:26px; height:26px; border-radius:8px; background:var(--ok-soft); color:var(--ok); display:flex; align-items:center; justify-content:center; font-family:var(--ff-mono); font-weight:700; font-size:12px; flex:none; }
.opp .body{ flex:1; min-width:0; }
.opp .body b{ display:block; font-size:13px; }
.opp .body span{ display:block; font-size:11.5px; color:var(--ink-muted); margin-top:2px; }
.opp .amt{ font-family:var(--ff-mono); font-size:17px; font-weight:600; color:var(--ok); white-space:nowrap; }

/* ====================================================================== the 3D twin + mimic (unchanged geometry; software-3D safe) */
.twin{ position:relative; border-radius:var(--r); border:1px solid var(--line); background:var(--panel); box-shadow:var(--panel-shadow); overflow:hidden; min-width:0; }
.twin-hd{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.twin.short .twin-stage{ height:min(46vh,420px); min-height:320px; }
.twin.short .mimic{ min-height:min(46vh,420px); }
.twin-stage{ position:relative; height:min(72vh,720px); min-height:440px;
  background:radial-gradient(120% 90% at 50% 0%, rgba(63,192,232,.07), transparent 62%), linear-gradient(var(--tgrid) 1px, transparent 1px), linear-gradient(90deg, var(--tgrid) 1px, transparent 1px), var(--tbg);
  background-size:auto, 34px 34px, 34px 34px, auto; }
.twin-stage canvas{ position:absolute; inset:0; }
.twin-overlay{ position:absolute; inset:0; pointer-events:none; }
.twin-loading{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--ink-muted); font-size:12.5px; gap:8px; text-align:center; padding:0 32px; line-height:1.6; }
.twin-banner{ position:absolute; inset-inline:12px; top:12px; z-index:4; padding:10px 12px; border-radius:9px; font-size:11.5px; line-height:1.5;
  background:color-mix(in srgb, var(--warn) 16%, rgba(10,17,24,.94)); border:1px solid color-mix(in srgb, var(--warn) 45%, transparent); color:var(--ink); }
.twin-tools{ position:absolute; inset-inline-end:12px; bottom:12px; display:flex; gap:6px; z-index:3; }
.twin-tools .btn{ background:rgba(12,18,25,.88); color:#E8EEF4; border-color:rgba(255,255,255,.16); }
.twin-tools .btn:hover{ background:rgba(20,28,38,.96); border-color:rgba(255,255,255,.3); }
.twin-legend, .mimic-legend{ position:absolute; inset-inline-start:12px; bottom:12px; display:flex; gap:12px; flex-wrap:wrap; font-size:10px; font-weight:600; color:#8d9aa9; z-index:2;
  background:rgba(12,18,25,.82); padding:6px 10px; border-radius:8px; border:1px solid rgba(255,255,255,.06); }
.twin-legend i, .mimic-legend i{ display:inline-block; width:14px; height:3px; border-radius:2px; margin-inline-end:4px; vertical-align:middle; }
.twin-chip{ position:absolute; top:0; left:0; will-change:transform; text-align:start; background:rgba(10,17,24,.94);
  border:1px solid var(--cc,#3fc0e8); border-radius:7px; padding:8px 12px 8px; min-width:132px; cursor:pointer; opacity:0; transition:opacity .18s, box-shadow .18s;
  box-shadow:0 8px 22px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.35); font-family:"IBM Plex Sans",sans-serif; }
.twin-chip:hover{ box-shadow:0 10px 28px rgba(0,0,0,.55), 0 0 0 3px color-mix(in srgb, var(--cc) 22%, transparent); }
.twin-chip[data-state="warn"]{ --cc:#f0b12e; } .twin-chip[data-state="bad"]{ --cc:#ff5c52; }
.twin-chip .tc-t{ display:block; font-family:var(--ff-mono); font-size:9px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#8d9aa9; white-space:nowrap; }
.twin-chip .tc-v{ display:block; font-family:var(--ff-mono); font-size:21px; font-weight:600; color:#eef4fa; line-height:1.15; margin-top:4px; letter-spacing:-.02em; }
.twin-chip .tc-v i{ font-style:normal; font-size:10px; font-weight:600; color:var(--cc); margin-inline-start:4px; }
.twin-chip .tc-f{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.twin-chip .tc-f b{ font-family:var(--ff-mono); font-size:8px; font-weight:700; letter-spacing:.09em; padding:2px 4px; border-radius:3px; background:var(--cc); color:#07121a; }
.twin-chip .tc-f em{ font-style:normal; font-family:var(--ff-mono); font-size:8px; letter-spacing:.08em; color:#66727f; }
[dir="rtl"] .twin-chip{ direction:ltr; }
.mimic{ position:relative; border-radius:0 0 var(--r) var(--r); overflow:hidden; min-height:min(72vh,720px); display:flex; align-items:center; justify-content:center; padding:8px 10px;
  background:radial-gradient(120% 90% at 50% 0%, rgba(63,192,232,.06), transparent 62%), linear-gradient(var(--tgrid) 1px, transparent 1px), linear-gradient(90deg, var(--tgrid) 1px, transparent 1px), var(--tbg);
  background-size:auto, 34px 34px, 34px 34px, auto; }
.mimic svg{ width:100%; height:auto; max-height:100%; display:block; }
.mimic .bus{ stroke-linecap:round; }
.mimic .flow{ stroke-dasharray:4 10; animation:flow 1.5s linear infinite; }
.mimic .flow.rev{ animation-direction:reverse; }
@keyframes flow{ to{ stroke-dashoffset:-14; } }
.mimic .node{ cursor:pointer; }
.mimic .node .hit{ transition:opacity .15s; }
.mimic .node:hover .hit{ opacity:.09; }
.mimic .node:hover .bayplate{ opacity:1; }
.mimic .bayplate{ opacity:0; transition:opacity .15s; }
.mimic text{ font-family:"IBM Plex Sans",sans-serif; }
.mimic .lbl{ font-size:9.5px; font-weight:600; letter-spacing:.02em; }
.mimic .rdg{ font-family:var(--ff-mono); font-size:10.5px; font-weight:600; }
.mimic .busname{ font-family:var(--ff-cond); font-size:11px; font-weight:700; letter-spacing:.02em; }
.mimic .node[data-state="trip"] .brk{ animation:trip var(--dur-pulse, 1s) ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes trip{ 50%{ opacity:.35; } }

/* ====================================================================== telemetry column */
.split{ display:grid; grid-template-columns:360px minmax(0,1fr); gap:16px; align-items:start; }
@media (max-width:1180px){ .split{ grid-template-columns:1fr; } }
.tele{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--panel-shadow); margin-bottom:12px; overflow:hidden; }
.tele h4{ font-family:var(--ff-sans); font-size:13px; font-weight:600; color:var(--ink); margin:0; padding:12px 14px 8px; display:flex; align-items:center; gap:8px; }
.tele h4::before{ content:""; width:3px; height:13px; border-radius:2px; background:var(--pc,var(--accent)); flex:none; }
.tele ul{ list-style:none; margin:0; padding:0 14px 10px; }
.tele li{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:12px; row-gap:6px; padding:8px 0 8px 12px; border-top:1px solid var(--line); }
[dir="rtl"] .tele li{ padding:8px 12px 8px 0; }
.tele li:first-child{ border-top:none; }
.tele li[style*="--vc"]::before{ content:""; position:absolute; inset-inline-start:0; top:10px; bottom:10px; width:2px; border-radius:2px; background:var(--vc); opacity:.85; }
.tele .lhs{ min-width:0; }
.tele .tagno{ display:block; font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.05em; color:var(--ink-faint); }
.tele .desc{ display:block; font-size:12px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tele .rv{ font-family:var(--ff-mono); font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; }
.tele .lv{ grid-column:1/-1; height:4px; border-radius:2px; background:var(--track); overflow:hidden; }
.tele .lv i{ display:block; height:100%; border-radius:2px; background:var(--lc, var(--accent)); transform-origin:var(--lo,left); }
[dir="rtl"] .tele .lv i{ --lo:right; }
.tele li[data-s="warn"] .rv{ color:var(--warn); } .tele li[data-s="bad"] .rv{ color:var(--bad); }
.tele li[data-s="warn"] .tagno, .tele li[data-s="bad"] .tagno{ color:var(--warn); }
.tele li[data-s="warn"] .lv i{ --lc:var(--warn); } .tele li[data-s="bad"] .lv i{ --lc:var(--bad); }
.tele li.click{ cursor:pointer; }
.tele li.click:hover .desc{ color:var(--accent); }
.compliant{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--r); border:1px solid color-mix(in srgb,var(--ok) 40%, transparent); background:var(--ok-soft); }
.compliant.bad{ border-color:color-mix(in srgb,var(--bad) 45%,transparent); background:var(--bad-soft); }
.compliant b{ display:block; font-size:13px; font-weight:600; }
.compliant span{ display:block; font-size:11.5px; color:var(--ink-muted); margin-top:2px; }

/* ====================================================================== tables */
table{ width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px; }
thead th{ position:sticky; top:0; z-index:1; text-align:start; font-family:var(--ff-cond); font-size:9.5px; font-weight:600; letter-spacing:var(--lbl-track);
          text-transform:uppercase; color:var(--ink-faint); padding:8px 12px; background:var(--surface-2); border-bottom:1px solid var(--line); border-top:1px solid var(--line); white-space:nowrap; }
td{ padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr{ transition:background var(--dur-hover) var(--ease); }
tbody tr.click{ cursor:pointer; }
tbody tr.click:hover td{ background:var(--surface-2); }
tbody tr.click td:first-child{ position:relative; }
tbody tr.click:hover td:first-child::before{ content:""; position:absolute; inset-inline-start:0; inset-block:0; width:2px; background:var(--accent); }
/* status edge on a row (KPI Cockpit Table/Row): the first cell carries it */
tr[data-tone] td:first-child{ box-shadow:inset 3px 0 0 var(--rt); }
[dir="rtl"] tr[data-tone] td:first-child{ box-shadow:inset -3px 0 0 var(--rt); }
tr[data-tone="bad"]{ --rt:var(--bad); } tr[data-tone="warn"]{ --rt:var(--warn); } tr[data-tone="ok"]{ --rt:var(--ok); } tr[data-tone="info"]{ --rt:var(--accent); }
.num{ text-align:end; font-family:var(--ff-mono); font-variant-numeric:tabular-nums; letter-spacing:0; }
.tbl-wrap{ overflow-x:auto; overflow-y:visible; }
.cellbar{ display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.cellbar .cb{ width:90px; height:5px; border-radius:3px; background:var(--track); overflow:hidden; flex:none; }
.cellbar .cb i{ display:block; height:100%; background:var(--cbc, var(--accent)); border-radius:3px; transform-origin:var(--lo,left); }
[dir="rtl"] .cellbar .cb i{ --lo:right; }

.pill{ display:inline-flex; align-items:center; gap:4px; font-family:var(--ff-cond); font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:2px 8px; border-radius:5px; white-space:nowrap; }
.pill.ok{ background:var(--ok-soft); color:var(--ok); } .pill.warn{ background:var(--warn-soft); color:var(--warn); } .pill.bad{ background:var(--bad-soft); color:var(--bad); }
.pill.info{ background:var(--info-soft); color:var(--info); } .pill.mute{ background:var(--surface-2); color:var(--ink-muted); }
.pill.dot::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ====================================================================== states */
.empty{ padding:36px 24px; text-align:center; color:var(--ink-muted); font-size:12.5px; line-height:1.6; }
.empty.compact{ padding:18px; }
.empty b{ display:block; font-family:var(--ff-cond); font-size:15px; font-weight:600; color:var(--ink); margin-bottom:8px; }
.empty .btn{ margin-top:14px; }
.state{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:36px 24px; color:var(--ink-muted); }
.state.compact{ padding:20px 16px; }
.state b{ font-family:var(--ff-cond); font-size:16px; font-weight:600; color:var(--ink); }
.state p{ margin:0; font-size:12.5px; line-height:1.6; max-width:52ch; }
.state .btn{ margin-top:8px; }
.st-ic{ display:grid; place-items:center; width:52px; height:52px; border-radius:14px; margin-bottom:4px; }
.st-ic.ok{ background:var(--ok-soft); color:var(--ok); } .st-ic.warn{ background:var(--warn-soft); color:var(--warn); } .st-ic.bad{ background:var(--bad-soft); color:var(--bad); }
.st-ic.info{ background:var(--info-soft); color:var(--info); } .st-ic.mute{ background:var(--surface-2); color:var(--ink-faint); }
/* Skeletons pulse opacity (no background-position shimmer: cheaper on a GPU-less VM). */
.sk{ background:var(--track); border-radius:var(--r); animation:skp 1.2s ease-in-out infinite alternate; }
.skel{ background:var(--track); border-radius:var(--r-sm); animation:skp 1.2s ease-in-out infinite alternate; }
@keyframes skp{ from{ opacity:1; } to{ opacity:.45; } }
.skel-wrap{ display:flex; flex-direction:column; gap:16px; }
.sk-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px; display:flex; flex-direction:column; gap:12px; }
.sk-card .sk{ border-radius:5px; }
.sk-l{ height:9px; } .sk-n{ height:28px; width:55%; } .sk-row{ height:14px; }
.paused .sk, .paused .skel{ animation-play-state:paused; }

/* ====================================================================== forms */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label{ font-family:var(--ff-cond); font-size:10px; font-weight:600; letter-spacing:var(--lbl-track); text-transform:uppercase; color:var(--ink-faint); }
.field .help{ font-size:10.5px; color:var(--ink-faint); line-height:1.5; }
input,select,textarea{ padding:8px 12px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--well); box-shadow:var(--well-shadow);
                       transition:border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease); }
input:hover,select:hover,textarea:hover{ border-color:var(--line-strong); }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--focus); box-shadow:var(--well-shadow), 0 0 0 3px color-mix(in srgb,var(--focus) 22%, transparent); }
.field.has-error input{ border-color:var(--bad); }
.field.has-error label{ color:var(--bad); }
.row{ display:flex; gap:12px; flex-wrap:wrap; align-items:end; }
.row>*{ flex:1 1 160px; }
.chk{ display:flex; align-items:center; gap:8px; font-size:12.5px; }
.chk input{ width:auto; box-shadow:none; }
.err{ color:var(--bad); font-size:12px; margin-top:10px; }
.err:empty{ display:none; }

/* ====================================================================== modal, drawer */
.backdrop{ position:fixed; inset:0; background:rgba(6,9,13,.62); display:none; align-items:center; justify-content:center; z-index:60; padding:20px; }
#modalBd{ z-index:70; }
.backdrop.on{ display:flex; animation:fade var(--dur-drawer) var(--ease); }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes rise{ from{ opacity:0; transform:translateY(12px) scale(.985); } to{ opacity:1; transform:none; } }
.modal{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-lg); width:100%; max-width:640px; max-height:88vh;
        display:flex; flex-direction:column; animation:rise var(--dur-drawer) var(--ease-out); }
.modal.wide{ max-width:980px; }
.modal-hd{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 20px 14px; border-bottom:1px solid var(--line); }
.modal-hd h3{ font-family:var(--ff-cond); font-size:17px; font-weight:600; margin:0; letter-spacing:-.005em; }
.modal-hd p{ margin:4px 0 0; font-size:11.5px; color:var(--ink-muted); line-height:1.5; max-width:62ch; }
.modal-bd{ padding:20px; overflow-y:auto; --cover:var(--surface); }
.modal-ft{ display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid var(--line); background:var(--surface-2); border-end-start-radius:var(--r); border-end-end-radius:var(--r); }
/* The drill-down is a drawer from the inline-end edge (Figma: Drawer). */
#sheetBd{ justify-content:flex-end; align-items:stretch; padding:0; }
#sheetBd .drawer{ height:100vh; max-height:100vh; border-radius:0; border-block:0; border-inline-end:0; max-width:620px; width:min(620px, 100vw);
                  animation:drawer-in var(--dur-drawer) var(--ease-out); box-shadow:var(--shadow-lg); }
#sheetBd .modal.wide.drawer{ max-width:820px; width:min(820px, 100vw); }
@keyframes drawer-in{ from{ transform:translateX(40px); opacity:0; } to{ transform:none; opacity:1; } }
[dir="rtl"] #sheetBd .drawer{ animation-name:drawer-in-rtl; }
@keyframes drawer-in-rtl{ from{ transform:translateX(-40px); opacity:0; } to{ transform:none; opacity:1; } }
.sheet-hero{ display:flex; align-items:center; gap:18px; padding:20px; border-radius:var(--r); background:var(--well); box-shadow:var(--well-shadow); margin-bottom:18px; }
.sheet-hero .big{ font-family:var(--ff-mono); font-size:var(--t-xxl); font-weight:600; line-height:1; letter-spacing:-.03em; }
.sheet-hero .cap{ font-family:var(--ff-cond); font-size:10px; font-weight:600; letter-spacing:var(--lbl-track); text-transform:uppercase; color:var(--ink-faint); margin-top:8px; }
.kv{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.kv .c{ padding:12px 12px; border-radius:var(--r-sm); background:var(--well); box-shadow:var(--well-shadow); }
.kv .c .k{ font-family:var(--ff-cond); font-size:9.5px; font-weight:600; letter-spacing:var(--lbl-track); text-transform:uppercase; color:var(--ink-faint); }
.kv .c .v{ font-family:var(--ff-mono); font-size:15px; font-weight:600; margin-top:4px; letter-spacing:0; }
.note{ display:block; padding:12px 14px; border-radius:var(--r-sm); background:var(--info-soft); border-inline-start:3px solid var(--info); font-size:12px; line-height:1.6; color:var(--ink); }
.note.warn{ background:var(--warn-soft); border-color:var(--warn); }
.note.bad{ background:var(--bad-soft); border-color:var(--bad); }
.note.ok{ background:var(--ok-soft); border-color:var(--ok); }
.note b{ font-weight:600; }

/* detail drawer contents */
.dsheet{ background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-lg); width:100%; display:flex; flex-direction:column; overflow:hidden; --cover:var(--surface); }
.ds-hero{ position:relative; padding:24px 26px 20px; overflow:hidden; }
.ds-hero::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 140% at 8% 0%, color-mix(in srgb, var(--dc,var(--accent)) 18%, transparent), transparent 62%); }
.ds-hero::after{ content:""; position:absolute; inset-inline:0; top:0; height:3px; background:var(--dc,var(--accent)); }
.ds-hero>*{ position:relative; }
.ds-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-inline-end:36px; }
.ds-eyebrow{ font-family:var(--ff-mono); font-size:9.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--dc,var(--accent)); }
.ds-title{ font-family:var(--ff-cond); font-size:20px; font-weight:700; margin:4px 0 0; letter-spacing:-.01em; }
.ds-sub{ font-size:12px; color:var(--ink-muted); margin-top:4px; line-height:1.55; max-width:62ch; }
.ds-figs{ display:flex; align-items:flex-end; gap:28px; margin-top:18px; flex-wrap:wrap; }
.ds-fig .n1{ font-family:var(--ff-mono); font-variant-numeric:tabular-nums; font-size:44px; font-weight:600; line-height:1; letter-spacing:-.03em; }
.ds-fig .n1 i{ font-style:normal; font-size:15px; font-weight:600; color:var(--ink-muted); margin-inline-start:8px; }
.ds-fig .n2{ font-family:var(--ff-mono); font-size:24px; font-weight:600; line-height:1; }
.ds-fig .cap{ font-size:11px; color:var(--ink-muted); margin-top:8px; }
.ds-spark{ flex:1; min-width:160px; height:54px; position:relative; border-radius:8px; overflow:hidden; background:var(--well); box-shadow:var(--well-shadow); }
.ds-spark svg{ position:absolute; inset:0; width:100%; height:100%; }
.ds-close{ position:absolute; top:16px; inset-inline-end:16px; z-index:2; }
.ds-tabs{ position:sticky; top:-20px; z-index:2; display:flex; gap:4px; padding:0 20px; background:var(--surface); border-bottom:1px solid var(--line); margin:-20px -26px 22px; }
.ds-tabs button{ position:relative; padding:12px 10px 12px; border:0; background:transparent; font-size:13px; font-weight:600; color:var(--ink-muted); }
.ds-tabs button:hover{ color:var(--ink); }
.ds-tabs button.on{ color:var(--ink); }
.ds-tabs button.on::after{ content:""; position:absolute; inset-inline:8px; bottom:-1px; height:2px; border-radius:2px; background:var(--accent); animation:inkin var(--dur-hover) var(--ease); }
@keyframes inkin{ from{ transform:scaleX(.3); opacity:0; } }
.ds-body{ padding:20px 26px 26px; overflow-y:auto; flex:1; border-top:1px solid var(--line); }
.ds-sec{ margin-top:22px; }
.ds-sec:first-child, .ds-pane > .ds-sec:first-child{ margin-top:0; }
.ds-sec h4{ font-family:var(--ff-cond); font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 12px; display:flex; align-items:center; gap:8px; }
.ds-sec h4::after{ content:""; flex:1; height:1px; background:var(--line); }
.ds-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
.ds-stat{ padding:12px 14px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); }
.ds-stat .k{ font-family:var(--ff-cond); font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); }
.ds-stat .v{ font-family:var(--ff-mono); font-size:17px; font-weight:600; margin-top:4px; }
.ds-stat .v i{ font-style:normal; font-size:10.5px; color:var(--ink-muted); margin-inline-start:4px; }
.ds-stat.ok .v{ color:var(--ok); } .ds-stat.warn .v{ color:var(--warn); } .ds-stat.bad .v{ color:var(--bad); }
.ds-stat .sub{ font-size:10px; color:var(--ink-faint); margin-top:4px; line-height:1.4; }
.ds-why{ padding:14px 16px; border-radius:10px; background:color-mix(in srgb, var(--accent) 8%, var(--surface-2)); border:1px solid color-mix(in srgb, var(--accent) 24%, transparent); font-size:12.5px; line-height:1.65; }
.ds-why b{ display:block; margin-bottom:4px; font-family:var(--ff-cond); font-size:12.5px; letter-spacing:.02em; }
.ds-why.warn{ background:color-mix(in srgb, var(--warn) 9%, var(--surface-2)); border-color:color-mix(in srgb, var(--warn) 32%, transparent); }
.ds-why.bad{ background:color-mix(in srgb, var(--bad) 9%, var(--surface-2)); border-color:color-mix(in srgb, var(--bad) 32%, transparent); }
.ds-ft{ display:flex; gap:8px; flex-wrap:wrap; padding:14px 26px; border-top:1px solid var(--line); background:var(--surface-2); }
.ds-bar{ display:flex; flex-direction:column; gap:8px; }
.ds-bar .r{ display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:baseline; cursor:pointer; }
.ds-bar .r:hover .nm{ color:var(--accent); }
.ds-bar .nm{ font-size:12.5px; }
.ds-bar .vl{ font-family:var(--ff-mono); font-size:12.5px; }
.ds-bar .tr{ grid-column:1/-1; height:7px; border-radius:4px; background:var(--track); overflow:hidden; }
.ds-bar .fl{ display:block; height:100%; border-radius:4px; background:var(--dc,var(--accent)); }
.ds-hero.ok{ --dc:var(--ok); } .ds-hero.warn{ --dc:var(--warn); } .ds-hero.bad{ --dc:var(--bad); } .ds-hero.info{ --dc:var(--accent); }
.ds-bar.ok{ --dc:var(--ok); } .ds-bar.warn{ --dc:var(--warn); } .ds-bar.bad{ --dc:var(--bad); }
@media (max-width:700px){ .ds-fig .n1{ font-size:32px; } .ds-hero,.ds-body,.ds-ft{ padding-inline:16px; } }
/* notifications list */
.notif{ list-style:none; margin:-8px -20px; padding:0; }
.notif li{ display:grid; grid-template-columns:10px 44px minmax(0,1fr); gap:10px; align-items:center; padding:10px 20px; border-bottom:1px solid var(--line); font-size:12.5px; }
.notif li:last-child{ border-bottom:0; }
.notif .nd{ width:7px; height:7px; border-radius:50%; background:var(--track); }
.notif li.unread .nd{ background:var(--accent); }
.notif li.unread .nm{ font-weight:600; }
.notif .na{ color:var(--ink-faint); font-size:11px; }

/* ====================================================================== settings */
.setwrap{ display:grid; grid-template-columns:248px minmax(0,1fr); gap:16px; align-items:start; }
@media (max-width:900px){ .setwrap{ grid-template-columns:1fr; } }
.setnav{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--panel-shadow); padding:8px; position:sticky; top:calc(var(--top-h) + 16px); }
@media (max-width:900px){ .setnav{ position:static; display:flex; flex-wrap:wrap; gap:4px; } }
.setnav .grp{ font-family:var(--ff-cond); font-size:9.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); padding:14px 12px 6px; }
.setnav .grp:first-child{ padding-top:6px; }
@media (max-width:900px){ .setnav .grp{ display:none; } }
.setnav button{ position:relative; display:flex; align-items:center; gap:12px; width:100%; text-align:start; padding:8px 12px; border-radius:var(--r-sm); border:1px solid transparent; background:transparent;
                font-size:13px; font-weight:500; color:var(--ink-muted); transition:background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease); }
.setnav button svg{ width:16px; height:16px; flex:none; color:var(--ink-faint); transition:color var(--dur-hover) var(--ease); }
.setnav button:hover{ background:var(--surface-2); color:var(--ink); }
.setnav button.on{ background:var(--surface-2); color:var(--ink); font-weight:600; border-color:var(--line); }
.setnav button.on::before{ content:""; position:absolute; inset-inline-start:-9px; top:8px; bottom:8px; width:3px; border-radius:2px; background:var(--brand); }
.setnav button.on svg{ color:var(--brand); }
.setnav button .cnt{ margin-inline-start:auto; font-family:var(--ff-mono); font-size:10px; font-weight:600; color:var(--ink-faint); }
@media (max-width:900px){ .setnav button{ width:auto; font-size:12px; padding:8px 10px; } .setnav button .cnt{ display:none; } }
.sethd{ display:flex; align-items:flex-start; gap:14px; padding:18px 18px 14px; border-bottom:1px solid var(--line); }
.sethd .sh-ic{ display:grid; place-items:center; width:40px; height:40px; border-radius:11px; background:var(--accent-soft); color:var(--accent); flex:none; }
.sethd .sh-tx{ flex:1; min-width:0; }
.sethd h3{ font-family:var(--ff-cond); font-size:16px; font-weight:700; margin:0; }
.sethd p{ margin:4px 0 0; font-size:12px; color:var(--ink-muted); line-height:1.55; max-width:72ch; }
.setsec{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--panel-shadow); overflow:hidden; }
.setrow{ display:flex; align-items:center; gap:14px; padding:12px 18px; border-top:1px solid var(--line); transition:background var(--dur-hover) var(--ease); }
.setrow:hover{ background:color-mix(in srgb, var(--surface-2) 60%, transparent); }
.setrow .meta{ flex:1; min-width:0; }
.setrow .meta b{ display:block; font-size:13px; }
.setrow .meta span{ display:block; font-size:11px; color:var(--ink-muted); margin-top:4px; }
.setrow .acts{ display:flex; gap:8px; flex:none; }
.setsec td.acts{ white-space:nowrap; text-align:end; }
.setsec td.acts .btn{ margin-inline-start:6px; }

/* ====================================================================== drawings */
.dwgwrap{ display:grid; grid-template-columns:320px minmax(0,1fr); gap:16px; align-items:start; }
@media (max-width:1000px){ .dwgwrap{ grid-template-columns:1fr; } }
.dwglist{ display:flex; flex-direction:column; gap:10px; }
.dwgcard{ text-align:start; width:100%; padding:12px 16px; border-radius:var(--r); border:1px solid var(--line); background:var(--panel); box-shadow:var(--panel-shadow); position:relative; overflow:hidden; color:inherit;
          transition:transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease); }
.dwgcard::after{ content:""; position:absolute; inset-inline-start:0; inset-block:0; width:3px; background:var(--tc,var(--accent)); }
.dwgcard:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--line-strong); }
.dwgcard.on{ border-color:var(--brand); } .dwgcard.on::after{ background:var(--brand); }
.dwgcard .dk{ display:flex; align-items:center; gap:8px; font-family:var(--ff-cond); font-size:9.5px; font-weight:600; letter-spacing:var(--lbl-track); text-transform:uppercase; color:var(--ink-faint); }
.dwgcard .dt{ font-size:13px; font-weight:600; margin-top:6px; line-height:1.35; }
.dwgcard .dm{ margin-top:8px; font-size:10.5px; color:var(--ink-muted); display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.dwgempty{ border:1.5px dashed var(--line-strong); border-radius:var(--r); padding:16px; text-align:center; color:var(--ink-faint); font-size:11.5px;
           display:flex; flex-direction:column; align-items:center; gap:6px; transition:border-color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease); }
.dwgempty:hover{ border-color:var(--accent); background:var(--accent-soft); }
.dwgempty .dk{ font-family:var(--ff-cond); font-size:9.5px; font-weight:600; letter-spacing:var(--lbl-track); text-transform:uppercase; }
.dwgstage{ position:relative; border-radius:var(--r); border:1px solid var(--line); background:var(--well); box-shadow:var(--well-shadow); overflow:hidden; min-height:440px; display:grid; place-items:center; }
.dwgstage.marking{ cursor:crosshair; }
.dwgstage img, .dwgstage iframe{ display:block; width:100%; height:auto; max-height:76vh; border:0; background:#fff; }
.dwgstage iframe{ height:76vh; }
.dwgpins{ position:absolute; inset:0; pointer-events:none; }
.pin{ position:absolute; transform:translate(-50%,-50%); pointer-events:auto; }
.pin .dot{ width:15px; height:15px; border-radius:50%; background:var(--brand); border:2px solid #fff; box-shadow:0 2px 7px rgba(0,0,0,.45); cursor:pointer; }
.pin .tag{ position:absolute; inset-inline-start:20px; top:50%; transform:translateY(-50%); white-space:nowrap; background:var(--ink); color:var(--panel);
           font-family:var(--ff-mono); font-size:10.5px; font-weight:600; padding:4px 8px; border-radius:5px; box-shadow:var(--shadow-md); }
.pin.live .dot{ background:var(--ok); }
.dwgbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }

/* ====================================================================== monthly statement */
.msbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.mspick{ display:flex; align-items:center; gap:2px; background:var(--panel); border:1px solid var(--line); border-radius:11px; box-shadow:var(--panel-shadow); padding:4px; }
.mspick button{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:var(--ink-muted); border:0; background:transparent; }
.mspick button:hover:not(:disabled){ background:var(--surface-2); color:var(--ink); }
.mspick button:disabled{ opacity:.3; cursor:default; }
.mspick .lbl{ font-family:var(--ff-cond); font-weight:700; font-size:13.5px; padding:0 12px; min-width:132px; text-align:center; }
.msform{ font-family:var(--ff-mono); font-size:10.5px; color:var(--ink-faint); letter-spacing:.04em; }
.mscov{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-muted); }
.pwrbars{ display:flex; flex-direction:column; gap:12px; }
.pwrrow{ display:grid; grid-template-columns:132px minmax(0,1fr) 96px; align-items:center; gap:12px; }
.pwrrow .pl{ font-size:12px; color:var(--ink-muted); }
.pwrrow .pt{ position:relative; height:16px; border-radius:8px; background:var(--track); overflow:visible; }
.pwrrow .pf2{ position:absolute; inset-block:0; inset-inline-start:0; border-radius:8px; background:var(--bc,var(--accent)); }
.pwrrow .pv{ font-family:var(--ff-mono); font-variant-numeric:tabular-nums; font-size:13px; font-weight:600; text-align:end; }
.pwrref{ position:absolute; top:-5px; bottom:-5px; width:2px; background:var(--warn); }
.pwrref::after{ content:attr(data-l); position:absolute; top:-15px; inset-inline-start:-2px; font-size:9px; font-weight:700; color:var(--warn); white-space:nowrap; letter-spacing:.04em; }
.pfband{ position:relative; height:44px; display:flex; margin:26px 0 8px; }
.pfband .z{ display:grid; place-items:center; font-size:10.5px; font-weight:700; color:#fff; letter-spacing:.03em; }
.pfband .z:first-child{ border-start-start-radius:10px; border-end-start-radius:10px; }
.pfband .z:last-child{ border-start-end-radius:10px; border-end-end-radius:10px; }
.pfscale{ position:relative; height:14px; font-family:var(--ff-mono); font-size:10px; color:var(--ink-faint); }
.pfscale span{ position:absolute; transform:translateX(-50%); }
html[dir="rtl"] .pfscale span{ transform:translateX(50%); }
.pfmark{ position:absolute; top:-9px; bottom:-9px; width:3px; background:var(--ink); border-radius:2px; z-index:2; }
.pfmark::after{ content:attr(data-l); position:absolute; top:-19px; inset-inline-start:50%; transform:translateX(-50%); font-family:var(--ff-mono); font-size:11px; font-weight:700;
                background:var(--ink); color:var(--panel); padding:2px 8px; border-radius:5px; white-space:nowrap; }
html[dir="rtl"] .pfmark::after{ transform:translateX(50%); }
.ratios{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.ratio{ border:1px solid var(--line); border-radius:12px; padding:16px 16px; background:var(--surface-2); }
.ratio .rk{ font-size:11px; color:var(--ink-muted); margin-bottom:8px; }
.ratio .rv{ font-family:var(--ff-mono); font-size:26px; font-weight:600; line-height:1; }
.ratio .rt{ position:relative; height:8px; border-radius:5px; background:var(--track); margin:12px 0 8px; overflow:visible; }
.ratio .rf{ position:absolute; inset-block:0; inset-inline-start:0; border-radius:5px; background:var(--accent); }
.ratio .rl{ position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--warn); }
.ratio .rn{ font-size:11px; color:var(--ink-faint); }
.ratio.unset{ border-style:dashed; }
.ratio.over .rf{ background:var(--bad); }
.fall{ display:flex; align-items:flex-end; gap:10px; height:200px; padding-top:22px; }
.fall .step{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; position:relative; min-width:0; }
.fall .bar{ width:100%; max-width:96px; border-radius:7px 7px 0 0; background:var(--bc,var(--accent)); position:relative; transform-origin:bottom; }
.fall .amt{ position:absolute; top:-19px; inset-inline:0; text-align:center; font-family:var(--ff-mono); font-size:11.5px; font-weight:700; white-space:nowrap; }
.fall .cap{ margin-top:8px; font-size:10.5px; color:var(--ink-muted); text-align:center; line-height:1.35; }
.fall .step.net .bar{ background:var(--ink); }
.fall .step.net .cap{ color:var(--ink); font-weight:700; }
.plantrow{ display:grid; grid-template-columns:minmax(120px,1.4fr) minmax(0,3fr) 118px; align-items:center; gap:12px; padding:8px 8px; }
.plantrow + .plantrow{ border-top:1px solid var(--line); }
.plantrow.click{ cursor:pointer; border-radius:var(--r-sm); transition:background var(--dur-hover) var(--ease); }
.plantrow.click:hover{ background:var(--surface-2); }
.ratio.click{ cursor:pointer; transition:border-color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease); }
.ratio.click:hover{ border-color:var(--line-strong); transform:translateY(-1px); }
.plantrow .pn{ font-size:12.5px; font-weight:600; }
.plantrow .pb{ position:relative; height:14px; border-radius:7px; background:var(--track); overflow:hidden; }
.plantrow .pb i{ position:absolute; inset-block:0; inset-inline-start:0; background:var(--accent); }
.plantrow .pb u{ position:absolute; inset-block:0; background:var(--warn); opacity:.55; }
.plantrow .pc{ text-align:end; font-family:var(--ff-mono); font-variant-numeric:tabular-nums; font-size:12.5px; }
.diffcell{ font-family:var(--ff-mono); font-variant-numeric:tabular-nums; }
.diffcell.up{ color:var(--bad); } .diffcell.down{ color:var(--ok); }
.lgnd{ display:flex; gap:16px; font-size:10.5px; color:var(--ink-muted); margin-top:12px; flex-wrap:wrap; }
.lgnd i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-inline-end:4px; vertical-align:-1px; }

/* ====================================================================== reports */
.rep{ display:flex; align-items:center; gap:14px; padding:12px 18px; border-top:1px solid var(--line); transition:background var(--dur-hover) var(--ease); }
.rep:hover{ background:color-mix(in srgb, var(--surface-2) 60%, transparent); }
.rep:first-child{ border-top:none; }
.rep .ficon{ width:38px; height:46px; border-radius:6px; position:relative; flex:none; display:flex; align-items:flex-end; justify-content:center; padding-bottom:6px; background:var(--surface-2); border:1px solid var(--line); }
.rep .ficon::before{ content:""; position:absolute; top:-1px; inset-inline-end:-1px; border-width:0 11px 11px 0; border-style:solid; border-color:var(--panel) transparent; }
.rep .ficon b{ font-family:var(--ff-mono); font-size:8px; font-weight:700; letter-spacing:.06em; }
.rep .ficon.pdf{ border-color:color-mix(in srgb,var(--brand) 40%,transparent); background:var(--brand-soft); } .rep .ficon.pdf b{ color:var(--brand); }
.rep .ficon.xlsx{ border-color:color-mix(in srgb,var(--ok) 40%,transparent); background:var(--ok-soft); } .rep .ficon.xlsx b{ color:var(--ok); }
.rep .meta, .tmpl .meta{ flex:1; min-width:0; }
.rep .meta b, .tmpl .meta b{ display:block; font-size:13px; }
.rep .meta span, .tmpl .meta span{ display:block; font-size:11px; color:var(--ink-muted); margin-top:4px; }
.rep .acts, .tmpl .acts{ display:flex; gap:8px; flex:none; }
.tmpl{ display:flex; align-items:center; gap:14px; padding:12px 18px; border-top:1px solid var(--line); }
.tmpl:first-child{ border-top:none; }
.tmpl .tdot{ width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); flex:none; }
.tmpl.paused .tdot{ background:var(--ink-faint); box-shadow:0 0 0 3px var(--surface-2); }
.repgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; }
.repcard{ display:flex; flex-direction:column; gap:10px; text-align:start; padding:16px; border-radius:12px; border:1px solid var(--line); background:var(--surface-2); color:inherit; position:relative; overflow:hidden;
          transition:transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease); }
.repcard:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--line-strong); }
.repcard .rc-h{ display:flex; align-items:center; gap:10px; }
.repcard .rc-ic{ display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--brand-soft); color:var(--brand); flex:none; }
.repcard .rc-f{ margin-inline-start:auto; font-family:var(--ff-mono); font-size:10px; padding:2px 6px; border:1px solid var(--line); border-radius:4px; color:var(--ink-muted); }
.repcard b{ display:block; font-family:var(--ff-sans); font-size:13.5px; font-weight:600; }
.repcard > span{ display:block; font-size:11.5px; color:var(--ink-muted); line-height:1.5; }
.repcard .rc-go{ margin-top:auto; display:flex; gap:8px; align-items:center; font-size:11.5px; font-weight:600; color:var(--brand); }
.repcard .rc-go em{ font-style:normal; font-family:var(--ff-mono); color:var(--ink-faint); font-weight:500; }
.prodstrip{ display:grid; grid-template-columns:repeat(14,minmax(0,1fr)); gap:4px; align-items:end; height:46px; padding:0 18px; }
.prodstrip i{ display:block; border-radius:3px 3px 1px 1px; background:var(--accent); min-height:3px; transform-origin:bottom; }
.prodstrip i.z{ background:var(--track); }
.prodstrip-x{ display:flex; justify-content:space-between; padding:4px 18px 12px; font-size:10px; color:var(--ink-faint); }

/* ====================================================================== charts */
.chart{ position:relative; }
.chart .plot{ position:relative; }
.chart svg{ width:100%; height:auto; overflow:visible; }
.chart .axes{ position:absolute; inset:0; pointer-events:none; }
.chart .axes span{ position:absolute; font-size:10px; color:var(--ink-faint); white-space:nowrap; line-height:1; }
.chart .axes .ay{ transform:translate(-100%,-50%); }
.chart .axes .ax-x{ transform:translate(-50%,-100%); }
.chart .axes .ax-x.first{ transform:translate(0,-100%); }
.chart .axes .ax-x.last{ transform:translate(-100%,-100%); }
.chart .axes .aref{ transform:translate(-100%,-130%); font-family:var(--ff-sans); font-weight:600; font-size:10.5px; }
.chart .c-cover{ position:absolute; top:0; bottom:0; background:var(--cover); transform-origin:right; opacity:0; pointer-events:none; }
.chart.bars rect[data-draw]{ transform-box:fill-box; transform-origin:bottom; }
.chart .cx{ stroke:var(--ink-faint); stroke-width:1; stroke-dasharray:3 3; opacity:0; }
.tip{ position:absolute; pointer-events:none; background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:8px 10px; font-size:11px; box-shadow:var(--shadow-md); opacity:0; transition:opacity .12s; z-index:5; white-space:nowrap; }
.legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:11px; color:var(--ink-muted); margin-top:10px; }
.legend i{ display:inline-block; width:11px; height:3px; border-radius:2px; margin-inline-end:4px; vertical-align:middle; }
.chart .xh{ position:absolute; top:0; bottom:0; width:1px; background:var(--ink-faint); opacity:.7; pointer-events:none; }
.chart .xtip{ position:absolute; top:6px; padding:6px 8px; border-radius:8px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-md);
  font:600 11px/1.45 var(--ff-mono); color:var(--ink); pointer-events:none; white-space:nowrap; z-index:2; }
.chart .xtip i{ display:inline-block; width:8px; height:3px; border-radius:2px; margin-inline-end:6px; vertical-align:middle; }
[dir="rtl"] .chart svg text, [dir="rtl"] svg.chart text{ direction:ltr; }

/* ====================================================================== v2 visuals (components/viz.js) */
.gauge{ position:relative; width:200px; flex:none; }
.gauge.sm{ width:160px; }
.gauge svg{ width:100%; height:auto; overflow:visible; }
.gauge .g-track{ fill:none; stroke:var(--track); stroke-width:12; stroke-linecap:round; }
.gauge .g-val{ fill:none; stroke-width:12; stroke-linecap:round; }
.gauge .g-zone{ fill:none; stroke:var(--warn); stroke-width:3; stroke-linecap:round; opacity:.85; }
.gauge .g-lim{ stroke:var(--bad); stroke-width:2.5; stroke-linecap:round; }
.gauge .g-needle line{ stroke:var(--ink); stroke-width:2.5; stroke-linecap:round; }
.gauge .g-needle circle{ fill:var(--ink); }
.gauge .g-read{ position:absolute; inset-inline:0; top:44%; display:flex; flex-direction:column; align-items:center; gap:2px; }
.gauge .g-read b{ font-family:var(--ff-mono); font-size:30px; font-weight:600; letter-spacing:-.03em; line-height:1; }
.gauge.sm .g-read b{ font-size:24px; }
.gauge .g-read span{ font-size:10.5px; color:var(--ink-faint); white-space:nowrap; }
.gauge .g-scale{ display:flex; justify-content:space-between; font-size:10px; color:var(--ink-faint); padding:0 4px; margin-top:-2px; direction:ltr; }
.vring{ position:relative; display:inline-grid; place-items:center; flex:none; }
.vring svg{ width:72px; height:72px; }
.vring.sm svg{ width:44px; height:44px; } .vring.lg svg{ width:120px; height:120px; }
.vring .r-track{ fill:none; stroke:var(--track); }
.vring .r-val{ fill:none; stroke:var(--rc); stroke-linecap:round; }
.vring > b{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--ff-mono); font-weight:600; font-size:16px; }
.vring.sm > b{ font-size:11px; } .vring.lg > b{ font-size:26px; }
.vring > span{ font-size:10.5px; color:var(--ink-faint); margin-top:6px; text-align:center; }
.vbar{ display:flex; flex-direction:column; gap:6px; }
.vbar.click{ cursor:pointer; border-radius:6px; }
.vbar.click:hover .vb-l{ color:var(--accent); }
.vb-hd{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.vb-l{ font-size:12px; color:var(--ink-muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vb-v{ font-family:var(--ff-mono); font-size:12.5px; font-weight:600; }
.vb-t{ position:relative; height:6px; border-radius:3px; background:var(--track); }
.vb-f{ position:absolute; inset-block:0; inset-inline-start:0; border-radius:3px; transform-origin:var(--lo,left); }
[dir="rtl"] .vb-f, [dir="rtl"] .vbl-v{ --lo:right; }
.vb-m{ position:absolute; top:-4px; bottom:-4px; width:2px; border-radius:1px; background:var(--ink-muted); }
.vb-s{ font-size:10.5px; color:var(--ink-faint); }
.vbars{ display:flex; flex-direction:column; gap:14px; }
.vbullet .vbl-t{ position:relative; height:10px; margin-top:6px; }
.vbl-bands{ position:absolute; inset:0; display:flex; border-radius:3px; overflow:hidden; opacity:.25; }
.vbl-bands i{ display:block; height:100%; }
.vbl-v{ position:absolute; inset-inline-start:0; top:3px; height:4px; border-radius:2px; background:var(--ink); transform-origin:var(--lo,left); }
.vstack .vs-bar{ display:flex; gap:2px; height:10px; border-radius:5px; overflow:hidden; transform-origin:var(--lo,left); }
[dir="rtl"] .vstack .vs-bar{ --lo:right; }
.vstack .vs-bar i{ display:block; min-width:2px; }
.vs-lg{ display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; font-size:11.5px; color:var(--ink-muted); }
.vs-lg span{ display:inline-flex; align-items:center; gap:6px; }
.vs-lg i{ width:8px; height:8px; border-radius:2px; }
.vs-lg b{ font-family:var(--ff-mono); font-weight:600; color:var(--ink); }
.vdonut{ position:relative; flex:none; }
.vdonut svg{ width:100%; height:100%; }
.vdonut .r-track{ fill:none; stroke:var(--track); }
.vdonut circle{ fill:none; }
.vd-c{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.vd-c b{ font-family:var(--ff-mono); font-size:24px; font-weight:600; letter-spacing:-.02em; }
.vd-c span{ font-size:10.5px; color:var(--ink-faint); }
.vlegend{ display:flex; flex-direction:column; gap:8px; min-width:0; flex:1; }
.vl-r{ display:grid; grid-template-columns:10px minmax(0,1fr) auto; gap:8px; align-items:center; font-size:12px; color:var(--ink-muted); padding:2px 4px; border-radius:5px; }
.vl-r.click{ cursor:pointer; } .vl-r.click:hover{ background:var(--surface-2); color:var(--ink); }
.vl-r i{ width:10px; height:10px; border-radius:3px; }
.vl-r span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vl-r b{ font-family:var(--ff-mono); font-weight:600; color:var(--ink); }
.donutrow{ display:flex; align-items:center; gap:20px; }
.vheat{ display:grid; gap:4px; height:30px; direction:ltr; }
.vheat i{ display:block; border-radius:3px; background:var(--hc); opacity:var(--k); transform-origin:bottom; }
.vheat-x{ display:grid; gap:4px; margin-top:4px; direction:ltr; }
.vheat-x span{ font-size:10px; color:var(--ink-faint); white-space:nowrap; overflow:visible; }
.vtl{ list-style:none; margin:0; padding:0; }
.vtl li{ position:relative; display:grid; grid-template-columns:14px minmax(0,1fr); gap:12px; padding:0 0 14px; }
.vtl li::before{ content:""; position:absolute; inset-inline-start:6px; top:16px; bottom:0; width:2px; background:var(--line); }
.vtl li:last-child::before{ display:none; }
.vtl li.click{ cursor:pointer; }
.vtl li.click:hover b{ color:var(--accent); }
.tl-dot{ width:12px; height:12px; border-radius:50%; background:var(--tc); box-shadow:0 0 0 3px var(--panel); margin-top:4px; position:relative; z-index:1; }
.tl-h{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.tl-h b{ font-size:13px; font-weight:600; transition:color var(--dur-hover) var(--ease); }
.tl-h span{ font-size:11px; color:var(--ink-faint); white-space:nowrap; }
.tl-d{ font-size:12px; color:var(--ink-muted); margin-top:4px; line-height:1.5; }
.tl-m{ display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.tl-m b{ font-family:var(--ff-mono); font-size:12.5px; font-weight:600; }
.vflow{ position:relative; aspect-ratio:640/260; width:100%; }
.vflow svg{ position:absolute; inset:0; width:100%; height:100%; }
.vflow .fl-rib{ opacity:.26; transform-box:fill-box; transform-origin:left center; transition:opacity var(--dur-hover) var(--ease); }
.vflow .fl-rib:hover{ opacity:.5; }
.vflow .fl-lb{ position:absolute; transform:translateY(-50%); display:flex; flex-direction:column; gap:1px; font-size:11px; line-height:1.2; pointer-events:none; }
.vflow .fl-lb.end{ text-align:right; align-items:flex-end; }
.vflow .fl-lb b{ font-weight:600; color:var(--ink); white-space:nowrap; text-shadow:0 0 6px var(--panel); }
.vflow .fl-lb i{ font-style:normal; color:var(--ink-muted); font-size:10.5px; }
.vcard{ display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); min-width:0; color:inherit; text-align:start; }
.vcard.click{ cursor:pointer; transition:transform var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease); }
.vcard.click:hover{ transform:translateY(-2px); border-color:var(--line-strong); box-shadow:var(--shadow-md); }
.vcard .vc-t{ font-size:13px; font-weight:600; }
.vcard .vc-s{ font-size:11.5px; color:var(--ink-muted); }
.vcards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.center{ align-items:center; text-align:center; }
.topo{ position:relative; width:100%; overflow-x:auto; }
.topo svg{ display:block; width:100%; min-width:720px; height:auto; }
.topo .t-edge{ fill:none; stroke-width:2; }
.topo .t-node rect{ fill:var(--panel); stroke-width:1.5; }
.topo .t-node text{ font-family:var(--ff-sans); font-size:11px; font-weight:600; fill:var(--ink); }
.topo .t-node .t-sub{ font-family:var(--ff-mono); font-size:9.5px; font-weight:500; fill:var(--ink-faint); }
.topo .t-leaf{ stroke-width:1.5; }
.topo .t-leaf.unm{ fill:var(--panel); }
.topo g.click{ cursor:pointer; }
.topo g.click:hover rect{ stroke-width:2.5; }
[dir="rtl"] .topo svg text{ direction:ltr; }

/* insights cards */
.icard{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 18px; padding:14px 16px 14px 18px; border-radius:10px; border:1px solid var(--line);
        background:var(--surface-2); cursor:pointer; transition:transform var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease); }
.icard::before{ content:""; position:absolute; inset-inline-start:0; inset-block:10px; width:3px; border-radius:0 3px 3px 0; background:var(--ic, var(--accent)); }
[dir="rtl"] .icard::before{ border-radius:3px 0 0 3px; }
.icard:hover{ transform:translateY(-1px); border-color:var(--line-strong); box-shadow:var(--shadow-md); }
.icard.bad{ --ic:var(--bad); } .icard.warn{ --ic:var(--warn); } .icard.info{ --ic:var(--accent); } .icard.mute{ --ic:var(--ink-faint); opacity:.8; }
.icard .ic-m{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:11px; color:var(--ink-faint); }
.icard b{ font-size:13.5px; font-weight:600; }
.icard .ic-imp{ grid-row:1 / span 2; grid-column:2; text-align:end; align-self:center; }
.icard .ic-imp b{ display:block; font-family:var(--ff-mono); font-size:16px; color:var(--ink); }
.icard .ic-imp span{ font-size:10.5px; color:var(--ink-faint); }
.icards{ display:flex; flex-direction:column; gap:10px; }

/* ====================================================================== toast v2 */
#toasts{ position:fixed; bottom:18px; inset-inline-end:18px; display:flex; flex-direction:column; gap:10px; z-index:100; }
.toast{ position:relative; display:flex; align-items:center; gap:12px; padding:12px 16px 14px 12px; border-radius:10px; background:var(--surface); border:1px solid var(--line);
        box-shadow:var(--shadow-lg); font-size:12.5px; max-width:400px; min-width:260px; overflow:hidden; animation:t-in var(--dur-toast) var(--ease); }
.toast.out{ animation:t-out .18s ease-in forwards; }
@keyframes t-in{ from{ transform:translateY(8px); opacity:0; } }
@keyframes t-out{ to{ transform:translateY(4px); opacity:0; } }
.toast .t-ic{ display:grid; place-items:center; width:30px; height:30px; border-radius:8px; flex:none; }
.toast .t-msg{ flex:1; line-height:1.45; }
.toast .t-timer{ position:absolute; inset-inline:0; bottom:0; height:2px; transform-origin:var(--lo,left); animation:t-timer var(--dwell) linear forwards; }
[dir="rtl"] .toast .t-timer{ --lo:right; }
.toast.hold .t-timer{ animation-play-state:paused; }
@keyframes t-timer{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
.toast.ok .t-ic{ background:var(--ok-soft); color:var(--ok); } .toast.ok .t-timer{ background:var(--ok); }
.toast.bad .t-ic{ background:var(--bad-soft); color:var(--bad); } .toast.bad .t-timer{ background:var(--bad); }
.toast.warn .t-ic{ background:var(--warn-soft); color:var(--warn); } .toast.warn .t-timer{ background:var(--warn); }
.toast.info .t-ic{ background:var(--info-soft); color:var(--info); } .toast.info .t-timer{ background:var(--info); }

/* ====================================================================== command palette */
.pal-bd{ align-items:flex-start; padding-top:12vh; z-index:80; }
.palette{ width:min(580px, 100%); background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); overflow:hidden;
          animation:pal-in var(--dur-palette) var(--ease); }
@keyframes pal-in{ from{ transform:scale(.98); opacity:0; } }
.pal-in{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); color:var(--ink-faint); }
.pal-in input{ flex:1; border:0; background:transparent; box-shadow:none; padding:4px 0; font-size:14px; color:var(--ink); }
.pal-in input:focus{ box-shadow:none; }
.pal-list{ max-height:min(56vh, 460px); overflow-y:auto; padding:6px; }
.pal-g{ font-family:var(--ff-cond); font-size:9.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); padding:10px 10px 4px; }
.pal-i{ display:flex; align-items:center; gap:12px; width:100%; padding:8px 12px; border:0; border-radius:8px; background:transparent; text-align:start; font-size:13px; color:var(--ink); }
.pal-i svg{ color:var(--ink-muted); flex:none; }
.pal-i span{ flex:1; }
.pal-i em{ font-style:normal; font-size:10.5px; color:var(--ink-faint); font-family:var(--ff-cond); letter-spacing:.08em; text-transform:uppercase; }
.pal-i.on, .pal-i:hover{ background:var(--accent-soft); }
.pal-i.on svg{ color:var(--accent); }
.pal-none{ padding:24px; text-align:center; color:var(--ink-faint); font-size:12.5px; }
.pal-ft{ padding:8px 16px; border-top:1px solid var(--line); background:var(--surface-2); font-family:var(--ff-mono); font-size:10.5px; color:var(--ink-faint); }

/* ====================================================================== login (Figma: 00 Login · v2) */
#login{ min-height:100vh; display:grid; grid-template-columns:minmax(380px,44%) minmax(0,1fr); position:relative; z-index:1; }
.login-band{ position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:24px; padding:56px 60px; background:var(--band); color:var(--band-ink); overflow:hidden; }
.login-band::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(80% 60% at 100% 0%, rgba(67,195,234,.12), transparent 60%), radial-gradient(60% 50% at 0% 100%, rgba(242,179,58,.08), transparent 60%); }
.login-band > *{ position:relative; z-index:1; }
.lb-brand{ display:flex; align-items:center; gap:12px; }
.lb-brand .cw-logo{ height:50px; color:var(--band-ink); }
.lb-rule{ width:1px; height:24px; margin-block-start:22px; background:var(--band-ink-2); opacity:.45; }
.lb-product{ margin-block-start:22px; font-family:var(--ff-cond); font-weight:600; font-size:20px; letter-spacing:-.01em; color:var(--band-ink); }
.lb-mid{ display:flex; flex-direction:column; gap:18px; max-width:640px; }
.lb-eyebrow{ color:var(--accent); }
.lb-head{ margin:0; font-family:var(--ff-cond); font-size:40px; font-weight:600; line-height:1.15; letter-spacing:-.015em; }
.lb-sld{ width:100%; max-width:560px; height:auto; margin-top:8px; }
.lb-sld path, .lb-sld circle{ stroke-width:4; stroke-linecap:round; }
.lb-sld .thin{ stroke-width:2; }
.lb-sld .ehv{ stroke:var(--v-ehv); } .lb-sld .hv{ stroke:var(--v-hv); }
.lb-sld .flowd{ stroke-width:2; stroke-dasharray:3 8; animation:flow 1.6s linear infinite; }
.paused .lb-sld .flowd{ animation-play-state:paused; }
.lb-proof{ display:flex; gap:28px; flex-wrap:wrap; }
.lb-proof b{ display:block; font-family:var(--ff-mono); font-size:16px; font-weight:600; }
.lb-proof span{ display:block; font-size:11.5px; color:var(--band-ink-2); margin-top:2px; }
.lb-foot{ font-size:10.5px; color:var(--band-ink-2); }
.login-pane{ display:grid; place-items:center; padding:32px; }
.loginbox{ width:100%; max-width:420px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:32px 32px 24px; animation:rise var(--dur-drawer) var(--ease-out); }
.login-logo{ display:none; height:44px; margin-bottom:14px; color:var(--ink); }
.loginbox h2{ font-family:var(--ff-cond); font-size:24px; margin:4px 0 4px; }
.loginbox p.lead{ font-size:12.5px; color:var(--ink-muted); margin:0 0 22px; line-height:1.5; }
.loginbox .btn.primary{ padding:10px 14px; font-size:13px; margin-top:4px; }
.login-lang{ margin-top:16px; text-align:center; }
#li_err{ padding:10px 12px; border-radius:8px; background:var(--bad-soft); border-inline-start:3px solid var(--bad); color:var(--ink); font-size:12px; margin-top:14px; }
@media (max-width:900px){ #login{ grid-template-columns:1fr; } .login-band{ display:none; } .login-logo{ display:block; } }

/* ====================================================================== motion glue */
.paused .mimic .flow, .paused .scada .dot::after, .paused .livechip .dot::after{ animation-play-state:paused; }
::view-transition-group(siq-open){ animation-duration:var(--dur-page, 320ms); animation-timing-function:var(--ease); }
/* A journey (design/motion.js pageTransition): the old view leaves the way
   the rail was travelled, the new one arrives from the other side, 560 ms.
   Only the view moves; the rail and top bar stay still, which is what makes
   it read as navigation and not a reload. The root pair must not cross-fade:
   two full-opacity rails blend to white. */
html.paging{ --pd:1; }
html.paging[data-pdir="-1"]{ --pd:-1; }
::view-transition-old(root){ animation:none; opacity:0; }
::view-transition-new(root){ animation:none; }
::view-transition-group(siq-view){ animation-duration:var(--dur-view); }
::view-transition-old(siq-view){ animation:vt-out calc(var(--dur-view) * .46) var(--ease-in) both; }
::view-transition-new(siq-view){ animation:vt-in var(--dur-view) var(--ease) both; }
/* Theme switch (design/motion.js themeTransition): the old theme fades out
   over the new one. Opacity only; off under reduced motion like the rest. */
html.vt-theme::view-transition-old(root){ animation:theme-out calc(var(--dur-view) * .75) var(--ease) both; opacity:1; }
html.vt-theme::view-transition-new(root){ animation:theme-in calc(var(--dur-view) * .75) var(--ease) both; }
@keyframes theme-out{ to{ opacity:0; } }
@keyframes theme-in{ from{ opacity:0; } }
@keyframes vt-out{ to{ opacity:0; transform:translateY(calc(var(--pd,1) * -8px)); } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(calc(var(--pd,1) * 16px)); } }

/* ====================================================================== Arabic */
[dir="rtl"] .rv, [dir="rtl"] .n, [dir="rtl"] .val b, [dir="rtl"] .bv b, [dir="rtl"] #liveClock{ direction:ltr; unicode-bidi:isolate; }
[dir="rtl"] .desc, [dir="rtl"] .tagno, [dir="rtl"] .busname, [dir="rtl"] td, [dir="rtl"] .hint{ unicode-bidi:plaintext; }
/* Arabic is a joined script: tracking pulls the letters apart and breaks the shaping. */
[dir="rtl"] body *{ letter-spacing:normal !important; }
[dir="rtl"] .rail{ border-right:none; border-left:1px solid var(--line); }
[dir="rtl"] .band .b-head, [dir="rtl"] .lb-head{ font-family:var(--ff-sans); line-height:1.45; }
[dir="rtl"] .vflow .fl-lb b{ font-family:var(--ff-sans); }

/* ====================================================================== executive layout */
.grid.twinrow{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:16px; align-items:stretch; margin-top:16px; }
.grid.twinrow > .twin{ margin:0; min-width:0; }
.grid.twinrow > .panel{ display:flex; flex-direction:column; }
@media (max-width:1280px){ .grid.twinrow{ grid-template-columns:minmax(0,1fr); } }

/* ====================================================================== reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none !important; }
}
.vbars.two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 32px; }
@media (max-width:1180px){ .vbars.two{ grid-template-columns:1fr; } }
.tile .tvis + .twrap .tl{ padding-inline-end:52px; }
.ghero.g4h{ grid-template-columns:2fr 1fr 1fr 1fr; }
@media (max-width:1280px){ .ghero.g4h{ grid-template-columns:1fr 1fr; } }
.setrow .meta .pill{ display:inline-flex; margin-inline-start:6px; vertical-align:1px; }
.setrow .meta .ds-stats, .setrow .meta .tbl-wrap, .setrow .meta .note{ margin-top:10px; }


/* ---------------------------------------------------------------------------
   Ask StationIQ (components/ask.js): floating button + side panel.
   Motion: ring pulse on the button, slide-in panel, bubbles settle up,
   typing dots, typed-out answer, source chips fade in. All off under
   prefers-reduced-motion.
   --------------------------------------------------------------------------- */
.askbtn{ position:fixed; inset-inline-end:22px; bottom:22px; z-index:60; display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px 0 14px;
  border-radius:var(--radius-full); border:1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); color:var(--accent);
  background:var(--surface); box-shadow:var(--shadow-md);
  font-family:var(--ff-cond); font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
  transition:transform var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease); }
[dir="rtl"] .askbtn{ padding:0 14px 0 18px; }
.askbtn:hover{ transform:translateY(-2px); border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.askbtn:active{ transform:scale(.97); transition-duration:var(--dur-press); }
.askbtn svg{ flex:none; }
.askbtn kbd{ font-size:9.5px; letter-spacing:0; text-transform:none; margin-inline-start:2px; }
/* The pulse is the button's own outline (it shares the generic .ring class
   with the tiles, so every box property is reset here). It pulses three
   times after sign-in, then stays still. */
.askbtn .ring{ position:absolute; inset:-1px; width:auto; height:auto; border-radius:inherit; border:1px solid var(--accent); opacity:0; pointer-events:none;
  animation:askring 2.4s ease-out 3; }
@keyframes askring{ 0%{ transform:scale(1); opacity:.5; } 70%{ transform:scale(1.12, 1.35); opacity:0; } 100%{ opacity:0; } }
.paused .askbtn .ring{ animation-play-state:paused; }
#toasts{ bottom:78px; }
body.ask-open .askbtn{ opacity:0; pointer-events:none; transform:translateY(8px); }

.askwrap{ position:fixed; inset:0; z-index:70; pointer-events:none; }
.askbd{ position:absolute; inset:0; background:rgba(8,12,18,.28); opacity:0; transition:opacity .3s; }
.askpanel{ position:absolute; top:0; bottom:0; inset-inline-end:0; width:min(420px, 100vw); display:flex; flex-direction:column;
  background:color-mix(in srgb, var(--panel) 94%, var(--bg)); border-inline-start:1px solid var(--line); box-shadow:-24px 0 60px -30px rgba(0,0,0,.45);
  transform:translateX(104%); transition:transform .38s cubic-bezier(.2,.8,.2,1); }
[dir="rtl"] .askpanel{ transform:translateX(-104%); box-shadow:24px 0 60px -30px rgba(0,0,0,.45); }
.askwrap.on{ pointer-events:auto; }
.askwrap.on .askbd{ opacity:1; }
.askwrap.on .askpanel{ transform:none; }

.askhd{ display:flex; align-items:center; gap:8px; padding:14px 16px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent); }
.askid{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; color:var(--accent); }
.askid b{ display:block; font-family:var(--ff-cond); font-size:14px; letter-spacing:.02em; color:var(--ink); }
.askid .mono{ font-size:10.5px; color:var(--ink-faint); }

.asklog{ flex:1; overflow:auto; padding:16px 16px 6px; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth; }
.askempty{ margin:auto; text-align:center; max-width:280px; color:var(--ink-muted); font-size:12.5px; line-height:1.6; }
.askempty .orb{ width:54px; height:54px; margin:0 auto 14px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent) 55%, color-mix(in srgb, var(--series-5) 70%, var(--accent)));
  box-shadow:0 0 0 8px color-mix(in srgb, var(--accent) 12%, transparent), 0 14px 30px -10px color-mix(in srgb, var(--accent) 70%, transparent);
  animation:askorb 4s ease-in-out infinite; }
@keyframes askorb{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-5px) scale(1.04); } }
.askempty b{ display:block; color:var(--ink); font-family:var(--ff-cond); font-size:15px; margin-bottom:4px; }

.askmsg{ display:flex; opacity:0; transform:translateY(10px) scale(.98); animation:askin .35s cubic-bezier(.2,.8,.2,1) forwards; }
.askmsg.settled{ animation:none; opacity:1; transform:none; }
@keyframes askin{ to{ opacity:1; transform:none; } }
.askmsg.user{ justify-content:flex-end; }
.askmsg .bub{ max-width:88%; padding:10px 12px; border-radius:16px; font-size:13px; line-height:1.6; }
.askmsg .readas{ margin-bottom:6px; }
.askmsg.user .bub{ background:var(--accent); color:#fff; border-end-end-radius:5px; box-shadow:0 8px 20px -10px var(--accent); }
.askmsg.assistant .bub{ background:var(--surface-2, var(--bg)); border:1px solid var(--line); color:var(--ink); border-end-start-radius:5px; }
.askmsg .bub.err{ border-color:var(--bad); color:var(--bad); background:var(--bad-soft); }
.askmsg .txt{ white-space:pre-wrap; }
.askmsg .meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; transition:opacity .4s; }
.askmsg .meta .mono{ margin-inline-start:auto; font-size:10px; color:var(--ink-faint); }
.askmsg .src{ font-family:var(--ff-cond); font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:4px 8px; border-radius:6px;
  border:1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); background:var(--accent-soft); color:var(--accent); cursor:pointer; transition:transform .15s, background .15s; }
.askmsg .src:hover{ transform:translateY(-1px); background:color-mix(in srgb, var(--accent) 22%, var(--panel)); }

.askmsg .fb{ display:inline-flex; gap:2px; margin-inline-start:4px; }
.askmsg .fb button{ width:24px; height:22px; border-radius:6px; border:1px solid transparent; background:transparent; color:var(--ink-faint); cursor:pointer; display:grid; place-items:center; transition:color .15s, background .15s, transform .15s; }
.askmsg .fb button:hover{ color:var(--ink); background:var(--surface-2, var(--bg)); transform:translateY(-1px); }
.askmsg .fb .up.on{ color:var(--ok); background:var(--ok-soft); }
.askmsg .fb .dn.on{ color:var(--bad); background:var(--bad-soft); }
.askmsg .ideal{ margin-top:8px; display:flex; gap:6px; align-items:flex-end; animation:askin .3s cubic-bezier(.2,.8,.2,1) both; }
.askmsg .ideal textarea{ flex:1; resize:none; padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font:inherit; font-size:12.5px; }
.askmsg .ideal textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.askmsg .ideal.saved{ display:block; font-size:12px; color:var(--ink-muted); border-inline-start:2px solid var(--ok); padding-inline-start:8px; }
.askmsg.typing .bub{ display:inline-flex; align-items:center; gap:10px; color:var(--ink-muted); font-size:12px; }
.dots{ display:inline-flex; gap:4px; }
.dots i{ width:6px; height:6px; border-radius:50%; background:var(--accent); animation:askdot 1.1s ease-in-out infinite; }
.dots i:nth-child(2){ animation-delay:.15s; } .dots i:nth-child(3){ animation-delay:.3s; }
@keyframes askdot{ 0%,80%,100%{ transform:translateY(0); opacity:.35; } 40%{ transform:translateY(-5px); opacity:1; } }

.asksug{ display:flex; flex-wrap:wrap; gap:6px; padding:8px 16px 4px; transition:opacity .25s, max-height .3s; max-height:160px; overflow:hidden; }
.asksug.off{ opacity:.35; pointer-events:none; }
.asksug .chip{ font-size:12px; padding:6px 12px; border-radius:var(--radius-full); border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer;
  opacity:0; transform:translateY(6px); animation:askin .4s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(var(--i, 0) * 60ms); transition:border-color .15s, background .15s, transform .15s; }
.asksug .chip:hover{ border-color:var(--accent); background:var(--accent-soft); transform:translateY(-1px); }

.askform{ display:flex; align-items:flex-end; gap:8px; padding:10px 16px 6px; }
.askform textarea{ flex:1; resize:none; min-height:40px; max-height:120px; padding:10px 12px; border-radius:14px; border:1px solid var(--line); background:var(--panel); color:var(--ink);
  font:inherit; font-size:13px; line-height:1.45; outline:none; transition:border-color .2s, box-shadow .2s; }
.askform textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.asksend{ position:relative; width:40px; height:40px; border-radius:50%; border:none; background:var(--accent); color:#fff; cursor:pointer; display:grid; place-items:center;
  box-shadow:0 8px 18px -8px var(--accent); transition:transform .2s cubic-bezier(.2,.8,.2,1), filter .2s; }
.asksend:hover{ transform:scale(1.06); filter:brightness(1.08); }
.asksend:active{ transform:scale(.94); }
[dir="rtl"] .asksend svg{ transform:scaleX(-1); }
.asksend .spin{ position:absolute; inset:7px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; opacity:0; }
.askwrap.busy .asksend svg{ opacity:0; }
.askwrap.busy .asksend .spin{ opacity:1; animation:askspin .8s linear infinite; }
@keyframes askspin{ to{ transform:rotate(360deg); } }
.askfoot{ padding:4px 16px 12px; font-size:10.5px; color:var(--ink-faint); text-align:center; }

@media (max-width:640px){ .askbtn .lbl{ display:none; } .askbtn{ padding:12px; } .askpanel{ width:100vw; } }
@media (prefers-reduced-motion: reduce){
  .askbtn .ring, .askempty .orb, .dots i, .askwrap.busy .asksend .spin{ animation:none; }
  .askmsg, .asksug .chip{ animation:none; opacity:1; transform:none; }
  .askpanel, .askbd, .askbtn{ transition:none; }
}

/* Correlation (views/correlation.js) */
.co-controls{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.co-controls select, .co-pick select{ padding:6px 10px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--panel); color:var(--ink); font:inherit; font-size:12.5px; }
.co-heat table{ border-collapse:separate; border-spacing:2px; width:auto; }
.co-heat th, .co-heat td{ padding:0; border:none; }
.co-heat .co-row{ text-align:start; font-size:12px; font-weight:500; white-space:nowrap; max-width:210px; overflow:hidden; text-overflow:ellipsis; padding-inline-end:8px; }
.co-heat .co-col{ font-family:var(--ff-mono); font-size:10.5px; color:var(--ink-faint); text-align:center; height:22px; }
.co-cell{ width:42px; min-width:42px; height:30px; border-radius:5px; text-align:center; cursor:pointer; transition:transform .15s, box-shadow .15s; }
.co-cell span{ font-family:var(--ff-mono); font-size:10.5px; color:var(--ink); }
.co-cell:not(.diag):hover{ transform:scale(1.12); box-shadow:0 0 0 2px var(--accent); position:relative; z-index:1; }
.co-cell.diag{ cursor:default; opacity:.4; }
.co-legend{ display:flex; align-items:center; gap:8px; margin-top:10px; font-family:var(--ff-mono); font-size:11px; color:var(--ink-muted); flex-wrap:wrap; }
.co-legend i{ display:inline-block; width:140px; height:8px; border-radius:4px; }
.co-picks{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.co-pick{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.co-pick b{ font-family:var(--ff-cond); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-muted); }
.co-h{ font-family:var(--ff-cond); font-size:13px; margin:0 0 6px; }
.co-driver{ border-radius:8px; transition:background .15s; }
.co-driver:hover{ background:var(--surface-2, transparent); }

/* Explain mode (lib/explain.js): a reading or a meter said in plain words. */
.xp{ display:grid; gap:4px; padding:8px 12px; border-radius:var(--r-sm); background:var(--info-soft); border-inline-start:3px solid var(--info); font-size:12px; line-height:1.55; color:var(--ink); }
.xp-l{ display:grid; grid-template-columns:140px minmax(0,1fr); gap:10px; }
.xp-l b{ font-weight:600; color:var(--ink-soft, var(--ink)); }
tr.xp-row td{ padding-top:0; border-top:0; }
tr.xp-row:hover td{ background:transparent; }
@media (max-width:720px){ .xp-l{ grid-template-columns:1fr; gap:0; } }

/* Explain layer (lib/explain.js, lib/abbr.js, lib/tour.js, views/glossary.js).
   Accent colour only, never a status colour: an explanation is neutral. */
tr.xp-row{ display:none; }
body.explain tr.xp-row{ display:table-row; }
.xonly{ display:none; }
body.explain .xonly{ display:inline; }

/* the (i): 18 px, quiet until looked for, filled with the accent on hover and while the mode is on */
.xi{ display:inline-grid; place-items:center; flex:none; width:18px; height:18px; padding:0; margin-inline-start:6px; vertical-align:middle;
  border-radius:50%; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-muted);
  font:700 11px/1 var(--ff-mono); cursor:pointer;
  transition:background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.xi:hover, .xi:focus-visible, body.explain .xi{ background:var(--accent); border-color:var(--accent); color:#fff; }
.xi:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.readout .rk{ display:flex; align-items:center; }
.readout .rk .xi{ width:14px; height:14px; font-size:9px; margin-inline-start:4px; }

/* the caption: pushes the section down, never covers it */
.xcap{ display:none; gap:8px; align-items:flex-start; margin:-4px 18px 12px; padding:8px 12px; border-radius:10px;
  background:var(--accent-soft); color:var(--ink); font-size:12.5px; line-height:1.5; }
body.explain .xcap{ display:flex; }
.xcap > svg{ flex:none; color:var(--accent); margin-top:2px; }
.xcap > div{ flex:1; min-width:0; }
.xcap-h{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.xcap-h b{ font-family:var(--ff-cond); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
.xcap-more{ border:0; background:none; padding:0; color:var(--accent); font:600 12px var(--ff-sans); cursor:pointer; white-space:nowrap; }
.xcap-more:hover{ text-decoration:underline; }
.xcap p{ margin:2px 0 0; }

/* the band's figures, each a door to its explanation */
.b-terms{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.b-term{ display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:999px; border:1px solid var(--band-line); background:transparent;
  color:var(--band-ink-2); font:500 11.5px var(--ff-sans); cursor:pointer; transition:color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.b-term svg{ width:13px; height:13px; }
.b-term:hover, .b-term:focus-visible{ color:var(--band-ink); border-color:color-mix(in srgb, var(--band-ink) 40%, transparent); }

/* the sheet */
.xsheet .modal-hd{ padding-bottom:0; border-bottom:0; }
.xhead{ display:flex; gap:14px; align-items:center; margin-bottom:18px; }
.xbadge{ display:grid; place-items:center; width:48px; height:48px; flex:none; border-radius:14px; color:#fff;
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #0b2230)); }
.xbadge svg{ width:22px; height:22px; }
.xhead h2{ margin:2px 0 0; font-size:20px; font-weight:600; }
.xeb{ font-family:var(--ff-cond); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); }
.xeb.accent{ color:var(--accent); }
.xsteps{ list-style:none; margin:0; padding:0; counter-reset:xs; }
.xsteps li{ position:relative; padding:0 0 14px; padding-inline-start:34px; counter-increment:xs; }
.xsteps li::before{ content:counter(xs); position:absolute; inset-inline-start:0; top:-2px; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font:700 11.5px var(--ff-mono); }
.xsteps li:not(:last-child)::after{ content:""; position:absolute; inset-inline-start:10px; top:24px; bottom:2px; width:2px; background:var(--accent-soft); }
.xsteps p{ margin:4px 0 0; font-size:13.5px; line-height:1.6; color:var(--ink); }
.xnow{ margin:6px 0 16px; padding:12px 14px; border-radius:12px; border:1px solid color-mix(in srgb, var(--accent) 24%, transparent); background:var(--surface-2); }
.xnow .xeb{ display:flex; align-items:center; gap:8px; }
.xdot{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--ok); }
.xdot::after{ content:""; position:absolute; inset:-3px; border-radius:50%; background:var(--ok); opacity:.35; animation:xbreathe 1.4s ease-in-out infinite; }
@keyframes xbreathe{ 0%{ transform:scale(.6); opacity:.45; } 100%{ transform:scale(1.6); opacity:0; } }
.formula{ margin-top:8px; padding:8px 10px; border-radius:8px; background:var(--well); font:600 12.5px/1.5 var(--ff-mono); direction:ltr; unicode-bidi:isolate; text-align:left; overflow-wrap:anywhere; }
.xchips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.xchips .b-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:500 11.5px var(--ff-sans); }
.xchips .b-chip i{ width:7px; height:7px; border-radius:50%; background:var(--cc); }
.xshare{ height:6px; margin-top:10px; border-radius:3px; background:var(--track); overflow:hidden; }
.xshare i{ display:block; height:100%; border-radius:3px; background:var(--accent); }
.xnext{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.xnext .btn{ display:inline-flex; align-items:center; gap:8px; }
.xask{ min-height:46px; padding-inline:16px; color:#fff; border:0; background:linear-gradient(135deg, var(--accent), #6B4FBB); }
.xask:hover{ filter:brightness(1.08); }
.xswitch{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--surface); }
.xswitch > div{ flex:1; display:flex; flex-direction:column; gap:1px; font-size:12px; color:var(--ink-muted); }
.xswitch > div b{ font-size:13px; color:var(--ink); font-weight:600; }
.xsw-ic{ color:var(--accent); display:grid; }
.xtoggle{ position:relative; width:38px; height:22px; flex:none; border-radius:11px; border:0; padding:0; background:var(--line-strong); cursor:pointer; transition:background-color var(--dur-micro) var(--ease-out); }
.xtoggle i{ position:absolute; top:3px; inset-inline-start:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:transform var(--dur-micro) var(--ease-out); }
.xtoggle[aria-checked="true"]{ background:var(--accent); }
.xtoggle[aria-checked="true"] i{ transform:translateX(16px); }
[dir="rtl"] .xtoggle[aria-checked="true"] i{ transform:translateX(-16px); }
.xtoggle:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.xin .xsteps p{ font-size:12.5px; }
/* the sheet's parts rise in, 45 ms apart */
.xsheet .xhead, .xsheet .xsteps li, .xsheet .xnow, .xsheet .xnext, .xsheet .xswitch{ animation:xrise var(--dur-page) var(--ease-out) both; }
.xsheet .xsteps li:nth-child(2){ animation-delay:45ms; }
.xsheet .xsteps li:nth-child(3){ animation-delay:90ms; }
.xsheet .xnow{ animation-delay:135ms; }
.xsheet .xnext{ animation-delay:180ms; }
.xsheet .xswitch{ animation-delay:225ms; }
@keyframes xrise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* abbreviations */
abbr.ab{ text-decoration:none; border-bottom:1px dotted var(--accent); cursor:help; }
abbr.ab:hover{ background:var(--accent-soft); border-radius:3px; }
.xtip{ position:fixed; z-index:10000; max-width:320px; padding:8px 10px; border-radius:8px; background:var(--band); color:var(--band-ink-2);
  font-size:12px; line-height:1.45; pointer-events:none; opacity:0; transition:opacity var(--dur-micro) var(--ease-out); box-shadow:var(--shadow-md); }
.xtip.on{ opacity:1; }
.xtip b{ display:block; color:var(--band-ink); font-weight:600; margin-bottom:2px; }

/* the help menu */
.xhelp-wrap{ position:relative; }
.xhelp.on{ color:var(--accent); }
.xmenu{ position:absolute; top:calc(100% + 6px); inset-inline-end:0; z-index:60; width:300px; padding:8px; border-radius:12px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-lg); display:grid; gap:4px; }
.xmenu .xswitch{ border:0; padding:8px; }
.xmenu > button{ text-align:start; padding:8px 10px; border:0; border-radius:8px; background:none; color:var(--ink); font:500 13px var(--ff-sans); cursor:pointer; }
.xmenu > button:hover, .xmenu > button:focus-visible{ background:var(--surface-2); }

/* the glossary */
.gl-top{ display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,360px); gap:12px; margin-bottom:18px; align-items:stretch; }
.gl-hero{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px 16px; border-radius:var(--r); background:var(--band); color:var(--band-ink); }
.gl-hero b{ font-size:15px; font-weight:600; margin-inline-end:auto; }
.gl-q{ flex:1 1 220px; min-width:0; padding:8px 12px; border-radius:8px; border:1px solid var(--band-line); background:rgba(255,255,255,.06); color:var(--band-ink); font:13px var(--ff-sans); }
.gl-q::placeholder{ color:var(--band-ink-2); }
.gl-h{ margin:22px 0 10px; font-size:15px; font-weight:600; }
.gl-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.gl-card{ padding:14px 16px; border-radius:var(--r); background:var(--panel); border:1px solid var(--line); scroll-margin-top:90px; }
.gl-card[hidden]{ display:none; }
.gl-card.hl{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.gl-card h3{ margin:0 0 10px; font-size:14px; font-weight:600; display:flex; align-items:center; }
dl.gl{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; font-size:12.5px; }
dl.gl dt{ color:var(--ink-muted); font-weight:600; }
dl.gl dd{ margin:0; color:var(--ink); line-height:1.5; }
.gl-ab{ display:flex; gap:12px; align-items:baseline; font-size:12.5px; }
.gl-ab > b{ min-width:74px; color:var(--accent); }
.gl-ab div{ display:flex; flex-direction:column; gap:2px; color:var(--ink-muted); }
.gl-ab div b{ color:var(--ink); font-weight:600; }
@media (max-width:900px){ .gl-top, .gl-grid{ grid-template-columns:1fr; } }

/* the tour */
.tour-spot{ position:fixed; z-index:9998; display:none; border-radius:14px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(10,16,24,.55), 0 0 0 3px var(--accent);
  transition:left 200ms var(--ease-out), top 200ms var(--ease-out), width 200ms var(--ease-out), height 200ms var(--ease-out); }
.tour-card{ position:fixed; z-index:9999; display:none; width:340px; max-width:calc(100vw - 16px); padding:18px; border-radius:16px;
  background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lg); }
.tour-spot.on, .tour-card.on{ display:block; }
.tour-card.on{ animation:xfade 200ms var(--ease-out); }
.tour-card h3{ margin:6px 0 6px; font-size:16px; font-weight:600; }
.tour-card p{ margin:0 0 14px; font-size:13px; line-height:1.55; color:var(--ink-muted); }
.tour-ft{ display:flex; align-items:center; gap:6px; }
.tour-ft span{ flex:1; }
@keyframes xfade{ from{ opacity:0; } to{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .xsheet .xhead, .xsheet .xsteps li, .xsheet .xnow, .xsheet .xnext, .xsheet .xswitch, .tour-card.on{ animation:none; }
  .xdot::after{ animation:none; opacity:0; }
  .tour-spot{ transition:none; }
}

/* ====================================================================== what-if */
.wi-bar{ justify-content:space-between; }
.wi-presets{ display:flex; flex-wrap:wrap; gap:6px; }
.wi-field{ margin-bottom:12px; }
.wi-input{ position:relative; display:flex; align-items:center; }
.wi-input input{ width:100%; font-family:var(--ff-mono); font-variant-numeric:tabular-nums; }
.wi-unit{ position:absolute; inset-inline-end:10px; font-size:11px; color:var(--ink-faint); pointer-events:none; }
.wi-result{ display:flex; flex-direction:column; gap:14px; min-width:0; transition:opacity var(--dur-view) var(--ease); }
.wi-result.busy{ opacity:.6; }
.wi-hero{ border-inline-start:3px solid var(--line); }
.wi-hero.ok{ border-inline-start-color:var(--ok); }
.wi-hero.bad{ border-inline-start-color:var(--bad); }
.wi-head{ font-family:var(--ff-cond); font-size:12px; font-weight:600; color:var(--ink-muted); }
.wi-big{ font-family:var(--ff-mono); font-variant-numeric:tabular-nums; font-size:32px; font-weight:600; margin:4px 0 14px; color:var(--ink); text-align:start; }
.wi-hero.ok .wi-big{ color:var(--ok); }
.wi-hero.bad .wi-big{ color:var(--bad); }
.wi-kvs{ display:flex; flex-wrap:wrap; gap:10px 28px; }
.wi-kv span{ display:block; font-size:11px; color:var(--ink-faint); margin-bottom:2px; }
.wi-kv b{ font-family:var(--ff-mono); font-size:13px; font-weight:600; }
.wi-c.ok{ color:var(--ok); }
.wi-c.bad{ color:var(--bad); }
.wi-total td{ font-weight:600; border-top:2px solid var(--line); }
.wi-foot{ margin:0; font-size:11px; color:var(--ink-faint); line-height:1.5; }
@media (max-width:1000px){ .wi-grid{ grid-template-columns:minmax(0,1fr); } }

/* ====================================================================== motion: quick switch, greeting, ripple */
/* A re-render of the same view settles softly (design/motion.js softSwap);
   the entrance is for a navigation only. */
/* The soft swap, the greeting's words and the rail's slide-in are Web
   Animations in design/motion.js (finished by a timer when the page is not
   being drawn), not stylesheet keyframes. */
.greet{ font-size:15px; line-height:20px; font-weight:500; color:var(--band-ink-2); margin-top:10px; }
.greet b{ font-weight:600; color:var(--band-ink); }
.greet span{ display:inline-block; }
/* A press ripples from where the pointer landed (design/motion.js ripples). */
.has-rip{ position:relative; overflow:hidden; }
.rip{ position:absolute; left:var(--x,50%); top:var(--y,50%); width:var(--d,40px); height:var(--d,40px); margin:calc(var(--d,40px) / -2) 0 0 calc(var(--d,40px) / -2);
      border-radius:50%; background:currentColor; opacity:.14; pointer-events:none; transform:scale(0); animation:rip 520ms var(--ease) forwards; }
@keyframes rip{ to{ transform:scale(1); opacity:0; } }

/* ====================================================================== glass */
/* The Motion and glass playbook (kpi_cockpit/docs/MOTION-GLASS-PLAYBOOK.md),
   applied behind one class on <html>: remove class="glass" in index.html and
   the flat product is back. One token set per theme, one selector list; the
   brand is the first orb and the rail's pill; nested panes drop the blur;
   prefers-reduced-transparency makes every pane solid; the mimic and the 3D
   twin keep their canvases as they are. */
html.glass{
  --glass-bg:rgba(255,255,255,.64); --glass-bg-2:rgba(255,255,255,.80); --glass-rail:rgba(245,247,249,.72);
  --glass-edge:rgba(17,24,32,.10); --glass-hi:rgba(255,255,255,.90);
  --glass-shadow:0 10px 30px rgba(17,24,32,.07), 0 1px 2px rgba(17,24,32,.04);
  --glass-blur:blur(18px) saturate(1.35);
  --orb-1:rgba(192,0,0,.15); --orb-2:rgba(14,127,166,.16); --orb-3:rgba(27,143,90,.12);
  --rail-tile:rgba(17,24,32,.05); --rail-hover:rgba(17,24,32,.045); --rail-tile-on:rgba(255,255,255,.22);
  --rail-pill:linear-gradient(135deg, #DA2A2A 0%, var(--brand) 100%);
  --rail-glow:0 10px 26px rgba(192,0,0,.30), 0 2px 6px rgba(192,0,0,.18);
}
html.glass[data-theme="dark"]{
  --glass-bg:rgba(19,26,34,.56); --glass-bg-2:rgba(26,34,44,.72); --glass-rail:rgba(11,15,20,.62);
  --glass-edge:rgba(255,255,255,.07); --glass-hi:rgba(255,255,255,.07);
  --glass-shadow:0 12px 34px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
  --orb-1:rgba(255,92,82,.20); --orb-2:rgba(67,195,234,.18); --orb-3:rgba(53,208,138,.14);
  --rail-tile:rgba(255,255,255,.055); --rail-hover:rgba(255,255,255,.05); --rail-tile-on:rgba(255,255,255,.22);
  --rail-pill:linear-gradient(135deg, #FF7A70 0%, #E5261F 100%);
  --rail-glow:0 12px 30px rgba(229,38,31,.38), 0 2px 6px rgba(229,38,31,.25);
}
/* the ground: three slow orbs behind everything, two on one layer, one on the other */
html.glass #app{ background:var(--bg) linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, #fff) 0%, var(--bg) 42%, color-mix(in srgb, var(--bg) 96%, #000) 100%); isolation:isolate; }
html.glass[data-theme="dark"] #app{ background:var(--bg) linear-gradient(180deg, color-mix(in srgb, var(--bg) 90%, #1f2a36) 0%, var(--bg) 45%, #0B0F14 100%); }
html.glass #app::before, html.glass #app::after{ content:""; position:fixed; z-index:-1; pointer-events:none; will-change:transform; }
html.glass #app::before{ inset:0; background:radial-gradient(560px 560px at 88% -6%, var(--orb-1), transparent 70%), radial-gradient(480px 480px at 62% 58%, var(--orb-3), transparent 70%); }
html.glass #app::after{ border-radius:50%; width:760px; height:760px; bottom:-300px; inset-inline-start:var(--rail-w); background:radial-gradient(closest-side, var(--orb-2), transparent); }
html.glass #app::before{ animation:orbDrift 46s ease-in-out infinite alternate; }
html.glass #app::after{ animation:orbDrift 58s ease-in-out infinite alternate-reverse; }
@keyframes orbDrift{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-60px,50px) scale(1.08); } }
/* the panes */
html.glass .rail, html.glass .topbar{ background:var(--glass-rail); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); }
html.glass .rail{ border-inline-end-color:var(--glass-edge); background-image:linear-gradient(180deg, var(--glass-rail), transparent 60%); }
[dir="rtl"] html.glass .rail, html.glass[dir="rtl"] .rail{ border-left-color:var(--glass-edge); }
html.glass .topbar{ border-bottom-color:var(--glass-edge); }
/* Cards: translucent fill, edge and highlight, no blur. Measured on the office
   VM (no GPU) the blur on every card cost 7 to 9 ms a frame with 16 surfaces;
   the playbook's limit is 2 ms, so the blur stays on the rail, the top bar and
   the pop-overs only. The denser --glass-bg-2 keeps text readable over the orbs. */
html.glass :is(.panel, .tile, .board, .state, .setsec, .tele, .repcard, .vcard, .dsheet, .compliant){
  background:var(--glass-bg-2); border:1px solid var(--glass-edge);
  box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hi); }
/* nested: no shadow, so a pane inside a pane does not float */
html.glass :is(.panel, .board, .tile, .setsec, .dsheet) :is(.panel, .tile, .board, .repcard, .vcard, .state){
  box-shadow:inset 0 1px 0 var(--glass-hi); }
/* the dark band keeps its ground, gets the edge and the highlight */
html.glass .band{ box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.10); }
/* pop-overs: denser and blurrier, so text stays readable over anything */
html.glass :is(.modal, .palette, .toast, .askpanel, .xmenu, .tour-card){
  background:var(--glass-bg-2); -webkit-backdrop-filter:blur(26px) saturate(1.4); backdrop-filter:blur(26px) saturate(1.4);
  border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hi); }
html.glass .askmsg .bub{ -webkit-backdrop-filter:none; backdrop-filter:none; }
/* top-bar controls and the readout are glass pills */
html.glass .topbar :is(.cmdbtn, .iconbtn, .livechip, .btn:not(.primary)){ background:var(--glass-bg-2); border:1px solid var(--glass-edge); box-shadow:inset 0 1px 0 var(--glass-hi); }
html.glass .readout{ gap:6px; }
html.glass .readout .rd{ border-inline-start:none; padding:4px 12px; border-radius:10px; background:var(--glass-bg-2); border:1px solid var(--glass-edge); box-shadow:inset 0 1px 0 var(--glass-hi); }
html.glass .seg{ background:rgba(17,24,32,.06); border-color:var(--glass-edge); box-shadow:none; }
html.glass[data-theme="dark"] .seg{ background:rgba(255,255,255,.06); }
/* hover lift on the outer cards only; nested ones do not jump */
html.glass .content :is(.tile, .board, .repcard):hover{ box-shadow:0 18px 40px rgba(17,24,32,.12), 0 2px 4px rgba(17,24,32,.05), inset 0 1px 0 var(--glass-hi); border-color:var(--glass-edge); }
html.glass[data-theme="dark"] .content :is(.tile, .board, .repcard):hover{ box-shadow:0 20px 44px rgba(0,0,0,.55), inset 0 1px 0 var(--glass-hi); }
html.glass .content :is(.panel, .board) :is(.tile, .board):hover{ transform:none; box-shadow:inset 0 1px 0 var(--glass-hi); }
/* the premium rail: tiles behind the icons, one pill gliding under the active item */
html.glass .rail{ padding:18px 14px 14px; gap:18px; }
html.glass nav{ position:relative; gap:4px; }
html.glass .navlabel{ font-size:10.5px; margin:16px 12px 8px; }
html.glass .navbtn{ min-height:40px; gap:12px; padding:0 8px; border-radius:10px; border:none; box-shadow:none; z-index:1; transition:color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); }
html.glass .navbtn .ic{ box-sizing:border-box; width:30px; height:30px; padding:8px; border-radius:9px; background:var(--rail-tile); color:var(--ink-muted); transition:background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); }
html.glass .navbtn:hover{ background:var(--rail-hover); }
html.glass .navbtn:hover .ic{ transform:scale(1.06); color:var(--ink); }
html.glass .navbtn.active{ background:transparent; color:#fff; font-weight:600; box-shadow:none; }
html.glass .navbtn.active .ic{ background:var(--rail-tile-on); color:#fff; }
html.glass .navbtn.active::before{ display:none; }
html.glass .navbtn .badge{ box-shadow:0 4px 12px rgba(192,0,0,.30); }
html.glass .navbtn.active .badge{ background:rgba(255,255,255,.92); color:var(--brand); box-shadow:none; }
.nav-ink{ display:none; }
html.glass .nav-ink{ display:block; position:absolute; top:0; left:0; width:var(--w,0); height:var(--h,40px); border-radius:10px; background:var(--rail-pill);
  box-shadow:var(--rail-glow), inset 0 1px 0 rgba(255,255,255,.28); opacity:0; pointer-events:none;
  transform:translate(var(--x,0), var(--y,0)); transition:transform 480ms var(--ease), width 480ms var(--ease), opacity var(--dur-micro) var(--ease); will-change:transform; }
html.glass .nav-ink.is-visible{ opacity:1; }
html.glass .nav-ink.no-anim{ transition:none !important; }
html.glass .rail-min .navbtn{ padding:0; }
html.glass .brandmark .cw-mark{ filter:drop-shadow(0 6px 14px rgba(192,0,0,.25)); }
html.glass .site-box{ background:var(--glass-bg-2); border-color:var(--glass-edge); border-radius:10px; box-shadow:inset 0 1px 0 var(--glass-hi); transition:transform var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease); }
html.glass .site-box:hover{ transform:translateY(-1px); box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hi); }
html.glass .rail-foot{ border-top-color:var(--glass-edge); }
html.glass .avatar{ background:var(--glass-bg-2); border-color:var(--glass-edge); }
/* the rail slides in once, on a fresh shell: design/motion.js railIn */
/* sign in: the brand panel's words rise 70 ms apart, the card is dense glass over an orb and rises from its side */
html.glass .login-pane{ position:relative; isolation:isolate; }
html.glass .login-pane::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(520px 520px at 80% 10%, var(--orb-1), transparent 70%), radial-gradient(560px 560px at 20% 100%, var(--orb-2), transparent 70%); }
html.glass .loginbox{ background:var(--glass-bg-2); border-color:var(--glass-edge); box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter:blur(26px) saturate(1.4); backdrop-filter:blur(26px) saturate(1.4); animation:loginIn 640ms var(--ease) both; }
html.glass[dir="rtl"] .loginbox{ animation-name:loginIn-rtl; }
@keyframes loginIn{ from{ opacity:0; transform:translateX(28px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes loginIn-rtl{ from{ opacity:0; transform:translateX(-28px) scale(.98); } to{ opacity:1; transform:none; } }
html.glass .login-band :is(.lb-eyebrow, .lb-head, .lb-sld, .lb-proof){ animation:wordsIn 640ms var(--ease) both; animation-delay:calc(var(--i,0) * 70ms + 120ms); }
@keyframes wordsIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
html.glass .login-band .lb-head{ --i:1; } html.glass .login-band .lb-sld{ --i:2; } html.glass .login-band .lb-proof{ --i:3; }
html.glass .loginbox input:focus{ box-shadow:0 0 0 4px color-mix(in srgb, var(--focus) 22%, transparent); }
/* solid again when the system asks for less transparency */
@media (prefers-reduced-transparency: reduce){
  html.glass :is(.rail, .topbar){ background:var(--rail); background-image:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  html.glass :is(.panel, .tile, .board, .state, .setsec, .tele, .repcard, .vcard, .dsheet, .compliant, .modal, .palette, .toast, .askpanel, .xmenu, .tour-card, .loginbox){ background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none; }
  html.glass #app::before, html.glass #app::after, html.glass .login-pane::before{ display:none; }
}
/* the orbs stand still under reduced motion (the global rule above stops every animation) */
/* html.lite (design/motion.js perfProbe): a machine that cannot hold 40 fps keeps
   the look but not the per-frame costs: still orbs, no blur on the rail and
   top bar (pop-overs keep theirs; they are transient). */
html.lite #app::before, html.lite #app::after{ animation:none; }
html.lite .rail, html.lite .topbar{ -webkit-backdrop-filter:none; backdrop-filter:none; }
html.lite.glass .rail{ background-color:color-mix(in srgb, var(--rail) 88%, transparent); }
html.lite.glass .topbar{ background-color:color-mix(in srgb, var(--rail) 80%, transparent); }