/* ============================================================================
   eswitch · vSwitch dark design system
   ----------------------------------------------------------------------------
   Dark-only, token-driven. Every color/spacing/radius value used below is a
   CSS custom property defined once at :root. Legacy --wb-* variables (read by
   many rules below AND by a few inline template styles, e.g. admin.html's
   style="color:var(--wb-text-mute)") are kept as thin aliases onto the new
   tokens so the whole system stays single-sourced without a full
   selector-by-selector rewrite.

   HARD CONSTRAINT: static/wm.js drives the Winbox MDI desktop by exact class
   names (.wb-win, .wb-titlebar, .wb-winbody, .wb-resize, .wb-taskbar,
   .wb-winbtn.close/.min/.max, .wb-empty, .wb-find input, .wb-swdd*, [data-win]
   / [data-win-default]). This file only RESTYLES those selectors — it never
   renames or removes them. See CLAUDE.md / task-9-brief.md before editing.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. Minimal reset (no Tailwind — nothing here uses Tailwind utility classes)
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body, h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
table { border-collapse: collapse; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root{
  /* surfaces */
  --bg:#0b0e14;
  --surface:#11151d;
  --raised:#171c26;
  --border:#232a37;
  --subtle-border:#1b212c;

  /* text */
  --text:#e6e9ef;
  --text-2:#9aa3b2;
  --text-3:#5c6472;

  /* accent (electric blue family) */
  --accent:#4c9aff;
  --accent-hover:#6babff;
  --accent-active:#3a86e6;
  --accent-soft:rgba(76,154,255,.14);
  --accent-soft-strong:rgba(76,154,255,.24);
  --accent-ink:#04101f;             /* dark text painted on accent-filled controls */

  /* status */
  --success:#3fb950;
  --success-soft:rgba(63,185,80,.14);
  --danger:#f85149;
  --danger-soft:rgba(248,81,73,.14);
  --warn:#d29922;
  --warn-soft:rgba(210,153,34,.14);

  /* categorical (VLAN mode badges / per-core chart cycling — kept distinct
     from the single UI accent, used only for small tag/legend chips) */
  --cat-violet:#b98cff;
  --cat-cyan:#22d3ee;

  /* spacing scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px;

  /* radius */
  --radius-sm:4px;
  --radius:8px;
  --radius-lg:12px;   /* large surfaces only (e.g. the login card) */

  /* elevation */
  --shadow:0 8px 24px rgb(0 0 0/.45);

  /* type */
  --font-sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"Cascadia Code","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-20:20px; --fs-28:28px;

  /* ---- legacy aliases: every pre-existing --wb-* / --dpi-* custom property
     the rules below (and a few template inline styles) consume, wired onto
     the tokens above so there is exactly one source of truth. ---- */
  --wb-accent:var(--accent);
  --wb-accent-2:var(--accent-hover);
  --wb-desktop:var(--bg);
  --wb-chrome:var(--surface);
  --wb-chrome-2:var(--raised);
  --wb-chrome-border:var(--border);
  --wb-win:var(--surface);
  --wb-win-border:var(--border);
  --wb-title:var(--raised);
  --wb-title-2:var(--surface);
  --wb-title-inact:var(--surface);
  --wb-toolbar:var(--surface);
  --wb-line:var(--border);
  --wb-border:var(--border);
  --wb-grid:var(--subtle-border);
  --wb-th:var(--raised);
  --wb-row-alt:transparent;              /* zebra OFF per spec */
  --wb-row-hover:var(--accent-soft);
  --wb-row-sel:var(--accent-soft-strong);
  --wb-text:var(--text);
  --wb-text-soft:var(--text-2);
  --wb-text-mute:var(--text-3);
  --wb-mono:var(--font-mono);
}

body{
  font-family:var(--font-sans);
  font-size:var(--fs-13);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ---------------------------------------------------------------------------
   2. Global interaction states
   ------------------------------------------------------------------------- */
a{ text-decoration:none; }
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-sm); }
.wb-win:focus-visible{ outline:none; }  /* the window itself isn't a focus target; children handle focus */

::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-thumb{ background:var(--border) padding-box; border:3px solid transparent; border-radius:8px; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--text-3) padding-box; background-clip:padding-box; }
::-webkit-scrollbar-track{ background:transparent; }

.htmx-indicator{ opacity:0; transition:opacity .2s; }
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{ opacity:1; }

.mono{ font-family:var(--font-mono); }
.wb-muted{ color:var(--text-2); }

/* ---------------------------------------------------------------------------
   3. Winbox app shell — header / sidebar / desktop / taskbar
   ------------------------------------------------------------------------- */
.wb-app{ flex-direction:column; height:100vh; display:flex; }

.wb-header{
  background:var(--surface); color:var(--text);
  border-bottom:1px solid var(--border); box-shadow:none;
  height:48px; flex:0 0 48px;
  align-items:center; gap:14px; padding:0 var(--sp-4); display:flex;
}
.wb-brand{ display:flex; align-items:center; gap:9px; font-weight:600; color:var(--text); }
.wb-brand small{ display:block; color:var(--text-3); font-size:10.5px; font-weight:400; }
.wb-brand .wb-logo{ background:linear-gradient(135deg,var(--accent),var(--accent-active)); color:var(--accent-ink);
  border-radius:6px; width:26px; height:26px; display:grid; place-items:center; box-shadow:none; }
.wb-header .wb-select{ background:var(--raised); color:var(--text); border:1px solid var(--border); height:28px; border-radius:var(--radius-sm); }
.wb-header-spacer{ flex:auto; }
.wb-header .wb-counts{ display:flex; align-items:center; gap:10px; }

.wb-side{
  background:var(--surface); color:var(--text-2);
  border-right:1px solid var(--border); width:204px; flex:0 0 204px;
  padding:var(--sp-2) 0 var(--sp-3); overflow-y:auto;
}
.wb-search-wrap{ padding:8px 10px 6px; position:relative; }
.wb-search-wrap svg{ position:absolute; left:19px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--text-3); pointer-events:none; }
.wb-search{ width:100%; height:30px; padding:0 10px 0 30px; color:var(--text); background:var(--raised);
  border:1px solid var(--border); border-radius:var(--radius-sm); outline:none; font-size:12.5px; transition:border-color .12s,background .12s; }
