/* OptiVerse UI — shared design system.
   Tokens → shell → components → page layouts → responsive → legacy compat.
   Pages must not carry their own <style> blocks; add here instead. */

:root {
  color-scheme: light;
  --page: #f3f5f9; --surface: #ffffff; --surface-2: #f7f9fc; --surface-3: #eef2f8;
  --ink: #101a2c; --ink-2: #4a5568; --muted: #7c889c;
  --line: #e3e8f0; --line-2: #cfd7e3;
  --accent: #2f4fd8; --accent-ink: #ffffff; --accent-soft: #e8edfd; --accent-hover: #2743bb; --focus: #2f4fd8;
  --shadow: 0 1px 2px rgba(16,26,44,.05), 0 6px 20px rgba(16,26,44,.05);
  --grid: #e6e9ef; --axis: #c3c9d4;
  /* navy sidebar */
  --sb: #0f1b33; --sb-ink: #eef3ff; --sb-ink-2: #b7c5e3; --sb-muted: #7f90b5; --sb-line: rgba(255,255,255,.09);
  --sb-hover: rgba(255,255,255,.07); --sb-active-bg: rgba(255,255,255,.12); --sb-active-ink: #ffffff;
  --mark-a: #2f4fd8; --mark-b: #6b4fe0; --mark-c: #24a3c9;
  /* series (validated categorical palette) */
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s7: #4a3aa7;
  /* status (fixed) */
  --good: #0ca30c; --good-ink: #006300; --good-soft: #e4f6e4;
  --warn: #fab219; --warn-ink: #7a5300; --warn-soft: #fff3d6;
  --serious: #ec835a; --serious-ink: #8a3a1a; --serious-soft: #fde9e1;
  --crit: #d03b3b; --crit-ink: #9d1f1f; --crit-soft: #fbe3e3;
  /* ONU states */
  --st-online: #0ca30c; --st-offline: #d03b3b; --st-los: #4a3aa7; --st-pf: #ec835a; --st-ad: #7c889c;
  --term-bg: #0b1220; --term-ink: #cfe3ff;
  --scroll: #c3ccdb; --scroll-hover: #9aa7bd; --scroll-track: transparent;
  --sb-w: 236px; --sb-w-c: 64px;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --page: #0e131b; --surface: #161d28; --surface-2: #1b2331; --surface-3: #202a3a;
  --ink: #e8eef8; --ink-2: #b4bfd0; --muted: #8492a8;
  --line: #263041; --line-2: #33405a;
  --accent: #7b93ff; --accent-ink: #0e131b; --accent-soft: #232d4a; --accent-hover: #93a7ff; --focus: #7b93ff;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  --grid: #232c3a; --axis: #3a465a;
  --sb: #0b1322; --sb-line: rgba(255,255,255,.08);
  --mark-a: #5b74ff; --mark-b: #8b6cff; --mark-c: #3cc4e6;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s7: #9085e9;
  --good-ink: #5fd35f; --good-soft: #143417;
  --warn-ink: #ffd166; --warn-soft: #3a2f12;
  --serious-ink: #ffb08a; --serious-soft: #3a2117;
  --crit-ink: #ff8585; --crit-soft: #3b1a1a;
  --st-los: #9085e9; --st-ad: #8492a8;
  --scroll: #38455c; --scroll-hover: #4c5c78;
}

