/* ── FWS-NG Amber NOC Design System ───────────────────────── */
/* Direction A — all classes prefixed .anoc-*                  */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&display=swap');

/* ── Theme variables (dark, default) ─────────────────────── */
.anoc {
  --bg:      #0c0e10;
  --surface: #13161a;
  --surface2:#181b20;
  --border:  #23272d;
  --border2: #2c3138;
  --text:    #e8e3d4;
  --muted:   #8a8678;
  --dim:     #5a574c;
  --accent:  #f0a020;
  --ok:      #8fcf6e;
  --err:     #e26b6b;
  --warn:    #e2b03e;
  --violet:  #b48ce2;
  --cyan:    #6ecbe0;
  --sans:    'Inter', 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --pad:     9px;
  --rowpad:  10px 12px;
}

/* ── Theme variables (light) ──────────────────────────────── */
.anoc[data-theme="light"] {
  --bg:      #f7f6f3;
  --surface: #ffffff;
  --surface2:#f0eee8;
  --border:  #dad6cd;
  --border2: #c8c2b4;
  --text:    #1a1815;
  --muted:   #6a665a;
  --dim:     #a39d8e;
  --ok:      #3b8f3c;
  --err:     #c33c3c;
  --warn:    #a87a0c;
  --violet:  #7c52b8;
  --cyan:    #1f8fa8;
}

/* ── UI tweaks variants (⚙ panel; persisted in localStorage) ─ */
.anoc[data-density="compact"] { --pad: 6px;  --rowpad: 7px 10px;  }
.anoc[data-density="comfy"]   { --pad: 14px; --rowpad: 14px 14px; }
.anoc[data-font="mono"]       { --sans: var(--mono); }

.anoc-tweaks-panel {
  position: fixed; top: 48px; right: 12px; z-index: 1000;
  background: var(--surface); border: 1px solid var(--border2); border-radius: 6px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.3); min-width: 240px;
}
.anoc-tweaks-h {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--dim);
}
.anoc-tweaks-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.anoc-tweaks-l {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted);
}

/* ── Global reset within .anoc ────────────────────────────── */
.anoc {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.45;
  min-height: 100vh;
  font-feature-settings: "ss01","cv01","cv11";
  letter-spacing: 0.005em;
  margin: 0;
  padding: 0;
}
.anoc * { box-sizing: border-box; }
.anoc a { color: inherit; text-decoration: none; }
.anoc-mono { font-family: var(--mono); letter-spacing: 0; font-feature-settings: normal; }

/* ── Flash notices ────────────────────────────────────────── */
.anoc-flash-notice, .anoc-flash-alert {
  padding: 10px 22px;
  font-family: var(--mono); font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.anoc-flash-notice { background: color-mix(in oklab, var(--ok) 14%, var(--surface)); color: var(--ok); }
.anoc-flash-alert  { background: color-mix(in oklab, var(--err) 14%, var(--surface)); color: var(--err); }

/* ── Title bar ────────────────────────────────────────────── */
.anoc-titlebar {
  display: flex; align-items: center;
  height: 44px; padding: 0 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  position: sticky; top: 0; z-index: 100;
}
.anoc-titlebar-left {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono);
}
.anoc-logomark {
  display: inline-flex; width: 22px; height: 22px;
  align-items: center; justify-content: center;
  background: var(--accent); color: #0c0e10;
  border-radius: 4px; font-size: 13px;
  text-decoration: none;
}
.anoc-titlebar-name { font-weight: 600; letter-spacing: 0.04em; }
.anoc-titlebar-dot { color: var(--accent); margin: 0 1px; }
.anoc-titlebar-sep { color: var(--dim); margin: 0 2px; }
.anoc-titlebar-page { color: var(--muted); }
.anoc-nav {
  display: flex; gap: 4px; margin-left: 22px;
  font-family: var(--mono); font-size: 12px;
}
.anoc-nav-link {
  padding: 5px 9px; border-radius: 5px;
  color: var(--muted); cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
}
.anoc-nav-link:hover { background: var(--surface2); color: var(--text); }
.anoc-nav-link.active {
  color: var(--text); background: var(--surface2);
  border-color: var(--border2);
}
.anoc-titlebar-right {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px;
}
.anoc-userblob {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 12px;
  background: var(--surface2); color: var(--muted);
  border: 1px solid var(--border);
}
.anoc-iconbtn {
  width: 28px; height: 28px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); cursor: pointer;
}
.anoc-iconbtn:hover { background: var(--surface2); color: var(--text); }

/* ── Status dot ───────────────────────────────────────────── */
.anoc-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--dim); flex: none; vertical-align: middle;
}
.anoc-dot-ok   { background: var(--ok);   box-shadow: 0 0 0 2px color-mix(in oklab, var(--ok)   22%, transparent); }
.anoc-dot-err  { background: var(--err);  box-shadow: 0 0 0 2px color-mix(in oklab, var(--err)  22%, transparent); }
.anoc-dot-warn { background: var(--warn); box-shadow: 0 0 0 2px color-mix(in oklab, var(--warn) 22%, transparent); }
.anoc-dot-neutral { background: var(--dim); }

/* ── Stats strip ──────────────────────────────────────────── */
.anoc-stats {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1px; padding: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}
.anoc-stats-4 { grid-template-columns: repeat(4, 1fr); }
.anoc-stats-5 { grid-template-columns: repeat(5, 1fr); }
.anoc-stats-6 { grid-template-columns: repeat(6, 1fr); }
.anoc-stat {
  background: var(--surface);
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
}
.anoc-stat::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--dim); opacity: 0.4;
}
.anoc-stat-ok::before   { background: var(--ok);   opacity: 1; }
.anoc-stat-err::before  { background: var(--err);  opacity: 1; }
.anoc-stat-warn::before { background: var(--warn); opacity: 1; }
.anoc-stat-label {
  font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
}
.anoc-stat-value {
  font-family: var(--mono); font-size: 28px; font-weight: 600;
  color: var(--text); line-height: 1; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.anoc-stat-sub {
  font-family: var(--mono); font-size: 10.5px; color: var(--dim);
}

/* ── Body grid ────────────────────────────────────────────── */
.anoc-body {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: calc(100vh - 44px - 92px - 28px);
}
.anoc-rail {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 22px;
}
.anoc-rail-section { display: flex; flex-direction: column; gap: 8px; }
.anoc-rail-h {
  font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--dim);
}
.anoc-search {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 9px;
  font-family: var(--mono); font-size: 12.5px;
}
.anoc-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 18%, transparent); }
.anoc-search-titlebar { padding: 3px 8px; }
.anoc-search-titlebar input { width: 180px; }
.anoc-search-prompt { color: var(--accent); font-weight: 600; }
.anoc-search input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--text); font: inherit;
}
.anoc-clear {
  background: transparent; border: 0; color: var(--muted);
  cursor: pointer; font-size: 14px; padding: 0 2px;
}

.anoc-chiprow { display: flex; flex-wrap: wrap; gap: 4px; }
.anoc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
  font-family: var(--mono); font-size: 11.5px;
  text-transform: lowercase;
}
.anoc-chip:hover { color: var(--text); border-color: var(--border2); }
.anoc-chip.on {
  background: color-mix(in oklab, var(--accent) 14%, var(--surface2));
  border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
  color: var(--text);
}

.anoc-legend {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.anoc-legend span { display: inline-flex; align-items: center; gap: 6px; }

.anoc-minimap {
  width: 100%; height: auto; aspect-ratio: 240 / 220;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface2);
}
.anoc-minimap-grid { stroke: var(--border); }
.anoc-minimap-land { fill: color-mix(in oklab, var(--accent) 8%, var(--surface2)); stroke: var(--border2); stroke-width: 0.75; }
.anoc-minimap-dot { fill: var(--accent); }
.anoc-minimap-ring { fill: none; stroke: var(--accent); stroke-width: 0.5; opacity: 0.5; }
.anoc-minimap-label {
  font-family: 'JetBrains Mono', monospace; font-size: 7px;
  fill: var(--text); text-anchor: middle;
}

/* ── Main ─────────────────────────────────────────────────── */
.anoc-main { padding: 18px 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.anoc-toolbar {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12px;
}
.anoc-toolbar-left  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.anoc-toolbar-right { margin-left: auto; display: flex; gap: 6px; }
.anoc-toolbar-count { color: var(--text); }
.anoc-toolbar-count em { color: var(--dim); font-style: normal; }
.anoc-toolbar-sep { color: var(--dim); }
.anoc-toolbar-mut { color: var(--muted); }

.anoc-seg {
  display: inline-flex; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 5px; overflow: hidden;
}
.anoc-seg-btn {
  padding: 4px 9px; border: 0; background: transparent;
  color: var(--muted); cursor: pointer; font: inherit;
  font-family: var(--mono); font-size: 11.5px;
}
.anoc-seg-btn + .anoc-seg-btn { border-left: 1px solid var(--border); }
.anoc-seg-btn.on { background: var(--surface); color: var(--text); }

.anoc-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 5px;
  background: var(--accent); color: #0c0e10;
  border: 1px solid var(--accent);
  font: inherit; font-family: var(--mono); font-size: 12px; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.anoc-btn:hover { filter: brightness(1.08); }
.anoc-btn-glyph { font-weight: 600; }
.anoc-btn-ghost {
  background: transparent; color: var(--text);
  border-color: var(--border2);
}
.anoc-btn-ghost:hover { background: var(--surface2); }
.anoc-btn-danger {
  color: var(--err);
  border-color: color-mix(in oklab, var(--err) 40%, var(--border2));
}
.anoc-btn-danger:hover {
  background: color-mix(in oklab, var(--err) 12%, var(--surface2));
}
.anoc-btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ── Table ────────────────────────────────────────────────── */
.anoc-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden;
}
.anoc-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.anoc-table th {
  text-align: left; padding: 9px 12px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 500;
}
.anoc-table td { padding: var(--rowpad); border-bottom: 1px solid var(--border); vertical-align: top; }
.anoc-table tr:last-child td { border-bottom: 0; }
.anoc-row:hover { background: color-mix(in oklab, var(--accent) 6%, var(--surface)); }
.anoc-row-click { cursor: pointer; }
.anoc-row-click:hover .anoc-rowname { color: var(--accent); }
.anoc-mrtg-row td { border-top: none; }
.anoc-mrtg-graph { display: inline-block; }
.anoc-mrtg-img { max-width: 500px; height: auto; border-radius: 3px; opacity: 0.85; display: block; }
.anoc-mrtg-img:hover { opacity: 1; }
.anoc-mrtg-tip-wrap { position: relative; display: inline-flex; align-items: center; }
.anoc-graph-icon-btn { display: inline-flex; align-items: center; padding: 1px 3px; border-radius: 3px;
  color: var(--dim); text-decoration: none; line-height: 1; }
