/* style.css — 白边相册 工具站样式
 *
 * 深色底是默认值，也是刻意的：工具产出的是「白边照片」，白底页面上白边和页面会糊在一起，
 * 看不出加没加边。深色中性灰让白色边框自然浮起来，成品和页面分得开。
 * 用户可以在右上角切到亮色（选择记在 localStorage），亮色的色值见文件末尾的
 * [data-theme="light"] 覆盖块——亮色下画布刻意用「浅灰纸面」而不是纯白，同样是为了让白边看得见。
 */

:root {
  /* ---------- 基础色板（深色 = 默认主题） ---------- */
  --bg: #14161a;
  --card: #1c1f25;
  --ink: #eef1f6;
  --ink-2: #a8b0bd;
  --ink-3: #828b99;
  --line: #2a2e37;
  --field: #23272f;
  --field-2: #171a1f;
  --accent: #6b93ff;
  --accent-ink: #0d1220;
  --accent-soft: #1e2740;
  --accent-hover: #86a6ff;
  --danger: #ff6b5e;
  --danger-ink: #2a0d0a;
  --warn: #e8a33d;
  --ok: #4ec98a;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.30), 0 14px 40px rgba(0, 0, 0, 0.38);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;

  /* ---------- 主题相关的中性表面 / 线条 / 控件底色 ----------
     全部集中在这里，亮色主题只覆盖这一批变量，其余规则不用动。 */
  --bg-glow: #1b2130;                        /* 页面顶部柔和渐变 */
  --bg-glow-0: rgba(27, 33, 48, 0);
  --header-bg: rgba(20, 22, 26, 0.86);       /* 顶栏（毛玻璃底） */
  --scrim: rgba(26, 29, 34, 0.95);           /* 画布加载遮罩 */
  --veil-weak: rgba(255, 255, 255, 0.035);   /* 悬浮 / 卡片淡底 */
  --veil: rgba(255, 255, 255, 0.05);
  --veil-strong: rgba(255, 255, 255, 0.07);
  --scroll: #3a404b;                         /* 滚动条滑块 */
  --track: #2c313a;                          /* 滑块 / 进度条轨道 */
  --switch-off: #3a404b;                     /* 装饰区开关（关） */
  --switch-no: #343a45;                      /* 左栏小开关（关） */
  --knob: #cbd2dc;
  --switch-knob: #f2f5fa;
  --thumb-bg: #14161a;                       /* 缩略图格子底 */
  --toast-bg: #2b3038;
  --toast-ink: var(--ink);
  --toast-line: transparent;
  --disabled-bg: #3d4763;                    /* 主按钮禁用态 */
  --disabled-ink: #8b93a3;
  --dash: #454c5a;                           /* 虚线框 */
  --ring: #2a2e37;                           /* 色板细描边 */
  --brand-a: #2b3554;                        /* 品牌标记方块 */
  --brand-b: #3d4a6b;
  --stage-bg: #10131a;                       /* 画布底色（默认纯色，跟随主题） */

  /* ---------- 3D 空间画布（默认底色） ---------- */
  --space-bg:
    radial-gradient(ellipse 55% 45% at 18% 15%, rgba(110, 70, 200, 0.45), transparent 60%),
    radial-gradient(ellipse 50% 40% at 82% 25%, rgba(60, 110, 220, 0.40), transparent 62%),
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(50, 70, 130, 0.30), transparent 70%),
    linear-gradient(to bottom, #0b0d16 0%, #07080c 55%, #04050a 100%);
  --space-grid: rgba(120, 140, 200, 0.20);
  --space-fog:
    linear-gradient(to bottom, rgba(7, 8, 12, 0) 34%, rgba(7, 8, 12, 0.55) 70%, rgba(7, 8, 12, 0.92) 100%);
  --space-orb-a: rgba(140, 80, 230, 0.40);
  --space-orb-b: rgba(60, 130, 240, 0.35);

  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 作者样式里的 display 会覆盖浏览器默认的 [hidden]{display:none}，
   加载遮罩 .preview-loading{display:flex} 就出现过"hidden 了还盖在预览上"。
   这里补一条全局兜底规则，优先级提到最高。 */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--ink);
  /* 中性底：白边照片在这里才立得住，同时用一点冷暖渐变避免死板 */
  background:
    radial-gradient(1100px 620px at 50% -10%, var(--bg-glow) 0%, var(--bg-glow-0) 62%),
    var(--bg);
  background-attachment: fixed;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 工作台需要占满可用宽度，主页/关于页保持窄栏好读 */
.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
body[data-current-view="bench"] .header-inner { max-width: 1756px; }
body[data-current-view="bench"] { overflow: hidden; }

/* ---------- Header ---------- */
.site-header {
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.brand-mark-wrap {
  width: 30px;
  height: 30px;
  flex: none;
  display: block;
}
.brand-mark {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 7px;
}

/* 竖排两行：窄栏放两行会挤，所以堆叠而不是并排 */
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 700; font-size: 17px; letter-spacing: 0.5px; }
.brand-sub { font-size: 11px; color: var(--ink-3); font-weight: 500; letter-spacing: 0.4px; }

.header-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* 主题开关：图标显示"点下去会变成什么"（暗色里显示太阳 → 切亮色） */
.theme-toggle { width: 32px; height: 32px; border-radius: 8px; }
.theme-toggle .theme-ico { display: none; }
[data-theme="dark"] .theme-toggle .theme-ico--sun { display: block; }
[data-theme="light"] .theme-toggle .theme-ico--moon { display: block; }

