/* 复盘镜 · 付费段卷宗皮 fpj-buy.css（WO-OPUS-018 全套，设计系统 v1 §0–§9 同一套 token）
   只给买家页（/buy/deep、/buy/checkout、/buy/files、/buy/support）用；承办台 /ops 不引这一份。
   免费 13 题是“索引卡”；付费 62 题是“档案的正本”——布面线装册子，一页一题。更沉、更安静。
   三个动作只此三种：翻页（.pg 每次重建自动播一次）、穿线装订（交卷后）、钥匙开锁（付款后第一次进来）。
   reduced-motion：全部停在最后一帧，照常可用。不依赖任何动画结束事件。 */

/* ── 字体：付费独立子集（62 题／十补题／诚实出口／提示／政策／表单／数字日期全抽，build_buy_fonts.py 缺字即失败） ── */
@font-face{font-family:"FPJ Serif";font-style:normal;font-weight:500 900;font-display:swap;src:url("/buy/assets/fpj-serif-buy.woff2") format("woff2")}
@font-face{font-family:"FPJ Sans";font-style:normal;font-weight:400 500;font-display:swap;src:url("/buy/assets/fpj-sans-buy.woff2") format("woff2")}
@font-face{font-family:"Courier Prime";font-style:normal;font-weight:400;font-display:swap;src:url("/buy/assets/courier-prime-400-prep.woff2") format("woff2")}
@font-face{font-family:"Courier Prime";font-style:normal;font-weight:700;font-display:swap;src:url("/buy/assets/courier-prime-700-prep.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/buy/assets/plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/buy/assets/plex-mono-500.woff2") format("woff2")}

/* ── token：与公开站 site.css 逐值相同，另加布面四色 ── */
:root{
  --desk:#E3DBCB;--paper:#F4EFE4;--paper-2:#ECE5D6;--card:#FBF8F0;
  --ink:#25221D;--ink-2:#3B372F;--muted:#645D50;--rule:#D3C9B5;--cin:#A63F2B;--gold:#9C7A2E;
  --shadow:rgba(58,44,24,.30);--lamp:transparent;--seal-in:#F4EEE2;
  --btn-bg:#25221D;--btn-fg:#F4EFE4;
  --kraft:#CDB68D;--kraft-ink:#4A3B26;--kraft-edge:#B39B6F;
  --cloth:#2B241C;--cloth-2:#3A3026;--cloth-ink:#E9DDC6;--thread:#C9B48A;
  --line:#A89F8C;
  --serif:"FPJ Serif","Songti SC","STSong","SimSun",serif;
  --sans:"FPJ Sans","PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei",sans-serif;
  --mono:"IBM Plex Mono","FPJ Sans","PingFang SC",ui-monospace,monospace;
  --type:"Courier Prime","FPJ Sans","PingFang SC","Courier New",monospace;
  --w-read:500;--w-strong:700;
  --e-out:cubic-bezier(.2,.7,.2,1);--e-stamp:cubic-bezier(.3,1.6,.5,1);
  --gut:20px;--max:1120px;--bar:56px;color-scheme:light}
:root[data-mode="lamp"]{
  --desk:#0D0B09;--paper:#1C1712;--paper-2:#241D16;--card:#241D16;
  --ink:#E4D9C3;--ink-2:#D2C5AC;--muted:#9C8F78;--rule:#3A3027;--cin:#CC6E54;--gold:#C7A15A;
  --shadow:rgba(0,0,0,.7);--lamp:rgba(255,186,110,.15);--seal-in:#1C1712;
  --btn-bg:#E4D9C3;--btn-fg:#1C1712;
  --kraft:#3A2E21;--kraft-ink:#D9C7A4;--kraft-edge:#4B3C2B;
  --cloth:#2E241A;--cloth-2:#3E3226;--cloth-ink:#E4D9C3;--thread:#B39C6E;--line:#5A4E40;
  --w-read:600;--w-strong:800;color-scheme:dark}

/* ── 基础 ── */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--desk);color:var(--ink);font:400 16px/1.75 var(--sans);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 70% at 18% -8%,var(--lamp),transparent 62%);background-repeat:no-repeat}
main{flex:1 0 auto}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--cin);outline-offset:3px}
h1,h2,h3{text-wrap:balance}
/* 动态标题被程序聚焦：不画方框，画一道朱笔下划线（键盘、读屏都知道“到了这一屏”） */
h2[tabindex="-1"]:focus{outline:none}
h2[tabindex="-1"]:focus-visible{outline:none;text-decoration:underline 2px var(--cin);text-underline-offset:.32em;text-decoration-skip-ink:none}
h1,h2,.slip h2,.end-pg h2{word-break:keep-all;overflow-wrap:anywhere}
p,li,dd{text-wrap:pretty}
/* 动态标题被聚焦时不躲到黏顶顶栏下面 */
html{scroll-padding-top:calc(var(--bar) + 16px)}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--paper);padding:10px 14px}
.skip:focus{left:10px;top:10px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.mono{font:500 11.5px/1.4 var(--mono);letter-spacing:.16em;color:var(--muted);text-transform:uppercase;margin:0}
.candidate{background:var(--cin);color:var(--seal-in);font:500 12px/1.5 var(--sans);text-align:center;padding:6px var(--gut)}

/* ── 顶栏（与公开站同一条；售后入口在 ≤420 收进页尾，页尾永远看得到） ── */
.bar{position:sticky;top:0;z-index:30;background:var(--desk);background:color-mix(in srgb,var(--desk) 92%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:var(--bar)}
.brand{display:flex;align-items:center;text-decoration:none;margin-left:-6px}
.brand .logo{height:36px;width:auto}
.brand .logo-lamp{display:none}
:root[data-mode="lamp"] .brand .logo-day{display:none}
:root[data-mode="lamp"] .brand .logo-lamp{display:block}
.bar nav{display:flex;align-items:center;gap:14px}
.bar nav>a{font:500 13px/1 var(--sans);color:var(--muted);text-decoration:none;letter-spacing:.06em;padding:12px 0}
.bar nav>a[aria-current="page"]{color:var(--ink)}
.mode{display:flex;border:1px solid var(--rule);border-radius:999px;padding:2px}
.mode button{font:500 12px/1 var(--sans);letter-spacing:.12em;color:var(--muted);background:none;border:0;border-radius:999px;padding:7px 10px;cursor:pointer;min-height:30px}
.mode button[aria-pressed="true"]{background:var(--paper-2);color:var(--ink)}
@media (max-width:420px){.bar .nav-support{display:none}.brand .logo{height:32px}.bar nav{gap:10px}}

/* ── 按钮（共用） ── */
.cta,.buy .primary,.buy form button,.buy .acts button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:12px 20px;
  background:var(--btn-bg);color:var(--btn-fg);font:500 17px/1.3 var(--sans);letter-spacing:.08em;text-decoration:none;text-align:center;
  border:0;border-radius:2px;box-shadow:0 10px 20px -12px var(--shadow);cursor:pointer}
.cta:active,.buy .primary:active,.buy form button:active{transform:translateY(1px)}
.cta.ghost,.buy .secondary,.buy .acts button+button{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:10px 18px;
  background:transparent;color:var(--ink);border:1px solid var(--ink);box-shadow:none;font:500 16px/1.3 var(--sans);letter-spacing:.06em;text-decoration:none;border-radius:2px;cursor:pointer}
.buy button:disabled,.buy button[aria-disabled="true"]{opacity:.5;cursor:default;transform:none}
.cta svg{width:22px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;flex:none}
.link2{display:inline-flex;align-items:center;gap:6px;font:500 15px/1.3 var(--sans);color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule);padding:12px 0 6px;letter-spacing:.04em}
.fine{font-size:13.5px;line-height:1.7;color:var(--muted)}
.seal{display:inline-grid;grid-template-columns:1fr 1fr;place-items:center;width:62px;height:62px;border:2.5px solid var(--cin);color:var(--cin);font:900 19px/1 var(--serif);border-radius:4px;padding:5px;opacity:.9;transform:rotate(-8deg)}
.seal span{display:block;line-height:1}
.motion .stamp{animation:stamp .5s var(--e-stamp) both}
@keyframes stamp{0%{opacity:0;transform:scale(1.9) rotate(-18deg)}70%{opacity:.95}100%{opacity:.9;transform:scale(1) rotate(-8deg)}}

