/* ============================================================
   Kizomba Academy Radio – plugin stylesheet
   Všetky selektory sú prefixované .ka-player
   aby nekolidovali s WordPress témou.
   ============================================================ */

/* ── CSS VARIABLES (scoped) ── */
.ka-player {
  --bg:     #0d0b10;
  --bg2:    #13101a;
  --bg3:    #1a1522;
  --bg4:    #221d2e;
  --border: rgba(255,255,255,0.07);
  --gold:   #c9a84c;
  --gold2:  #e8c97a;
  --rose:   #b5435a;
  --text:   #e8e0d5;
  --muted:  #6a6070;
  --salsa:  #d4503a;
  --bach:   #7b5ea7;
  --latino: #2e8b6a;
  --tv:     #7b5ea7;
  --yt:     #e05060;
  --accent: #c9a84c;
  --accent2:#e8c97a;
  --logo-glow: rgba(201,168,76,.45);
  --sb-h:   64px;
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  box-sizing: border-box;
}

/* Genre themes */
.ka-player.genre-kizomba { --accent:#c9a84c; --accent2:#e8c97a; --logo-glow:rgba(201,168,76,.45); }
.ka-player.genre-salsa   { --accent:#d4503a; --accent2:#e87060; --logo-glow:rgba(212,80,58,.45); }
.ka-player.genre-bachata { --accent:#7b5ea7; --accent2:#a585d0; --logo-glow:rgba(123,94,167,.45); }
.ka-player.genre-latino  { --accent:#2e8b6a; --accent2:#5ab898; --logo-glow:rgba(46,139,106,.45); }
.ka-player.genre-oblubene{ --accent:#c9a84c; --accent2:#e8c97a; --logo-glow:rgba(201,168,76,.45); }

/* Box-sizing reset scoped */
.ka-player *, .ka-player *::before, .ka-player *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── OUTER CONTAINER ── */
.ka-radio-wrap {
  margin: 0 auto;
  padding: 0;
}

/* ── MAIN WRAP ── */
.ka-player .wrap {
  width: 100%;
  background: var(--bg2);
  border: 1px solid rgba(201,168,76,.18);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,.7);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* ── HEADER ── */
.ka-player .hdr {
  display: flex; align-items: center; gap: 12px; padding: 14px 22px;
  background: linear-gradient(90deg,#0d0b10 0%,#160f20 50%,#0d0b10 100%);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0; position: relative; overflow: hidden;
}
.ka-player .hdr::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,transparent,transparent 48px,rgba(201,168,76,.025) 48px,rgba(201,168,76,.025) 49px);
}
.ka-player .pulse {
  width: 9px; height: 9px; background: #e05060; border-radius: 50%; flex-shrink: 0;
  animation: kaaPulse 1.8s ease-in-out infinite;
}
@keyframes kaaPulse { 0%{box-shadow:0 0 0 0 rgba(224,80,96,.6)} 60%{box-shadow:0 0 0 8px rgba(224,80,96,0)} 100%{box-shadow:0 0 0 0 rgba(224,80,96,0)} }
.ka-player .hdr-title {
  font-family: 'Playfair Display', serif; font-size: 1.15em; color: var(--gold2);
  letter-spacing: .02em; line-height: 1; position: relative;
}
.ka-player .hdr-title span {
  display: block; font-family: 'DM Sans', sans-serif; font-size: .52em;
  color: var(--muted); font-weight: 300; letter-spacing: .14em; text-transform: uppercase; margin-top: 3px;
}
.ka-player .hdr-now {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  font-size: .72em; color: var(--muted);
}
.ka-player .hdr-dot {
  width: 6px; height: 6px; background: var(--accent); border-radius: 50%;
  animation: kaaBlink 2s ease infinite; flex-shrink: 0;
}
@keyframes kaaBlink { 0%,100%{opacity:1} 50%{opacity:.2} }
.ka-player #hdr-track { color: var(--accent2); font-weight: 500; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ka-player .tbadge {
  font-size: .6em; padding: 2px 7px; border-radius: 20px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; flex-shrink: 0;
}
.ka-player .tbadge.radio { background: rgba(201,168,76,.15); color: var(--gold); }
.ka-player .tbadge.yt    { background: rgba(224,80,96,.15);  color: var(--yt); }
.ka-player .tbadge.tv    { background: rgba(123,94,167,.15); color: var(--tv); }

/* ── MAIN GRID: fixed height, player left, sidebar right ── */
.ka-player .main {
  display: grid;
  grid-template-columns: 1fr 340px;
  height: 520px;   /* fixed – player locked top, sidebar scrolls */
}

/* ── PLAYER ── */
.ka-player .player {
  position: relative; background: #000; overflow: hidden; height: 100%;
}

/* ── RADIO SCREEN ── */
.ka-player .radio-screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; padding: 24px 20px;
  background: linear-gradient(135deg,#0d0b10 0%,#1a1022 50%,#0d0b10 100%);
  transition: opacity .35s; overflow: hidden;
}
.ka-player .radio-screen.hidden { opacity: 0; pointer-events: none; }

/* Spinning note */
.ka-player .note-wrap {
  position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%);
  z-index: 2; pointer-events: none;
  width: 48px; height: 48px; opacity: 0; transition: opacity .5s;
  display: flex; align-items: center; justify-content: center;
}
.ka-player .note-wrap.show { opacity: 1; }
.ka-player .note-svg { animation: kaaSpin 8s linear infinite; filter: drop-shadow(0 0 12px var(--accent)); }
@keyframes kaaSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* FFT canvas */
.ka-player #fft-canvas {
  position:absolute; bottom:0; left:0; width:100%; height:80px;
  opacity:0; pointer-events:none; transition:opacity .6s; z-index:3;
}
.ka-player #fft-canvas.active { opacity:0.8; }
/* CSS visualizer — 48 bars, no Web Audio API needed */
.ka-player .css-viz {
  position:absolute;bottom:0;left:0;right:0;height:72px;
  display:flex;align-items:flex-end;justify-content:center;
  gap:2px;padding:0 8px;z-index:3;pointer-events:none;
  opacity:0;transition:opacity .5s;
}
.ka-player .css-viz.active{opacity:.75;}
.ka-player .css-viz span{
  flex:1;max-width:7px;border-radius:2px 2px 0 0;
  background:var(--accent);transform-origin:bottom;
  animation:kaaBar 1s ease-in-out infinite alternate;min-height:3px;
}
.ka-player .css-viz span:nth-child(1){animation-delay:0s;height:28%}
.ka-player .css-viz span:nth-child(2){animation-delay:.04s;height:52%}
.ka-player .css-viz span:nth-child(3){animation-delay:.08s;height:78%}
.ka-player .css-viz span:nth-child(4){animation-delay:.12s;height:44%}
.ka-player .css-viz span:nth-child(5){animation-delay:.16s;height:88%}
.ka-player .css-viz span:nth-child(6){animation-delay:.20s;height:62%}
.ka-player .css-viz span:nth-child(7){animation-delay:.06s;height:36%}
.ka-player .css-viz span:nth-child(8){animation-delay:.14s;height:74%}
.ka-player .css-viz span:nth-child(9){animation-delay:.02s;height:50%}
.ka-player .css-viz span:nth-child(10){animation-delay:.18s;height:82%}
.ka-player .css-viz span:nth-child(11){animation-delay:.10s;height:40%}
.ka-player .css-viz span:nth-child(12){animation-delay:.22s;height:68%}
.ka-player .css-viz span:nth-child(13){animation-delay:.05s;height:94%}
.ka-player .css-viz span:nth-child(14){animation-delay:.15s;height:58%}
.ka-player .css-viz span:nth-child(15){animation-delay:.09s;height:64%}
.ka-player .css-viz span:nth-child(16){animation-delay:.19s;height:79%}
.ka-player .css-viz span:nth-child(17){animation-delay:.03s;height:47%}
.ka-player .css-viz span:nth-child(18){animation-delay:.13s;height:71%}
.ka-player .css-viz span:nth-child(19){animation-delay:.07s;height:91%}
.ka-player .css-viz span:nth-child(20){animation-delay:.17s;height:53%}
.ka-player .css-viz span:nth-child(21){animation-delay:.11s;height:76%}
.ka-player .css-viz span:nth-child(22){animation-delay:.21s;height:34%}
.ka-player .css-viz span:nth-child(23){animation-delay:.01s;height:61%}
.ka-player .css-viz span:nth-child(24){animation-delay:.23s;height:86%}
.ka-player .css-viz span:nth-child(25){animation-delay:.23s;height:86%}
.ka-player .css-viz span:nth-child(26){animation-delay:.01s;height:61%}
.ka-player .css-viz span:nth-child(27){animation-delay:.21s;height:34%}
.ka-player .css-viz span:nth-child(28){animation-delay:.11s;height:76%}
.ka-player .css-viz span:nth-child(29){animation-delay:.17s;height:53%}
.ka-player .css-viz span:nth-child(30){animation-delay:.07s;height:91%}
.ka-player .css-viz span:nth-child(31){animation-delay:.13s;height:71%}
.ka-player .css-viz span:nth-child(32){animation-delay:.03s;height:47%}
.ka-player .css-viz span:nth-child(33){animation-delay:.19s;height:79%}
.ka-player .css-viz span:nth-child(34){animation-delay:.09s;height:64%}
.ka-player .css-viz span:nth-child(35){animation-delay:.15s;height:58%}
.ka-player .css-viz span:nth-child(36){animation-delay:.05s;height:94%}
.ka-player .css-viz span:nth-child(37){animation-delay:.22s;height:68%}
.ka-player .css-viz span:nth-child(38){animation-delay:.10s;height:40%}
.ka-player .css-viz span:nth-child(39){animation-delay:.18s;height:82%}
.ka-player .css-viz span:nth-child(40){animation-delay:.02s;height:50%}
.ka-player .css-viz span:nth-child(41){animation-delay:.14s;height:74%}
.ka-player .css-viz span:nth-child(42){animation-delay:.06s;height:36%}
.ka-player .css-viz span:nth-child(43){animation-delay:.20s;height:62%}
.ka-player .css-viz span:nth-child(44){animation-delay:.16s;height:88%}
.ka-player .css-viz span:nth-child(45){animation-delay:.12s;height:44%}
.ka-player .css-viz span:nth-child(46){animation-delay:.08s;height:78%}
.ka-player .css-viz span:nth-child(47){animation-delay:.04s;height:52%}
.ka-player .css-viz span:nth-child(48){animation-delay:0s;height:28%}
@keyframes kaaBar{from{transform:scaleY(.1)}to{transform:scaleY(1)}}

/* KA Logo */
.ka-player .ka-logo-wrap {
  position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ka-player .ka-logo-wrap::before {
  content: ''; position: absolute; width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle,var(--logo-glow) 0%,transparent 70%);
  animation: kaaLogoPulse 3s ease-in-out infinite;
}
.ka-player .ka-logo-wrap::after {
  content: ''; position: absolute; width: 170px; height: 170px; border-radius: 50%;
  border: 1px solid rgba(201,168,76,.15);
  animation: kaaLogoWave 3s ease-in-out infinite .6s;
}
@keyframes kaaLogoPulse { 0%,100%{transform:scale(1);opacity:.7} 50%{transform:scale(1.07);opacity:1} }
@keyframes kaaLogoWave  { 0%{transform:scale(.85);opacity:0} 50%{transform:scale(1.1);opacity:.5} 100%{transform:scale(1.3);opacity:0} }
.ka-player .ka-logo {
  width: 140px; height: 140px; object-fit: contain; border-radius: 50%;
  position: relative; z-index: 1;
  filter: drop-shadow(0 0 18px var(--logo-glow));
  animation: kaaGlow 4s ease-in-out infinite;
}
@keyframes kaaGlow { 0%,100%{filter:drop-shadow(0 0 12px var(--logo-glow))} 50%{filter:drop-shadow(0 0 30px var(--logo-glow))} }

.ka-player .r-name { font-family:'Playfair Display',serif; font-size:1.1em; color:var(--text); text-align:center; line-height:1.25; max-width:260px; }
.ka-player .r-meta { font-size:.7em; color:var(--muted); text-align:center; }
.ka-player .r-ctrls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }

