:root {
  --font-scale: 1; --pad: 18px; --blur: 22px; --dim: .5; --glass: .58;
  --radius: 24px; --text: #eef4fb; --muted: rgba(238,244,251,.72);
  --line: rgba(255,255,255,.16); --gap: 18px;
  --font: "Segoe UI","PT Sans",system-ui,sans-serif;
}
* { box-sizing: border-box; }
html { font-size: calc(15px * var(--font-scale)); }
body { margin:0; color:var(--text); font-family:var(--font); background:#081018; }
body.no-anim * { animation:none!important; transition:none!important; }
#bg { position:fixed; inset:0; background:#081018 center/cover no-repeat; z-index:0; }
#bg::after { content:""; position:absolute; inset:0; background:rgba(6,10,16,var(--dim)); }
.app { position:relative; z-index:1; min-height:100vh; }
.topbar {
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  background:rgba(8,14,22,.78); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30;
}
.brand { display:flex; align-items:center; gap:8px; color:inherit; text-decoration:none; font-weight:750; }
.brand img { width:28px; height:28px; }
.nav { display:flex; gap:3px; flex:1; flex-wrap:wrap; }
.nav a { color:var(--muted); text-decoration:none; padding:8px 11px; border-radius:999px; }
.nav a.active { background:#eef4fb; color:#111827; font-weight:700; }
.tools { display:flex; gap:6px; flex-wrap:wrap; }
.btn { border:1px solid var(--line); background:rgba(255,255,255,.08); color:inherit; border-radius:999px; padding:7px 12px; cursor:pointer; }
.burger { display:inline-flex; align-items:center; justify-content:center; min-width:42px; font-size:20px; font-weight:700; }
.wrap { width:min(1200px,calc(100% - 28px)); margin:0 auto; }
.hero {
  margin:18px auto 16px; padding:22px 24px;
  background:rgba(10,16,26,calc(var(--glass) * .28));
  border:1px solid var(--line); border-radius:28px;
  backdrop-filter:blur(var(--blur));
  display:flex; justify-content:space-between; gap:16px; box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.kicker { letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; color:var(--muted); }
.clock { font-size:clamp(42px,7vw,72px); font-weight:750; line-height:1; margin:6px 0; }
.home-top { display:grid; grid-template-columns:1.35fr .9fr; gap:var(--gap); }
.stack { display:grid; gap:var(--gap); }
.room {
  background:rgba(10,16,26,calc(var(--glass) * .38));
  border:1px solid var(--line);
  border-radius:var(--radius);
  backdrop-filter:blur(var(--blur)) saturate(1.2);
  padding:var(--pad);
}
.room-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.badge { display:inline-block; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:999px; background:#f2c14b; color:#1a1406; font-weight:800; }
.room h2 { margin:6px 0 12px; font-size:1.18rem; }
.chips { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.pills .chip { min-width:150px; }
.glyph { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.12); font-size:18px; flex:none; }
.conv { margin-top:12px; padding:10px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.05); }
.conv-row { display:flex; gap:8px; margin:8px 0; }
.conv-row input,.conv-row select { flex:1; padding:8px; border-radius:10px; border:1px solid var(--line); background:rgba(0,0,0,.35); color:inherit; }
.conv-out { font-weight:700; }
.chip {
  display:flex; align-items:center; gap:10px; min-height:54px;
  padding:8px 40px 8px 10px; position:relative;
  border-radius:18px; text-decoration:none; color:inherit;
  background:rgba(8,14,22,.45); border:1px solid var(--line);
}
.chip:hover { background:rgba(255,255,255,.13); }
.chip img { width:32px; height:32px; border-radius:9px; object-fit:contain; background:#fff; padding:3px; }
.chip small { display:block; color:var(--muted); font-size:.75rem; }
.star { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:28px; height:28px; border:1px solid rgba(255,213,106,.45); border-radius:8px; background:rgba(0,0,0,.35); color:#ffd56a; cursor:pointer; }
.star.on { background:#ffd56a; color:#1a1404; }
.rooms { display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--gap); margin:16px 0 48px; }
.room:nth-child(3n+1) .badge{background:#7ddea3;color:#102418}
.room:nth-child(3n+2) .badge{background:#b7a6ff;color:#1a1430}
.room:nth-child(3n) .badge{background:#7ec8ff;color:#0b2433}


.wx-now{display:flex;align-items:center;gap:22px;margin:10px 0 14px}
.wx-temp{min-width:0}.wx-deg{font-size:64px;line-height:1;font-weight:700}.wx-name{font-size:1.35rem;margin-top:6px;font-weight:600}
/* Большая погодная сцена */
.wx-scene{position:relative;width:280px;height:168px;border-radius:26px;overflow:hidden;flex:none;background:linear-gradient(180deg,#6fb8e8 0%,#a9d4ee 55%,#cfe6f2 100%);isolation:isolate}
.wx-scene::after{content:"";position:absolute;inset:auto 8% 10% 8%;height:26%;border-radius:50%;background:rgba(83,165,211,.14);filter:blur(18px);z-index:0}
.wx-sky{position:absolute;inset:0;overflow:hidden;z-index:1}.wx-sky.is-night{background:linear-gradient(180deg,#17233d 0%,#263a5e 60%,#33507e 100%)}
.wx-celestial{position:absolute;left:60%;top:14%;width:76px;height:76px;border-radius:50%;background:radial-gradient(circle at 36% 32%,#fff9c8,#ffd670 58%,#f2ae48);box-shadow:0 0 34px rgba(255,210,102,.72),0 0 80px rgba(255,188,74,.28);animation:sunGlow 3.6s ease-in-out infinite}
.wx-celestial.night{background:radial-gradient(circle at 38% 32%,#fff,#dbe8ff 58%,#9ab5df);box-shadow:0 0 28px rgba(190,216,255,.62),0 0 76px rgba(126,166,228,.25)}
.wx-celestial.night::after{content:"";position:absolute;width:64px;height:64px;right:-9px;top:-8px;border-radius:50%;background:rgba(34,58,91,.92)}
.wx-celestial.hot{background:radial-gradient(circle at 36% 32%,#fffbd2,#ffcc55 54%,#f08b32);box-shadow:0 0 42px rgba(255,188,74,.86),0 0 100px rgba(242,117,42,.38)}
.wx-rays{position:absolute;inset:-28px;animation:raysSpin 16s linear infinite}.wx-ray{position:absolute;left:50%;top:50%;width:4px;height:15px;border-radius:99px;background:linear-gradient(180deg,rgba(255,244,183,.98),rgba(255,194,74,.56));box-shadow:0 0 8px rgba(255,210,102,.52);transform:translate(-50%,-50%) rotate(var(--ray-angle)) translateY(-52px)}
.wx-star{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 9px #d9e8ff;animation:starPulse 3s ease-in-out infinite}.wx-star.s1{left:18%;top:20%}.wx-star.s2{left:38%;top:12%;animation-delay:.7s}.wx-star.s3{right:14%;top:34%;animation-delay:1.4s}
.wx-cloud{position:absolute;left:18%;top:44%;width:92px;height:34px;border-radius:999px;background:linear-gradient(180deg,#f9fcff,#b8cfdf);box-shadow:0 8px 16px rgba(0,0,0,.22),inset 0 2px rgba(255,255,255,.74);animation:cloudDrift 6s ease-in-out infinite;z-index:2}.wx-cloud::before,.wx-cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}.wx-cloud::before{width:46px;height:46px;left:15px;top:-22px}.wx-cloud::after{width:56px;height:56px;right:8px;top:-30px}.wx-cloud.back{left:8%;top:32%;transform:scale(.66);opacity:.64;animation:cloudDriftBack 8.5s ease-in-out infinite}.wx-cloud.front{left:26%;top:52%;transform:scale(.82);animation-delay:-1.8s}
.wx-particle{position:absolute;top:66%;z-index:4}.wx-drop{width:4px;height:28px;border-radius:99px;background:linear-gradient(180deg,rgba(158,224,255,.1),#72cfff);box-shadow:0 0 8px rgba(99,202,255,.62);animation:rainDrop 1s linear infinite}.wx-drop.heavy{width:5px;height:34px;animation-duration:.66s}.wx-snow{width:9px;height:9px;border-radius:50%;background:#f4fbff;box-shadow:0 0 10px rgba(255,255,255,.7);animation:snowFall 3.1s ease-in infinite}
.wx-fog-line{position:absolute;left:8%;height:10px;border-radius:99px;background:linear-gradient(90deg,transparent,rgba(226,242,252,.8),transparent);animation:fogMove 5.5s ease-in-out infinite}.wx-fog-line.f1{width:74%;top:53%}.wx-fog-line.f2{width:84%;top:66%;animation-delay:-1.8s}.wx-fog-line.f3{width:62%;top:78%;animation-delay:-3.2s}
.wx-wind-line{position:absolute;left:5%;height:4px;border-radius:99px;background:linear-gradient(90deg,transparent,rgba(189,231,255,.9),transparent);animation:windSweep 2.8s ease-in-out infinite}.wx-wind-line.w1{width:76%;top:47%}.wx-wind-line.w2{width:62%;top:61%;animation-delay:-.9s}.wx-wind-line.w3{width:82%;top:75%;animation-delay:-1.7s}.wx-heat-wave{position:absolute;bottom:6%;width:34px;height:74px;border-left:4px solid rgba(255,211,117,.72);border-radius:50%;filter:blur(.3px);animation:heatRise 2.6s ease-in-out infinite}.wx-heat-wave.h1{left:20%}.wx-heat-wave.h2{left:43%;animation-delay:-.8s}.wx-heat-wave.h3{left:68%;animation-delay:-1.6s}.wx-lightning{position:absolute;z-index:6;left:54%;top:56%;width:30px;height:72px;background:#fff2a8;clip-path:polygon(45% 0,100% 0,62% 42%,92% 42%,15% 100%,36% 53%,0 53%);filter:drop-shadow(0 0 12px rgba(255,236,147,.8));animation:lightningFlash 6.2s steps(1) infinite}
/* Отдельные мини-анимации прогноза: не масштаб большой сцены */
.wx-mini{position:relative;width:82px;height:54px;margin:5px auto 6px;border-radius:15px;overflow:hidden;background:linear-gradient(180deg,#72bff0,#c8e7f7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}.wx-mini.is-night{background:linear-gradient(180deg,#16233e,#304d78)}
.wm-sun{position:absolute;width:24px;height:24px;border-radius:50%;left:28px;top:14px;background:radial-gradient(circle at 35% 30%,#fff9ca,#ffd35d 62%,#f1ae39);box-shadow:0 0 14px rgba(255,209,87,.8);animation:wmSun 2.8s ease-in-out infinite}.wm-rays{position:absolute;inset:-11px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffe98b 0 4deg,transparent 4deg 30deg);animation:raysSpin 12s linear infinite;z-index:-1}
.wm-moon{position:absolute;width:22px;height:22px;left:47px;top:8px;border-radius:50%;background:#eef5ff;box-shadow:0 0 10px rgba(225,238,255,.7);animation:wmMoon 3.2s ease-in-out infinite}.wm-moon::after{content:"";position:absolute;width:19px;height:19px;left:7px;top:-3px;border-radius:50%;background:#263d64}.wm-star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 5px #fff;animation:starPulse 2.2s ease-in-out infinite}.wm-star.a{left:18px;top:12px}.wm-star.b{left:30px;top:7px;animation-delay:.7s}
.wm-cloud{position:absolute;width:37px;height:13px;border-radius:999px;background:linear-gradient(180deg,#fff,#c8d8e4);box-shadow:0 4px 8px rgba(0,0,0,.16);animation:wmCloud 3.6s ease-in-out infinite;z-index:3}.wm-cloud::before,.wm-cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}.wm-cloud::before{width:18px;height:18px;left:6px;top:-8px}.wm-cloud::after{width:21px;height:21px;right:4px;top:-10px}.wm-cloud.c1{left:13px;top:25px}.wm-cloud.c2{left:32px;top:19px;opacity:.82;transform:scale(.76);animation-delay:-1.2s}.wm-cloud.c2::before,.wm-cloud.c2::after{background:#d7e0e8}
.wx-mini.wxm-cloud .wm-cloud,.wx-mini.wxm-rain .wm-cloud,.wx-mini.wxm-heavy-rain .wm-cloud,.wx-mini.wxm-storm .wm-cloud{background:linear-gradient(180deg,#eaf2f8,#8fa9bc)}
.wm-drop{position:absolute;top:36px;width:2px;height:12px;border-radius:99px;background:#6fc8ff;box-shadow:0 0 4px #62bfff;animation:wmRain .85s linear infinite;z-index:4}.wm-flake{position:absolute;top:33px;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 5px #fff;animation:wmSnow 1.8s linear infinite;z-index:4}.wm-bolt{position:absolute;left:36px;top:31px;width:10px;height:20px;background:#ffe36d;clip-path:polygon(50% 0,100% 0,62% 44%,90% 44%,10% 100%,38% 55%,0 55%);filter:drop-shadow(0 0 6px #ffe36d);animation:wmFlash 2.7s steps(1) infinite;z-index:5}
.wm-fog{position:absolute;left:9px;height:5px;border-radius:99px;background:linear-gradient(90deg,transparent,rgba(240,250,255,.92),transparent);animation:wmFog 3.4s ease-in-out infinite}.wm-fog.f1{top:18px;width:62px}.wm-fog.f2{top:28px;width:68px;animation-delay:-1s}.wm-fog.f3{top:38px;width:55px;animation-delay:-2s}.wm-wind{position:absolute;left:7px;height:3px;border-radius:99px;background:linear-gradient(90deg,transparent,#d7f2ff,transparent);animation:wmWind 1.9s ease-in-out infinite;z-index:4}.wm-wind.w1{top:18px;width:63px}.wm-wind.w2{top:30px;width:52px;animation-delay:-.6s}.wm-wind.w3{top:41px;width:66px;animation-delay:-1.2s}.wm-heat{position:absolute;bottom:3px;width:12px;height:24px;border-left:2px solid rgba(255,222,126,.9);border-radius:50%;animation:heatRise 1.8s ease-in-out infinite}.wm-heat.h1{left:12px}.wm-heat.h2{left:34px;animation-delay:-.6s}.wm-heat.h3{left:58px;animation-delay:-1.2s}
@keyframes sunGlow{50%{transform:scale(1.06);box-shadow:0 0 42px rgba(255,210,102,.82),0 0 92px rgba(255,188,74,.34)}}@keyframes raysSpin{to{transform:rotate(360deg)}}@keyframes starPulse{50%{opacity:.3;transform:scale(.7)}}@keyframes cloudDrift{50%{transform:translate3d(15px,-4px,0)}}@keyframes cloudDriftBack{50%{transform:translate3d(-13px,3px,0) scale(.68)}}@keyframes rainDrop{0%{transform:translate3d(10px,-24px,0);opacity:0}14%{opacity:1}100%{transform:translate3d(-12px,88px,0);opacity:0}}@keyframes snowFall{0%{transform:translate3d(0,-20px,0) rotate(0);opacity:0}16%{opacity:1}100%{transform:translate3d(20px,90px,0) rotate(240deg);opacity:0}}@keyframes fogMove{50%{transform:translateX(8%);opacity:.58}}@keyframes windSweep{0%,100%{transform:translateX(-7%);opacity:.45}50%{transform:translateX(11%);opacity:1}}@keyframes heatRise{0%,100%{transform:translate3d(-3px,5px,0) skewX(-8deg);opacity:.35}50%{transform:translate3d(5px,-7px,0) skewX(8deg);opacity:.95}}@keyframes lightningFlash{0%,89%,93%,100%{opacity:0}90%,92%{opacity:1}}
@keyframes wmSun{50%{transform:scale(1.07)}}@keyframes wmMoon{50%{transform:translateY(-2px)}}@keyframes wmCloud{50%{transform:translateX(5px) translateY(-2px)}}@keyframes wmRain{0%{transform:translateY(-8px);opacity:0}18%{opacity:1}100%{transform:translateY(18px);opacity:0}}@keyframes wmSnow{0%{transform:translateY(-7px) rotate(0);opacity:0}20%{opacity:1}100%{transform:translate(5px,18px) rotate(160deg);opacity:0}}@keyframes wmFlash{0%,70%,74%,100%{opacity:0}71%,73%{opacity:1}}@keyframes wmFog{50%{transform:translateX(7px);opacity:.5}}@keyframes wmWind{0%,100%{transform:translateX(-5px);opacity:.45}50%{transform:translateX(7px);opacity:1}}
.no-anim .wx-scene *,.no-anim .wx-mini *{animation:none!important}
.metrics { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:10px; }
.metric,.rate { background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:12px; padding:10px; }
.rates { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.overlay { display:none; position:fixed; inset:0; z-index:50; background:rgba(4,8,14,.58); padding:24px 12px; overflow:auto; }
.overlay.open { display:block; }
.sheet { width:min(840px,100%); margin:24px auto; padding:18px; background:rgba(12,18,28,.94); border:1px solid var(--line); border-radius:22px; }
.sheet h3{margin:0 0 10px}
.qpanel{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04)}
.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.qcard{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:16px;text-decoration:none;color:inherit;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.qcard:hover{background:rgba(255,255,255,.12)}
.qcard-kicker{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.qactions{display:flex;gap:8px;flex-wrap:wrap}
.search { width:100%; padding:12px; border-radius:12px; border:1px solid var(--line); background:rgba(0,0,0,.3); color:inherit; }
.bg-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.bg-grid img { width:100%; height:90px; object-fit:cover; border-radius:12px; cursor:pointer; border:2px solid transparent; }
.bg-grid img.on { border-color:#9ad0ff; }
.step { display:flex; align-items:center; gap:10px; margin:6px 0 12px; }
.step b { min-width:76px; text-align:center; }
.sun-spin { animation:spin 16s linear infinite; transform-box:fill-box; transform-origin:center; }
.cloud { animation:float 3.4s ease-in-out infinite; }
.drop { animation:fall 1.1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg);} }
@keyframes float { 50% { transform:translateY(-5px);} }
@keyframes fall { from{opacity:1} to{transform:translateY(18px);opacity:0} }
.contrast { --text:#fff; --muted:#dbe7f5; --dim:.72; }
@media (max-width:1100px){ .rooms,.home-top,.chips,.metrics{grid-template-columns:1fr 1fr;} }
@media (max-width:820px){
  .burger{display:inline-flex;}
  .nav{display:none;}
  .nav.open{display:flex; position:absolute; top:58px; left:8px; right:8px; background:#0c121c; padding:8px; border-radius:14px; flex-direction:column; z-index:40; border:1px solid var(--line);}
  .rooms,.home-top,.chips,.metrics,.rates{grid-template-columns:1fr;}
}

.wx-parts,.wx-forecast{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.wx-part,.wx-day{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;padding:8px;text-align:center}
.wx-part .weather-icon,.wx-day .weather-icon{width:72px;height:46px;margin:4px auto}
.metrics{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;margin-top:12px}
@media(max-width:900px){.wx-parts,.wx-forecast,.metrics{grid-template-columns:1fr 1fr}}

.hero-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.hero-actions .btn{white-space:nowrap}
.player-dock{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);
  z-index:40;display:flex;align-items:center;gap:8px;
  width:min(860px,calc(100% - 24px));padding:8px 12px;flex-wrap:wrap;
  background:rgba(10,16,26,.88);border:1px solid var(--line);border-radius:18px;
  backdrop-filter:blur(16px);
}
.player-dock[hidden]{display:none}
.player-dock .play{min-width:44px;font-weight:800}
.player-meta{flex:1;min-width:180px}
.player-meta b,.player-meta small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-meta small{color:var(--muted);font-size:.75rem}
.seek-row{display:flex;align-items:center;gap:8px;margin-top:4px}
.seek-row input{flex:1;accent-color:#9ad0ff}
.seek-row span{font-size:.7rem;color:var(--muted);min-width:34px}
.plist h3{margin:14px 0 6px;font-size:.95rem}
.vol-step{display:flex;align-items:center;gap:6px}
.vol-step b{min-width:42px;text-align:center}
.player-loop{font-size:.75rem;color:var(--muted);display:flex;align-items:center;gap:4px}
.plist{max-height:62vh;overflow:auto;display:grid;gap:6px;margin-top:10px}
.plist button{text-align:left;width:100%;padding:10px 12px;border-radius:12px}
.plist button.on{background:#eef4fb;color:#111}
.hero-home{align-items:center;min-height:168px;padding:16px 22px}
.hero-time{min-width:280px}
.hero-home .clock{font-size:clamp(44px,6vw,68px);letter-spacing:.02em}
.globe{width:168px;flex:none;text-align:center}
.globe-orb{width:150px;height:150px;margin:0 auto;filter:drop-shadow(0 12px 24px rgba(0,0,0,.45))}
.globe-orb svg{width:100%;height:100%}
.meridians{transform-origin:130px 130px;animation:spin 28s linear infinite}
.pin circle:first-child{animation:globePulse 2.2s ease-out infinite;transform-origin:156px 102px}
.globe-cap{margin-top:4px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@keyframes globePulse{0%{opacity:.9;transform:scale(1)}70%{opacity:0;transform:scale(1.8)}100%{opacity:0}}
@media(max-width:820px){.hero-home{flex-direction:column;align-items:flex-start}.globe{align-self:center}}

.bg-plus{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:110px;border:2px dashed #9ad0ff;border-radius:12px;cursor:pointer;color:#fff;background:rgba(80,140,220,.22);grid-column:1}
.bg-plus span{font-size:42px;line-height:1;color:#9ad0ff}
.bg-plus small{opacity:.95;margin-top:4px;font-weight:600}
.bg-cell{position:relative}
.bg-cell img{width:100%;height:90px;object-fit:cover;border-radius:12px;cursor:pointer;border:2px solid transparent}
.bg-cell img.on{border-color:#9ad0ff}
.bg-del{position:absolute;top:4px;right:4px;width:22px;height:22px;border:0;border-radius:50%;background:#000a;color:#fff;cursor:pointer}

.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:12px}
.media-card{position:relative}
.media-open{display:block;width:100%;padding:0;border:0;background:transparent;color:#fff;cursor:pointer}
.media-open img,.media-open video{width:100%;height:110px;object-fit:cover;border-radius:12px}
.media-audio{height:110px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:36px;background:rgba(255,255,255,.08)}
.media-open span{display:block;font-size:.75rem;opacity:.8;margin-top:4px}

.hero-mark{width:140px;height:92px;flex:none;display:grid;place-items:center;position:relative}
.hero-mark svg{width:128px;height:88px;overflow:visible;filter:drop-shadow(0 10px 18px rgba(0,0,0,.24))}
.hero-mark *{transform-box:fill-box;transform-origin:center}
.hero-mark .soft-glow{opacity:.45}

.h-money .coins{display:flex;align-items:center;gap:10px}
.h-money .coins span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:24px;font-weight:800;background:radial-gradient(circle at 30% 30%,#fff0b8 0%,#ffd871 45%,#d89a1f 100%);box-shadow:0 6px 18px rgba(255,196,73,.26);color:#4a2f00;animation:coinbob 2.8s ease-in-out infinite}
.h-money .coins span:nth-child(2){animation-delay:.22s}
.h-money .coins span:nth-child(3){animation-delay:.44s}
@keyframes coinbob{50%{transform:translateY(-8px) scale(1.06)}}

.h-city .orb{fill:#9ad0ff;opacity:.8;animation:pulse-soft 2s ease-in-out infinite}
.h-city .orb-b{animation-delay:.4s}
.h-city .cart-line,.h-city .wheel,.h-city .bag-handle{fill:none;stroke:#edf6ff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.h-city .bag-fill{fill:rgba(255,214,106,.92)}
.h-city .cart{animation:floaty 2.8s ease-in-out infinite}

.h-ai .chip-shell{fill:rgba(15,22,38,.88);stroke:rgba(255,255,255,.18);stroke-width:2}
.h-ai .chip-core{fill:url(#aiCoreGrad);filter:drop-shadow(0 0 10px rgba(143,200,255,.35));animation:aiCoreGlow 2.2s ease-in-out infinite}
.h-ai .chip-pins path,.h-ai .trace-lines path{fill:none;stroke:rgba(210,234,255,.7);stroke-width:3;stroke-linecap:round}
.h-ai .trace-lines path{stroke:rgba(122,219,213,.72);stroke-dasharray:18 24;animation:dataRun 2.2s linear infinite}
.h-ai .trace-dots circle{fill:#8ec8ff;stroke:#eaf6ff;stroke-width:1.6;animation:aiPulse 1.8s ease-in-out infinite}
.h-ai .trace-dots circle:nth-child(2){animation-delay:.18s}.h-ai .trace-dots circle:nth-child(3){animation-delay:.36s}.h-ai .trace-dots circle:nth-child(4){animation-delay:.54s}.h-ai .trace-dots circle:nth-child(5){animation-delay:.72s}.h-ai .trace-dots circle:nth-child(6){animation-delay:.9s}.h-ai .trace-dots circle:nth-child(7){animation-delay:1.08s}.h-ai .trace-dots circle:nth-child(8){animation-delay:1.26s}
.h-ai .core-wave{fill:none;stroke:#f4fbff;stroke-width:3.4;stroke-linecap:round;animation:brainWave 1.7s ease-in-out infinite}
.h-ai .core-pulse{fill:#fff;animation:aiDotPulse 1.3s ease-in-out infinite}
@keyframes aiPulse{50%{transform:scale(1.32);fill:#b985ff}}
@keyframes aiCoreGlow{50%{transform:scale(1.05);filter:drop-shadow(0 0 18px rgba(185,133,255,.55))}}
@keyframes dataRun{to{stroke-dashoffset:-42}}
@keyframes brainWave{50%{transform:translateY(-2px);stroke:#ffd56a}}
@keyframes aiDotPulse{50%{transform:scale(1.4);fill:#ffd56a}}

.h-media .eq-bar{fill:url(#none);fill:#9fd7ff;animation:eqBeat 1.1s ease-in-out infinite}
.h-media .b1{fill:#85c7ff;animation-delay:0s}.h-media .b2{fill:#b393ff;animation-delay:.12s}.h-media .b3{fill:#74e0d4;animation-delay:.24s}.h-media .b4{fill:#ffd36b;animation-delay:.36s}.h-media .b5{fill:#89c8ff;animation-delay:.48s}
@keyframes eqBeat{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1.18)}}

.h-news .news-stack{animation:floaty 3s ease-in-out infinite}
.h-news .news-card{stroke:rgba(255,255,255,.36);stroke-width:1.5}
.h-news .news-card.back{fill:rgba(126,200,255,.18)}
.h-news .news-card.mid{fill:rgba(183,166,255,.2)}
.h-news .news-card.top{fill:rgba(20,28,42,.88)}
.h-news .news-line{fill:#cfe5ff;animation:headline 2.3s ease-in-out infinite}
.h-news .l2{animation-delay:.14s}.h-news .l3{animation-delay:.28s}
@keyframes headline{50%{transform:translateX(6px);opacity:.6}}

.h-lutsk .castle-shell{animation:floaty 2.9s ease-in-out infinite}
.h-lutsk .castle-ground{fill:none;stroke:rgba(255,255,255,.55);stroke-width:4;stroke-linecap:round}
.h-lutsk .castle-fill{fill:rgba(124,190,255,.18)}
.h-lutsk .castle-outline,.h-lutsk .castle-tops,.h-lutsk .castle-gate{fill:none;stroke:#eef6ff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.h-lutsk .castle-gate{stroke:#ffd56a}
.h-lutsk .castle-window{fill:#ffd56a;animation:windowBlink 1.8s ease-in-out infinite}
.h-lutsk .w2{animation-delay:.25s}.h-lutsk .w3{animation-delay:.5s}
.h-lutsk .lutsk-sun{fill:url(#lutskSky);filter:drop-shadow(0 0 12px rgba(255,213,106,.55));animation:sunBob 3.6s ease-in-out infinite}
.h-lutsk .lutsk-clouds ellipse{fill:rgba(255,255,255,.85);animation:cloudSlide 5.8s ease-in-out infinite}
.h-lutsk .lutsk-clouds ellipse:last-child{animation-delay:.5s}
.h-lutsk .castle-flag{fill:none;stroke:#eaf6ff;stroke-width:3;stroke-linecap:round}
.h-lutsk .flag-cloth{fill:#b393ff;animation:flagWave 1.4s ease-in-out infinite}
@keyframes windowBlink{50%{opacity:.45;transform:scale(.95)}}
@keyframes flagWave{50%{transform:skewY(-8deg) translateX(2px);fill:#ffd56a}}
@keyframes sunBob{50%{transform:translateY(-3px) scale(1.05)}}
@keyframes cloudSlide{50%{transform:translateX(5px) translateY(-2px)}}

.h-games .pad-shell{animation:floaty 2.6s ease-in-out infinite}
.h-games .pad-body{fill:rgba(22,29,46,.92);stroke:rgba(255,255,255,.24);stroke-width:2.2}
.h-games .pad-cross{stroke:#d7eaff;stroke-width:4;stroke-linecap:round}
.h-games .pad-btn{animation:pulse-soft 1.8s ease-in-out infinite}
.h-games .pad-btn.a{fill:#8ec8ff}.h-games .pad-btn.b{fill:#b393ff}.h-games .pad-btn.c{fill:#74e0d4}.h-games .pad-btn.d{fill:#ffd36b}
.h-games .pad-btn.b{animation-delay:.15s}.h-games .pad-btn.c{animation-delay:.3s}.h-games .pad-btn.d{animation-delay:.45s}

.h-soft .code-frame{fill:rgba(14,20,34,.9);stroke:rgba(255,255,255,.22);stroke-width:2}
.h-soft .code-dot{fill:#8ec8ff}
.h-soft .code-dot:nth-of-type(2){fill:#74e0d4}.h-soft .code-dot:nth-of-type(3){fill:#ffd36b}
.h-soft .code-bracket{fill:none;stroke:#edf6ff;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;animation:bracketBlink 1.7s ease-in-out infinite}
.h-soft .code-line{fill:#8ec8ff;animation:codeShift 1.5s ease-in-out infinite}
.h-soft .c2{fill:#b393ff;animation-delay:.22s}
@keyframes codeShift{50%{transform:translateX(7px);opacity:.55}}
@keyframes bracketBlink{50%{stroke:#b393ff}}

.h-tools .gear-pack{animation:gearSpin 6s linear infinite;transform-origin:92px 43px}
.h-tools .gear-body{fill:rgba(255,213,106,.16);stroke:url(#gearGrad);stroke-width:3.2;stroke-linejoin:round}
.h-tools .gear-core{fill:rgba(18,24,36,.92);stroke:#f8fbff;stroke-width:2}
.h-tools .wrench-pack{animation:floaty 2.6s ease-in-out infinite}
.h-tools .tool-wrench,.h-tools .tool-handle{fill:none;stroke:#eef6ff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.h-tools .tool-wrench{stroke:#eef6ff}.h-tools .tool-handle{stroke:#8ec8ff}
.h-tools .tool-spark{fill:none;stroke:#ffd56a;stroke-width:3;stroke-linecap:round;animation:sparkBlink 1.6s ease-in-out infinite}
.h-tools .s2{animation-delay:.2s}.h-tools .s3{animation-delay:.4s}.h-tools .s4{animation-delay:.6s}
@keyframes gearSpin{to{transform:rotate(360deg)}}
@keyframes sparkBlink{50%{opacity:.35;transform:scale(1.2)}}

.h-comm .bubble{fill:rgba(14,20,34,.9);stroke:rgba(255,255,255,.22);stroke-width:2}
.h-comm .bubble.side{fill:rgba(142,200,255,.14)}
.h-comm .msg-dot{fill:#8ec8ff;animation:pulse-soft 1.6s ease-in-out infinite}
.h-comm .d2{animation-delay:.18s}.h-comm .d3{animation-delay:.36s}
.h-comm .signal{fill:none;stroke:#74e0d4;stroke-width:4;stroke-linecap:round;animation:signalPing 1.8s ease-in-out infinite}
@keyframes signalPing{50%{stroke:#b393ff;transform:scale(1.06)}}

.h-hobby .cards-group{animation:floaty 2.8s ease-in-out infinite}
.h-hobby .card{stroke:rgba(255,255,255,.28);stroke-width:1.5}
.h-hobby .card.c1{fill:#9ad0ff}.h-hobby .card.c2{fill:#b393ff}.h-hobby .card.c3{fill:#74e0d4}
.h-hobby .card-line{fill:none;stroke:#edf6ff;stroke-width:4;stroke-linecap:round}
.h-hobby .card-line.small{stroke:#ffd36b;stroke-width:3}

@keyframes pulse-soft{50%{transform:scale(1.15);opacity:.6}}
.no-anim .hero-mark *, .no-anim .hero-mark svg{animation:none!important;transition:none!important}

.cloud { animation:wxfloat 3.2s ease-in-out infinite; }
.drop { animation:wxfall 1s linear infinite; }
.d2 { animation-delay:.2s }
.d3 { animation-delay:.35s }
.d4 { animation-delay:.5s }
.bolt { animation:wxflash .8s ease-in-out infinite; transform-origin:130px 110px; }
.flake { animation:wxfall 2.2s linear infinite; }
@keyframes wxfloat { 50% { transform:translateY(-6px); } }
@keyframes wxfall { 0% { transform:translateY(-8px); opacity:0 } 20%{opacity:1} 100% { transform:translateY(18px); opacity:.2 } }
@keyframes wxflash { 0%,70%,100%{opacity:.2} 75%,85%{opacity:1} }
.cur{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:13px;font-weight:800;margin-right:6px;vertical-align:middle}
.cur.usd{background:#2f9e44;color:#fff}
.cur.eur{background:#2b5cff;color:#fff}
.cur.pln{background:#dc143c;color:#fff}
.cur.btc{background:#f7931a;color:#111}

/* --- Stability / accessibility fixes --- */
.btn, a.btn { text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
body.modal-open { overflow:hidden; }
body.player-open #view { padding-bottom:110px; }
.sheet { position:relative; max-height:calc(100vh - 48px); overflow:auto; }
.sheet-x { position:sticky; float:right; top:0; z-index:2; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:#0b121d; color:var(--text); font-size:24px; cursor:pointer; }
.sheet-foot { margin-top:16px; }
.tabbar,.media-toolbar,.music-search-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0 14px; }
.btn.on { background:#eef4fb; color:#111827; border-color:#eef4fb; }
.search-results,.shelf-list { margin-top:12px; }
.media-open small { display:block; color:var(--muted); font-size:.68rem; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; }
.setting-row { border:1px solid var(--line); border-radius:14px; padding:10px; background:rgba(255,255,255,.04); }
.setting-row>label { display:block; color:var(--muted); margin-bottom:5px; }
.toggle-list { display:grid; gap:8px; margin:14px 0; }
.danger { border-color:rgba(255,100,100,.5)!important; }
.music-group { border:1px solid var(--line); border-radius:14px; margin:8px 0; background:rgba(255,255,255,.035); overflow:hidden; }
.music-group summary { cursor:pointer; padding:12px 14px; display:flex; justify-content:space-between; align-items:center; font-weight:700; list-style:none; }
.music-group summary::-webkit-details-marker { display:none; }
.music-group summary::before { content:"▶"; color:#9ad0ff; margin-right:8px; font-size:.8rem; }
.music-group[open] summary::before { content:"▼"; }
.music-group summary span { flex:1; }
.music-group summary b { min-width:28px; text-align:center; border-radius:999px; background:rgba(126,200,255,.12); padding:2px 8px; font-size:.78rem; }
.music-tracks { display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:0 12px 12px; }
.music-tracks .btn { justify-content:flex-start; border-radius:12px; text-align:left; }
.music-search-row .search { flex:1; min-width:220px; }
.brand-img { width:32px; height:32px; border-radius:9px; object-fit:contain; background:#fff; padding:3px; flex:none; }
.alarm-link { white-space:nowrap; }

/* Keep globe animation independent from other pulse animations. */
.pin circle:first-child { animation:globePulse 2.2s ease-out infinite; transform-origin:156px 102px; }
@keyframes globePulse { 0%{opacity:.9;transform:scale(1)}70%{opacity:0;transform:scale(1.8)}100%{opacity:0} }

@media(max-width:820px){
  .settings-grid,.music-tracks{grid-template-columns:1fr}
  .tools{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .topbar{flex-wrap:wrap}
}
.wx-part b,.wx-part small{display:block}.wx-part small{margin-top:2px;line-height:1.15;color:var(--muted)}

/* Прогноз: состояние должно читаться словами, не только анимацией */
.wx-day{min-height:126px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px}
.wx-day.today{background:linear-gradient(180deg,rgba(93,166,231,.17),rgba(255,255,255,.055));border-color:rgba(117,197,255,.48);box-shadow:inset 0 0 0 1px rgba(117,197,255,.10)}
.wx-day-title{font-weight:800;color:#eaf5ff;line-height:1.15}
.wx-day.today .wx-day-title{color:#8fd3ff}
.wx-day .wx-mini{flex:0 0 auto;margin:4px auto 3px}
.wx-day-cond{display:block;max-width:100%;font-size:12px;line-height:1.15;color:#f3f7fb;white-space:normal}
.wx-day>b{display:block;margin-top:2px}
.wx-day-rain{display:block;margin-top:2px;color:#9fd6ff;font-size:11px;line-height:1.1}

/* Управление музыкой и фонами */
.bg-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
.bg-hide{position:absolute;top:4px;right:4px;width:24px;height:24px;border:0;border-radius:50%;background:rgba(120,28,28,.88);color:#fff;cursor:pointer;font-weight:800;line-height:24px}
.bg-hide:hover,.bg-del:hover{filter:brightness(1.16)}
.music-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 14px}
.music-select,.music-group-select{padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:#111a27;color:var(--text)}
.music-select{min-width:160px}
.music-manage-list{display:grid;gap:8px;padding:0 12px 12px}
.music-manage-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(130px,170px) auto auto;gap:8px;align-items:center}
.music-name{min-width:0;text-align:left;padding:9px 11px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.music-name.on{background:#eef4fb;color:#111827;border-color:#eef4fb}
.playlist-create,.playlist-head-actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.playlist-head-actions{padding:0 12px}
@media(max-width:820px){
  .music-manage-row{grid-template-columns:1fr}
  .music-group-select{width:100%}
  .music-toolbar{align-items:stretch}
  .music-select{width:100%}
}