:root {
  /* ===== 设计令牌 · 浅色（默认） ===== */
  --bg: #ffffff;
  --panel: #f7f8fa;
  --panel-2: #eff1f5;
  --panel-3: #e6e9ef;
  --text: #1a1d23;
  --text-2: #3d444f;
  --muted: #5f6672;
  --border: #e3e6ec;
  --border-strong: #cfd4dd;

  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, .10);
  --on-accent: #ffffff;

  /* 可读性令牌：占位符 / 禁用态文字必须达 WCAG AA（≥4.5:1，浅底） */
  --placeholder: #6b7280;
  --disabled-fg: #6b7280;

  --ok: #16a34a;
  --ok-soft: rgba(22, 163, 74, .12);
  --ok-fg: #15803d;
  --warn: #d97706;
  --warn-soft: rgba(217, 119, 6, .12);
  --warn-fg: #b45309;
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, .10);
  --danger-fg-soft: #c0392b;
  --on-danger: #ffffff;

  --btn-danger-bg: #dc2626;
  --btn-danger-bg-hover: #b91c1c;

  /* 透明棋盘格（预览区/缩略图底）与瓦片底色，随主题反转 */
  --checker-a: #e9ecf1;
  --checker-b: #f5f6f9;
  --tile-bg: #f0f2f6;

  --shadow-1: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-2: 0 12px 32px rgba(16, 24, 40, .12);

  --banner-bg: #fff8e6;
  --banner-fg: #7a4d05;
  --banner-border: #f0d79a;
  --banner-code-bg: rgba(0, 0, 0, .06);
  --summary-fg: #2b313b;

  /* 排版与形状 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --font-sans-en: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-full: 999px;
  /* 触控目标下限（移动端可访问性） */
  --tap: 44px;
}

[data-theme="dark"] {
  /* ===== 设计令牌 · 深色 ===== */
  --bg: #12151c;
  --panel: #1a1f27;
  --panel-2: #242a35;
  --panel-3: #2c3340;
  --text: #e8eaf0;
  --text-2: #c7cdd8;
  --muted: #9aa3b2;
  --border: #2a3240;
  --border-strong: #3a4453;

  /* 深色主题双令牌：--accent 偏亮（用于文字/图标/边框等前景，保证在深色面板上可读）；
     --accent-2 偏暗（用于「白字压在蓝色背景上」的按钮/激活态，保证 WCAG AA ≥4.5:1）。 */
  --accent: #6b9bf5;
  --accent-2: #386bd8;
  --accent-soft: rgba(107, 155, 245, .18);
  --on-accent: #ffffff;

  /* 深色主题占位符/禁用态：底色更深，用更亮的灰保证对比度 */
  --placeholder: #8b94a3;
  --disabled-fg: #8a94a3;

  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, .16);
  --ok-fg: #5fd08a;
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, .16);
  --warn-fg: #e7a85a;
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, .16);
  --danger-fg-soft: #f08a8a;
  --on-danger: #ffffff;

  --btn-danger-bg: #dc2626;
  --btn-danger-bg-hover: #b91c1c;

  --checker-a: #2a2e38;
  --checker-b: #20242c;
  --tile-bg: #20242c;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 18px 60px rgba(0, 0, 0, .5);

  --banner-bg: #3b2d10;
  --banner-fg: #ffd9a0;
  --banner-border: #6b521c;
  --banner-code-bg: rgba(255, 255, 255, .12);
  --summary-fg: #cfd6e0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

/* ===== App 壳：顶部通栏导航（PC + 移动一致，只在断点下变紧凑） =====
   改前是"PC 左侧 272 侧栏 / 移动底部 tab bar"双形态，但 PC 端 H1 与主题/语言按钮
   挤在 272px 窄列里很难看，且主操作区被白白压去 272px。改为顶部通栏后：
     · PC、移动端统一为一条顶部导航线
     · 移动端 tabs 横向滚动（保留图标省略文字）
     · 主操作区全宽，证件照生成的画布/合规面板不再被侧栏挤
*/
.shell { min-height: 100vh; padding-top: 68px; }   /* = .topbar 高度，改高度须同步 */

