/* DeFiExit · 安全出口 —— 设计稿第二版:靛蓝主色、默认深色(可切浅色)、绿色只表示「已核对 / 已完成 / 已到账」。
   手机优先;字体放在本站(CSP 只放行本站);汉字用系统字体。 */

@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fonts/atkinson-next.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; src: url("fonts/atkinson-mono.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("fonts/barlow-sc-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("fonts/barlow-sc-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- 颜色:各管一件事。靛蓝 = 品牌和能点的;绿 = 已完成;黄 = 注意;红 = 停 ---------- */
:root {
  color-scheme: dark;
  --bg: #0A0F1E; --surface: #111831; --surface-2: #0D1428; --line: #253056; --line-2: #1C2645; --line-3: #2E3A63;
  --text: #EAF0FF; --sub: #A6B1CC; --faint: #8E9AB5;
  --accent: #5146E5; --accent-hover: #5E54F0; --on-accent: #FFFFFF;
  --hi: #A5A0FF; --hi-hover: #C7C4FF; --hi-soft: rgba(165, 160, 255, 0.22); --hi-border: #4A46B0;
  --glow: rgba(81, 70, 229, 0.40); --grid: rgba(165, 160, 255, 0.06);
  --ok: #34D399; --ok-bg: rgba(52, 211, 153, 0.12); --ok-line: rgba(52, 211, 153, 0.35); --ok-ink: #06281C;
  --warn: #FBBF24; --warn-bg: rgba(251, 191, 36, 0.12); --warn-ink: #1F1400;
  --stop: #F87171; --stop-bg: rgba(248, 113, 113, 0.12); --stop-ink: #2A0B08;
  --mark: #F04438;
  --future: #3A4670; --box: #5A6687;
  --overlay: rgba(3, 6, 14, 0.66); --shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  --font-body: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
  --font-display: "Barlow Semi Condensed", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --r-s: 10px; --r-m: 14px; --r-l: 16px; --r-xl: 20px;
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F8FC; --surface: #FFFFFF; --surface-2: #EEF2FA; --line: #DCE3F0; --line-2: #E6EBF5; --line-3: #D2DAEA;
  --text: #0B1220; --sub: #4A5568; --faint: #5D6880;
  --accent-hover: #4338D6;
  --hi: #5146E5; --hi-hover: #3F33C9; --hi-soft: rgba(81, 70, 229, 0.16); --hi-border: #B9B3F5;
  --glow: rgba(81, 70, 229, 0.28); --grid: rgba(81, 70, 229, 0.06);
  --ok: #0E7F58; --ok-bg: #E3F6EE; --ok-line: #9ED9BF; --ok-ink: #FFFFFF;
  --warn: #8A5300; --warn-bg: #FFF3DC; --warn-ink: #FFFFFF;
  --stop: #C2362B; --stop-bg: #FDEEEC; --stop-ink: #FFFFFF;
  --mark: #E0352B;
  --future: #B8C2D9; --box: #8C97B0;
  --overlay: rgba(11, 18, 32, 0.45); --shadow: 0 12px 32px rgba(11, 18, 32, 0.18);
}

/* ---------- 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: var(--hi); text-underline-offset: 3px; }
a:hover { color: var(--hi-hover); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--hi); outline-offset: 2px; border-radius: 8px; }
h1, h2, h3 { line-height: 1.25; }
code { font: 0.92em var(--font-mono); background: var(--surface-2); border: 1px solid var(--line-2); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.mono { font-family: var(--font-mono); }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.wrap.narrow { max-width: 640px; }
.sub { margin: 0; color: var(--sub); font-size: 15px; line-height: 1.55; }
.fine { color: var(--faint); font-size: 12px; line-height: 1.6; }
.err { margin: 0; color: var(--stop); font-size: 14px; font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.offscreen { position: fixed; left: -9999px; opacity: 0; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 12px; border-radius: 8px; background: var(--surface); color: var(--text); }
.skip:focus { left: 12px; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.spin { display: inline-block; width: 14px; height: 14px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -2px; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 按钮、小标签 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 20px; border: 1.5px solid var(--line); border-radius: var(--r-m); background: transparent; color: var(--text); font-size: 16px; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; transition: transform 0.15s, background-color 0.15s, box-shadow 0.15s; touch-action: manipulation; }
.btn:hover { color: var(--text); background: var(--surface); }
.btn:active { transform: scale(0.98); }
.btn.primary { border-color: transparent; background: var(--accent); color: var(--on-accent); font-size: 17px; min-height: 56px; box-shadow: 0 8px 24px var(--glow); }
.btn.primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn:disabled, .btn[disabled] { cursor: not-allowed; transform: none; box-shadow: none; border-color: var(--line); background: var(--surface); color: var(--faint); }
.btn.small { min-height: 40px; padding: 0 12px; border-radius: var(--r-s); font-size: 14px; }
.btn.block { width: 100%; }
.btn .i { width: 20px; height: 20px; stroke-width: 2.4; }
.btn.small .i { width: 16px; height: 16px; }
.iconbtn { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--text); text-decoration: none; }
.iconbtn:hover { background: var(--surface); color: var(--text); }
.iconbtn .i { width: 24px; height: 24px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--sub); font-size: 13px; line-height: 1.3; white-space: nowrap; }
.badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--sub); font-size: 13px; line-height: 1.4; }
.badge .i { width: 16px; height: 16px; stroke-width: 3; }
.badge.ok { border-color: transparent; background: var(--ok-bg); color: var(--ok); font-weight: 700; font-size: 14px; }
.badge.stop { border-color: transparent; background: var(--stop-bg); color: var(--stop); font-weight: 700; }
.dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ok); }
.copy { flex: none; height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--hi-border); border-radius: var(--r-s); background: transparent; color: var(--hi); font-size: 14px; font-weight: 700; touch-action: manipulation; }
.copy:hover { background: var(--hi-soft); }
.copy .i { width: 16px; height: 16px; }
/* 说明文字里要复制的网址:整段是按钮,点一下就复制 */
.copy.code-copy { height: auto; min-height: 40px; max-width: 100%; margin: 2px 0; padding: 4px 10px 4px 4px; vertical-align: middle; background: var(--hi-soft); text-align: left; cursor: pointer; }
.code-copy code { padding: 2px 6px; border: 0; background: transparent; color: var(--text); font-size: 15px; font-weight: 400; }
.copy.ok { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }

/* ---------- 顶栏、页脚 ---------- */
.top { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: var(--bg); background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.bar { display: flex; align-items: center; gap: 10px; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); }
.brand > span { min-width: 0; }
.logo { width: 34px; height: 34px; flex: none; color: var(--accent); }
.brand .name { display: block; font: 800 21px/1.1 var(--font-display); }
/* 别的语言的副标题可能长一些:放不下就截断,不把顶栏撑出横向滚动 */
.brand .sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.2; }
.links { display: none; }
.tools, .foot-tools { display: flex; align-items: center; gap: 8px; }
/* 语言菜单:<details> 做的下拉,不靠脚本也能开关。按钮上写当前语言的短名;展开以后两列、宽度不超过屏幕,语言多了就在里面滚动。
   顶栏里的贴着顶栏右边往下展开;页脚里的(体检结果页、指南页)往上展开 */
.top .bar, .foot-tools { position: relative; }
.lang-menu > summary { height: 42px; padding: 0 10px 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--sub); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; list-style: none; cursor: pointer; touch-action: manipulation; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary:hover, .lang-menu[open] > summary { background: var(--surface); color: var(--text); }
.lang-menu > summary .i { width: 18px; height: 18px; stroke-width: 2; }
.lang-menu .lm-chev { width: 14px; height: 14px; stroke-width: 2.6; transform: rotate(90deg); transition: transform 0.15s; }
.lang-menu[open] .lm-chev { transform: rotate(-90deg); }
.lm-list { position: absolute; z-index: 40; top: calc(100% - 4px); right: 16px; width: min(20rem, calc(100vw - 32px)); max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px); margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; border: 1px solid var(--line-3); border-radius: var(--r-m); background: var(--surface); box-shadow: var(--shadow); }
.foot .lm-list { top: auto; right: auto; bottom: calc(100% + 8px); left: 0; }
.lm-list a { min-height: 44px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 6px; border-radius: var(--r-s); color: var(--text); font-size: 15px; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; }
.lm-list a:hover { background: var(--surface-2); color: var(--text); }
.lm-list a[aria-current="page"] { background: var(--hi-soft); color: var(--hi); font-weight: 700; }
.lm-list a .i { width: 16px; height: 16px; stroke-width: 3; }
@media (max-width: 359px) { .lang-menu .lm-chev { display: none; } }
.theme { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 999px; }
.theme .i { width: 20px; height: 20px; }
.theme .i-moon, [data-theme="light"] .theme .i-sun { display: none; }
[data-theme="light"] .theme .i-moon { display: block; }
.bar-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 700; }
.pill-warn { flex: none; height: 40px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: 14px; font-weight: 700; touch-action: manipulation; }
.pill-warn .i { width: 18px; height: 18px; }
.foot { margin-top: 40px; padding: 24px 0 40px; border-top: 1px solid var(--line); color: var(--sub); font-size: 13px; line-height: 1.7; }
.foot p { margin: 2px 0; }
.foot b { color: var(--text); }
.foot-tools { margin-top: 14px; }
.p-guide .foot { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }

/* ---------- 「你在这里 → 出口」路线(招牌) ---------- */
.route { display: flex; align-items: center; }
.route .seg { flex: 1 1 auto; min-width: 6px; height: 2px; }
.route .seg.past { background: var(--hi); }
.route .seg.dash { background: linear-gradient(90deg, var(--hi) 50%, transparent 0) 0 0 / 10px 2px repeat-x; }
.route .seg.next { background: linear-gradient(90deg, var(--future) 50%, transparent 0) 0 0 / 8px 2px repeat-x; }
.route .node { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.route .node.past { background: var(--hi); }
.route .node.next { border: 2px solid var(--future); }
.route .node.ring { width: 12px; height: 12px; border: 2px solid var(--hi); }
.route .node.here { width: 18px; height: 18px; border: 4px solid var(--hi); background: var(--bg); box-shadow: 0 0 0 5px var(--hi-soft); }
/* 会动资产的那几站:换成红色菱形(形状也不同,不只靠颜色) */
.route .node.moves { border-radius: 2px; transform: rotate(45deg); }
.route .node.moves.past { background: var(--stop); }
.route .node.moves.next { border-color: var(--stop); }
.route .node.moves.here { border-color: var(--stop); box-shadow: 0 0 0 5px var(--stop-bg); }
/* 只给权限的签名那几站:黄色方块(和红色菱形、普通的圆点形状都不一样) */
.route .node.grants { border-radius: 2px; }
.route .node.grants.past { background: var(--warn); }
.route .node.grants.next { border-color: var(--warn); }
.route .node.grants.here { border-color: var(--warn); box-shadow: 0 0 0 5px var(--warn-bg); }
.route .from { flex: none; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--sub); font-size: 12px; white-space: nowrap; }
.exit-sign { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font: 800 15px/1 var(--font-display); letter-spacing: 0.12em; box-shadow: 0 0 18px var(--glow); }
.exit-sign .i { width: 16px; height: 16px; stroke-width: 2.6; }
.exit-box { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--accent); border-radius: 7px; color: var(--hi); }
.exit-box .i { width: 14px; height: 14px; stroke-width: 2.6; }
.exit-box.lit { border-color: transparent; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 16px var(--glow); }