/* ── 页尾（付费段：售后入口每页常驻，键盘可达） ── */
.foot{margin-top:56px;border-top:1px solid var(--rule);padding-block:28px 40px;font-size:13px;line-height:1.8;color:var(--muted)}
.foot nav{display:flex;flex-wrap:wrap;gap:0 20px;margin:0 0 6px}
.foot nav a{display:inline-block;text-decoration:none;color:var(--ink-2);padding:10px 0;min-height:44px}
.foot nav a.support{color:var(--ink);border-bottom:1px solid var(--rule)}
.foot p{margin:6px 0 0}
.foot .motto{display:flex;align-items:center;gap:10px;margin-top:14px;font:600 15px/1.6 var(--serif);color:var(--ink)}
.seal-mini{display:inline-grid;grid-template-columns:1fr 1fr;width:22px;height:22px;background:var(--cin);color:var(--seal-in);border-radius:3px;font:900 8.5px/11px var(--serif);text-align:center;transform:rotate(-4deg);opacity:.85}
.seal-mini i{font-style:normal}
.foot .filings{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px}
.foot .filings a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--muted);min-height:44px}
.foot .filings img{width:16px;height:auto}

/* ═══════════════════ 一、深测：布面线装册子，一页一题 ═══════════════════ */
.deep main{padding-top:14px}
.spine{display:flex;justify-content:center;margin:0 0 14px}
.spine h1{margin:0;padding:7px 16px 6px;background:var(--cloth);color:var(--cloth-ink);font:700 14px/1.2 var(--serif);letter-spacing:.32em;text-indent:.32em;border-radius:1px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--thread) 45%,transparent)}
/* 根节点就是这本册子：册子底下与左边露一圈深色布；报告等待／轻提示两种状态不画布面 */
#assessment{position:relative;max-width:520px;margin:0 auto;padding:0 0 10px 10px;line-height:1.75}
#assessment::before{content:"";position:absolute;left:0;top:6px;bottom:0;right:10px;background:var(--cloth);border-radius:2px 4px 4px 2px;box-shadow:0 26px 40px -26px var(--shadow)}
#assessment[data-ui-phase="hint"]::before,#assessment[data-ui-phase^="report"]::before,#assessment:empty::before{display:none}
#assessment:empty{min-height:420px}
#assessment[aria-busy="true"]{cursor:progress}
.pg{position:relative;z-index:2;background:var(--paper);min-height:min(560px,calc(100svh - 190px));padding:18px 20px 22px 34px;margin-right:calc(var(--edge,8px) + 2px);
  border-radius:1px 2px 2px 1px;box-shadow:inset 14px 0 18px -14px rgba(58,44,24,.28)}
:root[data-mode="lamp"] .pg{background:#1F1913;box-shadow:inset 14px 0 18px -14px rgba(0,0,0,.6),0 0 0 1px #2C241B}
.pg::before{content:"";position:absolute;left:18px;top:0;bottom:0;border-left:1px dotted color-mix(in srgb,var(--ink) 25%,transparent)}  /* 订线一侧 */
/* 书口：右边露出还没答的页，一页一道细线，答得越多越薄（--edge 由模板按 data-index／data-total 给） */
.pg .edge{position:absolute;top:4px;bottom:-4px;right:calc(-1 * var(--edge,8px) - 2px);width:var(--edge,8px);
  background:repeating-linear-gradient(90deg,var(--paper) 0 1px,var(--rule) 1px 2px);border-radius:0 2px 2px 0;pointer-events:none}
/* 翻页：新的一页从书口那边压过来，一道阴影扫过（每次重建 .pg 播一次 .42s；JS 不等它） */
.motion .pg{animation:turn .42s var(--e-out)}
.motion .pg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0,rgba(58,44,24,.14) 60%,transparent 100%);animation:sweep .42s var(--e-out) both;pointer-events:none}
.motion .pg.stay,.motion .pg.stay::after{animation:none}
.pg.stay::after{display:none}
@keyframes turn{from{transform:translateX(14px);opacity:.35}to{transform:none;opacity:1}}
@keyframes sweep{from{transform:translateX(30%);opacity:1}to{transform:translateX(-60%);opacity:0}}

/* 页眉：页码就是动态 h2（第一个 h2），右边一枚小小的档案号（装饰） */
.folio{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.folio h2{margin:0;font:700 13px/1.2 var(--type);letter-spacing:.12em;color:var(--ink-2)}
.folio h2 b{color:var(--cin);font-weight:700;font-size:15px}
.folio .fn{font:500 10px/1 var(--mono);letter-spacing:.22em;color:var(--muted)}
.pg h3{margin:22px 0 0;font:900 24px/1.4 var(--serif);letter-spacing:.04em}
.pg .stem{margin:12px 0 0;font:var(--w-read) 17px/1.95 var(--serif);color:var(--ink)}
.pg .prompt{margin:14px 0 0;font:500 14px/1.6 var(--sans);color:var(--muted);letter-spacing:.06em}

/* 选项：写在纸上的几行，不是按钮框；圆点＝铅笔圈 */
.opts{margin-top:10px;border-top:1px solid var(--rule)}
#assessment .opts button{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:start;width:100%;min-height:52px;padding:14px 4px 14px 0;
  background:none;border:0;border-bottom:1px solid var(--rule);border-radius:0;box-shadow:none;color:var(--ink);font:400 16.5px/1.7 var(--sans);letter-spacing:0;text-align:left;cursor:pointer}
#assessment .opts button::before{content:"";width:14px;height:14px;margin-top:6px;border:1.5px solid color-mix(in srgb,var(--ink) 55%,transparent);border-radius:50%;transition:background-color .18s,border-color .18s}
#assessment .opts button:hover::before{border-color:var(--cin)}
#assessment .opts button:active::before{background:var(--cin);border-color:var(--cin)}
#assessment .opts button[aria-pressed="true"]{font-weight:500}
#assessment .opts button[aria-pressed="true"]::before{background:var(--cin);border-color:var(--cin);box-shadow:inset 0 0 0 2.5px var(--paper)}
/* 书签丝带：原答那一行，丝带从书口伸出去（不只靠颜色：圆点实心＋字重＋丝带三处同时变） */
#assessment .opts button[aria-pressed="true"]::after{content:"";position:absolute;right:calc(-1 * (var(--edge,8px) + 34px));top:50%;width:32px;height:13px;margin-top:-6.5px;background:var(--cin);
  clip-path:polygon(0 0,100% 0,78% 50%,100% 100%,0 100%);box-shadow:0 2px 3px -1px var(--shadow)}