.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  width: auto; height: 68px;
  display: flex; align-items: center; gap: 24px;
  padding: 0 22px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  z-index: 60;
}
.topbar h1 {
  margin: 0; font-size: 17px; font-weight: 600; line-height: 1.2;
  letter-spacing: .2px;
  white-space: nowrap; flex: 0 0 auto;
  /* 不再需要 padding-right 90px（按钮现在是 topbar 末端的独立 chip） */
}

/* 首屏引导长文案已下移到页脚「关于本站 · 常见问题」折叠区（样式见 .about-site） */

/* .tabs：作为 .topbar 的 flex 子项水平排列；移动端可横滑。
   height: 100% + align-items: center 让 .tabs 高度严格等于 topbar 高度（52-60px），
   内部 .tab 垂直居中 —— 否则 .tabs 会被自身内容撑高、溢出 topbar 1-2px（测试 fail） */
.tabs {
  position: static; top: auto; left: auto; bottom: auto; right: auto;
  width: auto; height: 100%;
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  padding: 0; background: transparent; border: none;
  flex: 1 1 auto; min-width: 0;          /* 占满 topbar 中段，溢出时由 .tabs 横滑 */
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: flex; align-items: center; gap: 8px;
  background: transparent; color: var(--muted);
  border: 1px solid transparent; border-radius: 999px;   /* 胶囊风格，工具站主流 */
  padding: 10px 16px; cursor: pointer;
  font-size: 14px; text-align: left; line-height: 1.2;
  flex: 0 0 auto; white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.tab .ico { font-size: 16px; line-height: 1; flex: 0 0 auto; }
.tab .lbl { white-space: nowrap; }
.tab:hover { background: var(--panel); color: var(--text); }
.tab.active {
  background: var(--accent-2); color: var(--on-accent); border-color: var(--accent);
  box-shadow: var(--shadow-1);            /* 选中项抬起来一点，让通栏菜单有层次 */
}

/* ---- 「更多」收纳区 ----
   PC 端：.more-sheet 用 display:contents 让内部两个 .tab 直接参与 .tabs 的横向排列，
          HTML 只写一份按钮，不必维护两套 DOM；.tab-more 按钮在 PC 端隐藏。
   移动端：见下方 @media (max-width: 840px)，.more-sheet 变底栏上方的弹出浮层。 */
.more-sheet { display: contents; }
.tab-more { display: none; }

.content {
  margin-left: 0;                          /* 取消侧栏预留 */
  padding: 28px 32px 60px;
  max-width: 1280px;                       /* 顶部通栏后可放宽 */
}
.site-footer {
  margin-left: 0;
  padding: 4px 32px 24px;
  color: var(--muted);
  font-size: 12px;
}
.site-footer a { color: var(--accent); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .sep { color: var(--muted); }
/* 规格落地页入口行（首页 → landing 集群的内部链接，SEO 用） */
.site-footer .foot-seo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
  line-height: 1.8;
}
.site-footer .foot-seo b { color: var(--muted); font-weight: 600; }
.site-footer .foot-legal { padding-top: 2px; }
.panel { display: none; }
.panel.active { display: block; }
.panel h2 { margin-top: 0; font-size: 18px; }
.hint { color: var(--muted); font-size: 13px; margin-top: -6px; }
.hint-inline { color: var(--muted); font-size: 12px; }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
.row label { font-size: 13px; color: var(--muted); }

input[type="file"] {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text);
  font-size: 13px;
}
select, input[type="number"], input[type="text"] {
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--text);
  font-size: 13px;
  transition: border-color .15s, box-shadow .15s;
}
select:focus, input[type="number"]:focus, input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* 占位符 / 禁用态文字：必须达 WCAG AA（≥4.5:1）。浏览器默认占位符与禁用灰太低，这里显式覆盖。 */
::placeholder { color: var(--placeholder); opacity: 1; }
select:disabled, input[type="number"]:disabled, input[type="text"]:disabled, input[type="date"]:disabled, input[type="range"]:disabled, textarea:disabled {
  color: var(--disabled-fg);
  -webkit-text-fill-color: var(--disabled-fg);
  cursor: not-allowed;
}
/* 滑块：明确「这是一条可拖动的轨道」—— 浅色主题默认轨道几乎看不见，这里用 accent-soft 做软蓝轨 + accent 实色圆钮 + 主题色光环。
   关键：input 本身必须 appearance:none，浏览器才会放弃原生渲染、改用下面的伪元素规则（否则 webkit 用原生外观，伪元素自定义被忽略）。
   同时给 focus/hover 反馈（无障碍 + 交互感）。 */