/* ---------- 首页 ---------- */
.grid-bg { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 28px 28px; }
.hero { padding: 26px 0 28px; }
.hero-in { display: grid; gap: 18px; }
.hero-text { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.display { margin: 0; font: 800 clamp(32px, 9vw, 40px)/1.15 var(--font-display); letter-spacing: -0.005em; }
/* 标题断行:英文按行长平衡;中文只在空格和标点处断,不把一个词拆成两行 */
:lang(en) .display, :lang(en) .step-title, :lang(en) .sec h2 { text-wrap: balance; }
:lang(zh) .display, :lang(zh) .step-title, :lang(zh) .check-head h3, :lang(zh) .sec h2, :lang(zh) .nothing h2 { word-break: keep-all; overflow-wrap: anywhere; }
.display .hl { display: block; color: var(--hi); }
.lead { margin: 0; color: var(--sub); font-size: 16px; line-height: 1.6; }
.hero-route { padding: 4px 0; }
.card { padding: 18px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); }
.form { display: flex; flex-direction: column; gap: 10px; }
.form label { font-size: 14px; font-weight: 700; }
.input { width: 100%; height: 54px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-2); color: var(--text); font-size: 16px; }
.input::placeholder { color: var(--faint); opacity: 1; font-family: var(--font-body); }
.input:focus { outline: none; border-color: var(--hi); box-shadow: 0 0 0 3px var(--hi-soft); }
.input[aria-invalid="true"] { border-color: var(--stop); }
.hint { margin: 0; color: var(--faint); font-size: 13px; line-height: 1.5; }
.feats { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; color: var(--sub); font-size: 13px; line-height: 1.35; }
.feats li { display: flex; flex-direction: column; gap: 6px; white-space: pre-line; }
.feats .i { width: 22px; height: 22px; color: var(--hi); stroke-width: 2; }
.sec { padding: 32px 0 8px; }
.sec h2 { margin: 0 0 18px; font: 800 26px/1.2 var(--font-display); }
#how { border-top: 1px solid var(--line); }
.tri { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.tri li { display: flex; gap: 14px; }
.tri .mk { display: flex; flex-direction: column; align-items: center; }
.tri .num { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; border: 2px solid var(--hi); border-radius: 50%; color: var(--hi); font: 800 18px/1 var(--font-display); }
.tri .num.exit { border: 0; border-radius: 10px; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 16px var(--glow); }
.tri .num.exit .i { width: 18px; height: 18px; stroke-width: 2.6; }
.tri .rail { flex: 1; width: 2px; min-height: 22px; background: linear-gradient(var(--hi) 50%, transparent 0) 0 0 / 2px 8px repeat-y; }
.tri .tx { padding: 4px 0 20px; }
.tri h3 { margin: 0; font-size: 18px; }
.tri p { margin: 4px 0 0; color: var(--sub); font-size: 15px; line-height: 1.55; }
.showcase { display: none; }
.promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.promise { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.promise .i { width: 24px; height: 24px; color: var(--hi); stroke-width: 2; }
.promise h3 { margin: 0; font-size: 16px; }
.promise p { margin: 0; color: var(--sub); font-size: 14px; line-height: 1.5; }
.supported { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.supported li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.supported li > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.supported b { font-size: 17px; }
.supported li > span:first-child span { color: var(--sub); font-size: 14px; }
.tag-ok { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: 13px; font-weight: 700; }
.tag-ok .i { width: 14px; height: 14px; stroke-width: 3; }
.tag-wait { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--sub); font-size: 13px; font-weight: 700; }
.tag-wait .i { width: 14px; height: 14px; stroke-width: 2.6; }
.banner { margin: 24px 0 0; display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-l); background: var(--stop-bg); color: var(--stop); font-size: 15px; line-height: 1.55; font-weight: 600; }
.banner .i { margin-top: 1px; }

/* ---------- 检查结果 ---------- */
.sum { padding: 24px 0 18px; display: flex; flex-direction: column; gap: 8px; }
.sum .big { margin: 0; font: 800 56px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.cards { display: flex; flex-direction: column; gap: 14px; }
.rcard { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); }
.rcard.skeleton { height: 220px; background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.rcard-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rcard-h h2 { margin: 0; font-size: 22px; }
.rcard-h .chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.rows { margin: 0; }
.rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.rows > div:last-child { border-bottom: 0; }
.rows dt { color: var(--sub); font-size: 15px; }
.rows dt small { display: block; margin-top: 2px; color: var(--faint); font-size: 13px; }
.rows dd { margin: 0; font: 600 15px/1.4 var(--font-mono); text-align: right; white-space: nowrap; }
.rows .total dt { color: var(--text); font-weight: 700; }
.rows .total dd { font-size: 17px; }
.minimap { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 10px; border-radius: var(--r-m); background: var(--surface-2); }
.minimap .labels { display: grid; color: var(--sub); font-size: 12px; text-align: center; }
.minimap .labels span:first-child { text-align: left; }
.minimap .labels span:last-child { text-align: right; }
.minimap .labels .here { color: var(--hi); font-weight: 700; }
.chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }
.chips .i { width: 16px; height: 16px; color: var(--hi); stroke-width: 2; }
.warns { margin: 0; padding: 12px 14px; list-style: none; display: flex; flex-direction: column; gap: 8px; border-radius: var(--r-m); background: var(--warn-bg); color: var(--warn); font-size: 14px; line-height: 1.5; }
.warns li { display: flex; gap: 8px; align-items: flex-start; }
.warns .i { width: 18px; height: 18px; margin-top: 1px; }
.rline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-l); }
.rline b { margin-right: auto; }
.nothing { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.nothing h2 { margin: 0; font: 800 26px/1.2 var(--font-display); }
.resfoot { margin-top: 22px; }
/* 体检结果页最上面的截止提醒(lib/due.js):查到的东西在快要关停的链、要结束的项目上。黄 = 注意;哪天截止、还有几天都写成字,不只靠颜色 */
.dues { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; }
.due { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1.5px solid var(--warn); border-radius: var(--r-xl); background: var(--warn-bg); }
.due-h { display: flex; gap: 10px; align-items: flex-start; }
.due-h .i { width: 22px; height: 22px; margin-top: 2px; color: var(--warn); stroke-width: 2.4; }
.due h2 { margin: 0; font-size: 19px; line-height: 1.4; }
:lang(zh) .due h2 { word-break: keep-all; overflow-wrap: anywhere; }
.due p { margin: 0; font-size: 15px; line-height: 1.55; }
.due-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.due-when b { padding: 2px 10px; border-radius: 999px; background: var(--warn); color: var(--warn-ink); font-size: 14px; line-height: 1.5; }
.due-when span { font-weight: 700; }
.due-next { display: flex; gap: 8px; align-items: flex-start; font-weight: 700; }
.due-next .i { width: 18px; height: 18px; margin-top: 2px; color: var(--warn); }
.due-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.due-acts .btn { max-width: 100%; flex-wrap: wrap; row-gap: 0; padding-top: 6px; padding-bottom: 6px; background: var(--surface); }
.due-acts .mono { color: var(--sub); font-size: 12px; font-weight: 400; overflow-wrap: anywhere; }

/* ---------- 指南 ---------- */
.route-bar { position: sticky; top: 61px; z-index: 10; display: flex; flex-direction: column; gap: 8px; margin: 0 -16px; padding: 12px 16px 10px; background: var(--bg); border-bottom: 1px solid var(--line-2); }
.route-cap { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; color: var(--sub); font-size: 13px; line-height: 1.4; }
.route-cap .pos { flex: none; color: var(--hi); font-weight: 700; white-space: nowrap; }
.route-cap > span:last-child { min-width: 0; text-align: right; }
/* 路线下面一行:哪几步会动资产、哪几步只给权限;每一组(小标签 + 第几步)换行时不拆开 */
.route-marks { margin: -4px 0 0; display: flex; flex-wrap: wrap; gap: 2px 16px; color: var(--sub); font-size: 13px; line-height: 1.4; }
.route-marks > span { display: inline-flex; align-items: center; gap: 8px; }
.tag-moves, .tag-grants { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: 999px; background: var(--stop-bg); color: var(--stop); font-size: 12px; font-weight: 700; }
.tag-grants { background: var(--warn-bg); color: var(--warn); }
.tag-moves .i, .tag-grants .i { width: 13px; height: 13px; stroke-width: 2.6; }
.intro, .step, .done { display: flex; flex-direction: column; gap: 14px; padding: 18px 0 24px; }
.intro .display, .done .display { font-size: 34px; }
.facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.facts div { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.facts dt { color: var(--sub); font-size: 12px; }
.facts dd { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; }
.official { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-2); }
.official span { color: var(--sub); font-size: 13px; }
.official b { font-size: 15px; }
.official .copy { margin-left: auto; }
.mine { display: flex; flex-direction: column; gap: 10px; }
.mine > .btn { align-self: flex-start; }
.mine-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mine-h h2 { margin: 0; font-size: 18px; }
.pro { border: 1px solid var(--line); border-radius: var(--r-m); }
.pro summary { min-height: 48px; padding: 12px 14px; cursor: pointer; color: var(--sub); font-weight: 600; }
.pro-card { padding: 0 14px 6px; }
.pro-card p { margin: 0 0 10px; }
.meta { color: var(--sub); font-size: 13px; }
.meta p { margin: 0; }
.meta h2 { margin: 12px 0 4px; font-size: 14px; }
.meta ul { margin: 0; padding-left: 18px; }
.step-title { margin: 0; font: 800 30px/1.2 var(--font-display); }
.step-note { margin: -6px 0 0; color: var(--sub); font-size: 14px; }
.paged .step-note { display: none; }
.lost-btn { align-self: flex-start; min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; border: 1.5px dashed var(--warn); border-radius: 999px; background: transparent; color: var(--warn); font-size: 14px; font-weight: 700; touch-action: manipulation; }
.lost-btn .i { width: 16px; height: 16px; }
/* 岔路:页面停在别处时先点这几下回来,默认收起,小图对照着认 */
.detour { border: 1.5px solid var(--warn); border-radius: var(--r-m); background: var(--warn-bg); }
.detour summary { min-height: 56px; padding: 8px 12px 8px 8px; display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; color: var(--warn); font-size: 15px; font-weight: 700; line-height: 1.4; }
.detour summary::-webkit-details-marker { display: none; }
.detour summary img { width: 48px; height: 58px; flex: none; object-fit: cover; object-position: top left; border-radius: 6px; background: #000; }
.detour summary span { flex: 1; }
.detour summary::after { content: ""; width: 8px; height: 8px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
.detour[open] summary::after { transform: rotate(45deg); }
.detour .shot { padding: 0 12px 12px; }
.when { align-self: flex-start; margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: 13px; }
.guide.personal .when { display: none; }
/* 会动资产的那一步:标题下面一块红框,说清钱是谁在动;只给权限的签名:黄框,说清给出去的权限能做什么 */
.step-moves, .step-grants { margin: 0; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--stop); border-radius: var(--r-m); background: var(--stop-bg); color: var(--text); font-size: 15px; line-height: 1.55; }
.step-moves .i, .step-grants .i { margin-top: 2px; color: var(--stop); }
.step-moves b, .step-grants b { display: block; margin-bottom: 2px; color: var(--stop); font-size: 17px; line-height: 1.4; }
.step-grants { border-color: var(--warn); background: var(--warn-bg); }
.step-grants .i, .step-grants b { color: var(--warn); }
.items { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.6; }
.tip { margin: 0; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-m); background: var(--warn-bg); color: var(--warn); font-size: 15px; line-height: 1.55; }
.tip.bad { background: var(--stop-bg); color: var(--stop); }
.tip .i { margin-top: 2px; }
.tip b, .tip code { color: inherit; }
.shot { display: flex; flex-direction: column; gap: 10px; }
.shot figure { width: 100%; max-width: 460px; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-l); background: #000; }
.shot img { display: block; width: 100%; height: auto; }
.marks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.marks li { display: flex; align-items: center; gap: 12px; font-size: 17px; line-height: 1.45; }
.marks .n { flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--mark); color: #FFFFFF; font-size: 15px; font-weight: 700; }
.marks .t { flex: 1; min-width: 0; }
.cap { margin: 0; color: var(--sub); font-size: 16px; line-height: 1.55; }
.copyrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-2); }
.copyrow > span { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.guide:not(.personal) .needs-addr { display: none; }
.var { font-family: var(--font-mono); font-weight: 600; }
.guide:not(.personal) .var.ph { font-family: var(--font-body); color: var(--sub); }
.guide.personal .var { color: var(--hi); }

/* 签名前核对卡:逐项点勾 */
.check { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; padding-top: 18px; border-top: 1px dashed var(--line); }
.check-head { display: flex; align-items: center; gap: 10px; }
.check-head .ic { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--hi); }
.check-head .ic .i { width: 24px; height: 24px; stroke-width: 2; }
.check-head h3 { margin: 0; font: 800 26px/1.2 var(--font-display); }
.ticks { display: flex; flex-direction: column; gap: 10px; }
.tick { width: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--r-l); background: var(--surface); color: var(--text); text-align: left; touch-action: manipulation; transition: border-color 0.15s, background-color 0.15s; }
.tick .box { width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; border: 2px solid var(--box); border-radius: 8px; color: transparent; transition: background-color 0.15s, border-color 0.15s; }
.tick .box .i { width: 16px; height: 16px; stroke-width: 3.2; }
.tick[aria-pressed="true"], .tick.on { border-color: var(--ok); background: var(--ok-bg); }
.tick[aria-pressed="true"] .box, .tick.on .box { border-color: var(--ok); background: var(--ok); color: var(--ok-ink); }
.tick .tt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tick b { font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.tick .tt > span { color: var(--sub); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.reject { padding: 14px 16px; border-radius: var(--r-l); background: var(--stop-bg); color: var(--stop); }
.reject p { margin: 0 0 8px; font-weight: 700; }
.reject ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.45; }
.reject li { display: flex; gap: 8px; align-items: flex-start; }
.reject .i { width: 18px; height: 18px; margin-top: 2px; stroke-width: 2.4; }
.normal { padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-m); }
.normal summary { min-height: 44px; padding: 11px 0; cursor: pointer; color: var(--sub); font-size: 14px; }
.normal ul { margin: 0 0 12px; padding-left: 18px; color: var(--sub); font-size: 14px; }
.link-stop { align-self: center; min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--stop); font-size: 15px; font-weight: 700; }
.arrive h3 { margin: 0 0 6px; font-size: 18px; }
.arrive dl { margin: 0 0 8px; }
.arrive dl div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; }
.arrive dl div:last-child { border-bottom: 0; }
.arrive dt { color: var(--sub); }
.arrive dd { margin: 0; overflow-wrap: anywhere; }

