html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-mono);overflow-x:hidden;}
body{background-image:repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(255,255,255,.018) 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(255,255,255,.018) 40px);}

/* ══ TOPBAR ══ */
#topbar{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:52px;background:var(--s1);border-bottom:1px solid var(--border2);position:sticky;top:0;z-index:200;box-shadow:0 2px 20px rgba(0,0,0,.6);}
.logo{font-family:var(--font-display);font-size:1.3rem;font-weight:900;letter-spacing:6px;color:var(--green);text-shadow:0 0 20px var(--green),0 0 40px rgba(0,255,136,.3);}
.logo span{color:var(--orange);}
#topbar-right{display:flex;align-items:center;gap:10px;}
.pill{display:flex;align-items:center;gap:6px;padding:5px 14px;border-radius:999px;border:1px solid var(--border2);background:var(--s2);font-family:var(--font-mono);font-size:.65rem;cursor:pointer;color:var(--muted);letter-spacing:1px;transition:all .15s;white-space:nowrap;}
.pill.active,.pill:active{border-color:var(--green);color:var(--green);background:var(--green-glow);}
.topbar-info{cursor:default;color:var(--green);border-color:var(--green);background:var(--green-glow);}
.topbar-info:active{border-color:var(--green);color:var(--green);background:var(--green-glow);}
.topbar-info .info-sep{color:var(--muted);}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--muted);flex-shrink:0;}
.pill.online{border-color:var(--green);color:var(--green);}
.pill.online .dot{background:var(--green);box-shadow:0 0 6px var(--green);animation:blink 1.4s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
#blackout-btn{padding:6px 16px;border-radius:7px;border:2px solid var(--red);color:var(--red);background:transparent;font-family:var(--font-display);font-size:.6rem;font-weight:700;letter-spacing:2px;cursor:pointer;transition:all .12s;}
#blackout-btn.on{background:var(--red);color:#fff;box-shadow:0 0 16px rgba(255,34,68,.5);}
@media(max-width:980px){#network-pill{display:none;}}

/* ══ MODE TABS ══ */
#mode-bar{display:flex;padding:0 16px;background:var(--s1);border-bottom:1px solid var(--border);position:sticky;top:52px;z-index:199;}
.mode-tab{padding:10px 20px;font-family:var(--font-display);font-size:.55rem;letter-spacing:3px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .12s;}
.mode-tab:hover{color:var(--text);}
.mode-tab.on{color:var(--green);border-bottom-color:var(--green);background:var(--green-glow);}

/* ══ FIXTURE BAR ══ */
#fixture-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 16px;background:var(--s1);border-bottom:1px solid var(--border);min-height:44px;}
.fx-pill{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:var(--s2);font-family:var(--font-mono);font-size:.65rem;color:var(--muted);cursor:pointer;transition:all .12s;white-space:nowrap;}
.fx-pill.on{border-color:var(--green);color:var(--green);background:var(--green-glow);}
.fx-pill .fx-addr{font-size:.55rem;color:var(--dim);margin-left:2px;}
.fx-pill.on .fx-addr{color:rgba(0,255,136,.5);}
#fx-all-pill{border-color:var(--orange);color:var(--orange);}
#fx-all-pill.on{background:var(--orange-glow);}
#fx-manage-pill{padding:6px 10px;justify-content:center;border-radius:999px;font-size:.55rem;font-family:var(--font-display);font-weight:700;letter-spacing:2px;}
#fx-manage-pill:hover{border-color:var(--green);color:var(--green);}
.grp-pill{padding:6px 12px;border-radius:999px;border:1px solid var(--purple);background:rgba(187,68,255,.08);font-family:var(--font-mono);font-size:.6rem;color:var(--purple);cursor:pointer;white-space:nowrap;transition:all .12s;}
.grp-pill:hover{background:rgba(187,68,255,.2);}
.fx-uni-badge{display:inline-block;padding:1px 5px;border-radius:4px;background:rgba(0,180,255,.2);color:#0bf;font-size:.5rem;margin-left:3px;border:1px solid rgba(0,180,255,.3);}
#universe-indicator{display:none;padding:4px 10px;border-radius:999px;background:rgba(0,180,255,.1);border:1px solid rgba(0,180,255,.3);color:#0bf;font-size:.6rem;white-space:nowrap;}

/* ══ EFFECTS PANEL ══ */
.fx-panel{display:flex;flex-direction:column;gap:8px;}
.fx-panel .fx-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.fx-param-row{display:flex;align-items:center;gap:8px;padding:4px 0;}
.fx-param-row label{min-width:110px;font-size:.65rem;color:var(--muted);flex-shrink:0;}
.fx-param-slider{flex:1;min-width:80px;}
.fx-param-val{min-width:36px;text-align:right;font-size:.65rem;color:var(--text);}
.fx-param-check{width:16px;height:16px;}
.fx-param-select{background:var(--s2);border:1px solid var(--border);color:var(--text);border-radius:4px;padding:3px 6px;font-size:.65rem;}
.fx-effect-row{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:var(--s2);border-radius:6px;border:1px solid var(--border);}
.fx-effect-info{display:flex;flex-direction:column;gap:2px;}
.fx-effect-name{font-size:.7rem;color:var(--green);}
.fx-effect-meta{font-size:.6rem;color:var(--muted);}
.fx-stop-btn{padding:3px 10px;border:1px solid var(--red);background:transparent;color:var(--red);border-radius:4px;cursor:pointer;font-size:.65rem;transition:all .12s;}
.fx-stop-btn:hover{background:var(--red);color:#fff;}
.fx-empty{font-size:.65rem;color:var(--dim);padding:8px 0;}
#fx-start-btn{padding:6px 18px;border:1px solid var(--green);background:var(--green-glow);color:var(--green);border-radius:6px;cursor:pointer;font-size:.65rem;font-family:var(--font-display);letter-spacing:1px;transition:all .12s;}
#fx-start-btn:hover{background:var(--green);color:#000;}
#fx-stop-all-btn{padding:6px 14px;border:1px solid var(--orange);background:transparent;color:var(--orange);border-radius:6px;cursor:pointer;font-size:.65rem;transition:all .12s;}
#fx-stop-all-btn:hover{background:var(--orange);color:#000;}
select.fx-type-select,select#fx-target-select{background:var(--s2);border:1px solid var(--border2);color:var(--text);border-radius:6px;padding:5px 8px;font-family:var(--font-mono);font-size:.65rem;}

/* ══ PAGES ══ */
/* Full viewport width on large monitors (was 960px centered = dead black margins) */
.page{display:none;max-width:min(100%,1680px);margin:0 auto;padding:10px 12px;box-sizing:border-box;}
.page.active{display:block;}
#page-control .card{padding:12px;}

/* ══ GRID LAYOUT ══ */
#app{display:grid;gap:8px;grid-template-columns:repeat(4,minmax(0,1fr));}
@media(max-width:1200px){#app{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:580px){#app{grid-template-columns:1fr;}}

/* ══ CARDS ══ */
.card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r);padding:14px;position:relative;overflow:hidden;}
.card::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.025) 0%,transparent 50%);}
.card-title{font-family:var(--font-display);font-size:.6rem;font-weight:700;letter-spacing:4px;color:var(--text);margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;}
.card-title .badge{font-family:var(--font-mono);font-size:.6rem;letter-spacing:1px;padding:2px 8px;border-radius:4px;background:var(--s3);color:var(--text);}
.full{grid-column:1/-1;}

/* ══ JOYSTICK ══ */
.joystick-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;}
#joycanvas{touch-action:none;cursor:crosshair;border-radius:var(--r);border:1px solid var(--border2);display:block;max-width:100%;}
.joy-readout{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;}
.joy-val{background:var(--s2);border:1px solid var(--border);border-radius:6px;padding:6px 10px;display:flex;justify-content:space-between;font-size:.65rem;}
.joy-val .lbl{color:var(--text);}
.joy-val .num{color:var(--green);font-weight:bold;}

