/* =========================================================================
   吧唧（马口铁徽章）制作工具 —— 站点内样式
   作用域：.badge-maker-root（所有规则已限定，:root 变量与 body 重置均已作用域化）
   主色 var(--brand-blue) / 浅色主题 / 玻璃拟态 / 8pt 栅格
   ========================================================================= */

/* =========================================================================
   吧唧制作工具 —— 单文件离线工具
   设计规范：主色 var(--brand-blue) / 浅色主题 / 玻璃拟态 / 8pt 栅格
   ========================================================================= */

.badge-maker-root{
  --blue:var(--brand-blue);
  --blue-dark:var(--bm-blue-dark);
  --blue-soft:rgba(var(--bm-blue-rgb), .10);
  --bg-1:var(--bm-bg-1);
  --bg-2:var(--bm-bg-2);
  --card:rgba(var(--bm-glass-rgb), .74);
  --card-border:rgba(var(--bm-glass-rgb), .9);
  --line:rgba(var(--bm-ink-rgb), .09);
  --text:var(--bm-ink);
  --text-2:var(--bm-ink-2);
  --text-3:var(--bm-ink-3);
  --warn:var(--hot-likes);
  --warn-soft:rgba(var(--bm-warn-rgb), .10);
  --radius:16px;
  --radius-sm:12px;
  --radius-xs:10px;
  --shadow:0 12px 32px rgba(var(--bm-ink-rgb), .09), 0 2px 8px rgba(var(--bm-ink-rgb), .05);
  --shadow-sm:0 4px 16px rgba(var(--bm-ink-rgb), .07);
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.badge-maker-root, .badge-maker-root *{ box-sizing:border-box; }

/* [site-integration] 已移除全局 html,body 重置，避免影响站点布局 */

.badge-maker-root{
  font-family:var(--font);
  color:var(--text);
  background:linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%) fixed;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:0;
  font-size:14px;
  line-height:1.5;
}

.hidden{ display:none !important; }

