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;
gap:0;
padding:0;
height:48px;
background:linear-gradient(180deg,#0e0e16 0%,#0a0a12 100%);
border-bottom:1px solid rgba(255,255,255,.06);
position:sticky;
top:0;
z-index:200;
box-shadow:0 1px 12px rgba(0,0,0,.5);
}
.logo{
display:flex;
align-items:center;
gap:8px;
padding:0 14px;
flex-shrink:0;
height:100%;
border-right:1px solid rgba(255,255,255,.05);
}
.logo-mark{width:24px;height:24px;border-radius:6px;object-fit:contain;object-position:center;flex-shrink:0;}
.logo-wordmark{height:16px;width:auto;max-width:min(130px,18vw);object-fit:contain;object-position:left center;opacity:.85;}
#topbar-right{
display:flex;
align-items:center;
justify-content:flex-end;
gap:6px;
min-width:0;
flex-shrink:0;
padding:0 12px;
height:100%;
border-left:1px solid rgba(255,255,255,.05);
}
button.pill{
font:inherit;
line-height:inherit;
appearance:none;
-webkit-appearance:none;
}
.pill{
display:flex;
align-items:center;
justify-content:center;
gap:5px;
height:30px;
padding:0 12px;
border-radius:6px;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.03);
font-family:var(--font-mono);
font-size:.58rem;
cursor:pointer;
color:var(--muted);
letter-spacing:.8px;
transition:all .15s;
white-space:nowrap;
}
.pill:hover{background:rgba(255,255,255,.06);color:var(--text);}
.pill.active,.pill:active{border-color:var(--green);color:var(--green);background:rgba(0,255,136,.06);}
.topbar-info{cursor:default;color:var(--green);border-color:rgba(0,255,136,.15);background:rgba(0,255,136,.04);}
.topbar-info:hover{background:rgba(0,255,136,.04);color:var(--green);}
.topbar-info:active{border-color:rgba(0,255,136,.15);color:var(--green);background:rgba(0,255,136,.04);}
.topbar-info .info-sep{color:rgba(255,255,255,.15);margin:0 2px;}
.topbar-action-btn{
min-width:auto;
padding:0 10px;
font-size:.52rem;
letter-spacing:.8px;
text-align:center;
}
.topbar-icon-btn{
min-width:30px;
padding:0;
font-size:.68rem;
letter-spacing:0;
}
#network-pill{
padding:0 10px;
justify-content:center;
font-size:.52rem;
}
#conn-pill{min-width:auto;}
.pill .dot{width:5px;height:5px;border-radius:50%;background:var(--muted);flex-shrink:0;}
.pill.online{border-color:rgba(0,255,136,.2);color:var(--green);}
.pill.online .dot{background:var(--green);box-shadow:0 0 6px var(--green);animation:blink 1.4s infinite;}
button.pill.topbar-logout{
border:1px solid rgba(255,255,255,.06);
padding:0 10px;
font-size:.5rem;
color:var(--muted);
}
button.pill.topbar-logout:hover{color:var(--red);border-color:rgba(255,34,68,.3);background:rgba(255,34,68,.05);}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
#blackout-btn{
height:30px;
padding:0 12px;
border-radius:6px;
border:1px solid rgba(255,34,68,.35);
color:var(--red);
background:rgba(255,34,68,.06);
font-family:var(--font-display);
font-size:.45rem;
font-weight:700;
letter-spacing:1.2px;
cursor:pointer;
transition:all .12s;
}
#blackout-btn:hover{background:rgba(255,34,68,.12);border-color:rgba(255,34,68,.5);}
#blackout-btn.on{background:var(--red);color:#fff;box-shadow:0 0 14px rgba(255,34,68,.4);}
@media(max-width:1700px){#network-pill{display:none;}}
/* ══ First-run guided tour (empty workspace, English) ══
No full-screen dark layer — only a soft outer vignette via spotlight box-shadow
so the hole stays true app UI (readable). */
.beam-first-run-tour{position:fixed;inset:0;z-index:10050;pointer-events:none;font-family:var(--font-mono);}
.beam-first-run-tour *{pointer-events:auto;}
.beam-first-run-tour[hidden]{display:none!important;}
.beam-tour-spotlight{
position:absolute;
border-radius:12px;
/* Inner: crisp frame. Outer: gentle dim — keep page legible (no second backdrop). */
box-shadow:
0 0 0 2px rgba(0,255,170,.85),
0 0 0 5px rgba(0,255,170,.2),
0 0 40px rgba(0,255,170,.18),
0 0 0 9999px rgba(1,4,8,.34);
pointer-events:none;
transition:top .28s ease,left .28s ease,width .28s ease,height .28s ease,opacity .2s;
z-index:1;
opacity:0;
}
.beam-tour-spotlight.is-visible{opacity:1;}
.beam-tour-panel{
position:fixed;
z-index:2;
width:min(360px,calc(100vw - 32px));
padding:0;
border-radius:12px;
border:1px solid rgba(0,255,170,.4);
background:linear-gradient(165deg,rgba(14,22,20,.94),rgba(8,14,12,.97));
box-shadow:0 20px 40px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.08) inset;
transition:top .28s ease,left .28s ease,opacity .2s;
}
.beam-tour-arrow{
position:absolute;
width:0;height:0;
border-left:11px solid transparent;
border-right:11px solid transparent;
z-index:3;
filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.beam-tour-arrow.dir-up{
bottom:100%;
border-bottom:14px solid rgba(0,255,170,.75);
border-top:0;
}
.beam-tour-arrow.dir-down{
top:100%;
border-top:14px solid rgba(0,255,170,.75);
border-bottom:0;
}
.beam-tour-arrow.dir-left{
right:100%;
top:50%;
transform:translateY(-50%);
border-top:11px solid transparent;
border-bottom:11px solid transparent;
border-right:14px solid rgba(0,255,170,.7);
border-left:0;
}
.beam-tour-arrow.dir-right{
left:100%;
top:50%;
transform:translateY(-50%);
border-top:11px solid transparent;
border-bottom:11px solid transparent;
border-left:14px solid rgba(0,255,170,.7);
border-right:0;
}
.beam-tour-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 0;}
.beam-tour-step{font-size:.58rem;letter-spacing:2px;color:rgba(0,255,170,.85);font-family:var(--font-display);}
.beam-tour-skip{
padding:4px 10px;border-radius:6px;border:1px solid var(--border2);background:transparent;
color:var(--muted);font-size:.58rem;cursor:pointer;font-family:var(--font-mono);
}
.beam-tour-skip:hover{color:var(--text);border-color:var(--muted);}
.beam-tour-title{margin:8px 14px 6px;font-family:var(--font-display);font-size:.72rem;letter-spacing:1px;color:var(--text);font-weight:700;}
.beam-tour-body{margin:0 14px;font-size:.68rem;line-height:1.55;color:var(--muted);max-height:min(280px,46vh);overflow-y:auto;padding-right:4px;}
.beam-tour-actions{display:flex;flex-wrap:wrap;gap:8px;padding:14px;}
.beam-tour-actions-row{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;}
.beam-tour-back,.beam-tour-next{
padding:8px 16px;border-radius:8px;font-family:var(--font-display);font-size:.55rem;letter-spacing:2px;cursor:pointer;
}
.beam-tour-back{border:1px solid var(--border2);background:var(--s2);color:var(--muted);}
.beam-tour-back:hover:not(:disabled){color:var(--text);border-color:var(--muted);}
.beam-tour-back:disabled{opacity:.35;cursor:default;}
.beam-tour-next{border:1px solid var(--green);background:var(--green-glow);color:var(--green);}
.beam-tour-next:hover{background:var(--green);color:#000;}
.beam-tour-cta{border:1px solid rgba(0,180,255,.5);background:rgba(0,180,255,.12);color:#9df;width:100%;padding:8px 12px;border-radius:8px;font-size:.62rem;cursor:pointer;font-family:var(--font-mono);}
.beam-tour-cta:hover{background:rgba(0,180,255,.2);}
.beam-tour-glow-target{animation:beam-tour-pulse 1.6s ease-in-out infinite;}
@keyframes beam-tour-pulse{
0%,100%{box-shadow:0 0 0 0 rgba(0,255,170,.35);}
50%{box-shadow:0 0 0 4px rgba(0,255,170,.12);}
}
/* ══ Fixture patch: step-by-step guide (dialog) ══ */
.fx-patch-guide-btn{
padding:6px 12px;border-radius:8px;
border:1px solid rgba(0,255,170,.35);background:rgba(0,255,170,.08);
color:rgba(0,255,170,.95);font-family:var(--font-display);
font-size:.52rem;font-weight:700;letter-spacing:2px;cursor:pointer;
transition:background .15s,border-color .15s,color .15s;
}
.fx-patch-guide-btn:hover{
background:rgba(0,255,170,.18);border-color:var(--green);color:var(--green);
}
.beam-guide-dialog{
padding:0;border:none;background:transparent;max-width:calc(100vw - 24px);
width:min(440px,100%);
}
.beam-guide-dialog::backdrop{
background:rgba(2,2,8,.72);backdrop-filter:blur(6px);
}
.beam-guide-card{
background:linear-gradient(165deg,var(--s1) 0%,#0c0c18 100%);
border:1px solid var(--border2);border-radius:16px;
box-shadow:0 24px 48px rgba(0,0,0,.45),0 0 0 1px rgba(0,255,170,.06) inset;
overflow:hidden;
}
.beam-guide-card-head{
display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
padding:18px 18px 12px;border-bottom:1px solid rgba(255,255,255,.06);
}
.beam-guide-kicker{
font-size:.55rem;letter-spacing:2px;color:rgba(0,255,170,.85);
font-family:var(--font-display);margin:0 0 6px;
}
.beam-guide-title{
margin:0;font-family:var(--font-display);font-size:.78rem;font-weight:900;
letter-spacing:2px;color:var(--text);
}
.beam-guide-close{
width:36px;height:36px;border-radius:10px;border:1px solid var(--border2);
background:var(--s2);color:var(--muted);font-size:1.25rem;line-height:1;
cursor:pointer;transition:color .15s,border-color .15s;
}
.beam-guide-close:hover{color:var(--text);border-color:var(--muted);}
.beam-guide-card-body{padding:16px 18px 8px;min-height:140px;}
.beam-guide-step-title{
margin:0 0 10px;font-family:var(--font-display);font-size:.68rem;
font-weight:700;letter-spacing:1px;color:var(--orange);
}
.beam-guide-step-text{
margin:0;font-size:.72rem;line-height:1.58;color:var(--muted);
}
.beam-guide-dots{
display:flex;justify-content:center;gap:8px;padding:12px 18px 4px;
}
.beam-guide-dot{
width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.12);
transition:background .2s,transform .2s;
}
.beam-guide-dot.on{
background:var(--green);transform:scale(1.15);
box-shadow:0 0 10px rgba(0,255,136,.4);
}
.beam-guide-card-foot{
display:flex;align-items:center;gap:10px;padding:14px 18px 18px;
border-top:1px solid rgba(255,255,255,.05);
}
.beam-guide-foot-spacer{flex:1;}
.beam-guide-back,.beam-guide-next{
padding:10px 16px;border-radius:10px;font-family:var(--font-mono);
font-size:.65rem;cursor:pointer;transition:background .15s,border-color .15s,color .15s;
}
.beam-guide-back{
border:1px solid var(--border2);background:var(--s2);color:var(--muted);
}
.beam-guide-back:hover:not(:disabled){color:var(--text);border-color:var(--muted);}
.beam-guide-back:disabled{opacity:.35;cursor:default;}
.beam-guide-next{
border:1px solid var(--green);background:var(--green-glow);color:var(--green);
font-family:var(--font-display);font-weight:700;letter-spacing:2px;font-size:.58rem;
}
.beam-guide-next:hover{background:var(--green);color:#000;}
/* ══ MODE TABS ══ */
#mode-bar{
display:flex;
align-items:stretch;
gap:0;
flex:1;
min-width:0;
padding:0;
margin:0;
background:transparent;
border:none;
position:static;
z-index:auto;
overflow:hidden;
height:100%;
}
.mode-tab{
display:flex;
align-items:center;
justify-content:center;
min-width:0;
flex:1 1 0;
padding:0 6px;
font-family:var(--font-display);
font-size:clamp(.4rem,.48vw,.52rem);
letter-spacing:.6px;
color:var(--muted);
cursor:pointer;
border:none;
border-bottom:2px solid transparent;
border-radius:0;
background:transparent;
transition:color .15s,border-color .15s,background .15s;
text-align:center;
white-space:nowrap;
position:relative;
}
.mode-tab:hover{
color:var(--text);
background:rgba(255,255,255,.03);
}
.mode-tab.on{
color:var(--green);
border-bottom-color:var(--green);
background:rgba(0,255,136,.03);
}
@media(max-width:1420px){
.mode-tab{letter-spacing:.2px;font-size:clamp(.36rem,.44vw,.48rem);}
}
/* ══ FIXTURE BAR ══ */
#fixture-bar{
display:flex;
flex-direction:column;
align-items:stretch;
padding:0;
background:var(--s1);
border-bottom:1px solid var(--border);
min-height:44px;
}
.fixture-bar-controls{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
padding:8px 16px 6px;
}
.fixture-bar-count{
font-family:var(--font-mono);
font-size:.62rem;
color:var(--muted);
min-width:3.2rem;
letter-spacing:.04em;
}
.fixture-bar-spacer{flex:1;min-width:8px;}
.fx-jump-wrap{
display:flex;
align-items:center;
gap:6px;
}
.fx-jump-lbl{
font-size:.48rem;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--dim);
white-space:nowrap;
}
.fx-jump-select{
min-width:140px;
max-width:min(240px, 38vw);
height:30px;
padding:0 8px;
border-radius:8px;
border:1px solid var(--border);
background:var(--s2);
color:var(--text);
font-family:var(--font-mono);
font-size:.58rem;
cursor:pointer;
outline:none;
}
.fx-jump-select:focus{border-color:var(--green);}
.fx-filter-input{
width:min(160px, 28vw);
height:30px;
padding:0 10px;
border-radius:8px;
border:1px solid var(--border);
background:var(--s2);
color:var(--text);
font-family:var(--font-mono);
font-size:.58rem;
outline:none;
}
.fx-filter-input:focus{border-color:var(--blue);}
.fx-list-btn{letter-spacing:.12em;font-family:var(--font-display);font-weight:700;font-size:.5rem;}
.fixture-chips-scroll{
display:flex;
flex-wrap:wrap;
align-content:flex-start;
gap:8px;
max-height:104px;
overflow-y:auto;
overflow-x:hidden;
padding:4px 16px 12px;
scroll-behavior:smooth;
}
/* Large rigs: one classic horizontal scroller — fast thumb / trackpad sweep */
.fixture-chips-scroll.fixture-chips-row{
flex-wrap:nowrap;
overflow-x:auto;
overflow-y:hidden;
max-height:none;
min-height:38px;
padding:6px 16px 12px;
gap:6px;
scrollbar-width:thin;
}
.fixture-chips-scroll.fixture-chips-row::-webkit-scrollbar{height:7px;width:auto;}
.fixture-chips-scroll.fixture-chips-compact{
gap:6px;
max-height:88px;
}
.fixture-chips-scroll.fixture-chips-row.fixture-chips-compact{
max-height:none;
}
.fixture-chips-scroll::-webkit-scrollbar{height:6px;width:6px;}
.fixture-chips-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:6px;}
.fx-pill.fx-pill-hidden,
.grp-pill.fx-pill-hidden{display:none!important;}
.fx-picker-dialog{
padding:0;
border:none;
border-radius:14px;
max-width:min(420px, 94vw);
background:var(--s1);
color:var(--text);
box-shadow:0 24px 60px rgba(0,0,0,.65), 0 0 0 1px var(--border2);
}
.fx-picker-dialog::backdrop{background:rgba(0,0,0,.72);}
.fx-picker-inner{padding:0;}
.fx-picker-head{
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 16px 10px;
border-bottom:1px solid var(--border);
}
.fx-picker-title{
font-family:var(--font-display);
font-size:.62rem;
font-weight:800;
letter-spacing:.18em;
text-transform:uppercase;
}
.fx-picker-x{
width:34px;
height:34px;
border-radius:8px;
border:1px solid var(--border);
background:var(--s2);
color:var(--muted);
font-size:1.1rem;
line-height:1;
cursor:pointer;
transition:all .12s;
}
.fx-picker-x:hover{border-color:var(--red);color:var(--red);}
.fx-picker-hint{
margin:0;
padding:10px 16px;
font-size:.58rem;
line-height:1.5;
color:var(--muted);
border-bottom:1px solid var(--border);
}
.fx-picker-actions-top{
display:flex;
gap:8px;
padding:10px 16px;
flex-wrap:wrap;
}
.fx-picker-filter-wrap{
padding:0 16px 8px;
}
.fx-picker-filter{
width:100%;
height:30px;
padding:0 10px;
border-radius:8px;
border:1px solid var(--border);
background:var(--s2);
color:var(--text);
font-family:var(--font-mono);
font-size:.58rem;
outline:none;
box-sizing:border-box;
}
.fx-picker-filter:focus{border-color:var(--blue);}
.fx-picker-list{
max-height:min(56vh, 440px);
overflow-y:auto;
padding:6px 12px 12px;
}
.fx-picker-row{
display:flex;
align-items:center;
gap:10px;
padding:8px 10px;
margin-bottom:4px;
border-radius:8px;
border:1px solid var(--border);
background:var(--s2);
cursor:pointer;
font-size:.65rem;
transition:background .12s, border-color .12s;
}
.fx-picker-row:hover{border-color:var(--border2);background:rgba(255,255,255,.03);}
.fx-picker-row input{accent-color:var(--green);width:16px;height:16px;flex-shrink:0;}
.fx-picker-name{flex:1;min-width:0;color:var(--text);font-family:var(--font-mono);}
.fx-picker-addr{font-family:var(--font-mono);font-size:.55rem;color:var(--dim);white-space:nowrap;}
.fx-picker-foot{
display:flex;
justify-content:flex-end;
gap:8px;
flex-wrap:wrap;
padding:12px 16px 16px;
border-top:1px solid var(--border);
background:rgba(0,0,0,.2);
}
@media (max-width:720px){
.fx-jump-wrap{width:100%;margin-left:0;}
.fx-jump-select{max-width:none;flex:1;min-width:0;}
.fx-filter-input{width:100%;max-width:none;}
}
.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;min-width:0;}
.fx-pill.on{border-color:var(--green);color:var(--green);background:var(--green-glow);}
.fx-pill-name{overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:11rem;}
.fixture-chips-compact .fx-pill,
.fixture-chips-compact .grp-pill{padding:4px 10px;font-size:.58rem;border-radius:10px;gap:4px;}
.fixture-chips-row .fx-pill,
.fixture-chips-row .grp-pill{flex-shrink:0;}
.fixture-chips-row .fx-pill-name{max-width:7rem;}
.fx-pill .fx-addr{font-size:.55rem;color:var(--dim);margin-left:2px;flex-shrink:0;}
.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;cursor:pointer;user-select:none;}
#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;min-width:0;}
.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-engine-intro{font-size:.56rem;color:var(--muted);line-height:1.55;margin:-4px 0 12px;max-width:52rem;}
.fx-panel{display:flex;flex-direction:column;gap:8px;}
.fx-panel-split{
display:grid;
grid-template-columns:minmax(0,1.25fr) minmax(220px,.85fr);
gap:12px;
align-items:stretch;
}
@media(max-width:900px){.fx-panel-split{grid-template-columns:1fr;}}
.fx-panel-main{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:100%;}
.fx-panel-side{
background:var(--s2);
border:1px solid var(--border);
border-radius:8px;
padding:8px 10px;
min-height:0;
display:flex;
flex-direction:column;
}
.fx-side-title{margin:0 0 8px!important;font-size:.58rem!important;}
.fx-panel .fx-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.fx-params-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;}
.fx-param-cell{background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:4px;min-width:0;}
.fx-param-cell-bool{grid-column:span 1;}
.fx-param-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.fx-param-cell > label,.fx-param-label-row label{font-size:.6rem;color:var(--text);letter-spacing:.5px;font-weight:600;}
.fx-param-hint{font-size:.48rem;color:var(--muted);line-height:1.35;margin:0;}
.fx-param-slider{width:100%;min-width:0;margin-top:2px;}
.fx-param-val{min-width:40px;text-align:right;font-size:.6rem;color:var(--green);font-family:var(--font-mono);}
.fx-param-check{width:16px;height:16px;flex-shrink:0;}
.fx-param-bool-label{display:flex;align-items:flex-start;gap:8px;font-size:.6rem;color:var(--text);cursor:pointer;line-height:1.3;}
.fx-param-bool-label span{padding-top:1px;}
.fx-param-select{background:var(--s2);border:1px solid var(--border);color:var(--text);border-radius:4px;padding:5px 8px;font-size:.62rem;width:100%;margin-top:2px;}
.fx-effect-row{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:var(--s1);border-radius:6px;border:1px solid var(--border);margin-bottom:6px;}
.fx-effect-row:last-child{margin-bottom:0;}
.fx-effect-info{display:flex;flex-direction:column;gap:2px;}
.fx-effect-name{font-size:.65rem;color:var(--green);}
.fx-effect-meta{font-size:.54rem;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:.62rem;color:var(--dim);padding:12px 8px;margin:auto;text-align:center;}
#fx-active-list{
flex:1;
min-height:120px;
display:flex;
flex-direction:column;
overflow-y:auto;
overflow-x:hidden;
}
#panel-effects.card.full{
display:flex;
flex-direction:column;
}
#panel-effects .fx-panel.fx-panel-split{
flex:1;
min-height: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;}
#page-control .control-bottom-grid .card{padding:8px 10px;}
/* Control page: BPM / record / presets — three columns side by side on desktop */
.control-bottom-shell{grid-column:1/-1;padding:0;background:transparent;border:none;box-shadow:none;position:relative;}
.control-bottom-shell::before{display:none;}
.control-bottom-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
align-items:stretch;
}
.control-bottom-grid > .card{
display:flex;
flex-direction:column;
min-height:0;
height:100%;
}
.control-bottom-grid > .control-bpm-card #tap-btn{margin-top:auto;}
.control-bottom-grid #program-grid,
.control-bottom-grid #preset-grid{
flex:1;
min-height:72px;
align-content:start;
}
@media(max-width:760px){
.control-bottom-grid{grid-template-columns:1fr;}
}
.control-bottom-grid .card-title{
margin-bottom:6px;
font-size:.54rem;
letter-spacing:2px;
}
.control-bpm-hint,.control-section-hint{
font-size:.52rem;
color:var(--muted);
line-height:1.45;
margin:0 0 6px;
}
.control-bpm-hint strong,.control-section-hint strong{color:var(--text);font-weight:600;}
.control-bpm-card .bpm-display-wrap{
position:relative;
display:flex;align-items:center;justify-content:center;
margin:4px auto 0;width:80px;height:80px;
}
.control-bpm-card .bpm-beat-ring{
position:absolute;inset:0;
border-radius:50%;
border:2px solid rgba(255,107,0,.18);
transition:border-color .08s;
}
.control-bpm-card .bpm-beat-ring.pulse{
animation:bpm-ring-pop .32s ease-out;
}
@keyframes bpm-ring-pop{
0%{border-color:var(--orange);box-shadow:0 0 18px var(--orange),0 0 40px rgba(255,107,0,.35);transform:scale(1.08);}
100%{border-color:rgba(255,107,0,.18);box-shadow:none;transform:scale(1);}
}
.control-bpm-card .bpm-display{
font-size:1.5rem;
margin:0;
letter-spacing:2px;
text-shadow:0 0 16px var(--orange),0 0 32px rgba(255,107,0,.22);
position:relative;z-index:1;
}
.bpm-beat-dots{
display:flex;justify-content:center;gap:6px;
margin:6px 0 2px;
}
.bpm-beat-dot{
width:8px;height:8px;border-radius:50%;
background:rgba(255,107,0,.15);
transition:background .1s,box-shadow .1s,transform .1s;
}
.bpm-beat-dot.hit{background:rgba(255,107,0,.5);}
.bpm-beat-dot.current{
background:var(--orange);
box-shadow:0 0 8px var(--orange);
transform:scale(1.25);
}
.control-bpm-card .bpm-sub{margin-bottom:6px;font-size:.48rem;letter-spacing:2px;}
.bpm-controls-compact{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-bottom:6px;}
.bpm-controls-compact .bpm-btn{padding:6px 4px;font-size:.46rem;letter-spacing:.5px;}
/* Beat division row */
.bpm-div-row{display:flex;gap:4px;margin-bottom:6px;}
.bpm-div-btn{
flex:1;padding:5px;border-radius:6px;
border:1px solid var(--border);background:var(--s2);
cursor:pointer;font-family:var(--font-display);font-size:.48rem;font-weight:700;
letter-spacing:1px;color:var(--muted);text-align:center;
transition:all .12s;user-select:none;
}
.bpm-div-btn:hover{border-color:var(--orange);color:var(--orange);}
.bpm-div-btn.on{border-color:var(--orange);background:var(--orange-glow);color:var(--orange);}
/* Sync layer buttons */
.bpm-sync-layers{
display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
margin-bottom:6px;
}
.bpm-sync-layer{
display:flex;flex-direction:column;align-items:center;gap:2px;
padding:7px 2px;border-radius:8px;
border:1px solid var(--border);background:var(--s2);
cursor:pointer;transition:all .15s;user-select:none;
}
.bpm-sync-layer:hover{border-color:var(--orange);}
.bpm-sync-layer.on{
border-color:var(--orange);background:var(--orange-glow);
box-shadow:0 0 12px rgba(255,107,0,.18);
}
.bpm-sync-icon{font-size:.7rem;line-height:1;}
.bpm-sync-lbl{font-family:var(--font-display);font-size:.38rem;font-weight:700;letter-spacing:1.5px;color:var(--muted);transition:color .12s;}
.bpm-sync-layer.on .bpm-sync-lbl{color:var(--orange);}
/* Palette strip */
.bpm-palette-section{margin-bottom:6px;}
.bpm-palette-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.bpm-palette-title{font-family:var(--font-display);font-size:.42rem;font-weight:700;letter-spacing:2px;color:var(--muted);}
.bpm-btn-sm{padding:3px 8px;font-size:.4rem;letter-spacing:1px;}
.bpm-palette-strip{
display:flex;gap:3px;overflow-x:auto;padding-bottom:2px;
scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
.bpm-palette-chip{
flex:0 0 24px;height:24px;border-radius:6px;
border:2px solid transparent;cursor:pointer;
transition:border-color .12s,transform .12s;
}
.bpm-palette-chip:hover{transform:scale(1.15);border-color:rgba(255,255,255,.3);}
.bpm-palette-chip.on{border-color:var(--orange);box-shadow:0 0 8px rgba(255,107,0,.3);transform:scale(1.12);}
.control-bpm-card #tap-btn{padding:8px;font-size:.56rem;letter-spacing:2px;}
.control-bpm-card .bpm-sync-row{gap:4px;}
.control-bpm-card .sync-opt{padding:6px;font-size:.52rem;}
.record-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px;}
.record-status{font-size:.55rem;color:var(--muted);}
.record-save-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.record-name-input{
flex:1;
min-width:0;
max-width:100%;
height:32px;
background:var(--s2);
border:1px solid var(--border);
border-radius:6px;
color:var(--text);
padding:0 8px;
font-size:.58rem;
}
.program-grid-compact{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px;}
.control-record-card .card-title[style]{margin-top:8px!important;}
/* ── compact saved-program cards ── */
.pgc-card{position:relative;border-radius:8px;border:1px solid var(--border);background:var(--s2);padding:8px 10px 7px;display:flex;flex-direction:column;gap:4px;transition:border-color .12s,box-shadow .12s;overflow:hidden;}
.pgc-card:hover{border-color:var(--border2);}
.pgc-card.pgc-playing{border-color:var(--green);box-shadow:0 0 12px rgba(0,255,136,.18);}
.pgc-top{display:flex;align-items:center;justify-content:space-between;gap:4px;}
.pgc-colors{display:flex;gap:3px;flex-wrap:wrap;}
.pgc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.pgc-dur{font-family:var(--font-mono);font-size:.48rem;color:var(--muted);white-space:nowrap;}
.pgc-name{font-family:var(--font-display);font-size:.62rem;color:var(--text);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pgc-info{display:flex;gap:4px;align-items:center;flex-wrap:wrap;}
.pgc-evts{font-family:var(--font-mono);font-size:.42rem;color:var(--muted);letter-spacing:.5px;}
.pgc-chip{font-family:var(--font-mono);font-size:.38rem;letter-spacing:.5px;padding:1px 5px;border-radius:3px;background:var(--s3);color:var(--muted);}
.pgc-actions{display:flex;gap:4px;margin-top:2px;}
.pgc-play{flex:1;height:22px;border-radius:5px;border:1px solid var(--green);background:transparent;color:var(--green);font-size:.55rem;cursor:pointer;transition:all .1s;display:flex;align-items:center;justify-content:center;}
.pgc-play:hover{background:var(--green);color:#000;}
.pgc-card.pgc-playing .pgc-play{border-color:var(--orange);color:var(--orange);}
.pgc-card.pgc-playing .pgc-play:hover{background:var(--orange);color:#000;}
.pgc-del{width:22px;height:22px;border-radius:5px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:.65rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s;opacity:0;}
.pgc-card:hover .pgc-del{opacity:1;}
.pgc-del:hover{border-color:var(--red);color:var(--red);background:rgba(255,34,68,.1);}
.save-preset-row-compact{
display:flex;
gap:5px;
align-items:center;
flex-wrap:wrap;
margin-bottom:6px;
}
.save-preset-row-compact #preset-name-input{
flex:1;
min-width:0;
max-width:100%;
height:32px;
padding:0 8px;
font-size:.58rem;
}
.save-preset-row-compact #save-preset-btn{
padding:6px 10px;
font-size:.55rem;
}
.save-preset-row-compact #preset-color-input{width:32px;height:32px;}
/* ══ GRID LAYOUT ══ */
/* Profile spec tiles — hidden unless ?specui=1 | localStorage beam_spec_ui=1 (see widget-tile-render.js) */
#widget-spec-surface:not(.widget-spec-surface--active){display:none!important;}
#widget-spec-surface{--tile-min:180px;}
#widget-spec-surface[data-density="dense"]{--tile-min:180px;}
#widget-spec-surface[data-density="comfortable"]{--tile-min:240px;}
#widget-spec-surface[data-density="compact"]{--tile-min:140px;}
.widget-spec-card-title{align-items:center;gap:10px;flex-wrap:wrap;}
.widget-density-toolbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.widget-density-toolbar .fx-pill.on{background:var(--green);color:var(--s0);border-color:var(--green);}
.widget-spec-hint{font-size:.58rem;color:var(--muted);margin:-6px 0 10px;line-height:1.45;max-width:720px;}
.widget-spec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tile-min),1fr));gap:10px;align-items:start;}
.widget-tile-card{background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:10px 12px 12px;min-width:0;}
.widget-tile-card--err{border-color:var(--red);color:var(--red);}
.widget-tile-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px;}
.widget-tile-card-titles{min-width:0;}
.widget-tile-name{font-family:var(--font-display);font-size:.62rem;font-weight:700;letter-spacing:2px;color:var(--text);}
.widget-tile-sub{font-size:.52rem;color:var(--muted);margin-top:2px;}
.widget-tile-err{font-size:.55rem;margin-top:6px;}
.widget-tile-expand-btn{font-family:var(--font-mono);font-size:.52rem;padding:4px 10px;border-radius:6px;border:1px solid var(--border);background:var(--s3);color:var(--text);cursor:pointer;flex-shrink:0;}
.widget-tile-expand-btn:hover{border-color:var(--green);color:var(--green);}
.widget-tile-card-body{display:flex;flex-direction:column;gap:8px;max-height:14.5rem;overflow:auto;padding-right:2px;}
.widget-tile-card--expanded .widget-tile-card-body{max-height:none;}
.widget-tile-section-title{font-size:.5rem;font-weight:700;letter-spacing:2px;color:var(--muted);margin-top:4px;}
.widget-tile-section-title:first-child{margin-top:0;}
.widget-tile-sl-head{display:flex;justify-content:space-between;align-items:center;font-size:.52rem;margin-top:2px;}
.widget-tile-sl-lbl{color:var(--muted);}
.widget-tile-sl-val{font-family:var(--font-mono);color:var(--green);}
.widget-tile-range{width:100%;max-width:100%;box-sizing:border-box;}
.widget-tile-chip-grid{display:flex;flex-wrap:wrap;gap:5px;}
.widget-tile-chip-grid--tight{gap:4px;}
.widget-tile-chip{border:1px solid var(--border);border-radius:6px;padding:4px 7px;font-size:.48rem;font-family:var(--font-mono);cursor:pointer;background:var(--s3);color:var(--text);}
.widget-tile-chip:hover{border-color:var(--green);}
#app{display:grid;gap:8px;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;}
@media(max-width:1200px){#app{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:580px){#app{grid-template-columns:1fr;}}
/* CONTROL: grid children must shrink so columns stay equal (no overflow widening one track) */
#page-control #app{width:100%;max-width:100%;box-sizing:border-box;}
#page-control #app > *{min-width:0;}
#page-control #app > .card:not(.full) input[type="range"]{width:100%;max-width:100%;box-sizing:border-box;}
/* Uniform button rows (RGBW / laser / fog quick actions) */
.control-subhead{
font-size:.5rem;
color:var(--muted);
letter-spacing:1px;
margin:10px 0 6px;
}
.rgbw-auto-wrap .control-subhead{margin-top:8px;}
.control-chip-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(86px,1fr));
gap:6px;
width:100%;
box-sizing:border-box;
}
.control-chip-grid--tight{
grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
gap:5px;
}
.control-chip-grid.laser-pattern-grid{
grid-template-columns:repeat(10,minmax(0,1fr));
gap:4px;
}
@media(max-width:1200px){
.control-chip-grid.laser-pattern-grid{
grid-template-columns:repeat(5,minmax(0,1fr));
}
}
.laser-quick-row{margin-top:8px;}
.laser-quick-row ~ .laser-quick-row{margin-top:6px;}
.control-chip-grid .mbtn{
min-width:0;
width:100%;
max-width:100%;
box-sizing:border-box;
height:auto;
min-height:28px;
padding:6px 4px;
font-size:.48rem;
letter-spacing:.5px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.move-patterns-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:6px;
margin-top:8px;
width:100%;
}
@media(max-width:1500px){
.move-patterns-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:900px){
.move-patterns-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.move-speed-toolbar{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:8px;
margin-top:6px;
width:100%;
}
.move-speed-lbl{font-size:.55rem;color:var(--muted);}
.move-speed-input{flex:1;min-width:120px;max-width:220px;}
.move-direction-toolbar select.move-speed-input{
height:30px;
background:var(--s2);
color:var(--text);
border:1px solid var(--border);
border-radius:8px;
padding:0 8px;
}
.move-speed-val{font-size:.55rem;color:var(--green);min-width:28px;}
.move-kb-exclude{
font-size:.48rem;color:var(--muted);margin-left:6px;font-family:var(--font-mono);
letter-spacing:.02em;user-select:none;white-space:nowrap;
}
.move-kb-exclude kbd{
display:inline-flex;align-items:center;justify-content:center;
min-width:20px;height:20px;padding:0 4px;margin:0 2px;border:1px solid rgba(255,255,255,.18);
border-radius:5px;background:rgba(0,0,0,.45);font-size:.42rem;font-weight:700;color:var(--text);
}
.move-direction-toolbar{
display:flex;flex-direction:column;align-items:stretch;
gap:6px;margin-top:8px;padding-top:8px;
border-top:1px solid rgba(255,255,255,.06);width:100%;
}
.move-range-row,.move-dir-row{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;
}
.move-dir-btn{
padding:5px 10px;border-radius:6px;border:1px solid var(--border);
background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;
font-size:.55rem;font-family:var(--font-display);font-weight:600;
letter-spacing:.5px;transition:all .12s;
}
.move-dir-btn:hover{border-color:var(--green);color:var(--green);}
.move-dir-btn.active{background:var(--green);color:var(--bg);border-color:var(--green);font-weight:700;}
.move-dir-btn.secondary{border-color:var(--muted);color:var(--muted);font-weight:500;}
.move-dir-btn.secondary:hover{border-color:var(--orange);color:var(--orange);}
/* CONTROL: equal row heights + no “holes” when only 2 panels sit on a 4-col row (JS sets grid-column on gobo/laser/fog/ble) */
#page-control #app > .card:not(.full){
display:flex;
flex-direction:column;
min-height:0;
}
#page-control #app > .card:not(.full) > .card-title{flex-shrink:0;}
#panel-move .joystick-wrap{
flex:1;
justify-content:center;
min-height:0;
}
#panel-dimmer-strobe .sliders{
flex:1;
justify-content:center;
}
#panel-color .color-wheel-body{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
min-height:0;
}
#panel-gobo-prism .gobo-prism-stack{flex:1;}
/* Dense slider stacks: shorter cards, easier scan */
#panel-laser .sliders{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px 20px;
}
#panel-rgbw .sliders{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px 20px;
}
.card .sl{
overflow:hidden;
}
.card .sl input[type=range]{
margin:6px 0;
}
#panel-rgbw #sl-color-macros-row,
#panel-rgbw #sl-color-changing-row,
#panel-rgbw #sl-color-fades-row{
grid-column:1 / -1;
}
#panel-laser .sl:has(#lbl-laser-pattern){
grid-column:1 / -1;
}
@media(max-width:1200px){
#panel-laser .sliders,
#panel-rgbw .sliders{grid-template-columns:1fr;}
#panel-rgbw #sl-color-macros-row,
#panel-rgbw #sl-color-changing-row,
#panel-rgbw #sl-color-fades-row{grid-column:auto;}
#panel-laser .sl:has(#lbl-laser-pattern){grid-column:auto;}
}
/* ══ 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;min-width:0;}
.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:flex-start;align-items:center;font-size:.62rem;gap:8px;min-width:0;}
.sl-lbl{color:var(--text);letter-spacing:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1;}
.sl-head-right{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;margin-left:auto;}
.sl-kbd-group{display:inline-flex;gap:4px;align-items:center;}
.sl-kbd-group kbd{
display:inline-flex;align-items:center;justify-content:center;
min-width:26px;height:24px;padding:0 6px;box-sizing:border-box;
background:rgba(0,255,136,.1);border:1px solid rgba(0,255,136,.35);border-radius:6px;
font-family:var(--font-mono);font-size:.52rem;font-weight:800;color:var(--green);
line-height:1;text-shadow:0 0 8px rgba(0,255,136,.25);
}
/* Inline keyboard hints (Control / top bar / fixture bar) */
.ui-kbd{
display:inline-flex;align-items:center;justify-content:center;
margin-left:6px;min-height:26px;padding:3px 10px;box-sizing:border-box;
background:rgba(0,255,136,.12);border:1px solid rgba(0,255,136,.4);border-radius:7px;
font-family:var(--font-mono);font-size:.52rem;font-weight:800;letter-spacing:.04em;
color:var(--green);line-height:1;
}
.topbar-blackout-btn{display:inline-flex;align-items:center;gap:8px;}
.topbar-blackout-btn .ui-kbd{margin-left:2px;font-size:.48rem;padding:3px 9px;color:var(--orange);border-color:rgba(255,136,0,.45);background:rgba(255,136,0,.1);}
#undo-pill{display:inline-flex;align-items:center;gap:6px;}
#undo-pill .ui-kbd{font-size:.46rem;padding:3px 8px;color:var(--text);border-color:rgba(255,255,255,.22);background:rgba(0,0,0,.4);}
.fx-pill .ui-kbd{font-size:.44rem;padding:2px 7px;min-height:22px;color:var(--text);border-color:rgba(255,255,255,.2);background:rgba(0,0,0,.4);flex-shrink:0;}
.fx-list-btn .ui-kbd{font-size:.42rem;padding:2px 7px;min-height:22px;margin-left:6px;color:var(--text);border-color:rgba(255,255,255,.2);background:rgba(0,0,0,.4);}
.fixture-bar-kb-hint{
display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
padding:8px 12px 6px;font-size:.5rem;color:var(--text);letter-spacing:.06em;font-weight:600;
border-top:1px solid rgba(255,255,255,.04);background:rgba(0,0,0,.15);
}
.fixture-bar-kb-hint kbd{
display:inline-flex;align-items:center;justify-content:center;
min-height:24px;min-width:24px;padding:0 8px;
background:rgba(0,255,136,.1);border:1px solid rgba(0,255,136,.35);border-radius:6px;
font-family:var(--font-mono);font-size:.46rem;font-weight:800;color:var(--green);
}
.fixture-bar-kb-sep{opacity:.5;padding:0 2px;color:var(--dim);}
.card-title-kb,.card-title .card-title-kb{
margin-left:auto;font-size:.48rem;font-weight:600;letter-spacing:.04em;color:var(--muted);
display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:min(100%,22rem);line-height:1.35;
}
.card-title{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.card-title .badge{margin-left:0;}
.card-title .card-title-kb kbd{
font-family:var(--font-mono);font-size:.44rem;font-weight:800;padding:3px 8px;min-height:22px;
display:inline-flex;align-items:center;justify-content:center;
background:rgba(0,255,136,.1);border:1px solid rgba(0,255,136,.35);border-radius:6px;color:var(--green);
}
.save-preset-row-compact #save-preset-btn{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;}
.save-preset-kb-wrap{display:inline-flex;align-items:center;gap:5px;margin-left:6px;}
.save-preset-kb-wrap kbd{
font-size:.46rem;font-weight:800;padding:3px 8px;min-height:22px;
display:inline-flex;align-items:center;justify-content:center;
background:rgba(0,255,136,.1);border:1px solid rgba(0,255,136,.35);border-radius:6px;color:var(--green);
}
/* Last fader or color wheel targeted by +/− / N/M nudge (keyboard-shortcuts.js) */
#page-control input[type=range].sl-range-kb-active{
box-shadow:0 0 0 2px rgba(0,255,136,.55),0 0 14px rgba(0,255,136,.22);
}
#page-control #color-canvas.color-wheel-kb-active{
box-shadow:0 0 0 2px rgba(0,255,136,.55),0 0 14px rgba(0,255,136,.22);
border-radius:50%;
}
.sl-val{color:var(--green);font-weight:bold;flex-shrink:0;}
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;}
/* ══ STRIP & EFFECTS ══ */
#panel-strip .strip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px;}
#panel-strip .strip-col{display:flex;flex-direction:column;gap:6px;min-width:0;}
#panel-strip .control-subhead{margin:0 0 2px;}
#panel-strip .sl{margin:0;}
@media(max-width:1200px){#panel-strip .strip-grid{grid-template-columns:1fr;}}
/* ══ BLE LED STRIP ══ */
#panel-ble{border-color:var(--purple);border-style:dashed;padding:10px 12px;}
#panel-ble .ble-toolbar{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px 12px;
margin-bottom:8px;
min-height:42px;
padding:2px 0;
}
#panel-ble .ble-toolbar-lbl{
font-family:var(--font-display);
font-size:.58rem;
font-weight:700;
letter-spacing:3px;
color:var(--purple);
margin-right:auto;
line-height:1.2;
display:inline-flex;
align-items:center;
}
#panel-ble .ble-toolbar-status{
font-size:.55rem;
color:var(--muted);
padding:6px 10px;
border-radius:6px;
background:var(--s3);
flex:1;
min-width:120px;
text-align:right;
line-height:1.3;
display:inline-flex;
align-items:center;
justify-content:flex-end;
}
#panel-ble .ble-toolbar #ble-connect-btn{
width:auto;
flex:0 0 auto;
padding:7px 16px;
}
#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);}
.cw-quick-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
margin-top:10px;padding:0 8px;
}
.cw-quick-btn{
display:flex;flex-direction:column;align-items:center;gap:3px;
padding:6px 0;border-radius:6px;cursor:pointer;
border:2px solid transparent;background:rgba(255,255,255,.04);
transition:all .15s ease;
}
.cw-quick-btn:hover{background:rgba(255,255,255,.08);transform:scale(1.05);}
.cw-quick-btn.active{border-color:var(--green);background:rgba(0,255,136,.06);}
.cw-quick-dot{
width:20px;height:20px;border-radius:50%;
border:1px solid rgba(255,255,255,.15);
box-shadow:0 0 6px var(--cq-color,transparent);
}
.cw-quick-lbl{font-size:.5rem;color:var(--muted);letter-spacing:1px;}
.cw-section{margin-top:10px;padding:0 8px;}
.cw-section-label{font-size:.5rem;color:var(--muted);letter-spacing:2px;margin-bottom:6px;}
.cw-speed-row{display:flex;gap:6px;}
.cw-speed-btn{
flex:1;padding:5px 0;border-radius:5px;cursor:pointer;
background:rgba(255,255,255,.04);border:1px solid var(--border2);
color:var(--text);font-size:.55rem;letter-spacing:1px;
font-family:'Share Tech Mono',monospace;transition:all .15s ease;
}
.cw-speed-btn:hover{background:rgba(255,255,255,.1);}
.cw-speed-btn.active{border-color:var(--green);color:var(--green);background:rgba(0,255,136,.08);}
.cw-speed-stop{color:var(--red);border-color:rgba(255,80,80,.2);}
.cw-speed-stop:hover{background:rgba(255,80,80,.1);}
.cw-speed-stop.active{border-color:var(--red);color:var(--red);background:rgba(255,80,80,.1);}
/* ══ 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:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:6px;
}
.prism-btn{
min-width:0;
width:100%;
box-sizing:border-box;
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 ══ */
.programs-page-card.card.full{
padding:0;
overflow:hidden;
border:1px solid var(--border2);
background:linear-gradient(180deg, rgba(14,16,26,.98) 0%, var(--s1) 38%, var(--s1) 100%);
box-shadow:0 4px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.programs-hero{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:clamp(16px, 3vw, 28px);
flex-wrap:wrap;
padding:22px clamp(18px, 3vw, 28px) 20px;
border-bottom:1px solid var(--border);
background:linear-gradient(118deg, rgba(0,255,136,.07) 0%, rgba(0,170,255,.04) 42%, transparent 72%);
}
.programs-hero-main{flex:1;min-width:min(100%, 280px);}
.programs-kicker{
margin:0 0 8px;
font-size:.48rem;
font-weight:800;
letter-spacing:.32em;
text-transform:uppercase;
color:var(--green);
}
.programs-heading{
margin:0 0 12px;
font-family:var(--font-display);
font-size:clamp(1.05rem, 2.4vw, 1.5rem);
font-weight:900;
letter-spacing:.14em;
color:var(--text);
line-height:1.15;
}
.programs-lead{
margin:0;
max-width:44rem;
font-size:.68rem;
line-height:1.6;
color:var(--muted);
}
.programs-lead strong{color:var(--text);font-weight:700;}
.programs-toolbar{display:flex;align-items:center;gap:10px;flex-shrink:0;padding-top:2px;}
.programs-tool-btn{
appearance:none;
-webkit-appearance:none;
margin:0;
padding:9px 18px;
border-radius:10px;
font-family:var(--font-display);
font-size:.52rem;
font-weight:800;
letter-spacing:.18em;
text-transform:uppercase;
cursor:pointer;
border:1px solid var(--border2);
background:rgba(20,22,34,.9);
color:var(--muted);
transition:border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.programs-tool-btn:hover{border-color:var(--border);color:var(--text);}
.programs-tool-btn--secondary.active,
.programs-tool-btn--secondary:active{
border-color:var(--green);
color:var(--green);
background:var(--green-glow);
box-shadow:0 0 18px rgba(0,255,136,.12);
}
.programs-tool-btn--stop{
border-color:rgba(255,34,68,.5);
color:var(--red);
background:rgba(255,34,68,.08);
}
.programs-tool-btn--stop:hover{background:rgba(255,34,68,.18);color:#fff;border-color:var(--red);}
.programs-cube-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
gap:16px;
padding:20px clamp(18px, 3vw, 28px) 26px;
min-height:min(52vh, 480px);
align-content:start;
}
.programs-empty{
grid-column:1 / -1;
text-align:center;
padding:clamp(36px, 8vh, 72px) 24px;
border-radius:14px;
border:1px dashed var(--border2);
background:rgba(8,10,18,.5);
}
.programs-empty-icon{
font-size:1.6rem;
line-height:1;
margin-bottom:14px;
opacity:.35;
color:var(--green);
letter-spacing:.2em;
}
.programs-empty-title{
font-family:var(--font-display);
font-size:.78rem;
font-weight:800;
letter-spacing:.2em;
text-transform:uppercase;
color:var(--text);
margin:0 0 10px;
}
.programs-empty-hint{
margin:0 auto;
max-width:28rem;
font-size:.65rem;
line-height:1.55;
color:var(--muted);
}
.programs-empty-hint strong{color:var(--green);font-weight:700;}
.prog-cube{
position:relative;
display:flex;
flex-direction:column;
gap:0;
border-radius:14px;
border:1px solid var(--border);
background:linear-gradient(168deg, rgba(28,30,48,.95) 0%, rgba(14,16,26,.98) 100%);
box-shadow:0 2px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
transition:border-color .18s, box-shadow .18s, transform .18s;
overflow:hidden;
}
.prog-cube::before{
content:'';
position:absolute;
left:0;right:0;top:0;
height:2px;
border-radius:14px 14px 0 0;
background:linear-gradient(90deg, var(--green), var(--blue));
opacity:.5;
transition:opacity .18s;
z-index:1;
}
.prog-cube:hover{
border-color:var(--border2);
transform:translateY(-2px);
box-shadow:0 8px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.prog-cube:hover::before{opacity:.85;}
.prog-cube.playing{
border-color:rgba(0,255,136,.55);
box-shadow:0 0 0 1px rgba(0,255,136,.2), 0 8px 28px var(--green-glow);
}
.prog-cube.playing::before{opacity:1;}
.prog-cube-body{flex:1;display:flex;flex-direction:column;gap:0;padding:14px 14px 0;}
.pc-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px;}
.prog-cube .pc-name{
font-family:var(--font-display);
font-size:.78rem;
font-weight:800;
color:var(--text);
letter-spacing:.06em;
line-height:1.25;
word-break:break-word;
min-width:0;
}
.pc-dur{
font-family:var(--font-mono);
font-size:.62rem;
color:var(--muted);
white-space:nowrap;
flex-shrink:0;
}
.pc-color-strip{
display:flex;
gap:0;
height:4px;
border-radius:2px;
overflow:hidden;
margin-bottom:10px;
}
.pc-swatch{flex:1;min-width:0;}
.pc-feats{
display:flex;
flex-wrap:wrap;
gap:5px;
margin-bottom:10px;
}
.pc-feat{
font-family:var(--font-display);
font-size:.4rem;
font-weight:700;
letter-spacing:.14em;
color:var(--muted);
padding:3px 8px;
border-radius:4px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
}
.pc-feat--dim{opacity:.4;}
.pc-bars{display:flex;flex-direction:column;gap:4px;margin-bottom:8px;}
.pc-bar-row{display:flex;align-items:center;gap:6px;}
.pc-bar-lbl{font-family:var(--font-mono);font-size:.44rem;color:var(--dim);width:28px;text-align:right;flex-shrink:0;}
.pc-bar-track{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.04);overflow:hidden;}
.pc-bar-fill{height:100%;border-radius:2px;transition:width .3s;}
.pc-bar-ct{font-family:var(--font-mono);font-size:.44rem;color:var(--muted);width:24px;flex-shrink:0;}
.pc-evt-count{
font-family:var(--font-mono);
font-size:.52rem;
color:var(--dim);
margin-bottom:2px;
}
.prog-cube .pc-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin-top:auto;
padding:10px 14px 14px;
}
.pc-btn{
padding:10px 12px;
border-radius:10px;
border:1px solid var(--border2);
background:rgba(12,14,22,.85);
font-family:var(--font-display);
font-size:.5rem;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
cursor:pointer;
color:var(--muted);
transition:border-color .12s, background .12s, color .12s, box-shadow .12s;
text-align:center;
}
.pc-btn.run{border-color:rgba(0,255,136,.45);color:var(--green);background:var(--green-glow);}
.pc-btn.run:hover{background:var(--green);color:#000;border-color:var(--green);box-shadow:0 0 16px rgba(0,255,136,.35);}
.pc-btn.loop{border-color:rgba(255,107,0,.45);color:var(--orange);background:var(--orange-glow);}
.pc-btn.loop:hover{background:var(--orange);color:#000;border-color:var(--orange);box-shadow:0 0 16px rgba(255,107,0,.3);}
.pc-btn.stop{
display:none;
grid-column:1 / -1;
border-color:rgba(255,34,68,.5);
color:var(--red);
background:rgba(255,34,68,.1);
}
.pc-btn.stop:hover{background:var(--red);color:#fff;border-color:var(--red);}
.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:12px;
right:12px;
width:30px;
height:30px;
border-radius:9px;
border:1px solid rgba(255,34,68,.4);
background:rgba(255,34,68,.08);
color:var(--red);
font-family:var(--font-mono);
font-size:.65rem;
font-weight:700;
cursor:pointer;
display:none;
align-items:center;
justify-content:center;
transition:all .12s;
z-index:2;
}
.prog-cube .pc-del:hover{background:rgba(255,34,68,.22);border-color:var(--red);color:#fff;}
.programs-edit-on .prog-cube .pc-del{display:flex;}
.programs-edit-on .prog-cube{opacity:.96;}
.programs-edit-on .prog-cube .pc-actions{opacity:.5;pointer-events:none;}
.programs-edit-on .prog-cube .pc-del{pointer-events:auto;opacity:1;}
@media (max-width:640px){
.programs-cube-grid{grid-template-columns:1fr;}
.programs-toolbar{width:100%;justify-content:flex-end;}
}
.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;gap:8px;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-go-btn kbd{
font-family:var(--font-mono);font-size:.5rem;font-weight:800;padding:4px 8px;min-height:24px;
display:inline-flex;align-items:center;justify-content:center;
background:rgba(0,255,136,.12);border:1px solid rgba(0,255,136,.4);border-radius:6px;color:var(--green);
flex-shrink:0;
}
.cue-go-btn.back kbd{border-color:rgba(255,255,255,.22);background:rgba(0,0,0,.35);color:var(--text);}
.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-wrap{
position:relative;
border-radius:var(--r);
border:1px solid rgba(0,255,136,.22);
background:radial-gradient(ellipse 115% 85% at 50% 100%,#161a2a 0%,#0a0c14 52%,#05060c 100%);
overflow:hidden;
box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 48px rgba(0,0,0,.5);
}
#viz-canvas.viz-dragging{cursor:grabbing;}
.viz-toolbar-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
flex-wrap:wrap;
padding:0 0 10px;
flex-shrink:0;
}
#viz-wrap.viz-wrap--fs .viz-toolbar-row{
padding:8px 14px 6px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.viz-toolbar-lbl{
font-family:var(--font-display);
font-size:.48rem;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--dim);
}
.viz-mode-group{display:flex;gap:6px;}
.viz-mode-btn{
padding:6px 14px;
border-radius:8px;
border:1px solid var(--border);
background:var(--s2);
color:var(--muted);
font-family:var(--font-display);
font-size:.48rem;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase;
cursor:pointer;
transition:border-color .12s,background .12s,color .12s;
}
.viz-mode-btn:hover{border-color:var(--border2);color:var(--text);}
.viz-mode-btn.on{border-color:var(--green);color:var(--green);background:var(--green-glow);}
.viz-view-stack{
position:relative;
width:100%;
min-height:min(58vh,540px);
height:min(58vh,540px);
}
#viz-wrap.viz-wrap--fs .viz-view-stack{
flex:1;
min-height:0!important;
height:auto!important;
}
#viz-canvas{
display:block;
position:absolute;
inset:0;
width:100%;
height:100%;
min-height:0!important;
cursor:crosshair;
touch-action:none;
}
.viz-3d-host{
position:absolute;
inset:0;
overflow:hidden;
background:#020206;
}
.viz-3d-host[hidden]{display:none!important;}
.viz-fs-head{
display:none;
flex-shrink:0;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
padding:10px 14px;
border-bottom:1px solid rgba(0,255,136,.2);
background:linear-gradient(180deg,rgba(10,14,22,.97) 0%,rgba(6,8,14,.92) 100%);
}
.viz-fs-head-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.viz-fs-title{
font-family:var(--font-display);
font-size:.62rem;
font-weight:800;
letter-spacing:.2em;
text-transform:uppercase;
color:var(--green);
}
.viz-fs-sub{font-size:.52rem;color:rgba(200,210,225,.75);font-family:var(--font-mono);}
.viz-fs-close{font-size:.55rem!important;padding:8px 16px!important;}
.viz-fs-esc{opacity:.75;font-size:.9em;}
.viz-open-stage{
position:absolute;
right:12px;
bottom:12px;
z-index:4;
padding:8px 14px;
border-radius:8px;
border:1px solid rgba(0,255,136,.45);
background:rgba(0,255,136,.12);
color:var(--green);
font-family:var(--font-display);
font-size:.48rem;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
cursor:pointer;
transition:background .15s,border-color .15s,transform .1s;
}
.viz-open-stage:hover{background:rgba(0,255,136,.22);border-color:var(--green);}
.viz-open-stage:active{transform:scale(.98);}
#viz-wrap.viz-wrap--fs{
position:fixed;
inset:0;
z-index:4500;
display:flex;
flex-direction:column;
border-radius:0;
border:none;
box-shadow:none;
}
#viz-wrap.viz-wrap--fs .viz-fs-head{display:flex;}
#viz-wrap.viz-wrap--fs .viz-open-stage{display:none;}
body.beam-viz-fs{overflow:hidden;}
/* ── Edit mode toggle + toolbar ────────────────── */
.viz-fs-actions{display:flex;gap:8px;align-items:center;flex-shrink:0;}
.viz-edit-toggle{
font-size:.50rem!important;padding:7px 16px!important;
border:1px solid rgba(0,168,255,.5)!important;
background:rgba(0,168,255,.1)!important;
color:rgba(0,168,255,.92)!important;
letter-spacing:.12em;text-transform:uppercase;
font-weight:700;border-radius:6px;
transition:background .15s,border-color .15s;cursor:pointer;
}
.viz-edit-toggle:hover{background:rgba(0,168,255,.22)!important;border-color:rgba(0,168,255,.7)!important;}
.viz-edit-toggle.active{
border-color:rgba(255,180,0,.6)!important;
background:rgba(255,180,0,.15)!important;
color:rgba(255,200,50,.95)!important;
}
.viz-edit-toggle.active:hover{background:rgba(255,180,0,.28)!important;}
.viz-3d-edit-bar{
position:absolute;
top:8px;left:50%;transform:translateX(-50%);
z-index:12;display:flex;gap:4px;
padding:4px 8px;border-radius:8px;
background:rgba(10,14,22,.88);
border:1px solid rgba(0,168,255,.35);
backdrop-filter:blur(8px);
}
.viz-3d-edit-bar[hidden]{display:none!important;}
.viz-edit-tool{
padding:5px 12px;border:1px solid rgba(140,160,200,.25);
border-radius:5px;background:transparent;
color:rgba(180,200,220,.85);
font-family:var(--font-display);font-size:.44rem;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;
cursor:pointer;transition:background .12s,border-color .12s,color .12s;
white-space:nowrap;
}
.viz-edit-tool:hover{border-color:rgba(0,168,255,.5);color:rgba(0,168,255,.95);background:rgba(0,168,255,.08);}
.viz-edit-tool.on{border-color:rgba(0,168,255,.6);color:rgba(0,200,255,1);background:rgba(0,168,255,.16);}
.viz-edit-tool[data-tool="deleteSelected"]{color:rgba(255,100,80,.85);}
.viz-edit-tool[data-tool="deleteSelected"]:hover{border-color:rgba(255,80,60,.5);color:rgba(255,80,60,1);background:rgba(255,60,40,.12);}
.viz-edit-sep{width:1px;height:22px;background:rgba(140,160,200,.18);margin:0 4px;}
/* ── Add Fixture / Object compact dialog ───── */
.viz-add-fx-dialog{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
z-index:20;min-width:240px;max-width:320px;
padding:14px 18px;border-radius:10px;
background:rgba(10,14,22,.95);border:1px solid rgba(0,168,255,.4);
backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:8px;
}
.viz-add-fx-dialog[hidden]{display:none!important;}
.viz-add-fx-title{
font-family:var(--font-display);font-size:.52rem;font-weight:800;
letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:2px;
}
.viz-add-fx-lbl{
display:flex;flex-direction:column;gap:2px;
font-size:.44rem;color:rgba(180,200,220,.75);font-family:var(--font-mono);
letter-spacing:.06em;text-transform:uppercase;
}
.viz-add-fx-input{
padding:5px 8px;border-radius:5px;border:1px solid rgba(140,160,200,.3);
background:rgba(20,24,34,.8);color:var(--text);
font-family:var(--font-mono);font-size:.48rem;
}
.viz-add-fx-input:focus{border-color:rgba(0,168,255,.6);outline:none;}
.viz-add-fx-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:4px;}
.setup-viz-card .viz-hint,
#viz-hint.viz-hint{
font-size:.64rem;
color:rgba(210,222,235,.92);
line-height:1.55;
margin:0 0 12px;
max-width:62rem;
}
.setup-safety-card .setup-safety-lead{
font-size:.6rem;
color:rgba(200,210,225,.88);
line-height:1.5;
margin:-4px 0 12px;
}
.setup-safety-card .setup-safety-sl{margin-bottom:14px!important;}
.setup-safety-card .setup-safety-sl:last-of-type{margin-bottom:0!important;}
.setup-safety-card .sl-head{font-size:.72rem;}
.setup-safety-card .sl-lbl{font-weight:600;letter-spacing:1.2px;color:#e4eaf2;}
.setup-safety-card .sl-val{font-size:.74rem;font-weight:700;color:var(--green);font-family:var(--font-mono);}
.setup-safety-card input[type=range].strobe,
.setup-safety-card input[type=range].speed{
width:100%;
height:14px;
margin-top:6px;
accent-color:var(--green);
}
/* ══ 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{
width:100%;
min-width:0;
min-height:30px;
box-sizing:border-box;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
padding:6px 10px;
border-radius:6px;
border:1px solid var(--border);
background:var(--s2);
color:var(--text);
cursor:pointer;
font-size:.58rem;
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 — Professional Sectioned Layout ══ */
.stg{
display:grid;grid-template-columns:210px 1fr;gap:0;
max-width:1000px;margin:0 auto;
min-height:calc(100vh - 140px);
}
/* ── Sidebar Navigation ── */
.stg-nav{
position:sticky;top:90px;align-self:start;
padding:4px 0 8px 0;
border-right:1px solid var(--border);
display:flex;flex-direction:column;gap:1px;
}
.stg-nav-item{
display:flex;align-items:center;gap:10px;
padding:10px 16px;border-radius:8px 0 0 8px;
font-size:.6rem;letter-spacing:.5px;color:var(--muted);
cursor:pointer;transition:all .18s;
border:1px solid transparent;border-right:none;
position:relative;
}
.stg-nav-item svg{opacity:.5;transition:opacity .18s;flex-shrink:0;}
.stg-nav-item:hover{color:var(--text);background:rgba(255,255,255,.02);}
.stg-nav-item:hover svg{opacity:.8;}
.stg-nav-item.active{
color:var(--green);background:rgba(0,255,136,.04);
border-color:var(--border);border-right-color:transparent;
margin-right:-1px;
}
.stg-nav-item.active svg{opacity:1;stroke:var(--green);}
.stg-nav-item.active::after{
content:'';position:absolute;right:-1px;top:0;bottom:0;width:2px;
background:var(--green);
}
/* ── Main Content ── */
.stg-main{
padding:8px 16px 40px 32px;
overflow-y:auto;
max-width:680px;
}
.settings-dl-btn-row{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:4px;
}
.settings-dl-btn-row .stg-btn{
flex:1;
min-width:140px;
}
.stg-section{display:none;}
.stg-section.active{display:block;}
.stg-section.active .stg-card{
animation:stg-card-in .35s cubic-bezier(.16,1,.3,1) both;
}
.stg-section.active .stg-card:nth-child(2){animation-delay:.04s;}
.stg-section.active .stg-card:nth-child(3){animation-delay:.08s;}
.stg-section.active .stg-card:nth-child(4){animation-delay:.12s;}
.stg-section.active .stg-card:nth-child(5){animation-delay:.16s;}
.stg-section.active .stg-section-head{
animation:stg-card-in .3s cubic-bezier(.16,1,.3,1) both;
}
@keyframes stg-card-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.stg-section-head{
margin-bottom:20px;padding-bottom:14px;
border-bottom:1px solid var(--border);
position:relative;
}
.stg-section-head::after{
content:'';position:absolute;bottom:-1px;left:0;width:48px;height:2px;
background:var(--green);border-radius:1px;
}
.stg-section-title{
font-family:var(--font-display);font-size:.82rem;font-weight:800;
letter-spacing:3px;color:var(--text);margin-bottom:6px;
}
.stg-section-sub{font-size:.56rem;color:var(--muted);line-height:1.5;}
/* ── Cards ── */
.stg-card{
background:var(--s1);border:1px solid var(--border);border-radius:14px;
padding:20px 22px;margin-bottom:14px;
transition:border-color .25s,box-shadow .25s;
}
.stg-card:hover{
border-color:var(--border2);
box-shadow:0 2px 12px rgba(0,0,0,.12);
}
.stg-card-head{
font-family:var(--font-display);font-size:.52rem;font-weight:700;
letter-spacing:2.5px;color:var(--muted);margin-bottom:14px;
padding-bottom:10px;border-bottom:1px solid var(--border);
display:flex;align-items:center;gap:8px;
}
.stg-card-danger{border-color:rgba(255,34,68,.2);}
.stg-card-danger .stg-card-head{color:var(--red);border-bottom-color:rgba(255,34,68,.15);}
/* ── Fields ── */
.stg-field{margin-bottom:12px;}
.stg-field:last-child{margin-bottom:0;}
.stg-label{
display:block;font-size:.48rem;letter-spacing:2px;
color:var(--muted);margin-bottom:6px;text-transform:uppercase;
}
.stg-value{
font-size:.72rem;color:var(--text);
padding:8px 0;
}
.stg-value-mono{font-family:var(--font-mono);font-size:.62rem;color:var(--blue);}
.stg-field-row{
display:grid;grid-template-columns:1fr 1fr;gap:16px;
margin-bottom:12px;
}
.stg-form-grid{
display:grid;grid-template-columns:1fr;gap:10px;
margin-bottom:12px;
}
.stg-hint{
font-size:.5rem;color:var(--muted);line-height:1.5;
margin-top:4px;
}
/* ── Inputs ── */
.stg-input{
width:100%;height:40px;padding:0 14px;box-sizing:border-box;
background:var(--s2);border:1px solid var(--border);border-radius:10px;
color:var(--text);font-family:var(--font-mono);font-size:.72rem;
outline:none;transition:border-color .18s,box-shadow .18s;
}
.stg-input:focus{
border-color:var(--green);
box-shadow:0 0 0 3px rgba(0,255,136,.08);
}
.stg-input::placeholder{color:#4a4a6a;}
/* ── Toggle Switch ── */
.stg-switch{position:relative;display:inline-flex;cursor:pointer;flex-shrink:0;}
.stg-switch input{position:absolute;opacity:0;width:0;height:0;}
.stg-switch-track{
display:block;width:44px;height:24px;border-radius:12px;
background:var(--s3);border:1px solid var(--border);
transition:all .25s cubic-bezier(.16,1,.3,1);
position:relative;
}
.stg-switch-thumb{
position:absolute;top:2px;left:2px;
width:18px;height:18px;border-radius:50%;
background:var(--muted);
transition:all .25s cubic-bezier(.16,1,.3,1);
}
.stg-switch input:checked+.stg-switch-track{
background:rgba(0,255,136,.15);border-color:var(--green);
}
.stg-switch input:checked+.stg-switch-track .stg-switch-thumb{
transform:translateX(20px);background:var(--green);
box-shadow:0 0 8px rgba(0,255,136,.4);
}
/* ── Toggle Row ── */
.stg-toggle-row{
display:flex;align-items:center;justify-content:space-between;
gap:16px;padding:11px 0;
border-bottom:1px solid rgba(255,255,255,.03);
transition:background .15s;border-radius:6px;
}
.stg-toggle-row:hover{background:rgba(255,255,255,.01);}
.stg-toggle-row:last-child{border-bottom:none;padding-bottom:0;}
.stg-toggle-row:first-of-type{padding-top:0;}
.stg-toggle-label{font-size:.65rem;color:var(--text);margin-bottom:3px;font-weight:500;}
.stg-toggle-desc{font-size:.5rem;color:var(--muted);line-height:1.4;max-width:320px;}
/* ── Radio Card Group ── */
.stg-radio-group{
display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;
}
.stg-radio-card{
display:flex;align-items:flex-start;gap:10px;
padding:14px;border-radius:10px;cursor:pointer;
background:var(--s2);border:1px solid var(--border);
transition:all .2s;
}
.stg-radio-card:hover{border-color:var(--border2);}
.stg-radio-card input{
margin-top:2px;accent-color:var(--green);flex-shrink:0;
width:16px;height:16px;
}
.stg-radio-card:has(input:checked){
border-color:var(--green);background:rgba(0,255,136,.03);
}
.stg-radio-title{font-size:.6rem;color:var(--text);font-weight:600;margin-bottom:2px;}
.stg-radio-desc{font-size:.48rem;color:var(--muted);line-height:1.4;}
/* ── Range Slider ── */
.stg-range-row{display:flex;align-items:center;gap:12px;}
.stg-range{
flex:1;height:6px;-webkit-appearance:none;appearance:none;
background:var(--s3);border-radius:3px;outline:none;
}
.stg-range::-webkit-slider-thumb{
-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
background:var(--green);cursor:pointer;
box-shadow:0 0 8px rgba(0,255,136,.3);
}
.stg-range-val{
font-family:var(--font-mono);font-size:.7rem;font-weight:700;
color:var(--green);min-width:50px;text-align:right;
}
/* ── Buttons ── */
.stg-actions{
display:flex;align-items:center;justify-content:flex-end;gap:8px;
}
.stg-btn{
padding:9px 20px;border-radius:9px;
font-family:var(--font-mono);font-size:.58rem;letter-spacing:1.5px;
cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);border:1px solid;
display:inline-flex;align-items:center;justify-content:center;
}
.stg-btn:active{transform:scale(.97);}
.stg-btn-outline{
background:transparent;border-color:var(--border2);color:var(--muted);
}
.stg-btn-outline:hover{border-color:var(--text);color:var(--text);background:rgba(255,255,255,.02);}
.stg-btn-primary{
background:rgba(0,255,136,.08);border-color:var(--green);color:var(--green);
}
.stg-btn-primary:hover{
background:var(--green);color:#000;
box-shadow:0 0 16px rgba(0,255,136,.25);
}
.stg-btn-danger{
background:rgba(255,34,68,.06);border-color:rgba(255,34,68,.3);color:var(--red);
}
.stg-btn-danger:hover{background:rgba(255,34,68,.12);border-color:var(--red);box-shadow:0 0 12px rgba(255,34,68,.15);}
/* ── Role Badge ── */
.stg-role-badge{
display:inline-flex;align-items:center;gap:5px;
padding:4px 12px;border-radius:6px;
font-size:.5rem;letter-spacing:1.5px;font-weight:700;
text-transform:uppercase;
background:rgba(0,255,136,.08);color:var(--green);
border:1px solid rgba(0,255,136,.2);
}
.stg-role-badge::before{
content:'';width:6px;height:6px;border-radius:50%;
background:currentColor;flex-shrink:0;
}
.stg-role-badge[data-role="admin"]{
background:rgba(168,85,247,.1);color:#a855f7;
border-color:rgba(168,85,247,.25);
}
.stg-role-badge[data-role="programmer"]{
background:rgba(0,170,255,.1);color:var(--blue);
border-color:rgba(0,170,255,.25);
}
.stg-role-badge[data-role="operator"]{
background:rgba(234,179,8,.1);color:#eab308;
border-color:rgba(234,179,8,.25);
}
.stg-role-badge[data-role="viewer"]{
background:rgba(255,255,255,.04);color:var(--muted);
border-color:var(--border);
}
/* ── Status Pill ── */
.stg-status-pill{
display:inline-flex;align-items:center;gap:6px;
padding:6px 12px;border-radius:8px;
background:var(--s2);font-size:.55rem;color:var(--muted);
border:1px solid var(--border);
}
.stg-status-dot{
width:8px;height:8px;border-radius:50%;
background:var(--muted);
}
.stg-status-pill.ok .stg-status-dot{background:var(--green);box-shadow:0 0 6px rgba(0,255,136,.5);}
.stg-status-pill.ok{color:var(--green);border-color:rgba(0,255,136,.2);}
.stg-status-pill.err .stg-status-dot{background:var(--red);box-shadow:0 0 6px rgba(255,34,68,.5);}
.stg-status-pill.err{color:var(--red);border-color:rgba(255,34,68,.2);}
/* ── Messages ── */
.stg-msg{font-size:.55rem;color:var(--muted);}
.stg-msg.ok{color:var(--green);}
.stg-msg.err{color:var(--red);}
/* ── About Section ── */
.stg-about-card{text-align:center;padding:32px 24px;}
.stg-about-logo{
font-family:var(--font-display);font-size:1.2rem;font-weight:900;
letter-spacing:8px;color:var(--green);
text-shadow:0 0 20px rgba(0,255,136,.2);
margin-bottom:6px;
}
.stg-about-version{
font-family:var(--font-mono);font-size:.55rem;
color:var(--muted);margin-bottom:18px;
display:inline-block;
padding:3px 10px;border:1px solid var(--border);border-radius:6px;
background:var(--s2);
}
.stg-about-desc{
font-size:.58rem;color:var(--muted);
line-height:1.7;max-width:440px;margin:0 auto 18px;
}
.stg-about-tech{
display:flex;justify-content:center;gap:8px;flex-wrap:wrap;
margin-bottom:20px;
}
.stg-about-chip{
display:inline-block;padding:4px 10px;border-radius:6px;
font-size:.44rem;letter-spacing:1px;color:var(--muted);
background:var(--s2);border:1px solid var(--border);
font-family:var(--font-mono);
}
.stg-about-links{
display:flex;justify-content:center;gap:18px;
margin-bottom:18px;flex-wrap:wrap;
}
.stg-about-link{
display:inline-flex;align-items:center;gap:6px;
font-size:.52rem;color:var(--blue);text-decoration:none;
letter-spacing:.5px;transition:color .15s;
padding:6px 12px;border-radius:8px;
background:var(--s2);border:1px solid var(--border);
}
.stg-about-link:hover{color:var(--green);border-color:var(--green);}
.stg-about-copy{
font-size:.45rem;color:var(--muted);
letter-spacing:1.5px;opacity:.5;margin-top:4px;
}
/* ── Responsive ── */
@media(max-width:700px){
.stg{grid-template-columns:1fr;min-height:auto;}
.stg-nav{
position:static;flex-direction:row;overflow-x:auto;
border-right:none;border-bottom:1px solid var(--border);
padding:8px 8px 0;gap:0;
}
.stg-nav-item{
padding:8px 12px;border-radius:8px 8px 0 0;
white-space:nowrap;font-size:.5rem;
border:1px solid transparent;border-bottom:none;
}
.stg-nav-item.active::after{display:none;}
.stg-nav-item.active{border-color:var(--border);margin-right:0;}
.stg-main{padding:16px 0 40px;}
.stg-field-row{grid-template-columns:1fr;}
.stg-radio-group{grid-template-columns:1fr;}
.stg-radio-group-iconic{grid-template-columns:repeat(3,1fr);}
.stg-server-grid{grid-template-columns:1fr;}
.stg-export-grid{grid-template-columns:1fr;}
.stg-stats-grid{grid-template-columns:repeat(2,1fr);}
.stg-nav-search-wrap{display:none;}
}
/* ── Storage Usage ── */
.stg-storage-usage{
display:flex;align-items:center;gap:10px;margin-top:12px;
padding-top:12px;border-top:1px solid rgba(255,255,255,.03);
}
.stg-storage-bar{
flex:1;height:6px;background:var(--s3);border-radius:3px;overflow:hidden;
}
.stg-storage-bar-fill{
height:100%;border-radius:3px;background:var(--green);
transition:width .4s ease;
}
.stg-storage-text{
font-family:var(--font-mono);font-size:.48rem;color:var(--muted);
min-width:80px;text-align:right;white-space:nowrap;
}
/* ── Export Grid ── */
.stg-export-grid{
display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.stg-export-btn{
display:flex;flex-direction:column;align-items:center;gap:6px;
padding:18px 14px;border-radius:10px;cursor:pointer;
background:var(--s2);border:1px solid var(--border);
color:var(--muted);transition:all .2s cubic-bezier(.16,1,.3,1);
text-align:center;
}
.stg-export-btn:hover{
border-color:var(--green);color:var(--green);
background:rgba(0,255,136,.03);
transform:translateY(-1px);
}
.stg-export-btn svg{opacity:.5;transition:opacity .2s;}
.stg-export-btn:hover svg{opacity:1;stroke:var(--green);}
.stg-export-label{font-size:.58rem;font-weight:600;color:var(--text);}
.stg-export-sub{font-size:.44rem;letter-spacing:.5px;opacity:.6;}
/* ── Danger Items ── */
.stg-danger-item{
display:flex;align-items:center;justify-content:space-between;
gap:16px;padding:12px 0;
border-bottom:1px solid rgba(255,34,68,.08);
}
.stg-danger-item:last-child{border-bottom:none;padding-bottom:0;}
.stg-danger-item:first-of-type{padding-top:0;}
/* ── Nav Search ── */
.stg-nav-search-wrap{
position:relative;padding:4px 10px 10px;
}
.stg-nav-search{
width:100%;height:32px;padding:0 10px 0 30px;box-sizing:border-box;
background:var(--s2);border:1px solid var(--border);border-radius:8px;
color:var(--text);font-family:var(--font-mono);font-size:.55rem;
outline:none;transition:border-color .18s;
}
.stg-nav-search:focus{border-color:var(--green);}
.stg-nav-search::placeholder{color:#4a4a6a;}
.stg-nav-search-icon{
position:absolute;left:18px;top:50%;transform:translateY(-30%);
opacity:.3;pointer-events:none;
}
/* ── Profile Hero ── */
.stg-profile-hero{
display:flex;align-items:center;gap:16px;
padding-bottom:14px;margin-bottom:2px;
}
.stg-avatar{
width:52px;height:52px;border-radius:50%;
background:linear-gradient(135deg,rgba(0,255,136,.15),rgba(0,170,255,.15));
border:2px solid rgba(0,255,136,.3);
display:flex;align-items:center;justify-content:center;
font-family:var(--font-display);font-size:.85rem;font-weight:900;
color:var(--green);letter-spacing:2px;
text-transform:uppercase;flex-shrink:0;
}
.stg-profile-info{display:flex;flex-direction:column;gap:6px;}
.stg-profile-name{
font-size:.78rem;font-weight:700;color:var(--text);
letter-spacing:.5px;
}
/* ── Password Input Wrap ── */
.stg-input-wrap{position:relative;}
.stg-input-wrap .stg-input{padding-right:40px;}
.stg-eye-btn{
position:absolute;right:8px;top:50%;transform:translateY(-50%);
background:none;border:none;cursor:pointer;padding:4px;
color:var(--muted);opacity:.5;transition:opacity .15s;
display:flex;align-items:center;justify-content:center;
}
.stg-eye-btn:hover{opacity:1;color:var(--green);}
.stg-eye-btn.active svg{stroke:var(--green);}
/* ── Password Strength ── */
.stg-pw-strength{
display:flex;align-items:center;gap:8px;margin-top:6px;
min-height:16px;
}
.stg-pw-bar{
flex:1;height:4px;background:var(--s3);border-radius:2px;overflow:hidden;
}
.stg-pw-bar-fill{
height:100%;width:0%;border-radius:2px;
transition:width .3s ease,background .3s ease;
}
.stg-pw-bar-fill.weak{width:25%;background:#ff2244;}
.stg-pw-bar-fill.fair{width:50%;background:#ff6b00;}
.stg-pw-bar-fill.good{width:75%;background:#eab308;}
.stg-pw-bar-fill.strong{width:100%;background:#00ff88;}
.stg-pw-text{
font-size:.42rem;letter-spacing:1px;color:var(--muted);
min-width:50px;text-align:right;
}
/* ── Accent Color Picker ── */
.stg-color-row{
display:flex;gap:10px;flex-wrap:wrap;
}
.stg-color-swatch{
width:32px;height:32px;border-radius:50%;cursor:pointer;
border:2px solid transparent;
background:var(--sw);
transition:all .2s cubic-bezier(.16,1,.3,1);
position:relative;
}
.stg-color-swatch:hover{transform:scale(1.15);}
.stg-color-swatch.active{
border-color:var(--text);
box-shadow:0 0 0 3px rgba(255,255,255,.1),0 0 12px var(--sw);
}
.stg-color-swatch.active::after{
content:'✓';position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
font-size:.55rem;font-weight:900;
color:#000;text-shadow:0 0 4px rgba(255,255,255,.5);
}
/* ── Shortcuts Table ── */
.stg-shortcuts{display:flex;flex-direction:column;gap:0;}
.stg-shortcut{
display:flex;align-items:center;justify-content:space-between;
padding:8px 0;
border-bottom:1px solid rgba(255,255,255,.03);
}
.stg-shortcut:last-child{border-bottom:none;}
.stg-shortcut-keys{display:flex;align-items:center;gap:4px;}
.stg-shortcut-keys kbd{
display:inline-flex;align-items:center;justify-content:center;
min-width:30px;height:28px;padding:0 9px;
background:var(--s2);border:1px solid var(--border2);border-radius:7px;
font-family:var(--font-mono);font-size:.58rem;font-weight:700;color:var(--text);
box-shadow:0 1px 2px rgba(0,0,0,.3),inset 0 -1px 0 rgba(0,0,0,.2);
}
.stg-shortcut-desc{
font-size:.55rem;color:var(--muted);
}
/* ── Keyboard shortcuts guide (Settings) ── */
.stg-kb-doc{
margin:0 0 14px;
border:1px solid var(--border);
border-radius:10px;
background:var(--s2);
overflow:hidden;
}
.stg-kb-doc-summary{
list-style:none;
cursor:pointer;
padding:10px 12px;
font-size:.58rem;
font-weight:700;
letter-spacing:.04em;
color:var(--text);
user-select:none;
}
.stg-kb-doc-summary::-webkit-details-marker{display:none;}
.stg-kb-doc summary::after{
content:'▸';
float:right;
font-size:.65rem;
color:var(--muted);
transition:transform .15s ease;
}
.stg-kb-doc[open] summary::after{transform:rotate(90deg);}
.stg-kb-doc-body{
padding:0 12px 12px;
border-top:1px solid rgba(255,255,255,.04);
}
.stg-kb-doc-lead{
font-size:.52rem;color:var(--muted);
line-height:1.55;
margin:10px 0 12px;
}
.stg-kb-doc-h{
font-size:.48rem;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--green);
margin:14px 0 6px;
}
.stg-kb-doc-h:first-of-type{margin-top:4px;}
.stg-kb-doc-p{
font-size:.5rem;color:var(--muted);
line-height:1.55;
margin:0 0 8px;
}
.stg-kb-doc-p strong{color:var(--text);font-weight:600;}
.stg-kb-doc-note{
padding:8px 10px;
border-radius:8px;
background:rgba(0,255,136,.06);
border:1px solid rgba(0,255,136,.12);
}
.stg-kb-doc-ul{
margin:0 0 8px;
padding-left:1.1em;
font-size:.5rem;color:var(--muted);
line-height:1.55;
}
.stg-kb-doc-ul li{margin-bottom:6px;}
.stg-kb-doc-ul strong{color:var(--text);font-weight:600;}
.stg-kb-doc-body kbd{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:24px;height:24px;padding:0 7px;
margin:0 2px;
background:var(--s1);border:1px solid var(--border2);border-radius:6px;
font-family:var(--font-mono);font-size:.5rem;font-weight:700;color:var(--text);
vertical-align:middle;
}
.stg-kb-doc-body code{
font-family:var(--font-mono);
font-size:.48rem;
color:var(--orange);
background:rgba(255,60,110,.08);
padding:1px 5px;border-radius:4px;
}
/* ── Stats Grid ── */
.stg-stats-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
}
.stg-stat{
text-align:center;padding:12px 8px;
background:var(--s2);border-radius:10px;
border:1px solid var(--border);
}
.stg-stat-value{
font-family:var(--font-mono);font-size:.85rem;font-weight:700;
color:var(--green);margin-bottom:4px;
}
.stg-stat-label{
font-size:.42rem;letter-spacing:1.5px;color:var(--muted);
text-transform:uppercase;
}
/* ── DMX Channel Monitor ── */
.stg-dmx-monitor{
height:56px;display:flex;gap:1px;align-items:flex-end;
background:var(--s2);border-radius:8px;padding:4px;overflow:hidden;
}
.stg-dmx-bar{
flex:1;min-width:1px;border-radius:1px 1px 0 0;
background:var(--green);opacity:.8;
transition:height .15s ease;
}
.stg-dmx-bar.idle{background:#222;opacity:.4;}
.stg-dmx-monitor-empty{
width:100%;display:flex;align-items:center;justify-content:center;
font-size:.5rem;color:var(--muted);letter-spacing:1px;
}
.stg-dmx-monitor-legend{
display:flex;align-items:center;gap:14px;margin-top:8px;
font-size:.44rem;color:var(--muted);letter-spacing:.5px;
}
.stg-dmx-leg{display:flex;align-items:center;gap:5px;}
.stg-dmx-leg-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0;}
.stg-dmx-leg-info{margin-left:auto;font-family:var(--font-mono);color:var(--green);}
/* ── Iconic Radio Cards ── */
.stg-radio-group-iconic{grid-template-columns:repeat(3,1fr);}
.stg-radio-iconic{
flex-direction:column;align-items:center;text-align:center;
padding:16px 10px;gap:8px;
}
.stg-radio-iconic input{position:absolute;opacity:0;width:0;height:0;}
.stg-radio-icon{
width:44px;height:44px;border-radius:12px;
background:var(--s3);
display:flex;align-items:center;justify-content:center;
transition:all .25s cubic-bezier(.16,1,.3,1);
}
.stg-radio-icon svg{color:var(--muted);transition:color .2s;}
.stg-radio-iconic:has(input:checked) .stg-radio-icon{
background:rgba(0,255,136,.1);border:1px solid rgba(0,255,136,.3);
}
.stg-radio-iconic:has(input:checked) .stg-radio-icon svg{color:var(--green);}
.stg-radio-iconic .stg-radio-title{font-size:.56rem;}
.stg-radio-iconic .stg-radio-desc{font-size:.42rem;}
/* ── Server Info Grid ── */
.stg-server-grid{
display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.stg-server-item{display:flex;flex-direction:column;gap:4px;}
.stg-copyable{
cursor:pointer;position:relative;
padding:6px 10px;background:var(--s2);border-radius:6px;
border:1px solid var(--border);
transition:border-color .15s;
word-break:break-all;
}
.stg-copyable:hover{border-color:var(--green);}
.stg-copyable.copied::after{
content:'Copied!';position:absolute;right:8px;top:50%;transform:translateY(-50%);
font-size:.42rem;color:var(--green);animation:stg-copied .8s ease forwards;
}
@keyframes stg-copied{0%{opacity:1}80%{opacity:1}100%{opacity:0}}
/* ── Latency ── */
.stg-latency{
display:flex;align-items:center;gap:8px;
padding:6px 0;
}
.stg-latency-val{
font-family:var(--font-mono);font-size:.6rem;color:var(--green);font-weight:600;
min-width:45px;
}
.stg-latency-bars{display:flex;gap:2px;align-items:flex-end;}
.stg-latency-bar{
width:4px;border-radius:1px;background:var(--s3);
transition:all .3s;
}
.stg-latency-bar:nth-child(1){height:6px;}
.stg-latency-bar:nth-child(2){height:9px;}
.stg-latency-bar:nth-child(3){height:12px;}
.stg-latency-bar:nth-child(4){height:15px;}
.stg-latency-bar:nth-child(5){height:18px;}
.stg-latency-bars.good .stg-latency-bar{background:var(--green);}
.stg-latency-bars.ok .stg-latency-bar:nth-child(n+4){background:var(--s3);}
.stg-latency-bars.ok .stg-latency-bar:nth-child(-n+3){background:#eab308;}
.stg-latency-bars.slow .stg-latency-bar:nth-child(n+2){background:var(--s3);}
.stg-latency-bars.slow .stg-latency-bar:nth-child(1){background:var(--red);}
/* ── Audit Filters ── */
.stg-audit-filters{
display:flex;gap:6px;margin-bottom:12px;
}
.stg-audit-filter{
padding:5px 14px;border-radius:6px;
font-size:.48rem;letter-spacing:1px;cursor:pointer;
background:var(--s2);border:1px solid var(--border);color:var(--muted);
transition:all .15s;
}
.stg-audit-filter:hover{color:var(--text);border-color:var(--border2);}
.stg-audit-filter.active{
background:rgba(0,255,136,.06);border-color:var(--green);color:var(--green);
}
.stg-audit-list{
max-height:320px;overflow-y:auto;
display:flex;flex-direction:column;gap:0;
}
.stg-audit-row{
display:grid;grid-template-columns:100px 90px 1fr;gap:10px;
padding:8px 10px;border-radius:6px;
font-size:.52rem;align-items:center;
border-bottom:1px solid rgba(255,255,255,.02);
}
.stg-audit-row:hover{background:rgba(255,255,255,.015);}
.stg-audit-time{font-family:var(--font-mono);color:var(--muted);font-size:.46rem;}
.stg-audit-event{
display:inline-flex;align-items:center;gap:4px;
padding:2px 8px;border-radius:4px;
font-size:.44rem;letter-spacing:.5px;font-weight:600;
}
.stg-audit-event.login{background:rgba(0,255,136,.08);color:var(--green);}
.stg-audit-event.fail{background:rgba(255,34,68,.08);color:var(--red);}
.stg-audit-event.register{background:rgba(0,170,255,.08);color:var(--blue);}
.stg-audit-user{color:var(--text);}
.stg-audit-empty{
padding:20px;text-align:center;color:var(--muted);
font-size:.5rem;letter-spacing:1px;
}
.stg-badge{
margin-left:auto;
display:inline-flex;align-items:center;justify-content:center;
min-width:20px;height:20px;padding:0 6px;
border-radius:10px;font-size:.42rem;font-weight:700;
background:rgba(0,255,136,.1);color:var(--green);
font-family:var(--font-mono);
}
/* ── Custom Scrollbar ── */
.stg-main::-webkit-scrollbar,.stg-audit-list::-webkit-scrollbar{
width:6px;
}
.stg-main::-webkit-scrollbar-track,.stg-audit-list::-webkit-scrollbar-track{
background:transparent;
}
.stg-main::-webkit-scrollbar-thumb,.stg-audit-list::-webkit-scrollbar-thumb{
background:var(--border);border-radius:3px;
}
.stg-main::-webkit-scrollbar-thumb:hover,.stg-audit-list::-webkit-scrollbar-thumb:hover{
background:var(--border2);
}
/* ── Card Head Icon Tint ── */
.stg-card-head svg{opacity:.4;flex-shrink:0;}
.stg-card:hover .stg-card-head svg{opacity:.6;}
/* ── Nav item highlight matching search ── */
.stg-nav-item.match{background:rgba(0,255,136,.06);}
.stg-nav-item.hidden{display:none;}
.stg-card.stg-search-match{border-color:var(--green);box-shadow:0 0 0 1px rgba(0,255,136,.15);}
/* keep old class aliases for backward compat with audit table */
.settings-msg{font-size:.55rem;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 8px;
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:flex;
flex-direction:column;
gap:8px;
align-items:stretch;
min-height:0;
}
#page-music .music-main{display:flex;flex-direction:column;gap:6px;min-width:0;flex:0 1 auto;min-height:0;}
.music-performance{
display:flex;
flex-direction:column;
gap:8px;
min-width:0;
background:linear-gradient(180deg,#16161e 0%,#12131a 100%);
border:1px solid #2a2a34;
border-radius:12px;
padding:10px 12px 10px;
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;
overflow:hidden;
box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 4px 20px rgba(0,0,0,.25);
}
.music-tracks-dock{
position:relative;
flex-shrink:0;
padding:10px 12px 12px;
border-radius:12px;
gap:10px;
max-height:none;
}
/* Library dock sits directly under the deck performance card for fast drag to decks */
.music-main > .music-dock-under-decks{
margin-top:0;
}
.music-dock-under-decks .music-pl-list,
.music-dock-under-decks .music-recent-list{
max-height:min(50vh,480px);
}
.music-dock-head{
display:flex;
flex-wrap:wrap;
align-items:flex-end;
justify-content:space-between;
gap:8px 20px;
padding-bottom:10px;
margin-bottom:2px;
border-bottom:1px solid rgba(255,255,255,.07);
}
.music-dock-head .music-sidebar-title{
border-bottom:none;
padding-bottom:0;
margin:0;
}
.music-dock-hint{flex:1;min-width:200px;max-width:720px;margin:0!important;}
.music-dock-columns{
display:grid;
grid-template-columns:minmax(300px,1.15fr) minmax(260px,1fr);
gap:16px;
align-items:stretch;
min-height:0;
}
#page-music .music-dock-columns{
align-items:start;
}
.music-dock-col{min-height:0;}
@media(max-width:1020px){
.music-dock-columns{grid-template-columns:1fr;}
}
.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(200px,28vh);}
.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;
-webkit-user-drag:element;
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-pl-head{display:none;}
/* Serato-inspired browser table skin for MUSIC page */
#page-music.serato-like{
--serato-bg:#090b0f;
--serato-row:#0f1319;
--serato-row-alt:#0d1117;
--serato-line:#1f2631;
--serato-head:#111821;
}
#page-music.serato-like .music-performance{
background:linear-gradient(180deg,#0c1016 0%,#090b10 100%);
border:1px solid #222a36;
}
#page-music.serato-like .dk-panel{
border-color:#2b3441;
background:linear-gradient(180deg,#10151d 0%,#0b1016 100%);
}
#page-music.serato-like #dj-top-bar{
background:#0d1219;
border-color:#273142;
box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
#page-music.serato-like .music-lib-card{
background:var(--serato-bg)!important;
border-color:#273142!important;
}
#page-music.serato-like .music-pl-drop{
min-height:34px;
font-size:.5rem;
letter-spacing:1px;
border-radius:6px;
border-color:#2a3647;
background:#0d131b;
}
#page-music.serato-like .music-pl-head{
display:grid;
grid-template-columns:minmax(220px,2.2fr) minmax(120px,1.3fr) 56px 56px 56px minmax(90px,1fr) 72px 56px;
gap:0;
align-items:center;
min-height:26px;
padding:0 8px;
border:1px solid var(--serato-line);
border-radius:6px 6px 0 0;
border-bottom:none;
background:var(--serato-head);
color:#8a96a8;
font-size:.47rem;
letter-spacing:1px;
text-transform:uppercase;
}
#page-music.serato-like .music-pl-list{
gap:0;
max-height:min(260px,36vh);
border:1px solid var(--serato-line);
border-radius:0 0 6px 6px;
overflow:auto;
background:var(--serato-bg);
}
#page-music.serato-like .music-pl-row{
display:grid;
grid-template-columns:minmax(220px,2.2fr) minmax(120px,1.3fr) 56px 56px 56px minmax(90px,1fr) 72px 56px;
gap:0;
align-items:center;
min-height:28px;
padding:0 8px;
border:none;
border-radius:0;
border-bottom:1px solid var(--serato-line);
background:var(--serato-row);
}
#page-music.serato-like .music-pl-row:nth-child(even){background:var(--serato-row-alt);}
#page-music.serato-like .music-pl-row:hover{background:#142034;box-shadow:none;}
#page-music.serato-like .music-pl-row.is-active{
background:linear-gradient(90deg,rgba(47,167,255,.26),rgba(47,167,255,.08));
border-bottom:1px solid rgba(47,167,255,.45);
}
#page-music.serato-like .music-pl-cell{
display:flex;align-items:center;min-width:0;
padding:0 6px;
font-size:.59rem;
color:#b9c2d0;
}
#page-music.serato-like .music-pl-cell.c-song{gap:8px;}
#page-music.serato-like .music-pl-dot{width:8px;height:8px;border-radius:50%;margin-top:0;flex:0 0 auto;}
#page-music.serato-like .music-pl-title{
font-size:.6rem;
font-weight:600;
color:#d7deea;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
#page-music.serato-like .music-pl-cell.c-bpm,
#page-music.serato-like .music-pl-cell.c-key,
#page-music.serato-like .music-pl-cell.c-plays,
#page-music.serato-like .music-pl-cell.c-len,
#page-music.serato-like .music-pl-cell.c-cmt{
justify-content:center;
font-family:var(--font-mono);
}
#page-music.serato-like .music-pl-rm{
color:#90a2b8!important;
padding:2px 4px!important;
font-size:.75rem!important;
}
#page-music.serato-like #decks-grid.music-deck-mixer-arena.layout-2{
grid-template-columns:minmax(360px,1fr) minmax(280px,.88fr) minmax(360px,1fr);
gap:10px;
}
#page-music.serato-like .music-mixer-column .music-mixer-wrap{
background:linear-gradient(180deg,#10161f 0%,#0b1016 100%);
border:1px solid #2a3342;
border-radius:14px;
}
#page-music.serato-like .music-mixer-column .dj-mixer-head{
border-bottom:1px solid #263243;
padding-bottom:8px;
}
#page-music.serato-like .music-mixer-column .dj-now-playing-card{
background:linear-gradient(180deg,#0e1720 0%,#0a131b 100%);
border:1px solid #1f3846;
}
#page-music.serato-like .music-mixer-column .dj-ch-strip{
border-radius:10px;
background:linear-gradient(180deg,#121a25 0%,#0d141d 100%);
border:1px solid #2a3442;
}
#page-music.serato-like .music-mixer-column .dj-strip-fader{
filter:drop-shadow(0 0 8px rgba(255,255,255,.06));
}
#page-music.serato-like .dk-wave-wrap{
background:#060a11;
}
#page-music.serato-like .dk-wave-wrap canvas{
filter:saturate(1.15) contrast(1.05);
}
#page-music.serato-like .dk-pro-row{
background:#0c1219;
border-top:1px solid #212b39;
border-bottom:1px solid #212b39;
}
#page-music.serato-like .dk-transport{
background:#0a1017;
border-top:1px solid #243040;
}
#page-music.serato-like .dk-play-btn{
box-shadow:0 0 0 1px rgba(47,167,255,.5),0 0 12px rgba(47,167,255,.25);
}
#page-music.serato-like .music-show-bar,
#page-music.serato-like .music-bottom-grid{
display:none;
}
#page-music.serato-like .music-tracks-dock{
margin-top:8px;
border-color:#243041;
background:#0a0f15;
}
#page-music.serato-like .music-dock-columns{
max-height:none;
}
#page-music.serato-like .music-dj-shell{
padding:8px 10px 10px;
max-width:1600px;
margin:0 auto;
}
#page-music.serato-like .music-main{
gap:8px;
}
#page-music.serato-like .music-performance{
border-radius:14px;
padding:8px;
}
#page-music.serato-like #dj-top-bar{
min-height:38px;
padding:6px 10px;
border-radius:8px;
}
#page-music.serato-like .dj-deck-count{
padding:1px;
border-radius:6px;
}
#page-music.serato-like .dj-count-btn{
padding:4px 10px;
font-size:.5rem;
}
#page-music.serato-like .music-deck-mixer-arena.layout-2 #dk-C,
#page-music.serato-like .music-deck-mixer-arena.layout-2 #dk-D{
display:none!important;
}
#page-music.serato-like .music-deck-mixer-arena.layout-2 .music-mixer-column{
min-width:280px;
}
#page-music.serato-like .dk-panel{
border-radius:12px;
}
#page-music.serato-like .dk-hdr{
background:#131a24;
border-bottom:1px solid #263142;
padding:8px 10px 6px;
gap:6px;
}
#page-music.serato-like .dk-track-name{
font-size:.7rem;
letter-spacing:.2px;
}
#page-music.serato-like .dk-meta-row{
margin-top:3px;
gap:6px;
}
#page-music.serato-like .dk-time-hero{
min-width:136px;
padding:5px 9px 6px;
border-radius:8px;
background:#0f1520;
border:1px solid #2a3444;
}
#page-music.serato-like .dk-time-cur{
font-size:2.05rem;
line-height:.95;
}
#page-music.serato-like .dk-time-tot{
font-size:1rem;
}
#page-music.serato-like .dk-wave-wrap{
min-height:118px;
}
#page-music.serato-like .dk-pro-row{
padding:6px 8px;
gap:8px;
}
#page-music.serato-like .dk-knob-wheel{
width:38px;
height:38px;
}
#page-music.serato-like .dk-knob-filter .dk-knob-wheel{
width:42px;
height:42px;
}
#page-music.serato-like .dk-hotpads{
grid-template-columns:repeat(4,28px);
gap:5px;
}
#page-music.serato-like .dk-hc{
height:26px;
font-size:.43rem;
border-radius:6px;
}
#page-music.serato-like .dk-dj-row{
padding:6px 8px;
gap:7px;
}
#page-music.serato-like .dk-field input[type=range]{
width:74px;
}
#page-music.serato-like .dk-transport{
padding:5px 7px;
}
#page-music.serato-like .dk-play-btn{
width:34px;
height:34px;
}
#page-music.serato-like .music-mixer-column .dj-now-meta{
font-size:.42rem;
}
#page-music.serato-like .music-tracks-dock{
max-height:38px;
overflow:hidden;
border-radius:10px;
}
#page-music.serato-like .music-dock-head{
padding:6px 10px;
}
.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(420px,46vh);padding-right:2px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent;}
.music-recent-list::-webkit-scrollbar{width:5px;}
.music-recent-list::-webkit-scrollbar-track{background:transparent;}
.music-recent-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px;}
.music-recent-list::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25);}
.music-tracks-dock .music-recent-section{
border-top:none;
padding-top:0;
flex:0 1 auto;
min-height:0;
}
.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;
-webkit-user-drag:element;
user-select:none;
-webkit-user-select:none;
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;}
/* Hits go to the row so HTML5 drag uses the draggable row (not a text selection on the title). */
.music-recent-row > *{pointer-events:none;}
.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-recent-bpm{font-family:var(--font-mono);font-size:.56rem;font-weight:700;color:var(--green);letter-spacing:.5px;white-space:nowrap;flex-shrink:0;padding:2px 6px;border-radius:4px;background:rgba(0,255,136,.08);border:1px solid rgba(0,255,136,.15);}
.music-recent-bpm.no-bpm{color:var(--dim);background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.06);}
.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:6px 6px 8px;
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:6px;
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:6px;
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 8px;
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:4px;
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%;
flex:0 0 auto;
margin-top:0;
}
/* 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:8px 10px 8px;
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:2px;}
.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:2px;line-height:1.35;}
.dj-now-dominant{font-size:.4rem;color:var(--orange);margin-top:4px;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;line-clamp:2;-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-sidebar{max-height:none;}
}
/* Force Serato-like layout on /app Music even without extra class/cache quirks */
#page-music .music-show-bar,
#page-music .music-bottom-grid{
display:none!important;
}
#page-music .music-performance{
border-radius:0!important;
border-left:none!important;
border-right:none!important;
padding:4px 0 0!important;
background:linear-gradient(180deg,#11151b 0%,#080b10 100%)!important;
}
#page-music #dj-top-bar{
border-radius:0!important;
border-left:none!important;
border-right:none!important;
min-height:34px;
margin-bottom:4px!important;
background:linear-gradient(180deg,#2b2f36 0%,#161b22 100%)!important;
}
#page-music #dj-top-bar::before{
content:"BEAM DJ PRO";
position:absolute;
left:50%;
transform:translateX(-50%);
top:7px;
font-family:var(--font-display);
font-size:.82rem;
letter-spacing:.5px;
color:#eef3ff;
pointer-events:none;
}
#page-music #dj-top-bar{position:relative;}
#page-music #decks-grid.music-deck-mixer-arena{
gap:2px!important;
}
#page-music .dk-panel,
#page-music .music-mixer-column .music-mixer-wrap{
border-radius:0!important;
}
#page-music .dk-hdr{
border-bottom:1px solid #2a313f!important;
padding:6px 8px 5px!important;
}
#page-music .dk-wave-wrap{
min-height:92px!important;
}
#page-music .dk-pro-row,
#page-music .dk-dj-row,
#page-music .dk-transport{
border-radius:0!important;
}
#page-music #decks-grid.music-deck-mixer-arena{
grid-template-columns:minmax(360px,1fr) minmax(280px,.88fr) minmax(360px,1fr)!important;
grid-template-rows:auto!important;
}
#page-music #decks-grid.music-deck-mixer-arena #dk-C,
#page-music #decks-grid.music-deck-mixer-arena #dk-D{
display:none!important;
}
#page-music #decks-grid.music-deck-mixer-arena #dk-A{grid-column:1!important;grid-row:1!important;}
#page-music #decks-grid.music-deck-mixer-arena #dk-B{grid-column:3!important;grid-row:1!important;}
#page-music #decks-grid.music-deck-mixer-arena .music-mixer-column{grid-column:2!important;grid-row:1!important;}
#page-music .music-tracks-dock{
max-height:none!important;
overflow:visible!important;
border-radius:0!important;
margin-top:2px!important;
border-left:none!important;
border-right:none!important;
background:#0b0f14!important;
}
#page-music .music-dock-columns{
grid-template-columns:220px minmax(420px,1fr) 320px!important;
gap:8px!important;
align-items:stretch;
}
#page-music .music-crates-col .music-lib-card{
min-height:292px;
}
#page-music .music-crates-tree{
max-height:250px;
overflow:auto;
border:1px solid #202833;
background:#0f1319;
border-radius:6px;
padding:4px 0;
}
#page-music .music-crates-tree .crate-row{
font-size:.56rem;
color:#c2cad7;
padding:4px 10px;
line-height:1.45;
cursor:pointer;
}
#page-music .music-crates-tree .crate-row.group{color:#e2e8f5;font-weight:600;}
#page-music .music-crates-tree .crate-row.sub{padding-left:22px;color:#9eabc0;}
#page-music .music-crates-tree .crate-row.active{background:#174e7d;color:#eaf4ff;}
#page-music .music-browser-tabs{
display:flex;
gap:2px;
margin-bottom:4px;
}
#page-music .music-browser-tabs .tab{
font-size:.5rem;
letter-spacing:.6px;
color:#aab5c8;
background:#151b24;
border:1px solid #2a3340;
border-radius:4px 4px 0 0;
padding:4px 8px;
}
#page-music .music-browser-tabs .tab.active{
background:#0e131b;
color:#e5ecf9;
}
#page-music .music-recent-section{
display:none!important;
}
/* Pixel-match pass: Serato-like top section */
#page-music #dj-top-bar{
min-height:30px!important;
padding:4px 8px!important;
}
#page-music #dj-top-bar::before{
content:"serato DJ Pro";
font-size:.95rem!important;
letter-spacing:.2px!important;
top:5px!important;
}
#page-music #decks-grid.music-deck-mixer-arena{
margin-top:0!important;
grid-template-columns:minmax(420px,1fr) 190px minmax(420px,1fr)!important;
gap:0!important;
border-top:1px solid #2b3341;
}
#page-music .dk-panel{
border-top:none!important;
border-radius:0!important;
min-height:194px;
}
#page-music .music-mixer-column .music-mixer-wrap{
border-top:none!important;
border-radius:0!important;
min-height:194px;
}
#page-music .dk-hdr{
background:#171c24!important;
padding:4px 8px 4px!important;
min-height:56px;
}
#page-music .dk-id{
width:18px;
height:18px;
border-radius:4px;
font-size:.58rem;
}
#page-music .dk-track-name{
font-size:.56rem!important;
font-weight:700;
}
#page-music .dk-meta-row{
margin-top:1px!important;
gap:6px!important;
}
#page-music .dk-bpm,#page-music .dk-key,#page-music .dk-cue-hint{
font-size:.45rem!important;
}
#page-music .dk-time-hero{
min-width:120px!important;
padding:2px 8px!important;
border-radius:5px!important;
}
#page-music .dk-time-cur{
font-size:1.65rem!important;
}
#page-music .dk-time-tot{
font-size:.82rem!important;
}
#page-music .dk-wave-wrap{
display:none!important;
}
#page-music .dk-pro-row{
padding:6px 8px!important;
min-height:56px;
border-top:none!important;
}
#page-music .dk-knob-wheel{width:34px!important;height:34px!important;}
#page-music .dk-knob-filter .dk-knob-wheel{width:36px!important;height:36px!important;}
#page-music .dk-hotpads{
grid-template-columns:repeat(4,25px)!important;
gap:4px!important;
}
#page-music .dk-hc{
height:23px!important;
font-size:.38rem!important;
}
#page-music .dk-dj-row{
padding:5px 8px!important;
gap:6px!important;
align-items:flex-start!important;
}
#page-music .dk-loop-zone{
display:flex;
flex-direction:column;
gap:4px;
min-width:0;
flex:1 1 260px;
}
#page-music .dk-loop-actions{
display:flex;
align-items:center;
gap:4px;
flex-wrap:nowrap;
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:thin;
}
#page-music .dk-loop-edge{
padding:0 7px;
height:22px;
border-radius:4px;
border:1px solid #2b3442;
background:#121923;
color:#c6d2e8;
font-family:var(--font-mono);
font-size:.46rem;
letter-spacing:.5px;
cursor:pointer;
}
#page-music .dk-loop-edge:hover{border-color:#3f82bf;color:#eaf3ff;}
#page-music .dk-loop-edge.on{border-color:#2b87d8;color:#7fc8ff;background:rgba(36,122,214,.14);}
#page-music .dk-loop-btns{
display:flex!important;
flex-wrap:nowrap;
gap:4px;
align-items:center;
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:thin;
}
#page-music .dk-loop-btn{
min-width:26px;
height:22px;
font-size:.48rem;
padding:0 8px;
}
#page-music .dk-field input[type=range]{
width:70px!important;
}
#page-music .dk-transport{
padding:4px 8px!important;
}
#page-music .dk-play-btn{
width:30px!important;
height:30px!important;
}
#page-music .dk-cue-btn,#page-music .dk-tbtn,#page-music .dk-dropzone{
height:25px!important;
font-size:.42rem!important;
}
#page-music .music-mixer-column .dj-now-playing-card{
min-height:58px;
}
#page-music .music-mixer-column .dj-ch-strip{
padding:6px 5px 7px!important;
}
#page-music .music-mixer-column .dj-ch-meter{height:78px!important;}
#page-music .serato-master-wave{
display:block;
background:#070b11;
border-top:1px solid #2a3341;
border-bottom:1px solid #2a3341;
}
#page-music .serato-master-wave canvas{
width:100%;
height:84px;
background:#070b11;
}
/* Usability reset: keep top clean + real deck waveforms for beat matching */
#page-music #dj-top-bar::before{content:none!important;}
#page-music #decks-grid.music-deck-mixer-arena{
grid-template-columns:minmax(360px,1fr) minmax(260px,.82fr) minmax(360px,1fr)!important;
gap:6px!important;
}
#page-music .dk-wave-wrap{
display:block!important;
min-height:92px!important;
border-top:1px solid #2a3343!important;
border-bottom:1px solid #2a3343!important;
background:#050a12!important;
}
#page-music .dk-panel,
#page-music .music-mixer-column .music-mixer-wrap{
border-radius:8px!important;
}
#page-music .music-recent-section{display:flex!important;}
/* Tighten center mixer: less width + less empty vertical space */
#page-music #decks-grid.music-deck-mixer-arena{
grid-template-columns:minmax(380px,1fr) 210px minmax(380px,1fr)!important;
}
#page-music #decks-grid.music-deck-mixer-arena .music-mixer-column{
max-width:210px;
}
#page-music .music-mixer-column .music-mixer-wrap{
padding:6px 6px 4px!important;
}
#page-music .music-mixer-column .dj-mixer-console{
gap:6px!important;
}
#page-music .music-mixer-column .dj-mixer-head{
gap:6px!important;
padding:4px 4px 2px!important;
}
#page-music .music-mixer-column .dj-now-playing-card{
min-height:0!important;
padding:6px 6px!important;
}
#page-music .music-mixer-column .dj-mixer-channels{
padding-top:0!important;
gap:6px!important;
}
#page-music .music-mixer-column .dj-mixer-faders-row{
gap:6px!important;
}
#page-music .music-mixer-column .dj-ch-strip{
width:56px!important;
min-width:52px!important;
padding:5px 4px 6px!important;
}
#page-music .music-mixer-column .dj-ch-meter{
height:62px!important;
}
#page-music .music-mixer-column .dj-crossfader-bar{
padding-top:2px!important;
}
#page-music .music-mixer-column .dj-center-cross{
padding-bottom:0!important;
}
/* 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;
flex-direction:column;
align-items:stretch;
gap:8px;
padding:10px 10px 8px;
background:linear-gradient(180deg,#1a1a22 0%,#14141a 100%);
border-bottom:1px solid var(--border);
}
.dk-hdr-top{
display:flex;
align-items:flex-start;
gap:10px;
width:100%;
min-width:0;
}
.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:5px;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-hero{
flex-shrink:0;
margin-left:auto;
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-items:baseline;
justify-content:flex-end;
gap:6px 8px;
padding:6px 12px 8px;
border-radius:10px;
background:rgba(0,0,0,.35);
border:1px solid rgba(255,255,255,.08);
box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
min-width:min(44vw,210px);
}
.dk-time-cur{
font-family:var(--font-mono);
font-size:clamp(1.35rem,2.8vw,1.95rem);
font-weight:800;
letter-spacing:.04em;
line-height:1;
color:var(--text);
font-variant-numeric:tabular-nums;
}
.dk-time-sep{font-size:.75rem;color:var(--dim);opacity:.55;font-weight:500;}
.dk-time-tot{
font-family:var(--font-mono);
font-size:clamp(.82rem,1.6vw,1.05rem);
font-weight:600;
color:var(--muted);
font-variant-numeric:tabular-nums;
}
.dk-time-hero--A .dk-time-cur{color:#7fd8ff;text-shadow:0 0 18px rgba(0,170,255,.25);}
.dk-time-hero--B .dk-time-cur{color:#ffb27a;text-shadow:0 0 18px rgba(255,107,0,.22);}
.dk-time-hero--C .dk-time-cur{color:#7dffc8;text-shadow:0 0 18px rgba(0,255,136,.2);}
.dk-time-hero--D .dk-time-cur{color:#d9a8ff;text-shadow:0 0 18px rgba(187,68,255,.22);}
.dk-pro-row{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:flex-start;
gap:12px 16px;
padding:8px 10px 9px;
background:linear-gradient(180deg,#0e0e14 0%,#0a0a10 100%);
border-top:1px solid #25252e;
}
.dk-eq-strip{
display:flex;
flex-wrap:wrap;
align-items:flex-end;
gap:10px 14px;
flex:0 1 auto;
}
.dk-knob{
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
color:var(--muted);
font-size:.42rem;
letter-spacing:.8px;
font-family:var(--font-mono);
cursor:pointer;
}
.dk-knob-lbl{opacity:.95;letter-spacing:1px;}
/* Rotary-style EQ: range rotated inside circular “chassis” */
.dk-knob-wheel{
position:relative;
width:44px;
height:44px;
flex-shrink:0;
border-radius:50%;
background:
radial-gradient(circle at 32% 26%, rgba(255,255,255,.16), transparent 40%),
radial-gradient(circle at 50% 58%, #22242e, #0c0d12 78%);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.08),
inset 0 4px 12px rgba(0,0,0,.58),
0 2px 8px rgba(0,0,0,.42);
border:1px solid #353542;
}
.dk-knob-filter .dk-knob-wheel{
width:48px;
height:48px;
}
.dk-knob-wheel input[type=range]{
-webkit-appearance:none;
appearance:none;
position:absolute;
left:50%;
top:50%;
width:32px;
height:32px;
margin:0;
padding:0;
border:none;
background:transparent;
transform:translate(-50%, -50%) rotate(-90deg);
cursor:pointer;
}
.dk-knob-filter .dk-knob-wheel input[type=range]{
width:36px;
height:36px;
}
.dk-knob-wheel input[type=range]::-webkit-slider-runnable-track{
height:3px;
border-radius:2px;
background:linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.34));
}
.dk-knob-wheel input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;
width:13px;
height:13px;
margin-top:-5px;
border-radius:50%;
background:radial-gradient(circle at 32% 28%, #fff, #b8b8c8);
border:2px solid #101018;
box-shadow:0 1px 5px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.5);
}
.dk-knob-wheel input[type=range]::-moz-range-track{
height:3px;
border-radius:2px;
background:linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.34));
}
.dk-knob-wheel input[type=range]::-moz-range-thumb{
width:13px;
height:13px;
border:none;
border-radius:50%;
background:radial-gradient(circle at 32% 28%, #fff, #b8b8c8);
box-shadow:0 1px 5px rgba(0,0,0,.55);
}
.dk-A .dk-knob:not(.dk-knob-filter) .dk-knob-wheel input[type=range]::-webkit-slider-thumb{
box-shadow:0 0 0 1px rgba(0,170,255,.45), 0 1px 5px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
.dk-B .dk-knob:not(.dk-knob-filter) .dk-knob-wheel input[type=range]::-webkit-slider-thumb{
box-shadow:0 0 0 1px rgba(255,107,0,.45), 0 1px 5px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
.dk-C .dk-knob:not(.dk-knob-filter) .dk-knob-wheel input[type=range]::-webkit-slider-thumb{
box-shadow:0 0 0 1px rgba(0,255,136,.4), 0 1px 5px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
.dk-D .dk-knob:not(.dk-knob-filter) .dk-knob-wheel input[type=range]::-webkit-slider-thumb{
box-shadow:0 0 0 1px rgba(187,68,255,.45), 0 1px 5px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
.dk-knob-filter .dk-knob-wheel input[type=range]::-webkit-slider-thumb{
box-shadow:0 0 0 1px rgba(170,136,255,.5), 0 1px 5px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
.dk-knob-wheel:focus-within{
border-color:rgba(0,255,136,.35);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.1),
inset 0 4px 12px rgba(0,0,0,.58),
0 0 0 2px rgba(0,255,136,.12);
}
.dk-hotpads{
display:grid;
grid-template-columns:repeat(4, 32px);
gap:6px;
justify-content:start;
align-content:start;
flex:0 0 auto;
min-width:0;
}
.dk-hc{
min-width:0;
width:100%;
height:30px;
padding:0 4px;
border-radius:7px;
border:1px solid #3a3a48;
background:#14141c;
color:var(--dim);
font-family:var(--font-mono);
font-size:.48rem;
font-weight:700;
cursor:pointer;
transition:border-color .12s,background .12s,color .12s,box-shadow .12s;
}
.dk-hc:hover{border-color:var(--green);color:var(--text);}
.dk-A .dk-hc.has-cue{border-color:#00aaff;color:#7fd8ff;background:rgba(0,170,255,.1);box-shadow:0 0 0 1px rgba(0,170,255,.15);}
.dk-B .dk-hc.has-cue{border-color:#ff6b00;color:#ffb27a;background:rgba(255,107,0,.1);}
.dk-C .dk-hc.has-cue{border-color:#00ff88;color:#7dffc8;background:rgba(0,255,136,.1);}
.dk-D .dk-hc.has-cue{border-color:#bb44ff;color:#d9a8ff;background:rgba(187,68,255,.12);}
@media(max-width:1380px){
.music-deck-mixer-arena.layout-4 .dk-time-hero{min-width:0;padding:5px 8px;}
.music-deck-mixer-arena.layout-4 .dk-time-cur{font-size:clamp(1.05rem,2vw,1.5rem);}
.music-deck-mixer-arena.layout-4 .dk-time-tot{font-size:clamp(.72rem,1.35vw,.92rem);}
.music-deck-mixer-arena.layout-4 .dk-pro-row{gap:8px;}
}
.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;}
/* Final overlap fix: keep decks + mixer in separate responsive columns */
#page-music #decks-grid.music-deck-mixer-arena,
#page-music .music-deck-mixer-arena{
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(180px,210px) minmax(0,1fr)!important;
grid-auto-rows:auto;
align-items:start!important;
gap:6px!important;
}
#page-music #decks-grid.music-deck-mixer-arena .dk-panel,
#page-music #decks-grid.music-deck-mixer-arena .music-mixer-column{
min-width:0!important;
max-width:100%;
}
#page-music #decks-grid.music-deck-mixer-arena .music-mixer-column{
width:100%;
max-width:210px!important;
justify-self:center;
align-self:start;
z-index:1;
}
#page-music #decks-grid.music-deck-mixer-arena .music-mixer-column .music-mixer-wrap{
height:auto!important;
min-height:0!important;
}
/* 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:auto auto;
gap:10px;
align-items:start;
align-content:start;
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;
align-self:start;
height:min-content;
}
.music-deck-mixer-arena .music-mixer-column .music-mixer-wrap{
flex:0 1 auto;
height:auto;
display:flex;
flex-direction:column;
min-height:0;
overflow:visible;
}
.music-deck-mixer-arena .music-mixer-column .dj-mixer-console{
flex:0 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:0 0 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:auto 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;
/* Row height follows the mixer; without this, stretch leaves empty band under transport */
align-self:start;
height:fit-content;
width:100%;
box-sizing:border-box;
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;}
/* Fixed waveform strip: avoids empty flex growth when grid / mixer column is tall */
.music-performance .dk-wave-wrap{
flex:0 0 auto;
height:104px;
min-height:104px;
max-height:104px;
overflow:hidden;
display:flex;
align-items:stretch;
}
.music-performance .dk-wave-wrap canvas{
width:100%!important;
height:100%!important;
max-height:104px;
flex:1;
min-height:0;
}
/* Mixer overlap hard-fix: keep every section in its own flow box */
#page-music .music-mixer-column{
overflow:hidden;
}
#page-music #decks-grid.music-deck-mixer-arena .music-mixer-column{
max-width:228px!important;
}
#page-music #decks-grid.music-deck-mixer-arena,
#page-music .music-deck-mixer-arena{
grid-template-columns:minmax(0,1fr) minmax(196px,228px) minmax(0,1fr)!important;
}
#page-music .music-mixer-column .music-mixer-wrap{
overflow:hidden;
padding:6px 6px 6px!important;
}
#page-music .music-mixer-column .dj-mixer-console{
gap:7px!important;
min-width:0;
}
#page-music .music-mixer-column .dj-mixer-head{
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
gap:3px!important;
min-width:0;
}
#page-music #music-mixer-column{
margin-top:0!important;
align-self:start!important;
}
#page-music .music-mixer-column .dj-master-clock{
margin-bottom:0!important;
}
#page-music .music-mixer-column .dj-now-playing-card{
min-width:0;
max-width:100%;
overflow:hidden;
margin-top:-1px;
}
#page-music .music-mixer-column .dj-now-playing-card .dj-now-line,
#page-music .music-mixer-column .dj-now-playing-card .dj-now-meta,
#page-music .music-mixer-column .dj-now-playing-card .dj-now-dominant{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
#page-music .music-mixer-column .dj-mixer-head-actions{
display:grid!important;
grid-template-columns:1fr;
gap:6px!important;
align-items:stretch!important;
}
#page-music .music-mixer-column .dj-mixer-head-actions .dj-quick-lights{
justify-content:flex-start!important;
}
#page-music .music-mixer-column .dj-master-vol-wrap{
width:100%;
box-sizing:border-box;
}
#page-music .music-mixer-column .dj-master-vol-wrap input[type=range]{
width:100%;
}
#page-music .music-mixer-column .dj-mixer-channels{
margin-top:0!important;
padding-top:4px!important;
gap:5px!important;
}
#page-music .music-mixer-column .dj-mixer-faders-row{
gap:5px!important;
padding:0 0 6px!important;
}
#page-music .music-mixer-column .dj-ch-group{
gap:5px!important;
min-width:0;
}
#page-music .music-mixer-column .dj-ch-strip{
width:54px!important;
min-width:0!important;
padding:5px 3px 6px!important;
}
#page-music .music-mixer-column .dj-ch-name{
min-height:2.4em;
}
#page-music .music-mixer-column .dj-strip-fader{
width:84px!important;
}
#page-music .music-mixer-column .dj-center-cross{
min-width:0!important;
padding:0 0 2px!important;
}
/* Force center mixer higher (layout-2) */
#page-music #decks-grid.music-deck-mixer-arena.layout-2 .music-mixer-column{
margin-top:-18px!important;
}
#page-music #decks-grid.music-deck-mixer-arena.layout-2 .music-mixer-column .music-mixer-wrap{
padding-top:2px!important;
}
.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;
padding:4px 6px;
margin:0;
}
.music-performance .dk-pro-row{padding:6px 8px 7px;gap:8px 10px;}
.music-performance .dk-dj-row{padding:6px 8px;}
.music-performance .dk-hdr{gap:6px;padding:8px 10px 6px;}
/* ══ 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);}
/* ── ONBOARDING MODAL ── */
#onboarding-modal{
position:fixed;inset:0;z-index:900;
background:rgba(0,0,0,.82);
display:flex;align-items:center;justify-content:center;
padding:20px;
}
.ob-box{
background:#0a0a14;border:1px solid #2a2a50;border-radius:16px;
padding:32px 28px;width:100%;max-width:440px;
font-family:'Share Tech Mono',monospace;
}
.ob-progress{height:3px;background:#1e1e3a;border-radius:2px;margin-bottom:20px;}
.ob-progress-bar{height:100%;background:#00ff88;border-radius:2px;transition:width .3s ease;}
.ob-step-label{font-size:.58rem;letter-spacing:3px;color:#00ff88;opacity:.6;margin-bottom:8px;}
.ob-title{font-family:'Orbitron',sans-serif;font-size:.9rem;font-weight:900;letter-spacing:3px;color:#e4e6f0;margin-bottom:6px;}
.ob-sub{font-size:.72rem;color:#8b8db0;margin-bottom:24px;line-height:1.55;}
.ob-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;}
.ob-field label{font-size:.58rem;letter-spacing:2px;color:#9092b0;}
.ob-field input,.ob-field select,.ob-field textarea{
width:100%;padding:10px 12px;background:#090914;
border:1px solid #1e1e3a;border-radius:8px;
color:#dde0f0;font-family:'Share Tech Mono',monospace;font-size:.82rem;
outline:none;transition:border-color .18s;
}
.ob-field input:focus,.ob-field select:focus,.ob-field textarea:focus{border-color:#00ff88;}
.ob-field select option{background:#0a0a14;}
.ob-field textarea{resize:none;}
.ob-field-row{display:flex;gap:12px;}
.ob-field-row .ob-field{flex:1;}
.ob-actions{display:flex;align-items:center;justify-content:space-between;margin-top:24px;}
.ob-btn-skip{background:none;border:none;color:#5a5a80;font-family:'Share Tech Mono',monospace;font-size:.65rem;letter-spacing:1px;cursor:pointer;padding:0;transition:color .18s;}
.ob-btn-skip:hover{color:#8b8db0;}
.ob-nav-btns{display:flex;gap:10px;}
.ob-btn-back,.ob-btn-next{
padding:10px 20px;border-radius:9px;
font-family:'Share Tech Mono',monospace;font-size:.68rem;letter-spacing:2px;cursor:pointer;transition:all .18s;
}
.ob-btn-back{background:transparent;border:1px solid #2a2a50;color:#8b8db0;}
.ob-btn-back:hover{border-color:#00ff88;color:#00ff88;}
.ob-btn-next{background:rgba(0,255,136,.08);border:1px solid #00ff88;color:#00ff88;}
.ob-btn-next:hover{background:#00ff88;color:#000;}
/* ══════════════════════════════════════════════════════════════════════════════
FIXTURE WIZARD — Smart Add Fixture System
══════════════════════════════════════════════════════════════════════════════ */
#fx-wizard-overlay{
position:fixed;inset:0;z-index:800;
background:rgba(4,4,16,.92);
backdrop-filter:blur(12px);
display:none;align-items:center;justify-content:center;
padding:20px;
animation:fxw-fade-in .25s ease;
}
#fx-wizard-overlay.open{display:flex;}
@keyframes fxw-fade-in{from{opacity:0}to{opacity:1}}
.fxw{
background:#0b0b18;
border:1px solid #1e1e40;
border-radius:20px;
width:100%;max-width:860px;
max-height:calc(100vh - 60px);
display:flex;flex-direction:column;
overflow:hidden;
box-shadow:0 24px 80px rgba(0,0,0,.7),0 0 1px rgba(0,255,136,.25);
animation:fxw-scale-in .3s cubic-bezier(.16,1,.3,1);
}
@keyframes fxw-scale-in{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.fxw-header{
display:flex;align-items:center;justify-content:space-between;
padding:20px 24px 0;
}
.fxw-title{
font-family:var(--font-display);font-size:.72rem;font-weight:800;
letter-spacing:4px;color:var(--green);
}
.fxw-close{
background:none;border:none;color:var(--muted);font-size:1.2rem;
cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .15s;
}
.fxw-close:hover{color:var(--red);background:rgba(255,34,68,.1);}
.fxw-progress{
display:flex;align-items:center;gap:0;
padding:16px 24px 0;
}
.fxw-step-dot{
width:32px;height:32px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:var(--font-mono);font-size:.6rem;font-weight:700;
border:2px solid #2a2a50;color:#5a5a80;
background:transparent;transition:all .3s ease;
position:relative;z-index:1;flex-shrink:0;
}
.fxw-step-dot.active{border-color:var(--green);color:var(--green);background:rgba(0,255,136,.08);}
.fxw-step-dot.done{border-color:var(--green);color:#0b0b18;background:var(--green);}
.fxw-step-line{flex:1;height:2px;background:#1e1e40;transition:background .3s;}
.fxw-step-line.done{background:var(--green);}
.fxw-step-label{
font-size:.42rem;letter-spacing:2px;color:var(--muted);
text-align:center;margin-top:4px;position:absolute;top:100%;
white-space:nowrap;left:50%;transform:translateX(-50%);
}
.fxw-step-dot.active .fxw-step-label{color:var(--green);}
.fxw-body{
flex:1;overflow-y:auto;padding:24px;
scrollbar-width:thin;scrollbar-color:#2a2a50 transparent;
}
.fxw-footer{
display:flex;align-items:center;justify-content:space-between;
padding:16px 24px;border-top:1px solid #1a1a35;
background:rgba(10,10,20,.6);
}
.fxw-btn{
padding:10px 24px;border-radius:10px;
font-family:var(--font-mono);font-size:.65rem;letter-spacing:2px;
cursor:pointer;transition:all .18s;border:1px solid;
}
.fxw-btn-back{background:transparent;border-color:#2a2a50;color:var(--muted);}
.fxw-btn-back:hover{border-color:var(--text);color:var(--text);}
.fxw-btn-next{background:rgba(0,255,136,.08);border-color:var(--green);color:var(--green);}
.fxw-btn-next:hover{background:var(--green);color:#000;}
.fxw-btn-next:disabled{opacity:.3;cursor:not-allowed;pointer-events:none;}
.fxw-btn-add{background:var(--green);border-color:var(--green);color:#000;font-weight:700;}
.fxw-btn-add:hover{background:#33ff99;box-shadow:0 0 20px rgba(0,255,136,.3);}
/* ── Step 1: Method Selector ── */
.fxw-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px;}
.fxw-method-card{
background:#0e0e1c;border:2px solid #1e1e40;border-radius:16px;
padding:28px 20px;text-align:center;cursor:pointer;
transition:all .25s cubic-bezier(.16,1,.3,1);
position:relative;overflow:hidden;
}
.fxw-method-card:hover{
border-color:var(--green);transform:translateY(-2px);
box-shadow:0 8px 32px rgba(0,255,136,.08);
}
.fxw-method-card.selected{
border-color:var(--green);background:rgba(0,255,136,.04);
box-shadow:0 0 0 1px var(--green),0 8px 32px rgba(0,255,136,.12);
}
.fxw-method-icon{
font-size:2rem;margin-bottom:12px;
display:block;filter:grayscale(1);transition:filter .25s;
}
.fxw-method-card:hover .fxw-method-icon,
.fxw-method-card.selected .fxw-method-icon{filter:none;}
.fxw-method-title{
font-family:var(--font-display);font-size:.62rem;font-weight:700;
letter-spacing:3px;color:var(--text);margin-bottom:6px;
}
.fxw-method-desc{font-size:.58rem;color:var(--muted);line-height:1.5;}
.fxw-method-badge{
position:absolute;top:10px;right:10px;
font-size:.4rem;letter-spacing:1px;padding:3px 8px;
border-radius:6px;font-weight:700;
}
.fxw-method-badge.rec{background:rgba(0,255,136,.12);color:var(--green);}
.fxw-method-badge.pro{background:rgba(59,130,246,.12);color:#60a5fa;}
.fxw-method-badge.adv{background:rgba(255,106,0,.12);color:var(--orange);}
/* ── Step 2a: Library Browser ── */
.fxw-search-bar{
display:flex;gap:10px;margin-bottom:16px;align-items:center;
}
.fxw-search-input{
flex:1;height:42px;padding:0 14px;
background:#0e0e1c;border:1px solid #2a2a50;border-radius:10px;
color:var(--text);font-family:var(--font-mono);font-size:.75rem;
outline:none;transition:border-color .18s;
}
.fxw-search-input:focus{border-color:var(--green);}
.fxw-search-input::placeholder{color:#4a4a6a;}
.fxw-cat-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.fxw-cat-pill{
padding:6px 14px;border-radius:20px;
font-size:.52rem;letter-spacing:1px;cursor:pointer;
background:#12122a;border:1px solid #2a2a50;color:var(--muted);
transition:all .18s;
}
.fxw-cat-pill:hover{border-color:var(--text);color:var(--text);}
.fxw-cat-pill.active{background:rgba(0,255,136,.08);border-color:var(--green);color:var(--green);}
.fxw-profile-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:12px;max-height:380px;overflow-y:auto;
scrollbar-width:thin;scrollbar-color:#2a2a50 transparent;
}
.fxw-profile-card{
background:#0e0e1c;border:1px solid #1e1e40;border-radius:12px;
padding:16px;cursor:pointer;transition:all .2s;
position:relative;
}
.fxw-profile-card:hover{border-color:#3a3a6a;transform:translateY(-1px);}
.fxw-profile-card.selected{
border-color:var(--green);background:rgba(0,255,136,.04);
box-shadow:0 0 0 1px var(--green);
}
.fxw-profile-card-name{
font-size:.68rem;font-weight:700;color:var(--text);
margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fxw-profile-card-type{
font-size:.5rem;letter-spacing:1px;
padding:2px 8px;border-radius:4px;display:inline-block;
margin-bottom:8px;
}
.fxw-profile-card-type.moving_head{background:rgba(0,255,136,.1);color:#00ff88;}
.fxw-profile-card-type.par_rgbw,.fxw-profile-card-type.par{background:rgba(0,170,255,.1);color:#00aaff;}
.fxw-profile-card-type.wash{background:rgba(0,170,255,.1);color:#00aaff;}
.fxw-profile-card-type.led_bar{background:rgba(204,136,255,.1);color:#cc88ff;}
.fxw-profile-card-type.strobe{background:rgba(255,107,0,.1);color:#ff6b00;}
.fxw-profile-card-type.laser,.fxw-profile-card-type.laser_rgb{background:rgba(255,34,68,.1);color:#ff2244;}
.fxw-profile-card-type.fog{background:rgba(136,136,136,.1);color:#999;}
.fxw-profile-card-type.generic{background:rgba(102,102,102,.1);color:#888;}
.fxw-profile-card-channels{
display:flex;gap:4px;flex-wrap:wrap;
font-family:var(--font-mono);font-size:.45rem;color:var(--muted);
}
.fxw-profile-card-ch{
background:#16162e;padding:2px 6px;border-radius:3px;
}
.fxw-profile-card-check{
position:absolute;top:10px;right:10px;
width:20px;height:20px;border-radius:50%;
border:2px solid #2a2a50;display:flex;
align-items:center;justify-content:center;
font-size:.55rem;transition:all .2s;
}
.fxw-profile-card.selected .fxw-profile-card-check{
border-color:var(--green);background:var(--green);color:#000;
}
.fxw-profile-card-info{
display:flex;align-items:center;gap:8px;margin-top:6px;
font-size:.48rem;color:var(--muted);
}
/* ── Step 2b: GDTF Import ── */
.fxw-dropzone{
border:2px dashed #2a2a50;border-radius:16px;
padding:48px 24px;text-align:center;
transition:all .25s;cursor:pointer;
background:#0a0a18;
}
.fxw-dropzone:hover,.fxw-dropzone.dragover{
border-color:var(--blue);background:rgba(59,130,246,.04);
}
.fxw-dropzone.has-file{
border-color:var(--green);border-style:solid;
background:rgba(0,255,136,.03);
}
.fxw-dropzone-icon{font-size:2.5rem;margin-bottom:10px;display:block;opacity:.6;}
.fxw-dropzone-title{
font-family:var(--font-display);font-size:.65rem;font-weight:700;
letter-spacing:2px;color:var(--text);margin-bottom:6px;
}
.fxw-dropzone-sub{font-size:.56rem;color:var(--muted);}
.fxw-gdtf-result{
margin-top:16px;padding:16px;
background:#0e0e1c;border:1px solid #1e1e40;border-radius:12px;
}
.fxw-gdtf-model{
font-size:.75rem;font-weight:700;color:var(--text);margin-bottom:4px;
}
.fxw-gdtf-mfr{font-size:.55rem;color:var(--muted);margin-bottom:12px;}
.fxw-mode-select{
display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;
}
.fxw-mode-pill{
padding:8px 16px;border-radius:8px;
font-size:.55rem;letter-spacing:1px;cursor:pointer;
background:#12122a;border:1px solid #2a2a50;color:var(--muted);
transition:all .18s;
}
.fxw-mode-pill:hover{border-color:var(--text);color:var(--text);}
.fxw-mode-pill.active{background:rgba(0,255,136,.08);border-color:var(--green);color:var(--green);}
/* ── Step 2c: Manual Channel Builder ── */
.fxw-manual-header{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:16px;
}
.fxw-ch-count-ctrl{
display:flex;align-items:center;gap:8px;
}
.fxw-ch-count-ctrl label{font-size:.55rem;color:var(--muted);letter-spacing:1px;}
.fxw-ch-count-input{
width:64px;height:36px;text-align:center;
background:#0e0e1c;border:1px solid #2a2a50;border-radius:8px;
color:var(--green);font-family:var(--font-mono);font-size:.8rem;
outline:none;
}
.fxw-ch-count-input:focus{border-color:var(--green);}
.fxw-ch-builder{
display:grid;gap:6px;
max-height:340px;overflow-y:auto;
scrollbar-width:thin;scrollbar-color:#2a2a50 transparent;
}
.fxw-ch-row{
display:grid;grid-template-columns:44px 1fr 100px;gap:8px;
align-items:center;padding:8px 12px;
background:#0e0e1c;border:1px solid #1a1a35;border-radius:10px;
transition:border-color .15s;
}
.fxw-ch-row:hover{border-color:#2a2a50;}
.fxw-ch-row-num{
font-family:var(--font-mono);font-size:.7rem;font-weight:700;
color:var(--green);text-align:center;
background:#12122a;padding:4px 0;border-radius:6px;
}
.fxw-ch-row-name{
height:34px;padding:0 10px;
background:#0a0a18;border:1px solid #1e1e3a;border-radius:8px;
color:var(--text);font-family:var(--font-mono);font-size:.7rem;
outline:none;transition:border-color .15s;
}
.fxw-ch-row-name:focus{border-color:var(--green);}
.fxw-ch-row-preset{
height:34px;padding:0 8px;
background:#12122a;border:1px solid #1e1e3a;border-radius:8px;
color:var(--muted);font-family:var(--font-mono);font-size:.52rem;
cursor:pointer;outline:none;
}
.fxw-ch-row-preset:focus{border-color:var(--green);}
.fxw-template-row{
display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;
}
.fxw-template-btn{
padding:6px 14px;border-radius:8px;
font-size:.5rem;letter-spacing:1px;cursor:pointer;
background:#12122a;border:1px solid #2a2a50;color:var(--muted);
transition:all .18s;
}
.fxw-template-btn:hover{border-color:var(--green);color:var(--green);}
/* ── Step 3: Configure & Preview ── */
.fxw-config-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.fxw-config-section{
background:#0e0e1c;border:1px solid #1a1a35;border-radius:12px;
padding:16px;
}
.fxw-config-label{
font-size:.48rem;letter-spacing:2px;color:var(--muted);
margin-bottom:6px;display:block;
}
.fxw-config-input{
width:100%;height:40px;padding:0 12px;box-sizing:border-box;
background:#0a0a18;border:1px solid #1e1e3a;border-radius:8px;
color:var(--text);font-family:var(--font-mono);font-size:.78rem;
outline:none;transition:border-color .15s;
}
.fxw-config-input:focus{border-color:var(--green);}
.fxw-config-select{
width:100%;height:40px;padding:0 8px;box-sizing:border-box;
background:#0a0a18;border:1px solid #1e1e3a;border-radius:8px;
color:var(--text);font-family:var(--font-mono);font-size:.72rem;
cursor:pointer;outline:none;
}
.fxw-chmap-preview{
grid-column:1/-1;padding:14px;
background:#0a0a18;border:1px solid #1a1a35;border-radius:12px;
}
.fxw-chmap-preview-title{
font-size:.48rem;letter-spacing:2px;color:var(--muted);margin-bottom:10px;
}
.fxw-chmap-grid{
display:flex;gap:4px;flex-wrap:wrap;
}
.fxw-chmap-chip{
display:flex;align-items:center;gap:4px;
padding:4px 10px;border-radius:6px;
background:#12122a;font-family:var(--font-mono);font-size:.5rem;
}
.fxw-chmap-chip-num{color:var(--green);font-weight:700;min-width:18px;text-align:right;}
.fxw-chmap-chip-name{color:var(--text);}
.fxw-addr-viz{
grid-column:1/-1;
height:32px;background:#0a0a18;border:1px solid #1a1a35;
border-radius:8px;overflow:hidden;position:relative;
}
.fxw-addr-viz-bar{
position:absolute;top:4px;bottom:4px;
background:rgba(0,255,136,.3);border-radius:4px;
transition:left .3s,width .3s;
}
.fxw-addr-viz-label{
position:absolute;top:0;left:0;width:100%;height:100%;
display:flex;align-items:center;justify-content:center;
font-family:var(--font-mono);font-size:.48rem;color:var(--muted);
}
.fxw-addr-conflict{color:var(--red) !important;}
.fxw-addr-viz-bar.conflict{background:rgba(255,34,68,.3);}
.fxw-quantity-row{
grid-column:1/-1;
display:flex;align-items:center;gap:12px;
padding:12px 16px;
background:#0e0e1c;border:1px solid var(--green);border-radius:12px;
}
.fxw-quantity-row label{font-size:.52rem;letter-spacing:2px;color:var(--green);}
.fxw-quantity-input{
width:64px;height:36px;text-align:center;
background:#0a0a18;border:1px solid var(--green);border-radius:8px;
color:var(--green);font-family:var(--font-mono);font-size:.85rem;
outline:none;
}
.fxw-quantity-hint{font-size:.5rem;color:var(--muted);flex:1;}
.fxw-empty{
text-align:center;padding:40px;color:var(--muted);font-size:.65rem;
}
@media(max-width:700px){
.fxw-methods{grid-template-columns:1fr;}
.fxw-config-grid{grid-template-columns:1fr;}
.fxw{max-width:100%;border-radius:12px;}
}
/* ── AI Debug Panel ─────────────────────────────────────────────────────── */
.ai-debug-panel{
margin:4px 0 8px;padding:8px 10px;
background:#0a0a1a;border:1px solid var(--border);border-radius:8px;
font-family:var(--font-mono);font-size:.44rem;line-height:1.55;
color:var(--muted);display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;
}
.ai-debug-panel .ai-dbg-row{display:flex;gap:4px;align-items:baseline;}
.ai-debug-panel .ai-dbg-key{color:var(--text-dim);min-width:58px;text-align:right;}
.ai-debug-panel .ai-dbg-val{color:var(--green);font-weight:500;}
.ai-debug-panel .ai-dbg-val.warn{color:var(--orange);}
.ai-debug-panel .ai-dbg-val.hot{color:var(--red);}
.ai-debug-panel .ai-dbg-section{grid-column:1/-1;border-top:1px solid var(--border);margin:3px 0 1px;padding-top:3px;font-size:.4rem;letter-spacing:1.5px;color:var(--text-dim);}
.ai-debug-panel .ai-dbg-bar{
height:4px;border-radius:2px;background:#1a1a2e;overflow:hidden;flex:1;max-width:60px;
}
.ai-debug-panel .ai-dbg-bar-fill{height:100%;border-radius:2px;transition:width .15s;}
/* ── Music page: single authoritative layout pass (wins over earlier duplicates) ── */
#page-music #decks-grid.music-deck-mixer-arena,
#page-music .music-deck-mixer-arena{
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(196px,228px) minmax(0,1fr)!important;
grid-auto-rows:auto;
align-items:start!important;
gap:6px!important;
}
#page-music #decks-grid.music-deck-mixer-arena .dk-panel,
#page-music #decks-grid.music-deck-mixer-arena .music-mixer-column{
min-width:0!important;
max-width:100%;
}
#page-music #decks-grid.music-deck-mixer-arena .music-mixer-column{
width:100%;
max-width:228px!important;
justify-self:center;
align-self:start;
z-index:1;
}
#page-music #decks-grid.music-deck-mixer-arena .music-mixer-column .music-mixer-wrap{
height:auto!important;
min-height:0!important;
}
#page-music #decks-grid.music-deck-mixer-arena.layout-2 .music-mixer-column{
margin-top:-18px!important;
}
#page-music #decks-grid.music-deck-mixer-arena.layout-2 .music-mixer-column .music-mixer-wrap{
padding-top:2px!important;
}
#page-music .music-mixer-column .dj-ch-strip,
#page-music .music-mixer-column .dj-ch-fader-row{
overflow:hidden;
}