/* 夸夸ta ——「一册文人杂志」
   玄墨 / 宣纸 / 朱砂 三色体系 · 宋体骨架 · 编辑部排版 · 克制的动效
   移动优先；桌面居中 560px */

:root {
  /* 宣纸 */
  --paper: #f4eee1;
  --paper-2: #ece4d1;
  --card: #fffcf5;
  --hairline: #e4dac4;
  /* 墨 */
  --ink: #26211a;
  --ink-2: #5f574a;
  --ink-3: #9a8f7b;
  --ink-4: #c8bda6;
  /* 玄墨（深墨绿，庄重底色） */
  --mo: #232f2a;
  --mo-deep: #1a2420;
  --mo-cream: #f0e8d4;
  /* 朱砂（唯一的动作色，用得越少越贵） */
  --zhu: #b23c2b;
  --zhu-deep: #96301f;
  --zhu-soft: #f7e9e4;
  --zhu-line: #e6c9bf;
  /* 泥金（亮点） */
  --gold: #9c7418;
  --marker: #f0dc9e;
  --marker-soft: #faf4e2;
  --gold-line: #e5d7ac;
  /* 苔（完成/下一步） */
  --moss: #45684f;
  --moss-soft: #edf2ec;
  --serif: "Songti SC", "Noto Serif SC", "STSong", "SimSun", serif;
  --sans: -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html { height: 100%; }
body {
  min-height: 100%;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  background:
    radial-gradient(1100px 500px at 50% -80px, #faf5ea 0%, transparent 65%),
    var(--paper);
}

#app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) 26px calc(28px + env(safe-area-inset-bottom));
}

.view { display: none; flex-direction: column; flex: 1; animation: pagein .38s cubic-bezier(.22,.8,.36,1); }
.view.active { display: flex; }
@keyframes pagein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ── 通用 ─────────────────────────── */

.topbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 0 12px; }
.back-btn {
  background: none; border: none; cursor: pointer;
  font-family: var(--serif); font-size: 15px; color: var(--ink-2); letter-spacing: 2px;
  padding: 6px 12px 6px 0;
}
.back-btn:active { opacity: .45; }

.btn-primary {
  display: block; width: 100%; border: none; cursor: pointer;
  background: var(--zhu);
  color: #fdf6ea; font-family: var(--sans);
  font-size: 16px; font-weight: 600; letter-spacing: 6px; text-indent: 6px;
  padding: 17px; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(150,48,31,.2), 0 10px 26px rgba(150,48,31,.22);
  transition: transform .16s cubic-bezier(.34,1.56,.64,1), background .16s;
}
.btn-primary:active { transform: scale(.977); background: var(--zhu-deep); }
.btn-primary:disabled { background: #c9bfa9; box-shadow: none; letter-spacing: 2px; text-indent: 2px; cursor: default; }

.btn-ghost {
  display: block; width: 100%; cursor: pointer; background: none;
  border: 1px solid var(--ink-4); color: var(--ink-2);
  font-family: var(--serif); font-size: 15px; letter-spacing: 4px; text-indent: 4px;
  padding: 13px; border-radius: 14px;
}
.btn-ghost:active { background: var(--paper-2); }

.sub { font-size: 13px; color: var(--ink-3); }

/* 朱砂印章 */
.seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 9px; flex: none;
  background: var(--zhu);
  color: #fdf3e6; font-family: var(--serif); font-size: 27px; font-weight: 700;
  box-shadow: inset 0 0 0 1.5px rgba(253, 243, 230, .4), 0 4px 12px rgba(150, 48, 31, .28);
  transform: rotate(-2.5deg);
}

/* ── 首页 ─────────────────────────── */