.anoc-graph-icon-btn:hover { color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent); }
.anoc-graph-icon-svg { display: block; }
.anoc-mrtg-tip { display: none; position: fixed; left: 0; top: 0; z-index: 1000;
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  padding: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.2); pointer-events: none;
  max-width: min(560px, calc(100vw - 24px)); }
.anoc-mrtg-tip-wrap:hover .anoc-mrtg-tip { display: block; }
.anoc-mrtg-tip img { max-width: 100%; height: auto; display: block; border-radius: 2px; }

.anoc-group td {
  padding: 14px 12px 6px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 11px;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em;
}
.anoc-group-bar {
  display: inline-block; width: 14px; height: 1px;
  background: var(--accent); margin-right: 8px; vertical-align: middle;
}
.anoc-group-label { color: var(--text); font-weight: 600; }
.anoc-group-meta  { color: var(--dim); margin-left: 10px; }
.anoc-group-best td {
  background: color-mix(in oklab, var(--accent) 10%, var(--bg));
  border-bottom-color: color-mix(in oklab, var(--accent) 35%, var(--border));
}
.anoc-group-best .anoc-group-bar   { background: var(--accent); width: 18px; }
.anoc-group-best .anoc-group-label { color: var(--accent); }
.anoc-row-best > td {
  background: color-mix(in oklab, var(--accent) 8%, var(--surface));
  box-shadow: inset 2px 0 0 var(--accent);
}
.anoc-row-best:hover > td {
  background: color-mix(in oklab, var(--accent) 14%, var(--surface));
}

.anoc-id      { color: var(--muted); font-size: 12px; }
.anoc-rowname { color: var(--text); font-weight: 500; text-decoration: none; cursor: pointer; }
.anoc-rowname:hover { color: var(--accent); }
.anoc-rowsub {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--dim); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em;
}
.anoc-fw {
  display: inline-block; padding: 1px 7px; border-radius: 3px;
  background: color-mix(in oklab, var(--ok) 18%, transparent);
  color: var(--ok); font-family: var(--mono); font-size: 11px;
  border: 1px solid color-mix(in oklab, var(--ok) 35%, transparent);
}
.anoc-fw-stale {
  background: color-mix(in oklab, var(--warn) 16%, transparent);
  color: var(--warn);
  border-color: color-mix(in oklab, var(--warn) 35%, transparent);
}
.anoc-ip  { color: var(--text); font-size: 12px; font-family: var(--mono); }
.anoc-loc { color: var(--muted); font-size: 12.5px; }
.anoc-loc-block { margin: 0 0 8px; padding: 0; }
.anoc-empty { color: var(--dim); font-style: italic; font-size: 11.5px; }
.anoc-conns { display: flex; flex-direction: column; gap: 4px; }
.anoc-conn {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px;
}
.anoc-conn-ip   { color: var(--text); }
.anoc-conn-tech { color: var(--dim); }
.anoc-conn-more {
  font-family: var(--mono); font-size: 11px;
  color: var(--muted); font-style: italic;
}

/* ── Carrier chips ────────────────────────────────────────── */
.anoc-cchip {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  border: 1px solid var(--border2);
  background: var(--surface2); color: var(--muted);
  min-width: 56px; text-align: center;
}
.anoc-cchip-tel   { color: #4aa3ff; border-color: color-mix(in oklab, #4aa3ff 40%, var(--border)); background: color-mix(in oklab, #4aa3ff 10%, var(--surface2)); }
.anoc-cchip-tpg   { color: #d76ad7; border-color: color-mix(in oklab, #d76ad7 40%, var(--border)); background: color-mix(in oklab, #d76ad7 10%, var(--surface2)); }
.anoc-cchip-sl    { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); background: color-mix(in oklab, var(--accent) 10%, var(--surface2)); }
.anoc-cchip-ex    { color: #7fd4b5; border-color: color-mix(in oklab, #7fd4b5 40%, var(--border)); background: color-mix(in oklab, #7fd4b5 10%, var(--surface2)); }
.anoc-cchip-aussie{ color: #c69eff; border-color: color-mix(in oklab, #c69eff 40%, var(--border)); background: color-mix(in oklab, #c69eff 10%, var(--surface2)); }
.anoc-cchip-other { color: #7fb8d4; border-color: color-mix(in oklab, #7fb8d4 40%, var(--border)); background: color-mix(in oklab, #7fb8d4 10%, var(--surface2)); }

/* ── Footer ───────────────────────────────────────────────── */
.anoc-footer {
  display: flex; justify-content: space-between;
  padding: 8px 22px; border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 11px; color: var(--dim);
  background: var(--surface);
}

/* ── Detail page ──────────────────────────────────────────── */
.anoc-detail-head {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 18px 22px 14px;
}
.anoc-detail-headtop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.anoc-detail-hl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.anoc-detail-id { color: var(--dim); font-size: 12px; }
.anoc-detail-h1 {
  margin: 0; font: 500 22px/1.2 var(--mono);
  color: var(--text); letter-spacing: -0.01em;
}
.anoc-detail-hr { margin-left: auto; display: flex; gap: 6px; }
.anoc-detail-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 4px;
  background: var(--surface2); border: 1px solid var(--border);
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.anoc-detail-badge-err {
  background: color-mix(in oklab, var(--err) 12%, var(--surface2));
  border-color: color-mix(in oklab, var(--err) 35%, var(--border));
  color: var(--err);
}
.anoc-detail-badge-ok {
  background: color-mix(in oklab, var(--ok) 12%, var(--surface2));
  border-color: color-mix(in oklab, var(--ok) 35%, var(--border));
  color: var(--ok);
}
.anoc-detail-badge-warn {
  background: color-mix(in oklab, var(--warn) 12%, var(--surface2));
  border-color: color-mix(in oklab, var(--warn) 35%, var(--border));
  color: var(--warn);
}
.anoc-detail-headbottom {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 18px; margin-top: 14px;
  border-top: 1px dashed var(--border); padding-top: 12px;
}
.anoc-kv { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.anoc-kv-truncate .anoc-kv-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anoc-kv-label {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--dim);
}
.anoc-kv-value { color: var(--text); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.anoc-kv-action {
  font: inherit; font-family: var(--mono); font-size: 10.5px;
  padding: 1px 7px; border-radius: 3px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer; text-transform: uppercase;
}
.anoc-kv-action:hover { color: var(--text); border-color: var(--accent); }

/* Detail body */
.anoc-detail-body { display: grid; grid-template-columns: 220px 1fr; }
.anoc-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 18px 12px;
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 44px; align-self: flex-start;
  max-height: calc(100vh - 44px); overflow-y: auto;
}
.anoc-side-title {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--dim); padding: 8px 10px 4px;
}
.anoc-side-link {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: 5px;
  background: transparent; border: 0;
  font: inherit; font-family: var(--mono); font-size: 12px;
  color: var(--muted); cursor: pointer; text-align: left;
  text-decoration: none;
}
.anoc-side-link:hover { background: var(--surface2); color: var(--text); }
.anoc-side-link.on {
  background: color-mix(in oklab, var(--accent) 14%, var(--surface2));
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--accent);
}
.anoc-side-glyph { width: 16px; color: var(--accent); }
.anoc-side-link.on .anoc-side-glyph { color: var(--accent); }
.anoc-side-link:not(.on) .anoc-side-glyph { color: var(--dim); }
.anoc-side-badge {
  margin-left: auto;
  background: var(--surface2);
  color: var(--muted);
  font-family: var(--mono); font-size: 10px;
  padding: 1px 6px; border-radius: 9px;
  border: 1px solid var(--border);
}
.anoc-side-badge-err    { background: color-mix(in oklab, var(--err)    18%, var(--surface2)); color: var(--err);    border-color: color-mix(in oklab, var(--err)    35%, var(--border)); }
.anoc-side-badge-accent { background: color-mix(in oklab, var(--accent) 22%, var(--surface2)); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); }
.anoc-side-uptime {
  margin-top: auto;
  padding: 12px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.anoc-side-uptime-h   { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); }
.anoc-side-uptime-v   { font-size: 18px; margin-top: 4px; color: var(--ok); }
.anoc-side-uptime-sub { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.anoc-load-bar {
  margin-top: 8px; height: 4px; background: var(--bg); border-radius: 2px; overflow: hidden;
}
.anoc-load-bar i { display: block; height: 100%; background: var(--accent); }

.anoc-detail-main  { padding: 18px 22px 32px; display: flex; flex-direction: column; gap: 26px; }
.anoc-section      { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 14px; }
.anoc-h2 {
  margin: 0; font: 500 15px/1.2 var(--mono);
  color: var(--text); text-transform: uppercase; letter-spacing: 0.08em;
  display: flex; align-items: baseline; gap: 12px;
}
.anoc-h2-num  { color: var(--accent); font-weight: 600; }
.anoc-h2-meta { color: var(--dim); font-size: 11.5px; text-transform: lowercase; letter-spacing: 0; }
.anoc-section-desc { margin: 6px 0 14px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.anoc-h3 {
  margin: 18px 0 8px;
  font: 500 13px/1.3 var(--mono);
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em;
  display: flex; align-items: center; gap: 8px;
}
.anoc-h3-glyph { color: var(--accent); }

.anoc-banner {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px; border-radius: 6px;
  background: color-mix(in oklab, var(--err) 12%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--err) 45%, var(--border));
}
.anoc-banner-icon  { color: var(--err); font-size: 18px; line-height: 1; margin-top: 1px; }
.anoc-banner-title { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--err); }
.anoc-banner-list  { margin: 4px 0 0; padding-left: 18px; color: var(--text); font-size: 13px; }
.anoc-banner button { margin-left: auto; }
.anoc-banner-warn { background: color-mix(in oklab, var(--warn) 12%, var(--surface)); border-color: color-mix(in oklab, var(--warn) 45%, var(--border)); }
.anoc-banner-warn .anoc-banner-icon  { color: var(--warn); }
.anoc-banner-warn .anoc-banner-title { color: var(--warn); }
details.anoc-banner              { display: block; }
details.anoc-banner summary      { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; list-style: none; user-select: none; }
details.anoc-banner summary::-webkit-details-marker { display: none; }
details.anoc-banner .anoc-banner-list { padding-left: 32px; margin-top: 10px; }
.anoc-banner-count  { font-weight: normal; opacity: 0.75; margin-left: 6px; text-transform: none; letter-spacing: 0; }
.anoc-banner-toggle { font-size: 11px; color: var(--muted); margin-top: 4px; display: block; }
.anoc-banner-toggle::before              { content: 'Show details'; text-decoration: underline; }
details[open] .anoc-banner-toggle::before { content: 'Hide details'; }

.anoc-cards   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.anoc-cards-2 { grid-template-columns: 1fr 1.4fr; }
.anoc-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.anoc-card-h {
  font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
}
.anoc-kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.anoc-pre {
  margin: 0; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--text); white-space: pre-wrap; line-height: 1.5;
}
.anoc-pre-mono { color: var(--ok); }
.anoc-link    { color: var(--accent); cursor: pointer; font-family: var(--mono); font-size: 12px; text-decoration: none; }
.anoc-link:hover { text-decoration: underline; }
.anoc-link-sm { color: var(--muted); cursor: pointer; font-family: var(--mono); font-size: 11px; margin-right: 4px; }
.anoc-link-sm:hover  { color: var(--accent); }
.anoc-link-err:hover { color: var(--err); }
.anoc-link-danger { color: var(--err); }
.anoc-link-danger:hover { color: var(--err); opacity: 0.75; }