#assessment .opts button:focus-visible{outline:2px solid var(--cin);outline-offset:2px}

/* 旁注：诚实出口（两项都像／都不太像／难以代入／暂不回答，M 题另有几句情况说明）。
   Wayne 拍：收成一组，但一眼看得到、手指点得到——每格 ≥44px、实线框；短的两格一行，长句自己占一行，字不缩、不裁。DOM 顺序＝原题顺序。 */
.aside{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
#assessment .aside button{flex:1 1 auto;min-width:calc(50% - 4px);min-height:44px;padding:10px 12px;background:transparent;border:1px solid var(--line);border-radius:2px;box-shadow:none;
  color:var(--ink-2);font:400 14.5px/1.4 var(--sans);letter-spacing:.02em;text-align:center;cursor:pointer}
#assessment .aside button:hover{border-color:var(--ink-2)}
#assessment .aside button:active,#assessment .aside button[aria-pressed="true"]{border-color:var(--cin);color:var(--cin);background:color-mix(in srgb,var(--cin) 7%,transparent)}
#assessment .aside button[aria-pressed="true"]{border-width:2px;padding:9px 11px;font-weight:500}
#assessment .aside button:focus-visible{outline:2px solid var(--cin);outline-offset:2px}
/* 上一题／保留原答，下一题／重试 */
.nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px}
#assessment .nav button{min-height:44px;padding:10px 2px;background:none;border:0;border-radius:0;box-shadow:none;color:var(--muted);font:500 14px/1.3 var(--sans);letter-spacing:.06em;cursor:pointer;width:auto}
#assessment .nav button:only-child{margin-left:auto}
#assessment .nav button.fwd{margin-left:auto;color:var(--ink);border-bottom:1px solid var(--ink)}
#assessment>button{display:block;width:auto;margin:14px 0 0 auto;position:relative;z-index:3;min-height:44px;padding:10px 18px;background:var(--btn-bg);color:var(--btn-fg);border:0;border-radius:2px;font:500 15px/1 var(--sans);cursor:pointer}
#assessment button:disabled{opacity:.5;cursor:progress}

/* 两项都像：同一页上铺开，原生勾选框（label 包住），最多两项 */
.pg .lead{margin:16px 0 0;font:var(--w-read) 16px/1.9 var(--serif);color:var(--ink-2)}
.checks{display:grid;gap:0;margin-top:14px;border-top:1px solid var(--rule)}
#assessment .checks label{display:flex;align-items:flex-start;gap:12px;min-height:52px;padding:13px 0;border-bottom:1px solid var(--rule);font:400 16px/1.7 var(--sans);cursor:pointer}
#assessment .checks input[type=checkbox]{flex:none;width:20px;height:20px;margin:4px 0 0;accent-color:var(--cin)}
#assessment .checks input:focus-visible{outline:2px solid var(--cin);outline-offset:3px}
#assessment .checks label:has(input:checked){color:var(--ink);font-weight:500}
.pg .acts{display:grid;gap:8px;margin-top:22px}

/* 扉页（开始之前／免费重测）：书名页，一枚红章 */
.pg.cover-pg{padding-top:30px}
.cover-pg .mark{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.cover-pg h2{margin:0;font:900 30px/1.35 var(--serif);letter-spacing:.06em}
.cover-pg .prose{margin-top:14px}
.prose p{margin:14px 0 0;font:var(--w-read) 16.5px/1.95 var(--serif);color:var(--ink-2)}
.prose p:first-child{color:var(--ink);font-weight:700}
.cover-pg .acts{margin-top:28px}
.cover-pg .seal{width:54px;height:54px;font-size:16px}

/* 回顾（62 题答完）：账本式双线收尾 */
.pg.end-pg{display:flex;flex-direction:column;justify-content:center}
.end-pg .tally{font:700 12px/1 var(--type);letter-spacing:.18em;color:var(--muted);margin:0 0 14px}
.end-pg h2{margin:0;font:900 26px/1.5 var(--serif);letter-spacing:.03em}
.end-pg .rule2{height:5px;margin:22px 0 4px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);transform-origin:0 50%}
.motion .end-pg .rule2{animation:drawline .8s var(--e-out) .2s both}
@keyframes drawline{from{transform:scaleX(0)}to{transform:none}}
#assessment[data-ui-phase="submitting"] .rule2{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* 补题：夹进册子的十张牛皮纸夹页（过门＝第一张夹页） */
.pg.insert{background:color-mix(in srgb,var(--kraft) 30%,var(--paper));}
.pg.insert::before{border-left-color:color-mix(in srgb,var(--kraft-ink) 30%,transparent)}
.pg.insert .folio{border-bottom-color:color-mix(in srgb,var(--kraft-edge) 70%,transparent)}
.insert .tabtag{position:absolute;right:-6px;top:-12px;padding:4px 10px 5px;background:var(--kraft);color:var(--kraft-ink);font:700 11px/1 var(--type);letter-spacing:.16em;border:1px solid var(--kraft-edge);border-bottom:0;transform:rotate(2deg)}
.bridge-pg h2{margin:6px 0 0;font:900 28px/1.4 var(--serif);letter-spacing:.04em}

/* 轻提示：夹在两页之间的一张薄纸条（不画布面） */
.slip{position:relative;max-width:460px;margin:30px auto 0;padding:24px 20px 18px;background:var(--card);border:1px solid var(--rule);box-shadow:0 14px 24px -16px var(--shadow);transform:rotate(-.8deg)}
.slip::before{content:"";position:absolute;left:22px;top:-15px;width:64px;height:17px;background:var(--card);border:1px solid var(--rule);border-bottom:0}
.slip h2{margin:0;font:600 18.5px/1.75 var(--serif)}
.slip .two{display:grid;gap:8px;margin-top:18px}
.motion .slip{animation:slipin .5s var(--e-out) both}
@keyframes slipin{from{transform:translateY(-18px) rotate(-.8deg);opacity:0}to{transform:rotate(-.8deg);opacity:1}}

/* 状态行（root 外）：小小一枚打字机字，盖在册子下方 */
#assessment-status{max-width:520px;min-height:1.6em;margin:10px auto 0;padding:0 14px 0 10px;text-align:right;font:700 11.5px/1.6 var(--type);letter-spacing:.14em;color:var(--cin)}
.deep .later{max-width:520px;margin:18px auto 0;text-align:center}
.deep .later a{display:inline-block;padding:12px 4px;font-size:14px;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)}
.deep .later .fine{margin:2px 0 0;font-size:12.5px}
#assessment[data-ui-phase^="report"]~.later{display:none}
/* 续答：上次存到的那一页夹着一根书签（不加字） */
.pg .bookmark{position:absolute;right:46%;top:-10px;width:14px;height:58px;background:var(--cin);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);box-shadow:0 3px 4px -2px var(--shadow);z-index:3}
.motion .pg .bookmark{animation:drop .6s var(--e-out) .3s both}
@keyframes drop{from{transform:translateY(-24px);opacity:0}to{transform:none;opacity:1}}

