*{box-sizing:border-box}
:root{--bg:#06080c;--panel:#0f141b;--panel2:#151b24;--line:#29313d;--text:#f5f7fa;--muted:#8d98a8;--accent:#ff6b2c;--green:#63e6a5;--blue:#58a6ff}
body{margin:0;background:radial-gradient(circle at 50% -15%,#273342 0,#0b0f15 38%,#050608 100%);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
button,input,select{font:inherit}.app{max-width:1550px;margin:auto;padding:24px}.topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.eyebrow{font-size:10px;letter-spacing:.18em;color:var(--accent);font-weight:900}h1{font-size:32px;letter-spacing:.04em;margin:4px 0}h1 span{font-weight:400;color:#aeb8c6}.topbar p{margin:0;color:var(--muted);font-size:12px}.status{font-size:10px;color:var(--green);letter-spacing:.12em;border:1px solid #294637;border-radius:999px;padding:8px 12px}.status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:7px;box-shadow:0 0 12px var(--green)}
.dashboard-nav{display:flex;gap:6px;overflow:auto;padding:7px;background:#0c1016;border:1px solid var(--line);border-radius:12px;margin-bottom:12px}.dashboard-nav a{color:#aeb8c6;text-decoration:none;font-size:11px;white-space:nowrap;padding:9px 12px;border-radius:8px}.dashboard-nav a:hover,.dashboard-nav a.active{color:#fff;background:#1a2029}.toolbar{display:flex;align-items:end;gap:10px;background:rgba(16,20,27,.9);border:1px solid var(--line);padding:12px;border-radius:12px;margin-bottom:12px}.toolbar label,.grid-3 label,.grid-2 label,.light-master label{font-size:9px;color:var(--muted);letter-spacing:.12em;display:flex;flex-direction:column;gap:5px}.toolbar select,.toolbar button,.grid-3 input,.grid-2 input,.grid-2 select{height:36px;border:1px solid #333b48;background:#171c24;color:var(--text);border-radius:7px;padding:0 10px}.toolbar button,.cue-row button,.mute,.clear{cursor:pointer}.toolbar button:hover,.cue-row button:hover{border-color:#687586}.primary{background:var(--accent)!important;border-color:var(--accent)!important;color:#080909!important;font-weight:900}.master-readout{margin-left:auto;text-align:right}.master-readout span{display:block;font-size:9px;color:var(--muted)}.master-readout strong{font-size:17px}
.workspace{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(430px,.9fr);gap:12px}.stage-panel,.control-panel,.info-card,.training{border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,#111720,#0b0f15);box-shadow:0 18px 55px #0008}.stage-panel{padding:14px}.panel-title,.training-head,.section-head{display:flex;justify-content:space-between;align-items:center}.panel-title h2{font-size:17px;margin:3px 0}.badge{font-size:9px;letter-spacing:.12em;border:1px solid #394352;padding:6px 9px;border-radius:999px;color:var(--muted)}.badge.live{color:var(--green);border-color:#315c48}.stage-wrap{margin-top:12px;min-height:560px;display:grid;place-items:center;overflow:hidden;border-radius:12px;background:radial-gradient(circle at 50% 50%,#263140,#080b10 70%);perspective:1000px}.stage-scene{position:relative;width:min(92%,850px);height:510px;transform:rotateX(3deg);background:linear-gradient(#101722 0 72%,#171c22 72%);border:1px solid #384453;box-shadow:0 35px 70px #000;overflow:hidden}.stage-scene:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0 44%,#ffffff08 48%,transparent 52%);pointer-events:none}.truss{position:absolute;background:repeating-linear-gradient(135deg,#7f8995 0 2px,transparent 2px 8px);border:3px solid #697481;z-index:4}.top-truss{left:5%;right:5%;top:5%;height:15px}.left-truss{left:6%;top:5%;bottom:14%;width:13px}.right-truss{right:6%;top:5%;bottom:14%;width:13px}.screen-frame{position:absolute;left:18%;right:18%;top:14%;height:48%;background:#030405;border:7px solid #202833;box-shadow:0 0 0 2px #59636e,0 0 35px #58a6ff35;z-index:3;overflow:hidden}.screen-frame video{width:100%;height:100%;object-fit:cover;display:none}.screen-image{position:absolute;inset:0;background-position:center;background-size:cover;display:none}.screen-placeholder{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:radial-gradient(circle,#182637,#05080d);color:#9ba8b8}.screen-placeholder strong{font-size:32px;letter-spacing:.15em;color:#e9edf3}.screen-placeholder span{font-size:10px;margin-top:8px}.screen-spec{position:absolute;right:7px;bottom:5px;background:#000b;color:#aeb8c6;font-size:8px;padding:4px 6px;z-index:2}.stage-roof{position:absolute;left:12%;right:12%;top:62%;height:8px;background:#303946;z-index:3}.stage-deck{position:absolute;left:13%;right:13%;bottom:13%;height:90px;background:linear-gradient(180deg,#2a3039,#11151b);transform:perspective(500px) rotateX(12deg);border-top:5px solid #515b67;z-index:2}.stairs{position:absolute;bottom:11%;width:10%;height:50px;background:repeating-linear-gradient(to bottom,#4c555f 0 6px,#222830 6px 11px);z-index:2}.left-stairs{left:7%}.right-stairs{right:7%}.speaker{position:absolute;bottom:25%;width:35px;height:80px;background:linear-gradient(#222a34,#090b0e);border:2px solid #697481;border-radius:5px;z-index:5}.speaker:after{content:"";position:absolute;inset:12px 8px;background:radial-gradient(circle,#07090b 0 7px,transparent 8px),radial-gradient(circle at 50% 78%,#07090b 0 12px,transparent 13px);border:1px solid #48515d}.speaker-l{left:9%}.speaker-r{right:9%}.sub{position:absolute;bottom:14%;width:52px;height:45px;background:#080a0d;border:2px solid #505b67;border-radius:4px;z-index:5}.sub-l{left:13%}.sub-r{right:13%}.light-beam{position:absolute;top:8%;width:35%;height:75%;opacity:.25;filter:blur(2px);transform-origin:top;z-index:1}.beam-1{left:15%;background:linear-gradient(160deg,#ffcc66,transparent 65%);transform:rotate(-18deg)}.beam-2{left:34%;background:linear-gradient(170deg,#ff4b4b,transparent 68%);transform:rotate(3deg)}.beam-3{right:10%;background:linear-gradient(200deg,#56a7ff,transparent 68%);transform:rotate(19deg)}.performer{position:absolute;bottom:29%;width:42px;height:72px;border-radius:45% 45% 15% 15%;background:#111;color:#aeb8c6;font-size:7px;text-align:center;padding-top:48px;z-index:6}.performer-1{left:42%}.performer-2{left:54%}.crowd{position:absolute;left:0;right:0;bottom:0;height:55px;display:flex;justify-content:center;gap:15px;background:linear-gradient(transparent,#050608 35%);z-index:7}.crowd span{width:25px;height:35px;margin-top:18px;border-radius:50% 50% 0 0;background:#090b0f;box-shadow:0 0 0 2px #1b2028}
.stage-readouts{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px}.stage-readouts div,.summary-grid div{background:#0c1117;border:1px solid #242c37;padding:9px;border-radius:8px}.stage-readouts span,.summary-grid span{display:block;font-size:8px;color:var(--muted);letter-spacing:.1em}.stage-readouts b,.summary-grid b{display:block;margin-top:3px;font-size:12px}
.control-panel{min-height:100%;overflow:hidden}.tabbar{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}.tab{height:45px;border:0;border-right:1px solid var(--line);background:#0d1218;color:#8e99a8;cursor:pointer;font-size:10px;font-weight:800}.tab.active{background:#1a2029;color:#fff;box-shadow:inset 0 -2px var(--accent)}.tab-content{display:none;padding:14px}.tab-content.active{display:block}.section-head{margin:3px 0 10px}.section-head h3{font-size:13px;margin:0}.section-head span{font-size:8px;color:var(--muted);letter-spacing:.12em}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.grid-3 input,.grid-2 input,.grid-2 select{width:100%;height:34px}.grid-3 small,.grid-2 small{font-size:7px}.upload-row{display:grid;grid-template-columns:1fr 1fr 70px;gap:7px;margin:9px 0 16px}.upload{border:1px dashed #465160;border-radius:8px;min-height:38px;display:grid;place-items:center;background:#11161d;color:#bfc8d3;font-size:9px;cursor:pointer}.upload:hover{border-color:var(--accent)}.upload input{display:none}.equipment-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.equipment-strip span{background:#0c1117;border:1px solid #242c37;padding:8px 5px;border-radius:7px;text-align:center;font-size:8px;color:var(--muted)}.equipment-strip b{display:block;color:#fff;font-size:13px;margin-top:2px}
.audio-source{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:10px}.audio-upload{height:36px}.audio-source audio{width:100%;height:34px}.channels{display:grid;gap:6px;max-height:330px;overflow:auto}.channel{display:grid;grid-template-columns:78px 1fr 70px;gap:7px;align-items:center;padding:8px;background:#0d1218;border:1px solid #252d38;border-radius:8px}.ch-name{font-weight:800;font-size:10px}.ch-num{font-size:7px;color:var(--muted)}.channel input{width:100%}.channel .mini-meter{height:6px;background:#05070a;border-radius:3px;overflow:hidden}.mini-fill{height:100%;width:30%;background:linear-gradient(90deg,#53d88d 0 65%,#f1cf4c 65% 82%,#ff765e 82%);transition:width .08s}.ch-actions{display:flex;gap:4px}.ch-actions button{font-size:7px;height:24px;padding:0 5px}.master-box{display:grid;grid-template-columns:80px 1fr 50px;align-items:center;gap:8px;border-top:1px solid var(--line);margin-top:10px;padding-top:10px}.master-box span{display:block;font-size:8px;color:var(--muted)}.master-box strong{font-size:12px}.master-box input{width:100%;accent-color:var(--accent)}.mute{height:30px;border:1px solid #3b4551;background:#171c24;color:#fff;border-radius:6px;font-size:8px}.mute.active{background:#6e2020;border-color:#d94b4b}.signal-path{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin-top:10px;font-size:8px;color:#9da8b6}.signal-path span{padding:6px 7px;background:#11161d;border:1px solid #28313d;border-radius:6px}.signal-path b{color:var(--accent)}
.light-master{display:grid;gap:9px;background:#0c1117;border:1px solid #242c37;padding:10px;border-radius:8px}.light-master input{accent-color:var(--accent)}.light-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:10px}.fixture{background:#0c1117;border:1px solid #252e39;border-radius:8px;padding:8px}.fixture-head{display:flex;justify-content:space-between;font-size:9px;font-weight:800}.fixture-head span{color:#7f8a99;font-size:7px}.fixture input{width:100%;margin-top:7px;accent-color:var(--fixture,#ffb13b)}.fixture .color-row{display:flex;gap:4px;margin-top:6px}.fixture button{flex:1;height:22px;border:1px solid #303947;background:#171c24;color:#aaa;border-radius:5px;font-size:8px}.cue-row{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:10px}.cue-row button{height:30px;border:1px solid #343d49;background:#171c24;color:#fff;border-radius:6px;font-size:8px}
.lower-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:12px;margin-top:12px}.info-card,.training{padding:14px}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px}.training h2{font-size:17px;margin:3px 0}.training p{color:#a9b3c0;font-size:11px}.challenge{border-left:3px solid var(--accent);padding:8px 10px;background:#151a21}.challenge span{font-size:8px;color:var(--accent);letter-spacing:.14em}.challenge strong{display:block;font-size:11px;margin-top:3px}
@media(max-width:1050px){.workspace{grid-template-columns:1fr}.lower-grid{grid-template-columns:1fr}.stage-wrap{min-height:470px}.stage-scene{height:430px}.control-panel{min-height:auto}}
@media(max-width:650px){.app{padding:12px}.topbar{display:block}.status{display:inline-block;margin-top:10px}.toolbar{overflow:auto}.stage-readouts,.summary-grid{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr 1fr}.upload-row{grid-template-columns:1fr}.stage-wrap{min-height:360px}.stage-scene{height:330px}.screen-frame{left:13%;right:13%}.stage-deck{height:65px}}

/* =========================================================
   TRUE STAGE LIGHTING LAYER
   Everything is constrained INSIDE #stageScene.
   ========================================================= */
#stageScene { overflow:hidden; isolation:isolate; }
#stageLighting { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.stage-light-fixture { position:absolute; top:4.6%; width:32px; height:30px; transform-origin:50% 0; z-index:8; filter:drop-shadow(0 0 5px var(--light-color)); }
.stage-light-fixture .fixture-yoke { position:absolute; left:5px; top:0; width:22px; height:18px; border:2px solid #798392; border-top:none; border-radius:0 0 8px 8px; background:linear-gradient(#3a424e,#11151c); }
.stage-light-fixture .fixture-head { position:absolute; left:7px; top:9px; width:18px; height:18px; border-radius:5px; background:linear-gradient(180deg,#4b5563,#11151b); border:1px solid #8993a1; box-shadow:0 2px 4px #0008; transform-origin:50% 0; }
.stage-light-fixture .fixture-lens { position:absolute; left:11px; top:13px; width:10px; height:10px; border-radius:50%; background:radial-gradient(circle,#fff 0 18%,var(--light-color) 35%,#111 80%); box-shadow:0 0 7px var(--light-color),0 0 17px var(--light-color),0 0 26px color-mix(in srgb,var(--light-color) 55%,transparent); z-index:3; }
.stage-light-fixture .fixture-beam { position:absolute; left:50%; top:27px; width:var(--beam-width); height:var(--beam-height); transform:translateX(-50%) rotate(var(--beam-rotation,0deg)); transform-origin:50% 0; opacity:var(--beam-opacity,.45); background:linear-gradient(to bottom, color-mix(in srgb,var(--light-color) 55%,transparent) 0%, color-mix(in srgb,var(--light-color) 22%,transparent) 55%, transparent 100%); clip-path:polygon(47% 0,53% 0,100% 100%,0 100%); filter:blur(var(--beam-blur,3px)); mix-blend-mode:screen; z-index:1; }
.stage-light-fixture .fixture-beam::after { content:""; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(255,255,255,.35),transparent 48%,transparent); clip-path:polygon(49% 0,51% 0,58% 100%,42% 100%); filter:blur(1px); }
.stage-light-fixture.wash { --beam-width:250px; --beam-height:330px; --beam-blur:7px; }
.stage-light-fixture.spot { --beam-width:185px; --beam-height:360px; --beam-blur:5px; }
.stage-light-fixture.beam { --beam-width:105px; --beam-height:390px; --beam-blur:2px; }
.stage-light-fixture .fixture-floor-glow { position:absolute; left:50%; top:calc(var(--beam-height) + 25px); width:170px; height:60px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(ellipse,color-mix(in srgb,var(--light-color) 32%,transparent),transparent 72%); filter:blur(14px); opacity:.22; mix-blend-mode:screen; }
.stage-light-fixture.off .fixture-beam,.stage-light-fixture.off .fixture-floor-glow,.stage-light-fixture.off .fixture-lens { opacity:0; }
/* stronger haze in the beam path, but still clipped to stage */
#stageLighting::before { content:""; position:absolute; inset:10% 6% 8%; background:radial-gradient(ellipse at 50% 56%,rgba(255,255,255,.06),transparent 58%); filter:blur(26px); opacity:.7; mix-blend-mode:screen; }
/* subtle rear/side wash on stage */
#stageLighting::after { content:""; position:absolute; left:4%; right:4%; bottom:11%; height:52%; background:radial-gradient(ellipse at 50% 88%,rgba(255,255,255,.08),transparent 66%); filter:blur(28px); opacity:.6; mix-blend-mode:screen; }


/* =========================================================
   REALISTIC CONCERT LIGHTING + PA RIGGING OVERRIDES
   ========================================================= */
#stageScene{overflow:hidden;isolation:isolate;}
#stageLighting{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:6;clip-path:inset(0);}
.stage-light-fixture{position:absolute;top:3.2%;width:34px;height:34px;transform-origin:50% 0;z-index:12;filter:drop-shadow(0 0 8px var(--light-color));}
.stage-light-fixture .fixture-yoke{left:4px;top:0;width:26px;height:19px;border:2px solid #87909d;border-top:none;border-radius:0 0 9px 9px;background:linear-gradient(#3d4653,#11151b);}
.stage-light-fixture .fixture-head{left:7px;top:9px;width:20px;height:20px;border-radius:6px;background:linear-gradient(180deg,#515c6b,#10141a);border:1px solid #9aa4b0;box-shadow:0 3px 5px #000b;transform-origin:50% 0;}
.stage-light-fixture .fixture-lens{left:11px;top:12px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,#fff 0 16%,var(--light-color) 34%,#171b21 82%);box-shadow:0 0 8px var(--light-color),0 0 18px var(--light-color),0 0 30px color-mix(in srgb,var(--light-color) 60%,transparent);z-index:3;}
.stage-light-fixture .fixture-beam{left:50%;top:30px;width:var(--beam-width,120px);height:var(--beam-height,390px);transform:translateX(-50%) rotate(var(--beam-rotate,0deg));transform-origin:50% 0;background:linear-gradient(to bottom,color-mix(in srgb,var(--light-color) 78%,transparent) 0%,color-mix(in srgb,var(--light-color) 38%,transparent) 44%,color-mix(in srgb,var(--light-color) 13%,transparent) 78%,transparent 100%);clip-path:polygon(46% 0,54% 0,78% 100%,22% 100%);filter:blur(var(--beam-blur,2px));mix-blend-mode:screen;opacity:var(--beam-opacity,.5);z-index:1;}
.stage-light-fixture .fixture-beam::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,.55),rgba(255,255,255,.08) 45%,transparent 82%);clip-path:polygon(48% 0,52% 0,58% 100%,42% 100%);filter:blur(1px);}
.stage-light-fixture .fixture-floor-glow{position:absolute;left:50%;top:calc(var(--beam-height,390px) - 2px);width:190px;height:70px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--light-color) 45%,transparent),transparent 72%);filter:blur(16px);opacity:.2;mix-blend-mode:screen;z-index:0;}
.stage-light-fixture.wash{--beam-width:230px;--beam-height:360px;--beam-blur:7px;}
.stage-light-fixture.spot{--beam-width:150px;--beam-height:390px;--beam-blur:4px;}
.stage-light-fixture.beam{--beam-width:82px;--beam-height:425px;--beam-blur:1.4px;}
.stage-light-fixture.off .fixture-beam,.stage-light-fixture.off .fixture-floor-glow,.stage-light-fixture.off .fixture-lens{opacity:0!important;}
#stageLighting::before{content:"";position:absolute;inset:8% 10% 10%;background:radial-gradient(ellipse at 50% 54%,rgba(255,255,255,.05),transparent 64%);filter:blur(24px);mix-blend-mode:screen;opacity:.8;}
#stageLighting::after{content:"";position:absolute;left:8%;right:8%;bottom:9%;height:48%;background:radial-gradient(ellipse at 50% 95%,rgba(255,255,255,.12),transparent 68%);filter:blur(26px);mix-blend-mode:screen;opacity:.55;}

/* Front-facing concert beams: stay inside the stage viewport and land on stage/floor. */
.stage-light-fixture[data-stage-light="6"] .fixture-beam,
.stage-light-fixture[data-stage-light="7"] .fixture-beam{clip-path:polygon(47% 0,53% 0,61% 100%,39% 100%);}

/* Dark stage so beams read as real volumetric light. */
.stage-scene::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 62%,rgba(255,255,255,.025),transparent 55%);pointer-events:none;z-index:5;}

/* =========================================================
   RIGGED LINE ARRAY / PA
   ========================================================= */
.pa-rigging{position:absolute;inset:0;z-index:11;pointer-events:none;}
.line-array-cluster{position:absolute;top:12.5%;width:62px;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 8px 12px rgba(0,0,0,.55));}
.line-array-cluster.left{left:5.2%;}.line-array-cluster.right{right:5.2%;}
.line-array-flybar{width:30px;height:7px;border-radius:3px;background:#8e98a4;border:1px solid #bac2ca;box-shadow:0 0 5px #000;position:relative;}
.line-array-cable{width:2px;height:18px;background:#a0a8b2;box-shadow:8px 0 0 #69727e,-8px 0 0 #69727e;}
.line-array-box{position:relative;width:44px;height:28px;margin-top:-2px;background:linear-gradient(180deg,#303944,#0b0f14);border:1px solid #6f7985;border-radius:3px;transform:skewY(7deg);overflow:hidden;}
.line-array-box::before{content:"";position:absolute;inset:4px 4px;background:radial-gradient(circle at 50% 28%,#050608 0 5px,transparent 6px),radial-gradient(circle at 50% 76%,#050608 0 7px,transparent 8px);opacity:.95;}
.line-array-box::after{content:"";position:absolute;inset:0;border-top:1px solid rgba(255,255,255,.14);box-shadow:inset 0 -1px rgba(0,0,0,.65);}
.line-array-box:nth-of-type(4){transform:skewY(12deg);}
.line-array-box:nth-of-type(5){transform:skewY(16deg);}
.line-array-label{margin-top:4px;font-size:6px;letter-spacing:.08em;color:#aeb8c6;background:#0b0f14b8;padding:2px 4px;border-radius:3px;}
.sub-stack{position:absolute;bottom:14.5%;width:58px;display:flex;flex-direction:column;gap:3px;}
.sub-stack.left{left:9.8%;}.sub-stack.right{right:9.8%;}
.sub-box{height:31px;background:linear-gradient(#161c24,#080a0e);border:2px solid #505a66;border-radius:3px;position:relative;box-shadow:0 5px 9px #0008;}
.sub-box::before{content:"";position:absolute;left:9px;right:9px;top:5px;bottom:5px;border-radius:2px;background:radial-gradient(circle at 50% 50%,#020304 0 10px,#1b2027 11px 12px,transparent 13px);}
.ground-stack{position:absolute;bottom:16%;width:42px;display:flex;flex-direction:column;gap:4px;}
.ground-stack.left{left:15%;}.ground-stack.right{right:15%;}
.monitor-wedge{height:28px;background:linear-gradient(160deg,#252c36,#090b0f);border:2px solid #505b67;clip-path:polygon(0 100%,100% 100%,78% 12%,18% 0);box-shadow:0 5px 7px #0008;}
.monitor-wedge::after{content:"";position:absolute;left:10px;right:10px;top:7px;bottom:7px;border-radius:50%;background:radial-gradient(circle,#030405 0 6px,transparent 7px);opacity:.9;}
.delay-cluster{position:absolute;top:28%;width:36px;display:flex;flex-direction:column;gap:3px;}
.delay-cluster.left{left:22%;}.delay-cluster.right{right:22%;}
.delay-box{height:24px;background:linear-gradient(#2a313b,#090b0f);border:1px solid #636d79;border-radius:3px;position:relative;box-shadow:0 0 8px #0008;}
.delay-box::before{content:"";position:absolute;inset:4px 8px;border-radius:2px;background:radial-gradient(circle,#050607 0 5px,transparent 6px);}

@media(max-width:650px){
  .line-array-cluster{transform:scale(.8);transform-origin:top center;}
  .sub-stack{transform:scale(.85);transform-origin:bottom center;}
  .ground-stack{transform:scale(.8);}
}
/* =========================================================
   ADVANCED 3D CONCERT STAGE LIGHTING
   ========================================================= */

#stageScene {
    isolation: isolate;
}

/* Main FX layer */

.advanced-stage-fx {
    position: absolute;
    inset: 0;

    z-index: 8;

    pointer-events: none;

    overflow: hidden;

    --fx-power: 1;
    --fx-color: #ffffff;

    perspective: 1200px;

    transform-style: preserve-3d;
}


/* =========================================================
   STAGE HAZE
   ========================================================= */

.stage-haze {

    position: absolute;

    inset: 8% 5% 15%;

    background:

        radial-gradient(
            ellipse at 50% 48%,
            rgba(255,255,255,.09),
            transparent 55%
        ),

        radial-gradient(
            ellipse at 50% 75%,
            rgba(255,255,255,.07),
            transparent 48%
        );

    filter: blur(20px);

    mix-blend-mode: screen;

    opacity: .7;

    transform:
        translateZ(30px);

}


/* =========================================================
   BACKLIGHT
   Cahaya dari belakang performer ke arah kamera
   ========================================================= */

.backlight {

    position: absolute;

    bottom: 24%;

    width: 180px;
    height: 250px;

    transform-origin: 50% 100%;

    clip-path: polygon(
        48% 100%,
        52% 100%,
        86% 0,
        14% 0
    );

    background:

        linear-gradient(
            to top,
            rgba(255,255,255,.45),
            rgba(255,255,255,.04)
        );

    opacity: .5;

    filter:
        blur(4px)
        drop-shadow(
            0 0 20px var(--back-color)
        );

    mix-blend-mode: screen;

    transform-style: preserve-3d;

    transition:
        opacity .2s ease;

}


/* backlight positions */

.backlight-1 {
    left: 30%;

    --back-color:#58a6ff;

    background:
        linear-gradient(
            to top,
            rgba(88,166,255,.75),
            rgba(88,166,255,.03)
        );

    transform:
        rotate(-11deg)
        translateZ(35px);
}

.backlight-2 {
    left: 42%;

    --back-color:#ffffff;

    background:
        linear-gradient(
            to top,
            rgba(255,255,255,.75),
            rgba(255,255,255,.03)
        );

    transform:
        rotate(-3deg)
        translateZ(45px);
}

.backlight-3 {
    left: 55%;

    --back-color:#ff4f81;

    background:
        linear-gradient(
            to top,
            rgba(255,79,129,.72),
            rgba(255,79,129,.03)
        );

    transform:
        rotate(4deg)
        translateZ(45px);
}

.backlight-4 {
    left: 67%;

    --back-color:#a855f7;

    background:
        linear-gradient(
            to top,
            rgba(168,85,247,.72),
            rgba(168,85,247,.03)
        );

    transform:
        rotate(12deg)
        translateZ(35px);
}


/* =========================================================
   FLOOR BEAMS
   ========================================================= */

.floor-beam {

    position: absolute;

    bottom: 13%;

    width: 220px;
    height: 180px;

    transform-origin: 50% 100%;

    clip-path: polygon(
        48% 100%,
        52% 100%,
        90% 0,
        10% 0
    );

    filter:
        blur(3px)
        drop-shadow(
            0 0 16px var(--floor-color)
        );

    mix-blend-mode: screen;

    opacity: .42;

    transform-style: preserve-3d;
}


.floor-beam-1 {

    left: 8%;

    --floor-color:#58a6ff;

    background:
        linear-gradient(
            to top,
            rgba(88,166,255,.72),
            transparent
        );

    transform:
        rotate(-18deg)
        translateZ(30px);
}


.floor-beam-2 {

    left: 32%;

    --floor-color:#ffffff;

    background:
        linear-gradient(
            to top,
            rgba(255,255,255,.65),
            transparent
        );

    transform:
        rotate(-6deg)
        translateZ(35px);
}


.floor-beam-3 {

    left: 52%;

    --floor-color:#ff2d55;

    background:
        linear-gradient(
            to top,
            rgba(255,45,85,.58),
            transparent
        );

    transform:
        rotate(7deg)
        translateZ(35px);
}


.floor-beam-4 {

    left: 75%;

    --floor-color:#a855f7;

    background:
        linear-gradient(
            to top,
            rgba(168,85,247,.58),
            transparent
        );

    transform:
        rotate(18deg)
        translateZ(30px);
}


/* =========================================================
   AUDIENCE BEAMS
   Dari stage menuju depan / audience
   ========================================================= */

.audience-sweep {

    position: absolute;

    left: 50%;

    bottom: -8%;

    width: 560px;
    height: 430px;

    transform-origin: 50% 100%;

    clip-path: polygon(
        49% 100%,
        51% 100%,
        100% 0,
        0 0
    );

    background:

        linear-gradient(
            to top,
            rgba(255,255,255,.14),
            rgba(255,255,255,.015)
        );

    filter: blur(5px);

    mix-blend-mode: screen;

    opacity: .22;

    transform:
        translateX(-50%)
        rotate(0deg)
        translateZ(60px);

    transition:
        transform .12s linear;
}


.sweep-1 {
    --sweep-color:#58a6ff;
}

.sweep-2 {

    --sweep-color:#ff2d55;

    opacity:.16;
}


/* =========================================================
   IMPROVED MOVING HEAD BEAMS
   ========================================================= */

/*
   Override fixture beam lama supaya lebih narrow,
   panjang dan terasa 3D.
*/

.stage-light-fixture {

    transform-style: preserve-3d;

}


.stage-light-fixture .fixture-beam {

    transform-origin:
        50% 0%;

    clip-path:

        polygon(
            46% 0%,
            54% 0%,
            82% 100%,
            18% 100%
        );

    filter:

        blur(2px)
        drop-shadow(
            0 0 14px var(--light-color)
        );

    mix-blend-mode: screen;

    transform-style: preserve-3d;

}


/* NARROW BEAM */

.stage-light-fixture.beam .fixture-beam {

    clip-path:

        polygon(
            48% 0%,
            52% 0%,
            62% 100%,
            38% 100%
        );

}


/* SPOT */

.stage-light-fixture.spot .fixture-beam {

    clip-path:

        polygon(
            47% 0%,
            53% 0%,
            68% 100%,
            32% 100%
        );

}


/* WASH */

.stage-light-fixture.wash .fixture-beam {

    clip-path:

        polygon(
            38% 0%,
            62% 0%,
            100% 100%,
            0% 100%
        );

}


/* =========================================================
   BEAM CORE
   ========================================================= */

.stage-light-fixture .fixture-beam::after {

    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;
    bottom:0;

    clip-path:

        polygon(
            48.8% 0%,
            51.2% 0%,
            56% 100%,
            44% 100%
        );

    background:

        linear-gradient(
            to bottom,
            rgba(255,255,255,.75),
            rgba(255,255,255,.02)
        );

    filter: blur(1px);

    opacity:.8;

}


/* =========================================================
   LINE ARRAY 3D LOOK
   ========================================================= */

.line-array-cluster {

    transform-style: preserve-3d;

    perspective: 600px;

    filter:

        drop-shadow(
            0 10px 16px rgba(0,0,0,.65)
        );

}


.line-array-flybar {

    position: relative;

    height: 8px;

    box-shadow:

        0 2px 3px rgba(0,0,0,.5),

        0 0 8px rgba(255,255,255,.08);

}


/* suspension cable */

.line-array-cable {

    height: 34px;

    position: relative;

}


.line-array-cable::before,
.line-array-cable::after {

    content:"";

    position:absolute;

    top:0;

    width:2px;

    height:100%;

    background:
        linear-gradient(
            #d8dde3,
            #6f7884
        );

}


.line-array-cable::before {

    left:-9px;

}


.line-array-cable::after {

    right:-9px;

}


/* individual cabinets */

.line-array-box {

    transform-origin:
        50% 0%;

    transform-style:
        preserve-3d;

    transition:
        transform .2s ease;

    box-shadow:

        inset 0 1px rgba(255,255,255,.16),

        0 5px 8px rgba(0,0,0,.45);

}


/*
   Cabinet angle:
   box atas hampir straight,
   cabinet bawah semakin menembak ke audience.
*/

.line-array-box:nth-child(3) {
    transform:
        perspective(350px)
        rotateX(1deg)
        skewY(3deg);
}

.line-array-box:nth-child(4) {
    transform:
        perspective(350px)
        rotateX(3deg)
        skewY(6deg);
}

.line-array-box:nth-child(5) {
    transform:
        perspective(350px)
        rotateX(5deg)
        skewY(9deg);
}

.line-array-box:nth-child(6) {
    transform:
        perspective(350px)
        rotateX(7deg)
        skewY(12deg);
}

.line-array-box:nth-child(7) {
    transform:
        perspective(350px)
        rotateX(9deg)
        skewY(15deg);
}

.line-array-box:nth-child(8) {
    transform:
        perspective(350px)
        rotateX(11deg)
        skewY(18deg);
}


/* speaker front highlight */

.line-array-box::after {

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            120deg,
            rgba(255,255,255,.10),
            transparent 35%,
            transparent 70%,
            rgba(0,0,0,.25)
        );

    pointer-events:none;

}


/* =========================================================
   SUBWOOFER DEPTH
   ========================================================= */

.sub-box {

    transform:

        perspective(300px)
        rotateX(3deg);

    box-shadow:

        inset 0 1px rgba(255,255,255,.10),

        0 7px 14px rgba(0,0,0,.7);

}


/* =========================================================
   MONITOR DEPTH
   ========================================================= */

.monitor-wedge {

    transform:

        perspective(300px)
        rotateX(8deg);

}


/* =========================================================
   LIGHTING LIMIT
   supaya beam tidak "keluar" stage
   ========================================================= */

#stageScene > .advanced-stage-fx {

    clip-path:

        polygon(
            0 0,
            100% 0,
            100% 88%,
            0 88%
        );

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:650px){

    .audience-sweep {

        width:380px;
        height:330px;

    }

    .backlight {

        width:130px;
        height:190px;

    }

    .floor-beam {

        width:150px;
        height:130px;

    }

}/* =========================================================
   PRO DIGITAL FOH MIXER — APPEND ONLY
   ========================================================= */

#proDigitalMixer {
    margin-top: 14px;
    border: 1px solid #2b3440;
    border-radius: 14px;
    background:
        linear-gradient(145deg, #111720, #080b10);
    overflow: hidden;
    box-shadow:
        0 20px 70px rgba(0,0,0,.38);
}

#proDigitalMixer * {
    box-sizing: border-box;
}

.pdm-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    border-bottom:1px solid #29313d;
}

.pdm-title small {
    display:block;
    color:#ff6b2c;
    font-size:9px;
    font-weight:900;
    letter-spacing:.18em;
}

.pdm-title strong {
    display:block;
    margin-top:3px;
    font-size:16px;
    letter-spacing:.04em;
}

.pdm-status {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.pdm-pill {
    border:1px solid #303b48;
    background:#10161d;
    color:#8f9aa8;
    padding:6px 9px;
    border-radius:999px;
    font-size:8px;
    letter-spacing:.1em;
}

.pdm-pill.online {
    color:#63e6a5;
    border-color:#315b49;
}

.pdm-toolbar {
    display:grid;
    grid-template-columns:auto auto 1fr auto;
    gap:7px;
    align-items:center;
    padding:10px;
    border-bottom:1px solid #29313d;
    background:#0d1218;
}

.pdm-btn {
    height:32px;
    border:1px solid #323c49;
    border-radius:7px;
    background:#151b22;
    color:#dce2e9;
    padding:0 11px;
    font-size:9px;
    cursor:pointer;
}

.pdm-btn:hover {
    border-color:#697587;
}

.pdm-btn.primary {
    background:#ff6b2c;
    border-color:#ff6b2c;
    color:#080909;
    font-weight:900;
}

.pdm-btn.active {
    border-color:#ff6b2c;
    color:#ff6b2c;
    background:#232a33;
}

.pdm-transport {
    display:flex;
    gap:5px;
}

.pdm-clock {
    justify-self:end;
    color:#b9c2cd;
    font-size:10px;
    font-variant-numeric:tabular-nums;
}

/* Stem loader */

.pdm-inputs {
    padding:10px;
    border-bottom:1px solid #29313d;
}

.pdm-input-title {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
}

.pdm-input-title strong {
    font-size:9px;
    letter-spacing:.12em;
    color:#9da7b3;
}

.pdm-stem-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
}

.pdm-stem {
    position:relative;
    min-height:52px;
    padding:7px;
    border:1px dashed #384451;
    border-radius:7px;
    background:#10151c;
    cursor:pointer;
    transition:.15s;
}

.pdm-stem:hover {
    border-color:#ff6b2c;
}

.pdm-stem.loaded {
    border-style:solid;
    border-color:#315a48;
    background:#101a15;
}

.pdm-stem strong {
    display:block;
    font-size:8px;
    color:#d9dfe6;
}

.pdm-stem small {
    display:block;
    margin-top:4px;
    color:#718091;
    font-size:7px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.pdm-stem input {
    display:none;
}

/* Console */

.pdm-console-wrap {
    overflow:auto;
    scrollbar-width:thin;
}

.pdm-console {
    display:flex;
    min-width:max-content;
    min-height:700px;
}

/* Channel strip */

.pdm-channels {
    display:flex;
}

.pdm-channel {
    width:176px;
    flex:0 0 176px;
    min-height:700px;
    padding:9px;
    border-right:1px solid #2b333e;
    background:
        linear-gradient(
            180deg,
            #171d25,
            #0c1015 55%,
            #0a0d11
        );
}

.pdm-channel.selected {
    box-shadow:
        inset 0 2px #ff6b2c;
}

.pdm-channel-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:5px;
    margin-bottom:7px;
}

.pdm-channel-name {
    min-width:0;
    font-size:10px;
    font-weight:900;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.pdm-channel-no {
    flex:none;
    font-size:7px;
    color:#73808e;
}

.pdm-file {
    font-size:7px;
    color:#6f7b88;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-bottom:6px;
}

.pdm-mini {
    border:1px solid #29313b;
    border-radius:6px;
    background:#0d1218;
    padding:6px;
    margin-bottom:6px;
}

.pdm-label {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:4px;
    color:#707d8b;
    font-size:7px;
    letter-spacing:.08em;
}

.pdm-value {
    color:#d8dee5;
    font-size:7px;
    font-variant-numeric:tabular-nums;
}

.pdm-meter-row {
    display:grid;
    grid-template-columns:10px 1fr;
    gap:5px;
    align-items:end;
}

.pdm-meter {
    position:relative;
    width:11px;
    height:72px;
    border:1px solid #2d3641;
    background:
        repeating-linear-gradient(
            to top,
            #090c10 0 4px,
            #222933 4px 5px
        );
    border-radius:3px;
    overflow:hidden;
}

.pdm-meter i {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:2%;
    background:
        linear-gradient(
            to top,
            #38d68d 0 65%,
            #f1cf4c 65% 82%,
            #ff6d5d 82%
        );
}

.pdm-eq-canvas {
    width:100%;
    height:58px;
    display:block;
    background:#0a0e13;
    border:1px solid #202833;
    border-radius:5px;
}

.pdm-knobs {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:4px;
}

.pdm-control {
    display:flex;
    flex-direction:column;
    gap:3px;
}

.pdm-control span {
    font-size:6px;
    color:#687585;
    text-transform:uppercase;
}

.pdm-control output {
    font-size:6px;
    color:#b4bec9;
    text-align:right;
}

.pdm-control input[type="range"] {
    width:100%;
    accent-color:#ff6b2c;
}

.pdm-eq-row {
    display:grid;
    grid-template-columns:26px 1fr 28px;
    align-items:center;
    gap:4px;
    margin:3px 0;
}

.pdm-eq-row span {
    color:#687585;
    font-size:6px;
}

.pdm-eq-row output {
    color:#c4ccd5;
    font-size:6px;
    text-align:right;
}

.pdm-section {
    margin-top:6px;
}

.pdm-section-title {
    margin-bottom:4px;
    color:#5f6b79;
    font-size:7px;
    letter-spacing:.14em;
}

.pdm-two {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
}

.pdm-dyn {
    border:1px solid #28313c;
    background:#0e1319;
    border-radius:5px;
    padding:5px;
}

.pdm-dyn strong {
    display:block;
    font-size:6px;
    color:#8d99a7;
}

.pdm-dyn input {
    width:100%;
    accent-color:#ff6b2c;
}

.pdm-dyn output {
    display:block;
    font-size:6px;
    color:#b7c0cb;
    text-align:right;
}

.pdm-pan {
    width:100%;
    accent-color:#8b98a7;
}

.pdm-routing {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
}

.pdm-routing select {
    width:100%;
    height:25px;
    border:1px solid #303a47;
    background:#141a21;
    color:#dfe4ea;
    border-radius:5px;
    font-size:7px;
}

.pdm-switches {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:4px;
    margin-top:6px;
}

.pdm-switch {
    height:24px;
    border:1px solid #303a47;
    border-radius:5px;
    background:#141a21;
    color:#a7b1be;
    font-size:7px;
    cursor:pointer;
}

.pdm-switch.active {
    background:#55201a;
    border-color:#ff6b2c;
    color:#fff;
}

.pdm-fader-wrap {
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-top:7px;
}

.pdm-fader-db {
    font-size:8px;
    font-weight:800;
    color:#d8dee5;
    margin-bottom:4px;
}

.pdm-fader {
    writing-mode:vertical-lr;
    direction:rtl;
    height:145px;
    width:28px;
    accent-color:#ff6b2c;
}

.pdm-channel-foot {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
    margin-top:6px;
}

.pdm-channel-foot button {
    height:24px;
    border:1px solid #303a47;
    background:#141a21;
    color:#aab4bf;
    border-radius:5px;
    font-size:7px;
    cursor:pointer;
}

/* Group / bus */

.pdm-buses {
    display:flex;
    flex:0 0 auto;
}

.pdm-bus {
    width:150px;
    flex:0 0 150px;
    padding:42px 9px 12px;
    border-right:1px solid #2b333e;
    background:#11161d;
}

.pdm-bus-card {
    border:1px solid #2b3440;
    background:#0c1117;
    border-radius:7px;
    padding:7px;
    margin-bottom:6px;
}

.pdm-bus-card strong {
    display:block;
    font-size:8px;
}

.pdm-bus-card small {
    display:block;
    color:#697687;
    font-size:6px;
    margin-top:2px;
}

.pdm-bus-meter {
    height:75px;
    width:10px;
    margin:8px auto;
    background:#090c10;
    border:1px solid #2d3641;
    border-radius:3px;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
}

.pdm-bus-meter i {
    width:100%;
    height:10%;
    background:
        linear-gradient(
            to top,
            #38d68d 0 65%,
            #f1cf4c 65% 82%,
            #ff6d5d 82%
        );
}

.pdm-bus input[type="range"] {
    width:100%;
    accent-color:#ff6b2c;
}

.pdm-bus-db {
    display:block;
    text-align:center;
    color:#cdd4dc;
    font-size:8px;
    margin-top:3px;
}

/* AUX */

.pdm-aux {
    padding:42px 9px 12px;
}

.pdm-aux-card {
    border:1px solid #29323e;
    border-radius:7px;
    background:#0c1117;
    padding:7px;
    margin-bottom:6px;
}

.pdm-aux-card strong {
    font-size:8px;
}

.pdm-aux-card small {
    display:block;
    color:#687583;
    font-size:6px;
    margin-top:2px;
}

.pdm-aux-send-list {
    margin-top:7px;
    max-height:240px;
    overflow:auto;
}

.pdm-send {
    display:grid;
    grid-template-columns:52px 1fr 27px;
    gap:4px;
    align-items:center;
    margin:4px 0;
}

.pdm-send span {
    font-size:6px;
    color:#788492;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.pdm-send input {
    width:100%;
    accent-color:#58a6ff;
}

.pdm-send output {
    font-size:6px;
    color:#c5ced8;
    text-align:right;
}

/* Master */

.pdm-master {
    width:175px;
    flex:0 0 175px;
    padding:42px 11px 12px;
    border-left:1px solid #353f4b;
    background:
        linear-gradient(
            180deg,
            #191f28,
            #0b0f14
        );
}

.pdm-master-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.pdm-master-head strong {
    font-size:9px;
}

.pdm-master-meter-pair {
    display:flex;
    justify-content:center;
    gap:9px;
    margin:10px 0;
}

.pdm-master-meter {
    width:14px;
    height:220px;
    border:1px solid #303946;
    background:
        repeating-linear-gradient(
            to top,
            #0a0d11 0 4px,
            #222a34 4px 5px
        );
    border-radius:4px;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
}

.pdm-master-meter i {
    width:100%;
    height:5%;
    background:
        linear-gradient(
            to top,
            #38d68d 0 65%,
            #f1cf4c 65% 82%,
            #ff6d5d 82%
        );
}

.pdm-master-fader {
    width:100%;
    accent-color:#ff6b2c;
}

.pdm-master-db {
    text-align:center;
    color:#f0f3f6;
    font-size:11px;
    font-weight:800;
    margin-top:4px;
}

.pdm-main-buttons {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
    margin-top:9px;
}

.pdm-main-buttons button {
    height:28px;
    border:1px solid #3a444f;
    border-radius:6px;
    background:#171d24;
    color:#c5ccd4;
    font-size:7px;
    cursor:pointer;
}

.pdm-main-buttons .danger.active {
    background:#6e2020;
    border-color:#d94b4b;
    color:#fff;
}

/* Empty / custom channel */

.pdm-add-channel {
    display:flex;
    align-items:center;
    justify-content:center;
    width:150px;
    min-height:700px;
    flex:0 0 150px;
    border-right:1px solid #2b333e;
    background:#0b0f14;
}

.pdm-add-channel button {
    width:118px;
    min-height:90px;
    border:1px dashed #475361;
    background:#11161d;
    color:#aab3bf;
    border-radius:9px;
    font-size:9px;
    cursor:pointer;
}

.pdm-add-channel button:hover {
    border-color:#ff6b2c;
    color:#fff;
}

/* EQ editor */

.pdm-eq-editor {
    margin-top:10px;
    border-top:1px solid #29313d;
    padding-top:9px;
}

.pdm-eq-editor-inner {
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:8px;
}

.pdm-eq-graph {
    min-height:150px;
    border:1px solid #26303b;
    border-radius:7px;
    background:#090d12;
    overflow:hidden;
}

.pdm-eq-graph canvas {
    width:100%;
    height:100%;
    display:block;
}

.pdm-eq-controls {
    display:grid;
    gap:5px;
}

.pdm-eq-big {
    border:1px solid #28313d;
    border-radius:6px;
    background:#0e1319;
    padding:6px;
}

.pdm-eq-big strong {
    font-size:7px;
}

.pdm-eq-big input {
    width:100%;
    accent-color:#ff6b2c;
}

/* Responsive */

@media (max-width:900px) {

    .pdm-stem-grid {
        grid-template-columns:repeat(2,1fr);
    }

}/* =========================================================
   FORCE STYLE — BEAT SYNC / TAP TEMPO / CUE EDITOR
   APPEND ONLY
   ========================================================= */

/* ---------- BEAT SYNC PANEL ---------- */

#beatSyncPanel,
.beat-sync-panel,
.beat-sync,
#lightingBeatSync {
    position: relative;
    display: block;
    margin: 18px 0;
    padding: 18px;
    border: 1px solid #2b3440;
    border-radius: 14px;
    background:
        radial-gradient(circle at top right, rgba(0,220,255,.08), transparent 35%),
        linear-gradient(145deg, #0d1218, #080b10);
    color: var(--text, #f4f7fb);
    overflow: hidden;
}

#beatSyncPanel::before,
.beat-sync-panel::before,
.beat-sync::before,
#lightingBeatSync::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.025),
            transparent
        );
}

/* header */

#beatSyncPanel h3,
.beat-sync-panel h3,
.beat-sync h3,
#lightingBeatSync h3 {
    margin: 0 0 12px;
    font-size: 14px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* tempo display */

#bpmDisplay,
#tempoDisplay {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 110px;
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -.03em;
}

#bpmDisplay::after,
#tempoDisplay::after {
    content: "";
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--muted, #8993a1);
}

/* beat counter */

#beatCount,
#beatDisplay,
#beatNumber {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 34px;
    margin-left: 8px;
    padding: 5px 10px;
    border: 1px solid #303947;
    border-radius: 8px;
    background: #10151c;
    color: #ffffff;
    font-weight: 900;
    font-size: 16px;
}

/* TAP TEMPO / AUTO BEAT / RESET */

#tapTempo,
#tapTempoBtn,
#tempoTap,
button[id*="tapTempo"],
button[id*="TapTempo"] {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #303947;
    border-radius: 8px;
    background: #121820;
    color: #f4f7fb;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    cursor: pointer;
    transition: .16s ease;
}

#tapTempo:hover,
#tapTempoBtn:hover,
#tempoTap:hover,
button[id*="tapTempo"]:hover,
button[id*="TapTempo"]:hover {
    border-color: #00e5ff;
    box-shadow: 0 0 16px rgba(0,229,255,.16);
    transform: translateY(-1px);
}

/* generic beat buttons */

.beat-sync button,
.beat-sync-panel button,
#beatSyncPanel button,
#lightingBeatSync button {
    appearance: none;
}

/* ---------- SPACE BUTTON ---------- */

#beatTrigger,
#spaceBeat,
#beatSpace,
.space-beat,
.beat-space {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 64px;
    margin: 12px 0;
    border: 1px solid #3a4655;
    border-radius: 10px;
    background:
        linear-gradient(180deg,#151c25,#0d1219);
    color: #ffffff;
    font-size: 20px;
    font-weight: 1000;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow:
        inset 0 1px rgba(255,255,255,.05),
        0 8px 24px rgba(0,0,0,.22);
    transition: .1s ease;
}

#beatTrigger:hover,
#spaceBeat:hover,
#beatSpace:hover,
.space-beat:hover,
.beat-space:hover {
    border-color: #00e5ff;
    box-shadow:
        0 0 24px rgba(0,229,255,.18),
        inset 0 1px rgba(255,255,255,.05);
}

#beatTrigger.hit,
#spaceBeat.hit,
#beatSpace.hit,
.space-beat.hit,
.beat-space.hit {
    transform: scale(.985);
    border-color: #ffffff;
    box-shadow:
        0 0 26px rgba(255,255,255,.22),
        inset 0 0 24px rgba(255,255,255,.06);
}

/* ---------- BEAT CONTROLS ---------- */

.beat-controls,
.beat-sync-controls,
.tap-tempo-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px;
    margin-top: 10px;
}

@media(max-width:700px){
    .beat-controls,
    .beat-sync-controls,
    .tap-tempo-controls {
        grid-template-columns: 1fr;
    }
}

/* ---------- SENSITIVITY ---------- */

.beat-settings,
.beat-parameters,
.beat-controls-panel {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0,1fr));
    gap: 10px;
    margin-top: 12px;
}

.beat-settings label,
.beat-parameters label,
.beat-controls-panel label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 1px solid #252d38;
    border-radius: 8px;
    background: #0c1117;
    color: var(--muted, #8993a1);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.beat-settings input[type="range"],
.beat-parameters input[type="range"],
.beat-controls-panel input[type="range"] {
    width: 100%;
    accent-color: #00e5ff;
}

@media(max-width:700px){
    .beat-settings,
    .beat-parameters,
    .beat-controls-panel {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   CUE EDITOR
   ========================================================= */

.cue-editor,
.beat-cue-editor,
#cueEditor {
    display: block;
    margin-top: 18px;
    padding: 16px;
    border: 1px solid #2a313d;
    border-radius: 14px;
    background:
        linear-gradient(145deg,#0e1218,#090d12);
    overflow: hidden;
}

.cue-editor-head,
.cue-header,
.cue-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.cue-editor-title,
.cue-title {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* toolbar buttons */

.cue-toolbar button,
.cue-editor button,
#applyCuePattern,
#clearCuePattern,
#saveCue {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #303845;
    border-radius: 7px;
    background: #11161d;
    color: #dbe2ea;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

.cue-toolbar button:hover,
.cue-editor button:hover,
#applyCuePattern:hover,
#clearCuePattern:hover,
#saveCue:hover {
    border-color: #00e5ff;
    color: #ffffff;
}

/* beat length selector */

#cueLength {
    height: 34px;
    border: 1px solid #303845;
    border-radius: 7px;
    background: #11161d;
    color: #ffffff;
    padding: 0 9px;
    font-size: 10px;
}

/* ---------- CUE GRID ---------- */

.cue-grid {
    display: grid;
    grid-template-columns:
        repeat(8, minmax(72px, 1fr));
    gap: 7px;
    margin-top: 14px;
}

.cue-beat {
    position: relative;
    min-height: 92px;
    padding: 9px;
    border: 1px solid #2b3440;
    border-radius: 9px;
    background:
        linear-gradient(180deg,#121820,#0c1117);
    cursor: pointer;
    transition:
        border-color .12s ease,
        box-shadow .12s ease,
        transform .12s ease;
}

.cue-beat:hover {
    border-color: #526072;
    transform: translateY(-1px);
}

.cue-beat.current {
    border-color: #ffffff;
    box-shadow:
        0 0 20px rgba(255,255,255,.18),
        inset 0 0 16px rgba(255,255,255,.025);
    transform: scale(1.025);
}

.cue-number {
    margin-bottom: 8px;
    color: #9aa5b3;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.cue-color {
    width: 100%;
    height: 20px;
    margin-bottom: 8px;
    border-radius: 5px;
    background: #ffffff;
}

.cue-effect {
    color: #ffffff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .06em;
}

.cue-intensity {
    margin-top: 5px;
    color: #8993a1;
    font-size: 8px;
    font-weight: 800;
}

/* ---------- MODAL ---------- */

.cue-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(5px);
}

.cue-modal.show {
    display: flex;
}

.cue-modal-card,
.cue-modal-content {
    width: min(560px, 100%);
    max-height: 90vh;
    overflow: auto;
    padding: 18px;
    border: 1px solid #303845;
    border-radius: 12px;
    background:
        linear-gradient(145deg,#121820,#0a0e13);
    box-shadow:
        0 25px 80px rgba(0,0,0,.5);
}

.cue-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.cue-modal-head h3,
.cue-modal-head strong {
    margin: 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .1em;
}

.cue-modal-head button {
    width: 30px;
    height: 30px;
    border: 1px solid #303845;
    border-radius: 6px;
    background: #11161d;
    color: #9aa5b3;
    cursor: pointer;
}

/* ---------- FORM ---------- */

.cue-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cue-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--muted, #8993a1);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.cue-form input[type="range"] {
    width: 100%;
    accent-color: #00e5ff;
}

.cue-form input[type="color"] {
    width: 100%;
    height: 36px;
    padding: 2px;
    border: 1px solid #303845;
    border-radius: 7px;
    background: #11161d;
}

.cue-form select {
    width: 100%;
    height: 36px;
    border: 1px solid #303845;
    border-radius: 7px;
    background: #11161d;
    color: #ffffff;
    padding: 0 8px;
    font-size: 10px;
}

.cue-save {
    width: 100%;
    height: 40px;
    margin-top: 16px;
    border: 1px solid #00e5ff;
    border-radius: 8px;
    background: #00e5ff;
    color: #050708;
    font-weight: 900;
    cursor: pointer;
}

@media(max-width:700px){
    .cue-grid {
        grid-template-columns:
            repeat(4, minmax(60px,1fr));
    }

    .cue-toolbar {
        flex-wrap: wrap;
    }

    .cue-form {
        grid-template-columns: 1fr;
    }
}/* =========================================================
   LIVE BEAT PUNCH VISUAL
   ========================================================= */

@keyframes liveBeatPunch {

    0% {
        filter:
            brightness(1)
            saturate(1);
    }

    18% {
        filter:
            brightness(1.9)
            saturate(1.55)
            contrast(1.15);
    }

    42% {
        filter:
            brightness(1.45)
            saturate(1.3);
    }

    100% {
        filter:
            brightness(1)
            saturate(1);
    }
}

.live-beat-punch {
    animation:
        liveBeatPunch
        .18s
        ease-out;
}


/* ==========================================
   LAMP / FIXTURE HIT
   hanya source/lampu yang flicker
========================================== */

@keyframes beatLampHit {

    0% {
        opacity: .75;
        filter:
            brightness(1);
        transform: scale(1);
    }

    15% {
        opacity: 1;
        filter:
            brightness(3)
            drop-shadow(
                0 0 14px
                rgba(255,255,255,.95)
            );
        transform: scale(1.06);
    }

    35% {
        opacity: 1;
        filter:
            brightness(2);
    }

    100% {
        opacity: .8;
        filter:
            brightness(1);
        transform: scale(1);
    }
}

.beat-lamp-hit {
    animation:
        beatLampHit
        .11s
        ease-out;
}


/* ==========================================
   MAIN BEAM HIT
   beam TIDAK mati
========================================== */

@keyframes liveBeamHit {

    0% {
        opacity: .58;
        filter:
            brightness(1);
    }

    18% {
        opacity: 1;
        filter:
            brightness(2.1)
            saturate(1.6)
            drop-shadow(
                0 0 14px
                var(--beat-color, #ffffff)
            );
    }

    45% {
        opacity: .9;
        filter:
            brightness(1.55)
            saturate(1.25);
    }

    100% {
        opacity: .62;
        filter:
            brightness(1);
    }
}

.live-beam-hit {
    animation:
        liveBeamHit
        .18s
        ease-out;
}

@keyframes liveBeamSoftHit {

    0% {
        opacity: .45;
    }

    20% {
        opacity: .9;
        filter:
            brightness(1.6);
    }

    100% {
        opacity: .55;
    }
}

.live-beam-soft-hit {
    animation:
        liveBeamSoftHit
        .18s
        ease-out;
}


/* ==========================================
   FLOOR BEAM
========================================== */

@keyframes floorBeatHit {

    0% {
        opacity: .45;
        transform: scaleY(.92);
    }

    20% {
        opacity: 1;
        transform: scaleY(1.08);
        filter:
            brightness(1.8);
    }

    100% {
        opacity: .55;
        transform: scaleY(1);
    }
}

.floor-beat-hit {
    animation:
        floorBeatHit
        .18s
        ease-out;
}


/* ==========================================
   BACKLIGHT HIT
========================================== */

@keyframes backlightBeatHit {

    0% {
        opacity: .45;
    }

    20% {
        opacity: 1;
        filter:
            brightness(2);
    }

    100% {
        opacity: .58;
    }
}

.backlight-beat-hit {
    animation:
        backlightBeatHit
        .18s
        ease-out;
}


/* ==========================================
   AUDIENCE HIT
========================================== */

@keyframes audienceBeatHit {

    0% {
        opacity: .35;
        transform: scale(1);
    }

    20% {
        opacity: 1;
        transform: scale(1.025);
        filter:
            brightness(1.7);
    }

    55% {
        opacity: .7;
    }

    100% {
        opacity: .35;
        transform: scale(1);
    }
}

.audience-beat-hit {
    animation:
        audienceBeatHit
        .22s
        ease-out;
}/* =========================================================
   PRO LIGHTING BEAT CONTROLLER UI
   CONCERT / CLUB / ROCK / SLOW
   SPACE / AUTO BEAT / RESET
   APPEND ONLY
   ========================================================= */

/* ---------- WRAPPER ---------- */

.beat-sync-panel,
.beat-sync,
#beatSyncPanel,
#lightingBeatSync {
    position: relative;
    width: 100%;
    margin: 18px 0;
    padding: 18px;
    border: 1px solid #29323e;
    border-radius: 16px;
    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(0, 229, 255, .07),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 100%,
            rgba(139, 53, 255, .07),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #10151c,
            #080b10
        );
    box-shadow:
        inset 0 1px rgba(255,255,255,.035),
        0 16px 45px rgba(0,0,0,.25);
    overflow: hidden;
}

/* ---------- HEADER ---------- */

.beat-sync-header,
.beat-controller-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.beat-sync-title,
.beat-controller-title {
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #ffffff;
}

.beat-sync-status,
.beat-controller-status {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #8995a4;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.beat-sync-status::before,
.beat-controller-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34404d;
    box-shadow: 0 0 0 rgba(0,229,255,0);
    transition: .2s;
}

/* ---------- TEMPO DISPLAY ---------- */

.beat-tempo-display,
.tempo-display {
    display: grid;
    grid-template-columns: 1.2fr .8fr .8fr;
    gap: 9px;
    margin-bottom: 12px;
}

.beat-tempo-box,
.tempo-box {
    min-height: 74px;
    padding: 12px;
    border: 1px solid #28313c;
    border-radius: 10px;
    background:
        linear-gradient(
            180deg,
            #121820,
            #0c1117
        );
}

.beat-tempo-label,
.tempo-label {
    margin-bottom: 7px;
    color: #6f7b89;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.beat-tempo-value,
.tempo-value {
    color: #ffffff;
    font-size: 23px;
    font-weight: 1000;
    letter-spacing: -.03em;
}

.beat-tempo-value small,
.tempo-value small {
    margin-left: 3px;
    color: #697583;
    font-size: 8px;
    letter-spacing: .08em;
}

/* ---------- BEAT NUMBER ---------- */

#beatCount {
    font-variant-numeric: tabular-nums;
}

#beatBpm,
#beatCount,
#beatConfidence {
    transition:
        color .15s ease,
        text-shadow .15s ease;
}

.beat-sync.beat-live #beatBpm,
.beat-sync.beat-live #beatCount {
    color: #ffffff;
    text-shadow:
        0 0 12px rgba(0,229,255,.35);
}

/* =========================================================
   PATTERN SELECTOR
   ========================================================= */

.beat-patterns,
.pattern-buttons,
.beat-mode-buttons {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 12px;
}

.beat-patterns button,
.pattern-buttons button,
.beat-mode-buttons button,
[data-pattern] {
    position: relative;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid #2c3642;
    border-radius: 9px;
    background:
        linear-gradient(
            180deg,
            #151c24,
            #0d1218
        );
    color: #9ca7b5;
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: .09em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        transform .12s ease,
        border-color .12s ease,
        color .12s ease,
        background .12s ease,
        box-shadow .12s ease;
}

.beat-patterns button::after,
.pattern-buttons button::after,
.beat-mode-buttons button::after,
[data-pattern]::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 5px;
    height: 2px;
    border-radius: 999px;
    background: transparent;
    transition: .12s ease;
}

.beat-patterns button:hover,
.pattern-buttons button:hover,
.beat-mode-buttons button:hover,
[data-pattern]:hover {
    color: #ffffff;
    border-color: #526171;
    transform: translateY(-1px);
}

.beat-patterns button.active,
.pattern-buttons button.active,
.beat-mode-buttons button.active,
[data-pattern].active {
    color: #ffffff;
    border-color: #00e5ff;
    background:
        linear-gradient(
            180deg,
            rgba(0,229,255,.15),
            rgba(0,229,255,.04)
        );
    box-shadow:
        0 0 20px rgba(0,229,255,.10),
        inset 0 0 18px rgba(0,229,255,.035);
}

.beat-patterns button.active::after,
.pattern-buttons button.active::after,
.beat-mode-buttons button.active::after,
[data-pattern].active::after {
    background: #00e5ff;
    box-shadow:
        0 0 10px rgba(0,229,255,.65);
}

/* individual mode accents */

[data-pattern="concert"].active {
    border-color: #ffffff;
    box-shadow:
        0 0 16px rgba(255,255,255,.10);
}

[data-pattern="club"].active {
    border-color: #a855f7;
    box-shadow:
        0 0 18px rgba(168,85,247,.12);
}

[data-pattern="rock"].active {
    border-color: #ff3d5a;
    box-shadow:
        0 0 18px rgba(255,61,90,.12);
}

[data-pattern="slow"].active {
    border-color: #58a6ff;
    box-shadow:
        0 0 18px rgba(88,166,255,.12);
}

/* =========================================================
   MAIN SPACE BUTTON
   ========================================================= */

#beatTrigger,
#spaceBeat,
#beatSpace,
.space-beat,
.beat-space,
.beat-main-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 82px;
    margin: 10px 0;
    border: 1px solid #35404d;
    border-radius: 12px;
    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.05),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #171e27,
            #0c1117
        );
    color: #ffffff;
    font-size: 22px;
    font-weight: 1000;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow:
        inset 0 1px rgba(255,255,255,.05),
        0 12px 30px rgba(0,0,0,.28);
    transition:
        transform .08s ease,
        border-color .1s ease,
        box-shadow .1s ease;
    overflow: hidden;
}

#beatTrigger::before,
#spaceBeat::before,
#beatSpace::before,
.space-beat::before,
.beat-space::before,
.beat-main-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.045) 50%,
            transparent 100%
        );
    transform: translateX(-100%);
    transition: .35s;
}

#beatTrigger:hover,
#spaceBeat:hover,
#beatSpace:hover,
.space-beat:hover,
.beat-space:hover,
.beat-main-button:hover {
    border-color: #00e5ff;
    box-shadow:
        0 0 28px rgba(0,229,255,.15),
        inset 0 0 25px rgba(0,229,255,.025);
}

#beatTrigger:hover::before,
#spaceBeat:hover::before,
#beatSpace:hover::before,
.space-beat:hover::before,
.beat-space:hover::before,
.beat-main-button:hover::before {
    transform: translateX(100%);
}

#beatTrigger.hit,
#spaceBeat.hit,
#beatSpace.hit,
.space-beat.hit,
.beat-space.hit,
.beat-main-button.hit {
    transform: scale(.985);
    border-color: #ffffff;
    box-shadow:
        0 0 30px rgba(255,255,255,.20),
        0 0 60px rgba(0,229,255,.10),
        inset 0 0 30px rgba(255,255,255,.05);
}

/* keyboard hint */

.beat-space-hint {
    text-align: center;
    margin-top: 7px;
    color: #66717f;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

/* =========================================================
   TAP / AUTO / RESET
   ========================================================= */

.beat-action-row,
.beat-transport,
.tempo-actions {
    display: grid;
    grid-template-columns:
        1fr 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

.beat-action-row button,
.beat-transport button,
.tempo-actions button,
#tapTempoBtn,
#autoBeatBtn,
#resetBeatBtn {
    position: relative;
    min-height: 42px;
    border: 1px solid #303a47;
    border-radius: 8px;
    background:
        linear-gradient(
            180deg,
            #151b23,
            #0c1117
        );
    color: #b8c1cb;
    font-size: 8px;
    font-weight: 1000;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        .12s ease;
}

.beat-action-row button:hover,
.beat-transport button:hover,
.tempo-actions button:hover,
#tapTempoBtn:hover,
#autoBeatBtn:hover,
#resetBeatBtn:hover {
    color: #ffffff;
    border-color: #566474;
    transform: translateY(-1px);
}

/* TAP */

#tapTempoBtn {
    border-color: #00e5ff;
    color: #dffcff;
    background:
        linear-gradient(
            180deg,
            rgba(0,229,255,.12),
            rgba(0,229,255,.035)
        );
}

#tapTempoBtn:hover {
    box-shadow:
        0 0 18px rgba(0,229,255,.15);
}

/* AUTO */

#autoBeatBtn {
    border-color: #3e4d5e;
}

#autoBeatBtn.active {
    color: #ffffff;
    border-color: #00e5ff;
    background:
        linear-gradient(
            180deg,
            rgba(0,229,255,.18),
            rgba(0,229,255,.04)
        );
    box-shadow:
        0 0 22px rgba(0,229,255,.13),
        inset 0 0 18px rgba(0,229,255,.04);
}

#autoBeatBtn.active::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: #00e5ff;
    box-shadow:
        0 0 10px #00e5ff;
    vertical-align: middle;
    animation:
        autoBeatPulse .7s infinite alternate;
}

@keyframes autoBeatPulse {
    from {
        opacity: .45;
        transform: scale(.8);
    }

    to {
        opacity: 1;
        transform: scale(1.15);
    }
}

/* RESET */

#resetBeatBtn {
    color: #858f9d;
}

#resetBeatBtn:hover {
    border-color: #ff536b;
    color: #ffffff;
    box-shadow:
        0 0 18px rgba(255,83,107,.10);
}

/* =========================================================
   SLIDERS
   ========================================================= */

.beat-parameters,
.beat-settings,
.beat-controls-panel {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0,1fr));
    gap: 8px;
    margin-top: 11px;
}

