/* Content Deployment section.
   Visual idea: a broadcast control room. The screen being edited sits on a graphite "studio floor";
   status uses tally lights (green = preview / draft, red = on air / published). Everything else stays
   quiet so the content on the screen is what draws the eye. */

:root {
    --cd-floor: #232a33;
    --cd-floor-line: rgba(255, 255, 255, .045);
    --cd-bezel: #0d1116;
    --cd-surface: #ffffff;
    --cd-surface-2: #f3f5f8;
    --cd-line: #dde2e9;
    --cd-ink: #1b2430;
    --cd-ink-2: #5c6776;
    --cd-guide: #f2a93b;
    --cd-select: #3aa0ff;
    --cd-tally-live: #e5484d;
    --cd-tally-preview: #2fb36b;
    --cd-tally-idle: #9aa3ae;
    --cd-radius: 6px;
}

/* ---------- shell ---------- */
.cd-page { color: var(--cd-ink); }
.cd-page h1, .cd-page h2, .cd-page h3 { color: var(--cd-ink); letter-spacing: -.01em; }
.cd-page h1 { font-size: 1.6rem; font-weight: 700; margin: 0; }
.cd-page h2 { font-size: 1.15rem; font-weight: 700; margin: 0; }
.cd-page h3 { font-size: 1rem; font-weight: 700; margin: 0; }
.cd-muted { color: var(--cd-ink-2); }
.cd-small { font-size: .92rem; }
.cd-page { padding: 12px 4px 24px; }
.cd-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; background: var(--cd-surface); border: 1px solid var(--cd-line); border-top: 3px solid #007bff; border-radius: var(--cd-radius); padding: 14px 18px; }
.cd-head h1 { margin-bottom: 2px; }
.cd-head .cd-muted { font-size: 1rem; }
/* inner toolbars (e.g. inside a column or a dialog) stay plain */
.cd-page .col-lg-8 > .cd-head, .k-window .cd-head, .cd-head.cd-head-plain { background: none; border: 0; padding: 0; }
.cd-head .cd-spacer { flex: 1; }
.cd-empty { border: 1px dashed var(--cd-line); border-radius: var(--cd-radius); padding: 40px 24px; text-align: center; color: var(--cd-ink-2); background: var(--cd-surface); }
.cd-empty h2 { margin-bottom: 6px; }

