*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#07090f;--panel:#0b1020;--card:#101828;--card-h:#162038;
  --b:rgba(148,163,184,.1);--bb:rgba(148,163,184,.18);
  --teal:#22d3ee;--teal-d:rgba(34,211,238,.12);
  --green:#34d399;--green-d:rgba(52,211,153,.12);
  --amber:#fbbf24;--amber-d:rgba(251,191,36,.12);
  --red:#f87171;--red-d:rgba(248,113,113,.12);
  --purple:#a78bfa;--purple-d:rgba(167,139,250,.12);
  --t1:#e2e8f0;--t2:#94a3b8;--t3:#475569;--t4:#2d3f58;
  --font:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --r:6px;--rl:10px
}
/* `--accent` is the brand colour under the name the JS theme registry uses
   (THEMES[].accent, app.js) — several rules and inline styles reference it but it
   was never defined, so they silently fell back to browser defaults. Declared on
   `body` rather than `:root` on purpose: themes are `body.theme-*`, so var(--teal)
   only resolves to the *active* theme's value here. On :root it would compute once
   against the default palette and every theme would inherit that frozen colour. */
body{--accent:var(--teal)}
html,body{height:100%;background:var(--bg);color:var(--t1);font-family:var(--font);font-size:var(--ui-font-size,13px);line-height:1.5;-webkit-font-smoothing:antialiased}
#app{display:flex;flex-direction:column;height:100vh;overflow:hidden}

/* ── Header ──────────────────────────────────────────────────────────── */
header{background:var(--panel);border-bottom:1px solid var(--b);padding:0 20px;display:flex;align-items:center;gap:16px;height:52px;flex-shrink:0}
.logo{display:flex;align-items:center;gap:9px;font-size:1.08rem;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.logo-icon{width:28px;height:28px;background:var(--teal-d);border:1px solid rgba(34,211,238,.4);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1.15rem}
/* ── Site picker (searchable combobox) ───────────────────────────────────
   Replaces the native <select>: 500+ sites need a filter field, which a
   <select> can't host. Trigger button mimics the old select's look. */
.site-combo{position:relative;min-width:260px;max-width:420px}
.site-combo-btn{width:100%;background:var(--card);border:1px solid var(--bb);color:var(--t1);font-family:var(--font);font-size:1rem;padding:5px 8px 5px 10px;border-radius:var(--r);outline:none;cursor:pointer;display:flex;align-items:center;gap:8px;text-align:left;transition:border-color .15s}
.site-combo-btn:hover{border-color:var(--teal)}
.site-combo.open .site-combo-btn{border-color:var(--teal)}
.site-combo-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-combo-val.placeholder{color:var(--t3)}
.site-combo-caret{width:14px;height:14px;flex-shrink:0;color:var(--t3);transition:transform .15s}
.site-combo.open .site-combo-caret{transform:rotate(180deg)}
.site-combo-pop{position:absolute;top:calc(100% + 5px);left:0;min-width:100%;width:max-content;max-width:min(560px,80vw);background:var(--panel);border:1px solid var(--bb);border-radius:var(--r);box-shadow:0 12px 34px rgba(0,0,0,.45);z-index:60;overflow:hidden}
.site-combo-pop[hidden]{display:none}
.site-combo-sbar{display:flex;align-items:center;gap:7px;padding:8px 10px;border-bottom:1px solid var(--b);background:var(--card)}
.site-combo-sbar svg{width:13px;height:13px;color:var(--t3);flex-shrink:0}
.site-combo-sbar input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--t1);font-family:var(--font);font-size:0.92rem;padding:0}
.site-combo-sbar input::placeholder{color:var(--t3)}
.site-combo-count{font-family:var(--mono);font-size:0.69rem;color:var(--t3);white-space:nowrap;flex-shrink:0}
.site-combo-list{max-height:min(58vh,420px);overflow-y:auto;padding:4px 0}
.site-combo-grp{font-family:var(--mono);font-size:0.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--t3);padding:7px 12px 3px;position:sticky;top:0;background:var(--panel);border-bottom:1px solid var(--b)}
.site-combo-opt{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:0.94rem;color:var(--t1);cursor:pointer;white-space:nowrap}
.site-combo-opt:hover,.site-combo-opt.active{background:var(--card)}
.site-combo-opt.active{box-shadow:inset 2px 0 0 var(--teal)}
.site-combo-opt.sel{color:var(--teal)}
.site-combo-oname{overflow:hidden;text-overflow:ellipsis}
.site-combo-opt mark{background:rgba(34,211,238,.22);color:inherit;border-radius:2px;padding:0 1px}
.site-combo-hint{font-family:var(--mono);font-size:0.66rem;color:var(--t3);border:1px solid var(--b);border-radius:3px;padding:0 4px;flex-shrink:0}
.site-combo-empty{padding:14px 12px;font-size:0.88rem;color:var(--t3);text-align:center}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.badge{font-family:var(--mono);font-size:0.77rem;padding:2px 8px;border-radius:20px;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.badge-demo{background:var(--amber-d);color:var(--amber);border:1px solid rgba(251,191,36,.3)}
.badge-live{background:var(--green-d);color:var(--green);border:1px solid rgba(52,211,153,.3);animation:livePulse 2.5s ease-in-out infinite}
.badge-ok{background:var(--green-d);color:var(--green);border:1px solid rgba(52,211,153,.3)}
.badge-warn{background:var(--amber-d);color:var(--amber);border:1px solid rgba(251,191,36,.3)}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}50%{box-shadow:0 0 0 5px rgba(52,211,153,.15)}}
.btn{background:var(--card);border:1px solid var(--bb);color:var(--t2);font-family:var(--font);font-size:0.92rem;padding:5px 12px;border-radius:var(--r);cursor:pointer;transition:all .15s}
.btn:hover{border-color:var(--teal);color:var(--teal)}
.ts{font-family:var(--mono);font-size:0.85rem;color:var(--t3);display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.ts-date{font-size:0.69rem;opacity:.65;line-height:1;white-space:nowrap}

/* Header status chips (controller link + DB persistence). Two bare dots were
   ambiguous — which subsystem is which? — so each chip carries its own icon:
   broadcast = controller link, cylinder = database. Icon-only, sized to sit in
   the same band as the .hicon action buttons next to them; the state word is
   kept for screen readers only and the detail lives in the tooltip.
   Colour: green = ok/live/read-write, amber = demo/RAM-only, red = offline. */
.hstat-group{display:flex;align-items:center;gap:4px}
.hchip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border-radius:50%;background:rgba(148,163,184,.08);border:1px solid var(--b);color:var(--t3);font-family:var(--font);cursor:default;flex-shrink:0;transition:border-color .15s,background .15s}
.hchip-ico{width:15px;height:15px;flex-shrink:0;display:block}
/* Visually hidden, not display:none — the state word stays in the a11y tree. */
.hchip-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hchip-ok{background:var(--green-d);border-color:rgba(52,211,153,.3);color:var(--green)}
.hchip-warn{background:var(--amber-d);border-color:rgba(251,191,36,.3);color:var(--amber)}
.hchip-err{background:var(--red-d);border-color:rgba(248,113,113,.3);color:var(--red)}
.hchip[onclick]{cursor:pointer}
.hchip[onclick]:hover{filter:brightness(1.22)}
.hchip.live{animation:livePulse 2.5s ease-in-out infinite}
body.no-anim-live .hchip.live{animation:none}
/* 23px (odd) inside the 51px content box keeps the 1px rule on a whole pixel;
   the asymmetric margin optically centres it between the chip edge and the
   first icon glyph, which sits 8px inside its 36px button. */
.hdr-div{width:1px;height:23px;background:var(--b);flex-shrink:0;margin:0 -6px 0 2px}
/* Header action buttons — one uniform square icon button, icon-only, tooltip.
   The 20px glyph is scaled to read at the same weight as the 28px status chips
   beside it; the button is the glyph + the same 8px of hit area all round. */
.hicon-group{display:flex;align-items:center;gap:6px}
.hicon{background:none;border:1px solid transparent;color:var(--t2);cursor:pointer;width:36px;height:36px;border-radius:var(--r);display:inline-flex;align-items:center;justify-content:center;padding:0;transition:color .15s,background .15s,border-color .15s,opacity .15s}
.hicon:hover{border-color:var(--bb);color:var(--teal);background:var(--card)}
.hicon svg{width:20px;height:20px;display:block}
.hicon.active{color:var(--teal)}
.hicon.paused{color:var(--t3);opacity:.55}

/* ── Tabs ────────────────────────────────────────────────────────────── */
.tab-nav{background:var(--panel);border-bottom:1px solid var(--b);padding:0 20px;display:flex;gap:2px;flex-shrink:0;overflow-x:auto}
.tab{padding:11px 14px;font-size:0.92rem;font-weight:500;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;display:flex;align-items:center;gap:7px;white-space:nowrap;user-select:none}
.tab:hover{color:var(--t2)}
.tab.active{color:var(--teal);border-bottom-color:var(--teal)}
.tbadge{font-family:var(--mono);font-size:0.77rem;padding:1px 5px;border-radius:8px;font-weight:600}
.tbadge.err{background:var(--red-d);color:var(--red)}
.tbadge.warn{background:var(--amber-d);color:var(--amber)}
.tbadge.ok{background:var(--green-d);color:var(--green)}

/* ── Content ─────────────────────────────────────────────────────────── */
.content{flex:1;overflow:auto;padding:20px}
.panel{display:none}.panel.active{display:block}

/* ── Stat Cards ──────────────────────────────────────────────────────── */
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:20px}
.scard{background:var(--card);border:1px solid var(--b);border-radius:var(--rl);padding:14px 18px}
.scard.red-border{border-color:rgba(248,113,113,.3)}
.scard.amber-border{border-color:rgba(251,191,36,.3)}
.scard.teal-border{border-color:rgba(34,211,238,.2)}
.slabel{font-size:0.77rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);margin-top:6px;margin-bottom:0}
.sval{font-family:var(--mono);font-size:2rem;font-weight:500;line-height:1;color:var(--t1)}
.sval.red{color:var(--red)}.sval.amber{color:var(--amber)}.sval.green{color:var(--green)}.sval.teal{color:var(--teal)}
.ssub{font-size:0.85rem;color:var(--t3);margin-top:3px}
.split-stat{display:flex;align-items:flex-start;gap:14px;margin:2px 0 2px}
.split-stat-col{display:flex;flex-direction:column}
.split-stat-lbl{font-size:0.77rem;color:var(--t3);margin-top:3px;white-space:nowrap}
.split-stat-div{width:1px;background:var(--b);align-self:stretch;margin-top:6px;flex-shrink:0}

/* ── Section Headers ─────────────────────────────────────────────────── */
.sh{display:flex;align-items:center;gap:8px;justify-content:flex-start;margin-bottom:10px}
.sh-title{font-size:0.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--t3)}
.sh-note{font-size:0.85rem;color:var(--t3);font-style:italic;margin-left:auto}
.sh-toggle{background:none;border:none;color:var(--t3);cursor:pointer;font-size:0.85rem;padding:1px 4px;line-height:1;border-radius:3px;transition:color .12s;flex-shrink:0}
.sh-toggle:hover{color:var(--t2)}

/* ── Tables ──────────────────────────────────────────────────────────── */
.tw{background:var(--card);border:1px solid var(--b);border-radius:var(--rl);overflow:hidden;margin-bottom:20px}
table{width:100%;border-collapse:collapse}
th{font-size:0.77rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--t3);padding:9px 14px;text-align:left;border-bottom:1px solid var(--b);background:rgba(255,255,255,.02)}
td{padding:10px 14px;border-bottom:1px solid var(--b);font-size:0.92rem;color:var(--t1)}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--card-h)}
.mn{font-family:var(--mono);font-size:0.85rem;color:var(--t2)}
.mn-t{font-family:var(--mono);font-size:0.85rem;color:var(--teal)}
.mn-g{font-family:var(--mono);font-size:0.85rem;color:var(--green)}
.mn-a{font-family:var(--mono);font-size:0.85rem;color:var(--amber)}
.mn-r{font-family:var(--mono);font-size:0.85rem;color:var(--red)}
.hn{font-size:1rem;font-weight:500}

/* ── Chips ───────────────────────────────────────────────────────────── */
.chip{font-family:var(--mono);font-size:0.69rem;font-weight:600;padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.chip.crit{background:var(--red-d);color:var(--red)}
.chip.warn{background:var(--amber-d);color:var(--amber)}
.chip.ok{background:var(--green-d);color:var(--green)}
.chip.info{background:var(--teal-d);color:var(--teal)}
.chip.dfs{background:var(--purple-d);background:color-mix(in srgb,var(--purple) 20%,transparent);color:var(--purple);font-weight:700}

/* ── Status dots ─────────────────────────────────────────────────────── */
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.dot.r{background:var(--red);box-shadow:0 0 5px var(--red);animation:pulse 1.8s infinite}
.dot.a{background:var(--amber)}
.dot.g{background:var(--green)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ── AP Cards ────────────────────────────────────────────────────────── */
.ap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-bottom:20px}
.apc{background:var(--card);border:1px solid var(--b);border-radius:var(--rl);padding:15px;transition:border-color .15s}
.apc:hover{border-color:var(--bb)}
.apc.dfs-ap{border-color:rgba(167,139,250,.35)}
.apc.warn-ap{border-color:rgba(251,191,36,.3)}
.ap-name{font-size:1rem;font-weight:600;margin-bottom:2px}
.ap-model{font-family:var(--mono);font-size:0.77rem;color:var(--t3);margin-bottom:11px}
.ap-m2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:11px}
.ap-ml{font-size:0.69rem;text-transform:uppercase;letter-spacing:.07em;color:var(--t3)}
/* No `color` here on purpose. app.js renders these as `class="ap-mv mn-a|mn-r|mn-t"`
   to severity-tint Satisfaction and Max Util. `.ap-mv` and `.mn-*` have identical
   specificity (0,1,0), so a colour here wins purely by being declared later and the
   severity tint is silently lost. Plain cells are unaffected: html,body already
   inherits color:var(--t1), which is what this used to restate. */
