/* ауарайы.kz — негізгі стиль */
:root{
  --bg:#0e1726; --card:#17233a; --card2:#1e2d48; --ink:#eaf1ff; --muted:#9db0d0;
  --line:rgba(255,255,255,.08); --accent:#4da3ff; --warm:#ffb454; --cool:#5ec8ff;
  --radius:18px; --shadow:0 8px 30px rgba(0,0,0,.28);
  --maxw:960px; --font:'Segoe UI',system-ui,-apple-system,Roboto,'Noto Sans',Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);
  line-height:1.5;min-height:100vh;overflow-x:hidden;
  background-image:radial-gradient(1200px 600px at 80% -10%,rgba(77,163,255,.18),transparent 60%);}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3{line-height:1.2;margin:0}

/* ── Sky градиенттері ── */
.sky-clear-day{background:linear-gradient(160deg,#2b6ff2 0%,#5eb0ff 55%,#a8d8ff 100%);color:#08213f}
.sky-clear-night{background:linear-gradient(160deg,#0b1b3a 0%,#1c2f5c 60%,#38508c 100%);color:#eaf1ff}
.sky-cloud-day{background:linear-gradient(160deg,#5b7aa6 0%,#8fa6c4 60%,#c3d2e6 100%);color:#10233d}
.sky-cloud-night{background:linear-gradient(160deg,#141d30 0%,#2a3752 60%,#42506e 100%);color:#eaf1ff}
.sky-precip-day{background:linear-gradient(160deg,#465b73 0%,#6b7f96 55%,#94a6ba 100%);color:#0e1c2b}
.sky-precip-night{background:linear-gradient(160deg,#101725 0%,#222f45 60%,#374765 100%);color:#eaf1ff}
.sky-snow{background:linear-gradient(160deg,#7f93ad 0%,#aebfd4 50%,#e3ecf7 100%);color:#0e1c2b}

/* ── Header ── */
.top{max-width:var(--maxw);margin:0 auto;padding:16px 18px;display:flex;align-items:center;
  justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:20px;letter-spacing:.2px}
.brand-ico{font-size:22px}
.brand-name{background:linear-gradient(90deg,#8fd0ff,#c9e6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lang{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px}
.lang a{padding:6px 14px;border-radius:999px;font-size:13px;font-weight:700;color:var(--muted)}
.lang a.on{background:var(--accent);color:#04182f}

main{max-width:var(--maxw);margin:0 auto;padding:0 18px 40px}

/* ── Hero (home) ── */
.hero{padding:26px 6px 20px;text-align:center}
.hero h1{font-size:clamp(26px,6vw,40px);font-weight:800}
.hero .sub{color:var(--muted);margin:8px 0 20px;font-size:16px}
.search{max-width:440px;margin:0 auto}
.search input{width:100%;padding:15px 20px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-size:16px;outline:none;box-shadow:var(--shadow)}
.search input:focus{border-color:var(--accent)}

/* ── Cities grid ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:22px}
.ccard{display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:var(--radius);
  box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .12s ease;min-height:66px}
.ccard:hover{transform:translateY(-2px)}
.ccard:active{transform:translateY(0)}
.cc-emoji{font-size:28px;line-height:1;flex:0 0 auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.cc-body{display:flex;flex-direction:column;min-width:0;flex:1;gap:1px}
.cc-name{font-weight:800;font-size:16px;line-height:1.15;overflow-wrap:anywhere;hyphens:auto}
.cc-name .cap{color:var(--warm)}
.cc-region{font-size:12px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-temp{font-size:22px;font-weight:800;margin-left:auto;flex:0 0 auto;padding-left:4px}
.noresult{text-align:center;color:var(--muted);padding:30px}

/* ── City page: now ── */
.crumbs{padding:14px 2px 4px;font-size:14px}
.crumbs a{color:var(--muted)}
.now{border-radius:24px;padding:22px 22px 18px;margin-top:8px;box-shadow:var(--shadow)}
.now-head h1{font-size:clamp(22px,5vw,30px);font-weight:800}
.now-region{margin:4px 0 0;opacity:.85;font-size:14px}
.now-main{display:flex;align-items:center;gap:18px;margin:14px 0 6px;flex-wrap:wrap}
.now-emoji{font-size:64px;line-height:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))}
.now-temp{font-size:clamp(52px,15vw,84px);font-weight:800;letter-spacing:-2px}
.now-temp .unit{font-size:.4em;font-weight:700;opacity:.7;vertical-align:top;margin-left:2px}
.now-cond{display:flex;flex-direction:column;gap:4px}
.cond-name{font-size:20px;font-weight:700}
.feels{font-size:14px;opacity:.85}
.now-meta{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:10px;margin:16px 0 0;padding:14px 0 0;border-top:1px solid rgba(0,0,0,.12)}
.now-meta li{display:flex;flex-direction:column;gap:1px}
.now-meta span{font-size:12px;opacity:.75;text-transform:uppercase;letter-spacing:.4px}
.now-meta b{font-size:17px;font-weight:800}
.now-meta i{font-size:12px;opacity:.8;font-style:normal}
.updated{margin:14px 0 0;font-size:12px;opacity:.7}

/* ── Blocks ── */
.block{margin-top:24px}
.block h2{font-size:19px;margin-bottom:12px;font-weight:800}

/* Hourly strip */
.hstrip{display:flex;gap:8px;overflow-x:auto;padding:6px 2px 10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.hstrip::-webkit-scrollbar{height:6px}
.hstrip::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
.hcell{flex:0 0 auto;width:64px;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;scroll-snap-align:start}
.hh{font-size:12px;color:var(--muted)}
.hi{font-size:24px}
.ht{font-weight:800;font-size:16px}
.hp{font-size:11px;color:var(--cool)}
.hp.muted{color:var(--muted);opacity:.5}

/* 7-day */
.days{display:flex;flex-direction:column;gap:8px}
.dayrow{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.dayrow summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:1.4fr 34px 1.6fr auto auto;align-items:center;gap:10px;padding:13px 15px}
.dayrow summary::-webkit-details-marker{display:none}
.d-name{display:flex;flex-direction:column;font-weight:800;font-size:15px}
.d-name em{font-style:normal;font-weight:500;font-size:12px;color:var(--muted)}
.d-ico{font-size:24px;text-align:center}
.d-cond{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-temp{display:flex;gap:8px;align-items:baseline;justify-self:end}
.d-temp b{font-size:17px;font-weight:800}
.d-temp i{font-style:normal;color:var(--muted);font-size:14px}
.d-precip{font-size:12px;color:var(--cool);justify-self:end;min-width:20px;text-align:right}
.parts{width:100%;border-collapse:collapse;background:var(--card2)}
.parts th,.parts td{padding:9px 6px;text-align:center;font-size:13px;border-top:1px solid var(--line)}
.parts thead th{color:var(--muted);font-weight:600;font-size:12px}
.parts tbody th{text-align:left;color:var(--muted);font-weight:600;padding-left:15px}
.pt span{display:block;font-size:20px}
.pt b{font-weight:800}

@media(max-width:560px){
  .dayrow summary{grid-template-columns:1fr 28px auto auto;gap:8px}
  .d-cond{display:none}
}

/* About / Climate */
.about p{color:var(--muted);font-size:15px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;margin:0;line-height:1.65}
.climate h3{font-size:15px;margin:16px 0 8px;color:var(--muted);font-weight:700}
.norms-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px}
.norms{width:100%;min-width:720px;border-collapse:collapse;background:var(--card);font-size:12px}
.norms th,.norms td{padding:8px 6px;text-align:center;border-bottom:1px solid var(--line)}
.norms thead th{color:var(--muted);font-weight:700;text-transform:uppercase;font-size:11px}
.norms tbody th{text-align:left;padding-left:12px;color:var(--muted);font-weight:600;white-space:nowrap}
.norms td i{font-style:normal;color:var(--cool);display:block;font-size:11px}
.norms td b{font-weight:800}
.norms tr:last-child th,.norms tr:last-child td{border-bottom:none}

/* FAQ */
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:8px;overflow:hidden}
.faq-item summary{cursor:pointer;padding:13px 16px;font-weight:700;font-size:15px;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:'+';display:inline-block;width:20px;color:var(--accent);font-weight:800}
.faq-item[open] summary::before{content:'−'}
.faq-item p{margin:0;padding:0 16px 14px 36px;color:var(--muted);font-size:14px}

/* Neighbors */
.nb-links{display:flex;flex-wrap:wrap;gap:8px}
.nb-links a{background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:8px 15px;font-size:13px;font-weight:600;color:var(--ink)}
.nb-links a:hover{border-color:var(--accent);color:var(--accent)}

/* My city chip (home) */
.mycity{margin:14px 0 0;font-size:14px;color:var(--muted)}
.mycity a{color:var(--accent);font-weight:700;text-decoration:underline}

/* Footer */
.foot{max-width:var(--maxw);margin:0 auto;padding:26px 18px 40px;text-align:center;
  color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
.foot p{margin:5px 0}
.foot .src a{color:var(--muted);text-decoration:underline}
.foot .cc{opacity:.7}

/* On city page, text over sky needs contrast; keep meta cards readable */
.city main{color:var(--ink)}
.now,.now.sky-clear-day,.now.sky-cloud-day,.now.sky-snow{}