/**
 * MeteoZoom.com     - Premium Weather App Styles
 * Version: 35.0.0
 * 35.0.0: bez zmian wizualnych (bump wersji dla cache-bust — para z app.js,
 * index.php, template.html i sw.js 35.0.0; gwarancja „nigdy Brak danych”).
 * 31.0.0: bez zmian wizualnych (bump wersji dla cache-bust).
 * 30.1.0: bez zmian wizualnych (bump wersji dla cache-bust; poprawka dotyczy
 * odczytu zachmurzenia z satelity w app.js / index.php).
 * 30.0.2: bez zmian wizualnych (bump wersji dla cache-bust; poprawki dotycza
 * historii opadow w app.js / index.php).
 * 30.0.1: ramka mapy radarowej 601px (desktop + mobile, min-height 601px
 * w pelnym ekranie); reszta bez zmian.
 * 30.0.0: MAPA RADAROWA w sekcji Prognozy opadow — karta #imwRadarCard,
 * pasek warstw #imwRadarTabs (te same reguly przeciagania co #mapTabs),
 * ramka .ww-imw-frame-wrap oraz narzedzia sekcji (.ww-map-tools) i
 * fallback pelnego ekranu (.ww-section-fullscreen).
 * Changelog 28.5.0: towarzysz 28.5.0 (opisy typów chmur bez nazw rodzajów,
 * i18n 62 języki, stabilność ikony) — CSS bez zmian, bump wersji do
 * cache-bust — ?v=28.5.0 / SW v28.5.0
 * Changelog 28.0.3: FRESH ON ENTRY — po wejściu bieżąca minuta (spinner na hero/karcie Teraz/kartach minutowych/oba wykresy do pierwszego świeżego odczytu; CSS bez zmian, bump wersji) — ?v=28.0.3 / SW v28.0.3
 * Changelog 28.0.3: FIX LIBREWXR — twardy refresh i wykres (hard omija 45s/75s/120s/200s) — ?v=28.0.3 / SW v28.0.3
 * Changelog 26.0.7: FIX LIBREWXR — skuteczność po wpisaniu miejscowości (3 próby meta, 5000ms kafelki, 6000ms field, retry) — ?v=28.0.3 / SW v28.0.3
 * Changelog 26.0.6: DAILY ACCORDION — zamrożone karty 5-dniowe (delegacja) — ?v=28.0.30.6 / SW v28.0.30.6
 * Changelog 26.0.5: HISTORIA OPADÓW — suche ledger pozostaje suche (guard liveStamp 0.05→0.10) — ?v=28.0.30.5 / SW v28.0.30.5
 * Changelog 26.0.4: OSTRÓDA fix — Bezchmurnie→umiarkowane — ?v=28.0.30.4 / SW v28.0.30.4
 * Changelog 26.0.3: RESTORE 26.0.1 — rollback 26.0.2 — ?v=28.0.30.3 / SW v28.0.30.3
 * Changelog 26.0.1: SYNC fix — offset 20→60 + clamp 0→10 (hero↔wykres) — ?v=28.0.30.1 / SW v28.0.30.1 (dekoder jak 26.0.0)
 * Changelog 26.0.0: BIAŁYSTOK fix — bump cache-bust ?v=28.0.30.0 / SW v28.0.30.0 (PHP define() + IR-only fallback, dekoder IR bez zmian jak 25.0.4)
 * Changelog 25.0.4: ELIPSA METAR 30km + wiatr 850/700 + cache 100k — cache v25.0.4
 * Changelog 25.0.3: AI SEKUNDOWE — 1s wejście już uczy — ?v=25.0.3 / SW v25.0.3
 * Changelog 25.0.1: AI OFFLINE-LEARNING — 30d, shared PHP, tydzień/miesiąc — ?v=25.0.3 / SW v25.0.1
 * Changelog 25.0.0: AI BROWSER-ONLY — bez limitów/kluczy, tylko PHP,
 * trenuje WYŁĄCZNIE LibreWXR (IR+radar) — korekta chmur/opadów w
 * przeglądarce (tiny MLP) — ?v=25.0.3 / SW v25.0.0 (index→php).
 * Changelog 24.9.5: FIX BARRIERA TERAZ (app.js 24.9.5: usunięty
 * sztuczny skok zachmurzenia na granicy Teraz) — bump jako cache-bust
 * ?v=24.9.5 / SW v24.9.5 (index.html→index.php).
 * Changelog 24.9.3: bez zmian reguł CSS — bump jako cache-bust
 * ?v=24.9.3 / SW v24.9.3 (app.js 24.9.3: proximity sync fix).
 * Changelog 24.9.2: bez zmian reguł CSS — bump jako cache-bust
 * ?v=24.9.2 / SW v24.9.2 (app.js 24.9.2: ring sampling,
 * gradient detection, directional probe, proximity boost).
 * Changelog 24.9.1: bez zmian reguł CSS — bump jako cache-bust
 * ?v=24.9.1 / SW v24.9.1.
 * Changelog 24.8.2: bez zmian reguł CSS (reguła (c) clutteru
 * i wypełnianie pustego wykresu zachmurzenia siedzą
 * w app.js 24.8.2); bump wyłącznie jako cache-bust
 * ?v=24.8.2 / SW v24.8.2.
 * Changelog 24.8.1: bez zmian reguł CSS (płynna oś minutowa —
 * interpolacja historii + ciągła krzywa przyszłości — siedzi
 * w app.js 24.8.1); bump wyłącznie jako cache-bust ?v=24.8.1 /
 * SW v24.8.1.
 * Changelog 24.8.0: bez zmian reguł CSS (naprawa odczytu kafelków
 * radaru/IR — canvas okna 25x25 -> 49x49, radar 3x3 + klucze cache —
 * siedzi w app.js 24.8.0); bump wyłącznie jako cache-bust ?v=24.8.0 /
 * SW v24.8.0.
 * Changelog 24.7.9: bez zmian reguł CSS (temperatura Dziś w Poradniku
 * i szybka historia opadów siedzą w app.js 24.7.9); bump wyłącznie
 * jako cache-bust ?v=24.7.9 / SW v24.7.9.
 * Changelog 24.7.8: bez zmian reguł CSS (koło 3 km + historia opadów
 * siedzą w app.js 24.7.8); bump wyłącznie jako cache-bust ?v=24.7.8 /
 * SW v24.7.8. index.html -> index.php (nazwa pliku startowego).
 * Changelog 24.7.7: bez zmian reguł CSS (pasek wzdłuż drogi siedzi w
 * app.js 24.7.7); bump wyłącznie jako cache-bust ?v=24.7.7 / SW v24.7.7.
 * Changelog 24.7.6: bez zmian reguł CSS (odczyt koła 2 km siedzi w
 * app.js 24.7.6); bump wyłącznie jako cache-bust ?v=24.7.6 / SW v24.7.6.
 * Changelog 24.7.5: bez zmian regł CSS (odczyt lokalny „TERAZ” +
 * krzywa +d/v + pole 5x5 najnowszej klatki siedzą w app.js 24.7.5);
 * bump wyłącznie jako cache-bust ?v=24.7.5 / SW v24.7.5.
 * Changelog 24.7.4: bez zmian reguł CSS (semantyka kresek — historia =
 * nagrane odczyty „Teraz" + klatki IR przy pierwszym załadowaniu —
 * siedzi w app.js 24.7.4); bump wyłącznie jako cache-bust ?v=24.7.4 /
 * SW v24.7.4.
 * Changelog 24.7.3: bez zmian reguł CSS (historia z interpolacji
 * klatek IR + „teraz” dryfujące z wiekiem klatki siedzą w app.js);
 * bump wersji wyłącznie jako cache-bust ?v=24.7.3 / SW v24.7.3.
 * Changelog 24.7.2: bez zmian reguł CSS (okno 49x49 + „teraz”=dekoder
 * okna + cap 85 + historia SSR siedzą w app.js/index.php 24.7.2);
 * bump wersji wyłącznie jako cache-bust ?v=24.7.2 / SW v24.7.2.
 * Changelog 24.7.1: bez zmian reguł CSS (revizja dekodera siedzi w
 * app.js/index.php 24.7.1); bump wersji wyłącznie jako cache-bust
 * ?v=24.7.1 / SW v24.7.1.
 * Changelog 24.7.0: bez zmian reguł CSS (dekoder — frakcja dwumodalna +
 * progi soft/rdzeń + wektor ruchu + historia — siedzą w
 * app.js/index.php 24.7.0); bump wersji wyłącznie jako cache-bust
 * ?v=24.7.0 / SW v24.7.0.
 * Changelog 24.5.2: bez zmian reguł CSS (przebudowa dekodera satelity
 * i historii zachmurzenia siedzi w app.js/index.php 24.5.2); bump
 * wersji wyłącznie jako cache-bust ?v=24.5.2 / SW v24.5.2.
 * Changelog 24.5.1: .hourly-card .hourly-icon .ww-mini-spin — spinner w
 * gnieździe ikony karty minutowej w rozmiarze ikony SVG (26 px), żeby rząd
 * kart nie zmieniał wysokości, gdy pierwszy pomiar zamienia go na ikonę.
 *
 * Changelog 24.5.0: .ww-mini-spin — kręcące się kółko w gnieździe ikony
 * (karty minutowe, nagłówek wykresu) dla stanu OCZEKIWANIA na pierwszy
 * odczyt LibreWxR; .hourly-card.is-awaiting chowa podpis „Brak danych".
 * Bez zmian układu i bez zmian istniejących reguł.
 * Changelog 24.0.2: czytelne szacunki chmur, procentowa wysokość bez
 * sztucznego minimum; karty minutowe z intensywnością opadu mm/h.
 * Changelog 24.0.1: .nowcast-refresh — przycisk "Odśwież" w nagłówku
 * sekcji Opady / Zachmurzenie (kapselka jak .map-tab, wlasna klasa zeby
 * nie kolidowac z przeciąganiem zakladek .nowcast-tab); spin ikony w stanie
 * zajecia, spin wylaczany przy reduced-motion, wariant .light-mode.
 * Changelog 24.0.0: bez zmian wizualnych (bump wersji dla cache — nowe
 * progi i opisy zachmurzenia sa w app.js/index.php/lang.php).
 * Changelog 19.5.1: zakladki nowcastu dziedzicza wyglad .map-tab (zolty
 * active); strzalki ↑/↓ w Poradniku dnia (16 px).
 * Changelog 19.5.0: przelacznik Opady/Zachmurzenie nad wykresem nowcastu
 * + biale/szare slupki zachmurzenia (.timeline-segment.cloud).
 * Changelog 19.4.0: bez zmian wizualnych (bump wersji dla cache).
 * Changelog 19.3.5: bez zmian wizualnych (bump wersji dla cache).
 * Changelog 19.3.2: bez zmian wizualnych (bump wersji dla cache).
 * Changelog 19.3.0: jaskrawsza czerwien (#ff2d2d, jasny motyw
 * #e11d1d) dla temperatury w meteogramie i "jutro gorzej" w Poradniku;
 * nowa klasa .daily-desc--chrono dla wieloczlonowych opisow dnia.
 * Changelog 19.2.2: bez zmian wizualnych (stabilizacja historii
 * wykresu opadow w app.js).
 * Changelog 19.2.1: bez zmian wizualnych (nowe symbole w
 * icons-premium.svg + resolver ikon w index.php/app.js).
 * Changelog 19.2.0: bez zmian wizualnych (logika Poradnika dnia
 * i strzalek tabeli w app.js + nowe klucze i18n).
 * Changelog 19.1.3: bez zmian wizualnych (fix synchronizacji,
 * sprite ikon nocnych i logiki Poradnika w app.js + icons-premium.svg).
 * Changelog 19.1.2: bez zmian wizualnych (hotfix jednostek w app.js).
 * Changelog 19.1.1: tabela porownawcza "Dzis vs Jutro" (.vs-table)
 * — strzalki trendu, ikony czynnikow, kolumny Dzis/Jutro.
 * Changelog 19.1.0: kafelek "Dzis vs Jutro" niesie duzo wiecej tresci —
 * wieksza wysokosc, lepsza czytelnosc wieloliniowa; linia radaru.
 * Changelog 19.0.2: kafelek "Dzis vs jutro" — wiekszy kafelek na pelna
 * szerokosc z czytelnym, wielolinijkowym opisem (premium).

 * Changelog 19.0.0: NOWA sekcja "Poradnik dnia" (5 kafelków
 * glass z kropką poziomu good/fair/poor) + linia ETA w nowcaście.

 * Changelog 18.3.1: NAPRAWA KASKADY żółtych zakładek — reguły 18.3.0
 * przegrywały z blokiem 5.6.x (selektory ID #mapTabs/#meteogramTabs
 * + niebieski gradient); fix: selektory ID + !important (wzorzec 5.7.0).

 * Changelog 18.3.0: aktywne zakładki meteogramu i mapy = żółty
 * wzorzec „Porównaj pogodę" (#facc15/#111827); Odśwież/Pełny ekran bez zmian.

 * Changelog 18.2.6 (kompan): cache-bust ?v=18.2.6, SW cache
 * v18.2.6 (paleta słupków Viper HD w app.js; style bez zmian).

 * Changelog 18.2.5 (kompan): cache-bust ?v=18.2.5, SW cache
 * v18.2.5 (kolory słupków w app.js; style bez zmian).

 * Changelog 18.2.4 (kompan): cache-bust ?v=18.2.4, SW cache
 * v18.2.4 (refresh; bez zmian stylow).

 * Changelog 18.2.3 (kompan): cache-bust ?v=18.2.3, SW cache v18.2.3.

 * Changelog 18.2.2 (kompan): cache-bust ?v=18.2.2, SW cache v18.2.2.

 * Changelog 18.2.1 (kompan): cache-bust ?v=18.2.1, SW cache v18.2.1.

 * Changelog 18.2.0 (kompan): cache-bust ?v=18.2.0, SW cache v18.2.0.

 * Changelog 18.1.0 (kompan): cache-bust ?v=18.1.0, SW cache v18.1.0.

 
*
 
C
h
a
n
g
e
l
o
g
 
1
8
.
0
.
3
 
(
k
o
m
p
a
n
)
:
 
c
a
c
h
e
-
b
u
s
t
 
?
v
=
1
8
.
0
.
3
,
 
S
W
 
c
a
c
h
e
 
v
1
8
.
0
.
3
.

 * Changelog 18.0.2 (kompan): cache-bust ?v=18.0.2, SW cache v18.0.2; style kólka EU AQI i przycisku Google.

 * Changelog 18.0.1 (kompan): cache-bust ?v=18.0.1, SW cache v18.0.1.

 * Changelog 18.0.0 (kompan): cache-bust ?v=18.0.0, SW cache v18.0.0.

 * Changelog 17.7.4 (kompan): cache-bust ?v=17.7.4, SW cache v17.7.4.
 *
 * Changelog 17.7.3 (kompan): cache-bust ?v=17.7.3, SW cache v17.7.3.
 *
 * Changelog 17.7.2 (kompan): cache-bust ?v=17.7.2, SW cache v17.7.2.
 *
 * Changelog 17.7.1 (kompan): cache-bust ?v=17.7.1, SW cache v17.7.1.
 *
 * Changelog 17.7.0 (kompan): cache-bust ?v=17.7.0, SW cache v17.7.0.
 *
 * Changelog 17.6.1 (kompan): cache-bust ?v=17.6.1, SW cache v17.6.1.
 *
 * Changelog 17.6.0 (kompan): cache-bust ?v=17.6.0, SW cache v17.6.0.
 *
 * Changelog 17.5.0 (kompan): cache-bust ?v=17.5.0, SW cache v17.5.0.
 *
 * Changelog 17.4.8 (kompan): cache-bust ?v=17.4.8, SW cache v17.4.8.
 *
 * Changelog 17.4.7 (kompan): cache-bust ?v=17.4.7, SW cache v17.4.7.
 *
 * Changelog 17.4.6 (kompan): cache-bust ?v=17.4.6, SW cache v17.4.6.
 *
 * Changelog 17.4.5 (kompan): cache-bust ?v=17.4.5, SW cache v17.4.5.
 * Brak zmian layoutu — zmiany w app.js/index.php 17.4.5.
 *
 * Changelog 17.4.2 (kompan): cache-bust ?v=17.4.2, SW cache v17.4.2.
 * Brak zmian layoutu — nowa skala kolorow slupkow wykresu opadow siedzi
 * w app.js 17.4.2 (kolory inline przy renderze segmentow).
 *
 * Changelog 17.4.1 (kompan): cache-bust ?v=17.4.1, SW cache v17.4.1.
 * Brak zmian layoutu — spinner hero LibreWXR (is-awaiting-librewxr)
 * siedzi w inline <style> template.html 17.4.1 (krytyczny dla 1. paintu).
 *
 * Changelog 17.3.0 (kompan): cache-bust ?v=17.3.0. Brak zmian layoutu.
 * Changelog 17.0.0 (kompan dla index.php 17.0.0 — LibreWXR autorytetem dla stanu "teraz" od pierwszego renderu): serwer pobiera radar+satelitę PRZED pierwszym paintem, payload niesie wwLibreNow, klient nie miga już ikonami po search/F5/odświeżeniu; asset ?v=17.0.0, SW cache v17.0.0.
 *
 * Changelog 13.0.5:
 * - Bez zmian w regułach CSS. 13.0.4 to porządki po stronie
 * PHP (index.php): wczesny dispatcher dla strony czasu
 * eliminuje HTTP 500. Asset ?v=13.0.4 tylko po to, żeby
 * przeglądarka pobrała nowy index.php/template.html/time.php.
 * - Wersja: 13.0.3 → 13.0.4.
 *
 * Changelog 13.0.3:
 * - Bez zmian w regułach CSS. 13.0.3 to fix po stronie
 * index.php (canonical URL dla strony czasu) i app.js
 * (wwBuildSwapHref czyta z płaskiego i18n.route_*_slug).
 * Top-bar swap button zachowuje istniejący styling z .icon-btn.
 * - Wersja: 13.0.2 → 13.0.3 (asset ?v=13.0.3, SW cache
 * v13.0.3).
 *
 * Changelog 13.0.2:
 * - The #swapPageBtn (top-bar Weather/Time toggle) inherits
 * the existing .icon-btn rule (it is rendered as a real
 * <a class="icon-btn" id="swapPageBtn"> in both pages).
 * No new CSS needed for 13.0.2 — the existing tokens cover
 * it perfectly. The .ww-page-time body modifier and the
 * .time-* section rules from 13.0.0 still apply.
 * - Wersja: 13.0.0 → 13.0.2 (asset ?v=13.0.2, SW cache
 * v13.0.2, sprite key ww_sprite_v1715).
 *
 * Changelog 13.0.0:
 * - NEW TIME PAGE STYLES. The time page (time.php) reuses
 * the existing .section / .section-header / .section-title
 * rules but adds a dedicated set of glassmorphism tokens
 * for the hero (big monospace live clock + analog SVG
 * dial), the time-data grid (ISO 8601 / RFC 2822 / Unix
 * epoch / Julian day / ISO week / day of year), the sun
 * times card, the world clocks strip, the calendar
 * block (countdowns to new year / summer / winter), and
 * the swap button (placed in the top-bar action stack to
 * the LEFT of the 6-dots layout button).
 * - Wersja: 12.0.3 → 13.0.0 (asset ?v=13.0.0, SW cache
 * v13.0.0, sprite key ww_sprite_v1300).
 *
 * Changelog 12.0.3:
 * - NO style.css change. The 12.0.2 fix is purely numeric
 * (atmospheric refraction + sun's apparent radius added
 * to template.html's day-length formula: cos(H) now uses
 * h = -50/60° instead of h = 0°). Existing rules for
 * .astro-stats-panel / .astro-stats-grid handle the layout
 * correctly.
 * - Wersja: 12.0.1 → 12.0.2 (asset ?v=12.0.2, SW cache
 * v12.0.2, sprite key ww_sprite_v1202).
 *
 * Changelog 12.0.1:
 * - NO style.css change. The 12.0.1 fix is purely numeric
 * (× 43200.0 → × 86400.0 in template.html's day-length
 * calculations). Existing rules for .astro-stats-panel
 * / .astro-stats-grid handle the layout correctly.
 * - Wersja: 12.0.0 → 12.0.1 (asset ?v=12.0.1, SW cache
 * v12.0.1, sprite key ww_sprite_v1201).
 *
 * Changelog 12.0.0:
 * - ROLLBACK TO 10.3.3 + DAY-LENGTH CARDS. Struktura
 * plików wróciła do 10.3.3. Brak zmian w style.css poza
 * wersją metadanych (asset ?v=12.0.0, SW cache v12.0.0,
 * sprite key ww_sprite_v1201). Style dla .astro-stats-panel
 * i .astro-stats-grid (używane przez nowy panel "Dzień"
 * w astroStatsSection) już istnieją — żadnych nowych reguł
 * CSS nie potrzeba.
 *
 * Changelog 10.3.3:
 * - Companion release — no CSS changes. The current-vs-1m-nowcast
 * consistency fix is pure index.php logic
 * (ww_syncCurrentWithImminentNowcast) and reuses the existing hero,
 * icon and chart styles. Referenced via ?v=10.3.3.
 *
 * Changelog 10.3.2:
 * - Companion release — no CSS changes (FA iframe height/scrolling are
 * plain HTML attrs in template.html; the same-instance fix is in
 * index.php). Referenced via ?v=10.3.2.
 *
 * Changelog 10.3.1:
 * - Companion release — no CSS changes (FA iframe height/scrolling are
 * plain HTML attrs in template.html; the same-instance fix is in
 * index.php). Referenced via ?v=10.3.1.
 *
 * Changelog 10.3.0:
 * - Version renumber only (per owner request) — feature-identical to
 * 10.2.7 r2. Still no style changes: the ForecastAdvisor tab reuses
 * existing hub rules and the mostly-cloudy icon lives in the sprite.
 * Referenced via ?v=10.3.0.
 *
 * Changelog 10.2.7:
 * - Companion release — the ForecastAdvisor hub tab needs no new CSS:
 * it reuses the existing #hubSection .tablinks / .tabcontent / iframe
 * rules and the shim page (index.php ?_fa=1) renders FA's own markup.
 * - (r2) Still no CSS changes: the new ww-mostly-cloudy-day icon for
 * "Przeważnie pochmurno" lives entirely in icons-premium.svg.
 *
 * Changelog 10.1.5:
 * - Companion release — the HUB invisibility fix is pure JavaScript
 * (app.js hubRevealFrames() + initLazyMap() now uses its own
 * state._mapActivated). No style changes were needed: the
 * `#hubSection .tabcontent.active { display: block }` rules already
 * do their job once #hubFrames loses the `hidden` attribute.
 *
 * Changelog 10.1.4:
 * - #alertsSection .alerts-source: smaller "Źródło: LibreWXR / WMO CAP"
 * caption (11px, subtle) per user request.
 * - Fullscreen overlay is now a flex column: a slim top bar
 * (.ww-fs-bar) hosts the "Zamknij" button and .ww-fs-body takes the
 * REMAINING height — the button no longer overlaps iframe controls
 * (the 5.6.0 floating close overlapped e.g. Windy's top-right menu).
 *
 * Changelog 10.1.3:
 * - Meteogram canvas: touch-action none -> pan-y (all 3 rules) so
 * vertical swipes anywhere on the meteogram scroll the page on
 * mobile; the data line itself is engaged by app.js only for pointers
 * INSIDE the plot rectangle.
 * - NEW .astro-dayline-caps/.astro-dayline-cap(-l/-t): sunrise/sunset
 * captions pinned exactly under their dayline points (label line +
 * hour line beneath), replacing the removed premium-icon arc-times
 * row. Only these two points get captions — overlap is impossible.
 * - Stacked Sun/Moon (<=560px): gap above the Moon card widened
 * 14px -> 26px (clearer break after the "Niebieska godzina" row).
 *
 * Changelog 10.1.2:
 * - Version bump only (companion of the app.js 10.1.2 fix that rebuilds
 * the premium astro ribbon/moments immediately after a city search).
 * No rules changed in this file.
 *
 * Changelog 10.1.1:
 * - Per-section 6-dot grips removed: headers no longer reserve 44px
 * on the right, so subtitles ("Następne 60 minut", "Dni…",
 * "Zarządzaj", map tools) sit flush at the right edge again like
 * before 8.0.0. Layout editing lives ONLY in the top-bar modal.
 * (Dead .ww-sec-grip/.ww-sec-menu/.ww-sec-trash rules below are now
 * unused and kept harmlessly; the .ww-layout-* modal CSS stays.)
 * - Dayline captions DELETED for good: the marker row is dots-only
 * (.astro-dayline-marks is a slim 16px strip; all two-row staggering
 * and edge nudges are gone). Full "Label · HH:MM" lives in each
 * dot's tooltip title; exact hours moved into the ordered moments
 * list. No more overlapping dawn/sunrise or sunset/dusk texts.
 * - NEW .astro-moments: ordered astro stats list under the Sun chart,
 * styled like Główne statystyki rows (.astro-stats-grid): icon +
 * label left, hour right, stacked — first light, dawn, solar noon,
 * dusk, last light; golden hour and blue hour span both columns at
 * the very bottom via .astro-moment--wide{grid-column:1/-1}.
 * Replaces the frameless .astro-chips strip.
 * - Small screens: a bit more air above the Moon card when Sun stacks
 * over Moon (.moon-arc-container gets margin-top at <=560px).
 * - "Poniżej horyzontu" (below-horizon) caption: normal weight 400
 * (was 900).
 *
/* ================================================================================================================================================================================================================================================================= */
 * - NEW: premium day-ribbon styles (segments, moment markers, now
 * needle), glass astro chips, astro source credit.
 * - NEW: reorder coachmark — animated one-time hint card (pure CSS
 * finger-drag demo, glass popover, arrow anchor, reduced-motion
 * fallback).
 *
 * Changelog 5.6.5:
 * - No visual changes; version bumped together with the rest of the
 * 5.6.5 set (full-page English translation fix + rebuilt lang.php).
 *

 * Changelog 5.6.4:
 * - CHANGE: unified tab typography. All tab bars (weather map tabs,
 * meteogram tabs, Hub iframe .tablinks, Hub main categories) render
 * with the meteogram-tab look: 600 13px system-ui on a 999px glass
 * pill, cyan #38bdf8 accent for hover/active, blue-cyan active
 * gradient. The Hub main category buttons keep the same family but
 * are visually LARGER (15px / 700 / 10px 19px padding), reflecting
 * their role as the primary Hub navigation.
 * - Version markers bumped to 5.6.4.
 *

 * Changelog 5.6.3:
 * - FIX: the four gesture tab bars get position:relative so the
 * long-press drag math (offsetLeft-based slot detection) is always
 * measured against the bar itself, in every surrounding layout.
 * - Behavioural note: live activation of the tab dropped on the first
 * position is implemented in app.js 5.6.3 (onBecomesFirst).
 * - Version markers bumped to 5.6.3.
 *

 * Changelog 5.5.7:
 * - No new CSS rules are required for the language fix: app.js and
 * template.html now localize period descriptions before rendering.
 * - No new CSS rules. The "Precipitation will stop in N minutes" hint
 * reuses the existing `.rain-text` / `.precip-unit` styles, so the
 * visual look matches the previous "Raining now — X mm/h" line
 * exactly (no new spacing, no new wrapping). All browsers / Service
 * Workers pick up the change via the bumped `?v=5.5.7` query string.
 * - The per-iframe "Refresh" toolbar (added in 5.3.0) was removed.
 * The existing "Refresh" button (next to the "Fullscreen" button)
 * is the single refresh control and is wired to do a real F5 via
 * iframe.contentWindow.location.reload().
 * - All 5.3.0 CSS rules are preserved: fixed-height cards (180/200/220 px),
 * .timeline-bar 120px, English-only comments.
 *
 * Changelog 5.2.9 (see archive for details):
 * - Hourly / period / extended cards had min-height only; the new
 * fixed-height (5.3.0) closes the "data spilling below the card"
 * report.
 * - No major CSS logic changes. Version bump only, so browsers /
 * Service Workers pick up the 5.2.7 changes:
 * * index.php 5.2.7: morning/noon/evening/night cards now AGGREGATE
 * the whole period window instead of a single hour (no more
 * "Bezchmurnie rano" when it rained for 4h),
 * * app.js 5.2.7: rain-radar chart now suppresses tiny residual
 * intensity bars when the hero shows a sky-only code (fix
 * "pochmurno vs kreseczki" inconsistency),
 * * sprite cache-busting (APCu key ww_sprite_v531) and
 * `?v=5.5.7` query string for style.css / app.js / sw.js.
 * - Added a small safety net: `.ww-icon svg { display:block }` and
 * `.ww-noscript-banner` block style from template.html will be
 * honored on first paint (no flash of unstyled icons).
 *
 * Changelog 5.2.6:
 * - No CSS logic changes. Version bump only, so browsers / Service
 * Workers pick up the app.js + backend changes that finally make the
 * "rain radar minutely" chart refresh live.
 *
 * Changelog 5.2.5:
 * - FIX: hero (weather icon + temperature) briefly shifted LEFT during
 * initial page load, then snapped back to center. Root cause:
 * `.hero-weather` (and `.hero-location`) had NO explicit centering
 * rule outside the mobile media query, so on desktop the very first
 * paint rendered them as `display: block; width: auto`, sticking
 * their children to the LEFT edge of `.hero-content`. Fixed by
 * declaring both containers as centered flex-columns in the CRITICAL
 * CSS baseline (top of this file) so they render centered from the
 * very first paint. Duplicated in the main stylesheet section too.
 *
 * Changelog 5.2.4:
 * - NEW SVG sprite: `icons-premium.svg` — colored, filled premium icons.
 * The existing `.ww-icon path { fill: currentColor !important }` rule
 * stays untouched, because every element in the new sprite has an
 * inline `style="fill: X !important"` — inline !important beats
 * external stylesheet !important, so premium colors win everywhere.
 *
 * Changelog 5.2.3:
 * - No visual changes vs 5.2.2. Version bump only so browsers pick up
 * the new backend logic that renders mixed-weather days (rain +
 * sun) as a single 🌦️ icon matching tomorrow.io.
 *
 * Changelog 5.2.2:
 * - No visual changes vs 5.2.1. Version bump only so browsers pick up
 * the new backend logic for today's card in the 5-day forecast
 * (chronological description "morning downpour → clear afternoon"
 * and rest-of-day icon).
 *
 * Changelog 5.2.1:
 * - FIX: single-glyph emoji icons were being cut off at the bottom
 * because 5.2.0 set `overflow: hidden` on the icon container while
 * font-size == container height. Emoji fonts render ~1.2x taller
 * than font-size (ascender + descender), so the tail was clipped.
 * Fix: overflow removed and font-size reduced to ~78% of the box
 * for single-glyph, ~46% + tighter letter-spacing for multi-glyph.
 * - `.weather-icon-large` height increased 126->132px to leave room
 * for the emoji descender inside the hero card.
 *
 * Changelog 5.2.0:
 * - Hardening for multi-glyph emoji icons (data-ww-multi-glyph="1"):
 * forces inline-flex + tight letter-spacing so composite emojis
 * like 🌙☁️ never overflow the icon slot and cover neighboring text.
 * - Spin animation extended to `.is-refreshing` in addition to the
 * legacy `.refreshing`, matching the new refresh button behaviour.
 *
 * Changelog 5.1.8:
 * - No visual changes vs 5.1.7. Version bump only, so the
 * Service Worker / browser cache invalidates alongside the
 * PHP + JS fixes that make page refresh (F5) actually fetch
 * fresh weather data.
 */