.home-head { display: flex; justify-content: space-between; align-items: stretch; padding: 34px 0 30px; }
.brand { display: flex; align-items: center; gap: 15px; }
.brand-name { font-family: var(--serif); font-size: 33px; font-weight: 700; letter-spacing: 6px; line-height: 1; }
.brand-sub { margin-top: 9px; font-size: 11px; color: var(--ink-3); letter-spacing: 5px; }
/* 竖排口号 */
.v-slogan {
  writing-mode: vertical-rl;
  font-family: var(--serif); font-size: 12px; color: var(--ink-3);
  letter-spacing: 6px; line-height: 1;
  border-left: 1px solid var(--hairline); padding-left: 12px; margin: 2px 0;
}

/* Hero：玄墨扉页 */
.hero-cta {
  position: relative; display: block; width: 100%; text-align: left;
  border: none; cursor: pointer; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, transparent, transparent 26px, rgba(240, 232, 212, .05) 26px, rgba(240, 232, 212, .05) 27px),
    linear-gradient(168deg, #2a3833, var(--mo) 55%, var(--mo-deep));
  border-radius: 22px; padding: 34px 28px 30px;
  box-shadow: 0 2px 6px rgba(26, 36, 32, .18), 0 18px 44px rgba(26, 36, 32, .26);
  margin-bottom: 38px;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.hero-cta:active { transform: scale(.98); }
.hero-kicker {
  font-size: 11px; color: rgba(240, 232, 212, .6); letter-spacing: 5px; margin-bottom: 14px;
}
.hero-title {
  font-family: var(--serif); font-size: 30px; font-weight: 700; letter-spacing: 3px;
  line-height: 1.55; color: var(--mo-cream);
}
.hero-sub {
  margin-top: 14px; font-size: 13px; color: rgba(240, 232, 212, .66);
  line-height: 2.1; letter-spacing: 1.5px;
}
.hero-go {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 24px;
  background: var(--zhu); color: #fdf6ea;
  font-size: 14px; font-weight: 600; letter-spacing: 3px; text-indent: 3px;
  border-radius: 999px; padding: 12px 26px;
  box-shadow: 0 8px 20px rgba(150, 48, 31, .38);
}
.hero-go::after { content: "→"; text-indent: 0; letter-spacing: 0; font-weight: 400; }
.hero-stamp {
  position: absolute; right: 24px; top: 26px;
  font-family: var(--serif); font-size: 14px; color: rgba(213, 118, 97, .9);
  border: 1.5px solid rgba(213, 118, 97, .55); border-radius: 7px;
  padding: 5px 8px; letter-spacing: 0; line-height: 1; transform: rotate(5deg);
}

/* 过往反馈：编辑部目录式 */
.section-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.section-row h2 { font-family: var(--serif); font-size: 16px; font-weight: 700; letter-spacing: 4px; }
.section-row .count { font-family: var(--serif); font-size: 12px; color: var(--ink-3); letter-spacing: 2px; }

.ep-row {
  position: relative; cursor: pointer;
  display: flex; align-items: center; gap: 16px;
  padding: 20px 2px; border-bottom: 1px solid var(--hairline);
  animation: pagein .45s cubic-bezier(.22,.8,.36,1) backwards;
  transition: background .15s;
}
.ep-row:nth-child(1) { animation-delay: .04s; }
.ep-row:nth-child(2) { animation-delay: .1s; }
.ep-row:nth-child(3) { animation-delay: .16s; }
.ep-row:nth-child(4) { animation-delay: .22s; }
.ep-row:active { background: rgba(0,0,0,.025); }
.ep-num {
  font-family: var(--serif); font-size: 26px; color: var(--ink-4);
  font-variant-numeric: tabular-nums; line-height: 1; min-width: 40px;
}
.ep-thumb {
  width: 48px; height: 48px; object-fit: cover; flex: none;
  border-radius: 8px; border: 1px solid var(--hairline); background: var(--paper-2);
}
.ep-main { flex: 1; min-width: 0; }
.ep-meta { font-size: 11.5px; color: var(--ink-3); letter-spacing: 1.5px; }
.ep-meta .who { color: var(--zhu); }
.ep-title {
  font-family: var(--serif); font-size: 19px; font-weight: 700;
  margin-top: 7px; line-height: 1.55; letter-spacing: 1px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ep-arrow { font-family: var(--serif); color: var(--ink-4); font-size: 16px; }

.empty { text-align: center; margin-top: 64px; padding: 0 30px; color: var(--ink-3); }
.empty .mark {
  display: inline-block; font-family: var(--serif); font-size: 26px; color: var(--ink-4);
  width: 58px; height: 58px; line-height: 56px; border: 1px solid var(--hairline); border-radius: 50%;
}
.empty p { margin-top: 18px; font-family: var(--serif); font-size: 14.5px; line-height: 2.3; white-space: pre-line; letter-spacing: 2px; }

/* ── 拍照页 ─────────────────────────── */

.page-title { font-family: var(--serif); font-size: 27px; font-weight: 700; letter-spacing: 4px; margin-top: 10px; }
.page-hint { margin-top: 12px; margin-bottom: 28px; font-size: 12.5px; color: var(--ink-3); letter-spacing: 2px; }

/* 声部模式双选卡 */
.mode-row { display: flex; gap: 12px; margin-bottom: 20px; }
.mode-btn {
  flex: 1; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--hairline); border-radius: 16px;
  padding: 14px 15px 13px;
  transition: border-color .16s, box-shadow .16s;
}
.mode-btn .m-t {
  display: block; font-family: var(--serif); font-size: 16px; font-weight: 700; letter-spacing: 2px;
}
.mode-btn .m-s { display: block; margin-top: 5px; font-size: 11px; color: var(--ink-3); letter-spacing: .5px; line-height: 1.6; }
.mode-btn.active {
  border: 1.5px solid var(--zhu);
  box-shadow: 0 0 0 3.5px rgba(178, 60, 43, .07);
}
.mode-btn.active .m-t { color: var(--zhu); }

.pick-row { display: flex; gap: 16px; }
.pick-btn {
  flex: 1; background: var(--card); cursor: pointer; text-align: center;
  border: 1px solid var(--hairline); border-radius: 18px; padding: 34px 0 28px;
  box-shadow: 0 1px 3px rgba(38,33,26,.04), 0 8px 22px rgba(38,33,26,.05);
  transition: transform .16s, border-color .16s;
}
.pick-btn:active { transform: scale(.965); border-color: var(--zhu-line); }
.pick-btn svg { width: 34px; height: 34px; stroke: var(--ink-2); }
.pick-btn .t { margin-top: 14px; font-family: var(--serif); font-size: 17px; font-weight: 700; letter-spacing: 3px; }
.pick-btn .s { margin-top: 5px; font-size: 11.5px; color: var(--ink-3); letter-spacing: 2px; }

.preview-wrap { display: none; }
.preview-frame {
  padding: 12px; background: var(--card); border: 1px solid var(--hairline);
  border-radius: 20px; box-shadow: 0 2px 6px rgba(38,33,26,.05), 0 14px 34px rgba(38,33,26,.08);
}
.preview-frame img { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: 10px; }
.repick {
  display: block; margin: 16px auto 0; background: none; border: none; cursor: pointer;
  font-family: var(--serif); color: var(--ink-2); font-size: 14px; letter-spacing: 2px;
  border-bottom: 1px solid var(--ink-4); padding-bottom: 2px;
}

.name-input {
  width: 100%; margin-top: 22px; background: var(--card);
  border: 1px solid var(--hairline); border-radius: 13px;
  padding: 15px 17px; font-size: 16px; font-family: var(--sans); color: var(--ink); outline: none;
  letter-spacing: 1px;
  transition: border-color .15s, box-shadow .15s;
}
.name-input:focus { border-color: var(--zhu); box-shadow: 0 0 0 3.5px rgba(178, 60, 43, .07); }
.name-input::placeholder { color: var(--ink-4); }

/* ── 校对页（稿纸） ─────────────────────────── */

.uncertain-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.uncertain-label { font-family: var(--serif); font-size: 13px; color: var(--zhu); letter-spacing: 2px; }
.uncertain-chip {
  color: var(--zhu); font-family: var(--serif); font-size: 14px; font-weight: 700;
  border-bottom: 2px solid var(--zhu-line); padding: 0 2px;
}

.paper {
  flex: 1; display: flex; overflow: hidden; min-height: 300px;
  background: var(--card); border: 1px solid var(--hairline); border-radius: 18px;
  box-shadow: 0 1px 3px rgba(38,33,26,.04), 0 10px 26px rgba(38,33,26,.06);
}
.paper .margin-line { width: 1.5px; background: var(--zhu-line); margin-left: 20px; }
.paper textarea {
  flex: 1; border: none; outline: none; resize: none;
  padding: 8px 18px 18px; color: var(--ink);
  font-family: var(--serif); font-size: 16.5px; line-height: 2.3em; letter-spacing: .5px;
  background-image: repeating-linear-gradient(
    transparent, transparent calc(2.3em - 1px),
    var(--hairline) calc(2.3em - 1px), var(--hairline) 2.3em);
  background-attachment: local;
}

/* 非文字作品：细节清单确认 */
.details-box {
  flex: 1; overflow-y: auto; background: var(--card);
  border: 1px solid var(--hairline); border-radius: 18px; padding: 18px 20px;
}
.details-head {
  font-family: var(--serif); font-size: 13px; color: var(--ink-3);
  letter-spacing: 2px; margin-bottom: 12px;
}
.details-list { list-style: none; }
.details-list li {
  position: relative; padding: 9px 0 9px 18px; font-size: 15px; line-height: 1.7;
  border-bottom: 1px solid var(--hairline);
}
.details-list li:last-child { border-bottom: none; }
.details-list li::before {
  content: ""; position: absolute; left: 2px; top: 1.05em;
  width: 5px; height: 5px; background: var(--gold); border-radius: 1px;
}

/* ── 等待页 ─────────────────────────── */

.waiting { justify-content: center; text-align: center; padding: 0 8px; }
/* 砚上一滴墨，呼吸 */
.ink-drop {
  width: 14px; height: 14px; border-radius: 50%; margin: 0 auto;
  background: radial-gradient(circle at 35% 30%, #3d4f47, var(--mo-deep));
  animation: drop 2s ease-in-out infinite;
}
@keyframes drop {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(35, 47, 42, .25); }
  50% { transform: scale(1.25); box-shadow: 0 0 0 14px rgba(35, 47, 42, 0); }
}
.waiting .headline { margin-top: 26px; font-size: 11px; color: var(--ink-3); letter-spacing: 6px; }
.waiting .message {
  margin-top: 14px; font-family: var(--serif);
  font-size: 21px; font-weight: 700; line-height: 1.8; letter-spacing: 2px;
}

.stage-list { margin: 40px auto 0; display: flex; flex-direction: column; text-align: left; max-width: 300px; width: 100%; }
.stage-row {
  position: relative; display: flex; align-items: center; gap: 16px;
  padding: 12px 2px; transition: opacity .4s;
}
.stage-row::before {
  content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 1px;
  background: var(--hairline);
}
.stage-row:first-child::before { top: 50%; }
.stage-row:last-child::before { bottom: 50%; }
.stage-row .num {
  position: relative; z-index: 1;
  width: 29px; height: 29px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 13px; color: var(--ink-3);
  background: var(--paper); border: 1px solid var(--hairline);
}
.stage-row .label { font-family: var(--serif); font-size: 15.5px; letter-spacing: 3px; color: var(--ink-2); }
.stage-row.todo { opacity: .35; }
.stage-row.done .num { border-color: var(--moss); color: var(--moss); background: var(--moss-soft); }
/* CSS 画的勾：短边+长边的 L 形旋转 45° */
.stage-row.done .num::before {
  content: ""; position: absolute; width: 8px; height: 4.5px;
  border-left: 1.5px solid var(--moss); border-bottom: 1.5px solid var(--moss);
  transform: rotate(-48deg) translateY(-1px);
}
.stage-row.done .num span { display: none; }
.stage-row.done .label { color: var(--ink-3); }
.stage-row.active .num {
  border-color: var(--zhu); color: var(--zhu); background: var(--card);
  box-shadow: 0 0 0 5px rgba(178, 60, 43, .08);
  animation: breathe 1.7s ease-in-out infinite;
}
.stage-row.active .label { font-weight: 700; color: var(--ink); }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.stage-row .dots { margin-left: auto; font-size: 18px; font-weight: 800; color: var(--zhu); min-width: 26px; }

.waiting .sub2 { margin-top: 34px; font-family: var(--serif); font-size: 13px; color: var(--ink-3); letter-spacing: 3px; }
.waiting .err { margin-top: 34px; font-size: 14px; color: var(--zhu); letter-spacing: 1px; }
.waiting .btn-ghost { margin: 20px auto 0; max-width: 210px; }

/* ── 结果页 ─────────────────────────── */

.top-right { display: flex; align-items: center; gap: 16px; }
.ai-badge {
  color: var(--ink-4); font-size: 10.5px; letter-spacing: 2px;
  border: 1px solid var(--hairline); border-radius: 5px; padding: 3px 7px;
}
.share-btn {
  background: none; border: none; cursor: pointer;
  font-family: var(--serif); font-size: 14px; font-weight: 700;
  color: var(--zhu); letter-spacing: 2px;
}

.result-title {
  font-family: var(--serif); font-size: 25px; font-weight: 700;
  letter-spacing: 2px; line-height: 1.6; margin-top: 6px;
}
.result-sub { font-size: 12px; color: var(--ink-3); margin-top: 10px; letter-spacing: 2px; }

/* 装裱的作品：宣纸衬 + 细框 + 阅印 */
.artwork-mat {
  position: relative; margin-top: 16px; cursor: zoom-in;
  background: var(--card); border: 1px solid var(--hairline); border-radius: 16px;
  padding: 10px;
  box-shadow: 0 2px 6px rgba(38,33,26,.05), 0 12px 30px rgba(38,33,26,.08);
}
.artwork-mat img {
  display: block; width: 100%; max-height: 240px; object-fit: contain;
  border-radius: 8px; background: var(--paper-2);
}
.artwork-mat .artwork-stamp {
  position: absolute; right: 18px; bottom: 16px;
  font-family: var(--serif); font-size: 12px; color: #fdf3e6;
  background: rgba(178, 60, 43, .88); border-radius: 5px;
  padding: 3px 6px; line-height: 1; transform: rotate(4deg);
}
.artwork-toggle {
  align-self: flex-start; margin-top: 8px; background: none; border: none; cursor: pointer;
  font-size: 11.5px; color: var(--ink-3); letter-spacing: 2px;
  border-bottom: 1px solid var(--ink-4); padding: 0 0 2px;
}

/* 灯箱 */
#lightbox {
  position: fixed; inset: 0; z-index: 200; cursor: zoom-out;
  background: rgba(24, 20, 15, .93);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
#lightbox[hidden] { display: none; }
#lightbox img { max-width: 100%; max-height: 92vh; border-radius: 8px; }

.tabs { display: flex; gap: 32px; margin-top: 20px; border-bottom: 1px solid var(--hairline); }
.tab-btn {
  position: relative; border: none; background: none; cursor: pointer;
  font-family: var(--serif); font-size: 15.5px; font-weight: 700; letter-spacing: 3px;
  color: var(--ink-3); padding: 11px 2px 13px;
  transition: color .2s;
}
.tab-btn.active { color: var(--ink); }
.tab-btn.active::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: -1px; height: 2.5px;
  border-radius: 2px; background: var(--zhu);
}

