html[data-odin-ui="console"] {
  min-width: 1180px;
  min-height: 100%;
  color-scheme: dark;
  background: #07090a;
}

html[data-odin-ui="console"] body {
  min-width: 1180px;
  min-height: 100%;
  overflow: hidden;
  background: #07090a;
}

html[data-odin-ui="console"] body > :not(.cn-shell) {
  display: none !important;
}

.cn-shell {
  --cn-bg: #07090a;
  --cn-surface: #101415;
  --cn-surface-raised: #171c1d;
  --cn-surface-deep: #0b0f10;
  --cn-surface-warm: #1b1815;
  --cn-line: #2b3334;
  --cn-line-strong: #3b4747;
  --cn-text: #f3f5f4;
  --cn-text-soft: #c5cecc;
  --cn-muted: #8f9b99;
  --cn-a: #59c9be;
  --cn-a-soft: #173b38;
  --cn-b: #e4b54f;
  --cn-b-soft: #3c3118;
  --cn-event: #d9786e;
  --cn-event-soft: #36201e;
  --cn-green: #76bd90;
  --cn-warning: #e4a74f;
  --cn-danger: #e16d66;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-rows: 58px minmax(0, 1fr) 26px;
  min-width: 1180px;
  color: var(--cn-text);
  background: var(--cn-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  letter-spacing: 0;
}

.cn-shell *, .cn-shell *::before, .cn-shell *::after { box-sizing: border-box; }
.cn-shell button { font: inherit; letter-spacing: 0; }
.cn-shell button:focus-visible { outline: 2px solid #eef6f4; outline-offset: 2px; }
.cn-shell svg { width: 17px; height: 17px; stroke-width: 2; }

.cn-topbar {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(330px, 1.2fr) minmax(420px, .9fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 0 14px;
  border-bottom: 1px solid var(--cn-line);
  background: #0c1011;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
}

.cn-brand, .cn-event-title, .cn-system-strip, .cn-top-actions,
.cn-track-identity, .cn-track-copy, .cn-status-inline, .cn-panel-title,
.cn-library-tabs, .cn-search, .cn-now-track, .cn-next-time,
.cn-rundown-copy, .cn-foot-status { display: flex; align-items: center; }

.cn-brand { gap: 10px; min-width: 0; }
.cn-brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #355350;
  border-radius: 5px;
  color: #d7fffa;
  background: #112321;
  box-shadow: inset 0 0 0 1px rgba(89, 201, 190, .08), 0 6px 18px rgba(0, 0, 0, .28);
  font-size: 12px;
  font-weight: 850;
}
.cn-brand-copy { min-width: 0; }
.cn-brand-copy strong, .cn-brand-copy span { display: block; }
.cn-brand-copy strong { font-size: 14px; line-height: 1.2; }
.cn-brand-copy span { margin-top: 3px; color: var(--cn-muted); font-size: 11px; }

.cn-event-title { justify-content: center; gap: 12px; min-width: 0; }
.cn-event-thumb {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid #6a4b3a;
  border-radius: 4px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .36);
}
.cn-event-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cn-event-heading { min-width: 0; }
.cn-event-heading span, .cn-event-heading strong, .cn-event-heading small { display: block; }
.cn-event-heading span { color: var(--cn-event); font-size: 11px; font-weight: 800; }
.cn-event-heading strong { max-width: 460px; overflow: hidden; margin-top: 1px; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.cn-event-heading small { margin-top: 2px; color: var(--cn-muted); font-size: 11px; }

.cn-top-actions { justify-content: flex-end; gap: 8px; min-width: 0; }
.cn-system-strip { gap: 7px; min-height: 34px; padding: 0 10px; border-left: 1px solid var(--cn-line); color: var(--cn-text-soft); font-size: 11px; font-weight: 650; white-space: nowrap; }
.cn-system-strip .cn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cn-green); box-shadow: 0 0 0 3px rgba(118, 189, 144, .13); }
.cn-top-button, .cn-icon-button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--cn-line-strong);
  border-radius: 5px;
  color: var(--cn-text-soft);
  background: linear-gradient(180deg, #1c2223, #131819);
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 4px 12px rgba(0, 0, 0, .18);
  font-size: 11px;
  font-weight: 700;
}
.cn-top-button { padding: 0 11px; }
.cn-icon-button { width: 34px; padding: 0; }
.cn-top-button:hover, .cn-icon-button:hover { border-color: #536261; color: #fff; background: #202728; }
.cn-close-button:hover { border-color: #9f4d48; color: #fff; background: #4a211f; }
.cn-top-button:disabled, .cn-icon-button:disabled { cursor: not-allowed; opacity: .42; }

.cn-workspace {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 12px var(--cn-rundown-width, 400px);
}

.cn-performance {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: minmax(360px, 57%) 12px minmax(210px, 43%);
  border-right: 1px solid var(--cn-line);
  background: #080b0c;
}

.cn-decks {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(340px, 1fr) 204px minmax(340px, 1fr);
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid var(--cn-line);
}

.cn-library-resizer {
  position: relative;
  z-index: 8;
  display: grid;
  min-width: 0;
  height: 12px;
  place-items: center;
  border: 0;
  border-top: 1px solid #313a3a;
  border-bottom: 1px solid #1d2424;
  outline: 0;
  cursor: row-resize;
  background: #0b1011;
  touch-action: none;
}
.cn-library-resizer::before { position: absolute; inset: -4px 0; content: ""; }
.cn-library-resizer > span { position: relative; display: grid; width: 88px; height: 10px; place-items: center; border: 1px solid #52615f; border-radius: 2px; color: #a9b6b3; background: #1b2223; box-shadow: 0 2px 7px rgba(0,0,0,.36); }
.cn-library-resizer svg { width: 18px; height: 10px; }
.cn-library-resizer:hover > span, .cn-library-resizer:focus-visible > span, .cn-library-resizer.is-resizing > span { border-color: #72c6b8; color: #d8fff8; background: #19312e; }
.cn-is-resizing-library { cursor: row-resize !important; user-select: none !important; }

.cn-deck, .cn-mixer, .cn-library {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--cn-line);
  border-radius: 6px;
  background: var(--cn-surface);
  box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 10px 24px rgba(0, 0, 0, .2);
}

.cn-deck {
  display: grid;
  grid-template-rows: 68px 42px minmax(116px, 1fr) 174px;
}
.cn-deck-a { --deck: var(--cn-a); --deck-soft: var(--cn-a-soft); }
.cn-deck-b { --deck: var(--cn-b); --deck-soft: var(--cn-b-soft); }

.cn-deck-head {
  display: grid;
  min-width: 0;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--cn-line);
  background: #14191a;
}
.cn-artwork {
  position: relative;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 1px solid #4b5555;
  border-radius: 4px;
  background: #222;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .34);
}
.cn-artwork::after { position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .1); content: ""; }
.cn-artwork img { width: 100%; height: 100%; object-fit: cover; }
.cn-track-copy { min-width: 0; align-items: flex-start; flex-direction: column; }
.cn-track-copy small, .cn-track-copy strong, .cn-track-copy span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-track-copy small { color: var(--deck); font-size: 11px; font-weight: 750; }
.cn-track-copy strong { margin-top: 3px; color: #fff; font-size: 15px; line-height: 1.15; }
.cn-track-copy span { margin-top: 4px; color: var(--cn-muted); font-size: 12px; }
.cn-deck-status { display: grid; min-width: 82px; gap: 5px; justify-items: end; }
.cn-deck-status b { display: inline-flex; min-height: 26px; align-items: center; gap: 5px; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--deck) 42%, transparent); border-radius: 4px; color: var(--deck); background: var(--deck-soft); font-size: 11px; }
.cn-deck-status span { color: var(--cn-muted); font-size: 11px; font-variant-numeric: tabular-nums; }

