/* Focused upload and visual review layout. */
.setup-body .vg-hero { padding-top: 28px; padding-bottom: 22px; }
.setup-body .vg-hero h1 { font-size: clamp(28px, 4vw, 46px); }
.setup-body .vg-tags { display: none; }
.setup-body .wizard-card { max-width: 900px; margin: auto; }
.setup-body .setup-shell { padding-top: 0; }
.setup-body .drop-zone { min-height: 132px; }
.studio-body .vg-nav-studio { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
.studio-body .vg-nav-actions { flex-wrap: wrap; gap: 8px; min-width: 0; }
.studio-body .studio-shell.app-shell { grid-template-columns: 270px minmax(0, 1fr) 240px; grid-template-rows: minmax(0, 1fr) minmax(240px, 34vh); }
.studio-body .studio-monitor-area { min-width: 0; overflow: auto; }
.monitor-tools { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; font-size: 12px; color: #bcb7cb; }
.studio-body .dual-monitor-row { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; width: 100%; max-width: min(100%, calc((52vh - 100px) * 16 / 9)); }
.studio-body:not(.show-source) .source-pane { display: none; }
.studio-body.show-source .dual-monitor-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); max-width: 100%; }
.studio-body .monitor-pane { min-width: 0; }
.studio-body .monitor-transport-bar { flex-wrap: wrap; min-width: 0; }
.studio-body .studio-timeline-area .timeline-scroller { overflow: auto; }
.visual-review-section h3 { font-size: 12px; margin: 16px 0 8px; }
#visualSummary { line-height: 1.6; }
.visual-review-row { display: flex; flex-direction: column; width: 100%; gap: 8px; text-align: left; white-space: normal; padding: 12px; margin: 10px 0; border: 1px solid #393348; border-radius: 10px; background: #1b1824; color: #eae6f3; cursor: pointer; font-size: 12px; line-height: 1.5; }
.visual-review-row:hover, .visual-review-row:focus-visible { border-color: #ac8bfa; background: #252033; }
.visual-review-row img { width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #08070b; border-radius: 6px; }
.visual-review-row small { color: #bcb5cd; }
.visual-review-row.needs-review small { color: #edc98e; }
@media (max-width: 1100px) {
 .studio-body { height: auto; overflow: auto; }
 .studio-body .studio-shell.app-shell { display: grid; height: auto; overflow: visible; grid-template-columns: minmax(0, 1fr) 260px; grid-template-rows: auto 280px auto; grid-template-areas: "monitor left" "timeline left" "right right"; }
 .studio-body .bin-left { max-height: 750px; overflow: hidden; }
 .studio-body .bin-right { max-height: 460px; }
 .studio-body .dual-monitor-row { max-width: 100%; }
 .studio-body .studio-monitor-area { overflow: visible; }
}
@media (max-width: 700px) {
 .studio-body .studio-shell.app-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 280px auto auto; grid-template-areas: "monitor" "timeline" "left" "right"; }
 .studio-body .bin-left { max-height: 480px; }
 .studio-body.show-source .dual-monitor-row { grid-template-columns: minmax(0, 1fr); }
 .studio-body .vg-nav-seq { max-width: 150px; }
 .studio-body .toolbar-select { max-width: 170px; }
 .setup-body .vg-nav { padding: 12px; }
}

.setup-body .wizard-steps[hidden] { display: none !important; }
@media (max-width: 1100px) {
 .vg-page.studio-body .studio-shell.app-shell { flex: none; height: auto; grid-template-rows: auto 280px 420px; }
 .studio-body .studio-monitor-area { min-height: min-content; }
 .studio-body .bin-left { height: 780px; }
 .studio-body .bin-right { height: 420px; }
}
@media (max-width: 700px) {
 .vg-page.studio-body .studio-shell.app-shell { grid-template-rows: auto 280px 480px 420px; }
 .studio-body .bin-left { height: 480px; }
}

.assembly-complete .fetch-steps { display: none; }
@media (max-width: 1100px) {
 .studio-body .vg-nav-studio .vg-nav-actions { display: flex; flex-wrap: wrap; width: 100%; max-width: 100%; }
}

/* Studio workspace: preserve the violet palette, give the canvas priority. */
.studio-body .studio-shell.app-shell { grid-template-columns: 292px minmax(0, 1fr) 230px; grid-template-rows: minmax(0, 1fr) minmax(220px, 31vh); }
.studio-body .dual-monitor-row { max-width: min(100%, calc((61vh - 140px) * 16 / 9)); }
.studio-body .bin-header { position: sticky; top: 0; z-index: 2; background: var(--panel); }
.studio-body .bin-scroll { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.visual-readiness { border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.visual-readiness.has-gaps { color: #f1c78b; border-color: #77552b; background: #2b2119; }
.review-filters { display: flex; gap: 5px; margin: 12px 0; }
.review-filters button { flex: 1; padding: 8px 5px; font-size: 11px; border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 7px; cursor: pointer; }
.review-filters button[aria-pressed="true"] { background: var(--panel-2); border-color: var(--accent); color: var(--text); }
.visual-review-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 6px 9px; padding: 10px; margin: 8px 0; background: var(--panel); }
.visual-review-row strong { grid-column: 1 / -1; font-size: 10px; font-variant-numeric: tabular-nums; color: var(--muted); }
.visual-review-row img { grid-column: 1; width: 76px; align-self: start; }
.visual-review-row span { grid-column: 2; font-size: 11px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.visual-review-row:not(:has(img)) span { grid-column: 1 / -1; }
.visual-review-row small { grid-column: 1 / -1; font-size: 10px; overflow-wrap: anywhere; }
.visual-review-row.missing-visual { border-style: dashed; border-color: #77552b; background: #221c18; }
.visual-review-row.missing-visual small { color: #f1c78b; }
.studio-body.hide-inspector .bin-right { display: none; }
@media (min-width: 1101px) {
 .studio-body.hide-inspector .studio-shell.app-shell { grid-template-columns: 292px minmax(0, 1fr); grid-template-areas: "left monitor" "left timeline"; }
}
@media (max-width: 1100px) and (min-width: 701px) {
 .studio-body .studio-shell.app-shell { grid-template-columns: minmax(0, 1fr) 270px; }
 .studio-body .dual-monitor-row { max-width: 100%; }
 .studio-body.hide-inspector .studio-shell.app-shell { grid-template-rows: auto 280px; }
}
@media (max-width: 700px) {
 .studio-body .studio-shell.app-shell { grid-template-columns: minmax(0, 1fr); }
 .studio-body .dual-monitor-row { max-width: 100%; }
 .studio-body.hide-inspector .studio-shell.app-shell { grid-template-rows: auto 280px 480px; }
}
@media (prefers-reduced-motion: reduce) {
 .studio-body::before, .studio-body::after { animation: none; }
}

#previewStage.archival-frame { background-color: #131722; background-image: linear-gradient(#303744 1px, transparent 1px), linear-gradient(90deg, #303744 1px, transparent 1px); background-size: 3.333% 5.926%; }
#previewStage.archival-frame #previewBlurBg { display: none !important; }
#previewStage.archival-frame #previewVideo, #previewStage.archival-frame #previewVideoB { width: var(--archive-width) !important; height: var(--archive-height) !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; object-fit: contain !important; border: 3px solid white; box-sizing: content-box; border-radius: 0; }

#archivalGridBg { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
#previewStage.archival-frame #archivalGridBg { display: block; }
#previewStage.archival-frame #previewVideo, #previewStage.archival-frame #previewVideoB { z-index: 1; }