/* ============================================================
   图片转拼豆 · 在线工具（独立页面 · 网页版）
   纯工具界面：独立顶栏 + 左参数 / 中大画布 / 右信息，三栏内部各自滚动。
   工具区高度锁定为 100dvh，窄屏改为单列自然高度。
   全部走 main.css 设计令牌，深浅主题自适应。
   功能介绍与常见问题统一放在 features/image-to-bead-web.html。
   ============================================================ */

/* 应用本体占满视口：独立工具界面，不与正文拼接 */
html { height: 100%; overflow: hidden; }
body { height: 100%; overflow: hidden; }
.app-shell {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 64px minmax(0, 1fr);
  overflow: hidden;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.noscript-tip {
  max-width: 640px; margin: 24px auto; padding: 16px 20px;
  background: var(--c-card); color: var(--c-text);
  border-radius: var(--r-card); font-size: 14px; line-height: 1.7;
  box-shadow: var(--shadow-card), var(--shadow-card-halo);
}

/* ---------- 独立顶栏（高度与全站 .header-inner 一致 = 64px） ---------- */
.app-topbar {
  display: flex; align-items: center; gap: 10px;
  height: 64px; padding: 0 16px;
  background: var(--c-card);
  border-bottom: 1px solid var(--c-card-edge);
  position: relative; z-index: 10;
}
.tb-back {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-text-sub);
  font-size: 13px; text-decoration: none; flex: none;
  transition: background .15s ease, color .15s ease;
}
.tb-back:hover { background: var(--c-surface-high); color: var(--c-text); }
.tb-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--c-text);
  min-width: 0;
}
.tb-brand img { width: 30px; height: 30px; border-radius: 7px; flex: none; }
.tb-brand .pn { font-weight: 700; font-size: 16px; white-space: nowrap; }
.tb-brand .sep { width: 1px; height: 20px; background: var(--c-divider); flex: none; }
.tb-brand .tn { font-size: 13.5px; color: var(--c-text-sub); white-space: nowrap; }
.tb-brand .tag {
  padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--c-primary-soft); color: var(--c-primary);
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.app-topbar .spacer { flex: 1 1 auto; }
.tb-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.tb-navlink { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; line-height: 1; color: var(--c-text-sub); text-decoration: none; padding: 6px 10px; border-radius: 8px; white-space: nowrap; transition: background .15s, color .15s; }
.tb-navlink:hover { background: var(--c-surface-high); color: var(--c-text); }
@media (max-width: 720px) { .tb-navlink { display: none; } }

/* ---------- 顶栏正中间的创作方式切换 ---------- */
.tb-switch {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  border: 1px solid var(--c-outline-variant);
  z-index: 2;
}
.tb-switch-item {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 16px; border-radius: var(--r-pill);
  font-size: 13px; line-height: 1; white-space: nowrap;
  color: var(--c-text-sub); text-decoration: none;
  transition: background .15s, color .15s;
}
.tb-switch-item:hover { color: var(--c-text); }
.tb-switch-item.is-active { background: var(--c-surface-highest); color: var(--c-primary); font-weight: 600; box-shadow: var(--shadow-card); }
.sw-short { display: none; }
@media (max-width: 1120px) {
  .tb-brand .sep, .tb-brand .tn, .tb-brand .tag { display: none; }
}
.icon-sq {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 0; border-radius: var(--r-sm);
  background: var(--c-surface); color: var(--c-text-sub);
  cursor: pointer; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.icon-sq:hover { background: var(--c-surface-high); color: var(--c-text); }

/* ---------- 三栏主体 ---------- */
.app-main {
  display: grid;
  grid-template-columns: 336px minmax(0, 1fr) 300px;
  gap: 10px;
  padding: 10px;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
@media (max-width: 1280px) {
  .app-main { grid-template-columns: 296px minmax(0, 1fr) 268px; }
}
@media (max-width: 1080px) {
  .app-shell { height: auto; overflow: visible; }
  .app-main { grid-template-columns: minmax(0, 1fr); height: auto; overflow: visible; }
  .board-wrap { order: -1; }
  .side-body, .info-body { overflow: visible; }
}

/* 通用栏卡片：与全站卡片同一套表面语言（白底 + 1px 外框 + 纸厚暖晕），
   不再用 --c-surface —— 那是输入区/未选 chip 的凹槽语义，撑大面板会让整页泛橙 */
.side, .info, .board-wrap {
  background: var(--c-card);
  border: var(--bw-hairline) solid var(--c-card-edge);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card), var(--shadow-card-halo);
  display: flex; flex-direction: column;
  overflow: hidden;
  min-height: 0; min-width: 0;
}
.side-head, .info-head {
  flex: none;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-divider);
  font-size: 13px; font-weight: 600; color: var(--c-text-sub);
}
.side-body, .info-body {
  flex: 1 1 auto; overflow-y: auto;
  padding: 0 var(--sp-4) var(--sp-4);
  min-height: 0;
}