input[type="range"] { -webkit-appearance: none; appearance: none; accent-color: var(--accent); background: transparent; cursor: pointer; height: 24px; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; background: var(--accent-soft); border-radius: 999px;
}
input[type="range"]::-moz-range-track {
  height: 6px; background: var(--accent-soft); border-radius: 999px; border: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--panel);
  margin-top: -6px; cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--panel);
  cursor: pointer; transition: background .15s, box-shadow .15s;
}
input[type="range"]:hover::-webkit-slider-thumb { background: var(--accent-2); }
input[type="range"]:hover::-moz-range-thumb { background: var(--accent-2); }
input[type="range"]:focus { outline: none; }
input[type="range"]:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent-soft); }
input[type="range"]:focus::-moz-range-thumb { box-shadow: 0 0 0 3px var(--accent-soft); }

/* 移动端触控目标（iOS 建议 ≥44px）：
   1) 滑块：input 整体高度 24→44，圆钮/轨道位置不变，命中区扩到 44。
   2) 顶栏主题/语言 chip：32→44 高度，主题钮原本只有 30 宽，再补 min-width:44 凑成 44×44。
   桌面不受影响（max-width 断点）。 */
@media (max-width: 840px) {
  input[type="range"] { height: 44px; }
}

/* file input 视觉改写（i18n.js 注入 .file-wrap） */
/* 仅未改写过的原生 file input 隐藏；改写后 input 由 i18n 注入的 inline 样式绝对定位覆盖 */
input[type="file"]:not([data-i18n-rewritten]) { display: none; }
.file-wrap {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--panel); border: 2px dashed var(--accent); border-radius: var(--r-sm);
  padding: 10px 16px; color: var(--text); font-size: 14px; cursor: pointer;
  position: relative; user-select: none; min-height: 46px;
  width: 100%; max-width: 440px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.file-wrap:hover { border-color: var(--accent-2); background: var(--panel-2); }
.file-wrap.dragover { border-color: var(--accent-2); background: var(--panel-2); box-shadow: 0 0 0 2px var(--accent); }
.file-wrap .file-ico { flex: none; width: 20px; height: 20px; color: var(--accent); display: inline-flex; }
.file-wrap .file-ico svg { width: 100%; height: 100%; display: block; }
.file-wrap .file-label { color: var(--accent); font-weight: 600; white-space: nowrap; }
.file-wrap .file-name { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 英文环境字体回退到系统 sans（避免 CJK 字体在拉丁文上变粗） */
[lang="en"] body, [lang="en"] input, [lang="en"] select, [lang="en"] textarea, [lang="en"] button,
[lang="en"] .file-wrap, [lang="en"] .tab, [lang="en"] h1, [lang="en"] h2, [lang="en"] .btn, [lang="en"] label, [lang="en"] .row {
  font-family: var(--font-sans-en);
}

.btn {
  background: var(--accent-2);
  color: var(--on-accent);
  border: none;
  border-radius: var(--r-sm);
  padding: 0 16px;
  min-height: 38px;
  cursor: pointer;
  font-size: 14px;
}
.btn:hover { background: var(--accent-2); }
.btn:disabled { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); cursor: not-allowed; }
.btn.small { padding: 6px 10px; font-size: 12px; }
.btn-danger { background: var(--btn-danger-bg); color: var(--on-danger); font-weight: 500; }
.btn-danger:hover { background: var(--btn-danger-bg-hover); }

.preview { margin-top: 16px; position: relative; display: inline-block; max-width: 100%; }
.preview img, .preview canvas { max-width: 100%; max-height: 60vh; object-fit: contain; border: 1px solid var(--border); border-radius: 0; background:
  repeating-conic-gradient(var(--checker-a) 0% 25%, var(--checker-b) 0% 50%) 50% / 20px 20px; }