.anoc-load-bars { display: flex; gap: 14px; }
.anoc-loadbar   { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; }
.anoc-loadbar-label { color: var(--dim); width: 24px; }
.anoc-loadbar-track { width: 80px; height: 4px; background: var(--bg); border-radius: 2px; overflow: hidden; border: 1px solid var(--border); }
.anoc-loadbar-track i { display: block; height: 100%; background: var(--ok); }
.anoc-loadbar-value { color: var(--text); }

.anoc-iface { color: var(--text); position: relative; }
.anoc-tree  { color: var(--dim); margin-right: 4px; }
.anoc-spark { display: flex; align-items: center; gap: 6px; }
.anoc-spark-val   { color: var(--text); min-width: 36px; font-size: 11.5px; }
.anoc-spark-track { width: 60px; height: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 2px; overflow: hidden; }
.anoc-spark-track i { display: block; height: 100%; background: var(--accent); }

.anoc-typetag { display: inline-block; padding: 1px 6px; border-radius: 3px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid var(--border2); }
.anoc-typetag-tunnel { color: #6ec0ff; border-color: color-mix(in oklab, #6ec0ff 40%, var(--border)); background: color-mix(in oklab, #6ec0ff 10%, var(--surface)); }
.anoc-typetag-local  { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); background: color-mix(in oklab, var(--accent) 10%, var(--surface)); }

.anoc-audit { display: flex; flex-direction: column; gap: 4px; }
.anoc-audit-row {
  display: grid; grid-template-columns: 160px 220px 1fr; gap: 14px;
  padding: 8px 10px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; font-size: 12.5px;
}
.anoc-audit-when { color: var(--dim); }
.anoc-audit-who  { color: var(--muted); font-family: var(--mono); font-size: 11.5px; }
.anoc-audit-what { color: var(--text); }

/* ── Sub-headers ──────────────────────────────────────────── */
.anoc-detail-subhead {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: -4px;
}
.anoc-detail-back     { font-family: var(--mono); font-size: 11.5px; }
.anoc-detail-sub-meta { font-family: var(--mono); font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; }

/* ── Tunnels ──────────────────────────────────────────────── */
.anoc-tunnels-toolbar { padding: 4px 2px; }
.anoc-table-tunnels { font-size: 12px; }
.anoc-table-tunnels th.anoc-tunnel-group {
  background: var(--bg);
  color: var(--accent);
  border-right: 1px solid var(--border);
  font-weight: 600;
  text-align: center;
  border-bottom: none;
}
.anoc-table-tunnels thead tr:first-child th { padding: 5px 12px; }
.anoc-table-tunnels thead tr:nth-child(2) th { font-size: 10px; background: var(--surface2); }

/* ── Empty state card ─────────────────────────────────────── */
.anoc-empty-card {
  display: flex; align-items: center; gap: 18px;
  padding: 28px 30px;
  background: var(--surface);
  border: 1px dashed var(--border2);
  border-radius: 8px;
}
.anoc-empty-glyph { font-size: 40px; color: var(--dim); font-family: var(--mono); line-height: 1; }
.anoc-empty-title { font-size: 14px; color: var(--text); margin-bottom: 4px; }

/* ── Firewall editor ──────────────────────────────────────── */
.anoc-fw-grid { display: grid; grid-template-columns: 280px 1fr; gap: 14px; align-items: start; }
.anoc-fw-versions { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.anoc-fw-versions-list { display: flex; flex-direction: column; }
.anoc-fw-vrow {
  display: grid;
  grid-template-columns: 18px 36px 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "cur v when" "cur v who";
  gap: 0 8px;
  padding: 8px 12px;
  background: transparent; border: 0;
  border-bottom: 1px solid var(--border);
  font: inherit; text-align: left;
  cursor: pointer; color: var(--muted);
  transition: background 0.12s;
  text-decoration: none; display: grid;
}
.anoc-fw-vrow:hover { background: var(--surface2); color: var(--text); }
.anoc-fw-vrow.on { background: color-mix(in oklab, var(--accent) 12%, var(--surface)); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.anoc-fw-vrow-cur  { grid-area: cur; color: var(--accent); font-size: 13px; }
.anoc-fw-vrow-v    { grid-area: v;   font-size: 13px; color: var(--text); align-self: center; }
.anoc-fw-vrow-when { grid-area: when; font-size: 11px; color: var(--dim); }
.anoc-fw-vrow-who  { grid-area: who;  font-size: 11px; }

.anoc-fw-editor { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.anoc-fw-editor-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; gap: 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2); flex-wrap: wrap;
}
.anoc-fw-editor-meta { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--text); flex-wrap: wrap; }
.anoc-fw-editor-meta .anoc-mut { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.anoc-fw-editor-actions { display: flex; gap: 6px; }

.anoc-codepane { display: grid; grid-template-columns: 56px 1fr; background: var(--bg); font-family: var(--mono); font-size: 12px; line-height: 1.55; }
.anoc-codepane-gutter {
  padding: 12px 8px;
  border-right: 1px solid var(--border);
  color: var(--dim);
  text-align: right;
  user-select: none;
  background: color-mix(in oklab, var(--accent) 4%, var(--bg));
}
.anoc-codepane-code { margin: 0; padding: 12px 16px; color: var(--text); white-space: pre; overflow-x: auto; }
.anoc-code-cmd     { color: var(--accent); font-weight: 500; }
.anoc-code-flag    { color: var(--text); }
.anoc-code-target  { color: #6ec0ff; font-weight: 500; }
.anoc-code-ip      { color: #b9d469; }
.anoc-code-comment { color: var(--dim); font-style: italic; }
.anoc-fw-textarea {
  width: 100%; border: 0; outline: 0; resize: vertical;
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
  background: var(--bg); color: var(--text);
  padding: 14px 16px; min-height: 420px;
}

/* ── Page shell (Networks, WAN, Global FW) ────────────────── */
.anoc-pagehead {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 24px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  gap: 18px;
}
.anoc-pagehead-eyebrow { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); }
.anoc-pagehead-h1 { margin: 4px 0 6px; font: 500 26px/1.2 var(--mono); letter-spacing: -0.01em; }
.anoc-pagehead-h1-sub { color: var(--dim); font-size: 18px; margin-left: 6px; }
.anoc-pagehead-sub { color: var(--muted); font-size: 13px; max-width: 720px; }
.anoc-pagehead-actions { display: flex; gap: 6px; flex-shrink: 0; }
.anoc-pagebody { padding: 18px 24px 32px; display: flex; flex-direction: column; gap: 16px; }
.anoc-page-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.anoc-search-wide { flex: 1; min-width: 260px; max-width: 480px; }
.anoc-select {
  font: inherit; font-family: var(--mono); font-size: 12px;
  padding: 4px 10px; border-radius: 5px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border);
}
.anoc-conn-addr { color: var(--muted); font-size: 12px; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── New router / new connection form ─────────────────────── */
.anoc-newrouter { display: grid; grid-template-columns: 220px 1fr 320px; gap: 0; align-items: flex-start; }
.anoc-newrouter-nav { background: var(--surface); border-right: 1px solid var(--border); padding: 18px 12px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 44px; }
.anoc-newrouter-main { padding: 18px 24px 32px; display: flex; flex-direction: column; gap: 14px; }
.anoc-newrouter-preview { padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; border-left: 1px solid var(--border); background: var(--surface); position: sticky; top: 44px; }

.anoc-newrouter-progress {
  margin-top: auto; padding: 12px 10px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 6px;
}
.anoc-newrouter-progress-h {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--dim);
}
.anoc-newrouter-progress-bar {
  margin: 6px 0 4px; height: 4px;
  background: var(--bg); border-radius: 2px; overflow: hidden;
}
.anoc-newrouter-progress-bar i {
  display: block; height: 100%;
  background: var(--accent);
  transition: width 0.2s;
}
.anoc-newrouter-progress-v { font-size: 12px; color: var(--text); }

.anoc-newrouter-map {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: color-mix(in oklab, var(--accent) 4%, var(--bg));
  border: 1px dashed var(--border2);
  border-radius: 6px;
}
.anoc-newrouter-map-glyph {
  font-size: 32px;
  color: var(--accent);
  font-family: var(--mono);
  line-height: 1;
}
.anoc-newrouter-map-text { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.anoc-newrouter-map-text em { font-style: italic; color: var(--accent); }

.anoc-newrouter-next {
  margin: 0; padding-left: 20px;
  font-size: 12px; color: var(--muted); line-height: 1.55;
}
.anoc-newrouter-next li { margin-bottom: 4px; }

.anoc-formcard { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.anoc-formcard-h { display: flex; align-items: baseline; gap: 14px; padding-bottom: 6px; border-bottom: 1px dashed var(--border); }
.anoc-formcard-h2 { margin: 0; font: 500 15px/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
.anoc-formcard-meta { font-family: var(--mono); font-size: 11.5px; color: var(--dim); letter-spacing: 0.02em; margin-left: auto; }

.anoc-formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.anoc-formgrid-loc   { grid-template-columns: 2fr 1fr 1fr; }
.anoc-formgrid-stack { grid-template-columns: 1fr; }

.anoc-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.anoc-field-full { grid-column: 1 / -1; }
.anoc-field-label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 500; }
.anoc-field-hint  { font-family: var(--mono); font-size: 10.5px; color: var(--dim); letter-spacing: 0.02em; }

.anoc-field input,
.anoc-field select,
.anoc-field textarea {
  background: var(--bg); border: 1px solid var(--border); border-radius: 5px;
  color: var(--text); padding: 8px 10px;
  font: inherit; font-family: var(--sans); font-size: 13px;
  width: 100%; outline: 0;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.anoc-field-mono input, .anoc-field-mono select { font-family: var(--mono); font-size: 12.5px; }
.anoc-field textarea { font-family: var(--mono); font-size: 12px; resize: vertical; min-height: 80px; line-height: 1.55; }
.anoc-field input:focus, .anoc-field select:focus, .anoc-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 18%, transparent); }
.anoc-field input:disabled, .anoc-field select:disabled { color: var(--dim); background: var(--surface2); cursor: not-allowed; }
.anoc-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%238a8678'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 28px;
}

.anoc-input-with-action { display: flex; align-items: stretch; gap: 4px; }
.anoc-input-with-action input { flex: 1; }
.anoc-input-action { background: var(--surface2); border: 1px solid var(--border); color: var(--muted); padding: 0 10px; border-radius: 5px; font: inherit; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; white-space: nowrap; }
.anoc-input-action:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.anoc-input-action:disabled { opacity: 0.4; cursor: not-allowed; }

.anoc-seg-form { padding: 2px; }
.anoc-seg-form .anoc-seg-btn { padding: 5px 12px; }

.anoc-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; background: var(--surface2); border: 1px solid var(--border); border-radius: 99px; font: inherit; font-family: var(--mono); font-size: 11.5px; color: var(--muted); cursor: pointer; text-transform: uppercase; letter-spacing: 0.06em; transition: background 0.12s, border-color 0.12s; align-self: flex-start; }
.anoc-toggle-knob { width: 18px; height: 18px; border-radius: 50%; background: var(--dim); transition: background 0.12s, transform 0.12s; }
.anoc-toggle.on { background: color-mix(in oklab, var(--accent) 18%, var(--surface2)); border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); color: var(--text); }
.anoc-toggle.on .anoc-toggle-knob { background: var(--accent); }