.tab-panel { display: none; flex: 1; flex-direction: column; min-height: 0; }
.tab-panel.active { display: flex; animation: pagein .28s ease; }

/* 听 */
.utt-list { flex: 1; overflow-y: auto; padding: 20px 0; min-height: 200px; }
.utt-row { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 16px; cursor: pointer; }
.utt-row.chen { flex-direction: row-reverse; }
.avatar {
  width: 33px; height: 33px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 14px; font-weight: 700;
  border: 1px solid var(--hairline); background: var(--card);
}
.avatar.lin { color: var(--zhu); }
.avatar.chen { color: var(--mo); }
.bubble {
  max-width: 78%; background: var(--card); border: 1px solid var(--hairline);
  border-radius: 15px; padding: 11px 15px 12px;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.utt-row.lin .bubble { border-top-left-radius: 4px; }
.utt-row.chen .bubble { border-top-right-radius: 4px; }
.bubble .who { font-family: var(--serif); font-size: 11px; font-weight: 700; letter-spacing: 2.5px; margin-bottom: 4px; }
.utt-row.lin .who { color: var(--zhu); }
.utt-row.chen .who { color: var(--mo); opacity: .8; }
.bubble .text { font-size: 15.5px; line-height: 1.7; letter-spacing: .3px; }
.utt-row.now .bubble {
  background: #fffbef; border-color: var(--gold-line);
  box-shadow: inset 3px 0 0 var(--marker);
}
.utt-row.now .text { font-weight: 600; }

.controls {
  background: rgba(255, 252, 245, .9);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--hairline);
  margin: 0 -26px calc(-28px - env(safe-area-inset-bottom));
  padding: 18px 30px calc(30px + env(safe-area-inset-bottom));
}
.progress-track { position: relative; height: 3px; border-radius: 2px; background: var(--paper-2); cursor: pointer; }
.progress-fill { position: relative; height: 100%; width: 0; border-radius: 2px; background: var(--zhu); }
.progress-fill::after {
  content: ""; position: absolute; right: -4.5px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--zhu); box-shadow: 0 1px 4px rgba(150, 48, 31, .4);
}
.time-row {
  display: flex; justify-content: space-between; margin-top: 9px;
  font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: 1px;
}
.control-row { display: flex; align-items: center; justify-content: center; gap: 42px; margin-top: 6px; }
.skip-btn {
  background: none; border: none; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); letter-spacing: 1px;
}
.skip-btn:active { opacity: .45; }
.play-btn {
  width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--mo);
  box-shadow: 0 2px 4px rgba(26,36,32,.2), 0 10px 24px rgba(26,36,32,.3);
  display: flex; align-items: center; justify-content: center;
  transition: transform .16s cubic-bezier(.34,1.56,.64,1), background .16s;
}
.play-btn:active { transform: scale(.9); background: var(--mo-deep); }
.play-btn svg { width: 24px; height: 24px; fill: var(--mo-cream); }
.play-btn .ic-play { margin-left: 2px; }
.play-btn .ic-pause { display: none; }
.play-btn.playing .ic-play { display: none; }
.play-btn.playing .ic-pause { display: block; }

