:root{--fg:#10202e;--top:#9fd0ea;--bot:#e9f3f8;--line:rgba(16,32,46,.22)}
body[data-sky=night]{--fg:#eaf1f7;--top:#0f1b2d;--bot:#25395a;--line:rgba(234,241,247,.25)}
body[data-sky=wet]{--fg:#f1f5f8;--top:#2f4252;--bot:#53697a;--line:rgba(241,245,248,.28)}
body[data-sky=storm]{--fg:#f5f2ff;--top:#1f1b33;--bot:#4a4468;--line:rgba(245,242,255,.28)}
body[data-sky=fog]{--fg:#1d2a33;--top:#b7c0c6;--bot:#e4e8ea;--line:rgba(29,42,51,.22)}
body[data-sky=cloud]{--fg:#14232f;--top:#8fa9bb;--bot:#d9e3ea;--line:rgba(20,35,47,.25)}

*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--fg);background:linear-gradient(var(--top),var(--bot)) fixed;
  font:16px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
main{max-width:640px;margin:0 auto;padding:24px 20px 40px}
h1{font-size:1.1rem;font-weight:600;margin:0 0 14px}
h2{font-size:1.5rem;font-weight:600;margin:28px 0 0;overflow-wrap:anywhere}
h3{font-size:1rem;font-weight:600;margin:28px 0 8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.search{position:relative}
input{width:100%;padding:12px 14px;font:inherit;color:#10202e;background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:8px}
#list{position:absolute;z-index:5;left:0;right:0;margin:4px 0 0;padding:0;list-style:none;background:#fff;color:#10202e;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.2);max-height:320px;overflow:auto}
#list li{padding:10px 14px;cursor:pointer;display:flex;flex-direction:column}
#list li:hover,#list li:focus{background:#e6f0f6}
#list li span{font-size:.85rem;color:#4b5d6b}
#list .empty{cursor:default;color:#4b5d6b}

.row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.chip{font:inherit;font-size:.9rem;color:inherit;background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer}
.chip:hover{background:var(--line)}
:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
#status{min-height:1.4em;margin:12px 0 0}

.temp{font-size:clamp(5rem,22vw,8.5rem);font-weight:200;line-height:1;letter-spacing:-.04em;margin:4px 0 0}
.desc{font-size:1.3rem;margin:4px 0 20px}
#facts{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin:0}
#facts div{border-top:1px solid var(--line);padding-top:8px}
#facts dt{font-size:.85rem;opacity:.8}
#facts dd{margin:0;font-size:1.1rem;font-weight:600}

#days{list-style:none;margin:0;padding:0}
#days li{display:grid;grid-template-columns:6rem 1.8rem 2.2rem 1fr 2.2rem 2.6rem;gap:8px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.dn{font-size:.95rem;line-height:1.2}
.dmin{text-align:right;opacity:.8}
.dmax{font-weight:600}
.dp{text-align:right;font-size:.85rem;opacity:.8}
.bar{position:relative;height:6px;border-radius:3px;background:var(--line)}
.fill{position:absolute;top:0;bottom:0;border-radius:3px;background:var(--fg);opacity:.75}
footer{margin-top:36px;font-size:.85rem;opacity:.85}
a{color:inherit}

/* ===== Səma: canlı səma ===== */
body[data-sky=snow]{--fg:#17222b;--top:#b9c9d6;--bot:#eef3f7;--line:rgba(23,34,43,.22)}
body{--cloud:rgba(255,255,255,.65)}
body[data-sky=night]{--cloud:rgba(150,170,210,.2)}
body[data-sky=wet]{--cloud:rgba(35,50,62,.6)}
body[data-sky=storm]{--cloud:rgba(18,14,36,.65)}
#sky{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
main{position:relative;z-index:1;max-width:720px}
.orb,.fall{position:absolute;transition:opacity 1.2s}
.orb{top:6%;right:9%;width:clamp(110px,26vw,200px);aspect-ratio:1;border-radius:50%;opacity:0}
body[data-sky=day] .orb{opacity:1;background:radial-gradient(circle,#fffbe0 0 30%,#ffd45c 56%,rgba(255,212,92,0) 72%);box-shadow:0 0 120px 60px rgba(255,214,102,.45)}
body[data-sky=night] .orb{opacity:1;background:radial-gradient(circle at 38% 38%,#fff 0 40%,#d9e2f5 72%);box-shadow:0 0 90px 30px rgba(200,215,255,.3)}
body[data-sky=cloud] .orb{opacity:.4;background:radial-gradient(circle,#fff6d0 0 30%,rgba(255,230,150,0) 70%)}
.cl{position:absolute;left:0;width:260px;height:80px;border-radius:999px;background:var(--cloud);filter:blur(8px);animation:drift linear infinite}
.cl::before,.cl::after{content:"";position:absolute;border-radius:50%;background:inherit}
.cl::before{width:110px;height:110px;left:34px;top:-48px}
.cl::after{width:80px;height:80px;left:128px;top:-30px}
.c1{top:15%;animation-duration:120s;animation-delay:-30s}
.c2{top:38%;scale:1.5;animation-duration:170s;animation-delay:-100s}
.c3{top:62%;scale:.8;animation-duration:140s;animation-delay:-60s}
@keyframes drift{from{transform:translateX(-320px)}to{transform:translateX(calc(100vw + 60px))}}
.fall{inset:0;opacity:0}
body[data-fall=rain] .fall,body[data-fall=storm] .fall{opacity:.9;background-image:radial-gradient(ellipse 1px 14px at 18px 20px,rgba(255,255,255,.6),transparent),radial-gradient(ellipse 1px 10px at 30px 40px,rgba(255,255,255,.4),transparent);background-size:37px 60px,53px 90px;animation:rain .8s linear infinite}
body[data-fall=snow] .fall{opacity:.9;background-image:radial-gradient(circle at 20px 20px,#fff 0 2px,transparent 3.5px),radial-gradient(circle at 40px 50px,rgba(255,255,255,.8) 0 1.5px,transparent 3px);background-size:61px 61px,97px 97px;animation:snow 10s linear infinite}
@keyframes rain{to{background-position:0 360px,0 360px}}
@keyframes snow{to{background-position:0 366px,0 388px}}
body[data-fall=storm] #sky::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;animation:flash 8s infinite}
@keyframes flash{0%,91%,95%,100%{opacity:0}92%{opacity:.3}93%{opacity:.05}94%{opacity:.22}}

.brand{font-size:clamp(2.8rem,13vw,4.4rem);font-weight:200;letter-spacing:-.03em;line-height:1;margin:6px 0 0}
.tag{margin:8px 0 20px;opacity:.85;max-width:34ch}
#now{margin-top:22px;padding:22px 20px;border-radius:22px;background:rgba(255,255,255,.14);border:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
#now h2{margin-top:0}
#now.in .temp{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
#now.in h2,#now.in .desc{animation:rise .7s ease both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@media (prefers-reduced-motion:reduce){.cl,body[data-fall] .fall,body[data-fall] #sky::after,#now.in .temp,#now.in h2,#now.in .desc{animation:none}}

.brand span{display:block;font-size:.3em;font-weight:400;letter-spacing:0;margin-top:.5em;opacity:.9}
.clock{font-size:clamp(2.2rem,10vw,3.2rem);font-weight:200;font-variant-numeric:tabular-nums;line-height:1.1;margin:0}
.today{margin:2px 0 16px;opacity:.9}
.dn small{display:block;font-size:.8rem;opacity:.7}