/* kaps-desk shell (NMS chrome, 4.11): minimal top bar, left tree, and an inset
   rounded workspace panel that each feature owns. Dark is the default; the
   other themes are html.light / html.black (user picker, cookie). No inline styles anywhere
   (CSP style-src 'self'). Cards adapt to their own width with container queries. */

/* ---- tokens */
:root {
  color-scheme: dark;
  --bg: #0b0e12;          /* shell: behind the tree and the top bar */
  --bg2: #11161c;         /* workspace surface */
  --card: #171d25;        /* cards on the surface */
  --card2: #1d242e;       /* tiles inside cards */
  --line: #26303d;
  --line2: #2f3b4a;
  --fg: #e6ebf1;
  --muted: #8b97a7;
  --accent: #4cc3ff; --accent-dim: rgba(76, 195, 255, .14); --accent-ink: #04121c;
  --ok: #3ccf7a; --amber: #ffb43c; --red: #ff5a5f; --unknown: #6b7684;
  --warn: var(--amber); --crit: var(--red);
  --radius: 10px; --radius-lg: 14px; --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .25);
  --top-h: 48px; --nav-w: 240px; --bottom-h: 58px; --gutter: 12px;
  --font: system-ui, -apple-system, "Segoe UI", "Liberation Sans", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Liberation Mono", monospace;
}
html.light {
  color-scheme: light;
  --bg: #e6eaef; --bg2: #f5f7fa; --card: #ffffff; --card2: #f0f3f7; --line: #d3dae3; --line2: #c2cbd6;
  --fg: #17202b; --muted: #5d6978;
  --accent: #0a7fc2; --accent-dim: rgba(10, 127, 194, .12); --accent-ink: #ffffff;
  --ok: #1f9d55; --amber: #c7790b; --red: #d6303a; --unknown: #8a94a3;
  --shadow: 0 1px 2px rgba(20, 30, 40, .08), 0 8px 24px rgba(20, 30, 40, .08);
}
html.black {
  color-scheme: dark;
  --bg: #000000; --bg2: #070809; --card: #0e1013; --card2: #15181c; --line: #1f242b; --line2: #2a3038;
  --fg: #eef2f6; --muted: #8e99a8;
  --shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 8px 24px rgba(0, 0, 0, .5);
}

/* ---- base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body { margin: 0; height: 100dvh; font: 14px/1.45 var(--font); background: var(--bg); color: var(--fg);
       display: grid; grid-template-rows: calc(var(--top-h) + env(safe-area-inset-top)) minmax(0, 1fr);
       grid-template-columns: var(--nav-w) minmax(0, 1fr); overflow: hidden; }
a { color: var(--accent); text-decoration: none; }
h1 { font-size: 18px; font-weight: 600; margin: 0; letter-spacing: .01em; }
h1 small { font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 8px; }
h2 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: .01em; }
h2 small { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 6px; }
h3 { font-size: 12px; font-weight: 600; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
h3 small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.muted { color: var(--muted); }
.grow { flex: 1; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic.sm { width: 15px; height: 15px; }
[hidden] { display: none !important; }
.num, .tab-num { font-variant-numeric: tabular-nums; }

/* ---- top bar (global only) */
.top { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; padding: env(safe-area-inset-top) 10px 0 8px;
       background: var(--bg); border-bottom: 1px solid var(--line); z-index: 30; }
.top .tb { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; min-width: 34px; padding: 0 8px;
           border: 0; border-radius: 8px; background: transparent; color: var(--fg); font: inherit; cursor: pointer; }
.top .tb:hover, .top .tb:focus-visible { background: var(--accent-dim); outline: none; }
.top .hamb { display: none; }
.brand { display: inline-flex; align-items: center; gap: 8px; margin: 0 10px 0 4px; font-weight: 700; letter-spacing: .16em; color: var(--fg); font-size: 14px; }
.brand .mark { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), #7d6cff); display: inline-block; }
.searchbtn { flex: 0 1 380px; justify-content: flex-start !important; height: 32px !important; margin: 0 auto;
             color: var(--muted) !important; background: var(--bg2) !important; border: 1px solid var(--line) !important; }
.searchbtn:hover { border-color: var(--line2) !important; color: var(--fg) !important; }
.searchbtn kbd { margin-left: auto; font: 11px var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.badge-link { display: inline-flex; align-items: center; height: 34px; padding: 0 6px; border-radius: 8px; }
.badge-link:hover { background: var(--accent-dim); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.badge.amber { background: color-mix(in srgb, var(--amber) 20%, transparent); color: var(--amber); }
.badge.red { background: var(--red); color: #fff; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--red) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .badge.red { animation: none; } }
.acct { color: var(--muted) !important; }
.acct .avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-dim); color: var(--accent); display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; }

/* popover menus (top bar) */
.pop { position: fixed; margin: 0; inset: auto; min-width: 210px; padding: 6px; border: 1px solid var(--line);
       border-radius: var(--radius); background: var(--card); color: var(--fg); box-shadow: var(--shadow); }
.pop a, .pop button.item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 6px; color: var(--fg);
                           background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; }
.pop a:hover, .pop button.item:hover, .pop a:focus-visible, .pop button.item:focus-visible { background: var(--accent-dim); color: var(--accent); outline: none; }
.pop-head { display: block; padding: 6px 10px 8px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.pop-head b { display: block; color: var(--fg); font-size: 13px; }
.pop form { margin: 0; }

/* ---- left tree */
.tree { grid-row: 2; display: flex; flex-direction: column; min-height: 0; background: var(--bg); border-right: 1px solid var(--line); z-index: 25; }
.tree-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px; }
.tsec { margin-bottom: 2px; position: relative; }
.tree-sep { border: 0; border-top: 1px solid var(--line); margin: 8px 10px; }
.tsec > .tlink, .tsec > .thead { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border-radius: 8px;
                                 color: var(--fg); background: transparent; border: 0; font: inherit; font-weight: 500; cursor: pointer; text-align: left; }
