/* Weather-specific palette and full, unobscured panorama */
body {
  --page-bg: #e8ecec;
  --panel-bg: #fbfcfc;
  --panel-alt: #f0f3f3;
  --ink: #29363b;
  --muted: #64747a;
  --line: #d4dddf;
  --accent: #486c79;
  --accent-soft: #e1ebed;
  --shadow: 0 9px 28px rgba(37, 56, 64, .10);
  background: var(--page-bg);
  color: var(--ink);
  transition: background-color .45s, color .3s;
}
.weather-hero {
  width: 100%;
  aspect-ratio: 2048 / 682;
  background-image: var(--weather-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: var(--page-bg);
}
body.weather-rain {
  --weather-image: url("weather-rain.png"); --page-bg: #dce8ea; --panel-bg: #f7fbfc;
  --panel-alt: #eaf3f5; --ink: #1d353d; --muted: #536e78; --line: #c3d5da;
  --accent: #167f83; --accent-soft: #dcefee; --shadow: 0 9px 28px rgba(20,55,68,.12);
}
body.weather-sunny {
  --weather-image: url("weather-sunny.png"); --page-bg: #f3eee0; --panel-bg: #fffdf7;
  --panel-alt: #f8f1dc; --ink: #433a27; --muted: #776a50; --line: #e7d9b7;
  --accent: #967024; --accent-soft: #f3e9ca; --shadow: 0 9px 28px rgba(92,69,23,.11);
}
body.weather-cloudy {
  --weather-image: url("weather-cloudy.png"); --page-bg: #e8ecec; --panel-bg: #fbfcfc;
  --panel-alt: #f0f3f3; --ink: #29363b; --muted: #64747a; --line: #d4dddf;
  --accent: #486c79; --accent-soft: #e1ebed;
}
body.weather-cold {
  --weather-image: url("weather-cold.png"); --page-bg: #e4edf3; --panel-bg: #f9fcff;
  --panel-alt: #edf5fa; --ink: #233746; --muted: #5c7383; --line: #ccdae4;
  --accent: #397c9b; --accent-soft: #deedf4; --shadow: 0 9px 28px rgba(31,66,91,.11);
}
body.weather-windy {
  --weather-image: url("weather-windy.png"); --page-bg: #e5eee7; --panel-bg: #fafdfb;
  --panel-alt: #edf5ef; --ink: #283c32; --muted: #62786a; --line: #cfdfd2;
  --accent: #477d5a; --accent-soft: #e0eee3; --shadow: 0 9px 28px rgba(40,76,52,.10);
}
body.weather-night {
  --weather-image: url("weather-night.png"); --page-bg: #202c36; --panel-bg: #2c3943;
  --panel-alt: #35434d; --ink: #f2f3ec; --muted: #c0c8c5; --line: #4a5a63;
  --accent: #d5b56c; --accent-soft: #4c493c; --shadow: 0 10px 30px rgba(0,0,0,.24);
}
body.weather-night-rain {
  --weather-image: url("weather-night-rain.png"); --page-bg: #202a36; --panel-bg: #2b3744;
  --panel-alt: #344250; --ink: #f1f4f5; --muted: #bbc8ce; --line: #495966;
  --accent: #69bdb3; --accent-soft: #354d50; --shadow: 0 10px 30px rgba(0,0,0,.25);
}
/* Use direct URLs here; the original inline theme also defines --weather-image. */
body.weather-rain .weather-hero { background-image: url("weather-rain.png"); }
body.weather-sunny .weather-hero { background-image: url("weather-sunny.png"); }
body.weather-cloudy .weather-hero { background-image: url("weather-cloudy.png"); }
body.weather-cold .weather-hero { background-image: url("weather-cold.png"); }
body.weather-windy .weather-hero { background-image: url("weather-windy.png"); }
body.weather-night .weather-hero { background-image: url("weather-night.png"); }
body.weather-night-rain .weather-hero { background-image: url("weather-night-rain.png"); }
.topbar { background: linear-gradient(110deg,#08765e,#078b70 62%,#08745d); color:#fff; box-shadow:0 3px 16px rgba(5,47,36,.22); }
.app { background: var(--page-bg); color: var(--ink); }
.sidebar { background: var(--panel-bg); border-color: var(--line); color: var(--ink); }
.nav-title,.side-info,.side-info strong,.station-title,.station-meta,.device-summary,.device-summary strong,.panel-title,.panel-sub { color:var(--ink); }
.nav-item { color:var(--muted); }
.nav-item:hover,.nav-item.active { background:var(--panel-alt); color:var(--accent); }
.nav-item.active { border-inline-start-color:var(--accent); }
.rangebar,.kpi,.weather-summary-card,.panel:not(#charts) { background:var(--panel-bg); color:var(--ink); border-color:var(--line); box-shadow:var(--shadow); }
.weather-summary-card.alert { background:var(--panel-alt); }
.head-tools .select,.head-tools .soft-btn,.select,.soft-btn { background:var(--panel-bg); color:var(--ink); border-color:var(--line); }
.range-btn { color:var(--muted); }
.range-btn.active { background:var(--accent); color:#fff; }
.kpi-icon { background:var(--accent-soft); color:var(--accent); }
.kpi-value { color:var(--ink); }
.panel-head { border-color:var(--line); }
#records .data-table thead th { background:var(--panel-alt); color:var(--ink); }
#records .data-table tbody tr:nth-child(even) { background:color-mix(in srgb,var(--panel-alt) 74%,transparent); }
#charts { background:#fff; color:#26343a; border-color:var(--line); }

/* Larger, stronger typography for the dashboard controls and readings */
.rangebar .range-btn { font-size:14px; font-weight:750; padding:8px 12px; }
.rangebar .date-controls { font-size:13px; font-weight:700; color:var(--ink); }
.rangebar .date-controls input { font-size:14px; font-weight:700; color:var(--ink); min-height:38px; }
.rangebar #applyRange { font-size:13px; font-weight:750; padding:7px 11px; }
.kpi .kpi-label { font-size:14px; font-weight:700; color:var(--ink); }
.kpi .kpi-value { font-size:25px; font-weight:800; color:var(--ink); }
.kpi .kpi-value small { font-size:14px; font-weight:700; color:var(--muted); }
.kpi .kpi-foot { font-size:12px; font-weight:650; color:var(--muted); }
.panel .panel-title { font-size:16px; font-weight:800; color:var(--ink); }
.panel .panel-sub { font-size:13px; font-weight:600; color:var(--muted); }
#charts .chart-range,#charts .chart-cursor-time { font-size:13px; font-weight:750; }
#charts .chart-window-control label { font-size:13px; font-weight:750; color:var(--ink); }
#charts .chart-window-control select { font-size:14px; font-weight:700; color:var(--ink); }
#charts .panel-tools .tiny-btn { font-size:13px; font-weight:700; }
@media (max-width:780px) {
  .rangebar .range-btn { font-size:13px; padding:7px 9px; }
  .rangebar .date-controls input { font-size:13px; }
  .kpi .kpi-label { font-size:13px; }
  .kpi .kpi-value { font-size:23px; }
}

/* Subtle, nearly opaque surfaces and light text in both night scenes */
body.weather-night, body.weather-night-rain {
  --page-bg:#202a34;
  --panel-bg:rgba(37,48,58,.97);
  --panel-alt:rgba(40,52,63,.97);
  --ink:#f2f5f6;
  --muted:#c3cdd2;
  --line:rgba(190,207,216,.16);
  --shadow:0 5px 18px rgba(0,0,0,.12);
}
body.weather-night .sidebar, body.weather-night-rain .sidebar,
body.weather-night .rangebar, body.weather-night-rain .rangebar,
body.weather-night .kpi, body.weather-night-rain .kpi,
body.weather-night .weather-summary-card, body.weather-night-rain .weather-summary-card,
body.weather-night .panel:not(#charts), body.weather-night-rain .panel:not(#charts) {
  background-color:var(--panel-bg);
  color:var(--ink);
  border-color:var(--line);
  box-shadow:var(--shadow);
}
body.weather-night .weather-summary-card.alert, body.weather-night-rain .weather-summary-card.alert {
  background-color:var(--panel-bg);
  border-color:rgba(213,181,108,.38);
}
body.weather-night .nav-title, body.weather-night-rain .nav-title,
body.weather-night .nav-item, body.weather-night-rain .nav-item,
body.weather-night .side-info, body.weather-night-rain .side-info,
body.weather-night .side-info strong, body.weather-night-rain .side-info strong,
body.weather-night .kpi-label, body.weather-night-rain .kpi-label,
body.weather-night .kpi-value, body.weather-night-rain .kpi-value,
body.weather-night .weather-summary-label, body.weather-night-rain .weather-summary-label,
body.weather-night .weather-summary-value, body.weather-night-rain .weather-summary-value,
body.weather-night .weather-summary-note, body.weather-night-rain .weather-summary-note,
body.weather-night .weather-summary-head, body.weather-night-rain .weather-summary-head,
body.weather-night .weather-summary-coverage, body.weather-night-rain .weather-summary-coverage,
body.weather-night .panel-title, body.weather-night-rain .panel-title,
body.weather-night .panel-sub, body.weather-night-rain .panel-sub,
body.weather-night .summary-thresholds summary, body.weather-night-rain .summary-thresholds summary,
body.weather-night .summary-thresholds-fields label, body.weather-night-rain .summary-thresholds-fields label {
  color:var(--ink);
}
body.weather-night .kpi .kpi-foot, body.weather-night-rain .kpi .kpi-foot,
body.weather-night .kpi .kpi-value small, body.weather-night-rain .kpi .kpi-value small,
body.weather-night .summary-thresholds-fields input, body.weather-night-rain .summary-thresholds-fields input {
  color:var(--muted);
}
body.weather-night .nav-item.active, body.weather-night-rain .nav-item.active,
body.weather-night .nav-item:hover, body.weather-night-rain .nav-item:hover {
  background:var(--panel-alt);
  color:var(--ink);
}
body.weather-night .head-tools .select, body.weather-night-rain .head-tools .select,
body.weather-night .head-tools .soft-btn, body.weather-night-rain .head-tools .soft-btn,
body.weather-night .summary-thresholds-fields input, body.weather-night-rain .summary-thresholds-fields input {
  background:var(--panel-alt);
  border-color:var(--line);
}
body.weather-night #records .data-table thead th, body.weather-night-rain #records .data-table thead th {
  background:var(--panel-alt); color:var(--ink); border-color:var(--line);
}
body.weather-night #records .data-table td, body.weather-night-rain #records .data-table td {
  color:var(--muted); border-color:var(--line);
}
body.weather-night #records .data-table tbody tr:nth-child(even), body.weather-night-rain #records .data-table tbody tr:nth-child(even) {
  background:var(--panel-alt);
}
body.weather-night #charts, body.weather-night-rain #charts {
  background:var(--panel-bg);
  color:var(--ink);
  border-color:var(--line);
}
body.weather-night #charts .unified-plot, body.weather-night-rain #charts .unified-plot {
  background:#fff;
  color:#26343a;
}

