/* /system/style.css */
:root{
  --txt:#cfd3db;
  --shadow:rgba(0,0,0,.62);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --wa-metal-a:#2f3238;
  --wa-metal-b:#121318;
  --wa-metal-c:#07080a;
  --wa-dots:radial-gradient(circle at 1px 1px, rgba(255,255,255,.09) 1px, rgba(0,0,0,0) 1px);

  /* EN ENDA YTTER-RAM (runt hela spelaren) */
  --outerGap:2px;          /* avstånd mellan webbläsare och ramen */
  --bezelW:10px;             /* tjocklek på ramen */
  --bezel-hi:rgba(255,255,255,.10);
  --bezel-in:rgba(0,0,0,.92);

  /* safe-area as vars so strict CSS3 validators do not parse env() in calc() shorthands */
  --safe-top:0px;
  --safe-right:0px;
  --safe-bottom:0px;
  --safe-left:0px;
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-right:env(safe-area-inset-right, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --safe-left:env(safe-area-inset-left, 0px);
}

*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}

body{
  margin:0;
  background:radial-gradient(1200px 800px at 40% 0%, #14161a, #06070a 65%);
  color:var(--txt);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  overflow:hidden;
}

.wa-app{
  position:fixed;
  inset:0;
  height:100vh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:stretch;

  /* padding = gap + bezel, så ramen hamnar mellan webbläsare och panelerna */
  padding:
    calc(var(--safe-top) + var(--outerGap) + var(--bezelW))
    calc(var(--safe-right) + var(--outerGap) + var(--bezelW))
    calc(var(--safe-bottom) + var(--outerGap) + var(--bezelW))
    calc(var(--safe-left) + var(--outerGap) + var(--bezelW));

  overflow:hidden;
  gap:0;
  isolation:isolate;
}

/* DEN ENDA YTTERRAMEN (runt hela layouten: player + playlist + footer) */
.wa-app::before{
  content:"";
  position:absolute;
  inset:
    calc(var(--safe-top) + var(--outerGap))
    calc(var(--safe-right) + var(--outerGap))
    calc(var(--safe-bottom) + var(--outerGap))
    calc(var(--safe-left) + var(--outerGap));
  border:var(--bezelW) solid transparent;
  border-image:linear-gradient(
    135deg,
    #3a3a3f 0%,
    #2b2b31 28%,
    #2a0b45 52%,
    #17181c 76%,
    #0a0a0e 100%
  ) 1;
  box-shadow:
    0 18px 70px var(--shadow),
    inset 0 0 0 1px var(--bezel-hi),
    inset 0 0 0 2px var(--bezel-in);
  pointer-events:none;
  z-index:1;
}

/* allt innehåll ovanpå ramen */
.wa-app > *{position:relative; z-index:2}

/* PANELER (ingen tjock border här längre) */
.wa-player,.wa-pl{
  width:100%;
  border-radius:0;
  border:1px solid rgba(0,0,0,.98);
  background-image:
    linear-gradient(rgba(255,255,255,.08),rgba(0,0,0,.55)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, rgba(0,0,0,0) 1px 6px),
    linear-gradient(var(--wa-metal-a), var(--wa-metal-b) 35%, var(--wa-metal-c));
  box-shadow:0 18px 70px var(--shadow);
  position:relative;
  overflow:hidden;
  image-rendering:pixelated;
}

.wa-player{flex:0 0 auto}
.wa-pl{flex:1 1 auto; min-height:0}

.wa-app.pl-hidden #plPanel{display:none}
.wa-app.pl-hidden .wa-player{flex:1 1 auto}

/* inre lätt bevel på panelerna (inte en extra “ram” runt allt) */
.wa-player::before,.wa-pl::before{
  content:"";
  position:absolute;
  inset:1px;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.75);
}

.wa-face{
  display:grid;
  grid-template-columns:1fr;grid-template-rows:auto auto;
  gap:10px;
  min-width:0;
}

.wa-left{display:flex; align-items:center; justify-content:center; min-width:0}
.wa-mid{min-width:0; overflow:hidden; position:relative}

