/* 晴雨 · 界面样式 —— 调性「晴窗 + 信」
   背景：晴窗天光（奶油→鼠尾草→雾蓝渐变 + 漂浮光斑 + 飘云）
   首页/作答：玻璃（毛玻璃卡、雾青 CTA）
   报告：一封来自晴雨的信（信纸/邮票/见信好/签名）
   历史：一沓信 */

/* ============ 基础 ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 52%, var(--sky-2) 100%);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button { font-family: inherit; cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

/* ============ 晴窗天光氛围 ============ */
.orb { position: fixed; border-radius: 50%; filter: blur(50px); opacity: .5; z-index: 0; pointer-events: none; }
.orb-1 { width: 280px; height: 280px; background: #a9d0b8; top: -70px; left: -80px; animation: drift 18s ease-in-out infinite; }
.orb-2 { width: 240px; height: 240px; background: #aec9de; top: 30%; right: -90px; animation: drift 22s ease-in-out infinite reverse; }
.orb-3 { width: 190px; height: 190px; background: #e6d6b6; bottom: -50px; left: 20%; animation: drift 26s ease-in-out infinite; }
@keyframes drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.cloud { position: fixed; z-index: 0; pointer-events: none; color: #fff; }
.cloud-a { top: 10%; left: -140px; width: 220px; opacity: .8; animation: cloudmove 46s linear infinite; }
.cloud-b { top: 38%; right: -160px; width: 160px; opacity: .5; animation: cloudmove 60s linear infinite; animation-delay: -24s; }
@keyframes cloudmove { to { transform: translateX(calc(100vw + 380px)); } }
@media (prefers-reduced-motion: reduce) { .orb, .cloud { animation: none; } }

/* ============ 玻璃顶栏 ============ */
.topbar {
  position: sticky; top: 0; z-index: 30;
  padding: 14px var(--space-5) 0;
}
.topbar-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-pill);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 10px 30px -20px rgba(70, 90, 80, .35);
}
.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand-mark { width: 23px; height: 23px; color: var(--accent); }
.brand-word { font-family: var(--font-display); font-size: 19px; letter-spacing: .16em; color: var(--ink); }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(44, 50, 45, .14); background: rgba(255, 255, 255, .45); color: var(--ink-soft);
  transition: border-color .2s, color .2s;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn svg { width: 17px; height: 17px; }
/* 语言切换：显示「可切换到的那一种」（中文界面显示 EN，英文界面显示 中）。
   比图标更明确——语言是文字问题，用文字标识最直接。 */
.lang-btn { font-size: 13px; font-weight: 600; letter-spacing: 0; margin-left: 6px; }
.lang-btn span { line-height: 1; }

/* 国际求助目录提示：中国号码对海外读者无效，这行给权威目录。
   比正文小一档、比脚注亮一点——它是可执行的建议，不是免责声明。 */
.help-intl {
  margin-top: 10px; font-size: var(--text-sm); line-height: 1.7;
  color: var(--ink-soft); border-top: 1px dashed var(--help-border); padding-top: 10px;
}
.help-intl a { color: var(--accent); }

.ic-sun { display: none; } .ic-moon { display: block; }
:root[data-theme="dark"] .ic-sun { display: block; }
:root[data-theme="dark"] .ic-moon { display: none; }

/* ============ 视图 ============ */
.view { display: none; max-width: var(--maxw); margin: 0 auto; padding: var(--space-8) var(--space-5) var(--space-12); position: relative; z-index: 10; }
.view.is-active { display: block; animation: fadeUp .45s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============ 按钮 ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: var(--r-pill);
  font-size: var(--text-body); font-weight: 500;
  padding: 14px 28px;
  transition: transform .15s var(--ease), box-shadow .2s, background .2s, border-color .2s;
}
.btn:active { transform: scale(.98); }
.btn-lg { font-size: var(--text-lg); padding: 15px 32px; }
.btn-cta {
  border: none;
  background: linear-gradient(135deg, var(--sage), var(--accent));
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(95, 143, 150, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.btn-cta:hover { transform: translateY(-1px); }
.btn-cta:active { transform: scale(.98); }
.btn-cta svg { width: 19px; height: 19px; }
.btn-ghost { background: var(--glass); border: 1px solid var(--border); color: var(--ink); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.quiet-link { display: inline-block; margin-top: var(--space-5); color: var(--ink-soft); font-size: var(--text-sm); border-bottom: 1px solid transparent; }
.quiet-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.privacy-note { margin-top: 22px; text-align: center; color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.7; }

/* ============ 首页 · 晴窗玻璃卡 ============ */
.home-stage { padding-top: 6px; margin: auto 0; }
/* 首页整体垂直居中：可视区（100dvh）扣除顶栏高度。
   margin:auto 而非 justify-content:center——内容超高时自动退化为顶对齐+可滚动，避免 flex 居中把顶部裁掉 */
#view-home {
  min-height: calc(100vh - 72px);
  min-height: calc(100dvh - 72px);
  display: flex;
  flex-direction: column;
  padding: 18px var(--space-5) 20px;
}
.home-window {
  max-width: 540px; margin: 0 auto;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-xl);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: 0 24px 60px -24px rgba(70, 90, 80, .3), inset 0 1px 0 rgba(255, 255, 255, .6);
  padding: 24px 26px 30px; text-align: center; overflow: hidden; position: relative;
  display: flex; flex-direction: column;
}
.sky-scene { position: relative; width: 100%; height: 116px; min-height: 116px; flex: 1 1 auto; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #fdf6e6 0%, #eef4ec 58%, #e2edf0 100%); }
.sky-sun { position: absolute; top: 12%; right: 12%; width: 60px; height: 60px; }
.sky-cloud { position: absolute; top: 40%; left: -90px; width: 118px; animation: cloudmove 24s linear infinite; }
.sky-cloud.s2 { top: 26%; left: -150px; width: 92px; opacity: .9; animation-duration: 32s; animation-delay: -10s; }
.sky-hill { position: absolute; bottom: -30px; left: 0; right: 0; height: 76px; background: linear-gradient(180deg, rgba(125, 168, 141, .28), rgba(125, 168, 141, .12)); border-radius: 50% 50% 0 0; }
.home-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-hero); line-height: 1.5; letter-spacing: .01em; margin-top: 18px; }
.home-sub { margin: 12px auto 0; max-width: 400px; color: var(--ink-soft); font-size: 15px; line-height: 1.9; }
#btn-start { margin-top: 20px; }
.home-meta { margin-top: 12px; color: var(--ink-faint); font-size: 12.5px; letter-spacing: .04em; }
#link-history { margin-top: var(--space-4); }

/* 承诺条 */
.promises { max-width: 540px; margin: 14px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 4px; }
.promise {
  background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 18px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 16px 10px; text-align: center;
}
.pm-ic { width: 22px; height: 22px; margin: 0 auto 8px; color: var(--accent); }
.pm-t { font-size: 13px; color: var(--ink); letter-spacing: .02em; }
.pm-s { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }

/* ============ 作答 ============ */
.quiz-top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.progress { flex: 1; height: 4px; border-radius: var(--r-pill); background: rgba(44, 50, 45, .12); overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--sage), var(--accent)); border-radius: var(--r-pill); transition: width .4s var(--ease); }
.quiz-count { color: var(--ink-faint); font-size: var(--text-sm); white-space: nowrap; }
.quiz-card {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-xl);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, .5);
  padding: var(--space-8) var(--space-6);
}
.dim-tag { display: inline-block; padding: 4px 14px; border-radius: var(--r-pill); background: var(--band-calm-bg); color: var(--band-calm); font-size: var(--text-sm); }
.quiz-lead { margin-top: var(--space-4); color: var(--ink-soft); font-size: var(--text-sm); }
.quiz-text { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); line-height: 1.6; margin-top: var(--space-4); min-height: 3.2em; }
.scale { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
.scale-opt {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: rgba(255, 255, 255, .55); border: 1px solid var(--border); border-radius: 16px;
  padding: 13px 18px; color: var(--ink);
  box-shadow: 0 2px 6px -3px rgba(70, 90, 80, .15);
  transition: border-color .15s, background .2s, transform .15s var(--ease), box-shadow .2s;
}
.scale-opt:hover { border-color: var(--sage); transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(70, 90, 80, .3); }
.scale-opt:active { transform: scale(.985); }
.opt-ic { width: 22px; height: 22px; flex: none; color: var(--sage); opacity: .85; }
.opt-ic svg { width: 100%; height: 100%; display: block; }
.opt-txt { font-size: 15px; letter-spacing: .01em; }
.opt-check { margin-left: auto; width: 20px; height: 20px; color: #fff; display: none; }
.opt-check svg { width: 100%; height: 100%; display: block; }
.scale-opt.selected {
  border-color: transparent;
  background: linear-gradient(135deg, var(--sage), var(--accent));
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(95, 143, 150, .55);
}
.scale-opt.selected .opt-ic { color: #fff; opacity: 1; }
.scale-opt.selected .opt-check { display: block; }
#quiz-exit { margin-top: var(--space-8); }

/* ============ 报告 · 一封信 ============ */
.report-letter {
  position: relative; max-width: 600px; margin: 0 auto;
  background: var(--paper); border-radius: 8px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 34px 70px -34px rgba(70, 90, 80, .45), 0 8px 20px -10px rgba(70, 90, 80, .18);
  padding: 46px 42px 42px;
}
/* 信纸横线 */
.report-letter::after { content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none; background: repeating-linear-gradient(transparent 0, transparent 35px, var(--rule) 35px, var(--rule) 36px); opacity: .5; }
/* 撕边 */
.report-letter::before { content: ""; position: absolute; top: -7px; left: 0; right: 0; height: 8px; background: repeating-linear-gradient(90deg, var(--paper) 0 11px, transparent 11px 14px); }

/* 邮票 */
.stamp { position: absolute; top: -28px; right: 20px; width: 86px; height: 100px; background: var(--paper); border: 1px dashed var(--border); border-radius: 5px; padding: 10px 8px; transform: rotate(3.5deg); text-align: center; box-shadow: 0 10px 22px -12px rgba(70, 90, 80, .4); z-index: 2; }
.stamp svg { width: 38px; height: 38px; color: var(--accent); }
.st-name { font-family: var(--font-display); font-size: 13px; letter-spacing: .22em; color: var(--ink); margin-top: 2px; }
.st-date { font-size: 10px; color: var(--ink-faint); margin-top: 2px; letter-spacing: .02em; }

.letter-greet { font-size: 17px; letter-spacing: .06em; color: var(--ink); }
.letter-open { margin-top: 16px; font-size: 15.5px; line-height: 2; color: var(--ink-soft); letter-spacing: .02em; }
.report-weather { margin-top: 14px; font-family: var(--font-display); font-size: 20px; line-height: 1.6; color: var(--ink); }

/* 雷达插页 */
.radar-wrap { margin-top: 28px; text-align: center; }
.section-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: .08em; }
.section-sub { color: var(--ink-faint); font-size: 12px; margin-top: 4px; }
.radar-inset { margin-top: 12px; background: color-mix(in srgb, var(--sage) 6%, transparent); border-radius: 20px; padding: 12px; }
#radar-root svg { max-width: 400px; width: 100%; height: auto; }

/* 求助插页（P.S.） */
.help-card {
  margin-top: 28px;
  border: 1px dashed var(--help-border); background: var(--help-bg);
  border-radius: 14px; padding: 20px 22px; text-align: left;
}
.help-card.is-urgent { border: 2px solid var(--band-care); background: var(--band-care-bg); }
.help-head { display: flex; gap: 14px; align-items: flex-start; }
.help-head svg { width: 24px; height: 24px; flex: none; color: var(--accent); margin-top: 2px; }
.help-card.is-urgent .help-head svg { color: var(--band-care); }
.help-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.help-body { margin-top: 8px; color: var(--ink); font-size: 14.5px; line-height: 1.9; }
.help-lines { margin-top: 14px; display: grid; gap: 10px; }
.help-line { display: flex; align-items: baseline; gap: 12px; border: 1px solid var(--help-border); border-radius: 12px; padding: 11px 14px; background: var(--paper); }
.hl-num { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.hl-name { font-size: 14px; }
.hl-desc { margin-left: auto; color: var(--ink-faint); font-size: 12px; white-space: nowrap; }
.help-foot { margin-top: 12px; color: var(--ink-faint); font-size: 11px; }

/* 八个方向 · 信纸行 */
.dims { margin-top: 26px; }
.dim-card { padding: 16px 2px; border-top: 1px solid var(--paper-line); }
.dim-card:first-child { border-top: none; }
.dim-card-head { display: flex; align-items: center; gap: 11px; }
.band-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.band-calm { color: var(--band-calm); } .band-note { color: var(--band-note); } .band-care { color: var(--band-care); }
.band-calm .band-dot { background: var(--band-calm); } .band-note .band-dot { background: var(--band-note); } .band-care .band-dot { background: var(--band-care); }
.dim-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.band-label { margin-left: auto; font-size: 11px; padding: 3px 12px; border-radius: var(--r-pill); }
.band-calm .band-label { background: var(--band-calm-bg); color: var(--band-calm); }
.band-note .band-label { background: var(--band-note-bg); color: var(--band-note); }
.band-care .band-label { background: var(--band-care-bg); color: var(--band-care); }
.dim-read { margin-top: 8px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.9; }
.dim-comfort { margin-top: 6px; color: var(--band-calm); font-size: 14px; line-height: 1.85; }
.band-note .dim-comfort { color: var(--band-note); }
.band-care .dim-comfort { color: var(--band-care); }
.dim-tips { margin-top: 8px; display: grid; gap: 4px; }
.dim-tips li { list-style: none; position: relative; padding-left: 16px; color: var(--ink-soft); font-size: 13px; line-height: 1.8; }
.dim-tips li::before { content: "·"; position: absolute; left: 3px; color: var(--sage); font-weight: 700; }

.letter-comfort { margin-top: 26px; padding: 18px 20px; background: color-mix(in srgb, var(--sage) 7%, transparent); border-radius: 14px; }
.lc-head { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: .06em; }
.lc-body { margin-top: 8px; color: var(--ink); font-size: 15px; line-height: 2; }

/* 八个方向：概要 chips 与折叠 */
.dims-notable { display: grid; gap: 0; }
.dims-calm-note { margin-top: 14px; color: var(--ink-faint); font-size: 13px; line-height: 1.8; }
.dims-summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dchip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--glass);
  font-size: 13px;
}
.dchip .band-dot { width: 9px; height: 9px; }
.dchip em { font-style: normal; font-size: 11px; color: var(--ink-faint); }
.dchip.band-calm .band-dot { background: var(--band-calm); }
.dchip.band-note .band-dot { background: var(--band-note); }
.dchip.band-care .band-dot { background: var(--band-care); }
.dims-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 4px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--glass);
  color: var(--ink); font-size: 13px;
  transition: border-color .2s, color .2s;
}
.dims-toggle:hover { border-color: var(--accent); color: var(--accent); }
.dims-toggle svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.dims-toggle.open svg { transform: rotate(180deg); }
.dims-detail { margin-top: 8px; }