.site-nav { display: flex; gap: 4px; }
/* 窄屏不隐藏导航 —— 三个视图之间没导航就等于没法走。
   改成只留文字、去掉内边距压缩宽度。 */
@media (max-width: 560px) {
  .header-inner {
    height: auto;
    flex-wrap: wrap;
    padding-top: 8px;
    padding-bottom: 8px;
    row-gap: 6px;
  }
  .header-right { width: 100%; justify-content: space-between; }
  .site-nav { flex: 1 1 auto; flex-wrap: wrap; }
  .site-nav a { padding: 6px 6px; font-size: 12.5px; }
  .brand-sub { display: none; }
}
@media (max-width: 380px) {
  .brand-name { font-size: 15px; }
  .brand-mark-wrap { width: 26px; height: 26px; }
  .site-nav a { padding: 6px 6px; font-size: 12.5px; }
}
.site-nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
  padding: 7px 14px;
  border-radius: 7px;
  transition: color 0.15s, background 0.15s;
}
.site-nav a:hover { color: var(--ink); background: var(--field); }
.site-nav a.active { color: var(--ink); background: var(--accent-soft); font-weight: 600; }
/* 英文站才有 Blog；中文站隐藏 */
.nav-blog { display: none; }
html[lang="en"] .nav-blog { display: inline; }
@media (max-width: 560px) {
  .site-nav { gap: 2px; }
  .site-nav a { padding: 6px 6px; font-size: 12.5px; }
}
@media (max-width: 380px) {
  .site-nav a { padding: 6px 4px; font-size: 12px; }
}

/* ---------- 视图切换 ---------- */
.view { display: block; animation: viewIn 0.24s ease; }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
/* 主页是满屏照片墙：隐藏页脚 + 禁止页面滚动，让墙真正占满一屏
   （页脚在其它视图仍可见；overflow:hidden 顺带避免 1px 高度差闪出滚动条） */
body[data-current-view="home"] .site-footer { display: none; }
body[data-current-view="home"] { overflow: hidden; }

/* ---------- 全局小标签（kicker）：工作台头 / 关于头共用 ---------- */
.sc-kicker {
  display: block;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 8px;
}
/* 关于页副标题（主页已改为满屏照片墙，不再有首屏 hero） */
.hero-sub { margin-top: 10px; color: var(--ink-2); font-size: 15px; }

/* ---------- 工作台视图头 ---------- */
.bench-head {
  text-align: center;
  padding: 26px 18px 4px;
  max-width: 1720px;
  margin: 0 auto;
}
.bench-head h2 { font-size: clamp(20px, 3vw, 26px); font-weight: 800; }
.bench-head p { margin-top: 8px; color: var(--ink-2); font-size: 14px; }

/* Dropzone */
.dropzone {
  border: 2px dashed var(--dash);
  border-radius: var(--radius);
  padding: 60px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  color: var(--ink-2);
  outline: none;
  background: var(--card);
}
.dropzone:hover { border-color: var(--accent); background: var(--accent-soft); }
.dropzone:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(61, 109, 242, 0.2); }
.dropzone.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: scale(1.005);
  color: var(--accent);
}

.dz-icon { color: var(--ink-3); margin-bottom: 12px; }
.dropzone.dragover .dz-icon { color: var(--accent); }
.dz-title { font-size: 16px; font-weight: 600; color: var(--ink); }
.dz-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.dz-hint { margin-top: 6px; font-size: 13px; color: var(--ink-3); }

/* ---------- 工作台：左功能 / 中缩略 / 右主工作区 ---------- */
/* 三栏宽度全部走 --rail-w，折叠只改这一个变量：
   媒体查询不再写死 56px，否则用户点开会被立刻压回去。 */
.bench {
  --rail-w: 224px;
  --stage-w: 1fr;
  display: grid;
  /* 第二列（照片列表）收窄：给画布让位 */
  grid-template-columns: var(--rail-w) 168px var(--stage-w);
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  height: calc(100dvh - 62px);
  max-width: 1760px;
  margin: 0 auto;
  background: var(--card);
  border-inline: 1px solid var(--line);
}


/* 三栏拼成一个连续的应用外壳，分栏只靠细分隔线表达层级。 */
.bench-rail,
.bench-main,
.bench-stage {
  background: var(--card);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
  min-height: 0;
}

/* ---- 左栏：功能清单 ---- */
.bench-rail {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.rail-title,
.bench-main-title,
.stage-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--ink-2);
}
/* 中栏很窄：标题不许被按钮挤成竖排，放不下就让按钮换行 */
.bench-main-title { flex: none; white-space: nowrap; }

.rail-toggle {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, transform 0.2s;
}
.rail-toggle:hover { color: var(--ink); border-color: var(--ink-3); }
.rail-toggle.is-folded { transform: rotate(180deg); }

/* 收起态：整条工具栏只留一个箭头按钮，把宽度还给画布 */
.bench.rail-collapsed { --rail-w: 56px; }
.bench.rail-collapsed .rail-title,
.bench.rail-collapsed .rail-body { display: none; }
.bench.rail-collapsed .rail-head { justify-content: center; padding: 12px 0; border-bottom: 0; }
.rail-body {
  padding: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}
.rail-body::-webkit-scrollbar { width: 8px; }
.rail-body::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 4px; }
.rail-body::-webkit-scrollbar-track { background: transparent; }

