/* Shared music surfaces, including legacy informational pages. */
:root{color-scheme:dark;--ink:#edf2ff;--muted:#aab6cd;--cream:#141b30;--line:#29324d}
body::before{opacity:.12}
.site-header{z-index:65;box-shadow:none}
.brand-logo{filter:none}
.search-in,.search-in:focus,.search-in:active,.panel input,.panel textarea,.filterbar select,.compare-selectors select,.zglos-field input,.zglos-field textarea,.search input{background:#111829;color:#f5f7ff;caret-color:#4ddcff;border-color:#46516d;border-radius:10px;font-size:16px}
.search-in:-webkit-autofill,.search-in:-webkit-autofill:focus{-webkit-text-fill-color:#f5f7ff;box-shadow:0 0 0 1000px #111829 inset;caret-color:#4ddcff}
.search-in::placeholder{color:#aab6cd}
.search-in:focus{outline:2px solid #4ddcff;outline-offset:2px}
.search-submit{border-radius:0 9px 9px 0;background:#22314b;color:#f5f7ff}
.search-submit:hover,.search-submit:focus-visible{background:#314969;color:#fff}
.trust-strip{display:none}
.main{max-width:1280px}
.panel,.doc-sec,.note,.wakeup,.form-card,.compare-tool,.pair-summary,.compare-versus,.data-availability-state,.data-availability-state.is-open,.data-availability-state.is-closed,.curated-pairs li,.track-hero,.work-hero,.song-hero,.zglos-group,.zglos-consent{background:#101629;border-color:#29324d;color:#edf2ff}
.doc-sec h2,.doc-sec h3,.zglos-field label,.zglos-group legend,.pair-summary h2,.radar-context h2,.radar-day-group>h3,.source-details summary{color:#edf2ff}
.zglos-field label,.zglos-group legend{font:600 14px/1.5 var(--body);letter-spacing:0;text-transform:none}
.zglos-consent label{font-size:14px;color:#dce3f4}
.zglos-group,.zglos-consent{border-radius:12px}
.compare-table th,.compare-table td{background:#101629;color:#edf2ff;border-color:#36405a;overflow-wrap:anywhere}
.compare-table{table-layout:fixed;width:100%;font-size:14px}
.compare-table small{display:block;color:#adb9d2}
.radar-action-secondary,.radar-source-link{background:#182139;color:#edf2ff;border-color:#43516f}
.radar-day-group li:hover,.gat-card:hover,.feed-item:hover{background:#182139}
.page-title,.page-head h1{line-height:1.07}
.chart-artist strong,.art-name{white-space:normal;overflow-wrap:anywhere}
.home-hero{padding:48px 32px;gap:40px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:22px;align-items:center}
.home-hero h1{font-size:clamp(40px,4.8vw,66px);line-height:1.03;letter-spacing:-.045em}
.home-hero-lead{font-size:18px;line-height:1.6;max-width:42ch;margin-top:24px}
.home-hero-actions{gap:12px;flex-wrap:wrap}
.home-hero-actions a{font-size:14px;min-height:50px;padding:14px 18px}
.home-stats{margin-top:28px;gap:20px}
.home-stats li span{font:400 12px/1.4 var(--body);text-transform:none}
.home-top5{align-self:center}
.home-top5 .home-top5-artist{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;padding:18px 16px}
.home-top5 .t5-who{gap:10px;min-width:0}
.t5-who strong{font-size:15px;white-space:normal;overflow-wrap:anywhere}
.t5-who small{font:400 11px/1.4 var(--body);margin-top:4px}
.home-top5 footer{padding:16px;font:600 13px var(--body)}
.platform-stats{display:flex;justify-content:flex-end;align-items:center;gap:26px;flex-wrap:wrap}
.platform-stat{display:flex;gap:8px;align-items:center;white-space:nowrap;text-align:left}
.platform-stat i{font-style:normal;color:#ff6685;font-size:15px}
.platform-stat b{font:700 17px/1.3 var(--body);font-variant-numeric:tabular-nums;color:#f5f7ff}
.platform-stat small{display:block;color:#aab6cd;font:400 11px/1.5 var(--body);text-transform:none;letter-spacing:0}
.platform-stats--compact{gap:12px}
.platform-stats--compact .platform-stat{gap:4px}
.platform-stats--compact .platform-stat b{font-size:13px}
.platform-stats--compact .platform-stat small{font-size:10px}
.platform-stats--compact .platform-stat:nth-child(n+3){display:none}
.ranking-hero.topai-shadow-hero{display:flex;align-items:center;justify-content:space-between;padding:32px 0;background:none;border:0;box-shadow:none;gap:24px}
.ranking-hero h1{font-size:clamp(36px,5vw,60px);line-height:1.05}
.ranking-hero .ranking-date{font:400 12px/1.5 var(--body);color:#aab6cd;margin:14px 0 0}
.rk-tools{display:none}
.topai-index-list>li,.topai-index-list>li.is-podium{display:block;background:#101629;border:1px solid #29324d;border-radius:12px;padding:0;box-shadow:none}
.topai-index-list{gap:10px}
.rk-row-main{display:grid;grid-template-columns:44px minmax(160px,1fr) auto;gap:18px;align-items:center;padding:20px}
.rk-pos{font:700 25px/1 var(--body);color:#89a4ce}
.is-podium .rk-pos{color:#66ddf4}
.rk-who{gap:14px;min-width:0}
.rk-who img,.rk-avatar{width:52px;height:52px;object-fit:cover;border-radius:12px}
.rk-who strong{font-size:19px;white-space:normal;overflow-wrap:anywhere}
.rk-who small{font:400 12px/1.4 var(--body);text-transform:none;margin-top:5px}
.rk-why{border-top:0;margin:0;padding:0 20px 10px 82px}
.rk-why>summary{min-height:28px;font:400 12px/1.5 var(--body);color:#aab6cd;padding:0}
.rk-why-body{padding-top:20px}
.artist-hero{padding:32px;gap:28px;min-height:0;border-radius:20px;margin-bottom:24px}
.artist-hero::after,.artist-hero::before,.portrait-wave{display:none}
.artist-portrait{width:156px;height:156px;border-radius:18px;flex-shrink:0}
.artist-portrait img{border-radius:18px}
.hero-name{font-size:clamp(34px,5vw,62px);line-height:1.08;overflow-wrap:anywhere}
.hero-sub{margin:12px 0}
.hero-links{gap:8px;flex-wrap:wrap}
.platform-chip{padding:10px 14px;min-height:44px;font-size:13px}
.artist-intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-bottom:24px}
.artist-intro-grid:not(:has(.spotify-listen)){grid-template-columns:1fr}
.editorial-bio{margin:0;padding:28px}
.editorial-bio p:last-child{color:#c5cfe3;font:400 16px/1.8 var(--body);max-width:72ch;white-space:pre-line}
.spotify-listen{padding:18px;background:#101629;border:1px solid #29324d;border-radius:14px}
.spotify-listen iframe{display:block;border:0;border-radius:12px;max-width:100%}
.profile-listen{padding:24px;gap:24px;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);margin:0 0 24px}
.profile-listen h2{font-size:clamp(23px,3vw,34px);line-height:1.2}
.artist-layout{display:block}
.artist-history-fold{border:1px solid #29324d;border-radius:12px;margin:0 0 24px;background:#101629}
.artist-history-fold>summary{padding:20px;cursor:pointer;font-weight:650}
.artist-history-fold .platform-history{padding:0 20px 20px;margin:0;border:0}
.listen-intro{max-width:760px;padding:35px 0 26px}
.listen-intro h1{font-size:clamp(38px,5.7vw,68px);line-height:1.07;letter-spacing:-.045em;margin:12px 0 20px;color:#f5f7ff}
.listen-intro em{font-style:normal;color:#66ddf4}
.listen-intro>p:last-child{font-size:17px;line-height:1.6;color:#b8c5dc;max-width:55ch}
.radio{max-width:1000px;background:#101629;border:1px solid #29324d;border-radius:20px;padding:24px;margin-bottom:48px}
.radio-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}
.radio-toolbar label{font-weight:650;font-size:17px}
.radio-toolbar select{background:#1b2540;color:#f5f7ff;border:1px solid #526180;border-radius:10px;padding:12px;max-width:100%;font:inherit}
.radio-stage{position:relative;aspect-ratio:16/9;min-height:220px;background:#070b16;border-radius:14px;overflow:hidden}
#radio-player{width:100%;height:100%;position:absolute;inset:0;border:0}
.radio-start{position:relative;text-align:center;padding:36px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}
.radio-start[hidden]{display:none}
.radio-start>span{font-size:48px;color:#66ddf4}
.radio-start h2{font-size:clamp(20px,3vw,32px);margin:12px 0}
.radio-start p{color:#b8c5dc;margin:0 0 22px}
.radio-start button{box-shadow:none;border-radius:10px;padding:15px 24px;color:#07121f}
.radio-now{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:24px}
.radio-now h2{font-size:22px;line-height:1.3;margin:0 0 8px;overflow-wrap:anywhere}
.radio-now a{font-size:14px;color:#66ddf4}
.radio-now button{flex-shrink:0;min-height:44px;border-radius:10px;cursor:pointer}
#radio-status{font:400 13px/1.6 var(--body);color:#aab6cd;margin:20px 0 0}
.player-dock{z-index:80}
@media(max-width:1100px){.home-top5{max-width:100%;width:100%}.header-inner{gap:14px}.artist-intro-grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){
 .main{padding-left:16px;padding-right:16px}.home-hero{margin-left:0;margin-right:0;padding:24px 0;background:none;gap:28px}.home-hero h1{font-size:44px}.home-hero-lead{font-size:16px}.home-top5 .home-top5-artist{padding:16px 12px;gap:12px;grid-template-columns:44px minmax(0,1fr)}
 .home-top5 .platform-stats{grid-column:2;justify-content:flex-start;margin-left:50px}.t5-who strong{font-size:16px}.home-stats{gap:14px}.home-stats li span{font-size:11px}.ranking-hero.topai-shadow-hero{display:block}.ranking-hero>.chip{margin-top:18px}
 .rk-row-main{grid-template-columns:30px minmax(0,1fr);gap:12px;padding:16px}.rk-who img,.rk-avatar{width:44px;height:44px}.rk-who strong{font-size:17px}.rk-row-main>.platform-stats{grid-column:2;justify-content:flex-start;padding-left:58px;gap:16px}.platform-stat b{font-size:14px}.platform-stat small{font-size:10px}.rk-why{padding:0 16px 12px 58px}.rk-why-body{margin-left:-42px}.rk-pos{font-size:22px}
 .artist-hero{padding:20px;gap:16px;display:flex;flex-direction:column;align-items:flex-start}.artist-portrait{width:108px;height:108px}.artist-hero .hero-name{font-size:38px}.rank-pill{font-size:10px;white-space:normal;line-height:1.5;padding:8px 12px}.artist-intro-grid,.profile-listen{grid-template-columns:1fr}.editorial-bio{padding:22px}.profile-listen{padding:18px}.artist-intro-grid{gap:18px}.hero-links{gap:6px}.platform-chip{padding:9px 11px}
 .compare-table{font-size:12px}.compare-table th,.compare-table td{padding:10px 6px}.compare-selectors{gap:12px}.player-dock{bottom:calc(78px + env(safe-area-inset-bottom));max-height:calc(100dvh - 175px);overflow:auto}.player-dock iframe{min-height:200px}.radio{padding:16px}.radio-toolbar{display:block}.radio-toolbar label{display:block;margin-bottom:12px}.radio-toolbar select{width:100%}.radio-stage{aspect-ratio:auto;min-height:250px}.radio-start{min-height:250px;padding:22px 14px}.radio-start>span{font-size:32px}.radio-start p{font-size:14px}.radio-now{display:block}.radio-now button{margin-top:18px}.radio-now h2{font-size:20px}.listen-intro{padding-top:24px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.analytics-consent{background:#141c30;color:#edf2ff;border-color:#43516f}.analytics-consent strong,.analytics-consent h2{color:#f5f7ff}.analytics-consent p{color:#c5cfe3}.analytics-consent-actions button.secondary{background:#26324b;color:#f5f7ff;border-color:#53617c}.analytics-consent a{color:#66ddf4}

.home-ranking-meta{margin-top:12px;color:#aab6cd;font:400 11px/1.6 var(--body)}.home-ranking-meta summary{cursor:pointer}.home-ranking-meta p{margin:10px 0 0}
@media(max-width:768px){.nav-menu>.nav-toggle,.nav-menu[open]>.nav-toggle{background:#172139;color:#edf2ff;border-color:#40516f}.mobile-dock a[aria-current="page"],.mobile-dock button[aria-current="page"]{background:#16263a;color:#66ddf4}.mobile-dock{background:#0b1020}.mobile-dock a[aria-current="page"]::before{background:#66ddf4}}

@media(max-width:768px){.search-box>.search-toggle{background:#172139;color:#edf2ff;border-color:#40516f}.nav-menu[open]>.nav{background:#121a2c;border-color:#40516f}.nav-menu[open] .nav-item{color:#dce5f8}.nav-menu[open] .nav-item:hover,.nav-menu[open] .nav-item:focus-visible,.nav-menu[open] .nav-item[aria-current="page"]{background:#22334d;color:#66ddf4}}

.platform-stat i svg{width:16px;height:16px;display:block}.radio-help{display:flex;flex-wrap:wrap;gap:16px;align-items:center;font-size:13px;color:#aab6cd;margin-top:14px}.radio-help [hidden]{display:none}.radio-help button{min-height:44px;cursor:pointer}.spotify-open{display:inline-block;margin-top:14px;color:#66ddf4;font-size:13px}

.topai-index-list.rank-list{background:transparent;border:0;gap:8px}
.topai-index-list.rank-list>li{min-height:0}
.topai-index-list .rk-row-main{min-height:0;padding:14px 18px}
.topai-index-list .rk-who>img,.topai-index-list .rk-who>.rk-avatar{width:48px;height:48px}
.topai-index-list .rk-why{justify-self:stretch;width:auto;padding:0 18px 10px 80px}
.topai-index-list .rk-why>summary{min-height:24px;border:0;border-radius:0;background:none;justify-content:flex-start;gap:8px}
.topai-index-list .rk-why[open]>summary{background:none}
@media(max-width:768px){.topai-index-list .rk-why{padding-left:60px}.topai-index-list .rk-row-main{padding:14px}.search-box>summary.search-toggle{background:#172139!important;color:#edf2ff!important;border-color:#40516f}}

:root{--phase-ink:#edf2ff;--phase-muted:#aab6cd;--phase-surface:#101629;--phase-paper:#0b1020;--phase-line:#29324d;--phase-purple:#aa91ff;--phase-blue:#66ddf4}
.platform-stats--compact .platform-stat:nth-child(n+3){display:flex}
.artist-quick-stats{display:flex;gap:24px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid #29324d}
.artist-quick-stats>div{display:flex;gap:9px;align-items:center}.artist-quick-stats svg{width:18px;height:18px;flex-shrink:0}.artist-quick-stats b{font-size:21px;line-height:1.3;color:#f5f7ff}.artist-quick-stats small{display:block;color:#aab6cd;font-size:11px;line-height:1.6}
@media(max-width:768px){.artist-quick-stats{gap:16px}.artist-quick-stats b{font-size:18px}.search-toggle span:first-child{color:#66ddf4}}
.rk-who small,.t5-who small{display:none}
.platform-stat i:has(.ico-spotify){color:#1ed760}
@media(max-width:768px){
 .topai-index-list .rk-who{min-height:48px}.topai-index-list .rk-pos{width:30px}
 .topai-index-list .rk-row-main>.platform-stats,.home-top5 .platform-stats{grid-column:1/-1;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;justify-items:start;align-items:start}
 .topai-index-list .platform-stat,.home-top5 .platform-stat{gap:5px;align-items:flex-start;white-space:normal}
 .topai-index-list .platform-stat i,.home-top5 .platform-stat i{padding-top:2px}
 .topai-index-list .platform-stat small,.home-top5 .platform-stat small{font-size:9px;line-height:1.4}
 .topai-index-list .rk-why{padding-left:14px}
 .artist-hero .hero-meta{width:100%;min-width:0;margin-top:0}
 .artist-hero .hero-sub span{display:inline;margin:0}
 .artist-hero .hero-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
 .artist-hero .platform-chip{width:auto;min-width:0;justify-content:flex-start}
}


/* 2026-09-16 — desktop UI repair: czytelny nagłówek bez kolizji. */
@media(min-width:1501px){
 .header-inner{max-width:1540px;grid-template-columns:194px minmax(230px,320px) minmax(0,1fr);gap:16px;padding-inline:22px}
 .brand,.brand-logo{width:194px}
 .nav-desktop{gap:1px}
 .nav-item{padding-inline:8px;font-size:11px}
 .nav-item--cta{margin-left:4px}
}
@media(min-width:1121px) and (max-width:1500px){
 .header-inner{max-width:1320px;grid-template-columns:194px auto minmax(0,1fr);gap:12px;padding-inline:18px}
 .brand,.brand-logo{width:194px}
 .search-box{position:relative;justify-self:start}
 .search-box>.search-toggle{display:flex;background:#172139;color:#edf2ff;border-color:#40516f}
 .search-box:not([open])>.search{display:none}
 .search-box[open]>.search{position:absolute;top:52px;left:0;z-index:90;width:320px;display:grid;padding:8px;border:1px solid #40516f;border-radius:12px;background:#0f1729;box-shadow:0 18px 46px rgba(0,0,0,.45)}
 .nav-desktop{grid-column:3;gap:0}
 .nav-item{padding-inline:7px;font-size:10.5px}
 .nav-item--cta{margin-left:3px}
}

/* Top 5: metryki schodzą pod nazwę zamiast zgniatać artystę w wąskiej kolumnie. */
@media(min-width:769px){
 .home-top5 .home-top5-artist{grid-template-columns:44px minmax(0,1fr);row-gap:8px;padding:14px 16px}
 .home-top5 .t5-who{grid-column:2}
 .home-top5 .t5-who strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
 .home-top5 .platform-stats{grid-column:2;justify-content:flex-start;margin-left:58px;gap:16px;flex-wrap:wrap}
 .home-top5 .platform-stat b{font-size:13px}
 .home-top5 .platform-stat small{font-size:9.5px}
}

/* Ranking YouTube: ciemny motyw ma być spójny również w odziedziczonych komponentach. */
.ranking-raw-note{background:#101629!important;border-color:#29324d!important;color:#aab6cd!important}
.ranking-raw-note strong{color:#f5f7ff!important}
.ranking-raw-note a{color:#66ddf4!important}
.ranking-control{background:#101629!important;border-color:#29324d!important}
.ranking-control .chip{background:#151d32;border-color:#34405b;color:#c1cbe0}
.ranking-control .chip:hover{background:#1b2841;border-color:#66ddf4;color:#f5f7ff}
.ranking-control .chip-on{background:#5d48d8!important;border-color:#7d67ef!important;color:#fff!important}
.ranking-control .flt,.ranking-control .flt span{color:#aab6cd}
.ranking-control .flt select{background:#111829;color:#edf2ff;border-color:#46516d}
.ranking-table-head{background:transparent;border-top:1px solid #29324d;border-bottom:1px solid #29324d;color:#7f8ca9}
.ranking-table>li{border-bottom-color:#202a40}
.ranking-table>li:hover{background:#0f1729}
.ranking-table .rank-stat-active{background:rgba(102,221,244,.10);border:1px solid rgba(102,221,244,.22);color:#dffaff}
.ranking-table .rank-date{color:#8794b0;line-height:1.35}
.ranking-table .rank-person strong{color:#f5f7ff}
@media(min-width:1121px){
 .ranking-table-head,.ranking-table>li{grid-template-columns:34px minmax(210px,1.5fr) repeat(4,minmax(76px,.52fr)) 118px 42px;gap:10px}
 .ranking-table .rank-date{font-size:9px}
}

/* Karta artysty: mniej kolumn i źródła pod wykresem, nie w wąskiej szpalcie obok. */
.artist-profile .kpi .meta{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;align-items:end;gap:7px}
.artist-profile .kpi .meta .spark{width:min(100%,180px);height:auto}
.artist-profile .kpi .meta .src{max-width:100%;line-height:1.4;overflow-wrap:anywhere}
.artist-profile .todo{white-space:normal;line-height:1.35;max-width:100%}
@media(min-width:1001px){.artist-profile .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:621px) and (max-width:1000px){.artist-profile .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.artist-profile .kpis{grid-template-columns:minmax(0,1fr)}}

/* Wyróżniony utwór: spokojniejsza hierarchia na desktopie. */
@media(min-width:881px){
 .artist-profile .featured{grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:22px}
 .artist-profile .track-title{font-size:clamp(20px,2vw,25px);line-height:1.2}
 .artist-profile .feat-stats{gap:10px}
}

/* Homepage compact pass — 2026-09-16. Czytelność mobilna > gęstość dashboardu.
   Kafelki liczb (uwaga właściciela 2026-09-20): treść wyśrodkowana, wspólny
   górny rytm liczb i etykiet, spójny margines wewnętrzny — wcześniej tekst
   stał przy lewej krawędzi i wyglądał na niedokończony. */
.home-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch}
.home-stats li{min-width:0;padding:16px 14px;border:1px solid #29324d;border-radius:14px;background:#101629;text-align:center;display:grid;justify-items:center;align-content:start}
.home-stats li b{display:block;font:750 30px/1 var(--body);letter-spacing:-.03em;color:#f5f7ff;font-variant-numeric:tabular-nums}
.home-stats li span{display:block;margin-top:8px;color:#aebbd2;font:600 11px/1.25 var(--body)}
.home-stats .home-num-note{display:block;margin-top:5px;color:#7383a3;font:500 9px/1.2 var(--body)}
.home-top5-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.home-top5-head>div{display:grid;gap:5px;min-width:0}
.home-top5-head>div>span{font-weight:650}
.home-top5-head strong,.home-top5-head h1{margin:0;color:#f5f7ff}
.home-top5-head small{font:500 10px/1.3 var(--body);color:#7f90b1;text-transform:none;letter-spacing:0}
.home-top5 .home-top5-artist{grid-template-columns:38px minmax(0,1fr);gap:7px 10px;padding:12px 14px;align-items:center}
.home-top5 .t5-place{grid-row:1 / span 2;align-self:center}
.home-top5 .t5-pos{font-size:24px}
.home-top5 .t5-tie{font-size:8px;margin-top:3px}
.home-top5 .t5-who{grid-column:2;gap:9px}
.home-top5 .t5-who img,.home-top5 .t5-avatar{width:40px;height:40px;border-radius:10px;object-fit:cover}
.home-top5 .t5-who strong{font-size:16px;line-height:1.15}
.home-top5 .t5-who small{display:none}
.home-top5 .platform-stats,.home-top5 .platform-stats--compact{grid-column:2;margin:0!important;justify-content:flex-start;gap:5px 12px;flex-wrap:wrap}
.home-top5 .platform-stats--compact .platform-stat:nth-child(n+3){display:flex}
.home-top5 .platform-stat{gap:4px}
.home-top5 .platform-stat i{display:flex;font-size:12px}
.home-top5 .platform-stat i svg{width:14px;height:14px}
.home-top5 .platform-stat b{font-size:12px;line-height:1.1}
.home-top5 .platform-stat small{font-size:8px;line-height:1.15;max-width:76px;color:#7f90aa}
.home-top5 footer.home-top5-footer{padding:12px 14px;border-top:1px solid #252f49;text-align:center}
.home-top5-footer a{font-size:12px;color:#66ddf4}
.home-two-col .release-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mid-who--with-thumb{display:grid!important;grid-template-columns:82px minmax(0,1fr);align-items:center;gap:10px}
.rel-thumb--radar{width:82px;min-width:82px;aspect-ratio:16/9;border-radius:9px}
.home-releases-compact ol{display:grid;gap:10px}
@media(max-width:768px){
 .home-stats{margin-top:22px;gap:8px}.home-stats li{padding:12px 8px;border-radius:12px}.home-stats li b{font-size:26px}.home-stats li span{font-size:10px}.home-stats .home-num-note{font-size:8px}
 .home-top5{border-radius:16px}.home-top5 header{padding:14px}.home-top5 .home-top5-artist{grid-template-columns:34px minmax(0,1fr);padding:11px 12px}.home-top5 .t5-pos{font-size:22px}.home-top5 .t5-who img,.home-top5 .t5-avatar{width:38px;height:38px}.home-top5 .t5-who strong{font-size:15px}
 .home-top5 .platform-stats{grid-column:2;padding-left:0!important;gap:5px 10px}.home-top5 .platform-stat b{font-size:11px}.home-top5 .platform-stat small{font-size:7.5px;max-width:68px}
 .home-two-col .release-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-two-col .release-card{padding:7px;gap:7px}.home-two-col .release-card strong{font-size:13px;line-height:1.25}.home-two-col .release-card small{font-size:9px}
 .mid-row--plain{grid-template-columns:58px minmax(0,1fr);gap:8px}.mid-date{font-size:9px}.mid-who--with-thumb{grid-template-columns:72px minmax(0,1fr);gap:8px}.rel-thumb--radar{width:72px;min-width:72px}.mid-who--with-thumb strong{font-size:13px}.mid-who--with-thumb small{font-size:9px}
}

/* 2026-09-17 — TopAIMuza Index cards */
.rk-index-key{display:flex;flex-wrap:wrap;gap:7px 10px;margin-top:10px}.rk-index-key span{padding:5px 8px;border:1px solid #29324d;border-radius:999px;background:#101629;color:#91a0bd;font:600 9px/1.2 var(--body)}
.topai-index-list.rank-list{display:grid;gap:10px}.topai-index-list.rank-list>li,.topai-index-list.rank-list>li.is-podium{margin:0;border:1px solid rgba(73,98,158,.42);border-radius:16px;background:linear-gradient(180deg,rgba(20,31,65,.94),rgba(12,20,48,.97));overflow:hidden}
.topai-index-list.rank-list>li.is-place-1{border-color:rgba(174,67,255,.88);background:radial-gradient(520px 140px at 4% 15%,rgba(84,51,255,.30),transparent 70%),radial-gradient(420px 140px at 100% 0%,rgba(224,53,255,.20),transparent 72%),linear-gradient(100deg,rgba(26,28,88,.98),rgba(24,20,70,.98));box-shadow:inset 0 0 28px rgba(91,63,255,.14)}
.topai-index-list.rank-list>li.is-place-2{border-color:rgba(179,199,236,.50)}.topai-index-list.rank-list>li.is-place-3{border-color:rgba(255,171,118,.46)}
.topai-index-list .rk-row-main{display:grid;grid-template-columns:62px minmax(170px,1fr) minmax(300px,auto) 112px;gap:12px;align-items:center;padding:14px 16px;min-height:0}
.topai-index-list .rk-place{display:grid;justify-items:center;gap:3px;min-width:54px}.topai-index-list .rk-medal{font-size:16px;line-height:1}.topai-index-list .rk-pos{width:auto;min-width:0;font:800 28px/.95 var(--body);color:#66ddf4;text-align:center}
.topai-index-list .is-place-1 .rk-pos{background:linear-gradient(180deg,#ff7bf4,#8d63ff);-webkit-background-clip:text;background-clip:text;color:transparent}.topai-index-list .is-place-2 .rk-pos{color:#dbe5ff}.topai-index-list .is-place-3 .rk-pos{color:#ffbd8e}
.topai-index-list .rk-who{min-width:0;gap:10px}.topai-index-list .rk-who>span:last-child{min-width:0}.topai-index-list .rk-who strong{display:block;white-space:normal;overflow-wrap:anywhere;font-size:17px;line-height:1.15}.topai-index-list .rk-who img,.topai-index-list .rk-who>.rk-avatar{width:46px;height:46px;border-radius:11px}
.topai-index-list .platform-stats{display:grid;grid-template-columns:repeat(3,minmax(92px,1fr));gap:6px;justify-content:stretch}.topai-index-list .platform-stat{min-width:0;padding:7px 8px;border:1px solid rgba(70,96,156,.34);border-radius:9px;background:rgba(6,15,40,.34)}.topai-index-list .platform-stat b{font-size:12px}.topai-index-list .platform-stat small{font-size:8px;line-height:1.2;white-space:normal}
.topai-index-list .rk-move{min-width:0;justify-content:flex-end}.topai-index-list .rk-move .mv{padding:7px 9px;border:1px solid #31405d;border-radius:9px;background:rgba(255,255,255,.04);font-size:9.5px}.topai-index-list .rk-move .mv-up{background:rgba(60,232,166,.10);border-color:rgba(60,232,166,.28)}.topai-index-list .rk-move .mv-down{background:rgba(255,107,138,.10);border-color:rgba(255,107,138,.28)}
.topai-index-list .rk-why{padding:0 16px 10px 78px;border-top:1px solid rgba(73,98,158,.18)}.topai-index-list .rk-why>summary{min-height:34px}.topai-index-list .rk-why-label{font-weight:650}
@media(max-width:1050px){.topai-index-list .rk-row-main{grid-template-columns:56px minmax(150px,1fr) 100px}.topai-index-list .platform-stats{grid-column:2/-1;grid-row:2;grid-template-columns:repeat(3,minmax(90px,1fr))}.topai-index-list .rk-move{grid-column:3;grid-row:1}.topai-index-list .rk-why{padding-left:72px}}
@media(max-width:768px){.rk-index-key{gap:6px}.rk-index-key span{font-size:8px}.topai-index-list .rk-row-main{grid-template-columns:46px minmax(0,1fr) auto;gap:8px;padding:11px 10px}.topai-index-list .rk-place{min-width:42px}.topai-index-list .rk-medal{font-size:13px}.topai-index-list .rk-pos{font-size:24px}.topai-index-list .rk-who img,.topai-index-list .rk-who>.rk-avatar{width:40px;height:40px}.topai-index-list .rk-who strong{font-size:15px}.topai-index-list .platform-stats{grid-column:2/-1;grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.topai-index-list .platform-stat{padding:6px 5px}.topai-index-list .platform-stat b{font-size:10.5px}.topai-index-list .platform-stat small{font-size:7px}.topai-index-list .rk-move{grid-column:3;grid-row:1}.topai-index-list .rk-move .mv{padding:5px 6px;font-size:8.5px}.topai-index-list .rk-move .mv-copy{display:none}.topai-index-list .rk-why{padding:0 10px 8px 56px}.topai-index-list .rk-why>summary{min-height:32px;font-size:9px}}

/* ---------------------------------------------------------------------------
   MENU MOBILNE NAGŁÓWKA — przebudowa 2026-09-21
   ---------------------------------------------------------------------------
   Ten arkusz ładuje się w `base.html` PO `topaimuza.css`, `phase1-foundation.css`
   i `cyber-*.css` (`artist-suggest.css`, ostatni w kolejności, nie dotyka
   nawigacji), więc jest ostatnim słowem kaskady dla chrome'u nagłówka — dlatego
   reguły menu mobilnego mieszkają tutaj, obok wcześniejszych nadpisań
   `.nav-menu`.

   Zostaje natywny `<details>`: zero nowego HTML-a, zero nowego JS-a. Fokus,
   Escape, tap w tło (`div.menu-backdrop`), `aria-expanded` i `inert` obsługuje
   `phase1-shell.js`.

   Poprzedni wygląd brał się z trzech rzeczy:
     1. `.nav` (klasa wspólna z belką desktopową) wnosił jednokolumnową siatkę
        ~159 px, więc wiersze były WĘŻSZE niż sam panel i „wisiały” przy lewej
        krawędzi, a prawa połowa panelu była pusta;
     2. panel był pływającą kartą 280 px przypiętą do prawej, bez tła pod sobą,
        więc wyglądał jak dropdown desktopowy rzucony na hero;
     3. rzędy 46 px bez separatorów, z 32 px kolumną emoji i bez żadnej strzałki
        stanu — brak hierarchii i rytmu.

   Teraz: panel na całą szerokość belki, jedna kolumna, wiersze 48 px, kolumna
   ikony 22 px, strzałka po prawej, włoskowate separatory, mocniejsze przygaszenie
   treści pod menu i wyraźny stan otwarcia przycisku.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Tło pod menu. Element tworzy `phase1-shell.js` (`div.menu-backdrop`
     z atrybutem `hidden`); tutaj dostaje realne przygaszenie i rozmycie, żeby
     otwarte menu czytało się jako warstwa, a nie jako przypadkowo przykryty
     hero. Zostaje POD belką (65), więc panel jest zawsze nad nim. */
  .menu-backdrop {
    z-index: 44;
    background: rgba(4, 7, 16, .66);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }

  /* Panel pozycjonuje się względem belki, a nie względem ~62-pikselowego
     przycisku. `top: calc(100% + 6px)` trzyma go pod belką także wtedy, gdy
     rozwinięte pole szukajki zwiększy jej wysokość. */
  .header-inner { position: relative; }
  .nav-menu { position: static; }

  .nav-menu[open] > .nav {
    position: absolute;
    top: calc(100% + 6px);
    left: 12px;
    right: 12px;
    width: auto;
    display: grid;
    /* Naprawa (1): jawna, pojedyncza kolumna o pełnej szerokości panelu. */
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 10px 6px 6px;
    max-height: min(72vh, 460px);
    max-height: min(72dvh, 460px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #0d1524;
    border: 1px solid #2b3956;
    border-radius: 14px;
    box-shadow: 0 22px 48px rgba(2, 5, 14, .6);
  }

  /* Akcent marki na górnej krawędzi panelu — zamiast karecika, który zostałby
     obcięty przez `overflow-y: auto`. */
  .nav-menu[open] > .nav::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 14px;
    right: 14px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #5fd8f2, #8b5cf6);
  }

  .nav-menu[open] .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 12px;
    border-radius: 10px;
    color: #e3e9f8;
    font-size: 12.5px;
    letter-spacing: .04em;
  }

  /* Rytm pionowy: włoskowaty separator między wierszami zamiast pustych
     odstępów, które rozciągały panel. */
  .nav-menu[open] .nav-item + .nav-item {
    box-shadow: inset 0 1px 0 rgba(120, 145, 200, .14);
  }

  .nav-menu[open] .nav-item:hover,
  .nav-menu[open] .nav-item:focus-visible {
    background: #1b2740;
    color: #fff;
  }

  /* Bieżąca strona: tint + akcent na lewej krawędzi wiersza. */
  .nav-menu[open] .nav-item[aria-current="page"] {
    background: #14243c;
    color: #7fe0f6;
    box-shadow: inset 3px 0 0 #5fd8f2;
  }

  /* Stała kolumna ikony = etykiety startują w tej samej linii w każdym wierszu
     (wcześniej emoji miało 32 px, więc tekst „uciekał” w prawo). */
  .nav-menu .nav-emoji {
    flex: 0 0 22px;
    width: 22px;
    text-align: center;
    font-size: 15px;
    line-height: 1;
  }

  /* Strzałka stanu po prawej. Nadpisuje absolutną kreskę
     `.nav-item.active::after` z arkusza bazowego (tam była podkreśleniem
     aktywnej pozycji w belce poziomej). */
  .nav-menu[open] .nav-item::after {
    content: "\203A";
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    height: auto;
    margin-left: auto;
    background: none;
    box-shadow: none;
    color: #77859f;
    font-size: 18px;
    line-height: 1;
  }

  .nav-menu[open] .nav-item[aria-current="page"]::after { color: #5fd8f2; }

  /* Przycisk „Menu”: ten sam kształt i kolor co „Szukaj” obok (spójna belka),
     a stan otwarcia dostaje akcent i obrót znaku. Obrót robi już
     `topaimuza.css` (`.nav-menu[open] > summary span`), tu dokładamy animację. */
  .nav-menu > .nav-toggle {
    gap: 8px;
    padding: 0 11px;
    border-radius: 10px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
  }

  .nav-menu > .nav-toggle span {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    transition: transform .2s ease;
  }

  .nav-menu > .nav-toggle:hover,
  .nav-menu > .nav-toggle:focus-visible {
    border-color: #5a76a8;
    color: #fff;
  }

  .nav-menu[open] > .nav-toggle {
    background: #1d2b47;
    border-color: #5f7db4;
    color: #fff;
  }
}


/* AdSense-readiness UI pass 2026-09-23: inherited light surfaces must not
   punch white holes through the dark product, and source cards stay readable. */
.doc-note{display:block;padding:10px 12px;border:1px solid #34405b;border-radius:10px;background:#151d32!important;color:#b9c5dc!important}
.compare-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(110px,.65fr) minmax(110px,.65fr);gap:12px;align-items:center;padding:14px 16px;background:#101629!important;border-bottom:1px solid #36405a;color:#edf2ff!important}
.compare-row>div>span,.compare-row>strong{color:#edf2ff!important}
.compare-row small{display:block;color:#9eabc5!important}
.utwor-hero{background:#101629!important;border-color:#34405b!important;color:#edf2ff!important}
.utwor-hero .utwor-desc{color:#b9c5dc!important}
.track-catalog-proof{margin-top:18px}
.track-catalog-proof h2{margin:5px 0 12px;color:#f5f7ff}
.track-catalog-proof>p{max-width:78ch;color:#c5cfe3;line-height:1.7}
.track-source-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}
.track-source-facts>div{padding:12px;border:1px solid #29324d;border-radius:10px;background:#0c1222}
.track-source-facts dt{color:#7f90b1;font:700 9px/1.3 var(--data);letter-spacing:.08em;text-transform:uppercase}
.track-source-facts dd{margin:5px 0 0;color:#edf2ff;font:600 12px/1.45 var(--body);overflow-wrap:anywhere}
.track-proof-note{font-size:12px!important;color:#9eabc5!important}
.track-proof-note a{color:#66ddf4}
@media(max-width:768px){
 .hero-name{font-size:clamp(27px,8.2vw,36px);overflow-wrap:normal;word-break:normal}
 .compare-row{grid-template-columns:minmax(100px,1fr) minmax(76px,.7fr) minmax(76px,.7fr);gap:7px;padding:12px 10px;font-size:12px}
 .track-source-facts{grid-template-columns:1fr}
}