/* ---------- 参数分组 ---------- */
.pg { padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-divider); }
.pg:first-child { padding-top: var(--sp-3); }
.pg:last-child { border-bottom: 0; }
.pg-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600;
  color: var(--c-text-sub);
  margin-bottom: var(--sp-3);
  letter-spacing: .02em;
}
.pg-title .hint { font-size: 12px; font-weight: 400; color: var(--c-outline); }

/* 图片导入 */
.drop {
  position: relative;
  display: grid; place-items: center; gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  width: min(100%, 320px); margin-inline: auto;
  aspect-ratio: 1 / 1;
  border: 1.5px dashed var(--c-outline);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text-sub);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.drop:hover, .drop.is-drag { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary); }
.drop b { font-size: 14px; }
.drop small { font-size: 12px; color: var(--c-outline); }
.drop:hover b, .drop.is-drag b, .drop:hover small, .drop.is-drag small { color: var(--c-primary); }
.drop-ico { display: grid; place-items: center; }
.drop-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 6px;
  background: var(--c-surface);
  display: none;
}
.drop.has-image { padding: 0; border-style: solid; border-color: var(--c-divider); background: var(--c-surface); }
.drop.has-image .drop-img { display: block; }
.drop.has-image .drop-ico,
.drop.has-image .drop-title,
.drop.has-image .drop-hint { display: none; }
.drop-change {
  display: none;
  position: absolute; left: 50%; bottom: 8px;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-surface) 86%, transparent);
  color: var(--c-text-sub);
  font-size: 11.5px; line-height: 1.4;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(4px);
  pointer-events: none;
  white-space: nowrap;
}
.drop.has-image .drop-change { display: block; }
.drop.has-image:hover .drop-change,
.drop.has-image.is-drag .drop-change { color: var(--c-primary); }
.frame-row { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.icon-btn {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 36px; padding: 0 6px;
  border: 0; border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text-sub);
  font-size: 12.5px; font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.icon-btn:hover { background: var(--c-surface-high); color: var(--c-text); }
.icon-btn svg { flex: none; }
.icon-btn[disabled] { opacity: .45; pointer-events: none; }
.icon-btn.on { background: var(--c-primary-soft); color: var(--c-primary); }

/* 风格预设 */
.presets { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.presets input { position: absolute; opacity: 0; pointer-events: none; }
.preset {
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.preset .pt-head { display: flex; align-items: center; gap: 7px; }
.preset b { font-size: 14px; color: var(--c-text); }
.preset span { font-size: 12px; color: var(--c-outline); }
.preset:hover { background: var(--c-surface-high); }
.presets input:checked + .preset { background: var(--c-primary-soft); border-color: var(--c-primary); }
.presets input:checked + .preset b,
.presets input:checked + .preset .pt-head svg { color: var(--c-primary); }

/* chips */
.chips { position: relative; display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label {
  min-width: 44px; text-align: center;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font-size: 13px; color: var(--c-text-sub);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.chips label:hover { background: var(--c-surface-high); color: var(--c-text); }
.chips input:checked + label { background: var(--c-primary-soft); color: var(--c-primary); font-weight: 600; }
.chip-btn {
  height: 27px; padding: 0 10px;
  border: 0; border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-text-sub);
  font-family: inherit; font-size: 12px;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.chip-btn:hover { background: var(--c-surface-high); color: var(--c-text); }
.chip-btn.is-on { background: var(--c-primary-soft); color: var(--c-primary); font-weight: 600; }

/* 分段控件（连体二选一） */
.segment {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 3px;
  background: var(--c-surface);
  border-radius: var(--r-sm);
}
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment label {
  display: grid; place-items: center;
  height: 30px;
  border-radius: calc(var(--r-sm) - 2px);
  background: transparent;
  font-size: 13px; color: var(--c-text-sub);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.segment label:hover { color: var(--c-text); }
.segment input:checked + label {
  background: var(--c-surface-highest);
  color: var(--c-primary); font-weight: 600;
  box-shadow: var(--shadow-card);
}

/* 开关 */
.switch-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: 7px 0;
  font-size: 14px; color: var(--c-text);
}
.switch-row small { display: block; font-size: 12px; color: var(--c-outline); font-weight: 400; margin-top: 1px; }
.switch { position: relative; flex: none; width: 42px; height: 25px; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch .track {
  position: absolute; inset: 0;
  background: var(--c-surface-high);
  border-radius: var(--r-pill);
  transition: background .15s ease;
  pointer-events: none;
}
.switch .track::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 19px; height: 19px;
  background: var(--c-outline);
  border-radius: 50%;
  transition: transform .15s ease, background .15s ease;
}
.switch input:checked + .track { background: var(--c-primary-soft); }
.switch input:checked + .track::after { transform: translateX(17px); background: var(--c-primary); }

/* 画质滑块 */
.slider { padding: 5px 0; }
.slider.is-off { opacity: .45; pointer-events: none; }
.slider .lab {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--c-text-sub);
  margin-bottom: 2px;
}
.slider .lab b { color: var(--c-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.slider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; background: transparent; cursor: pointer;
}
.slider input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--r-pill);
  background: var(--c-surface-high);
}
.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 17px; height: 17px; margin-top: -6px;
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}
.slider input[type="range"]::-moz-range-track {
  height: 6px; border-radius: var(--r-pill); background: var(--c-surface-high);
}
.slider input[type="range"]::-moz-range-thumb {
  width: 17px; height: 17px; border: 0;
  border-radius: 50%; background: var(--c-primary);
}
.btn-block { width: 100%; margin-top: var(--sp-2); }
.duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }

/* ---------- 中栏：图纸预览 ---------- */
.board-bar {
  flex: none;
  display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: wrap;
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-divider);
  position: relative;
}
.tb-group { display: flex; align-items: center; gap: 2px; }
.tb-sep { width: 1px; height: 20px; background: var(--c-divider); margin: 0 3px; }
.tb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 30px; height: 30px; padding: 0 8px;
  border: 0; border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-text-sub);
  font-size: 12.5px; font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.tb-btn:hover { background: var(--c-surface-high); color: var(--c-text); }