/* 左栏工具：三大类标签，类内控件平铺 —— 不折叠，改哪一项都直接看得到 */
.fn-tabs {
  position: sticky;
  top: -12px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin: -12px -12px 0;
  padding: 10px 12px 9px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.fn-tab {
  padding: 7px 4px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
}
.fn-tab:hover { background: var(--veil); color: var(--ink); }
.fn-tab.is-active { background: var(--accent); color: var(--accent-ink); }
.fn-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fn-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 14px;
}
/* display:flex 会盖掉 hidden，必须显式还原 */
.fn-page[hidden] { display: none; }
/* 装饰组标题右侧：当前值 + 开关，成一列右对齐 */
.head-right { display: flex; align-items: center; gap: 9px; }
/* 批量处理：和上面的「导出图片」拉开，别让标题贴着按钮 */
.fn-page .control--batch { margin-top: 0; padding-top: 16px; border-top: 1px solid var(--line); }
/* 窄栏里按钮占满整行，文字不折行 */
.preset-actions { display: grid; grid-template-columns: 1fr; gap: 6px; }
.preset-actions .btn-ghost { width: 100%; white-space: nowrap; }
#exportAllBtn { width: 100%; margin-top: 6px; padding: 9px 12px; }
.fn-page .btn-sm { font-size: 12.5px; }

/* 画质预设：3 列等宽，与滑块、预估行左对齐 */
#qualityPresets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
#qualityPresets .chip { width: 100%; justify-content: center; padding-left: 4px; padding-right: 4px; }
/* 预估输出：一行数据，等宽数字好对齐 */
.export-estimate {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
/* 日期样式：单列表格，逐行对齐；每行都放得下，不折到第二行 */
#stampStyles { display: grid; grid-template-columns: 1fr; gap: 6px; }
#stampStyles .chip { width: 100%; justify-content: center; white-space: nowrap; overflow: hidden; }

.rail-note {
  margin-top: 12px;
  padding: 10px 11px;
  border-top: 1px solid var(--line);
}
.rail-note .deco-hint { margin: 0; }
.rail-export {
  margin-top: 16px;
  padding: 14px 4px 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.rail-export.panel { border-left: 0; border-right: 0; border-bottom: 0; }
.rail-export .panel-title { margin-bottom: 12px; }
.rail-export .btn-primary { margin-top: 12px; }
.rail-export .export-tip {
  margin-top: 9px;
  font-size: 11px;
  line-height: 1.45;
}
.rail-adjust {
  display: block;
  padding: 14px 4px 0;
  margin-top: 16px;
  border-top: 1px solid var(--line);
}
.rail-adjust .panel {
  padding: 0;
  margin: 0 0 18px;
  border: 0;
  background: transparent;
}
.rail-adjust .panel + .panel { padding-top: 16px; border-top: 1px solid var(--line); }
.rail-adjust .panel-title { font-size: 14px; margin-bottom: 12px; }


/* ---- 中栏：缩略预览 ---- */
.bench-main {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bench-main-head,
.stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.bench-main-body {
  position: relative;          /* 框选矩形的定位基准 */
  padding: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}
.bench-main-body::-webkit-scrollbar { width: 8px; }
.bench-main-body::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 4px; }

/* 上传区在中栏：给足高度，但别把中栏撑到比右栏还长 */
.bench-main .dropzone {
  margin: 0;
  min-height: 248px;
  padding: 26px 16px;
}

.photo-list-empty {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--ink-3);
  text-align: center;
  font-size: 12px;
}
.photo-list-empty strong { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.photo-list-empty-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--accent);
  font-size: 19px;
  line-height: 1;
  margin-bottom: 4px;
}
.bench-main-body:has(.thumbs:not([hidden])) .photo-list-empty { display: none; }

/* 上传入口属于第三栏画布，不占用照片列表的空间。 */
.stage-empty { width: min(520px, 100%); }
.stage-empty .dropzone { width: 100%; min-height: 220px; }

/* 缩略图组：原图 / 当前效果 上下对齐 */
.thumbs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-content: start;
}
.thumb { margin: 0; min-width: 0; }

