/* Apple HIG look: grouped rounded cards, system colors, SF font */
:root { --bg: #f2f2f7; --panel: #fff; --text: #1c1c1e; --muted: #8a8a8e; --fill: rgba(118,118,128,.12); --blur: rgba(242,242,247,.72);
  --green: #34c759; --red: #ff3b30; --orange: #ff9500; --blue: #007aff; --tick: rgba(60,60,67,.3); --track: rgba(120,120,128,.2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #000; --panel: #1c1c1e; --text: #fff; --muted: #98989f; --fill: rgba(118,118,128,.24); --blur: rgba(0,0,0,.72);
  --green: #30d158; --red: #ff453a; --orange: #ff9f0a; --blue: #0a84ff; --tick: rgba(235,235,245,.3); --track: rgba(120,120,128,.32); } }
:root[data-theme="dark"] { --bg: #000; --panel: #1c1c1e; --text: #fff; --muted: #98989f; --fill: rgba(118,118,128,.24); --blur: rgba(0,0,0,.72);
  --green: #30d158; --red: #ff453a; --orange: #ff9f0a; --blue: #0a84ff; --tick: rgba(235,235,245,.3); --track: rgba(120,120,128,.32); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); font: 17px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", system-ui, sans-serif; -webkit-font-smoothing: antialiased; color: var(--text); display: grid; place-items: start center; min-height: 100vh; padding: 20px 0; }
.screen { width: min(96vw, 1000px); display: grid; gap: 16px; }
.top { display: flex; gap: 12px; align-items: center; }
.state { min-width: 52px; height: 32px; padding: 0 12px; border-radius: 99px; background: var(--fill); color: var(--muted); font-weight: 600; font-size: 15px; display: grid; place-items: center; flex: none; }
.state.on { background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green); }
.name { flex: 1; font-size: clamp(22px, 3.2vw, 34px); font-weight: 700; letter-spacing: -.02em; }
.help { background: var(--fill); color: var(--blue); border: 0; border-radius: 99px; padding: 7px 16px; text-decoration: none; font: inherit; font-size: 15px; cursor: pointer; }
.top .theme-btn { width: 36px; height: 32px; font-size: 16px; }
.mid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; }
.bars { background: var(--panel); border-radius: 20px; height: 520px; display: flex; align-items: flex-end; gap: 3%; padding: 16px 16px 40px; position: relative; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; position: relative; }
.bar .fill { width: 100%; background: var(--green); border-radius: 8px; transition: height .6s; min-height: 3px; }
.bar.red .fill { background: var(--red); }
.bar .val { line-height: 1.15; margin-bottom: 4px; white-space: pre-line; }
.bar .lbl { position: absolute; bottom: -28px; font-weight: 400; font-size: 13px; color: var(--muted); }
.gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.g { background: var(--panel); border-radius: 20px; padding: 10px 10px 12px; }
.g svg { width: 100%; display: block; }
.g .tag { text-align: center; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; text-transform: uppercase; }
.g .arc { fill: none; stroke: var(--track); stroke-width: 6; stroke-linecap: round; }
.g .hot { fill: none; stroke: var(--red); stroke-width: 6; stroke-linecap: round; }
.g .tk { stroke: var(--tick); stroke-width: 1.5; }
.g .nd { fill: var(--orange); } .g .hub { fill: var(--orange); }
.g .num { fill: var(--text); font-weight: 600; } .g .sc { fill: var(--muted); }
.needle { transition: transform .8s cubic-bezier(.3,1.3,.5,1); transform-origin: 100px 100px; }
.foot { display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: var(--muted); flex-wrap: wrap; gap: 8px; padding: 0 4px; }
.brand { font-weight: 400; }
@media (max-width: 760px) {
  /* fit one phone screen exactly (minus the bottom tab bar): bars take whatever the gauges leave */
  body { padding: 10px 0; }
  .screen { width: 100%; padding: 0 12px; gap: 10px; height: calc(100dvh - 84px - env(safe-area-inset-bottom)); grid-template-rows: auto minmax(0, 1fr) auto; }
  .top { gap: 8px; }
  .mid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; min-height: 0; }
  .bars { height: auto; min-height: 0; gap: 2%; padding: 12px 8px 36px; } .bar { font-size: 10px; } .bar .lbl { font-size: 12px; }
  .gauges { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .g { padding: 6px 4px 8px; border-radius: 14px; } .g .tag { font-size: 10px; }
  .foot { font-size: 13px; }
}