*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at 10% 8%,rgba(34,211,238,.24),transparent 32%),linear-gradient(135deg,#02030a,#07111f 55%,#02030a);color:#fff}.app{max-width:1820px;margin:auto;padding:18px}.brand{display:flex;justify-content:space-between;gap:16px;align-items:center;background:#0b1220;border:1px solid #334155;border-radius:30px;padding:16px 20px;margin-bottom:16px}.brand-left{display:flex;gap:18px;align-items:center}.brand img{width:320px;max-height:122px;object-fit:contain;background:#000;border-radius:22px;padding:10px}.brand h1{font-size:clamp(34px,4.4vw,62px);margin:6px 0;background:linear-gradient(90deg,#fff,#a5f3fc,#c4b5fd);-webkit-background-clip:text;color:transparent}.brand span{color:#a5f3fc;letter-spacing:.18em;text-transform:uppercase;font-size:12px}.brand p{color:#b9c6d8}.top{display:flex;flex-direction:column;gap:10px}.dj{display:grid;grid-template-columns:minmax(360px,1fr) 360px minmax(360px,1fr);gap:16px}.deck,.mixer,.browser,.panel,.controller-wrap{background:rgba(9,13,24,.92);border:1px solid #334155;border-radius:26px;padding:16px;box-shadow:0 28px 70px rgba(0,0,0,.38)}.deck-head{display:flex;align-items:center;justify-content:space-between}.pill{border-radius:999px;background:rgba(34,211,238,.12);color:#a5f3fc;padding:7px 10px;font-size:12px;font-weight:900}.cover{height:94px;border-radius:18px;border:1px solid #334155;background:radial-gradient(circle,#1e293b,#020617);display:grid;place-items:center;font-size:45px;font-weight:900;color:#a5f3fc;margin:8px 0}.title,.box,.row,.nowbox,.deck-meta,.restline{padding:10px;border:1px solid #334155;border-radius:14px;background:rgba(0,0,0,.28);margin:8px 0}.deck-meta,.tiny{font-size:12px;color:#a8b3c7}.title{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}canvas{width:100%;height:140px;background:#020617;border:1px solid rgba(34,211,238,.2);border-radius:18px}.time{display:grid;grid-template-columns:58px 1fr 58px;gap:8px;align-items:center}.transport,.mix-buttons,.tabs,.pads,.colorrow,.loopbar{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.mixer button.wide{width:100%}button{border:1px solid #475569;background:#263247;color:#fff;border-radius:14px;padding:10px 13px;font-weight:900;cursor:pointer}.primary,.play,.tab.active{background:linear-gradient(135deg,#22d3ee,#2563eb,#7c3aed)}.next-btn{background:linear-gradient(135deg,#facc15,#f97316)!important;color:#111}.sp-add-btn{background:linear-gradient(135deg,#1db954,#0f766e)!important}.sp-play-btn{background:linear-gradient(135deg,#22d3ee,#2563eb)!important}input{background:#020617;color:#fff;border:1px solid #334155;border-radius:12px;padding:9px;margin:4px 0;width:100%}.browser,.controller-wrap{margin-top:16px}.tabpage{display:none}.tabpage.active{display:block}.browser-grid{display:grid;grid-template-columns:360px 1fr 1.2fr;gap:14px}.list,.queue-list{display:flex;flex-direction:column;gap:8px;max-height:430px;overflow:auto}.row{display:flex;align-items:center;justify-content:space-between;gap:8px}.queue-track{display:flex;flex-direction:column;text-align:left}.queue-track small{color:#9fb0c9}.block-label{font-size:11px;border-radius:999px;padding:4px 8px;color:#020617;font-weight:900}.controller-topline{display:flex;justify-content:space-between;gap:14px;align-items:center}.controller-status{padding:10px 12px;border:1px solid #334155;border-radius:14px;color:#a5f3fc}.controller-surface{position:relative;display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:14px;align-items:center;margin-top:14px;padding:18px;border-radius:28px;background:linear-gradient(90deg,#f8fafc,#eef2f7);color:#111827}.ctrl-deck{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center}.ctrl-deck.ctrl-right{grid-template-columns:1fr 56px}.ctrl-right .ctrl-tempo{order:2}.ctrl-right .ctrl-jog{order:1}.ctrl-right .ctrl-buttons,.ctrl-left .ctrl-buttons{grid-column:1/3}.ctrl-tempo{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;font-weight:900;color:#374151}.ctrl-tempo input{writing-mode:bt-lr;appearance:slider-vertical;width:40px;height:160px}.ctrl-jog{height:185px;width:185px;margin:auto;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#facc15 0 16%,#111827 17% 58%,#020617 59% 68%,#344155 69%);border:8px solid #d1d5db;box-shadow:inset 0 0 35px #000}.ctrl-jog span{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:#facc15;color:#111;font-size:30px;font-weight:900}.ctrl-buttons,.ctrl-knobs,.ctrl-volumes,.ctrl-mode{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.ctrl-buttons button{background:#111827;color:white}.ctrl-buttons button:nth-child(1),.ctrl-buttons button:nth-child(2){background:#be123c}.ctrl-buttons .play{background:#16a34a!important}.ctrl-center{display:flex;flex-direction:column;gap:10px;align-items:center}.ctrl-cross{width:100%;font-size:11px;font-weight:900;text-align:center}.ctrl-cross input{width:90%;accent-color:#f97316}.ctrl-pads{position:absolute;display:grid;grid-template-columns:repeat(2,62px);gap:9px;bottom:22px}.left-pads{left:34%}.right-pads{right:34%}.ctrl-pads button{height:56px;border-radius:8px;background:#111827;color:#dbeafe;border:2px solid #60a5fa;font-weight:900}.controller-surface.hidden{display:none}.ctrl-jog.touched{box-shadow:inset 0 0 35px #000,0 0 32px rgba(34,211,238,.7)}.pads button.looping{background:#0f766e}.pads button.playing{outline:3px solid #22d3ee}.bass-sync{padding:12px;border:1px solid #334155;border-radius:16px;margin-bottom:12px}@media(max-width:1180px){.dj,.browser-grid,.controller-surface{grid-template-columns:1fr}.brand,.brand-left,.controller-topline{flex-direction:column;align-items:flex-start}.brand img{width:100%}.top{flex-direction:row;width:100%}.ctrl-pads{position:static;grid-template-columns:repeat(4,1fr)}}
/* V21 pad modes */
.pad-mode-panel{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}.pad-mode-side{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(0,0,0,.22)}.pad-mode-side b{margin-right:8px;color:#a5f3fc}.pad-mode-side button.active{background:linear-gradient(135deg,#22d3ee,#2563eb,#7c3aed)!important}.ctrl-pads button.pad-active{background:linear-gradient(135deg,#22c55e,#0f766e)!important;color:#fff;box-shadow:0 0 18px rgba(34,197,94,.55)}.ctrl-pads button.mode-sampler{border-color:#f97316}.ctrl-pads button.mode-fx{border-color:#a78bfa}.ctrl-pads button.mode-hotcue{border-color:#22c55e}.ctrl-pads button.mode-loop{border-color:#60a5fa}.sampler-config{margin:12px 0;padding:12px;border:1px solid #334155;border-radius:16px;background:rgba(0,0,0,.25)}.sampler-behavior-grid{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:8px}.sampler-behavior-grid label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#a8b3c7}.sampler-behavior-grid select{background:#020617;color:#fff;border:1px solid #334155;border-radius:10px;padding:8px}@media(max-width:900px){.pad-mode-panel{grid-template-columns:1fr}.sampler-behavior-grid{grid-template-columns:repeat(2,1fr)}}