.beat-parameters label,
.beat-settings label,
.beat-controls-panel label {
    padding: 10px;
    border: 1px solid #252e39;
    border-radius: 8px;
    background: #0c1117;
    color: #7d8896;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.beat-parameters input,
.beat-settings input,
.beat-controls-panel input {
    width: 100%;
    accent-color: #00e5ff;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:800px) {

    .beat-patterns,
    .pattern-buttons,
    .beat-mode-buttons {
        grid-template-columns:
            repeat(2,1fr);
    }

    .beat-tempo-display,
    .tempo-display {
        grid-template-columns:
            1fr 1fr;
    }

    .beat-parameters,
    .beat-settings,
    .beat-controls-panel {
        grid-template-columns:
            1fr 1fr;
    }
}

@media(max-width:520px) {

    .beat-patterns,
    .pattern-buttons,
    .beat-mode-buttons {
        grid-template-columns:
            1fr 1fr;
    }

    .beat-action-row,
    .beat-transport,
    .tempo-actions {
        grid-template-columns:
            1fr;
    }

    .beat-tempo-display,
    .tempo-display {
        grid-template-columns:
            1fr;
    }

    .beat-parameters,
    .beat-settings,
    .beat-controls-panel {
        grid-template-columns:
            1fr;
    }

    #beatTrigger,
    #spaceBeat,
    #beatSpace,
    .space-beat,
    .beat-space,
    .beat-main-button {
        min-height: 72px;
        font-size: 18px;
    }
}
/* =========================================================
   FORCE DIGITAL MIXER VISIBLE
   ========================================================= */

#digitalMixer {
    display: block !important;
    width: 100%;
    margin-top: 20px;
    position: relative;
    z-index: 20;
}

