:root {
  color-scheme: light;
  --page: #e7eae6;
  --paper: #f8faf7;
  --paper-alt: #f0f3ef;
  --ink: #17201c;
  --muted: #66726c;
  --rule: #b9c2bc;
  --rule-dark: #89958e;
  --green: #087a52;
  --blue: #066f89;
  --amber: #a55c00;
  --red: #a53a32;
  --input: #ffffff;
  --thead: #dfe4df;
  --hover: #e9eee9;
  --temp-tint: #e8f3ed;
  --pressure-tint: #e6f1f4;
  --humidity-tint: #f6eee2;
  --backdrop: #17201c80;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --page: #131715; --paper: #1b211e; --paper-alt: #222925; --ink: #edf2ee;
  --muted: #a1aca6; --rule: #3b4640; --rule-dark: #637069; --green: #66d4a0;
  --blue: #63bed5; --amber: #e3a653; --red: #ee7f73; --input: #111613;
  --thead: #29312d; --hover: #252e29; --temp-tint: #1b2c24; --pressure-tint: #192a2f;
  --humidity-tint: #30271b; --backdrop: #000000a8;
}

html[data-theme="black"] {
  color-scheme: dark;
  --page: #000000; --paper: #050505; --paper-alt: #0b0b0b; --ink: #f5f5f5;
  --muted: #a8a8a8; --rule: #292929; --rule-dark: #5a5a5a; --green: #66e0a5;
  --blue: #68c9e3; --amber: #f0b45f; --red: #ff8479; --input: #000000;
  --thead: #111111; --hover: #151515; --temp-tint: #07140e; --pressure-tint: #061217;
  --humidity-tint: #171006; --backdrop: #000000d9;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: var(--page); color: var(--ink); font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-variant-numeric: tabular-nums; }
button, input, a { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
main { width: min(1420px, 100%); margin: auto; padding: 34px clamp(18px, 3vw, 44px) 56px; }

.masthead, .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.masthead { margin-bottom: 24px; }
.kicker { margin: 0 0 7px; color: var(--green); font: 700 12px/1.2 "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(36px, 5vw, 66px); line-height: .95; letter-spacing: -.055em; font-weight: 750; }
h2 { margin: 0; font-size: 22px; line-height: 1.15; letter-spacing: -.025em; }
.station-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 13px 0 0; color: var(--muted); font: 600 13px/1.3 "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }
.mast-actions { display: flex; align-items: flex-end; gap: 22px; }
.settings-controls { display: flex; align-items: flex-end; gap: 7px; }
.setting-field { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font: 700 10px "SFMono-Regular", Consolas, monospace; }
.setting-field b { font: inherit; }
.setting-field select { width: 92px; min-height: 36px; padding: 6px 26px 6px 9px; }
.input-with-unit { display: flex; align-items: center; min-height: 36px; border: 1px solid var(--rule-dark); background: var(--input); }
.input-with-unit input { width: 70px; min-height: 34px; padding: 6px 4px 6px 9px; border: 0; background: transparent; }
.input-with-unit > span { padding: 0 8px 0 3px; color: var(--muted); }
.settings-reset { min-height: 36px; padding: 7px 10px; border: 1px solid var(--rule-dark); background: transparent; color: var(--muted); cursor: pointer; font: 700 9px/1 "SFMono-Regular", Consolas, monospace; }
.settings-reset:hover { border-color: var(--ink); color: var(--ink); }
.connection { display: flex; gap: 11px; align-items: center; text-align: right; font-family: "SFMono-Regular", Consolas, monospace; }
.connection b { display: block; font-size: 13px; letter-spacing: .04em; }
.connection small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 4px #66726c20; }
.status-dot.live { background: var(--green); box-shadow: 0 0 0 4px #087a5220; }
.status-dot.error { background: var(--red); box-shadow: 0 0 0 4px #a53a3220; }

.live-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule-dark); background: var(--paper); }
.no-humidity .live-grid { grid-template-columns: repeat(2, 1fr); }
.no-humidity .humidity-stat { display: none; }
.live-card { min-width: 0; padding: 23px 26px 20px; border-right: 1px solid var(--rule); }
.live-card:last-child { border-right: 0; }
.card-label { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); font: 600 12px/1.2 "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }
.code { color: var(--green); font-weight: 800; }
.pressure .code { color: var(--blue); }
.humidity .code { color: var(--amber); }
.reading { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 23px; }
.reading strong { font: 520 clamp(48px, 6vw, 82px)/.78 "SFMono-Regular", Consolas, monospace; letter-spacing: -.075em; }
.reading > span { color: var(--muted); font: 700 15px "SFMono-Regular", Consolas, monospace; }
.live-card footer { display: flex; justify-content: space-between; gap: 18px; color: var(--muted); font: 600 11px/1.4 "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }
.live-card footer b { color: var(--ink); font-size: 13px; }

.control-panel { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 15px; border: 1px solid var(--rule-dark); border-top: 0; background: var(--paper-alt); }
.range-picker, .range-editor, .period-tabs { display: flex; align-items: center; gap: 7px; }
.range-picker > label { display: flex; align-items: center; gap: 9px; color: var(--muted); font: 700 11px "SFMono-Regular", Consolas, monospace; }
.range-picker select { min-width: 205px; }
.period-tabs button { min-height: 38px; padding: 8px 13px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font: 750 12px "SFMono-Regular", Consolas, monospace; }
.period-tabs button:hover { border-color: var(--rule); color: var(--ink); }
.period-tabs button.active { background: var(--ink); color: var(--paper); }
.range-editor { color: var(--muted); font: 700 11px "SFMono-Regular", Consolas, monospace; }
.range-editor label { display: flex; align-items: center; gap: 8px; }
input, select { min-height: 38px; padding: 8px 10px; border: 1px solid var(--rule-dark); border-radius: 0; background: var(--input); color: var(--ink); font: 600 12px "SFMono-Regular", Consolas, monospace; }
input { width: 174px; }
.action { display: inline-flex; min-height: 38px; padding: 8px 13px; align-items: center; justify-content: center; border: 1px solid var(--rule-dark); border-radius: 0; background: var(--paper); color: var(--ink); cursor: pointer; text-decoration: none; white-space: nowrap; font: 750 11px/1 "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }
.action:hover { background: var(--input); border-color: var(--ink); }
.action.active { border-color: var(--green); color: var(--green); }
.action.primary { background: var(--ink); color: var(--paper); }

.chart-shell, .distribution-panel, .diagnostic-panel, .archive-panel { margin-top: 18px; border: 1px solid var(--rule-dark); background: var(--paper); }
.section-head { padding: 18px 20px; border-bottom: 1px solid var(--rule); }
.section-head .kicker { margin-bottom: 5px; }
.interaction-hint { padding: 10px 20px; border-bottom: 1px solid var(--rule); background: var(--paper-alt); color: var(--muted); font: 650 11px/1.35 "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }
.weather-chart { width: 100%; height: 720px; touch-action: none; }
.no-humidity .weather-chart { height: 550px; }
.chart-meta, .table-footer { display: flex; justify-content: space-between; gap: 18px; padding: 11px 20px; border-top: 1px solid var(--rule); color: var(--muted); font: 650 11px "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }

.distribution-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.no-humidity .distribution-grid { grid-template-columns: repeat(2, 1fr); }
.distribution { min-width: 0; padding: 20px; border-right: 1px solid var(--rule); }
.distribution:last-child { border-right: 0; }
.distribution header { display: flex; justify-content: space-between; margin-bottom: 20px; font: 750 13px "SFMono-Regular", Consolas, monospace; }
.distribution header span { color: var(--muted); }
.distribution.temp { color: var(--green); }
.distribution.pressure { color: var(--blue); }
.distribution.humidity { color: var(--amber); }
.dist-values { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.dist-values small { display: block; margin-bottom: 6px; color: var(--muted); font: 700 10px "SFMono-Regular", Consolas, monospace; }
.dist-values strong { color: var(--ink); font: 600 clamp(18px, 2vw, 28px)/1 "SFMono-Regular", Consolas, monospace; }
.range-bar { height: 4px; margin-top: 18px; background: var(--rule); }
.range-bar span { display: block; height: 100%; background: currentColor; }

.health-badge { padding: 7px 10px; border: 1px solid var(--rule-dark); color: var(--muted); font: 800 12px "SFMono-Regular", Consolas, monospace; }
.health-badge.healthy { border-color: var(--green); color: var(--green); background: #087a520b; }
.health-badge.warning { border-color: var(--amber); color: var(--amber); background: #a55c000b; }
.health-badge.error { border-color: var(--red); color: var(--red); background: #a53a320b; }
.diagnostic-grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.diagnostic-metric { min-width: 0; padding: 19px 20px; border-right: 1px solid var(--rule); }
.diagnostic-metric:last-child { border-right: 0; }
.diagnostic-metric > span { display: block; color: var(--muted); font: 700 11px "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }
.diagnostic-metric strong { display: block; margin: 13px 0 8px; font: 600 clamp(23px, 2.5vw, 36px)/1 "SFMono-Regular", Consolas, monospace; letter-spacing: -.04em; }
.diagnostic-metric small { display: block; overflow: hidden; color: var(--muted); font: 600 11px "SFMono-Regular", Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.cadence-panel { padding: 15px 20px 19px; border-top: 1px solid var(--rule); background: var(--paper-alt); }
.cadence-label { display: flex; justify-content: space-between; margin-bottom: 10px; color: var(--muted); font: 650 11px "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }
.cadence-strip { display: flex; align-items: flex-end; gap: 2px; height: 44px; }
.cadence-bar { flex: 1 1 0; min-width: 2px; height: var(--height); background: var(--green); }
.cadence-bar.delayed { background: var(--amber); }
.cadence-bar.gap { background: var(--red); }
.cadence-empty { color: var(--muted); font: 600 12px "SFMono-Regular", Consolas, monospace; }

.archive-head { align-items: center; }
.period-tabs { overflow-x: auto; scrollbar-width: none; }
.table-scroll { max-height: 600px; overflow: auto; }
table { width: 100%; min-width: 920px; table-layout: fixed; border-collapse: collapse; font: 600 13px "SFMono-Regular", Consolas, monospace; }
.period-col { width: 18%; }.count-col { width: 7%; }.temp-col,.pressure-col,.humidity-col { width: 8.333%; }
.no-humidity .period-col { width: 18%; }.no-humidity .count-col { width: 7%; }
.no-humidity .temp-col,.no-humidity .pressure-col { width: 12.5%; }
.temp-col { background: var(--temp-tint); }.pressure-col { background: var(--pressure-tint); }.humidity-col { background: var(--humidity-tint); }
.temp-cell { background: var(--temp-tint); }.pressure-cell { background: var(--pressure-tint); }.humidity-cell { background: var(--humidity-tint); }
th, td { height: 46px; padding: 10px 13px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); text-align: right; vertical-align: middle; }
tbody td:first-child { position: sticky; left: 0; z-index: 1; background: var(--paper); text-align: left; }
thead .period-head { position: sticky; left: 0; z-index: 3; background: var(--thead); text-align: left; }
thead .count-head,tbody td:nth-child(2) { text-align: center; }
thead .period-head,thead .count-head { padding-bottom: 16px; vertical-align: bottom; }
thead { position: sticky; top: 0; z-index: 2; background: var(--thead); }
th { color: var(--muted); font-size: 11px; text-transform: uppercase; }
thead .temp-group { background: var(--temp-tint); }
thead .pressure-group { background: var(--pressure-tint); }
thead .humidity-group { background: var(--humidity-tint); }
tbody tr:hover td { filter: brightness(.96); }
html[data-theme="dark"] tbody tr:hover td,html[data-theme="black"] tbody tr:hover td { filter: brightness(1.2); }
.temp-text { color: var(--green); }
.pressure-text { color: var(--blue); }
.humidity-text { color: var(--amber); }
.empty-cell { padding: 46px; color: var(--muted); text-align: center !important; }

.range-dialog { width: min(720px, calc(100% - 24px)); max-height: calc(100vh - 40px); padding: 0; overflow: auto; border: 1px solid var(--rule-dark); border-radius: 0; background: var(--paper); color: var(--ink); box-shadow: 0 18px 60px #0005; }
.range-dialog::backdrop { background: var(--backdrop); }
.range-dialog form { padding: 24px; border-bottom: 1px solid var(--rule); }
.range-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.dialog-close { width: 38px; height: 38px; border: 1px solid var(--rule-dark); background: transparent; color: var(--ink); cursor: pointer; font-size: 25px; line-height: 1; }
.dialog-intro { margin: 0 0 21px; color: var(--muted); line-height: 1.5; }
.form-field { display: flex; flex: 1; flex-direction: column; gap: 7px; margin-top: 14px; color: var(--muted); font: 700 11px "SFMono-Regular", Consolas, monospace; }
.form-field input,.form-field select { width: 100%; }
.form-row { display: flex; gap: 12px; }
.dialog-actions { display: flex; justify-content: flex-end; margin-top: 20px; }
.saved-ranges { padding: 20px 24px 24px; }
.saved-ranges h3 { margin: 0 0 12px; font-size: 16px; }
.saved-range { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule); }
.saved-range b { font-size: 14px; }.saved-range small { grid-column: 1; color: var(--muted); font-family: "SFMono-Regular", Consolas, monospace; }
.saved-range button { grid-column: 2; grid-row: 1 / span 2; }
.saved-empty { padding: 14px 0; color: var(--muted); }

@media (max-width: 1050px) {
  .control-panel { flex-direction: column; align-items: stretch; }
  .range-picker { justify-content: space-between; }
  .range-editor { overflow-x: auto; }
  .diagnostic-grid { grid-template-columns: repeat(3, 1fr); }
  .diagnostic-metric:nth-child(3) { border-right: 0; }
  .diagnostic-metric:nth-child(-n+3) { border-bottom: 1px solid var(--rule); }
}

@media (max-width: 720px) {
  body { font-size: 14px; }
  main { padding: 22px 10px 36px; }
  .masthead { flex-direction: column; align-items: stretch; }
  .mast-actions { width: 100%; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .settings-controls { max-width: 276px; flex-wrap: wrap; justify-content: flex-start; }
  .setting-field { align-items: flex-start; }
  h1 { font-size: 39px; }
  .station-meta { font-size: 11px; }
  .connection small { display: none; }
  .live-grid, .no-humidity .live-grid { grid-template-columns: 1fr; }
  .live-card { padding: 20px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .live-card:last-child { border-bottom: 0; }
  .reading strong { font-size: 58px; }
  .control-panel { padding: 10px; }
  .range-picker { align-items: end; }
  .range-picker > label { flex: 1; flex-direction: column; align-items: flex-start; }
  .range-picker select { width: 100%; min-width: 0; }
  .range-editor { display: grid; grid-template-columns: 1fr 1fr auto; gap: 7px; align-items: end; overflow: visible; }
  .range-editor > span { display: none; }
  .range-editor label { flex-direction: column; align-items: flex-start; gap: 5px; }
  .range-editor input { width: 100%; font-size: 11px; }
  .section-head { padding: 16px; align-items: center; }
  .section-head h2 { font-size: 19px; }
  .interaction-hint { padding: 9px 16px; font-size: 10px; }
  .weather-chart { height: 680px; }
  .no-humidity .weather-chart { height: 540px; }
  .chart-meta { flex-wrap: wrap; padding: 10px 16px; }
  .distribution-grid, .no-humidity .distribution-grid { grid-template-columns: 1fr; }
  .distribution { border-right: 0; border-bottom: 1px solid var(--rule); }
  .dist-values { gap: 8px; }
  .dist-values strong { font-size: 19px; }
  .diagnostic-grid { grid-template-columns: 1fr 1fr; }
  .diagnostic-metric { padding: 16px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .diagnostic-metric:nth-child(2n) { border-right: 0; }
  .diagnostic-metric:nth-last-child(-n+2) { border-bottom: 0; }
  .diagnostic-metric strong { font-size: 27px; }
  .archive-head { align-items: flex-start; flex-direction: column; }
  .period-tabs { width: 100%; }
  .period-tabs button { flex: 1; }
  .form-row { flex-direction: column; gap: 0; }
}