.tb-btn.on { background: var(--c-primary-soft); color: var(--c-primary); font-weight: 600; }
.tb-btn:disabled { opacity: .35; cursor: default; }
.tb-btn:disabled:hover { background: transparent; color: var(--c-text-sub); }
.tb-btn--ico { width: 30px; padding: 0; }
.tb-zoom { min-width: 46px; font-variant-numeric: tabular-nums; pointer-events: none; }
.board-bar .tb-tools { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.board-bar .tb-right { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
/* 未生成图纸时锁定画布工具与缩放 */
.board-bar.is-locked .tb-tools .tool-pill,
.board-bar.is-locked .tb-right { opacity: .8; pointer-events: none; }

/* 工具胶囊：左图标 + 当前选项 + 下拉箭头 */
.tb-tool { position: relative; display: inline-flex; align-items: center; }
.tool-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 10px;
  border: 0; border-radius: 999px;
  background: transparent;
  color: var(--c-text-sub);
  font-size: 12.5px; font-family: inherit;
  white-space: nowrap; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.tool-pill:hover { background: var(--c-surface-high); color: var(--c-text); }
.tool-pill.on { background: var(--c-primary-soft); color: var(--c-primary); font-weight: 600; }
.tool-pill svg { flex: none; }
.tool-pill .pill-label { line-height: 1; }
.tool-pill .pill-caret { opacity: .55; }
.tool-pill.on .pill-caret { opacity: .8; }
.tool-pill.is-color .pill-swatch {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  background: var(--cur-color, #D64541);
  box-shadow: inset 0 0 0 1px var(--c-hairline), 0 0 0 2px color-mix(in srgb, var(--c-surface) 70%, transparent);
}
.tool-pill--plain { padding-right: 12px; }
.tool-pill--plain:hover { background: var(--c-surface-high); }
.tool-pill--plain.on { background: var(--c-primary-soft); color: var(--c-primary); }

/* 带选项的胶囊：图标区 / 分隔线 / 选项区，同一胶囊内分别点击 */
.tool-pill--split { gap: 0; padding: 0; cursor: default; }
.tool-pill--split:hover { background: transparent; color: var(--c-text-sub); }
.tool-pill--split.on:hover { background: var(--c-primary-soft); color: var(--c-primary); }
.pill-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 100%; padding: 0 9px;
  border: 0; background: transparent; color: inherit;
  font-size: 12.5px; font-family: inherit; font-weight: inherit;
  white-space: nowrap; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.pill-btn--icon { padding-left: 10px; padding-right: 8px; border-radius: 999px 0 0 999px; }
.pill-btn--opts { padding-left: 7px; padding-right: 10px; border-radius: 0 999px 999px 0; }
.pill-btn:hover { background: var(--c-surface-high); color: var(--c-text); }
.tool-pill.on .pill-btn:hover { background: color-mix(in srgb, var(--c-primary) 14%, transparent); color: var(--c-primary); }
.pill-div { width: 1px; height: 16px; flex: none; background: var(--c-divider); pointer-events: none; }
.tool-pill.on .pill-div { background: color-mix(in srgb, var(--c-primary) 38%, transparent); }

/* 工具选项浮层 */
.tool-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 196px;
  padding: 10px;
  background: var(--c-card);
  border: 1px solid var(--c-outline-variant);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  display: grid; gap: 6px;
}
.tool-pop[hidden] { display: none; }
.tool-pop-title {
  font-size: 11.5px; font-weight: 600; color: var(--c-outline);
  letter-spacing: .02em;
}
.tool-pop-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.tool-opt {
  height: 28px; padding: 0 10px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-text-sub);
  font-size: 12px; font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tool-opt:hover { background: var(--c-surface-high); color: var(--c-text); }
.tool-opt.on {
  background: var(--c-primary-soft); color: var(--c-primary);
  border-color: color-mix(in srgb, var(--c-primary) 34%, transparent);
  font-weight: 600;
}
.tool-pop-note { margin: 2px 0 0; font-size: 11px; line-height: 1.5; color: var(--c-outline); }

/* 当前颜色浮层 */
.color-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  width: 292px;
  background: var(--c-card);
  border: 1px solid var(--c-outline-variant);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.color-pop[hidden] { display: none; }
.color-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  font-size: 12.5px; font-weight: 600; color: var(--c-text-sub);
  border-bottom: 1px solid var(--c-divider);
}
.color-pop-close {
  width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: var(--r-sm); cursor: pointer;
  color: var(--c-outline); font-size: 15px; line-height: 1;
}
.color-pop-close:hover { background: var(--c-surface-high); color: var(--c-text); }
.color-pop-list {
  max-height: 240px; overflow-y: auto;
  padding: 8px; display: grid; gap: 4px;
}
.cp-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 7px; border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer;
  font-size: 12.5px; color: var(--c-text-sub);
  text-align: left; width: 100%;
}
.cp-row:hover { background: var(--c-surface-high); color: var(--c-text); }
.cp-row.on { background: var(--c-primary-soft); color: var(--c-primary); font-weight: 600; }
.cp-row .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--c-hairline); }
.cp-row .cnt { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--c-outline); font-weight: 400; }
.cp-empty { padding: 14px 10px; text-align: center; font-size: 12px; color: var(--c-outline); }

