/* ==========================================================================
   TopAIMuza — kierunek wizualny „cyberpunk przez klimat, nie przez bałagan”.
   Arkusz 1 z 2: tokeny, tło, chrome (header/stopka/dock) i wspólne komponenty.
   Ładowany PO topaimuza.css i phase1-foundation.css, więc równa specyficzność
   wygrywa kolejnością — stare reguły zostają jako struktura, nowe jako barwa.
   Kontrakt: ciemne tło, cyan/magenta jako akcent, emoji prowadzi po serwisie,
   techniczne punkty schodzą na drugi plan (widok rankingu i profilu).
   ========================================================================== */

:root{
  /* Tło i powierzchnie */
  --bg:#05060e;
  --bg-2:#080b1a;
  --panel:#0c1024;
  --panel-2:#111735;
  --panel-3:#161d47;
  --edge:rgba(124,166,255,.18);
  --edge-strong:rgba(124,166,255,.34);
  --edge-soft:rgba(124,166,255,.09);

  /* Marka (nadpisuje jasny motyw z topaimuza.css) */
  --blue:#4ddcff;
  --pink:#ff4fd8;
  --red:#ff5470;
  --paper:#05060e;
  --cream:#e8fbff;
  --text:#e9eeff;
  --line:#161d47;
  --line-dark:rgba(124,166,255,.22);
  --violet:#8b5cff;

  /* Typografia treści na ciemnym tle */
  --tx-2:#aab6dd;
  --tx-3:#8b96bc;
  --tx-4:#7d89b4;

  /* Akcenty ruchu w rankingu */
  --up:#3ce8a6;
  --down:#ff6b8a;
  --flat:#6d79a6;

  --glow-cyan:0 0 0 1px rgba(77,220,255,.28), 0 18px 60px rgba(77,220,255,.14);
  --glow-magenta:0 0 0 1px rgba(255,79,216,.30), 0 22px 70px rgba(255,79,216,.16);
  --shadow:0 26px 70px rgba(0,0,0,.55);
  --radius:14px;
}