.digital-console-wrapper {
    display: block !important;
    width: 100%;
    overflow-x: auto;
}

.digital-console {
    display: flex !important;
    width: max-content;
    min-width: 100%;
    gap: 6px;
    align-items: stretch;
}

.digital-channels {
    display: flex !important;
    gap: 6px;
    width: max-content;
    min-width: 100%;
}

.digital-channel {
    display: flex !important;
    flex-direction: column;
    flex: 0 0 190px;
    min-height: 720px;
    padding: 10px;
    border: 1px solid #303947;
    border-radius: 10px;
    background:
        linear-gradient(
            180deg,
            #151b23,
            #0a0e13
        );
}

.bus-rack {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 180px;
    min-height: 720px;
}

.digital-master {
    display: flex !important;
    flex-direction: column;
    flex: 0 0 210px;
    min-height: 720px;
}
/* =========================================================
   DIGITAL MIXER CSS
   ========================================================= */

.digital-mixer{
  width:100%;
  padding:20px;
  box-sizing:border-box;
  background:
    linear-gradient(180deg,#111827,#0b0f16);
  border:1px solid #263241;
  border-radius:18px;
  color:#e5edf7;
  font-family:Arial,Helvetica,sans-serif;
  overflow:hidden;
}

.digital-mixer-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:18px;
}