/* ------------------------------ 顶栏 ------------------------------ */
.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(var(--bm-glass-rgb), .72);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:1440px; margin:0 auto;
  padding:12px 24px;
  display:flex; align-items:center; gap:24px;
}
.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.brand-mark{
  width:36px; height:36px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border-radius:11px;
  background:var(--blue-soft);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.brand-text strong{ font-size:15px; font-weight:700; letter-spacing:.2px; }
.brand-text small{ font-size:11px; color:var(--text-3); white-space:nowrap; }
.topbar-actions{ margin-left:auto; display:flex; gap:8px; align-items:center; white-space:nowrap; }
.badge-maker-root .topbar-actions .btn{ white-space:nowrap; }

/* --------------------------- 分段控件 --------------------------- */
.segmented{
  display:inline-flex; padding:3px; gap:2px;
  background:rgba(var(--bm-slate-rgb), .15);
  border-radius:12px;
  flex:none;
}
.segmented button{
  border:0; background:transparent; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:600;
  color:var(--text-2);
  padding:8px 18px; border-radius:9px;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.segmented button:hover:not(.active){ color:var(--text); background:rgba(var(--bm-glass-rgb), .5); }
.badge-maker-root .segmented button:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.badge-maker-root .segmented button.active{
  background:var(--bg-card); color:var(--text);
  box-shadow:0 1px 4px rgba(var(--bm-ink-rgb), .16);
}
.segmented-sm button{ padding:6px 12px; font-size:13px; border-radius:8px; }

/* --------------------------- 布局 --------------------------- */
/* 工作台（2026-09-12 改版）：顶条 + 中区(编辑器|预览) + 底部参数坞。
   参数坞用「分类标签直达 + 当前分类横向平铺」，取代原先 3800px 的纵向堆叠与下拉滚动。 */
.layout{
  max-width:1440px; margin:0 auto;
  padding:20px 24px 14px;
  display:flex; flex-direction:column; gap:14px; align-items:stretch;
}
.workspace{
  order:1;
  display:flex; flex-direction:row; flex-wrap:wrap; gap:16px; align-items:stretch; min-width:0;
}
.workspace > *{ flex:1 1 420px; min-width:0; }
.panel{
  order:2;
  display:flex; flex-direction:column; gap:10px;
  padding:0; min-width:0;
}

/* 参数坞 · 分类标签 */
.dock-tabs{ display:flex; flex-wrap:wrap; gap:6px; }
.dock-tabs button{
  border:1px solid var(--line); background:rgba(var(--bm-glass-rgb), .78); color:var(--text-2);
  border-radius:var(--radius-xs); padding:7px 14px; font-size:13px; font-weight:600;
  font-family:inherit; cursor:pointer; min-height:34px;
  transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dock-tabs button:hover:not(.active){ color:var(--blue); border-color:rgba(var(--bm-blue-rgb), .45); background:var(--bg-card); }
.dock-tabs button:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.badge-maker-root .dock-tabs button.active{ background:var(--blue); color:var(--bg-card); border-color:var(--blue); }

/* 按钮 / 药丸文案一律不换行 —— 换行只发生在「控件之间」，不发生在控件内部 */
.dock-tabs button,
.panel .card.is-active .pill,
.panel .card.is-active .btn,
.panel .card.is-active .segmented button,
.badge-maker-root .topbar-actions .btn{ white-space:nowrap; }

/* 参数坞 · 只显示当前分类，内容横向平铺（换行而不是纵向堆叠）

   布局模型（2026-09-14 根因重构）
   ------------------------------------------------------------------
   `.card.is-active` 是 wrap 型 flex 行，其「直接子元素」= 一个个控件单元，横向平铺。
   旧实现用 `> *{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin:0}` 一刀切，
   把每个单元自身的 display / gap / align-items 静默覆盖，累计引发四类缺陷：
     ① `.tool-grid` / `.pill-grid` 的 `display:grid` 被覆盖 → 按钮排成单行长条、不能折行；
     ② `flex:0 0 auto` 使分组撑到 max-content 宽且不可收缩 → 窄屏横向溢出
        （实测 390px：边框组 616px、裁剪工具栏 524px → 整页出现横向滚动条、末尾按钮被裁掉）；
     ③ `align-items:center` 覆盖 `.text-field`（纵向容器）的 `stretch` → 其 label 居中，
        与坞内其它一律左对齐的 label 不一致；
     ④ `display:flex` 使 `.file-input-hidden` 外露（原生 file 控件露出 253px），
        并让 `input[type=range]` 拿到非标准的 `display:flex`（Safari/Firefox 轨道渲染不一致）。
   现改为「白名单 + 分桶」：只对真正需要横排的单元施加行布局，其余一律保留/恢复自身 display。
   新增子容器时**只需判断它属于哪一桶**，不会再被无差别覆盖。 */

.panel .card{ display:none; }
.panel .card.is-active{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  padding:14px 16px; margin:0;
}
/* 单元间距统一由容器的 row-gap 提供，单元自身外边距归零。
   这是唯一保留的「一刀切」属性 —— margin 不参与布局类型判定，无覆盖副作用。 */
.panel .card.is-active > *{ margin:0; }

/* ── 桶 A · 横排单元（标签 + 控件同一行，宽度随内容） ── */
.panel .card.is-active > .row,
.panel .card.is-active > .slider-row,
.panel .card.is-active > .sub-label,
.panel .card.is-active > .badge-live{
  display:flex; align-items:center; gap:8px; flex:0 1 auto; min-width:0; flex-wrap:wrap;
}
/* `.spec-info`（规格摘要条，如「成品 58mm · 出血 3mm · 含裁剪圆 685px」）文案较长：
   允许收缩以免在窄屏把卡片撑破（360px 实测溢出 13px），并在手机端独占整行以便阅读。 */
.panel .card.is-active > .spec-info{
  display:flex; align-items:center; flex:0 1 auto; min-width:0;
}
/* 手机端（≤600px）让规格摘要独占整行：与尺寸 pill 组同一行会挤成两行小字 */
@media (max-width:600px){
  .panel .card.is-active > .spec-info{ flex:1 1 100%; }
}
/* `.text-field` 属于纵向堆叠单元：只接管尺寸与间距，**刻意不设 align-items**，
   让它自身的 `flex-direction:column` + `align-items:stretch` 生效 → label 左对齐（修缺陷 ③） */
.panel .card.is-active > .text-field,
.panel .card.is-active > .text-field-inline{
  display:flex; gap:8px; flex:0 0 auto; flex-wrap:wrap;
}
/* 独立滑块（`.slider-row` 的兄弟节点，如 #zoomSlider/#briSlider）：
   display 用 block 而非 flex —— `display:flex` 落在 input[type=range] 上属非标准用法 */
.panel .card.is-active > input[type=range]{
  display:block; flex:0 1 220px; min-width:120px;
}

/* ── 桶 B · 撑满整行的结构块（表格 / 列表 / 提示 / 折叠体） ── */
.panel .card.is-active > .hint,
.panel .card.is-active > .spec-table,
.panel .card.is-active > .queue-list,
.panel .card.is-active > .collapse-body{ flex:1 1 100%; min-width:0; }
.panel .card.is-active .hint{ flex:1 1 100%; white-space:normal; }
.panel .card.is-active > .hint{ display:block; font-size:12px; color:var(--text-3); line-height:1.5; }
/* 说明：移除 `> *` 后，`.spec-table` / `.collapse-body` 自动恢复自身 block，
   `.queue-list` 恢复自身 `display:flex;flex-wrap:wrap` —— 原先的三个 display 补丁已删除。 */

/* ── 桶 C · 分组控件（等宽 pill / 工具按钮）：可折行，杜绝窄屏溢出 ──
   两个要点：
   (1) 用 wrap 型 flex 而非 grid：`.pill-grid` 的 `repeat(N,1fr)` 与 `.tool-grid` 的
       `repeat(2,1fr)` 都是给 210–260px 窄侧栏设计的 —— 放进 1358px 全宽坞会把每列拉成
       300–680px 的巨块。
   (2) 容器用 `flex:0 1 auto`（**可收缩**）而非 `0 0 auto`：这样宽屏下宽度 = 内容 max-content
       （与重构前完全一致），窄屏下自动收缩 → 靠 `flex-wrap` 折行，不再横向溢出。
   注：`min-width` 保持默认 `auto`，即「至少容得下最宽的一个单元」，避免被压扁。 */
.panel .card.is-active > .pill-grid,
.panel .card.is-active > .tool-grid{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  flex:0 1 auto;
}
/* 工具按钮宽度归零弹性伸缩：站点全局 `.btn{ flex:1 }`（css/style.css:481）会被工具按钮继承，
   在有剩余空间时把每个按钮撑满整行（实测 68px → 187px）。坞内要的是「等宽 68px + 折行」。
   注意不能笼统地给 `.badge-maker-root .btn` 归零 —— 顶栏按钮正是靠 `flex:1` 才等宽（69.5×4）。 */
.panel .card.is-active > .tool-grid > .btn{ flex:0 0 auto; min-width:68px; }

/* ── 桶 D · 结构容器（保留各自 display，只补宽度约束） ── */
.panel .card.is-active > .import-row{ display:grid; grid-template-columns:1fr auto; flex:0 1 320px; }
.panel .card.is-active > #exportPreview,
.panel .card.is-active > #exportPrint{ flex:1 1 100%; min-width:0; }
/* 隐藏的文件输入框：`display:none` 语义正确、且不参与 Tab 焦点。
   移除 `> *` 后不再需要「高特异性 display:none + 视觉隐藏」双保险 */
.panel .card.is-active > .file-input-hidden{ display:none; }

/* ── 坞内微调 ── */
.panel .card.is-active .sub-label{ white-space:nowrap; }
.panel .card.is-active .badge-live{ white-space:nowrap; }
.panel .card.is-active .text-field input,
.panel .card.is-active .color-input{ min-width:120px; }
.panel .card .card-title{ display:none; }
/* 参数坞内的 .row.check-card 去掉站点 .check-card 的卡片外观（白底 + 1px 边框 + 12px 圆角），
   与坞内其它无边框行控件保持一致；.row 自带的 padding/gap 保留。 */
.panel .card.is-active .row.check-card{ background:transparent; border:0; border-radius:0; }
/* 坞内规格表压紧一档：为画布区腾出高度（规格是坞内最高的分类） */
.panel .card.is-active .spec-table{ margin-top:6px; }
.panel .card.is-active .spec-table .spec-tr{ padding:3px 4px; }
.panel .card .collapse-head{ display:none; }
.panel .card.is-active .collapse-body{ max-height:none; overflow:visible; }
.panel .card.is-active .collapse-body-inner{ padding:0; }
.panel .card.is-active .sub-label{ font-size:11px; color:var(--text-3); }
.panel .text-field{ margin-top:0; }
.panel .text-field label{ white-space:nowrap; }
.panel .card.is-active .text-field input{ min-width:150px; }
.panel .card.is-active .row > span{ white-space:nowrap; }
.panel .card.is-active .slider-row{ gap:8px; }
.panel .card.is-active .slider-row input[type=range]{ width:130px; }
/* 注：独立滑块（.slider-row 的兄弟节点）的尺寸规则已上移至「桶 A」，此处不再重复。 */
.panel .card.is-active .text-field input{ height:34px; min-height:34px; }

/* 桌面端（≥1024px）：整页零滚动 —— 顶条 + 画布区(内部滚动) + 参数坞常驻底部。
   画布始终可见，调参不再需要滚动页面（改版前需滚 3000px+）。 */

/* --------------------------- 卡片 --------------------------- */
.card{
  background:var(--card);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:16px;
}
.card-title{
  margin:0 0 12px;
  font-size:13px; font-weight:700;
  letter-spacing:.4px; color:var(--text-2);
  text-transform:none;
}
.card-title:last-child{ margin-bottom:0; }

/* --------------------------- 按钮 --------------------------- */
.badge-maker-root .btn{
  font-family:inherit; font-size:14px; font-weight:600;
  border:0; border-radius:var(--radius-sm);
  padding:11px 16px; cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.badge-maker-root .btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; }
.badge-maker-root .btn-sm{ padding:8px 12px; font-size:13px; border-radius:var(--radius-xs); min-width:68px; }
.badge-maker-root .btn-block{ width:100%; margin-top:8px; min-width:0; }
.badge-maker-root .btn-primary{
  background:var(--blue); color:var(--bg-card);
  box-shadow:0 6px 16px rgba(var(--bm-blue-rgb), .28);
}
.badge-maker-root .btn-primary:hover:not(:disabled){ background:var(--blue-dark); transform:translateY(-1px); }
.badge-maker-root .btn-primary:active:not(:disabled){ transform:translateY(0) scale(.985); }
.badge-maker-root .btn-ghost{
  background:rgba(var(--bm-glass-rgb), .78);
  border:1px solid var(--line);
  color:var(--text);
}
.badge-maker-root .btn:focus-visible,
.badge-maker-root .pill:focus-visible{
  outline:2px solid var(--blue); outline-offset:2px;
}
.badge-maker-root .btn-ghost:hover:not(:disabled){ background:var(--bg-card); border-color:rgba(var(--bm-blue-rgb), .45); color:var(--blue); }
.badge-maker-root .btn-ghost:active:not(:disabled){ transform:scale(.985); }

/* --------------------------- 表单控件 --------------------------- */
.import-row{ display:grid; grid-template-columns:1fr auto; gap:8px; }
/* 文件输入框：直接 `display:none`。
   历史：`.file-input-hidden{display:none}` 曾被参数坞的 `.card.is-active > *{display:flex}`
   覆盖 —— 三个 file input（#fileInput/#queueInput/#projInput）都是 `.card` 的直接子元素
   → 浏览器原生「选择文件 | 未选择文件」控件露在参数坞里（实测 253px 宽）。
   当时改用「视觉隐藏 + 高特异性 display:none」双保险绕过；2026-09-14 根因重构删除了那条
   一刀切规则（改为白名单分桶）后，本处直接 `display:none` 即可生效，语义也更正确
   （不参与 Tab 焦点）。JS 仍可编程调用 `.click()` 唤起系统文件选择器。 */
.file-input-hidden{ display:none; }

.badge-maker-root .tool-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:12px; }
.badge-maker-root .tool-grid .btn{ padding:9px 8px; font-size:12.5px; }

.slider-row{
  display:flex; align-items:center; justify-content:space-between;
  margin:12px 0 2px;
}
.slider-row:first-of-type{ margin-top:0; }
.slider-row label{ font-size:13px; font-weight:600; color:var(--text-2); }
.slider-row .value{ font-size:12.5px; font-weight:600; color:var(--blue); font-variant-numeric:tabular-nums; }

.badge-maker-root input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:24px; background:transparent; cursor:pointer; margin:0;
}
.badge-maker-root input[type="range"]::-webkit-slider-runnable-track{
  height:4px; border-radius:2px;
  background:linear-gradient(90deg, var(--blue) 0 var(--p,50%), rgba(var(--bm-ink-rgb), .13) var(--p,50%) 100%);
}
.badge-maker-root input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; margin-top:-7px;
  border-radius:50%; background:var(--bg-card); border:1px solid rgba(var(--bm-ink-rgb), .08);
  box-shadow:0 1px 4px rgba(var(--bm-ink-rgb), .28);
  transition:transform .15s ease;
}
.badge-maker-root input[type="range"]:active::-webkit-slider-thumb{ transform:scale(1.15); }
.badge-maker-root input[type="range"]::-moz-range-track{
  height:4px; border-radius:2px;
  background:linear-gradient(90deg, var(--blue) 0 var(--p,50%), rgba(var(--bm-ink-rgb), .13) var(--p,50%) 100%);
}
.badge-maker-root input[type="range"]::-moz-range-thumb{
  width:16px; height:16px; border:none; border-radius:50%;
  background:var(--bg-card); box-shadow:0 1px 4px rgba(var(--bm-ink-rgb), .28);
}
.badge-maker-root input[type="range"]:focus-visible{ outline:2px solid rgba(var(--bm-blue-rgb), .5); outline-offset:2px; border-radius:8px; }