.anoc-newrouter-actionbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; position: sticky; bottom: 16px; margin-top: 6px; box-shadow: 0 6px 24px rgba(0,0,0,0.18); }
.anoc-newrouter-actionbar-status { display: flex; flex-direction: column; gap: 4px; }
.anoc-newrouter-issues { margin: 0; padding-left: 16px; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.anoc-newrouter-issues li { line-height: 1.55; }
.anoc-newrouter-actionbar-buttons { display: flex; gap: 6px; flex-shrink: 0; }

.anoc-newrouter-preview-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.anoc-newrouter-preview-card-info { background: color-mix(in oklab, var(--accent) 6%, var(--surface2)); }
.anoc-newrouter-preview-h { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); justify-content: space-between; }
.anoc-newrouter-preview-name { font: 500 18px/1.2 var(--mono); color: var(--text); letter-spacing: -0.01em; word-break: break-all; }
.anoc-newrouter-preview-host { font-size: 11px; color: var(--dim); }
.anoc-newrouter-preview-rows { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--border); }
.anoc-newrouter-preview-row  { display: grid; grid-template-columns: 92px 1fr; gap: 8px; font-size: 12px; align-items: baseline; }
.anoc-newrouter-preview-l    { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); }
.anoc-newrouter-preview-v    { color: var(--text); word-break: break-word; }

/* ── New connection extras ────────────────────────────────── */
.anoc-provider-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.anoc-provider-tile  { padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font: inherit; text-align: left; transition: border-color 0.12s, background 0.12s; }
.anoc-provider-tile:hover { border-color: var(--border2); }
.anoc-provider-tile.on { background: color-mix(in oklab, var(--accent) 12%, var(--bg)); border-color: color-mix(in oklab, var(--accent) 50%, var(--border)); box-shadow: inset 2px 0 0 var(--accent); }

.anoc-speedviz { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; }
.anoc-speedbar { display: grid; grid-template-columns: 18px 1fr 90px; gap: 10px; align-items: center; font-size: 12px; }
.anoc-speedbar-label { color: var(--accent); font-size: 14px; text-align: center; }
.anoc-speedbar-track { height: 5px; background: var(--surface2); border-radius: 3px; overflow: hidden; border: 1px solid var(--border); }
.anoc-speedbar-track i { display: block; height: 100%; transition: width 0.2s; }
.anoc-speedbar-ok.anoc-speedbar-track i     { background: var(--ok); }
.anoc-speedbar-accent.anoc-speedbar-track i { background: var(--accent); }
.anoc-speedbar-val { color: var(--text); text-align: right; }

/* ── Router picker (autocomplete) ─────────────────────────── */
.anoc-rpick { position: relative; }
.anoc-rpick-picked { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--accent); border-radius: 5px; font-size: 13px; }
.anoc-rpick-picked .anoc-input-action { margin-left: auto; }
.anoc-rpick-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; background: var(--surface); border: 1px solid var(--border2); border-radius: 6px; padding: 4px; max-height: 280px; overflow-y: auto; box-shadow: 0 12px 32px rgba(0,0,0,0.3); display: flex; flex-direction: column; }
.anoc-rpick-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 4px; background: transparent; border: 0; font: inherit; cursor: pointer; text-align: left; color: var(--text); }
.anoc-rpick-row:hover { background: color-mix(in oklab, var(--accent) 12%, var(--surface2)); }
.anoc-rpick-row-name { font-size: 13px; }
.anoc-rpick-empty { padding: 10px; color: var(--dim); font-style: italic; font-size: 12px; }

/* ── Utility ──────────────────────────────────────────────── */
.anoc-mut { color: var(--muted); }
.anoc-hidden { display: none !important; }

/* ── Router Detail shell ──────────────────────────────────── */
.anoc-detail-wrap { display: flex; flex-direction: column; min-height: calc(100vh - 44px); }

.anoc-detail-header {
  position: sticky; top: 44px; z-index: 90;
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 12px 20px 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.anoc-detail-header-main {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.anoc-detail-name {
  font: 500 20px/1.2 var(--mono); letter-spacing: -0.01em; color: var(--text);
}
.anoc-detail-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.anoc-detail-header-kv {
  display: flex; gap: 0; flex-wrap: wrap;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}
.anoc-kv {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 18px 0 0; min-width: 120px;
}
.anoc-kv:first-child { padding-left: 0; }
.anoc-kv-k { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); }
.anoc-kv-v { font-size: 12.5px; color: var(--text); }

.anoc-detail-body { display: flex; flex: 1; overflow: hidden; }

.anoc-detail-sidebar {
  width: 220px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  display: flex; flex-direction: column;
  position: sticky; top: 0; /* scrolls with page */
  align-self: flex-start;
  min-height: calc(100vh - 44px - 80px); /* below header */
}
#detail-nav { display: flex; flex-direction: column; padding: 8px 0; flex: 1; }

.anoc-sidebar-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  cursor: pointer; user-select: none;
  border-left: 2px solid transparent;
  transition: background 0.1s, color 0.1s;
}
.anoc-sidebar-item:hover { background: var(--surface2); color: var(--text); }
.anoc-sidebar-item.on { border-left-color: var(--accent); color: var(--accent); background: color-mix(in oklab, var(--accent) 6%, var(--surface)); }

.anoc-sidebar-badge {
  margin-left: auto;
  font-family: var(--mono); font-size: 10px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--muted); padding: 1px 6px; border-radius: 99px;
}
.anoc-sidebar-item.on .anoc-sidebar-badge { background: color-mix(in oklab, var(--accent) 15%, var(--surface2)); border-color: var(--accent); color: var(--accent); }

.anoc-detail-uptime {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 11px; color: var(--dim);
  line-height: 1.5;
}

.anoc-detail-main { flex: 1; overflow: auto; padding: 20px 24px 32px; }

.anoc-detail-section { display: none; }
.anoc-detail-section.on { display: block; }

/* status / hw badges in header */
.anoc-badge {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 2px 8px; border-radius: 4px;
}
.anoc-badge-active   { background: color-mix(in oklab, var(--ok)   16%, var(--surface2)); color: var(--ok);   border: 1px solid color-mix(in oklab, var(--ok)   35%, var(--border)); }
.anoc-badge-inactive { background: color-mix(in oklab, var(--err)  16%, var(--surface2)); color: var(--err);  border: 1px solid color-mix(in oklab, var(--err)  35%, var(--border)); }
.anoc-badge-stale    { background: color-mix(in oklab, var(--warn) 16%, var(--surface2)); color: var(--warn); border: 1px solid color-mix(in oklab, var(--warn) 35%, var(--border)); }
.anoc-badge-hw       { background: var(--surface2); color: var(--muted); border: 1px solid var(--border); }

/* small button variant */
.anoc-btn-sm { padding: 3px 9px; font-size: 11px; }

/* ── Topology visualisation ──────────────────────────────────────── */
.anoc-topo-wrap { padding: 16px 20px; }

