/* VERBATIM from the approved console mockup (qa-shots/console-cortex/src/shared.css, 2026-09-25). Do not hand-edit — overrides live in v2-app.css. Loaded only in the new interface. */

/* ── tokens: light is the bare :root, dark redefines only tokens ─────────── */
:root{
  --ground:#f3f2f0; --panel:#ffffff; --panel-2:#f8f7f5; --sunk:#eceae6; --line:#e3e0dc; --line-2:#d6d2cc;
  --ink:#15181c; --ink-2:#4a5059; --ink-3:#858b93; --ink-4:#b3b7bc;
  --accent:#c8102e; --accent-soft:rgba(200,16,46,.09); --accent-line:rgba(200,16,46,.35);
  --crit:#d42a35; --crit-soft:rgba(212,42,53,.10); --warn:#b26a00; --warn-soft:rgba(178,106,0,.11);
  --ok:#17905a; --ok-soft:rgba(23,144,90,.10); --info:#2563c9; --info-soft:rgba(37,99,201,.09);
  --off:#9aa0a6; --off-soft:rgba(154,160,166,.14);
  --rail:#15181c; --rail-ink:#aeb4bc; --rail-hi:#ffffff;
  --shadow:0 1px 2px rgba(21,24,28,.05),0 8px 24px -12px rgba(21,24,28,.12);
  --grid:rgba(21,24,28,.035);
  --f-display:"Syne","Arial Black",system-ui,sans-serif;
  --f-ui:"Instrument Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1); --ease-in:cubic-bezier(.5,0,.75,0);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --ground:#0d1014; --panel:#14181e; --panel-2:#181d24; --sunk:#0f1318; --line:#232a33; --line-2:#2e3743;
  --ink:#e8ebef; --ink-2:#a8b0ba; --ink-3:#6c7581; --ink-4:#46505b;
  --accent:#e0484d; --accent-soft:rgba(224,72,77,.12); --accent-line:rgba(224,72,77,.45);
  --crit:#ff5a5f; --crit-soft:rgba(255,90,95,.13); --warn:#eaa23a; --warn-soft:rgba(234,162,58,.13);
  --ok:#35c97e; --ok-soft:rgba(53,201,126,.12); --info:#5c9dff; --info-soft:rgba(92,157,255,.12);
  --off:#6c7581; --off-soft:rgba(108,117,129,.18);
  --rail:#090b0e; --rail-ink:#7d8691; --rail-hi:#ffffff;
  --shadow:0 1px 0 rgba(255,255,255,.02) inset,0 12px 32px -16px rgba(0,0,0,.7);
  --grid:rgba(255,255,255,.028); color-scheme:dark; } }
:root[data-theme="dark"]{
  --ground:#0d1014; --panel:#14181e; --panel-2:#181d24; --sunk:#0f1318; --line:#232a33; --line-2:#2e3743;
  --ink:#e8ebef; --ink-2:#a8b0ba; --ink-3:#6c7581; --ink-4:#46505b;
  --accent:#e0484d; --accent-soft:rgba(224,72,77,.12); --accent-line:rgba(224,72,77,.45);
  --crit:#ff5a5f; --crit-soft:rgba(255,90,95,.13); --warn:#eaa23a; --warn-soft:rgba(234,162,58,.13);
  --ok:#35c97e; --ok-soft:rgba(53,201,126,.12); --info:#5c9dff; --info-soft:rgba(92,157,255,.12);
  --off:#6c7581; --off-soft:rgba(108,117,129,.18);
  --rail:#090b0e; --rail-ink:#7d8691; --rail-hi:#ffffff;
  --shadow:0 1px 0 rgba(255,255,255,.02) inset,0 12px 32px -16px rgba(0,0,0,.7);
  --grid:rgba(255,255,255,.028); color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:14px/1.45 var(--f-ui);-webkit-font-smoothing:antialiased;overflow:hidden;
  transition:background .35s var(--ease),color .35s var(--ease)}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}

/* ── shell ─────────────────────────────────────────────────────────────── */
.app{display:grid;grid-template-columns:56px 1fr;grid-template-rows:52px 1fr;height:100%}
.rail{grid-row:1/3;background:var(--rail);position:relative;z-index:30;width:56px;transition:width .28s var(--ease);overflow:hidden;
  display:flex;flex-direction:column;padding:10px 0}
.rail:hover,.rail:focus-within{width:212px;box-shadow:8px 0 32px -12px rgba(0,0,0,.5)}
.brand{display:flex;align-items:center;gap:18px;padding:4px 14px 18px;color:var(--rail-hi);white-space:nowrap}
.brand svg{flex:none}
.brand img.em{flex:none;width:32px;height:32px;border-radius:50%}
.brand img.wm{display:block;height:13px;width:auto}
.brand b{font:800 15px/1 var(--f-display);letter-spacing:.02em}
.brand small{display:block;font:500 10px/1.2 var(--f-mono);color:var(--rail-ink);letter-spacing:.12em;text-transform:uppercase;margin-top:4px}
.nav{position:relative;display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:22px;height:40px;padding:0 18px;color:var(--rail-ink);text-decoration:none;white-space:nowrap;font-weight:500;
  transition:color .2s}