.ka-player .btn-play {
  width: 50px; height: 50px; border-radius: 50%; border: none;
  background: var(--accent); color: #000; cursor: pointer; font-size: 1.05em;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s; box-shadow: 0 0 20px var(--logo-glow); flex-shrink: 0;
}
.ka-player .btn-play:hover { transform: scale(1.08); }

.ka-player .vol-wrap  { display:flex; align-items:center; gap:7px; }
.ka-player .vol-icon  { font-size:.85rem; opacity:.4; }
.ka-player .vol-sl {
  -webkit-appearance:none; appearance:none; height:3px; width:88px;
  border-radius:2px; background:var(--bg4); outline:none; cursor:pointer;
}
.ka-player .vol-sl::-webkit-slider-thumb {
  -webkit-appearance:none; width:12px; height:12px; border-radius:50%;
  background:var(--accent); cursor:pointer;
}
.ka-player .pill {
  font-size:.63em; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 10px; border-radius:20px; background:var(--bg4); color:var(--muted);
  white-space:nowrap; transition:all .3s;
}
.ka-player .pill.live    { background:rgba(74,222,128,.12); color:#4ade80; }
.ka-player .pill.loading { background:rgba(201,168,76,.12); color:var(--gold); animation:kaaBlink 1s infinite; }
.ka-player .pill.error   { background:rgba(212,80,58,.12);  color:var(--salsa); }
.ka-player .wv { display:flex; align-items:flex-end; gap:3px; height:20px; }
.ka-player .wv.hidden { visibility:hidden; }
.ka-player .wb { width:3px; background:var(--accent); border-radius:2px; animation:kaaWb 1.1s ease-in-out infinite; }
.ka-player .wb:nth-child(2){animation-delay:.1s}.ka-player .wb:nth-child(3){animation-delay:.2s}
.ka-player .wb:nth-child(4){animation-delay:.3s}.ka-player .wb:nth-child(5){animation-delay:.4s}
.ka-player .wb:nth-child(6){animation-delay:.3s}.ka-player .wb:nth-child(7){animation-delay:.2s}
@keyframes kaaWb { 0%,100%{height:3px} 50%{height:17px} }

.ka-player .extra-ctrls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; }
.ka-player .cast-btn {
  background:var(--bg4); border:1px solid var(--border); color:var(--muted);
  border-radius:20px; padding:5px 12px; font-size:.65em; cursor:pointer;
  display:flex; align-items:center; gap:5px; transition:all .2s; white-space:nowrap;
}
.ka-player .cast-btn:hover { border-color:var(--accent); color:var(--accent2); }