/* 信尾热线脚注（安静，始终可达） */
.letter-hotlines { margin-top: 18px; text-align: center; color: var(--ink-faint); font-size: 12px; line-height: 1.9; }
.letter-hotlines b { color: var(--accent); font-weight: 600; }

.letter-sign { margin-top: 26px; text-align: right; color: var(--ink); font-size: 15px; letter-spacing: .1em; }

.report-actions { margin-top: var(--space-8); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.report-actions .btn { width: 100%; max-width: 340px; }

/* ============ 历史 · 一沓信 ============ */
.report-head { text-align: center; padding-top: var(--space-2); }
.report-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-title); letter-spacing: .08em; }
.report-lead { margin-top: 10px; color: var(--ink-soft); font-size: var(--text-body); }
.history-list { margin-top: var(--space-6); display: grid; gap: 12px; }
.history-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 18px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 16px 18px; text-align: left; width: 100%;
  transition: border-color .15s;
}
.history-item:hover { border-color: var(--accent); }
.hi-date { color: var(--ink-soft); font-size: 13px; white-space: nowrap; }
.hi-weather { font-size: 18px; color: var(--accent); display: flex; }
.hi-dots { display: flex; gap: 5px; flex-wrap: wrap; }
.hi-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.hi-dots i.calm { background: var(--band-calm); } .hi-dots i.note { background: var(--band-note); } .hi-dots i.care { background: var(--band-care); }
.history-empty { margin-top: var(--space-6); color: var(--ink-faint); text-align: center; line-height: 1.8; }