/* tally light */
.cd-tally { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; font-weight: 600; color: var(--cd-ink-2); white-space: nowrap; }
.cd-tally::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cd-tally-idle); box-shadow: 0 0 0 3px rgba(154, 163, 174, .18); }
.cd-tally.live { color: #b4262b; }
.cd-tally.live::before { background: var(--cd-tally-live); box-shadow: 0 0 0 3px rgba(229, 72, 77, .2), 0 0 8px rgba(229, 72, 77, .6); }
.cd-tally.preview { color: #1d7a47; }
.cd-tally.preview::before { background: var(--cd-tally-preview); box-shadow: 0 0 0 3px rgba(47, 179, 107, .2); }

/* ---------- projects ---------- */
.cd-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.cd-project { background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: var(--cd-radius); overflow: hidden; display: flex; flex-direction: column; }
.cd-project:focus-within { outline: 2px solid var(--cd-select); outline-offset: 2px; }
.cd-project-screen { aspect-ratio: 16 / 9; background: var(--cd-floor); display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; border: 0; padding: 14px; width: 100%; }
.cd-project-screen .cd-mini { width: 100%; height: 100%; background: var(--cd-bezel); border-radius: 3px; position: relative; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.cd-project-screen .cd-mini.portrait { width: auto; height: 100%; aspect-ratio: 9 / 16; }
.cd-mini-zone { position: absolute; background-size: cover; background-position: center; outline: 1px solid rgba(255, 255, 255, .12); }
.cd-project-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cd-project-title { font-weight: 700; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-project-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cd-project-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.cd-project-actions .btn { white-space: nowrap; }

/* ---------- editor layout ---------- */
.cd-editor { display: grid; grid-template-columns: 270px minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "bar bar bar" "lib stage props" "lib timeline props"; height: calc(100vh - 120px); min-height: 620px; background: var(--cd-surface-2); border: 1px solid var(--cd-line); border-radius: var(--cd-radius); overflow: hidden; }
.cd-bar { grid-area: bar; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--cd-surface); border-bottom: 1px solid var(--cd-line); flex-wrap: wrap; }
.cd-bar .cd-name { font-size: 1.05rem; font-weight: 700; border: 1px solid transparent; border-radius: 4px; padding: 3px 6px; min-width: 180px; max-width: 360px; background: transparent; color: var(--cd-ink); }
.cd-bar .cd-name:hover { border-color: var(--cd-line); }
.cd-bar .cd-name:focus { border-color: var(--cd-select); outline: none; background: #fff; }
.cd-bar .cd-spacer { flex: 1; }
.cd-save-state { font-size: .92rem; color: var(--cd-ink-2); min-width: 90px; text-align: right; }

.cd-lib { grid-area: lib; background: var(--cd-surface); border-right: 1px solid var(--cd-line); display: flex; flex-direction: column; min-height: 0; }
.cd-lib-head { padding: 10px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--cd-line); }
.cd-lib-filter { display: flex; gap: 4px; }
.cd-lib-filter button { flex: 1; border: 1px solid var(--cd-line); background: #fff; border-radius: 4px; font-size: .92rem; padding: 3px 0; color: var(--cd-ink-2); }
.cd-lib-filter button.on { background: var(--cd-ink); color: #fff; border-color: var(--cd-ink); }
.cd-lib-list { overflow-y: auto; padding: 10px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: max-content; gap: 8px; align-content: start; flex: 1; min-height: 0; }
.cd-media { border: 1px solid var(--cd-line); border-radius: 4px; background: #fff; cursor: grab; overflow: hidden; display: flex; flex-direction: column; user-select: none; }
.cd-media:hover { border-color: var(--cd-select); }
.cd-media:focus-visible { outline: 2px solid var(--cd-select); }
.cd-media-thumb { height: 64px; flex: 0 0 64px; background: #e9edf2 center / cover no-repeat; position: relative; }
.cd-media-thumb .cd-badge { position: absolute; left: 4px; bottom: 4px; background: rgba(13, 17, 22, .75); color: #fff; font-size: .85rem; padding: 1px 5px; border-radius: 3px; }
.cd-media-thumb .fa-film, .cd-media-thumb .fa-globe, .cd-media-thumb .fa-file { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #9aa3ae; font-size: 1.4rem; }
.cd-media-name { font-size: .92rem; padding: 3px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-dropzone { border: 2px dashed var(--cd-line); border-radius: 6px; padding: 10px; text-align: center; font-size: .92rem; color: var(--cd-ink-2); cursor: pointer; }
.cd-dropzone.over { border-color: var(--cd-select); color: var(--cd-select); background: #eef6ff; }
.cd-uploads { display: flex; flex-direction: column; gap: 4px; }
.cd-upload { font-size: .92rem; }
.cd-upload progress { width: 100%; height: 6px; }

/* stage: the screen on the studio floor */
.cd-stage-wrap { grid-area: stage; position: relative; background-color: var(--cd-floor); background-image: linear-gradient(var(--cd-floor-line) 1px, transparent 1px), linear-gradient(90deg, var(--cd-floor-line) 1px, transparent 1px); background-size: 32px 32px; display: flex; align-items: center; justify-content: center; padding: 28px; min-height: 0; overflow: hidden; }
.cd-screen { position: relative; background: var(--cd-bezel); box-shadow: 0 0 0 10px var(--cd-bezel), 0 24px 60px rgba(0, 0, 0, .55); border-radius: 2px; max-width: 100%; max-height: 100%; }
.cd-stage { position: absolute; inset: 0; overflow: hidden; }
.cd-stage.drop-over { outline: 2px dashed var(--cd-guide); outline-offset: 4px; }
.cd-zone { position: absolute; background: rgba(255, 255, 255, .04) center / cover no-repeat; outline: 1px solid rgba(255, 255, 255, .22); outline-offset: -1px; cursor: move; touch-action: none; }
.cd-zone.selected { outline: 2px solid var(--cd-select); outline-offset: -2px; z-index: 1000 !important; }
.cd-zone.drop-target { outline: 2px solid var(--cd-guide); background-color: rgba(242, 169, 59, .18); }
.cd-zone-label { position: absolute; left: 6px; top: 6px; background: rgba(13, 17, 22, .72); color: #fff; font-size: .85rem; padding: 2px 7px; border-radius: 3px; pointer-events: none; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-zone-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .5); font-size: .92rem; pointer-events: none; text-align: center; padding: 8px; }
.cd-zone-thumb { position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; pointer-events: none; }
/* zone content is clipped to the zone, like on the player (rotated content, web pages) */
.cd-zone-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* live web page on the canvas: sized by cdEditor.fitWeb; never takes the mouse, so the zone can still be dragged */
.cd-zone-web { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; border: 0; background: #fff; pointer-events: none; transform-origin: center; }
.cd-handle { position: absolute; width: 12px; height: 12px; background: #fff; border: 2px solid var(--cd-select); border-radius: 2px; display: none; }
.cd-zone.selected .cd-handle { display: block; }
.cd-handle[data-h="nw"] { left: -6px; top: -6px; cursor: nwse-resize; }
.cd-handle[data-h="ne"] { right: -6px; top: -6px; cursor: nesw-resize; }
.cd-handle[data-h="sw"] { left: -6px; bottom: -6px; cursor: nesw-resize; }
.cd-handle[data-h="se"] { right: -6px; bottom: -6px; cursor: nwse-resize; }
.cd-handle[data-h="n"] { left: calc(50% - 6px); top: -6px; cursor: ns-resize; }
.cd-handle[data-h="s"] { left: calc(50% - 6px); bottom: -6px; cursor: ns-resize; }
.cd-handle[data-h="w"] { top: calc(50% - 6px); left: -6px; cursor: ew-resize; }
.cd-handle[data-h="e"] { top: calc(50% - 6px); right: -6px; cursor: ew-resize; }
.cd-guide-line { position: absolute; background: var(--cd-guide); pointer-events: none; z-index: 2000; }
.cd-guide-line.v { width: 1px; top: 0; bottom: 0; }
.cd-guide-line.h { height: 1px; left: 0; right: 0; }
.cd-geometry { position: absolute; right: 10px; bottom: 8px; color: rgba(255, 255, 255, .65); font-size: .85rem; pointer-events: none; }

/* timeline for the selected zone */
.cd-timeline { grid-area: timeline; background: var(--cd-surface); border-top: 1px solid var(--cd-line); padding: 10px 12px; min-height: 150px; }
.cd-timeline-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cd-track { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; min-height: 96px; align-items: stretch; }
.cd-track.drop-over { background: #fff8ec; outline: 2px dashed var(--cd-guide); border-radius: 4px; }
.cd-clip { flex: 0 0 auto; width: 128px; border: 1px solid var(--cd-line); border-radius: 4px; background: #fff; cursor: grab; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.cd-clip.selected { border-color: var(--cd-select); box-shadow: 0 0 0 2px rgba(58, 160, 255, .35); }
.cd-clip.disabled { opacity: .45; }
.cd-clip-thumb { height: 60px; background: #1b2430 center / cover no-repeat; position: relative; }
.cd-clip-thumb .cd-kind { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .7); }
.cd-clip-info { display: flex; justify-content: space-between; align-items: center; padding: 3px 6px; font-size: .92rem; gap: 4px; }
.cd-clip-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-clip-remove { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(13, 17, 22, .7); color: #fff; font-size: .85rem; line-height: 20px; padding: 0; display: none; }
.cd-clip:hover .cd-clip-remove, .cd-clip:focus-within .cd-clip-remove { display: block; }
.cd-clip-ghost { opacity: .4; }
.cd-track-hint { color: var(--cd-ink-2); font-size: .92rem; align-self: center; padding: 0 8px; }

/* properties */
.cd-props { grid-area: props; background: var(--cd-surface); border-left: 1px solid var(--cd-line); overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 14px; }
.cd-props section { display: flex; flex-direction: column; gap: 8px; }
.cd-props section + section { border-top: 1px solid var(--cd-line); padding-top: 12px; }
.cd-field { display: flex; flex-direction: column; gap: 3px; }
.cd-field > label { font-size: .92rem; color: var(--cd-ink-2); margin: 0; font-weight: 600; }
.cd-row { display: flex; gap: 8px; }
.cd-row > * { flex: 1; min-width: 0; }
.cd-templates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cd-template { aspect-ratio: 16 / 10; border: 1px solid var(--cd-line); border-radius: 4px; background: #fff; position: relative; padding: 0; overflow: hidden; }
.cd-template:hover, .cd-template:focus-visible { border-color: var(--cd-select); }
.cd-template span { position: absolute; background: #c9d2dd; outline: 1px solid #fff; }
.cd-days { display: flex; gap: 3px; flex-wrap: wrap; }
.cd-days button { border: 1px solid var(--cd-line); background: #fff; border-radius: 4px; font-size: .92rem; padding: 2px 6px; color: var(--cd-ink-2); }
.cd-days button.on { background: var(--cd-ink); color: #fff; border-color: var(--cd-ink); }

/* preview */
.cd-preview-backdrop { position: fixed; inset: 0; background: rgba(13, 17, 22, .92); z-index: 20000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; }
.cd-preview-screen { position: relative; background: #000; box-shadow: 0 0 0 10px var(--cd-bezel), 0 24px 80px rgba(0, 0, 0, .8); overflow: hidden; }
.cd-preview-zone { position: absolute; overflow: hidden; }
.cd-preview-zone > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; transition: opacity .25s linear; }
.cd-preview-bar { color: #fff; display: flex; gap: 12px; align-items: center; }

/* publish wizard */
.cd-steps { display: flex; gap: 6px; margin-bottom: 14px; }
.cd-step { flex: 1; border-bottom: 3px solid var(--cd-line); padding: 4px 2px; font-size: .92rem; color: var(--cd-ink-2); font-weight: 600; }
.cd-step.on { border-color: var(--cd-select); color: var(--cd-ink); }
.cd-step.done { border-color: var(--cd-tally-preview); }
.cd-targets { border: 1px solid var(--cd-line); border-radius: var(--cd-radius); max-height: 380px; overflow-y: auto; }
.cd-target-group { border-bottom: 1px solid var(--cd-line); }
.cd-target-group:last-child { border-bottom: 0; }
.cd-target-group > header { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--cd-surface-2); font-weight: 600; }
.cd-target { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 30px; font-size: 1rem; }
.cd-target:hover { background: #f8fafc; }
.cd-target .cd-spacer, .cd-target-group .cd-spacer { flex: 1; }
.cd-sync-tag { font-size: .85rem; border: 1px solid #b7d6ff; color: #1a5fb4; border-radius: 3px; padding: 0 5px; font-weight: 600; }
.cd-warnings { background: #fff8ec; border: 1px solid #f6d59b; border-radius: var(--cd-radius); padding: 8px 12px; font-size: .92rem; }
.cd-warnings ul { margin: 0; padding-left: 18px; }
.cd-status-table { width: 100%; font-size: 1rem; }
.cd-status-table td, .cd-status-table th { padding: 6px 8px; border-bottom: 1px solid var(--cd-line); }

/* targets page */
.cd-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.cd-lane { background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: var(--cd-radius); display: flex; flex-direction: column; }
.cd-lane.drop-over { outline: 2px dashed var(--cd-guide); }
.cd-lane > header { padding: 10px 12px; border-bottom: 1px solid var(--cd-line); display: flex; align-items: center; gap: 8px; }
.cd-lane > header .cd-spacer { flex: 1; }
.cd-lane-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 60px; }
.cd-loc { border: 1px solid var(--cd-line); border-radius: 4px; padding: 7px 9px; background: #fff; cursor: grab; display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.cd-loc:hover { border-color: var(--cd-select); }
.cd-loc .cd-spacer { flex: 1; }
.cd-loc-sub { font-size: .92rem; color: var(--cd-ink-2); }

/* live wall */
.cd-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.cd-tile { background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: var(--cd-radius); overflow: hidden; display: flex; flex-direction: column; }
/* Fixed 16:9 frame whatever the screen's shape: the snapshot is letterboxed inside and never resizes the card. */
.cd-tile-screen { aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; background: var(--cd-floor); display: flex; align-items: center; justify-content: center; position: relative; }
.cd-tile-snap { position: absolute; inset: 8px; display: flex; align-items: center; justify-content: center; }
.cd-tile-snap img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 0 0 4px var(--cd-bezel); }
.cd-tile-screen .cd-tile-empty { color: rgba(255, 255, 255, .55); font-size: .92rem; text-align: center; padding: 12px; }
.cd-tile-screen .cd-tile-age { position: absolute; right: 8px; bottom: 6px; color: rgba(255, 255, 255, .7); font-size: .85rem; }
.cd-tile-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.cd-tile-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cd-spin { animation: cd-spin 1s linear infinite; }
@keyframes cd-spin { to { transform: rotate(360deg); } }

/* media editor */
.cd-me { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; min-height: 60vh; }
.cd-me-view { background: var(--cd-floor); border-radius: var(--cd-radius); display: flex; align-items: center; justify-content: center; padding: 16px; position: relative; min-height: 420px; }
.cd-me-view img, .cd-me-view video { max-width: 100%; max-height: 60vh; display: block; }
.cd-me-side { display: flex; flex-direction: column; gap: 12px; }
.cd-trim { position: relative; height: 34px; }
.cd-trim input[type=range] { position: absolute; left: 0; right: 0; width: 100%; pointer-events: none; -webkit-appearance: none; appearance: none; background: none; top: 8px; }
.cd-trim input[type=range]::-webkit-slider-thumb { pointer-events: all; -webkit-appearance: none; width: 14px; height: 24px; border-radius: 3px; background: var(--cd-guide); border: 1px solid #b97410; cursor: ew-resize; }
.cd-trim input[type=range]::-moz-range-thumb { pointer-events: all; width: 14px; height: 24px; border-radius: 3px; background: var(--cd-guide); border: 1px solid #b97410; cursor: ew-resize; }
.cd-trim-track { position: absolute; left: 0; right: 0; top: 14px; height: 8px; background: #d5dbe3; border-radius: 4px; }
.cd-trim-sel { position: absolute; top: 14px; height: 8px; background: var(--cd-guide); border-radius: 4px; }
.cd-me-progress { position: absolute; inset: 0; background: rgba(13, 17, 22, .8); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: var(--cd-radius); }
.cd-me-progress progress { width: 60%; }

@media (max-width: 1200px) {
    .cd-editor { grid-template-columns: 220px minmax(0, 1fr) 260px; }
}
@media (max-width: 900px) {
    .cd-editor { grid-template-columns: 1fr; grid-template-rows: auto 50vh auto auto auto; grid-template-areas: "bar" "stage" "timeline" "props" "lib"; height: auto; }
    .cd-lib { max-height: 360px; border-right: 0; }
    .cd-props { border-left: 0; }
    .cd-me { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .cd-spin { animation: none; }
    .cd-preview-zone > * { transition: none; }
}
.cd-page > .row { margin-left: 0; margin-right: 0; }

/* paging, pickers, list tables */
.cd-pager { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.cd-pager .cd-spacer { flex: 1; }
.cd-picker { position: relative; }
.cd-picker-list { position: absolute; left: 0; min-width: 280px; width: 100%; top: calc(100% + 2px); z-index: 30000; background: #fff; border: 1px solid var(--cd-line); border-radius: 4px; box-shadow: 0 8px 24px rgba(27, 36, 48, .15); max-height: 280px; overflow-y: auto; }
.cd-picker-item { display: flex; width: 100%; align-items: center; gap: 6px; border: 0; background: none; padding: 6px 10px; text-align: left; font-size: 1rem; }
.cd-picker-item:hover, .cd-picker-item:focus { background: #eef6ff; outline: none; }
.cd-picker-empty { padding: 6px 10px; }
.cd-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cd-toolbar .cd-spacer { flex: 1; }
.cd-selectbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #eef6ff; border: 1px solid #b7d6ff; border-radius: var(--cd-radius); padding: 6px 12px; margin-bottom: 10px; font-size: 1rem; }
.cd-table { width: 100%; background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: var(--cd-radius); border-collapse: separate; border-spacing: 0; font-size: 1rem; }
.cd-table th { font-weight: 600; color: var(--cd-ink-2); background: var(--cd-surface-2); position: sticky; top: 0; }
.cd-table th, .cd-table td { padding: 7px 10px; border-bottom: 1px solid var(--cd-line); vertical-align: middle; }
.cd-table tr:last-child td { border-bottom: 0; }
.cd-table tr.selected td { background: #eef6ff; }
.cd-split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.cd-groups { background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: var(--cd-radius); }
.cd-groups > header { padding: 10px 12px; border-bottom: 1px solid var(--cd-line); display: flex; flex-direction: column; gap: 8px; }
.cd-group-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--cd-line); cursor: pointer; font-size: 1rem; }
.cd-group-item:hover { background: #f8fafc; }
.cd-group-item.on { background: #eef6ff; box-shadow: inset 3px 0 0 var(--cd-select); }
.cd-group-item.drop-over { outline: 2px dashed var(--cd-guide); outline-offset: -2px; }
.cd-group-item .cd-spacer { flex: 1; }
.cd-loc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cd-loc.selected { border-color: var(--cd-select); background: #eef6ff; }
.cd-sidebar-branch { padding: 4px 8px 8px; }
.cd-sidebar-branch select { width: 100%; }
@media (max-width: 900px) { .cd-split { grid-template-columns: 1fr; } }

/* small neutral label, e.g. "Classic layout" on project cards */
.cd-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .85rem; padding: 1px 8px; border-radius: 999px; background: var(--cd-surface-2); border: 1px solid var(--cd-line); color: var(--cd-ink-2); white-space: nowrap; }

/* Classic pages use 13px (1rem) text and controls; keep Bootstrap's small buttons and inputs at the same size here. */
.cd-page .btn-sm, .cd-page .form-control-sm, .cd-page .custom-select-sm, .cd-page .btn-group-sm > .btn,
.k-window.cd-page .btn-sm, .k-window.cd-page .form-control-sm { font-size: 1rem; }
.cd-page small, .cd-page .small { font-size: .92rem; }

/* ---------- "Projects is the preferred way" note (home page, classic Locations page) ---------- */
.cd-promo { position: relative; display: flex; align-items: center; gap: 22px; background: var(--cd-surface); border: 1px solid var(--cd-line); border-left: 4px solid #007bff; border-radius: var(--cd-radius); padding: 18px 48px 18px 20px; margin: 12px 4px 16px; color: var(--cd-ink); animation: cd-promo-in .45s ease-out both; }
.cd-promo h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 4px; color: var(--cd-ink); }
.cd-promo p { margin: 0 0 10px; max-width: 72ch; color: var(--cd-ink-2); line-height: 1.5; }
.cd-promo-kicker { font-size: .92rem; font-weight: 600; color: #007bff; margin-bottom: 2px; }
.cd-promo-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cd-promo-actions .btn-sm { font-size: 1rem; }
.cd-promo-never { color: var(--cd-ink-2); }
.cd-promo-close { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--cd-ink-2); }
.cd-promo-close:hover { background: var(--cd-surface-2); color: var(--cd-ink); }
.cd-promo-close:focus-visible, .cd-promo-never:focus-visible { outline: 2px solid var(--cd-select); outline-offset: 2px; }
.cd-promo-home { padding: 26px 56px 26px 28px; }
.cd-promo-home h2 { font-size: 1.5rem; }
.cd-promo-locations { margin: 0 0 12px; padding-top: 12px; padding-bottom: 12px; }
.cd-promo-locations p { margin-bottom: 8px; }

/* the little story: a clip slides onto a screen, the zones fill, the tally light goes on air */
.cd-promo-art { position: relative; flex: none; width: 150px; height: 92px; }
.cd-promo-locations .cd-promo-art { width: 116px; height: 72px; }
.cd-promo-screen { position: absolute; right: 0; top: 0; width: 82%; aspect-ratio: 16 / 10; background: var(--cd-floor); border: 3px solid var(--cd-bezel); border-radius: 5px; box-shadow: 0 3px 10px rgba(13, 17, 22, .18); overflow: hidden; }
.cd-promo-zone { position: absolute; border-radius: 2px; opacity: .25; background: #fff; animation: cd-promo-fill 6s ease-in-out infinite; }
.cd-promo-zone.z1 { left: 5%; top: 7%; width: 62%; height: 70%; background: #ff8a5c; }
.cd-promo-zone.z2 { left: 70%; top: 7%; width: 25%; height: 70%; background: #10b981; animation-delay: .5s; }
.cd-promo-zone.z3 { left: 5%; top: 81%; width: 90%; height: 12%; background: #6f6cf0; animation-delay: 1s; }
.cd-promo-tally { position: absolute; right: 5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--cd-tally-idle); animation: cd-promo-tally 6s ease-in-out infinite; }
.cd-promo-tile { position: absolute; left: 0; bottom: 2px; width: 30%; aspect-ratio: 16 / 10; border-radius: 3px; background: #ff8a5c; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(13, 17, 22, .25); animation: cd-promo-drag 6s ease-in-out infinite; }
@keyframes cd-promo-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes cd-promo-drag { 0%, 8% { transform: translate(0, 0); opacity: 1; } 30% { transform: translate(95%, -120%); opacity: 1; } 36%, 100% { transform: translate(95%, -120%); opacity: 0; } }
@keyframes cd-promo-fill { 0%, 30% { opacity: .18; } 42%, 88% { opacity: .95; } 100% { opacity: .18; } }
@keyframes cd-promo-tally { 0%, 55% { background: var(--cd-tally-idle); box-shadow: none; } 62%, 88% { background: var(--cd-tally-live); box-shadow: 0 0 0 4px rgba(229, 72, 77, .3); } 100% { background: var(--cd-tally-idle); box-shadow: none; } }
@media (max-width: 767.98px) {
    .cd-promo { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .cd-promo, .cd-promo-zone, .cd-promo-tally, .cd-promo-tile { animation: none; }
    .cd-promo-zone { opacity: .95; }
    .cd-promo-tile { display: none; }
    .cd-promo-tally { background: var(--cd-tally-live); }
}

/* Snapshot viewer (Live screens) */
.cd-snap-button { border: 0; padding: 0; background: none; cursor: zoom-in; }
.cd-snap-button:focus-visible { outline: 2px solid var(--cd-select); outline-offset: 2px; }
.cd-snap-viewer { position: fixed; inset: 0; z-index: 2000; background: rgba(13, 17, 22, .88); display: flex; align-items: center; justify-content: center; padding: 24px; outline: none; }
.cd-snap-viewer-inner { width: min(1400px, 100%); max-height: 100%; display: flex; flex-direction: column; background: var(--cd-floor); border-radius: 8px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.cd-snap-viewer-inner header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--cd-surface); }
.cd-snap-viewer-inner header strong { margin-right: 8px; }
.cd-snap-viewer-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 20px 56px; }
.cd-snap-viewer-stage img { max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain; box-shadow: 0 0 0 6px var(--cd-bezel); }
.cd-snap-viewer-stage .cd-tile-empty { color: rgba(255, 255, 255, .6); padding: 80px 0; }
.cd-snap-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; }
.cd-snap-nav:hover { background: rgba(255, 255, 255, .25); }
.cd-snap-nav.prev { left: 10px; }
.cd-snap-nav.next { right: 10px; }

/* Live view inside the screen viewer */
.cd-live-bar { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; border-radius: 999px; background: rgba(13, 17, 22, .72); color: #fff; font-size: .875rem; white-space: nowrap; }
.cd-live-bar:empty { display: none; }
.cd-live-start { background: #c62828; color: #fff; border-radius: 999px; }
.cd-live-start:hover:not(:disabled) { background: #b71c1c; color: #fff; }
.cd-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #e53935; animation: cd-live-pulse 1.6s ease-in-out infinite; }
@keyframes cd-live-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .cd-live-dot { animation: none; } }
.cd-live-stage { position: relative; display: flex; align-items: center; justify-content: center; max-width: 100%; }
.cd-live-stage.is-over img { filter: grayscale(.8) brightness(.45); }
.cd-live-note { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); margin: 0; max-width: 90%; padding: 6px 12px; border-radius: 6px; background: rgba(13, 17, 22, .78); color: #fff; font-size: .8125rem; text-align: center; }
.cd-live-message { position: absolute; inset: 0; margin: auto; width: min(480px, 92%); height: fit-content; padding: 16px 18px; border-radius: 8px; background: var(--cd-surface); color: inherit; box-shadow: 0 8px 30px rgba(0, 0, 0, .45); }
.cd-live-message p { margin: 6px 0 0; }
.cd-live-message ul { margin: 8px 0 0; padding-left: 18px; }
.cd-live-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Player logs (system administrators) below the screen viewer */
.cd-logs { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 14px; padding: 12px 14px 14px; background: var(--cd-surface); max-height: 42vh; overflow: auto; }
@media (max-width: 900px) { .cd-logs { grid-template-columns: 1fr; } }
.cd-logs h3 { font-size: 1rem; margin: 0 0 4px; }
.cd-logs-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.cd-logs-head h3 { margin: 0 auto 0 0; }
.cd-logs .cd-muted { font-size: .8125rem; }
.cd-logs-out { display: flex; flex-direction: column-reverse; height: 26vh; min-height: 160px; overflow: auto; margin: 0; padding: 8px 10px; border-radius: 6px; background: #11151a; color: #d7dde4; font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; }
.cd-logs-out pre { flex: none; overflow: visible; margin: 0; color: inherit; font: inherit; white-space: pre-wrap; word-break: break-word; }
.cd-logs-out .lv-E, .cd-logs-out .lv-F { color: #ff8a80; }
.cd-logs-out .lv-W { color: #ffd180; }
.cd-logs-out .lv-D, .cd-logs-out .lv-V { color: #9aa6b2; }
.cd-logs-list { list-style: none; margin: 8px 0 0; padding: 0; }
.cd-logs-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid rgba(127, 127, 127, .2); font-size: .875rem; }
.cd-logs-list li span:first-child { margin-right: auto; }
.cd-logs-problem { color: #c62828; font-size: .875rem; margin: 6px 0 0; }

/* read-only projects (cross-branch) */
.cd-ro-banner { flex-basis: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #fff7e0; border: 1px solid #f0d58a; border-radius: 4px; color: #6b5200; font-size: .92rem; }
.cd-chip-ro { background: #fff7e0; border-color: #f0d58a; color: #6b5200; }
.loc-managed { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-managed-tag { font-size: .75rem; font-weight: 600; padding: 0 5px; border-radius: 3px; background: #e7eefc; color: #1d4ed8; }
.cd-changed-local { font-size: .8rem; padding: 0 5px; border-radius: 3px; background: #fff7e0; color: #6b5200; border: 1px solid #f0d58a; }