/* Top 20: syrena (czerwony/niebieski jak kogut) + samouczek v1.2.0 (telefon: samouczek u gory, dol wolny dla maskotki i bota) */
.nav-top20.t20-syrena{position:relative;border-radius:6px;animation:t20Syrena 1.2s steps(1,end) infinite;isolation:isolate}
.nav-top20.t20-syrena::after{content:"";position:absolute;inset:-3px;border-radius:8px;z-index:-1;pointer-events:none;animation:t20SyrenaPoswiata 1.2s ease-in-out infinite}
@keyframes t20Syrena{0%{color:#fff;background:rgba(229,57,53,.35);box-shadow:0 0 0 1px #e53935,0 0 18px 2px rgba(229,57,53,.75)}50%{color:#fff;background:rgba(30,136,229,.35);box-shadow:0 0 0 1px #1e88e5,0 0 18px 2px rgba(30,136,229,.75)}}
@keyframes t20SyrenaPoswiata{0%,100%{background:radial-gradient(60% 120% at 0% 50%,rgba(229,57,53,.55),transparent 70%)}50%{background:radial-gradient(60% 120% at 100% 50%,rgba(30,136,229,.55),transparent 70%)}}
@media (prefers-reduced-motion:reduce){.nav-top20.t20-syrena,.nav-top20.t20-syrena::after{animation-duration:2.4s}}
.t20-pyt{display:inline-grid;place-items:center;width:20px;height:20px;margin-left:-4px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.4);color:#fff;font:700 12px/1 system-ui,sans-serif;cursor:pointer;vertical-align:middle}
.t20-pyt:hover{background:#1e88e5}
.t20-samouczek{position:absolute;z-index:9990;width:340px;max-width:calc(100vw - 24px);padding:16px 16px 12px;border-radius:14px;background:#141b24;color:#eef3f8;border:1px solid rgba(30,136,229,.55);box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(229,57,53,.25);font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:opacity .25s,transform .3s cubic-bezier(.2,.9,.3,1.2)}
.t20-samouczek.jest{opacity:1;transform:none;pointer-events:auto}
.t20-samouczek.t20s-dol{position:fixed;left:12px;right:12px;bottom:12px;top:auto;width:auto}
.t20-samouczek::before{content:"";position:absolute;top:-7px;left:50%;width:12px;height:12px;background:#141b24;border-left:1px solid rgba(30,136,229,.55);border-top:1px solid rgba(30,136,229,.55);transform:translateX(-50%) rotate(45deg)}
.t20-samouczek.t20s-dol::before{display:none}
.t20s-x{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:8px;border:0;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font-size:14px}
.t20s-x:hover{background:rgba(229,57,53,.6)}
.t20s-tyt{display:block;margin:0 32px 8px 0;font-size:15px}
.t20s-tresc p{margin:0 0 8px}
.t20s-tresc ol{margin:0 0 8px;padding-left:20px}
.t20s-tresc li{margin:0 0 6px}
.t20s-mala{font-size:12px;color:#a9b6c4}
.t20s-akcje{display:flex;gap:8px;flex-wrap:wrap}
.t20s-akcje button{flex:1;min-height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font:600 13px system-ui,sans-serif;cursor:pointer}
.t20s-akcje .t20s-idz{background:linear-gradient(90deg,#e53935,#1e88e5);border:0}
.t20-samouczek.zwiniety .t20s-tresc{display:none}
/* Wystrzał z przycisku + toast podziękowania v1.1.0 */
.t20-wystrzal{animation:t20Wystrzal .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes t20Wystrzal{0%{transform:scale(1)}30%{transform:scale(.88)}60%{transform:scale(1.12);box-shadow:0 0 0 10px rgba(46,158,99,.25),0 0 28px rgba(46,158,99,.6)}100%{transform:scale(1);box-shadow:none}}
.t20-nutka{position:fixed;z-index:2147483600;pointer-events:none;font-size:20px;transform:translate(-50%,-50%);animation:t20Nutka 1.05s cubic-bezier(.15,.8,.3,1) forwards}
@keyframes t20Nutka{0%{opacity:1;transform:translate(-50%,-50%) scale(.4)}70%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--obr)) scale(1.2)}}
.t20-dzieki{position:fixed;z-index:2147483601;left:50%;bottom:24px;display:flex;gap:12px;align-items:flex-start;width:min(440px,calc(100vw - 24px));padding:14px 44px 16px 14px;border-radius:16px;background:#12261b;color:#eaf7ef;border:1px solid rgba(46,158,99,.7);box-shadow:0 20px 50px rgba(0,0,0,.55);font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden;opacity:0;transform:translate(-50%,40px) scale(.95);pointer-events:none;transition:opacity .3s,transform .45s cubic-bezier(.2,1.4,.4,1)}
.t20-dzieki.jest{opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto}
.t20d-ikona{flex:0 0 44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#2e9e63,#1e88e5);font-size:22px}
.t20-dzieki.jest .t20d-ikona span{animation:t20Bujanie 1.2s ease-in-out 2}
@keyframes t20Bujanie{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg) scale(1.1)}75%{transform:rotate(14deg) scale(1.1)}}
.t20d-tekst b{display:block;font-size:16px;margin-bottom:2px}
.t20d-tekst p{margin:0 0 4px}
.t20d-tekst small{color:#9fd4b6}
.t20d-x{position:absolute;top:8px;right:8px;width:28px;height:28px;border:0;border-radius:8px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.t20d-pasek{position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,#2e9e63,#1e88e5);transform-origin:left}
.t20-dzieki.jest .t20d-pasek{animation:t20Pasek 7s linear forwards}
@keyframes t20Pasek{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* Samouczek Top 20 ponad wszystkim (także nad przyciskiem „Napisz do mnie") */
.t20-samouczek{z-index:2147483500}
.t20-samouczek.t20s-dol{bottom:auto;overflow-y:auto;overscroll-behavior:contain}
@media (max-width:759px){.nav-toggle.t20-syrena-menu{animation:t20Syrena 1.2s steps(1,end) infinite;border-radius:8px}}

/* ── Propozycja: wybór „link albo plik mp3" ──────────────────────────────────
   Słuchacz zamawia jak dotąd linkiem YouTube albo — po zalogowaniu — wgrywa
   własny plik mp3. Plik czeka w konsoli DJ na akceptację, nic nie leci od razu. */
.t20-lub {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 0 6px; opacity: 0.7; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em;
}
.t20-lub::before, .t20-lub::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.35; }
.t20-plik { display: block; }
.t20-plik input[type="file"] {
  display: block; width: 100%; margin-top: 6px; padding: 10px;
  border: 1px dashed currentColor; border-radius: 8px; background: rgba(255,255,255,0.04);
  font: inherit; color: inherit; cursor: pointer;
}
.t20-plik-info { margin: 6px 0 0; font-size: 0.82rem; opacity: 0.78; }