/* ============ 页脚 ============ */
.foot { position: relative; z-index: 10; max-width: var(--maxw); margin: 0 auto; padding: var(--space-8) var(--space-5) var(--space-12); text-align: center; color: var(--ink-faint); font-size: var(--text-xs); line-height: 1.9; border-top: 1px solid rgba(44, 50, 45, .08); }

/* ============ 路过的小安慰（G） ============ */
.passing {
  max-width: 520px; margin: 12px auto 0; text-align: center;
  color: var(--ink-faint); font-size: 13px; line-height: 1.9;
  font-family: var(--font-display); letter-spacing: .04em;
}

/* ============ 拆信（A）：全屏封套，一进报告就能看到拆开按钮 ============ */
.env-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: linear-gradient(180deg, var(--sky-0), var(--sky-1) 55%, var(--sky-2));
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 1; transition: opacity .5s var(--ease), visibility .5s;
}
.env-overlay.done { opacity: 0; visibility: hidden; pointer-events: none; }
.env-card { text-align: center; padding: 20px; }
.env-ic { width: 72px; height: 72px; color: var(--accent); margin: 0 auto; }
.env-t { margin-top: 16px; font-family: var(--font-display); font-size: 18px; letter-spacing: .06em; }
#env-open { margin-top: 20px; }
.env-sub { margin-top: 12px; color: var(--ink-faint); font-size: 12px; letter-spacing: .04em; }
.report-letter.opened { animation: letterIn .6s var(--ease); }
@keyframes letterIn { from { opacity: .3; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============ 收信（F） ============ */
.btn-seal { margin: 20px auto 0; width: 100%; max-width: 340px; display: flex; }

/* ============ 天气贴纸（C） ============ */
.sticker-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(255, 255, 255, .5);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-faint); flex: none; transition: all .2s;
}
.sticker-btn svg { width: 17px; height: 17px; }
.sticker-btn:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.06); }
.sticker-btn.collected { background: linear-gradient(135deg, var(--sage), var(--accent)); border-color: transparent; color: #fff; }
.album { margin-top: 28px; }
.album-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: .06em; }
.album-grid { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.album-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 13px;
}
.album-item svg { width: 18px; height: 18px; }
.album-item.band-calm { color: var(--band-calm); }
.album-item.band-note { color: var(--band-note); }
.album-item.band-care { color: var(--band-care); }
.ai-date { font-size: 11px; color: var(--ink-faint); }