.row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:9px 0;
}
.row > span{ font-size:13.5px; color:var(--text); }
.row-field{ padding:8px 0; }

.field{
  display:flex; align-items:center; gap:6px;
  background:rgba(var(--bm-glass-rgb), .8);
  border:1px solid var(--line);
  border-radius:var(--radius-xs);
  padding:0 12px; height:40px; min-width:112px;
}
.field input{
  border:0; background:transparent; outline:none;
  width:100%; font-family:inherit; font-size:14px;
  font-weight:600; color:var(--text); text-align:right;
  font-variant-numeric:tabular-nums;
}
.field input::-webkit-outer-spin-button,
.field input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.field input[type="number"]{ -moz-appearance:textfield; appearance:textfield; }
.field .unit{ font-size:12.5px; color:var(--text-3); flex:none; }

/* iOS 风格开关 */
.switch{
  -webkit-appearance:none; appearance:none;
  width:48px; height:28px; border-radius:14px; flex:none;
  background:rgba(var(--bm-slate-rgb), .32);
  position:relative; cursor:pointer; margin:0;
  transition:background .25s ease;
}
.switch::after{
  content:""; position:absolute; top:2px; left:2px;
  width:24px; height:24px; border-radius:50%;
  background:var(--bg-card); box-shadow:0 1px 3px rgba(var(--bm-ink-rgb), .3);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.switch:checked{ background:var(--blue); }
.switch:checked::after{ transform:translateX(20px); }
.switch:focus-visible{ outline:2px solid rgba(var(--bm-blue-rgb), .5); outline-offset:2px; }

/* 药丸按钮组 */
.pill-grid{ display:grid; gap:8px; }
.pill-grid-4{ grid-template-columns:repeat(4,1fr); }
.pill-grid-5{ grid-template-columns:repeat(5,1fr); }
.pill{
  font-family:inherit; font-size:13px; font-weight:600;
  border:1px solid var(--line);
  background:rgba(var(--bm-glass-rgb), .78);
  color:var(--text-2);
  border-radius:var(--radius-xs);
  /* 统一最小宽度：坞内 pill 组（桶 C）是 wrap 型 flex 行，pill 宽度由 min-width 决定 ——
     各分组内按钮因此等宽（否则按内容宽度参差，实测「无」15px vs「纯色环」41px）。
     带图标的分组另由 `.pill:has(.bd-ico)` 提到 96px。 */
  padding:8px 0; min-height:34px; min-width:56px; cursor:pointer; text-align:center;
  transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.badge-maker-root .pill:hover:not(.active){ border-color:rgba(var(--bm-blue-rgb), .45); color:var(--blue); }
.badge-maker-root .pill:active:not(.active){ transform:scale(.97); }
.badge-maker-root .pill.active{
  background:var(--blue); border-color:var(--blue); color:var(--bg-card);
  box-shadow:0 4px 12px rgba(var(--bm-blue-rgb), .26);
}
/* 药丸内的小图标（边框样式预览用）：带图标的药丸转 inline-flex 并加宽，
   使 6 个边框选项等宽；stroke=currentColor 让图标自动跟随选中态（active 时变白）。 */
.pill:has(.bd-ico){ display:inline-flex; align-items:center; justify-content:center; gap:5px; min-width:96px; }
.pill .bd-ico{ width:16px; height:16px; flex:none; }

/* 文本 */
.hint{
  margin:10px 0 0; font-size:12px; line-height:1.6; color:var(--text-3);
}
.hint-strong{ color:var(--text-2); font-weight:600; }
.hint-warn{
  color:var(--warn); background:var(--warn-soft);
  padding:8px 10px; border-radius:var(--radius-xs); font-weight:600;
}
.hint-strong.warn{ color:var(--warn); background:var(--warn-soft); padding:8px 10px; border-radius:var(--radius-xs); }

/* 超出当前规格 A4 上限的枚数选项：降权置灰，点击会自动夹取到上限 */
.pill-over{
  background:rgba(var(--bm-glass-rgb), .42);
  border-style:dashed;
  border-color:rgba(var(--bm-ink-rgb), .14);
  color:var(--text-3);
  opacity:.62;
}
.pill-over::after{
  content:"↧";
  font-size:10px; margin-left:3px; opacity:.75;
}
.badge-maker-root .pill-over:hover:not(.active){ border-color:rgba(var(--bm-ink-rgb), .26); color:var(--text-2); }

/* 动态枚数药丸：预设集合 {1,2,4,6,8,9,12,16,20} 装不下「实际生效枚数」时出现
   （例：44mm@间距3mm → A4 容量 15，不在集合内）。点线边框表示该值由当前
   规格 × 间距推导而来，不是预设选项。 */
.pill-dyn{
  border-style:dotted;
  border-color:rgba(var(--bm-blue-rgb), .55);
}
.spec-info{
  margin:12px 0 0; font-size:12.5px; font-weight:600; color:var(--blue);
  background:var(--blue-soft); padding:8px 10px; border-radius:var(--radius-xs);
  font-variant-numeric:tabular-nums;
}
.sub-label{
  margin:14px 0 8px; font-size:12px; font-weight:700;
  color:var(--text-3); letter-spacing:.3px;
}

/* 规格速查表 */
.spec-table{ margin-top:12px; font-variant-numeric:tabular-nums; }
.spec-tr{
  display:grid; grid-template-columns:repeat(4,1fr);
  font-size:11.5px; padding:6px 4px;
  border-radius:6px; color:var(--text-2); text-align:center;
}
.spec-th{ color:var(--text-3); font-weight:700; }
.badge-maker-root .spec-tr.active{ background:var(--blue-soft); color:var(--blue); font-weight:700; }

/* 折叠卡 */
.card-collapse{ padding:0; overflow:hidden; }
.collapse-head{
  width:100%; border:0; background:transparent; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:700; color:var(--text-2);
  padding:16px; display:flex; align-items:center; justify-content:space-between;
  transition:color .18s ease;
}
.collapse-head:hover{ color:var(--blue); }
.collapse-head .caret{ transition:transform .25s ease; font-size:11px; }
.collapse-head[aria-expanded="true"] .caret{ transform:rotate(180deg); }
.collapse-body{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.badge-maker-root .collapse-body.open{ max-height:520px; }
.collapse-body-inner{ padding:0 16px 16px; }
.shortcut-list{ margin:0; font-size:12.5px; }
/* 快捷键列表：坞内是横向平铺布局 → 用 3 列网格让 7 条说明紧凑铺开
   （根因重构前 `.collapse-body` 被 `> *` 置成 flex，列表被收缩成单窄列 ~267px、右侧大片留白） */
.panel .card.is-active .shortcut-list{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 28px; }
/* 窄屏（≤720px）改为单列：3 列在 390px 下每列仅 ~110px，dt/dd 两端对齐会挤在一起 */
@media (max-width:720px){
  .panel .card.is-active .shortcut-list{ grid-template-columns:1fr; gap:0; }
}
.shortcut-item{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; padding:6px 0; border-bottom:1px dashed var(--line);
}
.shortcut-item:last-child{ border-bottom:0; }
.shortcut-item dt{ color:var(--text-2); flex:none; font-size:11.5px; font-weight:600; }
.shortcut-item dd{ margin:0; color:var(--text-2); text-align:right; }
kbd{
  font-family:var(--font); font-size:11px; font-weight:700;
  background:var(--bg-card); color:var(--text);
  border:1px solid rgba(var(--bm-ink-rgb), .16);
  border-bottom-width:2px;
  border-radius:5px; padding:2px 6px; white-space:nowrap;
  box-shadow:0 1px 1px rgba(var(--bm-ink-rgb), .06);
}

/* --------------------------- 编辑器 --------------------------- */
.editor-card{ padding:16px; }
.editor-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px; gap:12px; flex-wrap:wrap;
}
.editor-head .card-title{ margin:0; }
.badge-live{
  font-size:12px; font-weight:700; color:var(--blue);
  background:var(--blue-soft); border-radius:999px; padding:4px 12px;
  font-variant-numeric:tabular-nums;
}
.editor-stage{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius);
  overflow:hidden;
  min-height:240px;
}
.editor-canvas{
  display:block; width:100%; max-width:min(620px, 56vh);
  aspect-ratio:1 / 1; height:auto;
  border-radius:var(--radius);
  touch-action:none;
  cursor:grab;
  background-color:var(--bm-surface-deep);
  background-image:
    linear-gradient(45deg, rgba(var(--bm-glass-rgb), .045) 25%, transparent 25%, transparent 75%, rgba(var(--bm-glass-rgb), .045) 75%),
    linear-gradient(45deg, rgba(var(--bm-glass-rgb), .045) 25%, transparent 25%, transparent 75%, rgba(var(--bm-glass-rgb), .045) 75%);
  background-size:24px 24px;
  background-position:0 0, 12px 12px;
  box-shadow:inset 0 0 0 1px rgba(var(--bm-glass-rgb), .05);
}
.editor-canvas.dragging{ cursor:grabbing; }
.editor-empty{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; pointer-events:none; text-align:center; padding:24px;
  color:var(--bm-ink-4);
}
.editor-empty p{ margin:0; font-size:13px; }
.editor-empty p.dim{ font-size:11.5px; color:var(--bm-ink-5); }
.editor-empty strong{ color:var(--bm-line-strong); }

/* --------------------------- 预览区 --------------------------- */
.badge-maker-root .preview-card{ padding:16px; }
.preview-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:12px; flex-wrap:wrap;
}
.preview-head .card-title{ margin:0; }
.preview-head .hint{ margin:0; }
.preview-stage{
  display:flex; align-items:center; justify-content:center;
  padding:16px 8px;
  border-radius:var(--radius);
  background:linear-gradient(180deg, var(--bm-bg-2) 0%, var(--bm-line-soft) 100%);
  box-shadow:inset 0 0 0 1px rgba(var(--bm-ink2-rgb), .06);
}
.preview-canvas{
  display:block; width:min(100%, 320px); aspect-ratio:1 / 1; height:auto;
}
.preview-duo{
  display:flex; align-items:flex-start; justify-content:center;
  gap:24px; flex-wrap:wrap; width:100%;
}
.preview-canvas-sm{
  display:block; width:min(100%, 200px); aspect-ratio:1 / 1; height:auto;
  min-width:0; max-width:100%;
  border-radius:var(--radius-sm);
  background:rgba(var(--bm-ink2-rgb), .03);
  box-shadow:inset 0 0 0 1px rgba(var(--bm-ink2-rgb), .08);
}
.preview-canvas-a4{
  display:block; width:min(100%, 160px); aspect-ratio:210 / 297; height:auto;
  min-width:0; max-width:100%;
  border-radius:8px;
  background:var(--bg-card);
  box-shadow:0 6px 18px rgba(var(--bm-ink2-rgb), .14);
}