.wa-vis{
  width:100%;
  height:84px;
  border-radius:0;
  border:1px solid rgba(0,0,0,.95);
  background-image:
    linear-gradient(rgba(255,255,255,.06),rgba(0,0,0,.70)),
    var(--wa-dots),
    linear-gradient(#070809,#020203);
  background-size:100% 100%,4px 4px,100% 100%;
  background-repeat:no-repeat,repeat,no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  position:relative;
  overflow:hidden;
  image-rendering:pixelated;
}

.wa-cover{
  position:absolute;
  right:6px;
  top:4px;
  bottom:4px;
  width:72px;
  height:auto;
  padding:0;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(0,0,0,.45);
  border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);
  cursor:pointer;
  display:none;
  z-index:3;
}
.wa-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.wa-cover-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.88);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.wa-cover-modal.is-open{display:flex;}
.wa-cover-modal img{
  max-width:92vw;
  max-height:92vh;
  object-fit:contain;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}

.wa-toast{
  position:absolute;
  left:50%;
  top:calc(var(--safe-top) + var(--outerGap) + 2px);
  bottom:auto;
  transform:translate3d(-50%, -26px, 0);
  min-width:120px;
  max-width:min(92vw, 420px);
  padding:8px 12px;
  border:1px solid rgba(0,0,0,.95);
  background:
    linear-gradient(rgba(255,255,255,.12), rgba(0,0,0,.76)),
    linear-gradient(#0d0f14, #020205);
  color:rgba(233,238,247,.92);
  text-align:center;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.8px;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .18s ease;
  z-index:12;
}
.wa-toast.show{
  opacity:1;
  transform:translate3d(-50%, 0, 0);
}

.wa-unmute-prompt{
  position:absolute;
  left:50%;
  top:calc(var(--safe-top) + var(--outerGap) + 34px);
  transform:translateX(-50%);
  min-width:140px;
  max-width:min(92vw, 420px);
  height:30px;
  padding:0 14px;
  border:1px solid rgba(176,0,255,.65);
  border-radius:0;
  background:
    linear-gradient(rgba(255,255,255,.12), rgba(0,0,0,.72)),
    linear-gradient(#3c0b5c, #1a0a2d);
  color:#fff;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.6px;
  cursor:pointer;
  z-index:13;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.85),
    0 6px 16px rgba(0,0,0,.48);
}
.wa-unmute-prompt:active{
  transform:translate(-50%, 1px);
  filter:brightness(.95);
}
.wa-unmute-prompt:focus-visible{
  outline:1px solid rgba(233,238,247,.92);
  outline-offset:1px;
}

.wa-help-fab{
  width:26px;
  height:26px;
  padding:0;
  font-size:12px;
}
.wa-miniBtn.wa-help-fab{
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.wa-help-panel{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(0,0,0,.98);
  background-image:
    linear-gradient(rgba(255,255,255,.07),rgba(0,0,0,.74)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, rgba(0,0,0,0) 1px 7px),
    linear-gradient(#13161b,#07080b);
  transform:translate3d(104%,0,0);
  transition:transform .25s ease;
  pointer-events:none;
  z-index:30;
  overflow:hidden;
}
.wa-help-panel.is-open{
  transform:translate3d(0,0,0);
  pointer-events:auto;
}
.wa-help-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(#242830,#0f1116);
}
.wa-help-head h2{
  margin:0;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:1px;
  color:rgba(233,238,247,.92);
}
.wa-help-close{
  width:28px;
  height:24px;
  padding:0;
  font-size:14px;
  line-height:1;
}
.wa-miniBtn.wa-help-close{
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.wa-help-body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:12px;
  font-family:var(--mono);
  font-size:12px;
  color:rgba(233,238,247,.88);
  line-height:1.55;
}
.wa-help-body p{
  margin:0 0 8px;
  color:rgba(233,238,247,.72);
}
.wa-help-body ul{
  margin:0 0 12px;
  padding-left:18px;
}
.wa-help-body li{
  margin:0 0 6px;
}
.wa-help-body strong{
  color:#fff;
}

.wa-vis-title{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:2px;
  color:rgba(176,0,255,.92);
  text-shadow:0 0 8px rgba(176,0,255,.25);
  text-align:left;
  padding:10px 10px 0;
  white-space:nowrap;
  overflow:hidden;

  --marqGap:60px;
  --marqW:0px;
  --marqDur:12s;
}
.wa-vis-title.marq{ text-overflow:clip; }
.wa-vis-title .wa-marq-track{display:flex;gap:var(--marqGap);width:100%;max-width:100%;transform:translateX(0);will-change:transform}
.wa-vis-title .wa-marq-item{white-space:nowrap;display:inline-block}
.wa-vis-title.marq .wa-marq-track{
  width:max-content;
  max-width:none;
  padding-left:0;
  animation:waMarqLoop var(--marqDur,12s) linear infinite;
}
.wa-vis:hover .wa-vis-title.marq .wa-marq-track{animation-play-state:paused}

.wa-vis-title.marq.marqjs .wa-marq-track{animation:none!important}
.wa-title.marq.marqjs .wa-marq-track{animation:none!important}
@media (prefers-reduced-motion:reduce){ .wa-vis-title.marq .wa-marq-track{animation:none} .wa-title.marq .wa-marq-track{animation:none} }

.wa-vis-sub{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:2px;
  color:rgba(233,238,247,.62);
  text-align:center;
  padding:0 8px;
  opacity:.55;
  pointer-events:none;
}

/* vänster mini-levels */
.wa-levels-left{
  position:absolute;
  left:10px;
  bottom:6px;
  height:28px;
  width:176px;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:5px;
  opacity:.95;
}
.wa-levels-left span{height:100%}

/* titelrad + kbps/khz */
.wa-titleline{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  box-sizing:border-box;
  border:1px solid rgba(0,0,0,.95);
  background-image:
    linear-gradient(rgba(255,255,255,.06),rgba(0,0,0,.78)),
    var(--wa-dots);
  background-size:100% 100%,4px 4px;
  background-repeat:no-repeat,repeat;
  image-rendering:pixelated;
  padding:4px 6px;
}

.wa-title{
  flex:1 1 0%;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-family:var(--mono);
  font-size:12px;
  color:rgba(233,238,247,.90);
  --marqGap:40px;
  --marqW:0px;
  --marqDur:12s;
}
.wa-title .wa-marq-track{display:flex;gap:var(--marqGap);width:100%;max-width:100%;transform:translateX(0);will-change:transform}
.wa-title .wa-marq-item{white-space:nowrap;display:inline-block}
.wa-title.marq .wa-marq-track{
  width:max-content;
  max-width:none;
  padding-left:0;
  animation:waMarqLoop var(--marqDur,12s) linear infinite;
}
.wa-title.marq{ text-overflow:clip; }

.wa-khz{
  margin-left:auto;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  min-width:0;
  font-family:var(--mono);
  font-size:11px;
  color:rgba(233,238,247,.70);
}
.wa-khz .dot{opacity:.6}
.wa-khz #bitrate, .wa-khz #khz{
  display:inline-block;
  min-width:44px;
  text-align:right;
  padding:1px 4px;
  border:1px solid rgba(0,0,0,.95);
  background-image:
    linear-gradient(rgba(255,255,255,.05),rgba(0,0,0,.80)),
    var(--wa-dots);
  background-size:100% 100%,4px 4px;
  background-repeat:no-repeat,repeat;
  color:rgba(233,238,247,.88);
  image-rendering:pixelated;
}

/* meters */
.wa-meterrow{
  margin-top:10px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:center;
  min-width:0;
}
.wa-meterlabel{
  font-family:var(--mono);
  font-size:10px;
  color:rgba(255,255,255,.55);
  text-transform:uppercase;
  letter-spacing:1px;
}
.wa-meter{
  --p:.5;
  height:48px;
  border-radius:0;
  border:1px solid rgba(0,0,0,.95);
  background-image:
    linear-gradient(rgba(255,255,255,.12),rgba(0,0,0,.58)),
    var(--wa-dots);
  background-size:100% 100%,4px 4px;
  background-repeat:no-repeat,repeat;
  position:relative;
  overflow:hidden;
  cursor:ew-resize;
  touch-action:none;
  image-rendering:pixelated;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  min-width:0;
}
.wa-meter i{
  position:absolute; inset:0;
  width:calc(var(--p)*100%);
  background:linear-gradient(90deg, rgba(176,0,255,.62), rgba(90,0,160,.62));
  box-shadow:0 0 14px rgba(176,0,255,.28), inset 0 0 0 1px rgba(255,255,255,.10);
  opacity:1;
  filter:saturate(1.25) contrast(1.05);
}
.wa-meter i::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(255,255,255,.22), rgba(255,255,255,0) 55%);
  opacity:.55;
  pointer-events:none;
}