.ap-mv{font-family:var(--mono);font-size:0.92rem;margin-top:1px}
.ubar{height:3px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;margin-top:4px}
.ufill{height:100%;border-radius:2px;transform-origin:left center;animation:barGrow .5s cubic-bezier(.4,0,.2,1)}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
body.no-bar-anim .ufill{animation:none}
.ufill.lo{background:var(--green)}.ufill.md{background:var(--amber)}.ufill.hi{background:var(--red)}
.ap-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
.radio-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-top:1px solid var(--b);font-size:0.85rem;color:var(--t2)}

/* ── Config Audit ────────────────────────────────────────────────────── */
.sa{position:relative;background:var(--card);border:1px solid var(--b);border-radius:var(--rl);margin-bottom:14px;overflow:hidden}
/* Top horizontal indicator matching the SSID's config-audit score colour. */
.sa::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:transparent;pointer-events:none}
.sa.sa-g::before{background:var(--green)}
.sa.sa-a::before{background:var(--amber)}
.sa.sa-r::before{background:var(--red)}
.sa-head{padding:12px 16px;background:rgba(255,255,255,.02);border-bottom:1px solid var(--b);display:flex;align-items:center;justify-content:space-between}
.sa-name{font-size:1rem;font-weight:600}
.score-ring{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:0.85rem;font-weight:600}
.score-ring.g{background:var(--green-d);color:var(--green);border:1px solid rgba(52,211,153,.4)}
.score-ring.a{background:var(--amber-d);color:var(--amber);border:1px solid rgba(251,191,36,.4)}
.score-ring.r{background:var(--red-d);color:var(--red);border:1px solid rgba(248,113,113,.4)}
.ac{display:flex;align-items:flex-start;gap:12px;padding:11px 16px;border-bottom:1px solid var(--b)}
/* Clickable audit rows open a detail modal (KB link, UniFi settings path, description). */
.ac-click{cursor:pointer;transition:background-color .12s}
.ac-click:hover{background:var(--card-h)}
.ac-more{font-size:9px;color:var(--teal);opacity:0;margin-left:6px;transition:opacity .12s;white-space:nowrap}
.ac-click:hover .ac-more{opacity:.85}
.ac:last-child{border-bottom:none}
.ac-ico{font-size:1rem;flex-shrink:0;margin-top:1px}
.ac-name{font-size:0.92rem;font-weight:500}
.ac-val{font-family:var(--mono);font-size:0.77rem;color:var(--t3);margin-top:2px}
.ac-rec{font-size:0.85rem;color:var(--t3);margin-top:4px;font-style:italic;line-height:1.4}
.ac-rec a{color:var(--teal);text-decoration:none;font-style:normal}
.ac-rec a:hover{text-decoration:underline}
.ac-disabled{opacity:.5}
.ac-disabled .ac-name{font-weight:400}
.ac-disabled .ac-val{text-decoration:line-through}

/* ── Timeline ────────────────────────────────────────────────────────── */
.timeline{background:var(--card);border:1px solid var(--b);border-radius:var(--rl);padding:14px 16px;margin-bottom:20px;max-height:280px;overflow-y:auto}
.ti{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--b)}
.ti:last-child{border-bottom:none}
.ti-ico{font-size:0.92rem;flex-shrink:0;width:18px;text-align:center;margin-top:1px}
.ti-time{font-family:var(--mono);font-size:0.77rem;color:var(--t3);width:80px;flex-shrink:0}
.ti-msg{font-size:0.85rem;color:var(--t2);line-height:1.45}
/* Single-line event row: client name + concise roam detail, truncated with an ellipsis. */
.ti-line{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ti-line[onclick]:hover{color:var(--teal)}
.ti-mac{font-family:var(--mono);font-size:0.77rem;color:var(--teal)}

/* ── Anomaly List ────────────────────────────────────────────────────── */
.anomaly-list{background:var(--card);border:1px solid var(--b);border-radius:var(--rl);overflow:hidden;margin-bottom:20px}
.al-item{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--b)}
.al-item:last-child{border-bottom:none}
.al-item:hover{background:var(--card-h)}
.al-sev{width:3px;height:32px;border-radius:2px;flex-shrink:0}
.al-sev.r{background:var(--red)}.al-sev.a{background:var(--amber)}.al-sev.g{background:var(--green)}
.al-text{flex:1}
.al-title{font-size:0.92rem;font-weight:500}
.al-sub{font-size:0.85rem;color:var(--t3);margin-top:2px}
.al-chip{flex-shrink:0}

/* ── Loading / Empty ─────────────────────────────────────────────────── */
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:280px;gap:14px;color:var(--t3)}
.spinner{width:22px;height:22px;border:2px solid var(--b);border-top-color:var(--teal);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center;padding:48px 20px;color:var(--t3);font-size:0.92rem}

/* ── Clickable stat cards ─────────────────────────────────────────────── */
.scard.clickable{cursor:pointer}
.scard.clickable:hover{border-color:rgba(34,211,238,.35);background:var(--card-h)}
.scard.clickable:active{background:var(--card)}

/* ── Client table ─────────────────────────────────────────────────────── */
.tw-scroll{overflow-x:auto}
tr.issue-crit td,tr.issue-crit:hover td{background:rgba(248,113,113,.05)}
tr.issue-warn td,tr.issue-warn:hover td{background:rgba(251,191,36,.04)}
tr.issue-crit td:first-child{border-left:2px solid var(--red)}
tr.issue-warn td:first-child{border-left:2px solid var(--amber)}
.itags{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.fbadge{font-family:var(--mono);font-size:0.62rem;font-weight:600;padding:1px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;display:inline-block}
.fbadge.ax{background:var(--purple-d);color:var(--purple);border:1px solid rgba(167,139,250,.25)}
.fbadge.ac{background:var(--teal-d);color:var(--teal);border:1px solid rgba(34,211,238,.2)}
.fbadge.r{background:var(--green-d);color:var(--green);border:1px solid rgba(52,211,153,.2)}

/* ── Light-mode semantic overrides (applied to all light themes) ─────── */
body.light .ubar{background:rgba(0,0,0,.09)}
body.light th{background:rgba(0,0,0,.025)}
body.light .census-bar-wrap{background:rgba(0,0,0,.07)}
body.light .mesh-dist-bar{background:rgba(0,0,0,.07)}
body.light .rfn-bar-wrap{background:rgba(0,0,0,.09)}
body.light .rfn-ch-bar-wrap{background:rgba(0,0,0,.07)}
body.light .insight-bar{background:rgba(0,0,0,.07)}

/* ── Themes ──────────────────────────────────────────────────────────── */
body.theme-spectra-dark{
  --bg:#07090f;--panel:#0b1020;--card:#101828;--card-h:#162038;
  --b:rgba(148,163,184,.1);--bb:rgba(148,163,184,.18);
  --teal:#22d3ee;--teal-d:rgba(34,211,238,.12);
  --green:#34d399;--green-d:rgba(52,211,153,.12);
  --amber:#fbbf24;--amber-d:rgba(251,191,36,.12);
  --red:#f87171;--red-d:rgba(248,113,113,.12);
  --purple:#a78bfa;--purple-d:rgba(167,139,250,.12);
  --t1:#e2e8f0;--t2:#94a3b8;--t3:#475569;--t4:#2d3f58;
}
body.theme-spectra-light{
  --bg:#f1f5f9;--panel:#e8eef5;--card:#ffffff;--card-h:#f0f6ff;
  --b:rgba(71,85,105,.13);--bb:rgba(71,85,105,.22);
  --teal:#0891b2;--teal-d:rgba(8,145,178,.1);
  --green:#059669;--green-d:rgba(5,150,105,.1);
  --amber:#d97706;--amber-d:rgba(217,119,6,.1);
  --red:#dc2626;--red-d:rgba(220,38,38,.1);
  --purple:#7c3aed;--purple-d:rgba(124,58,237,.1);
  --t1:#1e293b;--t2:#475569;--t3:#64748b;--t4:#cbd5e1;
}
body.theme-nord{
  --bg:#2e3440;--panel:#3b4252;--card:#434c5e;--card-h:#4c566a;
  --b:rgba(216,222,233,.12);--bb:rgba(216,222,233,.22);
  --teal:#88c0d0;--teal-d:rgba(136,192,208,.13);
  --green:#a3be8c;--green-d:rgba(163,190,140,.12);
  --amber:#ebcb8b;--amber-d:rgba(235,203,139,.12);
  --red:#bf616a;--red-d:rgba(191,97,106,.12);
  --purple:#b48ead;--purple-d:rgba(180,142,173,.12);
  --t1:#eceff4;--t2:#d8dee9;--t3:#81a1c1;--t4:#434c5e;
}
body.theme-nord-light{
  --bg:#eceff4;--panel:#e5e9f0;--card:#ffffff;--card-h:#eef1f6;
  --b:rgba(76,86,106,.13);--bb:rgba(76,86,106,.22);
  --teal:#5e81ac;--teal-d:rgba(94,129,172,.1);
  --green:#639162;--green-d:rgba(99,145,98,.1);
  --amber:#c09a4d;--amber-d:rgba(192,154,77,.1);
  --red:#bd424e;--red-d:rgba(189,66,78,.1);
  --purple:#8c6e9c;--purple-d:rgba(140,110,156,.1);
  --t1:#2e3440;--t2:#3b4252;--t3:#4c566a;--t4:#d8dee9;
}

/* ── Restored theme palette (Rosé Pine/Moon/Dawn, Tokyo Night, Emerald, Sapphire, Garnet, Amethyst, Catppuccin, Solarized, High-Vis) ── */
body.theme-emerald{
  --bg:#071810;--panel:#0b2218;--card:#0f2d20;--card-h:#143826;
  --b:rgba(110,231,183,.1);--bb:rgba(110,231,183,.2);
  --teal:#10b981;--teal-d:rgba(16,185,129,.14);
  --green:#34d399;--green-d:rgba(52,211,153,.13);
  --amber:#fbbf24;--amber-d:rgba(251,191,36,.12);
  --red:#f87171;--red-d:rgba(248,113,113,.12);
  --purple:#a78bfa;--purple-d:rgba(167,139,250,.12);
  --t1:#d1fae5;--t2:#6ee7b7;--t3:#34d399;--t4:#0b2218;
}
body.theme-sapphire{
  --bg:#060a1a;--panel:#0d1433;--card:#131e48;--card-h:#1a2a60;
  --b:rgba(147,197,253,.1);--bb:rgba(147,197,253,.2);
  --teal:#60a5fa;--teal-d:rgba(96,165,250,.14);
  --green:#34d399;--green-d:rgba(52,211,153,.12);
  --amber:#fbbf24;--amber-d:rgba(251,191,36,.12);
  --red:#f87171;--red-d:rgba(248,113,113,.12);
  --purple:#a78bfa;--purple-d:rgba(167,139,250,.12);
  --t1:#dbeafe;--t2:#93c5fd;--t3:#3b82f6;--t4:#0d1433;
}
body.theme-garnet{
  --bg:#180710;--panel:#250d1a;--card:#321226;--card-h:#3e1732;
  --b:rgba(253,164,175,.12);--bb:rgba(253,164,175,.22);
  --teal:#f43f5e;--teal-d:rgba(244,63,94,.14);
  --green:#4ade80;--green-d:rgba(74,222,128,.12);
  --amber:#fb923c;--amber-d:rgba(251,146,60,.12);
  --red:#fb7185;--red-d:rgba(251,113,133,.12);
  --purple:#e879f9;--purple-d:rgba(232,121,249,.12);
  --t1:#ffe4e6;--t2:#fda4af;--t3:#fb7185;--t4:#250d1a;
}
body.theme-amethyst{
  --bg:#0e0818;--panel:#160d26;--card:#1e1038;--card-h:#27154a;
  --b:rgba(196,181,253,.1);--bb:rgba(196,181,253,.2);
  --teal:#a78bfa;--teal-d:rgba(167,139,250,.14);
  --green:#34d399;--green-d:rgba(52,211,153,.12);
  --amber:#fbbf24;--amber-d:rgba(251,191,36,.12);
  --red:#f87171;--red-d:rgba(248,113,113,.12);
  --purple:#c4b5fd;--purple-d:rgba(196,181,253,.14);
  --t1:#ede9fe;--t2:#c4b5fd;--t3:#8b5cf6;--t4:#160d26;
}
body.theme-rose-pine{
  --bg:#191724;--panel:#1f1d2e;--card:#26233a;--card-h:#2e2b45;
  --b:rgba(144,140,170,.18);--bb:rgba(144,140,170,.32);
  --teal:#9ccfd8;--teal-d:rgba(156,207,216,.13);
  --green:#8fcdba;--green-d:rgba(143,205,186,.12);
  --amber:#f6c177;--amber-d:rgba(246,193,119,.12);
  --red:#eb6f92;--red-d:rgba(235,111,146,.12);
  --purple:#c4a7e7;--purple-d:rgba(196,167,231,.12);
  --t1:#e0def4;--t2:#908caa;--t3:#6e6a86;--t4:#403d52;
}
body.theme-rose-pine-moon{
  --bg:#232136;--panel:#2a273f;--card:#393552;--card-h:#44415e;
  --b:rgba(144,140,170,.18);--bb:rgba(144,140,170,.32);
  --teal:#9ccfd8;--teal-d:rgba(156,207,216,.13);
  --green:#8fcdba;--green-d:rgba(143,205,186,.12);
  --amber:#f6c177;--amber-d:rgba(246,193,119,.12);
  --red:#eb6f92;--red-d:rgba(235,111,146,.12);
  --purple:#c4a7e7;--purple-d:rgba(196,167,231,.12);
  --t1:#e0def4;--t2:#908caa;--t3:#6e6a86;--t4:#44415a;
}
body.theme-rose-pine-dawn{
  --bg:#faf4ed;--panel:#fffaf3;--card:#f2e9e1;--card-h:#ede6dd;
  --b:rgba(87,82,121,.12);--bb:rgba(87,82,121,.22);
  --teal:#286983;--teal-d:rgba(40,105,131,.1);
  --green:#56949f;--green-d:rgba(86,148,159,.1);
  --amber:#ea9d34;--amber-d:rgba(234,157,52,.1);
  --red:#b4637a;--red-d:rgba(180,99,122,.1);
  --purple:#907aa9;--purple-d:rgba(144,122,169,.1);
  --t1:#575279;--t2:#797593;--t3:#9893a5;--t4:#d4d0e0;
}
body.theme-tokyo-night{
  --bg:#1a1b26;--panel:#1f2035;--card:#24283b;--card-h:#2a2f42;
  --b:rgba(192,202,245,.1);--bb:rgba(192,202,245,.18);
  --teal:#7dcfff;--teal-d:rgba(125,207,255,.12);
  --green:#9ece6a;--green-d:rgba(158,206,106,.12);
  --amber:#e0af68;--amber-d:rgba(224,175,104,.12);
  --red:#f7768e;--red-d:rgba(247,118,142,.12);
  --purple:#9d7cd8;--purple-d:rgba(157,124,216,.12);
  --t1:#c0caf5;--t2:#9aa5ce;--t3:#565f89;--t4:#292e42;
}
body.theme-catppuccin-latte{
  --bg:#eff1f5;--panel:#e6e9ef;--card:#f8f9fc;--card-h:#eef0f6;
  --b:rgba(76,79,105,.12);--bb:rgba(76,79,105,.22);
  --teal:#209fb5;--teal-d:rgba(32,159,181,.1);
  --green:#40a02b;--green-d:rgba(64,160,43,.1);
  --amber:#df8e1d;--amber-d:rgba(223,142,29,.1);
  --red:#d20f39;--red-d:rgba(210,15,57,.1);
  --purple:#8839ef;--purple-d:rgba(136,57,239,.1);
  --t1:#4c4f69;--t2:#6c6f85;--t3:#9ca0b0;--t4:#bcc0cc;
}
body.theme-solarized-light{
  --bg:#fdf6e3;--panel:#eee8d5;--card:#fdf9f1;--card-h:#f5ecce;
  --b:rgba(88,110,117,.13);--bb:rgba(88,110,117,.23);
  --teal:#2aa198;--teal-d:rgba(42,161,152,.1);
  --green:#859900;--green-d:rgba(133,153,0,.1);
  --amber:#b58900;--amber-d:rgba(181,137,0,.1);
  --red:#dc322f;--red-d:rgba(220,50,47,.1);
  --purple:#6c71c4;--purple-d:rgba(108,113,196,.1);
  --t1:#073642;--t2:#586e75;--t3:#839496;--t4:#eee8d5;
}
body.theme-high-vis-ocean{
  --bg:#e0f2fe;--panel:#bae6fd;--card:#ffffff;--card-h:#f0f9ff;
  --b:rgba(3,105,161,.14);--bb:rgba(3,105,161,.26);
  --teal:#0369a1;--teal-d:rgba(3,105,161,.1);
  --green:#15803d;--green-d:rgba(21,128,61,.1);
  --amber:#b45309;--amber-d:rgba(180,83,9,.1);
  --red:#b91c1c;--red-d:rgba(185,28,28,.1);
  --purple:#6d28d9;--purple-d:rgba(109,40,217,.1);
  --t1:#0c4a6e;--t2:#075985;--t3:#0284c7;--t4:#bae6fd;
}
body.theme-high-vis-amber{
  --bg:#fffbeb;--panel:#fef3c7;--card:#ffffff;--card-h:#fffdf5;
  --b:rgba(180,83,9,.14);--bb:rgba(180,83,9,.26);
  --teal:#b45309;--teal-d:rgba(180,83,9,.1);
  --green:#15803d;--green-d:rgba(21,128,61,.1);
  --amber:#d97706;--amber-d:rgba(217,119,6,.12);
  --red:#b91c1c;--red-d:rgba(185,28,28,.1);
  --purple:#7c3aed;--purple-d:rgba(124,58,237,.1);
  --t1:#451a03;--t2:#78350f;--t3:#92400e;--t4:#fef3c7;
}
body.theme-high-vis-forest{
  --bg:#f0fdf4;--panel:#dcfce7;--card:#ffffff;--card-h:#f7fef9;
  --b:rgba(22,101,52,.14);--bb:rgba(22,101,52,.26);
  --teal:#166534;--teal-d:rgba(22,101,52,.1);
  --green:#15803d;--green-d:rgba(21,128,61,.12);
  --amber:#a16207;--amber-d:rgba(161,98,7,.1);
  --red:#b91c1c;--red-d:rgba(185,28,28,.1);
  --purple:#6d28d9;--purple-d:rgba(109,40,217,.1);
  --t1:#14532d;--t2:#166534;--t3:#16a34a;--t4:#dcfce7;
}
body.theme-high-vis-crimson{
  --bg:#fff1f2;--panel:#ffe4e6;--card:#ffffff;--card-h:#fff5f6;
  --b:rgba(159,18,57,.14);--bb:rgba(159,18,57,.26);
  --teal:#9f1239;--teal-d:rgba(159,18,57,.1);
  --green:#15803d;--green-d:rgba(21,128,61,.1);
  --amber:#b45309;--amber-d:rgba(180,83,9,.1);
  --red:#be123c;--red-d:rgba(190,18,60,.12);
  --purple:#7c3aed;--purple-d:rgba(124,58,237,.1);
  --t1:#4c0519;--t2:#881337;--t3:#be123c;--t4:#ffe4e6;
}

/* ── AP card health states ───────────────────────────────────────────── */
.apc.offline{border-color:rgba(248,113,113,.5)!important;background:rgba(248,113,113,.05)}
.apc.healthy{border-color:rgba(52,211,153,.3)!important;background:rgba(52,211,153,.03)}
.apc.issues{border-color:rgba(251,191,36,.35)!important}
.offline-badge{font-family:var(--mono);font-size:0.69rem;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.1em;background:var(--red-d);border:1px solid rgba(248,113,113,.3);padding:1px 6px;border-radius:3px;white-space:nowrap}

/* ── Sortable table headers ──────────────────────────────────────────── */
th.srt{cursor:pointer;user-select:none}
th.srt:hover{color:var(--teal)}
th.srt.asc .th-label::after{content:' ▲';font-size:0.62rem;opacity:.6}
th.srt.desc .th-label::after{content:' ▼';font-size:0.62rem;opacity:.6}

/* ── Client expand row ───────────────────────────────────────────────── */
tr.expandable{cursor:pointer}
tr.cxr td{background:var(--card-h)!important;padding:0!important}
.cxr-inner{padding:10px 14px 14px}
.cxr-timeline{display:flex;flex-direction:column;max-height:240px;overflow-y:auto}
.cxr-evt{display:flex;align-items:flex-start;gap:8px;padding:5px 0;border-bottom:1px solid var(--b);font-size:0.85rem}
.cxr-evt:last-child{border-bottom:none}
.cxr-gap{font-family:var(--mono);font-size:0.69rem;color:var(--amber);margin-left:auto;flex-shrink:0;padding-left:10px;white-space:nowrap}

/* ── Activity pulse / sparkline ──────────────────────────────────────── */
.activity-pulse{background:var(--card);border:1px solid var(--b);border-radius:var(--rl);padding:14px 18px;margin-bottom:20px}
/* Activity layout: a narrow stat rail beside a rigid sparkline grid.  Both
   columns stretch to the same height; each sparkline's chart area flexes to fill
   that height (so the bars/line scale with the widget) and the rail's three
   numbers distribute over the same span, keeping number and chart baselines
   aligned instead of one column floating. */
.pulse-layout{display:flex;gap:24px;align-items:stretch}
.pulse-stats{display:flex;flex-direction:column;justify-content:space-between;gap:10px;flex-shrink:0;min-width:118px}
.ps-item{display:flex;flex-direction:column;gap:2px}
.ps-val{font-family:var(--mono);font-size:1.6rem;font-weight:500;line-height:1}
.ps-lbl{font-size:0.69rem;text-transform:uppercase;letter-spacing:.07em;color:var(--t3)}
.ps-trend{font-family:var(--mono);font-size:0.69rem;margin-top:1px}
.ps-trend.up{color:var(--amber)}.ps-trend.dn{color:var(--green)}
.spark-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;flex:1;min-width:0}
.spark-item{min-width:0;display:flex;flex-direction:column}
/* position:relative + an absolutely-positioned .spark-wrap gives the bars a
   definite-height containing block, so their percentage heights resolve instead
   of collapsing to the 2px floor (which also killed the hover/tooltip target). */
