/* DG-UI-002 · Luminous: cold glass, machined metal, and light from the real signal. */
:root { --a: #6ed6ff; --a-dim: #284e68; --b: #bc9fff; --b-dim: #524374; }
body { background: radial-gradient(ellipse at 8% 22%,#142633 0,transparent 42%),radial-gradient(ellipse at 92% 55%,#211a37 0,transparent 43%),#090c12; }
#app { position: relative; }
#topbar { border-bottom-color: #ffffff13; }
.logo-mark { box-shadow: 0 0 26px #9686d12a; }
.logo-text { color: #e7edf6; }.logo-text span { color: #c0b0e9; }.logo-sub { color: #79909f; letter-spacing: 1.7px; }
.workspace-nav { border-color: #788ab52b; background: #0b101ac9; box-shadow: inset 0 1px #ccd4ff06; }
.workspace-tab.active { background: linear-gradient(#394858,#202c3a); color: #d2edff; box-shadow: inset 0 1px #d1edff22,0 0 13px #8ab0f318; }
.top-btn { background: linear-gradient(#28303e,#181e2a); border-color: #56627e69; box-shadow: inset 0 1px #d8dbff0c; }
.automix-btn { border-color: #8d7fac73; color: #d6c4f3; }.automix-btn.on { color: #181329; background: #c3a5ff; }
.session-bar { color: #667e92; }
.studio-light-button { display: flex; align-items: center; gap: 7px; margin-left: auto; padding: 5px 9px; border: 1px solid #7c71a04a; border-radius: 20px; background: #18192966; color: #c5bcdf; font: 7px var(--mono); letter-spacing: 1px; cursor: pointer; }
.studio-light-button i { width: 4px; height: 4px; background: #bca2ff; border-radius: 50%; box-shadow: 0 0 9px #ae8bff; }
.studio-light-button[aria-pressed=false] { background: transparent; color: #758394; border-color: #53627144; }.studio-light-button[aria-pressed=false] i { background: #54606d; box-shadow: none; }
.engine-state { margin-left: 0; }
#console { position: relative; isolation: isolate; }
#studio-light-stage { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; mix-blend-mode: screen; }
#studio-light-stage[hidden] { display: none; }
.deck { border-radius: 9px; border-color: #6678876b; background: repeating-linear-gradient(0deg,#dcecff02 0 1px,transparent 1px 3px),linear-gradient(125deg,#3546574a,transparent 42%),linear-gradient(#1a232d,#10151d 60%,#171d27);
  box-shadow: inset 0 0 0 3px #0a1016,inset 0 5px 9px #c7e6ff08,0 18px 35px #0009,0 0 35px #80c7ff07; }
#deck-A { border-top-color: #81a9c0 !important; }#deck-B { border-top-color: #a095bc !important; box-shadow: inset 0 0 0 3px #0e1018,inset 0 5px 9px #d9cbff08,0 18px 35px #0009,0 0 35px #bba0ff09; }
.rail-number { color: #e3ebf1; text-shadow: 0 0 20px #c0d7ff22; }.rail-name { color: #a9b8c8; }.rail-name span { color: #6d8193; }
.deck-load { color: #d8e4ef; background: linear-gradient(#334354,#1b2938); border-color: #51677c; box-shadow: inset 0 1px #d9eeff17,0 3px 5px #0005; }
.screen-bezel { position: relative; isolation: isolate; background: radial-gradient(ellipse at 45% 0,#10293a80,transparent 65%),#040b13; border-radius: 5px; border-bottom-color: #638ba0;
  box-shadow: inset 0 0 25px #0008,0 0 0 3px #080f17,0 0 0 4px #52728655,0 5px 18px #0007; }
#deck-B .screen-bezel { background: radial-gradient(ellipse at 45% 0,#32214370,transparent 65%),#090913; border-bottom-color: #9179ac; box-shadow: inset 0 0 25px #0008,0 0 0 3px #0c0d17,0 0 0 4px #725f8e55,0 5px 18px #0007; }
.screen-bezel::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; background: linear-gradient(112deg,#e0f4ff06,transparent 26% 65%,#b9b0ff04); border-top: 1px solid #c9e8ff18; }
.screen-canvas { display: block; flex: none; min-width: 0; width: 100%; border-radius: 5px; box-shadow: 0 0 0 3px #080f17,0 0 0 4px #52728655,0 5px 18px #0007; }
.screen-topline { color: #7b96aa; }.track-title { color: #e6f3ff; text-shadow: 0 0 12px #b9d9ff14; }.deck-badge { background: #0a283d; border-color: #4b9ec05e; color: #85dfff; }
#deck-B .deck-badge { background: #241637; border-color: #aa80df55; color: #d8bbff; }
.wave-zoom,.wave-over { background: #030914; }.wave-zoom { filter: drop-shadow(0 0 3px #62cfff38); }#deck-B .wave-zoom { filter: drop-shadow(0 0 3px #be94ff35); }
.time-elapsed { color: #e1f3ff; text-shadow: 0 0 16px #93b5fc38; }.eff-bpm span { text-shadow: 0 0 18px color-mix(in srgb,var(--deck-color) 25%,transparent); }
.hotcue { background: linear-gradient(#2c3847,#161e29); border-top-color: #4d6074; box-shadow: inset 0 -2px #050c13,0 0 0 1px #3f526454,0 3px 4px #0006; color: #b6c5d4; }
.hotcue.set { box-shadow: inset 0 0 8px #ffffff2a,0 0 14px color-mix(in srgb,var(--pad-color) 30%,transparent); }
.jog-housing { box-shadow: 0 12px 25px #0009,0 0 32px #65ceff0c; }
#deck-B .jog-housing { box-shadow: 0 12px 25px #0009,0 0 32px #ae83ff12; }
.jog-housing::after { content: ''; position: absolute; inset: 8%; pointer-events: none; border-radius: 50%; background: conic-gradient(from -36deg,transparent 0deg,#aed8f908 18deg,transparent 39deg 158deg,#d2cbff08 182deg,transparent 200deg); }
.t-btn.play { border-color: #7cbbbd; }.t-btn.play.on { box-shadow: 0 0 0 3px #060e16,0 0 0 4px #4e7f7a,0 0 22px #61e5d944,inset 0 2px 4px #ffffff22; border-color: #96ffeb; }
.t-btn.sync { background: linear-gradient(#2b3b4b,#182431); color: #9ab6cb; }
.loop-btn { background: linear-gradient(#344557,#1b2838); border-top-color: #5b728d; color: #becddd; }
.mixer-faceplate { border-color: #b8c7d7; background: repeating-linear-gradient(0deg,#f2f7ff0d 0 1px,#142e4205 1px 2px,transparent 2px 4px),linear-gradient(115deg,#c5d0db,#9caebc 36%,#bec9d9 63%,#8a9dae);
  box-shadow: inset 0 1px #e9f4ff,inset 0 0 0 3px #17283e22,0 18px 28px #0009,0 0 30px #9aabf513; }
.mixer-brand > span { color: #203c4c; letter-spacing: 1.6px; }.mixer-brand strong { color: #526477; }
.knob { background: radial-gradient(circle at 35% 20%,#718599,#384d61 38%,#0c1a2a 78%); box-shadow: 0 3px 5px #112c4999,0 0 0 2px #c4cfda,0 0 0 3px #566d83,inset 0 1px #c9e4fa; }
.knob .pointer { background: #d3efff; box-shadow: 0 0 3px #c3e8ff66; }
.knob.accent { box-shadow: 0 3px 5px #112c4977,0 0 0 2px #c4cfda,0 0 0 3px #738aab,inset 0 1px #cee5ff; }
.knob-value { border-color: #98bbde; background: #091622; box-shadow: 0 2px 8px #0008,0 0 15px #76caff2b; }
.mixer-lcd { background: linear-gradient(#10262d,#0b1a26); color: #9fd5e5; border-color: #456176; box-shadow: inset 0 1px 8px #0008; }.mixer-lcd small,.mixer-lcd > span { color: #6d9da9; }
.fx-panel { background: repeating-linear-gradient(0deg,#bcd7f90a 0 1px,transparent 1px 3px),linear-gradient(125deg,#7b8ca2,#384e65 45%,#657791); border-color: #8fa9c4; }
.monitor-pedal { background: repeating-linear-gradient(0deg,#dbcfff0c 0 1px,transparent 1px 3px),linear-gradient(125deg,#8a7da9,#4e496e 50%,#76688f); border-color: #b0a1c2; }
.fx-pedal .knob-label { color: #d2e2ed; text-shadow: 0 1px #0c182d; }.fx-pedal .knob { box-shadow: 0 3px 5px #0006,0 0 0 2px #8b9bae,0 0 0 3px #34475d,inset 0 1px #ccddf0; }
.pedal-lcd { color: #8cf3da; background: linear-gradient(#062323,#041519); border-color: #142b37; border-bottom-color: #b5c4d3; box-shadow: inset 0 1px 6px #000a,0 0 10px #77ffe30c; }.monitor-pedal .pedal-lcd { color: #d9b6ff; background: linear-gradient(#221630,#120b22); }.monitor-pedal .pedal-lcd > span { color: #9683ae; }.monitor-pedal .pedal-lcd small { color: #a28db9; }
.pedal-brand { color: #e0d1f2; text-shadow: 0 1px #211334; }.pedal-brand span { color: #b7a4d0; }
#cue-device,.cue-mon-btn { background: #302c48; color: #d4c8e7; border-color: #716488; }.cue-mon-btn.on { background: #c4aee5; color: #20142e; border-color: #dfc7fa; }
.fx-on-btn.on { box-shadow: 0 0 13px #a8ffca77,inset 0 1px #e7ffe4; }
#session-shelf { background: linear-gradient(110deg,#1b2b3c,#181b2b 55%,#272137); border-color: #7081a247; box-shadow: inset 0 1px #a7bce50c,0 10px 25px #0003; border-radius: 6px; }
.demo-set-btn { background: linear-gradient(120deg,#c0d7ee,#c9b5ec); border-color: #e5d9f7; color: #25233a; box-shadow: inset 0 1px #ffffff6e,0 2px 8px #0004,0 0 18px #b29bed18; }
.renderer-state { flex: none; font: 6px var(--mono); letter-spacing: .8px; color: #9aa8bf; padding: 3px 7px; border: 1px solid #778db035; border-radius: 3px; margin-left: auto; }.shortcut-help { margin-left: 8px; }
body[data-studio=off] .wave-zoom { filter: none; }body[data-studio=off] .jog-housing { box-shadow: 0 9px 16px #0007; }
@media (max-width: 700px) { .studio-light-button { font-size: 5px; padding: 4px 6px; letter-spacing: .5px; gap: 4px; }.session-bar { gap: 8px; }.session-tag { display: none; }.renderer-state { font-size: 5px; }.logo-sub { font-size: 5px; } }
@media (prefers-reduced-motion: reduce) { .wave-zoom { filter: none; } }

.wave-optics { position: relative; width: 100%; }
.wave-optics .wave-zoom { display: block; }
.wave-optics-output { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wave-gpu-source { opacity: 0; }