.source-panel{padding:24px 28px;margin-bottom:18px}.source-grid{display:grid;gap:24px}#waveform{width:100%;height:76px;margin:12px 0;background:#eceee6;border-radius:10px}.workspace{align-items:start}.stage-wrap{min-height:400px}.stage{display:block;width:min(100%,315px);height:auto;aspect-ratio:9/16;container-type:normal}.preview-note{line-height:1.7}#applyTemplateBtn{margin-top:12px}.scene-thumb{height:58px}.clip-extra{grid-column:3/-1;display:flex;align-items:center;gap:10px;font-size:11px;color:#65675f}.clip-extra input{max-width:80px;padding:6px;border:1px solid #ddd;border-radius:7px}.cue-list{display:grid;gap:10px;margin-top:20px}.cue-row{display:grid;gap:10px;padding:12px;border:1px solid #dddcd5;border-radius:12px;background:white}.cue-row.active{border-color:#9cbc39;background:#fbfff0}.cue-row label{color:#666;display:block;margin-bottom:3px}.cue-row input,.cue-row select,.cue-row textarea{width:100%;min-width:0;border:1px solid #d3d2cc;border-radius:7px;padding:8px;font:inherit;}.cue-row textarea{resize:vertical;line-height:1.5}.cue-actions{display:flex;flex-wrap:wrap;gap:5px}.cue-actions button{font-size:11px;border:1px solid #ddd;background:white;border-radius:6px;padding:5px 7px}.export-actions{flex-wrap:wrap;min-width:220px}.export-actions .select{background-color:white;min-width:190px;color:#222}.export-panel{gap:24px}dialog{max-width:500px;width:calc(100% - 32px);border:1px solid #ccc;border-radius:20px;padding:28px;color:#191b20;background:#fffefa;box-shadow:0 16px 80px #0004}dialog::backdrop{background:#14171ccc}dialog h2{font-size:20px}dialog progress{width:100%;accent-color:#9cbf36}dialog .button{display:inline-block;text-decoration:none}dialog p{line-height:1.65}dialog [hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}.scene-row .control-group select{padding-left:5px}.muted{line-height:1.5}.export-panel .export-copy{min-width:0}.toast{max-width:90vw;text-align:center}button:disabled{opacity:.45;cursor:not-allowed}.source-grid .text-button{margin-top:8px}
@media(max-width:1100px){.scene-row{grid-template-columns:20px 58px minmax(70px,1fr) 78px 110px 110px 66px}}
@media(max-width:980px){.preview-panel{position:static}.source-grid{grid-template-columns:1fr}.audio-source{padding-top:0}.cue-row{grid-template-columns:28px 85px 85px 1fr}.cue-actions{grid-column:2/-1}.scene-row{grid-template-columns:20px 58px 1fr 78px 130px}.scene-row .transition-control{grid-column:3/5}.clip-extra{grid-column:1/-1}}
.app-shell{padding-right:398px}.workspace{display:block}.hero{display:block;min-height:0;padding-top:26px}.hero h1{font-size:40px}.hero-actions{margin-top:22px}.preview-panel{position:fixed;top:84px;right:max(20px,calc((100vw - 1280px)/2));width:380px;max-height:calc(100dvh - 100px);overflow:auto;z-index:20;padding:18px}.preview-panel h2{font-size:17px}.preview-panel .stage-wrap{min-height:0;padding:8px}.preview-panel .stage{width:auto;max-width:100%;height:clamp(160px,calc(100dvh - 375px),540px)}.preview-panel .preview-note{font-size:12px;margin-bottom:0}.source-grid{grid-template-columns:1fr}.audio-source{padding-top:0}.cue-row{grid-template-columns:28px 90px 90px minmax(100px,1fr);align-items:start}.cue-actions{grid-column:1/-1;grid-row:4}.cue-row label{font-size:12px}.cue-row input,.cue-row select,.cue-row textarea{font-size:14px}.scene-row input[readonly]{background:#eef3e4;color:#475330;cursor:default}.scene-meta span{white-space:normal;overflow-wrap:anywhere}.scene-row{grid-template-columns:18px 54px minmax(0,1fr) 90px}.scene-thumb{width:54px}.scene-row .motion-control{grid-column:2/4}.scene-row .transition-control{grid-column:4}.scene-row .row-actions{grid-column:1}.scene-row .clip-extra{grid-column:2/-1;flex-wrap:wrap}.scene-row .control-group label{font-size:12px}.timeline-heading,.source-panel>.panel-heading{flex-wrap:wrap;gap:12px}.export-panel{display:block}.export-actions{margin-top:18px}html{scroll-padding-top:90px}
@media(max-width:1150px) and (min-width:761px){.app-shell{padding-right:328px}.preview-panel{width:310px}.preview-panel .stage{max-height:450px}.cue-row{grid-template-columns:24px 1fr 1fr}.cue-actions{grid-row:5}.hero h1{font-size:34px}.hero-actions{max-width:100%}.timeline-panel,.setup-panel,.source-panel{padding:20px 16px}}
.editor-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.editor-toolbar p{flex:1;min-width:180px}.unified-editor .timeline-actions{display:flex;gap:8px;flex-wrap:wrap}.unified-editor [hidden]{display:none!important}.cue-row.editor-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;padding:18px;align-items:start;border:1px solid #d6d8cf;border-radius:14px}.editor-row>div{min-width:0;grid-row:auto}.editor-row-heading{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid #e8e9e3}.editor-row-heading>div{flex:1;min-width:0}.editor-row-heading strong{display:block;font-size:16px}.editor-row-heading span{display:block;font-size:12px;color:#65675f;margin-top:3px}.editor-start,.editor-end,.editor-color{grid-column:span 4}.editor-text,.editor-media,.editor-trim,.editor-actions{grid-column:1/-1}.editor-motion,.editor-transition{grid-column:span 6}.editor-row label{font-size:13px;margin-bottom:5px}.editor-row textarea{font-size:15px;min-height:66px}.editor-row .editor-trim{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.editor-trim label{margin:0}.editor-trim input{max-width:100px}.editor-trim span{font-size:12px;color:#65675f}.editor-row .editor-actions{justify-content:flex-end;gap:8px;padding-top:4px}.editor-actions button{font-size:13px;padding:7px 10px}.editor-row.repeat{border-left:4px solid #e8693d}.editor-row-heading .repeat-tag{color:#a34725;white-space:nowrap}.editor-row .editor-row-heading button{margin-left:auto;white-space:nowrap}.unified-editor .cue-list{margin-top:12px}.caption-style-grid,.style-target{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.caption-style-grid label,.style-target label{font-size:13px;display:grid;gap:7px;min-width:0}.caption-style-panel{margin:16px 0 20px;border:1px solid #cdd5bd;background:#f6f9ef;border-radius:12px;padding:16px;scroll-margin-top:90px}.caption-style-panel summary{cursor:pointer;font-weight:bold;font-size:16px}.caption-style-panel summary span{font-weight:400;font-size:12px;color:#65675f;margin-left:8px}.style-target{margin-top:18px}.caption-style-panel fieldset{border:0;padding:0;margin:0;min-width:0}.caption-style-panel .style-full{grid-column:1/-1}.caption-style-panel .style-checks{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.style-checks label{display:flex;align-items:center;gap:6px}.caption-style-panel input[type=range]{width:100%;accent-color:#687e31}.caption-style-panel input[type=color]{width:100%;max-width:140px;height:36px;background:white;border:1px solid #c7ccbe;border-radius:6px;padding:3px;cursor:pointer}.caption-style-panel input[type=checkbox]{width:17px;height:17px;accent-color:#687e31}.caption-style-panel .select{width:100%;min-width:0;padding:9px;font-size:14px}.caption-style-panel output{font-size:12px;color:#687541}.color-palette{display:flex;gap:9px;flex-wrap:wrap;margin:9px 0}.color-swatch{width:32px;height:32px;border:1px solid #7b8171;border-radius:50%;background:var(--swatch);cursor:pointer}.color-swatch:hover,.color-swatch:focus-visible{outline:3px solid #789835;outline-offset:2px}#randomMotionBtn{margin-top:8px}.selection-color-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}.selection-color-tools label{display:flex;align-items:center;gap:8px}.selection-color-tools input[type=color]{width:42px;min-height:32px;padding:2px}.selection-color-tools button{padding:7px 10px;border:1px solid #cac9c2;border-radius:8px;background:transparent;font:inherit;cursor:pointer}.selection-color-tools .field-help{flex-basis:100%;margin:0}

/* Keep music controls aligned with the surrounding editor panels. */
.bgm-panel{padding:24px 28px;margin-bottom:18px}.bgm-panel .panel-heading{gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:20px}.bgm-panel .panel-heading h2{margin:0}.bgm-panel #bgmStatus{overflow-wrap:anywhere;min-width:0}.bgm-buttons{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px}.bgm-panel fieldset{border:0;padding:0;margin:20px 0 0;min-width:0}.bgm-top-grid,.bgm-time-grid{display:grid;gap:18px 14px}.bgm-top-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bgm-time-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}.bgm-top-grid label,.bgm-time-grid label{display:grid;gap:7px;min-width:0;align-content:start;font-size:13px}.bgm-panel input[type=number],.bgm-panel .select{width:100%;min-width:0;min-height:42px;border:1px solid #cac9c2;border-radius:10px}.bgm-panel input[type=number]{padding:10px 12px}.bgm-panel input[type=range]{width:100%;min-width:0;height:42px;margin:0;accent-color:#687e31}.bgm-volume-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.bgm-volume-label output{font-size:12px;color:#687541}.bgm-panel .field-help{min-height:0;margin:14px 0 0}
@media(min-width:761px) and (max-width:1150px){.bgm-panel{padding:20px 16px}}



/* Text controls stay beside their content, in the existing compose panel. */
.text-style-panel{margin:12px 0 20px;border:1px solid #cdd5bd;border-radius:12px;padding:14px;background:#f6f9ef}.text-style-panel summary{cursor:pointer;font-size:14px;font-weight:700}.text-style-panel summary span{font-size:12px;font-weight:400;color:#65675f;margin-left:8px}.text-style-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.text-style-grid>label{display:grid;gap:7px;font-size:13px;min-width:0}.text-style-grid .style-full{grid-column:1/-1}.text-style-grid .style-checks{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.text-style-grid .style-checks label{display:flex;align-items:center;gap:7px;font-size:13px}.text-style-grid input[type=number],.text-style-grid input[type=color]{width:100%;min-width:0;height:40px;border:1px solid #c7ccbe;border-radius:8px;background:white;padding:7px 10px;font:inherit}.text-style-grid input[type=color]{padding:3px;cursor:pointer}.text-style-grid input[type=checkbox]{width:17px;height:17px;accent-color:#687e31}.text-style-grid select{width:100%;min-width:0}.text-stroke-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:center;border-top:1px solid #dce1d3;padding-top:12px;font-size:13px}.text-stroke-controls .stroke-toggle{display:flex;align-items:center;gap:7px}.text-stroke-controls .stroke-width{display:grid;gap:7px;min-width:0}.stroke-width>span{display:flex;justify-content:space-between;gap:8px}.stroke-width output{color:#687541;font-size:12px;white-space:nowrap}.stroke-width input{width:100%;min-width:0;margin:0;accent-color:#687e31}.stroke-width:has(input:disabled){opacity:.5}.text-style-panel .field-help:empty{display:none}#applyAllCaptionStyle{margin-top:14px}


@media(min-width:761px){.cue-row.active{border-color:#9cbc39;box-shadow:0 0 0 2px #9cbc3926;transition:border-color .18s,box-shadow .18s}.cue-row{scroll-margin-top:90px}}

/* Shared quick palettes for title, channel and selected text colors. */
.compact-palette{margin:7px 0 8px;gap:7px}.compact-palette .color-swatch{width:28px;height:28px;min-height:28px;padding:0}.title-selection-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border-top:1px solid #dce1d3;padding-top:12px}.title-selection-tools>span:first-child{font-size:13px;font-weight:700}.title-selection-tools input[type=color]{width:42px!important;height:32px!important;min-width:42px;padding:2px!important}.title-selection-tools button{padding:7px 10px;border:1px solid #cac9c2;border-radius:8px;background:transparent;font:inherit;cursor:pointer}.title-selection-tools .field-help{flex-basis:100%;margin:0}.selection-color-tools .selection-palette{margin:0}.selection-color-tools .mini-swatch{width:28px;height:28px;min-height:28px;padding:0}.title-selection-tools .color-swatch,.selection-color-tools .mini-swatch{background:var(--swatch)}

/* video trim + audio controls */
.editor-row .editor-audio{grid-column:1/-1}.editor-trim strong{width:100%;font-size:13px}.trim-fields,.video-audio-fades{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}.trim-fields label,.video-audio-fades label{display:grid;gap:5px}.trim-fields input,.video-audio-fades input{width:100%;max-width:none}.video-volume-presets{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.video-volume-presets button{min-width:42px;padding:6px 8px;border-radius:8px}.video-audio-fades{margin-top:8px}

.compose-top-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:end}
.compose-top-grid .field-label{margin:0 0 9px}
@media(max-width:760px){.compose-top-grid,.bgm-top-grid,.bgm-time-grid{grid-template-columns:1fr}}
