/* ═══════════════════════════════════════════
           ДИЗАЙН-СИСТЕМА
           Тема: «Полуночное небо» — глубокий синий,
           кристальные акценты, научно-метеорологическая
           эстетика
        ═══════════════════════════════════════════ */
        :root {
            --c-bg:         #06111f;
            --c-bg2:        #091827;
            --c-surface:    rgba(255,255,255,0.042);
            --c-border:     rgba(130,200,255,0.11);
            --c-border-hi:  rgba(130,200,255,0.28);
            --c-ice:        #7dd3fc;
            --c-ice-dim:    #3b82a0;
            --c-sun:        #fbbf24;
            --c-rain:       #60a5fa;
            --c-text:       #e2f0ff;
            --c-soft:       #7da8c8;
            --c-muted:      #3d6480;
            --c-warm:       #fb923c;
            --c-cold:       #a5f3fc;
            --c-green:      #34d399;
            --r:            14px;
            --r-sm:         9px;
            --f-head:       'Unbounded', sans-serif;
            --f-body:       'Geologica', sans-serif;
            --shadow:       0 8px 32px rgba(0,0,0,0.45);
        }

        *,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
        html { font-size:16px; scroll-behavior:smooth }

        body {
            font-family: var(--f-body);
            background: var(--c-bg);
            color: var(--c-text);
            min-height: 100vh;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        /* Атмосферный фон */
        body::before {
            content:'';
            position: fixed; inset:0; z-index:0; pointer-events:none;
            background:
                    radial-gradient(ellipse 90% 55% at 50% -8%,  rgba(14,72,160,0.38) 0%, transparent 65%),
                    radial-gradient(ellipse 45% 40% at 88% 18%,  rgba(56,189,248,0.07) 0%, transparent 55%),
                    radial-gradient(ellipse 35% 55% at 8%  82%,  rgba(20,55,120,0.18) 0%, transparent 55%);
        }

        /* Зернистый оверлей */
        body::after {
            content:'';
            position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.35;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
        }

        .wrap { max-width:1220px; margin:0 auto; padding:0 18px; position:relative; z-index:1 }

        /* ── HEADER ── */
        header {
            position:sticky; top:0; z-index:200;
            background: rgba(6,17,31,0.88);
            backdrop-filter: blur(22px) saturate(1.5);
            -webkit-backdrop-filter: blur(22px) saturate(1.5);
            border-bottom: 1px solid var(--c-border);
        }
        .hdr { display:flex; align-items:center; gap:14px; padding:12px 0; }

        .logo { display:flex; align-items:center; gap:9px; text-decoration:none; flex-shrink:0 }
        .logo-ico { font-size:24px; filter:drop-shadow(0 0 10px rgba(125,211,252,0.55)) }
        .logo-txt { font-family:var(--f-head); font-size:13px; font-weight:700; color:var(--c-text); letter-spacing:-.02em; line-height:1.15 }
        .logo-txt span { color:var(--c-ice); font-weight:300 }

        /* Поиск */
        .search-wrap { flex:1; max-width:500px; position:relative }
        .search-wrap input {
            width:100%; background:rgba(255,255,255,0.055); border:1px solid var(--c-border);
            border-radius:50px; padding:10px 18px 10px 42px;
            color:var(--c-text); font-family:var(--f-body); font-size:14px; outline:none;
            transition:border-color .2s, background .2s;
        }
        .search-wrap input::placeholder { color:var(--c-muted) }
        .search-wrap input:focus { border-color:var(--c-rain); background:rgba(255,255,255,0.08) }
        .search-ico {
            position:absolute; left:14px; top:50%; transform:translateY(-50%);
            width:16px; height:16px; stroke:var(--c-muted); pointer-events:none;
            transition:stroke .2s;
        }
        .search-wrap input:focus ~ .search-ico { stroke:var(--c-ice) }
        .search-clear {
            position:absolute; right:14px; top:50%; transform:translateY(-50%);
            background:none; border:none; color:var(--c-muted); cursor:pointer;
            font-size:18px; line-height:1; display:none; padding:0;
        }
        .search-clear:hover { color:var(--c-text) }

        /* Dropdown результатов поиска */
        .search-results {
            position:absolute; top:calc(100% + 6px); left:0; right:0;
            background:rgba(8,22,40,0.97); border:1px solid var(--c-border-hi);
            border-radius:var(--r); overflow:hidden; z-index:300;
            box-shadow: var(--shadow);
            display:none;
        }
        .search-results.open { display:block }
        .sr-item {
            display:flex; justify-content:space-between; align-items:center;
            padding:12px 18px; cursor:pointer; border-bottom:1px solid var(--c-border);
            transition:background .15s;
        }
        .sr-item:last-child { border:none }
        .sr-item:hover, .sr-item.selected { background:rgba(125,211,252,0.08) }
        .sr-city { font-size:15px; font-weight:500 }
        .sr-sub { font-size:12px; color:var(--c-muted); margin-top:2px }
        .sr-country { font-size:12px; color:var(--c-ice); opacity:.7 }

        nav { display:flex; gap:4px; margin-left:auto; flex-shrink:0 }
        .nav-a {
            font-size:13px; color:var(--c-soft); text-decoration:none;
            padding:7px 14px; border-radius:50px; white-space:nowrap;
            transition:color .2s, background .2s;
        }
        .nav-a:hover { color:var(--c-text); background:var(--c-surface) }

        /* ── BREADCRUMBS ── */
        .breadcrumbs {
            padding:12px 0 0; font-size:12px; color:var(--c-muted);
            display:flex; align-items:center; gap:6px; flex-wrap:wrap;
        }
        .breadcrumbs a { color:var(--c-soft); text-decoration:none }
        .breadcrumbs a:hover { color:var(--c-ice) }

        /* ── СКЕЛЕТОН / ЛОАДЕР ── */
        .loader-screen {
            display:flex; flex-direction:column; align-items:center;
            justify-content:center; min-height:60vh; gap:20px;
            animation: fadeIn .3s ease;
        }
        .loader-ring {
            width:52px; height:52px; border-radius:50%;
            border:3px solid var(--c-border);
            border-top-color:var(--c-ice);
            animation:spin 1s linear infinite;
        }
        .loader-txt { font-size:14px; color:var(--c-soft) }
        @keyframes spin { to { transform:rotate(360deg) } }

        /* ── HERO ── */
        #weather-content { animation:fadeUp .55s ease }
        @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
        @keyframes fadeIn { from{opacity:0} to{opacity:1} }

        .hero { padding:32px 0 24px }

        .city-meta {
            display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap;
            font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-soft);
        }
        .city-meta-dot { width:6px; height:6px; border-radius:50%; background:var(--c-green); box-shadow:0 0 6px var(--c-green) }
        .hero-updated { font-size:11px; color:var(--c-muted) }

        .hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start }

        /* Главная карточка */
        .card {
            background:var(--c-surface); border:1px solid var(--c-border);
            border-radius:var(--r); padding:28px 32px;
            position:relative; overflow:hidden;
        }
        .card-glow {
            position:absolute; top:-40%; right:-8%; width:260px; height:260px;
            background:radial-gradient(circle,rgba(125,211,252,0.09),transparent 70%);
            pointer-events:none;
        }

        .main-card { padding:30px 34px }

        .temp-row { display:flex; align-items:flex-start; gap:12px; margin:18px 0 6px }
        .temp-num {
            font-family:var(--f-head); font-size:clamp(70px,9vw,108px);
            font-weight:700; line-height:1; color:var(--c-text);
            text-shadow:0 0 50px rgba(125,211,252,0.28);
        }
        .temp-unit { font-size:28px; color:var(--c-soft); margin-top:10px }
        .weather-icon-lg {
            font-size:72px; margin-top:4px;
            filter:drop-shadow(0 0 18px rgba(251,191,36,0.35));
            animation:float 5s ease-in-out infinite;
        }
        @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

        .weather-desc { font-size:17px; color:#c5dff5; font-weight:500; margin-bottom:4px }
        .feels-like   { font-size:13px; color:var(--c-muted) }

        .params-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:24px }
        .param {
            background:rgba(255,255,255,0.032); border:1px solid var(--c-border);
            border-radius:var(--r-sm); padding:13px 16px;
        }
        .param-label { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--c-muted); margin-bottom:3px }
        .param-value { font-size:19px; font-weight:500 }
        .param-value small { font-size:12px; color:var(--c-soft) }

        /* Боковые карточки */
        .side-cards { display:flex; flex-direction:column; gap:14px }

        .card-sm { padding:22px 24px }

        .sec-label {
            font-size:10px; text-transform:uppercase; letter-spacing:.12em;
            color:var(--c-muted); margin-bottom:14px;
        }

        /* Gauge */
        .gauge-row { display:flex; align-items:center; gap:14px; margin-bottom:14px }
        .gauge-row:last-child { margin-bottom:0 }
        .gauge-meta { flex:1 }
        .gauge-name  { font-size:13px; color:var(--c-soft); margin-bottom:5px }
        .gauge-bar   { height:5px; background:rgba(255,255,255,0.07); border-radius:3px; overflow:hidden }
        .gauge-fill  { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--c-rain),var(--c-ice)); transition:width .9s ease }
        .gauge-val   { font-size:14px; font-weight:500; min-width:44px; text-align:right }

        /* Солнце */
        .sun-row { display:flex; justify-content:space-between; align-items:center }
        .sun-pt  { text-align:center }
        .sun-pt-lbl { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--c-muted) }
        .sun-pt-val { font-size:20px; font-weight:500; margin-top:3px }
        .sun-arc-wrap { flex:1; margin:0 14px; position:relative; height:46px }
        .sun-arc-wrap svg { width:100%; height:100%; overflow:visible }
        .daylen { text-align:center; margin-top:8px; font-size:12px; color:var(--c-muted) }
        .daylen strong { color:var(--c-soft) }

        /* ── СЕКЦИИ ── */
        .section { margin:24px 0 }
        .section-title {
            font-family:var(--f-head); font-size:15px; font-weight:700;
            letter-spacing:-.01em; margin-bottom:14px;
            display:flex; align-items:center; gap:10px;
        }
        .section-title::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--c-border),transparent) }

        /* ── РЕКЛАМНЫЕ БЛОКИ ── */
        .ad-slot {
            display:flex; justify-content:center; align-items:center;
            width:100%; overflow:hidden; position:relative;
        }
        .ad-slot::before {
            content:'Реклама';
            position:absolute; top:5px; right:10px;
            font-size:9px; letter-spacing:.12em; text-transform:uppercase;
            color:var(--c-muted); opacity:0.45; pointer-events:none;
            z-index:1;
        }
        /* Leaderboard — горизонтальный баннер между секциями */
        .ad-slot-leaderboard {
            min-height:96px; margin:8px 0;
            background:rgba(255,255,255,0.016);
            border-top:1px solid var(--c-border);
            border-bottom:1px solid var(--c-border);
            padding:12px 0;
        }
        /* Rectangle — прямоугольник 300×250, центрированный */
        .ad-slot-rectangle {
            min-height:260px; margin:8px auto;
            max-width:336px;
            background:rgba(255,255,255,0.02);
            border:1px solid var(--c-border);
            border-radius:var(--r);
        }
        /* Если рекламная сеть ещё не загрузила рекламу — скрываем обёртку */
        .ad-slot-leaderboard:not(:has(> *)),
        .ad-slot-rectangle:not(:has(> *)) { display:none }
        @media(max-width:768px) {
            .ad-slot-leaderboard { min-height:60px; padding:8px 0 }
            .ad-slot-rectangle   { max-width:100%; min-height:260px }
        }

        /* ── ПОЧАСОВОЙ ПРОГНОЗ ── */
        .hourly-scroll {
            overflow-x:auto; padding-bottom:6px;
            scrollbar-width:thin; scrollbar-color:rgba(125,211,252,0.15) transparent;
        }
        .hourly-track { display:flex; gap:8px; width:max-content }

        .h-card {
            background:var(--c-surface); border:1px solid var(--c-border);
            border-radius:var(--r-sm); padding:14px 12px;
            text-align:center; min-width:70px; cursor:default;
            transition:background .2s,border-color .2s,transform .2s;
        }
        .h-card:hover { background:rgba(255,255,255,0.065); border-color:var(--c-border-hi); transform:translateY(-3px) }
        .h-card.now { background:rgba(125,211,252,0.1); border-color:rgba(125,211,252,0.32) }
        .h-time { font-size:11px; color:var(--c-muted); margin-bottom:7px }
        .h-ico  { font-size:22px; margin-bottom:7px }
        .h-temp { font-size:16px; font-weight:500 }
        .h-prec { font-size:11px; color:var(--c-rain); margin-top:3px }

        /* ── 7 ДНЕЙ ── */
        .forecast-list { display:flex; flex-direction:column; gap:6px }

        .f-day {
            background:var(--c-surface); border:1px solid var(--c-border);
            border-radius:var(--r-sm); padding:14px 22px;
            display:grid; grid-template-columns:130px 34px 1fr auto;
            align-items:center; gap:18px;
            transition:background .2s,border-color .2s,transform .15s;
        }
        .f-day:hover { background:rgba(255,255,255,0.058); border-color:var(--c-border-hi); transform:translateX(4px) }
        .f-day.today { border-color:rgba(125,211,252,0.28) }
        .f-name { font-size:14px; font-weight:500 }
        .f-name small { display:block; font-size:11px; color:var(--c-muted); font-weight:400; margin-top:1px }
        .f-ico  { font-size:26px; text-align:center }
        .f-desc { font-size:12px; color:var(--c-soft) }
        .f-prec { font-size:11px; color:var(--c-rain); margin-top:3px }

        .f-temps { display:flex; align-items:center; gap:10px; text-align:right }
        .f-max { font-size:17px; font-weight:600 }
        .f-min { font-size:14px; color:var(--c-muted) }

        .temp-bar-wrap { flex:1; margin:0 6px }
        .temp-bar-bg { height:4px; background:rgba(255,255,255,0.07); border-radius:2px; position:relative }
        .temp-bar-fill {
            position:absolute; height:100%; border-radius:2px;
            background:linear-gradient(90deg,var(--c-cold),var(--c-sun));
        }

        /* ── SEO ТЕКСТ ── */
        .seo-block {
            background:var(--c-surface); border:1px solid var(--c-border);
            border-radius:var(--r); padding:32px 36px; margin:32px 0;
        }
        .seo-block h2 {
            font-family:var(--f-head); font-size:19px; font-weight:700;
            letter-spacing:-.02em; margin-bottom:14px;
        }
        .seo-block h3 { font-size:15px; font-weight:500; color:var(--c-ice); margin:20px 0 8px }
        .seo-block p  { font-size:14px; line-height:1.8; color:var(--c-soft); margin-bottom:10px }
        .seo-block a  { color:var(--c-rain) }

        /* ── ГОРОДА ── */
        .cities-grid {
            display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:8px;
        }
        .city-a {
            background:var(--c-surface); border:1px solid var(--c-border);
            border-radius:var(--r-sm); padding:12px 16px; text-decoration:none;
            display:flex; flex-direction:column; gap:4px;
            transition:background .2s,border-color .2s,transform .2s;
        }
        .city-a:hover { background:rgba(255,255,255,0.065); border-color:var(--c-border-hi); transform:translateY(-2px) }
        .city-a-top  { display:flex; justify-content:space-between; align-items:baseline }
        .city-a-name { font-size:13px; color:var(--c-text) }
        .city-a-temp { font-size:15px; font-weight:600 }
        .city-a-dist { font-size:11px; color:var(--c-muted) }

        /* ── FOOTER ── */
        footer {
            border-top:1px solid var(--c-border); margin-top:56px;
            padding:36px 0; color:var(--c-muted); font-size:13px;
        }
        .footer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-bottom:28px }
        .footer-col h4 {
            font-family:var(--f-head); font-size:10px; font-weight:700;
            letter-spacing:.1em; text-transform:uppercase;
            color:var(--c-soft); margin-bottom:12px;
        }
        .footer-col ul { list-style:none }
        .footer-col ul li { margin-bottom:7px }
        .footer-col ul li a { color:var(--c-muted); text-decoration:none; transition:color .2s }
        .footer-col ul li a:hover { color:var(--c-text) }
        .footer-bottom {
            border-top:1px solid var(--c-border); padding-top:20px;
            display:flex; justify-content:space-between; align-items:center;
        }
        .live-dot {
            display:inline-block; width:6px; height:6px; border-radius:50%;
            background:var(--c-green); box-shadow:0 0 6px var(--c-green);
            margin-right:6px; animation:pulse 2s infinite;
        }
        @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

        /* ── TOAST ── */
        #toast {
            position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px);
            background:rgba(8,28,52,0.96); border:1px solid var(--c-border-hi);
            color:var(--c-text); font-size:14px; padding:12px 24px;
            border-radius:50px; z-index:999; transition:transform .35s ease;
            white-space:nowrap; box-shadow:var(--shadow);
        }
        #toast.show { transform:translateX(-50%) translateY(0) }

        /* ── АДАПТИВ ── */
        @media (max-width:960px) {
            .hero-grid { grid-template-columns:1fr }
            .footer-grid { grid-template-columns:repeat(2,1fr) }
            nav { display:none }
        }
        @media (max-width:640px) {
            .main-card { padding:22px }
            .temp-num  { font-size:76px }
            .f-day     { grid-template-columns:90px 28px 1fr auto; padding:12px 14px; gap:12px }
            .f-desc    { display:none }
            .footer-grid { grid-template-columns:1fr }
            .seo-block { padding:22px }
            .wrap { padding:0 14px }
        }

        .sr-only {
            position:absolute; width:1px; height:1px;
            padding:0; margin:-1px; overflow:hidden;
            clip:rect(0,0,0,0); border:0;
        }
        /* ── МЕСТНОЕ ВРЕМЯ / ПОДЕЛИТЬСЯ ── */
        .city-localtime {
            font-size:12px; color:var(--c-muted); margin-left:4px;
        }
        .share-btn {
            appearance:none; -webkit-appearance:none;
            font-family:var(--f-body); font-size:11px;
            display:inline-flex; align-items:center; gap:4px;
            background:rgba(125,211,252,0.08);
            border:1px solid rgba(125,211,252,0.25);
            color:var(--c-ice);
            border-radius:20px; padding:3px 12px;
            cursor:pointer; transition:all .2s;
            white-space:nowrap; text-transform:none; letter-spacing:0;
            margin-left:auto; flex-shrink:0;
        }
        .share-btn:hover {
            background:rgba(125,211,252,0.16);
            border-color:rgba(125,211,252,0.5);
        }
        @media (max-width:480px) {
            .hero-updated, .city-localtime { display:none }
            .share-btn { margin-left:0; font-size:10px; padding:2px 10px }
        }
        .sr-hint {
            padding:5px 14px; font-size:11px; color:var(--c-muted);
            border-bottom:1px solid var(--c-border);
        }
        .sr-hint em { color:var(--c-ice); font-style:normal; font-weight:600 }
        .share-row {
            min-height:20px; margin-top:4px; margin-bottom:8px;
        }
        .share-url {
            font-size:12px; color:var(--c-ice); font-family:monospace;
            background:rgba(125,211,252,0.07); border-radius:6px;
            padding:3px 10px; opacity:0; transition:opacity .3s;
            display:inline-block;
            overflow:hidden; text-overflow:ellipsis; max-width:min(320px,calc(100vw - 32px)); white-space:nowrap;
        }
        .share-url.visible { opacity:1 }

        /* ── КАРТЫ ── */
        .maps-tabs {
            display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;
        }
        .map-tab {
            appearance:none; -webkit-appearance:none;
            font-family:var(--f-body); font-size:13px;
            background:var(--c-surface); border:1px solid var(--c-border);
            color:var(--c-soft); border-radius:20px; padding:6px 16px;
            cursor:pointer; transition:all .2s; letter-spacing:0; text-transform:none;
        }
        .map-tab:hover { border-color:var(--c-border-hi); color:var(--c-text) }
        .map-tab.active { background:rgba(125,211,252,0.12); border-color:var(--c-ice); color:var(--c-ice) }
        .map-wrap {
            border-radius:var(--r); overflow:hidden;
            border:1px solid var(--c-border); position:relative;
            height:400px;
        }
        #weather-map { height:100%; width:100%; }
        #windy-frame  { height:100%; width:100%; border:0; }
        @media(max-width:600px){ .map-wrap { height:270px } }

        /* Легенда */
        .map-legend {
            position:absolute; bottom:12px; left:12px; z-index:1000;
            background:rgba(6,17,31,0.88); backdrop-filter:blur(8px);
            border:1px solid var(--c-border); border-radius:10px;
            padding:10px 14px; min-width:180px; pointer-events:none;
        }
        .legend-title {
            font-size:10px; text-transform:uppercase; letter-spacing:.08em;
            color:var(--c-soft); margin-bottom:7px; font-weight:600;
        }
        .legend-bar {
            height:12px; border-radius:6px; width:100%; margin-bottom:5px;
        }
        .legend-labels {
            display:flex; justify-content:space-between;
            font-size:10px; color:var(--c-muted);
        }
        .legend-rows { display:flex; flex-direction:column; gap:5px }
        .legend-row  { display:flex; align-items:center; gap:7px; font-size:11px; color:var(--c-text) }
        .legend-dot  { width:12px; height:12px; border-radius:50%; flex-shrink:0 }
        .legend-windy {
            font-size:11px; color:var(--c-soft); line-height:1.5;
        }
        .legend-windy strong { color:var(--c-text); display:block; margin-bottom:4px; font-size:10px; text-transform:uppercase; letter-spacing:.08em }

        /* ═══════════════════════════════════════════
           COOKIE CONSENT BANNER (GDPR / EEA)
        ═══════════════════════════════════════════ */
        #cookie-banner {
            position: fixed;
            bottom: 0; left: 0; right: 0;
            z-index: 99999;
            background: rgba(6, 17, 31, 0.97);
            border-top: 1px solid rgba(130,200,255,0.18);
            backdrop-filter: blur(12px);
            padding: 16px 20px;
            display: none;
            animation: cookieBannerSlide 0.35s ease;
        }
        @keyframes cookieBannerSlide {
            from { transform: translateY(100%); opacity: 0; }
            to   { transform: translateY(0);    opacity: 1; }
        }
        #cookie-banner .cb-inner {
            max-width: 960px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
        }
        #cookie-banner .cb-text {
            flex: 1 1 300px;
            font-size: 13px;
            line-height: 1.55;
            color: var(--c-soft);
        }
        #cookie-banner .cb-text strong { color: var(--c-text); }
        #cookie-banner .cb-text a {
            color: var(--c-ice);
            text-decoration: underline;
            text-underline-offset: 3px;
        }
        #cookie-banner .cb-buttons {
            display: flex;
            gap: 10px;
            flex-shrink: 0;
        }
        #cookie-banner .cb-btn {
            padding: 9px 20px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: opacity 0.2s, transform 0.15s;
            font-family: var(--f-body);
        }
        #cookie-banner .cb-btn:hover  { opacity: 0.85; transform: translateY(-1px); }
        #cookie-banner .cb-btn:active { transform: translateY(0); }
        #cookie-banner .cb-accept {
            background: var(--c-ice);
            color: #06111f;
        }
        #cookie-banner .cb-decline {
            background: rgba(130,200,255,0.1);
            color: var(--c-soft);
            border: 1px solid rgba(130,200,255,0.2);
        }


        /* ══════════════════════════════════════════════════
           SEO-БЛОК: CSS-классы вместо inline-стилей
        ══════════════════════════════════════════════════ */

        /* H1 на SEO-страницах */
        .page-h1 {
            font-family: var(--f-head);
            font-size: clamp(22px,4vw,34px);
            font-weight: 700;
            letter-spacing: -.02em;
            margin: 20px 0 6px;
            color: var(--c-text);
        }

        /* Вводный текст под h1 */
        .seo-intro-text {
            font-size: 14px;
            color: var(--c-soft);
            margin-bottom: 18px;
        }

        /* Сетка текущих параметров (SEO-блок) */
        .seo-cur-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 10px;
            margin-bottom: 22px;
        }

        /* Компактная карточка параметра */
        .card-params { padding: 16px 20px }

        /* Крупное значение параметра */
        .param-big-val { font-size: 26px }

        /* Подсказка под параметром */
        .param-hint { font-size: 12px; color: var(--c-muted); margin-top: 3px }

        /* Уменьшенный отступ seo-block */
        .seo-block-mb { margin: 0 0 18px }
        .seo-block-mb22 { margin: 0 0 22px }

        /* SEO-заголовок h2 (не section-title) */
        .seo-h2 {
            font-family: var(--f-head);
            font-size: 18px;
            font-weight: 700;
            margin: 0 0 12px;
            color: var(--c-text);
        }

        /* Обёртка прокручиваемой таблицы */
        .tbl-scroll { overflow-x: auto; margin-bottom: 24px }
        .tbl-scroll-sm { overflow-x: auto; margin: 10px 0 18px }

        /* Основная прогнозная таблица */
        .seo-table { width: 100%; border-collapse: collapse; font-size: 14px }
        .seo-table thead tr { border-bottom: 2px solid var(--c-border) }
        .seo-table th {
            padding: 10px 14px;
            color: var(--c-soft);
            font-weight: 500;
        }
        .seo-table th:first-child { text-align: left }
        .seo-table th:not(:first-child):not(:nth-child(2)) { text-align: center }
        .seo-table td { padding: 11px 14px }
        .seo-table td:not(:first-child):not(:nth-child(2)) { text-align: center }
        .seo-table .td-muted { color: var(--c-muted) }
        .seo-table .td-rain  { color: var(--c-rain) }
        .seo-table .td-soft  { color: var(--c-soft) }
        .seo-table tbody tr { border-bottom: 1px solid var(--c-border) }
        .seo-table .row-today { background: rgba(125,211,252,0.05) }
        .seo-table .fw-600 { font-weight: 600 }
        .seo-table .fs-11 { font-size: 11px; color: var(--c-muted) }

        /* Климатическая таблица (месяцы) */
        .seo-table-sm { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 540px }
        .seo-table-sm thead tr { border-bottom: 1px solid var(--c-border) }
        .seo-table-sm th {
            text-align: center; padding: 7px 6px;
            color: var(--c-soft); font-weight: 500; font-size: 11px;
        }
        .seo-table-sm td { text-align: center; padding: 8px 6px; font-weight: 600 }

        /* Цвета температур */
        .t-hot   { color: #fbbf24 }
        .t-warm  { color: #a3e635 }
        .t-cool  { color: #60a5fa }
        .t-cold  { color: #818cf8 }
        .t-pos   { color: #fbbf24 }
        .t-neg   { color: #60a5fa }

        /* Заголовок h3 с отступом сверху */
        .h3-mt { margin-top: 22px }

        /* Блок сезона */
        .season-card {
            margin-bottom: 12px;
            padding: 14px 18px;
            background: rgba(255,255,255,0.028);
            border-left: 3px solid var(--c-border-hi);
            border-radius: 0 var(--r-sm) var(--r-sm) 0;
        }
        .season-card-title {
            font-size: 13px; font-weight: 600;
            color: var(--c-ice); margin-bottom: 5px;
        }
        .season-card-text {
            font-size: 13px; color: var(--c-soft); line-height: 1.7;
        }

        /* Сетка рекордов */
        .records-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
            gap: 12px; margin-top: 14px;
        }

        /* Карточки рекордов */
        .record-card {
            border-radius: var(--r-sm);
            padding: 16px 20px;
        }
        .record-card-hot  { background: rgba(239,68,68,0.08);   border: 1px solid rgba(239,68,68,0.25) }
        .record-card-cold { background: rgba(129,140,248,0.08); border: 1px solid rgba(129,140,248,0.25) }
        .record-card-rain { background: rgba(96,165,250,0.08);  border: 1px solid rgba(96,165,250,0.25) }
        .record-card-snow { background: rgba(125,211,252,0.08); border: 1px solid rgba(125,211,252,0.25) }

        .record-lbl {
            font-size: 10px; text-transform: uppercase;
            letter-spacing: .1em; margin-bottom: 6px;
        }
        .record-lbl-hot  { color: rgba(239,68,68,0.7) }
        .record-lbl-cold { color: rgba(129,140,248,0.7) }
        .record-lbl-rain { color: rgba(96,165,250,0.7) }
        .record-lbl-snow { color: rgba(125,211,252,0.7) }

        .record-val { font-size: 26px; font-weight: 700 }
        .record-val-hot  { color: #ef4444 }
        .record-val-cold { color: #818cf8 }
        .record-val-rain { color: #60a5fa }
        .record-val-snow { color: #7dd3fc }

        .record-year { font-size: 12px; color: var(--c-muted); margin-top: 4px }

        /* Ссылка ближайших городов */
        .seo-nearby-h2 {
            font-family: var(--f-head); font-size: 16px; font-weight: 700;
            margin: 0 0 12px; color: var(--c-text);
        }
        .seo-nearby-nav { margin-bottom: 24px }

        /* Windy-iframe полноразмерный */
        .windy-frame {
            width: 100%; height: 100%; border: 0;
            position: absolute; top: 0; left: 0;
        }

        /* Начальное скрытие динамического контента */
        .is-hidden { display: none }

        /* Нулевой margin для рекламного блока у footer */
        .m-0 { margin: 0 }

        /* Yandex Metrika noscript img */
        .ym-pixel { position: absolute; left: -9999px }

        /* Кешированные gauge-fill начинаются с нуля */
        .gauge-fill { width: 0 }

        /* Additional utility classes */
        .hourly-scroll-wrap { display: flex; justify-content: center; margin: 8px 0 }
        .text-right { text-align: right }
        .footer-ext-link { color: var(--c-ice); text-decoration: none }
        .td-center { text-align: center; padding: 11px 14px }
        .fw-600 { font-weight: 600 }
        .fs-11 { font-size: 11px; color: var(--c-muted) }