:root {
  color-scheme: light;
  --page: #f9f9f7; --surface: #fcfcfb; --ink: #0b0b0b; --ink-2: #52514e; --muted: #6f6d68;
  --grid: #e1e0d9; --axis: #c3c2b7; --border: rgba(11,11,11,0.10);
  --accent: #2a78d6; --accent-ink: #fff;
  --ok-bg: #e5f4e5; --ok-ink: #006300; --err-bg: #fbe6e6; --err-ink: #a02626; --critical: #d03b3b;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948; --s-outdoor: #0b0b0b;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #0d0d0d; --surface: #1a1a19; --ink: #f0efec; --ink-2: #c3c2b7; --muted: #9a988f;
    --grid: #2c2c2a; --axis: #383835; --border: rgba(255,255,255,0.10);
    --accent: #3987e5;
    --ok-bg: #14301a; --ok-ink: #5fd35f; --err-bg: #3a1717; --err-ink: #f19a9a;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767; --s-outdoor: #ffffff;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); }
code { font-size: .9em; background: var(--grid); padding: 0 .3em; border-radius: 4px; }
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem;
  padding: .75rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border); }
.brand { font-weight: 700; color: var(--ink); text-decoration: none; font-size: 1.1rem; }
nav { display: flex; gap: .25rem; flex-wrap: wrap; }
nav a { color: var(--ink-2); text-decoration: none; padding: .35rem .7rem; border-radius: 6px; }
nav a:hover { background: var(--grid); }
nav a.active { color: var(--ink); background: var(--grid); font-weight: 600; }
main { max-width: 1200px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
.muted { color: var(--muted); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 1rem; margin-bottom: 1rem; }
.flash { padding: .6rem .9rem; border-radius: 8px; margin-bottom: 1rem; }
.flash-ok { background: var(--ok-bg); color: var(--ok-ink); }
.flash-error { background: var(--err-bg); color: var(--err-ink); }

/* dashboard cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1rem;
  border-top: 4px solid var(--swatch, var(--axis)); }
.card h2 { font-size: 1rem; margin: 0 0 .5rem; color: var(--ink-2); font-weight: 600; }
.card .big { font-size: 2.4rem; font-weight: 600; line-height: 1.1; }
.card dl { display: grid; grid-template-columns: auto 1fr; gap: .15rem .75rem; margin: .75rem 0 0; }
.card dt { color: var(--muted); } .card dd { margin: 0; font-variant-numeric: tabular-nums; }
.card .when { margin-top: .6rem; font-size: .85rem; color: var(--muted); }
.card .stale, #updated.stale { color: var(--err-ink); font-weight: 600; }
/* No update for 10+ minutes: whole box goes red. */
.card.is-stale { background: var(--err-bg); border: 2px solid var(--critical); border-top-width: 4px; }
.card .icon { float: right; width: 50px; height: 50px; margin: -.5rem -.25rem 0 0; }

/* graph controls */
.controls { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-end; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .3rem; }
.seg { display: inline-flex; border: 1px solid var(--axis); border-radius: 8px; overflow: hidden; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: .35rem .75rem; }
.seg input:checked + span { background: var(--accent); color: var(--accent-ink); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.checks { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.actions { display: flex; gap: 1rem; align-items: center; margin-left: auto; }
input, select, button { font: inherit; color: var(--ink); }
input:not([type=checkbox]):not([type=radio]), select {
  background: var(--page); border: 1px solid var(--axis); border-radius: 6px; padding: .3rem .5rem; max-width: 100%; }
button { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 6px;
  padding: .4rem 1rem; cursor: pointer; font-weight: 600; }
button:hover { filter: brightness(1.08); }
.chart-wrap { position: relative; height: min(60vh, 480px); min-height: 280px; }
.chart-wrap.loading canvas { opacity: .45; transition: opacity .15s; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--grid); }
th { font-size: .8rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.stats td:not(:first-child) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.key { display: inline-block; width: 16px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: .5rem; }

/* config */
table.edit input { width: 100%; min-width: 9rem; }
table.edit input.narrow { min-width: 4rem; width: 5rem; }
.new-row td { background: var(--page); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem 1rem; align-items: end; }
.form-grid label { display: flex; flex-direction: column; gap: .25rem; color: var(--ink-2); font-size: .9rem; }
.form-grid label.inline { flex-direction: row; align-items: center; gap: .5rem; }

/* "receiver not running" alert, directly under the top bar on every page */
.alert-bar { background: var(--critical); color: #fff; font-weight: 600;
  padding: .6rem 1rem; text-align: center; }