/* --- Tło: jeden stały gradient + dwie poświaty, bez przewijania w poziomie ----- */
html{background:var(--bg)}
body{
  background:
    radial-gradient(1100px 620px at 12% -8%,rgba(77,220,255,.14),transparent 60%),
    radial-gradient(940px 560px at 92% 4%,rgba(255,79,216,.12),transparent 62%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 46%,var(--bg) 100%);
  background-attachment:fixed;
  color:var(--text);
}
::selection{background:rgba(77,220,255,.32);color:#fff}

/* Delikatna siatka „neonowego horyzontu” pod treścią — czysto dekoracyjna. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(124,166,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(124,166,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 68%);
}

/* Na telefonie wyszukiwarka ma dokładnie jeden widoczny stan: zamknięty
   przycisk albo otwarte pole. Summary nie konkuruje z formularzem po otwarciu. */
@media(max-width:768px){
  .search-box[open]>.search-toggle{display:none}
}
/* ⚠️ `.mobile-dock` NIE MOŻE stać w tej grupie. Stał tu po ostatnim redesignie
   i kasował `position:fixed` z `topaimuza.css` (ta sama specyficzność, a ten
   arkusz ładuje się później) — dolna nawigacja zjeżdżała do zwykłego przepływu
   dokumentu i lądowała POD stopką na końcu strony. Zmierzone w przeglądarce
   2026-09-12 na `/ranking/topai/` (375 px): `position:relative`, `top: 5262 px`
   w viewportcie 812 px, czyli pasek widoczny dopiero po przewinięciu całej
   strony. Pozycjonowanie paska pilnuje wyłącznie blok „mobilna szyna” niżej. */
.site-header,.site-foot,.main{position:relative;z-index:1}

a{color:inherit}
:focus-visible{outline:3px solid var(--cyan,#4ddcff);outline-offset:3px}

/* --- Chrome: header ---------------------------------------------------------- */
/* Nagłówek ma pełne, kryjące tło i pozycję sticky. Świadomie BEZ `backdrop-filter`:
   rozmywanie warstwy pod nagłówkiem zostawiało widoczny prostokątny pas na styku
   z hero (rozmyta górna krawędź sekcji zasłaniała tekst pod nagłówkiem). */
.site-header{
  position:sticky;top:0;z-index:40;
  background:#060812;
  border-bottom:1px solid var(--edge);
  box-shadow:0 14px 44px rgba(0,0,0,.5);
}
.header-inner{max-width:1280px}
.brand-logo{filter:drop-shadow(0 8px 22px rgba(77,220,255,.35))}
.brand-lockup strong{color:#fff}
.brand-lockup strong span{color:var(--blue)}
.brand-lockup small{color:var(--tx-3)}
.nav-item{color:var(--tx-2);font-weight:750;border-radius:9px;gap:6px}
.nav-item:hover{color:#fff;background:rgba(77,220,255,.09)}
.nav-item.active{color:#fff;background:rgba(77,220,255,.13)}
.nav-item.active::after{background:var(--pink);box-shadow:0 0 14px rgba(255,79,216,.7)}
.nav-emoji{font-size:13px;line-height:1;filter:saturate(1.15)}
.nav-item--cta{border:1px solid var(--edge-strong);background:rgba(255,255,255,.05);margin-left:6px}
.nav-item--cta:hover{background:rgba(255,79,216,.14);border-color:var(--pink)}
.mobile-dock a>span{font-size:17px;line-height:1;margin-bottom:3px}
.search-in{border-color:var(--edge);background:rgba(255,255,255,.05);color:#fff}
.search-in::placeholder{color:var(--tx-4)}
.search-toggle{color:var(--tx-2)}
/* Wyszukiwarka jako jeden kontroler nagłówka (uwaga właściciela 2026-09-20).
   Zmierzony błąd stanu wyjściowego: `.search-in{width:100%}` brało szerokość
   CAŁEGO formularza, kolumna przycisku liczyła 0 px (`grid-template-columns:
   320px 0px`), więc „SZUKAJ” nachodził na prawe pole inputu, z innym promieniem
   i inną wysokością. Teraz: jedna obwódka na formularzu, pole i przycisk
   w jednym rytmie 44 px (jak pigułki nawigacji), pierścień fokusu na całości. */
.site-header .search{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;
  width:100%;max-width:340px;height:44px;
  border:1px solid var(--edge-strong);border-radius:12px;background:rgba(255,255,255,.05);
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.site-header .search:hover{border-color:rgba(77,220,255,.45)}
.site-header .search:focus-within{
  border-color:var(--blue);background:rgba(255,255,255,.08);
  box-shadow:0 0 0 3px rgba(77,220,255,.18);
}
/* UWAGA: bez `overflow:hidden` — lista podpowiedzi jest dzieckiem formularza,
   więc obcinanie kontenera ukrywałoby ją całkowicie (zmierzone: lista istniała,
   ale nie dała się kliknąć ani zobaczyć). Zaokrąglenie noszą dzieci. */
.site-header .search-in{
  width:auto;min-width:0;height:100%;padding:0 14px;
  border:0;border-radius:12px 0 0 12px;background:transparent;color:#f5f7ff;font-size:14px;
}
.site-header .search-in:focus,
.site-header .search-in:focus-visible{background:transparent;border:0;outline:none}
.site-header .search-submit{
  position:static;inset:auto;
  min-width:0;width:auto;height:100%;padding:0 18px;
  border:0;border-left:1px solid var(--edge-strong);border-radius:0 12px 12px 0;
  background:rgba(77,220,255,.13);color:#cdefff;
  font-size:11.5px;font-weight:850;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.site-header .search-submit:hover,
.site-header .search-submit:focus-visible{
  background:linear-gradient(120deg,rgba(77,220,255,.34),rgba(255,79,216,.28));color:#fff;
}
/* Pas 1121-1500 px: ten sam formularz jest KONTENEREM rozwijanego panelu
   (`listening-ui` ustawia mu position:absolute, padding i własną ramkę), więc
   nie narzucamy mu wysokości kontrolki — inaczej ściska pole do ~26 px. */
@media(min-width:1121px) and (max-width:1500px){
  .search-box[open]>.search{height:auto;max-width:none}
  .search-box[open]>.search .search-in,
  .search-box[open]>.search .search-submit{height:44px}
  .search-box[open]>.search .search-in{border-radius:10px 0 0 10px}
  .search-box[open]>.search .search-submit{border-radius:0 10px 10px 0}
}
.trust-strip{
  background:#080b1a;border-top:1px solid var(--edge-soft);
  color:var(--tx-4);letter-spacing:.1em;
}
.trust-strip a{color:var(--tx-3)}
.trust-strip a:hover{color:var(--blue)}
.trust-strip i{background:var(--up);box-shadow:0 0 0 4px rgba(60,232,166,.14)}
.trust-kroltech{color:var(--blue)}

/* --- Chrome: stopka ---------------------------------------------------------- */
.site-foot{
  border-top:1px solid var(--edge);background:rgba(6,8,18,.92);
  color:var(--tx-3);
}
.site-foot img{filter:brightness(1.6) drop-shadow(0 6px 18px rgba(77,220,255,.3))}
.foot-links a,.foot-links button{color:var(--tx-2)}
.foot-links a:hover,.foot-links button:hover{color:var(--blue)}
.foot-legal{color:var(--tx-4)}
/* Blok „Wspólny stan danych” zniknął z publicznej stopki (uwaga właściciela
   2026-09-20) — style usunięte razem z elementem; stan danych jest w
   `/data-quality.json` i na `/jakosc-danych/`. */
/* Noty wprowadzone przy domykaniu audytu 2026-09-12: gatunki (suma > liczba
   profili), Spotify jako kontekst, efektywne wagi metodologii. */
.page-note,.home-top5-note,.methodology-effective,.rk-list-note{
  color:var(--tx-3);font-size:11px;line-height:1.6;margin:8px 0 0;
}
.home-top5-note{margin:10px 0 0}
.methodology-effective{margin-top:12px}
.rk-list-note{margin:4px 0 0;max-width:560px}

/* --- Chrome: mobilna szyna (dolna nawigacja aplikacji) ----------------------- */
/* To NIE jest część stopki: to osobny komponent (`_navigation.html: mobilna_nawigacja`).
   Kontrakt: przyklejony do dolnej krawędzi viewportu, widoczny przy przewijaniu,
   półprzezroczyste bardzo ciemne tło z delikatnym rozmyciem, neonowa obwódka
   u góry, aktywna pozycja w cyan/magenta, `env(safe-area-inset-bottom)` dla iPhone.
   Wysokość celowo mała (58 px + safe area) — ma wyglądać jak pasek aplikacji,
   nie jak rząd dużych przycisków. */
@media(max-width:768px){
  /* Treść nie może chować się pod paskiem na końcu dokumentu. */
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  .mobile-dock{
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    min-height:58px;padding:0 4px calc(env(safe-area-inset-bottom) + 2px);
    background:rgba(5,6,14,.86);
    -webkit-backdrop-filter:blur(14px) saturate(1.25);
    backdrop-filter:blur(14px) saturate(1.25);
    border-top:1px solid var(--edge-strong);
    box-shadow:0 -14px 36px rgba(0,0,0,.55);
  }
  .mobile-dock a,.mobile-dock button{
    position:relative;display:grid;place-items:center;align-content:center;gap:3px;
    min-height:56px;padding:0;border:0;background:none;
    color:var(--tx-3);font:750 9.5px/1 var(--data);letter-spacing:.04em;
    text-decoration:none;cursor:pointer;
  }
  .mobile-dock a>span,.mobile-dock button>span{font-size:17px;line-height:1}
  .mobile-dock a:hover,.mobile-dock button:hover{color:var(--tx-2)}
  .mobile-dock a[aria-current="page"],.mobile-dock button[aria-current="page"]{color:var(--blue)}
  .mobile-dock a[aria-current="page"]>span,.mobile-dock button[aria-current="page"]>span{
    filter:drop-shadow(0 0 10px rgba(77,220,255,.6));
  }
  /* Neonowy znacznik aktywnej sekcji: cyan → magenta, jak akcenty portalu. */
  .mobile-dock [aria-current="page"]::before{
    content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:26px;height:2px;border-radius:0 0 3px 3px;
    background:linear-gradient(90deg,var(--blue),var(--pink));
    box-shadow:0 0 12px rgba(77,220,255,.7);
  }
}

/* --- Typografia wspólna ------------------------------------------------------ */
.eyebrow{color:var(--blue);letter-spacing:.18em}
.eyebrow span{color:var(--pink)}
.page-title,.section-heading h2,.panel h2,.signal-card h2,.source-card h2{color:#fff}
.page-title em{color:var(--pink)}
.page-sub{color:var(--tx-2)}
.text-link{color:var(--blue)}
.dim,.no-data{color:var(--tx-3)}
.signal-badge{color:var(--tx-3)}
.signal-badge i{background:var(--pink);box-shadow:0 0 0 4px rgba(255,79,216,.16)}
.breadcrumb a,.breadcrumbs a{color:var(--tx-3)}
.breadcrumb a:hover,.breadcrumbs a:hover{color:var(--blue)}

/* --- Przyciski i akcje ------------------------------------------------------- */
.cta{
  background:linear-gradient(120deg,var(--blue),#7ae7ff 42%,var(--pink));
  color:#05060e;border-radius:12px;box-shadow:0 14px 38px rgba(77,220,255,.28);font-weight:900;
}
.cta:hover{transform:translateY(-1px);box-shadow:0 18px 46px rgba(255,79,216,.32)}
.cta-light{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px var(--edge-strong)}
.cta-sm{border-radius:10px}
.chip{
  border:1px solid var(--edge);background:rgba(255,255,255,.05);color:var(--tx-2);
  border-radius:999px;font-weight:750;
}
.chip:hover{border-color:var(--edge-strong);color:#fff;background:rgba(77,220,255,.1)}
.chip-on,.sortbar .chip[aria-current="page"]{
  background:rgba(77,220,255,.16);border-color:rgba(77,220,255,.5);color:#fff;
}
.sortbar{border:0;gap:8px}
.rank-pill,.badge-mini{background:rgba(77,220,255,.14);color:var(--blue);border:0;border-radius:999px}

/* --- Karty i panele ---------------------------------------------------------- */
.panel,.signal-card,.source-card,.rank-card,.album-card,.gat-card,
.nowosci-filters,.compare-tool,.compare-selectors,.submission-form,
.method-rules,.method-definitions,.topai-shadow-note,.topai-search,
.formula-board,.quality-snapshot,.quality-corrections,.track-player-panel,
.radar-method,.radar-proof,.radar-context,.curated-pairs,.data-quality-grid>*{
  background:var(--panel);border:1px solid var(--edge);border-radius:var(--radius);
  box-shadow:var(--shadow);color:var(--text);
}
.panel-h{border-color:var(--edge)}
.section-bar{border-color:var(--edge)}
.section-count{color:var(--tx-3)}

/* --- Formularze -------------------------------------------------------------- */
input,select,textarea{
  background:rgba(6,9,22,.8);color:var(--text);
  border:1px solid var(--edge);border-radius:10px;
}
input::placeholder,textarea::placeholder{color:var(--tx-4)}
select option{background:#0b1024;color:var(--text)}
label,.flt>span,.zglos-field-hint,.zglos-field>span{color:var(--tx-2)}
.form-note,.doc-note,.data-note{color:var(--tx-3)}
.zglos-form-title,.zglos-status-title{color:#fff}
.zglos-status{background:rgba(77,220,255,.08);border-left:3px solid var(--blue);color:var(--tx-2)}

/* --- Tabele rankingowe (wspólny szkielet) ------------------------------------ */
.ranking-table-head,.rank-head{
  background:rgba(255,255,255,.03);border-color:var(--edge);color:var(--tx-4);
}
.ranking-table>li,.rank-list>li{border-color:var(--edge-soft)}
.ranking-table>li:hover,.rank-list>li:hover{background:rgba(77,220,255,.05)}
.chart-row{background:rgba(255,255,255,.02);border-color:var(--edge-soft)}
.chart-row:hover{background:rgba(77,220,255,.07);transform:none}
.chart-pos{color:var(--pink)}
.chart-artist strong,.rank-person strong{color:#fff}
.chart-artist small,.rank-person small{color:var(--tx-3)}
.chart-value{color:#fff}
.chart-value small{color:var(--tx-4)}
.chart-platform{color:var(--tx-3)}
.rank-medal,.topai-position{color:var(--blue)}
.rank-stat{color:var(--text)}
.rank-stat-active{color:#fff}
.rank-date{color:var(--tx-4)}
.rank-open,.chart-go{
  background:rgba(77,220,255,.1);border:1px solid var(--edge);color:var(--blue);
  border-radius:10px;
}
.rank-open:hover,.chart-go:hover{background:var(--blue);color:#05060e;border-color:var(--blue)}
.avatar-ph,.rank-avatar,.topai-avatar,.ranking-first-avatar,.art-avatar{
  background:linear-gradient(140deg,var(--violet),#3d2a9e);color:#fff;border:0;
}
.gat-count,.num{color:var(--tx-3)}
.metric-unavailable,.first-measure,.data-availability-state{
  background:rgba(255,255,255,.03);border:1px dashed var(--edge-strong);color:var(--tx-3);
}

/* --- Pokrycie i pasma metodologiczne ----------------------------------------- */
.source-strip,.home-radar-strip,.submit-strip,.method-cta,.genre-rail{
  background:var(--panel);border:1px solid var(--edge);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.source-strip{border-top:1px solid var(--edge)}
.source-strip ul{background:var(--edge-soft)}
.source-strip li{background:var(--panel)}
.source-strip li>span{color:var(--blue)}
.source-strip li>strong{color:#fff}
.source-strip li>p,.source-strip .source-strip-note{color:var(--tx-3)}
.source-strip meter::-webkit-meter-bar{background:rgba(255,255,255,.08)}
.source-strip meter::-webkit-meter-optimum-value{background:linear-gradient(90deg,var(--blue),var(--pink))}
.home-radar-strip ol{border-color:var(--edge)}
.home-radar-strip li{border-color:var(--edge-soft)}
.home-radar-strip strong{color:#fff}
.home-radar-strip small{color:var(--tx-3)}
.home-radar-strip header p,.source-strip>div>p{color:var(--pink)}
.home-radar-strip h2,.source-strip h2{color:#fff}
.home-radar-strip header>a,.source-strip>div>a{color:var(--blue)}
.submit-strip{border-left:3px solid var(--blue)}
.submit-strip>div>p{color:var(--blue)}
.submit-strip h2{color:#fff}
.submit-strip h2 em{color:var(--pink)}
.submit-strip>p{color:var(--tx-2)}
.method-cta{background:linear-gradient(120deg,rgba(77,220,255,.14),rgba(255,79,216,.14)),var(--panel)}
.method-cta span{color:var(--tx-3)}
.method-cta h2{color:#fff}
.method-cta p{color:var(--tx-2)}
.method-cta a{color:var(--blue)}
.genre-rail{background:var(--panel)}
/* Kicker i nagłówek pasma gatunków: stary motyw trzymał je w `--purple` i `--ink`,
   które na ciemnym tle były praktycznie nieczytelne (zmierzone: rgb(96,71,235)
   i rgb(20,22,46)). Nagłówek dostał też pełną szerokość — w kolumnie 220 px
   łamał się na trzy linie („Popularne / gatunki”). */
.genre-rail{grid-template-columns:minmax(0,1fr);gap:16px}
.genre-rail>div p{margin-bottom:8px}
.genre-rail>div p{color:var(--blue)}
.genre-rail h2{color:#fff}
/* Kafelki gatunków: stary arkusz ustawiał `.genre-rail nav a{background:#fafafd}`
   z TĄ SAMĄ specyficznością i wygrywał kolejnością w kaskadzie, więc kafelki były
   białe. Dlatego tło jest tu nazwane wprost i to samo dla `.all-genres`. */
.genre-rail nav a,.genre-rail nav a.all-genres{
  background:var(--panel-2);border:1px solid var(--edge);border-radius:11px;
  color:#fff;font-weight:750;
}
.genre-rail nav a:hover,.genre-rail nav a.all-genres:hover{
  background:rgba(77,220,255,.12);border-color:var(--blue);color:#fff;
}
.genre-rail nav a b{color:var(--blue)}
.genre-rail nav a.all-genres b{color:var(--blue)}
.genre-rail nav .g-emoji{font-style:normal;margin-right:8px;font-size:14px;line-height:1}
/* Siatka o STAŁEJ liczbie kolumn: przy `auto-fit` ostatni rząd rozciągał kafelki
   na całą szerokość („Wszystkie gatunki” było szersze od pozostałych). Stałe
   kolumny trzymają wszystkie kafelki w jednej szerokości, a przycisk wyrównuje
   się do krawędzi siatki. Breakpointy dobrane do miejsca, jakie ma pasmo. */
.genre-rail nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.genre-rail nav a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:46px;padding:0 14px;min-width:0;
}
.genre-rail nav a span{display:flex;align-items:center;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* Gdy po kafelkach zostaje cały pusty rząd, wejście „Wszystkie gatunki” zajmuje
   go w całości (wyrównane do siatki), zamiast wisieć samotnie w pierwszej kolumnie. */
.genre-rail nav a.all-genres:last-child{grid-column:1/-1;justify-content:center}
.genre-rail nav a.all-genres:last-child span{justify-content:center}
.genre-rail nav a.all-genres:last-child b{margin-left:10px}
@media(max-width:1080px){.genre-rail nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.genre-rail nav{grid-template-columns:minmax(0,1fr)}}

/* --- Odtwarzacz i miniatury -------------------------------------------------- */
.yt-play-surface,.yt-facade,.latest-cover,.art-cover,.cover-ph,.feed-thumb{
  background:#080b1a;border-radius:12px;overflow:hidden;
}
.yt-facade-button{background:rgba(5,6,14,.72);color:#fff;box-shadow:var(--glow-cyan)}
.yt-unavailable,.platform-fallback{background:var(--panel-2);color:var(--tx-3)}
.platform-fallback strong{color:#fff}
.radar-tape,.wave-a,.wave-b{opacity:.5}

/* --- Zakładki profilu i pasek jakości ---------------------------------------- */
.atab,.atab-scroll{border-color:var(--edge)}
.atab a{color:var(--tx-2);border-radius:9px}
.atab a:hover{color:#fff;background:rgba(77,220,255,.08)}
.atab a.aktywny{color:#fff;background:rgba(77,220,255,.14)}
.quality-state,.source-state,.data-availability-state{color:var(--tx-2)}
.quality-state[data-state="ok"],.source-state[data-state="ok"]{color:var(--up)}
.feed-item,.lt-item,.rel-list li,.track-list li,.feed-sub{border-color:var(--edge-soft)}
.feed-title,.lt-title,.rel-title,.feed-art,.lt-art{color:#fff}
.feed-meta,.lt-meta,.rel-date,.rel-art,.rel-plat,.lt-format{color:var(--tx-3)}

/* --- Dostępność: ruch wyłączony na życzenie ---------------------------------- */
@media(prefers-reduced-motion:reduce){
  .cta:hover,.chip:hover{transform:none}
}

/* ==========================================================================
   Podstrony: profile artystów, premiery, gatunki, radar, teksty.
   Ten sam język formy co strona główna i ranking: ciemna karta, kolor tylko
   tam, gdzie niesie znaczenie (platforma, ruch, gatunek).
   ========================================================================== */

/* --- Nagłówek zwykłej podstrony ---------------------------------------------- */
.page-head{max-width:900px;margin:6px 0 26px}
.page-title{
  margin:0;color:#fff;font:900 clamp(34px,5vw,64px)/.98 var(--display);
  letter-spacing:-.04em;
}
.page-sub{color:var(--tx-2)}
.breadcrumbs,.breadcrumb{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px;
  color:var(--tx-4);font:700 10px/1.4 var(--data);letter-spacing:.06em;text-transform:uppercase;
}
.breadcrumbs a,.breadcrumb a{color:var(--tx-3)}
.breadcrumbs a:hover{color:var(--blue)}
.breadcrumbs strong{color:#fff}

/* --- Profil artysty ---------------------------------------------------------- */
.artist-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(520px 300px at 12% 0%,rgba(77,220,255,.16),transparent 66%),
    radial-gradient(460px 300px at 96% 100%,rgba(255,79,216,.14),transparent 68%),
    linear-gradient(160deg,#0d1533,#080b1a);
  border:1px solid var(--edge);border-radius:20px;
}
.artist-hero h1,.hero-name{color:#fff}
.hero-sub,.hero-meta p{color:var(--tx-2)}
.hero-sub a{color:var(--blue)}
.artist-rankline .rank-pill{
  background:rgba(77,220,255,.14);border:1px solid rgba(77,220,255,.4);color:#fff;
}
.artist-rankline .rank-pill b{color:var(--blue)}
.source-state{color:var(--tx-3)}
.artist-portrait img{border-radius:16px}
.portrait-wave{opacity:.35}
.platform-link{
  border:1px solid var(--edge);border-radius:11px;color:var(--tx-2);background:rgba(255,255,255,.04);
}
.platform-link:hover{border-color:var(--blue);color:#fff;background:rgba(77,220,255,.1)}

/* Pasek platform na profilu: jedna forma dla wszystkich, kolor marki w ikonie
   i delikatnym tle. Pokazujemy tylko linki, które mamy w bazie — brak platformy
   nie udaje, że istnieje. */
.hero-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.hero-links-empty{margin:0;color:var(--tx-3);font-size:12px}
.platform-chip{
  --brand:var(--blue);
  display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 15px;
  border:1px solid var(--edge);border-radius:12px;background:var(--panel-2);
  color:#fff;font-size:13px;font-weight:800;white-space:nowrap;
  transition:background .15s,border-color .15s;
}
.platform-chip .ico{color:var(--brand);flex:none}
/* Wzmocnienie marki na hover; `color-mix` z pełnym wynikiem (alpha 1), żeby tło
   zostało kryjące — przy mieszaniu z `transparent` wyszłaby półprzezroczystość,
   a ta na ciemnym tle potrafi zniknąć. */
.platform-chip:hover{
  background:color-mix(in srgb,var(--brand) 22%,var(--panel-2));
  border-color:var(--brand);color:#fff;
}
.platform-chip--youtube{--brand:#ff2f4f}
.platform-chip--deezer{--brand:#a238ff}
.platform-chip--spotify{--brand:#1ed760}
.platform-chip--apple{--brand:#ff5a7a}
.platform-chip--tidal{--brand:#23d5d5}
.platform-chip--tiktok{--brand:#25f4ee}
.platform-chip--instagram{--brand:#e1306c}
.platform-chip--facebook{--brand:#2d88ff}
.platform-chip--x{--brand:#c8d2f0}
.platform-chip--www{--brand:#8fb4ff}

.profile-listen{
  background:linear-gradient(150deg,var(--panel-2),var(--panel));
  border:1px solid var(--edge);border-radius:18px;box-shadow:var(--shadow);
}
.profile-listen h2{color:#fff}
.profile-listen p{color:var(--tx-3)}

.platform-history-head h2{color:#fff}
.platform-history-head>p{color:var(--tx-3)}
/* Siatka kart platform ma własne tło w starym motywie (jasne) — bez tej reguły
   puste pole siatki świeciło bielą obok karty YouTube. */
.platform-history-grid{background:transparent;border:0;gap:16px}
.platform-history-card{
  background:var(--panel);border:1px solid var(--edge);border-radius:16px;
  box-shadow:var(--shadow);
}
.platform-history-card>header{border-color:var(--edge-soft)}
.platform-history-card .platform-title span{color:#fff}
.platform-history-card .platform-title small{color:var(--tx-4)}
.platform-history-card>header>a{color:var(--blue)}
.platform-history-card .platform-number strong{color:#fff}
.platform-history-card .platform-number span{color:var(--tx-4)}
.platform-history-card .platform-secondary{color:var(--tx-3)}
.platform-history-card>footer{border-color:var(--edge-soft);color:var(--tx-4)}
.platform-history-card .metric-chart-wrap{
  background:rgba(4,6,16,.6);border:1px solid var(--edge-soft);border-radius:12px;
  color:var(--tx-3);
}
.platform-history-card .metric-chart{max-width:100%;height:auto}
.platform-history-youtube{--platform:#ff3158}
.platform-history-deezer{--platform:#a238ff}
.platform-history-tidal{--platform:#28d6d6}
.platform-history-spotify{--platform:#1ed760}
.platform-history-apple{--platform:#ff5a7a}
.platform-history-card .metric-chart{color:var(--platform)}

.editorial-bio p{color:var(--tx-2)}
.editorial-bio h2,.panel h2{color:#fff}
.album-card{background:var(--panel);border:1px solid var(--edge)}
.album-card:hover{border-color:var(--edge-strong)}
.album-card strong{color:#fff}
.album-card small{color:var(--tx-4)}
.track-list li{border-color:var(--edge-soft)}
.track-list li:hover{background:rgba(77,220,255,.05)}
.track-no{color:var(--tx-4)}
.track-list strong{color:#fff}
.track-list small{color:var(--tx-4)}
.track-archive{border:1px solid var(--edge);border-radius:14px;background:var(--panel)}
.track-archive>summary{color:var(--tx-2)}
.lyrics-index li{border-color:var(--edge-soft)}
.lyrics-index span{color:#fff}
.lyrics-index strong{color:var(--blue)}
.lyrics-index-intro{color:var(--tx-3)}
.source-card{background:var(--panel);border:1px solid var(--edge)}
.source-card p{color:var(--tx-2)}
.source-card a{color:var(--blue)}
.source-details>summary{color:#fff}
.source-details p,.source-details li{color:var(--tx-2)}
.lyrics-sheet{background:var(--panel);border:1px solid var(--edge);border-radius:16px}
.tekst-tresc{color:var(--text)}
.lyrics-source{color:var(--tx-4)}

/* --- Premiery i feed wydań --------------------------------------------------- */
.nowosci-filters{
  background:var(--panel);border:1px solid var(--edge);border-radius:16px;box-shadow:var(--shadow);
}
.nowosci-filters select{
  background:rgba(6,9,22,.8);color:var(--text);border:1px solid var(--edge);
}
.feed-item{background:var(--panel);border:1px solid var(--edge);border-radius:14px}
.feed-item:hover{border-color:var(--edge-strong);background:var(--panel-2)}
.feed-title{color:#fff}
.feed-title:hover{color:var(--blue)}
.feed-art{color:var(--tx-2)}
.feed-date{color:var(--tx-4)}
.feed-thumb-ph{background:var(--panel-2);color:var(--tx-3)}
.rel-plat,.rel-platforma{
  border-radius:999px;padding:3px 9px;font:800 9px/1 var(--data);
  letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.06);color:var(--tx-2);
}
.rel-youtube{background:rgba(255,49,88,.16);color:#ff8fa3}
.rel-deezer{background:rgba(162,56,255,.16);color:#c9a4ff}
.rel-tidal{background:rgba(40,214,214,.16);color:#8ef0f0}
.rel-spotify{background:rgba(30,215,96,.16);color:#8ff0b8}
.pager .chip,.pager-info{color:var(--tx-2)}
.pager-info strong{color:#fff}

/* --- Gatunki ----------------------------------------------------------------- */
.gat-card{
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
  border:1px solid var(--edge);border-radius:16px;
}
.gat-card:hover{border-color:var(--blue);box-shadow:var(--glow-cyan)}
.gat-name{color:#fff}
.gat-count{color:var(--blue)}
/* Ikona gatunku: jedno miejsce definicji dla pasma na stronie głównej, mapy
   gatunków i nagłówka pojedynczego gatunku. */
.g-emoji{font-style:normal;font-size:15px;line-height:1;flex:none}
.g-emoji-lg{font-size:.82em;margin-right:14px;vertical-align:baseline}
.gat-card .g-emoji{margin-right:10px;font-size:17px}
.gat-name{display:flex;align-items:center;min-width:0}
.genre-rank-head{background:rgba(255,255,255,.03);border-color:var(--edge);color:var(--tx-4)}
.rank-list .rk-row-main .rk-who strong,.rank-head~.rank-list strong{color:#fff}

/* --- Radar premier ----------------------------------------------------------- */
.radar-hero,.radar-layout,.radar-method,.radar-proof,.radar-context,.radar-archive{
  background:var(--panel);border:1px solid var(--edge);border-radius:18px;
}
.radar-hero{
  background:
    radial-gradient(560px 300px at 8% 0%,rgba(77,220,255,.16),transparent 64%),
    radial-gradient(500px 300px at 100% 100%,rgba(255,79,216,.14),transparent 66%),
    linear-gradient(165deg,#0d1533,#080b1a);
}
.radar-hero h1,.radar-lead h1{color:#fff}
.radar-lead p,.radar-hero p{color:var(--tx-2)}
.radar-tape{background:rgba(255,255,255,.03);border-color:var(--edge-soft)}
.radar-tape-head{color:var(--tx-4)}
.radar-day-group{border-color:var(--edge-soft)}
.radar-day{color:var(--blue)}
.radar-release-title,.radar-release-copy strong{color:#fff}
.radar-release-copy small,.radar-status{color:var(--tx-4)}
.radar-releases li{border-color:var(--edge-soft)}
.radar-releases li:hover{background:rgba(77,220,255,.05)}
.radar-bar-track{background:rgba(255,255,255,.08)}
.radar-source-link{color:var(--blue)}
.radar-period,.radar-genres{color:var(--tx-3)}
.radar-genres a{color:var(--blue)}
.radar-action-primary{background:linear-gradient(120deg,var(--blue),#8aeaff 45%,var(--pink));color:#05060e}
.radar-action-secondary{border:1px solid var(--edge-strong);color:#fff}

/* --- Lista tygodnia, porównania, teksty -------------------------------------- */
.lt-item,.lt-item-full{background:var(--panel);border:1px solid var(--edge);border-radius:14px}
.lt-item:hover{border-color:var(--edge-strong)}
.lt-pos{color:var(--blue)}
.lt-pos-big{color:#fff}
.lt-title{color:#fff}
.lt-meta,.lt-art,.lt-format,.lt-kom{color:var(--tx-3)}
.porownaj h1,.compare-tool h2{color:#fff}
.compare-table th{color:var(--tx-4);border-color:var(--edge)}
.compare-table td{border-color:var(--edge-soft);color:var(--text)}
.compare-vs{color:var(--pink)}
.utwor-hero h1,.utwor-h1{color:#fff}
.utwor-art,.utwor-desc{color:var(--tx-2)}
.track-hero h1{color:#fff}
.methodology-lead,.doc,.doc-sec{color:var(--tx-2)}
.doc h2,.doc-sec h2,.methodology-lead h2{color:#fff}
.methodology-lead p,.doc p,.doc-sec p,.doc li{color:var(--tx-2)}
.data-quality-grid h2{color:#fff}
.quality-snapshot,.quality-platforms,.quality-corrections{background:var(--panel);border:1px solid var(--edge)}
.admin-msg{color:var(--tx-2)}
.submission-form{background:var(--panel);border:1px solid var(--edge)}
.wakeup{background:rgba(77,220,255,.08);border:1px solid var(--edge);color:var(--tx-2)}