/* Critical layout baseline — moved from template.html to avoid duplicated CSS.
 style.css is loaded synchronously in the template to prevent a FOUC/layout shift. */
 :root{--bg-primary:#0a0a1a;--text-primary:#fff;--text-secondary:rgba(255,255,255,.72);
 --text-tertiary:rgba(255,255,255,.5);--glass-bg:rgba(255,255,255,.08);
 --glass-border:rgba(255,255,255,.12);--top-bar-height:56px;
 --safe-area-top:env(safe-area-inset-top,0px);
 --bg-gradient:linear-gradient(180deg,#050510 0%,#0a0a1a 20%,#101030 45%,#1a1a4a 70%,#0a0a20 100%)}
 .light-mode{--bg-primary:#a8cfee;--text-primary:#111827;--text-secondary:rgba(17,24,39,.78);
 --text-tertiary:rgba(17,24,39,.58);--glass-bg:rgba(17,24,39,.10);--glass-border:rgba(17,24,39,.14);
 --bg-gradient:linear-gradient(180deg,#4a90d9 0%,#6bb3e9 25%,#87ceeb 55%,#c8e9f7 85%,#e8f4ff 100%)}
 *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
 body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px;
 line-height:1.5;color:var(--text-primary);background:var(--bg-primary);min-height:100vh;overflow-x:hidden;
 -webkit-font-smoothing:antialiased}
 .weather-bg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
 .weather-bg-base{position:absolute;inset:0;background:var(--bg-gradient)}
 .top-bar{position:fixed;top:0;left:0;right:0;height:calc(var(--top-bar-height) + var(--safe-area-top));
 padding-top:var(--safe-area-top);background:rgba(10,10,26,.85);backdrop-filter:blur(20px);z-index:100;
 border-bottom:1px solid rgba(255,255,255,.06)}
 .top-bar-content{height:var(--top-bar-height);max-width:900px;margin:0 auto;padding:0 12px;
 display:flex;align-items:center;gap:12px}
 .main-content{padding-top:calc(var(--top-bar-height) + var(--safe-area-top));min-height:100vh}
 .hero-section{min-height:calc(100vh - var(--top-bar-height) - 100px);max-width:900px;margin:0 auto;
 display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 16px;text-align:center}
 .hero-content{width:100%;max-width:900px;display:flex;flex-direction:column;align-items:center;gap:16px;contain:layout style}
 /* 5.2.5: FIX layout shift - hero-location + hero-weather MUST be centered flex-columns.
 Without these rules, on the very first paint (before full CSS is applied) both
 blocks default to display:block width:auto, so their children (icon, temperature,
 description) stick to the LEFT edge of hero-content until layout settles - user
     sees the hero jump from left to center. Declaring both containers explicitly in
       the critical CSS baseline removes the shift entirely. */
    .hero-location{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
    .hero-weather{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
    /* 5.2.5 (2): setSvgIcon() in app.js sets inline styles on .weather-icon-large
       (display:inline-flex, width:110px, height:110px) AFTER hydration - which
       overrides these rules and causes the visible left-shift + resize.
       Solution: !important on the essential layout properties so external CSS
       beats external JS's inline style. (Inline !important would still beat us,
       but JS sets non-important inline, so !important CSS wins.) */
    .weather-icon-large{
      width:115px !important;
      height:132px !important;
      min-width:115px !important;
      min-height:132px !important;
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
      margin-left:auto !important;
      margin-right:auto !important;
      contain:layout size;
    }
    /* 5.2.5: SVG icon INSIDE hero container must render at 110px from the very
       first paint, otherwise it shows at .ww-icon's default 28px until full CSS
       loads and then jumps to 110px - a visible layout shift. */
    .weather-icon-large .ww-icon,
    .weather-icon-large > svg{
      width:110px !important;
      height:110px !important;
      min-width:110px !important;
      min-height:110px !important;
    }
    .hero-weather .temperature-display{
      margin-left:auto !important;
      margin-right:auto !important;
      justify-content:center !important;
      align-self:center;
    }
    .city-name{font-size:32px;font-weight:800;letter-spacing:-.5px;line-height:1.1;margin-bottom:6px}
    .country-name{font-size:17px;color:var(--text-secondary)}
    .local-time{font-size:15px;color:var(--text-secondary);margin-bottom:8px}
    .temperature-display{display:flex;align-items:flex-start;line-height:1}
    .temp-value{font-size:72px;font-weight:900;letter-spacing:-4px}
    .temp-unit{font-size:28px;color:var(--text-secondary);margin-top:10px}
    /* 5.2.5: .weather-icon-large is already defined with !important higher up (line ~97).
       Removed the duplicated non-important declaration here to prevent JS inline styles
       from ever winning the specificity race. */
    .weather-description{font-size:20px;font-weight:600}
    .feels-like{font-size:16px;color:var(--text-secondary)}
    .quick-stats{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap;justify-content:center;max-width:500px;contain:layout}
    .stat-item{min-width:72px;padding:12px 10px;background:var(--glass-bg);border-radius:14px;
    display:flex;flex-direction:column;align-items:center;gap:4px;contain:layout}
    .stat-value{font-size:18px;font-weight:700}
    .stat-label{font-size:11px;color:var(--text-tertiary);text-transform:uppercase;text-align:center}
    .ww-icon{width:28px;height:28px;min-width:28px;min-height:28px;display:block;flex-shrink:0}
    /* 5.2.5: hardening dla emoji-fallback z wieloznakowym emoji (np. 🌙☁️).
       JS ustawia inline-flex + fixed size + font-size 46% + letter-spacing -0.1em.
       CSS poniżej to druga linia obrony, gdyby CSS z template przebił inline-style'e.
       ZMIANA vs 5.2.0: usunięte overflow:hidden (przycinało prawą krawędź emoji). */
    .ww-icon[data-ww-multi-glyph="1"]{
      display:inline-flex !important;
      align-items:center !important;
      justify-content:center !important;
      overflow:visible !important;
      white-space:nowrap !important;
      letter-spacing:-0.1em !important;
      line-height:1 !important;
      text-align:center !important;
      vertical-align:middle !important;
    }
    /* 5.2.5: identycznie dla pojedynczego emoji-fallback - overflow ma być
       widoczny, żeby emoji-font nie był ucinany od dołu (descender). */
    .ww-icon[data-ww-multi-glyph="0"]{
      display:inline-flex !important;
      align-items:center !important;
      justify-content:center !important;
      overflow:visible !important;
      line-height:1 !important;
      text-align:center !important;
      vertical-align:middle !important;
    }
    .ww-icon path,.ww-icon circle,.ww-icon rect,.ww-icon polygon,.ww-icon ellipse,.ww-icon line,.ww-icon polyline,.ww-icon use{fill:currentColor!important}
    .ww-icon--sun path,.ww-icon--sun circle,.ww-icon--sun polygon,.ww-icon--sun line{stroke:none!important;fill:currentColor!important}
    .ww-icon--sun{color:#fbbf24}.ww-icon--sun path,.ww-icon--sun circle,.ww-icon--sun polygon{stroke:none!important}
    .ww-icon--moon{color:#E5E7EB}.ww-icon--cloud{color:rgba(255,255,255,.92)}.ww-icon--fog{color:rgba(255,255,255,.70)}
    .ww-icon--wind{color:rgba(255,255,255,.75)}.ww-icon--rain{color:#3b82f6}.ww-icon--snow{color:#a5f3fc}.ww-icon--storm{color:#f59e0b}
    .light-mode .ww-icon--cloud{color:rgba(17,24,39,.85)}.light-mode .ww-icon--fog{color:rgba(17,24,39,.55)}.light-mode .ww-icon--wind{color:rgba(17,24,39,.60)}
    .light-mode .ww-icon--rain{color:#2563eb}.light-mode .ww-icon--snow{color:#0ea5e9}.light-mode .ww-icon--storm{color:#d97706}
    .ad-section{min-height:140px}
    @media(max-width:480px){
      .city-name{font-size:26px}
      .temp-value{font-size:60px}
      /* 5.2.5: mobile needs !important too because base rule at line ~97 uses !important */
      .weather-icon-large{
        width:95px !important;
        height:110px !important;
        min-width:95px !important;
        min-height:110px !important;
      }
      .weather-icon-large .ww-icon,
      .weather-icon-large > svg{
        width:80px !important;
        height:80px !important;
        min-width:80px !important;
        min-height:80px !important;
      }
    }
    
    
    /* ============================================
       1. CSS VARIABLES (DEFAULT = DARK)
       ============================================ */
       :root {
        --accent-start: #00D4FF;
        --accent-end: #7B61FF;
        --bg-primary: #0a0a1a;
        --bg-secondary: #12122a;
        --text-primary: #ffffff;
        --text-secondary: rgba(255, 255, 255, 0.72);
        --text-tertiary: rgba(255, 255, 255, 0.5);
        --glass-bg: rgba(255, 255, 255, 0.08);
        --glass-bg-strong: rgba(15, 15, 35, 0.98);
        --glass-border: rgba(255, 255, 255, 0.12);
        --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
        --control-bg: rgba(255, 255, 255, 0.06);
        --control-bg-hover: rgba(255, 255, 255, 0.12);
        --control-focus-bg: rgba(30, 30, 50, 0.95);
        --topbar-bg: rgba(10, 10, 26, 0.85);
        --topbar-border: rgba(255, 255, 255, 0.06);
        --bg-gradient: linear-gradient(180deg, #050510 0%, #0a0a1a 20%, #101030 45%, #1a1a4a 70%, #0a0a20 100%);
        --precip-light: #3b82f6;
        --precip-moderate: #10b981;
        --precip-heavy: #f59e0b;
        --precip-intense: #ef4444;
        --snow-color: #a5f3fc;
        --top-bar-height: 56px;
        --safe-area-top: env(safe-area-inset-top, 0px);
        --safe-area-bottom: env(safe-area-inset-bottom, 0px);
        --safe-area-left: env(safe-area-inset-left, 0px);
        --safe-area-right: env(safe-area-inset-right, 0px);
        --transition-fast: 0.15s ease;
        --transition-normal: 0.25s ease;
        --transition-slow: 0.4s ease;
        --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      
      .light-mode {
        --bg-primary: #a8cfee;
        --bg-secondary: #eef2f7;
        --text-primary: #111827;
        --text-secondary: rgba(17, 24, 39, 0.78);
        --text-tertiary: rgba(17, 24, 39, 0.58);
        --glass-bg: rgba(17, 24, 39, 0.10);
        --glass-bg-strong: rgba(255, 255, 255, 0.96);
        --glass-border: rgba(17, 24, 39, 0.14);
        --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
        --control-bg: rgba(17, 24, 39, 0.10);
        --control-bg-hover: rgba(17, 24, 39, 0.16);
        --control-focus-bg: rgba(255, 255, 255, 0.98);
        --topbar-bg: rgba(255, 255, 255, 0.92);
        --topbar-border: rgba(17, 24, 39, 0.10);
        --bg-gradient: linear-gradient(180deg, #4a90d9 0%, #6bb3e9 25%, #87ceeb 55%, #c8e9f7 85%, #e8f4ff 100%);
      }
      
      /* ============================================
         2. RESET & BASE STYLES
         ============================================ */
      *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
      
      html {
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
        scroll-behavior: smooth;
        text-rendering: optimizeLegibility;
      }
      
      body {
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        font-size: 15px;
        line-height: 1.5;
        color: var(--text-primary);
        background: var(--bg-primary);
        min-height: 100vh;
        min-height: 100dvh;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        transition: background 0.35s ease, color 0.25s ease;
      }
      
      a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
      
      button {
        font-family: inherit; font-size: inherit; color: inherit;
        background: none; border: none; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform var(--transition-fast), background var(--transition-fast);
      }
      button:disabled { cursor: not-allowed; opacity: 0.5; }
      
      img, svg { display: block; max-width: 100%; height: auto; }
      input, textarea { font-family: inherit; font-size: inherit; }
      
      ::selection { background: var(--accent-start); color: white; }
      ::-moz-selection { background: var(--accent-start); color: white; }
      
      ::-webkit-scrollbar { width: 6px; height: 6px; }
      ::-webkit-scrollbar-track { background: transparent; }
      ::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 10px; }
      ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
      
      :focus-visible { outline: 2px solid var(--accent-start); outline-offset: 2px; }
      button:focus:not(:focus-visible), a:focus:not(:focus-visible), input:focus:not(:focus-visible) { outline: none; }
      
      .mobile-only { display: none; }
      .desktop-only { display: block; }
      
      @media (max-width: 768px) {
        .mobile-only { display: block; }
        .desktop-only { display: none; }
        .icon-btn.mobile-only { display: flex; }
      }
      
      .wind-arrow {
        font-size: 1.5em; font-weight: 900; display: inline-block;
        margin: 0 2px; line-height: 1; vertical-align: middle;
      }
      
      /* ============================================
         3. LOADING SCREEN
         ============================================ */
      .loading-screen {
        position: fixed; inset: 0; background: var(--bg-primary);
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 20px; z-index: 9999; transition: opacity 0.4s ease, visibility 0.4s ease;
      }
      .loading-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
      
      .loader {
        width: 60px; height: 60px; border-radius: 50%;
        background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
        animation: loader-pulse 1.2s ease-in-out infinite;
        box-shadow: 0 0 40px rgba(0, 212, 255, 0.3);
      }
      @keyframes loader-pulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.1); opacity: 0.8; }
      }
      
      /* ============================================
         4. STATIC BACKGROUND
         ============================================ */
      .weather-bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
      .weather-bg-base { position: absolute; inset: 0; background: var(--bg-gradient); transition: background 0.5s ease; }
      .weather-bg-overlay { position: absolute; inset: 0; pointer-events: none; }
      .weather-particles { display: none !important; }
      
      /* ============================================
         5. TOP BAR & NAVIGATION
         ============================================ */
      .top-bar {
        position: fixed; top: 0; left: 0; right: 0;
        height: calc(var(--top-bar-height) + var(--safe-area-top));
        padding-top: var(--safe-area-top);
        background: var(--topbar-bg);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-bottom: 1px solid var(--topbar-border);
        z-index: 100;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s ease;
      }
      .top-bar.hidden { transform: translateY(-100%); }
      
      .top-bar-content {
        height: var(--top-bar-height); max-width: 900px; margin: 0 auto;
        padding: 0 12px; display: flex; align-items: center; gap: 12px; position: relative;
      }
      
      .app-logo {
        width: 42px; height: 42px; min-width: 42px; border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25); cursor: pointer;
      }
      .app-logo:hover { transform: scale(1.05); box-shadow: 0 4px 16px rgba(102, 126, 234, 0.35); }
      .app-logo:active { transform: scale(0.95); }
      .app-logo svg { width: 24px; height: 24px; color: white; }
      
      .top-bar-actions { display: flex; gap: 6px; flex-shrink: 0; margin-left: auto; min-height: 42px; }
      
      .icon-btn {
        width: 42px; height: 42px; min-width: 42px; border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        background: transparent; border: none; cursor: pointer;
        color: var(--text-secondary); position: relative;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        flex: 0 0 42px;
      }
      .icon-btn:hover { background: var(--control-bg-hover); color: var(--text-primary); }
      .icon-btn:active { transform: scale(0.9); }
      .icon-btn svg { width: 20px; height: 20px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
      
      .gps-btn { width: 42px; min-width: 42px; max-width: 42px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
      .gps-btn-label { font-size: 12px; font-weight: 700; opacity: 0.9; display: inline-block; width: 100%; text-align: center; }
      
      #refreshBtn:hover svg { transform: rotate(180deg); }
      #refreshBtn.refreshing svg,
      #refreshBtn.is-refreshing svg,
      #refreshData.is-refreshing svg { animation: spin 1s linear infinite; }
      @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
      
      #favoriteBtn.is-favorite svg { fill: #ef4444; stroke: #ef4444; }
      #favoriteBtn.is-favorite { animation: heartBeat 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
      @keyframes heartBeat {
        0% { transform: scale(1); } 25% { transform: scale(1.25); }
        50% { transform: scale(0.95); } 75% { transform: scale(1.1); } 100% { transform: scale(1); }
      }
      
      .theme-icon-light, .theme-icon-dark {
        position: absolute; transition: opacity 0.3s ease, transform 0.3s ease;
      }
      .dark-mode .theme-icon-light { opacity: 0; transform: rotate(180deg) scale(0.5); }
      .light-mode .theme-icon-dark { opacity: 0; transform: rotate(-180deg) scale(0.5); }
      
      #settingsBtn:hover svg { transform: rotate(90deg); }
      
      .search-trigger {
        width: 42px; height: 42px; min-width: 42px; border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        background: var(--control-bg); border: none; cursor: pointer;
        color: var(--text-secondary); flex: 0 0 42px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .search-trigger:hover { background: var(--control-bg-hover); color: var(--text-primary); }
      .search-trigger:active { transform: scale(0.9); }
      .search-trigger svg { width: 20px; height: 20px; }
      
      @media (max-width: 640px) {
        .app-logo { width: 38px; height: 38px; min-width: 38px; }
        .app-logo svg { width: 20px; height: 20px; }
        .icon-btn, .search-trigger { width: 38px; height: 38px; min-width: 38px; flex: 0 0 38px; }
        .icon-btn svg, .search-trigger svg { width: 18px; height: 18px; }
        .top-bar-content { gap: 6px; padding: 0 8px; }
        .top-bar-actions { gap: 4px; min-height: 38px; }
        .gps-btn { width: 38px; min-width: 38px; max-width: 38px; }
        .gps-btn-label { font-size: 11px; }
      }
      
      /* ============================================
         6. SEARCH - DESKTOP
         ============================================ */
      .search-container { flex: 1; min-width: 0; position: relative; max-width: 100%; }
      
      .search-input-wrapper {
        display: flex; align-items: center; background: var(--control-bg);
        border: 2px solid transparent; border-radius: 14px;
        padding: 0 14px; gap: 10px; height: 42px; width: 100%;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .search-input-wrapper:focus-within {
        background: var(--control-focus-bg); border-color: var(--accent-start);
        box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.12), 0 4px 12px rgba(0, 0, 0, 0.25);
      }
      .search-icon { flex-shrink: 0; color: var(--text-tertiary); width: 18px; height: 18px; transition: color 0.2s ease; }
      .search-input-wrapper:focus-within .search-icon { color: var(--accent-start); }
      
      .search-input {
        flex: 1; min-width: 0; background: none; border: none; padding: 0;
        font-size: 14px; font-weight: 500; color: var(--text-primary); outline: none;
      }
      .search-input::placeholder { color: var(--text-tertiary); font-weight: 400; }
      
      .search-dropdown {
        position: absolute; top: calc(100% + 8px); left: 0; right: 0; width: 100%;
        background: rgba(26, 26, 46, 0.98); border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 18px; max-height: 70vh; overflow-y: auto; overflow-x: hidden;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 20px 50px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
        opacity: 0; visibility: hidden; pointer-events: none;
        transform: translateY(-12px) scale(0.98);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); z-index: 9999;
      }
      .light-mode .search-dropdown {
        background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(17, 24, 39, 0.12);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 20px 50px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
      }
      .search-dropdown.active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
      
      .search-item {
        display: flex; align-items: center; gap: 14px; padding: 16px 20px;
        width: 100%; text-align: left; background: transparent; border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        cursor: pointer; transition: all 0.15s ease; min-height: 72px;
      }
      .light-mode .search-item { border-bottom: 1px solid rgba(17, 24, 39, 0.08); }
      .search-item:last-child { border-bottom: none; }
      .search-item:hover, .search-item:focus {
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.12), rgba(123, 97, 255, 0.12)); outline: none;
      }
      .light-mode .search-item:hover, .light-mode .search-item:focus {
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(123, 97, 255, 0.08));
      }
      .search-item:active {
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(123, 97, 255, 0.2));
        transform: scale(0.99);
      }
      .search-item-icon {
        flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(123, 97, 255, 0.2));
        border-radius: 12px; font-size: 20px;
      }
      .light-mode .search-item-icon { background: linear-gradient(135deg, rgba(0, 212, 255, 0.12), rgba(123, 97, 255, 0.12)); }
      .search-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
      .search-item-text strong {
        font-size: 16px; font-weight: 600; color: #ffffff; line-height: 1.3;
        display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
      }
      .light-mode .search-item-text strong { color: var(--text-primary); }
      .search-item-text small {
        font-size: 13px; color: rgba(255, 255, 255, 0.55); line-height: 1.3;
        display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
      }
      .light-mode .search-item-text small { color: var(--text-secondary); }
      
      .search-loading, .search-no-results {
        padding: 50px 24px; text-align: center; color: rgba(255, 255, 255, 0.65); font-size: 15px; line-height: 1.6;
      }
      .light-mode .search-loading, .light-mode .search-no-results { color: var(--text-secondary); }
      .search-loading::before {
        content: ''; display: block; width: 40px; height: 40px; margin: 0 auto 20px;
        border: 3px solid rgba(255, 255, 255, 0.1); border-top-color: var(--accent-start);
        border-radius: 50%; animation: spin 0.8s linear infinite;
      }
      .light-mode .search-loading::before { border-color: rgba(17, 24, 39, 0.12); border-top-color: var(--accent-start); }
      .search-no-results::before { content: '🔍'; display: block; font-size: 44px; margin-bottom: 16px; opacity: 0.4; }
      
      /* ============================================
         6b. SEARCH - MOBILE
         ============================================ */
      .mobile-search-overlay {
        position: fixed; inset: 0; background: var(--bg-primary); z-index: 200;
        display: flex; flex-direction: column; opacity: 0; visibility: hidden;
        pointer-events: none; transform: translateY(-20px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .mobile-search-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
      
      .mobile-search-header {
        display: flex; align-items: center; gap: 12px;
        padding: calc(14px + var(--safe-area-top)) 14px 14px;
        background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--glass-border); flex-shrink: 0;
      }
      .mobile-search-back {
        width: 44px; height: 44px; min-width: 44px; border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        background: var(--control-bg); border: none; color: var(--text-primary); cursor: pointer;
        transition: all 0.2s ease;
      }
      .mobile-search-back:active { transform: scale(0.9); background: var(--control-bg-hover); }
      .mobile-search-back svg { width: 22px; height: 22px; }
      
      .mobile-search-input-wrapper {
        flex: 1; min-width: 0; display: flex; align-items: center;
        background: var(--control-bg); border: 2px solid transparent; border-radius: 14px;
        padding: 0 14px; gap: 10px; height: 46px; transition: all 0.2s ease;
      }
      .mobile-search-input-wrapper:focus-within {
        background: var(--control-focus-bg); border-color: var(--accent-start);
        box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.12);
      }
      .mobile-search-input {
        flex: 1; min-width: 0; background: none; border: none; padding: 0;
        font-size: 16px; font-weight: 500; color: var(--text-primary); outline: none;
      }
      .mobile-search-input::placeholder { color: var(--text-tertiary); font-weight: 400; }
      #mobileGeoBtn { width: 44px; height: 44px; min-width: 44px; flex-shrink: 0; }
      .mobile-search-results { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
      
      /* ============================================
         7. MAIN CONTENT & HERO
         ============================================ */
      .main-content {
        padding-top: calc(var(--top-bar-height) + var(--safe-area-top));
        padding-bottom: calc(24px + var(--safe-area-bottom));
        min-height: 100vh; min-height: 100dvh;
        position: relative; z-index: 2;
      }
      .section { padding: 20px 16px; max-width: 900px; margin: 0 auto; }
      .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
      .section-title { font-size: 20px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
      .section-subtitle { font-size: 14px; color: var(--text-tertiary); font-weight: 500; }
      
      .section-action-btn {
        font-size: 14px; font-weight: 600; color: var(--accent-start);
        padding: 8px 16px; background: var(--glass-bg); border: none; border-radius: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); cursor: pointer; transition: all 0.2s ease;
      }
      .section-action-btn:hover { background: var(--glass-bg-strong); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); }
      .section-action-btn:active { transform: translateY(0); }
      
      .hero-section {
        position: relative;
        min-height: calc(100vh - var(--top-bar-height) - var(--safe-area-top) - 100px);
        min-height: calc(100dvh - var(--top-bar-height) - var(--safe-area-top) - 100px);
        max-width: 900px; margin-left: auto; margin-right: auto;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        padding: 20px 16px; text-align: center;
      }
      .hero-anim-canvas-container {
        position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%;
        max-width: 900px; margin: 0 auto; border-radius: 28px; overflow: hidden;
        pointer-events: none; z-index: 1;
        background: var(--hero-sky-bg, linear-gradient(180deg, #1b62b7 0%, #3586dc 45%, #59a8f2 80%, #90cdff 100%));
        transition: background 1.2s ease;
      }
      .hero-anim-video {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        object-fit: cover; pointer-events: none; opacity: 0; transition: opacity 0.8s ease;
      }
      .hero-anim-video.is-playing { opacity: 1; }
      .hero-anim-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }
      .hero-anim-overlay {
        position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
        background: radial-gradient(ellipse at 50% 35%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.45) 100%);
      }
      html.light-mode .hero-anim-overlay {
        background: radial-gradient(ellipse at 50% 35%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.45) 100%);
      }
      .hero-content {
        position: relative; z-index: 2;
        width: 100%; max-width: 900px; margin: 0 auto;
        display: flex; flex-direction: column; align-items: center; gap: 16px;
        contain: layout style;
      }
      /* 39.0.0: Premium 1Weather White Typography & High-Contrast Shadow */
      .hero-location .city-name {
        font-size: 32px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; margin-bottom: 6px;
        color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: none !important;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75), 0 1px 4px rgba(0, 0, 0, 0.9) !important;
      }
      .hero-location .local-time,
      .hero-location .country-name {
        color: rgba(255, 255, 255, 0.9) !important;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75) !important;
      }
      .hero-weather .temp-value {
        color: #ffffff !important;
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 1px 5px rgba(0, 0, 0, 0.95) !important;
      }
      .hero-weather .temp-unit {
        color: rgba(255, 255, 255, 0.92) !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75) !important;
      }
      .hero-weather .feels-like {
        color: rgba(255, 255, 255, 0.9) !important;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75) !important;
      }
      .hero-weather .weather-description {
        color: #ffffff !important; font-weight: 700 !important;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8), 0 1px 4px rgba(0, 0, 0, 0.95) !important;
      }
      .hero-weather .weather-description-more {
        color: rgba(255, 255, 255, 0.95) !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
      }
      .quick-stats .stat-item {
        background: rgba(255, 255, 255, 0.14) !important;
        backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
      }
      .quick-stats .stat-value {
        color: #ffffff !important;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
      }
      .quick-stats .stat-label,
      .quick-stats .stat-icon {
        color: rgba(255, 255, 255, 0.88) !important;
      }
      @media (max-width: 768px) {
        .hero-anim-canvas-container {
          left: 50%; right: auto; transform: translateX(-50%); width: 100vw; max-width: 100vw; border-radius: 0;
        }
      }
      /* 5.2.5: centered flex-column for the two hero sub-blocks - matches
         the critical CSS baseline at the top of this file. */
      .hero-location {
        width: 100%;
        display: flex; flex-direction: column; align-items: center;
        text-align: center;
      }
      .hero-weather {
        width: 100%;
        display: flex; flex-direction: column; align-items: center;
        text-align: center; gap: 8px;
      }
      .hero-weather .weather-icon-large { margin-left: auto; margin-right: auto; }
      .hero-weather .temperature-display { margin-left: auto; margin-right: auto; justify-content: center; }
      .hero-weather .feels-like,
      .hero-weather .weather-description { width: 100%; text-align: center; }
      .local-time { font-size: 15px; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; margin-bottom: 8px; font-weight: 600; letter-spacing: 0.3px; text-shadow: 0 1px 6px rgba(0,0,0,0.85) !important; }
      .city-name {
        font-size: 32px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; margin-bottom: 6px;
        color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: none !important;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.95) !important;
      }
      .country-name { font-size: 17px; color: rgba(255,255,255,0.92) !important; -webkit-text-fill-color: rgba(255,255,255,0.92) !important; font-weight: 500; text-shadow: 0 1px 6px rgba(0,0,0,0.8) !important; }
      
      /* Icon: 15% bigger, filled - 5.2.5: height 126->132px so emoji descenders don't clip.
         5.2.5 (2): !important on layout to prevent app.js setSvgIcon() from overriding
         the size (JS sets container.style.width=110px inline which used to shift the
         icon to the left during hydration). */
      .weather-icon-large {
        font-size: initial;
        width: 115px !important; height: 132px !important;
        min-width: 115px !important; min-height: 132px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        contain: layout size;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18));
        animation: weatherIconFloat 6s ease-in-out 1.2s infinite;
      }
      .weather-icon-large .ww-icon,
      .weather-icon-large > svg {
        width: 110px !important;
        height: 110px !important;
        min-width: 110px !important;
        min-height: 110px !important;
      }
      @keyframes weatherIconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
      
      .temperature-display { display: flex; align-items: flex-start; line-height: 1; }
      .temp-value {
        font-size: 72px; font-weight: 900; letter-spacing: -4px;
        color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: none !important;
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.85), 0 2px 6px rgba(0, 0, 0, 0.95) !important;
      }
      .temp-unit { font-size: 28px; font-weight: 400; color: rgba(255,255,255,0.95) !important; -webkit-text-fill-color: rgba(255,255,255,0.95) !important; margin-top: 10px; margin-left: 2px; text-shadow: 0 2px 8px rgba(0,0,0,0.8) !important; }
      .feels-like { font-size: 16px; color: rgba(255,255,255,0.92) !important; -webkit-text-fill-color: rgba(255,255,255,0.92) !important; font-weight: 500; text-shadow: 0 1px 6px rgba(0,0,0,0.8) !important; }
      .weather-description { font-size: 20px; font-weight: 700; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; margin-top: 4px; text-shadow: 0 2px 12px rgba(0,0,0,0.85), 0 1px 4px rgba(0,0,0,0.95) !important; }
      /* 37.1.0: pogrubiona czcionka sekcji komunikatu trendu i dopisków satelitarnych */
      .weather-description-more { font-size: 13.5px; font-weight: 700; line-height: 1.4; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; margin-top: 3px; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,0.85) !important; }
      .weather-description-more:empty { display: none; }
      
      .quick-stats {
        display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap;
        justify-content: center; max-width: 500px; contain: layout;
      }
      .stat-item {
        min-width: 72px; padding: 12px 10px; background: var(--glass-bg);
        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        border: none; border-radius: 14px; display: flex; flex-direction: column;
        align-items: center; gap: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
        transition: transform 0.2s ease, box-shadow 0.2s ease; contain: layout;
      }
      .stat-item:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); }
      .stat-icon svg { width: 20px; height: 20px; color: var(--text-secondary); }
      .stat-value { font-size: 18px; font-weight: 700; color: var(--text-primary); }
      .stat-label { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; text-align: center; line-height: 1.3; letter-spacing: 0.5px; font-weight: 600; }
      
      @media (min-width: 1024px) {
        .quick-stats { width: 100%; max-width: 900px; flex-wrap: nowrap; justify-content: space-between; }
        .stat-item { flex: 1 1 0; min-width: 0; }
      }
      
      /* ============================================
         8. FAVORITES SECTION
         ============================================ */
      .favorites-section { padding-top: 0; }
      .favorites-horizontal {
        display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 6px 4px; touch-action: auto;
      }
      .favorites-horizontal::-webkit-scrollbar { display: none; }
      .favorites-empty-inline {
        width: 100%; padding: 24px; text-align: center; color: var(--text-tertiary); font-size: 15px;
        background: var(--glass-bg); border: 2px dashed var(--glass-border); border-radius: 16px; font-weight: 500;
      }
      .favorite-card {
        scroll-snap-align: start; flex-shrink: 0; min-width: 150px; padding: 16px 14px;
        background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        border: none; border-radius: 16px; display: flex; flex-direction: column;
        align-items: center; gap: 6px; cursor: pointer; position: relative;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .favorite-card:hover { transform: translateY(-4px); background: var(--glass-bg-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22); }
      .favorite-card.current { border: 2px solid var(--accent-start); background: linear-gradient(135deg, rgba(0, 212, 255, 0.12), rgba(123, 97, 255, 0.12)); }
      .favorite-card-city { font-size: 17px; font-weight: 700; color: var(--text-primary); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
      .favorite-card-region { font-size: 12px; color: var(--text-tertiary); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-weight: 500; }
      .favorite-card-remove {
        position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%;
        background: rgba(239, 68, 68, 0.9); color: white; font-size: 14px;
        display: flex; align-items: center; justify-content: center;
        opacity: 0; transform: scale(0.8); transition: all 0.2s ease; border: none; cursor: pointer;
      }
      .favorite-card:hover .favorite-card-remove { opacity: 1; transform: scale(1); }
      
      /* ============================================
         9. HOURLY FORECAST
         ============================================ */
      .hourly-section { padding-top: 12px; }
      .hourly-scroll-container { margin: 0 -16px; padding: 0 16px; }
      .hourly-scroll {
        display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px 4px; cursor: grab; touch-action: auto;
      }
      .hourly-scroll::-webkit-scrollbar { display: none; }
      .hourly-scroll.grabbing, .hourly-scroll:active { cursor: grabbing; }
      
      .hourly-card {
        scroll-snap-align: start; flex-shrink: 0; min-width: 82px; padding: 12px 8px;
        background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        border: none; border-radius: 16px; display: flex; flex-direction: column;
        align-items: center; gap: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        /* 5.3.0: fixed-height card. Every data row fits inside the card.
           overflow: hidden prevents any content (long description, large
           wind value) from spilling below the card border. */
        box-sizing: border-box;
        height: 180px; min-height: 180px; max-height: 180px;
        overflow: hidden; position: relative;
      }
      .hourly-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22); }
      .hourly-card.current {
        background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
        border-color: transparent; box-shadow: 0 4px 20px rgba(0, 212, 255, 0.4);
      }
      .hourly-card.current * { color: white !important; }
      
      .hourly-time { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
      .hourly-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-width: 32px; min-height: 32px; }
      .hourly-icon .ww-icon { width: 28px; height: 28px; }
      .hourly-temp { font-size: 19px; font-weight: 800; color: var(--text-primary); }
      .hourly-desc {
        font-size: 10px; color: var(--text-tertiary); text-align: center; max-width: 78px;
        font-weight: 500; line-height: 1.25; flex: 1; min-height: 0;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden; word-break: break-word; hyphens: auto;
        max-height: 28px; white-space: normal;
      }
      .hourly-precip { font-size: 12px; color: var(--precip-light); font-weight: 700; }
      .hourly-wind { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; display: flex; align-items: center; gap: 3px; font-weight: 500; }
      
      .hourly-day-separator {
        scroll-snap-align: start; flex-shrink: 0; min-width: 100px; padding: 12px 14px;
        border-radius: 16px; background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(123, 97, 255, 0.15));
        border: 1px solid rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; user-select: none;
      }
      .light-mode .hourly-day-separator { background: linear-gradient(135deg, rgba(0, 212, 255, 0.10), rgba(123, 97, 255, 0.10)); border: 1px solid rgba(17, 24, 39, 0.10); }
      .hourly-day-separator-title { font-size: 13px; font-weight: 800; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.5px; }
      .hourly-day-separator-date { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
      
      .hourly-day-divider {
        scroll-snap-align: start; flex-shrink: 0; min-width: 140px; padding: 10px 12px;
        border-radius: 14px; background: var(--glass-bg); border: 1px solid var(--glass-border);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        color: var(--text-primary); font-weight: 800; font-size: 12px; text-align: center; user-select: none;
      }
      
      .minutely-sun-badge { font-size: 10px; font-weight: 800; color: var(--text-tertiary); margin-top: -2px; margin-bottom: 2px; white-space: nowrap; }
      .hourly-card.current .minutely-sun-badge { color: rgba(255,255,255,0.92) !important; }
      
      /* ============================================
         10. NOWCAST
         ============================================ */
      .nowcast-section { padding-top: 12px; }
      .nowcast-card {
        background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        border: none; border-radius: 20px; padding: 18px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
      }
      .nowcast-summary {
        display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
        padding-bottom: 14px; border-bottom: 1px solid var(--glass-border);
      }
      .rain-icon { font-size: 28px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
      .rain-icon .ww-icon { width: 32px; height: 32px; }
      .rain-text { font-size: 15px; font-weight: 700; color: var(--text-primary); line-height: 1.4; }
      .timeline-markers {
        display: flex; justify-content: space-between; margin-bottom: 8px;
        font-size: 12px; color: var(--text-tertiary); font-weight: 600; padding: 0 40px; letter-spacing: 0.3px;
      }
      .timeline-chart-container { display: flex; align-items: stretch; gap: 6px; }
      .timeline-scale {
        display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
        width: 30px; min-width: 30px; font-size: 10px; color: var(--text-tertiary); padding: 2px 0; font-weight: 600;
      }
      .timeline-scale.right { align-items: flex-start; }
      .timeline-bar {
        /* 5.3.0: increased height so the rain intensity bars (segments with
           position:absolute; bottom:0; height: 3-100%) have room to grow upward
           without overflowing the card. overflow: hidden clips any segment
           that would otherwise spill below the chart border. */
        flex: 1; height: 120px; background: var(--glass-bg); border-radius: 10px;
        position: relative; overflow: hidden; margin: 0 4px;
      }
      .timeline-grid-line { position: absolute; left: 0; right: 0; height: 1px; background: var(--glass-border); pointer-events: none; }
      .timeline-grid-line.mid { top: 50%; border-top: 1px dashed var(--glass-border); background: none; }
      .timeline-grid-line.max { top: 0; }
      .timeline-segment { position: absolute; bottom: 0; width: 0.85%; min-height: 3px; border-radius: 3px 3px 0 0; transition: height 0.3s ease; }
      .timeline-segment.snow { background: var(--snow-color) !important; }
      .timeline-now {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--text-primary);
  z-index: 10;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}
.timeline-now::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 10px;
  height: 10px;
  background: var(--text-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--glass-bg), 0 0 8px rgba(255, 255, 255, 0.8);
}
.timeline-segment.forecast {
  border-top: 1px dashed rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 4px rgba(56, 189, 248, 0.3);
}
.timeline-segment:hover {
  transform: scaleY(1.06);
  filter: brightness(1.3);
  z-index: 25;
}

      .timeline-now::before { content: ''; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; background: var(--text-primary); border-radius: 50%; box-shadow: 0 0 0 3px var(--glass-bg); }
      .timeline-legend { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 14px; font-size: 12px; color: var(--text-secondary); font-weight: 500; }
      .legend-item { display: flex; align-items: center; gap: 6px; }
      .legend-color { width: 14px; height: 14px; border-radius: 4px; }
      .legend-color.rain { background: linear-gradient(135deg, var(--precip-light), var(--precip-moderate)); }
      .legend-color.snow { background: var(--snow-color); border: 1px solid rgba(0, 0, 0, 0.1); }
      .legend-unit { color: var(--text-tertiary); font-size: 12px; }