.anoc-topo-loopback {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 14px;
  margin-bottom: 20px;
  font-size: 12px;
}
.anoc-topo-lb-label { color: var(--muted); }
.anoc-topo-lb-ip    { color: var(--accent); font-size: 14px; }
.anoc-topo-lb-sep   { color: var(--border); }
.anoc-topo-lb-host  { color: var(--muted); }

.anoc-topo-grid {
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  gap: 12px;
  align-items: start;
}
.anoc-topo-col { min-width: 0; }

/* Device box */
.anoc-topo-device {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
}
.anoc-topo-device-hd {
  background: var(--surface-hi);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.anoc-topo-port {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.anoc-topo-port:last-child { border-bottom: none; }
.anoc-topo-port-wan { border-left: 2px solid var(--accent); }
.anoc-topo-port-lan { border-right: 2px solid var(--ok); }
.anoc-topo-port-name { flex: 1; }
.anoc-topo-port-dir  { color: var(--muted); font-size: 10px; }

/* WAN column */
.anoc-topo-wan-col { text-align: right; }
.anoc-topo-provider-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-right: 2px solid var(--accent);
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 12px;
}
.anoc-topo-provider-name { margin-bottom: 6px; }
.anoc-topo-kv {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.anoc-topo-wan-net { border-right: 2px solid var(--accent) !important; }

/* LAN column */
.anoc-topo-lan-col { text-align: left; }
.anoc-topo-lan-net { border-left: 2px solid var(--ok) !important; }

/* Network cards (shared) */
.anoc-topo-net-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 12px;
}
.anoc-topo-net-name   { font-weight: 600; margin-bottom: 2px; }
.anoc-topo-net-subnet { color: var(--muted); font-size: 11px; }

/* VLAN children */
.anoc-topo-vlan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--ok);
  border-radius: 4px;
  padding: 6px 12px;
  margin-bottom: 6px;
  font-size: 11px;
}
.anoc-topo-vlan-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

/* Tunnel block */
.anoc-topo-tunnel-block {
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
  text-align: right;
}
.anoc-topo-tunnel-head {
  background: var(--surface-hi);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}
.anoc-topo-tunnel-item {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
}
.anoc-topo-unset { color: var(--muted); font-size: 12px; padding: 16px 4px; }

/* Badge variants for WAN / LAN */
.anoc-badge-wan { background: rgba(240,160,32,.15); color: var(--accent); border: 1px solid rgba(240,160,32,.3); }
.anoc-badge-lan { background: rgba(143,207,110,.15); color: var(--ok);     border: 1px solid rgba(143,207,110,.3); }