#idphoto-canvas-wrap { display: none; } /* 预览区：生成前隐藏，renderPreview 时显示 */
#idphoto-canvas { cursor: grab; touch-action: none; display: block; background: var(--panel-2); }
#idphoto-canvas:active { cursor: grabbing; }
#idphoto-preview-img { position: absolute; left: 0; top: 0; display: none; pointer-events: none; background: var(--panel-2); }
#idphoto-overlay { position: absolute; left: 0; top: 0; pointer-events: none; background: transparent; }
label.mini { font-size: 12px; color: var(--muted); margin-left: 12px; }

/* 证件照大图预览弹窗 */
.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.72); backdrop-filter: blur(2px); }
.modal-box {
  position: relative; z-index: 1; width: min(92vw, 880px); max-height: 94vh;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 18px 60px rgba(0,0,0,0.5);
}
.modal-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--panel-2); }
.modal-title { font-size: 13px; color: var(--muted); }
.modal-tools { display: flex; align-items: center; gap: 8px; }
.modal-tools #idphoto-zoom-pct { font-size: 12px; color: var(--muted); min-width: 46px; text-align: center; }
.modal-stage {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  min-height: 340px; max-height: calc(94vh - 56px);
  background: repeating-conic-gradient(var(--checker-a) 0% 25%, var(--checker-b) 0% 50%) 50% / 22px 22px;
  cursor: grab; touch-action: none;
}
.modal-stage:active { cursor: grabbing; }
.modal-stage img { max-width: none; display: block; transform-origin: center center; user-select: none; -webkit-user-drag: none; }

/* 合规检测面板 */
#idphoto-compliance { margin-top: 10px; font-size: 13px; }
.comp-banner { padding: 6px 10px; border-radius: 4px; font-weight: 600; margin-bottom: 8px; }
.comp-pass { background: var(--ok-soft); color: var(--ok-fg); }
.comp-warn { background: var(--warn-soft); color: var(--warn-fg); }
.comp-fail { background: var(--danger-soft); color: var(--danger-fg-soft); }
.comp-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.comp-list li { display: grid; grid-template-columns: 18px 1fr auto; gap: 6px; align-items: baseline; padding: 5px 10px; border-bottom: 1px solid var(--border); }
.comp-list li:last-child { border-bottom: none; }
.comp-dot { font-size: 13px; }
.comp-ok .comp-dot { color: var(--ok-fg); }
.comp-warn .comp-dot { color: var(--warn-fg); }
.comp-fail .comp-dot { color: var(--danger-fg-soft); }
.comp-label { color: var(--text); }
.comp-val { color: var(--muted); font-variant-numeric: tabular-nums; }
.comp-advice { grid-column: 2 / 4; color: var(--warn-fg); font-size: 12px; margin-top: 2px; }
.comp-self { margin-top: 8px; color: var(--muted); font-size: 12px; }
.comp-self-title { margin-bottom: 4px; }
.comp-tag { display: inline-block; border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; margin: 0 4px 4px 0; }
.comp-note { margin-top: 8px; color: var(--muted); font-size: 12px; border-left: 3px solid var(--accent); padding-left: 8px; }
.preview-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.preview-grid .tile {
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  background: var(--tile-bg);
}
.preview-grid .tile img { width: 100%; display: block; }

.stat { color: var(--muted); font-size: 13px; margin: 8px 0; }
.stat b { color: var(--text); }

.canvas-wrap { position: relative; margin-top: 12px; display: inline-block; }
.canvas-wrap canvas { position: absolute; left: 0; top: 0; }
#wm-image { position: relative !important; }
#wm-mask { cursor: crosshair; }

/* 全局错误横幅：任何脚本运行时错误都可见，不再静默失败 */
#err-banner {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: var(--btn-danger-bg);
  color: var(--on-danger);
  font-size: 13px;
  padding: 10px 16px;
  white-space: pre-wrap;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
#err-banner.show { display: block; }

/* 裁剪状态行：成功/提示/错误用不同颜色 */
#crop-status { min-height: 18px; }
#crop-status.ok { color: var(--ok); }
#crop-status.warn { color: var(--warn); }
#crop-status.err { color: var(--danger); }

