:root{--bg:#0f1216;--fg:#f2f4f7;--muted:#aab3bd;--accent:#a2ff6f;--card:#151a20;--line:#26303a;--dim:#cfd6dd;--chart:#a9b4bf}
*{box-sizing:border-box} body{margin:0;font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Ubuntu,Arial;background:var(--bg);color:var(--fg)}
header{padding:18px 16px;border-bottom:1px solid var(--line);background:#12161a;position:sticky;top:0;z-index:5}
.title{font-weight:800;font-size:22px;letter-spacing:.2px}
.place{color:var(--muted);font-size:13px;margin-top:4px}
.wrap{max-width:980px;margin:0 auto;padding:14px}
.headerrow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.headerrow > div:first-child {
  display: flex;
  flex-direction: column;
}

.header-buttons {
  display: flex;
  gap: 8px;
}

.updated {
  flex-basis: 100%;
  color: var(--dim);
  font-size: 12px;
  margin-top: 6px;
}
.headerrow .btn + .btn { margin-left: 8px; }
.btn{border:1px solid var(--line);background:#11161b;color:var(--fg);padding:6px 10px;border-radius:8px;cursor:pointer;font-size:13px}
.grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:600px){.grid{grid-template-columns:1fr 1fr}.updated{flex-basis:auto;margin-top:0}}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
h2{margin:0 0 10px 0;font-size:18px}
.kv{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px dashed var(--line)}.kv:last-child{border-bottom:0}
.big{font-size:28px;font-weight:800}.subtle{color:var(--muted)}.pill{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--line);font-size:12px;color:var(--dim)}
footer{color:var(--muted);text-align:center;padding:18px;font-size:12px}
.chart{height:120px;width:100%;position:relative;margin-top:10px}
.chart canvas{display:block;width:100%;height:100%;max-width:100%}
.chart-title{font-size:12px;color:var(--muted);margin:4px 0 0 2px}

.charts-block{
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed var(--line);
}

.range-picker{
  display:inline-flex;
  flex-wrap:wrap;
  gap:2px;
  margin-left:10px;
  vertical-align:middle;
  background:#0f1318;
  border:1px solid var(--line);
  border-radius:8px;
  padding:2px;
}
.range-picker button{
  background:transparent;
  border:0;
  color:var(--muted);
  font-size:11px;
  font-weight:600;
  padding:4px 9px;
  border-radius:6px;
  cursor:pointer;
  font-family:inherit;
  letter-spacing:.02em;
}
.range-picker button:hover{ color:var(--fg); }
.range-picker button.active{
  background:var(--accent);
  color:#0f1216;
}
.range-label{ color:var(--muted); font-size:11px; font-weight:500; margin-left:4px; }

.time-small{
  font-size:11px;
  color:var(--muted);
  display:block;
  text-align:right;
}

.chart-max{position:absolute;right:6px;top:-6px;font-size:10px;color:var(--dim)}
.chart-cur{position:absolute;right:6px;top:10px;font-size:10px;color:var(--dim)}
.pill.dev-pill{margin-left:8px;font-weight:600}
.chart-max::before{content:"max ";opacity:.45;font-weight:500;text-transform:none;letter-spacing:0;font-size:9px}
.chart-cur::before{content:"now ";opacity:.55;font-weight:500;text-transform:none;letter-spacing:0;font-size:9px}
.chart-max{color:rgba(255,255,255,.5)}
.chart-cur{color:rgba(255,255,255,.7)}
.pill .offcount{ color:#ff4c4c; font-weight:600; }
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:16px;z-index:9999}
.modal.open{display:flex}
.modalcard{background:var(--card);border:1px solid var(--line);border-radius:14px;max-width:820px;width:100%;padding:16px;max-height:90vh;overflow:auto}
.formrow{display:grid;grid-template-columns:180px 1fr;gap:10px;align-items:center;margin:6px 0}
.formrow input{width:100%;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:#0f1318;color:var(--fg)}
.formsection{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px}.formtitle{font-weight:700;margin:8px 0}
.savebar{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}.msg{font-size:12px;color:var(--muted);margin-left:8px}

.modalcard.loading { position: relative; }
.modalcard.loading .formrow input,
.modalcard.loading .savebar .btn { opacity: .5; pointer-events: none; }

.progress {
  height: 4px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin: 8px 0 12px 0;
}
.progress > .fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width .25s ease;
}

.time{ font-variant-numeric: tabular-nums; color: var(--muted); }
.kv.dim{ opacity:.6; }

.subsection{
  margin:8px 0 4px; padding-top:6px; border-top:1px dashed var(--line);
  color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
}

/* Humidity coloring */
.hum-verydry { color:#ffffff; }
.hum-dry     { color:#c9fbf1; }
.hum-comfy   { color:#7eead7; }
.hum-humid   { color:#2fd2b5; }
.hum-wet     { color:#0ba58b; }

/* Temperature coloring */
.temp-minus-0-5   { color:#9cd6ff; }
.temp-minus-6-10  { color:#6bb9ff; }
.temp-minus-11-25 { color:#3d8cff; }
.temp-below-25    { color:#1b4cff; }
.temp-cool        { color:#63b3ff; }
.temp-mild        { color:#46c463; }
.temp-warm        { color:#ff9913; }
.temp-hot         { color:#ff4d4f; }

/* Wind coloring */
.wind-low  { color:#46c463; }
.wind-mid  { color:#ff9913; }
.wind-high { color:#ff0000; }
.wind-emergency { color:#ff0033; font-weight:700; text-shadow:0 0 6px rgba(255,0,0,.4); }

/* Air Quality coloring */
.aq-good, .tvoc-excellent   { color:#00e400; }
.aq-moderate, .tvoc-good    { color:#ffff00; }
.aq-usg, .tvoc-moderate     { color:#ff7e00; }
.aq-unhealthy, .tvoc-poor   { color:#ff0000; }
.aq-very, .aq-hazardous,
.tvoc-unhealthy             { color:#8f3f97; }

/* Reset Records modal alignment */
.modalcard .kv {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
}

.modalcard .kv div:nth-child(2),
.modalcard .kv span[id^="rec_"] {
  text-align: right;
  justify-self: end;
  min-width: 130px;
}

.modalcard .kv button {
  justify-self: end;
}

.modalcard .savebar {
  justify-content: flex-end;
}

/* --- Forecast strip --- */
.forecast-card { grid-column: 1 / -1; }
.forecast-strip {
  display: flex;
  gap: 6px;
  overflow-x: hidden;
  overflow-x: auto;
  padding: 8px 0 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.forecast-strip::-webkit-scrollbar { height: 4px; }
.forecast-strip::-webkit-scrollbar-track { background: transparent; }
.forecast-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
.fhr {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: #11161b;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 4px 7px;
  min-width: 0;
}
.fhr.now { border-color: var(--accent); }
.fhr-time { font-size: 11px; color: var(--muted); font-weight: 600; }
.fhr-icon { font-size: 24px; line-height: 1.25; }
.fhr-temp-c { font-size: 15px; font-weight: 700; }
.fhr-temp-f { font-size: 11px; color: var(--muted); }
.fhr-precip { font-size: 11px; color: #6bb9ff; }
.fhr-precip.dry { color: var(--muted); }
.forecast-msg { color: var(--muted); font-size: 13px; padding: 10px 0; }
.forecast-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--muted); }
.forecast-updated { opacity: 0.7; }
.btn-sm { font-size: 11px; padding: 2px 8px; }

@media(max-width: 599px){
  .forecast-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow-x: visible;
    gap: 5px;
  }
  .fhr { flex: none; min-width: unset; width: 100%; }
}

/* Radiation + Radon hazmat zone */
.hazmat-zone{
  margin:8px -6px;
  padding:4px 10px;
  background:repeating-linear-gradient(135deg,rgba(255,180,40,0.06) 0 10px,rgba(255,180,40,0.10) 10px 20px);
  border:1px solid rgba(255,180,40,0.35);
  border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(255,180,40,0.05);
}
.hazmat-zone .kv{border-bottom-color:rgba(255,180,40,0.18)}
.hazmat-zone .kv:last-child{border-bottom:0}
.hazmat-title{color:#ffd27a !important;letter-spacing:0.3px}