:root{--bg:#050506;--ln:#2a2c33;--ink:#e8e9ee;--mut:#80838f;--or:#ff8a1f;--gr:#22e06b;--rd:#ff2a2a;--bl:#2fa8ff;--hue:300;color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:clamp(13px,.35vw + .45vh + 7px,26px)}
html{height:100%}
body{margin:0;display:flex;flex-direction:column;height:100%;overflow:auto;background:radial-gradient(120% 80% at 50% 0,#1a1b20,var(--bg));color:var(--ink);font:1rem/1.4 "Segoe UI","Helvetica Neue",Arial,system-ui,sans-serif;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overscroll-behavior:none;-webkit-user-select:none;user-select:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
:focus-visible{outline:.18rem solid var(--or);outline-offset:.12rem}
.hd{flex:none;display:flex;align-items:center;gap:.8rem;padding:.5rem .8rem;flex-wrap:wrap}
.logo{height:2.4rem;width:auto;display:block;border-radius:.35rem}
.sub{color:var(--mut);font-size:.8rem}
.tabs{display:none;gap:.3rem;margin-left:auto}
.tabs button{border:1px solid #000;border-radius:.4rem;background:#1b1c21;padding:.45rem .7rem;font-size:.75rem;letter-spacing:.06em;min-height:2.6rem}
.tabs button.on{background:var(--or);color:#000}
/* układ szeroki: deck | mikser | deck, lista, fala */
#app{display:grid;gap:.6rem;padding:0 .8rem .8rem;grid-template-columns:minmax(0,1fr) minmax(17rem,.46fr) minmax(0,1fr);grid-template-rows:auto auto minmax(7rem,1fr) clamp(3.4rem,8vh,6rem);
  flex:1 1 0;min-height:36rem}
#dA{grid-area:1/1/3/2}#mx{grid-area:1/2}#dB{grid-area:1/3/3/4}#xfw{grid-area:2/2}.lib{grid-area:3/1/4/4}#ov{grid-area:4/1/5/4}
.deck{--c:var(--bl);--cr:47,168,255;display:flex;flex-direction:column;gap:.6rem;padding:.7rem;background:linear-gradient(180deg,#1b1c21,#0d0e11);border:1px solid #000;border-radius:.7rem;
  box-shadow:inset 0 1px 0 #3b3d47,0 .8rem 2rem rgba(0,0,0,.6)}
#dB{--c:var(--gr);--cr:34,224,107}
.deck.act{box-shadow:inset 0 1px 0 #3b3d47,0 0 0 1px var(--c),0 .8rem 2rem rgba(0,0,0,.6)}
.scr{background:#000;border:1px solid #333;border-radius:.4rem;padding:.4rem .6rem;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.1rem .9rem;align-items:start}
.t{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.95rem}
.a{font-size:.75rem;color:var(--c);font-style:normal}
.meta{min-width:0}
.tm,.tp{text-align:right}
.cur{font:700 1.7rem/1 ui-monospace,Consolas,"Courier New",monospace;color:#fff}
.rem,.tp small{display:block;color:var(--mut);font-size:.7rem}
.pv{font-size:1.1rem;color:var(--c)}
.wf{grid-column:1/-1;width:100%;height:3.6rem;display:block;margin-top:.2rem}
.tmp{align-self:stretch;position:relative;min-height:6rem}
.stage{display:grid;grid-template-columns:minmax(0,1fr) 3rem;gap:.6rem;align-items:center}
.jog{position:relative;width:min(100%,34vh);aspect-ratio:1;margin:auto;border-radius:50%;touch-action:none;cursor:grab;
  background:radial-gradient(circle at 35% 30%,#4a4d58,#17181c 55%,#050506);box-shadow:0 0 0 .25rem #0b0b0d,0 .5rem 1.2rem #000}
.jog:active{cursor:grabbing}
.ring{position:absolute;top:2.5%;right:2.5%;bottom:2.5%;left:2.5%;border-radius:50%;background:conic-gradient(var(--rd) var(--p,0deg),#2a1212 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - .55rem),#000 calc(100% - .5rem));mask:radial-gradient(farthest-side,transparent calc(100% - .55rem),#000 calc(100% - .5rem))}
.plat{position:absolute;top:9%;right:9%;bottom:9%;left:9%;border-radius:50%;background:repeating-radial-gradient(circle,#0b0b0d 0 2px,#15161a 2px 4px);box-shadow:inset 0 0 0 2px #2a2c33,inset 0 0 2rem #000;display:grid;place-items:center;will-change:transform}
.jog::after{content:"";position:absolute;top:9%;right:9%;bottom:9%;left:9%;border-radius:50%;pointer-events:none;background:conic-gradient(from 20deg,transparent,rgba(255,255,255,.09) 12%,transparent 25%,transparent 50%,rgba(255,255,255,.09) 62%,transparent 75%)}
.mk{position:absolute;top:3%;left:48.8%;width:2.4%;height:9%;background:var(--or);border-radius:2px}
.rec{width:46%;aspect-ratio:1;border-radius:50%;padding:5%;background:conic-gradient(#d9dbe3,#8d909e,#e8eaf0,#7b7e8c,#d9dbe3);display:grid;place-items:center}
.lab{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:radial-gradient(#0b0b0d 0 7%,transparent 7.5%),hsl(var(--hue) 55% 32%)}
.lab img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}
.lab.ok .lbl{display:none}
.lbl{font-size:.55rem;letter-spacing:.08em;text-align:center;padding:0 12%;color:#fff;opacity:.85}
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;margin:0;touch-action:none;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{background:#000;border:1px solid #3a3c46;border-radius:4px}
input[type=range]::-moz-range-track{background:#000;border:1px solid #3a3c46;border-radius:4px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:var(--tw);height:var(--th);border-radius:3px;border:1px solid #000;background:linear-gradient(#f3f4f8,#8b8e9c 48%,#23252b 50%,#aeb1bd)}
input[type=range]::-moz-range-thumb{width:var(--tw);height:var(--th);border-radius:3px;border:1px solid #000;background:linear-gradient(#f3f4f8,#8b8e9c 48%,#23252b 50%,#aeb1bd)}
input[type=range].h{--tw:2.2rem;--th:1.6rem;width:100%;height:1.8rem}
input[type=range].v{--tw:1.5rem;--th:2.4rem;position:absolute;left:50%;top:50%;width:var(--len,10rem);height:2.6rem;transform:translate(-50%,-50%) rotate(-90deg)}
input[type=range]::-webkit-slider-runnable-track{height:.4rem}
input[type=range]::-webkit-slider-thumb{margin-top:calc(.2rem - var(--th)/2)}
input[type=range]::-moz-range-track{height:.4rem}
.vw{position:relative;width:2.8rem;align-self:stretch;min-height:5rem}
.btns{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;justify-content:center}
.btns button{min-height:2.7rem;min-width:2.7rem;padding:0 .75rem;border:1px solid #000;border-radius:.4rem;background:linear-gradient(#2c2e36,#17181c);box-shadow:inset 0 1px #4a4d58;font-size:.75rem;letter-spacing:.05em}
.btns button[aria-pressed=true]{color:var(--c)}
.btns .cue,.btns .pp{width:4rem;height:4rem;border-radius:50%;font-weight:700;display:grid;place-items:center;line-height:1.1;padding:0}
.btns .cue{border:.2rem solid var(--or);color:var(--or)}
.btns .cue:active{background:var(--or);color:#000}
.btns .pp{border:.2rem solid var(--gr);color:var(--gr);font-size:1.3rem}
.btns .pp small{font-size:.45rem;letter-spacing:.04em}
.deck.on .pp{background:var(--gr);color:#000;box-shadow:0 0 1rem var(--gr)}
.mixer{display:flex;flex-direction:column;gap:.4rem;padding:.6rem;background:linear-gradient(#1c1d22,#0c0d10);border:1px solid #000;border-radius:.7rem;box-shadow:inset 0 1px 0 #3b3d47}
.brand{display:flex;flex-direction:column;align-items:center;letter-spacing:.3em;font-weight:700;font-size:.9rem}
.brand small{font-size:.55rem;color:var(--mut);letter-spacing:.12em;font-weight:400}
.chs{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.ch{background:#09090b;border:1px solid #23252b;border-radius:.4rem;padding:.4rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.ch h4{margin:0;font-size:.7rem;letter-spacing:.15em;color:var(--mut)}
.eqs{display:flex;flex-direction:column;gap:.2rem}
.kn{display:grid;justify-items:center;gap:.1rem;touch-action:none;cursor:ns-resize;border-radius:.4rem;padding:.1rem}
.kn i{width:2.1rem;height:2.1rem;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5a5e69,#16171b 70%);border:2px solid #000;box-shadow:0 0 0 2px #2d3037;position:relative;transform:rotate(var(--r,0deg))}
.kn i::after{content:"";position:absolute;left:calc(50% - 1px);top:2px;width:2px;height:34%;background:#fff}
.kn small{font-size:.6rem;color:var(--mut);letter-spacing:.1em}
.fd{display:flex;gap:.4rem;height:6.5rem}
.fd .vw{min-height:0}
.mt{display:flex;flex-direction:column-reverse;gap:2px;width:.5rem}
.mt i{flex:1;background:#1b1c20;border-radius:1px}
.mt i.on{background:var(--gr)}.mt i.m{background:#ffb020}.mt i.h{background:var(--rd)}
.mst{display:flex;justify-content:center}
.xf{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;background:linear-gradient(#1c1d22,#0c0d10);border:1px solid #000;border-radius:.7rem}
.xf label{font-size:.6rem;letter-spacing:.12em;color:var(--mut)}
.lib{display:flex;flex-direction:column;min-height:0;background:#0a0b0d;border:1px solid #23252b;border-radius:.6rem;overflow:hidden}
.bar{display:flex;gap:.5rem;align-items:center;padding:.5rem;border-bottom:1px solid #1d1f25;flex-wrap:wrap}
#q{flex:1;min-width:9rem;background:#000;border:1px solid #33353d;border-radius:.4rem;padding:.55rem .7rem;min-height:2.6rem;-webkit-user-select:text;user-select:text}
.chip{border:1px solid #33353d;border-radius:2rem;background:#15161a;padding:.45rem .9rem;font-size:.75rem;min-height:2.6rem}
.chip[aria-pressed=true]{background:var(--or);color:#000;border-color:var(--or)}
.count{font-size:.7rem;color:var(--mut)}
ol{list-style:none;margin:0;padding:0;overflow:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch}
li{display:grid;grid-template-columns:2.2rem minmax(0,1fr) auto auto auto;gap:.4rem;align-items:center;padding:.15rem .5rem;min-height:2.9rem;border-bottom:1px solid #15161a;cursor:pointer}
li:hover{background:#14151a}
li.la{background:rgba(47,168,255,.13)}li.lb{background:rgba(34,224,107,.12)}li.la.lb{background:linear-gradient(90deg,rgba(47,168,255,.15),rgba(34,224,107,.15))}
li.pl .tt{color:var(--or)}
li .n{color:var(--mut);font-size:.7rem;text-align:right}
.tx{min-width:0}.tt,.ar{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tt{font-size:.9rem}.ar{font-size:.7rem;color:var(--mut)}
li button{width:2.4rem;height:2.4rem;border:1px solid #33353d;border-radius:.4rem;background:#15161a;font-size:.75rem;display:grid;place-items:center;padding:0}
li button[data-d="0"]{color:var(--bl)}li button[data-d="1"]{color:var(--gr)}
li svg{width:1.1rem;height:1.1rem;fill:currentColor}
#ov{width:100%;height:100%;background:#000;border:1px solid #23252b;border-radius:.4rem;display:block;cursor:pointer}
#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 1rem);transform:translateX(-50%);background:#000c;border:1px solid #444;padding:.5rem .9rem;border-radius:.5rem;font-size:.8rem;max-width:90vw;opacity:0;transition:opacity .2s;pointer-events:none;z-index:9}
#toast.on{opacity:1}
/* smartfon / mały tablet: jeden widok naraz */
@media (max-width:899px){
  .tabs{display:flex}
  #app{display:flex;flex-direction:column;flex:1 1 0;min-height:0}
  #app>section{display:none;flex:1;min-height:0;overflow:auto}
  #app[data-v=a] #dA,#app[data-v=b] #dB,#app[data-v=m] #mx,#app[data-v=l] .lib{display:flex}
  #xfw{order:8}#ov{order:9;height:clamp(3.4rem,9vh,5rem);flex:none}
  .jog{width:min(100%,44vh)}
  .chs{max-width:26rem;margin:0 auto;width:100%}
}
@media (max-height:520px){.jog{width:min(100%,38vh)}.wf{height:3rem}.btns .cue,.btns .pp{width:3.2rem;height:3.2rem}.logo{height:1.6rem}}
@media (hover:none){li:hover{background:none}}
@media (prefers-reduced-motion:reduce){#toast{transition:none}}
/* ---- v3: dopracowana grafika ---- */
body{background:radial-gradient(90% 60% at 50% -10%,#23252d 0,transparent 70%),repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px),#050506}
.deck,.mixer,.xf{background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),linear-gradient(180deg,#24262c 0,#15161a 6%,#0c0d10 100%);box-shadow:inset 0 1px 0 #4a4d58,inset 0 -1px 0 #000,0 1rem 2.2rem rgba(0,0,0,.7)}
.deck::before{content:"PLAYER " attr(data-p);position:absolute;display:none}
.scr{background:linear-gradient(180deg,#06080c,#000);border:1px solid #3a3d48;box-shadow:inset 0 0 1.2rem rgba(0,0,0,.9),0 0 0 .15rem #0a0a0c,0 0 .9rem rgba(var(--cr),.18);position:relative;overflow:hidden}
.scr::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
.cur{text-shadow:0 0 .6rem rgba(var(--cr),.7)}
.jog{background:radial-gradient(circle at 50% 50%,#1b1c21 0 60%,#2b2d34 61%,#8f929e 62.5%,#e9ebf1 64%,#6b6e7b 67%,#101114 70%);box-shadow:0 0 0 .3rem #08080a,0 .6rem 1.6rem #000}
.jog::before{content:"";position:absolute;top:-1.5%;right:-1.5%;bottom:-1.5%;left:-1.5%;border-radius:50%;background:conic-gradient(from 0deg,#aeb1bd,#4a4d58,#d9dbe3,#42454f,#aeb1bd);z-index:-1}
.ring{filter:drop-shadow(0 0 .35rem rgba(255,42,42,.85))}
.plat{box-shadow:inset 0 0 0 .18rem #2a2c33,inset 0 0 2.2rem #000,0 0 1.4rem rgba(0,0,0,.8)}
.rec{box-shadow:0 0 .8rem #000,inset 0 0 .4rem rgba(255,255,255,.5)}
.btns .cue{box-shadow:0 0 .7rem rgba(255,138,31,.35),inset 0 0 .6rem rgba(255,138,31,.2)}
.btns .pp{box-shadow:0 0 .7rem rgba(34,224,107,.3),inset 0 0 .6rem rgba(34,224,107,.15)}
.btns button{background:linear-gradient(#34363f,#1a1b20 55%,#121316)}
.tmp::before{content:"+8\A\A\A\A\A\A0\A\A\A\A\A\A−8";white-space:pre;position:absolute;left:-.2rem;top:0;bottom:0;font-size:.55rem;line-height:1;color:var(--mut);display:flex;flex-direction:column;justify-content:space-between;width:1.2rem;text-align:right;pointer-events:none}
.eqs{display:grid;grid-template-columns:1fr 1fr;gap:.2rem .3rem}
.mst{display:flex;align-items:center;gap:.5rem}
#sp{flex:1;min-width:0;height:3.2rem;background:#000;border:1px solid #2a2c33;border-radius:.3rem}
.mt i{box-shadow:0 0 3px rgba(0,0,0,.6)}
.mt i.on{box-shadow:0 0 5px currentColor}
.lib{background:linear-gradient(#0d0e11,#08090b)}
li.pl .tt::before{content:"\25B6  ";font-size:.7em}

@supports not selector(:focus-visible){button:focus,.kn:focus,input:focus,li:focus,.jog:focus{outline:.18rem solid var(--or);outline-offset:.12rem}}
li:focus-visible{outline-offset:-.18rem;background:#1d1f26}
.jog:focus-visible{outline-offset:.4rem;border-radius:50%}
.btns .cue,.btns .pp{flex:none}
@media (max-width:899px){
  .sub{display:none}
  .hd{padding:.4rem .6rem;gap:.5rem}
  .tabs{flex:1;margin:0}.tabs button{flex:1;padding:.45rem .2rem}
  .btns{gap:.35rem;flex-wrap:nowrap}.btns button{padding:0 .4rem;min-width:2.4rem}
  .btns .cue,.btns .pp{width:3.6rem;height:3.6rem}
  .fd{height:min(40vh,14rem)}
  #app{padding:0 .5rem .5rem;gap:.4rem}
  .deck{padding:.5rem;gap:.4rem}
}
/* szeroki, ale niski ekran (Android TV 540p/720p, laptopy): decki + mikser razem, lista w zakładce */
@media (min-width:900px) and (max-height:700px){
  .tabs{display:flex}.tabs [data-v=m],.tabs [data-v=b]{display:none}
  .hd{padding:.3rem .8rem}.logo{height:1.7rem}
  #app{grid-template-rows:minmax(0,1fr) auto 3rem;min-height:0}
  #ov{grid-area:3/1/4/4}
  .lib{grid-area:1/1/3/4;display:none}
  #app[data-v=l] .lib{display:flex}
  #app[data-v=l] #dA,#app[data-v=l] #dB,#app[data-v=l] #mx,#app[data-v=l] #xfw{display:none}
  .jog{width:min(100%,32vh)}.wf{height:3rem}.scr{padding:.3rem .5rem}
  .btns .cue,.btns .pp{width:3.2rem;height:3.2rem}
  .deck{gap:.4rem;padding:.5rem}
}
@supports (height:100dvh){body{height:100dvh}}
.chs{min-width:0}.ch{min-width:0;padding:.35rem .25rem}
.scr,.stage,.btns{flex:none}
@media (max-width:899px) and (max-height:520px){
  .deck{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;align-content:start;overflow:auto}
  .scr{grid-area:1/1}.btns{grid-area:2/1;align-self:center}.stage{grid-area:1/2/3/3;align-self:center}
  .jog{width:min(100%,52vh)}
  #ov{height:2.6rem}
}
@media (max-width:899px) and (max-height:520px){#app[data-v=a] #dA,#app[data-v=b] #dB{display:grid}}