/* Layout: fixed sidebar (clients, search, details) + full-bleed canvas with a floating toolbar. */
:root {
  --bg: #eef2f3; --panel: #ffffff; --ink: #16222a; --muted: #5a6a74; --line: #cdd7dc; --soft: #e3eaed;
  --accent: #0f6c80; --accent-ink: #ffffff; --ours: #1f7a4a; --previous: #9a6414; --warn: #b2471d;
  --canvas: #f7f9fa; --grid: #e4eaed;
  --k-internet: #6b7c86; --k-modem: #6b7c86; --k-firewall: #0f6c80; --k-router: #0f6c80; --k-switch: #2f5d8a; --k-ap: #2f8a83;
  --k-server: #4a4f8c; --k-pc: #44607a; --k-phone: #6c5aa8; --k-printer: #8a6d1d; --k-imaging: #b0336a; --k-camera: #7a5f4a;
  --k-iot: #7a5f4a; --k-mobile: #5f7f3a; --k-unknown: #8a949b;
  --f-display: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #0e151a; --panel: #151f26; --ink: #e2e9ed; --muted: #92a2ac; --line: #2a3841; --soft: #1c2830;
  --accent: #4cb6c9; --accent-ink: #06232a; --ours: #5cc48a; --previous: #dba351; --warn: #f08a5d;
  --canvas: #10181d; --grid: #18232a;
  --k-internet: #8d9ca5; --k-modem: #8d9ca5; --k-firewall: #4cb6c9; --k-router: #4cb6c9; --k-switch: #6f9fd0; --k-ap: #5cc0b8;
  --k-server: #9a9fe0; --k-pc: #8fb0cc; --k-phone: #a99be3; --k-printer: #d4b860; --k-imaging: #e76fa3; --k-camera: #c4a389;
  --k-iot: #c4a389; --k-mobile: #9cc46f; --k-unknown: #7d8a92; color-scheme: dark } }

* { box-sizing: border-box }
html, body { height: 100%; margin: 0 }
body { background: var(--bg); color: var(--ink); font: 14px/1.45 var(--f-body) }
.hide { display: none !important }
.muted { color: var(--muted) } .small { font-size: 12px }
.mono { font-family: var(--f-mono); font-size: 12.5px }
button { font: inherit; color: inherit; cursor: pointer }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }
button.primary { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 6px; padding: 7px 14px; font-weight: 600 }
button.link { background: none; border: 0; color: var(--accent); padding: 0 }
button.danger { background: none; border: 1px solid var(--warn); color: var(--warn); border-radius: 6px; padding: 6px 12px }
button.ghost { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px }

.signin { display: grid; place-items: center; height: 100% }
.signin .card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 32px; max-width: 380px; display: grid; gap: 10px }
.signin h1 { font: 600 26px var(--f-display); margin: 0 }
.signin p { margin: 0 }

.app { display: grid; grid-template-columns: 320px 1fr; height: 100% }
.side { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0 }
.brand { display: flex; align-items: center; gap: 10px; padding: 16px 18px; font: 600 18px var(--f-display); border-bottom: 1px solid var(--line) }
.brand .mark { width: 18px; height: 18px; border-radius: 4px; background:
  radial-gradient(circle at 30% 30%, var(--accent) 0 3px, transparent 3.5px), radial-gradient(circle at 75% 70%, var(--accent) 0 3px, transparent 3.5px),
  linear-gradient(45deg, transparent 46%, var(--accent) 47% 53%, transparent 54%); border: 1.5px solid var(--accent) }
.block { padding: 14px 18px; border-bottom: 1px solid var(--line); display: grid; gap: 8px }
.block.grow { flex: 1; min-height: 0; display: flex; flex-direction: column; border-bottom: 0 }
.block h2, .lbl { font: 600 11px var(--f-body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 }
.clients { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px }
.clients button { width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 6px; padding: 7px 10px;
  display: flex; justify-content: space-between; gap: 8px }
.clients button:hover { background: var(--soft) }
.clients button[aria-current="true"] { border-color: var(--accent); background: var(--soft); font-weight: 600 }
input[type=search], .form input, .form select, .form textarea { width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 9px; font: inherit }
.tabs { display: flex; gap: 4px; margin-bottom: 8px }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 4px 8px; color: var(--muted); font-weight: 500 }
.tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--accent) }
.panel { overflow: auto; min-height: 0; flex: 1; display: grid; align-content: start; gap: 10px; padding-right: 2px }
.panel h3 { font: 600 17px var(--f-display); margin: 0; overflow-wrap: anywhere }
.kv { display: grid; grid-template-columns: 92px 1fr; gap: 3px 10px; font-size: 13px }
.kv dt { color: var(--muted) } .kv dd { margin: 0; overflow-wrap: anywhere }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 3px; padding: 0 5px }
.pill.ours { color: var(--ours) } .pill.previous { color: var(--previous) } .pill.warn { color: var(--warn) } .pill.muted { color: var(--muted) }
.swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; background: var(--c) }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13px }
.list li button { width: 100%; text-align: left; background: none; border: 0; padding: 3px 4px; border-radius: 4px; display: grid; grid-template-columns: 96px 1fr; gap: 8px }
.list li button:hover { background: var(--soft) }
.form { display: grid; gap: 7px }
.form label { display: grid; gap: 2px; font-size: 12px; color: var(--muted) }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.form .actions { display: flex; gap: 8px; justify-content: space-between; margin-top: 4px }
.hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 12.5px }
.hist time { font-family: var(--f-mono); color: var(--muted); font-size: 11.5px; display: block }
.me { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center }

.stage { position: relative; min-width: 0; background: var(--canvas);
  background-image: radial-gradient(var(--grid) 1px, transparent 1px); background-size: 22px 22px }
#cy { position: absolute; inset: 0 }
.toolbar { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; align-items: center }
.toolbar > button:not(.primary) { width: 34px; height: 34px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; font-size: 18px; line-height: 1 }
.toolbar .primary { height: 34px }
.seg { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: hidden }
.seg button { background: none; border: 0; padding: 0 12px; height: 32px; color: var(--muted); font-weight: 500 }
.seg button[aria-pressed="true"] { background: var(--soft); color: var(--ink) }
.legend { position: absolute; left: 14px; bottom: 14px; background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; max-width: min(720px, calc(100% - 200px)); font-size: 12px; color: var(--muted) }
.legend span { display: inline-flex; align-items: center; gap: 5px }
.levelhint { position: absolute; right: 14px; bottom: 14px; font: 500 12px var(--f-mono); color: var(--muted);
  background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px }
.empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--muted); padding: 40px }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--bg);
  padding: 8px 14px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s }
.toast.show { opacity: 1; transform: translateX(-50%) }
@media (prefers-reduced-motion: reduce) { .toast { transition: none } }

.planbar { position: absolute; top: 14px; left: 14px; display: flex; gap: 10px; align-items: center }
.plannote { font-size: 12.5px; color: var(--muted); background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line);
  border-radius: 6px; padding: 5px 9px }
.plannote:empty { display: none }
.plannote.target { color: var(--ours); border-color: var(--ours) }
.seg button:disabled { opacity: .45; cursor: not-allowed }
.changes { display: grid; gap: 4px; font-size: 13px }
.changes b { font-weight: 600 }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--muted); vertical-align: 1px }
.dot.up { background: var(--ours) } .dot.down { background: var(--warn) }
.live { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px }
.altlogins { display: grid; gap: 6px } .altlogins:empty { display: none }