.wb-search::placeholder{ color:var(--text-3); }
.wb-search:focus{ border-color:var(--accent); background:var(--subtle-border); }
.wb-side-group{ color:var(--text-3); text-transform:uppercase; letter-spacing:.08em; padding:14px 14px 4px; font-size:10px; font-weight:700; }
.wb-side-item{ display:flex; align-items:center; gap:9px; color:var(--text-2); border-left:3px solid transparent;
  padding:7px 14px 7px 15px; font-size:12.5px; cursor:pointer; transition:background .12s,color .12s; }
.wb-side-item:hover{ background:var(--subtle-border); color:var(--text); }
.wb-side-item.active{ background:var(--accent-soft); border-left-color:var(--accent); color:var(--text); font-weight:600; }
.wb-side-item svg{ flex:0 0 16px; width:16px; height:16px; color:var(--text-3); }
.wb-side-item.active svg,.wb-side-item:hover svg{ color:var(--accent-hover); }
.wb-side-item.hidden,.wb-side-group.hidden{ display:none; }
.wb-side-item:focus-visible{ outline-offset:-2px; }

.wb-desktop{ background:
    radial-gradient(1100px 480px at 18% -12%, rgba(76,154,255,.05), transparent 60%),
    var(--bg);
  flex:auto; min-width:0; position:relative; overflow:hidden; }

.wb-taskbar{ border-top:1px solid var(--border); background:var(--surface);
  height:32px; flex:0 0 32px; align-items:center; gap:5px; padding:0 var(--sp-2); display:flex; overflow-x:auto; }
.wb-task{ cursor:pointer; height:23px; color:var(--text-2); white-space:nowrap; background:var(--raised);
  border:1px solid var(--border); border-radius:var(--radius-sm); align-items:center; gap:4px; max-width:190px;
  padding:0 4px 0 10px; font-size:12px; display:flex; transition:background .12s,border-color .12s; }
.wb-task .lbl{ overflow:hidden; text-overflow:ellipsis; }
.wb-task-close{ width:16px; height:16px; color:var(--text-3); border-radius:3px; flex:none; display:inline-flex; align-items:center; justify-content:center; }
.wb-task-close:hover{ color:var(--text); background:var(--subtle-border); }
.wb-task:hover{ color:var(--text); border-color:var(--text-3); }
.wb-task.active{ border-color:var(--accent); background:var(--accent-soft); color:var(--text); font-weight:600; }
.wb-task.minimized{ color:var(--text-3); font-style:italic; }

/* ---------------------------------------------------------------------------
   4. Windows (Winbox MDI child windows)
   ------------------------------------------------------------------------- */
.wb-win{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  flex-direction:column; min-width:280px; min-height:140px; display:flex;
  position:absolute; overflow:hidden; box-shadow:var(--shadow);
}
.wb-win.maximized{ border:0; border-radius:0; box-shadow:none; width:auto!important; height:auto!important; inset:0!important; }
.wb-win.dragging,.wb-win.resizing{ user-select:none; }
.wb-win.inactive{ box-shadow:0 4px 14px rgb(0 0 0/.32); }