/* ── Map view ─────────────────────────────────────────────── */
.anoc-mapview {
  display: grid; grid-template-columns: 280px 1fr;
  min-height: calc(100vh - 44px);
}
.anoc-map-rail { padding: 18px 16px; overflow-y: auto; }
.anoc-mapview-main { display: flex; flex-direction: column; }
.anoc-mapview-frame {
  flex: 1;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.anoc-mapview-svg {
  width: 100%; height: 100%;
  max-height: calc(100vh - 100px);
}
.anoc-mapview-grid { stroke: var(--border); opacity: 0.4; }
.anoc-mapview-land {
  fill: color-mix(in oklab, var(--accent) 5%, var(--surface));
  stroke: var(--border2); stroke-width: 1;
}
.anoc-mapview-state-label {
  font-family: var(--mono); font-size: 11px;
  fill: var(--dim);
  text-anchor: middle;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.anoc-mapview-conn { stroke: var(--accent); stroke-width: 0.8; opacity: 0.2; fill: none; }
.anoc-mapview-pin { cursor: pointer; }
.anoc-mapview-pin-halo { fill: transparent; transition: fill 0.15s; }
.anoc-mapview-pin-dot { stroke-width: 1.5; }
.anoc-mapview-pin-ok .anoc-mapview-pin-dot { fill: var(--ok); stroke: color-mix(in oklab, var(--ok) 60%, #000); }
.anoc-mapview-pin-err .anoc-mapview-pin-dot { fill: var(--err); stroke: color-mix(in oklab, var(--err) 60%, #000); }
.anoc-mapview-pin-warn .anoc-mapview-pin-dot { fill: var(--warn); stroke: color-mix(in oklab, var(--warn) 60%, #000); }
.anoc-mapview-pin-neutral .anoc-mapview-pin-dot { fill: var(--dim); }
.anoc-mapview-pin:hover .anoc-mapview-pin-halo,
.anoc-mapview-pin.on .anoc-mapview-pin-halo { fill: color-mix(in oklab, var(--accent) 25%, transparent); }
.anoc-mapview-pin:hover .anoc-mapview-pin-dot,
.anoc-mapview-pin.on .anoc-mapview-pin-dot { stroke: var(--accent); stroke-width: 2; }
.anoc-mapview-conn-focal { stroke: var(--accent); stroke-width: 1.4; opacity: 0.65; stroke-dasharray: 3 3; }
.anoc-mapview-pin-focal .anoc-mapview-pin-dot { stroke: var(--accent); stroke-width: 2.5; }
.anoc-mapview-pin-focal-ring {
  fill: transparent; stroke: var(--accent); stroke-width: 1.2; opacity: 0.7;
  animation: anoc-focal-pulse 2.4s ease-in-out infinite;
}
@keyframes anoc-focal-pulse {
  0%   { opacity: 0.7; r: 22; }
  50%  { opacity: 0.15; r: 30; }
  100% { opacity: 0.7; r: 22; }
}
.anoc-router-map-legend {
  margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-family: var(--mono); font-size: 12px;
}
.anoc-chip-link { cursor: pointer; text-decoration: none; }
.anoc-chip-link:hover { color: var(--accent); border-color: var(--accent); }
.anoc-dhcp-jump {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 0 0 16px; padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--border0); border-radius: 4px;
}
.anoc-dhcp-jump-chip { font-family: var(--mono); font-size: 11px; }
.anoc-dhcp-group-flash {
  animation: anoc-dhcp-flash 1.4s ease-out;
}
@keyframes anoc-dhcp-flash {
  0%   { background: color-mix(in oklab, var(--accent) 18%, transparent); }
  100% { background: transparent; }
}
.anoc-mapview-tip-bg { fill: var(--surface); stroke: var(--accent); stroke-width: 1; }
.anoc-mapview-tip-txt { font-family: var(--mono); font-size: 11px; fill: var(--text); }
.anoc-mapview-footer {
  display: flex; justify-content: space-between;
  padding: 10px 22px; border-top: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--mono); font-size: 11px; color: var(--dim);
}
.anoc-mapview-scope {
  font-family: var(--mono); font-size: 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.anoc-mapview-scope-row { display: flex; align-items: baseline; gap: 8px; color: var(--text); }
.anoc-mapview-num { font-size: 28px; color: var(--accent); font-weight: 600; }
.anoc-chip-count { margin-left: 4px; font-style: normal; color: var(--dim); font-size: 10px; }
.anoc-legend-ring {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid var(--accent); background: transparent;
}
.anoc-mapview-card {
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 6px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.anoc-mapview-card-h { display: flex; align-items: center; gap: 8px; }
.anoc-mapview-card-row {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-family: var(--mono); font-size: 11px; color: var(--text);
  align-items: baseline;
}
.anoc-mapview-card-loc { font-size: 11.5px; color: var(--muted); }
.anoc-mapview-card-btn { width: 100%; justify-content: center; margin-top: 4px; }

/* ── Network map (backbone topology) ─────────────────────── */
.anoc-nm-blurb { font-size: 11.5px; color: var(--muted); line-height: 1.5; }

.anoc-nm-inspect {
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 6px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.anoc-nm-inspect-h { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--accent); }
.anoc-nm-inspect-role {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); margin-top: -4px;
}
.anoc-nm-kv {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11.5px; padding-top: 4px; border-top: 1px solid var(--border);
}
.anoc-nm-kv:first-of-type { border-top: none; padding-top: 0; }

.anoc-nm-legend, .anoc-nm-syslist { display: flex; flex-direction: column; gap: 2px; }
.anoc-nm-legend-row {
  display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px;
  padding: 5px 2px; border-bottom: 1px solid var(--border);
}
.anoc-nm-legend-row:last-child { border-bottom: none; }
.anoc-nm-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.anoc-nm-legend-name { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anoc-nm-legend-sub {
  font-family: var(--mono); font-size: 10px; color: var(--dim); text-transform: uppercase;
}
.anoc-nm-empty { font-size: 11.5px; color: var(--dim); font-style: italic; padding: 6px 2px; }

.anoc-nm-syslist-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px;
  padding: 7px 8px; margin: 0 -8px; border-radius: 4px;
  text-decoration: none; color: inherit;
}
.anoc-nm-syslist-row:hover { background: var(--surface2); }
.anoc-nm-syslist-as { color: var(--accent); font-size: 12px; }
.anoc-nm-syslist-name { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anoc-nm-syslist-reg {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--dim);
}

.anoc-nm-svg { width: 100%; height: 100%; max-height: calc(100vh - 100px); }
.anoc-nm-svg text { font-family: var(--mono); fill: var(--text); }
.anoc-nm-svg2 { max-height: calc(100vh - 220px); }

.anoc-nm-band-label {
  font-size: 11px; fill: var(--dim); letter-spacing: 0.12em; text-transform: uppercase;
}

.anoc-nm-edge { fill: none; stroke-width: 1.4; opacity: 0.55; }
.anoc-nm-edge.thick { stroke-width: 2.2; opacity: 0.8; }
.anoc-nm-bgp { fill: none; stroke: var(--violet); stroke-width: 1.4; stroke-dasharray: 5 4; opacity: 0.75; }
.anoc-nm-bgp.intra { stroke: var(--violet); }

.anoc-nm-net-box { fill: var(--surface2); stroke-width: 1.4; }
.anoc-nm-net-name { font-size: 13px; font-weight: 600; text-anchor: middle; }
.anoc-nm-net-name.small { font-size: 11.5px; }
.anoc-nm-net-sub { font-size: 10.5px; fill: var(--muted); text-anchor: middle; }
.anoc-nm-net-badge { font-size: 9.5px; fill: var(--dim); text-anchor: middle; text-transform: uppercase; letter-spacing: 0.03em; }

.anoc-nm-core { cursor: pointer; }
.anoc-nm-core-box {
  fill: var(--surface2); stroke: var(--border2); stroke-width: 1.4;
  transition: stroke 0.1s, fill 0.1s;
}
.anoc-nm-core:hover .anoc-nm-core-box { stroke: var(--accent); fill: var(--surface); }
.anoc-nm-core-as { font-size: 14px; font-weight: 600; fill: var(--accent); }
.anoc-nm-core-region {
  font-size: 10px; fill: var(--dim); text-transform: uppercase; letter-spacing: 0.05em;
}
.anoc-nm-core-name { font-size: 11.5px; fill: var(--text); }
.anoc-nm-core-role { font-size: 10.5px; fill: var(--muted); }
.anoc-nm-core-open {
  font-size: 10.5px; fill: var(--dim); transition: fill 0.1s;
}
.anoc-nm-core:hover .anoc-nm-core-open { fill: var(--accent); }

.anoc-nm-more {
  font-size: 10.5px; fill: var(--accent); cursor: pointer; text-decoration: none;
}
.anoc-nm-more:hover { text-decoration: underline; }
.anoc-nm-extra { display: none; }
.anoc-nm-extra:target { display: inline; }

.anoc-nm-mem { cursor: pointer; }
.anoc-nm-mem-box { fill: var(--surface2); stroke: var(--border2); stroke-width: 1.4; transition: stroke 0.1s; }
.anoc-nm-mem:hover .anoc-nm-mem-box { stroke: var(--accent); }
.anoc-nm-mem-hdr { fill: var(--border); }
.anoc-nm-mem-name { font-size: 12.5px; font-weight: 600; text-anchor: middle; }
.anoc-nm-mem-name.left { text-anchor: start; }
.anoc-nm-mem-role { font-size: 10px; fill: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; }
.anoc-nm-mem-if { font-size: 11px; fill: var(--muted); text-anchor: middle; }

.anoc-nm-bus { stroke-width: 2; opacity: 0.6; }
.anoc-nm-bus-label { font-size: 11px; font-weight: 600; }
.anoc-nm-bus-sub { font-size: 10.5px; fill: var(--muted); }
.anoc-nm-drop { stroke-width: 1.4; opacity: 0.6; }

.anoc-nm-elabel-bg { fill: var(--surface); stroke: var(--border2); stroke-width: 1; }
.anoc-nm-elabel-tx { font-size: 10px; fill: var(--muted); text-anchor: middle; }
.anoc-nm-elabel.anoc-nm-st-ok .anoc-nm-elabel-tx     { fill: var(--ok); }
.anoc-nm-elabel.anoc-nm-st-ok .anoc-nm-elabel-bg     { stroke: color-mix(in oklab, var(--ok) 45%, var(--border2)); }
.anoc-nm-elabel.anoc-nm-st-err .anoc-nm-elabel-tx    { fill: var(--err); }
.anoc-nm-elabel.anoc-nm-st-err .anoc-nm-elabel-bg    { stroke: color-mix(in oklab, var(--err) 45%, var(--border2)); }
.anoc-nm-elabel.anoc-nm-st-warn .anoc-nm-elabel-tx   { fill: var(--warn); }
.anoc-nm-elabel.anoc-nm-st-warn .anoc-nm-elabel-bg   { stroke: color-mix(in oklab, var(--warn) 45%, var(--border2)); }
.anoc-nm-elabel.anoc-nm-st-neutral .anoc-nm-elabel-tx { fill: var(--dim); }

.anoc-nm-l2-wrap { display: flex; flex-direction: column; width: 100%; height: 100%; }
.anoc-nm-l2-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px; border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.anoc-nm-l2-head-main { display: flex; align-items: center; gap: 14px; }
.anoc-nm-l2-as { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--accent); }
.anoc-nm-l2-name { font-size: 13px; color: var(--text); }
.anoc-nm-l2-role {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted);
}
.anoc-nm-l2-facts { display: flex; gap: 18px; }
.anoc-nm-fact { display: flex; flex-direction: column; gap: 1px; align-items: flex-end; }
.anoc-nm-fact .anoc-mut { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.anoc-nm-fact .anoc-mono { font-size: 15px; color: var(--text); }

.anoc-nm-l2-diagram {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: var(--bg); overflow: auto;
}
.anoc-nm-l2-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  padding: 8px 22px; border-top: 1px solid var(--border);
  background: var(--surface); font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.anoc-nm-lg { display: inline-flex; align-items: center; gap: 6px; }
.anoc-nm-lg-line, .anoc-nm-lg-dash, .anoc-nm-lg-bus {
  display: inline-block; width: 18px; height: 0; border-top-width: 2px; border-top-style: solid;
}
.anoc-nm-lg-line { border-color: var(--accent); }
.anoc-nm-lg-dash { border-color: var(--violet); border-top-style: dashed; }
.anoc-nm-lg-bus  { border-color: var(--cyan); }

/* ── Inline edit ──────────────────────────────────────────── */
.anoc-ie { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.anoc-ie-btn {
  background: none; border: 1px solid transparent; border-radius: 3px;
  color: var(--dim); font-size: 11px; cursor: pointer; padding: 1px 5px;
  opacity: 0; transition: opacity 0.1s; line-height: 1.4; flex-shrink: 0;
}
.anoc-ie:hover .anoc-ie-btn,
.anoc-ie-btn:focus { opacity: 1; border-color: var(--border2); }
.anoc-ie-input {
  font-family: var(--mono); font-size: 12px; min-width: 0;
  background: var(--surface2); border: 1px solid var(--accent);
  border-radius: 3px; color: var(--text); padding: 2px 7px; outline: none;
}
select.anoc-ie-input { cursor: pointer; }
.anoc-ie-confirm, .anoc-ie-cancel {
  background: none; border: 1px solid transparent; border-radius: 3px;
  font-size: 11px; cursor: pointer; padding: 1px 5px; line-height: 1.4; flex-shrink: 0;
  font-family: var(--mono);
}
.anoc-ie-confirm { color: var(--ok); }
.anoc-ie-cancel  { color: var(--err); }
.anoc-ie-confirm:hover { border-color: var(--ok); }
.anoc-ie-cancel:hover  { border-color: var(--err); }
.pac-container { z-index: 9999 !important; }

/* ── Netdisco port data (topology section) ────────────────── */
.anoc-topo-nd-section { margin-top: 24px; border-top: 1px dashed var(--border); padding-top: 16px; }
.anoc-topo-nd-hd {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.anoc-topo-nd-title {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--dim);
}
.anoc-topo-nd-table td { vertical-align: middle; }
.anoc-topo-nd-muted td { opacity: 0.45; }
.anoc-topo-nd-pvid {
  display: inline-flex; align-items: center; gap: 4px;
  background: color-mix(in oklab, var(--accent) 12%, var(--surface2));
  border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border));
  color: var(--accent); border-radius: 3px;
  padding: 1px 6px; font-size: 11px; white-space: nowrap;
}
.anoc-topo-nd-tagged { margin-top: 4px; display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.anoc-topo-nd-tag-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--dim); white-space: nowrap;
}
.anoc-topo-nd-tag-list { font-size: 11px; color: var(--muted); }

/* ── Interface extra IPs ──────────────────────────────────── */
.anoc-ip-row { display: flex; align-items: baseline; gap: 5px; }
.anoc-ip-toggle {
  background: none; border: 1px solid var(--border2); border-radius: 3px;
  color: var(--accent); font-family: var(--mono); font-size: 10px;
  padding: 0 4px; line-height: 1.6; cursor: pointer; flex-shrink: 0;
}
.anoc-ip-toggle:hover { background: var(--surface2); }
.anoc-ip-extra { display: none; margin-top: 3px; }
.anoc-ip-extra.open { display: block; }
.anoc-ip-extra > div { color: var(--muted); line-height: 1.7; }

/* ── Router jump dropdown ─────────────────────────────────── */
.anoc-jump-wrap { position: relative; }
.anoc-jump-dropdown {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 300;
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: 6px; box-shadow: 0 8px 28px rgba(0,0,0,.5);
  width: 280px; overflow: hidden;
}
.anoc-jump-dropdown.open { display: block; }
.anoc-jump-input {
  display: block; width: 100%; box-sizing: border-box;
  padding: 8px 10px; border: none; border-bottom: 1px solid var(--border);
  background: var(--surface2); color: var(--text);
  font: 12px/1 var(--mono); outline: none;
}
.anoc-jump-input::placeholder { color: var(--dim); }
.anoc-jump-list { max-height: 260px; overflow-y: auto; }
.anoc-jump-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; text-decoration: none; color: var(--text);
}
.anoc-jump-item:hover { background: var(--surface2); }
.anoc-jump-item-cur { background: color-mix(in oklab, var(--accent) 8%, var(--surface)); }
.anoc-jump-num { font-family: var(--mono); color: var(--dim); font-size: 11px; min-width: 58px; }
.anoc-jump-name { font-family: var(--mono); font-size: 12px; flex: 1; }
.anoc-jump-cur {
  font-family: var(--mono); font-size: 10px; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* ── Modal ─────────────────────────────────────────────── */
.anoc-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65); backdrop-filter: blur(2px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.anoc-modal {
  background: var(--surface1); border: 1px solid var(--border1);
  border-radius: 6px; box-shadow: 0 8px 32px rgba(0,0,0,.5);
  width: 480px; max-width: calc(100vw - 32px);
  max-height: 80vh; display: flex; flex-direction: column;
}
.anoc-modal-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--border1);
}
.anoc-modal-title { font-size: 13px; font-weight: 600; color: var(--text); }
.anoc-modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 12px; padding: 2px 6px; border-radius: 3px;
}
.anoc-modal-close:hover { color: var(--text); background: var(--surface2); }
.anoc-modal-body {
  padding: 14px 16px; overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 12px;
}
.anoc-modal-ft {
  padding: 10px 16px; border-top: 1px solid var(--border1);
  display: flex; justify-content: flex-end; gap: 8px;
}

/* ── Bulk Move ──────────────────────────────────────────── */
.anoc-move-row-changed td { background: color-mix(in oklab, var(--accent) 8%, var(--surface)); }
.anoc-move-row-changed .anoc-move-sel { border-color: var(--accent); }
.anoc-input-sm {
  font-family: var(--mono); font-size: 12px;
  background: var(--surface2); border: 1px solid var(--border1);
  border-radius: 3px; color: var(--text); padding: 4px 8px;
  cursor: pointer; outline: none; flex: 1;
}
.anoc-input-sm:focus { border-color: var(--accent); }

/* ── Dashboard (/home) ──────────────────────────────────────────── */
.anoc-dash { padding: 18px 22px 32px; }
.anoc-dash-kpis {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  margin-bottom: 22px;
}
@media (max-width: 1100px) { .anoc-dash-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width:  640px) { .anoc-dash-kpis { grid-template-columns: repeat(2, 1fr); } }
.anoc-dash-kpi {
  background: var(--surface); border: 1px solid var(--border0); border-radius: 5px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 2px;
  border-left: 3px solid var(--border1);
}
.anoc-dash-kpi-v {
  font-family: var(--mono); font-size: 28px; font-weight: 600; line-height: 1.1;
  color: var(--text);
}
.anoc-dash-kpi-l {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted);
}
.anoc-dash-kpi-sub {
  font-family: var(--mono); font-size: 10px; color: var(--dim); margin-top: 2px;
}
.anoc-dash-kpi-ok   { border-left-color: var(--ok); }
.anoc-dash-kpi-ok .anoc-dash-kpi-v { color: var(--ok); }
.anoc-dash-kpi-warn { border-left-color: var(--warn); }
.anoc-dash-kpi-warn .anoc-dash-kpi-v { color: var(--warn); }
.anoc-dash-kpi-err  { border-left-color: var(--err); }
.anoc-dash-kpi-err .anoc-dash-kpi-v { color: var(--err); }
.anoc-dash-kpi-dim  { border-left-color: var(--dim); }
.anoc-dash-kpi-neutral { border-left-color: var(--accent); }