#volMeter{
  --blueStart:100%;
  --blueA:0;
  height:calc(15px * 1.2);
}

#volMeter i{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(40,40,40,.95) 0%,
    rgba(55,55,55,.92) 10%,
    rgba(35,0,60,.85) 70%,
    rgba(20,0,35,.92) 100%
  );
  box-shadow:0 0 14px rgba(176,0,255,.28), 0 0 14px rgba(0,190,255,.14), inset 0 0 0 1px rgba(255,255,255,.10);
}

#volMeter i::before{
  content:"";
  position:absolute;
  top:0;bottom:0;
  right:0;
  width:2px;
  background:rgba(255,255,255,.85);
  box-shadow:0 0 6px rgba(255,255,255,.35);
}



#volMeter{position:relative;overflow:hidden}
#volMeter::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.85) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.85) 0 1px, transparent 1px 4px);
}

.wa-stereo{
  margin-top:10px;
  display:flex;
  gap:8px;
  justify-content:center;
}
.wa-mini{
  font-family:var(--mono);
  font-size:10px;
  -webkit-appearance:none;
  appearance:none;
  background-color:transparent;
  cursor:pointer;
  user-select:none;
  color:rgba(255,255,255,.45);
  padding:2px 6px;
  border:1px solid rgba(0,0,0,.95);
  background-image:
    linear-gradient(rgba(255,255,255,.08),rgba(0,0,0,.75)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, rgba(0,0,0,0) 1px 6px),
    linear-gradient(#2b2e34,#0f1115);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.80);
  border-radius:0;
  image-rendering:pixelated;
}
.wa-mini.on{color:#fff}
.wa-mini.is-on{color:rgba(176,0,255,.92);text-shadow:0 0 10px rgba(176,0,255,.30);filter:none}

/* CONTROLS */
.wa-controls{
  display:grid;
  grid-template-columns:1fr repeat(8,30px) 1fr;
  grid-template-rows:auto auto;
  gap:6px;
  align-items:center;
  justify-items:center;
  padding:8px 10px 10px;
  min-height:52px;
  border-top:1px solid rgba(0,0,0,.98);
  background-image:
    linear-gradient(rgba(255,255,255,.07),rgba(0,0,0,.62)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, rgba(0,0,0,0) 1px 7px),
    linear-gradient(#1a1c21,#0c0d10);
  image-rendering:pixelated;
}

@media (min-width:721px){
  .wa-controls > .wa-cbtn{grid-row:1}
  #prevBtn{grid-column:2}
  #playBtn{grid-column:3}
  #stopBtn{grid-column:4}
  #nextBtn{grid-column:5}
  #shuffleBtn{grid-column:6}
  #repeatBtn{grid-column:7}
  #bassBtn{grid-column:8}
  #shareBtn{grid-column:9}
}

.wa-cbtn{
  width:30px;
  height:24px;
  border-radius:0;
  border:1px solid rgba(0,0,0,.95);
  padding:0;
  background-image:
    linear-gradient(rgba(255,255,255,.10),rgba(0,0,0,.78)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, rgba(0,0,0,0) 1px 6px),
    linear-gradient(#2b2e34,#0f1115);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.80);
  cursor:pointer;
  image-rendering:pixelated;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:13px;
  line-height:1;
  color:#fff;
  text-shadow:0 0 10px rgba(255,255,255,.10);
}
.wa-cbtn::before{content:none!important}
.wa-cbtn svg{
  width:12px;
  height:12px;
  display:block;
}
.wa-cbtn:active{transform:translateY(1px); filter:brightness(.92)}
.wa-cbtn.is-on{color:rgba(176,0,255,.92);text-shadow:0 0 10px rgba(176,0,255,.30);filter:none}
#playBtn{font-size:14px}
#shareBtn{font-size:14px}
.wa-cbtn:disabled{
  opacity:.45;
  cursor:not-allowed;
  filter:saturate(.4);
}

/* extra: tvinga lila om JS använder .is-on */
#shuffleBtn.is-on,#repeatBtn.is-on,#bassBtn.is-on,#btnPL.is-on,#shareBtn.is-on{
  color:rgba(176,0,255,.92)!important;
  text-shadow:0 0 10px rgba(176,0,255,.30)!important;
  filter:none!important;
}

/* SEEK */
.wa-seekwrap{
  grid-column:1 / -1;
  grid-row:2;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
  min-width:0;
  justify-self:center;
  width:min(90vw, 100%);
}
.wa-seek{
  width:100%;
  background:transparent;
  --p:0%;
  -webkit-appearance:none;
  appearance:none;
  accent-color:#fff;
}
.wa-seek::-webkit-slider-runnable-track{
  height:6px;
  border-radius:0;
  border:1px solid rgba(0,0,0,.95);
  background-image:
    linear-gradient(to right, #ffffff 0 var(--p), rgba(255,255,255,.18) var(--p) 100%),
    linear-gradient(rgba(255,255,255,.05),rgba(0,0,0,.82)),
    var(--wa-dots);
  background-size:100% 100%,100% 100%,4px 4px;
  background-repeat:no-repeat,no-repeat,repeat;
  image-rendering:pixelated;
}
.wa-seek::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;height:14px;
  border-radius:0;
  border:1px solid rgba(0,0,0,.95);
  background-image:
    linear-gradient(#ffffff,#cfd3db),
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, rgba(0,0,0,0) 1px 5px);
  margin-top:-5px;
  image-rendering:pixelated;
}
.wa-seek::-moz-range-track{height:6px;border-radius:0;border:1px solid rgba(0,0,0,.95);background:rgba(255,255,255,.18)}
.wa-seek::-moz-range-progress{height:6px; background:#fff;}
.wa-seek::-moz-range-thumb{width:14px;height:14px;border-radius:0;border:1px solid rgba(0,0,0,.95);background:linear-gradient(#ffffff,#cfd3db)}

.wa-seek-led{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-width:0;
  font-family:var(--mono);
  font-size:11px;
  color:rgba(255,255,255,.75);
}
.wa-seek-total{color:rgba(255,255,255,.5)}

.wa-cornerbtns{display:flex; gap:8px; align-items:center; justify-content:flex-end}
.wa-sbtn,.wa-miniBtn{
  font-family:var(--mono);
  font-size:11px;
  padding:6px 10px;
  border-radius:0;
  border:1px solid rgba(0,0,0,.95);
  background-image:
    linear-gradient(rgba(255,255,255,.08),rgba(0,0,0,.75)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, rgba(0,0,0,0) 1px 6px),
    linear-gradient(#2b2e34,#0f1115);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.80);
  color:#e9edf6;
  cursor:pointer;
  image-rendering:pixelated;
}
.wa-sbtn:active,.wa-miniBtn:active{transform:translateY(1px); filter:brightness(.92)}
.wa-sbtn.on{color:#fff}
.wa-sbtn.is-on{color:rgba(176,0,255,.92);text-shadow:0 0 10px rgba(176,0,255,.30);filter:none}

/* keyboard focus visibility for interactive controls */
.wa-mini:focus-visible,
.wa-cbtn:focus-visible,
.wa-sbtn:focus-visible,
.wa-miniBtn:focus-visible,
.wa-search:focus-visible,
.wa-seek:focus-visible,
select.wa-miniSel:focus-visible{
  outline:1px solid rgba(233,238,247,.88);
  outline-offset:1px;
  box-shadow:0 0 0 2px rgba(176,0,255,.28);
}

/* PLAYLIST */
.wa-pl{display:flex; flex-direction:column}

.wa-pl-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(#23262d,#101115);
}
.wa-pl-title{font-family:var(--mono);letter-spacing:1px;font-size:12px;color:rgba(233,238,247,.9)}
.wa-pl-count{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.55)}

.wa-pl-list{
  padding:8px 6px;
  overflow-y:auto;
  overflow-x:hidden;
  flex:1 1 auto;
  min-height:0;
  background:linear-gradient(#05060a,#000);
  scrollbar-color:#2b2f38 #0c0d10;
}
.wa-pl-list::-webkit-scrollbar{width:10px}
.wa-pl-list::-webkit-scrollbar-track{background:linear-gradient(#0c0d10,#07080b)}
.wa-pl-list::-webkit-scrollbar-thumb{background:linear-gradient(#2b2f38,#14161a);border:1px solid rgba(0,0,0,.9);border-radius:0}
.wa-pl-list::-webkit-scrollbar-thumb:hover{background:linear-gradient(#3a3f48,#1a1c21)}

.wa-row{
  display:flex;
  gap:6px;
  align-items:center;
  padding:6px 6px;
  border-radius:0;
  font-family:var(--mono);
  font-size:12px;
  color:rgba(233,238,247,.86);
  cursor:pointer;
  background:rgba(0,0,0,.55);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.wa-row>*{min-width:0}
.wa-row:nth-child(even){background:rgba(0,0,0,.45)}
.wa-row:hover{background:rgba(255,255,255,.05)}
.wa-row.sel{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(176,0,255,.28)}
.wa-row.sel .wa-name{color:#fff}
.wa-row.sel .wa-idx,.wa-row.sel .wa-dur{color:rgba(233,238,247,.70)}

.wa-idx{color:rgba(255,255,255,.45); text-align:right; flex:0 0 34px}
.wa-upload{
  width:100%;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  text-align:center;
  color:rgba(233,238,247,.9);
}
.wa-upload-title{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:1px;
}
.wa-upload-sub{font-size:11px; color:rgba(233,238,247,.6)}
.wa-upload-drop{
  width:100%;
  max-width:420px;
  padding:18px;
  border:1px dashed rgba(255,255,255,.18);
  background:rgba(0,0,0,.35);
  cursor:pointer;
}
.wa-upload-drop.is-over{
  border-color:rgba(176,0,255,.6);
  box-shadow:0 0 0 1px rgba(176,0,255,.35);
}
.wa-upload-progress{
  width:100%;
  max-width:420px;
  height:18px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.5);
}
.wa-upload-bar{
  height:100%;
  background:linear-gradient(90deg,#4b3cff,#b000ff);
  text-align:center;
  font-size:11px;
  line-height:18px;
  color:#fff;
  transition:width .1s linear;
}
.wa-upload-speed{font-size:11px; color:rgba(233,238,247,.7)}
.wa-upload-list{
  width:100%;
  max-width:520px;
  font-family:var(--mono);
  font-size:11px;
  color:rgba(233,238,247,.75);
  text-align:left;
  line-height:1.4;
}
.wa-upload-item{
  padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  word-break:break-all;
}
.wa-name{min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; flex:1 1 0%}
.wa-dur{color:rgba(255,255,255,.45); text-align:right; flex:0 0 auto; margin-left:auto}
.wa-dur:empty{display:none}

/* FOOTER */
.wa-pl-foot{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 12px;
  border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(#101115,#07080b);
}
.wa-pl-status{display:none!important}

.wa-search{
  width:clamp(140px, 28vw, 260px);
  height:26px;
  padding:0 10px;
  font-family:var(--mono);
  font-size:11px;
  color:#e9edf6;
  border:1px solid rgba(0,0,0,.95);
  border-radius:0;
  outline:none;
  line-height:24px;
  background-color:#0f1115;
  background-image:
    linear-gradient(rgba(255,255,255,.08),rgba(0,0,0,.75)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, rgba(0,0,0,0) 1px 6px),
    linear-gradient(#2b2e34,#0f1115);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.80);
  cursor:text;
  -webkit-appearance:none;
  appearance:none;
  image-rendering:pixelated;
}

.wa-search::placeholder{color:rgba(255,255,255,.92)}
.wa-search::-webkit-search-decoration,
.wa-search::-webkit-search-cancel-button,
.wa-search::-webkit-search-results-button,
.wa-search::-webkit-search-results-decoration{display:none}
.wa-search::-moz-search-clear{display:none}
.wa-search:focus:not(:focus-visible){box-shadow:0 0 0 2px rgba(255,255,255,.12)}

.wa-pl-foot-actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  min-width:0;
}

select.wa-miniBtn{height:26px;line-height:24px;padding:0 30px 0 10px}
select.wa-miniSel{
  -webkit-appearance:none;
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(233,238,247,.92) 50%),
    linear-gradient(135deg, rgba(233,238,247,.92) 50%, transparent 50%),
    linear-gradient(rgba(255,255,255,.08),rgba(0,0,0,.75)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, rgba(0,0,0,0) 1px 6px),
    linear-gradient(#2b2e34,#0f1115);
  background-position:right 11px center,right 6px center,0 0,0 0,0 0;
  background-size:6px 6px,6px 6px,100% 100%,100% 100%,100% 100%;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  color:#fff;
}
select.wa-miniSel:focus:not(:focus-visible){box-shadow:0 0 0 2px rgba(255,255,255,.12)}
select.wa-miniSel option{background:#000; color:#fff}

/* CRAMPED: meter rows collapse one step earlier than full mobile layout */
@media (max-width:721px){
  .wa-meterrow{grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:8px 10px}
}

/* MOBILE */
@media (max-width:720px){
  :root{
    --outerGap:1px;
    --bezelW:6px;
  }
  #volMeter{height:20px}
  .wa-left{justify-content:flex-start;}
  .wa-vis{width:100%;height:84px;}

  .wa-meterrow{width:100%;max-width:100%;padding:0 6px;overflow:hidden}
  .wa-meter{max-width:100%;height:90px}

  .wa-controls{
    grid-template-columns:repeat(8,minmax(0,1fr));
    grid-template-rows:auto auto;
    gap:3px;
    padding:6px 6px 8px;
  }
  .wa-cbtn{
    width:100%;
    min-width:0;
    height:26px;
    font-size:12px;
  }
  #playBtn,#shareBtn{font-size:13px}

  .wa-seekwrap{grid-column:1 / -1;grid-row:2;width:100%;margin-top:8px}

  .wa-pl-head{padding:8px 8px}
  .wa-pl-foot{padding:6px 6px; gap:6px}
  .wa-pl-foot-actions{gap:6px; max-width:100%;}
  .wa-search{width:clamp(90px, 24vw, 120px); min-width:84px}
  .wa-miniBtn{padding:6px 8px}
  select.wa-miniBtn{padding:0 26px 0 8px}
  select.wa-miniSel{max-width:110px}

  /* kbps/khz flyttas hit av JS */
  .wa-stereo{justify-content:flex-start; align-items:center}
  .wa-khz.moved{margin-left:auto}

  .wa-pl-list{max-height:calc(100dvh - 300px)}

  .wa-help-fab{width:24px; height:24px; font-size:11px}

  .wa-help-body{
    padding:10px;
    font-size:11px;
    line-height:1.5;
  }
}


/* EQ i visualization-rutan */
.wa-vis .wa-eq[width][height] ~ .wa-vis-title,
.wa-vis .wa-eq[width][height] ~ .wa-levels-left{display:none!important}
.wa-eq{position:absolute; inset:0; width:100%; height:100%; display:block; image-rendering:pixelated}


@keyframes waMarqLoop{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-1 * (var(--marqW) + var(--marqGap))),0,0)}
}

/* disable scroll i playlisten (fallback-selectors) */
.playlist,.playlist-list,.playlistList,#playlist,#playlistList,#tracklist,ul#playlist,ul.playlist,div#playlist{overflow-y:hidden!important;overflow-x:hidden!important;overscroll-behavior:none!important;scrollbar-width:none!important;}
.playlist::-webkit-scrollbar,.playlist-list::-webkit-scrollbar,.playlistList::-webkit-scrollbar,#playlist::-webkit-scrollbar,#playlistList::-webkit-scrollbar,#tracklist::-webkit-scrollbar,ul#playlist::-webkit-scrollbar,ul.playlist::-webkit-scrollbar,div#playlist::-webkit-scrollbar{display:none!important;}


/* fallback-skin för standard-knappar/inputs (om klasser saknas) */
button:not([class]),
input[type=button]:not([class]),
input[type=submit]:not([class]),
input[type=reset]:not([class]),
select:not([class]){
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(#1b1d23,#0b0c10);
  color:rgba(233,238,247,.90);
  padding:6px 10px;
  border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.65), 0 6px 16px rgba(0,0,0,.30);
  font-family:var(--mono);
  font-size:11px;
}
button:not([class]):active,
input[type=button]:not([class]):active,
input[type=submit]:not([class]):active,
input[type=reset]:not([class]):active{transform:translateY(1px)}
input[type=text]:not([class]),
input[type=search]:not([class]){
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(#0b0c10,#05060a);
  color:rgba(233,238,247,.85);
  padding:6px 10px;
  border-radius:4px;
  font-family:var(--mono);
  font-size:11px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.75), inset 0 0 18px rgba(0,0,0,.45);
}
select:not([class]){padding-right:26px;background-image:linear-gradient(45deg,transparent 50%,rgba(233,238,247,.7) 50%),linear-gradient(135deg,rgba(233,238,247,.7) 50%,transparent 50%),linear-gradient(#1b1d23,#0b0c10);background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%,0 0;background-size:5px 5px,5px 5px,100% 100%;background-repeat:no-repeat;}