:root { color-scheme: dark; --bg:#090b0f; --panel:#151922; --panel-2:#1c2230; --ink:#f7f8fb; --muted:#a9b2c3; --accent:#f4b942; --danger:#f46b6b; --line:rgba(255,255,255,.14); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font:16px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; border:0; border-radius:.55rem; padding:.72rem 1rem; background:var(--panel-2); color:var(--ink); }
button:hover, button:focus-visible { background:#29334a; outline:2px solid var(--accent); outline-offset:2px; }
.button-primary { background:var(--accent); color:#191300; font-weight:700; }
.button-danger { background:#54242a; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.notice { border:1px solid var(--line); border-radius:.65rem; padding:.8rem 1rem; color:var(--muted); }
.error { color:#ffc1c1; }

/* Viewer */
.viewer { min-height:100svh; display:grid; grid-template-rows:1fr auto; overflow:hidden; }
.stage { min-height:0; position:relative; display:grid; place-items:center; background:#050609; }
.slide { position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:opacity var(--transition,500ms) ease; pointer-events:none; }
.slide.active { opacity:1; }
.slide img { width:100%; height:100%; object-fit:contain; }
.chapter { background:radial-gradient(circle at 50% 35%,#28334a 0,#10141d 48%,#06070a 100%); padding:2rem; text-align:center; }
.chapter h1 { max-width:15ch; margin:0; font-size:clamp(2rem,7vw,6rem); line-height:1.08; font-weight:600; }
.chapter p { color:var(--muted); letter-spacing:.14em; text-transform:uppercase; }
.missing { max-width:34rem; text-align:center; color:var(--muted); padding:2rem; }
.photo-meta { position:absolute; left:clamp(1rem,3vw,3rem); bottom:clamp(1rem,4vw,4rem); text-shadow:0 1px 5px #000; font-size:clamp(.8rem,1.5vw,1rem); text-align:left; }
.photo-meta strong,.photo-meta span { display:block; }
.viewer-controls { padding:.8rem clamp(1rem,3vw,2rem); background:rgba(9,11,15,.97); display:grid; grid-template-columns:repeat(5,auto) minmax(5rem,1fr) auto auto; gap:.7rem; align-items:center; }
.viewer-controls button { min-height:2.8rem; white-space:nowrap; }
.start-button { z-index:2; font-size:clamp(1.1rem,2vw,1.4rem); padding:1rem 1.5rem; }
.progress-wrap { min-width:5rem; }
.progress-line { height:.3rem; border-radius:10px; background:#313948; overflow:hidden; }
.progress-line > span { display:block; height:100%; width:0; background:var(--accent); transition:width .25s; }
.progress-label { display:block; margin-top:.25rem; color:var(--muted); font-size:.8rem; text-align:center; }
.decision-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.45rem; margin:.8rem 0; }
.decision-summary span { padding:.5rem .35rem; border:1px solid var(--line); border-radius:.45rem; background:#0d1016; text-align:center; font-size:.78rem; color:var(--muted); }
.decision-summary strong { display:block; color:var(--ink); font-size:1rem; }
.volume { display:flex; gap:.5rem; align-items:center; color:var(--muted); font-size:.85rem; }
.volume input { accent-color:var(--accent); width:min(15vw,140px); }
.viewer-status { text-align:right; color:var(--muted); font-size:.82rem; }

/* Curator */
.curator { width:100%; height:100svh; display:grid; grid-template-columns:minmax(0,7fr) minmax(300px,3fr); overflow:hidden; }
.preview { min-width:0; height:100svh; position:relative; background:#050609; overflow:hidden; }
.preview img, .preview video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; }
.preview [hidden] { display:none; }
.curator-panel { min-width:0; height:100svh; position:relative; z-index:1; padding:clamp(1rem,3vw,2rem); background:var(--panel); overflow:auto; }
.curator-panel h1 { margin-top:0; font-size:1.5rem; }
.import-panel { margin:0 0 1rem; border:1px solid var(--line); border-radius:.55rem; padding:.65rem .8rem; }
.import-panel summary { cursor:pointer; font-weight:600; }
.curator-panel label { display:block; margin:1rem 0 .3rem; font-size:.85rem; color:var(--muted); }
.curator-panel input:not([type="checkbox"]), .curator-panel textarea, .curator-panel select { width:100%; color:var(--ink); background:#0d1016; border:1px solid var(--line); border-radius:.45rem; padding:.65rem; }
.curator-panel textarea { min-height:5rem; resize:vertical; }
.action-row,.nav-row,.file-row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.choice[data-choice="keep"] { background:#39593f; }.choice[data-choice="skip"] { background:#54242a; }.choice.selected { outline:2px solid var(--accent); }
.check-label { display:flex !important; align-items:center; gap:.5rem; color:var(--ink) !important; }
.small { font-size:.8rem; color:var(--muted); }.hidden { display:none; }
@media (max-width: 900px) { .curator { height:auto; grid-template-columns:1fr; overflow:visible; }.preview { height:42svh; }.curator-panel { height:auto; overflow:visible; }.viewer-controls { grid-template-columns:repeat(3,1fr); }.viewer-controls button { font-size:.9rem; }.progress-wrap { grid-column:1 / -1; }.volume { grid-column:1 / -1; }.volume input { width:100%; }.viewer-status { display:none; } }

/* Storyboard organizer */
.organizer { min-height:100vh; background:#0b0e14; }
.organizer-toolbar { position:sticky; top:0; z-index:10; padding:1rem clamp(1rem,3vw,2rem); border-bottom:1px solid var(--line); background:rgba(15,18,26,.96); backdrop-filter:blur(12px); }
.organizer-toolbar h1 { margin:0 0 .25rem; font-size:1.5rem; }
.organizer-toolbar p { margin:.2rem 0; }
.organizer-actions { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:.8rem; }
.organizer-actions select { min-width:12rem; padding:.68rem; border:1px solid var(--line); border-radius:.5rem; color:var(--ink); background:#0d1016; }
.selection-tools { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; padding:.35rem .45rem; border:1px solid var(--line); border-radius:.6rem; }
.selection-tools > span { color:var(--muted); font-size:.82rem; }
.storyboard { padding:1.25rem clamp(1rem,3vw,2rem) 5rem; }
.chapter-board { margin:0 0 1.5rem; border:1px solid var(--line); border-radius:.8rem; background:var(--panel); overflow:hidden; }
.chapter-header { display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; padding:.8rem; border-bottom:1px solid var(--line); background:#171c27; }
.chapter-header input { min-width:16rem; flex:1; padding:.62rem .7rem; color:var(--ink); border:1px solid var(--line); border-radius:.45rem; background:#0d1016; font-weight:700; }
.chapter-count { color:var(--muted); font-size:.85rem; }
.chapter-grid { min-height:9rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:.65rem; padding:.75rem; }
.chapter-grid.drag-over { outline:3px solid var(--accent); outline-offset:-5px; background:#23202a; }
.media-card { position:relative; min-width:0; border:1px solid var(--line); border-radius:.55rem; overflow:hidden; background:#0d1016; cursor:grab; }
.media-card.selected { outline:3px solid var(--accent); }
.media-card.dragging { opacity:.35; }
.media-card-media { width:100%; aspect-ratio:4/3; display:block; object-fit:cover; background:#050609; pointer-events:none; }
.media-card-controls { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--line); background:#171c27; }
.media-card-controls button,.media-card-insert,.media-card-select { display:grid; place-items:center; width:100%; min-width:0; aspect-ratio:1; margin:0; padding:0; border:0; border-right:1px solid var(--line); border-radius:0; color:var(--ink); font-size:1.05rem; line-height:1; background:#171c27; }
.media-card-controls > :last-child { border-right:0; }
.media-card-controls button:hover,.media-card-select:hover { background:#253149; }
.media-card-controls button:disabled { cursor:default; color:#697286; background:#11151e; }
.media-card-check { width:1.2rem; height:1.2rem; margin:0; accent-color:var(--accent); }
.media-card-view { font-size:1rem; }
.media-card-insert { font-size:1.35rem; font-weight:700; }
.media-card-secondary { position:absolute; top:.35rem; right:.35rem; z-index:4; font-size:.9rem; }
.media-preview-dialog { max-width:min(94vw,1100px); max-height:92vh; padding:.8rem; background:var(--panel); color:var(--ink); border:1px solid var(--line); }
.media-preview-dialog::backdrop { background:#000c; }
.media-preview-dialog img,.media-preview-dialog video { display:block; max-width:88vw; max-height:78vh; width:auto; height:auto; object-fit:contain; margin-bottom:.7rem; }
.media-type { position:absolute; top:.4rem; left:.4rem; z-index:3; padding:.18rem .4rem; border-radius:1rem; background:rgba(0,0,0,.72); font-size:.7rem; }
.empty-chapter { display:grid; place-items:center; min-height:7rem; color:var(--muted); border:1px dashed var(--line); border-radius:.5rem; }
.organizer-status { color:#d5dded; }
.music-panel { margin-top:.8rem; border:1px solid var(--line); border-radius:.55rem; padding:.65rem .75rem; }
.music-panel h2 { margin:0; font-size:1rem; }
.music-controls { display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; margin-top:.7rem; }
.music-controls label { display:flex; align-items:center; gap:.5rem; margin:0; }
.music-controls input[type="range"] { accent-color:var(--accent); }
@media (max-width:700px) { .chapter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.organizer-actions > * { flex:1 1 auto; }.chapter-header input { min-width:0; flex-basis:100%; } }

.chapter-grid[hidden] { display:none; }
.music-controls .button { padding:.65rem; border-radius:.5rem; cursor:pointer; }
.story-dialog { background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:.8rem; max-width:560px; width:90vw; max-height:85vh; }
.story-dialog::backdrop { background:#000a; }
.story-dialog label { display:block; margin:.65rem 0; }
.story-dialog input:not([type=file]),.story-dialog select,.story-dialog textarea { display:block; width:100%; padding:.5rem; background:var(--bg); color:var(--ink); border:1px solid var(--line); }
.interlude-thumbnail { aspect-ratio:4/3; display:grid; place-items:center; padding:1rem; text-align:center; }
.slide video { width:100%; height:100%; object-fit:contain; }
.slide.interlude { background:var(--panel); text-align:center; }
.story-text { position:absolute; z-index:1; padding:2rem; text-align:center; text-shadow:0 2px 6px #000; }
.story-text h1 { font-size:clamp(2rem,6vw,5rem); }
.story-dialog [hidden] { display:none; }