/* ============================================================
   设计令牌（来自设计稿 framecraft-ui/assets/tokens.css）
   ------------------------------------------------------------
   上面的 --bg/--primary 等是老变量，全部保留（老样式照样跑）；
   下面 fc- 体系是新令牌，想换主题只改这一段，全站跟着变。
   两套是映射关系，别只改一边。
   ============================================================ */
:root{
  --bg:#f4f6f9; --card:#fff; --line:#e6eaf0; --line2:#eef1f6;
  --text:#22293a; --muted:#8a94a6; --primary:#7c5cff; --primary-dark:#6b48f0;
  --primary-soft:#f0edff; --warn-bg:#fff8e6; --warn-line:#ffe1a6; --warn-text:#96712a;
  --info-bg:#f2efff; --info-line:#ded6ff; --info-text:#4a3a9e;
  --danger:#e5484d; --ok:#1a9d5a; --radius:12px; --shadow:0 1px 3px rgba(34,41,58,.06);

  /* —— 表面 / 文字 / 边框（映射到老变量）—— */
  --bg-canvas:var(--bg);
  --bg-panel:var(--card);
  --bg-elevated:#fff;
  --bg-inset:#fafbfd;
  --border:var(--line);
  --border-strong:#c8d0de;
  --text-1:var(--text);
  --text-2:#5b667a;
  --text-3:var(--muted);

  /* —— 主色（设计稿紫 #7c5cff）——
     深浅两套统一走这个紫：老样式用的 --primary 也指向它，
     所以改 --primary 一个值，全站强调色跟着变，不会再出现蓝紫混用。 */
  --accent:var(--primary);
  --accent-hover:var(--primary-dark);
  --accent-soft:var(--primary-soft);
  --accent-purple:#7c5cff;

  --success:var(--ok);
  --warning:#f5a524;
  --danger-2:var(--danger);

  /* —— 圆角层级 —— */
  --r-sm:6px;
  --r-btn:9px;
  --r-card:12px;
  --r-lg:16px;
  --r-pill:100px;

  /* —— 间距（8px 基准）—— */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px;

  /* —— 字体（不走 Inter，省一次字体请求；系统字体中文渲染更好）—— */
  --font:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* —— 阴影 —— */
  --shadow-card:var(--shadow);
  --shadow-pop:0 12px 32px rgba(15,20,25,.12);

  /* —— 尺寸 —— */
  --h-header:64px;
  --w-inspector:280px;
}

/* 深色令牌（可选）：给任意容器加 data-theme="dark" 就切到这套配色。
   只有走令牌的组件会跟着变，硬编码 #fff 的老样式不受影响（所以是渐进式的，不会半吊子） */
[data-theme="dark"]{
  --bg-canvas:#0f0f11; --bg-panel:#17171a; --bg-elevated:#1d1d21; --bg-inset:#0b0b0d;
  --border:#26262b; --border-strong:#3a3a44;
  --text-1:#f2f2f4; --text-2:#9c9ca6; --text-3:#6b6b76;
  --accent:#7c5cff; --accent-hover:#8f73ff; --accent-soft:rgba(124,92,255,.14);
  --success:#4ade80; --warning:#ffa94d; --danger-2:#ff6b6b;
  --shadow-card:0 8px 24px rgba(0,0,0,.5);
  --shadow-pop:0 16px 48px rgba(0,0,0,.65);

  /* 告警条 / 信息条 / 浅主色：这几个老变量在 :root 里是写死的浅色值，
     深色下不重定义就会变成「浅底浅字」看不见 —— 做全站主题必须带上这几行 */
  --warn-bg:rgba(245,165,36,.12); --warn-line:rgba(245,165,36,.32); --warn-text:#ffcf8a;
  --info-bg:rgba(124,92,255,.16);  --info-line:rgba(124,92,255,.34); --info-text:#c4b5fd;
  --primary-soft:rgba(124,92,255,.16);
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg-canvas);color:var(--text-1);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font-family:inherit}
a{color:var(--accent);text-decoration:none}

/* ============================================================
   组件层（来自设计稿 framecraft-ui/assets/ui.css）
   ------------------------------------------------------------
   注意：类名都做了避让——老样式里有 .btn / .field / .step-card，
   所以新组件统一用双横线变体或 fc- 前缀，两套可以共存不打架。
   ============================================================ */
.btn{border-radius:var(--r-btn)}
.btn--primary{background:var(--accent);color:#fff;border:1px solid transparent}
.btn--primary:hover{background:var(--accent-hover)}
.btn--ghost{background:transparent;border-color:var(--border);color:var(--text-2)}
.btn--ghost:hover{border-color:var(--border-strong);color:var(--text-1);background:transparent}
.btn--dark{background:#0f0f11;color:#fff;border:1px solid transparent}
.btn--sm{height:30px;padding:0 12px;font-size:12px}
.btn--block{width:100%}

/* 药丸标签 / 分段控件（老样式里没有裸 .chip，安全） */
.chip{display:inline-flex;align-items:center;height:28px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-btn);background:var(--bg-elevated);color:var(--text-2);font-size:12px;cursor:pointer;white-space:nowrap;transition:all .15s}
.chip:hover{color:var(--text-1)}
.chip.is-active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}

/* 步骤指示器（老样式是 .step-card，这里裸 .step 不冲突） */
.step{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:var(--r-btn);background:var(--bg-elevated);color:var(--text-2);font-size:12px;white-space:nowrap}
.step.is-active{background:var(--accent);color:#fff;font-weight:600}
.step.is-done{color:var(--text-3)}

/* 面板 */
.panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-card)}
.panel__head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border)}

