/* DSE panel 2 — control-room wall. Dark by default, light theme on demand. */
@font-face{font-family:"Plex Ar";src:url(fonts/plex-ar-400.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Ar";src:url(fonts/plex-ar-500.woff) format("woff");font-weight:500 600;font-display:swap}
@font-face{font-family:"Plex Ar";src:url(fonts/plex-ar-700.woff) format("woff");font-weight:700 800;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/plex-mono-500.woff) format("woff");font-weight:400 500;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/plex-mono-600.woff) format("woff");font-weight:600 800;font-display:swap}

:root{
  --ground:#0a111e; --panel:#101a2b; --panel-2:#16223a; --panel-3:#1c2a46; --line:#21304d; --line-2:#2c3e63;
  --ink:#f2f6fc; --muted:#a3b3cc; --dim:#6b7d99;
  --accent:#38bdf8; --accent-ink:#06243a; --accent-soft:rgba(56,189,248,.14);
  --ok:#22e08a; --warn:#ffbe3d; --bad:#ff4d5e; --off:#6b7d99; --info:#38bdf8; --maint:#c084fc;
  --ok-soft:rgba(34,224,138,.13); --warn-soft:rgba(255,190,61,.14); --bad-soft:rgba(255,77,94,.15); --maint-soft:rgba(192,132,252,.14);
  --g1:#38bdf8; --g2:#a78bfa; --g3:#f472b6; --g4:#e2c08d; --g5:#34d399; --g6:#fb923c; --g7:#60a5fa; --g8:#f87171;
  --f-text:"Plex Ar","Segoe UI",Tahoma,"Noto Sans Arabic",sans-serif;
  --f-num:"Plex Mono",Consolas,"Cascadia Mono","Courier New",monospace;
  --r:16px; --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px -18px rgba(0,0,0,.6);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --ground:#eef2f8; --panel:#ffffff; --panel-2:#f4f7fb; --panel-3:#e9eef6; --line:#dbe3ee; --line-2:#c7d2e2;
  --ink:#0d1a2d; --muted:#4e607c; --dim:#8494ad; --accent:#0277c9; --accent-ink:#fff; --accent-soft:rgba(2,119,201,.10);
  --ok:#0d9f5f; --warn:#b97700; --bad:#d92c3f; --off:#8494ad; --info:#0277c9; --maint:#8b46d6;
  --ok-soft:rgba(13,159,95,.10); --warn-soft:rgba(185,119,0,.11); --bad-soft:rgba(217,44,63,.10); --maint-soft:rgba(139,70,214,.10);
  --g1:#0284c7; --g2:#7c3aed; --g3:#db2777; --g4:#a16207; --g5:#059669; --g6:#ea580c; --g7:#2563eb; --g8:#dc2626;
  --shadow:0 1px 2px rgba(15,30,60,.06), 0 8px 24px -16px rgba(15,30,60,.25);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font-family:var(--f-text);font-size:15.5px;line-height:1.5;min-height:100vh;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
:root:not([data-theme="light"]) body{background-image:radial-gradient(1100px 520px at 90% -12%, rgba(56,189,248,.09), transparent 60%),
  radial-gradient(900px 500px at -10% 110%, rgba(167,139,250,.06), transparent 60%);background-attachment:fixed}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
[hidden]{display:none!important}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.ltr{direction:ltr;unicode-bidi:isolate}
.u{color:var(--muted);font-size:.58em;font-weight:400;margin-inline-start:4px;font-family:var(--f-text)}
.muted{color:var(--muted)} .dim{color:var(--dim)} .ok{color:var(--ok)} .warn{color:var(--warn)} .bad{color:var(--bad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- top bar + nav ---------- */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topin{max-width:1900px;margin:0 auto;padding:10px clamp(16px,2vw,28px) 0;display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.mark{width:42px;height:42px;border-radius:12px;border:1px solid var(--line-2);display:grid;place-items:center;background:var(--panel);flex:none}
.brand h1{margin:0;font-size:20px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.brand .sub{font-size:12px;color:var(--muted)}
.grow{flex:1}
.link{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--off);flex:none}
.dot.live{background:var(--ok);animation:ping 2s infinite}
.dot.down{background:var(--bad)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(34,224,138,.55)}70%{box-shadow:0 0 0 10px rgba(34,224,138,0)}100%{box-shadow:0 0 0 0 rgba(34,224,138,0)}}
.clock{font-size:21px;font-weight:500;text-align:end;line-height:1.15}
.clock small{display:block;font-size:11px;color:var(--muted);font-family:var(--f-text)}
.tbtn{border:1px solid var(--line-2);background:var(--panel);border-radius:10px;padding:7px 11px;cursor:pointer;font-size:13.5px;color:var(--muted);
  display:inline-flex;gap:7px;align-items:center;white-space:nowrap;min-height:38px}
.tbtn:hover{color:var(--ink);border-color:var(--dim)}
.tbtn[aria-pressed="true"]{color:var(--ink);border-color:var(--accent);background:var(--accent-soft)}
.tbtn svg{width:17px;height:17px;flex:none}
.tbtn.icon{padding:7px 9px}
.silence{background:var(--bad);border-color:var(--bad);color:#fff;font-weight:700;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{background:#a3121f}}
.who{display:inline-flex;align-items:center;gap:8px}
.role{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted);white-space:nowrap}
.role.admin{color:#ffd88a;border-color:color-mix(in srgb,var(--warn) 55%,transparent);background:var(--warn-soft)}
.role.operator{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:var(--ok-soft)}
:root[data-theme="light"] .role.admin{color:#8a5a00}
nav.tabs{max-width:1900px;margin:0 auto;padding:6px clamp(16px,2vw,28px) 0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{color:var(--muted);text-decoration:none;padding:9px 13px 11px;border-bottom:2.5px solid transparent;white-space:nowrap;font-weight:500;font-size:14.5px;
  display:inline-flex;gap:7px;align-items:center}
nav.tabs a:hover{color:var(--ink)}
nav.tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
nav.tabs a .badge{font-family:var(--f-num);font-size:11px;background:var(--bad);color:#fff;border-radius:999px;padding:0 6px;min-width:18px;text-align:center}
nav.tabs a .badge.w{background:var(--warn);color:#2a1c00}

.wrap{max-width:1900px;margin:0 auto;padding:16px clamp(16px,2vw,28px) 34px;display:flex;flex-direction:column;gap:16px}
.box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.pad{padding:16px 18px}
.h2{font-size:16px;font-weight:700;margin:0}
.lbl{font-size:13px;color:var(--muted)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.banner{border:1px solid color-mix(in srgb,var(--bad) 55%,transparent);background:color-mix(in srgb,var(--bad) 14%,var(--panel));border-radius:12px;padding:11px 15px;font-size:15px}
.banner.info{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 10%,var(--panel));cursor:pointer}
.banner.warn{border-color:color-mix(in srgb,var(--warn) 55%,transparent);background:color-mix(in srgb,var(--warn) 12%,var(--panel))}

/* ---------- admin note + advice ---------- */
.note{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;border-radius:var(--r);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,var(--panel)),var(--panel))}
.note.warn{border-color:color-mix(in srgb,var(--warn) 55%,var(--line));background:linear-gradient(90deg,color-mix(in srgb,var(--warn) 13%,var(--panel)),var(--panel))}
.note.bad{border-color:color-mix(in srgb,var(--bad) 55%,var(--line));background:linear-gradient(90deg,color-mix(in srgb,var(--bad) 13%,var(--panel)),var(--panel))}
.note .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
.note.warn .ic{background:var(--warn-soft);color:var(--warn)} .note.bad .ic{background:var(--bad-soft);color:var(--bad)}
.note .t{font-size:12.5px;color:var(--muted)} .note .x{font-size:17px;font-weight:600;white-space:pre-line}
.advice{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:10px}
.adv{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel);
  border-inline-start:4px solid var(--info)}
.adv.warn{border-inline-start-color:var(--warn)} .adv.bad{border-inline-start-color:var(--bad);background:color-mix(in srgb,var(--bad) 6%,var(--panel))}
.adv b{display:block;font-size:14.5px} .adv p{margin:2px 0 0;color:var(--muted);font-size:13.5px}
.adv .act{margin-inline-start:auto;flex:none}

/* ---------- plant ---------- */
.plantrow{display:grid;grid-template-columns:minmax(320px,.8fr) 1.6fr;gap:16px}
.plant{padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.big{font-size:clamp(46px,5.4vw,76px);font-weight:600;line-height:1;letter-spacing:-1px}
.big .u{font-size:22px}
.pbar{position:relative;height:16px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden}
.pbar .seg{position:absolute;top:0;bottom:0;transition:width .6s ease, inset-inline-start .6s ease}
.pbar .cap{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.85}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--muted)}
.legend b{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:6px;vertical-align:-1px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.kpi{background:var(--panel);padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi .v{font-size:22px;font-weight:600;white-space:nowrap}
.kpi .s{font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chartbox{padding:14px 16px 10px;display:flex;flex-direction:column;gap:6px;min-width:0}
.chart{position:relative;height:250px;touch-action:pan-y}
.chart canvas{position:absolute;inset:0;width:100%;height:100%}
.tip{position:absolute;display:none;transform:translateX(-50%);background:var(--panel-3);border:1px solid var(--line-2);border-radius:10px;padding:7px 10px;
  font-size:12.5px;pointer-events:none;white-space:nowrap;font-family:var(--f-num);z-index:2;direction:ltr}

/* ---------- generator cards ---------- */
.gens{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,430px),1fr));gap:16px}
.gen{position:relative;display:flex;flex-direction:column;overflow:hidden;border-top:3px solid var(--off)}
.gen[data-state="running"]{border-top-color:var(--ok)} .gen[data-state="warning"]{border-top-color:var(--warn)}
.gen[data-state="alarm"]{border-top-color:var(--bad);box-shadow:0 0 0 1px color-mix(in srgb,var(--bad) 45%,transparent),var(--shadow)}
.ghead{display:flex;align-items:center;gap:8px;padding:13px 16px 8px;flex-wrap:wrap}
.ghead h3{margin:0;font-size:18px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.swatch{width:11px;height:11px;border-radius:3px;flex:none}
.chip{font-size:11.5px;color:var(--muted);border:1px solid var(--line-2);border-radius:7px;padding:1px 7px;white-space:nowrap}
.svc{font-size:12px;font-weight:700;border-radius:999px;padding:2px 10px;white-space:nowrap}
.svc.standby{color:var(--info);background:var(--accent-soft)} .svc.maintenance{color:var(--maint);background:var(--maint-soft)} .svc.broken{color:var(--bad);background:var(--bad-soft)}
.pill{font-size:13px;font-weight:700;padding:3px 12px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted);white-space:nowrap}
.gen[data-state="running"] .pill{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:var(--ok-soft)}
.gen[data-state="warning"] .pill{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:var(--warn-soft)}
.gen[data-state="alarm"] .pill{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:var(--bad-soft);animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.55}}
.svcline{margin:0 16px 6px;padding:7px 11px;border-radius:9px;font-size:13px;background:var(--maint-soft);color:var(--ink);border:1px dashed color-mix(in srgb,var(--maint) 50%,transparent)}
.svcline.broken{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 50%,transparent)}
.svcline.standby{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.gbody{display:grid;grid-template-columns:1fr 210px;gap:8px 14px;padding:4px 16px 8px;align-items:center}
.side{display:flex;flex-direction:column;gap:1px}
.meter{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:5px 0;border-bottom:1px dashed var(--line)}
.meter:last-child{border-bottom:0}
.meter .v{font-size:17px;font-weight:600}
.meter .v.bad{color:var(--bad)} .meter .v.warn{color:var(--warn)}
.dial{display:flex;flex-direction:column;align-items:center;gap:2px}
.gauge{position:relative;width:210px;height:160px}
.gauge svg{width:100%;height:100%}
.gauge .read{position:absolute;inset:auto 0 30px 0;text-align:center}
.gauge .pct{font-size:36px;font-weight:600;line-height:1}
.gauge .pct small{font-size:16px;margin-inline-start:2px}
.gauge .read .lbl{font-size:11px}
.kw{font-size:15px;color:var(--muted)} .kw b{color:var(--ink);font-size:17px}
.loadtag{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:3px 12px}
.loadtag i{width:8px;height:8px;border-radius:50%;background:var(--off)}
.loadtag.on{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:var(--ok-soft)}
.loadtag.on i{background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft)}
.bars{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;padding:2px 16px 8px}
.bar{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--muted)}
.bar .t{display:flex;justify-content:space-between}
.bar .tr{height:6px;border-radius:999px;background:var(--panel-2);overflow:hidden}
.bar .tr i{display:block;height:100%;border-radius:999px;background:var(--accent);transition:width .6s}
.phases{padding:0 16px 10px}
.phases table{width:100%;border-collapse:collapse;font-size:14px;background:var(--panel-2);border-radius:10px;overflow:hidden}
.phases th{font-weight:500;color:var(--muted);font-size:12px;padding:6px 8px;text-align:center}
.phases td{padding:6px 8px;text-align:center;font-family:var(--f-num);border-top:1px solid var(--line)}
.phases td:first-child{text-align:start;font-family:var(--f-text);color:var(--muted);font-size:12.5px;white-space:nowrap}
.phases td.bad{color:var(--bad);font-weight:600}
.abar{display:block;height:3px;border-radius:2px;background:var(--line);margin-top:3px;overflow:hidden}
.abar i{display:block;height:100%;background:var(--accent);transition:width .6s}
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:2px 16px 8px}
.key{border:1px solid var(--line-2);background:var(--panel-2);border-radius:12px;padding:9px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-weight:600;font-size:13.5px;min-height:58px;color:var(--ink)}
.key svg{width:18px;height:18px}
.key.start{color:var(--ok)} .key.stop{color:var(--bad)} .key.lon{color:var(--accent)} .key.loff{color:var(--warn)}
.key:hover:not(:disabled){border-color:currentColor;background:color-mix(in srgb,currentColor 9%,var(--panel-2))}
.key:disabled{opacity:.35;cursor:not-allowed}
.keys2{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.key2{border:1px solid var(--line-2);background:transparent;border-radius:9px;padding:5px 10px;font-size:12.5px;color:var(--muted);cursor:pointer}
.key2:hover:not(:disabled){color:var(--ink);border-color:var(--dim)} .key2:disabled{opacity:.35;cursor:not-allowed}
.gfoot{display:flex;align-items:flex-end;gap:10px;padding:8px 16px 13px;margin-top:auto;border-top:1px solid var(--line)}
.alerts{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.al{font-size:12.5px;border-radius:8px;padding:3px 9px;background:var(--bad-soft);color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 40%,transparent)}
.al.w{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.al.ok{background:transparent;color:var(--muted);border-color:var(--line-2)}
.spark{width:110px;height:30px;flex:none}
.offline{position:absolute;inset:52px 0 0 0;display:none;place-items:center;background:color-mix(in srgb,var(--panel) 80%,transparent);
  backdrop-filter:blur(2px);z-index:2;text-align:center;padding:20px}
.gen[data-state="offline"] .offline,.gen[data-state="wait"] .offline{display:grid}
/* a generator without communication: compact card at the end of the wall */
.gen[data-state="offline"]{order:5;align-self:start}
.gen[data-state="offline"] .gbody,.gen[data-state="offline"] .bars,.gen[data-state="offline"] .phases,.gen[data-state="offline"] .keys,
.gen[data-state="offline"] .keys2,.gen[data-state="offline"] .svcline,.gen[data-state="offline"] .spark{display:none}
.gen[data-state="offline"] .offline{position:static;background:transparent;backdrop-filter:none;padding:4px 16px 14px;order:2}
.gen[data-state="offline"] .gfoot{order:3}
.gen.svc-off{background:repeating-linear-gradient(135deg,var(--panel),var(--panel) 14px,color-mix(in srgb,var(--maint) 5%,var(--panel)) 14px,color-mix(in srgb,var(--maint) 5%,var(--panel)) 28px)}
.offline .b2{display:flex;flex-direction:column;gap:6px;align-items:center;max-width:320px}
.offline strong{font-size:18px} .offline .err{font-size:12.5px;color:var(--muted);direction:ltr}
.offline .svcbig{font-size:14px;color:var(--maint);font-weight:600}

/* ---------- lower ---------- */
.lower{display:grid;grid-template-columns:1.7fr 1fr;gap:16px}
.evlist{list-style:none;margin:0;padding:0;max-height:420px;overflow:auto}
.evlist li{display:grid;grid-template-columns:auto auto minmax(90px,auto) 1fr;gap:10px;align-items:center;padding:7px 2px;border-bottom:1px solid var(--line);font-size:13.5px}
.evlist .t{color:var(--dim);font-size:12px}
.lv{width:8px;height:8px;border-radius:50%;background:var(--info)}
.lv.warn{background:var(--warn)} .lv.alarm{background:var(--bad)} .lv.cmd{background:var(--maint)}
.evlist .g{color:var(--muted);white-space:nowrap}
.empty{color:var(--dim);text-align:center;padding:24px 8px;font-size:14px}
dl.sys{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:14px}
dl.sys dt{color:var(--muted)} dl.sys dd{margin:0}

/* ---------- forms, tables, pages ---------- */
.pagehead{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.pagehead h2{margin:0;font-size:21px}
.pagehead p{margin:2px 0 0;color:var(--muted);font-size:14px;max-width:900px}
.btn{border:1px solid var(--line-2);background:var(--panel-2);border-radius:10px;padding:8px 15px;cursor:pointer;font-weight:600;font-size:14px;min-height:40px;
  display:inline-flex;align-items:center;gap:7px;justify-content:center;color:var(--ink);text-decoration:none}
.btn:hover:not(:disabled){border-color:var(--dim)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.ghost{background:transparent}
.btn.sm{min-height:32px;padding:5px 11px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.busy{opacity:.7;pointer-events:none}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{font-size:13px;color:var(--muted);font-weight:500}
.help{font-size:12px;color:var(--dim)}
.field .seg{align-self:flex-start}
input[type=text],input[type=password],input[type=number],input[type=date],input:not([type]),select,textarea{
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:10px;padding:9px 11px;min-height:42px;width:100%;color:var(--ink)}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
input[type=checkbox]{width:19px;height:19px;accent-color:var(--accent)}
.switch{display:flex;align-items:center;gap:10px;cursor:pointer;min-height:42px}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px 16px}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:11px;overflow:hidden;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:8px 14px;cursor:pointer;color:var(--muted);font-weight:600;font-size:13.5px;min-height:40px}
.seg button+button{border-inline-start:1px solid var(--line-2)}
.seg button[aria-pressed="true"]{color:var(--ink);background:var(--accent-soft)}
.seg button[data-v="maintenance"][aria-pressed="true"]{color:var(--maint);background:var(--maint-soft)}
.seg button[data-v="broken"][aria-pressed="true"]{color:var(--bad);background:var(--bad-soft)}
.seg button[data-v="ready"][aria-pressed="true"]{color:var(--ok);background:var(--ok-soft)}
.tw{overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{position:sticky;top:0;background:var(--panel-2);color:var(--muted);font-weight:600;font-size:12.5px;text-align:start;padding:9px 11px;white-space:nowrap;z-index:1}
table.t td{padding:8px 11px;border-top:1px solid var(--line);vertical-align:top}
table.t td.n,table.t th.n{text-align:end;font-family:var(--f-num);white-space:nowrap}
table.t tr:hover td{background:color-mix(in srgb,var(--accent) 4%,transparent)}
.tag{font-size:12px;font-weight:600;border-radius:999px;padding:1px 9px;white-space:nowrap;display:inline-block;background:var(--panel-3);color:var(--muted)}
.tag.ok{background:var(--ok-soft);color:var(--ok)} .tag.warn{background:var(--warn-soft);color:var(--warn)} .tag.bad{background:var(--bad-soft);color:var(--bad)}
.tag.maint{background:var(--maint-soft);color:var(--maint)} .tag.info{background:var(--accent-soft);color:var(--accent)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chipb{border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:5px 12px;cursor:pointer;color:var(--muted);font-size:13px;min-height:34px}
.chipb[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.fcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr));gap:16px}
.fcard{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.fcard h3{margin:0;font-size:18px;display:flex;align-items:center;gap:9px}
.fcard .live{font-size:13px;color:var(--muted)}
.maintbar{height:8px;border-radius:999px;background:var(--panel-2);overflow:hidden}
.maintbar i{display:block;height:100%;background:var(--ok)}
.savebar{position:sticky;bottom:12px;z-index:20;display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:14px;
  background:var(--panel-3);border:1px solid var(--accent);box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
.stabs{display:flex;gap:6px;flex-wrap:wrap}
.statgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.stat{padding:13px 15px} .stat .v{font-size:24px;font-weight:600} .stat .s{font-size:12.5px;color:var(--muted)}
.hbars{display:flex;flex-direction:column;gap:3px}
.hbar{height:9px;border-radius:999px;background:var(--panel-2);overflow:hidden;display:flex}
.hbar i{display:block;height:100%}
.qr{background:#fff;padding:10px;border-radius:12px;width:220px;height:220px}
.qr svg{width:100%;height:100%}
.secret{font-family:var(--f-num);font-size:15px;letter-spacing:1px;word-break:break-all;background:var(--panel-2);padding:8px 10px;border-radius:8px}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;z-index:100;background:rgba(3,8,16,.6);backdrop-filter:blur(5px);display:grid;place-items:center;padding:16px}
.dlg{background:var(--panel);border:1px solid var(--line-2);border-radius:18px;padding:22px;width:min(460px,100%);display:flex;flex-direction:column;gap:13px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);max-height:calc(100vh - 32px);overflow:auto}
.dlg h2{margin:0;font-size:19px}
.dlg p{margin:0;color:var(--muted)}
.dlg .err{color:var(--bad);font-size:14px;min-height:1em}
.dlg .acts{display:flex;gap:10px;flex-wrap:wrap}
.dlg .acts .btn{flex:1}
.toasts{position:fixed;bottom:18px;inset-inline:0;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:200;pointer-events:none;padding:0 16px}
.toast{background:var(--panel-3);border:1px solid var(--line-2);border-radius:12px;padding:10px 16px;font-size:14.5px;box-shadow:0 12px 30px -10px rgba(0,0,0,.6);max-width:560px;pointer-events:auto}
.toast.ok{border-color:var(--ok)} .toast.bad{border-color:var(--bad)} .toast.warn{border-color:var(--warn)}
footer{color:var(--dim);font-size:12.5px;text-align:center;padding:4px 0 10px}

/* ---------- responsive ---------- */
@media (max-width:1100px){.plantrow,.lower{grid-template-columns:1fr}}
@media (max-width:640px){
  body{font-size:15px}
  .topin{padding-top:8px;gap:8px}
  .brand .sub,.clock small,.tbtn .t,.link .t{display:none}
  .brand h1{font-size:17px;max-width:38vw}
  .mark{width:36px;height:36px}
  .clock{font-size:16px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .gbody{grid-template-columns:1fr}
  .dial{order:-1}
  .keys{grid-template-columns:repeat(2,1fr)}
  .chart{height:200px}
  .evlist li{grid-template-columns:auto auto 1fr;font-size:13px}
  .evlist li .t{grid-column:1/-1}
  .advice{grid-template-columns:1fr}
  .adv{flex-wrap:wrap}
  .savebar{bottom:8px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}