:root {
  --bg: #0f1216;
  --panel: #171c23;
  --panel-2: #1e252e;
  --line: #2a323d;
  --fg: #e7edf3;
  --muted: #8b97a6;
  --accent: #5aa9ff;
  --low: #27c093;
  --mid: #f4b740;
  --high: #ff6b5e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Segoe UI, Roboto, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

#app { max-width: 880px; margin: 0 auto; padding: 24px 16px 48px; }

header h1 { margin: 0; font-size: 1.5rem; letter-spacing: .5px; }
header .meta { color: var(--muted); font-size: .85rem; margin-top: 4px; }
.stale {
  background: var(--high); color: #1a0d0c; padding: 1px 8px;
  border-radius: 99px; margin-left: 8px; font-weight: 600;
}

.day { margin-top: 24px; }
.day h2 {
  font-size: 1rem; color: var(--muted); font-weight: 600; margin: 0 0 8px;
  border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.day h2 .date { color: var(--fg); }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer; transition: border-color .15s, background .15s;
}
.card:hover { border-color: var(--accent); }
.card.open { background: var(--panel-2); }

.row { display: flex; align-items: center; gap: 16px; }
.loc { flex: 1; min-width: 0; }
.loc .dist { font-size: 1.15rem; font-weight: 700; }
.loc .city { color: var(--muted); font-size: .8rem; margin-left: 6px; }
.loc .win { display: block; color: var(--muted); font-size: .85rem; margin-top: 2px; }

.temp .t-range { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.temp .deg { font-size: 1rem; color: var(--muted); }
.t-range.na { color: var(--muted); }

.pop {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700;
  padding: 6px 12px; border-radius: 99px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pop.low { background: rgba(39, 192, 147, .16); color: var(--low); }
.pop.mid { background: rgba(244, 183, 64, .16); color: var(--mid); }
.pop.high { background: rgba(255, 107, 94, .18); color: var(--high); }
.pop.fallback { background: var(--panel-2); color: var(--fg); font-weight: 600; border: 1px solid var(--line); }
.pop .tag { font-size: .65rem; color: var(--muted); font-weight: 500; margin-left: 2px; }

.wx { color: var(--muted); font-size: .85rem; margin-top: 8px; }

.raw {
  margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px;
  display: flex; flex-wrap: wrap; gap: 24px;
}
.raw[hidden] { display: none; }  /* 蓋過 .raw 的 display:flex，讓預設收合生效 */
.raw-block b { font-size: .75rem; color: var(--muted); display: block; margin-bottom: 4px; font-weight: 600; }
.raw table { border-collapse: collapse; font-size: .8rem; font-variant-numeric: tabular-nums; }
.raw td { padding: 2px 12px 2px 0; color: var(--fg); white-space: nowrap; }
.raw .muted { color: var(--muted); font-size: .8rem; max-width: 360px; }

footer {
  margin-top: 28px; color: var(--muted); font-size: .75rem; line-height: 1.6;
  border-top: 1px solid var(--line); padding-top: 12px;
}
.error, .empty { margin-top: 24px; color: var(--muted); }
.error code { color: var(--accent); }

@media (max-width: 520px) {
  .row { flex-wrap: wrap; gap: 8px 16px; }
  .loc { flex-basis: 100%; }
}