/* 拼接：缩略图列表（可一张张添加/删除/排序） */
.thumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.thumb {
  position: relative;
  width: 110px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
}
.thumb-idx {
  position: absolute;
  top: 4px; left: 4px;
  background: var(--accent-2);
  color: #fff;
  font-size: 12px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  padding: 0 5px;
  z-index: 2;
}
.thumb-img {
  width: 100%;
  height: 70px;
  object-fit: contain;
  display: block;
  background: repeating-conic-gradient(var(--checker-a) 0% 25%, var(--checker-b) 0% 50%) 50% / 16px 16px;
  border-radius: 4px;
}
.thumb-bar {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-top: 6px;
}
.thumb-btn {
  flex: 1;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 0;
  cursor: pointer;
  font-size: 13px;
}
.thumb-btn:hover:not(:disabled) { background: var(--accent-2); color: var(--on-accent); }
.thumb-btn:disabled { opacity: .4; cursor: not-allowed; }
.thumb-btn.danger:hover:not(:disabled) { background: var(--btn-danger-bg); color: var(--on-danger); }

/* 模型加载进度条（去背景 / 去水印） */
.progress {
  width: 100%;
  height: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin: 10px 0 4px;
}
.progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 6px;
  transition: width 0.15s ease;
}
.progress-bar.indeterminate {
  width: 40% !important;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  animation: progress-indet 1.1s ease-in-out infinite;
}
@keyframes progress-indet {
  0%   { margin-left: -40%; }
  100% { margin-left: 100%; }
}

/* 证件照美化滤镜 */
.filter-block { border-top: 1px dashed var(--border); margin-top: 8px; padding-top: 8px; }
.filter-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { border: 1px solid var(--border); background: var(--panel-2); color: var(--text); padding: 4px 12px; border-radius: 999px; font-size: 13px; cursor: pointer; line-height: 1.4; }
.chip:hover { background: var(--accent-2); color: var(--on-accent); border-color: var(--accent); }
.chip.active { background: var(--accent-2); color: var(--on-accent); border-color: var(--accent); }
.fv { min-width: 30px; text-align: right; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* 马赛克涂抹层（叠加在预览画布上；默认不拦截指针，进入涂抹模式后可画） */
#idphoto-mosaic { position: absolute; left: 0; top: 0; pointer-events: none; touch-action: none; cursor: crosshair; background: transparent; }
#idphoto-mosaic.painting { pointer-events: auto; }
#idphoto-mosaic-paint.active { background: var(--accent-2); color: var(--on-accent); border-color: var(--accent); }

/* EXIF 信息面板（隐私展示） */
.exif-box-wrap { margin-top: 8px; font-size: 12px; }
.exif-box { background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; display: inline-block; max-width: 100%; }
.exif-box .exif-title { color: var(--muted); margin-bottom: 4px; }
.exif-row { display: flex; gap: 10px; justify-content: space-between; line-height: 1.7; }
.exif-row span { color: var(--muted); }
.exif-row b { color: var(--text); font-weight: 500; }
.exif-none { color: var(--muted); font-size: 12px; }

/* ---- 上线前重构（审计修复）：主 Tab / 隐私徽章 / 分区折叠 / 子 Tab / 隔离横幅 ---- */

/* 锚点产品 Tab：置顶高亮 */
.tab-main { font-weight: 700; border: 1px solid var(--accent); background: rgba(77,140,255,.12); }
.tab-main.active { background: var(--accent-2); border-color: var(--accent); }
.tab-main:not(.active):hover { background: var(--accent-soft); color: var(--accent); }

/* ===== 证件照面板：三段卡片分区 =====
   此前所有控件是 .row 直接平铺，无容器、无层次，一屏下来是"表单墙"。
   改为「上传 → 规格底色 → 生成预览」三段卡片：每段带序号圆点 + 标题条，
   流程一眼可见，移动端纵向堆叠也自然。 */
.idp-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin: 12px 0;
  overflow: hidden;
}
.idp-card-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
}
.idp-step {
  flex: 0 0 auto;
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; line-height: 1;
  background: var(--accent-2); color: var(--on-accent);
}
.idp-card-title { font-size: 13px; font-weight: 500; color: var(--text); }
.idp-card-body { padding: 14px; }
/* 卡片内首尾 .row 的外边距交给卡片 padding 统一控制，避免首行空一截、末行贴边 */
.idp-card-body .row:first-child { margin-top: 0; }
.idp-card-body .row:last-child { margin-bottom: 0; }
.idp-card-body .preview { margin-top: 12px; }