.digital-mixer-header h2{
  margin:4px 0 0;
  font-size:24px;
  letter-spacing:.08em;
}

.eyebrow{
  font-size:10px;
  color:#6ea8ff;
  font-weight:800;
  letter-spacing:.18em;
}

.mixer-status{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.mixer-status span{
  padding:7px 10px;
  border:1px solid #263241;
  background:#0d131d;
  border-radius:8px;
  font-size:11px;
  color:#8ea3ba;
}

#dspStatus{
  color:#56e39f;
}

.stem-loader{
  padding:15px;
  border:1px solid #263241;
  background:#0d131d;
  border-radius:14px;
}

.stem-loader-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}

.stem-loader-title strong{
  display:block;
  font-size:13px;
}

.stem-loader-title span{
  display:block;
  margin-top:3px;
  font-size:11px;
  color:#75869b;
}

.stem-loader button,
.dsp-transport button,
.dsp-master button{
  border:1px solid #334155;
  background:#161f2c;
  color:#eaf2fb;
  padding:9px 13px;
  border-radius:8px;
  cursor:pointer;
  font-weight:800;
}

.stem-loader button:hover,
.dsp-transport button:hover{
  background:#1e2938;
}

.stem-drop-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
}

.stem-drop{
  min-height:74px;
  padding:10px;
  border:1px dashed #334155;
  border-radius:10px;
  background:#111824;
  cursor:pointer;
  box-sizing:border-box;
}

