*{box-sizing:border-box} :root{color-scheme:dark;--bg:#091725;--panel:#10243a;--panel2:#142d46;--line:#29445d;--text:#f2f7fb;--muted:#a8bac9;--accent:#78d5c4;--blue:#8bb9f0}
body{margin:0;background:linear-gradient(180deg,#102a42 0,#091725 420px);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);min-height:100vh}
.app{width:min(100%,760px);margin:auto;padding:calc(18px + env(safe-area-inset-top)) 16px calc(26px + env(safe-area-inset-bottom))}
.top{display:flex;justify-content:space-between;align-items:center;margin:4px 2px 18px}.eyebrow{font-size:10px;letter-spacing:1.5px;font-weight:800;color:var(--accent)}h1{font-size:27px;margin:4px 0 2px;letter-spacing:-.7px}h1 span{font-weight:400;color:#c3d5e5}.sub,.muted,.metric-note,.fineprint,footer{color:var(--muted)}.sub{font-size:12px}.refresh{border:1px solid var(--line);background:var(--panel);color:white;border-radius:14px;width:46px;height:46px;font-size:27px}
.card{background:linear-gradient(145deg,rgba(20,45,70,.98),rgba(14,34,54,.98));border:1px solid rgba(129,166,196,.17);border-radius:21px;padding:17px;box-shadow:0 10px 30px #0002;margin-bottom:13px}
.hero{background:radial-gradient(circle at 85% 20%,#285878 0,transparent 40%),linear-gradient(145deg,#183a57,#10243a);padding:20px}
.hero-head,.section-head,.baro-head{display:flex;align-items:center;justify-content:space-between}.hero-head{font-size:10px;letter-spacing:1.4px;font-weight:800;color:#c3d5e5}.status{letter-spacing:0;color:var(--accent);font-size:11px}.status.offline{color:#ffb6a9}
.hero-main{display:flex;align-items:center;justify-content:space-between;padding:16px 0 12px}.temperature{font-size:66px;line-height:1;font-weight:650;letter-spacing:-4px}.condition{font-size:16px;margin-top:7px}.small{font-size:12px;margin-top:4px}.weather-symbol{font-size:62px;filter:drop-shadow(0 8px 12px #0004)}.updated{font-size:11px;color:#b9cbd9;border-top:1px solid #ffffff1b;padding-top:12px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.metric{margin:0;min-height:116px}.metric-label{font-size:11px;letter-spacing:.7px;color:var(--muted);font-weight:750}.metric-value{font-size:29px;font-weight:650;margin-top:10px;letter-spacing:-.7px}.metric-value small{font-size:13px;font-weight:500;color:#c2d2df;letter-spacing:0}.metric-note{font-size:11px;margin-top:5px}.wide{grid-column:1/-1;min-height:140px}.baro-head{align-items:center}.trend{font-size:12px;font-weight:750;color:var(--accent);background:#78d5c41b;padding:8px 10px;border-radius:10px}.baro-track{height:7px;border-radius:9px;background:linear-gradient(90deg,#6da9e8,#a5b8c4,#72d6b4);margin:16px 0 5px;position:relative}.baro-track:after{content:"";position:absolute;left:50%;top:-4px;height:15px;width:2px;background:#fff8}.baro-scale{display:flex;justify-content:space-between;font-size:9px;color:var(--muted)}.section-head{margin-bottom:14px}h2{font-size:19px;margin:3px 0 0}.forecast-source{font-size:10px;color:var(--muted)}.forecast-list{display:grid;gap:0}.forecast-day{display:grid;grid-template-columns:1.1fr 34px 1fr 1fr 1fr;align-items:center;gap:7px;padding:11px 0;border-bottom:1px solid #ffffff12;font-size:12px}.forecast-day:last-child{border:0}.fday{font-weight:650}.ficon{font-size:20px}.fhigh{text-align:right;font-weight:700}.flow{text-align:right;color:var(--muted)}.frain{text-align:right;color:#8fc8f4}.fineprint{font-size:10px;line-height:1.4;margin-top:10px}.status-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #ffffff12;font-size:12px}.status-row:last-child{border:0}.status-row span{color:var(--muted)}footer{text-align:center;font-size:10px;padding:8px}.loading{font-size:12px;color:var(--muted);padding:15px 0}.error{background:#552b2b;border:1px solid #9d5555;border-radius:12px;padding:12px;font-size:12px;margin-top:12px}
@media(min-width:600px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}.wide{grid-column:span 2}.hero{padding:25px}.temperature{font-size:76px}}