.spark-chart{flex:1;min-height:40px;position:relative}
.spark-wrap{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px}
.spark-b{flex:1;border-radius:2px 2px 0 0;min-height:2px}
@media(max-width:760px){.pulse-layout{flex-direction:column;gap:14px}.pulse-stats{flex-direction:row;justify-content:flex-start;gap:24px;flex-wrap:wrap}}

/* ── Pipeline Health (overview ingest widgets) ───────────────────────── */
.pipeline-health{margin-bottom:20px}
.pipe-grid{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:12px}
.pipe-card,.pipe-stats{background:var(--card);border:1px solid var(--b);border-radius:var(--rl);padding:12px 14px}
.pipe-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.pipe-label{font-size:0.69rem;text-transform:uppercase;letter-spacing:.07em;color:var(--t3)}
.pipe-val{font-family:var(--mono);font-size:1.25rem;font-weight:500;line-height:1}
.pipe-val.teal{color:var(--teal)}.pipe-val.amber{color:var(--amber)}
.pipe-unit{font-size:0.62rem;color:var(--t3);margin-left:2px}
.pipe-spark{display:block;width:100%}
.pipe-spark-empty,.pipe-empty{display:flex;align-items:center;justify-content:center;color:var(--t3);font-size:11px}
.pipe-empty{padding:18px;background:var(--card);border:1px solid var(--b);border-radius:var(--rl)}
.pipe-sub{font-size:0.68rem;color:var(--t3);margin-top:5px}
.pipe-stats{display:flex;justify-content:space-around;gap:8px}
.pipe-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;flex:1;min-width:0}
.pipe-stat-val{font-family:var(--mono);font-size:1.25rem;font-weight:500;line-height:1.1;display:flex;align-items:center;min-height:20px}
.pipe-stat-val.green{color:var(--green)}.pipe-stat-val.amber{color:var(--amber)}.pipe-stat-val.red{color:var(--red)}.pipe-stat-val.teal{color:var(--teal)}
.pipe-stat-lbl{font-size:0.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--t2)}
.pipe-stat-sub{font-size:0.63rem;color:var(--t3);line-height:1.3;margin-top:2px}
@media(max-width:880px){.pipe-grid{grid-template-columns:1fr}}

