/* ============================================================
   证件照工坊 · 设计系统
   极简 + 精致：暖中性底、单一强调色、克制的圆角与阴影
   ============================================================ */

:root {
  /* 浅色：比原来更暖、更灰一点，减少刺眼感（纯白 #fff 在很多屏幕上太扎眼） */
  --bg: #efeeea;
  --surface: #fbfaf7;
  --surface-2: #f4f3ef;
  --ink: #1a1c20;
  --ink-2: #5c626b;
  --ink-3: #8d939d;
  --line: #e2e1dc;
  --line-2: #d3d2cb;
  --stage-bg: #e4e5e6;
  --accent: #2f5fe0;
  --accent-soft: #e9eefb;

  /* 压在 --ink 上的文字色。深色模式下 --ink 会变成浅色，所以不能写死白色 */
  --on-ink: #ffffff;
  --hover-strong: #000000;

  /* 浮层与阴影 */
  --scrim: rgba(20, 22, 26, .42);
  --shade: 18, 20, 24;
  --sh-1: 0 1px 2px rgba(var(--shade), .05);
  --sh-2: 0 1px 3px rgba(var(--shade), .05), 0 12px 30px -16px rgba(var(--shade), .22);
  --sh-3: 0 2px 6px rgba(var(--shade), .06), 0 24px 60px -28px rgba(var(--shade), .30);
  --ring: 0 0 0 3px rgba(47, 95, 224, .15);

  /* 玻璃拟态顶栏 */
  --bar-bg: rgba(251, 250, 247, .82);
  --busy-bg: rgba(239, 238, 234, .74);

  /* 提示条（琥珀）*/
  --warn-bg: #fdf6e9;
  --warn-line: #f0dcb4;
  --warn-ink: #7a4d05;
  --warn-ink-2: #97712f;
  --warn-dot: #c8860d;
  --warn-text: #a8580f;

  /* toast */
  --toast-bg: rgba(26, 28, 32, .95);
  --toast-ink: #ffffff;

  --r-xl: 20px;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 9px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --t: 180ms var(--ease);

  --shell: 1120px;
}

/* 深色：跟随系统。照片工具的中性底很重要，所以用中性偏冷的深灰，
   不用纯黑 —— 纯黑会让照片边缘看起来在发光 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1c1f;
    --surface: #26262a;
    --surface-2: #2e2e33;
    --ink: #e9e9e7;
    --ink-2: #a6a6a3;
    --ink-3: #7a7a7f;
    --line: #34343a;
    --line-2: #43434b;
    --stage-bg: #212125;
    --accent: #7c9cff;
    --accent-soft: #262b3d;

    --on-ink: #17171a;
    --hover-strong: #ffffff;

    --scrim: rgba(0, 0, 0, .58);
    --shade: 0, 0, 0;
    --sh-1: 0 1px 2px rgba(0, 0, 0, .3);
    --sh-2: 0 1px 3px rgba(0, 0, 0, .3), 0 12px 30px -16px rgba(0, 0, 0, .6);
    --sh-3: 0 2px 6px rgba(0, 0, 0, .35), 0 24px 60px -28px rgba(0, 0, 0, .7);
    --ring: 0 0 0 3px rgba(124, 156, 255, .28);

    --bar-bg: rgba(28, 28, 31, .82);
    --busy-bg: rgba(28, 28, 31, .74);

    --warn-bg: #322a18;
    --warn-line: #4d3f22;
    --warn-ink: #f0cf8e;
    --warn-ink-2: #c9ab72;
    --warn-dot: #b8862a;
    --warn-text: #e0b567;

    --toast-bg: rgba(240, 240, 238, .95);
    --toast-ink: #17171a;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 520px at 50% -8%, var(--surface) 0%, rgba(var(--shade), 0) 62%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }

/* 视觉隐藏但保留渲染 —— 给文件输入用。
   用 display:none 的话，iOS Safari 和微信浏览器可能拒绝弹出选择器。 */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

h1, h2, h3, p, dl, dd, dt, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button, input, label { font: inherit; color: inherit; }
kbd {
  font: inherit; font-size: 12px; padding: 1px 5px; border-radius: 5px;
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-2);
}

/* ---------------- 顶栏 ---------------- */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--bar-bg);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: var(--shell); margin: 0 auto;
  padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark { color: var(--ink); display: flex; }
