*{box-sizing:border-box} html,body{height:100%} :root{--bg:#fbfbfc;--line:#e5e6eb;--text:#171922;--muted:#7d8290;--purple:#6048f5} body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;display:flex;flex-direction:column;overflow:hidden}.header{width:100%;height:64px;flex-shrink:0;margin:0 auto 20px;padding:0 22px;background:#fff;border:1px solid #e8e8ed;border-top:none;border-radius:0;display:flex;align-items:center;justify-content:space-between;box-shadow:0 3px 18px rgba(30,30,60,.035)}.brand{display:flex;align-items:center;gap:12px;font-size:22px}.brand img{width:29px;height:29px;color:var(--purple)}.header-actions{display:flex;gap:10px;align-items:center}.button,.settings{height:40px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;font-size:13px;display:flex;align-items:center;gap:7px;padding:0 14px;cursor:pointer}.button img,.settings img{width:18px;height:18px}.primary{background:var(--purple);border-color:var(--purple);color:#fff}.primary img{filter:brightness(0) invert(1)}.settings{width:36px;padding:0;justify-content:center}.page{max-width:1540px;width:100%;margin:auto;padding:0 14px 14px;display:grid;grid-template-columns:145px minmax(760px,1180px) 145px;grid-template-rows:1fr;gap:20px;flex:1;min-height:0}.editor{display:flex;flex-direction:column;min-height:0;height:100%}.ad{height:600px;max-height:100%;overflow:hidden;border:1px dashed #d9dce5;border-radius:8px;display:flex;align-items:center;justify-content:center;text-align:center;color:#8e94a3;font-size:18px;line-height:1.8}.ad small{font-size:15px}.columns{display:grid;grid-template-columns:230px minmax(420px,1fr) 230px;grid-template-rows:1fr;gap:10px;align-items:stretch;flex:1;min-height:0}.center{min-height:0;display:flex;flex-direction:column}.panel,.preview-card{background:#fff;border:1px solid #e6e7ec;border-radius:14px;box-shadow:0 3px 16px rgba(25,25,50,.025)}.panel{padding:16px;display:flex;flex-direction:column;gap:16px;justify-content:flex-start;align-self:flex-start;overflow-y:auto;overflow-x:hidden;max-height:100%}.panel>*{flex-shrink:0}.preview-card{display:flex;flex-direction:column;flex:0 1 auto;max-height:100%;min-height:0}.preview-card:has(.workspace--grid){flex:1 1 auto}.panel h2{font-size:18px;margin:0}.tool{width:100%;height:74px;border:1px solid #ececf1;border-radius:11px;background:#fff;display:flex;align-items:center;gap:17px;padding:0 18px;font:inherit;color:var(--text);cursor:pointer}.tool:hover,.advanced-tool:hover{background:#faf9ff;border-color:#ddd9ff}.tool img{width:30px;height:30px}.tool span{font-size:15px}.advanced-tool{width:100%;height:74px;border:1px solid #ececf1;border-radius:11px;background:#fff;display:flex;align-items:center;gap:15px;text-align:left;padding:12px 14px;font:inherit;cursor:pointer}.advanced-tool img{width:31px;height:31px;flex:none;color:var(--purple)}.advanced-tool b{display:block;font-size:15px;font-weight:520}.advanced-tool small{display:block;color:var(--muted);font-size:12px;margin-top:5px;line-height:1.3}.stage{position:relative;width:100%;aspect-ratio:16/9;background:#111;overflow:hidden;border-radius:12px 12px 0 0}.poster,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.stage video{display:none}.empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;background:rgba(20,20,25,.12);color:#fff}.empty button{border:0;border-radius:9px;padding:11px 17px;background:#fff;color:#222;font-weight:650;cursor:pointer}.empty span{font-size:12px}.controls{height:72px;padding:0 16px;display:flex;align-items:center;gap:10px;flex-shrink:0}.player,.ratio{height:42px;border:1px solid var(--line);background:#fff;border-radius:10px;display:grid;place-items:center;cursor:pointer}.player{width:42px}.player img{width:21px;height:21px}.player.active{background:#f2efff;color:var(--purple)}.controls span{font-size:13px;color:#686d79;white-space:nowrap}.controls input{flex:1;min-width:70px;accent-color:var(--purple)}.ratio{padding:0 12px;font:inherit;color:#555b68;white-space:nowrap}.ratio span{margin-left:7px}.pause{height:15px;width:12px;border-left:4px solid currentColor;border-right:4px solid currentColor}.privacy{height:48px;display:flex;justify-content:center;align-items:center;gap:8px;color:#8a8e99;font-size:13px}.privacy img{width:17px}@media(max-width:1250px){.page{grid-template-columns:1fr;max-width:1000px}.ad{display:none}.columns{grid-template-columns:210px minmax(420px,1fr) 210px}}@media(max-width:900px){.columns{grid-template-columns:1fr;grid-template-rows:1fr}.tool{height:70px;padding:0;justify-content:center;flex-direction:column;gap:5px}.advanced-tool{min-height:72px}}@media(max-width:620px){.header{height:62px;margin:10px;border-radius:11px;padding:0 11px}.brand{font-size:16px}.brand img{width:23px}.button.light,.primary{font-size:0;padding:0;width:42px;justify-content:center}.settings{width:42px}.page{padding:0 8px}.controls{height:62px;padding:0 9px;gap:7px}.controls span{font-size:11px}.ratio{display:none}}

/* Colored tool icons */
.basic .tool:hover{
  transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(32,34,50,.055);
}
.advanced-tool:hover{
  transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(32,34,50,.05);
}
.tool,.advanced-tool{transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease}
/* Chỉ focus khi click, không focus từ keyboard */
.tool:focus-visible,.advanced-tool:focus-visible{outline:none;box-shadow:none !important;background-color:#fff !important;border-color:#ececf1 !important}
.tool:focus,.advanced-tool:focus{outline:none;box-shadow:none !important;background-color:#fff !important;border-color:#ececf1 !important}

/* Canvas preview layer: video stays underneath as data source, canvas is what the user actually sees */
.stage{flex-shrink:0}
.stage video{display:block;opacity:0;pointer-events:none}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:none;background:#000}
.stage.has-video canvas{display:block}
.stage.has-video .poster,.stage.has-video .empty{display:none}
/* Contain mode: dùng khi đang chỉnh crop (xem toàn khung hình) hoặc đã áp dụng crop (chỉ hiện đúng phần crop, không bị cover cắt thêm) */
.stage--contain canvas{object-fit:contain}

/* Tool active state (button stays highlighted while its panel is open / applied) */
.tool--active{background:#f2efff;border-color:#ddd9ff;color:var(--purple)}
.tool__label{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.tool__label small{font-size:11px;font-weight:500;color:var(--purple);display:none}
.tool--active .tool__label small:not(:empty){display:block}

.advanced-tool b{display:flex;flex-direction:column;align-items:flex-start;font-size:15px;font-weight:500}

/* Shared workspace: inline tool panels below the player controls, instead of modal dialogs */
.workspace{display:none;flex:1;min-height:0;overflow-y:auto}
.workspace.workspace--active{display:flex;flex-direction:column;padding:16px;border-top:1px solid var(--line)}
.tool-panel{display:none}
.tool-panel.tool-panel--active{display:block}
.tool-panel__header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.tool-panel__header strong{font-size:15px}
.tool-panel__actions{margin-left:auto}
.tool-panel__actions{display:flex;gap:8px}

/* Add Text: header only holds title + close; text input & Add/Delete moved below it */
#panelAddText .tool-panel__header{justify-content:space-between}
#panelAddText>textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;padding:8px;font:inherit;resize:vertical;color:var(--text);margin-bottom:14px}
#panelAddText>.tool-panel__actions{margin-bottom:14px;justify-content:flex-end}
.btn-ghost,.btn-primary{height:36px;padding:0 16px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer}
.btn-ghost{border:1px solid var(--line);background:#fff;color:#686d79}
.btn-primary{border:0;background:var(--purple);color:#fff}
.tool-panel__close{width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:20px;line-height:1;color:#686d79;cursor:pointer;display:grid;place-items:center}
.tool-panel__close:hover{background:#faf9ff;border-color:#ddd9ff;color:var(--purple)}
.crop-hint{font-size:12px;color:var(--muted)}

/* Crop selection rect drawn on top of the canvas while editing */
.crop-rect{position:absolute;border:2px solid var(--purple);box-shadow:0 0 0 9999px rgba(0,0,0,.45);cursor:move;touch-action:none}
.crop-rect__handle{position:absolute;width:14px;height:14px;background:#fff;border:2px solid var(--purple);border-radius:50%;touch-action:none}
.crop-rect__handle[data-corner=tl]{left:-7px;top:-7px;cursor:nwse-resize}
.crop-rect__handle[data-corner=tr]{right:-7px;top:-7px;cursor:nesw-resize}
.crop-rect__handle[data-corner=bl]{left:-7px;bottom:-7px;cursor:nesw-resize}
.crop-rect__handle[data-corner=br]{right:-7px;bottom:-7px;cursor:nwse-resize}

/* Transform (Rotate & Flip) / Speed chip options */
.transform-group{margin-bottom:14px}
.transform-group:last-child{margin-bottom:0}
.transform-group__label{display:block;font-size:12px;color:var(--muted);margin-bottom:0px}
.transform-options{display:flex;gap:8px;flex-wrap:wrap}
.transform-chip{height:36px;padding:0 16px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;cursor:pointer;color:var(--text)}
.transform-chip:hover{border-color:#ddd9ff;background:#faf9ff}
.transform-chip--selected{background:var(--purple);border-color:var(--purple);color:#fff}
/* Shape picker (Draw panel): 3 nút mỗi hàng, độ rộng bằng nhau thay vì co theo độ dài chữ */
#drawShapeOptions{display:grid;grid-template-columns:repeat(3,1fr)}
#drawShapeOptions .transform-chip{width:100%;padding:0}

/* Dual-handle trim range: two overlapping <input type=range>, only their thumbs are interactive */
.trim-range{position:relative;height:34px;display:flex;align-items:center}
.trim-range__track{position:absolute;left:0;right:0;height:4px;border-radius:2px;background:var(--line)}
.trim-range__fill{position:absolute;height:4px;border-radius:2px;background:var(--purple)}
.trim-range input[type=range]{position:absolute;left:0;right:0;width:100%;margin:0;height:34px;background:transparent;pointer-events:none;-webkit-appearance:none;appearance:none}
.trim-range input[type=range]::-webkit-slider-runnable-track{background:transparent}
.trim-range input[type=range]::-moz-range-track{background:transparent}
.trim-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:16px;height:16px;border-radius:50%;background:var(--purple);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer}
.trim-range input[type=range]::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;background:var(--purple);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer}
.trim-times{display:flex;justify-content:space-between;margin-top:0px;font-size:12px;color:var(--muted)}

/* Clear separator between the Basic tool buttons and the Video Effects controls/time-range block */
.basic-divider{border:none;border-top:1px solid var(--line);margin:0px -20px 0px;padding:0;width:calc(100% + 34px)}

/* Show divider when any panel below it is active (handles both Video Effects and Add Text controls) */
.basic-divider:has(~ .tool-panel.tool-panel--active){display:block}

/* Show divider in Advanced section (always show since timeline-edits is always present) */
.advanced .basic-divider{display:block}

/* Video Effects: grid chọn filter kèm ảnh mẫu (giống filters-grid của final-ffmpeg-sdk) */
.effects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));align-content:start;gap:8px;flex:1;min-height:0;overflow-y:auto;margin-bottom:4px;padding-right:2px}
#texteffectsGrid .effects-grid{grid-template-columns:repeat(5,1fr);container-type:inline-size}
.effect-card{padding:0;border:0;background:none;font:inherit;cursor:pointer;color:var(--text);text-align:center}
.effect-card__thumb{display:block;position:relative;width:100%;aspect-ratio:1;overflow:hidden;border-radius:8px;background:#eee;border:2px solid transparent;box-sizing:border-box}
.effect-card__canvas{width:100%;height:100%;display:block;object-fit:cover}
.effect-card:hover .effect-card__thumb{border-color:#ddd9ff}
.effect-card--selected .effect-card__thumb{border-color:var(--purple);box-shadow:0 0 0 2px rgba(96,72,245,.25)}
.effect-card__label{display:block;margin-top:4px;font-size:11px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.effect-controls{margin-bottom:14px;padding:12px 14px;border:1.5px solid var(--purple);border-radius:10px;max-height:180px;overflow-y:auto}
.tool-panel__header .effect-controls__title{font-size:13px;font-weight:600;color:var(--purple)}
.control-group{margin-bottom:10px}
.control-group:last-child{margin-bottom:0}
.control-group label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:4px}
.control-value{color:var(--purple);font-weight:600}
.control-group input[type=range]{width:100%;accent-color:var(--purple)}
.control-group textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;padding:8px;font:inherit;resize:vertical;color:var(--text)}
.draw-color-row{display:flex;align-items:center;justify-content:space-between}
.draw-color-row label{margin-bottom:0;display:flex;align-items:center;gap:6px}
.control-group input[type=color]:not(.color-swatch){width:36px;height:28px;border:none;border-radius:6px;padding:0;cursor:pointer;background:none}
.control-group input[type=color]:disabled{opacity:.4;cursor:not-allowed}

/* Add Text panel: labeled sections + toggle-collapsible sub-controls (Background/Shadow/Border) */
.control-section{margin-bottom:10px}
.control-section:last-of-type{margin-bottom:0}
.control-section__title{font-size:11px;font-weight:700;color:var(--text);letter-spacing:.02em;margin-bottom:4px;line-height:1.2;display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:32px}
.control-toggle{cursor:pointer;display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
.control-group--inline{display:flex;align-items:center;justify-content:space-between;gap:10px}
.control-group--inline label{margin-bottom:0}
.control-group--inline select,.control-group--slider-row select{padding:6px 28px 6px 10px;border:1px solid var(--line);border-radius:6px;background:#fafafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237d8290' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 6px center;font:inherit;font-size:13px;color:var(--text);-webkit-appearance:none;appearance:none;cursor:pointer;outline:none;transition:border-color .15s}
.control-group--inline select:hover,.control-group--slider-row select:hover{border-color:var(--purple)}
.control-group--inline select:focus,.control-group--slider-row select:focus{border-color:var(--purple);box-shadow:0 0 0 2px rgba(96,72,245,.15)}
.control-group--slider-row{display:flex;align-items:center;gap:10px;min-height:32px}
.control-group--slider-row label{margin-bottom:0;flex-shrink:0}
.control-group--slider-row input[type=range]{width:auto;flex:1;margin:0}
.control-group--slider-row .control-value{flex-shrink:0}
.control-group--slider-row .color-swatch{flex-shrink:0}
.control-group--slider-row select{flex-shrink:0;width:auto}
.control-section__title .color-swatch{flex-shrink:0}
.control-section__title input[type=range]{flex:1;width:auto;min-width:0;margin:0 4px;accent-color:var(--purple)}
.control-toggle input[type=checkbox]{width: 24px;height:24px;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none;border:1.5px solid var(--line);border-radius:50%;background:#fff;position:relative;transition:border-color .15s,background .15s}
.control-toggle input[type=checkbox]:checked{background:var(--purple);border-color:var(--purple)}
.control-toggle input[type=checkbox]:checked::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.color-row{display:flex;align-items:center;justify-content:space-between}
.color-row label{margin-bottom:0}
.color-swatch{width:32px;height:32px;border:1px solid rgba(0,0,0,0.1);border-radius:8px;padding:0;cursor:pointer;background:none}
.color-swatch:disabled{opacity:.4;cursor:not-allowed}
.is-disabled-group{opacity:.45;pointer-events:none;transition:opacity .15s}

/* Add Text / Add Image / Draw: list of items already added to the overlay */
.overlay-item-list{margin-top:14px;border-top:1px dashed var(--line);padding-top:10px}
.overlay-item-row{display:flex;align-items:center;gap:8px;padding:7px 6px;border-radius:8px;cursor:pointer}
.overlay-item-row:hover{background:#faf9ff}
.overlay-item-row__label{flex:1;font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.overlay-item-row__remove{border:none;background:none;color:var(--muted);cursor:pointer;font-size:15px;padding:2px 6px;line-height:1}
.overlay-item-row__remove:hover{color:#e5484d}

/* Video Effects: list of effects already added */
.effect-item-row{display:flex;align-items:center;gap:8px;padding:7px 6px;border-radius:8px;cursor:pointer}
.effect-item-row:hover{background:#faf9ff}
.effect-item-row__label{flex:1;font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.effect-item-row__remove{border:none;background:none;color:var(--muted);cursor:pointer;font-size:15px;padding:2px 6px;line-height:1}
.effect-item-row__remove:hover{color:#e5484d}

/* Draw tool: transparent canvas layer overlaid on the stage for freehand strokes */
#drawLiveCanvas{position:absolute;inset:0;width:100%;height:100%;display:none;background:transparent;cursor:crosshair;touch-action:none;pointer-events:none}

/* Add Text: interactive box for drag-to-move, drag-corner-to-scale, drag-handle-to-rotate */
.overlay-box{position:absolute;border:1.5px dashed var(--purple);cursor:move;touch-action:none;box-sizing:border-box;min-width:40px}
.overlay-box[hidden]{display:none}
.overlay-box__resize{position:absolute;right:-8px;bottom:-8px;width:16px;height:16px;border-radius:50%;background:var(--purple);border:2px solid #fff;cursor:nwse-resize;touch-action:none}
.overlay-box__rotate{position:absolute;top:-34px;left:50%;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;background:var(--purple);color:#fff;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;cursor:grab;touch-action:none}
.overlay-box__rotate-line{position:absolute;top:-12px;left:50%;width:1.5px;height:12px;background:var(--purple);transform:translateX(-50%);pointer-events:none}

/* Add Text: live DOM+CSS preview shown inside #overlayBox for ALL text (with or without effect) —
   rasterized to PNG via modern-screenshot only when the item is committed, see overlay-filter.js.
   The stage is sized to its OWN natural content box (fontSize is stored in video-pixel units), then
   scaled down with a CSS transform to fit the (smaller, screen-CSS-px) #overlayBox — this keeps the
   live preview pixel-identical to the rasterized PNG instead of stretching/squashing text to fill a
   differently-scaled container. */
.text-fx-live{position:absolute;top:0;left:0;pointer-events:none;transform-origin:0 0}
.text-fx-live[hidden]{display:none}
.text-fx-stage{box-sizing:border-box;white-space:pre;text-align:left;font-family:sans-serif;font-size:var(--fx-font-size, 16px)}

/* Add Text: tabs + grids for choosing a Static / Animated text effect (giống #effectsGrid của Video Effects) */
#texteffectsGrid{display:grid;grid-template-columns:1fr auto;gap:10px}
.text-fx-tabs{display:flex;gap:4px;margin:0;background:#f2f1f7;padding:4px;border-radius:10px;grid-column:1}
#textfxSpeedRow{grid-column:2;margin:0!important}
.textfx-panel{grid-column:1/-1}
.text-fx-tab{flex:1;padding:7px 4px;border:none;background:transparent;border-radius:8px;cursor:pointer;font:inherit;font-size:12px;font-weight:600;color:var(--muted)}
.text-fx-tab--active{background:var(--purple);color:#fff}
.text-fx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;max-height:220px;overflow-y:auto;padding-right:2px}
.text-fx-item{padding:8px 4px;border:1px solid #e5e7eb;border-radius:8px;background:#00000000;cursor:pointer;text-align:center;font-size:var(--text-fx-item-size,8px);color:#1c1d22;white-space:normal;word-break:break-word;overflow:hidden;line-height:1.2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .2s ease}
.text-fx-item__inner{max-width:100%}
.text-fx-item--selected{
    background: linear-gradient(90deg, rgb(42, 123, 155) 0%, rgb(87, 199, 133) 50%, rgb(237, 221, 83) 100%);
    border-color: #ddd9ff;
    color: var(--purple);

}
.text-fx-item--none{background:#fff;color:var(--text);border:1px solid var(--line)}
.text-fx-item--none.text-fx-item--selected{
    background: linear-gradient(90deg, rgb(42, 123, 155) 0%, rgb(87, 199, 133) 50%, rgb(237, 221, 83) 100%);
    border-color: #ddd9ff;
    color: var(--purple);
}

/* In/Out/Attention tabs (4-tab #texteffectsGrid, see buildTextFxGrids() in overlay-filter.js) */
.textfx-speed{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;margin-bottom:10px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12px;color:var(--muted);font-weight:700}
.textfx-speed select{border:0;background:transparent;font:inherit;font-weight:800;color:var(--text);cursor:pointer;outline:none}
.textfx-panel{display:none;grid-column:1/-1}
.textfx-panel.textfx-panel--active{display:grid}
.textfx-anim-card{padding:4px;border:1px solid #e5e7eb;border-radius:8px;background:#00000000;cursor:pointer;aspect-ratio:1;display:grid;grid-template-rows:1fr auto;align-items:center;justify-items:center;gap:2px;overflow:hidden;transition:all .2s ease}
.textfx-anim-card--selected{
    background: linear-gradient(90deg, rgb(42, 123, 155) 0%, rgb(87, 199, 133) 50%, rgb(237, 221, 83) 100%);
    border-color: #ddd9ff;
    color: var(--purple);

}
.textfx-anim-box{width:32px;height:32px;border-radius:8px;background:#7c3aed;flex-shrink:0;grid-row:1}
.textfx-anim-label{font-size:9px;color:var(--muted);font-weight:600;text-align:center;white-space:normal;word-break:break-word;line-height:1;grid-row:2}


/* Timeline / Edits: list of all effect items */
.columns{display:grid;grid-template-columns:230px minmax(420px,1fr) 300px;grid-template-rows:1fr;gap:10px;align-items:stretch;flex:1;min-height:0}
.timeline-edits{display:none;padding-top:0px;border-top:0px solid var(--line);margin-top:auto}
.timeline-edits.timeline-edits--show{display:block}
.timeline-edits__header{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.timeline-edits__header::before{content:"☰";font-size:16px}
.timeline-edits__list{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto}
.timeline-edit-item{display:flex;align-items:center;gap:8px;padding:0px;border-radius:6px;cursor:pointer}
.timeline-edit-item:hover{background:#f2efff}
.timeline-edit-item__icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.timeline-edit-item__icon img{width:24px;height:24px}
.timeline-edit-item__icon svg{width:24px;height:24px}
.timeline-edit-item__bar{flex:1;height:18px;border-radius:4px;position:relative;overflow:hidden}
.timeline-edit-item__bar-fill{position:absolute;height:8px;background:var(--purple);opacity:0.85;top:50%;transform:translateY(-50%);border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,0.15)}
.timeline-edit-item__time{display:none}
@media(max-width:1250px){.columns{grid-template-columns:210px minmax(420px,1fr) 320px;grid-template-rows:1fr}}

/* Hide right panel entirely (and reclaim its width for center) when no tool panel is open and no timeline items exist */
.panel.advanced:not(:has(.tool-panel--active, .timeline-edits--show)){display:none}
.columns:has(.panel.advanced:not(:has(.tool-panel--active, .timeline-edits--show))){grid-template-columns:250px minmax(420px,1fr)}

/* ===== Export dialog ===== */
:root{--exp-accent:#f59e0b;--exp-accent-hover:#d97706;--exp-border:#ececf1}
.dialog-overlay{display:none;position:fixed;inset:0;background:rgba(15,17,24,.5);z-index:1000;align-items:center;justify-content:center;padding:16px}
.dialog-overlay--open{display:flex}
.dialog{background:#fff;border-radius:16px;width:100%;max-width:600px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(20,20,40,.25)}
.dialog__header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 6px}
.dialog__title{font-size:19px;font-weight:700;color:var(--text)}
.dialog__close{width:32px;height:32px;border:none;background:none;border-radius:50%;cursor:pointer;color:var(--muted);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center}
.dialog__close:hover{background:#f2f2f5;color:var(--text)}
.dialog__body{padding:6px 20px 4px}
.dialog__divider{margin:16px 0;border:none;border-top:1px solid var(--exp-border)}
.dialog__footer{display:flex;justify-content:flex-end;padding:16px 20px;margin-top:12px;border-top:1px solid var(--exp-border)}
.form-group{margin-bottom:16px}
.form-group__label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px}
.format-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.format-chips+.format-chips{margin-top:8px}
.format-chip{padding:10px 6px;border:1.5px solid var(--exp-border);border-radius:9px;background:#fafafb;font:inherit;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;text-align:center;transition:all .15s}
.format-chip:hover{border-color:var(--exp-accent)}
.format-chip--selected{border-color:var(--exp-accent);background:rgba(245,158,11,.1);color:var(--exp-accent)}
.format-chip:disabled{opacity:.35;pointer-events:none}
.settings-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.setting-item{display:flex;flex-direction:column;gap:6px}
.setting-item__label{font-size:12px;color:var(--muted);font-weight:600}
.setting-item__select{padding:10px 30px 10px 12px;border:1.5px solid var(--exp-border);border-radius:9px;font:inherit;font-size:13px;color:var(--text);background:#fafafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237d8290' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;-webkit-appearance:none;appearance:none;cursor:pointer;width:100%}
.setting-item__select:focus{outline:none;border-color:var(--exp-accent)}
.dialog-btn{padding:0 22px;height:44px;border:none;border-radius:10px;font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.dialog-btn--apply{background:var(--exp-accent);color:#fff}
.dialog-btn--apply:hover{background:var(--exp-accent-hover)}
.dialog-btn--apply:disabled{opacity:.5;cursor:not-allowed}

/* ===== Progress dialog (matches final-ffmpeg-sdk's #dlgProgress) ===== */
.dialog--progress{max-width:360px;padding:16px 16px 24px}
.dialog--progress .dialog__body{padding:0}
.progress-header{text-align:center;margin-bottom:16px}
.progress-header__filename{font-size:16px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;line-height:1.4;word-break:break-all}
.progress-circle-wrap{position:relative;width:160px;height:160px;margin:0 auto 24px}
.progress-circle{width:100%;height:100%;transform:rotate(-90deg)}
.progress-circle__bg{fill:none;stroke:#f0f0f3;stroke-width:8}
.progress-circle__fill{fill:none;stroke:var(--exp-accent);stroke-width:8;stroke-linecap:round;stroke-dasharray:326.73;stroke-dashoffset:326.73;transition:stroke-dashoffset .3s ease}
.progress-circle__content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.progress-circle__percent{font-size:36px;font-weight:700;color:var(--text);line-height:1}
.progress-circle__time{font-size:12px;color:var(--muted);margin-top:6px}
.progress-notice{text-align:center;font-size:12px;color:var(--muted);margin-bottom:24px;opacity:.7}
.progress-cancel{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 28px;border:1.5px solid var(--exp-border);border-radius:100px;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;margin:0 auto}
.progress-cancel:hover{border-color:#ef4444;color:#ef4444;background:rgba(239,68,68,.06)}
.progress-cancel:disabled{opacity:.4;cursor:not-allowed}

/* ===== Result dialog (matches final-ffmpeg-sdk's #dlgResult) ===== */
.dialog--result{max-width:480px;padding:0;overflow:hidden}
.dialog--result .dialog__body{padding:0}
.dialog--result .dialog__close{position:absolute;top:8px;right:8px;z-index:10;background:rgba(0,0,0,.45);border-radius:50%;width:32px;height:32px;color:#fff}
.result-video{width:100%;aspect-ratio:16/9;background:#000;position:relative}
.result-video video{width:100%;height:100%;object-fit:contain}
.result-info{padding:16px 24px;text-align:center;background:#fafafb}
.result-info__name{font-size:14px;font-weight:500;color:var(--text);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.result-info__meta{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.result-info__dot{color:var(--muted);opacity:.5}
.result-actions{display:flex;gap:24px;padding:16px;background:#fafafb;border-top:1px solid var(--exp-border)}
.result-btn{flex:1;padding:12px 16px;height:44px;border:none;border-radius:10px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}
.result-btn--close{background:transparent;color:var(--muted);border:1.5px solid var(--exp-border)}
.result-btn--close:hover{background:rgba(239,68,68,.1);color:#ef4444;border-color:#ef4444}
.result-btn--download{background:var(--exp-accent);color:#fff}
.result-btn--download:hover{background:var(--exp-accent-hover)}