/* ── DFS Analyzer ─────────────────────────────────────────────────────── */
.dfs-verdict-card{background:var(--card);border:1px solid var(--b);border-radius:var(--rl);padding:16px 18px;margin-bottom:10px}
.dfs-verdict-main{display:flex;gap:14px;align-items:flex-start}
.dfs-verdict-icon{flex-shrink:0;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700}
.dfs-verdict-icon.green{background:var(--green-d,rgba(52,211,153,.12));color:var(--green)}
.dfs-verdict-icon.amber{background:var(--amber-d,rgba(251,191,36,.12));color:var(--amber)}
.dfs-verdict-icon.red{background:var(--red-d,rgba(248,113,113,.12));color:var(--red)}
.dfs-verdict-head{font-size:1rem;font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dfs-verdict-sum{font-size:0.85rem;color:var(--t2);line-height:1.55}
.dfs-rec{margin-top:8px;font-size:0.85rem;color:var(--t1)}
.dfs-stats{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.dfs-stat{flex:1;min-width:80px;text-align:center;background:var(--panel);border:1px solid var(--b);border-radius:var(--r);padding:8px 6px}
.dfs-stat-val{font-family:var(--mono);font-size:1.5rem;font-weight:500;line-height:1}
.dfs-stat-val.green{color:var(--green)}.dfs-stat-val.amber{color:var(--amber)}.dfs-stat-val.red{color:var(--red)}.dfs-stat-val.teal{color:var(--teal)}
.dfs-stat-lbl{font-size:0.62rem;text-transform:uppercase;letter-spacing:.05em;color:var(--t3);margin-top:3px}
.dfs-note{font-size:0.78rem;color:var(--t3);line-height:1.55;margin-bottom:20px;padding:0 2px}
.dfs-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:0.72rem;color:var(--t2);margin-bottom:12px}
.dfs-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}
.dfs-dot.green{background:var(--green)}.dfs-dot.amber{background:var(--amber)}.dfs-dot.red{background:var(--red)}
.dfs-matrix-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:20px}
.dfs-cell{background:var(--card);border:1px solid var(--b);border-radius:var(--rl);padding:10px 12px;border-left-width:3px;cursor:default;transition:transform .12s}
.dfs-cell:hover{transform:translateY(-1px)}
.dfs-cell.green{border-left-color:var(--green)}.dfs-cell.amber{border-left-color:var(--amber)}.dfs-cell.red{border-left-color:var(--red)}
.dfs-cell.in-use{box-shadow:inset 0 0 0 1px var(--teal)}
.dfs-cell-top{display:flex;justify-content:space-between;align-items:center}
.dfs-cell-ch{font-family:var(--mono);font-weight:600;font-size:0.92rem}
.dfs-cell-icon{font-weight:700;font-size:0.85rem}
.dfs-cell-icon.green{color:var(--green)}.dfs-cell-icon.amber{color:var(--amber)}.dfs-cell-icon.red{color:var(--red)}
/* Filled tint pill so the SAFE/CAUTION/AVOID designation reads clearly in every theme. */
.dfs-cell-verdict{display:inline-block;font-size:0.6rem;font-weight:800;letter-spacing:.08em;margin-top:3px;padding:1px 6px;border-radius:4px}
.dfs-cell-verdict.green{color:var(--green);background:var(--green-d);background:color-mix(in srgb,var(--green) 18%,transparent)}
.dfs-cell-verdict.amber{color:var(--amber);background:var(--amber-d);background:color-mix(in srgb,var(--amber) 18%,transparent)}
.dfs-cell-verdict.red{color:var(--red);background:var(--red-d);background:color-mix(in srgb,var(--red) 18%,transparent)}
.dfs-cell-meta{display:flex;gap:9px;margin-top:7px;font-family:var(--mono);font-size:0.68rem;color:var(--t2)}
.dfs-cell-inuse{font-size:0.6rem;color:var(--teal);margin-top:5px;text-transform:uppercase;letter-spacing:.05em}
.dfs-radar-clean,.dfs-radar-row{font-size:0.82rem}
.dfs-radar-clean{color:var(--green);background:rgba(52,211,153,.06);border:1px solid var(--green-d,rgba(52,211,153,.2));border-radius:var(--rl);padding:14px 16px}
.dfs-radar-list{background:var(--card);border:1px solid var(--b);border-radius:var(--rl);overflow:hidden}
.dfs-radar-row{display:flex;gap:12px;align-items:center;padding:9px 14px;border-bottom:1px solid var(--b)}
.dfs-radar-row:last-child{border-bottom:none}
.dfs-radar-ch{font-family:var(--mono);font-weight:600;color:var(--amber);flex-shrink:0;min-width:54px}
.dfs-radar-msg{flex:1;color:var(--t2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dfs-radar-ago{color:var(--t3);font-size:0.72rem;flex-shrink:0}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media(max-width:1100px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.grid4,.grid3,.grid2{grid-template-columns:1fr}.content{padding:14px}}

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);z-index:1000;display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.modal-backdrop.open{display:flex}
.modal{background:var(--panel);border:1px solid var(--bb);border-radius:12px;width:100%;max-width:740px;display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,.6);margin:auto}
.modal-header{padding:16px 20px;border-bottom:1px solid var(--b);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-title{font-size:1.08rem;font-weight:600;color:var(--t1)}
.lbl-edit-btn{background:none;border:none;cursor:pointer;color:var(--t3);font-size:0.92rem;padding:0 5px;opacity:.45;transition:opacity .15s,color .15s;line-height:1;vertical-align:middle}
.lbl-edit-btn:hover{opacity:1;color:var(--teal)}
.lbl-custom-badge{font-size:0.62rem;color:var(--t3);margin-left:3px;vertical-align:middle;opacity:.7}
.modal-close{background:none;border:none;color:var(--t3);cursor:pointer;font-size:1.38rem;padding:2px 6px;line-height:1;border-radius:4px;transition:all .15s}
.modal-close:hover{color:var(--t1);background:var(--b)}
.modal-tabs{display:flex;border-bottom:1px solid var(--b);flex-shrink:0;background:rgba(255,255,255,.02)}
.modal-tab{padding:9px 16px;font-size:0.92rem;font-weight:500;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap}
.modal-tab:hover{color:var(--t2)}
.modal-tab.active{color:var(--teal);border-bottom-color:var(--teal)}
.modal-body{padding:20px;overflow-y:auto;max-height:70vh}
.modal-section{margin-bottom:22px}
.modal-section:last-child{margin-bottom:0}
.modal-section-title{font-size:0.77rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);margin-bottom:10px}
.modal-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modal-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.modal-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:600px){.modal-grid3{grid-template-columns:1fr 1fr}.modal-grid4{grid-template-columns:1fr 1fr}.modal-grid2{grid-template-columns:1fr}}
.rssi-cell{cursor:pointer;transition:background .12s}
.rssi-cell:hover{background:var(--card-h)}
.modal-kv{background:var(--card);border:1px solid var(--b);border-radius:var(--r);padding:10px 13px}
/* RSSI coverage-summary cards — top status stripe matching the reported state. */
.rssi-sum{position:relative;overflow:hidden}
.rssi-sum::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:transparent;pointer-events:none}
.rssi-sum.rssi-sum-g::before{background:var(--green)}
.rssi-sum.rssi-sum-a::before{background:var(--amber)}
.rssi-sum.rssi-sum-r::before{background:var(--red)}
.modal-kv-label{font-size:0.69rem;text-transform:uppercase;letter-spacing:.07em;color:var(--t3);margin-bottom:4px}
.modal-kv-value{font-family:var(--mono);font-size:1rem;color:var(--t1);word-break:break-all}
.modal-kv-value.link{color:var(--teal);cursor:pointer;text-decoration:underline;text-decoration-color:rgba(34,211,238,.4)}
.modal-kv-value.link:hover{text-decoration-color:var(--teal)}
.remediation-card{background:var(--card);border:1px solid var(--b);border-left:3px solid var(--b);border-radius:var(--r);padding:13px 16px;margin-bottom:10px}
.remediation-card.crit{border-left-color:var(--red)}
.remediation-card.warn{border-left-color:var(--amber)}
.remediation-card.info{border-left-color:var(--teal)}
.remediation-card:last-child{margin-bottom:0}
.rem-title{font-size:0.92rem;font-weight:600;margin-bottom:6px;color:var(--t1)}
.rem-body{font-size:0.85rem;color:var(--t2);line-height:1.6}
.rem-body strong{color:var(--t1)}
/* ── Health Score Ring ────────────────────────────────────────────────────── */
.hs-body{display:flex;align-items:center;gap:16px;margin-top:10px}
.health-ring{width:76px;height:76px;position:relative;flex-shrink:0}
/* soft score-coloured halo behind the ring */
.health-ring::before{content:'';position:absolute;inset:9px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--hs-clr,#34d399) 26%,transparent),transparent 70%);
  filter:blur(3px);pointer-events:none}
.health-ring svg{position:relative;transform:rotate(-90deg);overflow:visible}
/* Gradient arc glows in its score colour. Two motion modes, both applied by the
   render code (see the buildHealthCardHTML callers) so an unrelated grid rebuild
   never replays either: .hs-animate sweeps up from empty on the *initial* draw,
   .hs-tween walks from the previous arc position to the new one on every later
   score change (a rebuild would otherwise restart the sweep from zero). */
.hs-arc{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--hs-clr,#34d399) 60%,transparent))}
.hs-arc.hs-animate{animation:hsSweep .9s cubic-bezier(.34,1.1,.5,1) both}
.hs-arc.hs-tween{transition:stroke-dashoffset .7s cubic-bezier(.34,1.1,.5,1)}
@keyframes hsSweep{from{stroke-dashoffset:var(--hs-circ)}to{stroke-dashoffset:var(--hs-off)}}
@media (prefers-reduced-motion:reduce){
  .hs-arc.hs-animate{animation:none}
  .hs-arc.hs-tween{transition:none}
}
.health-score-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.health-score-val{font-family:var(--mono);font-size:2.1rem;font-weight:600;line-height:1}
.hs-detail{flex:1;min-width:0}
.hs-band{font-family:var(--mono);font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.hs-factors{display:flex;flex-direction:column;gap:6px}
.hs-factor{display:flex;align-items:baseline;gap:9px;font-size:0.78rem;color:var(--t2);line-height:1.35}
.hs-deduct{flex-shrink:0;font-family:var(--mono);font-size:0.72rem;font-weight:600;padding:1px 6px;border-radius:6px;min-width:32px;text-align:center}
.hs-deduct.crit{color:var(--red);background:var(--red-d)}
.hs-deduct.warn{color:var(--amber);background:var(--amber-d)}
.hs-flabel{min-width:0}
.hs-allgood{font-size:0.82rem;color:var(--green);font-weight:500}
/* ── Incident Feed ───────────────────────────────────────────────────────── */
.incident-feed{background:var(--card);border:1px solid var(--b);border-radius:var(--rl);margin-bottom:20px;overflow:hidden}
.incident-item{display:flex;align-items:flex-start;gap:10px;padding:11px 16px;border-bottom:1px solid var(--b);cursor:pointer;transition:background .15s}
.incident-item:hover{background:var(--card-h)}
.incident-item:last-child{border-bottom:none}
.incident-bar{width:3px;min-height:32px;border-radius:2px;flex-shrink:0;align-self:stretch}
.incident-bar.crit{background:var(--red)}.incident-bar.warn{background:var(--amber)}.incident-bar.ok{background:var(--green)}
.incident-icon{font-size:1.08rem;flex-shrink:0;width:20px;text-align:center;padding-top:1px}
.incident-body{flex:1;min-width:0}
.incident-title{font-size:0.92rem;font-weight:500;line-height:1.35}
.incident-meta{font-size:0.77rem;color:var(--t3);margin-top:3px}
.incident-right{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
/* ── Narrative Panel ─────────────────────────────────────────────────────── */
.narrative-panel{background:var(--card);border:1px solid var(--bb);border-radius:var(--rl);padding:16px 20px;margin-bottom:20px;display:flex;align-items:flex-start;gap:14px}
.narrative-icon{font-size:1.69rem;flex-shrink:0;line-height:1;padding-top:2px}
.narrative-body{flex:1}
.narrative-title{font-size:0.77rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);margin-bottom:6px}
.narrative-text{font-size:0.92rem;color:var(--t2);line-height:1.7}
.narrative-text strong{color:var(--t1);font-weight:600}
.nar-link{cursor:pointer;text-decoration:underline dotted;text-decoration-color:rgba(148,163,184,.4);text-underline-offset:3px;border-radius:2px}
.nar-link:hover{text-decoration-color:var(--t2)}
/* ── Insight Cards ───────────────────────────────────────────────────────── */
.insights-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:20px}
.insight-card{background:var(--card);border:1px solid var(--b);border-radius:var(--rl);padding:14px 16px;display:flex;flex-direction:column}
.insight-label{font-size:0.69rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);margin-bottom:6px}
.insight-value{font-family:var(--mono);font-size:1.69rem;font-weight:500;line-height:1;margin-bottom:5px}
.insight-value.green{color:var(--green)}.insight-value.amber{color:var(--amber)}.insight-value.red{color:var(--red)}.insight-value.teal{color:var(--teal)}
/* flex:1 lets the description fill remaining height so the bar below stays
   bottom-aligned across cards of differing text length (grid stretches rows). */
.insight-text{font-size:0.85rem;color:var(--t2);line-height:1.5;flex:1}
/* Card trend sparkline (#7) — sits at the top of stat/insight cards. */
.card-spark{display:block;width:100%;height:16px;margin-bottom:8px;opacity:.7;pointer-events:none}
.insight-bar{height:3px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;margin-top:9px}
.insight-bar-seg{display:flex;gap:1px}
.apload-seg{height:100%;min-width:1px;animation:barGrow .5s cubic-bezier(.4,0,.2,1);transform-origin:left center}
.apload-seg.lo{background:var(--green)}.apload-seg.md{background:var(--amber)}.apload-seg.hi{background:var(--red)}
body.no-bar-anim .apload-seg{animation:none}
body.light .insight-bar{background:rgba(0,0,0,.07)}

/* ── Tuning Tab ───────────────────────────────────────────────────────────── */
.qw-item{background:var(--card);border:1px solid var(--b);border-left:3px solid var(--b);border-radius:var(--r);padding:14px 16px;margin-bottom:10px}
.qw-item.crit{border-left-color:var(--red)}.qw-item.warn{border-left-color:var(--amber)}.qw-item.info{border-left-color:var(--teal)}
.qw-header{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.qw-sev{font-family:var(--mono);font-size:0.69rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:3px;flex-shrink:0}
.qw-sev.crit{background:var(--red-d);color:var(--red)}.qw-sev.warn{background:var(--amber-d);color:var(--amber)}.qw-sev.info{background:var(--teal-d);color:var(--teal)}
.qw-title{font-size:0.92rem;font-weight:600;color:var(--t1)}
.qw-detail{font-size:0.85rem;color:var(--t2);line-height:1.65;margin-bottom:7px}
.qw-fix{font-size:0.77rem;color:var(--t3);line-height:1.5}
.qw-fix strong{color:var(--teal);font-style:normal}
.qw-ch-rec{margin-top:5px;font-family:var(--mono);font-size:9.5px;color:var(--t2)}
.qw-ch-delta{color:var(--t3)}
.qw-impact{font-size:0.77rem;color:var(--green);margin-top:5px;line-height:1.4}
/* Roaming & Reconnects — Summary & Actions widget */
.rm-sum-head{font-size:0.92rem;color:var(--t2);line-height:1.5;margin-bottom:14px}
.rm-sum-head strong{color:var(--t1)}
.rm-sum-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:18px}
.rm-sum-subtitle{font-size:0.77rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);margin:0 0 10px}
.rm-sum-actions{display:flex;flex-direction:column}
.rm-sum-line{font-size:0.85rem;color:var(--t2);padding:6px 0;line-height:1.5}
.rm-sum-line.ok{color:var(--green)}
.coherence-row{display:flex;align-items:baseline;gap:8px;font-size:0.85rem;padding:7px 10px;border-radius:var(--r);background:var(--panel)}
.coherence-row.crit{border-left:3px solid var(--red)}.coherence-row.warn{border-left:3px solid var(--amber)}
.coherence-desc{flex:1;color:var(--t2);line-height:1.55}
.coherence-fix{font-size:0.77rem;color:var(--t3);white-space:nowrap}
.census-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
@media(max-width:800px){.census-grid{grid-template-columns:1fr}}
.census-card{background:var(--card);border:1px solid var(--b);border-radius:var(--rl);padding:14px 16px}
.census-title{font-size:0.77rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);margin-bottom:12px}
.census-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.census-label{font-size:0.85rem;color:var(--t2);width:110px;flex-shrink:0;white-space:nowrap}
.census-bar-wrap{flex:1;height:8px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden}
body.light .census-bar-wrap{background:rgba(0,0,0,.07)}
.census-bar{height:100%;border-radius:4px;transition:width .3s ease}
.census-count{font-family:var(--mono);font-size:0.85rem;color:var(--t1);width:28px;text-align:right;flex-shrink:0}
.census-pct{font-family:var(--mono);font-size:0.77rem;color:var(--t3);width:34px;text-align:right;flex-shrink:0}
.census-note{font-size:0.77rem;line-height:1.5;margin-top:8px;padding-top:8px;border-top:1px solid var(--b)}
.ch-band{margin-bottom:20px}
.ch-band-label{font-size:0.77rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);margin-bottom:9px}
.ch-grid{display:flex;flex-wrap:wrap;gap:6px}
.ch-cell{width:56px;height:54px;border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--b);font-size:0.77rem;cursor:default;transition:border-color .15s}
.ch-cell.our{border-color:rgba(34,211,238,.45);background:var(--teal-d)}
.ch-cell.conflict{border-color:rgba(248,113,113,.55);background:var(--red-d)}
.ch-cell.neighbor{border-color:rgba(251,191,36,.35);background:var(--amber-d)}
.ch-cell.empty-ch{opacity:.35}
.ch-num{font-family:var(--mono);font-size:0.92rem;font-weight:600;color:var(--t1);line-height:1}
.ch-sub{font-size:0.62rem;color:var(--t3);margin-top:3px;text-align:center;line-height:1.2;padding:0 3px}
.ch-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:0.77rem;color:var(--t3);margin-bottom:14px}
.ch-legend-dot{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:middle;margin-right:4px;border:1px solid transparent}