.brand-mark svg { border-radius: 9px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-text strong { font-size: 15.5px; letter-spacing: .2px; }
.brand-text small { color: var(--ink-3); font-size: 12px; letter-spacing: .2px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }


/* ---------------- 布局 ---------------- */

.shell {
  max-width: var(--shell); margin: 0 auto;
  padding: 40px 24px 64px;
}

.footer {
  max-width: var(--shell); margin: 0 auto;
  padding: 0 24px 48px;
  color: var(--ink-3); font-size: 12.5px;
  border-top: 1px solid transparent;
}
.footer p { max-width: 640px; }

/* ---------------- 卡片 / 按钮 ---------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), transform var(--t), box-shadow var(--t), color var(--t);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--surface-2); border-color: #cdcdc7; }
.btn:active { transform: scale(.982); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

.btn.primary {
  background: var(--ink); border-color: var(--ink); color: var(--on-ink);
  box-shadow: 0 1px 2px rgba(var(--shade), .18);
}
.btn.primary:hover { background: var(--hover-strong); border-color: var(--hover-strong); }

.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--line); color: var(--ink); }

/* 语言切换：做成小药丸（有边、有底），看起来是「一个标签」而不是
   主流程里的操作按钮 —— 免得跟「换一张」抢注意力。 */
.btn.lang-btn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2px;
  white-space: nowrap;
  box-shadow: var(--sh-1);
}
.btn.lang-btn:hover {
  background: var(--surface);
  border-color: var(--line-2);
  color: var(--ink);
}
.btn.lang-btn:active { transform: translateY(1px); }

.btn.small { padding: 7px 12px; font-size: 13px; border-radius: var(--r-sm); }
.btn.wide { width: 100%; }
.btn + .btn.wide { margin-top: 8px; }

/* ---------------- 开始页 ---------------- */

.hero { text-align: center; margin: 12px auto 32px; max-width: 620px; }
.hero h1 {
  font-size: clamp(26px, 4.4vw, 38px);
  line-height: 1.22; letter-spacing: -0.02em; font-weight: 600;
  margin-bottom: 12px;
}
.hero p { color: var(--ink-2); font-size: 15px; }

.dropcard { padding: 22px; box-shadow: var(--sh-2); }

.dropzone {
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  padding: 44px 24px 34px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.dropzone:hover, .dropzone:focus-visible {
  border-color: var(--line-2);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  outline: none;
}
.dropzone.is-over {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: scale(1.004);
}
.dz-icon { color: var(--ink-3); margin-bottom: 10px; }
.dropzone.is-over .dz-icon { color: var(--accent); }
.dz-title { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.dz-sub { color: var(--ink-3); font-size: 13.5px; margin-top: 4px; }
.dz-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.dz-note { color: var(--ink-3); font-size: 12.5px; margin-top: 18px; }

/* 拍摄指引：把「哪种照片能用」说在用户上传之前 */
.guidance {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 18px;
}
.guide-col {
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.guide-col h3 {
  font-size: 12.5px; font-weight: 600; letter-spacing: .2px;
  margin-bottom: 8px; display: flex; align-items: center; gap: 7px;
}
.guide-col h3::before {
  content: ''; width: 15px; height: 15px; flex: 0 0 auto;
  border-radius: 50%;
}
.guide-col.ok h3 { color: #2f7d52; }
.guide-col.ok h3::before {
  background: #2f7d52 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.4 4.8 8.8 9.6 3.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.guide-col.no h3 { color: #a8700f; }
.guide-col.no h3::before {
  background: #c8860d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.4 3.4 8.6 8.6M8.6 3.4 3.4 8.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.guide-col ul { display: flex; flex-direction: column; gap: 5px; }
.guide-col li {
  font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
  padding-left: 13px; position: relative;
}
.guide-col li::before {
  content: ''; position: absolute; left: 2px; top: 8px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--line-2);
}

.features {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4px; margin-top: 20px;
}
.features li {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
}
.features b { font-size: 13.5px; font-weight: 600; }
.features span { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

/* ---------------- 编辑器 ---------------- */

.editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 366px;
  gap: 22px;
  align-items: start;
}

.stage {
  padding: 18px;
  box-shadow: var(--sh-2);
  position: sticky; top: 84px;
}

.stage-canvas {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 300px;
  padding: 22px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(var(--shade), .04), rgba(var(--shade), 0)),
    var(--stage-bg);
  overflow: hidden;
}
#stage {
  display: block;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(var(--shade), .12), 0 18px 40px -18px rgba(var(--shade), .4);
  cursor: grab;
  touch-action: none;
  background: var(--surface);
}
#stage.is-dragging { cursor: grabbing; }



input[type="range"] {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 22px; background: transparent; cursor: pointer; min-width: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 3px; border-radius: 999px; background: var(--line-2);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; margin-top: -6px;
  border-radius: 50%; background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: 0 1px 3px rgba(var(--shade), .22);
  transition: transform var(--t);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.08); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(.96); }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring); }
input[type="range"]::-moz-range-track { height: 3px; border-radius: 999px; background: var(--line-2); }
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--surface);
  border: 1px solid var(--line-2); box-shadow: 0 1px 3px rgba(var(--shade), .22);
}

