/* ===================================================================================================================
   Colours. Everyone picks a theme (sidebar + accent) and a mode (system / light / dark) with the palette button in the
   top bar - theme.js sets <html data-theme data-mode>. "company" uses the accent from Admin > Branding (--brand-accent).
   =================================================================================================================== */
:root {
  --bg: #f2f4f8; --panel: #ffffff; --text: #18202c; --muted: #657083; --border: #e4e7ec;
  --good: #138a52; --warn: #b5650b; --bad: #c4302b; --info: #2563eb;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 6px rgba(16, 24, 40, .06);
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --accent: var(--brand-accent, #e2462f);
  --nav-bg: #0c2d5a; --nav-bg2: #09234a; --nav-text: #dbe5f3; --nav-muted: #93abcd;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--panel));
  --on-accent: #ffffff;
  color-scheme: light;
}
[data-theme="navy"] { --accent: #2f7cf6; }
[data-theme="slate"] { --accent: #4f6bed; --nav-bg: #1f2937; --nav-bg2: #111827; --nav-text: #e5e7eb; --nav-muted: #9ca3af; }
[data-theme="ocean"] { --accent: #0e9f9a; --nav-bg: #0b4f5c; --nav-bg2: #073b45; --nav-text: #d9f2f3; --nav-muted: #8cc2c7; }
[data-theme="forest"] { --accent: #2e9d5b; --nav-bg: #173d2c; --nav-bg2: #0f2e20; --nav-text: #dcefe3; --nav-muted: #8fbca2; }
[data-theme="plum"] { --accent: #8b5cf6; --nav-bg: #3b1f5e; --nav-bg2: #2a1546; --nav-text: #ece3fb; --nav-muted: #b7a3d9; }
[data-theme="tiki"] { --accent: #e8611a; --nav-bg: #4a2a14; --nav-bg2: #36200f; --nav-text: #f6e3cd; --nav-muted: #d3ad86; }

/* dark mode: chosen, or "system" on a device set to dark */
[data-mode="dark"] {
  --bg: #0f1319; --panel: #171c24; --text: #e6e9ee; --muted: #93a0b3; --border: #283040;
  --good: #34d399; --warn: #fbbf24; --bad: #f87171; --info: #60a5fa; --shadow: none;
  --nav-bg: #0b1a33; --nav-bg2: #08142a; color-scheme: dark;
}
[data-mode="dark"][data-theme="slate"] { --nav-bg: #111827; --nav-bg2: #0b1120; }
[data-mode="dark"][data-theme="ocean"] { --nav-bg: #072f37; --nav-bg2: #04232a; }
[data-mode="dark"][data-theme="forest"] { --nav-bg: #0e2a1d; --nav-bg2: #091f15; }
[data-mode="dark"][data-theme="plum"] { --nav-bg: #26133f; --nav-bg2: #1b0d2e; }
[data-mode="dark"][data-theme="tiki"] { --nav-bg: #2d1a0c; --nav-bg2: #211307; }
@media (prefers-color-scheme: dark) {
  [data-mode="system"] {
    --bg: #0f1319; --panel: #171c24; --text: #e6e9ee; --muted: #93a0b3; --border: #283040;
    --good: #34d399; --warn: #fbbf24; --bad: #f87171; --info: #60a5fa; --shadow: none;
    --nav-bg: #0b1a33; --nav-bg2: #08142a; color-scheme: dark;
  }
  [data-mode="system"][data-theme="slate"] { --nav-bg: #111827; --nav-bg2: #0b1120; }
  [data-mode="system"][data-theme="ocean"] { --nav-bg: #072f37; --nav-bg2: #04232a; }
  [data-mode="system"][data-theme="forest"] { --nav-bg: #0e2a1d; --nav-bg2: #091f15; }
  [data-mode="system"][data-theme="plum"] { --nav-bg: #26133f; --nav-bg2: #1b0d2e; }
  [data-mode="system"][data-theme="tiki"] { --nav-bg: #2d1a0c; --nav-bg2: #211307; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--info); }
h1 { font-size: 22px; margin: 0 0 4px; } h2 { font-size: 16px; margin: 0 0 10px; }
.muted { color: var(--muted); } .small { font-size: 12px; } .mono { font-family: var(--mono); }
.hidden { display: none !important; }

/* layout: full-height sidebar (logo, who's signed in, menu) beside the top bar and the page */
.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.nav { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow-y: auto;
  background: linear-gradient(180deg, var(--nav-bg), var(--nav-bg2)); color: var(--nav-text); }
.nav-brand { flex: none; display: flex; align-items: center; min-height: 60px; padding: 10px 16px; background: var(--panel); color: var(--text); border-bottom: 1px solid var(--border); }
.nav-user { flex: none; display: flex; align-items: center; gap: 10px; margin: 14px 12px 6px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .07); }
.nav-user[hidden] { display: none; }
.avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--accent); color: var(--on-accent); }
.nav-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.nav-name { color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-role { color: var(--nav-muted); font-size: 12px; }
.nav-items { flex: 1; padding: 8px 10px; }
.nav-items button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px; margin: 1px 0;
  border-radius: 8px; cursor: pointer; color: var(--nav-text); font-weight: 500; }
.nav-items button svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--nav-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-items button:hover, .nav-items button:focus-visible { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-items button:hover svg { stroke: #fff; }
.nav-items button.active { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.nav-items button.active svg { stroke: var(--on-accent); }
.nav-items button.hidden { display: none; }
/* sidebar groups (like Report Center): a heading with a count and a chevron, its pages indented below */
.nav-items .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-count { font-size: 11px; font-weight: 500; background: rgba(255, 255, 255, .1); color: var(--nav-text); border-radius: 10px; padding: 1px 7px; }
.nav-items button.active .nav-count { background: rgba(255, 255, 255, .25); color: var(--on-accent); }
.nav-group { margin: 1px 0; }
.nav-items .nav-cat { font-weight: 600; }
.nav-items .chev { width: 14px !important; height: 14px !important; transition: transform .15s; }
.nav-group.open > .nav-cat { color: #fff; } .nav-group.open > .nav-cat svg { stroke: #fff; }
.nav-group.open > .nav-cat .chev { transform: rotate(90deg); }
.nav-sub { display: none; margin: 2px 0 6px 21px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .14); }
.nav-group.open .nav-sub { display: block; }
.nav-items .nav-sub button { padding: 6px 10px; font-size: 13px; color: var(--nav-muted); font-weight: 500; }
.nav-items .nav-sub button:hover { color: #fff; }
.nav-items .nav-sub button.active { color: var(--on-accent); font-weight: 600; }
.nav-version { flex: none; padding: 10px 22px 14px; font-size: 12px; color: var(--nav-muted); }
.content { min-width: 0; display: flex; flex-direction: column; }
.top-sticky { position: sticky; top: 0; z-index: 5; }   /* top bar + update banner stay in view together */
.topbar { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 24px; background: var(--panel); box-shadow: var(--shadow);
  border-bottom: 1px solid var(--border); }
.topbar .who { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.icon-btn { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; cursor: pointer; color: var(--muted); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover, .icon-btn:focus-visible { background: var(--bg); color: var(--text); }
.menu-btn { display: none; }
.brand { font-weight: 800; letter-spacing: .2px; font-size: 16px; }
.brand b { color: var(--accent); }
.spacer { flex: 1; }
.main { padding: 24px 28px 40px; max-width: 1400px; width: 100%; }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .nav { position: fixed; inset: 0 auto 0 0; width: 270px; max-width: 86vw; z-index: 20; transform: translateX(-102%); transition: transform .18s;
    box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
  .nav.open { transform: none; }
  .menu-btn { display: inline-grid; }
  .topbar { padding: 8px 12px; gap: 8px; }
  .topbar .who, #devBadge { display: none; }
  .main { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

/* components */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-top: 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 14px; }
.tile { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.tile .v { font-size: 26px; font-weight: 800; } .tile .l { color: var(--muted); font-size: 12px; }
.tile.good .v { color: var(--good); } .tile.bad .v { color: var(--bad); } .tile.warn .v { color: var(--warn); }
button.btn, a.btn { font: inherit; border: 1px solid var(--border); background: var(--panel); color: var(--text); padding: 7px 14px; border-radius: 8px; cursor: pointer; text-decoration: none; display: inline-block; }
button.btn:hover { border-color: var(--muted); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { color: var(--bad); }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--info); outline-offset: 1px; }
label.field { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
label.field input, label.field select { color: var(--text); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
tr.click { cursor: pointer; } tr.click:hover td { background: var(--bg); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: var(--muted); }
.dot.on { background: var(--good); } .dot.off { background: var(--bad); } .dot.pending { background: var(--warn); }
.pill { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); }
.status { font-size: 13px; } .status.ok { color: var(--good); } .status.err { color: var(--bad); } .status.warn { color: var(--warn); }
.code { font-family: var(--mono); font-size: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px; white-space: pre-wrap; word-break: break-all; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 24px; }
.grid2 > * { min-width: 0; }   /* a long value wraps instead of stretching its column off the card */
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--border); }
.kv span:first-child { color: var(--muted); flex-shrink: 0; }
/* long values (keys, addresses, paths) wrap inside their column instead of running off the card */
.kv span:last-child { min-width: 0; overflow-wrap: anywhere; text-align: right; }
.bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; min-width: 60px; }
.bar > i { display: block; height: 100%; background: var(--info); width: 0; }
.chart { width: 100%; height: 140px; }
.chart .line-a { stroke: var(--info); } .chart .line-b { stroke: var(--accent); } .chart .grid { stroke: var(--border); }
.chart text { fill: var(--muted); font-size: 10px; }
dialog { border: 0; border-radius: 14px; padding: 20px; width: min(560px, 94vw); background: var(--panel); color: var(--text); }
dialog::backdrop { background: rgba(10, 15, 25, .5); }
.actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }

/* sign-in pages */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.auth .box { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 28px; }
.auth .box > * + * { margin-top: 12px; }
.auth input { width: 100%; }
.auth .or { text-align: center; color: var(--muted); font-size: 12px; }
.auth .wide { width: 100%; }

/* backups */
dialog.wide { width: min(1000px, 96vw); }
pre.cfg { max-height: 65vh; overflow: auto; margin: 10px 0 0; white-space: pre; word-break: normal; }
.add { color: var(--good); } .del { color: var(--bad); } .hunk { color: var(--info); }
pre.cfg span { display: block; }
.tile .v.v-text { font-size: 20px; }

/* product pictures */
.thumb-sm { width: 44px; height: 28px; object-fit: contain; display: block; }
.thumb-lg { width: 120px; height: 80px; object-fit: contain; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 6px; }

/* branding */
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand-logo { height: 28px; max-width: 160px; object-fit: contain; }
.auth .brand-logo { height: 40px; }
.brand-wordmark { max-width: none; }
.logo-preview { height: 48px; max-width: 220px; object-fit: contain; border: 1px dashed var(--border); border-radius: 8px; padding: 4px; background: var(--bg); }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-top: 12px; }
.tabs button { all: unset; cursor: pointer; padding: 8px 14px; border-bottom: 2px solid transparent; color: var(--muted); }
.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
input[type=color] { width: 56px; height: 34px; padding: 2px; }
.nowrap { white-space: nowrap; }

/* router page: UniFi-style summary panel + activity chart */
.dev-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.dev-layout > .dev-main > .card:first-child { margin-top: 0; }
/* the left panel stays in view below the sticky top bar, and scrolls on its own when it's taller than the window */
.dev-side { position: sticky; top: calc(var(--stick-top, 64px) + 12px); margin-top: 0; max-height: calc(100vh - var(--stick-top, 64px) - 24px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.dev-head { display: flex; justify-content: center; padding: 6px 0 10px; }
.dev-side .thumb-lg { width: 200px; height: 130px; border: 0; }
.dev-name { font-size: 18px; font-weight: 700; text-align: center; word-break: break-word; }
.dev-sub { text-align: center; margin: 4px 0 12px; }
.kvs { margin-bottom: 14px; } .kvs .kv { font-size: 13px; } .kvs .kv span:last-child { text-align: right; word-break: break-all; }
.meter { margin: 10px 0; } .meter .row { margin-bottom: 4px; gap: 6px; }
.bar > i.warm { background: var(--warn); } .bar > i.hot { background: var(--bad); }
.thru { margin-top: 14px; } .thru div { font-size: 18px; font-weight: 700; }
.thru .in, .legend .in { color: var(--info); } .thru .out { color: #8b5cf6; }
.spark { width: 100%; height: 40px; display: block; margin: 6px 0 14px; }
.btn.wide { width: 100%; margin-top: 6px; }
.chart-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 10px; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg button { all: unset; cursor: pointer; padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--border); }
.seg button.on { background: var(--accent-soft); color: var(--accent); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.act-wrap { position: relative; }
.act { width: 100%; height: 280px; display: block; }
.act .grid { stroke: var(--border); } .act .axis { fill: var(--muted); font-size: 10px; }
.area-in { fill: var(--info); opacity: .18; }
.l-in { stroke: var(--info); stroke-width: 1.6; } .l-out { stroke: #8b5cf6; stroke-width: 1.4; }
.l-lat { stroke: var(--warn); stroke-width: 1.3; stroke-dasharray: 4 3; }
.r-loss { fill: var(--bad); }
.cursor { stroke: var(--muted); stroke-dasharray: 2 2; } .cursor.hidden { display: none; }
.tip { position: absolute; top: 8px; min-width: 160px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font-size: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.12); pointer-events: none; }
.tip div { margin-top: 3px; }
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 6px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; }
.sw.in { background: var(--info); } .sw.out { background: #8b5cf6; } .sw.lat { background: var(--warn); } .sw.loss { background: var(--bad); }
.health { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 16px 0; }
.hcell { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.hcell .hv { font-size: 22px; font-weight: 800; } .hcell .hl { color: var(--muted); font-size: 12px; }
.hcell.good .hv { color: var(--good); } .hcell.warn .hv { color: var(--warn); } .hcell.bad .hv { color: var(--bad); }
@media (max-width: 900px) { .dev-layout { grid-template-columns: 1fr; } .dev-side { position: static; max-height: none; overflow: visible; } }
/* site map */
.sm-org { margin-top: 18px; } .sm-org h2 { font-size: 15px; margin: 0 0 8px; }
.sm-tree { border-left: 1.5px dashed var(--border); margin-left: 6px; padding-left: 0; }
.sm-row { display: flex; align-items: flex-start; gap: 0; padding: 8px 0; }
.sm-row::before { content: ""; width: 22px; flex: none; border-top: 1.5px dashed var(--border); margin-top: 24px; }
.sm-dev { display: flex; align-items: center; gap: 8px; width: 230px; flex: none; padding: 9px 12px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; color: inherit; text-decoration: none; }
.sm-dev:hover, .sm-dev:focus-visible { border-color: var(--accent); }
.sm-dev span:last-child { display: grid; min-width: 0; } .sm-dev b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-dev .dot { flex: none; margin-right: 0; }
.thumb-xs { width: 34px; height: 24px; object-fit: contain; flex: none; }
.sm-nets { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; flex: 1; position: relative; padding-left: 26px; }
.sm-nets::before { content: ""; position: absolute; left: 2px; width: 20px; top: 24px; border-top: 1.5px dashed var(--border); }
.sm-net { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.sm-net span { display: grid; min-width: 0; } .sm-net b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-net svg { width: 16px; height: 16px; flex: none; margin-top: 2px; fill: none; stroke: var(--info); stroke-width: 1.4; }
.sm-net.clash { border-color: var(--warn); } .sm-net.clash svg { stroke: var(--warn); }
.sm-net.empty { border-style: dashed; }
#smQ { min-width: 280px; }
@media (max-width: 760px) { .sm-row { flex-direction: column; } .sm-row::before { display: none; } .sm-dev { width: auto; }
  .sm-nets { padding-left: 16px; margin-top: 8px; width: 100%; box-sizing: border-box; } .sm-nets::before { display: none; } #smQ { min-width: 0; flex: 1; } }
/* upgrades */
.up-box { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.up-box.avail { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.pill.up-run { border-color: var(--info); color: var(--info); } .pill.up-sched { border-color: var(--warn); color: var(--warn); }
.pill.up-done { border-color: var(--good); color: var(--good); } .pill.up-failed { border-color: var(--bad); color: var(--bad); }
.pill.up-cancelled { color: var(--muted); }
fieldset.up-when { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px 10px; margin: 0 0 12px; display: grid; gap: 8px; }
#upQ { min-width: 220px; }
/* site-to-site VPN */
.vsubs { display: grid; gap: 4px; }
.vadd { max-width: 260px; font-size: 12px; padding: 4px 8px; }
.vpn-tag { color: var(--info); }
.tabs + #vpnBody { margin-top: 12px; }
.cw-types { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 8px 0; }

/* tasks */
.tk-body { margin-top: 12px; }
.rp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 12px; max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin-top: 6px; }
.script-box { min-height: 220px; width: 100%; box-sizing: border-box; white-space: pre; }
.run-out { max-height: 160px; overflow: auto; margin: 0; }
#tDays, #tOnce, #tTime, #tHours { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* version and updates */
/* installed version next to the logo, and the new-version banner under the top bar */
.ver-chip { font-size: 11.5px; font-weight: 600; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.update-banner { display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: var(--accent); color: #fff;
  font-size: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.update-banner.busy { background: var(--info); }
.update-banner b { font-weight: 700; }
.update-banner .ub-link { color: #fff; font-weight: 600; text-decoration: underline; white-space: nowrap; }
.update-banner .ub-go { background: #fff; color: var(--accent); border-color: #fff; font-weight: 700; white-space: nowrap; }
.update-banner .ub-go:hover { background: rgba(255, 255, 255, .9); }
.ub-close { all: unset; cursor: pointer; font-size: 22px; line-height: 1; padding: 0 4px; opacity: .85; }
.ub-close:hover, .ub-close:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
@media (max-width: 700px) { .update-banner { flex-wrap: wrap; } .update-banner .spacer { display: none; } }

/* sortable table headers */
.th-sort { all: unset; cursor: pointer; white-space: nowrap; }
.th-sort:hover, .th-sort:focus-visible, .th-sort.on { color: var(--text); }
.th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.th-arrow { display: inline-block; min-width: 1em; margin-left: 3px; font-size: 10px; color: var(--accent); }
/* subnets in use */
tr.sn-clash td { background: color-mix(in srgb, var(--warn) 9%, transparent); }

/* ===================================================================================================================
   Modern look (like Report Center): soft cards, KPI tiles with a coloured top edge, calmer tables, tidy controls
   =================================================================================================================== */
h1 { font-size: 24px; letter-spacing: -.015em; }
.card, .tile, .hcell, .sm-dev, .sm-net { border-color: transparent; box-shadow: var(--shadow); }
.card { border-radius: 12px; padding: 18px 20px; margin-top: 18px; }
.card h2 { font-size: 16px; font-weight: 700; }
.tiles { gap: 16px; margin-top: 18px; }
.tile { --k: var(--accent); border-top: 4px solid var(--k); border-radius: 12px; padding: 14px 18px 16px; }
.tile.good { --k: var(--good); } .tile.bad { --k: var(--bad); } .tile.warn { --k: var(--warn); }
.tile .l { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--k); }
.tile .v { font-size: 28px; font-weight: 750; color: var(--k); }
.tile:not(.good):not(.bad):not(.warn) .v { color: var(--text); }
.hcell { border-top: 4px solid var(--muted); border-radius: 12px; }
.hcell.good { border-top-color: var(--good); } .hcell.warn { border-top-color: var(--warn); } .hcell.bad { border-top-color: var(--bad); }
.table-wrap { border-radius: 10px; }
th { background: color-mix(in srgb, var(--bg) 70%, var(--panel)); text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; padding: 9px 10px; }
td { padding: 9px 10px; border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent); }
button.btn, a.btn { border-radius: 8px; font-weight: 500; }
button.btn:hover, a.btn:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
button.primary:hover { filter: brightness(1.06); }
input, select, textarea { background: var(--panel); }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.pill { background: var(--accent-soft); border-color: transparent; color: var(--text); }
dialog { border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, .3); }
.auth .box { border-color: transparent; box-shadow: 0 12px 40px rgba(16, 24, 40, .12); border-radius: 18px; }
.auth { background: linear-gradient(160deg, var(--bg), color-mix(in srgb, var(--accent) 10%, var(--bg))); }
.update-banner { background: var(--accent); color: var(--on-accent); }
.update-banner .ub-go { color: var(--accent); }
.ver-chip { background: var(--bg); border-color: transparent; }
.ver-check { all: unset; cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--accent); padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
.ver-check:hover, .ver-check:focus-visible { background: var(--accent-soft); }
.ver-check:disabled { cursor: default; color: var(--muted); }
.ver-check.hidden { display: none; }
@media (max-width: 600px) { .ver-check { display: none; } }
@media (prefers-color-scheme: dark) { [data-mode="system"] .card, [data-mode="system"] .tile, [data-mode="system"] .hcell { border-color: var(--border); } }
[data-mode="dark"] .card, [data-mode="dark"] .tile, [data-mode="dark"] .hcell { border-color: var(--border); }

/* appearance chooser (palette button) */
.ap-modes { display: inline-flex; background: var(--bg); border-radius: 10px; padding: 3px; gap: 2px; }
.ap-modes button { all: unset; cursor: pointer; padding: 6px 16px; border-radius: 8px; font-weight: 600; font-size: 13px; color: var(--muted); }
.ap-modes button.on { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.ap-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; }
.ap-theme { all: unset; box-sizing: border-box; cursor: pointer; border-radius: 12px; border: 2px solid var(--border); overflow: hidden; background: var(--panel); }
.ap-theme:hover, .ap-theme:focus-visible { border-color: var(--muted); }
.ap-theme.on { border-color: var(--accent); }
.ap-swatch { display: grid; grid-template-columns: 34% 1fr; height: 64px; }
.ap-swatch .sb { display: flex; flex-direction: column; gap: 5px; padding: 8px 6px; }
.ap-swatch .sb i { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .35); }
.ap-swatch .sb i:first-child { background: var(--sw-accent); }
.ap-swatch .pg { background: var(--bg); padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.ap-swatch .pg i { display: block; height: 14px; border-radius: 4px; background: var(--panel); border-top: 3px solid var(--sw-accent); }
.ap-name { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; font-size: 13px; font-weight: 600; }
.ap-name svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2.5; }

/* geographic map (geomap.js) */
.geomap { position: relative; overflow: hidden; border-radius: 10px; background: var(--bg); touch-action: none; user-select: none; }
.geomap canvas { display: block; cursor: grab; }
.geomap canvas:active { cursor: grabbing; }
.geomap canvas.gm-pointer { cursor: pointer; }
.gm-ctl { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 4px; }
.gm-ctl button { all: unset; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; cursor: pointer; font-size: 18px; font-weight: 700;
  background: var(--panel); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.gm-ctl button:hover, .gm-ctl button:focus-visible { color: var(--accent); }
.gm-tip { position: absolute; pointer-events: none; background: var(--panel); color: var(--text); padding: 6px 10px; border-radius: 8px; font-size: 12.5px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2); white-space: nowrap; }
.gm-msg { position: absolute; inset: 0; display: grid; place-items: center; }
.geo-card { padding: 10px; }
.geo-wrap { height: min(68vh, 620px); }
.geo-legend { gap: 16px; padding: 8px 4px 0; }
.geo-missing { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.geo-missing a { color: var(--text); text-decoration: none; } .geo-missing a:hover { color: var(--accent); }
.sm-filters { margin-top: 12px; }
.loc-map { height: 260px; margin-top: 10px; }
.loc-edit { display: grid; gap: 10px; margin: 6px 0 4px; }
.loc-edit .row input { flex: 1; min-width: 160px; }
.loc-hit { all: unset; display: block; cursor: pointer; padding: 6px 10px; border-radius: 8px; font-size: 13px; background: var(--bg); margin-bottom: 4px; }
.loc-hit:hover, .loc-hit:focus-visible { background: var(--accent-soft); color: var(--accent); }

/* network map behind one router (org-chart style tree) */
.topo { display: flex; flex-direction: column; align-items: center; padding: 10px 0 6px; overflow-x: auto; }
.tnode { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 12px; background: var(--panel); box-shadow: var(--shadow);
  border: 1px solid var(--border); text-align: left; max-width: 260px; }
.tnode > span:last-child { display: grid; min-width: 0; line-height: 1.3; }
.tnode b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tnode small { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tic { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; color: #fff; background: var(--muted); }
.tic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tcloud .tic { background: #8aa4c8; } .trouter .tic { background: #ef6b5a; } .tnet .tic { background: var(--accent); } .tinfra .tic { background: #f0a24a; }
.tstem { width: 2px; height: 22px; background: color-mix(in srgb, var(--info) 55%, transparent); }
.trouter-row { display: flex; align-items: flex-start; gap: 18px; position: relative; }
.troutes { display: grid; gap: 6px; padding: 10px 14px; border-radius: 10px; background: var(--bg); margin-top: 14px; }
.troute { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; } .troute.off { opacity: .55; }
.pill.r-vpn { color: var(--info); } .pill.r-static { color: var(--text); } .pill.r-dynamic { color: var(--good); }
.tnets { display: flex; gap: 0; position: relative; padding-top: 0; }
.tcol { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 12px 0; position: relative; min-width: 200px; }
/* the connector: a horizontal bar across the columns and a short drop into each one */
.tcol::before, .tcol::after { content: ""; position: absolute; top: 0; width: 50%; height: 22px; border-top: 2px solid color-mix(in srgb, var(--info) 55%, transparent); }
.tcol::before { right: 50%; } .tcol::after { left: 50%; border-left: 2px solid color-mix(in srgb, var(--info) 55%, transparent); }
.tcol:first-child::before, .tcol:last-child::after { border-top: 0; }
.tcol:last-child::before { border-right: 2px solid color-mix(in srgb, var(--info) 55%, transparent); width: calc(50% - 1px); }
.tcol:first-child:last-child::before { display: none; }
.tbranch { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--border); width: 100%; }
.tgroups { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 280px; }
.tbub { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 78px; padding: 6px 2px;
  border-radius: 10px; cursor: pointer; font-size: 11.5px; color: var(--muted); text-align: center; }
.tbub:hover, .tbub:focus-visible, .tbub.on { background: var(--accent-soft); color: var(--text); }
.tbub .tic { width: 42px; height: 42px; }
.tbub .tcnt { position: absolute; top: 0; right: 12px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px;
  background: var(--panel); color: var(--text); font-size: 11px; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.k-phone .tic { background: #2bb3a3; } .k-printer .tic { background: #7c9ccf; } .k-camera .tic { background: #8b6fd6; } .k-server .tic { background: #5b7fd6; }
.k-computer .tic { background: #4aa3df; } .k-mobile .tic { background: #e58fb0; } .k-iot .tic { background: #9bbf4a; } .k-network .tic { background: #f0a24a; }
.k-unknown .tic { background: #9aa5b5; }
.tdirect, .tempty { text-align: center; }
.topo-list { margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--bg); }
.topo-list .row { margin-bottom: 8px; }
@media (max-width: 760px) { .tnets { flex-direction: column; align-items: stretch; } .tcol::before, .tcol::after { display: none; } .tcol { padding-top: 8px; } }

/* firewall & NAT */
.fw-table td { vertical-align: top; }
.fw-table tr.fw-off td { opacity: .5; }
.fw-table tr.fw-bad td { color: var(--bad); }
.fw-acts .btn { padding: 2px 8px; font-size: 12px; }
.pill.fw-accept, .pill.fw-masquerade, .pill.fw-fasttrack-connection { border-color: var(--good); color: var(--good); }
.pill.fw-drop, .pill.fw-reject, .pill.fw-tarpit { border-color: var(--bad); color: var(--bad); }
.pill.fw-dst-nat, .pill.fw-src-nat, .pill.fw-redirect, .pill.fw-netmap { border-color: var(--info); color: var(--info); }
.fw-pending { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; border: 1px solid var(--warn); border-radius: 10px;
  padding: 10px 14px; margin: 10px 0; background: color-mix(in srgb, var(--warn) 10%, var(--panel)); }
.fw-pending > div:first-child { flex: 1; min-width: 240px; }
.fw-pending ul { margin: 6px 0 0; padding-left: 18px; }
.fw-pending-acts { display: flex; gap: 8px; }
/* rule editor laid out like WebFig: label | + / (- ! value) */
dialog.fw-dlg { width: min(680px, 96vw); }
.fw-form .fw-sec { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 16px 0 6px; padding: 6px 10px;
  background: var(--bg); border-radius: 8px; }
.fw-row { display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 4px 12px; min-height: 34px; }
.fw-lbl { text-align: right; font-size: 13px; color: var(--muted); }
.fw-row.on .fw-lbl { color: var(--text); font-weight: 600; }
.fw-val { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fw-val > input:not([type=checkbox]), .fw-val > select { flex: 1; min-width: 0; }
.fw-row[data-row] .fw-val { display: none; }
.fw-row[data-row].on .fw-val { display: flex; }
.fw-row[data-row].on .fw-add { display: none; }
.fw-add, .fw-del { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text);
  cursor: pointer; font-weight: 700; line-height: 1; justify-self: start; }
.fw-add:hover, .fw-del:hover { border-color: var(--accent); color: var(--accent); }
.fw-row.disabled .fw-lbl { opacity: .45; }
.fw-add:disabled { opacity: .4; cursor: default; }
.fw-not { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; font-weight: 700; color: var(--muted); position: relative; }
.fw-not input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fw-not:has(input:checked) { background: var(--bad); border-color: var(--bad); color: #fff; }
.fw-not:has(input:focus-visible) { outline: 2px solid var(--accent); }
.fw-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.fw-hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }
@media (max-width: 600px) { .fw-row { grid-template-columns: 1fr; } .fw-lbl { text-align: left; } }

/* map: routers stacked on one spot */
.gm-list { position: absolute; width: 280px; max-height: calc(100% - 16px); overflow: auto; background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); padding: 8px; z-index: 3; }
.gm-list-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.gm-list-head b { flex: 1; font-size: 13px; }
.gm-list-x { all: unset; cursor: pointer; font-size: 18px; padding: 0 6px; color: var(--muted); }
.gm-list-item { all: unset; box-sizing: border-box; display: flex; gap: 8px; align-items: center; width: 100%; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.gm-list-item:hover, .gm-list-item:focus-visible { background: var(--accent-soft); }
.gm-list-item small { display: block; color: var(--muted); font-size: 11.5px; }
.geo-dupe { margin-top: 10px; }

/* server security check (Admin > Version & updates) */
.sec-box { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.sec-box h3 { margin: 0; font-size: 15px; }
.sec-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.sec-list li { display: grid; grid-template-columns: 52px 150px 1fr; gap: 10px; align-items: baseline; font-size: 13px; }
.sec-tag { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 6px; text-align: center; }
.sec-fail .sec-tag { background: var(--bad); color: #fff; } .sec-warn .sec-tag { background: var(--warn); color: #fff; }
.sec-pass .sec-tag { background: var(--good); color: #fff; }
.pill.sec-pill-fail { border-color: var(--bad); color: var(--bad); } .pill.sec-pill-warn { border-color: var(--warn); color: var(--warn); }
.pill.lc-disc { border-color: var(--warn); color: var(--warn); } .pill.lc-old { color: var(--muted); }
.lc-note { margin: 4px 0 8px; }
.pill.dm-flag { border-color: var(--bad); color: var(--bad); font-weight: 700; }
.flag-card { border-left: 5px solid var(--bad); }
.flag-card h2 { color: var(--bad); }
.pill.cve-crit { border-color: var(--bad); color: #fff; background: var(--bad); } .pill.cve-high { border-color: var(--bad); color: var(--bad); }
.pill.cve-med { border-color: var(--warn); color: var(--warn); }
.sec-card { border-left: 5px solid var(--warn); }
.pill.ab-on { border-color: var(--good); color: var(--good); }
.pill.tag { font-size: 11px; padding: 0 7px; background: var(--accent-soft, var(--bg)); }
.tag-row { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px; } .dev-tags { justify-content: center; margin: 6px 0; }
.dev-notes { border: 1px dashed var(--border); border-radius: 8px; padding: 6px 8px; margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
button.bk-tile { text-align: left; cursor: pointer; font: inherit; color: inherit; } button.bk-tile.on { outline: 2px solid var(--accent); }
.pt-face { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; margin: 6px 0 10px; overflow-x: auto; }
.pt-block { display: flex; flex-direction: column; gap: 4px; }
.pt-row { display: flex; gap: 4px; } .pt-labels span { width: 34px; font-size: 9px; line-height: 1.1; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.pt, .pt-gap { width: 34px; height: 30px; border-radius: 5px; flex: none; }
.pt { position: relative; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: 600 11px/1 inherit; cursor: pointer; padding: 0; }
.pt.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.pt-n { pointer-events: none; } .pt-poe { position: absolute; left: 2px; top: 1px; font-size: 9px; font-style: normal; } .pt-up { position: absolute; right: 2px; top: 0; font-size: 10px; font-style: normal; }
.pt-1g, .sw2.pt-1g { background: #3cb371; color: #fff; border-color: #2f9a60; } .pt-100m, .sw2.pt-100m { background: #c8b400; color: #fff; border-color: #a99800; }
.pt-25g, .sw2.pt-25g { background: #1aa6a6; color: #fff; border-color: #148a8a; } .pt-10g, .sw2.pt-10g { background: #2f7cf6; color: #fff; border-color: #2266d0; }
.pt-down, .sw2.pt-down { background: var(--bg); color: var(--muted); } .pt-off, .sw2.pt-off { background: var(--border); color: var(--muted); text-decoration: line-through; }
.pt-native { background: var(--bg); } .pt-none { background: transparent; color: var(--muted); border-style: dashed; }
.pt-tag, .sw2.pt-tag { background: #3cb371; color: #fff; border-color: #2f9a60; } .pt-nat, .sw2.pt-nat { background: #2f7cf6; color: #fff; border-color: #2266d0; }
.pt-blk, .sw2.pt-blk { background: var(--border); color: var(--muted); }
.pt-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; } .sw2 { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -2px; border: 1px solid var(--border); }
.pt-vhead { margin-top: 10px; } .pt-vhead #ptQ { width: 240px; } .pt-vlan { border-top: 1px solid var(--border); padding-top: 6px; margin-top: 6px; }
.pt-pending { border-left: 5px solid var(--warn); } .pt-changes { max-height: 140px; overflow: auto; padding-left: 18px; }
tr.pt-selrow td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pt-editor { border-left: 5px solid var(--accent); } .pe-tag { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; margin: 8px 0; }
.pe-vl { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; } .pt-filters { gap: 8px; margin-bottom: 6px; }
#ptRoot td:nth-child(4) { white-space: nowrap; }
.rtabs { flex-wrap: wrap; row-gap: 2px; max-width: 100%; } .pt-changes li { overflow-wrap: anywhere; }
.integ-layout { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .integ-layout { grid-template-columns: 1fr; } }
.integ-filter input[type=search] { width: 100%; margin-bottom: 10px; } .integ-ftitle { margin: 4px 0; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.integ-filter label { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 13.5px; cursor: pointer; }
.integ-filter label .n { margin-left: auto; font-size: 11.5px; border: 1px solid var(--border); border-radius: 5px; padding: 0 6px; color: var(--muted); }
.integ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.integ-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; min-width: 0; }
.integ-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.integ-logo { width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; flex: none; background: var(--accent); }
.integ-name { font-weight: 600; line-height: 1.2; }
.integ-tag { margin-left: auto; font-size: 11px; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.integ-about { font-size: 12.5px; color: var(--muted); flex: 1; }
.integ-msg { font-size: 12px; color: var(--muted); min-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.ghost { background: transparent; }
.integ-btns { display: flex; gap: 8px; } .integ-btns .btn { flex: 1; justify-content: center; }
.integ-status { text-align: center; border-radius: 7px; padding: 8px 12px; font-weight: 600; font-size: 13px; color: #fff; }
.integ-status.ok { background: #4caf50; } .integ-status.err { background: #d9534f; }
.integ-status.off { background: var(--bg); color: var(--muted); border: 1px dashed var(--border); }
.integ-detail-body > .card > .row:first-child { display: none; }   /* the page header already names it */
.integ-back { margin-bottom: 8px; } .integ-detail-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; } .integ-detail-head h2 { margin: 0; }
.integ-detail-head .integ-logo { width: 42px; height: 42px; font-size: 15px; }
.up-safe { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; margin: 8px 0; } .up-safe input[type=number] { width: 60px; }
.up-order { margin: 6px 0 0; padding-left: 22px; max-height: 220px; overflow: auto; } .up-order li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.pill.up-held { border-color: var(--warn); color: var(--warn); } .pill.up-skipped { color: var(--muted); }
.log-filters { flex-wrap: wrap; gap: 6px; } .log-filters input { width: 160px; }
.log-table td { vertical-align: top; } .log-msg { font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; overflow-wrap: anywhere; min-width: 280px; }
.pill.log-sev { font-size: 11px; } .pill.log-sev.bad { border-color: var(--bad); color: var(--bad); } .pill.log-sev.warn { border-color: var(--warn); color: var(--warn); }
.pill.log-sev.muted { color: var(--muted); } tr.sev-critical td { background: color-mix(in srgb, var(--bad) 8%, transparent); }
.wh-kinds { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-weight: normal; }
.isp-pick { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0; }
.hw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.hw-tile { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; border-top: 3px solid var(--border); min-width: 0; }
.hw-tile.good { border-top-color: var(--good); } .hw-tile.warn { border-top-color: var(--warn); } .hw-tile.bad { border-top-color: var(--bad); }
.hw-tile.warn b { color: var(--warn); } .hw-tile.bad b { color: var(--bad); }
.hw-line { width: 100%; height: 36px; display: block; margin: 4px 0 2px; }
.ab-warn { border-left: 4px solid var(--warn); padding: 8px 12px; margin: 8px 0; background: var(--bg); font-size: 13px; }
.ab-rules { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0; } .ab-r { display: inline-flex; align-items: center; gap: 6px; }
.ab-set { margin-top: 12px; } .ab-set textarea { width: 100%; font-family: var(--mono, monospace); } .sec-fixes { padding-left: 18px; } .sec-fixes li { margin: 6px 0; }
.sec-notes { border-left: 4px solid var(--bad); padding: 6px 10px; margin: 8px 0; background: var(--bg); }
.ros-notes { white-space: pre-wrap; max-height: 55vh; overflow: auto; font-size: 12.5px; background: var(--bg); padding: 10px; border-radius: 8px; }
.wl-facts { margin: 2px 0 8px; }
.wl-sig { gap: 6px; flex-wrap: nowrap; } .wl-sig .bar { width: 56px; }
.pill.sec-pill-ok { border-color: var(--good); color: var(--good); }
@media (max-width: 700px) { .sec-list li { grid-template-columns: 52px 1fr; } .sec-list li .muted { display: none; } }
.sec-best { margin-top: 10px; }
.sec-best ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.sec-howto { all: unset; cursor: pointer; color: var(--accent); font-size: 12.5px; font-weight: 600; margin-left: 6px; }
.sec-howto:hover, .sec-howto:focus-visible { text-decoration: underline; }
.sec-fix { margin-top: 6px; padding: 8px 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); }
.sec-fix p { margin: 4px 0; }
.sec-cmd { margin: 6px 0; padding: 8px 10px; border-radius: 6px; background: var(--panel); border: 1px solid var(--border); font-size: 12px;
  white-space: pre-wrap; word-break: break-all; user-select: all; }

/* Security page */
.sec-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
.sec-flags { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sec-flags li { padding: 8px 12px; border-radius: 8px; border-left: 4px solid var(--warn); background: var(--bg); font-size: 13.5px; }
.sec-flags li.flag-bad { border-left-color: var(--bad); }
.linkish { all: unset; cursor: pointer; color: var(--accent); }
.linkish:hover, .linkish:focus-visible { text-decoration: underline; }
.pill.sec-k-login_ok { border-color: var(--good); color: var(--good); }
.pill.sec-k-banned, .pill.sec-k-locked { border-color: var(--info); color: var(--info); }
.pill.sec-k-config_change, .pill.sec-k-remote_session { border-color: var(--accent); color: var(--accent); }
.pill.sec-k-login_failed, .pill.sec-k-mfa_failed, .pill.sec-k-sudo_failed, .pill.sec-k-rate_limited, .pill.sec-k-adoption_rejected, .pill.sec-k-remote_rejected { border-color: var(--bad); color: var(--bad); }
@media (max-width: 700px) { .sec-kpis { grid-template-columns: 1fr; } }
.obs { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.obs h3 { margin: 0; font-size: 15px; }
.obs-grade { display: inline-grid; place-items: center; min-width: 38px; height: 30px; padding: 0 8px; border-radius: 8px; font-weight: 800; font-size: 16px; color: #fff; }
.obs-good { background: var(--good); } .obs-warn { background: var(--warn); } .obs-bad { background: var(--bad); }

/* Alerts page */
.al-h { font-size: 14px; margin: 18px 0 6px; }
.al-kinds { display: grid; gap: 6px; }
.al-kind { align-items: center; }
.al-th { width: 64px; padding: 2px 6px; }

/* community script library */
.lib-bar { margin-bottom: 10px; }
.lib-list { display: grid; gap: 8px; margin-top: 10px; max-height: 60vh; overflow: auto; }
.lib-item { all: unset; box-sizing: border-box; display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.lib-item:hover, .lib-item:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.lib-warn { border-left: 4px solid var(--warn); background: var(--bg); padding: 8px 12px; border-radius: 8px; margin: 8px 0; }
.lib-warn ul { margin: 6px 0; padding-left: 18px; }
.lib-body { max-height: 45vh; overflow: auto; white-space: pre-wrap; }

/* Winbox through TikManager */
.wb-addr { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 6px; margin: 4px 0 8px; }
/* the side panel is narrow: the value gets its own full-width line (wrapping long host names), the buttons go under it */
.wb-addr .mono { flex: 1 1 100%; min-width: 0; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
  user-select: all; font-size: 13px; overflow-wrap: anywhere; }
.wb-addr .btn { padding: 3px 10px; font-size: 12px; }
.wb-secret { letter-spacing: .08em; }
.wb-addr .wb-host { overflow-wrap: normal; word-break: keep-all; }   /* break at the <wbr>s (dots, before the port), not mid-number */

/* router page tabs */
.rtabs { margin: 0 0 12px; }

/* WireGuard port move */
.wg-port-input { max-width: 9em; }
.wg-left { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }

/* "View as" (administrator seeing what a client user sees) */
.viewas-banner { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: #7c3aed; color: #fff; font-weight: 600; font-size: 13px; }
.viewas-banner.hidden { display: none; }
.viewas-banner .btn { background: #fff; color: #5b21b6; border-color: #fff; }

/* UniFi sites */
.u-detail > td { background: color-mix(in srgb, var(--accent, #2563eb) 5%, transparent); padding: 8px 12px 12px; }

/* UniFi / UISP on the network map */
.ub-badge { background: #006fff; color: #fff; border-color: #006fff; font-size: 10.5px; padding: 0 6px; vertical-align: middle; }
.ub-badge.ub-guess { background: transparent; color: #006fff; }
.ub-badge.ub-off { background: #dc2626; border-color: #dc2626; }
.tubnt { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border); display: grid; gap: 8px; }
.tubnt-site { display: grid; gap: 6px; }
.tubnt-devs { display: flex; flex-wrap: wrap; gap: 6px; }
.tubnt-dev { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-left: 3px solid #006fff; border-radius: 8px; padding: 4px 8px; background: var(--panel); }
.tubnt-dev.off { border-left-color: #dc2626; }
.tubnt-dev small { display: block; color: var(--muted); font-size: 11px; }
.tubnt-dev .tic svg { width: 16px; height: 16px; }
.tnode .ub-badge { display: inline-block; width: auto; margin-left: 4px; }

/* UniFi / UISP devices drawn on the network map */
.tubchips { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px; align-items: stretch; }
.tubchip { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-left: 3px solid #006fff; border-radius: 8px; padding: 3px 8px; background: var(--panel); font-size: 12px; text-align: left; }
.tubchip.off { border-left-color: #dc2626; }
.tubchip b { display: block; font-weight: 600; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tubchip small { display: block; color: var(--muted); font-size: 10.5px; }
.tubchip .tic svg { width: 15px; height: 15px; color: #006fff; }
.tub-up { margin-left: auto; color: #b45309; font-weight: 700; }
button.pill.ub-badge { cursor: pointer; font: inherit; font-size: 11px; }

.tempty-nets { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border); }
.tempty-net { border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; background: var(--panel); }