*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f6f7f9;color:#20242b;overflow:hidden}button,input,select,textarea{font:inherit}button{border:1px solid #cfd5dc;background:#fff;border-radius:8px;padding:8px 12px;cursor:pointer;white-space:nowrap}button:hover{background:#f2f5f8}.accent{background:#1e9bf0;color:#fff;border-color:#1e9bf0}.accent:hover{background:#1089db}.hidden{display:none!important}
.topbar{height:58px;background:#fff;border-bottom:1px solid #dfe3e8;display:flex;align-items:center;justify-content:space-between;padding:0 18px;position:relative;z-index:20}.brand{font-weight:800;font-size:18px}.top-actions{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.workspace{display:grid;grid-template-columns:minmax(620px,1fr) minmax(330px,30%);gap:8px;padding:8px;height:calc(48vh - 20px);min-height:320px;overflow:hidden}.panel,.center-panel{background:#fff;border:1px solid #dfe3e8;border-radius:10px;min-width:0;min-height:0;overflow:hidden}.panel{display:flex;flex-direction:column}.panel-title{font-weight:700;padding:14px;border-bottom:1px solid #edf0f3;flex:0 0 auto}.center-panel{display:grid;grid-template-rows:minmax(0,1fr) 56px}.preview-wrap{min-width:0;min-height:0;background:#eef1f4;display:flex;align-items:center;justify-content:center;border-radius:10px 10px 0 0;overflow:hidden;position:relative;padding:10px}.preview-wrap video{display:block;max-width:calc(100% - 20px);max-height:calc(100% - 20px);width:auto;height:auto;object-fit:contain;background:#000;border-radius:4px;box-shadow:0 2px 10px #0002}.overlay-layer{position:absolute;inset:10px;pointer-events:none}.overlay-image{position:absolute;transform:translate(-50%,-50%);height:auto;max-width:none;pointer-events:auto;cursor:move;filter:drop-shadow(0 1px 3px #0003)}.image-selection-box{position:absolute;border:2px solid #1e9bf0;box-shadow:0 0 0 1px #fff8;pointer-events:auto;cursor:move;z-index:10000}.image-resize-handle{position:absolute;width:16px;height:16px;right:-9px;bottom:-9px;border-radius:50%;background:#1e9bf0;border:2px solid #fff;box-shadow:0 1px 4px #0004;cursor:nwse-resize}.empty-preview{position:absolute;color:#8b949f;font-size:15px}.transport{height:56px;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;border-top:1px solid #e8ebef;white-space:nowrap;overflow:hidden}.transport input{width:68px}.media-info{font-size:12px;color:#7b8490;padding:4px 7px;background:#f3f5f7;border-radius:6px}
.inspector-empty{padding:36px 16px;color:#929aa4;text-align:center}.inspector-content{min-height:0;overflow:auto}.field{padding:10px 12px;border-bottom:1px solid #f0f2f5;min-width:0}.field label{display:block;font-size:12px;color:#727b86;margin-bottom:5px}.field>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.field input,.field select{width:100%;padding:7px;border:1px solid #cfd5dc;border-radius:7px}.field.grid2,.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.field.grid2 label,.grid2 label,.grid3 label{margin:0}.image-layer-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}.image-layer-actions button{padding:6px 7px;font-size:12px}.image-edit-tip{margin-top:8px;font-size:11px;color:#7d8792;white-space:normal!important}.subtitle-actions{display:flex;gap:8px;padding:10px;border-top:1px solid #f0f2f5}.divider{width:1px;height:26px;background:#dfe3e8;margin:0 2px}
.timeline-section{margin:0 8px 8px;background:#fff;border:1px solid #dfe3e8;border-radius:10px;height:calc(52vh - 46px);min-height:300px;overflow:hidden;display:flex;flex-direction:column}.editbar{height:48px;flex:0 0 48px;display:flex;align-items:center;gap:7px;padding:0 10px;border-bottom:1px solid #e7eaee;overflow:hidden}.zoom-range{width:130px}.zoom-label{font-size:11px;color:#7c858f;min-width:58px}.hint{font-size:12px;color:#8c949e;margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.timeline{position:relative;overflow:auto;flex:1;min-height:0}.timeline-inner{position:relative;min-height:100%;width:max-content}.ruler{height:34px;position:sticky;top:0;z-index:8;background:#fff;border-bottom:1px solid #e9ecef;display:flex}.ruler-head{position:sticky;left:0;z-index:12;background:#fafbfc;border-right:1px solid #e4e8ed;flex:0 0 auto}.ruler-lane{position:relative;flex:0 0 auto}.tick{position:absolute;top:0;height:34px;font-size:10px;color:#8a929b}.tick i{position:absolute;top:0;left:0;height:7px;border-left:1px solid #ccd2d8}.tick b{position:absolute;top:10px;left:4px;font-weight:400;white-space:nowrap}
.track-row{height:66px;display:flex;border-bottom:1px solid #eef1f4;position:relative}.subtitle-row{height:54px}.track-header{position:sticky;left:0;z-index:7;background:#fafbfc;border-right:1px solid #e4e8ed;flex:0 0 auto;padding:7px 6px;display:flex;flex-direction:column;justify-content:center;font-size:11px}.track-header strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-lane{position:relative;flex:0 0 auto;background:linear-gradient(#fff,#fdfefe)}
.tl-clip{position:absolute;top:7px;height:52px;border-radius:7px;color:#fff;padding:6px 9px;font-size:11px;overflow:hidden;white-space:nowrap;cursor:pointer;user-select:none}.tl-clip.video{background:#6f5bd3}.tl-clip.image{background:#2f9e77}.tl-clip.audio{background:#efeaff;color:#40346f;border:1px solid #c9bdf8;padding-top:5px}.tl-clip.audio.derived{background:#f4f0ff}.tl-clip.selected{outline:3px solid #1e9bf0;z-index:5}.tl-clip span{position:relative;z-index:3;pointer-events:none}.trim-handle{position:absolute;top:0;bottom:0;width:7px;background:#ffffff33;z-index:4;cursor:ew-resize}.trim-handle.left{left:0}.trim-handle.right{right:0}.clip-wave{position:absolute;left:0;right:0;bottom:0;top:0;width:100%;height:100%;display:block;z-index:1;pointer-events:none}.subtitle-block{position:absolute;top:8px;height:38px;background:#1e9bf0;color:#fff;border-radius:6px;padding:5px 7px;font-size:11px;overflow:hidden;white-space:nowrap}.playhead{position:absolute;top:0;bottom:0;width:2px;background:#18a0e8;pointer-events:none;z-index:20}.playhead:before{content:"";position:absolute;top:27px;left:-5px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #18a0e8}
body.media-landscape .workspace,body.media-square .workspace{grid-template-columns:minmax(620px,1fr) minmax(330px,30%)}
body.media-portrait .workspace{grid-template-columns:minmax(420px,1fr);width:calc(100% - clamp(360px,32vw,540px) - 8px)}body.media-portrait .inspector-panel{grid-column:1;grid-row:1}body.media-portrait .preview-panel{position:fixed;top:66px;right:8px;bottom:8px;width:clamp(360px,32vw,540px);height:auto;z-index:14;display:grid;grid-template-rows:minmax(0,1fr) 56px;box-shadow:0 8px 28px #00000012}body.media-portrait .timeline-section{margin-right:calc(clamp(360px,32vw,540px) + 16px)}body.media-portrait .transport{gap:5px;font-size:12px}body.media-portrait .media-info{display:none}
.audio-only-field{display:block}
dialog{border:none;border-radius:12px;padding:0;box-shadow:0 25px 70px #0003;max-width:95vw}.dialog-box{width:480px;padding:16px;display:flex;flex-direction:column;gap:12px}.dialog-box.wide{width:min(1100px,94vw)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h3{margin:0}.dialog-head button{border:none;font-size:20px}.dialog-box>label{display:flex;flex-direction:column;gap:5px}.dialog-box input,.dialog-box select{padding:8px;border:1px solid #cfd5dc;border-radius:7px}.dialog-actions,.dialog-tools{display:flex;gap:8px;align-items:center}.dialog-actions{justify-content:flex-end}.dialog-box pre{background:#0f1720;color:#bfe3ff;padding:10px;border-radius:8px;max-height:200px;overflow:auto;white-space:pre-wrap}.storyboard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-height:70vh;overflow:auto}.story-card{border:1px solid #dce2e8;border-radius:8px;overflow:hidden;background:#fff;cursor:pointer}.story-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#111}.story-card div{padding:5px 7px;font-size:11px;color:#58616c}
@media(max-width:1200px){.workspace{grid-template-columns:minmax(520px,1fr) 300px}.hint{display:none}body.media-portrait .workspace{width:calc(100% - 330px)}body.media-portrait .preview-panel{width:315px}body.media-portrait .timeline-section{margin-right:331px}}
@media(max-width:900px){html,body{overflow:auto}.workspace,body.media-portrait .workspace{grid-template-columns:1fr;width:auto;height:470px;min-height:470px}.inspector-panel{display:none}.center-panel,body.media-portrait .preview-panel{position:relative;top:auto;right:auto;bottom:auto;width:auto;height:auto;grid-column:1!important;grid-row:1!important}.timeline-section,body.media-portrait .timeline-section{height:420px;min-height:420px;margin-right:8px}.media-info{display:none}.editbar{overflow-x:auto}.zoom-range{width:90px}}

/* Subtitle import, editing and preview */
.subtitle-actions{display:flex;flex-wrap:wrap;gap:6px}
.subtitle-note{font-size:12px;color:#96a6b8;line-height:1.65;padding:0 6px}
.subtitle-preview{position:absolute;left:5%;right:5%;bottom:7%;z-index:100;pointer-events:none;text-align:center;white-space:pre-wrap;font-size:clamp(16px,2.2vw,30px);font-weight:600;color:white;text-shadow:0 2px 4px #000,1px 0 2px #000,-1px 0 2px #000}
.subtitle-block{cursor:pointer}
.dialog-box textarea{box-sizing:border-box;width:100%;resize:vertical;background:#101923;color:#e8eef5;border:1px solid #344354;border-radius:6px;padding:8px;font:inherit}
.dialog-box [hidden]{display:none!important}
#asrDialog,#subtitleEditDialog{max-height:90vh;overflow:auto}
#asrStatus{white-space:pre-wrap;overflow-wrap:anywhere}

/* Video source crop: source coordinates are independent of viewport size. */
#cropDialog{width:min(940px,96vw);max-height:94vh;overflow:auto}
#cropSurface{position:relative;margin:12px auto;overflow:hidden;touch-action:none;cursor:crosshair;background:#111;max-width:100%}
#cropCanvas{display:block;width:100%;height:100%;pointer-events:none}
#cropBox{position:absolute;box-sizing:border-box;border:2px solid #39e6bd;box-shadow:0 0 0 2000px #0009;cursor:move;touch-action:none}
#cropBox i{position:absolute;width:14px;height:14px;background:#fff;border:2px solid #087d68;box-sizing:border-box;border-radius:2px}
#cropBox [data-corner="nw"]{left:-6px;top:-6px;cursor:nwse-resize}#cropBox [data-corner="ne"]{right:-6px;top:-6px;cursor:nesw-resize}
#cropBox [data-corner="sw"]{left:-6px;bottom:-6px;cursor:nesw-resize}#cropBox [data-corner="se"]{right:-6px;bottom:-6px;cursor:nwse-resize}
.crop-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.crop-preview{display:flex;align-items:center;gap:16px;margin:10px 0;font-size:13px;color:#566372}
#cropResult{display:block;max-width:300px;max-height:120px;background:#111;border-radius:4px}
.crop-help{font-size:12px;color:#697583;line-height:1.6}

.subtitle-styled-preview{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1000;pointer-events:none}
#subtitleStyleDialog{max-height:90vh;overflow:auto}

/* Compact import dropdown and repository link. */
.import-menu{position:relative;flex-shrink:0}
.import-menu summary,.project-home-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid #cfd5dc;background:#fff;border-radius:8px;padding:8px 12px;cursor:pointer;white-space:nowrap;color:#20242b;font:inherit;text-decoration:none;list-style:none}
.import-menu summary::-webkit-details-marker{display:none}
.import-menu summary:hover,.project-home-btn:hover{background:#f2f5f8}
.import-menu summary:focus-visible,.project-home-btn:focus-visible{outline:2px solid #1e9bf0;outline-offset:2px}
.import-menu[open] summary{border-color:#1e9bf0;background:#edf7ff}
.import-menu-panel{position:absolute;top:calc(100% + 8px);left:0;min-width:240px;padding:6px;background:#fff;border:1px solid #dfe3e8;border-radius:10px;box-shadow:0 8px 24px #0002;z-index:30;display:grid;gap:3px}
.import-menu-panel button{text-align:left;border:0;width:100%;border-radius:6px;padding:10px 12px}
.import-menu-panel button:disabled{color:#a0a8b2;cursor:not-allowed}
@media(max-width:780px){.topbar{padding:0 8px;gap:8px}.top-actions{gap:4px}.top-actions>button,.project-home-btn,.import-menu summary{padding:7px 8px;font-size:12px}.brand{font-size:15px}.import-menu-panel{min-width:220px}}

/* Empty-project advertising stays inside the preview stage; never creates a third grid row. */
.webcut-ad{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:calc(100% - 20px);max-width:1200px;height:min(160px,55%);display:flex;justify-content:center;align-items:stretch;z-index:4}
.webcut-ad .adsbygoogle{width:100%;height:100%}
body:not(.webcut-has-media) .preview-wrap:has(.webcut-ad:not([hidden])) .empty-preview{top:18%;transform:translateY(-50%)}
body.webcut-has-media .webcut-ad,body:has(#timelineInner .tl-clip) .webcut-ad,.webcut-ad[hidden]{display:none!important}
@media(max-width:900px){.webcut-ad{height:min(110px,40%)}body:not(.webcut-has-media) .preview-wrap:has(.webcut-ad:not([hidden])) .empty-preview{top:23%}}