/* ============================================================================
 * wb-shell.css —— 「工作台」统一外壳（三个工作台共用，来自图片批处理台 v2）
 * ----------------------------------------------------------------------------
 * 为什么要有这个文件：v1 的三个工作台各写各的样式，于是字号/间距/控件高度
 * 全不一样 —— 那正是站长说的「杂乱、不像一个软件」。这里把顶栏 / 左素材 /
 * 中主视图 / 右折叠面板 / 底状态条 / 空状态案例 六块的样式收成一处，
 * 三个工作台共用同一套 token 与尺寸。
 *
 * 命名：`wb-` = workbench shell（作用域挂 body.wb，避免污染站内其它页面）
 * 尺寸规范：字号 12/13/14/15/16 · 控件高 28/32 · 间距 4/8/12/16/24 · 栅格 8pt
 * 注：theme.css 是全局覆盖层，引用顺序必须在本文件之后（_verify-css-cascade 守这条）。
 * ========================================================================== */
/* ---------- 设计 token ----------
   【2026-10-14 补】抽外壳时把这些变量留在了图片台的页面内联样式里，结果
   四个页面都在用没定义的 --wb-*（边框颜色静默回退成文字色），产物验收才发现。
   挂在 body.wb 上（自定义属性会继承），不用 :root，避免污染站内其它页面。 */
body.wb{
  --wb-line:#E7DFD4; --wb-line2:#F1EAE1; --wb-surface:#FFFFFF; --wb-bg:#F7F3EC;
  --wb-ink:#2A211B; --wb-ink2:#6B5C4E; --wb-ink3:#8A7968;
  --wb-ok:#137333; --wb-ok50:#E7F4EA; --wb-warn:#B07410; --wb-warn50:#FDF3E1;
  --wb-danger:#B3261E; --wb-danger50:#FBEBEA;
}

body.wb{
  /* 【2026-10-14】不写 font-family：站内 theme.css 统一了 PingFang SC 优先的字体栈，
     这里若用 font 简写会把它覆盖掉（_smoke-theme 守卫逐页查字体栈）。只定字号行高。 */
  font-size:13px;line-height:1.5;
  color:var(--wb-ink);background:var(--wb-bg);display:flex;flex-direction:column;min-height:100vh;margin:0;
}
body.wb .num{font-variant-numeric:tabular-nums}
.wb-wrap{margin:0 auto;width:100%;flex:1;display:flex;flex-direction:column;min-height:0}

/* ---------- 顶栏（身份 + 全局动作 + 实时读数） ---------- */
/* 降层：站点 CSS 给所有 header 设了 sticky+z-index:60（theme.css L423），
   而导航下拉也活在 60 那一层，DOM 靠后的顶栏就把下拉压住了（实测被遮）。
   这里显式降到 1，顶栏不 sticky 也不参与压盖。 */