.stem-drop:hover{
  border-color:#5f7ea6;
}

.stem-drop.loaded{
  border-color:#43d79b;
  background:#102019;
}

.stem-drop span{
  display:block;
  font-weight:900;
  font-size:11px;
  letter-spacing:.1em;
}

.stem-drop small{
  display:block;
  margin-top:6px;
  color:#68798d;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.stem-drop input{
  display:none;
}

.dsp-transport{
  display:flex;
  gap:8px;
  margin:14px 0;
}

.digital-channels{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:10px;
  align-items:stretch;
}

.digital-channel{
  flex:0 0 168px;
  min-height:520px;
  padding:10px;
  border:1px solid #29384a;
  border-radius:12px;
  background:
    linear-gradient(180deg,#151d28,#0c1118);
  box-sizing:border-box;
}

.channel-head{
  text-align:center;
  margin-bottom:8px;
}

.channel-head strong{
  display:block;
  font-size:12px;
}

.channel-head small{
  display:block;
  color:#697b90;
  margin-top:3px;
}

.channel-meter{
  height:150px;
  width:17px;
  margin:10px auto;
  border-radius:9px;
  background:#0a0e13;
  border:1px solid #202c39;
  position:relative;
  overflow:hidden;
}

.channel-meter-fill{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2%;
  background:
    linear-gradient(
      to top,
      #1dd69a 0%,
      #b8d73f 65%,
      #f59e0b 82%,
      #ef4444 100%
    );
}

.channel-row{
  margin-top:8px;
}

.channel-row label{
  display:block;
  font-size:9px;
  color:#73859b;
  margin-bottom:4px;
  text-transform:uppercase;
}

.channel-row input[type=range]{
  width:100%;
}

.eq-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
}

