/* Precision mixer surface */
.cn-decks { grid-template-columns: minmax(300px, 1fr) 360px minmax(300px, 1fr); }
.cn-mixer {
  position: relative;
  grid-template-rows: 36px minmax(0, 1fr) 88px 72px;
  border-color: #394344;
  background-color: #0c1011;
  background-blend-mode: multiply;
  box-shadow: inset 0 1px rgba(255,255,255,.04), inset 0 0 28px rgba(0,0,0,.3), 0 10px 24px rgba(0,0,0,.24);
}
.cn-mixer-head { display: grid; grid-template-columns: auto 1fr 28px; gap: 6px; padding: 0 6px 0 9px; }
.cn-mixer-head > strong { color: #f5f7f6; font-size: 12px; text-transform: uppercase; }
.cn-midi-state { display: inline-flex; min-width: 0; align-items: center; justify-content: center; gap: 4px; color: #73807e; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.cn-midi-state svg { width: 12px; height: 12px; }
.cn-midi-state.is-connected { color: var(--cn-green); }
.cn-mixer-tool { display: grid; width: 26px; height: 26px; padding: 0; place-items: center; border: 1px solid #3b4646; border-radius: 3px; color: #aeb8b6; background: #111718; }
.cn-mixer-tool:hover { border-color: #62716f; color: #fff; }
.cn-mixer-tool svg { width: 13px; height: 13px; }

.cn-mixer-body { grid-template-columns: minmax(0,1fr) 58px minmax(0,1fr); gap: 8px; padding: 8px 7px 6px; }
.cn-channel { grid-template-rows: 22px 52px 46px minmax(70px,1fr) 32px; align-content: stretch; gap: 5px; padding: 0 5px; border-right: 1px solid rgba(255,255,255,.045); border-left: 1px solid rgba(0,0,0,.5); }
.cn-channel-name { width: 100%; height: 22px; border-radius: 2px; color: #07100f; font-size: 10px; box-shadow: inset 0 1px rgba(255,255,255,.25); }
.cn-trim-filter { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.cn-eq-bank { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; gap: 4px; padding-top: 4px; border-top: 1px solid #293132; }
.cn-channel-output { display: grid; min-height: 62px; grid-template-columns: minmax(30px,1fr) 18px; align-items: stretch; justify-content: center; gap: 3px; }
.cn-cue-button { display: flex; min-width: 0; min-height: 27px; align-items: center; justify-content: center; gap: 4px; padding: 0 5px; border-color: #394544; color: #778380; background: #101617; font-size: 9px; }
.cn-cue-button svg { width: 12px; height: 12px; }
.cn-cue-button.is-active { border-color: var(--channel); color: #07100f; background: var(--channel); box-shadow: 0 0 10px color-mix(in srgb,var(--channel) 24%,transparent); }

.cn-precision-wrap { position: relative; display: grid; min-width: 0; align-content: start; justify-items: center; gap: 2px; color: #a3aeac; font-size: 9px; font-weight: 750; text-transform: uppercase; }
.cn-precision-control { --control-unit: .5; position: relative; display: block; flex: 0 0 auto; outline: 0; touch-action: none; user-select: none; }
.cn-precision-control[aria-disabled="true"] { cursor: not-allowed; opacity: .52; }
.cn-precision-control:not([aria-disabled="true"]) { cursor: ns-resize; }
.cn-precision-control:focus-visible { outline: 2px solid #eaf4f2; outline-offset: 2px; }
.cn-precision-knob { width: 32px; height: 32px; border: 1px solid #52605e; border-radius: 50%; background: conic-gradient(from 225deg, var(--channel,#8fa09d) 0 calc(var(--control-unit) * 270deg), #252d2e 0 270deg, transparent 0); box-shadow: inset 0 0 0 5px #121718, inset 0 0 0 6px #313a3a, 0 3px 7px rgba(0,0,0,.55); }
.cn-precision-knob::before { position: absolute; inset: 7px; border: 1px solid #465150; border-radius: 50%; background: #171d1e; box-shadow: inset 0 2px 4px rgba(255,255,255,.035), inset 0 -3px 5px rgba(0,0,0,.55); content: ""; }
.cn-knob-pointer { position: absolute; z-index: 2; top: 5px; left: 50%; width: 2px; height: 9px; transform: translateX(-50%) rotate(calc(-135deg + var(--control-unit) * 270deg)); transform-origin: 50% 11px; border-radius: 2px; background: #f5f8f7; box-shadow: 0 0 3px rgba(255,255,255,.5); }
.cn-precision-wrap.is-compact .cn-precision-knob { width: 25px; height: 25px; box-shadow: inset 0 0 0 4px #121718, inset 0 0 0 5px #313a3a, 0 2px 5px rgba(0,0,0,.5); }
.cn-precision-wrap.is-compact .cn-precision-knob::before { inset: 6px; }
.cn-precision-wrap.is-compact .cn-knob-pointer { top: 4px; height: 7px; transform-origin: 50% 8.5px; }
.cn-precision-wrap.is-micro { font-size: 8px; }
.cn-precision-wrap.is-micro .cn-precision-knob { width: 22px; height: 22px; box-shadow: inset 0 0 0 3px #121718, inset 0 0 0 4px #313a3a, 0 2px 4px rgba(0,0,0,.5); }
.cn-precision-wrap.is-micro .cn-precision-knob::before { inset: 5px; }
.cn-precision-wrap.is-micro .cn-knob-pointer { top: 3px; height: 6px; transform-origin: 50% 8px; }

.cn-precision-fader { width: 30px; height: 100%; min-height: 58px; margin: 0 auto; }
.cn-fader-slot { position: absolute; top: 4px; bottom: 4px; left: 50%; width: 5px; transform: translateX(-50%); border: 1px solid #35403f; border-radius: 3px; background: #050708; box-shadow: inset 0 0 5px #000; }
.cn-fader-slot::before { position: absolute; top: 50%; left: -5px; width: 13px; height: 1px; background: #65716f; content: ""; }
.cn-fader-cap { position: absolute; z-index: 2; top: calc(94% - var(--control-unit) * 88%); left: 50%; width: 27px; height: 12px; transform: translate(-50%,-50%); border: 1px solid #788482; border-radius: 2px; background: #89928f; box-shadow: inset 0 2px rgba(255,255,255,.16), inset 0 -3px #555f5d, 0 3px 6px rgba(0,0,0,.6); }
.cn-fader-cap::after { position: absolute; top: 4px; right: 3px; left: 3px; height: 1px; background: #293130; content: ""; }
.cn-precision-fader.is-horizontal { width: 100%; height: 27px; min-height: 27px; cursor: ew-resize; }
.cn-precision-fader.is-horizontal .cn-fader-slot { top: 50%; right: 4px; bottom: auto; left: 4px; width: auto; height: 5px; transform: translateY(-50%); }
.cn-precision-fader.is-horizontal .cn-fader-slot::before { top: -5px; left: 50%; width: 1px; height: 13px; }
.cn-precision-fader.is-horizontal .cn-fader-cap { top: 50%; left: calc(6% + var(--control-unit) * 88%); width: 30px; height: 19px; }

.cn-precision-control output { position: absolute; z-index: 8; top: -29px; left: 50%; width: max-content; max-width: 112px; transform: translateX(-50%); padding: 4px 6px; border: 1px solid #687674; border-radius: 3px; color: #f7faf9; background: #080c0d; box-shadow: 0 5px 12px rgba(0,0,0,.55); font-size: 9px; font-weight: 800; opacity: 0; pointer-events: none; text-transform: none; }
.cn-precision-control:focus output, .cn-precision-control.is-adjusting output, .cn-precision-control.is-soft-waiting output { opacity: 1; }
.cn-precision-control small[data-cn-midi-status] { position: absolute; z-index: 4; right: -3px; bottom: -3px; display: none; min-width: 7px; height: 7px; overflow: hidden; border: 1px solid #0b0e0f; border-radius: 50%; color: transparent; background: var(--cn-green); font-size: 7px; white-space: nowrap; }
.cn-precision-control.is-midi-mapped small[data-cn-midi-status] { display: block; }
.cn-precision-control.is-midi-active { filter: drop-shadow(0 0 5px var(--cn-green)); }
.cn-precision-control.is-soft-waiting small[data-cn-midi-status] { right: 50%; bottom: -15px; display: block; width: max-content; height: auto; transform: translateX(50%); padding: 2px 4px; border-radius: 2px; color: #181006; background: var(--cn-warning); }
.cn-precision-control.is-soft-waiting { filter: drop-shadow(0 0 5px rgba(228,167,79,.7)); }

.cn-stereo-meter { --meter-left: 0; --meter-right: 0; display: grid; min-height: 60px; grid-template-columns: repeat(2,5px); align-items: stretch; gap: 2px; padding: 3px; border: 1px solid #293132; border-radius: 2px; background: #050708; box-shadow: inset 0 0 6px #000; }
.cn-stereo-meter > i { position: relative; overflow: hidden; border-radius: 1px; background: repeating-linear-gradient(to top,#202728 0 3px,#080b0c 3px 5px); }
.cn-stereo-meter > i > b { position: absolute; right: 0; bottom: 0; left: 0; height: calc(var(--meter-left) * 100%); background: linear-gradient(to top,#62bd83 0 70%,#e2b24b 70% 89%,#df6861 89%); }
.cn-stereo-meter > i:nth-child(2) > b { height: calc(var(--meter-right) * 100%); }
.cn-stereo-meter > i > em { position: absolute; z-index: 2; right: 0; bottom: calc(var(--meter-hold-left,0) * 100%); left: 0; height: 1px; background: #f2f5f4; box-shadow: 0 0 3px rgba(255,255,255,.8); }
.cn-stereo-meter > i:nth-child(2) > em { bottom: calc(var(--meter-hold-right,0) * 100%); }
.cn-stereo-meter.is-hot { border-color: #74413e; box-shadow: inset 0 0 6px #000,0 0 6px rgba(225,109,102,.35); }
.cn-master-strip { display: grid; min-width: 0; grid-template-rows: 22px minmax(76px,1fr) 44px 44px 28px; justify-items: center; gap: 5px; }
.cn-master-label { display: grid; width: 100%; height: 18px; place-items: center; border-radius: 2px; color: #dce4e2; background: #293231; font-size: 8px; font-weight: 850; }
.cn-master-strip .cn-stereo-meter { width: 20px; min-height: 70px; }
.cn-limiter-button { display: grid; width: 38px; height: 25px; padding: 0; place-items: center; border: 1px solid #3b4645; border-radius: 3px; color: #75817f; background: #101617; }
.cn-limiter-button span { display: none; }
.cn-limiter-button svg { width: 12px; height: 12px; }
.cn-limiter-button.is-active { border-color: #4e7960; color: #b6e7c4; background: #17251c; }

.cn-fx-rack { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; padding: 5px; border-top: 1px solid #303839; background: #0a0e0f; }
.cn-fx-channel { display: grid; min-width: 0; grid-template-columns: 20px minmax(0,1fr); grid-template-rows: 23px 50px; align-items: center; gap: 2px 3px; padding: 3px; border: 1px solid #293132; border-radius: 3px; background: #121718; }
.cn-fx-channel > strong { grid-row: 1 / 3; color: var(--channel); font-size: 8px; writing-mode: vertical-rl; transform: rotate(180deg); }
.cn-fx-selectors { display: grid; min-width: 0; grid-template-columns: repeat(5,minmax(0,1fr)); overflow: hidden; border: 1px solid #303a39; border-radius: 2px; }
.cn-fx-selectors button { min-width: 0; height: 21px; padding: 0 1px; border: 0; border-right: 1px solid #303a39; color: #77827f; background: #0b1011; font-size: 6px; font-weight: 850; }
.cn-fx-selectors button:last-child { border-right: 0; }
.cn-fx-selectors button.is-active { color: #07100f; background: var(--channel); }
.cn-fx-parameters { display: grid; min-width: 0; grid-template-columns: 28px repeat(4,minmax(0,1fr)); align-items: center; gap: 2px; }
.cn-fx-parameters > button { display: grid; min-width: 0; height: 25px; padding: 0; place-items: center; overflow: hidden; border: 1px solid #35403f; border-radius: 2px; color: #8d9896; background: #0b1011; font-size: 6px; font-weight: 850; }
.cn-fx-parameters > button.is-active { border-color: color-mix(in srgb,var(--channel) 60%,#35403f); color: var(--channel); background: #15201f; }
.cn-fx-parameters > button svg { width: 11px; height: 11px; }

.cn-crossfader { position: relative; grid-template-columns: minmax(0,1fr) 60px; grid-template-rows: 13px 27px; gap: 2px 5px; padding: 6px 8px; }
.cn-cross-label { grid-column: 1; }
.cn-crossfader > .cn-precision-fader { grid-column: 1; grid-row: 2; }
.cn-curve-control { display: grid; grid-column: 2; grid-row: 1 / 3; grid-template-columns: repeat(3,1fr); align-self: center; overflow: hidden; border: 1px solid #35403f; border-radius: 3px; }
.cn-curve-control button { min-width: 0; height: 28px; padding: 0; border: 0; border-right: 1px solid #35403f; color: #75817f; background: #0c1112; font-size: 7px; font-weight: 800; }
.cn-curve-control button:last-child { border-right: 0; }
.cn-curve-control button.is-active { color: #08100f; background: #a8b2af; }

.cn-io-panel { position: fixed; z-index: 12000; top: 72px; left: 50%; display: grid; width: min(520px,calc(100vw - 40px)); max-height: calc(100vh - 92px); overflow: auto; transform: translateX(-50%); gap: 12px; padding: 16px; border: 1px solid #586664; border-radius: 6px; color: var(--cn-text); background: #111617; box-shadow: 0 22px 60px rgba(0,0,0,.72); }
.cn-io-panel[hidden], .cn-device-field [hidden] { display: none; }
.cn-io-panel > header { display: flex; align-items: center; justify-content: space-between; }
.cn-io-panel > header span, .cn-io-panel > header strong { display: block; }
.cn-io-panel > header span { color: var(--cn-a); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.cn-io-panel > header strong { margin-top: 3px; font-size: 17px; }
.cn-io-panel > header button { display: grid; width: 32px; height: 32px; padding: 0; place-items: center; border: 1px solid #3c4746; border-radius: 3px; color: #b7c1bf; background: #171d1e; }
.cn-device-field { position: relative; display: grid; gap: 5px; }
.cn-device-field > span, .cn-buffer-field > span { color: #8f9b99; font-size: 10px; font-weight: 750; text-transform: uppercase; }
.cn-device-field > button { display: flex; min-width: 0; height: 40px; align-items: center; justify-content: space-between; gap: 10px; padding: 0 11px; border: 1px solid #3b4746; border-radius: 4px; color: #e7eceb; background: #0b0f10; }
.cn-device-field > button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-device-field > button svg { width: 14px; height: 14px; }
.cn-device-field [role="listbox"] { position: absolute; z-index: 2; top: 62px; right: 0; left: 0; max-height: 220px; overflow: auto; padding: 5px; border: 1px solid #4b5856; border-radius: 4px; background: #0a0e0f; box-shadow: 0 14px 28px rgba(0,0,0,.65); }
.cn-device-field [role="option"] { display: grid; width: 100%; min-height: 38px; justify-items: start; padding: 6px 8px; border: 0; border-bottom: 1px solid #252d2d; color: #cbd3d1; background: transparent; text-align: left; }
.cn-device-field [role="option"] small { margin-top: 3px; color: #77827f; font-size: 9px; }
.cn-device-field [role="option"].is-selected { color: #eafffb; background: #17302c; }
.cn-buffer-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cn-buffer-field > div { display: grid; grid-template-columns: repeat(3,1fr); overflow: hidden; border: 1px solid #3c4746; border-radius: 3px; }
.cn-buffer-field button { width: 62px; height: 32px; padding: 0; border: 0; border-right: 1px solid #3c4746; color: #8e9997; background: #0b0f10; font-size: 10px; }
.cn-buffer-field button:last-child { border-right: 0; }
.cn-buffer-field button.is-active { color: #07100f; background: var(--cn-a); font-weight: 850; }
.cn-mode-field > div { grid-template-columns: repeat(2,1fr); }
.cn-mode-field button { width: 96px; }
.cn-dsp-field > div { grid-template-columns: repeat(4,1fr); }
.cn-dsp-field button { width: auto; min-width: 58px; }
.cn-io-panel p { min-height: 18px; margin: 0; color: #98a5a2; font-size: 11px; line-height: 1.45; }
.cn-io-apply { display: flex; min-height: 38px; align-items: center; justify-content: center; gap: 7px; border: 1px solid #5f948a; border-radius: 4px; color: #e9fffb; background: #183631; font-weight: 800; }

@media (max-width:1599px) {
  .cn-decks { grid-template-columns: minmax(270px,1fr) 360px minmax(270px,1fr); }
}

@media (max-height:760px) {
  .cn-mixer { grid-template-rows: 32px minmax(0,1fr) 62px; }
  .cn-mixer-body { gap: 3px; padding: 4px 3px 2px; }
  .cn-channel { grid-template-rows: 17px 39px 34px minmax(52px,1fr) 24px; gap: 2px; padding: 0 2px; }
  .cn-channel-name { height: 17px; }
  .cn-precision-knob { width: 28px; height: 28px; }
  .cn-precision-wrap.is-compact .cn-precision-knob { width: 23px; height: 23px; }
  .cn-precision-wrap.is-micro .cn-precision-knob { width: 19px; height: 19px; }
  .cn-channel-output { min-height: 52px; }
  .cn-master-strip { grid-template-rows: 16px minmax(56px,1fr) 34px 23px; gap: 2px; }
  .cn-master-strip .cn-stereo-meter { min-height: 56px; }
  .cn-fx-rack { padding: 3px; }
  .cn-fx-channel { grid-template-rows: 19px 43px; }
  .cn-fx-selectors button { height: 18px; }
  .cn-fx-parameters > button { height: 22px; }
  .cn-crossfader { padding-top: 4px; padding-bottom: 4px; }
}

/* Four-deck production controls */
.cn-mixer { grid-template-rows: 36px 34px minmax(0,1fr) 72px; }
.cn-mixer-head { grid-template-columns: auto minmax(0,1fr) 28px 28px; }
.cn-production-tools { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 3px; padding: 1px 5px; overflow: hidden; border-bottom: 1px solid #2c3535; background: #0a0e0f; }
.cn-production-tools button { display: flex; min-width: 0; height: 26px; align-items: center; justify-content: center; gap: 4px; padding: 0 3px; overflow: hidden; border: 1px solid #35403f; border-radius: 3px; color: #879391; background: #111718; font-size: 8px; font-weight: 850; text-transform: uppercase; }
.cn-production-tools button span { display: none; }
.cn-production-tools button svg { width: 13px; height: 13px; flex: 0 0 auto; }
.cn-production-tools button.is-active { border-color: #62b7ac; color: #dffff9; background: #17302c; box-shadow: inset 0 0 0 1px rgba(98,183,172,.18); }
.cn-production-tools [data-cn-record].is-active { border-color: #da736a; color: #ffd9d5; background: #351a18; }
.cn-channel-layer { display: grid; min-width: 0; min-height: 0; }
.cn-channel-layer > .cn-channel { grid-area: 1 / 1; }
.cn-channel-layer > .cn-channel[hidden], .cn-fx-channel[hidden] { display: none; }
.cn-master-strip { grid-template-rows: 18px minmax(44px,1fr) 32px 32px 26px; gap: 2px; }
.cn-master-strip .cn-stereo-meter { min-height: 44px; }

.cn-sampler-panel, .cn-stems-panel { position: fixed; z-index: 11950; top: 72px; left: 50%; width: min(560px,calc(100vw - 32px)); transform: translateX(-50%); padding: 12px; border: 1px solid #53615f; border-radius: 6px; color: var(--cn-text); background: #101516; box-shadow: 0 22px 60px rgba(0,0,0,.72); }
.cn-sampler-panel[hidden], .cn-stems-panel[hidden] { display: none; }
.cn-sampler-panel > header, .cn-stems-panel > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cn-sampler-panel > header button, .cn-stems-panel > header button { display: grid; width: 32px; height: 32px; padding: 0; place-items: center; border: 1px solid #3c4746; border-radius: 3px; color: #bdc7c5; background: #171d1e; }
.cn-sampler-panel > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
.cn-sampler-panel > div > button { display: grid; min-width: 0; min-height: 76px; grid-template-rows: auto minmax(0,1fr); gap: 5px; padding: 9px; border: 1px solid #35403f; border-radius: 4px; color: #85908e; background: #0a0f10; text-align: left; }
.cn-sampler-panel > div > button b { color: #b7c2c0; font-size: 11px; }
.cn-sampler-panel > div > button span { overflow: hidden; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.cn-sampler-panel > div > button.is-loaded { border-color: #4f7f78; color: #dffff9; background: #152421; }
.cn-sampler-panel > div > button.is-playing { border-color: #80d8cd; box-shadow: inset 0 0 0 1px #80d8cd,0 0 12px rgba(89,201,190,.22); }
.cn-sampler-panel > small { display: block; margin-top: 9px; color: #8f9b99; font-size: 11px; }
.cn-stems-panel > header span, .cn-stems-panel > header strong { display: block; }
.cn-stems-panel > header span { color: #78cfc4; font-size: 10px; font-weight: 850; text-transform: uppercase; }
.cn-stems-panel > header strong { margin-top: 2px; font-size: 17px; }
.cn-stems-wait, .cn-stems-error, .cn-stems-ready { display: grid; gap: 8px; padding: 16px; border: 1px solid #303a39; border-radius: 4px; background: #0a0f10; }
.cn-stems-wait > svg { width: 24px; height: 24px; color: #78cfc4; animation: cn-spin 1s linear infinite; }
.cn-stems-error > svg { color: #dc756d; }
.cn-stems-wait span, .cn-stems-error span, .cn-stems-error small, .cn-stems-ready small { color: #94a09e; font-size: 11px; line-height: 1.45; }
.cn-stems-wait progress { width: 100%; height: 8px; accent-color: #78cfc4; }
.cn-stems-ready > span { display: grid; grid-template-columns: 22px 1fr; gap: 2px 8px; align-items: center; }
.cn-stems-ready > span svg { grid-row: 1 / 3; color: #79d09b; }
.cn-stems-ready > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
.cn-stems-ready > div button { display: flex; min-height: 38px; align-items: center; justify-content: center; gap: 5px; border: 1px solid #46635e; border-radius: 3px; color: #ddf5f1; background: #152320; font-size: 11px; font-weight: 800; }
.cn-stems-ready > div svg { width: 13px; height: 13px; }
.cn-io-toggle { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 3px 8px; align-items: center; padding: 10px; border: 1px solid #35403f; border-radius: 4px; background: #0b1011; }
.cn-io-toggle input { width: 17px; height: 17px; grid-row: 1 / 3; accent-color: #59c9be; }
.cn-io-toggle span { color: #e3e9e7; font-size: 12px; font-weight: 800; }
.cn-io-toggle small { color: #8c9896; font-size: 10px; line-height: 1.35; }
@keyframes cn-spin { to { transform: rotate(360deg); } }

@media (max-height:760px) {
  .cn-mixer { grid-template-rows: 32px 30px minmax(0,1fr) 62px; }
  .cn-production-tools { padding-block: 2px; }
  .cn-production-tools button { height: 25px; }
  .cn-master-strip { grid-template-rows: 16px minmax(46px,1fr) 30px 30px 23px; }
}