:root{
  --bg:#07050d;--panel:#0e0a18;--panel2:#151022;--line:#2a2040;
  --text:#f7f4ff;--muted:#9188a5;--violet:#8d5bff;--violet2:#c13cff;
  --cyan:#42dcff;--green:#3df5a2;--red:#ff5076;--yellow:#ffd35c;
  --shadow:0 18px 45px rgba(0,0,0,.32)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:
radial-gradient(circle at 10% 0%,rgba(141,91,255,.15),transparent 28%),
radial-gradient(circle at 90% 0%,rgba(193,60,255,.10),transparent 24%),
var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
button,input{font:inherit}
button{border:0;cursor:pointer}
.app-shell{max-width:1900px;margin:auto;padding:18px}
.topbar{display:flex;justify-content:space-between;gap:18px;align-items:center;
  padding:16px 20px;background:rgba(14,10,24,.9);border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow);backdrop-filter:blur(18px)}
.brand{display:flex;gap:14px;align-items:center}.brand-mark{width:54px;height:54px;
  display:grid;place-items:center;border-radius:15px;font-weight:900;letter-spacing:1px;
  background:linear-gradient(135deg,var(--violet),var(--violet2));box-shadow:0 0 25px rgba(141,91,255,.35)}
.brand h1{margin:0;font-size:20px;letter-spacing:2px}.brand p{margin:4px 0 0;color:var(--muted);font-size:12px}
.master-zone{display:flex;align-items:center;gap:16px}.master-zone label{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:10px}
input[type=range]{accent-color:var(--violet)}
.ghost,.primary,.broadcast-btn,.transport button,.loop-row button,.eject{
  color:var(--text);background:#1b1429;border:1px solid #302444;border-radius:10px;padding:9px 12px
}
.ghost:hover,.transport button:hover,.loop-row button:hover{background:#241936;border-color:#563d77}
.primary{background:linear-gradient(135deg,#6f45df,#a33bf0);border:0;font-weight:800}
.small{padding:7px 10px;font-size:11px}
.decks{display:grid;grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr);gap:14px;margin-top:14px}
.deck,.mixer,.library-panel,.card{background:linear-gradient(180deg,rgba(21,16,34,.96),rgba(12,9,21,.98));
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.deck{padding:14px;position:relative;overflow:hidden}.deck::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,var(--violet),transparent)}
.deck-b::before{background:linear-gradient(90deg,transparent,var(--cyan),transparent)}
.deck-head{display:flex;align-items:center;gap:12px}.deck-badge{font-size:11px;font-weight:900;letter-spacing:1px;color:#dcd2ff}
.deck-b .deck-badge{color:#b9f4ff}.deck-track{flex:1;min-width:0}.deck-track strong,.deck-track small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deck-track small{color:var(--muted);font-size:11px;margin-top:3px}.eject{padding:5px 10px;font-size:18px}
.wave{width:100%;height:155px;margin-top:12px;background:#08060f;border-radius:12px;border:1px solid #261c38}
.time-row{display:grid;grid-template-columns:50px 1fr 50px;align-items:center;gap:8px;color:#c9c1d6;font-size:12px}
.seek{width:100%}.transport{display:grid;grid-template-columns:1.1fr 1.4fr 1fr 1fr;gap:8px;margin:10px 0}
.transport .play{background:linear-gradient(135deg,#6e46e5,#ad3eef);font-size:19px;font-weight:900}
.transport .cue{color:#d8cbff;border-color:#5f44a0}.deck-controls{display:grid;grid-template-columns:1.2fr 1.2fr 60px 72px 58px;gap:10px;align-items:end}
.deck-controls label{font-size:10px;color:var(--muted);display:flex;flex-direction:column;gap:7px}
.pitch-value,.bpm-box{height:42px;border:1px solid #2b203d;background:#0b0812;border-radius:9px;display:grid;place-items:center;font-size:12px}
.bpm-box span{font-size:9px;color:var(--muted);margin-bottom:-6px}.bpm-box strong{font-size:14px}
.loop-row{display:flex;gap:7px;align-items:center;margin-top:10px}.loop-row span{font-size:10px;color:var(--muted);margin-right:2px}
.loop-row button{padding:7px 10px;font-size:11px}.loop-row button.active{background:var(--violet);color:white}
.deck-vu{margin-top:10px;height:6px;background:#171020;border-radius:99px;overflow:hidden}.deck-vu i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--green),var(--yellow),var(--red))}
.mixer{padding:14px;display:flex;flex-direction:column;align-items:center;gap:12px}.mixer-title{font-size:12px;font-weight:900;letter-spacing:2px;color:#c8bdd9}
.meters{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;height:110px}.meters div{display:flex;gap:5px;justify-content:center;align-items:end}
.meters span{font-size:10px;color:var(--muted)}.meters b{display:block;width:18px;height:7%;border-radius:7px 7px 2px 2px;background:linear-gradient(0deg,var(--green),var(--yellow),var(--red));transition:.05s}
.xfade-label{font-size:9px;color:var(--muted);letter-spacing:1px}.crossfader{width:100%}.xfade-marks{width:100%;display:flex;justify-content:space-between;font-size:9px;color:var(--muted)}
.broadcast-mini{margin-top:auto;width:100%;display:flex;gap:8px;align-items:center;padding:10px;background:#0a0710;border:1px solid #271d38;border-radius:12px}
.broadcast-mini strong,.broadcast-mini small{display:block}.broadcast-mini strong{font-size:10px}.broadcast-mini small{font-size:9px;color:var(--muted);margin-top:2px}
.dot{width:9px;height:9px;border-radius:50%;background:#5e5669;box-shadow:0 0 0 4px rgba(94,86,105,.12)}.dot.live{background:var(--red);box-shadow:0 0 14px rgba(255,80,118,.8)}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;margin-top:14px}.library-panel{padding:16px}.panel-head,.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.panel-head h2,.card-head h3{margin:0}.panel-head p{margin:4px 0 0;color:var(--muted);font-size:12px}.panel-actions{display:flex;gap:8px}
.drop-zone{margin:14px 0;border:1px dashed #5a3d82;border-radius:12px;padding:14px;text-align:center;color:#9d8db8;background:#0c0814}
.drop-zone.drag{border-color:var(--violet2);background:rgba(141,91,255,.12);color:white}.library-tools{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}
.library-tools input[type=search]{flex:1;max-width:480px;background:#0a0711;border:1px solid #2d2141;color:white;padding:10px 12px;border-radius:10px;outline:none}
.switch-row{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}.table-wrap{overflow:auto;max-height:455px}
table{width:100%;border-collapse:collapse;font-size:12px}th{position:sticky;top:0;background:#100b1b;color:#817792;text-align:left;padding:10px 8px;font-size:10px;text-transform:uppercase;letter-spacing:.6px}
td{padding:10px 8px;border-top:1px solid #21172f;vertical-align:middle}.track-row{transition:.15s}.track-row:hover{background:#151022}.track-row.dragging{opacity:.35}
.track-title{max-width:480px}.track-title strong,.track-title small{display:block}.track-title small{color:var(--muted);font-size:10px;margin-top:3px}
.action-row{display:flex;gap:6px}.action-row button{padding:6px 8px;border-radius:7px;background:#20172f;color:#ddd3ef;border:1px solid #332448;font-size:10px}.action-row button:hover{border-color:#7752ab}
.side-panel{display:flex;flex-direction:column;gap:14px}.card{padding:14px}.status-pill{padding:5px 8px;border-radius:99px;background:#1c1528;color:#8f849f;font-size:9px;font-weight:900}.status-pill.live{background:rgba(255,80,118,.12);color:#ff708e}
.broadcast-info{margin:12px 0;display:grid;gap:7px}.broadcast-info div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #20162e;font-size:11px}
.broadcast-info span{color:var(--muted)}.broadcast-info strong{text-align:right}.broadcast-btn{width:100%;background:linear-gradient(135deg,#832ed8,#c33df1);font-weight:900}.broadcast-btn.live{background:linear-gradient(135deg,#d9325d,#ff5b7f)}
.hint{display:block;margin-top:8px;color:#796e8b;line-height:1.4}.queue-list,.history-list{max-height:210px;overflow:auto}.empty{color:#71667f;font-size:11px;padding:12px 0}
.queue-item,.history-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:1px solid #20162e;font-size:11px}.queue-item button{background:transparent;color:#b5a8c7}
.link-btn{background:none;color:#a895c4;font-size:10px}.toast{position:fixed;right:20px;bottom:20px;transform:translateY(20px);opacity:0;pointer-events:none;
  padding:11px 14px;border-radius:10px;background:#171020;border:1px solid #3e2d57;box-shadow:var(--shadow);transition:.2s;z-index:10;font-size:12px}
.toast.show{transform:translateY(0);opacity:1}.toast.error{border-color:#7b2d46;color:#ff9bae}
.vu{display:flex;gap:4px}.master-vu{width:92px;flex-direction:column}.master-vu i{height:5px;width:0;background:linear-gradient(90deg,var(--green),var(--yellow),var(--red));border-radius:99px}
code{color:#c6adff}
.youtube-import{margin-top:18px;padding:20px;border:1px solid #684475;border-radius:16px;background:radial-gradient(ellipse at 100% 0%,#69224b44,transparent 65%),linear-gradient(120deg,#251332,#140d22);box-shadow:inset 0 1px 0 #ffffff09}
.youtube-heading{display:flex;align-items:center;gap:12px;margin-bottom:18px}.youtube-heading h3{margin:0;font-size:18px;letter-spacing:-.4px}.youtube-heading p{margin:5px 0 0;font-size:12px;color:#b6a6c9}.youtube-icon{display:grid;place-items:center;flex-shrink:0;width:43px;height:43px;background:linear-gradient(135deg,#ff426e,#b51b55);border-radius:13px;color:white;box-shadow:0 5px 20px #ff426e22}.youtube-tag{margin-left:auto;color:#f5a9c7;font-size:9px;letter-spacing:1.2px;font-weight:800;white-space:nowrap}
.youtube-input-row{display:flex;gap:10px}.youtube-input-row input{min-width:0;flex:1;background:#090610b3;border:1px solid #51345e;border-radius:11px;color:#fff;padding:14px;font-size:13px;outline:none}.youtube-input-row input:focus{border-color:#dd83ed;box-shadow:0 0 0 3px #bb64ed22}.youtube-input-row button{padding:13px 18px;background:linear-gradient(120deg,#ee4c90,#a64ff4);font-weight:750;white-space:nowrap;border-radius:11px;color:white;box-shadow:0 5px 20px #a64ff422}.youtube-input-row button:hover{filter:brightness(1.12)}.youtube-input-row button:disabled{opacity:.55;cursor:wait}.youtube-footer{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:#b7a2c7;font-size:10px;margin-top:11px}
.youtube-status{margin-top:15px;font-size:12px;color:#dccde7}.youtube-status progress{display:block;width:100%;height:5px;border:0;border-radius:9px;overflow:hidden;margin-top:10px;accent-color:#e368cc}.youtube-status progress::-webkit-progress-bar{background:#362241}.youtube-status progress::-webkit-progress-value{background:linear-gradient(90deg,#ee4c90,#a64ff4);transition:width .3s}.youtube-status.has-error{color:#ffabbd}.youtube-ready{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid #55315a}.youtube-ready strong{font-size:13px;overflow-wrap:anywhere}.youtube-ready>div{display:flex;gap:8px;flex-shrink:0}.youtube-ready button{background:#332144;border:1px solid #735094;color:#e3d6f2;padding:9px 12px;border-radius:8px;font-size:11px}.source-youtube{color:#f482b0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}
@media(max-width:650px){.youtube-import{padding:15px}.youtube-heading h3{font-size:16px}.youtube-tag{display:none}.youtube-input-row{flex-direction:column}.youtube-ready{align-items:flex-start;flex-direction:column}.youtube-footer{line-height:1.6}}
@media(max-width:1200px){.decks{grid-template-columns:1fr 150px 1fr}.workspace{grid-template-columns:1fr}.side-panel{display:grid;grid-template-columns:repeat(3,1fr)}}
@media(max-width:850px){.topbar{align-items:flex-start;flex-direction:column}.master-zone{width:100%;flex-wrap:wrap}.decks{grid-template-columns:1fr}.mixer{min-height:250px}.workspace{grid-template-columns:1fr}.side-panel{display:flex}.deck-controls{grid-template-columns:1fr 1fr 70px}.bpm-box,.deck-controls .small{grid-column:auto}.panel-head{align-items:flex-start;flex-direction:column}.panel-actions{width:100%}.panel-actions button{flex:1}}