/* --------------------------- 拖拽覆盖层 --------------------------- */
.drop-overlay{
  position:fixed; inset:0; z-index:200;
  display:none; align-items:center; justify-content:center;
  background:rgba(var(--bm-ink-rgb), .42);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.drop-overlay.show{ display:flex; }
.drop-box{
  background:rgba(var(--bm-glass-rgb), .94);
  border:2px dashed var(--blue);
  border-radius:20px;
  padding:32px 48px;
  font-size:16px; font-weight:700; color:var(--blue);
  box-shadow:var(--shadow);
}

/* --------------------------- Toast --------------------------- */
.toast{
  position:fixed; left:50%; bottom:32px; transform:translate(-50%, 16px);
  z-index:300;
  background:rgba(var(--bm-panel-rgb), .92); color:var(--bg-card);
  font-size:13px; font-weight:600;
  padding:11px 20px; border-radius:999px;
  box-shadow:0 10px 32px rgba(var(--bm-black-rgb), .3);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  max-width:80vw; text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }

/* --------------------------- 打印区 --------------------------- */
#printArea{ display:none; }

@media print{
  @page{ size:A4 portrait; margin:0; }
  html, body{
    background:var(--bg-card) !important;
    margin:0 !important; padding:0 !important;
    width:210mm; height:297mm;
  }
  body > *:not(:has(#printArea)){ display:none !important; }
  .badge-maker-root > *:not(#printArea){ display:none !important; }
  #printArea{ display:block !important; }
  #printCanvas{
    display:block !important;
    width:210mm !important; height:297mm !important;
    margin:0 !important; padding:0 !important;
  }
}

/* --------------------------- 响应式 --------------------------- */
@media (max-width:1023px){
  .layout{ grid-template-columns:1fr; gap:16px; padding:16px; }
  .panel{
    position:static; max-height:none; overflow:visible;
    padding-right:0;
    order:2;
  }
  .workspace{ order:1; }
  .topbar-inner{ padding:12px 16px; gap:12px; flex-wrap:wrap; }
  .topbar-actions{ width:100%; margin-left:0; }
  .segmented{ margin-left:auto; }
  .editor-canvas{ max-width:100%; }
}
@media (max-width:520px){
  .brand-text small{ display:none; }
  .segmented button{ padding:7px 14px; font-size:13px; }
  .badge-maker-root .topbar-actions .btn{ flex:1; }
  .preview-duo{ gap:16px; }
  .preview-canvas-sm{ width:min(100%, 160px); }
  .preview-canvas-a4{ width:min(100%, 130px); }
}
/* ≤420px：顶栏第一行「品牌名 + 预览/打印分段」放不下 ——
   英文标签比中文长（"Full screen"/"Shortcuts" vs「全屏」「快捷键」），
   实测英文页在 390px 溢出 10px、360px 溢出 40px（中文页因标签短未触发）。
   隐去品牌文字只留标记（产品名在站点 header 与 bm-hero-bar 均已出现），并收紧分段按钮内边距。 */
@media (max-width:420px){
  .brand-text{ display:none; }
  .segmented button{ padding:7px 11px; }
  /* 分段控件允许折行并限制在父容器宽度内：
     英文标签更长（如「None / Star sparkle / …」实测 322px > 容器 294px）会撑破行 */
  .segmented{ flex-wrap:wrap; max-width:100%; }
  /* 小标题 / 行标签允许换行：坞内二者默认 nowrap（避免轴标签中途折行），
     但英文文案更长（"Texture finish (realistic preview only)"、
     "Add a "made with calc-tools" badge"）在 ≤320px 会撑破容器 */
  .panel .card.is-active .sub-label{ white-space:normal; }
  .panel .card.is-active .row > span{ white-space:normal; }
  .badge-maker-root .topbar-actions{ width:auto; flex:1 1 100%; flex-wrap:wrap; justify-content:flex-start; }
  .badge-maker-root .topbar-actions .btn{ padding:8px 10px; }
}
/* --------------------------- 全屏模式 --------------------------- */
#btnFullscreen .fs-ico{ flex:none; }
.fs-exit{
  position:fixed; top:16px; right:16px; z-index:200;
  display:none; align-items:center; gap:6px;
  font-family:inherit; font-size:13px; font-weight:600;
  color:var(--bg-card); background:rgba(var(--bm-ink-rgb), .62);
  border:1px solid rgba(var(--bm-glass-rgb), .18);
  border-radius:999px; padding:9px 14px; cursor:pointer;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 20px rgba(var(--bm-black-rgb), .28);
}
.fs-exit:hover{ background:rgba(var(--bm-ink-rgb), .78); }
.fs-exit svg{ flex:none; }

/* 全屏开启：三段式工作台全部保留（顶条 / 画布区 / 底部参数坞）
   不再隐藏顶栏与参数面板 —— 旧版会把 92 个控件全部藏掉，全屏反而比普通模式更弱。 */
body.is-fullscreen:has(.badge-maker-root){ display:flex; flex-direction:column; height:100vh; overflow:hidden; }
body.is-fullscreen .fs-exit{ display:inline-flex; }
body.is-fullscreen .topbar{ flex:0 0 auto; }
body.is-fullscreen .topbar .brand-text{ display:none; }
body.is-fullscreen .topbar-inner{ padding:8px 128px 8px 16px; gap:12px; }
body.is-fullscreen .layout{
  flex:1 1 auto; height:0; min-height:0;
  max-width:none; margin:0; padding:0 16px; gap:0;
}
body.is-fullscreen .workspace{
  flex:1 1 auto; min-height:0; overflow:auto;
  justify-content:center; align-items:flex-start; padding:14px 0; gap:16px;
}
body.is-fullscreen .workspace > *{ flex:1 1 420px; }
body.is-fullscreen .panel{ flex:0 0 auto; padding:10px 0 12px; }
body.is-fullscreen .panel .card.is-active{ padding:12px 14px; }
body.is-fullscreen .editor-card{ display:flex; flex-direction:column; min-height:0; }
body.is-fullscreen .editor-stage{ flex:1; min-height:0; }
body.is-fullscreen .editor-stage{ flex:1 1 0; min-height:220px; }
body.is-fullscreen .editor-canvas{ height:100%; width:auto; max-width:100%; max-height:none; }
body.is-fullscreen .preview-card > .preview-stage{ flex:1 1 0; min-height:0; }
body.is-fullscreen .preview-card .preview-canvas{ height:100%; width:auto; max-width:100%; max-height:none; }
body.is-fullscreen .preview-card{ display:flex; flex-direction:column; min-height:0; }

@media (max-width:720px){
  .fs-exit span{ display:none; }
  .fs-exit{ padding:9px; }
}

/* --------------------------- 文字 / 工程 控件 --------------------------- */
.text-field{ display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.text-field label{ font-size:12px; color:var(--text-2); font-weight:600; }
.text-input{
  font-family:inherit; font-size:14px; color:var(--text);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:9px 11px; background:rgba(var(--bm-glass-rgb), .72); width:100%;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.text-input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(var(--bm-blue-rgb), .16); }
.text-field-inline{ flex-direction:row; align-items:center; justify-content:space-between; margin-top:10px; }
.text-field-inline label{ margin:0; }
.color-input{
  width:34px; height:28px; padding:0; border:1px solid var(--line);
  border-radius:8px; background:none; cursor:pointer;
}
.color-input::-webkit-color-swatch-wrapper{ padding:2px; }
.color-input::-webkit-color-swatch{ border:none; border-radius:6px; }
.muted{ color:var(--text-3); font-size:12px; font-weight:600; }

/* --------------------------- 换图队列（BM-2 #5） --------------------------- */
.queue-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.queue-item{
  position:relative; width:48px; height:48px; border-radius:10px; overflow:hidden;
  border:1px solid var(--line); background:rgba(var(--bm-black-rgb), .04);
}
.queue-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.queue-item .q-remove{
  position:absolute; top:1px; right:1px; width:18px; height:18px; line-height:16px; text-align:center;
  border:none; border-radius:50%; background:rgba(var(--bm-panel2-rgb), .72); color:var(--bg-card); font-size:12px; cursor:pointer; padding:0;
}
.queue-empty{ font-size:12px; color:var(--text-3); margin-top:10px; }

/* --------------------------- 工厂规范 / 下单指引（BM-2 #6） --------------------------- */
.guide-box{ margin-top:14px; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.guide-spec{ font-size:12.5px; color:var(--text-2); line-height:1.6; margin:0; padding:0; }
.guide-steps{ margin:10px 0 12px; padding-left:18px; color:var(--text-2); font-size:12.5px; line-height:1.75; }
.guide-steps b{ color:var(--text); }

/* 桌面端应用式布局（置于样式表末尾：需覆盖上方基础画布/舞台规则，同优先级靠顺序取胜） */
@media (min-width:1024px){
/* [site-integration] 已移除桌面端 body app-shell：站点 body 含整站 header/footer，强制 100vh+overflow:hidden 会把画布区压到 ~165px（实测），故站点保留流式布局 */
  .topbar{ flex:0 0 auto; position:static; }
  .layout{
    flex:1 1 auto; min-height:0; height:auto;
    padding:16px 24px; gap:12px;
  }
  /* 工作区用 grid 让「行高 = 容器高」确定化，画布才能按可用高度自适应收缩
     （flex + max-height 无法给子元素确定高度，height:100% 会失效 → 画布被裁切） */
  .workspace{
    display:grid; grid-template-columns:1fr 1fr;   /* 固定 2 列：避免 auto-fit 列数漂移导致行数变化 */
    grid-auto-rows:minmax(0, 1fr); align-content:stretch; align-items:stretch;
    flex:1 1 auto; min-height:0; overflow:auto; padding:16px 24px; gap:12px;
  }
  .workspace > *{ min-height:0; height:100%; }   /* 强制卡片 = 网格行高，内部舞台才能真正收缩 */
  .badge-maker-root .editor-card, .preview-card{ display:flex; flex-direction:column; min-height:0; }
  body:has(> .topbar) .editor-stage{ flex:1 1 0; min-height:220px; }
  body:has(> .topbar) .editor-canvas{ height:100%; width:auto; max-width:100%; max-height:none; }
  body:has(> .topbar) .preview-card > .preview-stage{ flex:1 1 0; min-height:0; }
  body:has(> .topbar) .preview-card .preview-canvas{ height:100%; width:auto; max-width:100%; max-height:none; }
  .badge-maker-root .preview-card .preview-duo{ height:100%; align-items:center; }
}

/* 站点 <main> 默认 1280px + 48px 内边距会挤压沉浸式工具，在此放开 */
body:has(.badge-maker-root) > main{ max-width:none; padding:0; width:100%; }

/* 站点集成：工具顶栏（.topbar）一律不做 sticky。
   站点环境已有两层 sticky 条 —— site header(top:0,z70) 与 bm-hero-bar(top:64,z60)；
   而 .topbar 基础规则是 `position:sticky; top:0; z-index:60`（单文件版设计），
   在 `@media (min-width:1024px)` 里才被改成 static。于是**窄屏(<1024px)** 下
   .topbar 与 bm-hero-bar **同 z-index 60**、且 .topbar 在 DOM 中更靠后 → 层叠在上，
   向上滚动时 "撤销/重做/快捷键/全屏" 按钮组会盖住上方的工具页标题条
   （Playwright 命中测试：重叠点 elementFromPoint 返回 topbar 的 button.btn）。
   此处全局置 static（含窄屏），与桌面端行为一致，随文档流滚动、不再与标题条争层。 */
body:has(.badge-maker-root) .badge-maker-root .topbar{ position:static; }

/* 颜色选择器在坞内被 .panel .card.is-active .color-input 的 min-width:120px 撑大，恢复小色块 */
.panel .card.is-active .color-input{ min-width:0; width:34px; }

/* P2-2 Cookie 横幅遮挡：CMP 显示时(body.cmp-open，由 js/cmp.js 注入) 给工具上下滚动区预留底部空间，
   避免 fixed 横幅(bottom:16px, z-index:9999) 遮住参数坞 / 导出按钮。横幅关闭即移除该类，空间自动收回。 */
body.cmp-open:has(.badge-maker-root) .layout{ padding-bottom:104px; }
body.cmp-open:has(.badge-maker-root) .panel{ padding-bottom:104px; }
body.cmp-open:has(.badge-maker-root) .workspace{ padding-bottom:104px; }

/* =========================================================================
   沉浸式工作台布局（页面级，bm-* 前缀全站唯一）
   站点 header 通过 body:has(.badge-maker-root) 压扁为细条（DOM 保留，保住
   header 字节一致门禁与语言/主题切换功能）；旧浏览器不识别 :has 时仅不压扁。
   ========================================================================= */
body:has(.badge-maker-root) > header{ position:sticky; top:0; z-index:70; padding:4px 16px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--bg-card,#fff) 82%, transparent); border-bottom:1px solid var(--border,#e5e7eb); }
body:has(.badge-maker-root) .site-logo{ height:26px; width:auto; vertical-align:middle; }
body:has(.badge-maker-root) > header.bm-hero-bar{ position:sticky; top:64px; z-index:60; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--bg-card,#fff) 82%, transparent); border-bottom:1px solid var(--border,#e5e7eb); }
.bm-hero-inner{ max-width:1280px; margin:0 auto; display:flex; align-items:center; gap:12px; padding:10px 20px; }
.bm-back{ display:inline-flex; align-items:center; gap:6px; color:var(--text-secondary,#6b7280); text-decoration:none;
  font-size:14px; font-weight:500; padding:6px 10px; border-radius:8px; transition:background .15s,color .15s; white-space:nowrap; }
.bm-back:hover{ background:var(--bg-hover,rgba(0,122,255,.08)); color:var(--primary,#007AFF); }
.bm-back-ic{ transform:rotate(180deg); width:15px; height:15px; }
.bm-title{ margin:0; font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--text,#111827); white-space:nowrap; }
.bm-privacy{ font-size:12px; color:var(--text-secondary,#6b7280); padding:4px 10px; border:1px solid var(--border,#e5e7eb);
  border-radius:999px; white-space:nowrap; }
@media (max-width:720px){ .bm-privacy{ display:none; } .bm-hero-inner{ padding:8px 12px; gap:8px; } }
.bm-seo{ max-width:1080px; margin:28px auto 48px; padding:0 16px; }
.bm-seo > summary{ list-style:none; cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 18px; border:1px solid var(--border,#e5e7eb); border-radius:12px; background:var(--bg-card,#fff);
  font-weight:600; font-size:15px; color:var(--text,#111827); transition:border-color .15s; }
.bm-seo > summary:hover{ border-color:color-mix(in srgb, var(--primary,#007AFF) 40%, var(--border,#e5e7eb)); }
.bm-seo > summary::-webkit-details-marker{ display:none; }
.bm-seo > summary::after{ content:'+'; font-size:20px; font-weight:500; color:var(--text-secondary,#6b7280);
  transition:transform .18s; line-height:1; }
.bm-seo[open] > summary::after{ transform:rotate(45deg); }
.bm-seo-body{ padding-top:20px; }
.bm-lead{ color:var(--text-secondary,#6b7280); font-size:15px; line-height:1.7; margin:0 0 18px; }
.bm-faq-title{ font-size:20px; margin:26px 0 14px; }
.bm-faq-item{ border:1px solid var(--border,#e5e7eb); border-radius:10px; margin-bottom:10px; padding:12px 16px;
  background:var(--bg-card,#fff); }
.bm-faq-item summary{ cursor:pointer; font-weight:600; font-size:14px; color:var(--text,#111827); }
.bm-faq-item p{ margin:10px 0 2px; font-size:14px; line-height:1.75; color:var(--text-secondary,#4b5563); }

/* -------------------------------------------------------------------------
   2026-09-12 工作台改版：flex 链桥接（站点专属）
   工具根 .badge-maker-root 嵌在站点 <main> 内，全屏三段式需要由
   body → main → 工具根 逐层传递可伸缩高度，否则 .layout 的 flex:1 无效。
   普通模式不桥接（实测强制 100vh 会把画布区压到 165px），仅全屏生效。
   单文件版没有 .badge-maker-root，以下规则仅在站点页生效。
   ------------------------------------------------------------------------- */
body.is-fullscreen:has(.badge-maker-root) > header,
body.is-fullscreen:has(.badge-maker-root) > footer{ display:none; }
/* 全屏时工具页标题条与整站 header 重复，隐藏以给画布腾高度 */
body.is-fullscreen:has(.badge-maker-root) .bm-hero-bar{ display:none; }
/* 站点 <main> 的最大宽度会把参数坞压窄（实测 1192px vs 单文件 1408px）→ 换行翻倍、
   坞高 404 vs 243、画布被挤到 144px。全屏放开宽度约束，坞变宽后高度回落。 */
body.is-fullscreen:has(.badge-maker-root) > main{ max-width:none; width:100%; }
body.is-fullscreen:has(.badge-maker-root) > main > .badge-maker-root{ max-width:none; width:100%; }
body.is-fullscreen:has(.badge-maker-root) > main{ flex:1 1 0; min-height:0; display:flex; flex-direction:column; }
body.is-fullscreen:has(.badge-maker-root) > main > .badge-maker-root{ flex:1 1 0; min-height:0; display:flex; flex-direction:column; }

/* =========================================================================
   暗色主题适配（2026-09-14）
   背景：.badge-maker-root 原为**固定浅色作用域**（自带 --text/--card/--bg-1 等硬编码
   变量，不随站点主题切换），暗色模式下工具区仍是亮白，与站点深色 header/footer
   形成「白纸夹心」。此处用 [data-theme="dark"] 前缀集中覆盖（特异性高于原规则）：
   ① 变量层重定 → 所有 var() 消费点自动适配；② 无法变量化的硬编码浅色逐条覆盖。
   保持原样、不随主题变化的：.editor-canvas（深色工作台本身）、.preview-canvas-a4
   （A4 纸模拟）、#printArea 与 @media print（打印必须是白纸）、.toast/.fs-exit
   （本就是深色浮层）、.bm-* 站点集成段（已用站点变量）。
   ========================================================================= */
[data-theme="dark"] .badge-maker-root{
  --blue:var(--accent-blue);                          /* 站点 accent 蓝（暗底更亮） */
  --blue-dark:var(--bm-accent-dark);                     /* 暗色下 hover 提亮而非压暗 */
  --blue-soft:rgba(var(--bm-accent-rgb), .16);
  --bg-1:var(--surface-darker);                          /* surface-darker */
  --bg-2:var(--black);                             /* black */
  --card:rgba(var(--bm-surface-rgb), .62);
  --card-border:rgba(var(--bm-glass-rgb), .08);
  --line:rgba(var(--bm-glass-rgb), .12);
  --text:var(--bg);                          /* text-on-dark */
  --text-2:var(--bm-ink-2-dark);
  --text-3:var(--bm-ink-3-dark);
  --warn:var(--amber-400);
  --warn-soft:rgba(var(--bm-amber-rgb), .14);
  --shadow:0 12px 32px rgba(var(--bm-black-rgb), .5), 0 2px 8px rgba(var(--bm-black-rgb), .35);
  --shadow-sm:0 4px 16px rgba(var(--bm-black-rgb), .4);
}
/* 顶栏玻璃 */
[data-theme="dark"] .badge-maker-root .topbar{ background:var(--surface-alpha-72); }
/* 分段控件：容器压深、选中块由「白块」改浅灰卡（白块在暗底会过曝） */
[data-theme="dark"] .badge-maker-root .segmented{ background:rgba(var(--bm-slate-rgb), .22); }
[data-theme="dark"] .badge-maker-root .segmented button:hover:not(.active){ background:rgba(var(--bm-glass-rgb), .08); }
[data-theme="dark"] .badge-maker-root .segmented button.active{
  background:var(--surface-dark-2); color:var(--text);
  box-shadow:0 1px 4px rgba(var(--bm-black-rgb), .45);
}
/* 次级按钮 / 分类标签 / 药丸：白底 → 白 7% 玻璃；hover 提到 13% */
[data-theme="dark"] .badge-maker-root .dock-tabs button,
[data-theme="dark"] .badge-maker-root .btn-ghost,
[data-theme="dark"] .badge-maker-root .pill{ background:rgba(var(--bm-glass-rgb), .07); }
[data-theme="dark"] .badge-maker-root .dock-tabs button:hover:not(.active),
[data-theme="dark"] .badge-maker-root .btn-ghost:hover:not(:disabled),
[data-theme="dark"] .badge-maker-root .pill:hover:not(.active){ background:rgba(var(--bm-glass-rgb), .13); }
[data-theme="dark"] .badge-maker-root .pill-over{ background:rgba(var(--bm-glass-rgb), .04); border-color:rgba(var(--bm-glass-rgb), .16); }
[data-theme="dark"] .badge-maker-root .pill-over:hover:not(.active){ border-color:rgba(var(--bm-glass-rgb), .32); }
/* 输入容器 / 文本框 / kbd */
[data-theme="dark"] .badge-maker-root .field{ background:rgba(var(--bm-glass-rgb), .07); }
[data-theme="dark"] .badge-maker-root .text-input{ background:rgba(var(--bm-glass-rgb), .07); }
[data-theme="dark"] .badge-maker-root kbd{
  background:rgba(var(--bm-glass-rgb), .09); color:var(--text);
  border-color:rgba(var(--bm-glass-rgb), .16); border-bottom-color:rgba(var(--bm-glass-rgb), .28);
  box-shadow:0 1px 1px rgba(var(--bm-black-rgb), .25);
}
/* 滑杆未填充段（原 rgba(15,23,42,.13) 在暗底不可见） */
[data-theme="dark"] .badge-maker-root input[type="range"]::-webkit-slider-runnable-track{
  background:linear-gradient(90deg, var(--blue) 0 var(--p,50%), rgba(var(--bm-glass-rgb), .18) var(--p,50%) 100%);
}
[data-theme="dark"] .badge-maker-root input[type="range"]::-moz-range-track{
  background:linear-gradient(90deg, var(--blue) 0 var(--p,50%), rgba(var(--bm-glass-rgb), .18) var(--p,50%) 100%);
}
/* 预览台 / 小预览底（.preview-canvas-a4 是 A4 纸模拟，保持白） */
[data-theme="dark"] .badge-maker-root .preview-stage{
  background:linear-gradient(180deg,var(--bm-elevated) 0%, var(--surface-darker) 100%);
  box-shadow:inset 0 0 0 1px rgba(var(--bm-glass-rgb), .06);
}
[data-theme="dark"] .badge-maker-root .preview-canvas-sm{
  background:rgba(var(--bm-glass-rgb), .04);
  box-shadow:inset 0 0 0 1px rgba(var(--bm-glass-rgb), .08);
}
/* 拖拽覆盖层 */
[data-theme="dark"] .badge-maker-root .drop-overlay{ background:rgba(var(--bm-black-rgb), .62); }
[data-theme="dark"] .badge-maker-root .drop-box{ background:rgba(var(--bm-surface-rgb), .96); }
/* 打印保护：暗色主题下打印时强制回到浅色变量（否则 #printArea 内若含文字，
   会是浅字印在白纸上而不可见）。与上面的暗色块同特异性，靠后出现取胜。 */
@media print{
  [data-theme="dark"] .badge-maker-root{
    --text:var(--bm-ink); --text-2:var(--bm-ink-2); --text-3:var(--bm-ink-3);
    --card:var(--bg-card); --card-border:rgba(var(--bm-glass-rgb), .9);
    --line:rgba(var(--bm-ink-rgb), .09);
    --bg-1:var(--bg-card); --bg-2:var(--bg-card);
    --shadow:none; --shadow-sm:none;
  }
}