/* ---- 照片列表多选 ---- */
.thumb-item { cursor: pointer; }
.thumb-item.is-selected .thumb-box {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.thumb-item.is-selected .thumb-box canvas { opacity: 1; }
.thumb-item:not(.is-selected) .thumb-box canvas { opacity: 0.82; }
.select-box {
  position: absolute;
  z-index: 5;
  border: 1px solid var(--accent);
  background: rgba(107, 147, 255, 0.16);
  border-radius: 4px;
  pointer-events: none;
}
.bench-main-head { padding: 10px; flex-direction: column; align-items: stretch; gap: 6px; }
.bench-main-head .btn-sm { padding: 3px 6px; font-size: 11.5px; }
.bench-main-tools { display: flex; gap: 3px; flex-wrap: wrap; }
#selCount { color: var(--accent); font-style: normal; font-size: 12px; }
.thumb-source,
.thumb-result,
.meta-card { display: none !important; }
.thumb-cap { display: none !important; }
.thumb-box {
  position: relative;
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--thumb-bg);
  overflow: hidden;
}
.thumb-box canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
/* 结果缩略图给一圈琥珀描边，和"原图"一眼分得开 */
.thumb-box.is-result { border-color: rgba(255, 197, 61, 0.42); }
.thumb-cap {
  margin-top: 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.thumb-tag {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.thumb-tag.accent { color: var(--accent); }
.thumb-dim {
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.bench-main .meta-card { margin-top: 14px; }

/* ---- 右栏：主工作区 ---- */
.bench-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}
.stage-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.stage-file {
  font-size: 12px;
  color: var(--ink-3);
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.icon-btn {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.icon-btn:hover { color: var(--ink); border-color: var(--ink-3); background: var(--veil-weak); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 语言开关：和主题按钮同高，纯文字 */
.lang-switch {
  height: 28px;
  min-width: 34px;
  padding: 0 8px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.lang-switch:hover { color: var(--ink); border-color: var(--ink-3); background: var(--veil-weak); }
.lang-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 主画布：整块棋盘格舞台，照片居中 */
.stage {
  /* 平底色（原来的棋盘格"透明框"已去掉）：照片直接放在画布上 */
  background: var(--field-2);
  border-bottom: 1px solid var(--line);
  min-height: clamp(300px, 44vh, 520px);
  /* 有照片时画布吃掉右栏剩余高度（右侧整块都是画布） */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* 顶部多留一点：3D 倾斜时画板近端会被透视放大，会顶到上沿 */
  padding: 38px 26px 52px;
  position: relative;
}
/* 有照片时画布按容器高度铺满，不再限制固定高度 */
.stage:has(> .preview-frame:not([hidden])) {
  min-height: 0;
  height: auto;
  align-items: stretch;
}
/* ---- 画布底色：默认纯色；选「流动渐变」时多一层用 transform 缓慢漂移的渐变层 ----
   漂移只用 transform（走合成层、不重绘），ease-in-out 往返 → 像水一样流动，不是线性硬移。 */
.stage-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--stage-bg);
}
/* ---- 3D 空间：网格地面 + 两团光晕 + 底部雾（默认画布底色） ---- */
.stage-fx__space {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--space-bg);
  perspective: 520px;
  perspective-origin: 50% 40%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* 切到纯色/渐变时淡出，别硬切 */
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.5s;
}
.stage-fx.is-space .stage-fx__space { opacity: 1; visibility: visible; }
.stage-space__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
  /* 视差跟随鼠标，缓动收尾，别硬跟 */
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.stage-space__orb--a {
  width: 62%;
  aspect-ratio: 1;
  top: -32%;
  left: -14%;
  background: radial-gradient(circle, var(--space-orb-a), transparent 70%);
}
.stage-space__orb--b {
  width: 64%;
  aspect-ratio: 1;
  top: -26%;
  right: -16%;
  background: radial-gradient(circle, var(--space-orb-b), transparent 70%);
}
.stage-space__stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.stage-fx:not(.is-space) .stage-space__stars { opacity: 0; visibility: hidden; }
[data-theme="light"] .stage-space__stars { opacity: 0; }
.stage-space__grid {
  position: absolute;
  left: -60%;
  right: -60%;
  top: 48%;
  bottom: -45%;
  background-image:
    linear-gradient(var(--space-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--space-grid) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: rotateX(72deg);
  transform-origin: 50% 0%;
  /* 远处淡、近处实，网格才不会顶到画板上 */
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.45) 18%, rgba(0, 0, 0, 0.9) 45%, #000 75%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.45) 18%, rgba(0, 0, 0, 0.9) 45%, #000 75%);
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  /* 地面前进的动态：整格平移，首尾无缝。这类循环只能用 linear，
     ease 会让格子忽快忽慢（同暗格纹的做法）。 */
  animation: spaceGridMove 18s linear infinite;
}
@keyframes spaceGridMove {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 64px, 0 64px; }
}
/* 低端机 / save-data：星空和网格动画停掉，磨砂降级成半透明底色 */
.is-low-power .stage-space__grid { animation: none; }
.is-low-power .stage-space__stars { display: none; }
.is-low-power .stage-space__orb { filter: blur(32px); }
.is-low-power .preview-board {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(235, 240, 248, 0.32);
}
.is-low-power .stage[data-board="white"] .preview-board { background: #fff; }
.is-low-power .stage[data-board="black"] .preview-board { background: #16161a; }
.is-low-power .stage[data-board="cool"] .preview-board { background: #f4f5f7; }
.stage-space__fog {
  position: absolute;
  inset: 0;
  background: var(--space-fog);
}
.stage-fx__flow {
  position: absolute;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 流动渐变：大尺寸 + 缓慢平移缩放 */
.stage-fx.is-flow .stage-fx__flow {
  left: -30%;
  top: -30%;
  width: 160%;
  height: 160%;
  opacity: 1;
  animation: fxFlow 30s ease-in-out infinite;
}
@keyframes fxFlow {
  0%   { transform: translate3d(-5%, -4%, 0) scale(1.06); }
  50%  { transform: translate3d(5%, 4%, 0) scale(1.16); }
  100% { transform: translate3d(-5%, -4%, 0) scale(1.06); }
}
/* 暗格纹（Uiverse / jeremyssocial · afraid-sheep-52，MIT）：
   40px 两色斜纹格，按「刚好一个格子」平移 → 首尾完全对齐的无缝循环。
   注：无缝滚动必须用 linear（换 ease 会让格子忽快忽慢），不是缓动偷懒。 */
.stage-fx.is-pattern .stage-fx__flow {
  inset: -80px;                       /* 四周多铺一圈，平移时不会露边 */
  background-size: 40px 40px;
  opacity: 1;
  animation: fxMove 4s linear infinite;
}
@keyframes fxMove {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(40px, 40px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .stage-fx.is-flow .stage-fx__flow { animation: none; transform: scale(1.12); }
  .stage-fx.is-pattern .stage-fx__flow { animation: none; }
  .stage-space__grid { animation: none; }
}

/* ---- 画布底色控制：贴在画布右上角 ---- */
.canvas-bg { position: absolute; top: 10px; right: 10px; z-index: 6; }
.canvas-bg__btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.canvas-bg__btn:hover { color: var(--ink); border-color: var(--ink-3); }
.canvas-bg__btn[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.canvas-bg__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.canvas-bg__panel {
  position: absolute;
  top: 38px;
  right: 0;
  width: 252px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
  transform-origin: 100% 0;
  animation: panelIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  /* 面板高度由 JS 按画布高度设上限，超出就在面板里滚，别被画布裁掉 */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}
.canvas-bg__panel::-webkit-scrollbar { width: 6px; }
.canvas-bg__panel::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 3px; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.canvas-bg__title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--ink-3);
  margin-bottom: 7px;
}
.canvas-bg__title:not(:first-child) { margin-top: 12px; }
#canvasBgSwatches { margin-bottom: 12px; }
.grad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.grad-chip {
  position: relative;
  height: 34px;
  padding: 0;
  border: 2px solid var(--card);
  border-radius: 7px;
  box-shadow: 0 0 0 1.5px var(--ring);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s;
}
.grad-chip:hover { transform: scale(1.04); }
.grad-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.grad-chip.active { box-shadow: 0 0 0 2px var(--accent); }
.grad-chip span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
}
/* "跟随主题"色板：对角一半深一半浅，一眼看出是"自动" */
.swatch-auto { background: linear-gradient(135deg, #16181d 0 50%, #eef0f4 50% 100%); }

/* ---- 画板样式 / 3D 漂浮参数（画布外观面板） ---- */
.board-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}
.board-chip {
  height: 30px;
  padding: 0;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
  transition: color 0.14s, border-color 0.14s, background 0.14s;
}
.board-chip:hover { color: var(--ink); border-color: var(--ink-3); }
.board-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.board-chip.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.fx-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 12px;
}
.fx-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.fx-field span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  font-size: 11px;
  color: var(--ink-3);
}
.fx-field output {
  font-size: 11px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.fx-field input[type="range"] { width: 100%; height: 4px; }
.canvas-bg__hint {
  margin-top: 9px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-3);
}

/* 星空背景（.stage-fx）之下的内容要浮在背景上面 */
.stage-empty,
.preview-frame,
.preview-loading { position: relative; z-index: 1; }

.stage-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--ink-3);
  font-size: 14px;
  text-align: center;
}
.stage-empty p { margin: 0; }

/* 预览框：3D 舞台。scene 负责漂浮/倾斜，zoom 负责缩放平移，画板和照片都在 zoom 里 */
.preview-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  perspective: 1800px;
  perspective-origin: 50% 40%;
}

/* 漂浮层：位移 + 倾斜由 JS 每帧写 transform（见 main.js 的 stageTick） */
.preview-scene {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}

/* 缩放/平移整张「画板卡片」：板子和照片一起放大，不会出现照片盖住板子的错位 */
.preview-zoom {
  position: relative;
  transform: translate(var(--view-x, 0), var(--view-y, 0)) scale(var(--view-scale, 1));
  transform-origin: center;
  transform-style: preserve-3d;
  will-change: transform;
}

/* 卡片容器：自己不带背景/滤镜，免得把子层的 3D 深度压平。
   板子在 z=0，照片用 translateZ 浮在它前面 —— 倾斜时就能看见前后层级。 */
.preview-stack {
  position: absolute;
  inset: 0;
  border-radius: var(--board-radius, 18px);
  transform-style: preserve-3d;
}

/* 板子 = 白边本身：画布自带的白边区域在预览里是透明的，透出这块板子的颜色。
   默认不留额外边，板子边缘就是导出图的边缘。 */
.preview-board {
  position: absolute;
  inset: 0;
  border-radius: var(--board-radius, 18px);
  background: rgba(235, 240, 248, 0.22);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 22px 44px -20px rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  pointer-events: none;
  transition: background-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-radius 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.stage[data-board="white"] .preview-board {
  background: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 22px 44px -20px rgba(0, 0, 0, 0.55);
}
.stage[data-board="black"] .preview-board {
  background: #16161a;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 22px 44px -20px rgba(0, 0, 0, 0.72);
}
.stage[data-board="cool"] .preview-board {
  background: #f4f5f7;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 22px 44px -20px rgba(0, 0, 0, 0.55);
}
/* 不透明的板子不需要再模糊背景，省一层合成 */
.stage[data-board="white"] .preview-board,
.stage[data-board="black"] .preview-board,
.stage[data-board="cool"] .preview-board {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* 地面投影：不跟着卡片 3D 旋转，只在底部做一层椭圆软影 */
.preview-ground {
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 62%;
  height: 26px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 70%);
  filter: blur(7px);
  opacity: 0.7;
  pointer-events: none;
  z-index: -1;
  will-change: transform, opacity, filter;
}

/* 照片盒：尺寸由 JS 算好（已补掉透视放大的那部分），绝对居中浮在板子上方。
   倾斜时照片比板子多走一点，前后层级一眼能看出来。 */
.preview-stack__box {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: var(--board-radius, 18px);
  z-index: 1;
  cursor: default;
  touch-action: none;
  transform: translate(-50%, -50%) translateZ(var(--photo-lift, 28px));
  transform-origin: center;
  will-change: transform;
}
/* 照片自己的描边 + 动态投影：影子落在板子上，跟着倾斜方向偏 */
.preview-photo-edge {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.55),
    var(--ph-x, 0px) var(--ph-y, 14px) var(--ph-blur, 12px) rgba(0, 0, 0, 0.42),
    calc(var(--ph-x, 0px) * 1.6) calc(var(--ph-y, 14px) * 1.8) calc(var(--ph-blur, 12px) * 2.4) rgba(0, 0, 0, 0.48);
}
.preview-stack__photo {
  position: absolute;
  inset: 0;
}
.preview-stack__photo canvas {
  /* 铺满固定比例框；照片(加白边后)比例与框比例不一致时 contain 居中缩放，
     框子尺寸始终不变 */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.preview-before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
}
.preview-stack.is-comparing .preview-before { opacity: 1; }
.preview-stack.is-comparing .preview-stack__photo {
  clip-path: inset(0 0 0 var(--compare-pct, 50%));
}
.preview-stack.is-comparing .preview-stack__box {
  cursor: ew-resize;
  touch-action: none;
}
.preview-stack.is-comparing .preview-stack__photo,
.preview-stack.is-comparing .compare-divider {
  transition: clip-path 80ms linear, left 80ms linear;
}
.compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--compare-pct, 50%);
  width: 2px;
  z-index: 4;
  transform: translateX(-1px);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 0 14px rgba(0,0,0,.45);
  pointer-events: none;
}
.compare-divider span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}