.btn-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  margin-top:9px;
}

.channel-btn{
  border:1px solid #314052;
  background:#151d28;
  color:#c7d3df;
  border-radius:6px;
  padding:6px 4px;
  cursor:pointer;
  font-size:9px;
  font-weight:800;
}

.channel-btn.active{
  background:#173728;
  border-color:#39d99b;
  color:#72f0ba;
}

.fader-wrap{
  height:185px;
  margin:8px 0;
  display:flex;
  justify-content:center;
  align-items:center;
}

.channel-fader{
  width:145px;
  transform:rotate(-90deg);
}

.pan-value,
.fader-value{
  text-align:center;
  font-size:10px;
  color:#91a4ba;
  margin-top:4px;
}

.dsp-bus-rack{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:12px;
}

.dsp-bus{
  padding:10px;
  border:1px solid #29384a;
  background:#0d131d;
  border-radius:10px;
}

.dsp-bus span{
  display:block;
  font-size:9px;
  letter-spacing:.08em;
  color:#75879d;
}

.dsp-bus input{
  width:100%;
  margin-top:7px;
}

.dsp-bus b{
  display:block;
  text-align:right;
  font-size:10px;
  margin-top:3px;
}

.dsp-master{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:14px;
  padding:15px;
  border:1px solid #344154;
  border-radius:12px;
  background:#101722;
}

