/* ===== track picker (real-pixel dock; never scaled with the stage) ===== */
:root{--panel:#0c1118;--panel2:#141b26;--line:#222d3b;--ok:#2be28a;--warn:#ffb31a}
.pk{position:fixed;z-index:50;top:0;bottom:0;right:env(safe-area-inset-right);width:400px;display:none;flex-direction:column;background:linear-gradient(180deg,#0e141c,#090d13);border-left:1px solid var(--line);box-shadow:-12px 0 40px rgba(0,0,0,.55);padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);color:var(--ink);font-family:var(--ui);touch-action:manipulation;user-select:none}
.pk.show{display:flex}
.pk[data-mode=full]{inset:0;right:0;width:100%;border:0;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.pk-head{display:flex;align-items:center;gap:8px;padding:10px 12px 6px}
.pk-head .sp{flex:1}
.pk-title{font:800 20px var(--ui);letter-spacing:.04em}
.pk-ib{min-width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font:700 18px var(--ui);cursor:pointer;display:grid;place-items:center;padding:0 10px}
.pk-ib.sm{min-width:44px;height:44px}.pk-ib.on{background:var(--cA);color:#001a22;border-color:transparent}
.pk-ib:active,.pk-load:active,.pk-chip:active{transform:scale(.96)}
.pk-tabs{display:flex;gap:4px;padding:0 10px;overflow-x:auto;scrollbar-width:none;touch-action:pan-x;flex:none}
.pk-tabs::-webkit-scrollbar{display:none}
.pk-tab{flex:none;height:44px;padding:0 14px;border:0;border-bottom:3px solid transparent;background:none;color:var(--dim);font:700 15px var(--ui);cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap}
.pk-tab i{font:700 11px var(--mono);font-style:normal;background:#222d3b;color:#bcd;border-radius:9px;padding:2px 6px}
.pk-tab.on{color:#fff;border-bottom-color:var(--cA)}
.pk-ref{display:flex;align-items:center;gap:8px;margin:6px 12px 2px;padding:7px 10px;border-radius:10px;background:#101822;border:1px solid var(--line);font:600 12px var(--ui);min-height:36px;flex:none;overflow:hidden;white-space:nowrap}
.pk-refl{color:var(--cA);font-weight:800;letter-spacing:.06em;flex:none}.pk-reft{color:var(--dim);overflow:hidden;text-overflow:ellipsis;flex:1}
.pk-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:6px 0 0}
.pk-tools{padding:4px 12px;display:flex;flex-direction:column;gap:8px;flex:none}
.pk-row1{display:flex;gap:8px;padding:2px 12px}.pk-tools .pk-row1{padding:0}
.pk-row2{display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none;touch-action:pan-x}.pk-row2::-webkit-scrollbar{display:none}
.pk-q{flex:1;min-width:0;height:48px;border-radius:12px;border:1px solid var(--line);background:#0a0f16;color:var(--ink);font:500 17px var(--ui);padding:0 14px;user-select:text;-webkit-user-select:text;outline:none}
.pk-q:focus{border-color:var(--cA);box-shadow:0 0 0 3px color-mix(in srgb,var(--cA) 25%,transparent)}
.pk-sel{height:44px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font:600 14px var(--ui);padding:0 10px;flex:none}
.pk-seg{display:flex;border:1px solid var(--line);border-radius:12px;overflow:hidden;flex:none}.pk-seg.wide{margin:4px 12px;flex:none}.pk-seg.wide button{flex:1}
.pk-seg button{min-width:48px;height:46px;border:0;background:var(--panel2);color:var(--dim);font:700 18px var(--ui);cursor:pointer}
.pk-seg button.on{background:var(--cA);color:#001a22}
.pk-chips{display:flex;gap:6px;flex:none;padding:0}.pk-src,.pk-genre{padding:2px 12px;overflow-x:auto;scrollbar-width:none;touch-action:pan-x}
.pk-chip{flex:none;height:44px;padding:0 14px;border-radius:22px;border:1px solid var(--line);background:var(--panel2);color:#cfd8e6;font:600 14px var(--ui);cursor:pointer;display:inline-flex;align-items:center;white-space:nowrap}
.pk-chip.on{background:color-mix(in srgb,var(--cA) 22%,#0b1118);border-color:var(--cA);color:#fff}
.pk-chip.fr{margin:2px 12px;align-self:flex-start}
.pk-note,.pk-notes .pk-note{font:500 12px var(--ui);color:var(--dim);padding:2px 12px;line-height:1.5}.pk-warn{margin:4px 12px;padding:10px 12px;border-radius:10px;background:#2a2008;border:1px solid #5a4410;color:#ffd77a;font:500 13px/1.5 var(--ui)}
.pk-count{font:700 11px var(--mono);color:var(--dim2);padding:2px 14px;flex:none;letter-spacing:.04em}
.pk-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;position:relative;touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#2a3646 transparent}
.pk-spacer{position:relative;width:100%}
.pk-drop{margin:4px 12px;padding:10px;border:1.5px dashed #2b3a4d;border-radius:12px;color:var(--dim);font:500 12px var(--ui);text-align:center;cursor:pointer;flex:none}.pk-drop.over{border-color:var(--cA);color:#fff}
.pk-empty{padding:30px 22px;text-align:center;color:var(--dim);font:500 15px/1.6 var(--ui)}.pk-empty b{color:#fff;font-size:17px}.pk-empty.warn{color:#ff9a9a}.pk-empty p{margin:6px 0 14px}
/* rows */
.pk-item{position:absolute;display:grid;grid-template-columns:72px 1fr auto;grid-template-rows:1fr;gap:4px 12px;align-items:center;padding:6px 8px;border-radius:14px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
.pk-item.playing{border-color:var(--cA);background:linear-gradient(90deg,color-mix(in srgb,var(--cA) 14%,#141b26),#141b26 60%)}
.pk-item.narrow{grid-template-columns:60px 1fr auto;grid-template-rows:auto auto;align-items:start}
.pk-item.narrow .pk-acts{grid-column:1/4;grid-row:2;width:100%}
.pk-item:not(.narrow):not(.grid){grid-template-columns:68px 1fr auto auto}
.pk-cv{width:100%;aspect-ratio:1;border-radius:10px;background:#222 center/cover;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);touch-action:none;cursor:grab}
.pk-item.narrow .pk-cv{width:60px;height:60px}
.pk-info{min-width:0;display:flex;flex-direction:column;gap:2px}
.pk-t1{font:700 16px/1.25 var(--ui);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-t2{font:500 13px var(--ui);color:#a9b4c6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-t3{font:500 11px var(--mono);color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-badges{display:flex;gap:6px;align-items:center;flex:none}
.pk-item.narrow .pk-badges{grid-column:3;grid-row:1;flex-direction:column;align-items:flex-end;gap:4px}
.bd{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:52px;height:30px;padding:0 8px;border-radius:8px;font:800 14px var(--mono);line-height:1;border:1.5px solid transparent;white-space:nowrap}
.bd small{font:600 9px var(--mono);margin-top:1px;opacity:.9}
.bd.bpm{background:#1b2431;color:#cfd8e6}.bd.bpm.ok{background:#3a2d0a;color:var(--warn);border-color:#6b5110}.bd.bpm.good{background:#0c3a25;color:var(--ok);border-color:#1a7a4c;box-shadow:0 0 10px rgba(43,226,138,.25)}
.bd.bpm:has(small){height:34px}
.bd.key{background:var(--kc,#445);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.45)}.bd.key.none,.bd.bpm.none{background:#1b2431;color:var(--dim2);text-shadow:none}
.bd.key.hm{border-color:#fff;box-shadow:0 0 0 2px rgba(43,226,138,.8),0 0 12px rgba(43,226,138,.5)}
.pk-ref .bd{height:24px;font-size:12px;min-width:40px}
.pk-acts{display:flex;gap:6px;align-items:center;flex:none}
.pk-item.narrow .pk-acts .pk-load{flex:1}
.pk-load{height:46px;min-width:86px;padding:0 12px;border-radius:12px;border:0;font:800 14px var(--ui);cursor:pointer;color:#001a22;background:linear-gradient(180deg,#38e0ff,#12a8cc);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 8px rgba(0,0,0,.4);white-space:nowrap}
.pk-load.d1{background:linear-gradient(180deg,#ffa447,#e06e0c);color:#241000}.pk-load.d2{background:linear-gradient(180deg,#5bf5a0,#1fb86a);color:#00200f}.pk-load.d3{background:linear-gradient(180deg,#d492ff,#9a3fe6);color:#1a0030}
.pk-load.big{height:52px;padding:0 24px;font-size:16px}
/* grid cards */
.pk-item.grid{display:flex;flex-direction:column;align-items:stretch;padding:8px;gap:6px}
.pk-item.grid .pk-cv{width:100%;height:auto;aspect-ratio:1;flex:none}
.pk-item.grid .pk-badges{position:absolute;left:14px;top:14px;flex-direction:column;align-items:flex-start;gap:4px}
.pk-item.grid .pk-badges .bd{box-shadow:0 2px 6px rgba(0,0,0,.6)}
.pk-item.grid .pk-info{flex:1}.pk-item.grid .pk-t1{font-size:15px}
.pk-item.grid .pk-acts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pk-item.grid .pk-acts .pk-load{min-width:0;height:44px;padding:0 4px;font-size:13px}
.pk-item.grid .pk-acts .pk-ib{display:none}
.pk-item.grid .pk-cv::after{content:"";position:absolute;inset:0}
/* now playing */
.pk-now{position:absolute;left:4px;bottom:4px;display:flex;gap:3px;align-items:flex-end;background:rgba(0,0,0,.72);border-radius:7px;padding:3px 5px}
.pk-now b{font:800 11px var(--mono);color:var(--cA)}
.eq{display:flex;gap:2px;align-items:flex-end;height:12px}.eq i{width:3px;height:6px;background:var(--cA);border-radius:1px}
.eq.pl i{animation:eqb .7s ease-in-out infinite alternate}.eq.pl i:nth-child(2){animation-delay:-.3s}.eq.pl i:nth-child(3){animation-delay:-.55s}
@keyframes eqb{from{height:3px}to{height:12px}}
@media (prefers-reduced-motion:reduce){.eq.pl i{animation:none}}
/* online */
.pk-res{flex:1;min-height:0;display:flex;flex-direction:column}
.pk-sub{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}.pk-subbody{display:flex;flex-direction:column}
.pk-albums{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:8px 12px;align-content:start;touch-action:pan-y}
.pk-album{display:flex;flex-direction:column;gap:3px;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:8px;cursor:pointer;color:inherit}
.pk-album .pk-cv{aspect-ratio:1;touch-action:auto}.pk-album .bd{align-self:flex-start;height:22px;font-size:10px;min-width:0;margin-top:2px}
.pk-pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px;font:600 12px var(--mono);color:var(--dim);flex:none}
.pk-album-row,.pk-album.pk-row1{align-items:center}
/* queue tab reuse */
.pk .q-wrap{flex:1;min-height:0;display:flex;gap:8px;padding:6px 8px;overflow:auto}
.pk[data-narrow="1"] .q-wrap{flex-direction:column}
.pk[data-narrow="1"] .q-wrap[data-qv=queue]>.q-col:nth-child(1),.pk[data-narrow="1"] .q-wrap[data-qv=queue]>.q-col:nth-child(2){display:none}
.pk[data-narrow="1"] .q-wrap[data-qv=lists]>.q-col:nth-child(3){display:none}
.pk[data-narrow="1"] .q-wrap>.q-col{flex:1 1 0!important;min-height:0}
.pk[data-narrow="0"] .pk-seg.wide{display:none}
.pk .q-col{background:var(--panel2);border:1px solid var(--line);border-radius:12px;min-width:0;display:flex;flex-direction:column;overflow:hidden;touch-action:pan-y}
.pk .qitem,.pk .q-col .row{min-height:60px}
.pk .sbtn{min-height:40px;min-width:44px}
/* drag ghost */
.pk-ghost{position:fixed;left:0;top:0;z-index:200;pointer-events:none;background:var(--cA);color:#001a22;font:800 14px var(--ui);padding:10px 14px;border-radius:12px;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 8px 24px rgba(0,0,0,.6)}
body.dragging,body.dragging *{cursor:grabbing!important}
.droptgt{outline:3px solid var(--cA)!important;outline-offset:-3px;box-shadow:0 0 30px color-mix(in srgb,var(--cA) 55%,transparent)!important}