:root{
  --bg:#0a0a0f;
  --panel:#111319;
  --panel-2:#161a22;
  --border:#2a2f3a;
  --amber:#f5a623;
  --amber-dim:#7a5716;
  --green:#3ef26a;
  --green-dim:#155c2c;
  --green-glow: 0 0 6px rgba(62,242,106,.55);
  --text-dim:#7d8494;
  --steel:#454b58;
  --steel-lt:#5c6472;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  font-family: 'Courier New', ui-monospace, monospace;
  color:var(--green);
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
#app{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg,#0e0f14,#08090c);
  border-left:1px solid var(--border);
  border-right:1px solid var(--border);
}

/* ---------- Tab bar ---------- */
.tabbar{
  display:flex;
  align-items:center;
  background:var(--panel);
  border-bottom:2px solid var(--amber-dim);
  padding:6px 8px;
  gap:6px;
}
.tab{
  background:var(--panel-2);
  color:var(--text-dim);
  border:1px solid var(--border);
  border-radius:3px;
  padding:5px 10px;
  font-family:inherit;
  font-size:11px;
  letter-spacing:1px;
  cursor:pointer;
}
.tab.active{ color:var(--amber); border-color:var(--amber-dim); box-shadow: inset 0 0 6px rgba(245,166,35,.15); }
.brand{
  margin-left:auto;
  color:var(--amber);
  font-size:11px;
  letter-spacing:2px;
  text-shadow:0 0 6px rgba(245,166,35,.5);
}

/* ---------- Views ---------- */
.view{ display:none; flex:1; flex-direction:column; }
.view.active{ display:flex; }

/* ---------- Sections (player) ---------- */
.sections{ display:flex; flex-direction:column; gap:6px; padding:6px; }
.sec{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden;
}
.sec.drag-over{ outline:1px dashed var(--amber); }
.sec-head{
  background:var(--panel-2);
  color:var(--amber);
  font-size:10px;
  letter-spacing:1.5px;
  padding:5px 8px;
  border-bottom:1px solid var(--border);
  cursor:grab;
  user-select:none;
  display:flex;
  align-items:center;
  gap:6px;
}
.sec-head:active{ cursor:grabbing; }
.grip{ color:var(--steel-lt); }
.sec-body{ padding:8px; }

/* ---------- Viewer ---------- */
.viewer-16x9{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border:1px solid var(--border);
  overflow:hidden;
}
#yt-holder, #yt-holder iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
#viz-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.viz-empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--steel-lt); font-size:12px; letter-spacing:2px;
}
.viz-empty.hidden{ display:none; }

/* ---------- Metadata ---------- */
.lcd-title{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  color:var(--green);
  text-shadow:var(--green-glow);
  font-size:13px;
  letter-spacing:.5px;
}

/* ---------- TechData ---------- */
.techdata-row{ display:flex; gap:10px; align-items:center; }
.tech-chip{
  background:#000; border:1px solid var(--border); border-radius:3px;
  padding:4px 8px; display:flex; align-items:baseline; gap:4px;
  color:var(--green); text-shadow:var(--green-glow); font-size:12px;
}
.tech-chip small{ color:var(--text-dim); font-size:9px; }
.ch-flags{ margin-left:auto; gap:10px; }
.ch-off{ color:var(--steel-lt); text-shadow:none; }
.ch-on{ color:var(--green); text-shadow:var(--green-glow); }

/* ---------- Sliders (generic) ---------- */
input[type=range]{ -webkit-appearance:none; appearance:none; background:transparent; }
.slider{ width:100%; height:18px; }
.slider::-webkit-slider-runnable-track{ height:4px; background:var(--steel); border-radius:2px; }
.slider::-moz-range-track{ height:4px; background:var(--steel); border-radius:2px; }
.slider::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; margin-top:-5px; border-radius:2px;
  background:var(--amber); border:1px solid #7a5716; box-shadow:0 0 4px rgba(245,166,35,.6);
}
.slider.green::-webkit-slider-thumb{ background:var(--green); border-color:var(--green-dim); box-shadow:0 0 4px rgba(62,242,106,.6); }
.slider.amber::-webkit-slider-thumb{ background:var(--amber); }
.slider.wide{ flex:1; }

