/* Operational rundown */
.cn-workspace { grid-template-columns: minmax(0,1fr) 12px var(--cn-rundown-width,400px); transition: grid-template-columns .18s ease; }
.cn-shell.is-rundown-collapsed .cn-workspace { grid-template-columns: minmax(0,1fr) 0 52px; }
.cn-rundown {
  position: relative;
  display: grid;
  grid-template-rows: 54px minmax(0,1fr);
  overflow: hidden;
  border-left: 1px solid #303839;
  background: #0b0f10;
}
.cn-rundown-head { display: grid; grid-template-columns: minmax(0,1fr) auto 30px; gap: 9px; padding: 0 9px 0 11px; background: #111617; }
.cn-rundown-head .cn-panel-title > span { width: 30px; height: 30px; }
.cn-rundown-progress { min-width: 58px; }
.cn-rundown-collapse { display: grid; width: 28px; height: 28px; padding: 0; place-items: center; border: 1px solid #3a4644; border-radius: 3px; color: #aab5b2; background: #171d1e; }
.cn-rundown-collapse:hover { border-color: #697875; color: #fff; }
.cn-rundown-collapse svg { width: 14px; height: 14px; }
.cn-rundown-operational { min-height: 0; overflow: auto; scrollbar-color: #44514f #0b0f10; scrollbar-width: thin; }

.cn-oper-now, .cn-oper-next { position: relative; min-width: 0; border-bottom: 1px solid #343b3b; outline: 0; }
.cn-oper-now { display: grid; align-content: start; gap: 8px; padding: 11px 12px 10px; background-color: #171310; background-image: url('/assets/console/event-wedding-room.webp'); background-position: center 42%; background-size: cover; }
.cn-oper-now::before { position: absolute; inset: 0; background: rgba(14,12,10,.9); content: ""; }
.cn-oper-now > * { position: relative; z-index: 1; }
.cn-oper-now.is-selected, .cn-oper-next.is-selected { box-shadow: inset 3px 0 var(--cn-a); }
.cn-oper-now > header, .cn-oper-next > header { display: flex; min-width: 0; align-items: center; gap: 7px; }
.cn-oper-now > header > span, .cn-oper-next > header > span { color: var(--cn-event); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.cn-oper-now > header time { margin-right: auto; color: #f3d2ce; font-size: 12px; font-weight: 850; font-variant-numeric: tabular-nums; }
.cn-oper-now > header em, .cn-oper-next > header em, .cn-rundown-summary em { display: inline-flex; min-height: 22px; align-items: center; gap: 4px; margin-left: auto; padding: 0 6px; border: 1px solid #46504f; border-radius: 2px; color: #aeb8b6; background: rgba(12,16,17,.78); font-size: 9px; font-style: normal; font-weight: 850; white-space: nowrap; }
.cn-oper-now > header em svg { width: 11px; height: 11px; }
.cn-oper-now > header em.is-live, .cn-rundown-summary em.is-live { border-color: #754039; color: #f0a299; background: #2b1513; }
.cn-oper-now > header em.is-prepared, .cn-oper-next > header em.is-prepared, .cn-rundown-summary em.is-prepared { border-color: #3a6552; color: #98d9ad; background: #12231a; }
.cn-oper-now > header em.is-executed, .cn-oper-next > header em.is-executed, .cn-rundown-summary em.is-executed { border-color: #40564f; color: #b5c8c1; background: #17201d; }
.cn-oper-now > header em.is-requested, .cn-oper-next > header em.is-requested, .cn-rundown-summary em.is-requested { border-color: #66512e; color: #dfba64; background: #261f0f; }
.cn-oper-now > header em.is-approved, .cn-oper-next > header em.is-approved, .cn-rundown-summary em.is-approved { border-color: #3d5b69; color: #9fc8db; background: #132028; }
.cn-oper-title { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cn-oper-title h2 { display: -webkit-box; min-width: 0; overflow: hidden; margin: 0; color: #f6f8f7; font-size: 17px; line-height: 1.15; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cn-oper-title span { color: #9b7771; font-size: 9px; font-weight: 750; white-space: nowrap; }
.cn-oper-song { display: grid; min-width: 0; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.cn-oper-song img { width: 42px; height: 42px; border: 1px solid #545b59; border-radius: 3px; object-fit: cover; }
.cn-oper-song > span { min-width: 0; }
.cn-oper-song small, .cn-oper-song strong, .cn-oper-song em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-oper-song small { color: #9a817c; font-size: 9px; }
.cn-oper-song strong { margin-top: 2px; color: #f3f5f4; font-size: 12px; }
.cn-oper-song em { margin-top: 2px; color: #9da8a6; font-size: 10px; font-style: normal; }
.cn-oper-song > b { display: inline-flex; align-items: center; gap: 4px; color: var(--cn-green); font-size: 9px; white-space: nowrap; }
.cn-oper-song > b.is-pending { color: var(--cn-warning); }
.cn-oper-song > b.is-demo { color: #92a8c7; }
.cn-oper-song > b svg { width: 12px; height: 12px; }
.cn-oper-meta { display: grid; min-width: 0; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.cn-oper-meta > span { display: grid; min-width: 0; grid-template-columns: 14px minmax(0,1fr); column-gap: 5px; align-content: start; color: #c5cdcb; font-size: 9px; line-height: 1.3; }
.cn-oper-meta svg { grid-row: 1 / 3; width: 12px; height: 12px; color: #7f8d8a; }
.cn-oper-meta b { display: block; color: #75827f; font-size: 8px; text-transform: uppercase; }
.cn-oper-instructions { display: grid; min-width: 0; max-height: 32px; grid-template-columns: 15px minmax(0,1fr); gap: 5px; overflow: hidden; color: #cbd2d0; }
.cn-oper-instructions.is-expanded { max-height: 150px; }
.cn-oper-instructions svg { width: 13px; height: 13px; margin-top: 2px; color: #958c88; }
.cn-oper-instructions p { margin: 0; font-size: 10px; line-height: 1.42; }
.cn-oper-now > footer, .cn-oper-next > footer, .cn-rundown-detail > footer { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 5px; }
.cn-oper-now footer button, .cn-oper-next footer button, .cn-rundown-detail footer button, .cn-next-primary > button { display: inline-flex; min-height: 27px; align-items: center; justify-content: center; gap: 4px; padding: 0 7px; border: 1px solid #3e4a48; border-radius: 3px; color: #aeb9b6; background: #121819; font-size: 9px; font-weight: 800; }
.cn-oper-now footer button:hover, .cn-oper-next footer button:hover, .cn-rundown-detail footer button:hover, .cn-next-primary > button:hover { border-color: #6a7976; color: #fff; }
.cn-oper-now footer button:disabled, .cn-oper-next footer button:disabled, .cn-rundown-detail footer button:disabled, .cn-next-primary > button:disabled { cursor: not-allowed; opacity: .42; }
.cn-oper-now footer button.is-primary, .cn-oper-next footer button.is-primary, .cn-rundown-detail footer button.is-primary { border-color: #47745e; color: #d8f4e1; background: #173025; }
.cn-oper-now footer button.is-executed, .cn-oper-next footer button.is-executed, .cn-rundown-detail footer button.is-executed { border-color: #5c665f; color: #c9d1ce; background: #202725; }
.cn-oper-now footer svg, .cn-oper-next footer svg, .cn-rundown-detail footer svg, .cn-next-primary > button svg { width: 12px; height: 12px; }
.cn-oper-now footer button.cn-reference-button, .cn-oper-next footer button.cn-reference-button, .cn-rundown-detail footer button.cn-reference-button { border-color: #754039; color: #f1aaa2; background: #281615; }

.youtube-preview-modal { width: min(1080px, calc(100vw - 28px)); max-height: min(820px, calc(100vh - 28px)); }
.youtube-preview-frame { display: grid; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; margin: 0; }
.youtube-browser-body { display: grid; min-height: 0; grid-template-columns: minmax(280px, 34%) minmax(0, 1fr); }
.youtube-browser-sidebar { display: flex; min-height: 0; flex-direction: column; padding: 14px; border-right: 1px solid #2d3839; background: #0d1213; }
.youtube-search-form, .youtube-url-form { display: grid; gap: 6px; }
.youtube-search-form label, .youtube-url-form label { color: #aab5b2; font-size: 9px; font-weight: 850; text-transform: uppercase; }
.youtube-search-form > div, .youtube-url-form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.youtube-search-form input, .youtube-url-form input { min-width: 0; height: 36px; padding: 0 10px; border: 1px solid #3a4645; border-right: 0; border-radius: 4px 0 0 4px; outline: 0; color: #eef3f1; background: #090d0e; font-size: 11px; }
.youtube-search-form input:focus, .youtube-url-form input:focus { border-color: #72c6b8; box-shadow: inset 0 0 0 1px #72c6b8; }
.youtube-search-form button, .youtube-url-form button { min-width: 40px; height: 36px; padding: 0 11px; border: 1px solid #4a625e; border-radius: 0 4px 4px 0; color: #ccece5; background: #17302c; font-size: 9px; font-weight: 850; }
.youtube-search-form button svg { width: 14px; height: 14px; }
.youtube-search-status { min-height: 30px; margin: 8px 0 4px; color: #899794; font-size: 9px; line-height: 1.4; }
.youtube-search-status.is-error { color: #f0a49b; }
.youtube-search-results { min-height: 92px; flex: 1 1 auto; overflow-y: auto; border-block: 1px solid #273130; }
.youtube-search-result { display: grid; width: 100%; min-height: 58px; grid-template-columns: 72px minmax(0, 1fr) 24px; align-items: center; gap: 9px; padding: 7px 3px; border: 0; border-bottom: 1px solid #222b2b; color: #e6ecea; background: transparent; text-align: left; }
.youtube-search-result:hover, .youtube-search-result.is-selected { background: #14201f; }
.youtube-search-result.is-selected { box-shadow: inset 3px 0 #72c6b8; }
.youtube-search-result img { width: 72px; aspect-ratio: 16 / 9; object-fit: cover; }
.youtube-search-result span { min-width: 0; }
.youtube-search-result strong, .youtube-search-result small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.youtube-search-result strong { font-size: 10px; }
.youtube-search-result small { margin-top: 4px; color: #899794; font-size: 8px; }
.youtube-search-result svg { width: 14px; height: 14px; color: #72c6b8; }
.youtube-search-empty { display: grid; min-height: 96px; place-items: center; gap: 8px; padding: 14px; color: #8c9996; font-size: 9px; text-align: center; }
.youtube-search-empty button { display: inline-flex; min-height: 32px; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid #754039; border-radius: 4px; color: #f1aaa2; background: #281615; font-size: 9px; font-weight: 850; }
.youtube-url-form { margin-top: 12px; }
.youtube-browser-preview { display: grid; min-width: 0; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; background: #050708; }
.youtube-preview-player { width: 100%; min-height: 260px; aspect-ratio: 16 / 9; background: #050708; }
.youtube-preview-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.youtube-preview-player iframe[hidden] { display: none; }
.youtube-candidate-meta { display: grid; min-width: 0; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid #273130; background: #0d1213; }
.youtube-candidate-meta img { width: 48px; aspect-ratio: 16 / 9; object-fit: cover; }
.youtube-candidate-meta span { min-width: 0; }
.youtube-candidate-meta strong, .youtube-candidate-meta small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.youtube-candidate-meta strong { color: #f1f5f4; font-size: 11px; }
.youtube-candidate-meta small { margin-top: 3px; color: #8f9c99; font-size: 9px; }
.youtube-preview-actions { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; border-top: 1px solid #2d3839; background: #101617; }
.youtube-preview-actions p { margin: 0; color: #93a09d; font-size: 10px; line-height: 1.4; }
.youtube-preview-actions > div { display: flex; flex: 0 0 auto; gap: 8px; }
.youtube-preview-actions button { display: inline-flex; min-height: 34px; flex: 0 0 auto; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid #754039; border-radius: 4px; color: #f1aaa2; background: #281615; font-size: 9px; font-weight: 850; }
.youtube-preview-actions button.is-primary { border-color: #47745e; color: #d8f4e1; background: #173025; }
.youtube-preview-actions button:disabled { cursor: not-allowed; opacity: .42; }
.youtube-preview-actions button svg { width: 13px; height: 13px; }
.youtube-api-modal { width: min(620px, calc(100vw - 28px)); padding: 0; overflow: hidden; border: 1px solid #354342; border-radius: 6px; color: #eef3f1; background: #0d1213; box-shadow: 0 28px 80px rgb(0 0 0 / 68%); }
.youtube-api-modal::backdrop { background: rgb(2 5 6 / 82%); }
.youtube-api-frame { display: grid; margin: 0; grid-template-rows: auto 1fr auto; }
.youtube-api-modal .engine-modal-head { display: flex; min-height: 64px; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #2d3839; }
.youtube-api-modal .engine-modal-head small { color: #72c6b8; font-size: 9px; font-weight: 850; text-transform: uppercase; }
.youtube-api-modal .engine-modal-head h2 { margin: 3px 0 0; color: #f2f5f4; font-size: 18px; }
.youtube-api-modal .dj-icon-button { display: grid; width: 36px; height: 36px; padding: 0; place-items: center; border: 1px solid #3a4645; border-radius: 4px; color: #aeb9b6; background: #141b1c; }
.youtube-api-modal .dj-icon-button svg { width: 16px; height: 16px; }
.youtube-api-content { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 20px; }
.youtube-api-icon { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #754039; border-radius: 5px; color: #f1aaa2; background: #281615; }
.youtube-api-icon svg { width: 22px; height: 22px; }
.youtube-api-content strong { display: block; font-size: 13px; }
.youtube-api-content p { margin: 6px 0 0; color: #94a19e; font-size: 11px; line-height: 1.5; }
.youtube-api-content label { display: grid; grid-column: 1 / -1; gap: 6px; margin-top: 4px; }
.youtube-api-content label span { color: #aeb8b6; font-size: 10px; font-weight: 850; text-transform: uppercase; }
.youtube-api-content input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #3c4a48; border-radius: 4px; outline: 0; color: #eef3f1; background: #080c0d; font: 12px ui-monospace, SFMono-Regular, Consolas, monospace; }
.youtube-api-content input:focus { border-color: #72c6b8; box-shadow: inset 0 0 0 1px #72c6b8; }
.youtube-api-content #youtube-api-status { grid-column: 1 / -1; min-height: 18px; margin: 0; color: #8fcac2; }
.youtube-api-content #youtube-api-status.is-error { color: #f0a49b; }
.youtube-api-actions { display: grid; min-height: 62px; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid #2d3839; background: #101617; }
.youtube-api-actions button { display: inline-flex; min-height: 36px; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid #455250; border-radius: 4px; color: #d2dad8; background: #161d1d; font-size: 10px; font-weight: 850; }
.youtube-api-actions button.is-primary { border-color: #47745e; color: #d8f4e1; background: #173025; }
.youtube-api-actions #youtube-api-clear { border-color: #754039; color: #f1aaa2; background: #281615; }
.youtube-api-actions button:disabled { cursor: wait; opacity: .5; }
.youtube-api-actions button svg { width: 14px; height: 14px; }
@media (max-width: 760px) {
  .youtube-preview-modal { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .youtube-browser-body { grid-template-columns: 1fr; overflow-y: auto; }
  .youtube-browser-sidebar { min-height: 300px; border-right: 0; border-bottom: 1px solid #2d3839; }
  .youtube-search-results { max-height: 190px; }
  .youtube-preview-player { min-height: 210px; }
  .youtube-preview-actions { align-items: stretch; flex-direction: column; gap: 8px; }
  .youtube-preview-actions > div { justify-content: flex-end; }
  .youtube-api-modal { width: calc(100vw - 16px); }
  .youtube-api-actions { grid-template-columns: 1fr 1fr; }
  .youtube-api-actions span { display: none; }
  .youtube-api-actions button { justify-content: center; }
}

.cn-oper-next { display: grid; gap: 7px; padding: 9px 11px; background: #0f1415; }
.cn-oper-next > header > span { color: var(--cn-b); }
.cn-next-primary { display: grid; min-width: 0; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 8px; }
.cn-next-primary img { width: 38px; height: 38px; border: 1px solid #4a5553; border-radius: 3px; object-fit: cover; }
.cn-next-primary > span { min-width: 0; }
.cn-next-primary strong, .cn-next-primary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-next-primary strong { color: #eef2f1; font-size: 12px; }
.cn-next-primary small { margin-top: 3px; color: #899693; font-size: 9px; }
.cn-next-primary > button { border-color: #4c6d63; color: #c9eee7; background: #162b27; }
.cn-oper-next .cn-oper-instructions:not(.is-expanded) { display: none; }

.cn-upcoming { min-height: 0; overflow: visible; }
.cn-upcoming-title { position: sticky; z-index: 3; top: 0; height: 32px; padding: 0 11px; background: #101516; box-shadow: 0 2px 6px rgba(0,0,0,.28); }
.cn-rundown-list { min-height: 0; }
.cn-rundown-item { display: block; min-height: 0; padding: 0; border-bottom: 1px solid #252d2e; background: #0b1011; outline: 0; }
.cn-rundown-item:hover { background: #101617; }
.cn-rundown-item.is-selected { box-shadow: inset 3px 0 var(--cn-a); background: #111b1a; }
.cn-rundown-summary { display: grid; min-height: 52px; grid-template-columns: 38px 31px minmax(0,1fr) auto 12px; align-items: center; gap: 7px; padding: 5px 9px; }
.cn-rundown-summary time { color: #c7cfcd; font-size: 10px; font-weight: 850; font-variant-numeric: tabular-nums; }
.cn-rundown-summary img { width: 31px; height: 31px; border: 1px solid #414b49; border-radius: 2px; object-fit: cover; }
.cn-rundown-summary > span { min-width: 0; }
.cn-rundown-summary strong, .cn-rundown-summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-rundown-summary strong { color: #e8eceb; font-size: 10px; }
.cn-rundown-summary small { margin-top: 3px; color: #7f8c89; font-size: 9px; }
.cn-rundown-summary > svg { width: 11px; height: 11px; color: #64716e; }
.cn-rundown-summary em { min-height: 20px; padding: 0 5px; font-size: 8px; }
.cn-rundown-detail { display: none; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding: 0 10px 9px 84px; }
.cn-rundown-item.is-expanded .cn-rundown-detail { display: grid; }
.cn-rundown-detail > span { min-width: 0; color: #aeb8b6; font-size: 9px; line-height: 1.35; }
.cn-rundown-detail > span b { display: block; margin-bottom: 2px; color: #687572; font-size: 8px; text-transform: uppercase; }
.cn-rundown-detail > p { grid-column: 1 / -1; margin: 0; color: #c5cdcb; font-size: 9px; line-height: 1.4; }
.cn-rundown-detail > footer { grid-column: 1 / -1; }

.cn-rundown.is-collapsed { overflow: visible; }
.cn-rundown.is-collapsed .cn-panel-title, .cn-rundown.is-collapsed .cn-rundown-progress, .cn-rundown.is-collapsed .cn-rundown-operational { display: none; }
.cn-rundown.is-collapsed .cn-rundown-head { display: grid; padding: 0; place-items: center; border-bottom: 0; }
.cn-rundown.is-collapsed .cn-rundown-collapse { grid-column: 1 / -1; }
.cn-rundown.is-collapsed::after { position: absolute; top: 76px; left: 17px; color: #7e8b88; content: "ESCALETA"; font-size: 9px; font-weight: 900; letter-spacing: 0; writing-mode: vertical-rl; }

@media (max-width:1599px) {
  .cn-workspace { grid-template-columns: minmax(0,1fr) 12px var(--cn-rundown-width,360px); }
  .cn-shell.is-rundown-collapsed .cn-workspace { grid-template-columns: minmax(0,1fr) 0 52px; }
  .cn-oper-now { gap: 7px; padding: 9px 10px; }
  .cn-oper-title h2 { font-size: 15px; }
  .cn-oper-song { grid-template-columns: 38px minmax(0,1fr) auto; padding: 5px 0; }
  .cn-oper-song img { width: 38px; height: 38px; }
  .cn-oper-next { padding: 8px 9px; }
  .cn-rundown-detail { padding-left: 77px; }
}

@media (max-height:760px) {
  .cn-rundown { grid-template-rows: 48px minmax(0,1fr); }
  .cn-rundown-head { padding-left: 8px; }
  .cn-rundown-head .cn-panel-title > span { width: 27px; height: 27px; }
  .cn-panel-title div span { font-size: 9px; }
  .cn-panel-title div strong { font-size: 11px; }
  .cn-rundown-progress { font-size: 9px; }
  .cn-rundown-progress b { font-size: 10px; }
  .cn-oper-now { gap: 6px; padding-top: 7px; padding-bottom: 7px; }
  .cn-oper-meta { gap: 3px; }
  .cn-oper-instructions { max-height: 29px; }
  .cn-oper-instructions.is-expanded { max-height: 88px; }
  .cn-oper-next { gap: 5px; padding-top: 6px; padding-bottom: 6px; }
  .cn-upcoming-title { height: 29px; }
  .cn-rundown-summary { min-height: 47px; }
}