/* Day surfaces stay close to the selected weather background, with dark text */
body:not(.weather-night):not(.weather-night-rain) {
  --panel-bg:color-mix(in srgb,var(--page-bg) 92%,#fff 8%);
  --panel-alt:color-mix(in srgb,var(--page-bg) 88%,#fff 12%);
  --line:color-mix(in srgb,var(--page-bg) 78%,var(--ink) 22%);
  --ink:#27342f;
  --muted:#53645c;
  --shadow:0 4px 16px rgba(47,61,50,.055);
}
body:not(.weather-night):not(.weather-night-rain) .sidebar,
body:not(.weather-night):not(.weather-night-rain) .rangebar,
body:not(.weather-night):not(.weather-night-rain) .kpi,
body:not(.weather-night):not(.weather-night-rain) .weather-summary-card,
body:not(.weather-night):not(.weather-night-rain) .panel:not(#charts) {
  background-color:var(--panel-bg);
  color:var(--ink);
  border-color:var(--line);
  box-shadow:var(--shadow);
}
body:not(.weather-night):not(.weather-night-rain) .weather-summary-card.alert {
  background-color:var(--panel-bg);
}
body:not(.weather-night):not(.weather-night-rain) .nav-item,
body:not(.weather-night):not(.weather-night-rain) .nav-title,
body:not(.weather-night):not(.weather-night-rain) .side-info,
body:not(.weather-night):not(.weather-night-rain) .station-meta,
body:not(.weather-night):not(.weather-night-rain) .kpi-label,
body:not(.weather-night):not(.weather-night-rain) .kpi-value,
body:not(.weather-night):not(.weather-night-rain) .weather-summary-label,
body:not(.weather-night):not(.weather-night-rain) .weather-summary-value,
body:not(.weather-night):not(.weather-night-rain) .weather-summary-head,
body:not(.weather-night):not(.weather-night-rain) .panel-title,
body:not(.weather-night):not(.weather-night-rain) .panel-sub,
body:not(.weather-night):not(.weather-night-rain) .date-controls,
body:not(.weather-night):not(.weather-night-rain) .range-btn {
  color:var(--ink);
}
body:not(.weather-night):not(.weather-night-rain) .kpi .kpi-foot,
body:not(.weather-night):not(.weather-night-rain) .kpi .kpi-value small,
body:not(.weather-night):not(.weather-night-rain) .weather-summary-note,
body:not(.weather-night):not(.weather-night-rain) .weather-summary-coverage,
body:not(.weather-night):not(.weather-night-rain) .summary-thresholds summary,
body:not(.weather-night):not(.weather-night-rain) .summary-thresholds-fields label {
  color:var(--muted);
}
body:not(.weather-night):not(.weather-night-rain) .head-tools .select,
body:not(.weather-night):not(.weather-night-rain) .head-tools .soft-btn,
body:not(.weather-night):not(.weather-night-rain) .date-controls input,
body:not(.weather-night):not(.weather-night-rain) .summary-thresholds-fields input {
  background:var(--panel-alt);
  color:var(--ink);
  border-color:var(--line);
}
body:not(.weather-night):not(.weather-night-rain) #charts {
  background:var(--panel-bg);
  color:var(--ink);
  border-color:var(--line);
}
body:not(.weather-night):not(.weather-night-rain) #charts .unified-plot {
  background:#fff;
  color:#26343a;
}
.header-clock {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  color:#fff;
  text-align:center;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.header-clock strong { font-size:16px; line-height:1.1; font-weight:800; letter-spacing:.04em; }
.header-clock span { font-size:11px; line-height:1.2; font-weight:650; opacity:.94; }
@media(max-width:700px) {
  .topbar {
    height:auto;
    min-height:58px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand actions" "clock clock";
    row-gap:5px;
    padding:7px 12px;
  }
  .topbar .brand { grid-area:brand; min-width:0; }
  .topbar .top-actions { grid-area:actions; gap:9px; }
  .topbar .header-clock { grid-area:clock; flex-direction:row; gap:9px; padding:1px 0 2px; }
  .header-clock strong { font-size:14px; }
  .header-clock span { font-size:10px; }
}
.station-cover {
  background-position:center 52%;
  background-repeat:no-repeat;
  background-size:cover;
}
.station-cover::before,.station-cover::after { display:none; }
body.weather-sunny .station-cover { background-image:url("weather-card-sunny.jpg"); }
body.weather-cloudy .station-cover { background-image:url("weather-card-cloudy.jpg"); }
body.weather-rain .station-cover { background-image:url("weather-card-rain.jpg"); }
body.weather-cold .station-cover { background-image:url("weather-card-cold.jpg"); }
body.weather-windy .station-cover { background-image:url("weather-card-windy.jpg"); }
body.weather-night .station-cover { background-image:url("weather-card-night.jpg"); }
body.weather-night-rain .station-cover { background-image:url("weather-card-night-rain.jpg"); }
.station-cover { position:relative; isolation:isolate; }
.lunar-display[hidden] { display:none; }
.lunar-display {
  position:absolute; z-index:2; top:7px; inset-inline-start:8px;
  display:flex; align-items:center; gap:6px; min-height:37px;
  padding:3px 9px 3px 4px; border:1px solid #ffffff55; border-radius:22px;
  background:rgba(8,17,26,.78); color:#fff; box-shadow:0 2px 9px #0005;
  font-size:11px; line-height:1.2; font-weight:800; white-space:nowrap;
}
.moon-phase-svg { display:block; width:29px; height:29px; flex:none; filter:drop-shadow(0 1px 2px #0008); }
.weather-cover-caption {
  position:absolute; z-index:2; inset-inline:0; bottom:0; min-height:25px;
  display:flex; align-items:center; padding:4px 10px;
  background:linear-gradient(90deg,rgba(7,15,22,.78),rgba(7,15,22,.68));
  border-top:1px solid #ffffff24; color:#fff; text-shadow:0 1px 2px #000c;
  font-size:12px; line-height:1.3; font-weight:800; letter-spacing:.1px;
}

/* Compact vertical layout keeps the complete brand and session controls visible. */
@media (max-width:700px){.topbar{grid-template-columns:minmax(0,1fr);grid-template-areas:"brand" "actions" "clock";row-gap:7px}.topbar .brand{justify-self:center;gap:9px}.topbar .brand-copy{max-width:none}.topbar .brand-name{white-space:nowrap}.topbar .top-actions{justify-self:center;justify-content:center;flex-wrap:wrap;max-width:100%;gap:7px}.topbar .auth-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.topbar .auth-controls button{white-space:nowrap}}
@media (max-width:460px){.topbar .brand-logo{width:78px;height:48px}.topbar .brand-copy{max-width:none}}