.board-stage {
  /* 画布是工作台凹槽：面板已升为白，台面必须比面板暗一档，
     否则白纸图纸直接消失在白面板里。深色走 --c-bg（更暗），
     浅色 --c-bg 已接近白，改用 --c-surface 保持「凹陷」方向一致。 */
  --canvas-bg: var(--c-bg);
  position: relative;
  flex: 1 1 auto;
  display: grid; place-items: center;
  padding: var(--sp-4);
  background-color: var(--canvas-bg);
  overflow: hidden;
  min-height: 0;
  container-type: size;
}
[data-theme="light"] .board-stage { --canvas-bg: var(--c-surface); }

/* 拼豆板（比例随画布宽高；内部画布按 devicePixelRatio × 缩放渲染） */
.board {
  position: relative;
  width: min(100%, 70vh, 640px);
  aspect-ratio: var(--ar, 1);
  transform: translate(var(--pan-x, 0px), var(--pan-y, 0px)) scale(var(--zoom, 1));
  transition: transform .18s ease;
}
@supports (width: 1cqh) {
  .board { width: min(100%, calc((100cqh - var(--sp-4) * 2) * var(--ar, 1)), 820px); }
}
.board canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
}
.board.is-pan, .board.is-pan canvas { cursor: grab; }
.board.is-panning, .board.is-panning canvas { transition: none; cursor: grabbing; }
.board.is-painting canvas { cursor: crosshair; }