/* 表单行：老 .field 是纵向的，横向版走 .field--row，两者不冲突 */
.field--row{display:flex;align-items:center;gap:var(--sp-3)}
.field__label{width:48px;flex:none;font-size:12px;color:var(--text-2)}
.field__value{width:44px;flex:none;text-align:right;font-size:12px;color:var(--text-1);font-variant-numeric:tabular-nums}

/* 滑杆（细轨 + 圆点，比浏览器默认好看） */
.slider{-webkit-appearance:none;appearance:none;flex:1;height:4px;border-radius:2px;background:var(--border);outline:none;cursor:pointer}
.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-panel);cursor:pointer}
.slider::-moz-range-thumb{width:12px;height:12px;border:2px solid var(--bg-panel);border-radius:50%;background:var(--accent);cursor:pointer}

/* 色板 */
.swatches{display:flex;gap:var(--sp-2)}
.swatch{width:28px;height:28px;border-radius:var(--r-btn);border:1px solid var(--border);cursor:pointer}
.swatch.is-active{outline:2px solid var(--accent);outline-offset:2px}

/* 透明棋盘格：浅色版（和现有缩略图/预览一致） + 深色版（设计稿原版，给深色主题用） */
.checker-light{background-color:#fff;background-image:linear-gradient(45deg,#e4e9f2 25%,transparent 25%,transparent 75%,#e4e9f2 75%),linear-gradient(45deg,#e4e9f2 25%,transparent 25%,transparent 75%,#e4e9f2 75%);background-size:16px 16px;background-position:0 0,8px 8px}
.checker{background-color:#141418;background-image:linear-gradient(45deg,#1a1a1f 25%,transparent 25%),linear-gradient(-45deg,#1a1a1f 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1a1a1f 75%),linear-gradient(-45deg,transparent 75%,#1a1a1f 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}

/* 排版辅助 */
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--text-3)}
.fc-muted{color:var(--text-2)}
.fc-dim{color:var(--text-3)}