/* 交卷后：线装四眼订（等待／就绪／再看一次／需重新登录） */
.bind{position:relative;max-width:460px;margin:0 auto;padding-top:10px;text-align:center;display:flex;flex-direction:column;align-items:center}
.bind .stack{order:-2}
.bind .kick{order:-1;margin:0;font:500 11.5px/1.4 var(--mono);letter-spacing:.2em;color:var(--muted)}
.bind h2{margin:10px 0 0;font:900 27px/1.4 var(--serif)}
.bind .note{margin:10px auto 0;max-width:24em;color:var(--ink-2);line-height:1.85}
.bind .acts{width:100%;max-width:340px;margin:26px auto 0;display:grid;gap:8px}
.bind #report-wait-status{min-height:1.6em;margin:14px 0 0;font:700 11.5px/1.6 var(--type);letter-spacing:.14em;color:var(--muted)}
.stack{position:relative;width:220px;height:280px;margin:6px auto 30px}
.stack .leaf{position:absolute;inset:0;background:var(--paper);border:1px solid var(--rule)}
.stack .leaf.l2{transform:translate(5px,5px);background:var(--paper-2)}.stack .leaf.l3{transform:translate(10px,10px);background:var(--paper-2)}
.stack .leaf.l1 i{position:absolute;left:52px;right:22px;height:1px;background:var(--rule)}
.stack .cover{position:absolute;inset:0;z-index:4;background:var(--cloth);border-radius:1px 3px 3px 1px;transform-origin:0 50%;box-shadow:inset 6px 0 10px -6px rgba(0,0,0,.5),0 24px 34px -22px var(--shadow)}
.stack .cover .label{position:absolute;right:24px;top:22px;width:40px;padding:12px 0;background:var(--paper);border:1px solid var(--thread);display:grid;justify-items:center;gap:3px;font:900 15px/1 var(--serif);color:var(--ink)}
.stack .cover .no{position:absolute;right:20px;bottom:16px;font:700 9.5px/1 var(--type);letter-spacing:.16em;color:var(--cloth-ink);opacity:.7}
.stack svg{position:absolute;left:-8px;top:0;width:60px;height:280px;z-index:5;overflow:visible}
.stack svg .hole{fill:var(--desk);stroke:var(--rule)}
.stack svg .thr{fill:none;stroke:var(--thread);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:0}
.stack .readyseal{position:absolute;right:-22px;bottom:52px;z-index:6;display:none}
.bind.ready .stack .readyseal{display:inline-grid}
.bind.ready .stack .cover .label{border-color:var(--cin)}
/* 等待：线一针一针穿过去，穿完封面合上，线尾轻晃——循环到真就绪；就绪：章盖下去 */
.motion .bind.wait .stack svg .thr{stroke-dashoffset:900;animation:sew 3s cubic-bezier(.45,0,.3,1) .4s forwards}
.motion .bind.wait .stack .cover{animation:shut .9s cubic-bezier(.5,0,.2,1) 3.1s both}
.motion .bind.wait .stack svg .tail{animation:sway 3.6s ease-in-out 4.2s infinite;transform-origin:30px 268px}
.motion .bind.ready .readyseal{animation:stamp .5s var(--e-stamp) .15s both}
.bind.halt .stack .cover{opacity:.92}
@keyframes sew{to{stroke-dashoffset:0}}
@keyframes shut{from{transform:perspective(900px) rotateY(-96deg);opacity:0}30%{opacity:1}to{transform:none;opacity:1}}
@keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(5deg)}}

