/* ============================================================ ПОГОДА.ДВИЖОК — дизайн-система (mobile-first) Тема задаётся атрибутом ============================================================ */ :root{ --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --r:26px; --r-s:18px; --r-xs:12px; --glass:rgba(255,255,255,.12); --glass-2:rgba(255,255,255,.08); --glass-b:rgba(255,255,255,.22); --glass-hi:rgba(255,255,255,.2); --txt:#fff; --muted:rgba(255,255,255,.72); --dim:rgba(255,255,255,.48); --accent:#ffd166; --warm:#ff8a5c; --hot:#ff5d5d; --cold:#7cc6ff; --ice:#c9e9ff; --ok:#6ee7a8; --warn:#ffb454; --bad:#ff6b6b; --nav-h:66px; --shadow:0 12px 34px rgba(0,0,0,.16); --ease:cubic-bezier(.22,.8,.2,1); } /* ---------- Погодные темы (фон + акценты) ---------- */ [data-weather="sunny"] {--bg1:#1a63d6;--bg2:#4aa3f2;--bg3:#ffd08c;--fx-sun:1} [data-weather="rain"] {--bg1:#182231;--bg2:#2e4157;--bg3:#4c6580} [data-weather="snow"] {--bg1:#5b7ea6;--bg2:#93b3d3;--bg3:#e4eef7;--txt:#fff} [data-weather="cloudy"] {--bg1:#3d4f66;--bg2:#6a7f97;--bg3:#a3b2c3} [data-weather="thunder"]{--bg1:#0e1220;--bg2:#1f2440;--bg3:#3a3160} [data-weather="fog"] {--bg1:#6c7986;--bg2:#98a4af;--bg3:#c8d0d6} [data-weather="night"] {--bg1:#070b1e;--bg2:#141c45;--bg3:#2a2f66} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;font-family:var(--font);color:var(--txt); background:linear-gradient(165deg,var(--bg1) 0%,var(--bg2) 55%,var(--bg3) 100%); background-attachment:fixed;min-height:100vh; -webkit-font-smoothing:antialiased;overflow-x:hidden; transition:background 1.2s var(--ease); } a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0} svg.i{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em;flex:none} /* ---------- Слои эффектов ---------- */ #fx{position:fixed;inset:0;z-index:0;pointer-events:none} .sun{position:fixed;z-index:0;pointer-events:none;top:-90px;right:-90px;width:320px;height:320px;border-radius:50%; background:radial-gradient(circle,rgba(255,240,180,.95) 0%,rgba(255,214,120,.55) 28%,rgba(255,190,80,0) 62%); filter:blur(2px);opacity:0;transition:opacity 1s;animation:sunPulse 6s ease-in-out infinite} .sun::after{content:"";position:absolute;inset:-60px;border-radius:50%; background:conic-gradient(from 0deg,rgba(255,255,255,0) 0 8%,rgba(255,255,255,.14) 10%,rgba(255,255,255,0) 14%,rgba(255,255,255,0) 30%,rgba(255,255,255,.12) 33%,rgba(255,255,255,0) 37%,rgba(255,255,255,0) 58%,rgba(255,255,255,.1) 61%,rgba(255,255,255,0) 65%,rgba(255,255,255,0) 84%,rgba(255,255,255,.12) 87%,rgba(255,255,255,0) 91%); animation:spin 40s linear infinite} [data-weather="sunny"] .sun{opacity:1} .moon{position:fixed;z-index:0;pointer-events:none;top:40px;right:36px;width:74px;height:74px;border-radius:50%; background:radial-gradient(circle at 35% 35%,#fffbe8,#e9e4c8 60%,#cfc9a8); box-shadow:0 0 40px 10px rgba(255,250,220,.25),0 0 120px 40px rgba(200,210,255,.12);opacity:0;transition:opacity 1s} [data-weather="night"] .moon{opacity:1} .flash{position:fixed;inset:0;z-index:0;pointer-events:none;background:#fff;opacity:0} @keyframes sunPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} @keyframes spin{to{transform:rotate(360deg)}} /* ---------- Каркас ---------- */ .app{position:relative;z-index:1;max-width:540px;margin:0 auto;padding:10px 16px calc(var(--nav-h) + 28px)} @media(min-width:1000px){ .app{max-width:1120px;display:grid;grid-template-columns:repeat(2,1fr);gap:0 18px;align-items:start;padding-top:20px} .span2{grid-column:1/-1} :root{--nav-h:0px} .bottom-nav{display:none} .desk-nav{display:flex} } .desk-nav{display:none} /* ---------- Верхняя панель ---------- */ .topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0 4px} .topbar .place{display:flex;flex-direction:column;line-height:1.15} .topbar .place b{font-size:20px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:6px} .topbar .place span{font-size:12.5px;color:var(--muted)} .icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--glass);border:1px solid var(--glass-b); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:19px;transition:transform .2s,background .2s} .icon-btn:active{transform:scale(.92)} .icon-btn.on{background:var(--accent);color:#3a2b00;border-color:transparent} .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.02em} .brand .logo{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,#ffd166,#ff8a5c);display:grid;place-items:center;color:#2a1a00;font-size:18px;box-shadow:0 6px 16px rgba(255,150,80,.35)} /* ---------- Вкладки ---------- */ .tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px 0 2px;margin:0 -16px;padding-left:16px;padding-right:16px} .tabs::-webkit-scrollbar{display:none} .tab{flex:none;padding:9px 15px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--muted);background:var(--glass-2);border:1px solid transparent;transition:all .25s} .tab.on{color:#1b2233;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.18)} .tab:not(.on):hover{background:var(--glass);border-color:var(--glass-b)} /* ---------- Hero ---------- */ .hero{padding:18px 4px 6px;text-align:left;animation:up .7s var(--ease) both} .hero .date{font-size:13.5px;color:var(--muted);font-weight:500} .hero .big{display:flex;align-items:flex-start;gap:6px;margin:4px 0 0} .hero .temp{font-size:clamp(88px,26vw,120px);font-weight:200;line-height:.95;letter-spacing:-.05em;font-variant-numeric:tabular-nums} .hero .deg{font-size:44px;font-weight:300;margin-top:14px;opacity:.85} .hero .cond{font-size:22px;font-weight:600;letter-spacing:-.01em;margin-top:6px;display:flex;align-items:center;gap:8px} .hero .cond svg{width:28px;height:28px} .hero .sub{color:var(--muted);font-size:14.5px;margin-top:6px;display:flex;flex-wrap:wrap;gap:6px 14px} .hero .sub b{color:var(--txt);font-weight:600} .hero-row{display:flex;align-items:center;justify-content:space-between;gap:12px} .hero-icon{width:120px;height:120px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.25));animation:float 5s ease-in-out infinite} .hero-icon svg{width:100%;height:100%} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} /* ---------- Пилюли/чипы ---------- */ .pill{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:blur(10px)} .pill .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(110,231,168,.25)} .pill.warn .dot{background:var(--warn);box-shadow:0 0 0 4px rgba(255,180,84,.25)} .pill.bad .dot{background:var(--bad);box-shadow:0 0 0 4px rgba(255,107,107,.25)} .chips{display:flex;gap:8px;flex-wrap:wrap} .chip{padding:9px 13px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-b);font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:7px;transition:transform .2s,background .2s} .chip:active{transform:scale(.96)} .chip.ok{border-color:rgba(110,231,168,.5)} .chip.warn{border-color:rgba(255,180,84,.55)} .chip.bad{border-color:rgba(255,107,107,.55)} .chip .st{width:8px;height:8px;border-radius:50%} .chip.ok .st{background:var(--ok)} .chip.warn .st{background:var(--warn)} .chip.bad .st{background:var(--bad)} /* ---------- Карточки ---------- */ .card{position:relative;background:var(--glass);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%); border:1px solid var(--glass-b);border-radius:var(--r);padding:18px;margin-top:14px;box-shadow:var(--shadow); animation:up .7s var(--ease) both} .card:nth-of-type(2){animation-delay:.05s}.card:nth-of-type(3){animation-delay:.1s}.card:nth-of-type(4){animation-delay:.15s} .card:nth-of-type(5){animation-delay:.2s}.card:nth-of-type(6){animation-delay:.25s}.card:nth-of-type(7){animation-delay:.3s} .card:nth-of-type(n+8){animation-delay:.35s} .card h2{margin:0 0 12px;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:8px} .card h2 .more{margin-left:auto;text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--txt);opacity:.85} .card h3{margin:0 0 4px;font-size:17px;font-weight:700;letter-spacing:-.01em} .card p{margin:0;line-height:1.5;font-size:14.5px} .card p.muted{color:var(--muted)} .card.tight{padding:14px 16px} .card.accent{background:linear-gradient(135deg,rgba(255,209,102,.25),rgba(255,138,92,.18));border-color:rgba(255,209,102,.4)} .card.blue{background:linear-gradient(135deg,rgba(124,198,255,.25),rgba(120,140,255,.15));border-color:rgba(124,198,255,.4)} @keyframes up{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}} /* ---------- Главное сегодня (insights) ---------- */ .insights{display:flex;flex-direction:column;gap:10px} .insight{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-s);background:var(--glass-2);border:1px solid rgba(255,255,255,.1)} .insight .ic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-size:20px;flex:none;background:rgba(255,255,255,.14)} .insight .ic.warm{background:linear-gradient(135deg,#ffb454,#ff6b6b);color:#fff} .insight .ic.cold{background:linear-gradient(135deg,#7cc6ff,#5b7cff);color:#fff} .insight .ic.wet{background:linear-gradient(135deg,#4aa3f2,#1d5fd6);color:#fff} .insight .ic.wind{background:linear-gradient(135deg,#a3b2c3,#6a7f97);color:#fff} .insight .ic.sun{background:linear-gradient(135deg,#ffe08a,#ffb454);color:#5a3a00} .insight b{display:block;font-size:15px;font-weight:650;letter-spacing:-.01em} .insight span{font-size:13px;color:var(--muted)} /* ---------- Почасовой скролл ---------- */ .hscroll{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 8px;margin:0 -6px;scrollbar-width:none} .hscroll::-webkit-scrollbar{display:none} .hour{flex:none;width:64px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:var(--r-s);background:var(--glass-2);border:1px solid rgba(255,255,255,.08);transition:transform .2s,background .2s} .hour.now{background:#fff;color:#1b2233} .hour.now .p{color:#1d5fd6} .hour .t{font-size:12px;color:var(--muted);font-weight:600} .hour.now .t{color:#5b6473} .hour svg{width:26px;height:26px} .hour .v{font-size:17px;font-weight:700;letter-spacing:-.02em} .hour .p{font-size:11.5px;color:var(--cold);font-weight:700;min-height:14px} .hour.night{background:rgba(0,0,0,.14)} /* ---------- Кривая температуры ---------- */ .curve-wrap{position:relative;margin-top:6px} .curve{width:100%;height:96px;display:block;overflow:visible} .curve .line{fill:none;stroke:url(#gradLine);stroke-width:3;stroke-linecap:round} .curve .area{fill:url(#gradArea)} .curve .pt{fill:#fff;stroke:rgba(0,0,0,.2)} .curve .lbl{font-size:11px;fill:#fff;font-weight:700;text-anchor:middle} .curve .ax{font-size:10px;fill:rgba(255,255,255,.55);text-anchor:middle} /* ---------- Сетки ---------- */ .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .tile{padding:14px;border-radius:var(--r-s);background:var(--glass-2);border:1px solid rgba(255,255,255,.1);min-height:96px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s} .tile:active{transform:scale(.97)} .tile .k{font-size:12px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.05em} .tile .v{font-size:24px;font-weight:700;letter-spacing:-.03em;margin-top:8px;line-height:1.05} .tile .v small{font-size:13px;font-weight:600;color:var(--muted);margin-left:3px;letter-spacing:0} .tile .d{font-size:12.5px;color:var(--muted);margin-top:5px} .tile.when .v{font-size:20px} .tile.when .ic{font-size:22px;margin-bottom:4px} /* ---------- Дни ---------- */ .days{display:flex;flex-direction:column} .day{display:grid;grid-template-columns:76px 34px 1fr;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px solid rgba(255,255,255,.1)} .day:last-child{border-bottom:0} .day .n{font-size:15px;font-weight:600} .day .n small{display:block;font-size:11.5px;color:var(--muted);font-weight:500} .day svg{width:26px;height:26px} .day .pp{font-size:11px;color:var(--cold);font-weight:700;text-align:center} .range{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;gap:8px;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums} .range .lo{color:var(--muted);text-align:right} .range .bar{height:6px;border-radius:999px;background:rgba(0,0,0,.18);position:relative;overflow:hidden} .range .bar i{position:absolute;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#7cc6ff,#ffd166 60%,#ff8a5c); left:var(--l);right:var(--rr);animation:grow 1s var(--ease) both} @keyframes grow{from{transform:scaleX(0);transform-origin:left}to{transform:none}} .day.weekend .n{color:var(--accent)} /* ---------- Модели / уверенность ---------- */ .models{display:flex;flex-direction:column;gap:9px} .model{display:grid;grid-template-columns:86px 1fr 46px;align-items:center;gap:10px;font-size:13.5px} .model .nm{font-weight:600} .model .nm small{display:block;font-size:11px;color:var(--dim);font-weight:500} .model .bar{height:8px;border-radius:999px;background:rgba(0,0,0,.18);overflow:hidden} .model .bar i{display:block;height:100%;width:var(--w);border-radius:999px;background:linear-gradient(90deg,#7cc6ff,#fff);animation:grow 1s var(--ease) both} .model .v{font-weight:700;text-align:right;font-variant-numeric:tabular-nums} .conf{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px;border-radius:var(--r-s);background:rgba(110,231,168,.14);border:1px solid rgba(110,231,168,.35)} .conf.warn{background:rgba(255,180,84,.14);border-color:rgba(255,180,84,.4)} .conf .ring{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:12px;font-weight:800; background:conic-gradient(var(--ok) calc(var(--p)*1%),rgba(255,255,255,.15) 0);position:relative} .conf.warn .ring{background:conic-gradient(var(--warn) calc(var(--p)*1%),rgba(255,255,255,.15) 0)} .conf .ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:rgba(30,40,60,.75)} .conf .ring span{position:relative} .conf b{display:block;font-size:14.5px} .conf small{color:var(--muted);font-size:12.5px} /* ---------- Изменения прогноза ---------- */ .changes{display:flex;flex-direction:column;gap:8px} .change{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-s);background:var(--glass-2);font-size:14px} .change .arrow{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-weight:800;flex:none} .change .arrow.down{background:rgba(124,198,255,.25);color:var(--ice)} .change .arrow.up{background:rgba(255,138,92,.28);color:#ffd9c7} .change .arrow.shift{background:rgba(255,255,255,.16)} .change s{color:var(--dim);text-decoration:line-through;margin-right:6px} .change b{font-weight:700} .change small{display:block;color:var(--dim);font-size:12px;margin-top:2px} /* ---------- Восход/закат дуга ---------- */ .sunarc{position:relative;height:110px;margin:6px 0 0} .sunarc svg{width:100%;height:100%;overflow:visible} .sunarc .track{fill:none;stroke:rgba(255,255,255,.25);stroke-width:2;stroke-dasharray:4 6} .sunarc .prog{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round} .sunarc .sundot{fill:#fff3b0;filter:drop-shadow(0 0 10px rgba(255,220,120,.9))} .sunarc .t{font-size:12px;fill:var(--muted);font-weight:600} .sunarc .t.b{fill:#fff;font-size:13px} /* ---------- Список городов ---------- */ .cities{display:grid;grid-template-columns:1fr 1fr;gap:10px} .city{position:relative;padding:14px;border-radius:var(--r-s);background:var(--glass-2);border:1px solid rgba(255,255,255,.1);overflow:hidden;display:flex;flex-direction:column;gap:6px;transition:transform .2s,background .2s} .city:hover{background:var(--glass)} .city:active{transform:scale(.97)} .city .nm{font-weight:650;font-size:15px;display:flex;align-items:center;gap:6px;letter-spacing:-.01em} .city .nm small{color:var(--dim);font-weight:500;font-size:11.5px} .city .row{display:flex;align-items:center;justify-content:space-between;gap:8px} .city .tv{font-size:30px;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums} .city svg{width:30px;height:30px} .city .cd{font-size:12.5px;color:var(--muted)} .city.big{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between} .city.big .tv{font-size:40px} .list{display:flex;flex-direction:column} .list .li{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.1);font-size:15px} .list .li:last-child{border-bottom:0} .list .li svg{width:24px;height:24px} .list .li .g{flex:1;font-weight:600} .list .li .g small{display:block;font-weight:500;font-size:12px;color:var(--dim)} .list .li .tv{font-weight:700;font-variant-numeric:tabular-nums;min-width:40px;text-align:right} .list .li .cv{color:var(--muted);font-size:13px;min-width:70px;text-align:right} .list .li .chev{color:var(--dim)} /* ---------- Поиск ---------- */ .search{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 16px;border-radius:999px;background:rgba(255,255,255,.92);color:#1b2233;box-shadow:0 14px 34px rgba(0,0,0,.2);margin-top:14px;animation:up .7s var(--ease) both} .search input{flex:1;border:0;outline:0;font:inherit;font-size:16px;background:none;color:#1b2233;min-width:0} .search input::placeholder{color:#7b8494} .search .go{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#1d5fd6,#4aa3f2);color:#fff;display:grid;place-items:center;font-size:20px;box-shadow:0 6px 16px rgba(29,95,214,.4)} .geo{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-s);background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.1));border:1px solid var(--glass-b);margin-top:10px} .geo .ic{width:40px;height:40px;border-radius:50%;background:#fff;color:#1d5fd6;display:grid;place-items:center;font-size:20px;animation:pulse 2.4s ease-in-out infinite} .geo b{display:block;font-size:15px} .geo span{font-size:13px;color:var(--muted)} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}60%{box-shadow:0 0 0 14px rgba(255,255,255,0)}} /* ---------- Части дня ---------- */ .parts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .part{padding:12px 8px;border-radius:var(--r-s);background:var(--glass-2);border:1px solid rgba(255,255,255,.1);text-align:center} .part .k{font-size:11.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em} .part svg{width:30px;height:30px;margin:8px auto 4px;display:block} .part .v{font-size:20px;font-weight:700;letter-spacing:-.02em} .part .d{font-size:11.5px;color:var(--muted);margin-top:2px} /* ---------- Почасовая таблица ---------- */ .hrow{display:grid;grid-template-columns:52px 30px 1fr 54px 64px;align-items:center;gap:8px;padding:10px 4px;border-bottom:1px solid rgba(255,255,255,.09);font-size:14px} .hrow:last-child{border-bottom:0} .hrow .t{font-weight:700;font-variant-numeric:tabular-nums} .hrow .t small{display:block;font-weight:500;font-size:11px;color:var(--dim)} .hrow svg{width:24px;height:24px} .hrow .tv{font-weight:700;font-size:16px;letter-spacing:-.02em} .hrow .tv small{font-weight:500;color:var(--muted);font-size:12px;margin-left:6px} .hrow .pp{color:var(--cold);font-weight:700;font-size:12.5px;text-align:right} .hrow .wd{color:var(--muted);font-size:12.5px;text-align:right} .hrow.now{background:rgba(255,255,255,.14);border-radius:12px;padding-left:8px;padding-right:8px;margin:0 -4px} .sticky-h{position:sticky;top:0;z-index:2;padding:8px 4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:linear-gradient(var(--bg2),transparent);backdrop-filter:blur(6px)} .bars{display:flex;align-items:flex-end;gap:3px;height:70px;margin-top:8px} .bars i{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#7cc6ff,rgba(124,198,255,.35));height:var(--h);animation:growY .9s var(--ease) both} @keyframes growY{from{transform:scaleY(0);transform-origin:bottom}to{transform:none}} /* ---------- Точность прогноза ---------- */ .acc{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;font-size:14px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.1)} .acc:last-child{border-bottom:0} .acc .m{font-weight:600} .acc .m small{display:block;color:var(--dim);font-size:12px;font-weight:500} .acc .e{font-weight:800;padding:4px 10px;border-radius:999px;font-size:12.5px} .acc .e.ok{background:rgba(110,231,168,.2);color:#c9ffe3} .acc .e.warn{background:rgba(255,180,84,.2);color:#ffe4bd} .acc .e.bad{background:rgba(255,107,107,.2);color:#ffd0d0} /* ---------- Футер ---------- */ .foot{margin-top:18px;font-size:12px;color:var(--dim);line-height:1.6;text-align:center;padding:0 10px} .foot a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.3)} /* ---------- Нижняя навигация ---------- */ .bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:5;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding:0 8px env(safe-area-inset-bottom); display:flex;justify-content:space-around;align-items:center;background:rgba(20,26,40,.62);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%); border-top:1px solid rgba(255,255,255,.12)} .bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--dim);padding:6px 10px;border-radius:14px;transition:color .2s,transform .2s} .bottom-nav a svg{width:23px;height:23px} .bottom-nav a.on{color:#fff} .bottom-nav a.on svg{filter:drop-shadow(0 0 8px rgba(255,209,102,.7))} .bottom-nav a:active{transform:scale(.9)} .desk-nav{gap:6px;align-items:center} .desk-nav a{padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted)} .desk-nav a.on{background:var(--glass);color:#fff;border:1px solid var(--glass-b)} /* ---------- Демо-переключатель погоды ---------- */ .demo{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + 10px + env(safe-area-inset-bottom));z-index:6;display:flex;gap:4px;padding:5px;border-radius:999px; background:rgba(20,26,40,.7);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.15);box-shadow:0 10px 30px rgba(0,0,0,.35);max-width:calc(100% - 24px);overflow-x:auto;scrollbar-width:none} .demo::-webkit-scrollbar{display:none} .demo button{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:18px;opacity:.6;transition:all .25s} .demo button.on{opacity:1;background:rgba(255,255,255,.18);transform:scale(1.05)} .demo-label{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + 58px + env(safe-area-inset-bottom));z-index:6;font-size:11px;color:rgba(255,255,255,.6);font-weight:600;letter-spacing:.05em;text-transform:uppercase;pointer-events:none} /* ---------- Прочее ---------- */ .badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:rgba(255,255,255,.16)} .badge.ok{background:rgba(110,231,168,.22)} .badge.warn{background:rgba(255,180,84,.24)} .badge.bad{background:rgba(255,107,107,.24)} .sep{height:1px;background:rgba(255,255,255,.1);margin:14px 0} .mt{margin-top:12px} .row{display:flex;align-items:center;gap:10px} .between{justify-content:space-between} .small{font-size:12.5px;color:var(--muted)} .skel{background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.18),rgba(255,255,255,.08));background-size:200% 100%;animation:sh 1.4s infinite} @keyframes sh{to{background-position:-200% 0}} .alert{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--r-s);background:linear-gradient(135deg,rgba(255,107,107,.28),rgba(255,180,84,.2));border:1px solid rgba(255,140,120,.5);margin-top:14px;animation:up .7s var(--ease) both} .alert .ic{font-size:22px;flex:none;animation:shake 3s ease-in-out infinite} .alert b{display:block;font-size:14.5px} .alert span{font-size:13px;color:var(--muted)} @keyframes shake{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(-10deg)}96%{transform:rotate(10deg)}} /* ---------- Доступность / производительность ---------- */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} #fx{display:none} } @media(max-width:360px){.hero .temp{font-size:82px}.grid3{grid-template-columns:1fr 1fr}} /* ---------- Динамические таблицы Погодафона ---------- */ .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-s)} .weather-table{width:100%;min-width:760px;border-collapse:collapse;font-size:13px} .weather-table th,.weather-table td{padding:11px 10px;text-align:left;border-bottom:1px solid rgba(255,255,255,.1);white-space:nowrap} .weather-table th{position:sticky;top:0;background:rgba(24,34,49,.92);color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.04em;z-index:1} .weather-table td .i{vertical-align:middle;margin-right:5px} .weather-table tr:last-child td{border-bottom:0} @media(min-width:1000px){ .app{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .app>*{min-width:0} .bottom-nav{display:none} .desk-nav{display:flex} .hscroll,.table-scroll,.curve-wrap{min-width:0;max-width:100%} }