.anoc-dash-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start;
}
@media (max-width: 1100px) { .anoc-dash-grid { grid-template-columns: 1fr; } }
.anoc-dash-col { display: flex; flex-direction: column; }

.anoc-dash-worklist td { vertical-align: middle; }

.anoc-dash-distro { display: flex; flex-direction: column; gap: 10px; }
.anoc-dash-distro-row { display: flex; align-items: flex-start; gap: 12px; }
.anoc-dash-distro-label {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); min-width: 80px; padding-top: 4px;
}

.anoc-dash-map {
  background: var(--surface); border: 1px solid var(--border0); border-radius: 4px;
  padding: 6px;
}
.anoc-dash-map .anoc-mapview-svg { max-height: 360px; }
.anoc-dash-map a { cursor: pointer; }

.anoc-dash-feed {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--border0); border-radius: 4px; background: var(--surface);
}
.anoc-dash-feed-item {
  display: grid; grid-template-columns: 110px 70px 1fr auto;
  gap: 12px; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--border0);
  font-size: 12px;
}
.anoc-dash-feed-item:last-child { border-bottom: none; }
.anoc-dash-feed-when  { color: var(--dim); font-size: 11px; }
.anoc-dash-feed-event {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 6px; border-radius: 2px; text-align: center;
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
}
.anoc-dash-feed-event-create  { color: var(--ok);  background: color-mix(in oklab, var(--ok) 12%, transparent);   border-color: color-mix(in oklab, var(--ok) 30%, transparent); }
.anoc-dash-feed-event-destroy { color: var(--err); background: color-mix(in oklab, var(--err) 12%, transparent);  border-color: color-mix(in oklab, var(--err) 30%, transparent); }
.anoc-dash-feed-target { font-family: var(--mono); }
.anoc-dash-feed-who    { font-family: var(--mono); font-size: 11px; }

/* ── Inline filter row (e.g. WAN connections provider filter) ─── */
.anoc-filter-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 10px; margin: 0;
  background: var(--surface); border: 1px solid var(--border0); border-radius: 4px;
}
.anoc-filter-label {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin-right: 4px;
}

/* ── Router Topology Diagram (.anoc-tpd-*) ──────────────────────── */
.anoc-tpd { position: relative; }

.anoc-tpd-loopback-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; margin-bottom: 10px;
  background: color-mix(in oklab, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--border));
  border-radius: 999px;
  font-family: var(--mono); font-size: 11px;
  position: relative; z-index: 2;
}
.anoc-tpd-lb-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent);
}
.anoc-tpd-lb-sep  { color: var(--dim); }
.anoc-tpd-lb-host { color: var(--muted); }

.anoc-tpd-diagram {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 22px 22px 28px;
  overflow: hidden;
}
.anoc-tpd-grid-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
  background-image:
    linear-gradient(to right,  color-mix(in oklab, var(--accent) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--accent) 8%, transparent) 1px, transparent 1px);
  background-size: 36px 36px;
}

.anoc-tpd-flow {
  position: relative;
  display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 32px;
  align-items: stretch;
}
.anoc-tpd-flow::before, .anoc-tpd-flow::after {
  content: ''; position: absolute; top: 24px; bottom: 24px;
  border-left: 1px dashed color-mix(in oklab, var(--accent) 22%, transparent);
  pointer-events: none;
}
.anoc-tpd-flow::before { left:  calc(33.333% - 16px); }
.anoc-tpd-flow::after  { left:  calc(66.666% + 16px); }
@media (max-width: 1100px) {
  .anoc-tpd-flow { grid-template-columns: 1fr; gap: 22px; }
  .anoc-tpd-flow::before, .anoc-tpd-flow::after { display: none; }
}

.anoc-tpd-col { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.anoc-tpd-col-h {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--muted);
  padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 18%, transparent);
  position: relative;
}
.anoc-tpd-col-h::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  width: 20px; height: 2px; background: var(--accent);
}

/* Nodes ─────────────────────────────────────────────────────────── */
.anoc-tpd-node {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 5px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 4px;
  position: relative; z-index: 1;
}
.anoc-tpd-node-h {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border0);
  margin-bottom: 4px;
}
.anoc-tpd-node-title {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted);
}
.anoc-tpd-node-tech { font-size: 11px; color: var(--text); }
.anoc-tpd-node-kv {
  display: flex; justify-content: space-between; font-size: 11px;
  color: var(--text);
}
.anoc-tpd-node-kv > :first-child {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 10px; color: var(--muted);
}
.anoc-tpd-node-empty {
  text-align: center; color: var(--dim); font-style: italic;
  padding: 18px 12px; font-size: 12px;
}
.anoc-tpd-node-provider { border-left: 3px solid color-mix(in oklab, var(--err) 80%, var(--border)); }
.anoc-tpd-node-modem    { border-left: 3px solid color-mix(in oklab, var(--warn) 70%, var(--border)); }
.anoc-tpd-node-switch   { border-left: 3px solid color-mix(in oklab, var(--ok) 70%, var(--border)); }

/* Wires (dashed dividers labelled) ─────────────────────────────── */
.anoc-tpd-wire {
  position: relative; height: 38px; margin: 4px 0;
  display: flex; align-items: center; justify-content: center;
}
.anoc-tpd-wire::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  border-left: 2px dashed color-mix(in oklab, var(--accent) 35%, transparent);
}
.anoc-tpd-wire-wan::before { border-left-color: color-mix(in oklab, var(--err)  35%, transparent); }
.anoc-tpd-wire-lan::before { border-left-color: color-mix(in oklab, var(--ok)   35%, transparent); }
.anoc-tpd-wire-label {
  position: relative; z-index: 1;
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted);
  background: var(--surface); padding: 2px 8px; border-radius: 3px;
  border: 1px solid var(--border0);
}

/* Port-plug widget ─────────────────────────────────────────────── */
.anoc-tpd-plug {
  display: flex; align-items: stretch; text-decoration: none;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 5px; overflow: hidden; transition: border-color .15s;
}
.anoc-tpd-plug:hover { border-color: var(--accent); }
.anoc-tpd-plug-jack {
  width: 14px; background: repeating-linear-gradient(
    to bottom,
    color-mix(in oklab, var(--text) 35%, transparent) 0 4px,
    transparent 4px 8px
  );
}
.anoc-tpd-plug-wan .anoc-tpd-plug-jack { background-color: color-mix(in oklab, var(--err) 18%, var(--surface2)); }
.anoc-tpd-plug-lan .anoc-tpd-plug-jack { background-color: color-mix(in oklab, var(--ok)  18%, var(--surface2)); }
.anoc-tpd-plug-body {
  flex: 1; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px;
  color: var(--text);
}
.anoc-tpd-plug-h {
  display: flex; align-items: center; gap: 6px; font-size: 12px;
}
.anoc-tpd-plug-row {
  display: flex; justify-content: space-between; font-size: 11px;
}
.anoc-tpd-plug-row .anoc-mut {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 10px;
}