/* ═══════════════════ 二、下单／付款：一张登记单 ═══════════════════ */
.order main{padding-top:22px}
.ticket{position:relative;max-width:520px;margin:0 auto;background:var(--paper);border:1px solid var(--rule);box-shadow:0 22px 34px -24px var(--shadow);padding:26px 20px 24px 42px}
.ticket::before{content:"";position:absolute;inset:0 auto 0 26px;border-left:1px solid color-mix(in srgb,var(--cin) 22%,transparent);pointer-events:none}
.ticket h1{margin:4px 0 0;font:900 27px/1.42 var(--serif);letter-spacing:.02em}
.ticket .lead{margin:10px 0 0;color:var(--ink-2);font:var(--w-read) 16px/1.85 var(--serif)}
/* 价签：一张系线的小牌 */
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin:22px 0 0;padding:14px 16px;border:1px dashed var(--line);background:var(--card)}
.price .checkout-amount{margin:0;font:500 15px/1.4 var(--sans);color:var(--ink-2)}
.price .checkout-amount strong{font:900 34px/1 var(--serif);color:var(--ink);letter-spacing:.02em;margin-left:4px}
.price .fine{margin:0}
.ticket .before{margin:16px 0 0;font-size:14px;line-height:1.85;color:var(--ink-2)}
.ticket .after-flow{margin:18px 0 0;font-size:13.5px;color:var(--muted)}
.ticket .after-flow a{color:var(--ink-2);padding:12px 0;display:inline-block;min-height:44px}
/* #flow：同意条、两种付款、登录、核对码；动态片段由 checkout.js 写入 */
#flow{margin:20px 0 0}
#flow:empty{min-height:120px}
.docs{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.docs li{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--rule)}
.docs a{flex:1;display:flex;align-items:center;gap:10px;min-height:52px;padding:12px 0;font:500 16px/1.4 var(--sans);text-decoration:none;color:var(--ink)}
.docs a::before{content:"";flex:none;width:12px;height:15px;border:1.3px solid var(--muted);border-radius:1px;background:linear-gradient(var(--muted),var(--muted)) 2px 4px/6px 1px no-repeat,linear-gradient(var(--muted),var(--muted)) 2px 7px/6px 1px no-repeat}
.docs .ver{flex:none;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--muted)}
.consent{display:flex;align-items:flex-start;gap:12px;margin:18px 0 0;padding:14px 14px;background:var(--card);border:1px solid var(--rule);font:400 15px/1.7 var(--sans);cursor:pointer}
.consent input{flex:none;width:22px;height:22px;margin:2px 0 0;accent-color:var(--cin)}
.consent:has(input:checked){border-color:var(--ink-2)}
#flow .actions{display:grid;gap:8px;margin-top:16px}
#flow .actions button{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:12px 20px;background:var(--btn-bg);color:var(--btn-fg);font:500 17px/1.3 var(--sans);letter-spacing:.08em;border:0;border-radius:2px;cursor:pointer;box-shadow:0 10px 20px -12px var(--shadow)}
#flow .actions #check{background:transparent;color:var(--ink);border:1px solid var(--ink);box-shadow:none;min-height:52px;font-size:16px}
#flow .actions button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.oid{margin:0 0 6px;font:500 12px/1.5 var(--mono);letter-spacing:0;color:var(--muted);word-break:break-all}
.oid b{display:block;font:700 10.5px/1.4 var(--type);letter-spacing:.2em;color:var(--muted)}
/* 付款二维码（本单）与登录二维码（#qr）各自一枚邮票框，不混 */
#payment:empty{display:none}
#payment,#qr:not(:empty){margin:14px auto 0;width:max-content;max-width:100%;padding:12px;background:#fff;border:1px solid var(--rule);box-shadow:0 12px 20px -14px var(--shadow);
  -webkit-mask:radial-gradient(circle 5px at 5px 5px,#0000 98%,#000) -5px -5px/12px 12px round;mask:none}
#payment img,#qr img{width:240px;height:240px;image-rendering:pixelated}
#qr{text-align:center;color:#25221D}
#qr p{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:#645D50}
#qr strong{display:block;font:700 30px/1.2 var(--mono);letter-spacing:.3em;color:#25221D}
#flow>p{margin:12px 0 0;font-size:15px;line-height:1.75;color:var(--ink-2)}
#flow>a.primary,#flow>button{margin-top:16px}
#flow>button{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:10px 18px;background:transparent;color:var(--ink);border:1px solid var(--ink);border-radius:2px;font:500 16px/1.3 var(--sans);letter-spacing:.06em;cursor:pointer}
#scan{margin-bottom:6px}
#confirm{display:grid;gap:14px}
#confirm label{display:grid;gap:8px;font:500 14px/1.4 var(--sans);color:var(--muted);letter-spacing:.06em}
#confirm input,.buy select,.buy textarea{width:100%;min-height:52px;padding:12px 14px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:2px;font:400 16px/1.5 var(--sans)}
#confirm input{font:700 26px/1.2 var(--mono);letter-spacing:.4em;text-align:center}
#status{min-height:1.6em;margin:14px 0 0;font-size:14px;line-height:1.7;color:var(--cin)}
#status:empty{min-height:0;margin:0}
.closed-ticket .note{margin:14px 0 0;color:var(--ink-2);line-height:1.85}
.stamp-closed{display:inline-block;margin:6px 0 4px;padding:5px 10px;border:2px solid var(--muted);color:var(--muted);font:900 15px/1 var(--serif);letter-spacing:.2em;transform:rotate(-6deg);opacity:.85}

/* ═══════════════════ 三、我的档案：档案柜里的牛皮纸文件夹 ═══════════════════ */
.files main,.support main{padding-top:26px}
.files .ph,.support .ph{max-width:680px;margin:0 auto}
.ph .kicker{margin:0;font:500 11.5px/1.4 var(--mono);letter-spacing:.2em;color:var(--muted)}
.ph h1{margin:10px 0 0;font:900 30px/1.36 var(--serif);letter-spacing:.02em}
.ph .lead{margin:8px 0 0;font:700 14px/1.4 var(--serif);letter-spacing:.3em;color:var(--cin)}
.ph .fine{margin:8px 0 0}
.drawer{max-width:680px;margin:26px auto 0;display:grid;gap:34px}
/* 一个订单＝一只文件夹：顶上一枚签条（状态），夹里是档案卡 */
.folder{position:relative;margin-top:14px;background:var(--kraft);color:var(--kraft-ink);border:1px solid var(--kraft-edge);border-radius:2px 6px 4px 4px;padding:20px 16px 18px;
  box-shadow:0 22px 30px -24px var(--shadow)}
.folder::before{content:"";position:absolute;left:-1px;top:-15px;width:46%;max-width:240px;height:16px;background:var(--kraft);border:1px solid var(--kraft-edge);border-bottom:0;border-radius:5px 12px 0 0}
.folder .record-meta{position:absolute;left:12px;top:-12px;right:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;z-index:2}
.badge{display:inline-block;font:700 11.5px/1 var(--type);letter-spacing:.14em;color:var(--kraft-ink)}
.folder .record-meta .fine{font:500 12px/1 var(--mono);color:var(--kraft-ink);opacity:.8;padding-top:14px}
.sheet{position:relative;background:var(--paper);color:var(--ink);border:1px solid var(--rule);padding:20px 18px 18px;box-shadow:0 2px 0 var(--paper-2)}
.sheet h2{margin:0;font:900 22px/1.4 var(--serif);letter-spacing:.03em}
.sheet .id{margin:6px 0 0;font:500 12.5px/1.5 var(--mono);letter-spacing:.04em;color:var(--muted);word-break:break-all}
.sheet .entry{margin-top:16px;display:grid;gap:8px}
.sheet .entry p{margin:0}
.notice{margin:14px 0 0;padding:10px 12px;border-left:3px solid var(--cin);background:color-mix(in srgb,var(--cin) 6%,var(--paper));font-size:14.5px;line-height:1.75;color:var(--ink-2)}
.sheet details{margin-top:14px;border-top:1px solid var(--rule)}
.sheet summary{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 0;font:500 14.5px/1.4 var(--sans);color:var(--ink-2);cursor:pointer;list-style:none}
.sheet summary::-webkit-details-marker{display:none}
.sheet summary::before{content:"";width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);transition:transform .2s;margin-right:4px}
.sheet details[open] summary::before{transform:rotate(45deg)}
.sheet details p{margin:0 0 10px;font-size:14.5px;color:var(--ink-2)}
/* 借阅卡：有效交付／回访日期，等宽对齐 */
.sheet dl{display:grid;grid-template-columns:auto minmax(0,1fr);margin:16px 0 0;border:1px solid var(--rule);font-size:14px}
.sheet dt,.sheet dd{margin:0;padding:9px 10px;border-bottom:1px solid var(--rule)}
.sheet dt{color:var(--muted);border-right:1px solid var(--rule);font-size:13px;letter-spacing:.06em;white-space:nowrap}
.sheet dd{font:500 13.5px/1.5 var(--mono);color:var(--ink-2)}
.sheet dt:nth-last-of-type(1),.sheet dd:last-child{border-bottom:0}
.sheet form{margin-top:14px}
.sheet .actions,.folder>.actions{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:10px}
.sheet .actions a{display:inline-block;padding:12px 0;font-size:14px;color:var(--muted);min-height:44px}
.sheet .cases{margin-top:6px}
.sheet .cases a{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:48px;margin-top:8px;padding:10px 12px;border:1px solid var(--rule);background:var(--card);text-decoration:none;font-size:14.5px}
.sheet .cases a::after{content:"›";color:var(--muted)}
/* 状态：可读＝朱印；作答中＝书签；终止＝灰 */
.folder.readable .sheet::after{content:"";position:absolute;right:16px;top:-6px;width:12px;height:34px;background:var(--cin);clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%)}
.folder.revoked{filter:grayscale(.9);opacity:.82}
.folder.revoked .badge{color:var(--muted)}
.empty{max-width:680px;margin:26px auto 0;text-align:center}
.empty .tray{position:relative;width:240px;height:120px;margin:10px auto 22px}
.empty .tray .back{position:absolute;left:0;right:0;bottom:0;height:90px;background:var(--cloth);border-radius:2px}
.empty .tray .front{position:absolute;left:-8px;right:-8px;bottom:-4px;height:52px;background:var(--cloth-2);border-radius:2px;box-shadow:0 18px 26px -18px var(--shadow)}
.empty .tray .front::after{content:"";position:absolute;left:50%;top:16px;width:60px;height:16px;margin-left:-30px;border:2px solid var(--gold);border-radius:3px;background:color-mix(in srgb,var(--paper) 85%,transparent)}
.empty .tray .card{position:absolute;left:40px;right:40px;bottom:30px;height:70px;background:var(--paper);border:1px solid var(--rule);transform:rotate(-2deg)}
.empty h2{margin:0;font:900 22px/1.45 var(--serif)}
.empty p{margin:10px auto 0;max-width:26em;color:var(--ink-2);line-height:1.85}
.pager{max-width:680px;margin:22px auto 0;display:flex;justify-content:space-between}
.pager a{padding:12px 0;font-size:14.5px;color:var(--ink-2)}
.files .all{display:block;max-width:680px;margin:16px auto 0;padding:12px 0;font-size:14.5px;color:var(--ink-2);text-align:center}