/* ══ SLIDERS ══ */
.sliders{display:flex;flex-direction:column;gap:12px;}
.sl{display:flex;flex-direction:column;gap:5px;}
.sl-presets{display:flex;gap:4px;margin-top:4px;}
.sl-preset{flex:1;min-width:0;padding:5px 2px;border-radius:6px;border:1px solid var(--border2);background:var(--s3);color:var(--muted);font-family:var(--font-mono);font-size:.52rem;font-weight:700;cursor:pointer;transition:all .1s;}
.sl-preset:hover{border-color:var(--green);color:var(--green);}
.sl-preset:active{transform:scale(.97);}
.sl-head{display:flex;justify-content:space-between;align-items:center;font-size:.62rem;}
.sl-lbl{color:var(--text);letter-spacing:2px;}
.sl-val{color:var(--green);font-weight:bold;}
input[type=range].dimmer{background:linear-gradient(to right,var(--s3) 0%,var(--yellow) 100%);}
input[type=range].strobe{background:linear-gradient(to right,var(--s3) 0%,#fff 100%);}
input[type=range].speed{background:linear-gradient(to right,var(--green) 0%,var(--orange) 100%);}
input[type=range].master{background:linear-gradient(to right,var(--s3) 0%,var(--blue) 100%);}
input[type=range].rgbw-r{background:linear-gradient(to right,var(--s3) 0%,#ff2244 100%);}
input[type=range].rgbw-g{background:linear-gradient(to right,var(--s3) 0%,#22ff44 100%);}
input[type=range].rgbw-b{background:linear-gradient(to right,var(--s3) 0%,#2266ff 100%);}
input[type=range].rgbw-w{background:linear-gradient(to right,var(--s3) 0%,#ffffff 100%);}
#rgbw-preview{width:48px;height:48px;border-radius:50%;border:2px solid var(--border2);margin:0 auto 8px;transition:background .1s;}

/* ══ BLE LED STRIP ══ */
#panel-ble{border-color:var(--purple);border-style:dashed;}
#panel-ble .card-title{color:var(--purple);}
#ble-status{font-size:.55rem;color:var(--muted);padding:2px 8px;border-radius:4px;background:var(--s3);}
#ble-status.connected{color:var(--green);background:var(--green-glow);}
#ble-color-preview{width:56px;height:56px;border-radius:50%;border:2px solid var(--border2);margin:0 auto 10px;transition:background .15s;box-shadow:0 0 20px rgba(0,0,0,.4);}
.ble-color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:12px;}
.ble-color-btn{width:100%;aspect-ratio:1;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:all .12s;}
.ble-color-btn:hover{transform:scale(1.1);border-color:#fff;}
.ble-color-btn.active{border-color:#fff;box-shadow:0 0 10px rgba(255,255,255,.3);}
input[type=range].ble-bright{background:linear-gradient(to right,var(--s3) 0%,var(--purple) 100%);}
input[type=range].ble-speed{background:linear-gradient(to right,var(--s3) 0%,var(--orange) 100%);}
.ble-fx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px;}
.ble-fx-btn{padding:8px 4px;border-radius:7px;border:1px solid var(--border2);background:var(--s2);color:var(--muted);font-family:var(--font-mono);font-size:.55rem;letter-spacing:.5px;cursor:pointer;text-align:center;transition:all .12s;}
.ble-fx-btn:hover{border-color:var(--purple);color:var(--purple);}
.ble-fx-btn.active{border-color:var(--purple);color:var(--purple);background:rgba(187,68,255,.12);}
#ble-connect-btn{width:100%;padding:10px;border-radius:8px;border:1.5px solid var(--purple);background:rgba(187,68,255,.08);color:var(--purple);font-family:var(--font-display);font-size:.6rem;font-weight:700;letter-spacing:2px;cursor:pointer;transition:all .12s;}
#ble-connect-btn:hover{background:var(--purple);color:#fff;}
#ble-connect-btn.connected{border-color:var(--green);color:var(--green);background:var(--green-glow);}

/* ══ COLOR WHEEL ══ */
#color-canvas{border-radius:50%;cursor:crosshair;touch-action:none;border:2px solid var(--border2);display:block;margin:0 auto;}
.color-info{display:flex;align-items:center;gap:10px;margin-top:8px;justify-content:center;font-size:.65rem;}
#color-swatch{width:24px;height:24px;border-radius:6px;border:1px solid var(--border2);}
#color-name{color:var(--green);}

/* ══ GOBO + PRISM (single card) ══ */
.gobo-prism-stack{display:flex;flex-direction:column;gap:12px;}
.gobo-prism-sub{font-family:var(--font-display);font-size:.52rem;font-weight:700;letter-spacing:3px;color:var(--muted);margin-bottom:2px;}
#gobo-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;}
@media(max-width:900px){#gobo-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
.gobo-btn{min-height:0;border-radius:8px;border:1px solid var(--border);background:var(--s2);cursor:pointer;font-size:.52rem;color:var(--text);text-align:center;font-family:var(--font-mono);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px 4px 6px;transition:all .12s;line-height:1.15;}
.gobo-btn .gobo-svg{flex-shrink:0;opacity:.92;transition:opacity .12s,filter .12s;filter:drop-shadow(0 0 6px rgba(255,255,255,.12));}
.gobo-btn .gobo-lbl{font-size:.48rem;letter-spacing:.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.gobo-btn:hover{border-color:var(--blue);color:var(--text);}
.gobo-btn:hover .gobo-svg{opacity:1;filter:drop-shadow(0 0 8px rgba(0,170,255,.35));}
.gobo-btn.on{border-color:var(--blue);background:rgba(0,170,255,.14);color:var(--blue);}
.gobo-btn.on .gobo-svg{opacity:1;filter:drop-shadow(0 0 10px rgba(0,170,255,.45));color:var(--blue);}

#prism-row{display:flex;flex-wrap:wrap;gap:6px;}
.prism-btn{flex:1 1 auto;min-width:min(100%,112px);padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:var(--s2);cursor:pointer;font-size:.55rem;color:var(--text);font-family:var(--font-mono);letter-spacing:1px;text-align:center;transition:all .12s;}
.prism-btn:hover{border-color:var(--yellow);}
.prism-btn.on{border-color:var(--yellow);background:rgba(255,221,0,.12);color:var(--yellow);}

/* ══ BPM ══ */
.bpm-display{text-align:center;font-family:var(--font-display);font-size:3rem;font-weight:900;color:var(--orange);text-shadow:0 0 30px var(--orange),0 0 60px rgba(255,107,0,.3);letter-spacing:4px;line-height:1;margin-bottom:8px;}
.bpm-sub{font-size:.6rem;color:var(--text);letter-spacing:3px;text-align:center;margin-bottom:14px;}
.bpm-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:10px;}
.bpm-btn{padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--s2);cursor:pointer;font-family:var(--font-display);font-size:.55rem;font-weight:700;letter-spacing:2px;color:var(--text);text-align:center;transition:all .12s;user-select:none;}
.bpm-btn:hover{border-color:var(--orange);color:var(--orange);}
.bpm-btn.on{border-color:var(--orange);background:var(--orange-glow);color:var(--orange);}
#tap-btn{grid-column:1/-1;padding:16px;font-size:.8rem;letter-spacing:4px;border:2px solid var(--orange);color:var(--orange);background:transparent;transition:all .08s;}
#tap-btn:active,#tap-btn.flash{background:var(--orange);color:#000;box-shadow:0 0 24px var(--orange);}
.bpm-sync-row{display:flex;gap:6px;}
.sync-opt{flex:1;padding:8px;border-radius:7px;border:1px solid var(--border);background:var(--s2);cursor:pointer;font-size:.6rem;color:var(--muted);font-family:var(--font-mono);text-align:center;transition:all .12s;}
.sync-opt:hover{border-color:var(--orange);}
.sync-opt.on{border-color:var(--orange);color:var(--orange);background:var(--orange-glow);}

/* ══ PRESETS ══ */
#preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;}
.preset-card{position:relative;border-radius:8px;border:1px solid var(--border);background:var(--s2);cursor:pointer;padding:10px 10px 10px 12px;transition:all .12s;overflow:hidden;}
.preset-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pc-color,var(--green));border-radius:3px 0 0 3px;}
.preset-card:hover{border-color:var(--border2);transform:translateY(-1px);}
.preset-card .pc-name{font-size:.7rem;color:var(--text);margin-bottom:4px;}
.preset-card .pc-meta{font-size:.55rem;color:var(--muted);}
.preset-card .pc-del{position:absolute;top:6px;right:6px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--muted);cursor:pointer;border-radius:3px;opacity:0;transition:opacity .12s;}
.preset-card:hover .pc-del{opacity:1;}
.preset-card .pc-del:hover{color:var(--red);}

/* ══ PROGRAMS PAGE (cubes) ══ */
.programs-cube-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;}
.prog-cube{background:var(--s2);border:1px solid var(--border);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px;transition:border-color .15s,box-shadow .15s;}
.prog-cube.playing{border-color:var(--green);box-shadow:0 0 20px var(--green-glow);}
.prog-cube .pc-name{font-family:var(--font-display);font-size:.85rem;font-weight:700;color:var(--text);letter-spacing:1px;}
.prog-cube .pc-meta{font-size:.62rem;color:var(--muted);}
.prog-cube .pc-actions{display:flex;flex-direction:column;gap:6px;}
.pc-btn{padding:8px 12px;border-radius:7px;border:1px solid var(--border2);background:var(--s3);font-family:var(--font-mono);font-size:.62rem;letter-spacing:1px;cursor:pointer;color:var(--muted);transition:all .12s;text-align:center;}
.pc-btn.run{border-color:var(--green);color:var(--green);background:var(--green-glow);}
.pc-btn.run:hover{background:var(--green);color:#000;}
.pc-btn.loop{border-color:var(--orange);color:var(--orange);background:var(--orange-glow);}
.pc-btn.loop:hover{background:var(--orange);color:#000;}
.pc-btn.stop{border-color:var(--red);color:var(--red);background:rgba(255,34,68,.12);}
.pc-btn.stop:hover{background:var(--red);color:#fff;}
.prog-cube.playing .pc-btn.run,.prog-cube.playing .pc-btn.loop{display:none;}
.prog-cube.playing .pc-btn.stop{display:block;}
.prog-cube:not(.playing) .pc-btn.stop{display:none;}
.prog-cube .pc-del{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:8px;border:1px solid rgba(255,34,68,.45);background:rgba(255,34,68,.10);color:var(--red);font-family:var(--font-display);font-size:.75rem;cursor:pointer;display:none;align-items:center;justify-content:center;transition:all .12s;}
.prog-cube .pc-del:hover{background:rgba(255,34,68,.20);border-color:var(--red);color:#fff;}
.programs-edit-on .prog-cube .pc-del{display:flex;}
.programs-edit-on .prog-cube .pc-actions{opacity:.55;}

.patch-table{width:100%;border-collapse:collapse;font-size:.65rem;}
.patch-table th,.patch-table td{padding:6px 8px;text-align:left;border-bottom:1px solid var(--border);}
.patch-table th{color:var(--muted);}
.patch-table tr.conflict{background:rgba(255,34,68,.12);}

#save-preset-row{display:flex;gap:6px;margin-bottom:10px;}
#preset-name-input{flex:1;background:var(--s2);border:1px solid var(--border);border-radius:7px;color:var(--text);font-family:var(--font-mono);font-size:.7rem;padding:7px 12px;outline:none;}
#preset-name-input:focus{border-color:var(--green);}
#preset-color-input{width:36px;height:36px;border-radius:6px;border:none;cursor:pointer;padding:0;}
#save-preset-btn{padding:7px 16px;border-radius:7px;border:1px solid var(--green);background:var(--green-glow);color:var(--green);font-family:var(--font-mono);font-size:.65rem;cursor:pointer;white-space:nowrap;letter-spacing:1px;transition:all .12s;}
#save-preset-btn:hover{background:var(--green);color:#000;}

/* beat flash */
#beat-flash{position:fixed;inset:0;pointer-events:none;z-index:999;background:rgba(255,107,0,0);transition:background .05s;}
#beat-flash.flash{background:rgba(255,107,0,.02);}

/* ══ LIVE MODE ══ */
.live-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.live-card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r);padding:14px;overflow:hidden;}
.live-card .card-title{margin-bottom:10px;}
.scene-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.scene-btn{min-height:52px;border-radius:10px;border:2px solid var(--border);background:var(--s2);cursor:pointer;font-family:var(--font-display);font-size:.5rem;font-weight:700;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:all .1s;}
.scene-btn:active{transform:scale(.94);}
.scene-btn.on{border-color:var(--green);background:var(--green-glow);color:var(--green);box-shadow:0 0 14px rgba(0,255,136,.3);}
.scene-btn .sn{font-size:.5rem;color:var(--muted);font-family:var(--font-mono);}
.flash-btn{min-height:44px;border-radius:10px;border:2px solid var(--yellow);background:rgba(255,221,0,.06);cursor:pointer;font-family:var(--font-display);font-size:.5rem;font-weight:700;letter-spacing:2px;color:var(--yellow);display:flex;align-items:center;justify-content:center;user-select:none;transition:all .06s;margin-bottom:4px;}
.flash-btn:active,.flash-btn.on{background:var(--yellow);color:#000;box-shadow:0 0 18px rgba(255,221,0,.5);}
.flash-btn.strobe-f{border-color:#fff;color:#fff;background:rgba(255,255,255,.06);}
.flash-btn.strobe-f:active,.flash-btn.strobe-f.on{background:#fff;color:#000;}
.master-row{display:flex;gap:8px;}
.master-sl{flex:1;display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--s2);}
.master-lbl{font-size:.55rem;letter-spacing:2px;color:var(--text);text-align:center;}
.master-val{font-size:.7rem;color:var(--blue);text-align:center;font-weight:bold;}

/* ══ CUE / CHASE ══ */
.cue-go-bar{display:flex;gap:8px;margin-bottom:10px;}
.cue-go-btn{flex:1;min-height:50px;border-radius:10px;border:2px solid var(--green);background:var(--green-glow);cursor:pointer;font-family:var(--font-display);font-size:.65rem;font-weight:700;letter-spacing:3px;color:var(--green);display:flex;align-items:center;justify-content:center;transition:all .08s;}
.cue-go-btn:active{background:var(--green);color:#000;box-shadow:0 0 20px rgba(0,255,136,.5);}
.cue-go-btn.back{border-color:var(--muted);background:transparent;color:var(--muted);}
.cues-page-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:10px;}
@media(max-width:820px){.cues-page-grid{grid-template-columns:1fr;}}
.list-scroll{max-height:52vh;overflow:auto;padding-right:4px;}
.list-scroll::-webkit-scrollbar{width:8px;}
.list-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:8px;}
.list-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.14);}
.cue-item{display:flex;align-items:center;gap:10px;padding:12px;border-radius:10px;border:1px solid var(--border);background:var(--s2);margin-bottom:6px;cursor:pointer;transition:all .12s;}
.cue-num{width:34px;text-align:center;font-family:var(--font-display);font-size:.75rem;color:var(--muted);font-weight:800;}
.cue-name{flex:1;font-size:.72rem;letter-spacing:.4px;}
.cue-meta{font-size:.55rem;color:var(--muted);margin-top:2px;}
.cue-del{padding:6px 10px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;font-size:.75rem;}
.cue-del:hover{border-color:var(--red);color:var(--red);}
.cue-item.active{border-color:var(--green);background:var(--green-glow);}
.cue-item.active .cue-num,.cue-item.active .cue-name{color:var(--green);}
.chase-item{display:flex;align-items:center;gap:10px;padding:12px;border-radius:10px;border:1px solid var(--border);background:var(--s2);margin-bottom:6px;}
.chase-item.running{border-color:var(--orange);background:var(--orange-glow);}
.chase-main{flex:1;min-width:0;}
.chase-name{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chase-meta{font-size:.55rem;color:var(--muted);margin-top:2px;}
.chase-btn{padding:8px 14px;border-radius:8px;border:1px solid var(--green);background:var(--green-glow);color:var(--green);font-size:.62rem;cursor:pointer;transition:all .12s;white-space:nowrap;}
.chase-btn:hover{background:var(--green);color:#000;}
.chase-btn.stop{border-color:var(--red);background:rgba(255,34,68,.1);color:var(--red);}
.chase-btn.stop:hover{background:var(--red);color:#fff;}
.empty-note{font-size:.62rem;color:var(--muted);padding:8px 0;}
.cue-go-btn.back:active{border-color:var(--orange);color:var(--orange);}
.cue-item{display:flex;align-items:center;gap:8px;padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--s2);margin-bottom:4px;cursor:pointer;transition:all .12s;}
.cue-item:hover{border-color:var(--border2);}
.cue-item.active{border-color:var(--green);background:var(--green-glow);}
.cue-num{width:28px;text-align:center;font-family:var(--font-display);font-size:.7rem;color:var(--muted);font-weight:700;}
.cue-item.active .cue-num{color:var(--green);}
.cue-name{flex:1;font-size:.7rem;}
.cue-item.active .cue-name{color:var(--green);}
.cue-del{padding:4px 8px;border-radius:4px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;font-size:.7rem;}
.cue-del:hover{border-color:var(--red);color:var(--red);}
.chase-item{display:flex;align-items:center;gap:8px;padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--s2);margin-bottom:4px;}
.chase-item.running{border-color:var(--orange);background:var(--orange-glow);}
.chase-name{flex:1;font-size:.7rem;}
.chase-btn{padding:6px 14px;border-radius:6px;border:1px solid var(--green);background:var(--green-glow);color:var(--green);font-size:.6rem;cursor:pointer;transition:all .12s;}
.chase-btn:hover{background:var(--green);color:#000;}
.chase-btn.stop{border-color:var(--red);background:rgba(255,34,68,.1);color:var(--red);}
.chase-btn.stop:hover{background:var(--red);color:#fff;}

/* ══ GROUPS ══ */
.group-item{display:flex;align-items:center;gap:8px;padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--s2);margin-bottom:4px;cursor:pointer;transition:all .12s;}
.group-item:hover{border-color:var(--purple);}
.group-name{flex:1;font-size:.7rem;color:var(--text);}
.group-del{padding:4px 8px;border-radius:4px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;font-size:.7rem;}
.group-del:hover{border-color:var(--red);color:var(--red);}

/* ══ VISUALIZER ══ */
#viz-canvas{width:100%;height:300px;border-radius:var(--r);border:1px solid var(--border2);background:#080810;display:block;}

/* ══ MODALS ══ */
#modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:500;align-items:center;justify-content:center;}
#modal.show{display:flex;}
.modal-box{background:var(--s1);border:1px solid var(--border2);border-radius:var(--r);padding:24px;width:360px;max-width:92vw;}
.modal-box h2{font-family:var(--font-display);letter-spacing:4px;font-size:1rem;color:var(--green);margin-bottom:16px;}
.port-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:7px;border:1px solid var(--border);background:var(--s2);cursor:pointer;margin-bottom:7px;transition:all .12s;}
.port-item:hover{border-color:var(--green);}
.port-dev{font-size:.75rem;color:var(--text);}
.port-desc{font-size:.6rem;color:var(--muted);}
.modal-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;}
.mbtn{padding:7px 18px;border-radius:7px;font-family:var(--font-mono);font-size:.65rem;cursor:pointer;border:1px solid var(--border);background:var(--s2);color:var(--muted);letter-spacing:1px;transition:all .12s;}
.mbtn.green{border-color:var(--green);color:var(--green);background:var(--green-glow);}
.mbtn.green:hover{background:var(--green);color:#000;}

/* ── FIXTURES TABLE ── */
#fx-table tbody tr{transition:background .15s;}
#fx-table tbody tr:hover{background:rgba(255,255,255,.02);}
#fx-table tbody td{padding:10px 10px;border-bottom:1px solid var(--border);font-size:.72rem;color:var(--text);vertical-align:top;}
#fx-table .fx-addr-cell{color:var(--green);font-family:var(--font-mono);font-weight:700;font-size:.8rem;}
#fx-table .fx-end-cell{color:var(--muted);font-family:var(--font-mono);font-size:.7rem;}
.fx-type-badge{display:inline-block;padding:3px 8px;border-radius:6px;font-family:var(--font-display);font-size:.45rem;font-weight:700;letter-spacing:2px;border:1px solid var(--border);background:var(--s2);}
.fx-type-badge.moving_head{border-color:var(--green);color:var(--green);}
.fx-type-badge.par_rgbw{border-color:var(--purple);color:var(--purple);}
.fx-type-badge.mira_dye{border-color:#00ffcc;color:#00ffcc;}
.fx-type-badge.led_bar{border-color:#cc88ff;color:#cc88ff;}
.fx-type-badge.laser_rgb{border-color:#ff4488;color:#ff4488;}
.fx-type-badge.fog{border-color:#888;color:#aaa;}
.fx-type-badge.wash{border-color:var(--blue);color:var(--blue);}
.fx-type-badge.par{border-color:var(--blue);color:var(--blue);}
.fx-type-badge.strobe{border-color:var(--orange);color:var(--orange);}
.fx-type-badge.laser{border-color:var(--red);color:var(--red);}
.fx-type-badge.generic{border-color:var(--muted);color:var(--muted);}
.fx-chmap{font-size:.55rem;font-family:var(--font-mono);line-height:1.8;max-width:320px;}
.fx-chmap .ch-row{display:inline-flex;align-items:center;margin:2px 3px;padding:2px 6px;border-radius:4px;background:var(--s2);border:1px solid var(--border);white-space:nowrap;}
.fx-chmap .ch-num{color:var(--green);margin-right:4px;font-weight:700;}
.fx-chmap .ch-name{color:var(--muted);}
.fx-action-btn{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;font-size:.65rem;display:inline-flex;align-items:center;justify-content:center;transition:all .12s;margin:0 2px;}
.fx-action-btn:hover{border-color:var(--green);color:var(--green);}
.fx-action-btn.del:hover{border-color:var(--red);color:var(--red);}
#fx-table .conflict-row td{background:rgba(255,34,68,.06);}
#fx-table .conflict-row .fx-addr-cell{color:var(--red);}

.move-pat-btn{padding:6px 10px;border-radius:6px;border:1px solid var(--border);background:var(--s2);color:var(--text);cursor:pointer;font-size:.6rem;font-family:var(--font-mono);transition:all .12s;}
.move-pat-btn:hover{border-color:var(--green);color:var(--green);}
.move-pat-btn.active{background:var(--green);color:var(--bg);border-color:var(--green);font-weight:700;}
.move-stop-btn{padding:6px 12px;border-radius:6px;border:1px solid var(--red);background:rgba(255,34,68,.12);color:var(--red);cursor:pointer;font-size:.58rem;font-family:var(--font-display);font-weight:700;letter-spacing:1px;transition:all .12s;}
.move-stop-btn:hover{background:rgba(255,34,68,.25);color:#fff;}
.move-stop-btn:active{transform:scale(.98);}

/* ══ SETTINGS PAGE ══ */
.settings-page .card-title{margin-bottom:12px;}
.settings-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.settings-row:last-child{margin-bottom:0;}
.settings-lbl{font-size:.7rem;color:var(--text);letter-spacing:1px;}
.settings-val{font-size:.65rem;color:var(--muted);}
.settings-toggle{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0;}
.settings-toggle input{opacity:0;width:0;height:0;}
.settings-toggle span{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--s3);border-radius:999px;border:1px solid var(--border);transition:.2s;}
.settings-toggle span::before{content:'';position:absolute;height:18px;width:18px;left:2px;bottom:2px;background:var(--text);border-radius:50%;transition:.2s;}
.settings-toggle input:checked+span{background:var(--green-glow);border-color:var(--green);}
.settings-toggle input:checked+span::before{transform:translateX(20px);background:var(--green);}
.settings-inp{width:180px;height:36px;background:var(--s2);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:0 10px;font-size:.7rem;}
.settings-msg{font-size:.65rem;color:var(--muted);}
.settings-msg.ok{color:var(--green);}
.settings-msg.err{color:var(--red);}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:10px 20px;background:var(--s2);border:1px solid var(--red);color:var(--red);border-radius:8px;font-size:.7rem;z-index:9999;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90%;}
.toast.show{opacity:1;}

/* ══ MUSIC DECKS ══ */
.badge{font-family:var(--font-mono);font-size:.52rem;letter-spacing:1px;padding:2px 7px;border-radius:4px;background:var(--s3);color:var(--muted);}
.mbtn.on{border-color:var(--orange);color:var(--orange);background:rgba(255,107,0,.1);}

/* Music page: TRAKTOR-style shell (library left, performance zone center) */
#page-music.page{
  max-width:100%;
  padding:8px 10px 14px;
  background:radial-gradient(ellipse 100% 60% at 50% -15%, rgba(0,170,255,.07), transparent 50%),
    linear-gradient(180deg,#0e0e14 0%,#0a0a0f 100%);
  box-sizing:border-box;
}
.music-dj-shell{
  display:grid;
  grid-template-columns:minmax(268px,340px) minmax(0,1fr);
  gap:14px;
  align-items:stretch;
  min-height:0;
}
.music-main{display:flex;flex-direction:column;gap:10px;min-width:0;flex:1;}
.music-performance{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  background:linear-gradient(180deg,#16161e 0%,#12131a 100%);
  border:1px solid #2a2a34;
  border-radius:12px;
  padding:12px 14px 14px;
  box-shadow:0 8px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);
}
.music-sidebar{
  background:linear-gradient(180deg,#16161c 0%,#0f1014 100%);
  border:1px solid #2a2a32;
  border-radius:10px;
  padding:12px 12px 14px;
  display:flex;
  flex-direction:column;
  gap:14px;
  max-height:calc(100vh - 96px);
  position:sticky;
  top:8px;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 4px 20px rgba(0,0,0,.25);
}
.music-sidebar-section{display:flex;flex-direction:column;gap:8px;min-height:0;}
.music-sidebar-title{
  font-family:var(--font-display);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:2px;
  color:#5fd9a8;
  margin:0;
  padding-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.music-recent-sub{font-weight:500;font-size:.5rem;color:var(--muted);letter-spacing:1px;}
.music-sidebar-hint{font-size:.56rem;color:var(--muted);line-height:1.5;margin:0 0 6px;opacity:.95;}
.music-sidebar-hint strong{color:var(--text);font-weight:700;}
.music-lib-card{
  padding:10px!important;
  background:#12121a!important;
  border:1px solid #2a2a34!important;
  border-radius:8px!important;
}
.music-pl-drop{
  border:2px dashed #3a3a48;
  border-radius:8px;
  padding:12px 10px;
  text-align:center;
  cursor:pointer;
  transition:border-color .2s,background .2s,box-shadow .2s;
  margin-bottom:8px;
  font-size:.62rem;
  line-height:1.35;
  color:#b8b8c8;
  letter-spacing:.5px;
  background:rgba(0,0,0,.2);
}
.music-pl-drop:hover{border-color:var(--green);background:rgba(0,255,136,.06);box-shadow:0 0 0 1px rgba(0,255,136,.15);}
.music-pl-list{display:flex;flex-direction:column;gap:6px;overflow-y:auto;max-height:min(240px,32vh);}
.music-pl-empty{font-size:.58rem;color:var(--dim);text-align:center;padding:10px 0;line-height:1.4;}
.music-pl-actions{display:flex;gap:8px;margin-top:10px;}
.music-pl-actions .mbtn{flex:1;height:34px;font-size:.54rem;border-radius:7px;}
.music-lib-card .card-title{font-size:.72rem;margin-bottom:9px!important;}
.music-lib-card .card-title .badge{font-size:.52rem;}
/* Library rows — larger type + drag */
.music-pl-row{
  display:flex;align-items:flex-start;gap:8px;padding:9px 10px;border-radius:8px;
  border:1px solid var(--border);background:var(--s2);cursor:grab;user-select:none;
  transition:border-color .12s,background .12s,box-shadow .12s,opacity .12s;
}
.music-pl-row:active{cursor:grabbing;}
.music-pl-row.is-active{border-color:var(--green);background:var(--green-glow);box-shadow:0 0 0 1px rgba(0,255,136,.2);}
.music-pl-row.is-dragging{opacity:.55;}
.music-pl-row .music-pl-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:4px;}
.music-pl-row .music-pl-text{flex:1;min-width:0;}
.music-pl-row .music-pl-title{font-size:.72rem;font-weight:600;line-height:1.25;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.music-pl-row.is-active .music-pl-title{color:var(--green);}
.music-pl-row .music-pl-meta{font-size:.6rem;line-height:1.35;color:var(--muted);margin-top:2px;}
.music-pl-rm{background:none!important;border:none!important;color:var(--dim)!important;cursor:pointer;font-size:.85rem!important;padding:4px 6px!important;flex-shrink:0;line-height:1;}
.music-pl-rm:hover{color:var(--red)!important;}
.music-recent-section{flex:1;min-height:0;border-top:1px solid rgba(255,255,255,.08);padding-top:12px;display:flex;flex-direction:column;gap:8px;}
.music-recent-list{display:flex;flex-direction:column;gap:5px;overflow-y:auto;max-height:min(300px,34vh);padding-right:2px;}
.music-recent-empty{font-size:.58rem;color:var(--dim);line-height:1.45;padding:10px 8px;text-align:center;border:1px dashed #3a3a48;border-radius:8px;background:rgba(0,0,0,.15);}
.music-recent-row{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 11px;border-radius:8px;
  border:1px solid #2e2e38;background:#14141c;cursor:grab;font:inherit;color:inherit;
  transition:border-color .12s,background .12s,box-shadow .12s,opacity .12s;
}
.music-recent-row:active{cursor:grabbing;}
.music-recent-row.is-dragging{opacity:.55;}
.music-recent-row:hover{border-color:rgba(0,255,136,.4);background:rgba(0,255,136,.06);box-shadow:0 0 0 1px rgba(0,255,136,.12);}
.music-recent-row:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.music-recent-swatch{width:22px;height:22px;border-radius:6px;flex-shrink:0;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);}
.music-recent-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.music-recent-title{font-size:.7rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.music-recent-meta{font-size:.58rem;line-height:1.3;color:var(--muted);}
.music-mixer-column{
  background:linear-gradient(180deg,#16161e 0%,#0c0c10 100%);
  border:1px solid #3a3a4a;
  border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 6px 28px rgba(0,0,0,.45);
  padding:4px;
  z-index:1;
}
.music-mixer-column .music-mixer-wrap{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:8px 6px 10px;
  margin:0;
  height:100%;
}
.music-mixer-wrap{
  background:linear-gradient(180deg,#1a1a24 0%,#12101a 50%,#0e0e14 100%);
  border:1px solid #303040;
  border-radius:10px;
  padding:12px 14px 14px;
  margin-bottom:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 20px rgba(0,0,0,.25);
}
.music-mixer-wrap #dj-mixer{margin-bottom:0;border:none;background:transparent;}
/* Mixer head: single clean column (tempo → now → actions) */
.music-mixer-column .dj-mixer-head{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
}
.music-mixer-column .dj-master-clock{align-self:center;}
.music-mixer-column .dj-now-playing-card{max-width:none;width:100%;box-sizing:border-box;}
.music-mixer-column .dj-mixer-head-actions{
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
}
.music-mixer-column .dj-mixer-head-actions .dj-quick-lights{justify-content:center;flex:1;min-width:0;}
.music-mixer-column .dj-master-vol-wrap{flex:0 0 auto;}
.music-mixer-column .dj-mixer-head{flex-shrink:0;}
/* Faders row, then full-width crossfader (TRAKTOR-style) */
.music-mixer-column .dj-mixer-channels{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-top:0;
  padding-top:12px;
  flex:0 1 auto;
  min-height:0;
  border-top:1px solid rgba(255,255,255,.08);
}
.music-mixer-column .dj-mixer-faders-row{
  display:flex;
  flex-direction:row;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding:0 2px 12px;
  box-sizing:border-box;
}
.music-mixer-column .dj-ch-group{
  display:flex;
  flex-direction:row;
  align-items:flex-end;
  gap:8px;
  flex:1;
  justify-content:center;
}
.music-mixer-column .dj-ch-group.dj-ch-left{justify-content:flex-end;}
.music-mixer-column .dj-ch-group.dj-ch-right{justify-content:flex-start;}
.music-mixer-column .dj-ch-strip{width:68px;min-width:60px;padding:8px 5px 10px;}
.music-mixer-column .dj-strip-fader{width:100px;}
.music-mixer-column .dj-ch-meter{height:96px;}
.music-mixer-column .dj-crossfader-bar{
  width:100%;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.1);
  box-sizing:border-box;
}
.music-mixer-column .dj-center-cross{
  width:100%;
  min-width:0;
  max-width:none;
  padding:0 4px 4px;
  justify-content:center;
  align-items:center;
}
.music-mixer-column .dj-center-cross .dj-xfade-wrap{width:100%;max-width:100%;}

/* DJ mixer console (TRAKTOR-inspired hub) */
.dj-mixer-console{display:flex;flex-direction:column;gap:10px;min-width:0;}
.dj-mixer-head{
  display:grid;
  grid-template-columns:minmax(88px,auto) minmax(0,1fr) minmax(200px,auto);
  gap:14px;
  align-items:center;
}
@media(max-width:900px){
  .dj-mixer-head{grid-template-columns:1fr;}
  .dj-mixer-head-actions{align-items:stretch!important;}
  .dj-mixer-head-actions .dj-quick-lights{justify-content:center;}
}
.dj-master-clock{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 12px;border-radius:8px;background:linear-gradient(180deg,#12121a,#0a0a0f);border:1px solid #2e2e38;min-width:96px;}
.dj-clock-label{font-family:var(--font-mono);font-size:.34rem;letter-spacing:2px;color:#8a8a9a;}
.dj-master-clock .dj-bpm-display{border:none;padding:0;}
.dj-master-clock .dj-bpm-val{font-size:1.35rem;color:#ff7a3a;text-shadow:0 0 20px rgba(255,122,58,.4);}
.dj-master-clock .dj-bpm-lbl{font-size:.36rem;opacity:.85;color:#8a8a9a;}
.dj-now-playing-card{
  min-width:0;
  padding:10px 12px 12px;
  border-radius:8px;
  background:linear-gradient(145deg,rgba(0,255,136,.06),rgba(0,0,0,.35));
  border:1px solid rgba(0,255,136,.22);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);
}
.dj-now-playing-card .dj-now-title{font-family:var(--font-mono);font-size:.38rem;letter-spacing:3px;color:var(--green);margin-bottom:4px;}
.dj-now-playing-card .dj-now-line{font-size:.62rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dj-now-playing-card .dj-now-meta{font-size:.46rem;color:#a9a9bc;margin-top:4px;line-height:1.35;}
.dj-now-dominant{font-size:.4rem;color:var(--orange);margin-top:6px;font-family:var(--font-mono);letter-spacing:.5px;}
.dj-mixer-head-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px;justify-content:center;}
.dj-mixer-head-actions .dj-quick-lights{flex-wrap:wrap;justify-content:flex-end;}
.dj-master-vol-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px;border-radius:8px;background:rgba(0,0,0,.35);border:1px solid #2e2e38;}
.dj-master-vol-wrap .dj-master-vol-lbl{font-size:.38rem;color:#8a8a9a;letter-spacing:2px;font-family:var(--font-mono);}
.dj-master-vol-wrap input[type=range]{width:120px;accent-color:var(--green);}
.dj-master-vol-pct{font-family:var(--font-mono);font-size:.44rem;color:var(--green);}

.dj-mixer-channels{
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-end;
  justify-content:center;
  gap:18px;
  min-height:0;
  padding-top:12px;
  margin-top:4px;
  border-top:1px solid rgba(255,255,255,.06);
}
.dj-ch-group{display:flex;gap:10px;align-items:flex-end;}
.dj-ch-group.dj-ch-left{justify-content:flex-end;}
.dj-ch-group.dj-ch-right{justify-content:flex-start;}
.dj-ch-strip{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  width:76px;min-width:70px;
  padding:8px 6px 10px;
  border-radius:8px;
  background:linear-gradient(180deg,#12121c,#0b0b12);
  border:1px solid #2a2a34;
  transition:box-shadow .15s,border-color .15s;
}
.dj-ch-strip.is-playing{border-color:rgba(0,255,136,.25);}
.dj-ch-strip.is-dominant{box-shadow:0 0 0 2px rgba(0,255,136,.35),0 0 20px rgba(0,255,136,.12);}
.dj-ch-strip.dj-strip-hidden{display:none!important;}
.dj-ch-strip-top{width:100%;display:flex;justify-content:center;}
.dj-ch-let{
  width:26px;height:26px;border-radius:6px;font-family:var(--font-display);font-size:.7rem;font-weight:900;
  display:flex;align-items:center;justify-content:center;
}
.dk-strip-A .dj-ch-let{background:rgba(0,170,255,.15);border:1px solid rgba(0,170,255,.45);color:#00aaff;}
.dk-strip-B .dj-ch-let{background:rgba(255,107,0,.15);border:1px solid rgba(255,107,0,.45);color:#ff6b00;}
.dk-strip-C .dj-ch-let{background:rgba(0,255,136,.12);border:1px solid rgba(0,255,136,.35);color:#00ff88;}
.dk-strip-D .dj-ch-let{background:rgba(187,68,255,.15);border:1px solid rgba(187,68,255,.45);color:#bb44ff;}
.dj-ch-name{font-size:.4rem;color:var(--muted);text-align:center;width:100%;line-height:1.2;max-height:2.4em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.dj-ch-fader-row{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;margin-top:4px;}
.dj-ch-meter{width:8px;height:112px;border-radius:4px;background:#050508;border:1px solid rgba(255,255,255,.15);position:relative;overflow:hidden;}
.dj-ch-meter-fill{
  position:absolute;bottom:0;left:0;right:0;height:0%;
  background:linear-gradient(180deg,#00ff88,#00aaff);
  border-radius:3px;
  transition:height .06s ease-out;
}
.dj-ch-strip.is-playing .dj-ch-meter-fill{height:55%;animation:dj-vu-breathe .45s ease-in-out infinite;}
.dj-ch-strip.is-dominant.is-playing .dj-ch-meter-fill{height:72%;animation:dj-vu-breathe .38s ease-in-out infinite;}
@keyframes dj-vu-breathe{
  0%,100%{filter:brightness(1);opacity:.92;}
  50%{filter:brightness(1.15);opacity:1;}
}
.dj-strip-fader{
  width:112px;height:28px;border-radius:4px;cursor:pointer;
  transform:rotate(-90deg);
  transform-origin:center center;
  margin:0;
  accent-color:var(--green);
}
.dk-strip-A .dj-strip-fader{accent-color:#00aaff;}
.dk-strip-B .dj-strip-fader{accent-color:#ff6b00;}
.dk-strip-C .dj-strip-fader{accent-color:#00ff88;}
.dk-strip-D .dj-strip-fader{accent-color:#bb44ff;}
.dj-center-cross{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:min(100%,240px);flex:0 0 auto;padding:0 8px 4px;}
.dj-center-cross .dj-xfade-wrap{width:100%;max-width:280px;}
.dj-xfade-snap{display:flex;justify-content:center;gap:6px;margin-top:8px;}
.dj-xfade-snap-btn{
  font-family:var(--font-mono);font-size:.36rem;letter-spacing:1px;
  padding:4px 10px;border-radius:6px;border:1px solid var(--border);
  background:var(--s3);color:var(--muted);cursor:pointer;transition:all .12s;
}
.dj-xfade-snap-btn:hover{border-color:var(--green);color:var(--green);}
@media(max-width:900px){
  .dj-mixer-channels{flex-wrap:wrap;}
  .music-mixer-column .dj-mixer-channels{flex-wrap:nowrap;}
  /* Narrow mixer: allow fader pairs to wrap; crossfader stays full width below */
  .music-mixer-column .dj-mixer-faders-row{flex-wrap:wrap;justify-content:center;gap:10px;}
  .music-mixer-column .dj-ch-group{min-width:min(100%,140px);}
}
.music-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;}
.music-bottom-grid > .live-card{
  background:#14141c!important;
  border:1px solid #2a2a34!important;
  border-radius:8px!important;
}
@media(max-width:1180px){.music-bottom-grid{grid-template-columns:1fr;}}
@media(max-width:1100px){
  .music-dj-shell{grid-template-columns:1fr;}
  .music-sidebar{position:relative;max-height:none;}
}

/* DJ top bar */
#dj-top-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--s1);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;flex-wrap:wrap;}
.music-performance #dj-top-bar{
  margin-bottom:0;
  background:#1a1a22;
  border:1px solid #2e2e38;
  border-radius:8px;
  padding:10px 14px;
  align-items:center;
  font-size:.56rem;
}
.dj-deck-count{display:flex;gap:2px;background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:2px;}
.dj-count-btn{padding:5px 12px;border-radius:5px;border:none;background:transparent;color:var(--muted);font-family:var(--font-mono);font-size:.56rem;letter-spacing:1px;cursor:pointer;transition:all .12s;}
.dj-count-btn.active{background:var(--border2);color:var(--text);}
.dj-count-btn:hover:not(.active){color:var(--text);}

/* Master record */
.dj-master-rec{display:flex;align-items:center;gap:6px;}
#master-rec-btn{padding:0 10px;height:28px;border-radius:6px;background:rgba(255,34,68,.1);border:1px solid var(--red);color:var(--red);font-family:var(--font-mono);font-size:.46rem;letter-spacing:1px;cursor:pointer;transition:all .12s;}
#master-rec-btn.recording{background:var(--red);color:#fff;animation:rec-pulse 1s ease-in-out infinite;}
@keyframes rec-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,34,68,0);}50%{box-shadow:0 0 0 6px rgba(255,34,68,.3);}}
#master-rec-time{font-family:var(--font-mono);font-size:.52rem;color:var(--red);min-width:36px;}

/* DJ Mixer strip (legacy flex layout — console uses .dj-mixer-console) */
#dj-mixer.dj-mixer-console{margin-bottom:0;}
.dj-now-panel{flex:1;min-width:160px;max-width:280px;padding:4px 10px;border-left:1px solid var(--border);border-right:1px solid var(--border);}
.dj-now-title{font-family:var(--font-mono);font-size:.38rem;letter-spacing:2px;color:var(--muted);}
.dj-now-line{font-size:.58rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.dj-now-meta{font-size:.46rem;color:var(--muted);margin-top:2px;line-height:1.3;}
.dj-quick-lights{display:flex;gap:4px;align-items:center;flex-shrink:0;}
.dj-qbtn{padding:4px 8px;height:26px;border-radius:6px;background:var(--s3);border:1px solid var(--border);color:var(--muted);font-family:var(--font-mono);font-size:.42rem;letter-spacing:1px;cursor:pointer;transition:all .12s;}
.dj-qbtn:hover{border-color:var(--green);color:var(--green);}
#dj-show-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 10px;background:var(--s2);border:1px solid var(--border2);border-radius:8px;margin-bottom:8px;}
.dj-show-lbl{font-family:var(--font-mono);font-size:.42rem;color:var(--muted);letter-spacing:2px;}
.dj-xfade-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:4px;}
.dj-xfade-labels{display:flex;justify-content:space-between;width:100%;padding:0 2px;}
.dj-xfade-lbl{font-family:var(--font-mono);font-size:.42rem;color:var(--muted);}
#dj-xfade{width:100%;accent-color:#aa66ff;height:10px;}
.dj-master-vol{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:80px;}
.dj-master-vol-lbl{font-size:.42rem;color:var(--muted);letter-spacing:1px;font-family:var(--font-mono);}
.dj-bpm-display{display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 10px;border-left:1px solid var(--border);border-right:1px solid var(--border);}
.dj-bpm-val{font-family:var(--font-display);font-size:1.1rem;color:var(--orange);letter-spacing:2px;line-height:1;}
.dj-bpm-lbl{font-size:.38rem;color:var(--muted);letter-spacing:2px;}

/* Deck panels */
.dk-panel{
  background:var(--s1);border:1px solid var(--border);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s,outline .12s;
}
.dk-panel.dk-drop-target-hover{
  outline:2px solid var(--green);outline-offset:2px;
  box-shadow:0 0 0 3px rgba(0,255,136,.2),0 8px 28px rgba(0,0,0,.35);
  border-color:rgba(0,255,136,.45);
}
.dk-A.dk-active{box-shadow:0 0 0 2px rgba(0,170,255,.5);}
.dk-B.dk-active{box-shadow:0 0 0 2px rgba(255,107,0,.5);}
.dk-C.dk-active{box-shadow:0 0 0 2px rgba(0,255,136,.4);}
.dk-D.dk-active{box-shadow:0 0 0 2px rgba(187,68,255,.5);}
.dk-hdr{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--s2);border-bottom:1px solid var(--border);}
.dk-id{width:22px;height:22px;border-radius:6px;font-family:var(--font-display);font-size:.7rem;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.dk-A .dk-id{background:rgba(0,170,255,.15);border:1px solid rgba(0,170,255,.4);color:#00aaff;}
.dk-B .dk-id{background:rgba(255,107,0,.15);border:1px solid rgba(255,107,0,.4);color:#ff6b00;}
.dk-C .dk-id{background:rgba(0,255,136,.12);border:1px solid rgba(0,255,136,.35);color:#00ff88;}
.dk-D .dk-id{background:rgba(187,68,255,.15);border:1px solid rgba(187,68,255,.4);color:#bb44ff;}
.dk-info{flex:1;min-width:0;}
.dk-track-name{font-size:.76rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dk-meta-row{display:flex;gap:8px;align-items:center;margin-top:4px;flex-wrap:wrap;}
.dk-bpm{font-family:var(--font-display);font-size:.62rem;color:var(--orange);}
.dk-key{font-family:var(--font-mono);font-size:.54rem;color:#c8b8ff;letter-spacing:.5px;min-width:3.4em;}
.dk-cue-hint{font-family:var(--font-mono);font-size:.52rem;color:#ddcc66;letter-spacing:.5px;}
.dk-time{font-size:.58rem;color:var(--muted);}
.dk-dj-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
  padding:8px 9px;background:#101018;border-top:1px solid #2a2a34;
}
.dk-sync-btn{min-width:52px;font-size:.52rem!important;padding:0 9px!important;height:30px!important;}
.dk-field{display:flex;align-items:center;gap:6px;font-size:.52rem;color:var(--muted);}
.dk-field input[type=range]{width:88px;height:5px;cursor:pointer;accent-color:var(--green);}
.dk-mini-lbl{font-family:var(--font-mono);letter-spacing:.5px;min-width:2.4em;font-size:.5rem;}
.dk-rate-val,.dk-gain-val{font-family:var(--font-mono);font-size:.5rem;color:var(--green);min-width:2.6em;}
.dk-loop-btns{display:flex;flex-wrap:wrap;gap:4px;align-items:center;}
.dk-loop-btn{
  padding:4px 7px;min-width:28px;border-radius:5px;border:1px solid #3a3a48;background:#16161e;
  color:var(--muted);font-family:var(--font-mono);font-size:.48rem;cursor:pointer;line-height:1.2;
}
.dk-loop-btn:hover{border-color:var(--green);color:var(--green);}
.dk-loop-btn.is-active{border-color:var(--orange);color:var(--orange);background:rgba(255,107,0,.12);}
.dk-lights{display:flex;gap:3px;align-items:center;min-height:16px;flex-shrink:0;}
.dk-wave-wrap{background:#07070f;position:relative;}
.dk-A .dk-wave-wrap{border-top:2px solid rgba(0,170,255,.4);}
.dk-B .dk-wave-wrap{border-top:2px solid rgba(255,107,0,.4);}
.dk-C .dk-wave-wrap{border-top:2px solid rgba(0,255,136,.3);}
.dk-D .dk-wave-wrap{border-top:2px solid rgba(187,68,255,.4);}
.dk-transport{display:flex;align-items:center;gap:4px;padding:5px 7px;background:var(--s2);border-top:1px solid var(--border);}
.dk-play-btn{width:36px;height:36px;border-radius:50%;background:rgba(0,255,136,.08);border:2px solid var(--green);color:var(--green);font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;flex-shrink:0;}
.dk-play-btn:hover{background:rgba(0,255,136,.2);}
.dk-cue-btn{padding:0 9px;height:30px;border-radius:6px;background:rgba(0,170,255,.08);border:1px solid rgba(0,170,255,.4);color:#00aaff;font-family:var(--font-mono);font-size:.54rem;letter-spacing:1px;cursor:pointer;transition:all .12s;flex-shrink:0;}
.dk-cue-btn:active{background:#00aaff;color:#000;}
.dk-tbtn{padding:0 8px;height:30px;border-radius:6px;background:var(--s3);border:1px solid var(--border);color:var(--muted);font-family:var(--font-mono);font-size:.52rem;cursor:pointer;transition:all .12s;flex-shrink:0;white-space:nowrap;}
.dk-tbtn:hover{border-color:var(--border2);color:var(--text);}
.dk-tbtn.on{border-color:var(--green);color:var(--green);background:var(--green-glow);}
.dk-tbtn.rec{font-size:.44rem;}
.dk-tbtn.rec.on{border-color:var(--red);color:var(--red);background:rgba(255,34,68,.12);}
.dk-dropzone{height:30px;border:1px dashed var(--border2);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.52rem;color:var(--dim);cursor:pointer;transition:all .15s;padding:0 8px;text-align:center;white-space:nowrap;}
.dk-dropzone:hover{border-color:var(--green);color:var(--green);background:var(--green-glow);}
.dk-vol-wrap{display:flex;align-items:center;gap:3px;flex:1;min-width:50px;}
.dk-vol-lbl{font-size:.48rem;color:var(--dim);letter-spacing:1px;flex-shrink:0;}
.dk-vol-wrap input[type=range]{height:4px;cursor:pointer;}
.music-performance #decks-grid{margin-top:0;}

/* TRAKTOR: four decks around a center mixer column */
.music-deck-mixer-arena,
#decks-grid.music-deck-mixer-arena{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(252px,380px) minmax(0,1fr);
  grid-template-rows:minmax(200px,auto) minmax(200px,auto);
  gap:14px;
  align-items:stretch;
  min-height:0;
}
.music-deck-mixer-arena #dk-A{grid-column:1;grid-row:1;}
.music-deck-mixer-arena #dk-B{grid-column:3;grid-row:1;}
.music-deck-mixer-arena #dk-C{grid-column:1;grid-row:2;}
.music-deck-mixer-arena #dk-D{grid-column:3;grid-row:2;}
.music-deck-mixer-arena .music-mixer-column{
  grid-column:2;
  grid-row:1 / span 2;
  display:flex;
  flex-direction:column;
  min-height:0;
  min-width:0;
}
.music-deck-mixer-arena .music-mixer-column .music-mixer-wrap{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:auto;
}
.music-deck-mixer-arena .music-mixer-column .dj-mixer-console{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.music-deck-mixer-arena .music-mixer-column .dj-mixer-channels{
  flex:1 1 auto;
  min-height:0;
  justify-content:flex-end;
}

/* 2 decks: A | mixer | B (one row) */
.music-deck-mixer-arena.layout-2{
  grid-template-columns:minmax(0,1fr) minmax(240px,360px) minmax(0,1fr);
  grid-template-rows:auto;
}
.music-deck-mixer-arena.layout-2 #dk-C,
.music-deck-mixer-arena.layout-2 #dk-D{display:none!important;}
.music-deck-mixer-arena.layout-2 #dk-A{grid-column:1;grid-row:1;}
.music-deck-mixer-arena.layout-2 #dk-B{grid-column:3;grid-row:1;}
.music-deck-mixer-arena.layout-2 .music-mixer-column{grid-column:2;grid-row:1;}

/* 4 decks: 2×2 */
.music-deck-mixer-arena.layout-4{
  grid-template-columns:minmax(0,1fr) minmax(260px,400px) minmax(0,1fr);
  grid-template-rows:minmax(200px,auto) minmax(200px,auto);
}
.music-deck-mixer-arena.layout-4 #dk-A{grid-column:1;grid-row:1;}
.music-deck-mixer-arena.layout-4 #dk-B{grid-column:3;grid-row:1;}
.music-deck-mixer-arena.layout-4 #dk-C{grid-column:1;grid-row:2;}
.music-deck-mixer-arena.layout-4 #dk-D{grid-column:3;grid-row:2;}
.music-deck-mixer-arena.layout-4 .music-mixer-column{grid-column:2;grid-row:1 / span 2;}

/* 1 deck: track | mixer */
.music-deck-mixer-arena.layout-1{
  grid-template-columns:minmax(0,1fr) minmax(220px,320px);
  grid-template-rows:auto;
}
.music-deck-mixer-arena.layout-1 #dk-B,
.music-deck-mixer-arena.layout-1 #dk-C,
.music-deck-mixer-arena.layout-1 #dk-D{display:none!important;}
.music-deck-mixer-arena.layout-1 #dk-A{grid-column:1;grid-row:1;}
.music-deck-mixer-arena.layout-1 .music-mixer-column{grid-column:2;grid-row:1;}

@media(max-width:1024px){
  .music-deck-mixer-arena.layout-2{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .music-deck-mixer-arena.layout-2 #dk-A{order:1;width:100%;}
  .music-deck-mixer-arena.layout-2 .music-mixer-column{order:2;width:100%;max-height:min(65vh,480px);}
  .music-deck-mixer-arena.layout-2 #dk-B{order:3;width:100%;}

  .music-deck-mixer-arena.layout-4{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .music-deck-mixer-arena.layout-4 #dk-A{order:1;width:100%;}
  .music-deck-mixer-arena.layout-4 #dk-B{order:2;width:100%;}
  .music-deck-mixer-arena.layout-4 .music-mixer-column{order:3;width:100%;max-height:min(65vh,520px);}
  .music-deck-mixer-arena.layout-4 #dk-C{order:4;width:100%;}
  .music-deck-mixer-arena.layout-4 #dk-D{order:5;width:100%;}

  .music-deck-mixer-arena.layout-1{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .music-deck-mixer-arena.layout-1 #dk-A{order:1;width:100%;}
  .music-deck-mixer-arena.layout-1 .music-mixer-column{order:2;width:100%;}
}

/* Decks: TRAKTOR-style deck plate */
.music-performance .dk-panel{
  display:flex;
  flex-direction:column;
  min-height:0;
  background:linear-gradient(180deg,#18181f 0%,#12121a 100%);
  border:1px solid #2e2e38;
  border-radius:8px;
  box-shadow:0 2px 12px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04);
}
.music-performance .dk-hdr{background:#1c1c26;border-bottom:1px solid #2a2a34;flex-shrink:0;}
.music-performance .dk-wave-wrap{flex:1 1 auto;min-height:104px;}
.music-performance .dk-play-btn{width:40px;height:40px;font-size:1rem;}
.music-performance .dk-transport{background:#16161e;border-top:1px solid #2a2a34;flex-shrink:0;}

/* ══ AI TRAINING LAB (dedicated tab) ══ */
.ai-train-page{max-width:1100px;margin:0 auto;padding:12px 14px 28px;}
.ai-train-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border);}
.ai-train-title{font-family:var(--font-display);font-size:.95rem;font-weight:800;letter-spacing:3px;color:var(--green);margin:0 0 6px;}
.ai-train-sub{font-size:.52rem;color:var(--muted);line-height:1.5;max-width:52em;margin:0;}
.ai-train-badge{font-size:.42rem;padding:4px 10px;border-radius:6px;background:var(--s3);color:var(--muted);letter-spacing:1px;white-space:nowrap;}
.ai-train-steps{margin:0 0 10px;padding-left:1.2em;font-size:.5rem;color:var(--text);line-height:1.55;max-width:56em;}
.ai-train-steps li{margin-bottom:5px;}
.ai-train-steps code{font-size:.46rem;background:var(--s2);padding:1px 5px;border-radius:4px;}
.ai-train-audio-hint{font-size:.46rem;color:var(--orange);margin:0 0 16px;padding:8px 12px;background:rgba(255,107,0,.08);border:1px solid rgba(255,107,0,.25);border-radius:8px;}
.ai-train-jump{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px;padding:12px 14px;background:var(--s2);border:1px solid var(--border);border-radius:10px;}
.ai-train-jump-btn{min-height:38px;padding:0 16px;font-family:var(--font-display);font-size:.5rem;font-weight:700;letter-spacing:1.5px;border-radius:8px;border:1px solid var(--green);background:var(--green-glow);color:var(--green);cursor:pointer;}
.ai-train-jump-btn:hover{filter:brightness(1.08);}
.ai-train-jump-note{font-size:.46rem;color:var(--muted);max-width:36em;line-height:1.4;}
.ai-train-feedback{min-height:2.2em;margin-bottom:12px;padding:10px 12px;font-size:.5rem;line-height:1.45;border-radius:8px;border:1px solid var(--border);background:var(--s2);color:var(--text);}
.ai-train-feedback:empty{display:none;}
.ai-train-track-pick{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border);}
.ai-train-track-pick .ai-train-select-lg{width:100%;max-width:560px;}
.ai-train-panel{border:1px solid var(--border2);border-radius:12px;padding:14px;background:linear-gradient(165deg,rgba(0,255,136,.06) 0%,var(--s1) 38%);}
.ai-train-status{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin-bottom:14px;padding:12px 14px;background:var(--s2);border:1px solid var(--border);border-radius:10px;}
.ai-train-playhead-block{display:flex;flex-direction:column;gap:4px;}
.ai-train-label{font-size:.4rem;letter-spacing:2px;color:var(--muted);}
.ai-train-playhead{font-family:var(--font-mono);font-size:.85rem;font-weight:700;color:var(--green);min-width:8em;}
.ai-train-meta{flex:1;min-width:200px;display:flex;flex-direction:column;gap:4px;justify-content:center;}
.ai-train-track-line{font-size:.5rem;color:var(--text);line-height:1.35;}
.ai-train-stats{font-size:.46rem;color:var(--muted);}
.ai-train-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;position:relative;z-index:2;}
.ai-train-tbtn{min-height:36px;padding:0 14px;font-family:var(--font-display);font-size:.48rem;font-weight:700;letter-spacing:1.5px;border-radius:8px;border:1px solid var(--border);background:var(--s2);color:var(--text);cursor:pointer;transition:background .15s,border-color .15s;}
.ai-train-tbtn:hover{border-color:var(--green);background:var(--s3);}
.ai-train-tbtn.primary{border-color:var(--green);background:var(--green-glow);color:var(--green);}
.ai-train-tbtn.danger{border-color:rgba(255,68,102,.5);color:var(--red);}
.ai-train-tbtn.danger:hover{border-color:var(--red);background:rgba(255,34,68,.12);}
.ai-train-tbtn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none;}
.ai-train-section{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border);}
.ai-train-section:last-of-type{border-bottom:none;}
.ai-train-h2{font-family:var(--font-display);font-size:.58rem;font-weight:700;letter-spacing:2px;color:var(--text);margin:0 0 8px;}
.ai-train-h2-hint{font-weight:500;font-size:.46rem;color:var(--muted);letter-spacing:1px;}
.ai-train-mini{font-size:.44rem;color:var(--dim);margin:-4px 0 10px;line-height:1.45;}
.ai-train-row-big{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;margin-bottom:12px;}
.ai-train-hit{min-height:52px;padding:0 20px;font-family:var(--font-display);font-size:.58rem;font-weight:800;letter-spacing:2px;border-radius:10px;border:2px solid var(--border);cursor:pointer;transition:transform .08s,box-shadow .15s;}
.ai-train-hit:active{transform:scale(0.98);}
.ai-train-hit.drop{flex:1;min-width:140px;border-color:var(--orange);color:var(--orange);background:rgba(255,107,0,.1);}
.ai-train-hit.drop:hover{box-shadow:0 0 0 2px rgba(255,107,0,.25);}
.ai-train-hit.pal{min-width:160px;border-color:var(--green);color:var(--green);background:var(--green-glow);}
.ai-train-hit.strobe{min-width:120px;border-color:var(--blue);color:var(--blue);background:rgba(0,170,255,.1);}
.ai-train-hit.addspan{align-self:flex-end;border-color:var(--green);color:var(--green);background:var(--green-glow);min-height:44px;margin-top:22px;}
.ai-train-pal-wrap{flex:2;min-width:240px;display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;}
.ai-train-pal-wrap .ai-train-lbl{width:100%;}
.ai-train-select-lg{flex:1;min-width:160px;height:40px;border-radius:8px;border:1px solid var(--border);background:var(--s1);color:var(--text);font-size:.52rem;padding:0 10px;}
.ai-train-strobe-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:4px;}
.ai-train-hz-presets{display:flex;flex-wrap:wrap;gap:6px;}
.ai-train-chip{min-width:44px;height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--border);background:var(--s2);color:var(--text);font-family:var(--font-mono);font-size:.52rem;cursor:pointer;}
.ai-train-chip:hover{border-color:var(--blue);color:var(--blue);}
.ai-train-num{width:72px;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--s1);color:var(--orange);font-family:var(--font-mono);font-size:.54rem;text-align:center;}
.ai-train-num.wide{width:100px;}
.ai-train-lbl{display:block;font-size:.4rem;letter-spacing:1.5px;color:var(--muted);margin-bottom:4px;}
.ai-train-seg-types{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.ai-train-type{min-height:34px;padding:0 12px;font-size:.44rem;font-weight:700;letter-spacing:1px;border-radius:8px;border:1px solid var(--border);background:var(--s2);color:var(--muted);cursor:pointer;}
.ai-train-type:hover{border-color:var(--text);color:var(--text);}
.ai-train-type.on{border-color:var(--green);color:var(--green);background:var(--green-glow);}
.ai-train-span-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;}
.ai-train-field{display:flex;flex-direction:column;min-width:120px;}
.ai-train-field.grow{flex:1;min-width:160px;}
.ai-train-inline{display:flex;gap:6px;align-items:center;}
.ai-train-snap{min-width:40px;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--s2);color:var(--text);cursor:pointer;font-size:.55rem;}
.ai-train-snap:hover{border-color:var(--green);color:var(--green);}
.ai-train-list-wrap{border:1px solid var(--border);border-radius:10px;background:var(--s1);max-height:220px;overflow-y:auto;}
.ai-train-list{margin:0;padding:0;list-style:none;font-size:.48rem;}
.ai-train-list .training-li,.ai-train-list li{padding:8px 12px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:8px;color:var(--text);}
.ai-train-list li:last-child{border-bottom:none;}
.ai-train-list .training-li time{font-family:var(--font-mono);color:var(--orange);flex-shrink:0;min-width:3.2em;}
.ai-train-list .training-li .desc{flex:1;min-width:0;word-break:break-word;color:var(--muted);}
.training-li-del{flex-shrink:0;padding:2px 8px;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--dim);cursor:pointer;font-size:.44rem;line-height:1.2;}
.training-li-del:hover{border-color:var(--red);color:var(--red);}
.ai-train-raw{margin-top:10px;border:1px solid var(--border);border-radius:8px;padding:8px;background:var(--s2);}
.ai-train-raw summary{cursor:pointer;font-size:.44rem;color:var(--muted);padding:4px;}
.ai-train-dump{margin:8px 0 0;font-size:.38rem;max-height:120px;overflow:auto;background:var(--s1);padding:8px;border-radius:6px;white-space:pre-wrap;word-break:break-all;border:1px solid var(--border);}
.ai-train-timeline-section{margin-bottom:14px;}
.ai-train-timeline-wrap{width:100%;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:#0d1218;cursor:crosshair;}
#ai-train-timeline{display:block;width:100%;height:112px;touch-action:none;}
.ai-train-legend-drop{color:var(--orange);font-weight:700;}
.ai-train-legend-pal{color:var(--blue);font-weight:700;}
.ai-train-legend-str{color:#cc44ff;font-weight:700;}
.ai-train-docs{margin:12px 0 14px;border:1px solid var(--border);border-radius:10px;background:var(--s2);padding:0;}
.ai-train-docs summary{cursor:pointer;padding:10px 12px;font-size:.5rem;font-weight:600;letter-spacing:.5px;color:var(--muted);list-style:none;}
.ai-train-docs summary::-webkit-details-marker{display:none;}
.ai-train-docs-body{padding:0 12px 12px;font-size:.46rem;color:var(--text);line-height:1.55;}
.ai-train-docs-body p{margin:0 0 8px;}
.ai-train-ref-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
@media(max-width:900px){.ai-train-ref-grid{grid-template-columns:1fr;}}
.ai-train-ref-card{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--s2);}
.ai-train-ref-h{margin:0 0 6px;font-size:.52rem;font-weight:700;letter-spacing:1px;color:var(--green);}
.ai-train-ref-note{font-size:.42rem;color:var(--muted);line-height:1.45;margin:0 0 8px;}
.ai-train-move-table{width:100%;border-collapse:collapse;font-size:.42rem;}
.ai-train-move-table th,.ai-train-move-table td{padding:5px 6px;border-bottom:1px solid var(--border);text-align:left;}
.ai-train-move-table th{color:var(--muted);font-weight:600;letter-spacing:.5px;}
.ai-train-move-table code{font-size:.4rem;background:var(--s1);padding:1px 4px;border-radius:3px;color:var(--orange);}
.ai-train-palette-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;max-height:220px;overflow-y:auto;}
.ai-train-pal-card{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;border:1px solid var(--border);background:var(--s1);}
.ai-train-pal-swatch{width:40px;height:28px;border-radius:6px;flex-shrink:0;border:1px solid rgba(255,255,255,.15);}
.ai-train-pal-meta{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ai-train-pal-meta code{font-size:.38rem;color:var(--green);}
.ai-train-pal-meta span{font-size:.4rem;color:var(--muted);}

.settings-audit-table{width:100%;border-collapse:collapse;font-size:.58rem;}
.settings-audit-table th,.settings-audit-table td{padding:6px 10px;text-align:left;border-bottom:1px solid var(--border);}
.settings-audit-table th{position:sticky;top:0;background:var(--s2);color:var(--muted);font-weight:600;letter-spacing:.5px;z-index:1;}
.settings-audit-table td{color:var(--text);font-family:var(--font-mono,monospace);font-size:.52rem;}
.settings-audit-table tbody tr:hover td{background:rgba(0,255,136,.04);}