:root { --bg:#f6f7f9; --card:#fff; --text:#1c1f24; --muted:#6b7280; --border:#e3e6ea; --accent:#2563eb; --ok:#16a34a; --bad:#dc2626; --warn-bg:#fef3c7; --warn-text:#78350f; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#111317; --card:#1a1d23; --text:#e6e8eb; --muted:#9aa1ab; --border:#2b2f37; --accent:#60a5fa; --ok:#4ade80; --bad:#f87171; --warn-bg:#422006; --warn-text:#fde68a; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.5 system-ui, sans-serif; min-height:100vh; display:flex; flex-direction:column; }
header { display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:12px 24px; border-bottom:1px solid var(--border); background:var(--card); }
header .brand { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:600; font-size:16px; }
header .brand .logo { display:block; }
.hero-logo { display:block; margin:4px auto 12px; }
header nav { display:flex; gap:14px; flex:1; }
header nav a { color:var(--muted); text-decoration:none; }
header nav a:hover { color:var(--text); }
.banner { background:var(--warn-bg); color:var(--warn-text); padding:8px 24px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
main { flex:1; min-width:0; max-width:1200px; margin:0 auto; padding:24px 16px; }
main.narrow { max-width:460px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:16px 20px; margin-bottom:20px; overflow-x:auto; }
h1 { font-size:18px; margin:0 0 16px; }
h2 { font-size:15px; margin:0 0 12px; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
th { color:var(--muted); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
a { color:var(--accent); }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.dot.on { background:var(--ok); } .dot.off { background:var(--bad); }
.muted { color:var(--muted); }
.ok { color:var(--ok); } .error { color:var(--bad); }
form.inline { display:inline; margin:0; }
form.stack label { display:block; margin:12px 0 4px; }
form.stack input, form.stack select { width:100%; }
form.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
input, select { padding:6px 8px; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:4px; font:inherit; }
input.short { width:90px; }
button { padding:6px 14px; border:0; border-radius:4px; background:var(--accent); color:#fff; cursor:pointer; font:inherit; }
button.link { background:none; color:var(--accent); padding:0; }
button.danger { background:var(--bad); }
form.stack button { margin-top:16px; }
dl.kv { display:grid; grid-template-columns:max-content 1fr; gap:4px 16px; margin:0; }
dl.kv dt { color:var(--muted); } dl.kv dd { margin:0; word-break:break-word; }
code, .secret { font-family:ui-monospace, monospace; word-break:break-all; }
.secret { display:block; padding:10px; background:var(--bg); border:1px solid var(--border); border-radius:4px; margin:8px 0; user-select:all; }
.qr { background:#fff; display:inline-block; padding:8px; border-radius:6px; }
.qr svg { display:block; width:200px; height:200px; }
ul.codes { columns:2; font-family:ui-monospace, monospace; font-size:15px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:20px; }
.grid2 > .card { margin-bottom:0; }
.grid2 { margin-bottom:20px; }
label.check { display:flex; gap:8px; align-items:center; }
form.stack label.check input { width:auto; }
.row.actions { margin-top:12px; }
.pill { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; border:1px solid var(--border); white-space:nowrap; }
.pill.good { color:var(--ok); border-color:var(--ok); }
.pill.bad { color:var(--bad); border-color:var(--bad); }
.pill.warn { color:var(--warn-text); background:var(--warn-bg); border-color:transparent; }
.pill.off, .pill.unknown { color:var(--muted); }

/* App shell: tenant menu on the left, page on the right */
.shell { flex:1; display:flex; align-items:stretch; }
.sidebar { flex:none; width:210px; background:var(--card); border-right:1px solid var(--border); }
.sidebar nav { position:sticky; top:0; max-height:100vh; overflow-y:auto; padding:14px 10px 20px; }
.side-section { margin-top:14px; }
.side-head { display:flex; justify-content:space-between; margin:0 10px 4px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.side-link { display:flex; justify-content:space-between; align-items:center; padding:6px 10px; border-radius:6px; color:var(--text); text-decoration:none; }
.side-link.sub { padding-left:18px; }
.side-link:hover { background:var(--bg); }
.side-link.active { background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); font-weight:600; }
.sidebar .count { font-size:12px; color:var(--muted); font-weight:400; }
.platform-toggle { margin:8px 0; }

/* Device page: persistent header, tab list and a pane that scrolls on its own */
body.app-frame { height:100vh; overflow:hidden; }
body.app-frame .shell { min-height:0; }
body.app-frame .sidebar nav { max-height:none; height:100%; }
body.app-frame > header, body.app-frame > .banner { flex:none; }
main.device-page { flex:1; min-height:0; width:100%; max-width:1600px; padding:16px; display:flex; flex-direction:column; gap:16px; }
.device-head { flex:none; margin:0; padding:14px 20px; }
.head-top { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; }
.head-top h1 { margin:0; font-size:20px; }
.head-top h1 .status { font-size:13px; font-weight:400; margin-left:4px; }
.pills { display:flex; gap:6px; flex-wrap:wrap; flex:1; }
a.pill { text-decoration:none; }
.head-actions { display:flex; gap:8px; }
.head-msg { margin:10px 0 0; }
dl.facts { display:flex; flex-wrap:wrap; gap:8px 32px; margin:12px 0 0; }
dl.facts > div { min-width:0; max-width:100%; }
dl.facts dt { color:var(--muted); font-size:12px; }
dl.facts dd { margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.device-body { flex:1; min-height:0; display:grid; grid-template-columns:210px minmax(0, 1fr); gap:16px; }
nav.tabs { display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
nav.tabs a { display:flex; justify-content:space-between; align-items:center; padding:7px 12px; border-radius:6px; color:var(--text); text-decoration:none; white-space:nowrap; }
nav.tabs a:hover { background:var(--card); }
nav.tabs a.active { background:var(--accent); color:#fff; }
nav.tabs .count { font-size:12px; color:var(--muted); margin-left:10px; }
nav.tabs .count.bad { color:var(--bad); font-weight:600; }
nav.tabs a.active .count { color:#fff; }
.pane { min-height:0; overflow:auto; background:var(--card); border:1px solid var(--border); border-radius:8px; padding:16px 20px; }
.pane h2.gap { margin-top:24px; }
.pane-intro { margin-bottom:16px; }
.toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
.toolbar input[type=search] { width:260px; }
.toolbar .grow { flex:1; text-align:right; }
table.data thead th { position:sticky; top:-16px; background:var(--card); z-index:1; white-space:nowrap; }
table.data th a { color:inherit; text-decoration:none; }
table.data tbody tr:hover { background:var(--bg); }
table.data tr.selected { background:var(--bg); outline:2px solid var(--accent); outline-offset:-2px; }
table.data tr.dim td { color:var(--muted); }
.trunc { display:block; max-width:36ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trunc.short { max-width:22ch; }
.small { font-size:12px; }
.detail { border:1px solid var(--accent); border-radius:8px; padding:12px 16px; margin-bottom:12px; background:var(--bg); }
.detail-head { display:flex; justify-content:space-between; margin-bottom:8px; }
.detail dd { font-family:ui-monospace, monospace; font-size:13px; }
.subitem + .subitem { border-top:1px dashed var(--border); margin-top:6px; padding-top:6px; }
.pager { display:flex; gap:16px; justify-content:center; padding:12px 0 0; }
.pane .grid2 section h2 { margin-bottom:8px; }
meter { width:80px; vertical-align:middle; }

@media (max-width: 800px) {
  body.app-frame { height:auto; overflow:visible; display:block; }
  .shell { display:block; }
  .sidebar { border-right:0; border-bottom:1px solid var(--border); }
  .sidebar nav { position:static; max-height:none; display:flex; flex-wrap:wrap; gap:4px 12px; padding:10px 12px; }
  .side-section { display:flex; flex-wrap:wrap; align-items:center; gap:2px 4px; }
  .side-head { margin:0 4px 0 0; }
  .device-body { display:block; }
  nav.tabs { flex-direction:row; overflow-x:auto; margin-bottom:12px; }
  .pane { overflow:visible; }
  .toolbar input[type=search] { width:100%; }
  .toolbar .grow { text-align:left; }
}

/* Finn */
.finn-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.finn-head h2 { margin-bottom:4px; }
.finn-table td.finn-fix { max-width:620px; }
.finn-actions { white-space:nowrap; text-align:right; }
.finn-actions form + form { margin-left:10px; }
ul.targets { margin:4px 0 0; padding-left:18px; font-size:12px; }
ul.targets .trunc { max-width:60ch; }
.pill.small { font-size:11px; padding:0 6px; }
details.finn-optional summary { cursor:pointer; font-weight:600; margin-bottom:8px; }
table.finn-device, table.finn-fleet { table-layout:fixed; }
table.finn-device th:nth-child(2) { width:130px; }
table.finn-device th:nth-child(3) { width:190px; }
table.finn-device th:nth-child(4) { width:170px; }
table.finn-fleet th:nth-child(2), table.finn-fleet th:nth-child(3), table.finn-fleet th:nth-child(4) { width:95px; }
table.finn-fleet th:nth-child(5) { width:120px; }
table.finn-fleet th:nth-child(6) { width:120px; }

/* Scripts */
textarea { padding:6px 8px; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:4px; font:inherit; width:100%; }
textarea.code { font:13px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size:4; white-space:pre; overflow:auto; min-height:360px; resize:vertical; }
.narrow-form { max-width:640px; }
.code-opts { gap:16px; margin-bottom:8px; }
.code-opts label { display:flex; flex-direction:column; gap:4px; margin:0; }
form.stack .code-opts select, form.stack .code-opts input { width:auto; }
form.stack .row button { margin-top:0; }
.grow-input { flex:1; min-width:200px; }
.wide-input { width:100%; max-width:640px; }
input.tiny { width:70px; }
label.sudo { display:inline-flex; align-items:center; gap:6px; margin:0; }
label.sudo span { color:var(--muted); font-size:12px; }
.sudo-ok { white-space:nowrap; }
.toolbar-split { justify-content:space-between; gap:12px; }
.section-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.section-edit summary { cursor:pointer; }
.section-edit form { margin-top:8px; }
.nowrap { white-space:nowrap; }
.gap-sm { margin-top:8px; }
details.danger-zone summary { cursor:pointer; color:var(--bad); }
details.danger-zone form { margin-top:10px; }
button.danger-link { color:var(--bad); }
details.run { border:1px solid var(--border); border-radius:6px; padding:8px 12px; margin-bottom:8px; }
details.run summary { cursor:pointer; }
pre.output { background:var(--bg); border:1px solid var(--border); border-radius:4px; padding:10px; overflow:auto; max-height:420px; font-size:12px; white-space:pre-wrap; word-break:break-word; }
pre.output.err { border-color:var(--bad); }
ul.hints { padding-left:18px; margin-top:12px; }
.head-actions form.row { gap:6px; }
div.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
form.stack div.row label, form.stack .code-opts label { margin:0; }
form.stack .code-opts label { display:flex; flex-direction:column; gap:4px; }
form.stack div.row input:not([type=checkbox]):not([type=radio]) { width:auto; }
form.stack div.row input.grow-input { flex:1; }
code.nowrap { white-space:nowrap; word-break:normal; }
button[disabled] { opacity:.45; cursor:not-allowed; }

/* Script page: tabs switch in the browser (radio + label) so edits survive tab changes */
.tab-radio { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
nav.tabs label.tab-label { display:flex; justify-content:space-between; align-items:center; padding:7px 12px; border-radius:6px; color:var(--text); white-space:nowrap; cursor:pointer; }
nav.tabs label.tab-label:hover { background:var(--card); }
nav.tabs .tab-label .count { font-size:12px; color:var(--muted); margin-left:10px; }
.pane > .panel { display:none; }
#tab-overview:checked ~ .device-body .panel-overview { display:block; }
#tab-overview:checked ~ .device-body label[for=tab-overview] { background:var(--accent); color:#fff; }
#tab-overview:checked ~ .device-body label[for=tab-overview] .count { color:#fff; }
#tab-overview:focus-visible ~ .device-body label[for=tab-overview] { outline:2px solid var(--accent); outline-offset:2px; }
#tab-code:checked ~ .device-body .panel-code { display:block; }
#tab-code:checked ~ .device-body label[for=tab-code] { background:var(--accent); color:#fff; }
#tab-code:checked ~ .device-body label[for=tab-code] .count { color:#fff; }
#tab-code:focus-visible ~ .device-body label[for=tab-code] { outline:2px solid var(--accent); outline-offset:2px; }
#tab-scope:checked ~ .device-body .panel-scope { display:block; }
#tab-scope:checked ~ .device-body label[for=tab-scope] { background:var(--accent); color:#fff; }
#tab-scope:checked ~ .device-body label[for=tab-scope] .count { color:#fff; }
#tab-scope:focus-visible ~ .device-body label[for=tab-scope] { outline:2px solid var(--accent); outline-offset:2px; }
#tab-frequency:checked ~ .device-body .panel-frequency { display:block; }
#tab-frequency:checked ~ .device-body label[for=tab-frequency] { background:var(--accent); color:#fff; }
#tab-frequency:checked ~ .device-body label[for=tab-frequency] .count { color:#fff; }
#tab-frequency:focus-visible ~ .device-body label[for=tab-frequency] { outline:2px solid var(--accent); outline-offset:2px; }
#tab-secrets:checked ~ .device-body .panel-secrets { display:block; }
#tab-secrets:checked ~ .device-body label[for=tab-secrets] { background:var(--accent); color:#fff; }
#tab-secrets:checked ~ .device-body label[for=tab-secrets] .count { color:#fff; }
#tab-secrets:focus-visible ~ .device-body label[for=tab-secrets] { outline:2px solid var(--accent); outline-offset:2px; }
#tab-devices:checked ~ .device-body .panel-devices { display:block; }
#tab-devices:checked ~ .device-body label[for=tab-devices] { background:var(--accent); color:#fff; }
#tab-devices:checked ~ .device-body label[for=tab-devices] .count { color:#fff; }
#tab-devices:focus-visible ~ .device-body label[for=tab-devices] { outline:2px solid var(--accent); outline-offset:2px; }
#tab-runs:checked ~ .device-body .panel-runs { display:block; }
#tab-runs:checked ~ .device-body label[for=tab-runs] { background:var(--accent); color:#fff; }
#tab-runs:checked ~ .device-body label[for=tab-runs] .count { color:#fff; }
#tab-runs:focus-visible ~ .device-body label[for=tab-runs] { outline:2px solid var(--accent); outline-offset:2px; }
#tab-history:checked ~ .device-body .panel-history { display:block; }
#tab-history:checked ~ .device-body label[for=tab-history] { background:var(--accent); color:#fff; }
#tab-history:checked ~ .device-body label[for=tab-history] .count { color:#fff; }
#tab-history:focus-visible ~ .device-body label[for=tab-history] { outline:2px solid var(--accent); outline-offset:2px; }
.dirty-note { display:none; }
body.dirty .dirty-note { display:inline-block; }
body.dirty p.dirty-note { display:block; }
body.dirty .needs-clean { display:none; }
button.secondary { background:var(--card); color:var(--accent); border:1px solid var(--accent); }
.head-actions { flex-wrap:wrap; align-items:center; }
/* Same layout for field groups that aren't inside a <form> (the script page's tabs) */
div.stack > label { display:block; margin:12px 0 4px; }
div.stack > label.check { display:flex; gap:8px; align-items:center; }
div.stack > input:not([type=checkbox]):not([type=radio]), div.stack > select, div.stack > textarea { width:100%; }
div.stack > .code-opts label { display:flex; flex-direction:column; gap:4px; margin:0; }
div.stack > input[name=note] { margin-top:8px; }