* { box-sizing: border-box; }
/* thin, themed scrollbars everywhere */
* { scrollbar-width: thin; scrollbar-color: var(--scroll) var(--scroll-track); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }
.sb { scrollbar-color: rgba(255,255,255,.22) transparent; }
.sb::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); background-clip: content-box; }
.term { scrollbar-color: #36486a transparent; }
.term::-webkit-scrollbar-thumb { background: #36486a; background-clip: content-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: "Plus Jakarta Sans", "IBM Plex Sans", system-ui, sans-serif; margin: 0; letter-spacing: -0.01em; }
a { color: var(--accent); }
button { font: inherit; color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
svg { display: block; }
.ico { width: 16px; height: 16px; flex: 0 0 auto; }
.mono { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 11.5px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: var(--sb-w) 1fr; min-height: 100vh; transition: grid-template-columns .2s ease; }
.app.collapsed { grid-template-columns: var(--sb-w-c) 1fr; }
.sb { background: var(--sb); color: var(--sb-ink); display: flex; flex-direction: column; padding: 12px 10px; gap: 8px; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.sb-head { display: flex; align-items: center; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--sb-line); }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px; min-height: 48px; min-width: 0; flex: 1; text-decoration: none; color: inherit; }
.sb-icon { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--sb-muted); cursor: pointer; padding: 0; }
.sb-icon:hover { background: var(--sb-hover); color: var(--sb-ink); }
.sb-icon .ico { width: 18px; height: 18px; }
.mark { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; background: linear-gradient(135deg, var(--mark-a) 0%, var(--mark-b) 60%, var(--mark-c) 100%); position: relative; }
.mark::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 2.5px solid #fff; border-right-color: transparent; transform: rotate(-30deg); }
/* the ONU sitting in the ring's gap — the same mark the browser tab shows */
.mark::before { content: ""; position: absolute; left: 18.6px; top: 9.1px; width: 4.6px; height: 4.6px; border-radius: 50%; background: #fff; }
.brand-name { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 17px; letter-spacing: -0.02em; white-space: nowrap; }
.brand-sub { display: block; font-size: 10px; color: var(--sb-muted); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav a, .sb-btn { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 9px; color: var(--sb-ink-2); text-decoration: none; font-weight: 500; white-space: nowrap; border: 0; background: transparent; cursor: pointer; width: 100%; text-align: left; }
.nav a:hover, .sb-btn:hover { background: var(--sb-hover); color: var(--sb-ink); }
.nav a.active { background: var(--sb-active-bg); color: var(--sb-active-ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.nav a .ico, .sb-btn .ico { width: 21px; height: 21px; flex: 0 0 21px; }
.nav a .badge { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--warn); color: #3a2a00; }
.nav a .badge.red { background: var(--crit); color: #fff; }
.sb-foot { margin-top: auto; display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--sb-line); padding-top: 8px; }
.sb-foot form { margin: 0; }
.user { display: flex; align-items: center; gap: 10px; padding: 6px 10px; min-width: 0; }
.user div { min-width: 0; flex: 1; }
.user-acts { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.user-acts form { margin: 0; display: flex; }
.user strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: #ffffff; color: var(--sb); display: grid; place-items: center; font-weight: 700; font-size: 11.5px; text-transform: uppercase; }
.user small { display: block; color: var(--sb-muted); font-size: 11px; }
.app.collapsed .sb { padding-inline: 8px; }
.app.collapsed .brand-name, .app.collapsed .brand-sub, .app.collapsed .nav a span, .app.collapsed .sb-btn span, .app.collapsed .nav a .badge, .app.collapsed .user div { display: none; }
.app.collapsed .nav a, .app.collapsed .sb-btn, .app.collapsed .brand, .app.collapsed .user { justify-content: center; padding-inline: 0; }
.app.collapsed .sb-head { flex-direction: column; gap: 6px; }
.app.collapsed .brand { flex: none; padding: 4px 0; }
.app.collapsed .user { flex-direction: column; gap: 6px; }
.app.collapsed .user-acts { flex-direction: column; margin-left: 0; gap: 4px; }
.app.collapsed .nav a.active { box-shadow: none; }

.frame { min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 10px; padding: 8px 18px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; flex-wrap: wrap; min-height: 52px; }
.top h1 { font-size: 16px; font-weight: 700; }
.top .crumb { color: var(--muted); font-size: 12px; }
.top .crumb a { color: inherit; text-decoration: none; }
.top .crumb a:hover { color: var(--accent); }
.search { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; max-width: 380px; margin-left: 10px; padding: 7px 11px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface-2); color: var(--muted); }
.search .ico { width: 16px; height: 16px; flex: 0 0 16px; }
.search input { border: 0; background: transparent; flex: 1; min-width: 0; color: var(--ink); font: inherit; }
.search input:focus { outline: none; }
.search kbd { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 5px; }
.top .spacer { flex: 1; }
.top .acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.top .acts form { margin: 0; display: contents; }
.icon-btn { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--ink-2); position: relative; text-decoration: none; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn .ico { width: 17px; height: 17px; }
.icon-btn .n { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--crit); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
.live { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
.live.stale i { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.hamb { display: none; }
.content { padding: 14px 18px 24px; display: grid; gap: 12px; min-width: 0; align-content: start; }
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 65; }

/* ---------- components ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); min-width: 0; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 0; flex-wrap: wrap; }
.card-h h2, .card-h h3 { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card-h .sub { color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.lnk { font-size: 12px; font-weight: 600; text-decoration: none; }
.card-b { padding: 8px 12px 12px; }
.card-b.flush { padding: 0; }
.card-b.grid { display: grid; gap: 10px; }
.card-b > p:first-child { margin-top: 0; }
.stack { display: grid; gap: 12px; }

.btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 600; font-size: 12.5px; cursor: pointer; text-decoration: none; color: var(--ink); white-space: nowrap; line-height: 1.2; transition: background .12s; }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger { color: var(--crit-ink); border-color: var(--crit-soft); background: var(--crit-soft); }
.btn.danger:hover { background: var(--crit-soft); filter: brightness(.96); }
.btn.success { color: var(--good-ink); border-color: var(--good-soft); background: var(--good-soft); }
.btn.sm { padding: 4px 9px; font-size: 12px; border-radius: 7px; }
.btn.icon { width: 28px; height: 28px; padding: 0; justify-content: center; border-radius: 7px; }
.btn.icon .ico { width: 15px; height: 15px; }
.btn .ico { width: 15px; height: 15px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn.block { width: 100%; justify-content: center; }
.acts-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acts-row form { margin: 0; display: contents; }

.ranges, .tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); flex-wrap: wrap; }
.ranges button, .tabs a, .tabs button { border: 0; background: transparent; padding: 4px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); cursor: pointer; text-decoration: none; }
.ranges button[aria-pressed="true"], .ranges button.active, .tabs a.active, .tabs button.active, .tabs a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.tabs a, .tabs button { padding: 6px 11px; font-size: 12.5px; }

.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 11.5px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.legend [data-series-toggle] { cursor: pointer; }
.legend [data-series-toggle].off { opacity: .4; text-decoration: line-through; }
.chart { width: 100%; height: 200px; touch-action: pan-y; position: relative; }
.chart.tall { height: 230px; }
.chart.short { height: 130px; }
.chart svg { width: 100%; height: 100%; }
.chart text { font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: 10.5px; fill: var(--muted); }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 12px; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; line-height: 1.5; }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 7px; }
.pill.good { background: var(--good-soft); color: var(--good-ink); }
.pill.warn { background: var(--warn-soft); color: var(--warn-ink); }
.pill.serious { background: var(--serious-soft); color: var(--serious-ink); }
.pill.crit { background: var(--crit-soft); color: var(--crit-ink); }
.pill.neutral { background: var(--surface-3); color: var(--ink-2); }
.pill.los { background: var(--surface-3); color: var(--st-los); }
.pill.accent { background: var(--accent-soft); color: var(--accent); }
.count { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--crit-soft); color: var(--crit-ink); }
.count.warn { background: var(--warn-soft); color: var(--warn-ink); }
.count.neutral { background: var(--surface-3); color: var(--ink-2); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 9px; background: var(--line-2); }
.dot.online, .dot.up, .dot.good { background: var(--st-online); }
.dot.offline, .dot.down, .dot.bad { background: var(--st-offline); }
.dot.hot, .dot.warn { background: var(--warn); }
.sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sig i { width: 3px; background: var(--line-2); border-radius: 1px; }
.sig i:nth-child(1) { height: 4px; } .sig i:nth-child(2) { height: 6px; } .sig i:nth-child(3) { height: 9px; } .sig i:nth-child(4) { height: 12px; }
.sig.good i { background: var(--good); } .sig.warn i:nth-child(-n+3) { background: var(--warn); } .sig.bad i:nth-child(-n+2) { background: var(--crit); }
.sigline { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: spin .8s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

.kpi { padding: 10px 12px; display: grid; gap: 3px; position: relative; border-left: 3px solid var(--kc, var(--line-2)); align-content: start; }
.kpi .k-l { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.kpi .k-v { font-family: "Plus Jakarta Sans", sans-serif; font-size: 23px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.kpi .k-v small { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0; font-family: "IBM Plex Sans", sans-serif; }
.kpi .k-s { font-size: 11.5px; color: var(--ink-2); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kpi .k-s a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--line-2); }
.kpi .k-s a:hover { color: var(--accent); border-color: var(--accent); }
.kpi .spark { position: absolute; right: 12px; top: 28px; width: 76px; height: 28px; }
.kpi .spark svg { width: 100%; height: 100%; }
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.kpis.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.alert { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: start; padding: 7px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.alert:first-child { border-top: 0; }
.alert:hover .at { color: var(--accent); }
.alert .ai { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; }
.alert .ai .ico { width: 15px; height: 15px; }
.alert .ai.crit { background: var(--crit-soft); color: var(--crit-ink); } .alert .ai.warn { background: var(--warn-soft); color: var(--warn-ink); } .alert .ai.serious { background: var(--serious-soft); color: var(--serious-ink); } .alert .ai.good { background: var(--good-soft); color: var(--good-ink); } .alert .ai.info { background: var(--accent-soft); color: var(--accent); }
.alert .at { font-weight: 600; font-size: 12.5px; }
.alert .am { color: var(--muted); font-size: 11.5px; margin-top: 1px; overflow-wrap: anywhere; display: block; }
.alert .aw { color: var(--muted); font-size: 11px; white-space: nowrap; }
.alert .as { color: var(--muted); font-size: 11.5px; margin-top: 1px; overflow-wrap: anywhere; display: block; }
.alerts { padding: 4px 14px 12px; }
.alerts.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.alerts.two-col .alert:nth-child(2) { border-top: 0; }
.feed { max-height: 600px; overflow: auto; }
.empty { padding: 18px 12px; text-align: center; color: var(--muted); }
.note { padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; display: flex; gap: 10px; align-items: center; }
.note .ico { flex: 0 0 16px; }
.note.warn { background: var(--warn-soft); color: var(--warn-ink); } .note.crit { background: var(--crit-soft); color: var(--crit-ink); } .note.info { background: var(--accent-soft); color: var(--accent); } .note.good { background: var(--good-soft); color: var(--good-ink); }

/* messages (Django) */
.messages { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.messages li { padding: 8px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 500; border: 1px solid transparent; }
.messages li.success { background: var(--good-soft); color: var(--good-ink); }
.messages li.error { background: var(--crit-soft); color: var(--crit-ink); }
.messages li.warning { background: var(--warn-soft); color: var(--warn-ink); }
.messages li.info, .messages li.debug { background: var(--accent-soft); color: var(--accent); }

.chips { display: inline-flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-size: 11.5px; font-weight: 600; cursor: pointer; color: var(--ink-2); text-decoration: none; line-height: 1.5; }
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed="true"], .chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.chip i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.chip .sig { height: 10px; }
.chip-lbl { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; }

/* forms */
.filters { display: grid; grid-template-columns: minmax(180px, 1.6fr) repeat(6, minmax(90px, 1fr)) auto; gap: 8px; align-items: end; }
.f { display: grid; gap: 4px; min-width: 0; }
.f label, .f > .lbl { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.in, .sel, .ta, .f input:not([type="checkbox"]):not([type="radio"]), .f select, .f textarea { width: 100%; border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; background: var(--surface); color: var(--ink); font: inherit; min-height: 34px; }
.sel, .f select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 26px; }
.sel[multiple] { background-image: none; padding-right: 10px; }
.sel:hover, .f select:hover { border-color: var(--muted); }
option, optgroup { background: var(--surface); color: var(--ink); }
option:checked { background: var(--accent-soft); color: var(--ink); }
/* Chromium 135+: the dropdown list itself becomes stylable */
@supports (appearance: base-select) {
    .sel, .f select { appearance: base-select; background-image: none; padding-right: 10px; display: flex; align-items: center; gap: 8px; }
    .sel::picker-icon, .f select::picker-icon { margin-left: auto; color: var(--muted); transition: transform .15s ease; }
    .sel:open::picker-icon, .f select:open::picker-icon { transform: rotate(180deg); }
    .sel::picker(select), .f select::picker(select) { appearance: base-select; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 30px rgba(16,26,44,.18); padding: 4px; margin-top: 4px; max-height: 320px; }
    option { border-radius: 7px; padding: 6px 9px; font: inherit; color: var(--ink); justify-content: flex-start; text-align: left; }
    option:hover, option:focus { background: var(--surface-2); }
    option:checked { background: var(--accent-soft); font-weight: 600; }
    option::checkmark { order: 1; margin-left: auto; color: var(--accent); }
}
.ta, .f textarea { min-height: 120px; resize: vertical; font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.in:focus, .sel:focus, .ta:focus, .f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.in[disabled], .sel[disabled] { background: var(--surface-2); color: var(--muted); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.form.one { grid-template-columns: 1fr; }
.form .wide { grid-column: 1 / -1; }
.help, .helptext { font-size: 11.5px; color: var(--muted); display: block; }
.errorlist { margin: 0; padding: 0; list-style: none; color: var(--crit-ink); font-size: 11.5px; font-weight: 600; }
.check { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.switch { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--line-2); border: 0; cursor: pointer; flex: 0 0 34px; padding: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.switch[aria-checked="true"] { background: var(--accent); } .switch[aria-checked="true"]::after { left: 16px; }
.switch[disabled] { opacity: .5; cursor: not-allowed; }
.radio-tabs { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.radio-tabs label { padding: 6px 11px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.radio-tabs label.on, .radio-tabs label:has(input:checked) { background: var(--accent-soft); color: var(--accent); }
.radio-tabs input { position: absolute; opacity: 0; width: 0; height: 0; }

/* tables */
.t-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* long lists stay in view: the card fills the screen, the rows scroll inside it
   and the header sticks — no gap under the table */
.t-wrap.viewport { overflow: auto; overscroll-behavior: contain; min-height: 240px; }
.t-wrap.viewport thead th { position: sticky; top: 0; z-index: 2; }
/* report sections: filter tools in the header, same height, rows scroll inside,
   full height when printed */
.rep-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rep-tools .in.sm { width: 168px; }
.sel.sm { min-height: 28px; padding: 3px 24px 3px 9px; font-size: 12px; width: auto; background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%; }
@media print { .rep-tools { display: none; } }
.rep-fixed > .card-b, .rep-fixed > .card-b.t-wrap { height: 316px; overflow: auto; overscroll-behavior: contain; }
.rep-fixed thead th { position: sticky; top: 0; z-index: 2; }
@media print { .rep-fixed > .card-b { height: auto; overflow: visible; } .rep-fixed thead th { position: static; } }

body.fill-page { height: 100vh; overflow: hidden; }
body.fill-page .app { height: 100vh; min-height: 0; }
body.fill-page .frame { min-height: 0; }
body.fill-page .content { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 14px; }
body.fill-page .content > .card.fill-card { flex: 1; display: flex; flex-direction: column; min-height: 0; }
body.fill-page .content > .card.fill-card > .card-b.flush { flex: 1; display: flex; flex-direction: column; min-height: 0; }
body.fill-page .t-wrap.viewport { flex: 1; min-height: 0; }
@media (max-width: 860px) {
  body.fill-page, body.fill-page .app { height: auto; min-height: 100vh; overflow: visible; }
  body.fill-page .content { display: grid; }
  .t-wrap.viewport { min-height: 0; overflow-x: auto; overflow-y: visible; }
  .t-wrap.viewport thead th { position: static; }
}
table.t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.t th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2); }
table.t th a { color: inherit; text-decoration: none; }
table.t th .sort { color: var(--accent); }
table.t td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t tbody tr:hover td { background: var(--surface-2); }
table.t td.r, table.t th.r { text-align: right; }
table.t .acts { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; align-items: center; }
table.t .acts form { margin: 0; display: contents; }
table.t a.rowlink { color: var(--ink); text-decoration: none; font-weight: 600; }
table.t a.rowlink:hover { color: var(--accent); }
table.t td.muted-cell { color: var(--muted); text-align: center; padding: 18px; }
.bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; min-width: 60px; }
.bar i { display: block; height: 100%; background: var(--good); }
.bar.warn i { background: var(--warn); } .bar.bad i { background: var(--crit); } .bar.accent i { background: var(--accent); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.pager:first-child { border-top: 0; border-bottom: 1px solid var(--line); }
.pages { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.pages a, .pages span { min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; text-decoration: none; color: var(--ink-2); font-weight: 600; padding: 0 6px; }
.pages a:hover { background: var(--surface-2); }
.pages span.cur, .pages span.current { background: var(--accent); color: var(--accent-ink); }
.sync { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.sync .track { width: 120px; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.sync .track i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }

.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 14px; }
.kv > div { display: grid; gap: 2px; min-width: 0; }
.kv small { font-size: 10.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.kv b { font-weight: 600; overflow-wrap: anywhere; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.side-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.main-side { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; align-items: start; }
.phead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.phead h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.phead .meta { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 12px; margin-top: 3px; align-items: center; }
.term { background: var(--term-bg); color: var(--term-ink); font-family: "IBM Plex Mono", monospace; font-size: 12px; border-radius: 8px; padding: 12px; white-space: pre-wrap; overflow: auto; max-height: 320px; margin: 0; }

/* overlays: modal, toast, wait */
.modal-bg { position: fixed; inset: 0; background: rgba(6,10,18,.5); z-index: 90; display: grid; place-items: center; padding: 16px; }
.modal { width: min(480px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.35); display: grid; max-height: calc(100vh - 32px); overflow: auto; }
.modal.wide { width: min(760px, 100%); }
.modal-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 0; gap: 10px; }
.modal-h h3 { font-size: 15px; font-weight: 700; }
.modal-b { padding: 12px 16px; display: grid; gap: 10px; }
.modal-f { display: flex; justify-content: flex-end; gap: 8px; padding: 0 16px 14px; flex-wrap: wrap; }
.toast-stack { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 95; display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toast { background: var(--ink); color: var(--page); padding: 9px 14px; border-radius: 9px; font-size: 12.5px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.25); display: flex; gap: 8px; align-items: center; pointer-events: auto; }
.toast .ico { color: var(--good); } .toast.error .ico { color: var(--crit); } .toast.warn .ico { color: var(--warn); }
.wait { position: fixed; inset: 0; z-index: 85; background: rgba(6,10,18,.55); display: grid; place-items: center; padding: 16px; }
.wait-card { width: min(380px, 100%); background: var(--surface); border-radius: 12px; padding: 20px; display: grid; gap: 10px; justify-items: center; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.wait-card h3 { font-size: 15px; }
.wait-card .spin { width: 28px; height: 28px; border-width: 3px; }
.wait-card .bar { width: 100%; }
.wait-card .pct { font-family: "Plus Jakarta Sans", sans-serif; font-size: 20px; font-weight: 800; }
.wait-card .lbl { color: var(--muted); font-size: 12px; }
.subs-warn { position: fixed; top: 12px; right: 12px; z-index: 88; display: grid; gap: 8px; width: min(380px, calc(100vw - 24px)); }
.subs-warn .card { padding: 12px 14px; display: grid; gap: 6px; border-left: 3px solid var(--warn); }
.subs-warn .card.expired { border-left-color: var(--crit); }
.subs-warn h3 { font-size: 13.5px; }
.subs-warn ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 12px; }
.subs-warn li { display: flex; justify-content: space-between; gap: 10px; }
.subs-warn .close { justify-self: end; }

/* ---------- page layouts ---------- */
.dash-main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; align-items: stretch; }
.dash-left { display: grid; gap: 12px; align-content: start; }
.dash-bottom { display: grid; gap: 12px; }
/* the alert column takes its height from the charts beside it: the cards are
   lifted out of the flow, share the column by how much they hold, and scroll */
.dash-side { position: relative; min-height: 360px; }
.dash-side-in { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; }
.dash-side-in > .card { flex: 1 1 0; display: flex; flex-direction: column; min-height: 150px; }
.dash-side-in > .card > .card-b.feed { flex: 1; max-height: none; min-height: 0; overflow: auto; }
.health { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.h-tile { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; display: grid; gap: 3px; border-left-width: 3px; text-decoration: none; color: inherit; background: var(--surface-2); min-width: 0; }
.h-tile:hover { border-color: var(--line-2); }
.h-tile.green { border-left-color: var(--good); } .h-tile.orange { border-left-color: var(--warn); } .h-tile.red { border-left-color: var(--crit); background: var(--crit-soft); }
.h-tile.selected { outline: 2px solid var(--accent); outline-offset: -1px; }
.h-tile .hn { font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-tile .hm { font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; gap: 6px; }
.hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hub a { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 14px; text-decoration: none; color: inherit; }
.hub a:hover { border-color: var(--accent); }
.hub .hi { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.hub .hi .ico { width: 19px; height: 19px; }
.hub h3 { font-size: 13.5px; }
.hub p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.hub .chev { color: var(--muted); width: 16px; height: 16px; }
.rep-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.onu-head { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px; align-items: stretch; }
.faceplate { background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 10px; }
.fp-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.fp-brand { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.leds { display: flex; gap: 14px; flex-wrap: wrap; }
.led { display: grid; justify-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.led i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.led.on i { background: var(--good); box-shadow: 0 0 8px var(--good); } .led.red i { background: var(--crit); box-shadow: 0 0 8px var(--crit); } .led.blue i { background: var(--s1); box-shadow: 0 0 8px var(--s1); }
.stab { display: grid; gap: 6px; }
.stab .big { font-family: "Plus Jakarta Sans", sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.stab .grid { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font-size: 12px; color: var(--muted); }
.stab .grid b { color: var(--ink); text-align: right; }
.auth-form { background: var(--surface-2); border-top: 1px solid var(--line); padding: 12px; display: grid; gap: 10px; }
.auth-form .form { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* tooltip */
.tip { position: fixed; z-index: 80; pointer-events: none; background: var(--ink); color: var(--page); padding: 7px 10px; border-radius: 8px; font-size: 11.5px; box-shadow: 0 6px 20px rgba(0,0,0,.2); max-width: 260px; }
.tip b { display: block; margin-bottom: 4px; font-weight: 600; }
.tip .tr { display: flex; justify-content: space-between; gap: 14px; }
.tip .tr i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 6px; }
.tip .tr.total { margin-top: 4px; border-top: 1px solid rgba(255,255,255,.2); padding-top: 4px; }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-main, .side-main, .main-side { grid-template-columns: 1fr; }
  .dash-side { position: static; min-height: 0; }
  .dash-side-in { position: static; display: grid; gap: 12px; }
  .dash-side-in > .card { flex: none; min-height: 0; }
  .feed { max-height: none; }
  .filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rep-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dev-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dev-strip .dc { border-bottom: 1px solid var(--line); }
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr !important; }
  .sb { position: fixed; left: 0; top: 0; bottom: 0; width: 260px; z-index: 70; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.35); }
  .app.nav-open .sb { transform: none; }
  .app.collapsed .brand-name, .app.collapsed .brand-sub, .app.collapsed .nav a span, .app.collapsed .sb-btn span, .app.collapsed .nav a .badge, .app.collapsed .user div { display: initial; }
  .app.collapsed .user strong { display: block; }
  .app.collapsed .nav a, .app.collapsed .sb-btn, .app.collapsed .brand, .app.collapsed .user { justify-content: flex-start; padding-inline: 10px; }
  .app.collapsed .brand { padding-inline: 6px; flex: 1; }
  .app.collapsed .sb-head, .app.collapsed .user { flex-direction: row; }
  .app.collapsed .user-acts { flex-direction: row; margin-left: auto; }
  .hamb { display: grid; }
  .sb-collapse { display: none; }
  .top { padding-inline: 14px; }
  .search { display: none; }
  .content { padding: 12px 14px 24px; }
  .dash-bottom, .two, .three, .onu-head { grid-template-columns: 1fr; }
  .health { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .auth-form .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ports-grid { grid-template-columns: 1fr; }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dev-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chassis-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .chassis-slot { width: auto; flex: none; display: flex; align-items: baseline; gap: 8px; }
  .chassis-slot small { display: inline; }
}
@media (max-width: 640px) {
  .kpis, .kpis.four, .kpis.five { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi .spark { display: none; }
  .live span, .top .crumb { display: none; }
  .content { padding: 10px 12px 20px; gap: 10px; }
  .health, .rep-cards, .hub, .filters, .form { grid-template-columns: 1fr 1fr; }
  .filters .f.wide { grid-column: 1 / -1; }
  .chart.tall { height: 190px; }
  .alert .aw { display: none; }
  .alert { grid-template-columns: 28px 1fr; }
  .top .acts .btn span.lbl { display: none; }
  .top .acts .btn { padding: 7px 9px; }
  .subs-warn { left: 12px; width: auto; }
  table.t.cards, table.t.cards tbody, table.t.cards tr, table.t.cards td { display: block; }
  table.t.cards thead { display: none; }
  table.t.cards tr { border: 1px solid var(--line); border-radius: 9px; margin: 8px; background: var(--surface); overflow: hidden; }
  table.t.cards td { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--line); align-items: center; }
  table.t.cards td::before { content: attr(data-l); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
  table.t.cards td.r { text-align: left; }
  table.t.cards td .acts { justify-content: flex-start; }
  table.t.cards td:not([data-l]) { grid-template-columns: 1fr; }
  table.t.cards td:not([data-l])::before { content: none; }
  .dev-strip { grid-template-columns: 1fr; }
  .pgrid { grid-template-columns: 1fr; }
  .uc-meters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chassis-ports { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .toolbar { gap: 8px; }
  .seg button { padding: 0 8px; }
}
@media (max-width: 400px) {
  .kpis, .kpis.four, .kpis.five, .health, .hub, .filters, .form, .rep-cards { grid-template-columns: 1fr; }
  table.t.cards td { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { .sb, .top, .tip, .toast-stack, .subs-warn { display: none !important; } .app { grid-template-columns: 1fr !important; } .card { box-shadow: none; break-inside: avoid; } body { background: #fff; } }

/* Django form widgets render class="form-control" */
.form-control { width: 100%; border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; background: var(--surface); color: var(--ink); font: inherit; min-height: 34px; }
.form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
select.form-control { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 26px; }
.inline { display: inline; }


.sel.sm { width: auto; min-height: 30px; padding: 4px 26px 4px 8px; font-size: 12px; }
.pill.lg { font-size: 12px; padding: 3px 10px; }

.kpi .k-v .pill { font-family: "IBM Plex Sans", system-ui, sans-serif; letter-spacing: 0; font-weight: 600; }

.inl { display: inline-flex; align-items: center; gap: 6px; }
.sfp { display: grid; gap: 2px; font-size: 11.5px; white-space: nowrap; }
.sfp .btn.icon { width: 22px; height: 22px; vertical-align: middle; }

.pages button { border: 0; background: transparent; min-width: 28px; height: 28px; border-radius: 7px; font-weight: 600; color: var(--ink-2); cursor: pointer; padding: 0 6px; font: inherit; }
.pages button:hover { background: var(--surface-2); }

/* ONU detail extras */
.led-meta { display: none; }
.led.lan.on i { background: var(--good); box-shadow: 0 0 8px var(--good); }
.rc-view { display: grid; gap: 12px; font-family: "IBM Plex Sans", system-ui, sans-serif; white-space: normal; }
.rc-sec { display: grid; gap: 6px; }
.rc-sec > b { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rc-block { display: grid; gap: 3px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; }
.rc-head { font-weight: 700; }
.rc-row { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 10px; }
.rc-view table.t { color: var(--term-ink); }
.rc-view table.t th { background: rgba(255,255,255,.06); color: rgba(207,227,255,.7); border-color: rgba(255,255,255,.08); }
.rc-view table.t td { border-color: rgba(255,255,255,.08); }
.rc-view table.t tbody tr:hover td { background: rgba(255,255,255,.04); }
.rc-kw { color: #7dd3fc; } .rc-vlan { color: #fbbf24; } .rc-mac { color: #c4b5fd; } .rc-num { color: #86efac; } .rc-ip { color: #67e8f9; } .rc-ok { color: #4ade80; } .rc-bad { color: #fb7185; }
.rc-heading { display: block; margin-top: 6px; color: #fff; font-weight: 700; letter-spacing: .06em; }
.rc-loading { display: grid; justify-items: center; gap: 6px; padding: 18px; font-family: "IBM Plex Sans", system-ui, sans-serif; white-space: normal; }
.rc-loading .spin { width: 22px; height: 22px; border-width: 3px; }
/* dropdown (details-based multi-select) */
details.dd { position: relative; }
details.dd > summary { list-style: none; cursor: pointer; display: flex; align-items: center; }
details.dd > summary::-webkit-details-marker { display: none; }
.dd-menu { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 280px; width: 100%; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 10px; display: grid; gap: 8px; }
.dd-list { max-height: 260px; overflow: auto; display: grid; gap: 2px; }
.dd-list .check { padding: 5px 6px; border-radius: 6px; }
.dd-list .check:hover { background: var(--surface-2); }
.in.sm { min-height: 28px; padding: 3px 8px; font-size: 12px; width: 130px; }
tr.batch-configured td { opacity: .55; }
.nowrap { white-space: nowrap; }
.good-ink { color: var(--good-ink); } .warn-ink { color: var(--warn-ink); } .crit-ink { color: var(--crit-ink); }
.spacer { flex: 1; }
.grow { align-self: stretch; }
.b { font-weight: 700; }
.k-of { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.track { display: block; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.track i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width .3s; }
.track i.good { background: var(--good); } .track i.warn { background: var(--warn); } .track i.crit { background: var(--crit); } .track i.accent { background: var(--s1); }

/* segmented control */
.seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.seg.block { display: flex; }
.seg button { flex: 1; min-height: 28px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.seg button.on { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 1px 2px rgba(16,26,44,.12); }

/* OLT overview: device strip */
.dev-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dev-strip .dc { padding: 11px 14px; display: grid; gap: 3px; align-content: start; min-width: 0; border-right: 1px solid var(--line); }
.dev-strip .dc:last-child { border-right: 0; }
.dev-strip .dc:first-child { grid-template-columns: 40px 1fr; gap: 10px; align-items: center; }
.dev-strip small { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.dev-strip b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-strip b.big { font-family: "Plus Jakarta Sans", sans-serif; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.dev-strip .tline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dev-mark { width: 40px; height: 40px; border-radius: 10px; background: var(--sb); color: #7b93ff; display: grid; place-items: center; }
.dev-mark .ico { width: 21px; height: 21px; }

/* OLT overview: chassis map */
.legend.sm { margin: 0; font-size: 11px; }
.legend .sw { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 3px; display: inline-block; }
.legend .sw.load1 { background: var(--good-soft); border: 1px solid var(--good); }
.legend .sw.weak { background: var(--warn-soft); border: 1px solid var(--warn); }
.legend .sw.down { background: var(--crit-soft); border: 1px solid var(--crit); }
.legend .sw.idle { background: var(--surface-3); border: 1px solid var(--line-2); }
.chassis { display: grid; gap: 8px; }
.chassis-row { display: flex; align-items: center; gap: 10px; }
.chassis-row.up { padding-top: 8px; border-top: 1px dashed var(--line); }
.chassis-slot { width: 120px; flex: 0 0 120px; }
.chassis-slot b { display: block; font-size: 12.5px; }
.chassis-slot small { display: block; font-size: 11px; color: var(--muted); }
.chassis-ports { flex: 1; display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; min-width: 0; }
.chassis-uplinks { display: flex; flex-wrap: wrap; gap: 6px; }
.pt { height: 34px; border-radius: 6px; display: grid; place-items: center; align-content: center; text-decoration: none; border: 1px solid var(--line-2); background: var(--surface-3); color: var(--ink); }
.pt b { font-size: 11px; font-weight: 700; line-height: 1.1; }
.pt small { font-size: 9px; color: var(--muted); line-height: 1.1; }
.pt:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.pt.load1 { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 35%, transparent); }
.pt.load2 { background: color-mix(in srgb, var(--good-soft) 70%, var(--good) 12%); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.pt.load3 { background: color-mix(in srgb, var(--good-soft) 45%, var(--good) 24%); border-color: color-mix(in srgb, var(--good) 60%, transparent); }
.pt.load1 b, .pt.load2 b, .pt.load3 b, .pt.up b { color: var(--good-ink); }
.pt.weak { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.pt.weak b { color: var(--warn-ink); }
.pt.down { background: var(--crit-soft); border-color: color-mix(in srgb, var(--crit) 45%, transparent); }
.pt.down b { color: var(--crit-ink); }
.pt.idle b { color: var(--muted); }
.btn.warn { background: var(--warn); border-color: var(--warn); color: #3a2a00; }
.btn.warn:hover { background: #e9a412; border-color: #e9a412; }
.btn .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-left: 1px; }
.pt.wide { min-width: 96px; padding: 0 10px; }
.pt.wide b { font-size: 10.5px; }

/* PON ports: toolbar, grid */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pon-slot { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.pon-slot:last-child { border-bottom: 0; }
.pon-slot .group-title { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 12.5px; }
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.port-card { display: grid; gap: 6px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-decoration: none; color: inherit; }
.port-card:hover { border-color: var(--accent); }
.port-card.weak { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn-soft) 35%, var(--surface)); }
.port-card.down { border-color: color-mix(in srgb, var(--crit) 40%, transparent); background: color-mix(in srgb, var(--crit-soft) 32%, var(--surface)); }
.pc-h { display: flex; align-items: center; gap: 8px; }
.pc-h .mono { font-size: 12.5px; }
.pc-v { display: flex; align-items: baseline; gap: 6px; }
.pc-v b { font-family: "Plus Jakarta Sans", sans-serif; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.pc-v b + .small { margin-right: 4px; }
.pc-note { font-size: 11.5px; color: var(--ink-2); }
.bar2 { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: var(--surface-3); }
.bar2 i { display: block; height: 100%; }
.bar2 i.good { background: var(--good); } .bar2 i.crit { background: var(--crit); } .bar2 i.empty { background: var(--line-2); }

/* uplink cards */
.ports-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.uplink-card { border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; display: grid; gap: 10px; align-content: start; }
.uc-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uc-h .mono { font-size: 13.5px; }
.uc-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.uc-meters > div { display: grid; gap: 3px; align-content: start; }
.uc-meters small { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.uc-meters b { font-size: 14px; font-weight: 700; }
.uc-meters .wide { grid-column: 1 / -1; color: var(--muted); }
.uc-vlans { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uc-vlans small { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.uc-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 9px; border-top: 1px solid var(--line); }
.uc-f .wide { flex-basis: 100%; }

/* small framed block (single-ONU sync) */
.inset { border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; display: grid; gap: 9px; }
.inset-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.inset.flush { padding: 0; overflow: hidden; }

/* autofind bulk config bar */
.bulk-row { display: grid; grid-template-columns: 132px 150px 150px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 10px; }
.bulk-foot { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px; }
.bulk-foot .check { height: 34px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 8px; font-size: 12.5px; font-weight: 600; }
.bulk-foot .check:has(input:checked) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.bulk-foot [data-authorize-svlan-controls] { flex-wrap: nowrap; }
.bulk-foot [data-authorize-svlan-controls] .sel { width: 148px; }
.bulk-bar { flex: 1; min-width: 140px; height: 6px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.bulk-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .2s ease; }
@media (max-width: 1180px) { .bulk-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .bulk-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* OLT VPN subnets */
.sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.sub-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; }
.sub-row .mono { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-row.added { border-color: var(--accent); background: var(--accent-soft); }
.sub-row.gap { border-color: var(--warn); background: var(--warn-soft); }
.sub-row [data-vpn-remove] { color: var(--crit-ink); }

/* ONU detail */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 12px; align-items: stretch; }
.svc-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.svc-row > .card { display: flex; flex-direction: column; }
.split > .card, .split > .stack > .card { display: flex; flex-direction: column; }
.split > .stack { display: grid; gap: 12px; align-content: start; }
.card-b.grow { flex: 1; }
.card-b.list { display: grid; gap: 0; }
.card-b.list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.card-b.list > div:last-child { border-bottom: 0; }
.card-b.list b { font-weight: 600; text-align: right; }
.dev-wrap { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.dev-wrap .faceplate { align-content: space-between; }
.fp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.rx-big { display: flex; align-items: baseline; gap: 8px; }
.rx-big b { font-family: "Plus Jakarta Sans", sans-serif; font-size: 27px; font-weight: 800; letter-spacing: -0.02em; }
.gauge { position: relative; height: 16px; }
.gauge .bands { position: absolute; inset: 5px 0 auto; display: flex; height: 8px; border-radius: 999px; overflow: hidden; width: 100%; }
.gauge .bands i { display: block; height: 100%; }
.gauge .bands i.crit { width: 17%; background: var(--crit); }
.gauge .bands i.warn { width: 17%; background: var(--warn); }
.gauge .bands i.good { width: 66%; background: var(--good); }
.gauge .mark { position: absolute; top: 0; width: 3px; height: 18px; margin-left: -1px; border-radius: 2px; background: var(--ink); }
.gauge-scale { position: relative; height: 14px; font-size: 11px; }
.gauge-scale span { position: absolute; top: 0; transform: translateX(-50%); }
.gauge-scale span:first-child { transform: none; }
.gauge-scale span:last-child { transform: translateX(-100%); }
.mrows { display: grid; gap: 8px; padding-top: 9px; border-top: 1px solid var(--line); }
.mrow { display: grid; grid-template-columns: 62px minmax(0, 1fr) 84px; gap: 10px; align-items: center; }
.mrow small { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mrow b { text-align: right; font-weight: 600; }
.ring-row { display: flex; align-items: center; gap: 16px; }
.ring { position: relative; width: 92px; height: 92px; flex: 0 0 92px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--good) calc(var(--pct, 0) * 1%), var(--surface-3) 0); }
.ring.warn { background: conic-gradient(var(--warn) calc(var(--pct, 0) * 1%), var(--surface-3) 0); }
.ring.bad { background: conic-gradient(var(--crit) calc(var(--pct, 0) * 1%), var(--surface-3) 0); }
.ring::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--surface); }
.ring b { position: relative; z-index: 1; font-size: 17px; font-weight: 700; }
.ring-row .stab { flex: 1; }
.tiles-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tiles-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile { padding: 11px 13px; display: grid; gap: 3px; align-content: start; }
.tile small { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tile b { font-family: "Plus Jakarta Sans", sans-serif; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.tile-b { align-content: start; }
.tile-b small { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tile-b b { font-size: 13.5px; }
.tile-b .btn { justify-self: start; }
.row-act { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.row-act b { display: block; }
@media (max-width: 1180px) { .split, .svc-row { grid-template-columns: 1fr; } .dev-wrap { grid-template-columns: 1fr; } .tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .tiles-3 { grid-template-columns: 1fr; } .ring-row { flex-wrap: wrap; } }
@media (max-width: 640px) { .tiles-4 { grid-template-columns: 1fr; } .mrow { grid-template-columns: 58px minmax(0, 1fr) 76px; } }

/* login */
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(circle at 15% 10%, rgba(47,79,216,.10), transparent 40%), radial-gradient(circle at 90% 90%, rgba(36,163,201,.10), transparent 40%), var(--page); }
.login { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 420px); gap: 24px; width: min(980px, 100%); align-items: center; }
.login-side { background: var(--sb); color: var(--sb-ink); border-radius: 16px; padding: 36px 34px; display: grid; gap: 18px; align-content: start; min-height: 460px; box-shadow: 0 24px 60px rgba(8,18,40,.25); }
.login-brand { display: flex; align-items: center; gap: 10px; }
.login-side h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
.login-side p { margin: 0; color: var(--sb-ink-2); font-size: 14px; line-height: 1.55; max-width: 44ch; }
.login-points { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 10px; color: var(--sb-ink-2); font-size: 13.5px; }
.login-points li { display: flex; align-items: center; gap: 10px; }
.login-points .ico { width: 18px; height: 18px; color: #8fb4ff; }
.login-foot { margin-top: auto; color: var(--sb-muted); font-family: "IBM Plex Mono", monospace; font-size: 11.5px; }
.login-card { padding: 28px 26px; display: grid; gap: 16px; }
.login-head h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.login-head p { margin: 4px 0 0; }
@media (max-width: 860px) { .login { grid-template-columns: 1fr; } .login-side { min-height: 0; padding: 26px 24px; } }