/* Deck analysis and transport surface */
.cn-deck { grid-template-rows: 68px 48px minmax(138px, 1fr) 212px; }
.cn-deck-metrics { grid-template-columns: minmax(132px, 1fr) 70px 62px 70px; }
.cn-time-block { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: start; gap: 8px; min-width: 0; }
.cn-time-block small { color: var(--cn-muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cn-deck-status button {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--deck) 42%, transparent);
  border-radius: 4px;
  color: var(--deck);
  background: var(--deck-soft);
  font-size: 11px;
  font-weight: 760;
}
.cn-deck-status button.is-protected { box-shadow: inset 0 0 0 1px var(--deck), 0 0 12px color-mix(in srgb, var(--deck) 18%, transparent); }
.cn-deck-status button:disabled { opacity: .68; }

.cn-waveform { min-height: 138px; background-image: none; touch-action: none; }
.cn-waveform > canvas { position: absolute; inset: 0 0 43px; height: calc(100% - 43px); }
.cn-wave-overview { right: 8px; bottom: 6px; left: 8px; height: 34px; }
.cn-wave-overview canvas { opacity: 1; touch-action: none; }
.cn-wave-tools { position: absolute; z-index: 4; top: 7px; right: 7px; display: flex; gap: 4px; }
.cn-wave-tools button {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid #3c4748;
  border-radius: 3px;
  color: #bdc8c6;
  background: rgba(10, 14, 15, .9);
}
.cn-wave-tools button:hover { border-color: var(--deck); color: #fff; }
.cn-wave-tools svg { width: 14px; height: 14px; }
.cn-wave-tools button.is-active { border-color: var(--deck); color: var(--deck); background: #14201f; }
.cn-grid-editor {
  position: absolute;
  z-index: 7;
  top: 41px;
  right: 7px;
  width: min(390px, calc(100% - 14px));
  padding: 9px;
  border: 1px solid #4a5656;
  border-radius: 4px;
  color: #e5ebea;
  background: rgba(12, 17, 18, .97);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .48);
}
.cn-grid-editor[hidden] { display: none; }
.cn-grid-editor > div:first-child { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cn-grid-editor > div:first-child button { display: grid; width: 24px; height: 24px; padding: 0; place-items: center; border: 0; color: #aeb9b7; background: transparent; }
.cn-grid-editor label { display: grid; grid-template-columns: 1fr 92px; align-items: center; gap: 8px; color: #aab5b3; font-size: 10px; font-weight: 720; }
.cn-grid-editor input { width: 100%; height: 28px; padding: 0 7px; border: 1px solid #455152; border-radius: 3px; color: #fff; background: #070a0b; font: 700 11px/1 Inter, sans-serif; }
.cn-grid-actions { display: grid; grid-template-columns: 54px 1fr 1fr 1.2fr 54px; gap: 4px; margin-top: 8px; }
.cn-grid-actions button { display: inline-flex; min-width: 0; height: 29px; align-items: center; justify-content: center; gap: 2px; padding: 0 5px; border: 1px solid #3b4647; border-radius: 3px; color: #c4cecc; background: #171d1e; font-size: 9px; font-weight: 760; }
.cn-grid-actions button:hover { border-color: var(--deck); color: #fff; }
.cn-grid-actions svg { width: 11px; height: 11px; }

.cn-deck-controls { grid-template-columns: 108px minmax(0, 1fr) 46px; gap: 9px; padding: 9px; }
.cn-platter {
  --rotation: 0deg;
  width: 104px;
  height: 104px;
  padding: 0;
  border: 1px solid #4b5757;
  cursor: grab;
  touch-action: none;
}
.cn-platter:active, .cn-platter.is-touching { cursor: grabbing; border-color: var(--deck); }
.cn-platter::before { top: 8px; z-index: 2; height: 12px; }
.cn-platter-disc {
  position: relative;
  display: grid;
  width: 78px;
  height: 78px;
  transform: rotate(var(--rotation));
  place-items: center;
  overflow: hidden;
  border: 5px solid #090d0e;
  border-radius: 50%;
  background: #101516;
  box-shadow: 0 0 0 1px #465151, inset 0 0 0 1px rgba(255, 255, 255, .12);
  will-change: transform;
}
.cn-platter-disc img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cn-platter-disc i { position: absolute; width: 9px; height: 9px; border: 2px solid rgba(255, 255, 255, .78); border-radius: 50%; background: #0a0d0e; }

.cn-center-controls { gap: 7px; }
.cn-transport { grid-template-columns: repeat(3, minmax(38px, 1fr)); }
.cn-hotcues { grid-template-columns: repeat(4, minmax(28px, 1fr)); gap: 4px; }
.cn-hotcue { min-height: 32px; }
.cn-loop-row { grid-template-columns: auto repeat(5, 28px); gap: 4px; }
.cn-loop-button { width: 28px; height: 28px; }

.cn-fader-vertical {
  width: 30px;
  height: 126px;
  min-height: 100px;
  margin: 0;
  padding: 0;
  appearance: slider-vertical;
  writing-mode: vertical-lr;
  direction: rtl;
  accent-color: var(--deck);
  background: transparent;
}
.cn-fader-vertical::before, .cn-fader-vertical::after { content: none; }
.cn-fader-vertical::-webkit-slider-runnable-track { width: 5px; border: 1px solid #3a4444; border-radius: 4px; background: #070a0b; }
.cn-fader-vertical::-webkit-slider-thumb { width: 28px; height: 12px; margin-left: -12px; appearance: none; border: 1px solid #71807e; border-radius: 2px; background: #a7afae; box-shadow: 0 3px 7px rgba(0, 0, 0, .5); }

.cn-system-strip.is-offline .cn-dot, .cn-system-strip.is-unpaired .cn-dot { background: var(--cn-warning); box-shadow: 0 0 0 3px rgba(228, 167, 79, .13); }
.cn-system-strip.is-checking .cn-dot { background: var(--cn-muted); box-shadow: none; }
.cn-system-strip.is-online .cn-dot { background: var(--cn-green); }
.cn-deck-controls button:disabled, .cn-deck-controls input:disabled, .cn-library button:disabled { cursor: not-allowed; opacity: .48; }

@media (max-width: 1599px) {
  .cn-deck { grid-template-rows: 64px 44px minmax(132px, 1fr) 202px; }
  .cn-deck-metrics { grid-template-columns: minmax(118px, 1fr) 58px 48px 62px; }
  .cn-deck-controls { grid-template-columns: 92px minmax(0, 1fr) 40px; gap: 6px; padding: 7px; }
  .cn-platter { width: 88px; height: 88px; }
  .cn-platter-disc { width: 66px; height: 66px; }
  .cn-fader-vertical { width: 28px; height: 116px; }
  .cn-loop-row { grid-template-columns: auto repeat(5, 26px); gap: 3px; }
  .cn-loop-button { width: 26px; }
  .cn-time-block { gap: 5px; }
}

@media (max-height: 950px) {
  .cn-performance { grid-template-rows: minmax(470px, 64%) 12px minmax(220px, 36%); }
  .cn-deck { grid-template-rows: 62px 42px minmax(126px, 1fr) 194px; }
  .cn-deck-controls { padding-top: 6px; padding-bottom: 6px; }
  .cn-hotcue { min-height: 29px; }
  .cn-control-button { min-height: 36px; }
  .cn-control-button.is-play { min-height: 39px; }
  .cn-fader-vertical { height: 108px; }
}

@media (max-height: 820px) {
  .cn-performance { grid-template-rows: minmax(388px, 62%) 12px minmax(0, 38%); }
  .cn-decks { gap: 5px; padding: 5px; }
  .cn-deck { grid-template-rows: 56px 38px minmax(98px, 1fr) 180px; }
  .cn-deck-head { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 7px; padding: 4px 7px; }
  .cn-artwork { width: 40px; height: 40px; }
  .cn-deck-metrics { padding-right: 6px; padding-left: 6px; }
  .cn-time { font-size: 19px; }
  .cn-waveform { min-height: 98px; }
  .cn-deck-controls { grid-template-columns: 82px minmax(0, 1fr) 34px; gap: 5px; padding: 5px; }
  .cn-platter { width: 78px; height: 78px; }
  .cn-platter-disc { width: 58px; height: 58px; }
  .cn-center-controls { gap: 4px; }
  .cn-control-button { min-height: 31px; }
  .cn-control-button.is-play { min-height: 34px; }
  .cn-hotcue { min-height: 26px; }
  .cn-loop-row { grid-template-columns: auto repeat(5, 24px); gap: 3px; }
  .cn-loop-button { width: 24px; height: 24px; }
  .cn-fader-vertical { width: 24px; height: 96px; }
  .cn-mixer { grid-template-rows: 36px minmax(0, 1fr) 66px; }
  .cn-mixer-body { padding-top: 5px; padding-bottom: 3px; }
  .cn-meter { min-height: 132px; }
  .cn-library { margin: 0 5px 5px; grid-template-rows: 42px minmax(0, 1fr); }
  .cn-library-row, .cn-queue-row { min-height: 36px; }
}
.cn-deck-stack { display: grid; min-width: 0; min-height: 0; }
.cn-deck-stack > .cn-deck { grid-area: 1 / 1; }
.cn-deck-stack > .cn-deck[hidden] { display: none; }
.cn-deck-c { --deck: #70a6d8; --deck-soft: rgba(112,166,216,.13); }
.cn-deck-d { --deck: #d486b5; --deck-soft: rgba(212,134,181,.13); }