:root{--text:#f8fafc;--muted:#cbd5e1;--glass:rgba(15,23,42,.35);--line:rgba(255,255,255,.15);--accent:#fde68a;
  --g1:#0ea5e9;--g2:#1e3a8a}
body[data-sky=clear]{--g1:#38bdf8;--g2:#1d4ed8}
body[data-sky=cloud]{--g1:#64748b;--g2:#1e293b}
body[data-sky=rain]{--g1:#475569;--g2:#0f172a}
body[data-sky=snow]{--g1:#94a3b8;--g2:#475569}
body[data-sky=storm]{--g1:#4c1d95;--g2:#0f172a}
body[data-sky=fog]{--g1:#94a3b8;--g2:#334155}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--text);font:16px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;
  background:linear-gradient(160deg,var(--g1),var(--g2)) fixed;transition:background .6s}
main{max-width:780px;margin:0 auto;padding:20px 16px 40px}
header{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
h1{font-size:1.3rem;margin:0;margin-right:auto}
form{display:flex;gap:8px;flex:1 1 300px}
.controls{display:flex;gap:12px;align-items:center}
input,select,button{font:inherit;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--glass);color:var(--text);backdrop-filter:blur(10px)}
input{flex:1;min-width:0}
input::placeholder{color:var(--muted)}
button{cursor:pointer}
button:hover{background:rgba(255,255,255,.18)}
button.primary{background:var(--accent);color:#1e293b;border:0;font-weight:700}
button.primary:hover{background:#fef3c7}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
select option{color:#0f172a}
.seg{display:flex;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.seg button{border:0;border-radius:0;padding:9px 12px}
.seg button.on{background:var(--accent);color:#1e293b;font-weight:700}
.src{font-size:.85rem;color:var(--muted);display:flex;gap:6px;align-items:center}
.glass{background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:20px;margin-top:18px;backdrop-filter:blur(14px);box-shadow:0 8px 30px rgba(0,0,0,.15)}
[hidden]{display:none!important}
h2{margin:0 0 4px;font-size:1.15rem;font-weight:600}
h3{margin:0 0 12px;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.hero{text-align:center}
.now{display:flex;justify-content:center;align-items:center;gap:12px}
.big-icon{font-size:4.5rem;line-height:1}
#temp{font-size:5rem;font-weight:200;line-height:1}
#desc{font-size:1.2rem;color:var(--muted);margin-top:4px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-top:20px}
.tile{background:rgba(255,255,255,.1);border-radius:14px;padding:10px}
.tile small{display:block;color:var(--muted);font-size:.75rem}
.tile b{font-size:1.1rem}
.strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.hour{min-width:62px;padding:8px 4px;border-radius:14px;text-align:center;display:flex;flex-direction:column;gap:4px}
.hour:first-child{background:rgba(255,255,255,.15)}
.hour small{color:var(--muted)}
.day{display:grid;grid-template-columns:84px 36px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--line);align-items:center}
.day:first-child{border-top:0}
.day .pop{font-size:.75rem;color:#bae6fd;display:block}
.range{display:grid;grid-template-columns:36px 1fr 36px;gap:8px;align-items:center;text-align:center}
.range .lo{color:var(--muted)}
.bar{height:6px;border-radius:3px;background:rgba(255,255,255,.18);position:relative}
.bar i{position:absolute;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,#7dd3fc,#fde68a,#fb923c)}
#status{color:var(--muted);min-height:1.4em;margin:12px 0 0}
#status.err{color:#fecaca}
.loading .glass{opacity:.5;transition:opacity .2s}
footer{text-align:center;margin-top:28px;font-size:.8rem;color:var(--muted)}
footer a{color:inherit}
@media(max-width:520px){#temp{font-size:4rem}.big-icon{font-size:3.5rem}.day{grid-template-columns:70px 30px 1fr}}