/* 空态 */
.stage-empty {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: var(--sp-6);
  background: var(--canvas-bg);
  z-index: 4;
}
.stage-empty[hidden] { display: none; }
.stage-empty .se-box {
  display: grid; place-items: center; gap: var(--sp-3);
  width: min(100%, 70vh, 460px);
  aspect-ratio: 1 / 1;
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  border: 2px dashed color-mix(in srgb, var(--c-outline) 55%, transparent);
  border-radius: var(--r-card);
  color: var(--c-text-sub);
}
@supports (width: 1cqh) {
  .stage-empty .se-box { width: min(100%, 460px, calc(100cqh - var(--sp-4) * 2)); }
}
.stage-empty .se-icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-surface);
  border: 1px solid var(--c-outline-variant);
  color: var(--c-outline);
}
.stage-empty b { font-size: 16px; color: var(--c-text); }
.stage-empty p { margin: 0; font-size: 13px; max-width: 300px; line-height: 1.6; }
.stage-empty .se-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.stage-empty .se-actions .btn { height: 34px; padding: 0 16px; font-size: 13px; }

/* 生成中遮罩 */
.stage-busy {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--canvas-bg) 62%, transparent);
  backdrop-filter: blur(1.5px);
}
.stage-busy[hidden] { display: none; }
.busy-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--c-card); color: var(--c-text-sub);
  font-size: 12.5px; box-shadow: var(--shadow-lift);
}
.busy-spin {
  width: 13px; height: 13px; flex: none;
  border: 2px solid var(--c-surface-high);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: busy-rotate .8s linear infinite;
}
@keyframes busy-rotate { to { transform: rotate(360deg); } }