.tsec > .tlink:hover, .tsec > .thead:hover { background: var(--accent-dim); }
.tsec.on > .tlink, .tsec.on > .thead { color: var(--accent); }
.tsec.on > .tlink { background: var(--accent-dim); }
.tsec .lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsec .chev { width: 14px; height: 14px; color: var(--muted); transition: transform .15s; }
.tsec.open .chev { transform: rotate(90deg); }
.kids { display: none; padding: 2px 0 6px 0; }
.tsec.open .kids { display: block; }
.kids a { display: block; padding: 7px 10px 7px 38px; border-radius: 8px; color: var(--muted); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kids a:hover { color: var(--fg); background: var(--accent-dim); }
.kids a.on { color: var(--accent); background: var(--accent-dim); font-weight: 500; }
.tree-foot { padding: 8px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tree-foot .ver { font: 11px var(--mono); color: var(--muted); padding-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-backdrop { display: none; }


/* ---- workspace panel (the feature owns this) */
.ws { grid-row: 2; grid-column: 2; min-height: 0; min-width: 0; margin: var(--gutter) var(--gutter) var(--gutter) 0;
      background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius-lg);
      display: flex; flex-direction: column; overflow: hidden; }
.ws-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 12px 18px; border-bottom: 1px solid var(--line); flex: none;
           background: var(--bg2); }
.ws-title { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--accent); }
.crumbs .sep { opacity: .6; }
.ws-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--card); border: 1px solid var(--line); border-radius: 9px; }
.ws-tabs a, .ws-tabs button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 6px; border: 0;
                              color: var(--muted); background: transparent; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.ws-tabs a:hover, .ws-tabs button:hover { color: var(--fg); }
