:root{--ink:#18171b;--muted:#77747d;--line:#e9e7eb;--panel:#fff;--canvas:#f3f2f5;--violet:#6d42f5;--violet-dark:#5428da;--lime:#d8ff36;--soft-violet:#f1ecff;--shadow:0 16px 40px rgba(24,18,41,.12)}
*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--ink);font-family:"DM Sans",sans-serif;overflow:hidden}button,input{font:inherit}.app-shell{height:100vh;display:grid;grid-template-rows:62px minmax(0,1fr) 238px}.topbar{display:flex;align-items:center;border-bottom:1px solid var(--line);padding:0 18px;gap:20px;background:#fff;z-index:5}.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;width:195px}.brand-mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#8a61ff,#5427df);font-family:Inter,sans-serif;font-weight:900;box-shadow:0 5px 14px #7045ef4d}.project-title{border:0;background:transparent;display:flex;gap:8px;align-items:center;font-weight:600;font-size:15px;color:#333037;padding:8px 10px;border-radius:8px}.project-title:hover{background:#f6f5f7}.chevron{color:#9a97a0}.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}.icon-button,.more,.mini-button{border:0;background:transparent;color:#625f67;border-radius:8px;height:34px;min-width:34px;font-size:18px}.icon-button:hover,.mini-button:hover{background:#f2f0f4}.saved{display:flex;align-items:center;gap:7px;color:#8b8790;font-size:13px;margin:0 5px}.saved i{width:7px;height:7px;border-radius:99px;background:#56c890}.share-button,.export-button{height:38px;padding:0 17px;border-radius:10px;font-weight:700;border:1px solid #dedbe3;background:#fff}.export-button{background:var(--violet);border-color:var(--violet);color:#fff;box-shadow:0 5px 14px #7045ef35}.export-button:hover{background:var(--violet-dark)}
.workspace{min-height:0;display:grid;grid-template-columns:86px 355px minmax(420px,1fr);border-bottom:1px solid var(--line)}.tool-rail{padding:10px 8px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:4px;background:#fcfbfd}.rail-item{height:62px;border:0;border-radius:10px;background:transparent;color:#827f88;font-size:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}.rail-item b{font-weight:600}.rail-icon{font:700 17px Inter,sans-serif;letter-spacing:-1px}.rail-item:hover{background:#f4f2f7;color:#4f4b56}.rail-item.active{background:#f0ebff;color:var(--violet)}.rail-item.active .rail-icon{transform:scale(1.04)}.sparkle{font-size:21px}.side-panel{border-right:1px solid var(--line);background:#fff;min-height:0;overflow:hidden}.panel-content{display:none;height:100%;overflow:auto;padding:22px 22px 18px}.panel-content.active{display:block}.panel-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:19px}.eyebrow{font:700 10px Inter,sans-serif;letter-spacing:1.3px;color:#9b97a1;margin:0 0 5px}.panel-header h1{font:700 23px Inter,sans-serif;margin:0;letter-spacing:-.6px}.more{font-size:13px}.caption-toolbar{display:flex;gap:8px;margin-bottom:14px}.small-select{flex:1;height:36px;padding:0 12px;display:flex;justify-content:space-between;align-items:center;border:1px solid #e2dfe5;background:#fff;border-radius:9px;color:#55515b;font-size:13px}.mini-button{border:1px solid #e2dfe5;font-size:17px}.transcript{display:flex;flex-direction:column;gap:4px}.caption-row{position:relative;padding:10px 28px 11px 42px;border-radius:9px;border:1px solid transparent;cursor:pointer}.caption-row:hover{background:#faf9fb}.caption-row.active{background:#f7f4ff;border-color:#e6dcff}.caption-row time{position:absolute;left:9px;top:13px;font:600 10px Inter,sans-serif;color:#aaa6af}.caption-row p{font-size:14px;line-height:1.55;margin:0;color:#514e56;outline:0}.caption-row p:focus{color:#201e23}.caption-row strong{font-weight:700;color:#27242a}.caption-row>button{display:none;position:absolute;right:7px;top:10px;border:0;background:transparent;color:#8d8992}.caption-row:hover>button{display:block}.add-caption{width:100%;border:1px dashed #d9d5df;background:#fff;color:#77727d;border-radius:9px;padding:9px;margin-top:10px;font-size:13px}.add-caption:hover{background:#faf9fb;color:var(--violet)}
.section-label{font:700 11px Inter,sans-serif;color:#8f8b95;letter-spacing:.7px;margin:0 0 10px}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}.preset{height:104px;border:2px solid transparent;border-radius:10px;background:#f2f1f4;padding:9px;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;cursor:pointer}.preset.active{border-color:var(--violet);box-shadow:0 0 0 2px #eee8ff}.preset>span{flex:1;border-radius:6px;display:flex;align-items:center;justify-content:center}.preset small{text-align:left;margin-top:6px;font-weight:600;color:#56515d}.preset-dark{background:#151419;color:white;font:800 11px Inter}.preset-dark em{font-style:normal;color:var(--lime);margin-left:4px}.preset-clean{background:#e9e5dc;font:500 12px Inter;line-height:1.1}.preset-clean b{font-size:16px}.preset-boxed{background:#1b1a20;color:#fff;font:900 12px Inter}.preset-boxed::first-line{background:#ffcf40}.preset-karaoke{background:#7c5aec;color:#fff;font:600 10px Inter;flex-wrap:wrap}.preset-karaoke b{color:#fff36d;margin-left:4px}.control-block{padding:13px 0;border-top:1px solid #efedf0}.control-head{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:12px}.control-head output{font-weight:500;color:#89858e}.control-block input,.broll-settings input,.volume input{width:100%;accent-color:var(--violet)}.swatches{display:flex;gap:10px}.swatch{width:28px;height:28px;border:2px solid #fff;border-radius:8px;background:var(--sw);box-shadow:0 0 0 1px #dad7de}.swatch.active{box-shadow:0 0 0 2px var(--violet)}.toggle-line{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-top:1px solid #efedf0;font-size:13px;font-weight:600}.switch{width:38px;height:22px;padding:2px;border:0;background:#d8d5dc;border-radius:20px;transition:.2s}.switch i{display:block;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0002;transition:.2s}.switch.active{background:var(--violet)}.switch.active i{transform:translateX(16px)}
.magic-mini{border:0;background:var(--soft-violet);color:var(--violet);border-radius:8px;padding:7px 9px;font-size:11px;font-weight:700}.search-box{height:40px;border:1px solid #e2dfe5;border-radius:9px;display:flex;align-items:center;padding:0 11px;gap:8px}.search-box span{font-size:18px;color:#99959e}.search-box input{border:0;outline:0;width:100%;font-size:13px}.broll-tabs{display:flex;border-bottom:1px solid var(--line);margin-top:14px}.broll-tabs button{border:0;background:transparent;padding:10px 8px 9px;color:#8d8992;font-size:12px;font-weight:600}.broll-tabs .active{color:var(--violet);box-shadow:inset 0 -2px var(--violet)}.suggestion-title{font-size:12px;font-weight:600;margin:16px 0 10px}.broll-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.broll-card{position:relative;border:0;background:transparent;padding:0;text-align:left;cursor:pointer}.broll-visual{height:83px;border-radius:9px;display:block;overflow:hidden;position:relative}.broll-card small{display:block;font-weight:600;margin:5px 2px;color:#68646d}.broll-card>b{position:absolute;right:7px;top:7px;width:24px;height:24px;border-radius:7px;background:#ffffffd9;display:grid;place-items:center;color:#444}.city{background:linear-gradient(150deg,#17222e,#426985)}.city:before{content:"";position:absolute;bottom:0;left:12px;width:22px;height:52px;background:#8ab0c8;box-shadow:27px 14px #d8a76e,54px -7px #567b97,81px 22px #b9ceda}.city i{position:absolute;width:80px;height:4px;background:#d8ff36;transform:rotate(-22deg);left:42px;top:30px}.graph{background:linear-gradient(140deg,#ebd9ff,#8558c6)}.graph:before{content:"";position:absolute;inset:16px;border-left:2px solid #fff;border-bottom:2px solid #fff}.graph i{position:absolute;width:75px;height:38px;border-top:5px solid #d8ff36;border-radius:50%;transform:rotate(-17deg);left:35px;top:30px}.phone{background:radial-gradient(circle at 25% 30%,#ff8a84,#392049 70%)}.phone:before{content:"";position:absolute;width:35px;height:63px;border:4px solid #fff;border-radius:8px;left:54px;top:9px;transform:rotate(10deg)}.focus{background:linear-gradient(140deg,#ffcf70,#f06e56)}.focus:before{content:"◎";font:700 56px Inter;color:#fff9;position:absolute;left:47px;top:9px}.broll-settings{margin-top:20px;padding-top:15px;border-top:1px solid var(--line)}.broll-settings>div{display:flex;justify-content:space-between;font-size:12px;margin-bottom:9px}.broll-settings strong{color:var(--violet)}
.ai-card{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:13px;margin-bottom:11px}.ai-icon{width:36px;height:36px;border-radius:9px;background:#eee8ff;color:var(--violet);display:grid;place-items:center;font-size:18px}.ai-icon.warm{background:#fff0e5;color:#f2794b}.ai-card b{font-size:13px}.ai-card p{font-size:11px;line-height:1.35;color:#8a8690;margin:3px 0 0}.trim-label{margin-top:25px}.trim-stat{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}.trim-stat b{font-family:Inter}.magic-hero{text-align:center;background:linear-gradient(145deg,#f6f2ff,#eee7ff);border:1px solid #e3d9ff;border-radius:14px;padding:24px 17px}.magic-hero>span{font-size:32px;color:var(--violet)}.magic-hero h2{font:700 18px Inter;margin:8px 0}.magic-hero p{font-size:13px;line-height:1.5;color:#706b77;margin:0 0 17px}.magic-hero button{border:0;background:var(--violet);color:#fff;border-radius:9px;padding:10px 18px;font-weight:700}.magic-options{display:flex;flex-direction:column;gap:13px;padding:19px 5px;font-size:13px}.magic-options label{display:flex;gap:9px;align-items:center}.magic-options input{accent-color:var(--violet)}.volume{padding:15px;border:1px solid var(--line);border-radius:11px;margin-bottom:22px}.volume label{display:flex;justify-content:space-between;font-size:13px;margin-bottom:10px}.music-track{width:100%;display:flex;align-items:center;gap:11px;border:1px solid var(--line);background:#fff;padding:10px;border-radius:10px;margin-bottom:8px;text-align:left}.music-track>span{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;background:#f0edf3;color:var(--violet);font-size:10px}.music-track div{display:flex;flex-direction:column}.music-track small{color:#99949e;font-size:10px;margin-top:2px}.music-track i{margin-left:auto;font-style:normal;color:var(--violet)}.music-track.active{border-color:#cfc1ff;background:#faf8ff}
.canvas-area{background:var(--canvas);display:grid;grid-template-rows:46px minmax(0,1fr) 48px;min-height:0}.canvas-toolbar{display:flex;justify-content:space-between;align-items:center;padding:0 17px}.view-select,.canvas-actions{background:#fff;border:1px solid #e1dee5;border-radius:8px;font-size:12px;padding:7px 10px}.view-select span{margin-left:13px;color:#999}.canvas-actions{display:flex;align-items:center;padding:0;height:31px;overflow:hidden}.canvas-actions button{height:100%;border:0;background:#fff;padding:0 10px}.canvas-actions span{font-size:11px;color:#777}.canvas-actions .fit{border-left:1px solid var(--line)}.preview-wrap{min-height:0;display:grid;place-items:center;padding:8px}.video-preview{height:min(100%,520px);aspect-ratio:9/16;border-radius:9px;overflow:hidden;position:relative;background:#111;box-shadow:0 15px 36px rgba(28,23,39,.22)}.video-preview>img{width:100%;height:100%;object-fit:cover;display:block}.safe-zone{position:absolute;inset:7%;border:1px dashed #ffffff00;pointer-events:none}.caption-preview{position:absolute;left:8%;right:8%;bottom:21%;text-align:center;color:#fff;font:900 clamp(20px,2.5vw,39px)/.96 Inter,sans-serif;letter-spacing:-1.5px;text-shadow:0 3px 6px #0009;display:flex;flex-wrap:wrap;justify-content:center;gap:5px;text-transform:uppercase}.caption-preview strong{color:var(--lime);font-weight:900}.caption-preview.animate{animation:captionPop .38s cubic-bezier(.2,1.5,.4,1)}@keyframes captionPop{0%{transform:scale(.76);opacity:.1}100%{transform:scale(1);opacity:1}}.preview-badge{position:absolute;right:8px;top:8px;background:#16151ba8;color:#fff;border-radius:5px;padding:3px 6px;font:600 8px Inter;letter-spacing:.1px}.broll-overlay{display:none;position:absolute;inset:0;z-index:2;background:linear-gradient(155deg,#160e35,#744ce2 62%,#e15785);align-items:center;justify-content:center;flex-direction:column;gap:18px}.broll-overlay.show{display:flex;animation:brollIn .35s ease}@keyframes brollIn{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}.growth-bars{height:100px;display:flex;align-items:flex-end;gap:10px}.growth-bars i{display:block;width:18px;border-radius:5px 5px 0 0;background:linear-gradient(#d8ff36,#8ae53f);height:25%}.growth-bars i:nth-child(2){height:43%}.growth-bars i:nth-child(3){height:56%}.growth-bars i:nth-child(4){height:76%}.growth-bars i:nth-child(5){height:100%}.broll-overlay>span{font:900 18px Inter;color:#fff;letter-spacing:.5px}.play-controls{display:flex;align-items:center;gap:6px;padding:0 17px;color:#67636b}.play-controls button{border:0;background:transparent;height:32px;min-width:32px;border-radius:7px}.play-controls button:hover{background:#e7e4e9}.play-controls small{font-size:7px}.play-main{background:#252329!important;color:#fff!important;border-radius:50%!important}.play-controls>span{font:500 11px Inter;margin-left:8px}.spacer{flex:1}
.timeline-area{background:#fff;min-height:0}.timeline-tools{height:43px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--line);gap:3px}.timeline-tools button{height:29px;min-width:30px;border:0;background:transparent;border-radius:7px;color:#69656f;font-size:12px}.timeline-tools button:hover,.timeline-tools button.active{background:#f0edf4;color:var(--violet)}.timeline-tools>span{height:18px;width:1px;background:var(--line);margin:0 6px}.timeline-spacer{flex:1}.timeline{height:194px;position:relative;padding:26px 18px 8px 105px;overflow:hidden}.time-ruler{position:absolute;left:105px;right:18px;top:5px;display:flex;justify-content:space-between;color:#aaa6ae;font:500 9px Inter}.track-label{position:absolute;left:19px;top:39px;width:75px;height:70px;display:flex;flex-direction:column;justify-content:center;gap:5px;font-size:11px;color:#6f6b74}.track-label span{font-size:9px;color:#aaa}.captions-label{top:126px}.video-track{height:72px;border-radius:7px;background:#d9d6df;position:relative;overflow:hidden;border:2px solid #8171e3}.filmstrip{position:absolute;inset:0;display:flex}.filmstrip span{flex:1;background-image:url('assets/creator.png');background-size:cover;background-position:center 40%;border-right:1px solid #ffffff38;filter:saturate(.8)}.waveform{position:absolute;left:0;right:0;bottom:2px;height:15px;opacity:.65;background:linear-gradient(90deg,transparent 0 1%,#fff 1% 2%,transparent 2% 3%,#fff 3% 4%,transparent 4% 6%,#fff 6% 7%,transparent 7% 9%,#fff 9% 10%,transparent 10% 12%,#fff 12% 13%,transparent 13% 100%);background-size:34px 100%}.caption-track{position:relative;height:36px;margin-top:15px}.caption-track button{position:absolute;left:var(--x);width:var(--w);height:32px;border:1px solid #d8cbff;border-radius:5px;background:#eee9ff;color:#6049a8;font-size:9px;padding:0 7px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.playhead{position:absolute;top:18px;bottom:4px;left:105px;width:1px;background:#ed475d;z-index:5;pointer-events:none}.playhead i{position:absolute;top:-7px;left:-5px;width:11px;height:11px;border-radius:3px;background:#ed475d}.playhead i:after{content:"";position:absolute;bottom:-4px;left:2px;border-left:3px solid transparent;border-right:3px solid transparent;border-top:5px solid #ed475d}
.toast{position:fixed;right:22px;top:78px;background:#202026;color:#fff;border-radius:11px;padding:11px 15px;display:flex;gap:10px;align-items:center;box-shadow:var(--shadow);transform:translateX(130%);transition:.3s;z-index:20}.toast.show{transform:translateX(0)}.toast>span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#6ed59c;color:#13261b}.toast p{display:flex;flex-direction:column;margin:0;font-size:12px}.toast small{color:#bcb8c2;margin-top:2px}.modal-backdrop{position:fixed;inset:0;background:#17141d88;display:none;place-items:center;z-index:30;backdrop-filter:blur(3px)}.modal-backdrop.show{display:grid}.export-modal{width:min(420px,calc(100vw - 28px));background:#fff;border-radius:16px;padding:27px;position:relative;box-shadow:0 30px 90px #0004;text-align:center}.close-modal{position:absolute;right:14px;top:12px;border:0;background:transparent;font-size:22px;color:#8a8590}.export-icon{width:48px;height:48px;background:#eee8ff;color:var(--violet);display:grid;place-items:center;margin:0 auto;border-radius:14px;font-size:23px}.export-modal h2{font:700 22px Inter;margin:13px 0 5px}.export-modal>p{margin:0 0 20px;color:#817c87;font-size:13px}.export-options{display:flex;flex-direction:column;gap:8px}.export-options button{display:grid;grid-template-columns:1fr auto;text-align:left;border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px 13px}.export-options button.active{border-color:#bfaeff;background:#faf8ff}.export-options b,.export-options small{grid-column:1}.export-options small{color:#8e8993;font-size:11px;margin-top:3px}.export-options i{grid-row:1/3;grid-column:2;align-self:center;color:var(--violet);font-style:normal}.render-button{width:100%;border:0;background:var(--violet);color:#fff;border-radius:10px;padding:12px;margin-top:18px;font-weight:700}.render-progress{display:none;margin-top:13px;text-align:left;color:#7b7681;font-size:11px}.render-progress.show{display:block}.render-progress i{display:block;height:5px;border-radius:6px;background:linear-gradient(90deg,var(--violet) var(--p,15%),#eeeaf3 var(--p,15%));margin-bottom:7px;transition:.4s}
@media(max-width:900px){body{overflow:auto}.app-shell{height:auto;min-height:100vh;grid-template-rows:58px auto 210px}.brand{width:auto}.brand>span:last-child,.saved,.icon-button,.share-button{display:none}.project-title{max-width:190px;overflow:hidden;white-space:nowrap}.workspace{grid-template-columns:68px minmax(260px,42vw) 1fr;height:650px}.tool-rail{padding:8px 5px}.rail-item{height:58px}.rail-item b{font-size:9px}.side-panel{min-width:0}.panel-content{padding:16px 13px}.canvas-area{min-width:290px}.timeline{padding-left:78px}.time-ruler{left:78px}.track-label{left:10px}.playhead{left:78px}}
@media(max-width:650px){.topbar{padding:0 10px}.project-title{display:none}.top-actions{margin-left:auto}.workspace{grid-template-columns:58px 1fr;height:auto}.side-panel{height:500px}.canvas-area{grid-column:1/3;height:600px;border-top:1px solid var(--line)}.tool-rail{height:500px}.app-shell{grid-template-rows:58px auto 190px}.video-preview{height:470px}.timeline-area{overflow-x:auto}.timeline-tools,.timeline{min-width:720px}.caption-preview{font-size:30px}.export-button{padding:0 13px}}

.filmstrip span{background-image:var(--thumb,url('assets/creator.png'))}
.upload-broll{width:100%;height:38px;border:1px dashed #cfc8d8;background:#faf9fb;color:#625c68;border-radius:9px;margin:-7px 0 13px;font-size:13px;font-weight:600}.upload-broll:hover{border-color:var(--violet);color:var(--violet);background:#f8f5ff}
.video-preview>video{width:100%;height:100%;object-fit:cover;display:none;background:#111}.video-preview.has-video>#sourceVideo{display:block}.video-preview.has-video>#demoPoster{display:none}
.empty-video{display:none;position:absolute;inset:0;background:linear-gradient(150deg,#18151f,#282232);z-index:6;color:#fff;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:8px}.video-preview.awaiting-upload .empty-video{display:flex}.empty-video>span{width:48px;height:48px;border-radius:50%;background:#ffffff19;border:1px solid #ffffff2d;display:grid;place-items:center;color:var(--lime);padding-left:3px}.empty-video>b{font:700 15px Inter}.empty-video>small{color:#aaa4b2}.empty-video>button{margin-top:6px;border:0;border-radius:8px;background:var(--violet);color:#fff;padding:9px 15px;font-weight:700}.video-preview.dragging{outline:3px solid var(--violet);outline-offset:4px}
.broll-overlay>video,.broll-overlay>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}.broll-overlay.custom>video.active,.broll-overlay.custom>img.active{display:block}.broll-overlay.custom #defaultBroll,.broll-overlay.custom>span{display:none}
.download-button{display:none;width:100%;background:#18171b;color:#fff;border-radius:10px;padding:12px;margin-top:10px;font-weight:700;text-decoration:none}.download-button.show{display:block}.export-note{font-size:10px!important;color:#aaa5af!important;margin:12px 0 0!important}.render-button:disabled{opacity:.6;cursor:wait}.caption-row.generated{animation:rowIn .25s ease}@keyframes rowIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}