/* 裁剪取景层 */
.crop-layer {
  position: absolute; inset: 0; z-index: 8;
  display: grid; place-items: center; align-content: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--canvas-bg);
  overflow: auto;
}
.crop-layer[hidden] { display: none; }
.crop-frame {
  position: relative;
  width: min(100%, 70vh, 640px);
  aspect-ratio: var(--ar, 1);
  flex: none;
  touch-action: none;
}
@supports (width: 1cqh) {
  .crop-frame { width: min(100%, calc((100cqh - var(--sp-4) * 2 - 52px) * var(--ar, 1))); }
}
.crop-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.crop-box {
  position: absolute;
  border: 1.5px solid var(--c-primary);
  box-shadow: 0 0 0 9999px rgba(18, 18, 18, .46);
  cursor: move;
  touch-action: none;
}
.crop-box .crop-hint {
  position: absolute; left: 6px; top: 6px;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: rgba(18, 18, 18, .55); color: var(--c-on-image);
  font-size: 11px; white-space: nowrap; pointer-events: none;
}
.crop-box .crop-handle {
  position: absolute; right: -7px; bottom: -7px;
  width: 14px; height: 14px;
  background: var(--c-primary);
  border: 2px solid var(--c-surface);
  border-radius: 4px;
  cursor: nwse-resize;
}
.crop-mask { display: none; }
.crop-actions { display: flex; gap: var(--sp-2); flex: none; }
.crop-actions .btn { height: 34px; padding: 0 16px; font-size: 13px; }

/* 状态栏 */
.stage-status {
  --st-bg: #0C0C0C;
  --st-fg: #B7B2A8;
  --st-strong: #F2EDE4;
  flex: none;
  display: flex; align-items: center; gap: var(--sp-4);
  height: 36px; padding: 0 var(--sp-4);
  background: var(--st-bg); color: var(--st-fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11.5px;
  white-space: nowrap; overflow: hidden;
}
[data-theme="light"] .stage-status { --st-bg: #F7EAD9; --st-fg: #6B6158; --st-strong: #20160E; }
.stage-status .st-mid { display: inline-flex; align-items: center; gap: 6px; }
.stage-status .st-mid b { color: var(--st-strong); font-weight: 600; }
.stage-status .st-mid em { font-style: normal; opacity: .5; }
.stage-status .st-right { display: inline-flex; gap: 10px; margin-left: auto; }
.stage-status .st-right b { color: var(--st-strong); font-weight: 600; min-width: 2ch; display: inline-block; text-align: right; }

/* ---------- 右栏：图纸信息 ---------- */
.color-list { display: grid; gap: 6px; }
.color-empty {
  padding: var(--sp-6) var(--sp-4);
  text-align: center; font-size: 12.5px; line-height: 1.7;
  color: var(--c-outline);
  border: 1.5px dashed var(--c-outline-variant);
  border-radius: var(--r-sm);
}
.color-row {
  padding: 8px 10px;
  background: var(--c-surface);
  border-radius: var(--r-sm);
  display: grid; gap: 6px;
  border: 0; width: 100%; text-align: left; font-family: inherit;
  cursor: pointer;
  transition: background .15s ease;
}
.color-row:hover { background: var(--c-surface-high); }
.color-row.on { background: var(--c-primary-soft); }
.color-row .top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.color-row .dot { width: 17px; height: 17px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--c-hairline); }
.color-row .nm { color: var(--c-text); font-weight: 600; }
.color-row .nm small { color: var(--c-outline); font-weight: 400; margin-left: 5px; }
.color-row .cnt { margin-left: auto; color: var(--c-text-sub); font-variant-numeric: tabular-nums; }
.color-row .bar { height: 4px; border-radius: var(--r-pill); background: var(--c-surface-high); overflow: hidden; }
.color-row .bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--c-primary); }