/* ── Mesh Tab ─────────────────────────────────────────────────────────────── */
.mesh-topo-wrap{background:var(--card);border:1px solid var(--b);border-radius:var(--rl);padding:20px 20px 16px;margin-bottom:20px;overflow:hidden}
.mesh-topo-wrap svg{display:block;width:100%;height:100%;overflow:visible}
.mesh-dist-bar{height:8px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden}
body.light .mesh-dist-bar{background:rgba(0,0,0,.07)}
.mesh-dist-fill{height:100%;border-radius:4px;transition:width .3s ease}
.mesh-rate-pair{display:flex;gap:4px;align-items:baseline}
.mesh-rate-pair .up{color:var(--teal)}.mesh-rate-pair .dn{color:var(--green)}

/* ── RF Neighbors Tab ─────────────────────────────────────────────────────── */
/* Matches .tw (the canonical table wrapper) — it was the only table card without a
   background, so the page --bg showed through instead of --card. */
.rfn-wrap{background:var(--card);overflow-y:auto;max-height:560px;border:1px solid var(--b);border-radius:var(--rl);margin-bottom:20px}
.rfn-wrap table{width:100%;border-collapse:collapse}
.rfn-wrap thead tr:first-child th{position:sticky;top:0;z-index:2;background:var(--panel)}
body.light .rfn-wrap thead tr:first-child th{background:var(--panel)}

/* Fleet table (#fleet-body) — internal scroll with a pinned header row. The
   gateway list spans every site (500+), so give it its own scrollport and stick
   the header. This overrides .tw's overflow:hidden, which would otherwise trap
   stickiness in a non-scrolling box (a sticky header only pins inside a
   scrolling ancestor). Opaque th background for the same reason as .rfn-wrap. */
#fleet-body{overflow:auto;max-height:calc(100vh - 300px);min-height:200px}
#fleet-body thead th{position:sticky;top:0;z-index:2;background:var(--panel)}
body.light #fleet-body thead th{background:var(--panel)}
.th-with-filter{vertical-align:top}
.th-filter-sel{display:block;width:100%;margin-top:5px;background:var(--card);color:var(--t2);border:1px solid var(--b);border-radius:4px;font-size:0.85rem;padding:2px 5px;cursor:pointer;font-weight:400;letter-spacing:0}
body.light .th-filter-sel{background:var(--bg)}
.th-filter-sel:focus{outline:none;border-color:var(--teal)}
.rfn-bar-wrap{width:54px;height:4px;background:rgba(255,255,255,.09);border-radius:2px;display:inline-block;vertical-align:middle;margin-right:5px;flex-shrink:0}
body.light .rfn-bar-wrap{background:rgba(0,0,0,.09)}
.rfn-bar{height:100%;border-radius:2px;transition:width .3s}
.rfn-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-bottom:16px}
.rfn-sum-card{background:var(--card);border:1px solid var(--b);border-radius:var(--r);padding:12px 14px}
.rfn-sum-title{font-size:0.69rem;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);font-weight:600;margin-bottom:6px}
.rfn-sum-val{font-family:var(--mono);font-size:1.54rem;font-weight:700;line-height:1;color:var(--t1)}
.rfn-sum-sub{font-size:0.77rem;color:var(--t3);margin-top:4px;line-height:1.5}
.rfn-ch-row{display:flex;align-items:center;gap:6px;margin-top:5px}
.rfn-ch-num{font-family:var(--mono);font-size:0.77rem;color:var(--t2);width:36px;flex-shrink:0}
.rfn-ch-bar-wrap{flex:1;height:5px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden}
body.light .rfn-ch-bar-wrap{background:rgba(0,0,0,.07)}
.rfn-ch-bar{height:100%;border-radius:3px;transition:width .3s}
.rfn-ch-count{font-family:var(--mono);font-size:0.77rem;color:var(--t3);width:20px;text-align:right;flex-shrink:0}
.rfn-rec{font-size:0.85rem;color:var(--t2);margin-top:5px;line-height:1.5;padding-left:2px}
.rfn-rec::before{content:'→ ';color:var(--teal);font-weight:600}

/* ── Timestamp tooltips ───────────────────────────────────────────────────── */
.ts-rel{border-bottom:1px dashed rgba(148,163,184,.35);cursor:default;text-decoration:none}
.ts-rel:hover{border-bottom-color:var(--teal)}

/* ── Settings Modal ───────────────────────────────────────────────────────── */
.settings-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:1100;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .18s}
.settings-backdrop.open{opacity:1;pointer-events:all}
.settings-modal{background:var(--card);border:1px solid var(--b);border-radius:var(--rl);width:660px;max-width:calc(100vw - 32px);max-height:88vh;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,.55);transform:translateY(8px);transition:transform .18s}
.settings-backdrop.open .settings-modal{transform:translateY(0)}
.settings-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--b);flex-shrink:0}
.settings-title{font-size:1.08rem;font-weight:600;color:var(--t1);display:flex;align-items:center;gap:8px}
.settings-title svg{opacity:.7}
.settings-close{background:none;border:none;color:var(--t2);font-size:1.23rem;cursor:pointer;padding:2px 6px;border-radius:4px;line-height:1}
.settings-close:hover{color:var(--t1);background:var(--card-h)}

.settings-tabs{display:flex;gap:2px;padding:10px 20px 0;border-bottom:1px solid var(--b);flex-shrink:0;overflow-x:auto;scrollbar-width:thin}
.stab{font-size:0.85rem;font-weight:500;color:var(--t2);padding:6px 12px;cursor:pointer;border-bottom:2px solid transparent;border-radius:4px 4px 0 0;margin-bottom:-1px;transition:color .12s;white-space:nowrap;flex-shrink:0}
.stab:hover{color:var(--t1)}
.stab.active{color:var(--teal);border-bottom-color:var(--teal)}
/* Fleet site-detail modal key/value rows */
.fd-row{display:flex;justify-content:space-between;gap:16px;padding:4px 0;font-size:12.5px;border-bottom:1px solid var(--b)}
.fd-row:last-child{border-bottom:none}
.fd-k{color:var(--t3);flex:0 0 auto}
.fd-v{color:var(--t1);text-align:right;word-break:break-word}

.settings-body{overflow-y:auto;padding:20px;flex:1;min-height:0}

.pref-section{margin-bottom:24px}
.pref-section-title{font-size:0.69rem;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.pref-section-title::after{content:'';flex:1;height:1px;background:var(--b)}

.pref-row{margin-bottom:18px}
.pref-row:last-child{margin-bottom:0}
.pref-row-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.pref-label{font-size:0.92rem;font-weight:500;color:var(--t1)}
.pref-value-badge{font-family:var(--mono);font-size:0.85rem;font-weight:600;color:var(--teal);background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.2);border-radius:4px;padding:2px 7px;min-width:52px;text-align:center}
.pref-desc{font-size:0.77rem;color:var(--t3);line-height:1.5;margin-bottom:6px}

/* Slider */
.pref-slider-wrap{position:relative;margin-bottom:6px}
.pref-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;outline:none;cursor:pointer;background:var(--b)}
.pref-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--teal);border:2px solid var(--card);box-shadow:0 0 0 1px var(--teal);cursor:pointer;transition:box-shadow .12s}
.pref-slider::-webkit-slider-thumb:hover{box-shadow:0 0 0 4px rgba(34,211,238,.2)}
.pref-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--teal);border:2px solid var(--card);cursor:pointer}
.pref-zone-bar{display:flex;height:3px;border-radius:2px;overflow:hidden;margin-top:4px;gap:1px}
.pref-zone-bar > div{border-radius:1px}
.pref-slider-ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:0.69rem;color:var(--t3);margin-top:3px}

/* Toggle switch */
.pref-toggle-wrap{display:flex;align-items:center;gap:10px}
.pref-toggle{position:relative;width:36px;height:20px;flex-shrink:0}
.pref-toggle input{opacity:0;width:0;height:0;position:absolute}
.pref-toggle-track{position:absolute;inset:0;background:var(--b);border-radius:20px;cursor:pointer;transition:background .15s}
.pref-toggle input:checked ~ .pref-toggle-track{background:var(--teal)}
.pref-toggle-thumb{position:absolute;top:3px;left:3px;width:14px;height:14px;background:var(--t1);border-radius:50%;transition:transform .15s;pointer-events:none}
.pref-toggle input:checked ~ .pref-toggle-thumb{transform:translateX(16px)}
.pref-toggle-label{font-size:0.92rem;color:var(--t2)}

/* Theme pills */
.theme-pills{display:flex;gap:4px}
.theme-pill{padding:5px 16px;border-radius:var(--r);border:1px solid var(--b);font-size:0.85rem;font-weight:500;color:var(--t2);cursor:pointer;transition:all .12s;background:transparent}
.theme-pill.active{background:var(--teal);border-color:var(--teal);color:#000;font-weight:600}
.theme-pill:hover:not(.active){border-color:var(--bb);color:var(--t1)}

/* Select field */
.pref-select{background:var(--card);border:1px solid var(--bb);color:var(--t1);font-family:var(--font);font-size:0.92rem;padding:5px 10px;border-radius:var(--r);outline:none;cursor:pointer;width:100%}
.pref-select:focus{border-color:var(--teal)}

/* Impact chip */
.pref-impact{display:flex;align-items:center;gap:8px;margin-top:5px;min-height:20px}
.pref-impact-chip{font-size:0.77rem;font-weight:500;padding:2px 8px;border-radius:10px;border:1px solid;line-height:1.6}
.pref-impact-chip.ok{color:var(--green);border-color:rgba(52,211,153,.3);background:rgba(52,211,153,.08)}
.pref-impact-chip.warn{color:var(--amber);border-color:rgba(251,191,36,.3);background:rgba(251,191,36,.08)}
.pref-impact-chip.crit{color:var(--red);border-color:rgba(248,113,113,.3);background:rgba(248,113,113,.08)}
.pref-impact-link{font-size:0.77rem;color:var(--teal);cursor:pointer;text-decoration:none}
.pref-impact-link:hover{text-decoration:underline}

/* Mini health gauge */
.settings-health-bar{background:var(--panel);border:1px solid var(--b);border-radius:var(--r);padding:12px 16px;display:flex;align-items:center;gap:14px;margin-bottom:20px}
.shb-grade{font-family:var(--mono);font-size:2.15rem;font-weight:800;line-height:1;width:36px;text-align:center}
.shb-track-wrap{flex:1}
.shb-label{font-size:0.69rem;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);margin-bottom:5px;font-weight:600}
.shb-track{height:6px;background:var(--b);border-radius:3px;overflow:hidden;position:relative}
.shb-fill{height:100%;border-radius:3px;transition:width .4s ease, background-color .4s ease}
.shb-score{font-family:var(--mono);font-size:0.85rem;color:var(--t2);margin-top:4px}
.shb-note{font-size:0.69rem;color:var(--t3);text-align:right;min-width:100px}

