:root{
  --bg:#08060d; --bg2:#120b1c; --card:#140d20; --card2:#1c1330; --card-hi:#241a38;
  --border:rgba(255,61,129,.16); --border2:rgba(255,61,129,.32);
  --accent:#ff3d81; --accent2:#00e5c7; --accent3:#ff9a3d; --danger:#ff4d6d; --warn:#ffd23f;
  --txt:#f6f1fb; --mut:#a89bc0;
  --font:'Manrope',system-ui,-apple-system,sans-serif;
  --font-display:'Unbounded',var(--font);
  --mono:'JetBrains Mono','Consolas',monospace;
  --r:18px; --r-sm:10px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(ellipse 800px 460px at 88% -8%, rgba(255,61,129,.13), transparent 62%),
    radial-gradient(ellipse 650px 460px at 2% 8%, rgba(0,229,199,.09), transparent 62%),
    var(--bg);
  color:var(--txt);font-family:var(--font);
  min-height:100vh;line-height:1.5;
}
h1,h2,h3,.logo,.hero h1{font-family:var(--font-display);}
.site-bg-layer{
  position:fixed;inset:0;z-index:-2;background-size:cover;background-position:center;
  background-repeat:no-repeat;opacity:0;transition:opacity 1.5s ease;
}
.site-bg-layer.active{opacity:1}
#site-bg-overlay{
  position:fixed;inset:0;z-index:-1;background:rgba(6,6,10,.4);display:none;
}
#site-bg-overlay.show{display:block}
a{color:var(--accent);text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea{font-family:inherit}

/* ══ HEADER ══ */
header{
  position:sticky;top:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;background:rgba(18,8,31,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.logo{
  font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:1.5px;cursor:pointer;
  text-transform:uppercase;
  background:linear-gradient(120deg,var(--accent3),var(--accent) 45%,#a63dff 72%,var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,61,129,.25));
  transition:filter .2s ease, transform .2s ease;
}
.logo:hover{ filter:drop-shadow(0 0 20px rgba(255,61,129,.4)); transform:translateY(-1px); }
.header-actions{ display:flex; align-items:center; gap:12px; }

.radio-dj-pill{
  display:flex; align-items:center; gap:7px;
  background:var(--card); border:1px solid var(--border2); border-radius:20px;
  padding:7px 14px 7px 10px; cursor:pointer; transition:all .2s ease;
  color:var(--txt); font-family:var(--mono); font-size:12px; font-weight:700;
}
.radio-dj-icon{ width:16px; height:16px; color:var(--mut); transition:color .2s; }
.radio-dj-pill:hover{ border-color:var(--accent); }
.radio-dj-pill:hover .radio-dj-icon{ color:var(--accent); }
.radio-dj-pill.active{
  background:linear-gradient(120deg,var(--accent),#a63dff 55%,var(--accent2)); border-color:transparent; color:#1a0512;
}
.radio-dj-pill.active .radio-dj-icon{ color:#1a0512; animation:radio-pulse 1.6s ease-in-out infinite; }
@keyframes radio-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }
@media (prefers-reduced-motion: reduce){ .radio-dj-pill.active .radio-dj-icon{ animation:none; } }

.music-icon-link{
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 18px 0 14px; border-radius:24px;
  background:linear-gradient(120deg,var(--accent),#a63dff 55%,var(--accent2));
  color:#1a0512; font-family:var(--mono); font-size:13px; font-weight:700;
  box-shadow:0 6px 20px rgba(255,61,129,.35);
  transition:transform .2s ease, box-shadow .2s ease; cursor:pointer;
}
.music-icon-link svg{ width:24px; height:24px; flex-shrink:0; }
.music-icon-link:hover{ transform:scale(1.06); box-shadow:0 8px 26px rgba(255,61,129,.5); color:#1a0512; }
.music-icon-link span{ white-space:nowrap; }
@media (max-width:520px){ .music-icon-link span{ display:none; } .music-icon-link{ padding:0 12px; } }
.music-icon-link:hover{ border-color:var(--accent2); color:var(--accent2); transform:scale(1.08); }

.header-icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--card); border:1px solid var(--border2); color:var(--mut);
  font-size:14px; cursor:pointer; transition:all .2s ease;
}
.header-icon-btn:hover{ border-color:var(--accent); color:var(--accent); transform:scale(1.08); }

.ad-poster{
  max-width:min(400px,calc(100% - 32px)); margin:14px auto 0; border-radius:14px;
  overflow:hidden; border:1px solid var(--border2); box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.ad-poster img{ width:100%; display:block; }
.btn{
  background:none;border:1px solid var(--border2);color:var(--txt);
  padding:8px 16px;border-radius:var(--r-sm);font-size:13px;font-weight:600;
  cursor:pointer;transition:.15s;
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn:active{ transform:scale(.96); }
.btn.primary{
  background:linear-gradient(120deg,var(--accent3),var(--accent) 60%,#a63dff);
  color:#1a0512;border-color:transparent;font-weight:800;border-radius:22px;
  box-shadow:0 6px 18px rgba(255,61,129,.28);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn.primary:hover{ transform:scale(1.04); box-shadow:0 8px 24px rgba(255,61,129,.42); }
.btn.danger:hover{border-color:var(--danger);color:var(--danger)}
.btn.sm{padding:5px 10px;font-size:12px}
.lang-switch{
  background:var(--accent);color:#1a0512;border-color:var(--accent);
  font-weight:800;box-shadow:0 0 12px rgba(255,61,129,.4);
}
.lang-switch:hover{background:#00e5c7;color:#1a0512;transform:scale(1.05)}

/* ══ HERO ══ */
.hero{
  padding:150px 24px 70px; text-align:center; position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 640px 380px at 22% 0%, rgba(255,61,129,.14), transparent 68%),
    radial-gradient(ellipse 640px 380px at 78% 22%, rgba(0,229,199,.10), transparent 68%);
}
.hero-avatar{
  width:120px;height:120px;border-radius:50%;object-fit:cover;margin:0 auto 22px;
  border:3px solid var(--accent);box-shadow:0 0 40px rgba(255,61,129,.45), 0 0 0 8px rgba(255,61,129,.06);
  animation:hero-avatar-in .6s cubic-bezier(.2,.8,.2,1);
}
@keyframes hero-avatar-in{ from{ opacity:0; transform:scale(.85) translateY(10px); } to{ opacity:1; transform:scale(1) translateY(0); } }
.hero h1{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(32px,6vw,58px); margin-bottom:16px; letter-spacing:-.01em;
  background:linear-gradient(100deg,var(--accent),#a63dff 55%,var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hero-text-in .6s .1s cubic-bezier(.2,.8,.2,1) both;
}
.hero p{
  color:var(--mut); font-size:18px; max-width:560px; margin:0 auto;
  animation:hero-text-in .6s .2s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes hero-text-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .hero-avatar, .hero h1, .hero p{ animation:none; }
}

.custom-media-spot{
  position:absolute; top:150px; left:0; z-index:2;
  width:min(300px, 36%); height:150px; border-radius:0 16px 16px 0; overflow:hidden;
  box-shadow:0 16px 36px rgba(0,0,0,.4); border:1px solid var(--border2); border-left:none;
  background:var(--card);
}
.custom-media-spot img, .custom-media-spot video{ width:100%; height:100%; object-fit:cover; display:block; }
.custom-media-empty{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  height:150px; border:1.5px dashed var(--border2); cursor:pointer;
  color:var(--mut); font-size:13px; font-weight:600; transition:all .2s ease;
}
.custom-media-empty span:first-child{ font-size:26px; }
.custom-media-empty:hover{ border-color:var(--accent); color:var(--accent); }
@media (max-width:760px){
  .custom-media-spot{ position:static; width:min(320px,90%); margin:0 auto 24px; }
}

/* ══ SECTIONS ══ */
section{max-width:1000px;margin:0 auto;padding:50px 24px}

/* ══ MŪZIKAS PILNEKRĀNA TELPA ══ */
.music-overlay{
  display:none; position:fixed; inset:0; z-index:250;
  background:var(--bg); overflow-y:auto; max-width:none; margin:0; padding:0;
}
.music-overlay.open{ display:block; }
.music-overlay-inner{ max-width:1000px; margin:0 auto; padding:80px 24px 60px; }
.music-overlay-close{
  position:fixed; top:16px; left:16px; z-index:2; display:flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:13px; font-weight:700;
  padding:9px 16px; border-radius:20px; border:1px solid var(--border2);
  background:rgba(24,15,35,.9); backdrop-filter:blur(10px); color:var(--txt); cursor:pointer;
  transition:all .15s ease;
}
.music-overlay-close:hover{ border-color:var(--accent); color:var(--accent); }
@media (max-width:640px){ .music-overlay-inner{ padding-top:70px; } }
section h2{font-size:24px;margin-bottom:20px;color:var(--txt);display:flex;align-items:center;gap:8px}
section h2::before{content:'';width:4px;height:20px;background:var(--accent);border-radius:2px}
.about-text{color:var(--mut);font-size:15px;white-space:pre-wrap;max-width:720px}

/* "Par mani" — tuvāk kreisajai malai (nevis centrēts) un nedaudz augstāk */
#about{margin:0 auto 0 4vw;padding-top:24px;padding-bottom:36px}
@media(max-width:640px){#about{margin-left:16px;padding-top:16px}}

/* Smalka "parādīšanās" animācija, ritinot sadaļām klāt */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.revealed{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ══ GALLERY ══ */
.cat-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.cat-tab{
  background:var(--card);border:1px solid var(--border);color:var(--mut);
  padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;transition:.15s;
}
.cat-tab:hover{border-color:var(--border2);color:var(--txt)}
.cat-tab.active{background:linear-gradient(120deg,var(--accent3),var(--accent));color:#1a0512;border-color:transparent;font-weight:700}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.gallery-item{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--border);background:var(--card);aspect-ratio:1;}
.gallery-item img{width:100%;height:100%;object-fit:cover}
.gallery-item .cap{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);color:#fff;font-size:12px;padding:16px 8px 6px}
.gallery-item .del{position:absolute;top:6px;right:6px}
.empty-msg{color:var(--mut);font-size:14px;font-style:italic}

/* ══ MUSIC ══ */
.section-header-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.section-header-row h2{margin-bottom:0}
.track-list{display:flex;flex-direction:column;gap:8px;max-width:640px}
.track-search{
  display:block;width:100%;max-width:640px;margin-bottom:14px;
  background:var(--card);border:1px solid var(--border);color:var(--txt);
  padding:10px 14px;border-radius:20px;font-size:14px;outline:none;transition:.15s;
}
.track-search:focus{border-color:var(--accent)}
.track-search::placeholder{color:var(--mut)}
.view-toggle-btn{
  background:var(--card2);border:1.5px solid var(--accent);color:var(--accent);
  font-weight:700;padding:8px 16px;border-radius:20px;flex-shrink:0;
  box-shadow:0 0 10px rgba(255,61,129,.25);transition:.15s;
}
.view-toggle-btn:hover{background:var(--accent);color:#1a0512;transform:scale(1.05)}
@media(max-width:640px){.section-header-row{flex-direction:column;align-items:flex-start}}

/* ── Režģa skats (produktu-kartes stils) ── */
.track-list.grid-view{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;
  max-width:none;
}
.grid-view .track{
  flex-direction:column;align-items:stretch;text-align:center;padding:14px;gap:8px;
  border-radius:20px; background:linear-gradient(160deg, var(--card-hi), var(--card) 75%);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.grid-view .track .drag-handle{display:none}
.grid-view .track .track-num{align-self:flex-start;min-width:auto}
.grid-view .track .cover{
  width:100%;height:auto;aspect-ratio:1;border-radius:14px;margin:0 auto;
  position:relative; box-shadow:0 10px 26px rgba(0,0,0,.4);
  transition:transform .3s ease, box-shadow .3s ease;
}
.grid-view .track .meta{text-align:center;width:100%}
.grid-view .track .meta .t{white-space:normal;overflow-wrap:break-word}
.grid-view .track .meta .a{white-space:normal}
.grid-view .track .play-ic,
.grid-view .track .dl-track,
.grid-view .track .del{align-self:center}
/* cycle a warm/cool accent per card, matching the orange+mint product-card look */
.grid-view .track:nth-child(3n+1){ --card-accent: var(--accent3); }
.grid-view .track:nth-child(3n+2){ --card-accent: var(--accent2); }
.grid-view .track:nth-child(3n+3){ --card-accent: var(--accent); }
.grid-view .track:hover{
  transform:translateY(-8px) scale(1.03);
  border-color:color-mix(in srgb, var(--card-accent, var(--accent)) 55%, var(--border2));
  box-shadow:0 22px 46px rgba(0,0,0,.5), 0 0 30px -10px var(--card-accent, rgba(255,61,129,.4));
}
.grid-view .track:hover .cover{
  transform:scale(1.04);
  box-shadow:0 0 0 2px var(--card-accent, var(--accent)), 0 14px 32px rgba(0,0,0,.45);
}
.track{
  display:flex;align-items:center;gap:14px;padding:10px 14px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);
  cursor:pointer;transition:.15s;
}
.track:hover{border-color:var(--border2)}
.track.playing{border-color:var(--accent);background:var(--card2)}
.track.shared-highlight{
  border-color:var(--accent2)!important;
  box-shadow:0 0 0 2px rgba(0,229,199,.3),0 0 20px rgba(0,229,199,.35);
  animation:shared-pulse 1s ease-in-out 2;
}
@keyframes shared-pulse{0%,100%{background:var(--card)}50%{background:var(--card2)}}
.track .cover{width:44px;height:44px;border-radius:6px;object-fit:cover;background:var(--bg2);flex-shrink:0}
.track .meta{flex:1;min-width:0}
.track .meta .t{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track .meta .a{font-size:12px;color:var(--mut)}
.play-count{
  display:inline-block;font-size:10px;font-weight:700;color:var(--warn);
  margin-left:8px;background:rgba(255,196,0,.1);border:1px solid rgba(255,196,0,.3);
  border-radius:8px;padding:1px 6px;
}
.track-num{
  font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums;
  min-width:22px;text-align:right;flex-shrink:0;
}
.last-played-tag{
  display:inline-block;font-size:10px;font-weight:700;color:var(--accent2);
  margin-left:8px;background:rgba(0,229,199,.1);border:1px solid rgba(0,229,199,.3);
  border-radius:8px;padding:1px 6px;
}
.genre-tag{
  display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  background:rgba(255,61,129,.12);color:var(--accent);border:1px solid var(--border2);
  border-radius:10px;padding:1px 8px;margin-left:8px;vertical-align:middle;
}
.track .play-ic{font-size:18px;color:var(--accent);flex-shrink:0}
.track .dl-track{
  background:none;border:none;color:var(--mut);font-size:15px;padding:4px 6px;
  flex-shrink:0;opacity:.75;transition:.15s;
}
.track .dl-track:hover{color:var(--accent);opacity:1}
#pb-download{font-size:16px}
.track .drag-handle{cursor:grab;color:var(--mut);font-size:16px;flex-shrink:0;user-select:none}
.track.dragging{opacity:.4}
.track.drag-over{border-color:var(--accent);border-style:dashed}
.hint{color:var(--mut);font-size:12px;font-style:italic;margin-bottom:12px}
.sub-h{font-size:15px;color:var(--mut);margin:18px 0 10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.sub-h:first-of-type{margin-top:0}

#player-bar{
  position:fixed;left:50%;top:calc(var(--header-h, 64px) + 10px);transform:translateX(-50%);z-index:150;
  width:min(920px,calc(100% - 28px));
  background:rgba(24,15,35,.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border2);border-radius:18px;
  box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 0 1px rgba(255,61,129,.06);
  padding:10px 20px;
  display:none;align-items:center;gap:24px;
  transition:box-shadow .3s ease, top .2s ease;
  overflow:hidden;
}
#player-bar::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--accent),#a63dff 50%,var(--accent2));
}
#player-bar.show{display:flex}
#player-bar:has(.waveform.playing){box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 24px rgba(255,61,129,.25)}

.pb-track-info{display:flex;align-items:center;gap:14px;min-width:200px;flex-shrink:0}
.pb-cover-wrap{position:relative;flex-shrink:0}
.pb-cover-wrap::before{
  content:""; position:absolute; inset:-3px; border-radius:14px; z-index:-1;
  background:linear-gradient(135deg,var(--accent),#a63dff 50%,var(--accent2));
  opacity:0; transition:opacity .3s ease;
}
#player-bar.show .pb-cover-wrap::before{ opacity:.55; }
#player-bar .cover{width:58px;height:58px;border-radius:12px;object-fit:cover;flex-shrink:0;
  box-shadow:0 0 0 1px var(--border), 0 6px 18px rgba(0,0,0,.4)}
.waveform{
  position:absolute;bottom:-6px;right:-6px;display:flex;align-items:flex-end;gap:2px;
  background:var(--bg2);border-radius:6px;padding:4px 5px;box-shadow:0 0 0 1px var(--border);
}
.waveform span{width:2.5px;height:4px;background:var(--accent);border-radius:1px;transition:height .15s;opacity:.4}
.waveform.playing span{opacity:1;animation:wave-bounce 0.9s ease-in-out infinite}
.waveform span:nth-child(1){animation-delay:0s}
.waveform span:nth-child(2){animation-delay:.15s}
.waveform span:nth-child(3){animation-delay:.3s}
.waveform span:nth-child(4){animation-delay:.15s}
.waveform span:nth-child(5){animation-delay:0s}
@keyframes wave-bounce{
  0%,100%{height:4px}
  50%{height:14px}
}
.pb-track-info .info{min-width:0}
.pb-track-info .info .t{
  font-family:var(--font-display);font-size:14.5px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;
  position:relative;
}
.pb-track-info .info .t span{ display:inline-block; }
.pb-track-info .info .t.marquee{ text-overflow:clip; }
.pb-track-info .info .t.marquee span{ animation:pb-marquee 9s linear infinite; animation-delay:1.2s; }
@keyframes pb-marquee{
  0%, 12%{ transform:translateX(0); }
  50%{ transform:translateX(var(--marquee-dist, 0px)); }
  88%, 100%{ transform:translateX(0); }
}
.pb-track-info .info .a{font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;margin-top:2px}

.pb-center{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.pb-controls{display:flex;align-items:center;gap:20px}
.pb-btn{
  background:none;border:none;color:var(--txt);font-size:17px;cursor:pointer;
  padding:4px;line-height:1;transition:.15s;opacity:.85;
}
.pb-btn:hover{opacity:1;color:var(--accent);transform:scale(1.12)}
.pb-btn.pb-play{
  width:44px;height:44px;border-radius:50%;color:#1a0512;
  background:linear-gradient(135deg,var(--accent),#a63dff 55%,var(--accent2));
  display:flex;align-items:center;justify-content:center;font-size:16px;opacity:1;
  box-shadow:0 4px 18px rgba(255,61,129,.4);transition:transform .15s ease, box-shadow .2s ease;
}
.pb-btn.pb-play:hover{transform:scale(1.08);box-shadow:0 6px 24px rgba(255,61,129,.55);color:#1a0512}
.pb-btn.pb-toggle{font-size:14px;opacity:.55}
.pb-btn.pb-toggle.active{opacity:1;color:var(--accent2);text-shadow:0 0 8px rgba(0,229,199,.6)}
#player-bar .cover{transition:box-shadow .3s ease}
#pb-cover.pulsing{box-shadow:0 0 0 1px var(--border), 0 0 20px rgba(255,61,129,.55)}

.pb-seek-row{display:flex;align-items:center;gap:10px;width:100%;max-width:520px}
.pb-time{font-size:11px;color:var(--mut);font-variant-numeric:tabular-nums;width:34px;flex-shrink:0}
#pb-duration{text-align:right}
.pb-progress{
  flex:1;height:5px;background:var(--card2);border-radius:3px;position:relative;cursor:pointer;
  overflow:hidden;
}
.pb-progress-fill{
  position:absolute;left:0;top:0;height:100%;border-radius:3px;width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
}
.pb-progress-handle{
  position:absolute;top:50%;left:0%;width:12px;height:12px;border-radius:50%;
  background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 8px rgba(255,61,129,.7);
  opacity:0;transition:opacity .15s;
}
.pb-progress:hover .pb-progress-handle{opacity:1}

.pb-volume{display:flex;align-items:center;gap:6px;flex-shrink:0;min-width:110px}
.pb-volume span{font-size:14px}
#pb-volume-slider{
  width:80px;accent-color:var(--accent);height:4px;cursor:pointer;
}

@media(max-width:820px){
  .pb-track-info{min-width:0}
  .pb-track-info .info .t,.pb-track-info .info .a{max-width:110px}
  .pb-volume{display:none}
}
@media(max-width:640px){
  #player-bar{gap:12px}
  .pb-track-info .info{display:none}
}

/* ══ CHAT ══ */
#chat-box{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  display:flex;flex-direction:column;height:380px;
}
#chat-msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:6px}
.chat-line{font-size:13px;line-height:1.4}
.chat-line b{color:var(--accent)}
.chat-form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border)}
.chat-form input{flex:1;background:var(--bg2);border:1px solid var(--border);color:var(--txt);padding:8px 10px;border-radius:var(--r-sm);font-size:13px;outline:none}
.chat-form input:focus{border-color:var(--accent)}
#chat-name{max-width:120px}

/* ══ APMEKLĒJUMU SKAITĪTĀJS (admin) ══ */
#visit-counter{
  position:fixed;top:70px;left:20px;z-index:180;
  background:rgba(21,21,31,.9);backdrop-filter:blur(10px);
  border:1px solid var(--border2);border-radius:20px;
  padding:6px 14px;font-size:13px;font-weight:700;color:var(--accent);
  align-items:center;gap:6px;box-shadow:0 4px 16px rgba(0,0,0,.35);
}
@media(max-width:640px){#visit-counter{top:64px;left:10px;font-size:12px;padding:5px 10px}}

/* ══ ČATA PELDOŠAIS PANELIS ══ */
#chat-fab{
  position:fixed;bottom:20px;left:20px;z-index:400;
  width:50px;height:50px;border-radius:50%;background:var(--accent);
  border:none;color:#1a0512;font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;position:fixed;
  box-shadow:0 4px 16px rgba(255,61,129,.35);transition:transform .15s;
}
#chat-fab:hover{transform:scale(1.06)}
.chat-badge{
  position:absolute;top:-4px;right:-4px;background:var(--danger);color:#fff;
  font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
}
#chat-panel{
  position:fixed;bottom:82px;left:20px;z-index:399;width:400px;max-width:calc(100vw - 32px);
  max-height:min(72vh,620px);background:var(--card);border:1px solid var(--border2);
  border-radius:var(--r);box-shadow:0 12px 40px rgba(0,0,0,.5);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:translateY(16px) scale(.97);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
#chat-panel.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.chat-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid var(--border);font-weight:700;font-size:14px;
}
.chat-panel-close{background:none;border:none;color:var(--mut);font-size:16px;cursor:pointer;padding:2px 6px}
.chat-panel-close:hover{color:var(--txt)}
#chat-panel #chat-msgs{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px;max-height:420px;min-height:260px}
#chat-panel .chat-form{padding:10px;display:flex;gap:6px;flex-wrap:wrap}
#chat-panel .chat-form input{flex:1;min-width:80px}
.chat-translate-btn{
  background:var(--card2);border:1px solid var(--border2);color:var(--accent);
  width:32px;height:32px;border-radius:var(--r-sm);font-weight:800;font-size:13px;
  cursor:pointer;flex-shrink:0;transition:.15s;
}
.chat-translate-btn:hover{background:var(--accent);color:#1a0512}
.chat-translate-btn.busy{opacity:.5;pointer-events:none}
.chat-line{position:relative;padding-right:22px}
.chat-line .msg-translate-btn{
  position:absolute;top:0;right:0;background:none;border:none;color:var(--mut);
  font-weight:800;font-size:11px;cursor:pointer;padding:2px 4px;opacity:.6;
}
.chat-line .msg-translate-btn:hover{opacity:1;color:var(--accent)}
.chat-line .translated-text{display:block;font-size:12px;color:var(--accent2);margin-top:2px;font-style:italic}
@media(max-width:480px){
  #chat-panel{left:10px;bottom:76px;width:calc(100vw - 20px)}
  #chat-fab{left:14px;bottom:14px}
  #back-to-top{left:14px}
  #admin-fab{left:70px;bottom:14px}
}

/* ══ ADMIN ══ */
#admin-fab{
  position:fixed;bottom:20px;left:82px;z-index:400;
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);color:rgba(154,164,178,.5);font-size:14px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:.55;transition:.2s;
}
#admin-fab:hover{opacity:1;color:var(--mut);border-color:var(--border)}

#back-to-top{
  position:fixed;bottom:90px;left:20px;z-index:400;
  width:42px;height:42px;border-radius:50%;background:var(--card);
  border:1px solid var(--border2);color:var(--mut);font-size:18px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .2s,transform .2s;
}
#back-to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
#back-to-top:hover{color:var(--accent);border-color:var(--accent)}

.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:500;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.show{display:flex}
.modal{
  background:var(--card);border:1px solid var(--border2);border-radius:var(--r);
  padding:24px;width:100%;max-width:420px;max-height:90vh;overflow-y:auto;
}
.modal h3{margin-bottom:16px;font-size:18px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--mut);margin-bottom:5px;font-weight:600}
.field input,.field textarea{
  width:100%;background:var(--bg2);border:1px solid var(--border);color:var(--txt);
  padding:9px 11px;border-radius:var(--r-sm);font-size:14px;outline:none;
}
.field input:focus,.field textarea:focus{border-color:var(--accent)}
.field textarea{min-height:90px;resize:vertical}
.lang-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lang-row.lang-row-translate{grid-template-columns:1fr auto 1fr;align-items:end}
.translate-btn{
  background:var(--card2);border:1px solid var(--border2);color:var(--accent);
  width:30px;height:30px;border-radius:50%;font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  margin-bottom:9px;transition:.15s;
}
.translate-btn:hover{background:var(--accent);color:#1a0512;transform:scale(1.08)}
.translate-btn.busy{opacity:.5;pointer-events:none;animation:spin 1s linear infinite}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.field input.auto-translated,.field textarea.auto-translated{border-color:var(--accent2)}
@media(max-width:520px){
  .lang-row.lang-row-translate{grid-template-columns:1fr}
  .translate-btn{justify-self:center;margin:2px 0}
}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.msg-err{color:var(--danger);font-size:13px;margin-top:8px}

/* ── Dalīšanās (share) logs ── */
.share-preview{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:10px 12px;margin-bottom:16px;overflow:hidden;
}
.share-preview-title{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.share-preview-url{font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.share-btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.share-btn{
  display:flex;align-items:center;gap:8px;padding:11px 14px;border-radius:var(--r-sm);
  border:1px solid var(--border2);background:var(--card2);color:var(--txt);
  font-size:14px;font-weight:600;cursor:pointer;transition:.15s;
}
.share-btn:hover{transform:translateY(-1px);filter:brightness(1.12)}
.share-icon{font-size:17px;line-height:1}
.share-fb:hover{background:#1877f2;border-color:#1877f2;color:#fff}
.share-wa:hover{background:#25d366;border-color:#25d366;color:#04220f}
.share-x:hover{background:#000;border-color:#333;color:#fff}
.share-tg:hover{background:#229ed9;border-color:#229ed9;color:#fff}
.share-copy:hover{background:var(--accent);border-color:var(--accent);color:#1a0512}
@media(max-width:420px){.share-btn-grid{grid-template-columns:1fr}}
.msg-ok{color:var(--accent2);font-size:13px;margin-top:8px}
#bg-current-preview img{width:100%;max-height:120px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--border)}
.bg-slides-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin-top:6px}
.bg-slide-item{position:relative;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--border)}
.bg-slide-item img{width:100%;height:100%;object-fit:cover}
.bg-slide-item button{position:absolute;top:2px;right:2px;width:20px;height:20px;padding:0;font-size:11px;line-height:1;border-radius:50%}
#bg-upload-progress{font-size:12px;color:var(--mut);margin:6px 0}

#admin-bar{
  display:none;position:sticky;top:53px;z-index:190;
  background:rgba(255,196,0,.1);border-bottom:1px solid rgba(255,196,0,.3);
  padding:8px 24px;font-size:13px;color:var(--warn);
  align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
}
#admin-bar.show{display:flex}
.admin-edit{border:1px dashed var(--border2);border-radius:var(--r-sm);padding:4px}

footer{text-align:center;padding:30px;color:var(--mut);font-size:12px;border-top:1px solid var(--border)}

/* ══ TOAST ══ */
#toast-container{position:fixed;top:70px;right:20px;z-index:600;display:flex;flex-direction:column;gap:8px;max-width:320px}
.toast{
  background:var(--card2);border:1px solid var(--border2);border-left:3px solid var(--accent);
  border-radius:var(--r-sm);padding:12px 16px;font-size:13px;color:var(--txt);
  box-shadow:0 8px 24px rgba(0,0,0,.4);animation:toast-in .2s ease-out;
}
.toast.err{border-left-color:var(--danger)}
.toast.ok{border-left-color:var(--accent2)}
.toast.fade{animation:toast-out .3s ease-in forwards}
@keyframes toast-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes toast-out{to{opacity:0;transform:translateX(20px)}}

/* ══ MISC ══ */
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
#bulk-progress{font-size:12px;color:var(--mut);margin-bottom:8px;max-height:120px;overflow-y:auto;display:flex;flex-direction:column;gap:3px}
#bulk-progress .line-ok{color:var(--accent2)}
#bulk-progress .line-err{color:var(--danger)}

@media(max-width:640px){
  header{padding:12px 14px;flex-wrap:wrap}
  nav{width:100%;justify-content:center}
  section{padding:36px 16px}
  #player-bar{padding:8px 14px}
}

/* ══ YOUTH-VIBE DEKORĀCIJAS (PULSS re-skin) ══ */
.orb{
  position:fixed; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0;
  opacity:.30; animation:orb-float 14s ease-in-out infinite;
}
.orb1{ width:320px; height:320px; background:var(--accent); top:-80px; right:-60px; }
.orb2{ width:280px; height:280px; background:var(--accent2); bottom:10%; left:-100px; animation-delay:-5s; animation-duration:18s; }
.orb3{ width:220px; height:220px; background:#a63dff; top:45%; right:12%; animation-delay:-9s; animation-duration:16s; }
@keyframes orb-float{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(20px,-30px) scale(1.08); }
  66%{ transform:translate(-24px,18px) scale(0.94); }
}
@media (prefers-reduced-motion: reduce){ .orb{ animation:none; } }
@media (max-width:900px){ .orb{ display:none; } }

.cursor-glow{
  position:fixed; width:420px; height:420px; border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle, rgba(255,61,129,.10), rgba(166,61,255,.06) 40%, transparent 70%);
  transform:translate(-50%,-50%); left:-999px; top:-999px;
  transition:opacity .3s; opacity:0;
}
@media (max-width:900px), (hover:none){ .cursor-glow{ display:none; } }

::selection{ background:var(--accent); color:#fff; }
:focus-visible{ outline:2px solid var(--accent2); outline-offset:3px; }

.track:hover{ border-color:var(--accent); box-shadow:0 8px 24px rgba(255,61,129,.12); }
.gallery-item{ transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
.gallery-item:nth-child(3n+1){ --gi-glow: rgba(255,154,61,.28); }
.gallery-item:nth-child(3n+2){ --gi-glow: rgba(0,229,199,.28); }
.gallery-item:nth-child(3n+3){ --gi-glow: rgba(255,61,129,.28); }
.gallery-item:hover{ transform:translateY(-5px) scale(1.015); box-shadow:0 16px 36px rgba(0,0,0,.4), 0 0 24px -6px var(--gi-glow, rgba(255,61,129,.25)); }

/* ══ ŽANRU FILTRS ══ */
.genre-chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
.genre-chip{
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  padding:7px 14px; border:1px solid var(--border); border-radius:20px;
  color:var(--mut); cursor:pointer; transition:all .15s; background:none;
}
.genre-chip:hover{ border-color:var(--accent); color:var(--txt); }
.genre-chip.active{ background:linear-gradient(120deg,var(--accent3),var(--accent)); border-color:transparent; color:#1a0512; font-weight:700; }

/* ══ ŽANRU MAPES ══ */
.genre-folder-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:14px;
  margin:18px 0 30px;
}
.genre-folder{
  position:relative; border-radius:24px; padding:0; cursor:pointer;
  background:linear-gradient(160deg, var(--card-hi), var(--card) 72%);
  border:1px solid var(--border); overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
  display:flex; flex-direction:column; align-items:stretch; text-align:left;
}
.genre-folder::before{
  content:""; position:absolute; inset:0; background:var(--folder-grad);
  opacity:.08; transition:opacity .3s ease;
}
.genre-folder:hover{
  transform:translateY(-8px) scale(1.03);
  box-shadow:0 22px 48px rgba(0,0,0,.5), 0 0 32px -8px var(--folder-glow, rgba(255,61,129,.35));
  border-color:rgba(255,255,255,.22);
}
.genre-folder:hover::before{ opacity:.16; }

/* "photo" zone — liels izplūdis spīdums aiz ikonas, kā austiņu foto ar halo aiz tām */
.genre-folder-photo{
  position:relative; height:150px; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.genre-folder-photo::before{
  content:""; position:absolute; width:78%; height:78%; border-radius:50%;
  background:var(--folder-grad); filter:blur(38px); opacity:.55;
  transition:opacity .3s ease, transform .3s ease;
}
.genre-folder:hover .genre-folder-photo::before{ opacity:.8; transform:scale(1.12); }

.genre-folder-icon{
  font-size:44px; position:relative; z-index:1;
  width:88px; height:88px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:transform .3s ease;
}
.genre-folder:hover .genre-folder-icon{ transform:rotate(-8deg) scale(1.08); }

.genre-folder-body{ padding:16px 18px 20px; position:relative; z-index:1; }
.genre-folder-name{
  font-family:var(--font-display); font-weight:700; font-size:15px;
  letter-spacing:.01em;
}
.genre-folder-count{
  font-family:var(--mono); font-size:11px; color:var(--mut); margin-top:4px; display:block;
}
/* katrai mapei sava spīduma nokrāsa, saskaņā ar tās gradientu */
#genre-folder-grid-lv .genre-folder{ --folder-glow: rgba(255,154,61,.4); }
#genre-folder-grid-en .genre-folder{ --folder-glow: rgba(0,229,199,.4); }

.genre-folder.unsorted{
  border:1px solid var(--accent2);
  background:linear-gradient(160deg, rgba(0,229,199,.10), var(--card) 60%);
}
.genre-folder.unsorted .genre-folder-icon{ opacity:.9; }
.genre-folder.unsorted-action{
  display:flex; flex-direction:row; align-items:center; justify-content:space-between;
  text-align:left; gap:14px; padding:16px 20px; cursor:default;
  grid-column:1 / -1; /* pilnā platumā, virs pārējām mapēm */
}
.genre-folder.unsorted-action::before, .genre-folder.unsorted-action::after{ display:none; }
.genre-folder.unsorted-action .uf-left{ display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
.genre-folder.unsorted-action .uf-icon{ font-size:26px; }
.genre-folder.unsorted-action .uf-text b{ display:block; font-size:14px; }
.genre-folder.unsorted-action .uf-text span{ font-size:12px; color:var(--mut); }
.genre-folder.unsorted-action .uf-btn{
  font-family:var(--mono); font-size:12px; font-weight:600; white-space:nowrap;
  padding:9px 16px; border-radius:10px; border:1px solid var(--accent2); position:relative; z-index:1;
  background:rgba(0,229,199,.12); color:var(--accent2); cursor:pointer; transition:all .15s;
}
.genre-folder.unsorted-action .uf-btn:hover{ background:var(--accent2); color:#08201c; }

.genre-browse-bar{ display:flex; align-items:center; gap:12px; margin:14px 0; flex-wrap:wrap; }
.genre-browse-label{ font-family:var(--font-display); font-weight:700; color:var(--accent); }

/* ══ ĀTRĀ SAŠĶIROŠANA (bulk genre panelis) ══ */
.quicksort-overlay{
  display:none; position:fixed; inset:0; z-index:200; background:rgba(10,5,15,.75);
  align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto;
}
.quicksort-overlay.open{ display:flex; }
.quicksort-box{
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  max-width:560px; width:100%; padding:24px; margin-top:20px;
}
.quicksort-box h3{ font-family:var(--font-display); margin-bottom:4px; }
.quicksort-box .qs-sub{ color:var(--mut); font-size:13px; margin-bottom:18px; }
.quicksort-row{
  display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border);
}
.quicksort-row .qs-title{ flex:1; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quicksort-row select{
  background:var(--bg2); border:1px solid var(--border); border-radius:8px; color:var(--txt);
  padding:6px 10px; font-family:var(--font); font-size:13px;
}
.quicksort-row .qs-saved{ font-size:12px; color:var(--accent2); opacity:0; transition:opacity .3s; }
.quicksort-row .qs-saved.show{ opacity:1; }
.quicksort-box .qs-actions{ margin-top:18px; display:flex; justify-content:flex-end; }

/* ══ TIEŠRAIDES KLAUSĪTĀJU NOZĪMĪTE ══ */
.live-badge{
  display:flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--mut);
  padding:6px 12px; border-radius:20px; border:1px solid var(--border); background:var(--card);
}
.live-dot{
  width:7px; height:7px; border-radius:50%; background:#ff3b30; flex-shrink:0;
  animation:live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,59,48,.55); }
  50%{ box-shadow:0 0 0 5px rgba(255,59,48,0); }
}
@media (prefers-reduced-motion: reduce){ .live-dot{ animation:none; } }
@media (max-width:760px){ .live-badge{ display:none; } }

/* ══ PULSĒJOŠS GAISMAS GREDZENS AP VĀCIŅU (reaģē uz basu + maina krāsu atkarībā no mūzikas enerģijas) ══ */
.pb-cover-glow{
  position:absolute; inset:-10px; z-index:-1; border-radius:18px;
  background:radial-gradient(circle, var(--accent) 0%, var(--accent2) 55%, transparent 72%);
  opacity:0; filter:blur(10px) hue-rotate(0deg);
  transform:scale(.85);
  transition:opacity .25s ease;
  pointer-events:none;
}
.pb-cover-glow.active{ opacity:.75; }

/* Atskaņošanas pogas mirdzums seko tai pašai krāsu maiņai — viss atskaņotājs
   izskatās kā viena saskaņota, "dzīva" gaismas sistēma, nevis atsevišķi elementi. */
.pb-btn.pb-play{ transition:transform .15s ease, box-shadow .2s ease, filter .3s ease; }
.pb-btn.pb-play.audio-reactive{ filter:hue-rotate(var(--reactive-hue, 0deg)); }

/* ══ PILNEKRĀNA "NOW PLAYING" REŽĪMS ══ */
.nowplaying-overlay{
  display:none; position:fixed; inset:0; z-index:300;
  align-items:center; justify-content:center; flex-direction:column;
  overflow:hidden;
}
.nowplaying-overlay.open{ display:flex; }
.np-bg{
  position:absolute; inset:-40px; background-size:cover; background-position:center;
  filter:blur(50px) brightness(.45) saturate(1.3); transform:scale(1.15);
  opacity:0; transition:opacity 1.1s ease;
}
.np-bg.on{ opacity:1; }
.np-bg::after{ content:""; position:absolute; inset:0; background:rgba(10,5,15,.35); }
/* Reāla dominējošā krāsa (ekstrahēta no vāciņa), kas maigi "elpo" reizē ar
   basu — piešķir fonam dzīvu, dziesmai atbilstošu krāsu toni virs izplūduma. */
.np-bg-tint{
  position:absolute; inset:0; mix-blend-mode:screen; opacity:0;
  transition:opacity .6s ease, background .8s ease;
  pointer-events:none;
}
.np-close{
  position:absolute; top:22px; right:22px; z-index:2;
  width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
  background:rgba(20,10,25,.5); color:var(--txt); font-size:16px; cursor:pointer;
}
.np-content{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:14px; padding:20px; max-width:420px; width:100%; }
.np-cover-wrap{ position:relative; margin-bottom:8px; }
.np-particles{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:160%; height:160%; pointer-events:none; z-index:0;
}
.np-cover{
  width:min(280px, 70vw); height:min(280px, 70vw); border-radius:20px; object-fit:cover;
  box-shadow:0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
  display:block; position:relative; z-index:1;
}
.np-title{ font-family:var(--font-display); font-size:22px; font-weight:700; text-align:center; }
.np-artist{ color:var(--mut); font-size:14px; text-align:center; margin-bottom:6px; }
.np-seek-row{ display:flex; align-items:center; gap:10px; width:100%; }
.np-progress{
  flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.15); cursor:pointer; position:relative;
}
.np-progress-fill{ height:100%; border-radius:3px; background:linear-gradient(90deg,var(--accent),var(--accent2)); width:0%; }
.np-controls{ display:flex; align-items:center; gap:18px; margin-top:6px; }
.np-play-big{ width:60px; height:60px; font-size:22px; }
.np-queue{ width:100%; margin-top:4px; display:flex; flex-direction:column; gap:6px; max-height:160px; overflow-y:auto; }
.np-queue-label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); margin-bottom:2px; }
.np-queue-item{
  display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:10px;
  cursor:pointer; transition:background .15s ease;
}
.np-queue-item:hover{ background:rgba(255,255,255,.06); }
.np-queue-item img{ width:32px; height:32px; border-radius:6px; object-fit:cover; flex-shrink:0; }
.np-queue-item .nq-t{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-queue-item .nq-a{ font-size:11px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-queue-item .nq-meta{ min-width:0; flex:1; }
@media (max-width:480px){ .np-cover{ width:min(240px, 65vw); height:min(240px, 65vw); } }
#player-bar .cover{ cursor:pointer; }

/* ══ MANS SARAKSTS (personīgais 24h plejlists) ══ */
.my-playlist-btn{
  display:flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:12px; font-weight:600;
  padding:7px 14px; border-radius:20px; border:1px solid var(--border);
  background:var(--card); color:var(--mut); cursor:pointer; transition:all .15s;
}
.my-playlist-btn:hover{ border-color:var(--accent); color:var(--txt); }
.my-playlist-btn.has-items{ border-color:var(--accent); color:var(--accent); background:rgba(255,61,129,.08); }
.my-playlist-btn span{ font-family:var(--mono); }
@media (max-width:900px){ .my-playlist-btn{ font-size:11px; padding:6px 10px; } }

.pl-toggle-btn{ font-weight:700; }

/* ══ DIVU DAĻU SKATS — LV un EN redzamas vienlaikus, blakus ══ */
.lang-unclassified-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 18px; margin-bottom:18px; border-radius:12px;
  border:1px solid var(--accent2); background:rgba(0,229,199,.08);
  font-size:13px; color:var(--mut);
}

.dual-split{
  display:grid; grid-template-columns:1fr auto 1fr; gap:22px; align-items:start;
}
@media (max-width:860px){
  .dual-split{ grid-template-columns:1fr; gap:36px; }
  .dual-divider{ display:none; }
}
.dual-side-heading{
  font-family:var(--font-display); font-size:1.1rem; font-weight:700; margin-bottom:16px;
  padding-bottom:10px; border-bottom:2px solid var(--border);
}
.dual-side.lv .dual-side-heading{ border-color:var(--accent); }
.dual-side.en .dual-side-heading{ border-color:var(--accent2); }
.dual-side .genre-folder-grid{ grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); }
.dual-divider{
  display:flex; align-items:center; justify-content:center; height:100%;
  padding-top:60px;
}
.dual-divider span{
  writing-mode:vertical-rl; font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:var(--mut); text-transform:uppercase; opacity:.5;
}

/* ══ VIĻŅA JOSLA (waveform scrubber) ══ */
.np-progress{ position:relative; overflow:hidden; }
.np-waveform{
  position:absolute; inset:0; width:100%; height:100%;
  cursor:pointer; opacity:0; transition:opacity .25s;
}
.np-waveform.ready{ opacity:1; }
.np-progress-fill.hidden-by-waveform{ opacity:0; }

/* ══ DZIESMAS VĀRDU PANELIS ══ */
.np-lyrics-toggle{
  margin-top:10px; font-family:var(--mono); font-size:12px; font-weight:600;
  padding:8px 16px; border-radius:20px; border:1px solid var(--border);
  background:rgba(255,255,255,.06); color:var(--txt); cursor:pointer;
}
.np-lyrics-panel{
  display:none; margin-top:16px; max-height:220px; overflow-y:auto;
  width:100%; padding:14px 18px; border-radius:14px;
  background:rgba(0,0,0,.35); border:1px solid var(--border);
  text-align:center; line-height:1.9; font-size:14px; color:var(--mut);
}
.np-lyrics-panel.open{ display:block; }
.np-lyrics-panel .lyric-line{ padding:3px 0; transition:color .2s, transform .2s; }
.np-lyrics-panel .lyric-line.active{
  color:var(--txt); font-weight:700; transform:scale(1.05);
}

/* ══ DJ JUKEBOX + RADIO REŽĪMS ══ */
.jukebox-banner{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:16px 20px; margin-bottom:16px; border-radius:16px;
  background:linear-gradient(120deg, rgba(255,61,129,.14), rgba(0,229,199,.10));
  border:1px solid var(--accent);
}
.jukebox-left{ display:flex; align-items:center; gap:12px; }
.jukebox-pulse{ font-size:22px; animation:jukebox-bounce 1.2s ease-in-out infinite; }
@keyframes jukebox-bounce{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.2); } }
@media (prefers-reduced-motion: reduce){ .jukebox-pulse{ animation:none; } }
.jukebox-left b{ font-family:var(--font-display); font-size:13px; display:block; }
#jukebox-leader-name{ font-size:14px; color:var(--txt); font-weight:600; }
.jukebox-right{ display:flex; align-items:center; gap:12px; }
.jukebox-timer{ font-family:var(--mono); font-size:12px; color:var(--mut); }
.jukebox-vote-btn:hover{ background:var(--accent); border-color:var(--accent); color:#1a0512; }

.radio-mode-row{ margin-bottom:22px; }
.radio-mode-btn{
  width:100%; padding:16px; border-radius:16px; cursor:pointer;
  font-family:var(--font-display); font-size:15px; font-weight:700;
  background:linear-gradient(120deg, var(--accent), #a63dff 55%, var(--accent2));
  color:#0a0510; border:none; transition:transform .2s ease, box-shadow .2s ease;
}
.radio-mode-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(255,61,129,.25); }
.radio-mode-btn.active{
  background:var(--card); color:var(--accent); border:1px solid var(--accent);
}

/* ══ PIELĀGOTA RITJOSLA — lai neizceļas kā noklusējuma pelēka uz tumšā fona ══ */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--border2); border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:var(--accent); }
* { scrollbar-color:var(--border2) var(--bg); scrollbar-width:thin; }