/* 信任标签行：替代原 emoji 徽章（🔒✓🌍💰）—— emoji 渲染依赖系统字体、风格不统一，
   且"照片不出本机"这句与首屏介绍、面板 hint 重复了三遍。改为无图标小圆点 + 短词。 */
.idp-trust {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 10px; font-size: 12px; color: var(--muted);
}
.idp-trust span { display: inline-flex; align-items: center; gap: 6px; }
.idp-trust span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ok); flex: 0 0 auto;
}

/* 参数行下方的短提示：原 .hint-inline 与控件同排，行尾碎字显得杂乱，改为独占一行 */
.idp-note { margin: -4px 0 10px; font-size: 12px; color: var(--muted); }

/* 分区折叠（details） */
.idp-details {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  margin: 10px 0; padding: 0 14px; overflow: hidden;
}
.idp-details summary {
  cursor: pointer; padding: 11px 0; font-size: 14px; font-weight: 500; color: var(--summary-fg);
  list-style: none; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.idp-details summary::-webkit-details-marker { display: none; }
.idp-details summary::before { content: "▸"; color: var(--accent); font-size: 12px; transition: transform .15s; }
.idp-details[open] summary::before { transform: rotate(90deg); }
.idp-details summary .d-hint { font-weight: 400; color: var(--muted); font-size: 12px; }
.idp-details[open] { padding-bottom: 12px; }

/* ===== 页脚上方「关于本站 · 常见问题」折叠区 =====
   首屏那 100+ 字介绍文案下移至此。内容写在 HTML 里（非 JS 注入），
   Google 对 <details> 折叠内容同样完整索引，SEO 不受影响；页面同时提供了
   与 head 内 JSON-LD FAQPage 一一对应的可见问答，便于搜索与 AI 引用。 */
.about-site {
  margin: 24px 0 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel);
  overflow: hidden;
}
.about-site summary {
  cursor: pointer; padding: 12px 16px;
  font-size: 13px; font-weight: 500; color: var(--summary-fg);
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.about-site summary::-webkit-details-marker { display: none; }
.about-site summary::before {
  content: "▸"; color: var(--accent); font-size: 12px; transition: transform .15s;
}
.about-site[open] summary::before { transform: rotate(90deg); }
.about-site[open] summary { border-bottom: 1px solid var(--border); }
.about-body { padding: 14px 16px 16px; }
.about-site p { margin: 0 0 14px; font-size: 13px; line-height: 1.7; color: var(--text-2); }
.faq-list { margin: 0; }
.faq-list dt { font-size: 13px; font-weight: 500; color: var(--text); margin-top: 12px; }
.faq-list dt:first-child { margin-top: 0; }
.faq-list dd { margin: 4px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--muted); }

/* 高级区子 Tab */
.idp-subtabs { display: flex; gap: 6px; margin: 4px 0 10px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.istab {
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 14px; cursor: pointer; font-size: 13px;
}
.istab.active { background: var(--accent-2); color: var(--on-accent); border-color: var(--accent); }
.idp-sub { display: none; }
.idp-sub.active { display: block; }

/* file:// 隔离引导横幅 */
#isolate-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9998;
  background: var(--banner-bg); color: var(--banner-fg); font-size: 13px; padding: 10px 16px;
  border-bottom: 1px solid var(--banner-border); box-shadow: 0 2px 10px rgba(0,0,0,.35);
  line-height: 1.7;
}
#isolate-banner b { color: var(--banner-fg); font-weight: 500; }
#isolate-banner code { background: var(--banner-code-bg); padding: 1px 6px; border-radius: 4px; }
#isolate-banner .ib-close {
  float: right; background: transparent; color: var(--banner-fg); border: 1px solid var(--banner-border);
  border-radius: 6px; padding: 2px 10px; cursor: pointer; font-size: 12px; margin-left: 10px;
}
#isolate-banner .ib-close:hover { background: var(--banner-code-bg); }

/* ---- 响应式：≤840 移动端双形态 ----
   topbar 保留在顶部（只放 H1 + 主题/语言），7 个工具移到底部 tab bar：
   常用 5 个 + 「更多」共 6 项（图标 + 文字都要显示），
   长图裁剪 / 格式转换收纳进「更多」，点开从底栏上方浮出。 */