/* ---------- Volume ---------- */
.volume-row{ display:flex; align-items:center; gap:8px; }
.slider-label{ font-size:9px; color:var(--text-dim); letter-spacing:1px; width:26px; }

/* ---------- Progress ---------- */
.progress-row{ display:flex; align-items:center; gap:8px; }
.lcd-time{ color:var(--green); text-shadow:var(--green-glow); font-size:11px; min-width:40px; }

/* ---------- Control ---------- */
.control-row{ display:flex; justify-content:center; gap:10px; }
.ctrl-btn{
  background:linear-gradient(180deg,var(--steel-lt),var(--steel));
  border:1px solid #2c313b; color:#0a0a0f; font-weight:bold;
  border-radius:3px; padding:8px 14px; font-family:inherit; font-size:12px; cursor:pointer;
}
.ctrl-btn.big{ padding:8px 22px; font-size:15px; }
.ctrl-btn:active{ filter:brightness(.85); }

/* ---------- Mode ---------- */
.mode-row{ display:flex; gap:10px; }
.mode-btn{
  flex:1; background:var(--panel-2); border:1px solid var(--border); color:var(--text-dim);
  padding:7px; border-radius:3px; font-family:inherit; font-size:10px; letter-spacing:1px; cursor:pointer;
}
.mode-btn.on{ color:var(--amber); border-color:var(--amber-dim); box-shadow:inset 0 0 6px rgba(245,166,35,.2); }

/* ---------- Equalizer ---------- */
.eq-row{ display:flex; justify-content:space-between; gap:4px; }
.eq-band{ display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; }
.eq-band label{ font-size:8px; color:var(--text-dim); letter-spacing:1px; }
.eq-top,.eq-bot{ font-size:7px; color:var(--steel-lt); }
.eq-slider{
  writing-mode:vertical-lr; direction:rtl;
  width:16px; height:100px;
}
.eq-slider::-webkit-slider-runnable-track{ width:4px; background:var(--steel); border-radius:2px; }
.eq-slider::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:8px; border-radius:2px;
  background:var(--amber); border:1px solid #7a5716; box-shadow:0 0 4px rgba(245,166,35,.6);
}
.eq-slider.amp::-webkit-slider-thumb{ background:var(--green); border-color:var(--green-dim); }

/* ---------- Playlist page ---------- */
.playlist-header{
  display:flex; justify-content:space-between; padding:8px 10px;
  background:var(--panel-2); color:var(--amber); font-size:11px; letter-spacing:1px;
  border-bottom:1px solid var(--border);
}
.playlist-list{
  list-style:none; margin:0; padding:0; flex:1; overflow-y:auto; background:#000;
}
.pl-item{
  display:flex; align-items:center; gap:8px; padding:6px 8px;
  border-bottom:1px solid #14151a; cursor:pointer;
}
.pl-item.playing{ background:rgba(62,242,106,.08); }
.pl-item.selected{ outline:1px solid var(--amber-dim); }
.pl-thumb{ width:44px; height:44px; object-fit:cover; border-radius:3px; background:#1a1c22; flex-shrink:0; }
.pl-meta{ min-width:0; flex:1; }
.pl-title{ color:var(--green); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-item.playing .pl-title{ text-shadow:var(--green-glow); }
.pl-sub{ display:flex; gap:8px; color:var(--text-dim); font-size:10px; }
.pl-fav{ color:var(--amber); }
.pl-len{ color:var(--text-dim); font-size:10px; flex-shrink:0; }
.pl-flags{ display:flex; gap:4px; flex-shrink:0; font-size:11px; }

.playlist-controls{
  display:flex; gap:6px; padding:8px; background:var(--panel); border-top:1px solid var(--border);
}
.pl-btn{
  flex:1; background:var(--panel-2); border:1px solid var(--border); color:var(--amber);
  padding:9px; border-radius:3px; font-family:inherit; font-size:11px; letter-spacing:1px; cursor:pointer;
}
.pl-btn:active{ filter:brightness(.8); }

::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:#000; }
::-webkit-scrollbar-thumb{ background:var(--amber-dim); border-radius:4px; }