.ws-tabs a.on, .ws-tabs button.on, .ws-tabs button.is-on { color: var(--fg); background: var(--bg2); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.ws-tabs .n { font-size: 11px; color: var(--muted); }
.ws-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ws-actions .btn, .ws-actions .pill { margin: 0; }
.ws-body { flex: 1; min-height: 0; overflow: auto; padding: 16px 18px 20px; }
.ws-bleed .ws-body { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ws-bleed .ws-head { padding: 8px 14px; }
.ws-note { color: var(--muted); font-size: 13px; margin: 0 0 12px; }

/* ---- cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
        container-type: inline-size; min-width: 0; scroll-margin-top: 12px; }
.card + .card { margin-top: 14px; }
.card.narrow { max-width: 480px; }
.card.is-stale { border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fresh { font: 12px var(--mono); color: var(--muted); }
.fresh.stale { color: var(--amber); }

.dash { display: grid; gap: 14px; grid-template-columns: 1fr; }
.dash .card + .card { margin-top: 0; }
@media (min-width: 760px) { .dash { grid-template-columns: 1fr 1fr; } .dash .wide { grid-column: 1 / -1; } }
@media (min-width: 1360px) { .dash { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }

/* alarms */
.alarms { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.alarms a, .alarms .txt-only { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: baseline;
            padding: 9px 12px; border-radius: 8px; color: var(--fg); border-left: 4px solid; background: var(--card2); }
.alarms li { border-radius: 8px; }
.alarms .red a, .alarms .red .txt-only { border-color: var(--red); background: color-mix(in srgb, var(--red) 12%, var(--card2)); }
.alarms .amber a, .alarms .amber .txt-only { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 10%, var(--card2)); }
.alarms .role { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.alarms .txt { min-width: 0; overflow-wrap: anywhere; }
@container (max-width: 420px) { .alarms a { grid-template-columns: auto 1fr; } .alarms .txt { grid-column: 1 / -1; } }
.calm { margin: 0; padding: 18px 12px; text-align: center; color: var(--ok); border: 1px dashed color-mix(in srgb, var(--ok) 40%, transparent); border-radius: 8px; }

/* events */
.events { list-style: none; margin: 0; padding: 0; max-height: 460px; overflow-y: auto; }
.ev { display: grid; grid-template-columns: 112px 92px 1fr; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
.ev time { font-family: var(--mono); color: var(--muted); font-size: 12px; }
.ev .kind { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-top: 1px; }
.ev .txt { min-width: 0; overflow-wrap: anywhere; }
.ev .site { font-weight: 600; letter-spacing: .02em; }
.ev.red .txt { color: var(--red); } .ev.amber .txt { color: var(--amber); } .ev.green .txt { color: var(--ok); }
@container (max-width: 520px) { .ev { grid-template-columns: 1fr auto; } .ev .txt { grid-column: 1 / -1; } }
.events .more { list-style: none; text-align: center; padding: 10px; }

/* status tiles */
.tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.tile { display: block; padding: 12px 14px; border-radius: 8px; background: var(--card2); border: 1px solid var(--line); color: var(--fg); }
a.tile:hover { border-color: var(--accent); }
.tile h3 a { color: inherit; }
.tile h3 a:hover, .row-line a.sys:hover { color: var(--accent); }
.row-line a.sys { font-weight: 600; color: var(--fg); }
.tile .big { font-size: 26px; font-weight: 600; margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.tile .big small { font-size: 13px; color: var(--muted); font-weight: 400; margin-left: 4px; }
.tile p { margin: 4px 0; }
.tile dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 8px 0 0; font-size: 13px; }
.tile dt { color: var(--muted); } .tile dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.row-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.ok-txt { color: var(--ok); } .red-txt { color: var(--red); } .amber-txt { color: var(--amber); }

.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.5; }
.pill.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); }
.pill.amber { color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, transparent); }
.pill.red { color: #fff; background: var(--red); }
.pill.orange { color: #fff; background: color-mix(in srgb, var(--amber) 70%, var(--red)); }

/* chips (filters) */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips a { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg); font-size: 13px; }
.chips a:hover { border-color: var(--line2); }
.chips a.on { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

/* tables: cards below 720px of card width */
.fleet-meta { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.table-wrap { overflow-x: auto; }
table.fleet { width: 100%; border-collapse: collapse; font-size: 13px; }
.fleet th { text-align: left; font-weight: 600; color: var(--muted); padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap;
            font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.fleet th a { color: inherit; } .fleet th a.on { color: var(--accent); }
.fleet td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; font-variant-numeric: tabular-nums; }
.fleet tbody tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.fleet td.pkg { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.fleet tr.inactive td { opacity: .55; }
@container (max-width: 720px) {
  .fleet thead { display: none; }
  .fleet, .fleet tbody, .fleet tr, .fleet td { display: block; width: 100%; }
  .fleet tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .fleet td { border: 0; padding: 2px 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
  .fleet td::before { content: attr(data-l); flex: 0 0 76px; color: var(--muted); font-size: 12px; }
  .fleet td:not([data-l]) { display: block; }
  .fleet td.wide-only { display: none; }
}

/* forms */
.search-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.search-row input[name="q"] { flex: 1 1 220px; }
.check { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: 13px; }
form.inline { display: inline; margin: 0; }
.btn.danger { background: var(--red); color: #fff; }
.stack { display: grid; gap: 10px; max-width: 360px; }
.stack label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
input, select, textarea { padding: 8px 11px; background: var(--bg2); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-dim); border-color: var(--accent); }
.btn, button[type="submit"] { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: var(--accent); color: var(--accent-ink); border: 0;
       border-radius: var(--radius-sm); font: inherit; font-weight: 600; cursor: pointer; line-height: 1.3; }
.btn:hover, button[type="submit"]:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--fg); font-weight: 500; }
.btn.ghost:hover { border-color: var(--line2); background: var(--accent-dim); filter: none; }
.btn.red { background: var(--red); color: #fff; }
.btn.blue { background: #1f6feb; color: #fff; }
.btn.green { background: #2f8f4e; color: #fff; }
.btn.small, .btn.tiny, button.tiny { padding: 3px 9px; font-size: 12px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dlg-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 40; }
dialog.acct-dlg { position: fixed; inset: 0; margin: auto; z-index: 41; width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px); overflow: auto; padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: var(--radius); background: var(--card2); color: var(--fg);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 24px 64px rgba(0, 0, 0, .6), 0 0 32px color-mix(in srgb, var(--accent) 18%, transparent); }
dialog.acct-dlg::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(2px); }
dialog.acct-dlg[open] { animation: dlg-in .14s ease-out; }
@keyframes dlg-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.acct-dlg[open] { animation: none; } }
dialog.acct-dlg h2 { margin: 0 0 10px; }
.acct-info { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 14px; }
.acct-info dt { color: var(--muted); }
.acct-info dd { margin: 0; overflow-wrap: anywhere; }
.acct-form { display: flex; flex-direction: column; gap: 10px; }
.acct-form .btn-row .btn, .acct-form .btn-row button { margin: 0; }

/* ---- search dialog (ctrl+k) */
dialog.search-dlg { position: fixed; inset: 0; margin: 8vh auto auto; width: min(640px, calc(100vw - 24px)); padding: 0; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--card); color: var(--fg); box-shadow: var(--shadow); overflow: hidden; }
dialog.search-dlg::backdrop { background: rgba(0, 0, 0, .5); backdrop-filter: blur(2px); }
.search-dlg form { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); margin: 0; }
.search-dlg input { flex: 1; border: 0; background: transparent; font-size: 16px; padding: 6px 0; }
.search-dlg input:focus { outline: none; }
.search-dlg .results { max-height: 60vh; overflow: auto; padding: 6px; }
.sr-group { padding: 8px 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.sr { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; color: var(--fg); }
.sr:hover, .sr:focus-visible { background: var(--accent-dim); outline: none; }
.sr .ic { color: var(--muted); }
.sr .sub { color: var(--muted); font-size: 12px; }
.sr .k { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.sr-empty { padding: 18px; text-align: center; color: var(--muted); }

/* ---- right drawer (alarms) */
.drawer-r { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(420px, 92vw); height: 100dvh; max-height: none; padding: 0; border: 0;
            border-left: 1px solid var(--line); background: var(--bg2); color: var(--fg); overflow: hidden; display: none; flex-direction: column; }
.drawer-r:popover-open { display: flex; }
.drawer-r::backdrop { background: rgba(0, 0, 0, .4); }
.drawer-r .dr-head { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; border-bottom: 1px solid var(--line); }
.drawer-r .dr-body { flex: 1; overflow: auto; padding: 12px 14px; }
.drawer-r .dr-body .card-head h2 { font-size: 13px; }
.x { width: 34px; height: 34px; border: 0; background: transparent; position: relative; cursor: pointer; border-radius: 8px; color: var(--fg); }
.x:hover { background: var(--accent-dim); }
.x::before, .x::after { content: ""; position: absolute; left: 9px; top: 16px; width: 16px; height: 2px; background: currentColor; }
.x::before { transform: rotate(45deg); } .x::after { transform: rotate(-45deg); }

/* ---- bottom tab bar (phones) */
.bottom { display: none; }

/* ---- responsive chrome */
@media (max-width: 1023px) {
  body { grid-template-columns: minmax(0, 1fr); }
  .top .hamb { display: inline-flex; }
  .tree { position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); transform: translateX(-102%); transition: transform .18s ease; z-index: 60;
          box-shadow: none; }
  body.nav-open .tree { transform: none; box-shadow: var(--shadow); }
  .tree-scroll { padding-top: calc(8px + env(safe-area-inset-top)); }
  .tree-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .18s; }
  body.nav-open .tree-backdrop { opacity: 1; pointer-events: auto; }
  .ws { grid-column: 1; margin-left: var(--gutter); }
  .searchbtn { flex: 0 0 auto; margin-left: auto; }
  .searchbtn .q, .searchbtn kbd { display: none; }
}
@media (max-width: 639px) {
  body { grid-template-rows: calc(var(--top-h) + env(safe-area-inset-top)) minmax(0, 1fr) calc(var(--bottom-h) + env(safe-area-inset-bottom)); }
  .ws { margin: 0; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }
  .ws-head { padding: 10px 12px; }
  .ws-body { padding: 12px; }
  .bottom { grid-row: 3; grid-column: 1; display: flex; background: var(--bg); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .bottom a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font-size: 11px; font-weight: 600; }
  .bottom a .ic { width: 20px; height: 20px; }
  .bottom a.on { color: var(--accent); }
  .badge-link .badge { padding: 3px 8px; }
  .badge-link .badge .t { display: none; }
  .brand .word { display: none; }
}

/* ---- View Desk viewer: fills the workspace */
.vbar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 6px 12px; background: var(--card); border-bottom: 1px solid var(--line); font-size: 13px; }
.vbar .btn { padding: 5px 12px; }
.vbar select { padding: 4px 8px; }
.vtitle b { color: var(--accent); }
.vstats { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 12px; min-height: 22px; border-bottom: 1px solid var(--line); }
.vstats .mon { font: 12px/1.3 var(--mono); color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 5px;
               padding: 2px 8px; white-space: nowrap; width: 26ch; box-sizing: content-box; overflow: hidden; font-variant-numeric: tabular-nums; }