@media (max-width: 840px) {
  .shell { padding-top: 52px; }
  .topbar {
    height: 52px;
    padding: 0 10px; gap: 10px;
  }
  .topbar h1 { font-size: 14px; }

  /* .tabs 脱离 topbar、改为固定底栏（position: fixed 后不再参与 topbar flex） */
  .tabs {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0;
    width: auto; height: auto;
    display: flex; flex-direction: row; align-items: stretch;
    gap: 2px;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: var(--panel);
    border-top: 1px solid var(--border);
    overflow: visible;                       /* 底栏不需要横滑：6 项均分宽度 */
    z-index: 60;
  }
  /* 底栏 6 项均分：5 个常用工具 + 「更多」 */
  .tab, .tab-more {
    flex: 1 1 0; min-width: 0;
    flex-direction: column; gap: 3px;
    justify-content: center; align-items: center; text-align: center;
    padding: 5px 2px;
    font-size: 11px; line-height: 1.15;
    background: transparent; color: var(--muted);   /* 透到底栏 --panel，跟其他 5 项一致；之前缺这一行导致「更多」亮成系统灰白 */
    border: none; border-radius: 10px;
  }
  .tab .ico, .tab-more .ico { font-size: 19px; }
  .tab .lbl, .tab-more .lbl {
    font-size: 11px; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis;
  }
  .tab.active { box-shadow: none; }
  .tab.active, .tab-more[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }

  .tab-more { display: flex; }               /* 仅移动端出现 */

  /* 收纳区：底栏上方浮出（PC 端的 display:contents 在此覆盖） */
  .more-sheet {
    display: none;
    position: fixed;
    left: 8px; right: 8px;
    bottom: calc(64px + env(safe-area-inset-bottom));
    flex-direction: column; gap: 2px;
    padding: 6px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-2);
    z-index: 70;
  }
  .more-sheet.open { display: flex; }
  /* 浮层内恢复横向排布（图标 + 完整文字），比底栏的竖排更好点 */
  .more-sheet .tab {
    flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 10px;
    padding: 11px 14px; font-size: 14px; border-radius: var(--r-sm);
  }
  .more-sheet .tab .lbl { font-size: 14px; }

  .content {
    padding: 16px 12px calc(84px + env(safe-area-inset-bottom));  /* 底部给 tab bar 留位 */
    max-width: 100%;
  }
  .site-footer {
    padding: 4px 12px calc(84px + env(safe-area-inset-bottom));
  }
  /* 卡片在移动端收紧内距，别让边框占掉本就不多的宽度 */
  .idp-card { margin: 10px 0; }
  .idp-card-head { padding: 9px 12px; }
  .idp-card-body { padding: 12px; }
  .about-site { margin-top: 20px; }
}

/* ---- 进一步收窄：≤560 底栏 6 项仍要「图标 + 文字」，只能缩字号（不能隐藏文字） ---- */
@media (max-width: 560px) {
  .topbar h1 { font-size: 13px; }
  .tab, .tab-more { padding: 5px 1px; }
  .tab .lbl, .tab-more .lbl { font-size: 10px; }
  .tab .ico, .tab-more .ico { font-size: 18px; }
  .topbar-actions .topbar-chip { padding: 4px 8px; font-size: 12px; }
  /* chip 内的「浅色 / 深色 / English / 中文」文字也已省略即可由图例 dot + 短词替代 */
  .topbar-actions .theme-label { display: none; }
  .topbar-actions .topbar-chip[data-lang] .lbl { display: inline; }  /* 语言 chip 保留短词 */
}

@media (max-width: 640px) {
  .topbar { padding: 0 10px; }
  .topbar h1 { font-size: 14px; }
  .content { padding: 16px 12px 32px; }
  .panel h2 { font-size: 16px; }
  .hint { font-size: 12px; }
  .row { flex-direction: column; align-items: stretch; gap: 8px; margin: 10px 0; }
  .row label { font-size: 12px; }
  .row > input[type="range"], .row > input[type="number"], .row > select, .row > input[type="text"], .row > input[type="color"] { width: 100%; }
  .row > input[type="file"] { width: 100%; }
  .btn { width: 100%; text-align: center; }
  .btn.small { width: auto; }
  .idp-trust { gap: 5px 12px; font-size: 11px; }
  .idp-details { padding: 0 10px; }
  .idp-details[open] { padding-bottom: 10px; }
  .idp-details summary { font-size: 13px; }
  .idp-subtabs { flex-wrap: wrap; }
  .preview, .preview-grid { max-width: 100%; }
  .filter-presets { gap: 4px; }
  .chip { font-size: 12px; padding: 3px 10px; }
  .fv { min-width: 24px; }
  .thumb { width: 96px; }
  .modal-box { width: 96vw; }
}