.nav a:hover,.nav a.on{color:var(--rail-hi)}
.nav a svg{flex:none;width:20px;height:20px}
.nav a .cnt{margin-left:auto;font:600 10px/1 var(--f-mono);background:var(--accent);color:#fff;border-radius:9px;padding:3px 6px}
.nav-ind{position:absolute;left:0;width:3px;height:24px;background:var(--accent);border-radius:0 2px 2px 0;transition:transform .35s var(--ease);box-shadow:0 0 12px var(--accent)}
.rail-foot{margin-top:auto;padding:0 18px;color:var(--rail-ink);font:500 10px/1.5 var(--f-mono);white-space:nowrap;letter-spacing:.06em;opacity:0;transition:opacity .2s}
.rail:hover .rail-foot,.rail:focus-within .rail-foot{opacity:1}

.top{grid-column:2;display:flex;align-items:center;gap:14px;padding:0 20px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel) 82%,transparent);
  backdrop-filter:blur(10px);z-index:20;min-width:0}
.crumb{display:flex;align-items:center;gap:8px;font:500 12px/1 var(--f-mono);color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;min-width:0}
.crumb b{color:var(--ink);font-weight:600}
.site-sw{display:flex;gap:2px;background:var(--sunk);border:1px solid var(--line);border-radius:7px;padding:2px}
.site-sw button{border:0;background:none;padding:5px 10px;border-radius:5px;font:600 12px/1 var(--f-ui);color:var(--ink-3);transition:background .2s,color .2s}
.site-sw button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.search{margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel-2);border-radius:7px;height:32px;padding:0 10px;
  color:var(--ink-3);min-width:0;width:260px;font-size:13px}
.search kbd{margin-left:auto;font:500 10px/1 var(--f-mono);border:1px solid var(--line-2);border-radius:4px;padding:3px 5px;color:var(--ink-3)}
.stream{display:flex;align-items:center;gap:8px;font:500 11px/1 var(--f-mono);color:var(--ink-2);white-space:nowrap;border:1px solid var(--line);border-radius:7px;height:32px;padding:0 10px}
.led{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 var(--ok);flex:none}
.led.live{animation:beat 1.8s var(--ease) infinite}
.led.crit{background:var(--crit)} .led.warn{background:var(--warn)} .led.off{background:var(--off)}
@keyframes beat{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.ctrls{display:flex;gap:4px}
.ib{width:32px;height:32px;border:1px solid var(--line);background:var(--panel-2);border-radius:7px;display:grid;place-items:center;color:var(--ink-2);transition:border-color .2s,color .2s,background .2s}
.ib:hover{border-color:var(--line-2);color:var(--ink)}
.ib.on{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
.ib svg{width:16px;height:16px}
.btn-trig{height:32px;border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent);border-radius:7px;padding:0 10px;font:600 12px/1 var(--f-ui);white-space:nowrap}
.btn-trig:hover{background:var(--accent);color:#fff}

main{grid-column:2;overflow:auto;position:relative;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:32px 32px}
.screen{padding:22px 24px 40px;max-width:1520px;margin:0 auto}
.screen.enter>*{animation:rise .55s var(--ease) both}
.screen.enter>*:nth-child(2){animation-delay:.05s}.screen.enter>*:nth-child(3){animation-delay:.1s}.screen.enter>*:nth-child(4){animation-delay:.15s}.screen.enter>*:nth-child(5){animation-delay:.2s}.screen.enter>*:nth-child(6){animation-delay:.25s}
@keyframes rise{from{opacity:.001;transform:translateY(10px)}to{opacity:1;transform:none}}

.h-row{display:flex;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.h-title{font:800 30px/1 var(--f-display);letter-spacing:-.01em;margin:0;text-wrap:balance}
.h-sub{font:500 11px/1 var(--f-mono);color:var(--ink-3);letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.h-meta{margin-left:auto;display:flex;gap:14px;align-items:center;font:500 12px/1 var(--f-mono);color:var(--ink-2);flex-wrap:wrap}
.h-meta span{display:flex;align-items:center;gap:6px}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);min-width:0}
.p-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.p-head h3{margin:0;font:600 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.p-head .aside{margin-left:auto;font:500 11px/1 var(--f-mono);color:var(--ink-3);display:flex;gap:12px;align-items:center}
.p-body{padding:14px 16px}
.grid{display:grid;gap:14px}

/* chips + labels */
.chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:4px;font:600 10.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;border:1px solid transparent}
.chip.ok{color:var(--ok);background:var(--ok-soft)} .chip.crit{color:var(--crit);background:var(--crit-soft)} .chip.warn{color:var(--warn);background:var(--warn-soft)}
.chip.off{color:var(--ink-3);background:var(--off-soft)} .chip.info{color:var(--info);background:var(--info-soft)} .chip.acc{color:var(--accent);background:var(--accent-soft)}
.chip .led{width:6px;height:6px}
.lab{font:600 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* odometer */
.odo{display:inline-flex;overflow:hidden;line-height:1;height:1em;vertical-align:bottom}
.odo .col{display:inline-flex;flex-direction:column;transition:transform .7s var(--ease)}
.odo .col span{height:1em;line-height:1em;text-align:center}
.odo .fix{display:inline-block}
.flash{animation:flash .9s var(--ease)}
@keyframes flash{0%{background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent-line)}100%{background:transparent;box-shadow:0 0 0 1px transparent}}
.flash-ok{animation:flashok .9s var(--ease)}
@keyframes flashok{0%{background:var(--ok-soft)}100%{background:transparent}}

/* ── fleet ─────────────────────────────────────────────────────────────── */
.fleet-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.site{padding:14px 16px 12px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;position:relative;overflow:hidden;cursor:pointer;
  transition:border-color .25s,transform .25s var(--ease)}
.site:hover{border-color:var(--line-2);transform:translateY(-2px)}
.site.alarm{border-color:var(--crit)}
.site.alarm::after{content:"";position:absolute;inset:0;border-radius:8px;box-shadow:inset 0 0 0 1px var(--crit);animation:alarm 1.6s ease-in-out infinite;pointer-events:none}
@keyframes alarm{50%{box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--crit) 40%,transparent)}}
.ring{grid-row:1/4;width:64px;height:64px;position:relative}
.ring svg{width:64px;height:64px;transform:rotate(-90deg)}
.ring .v{position:absolute;inset:0;display:grid;place-items:center;font:600 11px/1 var(--f-mono)}
.site h4{margin:2px 0 0;font:700 15px/1.2 var(--f-ui);text-wrap:balance}
.site .code{font:500 10.5px/1 var(--f-mono);color:var(--ink-3);letter-spacing:.06em}
.site .stats{grid-column:1/3;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.site .stats div{display:flex;flex-direction:column;gap:5px}
.site .stats b{font:600 16px/1 var(--f-mono);font-variant-numeric:tabular-nums}
.site .pulse-dot{position:absolute;top:14px;right:14px}
.fleet-lower{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);margin-top:14px}
@media (max-width:1100px){.fleet-lower{grid-template-columns:1fr}}