.ka-player #tv-vid  { width:100%; height:100%; object-fit:contain; background:#000; display:none; }
.ka-player #yt-vid  { width:100%; height:100%; border:none; display:none; }

.ka-player .overlay {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:rgba(13,11,16,.88); gap:10px; font-size:.85em; color:var(--muted);
  transition:opacity .3s; z-index:5;
}
.ka-player .overlay.hidden { opacity:0; pointer-events:none; }
.ka-player .spinner {
  width:34px; height:34px; border:3px solid var(--border);
  border-top-color:var(--gold); border-radius:50%; animation:kaaSpin2 .8s linear infinite;
}
@keyframes kaaSpin2 { to{transform:rotate(360deg)} }
.ka-player .retry-btn {
  margin-top:6px; background:var(--rose); color:#fff; border:none;
  padding:7px 18px; border-radius:8px; font-size:.85em; cursor:pointer;
}
.ka-player .corner {
  position:absolute; top:12px; right:12px; z-index:6;
  background:rgba(13,11,16,.88); color:var(--gold2);
  padding:5px 12px; border-radius:9999px; font-size:.7em; letter-spacing:.5px;
  display:none; box-shadow:0 4px 15px rgba(0,0,0,.5);
}
.ka-player .pgrad {
  position:absolute; bottom:0; left:0; right:0; height:40px;
  background:linear-gradient(to top,rgba(13,11,16,.6),transparent);
  pointer-events:none; z-index:4;
}

