:root{
  --bg:#f4f6fa; --card:#ffffff; --card2:#f8fafd; --text:#0f1722; --muted:#61708a;
  --accent:#2f7df6; --accent2:#f6a12f; --border:#e5eaf2; --shadow:0 1px 2px rgba(15,23,42,.05),0 8px 24px -12px rgba(15,23,42,.12);
  --good:#22a06b; --warn:#e2a400; --bad:#e5484d;
  --chart-grid:#e9edf4; --chart-label:#61708a;
}
[data-theme="dark"]{
  --bg:#0d1220; --card:#161d30; --card2:#1b2338; --text:#e8edf6; --muted:#8b98b3;
  --accent:#5b9bff; --accent2:#ffb84d; --border:#242e48; --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.5);
  --chart-grid:#232d47; --chart-label:#8b98b3;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.45;transition:background .25s,color .25s}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* header */
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid var(--border)}
.hrow{display:flex;align-items:center;gap:16px;height:60px}
.brand{font-weight:800;font-size:17px;letter-spacing:-.02em;white-space:nowrap;cursor:pointer;user-select:none;color:var(--text);border-radius:9px;padding:2px 6px;margin-left:-6px;transition:background .15s}
.brand:hover{background:var(--card2)}
.brand:active{opacity:.6}
.brand small{display:block;font-weight:500;font-size:11px;color:var(--muted);letter-spacing:0}
nav{margin-left:auto;display:flex;gap:4px}
nav a{padding:7px 12px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--muted)}
nav a:hover{background:var(--card2);color:var(--text)}
nav a.here{background:var(--accent);color:#fff}
#themeBtn{margin-left:6px;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:10px;width:36px;height:36px;cursor:pointer;font-size:16px;display:grid;place-items:center}
.updated{font-size:12px;color:var(--muted);white-space:nowrap}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);margin-right:5px;animation:pulse 2.5s infinite}
@keyframes pulse{50%{opacity:.35}}

/* hero */
.hero{display:grid;grid-template-columns:340px 1fr;gap:18px;margin-top:22px}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:20px}
.tempcard{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:linear-gradient(160deg,var(--card) 0%,var(--card2) 100%)}
.bigtemp{font-size:76px;font-weight:800;letter-spacing:-.04em;line-height:1}
.bigtemp sup{font-size:26px;font-weight:600;color:var(--muted);vertical-align:super}
.feels{color:var(--muted);font-size:14px;margin-top:8px}
.hilo{display:flex;gap:18px;margin-top:14px;font-size:13.5px}
.hilo b{font-weight:700}
.hilo .lo b{color:var(--accent)} .hilo .hi b{color:var(--bad)}
.statgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.stat{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow)}
.stat .k{font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.stat .v{font-size:22px;font-weight:700;margin-top:4px;letter-spacing:-.02em}
.stat .v small{font-size:12px;color:var(--muted);font-weight:500}
.stat .sub{font-size:11.5px;color:var(--muted);margin-top:3px}
.stat .stalenote{font-size:11px;font-weight:600;color:var(--warn);margin-top:3px}
.stat.stale{opacity:.85}
.dot.stale{background:var(--warn)}
.arrow{display:inline-block;transition:transform .6s ease;font-size:18px;color:var(--accent)}

/* sun & moon */
.sunmoon{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.sunbar{height:8px;border-radius:99px;background:var(--border);overflow:hidden;margin:12px 0 8px}
.sunbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#f6a12f,#ffd76e);transition:width 1s}
.sm-row{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted)}
.sm-row b{color:var(--text)}
.moonicon{font-size:42px;line-height:1}
.smflex{display:flex;align-items:center;gap:16px}
h2.sec{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:34px 0 14px;scroll-margin-top:80px}
h3.grouphead{font-size:15px;font-weight:700;color:var(--muted);margin:26px 0 4px;text-transform:uppercase;letter-spacing:.05em}

/* windy forecast */
.windycard{padding:10px;margin-top:18px}
.windycard iframe{display:block;width:100%;height:460px;border:0;border-radius:12px;background:var(--card2)}

/* charts */
.tabs{display:flex;flex-wrap:wrap;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:4px;width:max-content;max-width:100%;margin-bottom:14px}
.tabs button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;padding:7px 16px;border-radius:9px;cursor:pointer}
.tabs button.on{background:var(--accent);color:#fff}
.chartgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chartgrid.full{grid-template-columns:1fr}
.chartcard{padding:8px 6px 2px}
.chartbox{width:100%;height:320px}
.chartgrid.full .chartbox{height:470px}
.loading{color:var(--muted);font-size:14px;padding:30px;text-align:center}

/* records */
.recgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.rec h3{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--accent)}
.rec table{width:100%;border-collapse:collapse;font-size:13px}
.rec td{padding:5px 0;border-bottom:1px solid var(--border);vertical-align:top}
.rec tr:last-child td{border-bottom:0}
.rec td:first-child{color:var(--muted)}
.rec td:last-child{text-align:right;font-weight:600}
.rec .t{display:block;font-weight:400;font-size:11px;color:var(--muted)}

/* reports */
.report-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0 14px}
.report-controls select{font:inherit;font-size:13.5px;font-weight:600;color:var(--text);background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px 12px}
pre.report{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:22px;overflow-x:auto;font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.5;color:var(--text);min-height:300px}

footer{margin:44px 0 26px;text-align:center;color:var(--muted);font-size:12.5px}
footer .warn{font-weight:600}

@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .chartgrid{grid-template-columns:1fr}
  .sunmoon{grid-template-columns:1fr}
  nav a:not(.pagelink){display:none}
  .windycard iframe{height:380px}
}