/* 付款后第一次进来：钥匙插进档案盒，转一下，盖子开了（只此一次；GET 不消耗，点“开始作答”才确认） */
.welcome{max-width:460px;margin:64px auto 44px;text-align:center}
.box{position:relative;width:250px;height:212px;margin:4px auto 26px}
.box .body{position:absolute;left:0;right:0;bottom:0;height:146px;background:var(--cloth);border-radius:2px 2px 4px 4px;box-shadow:0 26px 36px -24px var(--shadow)}
.box .body::before{content:"";position:absolute;left:10px;right:10px;top:10px;height:1px;background:color-mix(in srgb,var(--cloth-ink) 18%,transparent)}
.box .page{position:absolute;left:24px;right:24px;bottom:40px;height:146px;background:var(--paper);border:1px solid var(--rule);padding:54px 18px 16px;text-align:left;transform:translateY(-40px)}
.box .page b{display:block;font:900 15px/1.3 var(--serif);color:var(--ink)}
.box .page i{display:block;height:1px;background:var(--rule);margin-top:12px}
.box .lid{position:absolute;left:-6px;right:-6px;top:56px;height:30px;background:var(--cloth-2);border-radius:3px;z-index:3;transform-origin:50% 0;box-shadow:0 6px 10px -6px rgba(0,0,0,.5);transform:translateY(-56px) rotate(-7deg)}
.box .plate{position:absolute;left:50%;top:90px;width:46px;height:58px;margin-left:-23px;z-index:4;border-radius:6px;background:radial-gradient(circle at 35% 30%,#E8D29A,var(--gold) 55%,#6B5320);box-shadow:0 4px 8px -4px rgba(0,0,0,.6)}
.box .plate::after{content:"";position:absolute;left:50%;top:18px;width:10px;height:22px;margin-left:-5px;background:#2A2116;border-radius:5px 5px 2px 2px;clip-path:polygon(0 0,100% 0,100% 45%,72% 55%,80% 100%,20% 100%,28% 55%,0 45%)}
.box .key{position:absolute;left:50%;top:92px;width:30px;height:56px;margin-left:-15px;z-index:5;border-radius:9px;border:1.5px solid #6B5320;background:linear-gradient(90deg,#B8964A,#E3CB8B 45%,#9C7A2E);box-shadow:0 8px 12px -6px rgba(0,0,0,.7);transform:rotate(90deg)}
.box .key::before{content:"";position:absolute;left:50%;top:8px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--cloth);box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.box .key::after{content:"";position:absolute;left:50%;bottom:6px;width:10px;height:2px;margin-left:-5px;background:rgba(0,0,0,.25);box-shadow:0 -4px 0 rgba(0,0,0,.18)}
.motion .welcome .key{animation:keyin .5s var(--e-out) .3s both,keyturn .5s cubic-bezier(.3,1.4,.5,1) 1s both}
.motion .welcome .plate{animation:clack .18s ease-out 1.45s}
.motion .welcome .lid{animation:lidup .7s cubic-bezier(.4,0,.2,1) 1.65s both}
.motion .welcome .page{animation:pageup .7s var(--e-out) 2s both}
@keyframes keyin{from{opacity:0;transform:scale(1.7) translateY(-10px)}to{opacity:1;transform:none}}
@keyframes keyturn{from{transform:none}to{transform:rotate(90deg)}}
@keyframes clack{50%{transform:translateY(1.5px)}}
@keyframes lidup{from{transform:none}to{transform:translateY(-56px) rotate(-7deg)}}
@keyframes pageup{from{transform:translateY(60px);opacity:0}to{transform:translateY(-40px);opacity:1}}
.welcome .kick{display:flex;justify-content:center;gap:12px;margin:0;font:500 11.5px/1.4 var(--mono);letter-spacing:.16em;color:var(--muted)}
.welcome .kick .ok{color:var(--cin)}
.welcome h2{margin:10px 0 0;font:900 28px/1.42 var(--serif);outline:none}
.welcome .note{margin:10px auto 0;max-width:24em;color:var(--ink-2);line-height:1.85}
.welcome form{max-width:340px;margin:24px auto 0}
.welcome .fine{margin:12px 0 0}

/* ═══════════════════ 四、售后与隐私：收件登记簿 ═══════════════════ */
.support .formcard{max-width:680px;margin:24px auto 0;background:var(--paper);border:1px solid var(--rule);padding:22px 18px 20px;box-shadow:0 22px 34px -24px var(--shadow)}
.support .formcard h2,.support .reg h2{margin:0 0 14px;font:900 21px/1.4 var(--serif)}
.support form{display:grid;gap:14px}
.support label{display:grid;gap:7px;font:500 14px/1.4 var(--sans);color:var(--muted);letter-spacing:.04em}
.support select[name=orderId]{font:500 13.5px/1.5 var(--mono)}
.support select{appearance:none;-webkit-appearance:none;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23645D50' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:36px}
.support textarea{min-height:120px;resize:vertical}
.support form .fine{margin:0}
.support .reg{max-width:680px;margin:30px auto 0}
.case-link{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:12px 2px;border-bottom:1px solid var(--rule);text-decoration:none}
.case-link:first-of-type{border-top:1px solid var(--rule)}
.case-link .fine{font-family:var(--mono);font-size:12.5px}
/* 收件回执：一张撕下来的回执联，齿孔在上 */
.receipt{position:relative;max-width:520px;margin:24px auto 0;background:var(--card);border:1px solid var(--rule);padding:30px 18px 20px;box-shadow:0 22px 34px -24px var(--shadow)}
.receipt::before{content:"";position:absolute;left:0;right:0;top:-1px;height:10px;background:radial-gradient(circle at 6px -1px,var(--desk) 5px,transparent 5.5px) 0 0/12px 10px repeat-x}
.receipt .badge{position:absolute;right:16px;top:20px;padding:6px 10px;border:2px solid var(--cin);color:var(--cin);font:900 14px/1 var(--serif);letter-spacing:.14em;transform:rotate(-6deg)}
.receipt .id{margin:0;font:500 12.5px/1.5 var(--mono);color:var(--muted);word-break:break-all;padding-right:90px}
.receipt dl{display:grid;grid-template-columns:auto minmax(0,1fr);margin:16px 0 0;border-top:1px dashed var(--line);font-size:14px}
.receipt dt,.receipt dd{margin:0;padding:10px 4px;border-bottom:1px dashed var(--line)}
.receipt dt{color:var(--muted);font-size:13px;white-space:nowrap;padding-right:14px}
.receipt dd{font:500 13.5px/1.5 var(--mono);color:var(--ink-2)}
.receipt p{line-height:1.8;color:var(--ink-2)}
.receipt ul{padding-left:1.2em;color:var(--ink-2);line-height:1.8}
.support .extra{max-width:520px;margin:20px auto 0}
.support .back{max-width:520px;margin:12px auto 0;text-align:center}
.support .back a{display:inline-block;padding:12px 0;color:var(--ink-2)}
.signin .login,.login{max-width:460px;margin:30px auto 0;text-align:center}
.login h1{margin:0 0 22px;font:900 27px/1.42 var(--serif)}
.login .keyhole{width:46px;height:58px;margin:0 auto 20px;border-radius:6px;background:radial-gradient(circle at 35% 30%,#E8D29A,var(--gold) 55%,#6B5320);position:relative}
.login .keyhole::after{content:"";position:absolute;left:50%;top:18px;width:10px;height:22px;margin-left:-5px;background:#2A2116;border-radius:5px 5px 2px 2px;clip-path:polygon(0 0,100% 0,100% 45%,72% 55%,80% 100%,20% 100%,28% 55%,0 45%)}

/* ═══════════════════ 电脑版 ═══════════════════ */
@media (min-width:900px){
  :root{--gut:40px}
  .brand .logo{height:40px}
  #assessment,#assessment-status,.deep .later{max-width:600px}
  .pg{padding:28px 36px 30px 48px}
  .pg::before{left:26px}
  .pg h3{font-size:28px}
  .pg .stem{font-size:18px}
  .cover-pg h2,.bridge-pg h2{font-size:34px}
  .bind h2,.welcome h2{font-size:34px}
  .stack{width:236px;height:300px}.stack svg{height:300px}
  .ticket{max-width:640px;padding:36px 40px 34px}
  .ticket h1{font-size:34px}
  .ph h1{font-size:38px}
  .folder{padding:24px 22px 22px}
  .sheet{padding:24px 26px 22px}
  .sheet .entry{grid-template-columns:minmax(0,320px);}
  .files .drawer{gap:42px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* 回访、交付与退款说明（/buy/files/information）：六键原文不动，只换纸 */
.info{max-width:680px;margin:20px auto 0;display:grid;gap:16px}
.info .card{background:var(--paper);border:1px solid var(--rule);padding:20px 18px;box-shadow:0 18px 28px -24px var(--shadow)}
.info .card h2{margin:0 0 6px;font:900 20px/1.4 var(--serif);letter-spacing:.06em}
.info .card p{margin:10px 0 0;font:var(--w-read) 15.5px/1.95 var(--serif);color:var(--ink-2)}
.files .back,.info+.back{max-width:680px;margin:14px auto 0;text-align:center}
.files .back a{display:inline-block;padding:12px 0;color:var(--ink-2)}
.bind .acts .link2{justify-self:center}
/* 018 驗收順手（工頭 10-01）：手機上登記單左右各讓一點，標題不留孤字孤點（「确认是你正在用的电脑。」的句號不再獨占一行） */
@media (max-width:420px){.ticket{padding-left:36px;padding-right:14px}.ticket::before{left:22px}.ticket h1{letter-spacing:0}}

/* WO-OPUS-020 ④登录：一个环境一种方式；同一微信的提示 */
.login-wx{display:grid;gap:0}
.login-hint{margin:10px 0 0;font:400 13.5px/1.6 var(--sans);color:var(--muted);letter-spacing:.04em}
#flow .login-hint{text-align:center}
#flow>p.login-open{margin:4px 0 0;font:500 16px/1.75 var(--sans);color:var(--ink)}
/* WO-OPUS-020 ⑤回访：一句说明，页边朱线不用（那是 Care Line 的），这里用金线 */
.sheet .visit-note{margin:12px 0 0;padding:2px 0 2px 12px;border-left:2px solid var(--gold);font:400 14px/1.75 var(--sans);color:var(--ink-2)}
.sheet .visit-note b{font-weight:500;color:var(--ink)}

/* ═══════════════════ WO-OPUS-021 ═══════════════════ */
/* B2 手机浏览器：为什么＋三步＋看得见的链接 */
.open-in-wx{text-align:left;margin-top:4px}
.open-in-wx .ow-why{margin:0;font:500 16px/1.75 var(--sans);color:var(--ink)}
.open-in-wx .ow-steps{list-style:none;counter-reset:ow;margin:14px 0 0;padding:0;display:grid;gap:8px}
.open-in-wx .ow-steps li{counter-increment:ow;display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:baseline;font:400 15px/1.6 var(--sans);color:var(--ink-2)}
.open-in-wx .ow-steps li::before{content:counter(ow);display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--cin);border-radius:50%;color:var(--cin);font:600 12px/1 var(--type)}
.open-in-wx .ow-link{margin:16px 0 0;padding:12px 14px;border:1px dashed var(--ink-2);background:var(--paper);font:500 13px/1.6 var(--mono);color:var(--ink);word-break:break-all;-webkit-user-select:all;user-select:all}
#flow .open-in-wx #copy-link{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin-top:10px;padding:10px 18px;background:var(--btn-bg);color:var(--btn-fg);border:0;border-radius:2px;font:500 16px/1.3 var(--sans);letter-spacing:.06em;cursor:pointer;box-shadow:0 10px 20px -12px var(--shadow)}
/* B2／B3 电脑：二维码框的四种状态（生成中／好了／失败／过期） */
.qr-box{position:relative;display:grid;place-items:center;align-content:center;gap:6px;min-height:380px;margin:4px auto 0;max-width:340px;padding:18px;background:#fff;border:1px solid var(--rule);box-shadow:0 18px 30px -24px var(--shadow);color:#25221D;text-align:center}
.qr-box p{margin:0;font:400 13.5px/1.6 var(--sans);color:#5d564a}
.qr-box strong{font:700 30px/1.2 var(--type);letter-spacing:.24em}
.qr-box.loading p,.qr-box.failed p{font-size:15px;color:#3B372F}
.qr-wait{width:34px;height:34px;border-radius:50%;border:2px solid #D3C9B5;border-top-color:#A63F2B}
.motion .qr-wait{animation:qrspin .9s linear infinite}
@keyframes qrspin{to{transform:rotate(360deg)}}
.qr-box.failed{border-style:dashed;border-color:#A63F2B}
.qr-box.expired img{opacity:.18;filter:grayscale(1)}
.qr-box.expired .qr-over{position:absolute;left:18px;right:18px;top:42%;font:600 16px/1.5 var(--sans);color:#A63F2B}
#scan[hidden]{display:none}
/* B4 打不开的档案：空文件夹＋两条去路 */
.missing{max-width:460px;margin:40px auto 30px;text-align:center}
.missing .miss-file{position:relative;width:92px;height:66px;margin:0 auto 22px;border:1.5px dashed var(--kraft-edge);border-radius:3px 6px 4px 4px;background:color-mix(in srgb,var(--kraft) 30%,transparent)}
.missing .miss-file::before{content:"";position:absolute;left:-1.5px;top:-12px;width:44%;height:12px;border:1.5px dashed var(--kraft-edge);border-bottom:0;border-radius:4px 9px 0 0}
.missing .miss-file span{position:absolute;left:50%;top:50%;width:46px;height:1.5px;background:var(--cin);transform:translate(-50%,-50%) rotate(-24deg)}
.missing .kicker{margin:0;font:500 11.5px/1.4 var(--mono);letter-spacing:.2em;color:var(--muted)}
.missing h1{margin:8px 0 0;font:900 26px/1.42 var(--serif)}
.missing>p{margin:12px 0 0;font:400 16px/1.8 var(--sans);color:var(--ink-2)}
.missing .miss-go{display:grid;gap:10px;margin:24px 0 0}
.missing .fine{margin-top:18px;font-size:13.5px;line-height:1.7;color:var(--muted)}
.missing .fine a{color:var(--ink-2)}
/* B6 不能购买的环境：告示页（大印＋两句原文＋一张“已经购买过”卡） */
.notice-page{max-width:460px;margin:44px auto 30px;text-align:center}
.np-seal{display:inline-grid;grid-template-columns:1fr 1fr;width:64px;height:64px;margin:0 auto 20px;background:var(--cin);color:var(--seal-in,#F4EEE2);border-radius:6px;font:900 21px/30px var(--serif);transform:rotate(-5deg);box-shadow:0 10px 18px -12px var(--shadow)}
.np-seal i{font-style:normal}
.notice-page .kicker{margin:0;font:500 11.5px/1.4 var(--mono);letter-spacing:.22em;color:var(--muted)}
.notice-page h1{margin:8px 0 0;font:900 28px/1.4 var(--serif);letter-spacing:.02em}
.notice-page .np-lead{margin:14px auto 0;max-width:24em;font:400 16px/1.85 var(--sans);color:var(--ink-2)}
.np-card{position:relative;margin:26px 0 0;padding:20px 18px 16px 30px;background:var(--paper);border:1px solid var(--rule);text-align:left;box-shadow:0 18px 30px -24px var(--shadow)}
.np-card::before{content:"";position:absolute;inset:0 auto 0 16px;border-left:2px solid var(--cin)}
.np-card .np-k{margin:0 0 12px;font:600 13px/1 var(--sans);letter-spacing:.14em;color:var(--cin)}
.np-card .fine{margin:10px 0 0;font-size:13.5px;color:var(--muted)}
.np-links{display:flex;justify-content:center;gap:22px;margin:18px 0 0}
.np-links a{display:inline-block;min-height:44px;padding:12px 0;color:var(--ink-2);font-size:14px}
/* B1／B10 付款成功页：找回句＋“记住回来的路” */
.welcome .keep-entry,.keep-entry{margin:22px auto 0;max-width:420px;padding:16px 18px;border:1px dashed var(--kraft-edge);background:color-mix(in srgb,var(--kraft) 18%,var(--paper));text-align:left}
.keep-entry .ke-k{margin:0;font:600 12.5px/1 var(--sans);letter-spacing:.16em;color:var(--cin)}
.keep-entry .ke-addr{margin:10px 0 0;font:700 17px/1.5 var(--serif);color:var(--ink)}
.keep-entry .ke-addr i{font-style:normal;margin:0 8px;color:var(--muted)}
.keep-entry .ke-how{margin:6px 0 0;font:400 14px/1.75 var(--sans);color:var(--ink-2)}
.buy .keep-entry .ke-copy{display:inline-flex;width:auto;min-height:44px;margin-top:10px;padding:8px 14px;background:transparent;color:var(--ink);border:1px solid var(--ink);box-shadow:none;font:500 15px/1.3 var(--sans)}
.keep-entry .ke-done{margin:8px 0 0;min-height:1.4em;font-size:13px;color:var(--muted)}
#qr.qr-box{width:340px;max-width:100%;padding:18px}
.qr-box.expired .qr-over{background:rgba(255,255,255,.94);padding:10px 8px;border:1px solid #A63F2B;top:30%}
/* WO-OPUS-021 B11 本次规则：条款册语法的一张纸——纯呈现，无按钮、无链接、无现行对照 */
.accepted-terms{max-width:640px;margin:22px auto 0}
.at-head .kicker{margin:0;font:500 11.5px/1.4 var(--mono);letter-spacing:.2em;color:var(--muted)}
.at-head h1{margin:6px 0 0;font:900 26px/1.4 var(--serif)}
.at-head .at-when{margin:8px 0 0;font:400 13.5px/1.6 var(--sans);color:var(--muted)}
.at-doc{position:relative;margin:16px 0 0;padding:20px 18px 18px 30px;background:var(--paper);border:1px solid var(--rule);box-shadow:0 18px 30px -24px var(--shadow)}
.at-doc::before{content:"";position:absolute;inset:0 auto 0 16px;border-left:1px solid color-mix(in srgb,var(--cin) 22%,transparent)}
.at-doc>summary{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 10px;padding:2px 0 12px;border-bottom:1.5px solid var(--ink);cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.at-doc>summary::-webkit-details-marker{display:none}
.at-doc:not([open])>summary{border-bottom:none;padding-bottom:0}
.at-doc .at-tog{grid-column:1/-1;display:flex;align-items:center;gap:6px;font:500 13.5px/1.6 "PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei","Noto Sans SC",sans-serif;color:var(--cin)}
.at-doc .at-tog::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.at-doc[open] .at-tog::after{transform:rotate(-135deg) translateY(-1px)}
.at-doc .at-close,.at-doc[open] .at-open{display:none}.at-doc[open] .at-close{display:inline}
.at-doc>summary:focus-visible{outline:2px solid var(--cin);outline-offset:4px}
.at-doc h2{margin:0;font:900 21px/1.4 var(--serif)}
.at-doc .at-ver{margin:0;flex:none;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--muted)}
.at-doc section{margin-top:16px}
.at-doc h3{margin:0 0 6px;font:700 16px/1.5 var(--serif)}
.at-doc h3 .no{display:inline-block;min-width:1.6em;color:var(--cin)}
.at-doc p,.at-doc li{margin:0 0 8px;font:400 15px/1.85 var(--sans);color:var(--ink-2)}
.at-doc ul{margin:0 0 8px;padding-left:1.2em}
.at-doc p.at-note{padding:10px 12px;border-left:3px solid var(--cin);background:color-mix(in srgb,var(--cin) 6%,var(--paper))}
.at-doc b{color:var(--ink);font-weight:600}
/* B11 正文用系统字：条款原文会随版本变，买家字体子集无法预先收全；整段同一字体，不出现逐字跳字体 */
.at-doc p,.at-doc li{font-family:"PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei","Noto Sans SC",sans-serif}
.at-doc h2,.at-doc h3{font-family:"Songti SC","STSong","Noto Serif SC","SimSun",serif}

/* WO-GPT-028: existing ticket shell; fixed public entrance remains selectable if copying is unavailable. */
.mobile-browser-copy{margin:1.5rem 0;max-width:100%}.mobile-browser-url{overflow-wrap:anywhere;user-select:all}.mobile-browser-copy .copied{outline:2px solid currentColor;outline-offset:3px}