.master-meter-wrap{
  width:30px;
}

.master-title{
  font-size:9px;
  font-weight:900;
  margin-bottom:6px;
}

.master-meter{
  width:20px;
  height:170px;
  border-radius:10px;
  background:#080b10;
  border:1px solid #273241;
  overflow:hidden;
  position:relative;
}

#masterMeterFill{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2%;
  background:
    linear-gradient(
      to top,
      #1dd69a 0%,
      #b8d73f 65%,
      #f59e0b 82%,
      #ef4444 100%
    );
}

.master-fader-wrap{
  flex:1;
}

.master-db{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  margin-bottom:5px;
}

#dspMaster{
  width:100%;
}

#dspMasterMute.active,
.channel-btn.mute.active{
  background:#551b1b;
  border-color:#ef4444;
  color:#ff8080;
}

@media(max-width:1000px){
  .stem-drop-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .dsp-bus-rack{
    grid-template-columns:repeat(2,1fr);
  }
}
/* =========================================================
   SHAUTUNA DIGITAL MIXER
   APPEND ONLY
   ========================================================= */

.sha-dm{
    width:100%;
    margin-top:24px;
    padding:20px;
    background:
        linear-gradient(180deg,#111720,#080b10);
    border:1px solid #2b3440;
    border-radius:16px;
    color:#edf2f7;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.sha-dm-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:16px;
}

.sha-dm-eyebrow{
    color:#ff6b2c;
    font-size:9px;
    font-weight:900;
    letter-spacing:.18em;
}

.sha-dm-header h2{
    margin:4px 0 2px;
    font-size:24px;
    letter-spacing:.08em;
}

.sha-dm-header p{
    margin:0;
    color:#7f8b99;
    font-size:11px;
}

.sha-dm-status{
    display:flex;
    align-items:center;
    gap:7px;
    padding:8px 11px;
    border:1px solid #293440;
    border-radius:8px;
    background:#0c1117;
    color:#75879a;
    font-size:9px;
    letter-spacing:.12em;
}

.sha-dm-led{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#4b5563;
}

.sha-dm-status.live{
    color:#63e6a5;
}

.sha-dm-status.live .sha-dm-led{
    background:#63e6a5;
    box-shadow:0 0 12px #63e6a5;
}


/* TRANSPORT */

.sha-dm-transport{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:12px;
}

.sha-dm-btn,
.sha-dm-upload-master,
.sha-dm-master button{
    min-height:36px;
    border:1px solid #354151;
    border-radius:7px;
    background:#151b23;
    color:#dce3ea;
    padding:0 13px;
    font-size:9px;
    font-weight:800;
    cursor:pointer;
}

.sha-dm-btn:hover,
.sha-dm-upload-master:hover{
    border-color:#ff6b2c;
}

.sha-dm-primary{
    background:#ff6b2c;
    border-color:#ff6b2c;
    color:#080909;
}

.sha-dm-upload-master{
    display:flex;
    align-items:center;
}

.sha-dm-upload-master input{
    display:none;
}


/* CONSOLE */

.sha-dm-console{
    display:flex;
    gap:6px;
    overflow-x:auto;
    padding-bottom:8px;
    align-items:stretch;
}

.sha-dm-channel{
    flex:0 0 185px;
    min-height:610px;
    padding:11px;
    border:1px solid #303a47;
    border-radius:10px;
    background:
        linear-gradient(180deg,#171e27,#0b0f15);
    display:flex;
    flex-direction:column;
}

.sha-dm-channel:nth-child(1){
    border-top:3px solid #ff6b2c;
}

.sha-dm-channel:nth-child(2){
    border-top:3px solid #58a6ff;
}

.sha-dm-channel:nth-child(3){
    border-top:3px solid #63e6a5;
}

.sha-dm-channel:nth-child(4){
    border-top:3px solid #63e6a5;
}

.sha-dm-channel:nth-child(5){
    border-top:3px solid #a855f7;
}

.sha-dm-channel:nth-child(6){
    border-top:3px solid #f59e0b;
}


/* CHANNEL HEADER */

.sha-dm-channel-head{
    text-align:center;
    margin-bottom:8px;
}

.sha-dm-channel-head span{
    display:block;
    color:#667487;
    font-size:7px;
    letter-spacing:.12em;
}

.sha-dm-channel-head strong{
    display:block;
    margin-top:3px;
    font-size:11px;
}


/* LOAD */

.sha-dm-file{
    display:grid;
    place-items:center;
    height:27px;
    border:1px dashed #394656;
    border-radius:5px;
    color:#8996a5;
    font-size:7px;
    cursor:pointer;
}

.sha-dm-file:hover{
    border-color:#ff6b2c;
    color:#fff;
}

.sha-dm-file input{
    display:none;
}


/* METER */

.sha-dm-meter{
    height:110px;
    width:13px;
    margin:10px auto;
    border:1px solid #2d3743;
    border-radius:3px;
    background:
        repeating-linear-gradient(
            to top,
            #080b0f 0 4px,
            #202732 4px 5px
        );
    position:relative;
    overflow:hidden;
}

.sha-dm-meter i{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:5%;
    background:
        linear-gradient(
            to top,
            #31d68d 0 65%,
            #d8d84b 65% 82%,
            #ff6b5d 82%
        );
}


/* SECTION */

.sha-dm-section-title{
    margin-top:7px;
    margin-bottom:4px;
    color:#657487;
    font-size:7px;
    letter-spacing:.13em;
}


/* RANGE */

.sha-dm input[type="range"]{
    width:100%;
    accent-color:#ff6b2c;
    cursor:pointer;
}


/* EQ */

.sha-dm-eq{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:4px;
}

.sha-dm-eq label{
    color:#69788a;
    font-size:6px;
    text-align:center;
}

.sha-dm-eq input{
    margin-top:3px;
}


/* PAN */

.sha-dm-pan{
    margin-top:2px;
}

.sha-dm-pan-value{
    text-align:center;
    color:#aab4c0;
    font-size:8px;
    margin-top:3px;
}


/* FADER */

.sha-dm-fader-area{
    flex:1;
    min-height:185px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.sha-dm-db{
    color:#dce3ea;
    font-size:9px;
    font-weight:900;
    margin-bottom:5px;
}

.sha-dm-fader{
    width:150px !important;
    transform:rotate(-90deg);
}


/* BUTTONS */

.sha-dm-buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
}

.sha-dm-buttons button{
    height:27px;
    border:1px solid #354151;
    border-radius:5px;
    background:#151b23;
    color:#aab5c1;
    font-size:7px;
    font-weight:800;
    cursor:pointer;
}

.sha-dm-buttons button:hover{
    border-color:#687585;
}

.sha-dm-buttons button.active{
    background:#5a1b1b;
    border-color:#ef4444;
    color:#ff8b8b;
}


/* MASTER */

.sha-dm-master{
    flex:0 0 175px;
    min-height:610px;
    padding:13px;
    border:1px solid #3b4653;
    border-radius:10px;
    background:
        linear-gradient(180deg,#1a2029,#090d12);
    display:flex;
    flex-direction:column;
}

.sha-dm-master-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:8px;
}

.sha-dm-master-head strong{
    color:#fff;
    font-size:10px;
}


/* MASTER METER */

.sha-dm-master-meter{
    height:260px;
    width:18px;
    margin:14px auto;
    border:1px solid #303a47;
    border-radius:4px;
    background:
        repeating-linear-gradient(
            to top,
            #080b0f 0 4px,
            #252d38 4px 5px
        );
    position:relative;
    overflow:hidden;
}

.sha-dm-master-meter i{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:5%;
    background:
        linear-gradient(
            to top,
            #31d68d 0 65%,
            #d8d84b 65% 82%,
            #ff6b5d 82%
        );
}


/* MASTER FADER */

.sha-dm-master-fader{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sha-dm-master-fader input{
    width:155px !important;
    transform:rotate(-90deg);
}


/* MASTER MUTE */

.sha-dm-master button{
    margin-top:10px;
    min-height:30px;
    font-size:8px;
}

.sha-dm-master button.active{
    background:#641d1d;
    border-color:#ef4444;
    color:#ff9090;
}


/* FOOTER */

.sha-dm-footer{
    display:flex;
    justify-content:space-between;
    gap:15px;
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid #252e39;
    color:#657487;
    font-size:7px;
    letter-spacing:.08em;
}


/* MOBILE */

@media(max-width:700px){

    .sha-dm{
        padding:12px;
    }

    .sha-dm-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .sha-dm-channel{
        flex-basis:165px;
    }

    .sha-dm-master{
        flex-basis:165px;
    }

    .sha-dm-footer{
        flex-direction:column;
    }

}
/* =========================================================
   SHAUTUNA BEAT SYNC / LIGHTING SHOW
   FINAL CSS — APPEND ONLY
   ========================================================= */

.beat-controller {
    width: 100%;
    margin-top: 18px;
    padding: 20px;
    position: relative;

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(0,229,255,.08),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #111720,
            #090d13
        );

    border: 1px solid #2b3440;
    border-radius: 16px;

    box-shadow:
        0 18px 55px rgba(0,0,0,.30);

    color: #edf2f7;
    overflow: hidden;
}


/* =========================================================
   HEADER
   ========================================================= */

.beat-controller > .section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;

    margin-bottom: 16px;
}

.beat-controller > .section-head h3 {
    margin: 0;

    font-size: 14px;
    font-weight: 900;

    letter-spacing: .12em;
    text-transform: uppercase;

    color: #ffffff;
}

.beat-controller > .section-head span {
    padding: 6px 10px;

    border: 1px solid #33404e;
    border-radius: 999px;

    background: #0c1219;

    color: #7e8d9e;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .12em;
}


/* =========================================================
   MAIN DISPLAY
   ========================================================= */

.beat-main {

    display: grid;

    grid-template-columns:
        1fr
        150px
        1fr;

    align-items: center;

    gap: 18px;

    min-height: 150px;

    margin-bottom: 16px;

    padding: 18px;

    background:
        linear-gradient(
            180deg,
            #0d131b,
            #080c11
        );

    border: 1px solid #252f3b;
    border-radius: 12px;
}


/* =========================================================
   TEMPO
   ========================================================= */

.beat-bpm {

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-height: 105px;

    padding: 14px;

    background: #0b1016;

    border: 1px solid #27313d;

    border-radius: 10px;
}

.beat-label {

    display: block;

    margin-bottom: 8px;

    color: #687789;

    font-size: 8px;

    letter-spacing: .16em;

    font-weight: 800;
}

#beatBpm {

    display: block;

    font-size: 31px;

    line-height: 1;

    font-weight: 950;

    letter-spacing: -.03em;

    color: #ffffff;

    text-shadow:
        0 0 22px rgba(0,229,255,.12);
}


/* CALCULATING / CONFIDENCE */

#beatConfidence {

    display: block;

    margin-top: 9px;

    color: #758497;

    font-size: 8px;

    letter-spacing: .08em;

    line-height: 1.5;

}


/* =========================================================
   CENTRAL SPACE INDICATOR
   ========================================================= */

.beat-indicator {

    width: 120px;
    height: 120px;

    margin: auto;

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #15212b 0%,
            #0a1017 58%,
            #070b10 100%
        );

    border: 1px solid #344352;

    box-shadow:
        inset 0 0 30px rgba(0,229,255,.05),
        0 0 25px rgba(0,229,255,.04);
}


/* OUTER RING */

.beat-indicator::before {

    content: "";

    position: absolute;

    inset: 7px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.05);

    box-shadow:
        inset 0 0 15px rgba(0,229,255,.05);
}


/* BEAT DOT */

.beat-dot {

    width: 19px;
    height: 19px;

    margin-bottom: 9px;

    border-radius: 50%;

    background: #25313e;

    border: 2px solid #56677a;

    box-shadow:
        0 0 0 rgba(0,229,255,0);

    transition:
        transform .08s ease,
        background .08s ease,
        box-shadow .08s ease;
}


/* BEAT HIT */

.beat-indicator.hit .beat-dot,
.beat-dot.hit {

    transform: scale(1.45);

    background: #00e5ff;

    border-color: #ffffff;

    box-shadow:
        0 0 10px #00e5ff,
        0 0 28px #00e5ff,
        0 0 55px rgba(0,229,255,.55);
}


/* SPACE TEXT */

.beat-indicator span {

    position: relative;

    z-index: 2;

    color: #b9c4cf;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .18em;
}


/* =========================================================
   BEAT COUNT
   ========================================================= */

