/* meteo.ustisha.ru — оформление в стиле aspereadastra.com: ночное небо, золотой акцент, карточки. */
:root{
  --bg:#070b16; --bg-2:#0c1226; --fg:#e9edf6; --muted:#98a3bd;
  --accent:#f5c451; --accent-2:#ffd97a; --cool:#9db8ff; --bad:#ff8a7a;
  --line:rgba(255,255,255,.09); --card:rgba(255,255,255,.035);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--fg);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100vh; overflow-x:hidden;
}
.sky{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1px 1px at 25px 35px, rgba(255,255,255,.95) 50%, transparent 55%) 0 0/230px 230px,
    radial-gradient(1px 1px at 130px 90px, rgba(255,255,255,.7) 50%, transparent 55%) 0 0/270px 270px,
    radial-gradient(1.6px 1.6px at 210px 170px, rgba(245,196,81,.85) 50%, transparent 55%) 0 0/350px 350px,
    radial-gradient(1px 1px at 70px 210px, rgba(255,255,255,.55) 50%, transparent 55%) 0 0/310px 310px,
    radial-gradient(1.2px 1.2px at 300px 60px, rgba(255,255,255,.8) 50%, transparent 55%) 0 0/390px 390px;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.25));
          mask-image:linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.25));
}
.glow{position:fixed; top:-32vh; left:50%; transform:translateX(-50%); width:90vw; height:70vh; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(245,196,81,.13), transparent 62%);}
.wrap{position:relative; z-index:1; max-width:1040px; margin:0 auto; padding:0 24px}

/* header */
header{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:28px 0}
.brand{display:flex; align-items:center; gap:12px; margin:0; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.95rem; line-height:1.3}
.brand svg{width:44px; height:44px; flex:none; border-radius:50%; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 0 18px rgba(140,170,255,.28)}
.brand small{display:block; font-weight:400; letter-spacing:.14em; font-size:.62rem; color:var(--muted); margin-top:2px}
.brand span{white-space:nowrap}
.status{display:flex; align-items:center; gap:20px}
.note{display:inline-flex; align-items:center; gap:10px; color:var(--muted); font-size:.9rem}
.note i{width:8px; height:8px; flex:none; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(245,196,81,.18); animation:pulse 2.2s ease-in-out infinite}
.note.error{color:var(--bad)}
.note.error i{background:var(--bad); box-shadow:0 0 0 4px rgba(255,138,122,.18); animation:none}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(245,196,81,.18)}50%{box-shadow:0 0 0 7px rgba(245,196,81,.06)}}
.refresh{display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border-radius:10px; border:1px solid var(--line); background:transparent;
  color:var(--fg); font:inherit; font-weight:600; font-size:.92rem; cursor:pointer; transition:border-color .15s ease, transform .15s ease}
.refresh:hover{border-color:var(--accent); transform:translateY(-1px)}
.refresh:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.refresh svg{width:16px; height:16px; flex:none}
.loading .refresh svg{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* hero: главное показание */
.hero{padding:64px 0 44px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px 64px; align-items:end; border-bottom:1px solid var(--line)}
.eyebrow{display:inline-flex; align-items:center; gap:10px; color:var(--accent); font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; margin:0 0 20px}
.eyebrow::before{content:""; width:28px; height:1px; background:var(--accent); opacity:.8}
.now{font-size:clamp(3.6rem, 12vw, 6.4rem); font-weight:700; line-height:1; letter-spacing:-.03em; margin:0; font-variant-numeric:tabular-nums; transition:opacity .2s ease}
.now em{font-style:normal; color:var(--accent-2)}
.now small{font-size:.38em; font-weight:600; letter-spacing:0; color:var(--muted); margin-left:.2em}

/* факты о главном показании — справа от него */
.facts{display:grid; grid-template-columns:auto auto; gap:22px 48px; padding-bottom:6px}
.facts div{display:flex; flex-direction:column; min-width:110px}
.facts b{font-size:1.3rem; letter-spacing:-.01em; line-height:1.2; font-variant-numeric:tabular-nums; white-space:nowrap}
.facts div > span{color:var(--muted); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; margin-top:4px}

/* разделы и карточки */
section{padding:36px 0}
h2{font-size:1.05rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 22px; font-weight:600}
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px}
.card{padding:24px 22px; border:1px solid var(--line); border-radius:14px; background:var(--card); transition:border-color .2s ease, transform .2s ease}
.card:hover{border-color:rgba(245,196,81,.45); transform:translateY(-2px)}
.card h3{margin:0 0 10px; font-size:1.06rem}
.card .n{display:block; font-size:.75rem; color:var(--accent); letter-spacing:.14em; text-transform:uppercase; margin-bottom:12px}
.value{font-size:2.4rem; font-weight:700; line-height:1.1; letter-spacing:-.015em; margin:0; font-variant-numeric:tabular-nums; white-space:nowrap; transition:opacity .2s ease}
.value small{font-size:.42em; font-weight:600; letter-spacing:0; color:var(--muted); margin-left:.25em}
.stats{display:flex; flex-wrap:wrap; gap:10px 28px; margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line)}
.stats div{display:flex; flex-direction:column}
.stats dt{color:var(--muted); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase}
.stats dd{margin:2px 0 0; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.up{color:var(--accent-2)}
.down{color:var(--cool)}
.loading .now, .loading .value, .loading .facts b, .loading .stats dd, .loading .bars{opacity:.45}

/* история давления столбиками */
.bars{display:flex; align-items:stretch; gap:12px; height:200px; transition:opacity .2s ease}
.bar{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:8px}
.bar .col{flex:1; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px}
.bar b{font-size:.8rem; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.bar i{display:block; width:100%; max-width:72px; min-height:4px; border-radius:8px 8px 3px 3px; background:linear-gradient(to top, rgba(245,196,81,.16), rgba(245,196,81,.4)); transition:height .4s ease}
.bar.current i{background:linear-gradient(to top, var(--accent), var(--accent-2)); box-shadow:0 0 26px rgba(245,196,81,.22)}
.bar.current b{color:var(--accent-2)}
.bar > span{color:var(--muted); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap}
.empty{color:var(--muted); align-self:center; margin:0 auto}

footer{margin-top:40px; padding:26px 0 40px; border-top:1px solid var(--line); color:var(--muted); font-size:.88rem; display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; align-items:center}

@media (max-width:820px){
  .hero{grid-template-columns:1fr; align-items:start}
  .facts{grid-template-columns:repeat(4, auto); justify-content:start; gap:16px 40px}
}
@media (max-width:560px){
  header{padding:22px 0; gap:10px}
  .brand{font-size:.82rem; gap:10px}
  .brand svg{width:38px; height:38px}
  .refresh{padding:9px 11px}
  .refresh span{display:none}
  .status{gap:10px}
  .note{font-size:.8rem; gap:8px; white-space:nowrap}
  .note .year{display:none}
  .hero{padding:40px 0 30px}
  .facts{grid-template-columns:1fr 1fr; gap:16px 20px}
  .bars{gap:6px; height:170px}
  .bar b{font-size:.68rem}
}
@media (max-width:380px){
  .note .date{display:none}
}
@media (prefers-reduced-motion:reduce){ .note i,.loading .refresh svg{animation:none} .card,.refresh,.bar i{transition:none} }