/* ── SIDEBAR ── */
.ka-player .sidebar {
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  height: 100%;    /* fills the 520px row */
  overflow: hidden; /* children handle their own scroll */
}

/* Genre tabs 2×3 grid */
.ka-player .gtabs {
  display: grid; grid-template-columns: repeat(3,1fr);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ka-player .gtab {
  background: none; border: none;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--muted); font-family:'DM Sans',sans-serif;
  font-size: .63em; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; padding: 8px 4px; cursor: pointer;
  transition: all .2s; text-align: center; white-space: nowrap;
}
.ka-player .gtab:nth-child(3n)   { border-right: none; }
.ka-player .gtab:nth-child(4),
.ka-player .gtab:nth-child(5),
.ka-player .gtab:nth-child(6)    { border-bottom: none; }
.ka-player .gtab:hover { color:var(--text); background:rgba(255,255,255,.03); }
.ka-player .gtab.a-kizomba { color:var(--gold);   background:rgba(201,168,76,.1); }
.ka-player .gtab.a-salsa   { color:#e07060;        background:rgba(212,80,58,.1); }
.ka-player .gtab.a-bachata { color:#a585d0;         background:rgba(123,94,167,.1); }
.ka-player .gtab.a-latino  { color:#5ab898;         background:rgba(46,139,106,.1); }
.ka-player .gtab.a-oblubene{ color:#ff8fb3;         background:rgba(255,107,157,.1); }
.ka-player .gtab.a-vsetky  { color:var(--text);     background:rgba(255,255,255,.07); }

/* Search bar – fixed */
.ka-player .sbar { padding:8px 12px; border-bottom:1px solid var(--border); flex-shrink:0; }
.ka-player .sinner { position:relative; }
.ka-player .sinner input {
  width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:40px;
  padding:6px 12px 6px 32px; color:var(--text); font-family:'DM Sans',sans-serif;
  font-size:.76rem; outline:none; transition:border-color .2s;
}
.ka-player .sinner input:focus { border-color:rgba(201,168,76,.3); }
.ka-player .sinner input::placeholder { color:var(--muted); opacity:.6; }
.ka-player .sinner::before {
  content:'🔍'; position:absolute; left:11px; top:50%; transform:translateY(-50%);
  font-size:.72rem; opacity:.4; pointer-events:none;
}

/* Station list – scrollable, takes remaining height */
.ka-player .ilist {
  overflow-y: auto;
  flex: 1;           /* fills remaining space after tabs + search */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.ka-player .ilist::-webkit-scrollbar       { width:4px; }
.ka-player .ilist::-webkit-scrollbar-track { background:transparent; }
.ka-player .ilist::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.ka-player .slabel {
  display:flex; align-items:center; gap:8px; padding:10px 14px 6px;
  font-size:.58em; letter-spacing:.18em; text-transform:uppercase;
  color:var(--rose); font-weight:600;
}
.ka-player .slabel::after { content:''; flex:1; height:1px; background:var(--border); }

.ka-player .item {
  display:flex; align-items:center; gap:9px; width:100%;
  background:none; border:none; border-bottom:1px solid var(--border);
  padding:8px 12px; cursor:pointer; transition:background .15s;
  text-align:left; color:var(--text); font-family:'DM Sans',sans-serif;
  list-style:none;
}
.ka-player .item:hover  { background:rgba(201,168,76,.05); }
.ka-player .item.active { background:rgba(201,168,76,.09); }
.ka-player .ilogo-wrap {
  flex-shrink:0; width:36px; height:36px;
}
.ka-player .ilogo {
  width:36px; height:36px; border-radius:7px; object-fit:contain;
  background:var(--bg3); border:1px solid var(--border);
  transition:border-color .2s; display:block;
}
.ka-player .item.active .ilogo { border-color:var(--accent); }
.ka-player .iinfo  { flex:1; min-width:0; }
.ka-player .iname  { font-size:.76em; font-weight:500; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ka-player .isub   { font-size:.62em; color:var(--muted); margin-top:1px; }
.ka-player .item.active .iname { color:var(--accent2); }
/* Srdiečko — vpravo od názvu, v riadku */
.ka-player .fbtn {
  background:none; border:none; color:var(--muted);
  font-size:.82rem; line-height:1; padding:2px 4px;
  cursor:pointer; flex-shrink:0; transition:color .18s, transform .18s;
  opacity:.35;
}
.ka-player .fbtn:hover  { color:#ff6b9d; opacity:1; transform:scale(1.2); }
.ka-player .fbtn.on     { color:#ff6b9d; opacity:1; }

/* Source dots */
.ka-player .sdot        { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.ka-player .sdot.radio  { background:var(--gold); }
.ka-player .sdot.yt     { background:var(--yt); }
.ka-player .sdot.tv     { background:var(--tv); }

/* Playing animation bars */
.ka-player .pawrap { display:flex; align-items:flex-end; gap:1.5px; height:10px; opacity:0; flex-shrink:0; }
.ka-player .item.active .pawrap { opacity:1; }
.ka-player .pa { width:2px; background:var(--accent); border-radius:1px; animation:kaaPaa .6s ease-in-out infinite alternate; }
.ka-player .pa:nth-child(2){animation-delay:.1s;} .ka-player .pa:nth-child(3){animation-delay:.2s;}
@keyframes kaaPaa { from{height:2px} to{height:10px} }

/* Fav button */

.ka-player .empty-msg { text-align:center; padding:36px 18px; color:var(--muted); font-style:italic; font-size:.8rem; }

/* ── FOOTER ── */
.ka-player .footer {
  border-top:1px solid var(--border); padding:9px 20px;
  display:flex; align-items:center; justify-content:space-between;
  background:#090710; font-size:.65em; color:var(--muted);
  letter-spacing:.06em; flex-shrink:0;
}
.ka-player .footer a { color:var(--gold); text-decoration:none; font-weight:500; }
.ka-player .wf { display:flex; align-items:flex-end; gap:2px; height:14px; }
.ka-player .wf span {
  display:block; width:2px; background:var(--gold); border-radius:1px;
  opacity:.5; animation:kaaWfoot .8s ease-in-out infinite alternate;
}
.ka-player .wf span:nth-child(2){animation-delay:.1s;} .ka-player .wf span:nth-child(3){animation-delay:.2s;}
.ka-player .wf span:nth-child(4){animation-delay:.05s;} .ka-player .wf span:nth-child(5){animation-delay:.15s;}
@keyframes kaaWfoot { from{height:2px} to{height:13px} }

/* ── FLOATING MINI WIDGET ── */
#ka-mini-player { position:fixed; bottom:24px; right:24px; z-index:99999; display:none; filter:drop-shadow(0 8px 32px rgba(0,0,0,.7)); }
#ka-mini-player.visible { display:flex; }
#ka-mini-widget {
  background:#13101a; border:1px solid rgba(255,255,255,.07); border-radius:16px;
  padding:10px 14px; display:flex; align-items:center; gap:10px;
  min-width:240px; max-width:300px; backdrop-filter:blur(12px);
  animation:kaaFloatIn .3s ease;
}
@keyframes kaaFloatIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
#ka-mini-widget .mw-logo  { width:38px; height:38px; border-radius:8px; object-fit:contain; background:#1a1522; flex-shrink:0; }
#ka-mini-widget .mw-info  { flex:1; min-width:0; }
#ka-mini-widget .mw-name  { font-size:.72em; font-weight:600; color:#e8e0d5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#ka-mini-widget .mw-sub   { font-size:.58em; color:#6a6070; margin-top:1px; }
#ka-mini-widget .mw-bar   { width:28px; height:28px; border-radius:50%; border:none; background:#c9a84c; color:#000; cursor:pointer; font-size:.75em; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .15s; }
#ka-mini-widget .mw-bar:hover { transform:scale(1.1); }
#ka-mini-widget .mw-close { background:none; border:none; color:#6a6070; cursor:pointer; font-size:.75em; padding:2px; flex-shrink:0; opacity:.5; }
#ka-mini-widget .mw-close:hover { opacity:1; }

/* ── STICKY BAR ── */
#ka-sticky-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:99998;
  height:var(--sb-h,64px);
  background:rgba(10,8,14,.97); border-top:1px solid rgba(201,168,76,.18);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:none; align-items:center;
  box-shadow:0 -6px 30px rgba(0,0,0,.6);
  padding:0 16px; gap:0;
  font-family:'DM Sans',sans-serif;
}
#ka-sticky-bar.visible { display:flex; }
.ka-sb-left   { display:flex; align-items:center; gap:10px; min-width:0; flex:0 0 auto; max-width:200px; }
.ka-sb-logo   { width:38px; height:38px; border-radius:8px; object-fit:contain; background:#1a1522; border:1px solid rgba(255,255,255,.07); flex-shrink:0; }
.ka-sb-info   { min-width:0; }
.ka-sb-name   { font-size:.72em; font-weight:600; color:#e8e0d5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }
.ka-sb-sub    { font-size:.58em; color:#6a6070; }
.ka-sb-center { flex:1; display:flex; align-items:center; justify-content:center; gap:10px; }
.ka-sb-nav    { background:none; border:1px solid rgba(255,255,255,.07); color:#6a6070; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:.75em; display:flex; align-items:center; justify-content:center; transition:all .2s; flex-shrink:0; }
.ka-sb-nav:hover { border-color:#c9a84c; color:#e8c97a; }
.ka-sb-play   { width:36px; height:36px; border-radius:50%; border:none; background:#c9a84c; color:#000; cursor:pointer; font-size:.85em; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .15s; box-shadow:0 0 14px rgba(201,168,76,.4); }
.ka-sb-play:hover { transform:scale(1.1); }
.ka-sb-wv     { display:flex; align-items:flex-end; gap:2px; height:20px; margin:0 6px; }
.ka-sb-wv span { width:2.5px; background:#c9a84c; border-radius:1px; animation:kaaWfoot .5s ease-in-out infinite alternate; opacity:.8; }
.ka-sb-wv span:nth-child(2){animation-delay:.08s;height:14px;} .ka-sb-wv span:nth-child(3){animation-delay:.16s;height:10px;} .ka-sb-wv span:nth-child(4){animation-delay:.04s;height:18px;} .ka-sb-wv span:nth-child(5){animation-delay:.12s;height:8px;}
.ka-sb-pill   { font-size:.58em; padding:2px 8px; border-radius:20px; background:rgba(74,222,128,.12); color:#4ade80; white-space:nowrap; flex-shrink:0; }
.ka-sb-right  { display:flex; align-items:center; gap:6px; overflow:visible; flex:0 0 auto; }
.ka-sb-vol {
	-webkit-appearance:none; appearance:none;
	width:80px; height:4px;
	background:rgba(255,255,255,0.18);
	border-radius:2px; outline:none;
	cursor:pointer;
	pointer-events:auto;
}
.ka-sb-vol::-webkit-slider-thumb {
	-webkit-appearance:none; appearance:none;
	width:13px; height:13px; border-radius:50%;
	background:linear-gradient(135deg,#e8c97a,#c9a84c);
	cursor:pointer; border:none;
	box-shadow:0 0 8px rgba(201,168,76,0.5);
}
.ka-sb-vol::-moz-range-thumb {
	width:13px; height:13px; border-radius:50%;
	background:linear-gradient(135deg,#e8c97a,#c9a84c);
	cursor:pointer; border:none;
	box-shadow:0 0 8px rgba(201,168,76,0.5);
}
.ka-sb-scroll { display:flex; gap:5px; overflow-x:auto; max-width:320px; scrollbar-width:none; padding:2px 0; }
.ka-sb-scroll::-webkit-scrollbar { display:none; }
.ka-sb-stn    { flex-shrink:0; background:#221d2e; border:1px solid rgba(255,255,255,.07); border-radius:8px; width:34px; height:34px; cursor:pointer; transition:all .18s; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ka-sb-stn img { width:100%; height:100%; object-fit:contain; border-radius:7px; }
.ka-sb-stn:hover { border-color:#c9a84c; transform:scale(1.08); }
.ka-sb-stn.active { border-color:#c9a84c; box-shadow:0 0 8px rgba(201,168,76,.4); }
.ka-sb-close  { background:none; border:none; color:#6a6070; cursor:pointer; font-size:.8em; padding:6px; opacity:.4; flex-shrink:0; margin-left:4px; }
.ka-sb-close:hover { opacity:1; }

/* Mini toggles */
#ka-mini-toggles { position:fixed; bottom:24px; left:24px; z-index:99997; display:none; flex-direction:column; gap:6px; }
#ka-mini-toggles.show { display:flex; }
.ka-mt-btn {
  background:#13101a; border:1px solid rgba(255,255,255,.07); border-radius:10px;
  padding:6px 12px; font-size:.62em; color:#6a6070; cursor:pointer;
  transition:all .2s; letter-spacing:.06em; display:flex; align-items:center; gap:6px; white-space:nowrap;
  font-family:'DM Sans',sans-serif;
}
.ka-mt-btn:hover { border-color:#c9a84c; color:#e8c97a; }
.ka-mt-btn.on    { border-color:#c9a84c; color:#e8c97a; background:rgba(201,168,76,.07); }

/* Pop-out indicator */
#ka-popout-indicator {
  position:fixed; top:16px; right:16px; z-index:99999; display:none;
  background:rgba(201,168,76,.15); border:1px solid #c9a84c;
  border-radius:20px; padding:6px 14px; font-size:.65em; color:#e8c97a;
  align-items:center; gap:6px; cursor:pointer; font-family:'DM Sans',sans-serif;
}
#ka-popout-indicator.show { display:flex; }

/* ── MOBILE ── */
@media(max-width:700px) {
  .ka-player .main { display:flex; flex-direction:column; height:auto; }
  .ka-player .player { height:auto; flex-shrink:0; }
  .ka-player .radio-screen {
    position:relative; inset:auto; flex-direction:row; flex-wrap:wrap;
    padding:12px 14px; gap:10px; min-height:unset;
    justify-content:flex-start; align-items:center;
  }
  .ka-player .ka-logo-wrap::before { width:56px; height:56px; }
  .ka-player .ka-logo-wrap::after  { width:72px;  height:72px; }
  .ka-player .ka-logo { width:52px; height:52px; }
  .ka-player .r-text-col { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
  .ka-player .r-name { font-size:.82em; text-align:left; max-width:none; }
  .ka-player .r-meta { text-align:left; }
  .ka-player .r-ctrls { flex-wrap:nowrap; gap:7px; justify-content:flex-start; }
  .ka-player .extra-ctrls { justify-content:flex-start; }
  .ka-player #fft-canvas { height:50px; }
  .ka-player .note-wrap { bottom:55px; }
  .ka-player .sidebar { border-left:none; border-top:1px solid rgba(255,255,255,.07); height:calc(100vh - 190px); min-height:300px; }
  .ka-player .hdr-now { display:none; }
  .ka-player .hdr { padding:11px 14px; }
  .ka-player #tv-vid, .ka-player #yt-vid { height:220px; }
  #ka-mini-toggles { display:none !important; }
  #ka-mini-player  { display:none !important; }
  #ka-sticky-bar   { padding:0 10px; gap:0; }
  .ka-sb-right { display:none; }
  .ka-sb-left  { max-width:140px; }
}

/* Veľmi úzky mobile (< 480px) — kollabuj na minimum: 🌴 palm + ▶ play + × close */
@media (max-width:480px) {
  #ka-sticky-bar { padding: 0 8px; gap: 6px; }
  #ka-sticky-bar .ka-sb-brand { padding: 4px 8px; font-size: 0; gap: 0; }
  #ka-sticky-bar .ka-sb-brand span { display: none; }     /* skry "Afro Latino" text */
  #ka-sticky-bar .ka-sb-brand::before { content: '🌴'; font-size: 18px; font-style: normal; }
  #ka-sticky-bar .ka-sb-left { display: none; }            /* logo + meno stanice preč */
  #ka-sticky-bar .ka-sb-wv { display: none; }              /* waveform preč */
  #ka-sticky-bar .ka-sb-pill { display: none; }            /* "Live" pill preč */
  #ka-sticky-bar .ka-sb-center { gap: 6px; }
  #ka-sticky-bar .ka-sb-nav { width: 28px !important; height: 28px !important; }
  #ka-sticky-bar .ka-sb-play { width: 34px !important; height: 34px !important; }
}

/* ── PWA INSTALL BANNER ── */
#ka-install-banner {
  position:fixed; bottom:0; left:0; right:0; z-index:99999;
  background:linear-gradient(135deg,#1a1022 0%,#0d0b10 100%);
  border-top:1px solid rgba(201,168,76,.3);
  padding:12px 16px;
  box-shadow:0 -8px 30px rgba(0,0,0,.6);
  animation:kaaSlideUp .3s ease;
}
@keyframes kaaSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.ka-ib-content {
  display:flex;align-items:center;gap:12px;
  max-width:480px;margin:0 auto;
}
.ka-ib-icon {
  width:44px;height:44px;border-radius:10px;
  object-fit:contain;background:#1a1522;
  border:1px solid rgba(201,168,76,.3);flex-shrink:0;
}
.ka-ib-text { flex:1;min-width:0; }
.ka-ib-title { font-size:.82em;font-weight:600;color:#e8c97a;font-family:'DM Sans',sans-serif; }
.ka-ib-sub   { font-size:.68em;color:#6a6070;margin-top:2px;font-family:'DM Sans',sans-serif; }
.ka-ib-btn {
  background:linear-gradient(135deg,#c9a84c,#e8c97a);
  color:#0d0b10;border:none;border-radius:20px;
  padding:8px 16px;font-size:.75em;font-weight:700;
  cursor:pointer;flex-shrink:0;white-space:nowrap;
  font-family:'DM Sans',sans-serif;letter-spacing:.04em;
  transition:transform .15s;
}
.ka-ib-btn:hover{transform:scale(1.04);}
.ka-ib-close {
  background:none;border:none;color:#6a6070;
  font-size:.85em;cursor:pointer;padding:4px 6px;flex-shrink:0;
  transition:color .15s;
}
.ka-ib-close:hover{color:#e8e0d5;}

/* iOS — ukáž inštrukcie keď nie je dostupný beforeinstallprompt */
#ka-ios-tip {
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%);
  background:#1a1522;border:1px solid rgba(201,168,76,.3);
  border-radius:14px;padding:14px 18px;z-index:99999;
  font-family:'DM Sans',sans-serif;font-size:.78em;color:#e8e0d5;
  text-align:center;max-width:280px;line-height:1.5;
  box-shadow:0 8px 30px rgba(0,0,0,.6);display:none;
}
#ka-ios-tip.show{display:block;animation:kaaSlideUp .3s ease;}
#ka-ios-tip strong{color:#e8c97a;}
#ka-ios-tip .ka-tip-close{
  display:block;margin-top:10px;background:none;border:1px solid var(--border,rgba(255,255,255,.07));
  color:#6a6070;border-radius:8px;padding:5px 14px;cursor:pointer;font-size:.9em;width:100%;
}

/* PWA button — viditeľné na mobile v extra-ctrls */
.ka-player .ka-pwa-btn {
  background:linear-gradient(135deg,rgba(201,168,76,.2),rgba(201,168,76,.1));
  border-color:rgba(201,168,76,.4) !important;
  color:var(--gold2) !important;
}
.ka-player .ka-pwa-btn:hover {
  background:linear-gradient(135deg,rgba(201,168,76,.35),rgba(201,168,76,.2));
  border-color:var(--gold) !important;
}

/* ── PWA TEST PANEL ── */
.ka-player .ka-pwa-panel {
  display:none; /* skryté na PC, zobrazí sa len na mobile */
  flex-direction:column; gap:8px;
  padding:12px 20px 14px;
  border-top:1px solid var(--border);
  background:rgba(201,168,76,.04);
}
@media(max-width:700px){
  .ka-player .ka-pwa-panel { display:flex; }
}
.ka-player .ka-pwa-label {
  font-size:.68em; color:var(--gold); letter-spacing:.06em;
  font-weight:500; opacity:.8;
}
.ka-player .ka-pwa-btns {
  display:flex; gap:6px; flex-wrap:wrap;
}
.ka-player .ka-pwa-btn {
  background:var(--bg4); border:1px solid var(--border);
  color:var(--text); border-radius:20px;
  padding:7px 13px; font-size:.72em; font-weight:500;
  cursor:pointer; font-family:'DM Sans',sans-serif;
  transition:all .2s; white-space:nowrap;
}
.ka-player .ka-pwa-btn:hover,
.ka-player .ka-pwa-btn:active {
  border-color:var(--gold); color:var(--gold2);
  background:rgba(201,168,76,.1);
}

/* iOS/PWA tip bubble */
#ka-ios-tip, #ka-pwa-tip {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:#1a1522; border:1px solid rgba(201,168,76,.35);
  border-radius:14px; padding:14px 16px 10px;
  z-index:99999; font-family:'DM Sans',sans-serif;
  font-size:.8em; color:#e8e0d5; line-height:1.5;
  text-align:center; max-width:290px; width:90%;
  box-shadow:0 8px 30px rgba(0,0,0,.7);
  display:none;
}
#ka-ios-tip.show, #ka-pwa-tip.show { display:block; animation:kaaSlideUp .3s ease; }
#ka-ios-tip strong, #ka-pwa-tip strong { color:#e8c97a; }
.ka-tip-close {
  display:block; margin-top:10px; width:100%;
  background:none; border:1px solid rgba(255,255,255,.1);
  color:#6a6070; border-radius:8px; padding:5px;
  cursor:pointer; font-size:.85em; font-family:'DM Sans',sans-serif;
}