/* ==================================================================
   19.5.0: PRZELACZNIK "Opady / Zachmurzenie" nad wykresem nowcastu.
   Oba wykresy dziela to samo miejsce — przelaczamy warstwy, nie
   przebudowujemy sekcji.
   ================================================================== */
.nowcast-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
  flex-wrap: wrap;
}
/* 19.5.1: wyglad przyciskow pochodzi w calosci z .map-tab (zolty active,
   czarny napis) — NIE powielamy tu kolorow, zeby oba paski nie rozjechaly
   sie przy przyszlej zmianie motywu. Ponizej tylko to, co specyficzne
   dla przeciagania. */
.nowcast-tab { cursor: pointer; user-select: none; }
.nowcast-tab.ww-dragging { opacity: .45; }
.nowcast-tab.ww-drop-target { outline: 2px dashed rgba(250, 204, 21, .85); outline-offset: 2px; }

/* Slupki zachmurzenia — biel i szarosc, zeby odrozniac je od opadu.
   Wysokosc = % zachmurzenia; przy czystym niebie slupka nie ma wcale. */
.timeline-segment.cloud {
  background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 55%, #94a3b8 100%);
  border-radius: 3px 3px 0 0;
}
.timeline-segment.cloud.forecast { opacity: .82; }
.timeline-segment.cloud.past { opacity: .95; }
html.light-mode .timeline-segment.cloud {
  background: linear-gradient(180deg, #e2e8f0 0%, #94a3b8 60%, #64748b 100%);
}
.legend-color.cloud {
  background: linear-gradient(135deg, #ffffff, #94a3b8);
  border: 1px solid rgba(0,0,0,0.10);
}
@media (max-width: 480px) {
  .nowcast-tab { font-size: 11.5px; padding: 6px 11px; }
}
      
      
      /* ============================================
         10b. LIBREWXR RAIN RADAR TIMELINE CHART (14.3.2)
         ============================================ */
      .librewxr-radar-card {
        margin-top: 16px;
        background: var(--glass-bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--glass-border);
        border-radius: 20px;
        padding: 18px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
        position: relative;
        transition: all 0.3s ease;
      }
      .radar-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
        flex-wrap: wrap;
      }
      .radar-card-title-group {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .radar-card-title {
        font-size: 15px;
        font-weight: 700;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
      }
      .radar-icon-pulse {
        color: #38bdf8;
        animation: ww-radar-pulse 2.2s infinite ease-in-out;
        flex-shrink: 0;
      }
      @keyframes ww-radar-pulse {
        0% { transform: scale(0.95); opacity: 0.8; }
        50% { transform: scale(1.1); opacity: 1; filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.6)); }
        100% { transform: scale(0.95); opacity: 0.8; }
      }
      .radar-card-subtitle {
        font-size: 12px;
        color: var(--text-tertiary);
        font-weight: 500;
      }
      .radar-card-badges {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .radar-source-badge {
        font-size: 10px;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 12px;
        background: rgba(56, 189, 248, 0.14);
        color: #38bdf8;
        border: 1px solid rgba(56, 189, 248, 0.25);
        letter-spacing: 0.4px;
        text-transform: uppercase;
      }
      .radar-view-toggle {
        display: inline-flex;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid var(--glass-border);
        border-radius: 8px;
        padding: 2px;
        gap: 2px;
      }
      .radar-toggle-btn {
        background: transparent;
        border: none;
        color: var(--text-tertiary);
        padding: 3px 8px;
        border-radius: 6px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 600;
        transition: all 0.2s ease;
      }
      .radar-toggle-btn svg {
        display: block;
      }
      .radar-toggle-btn:hover {
        color: var(--text-primary);
      }
      .radar-toggle-btn.active {
        background: rgba(255, 255, 255, 0.2);
        color: var(--text-primary);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
      }
      .radar-summary {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 14px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--glass-border);
      }
      .radar-timeline-markers {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        font-size: 12px;
        color: var(--text-tertiary);
        font-weight: 600;
        padding: 0 36px;
        letter-spacing: 0.3px;
      }
      .radar-timeline-markers .marker-now {
        color: var(--text-primary);
        font-weight: 700;
      }
      .radar-chart-container {
        display: flex;
        align-items: stretch;
        gap: 6px;
        position: relative;
      }
      .radar-timeline-scale {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        width: 30px;
        min-width: 30px;
        font-size: 10px;
        color: var(--text-tertiary);
        padding: 2px 0;
        font-weight: 600;
      }
      .radar-timeline-scale.right {
        align-items: flex-start;
      }
      .radar-timeline-bar {
        flex: 1;
        height: 120px;
        background: var(--glass-bg);
        border-radius: 10px;
        position: relative;
        overflow: hidden;
        margin: 0 4px;
        border: 1px solid rgba(255, 255, 255, 0.05);
      }
      .radar-history-zone-indicator {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 65%;
        background: rgba(255, 255, 255, 0.015);
        pointer-events: none;
        z-index: 1;
      }
      .radar-forecast-zone-indicator {
        position: absolute;
        left: 65%;
        top: 0;
        bottom: 0;
        right: 0;
        background: rgba(56, 189, 248, 0.035);
        border-left: 1px dashed rgba(255, 255, 255, 0.12);
        pointer-events: none;
        z-index: 1;
      }
      .radar-timeline-now {
        position: absolute;
        left: 65%;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--text-primary);
        z-index: 10;
        border-radius: 2px;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
      }
      .radar-timeline-now::before {
        content: '';
        position: absolute;
        top: -4px;
        left: -4px;
        width: 10px;
        height: 10px;
        background: var(--text-primary);
        border-radius: 50%;
        box-shadow: 0 0 0 3px var(--glass-bg), 0 0 8px rgba(255, 255, 255, 0.8);
      }
      .radar-segments-layer {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
      }
      .radar-segment {
        position: absolute;
        bottom: 0;
        width: 2.2%;
        min-height: 3px;
        border-radius: 3px 3px 0 0;
        transition: height 0.3s ease, opacity 0.2s ease, transform 0.15s ease;
        cursor: pointer;
        box-sizing: border-box;
      }
      .radar-segment:hover {
        transform: scaleY(1.05);
        filter: brightness(1.3);
        z-index: 20;
      }
      .radar-segment.snow {
        background: #a5f3fc !important;
      }
      .radar-segment.forecast {
        border-top: 1px dashed rgba(255, 255, 255, 0.7);
        box-shadow: 0 0 6px rgba(129, 140, 248, 0.3);
      }
      .radar-svg-layer {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 6;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      .radar-svg-layer.active {
        opacity: 1;
        pointer-events: auto;
      }
      .radar-svg-point {
        cursor: pointer;
        transition: r 0.2s ease, fill 0.2s ease;
      }
      .radar-svg-point:hover {
        r: 6;
        filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.9));
      }
      .radar-timeline-legend {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
        margin-top: 14px;
        font-size: 12px;
        color: var(--text-secondary);
        font-weight: 500;
        flex-wrap: wrap;
      }
      .radar-past-dot {
        background: linear-gradient(135deg, #10b981, #3b82f6);
        border-radius: 4px;
        width: 12px;
        height: 12px;
        display: inline-block;
      }
      .radar-nowcast-dot {
        background: linear-gradient(135deg, #818cf8, #c084fc);
        border-radius: 4px;
        width: 12px;
        height: 12px;
        display: inline-block;
        border: 1px dashed rgba(255, 255, 255, 0.5);
      }
      .radar-tooltip {
        position: absolute;
        z-index: 100;
        background: rgba(15, 23, 42, 0.94);
        color: #f8fafc;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 8px;
        padding: 6px 10px;
        font-size: 11px;
        line-height: 1.4;
        pointer-events: none;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
        transform: translate(-50%, -100%);
        margin-top: -8px;
        white-space: nowrap;
        transition: opacity 0.15s ease;
      }
      .radar-tooltip-time {
        font-weight: 700;
        color: #38bdf8;
        margin-bottom: 2px;
      }
      .radar-tooltip-phase {
        font-size: 10px;
        color: #94a3b8;
      }
      .radar-tooltip-val {
        font-weight: 600;
        color: #f1f5f9;
      }

      /* ============================================
         11. DAILY FORECAST
         ============================================ */
      .daily-section { padding-top: 12px; }
      .daily-cards { display: flex; flex-direction: column; gap: 10px; }
      .daily-card {
        background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        border: none; border-radius: 16px; overflow: hidden; cursor: pointer;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .daily-card:hover { transform: scale(1.01); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }
      .daily-card.expanded { background: var(--glass-bg-strong); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22); }
      
      .daily-main { display: grid; grid-template-columns: 108px 1fr auto 54px auto; align-items: center; gap: 10px; padding: 14px 16px; }
      .daily-day { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; }
      .daily-day-name { font-size: 16px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .daily-date { font-size: 12px; color: var(--text-tertiary); font-weight: 500; white-space: nowrap; }
      
      .daily-weather-info { display: flex; align-items: center; gap: 10px; min-width: 0; justify-content: flex-start; }
      .daily-weather-info .daily-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 36px; min-height: 36px; flex-shrink: 0; }
      .daily-icon .ww-icon { width: 32px; height: 32px; }
      
      /* 39.0.0 (zgłoszenie właściciela): wyrównanie ikonek i opisów w tej samej linii niezależnie od długości opisu */
      .daily-desc { font-size: 12px; color: var(--text-tertiary); text-align: left; font-weight: 500; line-height: 1.25; white-space: normal; word-break: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; }
      .daily-desc--mixed { font-size: 11px; line-height: 1.25; }
      .daily-desc--chrono {
        font-size: 11px;
        line-height: 1.25;
        text-align: left;
        white-space: normal;
        word-break: normal;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      @media (max-width: 480px) {
        .daily-desc--chrono { font-size: 10.5px; }
      }
      .daily-temps { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
      .daily-temp-max { font-size: 19px; font-weight: 800; color: var(--text-primary); }
      .daily-temp-min { font-size: 14px; color: var(--text-tertiary); font-weight: 600; }
      .daily-extra { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); }
      .daily-wind { font-weight: 600; display: flex; align-items: center; gap: 3px; }
      .daily-precip-small { color: var(--precip-light); font-weight: 700; }
      .daily-expand-icon { font-size: 14px; color: var(--text-tertiary); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
      .daily-card.expanded .daily-expand-icon { transform: rotate(180deg); }
      .daily-details { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); background: var(--glass-bg); }
      
      .day-periods, .periods-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; align-items: stretch; }
      .day-periods .period-card, .periods-grid .period-card { width: auto !important; min-width: 0; }
      @media (max-width: 520px) { .day-periods { grid-template-columns: repeat(2, 1fr); } }
      
      .period-card {
        background: var(--glass-bg); border-radius: 14px; padding: 12px 10px; text-align: center;
        display: flex; flex-direction: column; gap: 6px; transition: all 0.2s ease;
        /* 5.3.0: fixed-height card. All data (icon, temp, description, feels,
           wind, precip%) fits inside the card without spilling below the border.
           overflow: hidden guarantees this. */
        box-sizing: border-box;
        height: 200px; min-height: 200px; max-height: 200px;
        overflow: hidden; position: relative;
      }
      .period-card:hover { background: var(--glass-bg-strong); transform: translateY(-3px); }
      .period-card.period-no-data { opacity: 0.4; }
      .period-header { display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 4px; }
      .period-icon { font-size: 15px; }
      .period-name { font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
      .period-weather { display: flex; align-items: center; justify-content: center; gap: 8px; }
      .period-weather-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
      .period-weather-icon .ww-icon { width: 32px; height: 32px; }
      .period-temp { font-size: 22px; font-weight: 800; color: var(--text-primary); }
      .period-desc {
        font-size: 12px; color: var(--text-secondary); margin-top: 2px; font-weight: 500;
        /* 5.3.0: line-clamp 3 lines, fixed max-height. Description never
           grows past its container; the card itself never grows. */
        line-height: 1.3; max-height: 48px; min-height: 0; flex-shrink: 0;
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
        overflow: hidden; word-break: break-word; hyphens: auto;
      }
      .period-details { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; font-size: 12px; color: var(--text-tertiary); }
      .period-feels { color: var(--text-secondary); font-weight: 500; }
      .period-wind { display: flex; align-items: center; justify-content: center; gap: 3px; }
      .period-precip { color: var(--precip-light); font-weight: 700; }
      .period-no-data-text { font-size: 12px; color: var(--text-tertiary); font-style: italic; }
      
      .day-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px; border-top: 1px solid var(--glass-border); }
      @media (min-width: 520px) { .day-detail-grid { grid-template-columns: repeat(4, 1fr); } }
      .detail-item { display: flex; flex-direction: column; gap: 4px; padding: 10px; background: var(--glass-bg); border-radius: 10px; }
      .detail-label { font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
      .detail-value { font-size: 14px; font-weight: 700; color: var(--text-primary); }
      
      .day-summary { display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: linear-gradient(135deg, rgba(0, 212, 255, 0.06), rgba(123, 97, 255, 0.06)); border-top: 1px solid var(--glass-border); }
      .day-summary-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
      .day-summary-text { font-size: 14px; line-height: 1.45; color: var(--text-secondary); margin: 0; font-weight: 500; white-space: normal; word-break: break-word; }
      .periods-note { margin: 10px 16px 0; font-size: 12px; line-height: 1.45; color: var(--text-tertiary); }
      
      /* ============================================
         12. EXTENDED FORECAST
         ============================================ */
      .extended-section { padding-top: 12px; }
      .extended-scroll-container { margin: 0 -16px; padding: 0 16px; }
      .extended-cards {
        display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px 4px; cursor: grab; touch-action: auto;
      }
      .extended-cards::-webkit-scrollbar { display: none; }
      .extended-cards.grabbing { cursor: grabbing; }
      
      .extended-card {
        scroll-snap-align: start; flex-shrink: 0; min-width: 95px; padding: 12px 10px;
        background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        border: none; border-radius: 14px; display: flex; flex-direction: column;
        align-items: center; gap: 6px; text-align: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        /* 5.3.0: fixed-height card. All data (day, date, icon, desc, max/min,
           wind, precip) fits inside the card. overflow: hidden prevents
           any content from spilling below the card border. */
        box-sizing: border-box;
        height: 220px; min-height: 220px; max-height: 220px;
        overflow: hidden; position: relative;
      }
      .extended-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22); }
      .extended-day { font-size: 14px; font-weight: 700; color: var(--text-primary); }
      .extended-date { font-size: 12px; color: var(--text-tertiary); font-weight: 600; }
      .extended-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 36px; min-height: 36px; margin: 4px 0; }
      .extended-icon .ww-icon { width: 32px; height: 32px; }
      .extended-desc {
        font-size: 10px; color: var(--text-tertiary); max-width: 85px; font-weight: 500; line-height: 1.3;
        /* 5.3.0: 2 lines max, fixed max-height. Description never grows. */
        max-height: 26px; min-height: 0; flex-shrink: 0;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden; word-break: break-word; hyphens: auto;
      }
      .extended-temps { display: flex; gap: 6px; align-items: center; }
      .extended-temps .temp-max { font-size: 16px; font-weight: 800; color: var(--text-primary); }
      .extended-temps .temp-min { font-size: 14px; color: var(--text-tertiary); font-weight: 600; }
      .extended-wind { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
      .extended-precip { font-size: 12px; color: var(--precip-light); font-weight: 700; }
      
      /* ============================================
         13. SUN & MOON (ASTRO)
         ============================================ */
      .astro-section { padding-top: 12px; }
      .astro-card {
        position: relative; overflow: hidden;
        border: 1px solid var(--glass-border); border-radius: 22px; padding: 20px;
        background: var(--glass-bg); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18);
      }
      .light-mode .astro-card { background: rgba(17, 24, 39, 0.08); box-shadow: 0 10px 30px rgba(17, 24, 39, 0.10); }
      
      .arc-container { position: relative; z-index: 1; padding: 12px 8px 6px; border: 0 !important; background: transparent !important; box-shadow: none !important; text-align: center; }
      .light-mode .arc-container { background: transparent !important; border: 0 !important; box-shadow: none !important; }
      .arc-title { font-size: 16px; font-weight: 900; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; letter-spacing: 0.2px; }
      
      .arc-svg { width: 100%; max-width: 230px; height: auto; margin: 0 auto; display: block; overflow: visible; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.22)); }
      .arc-svg text { fill: var(--text-primary); }
      .arc-svg line { stroke-width: 1.4; opacity: 0.7; }
      .arc-svg path { stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 270; stroke-dashoffset: 270; animation: wwArcDraw 1.35s cubic-bezier(0.2, 0.9, 0.2, 1) forwards, wwArcGlow 4.5s ease-in-out infinite 1.35s; }
      .sun-arc-container .arc-svg path { filter: drop-shadow(0 0 8px rgba(255, 214, 10, 0.48)) drop-shadow(0 0 18px rgba(255, 149, 0, 0.18)); }
      .moon-arc-container .arc-svg path { filter: drop-shadow(0 0 8px rgba(229, 231, 235, 0.42)) drop-shadow(0 0 18px rgba(123, 97, 255, 0.16)); }
      
      @keyframes wwArcDraw { from { stroke-dashoffset: 270; opacity: 0.25; } to { stroke-dashoffset: 0; opacity: 1; } }
      @keyframes wwArcGlow { 0%, 100% { stroke-width: 3.2; opacity: 0.88; } 50% { stroke-width: 4.2; opacity: 1; } }
      
      #sunIcon, #moonIcon {
        transform-origin: center;
        animation: wwCelestialFloat 3.8s ease-in-out infinite, wwCelestialPulse 2.6s ease-in-out infinite;
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.55)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.26));
      }
      @keyframes wwCelestialFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
      @keyframes wwCelestialPulse { 0%, 100% { opacity: 0.92; } 50% { opacity: 1; } }
      /* 10.1.1: "Poniżej horyzontu" in a normal, non-bold font (was 900) */
      #sunBelowLabel, #moonBelowLabel { font-weight: 400; opacity: 0.78; }
      
      .arc-times { width: 100%; max-width: 230px; margin: 14px auto 0; padding: 0; display: flex; justify-content: space-between; gap: 10px; border: 0 !important; background: transparent !important; box-shadow: none !important; }
      .light-mode .arc-times { background: transparent !important; border: 0 !important; }
      .arc-time { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 74px; }
      .arc-time-icon { font-size: 18px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.22)); }
      .arc-time-label { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; font-weight: 800; letter-spacing: 0.3px; opacity: 0.9; }
      .arc-time-value { font-size: 17px; font-weight: 900; color: var(--text-primary); white-space: nowrap; letter-spacing: 0.2px; }
      .arc-info { margin-top: 12px; font-size: 13px; color: var(--text-secondary); font-weight: 800; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; }
      .light-mode .arc-info { background: transparent !important; border: 0 !important; }
      
      @media (max-width: 560px) {
        .astro-card { padding: 18px 14px; grid-template-columns: 1fr; gap: 24px; }
        .arc-container { padding: 10px 4px 4px; }
        .arc-svg, .arc-times { max-width: 245px; }
        /* 10.1.1: slightly bigger gap above the Moon card when the Sun
           card stacks on top (a touch more air under the moments list).
           10.1.3: widened further (14px -> 26px) so the break between the
           last moments row ("Niebieska godzina") and the Moon chart is
           clearly visible on small screens. */
        .moon-arc-container { margin-top: 26px; }
      }
      
      /* ============================================
         14. AIR QUALITY
         ============================================ */
      .air-section { padding-top: 12px; }
      .air-card {
        background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        border: none; border-radius: 20px; padding: 20px;
        display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
      }
      @media (max-width: 420px) { .air-card { grid-template-columns: 1fr; gap: 20px; } .aqi-main { display: flex; justify-content: center; } }
      
      /* 18.2.3: dwa kólka AQI (US + EU) obok siebie */
      .aqi-circles { display: flex; gap: 24px; align-items: center; justify-content: center; }
      .aqi-circle--eu { width: 80px; height: 80px; }
      .aqi-circle--eu .aqi-value { font-size: 22px; }
      .aqi-circle--eu .aqi-label { font-size: 10px; margin-top: 2px; }
      /* 18.2.3: przycisk „Otwórz w Google" nad ramka Google w hubie */
      .google-open-bar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
      .google-open-btn { padding: 6px 14px; border-radius: 8px; border: 1px solid var(--glass-bg); background: var(--bg-secondary); color: var(--text-primary); font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity .2s ease; }
      .google-open-btn:hover { opacity: .8; }
      .aqi-circle {
        width: 100px; height: 100px; border-radius: 50%;
        background: conic-gradient(var(--aqi-color, #10b981) 0deg 270deg, var(--glass-bg) 270deg 360deg);
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        position: relative; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
      }
      .aqi-circle::before { content: ''; position: absolute; inset: 6px; background: var(--bg-secondary); border-radius: 50%; }
      .aqi-value { position: relative; font-size: 28px; font-weight: 900; color: var(--text-primary); line-height: 1; }
      .aqi-label { position: relative; font-size: 12px; font-weight: 700; color: var(--aqi-color, #10b981); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
      
      .pollutants { display: flex; flex-direction: column; gap: 12px; }
      .pollutant { display: grid; grid-template-columns: 50px 1fr 40px; align-items: center; gap: 10px; }
      .pollutant-name { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
      .pollutant-bar { height: 6px; background: var(--glass-bg); border-radius: 10px; overflow: hidden; }
      .pollutant-fill { height: 100%; background: linear-gradient(90deg, var(--accent-start), var(--accent-end)); border-radius: 10px; transition: width 0.5s ease; }
      .pollutant-value { font-size: 12px; color: var(--text-tertiary); text-align: right; font-weight: 600; }
      
      /* ============================================
         15. PANELS (Settings & Favorites)
         ============================================ */
      .settings-panel, .favorites-panel {
        position: fixed; inset: 0; z-index: 10050; pointer-events: none;
        opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
        contain: strict;
      }
      .settings-panel.active, .favorites-panel.active { pointer-events: auto; opacity: 1; visibility: visible; }
      
      .settings-overlay, .favorites-overlay {
        position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity 0.3s ease;
      }
      
      .settings-content {
        position: absolute; right: 0; top: 0; bottom: 0; width: 100%; max-width: 340px;
        background: var(--bg-secondary); box-shadow: -12px 0 50px rgba(0, 0, 0, 0.35);
        transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
        contain: layout style;
      }
      .settings-panel.active .settings-content { transform: translateX(0); }
      
      .favorites-content {
        position: absolute; left: 0; top: 0; bottom: 0; width: 100%; max-width: 320px;
        background: var(--bg-secondary); box-shadow: 12px 0 50px rgba(0, 0, 0, 0.35);
        transform: translateX(-100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
        contain: layout style;
      }
      .favorites-panel.active .favorites-content { transform: translateX(0); }
      
      .settings-header, .favorites-header {
        position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between;
        padding: 16px 20px; padding-top: calc(16px + var(--safe-area-top));
        background: var(--bg-secondary); border-bottom: 1px solid var(--glass-border); z-index: 10;
      }
      .settings-header h2, .favorites-header h2 { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
      
      .close-btn {
        width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        font-size: 20px; color: var(--text-secondary); background: var(--glass-bg); border: none;
        transition: all 0.2s ease;
      }
      .close-btn:hover { background: var(--glass-bg-strong); color: var(--text-primary); transform: rotate(90deg); }
      .close-btn:active { transform: scale(0.9) rotate(90deg); }
      .light-mode .close-btn { background: rgba(17,24,39,0.10); }
      
      .settings-body, .favorites-body { padding: 20px; padding-bottom: calc(20px + var(--safe-area-bottom)); }
      
      .favorites-section-label { margin: 14px 0 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-tertiary); }
      .favorites-list { display: flex; flex-direction: column; gap: 10px; }
      .favorite-item {
        position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
        border-radius: 16px; background: var(--glass-bg); border: 1px solid var(--glass-border);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
      }
      .favorite-item:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18); background: var(--glass-bg-strong); }
      .favorite-item.current { cursor: default; border: 2px solid var(--accent-start); background: linear-gradient(135deg, rgba(0, 212, 255, 0.12), rgba(123, 97, 255, 0.12)); }
      .favorite-item-icon { width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(135deg, rgba(0, 212, 255, 0.18), rgba(123, 97, 255, 0.18)); font-size: 18px; }
      .favorite-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
      .favorite-item-city { font-size: 15px; font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .favorite-item-region { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .favorite-item-heart { font-size: 16px; margin-left: 6px; flex-shrink: 0; }
      .favorite-item-remove {
        position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.25);
        color: #ef4444; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease;
      }
      .favorite-item-remove:hover { background: rgba(239, 68, 68, 0.20); }
      .favorite-item-remove:active { transform: scale(0.95); }
      
      .favorites-empty { text-align: center; padding: 30px 20px; }
      .favorites-empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
      .favorites-empty-text { font-size: 14px; color: var(--text-tertiary); line-height: 1.6; }
      
      .settings-group { margin-bottom: 24px; }
      .settings-group h3 { font-size: 13px; font-weight: 700; color: var(--text-tertiary); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
      .settings-options { display: flex; gap: 8px; flex-wrap: wrap; }
      
      .setting-option {
        flex: 1; min-width: 60px; padding: 12px 14px; background: var(--glass-bg);
        border: 2px solid transparent; border-radius: 12px; font-size: 14px; font-weight: 600;
        color: var(--text-secondary); text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); cursor: pointer;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .light-mode .setting-option { background: rgba(17,24,39,0.12); border-color: rgba(17,24,39,0.10); color: rgba(17,24,39,0.86); box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
      .setting-option:hover { border-color: var(--accent-start); background: var(--glass-bg-strong); box-shadow: 0 4px 16px rgba(0, 212, 255, 0.15); transform: translateY(-2px); }
      .setting-option.active { background: linear-gradient(135deg, var(--accent-start), var(--accent-end)); border-color: transparent; color: white; box-shadow: 0 16px 34px rgba(0, 212, 255, 0.30), 0 10px 24px rgba(123, 97, 255, 0.18); }
      .light-mode .setting-option.active { box-shadow: 0 18px 40px rgba(0, 212, 255, 0.26), 0 12px 26px rgba(123, 97, 255, 0.16), 0 0 0 2px rgba(17, 24, 39, 0.10) inset; }
      .setting-option:active { transform: scale(0.97); }
      
      .settings-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--glass-border); }
      .action-btn { padding: 14px 20px; border-radius: 12px; font-size: 15px; font-weight: 700; text-align: center; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border: none; cursor: pointer; }
      .refresh-btn { background: linear-gradient(135deg, var(--accent-start), var(--accent-end)); color: white; box-shadow: 0 4px 20px rgba(0, 212, 255, 0.35); }
      .refresh-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0, 212, 255, 0.45); }
      .reset-btn { background: var(--glass-bg); border: 2px solid var(--glass-border); color: var(--text-primary); }
      .light-mode .reset-btn { background: rgba(17,24,39,0.12); border-color: rgba(17,24,39,0.14); color: rgba(17,24,39,0.90); }
      .reset-btn:hover { background: #ef4444; border-color: #ef4444; color: white; box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3); }
      .settings-info { margin-top: 20px; }
      
      /* ============================================
         16. TOAST & FOOTER
         ============================================ */
      .toast {
        position: fixed; bottom: calc(28px + var(--safe-area-bottom)); left: 50%;
        transform: translateX(-50%) translateY(30px);
        background: var(--glass-bg-strong); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--glass-border); padding: 14px 28px; border-radius: 28px;
        font-size: 15px; font-weight: 600; color: var(--text-primary);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); opacity: 0; z-index: 1000;
        transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        pointer-events: none; white-space: nowrap; max-width: calc(100vw - 40px); text-align: center;
      }
      .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
      
      .footer { text-align: center; padding: 24px 16px; padding-bottom: calc(24px + var(--safe-area-bottom)); color: var(--text-tertiary); font-size: 13px; font-weight: 500; }
      .no-scroll { overflow: hidden !important; }
      
      /* ============================================
         17. WEATHER MAP
         ============================================ */
      .map-section { padding-top: 12px; }
      .map-card { background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 20px; padding: 14px; box-shadow: 0 4px 20px rgba(0,0,0,0.14); }
      .map-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 4px 2px 10px; }
      .map-tabs::-webkit-scrollbar { display: none; }
      .map-tab {
        flex: 0 0 auto; padding: 10px 12px; border-radius: 14px;
        background: var(--control-bg); color: var(--text-secondary);
        font-weight: 800; font-size: 12px; letter-spacing: 0.2px;
        border: 2px solid transparent; transition: all 0.2s ease;
      }
      .map-tab:hover { background: var(--control-bg-hover); color: var(--text-primary); }
      .map-tab.active { background: linear-gradient(135deg, var(--accent-start), var(--accent-end)); color: white; border-color: transparent; box-shadow: 0 10px 22px rgba(0, 212, 255, 0.18); }
      .map-frame-wrap { width: 100%; border-radius: 0 !important; overflow: hidden; background: rgba(0,0,0,0.10); border: 1px solid var(--glass-border); }
      .map-iframe { width: 100%; height: 420px; border: 0; display: block; border-radius: 0 !important; }
      @media (max-width: 480px) { .map-iframe { height: 360px; } }
      
      .ww-map-tools { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 12px 0; }
      .ww-map-tool-btn {
        padding: 10px 12px; border-radius: 14px; border: 1px solid var(--glass-border);
        background: var(--control-bg); color: var(--text-secondary);
        font-weight: 900; font-size: 12px;
      }
      .ww-map-tool-btn:hover { background: var(--control-bg-hover); color: var(--text-primary); }
      .ww-map-tool-btn--fullscreen { background: linear-gradient(135deg, rgba(0,212,255,0.25), rgba(123,97,255,0.25)); }
      .ww-map-tool-btn--refresh { background: linear-gradient(135deg, rgba(16,185,129,0.22), rgba(59,130,246,0.18)); }
      .light-mode .ww-map-tool-btn { color: rgba(17,24,39,0.85); border-color: rgba(17,24,39,0.14); background: rgba(17,24,39,0.10); }
      .light-mode .ww-map-tool-btn--fullscreen { background: linear-gradient(135deg, rgba(0,212,255,0.14), rgba(123,97,255,0.12)); }
      .light-mode .ww-map-tool-btn--refresh { background: linear-gradient(135deg, rgba(16,185,129,0.14), rgba(59,130,246,0.10)); }
      
      /* ============================================
         18. SVG ICONS — FILLED, COLORED, 15% BIGGER
         ============================================ */
      .ww-icon {
        width: 28px; height: 28px; min-width: 28px; min-height: 28px;
        display: block; flex-shrink: 0;
      }
      
      /* Force fill: currentColor on all SVG children */
      .ww-icon path, .ww-icon circle, .ww-icon rect, .ww-icon polygon,
      .ww-icon ellipse, .ww-icon use {
        fill: currentColor !important;
      }
      
      /* Stroke exceptions: lines that need stroke, not fill */
      .ww-icon--fog line, .ww-icon--wind path,
      .ww-icon--rain line, .ww-icon--light-rain line, .ww-icon--heavy-rain line,
      .ww-icon--sleet line, .ww-icon--thunder line,
      .ww-icon--sun line, .ww-icon--mostly-clear line,
      .ww-icon--partly-day line, .ww-icon--partly-night line {
        stroke: currentColor !important; fill: none !important;
      }
      
      /* Sun icon: no stroke on shapes */
      .ww-icon--sun path, .ww-icon--sun circle, .ww-icon--sun polygon { stroke: none !important; }
      
      /* Icon colors */
      .ww-icon--sun { color: #fbbf24; }
      .ww-icon--moon { color: #E5E7EB; }
      .ww-icon--cloud { color: rgba(255,255,255,0.92); }
      .ww-icon--fog { color: rgba(255,255,255,0.70); }
      .ww-icon--wind { color: rgba(255,255,255,0.75); }
      .ww-icon--rain { color: #3b82f6; }
      .ww-icon--snow { color: #a5f3fc; }
      .ww-icon--storm { color: #f59e0b; }
      
      /* Light mode icon colors */
      .light-mode .ww-icon--cloud { color: rgba(17,24,39,0.85); }
      .light-mode .ww-icon--fog { color: rgba(17,24,39,0.55); }
      .light-mode .ww-icon--wind { color: rgba(17,24,39,0.60); }
      .light-mode .ww-icon--rain { color: #2563eb; }
      .light-mode .ww-icon--snow { color: #0ea5e9; }
      .light-mode .ww-icon--storm { color: #d97706; }
      
      /* ============================================
         19. HUB SECTION
         ============================================ */
      .hub-section { padding-top: 12px; }
      .hub-category { margin-top: 14px; }
      .hub-category-title { display: none !important; }
      
      .hub-mainbar { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 6px 16px 10px; }
      .hub-mainbar::-webkit-scrollbar { display: none; }
      .hub-main-btn {
        flex: 0 0 auto; padding: 10px 12px; border-radius: 14px;
        background: var(--glass-bg); color: var(--text-secondary);
        font-weight: 700; font-size: 12px; border: 1px solid var(--glass-border); white-space: nowrap;
      }
      .hub-main-btn:hover { background: var(--control-bg-hover); color: var(--text-primary); }
      .hub-main-btn.active { background: linear-gradient(135deg, var(--accent-start), var(--accent-end)); color: #fff; }
      
      .hub-catbar { display: none; }
      .hub-catbar.active { display: block; }
      #hubSection .hub-catbar { display: none !important; }
      #hubSection .hub-catbar.active { display: block !important; }
      
      .hub-tabbar { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 6px 2px 10px; touch-action: auto; cursor: grab; }
      .hub-tabbar.grabbing { cursor: grabbing; }
      .hub-tabbar::-webkit-scrollbar { display: none; }
      
      #hubSection .tablinks {
        flex: 0 0 auto; padding: 10px 12px; border-radius: 14px;
        background: rgba(255,255,255,0.06); color: var(--text-secondary, #d1d5db);
        font-weight: 900; font-size: 12px; letter-spacing: 0.2px;
        border: 1px solid var(--glass-border, rgba(255,255,255,0.14));
        transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
        white-space: nowrap;
      }
      #hubSection .tablinks:hover { background: rgba(255,255,255,0.10); color: var(--text-primary, #fff); }
      #hubSection .tablinks.active {
        background: #facc15; color: #111827; border-color: #fbbf24;
        box-shadow: 0 10px 26px rgba(250, 204, 21, 0.22); font-weight: 800;
      }
      #hubSection .tablinks.active:hover { background: #fbbf24; border-color: #f59e0b; }
      #hubSection .tablinks:focus-visible { outline: 3px solid rgba(250, 204, 21, 0.55); outline-offset: 2px; }
      
      #hubSection .tabcontent { display: none; }
      #hubSection .tabcontent.active { display: block; }
      
      .hub-frames { background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: 0 4px 20px rgba(0,0,0,0.14); padding: 0 !important; margin-top: 10px; }
      #hubSection iframe { display: block; width: 100% !important; border-radius: 0 !important; background: #000; }
      #hubSection .tabcontent { margin: 0 !important; }
      #hubSection .ww-hub-toolbar { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 10px; }
      
      .ww-hub-tool {
        padding: 10px 12px; border-radius: 14px; border: 1px solid var(--glass-border);
        background: var(--control-bg); color: var(--text-secondary); font-weight: 900; font-size: 12px;
      }
      .ww-hub-tool:hover { background: var(--control-bg-hover); color: var(--text-primary); }
      .ww-hub-tool--fullscreen { background: linear-gradient(135deg, rgba(0,212,255,0.25), rgba(123,97,255,0.25)); border-color: rgba(0,212,255,0.25); }
      .ww-hub-tool--refresh { background: linear-gradient(135deg, rgba(16,185,129,0.22), rgba(59,130,246,0.18)); border-color: rgba(16,185,129,0.25); }
      .light-mode .ww-hub-tool { color: rgba(17,24,39,0.85); border-color: rgba(17,24,39,0.14); background: rgba(17,24,39,0.10); }
      .light-mode .ww-hub-tool--fullscreen { background: linear-gradient(135deg, rgba(0,212,255,0.14), rgba(123,97,255,0.12)); }
      .light-mode .ww-hub-tool--refresh { background: linear-gradient(135deg, rgba(16,185,129,0.14), rgba(59,130,246,0.10)); }
      
      .wr-units-bar, .mb-units-bar { display: flex; gap: 8px; padding: 10px 10px 0 10px; flex-wrap: wrap; justify-content: flex-end; }
      .wr-unit-btn, .mb-unit-btn {
        padding: 9px 12px; border-radius: 12px; border: 2px solid transparent;
        background: var(--control-bg); color: var(--text-secondary); font-weight: 900; font-size: 12px; cursor: pointer;
      }
      .wr-unit-btn:hover, .mb-unit-btn:hover { background: var(--control-bg-hover); color: var(--text-primary); }
      .wr-unit-btn.active, .mb-unit-btn.active { background: linear-gradient(135deg, var(--accent-start), var(--accent-end)); color: #fff; }
      
      @media (max-width: 480px) {
        .hub-frames { padding: 10px; }
        #hubSection .tablinks { padding: 9px 10px; font-size: 11px; }
      }
      
      /* ============================================
         20. FULLSCREEN OVERLAY
         ============================================ */
      .ww-fs-overlay { position: fixed; inset: 0; z-index: 999999; background: rgba(0,0,0,0.92); display: none; }
      /* 10.1.4: overlay is a flex COLUMN — a slim top bar hosts the "Zamknij"
         button and the iframe takes the REST of the height, so the button
         no longer overlaps any iframe controls (the 5.6.0 floating variant
         covered e.g. the Windy menu in the top-right corner). */
      .ww-fs-overlay.active { display: flex; flex-direction: column; }
      .ww-fs-bar { flex: 0 0 auto; display: flex; justify-content: flex-end; align-items: center; padding: calc(6px + var(--safe-area-top, 0px)) 12px 6px; background: rgba(9, 15, 29, 0.97); border-bottom: 1px solid rgba(255, 255, 255, 0.10); z-index: 3; }
      .light-mode .ww-fs-bar { background: rgba(248, 250, 252, 0.97); border-bottom: 1px solid rgba(15, 23, 42, 0.10); }
      .ww-fs-bar-right { display: flex; justify-content: flex-end; gap: 10px; }
      .ww-fs-close { padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); background: rgba(17,24,39,0.72); color: #fff; font-weight: 900; cursor: pointer; }
      .light-mode .ww-fs-close { background: rgba(17,24,39,0.10); color: rgba(17,24,39,0.92); border: 1px solid rgba(17,24,39,0.14); }
      /* 10.1.4: the body takes everything below the bar — never under it. */
      .ww-fs-body { position: relative; flex: 1 1 auto; min-height: 0; padding: 0; }
      .ww-fs-body iframe { width: 100%; height: 100%; border: 0; border-radius: 0 !important; display: block; background: #000; }
      
      #mapSection .map-card { padding: 0 !important; border-radius: 0 !important; }
      #mapSection .map-tabs { padding: 12px 12px 10px; }
      .map-frame-wrap { border-radius: 0 !important; overflow: hidden; }
      
      /* ============================================
         21. AD SECTIONS
         ============================================ */
      .ad-section { min-height: 140px; contain: layout style; }
      .ad-wrap { width: 100%; min-height: 120px; display: block; contain: layout; }
      .ad-slot.adsbygoogle { display: block; width: 100%; min-height: 120px; }
      @media (min-width: 768px) {
        .ad-section { min-height: 290px; }
        .ad-wrap { min-height: 280px; }
        .ad-slot.adsbygoogle { min-height: 280px; }
      }
      @supports (aspect-ratio: 1) { .ad-slot.adsbygoogle { aspect-ratio: auto; } }
      
      /* ============================================
         22. SEO FOOTER
         ============================================ */
      .footer-seo { padding-top: 18px; }
      .footer-seo-text { max-width: 900px; margin: 0 auto; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
      .footer-i18n { margin-top: 8px; font-size: 12px; color: var(--text-tertiary); letter-spacing: 0.2px; }
      .footer-city-links { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
      .footer-city-link { padding: 6px 10px; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-secondary); font-size: 12px; font-weight: 600; }
      .footer-city-link:hover { background: var(--glass-bg-strong); color: var(--text-primary); }
      
      /* ============================================
         23. VENTUSKY BG (experimental)
         ============================================ */
      .ventusky-bg { position: fixed; inset: 0; z-index: -3; opacity: 0.35; filter: saturate(1.1) contrast(1.05); pointer-events: none; }
      .ventusky-bg iframe { width: 100%; height: 100%; border: 0; display: block; }
      .home-page .weather-bg { display: none; }
      
      /* ============================================
         24. RESPONSIVE ADJUSTMENTS
         ============================================ */
      @media (max-width: 480px) {
        .hero-section { padding: 30px 16px; }
        .city-name { font-size: 26px; }
        .temp-value { font-size: 60px; }
        /* 5.2.5: !important required to override the critical CSS baseline */
        .weather-icon-large {
          font-size: 80px;
          width: 95px !important; height: 110px !important;
          min-width: 95px !important; min-height: 110px !important;
        }
        .weather-icon-large .ww-icon,
        .weather-icon-large > svg {
          width: 80px !important; height: 80px !important;
          min-width: 80px !important; min-height: 80px !important;
        }
        .quick-stats { gap: 6px; }
        .stat-item { min-width: 65px; padding: 10px 8px; }
        .stat-value { font-size: 16px; }
        .daily-main { grid-template-columns: 88px 1fr auto 44px auto; gap: 8px; padding: 12px 10px; }
        .daily-weather-info { gap: 8px; }
        .daily-day-name { font-size: 14px; }
        .daily-temp-max { font-size: 17px; }
        .extended-card { min-width: 85px; padding: 10px 8px; }
      }
      
      @media (max-width: 360px) {
        .temp-value { font-size: 52px; letter-spacing: -3px; }
        .temp-unit { font-size: 24px; }
        .weather-icon-large {
          font-size: 70px;
          width: 85px !important; height: 95px !important;
          min-width: 85px !important; min-height: 95px !important;
        }
        .weather-icon-large .ww-icon,
        .weather-icon-large > svg {
          width: 70px !important; height: 70px !important;
          min-width: 70px !important; min-height: 70px !important;
        }
        .hourly-card { min-width: 75px; padding: 10px 6px; }
        .hourly-temp { font-size: 17px; }
      }
      
      @media (max-width: 768px) {
        .hero-weather { width: 100%; text-align: center; align-items: center; justify-content: center; }
        .hero-weather .temperature-display { width: 100%; display: flex; justify-content: center; align-items: flex-start; text-align: center; margin-left: 0 !important; margin-right: 0 !important; transform: none !important; }
        .hero-weather .temp-value { display: inline-block; text-align: center; }
        .hero-weather .temp-unit { display: inline-block; margin-left: 4px; }
        .hero-weather .weather-icon-large, .hero-weather .feels-like, .hero-weather .weather-description { width: 100%; text-align: center; }
        .home-page .hero-location { width: 100%; }
        .home-page .hero-location .search-container { width: 95vw; max-width: 95vw; margin-left: auto; margin-right: auto; }
      }
      
      @media (min-width: 769px) {
        .home-page .section.hero-section { max-width: 900px; }
        .home-page .hero-content { max-width: 900px; }
        .home-page .hero-location { width: 100%; max-width: 850px; margin-left: auto; margin-right: auto; }
        .home-page .hero-location .search-container { width: 100%; max-width: none; }
      }
      
      /* ============================================
         25. A11Y CONTRAST FIXES
         ============================================ */
      .dark-mode .stat-label, .dark-mode .wind-unit, .dark-mode .distance-unit, .dark-mode .pressure-unit {
        color: rgba(255, 255, 255, 0.78) !important;
      }
      .dark-mode .stat-label.wind-unit { color: rgba(255, 255, 255, 0.88) !important; }
      
      .dark-mode .daily-precip-small, .dark-mode .extended-precip, .dark-mode .period-precip, .dark-mode .hourly-precip {
        color: #93c5fd !important; text-shadow: 0 1px 0 rgba(0,0,0,0.35);
      }
      .light-mode .daily-precip-small, .light-mode .extended-precip, .light-mode .period-precip, .light-mode .hourly-precip {
        color: #1d4ed8 !important;
      }
      
      .wind-unit { margin-left: 4px; opacity: 0.9; font-weight: 600; white-space: nowrap; }
      
      /* ============================================
         26. PRINT
         ============================================ */
      @media print {
        .top-bar, .loading-screen, .weather-bg, .settings-panel, .favorites-panel,
        .mobile-search-overlay, .toast, .favorite-card-remove, .daily-expand-icon, .section-action-btn { display: none !important; }
        .main-content { padding-top: 0; }
        body { background: white; color: black; }
        .hero-section { min-height: auto; padding: 20px; }
        .daily-details { max-height: none !important; overflow: visible; }
        .daily-card.expanded .daily-details { display: block; }
      }
      
      /* ============================================
         27. REDUCED MOTION
         ============================================ */
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
        .loader, .weather-icon-large { animation: none; }
        html { scroll-behavior: auto; }
        .arc-svg path, #sunIcon, #moonIcon { animation: none !important; stroke-dashoffset: 0; }
      }
      
      /* ============================================
         28. HIGH CONTRAST
         ============================================ */
      @media (prefers-contrast: high) {
        :root { --glass-bg: rgba(255, 255, 255, 0.15); --glass-border: rgba(255, 255, 255, 0.3); --text-secondary: rgba(255, 255, 255, 0.85); --text-tertiary: rgba(255, 255, 255, 0.7); }
        .light-mode { --glass-bg: rgba(0, 0, 0, 0.12); --glass-border: rgba(0, 0, 0, 0.22); --text-secondary: rgba(17, 24, 39, 0.88); --text-tertiary: rgba(17, 24, 39, 0.72); }
        .hourly-card, .daily-card, .extended-card, .favorite-card { border: 1px solid var(--glass-border); }
      }
      
      /* ============================================
         29. MOBILE SCROLL FIX
         ============================================ */
      @media (pointer: coarse) {
        .hourly-scroll, .favorites-horizontal, .extended-cards, .hub-tabbar, .map-tabs {
          touch-action: auto !important; overscroll-behavior-x: contain; overscroll-behavior-y: auto;
        }
        .hourly-card, .favorite-card, .extended-card, .daily-card, .period-card, .map-tab, #hubSection .tablinks {
          touch-action: manipulation;
        }
      }
      
      /* ============================================
         30. CONTENT VISIBILITY (perf)
         ============================================ */
      @supports (content-visibility: auto) {
        #mapSection, #hubSection, .extended-section, .air-section, .astro-section, #meteogramSection, #tipsSection, #dailySection, #astroStatsSection {
          content-visibility: auto; contain-intrinsic-size: auto 400px;
        }
      }
/* ============================================
   5.2.9: IFRAME REFRESH ON CLICK
   ============================================ */
.iframe-refreshable {
  cursor: pointer !important;
  transition: opacity 0.2s ease, transform 0.2s ease;
  position: relative;
}
.iframe-refreshable:hover {
  opacity: 0.95;
  transform: scale(1.001);
  outline: 2px solid rgba(0, 212, 255, 0.35);
  outline-offset: -2px;
}
.iframe-refreshable:active {
  opacity: 0.7;
}
/* Subtelna animacja po kliknięciu (reload) */
@keyframes ww-iframe-refresh-pulse {
  0% { opacity: 0.4; }
  50% { opacity: 0.85; }
  100% { opacity: 1; }
}
.iframe-refreshable.refreshing {
  animation: ww-iframe-refresh-pulse 0.5s ease-out;
}

/* ============================================
   5.3.0/5.5.7: IFRAME TOOLBAR (Refresh button per iframe)
   ============================================
   The .iframe-toolbar and .iframe-refresh-btn classes were added in
   5.3.0 and removed in 5.5.7 because they duplicated the existing
   "Refresh" button (next to the "Fullscreen" button) already rendered
   by initHubFullscreenButtons() in app.js. The remaining "Refresh"
   button now does a real F5 via iframe.contentWindow.location.reload()
   with a cross-origin cache-buster fallback. */


/* 5.5.7 — premium 10-day meteogram */
.meteogram-section{overflow:hidden}.meteogram-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}.meteogram-tabs::-webkit-scrollbar{display:none}.meteogram-tab{appearance:none;white-space:nowrap;border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--text-secondary);border-radius:999px;padding:8px 13px;font:600 13px/1 system-ui,-apple-system,Segoe UI,sans-serif;cursor:pointer;transition:.18s ease}.meteogram-tab:hover,.meteogram-tab.active{color:#fff;border-color:#38bdf8;background:linear-gradient(135deg,#0e7490,#2563eb);box-shadow:0 5px 18px rgba(37,99,235,.25)}.meteogram-chart-wrap{position:relative;height:430px;padding:8px 8px 2px;border:1px solid var(--glass-border);border-radius:16px;background:linear-gradient(135deg,rgba(15,23,42,.46),rgba(30,41,59,.18));overflow:hidden}.light-mode .meteogram-chart-wrap{background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(226,232,240,.65))}.meteogram-chart-wrap canvas{display:block;width:100%;height:calc(100% - 26px)}.meteogram-legend{height:20px;text-align:center;color:var(--text-tertiary);font:600 11px/20px system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.01em}@media(max-width:600px){.meteogram-chart-wrap{height:360px;padding:6px 2px 2px}.meteogram-tab{padding:8px 11px;font-size:12px}}
/* 5.5.7 — non-obstructive touch / pointer tooltip for the interactive meteogram */
.meteogram-tooltip{display:none;position:absolute;z-index:4;min-width:178px;max-width:calc(100% - 12px);padding:10px 12px;border:1px solid rgba(125,211,252,.45);border-radius:12px;background:rgba(8,18,38,.93);box-shadow:0 12px 30px rgba(2,6,23,.4);backdrop-filter:blur(10px);color:#e8f2ff;font:12px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;pointer-events:none}.light-mode .meteogram-tooltip{background:rgba(255,255,255,.96);color:#162033;border-color:rgba(2,132,199,.38)}.meteogram-tooltip strong{display:block;margin:0 0 6px;font-size:12px}.meteogram-tooltip div{display:flex;align-items:baseline;justify-content:space-between;gap:14px}.meteogram-tooltip span{color:#9db0c8}.light-mode .meteogram-tooltip span{color:#526176}.meteogram-tooltip b{font-weight:700;white-space:nowrap}.meteogram-chart-wrap canvas{touch-action:pan-y;cursor:crosshair}
/* 5.5.7 — non-obstructive touch / pointer tooltip for the interactive meteogram */
.meteogram-tooltip{display:none;position:absolute;z-index:4;min-width:178px;max-width:calc(100% - 12px);padding:10px 12px;border:1px solid rgba(125,211,252,.45);border-radius:12px;background:rgba(8,18,38,.93);box-shadow:0 12px 30px rgba(2,6,23,.4);backdrop-filter:blur(10px);color:#e8f2ff;font:12px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;pointer-events:none}.light-mode .meteogram-tooltip{background:rgba(255,255,255,.96);color:#162033;border-color:rgba(2,132,199,.38)}.meteogram-tooltip strong{display:block;margin:0 0 6px;font-size:12px}.meteogram-tooltip div{display:flex;align-items:baseline;justify-content:space-between;gap:14px}.meteogram-tooltip span{color:#9db0c8}.light-mode .meteogram-tooltip span{color:#526176}.meteogram-tooltip b{font-weight:700;white-space:nowrap}.meteogram-chart-wrap canvas{touch-action:pan-y;cursor:crosshair}
/* 5.5.7 — non-obstructive touch / pointer tooltip for the interactive meteogram */
.meteogram-tooltip{display:none;position:absolute;z-index:4;min-width:178px;max-width:calc(100% - 12px);padding:10px 12px;border:1px solid rgba(125,211,252,.45);border-radius:12px;background:rgba(8,18,38,.93);box-shadow:0 12px 30px rgba(2,6,23,.4);backdrop-filter:blur(10px);color:#e8f2ff;font:12px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;pointer-events:none}.light-mode .meteogram-tooltip{background:rgba(255,255,255,.96);color:#162033;border-color:rgba(2,132,199,.38)}.meteogram-tooltip strong{display:block;margin:0 0 6px;font-size:12px}.meteogram-tooltip div{display:flex;align-items:baseline;justify-content:space-between;gap:14px}.meteogram-tooltip span{color:#9db0c8}.light-mode .meteogram-tooltip span{color:#526176}.meteogram-tooltip b{font-weight:700;white-space:nowrap}.meteogram-chart-wrap canvas{touch-action:pan-y;cursor:crosshair}
/* 5.5.7 — responsive side-by-side astronomy and persistent meteogram panel */
@media (min-width: 720px){.astro-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}.arc-container{min-width:0}}
.meteogram-tooltip{pointer-events:auto;padding-top:26px}.meteogram-tooltip-close{position:absolute;top:6px;right:7px;width:19px;height:19px;border:0;border-radius:50%;background:rgba(148,163,184,.22);color:inherit;font:700 17px/17px system-ui;cursor:pointer}.meteogram-tooltip-close:hover{background:rgba(56,189,248,.34)}
/* 5.5.7 premium sunrise / sunset glyphs */
.arc-time-icon--premium{width:28px;height:28px;display:grid;place-items:center}.arc-time-icon--premium svg{width:28px;height:28px;fill:none;stroke:#ffd43b;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 4px rgba(245,158,11,.42))}.arc-time-icon--premium svg path:last-child{stroke:#fb923c}.light-mode .arc-time-icon--premium svg{stroke:#eab308}
/* 5.5.7 premium filled solar badges + readable period cards */
.arc-time-icon--premium svg{fill:#fbbf24;stroke:#92400e;stroke-width:1.4}.arc-time-icon--premium svg circle{fill:#fde047;stroke:#f59e0b;stroke-width:1.8}.arc-time-icon--premium svg path:last-child{stroke:#fff7ed;stroke-width:3.2}.meteogram-tooltip-selected{color:#38bdf8!important;font-weight:800}.meteogram-tooltip-selected b{color:#38bdf8}.period-card{min-width:0;overflow:visible}.period-desc{line-clamp:unset!important;-webkit-line-clamp:unset!important;overflow:visible!important;min-height:36px}.period-details{flex-wrap:wrap;gap:5px}.period-wind{white-space:nowrap}@media(max-width:560px){.period-card{min-height:230px!important;height:auto!important}.period-desc{min-height:54px}.period-details{font-size:11px}.period-wind{max-width:100%;overflow:visible}}
/* 5.5.7 premium astronomy statistics */
/* 8.0.0: astro stats is a REAL .section (same 900px card + header as every
   other section). The two panels live in .astro-premium-stats-grid inside. */
.astro-premium-stats{margin-top:16px}.astro-premium-stats-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}.astro-stats-panel{border:1px solid var(--glass-border);border-radius:16px;padding:14px;background:rgba(15,23,42,.2)}.astro-stats-panel h3{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--text-primary)}.astro-stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.astro-stats-grid>div{display:grid;grid-template-columns:20px 1fr auto;gap:5px;align-items:center;padding:7px;border-radius:9px;background:rgba(148,163,184,.09);font-size:11px}.astro-stats-grid span{color:var(--text-secondary);min-width:0}.astro-stats-grid b{color:var(--text-primary);white-space:nowrap}@media(max-width:720px){.astro-premium-stats-grid{grid-template-columns:1fr}.astro-stats-grid{grid-template-columns:1fr}}
/* 5.5.7 deliberately distinct filled sunrise / sunset pictograms */
.astro-sunrise svg{fill:#fde047;stroke:#b45309}.astro-sunrise svg path:last-child{stroke:#2563eb}.astro-sunset svg{fill:#fb923c;stroke:#9a3412}.astro-sunset svg path:last-child{stroke:#dc2626}.astro-sunset svg circle{fill:#fb923c;stroke:#ea580c}
/* 5.5.7 moon statistics: a clean single-column reading order */
.astro-premium-stats-grid>.astro-stats-panel:nth-child(2) .astro-stats-grid{grid-template-columns:1fr}.astro-premium-stats-grid>.astro-stats-panel:nth-child(2) .astro-stats-grid>div{min-height:38px}
/* 5.5.7 period cards reserve a real description area instead of overlapping details */
.period-card{display:flex!important;flex-direction:column!important;min-height:250px!important;height:auto!important}.period-desc{position:static!important;flex:1 1 auto!important;min-height:58px!important;margin:8px 0!important;overflow-wrap:anywhere}.period-details{position:static!important;margin-top:auto!important;padding-top:7px!important;border-top:1px solid var(--glass-border)}@media(max-width:560px){.period-card{min-height:285px!important}.period-desc{min-height:82px!important;line-height:1.35!important}.period-details{display:flex!important;min-height:40px!important}}
/* 5.5.7 equal-height responsive day-period cards */
.day-periods{align-items:stretch!important;grid-auto-rows:1fr}.day-periods>.period-card{height:100%!important;box-sizing:border-box}@media(max-width:560px){.day-periods{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:stretch!important}.day-periods>.period-card{min-height:300px!important}}
/* 5.6.0 weather alerts section (LibreWXR / WMO CAP) */
/* 5.6.2: premium responsive alerts frame */
.alerts-section{position:relative}
.alerts-list{display:flex;flex-direction:column;gap:clamp(8px,1.4vw,14px)}
.alert-card{position:relative;overflow:hidden;border-radius:16px;padding:clamp(11px,2.2vw,18px) clamp(12px,2.4vw,20px);background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--glass-border);border-left:6px solid #6B7280;box-shadow:0 8px 30px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .18s ease,box-shadow .18s ease}
.alert-card:hover{transform:translateY(-1px);box-shadow:0 12px 34px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.08)}
.alert-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(107,114,128,.12),transparent 55%);pointer-events:none}
.alert-severity-extreme::before{background:linear-gradient(180deg,rgba(127,29,29,.34),transparent 60%)}
.alert-severity-severe::before{background:linear-gradient(180deg,rgba(239,68,68,.22),transparent 60%)}
.alert-severity-moderate::before{background:linear-gradient(180deg,rgba(249,115,22,.20),transparent 60%)}
.alert-severity-minor::before{background:linear-gradient(180deg,rgba(245,158,11,.16),transparent 60%)}
.alerts-title-text{display:inline-block;vertical-align:middle}
.alert-severity-extreme{border-left-color:#7F1D1D}
.alert-severity-severe{border-left-color:#EF4444}
.alert-severity-moderate{border-left-color:#F97316}
.alert-severity-minor{border-left-color:#F59E0B}
.alert-severity-unknown{border-left-color:#6B7280}
.alert-card-head{position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.alert-badge{flex:0 0 auto;font-size:clamp(10px,1.6vw,11.5px);font-weight:800;text-transform:uppercase;letter-spacing:.45px;padding:3px 11px;border-radius:999px;color:#fff;background:#6B7280;box-shadow:0 2px 10px rgba(0,0,0,.30)}
.alert-severity-extreme .alert-badge{background:linear-gradient(135deg,#991b1b,#7F1D1D)}
.alert-severity-severe .alert-badge{background:linear-gradient(135deg,#f87171,#EF4444)}
.alert-severity-moderate .alert-badge{background:linear-gradient(135deg,#fb923c,#F97316)}
.alert-severity-minor .alert-badge{background:linear-gradient(135deg,#fbbf24,#F59E0B);color:#1f2937}
.alert-severity-unknown .alert-badge{background:#6B7280}
.alert-event{position:relative;font-weight:800;font-size:clamp(14px,2.4vw,17px);color:var(--text-primary);min-width:0;letter-spacing:.005em}
.alert-headline{position:relative;margin-top:6px;font-size:clamp(12.5px,2vw,14.5px);line-height:1.5;color:var(--text-secondary)}
.alert-meta{position:relative;margin-top:8px;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:clamp(11px,1.8vw,12.5px);color:var(--text-tertiary)}
.alert-desc{position:relative;margin:8px 0 0;font-size:clamp(12.5px,2vw,14.5px);line-height:1.6;color:var(--text-secondary);white-space:pre-line;overflow-wrap:anywhere}
.alert-desc.collapsed{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
/* 10.1.4: smaller "Źródło: LibreWXR / WMO CAP" caption (user request) */
#alertsSection .alerts-source{font-size:11px;font-weight:500;letter-spacing:.01em;opacity:.85}
.alert-toggle{position:relative;margin-top:8px;padding:4px 0;background:none;border:none;color:#38bdf8;font-weight:700;font-size:13px;cursor:pointer}
.alert-toggle:hover{text-decoration:underline}
.light-mode .alert-card{background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(241,245,249,.72));box-shadow:0 8px 26px rgba(15,23,42,.12),inset 0 1px 0 rgba(255,255,255,.7)}
.light-mode .alert-toggle{color:#0369a1}
@media(max-width:560px){.alert-card{border-left-width:5px}.alert-card-head{gap:8px}}

/* ============================================================
   5.6.2: TAB BAR GESTURES — drag-scroll (mouse+finger),
   long-press drag-to-reorder, premium edge-fade when scrollable
   ============================================================ */
#mapTabs,
#imwRadarTabs,
#meteogramTabs,
#hubMainBar,
#hubSection .hub-tabbar{
  position:relative;
  flex-wrap:nowrap!important;
  align-items:stretch;
  overscroll-behavior-x:contain;
  scroll-behavior:auto;
}
#mapTabs .map-tab,
#imwRadarTabs .imw-radar-tab,
#meteogramTabs .meteogram-tab,
#hubMainBar .hub-main-btn,
#hubSection .hub-tabbar .tablinks{
  flex:0 0 auto;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
/* Premium edge-fade, only while the bar actually overflows. */
.ww-tb-gestures.ww-tb-scrollable{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
}
.ww-tb-reordering{cursor:grabbing}
.ww-tb-reordering .map-tab,
.ww-tb-reordering .meteogram-tab,
.ww-tb-reordering .hub-main-btn,
.ww-tb-reordering .tablinks{cursor:grabbing}
/* Lifted tab while dragging (pointer-events off so slots under it react). */
#mapTabs .map-tab.ww-tb-drag,
#imwRadarTabs .imw-radar-tab.ww-tb-drag,
#meteogramTabs .meteogram-tab.ww-tb-drag,
#hubMainBar .hub-main-btn.ww-tb-drag,
#hubSection .tablinks.ww-tb-drag{
  position:relative;
  z-index:60;
  cursor:grabbing;
  pointer-events:none;
  box-shadow:0 12px 30px rgba(0,0,0,.48);
  filter:brightness(1.12);
  transition:box-shadow .12s ease,filter .12s ease;
  will-change:transform;
}
/* Siblings making room for the dragged tab (FLIP) + the drop snap. */
.ww-tb-shift{transition:transform .22s cubic-bezier(.2,.7,.3,1)!important}
#mapTabs .map-tab.ww-tb-drop,
#imwRadarTabs .imw-radar-tab.ww-tb-drop,
#meteogramTabs .meteogram-tab.ww-tb-drop,
#hubMainBar .hub-main-btn.ww-tb-drop,
#hubSection .tablinks.ww-tb-drop{
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important;
}
@media (prefers-reduced-motion:reduce){
  .ww-tb-shift,#mapTabs .map-tab.ww-tb-drop,#imwRadarTabs .imw-radar-tab.ww-tb-drop,#meteogramTabs .meteogram-tab.ww-tb-drop,
  #hubMainBar .hub-main-btn.ww-tb-drop,#hubSection .tablinks.ww-tb-drop{transition:none!important}
}

/* ============================================================
   5.6.4: UNIFIED TAB LOOK — every tab uses the meteogram-tab
   typography/pill style; the Hub main category buttons stay the
   same family but visually LARGER (they are the primary tabs of
   the Hub section).
   ============================================================ */
#mapTabs .map-tab,
#meteogramTabs .meteogram-tab,
#hubSection .hub-tabbar .tablinks,
#hubMainBar .hub-main-btn{
  font:600 13px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.01em;
  white-space:nowrap;
  appearance:none;
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  color:var(--text-secondary);
  border-radius:999px;
  padding:8px 13px;
  transition:.18s ease;
}
#mapTabs .map-tab:hover,
#meteogramTabs .meteogram-tab:hover,
#hubSection .hub-tabbar .tablinks:hover,
#hubMainBar .hub-main-btn:hover{color:var(--text-primary);border-color:#38bdf8}
#mapTabs .map-tab.active,
#meteogramTabs .meteogram-tab.active,
#hubSection .hub-tabbar .tablinks.active,
#hubMainBar .hub-main-btn.active{
  color:#fff;
  border-color:#38bdf8;
  background:linear-gradient(135deg,#0e7490,#2563eb);
  box-shadow:0 5px 18px rgba(37,99,235,.25);
}
#mapTabs .map-tab.active:hover,
#meteogramTabs .meteogram-tab.active:hover,
#hubSection .hub-tabbar .tablinks.active:hover,
#hubMainBar .hub-main-btn.active:hover{
  color:#fff;
  border-color:#38bdf8;
  background:linear-gradient(135deg,#0e7490,#2563eb);
}
#mapTabs .map-tab:focus-visible,
#meteogramTabs .meteogram-tab:focus-visible,
#hubSection .hub-tabbar .tablinks:focus-visible,
#hubMainBar .hub-main-btn:focus-visible{outline:3px solid rgba(56,189,248,.55);outline-offset:2px}

/* Hub main category tabs = primary navigation of the Hub -> bigger. */
#hubMainBar .hub-main-btn{
  font-size:15px;
  font-weight:700;
  padding:10px 19px;
}
@media(max-width:600px){
  #hubMainBar .hub-main-btn{font-size:14px;padding:9px 16px}
}

/* ============================================================
   5.7.0: HUB LOWER TABS — amber ACTIVE restored (!important)
   The 5.6.4 unification made every tab blue-cyan; the user asked
   for the pre-5.6.4 yellow active look of the Hub iframe tabs.
   ============================================================ */
#hubSection .hub-tabbar .tablinks.active{
  background:#facc15!important;
  color:#111827!important;
  border-color:#fbbf24!important;
  box-shadow:0 5px 18px rgba(250,204,21,.28);
}
#hubSection .hub-tabbar .tablinks.active:hover{
  background:#fbbf24!important;
  border-color:#f59e0b!important;
  color:#111827!important;
}
#hubSection .hub-tabbar .tablinks:focus-visible{
  outline:3px solid rgba(250,204,21,.55)!important;
  outline-offset:2px;
}

/* ============================================================
   5.7.0: PREMIUM DAY RIBBON (Sunrise-Sunset.org v2)
   0-24h track: night | astro twilight | civil twilight | day |
   civil twilight | astro twilight, key moment markers with
   local times and a live "now" needle.
   ============================================================ */
.astro-dayline{
  margin:10px 2px 2px;
  padding:0 2px;
}
.astro-dayline-track{
  position:relative;
  height:14px;
  border-radius:999px;
  overflow:hidden;
  background:linear-gradient(180deg,#0b1226,#131a33);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.04);
}
.astro-dayline-seg{position:absolute;top:0;bottom:0;display:block;}
.astro-dayline-seg.seg-astro{
  background:linear-gradient(180deg,#1e2a52,#2a3763);
}
.astro-dayline-seg.seg-twilight{
  background:linear-gradient(180deg,#7c4dff66,#ff8a3d55),linear-gradient(180deg,#3b2a63,#5b3a4d);
}
.astro-dayline-seg.seg-day{
  background:linear-gradient(180deg,#ffd76a,#ffb340 55%,#ff9a2e);
  box-shadow:0 0 14px rgba(255,179,64,.55);
}
.astro-dayline-now{
  position:absolute;top:-3px;bottom:-3px;width:0;
  border-left:2px solid #fff;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.8));
  z-index:5;
}
.astro-dayline-now i{
  position:absolute;top:-4px;left:-5px;width:8px;height:8px;border-radius:50%;
  background:#fff;box-shadow:0 0 8px rgba(255,255,255,.9),0 0 2px #fff;
  display:block;
}
/* 10.1.1: dots-only marks. The printed captions under the bar always
   collided — dawn/sunrise and sunset/dusk are only ~2.5% of the day
   apart, and even two staggered rows with edge nudges still overlapped.
   The captions are gone entirely: every dot carries the full
   "Label · HH:MM" in its title tooltip (hover/long-press), and the
   exact hours live in the ordered .astro-moments list below the bar. */
.astro-dayline-marks{
  position:relative;
  height:16px;
  margin-top:6px;
}
.astro-dayline-mark{
  position:absolute;top:50%;
  transform:translate(-50%,-50%);
  pointer-events:auto;
}
.astro-dayline-mark i{
  width:6px;height:6px;border-radius:50%;
  background:var(--text-tertiary,#8ea0c0);
  box-shadow:0 0 4px rgba(140,170,255,.35);
  display:block;
}
.astro-dayline-mark.mark-key i{
  width:9px;height:9px;
  background:#ffd76a;
  box-shadow:0 0 8px rgba(255,215,106,.9),0 0 2px #ffb340;
}
/* 10.1.3: sunrise/sunset captions pinned EXACTLY under their dayline
   points (label line + hour line beneath). Only these two points get
   captions — they sit ~64% of the day apart, so overlap is impossible.
   Emitter clamps the position to 6..94% for polar latitudes. */
.astro-dayline-caps{
  position:relative;
  height:30px;
  margin-top:3px;
}
.astro-dayline-cap{
  position:absolute;top:0;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:1px;
  text-align:center;
  white-space:nowrap;
}
.astro-dayline-cap-l{
  font:500 10px/1.15 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.02em;
  color:var(--text-secondary,#b9c4da);
}
.astro-dayline-cap-t{
  font:600 11px/1.15 system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--text-primary,#fff);
}
.astro-dayline-cap-t span{font:inherit;color:inherit;white-space:nowrap}

/* 5.7.0: moment chips under the sun chart.
   10.1.1: replaced by an ORDERED stats list (.astro-moments) styled like
   the Główne statystyki rows (.astro-stats-grid): icon + label on the
   left, hour on the right, stacked. DOM order: first light, dawn, solar
   noon, dusk, last light — then golden hour and blue hour as full-width
   rows (.astro-moment--wide) at the very bottom. */
.astro-moments{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:14px;
}
.astro-moment{
  display:grid;
  grid-template-columns:20px 1fr auto;
  gap:5px;
  align-items:center;
  padding:7px 8px;
  border-radius:9px;
  background:rgba(148,163,184,.09);
  font-size:11px;
}
.astro-moment--wide{grid-column:1/-1}
.astro-moment-ico{font-size:14px;line-height:1;text-align:center;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.astro-moment-lbl{
  font-weight:500;
  color:var(--text-secondary,#b9c4da);
  min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.astro-moment b{
  font-weight:400;
  font-size:12px;
  color:var(--text-primary,#fff);
  white-space:nowrap;
}
.astro-moment b span{font:inherit;color:inherit;white-space:nowrap}
.astro-moment-sep{opacity:.5;margin:0 2px;font-weight:400}
@media(max-width:720px){
  .astro-moments{grid-template-columns:1fr}
}

/* 5.7.0: data source attribution at the very bottom of the astro card */
.astro-credit{
  margin-top:10px;
  text-align:center;
  font:500 11px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--text-tertiary,#8ea0c0);
  opacity:.85;
}
.astro-credit a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}
.astro-credit a:hover{color:var(--text-primary,#fff)}

/* ============================================================
   5.7.0: REORDER COACHMARK — one-time animated hint teaching
   "press & hold a tab to reorder". CSS/SVG-only animation,
   no external assets, persisted in localStorage.
   ============================================================ */
.ww-reorder-hint{
  position:fixed;
  z-index:99998;
  max-width:320px;
  width:calc(100vw - 32px);
  padding:12px 14px 10px;
  border-radius:18px;
  border:1px solid rgba(56,189,248,.35);
  background:linear-gradient(160deg,rgba(13,20,38,.96),rgba(23,32,56,.94));
  box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03) inset,0 0 24px rgba(56,189,248,.12);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:#e7ecf7;
  opacity:0;
  transform:translateY(10px) scale(.97);
  transition:opacity .28s ease,transform .28s cubic-bezier(.2,.9,.3,1.2);
  pointer-events:auto;
}
.ww-reorder-hint.show{
  opacity:1;
  transform:translateY(0) scale(1);
}
.ww-reorder-hint::after{
  content:'';
  position:absolute;
  width:14px;height:14px;
  left:var(--arrow-x,30px);
  background:inherit;
  border-left:1px solid rgba(56,189,248,.35);
  border-top:1px solid rgba(56,189,248,.35);
}
.ww-reorder-hint.arrow-top::after{
  top:-8px;
  transform:rotate(45deg);
}
.ww-reorder-hint.arrow-bottom::after{
  bottom:-8px;
  transform:rotate(225deg);
}
.ww-reorder-hint-demo{
  position:relative;
  height:44px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  margin-bottom:10px;
}
.ww-reorder-hint-pill{
  position:absolute;top:9px;
  height:26px;border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
}
.ww-reorder-hint-pill.p1{left:12px;width:74px}
.ww-reorder-hint-pill.p2{left:96px;width:92px}
.ww-reorder-hint-pill.p3{left:198px;width:64px}
.ww-reorder-hint-drag{
  position:absolute;top:9px;left:96px;width:92px;height:26px;
  border-radius:999px;
  background:linear-gradient(135deg,#0e7490,#2563eb);
  border:1px solid #38bdf8;
  box-shadow:0 8px 18px rgba(37,99,235,.35);
  animation:wwHintDrag 2.6s cubic-bezier(.45,0,.25,1) infinite;
  z-index:2;
}
.ww-reorder-hint-finger{
  position:absolute;
  width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#9ec9ff 60%,#5aa2ff);
  box-shadow:0 0 0 4px rgba(120,180,255,.25),0 4px 10px rgba(0,0,0,.4);
  animation:wwHintFinger 2.6s cubic-bezier(.45,0,.25,1) infinite;
  z-index:3;
  left:138px;top:13px;
}
.ww-reorder-hint-finger::after{
  content:'';
  position:absolute;inset:-7px;border-radius:50%;
  border:2px solid rgba(140,200,255,.7);
  animation:wwHintRing 2.6s ease-out infinite;
}
@keyframes wwHintFinger{
  0%,8%{transform:scale(.6);opacity:0}
  16%{transform:scale(1);opacity:1}
  24%{transform:scale(.85);opacity:1}
  56%{transform:scale(.85) translateX(-84px);opacity:1}
  64%{transform:scale(1) translateX(-84px);opacity:1}
  78%{transform:scale(1) translateX(-84px);opacity:1}
  92%,100%{transform:scale(.6) translateX(-84px);opacity:0}
}
@keyframes wwHintRing{
  0%,18%{transform:scale(.4);opacity:0}
  24%{transform:scale(1);opacity:.9}
  40%{transform:scale(1.25);opacity:0}
  100%{transform:scale(1.25);opacity:0}
}
@keyframes wwHintDrag{
  0%,24%{transform:translateX(0)}
  56%,76%{transform:translateX(-84px)}
  92%,100%{transform:translateX(0)}
}
.ww-reorder-hint-text{
  font:600 13px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#dbe4f4;
  margin:0 0 10px;
}
.ww-reorder-hint-actions{display:flex;justify-content:flex-end;gap:8px}
.ww-reorder-hint-ok{
  appearance:none;border:none;cursor:pointer;
  padding:7px 16px;border-radius:999px;
  font:700 12.5px system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#04121f;
  background:linear-gradient(135deg,#67e8f9,#38bdf8);
  box-shadow:0 6px 16px rgba(56,189,248,.35);
  transition:transform .15s ease,filter .15s ease;
}
.ww-reorder-hint-ok:hover{transform:translateY(-1px);filter:brightness(1.08)}
.ww-reorder-hint-ok:active{transform:translateY(0)}
.ww-reorder-hint-close{
  position:absolute;top:6px;right:8px;
  width:24px;height:24px;border-radius:50%;
  border:none;cursor:pointer;
  background:transparent;color:#93a4c4;
  font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,color .15s ease;
}
.ww-reorder-hint-close:hover{background:rgba(255,255,255,.08);color:#fff}
@media(prefers-reduced-motion:reduce){
  .ww-reorder-hint-drag,.ww-reorder-hint-finger,.ww-reorder-hint-finger::after{animation:none}
  .ww-reorder-hint-finger{opacity:0}
  .ww-reorder-hint-drag{transform:translateX(-84px)}
}

/* ============================================================
   10.0.0: SECTION LAYOUT PERSONALIZATION
   Per-user reorder + hide of every weather section (ads stay
   untouched). 6-dot grip per section (drag reorder / trash to
   hide / tap menu) + top-bar "Section layout" modal with
   checkboxes, arrows and a full reset. No frames are added to
   sections — only a subtle dashed outline WHILE dragging.
   ============================================================ */
.ww-sec-anchor{position:relative}
.ww-sec-user-hidden{display:none!important}

.ww-sec-grip{
  position:absolute;
  top:9px;
  right:9px;
  z-index:46;
  width:27px;height:27px;
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;
  border:1px solid var(--glass-border,rgba(255,255,255,.10));
  background:var(--glass-bg,rgba(255,255,255,.05));
  color:var(--text-tertiary,#8ea0c0);
  cursor:grab;
  opacity:.45;
  padding:0;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:opacity .16s ease,color .16s ease,border-color .16s ease,transform .16s ease,background .16s ease;
}
.ww-sec-grip:hover,.ww-sec-grip:focus-visible{
  opacity:1;
  color:var(--text-primary,#fff);
  border-color:#38bdf8;
  background:rgba(56,189,248,.12);
  transform:translateY(-1px);
  outline:none;
}
.ww-sec-grip:active{cursor:grabbing}
.ww-sec-dragging-active,.ww-sec-dragging-active *{cursor:grabbing!important}

/* The section being dragged — the ONLY time a frame appears. */
.ww-sec-drag{
  z-index:70;
  opacity:.97;
  outline:1.5px dashed rgba(56,189,248,.8);
  outline-offset:7px;
  border-radius:22px;
  box-shadow:0 26px 70px rgba(0,0,0,.55),0 0 0 9999px rgba(6,10,25,.18);
  transition:box-shadow .15s ease,outline-color .15s ease!important;
  will-change:transform;
}
.ww-sec-flip{transition:transform .26s cubic-bezier(.2,.75,.3,1)!important}

/* Trash drop-zone shown while a section is dragged */
#wwSecTrash{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translate(-50%,18px) scale(.96);
  z-index:100001;
  display:flex;align-items:center;gap:9px;
  padding:11px 20px;
  border-radius:999px;
  border:1px solid rgba(248,113,113,.45);
  background:linear-gradient(160deg,rgba(90,18,24,.94),rgba(64,14,20,.92));
  color:#fecaca;
  font:700 13px system-ui,-apple-system,"Segoe UI",sans-serif;
  box-shadow:0 16px 44px rgba(0,0,0,.5),0 0 0 0 rgba(248,113,113,0);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease,transform .25s cubic-bezier(.2,.9,.3,1.2),box-shadow .2s ease,border-color .2s ease;
}
#wwSecTrash.show{opacity:1;transform:translate(-50%,0) scale(1)}
#wwSecTrash.hot{
  border-color:#ef4444;
  transform:translate(-50%,0) scale(1.06);
  box-shadow:0 16px 44px rgba(0,0,0,.5),0 0 30px rgba(239,68,68,.45);
  color:#fff;
}
.ww-sec-trash-ico{font-size:16px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}

/* Grip tap menu (up / down / hide) */
.ww-sec-menu{
  position:absolute;
  z-index:100000;
  min-width:186px;
  padding:6px;
  border-radius:15px;
  border:1px solid rgba(56,189,248,.3);
  background:linear-gradient(165deg,rgba(13,20,38,.97),rgba(22,32,56,.95));
  box-shadow:0 16px 46px rgba(0,0,0,.55);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:flex;flex-direction:column;gap:2px;
}
.ww-sec-menu button{
  appearance:none;border:none;cursor:pointer;
  background:transparent;
  text-align:left;
  padding:9px 12px;
  border-radius:10px;
  font:600 13px system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#d7e1f3;
  transition:background .14s ease,color .14s ease;
}
.ww-sec-menu button:hover{background:rgba(56,189,248,.14);color:#fff}
.ww-sec-menu button.danger{color:#fca5a5}
.ww-sec-menu button.danger:hover{background:rgba(239,68,68,.16);color:#fecaca}

/* ---------- Layout modal ---------- */
.ww-layout-overlay{
  position:fixed;inset:0;
  z-index:100002;
  display:flex;align-items:center;justify-content:center;
  padding:18px;
  background:rgba(5,9,20,.62);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  opacity:0;
  transition:opacity .24s ease;
}
.ww-layout-overlay.show{opacity:1}
.ww-layout-panel{
  width:min(440px,100%);
  max-height:82vh;
  display:flex;flex-direction:column;
  border-radius:22px;
  border:1px solid rgba(56,189,248,.28);
  background:linear-gradient(170deg,rgba(14,22,42,.97),rgba(19,29,54,.96));
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 26px rgba(56,189,248,.10);
  overflow:hidden;
  transform:translateY(12px) scale(.97);
  transition:transform .26s cubic-bezier(.2,.9,.3,1.15);
}
.ww-layout-overlay.show .ww-layout-panel{transform:translateY(0) scale(1)}
.ww-layout-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.ww-layout-head h2{
  margin:0;
  font:700 16px system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#f2f6ff;
  letter-spacing:.01em;
}
.ww-layout-close{
  width:30px;height:30px;border-radius:11px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:#a9b6d2;font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.ww-layout-close:hover{background:rgba(239,68,68,.18);color:#fecaca;border-color:rgba(248,113,113,.5)}
.ww-layout-list{
  overflow-y:auto;
  padding:10px 12px;
  display:flex;flex-direction:column;gap:7px;
  scrollbar-width:thin;
}
.ww-layout-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.035);
  transition:border-color .15s ease,background .15s ease;
}
.ww-layout-row:hover{border-color:rgba(56,189,248,.35);background:rgba(56,189,248,.07)}
.ww-layout-row-grip{
  width:22px;height:22px;flex:0 0 22px;
  display:flex;align-items:center;justify-content:center;
  color:#6d7ea3;
}
.ww-layout-row-check{position:relative;flex:0 0 auto;cursor:pointer;display:flex;align-items:center}
.ww-layout-row-check input{position:absolute;opacity:0;width:0;height:0}
.ww-layout-row-check i{
  width:38px;height:22px;border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);
  position:relative;display:block;
  transition:background .18s ease,border-color .18s ease;
}
.ww-layout-row-check i::after{
  content:'';
  position:absolute;top:2px;left:2px;
  width:16px;height:16px;border-radius:50%;
  background:#94a3c4;
  transition:transform .2s cubic-bezier(.2,.8,.3,1.2),background .18s ease;
}
.ww-layout-row-check input:checked + i{
  background:linear-gradient(135deg,#0e7490,#2563eb);
  border-color:#38bdf8;
}
.ww-layout-row-check input:checked + i::after{transform:translateX(16px);background:#fff}
.ww-layout-row-check input:focus-visible + i{outline:2px solid rgba(56,189,248,.6);outline-offset:2px}
.ww-layout-row-name{
  flex:1 1 auto;min-width:0;
  font:600 13.5px system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#e6edfb;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ww-layout-row-btns{display:flex;gap:5px;flex:0 0 auto}
.ww-layout-row-btns button{
  width:28px;height:28px;border-radius:9px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:#b9c4de;font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .14s ease,color .14s ease,border-color .14s ease,transform .14s ease;
}
.ww-layout-row-btns button:hover{background:rgba(56,189,248,.16);color:#fff;border-color:#38bdf8;transform:translateY(-1px)}
.ww-layout-foot{
  padding:12px 16px 14px;
  border-top:1px solid rgba(255,255,255,.07);
}
.ww-layout-reset{
  width:100%;
  padding:10px 14px;border-radius:13px;
  border:1px solid rgba(248,113,113,.4);
  background:rgba(239,68,68,.10);
  color:#fca5a5;
  font:700 13px system-ui,-apple-system,"Segoe UI",sans-serif;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.ww-layout-reset:hover{background:rgba(239,68,68,.20);color:#fecaca;border-color:#ef4444}
@media(max-width:480px){
  .ww-layout-panel{max-height:88vh}
  .ww-sec-grip{top:8px;right:8px}
}
@media(prefers-reduced-motion:reduce){
  .ww-layout-overlay,.ww-layout-panel,#wwSecTrash,.ww-sec-flip{transition:none!important}
}

/* ============================================================
   8.0.0: PREMIUM POLISH PACK
   (1) Section grips pin to ONE consistent spot — the absolute
       top-right corner of the section — and headers of gripped
       sections reserve space so subtitles/actions ("Następne 60
       minut", "Zarządzaj", map tools…) never slide under the grip.
   (2) Sun & Moon typography: the section title is the only bold
       voice; values, captions and info lines use normal weight.
   ============================================================ */
/* 10.1.1: the 44px header reservation was REMOVED together with the
   per-section grips — subtitles are flush at the right edge again. */

/* --- Sun & Moon: normal-weight content, bold only in the section title --- */
#astroSection .arc-title{font-weight:500}
#astroSection .arc-time-label{font-weight:500}
#astroSection .arc-time-value{font-weight:400}
#astroSection .arc-info{font-weight:400}
#astroSection .astro-credit{font-weight:400}
#astroSection .astro-credit b,#astroSection .astro-credit strong{font-weight:500}

/* ==========================================================================
   13.0.2 — TIME PAGE (time.php)
   Premium styles for the "current time for any city" page that
   mirrors the weather page's shell. The page reuses .section /
   .section-header / .section-title for the layout and adds
   below a focused set of tokens: the hero (big live clock +
   analog dial), the time-data grid (ISO/RFC/Unix/Julian), the
   sun-times card, the world-clocks strip, the calendar block
   with countdowns, the DST chip, and the swap button.
   ========================================================================== */

body.ww-page-time { background: var(--bg-primary, #0a0e27); }

/* Body[data-page="time"]: when the page is the time page,
   suppress the weather-only loading screen flash (the
   initial paint is already the time hero with the live clock
   in its first frame). */
body.ww-page-time .loading-screen { background: var(--bg-primary, #0a0e27); }

/* Swap button (top-bar) — sits LEFT of the 6-dots layout button.
   Identical to the other icon-btn entries; the icon is chosen
   by app.js (clock vs sun) based on the current page. */
#swapPageBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
#swapPageBtn:hover { transform: translateY(-1px); background: rgba(255,255,255,.08); }
#swapPageBtn:active { transform: translateY(0); }

/* Time hero — same glassmorphism tokens as the weather hero, but
   with a left/right grid: big live clock on the left, analog dial
   on the right. On narrow screens the grid collapses to a single
   column and the dial sits below the clock. */
.time-hero-section {
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(0,212,255,.06), rgba(124,77,255,.04));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  margin: 16px 0;
  position: relative;
  overflow: hidden;
}
.time-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 400px at 80% -20%, rgba(0,212,255,.18), transparent 60%);
  pointer-events: none;
}
.time-hero-section .section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.time-hero-section .section-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
  background: linear-gradient(120deg, #00d4ff, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.time-hero-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: rgba(219,234,254,.62);
}
.time-hero-meta .time-hero-tz { font-weight: 500; color: rgba(219,234,254,.85); }
.time-hero-meta .time-hero-offset { color: rgba(0,212,255,.75); font-weight: 500; }

.time-hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 720px) {
  .time-hero-grid { grid-template-columns: 1fr; justify-items: center; }
}
.time-hero-wx {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 6px; min-height: 36px;
}
.time-hero-wx-ico { width: 36px; height: 36px; flex: 0 0 36px; }
.time-hero-wx-ico .ww-icon, .time-hero-wx-ico svg { width: 36px !important; height: 36px !important; }
.time-hero-wx-temp { font-size: 28px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ww-clock-wx-wind { display: none; }
.meteogram-chart-wrap.meteogram-overview { height: 480px; }
@media (max-width: 600px) { .meteogram-chart-wrap.meteogram-overview { height: 420px; } }
.time-hero-clock {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.time-hero-big {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(48px, 8vw, 76px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  color: #e2e8f0;
  text-shadow: 0 0 24px rgba(0,212,255,.18);
  font-variant-numeric: tabular-nums;
}
.time-hero-compact {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  color: rgba(167,184,212,.55);
  letter-spacing: .04em;
}
.time-hero-date {
  font-size: 15px;
  color: rgba(219,234,254,.78);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin-top: 4px;
}
.time-hero-date #timeHeroWeekday { color: #00d4ff; font-weight: 600; }
.time-hero-date #timeHeroYear { color: rgba(167,184,212,.7); }

.time-hero-dial {
  width: clamp(180px, 30vw, 240px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.time-analog-clock {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 14px rgba(0,212,255,.18));
}
.ww-analog-clock .ww-clock-face { fill: none; stroke: rgba(167,184,212,.25); stroke-width: 1; }
.ww-analog-clock .ww-clock-ticks-minor line { stroke: rgba(167,184,212,.32); stroke-width: .5; }
.ww-analog-clock .ww-clock-ticks-major line { stroke: rgba(226,232,240,.72); stroke-width: 1.3; }
.ww-analog-clock .ww-clock-numeral {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  font-weight: 600;
  fill: rgba(226,232,240,.85);
}
.ww-analog-clock .ww-clock-hand {
  stroke-linecap: round;
  transform-origin: 50% 50%;
}
.ww-analog-clock .ww-clock-hand-hour { stroke: #00d4ff; stroke-width: 2.4; }
.ww-analog-clock .ww-clock-hand-minute { stroke: #e2e8f0; stroke-width: 1.7; }
.ww-analog-clock .ww-clock-hand-second { stroke: #fb7185; stroke-width: 1; opacity: .85; }
.ww-analog-clock .ww-clock-pivot { fill: #00d4ff; }

/* Time data grid (ISO / RFC / Unix / Julian / ISO week / day of year) */
.time-data-section,
.time-calendar-section,
.time-sun-section,
.time-world-section,
.time-compare-section,
.time-tools-section {
  padding: 16px 20px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  margin: 14px 0;
}
.time-data-section .section-title,
.time-calendar-section .section-title,
.time-sun-section .section-title,
.time-world-section .section-title,
.time-compare-section .section-title,
.time-tools-section .section-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px;
  color: rgba(219,234,254,.92);
}
.time-data-grid,
.time-calendar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 18px;
}
.time-data-grid > div,
.time-calendar-grid > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255,255,255,.025);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.04);
}
.time-data-grid > div span,
.time-calendar-grid > div span {
  color: rgba(167,184,212,.7);
  font-size: 13px;
}
.time-data-grid > div b,
.time-calendar-grid > div b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 500;
  color: #e2e8f0;
  text-align: right;
  word-break: break-all;
  font-variant-numeric: tabular-nums;
}

/* Sun times card */
.time-sun-card {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 12px 16px;
}
.time-sun-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  padding: 6px 0;
}
.time-sun-row + .time-sun-row { border-top: 1px solid rgba(255,255,255,.04); }
.time-sun-cell {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
}
.time-sun-cell span { color: rgba(167,184,212,.7); }
.time-sun-cell b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px;
  font-weight: 600;
  color: #ffd166;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 540px) {
  .time-sun-row { grid-template-columns: 1fr; }
}

/* World clocks list — current city first, then 5 reference cities */
.time-world-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.ww-clock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 10px;
  gap: 10px;
}
.ww-clock-row.is-local {
  background: rgba(0,212,255,.07);
  border-color: rgba(0,212,255,.3);
  box-shadow: 0 0 0 1px rgba(0,212,255,.2) inset;
}
.ww-clock-row-left { min-width: 0; }
.ww-clock-row-name {
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ww-clock-row.is-local .ww-clock-row-name::before {
  content: '● ';
  color: #00d4ff;
  font-size: 10px;
}
.ww-clock-row-tz {
  font-size: 11px;
  color: rgba(167,184,212,.65);
  margin-top: 2px;
}
.ww-clock-row-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 20px;
  font-weight: 600;
  color: #00d4ff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.ww-clock-row.is-local .ww-clock-row-time { color: #ffd166; }
.time-world-empty { color: rgba(167,184,212,.6); font-size: 13px; }

/* DST chip — visual distinction for the active/standard state */
#timeDstActive[data-dst="1"] {
  color: #fb7185;
  font-weight: 600;
}
#timeDstActive[data-dst="0"] {
  color: rgba(167,184,212,.7);
}

/* Time-page main content — slightly tighter container than the
   weather page (the time page is single-column and the
   sections are short). */
.main-content-time { max-width: 1100px; margin: 0 auto; }

/* Light-mode adjustments (the time page is theme-aware). */
html.light-mode body.ww-page-time { background: #f4f6fa; }
html.light-mode .time-hero-section {
  background: linear-gradient(135deg, rgba(0,153,204,.05), rgba(124,77,255,.03));
  border-color: rgba(0,0,0,.06);
}
html.light-mode .time-data-section,
html.light-mode .time-calendar-section,
html.light-mode .time-sun-section,
html.light-mode .time-world-section {
  background: rgba(255,255,255,.7);
  border-color: rgba(0,0,0,.05);
}
html.light-mode .time-data-grid > div,
html.light-mode .time-calendar-grid > div,
html.light-mode .time-sun-card,
html.light-mode .ww-clock-row {
  background: rgba(255,255,255,.85);
  border-color: rgba(0,0,0,.05);
}
html.light-mode .time-hero-big { color: #14213d; text-shadow: none; }
html.light-mode .time-hero-compact { color: rgba(20,33,61,.55); }
html.light-mode .time-hero-date { color: rgba(20,33,61,.78); }
html.light-mode .time-hero-date #timeHeroWeekday { color: #0091b1; }
html.light-mode .time-hero-date #timeHeroYear { color: rgba(20,33,61,.55); }
html.light-mode .time-hero-meta { color: rgba(20,33,61,.55); }
html.light-mode .time-hero-meta .time-hero-tz { color: rgba(20,33,61,.85); }
html.light-mode .time-hero-meta .time-hero-offset { color: #0091b1; }
html.light-mode .time-data-section .section-title,
html.light-mode .time-calendar-section .section-title,
html.light-mode .time-sun-section .section-title,
html.light-mode .time-world-section .section-title { color: #14213d; }
html.light-mode .time-data-grid > div span,
html.light-mode .time-calendar-grid > div span { color: rgba(20,33,61,.6); }
html.light-mode .time-data-grid > div b,
html.light-mode .time-calendar-grid > div b { color: #14213d; }
html.light-mode .time-sun-cell span { color: rgba(20,33,61,.6); }
html.light-mode .time-sun-cell b { color: #b8700a; }
html.light-mode .ww-clock-row-name { color: #14213d; }
html.light-mode .ww-clock-row-tz { color: rgba(20,33,61,.55); }
html.light-mode .ww-clock-row-time { color: #00688a; }
html.light-mode .ww-clock-row.is-local .ww-clock-row-time { color: #b8700a; }
html.light-mode .ww-analog-clock .ww-clock-face { stroke: rgba(20,33,61,.18); }
html.light-mode .ww-analog-clock .ww-clock-ticks-minor line { stroke: rgba(20,33,61,.25); }
html.light-mode .ww-analog-clock .ww-clock-ticks-major line { stroke: rgba(20,33,61,.55); }
html.light-mode .ww-analog-clock .ww-clock-numeral { fill: rgba(20,33,61,.8); }
html.light-mode .ww-analog-clock .ww-clock-hand-hour { stroke: #00688a; }
html.light-mode .ww-analog-clock .ww-clock-hand-minute { stroke: #14213d; }
html.light-mode .ww-analog-clock .ww-clock-hand-second { stroke: #b8456a; }
html.light-mode .ww-analog-clock .ww-clock-pivot { fill: #00688a; }

/* 13.1.1 time page extras */
.time-world-toolbar { position: relative; margin: 0 0 12px; }
.time-world-search-wrap { position: relative; }
.ww-clock-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--glass-bg, rgba(255,255,255,.06)); margin-bottom: 8px; cursor: grab; }
.ww-clock-row.is-local { outline: 1px solid var(--accent-start, #00d4ff); cursor: default; }
.ww-clock-row.is-dragging { opacity: .6; }
.ww-clock-row-time { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.ww-clock-remove { margin-left: 8px; border: 0; background: transparent; color: inherit; cursor: pointer; opacity: .7; }
.time-month-cal { margin-bottom: 16px; }
.time-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.time-cal-head button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--glass-border, rgba(255,255,255,.12)); background: var(--glass-bg, rgba(255,255,255,.06)); color: inherit; cursor: pointer; }
.time-cal-wd, .time-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.time-cal-wd span { text-align: center; font-size: 12px; opacity: .75; padding: 4px 0; }
.time-cal-wd .sat { color: #60a5fa; }
.time-cal-wd .sun { color: #f87171; }
.time-cal-day { min-height: 38px; border-radius: 10px; border: 1px solid transparent; background: var(--glass-bg, rgba(255,255,255,.04)); color: inherit; cursor: pointer; }
.time-cal-day.sat { color: #60a5fa; }
.time-cal-day.sun { color: #f87171; }
.time-cal-day.today { box-shadow: inset 0 0 0 1px var(--accent-start, #00d4ff); }
.time-cal-day.selected { background: rgba(0,212,255,.18); font-weight: 700; }
.time-cal-day.empty { opacity: 0; pointer-events: none; }

.time-hero-ampm { font-size: 18px; font-weight: 700; opacity: .85; margin-top: 4px; }
.ww-clock-row-name { font-size: 17px; font-weight: 700; }
.ww-clock-row-tz { font-size: 14px; opacity: .85; margin-top: 2px; }
.ww-clock-row-time { font-size: 18px; font-weight: 600; color: #fff; }
html.light-mode .ww-clock-row-time { color: #14213d; }
.time-cal-day.holiday { background: rgba(250,204,21,.18); font-weight: 700; }
.time-holiday-hint { margin: 8px 0 12px; padding: 8px 12px; border-radius: 10px; background: var(--glass-bg, rgba(255,255,255,.06)); }
.time-tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .time-tools-grid { grid-template-columns: 1fr; } }
.time-tool-card { padding: 14px; border-radius: 16px; background: var(--glass-bg, rgba(255,255,255,.05)); border: 1px solid var(--glass-border, rgba(255,255,255,.1)); }
.time-tool-card h3 { margin: 0 0 10px; font-size: 16px; }
.time-tool-display { font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 800; margin-bottom: 10px; }
.time-tool-inputs { display: flex; gap: 10px; margin-bottom: 10px; }
.time-tool-inputs input { width: 64px; padding: 6px; border-radius: 8px; border: 1px solid var(--glass-border, rgba(255,255,255,.15)); background: transparent; color: inherit; }
.time-tool-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.time-sw-laps { margin: 10px 0 0; padding-left: 18px; max-height: 160px; overflow: auto; }
.time-compare-cols { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
@media (max-width: 800px) {
  .time-compare-cols { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
.time-compare-col { padding: 12px; border-radius: 14px; background: var(--glass-bg, rgba(255,255,255,.05)); border: 1px solid var(--glass-border, rgba(255,255,255,.1)); }
.time-compare-name { font-weight: 700; font-size: 16px; }
.time-compare-clock { font-size: 22px; font-weight: 800; color: #fff; margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
html.light-mode .time-compare-clock { color: #14213d; }
.time-compare-day { text-transform: capitalize; opacity: .85; }
.time-compare-diff, .time-compare-tz { font-size: 13px; opacity: .8; margin-top: 4px; }

/* 13.1.1: time page premium typography + contrast (same tokens as weather) */
body.ww-page-time {
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
body.ww-page-time .section-title {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: unset;
  font-family: inherit;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.ww-page-time .section-title svg {
  flex-shrink: 0;
  color: var(--text-primary);
}
body.ww-page-time .time-sun-cell span,
body.ww-page-time .time-calendar-grid span,
body.ww-page-time .time-calendar-grid > div span {
  color: var(--text-secondary) !important;
}
body.ww-page-time .time-sun-cell b,
body.ww-page-time .time-calendar-grid b,
body.ww-page-time .time-calendar-grid > div b {
  color: var(--text-primary) !important;
}
body.ww-page-time .ww-clock-row-name,
body.ww-page-time .time-compare-name,
body.ww-page-time .time-tool-card h3,
body.ww-page-time .time-tool-display,
body.ww-page-time .time-compare-clock,
body.ww-page-time .time-hero-ampm,
body.ww-page-time .footer-seo h2,
body.ww-page-time .footer-seo p,
body.ww-page-time .time-holiday-hint,
body.ww-page-time .time-compare-day,
body.ww-page-time .time-compare-diff,
body.ww-page-time .time-compare-tz {
  color: var(--text-primary);
}
body.ww-page-time .ww-clock-row-tz,
body.ww-page-time .time-compare-day,
body.ww-page-time .time-compare-diff,
body.ww-page-time .time-compare-tz {
  color: var(--text-secondary);
}
body.ww-page-time .ww-clock-row-time,
body.ww-page-time .time-compare-clock {
  color: var(--text-primary) !important;
}
body.ww-page-time .time-hero-big {
  color: var(--text-primary);
  -webkit-text-fill-color: unset;
}
body.ww-page-time .time-cal-head strong,
body.ww-page-time .time-cal-head button,
body.ww-page-time .time-cal-day {
  color: var(--text-primary);
}
body.ww-page-time .time-tool-actions .ww-map-tool-btn {
  color: var(--text-primary);
}
body.ww-page-time .favorites-section .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body.ww-page-time .time-calendar-grid > div {
  color: var(--text-primary);
}

/* 13.1.1 */
.time-world-section .section-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.time-world-list {
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.time-world-list::-webkit-scrollbar { width: 0; height: 0; display: none; }
.ww-clock-row { display:flex; align-items:center; gap:12px; }
.ww-clock-mini { width:52px; height:52px; flex:0 0 52px; }
.ww-clock-mini .ww-analog-clock, .ww-clock-mini svg { width:52px; height:52px; }
.ww-clock-row-name { color: #7dd3fc !important; font-weight: 700; letter-spacing: .01em; }
html.light-mode .ww-clock-row-name { color: #0369a1 !important; }
.ww-clock-row-cont { font-size: 11px; color: var(--text-tertiary, rgba(167,184,212,.65)); margin-top: 1px; font-weight: 500; }
.ww-clock-row-right { display:flex; align-items:center; gap:8px; margin-left:auto; }
.time-compare-col.is-base {
  border: 1px solid rgba(0,212,255,.55) !important;
  box-shadow: 0 0 0 1px rgba(0,212,255,.18), 0 8px 24px rgba(0,212,255,.08);
  background: linear-gradient(180deg, rgba(0,212,255,.10), rgba(255,255,255,.03));
}
.time-compare-col.is-dragging { opacity: .55; }
.time-calendar-grid > div { display:flex; flex-direction:column; gap:6px; }
.time-calendar-grid > div span {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--text-secondary) !important;
}
.time-calendar-grid > div b {
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #fff !important;
  font-family: inherit !important;
}
html.light-mode .time-calendar-grid > div b { color: #111827 !important; }
.time-cal-day.selected { background: transparent !important; }
.time-steppers { display:flex; gap:14px; flex-wrap:wrap; }
.time-step { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:14px; background: rgba(255,255,255,.04); border: 1px solid var(--glass-border, rgba(255,255,255,.1)); }
.time-step input {
  width: 52px; text-align:center; font-weight:700; font-size:16px;
  border:0; background:transparent; color: var(--text-primary);
  -moz-appearance:textfield;
}
.time-step input::-webkit-outer-spin-button, .time-step input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.time-step-unit { font-size:13px; font-weight:700; color: var(--text-secondary); min-width: 1.1em; }
.time-step-btn {
  width:32px; height:32px; border-radius:10px; border:0; cursor:pointer;
  background: linear-gradient(180deg, rgba(0,212,255,.28), rgba(124,77,255,.22));
  color:#fff; font-size:18px; font-weight:700; line-height:1;
  box-shadow: 0 4px 12px rgba(0,212,255,.16);
}
.time-step-btn:hover { filter: brightness(1.08); }
.time-mute-btn { min-width: 44px; }

/* 14.0.0: 9 world clocks — all visible, wrap, no horizontal scroll */
.time-world-section { overflow: visible; }
.time-world-carousel { position: relative; }
.time-world-nav { display: none !important; }
.time-world-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px !important;
  overflow: visible !important;
  max-height: none !important;
  padding: 2px 0 4px;
  touch-action: auto;
}
.ww-clock-row {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 148px !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 12px 22px 10px 10px !important;
  margin: 0 !important;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
@media (max-width: 640px) {
  .time-world-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; }
  .ww-clock-row { min-height: 136px !important; padding: 10px 20px 8px 8px !important; }
}
@media (max-width: 380px) {
  .time-world-list { grid-template-columns: 1fr 1fr; }
}
.time-sun-cell b { font-size: 13px !important; }
.ww-clock-row-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ww-clock-mini { width: 44px; height: 44px; flex: 0 0 44px; }
.ww-clock-mini .ww-analog-clock, .ww-clock-mini svg { width: 44px; height: 44px; }
.ww-clock-row-left {
  flex: 1 1 auto;
  min-width: 0;
}
.ww-clock-row-name {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word;
  line-height: 1.2;
  font-size: 14px !important;
}
.ww-clock-row-cont { font-size: 11px; line-height: 1.2; }
.ww-clock-row-tz {
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
  font-size: 11px !important;
  line-height: 1.25;
  margin-top: 3px;
}
.ww-clock-row-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-left: 0 !important;
  width: 100%;
}
.ww-clock-row-time {
  font-size: 16px !important;
  letter-spacing: -.02em;
}
.ww-clock-remove {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 8px;
  background: rgba(239,68,68,.14);
  color: #f87171 !important;
}

/* 14.0.0: X = sam znak, prawy górny róg */
.ww-clock-row-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  max-height: 2.4em;
}
.ww-clock-row,
.time-compare-col {
  position: relative !important;
}
.ww-clock-row .ww-clock-remove,
.time-compare-col .ww-clock-remove {
  position: absolute !important;
  top: 2px !important;
  right: 4px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: #fff !important;
  opacity: .92;
  z-index: 3;
}
html.light-mode .ww-clock-row .ww-clock-remove,
html.light-mode .time-compare-col .ww-clock-remove {
  color: #111827 !important;
}

/* 13.1.2: settings close X always visible */
.settings-header, .favorites-header {
  position: sticky;
  top: 0;
  z-index: 20;
}
.close-btn {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px;
  font-size: 22px !important;
  font-weight: 700;
  color: var(--text-primary) !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  flex-shrink: 0;
  z-index: 30;
}
html.light-mode .close-btn {
  background: rgba(17,24,39,.10) !important;
  border-color: rgba(17,24,39,.18) !important;
  color: #111827 !important;
}

/* 13.1.2: compact timer steppers in one row */
.time-steppers {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: stretch;
}
.time-step {
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 6px !important;
  gap: 4px !important;
}
.time-step input {
  width: 36px !important;
  font-size: 14px !important;
  padding: 2px 0;
}
.time-step-unit { font-size: 11px !important; }
.time-step-btn {
  width: 24px !important;
  height: 24px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
}
@media (max-width: 520px) {
  .time-steppers { flex-wrap: wrap; }
  .time-step { flex: 1 1 30%; }
}
etch;
}
.time-step {
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 6px !important;
  gap: 4px !important;
}
.time-step input {
  width: 36px !important;
  font-size: 14px !important;
  padding: 2px 0;
}
.time-step-unit { font-size: 11px !important; }
.time-step-btn {
  width: 24px !important;
  height: 24px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
}
@media (max-width: 520px) {
  .time-steppers { flex-wrap: wrap; }
  .time-step { flex: 1 1 30%; }
}
nt;
}
@media (max-width: 520px) {
  .time-steppers { flex-wrap: wrap; }
  .time-step { flex: 1 1 30%; }
}

/* 14.0.0 world-clock compact weather + health */
.ww-clock-wx {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px; font-size: 12px; line-height: 1.2;
  color: var(--text-secondary); min-height: 22px;
}
.ww-clock-wx-ico { width: 22px; height: 22px; flex: 0 0 22px; }
.ww-clock-wx-ico .ww-icon, .ww-clock-wx-ico svg { width: 22px !important; height: 22px !important; }
.ww-clock-wx-temp { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ww-clock-wx-desc { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.ww-clock-wx-wind { font-variant-numeric: tabular-nums; white-space: nowrap; opacity: .85; }
.time-health-section { overflow: visible; }
.ww-health-body { display: flex; flex-direction: column; gap: 16px; }
.ww-health-group {
  padding: 12px 14px; border-radius: 14px;
  background: var(--glass-bg, rgba(255,255,255,.05));
  border: 1px solid var(--glass-border, rgba(255,255,255,.1));
}
.ww-health-group h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.ww-health-q { margin: 0 0 10px; font-size: 13px; color: var(--text-secondary); }
.ww-health-row {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center;
  padding: 7px 4px; border-top: 1px solid rgba(255,255,255,.06); font-size: 13px;
}
.ww-health-row:first-of-type { border-top: 0; }
.ww-health-ico { font-size: 15px; line-height: 1; filter: grayscale(1); opacity: .8; text-align: center; }
.ww-health-name { color: var(--text-primary); font-weight: 600; }
.ww-health-lv { font-weight: 700; font-size: 12px; letter-spacing: .02em; }
.ww-health-name { color: var(--text-primary); font-weight: 650; }
.ww-health-row[data-lv="none"] .ww-health-lv { color: #ffffff; text-shadow: 0 1px 0 rgba(0,0,0,.45); }
html.light-mode .ww-health-row[data-lv="none"] .ww-health-lv { color: #0f172a; text-shadow: none; }
.ww-health-row[data-lv="low"] .ww-health-lv { color: #86efac; }
html.light-mode .ww-health-row[data-lv="low"] .ww-health-lv { color: #047857; }
.ww-health-row[data-lv="moderate"] .ww-health-lv { color: #fbbf24; }
html.light-mode .ww-health-row[data-lv="moderate"] .ww-health-lv { color: #b45309; }
.ww-health-row[data-lv="high"] .ww-health-lv,
.ww-health-row[data-lv="very_high"] .ww-health-lv,
.ww-health-row[data-lv="peak"] .ww-health-lv { color: #f87171; }
html.light-mode .ww-health-row[data-lv="high"] .ww-health-lv,
html.light-mode .ww-health-row[data-lv="very_high"] .ww-health-lv,
html.light-mode .ww-health-row[data-lv="peak"] .ww-health-lv { color: #b91c1c; }
.ww-health-row[data-lv="great"] .ww-health-lv { color: #bef264; } /* lime */
html.light-mode .ww-health-row[data-lv="great"] .ww-health-lv { color: #4d7c0f; }
.ww-health-row[data-lv="good"] .ww-health-lv { color: #4ade80; }
html.light-mode .ww-health-row[data-lv="good"] .ww-health-lv { color: #15803d; }
.ww-health-row[data-lv="poor"] .ww-health-lv { color: #f87171; }
html.light-mode .ww-health-row[data-lv="poor"] .ww-health-lv { color: #b91c1c; }
.ww-health-row.is-off[data-lv="none"] .ww-health-lv { color: #ffffff; }
html.light-mode .ww-health-row.is-off[data-lv="none"] .ww-health-lv { color: #0f172a; }
.meteogram-icon-overlay { position:absolute; left:0; right:0; top:0; bottom:28px; pointer-events:none; }
.meteogram-icon-overlay .mg-ico { position:absolute; transform:translate(-50%,-50%); width:14px; height:14px; }
html.light-mode .meteogram-icon-overlay .mg-ico { filter: drop-shadow(0 0 1px rgba(15,23,42,.55)) drop-shadow(0 1px 1px rgba(15,23,42,.35)); }
.meteogram-tooltip-desc { margin: 2px 0 6px; }
.meteogram-tooltip-desc.meteogram-tooltip-selected { color:#38bdf8!important; font-weight:800; }
.meteogram-legend { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center; height:auto; min-height:22px; padding:4px 0 2px; }
.mg-leg { display:inline-flex; align-items:center; gap:6px; color:var(--text-secondary); font:600 11px/1 system-ui,sans-serif; }
.mg-leg-line { width:18px; height:0; border-top:2.5px solid #ff2d2d; display:inline-block; }
.mg-leg-bar { width:10px; height:12px; background:rgba(57,169,255,.75); display:inline-block; border-radius:2px; }
.mg-leg-wind { font-size:13px; line-height:1; }
.ww-health-src { font-size: 11px; color: var(--text-tertiary); margin: 4px 2px 0; }
html.light-mode .ww-health-row { border-top-color: rgba(17,24,39,.08); }

/* 14.0.6: ustawienia / ulubione NAD top-barem (X nie może być zasłonięty) */
.settings-panel, .favorites-panel { z-index: 10050 !important; }
.settings-header, .favorites-header {
  padding-top: calc(12px + var(--safe-area-top, 0px));
}

/* 14.0.7 */
.time-hero-head { flex-direction: column !important; align-items: center !important; text-align: center; gap: 10px !important; }
.time-hero-head .section-title { text-align: center; width: 100%; }
.time-hero-wx {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; margin: 4px 0 2px; min-height: 0;
}
.time-hero-wx-ico { width: 64px; height: 64px; flex: 0 0 64px; }
.time-hero-wx-ico .ww-icon, .time-hero-wx-ico svg { width: 64px !important; height: 64px !important; }
.time-hero-wx-temp { font-size: 42px; font-weight: 800; line-height: 1; color: var(--text-primary); }
.time-hero-wx-desc { font-size: 15px; font-weight: 600; color: var(--text-secondary); }
@media (max-width: 720px) {
  .meteogram-icon-overlay .mg-ico { width: 12px; height: 12px; }
}
.settings-panel, .favorites-panel { contain: none !important; z-index: 10050 !important; }
.settings-header { overflow: visible !important; }
.close-btn {
  display: flex !important; visibility: visible !important; opacity: 1 !important;
  position: relative; z-index: 40;
}
#closeSettingsFooter { width: 100%; }

/* 14.0.9 meteogram overview pan + hidden scrollbar */
.meteogram-chart-wrap { overflow: hidden; }
.meteogram-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  height: calc(100% - 28px);
  -ms-overflow-style: none;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}
.meteogram-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.meteogram-scroll-inner { position: relative; height: 100%; min-width: 100%; }
.meteogram-chart-wrap.meteogram-overview canvas {
  display: block;
  height: 100% !important;
}
.meteogram-icon-overlay {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none;
}
.meteogram-icon-overlay .mg-ico { width: 16px; height: 16px; }
.meteogram-tooltip-desc {
  display: flex !important; align-items: center; gap: 8px; justify-content: flex-start !important;
}
.mg-tip-ico { width: 22px; height: 22px; flex: 0 0 22px; display: inline-flex; }
.mg-tip-ico svg, .mg-tip-ico .ww-icon { width: 22px !important; height: 22px !important; }
html.light-mode .mg-tip-ico { filter: drop-shadow(0 0 1px rgba(15,23,42,.45)); }

/* 14.1.0: overview pan */
.meteogram-chart-wrap.meteogram-overview canvas,
.meteogram-chart-wrap.meteogram-overview .meteogram-icon-overlay {
  pointer-events: none;
}
.meteogram-scroll {
  overflow-x: scroll !important;
  cursor: grab;
  touch-action: pan-x;
}
.meteogram-scroll:active { cursor: grabbing; }
.search-item-text small { white-space: normal; line-height: 1.3; }

/* 14.1.6 */
.meteogram-tooltip-desc { display:flex !important; align-items:center; justify-content:space-between !important; gap:12px; }
.meteogram-tooltip-desc .mg-tip-ico { margin-left:auto; }
.time-hero-compact, .time-hero-ampm { display:none !important; }
.time-hero-date { margin-top: 10px; }
.ww-clock-row-name { cursor: pointer; text-decoration: none; }
.ww-clock-row-name:hover { text-decoration: underline; }

/* 14.1.7 taller forecast cards + extra stats */
.hourly-card {
  height: auto !important;
  min-height: 210px !important;
  max-height: none !important;
  min-width: 88px !important;
  padding-bottom: 8px !important;
  overflow: visible !important;
}
.hourly-desc { max-height: 32px !important; flex: 0 0 auto !important; }
.card-stats {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin-top: 4px; width: 100%;
}
.card-stat {
  font-size: 10px; font-weight: 600; color: var(--text-tertiary);
  line-height: 1.25; white-space: nowrap;
}
.hourly-card.current .card-stat { color: rgba(255,255,255,.92) !important; }
.card-stat-mm { color: var(--precip-light, #39a9ff); }
.card-stat-pop { color: var(--precip-light, #39a9ff); }
.day-hourly-scroll {
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 12px 14px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.day-hourly-scroll::-webkit-scrollbar { display: none; }
.extended-card {
  height: auto !important;
  min-height: 240px !important;
  max-height: none !important;
  overflow: visible !important;
}
.daily-extra { flex-wrap: wrap; gap: 6px; }

.day-hourly-scroll {
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none;
  cursor: grab;
  touch-action: pan-x;
}
.day-hourly-scroll.grabbing { cursor: grabbing; }
.day-hourly-scroll::-webkit-scrollbar { display: none !important; width: 0; height: 0; }
.daily-details { overflow-x: hidden; }

/* 14.2.7: calendar stats as compact horizontal bars matching Statystyki dnia */
.time-calendar-bars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 16px;
}
@media (min-width: 640px) {
  .time-calendar-bars { grid-template-columns: 1fr 1fr; }
}
.time-calendar-bars .time-cal-bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px;
  padding: 7px 10px !important;
  border-radius: 9px !important;
  background: rgba(148, 163, 184, 0.09) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  box-shadow: none !important;
  min-width: 0;
  min-height: 34px;
}
.time-cal-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.time-cal-ico {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex: 0 0 16px !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: none;
  display: inline-block;
  vertical-align: middle;
}
html.light-mode .time-cal-ico {
  color: #111827 !important;
  stroke: #111827 !important;
}
.time-calendar-bars .time-cal-bar .stat-label,
.time-calendar-bars .time-cal-bar span.stat-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.3;
  text-align: left !important;
  flex: 1 1 auto;
  min-width: 0;
}
.time-calendar-bars .time-cal-bar .stat-value,
.time-calendar-bars .time-cal-bar b.stat-value {
  font-size: 11px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  color: var(--text-primary) !important;
  text-align: right !important;
  white-space: nowrap;
  flex: 0 0 auto;
  max-width: 52%;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.light-mode .time-calendar-bars .time-cal-bar {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}
html.light-mode .time-calendar-bars .time-cal-bar .stat-value {
  color: var(--text-primary) !important;
}

/* Calendar interactive day cells & notes styling */
.time-cal-day {
  position: relative;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--glass-bg, rgba(255,255,255,.04));
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 2px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.time-cal-day:hover {
  background: rgba(255, 255, 255, 0.08);
}
.time-cal-day.sat { color: #60a5fa; }
.time-cal-day.sun { color: #f87171; }
.time-cal-day.today {
  box-shadow: inset 0 0 0 1.5px var(--accent-start, #00d4ff);
  font-weight: 700;
}
.time-cal-day.selected {
  background: rgba(0, 212, 255, 0.18);
  font-weight: 700;
}
.time-cal-day.empty { opacity: 0; pointer-events: none; }

/* Holiday without note */
.time-cal-day.holiday {
  background: rgba(250, 204, 21, 0.16) !important;
  border-color: rgba(250, 204, 21, 0.45) !important;
  color: #fbbf24 !important;
  font-weight: 700;
}

/* Regular day WITH note */
.time-cal-day.has-note {
  background: rgba(56, 189, 248, 0.22) !important;
  border-color: rgba(56, 189, 248, 0.6) !important;
  box-shadow: inset 0 0 0 1.5px rgba(56, 189, 248, 0.8) !important;
  color: #e0f2fe !important;
  font-weight: 600;
}

/* Holiday day WITH note — distinctly highlighted */
.time-cal-day.has-note-hol {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.30) 0%, rgba(56, 189, 248, 0.30) 100%) !important;
  border-color: #f59e0b !important;
  box-shadow: inset 0 0 0 1.5px #f59e0b, 0 0 8px rgba(56, 189, 248, 0.35) !important;
  color: #fef08a !important;
  font-weight: 800 !important;
}

.time-cal-note-dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 4px #38bdf8;
  margin: 2px auto 0;
}
.time-cal-note-dot.time-cal-note-dot-hol {
  background: #f59e0b !important;
  box-shadow: 0 0 5px #fbbf24 !important;
}

/* Light mode calendar */
html.light-mode .time-cal-day.holiday {
  background: rgba(245, 158, 11, 0.14) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: #b45309 !important;
}
html.light-mode .time-cal-day.has-note {
  background: rgba(2, 132, 199, 0.14) !important;
  border-color: rgba(2, 132, 199, 0.5) !important;
  box-shadow: inset 0 0 0 1.5px #0284c7 !important;
  color: #0369a1 !important;
}
html.light-mode .time-cal-day.has-note-hol {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(2, 132, 199, 0.22) 100%) !important;
  border-color: #f59e0b !important;
  box-shadow: inset 0 0 0 1.5px #f59e0b !important;
  color: #9a3412 !important;
}
html.light-mode .time-cal-note-dot {
  background: #0284c7;
  box-shadow: none;
}
html.light-mode .time-cal-note-dot.time-cal-note-dot-hol {
  background: #d97706 !important;
  box-shadow: none !important;
}

/* Note Modal */
.time-note-modal {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.time-note-modal[hidden] { display: none !important; }
.time-note-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.time-note-box {
  position: relative;
  z-index: 1;
  width: min(440px, calc(100vw - 32px));
  background: var(--bg-secondary, #12182a);
  color: var(--text-primary, #ffffff);
  border-radius: 16px;
  padding: 18px;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.14));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
html.light-mode .time-note-box {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}
.time-note-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.time-note-box h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.time-note-close-ico {
  background: transparent;
  border: none;
  color: var(--text-secondary, #94a3b8);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}
.time-note-close-ico:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}
.time-note-hol {
  margin: 0 0 10px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
html.light-mode .time-note-hol {
  background: #fef3c7;
  color: #b45309;
  border-color: #fde68a;
}
.time-note-box textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 120px;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.14));
  background: var(--glass-bg, rgba(255, 255, 255, 0.05));
  color: inherit;
  padding: 10px 12px;
  font: 13px/1.5 system-ui, -apple-system, sans-serif;
  outline: none;
}
.time-note-box textarea:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25);
}
html.light-mode .time-note-box textarea {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}
.time-note-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.time-note-btn {
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  border: none;
}
.time-note-btn-save {
  background: #0284c7;
  color: #ffffff;
}
.time-note-btn-save:hover {
  background: #0369a1;
}
.time-note-btn-delete {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.time-note-btn-delete:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
}
.time-note-btn-delete-all {
  background: rgba(239, 68, 68, 0.10);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.time-note-btn-delete-all:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
}
.time-note-btn-close {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary, #94a3b8);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
}
.time-note-btn-close:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-primary);
}
html.light-mode .time-note-btn-delete {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}
html.light-mode .time-note-btn-delete-all {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
html.light-mode .time-note-btn-close {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}


      /* 14.3.2: RadrView Radar Card accents */
      .radrview-radar-card {
        margin-top: 16px;
        border-top: 1px solid rgba(16, 185, 129, 0.25);
      }
      .radrview-pulse {
        color: #10b981 !important;
      }
      .radrview-badge {
        background: rgba(16, 185, 129, 0.14) !important;
        color: #10b981 !important;
        border-color: rgba(16, 185, 129, 0.3) !important;
      }
      .radrview-dot {
        background: linear-gradient(135deg, #10b981, #059669);
        border-radius: 4px;
        width: 12px;
        height: 12px;
        display: inline-block;
      }


      /* 17.0.0: Prominent, bold and high-contrast TERAZ badge on the nowcast chart */
      .timeline-markers .marker-now {
        font-size: 13px !important;
        font-weight: 800 !important;
        letter-spacing: 0.6px;
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.22) !important;
        border: 1px solid rgba(255, 255, 255, 0.45) !important;
        border-radius: 6px !important;
        padding: 2px 8px !important;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.35) !important;
        text-transform: uppercase;
        display: inline-block;
      }
      [data-theme="light"] .timeline-markers .marker-now {
        color: #000000 !important;
        background: rgba(0, 0, 0, 0.15) !important;
        border: 1px solid rgba(0, 0, 0, 0.4) !important;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.2) !important;
      }


      /* 17.0.0: Rock-solid, fixed-dimension time hero weather container (no horizontal jumping) */
      .time-hero-wx {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 4px !important;
        margin: 6px auto !important;
        min-height: 100px !important;
        width: 100% !important;
        max-width: 320px !important;
      }
      .time-hero-wx-ico {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
      }
      .time-hero-wx-ico svg, .time-hero-wx-ico .ww-icon {
        width: 48px !important;
        height: 48px !important;
      }
      .time-hero-wx-temp {
        font-size: 36px !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
        color: var(--text-primary) !important;
        font-variant-numeric: tabular-nums !important;
        min-width: 70px !important;
        display: inline-block !important;
        text-align: center !important;
        margin: 0 auto !important;
      }
      .time-hero-wx-desc {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--text-secondary) !important;
        min-height: 20px !important;
        line-height: 1.3 !important;
        text-align: center !important;
      }


      
      /* 17.0.0: Compact, flush sticky Y-axis scale on Overview tab */
      .meteogram-chart-wrap {
        position: relative;
        touch-action: pan-y !important;
      }
      .meteogram-scroll {
        touch-action: pan-x pan-y !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
      }
      .meteogram-y-axis-sticky {
        position: absolute;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 34px !important;
        z-index: 10;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(15, 23, 42, 0.95) 70%, rgba(15, 23, 42, 0) 100%);
        border-right: 1px solid var(--glass-border);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 56px 4px 78px 6px;
        box-sizing: border-box;
        font: 700 11px/1 system-ui, -apple-system, sans-serif;
        color: var(--text-tertiary);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
      }
      .light-mode .meteogram-y-axis-sticky {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 70%, rgba(255, 255, 255, 0) 100%);
        border-right-color: rgba(203, 213, 225, 0.7);
        color: #475569;
      }



      /* 17.0.0: Compact TERAZ marker badge & upward connected line */
      .timeline-markers .marker-now {
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px;
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.18) !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        border-radius: 4px !important;
        padding: 1px 6px !important;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.25) !important;
        text-transform: uppercase;
        display: inline-block;
        position: relative;
        z-index: 12;
      }
      [data-theme="light"] .timeline-markers .marker-now {
        color: #000000 !important;
        background: rgba(0, 0, 0, 0.12) !important;
        border: 1px solid rgba(0, 0, 0, 0.35) !important;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.15) !important;
      }

      .timeline-bar {
        overflow: visible !important;
      }
      .timeline-now {
        position: absolute;
        left: 50% !important;
        top: -16px !important;
        bottom: 0;
        width: 2px;
        background: var(--text-primary);
        z-index: 15;
        border-radius: 2px;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
        pointer-events: none;
      }
      .timeline-now::before {
        content: '';
        position: absolute;
        top: -3px;
        left: -3px;
        width: 8px;
        height: 8px;
        background: var(--text-primary);
        border-radius: 50%;
        box-shadow: 0 0 0 2px var(--glass-bg), 0 0 8px rgba(255, 255, 255, 0.8);
      }

      /* 17.0.0: yr.no style weather icons riding directly above the temperature line */
      .meteogram-icon-overlay .mg-ico {
        position: absolute;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translate(-50%, -50%);
        pointer-events: none;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
        transition: top 0.25s ease, left 0.25s ease;
      }
      .meteogram-icon-overlay .mg-ico svg, .meteogram-icon-overlay .mg-ico .ww-icon {
        width: 18px !important;
        height: 18px !important;
      }


      /* 17.0.0: Clean connection from Nowcast bar to bottom of TERAZ badge (no overlapping, no ball/dot) */
      .timeline-markers .marker-now {
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px;
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.18) !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        border-radius: 4px !important;
        padding: 1px 6px !important;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.25) !important;
        text-transform: uppercase;
        display: inline-block;
        position: relative;
        z-index: 25 !important;
      }
      [data-theme="light"] .timeline-markers .marker-now {
        color: #000000 !important;
        background: rgba(0, 0, 0, 0.12) !important;
        border: 1px solid rgba(0, 0, 0, 0.35) !important;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.15) !important;
      }

      .timeline-bar {
        overflow: visible !important;
      }
      .timeline-now {
        position: absolute;
        left: 50% !important;
        top: -10px !important;
        bottom: 0;
        width: 2px;
        background: var(--text-primary);
        z-index: 10;
        border-radius: 2px;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
        pointer-events: none;
      }
      .timeline-now::before {
        display: none !important;
      }

/* ============================================
   18.3.1: Aktywne zakładki meteogramu i mapy pogodowej w żółtym wzorcu
   sekcji „Porównaj pogodę" (#hubSection .tablinks.active): #facc15,
   napis #111827, border #fbbf24. NAPRAWA KASKADY 18.3.0: blok unifikacji
   5.6.x definiuje active z SELEKTORAMI ID (#mapTabs .map-tab.active,
   #meteogramTabs .meteogram-tab.active — niebieski gradient), które
   biją klasowe reguły niezależnie od kolejności. Dlatego 18.3.0 nie
   zadziałało. Fix: selektory ID + !important — dokładnie ten wzorzec,
   którym 5.7.0 przywróciło żółty active huba. Przyciski Odśwież i
   Pełny ekran (.ww-map-tool-btn / #refreshBtn) celowo POZA zmianą.
   ============================================ */
#mapTabs .map-tab.active,
#meteogramTabs .meteogram-tab.active,
.map-tab.active,
.meteogram-tab.active {
  background: #facc15 !important;
  color: #111827 !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 10px 26px rgba(250, 204, 21, 0.22) !important;
  font-weight: 800;
}
#mapTabs .map-tab.active:hover,
#meteogramTabs .meteogram-tab.active:hover,
.map-tab.active:hover,
.meteogram-tab.active:hover {
  background: #fbbf24 !important;
  border-color: #f59e0b !important;
  color: #111827 !important;
}
.light-mode #mapTabs .map-tab.active,
.light-mode #meteogramTabs .meteogram-tab.active,
.light-mode .map-tab.active,
.light-mode .meteogram-tab.active {
  background: #facc15 !important;
  color: #111827 !important;
  border-color: #f59e0b !important;
}

/* ============================================
   19.0.0: Poradnik dnia — 5 kafelków decyzyjnych (glass, jak reszta sekcji)
   ============================================ */
.tips-section .tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.tip-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 12px 12px 10px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  min-height: 86px;
}
.tip-top { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.tip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-tertiary);
  flex: 0 0 auto;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.12);
}
.tip-card.good .tip-dot { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, 0.45); }
.tip-card.fair .tip-dot { background: #f59e0b; box-shadow: 0 0 8px rgba(245, 158, 11, 0.45); }
.tip-card.poor .tip-dot { background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.45); }
.tip-title {
  font-weight: 800; font-size: 12px; letter-spacing: 0.2px;
  color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tip-value { font-size: 12px; line-height: 1.45; color: var(--text-secondary); min-height: 34px; }
/* 19.0.2: "Dziś vs jutro" niesie najwięcej treści — pełna szerokość i większy tekst */
.tip-card[data-tip="vstomorrow"] { grid-column: 1 / -1; }
.tip-card[data-tip="vstomorrow"] .tip-value { font-size: 13px; min-height: 0; line-height: 1.55; }

/* ============================================
   19.1.1: TABELA "Dziś vs Jutro" — porównanie czynników ze strzałkami
   ============================================ */
.tip-value--table { padding: 0; }
.vs-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  table-layout: auto;
}
.vs-table thead th {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: right;
  padding: 0 6px 7px;
  white-space: nowrap;
  border-bottom: 1px solid var(--glass-border);
}
.vs-table thead th.vs-factor { text-align: left; }
.vs-table thead th.vs-trend { text-align: center; width: 40px; }
.vs-table tbody tr { border-bottom: 1px solid rgba(148, 163, 184, .13); }
.vs-table tbody tr:last-child { border-bottom: 0; }
.vs-table td, .vs-table th.vs-factor { padding: 7px 6px; vertical-align: middle; }
.vs-factor {
  display: table-cell;
  text-align: left;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}
.vs-ico { margin-right: 6px; font-size: 14px; line-height: 1; }
.vs-name { font-weight: 700; }
.vs-today, .vs-tomorrow {
  text-align: right;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vs-tomorrow { color: var(--text-primary); font-weight: 700; }
.vs-badge { margin-left: 4px; font-size: 13px; }
.vs-trend { text-align: center; width: 40px; }
.vs-arrow { font-size: 16px; font-weight: 900; line-height: 1; display: inline-block; }
/* 19.5.1: znak strzalki (↑/↓) jest wizualnie lzejszy od trojkata,
   wiec minimalnie wiekszy stopien pisma zachowuje te sama czytelnosc. */
.vs-arrow.up { color: #22c55e; text-shadow: 0 0 10px rgba(34, 197, 94, .45); }
/* 19.3.0: jaskrawsza czerwien dla "jutro gorzej niz dzis" — #ef4444 bylo
   za ciemne na tle kart Poradnika; #ff2d2d + mocniejsza poswiata czyta sie
   od razu jako ostrzezenie. */
.vs-arrow.down { color: #ff2d2d; text-shadow: 0 0 12px rgba(255, 45, 45, .65); }
.vs-arrow.flat { color: var(--text-tertiary); opacity: .65; }
/* 36.2.0 (zgłoszenie właściciela): wartość Jutra jest ZAWSZE biała
   (jak przy braku zmiany). Kolor niosą WYŁĄCZNIE strzałki: zielona ↑
   i czerwona ↓. Reguły .vs-row.is-better/.is-worse .vs-tomorrow usunięte. */
.vs-row.is-worse .vs-tomorrow { font-weight: 700; }
/* Jasny motyw: #ff2d2d na bieli ma za maly kontrast (3.7:1), wiec
   uzywamy ciemniejszego, ale nadal nasyconego odcienia (4.8:1). */
html.light-mode .vs-arrow.down { color: #e11d1d; text-shadow: 0 0 10px rgba(225, 29, 29, .35); }
html.light-mode .mg-leg-line { border-top-color: #e11d1d; }
/* tekst tylko dla czytnikow ekranu (dostepnosc strzalek) */
.vs-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.light-mode .vs-table tbody tr { border-bottom-color: rgba(71, 85, 105, .16); }
@media (max-width: 480px) {
  .vs-table { font-size: 11.5px; }
  .vs-ico { margin-right: 4px; font-size: 13px; }
  .vs-table td, .vs-table th.vs-factor { padding: 6px 4px; }
}
.light-mode .tip-card { background: rgba(255, 255, 255, 0.72); }

/* ==============================================================
   24.0.1: przycisk "Odśwież" w nagłówku sekcji Opady / Zachmurzenie.
   Wlasna klasa (bez .nowcast-tab), zeby nie wchodzil w mechanizm
   przeciągania i zapamiętywania kolejności zakładek.
   ============================================================== */
.nowcast-refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    margin-left: auto;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary);
    background: var(--glass-bg, rgba(255, 255, 255, .08));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, .14));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .12s ease;
}

.nowcast-refresh:hover {
    color: var(--text-primary);
    border-color: var(--accent, #ffd54a);
}

.nowcast-refresh:active { transform: translateY(1px); }
.nowcast-refresh svg { flex: none; display: block; }
.nowcast-refresh:focus-visible { outline: 2px solid var(--accent, #ffd54a); outline-offset: 2px; }
.nowcast-refresh[disabled],
.nowcast-refresh.is-refreshing { cursor: progress; opacity: .72; }
.nowcast-refresh.is-refreshing svg { animation: ww-refresh-spin .9s linear infinite; }

@keyframes ww-refresh-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .nowcast-refresh.is-refreshing svg { animation: none; }
}

@media (max-width: 600px) {
    .nowcast-refresh { padding: 5px 9px; font-size: 11px; }
}

.light-mode .nowcast-refresh { background: rgba(15, 23, 42, .05); }
/* ETA line w sekcji nowcast (19.0.0) */
.ww-eta-line { width: 100%; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
@media (max-width: 600px) {
  .tips-section .tips-grid { grid-template-columns: repeat(2, 1fr); }
  .tip-card:last-child { grid-column: 1 / -1; }
}

/* 24.0.2: szacunek jest oznaczony ≈ w tooltipie; wysokość chmur = 0..100%. */
.timeline-segment.cloud { min-height: 0; }
.timeline-segment.estimated { border-top-style: dashed; }
.minutely-section .hourly-precip { display: flex; align-items: center; justify-content: center; white-space: nowrap; gap: 2px; font-size: 11px; }
.minutely-section .hourly-precip svg { flex: 0 0 9px; width: 9px; }

/* ==================================================================
   24.5.0 (poprawka #5): STAN OCZEKIWANIA NA PIERWSZY ODCZYT.
   „Brak danych" nie jest stanem ładowania — dopóki trwa pobieranie,
   w gnieździe ikony kręci się kółko, a podpis pozostaje pusty.
   ================================================================== */
.ww-mini-spin {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.22);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: wwMiniSpin 0.8s linear infinite;
    vertical-align: middle;
}
@keyframes wwMiniSpin {
    to { transform: rotate(360deg); }
}
.hourly-card.is-awaiting .hourly-desc { min-height: 1em; opacity: .55; }
.hourly-card.is-awaiting .hourly-icon { display: inline-flex; align-items: center; justify-content: center; }
/* 24.5.1 (poprawka #2): spinner w gnieździe ikony karty minutowej — ten sam
   rozmiar co ikona SVG, żeby rząd kart nie „skakał", gdy pomiar dojdzie. */
.hourly-card .hourly-icon .ww-mini-spin { width: 26px; height: 26px; border-width: 3px; }
.nowcast-summary .rain-icon .ww-mini-spin { width: 22px; height: 22px; border-width: 3px; }
/* 37.2.0: SPINNER W GNIEŹDZIE IKONY HERO PRZY PRZEŁĄCZANIU MIASTA */
.ww-hero-spin-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
}
.weather-icon-large .ww-hero-spin {
    width: 52px;
    height: 52px;
    border-width: 4px;
}
.hero-weather.is-switching-location .weather-temp,
.hero-weather.is-switching-location .weather-description-more {
    opacity: 0.25;
    transition: opacity 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
    .ww-mini-spin { animation-duration: 1.6s; }
}
html.light-mode .ww-mini-spin { border-color: rgba(0, 0, 0, 0.18); border-top-color: currentColor; }

/* ==========================================================================
   30.0.0: MAPA RADAROWA (imweather.com) w sekcji „Prognoza opadów".
   Trzeci widok sekcji obok wykresu opadow i wykresu zachmurzenia — wszystkie
   trzy zajmuja TO SAMO miejsce, dokladnie jak opady i zachmurzenie miedzy
   soba. Pasek warstw pod spodem jest przestawialny tym samym mechanizmem co
   pozostale paski (dlugie przytrzymanie + przeciagniecie).
   ========================================================================== */

/* Narzedzia sekcji (Odswiez / Pelny ekran) — te same klasy co w Mapie
   pogody i w Hubie, tutaj tylko dosuwamy je do prawej krawedzi naglowka. */
.nowcast-section .ww-map-tools {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-left: auto;
    padding: 0;
    flex: none;
}
.nowcast-section .ww-map-tool-btn { cursor: pointer; white-space: nowrap; }
.nowcast-section .ww-map-tool-btn[disabled],
.nowcast-section .ww-map-tool-btn.is-refreshing { cursor: progress; opacity: .72; }

/* Karta mapy: bez zbednego paddingu (ramka idzie na cala szerokosc). */
.nowcast-card.ww-imw-card { padding: 12px; }
.nowcast-card.ww-imw-card[hidden] { display: none !important; }

/* Pasek warstw imweather — identyczny wyglad jak #mapTabs (#imwRadarTabs
   dostaje te same reguły dzieki klasie .map-tabs / .map-tab). */
.imw-radar-tabs { flex-wrap: nowrap; padding: 4px 2px 10px; margin: 0; }
.imw-radar-tab { cursor: pointer; user-select: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.imw-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 4px;
    border-radius: 6px;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .3px;
    background: rgba(255, 255, 255, .16);
    color: inherit;
    border: 1px solid rgba(255, 255, 255, .18);
}
.imw-radar-tab.active .imw-tab-badge {
    background: rgba(0, 0, 0, .28);
    border-color: rgba(255, 255, 255, .35);
}
html.light-mode .imw-tab-badge { background: rgba(17, 24, 39, .10); border-color: rgba(17, 24, 39, .16); }
html.light-mode .imw-radar-tab.active .imw-tab-badge { background: rgba(255, 255, 255, .35); }

/* Ramka mapy — ta sama wysokosc co mapa pogody. */
.ww-imw-frame-wrap { border-radius: 16px !important; overflow: hidden; border: 1px solid var(--glass-border); }
.ww-imw-frame-wrap .map-iframe { height: 601px; border-radius: 0 !important; background: rgba(0, 0, 0, .10); }
@media (max-width: 480px) {
    .ww-imw-frame-wrap .map-iframe { height: 601px; }
}

/* Fallback „Pelny ekran" dla wykresow (gdy przegladarka blokuje
   Fullscreen API) — sekcja rozciaga sie na caly ekran przez CSS. */
.nowcast-section.ww-section-fullscreen {
    position: fixed !important;
    inset: 0;
    z-index: 9998;
    margin: 0;
    padding: 16px;
    overflow: auto;
    background: var(--bg-primary, #0b1020);
    border-radius: 0;
}
body.ww-section-fs-open { overflow: hidden !important; }
/* Natywny tryb pelnoekranowy: wykres dostaje pelna wysokosc sekcji. */
.nowcast-section:fullscreen { padding: 16px; background: var(--bg-primary, #0b1020); overflow: auto; }
.nowcast-section:fullscreen .ww-imw-frame-wrap .map-iframe { height: calc(100vh - 190px); min-height: 601px; }

/* ==========================================================================
 * 34.1.5: TŁUMACZ ZDJĘĆ SATELITARNYCH (panel #wwSatPanel w #wwSatSection).
 * Style oparte na zmiennych motywu (--glass-*, --text-*), więc działają w
 * trybie ciemnym i jasnym bez osobnych reguł. Sekcja jest ukryta atrybutem
 * [hidden] do pierwszego udanego odczytu (app.js zdejmuje hidden).
 * ========================================================================== */
.wwsat-section { position: relative; }
.wwsat-wrap {
  background: var(--glass-bg, rgba(255,255,255,0.06));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
  border-radius: 16px;
  padding: 14px 16px 12px;
  box-shadow: var(--glass-shadow, 0 8px 32px rgba(0,0,0,.28));
}
.wwsat-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.wwsat-title { font-weight: 700; font-size: 15px; color: var(--text-primary, #fff); display: flex; align-items: baseline; gap: 8px; }
/* 36.2.2: .wwsat-ver usunięte — brak etykiety wersji przy tytule panelu Satelita */
.wwsat-sub { font-size: 12px; color: var(--text-secondary, rgba(255,255,255,.72)); }
.wwsat-empty { margin: 0; font-size: 13px; color: var(--text-secondary, rgba(255,255,255,.72)); }

.wwsat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.wwsat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px;
  background: var(--control-bg, rgba(255,255,255,.06));
  border: 1px solid var(--glass-border, rgba(255,255,255,.12));
  font-size: 12px; line-height: 1.2; white-space: nowrap;
}
.wwsat-chip-k { color: var(--text-tertiary, rgba(255,255,255,.55)); }
.wwsat-chip-v { color: var(--text-primary, #fff); font-weight: 600; }
.wwsat-chip--ok { border-color: rgba(16,185,129,.45); }
.wwsat-chip--ok .wwsat-chip-v { color: #10b981; }
.wwsat-chip--warn { border-color: rgba(251,146,60,.5); }
.wwsat-chip--warn .wwsat-chip-v { color: #fb923c; }
.wwsat-chip--cold { border-color: rgba(96,165,250,.5); }
.wwsat-chip--cold .wwsat-chip-v { color: #60a5fa; }

.wwsat-lines { margin: 0 0 10px; padding-left: 18px; }
.wwsat-lines li { font-size: 13px; line-height: 1.5; color: var(--text-secondary, rgba(255,255,255,.82)); margin: 2px 0; }

.wwsat-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; font-size: 11px; color: var(--text-tertiary, rgba(255,255,255,.5)); border-top: 1px solid var(--glass-border, rgba(255,255,255,.12)); padding-top: 8px; }
.wwsat-src, .wwsat-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 560px) {
  .wwsat-wrap { padding: 12px 12px 10px; border-radius: 14px; }
  .wwsat-lines li { font-size: 12.5px; }
  .wwsat-chip { font-size: 11.5px; padding: 3px 8px; }
}

/* 36.1.0 — WIZUALNA PRAWDA DNIA: stopka darmowosci, strzalki kierunku, zdania tlumacza */
.ww-free-note{font-size:10px;line-height:1.4;color:var(--text-tertiary,#8a8f98);text-align:center;margin:6px 0 0;opacity:.75}
.ww-dir-arrow{display:inline-block;vertical-align:-2px;margin-right:2px}
.wwsat-explain{font-size:12px;line-height:1.5;color:var(--text-secondary,#b7bcc6);margin:6px 0 8px}