/* ---------- 头部 ---------- */
.app-header{background:var(--bg-panel);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:60}
.app-header-inner{max-width:1180px;margin:0 auto;padding:0 20px;height:64px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:34px;height:34px;border-radius:10px;object-fit:cover;display:block;flex-shrink:0}
.free-badge{background:linear-gradient(135deg,#e8f8ef,#edf9f2);border:1px solid #c9e6d5;color:#2e8b57;font-size:12px;border-radius:20px;padding:5px 12px;cursor:default}
.brand-txt h1,.brand-txt .brand-title{font-size:16px;letter-spacing:.3px;font-weight:700}
.brand-txt p{font-size:12px;color:var(--muted)}
.header-spacer{flex:1}
.btn{border:none;border-radius:9px;padding:8px 16px;font-size:13.5px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:6px;justify-content:center}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-outline{background:var(--bg-panel);border:1px solid var(--border);color:var(--text-1)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-soft{background:var(--primary-soft);color:var(--accent)}
.btn-soft:hover{background:#e4ddff}
[data-theme="dark"] .btn-soft:hover{background:rgba(124,92,255,.28)}
.btn-text{background:none;color:var(--primary);padding:6px 8px}
.btn-text:hover{background:var(--primary-soft)}
.btn-mini{padding:5px 10px;font-size:12.5px;border-radius:8px}
.btn[disabled],.btn-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn-lg{padding:12px 34px;font-size:15px;border-radius:10px}
.pro-badge{background:linear-gradient(135deg,#f7b733,#f56a1a);color:#fff;font-size:10px;padding:1px 6px;border-radius:20px;font-weight:600}

.env-banner{background:var(--info-bg);border-bottom:1px solid var(--info-line);color:var(--info-text);font-size:12.5px;text-align:center;padding:6px 16px}
.app-footer{padding:26px 20px 40px;text-align:center;font-size:12.5px;color:var(--muted)}
.app-footer a{color:var(--muted)}
.app-footer a:hover{color:var(--primary)}
.footer-meta-row{margin-top:6px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.footer-main-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:center}
.footer-main-row a{color:#5b667a;text-decoration:none;font-size:13px}
.footer-main-row a:hover{color:var(--primary)}
/* 页脚联系方式：7 个页面共用同一段 HTML，颜色一律继承/走变量，别写死（主题陷阱） */
.footer-contact{margin-top:8px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center}
.footer-contact b{color:var(--text-2,#5b667a);font-weight:600;letter-spacing:.3px}
.footer-contact a{color:var(--primary);text-decoration:none}
.footer-contact a:hover{text-decoration:underline}
.footer-copy{border:1px solid var(--border);background:transparent;color:inherit;font-family:inherit;
  font-size:12px;line-height:1.6;padding:1px 8px;border-radius:6px;cursor:pointer}
.footer-copy:hover{border-color:var(--primary);color:var(--primary)}

/* ---------- 布局 ---------- */
.page-body{max-width:1440px;margin:0 auto;padding:20px}
.step-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-card);margin-bottom:14px;overflow:hidden}
.step-card-inactive{opacity:.55}
.step-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line2)}
.step-num{width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0}
.step-card-inactive .step-num{background:#c8d0de}
.step-head h2{font-size:15px}
.step-head .step-meta{font-size:12.5px;color:var(--muted)}
.step-head .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.step-body{padding:18px}

/* ============================================================
   工作台三栏（2026-10-03）
   ------------------------------------------------------------
   左 = 提取帧（原步骤1）／中 = 预览与选择（原整理面板第⑤组）／右 = 工具栏（原①②③④组）
   目的是「选源 → 挑帧 → 调参 → 导出」在同一屏内完成，不再上下滚动。
   高度按视口算：滚到 #workspace 后三栏正好占满一屏，栏内各自滚动。
   控件 id / onclick 一个没动，这轮只是搬家。
   ============================================================ */
.ws-grid{display:grid;grid-template-columns:320px minmax(0,1fr) 380px;gap:14px;
  height:calc(100vh - 118px);min-height:540px;align-items:stretch}
.ws-col{margin-bottom:0;display:flex;flex-direction:column;min-height:0}
.ws-col>.step-head{flex:0 0 auto}
.ws-col-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
/* 栏内不做二级滚动条：缩略图网格交给整栏滚 */
.ws-col-body .thumbnail-grid{max-height:none;overflow:visible}
/* 左栏比正文窄，上传区收紧一点，别在 320px 里折成三行 */
.ws-col .dropzone{padding:32px 16px}
.ws-col .preview-box video{max-height:220px}
/* 「去导出」钉在右栏底部，随时可点 */
.ws-export-cta{position:sticky;bottom:0;margin-top:16px;padding:14px 0 2px;
  background:linear-gradient(to bottom,rgba(0,0,0,0),var(--bg-panel) 42%)}
.ws-export-cta .btn{width:100%}

/* 导出层：点「去导出」弹出的遮罩，内容就是原来的步骤 3 */
.export-mask{position:fixed;inset:0;background:rgba(20,26,38,.55);z-index:250;display:none;
  align-items:flex-start;justify-content:center;padding:34px 20px;overflow-y:auto}
.export-mask.open{display:flex}
.export-sheet{width:100%;max-width:980px}
.export-card{margin-bottom:0}

.sec-title{font-size:13.5px;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.hint{font-size:12px;color:var(--muted)}
.divider{height:1px;background:var(--line2);margin:16px 0}

/* ---------- 上传 ---------- */
.dropzone{border:1.5px dashed var(--border-strong);border-radius:var(--radius);padding:44px 20px;text-align:center;cursor:pointer;background:var(--bg-inset);transition:.18s}
.dropzone:hover,.dropzone.dragover{border-color:var(--primary);background:var(--primary-soft)}
.dropzone .dz-icon{font-size:38px;margin-bottom:8px}
.dropzone h3{font-size:15px;margin-bottom:6px}
.dropzone p{font-size:12.5px;color:var(--muted)}
.dropzone .hint{margin-top:8px}

/* ---------- 视频预览 ---------- */
.preview-box{background:#141418;border-radius:10px;overflow:hidden;position:relative}
.preview-box video{width:100%;display:block;max-height:340px;background:#000}
.preview-meta{display:flex;align-items:center;gap:12px;padding:8px 12px;background:#fff;border:1px solid var(--line);border-radius:10px;margin-top:10px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.preview-meta .name{color:var(--text);font-weight:600;font-size:13px}
.tag-toggle{display:inline-flex;align-items:center;gap:5px;cursor:pointer;user-select:none}
.tag-toggle input{accent-color:var(--primary)}

/* ---------- 表单 ---------- */
.form-row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:6px}
.field>label{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:5px}
input[type=text],input[type=number],select{border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13.5px;color:var(--text);background:#fff;font-family:inherit}
input:focus,select:focus{outline:none;border-color:var(--primary)}
input[type=range]{accent-color:var(--primary);height:20px}
input[type=color]{border:1px solid var(--line);border-radius:8px;padding:2px;width:44px;height:32px;background:#fff}
.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,Consolas,monospace}
.time-input{width:96px;text-align:center}
.timeline-row{display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap}
.timeline-row .dur{font-size:12.5px;color:var(--muted);padding-bottom:8px}
.range-wrap{position:relative;height:34px;margin:6px 0 2px}
.range-track{position:absolute;top:14px;left:0;right:0;height:6px;border-radius:4px;background:#e8edf5}
.range-fill{position:absolute;top:14px;height:6px;border-radius:4px;background:var(--primary)}
.range-thumb{position:absolute;top:8px;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--primary);cursor:grab;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.fps-row{display:flex;align-items:center;gap:12px}
.fps-row input[type=range]{flex:1;max-width:420px}
.fps-num{width:70px}
.unit{font-size:12.5px;color:var(--muted)}
.estimate-card{background:var(--primary-soft);border:1px solid var(--info-line);border-radius:10px;padding:12px 16px;display:inline-flex;align-items:baseline;gap:8px}
.estimate-card .lbl{font-size:12.5px;color:var(--text-2)}
.estimate-card .val{font-size:20px;font-weight:700;color:var(--primary)}
.estimate-card .u{font-size:12.5px;color:var(--text-2)}

/* ---------- 进度 ---------- */
.progress-wrap{display:none;margin-top:14px}
.progress{height:8px;background:#e8edf5;border-radius:6px;overflow:hidden}
.progress .bar{height:100%;width:0;background:linear-gradient(90deg,#7c5cff,#a78bfa);transition:width .12s}
.progress-text{font-size:12.5px;color:var(--muted);margin-top:6px}

/* ---------- 步骤2 ---------- */
.warn-strip{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-text);font-size:12.5px;padding:7px 12px;border-radius:8px;margin-bottom:14px}
.step2-tabbar{display:inline-flex;background:var(--bg-inset);border-radius:9px;padding:3px;margin-bottom:14px}
.step2-tabbar-item{padding:6px 18px;border-radius:7px;font-size:13.5px;color:var(--text-2);cursor:pointer;user-select:none}
.step2-tabbar-item-active{background:var(--bg-panel);color:var(--text-1);font-weight:600;box-shadow:var(--shadow-card)}
.toolbar-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line2)}
.toolbar-group{display:inline-flex;gap:6px;flex-wrap:wrap}
.toolbar-btn{background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--r-btn);padding:5px 11px;font-size:12.5px;color:var(--text-1);cursor:pointer}
/* 按钮文字一律不折行：窄栏（右栏 380px）里宁可整块换行，也别把字挤成两截 */
.toolbar-btn,.toolbar-btn-key,.toolbar-btn-sub,.toolbar-btn-on{white-space:nowrap}
/* 崩坏帧筛查那行要和按钮并排，滑块收窄一点 */
#brokenSens{width:110px}
.toolbar-btn:hover{border-color:var(--accent);color:var(--accent)}
/* 去背景引导模式：高亮脉冲 */
@keyframes bgGuidePulse{0%,100%{box-shadow:0 0 0 0 rgba(124,92,255,.45)}50%{box-shadow:0 0 0 8px rgba(124,92,255,0)}}
.bg-guide-hl{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important;animation:bgGuidePulse 1.6s ease-in-out infinite;font-weight:600}
.toolbar-btn-on{background:var(--primary);border-color:var(--primary);color:#fff}
.toolbar-link{color:var(--primary);font-size:12.5px;cursor:pointer}
.threshold-wrap{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.threshold-wrap input[type=range]{width:150px}
.thumb-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px;font-size:12.5px;color:var(--text-2)}
.thumb-head .seg{display:inline-flex;background:var(--bg-inset);border-radius:8px;padding:3px}
.thumb-head .seg span{padding:4px 12px;border-radius:6px;cursor:pointer;font-size:12.5px;color:var(--text-2)}
.thumb-head .seg span.on{background:var(--bg-panel);color:var(--text-1);font-weight:600}
.thumbnail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;max-height:460px;overflow-y:auto;padding:4px;background:var(--bg-inset);border:1px solid var(--border);border-radius:10px}
.thumbnail-cell{position:relative;border:1px solid var(--border);border-radius:var(--r-btn);overflow:hidden;background:var(--bg-panel);cursor:pointer;transition:.12s}
.thumbnail-cell:hover{border-color:var(--primary);box-shadow:var(--shadow)}
.thumbnail-cell.in-set{border-color:var(--primary);border-width:2px}
.thumbnail-cell.current{outline:2px solid #f5a524;outline-offset:-2px}
.thumbnail-cell img{width:100%;display:block;aspect-ratio:1;object-fit:contain;background-color:#fff;background-image:linear-gradient(45deg,#e4e9f2 25%,transparent 25%,transparent 75%,#e4e9f2 75%),linear-gradient(45deg,#e4e9f2 25%,transparent 25%,transparent 75%,#e4e9f2 75%);background-size:14px 14px;background-position:0 0,7px 7px}
.thumbnail-cell .cap{display:flex;align-items:center;justify-content:space-between;font-size:11px;padding:3px 6px;color:var(--text-2);background:var(--bg-panel)}
.thumbnail-cell .pin{position:absolute;top:4px;left:4px;background:rgba(124,92,255,.92);color:#fff;font-size:10px;padding:1px 6px;border-radius:5px;display:none}
.thumbnail-cell.in-set .pin{display:block}
.thumbnail-cell .edit-btn{position:absolute;top:4px;right:4px;background:rgba(255,255,255,.92);border:none;border-radius:6px;width:24px;height:22px;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.thumbnail-cell .tag{position:absolute;bottom:22px;left:4px;background:rgba(245,165,36,.95);color:#fff;font-size:10px;padding:1px 6px;border-radius:5px}
.thumbnail-cell-add{display:flex;align-items:center;justify-content:center;min-height:120px;border:1.5px dashed var(--border-strong);border-radius:9px;color:var(--text-2);font-size:24px;cursor:pointer;background:var(--bg-panel)}
.thumbnail-cell-add:hover{border-color:var(--primary);color:var(--primary)}
.anim-preview{margin-top:16px;padding:14px;background:var(--bg-inset);border:1px solid var(--border);border-radius:10px}
.anim-preview .player{background-color:#fff;background-image:linear-gradient(45deg,#e4e9f2 25%,transparent 25%,transparent 75%,#e4e9f2 75%),linear-gradient(45deg,#e4e9f2 25%,transparent 25%,transparent 75%,#e4e9f2 75%);background-size:16px 16px;background-position:0 0,8px 8px;border-radius:9px;display:flex;align-items:center;justify-content:center;min-height:150px;overflow:hidden}
.anim-preview .player canvas{max-width:100%;max-height:280px;display:block}
.anim-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--muted)}

/* ---------- 步骤3 ---------- */
.export-grid{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.export-main{flex:1;min-width:340px}
.export-side{width:300px;flex-shrink:0}
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.resolution-chip{border:1px solid var(--border);background:var(--bg-elevated);border-radius:var(--r-btn);padding:6px 13px;font-size:12.5px;cursor:pointer;color:var(--text-1);position:relative}
.resolution-chip:hover{border-color:var(--primary);color:var(--primary)}
.resolution-chip-active{background:var(--primary);border-color:var(--primary);color:#fff}
.resolution-chip-active:hover{color:#fff}
.resolution-chip.pro::after{content:"PRO";position:absolute;top:-7px;right:-4px;background:linear-gradient(135deg,#f7b733,#f56a1a);color:#fff;font-size:9px;padding:0 5px;border-radius:8px;font-weight:600}
.settings-box{background:var(--bg-inset);border:1px solid var(--border);border-radius:10px;padding:14px;margin-top:12px}
.settings-box h4{font-size:13px;margin-bottom:10px}
.setting-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;font-size:12.5px;color:var(--muted)}
.seg{display:inline-flex;background:var(--bg-inset);border-radius:8px;padding:3px}
.seg span{padding:4px 12px;border-radius:6px;cursor:pointer;font-size:12.5px;color:var(--text-2)}
.seg span.on{background:var(--bg-panel);color:var(--text-1);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.07)}
.q-hint{color:#a8b1c1;font-size:11px;border:1px solid #dfe4ec;border-radius:50%;width:15px;height:15px;display:inline-flex;align-items:center;justify-content:center;cursor:help}
.tip{background:var(--info-bg);border:1px solid var(--info-line);color:var(--info-text);font-size:12px;border-radius:8px;padding:8px 10px;margin-top:8px}
.tip-inline{color:var(--text-3);font-size:12px}
.status-line{margin-top:12px;font-size:13px;min-height:20px}
.status-ok{color:var(--ok)}
.status-err{color:var(--danger)}

/* ---------- 编辑器 ---------- */
/* color 必须在这里显式声明：body 在 data-theme 作用域外，它的 color 会解析成浅色值往下继承，
   编辑器内没显式声明颜色的元素会拿到那个浅色值，在深色底上直接看不见 */
.editor-mask{position:fixed;inset:0;background:var(--bg-canvas);color:var(--text-1);z-index:200;display:none;flex-direction:column}
.editor-mask.open{display:flex}
.editor-top{background:var(--bg-panel);border-bottom:1px solid var(--border);padding:8px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.editor-title{font-size:13.5px;font-weight:600;color:var(--text-1)}
.tool-buttons{display:flex;gap:6px;flex-wrap:wrap}
.tool-btn{background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--r-btn);padding:6px 11px;font-size:12.5px;cursor:pointer;color:var(--text-1);position:relative}
.tool-btn:hover{border-color:var(--primary);color:var(--primary)}
.tool-active{background:var(--primary);border-color:var(--primary);color:#fff}
.tool-active:hover{color:#fff}
.tool-btn .pro-tag{position:absolute;top:-7px;right:-6px;background:linear-gradient(135deg,#f7b733,#f56a1a);color:#fff;font-size:9px;padding:0 5px;border-radius:8px;font-weight:600}
.editor-opts{background:var(--bg-panel);border-bottom:1px solid var(--border);padding:8px 14px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--text-2)}
.editor-canvas-wrap{flex:1;overflow:auto;display:flex;padding:20px;background:
  linear-gradient(45deg,#f0f3f8 25%,transparent 25%,transparent 75%,#f0f3f8 75%),
  linear-gradient(45deg,#f0f3f8 25%,transparent 25%,transparent 75%,#f0f3f8 75%) 8px 8px;
  background-size:16px 16px;background-color:#fafbfd}
/* 居中必须用画布自身的 margin:auto，不能用 align-items/justify-content:center。
   后者在画布放大超出容器时，会把溢出的上半部分顶到滚动起点之外 —— 滚不到也拖不动（改前就是这个毛病）。
   同时 flex:0 0 auto 防止画布被 flex 压扁。 */
.editor-canvas-wrap canvas{display:block;flex:0 0 auto;margin:auto;box-shadow:0 4px 20px rgba(0,0,0,.13);cursor:crosshair;image-rendering:pixelated}
.editor-bottom{background:var(--bg-panel);border-top:1px solid var(--border);padding:8px 14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--text-2)}
.adjust-panel{position:absolute;top:96px;right:20px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-pop);padding:14px;width:260px;display:none;z-index:10}
.adjust-panel.open{display:block}
.adjust-panel .line{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:12.5px;color:var(--text-2)}
.adjust-panel .line input[type=range]{flex:1}

/* ---------- 弹窗/提示 ---------- */
.modal-mask{position:fixed;inset:0;background:rgba(20,26,38,.42);z-index:300;display:none;align-items:center;justify-content:center}
.modal-mask.open{display:flex}
.modal{background:#fff;border-radius:12px;padding:20px;min-width:320px;max-width:520px;box-shadow:0 12px 40px rgba(0,0,0,.2)}
.modal h3{font-size:15px;margin-bottom:12px}
.modal .modal-body{font-size:13px;color:#4a5566}
.modal .actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.kbd-list{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13px}
kbd{background:#f2f5f9;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 7px;font-size:12px;font-family:inherit}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:38px;background:rgba(34,41,58,.94);color:#fff;font-size:13px;padding:9px 18px;border-radius:9px;z-index:400;opacity:0;pointer-events:none;transition:.25s}
.toast.show{opacity:1}

/* ---------- 触屏支持 ---------- */
/* 画布与时间轴手柄：手势全归页面逻辑（画笔/拖拽），不许浏览器抢去滚动页面 */
#editCanvas{touch-action:none}
.range-thumb{touch-action:none}
#canvasWrap{-webkit-overflow-scrolling:touch}

/* 手机上隐藏的元素（桌面显示） */
.mobile-only{display:none}

/* ---------- 小屏（手机/窄窗口） ---------- */
@media (max-width:720px){
  .mobile-only{display:block}
  .app-header-inner{padding:0 12px;height:54px;gap:8px}
  .brand-txt p{display:none}
  .free-badge{display:none}
  .page-body{padding:12px}
  .step-body{padding:12px}
  .toolbar-row{gap:6px;padding-bottom:8px;margin-bottom:8px}
  /* 手指点按目标放大，减少误触 */
  .tool-btn{padding:9px 13px;font-size:13px}
  .btn{padding:9px 14px}
  .btn-mini{padding:7px 11px}
  .env-banner{padding:6px 12px;font-size:12px}
  .kbd-list{font-size:12px}
  .editor-top{padding:6px 10px;gap:6px}
  .editor-opts{padding:4px 10px;gap:6px;flex-wrap:wrap}
}

/* 开场页（splash）已于 2026-10-03 移除：首页 hero 本身就是落地页，
 * 中间再插一层蓝紫开场页属于多余动作。旧样式（.splash / .splash-*）一并删除。 */


/* ============================================================
   编辑器深色皮肤
   ------------------------------------------------------------
   作用域严格限定在 .editor-mask 内 —— 它是全屏遮罩、独立容器，
   所以首页 / 落地页 / 手机端全部保持浅色，一格像素都不受影响。
   「🌙/☀️」按钮切换 #editorMask 上的 data-theme，偏好存 localStorage。
   ============================================================ */

/* 编辑器内的通用按钮：原 .btn-outline 硬编码了 #fff，深色下会变成刺眼白块 */
.editor-mask .btn-outline{background:var(--bg-elevated);border-color:var(--border-strong);color:var(--text-1)}
.editor-mask .btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.editor-mask .btn-text{color:var(--accent)}
.editor-mask .btn-text:hover{background:var(--accent-soft)}
.editor-mask .btn-soft{background:var(--accent-soft);color:var(--accent)}

/* 工具按钮 hover 也走 accent（原规则用的是固定的蓝 --primary） */
.editor-mask .tool-btn:hover{border-color:var(--accent);color:var(--accent)}

/* 分段控件（覆盖 / 叠加 / 加色 / 减色） */
.editor-mask .seg{background:var(--bg-inset)}
.editor-mask .seg span{color:var(--text-3)}
.editor-mask .seg span.on{background:var(--bg-elevated);color:var(--text-1);box-shadow:none}

/* 提示文字、复选框、等宽数字 */
.editor-mask .hint{color:var(--text-3)}
.editor-mask .tag-toggle{color:var(--text-2)}
.editor-mask .tag-toggle input{accent-color:var(--accent)}
.editor-mask .mono{color:var(--text-1)}

/* 画布区棋盘格：浅色那套是 #f0f3f8 底，深色换成暗格（和 .checker 同色系） */
[data-theme="dark"] .editor-canvas-wrap{
  background-color:#0b0b0d;
  background-image:
    linear-gradient(45deg,#1c1c22 25%,transparent 25%,transparent 75%,#1c1c22 75%),
    linear-gradient(45deg,#1c1c22 25%,transparent 25%,transparent 75%,#1c1c22 75%);
}
[data-theme="dark"] .editor-canvas-wrap canvas{box-shadow:0 4px 24px rgba(0,0,0,.6);outline:1px solid var(--border)}

/* 输入控件默认白底，深色下翻过来 */
[data-theme="dark"] .editor-opts input[type=text],
[data-theme="dark"] .editor-opts input[type=number],
[data-theme="dark"] .adjust-panel input[type=number]{
  background:var(--bg-inset);border:1px solid var(--border);color:var(--text-1);
  border-radius:var(--r-sm);padding:3px 6px
}
[data-theme="dark"] .editor-opts input[type=color]{background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--r-sm)}
[data-theme="dark"] .editor-opts input[type=range],
[data-theme="dark"] .adjust-panel input[type=range]{accent-color:var(--accent)}

/* ============================================================
   全站深色补充
   ------------------------------------------------------------
   上面那段只管编辑器；这段管首页其余部分。主要处理两类：
   ① 浏览器默认白底的表单控件（input/select/textarea）；
   ② 写死在 CSS 里的浅色棋盘格（缩略图、动画预览）。
   ============================================================ */

/* 表单控件默认白底黑字，深色下必须底色和字色一起翻过来，
   只改 background 会变成「黑底黑字」——比不改还糟 */
[data-theme="dark"] input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]),
[data-theme="dark"] select,
[data-theme="dark"] textarea{
  background:var(--bg-inset);border:1px solid var(--border);color:var(--text-1)
}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:var(--text-3)}
[data-theme="dark"] input[type=range],
[data-theme="dark"] input[type=checkbox],
[data-theme="dark"] input[type=radio]{accent-color:var(--accent)}
[data-theme="dark"] select option{background:var(--bg-panel);color:var(--text-1)}
[data-theme="dark"] input[type=color]{padding:1px}

/* 缩略图和动画预览里的棋盘格是写死的浅色格 */
[data-theme="dark"] .thumbnail-cell img,
[data-theme="dark"] .anim-preview .player{
  background-color:#0b0b0d;
  background-image:linear-gradient(45deg,#1c1c22 25%,transparent 25%,transparent 75%,#1c1c22 75%),
                   linear-gradient(45deg,#1c1c22 25%,transparent 25%,transparent 75%,#1c1c22 75%)
}
[data-theme="dark"] .thumbnail-cell .edit-btn{background:rgba(32,32,38,.92);color:var(--text-1)}

/* 深色下主色统一走 accent（紫），和编辑器保持一致 */
[data-theme="dark"] .toolbar-btn-on,
[data-theme="dark"] .resolution-chip-active,
[data-theme="dark"] .tool-active{background:var(--accent);border-color:var(--accent)}
[data-theme="dark"] .tool-btn:hover,
[data-theme="dark"] .resolution-chip:hover,
[data-theme="dark"] .thumbnail-cell:hover,
[data-theme="dark"] .thumbnail-cell-add:hover{border-color:var(--accent);color:var(--accent)}

/* range 滑轨：浏览器默认给它白底，深色下会露出一小块白 */
[data-theme="dark"] input[type=range]{background:transparent}

/* ============================================================
   首页营销层（格局取自设计稿 framecraft-ui/index.html）
   全部走令牌，所以深浅两套自动成立，不需要 [data-theme] 覆盖
   ============================================================ */
.mk-wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* 头部是 sticky（64px），锚点跳转要留出这段高度，否则标题被顶栏盖住 */
#workspace,#mk-features,#mk-subtools,#mk-faq{scroll-margin-top:78px}

/* 导航链接（头部右侧） */
.mk-navlinks{display:flex;align-items:center;gap:18px}
.mk-navlinks a{color:var(--text-2);font-size:13.5px}
.mk-navlinks a:hover{color:var(--accent)}
.mk-nav-cta{border:1px solid var(--border);border-radius:var(--r-pill);padding:6px 14px;color:var(--text-1)!important;background:var(--bg-panel)}
.mk-nav-cta:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)!important}

/* 首屏 */
.mk-hero{padding:56px 0 8px;text-align:center;position:relative;overflow:hidden}
.mk-hero::before{content:"";position:absolute;left:50%;top:-220px;width:900px;height:440px;transform:translateX(-50%);
  background:radial-gradient(closest-side,var(--accent-soft),transparent 70%);pointer-events:none;z-index:0}
.mk-hero .mk-wrap{position:relative;z-index:1}
.mk-badge{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);color:var(--accent);
  border:1px solid var(--border);border-radius:var(--r-pill);padding:6px 14px;font-size:12.5px}
.mk-badge i{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block}
.mk-h1{font-size:44px;line-height:1.25;letter-spacing:-.5px;margin:20px 0 12px;font-weight:800}
.mk-sub{font-size:16px;color:var(--text-2);margin-bottom:26px}
.mk-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.mk-formats{display:block;margin-top:16px;font-size:13px;color:var(--text-3)}

/* 首屏预览 mock：左胶片条 + 中棋盘格画布 + 右属性条 */
.mk-preview{margin:38px auto 0;max-width:960px;display:grid;grid-template-columns:64px 1fr 150px;gap:12px;
  background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px;
  box-shadow:var(--shadow-card);text-align:left}
.mk-preview-rail{display:flex;flex-direction:column;gap:10px}
.mk-preview-rail i{height:34px;border-radius:var(--r-sm);background:var(--bg-inset);border:1px solid var(--border)}
.mk-preview-rail i:first-child{border-color:var(--accent)}
.mk-preview-canvas{position:relative;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--border);min-height:250px}
/* 棋盘格跟着主题走（.checker 是写死深色的，浅色主题下会变成一块黑板）。
   用局部变量把两套格子色收在一处，浅色 / 深色各一份 */
.mk-preview-frame{position:absolute;inset:0;--ck-a:#e4e9f2;--ck-b:#fff;
  background-color:var(--ck-b);
  background-image:
    linear-gradient(45deg,var(--ck-a) 25%,transparent 25%,transparent 75%,var(--ck-a) 75%),
    linear-gradient(45deg,var(--ck-a) 25%,transparent 25%,transparent 75%,var(--ck-a) 75%);
  background-size:16px 16px;background-position:0 0,8px 8px}
[data-theme="dark"] .mk-preview-frame{--ck-a:#1a1a1f;--ck-b:#141418}
/* 画布里的主体剪影：让首屏看起来像「工具正在处理一帧」而不是一块空棋盘 */
.mk-preview-subject{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:124px;height:165px;fill:var(--accent);opacity:.5}
.mk-preview-tag{position:absolute;left:12px;top:12px;background:rgba(0,0,0,.55);color:#fff;
  border-radius:var(--r-sm);padding:3px 8px;font-size:11.5px;letter-spacing:.3px}
.mk-preview-panel{display:flex;flex-direction:column;gap:12px;padding:6px 0}
.mk-preview-panel i{height:10px;border-radius:var(--r-pill);background:var(--bg-inset);border:1px solid var(--border)}
.mk-preview-panel i:nth-child(1){width:100%}
.mk-preview-panel i:nth-child(2){width:72%}
.mk-preview-panel i:nth-child(3){width:88%}

/* 区块 */
.mk-section{padding:52px 0}
.mk-section-soft{background:var(--bg-panel);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.mk-head{text-align:center;margin-bottom:28px}
.mk-head h2{font-size:26px;font-weight:750;letter-spacing:-.2px}
.mk-head p{margin-top:8px;color:var(--text-2);font-size:14px}
.mk-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mk-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
/* 子工具区入口用的：同样一行铺开，卡片太窄时自动少排几个（5 / 6 / 7 个都还是它） */
.mk-grid5,.mk-grid6,.mk-grid7{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px}
.mk-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-card);
  padding:20px;box-shadow:var(--shadow-card);transition:.18s}
.mk-card h3{font-size:15.5px;margin-bottom:8px}
.mk-card p{font-size:13.5px;color:var(--text-2);line-height:1.65}
.mk-section-soft .mk-card{background:var(--bg-elevated);box-shadow:none}
.mk-card-soft{position:relative;padding-top:22px}
.mk-num{font-size:12px;font-weight:700;color:var(--accent);letter-spacing:1px;margin-bottom:10px}
.mk-card-link{display:block;color:inherit}
.mk-card-link:hover{border-color:var(--accent);transform:translateY(-2px)}
/* 教程卡：刻意不叫 mk-card-link —— check_links.js 用 `class="mk-card mk-card-link"`
   收集「子工具清单」，教程页不是子工具，混进去会被要求 nav 里列全 13 个工具。 */
.mk-guide-card{display:block;color:inherit}
.mk-guide-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.mk-guides-more{margin:16px 0 0;font-size:13.5px}
.mk-guides-more a{color:var(--accent);text-decoration:none}
.mk-guides-more a:hover{text-decoration:underline}

/* 从首屏 CTA 跳下来时，上传区闪一下，提示「从这里开始」 */
.dz-hint{animation:dzPulse 1.3s ease-out 1}
@keyframes dzPulse{
  0%{box-shadow:0 0 0 0 var(--accent-soft)}
  55%{box-shadow:0 0 0 9px var(--accent-soft)}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
}

/* CTA 横幅 */
.mk-band{background:linear-gradient(135deg,var(--accent-soft),var(--bg-elevated));
  border:1px solid var(--border);border-radius:var(--r-lg);padding:36px 28px;text-align:center}
.mk-band h2{font-size:22px;margin-bottom:18px;font-weight:750}

/* FAQ */
.mk-faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.mk-faq-item{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-card);padding:14px 18px}
.mk-faq-item summary{cursor:pointer;font-size:14.5px;font-weight:600;list-style:none;display:flex;align-items:center;gap:8px}
.mk-faq-item summary::-webkit-details-marker{display:none}
.mk-faq-item summary::before{content:"＋";color:var(--accent);font-weight:700}
.mk-faq-item[open] summary::before{content:"－"}
.mk-faq-item p{margin-top:10px;font-size:13.5px;color:var(--text-2);line-height:1.75}

/* 移动端：导航链接藏起来（头部本来就有主题按钮和徽章），栅格一律单列 */
@media (max-width:900px){
  .mk-navlinks{display:none}
  .mk-hero{padding:34px 0 4px}
  .mk-h1{font-size:30px}
  .mk-sub{font-size:14.5px}
  .mk-preview{grid-template-columns:1fr;padding:10px}
  .mk-preview-rail{flex-direction:row}
  .mk-preview-rail i{flex:1;height:26px}
  .mk-preview-panel{display:none}
  .mk-preview-canvas{min-height:170px}
  .mk-section{padding:34px 0}
  .mk-grid3,.mk-grid4,.mk-grid5,.mk-grid6,.mk-grid7{grid-template-columns:1fr}
  .mk-band{padding:26px 18px}
  .mk-band h2{font-size:18px}
}

/* ============================================================
   整理面板分区
   原来 10 行控件等权重平铺，眼睛找不到「块」。这里按用途切成 5 组，
   控件 id / onclick 一个没动，只加外层结构 + 统一的说明位置 + 主次按钮。
   ============================================================ */
.pnl-grp{border:1px solid var(--line2);border-radius:var(--r-card);margin-bottom:14px;background:var(--bg-panel);overflow:hidden}
.pnl-grp-hd{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--bg-inset);border-bottom:1px solid var(--line2);font-size:13px;font-weight:600;color:var(--text-1);letter-spacing:.2px}
.pnl-grp-tag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--r-pill);background:var(--accent);color:#fff}
.pnl-hd-link{margin-left:auto;font-size:12px;font-weight:400;color:var(--accent);cursor:pointer}
.pnl-hd-link:hover{text-decoration:underline}
.pnl-grp-bd{padding:12px 14px}
.pnl-grp-bd-flush{padding:10px}
.pnl-item{padding-top:12px}
.pnl-item:first-child{padding-top:0}
.pnl-item + .pnl-item{margin-top:12px;border-top:1px solid var(--line2)}
.pnl-sub{font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:7px}
.pnl-grp-bd .toolbar-row{margin-bottom:0;padding-bottom:0;border-bottom:none}
.pnl-note{margin-top:7px;font-size:12px;color:var(--text-3);line-height:1.75}
.pnl-link{color:var(--accent);font-weight:600;text-decoration:underline}

/* 核心操作实心、还原走描边 —— 解决「一键去背景」和「复制」一样大的问题 */
.toolbar-btn-key{background:var(--accent);border-color:var(--accent);color:#fff}
.toolbar-btn-key:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.toolbar-btn-sub{background:transparent;color:var(--text-2)}
.toolbar-btn-sub:hover{border-color:var(--border-strong);color:var(--text-1)}

@media (max-width:900px){
  .pnl-grp-bd{padding:10px}
  .pnl-grp-bd-flush{padding:8px 6px}
  /* 窄屏别把「去背景容差」这种标签挤成竖排 —— 整组换行、标签不折行更清楚 */
  .pnl-grp-bd .threshold-wrap{flex-wrap:wrap;row-gap:8px}
  .pnl-grp-bd .threshold-wrap > span{white-space:nowrap}
  .pnl-grp-bd .tag-toggle{white-space:nowrap}
  .pnl-sub{margin-bottom:6px}
}

/* ---------- 工作台三栏：窄屏退化为纵向堆叠（1100px 以下三栏挤不开） ---------- */
@media (max-width:1100px){
  .ws-grid{grid-template-columns:1fr;height:auto;min-height:0;gap:0}
  .ws-col{margin-bottom:14px}
  .ws-col-body{overflow:visible}
  .ws-col-body .thumbnail-grid{max-height:460px;overflow-y:auto}
  .ws-col .dropzone{padding:44px 20px}
  .ws-col .preview-box video{max-height:340px}
  .ws-export-cta{position:static;background:none;padding:16px 0 0}
  .export-mask{padding:16px 12px}
}