.switch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.switch input { accent-color: var(--ink); width: 15px; height: 15px; margin: 0; cursor: pointer; }

.stage-hint {
  font-size: 12.5px; color: var(--ink-3);
  padding: 10px 4px 0;
  border-top: 1px solid var(--line);
  margin-top: 12px;
  min-height: 20px;
}
.stage-hint b { color: var(--ink-2); font-weight: 500; }

/* 提示条：常驻在预览下方，比一闪而过的 toast 更该被看到 */
.notice {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 12px;
  padding: 12px 13px;
  border-radius: var(--r-md);
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  animation: fade .22s var(--ease);
}
.notice-mark {
  flex: 0 0 auto;
  width: 18px; height: 18px; margin-top: 1px;
  border-radius: 50%;
  background: var(--warn-dot); color: var(--on-ink);
  font-size: 12px; font-weight: 700; line-height: 18px; text-align: center;
}
.notice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.notice-text { font-size: 13px; color: var(--warn-ink); font-weight: 500; line-height: 1.5; }
.notice-help { font-size: 12px; color: var(--warn-ink-2); line-height: 1.55; }
.notice .btn {
  flex: 0 0 auto; align-self: center;
  background: var(--surface); border-color: var(--warn-line);
}
.notice .btn:hover { background: var(--warn-bg); border-color: var(--warn-dot); }

/* 忙碌遮罩 */
.busy {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--busy-bg);
  backdrop-filter: blur(3px);
  font-size: 13.5px; color: var(--ink-2);
  animation: fade .2s var(--ease);
}
.spinner {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid var(--line-2);
  border-top-color: var(--ink);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------------- 右侧面板 ---------------- */

.panel { display: flex; flex-direction: column; gap: 14px; }

.block { padding: 16px 16px 18px; }
.block:not(:has(.block-title)) { padding-top: 18px; }
.block-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: .3px;
  color: var(--ink); margin-bottom: 12px;
}
.block-note { font-size: 11.5px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }

/* 规格片 */
.chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

/* 规格库跨多国之后按国家分组。
   注意：#specChips 用的是 .chip-groups 而不是 .chips ——
   它装的是「组」，组里才装「卡片」。沿用 .chips 会让 6 个国家各占一格，
   每组被压到 160px，规格名竖着排成一个个单字。 */
.chip-groups { display: flex; flex-direction: column; gap: 14px; }
/* 只有一档的国家（美/英/申根/加/澳）让卡片撑满整行：
   留着右半边空会让人以为「这里还少一张」，看着像没加载出来。 */
.chip-group .chips > .chip:only-child { grid-column: 1 / -1; }
.chip-group-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .3px;
  color: var(--ink-3); margin-bottom: 7px;
}
.chip {
  text-align: left;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t), background var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}
.chip:hover { border-color: var(--line-2); transform: translateY(-1px); box-shadow: var(--sh-1); }
.chip:active { transform: translateY(0) scale(.99); }
.chip:focus-visible { outline: none; box-shadow: var(--ring); }
.chip b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: .1px; }
.chip small { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.chip-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.chip-size { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--on-ink);
  box-shadow: 0 6px 16px -10px rgba(var(--shade), .7);
}
.chip[aria-pressed="true"] small, .chip[aria-pressed="true"] .chip-size { color: color-mix(in srgb, var(--on-ink) 62%, transparent); }

/* 未复核规格的角标：只是个提醒，不能抢了规格名本身的注意力 */
.chip-unverified {
  color: var(--warn-dot);
  font-size: 10px;
  margin-left: 3px;
  vertical-align: super;
}
.chip[aria-pressed="true"] .chip-unverified { color: var(--warn-line); }

/* 底色 */
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch {
  width: 46px; padding: 0; border: none; background: none;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: pointer;
}
.swatch-dot {
  position: relative;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line-2);
  box-shadow: inset 0 0 0 1px rgba(var(--shade), .12);
  transition: box-shadow var(--t), transform var(--t);
  overflow: hidden;
}
.swatch:hover .swatch-dot { transform: scale(1.06); }
.swatch[aria-pressed="true"] .swatch-dot {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink);
}
.swatch-dot .keep-mark {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, var(--line-2) 0 5px, var(--surface-2) 5px 10px);
}
.swatch-name { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.swatch[aria-pressed="true"] .swatch-name { color: var(--ink); font-weight: 500; }

/* 折叠微调 */
.adv { padding: 0; overflow: hidden; }
.adv summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 16px;
  font-size: 13px; font-weight: 600; letter-spacing: .3px;
  cursor: pointer; list-style: none;
}
.adv summary::-webkit-details-marker { display: none; }
.adv summary:focus-visible { outline: none; box-shadow: var(--ring); }
.adv .chev { color: var(--ink-3); transition: transform var(--t); }
.adv[open] .chev { transform: rotate(180deg); }
.adv-body { padding: 0 16px 18px; display: flex; flex-direction: column; gap: 16px; }
.slider { display: flex; flex-direction: column; gap: 5px; }
.slider-head { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-2); }
.slider-head b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.slider-help { font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }
.matte-status { font-size: 12px; color: var(--ink-2); padding-top: 4px; }
.matte-status.warn { color: var(--warn-text); }