/* ── Theme grid ───────────────────────────────────────────────────────────── */
.theme-group{margin-bottom:16px}
.theme-group-label{font-size:0.69rem;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.theme-group-label::after{content:'';flex:1;height:1px;background:var(--b)}
.theme-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(max-width:500px){.theme-grid{grid-template-columns:repeat(2,1fr)}}
.theme-swatch{cursor:pointer;border-radius:var(--r);border:2px solid transparent;transition:border-color .18s,transform .15s,box-shadow .18s;overflow:hidden;position:relative}
.theme-swatch:hover{transform:translateY(-3px);border-color:rgba(34,211,238,.35);box-shadow:0 6px 18px rgba(0,0,0,.28)}
.theme-swatch.active{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),0 4px 14px rgba(34,211,238,.2)}
.theme-swatch.active::after{content:'✓';position:absolute;top:5px;right:5px;width:14px;height:14px;border-radius:50%;background:var(--teal);color:#000;font-size:0.62rem;font-weight:800;line-height:14px;text-align:center;z-index:2}
.theme-preview{height:68px;display:flex;flex-direction:column;overflow:hidden;position:relative}
.theme-preview-header{height:10px;display:flex;align-items:center;padding:0 5px;gap:3px;flex-shrink:0}
.theme-preview-body{flex:1;display:flex;gap:3px;padding:4px;overflow:hidden}
.theme-preview-sidebar{width:16px;border-radius:2px;padding:3px 2px;display:flex;flex-direction:column;gap:3px;flex-shrink:0}
.theme-preview-content{flex:1;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.theme-preview-card{border-radius:2px;padding:3px 4px;display:flex;flex-direction:column;gap:2px}
.theme-swatch-name{font-size:0.69rem;font-weight:500;color:var(--t2);text-align:center;padding:4px 2px 5px;background:var(--card);border-top:1px solid var(--b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.theme-swatch.active .theme-swatch-name{color:var(--teal);font-weight:700}

/* ── Connectivity banner ──────────────────────────────────────────────────── */
#conn-banner{background:var(--amber-d);border-bottom:1px solid rgba(251,191,36,.3);padding:9px 20px;font-size:0.92rem;color:var(--t2);line-height:1.5;display:flex;align-items:flex-start;gap:10px}
#conn-banner .cb-icon{font-size:1.08rem;flex-shrink:0;margin-top:1px}
#conn-banner .cb-body{flex:1}
#conn-banner .cb-title{font-weight:600;color:var(--amber);margin-bottom:2px}
#conn-banner .cb-issues{display:flex;flex-direction:column;gap:3px}
#conn-banner .cb-issue{display:flex;align-items:baseline;gap:6px}
#conn-banner .cb-bullet{width:6px;height:6px;border-radius:50%;background:var(--amber);flex-shrink:0;margin-top:4px}
#conn-banner .cb-dismiss{flex-shrink:0;cursor:pointer;opacity:.5;font-size:1.23rem;line-height:1;padding:0 4px;margin-top:-1px}
#conn-banner .cb-dismiss:hover{opacity:1}

/* ── Tooltip ──────────────────────────────────────────────────────────────── */
.uiq-tooltip{position:fixed;z-index:9999;display:none;max-width:260px;background:var(--panel);border:1px solid var(--bb);border-radius:var(--rl);box-shadow:0 8px 32px rgba(0,0,0,.45);padding:10px 13px;pointer-events:none;animation:tt-in .14s ease}
@keyframes tt-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.tt-title{font-size:0.85rem;font-weight:600;color:var(--t1);margin-bottom:4px;line-height:1.3}
.tt-sub{font-size:0.69rem;color:var(--t3);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.tt-body{font-size:0.85rem;color:var(--t2);line-height:1.5}
.tt-row{display:flex;justify-content:space-between;gap:10px;font-size:0.77rem;color:var(--t2);margin-top:3px}
.tt-val{font-family:var(--mono);color:var(--teal)}
.tt-clients{margin-top:7px;padding-top:7px;border-top:1px solid var(--b)}
.tt-clients-label{font-size:0.69rem;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);margin-bottom:4px;font-weight:600}
.tt-client{font-family:var(--mono);font-size:0.77rem;color:var(--t2);padding:1px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt-more{font-size:0.69rem;color:var(--t3);margin-top:3px;font-style:italic}
.tt-divider{height:1px;background:var(--b);margin:6px 0}
.tt-note{font-size:0.77rem;color:var(--t3);line-height:1.4;font-style:italic}
.tt-time{font-size:0.69rem;color:var(--t3);margin-top:-4px;margin-bottom:6px}

/* ── Panel / card animations ──────────────────────────────────────────────── */
.panel.active{animation:panel-in .2s ease}
@keyframes panel-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.apc{transition:border-color .18s,transform .15s,box-shadow .18s}
.apc:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.scard{transition:border-color .15s,background .15s,box-shadow .15s}
.scard.clickable:hover{box-shadow:0 0 0 1px rgba(34,211,238,.12),0 4px 16px rgba(0,0,0,.15)}
.insight-card{transition:border-color .15s,transform .15s}
.insight-card:hover{transform:translateY(-1px);border-color:var(--bb)}
.spark-b{transition:filter .1s,opacity .1s;cursor:default}
.spark-b:hover{filter:brightness(1.3);opacity:1!important}
.census-bar{transition:width .35s cubic-bezier(.4,0,.2,1)}
/* Tuning tab graph animations — one-shot on tab entry (class added by switchTab,
   gated on the animBars pref).  Census bars grow from the left; channel-planner
   cells fade/scale in with a short stagger for a chart-building feel. */
@keyframes tuneBarGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tuneCellIn{from{opacity:0;transform:translateY(5px) scale(.95)}to{opacity:1;transform:none}}
.tuning-animate .census-bar{transform-origin:left center;animation:tuneBarGrow .55s cubic-bezier(.4,0,.2,1) both}
.tuning-animate .ch-cell{animation:tuneCellIn .4s ease both}
.tuning-animate .ch-cell:nth-child(2){animation-delay:.03s}
.tuning-animate .ch-cell:nth-child(3){animation-delay:.06s}
.tuning-animate .ch-cell:nth-child(4){animation-delay:.09s}
.tuning-animate .ch-cell:nth-child(5){animation-delay:.12s}
.tuning-animate .ch-cell:nth-child(6){animation-delay:.15s}
.tuning-animate .ch-cell:nth-child(n+7){animation-delay:.18s}
@media (prefers-reduced-motion:reduce){.tuning-animate .census-bar,.tuning-animate .ch-cell{animation:none}}
.btn{transition:all .15s,box-shadow .15s}
.btn:hover{box-shadow:0 0 0 1px rgba(34,211,238,.15)}
.tab{transition:color .15s,border-color .15s}
.al-item,.incident-item{transition:background .12s}
tr.expandable td{transition:background .1s}

/* ── Help modal ───────────────────────────────────────────────────────────── */
.help-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);z-index:1200;display:none;align-items:flex-start;justify-content:center;padding:32px 20px;overflow-y:auto}
.help-backdrop.open{display:flex}
.help-modal{background:var(--panel);border:1px solid var(--bb);border-radius:12px;width:100%;max-width:780px;display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,.6);margin:auto;animation:panel-in .2s ease}
.help-header{padding:16px 20px;border-bottom:1px solid var(--b);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.help-title{font-size:1.08rem;font-weight:600;color:var(--t1);display:flex;align-items:center;gap:9px}
.help-title-icon{width:26px;height:26px;background:var(--teal-d);border:1px solid rgba(34,211,238,.3);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1rem}
.help-tabs{display:flex;gap:2px;padding:10px 20px 0;border-bottom:1px solid var(--b);flex-shrink:0;overflow-x:auto}
.htab{font-size:0.85rem;font-weight:500;color:var(--t2);padding:7px 13px;cursor:pointer;border-bottom:2px solid transparent;border-radius:4px 4px 0 0;margin-bottom:-1px;transition:color .12s;white-space:nowrap}
.htab:hover{color:var(--t1)}
.htab.active{color:var(--teal);border-bottom-color:var(--teal)}
.help-body{padding:24px;overflow-y:auto;max-height:72vh}
.help-section{margin-bottom:28px}
.help-section:last-child{margin-bottom:0}
.help-section-title{font-size:1rem;font-weight:600;color:var(--t1);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.help-section-title::before{content:'';display:inline-block;width:3px;height:14px;background:var(--teal);border-radius:2px;flex-shrink:0}
.help-p{font-size:0.92rem;color:var(--t2);line-height:1.75;margin-bottom:10px}
.help-p strong{color:var(--t1)}
.help-p code{font-family:var(--mono);font-size:0.85rem;background:var(--card);border:1px solid var(--b);border-radius:3px;padding:1px 5px;color:var(--teal)}
.help-diagram{background:var(--card);border:1px solid var(--b);border-radius:var(--r);padding:14px 16px;margin:10px 0 14px}
.hd-spark{display:flex;align-items:flex-end;gap:3px;height:40px;margin-bottom:6px}
.hd-bar{flex:1;border-radius:2px 2px 0 0;min-height:3px}
.hd-label{font-size:0.69rem;color:var(--t3);display:flex;justify-content:space-between}
.hd-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.hd-card{background:var(--panel);border:1px solid var(--b);border-radius:var(--r);padding:8px 10px}
.hd-card-label{font-size:0.62rem;text-transform:uppercase;letter-spacing:.07em;color:var(--t3);margin-bottom:3px}
.hd-card-val{font-family:var(--mono);font-size:1.23rem;font-weight:600;color:var(--t1)}
.hd-ring-wrap{display:flex;align-items:center;gap:12px}
.hd-ring{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:1rem;font-weight:700}
.hd-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.hd-legend-item{display:flex;align-items:center;gap:5px;font-size:0.77rem;color:var(--t2)}
.hd-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.help-tip{background:var(--teal-d);border:1px solid rgba(34,211,238,.2);border-radius:var(--r);padding:9px 12px;font-size:0.85rem;color:var(--t2);line-height:1.55;margin:10px 0}
.help-tip::before{content:'💡 ';font-size:0.92rem}
.help-close{background:none;border:none;color:var(--t2);font-size:1.38rem;cursor:pointer;padding:2px 6px;border-radius:4px;line-height:1;transition:all .15s}
.help-close:hover{color:var(--t1);background:var(--b)}
.help-kv{display:flex;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--b);font-size:0.85rem}
.help-kv:last-child{border-bottom:none}
.help-kv-key{color:var(--teal);font-family:var(--mono);font-size:0.77rem;width:120px;flex-shrink:0}
.help-kv-val{color:var(--t2);line-height:1.5}
/* ── Filter bars ── */
.filter-bar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.fi-wrap{position:relative;display:flex;align-items:center}
.fi{background:var(--panel);border:1px solid var(--b);border-radius:var(--r);padding:5px 10px 5px 28px;font-size:0.85rem;color:var(--t1);outline:none;min-width:180px;transition:border-color .15s;font-family:inherit}
.fi:focus{border-color:var(--teal)}
.fi::placeholder{color:var(--t3)}
.fi-ico{position:absolute;left:8px;color:var(--t3);pointer-events:none;user-select:none;display:flex}
.ftog{background:none;border:1px solid var(--b);border-radius:calc(var(--r) - 1px);padding:3px 10px;font-size:0.77rem;font-weight:600;color:var(--t3);cursor:pointer;transition:all .15s;font-family:inherit;white-space:nowrap}
.fi-sel{background:var(--panel);color:var(--t1);border:1px solid var(--b);border-radius:var(--r);padding:4px 8px;font-size:0.85rem;font-family:inherit;cursor:pointer;outline:none}
.fi-sel:focus{border-color:var(--teal)}
.ftog:hover{color:var(--t2);border-color:var(--t3)}
.ftog.active{background:var(--teal-d);border-color:var(--teal);color:var(--teal)}
.fcount{font-size:0.77rem;color:var(--t3);margin-left:auto;white-space:nowrap}
/* ── Widget layout system ─────────────────────────────────────────────── */
.wg-hidden{display:none!important}
.widget-container{display:block}
.panel-toolbar{display:flex;justify-content:flex-end;margin-bottom:8px}
.customize-btn{background:none;border:1px solid var(--b);border-radius:var(--r);padding:4px 11px;font-size:0.77rem;font-weight:600;color:var(--t3);cursor:pointer;font-family:inherit;transition:all .15s;letter-spacing:.04em;display:flex;align-items:center;gap:5px}
.customize-btn:hover{color:var(--t2);border-color:var(--t2)}
/* Customize slide-in panel */
.cw-overlay{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:999;display:none}
.cw-overlay.open{display:block}
.customize-panel{position:fixed;right:-320px;top:0;width:300px;height:100vh;background:var(--panel);border-left:1px solid var(--b);z-index:1000;display:flex;flex-direction:column;transition:right .22s cubic-bezier(.4,0,.2,1);box-shadow:-6px 0 28px rgba(0,0,0,.35)}
.customize-panel.open{right:0}
.cw-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--b);flex-shrink:0}
.cw-title{font-size:1rem;font-weight:600;color:var(--t1)}
.cw-close{background:none;border:none;color:var(--t3);cursor:pointer;font-size:1.54rem;line-height:1;padding:0 2px;transition:color .15s}
.cw-close:hover{color:var(--t1)}
.cw-list{flex:1;overflow-y:auto;padding:10px 12px}
.cw-note{font-size:0.77rem;color:var(--t3);margin-bottom:10px;line-height:1.5}
.cw-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r);cursor:grab;background:var(--card);border:1px solid var(--b);margin-bottom:6px;user-select:none;transition:border-color .15s,opacity .15s}
.cw-row:active{cursor:grabbing}
.cw-row.dragging{opacity:.3}
.cw-row.drag-over{border-color:var(--teal);background:rgba(34,211,238,.05)}
.cw-row.cw-off{opacity:.45}
.cw-handle{color:var(--t3);font-size:1.08rem;flex-shrink:0;line-height:1}
.cw-label{flex:1;font-size:0.92rem;color:var(--t2)}
.cw-eye{background:none;border:1px solid var(--b);border-radius:4px;cursor:pointer;font-size:0.77rem;font-weight:600;padding:2px 7px;color:var(--t2);font-family:inherit;transition:all .15s;white-space:nowrap}
.cw-eye:hover{border-color:var(--t2)}
.cw-eye.off{color:var(--t3);border-color:transparent}
.cv-row{padding:5px 8px;margin-bottom:3px}
.cw-ftr{padding:12px 16px;border-top:1px solid var(--b);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.cw-reset{background:none;border:none;color:var(--t3);font-size:0.85rem;cursor:pointer;font-family:inherit;text-decoration:underline;padding:0}
.cw-reset:hover{color:var(--t2)}
.cw-done{background:var(--teal-d);border:1px solid var(--teal);color:var(--teal);border-radius:var(--r);padding:5px 16px;font-size:0.85rem;font-weight:600;cursor:pointer;font-family:inherit}
/* ── Action Plan ── */
.action-plan{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.action-item{display:flex;align-items:flex-start;gap:12px;padding:10px 14px;background:var(--card);border:1px solid var(--b);border-left:3px solid var(--b);border-radius:var(--r);cursor:pointer;transition:border-color .15s,background .15s}
.action-item:hover{background:rgba(34,211,238,.04);border-color:var(--teal);border-left-color:inherit}
.action-item.crit{border-left-color:var(--red)}
.action-item.warn{border-left-color:var(--amber)}
.action-num{font-size:0.77rem;font-weight:700;width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--b);color:var(--t3);flex-shrink:0;margin-top:1px}
.action-body{flex:1;min-width:0}
.action-title{font-size:0.92rem;font-weight:600;color:var(--t1);line-height:1.4}
.action-detail{font-size:0.85rem;color:var(--t3);margin-top:3px;line-height:1.5}
.action-meta{display:flex;align-items:center;gap:8px;margin-top:5px;flex-wrap:wrap}
.action-ok{background:var(--card);border:1px solid var(--b);border-left:3px solid var(--green);border-radius:var(--r);padding:10px 14px;font-size:0.92rem;color:var(--green)}
/* ── AP Journey ── */
.journey-wrap{overflow-x:auto;padding:8px 2px 14px;margin-bottom:4px}
.journey{display:flex;align-items:center;min-width:max-content}
.journey-node{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0}
.journey-ap{font-size:0.77rem;font-weight:600;padding:5px 10px;border:1px solid var(--b);border-radius:6px;white-space:nowrap;color:var(--t2);background:var(--card);transition:border-color .15s}
.journey-ap.current{border-color:var(--teal);color:var(--teal);box-shadow:0 0 0 2px rgba(34,211,238,.15)}
.journey-time{font-size:0.69rem;color:var(--t3);font-family:var(--mono)}
.journey-edge{display:flex;flex-direction:column;align-items:center;padding:0 4px;flex-shrink:0;gap:2px}
.journey-gap-label{font-size:0.69rem;white-space:nowrap;color:var(--t3)}
.journey-gap-label.warn{color:var(--amber)}
.journey-gap-label.crit{color:var(--red)}
.journey-line{display:flex;align-items:center;gap:1px;color:var(--t3);font-size:0.69rem}
.journey-seg{height:1px;width:18px;background:var(--b)}

/* ── Responsive: tablet (≤768px) ─────────────────────────────────────────── */
@media(max-width:768px){
  header{padding:0 14px;gap:10px}
  .site-combo{min-width:0;flex:1}
  .ts{display:none}
  .content{padding:16px}
  .tab{padding:9px 10px;font-size:0.85rem}
  .tab-nav{padding:0 10px}
  .fi{min-width:130px}
  .scard{padding:12px 14px}
  .ap-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .panel-toolbar{padding:0 4px 8px}
  .spark-item{min-width:100px}
}

/* ── Channel Plan Recommendations (RF Neighbors tab) ─────────────────────── */
.chanrec-band-head{padding:8px 16px;background:rgba(255,255,255,.015);border-bottom:1px solid var(--b);display:flex;align-items:center;gap:8px}
.chanrec-ap-row{padding:14px 16px;border-bottom:1px solid var(--b)}
.chanrec-ap-row:last-child{border-bottom:none}
.chanrec-ap-meta{margin-bottom:8px}
.chanrec-ap-name{font-weight:600;font-size:.92rem}
.chanrec-ap-model{font-family:var(--mono);font-size:.72rem;color:var(--t3);margin-top:1px}
.chanrec-compare{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chanrec-ch-block{flex:1;min-width:150px;background:rgba(255,255,255,.025);border:1px solid var(--b);border-radius:8px;padding:10px 12px}
.chanrec-ch-block.cur{border-color:rgba(248,113,113,.2);background:rgba(248,113,113,.04)}
.chanrec-ch-block.rec{border-color:rgba(52,211,153,.2);background:rgba(52,211,153,.04)}
.chanrec-ch-block.opt{border-color:rgba(52,211,153,.15);background:rgba(52,211,153,.03)}
.chanrec-ch-lbl{font-size:.7rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--t3);margin-bottom:5px}
.chanrec-ch-num{font-size:1.3rem;font-weight:600;font-family:var(--mono);color:var(--t1);line-height:1;margin-bottom:7px}
.chanrec-ch-num sup{font-size:.65rem;color:var(--t3);font-weight:400}
.chanrec-issues{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:7px;min-height:20px}
.chanrec-strack{height:5px;background:rgba(148,163,184,.1);border-radius:3px;overflow:hidden;margin-bottom:3px}
.chanrec-sfill{height:100%;border-radius:3px}
.chanrec-snum{font-family:var(--mono);font-size:.72rem;color:var(--t3)}
.chanrec-arrow{color:var(--t3);font-size:1rem;flex-shrink:0;padding-top:20px}
.chanrec-delta{display:flex;align-items:center;justify-content:center;min-width:52px}
.chanrec-dpill{background:var(--green-d);color:var(--green);border:1px solid rgba(52,211,153,.2);border-radius:20px;padding:3px 9px;font-family:var(--mono);font-size:.78rem;font-weight:600;white-space:nowrap}
.chanrec-dpill.minor{background:rgba(148,163,184,.08);color:var(--t3);border-color:var(--b)}
.chanrec-toggle{font-size:.78rem;color:var(--teal);cursor:pointer;padding:4px 0 0;width:fit-content;border:none;background:none;font-family:var(--font);display:block;margin-top:6px}
.chanrec-toggle:hover{color:var(--t1)}
.chanrec-cands{display:none;margin-top:6px;background:rgba(0,0,0,.2);border:1px solid var(--b);border-radius:8px;overflow:hidden}
.chanrec-cands.open{display:block}
.chanrec-cand-row{display:flex;align-items:center;gap:10px;padding:7px 12px;border-bottom:1px solid rgba(148,163,184,.06)}
.chanrec-cand-row:last-child{border-bottom:none}
.chanrec-cand-ch{font-family:var(--mono);font-size:.8rem;font-weight:600;min-width:70px;color:var(--t2)}
.chanrec-cand-ch.best-ch{color:var(--green)}
.chanrec-cand-ch.cur-ch{color:var(--amber)}
.chanrec-cand-bar-wrap{flex:1;height:6px;background:rgba(148,163,184,.08);border-radius:3px;overflow:hidden}
.chanrec-cand-bar{height:100%;border-radius:3px}
.chanrec-cand-score{font-family:var(--mono);font-size:.75rem;color:var(--t3);min-width:28px;text-align:right}
.chanrec-cand-note{font-size:.72rem;color:var(--t3);min-width:160px;text-align:right}
.chanrec-cbadge{font-family:var(--mono);font-size:.6rem;padding:1px 4px;border-radius:3px;text-transform:uppercase;vertical-align:middle;margin-left:3px}
.chanrec-cbadge.best{background:var(--green-d);color:var(--green)}
.chanrec-cbadge.cur{background:var(--amber-d);color:var(--amber)}
.chanrec-cbadge.own{background:var(--red-d);color:var(--red)}
.chanrec-cbadge.dfs{background:var(--purple-d);color:var(--purple)}
.chanrec-nochange{font-size:.78rem;color:var(--green);margin-top:6px;display:flex;align-items:center;gap:5px}

/* ── Responsive: mobile (≤480px) ─────────────────────────────────────────── */
@media(max-width:480px){
  header{flex-wrap:wrap;height:auto;padding:8px 10px;gap:8px}
  .logo{flex-shrink:0}
  .site-combo{order:10;flex:0 0 100%;min-width:0;width:100%;max-width:none}
  .site-combo-pop{max-width:none;width:100%}
  .hchip{width:26px;height:26px}
  .hdr-right{gap:6px}
  .btn{padding:3px 8px;font-size:0.77rem}
  .content{padding:10px}
  .tab{padding:8px 8px;font-size:0.77rem;gap:4px}
  .tab-nav{padding:0 4px;gap:0}
  .tw{overflow-x:auto}
  .fi{min-width:0;flex:1}
  .fi-wrap{flex:1;min-width:0;flex-wrap:wrap}
  .sh{flex-wrap:wrap;gap:6px}
  .sh-note{width:100%}
  .scard{padding:10px 12px}
  .ap-grid{grid-template-columns:1fr}
  .census-label{width:auto;min-width:70px}
  .rfn-wrap{max-height:none}
  .grid4,.grid3,.grid2{grid-template-columns:1fr}
  .modal-inner{margin:10px;max-height:calc(100vh - 20px)}
  .modal-body{padding:14px}
  .cw-overlay .customize-panel{width:100%;right:0;left:0;border-radius:var(--rl) var(--rl) 0 0;bottom:0;top:auto;max-height:75vh}
  /* Activity pulse: stack summary above charts, 2-per-row sparklines */
  .pulse-layout{flex-direction:column}
  .pulse-stats{margin-right:0;margin-bottom:4px;gap:16px}
  .spark-grid{width:100%;gap:10px}
  .spark-item{flex:0 0 calc(50% - 5px);min-width:0}
}

/* ── Login Overlay ─────────────────────────────────────────────────────────── */
.login-overlay{position:fixed;inset:0;background:var(--bg);z-index:9000;display:none;align-items:center;justify-content:center;padding:20px}
.login-overlay.open{display:flex}
.login-card{background:var(--panel);border:1px solid var(--bb);border-radius:16px;padding:40px 36px;width:100%;max-width:360px;display:flex;flex-direction:column;gap:0;box-shadow:0 24px 80px rgba(0,0,0,.5)}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:28px}
.login-logo-icon{font-size:28px;line-height:1}
.login-logo-text{font-size:1rem;font-weight:600;color:var(--t1)}
.login-title{font-size:1.25rem;font-weight:700;color:var(--t1);margin-bottom:6px}
.login-subtitle{font-size:0.82rem;color:var(--t3);margin-bottom:24px;line-height:1.5}
.login-label{display:block;font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);margin-bottom:6px}
.login-input{width:100%;box-sizing:border-box;background:var(--card);border:1px solid var(--b);border-radius:var(--r);padding:10px 12px;font-size:0.92rem;color:var(--t1);outline:none;transition:border-color .15s;font-family:inherit}
.login-input:focus{border-color:var(--teal);box-shadow:0 0 0 2px rgba(34,211,238,.15)}
.login-field{margin-bottom:12px}
.login-error{font-size:0.8rem;color:var(--red);min-height:18px;margin-bottom:10px}
.login-btn{width:100%;padding:11px;background:var(--teal);color:#000;border:none;border-radius:var(--r);font-size:0.92rem;font-weight:600;cursor:pointer;transition:opacity .15s;font-family:inherit}
.login-btn:hover{opacity:.9}
.login-btn:disabled{opacity:.5;cursor:default}
.login-footer{margin-top:24px;font-size:0.72rem;color:var(--t3);text-align:center}

/* ── Tracer Overlay ────────────────────────────────────────────────────────── */
.tracer-overlay{position:fixed;inset:0;z-index:2000;display:none;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto}
.tracer-overlay.open{display:flex}
.tracer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px)}
.tracer-modal{position:relative;z-index:1;width:100%;max-width:900px;background:var(--panel);border:1px solid var(--bb);border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.6);display:flex;flex-direction:column;margin:auto}
.tracer-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--b);flex-shrink:0}
.tracer-hdr-left{display:flex;align-items:center;gap:12px}
.tracer-hdr-icon{font-size:22px;line-height:1}
.tracer-hdr-title{font-size:1rem;font-weight:600;color:var(--t1)}
.tracer-hdr-sub{font-size:0.75rem;color:var(--t3);margin-top:2px}
.tracer-close{background:none;border:none;color:var(--t3);cursor:pointer;font-size:1.3rem;padding:2px 8px;border-radius:4px;transition:all .15s}
.tracer-close:hover{color:var(--t1);background:var(--b)}
.tracer-body{padding:20px;overflow-y:auto;max-height:calc(100vh - 140px)}
.tracer-device{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.tracer-name{font-size:1rem;font-weight:600;color:var(--t1)}
.tracer-live-stats{display:flex;gap:12px;flex-wrap:wrap}
.tracer-stat{background:var(--card);border:1px solid var(--b);border-radius:var(--r);padding:8px 12px;min-width:80px;text-align:center}
.tracer-stat-label{font-size:0.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);margin-bottom:3px}
.tracer-stat-value{font-family:var(--mono);font-size:0.9rem;font-weight:600;color:var(--t1)}
.tracer-controls{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.btn-primary{background:var(--teal);color:#000;border-color:var(--teal)}
.btn-primary:hover{opacity:.9}
.btn-danger{background:var(--red-d);color:var(--red);border-color:rgba(248,113,113,.3)}
.btn-danger:hover{background:rgba(248,113,113,.2)}
.tracer-guidance{background:var(--card);border:1px solid var(--b);border-radius:var(--r);padding:14px 16px;margin-bottom:16px;min-height:80px}
.trace-guide-empty{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:8px 0}
.trace-guide-icon{font-size:28px;opacity:.4}
.trace-guide-msg{font-size:0.82rem;color:var(--t2);line-height:1.6;max-width:480px}
.trace-guide-steps{display:flex;flex-direction:column;gap:6px;width:100%;max-width:480px}
.trace-step{display:flex;align-items:flex-start;gap:10px;font-size:0.8rem;color:var(--t2);text-align:left;line-height:1.5}
.trace-step-num{width:18px;height:18px;border-radius:50%;background:var(--teal-d);color:var(--teal);font-size:0.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.trace-findings{display:flex;flex-direction:column;gap:6px}
.trace-finding{display:flex;align-items:flex-start;gap:8px;font-size:0.82rem;line-height:1.5;padding:6px 0}
.trace-finding-icon{font-size:0.9rem;flex-shrink:0;margin-top:1px}
.trace-finding.ok .trace-finding-icon,.trace-finding.ok strong{color:var(--green)}
.trace-finding.warn .trace-finding-icon,.trace-finding.warn strong{color:var(--amber)}
.trace-finding.crit .trace-finding-icon,.trace-finding.crit strong{color:var(--red)}
.trace-action-steps{margin-top:10px;padding-top:10px;border-top:1px solid var(--b)}
.trace-action-title{font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);margin-bottom:6px}
.tracer-charts{display:flex;flex-direction:column;gap:16px}
.tracer-chart-wrap{background:var(--card);border:1px solid var(--b);border-radius:var(--r);padding:12px 14px}
.tracer-chart-title{font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);margin-bottom:8px}
.tracer-chart{width:100%;min-height:90px}
.tracer-chart-ap{min-height:60px}
/* Highlighted current-AP stat box */
.tracer-stat.ap-current{border-color:rgba(34,211,238,.3);background:linear-gradient(135deg,var(--card),rgba(34,211,238,.04))}
/* Rich hover tooltip for tracer charts */
.tracer-tooltip{position:fixed;z-index:3000;background:var(--panel);border:1px solid var(--bb);border-radius:8px;padding:9px 12px;font-size:11px;color:var(--t1);box-shadow:0 8px 32px rgba(0,0,0,.5);pointer-events:none;display:none;min-width:160px}
.tracer-tooltip-time{font-size:9px;color:var(--t3);margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em}
.tracer-tooltip-grid{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;line-height:1.6}
.tracer-tooltip-label{color:var(--t3)}

/* Trace button in client detail modal */
.trace-btn{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:5px 13px;background:var(--teal-d);color:var(--teal);border:1px solid rgba(34,211,238,.3);border-radius:5px;cursor:pointer;white-space:nowrap;font-family:inherit;transition:all .15s}
.trace-btn:hover{background:rgba(34,211,238,.2);border-color:rgba(34,211,238,.5)}
@media(max-width:600px){.tracer-live-stats{justify-content:center}.tracer-device{justify-content:center;text-align:center}}

/* ════════════════════════════════════════════════════════════════════════ *
 *  Refined widget treatment — severity stripes, critical glow, typography  *
 *  Adds Apple-pro accents on top of the legacy rectangular widget shape.   *
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Severity top stripe on stat cards ──────────────────────────────── */
.scard{position:relative;overflow:hidden}
.scard::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:transparent;
  transition:background-color .25s ease;
  pointer-events:none;
}
.scard.red-border::before  {background:var(--red)}
.scard.amber-border::before{background:var(--amber)}
.scard.teal-border::before {background:var(--teal)}
.scard.green-border::before{background:var(--green)}