/* stream list */
.feed{list-style:none;margin:0;padding:0;max-height:430px;overflow:hidden;position:relative}
.feed li{display:grid;grid-template-columns:3px 64px 1fr auto;gap:12px;align-items:center;padding:9px 16px;border-bottom:1px solid var(--line);
  animation:slidein .5s var(--ease) both}
.feed li .sev{height:100%;min-height:30px;border-radius:2px;background:var(--off)}
.feed li.crit .sev{background:var(--crit)} .feed li.warn .sev{background:var(--warn)} .feed li.ok .sev{background:var(--ok)} .feed li.info .sev{background:var(--info)}
.feed li.crit.unack .sev{animation:stripe 1.4s ease-in-out infinite}
@keyframes stripe{50%{opacity:.35}}
.feed .t{font:500 11px/1.2 var(--f-mono);color:var(--ink-3)}
.feed .m{min-width:0}
.feed .m b{display:block;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed .m span{font:500 11px/1.3 var(--f-mono);color:var(--ink-3)}
@keyframes slidein{from{opacity:.001;transform:translateY(-14px)}to{opacity:1;transform:none}}

.constel svg{width:100%;height:auto;display:block}
.constel .lnk{stroke:var(--line-2);stroke-width:1.2;fill:none;stroke-dasharray:3 6;animation:flow 1.6s linear infinite}
.constel .lnk.hot{stroke:var(--crit);stroke-dasharray:none;animation:none}
@keyframes flow{to{stroke-dashoffset:-18}}
.constel text{fill:var(--ink-2);font:600 10px var(--f-mono);letter-spacing:.06em}

/* ── site ──────────────────────────────────────────────────────────────── */
.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{padding:14px 16px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.kpi .big{font:600 34px/1 var(--f-mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .foot{font:500 11px/1.3 var(--f-mono);color:var(--ink-3)}
.kpi svg.spark{position:absolute;right:12px;top:14px;width:110px;height:34px;overflow:visible}
.site-mid{grid-template-columns:minmax(0,.8fr) minmax(0,2fr);margin-top:14px}
.site-low{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);margin-top:14px;height:calc(100vh - 52px - 262px);min-height:440px}
.site-low>.panel,.site-low>.grid{min-height:0}
.site-low>.panel{display:flex;flex-direction:column}
.site-low>.panel>.p-body{overflow:auto;flex:1;min-height:0}
.site-low>.grid{grid-template-rows:auto minmax(0,1fr)}
.site-low>.grid>.panel:last-child{display:flex;flex-direction:column;min-height:0}
.site-low>.grid>.panel:last-child>.scroll-x{overflow:auto;flex:1;min-height:0}
.hw .gauge{padding:8px 10px}.hw .gauge svg{height:22px}.disks{margin-top:8px}.disk{padding:6px 8px}
@media (max-width:1100px){.site-mid,.site-low{grid-template-columns:1fr;height:auto}.site-low>.panel>.p-body{overflow:visible}}
.donut{display:flex;gap:18px;align-items:center}
.donut svg{width:132px;height:132px;flex:none}
.legend{display:grid;gap:8px;font-size:12.5px;flex:1}
.legend div{display:flex;align-items:center;gap:8px}
.legend i{width:9px;height:9px;border-radius:2px;flex:none}
.legend b{margin-left:auto;font:600 12px var(--f-mono)}
.tl svg{width:100%;height:150px;display:block}
.tl .axis{fill:var(--ink-3);font:500 9.5px var(--f-mono)}

.rec{border:1px solid var(--line);border-radius:7px;margin-bottom:10px;background:var(--panel-2)}
.rec-h{display:flex;align-items:center;gap:10px;padding:10px 12px;flex-wrap:wrap}
.rec-h b{font:700 13px var(--f-mono);letter-spacing:.02em}
.rec-bar{flex:1;min-width:80px;height:5px;border-radius:3px;background:var(--sunk);overflow:hidden}
.rec-bar i{display:block;height:100%;background:var(--ok);transition:width .8s var(--ease)}
.ret{border-top:1px dashed var(--line);padding:10px 12px}
.ret-line{display:flex;gap:10px;flex-wrap:wrap;font:500 11px/1.4 var(--f-mono);color:var(--ink-3);margin-bottom:8px}
.ret-line strong{color:var(--ink);font-weight:600}
table.t{width:100%;border-collapse:collapse;font-size:12.5px}
table.t th{white-space:nowrap;text-align:left;font:600 9.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:7px 8px;border-bottom:1px solid var(--line)}
table.t td{padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
table.t td.n{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:12px}
table.t tr:last-child td{border-bottom:0}
.hbar{display:inline-block;width:64px;height:5px;border-radius:3px;background:var(--sunk);vertical-align:middle;margin-right:8px;overflow:hidden}
.hbar i{display:block;height:100%;background:var(--info);transition:width .8s var(--ease)}
.scroll-x{overflow-x:auto}
.hw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gauge{border:1px solid var(--line);border-radius:7px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;background:var(--panel-2)}
.gauge .row{display:flex;align-items:baseline;gap:8px}
.gauge .row b{font:600 20px/1 var(--f-mono);font-variant-numeric:tabular-nums}
.gauge svg{width:100%;height:28px;overflow:visible}
.disks{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.disk{flex:1;min-width:80px;border:1px solid var(--line);border-radius:6px;padding:8px;font:500 10.5px/1.4 var(--f-mono);color:var(--ink-3);background:var(--panel-2)}
.disk b{display:block;color:var(--ink);font-size:11.5px}

/* services, device list, frames */
.svc-srv{border:1px solid var(--line);border-radius:7px;margin-bottom:10px;background:var(--panel-2);overflow:hidden}
.svc-srv header{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line)}
.svc-srv header b{font:700 12.5px var(--f-mono)}
.svc-srv header span{margin-left:auto;font:500 10.5px var(--f-mono);color:var(--ink-3)}
.svc{display:flex;align-items:center;gap:10px;padding:7px 12px;border-bottom:1px solid var(--line);font-size:12.5px;transition:background .4s}
.svc:last-child{border-bottom:0}
.svc .nm{min-width:0;flex:1}
.svc .nm small{display:block;font:500 10.5px var(--f-mono);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svc.bad{background:var(--crit-soft)}
.dl-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dl-tools input{height:28px;border:1px solid var(--line);background:var(--panel-2);border-radius:6px;padding:0 9px;color:var(--ink);font:500 12px var(--f-ui);width:170px}
.dl-wrap{max-height:calc(100vh - 52px - 150px);min-height:360px;overflow:auto}
.dl tr{transition:background .4s}
.dl tr.bad td{background:var(--crit-soft)} .dl tr.un td{background:var(--off-soft)}
.dl td.st .chip{height:20px}
.dl th{position:sticky;top:0;background:var(--panel);z-index:1}
.frames{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:10px}
.frame{border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--panel-2);position:relative;animation:rise .5s var(--ease) both}
.frame canvas{display:block;width:100%;aspect-ratio:16/9;background:#111}
.frame .fc{padding:7px 9px;display:flex;flex-direction:column;gap:4px}
.frame .fc b{font:600 12px/1.25 var(--f-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame .fc span{font:500 10.5px var(--f-mono);color:var(--ink-3);display:flex;justify-content:space-between;gap:6px}
.frame .tag{position:absolute;left:7px;top:7px;background-color:var(--panel)!important;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.frame.issue{border-color:var(--crit)} .frame.warn{border-color:var(--warn)}
.frame.fresh::after{content:"";position:absolute;inset:0;border-radius:7px;box-shadow:inset 0 0 0 2px var(--accent);animation:fadeout 1.4s var(--ease) forwards;pointer-events:none}
@keyframes fadeout{to{opacity:0}}
.kpi-svc .svc-kpi{display:flex;align-items:center;gap:16px}
.svc-dots{display:grid;gap:5px;font:500 10.5px var(--f-mono);color:var(--ink-3)}
.svc-dots div{display:flex;align-items:center;gap:5px}
.svc-dots i{width:9px;height:9px;border-radius:2px;background:var(--ok);flex:none}
.svc-dots i.bad{background:var(--crit);animation:stripe 1.2s ease-in-out infinite}
.svc-dots span{margin-right:4px;min-width:92px;color:var(--ink-2)}
.svc-dots em{font-style:normal;margin-left:6px;color:var(--ink-3)}
.kpi-svc.bad{border-color:var(--crit)}
.prob-wrap{max-height:250px;overflow:auto}
table.prob td{white-space:normal;vertical-align:top}
table.prob td.sv{width:4px;padding:0}
table.prob td.sv i{display:block;width:3px;min-height:34px;border-radius:2px;background:var(--warn)}
table.prob tr.crit td.sv i{background:var(--crit)} table.prob tr.crit.unack td.sv i{animation:stripe 1.4s ease-in-out infinite}
table.prob small{display:block;font:500 10.5px var(--f-mono);color:var(--ink-3)}
table.prob .ack{padding:4px 8px;font-size:10px}
.site-main{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);margin-top:14px;align-items:start}
.left-col{display:flex;flex-direction:column;gap:14px;height:calc(100vh - 52px - 262px);min-height:600px}
.left-col>.panel{display:flex;flex-direction:column;min-height:0}
.vms-card{flex:0 0 calc(50% - 7px);transition:flex-basis .45s var(--ease)}
.vms-card>.p-body{overflow:auto;flex:1;min-height:0}
.vms-card.collapsed{flex-basis:47px}
.vms-card.collapsed>.p-body{display:none}
.vms-card.collapsed .collapse-btn svg{transform:rotate(180deg)}
.collapse-btn{width:26px;height:26px}.collapse-btn svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.dl-card{flex:1}
.dl-card .dl-wrap{max-height:none;min-height:0;flex:1}
.right-col{align-content:start}
.kpi-cls{gap:6px}.cls-row{display:flex;gap:14px;align-items:center}.cls-row svg{width:76px;height:76px;flex:none}.cls-row .legend{gap:3px;font-size:11.5px}.cls-row .legend b{font-size:11px}
@media (max-width:1100px){.site-main{grid-template-columns:1fr}.left-col{height:auto}.vms-card{flex-basis:auto}.vms-card>.p-body{max-height:480px}.dl-card .dl-wrap{max-height:520px}}
.site-svc{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);margin-top:14px;align-items:start}
@media (max-width:1100px){.site-svc{grid-template-columns:1fr}}

/* ── topology ──────────────────────────────────────────────────────────── */
.topo-wrap{position:relative;height:calc(100vh - 52px - 150px);min-height:460px;overflow:hidden;border-radius:8px}
.topo-wrap svg.topo{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.topo-wrap svg.topo:active{cursor:grabbing}
.edge{fill:none;stroke:var(--line-2);stroke-width:1.2;transition:stroke .5s,opacity .5s}
.edge.up{stroke:color-mix(in srgb,var(--ok) 45%,var(--line-2));stroke-dasharray:2 5;animation:flow 1.3s linear infinite}
.edge.down{stroke:var(--crit);stroke-width:1.8}
.edge.unreach{stroke:var(--ink-4);stroke-dasharray:1 4;opacity:.55}
.node{cursor:pointer}
.node .body{transition:fill .5s,stroke .5s,opacity .5s;stroke-width:1.5}
.node.up .body{fill:var(--panel);stroke:var(--ok)}
.node.down .body{fill:var(--crit);stroke:var(--crit)}
.node.unreach .body{fill:var(--sunk);stroke:var(--ink-4);opacity:.7}
.node.col .body{fill:var(--accent);stroke:var(--accent)}
.node.grp .body{fill:var(--panel-2);stroke:var(--ink-4);stroke-dasharray:3 3}
.node .glyph{fill:var(--ink-2);font:700 8px var(--f-mono);text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:fill .5s}
.node.down .glyph,.node.col .glyph{fill:#fff}
.node .lbl{fill:var(--ink-2);font:500 9.5px var(--f-ui);text-anchor:middle;pointer-events:none;transition:fill .5s,opacity .5s}
.node.unreach .lbl{fill:var(--ink-3);opacity:.7}
.node.down .lbl{fill:var(--crit);font-weight:700}
.node.hl .body{stroke-width:3}
.ripple{fill:none;stroke:var(--crit);stroke-width:2;animation:ripple 1.8s var(--ease) infinite;pointer-events:none;transform-box:fill-box;transform-origin:center}
@keyframes ripple{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
.sweep{fill:none;stroke:var(--ok);stroke-width:2;animation:sweep .9s var(--ease) forwards;pointer-events:none;transform-box:fill-box;transform-origin:center}
@keyframes sweep{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
.particle{fill:var(--ok);pointer-events:none}
.topo-embed{margin-top:14px;display:block}
.topo-embed-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px;padding:0 2px}
.topo-embed-head h3{margin:0;font:600 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.topo-embed-head #tStat{display:flex;gap:6px}
.topo-embed-head .hint{font:500 11px var(--f-mono);color:var(--ink-3)}
.topo-wrap.embed{height:calc(100vh - 52px - 70px);min-height:520px}
.port-panel{position:absolute;right:14px;top:14px;width:min(420px,calc(100% - 28px));max-height:calc(100% - 28px);display:flex;flex-direction:column;z-index:5;animation:ppin .35s var(--ease) both;box-shadow:0 24px 50px -24px rgba(0,0,0,.6)}
@keyframes ppin{from{opacity:.001;transform:translateX(16px)}to{opacity:1;transform:none}}
.port-panel header{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:flex-start}
.port-panel header h4{margin:0;font:700 14px/1.25 var(--f-ui)}
.port-panel header small{display:block;font:500 11px/1.4 var(--f-mono);color:var(--ink-3);margin-top:3px}
.port-panel .pp-sum{display:flex;gap:6px;flex-wrap:wrap;padding:8px 14px;border-bottom:1px solid var(--line)}
.port-panel .pp-body{overflow:auto;flex:1;min-height:0}
.pdot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle}
.pdot.up{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)} .pdot.down{background:var(--crit);box-shadow:0 0 0 3px var(--crit-soft);animation:stripe 1.2s ease-in-out infinite} .pdot.unk{background:var(--ink-4)} .pdot.empty{background:transparent;border:1.5px solid var(--line-2)}
table.ports td{padding:5px 8px} table.ports tr.empty td{color:var(--ink-4)} table.ports tr.upl td{background:var(--info-soft)}
.pbadge{fill:var(--crit)} .pbadge-t{fill:#fff;font:700 8px var(--f-mono);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.drift-chip{border:1px solid var(--warn);background:var(--warn-soft);color:var(--warn);border-radius:7px;padding:6px 10px;font:600 11px/1 var(--f-mono);letter-spacing:.04em;box-shadow:var(--shadow);animation:rise .4s var(--ease)}
.drift{padding:10px 14px;border-bottom:1px solid var(--line);display:grid;gap:3px;animation:slidein .4s var(--ease) both}
.drift b{font:600 13px var(--f-ui)} .drift span{font-size:12px;color:var(--ink-2)} .drift small{font:500 10.5px var(--f-mono);color:var(--ink-3)}
.drift-act{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap} .drift-act .acc{border-color:var(--ok);color:var(--ok)}
table.ports tr.mis td{background:var(--warn-soft)}
.mis-note{display:block;font:500 10.5px/1.4 var(--f-mono);color:var(--warn);margin-top:3px}
.mis-note .ack{padding:2px 6px;font-size:9.5px;margin-left:4px}
.poe-bar{padding:8px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;font:500 11px var(--f-mono);color:var(--ink-3)}
.poe-bar b{color:var(--ink)} .poe-bar i{flex:1;height:5px;border-radius:3px;background:var(--sunk);overflow:hidden} .poe-bar em{display:block;height:100%;background:var(--warn)}
.node .poe-lbl{fill:var(--warn);font:600 8.5px var(--f-mono);text-anchor:middle;pointer-events:none}
.srv-body{padding:12px 14px}
.srv-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.srv-tile{border:1px solid var(--line);border-radius:7px;padding:8px 10px;background:var(--panel-2);display:flex;flex-direction:column;gap:4px}
.srv-tile b{font:600 18px/1 var(--f-mono);font-variant-numeric:tabular-nums}.srv-tile svg{width:100%;height:24px;overflow:visible}
.srv-disk{display:grid;grid-template-columns:110px 1fr 40px 56px;gap:8px;align-items:center;font:500 11.5px var(--f-mono);color:var(--ink-2);margin-bottom:6px}
.srv-disk i{height:6px;border-radius:3px;background:var(--sunk);overflow:hidden}.srv-disk em{display:block;height:100%;transition:width .8s var(--ease)}
.srv-disk b{color:var(--ink);text-align:right}.srv-disk small{color:var(--ink-3)}
.srv-note{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.srv-nic{display:grid;grid-template-columns:12px 44px 1fr auto;gap:8px;align-items:center;font-size:12px;padding:5px 0;border-bottom:1px solid var(--line)}
.srv-nic .mono{font-size:11px;color:var(--ink-3)}
td.bw{min-width:98px}td.bw span{display:block;font-size:11px}td.bw i{display:block;height:4px;border-radius:2px;background:var(--sunk);overflow:hidden;margin-top:3px}td.bw em{display:block;height:100%}
.builder{display:grid;grid-template-columns:280px minmax(0,1fr) 290px;gap:14px;height:calc(100vh - 52px - 150px);min-height:560px}
@media (max-width:1200px){.builder{grid-template-columns:1fr;height:auto}.b-canvas{height:560px}}
.b-left,.b-right{overflow:auto;display:flex;flex-direction:column}
.b-canvas{position:relative;overflow:hidden}.b-canvas svg{width:100%;height:100%;display:block;touch-action:none}
.b-sug{padding:10px 14px;border-bottom:1px solid var(--line);display:grid;gap:3px;animation:slidein .4s var(--ease) both}
.b-sug b{font:600 12.5px/1.3 var(--f-ui)}.b-sug span{font-size:11.5px;color:var(--ink-2)}.b-sug small{font:500 10.5px/1.35 var(--f-mono);color:var(--ink-3)}
.b-un{display:flex;flex-direction:column;gap:6px;padding:10px 14px}
.b-chip{display:flex;gap:8px;align-items:center;border:1px dashed var(--line-2);border-radius:6px;padding:7px 9px;font-size:12.5px;cursor:grab;background:var(--panel-2);user-select:none}
.b-chip .t{font:600 9.5px var(--f-mono);color:var(--ink-3);border:1px solid var(--line-2);border-radius:3px;padding:1px 4px}
.b-help{font-size:11.5px;color:var(--ink-3);padding:10px 14px;line-height:1.5}
.b-tools{gap:6px}.b-tools .ack:disabled{opacity:.4;cursor:default}
.b-save{border:0;background:var(--accent);color:#fff;border-radius:6px;padding:7px 14px;font:600 12px var(--f-ui)}.b-save:disabled{background:var(--sunk);color:var(--ink-3);cursor:default}
.b-node{cursor:grab;transition:transform .6s var(--ease)}
.b-dragging .b-node{transition:none}.b-node.dragging{opacity:.35}
.b-node.tgt-ok .body{stroke:var(--ok);stroke-width:4;filter:drop-shadow(0 0 6px var(--ok))}
.b-node.tgt-bad .body{stroke:var(--crit);stroke-width:4}
.b-node.changed .body{stroke:var(--info);stroke-width:3}
.b-edge{transition:d .6s var(--ease),stroke .4s}.b-edge.fiber{stroke:var(--info);stroke-width:2}.b-edge.wireless{stroke-dasharray:6 5;stroke:var(--warn)}
.b-edge.changed{stroke:var(--info);stroke-width:2.4;stroke-dasharray:4 4;animation:flow 1s linear infinite}
.b-port{fill:var(--ink-3);font:600 8px var(--f-mono);text-anchor:middle;pointer-events:none}
.b-ghost{stroke:var(--accent);stroke-width:2;stroke-dasharray:5 4;pointer-events:none}.b-ghost-dot{fill:var(--accent);opacity:.8;pointer-events:none}
.b-hint{position:absolute;left:50%;top:12px;transform:translate(-50%,-6px);background:var(--panel);border:1px solid var(--line-2);border-radius:7px;padding:7px 12px;font:500 12px var(--f-ui);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;box-shadow:var(--shadow)}
.b-hint.on{opacity:1;transform:translate(-50%,0)}.b-hint.ok{border-color:var(--ok);color:var(--ok)}.b-hint.bad{border-color:var(--crit);color:var(--crit)}
.b-pop{position:absolute;width:240px;background:var(--panel);border:1px solid var(--line-2);border-radius:9px;padding:10px 12px;box-shadow:0 24px 50px -20px rgba(0,0,0,.6);display:grid;gap:6px;animation:rise .25s var(--ease);z-index:6}
.b-pop b{font:600 12.5px var(--f-ui)}.b-pop small{font:500 10.5px var(--f-mono);color:var(--ink-3)}
.b-ports{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}
.b-ports button{border:1px solid var(--line);background:var(--panel-2);border-radius:4px;padding:5px 0;font:600 10.5px var(--f-mono);color:var(--ink-2)}
.b-ports button:hover{border-color:var(--accent);color:var(--accent)}.b-ports button.used{opacity:.35}.b-ports button.seen{border-color:var(--ok);color:var(--ok);background:var(--ok-soft)}
.b-form{padding:12px 14px;display:grid;gap:10px}.b-form h4{margin:0;font:700 14px var(--f-ui)}.b-form small{font:500 11px/1.4 var(--f-mono);color:var(--ink-3)}
.b-form label{display:grid;gap:4px;font:600 10px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.b-form select{height:30px;border:1px solid var(--line);background:var(--panel-2);border-radius:6px;color:var(--ink);font:500 12.5px var(--f-ui);padding:0 8px;text-transform:none;letter-spacing:0}
.topo-hud{position:absolute;left:14px;top:14px;display:flex;gap:8px;flex-wrap:wrap;pointer-events:none}
.topo-hud>*{pointer-events:auto}
.seg{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:2px;box-shadow:var(--shadow)}
.seg button{border:0;background:none;padding:6px 10px;border-radius:5px;font:600 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.seg button.on{background:var(--ink);color:var(--panel)}
.topo-legend{position:absolute;left:14px;bottom:14px;background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:9px 12px;display:flex;gap:14px;flex-wrap:wrap;
  font:500 11px/1 var(--f-mono);color:var(--ink-2);box-shadow:var(--shadow);max-width:calc(100% - 200px)}
.topo-legend span{display:flex;align-items:center;gap:6px}
.minimap{position:absolute;right:14px;bottom:14px;width:180px;height:120px;background:var(--panel);border:1px solid var(--line);border-radius:7px;box-shadow:var(--shadow);overflow:hidden}
.minimap svg{width:100%;height:100%}
.tip{position:fixed;z-index:60;pointer-events:none;background:var(--panel);border:1px solid var(--line-2);border-radius:8px;box-shadow:0 18px 40px -16px rgba(0,0,0,.45);
  padding:10px 12px;min-width:220px;max-width:300px;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s var(--ease)}
.tip.on{opacity:1;transform:none}
.tip h5{margin:0 0 6px;font:700 13px/1.25 var(--f-ui)}
.tip dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:8px 0 0;font:500 11px/1.3 var(--f-mono)}
.tip dt{color:var(--ink-3)} .tip dd{margin:0;text-align:right}
.topo-side{position:absolute;right:14px;top:14px;width:270px;max-height:calc(100% - 160px);overflow:auto}
.cause{padding:10px 12px;border-bottom:1px solid var(--line);font-size:12.5px;animation:slidein .45s var(--ease) both}
.cause b{display:block}
.cause span{font:500 11px/1.4 var(--f-mono);color:var(--ink-3)}

/* ── alerts ────────────────────────────────────────────────────────────── */
.al-grid{grid-template-columns:minmax(0,1fr) 320px}
@media (max-width:1100px){.al-grid{grid-template-columns:1fr}}
.inc{display:grid;grid-template-columns:4px 1fr auto;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .2s;animation:slidein .5s var(--ease) both}
.inc:hover{background:var(--panel-2)}
.inc .sev{border-radius:2px;background:var(--off)}
.inc.crit .sev{background:var(--crit)} .inc.warn .sev{background:var(--warn)} .inc.ok .sev{background:var(--ok)}
.inc.crit.unack .sev{animation:stripe 1.4s ease-in-out infinite}
.inc h4{margin:0 0 4px;font:600 14px/1.3 var(--f-ui)}
.inc .meta{display:flex;gap:12px;flex-wrap:wrap;font:500 11px/1.3 var(--f-mono);color:var(--ink-3)}
.inc .right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.ack{border:1px solid var(--line-2);background:var(--panel);border-radius:6px;padding:5px 10px;font:600 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.ack:hover{border-color:var(--accent);color:var(--accent)}
.ack.done{border-color:transparent;background:var(--ok-soft);color:var(--ok);cursor:default}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:6px 10px;font:600 11px/1 var(--f-mono);color:var(--ink-3)}
.filters button.on{border-color:var(--ink);color:var(--ink)}
.bars{display:flex;align-items:flex-end;gap:3px;height:90px}
.bars i{flex:1;background:var(--info);border-radius:2px 2px 0 0;transition:height .6s var(--ease);min-height:2px}
.bars i.crit{background:var(--crit)}

.drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--panel);border-left:1px solid var(--line);z-index:50;
  transform:translateX(102%);transition:transform .42s var(--ease);box-shadow:-24px 0 60px -30px rgba(0,0,0,.6);display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer header{padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer header h2{margin:8px 0 6px;font:700 19px/1.25 var(--f-ui)}
.drawer .body{padding:16px 20px;overflow:auto;flex:1}
.tline{list-style:none;margin:0;padding:0 0 0 18px;border-left:1px solid var(--line-2)}
.tline li{position:relative;padding:0 0 16px 6px;animation:slidein .4s var(--ease) both}
.tline li::before{content:"";position:absolute;left:-23px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--panel);border:2px solid var(--ink-3)}
.tline li.crit::before{border-color:var(--crit)} .tline li.ok::before{border-color:var(--ok)} .tline li.info::before{border-color:var(--info)}
.tline time{font:500 11px var(--f-mono);color:var(--ink-3);display:block}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:45;opacity:0;pointer-events:none;transition:opacity .35s}
.scrim.on{opacity:1;pointer-events:auto}

/* toasts + palette */
.toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:70;width:min(340px,calc(100% - 36px))}
.toast{background:var(--panel);border:1px solid var(--line-2);border-left:3px solid var(--crit);border-radius:7px;padding:10px 12px;box-shadow:0 16px 32px -16px rgba(0,0,0,.5);
  animation:toastin .45s var(--ease) both;font-size:12.5px}
.toast.ok{border-left-color:var(--ok)}
.toast b{display:block;margin-bottom:2px}
.toast span{font:500 11px var(--f-mono);color:var(--ink-3)}
.toast.out{animation:toastout .35s var(--ease-in) forwards}
@keyframes toastin{from{opacity:.001;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes toastout{to{opacity:0;transform:translateX(24px)}}
.pal{position:fixed;inset:0;z-index:80;display:grid;place-items:start center;padding-top:14vh;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s}
.pal.on{opacity:1;pointer-events:auto}
.pal-box{width:min(560px,calc(100% - 32px));background:var(--panel);border:1px solid var(--line-2);border-radius:10px;box-shadow:0 30px 80px -30px rgba(0,0,0,.7);overflow:hidden;
  transform:translateY(-8px) scale(.98);transition:transform .25s var(--ease)}
.pal.on .pal-box{transform:none}
.pal input{width:100%;border:0;border-bottom:1px solid var(--line);background:none;padding:14px 16px;font:500 15px var(--f-ui);color:var(--ink);outline:none}
.pal ul{list-style:none;margin:0;padding:6px;max-height:320px;overflow:auto}
.pal li{padding:9px 10px;border-radius:6px;display:flex;gap:10px;align-items:center;cursor:pointer;font-size:13px}
.pal li.sel,.pal li:hover{background:var(--accent-soft)}
.pal li span{margin-left:auto;font:500 10.5px var(--f-mono);color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}

.offline-banner{display:none;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--crit);background:var(--crit-soft);border-radius:8px;margin-bottom:14px;color:var(--crit);font-weight:600;font-size:13px}
.offline-banner.on{display:flex;animation:rise .4s var(--ease)}
.offline-banner span{font:500 11px var(--f-mono);color:var(--ink-2);font-weight:500}

@media (max-width:760px){
  .app{grid-template-columns:0 1fr}.rail{display:none}
  .top{grid-column:1/3;padding:0 12px;gap:8px}.search{display:none}.crumb{display:none}
  main{grid-column:1/3}.screen{padding:16px}
  .h-title{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}