:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1f2937;
  background: #f3f5f7;
}

* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 940px; margin: 0 auto; min-height: 100vh; padding: 38px 24px 90px; }
header, .section-title { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 34px; letter-spacing: -1px; }
h2 { margin-bottom: 22px; }
h3 { margin-bottom: 0; }
.eyebrow { margin-bottom: 4px; color: #8c6a23; font-size: 12px; font-weight: 800; letter-spacing: 1.6px; }
nav { display: flex; gap: 6px; margin: 34px 0 18px; border-bottom: 1px solid #d9dee5; }
button { border: 0; border-radius: 8px; padding: 10px 15px; background: #b58b32; color: white; font: inherit; font-weight: 700; cursor: pointer; }
button.secondary { background: white; color: #374151; border: 1px solid #d7dce2; }
button.tab { border-radius: 8px 8px 0 0; background: transparent; color: #6b7280; }
button.tab.active { color: #8c6a23; border-bottom: 3px solid #b58b32; }
.panel { display: none; background: white; border: 1px solid #e0e4e8; border-radius: 12px; padding: 28px; box-shadow: 0 4px 18px rgb(24 35 52 / 5%); }
.panel.active { display: block; }
label { display: block; margin: 18px 0 7px; font-size: 13px; font-weight: 750; }
input, select, textarea { width: 100%; border: 1px solid #cfd6de; border-radius: 7px; padding: 10px 11px; background: white; font: inherit; }
.readonly { padding: 11px; border-radius: 7px; background: #f5f6f7; color: #596273; }
.card { margin-top: 14px; padding: 18px; border: 1px solid #e1e5ea; border-radius: 9px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid label { margin-top: 0; }
.wide { grid-column: 1 / -1; }
.danger { color: #9d2929; background: transparent; padding-left: 0; }
.compact { padding: 6px 9px; font-size: 12px; }
#notice { min-height: 22px; color: #8c6a23; }
footer { position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding-top: 20px; }
.status { text-transform: capitalize; color: #8c6a23; font-weight: 750; }
.video-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.muted { color: #6b7280; font-size: 14px; }

.pipeline-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.pipe-card { overflow: hidden; border: 1px solid #dfe4e9; border-radius: 14px; background: #f8fafb; }
.pipe-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 17px 18px 14px; background: white; border-bottom: 1px solid #e5e9ed; }
.pipe-header h3 { font-size: 16px; line-height: 1.25; }
.window-badge { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: #795916; background: #fbf2dc; font-size: 11px; font-weight: 800; letter-spacing: .25px; }
.pipe-shell { position: relative; width: calc(100% - 42px); margin: 0 auto; border-right: 2px solid #cfd6dc; border-left: 2px solid #cfd6dc; background: #f4f7f8; }
.pipe-section { padding: 14px; }
.pipe-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; color: #657080; font-size: 11px; font-weight: 800; letter-spacing: .65px; text-transform: uppercase; }
.pipe-count { color: #8c6a23; }
.queue-stack { display: flex; min-height: 112px; max-height: 252px; padding-right: 4px; flex-direction: column-reverse; justify-content: flex-start; gap: 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.queue-stack:focus-visible { outline: 2px solid #b58b32; outline-offset: 3px; }
.queue-empty { display: grid; min-height: 94px; place-items: center; color: #9aa3ae; font-size: 13px; }
.video-ball { position: relative; padding: 10px 11px 10px 32px; border: 1px solid #d9dfe4; border-radius: 10px; background: white; box-shadow: 0 2px 5px rgb(24 35 52 / 5%); }
.video-ball::before { position: absolute; top: 14px; left: 12px; width: 10px; height: 10px; border-radius: 50%; background: #b58b32; content: ""; }
.video-ball strong { display: block; overflow: hidden; font-size: 13px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.video-meta { margin-top: 4px; color: #7a8490; font-size: 11px; }
.video-ball .video-actions { margin-top: 8px; justify-content: flex-start; }
.pipe-gate { position: relative; height: 13px; margin: 0 -10px; border: 1px solid #9aa5ae; border-radius: 4px; background: #cbd2d8; box-shadow: inset 0 0 0 3px #e8ecef; }
.pipe-gate::before, .pipe-gate::after { position: absolute; top: 4px; width: 10px; height: 3px; background: #737e87; content: ""; }
.pipe-gate::before { left: -9px; }
.pipe-gate::after { right: -9px; }
.gate-label { padding: 7px 0; color: #818b95; font-size: 10px; font-weight: 750; letter-spacing: .45px; text-align: center; text-transform: uppercase; }
.scheduled-chamber { min-height: 151px; padding: 14px; background: #fffaf0; }
.scheduled-chamber .video-ball { border-color: #d9bd7a; box-shadow: 0 3px 10px rgb(140 106 35 / 10%); }
.scheduled-chamber .video-ball::before { background: #3f8a62; }
.slot-empty { display: grid; min-height: 91px; place-items: center; border: 1px dashed #d6c79f; border-radius: 10px; color: #a08f66; font-size: 13px; text-align: center; }
.lower-gate { background: #b58b32; border-color: #8c6a23; box-shadow: inset 0 0 0 3px #d6b66f; }
.lower-gate::before, .lower-gate::after { background: #795916; }
.lower-gate.gate-locked { background: #6f7780; border-color: #555e67; box-shadow: inset 0 0 0 3px #aeb5bc; }
.lower-gate.gate-locked::before, .lower-gate.gate-locked::after { background: #414850; }
.lower-gate.gate-uncertain { background: #b66f42; border-color: #8d4f2c; box-shadow: inset 0 0 0 3px #d9a17d; }
.lower-gate.gate-uncertain::before, .lower-gate.gate-uncertain::after { background: #754024; }
.daily-rule { padding: 12px 18px 15px; color: #6b7280; background: white; font-size: 12px; text-align: center; }
.pipeline-secondary { margin-top: 26px; }
.pipeline-secondary h3 { margin-bottom: 6px; }
.video-list-simple { border-top: 1px solid #e2e6ea; }
.video-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 15px 0; border-bottom: 1px solid #e7eaee; }
.attention-list .video-row { padding: 12px 14px; border: 1px solid #ecd8d8; border-radius: 9px; background: #fffafa; margin-top: 8px; }
.attention-list .status { color: #9d2929; }

@media (max-width: 720px) {
  .pipeline-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
  .wide { grid-column: auto; }
  main { padding: 24px 14px 70px; }
  .panel { padding: 20px 16px; }
  .video-row { grid-template-columns: 1fr; }
  .video-actions { justify-content: flex-start; }
}