.beat-count {

    min-height: 105px;

    padding: 14px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-align: right;

    background: #0b1016;

    border: 1px solid #27313d;

    border-radius: 10px;
}

.beat-count span {

    color: #687789;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .16em;
}

#beatCount {

    display: block;

    margin-top: 5px;

    font-size: 42px;

    line-height: 1;

    font-weight: 950;

    color: #ffffff;

    text-shadow:
        0 0 18px rgba(255,255,255,.06);
}


/* =========================================================
   CONTROLS
   ========================================================= */

.beat-controls {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 8px;

    margin-bottom: 15px;
}

.beat-button {

    height: 40px;

    border: 1px solid #354250;

    border-radius: 8px;

    background:
        linear-gradient(
            180deg,
            #171e27,
            #10151c
        );

    color: #b5c0cb;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .08em;

    cursor: pointer;

    transition:
        .15s ease;
}

.beat-button:hover {

    border-color: #00e5ff;

    color: #ffffff;

    box-shadow:
        0 0 18px rgba(0,229,255,.08);
}

.beat-button.active {

    color: #ffffff;

    border-color: #00e5ff;

    background:
        linear-gradient(
            180deg,
            #102833,
            #0d1921
        );

    box-shadow:
        inset 0 0 18px rgba(0,229,255,.07),
        0 0 16px rgba(0,229,255,.06);
}


/* =========================================================
   SETTINGS
   ========================================================= */

.beat-settings {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 9px;

    margin-bottom: 13px;
}

.beat-settings label {

    display: flex;

    flex-direction: column;

    gap: 7px;

    padding: 10px;

    background: #0b1016;

    border: 1px solid #252f3a;

    border-radius: 8px;

    color: #728296;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: .1em;
}

.beat-settings input[type="range"] {

    width: 100%;

    accent-color: #00e5ff;

    cursor: pointer;
}


/* =========================================================
   PATTERN
   ========================================================= */

.beat-pattern {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 7px;

    margin-bottom: 13px;
}

.pattern-button {

    height: 33px;

    border: 1px solid #303b48;

    border-radius: 7px;

    background: #11171e;

    color: #8291a1;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .09em;

    cursor: pointer;
}

.pattern-button:hover {

    border-color: #58697b;

    color: #ffffff;
}

.pattern-button.active {

    background: #17232d;

    border-color: #00e5ff;

    color: #ffffff;

    box-shadow:
        inset 0 0 14px rgba(0,229,255,.06);
}


/* =========================================================
   HELP
   ========================================================= */

.beat-help {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 12px;

    border-top: 1px solid #222c37;

    color: #718094;

    font-size: 8px;
}

.beat-help > span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 42px;

    height: 24px;

    padding: 0 8px;

    border: 1px solid #3a4857;

    border-radius: 5px;

    background: #111820;

    color: #d6dee7;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: .08em;
}

.beat-help p {

    margin: 0;

    line-height: 1.5;

    color: #788798;
}


/* =========================================================
   EXTRA BEAT ANIMATION
   ========================================================= */

@keyframes shaBeatPulse {

    0% {
        transform: scale(1);
        box-shadow:
            0 0 0 rgba(0,229,255,0);
    }

    35% {
        transform: scale(1.08);
        box-shadow:
            0 0 20px rgba(0,229,255,.20);
    }

    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 rgba(0,229,255,0);
    }

}

.beat-indicator.hit {

    animation:
        shaBeatPulse .18s ease-out;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:900px){

    .beat-main {

        grid-template-columns:
            1fr;

        text-align: center;

    }

    .beat-bpm,
    .beat-count {

        text-align: center;

    }

    .beat-indicator {

        order: -1;

    }

    .beat-settings {

        grid-template-columns:
            repeat(2,1fr);

    }

}


@media(max-width:600px){

    .beat-controller {

        padding: 13px;

    }

    .beat-controller > .section-head {

        align-items: flex-start;

        flex-direction: column;

    }

    .beat-controls {

        grid-template-columns:
            1fr;

    }

    .beat-pattern {

        grid-template-columns:
            repeat(2,1fr);

    }

    .beat-settings {

        grid-template-columns:
            1fr;

    }

    #beatBpm {

        font-size: 26px;

    }

    #beatCount {

        font-size: 34px;

    }

}/* =========================================================
   SHAUTUNA STAGE — TRUE FULLSCREEN
   APPEND ONLY
   ========================================================= */

/* =========================================================
   FULLSCREEN CONTAINER
   ========================================================= */

#stagePanel:fullscreen {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background:
        #020305 !important;

    z-index: 999999 !important;

    overflow: hidden !important;
}


/* =========================================================
   HILANGKAN HEADER STAGE SAAT FULLSCREEN
   ========================================================= */

#stagePanel:fullscreen > .panel-title {
    display: none !important;
}


/* =========================================================
   HILANGKAN READOUT
   STAGE
   LED WALL
   PIXEL PITCH
   PA
   ========================================================= */

#stagePanel:fullscreen > .stage-readouts {
    display: none !important;
}


/* =========================================================
   STAGE WRAP FULLSCREEN
   ========================================================= */

#stagePanel:fullscreen .stage-wrap {

    position: absolute !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    overflow: hidden !important;

    border-radius: 0 !important;

    background:
        radial-gradient(
            circle at 50% 45%,
            #273341 0%,
            #0b0f15 42%,
            #020305 100%
        ) !important;

    perspective: 1400px !important;

}


/* =========================================================
   TRUE FULLSCREEN STAGE SCENE
   ========================================================= */

#stagePanel:fullscreen .stage-scene {

    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    max-width: none !important;
    max-height: none !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;

    transform:
        none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow:
        none !important;

    overflow: hidden !important;

}


/* =========================================================
   SCALE CONTENT TO SCREEN
   ========================================================= */

#stagePanel:fullscreen .screen-frame {

    left: 16vw !important;
    right: 16vw !important;

    top: 11vh !important;

    height: 46vh !important;

    max-height: none !important;

    border-width: 8px !important;

}


/* =========================================================
   STAGE ROOF
   ========================================================= */

#stagePanel:fullscreen .stage-roof {

    left: 10vw !important;
    right: 10vw !important;

    top: 58vh !important;

    height: 12px !important;

}


/* =========================================================
   STAGE DECK
   ========================================================= */

#stagePanel:fullscreen .stage-deck {

    left: 9vw !important;
    right: 9vw !important;

    bottom: 10vh !important;

    height: 16vh !important;

}


/* =========================================================
   STAIRS
   ========================================================= */

#stagePanel:fullscreen .stairs {

    bottom: 8vh !important;

    width: 8vw !important;

    height: 10vh !important;

}


/* =========================================================
   LEFT / RIGHT TRUSS
   ========================================================= */

#stagePanel:fullscreen .top-truss {

    left: 3vw !important;
    right: 3vw !important;

    top: 2vh !important;

    height: 18px !important;

}

#stagePanel:fullscreen .left-truss {

    left: 3vw !important;

    top: 2vh !important;
    bottom: 8vh !important;

    width: 18px !important;

}

#stagePanel:fullscreen .right-truss {

    right: 3vw !important;

    top: 2vh !important;
    bottom: 8vh !important;

    width: 18px !important;

}


/* =========================================================
   FULLSCREEN PA
   ========================================================= */

#stagePanel:fullscreen .line-array-cluster {

    top: 10vh !important;

    width: 6vw !important;

}

#stagePanel:fullscreen .line-array-cluster.left {

    left: 4vw !important;

}

#stagePanel:fullscreen .line-array-cluster.right {

    right: 4vw !important;

}

#stagePanel:fullscreen .line-array-box {

    width: 4.2vw !important;

    height: 3.4vh !important;

}


#stagePanel:fullscreen .sub-stack {

    bottom: 9vh !important;

    width: 6vw !important;

}

#stagePanel:fullscreen .sub-stack.left {

    left: 8vw !important;

}

#stagePanel:fullscreen .sub-stack.right {

    right: 8vw !important;

}


#stagePanel:fullscreen .sub-box {

    height: 4vh !important;

}


#stagePanel:fullscreen .ground-stack {

    bottom: 11vh !important;

    width: 4.5vw !important;

}

#stagePanel:fullscreen .ground-stack.left {

    left: 14vw !important;

}

#stagePanel:fullscreen .ground-stack.right {

    right: 14vw !important;

}


#stagePanel:fullscreen .monitor-wedge {

    height: 3.5vh !important;

}


/* =========================================================
   DELAY SPEAKERS
   ========================================================= */

#stagePanel:fullscreen .delay-cluster {

    top: 30vh !important;

    width: 4vw !important;

}

#stagePanel:fullscreen .delay-cluster.left {

    left: 22vw !important;

}

#stagePanel:fullscreen .delay-cluster.right {

    right: 22vw !important;

}

#stagePanel:fullscreen .delay-box {

    height: 3vh !important;

}


/* =========================================================
   PERFORMERS
   ========================================================= */

#stagePanel:fullscreen .performer {

    bottom: 27vh !important;

    width: 4vw !important;

    height: 10vh !important;

    font-size: 8px !important;

    padding-top: 7vh !important;

}

#stagePanel:fullscreen .performer-1 {

    left: 44vw !important;

}

#stagePanel:fullscreen .performer-2 {

    left: 53vw !important;

}


/* =========================================================
   CROWD
   ========================================================= */

#stagePanel:fullscreen .crowd {

    height: 11vh !important;

}

#stagePanel:fullscreen .crowd span {

    width: 2.3vw !important;

    height: 7vh !important;

    margin-top: 3vh !important;

}


/* =========================================================
   LIGHTING — FULLSCREEN
   ========================================================= */

#stagePanel:fullscreen #stageLighting {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    overflow: hidden !important;

}


#stagePanel:fullscreen .advanced-stage-fx {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    overflow: hidden !important;

}


/* =========================================================
   LIGHT FIXTURES SCALE
   ========================================================= */

#stagePanel:fullscreen .stage-light-fixture {

    transform-origin:
        50% 0 !important;

    scale: 1.15;

}


/* =========================================================
   REAL BEAMS
   ========================================================= */

#stagePanel:fullscreen .advanced-real-beam {

    height: 92vh !important;

}


/* =========================================================
   SCREEN IMAGE / VIDEO
   ========================================================= */

#stagePanel:fullscreen .screen-frame video,
#stagePanel:fullscreen .screen-image {

    width: 100% !important;
    height: 100% !important;

}


/* =========================================================
   SCREEN PLACEHOLDER
   ========================================================= */

#stagePanel:fullscreen .screen-placeholder strong {

    font-size:
        clamp(
            28px,
            4vw,
            58px
        ) !important;

}


#stagePanel:fullscreen .screen-placeholder span {

    font-size:
        clamp(
            9px,
            1vw,
            14px
        ) !important;

}


/* =========================================================
   REMOVE SCREEN SPEC IN FULLSCREEN
   ========================================================= */

#stagePanel:fullscreen .screen-spec {

    display: none !important;

}


/* =========================================================
   FULLSCREEN EXIT HINT
   ========================================================= */

#stagePanel:fullscreen::after {

    content:
        "ESC  •  EXIT FULLSCREEN";

    position: absolute;

    right: 18px;
    bottom: 14px;

    z-index: 9999999;

    padding:
        7px
        10px;

    background:
        rgba(0,0,0,.45);

    border:
        1px solid
        rgba(255,255,255,.14);

    border-radius:
        7px;

    color:
        rgba(255,255,255,.55);

    font-size:
        8px;

    letter-spacing:
        .1em;

    pointer-events:
        none;

    backdrop-filter:
        blur(6px);

}


/* =========================================================
   HIDE EVERYTHING OUTSIDE STAGE
   ========================================================= */

body:has(#stagePanel:fullscreen) {

    overflow: hidden !important;

}

body:has(#stagePanel:fullscreen) > * {

    overflow: hidden;

}


/* =========================================================
   BROWSER FULLSCREEN BACKGROUND
   ========================================================= */

::backdrop {

    background:
        #020305 !important;

}


/* =========================================================
   MOBILE FULLSCREEN
   ========================================================= */

@media(max-width:700px){

    #stagePanel:fullscreen .screen-frame {

        left: 9vw !important;
        right: 9vw !important;

        top: 12vh !important;

        height: 35vh !important;

    }


    #stagePanel:fullscreen .stage-deck {

        left: 4vw !important;
        right: 4vw !important;

        bottom: 9vh !important;

        height: 17vh !important;

    }


    #stagePanel:fullscreen .line-array-cluster {

        transform:
            scale(.8) !important;

    }


    #stagePanel:fullscreen .performer {

        width: 6vw !important;

    }

}