/* ==========================================================================
   TopAIMuza — wspólny fundament v3 (Sternik, 2026-09-24).
   Ładowany OSTATNI w base.html, więc wygrywa kolejnością ze starymi arkuszami
   (topaimuza.css → phase1 → cyber-theme → cyber-ranking → listening-ui).
   Cel: cały serwis wygląda jak karta artysty v3 — te same fonty, powierzchnie,
   przyciski, nawigacja i stopka — bez przepisywania każdego szablonu.
   Stare arkusze zostają jako struktura; porządki w nich robimy stopniowo.
   ========================================================================== */

/* --- Fonty (te same pliki co artist-v3.css; przeglądarka pobierze je raz) --- */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500 700;font-display:swap;src:url("fonts/space-grotesk-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500 700;font-display:swap;src:url("fonts/space-grotesk-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/manrope-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/manrope-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/jetbrains-mono-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/jetbrains-mono-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* --- Tokeny: stare arkusze czytają --display/--body/--data, więc podmiana
       zmienia fonty w całym serwisie jednym ruchem. ------------------------- */
:root{
  --display:"Space Grotesk","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --body:"Manrope","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --data:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --v3-s1:#0c1024;--v3-s2:#111735;--v3-s3:#161d47;--v3-field:#080b1c;
  --v3-line:rgba(124,166,255,.14);--v3-line-2:rgba(124,166,255,.24);
  --v3-tx:#e9eeff;--v3-tx-1:#c9d2f2;--v3-tx-2:#aab6dd;--v3-tx-3:#8b96bc;
  --v3-cyan:#4ddcff;--v3-cyan-2:#8be9ff;--v3-pink:#ff4fd8;--v3-violet:#8b5cff;
}
html body{font-family:var(--body);color:var(--v3-tx);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.02em;text-transform:none}
body button,body input,body select,body textarea{font-family:var(--body)}

/* --- Nagłówek: spokojne menu bez emoji i wersalików ------------------------- */
.site-header{background:rgba(5,6,14,.86)!important;backdrop-filter:blur(12px);border-bottom:1px solid var(--v3-line)!important}
.site-header .nav-item{font:650 14px/1 var(--body)!important;text-transform:none!important;letter-spacing:0!important;color:var(--v3-tx-1)!important;border-radius:999px;padding:0 12px}
.site-header .nav-item:hover{background:var(--v3-s2);color:#fff!important}
.site-header .nav-item.active,.site-header .nav-item[aria-current="page"]{background:rgba(77,220,255,.14)!important;color:#eafaff!important}
.site-header .nav-item.active::after,.site-header .nav-item[aria-current="page"]::after{display:none!important}
.nav-emoji{display:none!important}
.search-toggle,.nav-toggle{font:700 13px/1 var(--body)!important;text-transform:none!important;letter-spacing:0!important;border-radius:12px!important;border:1px solid var(--v3-line-2)!important;background:var(--v3-s2)!important;color:var(--v3-tx)!important}
.trust-strip{font:500 11.5px/1.5 var(--data)!important;letter-spacing:.02em!important;text-transform:none!important;color:var(--v3-tx-3)!important;background:transparent!important;border-bottom:1px solid var(--v3-line)!important}
.trust-strip a{color:var(--v3-tx-2)!important}

/* --- Dolna nawigacja mobilna: ikony SVG zamiast emoji ---------------------- */
.mobile-dock{background:rgba(8,11,28,.94)!important;backdrop-filter:blur(12px);border-top:1px solid var(--v3-line-2)!important}
.mobile-dock a,.mobile-dock button{font:650 11px/1.2 var(--body)!important;text-transform:none!important;letter-spacing:0!important;color:var(--v3-tx-2)!important;gap:4px}
.mobile-dock a[aria-current="page"]{color:var(--v3-cyan)!important}
.mobile-dock .ui{width:20px;height:20px}

/* --- Stopka ------------------------------------------------------------------ */
.site-foot{border-top:1px solid var(--v3-line)!important}
.site-foot .foot-links a,.site-foot .analytics-settings{font:600 13.5px/1.4 var(--body)!important;text-transform:none!important;letter-spacing:0!important;color:var(--v3-tx-2)!important;text-decoration:none!important;background:none!important;border:0!important;padding:4px 0!important;min-height:0!important;cursor:pointer}
.site-foot .foot-links a:hover,.site-foot .analytics-settings:hover{color:#fff!important}
.site-foot .foot-links{gap:8px 20px!important}
.foot-legal,.foot-brand p{font:500 12px/1.5 var(--body)!important;color:var(--v3-tx-3)!important;text-transform:none!important}

/* --- Resztki jasnego motywu z topaimuza.css → ciemne powierzchnie v3 ------- */
.radar-context>section,.compare-links a,.compare-selectors select,.compare-selectors select option,
.delta-box,.discovery-chips a,.filterbar input,.form-card input,.form-card textarea,.growth-panel-featured,
.growth-panel-featured .delta-box,.hero-proof,.hero-search,.home-signal-board,.inp,.lab-home>*,.lab-ranking,
.lab-release-list li,.latest-grid>li,.method-banner,.platform-card,.score-strip,.signal-visual,
.signal-visual figcaption,.spark-wrap,.topai-methodology-board,.topai-search input,.topai-what,.ranking-hero,
.utwor-hero,.topai-coverage-chart,.signal-hero,.chart-ph{
  background:var(--v3-s1)!important;color:var(--v3-tx)!important;border-color:var(--v3-line-2)!important}
.radar-context>section h2,.radar-context>section h3,.radar-context>section p,.radar-context>section a{color:var(--v3-tx)!important}
.radar-context>section p{color:var(--v3-tx-2)!important}
.discovery-chips a:hover,.curated-pairs a:hover,.home-rank-list li:hover,.rank-card:hover,.radar-action-secondary:hover,
.method-cta>a:hover,.topai-evidence summary:hover,.radar-cta>div:last-child a:hover{background:var(--v3-s2)!important;color:#fff!important}
.platform-card-head>span{background:var(--v3-s2)!important;color:var(--v3-tx-1)!important}
.radar-cta>div:last-child a:first-child{background:var(--v3-pink)!important;color:#14061a!important;border-color:var(--v3-pink)!important}
.skip-link{background:var(--v3-s2)!important;color:var(--v3-tx)!important}

/* Pola formularzy w całym serwisie */
.main input:not([type=checkbox]):not([type=radio]):not([type=range]),.main select,.main textarea,.search-in{
  background:var(--v3-field)!important;color:var(--v3-tx)!important;border:1px solid var(--v3-line-2)!important;border-radius:12px!important;font-family:var(--body)!important}
.main input:focus,.main select:focus,.main textarea:focus,.search-in:focus{border-color:rgba(77,220,255,.6)!important;box-shadow:0 0 0 3px rgba(77,220,255,.15)!important;outline:none}
.main select option{background:var(--v3-s1);color:var(--v3-tx)}

/* --- Przyciski: dwa warianty jak w v3 (róż = główny, ciemny = drugorzędny) -- */
.main .btn,.main .button,.main .cta,.search-submit,.main button[type=submit]{
  font:700 14.5px/1 var(--body)!important;text-transform:none!important;letter-spacing:0!important;border-radius:14px!important;min-height:46px}
.search-submit{background:var(--v3-cyan)!important;border-color:var(--v3-cyan)!important;color:#04121a!important}

/* --- Etykiety: mikroskopijne wersaliki mono → czytelne małe etykiety ------- */
.eyebrow,.kicker,.label,.meta-label,.section-kicker,.stat-label,.chip,.pill,.tag{letter-spacing:.04em}

/* --- Karty: odstęp między kartami, żeby nie „sklejały się” ----------------- */
.main>section+section,.main>div>section+section{margin-top:18px}

/* --- Odtwarzacz/miniatury: napis nie zasłania kadru ------------------------- */
.yt-play-compact .yt-play-copy{display:none!important}
.yt-play-surface .yt-play-copy{position:absolute!important;left:0;right:0;bottom:0;top:auto!important;display:flex!important;flex-direction:column;gap:2px;padding:28px 12px 10px!important;background:linear-gradient(180deg,transparent,rgba(5,6,14,.88))!important;text-align:left!important;transform:none!important}
.yt-play-surface .yt-play-copy strong{font:700 13px/1.2 var(--body)!important;text-transform:none!important;letter-spacing:0!important}
.yt-play-surface .yt-play-copy small{font:500 11px/1.3 var(--body)!important;text-transform:none!important;color:var(--v3-tx-2)!important}

/* Porównaj: znacznik VS bez białego kwadratu */
.compare-vs{background:transparent!important;color:var(--v3-pink)!important;font:700 18px/1 var(--display)!important;border:0!important}

/* ==========================================================================
   Karta utworu v3 (.tv3) — 2026-09-24
   ========================================================================== */
.tv3{display:flex;flex-direction:column;gap:20px;max-width:1180px;margin:0 auto;padding:8px clamp(14px,3vw,28px) 48px}
.tv3 .breadcrumb{font:500 12px/1.4 var(--data);color:var(--v3-tx-3);text-transform:none;letter-spacing:.02em}
.tv3 .breadcrumb a{color:var(--v3-tx-2)}
.tv3-hero{padding:4px 0 0}
.tv3-kicker{margin:0 0 8px;font:500 12px/1.4 var(--data);letter-spacing:.1em;text-transform:uppercase;color:var(--v3-pink)}
.tv3-kicker a{color:inherit;text-decoration:none}
.tv3-title{margin:0 0 12px;font:700 clamp(26px,3.6vw,42px)/1.12 var(--display)!important;letter-spacing:-.025em;text-transform:none!important;color:var(--v3-tx);overflow-wrap:anywhere;max-width:30ch}
.tv3-by{margin:0}
.tv3-by a{display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border:1px solid var(--v3-line-2);border-radius:999px;background:var(--v3-s1);color:var(--v3-tx);font:700 15px/1 var(--body);text-decoration:none}
.tv3-by a:hover{border-color:rgba(77,220,255,.55)}
.tv3-by img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.tv3 .track-source-title{margin-top:10px;font-size:13px;color:var(--v3-tx-3)}
.tv3-main{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:20px;align-items:start}
.tv3-main>.tv3-facts:only-child{grid-column:1/-1}
.tv3-player{min-width:0;padding:12px;border:1px solid var(--v3-line);border-radius:20px;background:var(--v3-s1)}
.tv3-player .yt-play-surface,.tv3-player iframe{border-radius:14px;overflow:hidden}
.tv3-facts,.tv3-card{min-width:0;padding:22px;border:1px solid var(--v3-line);border-radius:20px;background:linear-gradient(180deg,rgba(17,23,53,.72),rgba(12,16,36,.92))}
.tv3-facts h2,.tv3-card h2{margin:0 0 12px;font:700 19px/1.3 var(--display)!important;text-transform:none!important;letter-spacing:-.015em;color:var(--v3-tx)}
.tv3-desc{margin:0 0 14px;color:var(--v3-tx-2);font-size:14.5px;line-height:1.6}
.tv3-facts dl{margin:0 0 16px;display:grid;gap:0}
.tv3-facts dl>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--v3-line)}
.tv3-facts dt{font:500 12.5px/1.4 var(--body);color:var(--v3-tx-3);text-transform:none;letter-spacing:0}
.tv3-facts dd{margin:0;font:700 14px/1.4 var(--body);color:var(--v3-tx);text-align:right}
.tv3-facts dd small{font-weight:500;color:var(--v3-tx-3)}
.tv3-facts dd a{color:var(--v3-cyan);text-decoration:none}
.tv3-actions{display:flex;gap:10px;flex-wrap:wrap}
.tv3-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1 1 auto;min-height:46px;padding:0 16px;border:1px solid var(--v3-line-2);border-radius:14px;background:var(--v3-s2);color:var(--v3-tx)!important;font:650 14px/1 var(--body);text-decoration:none}
.tv3-btn:hover{border-color:rgba(77,220,255,.55);background:#16204a}
.tv3-btn.is-primary{background:var(--v3-pink);border-color:var(--v3-pink);color:#14061a!important;font-weight:750}
.tv3-btn.is-primary:hover{background:#ff74e0;border-color:#ff74e0}
.tv3-btn svg{width:18px;height:18px}
.tv3-proof{margin-top:14px;font-size:13px;color:var(--v3-tx-3)}
.tv3-proof summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--v3-tx-2);font-weight:650}
.tv3-proof summary .ui{color:var(--v3-cyan)}
.tv3-proof p{margin:8px 0 0;font-size:13px;color:var(--v3-tx-3)}
.tv3-sub{margin:-4px 0 10px;font-size:13.5px;color:var(--v3-tx-2)}
.tv3-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.tv3-head a{font:650 13.5px var(--body);color:var(--v3-cyan);text-decoration:none}
.tv3-grid{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tv3-tile{display:grid;gap:6px;text-decoration:none;color:var(--v3-tx)}
.tv3-thumb{display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--v3-line);background:linear-gradient(135deg,rgba(255,79,216,.18),rgba(77,220,255,.12)),var(--v3-s2)}
.tv3-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.tv3-tile:hover .tv3-thumb img{transform:scale(1.04)}
.tv3-tile-t{font:700 14px/1.35 var(--body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tv3-tile:hover .tv3-tile-t{color:var(--v3-cyan)}
.tv3-tile-m{font:500 12px/1.3 var(--body);color:var(--v3-tx-3)}
.tv3 .lyrics-sheet .tekst-tresc{white-space:pre-line;font-size:15.5px;line-height:1.75;color:var(--v3-tx-1)}
@media(max-width:900px){.tv3-main{grid-template-columns:minmax(0,1fr)}.tv3-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.tv3-grid{grid-template-columns:minmax(0,1fr)}.tv3-facts,.tv3-card{padding:18px 16px}}
.tv3-card svg{max-width:100%;height:auto;display:block}