:root{
  --bg:#fff;
  --surface:#fff;
  --soft:#f6f7fa;
  --line:#e4e6eb;
  --text:#202124;
  --muted:#7c8088;
  --accent:#5c6ee8;
  --accent-soft:#eef0ff;
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Arial,Tahoma,sans-serif}
body{overflow-x:hidden}
button,input{font:inherit}
button{border:0;cursor:pointer}
.editor-app{min-height:100dvh;background:#fff;display:flex;flex-direction:column}
.editor-header{
  height:76px;min-height:76px;background:#fff;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 18px;
  position:sticky;top:0;z-index:30
}
.header-center{text-align:center;display:flex;flex-direction:column;gap:5px}
.header-center strong{font-size:20px}
.header-center span{font-size:12px;color:var(--muted)}
.header-actions{display:flex;align-items:center;justify-content:flex-start;gap:10px}
.header-btn,.quality-btn,.header-plus{
  height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center
}
.header-btn{padding:0 20px;background:#f4f5f8;color:var(--text)}
.save-btn{background:var(--accent);color:#fff;font-weight:700}
.cancel-btn{justify-self:end}
.header-plus{
  width:46px;background:#f1f2f5;color:var(--text);font-size:30px;line-height:1
}
.quality-btn{padding:0 20px;background:#f4f5f8;color:#303238;gap:5px}
.editor-main{width:min(1180px,100%);margin:0 auto;display:flex;flex-direction:column;flex:1}
.media-area{padding:18px 18px 0}
.stage{
  width:100%;height:min(58dvh,650px);min-height:330px;
  background:#f5f6f8;border:1px solid var(--line);border-radius:22px;
  display:flex;align-items:center;justify-content:center;overflow:auto;position:relative
}
.stage canvas{display:block;max-width:none;touch-action:none}
.empty-stage{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--muted)}
.empty-stage.hidden{display:none}
.empty-plus{
  width:62px;height:62px;border-radius:18px;background:var(--accent);color:#fff;
  font-size:38px;line-height:1
}
.media-tools{display:flex;align-items:center;justify-content:space-between;padding:12px 2px}
.zoom-tools,.history-row{display:flex;align-items:center;gap:7px}
.zoom-tools button,.history-btn{
  min-width:40px;height:38px;border:1px solid var(--line);background:#fff;border-radius:11px;color:var(--text)
}
.zoom-tools strong{min-width:55px;text-align:center;font-size:13px}
.history-btn{font-size:21px;color:#555}
.history-btn:disabled{opacity:.35;cursor:default}
.control-panel{
  margin:0 18px;background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:14px 16px;box-shadow:0 5px 22px #1b25400b
}
.control-panel:not(.has-image){opacity:.65}
.control-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.control-header div{display:flex;flex-direction:column;gap:3px}
.control-header span{font-size:11px;color:var(--muted)}
.control-header strong{font-size:16px}
.control-header output{font-size:14px;font-weight:700;color:var(--accent)}
.inline-options{
  display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;
  scrollbar-width:none
}
.inline-options::-webkit-scrollbar{display:none}
.inline-option{
  flex:0 0 auto;min-width:78px;height:58px;border:1px solid var(--line);border-radius:14px;
  background:#fafbfc;color:#4b4e55;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px
}
.inline-option i{font-style:normal;font-size:18px}
.inline-option.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700}
.slider-row{padding:3px 4px 2px}
.slider-row input{width:100%;accent-color:var(--accent)}
.inline-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.inline-action{
  min-height:38px;padding:0 14px;border:1px solid var(--line);border-radius:11px;background:#f7f8fa;color:#444
}
.inline-action.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.status-row{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;padding:9px 20px}
.editor-toolbar{
  margin:0 18px;border:1px solid var(--line);border-radius:20px;background:#fff;
  padding:10px 8px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none
}
.editor-toolbar::-webkit-scrollbar{display:none}
.tool{
  flex:1 0 72px;min-width:72px;height:70px;border-radius:15px;background:#fff;color:#686c74;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px
}
.tool i{font-style:normal;font-size:24px;line-height:1}
.tool span{font-size:12px}
.tool.active{background:var(--accent-soft);color:var(--accent);font-weight:700}
.mode-tabs{display:flex;justify-content:center;gap:34px;padding:12px 0 18px}
.mode-tab{background:transparent;color:#7a7d84;padding:6px 10px;font-size:14px}
.mode-tab.active{color:var(--accent);font-weight:700;border-bottom:3px solid var(--accent)}
#toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:#202124;color:#fff;padding:10px 16px;border-radius:12px;font-size:13px;z-index:100;transition:.2s
}
#toast.show{opacity:1;transform:translate(-50%,0)}
[hidden]{display:none!important}

/* The old sheet/backdrop are intentionally absent from the DOM. */
.sheet-backdrop,.tool-sheet{display:none!important}

/* Keep the functional video engine out of the image editor until its own workflow opens it. */
.video-deck{display:none}

/* Clean editor behavior on phones */
@media(max-width:700px){
  .editor-header{height:66px;min-height:66px;padding:0 10px;grid-template-columns:1fr auto 1fr}
  .header-btn{padding:0 13px;height:42px}
  .header-plus{width:42px;height:42px;font-size:28px}
  .quality-btn{height:42px;padding:0 12px}
  .header-center strong{font-size:18px}
  .header-center span{display:none}
  .header-actions{gap:6px}
  .stage{height:46dvh;min-height:280px;border-radius:16px}
  .media-area{padding:10px 10px 0}
  .control-panel{margin:0 10px;padding:12px}
  .editor-toolbar{margin:0 10px;border-radius:17px}
  .status-row{padding-inline:12px}
  .tool{flex-basis:70px;min-width:70px;height:66px}
  .inline-option{min-width:74px;height:54px}
}
@media(max-width:430px){
  .header-actions{gap:4px}
  .save-btn{padding-inline:11px}
  .quality-btn{padding-inline:9px}
  .cancel-btn{padding-inline:10px}
}


/* ===== Performance / interaction polish ===== */
button, .tool, .inline-option, .inline-action, .header-btn, .quality-btn, .header-plus{
  -webkit-tap-highlight-color:transparent;
  transition:transform .14s ease, background-color .14s ease, border-color .14s ease, opacity .14s ease;
}
button:not(:disabled):active{transform:scale(.97)}
input[type="range"]{touch-action:pan-y}
.stage{overscroll-behavior:contain;contain:layout paint}
.stage canvas{will-change:contents}
.inline-options,.editor-toolbar{overscroll-behavior-x:contain}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ===== Video studio: clean inline workspace, never a blocking sheet ===== */
.video-deck{
  display:none;
  margin:0 18px 18px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  box-shadow:0 8px 28px rgba(20,25,45,.07);
}
.video-deck.open{display:block}
.video-deck-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.video-project{display:flex;align-items:center;gap:9px;min-width:0}
.video-project b{font-size:13px;letter-spacing:.06em}
.video-project small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.video-live{width:8px;height:8px;border-radius:50%;background:#5c6ee8;box-shadow:0 0 0 5px #eef0ff}
.video-head-actions{display:flex;gap:7px}
.video-head-actions button,.video-quick-tools button{
  min-height:38px;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:#f7f8fa;color:#34363b
}
.video-transport{display:grid;grid-template-columns:auto auto 1fr auto auto;gap:10px;align-items:center}
.video-transport button{width:38px;height:38px;border-radius:11px;background:#f3f4f7;color:#333}
.video-play{background:var(--accent)!important;color:#fff!important}
.video-transport span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.video-scrub{height:8px;background:#eceef2;border-radius:99px;position:relative;cursor:pointer;overflow:hidden}
.video-scrub-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);border-radius:inherit}
.video-playhead{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);left:0}
.video-timeline-wrap{margin-top:14px}
.video-ruler{height:18px}
.video-timeline{height:72px;border:1px solid var(--line);border-radius:13px;background:#f7f8fa;position:relative;overflow:hidden}
.video-clips{display:flex;height:100%;gap:4px;padding:6px}
.video-clip{
  flex:1;min-width:100px;border:1px solid #dfe2e8;border-radius:9px;background:#fff;
  display:flex;align-items:center;justify-content:center;gap:7px;padding:0 8px;cursor:pointer;color:#656971
}
.video-clip.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.video-clip-index{font-weight:700}
.video-clip-label{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trim-window{position:absolute;top:2px;bottom:2px;border:2px solid var(--accent);border-radius:10px;pointer-events:none}
.trim-handle{position:absolute;top:50%;width:10px;height:34px;background:var(--accent);border-radius:7px;transform:translateY(-50%);pointer-events:auto}
.trim-left{left:-6px}.trim-right{right:-6px}
.video-controls-grid{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:10px;margin-top:12px}
.video-control-card{border:1px solid var(--line);border-radius:13px;padding:11px;background:#fff}
.video-control-card>span{display:block;font-size:12px;color:var(--muted);margin-bottom:8px}
.video-chips{display:flex;gap:5px;flex-wrap:wrap}
.video-chips button{padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:#f7f8fa;font-size:11px}
.video-chips button.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.video-trim-values{display:flex;justify-content:space-between;font-size:11px;color:var(--accent);margin-bottom:4px}
.dual-range{display:grid;gap:3px}
.dual-range input,.video-control-card>input{width:100%;accent-color:var(--accent)}
.video-control-card small{color:var(--muted);font-size:11px}
.video-quick-tools{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.video-quick-tools .video-export{background:var(--accent);color:#fff;border-color:var(--accent)}
body.video-mode .editor-toolbar{opacity:.65}
@media(max-width:700px){
  .video-deck{margin:0 10px 10px;padding:10px}
  .video-transport{grid-template-columns:auto auto 1fr auto}
  #videoMute{display:none}
  .video-controls-grid{grid-template-columns:1fr}
  .video-head-actions button{padding-inline:9px}
}

/* Professional editor additions: export quality menu and expanded tools */
.quality-wrap{position:relative;display:flex;align-items:center}
.quality-menu{position:absolute;top:calc(100% + 10px);right:0;width:min(270px,calc(100vw - 24px));z-index:80;padding:12px;display:flex;flex-direction:column;gap:7px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 38px rgba(18,25,45,.16);text-align:right}
.quality-menu[hidden]{display:none!important}
.quality-menu strong{font-size:13px;margin:2px 4px 5px}
.quality-menu button{padding:10px 12px;border-radius:10px;background:#f7f8fb;color:var(--text);text-align:right;border:1px solid transparent;font-size:13px}
.quality-menu button.selected{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:700}
.quality-menu small{font-size:11px;line-height:1.5;color:var(--muted);padding:3px 4px}
.size-field{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);min-width:100px;flex:1}
.size-field input{height:38px;width:100%;min-width:0;border:1px solid var(--line);border-radius:10px;padding:0 10px;color:var(--text);background:#fff}
.tool[hidden]{display:none!important}
.control-panel.is-simple .slider-row{display:none}
.inline-actions .size-field{margin:0}
@media(max-width:700px){
  .quality-menu{right:auto;left:0}
  .header-actions{min-width:0}
  .quality-btn{white-space:nowrap;font-size:12px}
}

/* Sticker library and selected-element controls */
.sticker-categories{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:thin;width:100%;}
.sticker-categories .inline-action{white-space:nowrap;min-height:34px;padding:0 11px;font-size:12px;}
.sticker-search{width:100%;height:40px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:0 12px;color:var(--text);outline:none;margin:4px 0 9px;}
.sticker-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.sticker-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;max-height:210px;overflow:auto;padding:2px 1px 8px;overscroll-behavior:contain;}
.sticker-pick{min-width:0;min-height:42px;border:1px solid #edf0f4;border-radius:10px;background:#fafbfc;font-size:25px;display:flex;align-items:center;justify-content:center;line-height:1.2;}
.sticker-pick:active{background:var(--accent-soft);border-color:var(--accent);transform:scale(.96);}
.sticker-edit-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:10px;margin-top:4px;}
.sticker-edit-controls label{display:flex;align-items:center;gap:8px;flex:1;min-width:160px;font-size:12px;color:var(--muted);}
.sticker-edit-controls input{width:100%;min-width:70px;accent-color:var(--accent);}
#inlineActions:has(.sticker-grid){display:block;}
#inlineActions:has(.sticker-grid) .sticker-edit-controls{display:flex;}
#inlineActions:has(.sticker-grid) .sticker-edit-controls .inline-action{white-space:nowrap;}
.stage canvas{touch-action:none;user-select:none;-webkit-user-select:none;}
@media(max-width:700px){
 .sticker-grid{grid-template-columns:repeat(6,minmax(0,1fr));max-height:190px;gap:5px;}
 .sticker-pick{min-height:40px;font-size:23px;}
 .sticker-categories .inline-action{padding:0 9px;}
}


/* Video studio takes priority over photo tools while a video project is open. */
body.video-mode,
body.video-mode .editor-app,
body.video-mode .editor-main{background:#08090d;color:#f5f5f7}
body.video-mode .editor-header{background:#08090d;border-color:#25262d;color:#f5f5f7;position:relative}
body.video-mode .header-center strong{color:#fff}
body.video-mode .header-center span{color:#9b9da8}
body.video-mode .header-btn:not(.save-btn),body.video-mode .quality-btn,body.video-mode .header-plus{background:#22232b;color:#f6f6f8}
body.video-mode .media-area{padding:10px 12px 0}
body.video-mode .stage{height:clamp(260px,48dvh,560px);min-height:260px;background:#000;border:1px solid #30313a;border-radius:14px;contain:strict;overflow:hidden}
body.video-mode #canvas{object-fit:contain;max-width:100%;max-height:100%;}
body.video-mode .media-tools,
body.video-mode #inlineControls,
body.video-mode .status-row,
body.video-mode #bottomTools,
body.video-mode .mode-tabs{display:none!important}
body.video-mode .video-deck{display:block;margin:8px 10px 16px;padding:12px 10px 18px;border:0;border-radius:0;background:#08090d;color:#f5f5f7;box-shadow:none}
body.video-mode .video-deck-head{margin:0 4px 18px}
body.video-mode .video-project b{color:#f4f4f8;font-size:12px;letter-spacing:.12em}
body.video-mode .video-project small{color:#8e91a0}
body.video-mode .video-live{background:#e8c64c;box-shadow:0 0 0 5px #282414}
body.video-mode .video-head-actions{align-items:center;flex-wrap:wrap;justify-content:flex-start}
body.video-mode .video-head-actions button{background:#202127;color:#dddde4;border-color:#2b2c34;min-height:36px;padding:0 10px}
body.video-mode .video-transport{grid-template-columns:42px auto minmax(40px,1fr) auto;gap:9px;margin:12px 2px 22px}
body.video-mode .video-transport .video-play{width:42px;height:42px;border-radius:50%;background:#24252b!important;color:#fff!important;font-size:17px}
body.video-mode .video-transport span{color:#c3c4cd;font-size:12px}
body.video-mode .video-scrub{height:6px;background:#292a32}
body.video-mode .video-scrub-fill,body.video-mode .video-playhead{background:#e7c543}
body.video-mode #videoMute{display:none}
body.video-mode .video-timeline-wrap{margin:0 0 18px}
body.video-mode .video-ruler{height:10px}
body.video-mode .video-timeline{height:96px;border:2px solid #e7c543;border-radius:13px;background:#16171d;overflow-x:auto;overflow-y:hidden}
body.video-mode .video-clips{min-width:max-content;gap:3px;padding:4px}
body.video-mode .video-clip{position:relative;flex:0 0 130px;min-width:130px;border:1px solid #343640;border-radius:7px;background:#202127;color:#c6c7d0;padding:0 7px}
body.video-mode .video-clip.active{border:2px solid #e7c543;background:#2b281a;color:#ffe36a}
body.video-mode .video-clip-index{font-size:12px}
body.video-mode .video-clip-label{font-size:10px;max-width:86px}
body.video-mode .trim-window{border-color:#e7c543;pointer-events:none}
body.video-mode .trim-handle{background:#e7c543;width:12px;height:38px}
body.video-mode .video-controls-grid{grid-template-columns:1fr;gap:10px;margin-top:12px}
body.video-mode .video-control-card{background:#111217;border:1px solid #292a32;border-radius:16px;padding:14px}
body.video-mode .video-control-card>span{color:#b8bac4;font-size:13px;margin-bottom:12px}
body.video-mode .video-chips{gap:7px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
body.video-mode .video-chips button{flex:0 0 auto;background:#202127;border-color:#353640;color:#e1e1e7;padding:9px 12px;border-radius:11px;font-size:12px}
body.video-mode .video-chips button.active{background:#282617;border-color:#e7c543;color:#f5d957}
body.video-mode .video-trim-values{font-size:12px;color:#e7c543;margin-bottom:8px}
body.video-mode .dual-range{gap:8px}
body.video-mode .dual-range input,body.video-mode .video-control-card>input{accent-color:#e7c543}
body.video-mode .video-control-card small{color:#a0a2ac}
body.video-mode .video-quick-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
body.video-mode .video-quick-tools button{min-height:44px;background:#202127;border-color:#30313a;color:#ececf1;border-radius:13px;font-size:12px}
body.video-mode .video-quick-tools .video-export{grid-column:1/-1;min-height:48px;background:#e7c543;color:#111;border-color:#e7c543;font-weight:800}
body.video-mode #videoClose{font-size:20px}
body.video-mode .quality-menu{background:#17181e;color:#fff;border-color:#34353d}
body.video-mode .quality-menu button{background:#24252c;color:#eee}
@media(min-width:760px){
 body.video-mode .editor-main{width:min(880px,100%)}
 body.video-mode .stage{height:min(55dvh,600px)}
 body.video-mode .video-controls-grid{grid-template-columns:1fr 1.4fr 1fr}
 body.video-mode .video-clip{flex-basis:150px;min-width:150px}
}


/* Fixed, compact video editing workspace: preview stays still while tools switch below. */
body.video-mode, body.video-mode .editor-app {height:100dvh;min-height:100dvh;overflow:hidden;background:#08090c;color:#f5f5f7}
body.video-mode .editor-header {display:none}
body.video-mode .editor-main {width:100%;height:100dvh;min-height:0;overflow:hidden;display:block;position:relative;margin:0}
body.video-mode .media-area {position:fixed;z-index:20;top:0;left:0;right:0;height:38dvh;padding:8px 12px 0;background:#08090c;}
body.video-mode .stage {height:100%;min-height:0;width:100%;border:0;border-radius:0;background:#08090c;overflow:hidden;display:flex;align-items:center;justify-content:center;}
body.video-mode .stage canvas {max-width:100%;max-height:100%;object-fit:contain;width:auto!important;height:auto!important;}
body.video-mode .media-tools, body.video-mode .control-panel, body.video-mode .status-row, body.video-mode .editor-toolbar, body.video-mode .mode-tabs {display:none!important}
body.video-mode .video-deck.open {position:fixed;z-index:40;left:0;right:0;bottom:0;height:62dvh;max-height:62dvh;overflow:hidden;display:flex;flex-direction:column;gap:8px;margin:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border:0;border-top:1px solid #27282d;border-radius:20px 20px 0 0;background:#0b0c10;color:#f5f5f7;box-shadow:0 -12px 35px #0005;}
body.video-mode .video-deck-head {flex:0 0 auto;margin:0;min-height:36px;gap:6px}
body.video-mode .video-project b {font-size:11px;letter-spacing:.08em;color:#f3ce42}
body.video-mode .video-project small {color:#a5a6ad;font-size:11px;max-width:110px}
body.video-mode .video-live {background:#f3ce42;box-shadow:0 0 0 4px #f3ce4220}
body.video-mode .video-head-actions {gap:5px}
body.video-mode .video-head-actions button {min-height:34px;padding:0 9px;border-radius:10px;border:1px solid #303139;background:#1b1c22;color:#f5f5f7;font-size:12px;white-space:nowrap}
body.video-mode #videoAddClip {font-size:0;width:36px;padding:0}
body.video-mode #videoAddClip:after {content:'＋';font-size:22px}
body.video-mode #videoClose {font-size:20px;width:34px;padding:0}
body.video-mode .video-transport {flex:0 0 auto;grid-template-columns:36px 42px 1fr 42px;gap:7px;align-items:center}
body.video-mode .video-transport button {width:36px;height:36px;border-radius:50%;background:#22232a;color:#fff}
body.video-mode .video-transport .video-play {background:#f0cc40!important;color:#171717!important}
body.video-mode .video-transport span {font-size:11px;color:#b8b9c0}
body.video-mode #videoMute {display:none}
body.video-mode .video-scrub {height:5px;background:#34353c}
body.video-mode .video-scrub-fill, body.video-mode .video-playhead {background:#f0cc40}
body.video-mode .video-playhead {width:10px;height:10px}
body.video-mode .video-timeline-wrap {flex:0 0 66px;margin:0;min-height:66px}
body.video-mode .video-ruler {height:5px}
body.video-mode .video-timeline {height:60px;border:2px solid #f0cc40;border-radius:12px;background:#191a20;overflow-x:auto;overflow-y:hidden;}
body.video-mode .video-clips {height:100%;gap:4px;padding:4px;min-width:max-content}
body.video-mode .video-clip {flex:0 0 150px;min-width:150px;border:1px solid #373840;border-radius:8px;background:#22232a;color:#d7d7dc;padding:0 7px;gap:5px}
body.video-mode .video-clip.active {border:2px solid #f0cc40;background:#39331a;color:#f0d34d}
body.video-mode .video-clip-index {font-size:12px}
body.video-mode .video-clip-label {font-size:10px;max-width:95px}
body.video-mode .trim-window {display:none}
body.video-mode .video-tool-tabs {display:flex;flex:0 0 auto;gap:6px;overflow-x:auto;padding:2px 0 5px;border-bottom:1px solid #26272d;scrollbar-width:none}
body.video-mode .video-tool-tabs::-webkit-scrollbar {display:none}
body.video-mode .video-tool-tab {flex:1 0 auto;min-width:58px;height:38px;border-radius:10px;background:#191a20;color:#aeb0b8;border:1px solid #292a31;font-size:12px}
body.video-mode .video-tool-tab.active {background:#f0cc40;color:#171717;border-color:#f0cc40;font-weight:700}
body.video-mode .video-tool-panels {flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;}
body.video-mode .video-tool-panel {display:none;min-height:0}
body.video-mode .video-tool-panel.active {display:block}
body.video-mode .video-control-card {padding:12px;border-radius:13px;background:#14151a;border:1px solid #2c2d34;color:#f5f5f7}
body.video-mode .video-control-card>span {color:#c5c6cc;font-size:12px}
body.video-mode .video-chips {gap:6px}
body.video-mode .video-chips button, body.video-mode .video-quick-tools button, body.video-mode .video-panel-action {border:1px solid #303139;border-radius:10px;background:#202127;color:#f5f5f7;padding:9px 11px;font-size:12px;min-height:38px}
body.video-mode .video-chips button.active {background:#f0cc40;color:#171717;border-color:#f0cc40}
body.video-mode .video-quick-tools {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0;padding:6px 0}
body.video-mode .video-quick-tools .video-export {grid-column:1/-1;background:#f0cc40;color:#171717;border-color:#f0cc40;font-weight:700;min-height:46px}
body.video-mode .video-control-card input[type=range] {width:100%;accent-color:#f0cc40;touch-action:pan-x}
body.video-mode .video-trim-values {color:#f0cc40}
body.video-mode .video-export-note {font-size:11px;line-height:1.5;color:#aeb0b8;margin:7px 3px}
body.video-mode .video-legacy-controls {display:none!important}
@media (max-height:700px) {
 body.video-mode .media-area {height:34dvh}
 body.video-mode .video-deck.open {height:66dvh;max-height:66dvh;padding-top:7px;gap:5px}
 body.video-mode .video-timeline-wrap {flex-basis:55px;min-height:55px}
 body.video-mode .video-timeline {height:50px}
 body.video-mode .video-clip {flex-basis:125px;min-width:125px}
}