:root {
    --bg:#0F1A14; --surface:#16241C; --raised:#1F3027; --outline:#35493C;
    --text:#F1F5EE; --muted:#A7B5AA; --lime:#B6F24A; --on-lime:#0F1A14; --lime-dim:#2E4A12;
    --ok:#3DDBA0; --warn:#FFB547; --err:#FF5C5C; --cyan:#4DD9F0; --violet:#A78BFA; --yellow:#F5E663;
    --sans:"Space Grotesk",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  }
  * { box-sizing:border-box }
  body { margin:0; background:var(--bg); color:var(--text); font:15px/1.45 var(--sans); }
  header { display:flex; align-items:center; gap:16px; padding:18px 24px; border-bottom:1px solid var(--outline); position:sticky; top:0; background:var(--bg); z-index:2 }
  header h1 { font-size:20px; font-weight:600; margin:0; letter-spacing:.2px }
  header h1 span { color:var(--lime) }
  header .spacer { flex:1 }
  header .who { color:var(--muted); font-family:var(--mono); font-size:12px }
  main { padding:20px 24px 60px; max-width:1400px; margin:0 auto; display:grid; gap:18px }
  /* min-width:0 everywhere a grid item holds a nowrap table: otherwise the table's
     intrinsic width becomes the item's minimum and the cards run off the right edge. */
  main > *, #app > *, .grid2 > * { min-width:0 }
  #app { display:grid; gap:18px }
  /* The UA's [hidden]{display:none} loses to any author display rule (e.g. #app's grid),
     which left the Config editor visible under the sign-in card (2026-09-23). */
  [hidden] { display:none !important }
  .scroll { overflow-x:auto; max-width:100% }
  .card { background:var(--surface); border:1px solid var(--outline); border-radius:18px; padding:18px 20px }
  .card h2 { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin:0 0 12px }
  .row { display:flex; gap:12px; align-items:center; flex-wrap:wrap }
  .chips { display:flex; gap:10px; flex-wrap:wrap }
  .chip { background:var(--raised); border-radius:999px; padding:6px 14px; font-family:var(--mono); font-size:13px }
  .chip b { color:var(--lime); font-weight:500 }
  .chip.bad b { color:var(--err) }
  button { font:inherit; border:0; border-radius:999px; padding:9px 18px; cursor:pointer; background:var(--lime); color:var(--on-lime); font-weight:600 }
  button.ghost { background:var(--raised); color:var(--text); font-weight:500 }
  button:disabled { opacity:.5; cursor:default }
  input { font:inherit; background:var(--raised); border:1px solid var(--outline); color:var(--text); border-radius:12px; padding:10px 14px; min-width:240px }
  table { width:100%; border-collapse:collapse; font-size:14px }
  th { text-align:left; color:var(--muted); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.08em; padding:8px 10px; border-bottom:1px solid var(--outline); white-space:nowrap }
  td { padding:9px 10px; border-bottom:1px solid #22332a; font-family:var(--mono); font-size:13px; white-space:nowrap }
  td.sans { font-family:var(--sans); font-size:14px }
  tr.click { cursor:pointer } tr.click:hover td { background:var(--raised) }
  tr.dark td { background:rgba(255,92,92,.08) }
  tr.selected td { background:var(--lime-dim) }
  .dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:8px; vertical-align:middle }
  .ok { background:var(--ok) } .bad { background:var(--err) } .warn { background:var(--warn) }
  .muted { color:var(--muted) } .err { color:var(--err) } .lime { color:var(--lime) } .mono { font-family:var(--mono) }
  .grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:18px }
  .stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:14px }
  .stat { background:var(--raised); border-radius:14px; padding:10px 14px }
  .stat .k { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em }
  .stat .v { font-family:var(--mono); font-size:18px; margin-top:2px }
  svg.chart { width:100%; height:180px; display:block; background:var(--raised); border-radius:14px }
  .legend { display:flex; gap:14px; font-size:12px; color:var(--muted); margin:6px 2px 0 }
  .legend i { display:inline-block; width:10px; height:3px; margin-right:6px; vertical-align:middle }
  .heat { width:auto } .heat th, .heat td.cell { min-width:72px } .heat td.cell { text-align:right; padding:6px 10px }
  .heat td.sans { min-width:220px }
  .empty { color:var(--muted); padding:20px 0; text-align:center }
  #signin { max-width:420px; margin:80px auto }
  .hint { color:var(--muted); font-size:13px }
  @media (max-width:700px){ header,main{padding-left:14px;padding-right:14px} td,th{padding:7px 6px} .grid2{grid-template-columns:1fr} }

/* ---- shared shell: header nav ---- */
nav.tabs { display:flex; gap:6px; flex-wrap:wrap }
nav.tabs a { color:var(--muted); text-decoration:none; padding:7px 14px; border-radius:999px; font-weight:500 }
nav.tabs a.on { background:var(--raised); color:var(--text) } nav.tabs a:hover { color:var(--text) }
.pagehead { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap }
.pagehead h2.title { font-size:20px; font-weight:600; margin:0; text-transform:none; letter-spacing:0; color:var(--text) }
.readonly { font-size:12px; color:var(--muted); border:1px solid var(--outline); border-radius:999px; padding:3px 10px }
.writes { font-size:12px; color:var(--on-lime); background:var(--warn); border-radius:999px; padding:3px 10px; font-weight:600 }
.diff { font-family:var(--mono); font-size:13px; background:var(--raised); border-radius:12px; padding:12px 14px; white-space:pre-wrap }
.diff .add{color:var(--ok)} .diff .del{color:var(--err)} .diff .chg{color:var(--warn)}
/* ---- device page pieces (from device.html) ---- */

          --ok:#3DDBA0; --warn:#FFB547; --err:#FF5C5C; --cyan:#4DD9F0; --violet:#A78BFA; --yellow:#F5E663;
          --sans:"Space Grotesk",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace; }
  .card h3 { font-size:14px; font-weight:500; margin:12px 0 6px; color:var(--text) }
  .chart { position:relative; height:220px } .chart.tall { height:300px } .chart.short { height:120px }
  #map { height:460px; border-radius:14px; background:var(--raised) }
  .legend { display:flex; gap:14px; font-size:12px; color:var(--muted); margin:8px 2px 0; flex-wrap:wrap } .legend i { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle }
  .strip { position:relative; height:26px; background:var(--raised); border-radius:8px; overflow:hidden; margin:6px 0 } .strip div { position:absolute; top:0; bottom:0 }
  .striplabel { font-size:12px; color:var(--muted); display:flex; justify-content:space-between }
/* window / tab selectors: quiet by default, lime when selected */
#windows button, .tabbar button { background:var(--raised); color:var(--text); font-weight:500 }
#windows button.on, .tabbar button.on { background:var(--lime); color:var(--on-lime); font-weight:600 }