.cn-deck-metrics {
  display: grid;
  grid-template-columns: minmax(108px, 1fr) 70px 62px 66px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-bottom: 1px solid #22292a;
  background: #0d1112;
  font-variant-numeric: tabular-nums;
}
.cn-time { color: #fff; font-size: 24px; font-weight: 720; line-height: 1.3; }
.cn-metric { display: grid; gap: 2px; justify-items: end; }
.cn-metric small { color: var(--cn-muted); font-size: 11px; }
.cn-metric strong { color: var(--cn-text-soft); font-size: 13px; }
.cn-metric strong.deck-color { color: var(--deck); }

.cn-waveform {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background-color: #090d0e;
  background-image: linear-gradient(#182021 1px, transparent 1px), linear-gradient(90deg, #182021 1px, transparent 1px);
  background-size: 100% 38px, 64px 100%;
  box-shadow: inset 0 10px 24px rgba(0, 0, 0, .3), inset 0 -10px 24px rgba(0, 0, 0, .22);
}
.cn-waveform canvas { display: block; width: 100%; height: 100%; }
.cn-wave-overview { position: absolute; z-index: 2; right: 9px; bottom: 8px; left: 9px; height: 28px; overflow: hidden; border: 1px solid #3a4445; border-radius: 3px; background: rgba(5, 8, 9, .88); box-shadow: 0 4px 12px rgba(0, 0, 0, .32); }
.cn-wave-overview canvas { width: 100%; height: 100%; opacity: .78; }
.cn-wave-overview > span { position: absolute; inset: 0 auto 0 0; width: var(--progress); border-right: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .08); }
.cn-waveform-playhead { position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 2px; background: #f4f7f6; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 14px rgba(255, 255, 255, .18); }
.cn-waveform-playhead::before { position: absolute; top: 0; left: 50%; width: 8px; height: 6px; transform: translateX(-50%); background: #f4f7f6; clip-path: polygon(0 0, 100% 0, 50% 100%); content: ""; }
.cn-cue-marker { position: absolute; z-index: 3; top: 8px; left: var(--cue); display: grid; width: 22px; height: 22px; place-items: center; border-radius: 3px; color: #08100f; background: var(--marker); font-size: 11px; font-weight: 850; box-shadow: 0 3px 9px rgba(0, 0, 0, .34); }

.cn-deck-controls {
  display: grid;
  min-width: 0;
  grid-template-columns: 82px minmax(0, 1fr) 44px;
  gap: 10px;
  padding: 10px;
  background-color: #121718;
  background-image: url('/assets/console/technical-surface.webp');
  background-size: 512px 512px;
  background-blend-mode: soft-light;
}
.cn-platter {
  position: relative;
  display: grid;
  width: 78px;
  height: 78px;
  align-self: center;
  place-items: center;
  border: 1px solid #465050;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #1d2324 0 2px, #111617 3px 5px);
  box-shadow: inset 0 0 0 7px #0a0e0f, inset 0 0 0 9px #303839, 0 7px 16px rgba(0, 0, 0, .36);
}
.cn-platter::before { position: absolute; top: 9px; left: 50%; width: 2px; height: 13px; transform: translateX(-50%); background: var(--deck); content: ""; }
.cn-platter span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid color-mix(in srgb, var(--deck) 54%, #fff 8%); border-radius: 50%; color: #07100f; background: var(--deck); font-size: 12px; font-weight: 900; }

.cn-center-controls { display: grid; min-width: 0; align-content: center; gap: 9px; }
.cn-transport { display: grid; grid-template-columns: repeat(3, minmax(38px, 1fr)); gap: 6px; }
.cn-control-button, .cn-hotcue, .cn-loop-button, .cn-library-tab, .cn-load-button, .cn-prepare-button {
  border: 1px solid var(--cn-line-strong);
  border-radius: 4px;
  color: var(--cn-text-soft);
  background: linear-gradient(180deg, #202728, #14191a);
  box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 3px 8px rgba(0, 0, 0, .2);
}
.cn-control-button { display: inline-flex; min-width: 0; min-height: 40px; align-items: center; justify-content: center; gap: 6px; font-size: 11px; font-weight: 720; }
.cn-control-button.is-play { min-height: 44px; border-color: color-mix(in srgb, var(--deck) 58%, #444); color: #06110f; background: var(--deck); }
.cn-control-button.is-cue { color: var(--deck); }
.cn-control-button.is-synced { border-color: #5fb9aa; color: #b9f2e8; background: #15302c; box-shadow: inset 0 0 0 1px rgba(89,201,190,.2); }
.cn-sync-strip { display: grid; grid-template-columns: repeat(3, minmax(32px, 1fr)) 30px 42px; gap: 4px; }
.cn-sync-strip button {
  min-width: 0;
  height: 25px;
  padding: 0 5px;
  border: 1px solid #3b4546;
  border-radius: 3px;
  color: #96a3a1;
  background: #101516;
  font-size: 9px;
  font-weight: 800;
}
.cn-sync-strip button.is-active, .cn-sync-strip button.is-synced { border-color: var(--deck); color: var(--deck); background: var(--deck-soft); }
.cn-sync-strip svg { width: 12px; height: 12px; }
.cn-hotcues { display: grid; grid-template-columns: repeat(4, minmax(32px, 1fr)); gap: 5px; }
.cn-hotcue { min-height: 36px; padding: 0; border-top: 3px solid var(--hot); font-size: 11px; font-weight: 780; }
.cn-hotcue.is-set { color: #fff; background: color-mix(in srgb, var(--hot) 24%, #171c1d); }
.cn-loop-row { display: grid; grid-template-columns: auto repeat(4, 32px); align-items: center; gap: 5px; }
.cn-loop-row span { margin-right: 3px; color: var(--cn-muted); font-size: 11px; font-weight: 700; }
.cn-loop-button { width: 32px; height: 32px; padding: 0; font-size: 11px; }
.cn-loop-button.is-active { border-color: var(--deck); color: var(--deck); background: var(--deck-soft); }

.cn-pitch { display: grid; align-items: center; justify-items: center; grid-template-rows: auto 1fr auto; gap: 5px; color: var(--cn-muted); font-size: 11px; font-weight: 680; }
.cn-fader-vertical { position: relative; width: 34px; height: 100%; min-height: 94px; border: 0; background: transparent; }
.cn-fader-vertical::before { position: absolute; top: 5px; bottom: 5px; left: 50%; width: 4px; transform: translateX(-50%); border: 1px solid #3a4444; border-radius: 4px; background: #070a0b; box-shadow: inset 0 0 6px rgba(0, 0, 0, .8); content: ""; }
.cn-fader-vertical::after { position: absolute; top: var(--position); left: 50%; width: 28px; height: 11px; transform: translate(-50%, -50%); border: 1px solid #596565; border-radius: 3px; background: linear-gradient(180deg, #a7afae, #596362); box-shadow: 0 3px 7px rgba(0, 0, 0, .5); content: ""; }

.cn-mixer {
  display: grid;
  grid-template-rows: 42px minmax(0, 1fr) 82px;
  background-color: #0e1213;
  background-image: url('/assets/console/technical-surface.webp');
  background-size: 512px 512px;
  background-blend-mode: soft-light;
}
.cn-mixer-head { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; border-bottom: 1px solid var(--cn-line); background: #171c1d; }
.cn-mixer-head strong { font-size: 12px; }
.cn-master-state { display: inline-flex; align-items: center; gap: 5px; color: var(--cn-green); font-size: 11px; font-weight: 700; }
.cn-mixer-body { display: grid; grid-template-columns: 1fr 30px 1fr; gap: 5px; min-height: 0; padding: 9px 7px 6px; }
.cn-channel { display: grid; min-width: 0; align-content: start; justify-items: center; gap: 4px; }
.cn-channel-name { display: grid; width: 28px; height: 24px; place-items: center; border-radius: 4px; color: #07100f; background: var(--channel); font-size: 11px; font-weight: 900; }
.cn-knob-control { display: grid; justify-items: center; gap: 2px; color: var(--cn-muted); font-size: 11px; font-weight: 650; }
.cn-knob {
  --angle: calc(var(--value) * 2.7deg);
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #4b5656;
  border-radius: 50%;
  background: conic-gradient(from 225deg, var(--channel) 0deg var(--angle), #293132 var(--angle) 270deg, transparent 270deg);
  box-shadow: inset 0 0 0 5px #151b1c, 0 4px 9px rgba(0, 0, 0, .34);
}
.cn-knob::after { position: absolute; top: 5px; left: 50%; width: 2px; height: 10px; transform: translateX(-50%) rotate(calc((var(--value) - 50) * 2.7deg)); transform-origin: 50% 12px; border-radius: 2px; background: #eef3f2; content: ""; }
.cn-channel-fader { position: relative; width: 34px; min-height: 64px; border: 0; background: transparent; }
.cn-channel-fader::before { position: absolute; inset: 4px auto 4px 50%; width: 4px; transform: translateX(-50%); border: 1px solid #333d3e; background: #050707; content: ""; }
.cn-channel-fader::after { position: absolute; top: var(--position); left: 50%; width: 27px; height: 12px; transform: translate(-50%, -50%); border: 1px solid #6b7776; border-radius: 2px; background: linear-gradient(#b6bebd, #596463); box-shadow: 0 3px 6px rgba(0, 0, 0, .5); content: ""; }
.cn-cue-button { min-width: 42px; min-height: 32px; border: 1px solid #52615f; border-radius: 4px; color: var(--channel); background: #18201f; font-size: 11px; font-weight: 800; }
.cn-meter { display: grid; grid-template-columns: repeat(2, 6px); align-content: end; gap: 2px; min-height: 244px; padding: 4px; border: 1px solid #22292a; border-radius: 3px; background: #080b0c; }
.cn-meter-column { display: flex; flex-direction: column-reverse; gap: 2px; }
.cn-meter-column i { display: block; width: 6px; height: 8px; border-radius: 1px; background: #202728; }
.cn-meter-column i.is-on { background: var(--cn-green); box-shadow: 0 0 5px rgba(118, 189, 144, .24); }
.cn-meter-column i.is-warm { background: var(--cn-warning); }
.cn-meter-column i.is-peak { background: var(--cn-danger); }

.cn-crossfader { display: grid; align-content: center; gap: 7px; padding: 8px 10px; border-top: 1px solid var(--cn-line); background: #151a1b; }
.cn-cross-label { display: flex; justify-content: space-between; color: var(--cn-muted); font-size: 11px; font-weight: 700; }
.cn-cross-track { position: relative; height: 32px; border: 1px solid #303a3a; border-radius: 4px; background: #090c0d; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .52); }
.cn-cross-track::before { position: absolute; top: 50%; right: 12px; left: 12px; height: 3px; transform: translateY(-50%); background: #30393a; content: ""; }
.cn-cross-thumb { position: absolute; top: 50%; left: 52%; width: 34px; height: 22px; transform: translate(-50%, -50%); border: 1px solid #707c7b; border-radius: 3px; background: linear-gradient(180deg, #b5bdbc, #5b6564); box-shadow: 0 4px 8px rgba(0, 0, 0, .45); }

.cn-library { display: grid; margin: 0 8px 8px; grid-template-rows: 48px minmax(0, 1fr); border-radius: 5px; }
.cn-library-head { display: grid; grid-template-columns: auto minmax(240px, 360px) auto; align-items: center; gap: 10px; padding: 0 10px; border-bottom: 1px solid var(--cn-line); background: #151a1b; }
.cn-library-tabs { align-self: stretch; gap: 2px; }
.cn-library-tab { min-width: 100px; height: 100%; padding: 0 12px; border-width: 0 0 2px; border-radius: 0; color: var(--cn-muted); background: transparent; box-shadow: none; font-size: 11px; font-weight: 750; }
.cn-library-tab.is-active { border-bottom-color: var(--cn-a); color: #fff; }
.cn-library-tab .cn-count { display: inline-grid; min-width: 20px; height: 20px; margin-left: 5px; place-items: center; border-radius: 3px; color: #161006; background: var(--cn-b); }
.cn-search { min-width: 0; height: 34px; gap: 8px; padding: 0 10px; border: 1px solid #354041; border-radius: 4px; color: var(--cn-muted); background: #0b0f10; font-size: 12px; }
.cn-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-search kbd { margin-left: auto; padding: 2px 5px; border: 1px solid #364142; border-radius: 3px; color: #aeb8b6; background: #171d1e; font-family: inherit; font-size: 11px; white-space: nowrap; }
.cn-filter-button { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; border: 1px solid #394545; border-radius: 4px; color: var(--cn-text-soft); background: #1a2021; font-size: 11px; font-weight: 700; }
.cn-library-panels, .cn-library-panel { min-height: 0; }
.cn-library-panel { display: grid; height: 100%; grid-template-rows: 29px minmax(0, 1fr); }
.cn-library-panel[hidden] { display: none; }
.cn-library-columns, .cn-library-row { display: grid; grid-template-columns: minmax(220px, 1.65fr) minmax(130px, 1fr) 68px 58px 68px 104px 80px; align-items: center; gap: 8px; padding: 0 10px; }
.cn-library-columns { border-bottom: 1px solid #252d2e; color: var(--cn-muted); background: #0e1314; font-size: 11px; font-weight: 700; }
.cn-library-list { min-height: 0; overflow: hidden; background: #0c1011; }
.cn-library-row { min-height: 44px; border-bottom: 1px solid #202728; color: var(--cn-text-soft); font-size: 12px; }
.cn-library-row.is-selected { background: #172321; box-shadow: inset 3px 0 var(--cn-a); }
.cn-library-row:hover { background: #151b1c; }
.cn-library-track { display: grid; min-width: 0; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 9px; }
.cn-library-art { width: 32px; height: 32px; border: 1px solid #4a5454; border-radius: 3px; object-fit: cover; }
.cn-library-copy { min-width: 0; }
.cn-library-copy strong, .cn-library-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-library-copy strong { color: #f1f4f3; font-size: 12px; }
.cn-library-copy span { margin-top: 2px; color: var(--cn-muted); font-size: 11px; }
.cn-file-state { display: inline-flex; min-height: 24px; align-items: center; gap: 5px; color: var(--cn-green); font-size: 11px; font-weight: 700; white-space: nowrap; }
.cn-load-actions { display: flex; gap: 5px; }
.cn-load-button { width: 32px; height: 32px; padding: 0; color: #0a1110; font-size: 11px; font-weight: 900; }
.cn-load-button:first-child { border-color: var(--cn-a); background: var(--cn-a); }
.cn-load-button:last-child { border-color: var(--cn-b); background: var(--cn-b); }
.cn-queue-columns, .cn-queue-row { display: grid; grid-template-columns: 54px minmax(220px, 1.5fr) minmax(180px, 1fr) 68px 104px 80px; align-items: center; gap: 8px; padding: 0 10px; }
.cn-queue-columns { border-bottom: 1px solid #252d2e; color: var(--cn-muted); background: #0e1314; font-size: 11px; font-weight: 700; }
.cn-queue-list { min-height: 0; overflow: hidden; background: #0c1011; }
.cn-queue-row { min-height: 44px; border-bottom: 1px solid #202728; color: var(--cn-text-soft); font-size: 12px; }
.cn-queue-row:hover { background: #151b1c; }
.cn-queue-order { color: var(--cn-b); font-size: 12px; font-variant-numeric: tabular-nums; }
.cn-queue-moment { min-width: 0; overflow: hidden; color: #d5dcda; text-overflow: ellipsis; white-space: nowrap; }
.cn-replay-button { display: grid; width: 32px; height: 32px; padding: 0; place-items: center; border: 1px solid #455150; border-radius: 4px; color: var(--cn-text-soft); background: #182021; }

.cn-rundown {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: 58px 238px 128px minmax(0, 1fr);
  background: #0d1112;
}
.cn-rundown-head { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid var(--cn-line); background: #151a1b; }
.cn-panel-title { gap: 9px; }
.cn-panel-title > span { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #4e3733; border-radius: 4px; color: var(--cn-event); background: var(--cn-event-soft); }
.cn-panel-title div span, .cn-panel-title div strong { display: block; }
.cn-panel-title div span { color: var(--cn-event); font-size: 11px; font-weight: 750; }
.cn-panel-title div strong { margin-top: 2px; font-size: 13px; }
.cn-rundown-progress { display: grid; gap: 4px; justify-items: end; color: var(--cn-muted); font-size: 11px; }
.cn-rundown-progress b { color: var(--cn-text-soft); font-size: 12px; }

.cn-now {
  position: relative;
  display: grid;
  align-content: start;
  gap: 11px;
  padding: 15px 14px;
  border-bottom: 1px solid #4a2c28;
  background-color: var(--cn-surface-warm);
  background-image: url('/assets/console/event-wedding-room.webp');
  background-position: center 42%;
  background-size: cover;
}
.cn-now::before { position: absolute; inset: 0; background: rgba(20, 15, 13, .89); content: ""; }
.cn-now > * { position: relative; z-index: 1; }
.cn-now-label { display: flex; align-items: center; justify-content: space-between; color: var(--cn-event); font-size: 11px; font-weight: 800; }
.cn-now-label b { color: #f5c8c3; font-size: 12px; font-variant-numeric: tabular-nums; }
.cn-now h2 { margin: 0; font-size: 18px; line-height: 1.18; }
.cn-now-track { min-width: 0; gap: 10px; padding: 9px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 5px; background: rgba(7, 9, 10, .68); box-shadow: 0 6px 16px rgba(0, 0, 0, .24); }
.cn-now-track img { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 3px; object-fit: cover; }
.cn-now-track div { min-width: 0; }
.cn-now-track strong, .cn-now-track span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-now-track strong { font-size: 12px; }
.cn-now-track span { margin-top: 3px; color: var(--cn-muted); font-size: 11px; }
.cn-now-instructions { margin: 0; color: #d8d0cc; font-size: 12px; line-height: 1.45; }
.cn-now-signal { display: inline-flex; width: fit-content; min-height: 27px; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid #65443e; border-radius: 4px; color: #f4c5bf; background: #291a18; font-size: 11px; font-weight: 700; }

.cn-next { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--cn-line); background: #121718; }
.cn-next-art { width: 42px; height: 42px; border: 1px solid #4a5454; border-radius: 3px; object-fit: cover; }
.cn-next-time { align-items: flex-start; flex-direction: column; gap: 3px; min-width: 0; }
.cn-next-time span { color: var(--cn-b); font-size: 11px; font-weight: 800; }
.cn-next-time strong { max-width: 100%; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.cn-next-time small { color: var(--cn-muted); font-size: 11px; }
.cn-prepare-button { display: inline-flex; min-height: 36px; align-items: center; gap: 6px; padding: 0 9px; border-color: #4a685f; color: #d9faf4; background: #18302c; font-size: 11px; font-weight: 720; }

.cn-upcoming { min-height: 0; overflow: hidden; }
.cn-upcoming-title { display: flex; height: 38px; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid #262e2f; color: var(--cn-muted); font-size: 11px; font-weight: 720; }
.cn-rundown-list { min-height: 0; }
.cn-rundown-item { display: grid; min-height: 64px; grid-template-columns: 48px 1px 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid #242c2d; }
.cn-rundown-item.is-warm { background: #151412; }
.cn-rundown-time { color: var(--cn-text-soft); font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; }
.cn-rundown-line { width: 1px; height: 34px; background: #394445; }
.cn-rundown-art { width: 34px; height: 34px; border: 1px solid #414b4b; border-radius: 3px; object-fit: cover; }
.cn-rundown-copy { min-width: 0; align-items: flex-start; flex-direction: column; }
.cn-rundown-copy strong, .cn-rundown-copy span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-rundown-copy strong { font-size: 12px; }
.cn-rundown-copy span { margin-top: 4px; color: var(--cn-muted); font-size: 11px; }
.cn-rundown-state { display: inline-flex; min-height: 25px; align-items: center; padding: 0 6px; border: 1px solid #3e4949; border-radius: 3px; color: var(--cn-muted); font-size: 11px; font-weight: 700; }
.cn-rundown-state.is-ready { border-color: #375b50; color: var(--cn-green); background: #14231f; }
.cn-rundown-state.is-needed { border-color: #604a2c; color: var(--cn-warning); background: #251d12; }

.cn-footer { display: flex; align-items: center; gap: 18px; padding: 0 12px; border-top: 1px solid var(--cn-line); color: var(--cn-muted); background: #090c0d; font-size: 11px; }
.cn-foot-status { gap: 6px; white-space: nowrap; }
.cn-foot-status.is-good { color: #9ad7ad; }
.cn-footer .cn-session { margin-left: auto; color: var(--cn-text-soft); font-variant-numeric: tabular-nums; }

@media (max-width: 1599px) {
  .cn-topbar { grid-template-columns: minmax(190px, .65fr) minmax(280px, 1fr) minmax(390px, .9fr); gap: 10px; padding: 0 10px; }
  .cn-workspace { grid-template-columns: minmax(0, 1fr) 12px var(--cn-rundown-width, 320px); }
  .cn-decks { grid-template-columns: minmax(320px, 1fr) 190px minmax(320px, 1fr); gap: 6px; padding: 6px; }
  .cn-performance { grid-template-rows: minmax(430px, 59%) 12px minmax(230px, 41%); }
  .cn-deck { grid-template-rows: 64px 40px minmax(112px, 1fr) 166px; }
  .cn-deck-head { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 8px; padding: 6px 8px; }
  .cn-artwork { width: 46px; height: 46px; }
  .cn-deck-metrics { grid-template-columns: minmax(98px, 1fr) 62px 52px 58px; gap: 6px; padding: 0 8px; }
  .cn-time { font-size: 21px; }
  .cn-deck-controls { grid-template-columns: 70px minmax(0, 1fr) 40px; gap: 7px; padding: 8px; }
  .cn-platter { width: 68px; height: 68px; }
  .cn-transport { gap: 4px; }
  .cn-control-button { gap: 4px; }
  .cn-control-button span { display: none; }
  .cn-hotcues { gap: 4px; }
  .cn-loop-row { grid-template-columns: auto repeat(4, 32px); gap: 4px; }
  .cn-loop-button { width: 32px; }
  .cn-mixer-body { gap: 2px; padding-right: 4px; padding-left: 4px; }
  .cn-library { margin: 0 6px 6px; }
  .cn-library-head { grid-template-columns: auto minmax(210px, 280px) auto; padding: 0 8px; }
  .cn-library-tab { min-width: 84px; padding: 0 8px; }
  .cn-library-columns, .cn-library-row { grid-template-columns: minmax(190px, 1.55fr) minmax(110px, .9fr) 58px 48px 58px 94px 72px; gap: 6px; padding: 0 8px; }
  .cn-queue-columns, .cn-queue-row { grid-template-columns: 48px minmax(190px, 1.4fr) minmax(150px, 1fr) 58px 94px 72px; gap: 6px; padding: 0 8px; }
  .cn-rundown { grid-template-rows: 58px 224px 124px minmax(0, 1fr); }
  .cn-now { gap: 9px; padding: 12px; }
  .cn-now h2 { font-size: 16px; }
  .cn-now-track { padding: 7px; }
  .cn-rundown-item { grid-template-columns: 42px 1px 32px minmax(0, 1fr) auto; gap: 6px; padding-right: 8px; padding-left: 8px; }
  .cn-rundown-art { width: 32px; height: 32px; }
}

@media (max-height: 950px) {
  .cn-performance { grid-template-rows: minmax(430px, 61%) 12px minmax(226px, 39%); }
  .cn-deck { grid-template-rows: 62px 40px minmax(104px, 1fr) 158px; }
  .cn-deck-head { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .cn-artwork { width: 44px; height: 44px; }
  .cn-deck-controls { padding-top: 7px; padding-bottom: 7px; }
  .cn-center-controls { gap: 6px; }
  .cn-hotcue { min-height: 34px; }
  .cn-meter { min-height: 220px; }
  .cn-library-row, .cn-queue-row { min-height: 40px; }
  .cn-rundown { grid-template-rows: 54px 214px 116px minmax(0, 1fr); }
  .cn-rundown-head { padding-right: 11px; padding-left: 11px; }
  .cn-now { gap: 8px; padding: 11px; }
  .cn-now-track img { width: 38px; height: 38px; }
  .cn-now-instructions { line-height: 1.35; }
  .cn-next { padding: 9px 11px; }
  .cn-next-art { width: 38px; height: 38px; }
  .cn-upcoming-title { height: 34px; }
  .cn-rundown-item { min-height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .cn-shell * { scroll-behavior: auto !important; }
}