.vstats .mon b { color: var(--accent); font-weight: 600; }
.vstats .mon.dark { color: var(--muted); }
.vstage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #000; }
.vtile { position: absolute; background: #000; border: 1px solid #222; box-sizing: border-box; }
.vtile video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.vtile { cursor: zoom-in; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.vstage.focus .vtile { display: none; }
.vstage.focus .vtile.on { display: block; cursor: zoom-out; border: 0; }
body.vfocus .top, body.vfocus .tree, body.vfocus .bottom, body.vfocus .vbar, body.vfocus .vstats, body.vfocus .ws-head { display: none; }
body.vfocus { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); background: #000; }
body.vfocus .ws { grid-row: 1; grid-column: 1; margin: 0; border: 0; border-radius: 0; }

/* ---- network colours (pills, chips) */
.pill.net-green { color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); }
.pill.net-yellow { color: #e8d44d; background: color-mix(in srgb, #e8d44d 15%, transparent); }
.pill.net-orange { color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, transparent); }
.pill.net-red { color: #fff; background: var(--red); }
.pill.net-unknown { color: var(--muted); border: 1px solid var(--line); }
.chips a.net-red:not(.on) { color: var(--red); }
.chips a.net-orange:not(.on) { color: var(--amber); }
.small { font-size: 12px; }

/* host detail */
.host-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-bottom: 14px; }
.host-grid .tile dd { overflow-wrap: anywhere; }
.host-grid .pkg { font-family: var(--mono); font-size: 12px; }
table.mini { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 13px; }
table.mini th, table.mini td { text-align: left; padding: 4px 10px 4px 0; border-bottom: 1px solid var(--line); }
table.mini th { color: var(--muted); font-weight: 500; }
table.mini tr.inactive td { opacity: .55; }
h3.sect { margin: 18px 0 8px; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--fg); }
.sect-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0 8px; }
.sect-head h3.sect { margin: 0; }
.charts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.chart { margin: 0; padding: 10px 12px; background: var(--card2); border: 1px solid var(--line); border-radius: 8px; }
.chart figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.chart .ct { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.chart .now { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart .now-sep { color: var(--muted); font-weight: 400; margin: 0 .3em; }
.chart .plot { display: grid; grid-template-columns: 26px minmax(0, 1fr) 26px; align-items: stretch; }
.chart .rail { display: flex; flex-direction: column; justify-content: space-between; font-size: 9px; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; pointer-events: none; }
.chart .rail span { height: 0; display: flex; align-items: center; overflow: visible; white-space: nowrap; }
.chart .rail:first-child span { justify-content: flex-start; padding-left: 1px; }
.chart .rail:last-child span { justify-content: flex-end; padding-right: 1px; }
.chart svg { display: block; width: 100%; height: 110px; overflow: visible; }
.chart polyline { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.chart .grid { stroke: var(--line); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.chart .tick { stroke: var(--muted); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.chart .thr { stroke-dasharray: 6 4; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .7; }
.chart .s1 { color: var(--accent); stroke: var(--accent); }
.chart .s2 { color: var(--amber); stroke: var(--amber); }
.chart .s3 { color: var(--ok); stroke: var(--ok); }
.chart .s4 { color: var(--red); stroke: var(--red); }
.chart .axis { display: flex; justify-content: space-between; margin: 3px 26px 0; font-size: 11px; color: var(--muted); }
.chart .legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 0; font-size: 12px; }
.chart .legend b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg); }
.chart .legend .s1::before, .chart .legend .s2::before, .chart .legend .s3::before, .chart .legend .s4::before { content: ""; display: inline-block; width: 10px; height: 3px; margin-right: 5px; vertical-align: middle; background: currentColor; }

/* Network console: phone gets the list card unless the map is forced */
.net-phone { display: none; margin: 12px; }
@media (max-width: 639px) {
  .ws-net:not(.force-map) .ws-body { overflow: auto; display: block; }
  .ws-net:not(.force-map) .net-phone { display: block; }
  .ws-net:not(.force-map) .netmap { display: none; }
}

/* Network forms (Net Device edit, Network settings) */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 16px; margin-top: 10px; }
.form-grid .field { display: grid; gap: 4px; align-content: start; }
.form-grid .field > label { font-size: 13px; color: var(--muted); }
.form-grid .field input:not([type="checkbox"]), .form-grid .field select { width: 100%; }
.form-grid .field-wide { grid-column: 1 / -1; }
.field-note { color: var(--muted); font-size: 12px; margin: 2px 0; }
.other-ip-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.autofill-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.set-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.set-row label { flex: 1 1 260px; }
.set-row input:not([type="checkbox"]) { flex: 0 1 320px; }
.cred-table input, .cred-table select { width: 100%; min-width: 90px; }
.cred-table td .btn, .cred-table td button { padding: 5px 10px; }
.site-group h3 { margin: 16px 0 4px; font-size: 14px; }
.dev-site, .dev-kind { margin: 0; }
.dev-site > summary, .dev-kind > summary { cursor: pointer; padding: 8px 0; display: flex; align-items: center; gap: 8px; }
.dev-kind { margin: 0 0 8px 18px; }
.dev-kind > summary { font-size: 13px; }
.fleet tr.is-saved td { background: color-mix(in srgb, var(--ok) 14%, transparent); }

/* ---- AI pages: alerts, identities, teach, watchlist, plates, health */
.mono { font-family: var(--mono); font-size: 12px; }
.plain { list-style: none; margin: 0; padding: 0; } .plain li { padding: 4px 0; border-bottom: 1px solid var(--line); }
.plain li:last-child { border-bottom: 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin: 0; } .kv dd { margin: 0; }
.thumb { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 8px; background: var(--card2); border: 1px solid var(--line); }
.thumb.md { width: 128px; height: 128px; } .thumb.lg { width: 140px; height: 140px; } .thumb.xl { width: 220px; height: 220px; }
.thumb.none { display: block; background: repeating-linear-gradient(45deg, var(--card2) 0 8px, var(--card) 8px 16px); }
.pill.cls { background: var(--accent-dim); color: var(--accent); text-transform: capitalize; }
.pill.cls.person { color: #ffb43c; background: rgba(255, 180, 60, .15); }
.pill.cls.vehicle { color: #7dd3fc; background: rgba(125, 211, 252, .15); }
.pill.cls.animal { color: #a3e635; background: rgba(163, 230, 53, .15); }
.pill.cls.bag { color: #f0abfc; background: rgba(240, 171, 252, .15); }
.pill.live { color: #fff; background: #d33; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .pill.live { animation: none; } }
.pill.muted-pill { color: var(--muted); background: var(--card2); border: 1px solid var(--line); font-weight: 400; }
.pill.clip { color: var(--fg); background: var(--card2); border: 1px solid var(--accent); }
.alarm-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.alarm { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 10px; border-radius: 8px;
         background: var(--card2); border: 1px solid var(--line); border-left-width: 4px; }
.alarm.live { border-left-color: var(--red); }
.alarm.dz-danger { border-left-color: var(--red); background: color-mix(in srgb, var(--red) 10%, var(--card2)); }
.alarm.dz-suspicious { border-left-color: var(--amber); }
.alarm.acked { opacity: .65; }
.alarm-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.alarm-title { font-weight: 600; color: var(--fg); font-size: 15px; }
.alarm-meta { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.alarm-cap { margin: 6px 0 0; font-size: 14px; } .alarm-cap.big { font-size: 16px; margin: 10px 0; }
.alarm-act .btn { margin: 0; }
.cam { color: inherit; }
.cams { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.clip { display: block; width: 100%; max-width: 960px; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; }
.strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.still-fig { margin: 0; flex: 0 0 auto; text-align: center; font-size: 12px; color: var(--muted); }
.still-fig figcaption { margin-top: 4px; } .still-fig form { display: block; margin-top: 2px; }
.id-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-top: 10px; }
.id-tile { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 8px; border-radius: 8px; background: var(--card2);
           border: 1px solid var(--line); color: var(--fg); align-items: start; }
.id-tile.watch { border-color: var(--red); } .id-tile.state-rejected, .id-tile.state-merged { opacity: .5; }
.id-tile.state-confirmed { border-left: 4px solid var(--ok); }
.id-body b { display: inline-block; margin-right: 6px; } .id-body p { margin: 4px 0 0; font-size: 13px; }
.id-body .btn-row { margin-top: 6px; }
.id-detail { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.id-facts dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 8px 0 0; font-size: 14px; }
.id-facts dt { color: var(--muted); } .id-facts dd { margin: 0; }
.teach-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.teach-form { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 8px; background: var(--card2); border: 1px solid var(--line); }
.teach-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.teach-form input, .teach-form textarea { width: 100%; }
.teach-form .btn, .teach-form button { align-self: flex-start; margin: 0; }
.teach-form p { margin: 0; font-size: 12px; }
.tiny-in { width: 110px; padding: 3px 6px; }
.plate-add input { flex: 1 1 160px; }
.fleet td.cap { max-width: 420px; }
.fleet td input[name="notes"] { width: 160px; padding: 3px 6px; }
.site-head { margin: 14px 0 4px; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--fg); }
@media (max-width: 639px) {
  .alarm { grid-template-columns: auto 1fr; } .alarm-act { grid-column: 1 / -1; }
  .thumb.lg { width: 96px; height: 96px; } .thumb.xl { width: 160px; height: 160px; }
  .id-grid { grid-template-columns: 1fr; }
}
/* AI chat */
.chat-form { display: flex; gap: 8px; margin: 6px 0 10px; }
.chat-form input { flex: 1; padding: 10px 12px; font-size: 15px; border-radius: 8px; }
.chat-form .btn { margin: 0; }
.chat-q { margin: 0 0 8px; color: var(--muted); font-style: italic; }
.chat-a { font-size: 16px; line-height: 1.55; white-space: pre-wrap; }
.chat-a .cite { padding: 0 6px; border-radius: 6px; background: var(--accent-dim); font-size: 13px; white-space: nowrap; }
.chat-raw pre { font-size: 12px; white-space: pre-wrap; color: var(--muted); max-height: 320px; overflow: auto; }

/* ---- bare pages (login / password): same tokens, centred card */
body.bare { display: flex; align-items: flex-start; justify-content: center; overflow: auto; }
.bare main { width: min(380px, calc(100vw - 32px)); margin: 16vh 0 40px; padding: 26px 28px; background: var(--card); border: 1px solid var(--line);
             border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.bare h1.brand { display: flex; justify-content: center; margin: 0 0 18px; font-size: 20px; letter-spacing: .18em; }
.bare label { display: block; margin: 10px 0; font-size: 13px; color: var(--muted); }
.bare input { display: block; width: 100%; margin-top: 4px; }
.bare button[type="submit"], .bare .btn { margin-top: 12px; }
.bare form.login button[type="submit"] { width: 100%; justify-content: center; }
.bare .err { color: var(--red); margin: 0 0 8px; }
.bare .ok { color: var(--ok); margin: 0 0 8px; }
.bare .btn.pwa { display: flex; width: 100%; justify-content: center; margin-top: 18px; }
.bare .pwa-ios { margin: 18px 0 0; font-size: 13px; }
.bare .pwa-x { margin: 0 0 0 6px; padding: 0; background: none; border: 0; color: var(--accent); text-decoration: underline; font: inherit; cursor: pointer; }
.bare dialog.pwchange { position: fixed; inset: 0; margin: auto; max-width: 360px; width: calc(100% - 32px); padding: 24px 28px; background: var(--card);
  color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .6); }
.bare dialog.pwchange h2 { font-size: 17px; margin: 0 0 8px; }

/* Fleet > Packages & Deploy (control plane) */
.fleet-pkgs .fleet-pkg-select { max-width: 320px; margin-bottom: 6px; }
.fleet-pkgs .fleet-pkg-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.fleet-pkgs .fleet-pkg-actions .btn { margin: 0; }
.fleet-pkgs .fleet-pkg-hint { color: var(--muted); font-family: var(--mono); font-size: 11px; margin-top: 2px; }
.fleet-pkgs .fleet-pkg-cell { min-width: 340px; }
dialog.fleet-dlg p { margin: 0 0 14px; overflow-wrap: anywhere; }
.fleet-pkgs .fleet-status { white-space: normal; }
.fleet-pkgs .fleet-sys-table td:last-child { min-width: 150px; }
/* Fleet > Sites (Live View twin) */
.live-ic { display: inline-flex; align-items: center; vertical-align: middle; margin-right: 6px; color: var(--muted); }
.live-ic:hover { color: var(--accent); }
.sites-table .mono { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; }
.swatch { vertical-align: middle; }
.charts-sites { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.chart svg.swatch { display: inline-block; width: 10px; height: 4px; vertical-align: middle; margin-right: 4px; }
/* Security forms (Users / Certificates / Tokens / Network access) */
.acct-form > label:not(.check) { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.acct-form textarea { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; min-height: 120px; }
dialog.acct-dlg.wide { width: min(760px, calc(100vw - 24px)); }
.sec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.sec-kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.sec-kv dt { color: var(--muted); } .sec-kv dd { margin: 0; overflow-wrap: anywhere; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inline-form input[type=text] { padding: 5px 8px; }
.btn.red { background: var(--red); color: #fff; }
.btn.sm { padding: 2px 8px; font-size: 12px; }
details.card > summary { cursor: pointer; list-style: revert; margin: -4px 0; }
details.card[open] > summary { margin-bottom: 10px; }
.sec-grid h4 { margin: 0 0 4px; }
.tok-plain { display: inline-block; padding: 8px 10px; background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; overflow-wrap: anywhere; user-select: all; }

/* ---- Sites editor (control-plane Phase 2): color picker, trigger chips, contacts ---- */
.graph-swatch { display: inline-flex; width: 18px; height: 18px; padding: 3px; border: 1.5px solid transparent; border-radius: 50%;
  background: transparent; flex: 0 0 auto; cursor: pointer; box-sizing: border-box; }
.graph-swatch::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--swatch, var(--muted)); }
.graph-swatch.is-on { border-color: var(--fg); }
.graph-color-menu .graph-swatch.is-used { border-color: var(--muted); }
.graph-color-menu .graph-swatch.is-dup { border-color: var(--red); }
.graph-color-menu .graph-swatch.is-on, .graph-color-toggle .graph-swatch.is-on { border-width: 2px; border-color: var(--ok); }
.graph-color-menu .graph-swatch.is-on.is-dup, .graph-color-toggle .graph-swatch.is-on.is-dup { border-color: var(--red); }
.graph-color-toggle, .trigger-picker-toggle { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 32px 6px 10px;
  border: 1px solid var(--line); background: var(--card2, var(--bg2)); color: var(--fg); border-radius: 6px; cursor: pointer; list-style: none; position: relative; }
.graph-color-toggle::-webkit-details-marker, .trigger-picker-toggle::-webkit-details-marker { display: none; }
.graph-color-toggle::marker, .trigger-picker-toggle::marker { content: ""; }
.graph-color-toggle::after, .trigger-picker-toggle::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px;
  border-right: 1.5px solid var(--fg); border-bottom: 1.5px solid var(--fg); transform: translateY(-70%) rotate(45deg); }
.graph-color-picker[open] .graph-color-toggle::after, .trigger-picker[open] .trigger-picker-toggle::after { transform: translateY(-20%) rotate(-135deg); }
.graph-color-menu { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; margin-top: 8px; padding: 12px;
  border: 1px solid var(--line); background: var(--card); border-radius: 6px; }
.graph-color-menu .graph-swatch { width: 100%; height: auto; aspect-ratio: 1; padding: 15%; }
.trigger-picker-field { min-width: 0; }
.trigger-picker { display: block; min-width: 0; max-width: 100%; }
.trigger-picker-summary { display: block; min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trigger-picker-menu { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding: 12px; border: 1px solid var(--line); background: var(--card); border-radius: 6px; }
.trigger-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 12px; border: 1px solid var(--line);
  background: var(--card2, var(--bg2)); color: var(--muted); border-radius: 999px; font: inherit; font-size: 13px; line-height: 20px; cursor: pointer; }
.trigger-chip input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.trigger-chip.is-on, .trigger-chip:has(input:checked) { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.trigger-chip-mark { width: 7px; height: 7px; flex: 0 0 auto; transform: rotate(45deg); background: var(--ok); }
.trigger-chip-mark.is-pending { background: var(--unknown); }
.trigger-chip-all-on { background: var(--ok); color: #fff; border-color: var(--ok); }
.trigger-chip-all-off { background: var(--red); color: #fff; border-color: var(--red); }
.contact-card { line-height: 20px; min-height: 20px; }
.contact-card div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-grid .field-wide.btn-row { grid-column: 1 / -1; }
.sync-mode { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin: 0 0 10px; display: grid; gap: 6px; }
.sync-mode legend { color: var(--muted); font-size: 13px; padding: 0 4px; }
.sync-mode .check { align-items: flex-start; }
.sync-log { height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); padding: 8px 10px; font-size: 12.5px; line-height: 18px; margin-bottom: 10px; }
.sync-log-line { white-space: pre-wrap; overflow-wrap: anywhere; }
.sync-log-line.is-ok { color: var(--ok); }
.sync-log-line.is-error { color: var(--red); }
.sync-log-line.is-muted { color: var(--muted); }
.trigger-chip.is-site-on .trigger-chip-mark { background: var(--ok); }
.form-grid .form-title { margin: 8px 0 0; font-size: 14px; color: var(--muted); font-weight: 600; border-top: 1px solid var(--line); padding-top: 10px; }
/* Systems › Magma GPU slots */
.sys-gpus { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 14px; }
.sys-gpus .field-note { grid-column: 1 / -1; }
.sys-gpu { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--card2); display: grid; gap: 8px; }
.sys-gpu-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sys-gpu-head select { width: auto; min-width: 90px; }
.sys-gpu-head .check { margin-left: auto; }
.sys-gpu-facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.sys-gpu-facts .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-counts { display: flex; gap: 14px; font-weight: 600; }
.sync-counts span:empty { display: none; }
.sync-removals { margin: 4px 0 10px; padding-left: 18px; max-height: 30vh; overflow: auto; }
.btn-row .ok-txt { margin: 0; align-self: center; }
.pop-sub { display: block; padding: 6px 10px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.pop button.item.is-current { color: var(--accent); }
.pop-check { margin-left: auto; font-size: 12px; }

/* ---- Settings (registry groups): label + help left, control right */
.sreg-card { max-width: 1100px; }
.sreg-search input { width: 220px; }
.sreg-h { margin: 18px 0 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.sreg-row { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 6px 24px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.sreg-row:last-of-type { border-bottom: 0; }
.sreg-row.is-target { background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 6px; }
.sreg-text label, .sreg-text > a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--fg); }
.sreg-dot { width: 7px; height: 7px; border-radius: 50%; background: transparent; border: 1px solid transparent; flex: none; }
.is-changed .sreg-dot, .field-note .sreg-dot { background: var(--accent); border-color: var(--accent); display: inline-block; }
.field-note .sreg-dot { vertical-align: middle; margin: 0 2px; }
.sreg-help { margin: 4px 0 0; color: var(--fg); opacity: .82; font-size: 13px; line-height: 19px; max-width: 70ch; }
.sreg-meta { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.sreg-ctl { display: grid; gap: 6px; justify-items: stretch; padding-top: 2px; }
.sreg-ctl input:not([type="checkbox"]), .sreg-ctl select, .sreg-ctl textarea { width: 100%; }
.sreg-ctl textarea { font-family: var(--mono); font-size: 12px; min-height: 64px; resize: vertical; }
.sreg-ctl input:disabled, .sreg-ctl select:disabled, .sreg-ctl textarea:disabled { opacity: .7; }
.sreg-check { font-size: 14px; color: var(--fg); min-height: 36px; }
.sreg-check input { width: 18px; height: 18px; }
.sreg-reset { justify-self: start; padding: 3px 9px; font-size: 12px; }
.sreg-actions { position: sticky; bottom: 0; margin: 10px -16px -14px; padding: 12px 16px; background: var(--card); border-top: 1px solid var(--line); }
.sreg-val { justify-items: end; }
@media (max-width: 760px) {
  .sreg-row { grid-template-columns: 1fr; }
  .sreg-search input { width: 100%; }
}

/* ---- Systems › Vents editor (ported from Caldera vent_edit; desk tokens) */
.vent-checks { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.vent-optional { color: var(--muted); font-size: 12px; }
.vent-monitors { grid-column: 1 / -1; display: grid; gap: 14px; margin: 8px 0 0; width: 100%; }
.vent-monitor { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card2); padding: 12px 12px 8px; }
.vent-monitor-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.vent-monitor-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: start; }
.vent-monitor-row > .field { flex: 0 0 auto; min-width: 0; }
.vent-monitor-title { margin: 0 0 6px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.vent-primary-ui-control { display: flex; align-items: center; gap: 6px; min-height: 2.25rem; margin: 0; }
.vent-primary-ui-control input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; }
.vent-gpu-rows { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; width: 100%; }
.vent-gpu-row { display: grid; grid-template-columns: minmax(14rem, 1.6fr) minmax(12rem, 1.4fr) minmax(7rem, .8fr) minmax(9rem, 1fr); gap: 8px 12px; align-items: end; }
.vent-gpu-row .field { margin: 0; min-width: 0; }
.vent-gpu-row .field label { font-size: 11px; letter-spacing: .03em; color: var(--muted); }
.vent-gpu-row input { width: 100%; }
#horizon-ui-edit, #horizon-wall-mosaics { grid-column: 1 / -1; width: 100%; min-width: 0; }
.vent-hui-monitors { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; width: 100%; }
.vent-hui-monitor { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card2); width: 100%; }
.vent-hui-mon-title { margin: 0 0 8px; }
.vent-hui-monitor .vent-monitor-head { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.vent-hui-row-a, .vent-hui-row-b { display: grid; gap: 8px 12px; align-items: end; margin: 0; width: 100%; }
.vent-hui-row-a { grid-template-columns: minmax(8rem, 1fr) minmax(16rem, 2.2fr) minmax(7rem, .9fr) minmax(5rem, .7fr); }
.vent-hui-row-b { grid-template-columns: 6.5rem 6.5rem minmax(14rem, 1.5fr) minmax(11rem, 1.2fr); }
.vent-hui-row-a .field, .vent-hui-row-b .field { display: grid; gap: 4px; min-width: 0; }
.vent-hui-row-a .field label, .vent-hui-row-b .field label { font-size: 12px; color: var(--muted); }
.vent-hui-row-a input, .vent-hui-row-b input, .vent-hui-row-b select { width: 100%; }
.vent-hui-format-val { color: var(--muted); font-size: 12px; margin-left: 6px; }
.vent-canvas-builder { grid-column: 1 / -1; margin: 8px 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card2); width: 100%; }
.vent-canvas-title { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vent-canvas-hint { color: var(--muted); font-size: 12px; margin: 0; }
.vent-canvas-workspace { overflow-x: auto; overflow-y: hidden; margin-top: 10px; padding: 10px; min-height: 440px; width: 100%; background: #0a0d12; border-radius: var(--radius-sm); display: block; }
html.light .vent-canvas-workspace { background: #1a2330; }
.vent-canvas-stage { position: relative; min-width: 280px; min-height: 160px;
  background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 16px 16px,
              linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 16px 16px; }
.vent-canvas-stage.is-invalid { outline: 2px solid var(--red); }
.vent-canvas-bbox { position: absolute; border: 2px solid #fff; pointer-events: none; z-index: 1; }
.vent-canvas-tile { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; border: 0; outline: none;
  background: rgba(61, 139, 253, .35); color: #e8eef6; font-size: 12px; font-weight: 600; cursor: grab; user-select: none; }
.vent-canvas-tile.gpu-2 { background: rgba(94, 207, 138, .35); }
.vent-canvas-tile.is-island { background: rgba(255, 90, 95, .45); }
.vent-wall-mosaic { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card2); padding: 10px 12px; margin: 0 0 10px; }
.vent-wall-mosaic-title { margin: 0 0 8px; }
.vent-wall-mosaic-format { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; margin-bottom: 8px; }
.vent-wall-mosaic-format .field { display: grid; gap: 4px; }
.vent-wall-mosaic-format .field label { font-size: 12px; color: var(--muted); }
.vent-wall-format-none .vent-pane-grid { display: none; }
.vent-pane-grid { display: grid; gap: 8px; margin: 4px 0 8px; }
.vent-pane-grid[data-size="0"] { grid-template-columns: minmax(0, 1fr); }
.vent-pane-grid[data-size="1"] { grid-template-columns: minmax(0, 22rem); }
.vent-pane-grid[data-size="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vent-pane-grid[data-size="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vent-pane-grid[data-size="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vent-pane-grid[data-size="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vent-pane-grid[data-size="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.vent-pane { min-width: 0; }
.vent-pane-rc { display: block; margin-bottom: 4px; letter-spacing: .04em; color: var(--muted); font-size: 11px; }
.vent-pane-controls { display: flex; flex-wrap: nowrap; gap: 4px; align-items: stretch; width: 100%; margin: 4px 0 8px; }
.vent-pane-controls > .vent-pane-fit, .vent-pane-controls > .vent-pane-stream { flex: 1 1 0; width: 0; min-width: 0; margin: 0; padding: 2px 4px; font-size: 11px; line-height: 1.2; }
.vent-pane-controls > .vent-pane-stream:disabled { opacity: .45; }
.vent-pane.is-stream-n .vent-chip { opacity: .55; }
.vent-chip { display: block; width: 100%; margin: 0 0 4px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card);
  color: var(--fg); text-align: left; cursor: pointer; min-height: 44px; font: inherit; }
.vent-chip:hover:not(:disabled) { border-color: var(--accent); }
.vent-chip:disabled { cursor: default; }
.vent-chip-id { display: block; font-weight: 600; }
.vent-chip-name { display: block; color: var(--accent); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; line-height: 16px; }
.vent-pane.is-none .vent-chip { color: var(--muted); background: var(--bg2); border-color: var(--line); }
.vent-pane.is-none .vent-chip-name { color: inherit; }
.vent-chip.is-stream-off .vent-chip-id { opacity: .72; }
.vent-pane-empty { margin: 0 0 8px; color: var(--muted); }
dialog.vent-picker { position: fixed; inset: 0; margin: auto; z-index: 41; border: 1px solid var(--line2); border-radius: var(--radius-lg); background: var(--card); color: var(--fg);
  padding: 20px; width: min(36rem, calc(100vw - 24px)); max-height: min(36rem, calc(100vh - 24px)); box-shadow: 0 0 0 1px var(--accent-dim), var(--shadow); }
dialog.vent-picker[open] { display: flex; flex-direction: column; }
dialog.vent-picker::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(2px); }
.vent-picker-where { margin: 0 0 12px; font-weight: 600; }
.vent-picker .field { margin-bottom: 8px; }
.vent-picker .field input { width: 100%; }
.vent-picker-list { flex: 1 1 auto; min-height: 12rem; max-height: 22rem; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 0 0 12px; background: var(--bg2); }
.vent-picker-site { padding: 8px 10px 4px; color: var(--fg); font-weight: 700; position: sticky; top: 0; background: var(--bg2); }
.vent-picker-cam { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-top: 1px solid var(--line); background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.vent-picker-cam:hover { background: var(--card); }
.vent-picker-cam-label { min-width: 0; }
.vent-picker-cam-used { color: var(--muted); font-size: 12px; white-space: nowrap; }
.vent-picker-cam-current { color: var(--ok); font-weight: 700; white-space: nowrap; }
.vent-picker-cam.is-stream-off .vent-picker-cam-label { opacity: .72; }
.vent-picker-empty { margin: 12px 10px; color: var(--muted); }
dialog.vent-fill-dialog { position: fixed; inset: 0; margin: auto; z-index: 41; border: 1px solid var(--line2); border-radius: var(--radius-lg); background: var(--card); color: var(--fg);
  padding: 20px; width: min(44rem, calc(100vw - 24px)); max-height: calc(100vh - 24px); box-shadow: 0 0 0 1px var(--accent-dim), var(--shadow); }
dialog.vent-fill-dialog[open] { display: flex; flex-direction: column; gap: 8px; overflow: auto; }
dialog.vent-fill-dialog::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(2px); }
#mosaic-fill-path-block { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
@media (max-width: 640px) { #mosaic-fill-path-block { grid-template-columns: 1fr; } }
.vent-fill-title { margin: 0 0 4px; font-size: 16px; }
.vent-fill-msg { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.vent-fill-msg.is-error { color: var(--red); }
.vent-fill-section { border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 0 0 8px; padding: 8px 10px 10px; background: var(--card2); }
.vent-fill-section legend { padding: 0 4px; font-weight: 600; font-size: 13px; }
.vent-fill-section .check { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin: 4px 0; color: var(--fg); font-size: 13px; }
.vent-fill-section .check input[type="radio"], .vent-fill-section .check input[type="checkbox"] { width: 16px; height: 16px; flex: none; margin: 0; }
.vent-fill-section .field { display: grid; gap: 4px; margin: 6px 0; }
.vent-fill-section .field label { font-size: 12px; color: var(--muted); }
.vent-fill-section select, .vent-fill-section input[type="text"], .vent-fill-section input[type="number"] { width: 100%; }
.vent-fill-start-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vent-fill-actions { margin-top: 4px; }
.vent-fill-copy-list { flex: 1 1 auto; min-height: 8rem; max-height: 18rem; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg2); margin: 0 0 12px; }
.vent-fill-copy-row { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--fg); padding: 10px 12px; cursor: pointer; font: inherit; }
.vent-fill-copy-row:hover { background: var(--card); }
.vent-fill-copy-row:last-child { border-bottom: 0; }
.vent-snap { margin: 0 0 12px; }
.vent-snap-head { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.vent-snap-head h2 { margin: 0; }
.vent-snap-msg { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.vent-snap-msg.is-error { color: var(--red); }
.vent-snap-empty { margin: 0; color: var(--muted); font-size: 13px; }
.vent-snap-set { margin: 0 0 12px; }
.vent-snap-set-head { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 12px; color: var(--muted); }
.vent-snap-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.vent-snap-thumb { position: relative; width: 160px; }
.vent-snap-thumb img { display: block; width: 160px; height: 90px; object-fit: cover; background: #111; cursor: zoom-in; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.vent-snap-thumb span { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.vent-snap-del-one { position: absolute; top: 4px; right: 4px; padding: 0 6px; min-width: 0; line-height: 1.4; }
.vent-snap-fs { position: fixed; inset: 0; z-index: 1000; background: #000; display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.vent-snap-fs img { max-width: 100vw; max-height: 100vh; object-fit: contain; pointer-events: none; }
.vent-form .field.is-invalid input, .vent-form .field.is-invalid select { border-color: var(--red); }

/* ---- Systems › Themes editor */
.theme-card { max-width: 1200px; }
.theme-intro { max-width: 78ch; margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--fg); }
.theme-h { margin: 18px 0 2px; }
.theme-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.theme-color-row { display: flex; align-items: center; gap: 8px; }
.form-grid .field .theme-color-row input[type="color"] { width: 44px; height: 30px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card2); cursor: pointer; flex: none; }
.theme-hex { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.theme-actions { margin-top: 18px; }