/* 报告 */
.report-body { flex: 1; overflow-y: auto; padding: 24px 0 48px; }

/* 总评：大字引文，不装盒子 */
.summary-card { position: relative; padding: 6px 4px 0; }
.summary-card .qmark {
  display: block; font-family: var(--serif); font-size: 52px; font-weight: 700;
  color: var(--zhu-line); line-height: .4; margin-bottom: 6px;
}
.summary-card .text {
  font-family: var(--serif); font-size: 18px; line-height: 2.15; letter-spacing: 1px;
}
.summary-card .sign {
  margin-top: 16px; display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  font-family: var(--serif); font-size: 12px; color: var(--ink-3); letter-spacing: 3px;
}
.summary-card .sign::after {
  content: "夸"; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--zhu); color: #fdf3e6; font-size: 13px; transform: rotate(-3deg);
}

.report-section {
  font-family: var(--serif); font-size: 16px; font-weight: 700; letter-spacing: 4px;
  margin: 38px 0 6px; display: flex; align-items: baseline; gap: 10px;
}
.report-section .en { font-size: 10px; color: var(--ink-4); letter-spacing: 2px; font-family: var(--sans); font-weight: 400; }

/* 亮点/建议：去盒化，左侧色线 + 留白 */
.gold-card, .red-card {
  position: relative; padding: 18px 2px 18px 18px; margin-bottom: 2px;
  border-bottom: 1px solid var(--hairline);
}
.gold-card:last-of-type, .red-card:last-of-type { border-bottom: none; }
.gold-card::before, .red-card::before {
  content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; border-radius: 2px;
}
.gold-card::before { background: var(--marker); }
.red-card::before { background: var(--zhu-line); }