.wb-titlebar{
  background:var(--raised); color:var(--text); cursor:move;
  height:32px; flex:0 0 32px; align-items:center; gap:8px; padding:0 6px 0 12px;
  font-size:12.5px; font-weight:600; display:flex; border-bottom:1px solid var(--border);
}
.wb-win.inactive .wb-titlebar{ color:var(--text-3); background:var(--surface); }
.wb-titlebar .wb-ico{ color:var(--accent); opacity:.95; width:14px; height:14px; }
.wb-win.inactive .wb-titlebar .wb-ico{ color:var(--text-3); }
.wb-title-text{ flex:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wb-winbtns{ display:flex; gap:3px; }
.wb-winbtn{ color:var(--text-2); cursor:pointer; background:transparent; border:1px solid transparent; border-radius:var(--radius-sm);
  width:21px; height:21px; display:grid; place-items:center; line-height:0; transition:background .12s,color .12s; }
.wb-winbtn:hover{ background:var(--subtle-border); color:var(--text); }
.wb-winbtn.close:hover{ background:var(--danger); color:#fff; }
.wb-winbtn:focus-visible{ outline-offset:1px; }

.wb-winbody{ background:var(--surface); flex:auto; min-height:0; overflow:auto; }
.wb-resize{ cursor:nwse-resize; width:16px; height:16px; position:absolute; bottom:0; right:0;
  background:linear-gradient(135deg,transparent 50%,var(--border) 50%,var(--border) 60%,transparent 60%,transparent 72%,var(--border) 72%,var(--border) 82%,transparent 82%); }
.wb-win.maximized .wb-resize{ display:none; }

/* ---------------------------------------------------------------------------
   5. Toolbar & buttons
   ------------------------------------------------------------------------- */
.wb-toolbar{ background:var(--surface); border-bottom:1px solid var(--border);
  align-items:center; gap:var(--sp-2); padding:8px var(--sp-3); display:flex; flex-wrap:wrap;
  position:sticky; top:0; z-index:2; }
.wb-toolbar .sep{ background:var(--border); width:1px; height:18px; margin:0 3px; }
.wb-toolbar .spacer{ flex:auto; }

.wb-btn{
  cursor:pointer; height:28px; color:var(--text); background:var(--raised); border:1px solid var(--border);
  border-radius:var(--radius-sm); align-items:center; gap:6px; padding:0 var(--sp-3); font-size:12.5px; font-weight:500;
  display:inline-flex; transition:background .12s,border-color .12s,color .12s,transform .08s;
}
.wb-btn:hover{ background:var(--subtle-border); border-color:var(--text-3); }
.wb-btn:active{ transform:translateY(1px); }
.wb-btn:disabled{ opacity:.45; cursor:default; pointer-events:none; }
.wb-btn svg{ width:13px; height:13px; }
.wb-btn.icon{ padding:0 8px; height:26px; font-size:12px; }
.wb-btn.primary{ color:var(--accent-ink); font-weight:600; border-color:transparent;
  background:linear-gradient(180deg,var(--accent-hover),var(--accent)); box-shadow:0 1px 0 rgb(255 255 255/.18) inset; }
.wb-btn.primary:hover{ background:linear-gradient(180deg,var(--accent-hover),var(--accent-active)); }
.wb-btn.danger{ color:var(--danger); }
.wb-btn.danger:hover{ background:var(--danger-soft); border-color:rgba(248,81,73,.4); }
.wb-btn.success{ color:var(--success); }
.wb-btn.success:hover{ background:var(--success-soft); border-color:rgba(63,185,80,.4); }

/* ---------------------------------------------------------------------------
   6. Quick-find + switch-context chip
   ------------------------------------------------------------------------- */
.wb-find{ display:inline-flex; align-items:center; position:relative; }
.wb-find svg{ position:absolute; left:8px; width:12px; height:12px; color:var(--text-3); pointer-events:none; }
.wb-find input{ height:28px; width:170px; padding:0 8px 0 26px; font-size:12.5px; color:var(--text);
  background:var(--raised); border:1px solid var(--border); border-radius:var(--radius-sm); outline:none; transition:border-color .12s; }
.wb-find input:focus{ border-color:var(--accent); }
.wb-find input::placeholder{ color:var(--text-3); }

.wb-ctx{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 8px; border:1px solid var(--border);
  background:var(--raised); border-radius:var(--radius-sm); font-size:11.5px; color:var(--text-2); font-weight:600; }
.wb-ctx .dot{ width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 6px rgba(63,185,80,.5); }
.wb-ctx.off .dot{ background:var(--text-3); box-shadow:none; }
.wb-ctx .who{ color:var(--text); font-weight:700; }

/* ---------------------------------------------------------------------------
   7. Header switch selector (searchable dropdown)
   ------------------------------------------------------------------------- */
.wb-swdd{ position:relative; display:inline-block; }
.wb-swdd-trigger{ display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 12px; min-width:188px; max-width:320px;
  background:var(--raised); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm);
  font-size:13px; font-weight:600; cursor:pointer; user-select:none; transition:background .12s,border-color .12s,box-shadow .12s; }
.wb-swdd-trigger:hover{ background:var(--subtle-border); border-color:var(--text-3); }
.wb-swdd.open .wb-swdd-trigger{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.wb-swdd-trigger .ico{ color:var(--accent); flex:0 0 auto; }
.wb-swdd-trigger .cap{ color:var(--text-3); font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  flex:0 0 auto; border-right:1px solid var(--border); padding-right:8px; }
.wb-swdd-trigger .dot{ width:9px; height:9px; border-radius:50%; background:var(--success); flex:0 0 auto;
  box-shadow:0 0 0 2px rgba(63,185,80,.28),0 0 6px rgba(63,185,80,.5); }
.wb-swdd-trigger .dot.off{ background:var(--text-3); box-shadow:none; }
.wb-swdd-trigger .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.wb-swdd-trigger .nm.muted{ color:var(--text-2); font-weight:500; }
.wb-swdd-trigger .loc{ color:var(--text-2); font-weight:500; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wb-swdd-trigger .chev{ margin-left:auto; color:var(--text-3); opacity:.9; transition:transform .12s; }
.wb-swdd.open .wb-swdd-trigger .chev{ transform:rotate(180deg); }

.wb-swdd-panel{ position:absolute; top:36px; left:0; z-index:2000; width:300px; max-width:84vw;
  background:var(--raised); color:var(--text); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; }
.wb-swdd-panel[hidden]{ display:none; }
.wb-swdd-search{ display:flex; align-items:center; gap:7px; padding:9px 10px; border-bottom:1px solid var(--border); background:var(--surface); }
.wb-swdd-search svg{ width:14px; height:14px; color:var(--text-3); flex:0 0 auto; }
.wb-swdd-input{ flex:1; height:28px; border:1px solid var(--border); border-radius:var(--radius-sm); padding:0 8px;
  font-size:12.5px; color:var(--text); background:var(--bg); outline:none; }
.wb-swdd-input:focus{ border-color:var(--accent); }
.wb-swdd-list{ max-height:340px; overflow:auto; padding:4px; }
.wb-swdd-item{ display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:6px; cursor:pointer; font-size:12.5px; line-height:1.2; }
.wb-swdd-item[hidden]{ display:none; }
.wb-swdd-item .dot{ width:8px; height:8px; border-radius:50%; background:var(--success); flex:0 0 auto; }
.wb-swdd-item .dot.off{ background:var(--text-3); }
.wb-swdd-item .nm{ font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wb-swdd-item.off .nm{ color:var(--text-2); }
.wb-swdd-item .loc{ color:var(--text-3); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wb-swdd-item .grow{ flex:1 1 auto; min-width:8px; }
.wb-swdd-item .cnt{ color:var(--text-3); font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; flex:0 0 auto; }
.wb-swdd-item .cnt.off{ color:var(--warn); }
.wb-swdd-item .chk{ color:var(--accent); flex:0 0 auto; opacity:0; }
.wb-swdd-item.active .chk{ opacity:1; }
.wb-swdd-item.active{ background:var(--accent-soft); }
.wb-swdd-item.kbd,.wb-swdd-item:hover{ background:var(--subtle-border); }
.wb-swdd-item.active.kbd,.wb-swdd-item.active:hover{ background:var(--accent-soft-strong); }
.wb-swdd-empty,.wb-swdd-nomatch{ padding:16px 10px; text-align:center; color:var(--text-3); font-size:12px; }
.wb-swdd-nomatch[hidden]{ display:none; }

/* ---------------------------------------------------------------------------
   8. Tables — dense rows (~32px), sticky header, tabular-nums, hover, no zebra
   ------------------------------------------------------------------------- */
.wb-tablewrap{ width:100%; max-width:100%; overflow-x:auto; }
.wb-table{ width:100%; font-size:12.5px; font-variant-numeric:tabular-nums; }
.wb-table thead th{ position:sticky; top:0; z-index:1; background:var(--raised); text-align:left; color:var(--text-2);
  border-bottom:1px solid var(--border); white-space:nowrap; padding:8px 10px; font-size:11.5px; font-weight:600; }
.wb-table tbody td{ border-bottom:1px solid var(--subtle-border); white-space:nowrap; padding:8px 10px; }
.wb-table tbody tr{ transition:background .1s; }
.wb-table tbody tr:hover{ background:var(--accent-soft); }
.wb-table tbody tr.selected{ background:var(--accent-soft-strong); }
.wb-table tbody tr.wb-rowlink{ cursor:pointer; }
.wb-table tbody tr.wb-rowlink:active{ background:var(--accent-soft-strong); }
.wb-table .mono{ font-family:var(--font-mono); font-size:11.5px; }
.wb-table .num,.wb-table th.num,.wb-table td.num,.wb-table .right{ text-align:right; font-variant-numeric:tabular-nums; }
.wb-table tbody tr.wb-rowdim td{ opacity:.5; }

.wb-celllink,.wb-itype{ cursor:pointer; }
.wb-celllink:hover{ color:var(--accent); text-decoration:underline; }
.wb-itype{ vertical-align:middle; color:var(--text-3); margin-right:6px; display:inline-flex; }
.wb-itype svg{ width:14px; height:14px; }

.wb-live{ color:var(--text-3); align-items:center; gap:6px; font-size:11px; display:inline-flex; }
.wb-live .dot{ background:var(--success); border-radius:50%; width:7px; height:7px; box-shadow:0 0 6px rgba(63,185,80,.5); }

/* ---------------------------------------------------------------------------
   9. Empty states — icon + one-line (+ inline action where relevant)
   ------------------------------------------------------------------------- */
.wb-empty{ text-align:center; color:var(--text-3); padding:34px 18px; font-size:12.5px; }
.wb-empty-ico{ display:block; width:26px; height:26px; margin:0 auto 10px; color:var(--text-3); opacity:.7; }
.wb-empty b{ color:var(--text-2); font-weight:600; }
.wb-empty .wb-empty-title{ display:block; color:var(--text-2); font-size:13px; font-weight:600; margin-bottom:4px; }
.wb-note{ color:var(--text-2); font-size:12px; background:var(--raised); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; }

/* ---------------------------------------------------------------------------
   10. KV detail grid
   ------------------------------------------------------------------------- */
.wb-kv{ display:grid; grid-template-columns:170px 1fr; gap:0; align-items:stretch; padding:0; font-size:12.5px; }
.wb-kv .k{ color:var(--text-2); font-weight:400; padding:7px 12px; background:var(--surface); border-bottom:1px solid var(--subtle-border); }
.wb-kv .v{ color:var(--text); padding:7px 12px; border-bottom:1px solid var(--subtle-border); }
.wb-kv .v.mono{ font-family:var(--font-mono); font-size:12px; }
.wb-kv .sec{ grid-column:1/-1; margin:0; padding:6px 12px; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--raised); color:var(--text-2); font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; }

/* ---------------------------------------------------------------------------
   11. Badges — VLAN mode / QinQ tags
   ------------------------------------------------------------------------- */
.wb-vbadge{ display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:var(--radius-sm); font-size:10.5px;
  line-height:16px; font-weight:700; letter-spacing:.02em; border:1px solid; text-transform:uppercase; }
.wb-vbadge.access{ color:var(--accent-hover); background:var(--accent-soft); border-color:rgba(76,154,255,.35); }
.wb-vbadge.trunk{ color:var(--cat-violet); background:rgba(185,140,255,.14); border-color:rgba(185,140,255,.35); }
.wb-vbadge.native{ color:var(--cat-cyan); background:rgba(34,211,238,.13); border-color:rgba(34,211,238,.32); }
.wb-vbadge.qinq{ color:var(--warn); background:var(--warn-soft); border-color:rgba(210,153,34,.35); }
.wb-vbadge.none{ color:var(--text-2); background:var(--raised); border-color:var(--border); }

.wb-vtags{ display:flex; flex-wrap:wrap; gap:3px; }
.wb-vtag{ font-family:var(--font-mono); font-size:10.5px; font-weight:600; color:var(--text-2); background:var(--raised);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:0 6px; line-height:16px; }
.wb-vtag.s{ color:var(--warn); background:var(--warn-soft); border-color:rgba(210,153,34,.35); }
.wb-tag{ color:var(--text-2); background:var(--raised); border-radius:3px; margin-right:4px; padding:1px 6px; font-size:10.5px; display:inline-block; }
.wb-tagpill{ border:1px solid; border-radius:3px; padding:1px 8px; font-size:11px; font-weight:600; display:inline-block; }
.wb-tagpill.pin{ color:var(--accent-hover); background:var(--accent-soft); border-color:rgba(76,154,255,.35); }
.wb-tagpill.prefer{ color:var(--text-2); background:var(--raised); border-color:var(--border); }

.wb-checkgrid{ display:flex; flex-wrap:wrap; gap:5px 14px; margin:2px 0 6px; }
.wb-check{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; cursor:pointer; color:var(--text); }

/* ---------------------------------------------------------------------------
   12. Status pills
   ------------------------------------------------------------------------- */
.wb-pill{ border:1px solid; border-radius:999px; align-items:center; gap:5px; padding:2px 9px; font-size:11px; font-weight:600; display:inline-flex; }
.wb-pill .dot{ border-radius:50%; width:7px; height:7px; }
.wb-pill.up,.wb-pill.ok{ color:var(--success); background:var(--success-soft); border-color:rgba(63,185,80,.35); }
.wb-pill.up .dot,.wb-pill.ok .dot{ background:var(--success); box-shadow:0 0 6px rgba(63,185,80,.5); }
.wb-pill.dialing,.wb-pill.degraded{ color:var(--warn); background:var(--warn-soft); border-color:rgba(210,153,34,.35); }
.wb-pill.dialing .dot,.wb-pill.degraded .dot{ background:var(--warn); }
.wb-pill.dialing .dot{ animation:wb-pulse 1.2s infinite; }
.wb-pill.down,.wb-pill.saturated{ color:var(--danger); background:var(--danger-soft); border-color:rgba(248,81,73,.35); }
.wb-pill.down .dot,.wb-pill.saturated .dot{ background:var(--danger); }
.wb-pill.saturated .dot{ animation:wb-pulse 1.2s infinite; }
.wb-pill.disabled{ color:var(--text-3); background:var(--raised); border-color:var(--border); }
.wb-pill.disabled .dot{ background:var(--text-3); }
@keyframes wb-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ---------------------------------------------------------------------------
   13. Banners / alerts / toggles
   ------------------------------------------------------------------------- */
.wb-banner{ color:var(--warn); background:var(--warn-soft); border:1px solid rgba(210,153,34,.35); border-radius:var(--radius-sm);
  margin:6px 8px; padding:8px 11px; font-size:11.5px; }
.wb-banner code{ font-family:var(--font-mono); }
.wb-banner.ok{ color:var(--success); background:var(--success-soft); border-color:rgba(63,185,80,.35); }
.wb-error{ color:var(--danger); background:var(--danger-soft); border:1px solid rgba(248,81,73,.35); border-radius:var(--radius-sm); padding:8px 11px; font-size:12px; }

.wb-toggle{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
.wb-toggle input{ display:none; }
.wb-toggle .track{ width:36px; height:20px; border-radius:999px; background:var(--border); position:relative; transition:background .12s; flex:none; border:1px solid var(--border); }
.wb-toggle .track:after{ content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%;
  background:var(--text-2); box-shadow:0 1px 2px rgb(0 0 0/.4); transition:transform .12s,background .12s; }
.wb-toggle input:checked+.track{ background:var(--success-soft); border-color:var(--success); }
.wb-toggle input:checked+.track:after{ transform:translateX(16px); background:var(--success); }
.wb-toggle input:disabled+.track{ opacity:.45; cursor:default; }
.wb-toggle .lbl{ font-size:12px; color:var(--text-2); font-weight:600; }

/* simple checkbox+span switch (used by the STP/RSTP inline table toggles) */
.wb-switch{ display:inline-flex; align-items:center; cursor:pointer; user-select:none; }
.wb-switch input{ display:none; }
.wb-switch span{ width:34px; height:19px; border-radius:999px; background:var(--border); position:relative; transition:background .12s; border:1px solid var(--border); }
.wb-switch span:after{ content:""; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%;
  background:var(--text-2); transition:transform .12s,background .12s; }
.wb-switch input:checked+span{ background:var(--success-soft); border-color:var(--success); }
.wb-switch input:checked+span:after{ transform:translateX(15px); background:var(--success); }

/* ---------------------------------------------------------------------------
   14. Forms
   ------------------------------------------------------------------------- */
.wb-form{ display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-4); }
.wb-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.wb-field{ display:flex; flex-direction:column; gap:5px; }
.wb-label{ color:var(--text-2); font-size:11.5px; font-weight:600; }
.wb-input,.wb-select,.wb-textarea{ height:30px; color:var(--text); background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); outline:none; width:100%; padding:0 10px; font-size:13px; transition:border-color .12s,box-shadow .12s; }
.wb-textarea{ resize:vertical; height:auto; min-height:64px; padding:8px 10px; }
.wb-input:focus,.wb-select:focus,.wb-textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.wb-input[readonly]{ color:var(--text-2); background:var(--surface); }
.wb-input.mono,.wb-textarea.mono{ font-family:var(--font-mono); }
.wb-input::placeholder,.wb-textarea::placeholder{ color:var(--text-3); }
.wb-hint,.wb-fieldhint{ color:var(--text-3); font-size:10.5px; margin-top:1px; }
.wb-formactions{ border-top:1px solid var(--border); background:var(--surface); justify-content:flex-end; gap:var(--sp-2); padding:10px var(--sp-4); display:flex; }
.wb-section{ letter-spacing:.05em; text-transform:uppercase; color:var(--text-3); padding:10px var(--sp-4) 4px; font-size:11px; font-weight:700; }

/* ---------------------------------------------------------------------------
   15. Detail tabs
   ------------------------------------------------------------------------- */
.wb-tabs{ background:var(--surface); border-bottom:1px solid var(--border); gap:2px; padding:6px 8px 0; display:flex; }
.wb-tab{ cursor:pointer; color:var(--text-2); background:none; border:1px solid transparent; border-bottom:none; border-radius:6px 6px 0 0;
  padding:6px 16px; font-size:12.5px; position:relative; top:1px; transition:color .12s,background .12s; }
.wb-tab:hover{ color:var(--text); background:var(--subtle-border); }
.wb-tab.active{ background:var(--raised); color:var(--text); border-color:var(--border); font-weight:600; }

/* ---------------------------------------------------------------------------
   16. Cards / stat tiles
   ------------------------------------------------------------------------- */
.wb-card{ background:var(--raised); border:1px solid var(--border); border-radius:var(--radius); padding:var(--sp-3); }
.wb-card-h{ color:var(--text-2); margin:0 2px 8px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.wb-statgrid{ flex-wrap:wrap; gap:var(--sp-4); padding:8px 4px 10px; display:flex; }
.wb-stat{ display:flex; flex-direction:column; gap:2px; }
.wb-stat .k{ text-transform:uppercase; letter-spacing:.04em; color:var(--text-3); font-size:10px; }
.wb-stat b{ font-size:var(--fs-16); font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------------------------
   17. Chart chrome / legend / range pills / meters
   ------------------------------------------------------------------------- */
.wb-chart{ width:100%; min-width:0; }
.wb-legend{ color:var(--text-2); flex-wrap:wrap; gap:14px; padding:6px 2px 1px; font-size:11px; display:flex; }
.wb-legend i{ vertical-align:-1px; border-radius:2px; width:9px; height:9px; margin-right:5px; display:inline-block; }
.wb-range{ gap:2px; display:inline-flex; }
.wb-rangepill{ cursor:pointer; color:var(--text-2); background:var(--raised); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:3px 10px; font-size:11px; transition:background .12s,border-color .12s; }
.wb-rangepill:hover{ background:var(--subtle-border); }
.wb-rangepill.active{ background:var(--accent); border-color:var(--accent-active); color:var(--accent-ink); font-weight:600; }

.wb-ubar{ border:1px solid var(--border); background:var(--surface); border-radius:3px; min-width:78px; height:15px; position:relative; overflow:hidden; }
.wb-ubar>span{ background:var(--accent); transition:width .4s; position:absolute; top:0; bottom:0; left:0; }
.wb-ubar.warn>span{ background:var(--warn); }
.wb-ubar.hot>span{ background:var(--danger); }
.wb-ubar>em{ color:var(--text); font-variant-numeric:tabular-nums; justify-content:center; align-items:center; font-size:10px; font-style:normal; display:flex; position:absolute; inset:0; }

/* ---------------------------------------------------------------------------
   18. DPDK core-mask widget (monitoring.html inline uses these two)
   ------------------------------------------------------------------------- */
.dpdk-core{ background:var(--raised); }
.dpdk-core.in-mask{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent-active)!important; }
.dpdk-core.isolated{ box-shadow:inset 0 0 0 1px var(--warn); }
.wb-badge-live{ font-size:10px; background:var(--success); color:var(--accent-ink); border-radius:3px; padding:1px 6px; font-weight:700; }
.wb-badge-restart{ font-size:10px; background:var(--warn); color:var(--accent-ink); border-radius:3px; padding:1px 6px; font-weight:700; }

/* ---------------------------------------------------------------------------
   19. Toasts (static/ui.js)
   ------------------------------------------------------------------------- */
.toast-stack{ position:fixed; right:var(--sp-4); bottom:var(--sp-4); z-index:9999; display:flex; flex-direction:column;
  gap:var(--sp-2); max-width:340px; pointer-events:none; }
.toast{ pointer-events:auto; display:flex; align-items:flex-start; gap:10px; padding:11px 14px; border-radius:var(--radius);
  background:var(--raised); border:1px solid var(--border); box-shadow:var(--shadow); color:var(--text);
  font-size:12.5px; line-height:1.45; animation:toast-in .18s ease-out; }
.toast .ic{ flex:none; width:16px; height:16px; margin-top:1px; }
.toast.ok{ border-color:rgba(63,185,80,.4); }
.toast.ok .ic{ color:var(--success); }
.toast.error{ border-color:rgba(248,81,73,.4); }
.toast.error .ic{ color:var(--danger); }
.toast .msg{ flex:auto; min-width:0; word-break:break-word; }
.toast .x{ flex:none; cursor:pointer; color:var(--text-3); background:none; border:0; padding:2px; border-radius:4px; line-height:0; }
.toast .x:hover{ color:var(--text); background:var(--subtle-border); }
.toast.leaving{ animation:toast-out .16s ease-in forwards; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(6px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes toast-out{ to{ opacity:0; transform:translateY(4px) scale(.98); } }

/* ---------------------------------------------------------------------------
   20. ISP plane chrome — shared by fleet.html / settings.html (portal-*)
   ------------------------------------------------------------------------- */
.portal-body{ background:var(--bg); min-height:100vh; overflow:auto; }
.portal-header{ background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center;
  gap:var(--sp-4); height:48px; padding:0 var(--sp-4); }
.portal-brand{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:14px; color:var(--text); text-decoration:none; }
.portal-brand .wb-logo{ background:linear-gradient(135deg,var(--accent),var(--accent-active)); color:var(--accent-ink);
  border-radius:6px; width:26px; height:26px; display:grid; place-items:center; }
.portal-nav{ display:flex; align-items:center; gap:2px; margin-left:6px; }
.portal-nav a{ color:var(--text-2); text-decoration:none; font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:var(--radius-sm); transition:background .12s,color .12s; }
.portal-nav a:hover{ background:var(--subtle-border); color:var(--text); }
.portal-nav a.active{ background:var(--accent-soft); color:var(--accent-hover); }
.portal-spacer{ flex:auto; }
.portal-user{ display:flex; align-items:center; gap:10px; font-size:12px; color:var(--text-2); }
.portal-user b{ color:var(--text); font-weight:600; }
.portal-main{ max-width:1200px; margin:0 auto; padding:var(--sp-6) var(--sp-4) 44px; }
.portal-statbar{ display:flex; align-items:center; gap:10px; margin-bottom:var(--sp-4); flex-wrap:wrap; }
.portal-title{ font-size:var(--fs-20); font-weight:700; color:var(--text); margin-right:6px; }
.portal-note{ background:var(--raised); border:1px solid var(--border); border-radius:var(--radius); padding:var(--sp-4); color:var(--text-2); font-size:13px; }
.portal-note a{ color:var(--accent); font-weight:600; text-decoration:none; }
.portal-note a:hover{ text-decoration:underline; }

/* fleet grid */
.fleet-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:var(--sp-4); }
.fleet-card{ background:var(--raised); border:1px solid var(--border); border-radius:var(--radius); padding:var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-2); text-decoration:none; color:inherit;
  box-shadow:0 1px 2px rgb(0 0 0/.2); transition:box-shadow .15s,border-color .15s,transform .15s; }
.fleet-card:hover{ border-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-2px); }
.fleet-card:focus-visible{ transform:translateY(-2px); box-shadow:var(--shadow); }
.fleet-card-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.fleet-card-name{ font-size:14px; font-weight:700; color:var(--text); }
.fleet-card-loc{ color:var(--text-3); font-size:11.5px; margin-top:-4px; }
.fleet-card-stats{ display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:2px; }
.fleet-card-stat{ display:flex; flex-direction:column; gap:1px; }
.fleet-card-stat .k{ color:var(--text-3); font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; }
.fleet-card-stat .v{ font-size:12.5px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
.fleet-alert{ align-self:flex-start; color:var(--warn); background:var(--warn-soft); border:1px solid rgba(210,153,34,.35);
  border-radius:999px; padding:1px 9px; font-size:10.5px; font-weight:600; }
.fleet-alert.off{ color:var(--danger); background:var(--danger-soft); border-color:rgba(248,81,73,.35); }
.fleet-empty{ grid-column:1/-1; text-align:center; padding:64px 20px; color:var(--text-2); background:var(--raised);
  border:1px dashed var(--border); border-radius:var(--radius); }
.fleet-empty b{ display:block; color:var(--text); font-size:15px; margin-bottom:8px; }

.portal-modal{ display:none; position:fixed; inset:0; background:rgb(0 0 0/.55); align-items:flex-start; justify-content:center; padding:64px 16px; z-index:50; }
.portal-modal.open{ display:flex; }
.portal-modal-card{ background:var(--raised); border:1px solid var(--border); border-radius:var(--radius); width:560px; max-width:100%; box-shadow:var(--shadow); overflow:hidden; }
.portal-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-bottom:1px solid var(--border); background:var(--surface); }
.portal-modal-head b{ font-size:12.5px; }
.portal-modal-x{ cursor:pointer; border:none; background:none; font-size:18px; color:var(--text-2); line-height:1; padding:2px 7px; border-radius:4px; }
.portal-modal-x:hover{ background:var(--subtle-border); color:var(--text); }

.settings-table-wrap{ background:var(--raised); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.settings-adduser{ background:var(--raised); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:var(--sp-4); }

/* ---------------------------------------------------------------------------
   21. Admin plane: dashboard shell (top bar + left sidebar)
   ------------------------------------------------------------------------- */
.admin-body{ background:var(--bg); min-height:100vh; overflow:auto; }
.admin-shell{ display:flex; align-items:flex-start; min-height:calc(100vh - 48px); }
.admin-side{ flex:0 0 200px; width:200px; background:var(--surface); border-right:1px solid var(--border);
  padding:var(--sp-3) 0; position:sticky; top:48px; align-self:flex-start; }
.admin-side a{ display:flex; align-items:center; gap:9px; color:var(--text-2); text-decoration:none; font-size:12.5px;
  font-weight:600; padding:9px 18px; border-left:3px solid transparent; transition:background .12s,color .12s; }
.admin-side a:hover{ background:var(--subtle-border); color:var(--text); }
.admin-side a.active{ background:var(--accent-soft); border-left-color:var(--accent); color:var(--accent-hover); }
.admin-side a svg{ flex:0 0 15px; color:var(--text-3); }
.admin-side a.active svg,.admin-side a:hover svg{ color:var(--accent-hover); }
.admin-main{ flex:auto; min-width:0; padding:var(--sp-6) var(--sp-6) 44px; max-width:1200px; margin:0 auto; }
.admin-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--sp-3); margin-bottom:var(--sp-4); }
.admin-kpi{ background:var(--raised); border:1px solid var(--border); border-radius:var(--radius); padding:var(--sp-3) var(--sp-4); }
.admin-kpi .k{ color:var(--text-3); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
.admin-kpi .v{ font-size:var(--fs-28); font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; margin-top:3px; }
.admin-events{ background:var(--raised); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.admin-events-head{ padding:10px 14px; border-bottom:1px solid var(--border); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-2); }
.admin-events-body{ max-height:360px; overflow:auto; font-family:var(--font-mono); font-size:11.5px; color:var(--text-2); }
.admin-events-body div{ padding:4px 14px; border-bottom:1px solid var(--subtle-border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-events-console{ height:min(72vh,640px); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:0 1px 2px rgb(0 0 0/.2); }
.admin-group{ margin-bottom:var(--sp-6); }
.admin-group h3{ font-size:12.5px; font-weight:700; color:var(--text-2); margin:0 0 6px; display:flex; align-items:center; gap:8px; }
.admin-group h3 .cnt{ color:var(--text-3); font-weight:500; }

/* ---------------------------------------------------------------------------
   22. Log console (already dark by nature — aligned to the shared tokens)
   ------------------------------------------------------------------------- */
.wb-log{ background:var(--surface); flex-direction:column; height:100%; min-height:0; display:flex; }
.wb-log-bar{ background:var(--surface); border-bottom:1px solid var(--border); flex-wrap:wrap; align-items:center; gap:6px; padding:8px; display:flex; }
.wb-log-find{ align-items:center; display:inline-flex; position:relative; }
.wb-log-find svg{ width:13px; height:13px; color:var(--text-3); pointer-events:none; position:absolute; left:8px; }
.wb-log-input{ border:1px solid var(--border); width:210px; color:var(--text); background:var(--bg); border-radius:var(--radius-sm); outline:none; padding:5px 28px; font-size:12px; }
.wb-log-input:focus{ border-color:var(--accent); }
.wb-log-re{ height:20px; color:var(--text-3); cursor:pointer; background:none; border:1px solid transparent; border-radius:4px; padding:0 6px;
  font-family:var(--font-mono); font-size:11px; position:absolute; right:4px; }
.wb-log-re:hover{ color:var(--text); background:var(--subtle-border); }
.wb-log-re.active{ background:var(--accent); color:var(--accent-ink); }
.wb-log-sel{ max-width:150px; padding:4px 6px; font-size:12px; }
.wb-log-lv{ gap:4px; display:inline-flex; }
.wb-chip{ cursor:pointer; border:1px solid var(--border); color:var(--text-3); opacity:.6; background:var(--raised); border-radius:11px; padding:3px 10px; font-size:11px; font-weight:600; transition:opacity .12s; }
.wb-chip:hover{ opacity:.9; }
.wb-chip.active{ opacity:1; }
.wb-chip.info.active{ color:var(--accent-hover); background:var(--accent-soft); border-color:rgba(76,154,255,.4); }
.wb-chip.warn.active{ color:var(--warn); background:var(--warn-soft); border-color:rgba(210,153,34,.4); }
.wb-chip.error.active{ color:var(--danger); background:var(--danger-soft); border-color:rgba(248,81,73,.4); }
.wb-log-status{ border-bottom:1px solid var(--border); background:var(--surface); align-items:center; gap:8px; padding:4px 10px; font-size:11px; display:flex; }
.wb-log-status .sep{ background:var(--border); width:1px; height:12px; }
.wb-log-status .spacer{ flex:auto; }
.wb-log-conn{ align-items:center; gap:6px; font-weight:600; display:inline-flex; }
.wb-log-conn .dot{ background:var(--text-3); border-radius:50%; width:8px; height:8px; }
.wb-log-conn.live{ color:var(--success); }
.wb-log-conn.live .dot{ background:var(--success); }
.wb-log-conn.connecting{ color:var(--warn); }
.wb-log-conn.connecting .dot{ background:var(--warn); animation:wb-pulse 1.2s infinite; }
.wb-log-conn.err{ color:var(--danger); }
.wb-log-conn.err .dot{ background:var(--danger); animation:wb-pulse 1.2s infinite; }
.wb-log-view{ color:var(--text-2); background:var(--bg); flex:auto; min-height:0; padding:4px 0; font-family:var(--font-mono); font-size:12px; line-height:1.5; overflow:auto; }
.wb-log-empty{ color:var(--text-3); padding:14px; font-style:italic; }
.wb-log-row{ white-space:nowrap; border-left:3px solid transparent; gap:8px; padding:1px 10px; display:flex; }
.wb-log-row:hover{ background:rgba(255,255,255,.03); }
.wb-log-view.wrap .wb-log-row{ white-space:normal; }
.wb-log-row .ts{ color:var(--text-3); user-select:none; flex:none; }
.wb-log-view.no-ts .wb-log-row .ts{ display:none; }
.wb-log-row .src{ text-align:center; letter-spacing:.3px; user-select:none; border-radius:3px; flex:none; align-self:center; min-width:50px; padding:0 5px; font-size:10px; font-weight:700; }
.wb-log-row .who{ text-overflow:ellipsis; color:var(--accent-hover); flex:none; min-width:84px; max-width:200px; overflow:hidden; }
.wb-log-row .who .prov{ color:var(--text-3); }
.wb-log-row .t{ flex:auto; min-width:0; }
.wb-log-view.wrap .wb-log-row .t{ word-break:break-word; }
.wb-log-row .t mark{ color:#1a1207; background:#f4d35e; border-radius:2px; padding:0 1px; }
.wb-log-row .src{ white-space:nowrap; }
.wb-log-row.src-uplink-auth .src{ color:#6fd3ff; background:#16384f; }
.wb-log-row.src-uplink-error .src{ color:#ff9a9a; background:#4a1d20; }
.wb-log-row.src-sub-auth .src{ color:#c4a6ff; background:#2c1f4f; }
.wb-log-row.src-sub-error .src{ color:#ff9a9a; background:#4a1d20; }
.wb-log-row.src-daemon .src{ color:#d6e08a; background:#2a2f1c; }
.wb-log-row.lvl-error{ color:#ff9a9a; border-left-color:var(--danger); }
.wb-log-row.lvl-warn{ color:#f1c887; border-left-color:var(--warn); }
.wb-log-row.lvl-info{ border-left-color:transparent; }

/* ---------------------------------------------------------------------------
   23. Auth (login.html) — centered card, wordmark, grid backdrop
   ------------------------------------------------------------------------- */
.auth-body{
  margin:0; color:var(--text); font-family:var(--font-sans);
  background:
    radial-gradient(900px 560px at 50% -8%, #14203a 0%, rgba(20,32,58,0) 60%),
    radial-gradient(760px 520px at 50% 118%, #0e1626 0%, rgba(14,22,38,0) 55%),
    var(--bg);
  display:flex; align-items:center; justify-content:center; min-height:100vh; position:relative;
}
.auth-body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(140,170,220,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,170,220,.045) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(680px 500px at 50% 36%, #000 0%, transparent 75%);
}
.auth-card{
  position:relative; width:min(360px, calc(100vw - 32px)); padding:30px 30px 26px;
  background:linear-gradient(180deg,var(--raised) 0%,var(--surface) 100%);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:0 1px 0 rgb(255 255 255/.03) inset, var(--shadow);
}
.auth-card::before{
  content:""; position:absolute; left:24px; right:24px; top:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), var(--accent-hover), transparent);
  opacity:.7;
}
.auth-brand{ display:flex; align-items:baseline; gap:9px; margin-bottom:2px; }
.auth-wordmark{ font:600 22px/1 var(--font-mono); letter-spacing:.01em; color:var(--text); }
.auth-wordmark .accent-v{ color:var(--accent); }
.auth-tagline{ margin:8px 0 0; font:500 10px/1.4 var(--font-mono); letter-spacing:.28em; text-transform:uppercase; color:var(--text-3); }
.auth-rule{ height:1px; margin:16px 0 18px; background:linear-gradient(90deg,var(--border),transparent); }
.auth-field{ margin-bottom:13px; }
.auth-label{ display:block; margin:0 0 6px; font:600 10px/1 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--text-2); }
.auth-input{
  width:100%; height:40px; padding:0 13px; color:var(--text); background:var(--bg);
  border:1px solid var(--border); border-radius:var(--radius);
  font:14px/40px var(--font-sans); outline:none; transition:border-color .15s,box-shadow .15s,background .15s;
}
.auth-input::placeholder{ color:var(--text-3); }
.auth-input:focus-visible,.auth-input:focus{ border-color:var(--accent); background:var(--subtle-border); box-shadow:0 0 0 3px var(--accent-soft); outline:none; }
.auth-btn{
  width:100%; height:42px; margin-top:6px; border:0; border-radius:var(--radius); cursor:pointer;
  color:var(--accent-ink); font:600 13px/1 var(--font-sans); letter-spacing:.02em;
  background:linear-gradient(90deg,var(--accent),var(--accent-hover));
  box-shadow:0 10px 26px -12px rgba(76,154,255,.6);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
.auth-btn:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.auth-btn:active{ transform:translateY(0); }
.auth-btn:focus-visible{ outline:2px solid var(--accent-hover); outline-offset:2px; }
.auth-foot{ margin:16px 0 0; text-align:center; font-size:11px; color:var(--text-3); letter-spacing:.03em; }
.auth-alert{ margin:0 0 16px; padding:9px 12px; border-radius:var(--radius-sm); font-size:12.5px;
  border:1px solid rgba(248,81,73,.4); background:var(--danger-soft); color:var(--danger); }

/* ---------------------------------------------------------------------------
   24. Interface Traffic tab (interfaces.html `.ifd-tr`) & Resource monitor
        (monitoring.html `.wb-res`) share this dark "telemetry card" language.
        Selectors mirror the accent set with var(--g1)/var(--g2)/var(--ac) so
        the per-tab JS (which flips --ac/--g1/--g2 for mem/proc/uptime) keeps
        working unmodified.
   ------------------------------------------------------------------------- */
.ifd-tr,.wb-res{ --ac:var(--accent); --g1:var(--accent); --g2:var(--cat-cyan); background:var(--surface); color:var(--text); }
.ifd-tr .seg,.wb-res .res-pills,.ebng-rangebar .rb-seg{ background:var(--raised); border-color:var(--border); }
.ifd-tr .seg button,.wb-res .res-pills button{ color:var(--text-2); }
.ifd-tr .seg button:hover,.wb-res .res-pills button:hover{ background:var(--subtle-border); color:var(--text); }
.ifd-tr .seg button.on,.wb-res .res-pills button.on{ color:var(--accent-ink); }
.ifd-tr .tr-head,.ifd-tr .tr-legend{ border-color:var(--border); }
.ifd-tr .tr-card,.wb-res .res-card{ background:var(--raised); border-color:var(--border); box-shadow:0 1px 2px rgb(0 0 0/.25),0 8px 24px -18px rgb(0 0 0/.5); }
.ifd-tr .tr-title,.ifd-tr .leg-name,.ifd-tr .leg-last,.wb-res .res-kpi .v,.wb-res .res-ring .cap b{ color:var(--text); }
.ifd-tr .tr-sub,.wb-res .res-kpi .l,.wb-res .res-ring .cap span,.wb-res .res-uptsince{ color:var(--text-3); }
.ifd-tr .tr-x button,.wb-res .res-tab{ color:var(--text-2); }
.ifd-tr .tr-x button:hover,.wb-res .res-tab:hover{ color:var(--text); }
.ifd-tr .leg-row:hover,.wb-res .res-proc:hover{ background:var(--subtle-border); }
.ifd-tr .leg-row+.leg-row,.wb-res .res-tabs{ border-color:var(--subtle-border); }
.wb-res .res-ring .trk,.wb-res .res-core .bar,.wb-res .res-membar{ background:var(--subtle-border); stroke:var(--subtle-border); }
.wb-res .res-proc .nm b{ color:var(--text); }
.wb-res .res-memtop .big{ color:var(--text); }