:root{
  --bg:#0b0e14; --card:#141926; --line:#232c42; --txt:#e8ecf4; --dim:#8b94a9;
  --acc:#e8a33d; --acc2:#7fd4ff;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
body{margin:0; background:var(--bg); color:var(--txt);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:15px;}
header{display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--bg); z-index:10;}
.brand{font-weight:700; font-size:17px;}
.brand span{color:var(--acc);}
.ver{font-size:11px; color:var(--dim); background:var(--card);
  padding:4px 10px; border-radius:20px; border:1px solid var(--line);}
main{padding:12px; max-width:640px; margin:0 auto;
  display:flex; flex-direction:column;}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:14px; margin-bottom:12px;}
.card.dim{opacity:.75;}
.card h2{margin:0 0 6px; font-size:15px;}
.hint{margin:0 0 10px; color:var(--dim); font-size:13px; line-height:1.45;}
.info{margin-top:10px; font-size:13px; color:var(--acc2); min-height:18px; line-height:1.5;}
.rowlabel{display:block; margin:10px 0 4px; font-size:13px; color:var(--dim);}
.rowlabel b{color:var(--txt);}
input[type=range]{width:100%; margin:6px 0 10px; accent-color:var(--acc); height:28px;}
.filebtn{display:inline-block; background:var(--acc); color:#1a1206; font-weight:700;
  padding:11px 18px; border-radius:10px; cursor:pointer; font-size:14px;}
.btnrow{display:flex; gap:10px; margin:8px 0;}
button{background:#223052; color:var(--txt); border:1px solid var(--line);
  padding:11px 14px; border-radius:10px; font-size:14px; cursor:pointer; flex:1;}
button:disabled{opacity:.4;}
button.on{background:var(--acc); color:#1a1206; border-color:var(--acc); font-weight:700;}
#preview{width:100%; border-radius:10px; background:#000; display:block; cursor:pointer;}
#playerWrap{position:sticky; top:6px; z-index:30; background:var(--card);
  border:1px solid var(--line); border-radius:14px; padding:8px; margin:0 0 10px;}
#transport{display:flex; align-items:center; gap:8px; margin-top:8px;}
#transport button{flex:0 0 auto; padding:9px 14px;}
#loopBar{flex:1; min-width:0;}
#loopTime{font-size:12px; color:var(--dim); min-width:88px; text-align:right;}
#modetoggle{display:flex; gap:8px; margin-top:8px;}
.mbtn{flex:1; padding:8px 6px; font-size:13px; background:#1a2133;}
.mbtn.on{background:var(--acc); color:#1a1206; border-color:var(--acc); font-weight:700;}
.mbtn:disabled{opacity:.35;}
.fgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:6px;}
.fbtn{background:#1a2133; border:2px solid var(--line); border-radius:10px;
  padding:10px 4px; font-size:12px; color:var(--txt); cursor:pointer;}
.fbtn.on{border-color:var(--acc); background:var(--acc); color:#1a1206; font-weight:700;}
.fbtn.on small{color:#1a1206;}
.fbtn small{display:block; color:var(--dim); font-size:10px; margin-top:2px;}
.txt{display:block; width:100%; background:#0b0e14; color:var(--txt);
  border:1px solid var(--line); border-radius:10px; padding:11px 12px;
  font-size:14px; margin:4px 0 6px;}
select.txt{appearance:auto;}
.chk{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--dim);
  margin:8px 0;}
.chk input{width:18px; height:18px; accent-color:var(--acc);}
.dlbtn{display:inline-block; background:var(--acc); color:#1a1206; font-weight:700;
  padding:12px 20px; border-radius:10px; text-decoration:none; margin-top:8px;}
.trackcard{background:#1a2133; border:1px solid var(--line); border-radius:12px;
  padding:12px; margin-bottom:12px;}
.tchead{display:flex; justify-content:space-between; align-items:center;
  margin-bottom:8px;}
.tstat{font-size:12px; color:var(--dim);}
.tinfo{min-height:20px;}
.trackcard .btnrow{display:flex; gap:8px; margin-top:8px;}
.trackcard .trender{flex:1;}
.trackcard .tremove{background:#3a1f1f;}

/* ===== Panel kolom (landscape: scroll independen) =====
   Portrait: kedua panel display:contents → daun-daunnya jadi flex item
   langsung dari main; urutan visual dikembalikan pakai flex order,
   hasilnya 100% sama seperti sebelum ada wrapper.
   (Kompensasi flex: margin vertikal tidak collapse, jadi margin-top
   #playerWrap dinolkan agar jarak antar-elemen tetap sama.) */
.pane-left,.pane-right{display:contents;}
.sec-foot{order:1;} #playerWrap{order:2;} .sec-loop{order:3;}
.sec-filter{order:4;} .sec-overlay{order:5;} .sec-track{order:6;} .sec-queue{order:7;} .sec-soon{order:8;}

/* ===== LANDSCAPE (HP diputar, lebar ≥640px) =====
   App-shell: tinggi dikunci setinggi layar, body TIDAK scroll —
   tiap kolom punya scroll SENDIRI-SENDIRI (independen): scroll kolom
   kanan ke bawah tidak menggerakkan preview di kolom kiri, dan
   sebaliknya. Preview natural 16:9, tanpa sticky, tanpa satuan
   viewport dinamis (bebas jitter resize saat address bar gerak). */
@media (orientation: landscape) and (min-width: 640px){
  html,body{height:100%;}
  body{display:flex; flex-direction:column; overflow:hidden; overflow-x:clip;}
  header{flex:0 0 auto;}
  main{flex:1; min-height:0; width:100%; max-width:1180px;
    display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr); column-gap:12px;}
  .pane-left,.pane-right{display:block; overflow-y:auto; min-height:0;
    scrollbar-width:thin;}
  .pane-left{grid-column:1;}
  .pane-right{grid-column:2;}
  #playerWrap{position:static;}
  #modeHint{display:none;}
  .fgrid{grid-template-columns:repeat(4,1fr);}
  .fbtn{font-size:11px; padding:9px 3px;}
}