/* SurfSpot NOC — Precision Monitoring. v3 design (IBM Plex, navy/blue/green). */

@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url(/static/fonts/IBMPlexSans-Regular.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url(/static/fonts/IBMPlexSans-Medium.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url(/static/fonts/IBMPlexSans-SemiBold.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url(/static/fonts/IBMPlexSans-Bold.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url(/static/fonts/IBMPlexMono-Regular.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url(/static/fonts/IBMPlexMono-Medium.woff2) format('woff2'); }

:root {
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --navy: #0C1430; --brand: #33449C; --brand-d: #1F2C70; --green: #7FD67B; --green-d: #2E8B3A;
  --ack: #C2410C; --ack-h: #A3360A;
  --radius: 10px;
  /* light */
  --bg: #F4F6FB; --panel: #FFFFFF; --panel2: #F7F8FC; --line: #DDE2EE; --line2: #EEF1F6;
  --text: #0F1830; --text2: #3A4458; --muted: #5B6478; --faint: #6B7488;
  --head-bg: #FFFFFF; --head-line: #DDE2EE; --nav: #4A5468; --nav-on: #0F1830; --nav-bar: #33449C; --brand-tag: #2E8B3A;
  --ctx-bg: #FFFFFF; --input-bg: #FFFFFF; --input-bd: #C9D0E0; --chip-bg: #E6EAF4;
  --soft: #E4E8F7; --soft-fg: #1F2C70; --sel: #F3F5FD; --link: #33449C;
  --up: #2E9B3A; --up-fg: #1D6B2A; --up-bg: #E9F7EC; --up-bd: #A7DDB2;
  --down: #E5484D; --down-fg: #B42318; --down-bg: #FDECEC; --down-bd: #F3B4B4;
  --warn: #D69E00; --warn-fg: #8A5300; --warn-bg: #FEF6DA; --warn-bd: #F3D89A;
  --paused: #8A93A8; --unk: #A0A8BC; --acked: #E07B39;
  --accent: #33449C; --jit: #8B5CF6;
  --g0: #16A34A; --g1: #65A30D; --g2: #CA8A04; --g3: #EA580C; --g4: #DC2626;
  --shadow: 0 1px 2px rgba(15,24,48,.06), 0 4px 16px rgba(15,24,48,.05);
  --tip-bg: #0F1830; --tip-fg: #F4F6FB;
  color-scheme: light;
}
[data-theme=dark] {
  --bg: #0A1022; --panel: #111A38; --panel2: #0E1630; --line: #1E2A4D; --line2: #172246;
  --text: #E6EBF7; --text2: #C9D2EE; --muted: #8E9AC4; --faint: #7D89B3;
  --head-bg: #0E1630; --head-line: #1E2A4D; --nav: #A7B2D3; --nav-on: #FFFFFF; --nav-bar: #7FD67B; --brand-tag: #7FD67B;
  --ctx-bg: #0B1228; --input-bg: #16204A; --input-bd: #253366; --chip-bg: #16204A;
  --soft: #1B2757; --soft-fg: #C5D1FF; --sel: #16204A; --link: #9DB0FF;
  --up: #4CB849; --up-fg: #6EE07A; --up-bg: rgba(76,184,73,.12); --up-bd: rgba(76,184,73,.45);
  --down: #F05252; --down-fg: #FF9C9C; --down-bg: rgba(240,82,82,.14); --down-bd: rgba(240,82,82,.5);
  --warn: #FACC15; --warn-fg: #FCD98A; --warn-bg: rgba(250,204,21,.10); --warn-bd: rgba(250,204,21,.45);
  --paused: #6B7699; --unk: #56628A; --acked: #F59E0B;
  --accent: #7C93FF; --jit: #C084FC;
  --g0: #4ADE80; --g1: #A3E635; --g2: #FACC15; --g3: #FB923C; --g4: #F87171;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  --tip-bg: #E6EBF7; --tip-fg: #0F1830;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
a { color: var(--link); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
[data-theme=dark] :focus-visible { outline-color: #9DB0FF; }
.hidden { display: none !important; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.err { color: var(--down-fg); font-size: 13px; min-height: 0; }
.err:empty { display: none; }
code { font-family: var(--mono); font-size: .92em; background: var(--soft); color: var(--soft-fg); padding: 1px 5px; border-radius: 5px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.boot { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: #8E9AC4; background: var(--navy); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
.boot img { width: 64px; height: 64px; }
.loading-row { display: flex; align-items: center; gap: 12px; padding: 24px 0; color: var(--muted); }
.loading-row img { width: 28px; height: 28px; }

/* ---------- buttons & inputs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--input-bd);
  background: var(--panel); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .12s, border-color .12s, transform .05s; }
.btn:hover { background: var(--sel); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: #2B3A88; }
.btn.warn { background: var(--ack); border-color: var(--ack); color: #fff; }
.btn.warn:hover { background: var(--ack-h); }
.btn.danger { color: var(--down-fg); border-color: var(--down-bd); background: var(--panel); }
.btn.danger:hover { background: var(--down-bg); }
.btn.danger.solid { background: #B42318; border-color: #B42318; color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--sel); }
.btn.sm { height: 32px; padding: 0 11px; font-size: 13px; border-radius: 8px; }
.btn.xs { height: 26px; padding: 0 8px; font-size: 12px; border-radius: 6px; }
.btn svg { flex: none; }
.icon-btn { width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--input-bd); background: var(--input-bg); color: var(--text2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.icon-btn:hover { border-color: var(--brand); }
.icon-btn.on { color: var(--down-fg); border-color: var(--down-bd); background: var(--down-bg); }

input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], input[type=time], input[type=url], input[type=datetime-local], select, textarea {
  height: 40px; width: 100%; border: 1px solid var(--input-bd); border-radius: 9px; padding: 0 12px; background: var(--input-bg); color: var(--text); font-size: 14px; }
textarea { height: auto; min-height: 120px; padding: 10px 12px; font-family: var(--mono); font-size: 13px; line-height: 1.5; resize: vertical; }
select { padding-right: 28px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--brand); flex: none; margin: 0; }
input[type=color] { width: 56px; height: 40px; padding: 2px; border: 1px solid var(--input-bd); border-radius: 9px; background: var(--input-bg); }
.f { display: block; font-size: 13px; font-weight: 500; color: var(--text2); margin-bottom: 14px; min-width: 0; }
.f > small, .help { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.f > input, .f > select, .f > textarea, .f > .pfx, .f > .seg, .f > .copybox { margin-top: 6px; }
.f > input, .f > select, .f > textarea { display: block; }
.f > .seg { display: inline-flex; }
.f > small.block, .f > div { margin-top: 4px; }
.g-stats > .muted { grid-column: 1 / -1; }
.check { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: 14px; color: var(--text); cursor: pointer; }
.check > span { display: flex; flex-direction: column; }
.check small { color: var(--muted); font-size: 12.5px; }
.check input { margin-top: 1px; }
.check.dis { color: var(--faint); cursor: not-allowed; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.kbd { font-family: var(--mono); font-size: 11px; padding: 1px 6px; border: 1px solid var(--input-bd); border-radius: 5px; color: var(--muted); background: var(--panel); }

/* switch */
.switch { position: relative; display: inline-flex; width: 40px; height: 22px; flex: none; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--input-bd); transition: background .15s; }
.switch span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.switch input:checked + span { background: var(--up); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.switch.red input:checked + span { background: var(--down); }

/* segmented control */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: var(--chip-bg); border: 1px solid var(--input-bd); flex-wrap: wrap; }
.seg button { border: 0; background: transparent; color: var(--nav); font-size: 12.5px; font-weight: 500; padding: 5px 10px; border-radius: 6px; cursor: pointer; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--brand); color: #fff; font-weight: 600; }

/* tags, badges, grades */
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 5px; background: var(--chip-bg); color: var(--text2); white-space: nowrap; vertical-align: middle; }
.tag.ok { background: var(--up-bg); color: var(--up-fg); }
.tag.bad { background: var(--down-bg); color: var(--down-fg); }
.tag.warn { background: var(--warn-bg); color: var(--warn-fg); }
.tag.blue { background: var(--soft); color: var(--soft-fg); }
.tag.dom { background: var(--soft); color: var(--soft-fg); }
.grade { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .3px; padding: 2px 6px; border-radius: 5px; text-transform: uppercase; white-space: nowrap; }
.grade.g0 { background: #DCFCE7; color: #14532D; } .grade.g1 { background: #ECFCCB; color: #365314; } .grade.g2 { background: #FEF9C3; color: #713F12; }
.grade.g3 { background: #FFEDD5; color: #7C2D12; } .grade.g4 { background: #FEE2E2; color: #7F1D1D; }
[data-theme=dark] .grade.g0 { background: #14532D; color: #B7F5C4; } [data-theme=dark] .grade.g1 { background: #365314; color: #D9F99D; }
[data-theme=dark] .grade.g2 { background: #713F12; color: #FDE68A; } [data-theme=dark] .grade.g3 { background: #7C2D12; color: #FFD8B5; }
[data-theme=dark] .grade.g4 { background: #7F1D1D; color: #FFD0D0; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--unk); flex: none; display: inline-block; }
.dot.up { background: var(--up); } .dot.down { background: var(--down); box-shadow: 0 0 0 3px var(--down-bg); } .dot.deg { background: var(--warn); }
.dot.ack { background: var(--acked); } .dot.paused { background: var(--paused); } .dot.wg { background: #7C3AED; }

/* ---------- tooltip ---------- */
#tip { position: fixed; z-index: 1000; max-width: 300px; padding: 7px 10px; border-radius: 8px; background: var(--tip-bg); color: var(--tip-fg); font-size: 12.5px; line-height: 1.4;
  pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity .12s, transform .12s; box-shadow: 0 6px 20px rgba(0,0,0,.25); white-space: pre-line; }
#tip.show { opacity: 1; transform: none; }
#tip b { font-weight: 600; }
.help-i { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--input-bd); color: var(--muted); font-size: 10.5px; font-weight: 700; cursor: help; vertical-align: 1px; margin-left: 4px; flex: none; }

/* ---------- toasts ---------- */
#toasts { position: fixed; z-index: 900; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { pointer-events: auto; max-width: 420px; padding: 11px 14px 11px 12px; border-radius: 10px; background: var(--tip-bg); color: var(--tip-fg); font-size: 13.5px; box-shadow: var(--shadow);
  display: flex; gap: 10px; align-items: flex-start; animation: toastin .18s ease-out; border-left: 4px solid var(--brand); }
.toast.good { border-left-color: var(--up); } .toast.bad { border-left-color: var(--down); } .toast.warn { border-left-color: var(--warn); }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } }

/* ---------- sign-in ---------- */
.auth { min-height: 100vh; display: flex; flex-wrap: wrap; background: #F4F6FB; color: #0F1830; color-scheme: light; }
.auth-hero { flex: 999 1 560px; min-width: 0; position: relative; overflow: hidden; background-color: var(--navy);
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 48px 48px;
  color: #E8ECF7; padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; min-height: 640px; }
.brand-lg { display: flex; align-items: center; gap: 12px; }
.brand-lg img { width: 40px; height: 40px; }
.brand-lg .t { display: flex; flex-direction: column; line-height: 1.25; }
.brand-lg b { font-weight: 700; font-size: 17px; letter-spacing: .2px; }
.brand-lg small { font-size: 11px; letter-spacing: 2px; font-weight: 600; color: var(--green); }
.netmap { position: relative; height: 380px; margin: 24px 0; }
.netmap .ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(127,214,123,.10); }
.netmap .r1 { width: 560px; height: 560px; margin: -280px 0 0 -280px; }
.netmap .r2 { width: 400px; height: 400px; margin: -200px 0 0 -200px; border-color: rgba(127,214,123,.16); }
.netmap .r3 { width: 240px; height: 240px; margin: -120px 0 0 -120px; border: 1px dashed rgba(127,214,123,.30); animation: spin 120s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.netmap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.netmap .lbl { position: absolute; font-family: var(--mono); font-size: 12px; color: #C9D2EE; }
.netmap .lbl.s { font-size: 11px; color: #8E9AC4; }
.netmap .pulse { animation: pulse 2.4s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes pulse { 0% { opacity: .6; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.8); } }
.netmap .flow { animation: dash 1.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -18; } }
.hero-copy { display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.hero-copy h1 { margin: 0; font-size: 44px; line-height: 1.08; font-weight: 600; letter-spacing: -.5px; color: #fff; }
.hero-copy p { margin: 0; font-size: 16px; line-height: 1.55; color: #B8C2E0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chips span { font-size: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #DDE3F5; }
.auth-side { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 48px 24px; gap: 24px; }
.auth-box { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 22px; }
.auth-head { display: flex; flex-direction: column; gap: 6px; }
.auth-head .when { font-family: var(--mono); font-size: 12px; color: #5B6478; letter-spacing: .4px; }
.auth-head h2 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.3px; }
.auth-head p { margin: 0; font-size: 15px; color: #4A5468; }
.auth .tabs2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; background: #E6EAF4; border-radius: 10px; }
.auth .tabs2 button { font-size: 14px; font-weight: 500; padding: 10px; border: 0; border-radius: 7px; background: transparent; color: #4A5468; cursor: pointer; }
.auth .tabs2 button[aria-selected=true] { background: #fff; color: #0F1830; font-weight: 600; box-shadow: 0 1px 2px rgba(15,24,48,.12); }
.auth form { display: flex; flex-direction: column; gap: 16px; }
.auth .f { margin: 0; color: #3A4458; }
.auth input[type=text], .auth input[type=password], .auth input[type=email] { height: 46px; font-size: 15px; border-radius: 10px; border-color: #C9D0E0; background: #fff; color: #0F1830; }
.pfx { display: flex; align-items: stretch; border: 1px solid #C9D0E0; border-radius: 10px; background: #fff; overflow: hidden; }
.pfx:focus-within { outline: 2px solid #33449C; border-color: #33449C; }
.pfx > span { display: flex; align-items: center; padding: 0 12px; background: #F0F2F8; border-right: 1px solid #C9D0E0; font-family: var(--mono); font-size: 13px; color: #4A5468; white-space: nowrap; }
.pfx input { border: 0 !important; border-radius: 0 !important; outline: 0 !important; flex: 1; min-width: 0; }
.pfx button { width: 44px; border: 0; background: transparent; cursor: pointer; color: #5B6478; display: flex; align-items: center; justify-content: center; flex: none; }
.auth .opts { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: #3A4458; }
.auth .opts label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.auth .go { height: 50px; font-size: 15px; border-radius: 10px; }
.auth p.note { display: block; background: none; border: 0; padding: 0; color: #5B6478; }
.auth .note { margin: 0; font-size: 13px; color: #5B6478; line-height: 1.5; }
.auth .sso-btn { height: 48px; border-radius: 10px; font-size: 15px; background: #fff; color: #0F1830; border-color: #C9D0E0; }
.auth .or { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #6B7488; letter-spacing: .5px; }
.auth .or::before, .auth .or::after { content: ''; flex: 1; height: 1px; background: #DDE2EE; }
.statusline { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid #DDE2EE; font-size: 13px; color: #3A4458; }
.statusline .mono { font-size: 12px; color: #5B6478; }
.auth-foot { margin: 0; font-size: 12px; color: #5B6478; text-align: center; max-width: 400px; }
.auth .err { color: #B42318; }
.auth .alert { padding: 11px 13px; border-radius: 10px; font-size: 13.5px; background: #FDECEC; border: 1px solid #F3B4B4; color: #8A1C12; }
.auth .alert.info { background: #EEF2FF; border-color: #C7D0F5; color: #283A8F; }

/* ---------- shell ---------- */
.top { background: var(--head-bg); border-bottom: 1px solid var(--head-line); position: sticky; top: 0; z-index: 50; }
.top-bar { display: flex; align-items: center; gap: 16px; padding: 0 20px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--nav-on); flex: none; cursor: pointer; }
.brand img { width: 36px; height: 36px; }
.brand .t { display: flex; flex-direction: column; line-height: 1.25; }
.brand b { font-weight: 700; font-size: 15px; }
.brand small { font-size: 10px; letter-spacing: 1.6px; font-weight: 600; color: var(--brand-tag); text-transform: uppercase; }
.nav { display: flex; align-items: stretch; height: 60px; gap: 2px; margin-left: 8px; }
.nav a { white-space: nowrap; display: flex; align-items: center; gap: 7px; padding: 0 14px; font-size: 14px; font-weight: 500; color: var(--nav); text-decoration: none; border-bottom: 2px solid transparent; border-top: 2px solid transparent; }
.nav a:hover { color: var(--nav-on); }
.nav a[aria-current=page] { color: var(--nav-on); font-weight: 600; border-bottom-color: var(--nav-bar); }
.nav a .cnt { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 99px; background: var(--down); color: #fff; line-height: 18px; }
.pill { display: flex; align-items: center; gap: 9px; padding: 7px 12px 7px 10px; border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; border: 1px solid; }
.pill.ok { background: var(--up-bg); border-color: var(--up-bd); color: var(--up-fg); }
.pill.bad { background: var(--down-bg); border-color: var(--down-bd); color: var(--down-fg); }
.pill.bad .d { box-shadow: 0 0 0 4px rgba(240,82,82,.25); animation: blink 1.4s ease-in-out infinite; }
.pill.deg { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn-fg); }
.pill.lost { background: #3B0D0D; border-color: #F05252; color: #FFD0D0; }
.pill .d { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.pill.ok .d { background: var(--up); } .pill.bad .d { background: var(--down); } .pill.deg .d { background: var(--warn); }
.pill .sep { width: 1px; height: 14px; background: currentColor; opacity: .25; }
.pill .w { color: var(--warn-fg); }
@keyframes blink { 50% { opacity: .45; } }
.search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border-radius: 9px; background: var(--input-bg); border: 1px solid var(--input-bd); color: var(--muted); width: 240px; position: relative; }
.search:focus-within { border-color: var(--brand); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; height: 36px; padding: 0; outline: none !important; font-size: 13px; color: var(--text); }
.search-res { position: absolute; top: 44px; left: 0; right: 0; min-width: 320px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; z-index: 60; }
.search-res a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--line2); font-size: 13px; }
.search-res a:last-child { border-bottom: 0; }
.search-res a:hover, .search-res a.on { background: var(--sel); }
.search-res .s { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-left: auto; }
.clock { font-family: var(--mono); font-size: 12.5px; color: var(--text2); white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; cursor: default; }
.clock small { font-size: 10.5px; color: var(--muted); letter-spacing: .4px; }
.me-btn { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px 0 4px; border-radius: 999px; border: 1px solid var(--input-bd); background: var(--input-bg); color: var(--text); cursor: pointer; flex: none; }
.me-btn .t { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.me-btn .t b { font-size: 13px; font-weight: 600; }
.me-btn .t small { font-size: 11px; color: var(--muted); }
.av { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; letter-spacing: .3px; }
.av.lg { width: 40px; height: 40px; font-size: 14px; }
.av.soft { background: var(--soft); color: var(--soft-fg); }
.path-tag { font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 7px; background: var(--soft); color: var(--soft-fg); cursor: pointer; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.path-tag.wg { background: rgba(124,58,237,.15); color: #A78BFA; }
.strip { display: flex; align-items: center; gap: 12px; padding: 9px 20px; font-size: 13.5px; flex-wrap: wrap; }
.strip.lost { background: #7F1D1D; color: #FFE4E4; font-weight: 600; }
.strip.info { background: var(--soft); color: var(--soft-fg); }
.strip.upd { background: linear-gradient(90deg, #1F2C70, #33449C); color: #fff; }
.strip.upd .btn { height: 30px; font-size: 13px; }
.strip.upd .btn.ghost { color: #fff; }
.strip.upd .btn.ghost:hover { background: rgba(255,255,255,.12); }
.strip.sound { background: var(--warn-bg); color: var(--warn-fg); cursor: pointer; justify-content: center; font-weight: 600; }
.menu-pop { position: fixed; z-index: 200; min-width: 280px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; }
.menu-pop .hd { display: flex; gap: 10px; align-items: center; padding: 10px; border-bottom: 1px solid var(--line2); margin-bottom: 4px; }
.menu-pop .hd b { display: block; font-size: 14px; }
.menu-pop .hd small { color: var(--muted); font-size: 12px; }
.menu-pop button.mi { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; text-align: left; font-size: 14px; color: var(--text); }
.menu-pop button.mi:hover { background: var(--sel); }
.menu-pop .mi svg { color: var(--muted); }
.menu-pop .lbl { font-size: 11px; font-weight: 700; letter-spacing: .8px; color: var(--faint); padding: 8px 10px 4px; text-transform: uppercase; }
.menu-pop .seg { margin: 0 10px 6px; }
.menu-pop .ft { font-size: 11.5px; color: var(--muted); padding: 8px 10px 4px; border-top: 1px solid var(--line2); margin-top: 4px; }

/* context bar */
.ctx { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--line2); background: var(--ctx-bg); }
.ctx h1 { margin: 0; font-size: 18px; font-weight: 600; }
.ctx .live { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.ctx .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); }
.ctx .live.off i { background: var(--down); }
.ctx label.sel { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--nav); }
.ctx select { height: 36px; width: auto; min-width: 150px; font-size: 13px; }
main.page { padding: 20px; max-width: 1600px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }

/* ---------- dashboard ---------- */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; text-align: left; transition: border-color .12s, transform .12s; }
.kpi:hover { border-color: var(--brand); }
.kpi.sel { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.kpi .k { font-size: 12px; letter-spacing: .6px; color: var(--muted); font-weight: 600; text-transform: uppercase; }
.kpi .v { font-size: 28px; font-weight: 600; font-family: var(--mono); line-height: 1.15; }
.kpi .s { font-size: 12px; color: var(--muted); }
.kpi.up .v { color: var(--up-fg); } .kpi.down .v { color: var(--down-fg); } .kpi.deg .v { color: var(--warn-fg); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.card-h h2 { margin: 0; font-size: 14px; font-weight: 600; }
.card-b { padding: 16px 18px; }
.inc { display: grid; grid-template-columns: 110px minmax(0, 2fr) minmax(0, 2fr) 90px 150px; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line2); font-size: 13px; cursor: pointer; }
.inc:last-child { border-bottom: 0; }
.inc:hover { background: var(--sel); }
.inc .st { font-size: 11px; font-weight: 700; letter-spacing: .5px; padding: 4px 8px; border-radius: 6px; text-align: center; }
.inc .st.down { background: var(--down-bg); color: var(--down-fg); } .inc .st.deg { background: var(--warn-bg); color: var(--warn-fg); } .inc .st.ack { background: rgba(224,123,57,.15); color: var(--acked); }
.inc .nm { display: flex; flex-direction: column; min-width: 0; }
.inc .nm b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inc .nm span { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inc .why { color: var(--text2); overflow: hidden; text-overflow: ellipsis; }
.inc .since { font-family: var(--mono); color: var(--nav); }
.inc .act { text-align: right; }
.inc-more { padding: 9px 16px; font-size: 12.5px; color: var(--muted); text-align: center; }
.all-ok { padding: 18px 16px; display: flex; align-items: center; gap: 12px; color: var(--up-fg); font-weight: 500; }
.grp { display: flex; flex-direction: column; gap: 10px; }
.grp-h { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.grp-h .bar { width: 4px; height: 18px; border-radius: 2px; background: var(--c); flex: none; }
.grp-h h2 { margin: 0; font-size: 15px; font-weight: 600; }
.grp-h .ct { font-size: 13px; color: var(--muted); }
.grp-h .ct.bad { color: var(--down-fg); font-weight: 600; }
.grp-h .snd { margin-left: auto; font-size: 12px; color: var(--muted); }
.grp-h .chev { color: var(--muted); transition: transform .15s; }
.grp.collapsed .chev { transform: rotate(-90deg); }
.grp.collapsed .tiles { display: none; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 12px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; min-width: 0; transition: border-color .12s, transform .08s; position: relative; }
.tile:hover { border-color: var(--accent); }
.tile .tt { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tile .tt b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .h { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile canvas.spark { width: 100%; height: 26px; display: block; }
.tile .m { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; color: var(--nav); min-width: 0; }
.tile .m span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .degr { font-size: 11.5px; color: var(--warn-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.st-down { background: var(--down-bg); border-color: var(--down-bd); }
.tile.st-down.acked { background: rgba(224,123,57,.10); border-color: rgba(224,123,57,.5); }
.tile.deg { background: var(--warn-bg); border-color: var(--warn-bd); }
.tile.st-paused { opacity: .62; }
.tile .lossv { color: var(--down-fg); font-weight: 600; }
/* dense layouts */
body.d-compact .tiles { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
body.d-compact .tile { padding: 8px 10px; gap: 3px; border-radius: 9px; }
body.d-compact .tile .tt b { font-size: 13px; }
body.d-wall .tiles { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 4px; }
body.d-wall .tile { padding: 6px 8px; gap: 1px; border-radius: 7px; }
body.d-wall .tile .tt b { font-size: 12px; }
body.d-wall .tile .h, body.d-wall .tile .m { font-size: 10.5px; }
body.d-micro .tiles { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 3px; }
body.d-micro .tile { padding: 4px 6px; border-radius: 5px; gap: 0; }
body.d-micro .tile .tt b { font-size: 11px; }
body.d-micro .tile .h, body.d-micro .tile .m { display: none; }
body.d-micro .tile .tt { gap: 4px; }
body.d-micro .tile .dot { width: 6px; height: 6px; box-shadow: none; }
body.d-micro .grp-h h2 { font-size: 13px; }
body.dense main.page { gap: 12px; padding: 12px; max-width: none; }
body.dense .grp { gap: 6px; }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; }

/* ---------- lists & tables ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.panel.section { padding: 16px 18px; margin-bottom: 14px; }
.panel.section > h3, .sec-h { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.list { overflow: hidden; }
.li { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line2); min-width: 0; }
.li:last-child { border-bottom: 0; }
.li .main { flex: 1; min-width: 0; }
.li .t { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.li .s { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.li .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.li.click { cursor: pointer; }
.li.click:hover { background: var(--sel); }
.sw-sq { width: 12px; height: 12px; border-radius: 3px; flex: none; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .3px; color: var(--muted); padding: 10px 14px; background: var(--panel2); border-bottom: 1px solid var(--line); text-transform: uppercase; white-space: nowrap; }
.tbl:not(.nosort) thead th:not(:empty), .tbl th.sortable { cursor: pointer; user-select: none; }
.tbl:not(.nosort) thead th:not(:empty):hover, .tbl th.sortable:hover { color: var(--text); }
.tbl th[aria-sort=ascending]::after, .tbl th[aria-sort=descending]::after { font-size: 9px; margin-left: 5px; color: var(--brand); }
.tbl th[aria-sort=ascending]::after { content: '▲'; } .tbl th[aria-sort=descending]::after { content: '▼'; }
.tbl th.sortable .sa { display: none; }
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.click { cursor: pointer; } .tbl tr.click:hover td { background: var(--sel); }
.tbl .num { text-align: right; font-family: var(--mono); }
.tbl-wrap { overflow-x: auto; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar input[type=search] { max-width: 320px; }
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; }
.subtabs button { border: 1px solid var(--input-bd); background: var(--panel); color: var(--text2); font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 99px; cursor: pointer; }
.subtabs button.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* event log */
.ev { display: grid; grid-template-columns: 150px 92px minmax(0, 1fr); gap: 12px; align-items: start; padding: 9px 16px; border-bottom: 1px solid var(--line2); font-size: 13.5px; }
.ev-time { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 2px; white-space: nowrap; }
.ev-type { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; padding: 2px 7px; border-radius: 5px; text-align: center; background: var(--chip-bg); color: var(--text2); }
.ev-down { background: var(--down-bg); color: var(--down-fg); } .ev-up { background: var(--up-bg); color: var(--up-fg); }
.ev-ack { background: rgba(224,123,57,.15); color: var(--acked); } .ev-degrade { background: var(--warn-bg); color: var(--warn-fg); }
.ev-restore { background: var(--up-bg); color: var(--up-fg); } .ev-info { background: var(--soft); color: var(--soft-fg); }
.ev .s { font-size: 12.5px; color: var(--muted); }

/* ---------- admin ---------- */
.admin { display: flex; align-items: flex-start; min-height: calc(100vh - 61px); }
.aside { flex: 0 0 236px; padding: 20px 12px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 61px; max-height: calc(100vh - 61px); overflow-y: auto; }
.aside .grp-l { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--faint); padding: 14px 12px 6px; }
.aside .grp-l:first-child { padding-top: 6px; }
.aside a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--text2); text-decoration: none; }
.aside a:hover { background: var(--sel); }
.aside a[aria-current=page] { font-weight: 600; color: var(--soft-fg); background: var(--soft); }
.aside a svg { color: var(--muted); flex: none; }
.aside a[aria-current=page] svg { color: var(--soft-fg); }
.aside a .b { margin-left: auto; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 99px; background: var(--down); color: #fff; line-height: 18px; }
.amain { flex: 1; min-width: 0; padding: 24px 24px 48px 12px; display: flex; flex-direction: column; gap: 18px; max-width: 1200px; }
.ahead { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ahead > div:first-child { flex: 1; min-width: 260px; }
.ahead h1 { margin: 0 0 4px; font-size: 22px; font-weight: 600; }
.ahead p { margin: 0; font-size: 14px; color: var(--muted); max-width: 720px; }
.amenu { display: none; }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stat .k { font-size: 12px; font-weight: 700; letter-spacing: .8px; color: var(--muted); text-transform: uppercase; }
.stat .v { font-size: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat .v.mono { font-size: 17px; }
.stat .s { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.stat .s.ok { color: var(--up-fg); } .stat .s.bad { color: var(--down-fg); }
.note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.5; background: var(--soft); border: 1px solid transparent; color: var(--soft-fg); }
.note.warn { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn-fg); }
.note.bad { background: var(--down-bg); border-color: var(--down-bd); color: var(--down-fg); }
.note.ok { background: var(--up-bg); border-color: var(--up-bd); color: var(--up-fg); }
.note svg { flex: none; margin-top: 2px; }
.note h3 { margin: 0 0 4px; font-size: 14.5px; }
.note p { margin: 0 0 6px; } .note p:last-child { margin: 0; }
.split2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.roles-wrap { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.roles-list { flex: 1 1 300px; max-width: 360px; display: flex; flex-direction: column; gap: 8px; }
.role-c { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; text-align: left; color: var(--text); }
.role-c:hover { border-color: var(--brand); }
.role-c.on { border: 2px solid var(--brand); padding: 13px 15px; }
.role-c .r1 { display: flex; align-items: center; gap: 8px; }
.role-c b { font-size: 15px; font-weight: 600; }
.role-c .u { margin-left: auto; font-size: 12px; color: var(--muted); }
.role-c .d { font-size: 13px; color: var(--muted); line-height: 1.4; }
.role-ed { flex: 999 1 460px; min-width: 0; }
.permset { border: 1px solid var(--line); border-radius: 11px; padding: 6px 14px 4px; margin: 0 0 12px; }
.permset legend { font-size: 12px; font-weight: 700; letter-spacing: .8px; color: var(--muted); padding: 0 6px; text-transform: uppercase; }
.perm { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line2); cursor: pointer; }
.perm:last-child { border-bottom: 0; }
.perm .pt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.perm .pt span:first-child { font-size: 14px; font-weight: 500; }
.perm .pt span + span { font-size: 12.5px; color: var(--muted); }
.perm .mx { font-size: 11px; color: var(--faint); font-family: var(--mono); white-space: nowrap; letter-spacing: 1px; }
.perm.dis { cursor: not-allowed; }
.perm.dis .pt span:first-child { color: var(--faint); }
.perm .from { font-size: 11.5px; color: var(--faint); white-space: nowrap; }
.permset .all { float: right; font-size: 12px; margin: -2px 0 0; }
.radio-c { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; margin-bottom: 8px; }
.radio-c:has(input:checked) { border: 2px solid var(--brand); background: var(--sel); padding: 9px 11px; }
.radio-c > span { display: flex; flex-direction: column; }
.radio-c b { font-size: 14px; font-weight: 600; }
.radio-c small { font-size: 12.5px; color: var(--muted); }
.radio-c input { margin-top: 2px; }
.steps { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.step { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; background: var(--panel2); font-size: 13px; }
.step > span { font-weight: 700; width: 16px; flex: none; }
.step.ok > span { color: var(--up); } .step.bad > span { color: var(--down); }
.step small { display: block; color: var(--muted); }
.drop { display: block; border: 2px dashed var(--input-bd); border-radius: 12px; padding: 26px; text-align: center; color: var(--muted); cursor: pointer; transition: border-color .12s, background .12s; }
.drop:hover, .drop.over { border-color: var(--brand); background: var(--sel); color: var(--text); }
.drop b { color: var(--text); }
.copybox { display: flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: 12.5px; padding: 8px 10px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); word-break: break-all; }
.copybox span { flex: 1; min-width: 0; }
.secret { font-family: var(--mono); font-size: 20px; padding: 14px; text-align: center; border-radius: 10px; background: var(--panel2); border: 1px dashed var(--input-bd); letter-spacing: 1px; user-select: all; margin: 10px 0; }
.kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 7px 14px; margin: 0; font-size: 13.5px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.daypick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.daypick label { cursor: pointer; }
.daypick input { position: absolute; opacity: 0; width: 0; height: 0; }
.daypick span { display: inline-block; padding: 6px 11px; border-radius: 99px; border: 1px solid var(--input-bd); font-size: 13px; color: var(--text2); background: var(--panel); }
.daypick input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.daypick input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.sound-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-bottom: 12px; }
.sound-cat { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .8px; color: var(--faint); margin-top: 6px; text-transform: uppercase; }
.sound-opt { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 7px 8px 7px 11px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 13px; background: var(--panel); }
.sound-opt.on { border: 2px solid var(--brand); padding: 6px 7px 6px 10px; background: var(--sel); font-weight: 600; }
.sound-opt button { border: 0; background: var(--chip-bg); color: var(--text2); border-radius: 6px; width: 26px; height: 24px; cursor: pointer; font-size: 10px; }
.spec-wrap { overflow-x: auto; margin-bottom: 10px; }
table.spec { border-collapse: collapse; width: 100%; font-size: 13px; }
.spec th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; padding: 6px; }
.spec td { padding: 4px 6px; }
.spec input[type=number] { height: 34px; max-width: 120px; }
.spec-use { display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; }
.spec-use input { margin: 0; }
.spec th.spec-off, .spec td.spec-off { opacity: .5; }
.progress { height: 6px; background: var(--chip-bg); border-radius: 99px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--brand); border-radius: 99px; transition: width .3s; }
.progress.ind i { width: 35% !important; animation: ind 1.2s ease-in-out infinite; }
@keyframes ind { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
.ver-badge { font-family: var(--mono); font-size: 12px; padding: 2px 7px; border-radius: 6px; background: var(--chip-bg); color: var(--text2); }
.ver-badge.old { background: var(--warn-bg); color: var(--warn-fg); }
.online { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }

/* ---------- side panel (drawer) & dialogs ---------- */
.scrim { position: fixed; inset: 0; z-index: 300; background: rgba(15,24,48,.32); animation: fade .15s; }
[data-theme=dark] .scrim { background: rgba(0,0,0,.5); }
@keyframes fade { from { opacity: 0; } }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 310; width: 540px; max-width: 100vw; background: var(--panel); border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgba(15,24,48,.18);
  display: flex; flex-direction: column; animation: slidein .2s ease-out; }
.drawer.wide { width: 760px; }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }
.drawer .dh { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line2); }
.drawer .dh .tt { flex: 1; min-width: 0; }
.drawer .dh h2 { margin: 0; font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer .dh .sub { font-size: 12.5px; color: var(--muted); }
.drawer .db { flex: 1; overflow: auto; padding: 18px 20px; }
.drawer .df { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line2); background: var(--panel2); flex-wrap: wrap; }
.drawer .df .left { margin-right: auto; display: flex; gap: 8px; }
.unsaved { font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 6px; background: #FEF3C7; color: #8A5300; letter-spacing: .3px; }
[data-theme=dark] .unsaved { background: rgba(250,204,21,.18); color: #FCD98A; }
.dlg { position: fixed; z-index: 400; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 460px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.3); padding: 20px; animation: pop .15s ease-out; }
.dlg.wide { width: 640px; }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -48%) scale(.98); } }
.dlg h2 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.dlg p { margin: 0 0 12px; color: var(--text2); }
.dlg .foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.dlg-scrim { z-index: 390; }
.overlay { position: fixed; inset: 0; z-index: 500; background: rgba(12,20,48,.92); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 20px; }
.overlay h2 { margin: 0; font-size: 24px; font-weight: 600; }
.overlay p { margin: 0; color: #B8C2E0; max-width: 460px; }
.overlay .progress { width: 280px; background: rgba(255,255,255,.15); }
.overlay .progress i { background: var(--green); }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: var(--green); animation: spin 0.9s linear infinite; }

/* graphs view (charts.js) */
.hist { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.hist-side { padding: 10px; position: sticky; top: 76px; }
.hist-list { max-height: calc(100vh - 170px); overflow: auto; margin-top: 8px; }
.hl { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; }
.hl:hover { background: var(--sel); }
.hl.on { background: var(--soft); }
.hl > div { flex: 1; min-width: 0; }
.hl .t { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl .s { font-size: 12px; color: var(--muted); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot2 { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--unk); }
.dot2.up { background: var(--up); } .dot2.down { background: var(--down); } .dot2.deg { background: var(--warn); } .dot2.ack { background: var(--acked); } .dot2.paused { background: var(--paused); }
.hist-main { min-height: 400px; }
.g-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 8px; }
.g-nav { display: flex; gap: 4px; }
.g-custom { position: relative; }
.g-custom summary { list-style: none; }
.g-custom summary::-webkit-details-marker { display: none; }
.g-cform { position: absolute; z-index: 20; top: 38px; right: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); min-width: 260px; }
.g-cform label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.g-title { margin-bottom: 6px; }
.g-wrap { position: relative; }
.g-canvas { width: 100%; height: 320px; display: block; cursor: crosshair; touch-action: pan-y; }
.g-tip { position: absolute; top: 10px; z-index: 5; padding: 8px 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 12.5px; pointer-events: none; min-width: 170px; }
.g-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); background: color-mix(in srgb, var(--panel) 60%, transparent); }
.g-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0; color: var(--muted); }
.g-legend span { display: inline-flex; align-items: center; gap: 6px; }
.g-legend i { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
.lg-avg { background: var(--accent); } .lg-band { background: var(--accent); opacity: .3; height: 8px !important; } .lg-jit { background: var(--jit); }
.lg-loss { background: var(--warn); height: 8px !important; } .lg-down { background: var(--down); opacity: .4; height: 8px !important; }
.g-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 8px; }
.gs { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.gs > b { font-family: var(--mono); font-size: 15px; font-weight: 500; }
.gs > span { font-size: 11.5px; color: var(--muted); }
.gs.bad > b { color: var(--down-fg); }
.g-evlist { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; max-height: 200px; overflow: auto; }

/* device detail */
.dev-acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.check-res { font-family: var(--mono); font-size: 12.5px; padding: 10px 12px; border-radius: 9px; background: var(--panel2); border: 1px solid var(--line); margin-bottom: 12px; }
.pop { position: fixed; z-index: 420; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 12px; width: 300px; }
.pop h3 { margin: 0 0 8px; font-size: 14px; }
.pop .row { margin-top: 10px; justify-content: flex-end; }

/* mobile */
.tabbar { display: none; }
@media (max-width: 1180px) {
  .search { width: 190px; }
  .clock small { display: none; }
  .me-btn .t { display: none; }
  .me-btn { padding: 0 4px; }
}
@media (max-width: 980px) {
  .nav { display: none; }
  .tabbar { display: grid; grid-template-columns: repeat(var(--tabs, 4), minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--head-bg); border-top: 1px solid var(--head-line); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0 12px; font-size: 11px; color: var(--nav); text-decoration: none; position: relative; }
  .tabbar a[aria-current=page] { color: var(--nav-bar); font-weight: 600; }
  .tabbar a .cnt { position: absolute; top: 4px; left: calc(50% + 6px); font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 99px; background: var(--down); color: #fff; line-height: 16px; }
  body.app { padding-bottom: 72px; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inc { grid-template-columns: 90px minmax(0, 1fr) 120px; }
  .inc .why, .inc .since { display: none; }
  .admin { display: block; }
  .aside { display: none; }
  .amenu { display: block; padding: 12px 16px 0; }
  .amenu select { height: 42px; font-weight: 600; }
  .amain { padding: 16px; }
  .hist { grid-template-columns: minmax(0, 1fr); }
  .hist-side, .hist-main { min-width: 0; }
  body.app { overflow-x: hidden; }
  .hist-side { position: static; }
  .hist-list { max-height: 240px; }
  .cards3 { grid-template-columns: 1fr; }
  .split2 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .auth-hero { min-height: 0; padding: 28px 24px 30px; flex-basis: 100%; background-size: 32px 32px; gap: 18px; }
  .netmap, .hero-copy p, .chips { display: none; }
  .hero-copy h1 { font-size: 30px; }
  .hero-copy { gap: 10px; }
  .auth-hero .mobile-when { display: block !important; }
  .auth-side { padding: 24px; justify-content: flex-start; }
  .auth-head .when { display: none; }
  .auth-head h2 { font-size: 22px; }
  .top-bar { gap: 10px; padding: 0 12px; }
  .brand .t { display: none; }
  .brand img { width: 30px; height: 30px; }
  .search, .clock { display: none; }
  .pill { padding: 6px 10px; font-size: 12.5px; }
  .icon-btn, .me-btn { width: 44px; height: 44px; }
  .me-btn { border: 0; padding: 0; background: transparent; justify-content: center; }
  .me-btn .av { width: 44px; height: 44px; font-size: 13px; }
  .ctx { padding: 10px 14px; gap: 10px; }
  .ctx .seg, .ctx label.sel span, .grp-h .snd { display: none; }
  main.page { padding: 14px; gap: 14px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi .v { font-size: 26px; }
  .kpi.avail { display: none; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .drawer, .drawer.wide { width: 100vw; border-left: 0; }
  .ev { grid-template-columns: 1fr; gap: 4px; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dd { margin-bottom: 8px; }
  .li { flex-wrap: wrap; }
  .tbl-wrap .hide-m { display: none; }
  #toasts { left: 12px; right: 12px; bottom: 84px; align-items: stretch; }
}
@media (max-width: 420px) {
  .pill .sep, .pill .w { display: none; }
  .top-bar { gap: 8px; }
  .ctx h1 { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
details.more { margin: 2px 0 12px; }
details.more summary { cursor: pointer; color: var(--muted); font-size: 13.5px; font-weight: 600; margin-bottom: 10px; }
/* Users by OU (3.8) */
.people-tbl tr.ou-h td { background: var(--chip-bg); cursor: pointer; font-size: 13px; padding-top: 7px; padding-bottom: 7px; }
.people-tbl tr.ou-h td > div { display: flex; align-items: center; gap: 7px; }
.people-tbl tr.ou-h:hover td { filter: brightness(.97); }
.people-tbl .ou-c { display: inline-flex; transition: transform .15s; color: var(--muted); transform: rotate(-90deg); }
.people-tbl .ou-c.open { transform: none; }
.people-tbl th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.people-bar select, .people-bulk select { width: auto; min-width: 0; max-width: 220px; flex: 0 1 auto; padding-top: 7px; padding-bottom: 7px; font-size: 13.5px; }
.people-bar input[type=search] { max-width: none; }
@media (max-width: 720px) { .people-bar select { flex: 1 1 45%; max-width: none; } }
.drawer input[readonly], .drawer textarea[readonly] { background: var(--chip-bg); color: var(--text2); }
/* 3.9: bandwidth, network health, patterns */
.lg-usual { background: var(--muted); opacity: .3; height: 8px !important; }
.lg-in { background: var(--accent); opacity: .5; height: 8px !important; }
.lg-out { background: var(--jit); height: 2px !important; }
.lg-cap { border-top: 2px dashed var(--down); height: 0 !important; background: none !important; opacity: .7; }
.pat { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 5px; letter-spacing: .02em; white-space: nowrap; }
.pat.p1 { background: var(--warn-bg); color: var(--warn-fg); }
.pat.p2 { background: var(--down-bg); color: var(--down-fg); }
.pat.pl { background: var(--chip-bg); color: var(--muted); }
.tile .pat { margin-top: 3px; align-self: flex-start; }
.ins-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ins-row.one { grid-template-columns: 1fr; }
.ins-row.hidden { display: none; }
@media (max-width: 900px) { .ins-row { grid-template-columns: 1fr; } }
.ins-card { padding-bottom: 6px; }
.ins-row1 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 16px; border-top: 1px solid var(--line2); cursor: pointer; font-size: 13px; }
.ins-row1:hover { background: var(--hover, rgba(127,127,127,.06)); }
.ins-row1 .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-row1 .why { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-row1 .bar { height: 7px; border-radius: 4px; background: var(--chip-bg); overflow: hidden; }
.ins-row1 .bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.ins-row1 .bar i.warm { background: var(--warn); } .ins-row1 .bar i.hot { background: var(--down); }
.ins-row1 .v { font-size: 12px; min-width: 64px; text-align: right; }
.bw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.bw-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel, transparent); color: inherit; cursor: pointer; font: inherit; font-size: 12.5px; text-align: left; }
.bw-chip.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.bw-chip span { color: var(--muted); font-size: 12px; }
.bw-chip .up-tag { font-size: 10px; font-weight: 600; color: var(--accent); }
.bw-off { margin: 12px 0 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 9px; }
.tf-tbl td, .tf-tbl th { padding: 6px 8px; }
.hd summary { cursor: pointer; }
.hd-list { max-height: 260px; overflow: auto; padding: 6px 0; }
.hd-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0; }
.hd-row select { max-width: 160px; }
.ev-pattern { background: var(--soft); color: var(--accent); } .ev-busy { background: var(--warn-bg); color: var(--warn-fg); } .ev-traffic { background: var(--soft); color: var(--soft-fg); }
form[data-form=health] .tbl select { max-width: 200px; }

/* 3.9: Needs attention sizes itself — compact rows, two columns on wide screens */
#incidents .cnt-b { display: inline-block; min-width: 20px; padding: 1px 7px; margin-left: 6px; border-radius: 10px; background: var(--down-bg); color: var(--down-fg); font-size: 12px; font-weight: 700; text-align: center; vertical-align: 2px; }
#incidents .inc { padding: 6px 14px; gap: 10px; }
#incidents .inc .st { padding: 3px 6px; }
#incidents .inc-list { display: block; }
#incidents.two .inc-list { display: grid; grid-template-columns: 1fr 1fr; }
#incidents.two .inc { border-right: 1px solid var(--line2); }
#incidents.two .inc:nth-child(2n) { border-right: 0; }
#incidents.two .inc { grid-template-columns: 78px minmax(0, 1.15fr) minmax(0, 1fr) 46px max-content; gap: 10px; }
#incidents.two .inc .why { font-size: 12.5px; }
@media (max-width: 820px) {
  #incidents .inc { padding: 6px 12px; }
}

/* 3.9: Bandwidth page and interface pages */
.bw-sum { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.bw-s { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bw-s b { font: 600 20px/1.2 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bw-s span { font-size: 12px; color: var(--muted); }
.bw-s.warn b { color: var(--warn-fg); } .bw-s.bad b { color: var(--down-fg); }
.bw-bar { padding: 12px 16px; border-bottom: 1px solid var(--line2); }
.bw-row { display: grid; grid-template-columns: minmax(0, 2.2fr) 1fr 1fr minmax(120px, 1.4fr) 150px; gap: 12px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--line2); color: inherit; text-decoration: none; font-size: 13px; }
a.bw-row:hover { background: var(--sel); } .bw-row:last-child { border-bottom: 0; }
.bw-head { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); padding-top: 8px; padding-bottom: 8px; }
.bw-row .nm { display: flex; flex-direction: column; min-width: 0; } .bw-row .nm b, .bw-row .nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bw-row .nm span { font-size: 12px; }
.bw-row .dir { font-style: normal; color: var(--muted); margin-right: 4px; }
.bw-row .ub { display: flex; align-items: center; gap: 8px; } .bw-row .ub .bar { flex: 1; height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; } .bw-row .ub .bar i { display: block; height: 100%; background: var(--accent); } .bw-row .ub .bar i.warm { background: var(--warn-fg, #d89614); } .bw-row .ub .bar i.hot { background: var(--down); }
.bw-row .ub b { min-width: 40px; text-align: right; font-size: 12px; }
.stt { font-size: 12px; font-weight: 600; } .stt.up { color: var(--up, #2a9d5c); } .stt.down, .stt.abn { color: var(--down-fg); } .stt.busy, .stt.unu { color: var(--warn-fg); } .stt.unknown { color: var(--muted); }
.bw-crumb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; margin: 0 0 10px; color: var(--muted); } .bw-crumb i { font-style: normal; opacity: .6; } .bw-crumb a { color: var(--brand); text-decoration: none; } .bw-crumb b { color: var(--text); }
.bw-ban { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-radius: 12px; color: #fff; background: #2a9d5c; margin-bottom: 12px; }
.bw-ban h1 { margin: 0; font-size: 20px; color: inherit; } .bw-ban .small { opacity: .9; } .bw-st { text-align: right; display: flex; flex-direction: column; } .bw-st b { font-size: 18px; }
.bw-ban.down { background: var(--down); } .bw-ban.abn { background: #c0392b; } .bw-ban.busy, .bw-ban.unu { background: #d08a16; } .bw-ban.unknown { background: #6b7685; }
.bw-ban .up-tag { background: rgba(255,255,255,.25); color: #fff; }
.bw-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 14px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.bw-tabs button { flex: none; border: 0; background: transparent; color: var(--nav); font-size: 13px; font-weight: 500; padding: 9px 13px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .bw-tabs button:hover { color: var(--text); } .bw-tabs button.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.bw-ov { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; } .bw-main, .bw-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bw-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); justify-items: center; padding: 8px 10px 14px; gap: 6px; } .bw-gauges div { display: flex; flex-direction: column; align-items: center; } .bw-gauges span { font-size: 12px; color: var(--muted); margin-top: 2px; }
.bw-crow { display: grid; grid-template-columns: minmax(120px, 1.2fr) 1.6fr 1fr 1fr; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--line2); font-size: 13px; align-items: center; } .bw-crow i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; }
.bw-crow.bw-head { border-top: 0; } .bw-crow.bw-foot { color: var(--muted); font-size: 12px; background: var(--hover, rgba(127,127,127,.05)); }
.lg-tot { background: var(--text2); } .lg-out { background: var(--jit); }
.bw-minis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 14px 16px; } .bw-mini { cursor: pointer; border: 1px solid var(--line2); border-radius: 10px; padding: 8px 10px; } .bw-mini:hover { border-color: var(--brand); } .bw-mini h4 { margin: 0 0 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.bw-cv { height: 340px; } .bw-cv.mini { height: 78px; } .bw-cv canvas { width: 100%; height: 100%; display: block; }
.bw-dl { margin: 0; padding: 4px 16px 14px; display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: 13px; } .bw-dl dt { color: var(--muted); } .bw-dl dd { margin: 0; text-align: right; overflow-wrap: anywhere; } .bw-dl.wide dd { text-align: left; }
.bw-sim { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--line2); color: inherit; text-decoration: none; font-size: 13px; } .bw-sim:hover { background: var(--sel); } .bw-sim .nm { display: flex; flex-direction: column; min-width: 0; } .bw-sim .nm span { font-size: 12px; }
.bw-tools { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 12px 16px 4px; }
.bw-leg, .bw-zoom { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .bw-lg { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; cursor: pointer; } .bw-lg i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
#bw-ttl { padding: 4px 16px; } #bw-cv { padding: 0 8px; }
.bw-dt td, .bw-dt th { white-space: nowrap; } .bw-dt tr.sum td { background: var(--hover, rgba(127,127,127,.06)); } .bw-dt tr.dn td { color: var(--down-fg); }
.bw-pager { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; padding: 12px 14px; border-top: 1px solid var(--line2); }
.bw-rg { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } .bw-quick, .bw-chk { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; } .bw-rep > .f { margin-top: 12px; display: block; }
@media (max-width: 1100px) { .bw-ov { grid-template-columns: 1fr; } .bw-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .bw-head { display: none; }
  .bw-row { grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 10px 14px; } .bw-row .nm { grid-column: 1 / -1; } .bw-row .ub { grid-column: 1 / 2; } .bw-row .stt { grid-column: 2 / 3; text-align: right; }
  .bw-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .bw-bar input { grid-column: 1 / -1; }
  .bw-minis { grid-template-columns: 1fr; } .bw-cv { height: 280px; } .bw-crow { grid-template-columns: 1.3fr 1.6fr 1fr 1fr; padding: 8px 12px; font-size: 12px; }
}
@media (max-width: 520px) { .bw-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }  .bw-ban h1 { font-size: 17px; } .bw-dl { padding: 4px 12px 12px; } }
.bw-pager select { width: auto; }

/* 3.9: Topology */
.tp-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 4px 0 12px; }
.tp-bar .seg { max-width: 100%; } .tp-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .tp-tools select { width: auto; padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
.tp-impact { display: flex; gap: 8px; align-items: flex-start; padding: 9px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 10px; border: 1px solid var(--line); background: var(--panel); }
.tp-impact.ok { color: var(--up-fg); border-color: var(--up-bd); background: var(--up-bg); } .tp-impact.bad { color: var(--down-fg); border-color: var(--down-bd); background: var(--down-bg); } .tp-impact a { color: inherit; font-weight: 600; }
[data-theme=dark] .tp-impact.ok { color: #B7F5C4; background: rgba(46,155,58,.14); border-color: rgba(46,155,58,.4); } [data-theme=dark] .tp-impact.bad { color: #FFB4B4; background: rgba(229,72,77,.14); border-color: rgba(229,72,77,.4); }
.tp-wrap { position: relative; padding: 0; overflow: hidden; }
.tp-svg { width: 100%; height: min(66vh, 620px); min-height: 340px; display: block; touch-action: none; cursor: grab; background: radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0) 0 0 / 22px 22px; }
.tp-svg:active { cursor: grabbing; }
.tp-zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.tp-legend { position: absolute; left: 10px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; background: color-mix(in srgb, var(--panel) 88%, transparent); padding: 4px 10px; border-radius: 8px; max-width: calc(100% - 70px); }
.tp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; } .tp-legend i.aff { border: 1.5px dashed var(--muted); }
.tp-nb { fill: var(--panel); stroke-width: 2.2; } .tp-n { cursor: pointer; } .tp-n:hover .tp-nb { fill: var(--sel); } .tp-n:focus-visible .tp-nb { stroke-width: 4; }
.tp-n.aff .tp-nb, .tp-n.ext .tp-nb { stroke-opacity: .55; } .tp-n.aff text, .tp-n.aff circle, .tp-n.ext text, .tp-n.ext circle { opacity: .6; } .tp-n.sel .tp-nb { stroke-width: 4; }
.tp-nt { font: 600 12.5px var(--sans); fill: var(--text); } .tp-ns { font: 11px var(--mono); fill: var(--muted); } .tp-root { font: 700 9px var(--sans); fill: var(--brand); text-transform: uppercase; letter-spacing: .5px; }
[data-theme=dark] .tp-root { fill: #9DB0FF; }
.tp-chip { fill: var(--panel); stroke: var(--line); } .tp-chip-t { font: 600 11px var(--mono); fill: var(--text); } .tp-l { cursor: pointer; } .tp-l:hover .tp-chip { stroke: var(--brand); }
.tp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.tp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; } .tp-cols .bw-sim { cursor: pointer; }
.tp-geo { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
.tp-map { position: relative; height: min(68vh, 640px); min-height: 380px; overflow: hidden; background: #cfd8e3; touch-action: none; cursor: grab; user-select: none; }
[data-theme=dark] .tp-map { background: #1a2340; }
.tp-tiles, .tp-ov { position: absolute; inset: 0; width: 100%; height: 100%; } .tp-tile { position: absolute; width: 256px; height: 256px; max-width: none; user-select: none; pointer-events: none; } [data-theme=dark] .tp-tile { filter: brightness(.78) contrast(1.05) saturate(.8); }
.tp-ov { overflow: visible; } .tp-ml { cursor: pointer; } .tp-mk { cursor: pointer; } .tp-mt { font: 600 11.5px var(--sans); fill: #111; paint-order: stroke; stroke: rgba(255,255,255,.9); stroke-width: 3.5px; } [data-theme=dark] .tp-mt { fill: #fff; stroke: rgba(10,16,34,.85); }
.tp-attr { position: absolute; right: 6px; bottom: 4px; font-size: 10px; background: rgba(255,255,255,.75); color: #333; padding: 1px 5px; border-radius: 4px; pointer-events: none; }
.tp-nomap { position: absolute; left: 10px; top: 10px; max-width: 60%; font-size: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.tp-mapw .tp-zoom { top: 10px; }
.tp-tray { padding-bottom: 8px; } .tp-tl { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; } .tp-tr { display: flex; align-items: center; gap: 4px; text-align: left; border: 0; border-top: 1px solid var(--line2); background: transparent; color: var(--text); padding: 8px 14px; font-size: 13px; cursor: pointer; } .tp-tr .small { margin-left: auto; } .tp-tr:hover:not(:disabled) { background: var(--sel); } .tp-tr.on { background: var(--soft); font-weight: 600; } .tp-tr:disabled { cursor: default; opacity: .8; }
.tp-magic { padding: 10px; } #tp-mg { width: 100%; max-width: 680px; max-height: 72vh; display: block; margin: 0 auto; }
.mg-s, .mg-d, .mg-i { cursor: pointer; stroke: var(--panel); stroke-width: .6; } .mg-s:hover, .mg-d:hover, .mg-i:hover { opacity: 1; stroke: var(--text); }
.mg-t { font: 600 10px var(--sans); fill: #fff; pointer-events: none; } .mg-c { font: 700 26px var(--mono); fill: var(--text); } .mg-cs { font: 11px var(--sans); fill: var(--muted); }
.tp-cands { max-height: 52vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; } .tp-cand { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line2); font-size: 13px; cursor: pointer; } .tp-cand.have { opacity: .6; }
.tp-roots { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
@media (max-width: 900px) { .tp-geo { grid-template-columns: 1fr; } .tp-cols { grid-template-columns: 1fr; } .tp-svg { height: 60vh; } .tp-map { height: 56vh; } }
@media (max-width: 520px) { .tp-legend .muted { display: none; } .tp-bar .seg button { padding: 5px 8px; } .tp-nomap { max-width: 85%; } }

@media (max-width: 640px) {
  .bw-crow { grid-template-columns: 1fr 1fr 1fr; gap: 4px 10px; } .bw-crow.bw-head { display: none; }
  .bw-crow .cn { grid-column: 1 / -1; font-weight: 600; }
  .bw-crow [data-l]::before { content: attr(data-l); display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); font-weight: 500; }
  .bw-crow.bw-foot { grid-template-columns: 1fr 1fr 1fr; } .bw-st { text-align: left; }
}

.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 20px; } .kv-grid > div { min-width: 0; overflow-wrap: anywhere; }

/* ---- 3.9.2 ---- */
.gtabs { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.gtabs button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 7px; cursor: pointer; }
.gtabs button:hover { color: var(--text); background: var(--sel); }
.gtabs button.on { background: var(--brand); color: #fff; }
.inc .st { white-space: nowrap; }
.inc { grid-template-columns: 124px minmax(0, 2fr) minmax(0, 2fr) 90px 150px; }
#incidents.two .inc { grid-template-columns: 112px minmax(0, 1.15fr) minmax(0, 1fr) 46px max-content; }
#incidents .inc .st { font-size: 10.5px; letter-spacing: .3px; }
@media (max-width: 720px) { .inc { grid-template-columns: 104px minmax(0, 1fr) 120px; } }
/* reveal toggle */
.reveal { position: relative; display: block; }
.reveal > input { padding-right: 40px; width: 100%; }
.reveal > .rv { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 6px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.reveal > .rv:hover { color: var(--text); background: var(--sel); }
.ss { position: relative; display: block; }
.ss.ss-inline, .toolbar .ss, .bw-bar .ss, .people-bar .ss { display: inline-block; }
.ss-native { position: absolute !important; opacity: 0; pointer-events: none; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; }
.ss-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 38px; padding: 7px 10px; font: inherit; text-align: left; color: var(--text); background: var(--input, var(--panel)); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.ss-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-btn i { font-style: normal; color: var(--muted); font-size: 11px; }
.ss-btn:focus-visible, .ss-btn[aria-expanded=true] { outline: 2px solid var(--brand); outline-offset: 0; }
.ss-btn:disabled { opacity: .55; cursor: not-allowed; }
.ss-pop { position: fixed; z-index: 1000; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.28); overflow: hidden; }
.ss-pop .ss-q { margin: 8px; width: calc(100% - 16px); }
.ss-list { overflow-y: auto; padding: 0 4px 6px; }
.ss-o { padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13.5px; }
.ss-o.act { background: var(--sel); } .ss-o.cur { font-weight: 700; color: var(--brand); }
.ss-none { padding: 12px; color: var(--muted); font-size: 13px; }
.backrow { width: 100%; box-sizing: border-box; max-width: 1600px; margin: 0 auto; padding: 12px 20px 0; text-align: left; }
@media (max-width: 720px) { .backrow { padding: 10px 14px 0; } }
body.dense .backrow { max-width: none; padding: 12px 12px 0; }
.backrow + main.page, .backrow + .admin { padding-top: 12px; }
.dlg.wide.disc { width: 880px; }
.dc-prog { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; } .dc-prog .bar { flex: 0 0 200px; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; } .dc-prog .bar i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .3s; }
.dc-list { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; } .dc-list .tbl input[type=text] { width: 100%; min-width: 130px; padding: 5px 8px; } .dc-list tr.dim { opacity: .6; }
.selbar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; margin: 0 0 10px; background: var(--sel); border: 1px solid var(--brand); border-radius: 10px; }
tr.sel td { background: var(--sel); }
.tp-tr { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-bottom: 1px solid var(--line2); } .tp-tr.on { background: var(--sel); }
.tp-tr .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; } .tp-tr .nm b { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-sec { padding: 8px 14px 4px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.tp-zoom { display: flex; flex-direction: column; gap: 6px; }
.tp-tl { max-height: 62vh !important; }
.backrow.adm { max-width: none; margin: 0; padding: 12px 12px 0; }
@media (max-width: 720px) { .backrow.adm { padding: 10px 14px 0; } }

/* printable bandwidth report preview */
.bw-printov { position: fixed; inset: 0; z-index: 9000; background: rgba(8, 12, 28, .86); display: flex; flex-direction: column; align-items: center; padding: 10px; gap: 8px; }
.bw-printov .bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; width: 100%; max-width: 900px; }
.bw-printov iframe { flex: 1; width: 100%; max-width: 900px; background: #fff; border: 0; border-radius: 4px; }
@media print { .bw-printov { display: none !important; } }

/* reports (3.9.13) */
.rep-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 10px; }
.rep-t { font-size: 18px; font-weight: 700; }
.rep-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 18px; padding: 12px 16px; margin-bottom: 14px; border-left: 4px solid var(--up-fg); }
.rep-par .k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .6px; color: var(--muted); text-transform: uppercase; }
.rep-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.rep-k { border-left: 4px solid var(--accent, #33449C); }
.rep-k.bad { border-left-color: var(--down-fg); } .rep-k.warn { border-left-color: var(--warn-fg); } .rep-k.ok { border-left-color: var(--up-fg); }
.rep-leg { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); padding-top: 4px; }
.rep-lg i { display: inline-block; width: 12px; height: 6px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
tr.rep-bad td { background: rgba(220, 38, 38, .12); } tr.rep-warn td { background: rgba(217, 119, 6, .12); } tr.rep-ok td { background: rgba(21, 128, 61, .10); }
tr.rep-tot td { font-weight: 700; background: rgba(51, 68, 156, .12); }
.mp-i, .mp-g { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--line); }
.mp-g { background: var(--panel-2, rgba(128, 128, 128, .08)); position: sticky; top: 0; }
.mp-i:hover { background: rgba(128, 128, 128, .08); } .mp-i.dis { opacity: .5; cursor: default; }
.mp-t { flex: 1; min-width: 0; }
.bw-addbox{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:10px 0 16px;padding:14px 16px;border:2px dashed var(--accent,#1f6feb);border-radius:12px;background:color-mix(in srgb,var(--accent,#1f6feb) 8%,transparent)}
.bw-addbox .ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--accent,#1f6feb);color:#fff;flex:none}
.bw-addbox .main{flex:1;min-width:220px}
.tf-attr{display:flex;flex-wrap:wrap;gap:6px 14px;margin:2px 0 8px;padding:8px 10px;border-radius:8px;background:var(--panel2,rgba(127,127,127,.1))}
.tf-attr i{font-style:normal;opacity:.65;margin-right:4px}
.all-ok.warn { color: var(--warn-fg, #f0a63a); }
.all-ok small { font-weight: 400; opacity: .8; }