/* Chirpybot control center. Tokens first; dark mode follows the system. */
:root {
  --bg:#f4f6f9; --fg:#1b2130; --muted:#5d6675; --card:#ffffff; --line:#e1e5ec; --accent:#2f6fec; --accent-fg:#ffffff;
  --danger:#c0362c; --ok:#1f7a45; --warn-bg:#fff6dd; --side:#141a26; --side-fg:#cfd6e3; --side-on:#ffffff;
  --eye:#7fd1ff; --shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08); --radius:12px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#10141b; --fg:#e7eaf0; --muted:#9aa3b2; --card:#171c25; --line:#283040; --accent:#6c9cff; --accent-fg:#0d1220;
          --danger:#ff7b72; --ok:#56d364; --warn-bg:#3a3018; --side:#0b0e14; --side-fg:#aeb7c7; --shadow:none; }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--fg); }
a { color:var(--accent); }
.skip { position:absolute; left:-999px; } .skip:focus { left:8px; top:8px; background:var(--card); padding:8px; z-index:10; }

/* ---- shell ---- */
body.app { display:grid; grid-template-columns:232px 1fr; min-height:100vh; }
.side { background:var(--side); color:var(--side-fg); padding:20px 14px; display:flex; flex-direction:column; gap:20px; position:sticky; top:0; height:100vh; }
.side .brand { color:var(--side-on); }
.side nav { display:flex; flex-direction:column; gap:2px; }
.side nav a { color:var(--side-fg); text-decoration:none; padding:9px 12px; border-radius:8px; font-weight:500; }
.side nav a:hover { background:rgba(255,255,255,.06); color:var(--side-on); }
.side nav a[aria-current="page"] { background:rgba(127,209,255,.14); color:var(--side-on); }
.side .signout { margin-top:auto; } .side .signout .link { color:var(--side-fg); }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.05rem; color:var(--fg); text-decoration:none; }
.brand img { border-radius:8px; }
.top { display:flex; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line); background:var(--card); }
main { max-width:1080px; width:100%; margin:0 auto; padding:24px; }
body.public main { max-width:520px; }
@media (max-width:820px) {
  body.app { grid-template-columns:1fr; }
  .side { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; padding:10px 14px; gap:10px; }
  .side nav { flex-direction:row; flex-wrap:wrap; }
  .side .signout { margin-top:0; margin-left:auto; }
  main { padding:16px; }
}

/* ---- type & blocks ---- */
h1 { font-size:1.6rem; margin:0 0 4px; letter-spacing:-.01em; } h2 { font-size:1.12rem; margin:0 0 10px; } h3 { font-size:1rem; margin:0; }
.pagehead { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:4px 0 20px; flex-wrap:wrap; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin:0 0 16px; box-shadow:var(--shadow); }
.narrow { max-width:460px; margin:24px auto; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; } .grid2 > .card { margin:0; }
.grid2 + .card, .grid2 + .grid2 { margin-top:16px; }
.muted { color:var(--muted); } .small { font-size:.88rem; }
.error { color:var(--danger); font-weight:600; } .ok { color:var(--ok); font-weight:600; }
.banner { padding:10px 14px; border-radius:10px; background:var(--card); border:1px solid var(--line); }
.notice { background:var(--warn-bg); border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin:0 0 16px; }
.list { padding-left:18px; margin:6px 0; } .list li { margin:3px 0; }
.facts { display:grid; grid-template-columns:max-content 1fr; gap:6px 18px; margin:0; } .facts dt { color:var(--muted); } .facts dd { margin:0; }
code { font-family:ui-monospace, Consolas, monospace; } .secret { word-break:break-all; }
.codes { columns:2; list-style:none; padding:0; } .qr img { background:#fff; padding:8px; border-radius:8px; }
.pair-code { font:700 1.6rem ui-monospace, Consolas, monospace; letter-spacing:.15em; text-transform:uppercase; }

/* ---- forms ---- */
fieldset { border:0; padding:0; margin:0; min-width:0; } fieldset[disabled] { opacity:.6; }
fieldset h2 { margin-top:18px; } fieldset h2:first-child { margin-top:0; }
label { display:block; margin:12px 0 4px; font-weight:600; }
label.check { display:flex; gap:10px; align-items:flex-start; font-weight:500; } label.check input { width:auto; margin-top:4px; }
input, select { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--fg); font:inherit; }
input[type=range] { padding:0; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:1px; }
.row { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:0 16px; }
button, .button { display:inline-block; margin-top:14px; padding:9px 16px; border:1px solid var(--line); border-radius:9px; background:var(--card);
  color:var(--fg); font:inherit; font-weight:600; cursor:pointer; text-decoration:none; line-height:1.3; }
button:hover, .button:hover { border-color:var(--accent); }
button.primary, .button { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
.button.secondary { background:var(--card); color:var(--fg); border-color:var(--line); }
button.danger { color:var(--danger); border-color:color-mix(in srgb, var(--danger) 50%, var(--line)); background:var(--card); }
button.link { border:0; background:none; color:var(--accent); padding:0; margin:0; font-weight:500; }
button[disabled] { cursor:not-allowed; opacity:.55; }
form.inline { display:inline; }
.actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .actions form { margin:0; } .actions button, .actions .button { margin-top:6px; }
.danger-zone { border-color:color-mix(in srgb, var(--danger) 35%, var(--line)); }

/* ---- status ---- */
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--muted); vertical-align:middle; }
.dot.good { background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); } .dot.bad { background:#9aa3b2; }
.badge { padding:8px 12px; border-radius:9px; font-weight:600; margin:8px 0; }
.badge.good { color:var(--ok); background:color-mix(in srgb, var(--ok) 12%, transparent); }
.badge.warn { color:var(--fg); background:var(--warn-bg); }
.badge.bad { color:var(--danger); background:color-mix(in srgb, var(--danger) 12%, transparent); }

/* ---- companions ---- */
.home { margin:0 0 28px; }
.homehead { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 10px; }
.units { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:16px; }
.unit { margin:0; display:flex; flex-direction:column; gap:10px; }
.unitlink { display:flex; gap:14px; align-items:center; text-decoration:none; color:inherit; }
.unitlink:hover h3 { color:var(--accent); }
.unit .state { margin:0; font-size:.92rem; }
.mini { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin:0; }
.mini div { background:var(--bg); border-radius:8px; padding:6px 10px; } .mini dt { font-size:.75rem; color:var(--muted); } .mini dd { margin:0; font-weight:600; }
.quick { display:flex; gap:8px; margin-top:auto; } .quick form { margin:0; } .quick button, .quick .button { margin:0; padding:7px 14px; }
.face { flex:none; width:58px; height:44px; border-radius:12px; background:#1d2330; display:flex; align-items:center; justify-content:center; gap:8px; }
.face span { width:12px; height:18px; border-radius:50%; background:var(--eye); }
.face.off span { height:3px; border-radius:2px; background:#5d6675; }
.face.big { width:84px; height:64px; border-radius:16px; } .face.big span { width:17px; height:26px; } .face.big.off span { height:4px; }
.unithead { justify-content:flex-start; } .crumb { margin:0; font-size:.88rem; color:var(--muted); } .crumb a { color:var(--muted); }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:0 0 18px; overflow-x:auto; }
.tabs a { padding:10px 14px; text-decoration:none; color:var(--muted); font-weight:600; border-bottom:2px solid transparent; white-space:nowrap; }
.tabs a[aria-current="page"] { color:var(--fg); border-bottom-color:var(--accent); }
@media (max-width:520px) { .codes { columns:1; } .facts { grid-template-columns:1fr; } .facts dt { margin-top:6px; } }