.chip {
  display: inline-block; font-family: var(--serif);
  font-size: 11.5px; font-weight: 700; letter-spacing: 3px;
  padding: 0 1px 1px; border-bottom: 1.5px solid currentColor;
}
.gold-card .chip { color: var(--gold); }
.red-card .chip { color: var(--zhu); }

.quote-box { margin-top: 12px; font-family: var(--serif); font-size: 16.5px; line-height: 2.2; letter-spacing: .5px; }
.quote-box .hl {
  background: linear-gradient(transparent 55%, var(--marker) 55%, var(--marker) 94%, transparent 94%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 1px; font-weight: 600;
}
.red-card .quote-box .hl {
  background: linear-gradient(transparent 55%, #f0d3cb 55%, #f0d3cb 94%, transparent 94%);
}

.comment { margin-top: 8px; font-size: 14px; line-height: 1.95; color: var(--ink-2); letter-spacing: .5px; }

.advice-label {
  display: inline-block; font-family: var(--serif);
  font-size: 11px; font-weight: 700; letter-spacing: 3px;
  color: var(--zhu); margin: 14px 0 4px;
}
.advice-label::before {
  content: ""; display: inline-block; width: 5px; height: 5px;
  background: var(--zhu); margin-right: 7px; vertical-align: 2px;
}
.advice-text { font-size: 14px; line-height: 1.95; letter-spacing: .5px; }
.example-box {
  margin-top: 14px; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--hairline); border-radius: 12px;
  font-family: var(--serif); font-size: 15px; line-height: 2.1;
}
.example-box .advice-label { margin-top: 0; }

.next-card {
  margin-top: 40px; padding: 20px 22px;
  background: var(--mo); border-radius: 18px;
  box-shadow: 0 12px 30px rgba(26, 36, 32, .22);
}
.next-card .label { font-size: 10.5px; font-weight: 600; color: rgba(240,232,212,.55); letter-spacing: 4px; margin-bottom: 10px; }
.next-card .text { font-family: var(--serif); font-size: 16px; line-height: 2; color: var(--mo-cream); letter-spacing: 1px; }

.report-empty { text-align: center; color: var(--ink-3); margin-top: 64px; }
.report-empty .mark {
  display: inline-block; font-family: var(--serif); font-size: 24px; color: var(--ink-4);
  width: 54px; height: 54px; line-height: 52px; border: 1px solid var(--hairline); border-radius: 50%;
}
.report-empty p { margin-top: 14px; font-family: var(--serif); font-size: 13.5px; line-height: 2.2; letter-spacing: 2px; }

/* toast */
#toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(16px);
  background: rgba(38, 33, 26, .93); color: #f6f0e2;
  font-size: 13px; letter-spacing: 2px;
  padding: 11px 22px; border-radius: 999px; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; max-width: 82vw; text-align: center; z-index: 99;
  box-shadow: 0 10px 28px rgba(38, 33, 26, .3);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.spin {
  display: inline-block; width: 14px; height: 14px; vertical-align: -2.5px; margin-right: 8px;
  border: 1.5px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%;
  animation: rot .8s linear infinite;
}
@keyframes rot { to { transform: rotate(360deg); } }

.loading-center { flex: 1; display: flex; align-items: center; justify-content: center; }
.loading-center .spin { border-color: var(--zhu-line); border-top-color: var(--zhu); width: 26px; height: 26px; }