.compare-toggle.is-active {
  color: var(--accent);
  border-color: var(--accent);
}

/* ---- 左栏：照片填充（适应 / 裁切）+ 复位 ---- */
.seg-fit { width: 100%; }
.seg-fit button { flex: 1 1 0; }
.fit-hint { margin-top: 7px; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
#fitControl .btn-ghost.btn-sm { width: auto; padding: 3px 8px; font-size: 11px; }
/* 裁切模式下照片上的拖动改成"挪照片"，光标跟着换 */
.preview-stack.is-cropping:not(.is-comparing) .preview-stack__box { cursor: move; }
.preview-stack.is-cropping:not(.is-comparing) .preview-stack__box:active,
.preview-stack.is-grabbing-photo .preview-stack__box { cursor: grabbing; }

/* 调整面板：宽屏三列平铺，窄屏收成单列 */
.adjust {
  padding: 16px 18px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 26px;
  align-items: start;
  flex: none;
}
.adjust.rail-adjust {
  display: block;
  padding: 0;
  margin: 16px 0 0;
}
.adjust.rail-adjust .panel { padding: 0; }
.adjust.rail-adjust .panel + .panel { padding-top: 16px; border-top: 1px solid var(--line); }
.adjust .panel { border: none; background: transparent; padding: 0; }
.adjust .panel + .panel { padding: 0; border: none; }
.adjust .panel-title { margin-bottom: 12px; }
.adjust .panel.is-flash { animation: grpFlash 0.9s ease; }
@keyframes grpFlash {
  0%   { background: rgba(255, 197, 61, 0.14); box-shadow: 0 0 0 6px rgba(255,197,61,.14); }
  100% { background: transparent; box-shadow: 0 0 0 6px rgba(255,197,61,0); }
}

/* 折叠按钮在内联布局里不该占满宽度 */
.btn-ghost.btn-sm {
  width: auto;
  padding: 6px 13px;
  font-size: 12.5px;
  border-radius: 7px;
}

/* ---- 关于我们 ---- */
.about-wrap { max-width: 1040px; margin: 0 auto; padding: 42px 20px 20px; }
.about-head { text-align: center; margin-bottom: 40px; }
.about-head h1 { font-size: clamp(26px, 4vw, 34px); font-weight: 800; margin-top: 8px; }
/* 关于页头部：只有文案一栏（原来右侧的配图整块已按需求删除） */
.about-hero { margin-bottom: 30px; }
.about-hero-copy h1 {
  max-width: 620px;
  margin-top: 8px;
  font-size: clamp(30px, 4.5vw, 46px);
  line-height: 1.08;
  font-weight: 850;
}
.about-hero-copy .hero-sub {
  max-width: 620px;
  font-size: 15.5px;
  line-height: 1.8;
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.about-stats span {
  padding: 14px 12px;
  border: 1px solid var(--line);
  background: var(--veil-weak);
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 12px;
}
.about-stats b {
  display: block;
  margin-bottom: 5px;
  color: var(--ink);
  font-size: 20px;
}
.about-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.about-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
}
.about-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.about-card h3::before {
  content: "";
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: var(--accent);
  flex: none;
}
.about-card p { font-size: 13.5px; color: var(--ink-2); line-height: 1.75; }

.about-pledge {
  margin-top: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px;
}
.about-pledge h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.about-pledge h3::before {
  content: "";
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: var(--ok);
  flex: none;
}
.about-pledge ul { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; }
.about-pledge li {
  font-size: 13.5px;
  color: var(--ink-2);
  padding-left: 20px;
  position: relative;
}
.about-pledge li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  opacity: 0.65;
}