/* ── Severity top stripe on AP cards ────────────────────────────────── */
.apc{position:relative;overflow:hidden}
.apc::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:transparent;
  transition:background-color .25s ease;
  pointer-events:none;
}
.apc.offline::before {background:var(--red)}
.apc.issues::before,
.apc.warn-ap::before {background:var(--amber)}
.apc.dfs-ap::before  {background:var(--purple)}
.apc.healthy::before {background:var(--green);opacity:.45}

/* ── Severity top stripe on insight cards ───────────────────────────── */
.insight-card{position:relative;overflow:hidden}
.insight-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:transparent;
  transition:background-color .25s ease;
  pointer-events:none;
}
.insight-card:has(.insight-value.red)::before  {background:var(--red)}
.insight-card:has(.insight-value.amber)::before{background:var(--amber)}
.insight-card:has(.insight-value.green)::before{background:var(--green);opacity:.45}
.insight-card:has(.insight-value.teal)::before {background:var(--teal);opacity:.55}

/* ── Critical glow (critical severity only) ─────────────────────────── *
 * Subtle ambient halo around the widget edge. Reads at a glance, not
 * gaudy. Applied only at the crit tier; warn/dfs stay quiet.            */
.scard.red-border{
  box-shadow:0 0 28px -10px rgba(248,113,113,.45);
}
.apc.offline{
  box-shadow:0 0 28px -10px rgba(248,113,113,.42);
}
.insight-card:has(.insight-value.red){
  box-shadow:0 0 24px -10px rgba(248,113,113,.4);
}

