:root {
  color-scheme: light dark;
  --page: #edf2f6;
  --surface: #fff;
  --text-1: #172938;
  --muted: #41586b;
  --grid: #d2dce4;
  --s1: #006d9b;
  --s2: #a74b14;
  --banner: #ffe9bf;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #101b24;
    --surface: #192a38;
    --text-1: #edf4fa;
    --muted: #b8cad7;
    --grid: #384f61;
    --s1: #63c9f3;
    --s2: #ffac73;
    --banner: #543c1f;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--text-1); background: var(--page); font: 1rem/1.4 system-ui, sans-serif; overflow: hidden; }
.shell {
  width: min(100%, 66rem);
  height: 100vh;
  height: 100dvh;
  margin: auto;
  padding: max(.65rem, env(safe-area-inset-top)) max(.8rem, env(safe-area-inset-right)) max(.45rem, env(safe-area-inset-bottom)) max(.8rem, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.app-header { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
h1 { font-size: clamp(1.65rem, 5vw, 2.6rem); margin: 0; line-height: 1.1; letter-spacing: -.04em; }
h2, h3 { margin: 0; font-size: 1.08rem; }
.eyebrow { color: var(--s1); font-size: .68rem; font-weight: 800; letter-spacing: .16em; margin: 0 0 .15rem; }
.sub, .connection { color: var(--muted); font-size: .83rem; margin: .4rem 0 0; }
.connection { min-height: 1.2em; margin: 0; }
.connection[data-state="online"] { color: var(--s1); }
.connection[data-state="error"] { color: var(--s2); }
.banner { background: var(--banner); padding: .4rem .7rem; border-radius: .65rem; margin: 0; font-size: .85rem; }
.views { flex: 1; min-height: 0; }
.view { height: 100%; overflow: auto; overscroll-behavior: contain; padding: .2rem; }
.rooms { display: grid; gap: .65rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.card { background: var(--surface); border: 1px solid var(--grid); border-radius: .9rem; padding: .7rem .85rem; }
.rooms > .card { border-top: 3px solid var(--s1); }
.rooms > .card:nth-child(2) { border-top-color: var(--s2); }
.room-heading { display: flex; align-items: center; justify-content: space-between; gap: .35rem; flex-wrap: wrap; margin-bottom: .4rem; }
.badge { font-size: .72rem; font-weight: 650; padding: .16rem .45rem; border: 1px solid var(--grid); border-radius: 999px; }
.badge[data-state="stale"] { background: var(--banner); }
.metrics { display: flex; gap: .4rem 1.3rem; flex-wrap: wrap; }
.metric span { font-size: .78rem; }
.metric strong { display: block; font-size: clamp(1.45rem, 4vw, 2.2rem); font-variant-numeric: tabular-nums; }
#days .card p { margin: .3rem 0 0; font-variant-numeric: tabular-nums; }
.day-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .55rem; }
.toolbar { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.toolbar a { color: var(--s1); margin-inline-start: auto; padding: .6rem; }
select, input[type="date"], button { font: inherit; min-height: 44px; color: inherit; background: var(--surface); border: 1px solid var(--grid); border-radius: .65rem; padding: .35rem .6rem; }
button { cursor: pointer; font-weight: 650; }
button:disabled { opacity: .45; cursor: default; }
button[aria-pressed="true"] { color: var(--s1); background: var(--page); border-color: var(--s1); }
.history-view { display: flex; flex-direction: column; gap: .5rem; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.chart { flex: 1; min-height: 9rem; position: relative; }
.dock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; background: var(--surface); border: 1px solid var(--grid); border-radius: .9rem; padding: .3rem; }
.dock button { font-size: clamp(.8rem, 3.8vw, 1rem); border-color: transparent; }
.dock button[aria-pressed="true"] { border-color: var(--s1); }
:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; }