:root {
  --bg: #f7f3ec;
  --surface: #fffdf9;
  --text: #3d3229;
  --muted: #8a7d6d;
  --accent: #ad5606;
  --line: #e5ddd0;
  --danger: #a33f32;
  color-scheme: light dark;
  background: var(--bg);
  color: var(--text);
  font-family: "Noto Sans SC", "Source Han Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
/* 缩放锁第二层，专治双击放大。Mini App 容器没有地址栏，页面一旦被双击放大，
   用户找不到任何「恢复原样」的入口，只能退出重进——这就是它必须关掉的理由。
   manipulation 只吃掉双击缩放这一个手势，滚动、单击、长按都不受影响；捏合
   不归它管，归 viewport 的 user-scalable 和 ZOOM_LOCK_JS 管。

   🔴 故意**不加** .payment-return 前缀。回跳页的样式按本文件末尾那条约定都要
   收窄到该类下，这一条是有意破例：两个页面共用这张样式表，而两个页面都要禁。
   谁看到这行想「怎么没收窄」，答案在这里，不是漏写。 */
html, body { touch-action: manipulation; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.standalone { margin: 0; padding: 42vh 24px 0; text-align: center; color: var(--muted); }
.shell { width: min(100%, 480px); margin: 0 auto; padding: max(22px, env(safe-area-inset-top)) 20px max(92px, env(safe-area-inset-bottom)); }
.header { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 22px; border-bottom: 1px solid var(--line); }
.wordmark, .eyebrow { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.text-button { border: 0; padding: 6px 0; color: var(--accent); background: transparent; font-weight: 700; }
.preview-label { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.screen { padding: 30px 0 8px; }
.landing-page { padding-top: 2px; }
.brand-avatar { display: grid; width: 72px; height: 72px; margin-top: 0; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--accent); background: var(--surface); font-size: 30px; font-weight: 700; }
.tagline { margin: 18px 0 0; color: var(--text); font-size: 21px; font-weight: 700; line-height: 1.45; letter-spacing: -.01em; }
.topics { display: flex; flex-wrap: wrap; gap: 7px; margin: 15px 0 0; padding: 0; list-style: none; }
.topics li { border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.intro { margin-top: 22px; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 18px 18px 18px 17px; background: var(--surface); }
.intro-copy { margin: 0; color: var(--text); line-height: 1.8; }
.intro-copy + .intro-copy { margin-top: 12px; }
.intro-sign { margin: 14px 0 0; color: var(--muted); font-size: 13px; }
.benefits { margin-top: 26px; }
.benefits h2 { margin: 0; color: var(--text); font-size: 16px; line-height: 1.5; }
.benefits ul { margin: 10px 0 0; padding: 0; list-style: none; }
.benefits li { display: flex; gap: 12px; border-bottom: 1px solid var(--line); padding: 13px 0; color: var(--text); line-height: 1.55; }
.benefits li > :first-child { flex: 0 0 auto; color: var(--accent); font-weight: 700; }
.price { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.price p { margin: 0; }
.price .plan { color: var(--text); font-size: 23px; font-weight: 700; }
.price .terms { color: var(--text); font-size: 15px; font-weight: 600; text-align: right; }
.price .age { margin-top: 6px; color: var(--muted); font-size: 12px; }
h1 { max-width: 390px; margin: 12px 0 0; color: var(--text); font-size: clamp(29px, 8vw, 40px); line-height: 1.2; letter-spacing: -.035em; }
.lede { margin: 15px 0 0; color: var(--muted); line-height: 1.75; }
.notice { margin: 20px 0 0; padding: 14px 15px; border: 1px solid var(--line); color: var(--text); background: var(--surface); line-height: 1.65; }
.secondary-actions { display: grid; gap: 10px; margin-top: 26px; }
.landing-page:not([hidden]) ~ .secondary-actions { margin-top: 22px; }
button.secondary { width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 7px; padding: 10px 14px; color: var(--accent); background: transparent; font-weight: 700; }
button:disabled { opacity: .42; }
.method-tabs { display: grid; gap: 12px; margin-top: 26px; }
button.method-tab { display: grid; grid-template-columns: 44px 1fr 20px; grid-template-areas: 'mark name check' 'mark note check'; align-items: center; column-gap: 13px; row-gap: 4px; width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 16px; color: var(--text); background: var(--surface); text-align: left; }
button.method-tab[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
button.method-tab[disabled] { opacity: .45; }
.method-mark { grid-area: mark; display: flex; align-items: center; color: var(--text); }
.method-name { grid-area: name; font-size: 17px; font-weight: 700; }
.method-psp { color: var(--muted); font-size: 13px; font-weight: 400; }
.method-note { grid-area: note; color: var(--muted); font-size: 13px; line-height: 1.55; }
.method-check { grid-area: check; display: flex; align-items: center; color: var(--accent); visibility: hidden; }
button.method-tab[aria-checked="true"] .method-check { visibility: visible; }
#method-hint { margin-top: 22px; }
.payment-detail { margin-top: 24px; padding: 18px; border: 1px solid var(--line); background: var(--surface); }
dl { margin: 0; }
dl div + div { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
dt { color: var(--muted); font-size: 12px; }
dd { margin: 6px 0 0; overflow-wrap: anywhere; color: var(--text); font-weight: 700; }
.copy-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }
.danger-copy { margin: 20px 0 0; color: var(--danger); font-size: 14px; font-weight: 700; line-height: 1.7; }
.countdown { margin: 18px 0 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.field { display: grid; gap: 9px; margin-top: 25px; color: var(--muted); font-size: 13px; }
.field input { min-height: 52px; border: 1px solid var(--line); border-radius: 7px; padding: 11px 13px; color: var(--text); background: var(--surface); font-size: 17px; letter-spacing: .06em; outline: none; }
.field input:focus { border-color: var(--accent); }
.quiet { color: var(--muted); font-size: 13px; line-height: 1.65; }
#retry-invite { margin-top: 24px; }
.test-strip { margin-top: 28px; padding: 16px; border: 1px solid var(--danger); background: var(--surface); }
.test-strip strong { display: block; margin-bottom: 7px; color: var(--danger); }
.test-strip p { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.test-actions { display: grid; gap: 8px; }
.result { min-height: 24px; margin: 22px 0 0; color: var(--accent); font-size: 14px; line-height: 1.65; }
.result:empty { display: none; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* ── 支付回跳页 ────────────────────────────────────────────────────────────
   收银台跳回来的落地页。它和后台的草稿预览一样是**没有脚本的页面**，共用这份
   样式表；CSP 是 style-src 'self'，内联 <style> 和 style="" 都会被浏览器丢掉，
   所以只能走外链，不是偷懒。

   🔴 深色为什么是媒体查询而不是 applyTheme()：applyTheme 属于 MINI_APP_JS，
   这一页不加载它，也拿不到 Telegram.WebApp（用户此刻在内置浏览器里，不是
   Mini App 容器里）。系统偏好是这一页唯一能拿到的深浅信号。

   🔴 作用域钉死在 .payment-return 上，而这个类只出现在回跳页的 <html> 上。
   小程序的 :root 由 applyTheme 写行内属性，行内永远压过样式表——就算这里写成
   全局也压不动它。仍然收窄，是因为「压不动」依赖 applyTheme 每次都跑到底，
   而它自己就带着三段 try/catch（miniapp.ts:511-575）。别把小程序的配色押在另一个函数不抛异常上。

   选择器写成 :root.payment-return 而不是单个 .payment-return，是因为 :root 和
   单个类的特异性同为 0-1-0：只写类名的话，这一块能不能盖住上面那份浅色 :root，
   全靠它排在文件后面。谁往这后面再插一条 :root 规则，深色就会悄悄失效且不报
   任何错。加上 :root 变成 0-2-0，与顺序无关。

   ⚠️ 这段注释在 MINI_APP_CSS 的模板字符串**里面**：反引号会当场把字符串截断，
   美元号加花括号会被当成插值求值。写说明只能用普通标点——这两个坑我在写上面
   这段话时各踩了一次，都是 tsc 报的 TS1109，不是眼睛看出来的。 */
.payment-return .return-mark { display: grid; width: 54px; height: 54px; margin-top: 2px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--accent); background: var(--surface); font-size: 22px; font-weight: 700; letter-spacing: .1em; }
.payment-return .return-screen h1 { margin-top: 17px; font-size: clamp(26px, 7.2vw, 34px); }
.payment-return .return-note { margin: 20px 0 0; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 15px 16px; color: var(--text); background: var(--surface); line-height: 1.8; }
.payment-return .return-note strong { font-weight: 700; }
.payment-return .return-fallback { margin: 26px 0 0; border-top: 1px solid var(--line); padding-top: 15px; color: var(--muted); font-size: 13px; line-height: 1.9; }
/* 这个链接对「已经把 Telegram 关掉」的那批人是唯一的回程，点不中就等于没有。
   原来是 inline-block + 上下 3px：13px 字号乘 1.9 行高约 24.7px，加上 6px 才 31px，
   低于 44px 那条线。而 inline-block 的上下 padding 不进流，撑大只会盖住上一行，
   越加越糟。改成块级，padding 才真的把行盒撑开：24.7 加 20 约等于 45px。
   fit-content 让它只占文字那么宽，不横跨整行，免得点别处也触发。
   低调靠的是它的位置、字号和上面那句「只有在……才需要它」，不是靠让人点不中。 */
.payment-return .return-fallback a { display: block; width: fit-content; padding: 10px 0; color: var(--accent); font-weight: 700; }
@media (prefers-color-scheme: dark) {
  :root.payment-return {
    --bg: #17110d;
    --surface: #241a12;
    --text: #f7f0e6;
    --muted: #8a7862;
    --accent: #e8913a;
    --line: #3a2a1c;
    --danger: #ef6b52;
  }
}