body.editorOpen{overflow:hidden;touch-action:pan-x}
#editor{position:fixed;inset:0;top:var(--editor-top,0px);z-index:20;width:100%;height:var(--editor-height,100dvh);display:flex;flex-direction:column;background:#090a0c;color:#f4f4f5;overflow:hidden;overscroll-behavior:none;font-family:system-ui,-apple-system,sans-serif}
#editor button{font-size:inherit}
.editorHeader{position:relative;flex:none;min-height:54px;padding:4px 12px;display:flex;align-items:center;justify-content:space-between;gap:5px;border-bottom:1px solid #25272c;background:#111216}
body.telegramFullscreen .editorHeader{min-height:calc(54px + max(var(--editor-safe-top,0px),env(safe-area-inset-top,0px)));padding-top:calc(4px + max(var(--editor-safe-top,0px),env(safe-area-inset-top,0px)))}
/* Mobile Telegram clients draw their own controls over the right edge of the fullscreen header. */
body.telegramFullscreen .editorHeader{padding-right:96px}
.editorHeader strong{position:absolute;left:50%;transform:translateX(-50%);font-size:14px;letter-spacing:.08em;pointer-events:none}
body.telegramFullscreen .editorHeader strong{left:calc(50% - 42px)}
.editorHeader .headerActions{display:flex;align-items:center;gap:2px;margin-left:auto}
#editor .editorGhost,#editor .editorIcon{border:0;background:none;color:#e6e7e9;min-height:38px;padding:4px 7px;font-weight:500;border-radius:9px}
#editor .editorIcon{font-size:25px;min-width:34px}
#editor .editorIcon:disabled{opacity:.35}
#editor #editorDone{min-height:36px;padding:6px 11px;border-radius:10px;background:#f5cc49;color:#111;font-size:14px;font-weight:750;white-space:nowrap}
.editorStage{min-height:0;flex:1;display:flex;flex-direction:column;padding:5px 12px 3px;background:#090a0c}
.editorMeta{flex:none;display:flex;justify-content:space-between;gap:8px;max-width:560px;width:100%;align-self:center;color:#8b909b;font-size:11px;line-height:1.25;min-height:17px}
.editorMeta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.editorMeta span:first-child{flex:1}
.previewWrap{position:relative;min-height:0;flex:1;display:flex;align-items:center;justify-content:center}
.editorBackSwipe{position:absolute;z-index:2;inset:0 auto 0 -12px;width:40px;touch-action:none}
#editor .preview{width:auto;height:100%;max-width:100%;max-height:100%;aspect-ratio:1;position:relative;display:grid;place-items:center;border:0;border-radius:3px;background:#000;overflow:hidden;margin:0;box-shadow:0 0 0 1px #2b2c31}
#editor .preview canvas{display:block;width:100%;height:100%;aspect-ratio:1}
#editor .preview #captionCanvas{position:absolute;inset:0;pointer-events:none}
#editor .preview.isCircle{border-radius:50%}
#editor .preview.isSource canvas{aspect-ratio:auto}
#editor .preview video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.stageControls{flex:none;min-height:43px;display:flex;align-items:center;gap:5px;color:#bfc3ca;font-variant-numeric:tabular-nums;font-size:12px}
.stageControls #previewPlay{font-size:18px;width:36px;flex:none}
.stageControls #previewTime{white-space:nowrap}
.historyControls{display:flex;align-items:center;gap:1px;margin-left:auto}
#editor .historyControls .editorIcon{min-width:36px;padding:4px 5px;font-size:23px}
.stageControls #previewMask{margin-left:0;font-size:12px;white-space:nowrap;color:#f5cc49}
.editorStatus{flex:none;min-height:0;max-height:42px;overflow:hidden;color:#aeb5bf;font-size:11px;text-align:center;line-height:1.25}
.editorStatus:not(:empty){padding:1px 4px 4px}
.editorStatus.error{color:#ffaaa7}.editorStatus.ok{color:#a7e8b8}
.editorBottom{flex:none;max-height:min(47dvh,345px);display:flex;flex-direction:column;background:#17191e;border-top:1px solid #292c33;padding-bottom:env(safe-area-inset-bottom,0px)}
body.telegramFullscreen .editorBottom{padding-bottom:max(var(--editor-safe-bottom,0px),env(safe-area-inset-bottom,0px))}
#editorTools{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain}
.toolPanel{padding:12px 15px 7px;min-height:108px;max-width:650px;margin:0 auto}
.toolHeading{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#d7d9dd;font-size:12px;font-variant-numeric:tabular-nums;margin:1px 0 8px}
.toolHeading strong{font-size:14px}.toolHeading b{font-weight:650;color:#f5cc49}
.toolHint{color:#8d949e;font-size:11px;line-height:1.3;margin:9px 0 0}
.timeline{position:relative;height:72px;background:#33363c;border-radius:6px;touch-action:none;overflow:hidden;user-select:none}
.timelineFrames{height:100%;width:100%;display:flex;overflow:hidden;align-items:stretch}
.timelineFrames img{height:100%;min-width:0;flex:1;object-fit:cover;border-right:1px solid #17191e}
.trimSelection{position:absolute;top:0;bottom:0;left:0;right:0;border:3px solid #f5cc49;border-radius:5px;background:rgba(245,204,73,.06);pointer-events:none}
.trimHandle{position:absolute;top:-3px;bottom:-3px;width:19px;background:#f5cc49;border-radius:5px;pointer-events:auto;touch-action:none}
#trimLeft{left:-3px}#trimRight{right:-3px}
.trimHandle:after{content:'';position:absolute;top:28px;left:8px;width:3px;height:16px;border-radius:2px;background:#222}
.timelinePlayhead{position:absolute;top:-3px;bottom:-3px;left:0;width:2px;background:#fff;box-shadow:0 0 3px #000;pointer-events:none}
.adjustItems,.filterItems{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:1px 0 10px;touch-action:pan-x}
.adjustItems::-webkit-scrollbar,.filterItems::-webkit-scrollbar{display:none}
#editor .adjustItems button,#editor .filterItems button{flex:none;min-width:78px;min-height:56px;padding:6px 7px;display:flex;flex-direction:column;gap:2px;border-radius:12px;border:1px solid #3d4149;background:#24272d;color:#cbd0d7;font-size:11px;font-weight:500}
#editor .adjustItems button span{font-size:22px;line-height:23px}
#editor .adjustItems button.active,#editor .filterItems button.active{border-color:#f5cc49;color:#f5cc49;background:#302b1c}
#editor input[type=range]{width:100%;accent-color:#f5cc49;height:25px;margin:1px 0}
.toolRange{margin:5px 0 8px}.toolRange label{display:flex;justify-content:space-between;font-size:12px;color:#d9dce0}
#editor .captionRow input{font-size:16px;background:#25282f;color:#fff}
#editor .captionRow button{min-height:43px;font-size:13px}
.audioSwitch{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:65px;font-size:14px}.audioSwitch input{width:23px;height:23px;accent-color:#f5cc49}.audioSwitch span:last-child{color:#f5cc49;font-size:12px}
.editorToolbar{flex:none;display:flex;justify-content:space-around;overflow-x:auto;gap:2px;padding:5px 5px 1px;border-top:1px solid #292c33;scrollbar-width:none;touch-action:pan-x}
.editorToolbar::-webkit-scrollbar{display:none}
#editor .editorToolbar button{min-width:54px;max-width:82px;flex:1;min-height:55px;padding:3px 1px;display:flex;flex-direction:column;gap:1px;border:0;background:none;color:#a2a8b2;font-size:10px;font-weight:500}
#editor .editorToolbar button span{font-size:23px;line-height:26px}
#editor .editorToolbar button.active{color:#f5cc49}
.saveState{flex:none;min-height:15px;text-align:center;color:#777f8b;font-size:10px;line-height:15px}
.editorHidden{display:none}
.reviewTitle{font-size:17px;font-weight:700}.toolPanel[data-panel=review] #send{width:100%;margin-top:10px;font-size:14px;min-height:44px}.reviewHistory{color:#929aa5;font-size:11px;line-height:1.3;max-height:60px;overflow-y:auto}.reviewHistory p{margin:4px 0}
@media(max-height:650px){.editorBottom{max-height:45dvh}.timeline{height:54px}.toolPanel{padding-top:7px;min-height:88px}.stageControls{min-height:38px}.editorMeta{display:none}}
@media(max-width:360px){body.telegramFullscreen #editor #editorDone{padding-inline:7px}.stageControls{gap:2px}#editor .historyControls .editorIcon{min-width:32px;padding:4px 2px}.stageControls #previewPlay{width:32px}}