/* ============ 弹窗（E 歇一歇 / F 收信回执） ============ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(28, 31, 28, .32); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.modal-overlay.is-open { display: flex; animation: fadeUp .3s var(--ease); }
.modal-card {
  max-width: 360px; width: 100%; text-align: center;
  background: var(--paper); border: 1px solid var(--glass-edge); border-radius: 22px;
  box-shadow: 0 30px 60px -28px rgba(70, 90, 80, .5);
  padding: 32px 26px 28px;
}
.modal-line { font-family: var(--font-display); font-size: 17px; line-height: 1.9; color: var(--ink); }
.modal-note { margin-top: 12px; color: var(--ink-faint); font-size: 13px; }
.modal-card .btn { margin-top: 22px; width: 100%; }
body.modal-open { overflow: hidden; }

/* 分享弹窗 */
.share-card-modal { max-width: 400px; max-height: 88vh; overflow-y: auto; }
.share-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: .06em; }
.share-sub { margin-top: 6px; color: var(--ink-faint); font-size: 13px; }
.share-preview { margin-top: 16px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.share-preview canvas { width: 100%; height: auto; display: block; max-height: 54vh; object-fit: contain; background: #f7f4e8; }
.share-actions { margin-top: 6px; }
.share-actions .btn { margin-top: 10px; }

/* ============ 响应式 ============ */
@media (max-width: 420px) {
  :root { --text-hero: 27px; --text-title: 23px; }
  .report-letter { padding: 42px 26px 38px; }
  .stamp { right: 14px; }
  .home-window { padding: 22px 20px 28px; }
  .help-line { flex-wrap: wrap; }
  .hl-desc { margin-left: 0; width: 100%; white-space: normal; }
}
/* 桌面/平板：卡片高度随视口高度自适应，天空场景弹性拉伸；clamp 下限保证不为矮小方正 */
@media (min-width: 720px) and (min-height: 680px) {
  .home-window { min-height: clamp(600px, 66vh, 680px); }
}
@media (prefers-reduced-motion: reduce) {
  .view.is-active { animation: none; }
  * { transition-duration: 0.01ms !important; }
}