.info-foot {
  flex: none;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--c-divider);
}
.info-foot .pg-title { margin-bottom: var(--sp-2); }
.info-foot .duo-grid { margin-top: var(--sp-2); }
.info-foot .btn { height: 36px; font-size: 13px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
.export-note { margin: var(--sp-3) 0 0; font-size: 11.5px; color: var(--c-outline); text-align: center; }

/* ---------- 显示与导出设置（右栏，紧贴导出区上方） ---------- */
.info-display {
  flex: none;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--c-divider);
}
.info-display .pg-title { margin-bottom: var(--sp-2); }
.info-display .switch-row { padding: 4px 0; font-size: 13px; gap: var(--sp-2); }
.info-display .segment-inline { flex: none; width: 132px; }
.info-display .segment-inline label { height: 25px; font-size: 12px; }
.info-display + .info-foot { border-top: 0; }

/* ---------- 轻提示 ---------- */
.toast-box {
  position: fixed; left: 50%; bottom: 56px; transform: translateX(-50%);
  z-index: 200;
  display: grid; gap: 8px; justify-items: center;
  pointer-events: none;
}
.toast {
  padding: 9px 18px;
  background: var(--c-card);
  color: var(--c-text);
  border: 1px solid var(--c-outline-variant);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
  font-size: 13px;
  animation: toast-in .18s ease;
  max-width: min(80vw, 460px);
}
.toast.is-out { opacity: 0; transition: opacity .25s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- 堆叠模式（≤1080）· 覆盖规则置于末尾 ----------
   必须放在所有基础规则之后：同特异性按源码顺序后者胜，
   早期版本把 .board-stage{min-height:56vh} 写在基础规则之前，
   被 .board-stage{min-height:0} 反覆盖 → 叠加 container-type:size
   内容高度为 0，窄窗口下画布整个消失。
   窄屏改为纵向堆叠，页面必须能整体滚动，故放开 body 的高度与溢出限制。 */
@media (max-width: 1080px) {
  html, body { height: auto; min-height: 100%; overflow: visible; }
  .app-shell { background: var(--c-bg); }
  .board-stage { min-height: 56vh; }
  .board { transition: none; }
}

/* ---------- 新增控件：恢复横幅 / 颜色搜索 / 净化按钮 ---------- */
.restore-bar {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 8px var(--sp-4);
  background: var(--c-primary-soft);
  color: var(--c-text);
  border-bottom: 1px solid var(--c-divider);
  font-size: 12.5px;
}
.restore-bar[hidden] { display: none; }
.restore-bar .rb-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-primary); flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 18%, transparent);
}
.restore-bar #restoreText { flex: 1 1 auto; min-width: 0; }
.restore-bar .btn { height: 28px; padding: 0 10px; font-size: 12px; flex: none; }

.color-pop-tools {
  display: grid; gap: 8px;
  padding: 8px 8px 0;
  border-bottom: 1px solid var(--c-divider);
}
.color-search {
  width: 100%; box-sizing: border-box;
  height: 32px; padding: 0 10px;
  border: 1px solid var(--c-outline-variant);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit; font-size: 12.5px;
  outline: none;
}
.color-search:focus { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary-soft); background: var(--c-card); }
.segment--sm { margin: 0 0 8px; }
.segment--sm label { height: 26px; font-size: 11.5px; padding: 0 10px; }
.cp-row .cp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-row .cp-name small { color: var(--c-outline); }
.color-pop-list { max-height: min(320px, 46vh); }

/* ---------- 窄屏顶栏收口 ---------- */
@media (max-width: 720px) {
  .app-topbar { padding: 0 10px; gap: 8px; }
  .tb-back { padding: 0 11px; }
  .tb-brand .sep, .tb-brand .tn, .tb-brand .tag, .tb-brand .pn { display: none; }
  .tb-switch-item { padding: 0 11px; font-size: 12.5px; }
  .sw-full { display: none; }
  .sw-short { display: inline; }
}