/* ===== 交互增强（浅色优先 + 深色可切）：可访问性 · 触控目标 · 拖拽上传 · 主题切换 ===== */

/* 键盘可访问性：此前完全没有焦点样式，用 Tab 键操作看不出落点在哪 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.tab:focus-visible, .istab:focus-visible, .chip:focus-visible, .btn:focus-visible, .thumb-btn:focus-visible {
  outline-offset: -2px;
}

/* 尊重系统「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* topbar 右上操作区：主题切换 + 语言切换并排（原先语言切换器是 JS 注入的
   行内样式，写死深色配色，换主题后会穿帮；改为统一类名，由 CSS 控制）。
   改前是 absolute 定位（适配左侧 272 窄列）；改为顶部通栏后改为 flow flex，
   让 .topbar-actions 自然贴到 .tabs 右侧。 */
.topbar-actions {
  position: static;
  display: flex; align-items: center; gap: 6px;
  flex: 0 0 auto; margin-left: auto;   /* 推到 topbar 最右 */
}
.topbar-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 30px; height: 32px; padding: 0 12px;
  font-size: 13px; line-height: 1; white-space: nowrap;
  color: var(--text-2); background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--r-full);
  cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.topbar-chip:hover { background: var(--panel-2); color: var(--text); border-color: var(--border-strong); }

/* 移动端顶栏 chip 触控目标 ≥44×44。
   必须在基础 .topbar-chip 之后定义（源序覆盖），且用 .topbar-actions .topbar-chip
   才能在特异度上压过 line 720 那条 .topbar-actions .topbar-chip { padding: 4px 8px }。 */
@media (max-width: 840px) {
  .topbar-actions .topbar-chip { min-height: 44px; min-width: 44px; padding: 0 14px; }
}
/* 主题图标：浅色态画月牙（点了去深色），深色态画实心圆（点了回浅色）—— 不用 emoji */
.theme-dot {
  width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: inset -4px 0 0 0 currentColor;
}
[data-theme="dark"] .theme-dot { box-shadow: none; background: currentColor; }
.theme-label { font-size: 13px; }

/* 拖拽上传：虚线框 + 悬停高亮，给出明确的投放反馈 */
.file-wrap { transition: border-color .15s, background .15s; }
.file-wrap.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* 表单控件：浅色主题下需要更明确的边界，否则白底上看不出输入区在哪 */
select, input[type="number"], input[type="text"] {
  min-height: 34px;
  font-family: inherit;
}

/* 数值统一等宽对齐（体积/尺寸/百分比跳动时不会左右晃） */
.stat, .comp-val, .exif-row b, .fv { font-variant-numeric: tabular-nums; }

/* 移动端：触控目标与 iOS 输入缩放
   关键：iOS Safari 对 font-size < 16px 的输入框会自动放大整个页面且不会自动缩回，
   这是移动端最常被吐槽的「点一下输入框页面就变大了」。 */
@media (max-width: 840px) {
  .tab { min-height: 50px; }
  .tab .lbl { font-size: 11px; max-width: 72px; }
  .btn { min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; }
  .btn.small { min-height: var(--tap); }
  select, input[type="number"], input[type="text"] {
    min-height: var(--tap);
    font-size: 16px;   /* 必须 ≥16px，否则 iOS 会自动缩放页面 */
  }
  .chip { min-height: var(--tap); padding: 6px 14px; }
  .istab { min-height: var(--tap); }
  .thumb-btn { min-height: 34px; }
  .idp-details summary { padding: 14px 0; }
  /* 底部导航更高，配合 Home 指示条安全区 */
  .tabs { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}

/* 焦点落到输入框时不要被底部导航遮住 */
@media (max-width: 840px) {
  .content { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}