/* Focal router node ────────────────────────────────────────────── */
.anoc-tpd-node-router {
  border: 1px solid var(--accent);
  background: color-mix(in oklab, var(--accent) 4%, var(--surface));
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--accent) 20%, transparent),
    0 4px 24px color-mix(in oklab, var(--accent) 15%, transparent);
  padding: 14px 14px 12px;
  position: relative; z-index: 2;
}
.anoc-tpd-router-hd {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.anoc-tpd-router-id { font-size: 10px; color: var(--dim); }
.anoc-tpd-router-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 3px;
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.06em;
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  color: var(--accent);
}
.anoc-tpd-router-badge-warn {
  background: color-mix(in oklab, var(--warn) 12%, transparent);
  border-color: color-mix(in oklab, var(--warn) 30%, transparent);
  color: var(--warn);
}
.anoc-tpd-router-leds {
  margin-left: auto; display: flex; gap: 5px;
  padding: 3px 6px; border: 1px solid var(--border0); border-radius: 3px;
  background: color-mix(in oklab, #000 30%, var(--surface));
}
.anoc-tpd-router-name {
  font-size: 18px; color: var(--text); line-height: 1.1;
}
.anoc-tpd-router-host { font-size: 11px; margin-bottom: 8px; }
.anoc-tpd-router-meta {
  display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr;
  gap: 4px 8px; font-size: 11px; align-items: baseline;
  padding: 6px 0; border-top: 1px solid var(--border0);
  border-bottom: 1px solid var(--border0);
}
.anoc-tpd-router-meta > :nth-child(odd) {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 9.5px; color: var(--muted);
}

/* Faceplate (port chips inside the router card) ────────────────── */
.anoc-tpd-faceplate { margin-top: 10px; }
.anoc-tpd-faceplate-h {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin-bottom: 6px;
}
.anoc-tpd-faceplate-ports {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px;
}
.anoc-tpd-port {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border: 1px solid var(--border0); border-radius: 4px;
  background: var(--surface2); text-decoration: none; color: var(--text);
  position: relative;
  transition: border-color .15s, background .15s;
}
.anoc-tpd-port:hover { border-color: var(--accent); }
.anoc-tpd-port-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-top-left-radius: 4px; border-bottom-left-radius: 4px;
}
.anoc-tpd-port-wan .anoc-tpd-port-bar { background: var(--err); }
.anoc-tpd-port-lan .anoc-tpd-port-bar { background: var(--ok); }
.anoc-tpd-port-aux .anoc-tpd-port-bar { background: color-mix(in oklab, var(--dim) 60%, transparent); }
.anoc-tpd-port-name { font-size: 11.5px; padding-left: 4px; }
.anoc-tpd-port-role {
  margin-left: auto;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  color: var(--muted); text-transform: uppercase;
}

/* Trunk sub-panel on switch card ───────────────────────────────── */
.anoc-tpd-trunk-sub {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--border0);
}
.anoc-tpd-trunk-sub-h {
  font-family: var(--mono); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin-bottom: 4px;
}
.anoc-tpd-trunk-row {
  display: flex; gap: 12px; align-items: baseline; font-size: 11px;
  padding: 1px 0;
}
.anoc-tpd-trunk-row > :first-child {
  min-width: 56px; color: var(--text);
}
.anoc-tpd-trunk-row-pvid > :first-child { color: var(--accent); }

/* Rails (VLAN / Tunnel grids below the diagram) ────────────────── */
.anoc-tpd-rail { margin-top: 28px; }
.anoc-tpd-rail-h {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text);
  margin: 0 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border0);
}
.anoc-tpd-rail-h-meta {
  font-size: 11px; color: var(--muted); text-transform: none;
  letter-spacing: 0;
}

.anoc-tpd-vlan-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.anoc-tpd-vlan-card {
  display: flex; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border0); border-radius: 5px;
  overflow: hidden; transition: border-color .15s;
}
.anoc-tpd-vlan-card:hover { border-color: var(--accent); }
.anoc-tpd-vlan-card-bar { width: 4px; }
.anoc-tpd-vlan-card-ok      .anoc-tpd-vlan-card-bar { background: var(--ok);     }
.anoc-tpd-vlan-card-accent  .anoc-tpd-vlan-card-bar { background: var(--accent); }
.anoc-tpd-vlan-card-warn    .anoc-tpd-vlan-card-bar { background: var(--warn);   }
.anoc-tpd-vlan-card-body { padding: 8px 10px; flex: 1; }
.anoc-tpd-vlan-card-h {
  display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 2px;
}
.anoc-tpd-vlan-tag {
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.08em; padding: 1px 5px; border-radius: 2px;
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--accent);
}
.anoc-tpd-vlan-card-label  { font-size: 11px; color: var(--text); }
.anoc-tpd-vlan-card-subnet { font-size: 11px; color: var(--muted); }

/* Tunnel mesh rail ─────────────────────────────────────────────── */
.anoc-tpd-tun-filters { margin: 4px 0 12px; }
.anoc-tpd-tun-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}
.anoc-tpd-tun-card {
  display: flex; background: var(--surface); border: 1px solid var(--border0);
  border-radius: 5px; overflow: hidden;
  transition: border-color .15s;
}
.anoc-tpd-tun-card:hover { border-color: var(--accent); }
.anoc-tpd-tun-card-bar { width: 4px; }
.anoc-tpd-tun-card-up    .anoc-tpd-tun-card-bar { background: var(--ok);   }
.anoc-tpd-tun-card-down  .anoc-tpd-tun-card-bar { background: var(--err);  }
.anoc-tpd-tun-card-stuck .anoc-tpd-tun-card-bar { background: var(--warn); }
.anoc-tpd-tun-card-body { flex: 1; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.anoc-tpd-tun-card-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; margin-bottom: 3px;
}
.anoc-tpd-tun-type {
  margin-left: auto;
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.08em; padding: 1px 5px; border-radius: 2px;
}
.anoc-tpd-tun-type-ipip {
  color: var(--ok);     background: color-mix(in oklab, var(--ok) 12%, transparent);
}
.anoc-tpd-tun-type-ovpn {
  color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent);
}
.anoc-tpd-tun-type-wg {
  color: #6ec0ff;       background: color-mix(in oklab, #6ec0ff 12%, transparent);
}
.anoc-tpd-tun-row {
  display: flex; justify-content: space-between; font-size: 11px;
}
.anoc-tpd-tun-row .anoc-mut {
  font-family: var(--mono); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 0.06em;
}
.anoc-tpd-tun-via .anoc-mono { color: var(--text); }

/* ── Leaflet maps (fws_map.js) ─────────────────────────────────────────────
   Region-aware tile maps that replaced the hand-drawn AU-only SVG maps.
   Pin/connection colours reuse the --ok/--err/--warn theme accents. */
.fws-map {
  width: 100%; background: var(--surface2);
  border-radius: 4px; z-index: 0;
  overflow: hidden;   /* keep tiles/controls inside the rounded border */
}
/* Full map (/maps) fills the relative .anoc-mapview-frame. */
.anoc-mapview-frame .fws-map-full { position: absolute; inset: 0; border-radius: 0; }
.fws-map-detail { height: 420px; }
.fws-map-dash   { height: 360px; }

/* circleMarker / polyline render as SVG <path>; CSS overrides Leaflet's inline
   presentation attributes. */
.fws-pin        { stroke: var(--surface); fill-opacity: 0.85; stroke-opacity: 1; }
.fws-pin-ok     { fill: var(--ok); }
.fws-pin-err    { fill: var(--err); }
.fws-pin-warn   { fill: var(--warn); }
.fws-pin-focal  { stroke: var(--accent); stroke-width: 3; fill-opacity: 1; }
.fws-conn       { stroke: var(--accent); stroke-opacity: 0.30; fill: none; }
.fws-conn-focal { stroke: var(--accent); stroke-opacity: 0.65; stroke-dasharray: 4 3; }

/* ── Routers-index rail distribution tally (region-driven) ───────────────── */
.anoc-minimap-distro { display: flex; flex-direction: column; gap: 4px; }
.anoc-minimap-distro-row { display: grid; grid-template-columns: 34px 1fr 22px; align-items: center; gap: 6px; }
.anoc-minimap-distro-code { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.anoc-minimap-distro-bar { height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; }
.anoc-minimap-distro-fill { display: block; height: 100%; background: var(--accent); opacity: 0.7; }
.anoc-minimap-distro-count { font-family: var(--mono); font-size: 10px; color: var(--dim); text-align: right; }

/* ── Login (pre-auth, no titlebar/nav) ───────────────────────────────────── */
.anoc-login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 32px 20px; background: var(--bg);
}
.anoc-login-card {
  width: 100%; max-width: 360px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; padding: 28px 26px 24px;
  display: flex; flex-direction: column; gap: 18px;
}
.anoc-login-brand { display: flex; align-items: center; gap: 9px; }
.anoc-login-logomark { color: var(--accent); font-family: var(--mono); font-size: 22px; line-height: 1; }
.anoc-login-name { font-family: var(--mono); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.anoc-login-caption {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--dim); margin-top: -10px;
}
.anoc-login-ms {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 10px 14px; background: var(--surface2);
  border: 1px solid var(--border2); border-radius: 5px; color: var(--text);
  font: inherit; font-size: 13px; cursor: pointer;
}
.anoc-login-ms:hover { border-color: var(--accent); color: var(--accent); }
.anoc-login-ms .ms-logo { width: 16px; height: 16px; }
.anoc-login-divider {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--dim);
}
.anoc-login-divider::before, .anoc-login-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border); border-top: 1px dashed var(--border2);
}
.anoc-login-form { display: flex; flex-direction: column; gap: 12px; }
.anoc-login-alert {
  background: color-mix(in oklab, var(--err) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--err) 40%, transparent);
  color: var(--err); border-radius: 5px; padding: 8px 10px;
  font-family: var(--mono); font-size: 11.5px;
}
.anoc-login-remember {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.anoc-login-remember input { accent-color: var(--accent); }
.anoc-login-foot {
  font-family: var(--mono); font-size: 10px; color: var(--dim);
  text-align: center; letter-spacing: 0.04em;
}

/* ── select2 (searchable network / connection pickers) ──────────────────────
   The bundled select2.css (loaded before anoc in the layout) supplies the
   widget structure — crucially the rule that hides the native <select>. These
   rules retint it to the anoc surfaces so the searchable pickers (interface WAN
   connection, address / static-route / tunnel networks, tunnel endpoints) match
   the native .anoc-select controls instead of select2's stock light theme. */
.select2-container { font-family: var(--mono); font-size: 12px; }
/* Fill the form field / cell, as the old per-form inline patch used to. */
.select2-container--default { width: 100% !important; }
.select2-container--default .select2-selection--single {
  height: 30px; border-radius: 5px;
  background: var(--surface2); border: 1px solid var(--border);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text); line-height: 30px; padding-left: 10px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--dim); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 28px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--muted) transparent transparent transparent;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--muted) transparent;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--accent);
}
.select2-dropdown {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  font-family: var(--mono); font-size: 12px; padding: 5px 8px; border-radius: 4px;
}
.select2-container--default .select2-results__option { color: var(--text); font-size: 12px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--accent); color: var(--bg);
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background: var(--surface2); color: var(--text);
}
.select2-container--default .select2-results__message { color: var(--muted); }