/* 翻页条 */
.pager { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
.pager-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; }
.pager .btn { min-height: 54px; padding: 0 12px; }

/* 到账 */
.done .route { margin-bottom: 4px; }
.amount { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.amount b { font: 800 62px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.amount span { color: var(--sub); font-size: 20px; font-weight: 700; }
.amounts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.amounts li { display: flex; align-items: baseline; gap: 8px; }
.amounts b { font: 800 40px/1.05 var(--font-display); font-variant-numeric: tabular-nums; }
.amounts span { color: var(--sub); font-size: 17px; font-weight: 700; }
.verified { display: flex; flex-direction: column; gap: 10px; }
.verified h2 { margin: 0; font-size: 16px; }
.verified ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.45; }
.verified li { display: flex; gap: 10px; align-items: flex-start; }
.verified .i { color: var(--ok); stroke-width: 2.6; margin-top: 1px; }
.acts { display: flex; flex-direction: column; gap: 10px; }
.done .fine { text-align: center; }

/* 遇到问题:底部弹层 */
.sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 640px; max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); margin: 0 auto; padding: 0; overflow-y: auto; overscroll-behavior: contain; border: 0; border-top: 1px solid var(--line-3); border-radius: 24px 24px 0 0; background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.sheet:not([open]) { display: none; }
.sheet::backdrop { background: var(--overlay); }
.link-skip { align-self: center; min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--sub); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.sheet[open] { animation: rise 0.22s ease-out; }
@keyframes rise { from { transform: translateY(24px); opacity: 0.6; } }
.sheet-in { display: flex; flex-direction: column; gap: 14px; padding: 10px 16px calc(20px + env(safe-area-inset-bottom)); }
.grip { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--future); }
.sheet-head { display: flex; align-items: center; gap: 8px; }
.sheet-head h2 { flex: 1; margin: 0; font: 800 26px/1.2 var(--font-display); }
.diag { display: flex; flex-direction: column; gap: 12px; }
.diag .at { font-size: 14px; }
.finding { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface-2); }
.finding .mk { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--line); color: var(--text); }
.finding .mk .i { width: 16px; height: 16px; stroke-width: 3; }
.finding b { display: block; font-size: 18px; line-height: 1.35; }
.finding p { margin: 4px 0 0; color: var(--sub); font-size: 15px; line-height: 1.5; }
.finding.ok { border-color: var(--hi-border); background: var(--hi-soft); }
.finding.ok .mk { background: var(--accent); color: var(--on-accent); }
.finding.done { border-color: var(--ok-line); background: var(--ok-bg); }
.finding.done .mk { background: var(--ok); color: var(--ok-ink); }
.finding.wait { border-color: transparent; background: var(--warn-bg); }
.finding.wait .mk { background: var(--warn); color: var(--warn-ink); }
.finding.stop { border-color: transparent; background: var(--stop-bg); }
.finding.stop .mk { background: var(--stop); color: var(--stop-ink); }
.where { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 10px; border-radius: var(--r-m); background: var(--surface-2); }
.where .route .node { width: 8px; height: 8px; }
.where .route .node.here { width: 18px; height: 18px; background: var(--surface-2); }
.where p { margin: 0; color: var(--sub); font-size: 14px; }
.choice { padding: 4px 14px; border: 1.5px solid var(--warn); border-radius: var(--r-l); }
.choice h3 { margin: 10px 0 4px; font-size: 16px; }
.choice .opt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.choice .opt:last-child { border-bottom: 0; }
.choice .opt p { margin: 0; color: var(--sub); font-size: 14px; line-height: 1.5; }
.choice .opt-warn { color: var(--warn) !important; font-weight: 600; }
.raw { color: var(--sub); font-size: 13px; }
.raw summary { padding: 6px 0; cursor: pointer; }
.raw ul { margin: 4px 0; padding-left: 18px; }
.sits-h { margin: 4px 0 0; font-size: 16px; }
.sits { display: flex; flex-direction: column; gap: 8px; }
.sit { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.sit summary { min-height: 48px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; font-size: 15px; line-height: 1.45; }
.sit summary::-webkit-details-marker { display: none; }
.sit summary::after { content: ""; width: 8px; height: 8px; flex: none; border-right: 2px solid var(--sub); border-bottom: 2px solid var(--sub); transform: rotate(-45deg); transition: transform 0.15s; }
.sit[open] summary::after { transform: rotate(45deg); }
.sit p { margin: 0; padding: 0 14px 12px; color: var(--sub); font-size: 15px; line-height: 1.55; }
.sit.stop[open] { border-color: var(--stop); }
.sit.stop p { color: var(--stop); font-weight: 700; }
/* 页面图鉴:两列小图,点最像自己手机的那张 */
.scr-stops { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 10px; border: 1.5px solid var(--stop); border-radius: var(--r-m); background: var(--stop-bg); }
.scr-stops > p { margin: 0 0 2px; color: var(--stop); font-size: 14px; font-weight: 700; }
.scr-stop { min-height: 44px; padding: 6px 10px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: var(--r-s); background: var(--surface-2); color: var(--text); font-size: 14px; line-height: 1.35; text-align: left; cursor: pointer; touch-action: manipulation; }
.scr-stop .i { width: 18px; height: 18px; flex: none; color: var(--stop); }
#lostPick { display: flex; flex-direction: column; gap: 12px; }
#lostPick .scrs { margin-top: 0; }
.scrs { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.scr { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; touch-action: manipulation; transition: transform 0.15s, border-color 0.15s; }
.scr:hover { border-color: var(--hi-border); }
.scr:active { transform: scale(0.98); }
.scr-pic { display: block; aspect-ratio: 5 / 6; overflow: hidden; border-radius: 10px; background: #000; }
.scr-pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.scr-ic { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--warn); }
.scr.stop .scr-ic { color: var(--stop); }
.scr-ic .i { width: 40px; height: 40px; }
.scr-name { padding: 0 4px 4px; font-size: 14px; font-weight: 700; line-height: 1.35; }
#lostAns { display: flex; flex-direction: column; gap: 14px; }
.scr-a { display: flex; flex-direction: column; gap: 12px; }
.scr-a h3 { margin: 0; font-size: 18px; line-height: 1.35; }
.scr-a > p { margin: 0; font-size: 16px; line-height: 1.6; }
.scr-a.stop > p { color: var(--stop); font-weight: 700; }
.fallback { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--r-m); background: var(--stop-bg); }
/* 首页:作者本人的实测;指南:实测记录 */
.proof { margin: 0; display: flex; gap: 8px; align-items: flex-start; color: var(--sub); font-size: 14px; line-height: 1.55; }
.proof .i { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--ok); }
.tests { padding: 12px 14px; border: 1px solid var(--ok-line); border-radius: var(--r-m); background: var(--ok-bg); }
.tests h2 { margin: 0 0 6px; color: var(--ok); font-size: 14px; }
.tests ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.tests li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.55; }
.tests li .i { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--ok); }
.tests b { margin-right: 4px; }
.fallback > p:first-child { margin: 0; color: var(--stop); font-weight: 700; }
.fb-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.fb-row .btn { background: var(--surface-2); }
/* 截图求助:选图 → 竖向裁剪 → 预览 + 两个勾 → 对照审过的图、逐条核对 */
.shot-open { border-style: dashed; border-color: var(--hi-border); color: var(--hi); }
.shot-open:hover { color: var(--hi-hover); }
#lostShot { display: flex; flex-direction: column; gap: 14px; }
#lostShot > h3 { margin: 0; font-size: 18px; line-height: 1.35; }
.shot-p { display: flex; flex-direction: column; gap: 12px; }
.shot-lead { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.5; }
.shot-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; }
.crop-wrap { display: flex; justify-content: center; }
.crop { position: relative; display: inline-block; max-width: 100%; line-height: 0; -webkit-user-select: none; user-select: none; }
.crop canvas { display: block; max-width: 100%; max-height: 56vh; max-height: 56dvh; width: auto; height: auto; border-radius: 10px; background: #000; }
.crop-sh { position: absolute; left: 0; right: 0; height: 0; background: var(--overlay); pointer-events: none; }
.crop-sh.top { top: 0; border-radius: 10px 10px 0 0; }
.crop-sh.bot { bottom: 0; border-radius: 0 0 10px 10px; }
.crop-h { position: absolute; left: -8px; right: -8px; top: 0; height: 44px; margin-top: -22px; padding: 0; border: 0; background: transparent; cursor: ns-resize; touch-action: none; }
.crop-h.bot { top: 100%; }
.crop-h span { position: absolute; left: 8px; right: 8px; top: 20px; height: 4px; border-radius: 2px; background: var(--hi); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); }
.crop-h span::after { content: ""; position: absolute; left: 50%; top: -9px; width: 48px; height: 22px; margin-left: -24px; border-radius: 11px; background: var(--hi); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }
.crop-h:focus-visible { outline: none; }
.crop-h:focus-visible span::after { outline: 3px solid var(--text); outline-offset: 2px; }
.shot-prev { margin: 0; display: flex; justify-content: center; }
.shot-prev img { display: block; max-width: 100%; max-height: 48vh; max-height: 48dvh; border: 1px solid var(--line); border-radius: 10px; background: #000; }
.agree { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-l); background: var(--surface-2); color: var(--text); font-size: 15px; line-height: 1.45; cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.agree input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.agree .box { width: 24px; height: 24px; flex: none; display: flex; align-items: center; justify-content: center; border: 2px solid var(--box); border-radius: 7px; color: transparent; transition: background-color 0.15s, border-color 0.15s; }
.agree .box .i { width: 15px; height: 15px; stroke-width: 3.2; }
.agree input:checked + .box { border-color: var(--ok); background: var(--ok); color: var(--ok-ink); }
.agree input:focus-visible + .box { outline: 3px solid var(--hi); outline-offset: 2px; }
.agree:has(input:checked) { border-color: var(--ok); background: var(--ok-bg); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pair figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pair img { display: block; width: 100%; height: 38vh; height: 38dvh; object-fit: contain; object-position: top; border-radius: 10px; background: #000; }
.pair figcaption { color: var(--sub); font-size: 13px; text-align: center; }
.feats-ck { display: flex; flex-direction: column; gap: 8px; }
.shot-warn { padding: 12px 14px; border: 1.5px solid var(--stop); border-radius: var(--r-m); background: var(--stop-bg); }
.shot-warn > p { margin: 0; color: var(--stop); font-weight: 700; line-height: 1.55; }
.follow { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 16; width: min(92vw, 560px); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border-radius: var(--r-m); background: var(--text); color: var(--bg); font-size: 14px; box-shadow: var(--shadow); }
.follow span { flex: 1; }
.follow .btn { border-color: var(--bg); color: var(--bg); background: transparent; }
.follow .iconbtn { color: var(--bg); }
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 30; max-width: min(92vw, 520px); padding: 10px 14px; border-radius: 12px; background: var(--text); color: var(--bg); font-size: 14px; line-height: 1.5; opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity 0.25s, transform 0.25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.nf { padding-top: 48px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 14px; }
.nf p { margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.nf-langs { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; color: var(--sub); font-size: 15px; }
/* 指南还没有这种语言的译文、照英文版出的时候,标题下面那一句 */
.lang-note { margin: 0; display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-2); color: var(--sub); font-size: 14px; line-height: 1.5; }
.lang-note .i { width: 18px; height: 18px; margin-top: 1px; color: var(--hi); }

/* ---------- 别的语言(中英以外)的排版:只按 :lang() 套,中英两套不受影响 ---------- */
/* 越南文、土耳其文、俄文:本站字体只带了西欧字母(见最上面的 unicode-range),同一个词里会混着两种字体,整页改用系统字体;地址和数字的等宽字体照旧 */
html:lang(vi), html:lang(tr), html:lang(ru) {
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}
/* 日文、韩文:汉字和假名用日文、韩文的系统字体(不然汉字会按中文字形显示) */
html:lang(ja) {
  --font-body: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif;
  --font-display: "Barlow Semi Condensed", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif;
}
html:lang(ko) {
  --font-body: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-display: "Barlow Semi Condensed", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}
/* 标题断行:拼音文字按行长平衡,长词(德文、俄文)放不下时断开加连字符,不撑出横向滚动;韩文按词断行,不把一个词拆成两行 */
html:not(:lang(zh)):not(:lang(en)):not(:lang(ja)):not(:lang(ko)) :is(.display, .step-title, .sec h2, .check-head h3, .nothing h2, .dl h3, .dl-sec h2, .tp-sec h2) { text-wrap: balance; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
html:lang(ko) :is(.display, .step-title, .sec h2, .check-head h3, .nothing h2, .due h2, .dl h3, .dl-sec h2, .tp-sec h2) { word-break: keep-all; overflow-wrap: anywhere; }
html:lang(ja) :is(.display, .step-title, .sec h2, .check-head h3, .nothing h2, .due h2, .dl h3, .dl-sec h2, .tp-sec h2) { overflow-wrap: anywhere; }

/* ---------- 电脑 ---------- */
@media (min-width: 720px) {
  .display { font-size: 48px; }
  .intro .display, .done .display { font-size: 40px; }
  .step-title { font-size: 34px; }
}
@media (min-width: 960px) {
  .links { display: flex; align-items: center; gap: 24px; margin-right: 8px; }
  .links a { color: var(--sub); font-size: 15px; text-decoration: none; }
  .links a:hover { color: var(--text); }
  .hero { padding: 72px 0; }
  .hero-in { grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr); grid-template-rows: auto auto; column-gap: 56px; row-gap: 20px; align-items: center; }
  .hero-text { grid-row: 1 / span 2; gap: 24px; }
  .display { font-size: 64px; line-height: 1.04; }
  .lead { max-width: 36rem; font-size: 19px; }
  .hero-route { max-width: 34rem; }
  .scan { align-self: end; padding: 28px; gap: 14px; }
  .feats { align-self: start; grid-template-columns: 1fr; gap: 10px; padding: 0 8px; font-size: 15px; }
  .feats li { flex-direction: row; align-items: center; gap: 10px; white-space: normal; }
  .feats li br { display: none; }
  .sec { padding: 80px 0 0; }
  .sec h2 { margin-bottom: 28px; font-size: 42px; }
  #how { border-top: 0; }
  .tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .tri li { flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
  .tri .rail { display: none; }
  .tri .mk { align-items: flex-start; }
  .tri .num { width: 40px; height: 40px; font-size: 22px; }
  .tri .tx { padding: 0; }
  .tri h3 { font-size: 20px; }
  .tri p { font-size: 16px; }
  .showcase { display: block; }
  .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
  .demo-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
  .demo-h { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
  .demo-no { margin: 4px 0 0; padding: 10px 12px; border-radius: var(--r-s); background: var(--stop-bg); color: var(--stop); font-size: 14px; font-weight: 600; }
  .showcase-text h2 { margin-bottom: 16px; }
  .showcase-text p { margin: 0 0 12px; color: var(--sub); font-size: 18px; line-height: 1.6; }
  .promises { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .promise { padding: 20px; }
  .promise h3 { font-size: 18px; }
  .promise p { font-size: 15px; }
  .supported li { padding: 22px 24px; }
  .supported b { font-size: 20px; }
  .supported li > span:first-child span { font-size: 16px; }
  .banner { margin-top: 56px; }
  .pager-in { grid-template-columns: 200px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* 从钱包读取地址:只在检测到钱包时由脚本加上 */
.wallet-read { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.wallet-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.wallet-pick .hint { flex-basis: 100%; }
.wallet-read .hint:empty { display: none; }

/* 体检结果页:「存在项目里的」「钱包里的」两段清单(我们的检测器 + 经本站接口交给 Zerion 查的全部资产) */
.cards > .list-h { margin: 12px 0 -6px; font-size: 18px; }
.rcard-h h4 { margin: 0; font-size: 22px; }
.awallet { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.aw { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 2px 10px; padding: 10px 12px 12px 14px; border-bottom: 1px solid var(--line-2); }
.aw:last-child { border-bottom: 0; }
.aw .mono { text-align: right; font-weight: 600; }
.aw small { grid-column: 2 / -1; color: var(--faint); font-size: 13px; overflow-wrap: anywhere; }
.aw .clogo { width: 24px; height: 24px; }
.aw .btn.small { min-height: 44px; padding: 0 14px; }

/* 链图标:圆形小图;白底的图标在浅色页面上也看得出边 */
.clogo { width: 20px; height: 20px; flex: none; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); object-fit: cover; }
.clogo.letter { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--sub); font: 700 11px/1 var(--font-mono); }
.chip .clogo { width: 16px; height: 16px; }

/* 取回弹层:这是什么 → 手续费够不够 → 一步一步怎么取 → 取完重新查一遍 */
.exit { display: flex; flex-direction: column; gap: 14px; }
.chainline { margin: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--sub); font-size: 15px; font-weight: 600; }
.chainline .clogo { width: 22px; height: 22px; }
.marks.xs li { align-items: flex-start; font-size: 16px; line-height: 1.55; }
.marks.xs .t > div { display: flex; flex-direction: column; gap: 10px; }
.copyrow .url { font: 13px/1.45 var(--font-mono); word-break: break-all; }

/* ---------- 首页:截止日历、专题的入口(手机上顶栏不显示导航,靠这一块) ---------- */
.more { display: grid; gap: 10px; }
.more-card { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color 0.15s; }
.more-card:hover { border-color: var(--hi-border); color: var(--text); }
.more-card > .i { color: var(--hi); }
.more-card > .i:first-child { width: 28px; height: 28px; stroke-width: 2; }
.more-card > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.more-card b { font-size: 17px; }
.more-card > span > span { color: var(--sub); font-size: 14px; line-height: 1.5; }

/* ---------- 退出截止日历、专题 ---------- */
.page-head { display: flex; flex-direction: column; gap: 14px; padding: 22px 0 6px; }
.page-head .display, .topic .display { font-size: 34px; }
:lang(zh) .page-head .display, :lang(zh) .topic .display, :lang(zh) .dl h3, :lang(zh) .dl-sec h2, :lang(zh) .tp-sec h2 { word-break: keep-all; overflow-wrap: anywhere; }
.page-head .tip { margin-top: 2px; }
.dl-jump { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.dl-jump a { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--sub); font-size: 14px; text-decoration: none; }
.dl-jump a:hover { border-color: var(--hi-border); color: var(--text); }
.dl-jump b { color: var(--text); font: 800 18px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.dl-sec { padding: 28px 0 0; display: flex; flex-direction: column; gap: 6px; scroll-margin-top: 76px; }
.dl-sec > h2 { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font: 800 26px/1.2 var(--font-display); }
.count { min-width: 30px; height: 26px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; color: var(--sub); font: 700 15px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.dl-list { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.dl { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); scroll-margin-top: 76px; }
.dl:target { border-color: var(--hi); box-shadow: 0 0 0 3px var(--hi-soft); }
.dl h3 { margin: 0; font-size: 20px; line-height: 1.35; }
.dl-when { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; color: var(--sub); font-size: 14px; }
/* 倒数:7 天以内实心黄,30 天以内淡黄(黄 = 注意);过了的、没定日期的不着色。字本身写着几天 */
.dl-left { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.3; }
.dl-left .i { width: 16px; height: 16px; }
.dl-left.soon { border-color: transparent; background: var(--warn); color: var(--warn-ink); }
.dl-left.near { border-color: transparent; background: var(--warn-bg); color: var(--warn); }
.dl-left.past { background: transparent; color: var(--faint); }
.dl-left.none { border-style: dashed; background: transparent; color: var(--sub); }
.dl-when time { color: var(--text); }
.dl-type { padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--sub); font-size: 13px; }
.dl-chains { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.dl-chains .chip { padding: 3px 9px 3px 4px; }
.dl-chains .clogo { width: 18px; height: 18px; }
.dl-chains .clogo.letter { font-size: 10px; }
.dl-sum { margin: 0; font-size: 16px; line-height: 1.6; }
.dl-rows { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.dl-rows div { display: grid; gap: 2px; }
.dl-rows dt { color: var(--faint); font-size: 13px; font-weight: 700; }
.dl-rows dd { margin: 0; color: var(--sub); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
/* 分几步截止的:一步一行;下一步加粗,过了的变淡、写着「已过」 */
.dl-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.dl-steps li.next { color: var(--text); font-weight: 700; }
.dl-steps li.done { color: var(--faint); }
.dl-step-left { padding: 0 6px; border-radius: 6px; background: var(--surface-2); font-size: 13px; white-space: nowrap; }
.dl-off { padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--surface-2); }
.dl-off > p { margin: 0 0 4px; color: var(--sub); font-size: 13px; font-weight: 700; }
.dl-off ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.dl-off a { min-height: 44px; padding: 6px 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; font-size: 15px; line-height: 1.4; text-decoration: none; }
.dl-off a > span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.dl-off .mono { color: var(--faint); font-size: 12px; }
.dl-foot { margin: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; color: var(--faint); font-size: 13px; }
.xshare { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--hi-border); border-radius: var(--r-s); color: var(--hi); font-size: 14px; font-weight: 700; text-decoration: none; touch-action: manipulation; }
.xshare:hover { background: var(--hi-soft); color: var(--hi); }
.xshare .i { width: 16px; height: 16px; }
.dl-passed { margin-top: 10px; }
.dl-passed > summary { min-height: 48px; padding: 0 16px; display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--surface); color: var(--text); font-size: 15px; font-weight: 700; cursor: pointer; list-style: none; }
.dl-passed > summary::-webkit-details-marker { display: none; }
.dl-passed > summary::after { content: ""; width: 8px; height: 8px; flex: none; border-right: 2px solid var(--sub); border-bottom: 2px solid var(--sub); transform: rotate(-45deg); transition: transform 0.15s; }
.dl-passed[open] > summary::after { transform: rotate(45deg); }
.dl-passed[open] .dl-show, .dl-passed:not([open]) .dl-hide { display: none; }
.dl-more .fine { margin: 8px 0 0; }
.tp-links { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.5; }
/* 专题 */
.tp-list { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tp-list a { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); color: var(--text); text-decoration: none; }
.tp-list a:hover { border-color: var(--hi-border); color: var(--text); }
.tp-list a > b { color: var(--hi); font-size: 18px; line-height: 1.4; }
.tp-list a > span:not(.fine) { color: var(--sub); font-size: 15px; line-height: 1.55; }
.tp-list .fine { margin: 2px 0 0; }
.tp-more { margin-top: 18px; }
.topic { padding-top: 14px; padding-bottom: 8px; display: flex; flex-direction: column; gap: 14px; }
.topic .back { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; color: var(--sub); font-size: 14px; font-weight: 700; text-decoration: none; }
.topic .back .i { width: 18px; height: 18px; }
.topic > .fine { margin: -6px 0 0; }
.toc { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.toc > p { margin: 0 0 4px; color: var(--sub); font-size: 13px; font-weight: 700; }
.toc ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.5; }
.tp-sec { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; scroll-margin-top: 76px; }
.tp-sec h2 { margin: 0; font: 800 24px/1.25 var(--font-display); }
.tp-sec h3 { margin: 6px 0 0; font-size: 17px; line-height: 1.4; }
.tp-sec p { margin: 0; font-size: 16px; line-height: 1.7; }
.tp-sec ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.6; }
.tp-share { margin: 6px 0 0; }
@media (min-width: 720px) {
  .page-head .display, .topic .display { font-size: 44px; }
  .dl { padding: 20px 22px; }
  .dl-rows div { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .dl-rows dt { padding-top: 2px; }
}
@media (min-width: 960px) {
  .more { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .more-card { padding: 22px 24px; }
  .links a[aria-current="page"] { color: var(--text); font-weight: 700; }
}