/* 导出 */

.export-info {
  display: grid; grid-template-columns: auto 1fr; gap: 5px 12px;
  font-size: 12.5px; margin-bottom: 14px;
}
.export-info dt { color: var(--ink-3); }
.export-info dd { color: var(--ink); font-variant-numeric: tabular-nums; }
.export-info dd.val-warn { color: var(--warn-text); }
.export-note { font-size: 11.5px; color: var(--ink-3); margin-top: 12px; line-height: 1.5; }


/* ---------------- 云端 AI 精修 ---------------- */


.token-row {
  display: flex; gap: 8px; margin-top: 10px;
}
.token-row input {
  flex: 1; min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  transition: border-color var(--t), box-shadow var(--t);
}
.token-row input:focus {
  outline: none; border-color: var(--ink); box-shadow: var(--ring);
}


/* ---------------- 成品预览（长按存相册） ---------------- */

.result {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px; padding: 28px 20px;
  background: var(--scrim);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade .2s var(--ease);
}
.result-body {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  max-height: 100%; min-height: 0;
}
/* 图片必须有白边和阴影 —— 看起来像一张照片，用户才知道可以长按 */
.result-body img {
  display: block;
  max-width: min(88vw, 460px);
  max-height: 62vh;
  border-radius: 6px;
  background: #fff;
  padding: 8px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6);
  -webkit-touch-callout: default;   /* 允许长按弹出系统菜单 */
  user-select: auto;
}
.result-hint {
  font-size: 13.5px; color: #fff; opacity: .92;
  text-align: center; line-height: 1.6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.result-close {
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(255, 255, 255, .16);
  color: #fff; font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t);
}
.result-close:hover { background: rgba(255, 255, 255, .28); }

/* ---------------- 同意弹窗 ---------------- */

.modal {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fade .18s var(--ease);
}
.modal-card {
  width: min(100%, 460px);
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  padding: 24px;
  animation: modal-in .22s var(--ease);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; }
}
.modal-card h3 {
  font-size: 16.5px; font-weight: 600; letter-spacing: -.01em;
  margin-bottom: 10px;
}
.modal-card p { font-size: 13.5px; color: var(--ink-2); margin-bottom: 12px; }
.modal-card ul { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.modal-card li {
  font-size: 12.5px; color: var(--ink-2); line-height: 1.55;
  padding-left: 14px; position: relative;
}
.modal-card li::before {
  content: ''; position: absolute; left: 3px; top: 7px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--line-2);
}
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------------- 提示 / 自检 ---------------- */

.toast {
  position: fixed; left: 50%; bottom: 34px; z-index: 60;
  transform: translate(-50%, 12px);
  padding: 10px 18px;
  background: var(--toast-bg);
  color: var(--toast-ink); font-size: 13.5px;
  border-radius: 999px;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5);
  animation: toast-in 240ms var(--ease) forwards;
  max-width: min(90vw, 460px);
  text-align: center;
}
.toast.warn { background: var(--warn-dot); color: var(--on-ink); }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.selftest { margin-top: 22px; padding: 18px; }
.selftest pre {
  margin: 0; font-size: 12px; line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap; color: var(--ink-2);
}

/* ---------------- 响应式 ---------------- */

@media (max-width: 960px) {
  .editor { grid-template-columns: minmax(0, 1fr); }
  .stage { position: static; }
  .features, .guidance { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  /* 触控目标放大到 44px 左右：手机上手指比鼠标粗得多，
     原来的 37px 按钮和 15px 复选框点起来很别扭 */
  .btn.small { padding: 11px 14px; font-size: 13.5px; }
  input[type="range"] { height: 34px; }
  input[type="range"]::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -9px; }
  .adv summary { padding: 17px 16px; }

  .shell { padding: 26px 14px 48px; }
  .topbar-inner { padding: 10px 14px; }
  .brand-text small { display: none; }
  /* 手机上把语言按钮垫高到 40px 以上：它是常驻按钮，
     手指按不准就会连点两下，语言切两次等于没切 */
  .btn.lang-btn { padding: 9px 14px; }
  .hero h1 { font-size: 25px; }
  .dropzone { padding: 34px 16px 26px; }
  .card { border-radius: var(--r-lg); }
  .chips { grid-template-columns: repeat(2, 1fr); }
  .footer { padding: 0 14px 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}