/* 主画布的加载遮罩（舞台本身样式见上面 .stage） */
.preview-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* 用不透明底色：半透明遮罩叠在星空上，spinner 转动时会闪 */
  background: var(--scrim);
  backdrop-filter: blur(2px);
  color: var(--ink-2);
  font-size: 14px;
  z-index: 2;
  padding: 20px;
}

.spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 尊重系统"减少动态效果"设置 */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
  html { scroll-behavior: auto; }
}

.loading-stage {
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  min-height: 1.4em;
}

.progress-track {
  width: min(280px, 70%);
  height: 6px;
  border-radius: 4px;
  background: var(--track);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  transition: width 0.25s ease-out;
}

.loading-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.loading-note {
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
  max-width: 300px;
  line-height: 1.5;
}

/* Meta card */
.meta-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: var(--field-2);
}
.meta-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}
.meta-list { display: grid; grid-template-columns: 1fr 1fr; margin-top: 6px; }
.meta-row dt { font-size: 12px; color: var(--ink-3); margin-top: 9px; }
.meta-row dd { font-size: 13px; font-weight: 600; color: var(--ink); }
.meta-row dd.unknown { color: var(--ink-3); font-weight: 400; }

/* Controls */
.control + .control { margin-top: 16px; }

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  background: var(--card);
}
.panel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: 0.6px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel-title::before {
  content: "";
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: var(--accent);
  flex: none;
}

