/* Creation workspace. Loaded last so the stage and export renderer keep their own styles. */
:root { --bg-dark:#101719; --bg-card:#182225; --bg-surface:#202d30; --border-color:#344246; --text-main:#f1f2ed; --text-muted:#aab8ba; --primary:#e9bd7b; --primary-hover:#f4d29f; --font-family:"Segoe UI",Arial,sans-serif; }
body { background:#101719; font-family:var(--font-family); }
button,input,select,textarea { font-family:inherit; }
button { touch-action:manipulation; }
.site-header { position:relative; padding:18px 32px; background:#141d20; border-color:#ffffff12; gap:18px; }
.brand-icon { border-radius:12px; background:#e9bd7b12; border-color:#e9bd7b40; flex-shrink:0; }
.brand-title { font-size:18px; letter-spacing:-.6px; }
.brand-badge-pro { background:#263438; color:#b8c9ca; box-shadow:none; font-size:9px; letter-spacing:1px; }
.brand-subtitle { font-size:11px; color:#9baeb0; }
.header-center-hero { margin-left:auto; }
.btn-ai-hero-pill,.btn-ai-hero-pill:hover { border:1px solid #59615b; background:#e9bd7b0d; box-shadow:none; border-radius:8px; transform:none; padding:10px 14px; }
.ai-hero-sparkle { animation:none; }
.header-actions { gap:7px; }
#btn-header-play-show,#btn-header-stop-show,#btn-audience-header { display:none!important; }
.btn,.btn-icon,.btn-toggle { min-height:36px; font-size:12px; }
.btn.btn-success,.btn-header-export,.btn-header-export:hover { background:var(--primary); color:#202724; border:1px solid var(--primary); box-shadow:none; }
.btn:hover { transform:none; }
.btn-outline { background:#ffffff03; border-color:#ffffff20; }
.studio-quickstart-banner { width:calc(100% - 64px); max-width:1536px; margin:28px auto 0; padding:28px 32px; background:linear-gradient(110deg,#f1eee5,#e4e8dc); border:0; border-radius:16px; box-shadow:none; gap:36px; }
.studio-quickstart-banner::before { display:none; }
.quickstart-badge { background:none; border:0; padding:0; color:#667568; font-size:9px; letter-spacing:1.8px; margin-bottom:10px; }
.quickstart-title { color:#233932; font-size:clamp(26px,2.6vw,38px); letter-spacing:-1px; line-height:1.18; margin-bottom:10px; }
.quickstart-title em { font-weight:400; color:#69735a; }
.quickstart-desc { color:#53635c; font-size:13px; line-height:1.7; max-width:640px; }
.quickstart-right { max-width:440px; gap:16px; }
.btn-quickstart-hero-cta,.btn-quickstart-hero-cta:hover { background:#244d40; color:white; box-shadow:none; border-radius:9px; padding:14px 22px; transform:none; }
.cta-title,.cta-sub { color:#fff; }
.cta-title { font-weight:600; }
.cta-sub { margin-top:4px; font-size:11px; color:#c5dbcf; }
.cta-sparkle { font-size:24px; }
.presets-row-label { width:100%; text-align:right; color:#59675e; font-size:10px; }
.preset-pill-btn { background:#ffffff66; border-color:#65786944; color:#3e5146; font-size:11px; padding:6px 10px; min-height:32px; }
.preset-pill-btn:hover { color:#183c2d; background:#fff; border-color:#657869; transform:none; }
.creator-workflow { max-width:1536px; width:calc(100% - 64px); margin:20px auto 24px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-bottom:1px solid #ffffff16; }
.creator-workflow button { text-align:left; background:none; color:#e3e8e5; border:0; padding:12px 18px 18px; cursor:pointer; display:grid; grid-template-columns:32px 1fr; column-gap:10px; row-gap:3px; }
.creator-workflow button:hover { background:#ffffff04; }
.creator-workflow span { grid-row:span 2; align-self:center; color:var(--primary); font-size:11px; border:1px solid #e9bd7b35; border-radius:50%; width:28px; height:28px; display:grid; place-items:center; }
.creator-workflow strong { font-size:12px; font-weight:600; }
.creator-workflow small { color:var(--text-muted); font-size:11px; }
.studio-layout,.studio-layout.layout-stacked { max-width:1600px; padding:0 32px; margin:0 auto 48px; width:100%; }
.studio-layout.layout-split { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:24px; }
.studio-stage-column,.studio-workspace-column { width:100%; min-width:0; }
.studio-layout.layout-split .studio-stage-column { top:20px; }
.stage-section { background:#182225; border:1px solid #ffffff18; padding:20px; border-radius:14px; box-shadow:0 12px 32px #0002; }
.stage-toolbar { gap:14px; margin-bottom:16px; }
.show-info-group { flex-basis:100%; }
.eyebrow { color:#9cacaa; font-size:9px; letter-spacing:1.7px; }
.input-show-title[type=text] { font-family:inherit; font-size:21px; font-weight:600; width:100%; letter-spacing:-.6px; }
.stage-playback-controls { width:100%; gap:8px; flex-wrap:wrap; }
#btn-open-video-export { display:none; }
#btn-play-show { min-width:112px; }
#btn-audience { margin-left:auto; }
body:not(.audience-view) .theatre-stage { height:clamp(310px,31vw,440px); border-color:#ffffff26; }
.performance-bar { padding:14px 0; gap:12px; }
.performance-status { width:100%; font-size:11px; }
.performance-actions { gap:6px; }
.performance-actions .btn { font-size:10px; padding:5px 8px; min-height:32px; }
#btn-audience-bar { display:none; }
.stage-settings-bar { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:18px; }
.setting-item:last-child { grid-column:1 / -1; }
.setting-item { min-width:0; }
.setting-item select { font-size:12px; padding:10px; text-overflow:ellipsis; }
.editor-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:2px 0 4px; }
.editor-heading h2 { font-size:23px; font-weight:500; letter-spacing:-.7px; margin-top:4px; }
.studio-tabs { gap:22px; margin:0; border-bottom:1px solid #ffffff1c; }
.tab-btn { font-size:12px; padding:12px 0; white-space:nowrap; }
.tab-btn.active { background:transparent; border-bottom:2px solid var(--primary); }
.timeline-container { padding:18px; background:#172124; border:1px solid #ffffff14; border-radius:12px; }
.timeline-header { gap:10px; flex-wrap:wrap; margin-bottom:16px; padding-bottom:16px; }
.timeline-header > div { flex-wrap:wrap; }
.timeline-summary { font-size:11px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.badge-lines { background:#e9bd7b1a; color:var(--primary); font-size:10px; padding:4px 9px; }
.timeline-scene-divider { margin:8px 0 0; padding:12px; background:#263235; border:1px solid #ffffff13; border-left:2px solid var(--primary); }
.scene-badge { font-size:12px; }
.scene-meta { font-size:10px; }
.line-card { padding:16px; border:1px solid #ffffff19; background:#1e2b2f; border-radius:10px; }
.line-card.speaker-left { border-left:3px solid #79a9b1; }
.line-card.speaker-right { border-left:3px solid #b59bc9; }
.line-card.playing-now { transform:none; box-shadow:0 0 0 2px #e9bd7b22; }
.line-card-header { gap:10px; flex-wrap:wrap; }
.speaker-pill { flex-wrap:wrap; gap:3px 6px; }
.speaker-name { font-size:12px; }
.speaker-pos { font-size:10px; }
.line-actions { margin-left:auto; }
.line-num { background:#ffffff08; color:#bdc9c9; }
.line-card-body .form-row { gap:12px; }
.form-group { min-width:0; }
.form-group label { font-size:11px; font-weight:500; }
.col-speaker,.col-mode { flex:1 1 200px; }
.input-text,.line-card textarea { background:#121e21; border-color:#3b4b4f; font-size:13px; padding:12px; line-height:1.75; }
select,input[type=text],input[type=number] { background:#142023; border-color:#3b4b4f; min-height:36px; }
input[type=range] { min-width:0; width:100%; accent-color:var(--primary); }
.btn-toggle { background:#152125; font-size:11px; padding:7px 8px; }
.btn-toggle.active { background:#d9be91; }
.audio-panel,.tts-settings-row { background:#172326; border-color:#3b4b4f; }
.audio-player-box,.audio-buttons { flex-wrap:wrap; min-width:0; }
.inline-audio-player { max-width:100%; }
.tts-settings-row { flex-wrap:wrap; gap:12px; }
.tts-field { min-width:180px; flex:1 1 180px; }
.tts-field label { min-width:100px; font-size:11px; }
.cues-header { gap:10px; flex-wrap:wrap; font-size:11px; }
.cue-chip { font-size:10px; background:#ffffff04; border-color:#ffffff1c; gap:6px; flex-wrap:wrap; }
.cue-del-btn { min-width:24px; min-height:24px; }
.live-controls-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.modal { backdrop-filter:blur(8px); }
.modal-content { border-color:#4a5b5b; box-shadow:0 32px 100px #0008; }
.modal-header h3 { font-size:18px; }
.modal-close { min-width:36px; min-height:36px; }
.modal-footer { flex-wrap:wrap; gap:12px; }
.storyboard-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); }
.studio-workspace-split > *, .studio-import-split > * { min-width:0; }
.toast { background:#d9e8da; color:#203e30; border:1px solid #a4bea7; font-size:13px; max-width:calc(100vw - 32px); }
:is(button,input,select,textarea,summary,a):focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
body.audience-view .creator-workflow { display:none; }
@media(min-width:1081px) and (max-width:1250px) { .header-center-hero { display:none; } }
@media(max-width:1080px) { .site-header { padding:16px 24px; } .studio-layout.layout-split { display:flex; } .studio-layout { padding:0 24px; } .studio-quickstart-banner,.creator-workflow { width:calc(100% - 48px); } .studio-quickstart-banner { gap:24px; } .studio-stage-column { position:static; } .stage-settings-bar { grid-template-columns:repeat(3,minmax(0,1fr)); } .setting-item:last-child { grid-column:auto; } .studio-workspace-column { margin-top:8px; } }
@media(max-width:700px) { .site-header { gap:14px; padding:16px; } .brand-title-row { flex-wrap:wrap; } .header-center-hero { display:none; } .header-actions { width:100%; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; } .header-actions > .btn,.header-dropdown-wrap > .btn { width:100%; padding:8px 4px; font-size:11px; min-height:40px; } .studio-quickstart-banner { width:calc(100% - 24px); margin-top:16px; padding:22px; gap:20px; } .quickstart-title { font-size:30px; } .quickstart-right { align-items:stretch; max-width:none; } .btn-quickstart-hero-cta { justify-content:center; } .presets-row-label { text-align:left; } .quickstart-presets-row { justify-content:flex-start; gap:6px; } .creator-workflow { width:calc(100% - 24px); margin:12px auto 18px; } .creator-workflow button { padding:10px 4px 14px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; } .creator-workflow strong { font-size:10px; } .creator-workflow small { display:none; } .studio-layout,.studio-layout.layout-stacked { padding:0 12px; } .stage-section { padding:14px; } .stage-settings-bar { grid-template-columns:repeat(2,minmax(0,1fr)); } .setting-item:last-child { grid-column:1 / -1; } .editor-heading h2 { font-size:21px; } .studio-tabs { gap:18px; overflow-x:auto; } .tab-btn { font-size:11px; } .timeline-container { padding:12px; } .line-card { padding:12px; } .btn-icon { min-width:34px; min-height:36px; } .modal { padding:10px; } .modal-content { max-height:calc(100dvh - 20px); } .modal-header,.modal-body,.modal-footer { padding:16px; } #ai-script-modal .modal-header,#ai-script-modal .modal-body,#ai-script-modal .modal-footer { padding:14px; } #ai-script-modal .ai-modal-tabs { padding:0 14px; gap:10px; overflow-x:auto; } body .modal#ai-script-modal,body .modal#ai-script-modal .modal-content { height:100dvh!important; max-height:100dvh!important; } .ai-modal-header-presets { display:none; } .modal-footer > div { flex-wrap:wrap; } .studio-import-split { height:auto; } }
/* Full-screen storyboard must scroll as one document on smaller devices. */
@media(max-width:1060px) {
    #ai-script-modal .studio-workspace-split { flex:0 0 auto; }
    #ai-script-modal .studio-scrollable-section { flex:none!important; overflow:visible!important; padding-right:0!important; }
    #ai-script-modal .studio-import-split { height:auto!important; flex:0 0 auto; }
}
@media(max-width:700px) {
    #ai-script-modal .modal-header,#ai-script-modal .modal-body,#ai-script-modal .modal-footer { padding:12px!important; }
    #ai-script-modal .modal-header { gap:12px; }
    #ai-script-modal .modal-header > div:first-child { gap:10px!important; flex:1; min-width:0; }
    #ai-script-modal .modal-header .brand-badge-pro,#ai-script-modal .modal-header p { display:none; }
    #ai-script-modal .modal-header h3 { font-size:16px!important; }
    #ai-script-modal .modal-header > .modal-close { font-size:10px; padding:6px; }
    #ai-script-modal .ai-modal-tabs { padding:0 12px!important; gap:8px!important; }
    #ai-script-modal .ai-modal-tabs .tab-btn { padding:12px 2px!important; font-size:11px!important; }
    #ai-script-modal .modal-footer > .modal-close { display:none; }
    #ai-script-modal .modal-footer > div { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:6px!important; }
    #ai-script-modal .modal-footer .btn { padding:8px 4px; font-size:10px; }
    #ai-script-modal .studio-col > div:first-child { flex-wrap:wrap; gap:12px; }
    .storyboard-grid { grid-template-columns:minmax(0,1fr)!important; }
    .studio-layout.layout-split .stage-section { padding:12px; }
    .stage-playback-controls .btn { font-size:11px; padding:8px; }
    #btn-play-show { min-width:0; }
}