.wb-top{position:relative;z-index:1}
.wb-top{height:48px;background:var(--wb-surface);border-bottom:1px solid var(--wb-line);display:flex;align-items:center;gap:12px;padding:0 16px;flex:none}
.wb-top .bk{color:var(--wb-ink3);text-decoration:none;font-size:13px}
.wb-top h1{font-size:15px;margin:0;font-weight:650}
.wb-top .st{color:var(--wb-ink3);font-size:12px;display:flex;align-items:center;gap:8px}
.wb-dot{width:3px;height:3px;border-radius:50%;background:var(--wb-ink3);display:inline-block;vertical-align:2px}
.wb-top .sp{flex:1}
.wb-chip{font-size:12px;color:var(--wb-ok);background:var(--wb-ok50);border-radius:999px;padding:2px 8px}
.wb-btn{height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--wb-line);background:var(--wb-surface);color:var(--wb-ink);font:inherit;cursor:pointer}
.wb-btn:hover{border-color:#D8CDBE}
.wb-btn-p{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.wb-btn-p:hover{background:#7A4A16;border-color:#7A4A16}
.wb-btn[disabled]{opacity:.45;cursor:not-allowed}
.wb-btn-sm{height:28px;padding:0 10px;font-size:12px}
.wb-kbd{font:12px/1 ui-monospace,Consolas,monospace;background:var(--wb-line2);border:1px solid var(--wb-line);border-radius:5px;padding:2px 5px;color:var(--wb-ink2)}

/* ---------- 三栏骨架 ---------- */
.wb-main{flex:1;display:grid;grid-template-columns:268px minmax(0,1fr) 304px;min-height:0}
.wb-pane{min-height:0;display:flex;flex-direction:column}
.wb-l{border-right:1px solid var(--wb-line);background:var(--wb-surface)}
.wb-c{background:var(--wb-bg);overflow:auto}
.wb-r{border-left:1px solid var(--wb-line);background:var(--wb-surface)}
.wb-ph{height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--wb-line2);font-size:12px;color:var(--wb-ink3);flex:none}
.wb-ph b{color:var(--wb-ink);font-size:12px;font-weight:600}
.wb-ph .sp{flex:1}
.wb-ph a{color:var(--wb-ink3);text-decoration:none}
.wb-ph a:hover{color:var(--brand)}

/* ---------- 左栏：素材队列 ---------- */
.wb-q{overflow:auto;flex:1}
.wb-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--wb-line2);cursor:default}
.wb-row:hover{background:#FBF1E3}
.wb-row.sel{background:#FBF1E3;box-shadow:inset 3px 0 0 var(--brand)}
.wb-th{width:40px;height:40px;border-radius:6px;overflow:hidden;background:#EDE6DC;flex:none;position:relative}
.wb-th img{width:100%;height:100%;object-fit:cover;display:block}
.wb-th canvas{width:100%;height:100%;object-fit:cover;display:block}

/* 非图片文件的缩略图：用扩展名图标代替空方块。
   媒体台会收视频 / 音频 / ZIP / 任意文件，没有位图可缩，空着反而像坏了。 */
.wb-th .wb-ico{display:grid;place-items:center;width:100%;height:100%;font-size:16px;color:var(--wb-ink3);background:#EDE6DC}

/* ---------- 文件信息块 ----------
   拍摄参数 / 媒体体检这类「每文件一组键值」的面板都用它。
   【2026-10-17】这三个类此前只在 JS 里被创建，CSS 里从来没定义过 ——
   于是那些面板渲染成一摞没有间距、没有边框的裸 div。这里补齐定义，
   图片台的「拍摄参数」面板与媒体台的「文件信息」面板共用同一套外观。 */
.wb-fp{padding:8px 10px;margin:0 0 6px;border:1px solid var(--wb-line2);border-radius:8px;background:var(--wb-surface)}
.wb-fp-n{font-size:12px;font-weight:600;color:var(--wb-ink);line-height:1.4;word-break:break-all;margin-bottom:4px}
.wb-fp-v{font-size:12px;line-height:1.7;color:var(--wb-ink2);word-break:break-all}
.wb-nm{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-mt{font-size:12px;color:var(--wb-ink3)}
.wb-bd{display:inline-block;font-size:12px;font-weight:650;border-radius:999px;padding:1px 7px;background:var(--wb-ok50);color:var(--wb-ok);white-space:nowrap}
.wb-bd.warn{background:var(--wb-warn50);color:var(--wb-warn)}
.wb-bd.risk{background:var(--wb-danger50);color:var(--wb-danger)}
.wb-bd.idle{background:var(--wb-line2);color:var(--wb-ink3)}

/* ---------- 中栏：工具条 + 网格 + 对比舞台 ---------- */
.wb-pad{padding:16px}
.wb-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:12px;color:var(--wb-ink3);flex-wrap:wrap}
.wb-bar b{color:var(--wb-ink);font-size:12px}
.wb-seg{margin-left:auto;display:flex;gap:2px;background:var(--wb-line2);border-radius:8px;padding:2px}
.wb-seg button{height:24px;padding:0 10px;border:0;background:transparent;border-radius:6px;font:inherit;font-size:12px;color:var(--wb-ink2);cursor:pointer}
.wb-seg button.on{background:var(--wb-surface);color:var(--wb-ink);font-weight:650;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.wb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.wb-card{background:var(--wb-surface);border:1px solid var(--wb-line);border-radius:12px;overflow:hidden;cursor:pointer}
.wb-card:hover{border-color:#D8CDBE}
.wb-card.on{border-color:var(--brand);box-shadow:0 0 0 2px rgba(180,114,42,.12)}
.wb-card .cv{height:118px;position:relative;background:#EDE6DC}
.wb-card .cv img,.wb-card .cv canvas{width:100%;height:100%;object-fit:cover;display:block}
.wb-card .cv .pct{position:absolute;right:8px;bottom:8px;font-size:12px;font-weight:650;color:#fff;background:rgba(19,115,51,.92);border-radius:999px;padding:2px 8px}
.wb-card .cb{padding:8px 10px}
.wb-card .cn{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-card .cs{font-size:12px;color:var(--wb-ink3)}
.wb-cmp{background:var(--wb-surface);border:1px solid var(--wb-line);border-radius:12px;overflow:hidden}
.wb-cmp .ch{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--wb-line2);font-size:12px;color:var(--wb-ink3);flex-wrap:wrap}
.wb-cmp .ch b{color:var(--wb-ink);font-size:13px}
.wb-stage{position:relative;height:360px;overflow:hidden;background:#2A211B;cursor:ew-resize;user-select:none;touch-action:none;display:grid;place-items:center}
.wb-stage img,.wb-stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.wb-stage .aft{clip-path:inset(0 0 0 var(--split,50%))}
.wb-stage .tg{position:absolute;top:10px;font-size:12px;color:#fff;background:rgba(0,0,0,.55);padding:2px 8px;border-radius:999px}
.wb-stage .tg.l{left:12px} .wb-stage .tg.r{right:12px}
.wb-stage .hd{position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.wb-stage .kn{position:absolute;top:50%;left:var(--split,50%);transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35);display:grid;place-items:center;font-size:13px;color:var(--wb-ink2)}
.wb-stats{display:flex;gap:16px;flex-wrap:wrap;padding:10px 12px;font-size:12px;color:var(--wb-ink2);border-top:1px solid var(--wb-line2)}
.wb-stats b{color:var(--wb-ink);font-weight:650}

/* ---------- 右栏：折叠配方面板 ---------- */
.wb-panels{overflow:auto;flex:1}
.wb-panel{border-bottom:1px solid var(--wb-line2)}
.wb-panel .pt{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;cursor:pointer;user-select:none}
.wb-panel .pt b{font-size:12px;font-weight:650}
.wb-panel .pt .sp{flex:1}
.wb-panel .pt .v{font-size:12px;color:var(--wb-ink3)}
.wb-panel .pb{padding:4px 12px 12px;display:grid;gap:8px}
.wb-panel.closed .pb{display:none}
.wb-f{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:8px}
.wb-f>label{font-size:12px;color:var(--wb-ink2)}
body.wb select,body.wb input[type=text],body.wb input[type=number]{
  height:28px;border:1px solid var(--wb-line);border-radius:6px;background:var(--wb-surface);
  padding:0 8px;font:inherit;font-size:12px;color:var(--wb-ink);min-width:0;width:100%}
body.wb input[type=range]{width:100%;accent-color:var(--brand)}
.wb-inl{display:flex;align-items:center;gap:8px}
.wb-inl .q{font-size:12px;color:var(--wb-ink2);min-width:34px;text-align:right}
.wb-sw{position:relative;width:34px;height:20px;border-radius:999px;background:#DCD3C6;flex:none;cursor:pointer;transition:background .15s}
.wb-sw i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.wb-sw.on{background:var(--brand)}
.wb-sw.on i{left:16px}
.wb-sum{font-size:12px;color:var(--wb-ink2);background:#FBF1E3;border:1px solid #F0E0C8;border-radius:8px;padding:8px 10px;line-height:1.65}
.wb-hint{font-size:12px;color:var(--wb-ink3);line-height:1.6}
.wb-list{display:grid;gap:6px;font-size:12px;color:var(--wb-ink2)}
.wb-list .it{display:flex;gap:8px;align-items:baseline;border:1px solid var(--wb-line2);border-radius:8px;padding:6px 8px;background:#fff}
.wb-list .it .hd2{flex:none;color:var(--wb-ink3)}

/* ---------- 底栏 ---------- */
.wb-bot{height:44px;background:var(--wb-surface);border-top:1px solid var(--wb-line);display:flex;align-items:center;gap:12px;padding:0 16px;flex:none}
.wb-prog{width:200px;height:5px;border-radius:3px;background:var(--wb-line2);overflow:hidden}
.wb-prog i{display:block;height:100%;width:0;background:var(--brand);transition:width .2s}
.wb-bot .tx{font-size:12px;color:var(--wb-ink2)}
.wb-bot .sp{flex:1}

/* ---------- 空状态：投放区 + 案例入口 ---------- */
.wb-empty{max-width:760px;margin:56px auto;padding:0 16px;text-align:center}
.wb-drop{border:1.5px dashed #D9CDBC;border-radius:16px;background:var(--wb-surface);padding:36px 24px;cursor:pointer}
.wb-drop:hover{border-color:var(--brand)}
.wb-drop .bg{font-size:28px}
.wb-drop .t1{font-size:16px;font-weight:650;margin:12px 0 6px}
.wb-drop .t2{font-size:12px;color:var(--wb-ink3)}
.wb-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px;text-align:left}
.wb-case{background:var(--wb-surface);border:1px solid var(--wb-line);border-radius:12px;padding:12px;cursor:pointer}
.wb-case:hover{border-color:var(--brand);box-shadow:0 2px 10px rgba(180,114,42,.08)}
.wb-case .ct{font-size:13px;font-weight:650;margin-bottom:4px}
.wb-case .cd{font-size:12px;color:var(--wb-ink3);line-height:1.55;min-height:36px}
.wb-case .cr{margin-top:8px;font-size:12px;color:var(--wb-ok);font-weight:650}
.wb-case.on{border-color:var(--brand);background:#FBF1E3}

/* ---------- 拖拽高亮 ---------- */
body.dragging .wb-drop{border-color:var(--brand);background:#FBF1E3}
body.dragging .wb-c{outline:2px dashed var(--brand);outline-offset:-8px}

/* ---------- 窄屏：三栏堆叠 ---------- */
@media(max-width:1100px){.wb-main{grid-template-columns:1fr}.wb-l,.wb-r{border:0;border-top:1px solid var(--wb-line)}}

/* ==========================================================================
 * 交互层（借鉴 Linear / Raycast / Squoosh / Smallpdf / ImageOptim）
 *   命令面板 · toast · 快捷键表 · 拖出提示
 * ======================================================================== */

/* ---------- 命令面板 ⌘K ---------- */
.wb-pal-scrim{position:fixed;inset:0;background:rgba(42,33,27,.42);backdrop-filter:blur(2px);z-index:9000;display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.wb-pal{width:min(640px,100%);background:var(--wb-surface);border:1px solid var(--wb-line);border-radius:14px;box-shadow:0 24px 60px rgba(42,33,27,.28);overflow:hidden;display:flex;flex-direction:column}
.wb-pal-q{height:46px;border:0;border-bottom:1px solid var(--wb-line2);padding:0 16px;font:inherit;font-size:15px;color:var(--wb-ink);outline:none;background:transparent}
.wb-pal-list{max-height:46vh;overflow:auto;padding:6px 0}
.wb-pal-g{font-size:12px;color:var(--wb-ink3);padding:8px 16px 4px;letter-spacing:.02em}
.wb-pal-i{display:flex;align-items:center;gap:10px;padding:8px 16px;cursor:pointer;font-size:13px}
.wb-pal-i.on{background:#FBF1E3}
.wb-pal-i .sp{flex:1}
.wb-pal-i .hint{color:var(--wb-ink3);font-size:12px}
.wb-pal-i .keys{font:12px/1 ui-monospace,Consolas,monospace;color:var(--wb-ink2);background:var(--wb-line2);border-radius:5px;padding:3px 6px;white-space:nowrap}
.wb-pal-foot{display:flex;align-items:center;gap:8px;border-top:1px solid var(--wb-line2);padding:8px 16px;font-size:12px;color:var(--wb-ink3)}
.wb-pal-foot .sp{flex:1}
.wb-help-h{font-size:14px;font-weight:650;padding:14px 16px 6px;color:var(--wb-ink)}
.wb-help-list{max-height:56vh;overflow:auto;padding:0 0 8px}
.wb-help-row{display:flex;align-items:baseline;gap:12px;padding:6px 16px;font-size:13px}
.wb-help-row .k{font:12px/1 ui-monospace,Consolas,monospace;color:var(--wb-ink2);background:var(--wb-line2);border-radius:5px;padding:3px 7px;white-space:nowrap;min-width:64px;text-align:center}
.wb-help-row .w{color:var(--wb-ink)}

/* ---------- toast（带撤销） ---------- */
.wb-toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:64px;z-index:9500;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.wb-toast{display:flex;align-items:center;gap:10px;background:#2A211B;color:#FDF6EE;border-radius:10px;padding:9px 12px;font-size:13px;box-shadow:0 10px 30px rgba(42,33,27,.3);opacity:0;transform:translateY(8px);transition:opacity .18s,transform .18s;pointer-events:auto;max-width:min(560px,92vw)}
.wb-toast.on{opacity:1;transform:none}
.wb-toast.ok{background:#137333}
.wb-toast.err{background:#B3261E}
.wb-toast .tx{flex:1}
.wb-toast-act{background:rgba(255,255,255,.16);color:#fff;border:0;border-radius:6px;padding:4px 10px;font:inherit;font-size:12px;cursor:pointer}
.wb-toast-act:hover{background:rgba(255,255,255,.26)}
.wb-toast-x{background:transparent;border:0;color:rgba(255,255,255,.7);font-size:15px;line-height:1;cursor:pointer;padding:0 2px}

/* ---------- 可拖出 ---------- */
.wb-dragout{cursor:grab}
.wb-dragout:active{cursor:grabbing}
.wb-dragout::after{content:''}

/* ---------- 窄屏（手机也能用） ---------- */
@media(max-width:760px){
  .wb-top{height:auto;flex-wrap:wrap;gap:8px;padding:8px 12px}
  .wb-top h1{font-size:14px;flex:1 1 100%}
  .wb-top .st{order:3;flex:1 1 100%;font-size:12px}
  .wb-top .sp{display:none}
  .wb-btn{height:30px;padding:0 10px;font-size:12px}
  .wb-pane{max-height:none}
  .wb-bot{position:sticky;bottom:0;height:auto;flex-wrap:wrap;gap:8px;padding:8px 12px}
  .wb-bot .wb-hint{display:none}
  /* 【2026-10-17 修遮挡】底栏吸底后，滚到最底部时最后一块内容会被压住 ——
     实测 390px 媒体台：滚到底了，预设方案卡片底部仍有 35px 藏在底栏后面。
     给「真正会滚的那一层」各留一条安全边距（84px = 底栏换行后最高 ~76px + 余量）：
       · 空状态：内容直接挂在 .wb-wrap 下、由整页滚动 → 给空状态容器留白
       · 已载入：素材 / 主视图 / 配方各自内部滚动 → 给三个滚动区留白
     两种状态互斥，所以不会叠加成一长条空白。 */
  #wb-empty,.wb-empty,.wb-c,.wb-r .wb-panels,.wb-l .wb-q{padding-bottom:84px}
  .wb-prog{width:110px}
  .wb-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
  .wb-stage{height:240px}
  .wb-cases{grid-template-columns:1fr}
  .wb-empty{margin:28px auto}
  .wb-pad{padding:12px}
}

/* ---------- 暗色模式（跟随系统）——不需要开关，减少一格认知负担 ---------- */
@media(prefers-color-scheme:dark){
  body.wb{
    --wb-line:#3A3128; --wb-line2:#2E2720; --wb-surface:#221C17; --wb-bg:#191411;
    --wb-ink:#F2EAE0; --wb-ink2:#C9BCAE; --wb-ink3:#9C8F82;
    --wb-ok:#6BD08A; --wb-ok50:#1C3A25; --wb-warn:#E0A33C; --wb-warn50:#3A2E15;
    --wb-danger:#F08A80; --wb-danger50:#3E211D;
  }
  body.wb .wb-row:hover,body.wb .wb-row.sel{background:#2A231C}
  body.wb .wb-panel .wb-sum,body.wb .wb-sum{background:#2A231C;border-color:#3A3128}
  body.wb .wb-pal-i.on{background:#2A231C}
  body.wb .wb-toast{background:#F2EAE0;color:#221C17}
  body.wb .wb-toast.ok{background:#1F7A43;color:#F2EAE0}
  body.wb .wb-toast.err{background:#B3261E;color:#FDF6EE}
  body.wb .wb-toast-act{background:rgba(0,0,0,.12);color:inherit}
  body.wb .wb-toast-x{color:rgba(0,0,0,.55)}
  body.wb .tx-out,body.wb .tx-src{background:#221C17;color:var(--wb-ink)}
  body.wb .wb-stage{background:#0F0C0A}
  body.wb .tx-line.add{background:#1C3A25}
  body.wb .tx-line.del{background:#3E211D}
  body.wb .tx-line.chg{background:#3A2E15}
  body.wb .dv-issue,body.wb .wb-card,body.wb .wb-cmp,body.wb .pd-doc,
  body.wb .pd-film .it,body.wb .pd-grid .it,body.wb .pd-step{background:#221C17}
  body.wb .pd-view{background:#0F0C0A}
  body.wb .pd-view canvas,body.wb .pd-film canvas,body.wb .pd-grid canvas{background:#fff}
}


/* ---------- 空状态：三步说明（借鉴 Smallpdf / iLovePDF） ---------- */
.wb-howto{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 0 18px}
.wb-howto-i{display:flex;gap:8px;align-items:flex-start;text-align:left;background:var(--wb-surface);border:1px solid var(--wb-line);border-radius:10px;padding:10px 12px;min-width:190px;flex:1 1 190px;max-width:250px}
.wb-howto-i .n{flex:none;width:20px;height:20px;border-radius:50%;background:var(--brand);color:#fff;font-size:12px;display:grid;place-items:center}
.wb-howto-i .t{font-size:13px;font-weight:600;color:var(--wb-ink)}
.wb-howto-i .dd{font-size:12px;color:var(--wb-ink3);margin-top:2px;line-height:1.5}

/* ---------- 视觉收敛：更克制的层级（统一圆角 / 细滚动条 / 键盘焦点环） ---------- */
.wb-l .wb-q,.wb-r .wb-panels,.wb-c,.pd-film{scrollbar-width:thin;scrollbar-color:#D9CDBC transparent}
.wb-card,.wb-cmp,.wb-doc,.wb-howto-i,.pd-step,.dv-issue{border-radius:10px}
/* 面板标题栏更安静：悬停才强调，值文本降一档对比 */
.wb-panel .pt .v{color:#9C8F82}
.wb-panel .pt:hover b{color:var(--brand)}
/* 键盘用户必须看得见焦点（鼠标点击不显示焦点环） */
body.wb :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.wb-btn:focus-visible,body.wb select:focus-visible,body.wb input:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
@media(prefers-color-scheme:dark){body.wb .wb-l .wb-q,body.wb .wb-r .wb-panels,body.wb .wb-c{scrollbar-color:#4A3F35 transparent}}


/* ---------- 逐项进度（CloudConvert 式：每个文件自己的进度与耗时） ---------- */
.wb-ipslot{display:inline-flex;align-items:center}
.wb-ip{display:inline-flex;align-items:center;gap:6px;margin-left:6px}
.wb-ip .bar{display:inline-block;width:44px;height:4px;border-radius:2px;background:var(--wb-line);overflow:hidden;vertical-align:middle}
.wb-ip .bar i{display:block;height:100%;background:var(--brand);transition:width .18s}
.wb-ip em{font-style:normal;font-size:12px;color:var(--wb-ink3);font-variant-numeric:tabular-nums}
.wb-ip.done em{color:var(--wb-ok)}
.wb-ip.err em{color:var(--wb-danger)}
@media(prefers-color-scheme:dark){.wb-ip .bar{background:#3A3128}}

/* ---------- 相似度矩阵（文本台：两两比对） ---------- */
.wb-sim { margin-top: 8px; }
.wb-sim-grid { display: inline-block; border: 1px solid var(--line, #e8e0d4); border-radius: 8px; overflow: hidden; }
.wb-sim-row { display: flex; }
.wb-sim-c { min-width: 44px; padding: 5px 6px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; border-right: 1px solid var(--line, #e8e0d4); border-bottom: 1px solid var(--line, #e8e0d4); }
.wb-sim-c:last-child { border-right: 0; }
.wb-sim-row:last-child .wb-sim-c { border-bottom: 0; }
.wb-sim-h { background: rgba(0,0,0,.035); font-weight: 600; }
.wb-sim-dim { background: rgba(0,0,0,.02); }
.wb-sim-diag { color: var(--muted, #8a8378); }
.wb-sim-hot { background: rgba(200,60,50,.12); color: #a3342b; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .wb-sim-c { border-color: rgba(255,255,255,.12); }
  .wb-sim-h { background: rgba(255,255,255,.06); }
  .wb-sim-dim { background: rgba(255,255,255,.03); }
  .wb-sim-hot { background: rgba(255,120,110,.18); color: #ffb3ad; }
}

/* ============================================================================
 * 工作台统一外壳：本台工具抽屉 + 下一步 + 跨台交接（2026-10-18）
 * ========================================================================== */
.wb-tools-btn{display:inline-flex;align-items:center;gap:6px}
.wb-tools-btn b{font-weight:700;font-size:12px;color:var(--amber-deep,#A9680F);background:var(--brand-light,#FFF6E5);border-radius:999px;padding:0 6px}
.wb-drawer{position:fixed;inset:0;z-index:1200;display:none}
.wb-drawer.on{display:block}
.wb-drawer-scrim{position:absolute;inset:0;background:rgba(16,24,38,.34);backdrop-filter:blur(2px)}
.wb-drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(380px,92vw);background:var(--surface,#FFFDFA);border-left:1px solid var(--border,#E8E0D4);box-shadow:-20px 0 60px rgba(16,24,38,.18);display:flex;flex-direction:column;animation:wbDrawerIn .18s ease-out}
@keyframes wbDrawerIn{from{transform:translateX(20px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.wb-drawer-panel{animation:none}}
.wb-drawer-h{display:flex;align-items:center;gap:9px;padding:15px 16px;border-bottom:1px solid var(--border,#E8E0D4)}
.wb-drawer-h b{font-size:14px;color:var(--ink,#1F1A14)}
.wb-drawer-h span{font-size:12px;color:var(--muted,#8A8378)}
.wb-drawer-h button{margin-left:auto;border:0;background:transparent;font-size:20px;line-height:1;color:var(--muted,#8A8378);cursor:pointer;padding:2px 4px}
.wb-drawer-body{overflow:auto;padding:12px 16px 20px}
.wb-drawer-sec{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted,#8A8378);margin:8px 0 7px}
.wb-drawer-tools{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.wb-drawer-tools a{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:8px;text-decoration:none;color:var(--txt,#3B342C);font-size:13px}
.wb-drawer-tools a:hover{background:var(--gold-soft,#FFF8E8);color:var(--amber-deep,#A9680F)}
.wb-drawer-tools a span{margin-left:auto;font-size:10.5px;color:var(--muted,#8A8378)}
.wb-drawer-tools a .wb-tool-name{flex:1;min-width:0;margin-left:0;font-size:13px;color:var(--txt,#3B342C);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-next{margin-top:14px;padding:12px;border:1px solid var(--border,#E8E0D4);border-radius:12px;background:var(--brand-light,#FFF6E5)}
.wb-next h4{margin:0 0 8px;font-size:12px;color:var(--ink,#1F1A14);display:flex;align-items:center;gap:6px}
.wb-next h4:before{content:'';width:4px;height:13px;border-radius:2px;background:var(--amber,#E0A32E)}
.wb-next .wb-next-row{display:flex;flex-wrap:wrap;gap:6px}
.wb-next button{border:1px solid var(--border,#E8E0D4);background:var(--surface,#FFFDFA);color:var(--txt,#3B342C);font:inherit;font-size:12px;border-radius:999px;padding:5px 10px;cursor:pointer}
.wb-next button:hover{border-color:var(--amber,#E0A32E);color:var(--amber-deep,#A9680F)}
.wb-next .note{font-size:10.5px;color:var(--muted,#8A8378);margin-top:7px;line-height:1.5}
.wb-next .drop-hint{font-size:12px;color:var(--amber-deep,#A9680F);margin-top:6px;min-height:14px}
.wb-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:1400;background:#1F1A14;color:#FFFDFA;font-size:12.5px;line-height:1.5;padding:9px 14px;border-radius:10px;box-shadow:0 10px 30px rgba(16,24,38,.24);max-width:min(520px,90vw)}

/* ---------- 工作台内嵌工具面板（本台工具 → 面板） ---------- */
.wb-toolhost{position:fixed;inset:0;z-index:1300;display:none}
body.wb-toolhost-open{overflow:hidden}
.wb-toolhost.on{display:block}
.wb-toolhost-scrim{position:absolute;inset:0;background:rgba(16,24,38,.42);backdrop-filter:blur(3px)}
.wb-toolhost-box{position:absolute;inset:clamp(10px,4vw,42px);display:flex;flex-direction:column;background:var(--surface,#FFFDFA);border:1px solid var(--border,#E8E0D4);border-radius:16px;overflow:hidden;box-shadow:0 24px 80px rgba(16,24,38,.28)}
.wb-toolhost-h{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border,#E8E0D4);background:var(--brand-light,#FFF6E5);flex:none}
.wb-toolhost-h b{font-size:13px;color:var(--ink,#1F1A14);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-toolhost-h .wb-toolhost-open{margin-left:auto;font-size:12px;color:var(--amber-deep,#A9680F);text-decoration:none}
.wb-toolhost-h .wb-toolhost-open:hover{text-decoration:underline}
.wb-toolhost-x{border:1px solid var(--border,#E8E0D4);background:var(--surface,#FFFDFA);color:var(--txt,#3B342C);width:28px;height:28px;border-radius:8px;font:inherit;font-size:18px;line-height:1;cursor:pointer;flex:none}
.wb-toolhost-x:hover{border-color:var(--amber,#E0A32E);color:var(--amber-deep,#A9680F)}
.wb-toolhost iframe{flex:1;width:100%;border:0;background:#fff}
@media (max-width:640px){.wb-toolhost-box{inset:0;border-radius:0;border:0}.wb-toolhost-h{padding:8px 10px}}
@media (prefers-reduced-motion:reduce){.wb-toolhost{transition:none}}

/* ---------- 工作台空白页里的「本台全部工具」 ---------- */
.wb-alltools{width:100%;margin:16px 0 0;padding:12px 14px;border:1px solid var(--border,#E8E0D4);border-radius:12px;background:rgba(255,253,250,.72)}
.wb-alltools-h{display:flex;align-items:baseline;gap:8px;margin-bottom:9px;font-size:12.5px;color:var(--ink,#1F1A14);font-weight:700}
.wb-alltools-h span{font-weight:400;color:var(--muted,#8A8378);font-size:12px}
.wb-alltools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:6px}
.wb-alltools-grid button{border:1px solid var(--border,#E8E0D4);background:var(--surface,#FFFDFA);color:var(--txt,#3B342C);font:inherit;font-size:12px;line-height:1.3;text-align:left;border-radius:8px;padding:7px 9px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-alltools-grid button:hover{border-color:var(--amber,#E0A32E);background:var(--gold-soft,#FFF8E8);color:var(--amber-deep,#A9680F)}
@media (max-width:640px){.wb-alltools{padding:10px}.wb-alltools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.wb-drawer-panel{width:100%;top:auto;height:82vh;border-left:0;border-top:1px solid var(--border,#E8E0D4);border-radius:16px 16px 0 0}.wb-next{margin-top:10px}}

/* ---------- 作品库 / 项目空间（本机 IndexedDB） ---------- */
.wb-proj-mask{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:rgba(16,24,38,.56);padding:24px}
.wb-proj{width:100%;max-width:760px;max-height:82vh;display:flex;flex-direction:column;background:var(--surface,#FFFDFA);border:1px solid var(--border,#E8E0D4);border-radius:16px;box-shadow:0 24px 70px rgba(16,24,38,.28);overflow:hidden}
.wb-proj-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border,#E8E0D4);background:var(--brand-light,#FFF6E5);flex:none}
.wb-proj-head b{font-size:15px;color:var(--ink,#1F1A14)}
.wb-proj-x{margin-left:auto;width:30px;height:30px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted,#8A8378);font-size:20px;line-height:1;cursor:pointer}
.wb-proj-x:hover{border-color:var(--amber,#E0A32E);color:var(--amber-deep,#A9680F)}
.wb-proj-bar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border,#E8E0D4);flex-wrap:wrap}
.wb-proj-save{border:1px solid var(--amber,#E0A32E);background:var(--gold-soft,#FFF8E8);color:var(--amber-deep,#A9680F);font:inherit;font-size:13px;font-weight:700;border-radius:9px;padding:7px 12px;cursor:pointer}
.wb-proj-note{font-size:12px;color:var(--muted,#8A8378)}
.wb-proj-list{padding:8px 16px 16px;overflow:auto}
.wb-proj-empty{padding:28px 8px;text-align:center;font-size:13px;color:var(--muted,#8A8378)}
.wb-proj-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px dashed var(--border,#E8E0D4)}
.wb-proj-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.wb-proj-info b{font-size:13px;color:var(--ink,#1F1A14);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-proj-info span{font-size:12px;color:var(--muted,#8A8378)}
.wb-proj-open,.wb-proj-del{border:1px solid var(--border,#E8E0D4);background:var(--surface,#FFFDFA);color:var(--txt,#3B342C);font:inherit;font-size:12px;border-radius:8px;padding:6px 10px;cursor:pointer;flex:none}
.wb-proj-open:hover{border-color:var(--amber,#E0A32E);color:var(--amber-deep,#A9680F)}
.wb-proj-del:hover{border-color:#C0392B;color:#C0392B}
@media (max-width:640px){.wb-proj-mask{padding:0;align-items:flex-end}.wb-proj{max-width:none;max-height:90vh;border-radius:16px 16px 0 0}.wb-proj-info span{font-size:12px}}