.control + .control { margin-top: 16px; }
.control-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}
.control-head label { font-size: 13px; font-weight: 600; color: var(--ink); }
.control output { font-size: 13px; font-weight: 700; color: var(--accent); }

/* Range */
input[type="range"] {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--track);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2.5px solid var(--card);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2.5px solid var(--card);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  cursor: grab;
}
.range-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); margin-top: 4px; }

/* ---------- 装饰层控件（时间戳 / 品牌边框 / 模糊背景） ---------- */

.deco-head { margin-bottom: 9px; }

.deco-body {
  margin-top: 4px;
  padding: 13px 13px 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--field-2);
}
.deco-body .control:last-child { margin-bottom: 13px; }

.deco-hint {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0 0 12px;
}
.deco-hint.warn { color: var(--warn); }
.deco-hint.ok { color: var(--ok); }

/* 开关 */
.switch { position: relative; display: inline-flex; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 40px;
  height: 23px;
  border-radius: 12px;
  background: var(--switch-off);
  transition: background 0.16s ease;
  position: relative;
  display: block;
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--switch-knob);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: transform 0.16s ease;
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(17px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px rgba(61, 109, 242, 0.25); }

/* 分段控件 */
.seg {
  display: flex;
  flex-wrap: wrap;          /* 选项多时自动换行，别把文字挤折 */
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--field);
}
.seg button {
  flex: 0 0 calc(33.333% - 2px);   /* 每行 3 个，整齐对齐 */
  white-space: nowrap;
  padding: 7px 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: var(--ink-2);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
}
.seg button:hover { background: var(--accent-soft); color: var(--accent); }
.seg button.active { background: var(--accent); color: var(--accent-ink); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* 日期格式 chip */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
  padding: 5px 9px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--ink-2);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.14s;
  white-space: nowrap;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* 画幅比例：每行 3 个，和左栏其它网格对齐 */
.chip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.chip-grid .chip { width: 100%; justify-content: center; padding: 5px 2px; text-align: center; }
.aspect-custom { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.aspect-custom > span { color: var(--ink-3); font-weight: 700; flex: none; }
.aspect-custom input[type="text"] {
  width: 100%;
  padding: 6px 4px;
  text-align: center;
  font-size: 13px;
}

/* 文本输入 */
input[type="text"] {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--ink);
  background: var(--field);
}
input[type="text"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }

.link-btn {
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn:hover { color: var(--accent-hover); }

/* 时间戳颜色预览色块（黄色系） */
.swatch[data-color="#ffc400"] { box-shadow: 0 0 0 1.5px #d9a800; }
.swatch[data-color="#ff8c00"] { box-shadow: 0 0 0 1.5px #cc7300; }
.swatch[data-color="#ffd400"] { box-shadow: 0 0 0 1.5px #d9b100; }
.swatch[data-color="#f5c518"] { box-shadow: 0 0 0 1.5px #c9a114; }

/* Select */
select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8b0bd' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Swatches */
.swatches { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--card);
  box-shadow: 0 0 0 1.5px var(--ring);
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s;
}
.swatch:hover { transform: scale(1.08); }
.swatch.active { box-shadow: 0 0 0 2px var(--accent); }
.swatch[data-color="#ffffff"] { background: #ffffff; }
.swatch[data-color="#000000"] { box-shadow: 0 0 0 1.5px #565e6b; }
.swatch[data-color="#000000"] { background: #000000; }
.swatch[data-color="#ff2d2d"] { background: #ff2d2d; }
.swatch[data-color="#000000"].active { box-shadow: 0 0 0 2px var(--accent); }

.swatch-custom {
  position: relative;
  overflow: hidden;
  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
  display: none;
}
.swatch-custom input {
  position: absolute;
  inset: -6px;
  width: 42px;
  height: 42px;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

/* Buttons */
.btn-primary {
  margin-top: 18px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, transform 0.08s;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { background: var(--disabled-bg); color: var(--disabled-ink); cursor: not-allowed; }

.btn-ghost {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-2);
  font-size: 13.5px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-ghost:hover { border-color: var(--ink-3); color: var(--ink); }

.export-tip { margin-top: 10px; font-size: 12px; color: var(--ink-3); line-height: 1.5; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 46px; border-top: 1px solid var(--line); background: var(--card); }
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 12.5px;
  color: var(--ink-3);
  flex-wrap: wrap;
  gap: 6px;
}
.footer-licenses { color: var(--ink-3); text-decoration: none; border-bottom: 1px dotted currentColor; }
.footer-licenses:hover { color: var(--accent); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  background: var(--toast-bg);
  color: var(--toast-ink);
  border: 1px solid var(--toast-line);
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 50;
  max-width: 88vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { background: var(--danger); color: var(--danger-ink); border-color: transparent; }

/* ---------- 响应式 ---------- */
/* 关键约定：断点里只改 --rail-w 和 grid 形状，绝不写死 56px。
   上一版把窄屏左栏硬写成 56px，导致 JS 加的折叠 class 一生效就被压回去。 */
@media (max-width: 1400px) {
  .bench { --rail-w: 208px; }
}

@media (max-width: 1180px) {
  /* 中栏压窄，右栏（主工作区）保住宽度 */
  .bench {
    --rail-w: 184px;
    grid-template-columns: var(--rail-w) 150px minmax(0, 1fr);
  }
  .thumbs { grid-template-columns: 1fr; }
  .stage { min-height: 320px; }
}

@media (max-width: 960px) {
  /* 单列：功能清单横排在顶，缩略预览在中，主工作区在下 */
  body[data-current-view="bench"] { overflow: auto; }
  .bench {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "rail" "main" "stage";
    grid-template-rows: auto;
    height: auto;
    border-inline: 0;
  }
  .bench-rail { grid-area: rail; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); }
  .bench-main { grid-area: main; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); }
  .bench-stage { grid-area: stage; overflow: visible; }
  .stage,
  .stage:has(> .preview-frame:not([hidden])) {
    flex: 0 0 auto;
    height: clamp(420px, 62vh, 640px);
    min-height: 0;
  }
  .rail-note { display: none; }
  .bench-main .dropzone { min-height: 190px; padding: 20px 14px; }
  .about-cards { grid-template-columns: 1fr; }
  .about-pledge ul { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 720px) {
  .bench { padding: 12px 10px 20px; }
  .thumbs { grid-template-columns: 1fr 1fr; }
  .stage { min-height: 250px; padding: 30px 10px 34px; }
  .adjust { grid-template-columns: 1fr; gap: 18px; }
  .adjust .panel + .panel {
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }
  .stage-file { max-width: 120px; }
  .about-stats { grid-template-columns: 1fr; }
}

/* ============================================================
   亮色主题
   —— 切换入口在顶栏（#themeToggle）；选择存在 localStorage('wb.theme')，
      首帧由 index.html <head> 里的内联脚本定好，不会闪一下深色。
   —— 这里只覆盖主题变量 + 少数必须落在具体选择器上的规则。
      配色原则：每一层底色都能保证 --ink / --ink-2 / --ink-3 在其上可读；
      画布刻意用「浅灰纸面」而不是纯白，白边照片才看得出边界。
   ============================================================ */
[data-theme="light"] {
  /* 层级：页面浅灰 < 卡片纯白；输入框比卡片略沉，边界交给 --line 表达 */
  --bg: #eef0f4;
  --card: #ffffff;
  --ink: #16181d;
  --ink-2: #414855;
  --ink-3: #5c6373;
  --line: #d9dde5;
  --field: #eceff4;
  --field-2: #e4e8ef;
  --accent: #3562e8;
  --accent-ink: #ffffff;
  --accent-soft: #e2e9fd;
  --accent-hover: #2b55d4;
  --danger: #d93a2b;
  --danger-ink: #ffffff;
  --warn: #8a5200;
  --ok: #0c6b3c;

  --bg-glow: #ffffff;
  --bg-glow-0: rgba(255, 255, 255, 0);
  --header-bg: rgba(255, 255, 255, 0.86);
  --scrim: rgba(244, 246, 250, 0.95);
  --veil-weak: rgba(16, 24, 40, 0.04);
  --veil: rgba(16, 24, 40, 0.05);
  --veil-strong: rgba(16, 24, 40, 0.075);
  --scroll: #c3c9d4;
  --track: #dcdfe6;
  --switch-off: #c7ccd6;
  --switch-no: #c3c9d4;
  --knob: #ffffff;
  --switch-knob: #ffffff;
  --thumb-bg: #e9ecf1;
  --toast-bg: #ffffff;
  --toast-ink: #16181d;
  --toast-line: #d9dde5;
  --disabled-bg: #cbd1dd;
  --disabled-ink: #6f7787;
  --dash: #b6bdc9;
  --ring: #c3c9d4;
  --brand-a: #dde5f8;
  --brand-b: #b9c6e4;
  --stage-bg: #e8ebf1;

  /* 亮色下的 3D 空间：同一套网格/光晕，换成浅纸面配色 */
  --space-bg:
    radial-gradient(ellipse 55% 45% at 18% 15%, rgba(140, 120, 230, 0.20), transparent 60%),
    radial-gradient(ellipse 50% 40% at 82% 25%, rgba(90, 140, 240, 0.18), transparent 62%),
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 255, 255, 0.60), transparent 70%),
    linear-gradient(to bottom, #f7f9fd 0%, #eceff6 55%, #dfe4ee 100%);
  --space-grid: rgba(70, 90, 140, 0.16);
  --space-fog:
    linear-gradient(to bottom, rgba(228, 233, 241, 0) 34%, rgba(228, 233, 241, 0.58) 70%, rgba(228, 233, 241, 0.92) 100%);
  --space-orb-a: rgba(150, 120, 230, 0.26);
  --space-orb-b: rgba(90, 140, 240, 0.22);

  color-scheme: light;
}

/* 亮色下磨砂板子靠白色半透明，深色那套会发灰 */
[data-theme="light"] .stage[data-board="frost"] .preview-stack {
  background: rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.85),
    inset 0 1px 0 #ffffff,
    0 20px 40px -20px rgba(24, 32, 52, 0.35);
}
[data-theme="light"] .preview-ground {
  background: radial-gradient(ellipse at center, rgba(24, 32, 52, 0.30), rgba(24, 32, 52, 0) 70%);
}

/* 浅色底下照片缩略图的投影要收一点，纯黑投影在浅色里显脏 */
[data-theme="light"] .thumb-box canvas { box-shadow: 0 3px 10px rgba(24, 32, 52, 0.22); }

/* select 的下拉箭头是内联 SVG，描边色写死在 url() 里，亮色下换成深色版 */
[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}