/* Anomaly + incident rows: ambient halo around the entire row when
 * the inner severity bar is in the critical state.                       */
.al-item:has(.al-sev.r){
  background:linear-gradient(90deg,rgba(248,113,113,.05),transparent 60%);
  box-shadow:inset 0 0 0 1px rgba(248,113,113,.18);
  border-radius:6px;
}
.incident-item:has(.incident-bar.crit){
  background:linear-gradient(90deg,rgba(248,113,113,.05),transparent 60%);
  box-shadow:inset 0 0 0 1px rgba(248,113,113,.18);
  border-radius:6px;
}

/* ── Typography refinements ─────────────────────────────────────────── *
 * Apple "lighter weights at larger sizes" principle: drop big-metric
 * weight from 500 to 400 with tighter tracking for a more confident,
 * less utilitarian feel. Small labels gain extra letter-spacing for
 * a refined uppercase rhythm.                                            */
.sval         {font-weight:400;letter-spacing:-.02em}
.insight-value{font-weight:400;letter-spacing:-.01em}
.slabel,
.sh-title,
.insight-label{letter-spacing:.1em}

/* ── Light-theme glow tuning ───────────────────────────────────────── *
 * Glows on light backgrounds need warmer/stronger reds to stay legible. */
body.light .scard.red-border        {box-shadow:0 0 24px -8px rgba(220,38,38,.32)}
body.light .apc.offline             {box-shadow:0 0 24px -8px rgba(220,38,38,.3)}
body.light .insight-card:has(.insight-value.red){box-shadow:0 0 22px -8px rgba(220,38,38,.28)}
body.light .al-item:has(.al-sev.r)     {background:linear-gradient(90deg,rgba(220,38,38,.06),transparent 60%);box-shadow:inset 0 0 0 1px rgba(220,38,38,.2)}
body.light .incident-item:has(.incident-bar.crit){background:linear-gradient(90deg,rgba(220,38,38,.06),transparent 60%);box-shadow:inset 0 0 0 1px rgba(220,38,38,.2)}

/* ── Live-indicator animation toggles ──────────────────────────────── */
body.no-anim-live .badge-live{animation:none}
body.no-anim-live .dot.r{animation:none}

/* ── Card entrance animation ─────────────────────────────────────── */
@keyframes cardEntrance{
  from{opacity:0;transform:translateY(14px)}
  to  {opacity:1;transform:translateY(0)}
}
.card-entrance{animation:cardEntrance .38s cubic-bezier(.22,.68,0,1.2) both}

/* ── Tab blur transition ─────────────────────────────────────────── */
@keyframes tabBlur{
  0%  {filter:blur(0)  ;opacity:1  }
  35% {filter:blur(4px);opacity:.72}
  100%{filter:blur(0)  ;opacity:1  }
}
body.anim-tabs .tab-transitioning{animation:tabBlur .28s ease-out}

/* Connection modal — Sites inventory tab */
.cs-sites-summary{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.cs-sum{flex:1;min-width:96px;background:var(--panel);border:1px solid var(--b);border-radius:8px;padding:10px 12px}
.cs-sum-n{font-size:1.4rem;font-weight:600}
.cs-sum-l{font-size:0.7rem;color:var(--t3);margin-top:2px}
.cs-sum.bad .cs-sum-n{color:var(--red)}
/* border-collapse:separate (not collapse) so the sticky header's box-shadow —
   which paints over the scrollport's top padding, see below — actually renders:
   collapsed-border tables drop box-shadows on cells. border-spacing:0 keeps the
   layout visually identical to the collapsed version (only border-bottom is set,
   so nothing doubles up). */
.cs-sites-table{width:100%;font-size:0.85rem;border-collapse:separate;border-spacing:0;table-layout:fixed}
/* The site list runs to hundreds of rows, so it gets its own scroll window
   (.cs-sites-scroll) that keeps the summary cards and notes in view while the
   list scrolls. The header pins to the top of that window; it needs an opaque
   background because the global th bg is semi-transparent and rows would show
   through as they scroll under it. The window has no padding, so top:0 pins the
   header flush — no box-shadow gap-fill needed (unlike a .modal-body scroll). */
.cs-sites-scroll{overflow:auto;max-height:calc(70vh - 200px);min-height:180px}
.cs-sites-table th{text-align:left;color:var(--t3);font-weight:500;font-size:0.7rem;text-transform:uppercase;letter-spacing:.5px;padding:6px 8px;border-bottom:1px solid var(--b);position:sticky;top:0;z-index:2;background:var(--panel)}
body.light .cs-sites-table th{background:var(--panel)}
.cs-sites-table td{padding:7px 8px;border-bottom:1px solid var(--b)}
/* Every site row stays on one line: the fixed columns below are sized to their
   widest real content ("LAN + cloud", "22 (7 off)"), and Site takes the
   remainder and ellipsises. The editor row opts out — it's a wrapping form. */
.cs-sites-table tr:not(.cs-editor-row) > th,
.cs-sites-table tr:not(.cs-editor-row) > td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-sites-table tr:not(.cs-editor-row) > :nth-child(2){width:108px}
.cs-sites-table tr:not(.cs-editor-row) > :nth-child(3){width:104px}
.cs-sites-table tr:not(.cs-editor-row) > :nth-child(4){width:80px}
.cs-sites-table tr:not(.cs-editor-row) > :nth-child(5){width:68px}
.cs-pill{display:inline-block;white-space:nowrap;font-size:0.7rem;border-radius:6px;padding:1px 8px;border:1px solid var(--b)}
.cs-pill.ok{color:var(--green);border-color:rgba(52,211,153,.4)}
.cs-pill.warn{color:var(--amber);border-color:rgba(251,191,36,.4)}
.cs-pill.err{color:var(--red);border-color:rgba(248,113,113,.4)}
.cs-off{color:var(--red)}
.cs-mono{font-family:var(--mono,monospace)}
.cs-note{margin-top:14px;font-size:0.75rem;color:var(--t3);line-height:1.5}

/* Sites tab — per-site override + cloud-key editor (admin only) */
.cs-manage{text-align:right}
.cs-edit-btn{font-size:11px;padding:3px 10px}
.cs-editor-row td{background:var(--panel);padding:0 !important}
.cs-editor{display:flex;flex-wrap:wrap;gap:10px 16px;padding:12px 8px;align-items:flex-end}
.cs-ed-field{display:flex;flex-direction:column;gap:3px;font-size:0.72rem;color:var(--t3);min-width:200px;flex:1}
.cs-ed-field span em{color:var(--t3);font-style:normal;opacity:.75}
.cs-ed-field .login-input{margin-top:0}
/* Full-width row so the checkbox + its explanation wrap under the inputs rather
   than competing with them for space in the flex row. */
.cs-ed-check{display:flex;align-items:flex-start;gap:7px;flex-basis:100%;font-size:0.72rem;color:var(--t3);cursor:pointer;line-height:1.45}
.cs-ed-check input{margin-top:2px;flex:none;cursor:pointer}
.cs-ed-check em{color:var(--t3);font-style:normal;opacity:.75}
.cs-ed-actions{display:flex;gap:8px;align-items:center}
.cs-keys{margin-top:20px;border-top:1px solid var(--b);padding-top:14px}
.cs-keys-title{font-size:0.82rem;font-weight:600;margin-bottom:4px}
.cs-key-row{display:flex;align-items:center;gap:12px;padding:5px 0;border-bottom:1px solid var(--b);font-size:0.8rem}
.cs-key-label{flex:1;min-width:120px;margin-top:0;font-size:0.78rem;padding:3px 8px}
.cs-key-add{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.cs-restart-note{color:var(--amber)}
.cs-config-msg{margin-top:8px;font-size:0.78rem;min-height:16px}

/* Connection History tab */
.hist-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0}
.hist-bar select,.hist-bar input{background:var(--card);color:var(--t1);border:1px solid var(--b);border-radius:8px;padding:7px 10px;font-size:0.8rem}
.hist-bar input{min-width:240px;font-family:var(--mono,monospace)}
.hist-toggle{display:flex;gap:4px}
.hist-toggle button{background:var(--card);border:1px solid var(--b);color:var(--t2);padding:7px 12px;border-radius:8px;font-size:0.8rem;cursor:pointer}
.hist-toggle button.active{color:var(--accent);border-color:var(--accent)}
.hist-count{margin-left:auto;color:var(--t3);font-family:var(--mono,monospace);font-size:0.75rem}
.hist-table{width:100%;font-size:0.85rem;border-collapse:collapse}
.hist-table th{text-align:left;color:var(--t3);font-weight:500;font-size:0.7rem;text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;border-bottom:1px solid var(--b)}
.hist-table td{padding:8px 10px;border-bottom:1px solid var(--b);font-family:var(--mono,monospace);font-size:0.78rem}
#history-results .ti{border-bottom:1px solid var(--b)}

/* DFS Analyzer — count chips + per-channel cards (backported from the next branch) */
.dfs-counts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
/* Filled, saturated tint behind each designation (was borderless faint text) so
   the verdict colours stay legible across all 18 light/dark themes. color-mix is
   theme-aware; the solid `-d` line before it is the fallback for old engines. */
.dfs-count{font-family:var(--mono,monospace);font-size:0.69rem;font-weight:700;border-radius:6px;padding:2px 9px;border:1px solid var(--b);color:var(--t2)}
.dfs-count.go{color:var(--green);background:var(--green-d);background:color-mix(in srgb,var(--green) 18%,transparent);border-color:color-mix(in srgb,var(--green) 48%,transparent)}
.dfs-count.caution{color:var(--amber);background:var(--amber-d);background:color-mix(in srgb,var(--amber) 18%,transparent);border-color:color-mix(in srgb,var(--amber) 48%,transparent)}
.dfs-count.nogo{color:var(--red);background:var(--red-d);background:color-mix(in srgb,var(--red) 18%,transparent);border-color:color-mix(in srgb,var(--red) 48%,transparent)}
.dfs-count.muted{color:var(--t2)}
.dfs-ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.dfs-ch{background:var(--card);border:1px solid var(--b);border-top-width:3px;border-radius:var(--rl);padding:12px 14px}
.dfs-ch.go{border-top-color:var(--green)}
.dfs-ch.caution{border-top-color:var(--amber)}
.dfs-ch.nogo{border-top-color:var(--red)}
.dfs-ch-head{display:flex;align-items:baseline;gap:8px}
.dfs-ch-num{font-weight:600}
.dfs-ch-unii{font-size:0.69rem;color:var(--t2);font-family:var(--mono,monospace)}
.dfs-ch-inuse{margin-left:auto;font-size:0.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--teal);border:1px solid var(--teal);border-radius:5px;padding:0 5px}
/* Filled tint pill behind the SAFE/CAUTION/AVOID designation for legibility in all themes. */
.dfs-ch-verdict{display:inline-block;font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin:6px 0;padding:2px 8px;border-radius:5px}
.dfs-ch-verdict.go{color:var(--green);background:var(--green-d);background:color-mix(in srgb,var(--green) 18%,transparent)}
.dfs-ch-verdict.caution{color:var(--amber);background:var(--amber-d);background:color-mix(in srgb,var(--amber) 18%,transparent)}
.dfs-ch-verdict.nogo{color:var(--red);background:var(--red-d);background:color-mix(in srgb,var(--red) 18%,transparent)}
.dfs-ch-reasons{margin:0;padding-left:16px;color:var(--t2);font-size:0.78rem;line-height:1.5}
.dfs-ch-reasons li{margin:1px 0}
.dfs-ch-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;font-size:0.69rem;color:var(--t2);font-family:var(--mono,monospace)}
.dfs-ch-meta .bad{color:var(--red)}
.dfs-migrate-card{background:var(--card);border:1px solid var(--b);border-left:3px solid var(--b);border-radius:var(--r);padding:11px 14px;margin-bottom:10px;font-size:0.85rem;color:var(--t1);line-height:1.5}
.dfs-migrate-card:last-child{margin-bottom:0}
.dfs-migrate-card.caution{border-left-color:var(--amber)}
.dfs-migrate-card.nogo{border-left-color:var(--red)}

/* RSSI Thresholds tab — equalize spacing between sections so every widget +
   heading sits on the same rhythm regardless of inner content (grid vs table
   vs card, each of which carries different intrinsic bottom margins). */
#panel-rssi .widget-wrap{margin-bottom:24px}
#panel-rssi .widget-wrap:last-child{margin-bottom:0}
#panel-rssi .widget-wrap .tw{margin-bottom:0}
#panel-rssi .widget-wrap .remediation-card{margin-bottom:0}