/* DeFiExit · 安全出口 —— 手机优先,零外部资源(字体用系统自带) */
:root {
  --brand: #0b7a4b; --brand-ink: #ffffff; --brand-soft: #e7f4ed;
  --ink: #17191c; --sub: #5d6670; --line: #e3e6e8; --bg: #f6f7f6; --card: #ffffff;
  --red: #d42a20; --red-soft: #fff1f0; --amber: #a85b00; --amber-soft: #fff6e5; --green-ink: #0b6b42;
  --radius: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand: #2bb673; --brand-ink: #062414; --brand-soft: #12271d;
    --ink: #eceeef; --sub: #a3abb3; --line: #2a2f34; --bg: #0f1214; --card: #171b1e;
    --red: #ff6b5f; --red-soft: #2a1514; --amber: #f0a43a; --amber-soft: #2a2010; --green-ink: #4fd18f;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Segoe UI", sans-serif;
}
main { max-width: 640px; margin: 0 auto; padding: 0 16px 32px; }
.guide { padding-bottom: 90px; } /* 给底部固定的翻页条留位置 */
a { color: var(--brand); }
h1 { font-size: 26px; line-height: 1.3; margin: 18px 0 10px; }
h2 { font-size: 19px; margin: 0 0 10px; }
h3 { font-size: 18px; margin: 0; }
h4 { font-size: 16px; margin: 0 0 8px; }
code { font: 0.92em ui-monospace, Consolas, monospace; background: var(--brand-soft); padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.offscreen { position: fixed; left: -9999px; opacity: 0; }
button { font: inherit; cursor: pointer; }

/* 顶栏与页脚 */
.top { position: sticky; top: 0; z-index: 5; background: var(--card); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; max-width: 640px; margin: 0 auto; padding: 10px 16px; color: var(--ink); text-decoration: none; font-weight: 700; }
.brand .logo { width: 28px; height: 28px; color: var(--brand); flex: none; }
.brand small { color: var(--sub); font-weight: 500; }
.foot { max-width: 640px; margin: 0 auto; padding: 24px 16px 40px; color: var(--sub); font-size: 13px; border-top: 1px solid var(--line); }
.foot p { margin: 4px 0; }
.foot .fine { font-size: 12px; }

/* 卡片、表单 */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 16px 0; }
.sub { color: var(--sub); font-size: 14px; }
.hero p { color: var(--sub); }
.scan, .me { margin: 16px 0; }
.scan label, .me label { display: block; font-weight: 600; margin-bottom: 6px; }
.me label { font-weight: 500; font-size: 14px; color: var(--sub); }
.row { display: flex; gap: 8px; }
.row input {
  flex: 1; min-width: 0; font: 15px ui-monospace, Consolas, monospace; padding: 12px; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
}
.row input:focus { outline: none; border-color: var(--brand); }
.row button, .go {
  flex: none; padding: 12px 16px; border: 0; border-radius: 10px; background: var(--brand); color: var(--brand-ink); font-weight: 700; text-decoration: none;
}
.row button:disabled { opacity: 0.6; }
.hint { font-size: 13px; color: var(--sub); margin: 6px 0 0; }
.err { color: var(--red); }

/* 体检结果 */
.results { margin: 8px 0 0; }
.results .sum { font-weight: 600; }
.result { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 10px 0; }
.result.found { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.result .head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.result strong { color: var(--green-ink); font-size: 18px; white-space: nowrap; }
.result .head small { display: block; color: var(--sub); font-size: 12px; }
.result em { color: var(--sub); font-style: normal; }
.result ul { margin: 8px 0; padding-left: 18px; }
.result .note { margin: 6px 0; color: var(--sub); font-size: 14px; }
.result .go { display: block; text-align: center; margin-top: 10px; }
.result.loading span, .result.empty span, .result.error span { margin-left: 8px; color: var(--sub); }
.warn { color: var(--amber); background: var(--amber-soft); border-radius: 10px; padding: 8px 10px 8px 26px !important; font-size: 14px; }
.supported { list-style: none; padding: 0; margin: 0; }
.supported li { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.supported li:last-child { border-bottom: 0; }
.supported span { color: var(--sub); font-size: 14px; }
.promise ul, .how ol { margin: 0; padding-left: 20px; }
.promise li, .how li { margin: 6px 0; }

/* 指南页 */
.back { display: inline-block; margin-top: 12px; color: var(--sub); text-decoration: none; font-size: 14px; }
.lead { color: var(--sub); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.facts div { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.facts dt { color: var(--sub); font-size: 12px; }
.facts dd { margin: 0; font-size: 14px; font-weight: 600; }
.official { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--brand-soft); border-radius: 10px; padding: 10px 12px; }
.official span { color: var(--sub); font-size: 13px; }
.official b { font: 700 15px ui-monospace, Consolas, monospace; }
.copy { margin-left: auto; border: 1px solid var(--brand); background: transparent; color: var(--brand); border-radius: 8px; padding: 4px 10px; font-size: 13px; font-weight: 600; }
.guide:not(.personal) .needs-addr { display: none; }
.copies { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.copies .copy { margin-left: 0; }
.mine { background: var(--card); border: 1.5px solid var(--brand); border-radius: var(--radius); padding: 12px 14px; margin: 12px 0; }
.mine ul { margin: 4px 0; padding-left: 18px; }
.mine .big { font-size: 18px; font-weight: 700; color: var(--green-ink); margin: 6px 0; }
.var { font-weight: 700; }
.guide.personal .var { color: var(--green-ink); }
.tabs { display: flex; gap: 6px; margin: 16px 0 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.tabs button { flex: 1; border: 0; background: transparent; padding: 9px 6px; border-radius: 9px; color: var(--sub); font-weight: 600; font-size: 14px; }
.tabs button[aria-selected="true"] { background: var(--brand); color: var(--brand-ink); }

/* 步骤:默认全显示(没开 JS 也能看);开了 JS 变成一页一步 */
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 12px 0; }
.step > header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.step .num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--card); display: grid; place-items: center; font-weight: 800; }
.step h3 small { display: block; font-size: 13px; font-weight: 500; color: var(--sub); }
.step .when { font-size: 13px; color: var(--amber); background: var(--amber-soft); border-radius: 8px; padding: 4px 8px; display: inline-block; margin: 0 0 6px; }
.guide.personal .step .when { display: none; }
.items { padding-left: 20px; margin: 6px 0 10px; }
.items li { margin: 6px 0; }
figure { margin: 12px 0; }
figure img { display: block; width: 100%; height: auto; border-radius: 10px; background: #111; }
figcaption { margin-top: 6px; font-size: 15px; }
.n { font-style: normal; color: var(--red); font-weight: 800; }
.n.info { color: var(--amber); }
.check { border: 2px solid var(--red); border-radius: var(--radius); margin: 14px 0 4px; overflow: hidden; }
.check h4 { margin: 0; padding: 8px 12px; background: var(--red); color: #fff; }
.check dl { margin: 0; padding: 4px 12px; }
.check dl div { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.check dl div:last-child { border-bottom: 0; }
.check dt { color: var(--sub); word-break: break-word; }
.check dd { margin: 0; word-break: break-word; }
.check p { margin: 0; padding: 8px 12px; background: var(--red-soft); color: var(--red); font-weight: 700; font-size: 14px; }
.check.arrive { border-color: var(--brand); }
.check.arrive h4 { background: var(--brand); color: var(--brand-ink); }
.check.arrive p { background: var(--brand-soft); color: var(--green-ink); }
.stuck { display: block; width: 100%; margin-top: 12px; padding: 10px; border: 1px dashed var(--sub); background: transparent; color: var(--sub); border-radius: 10px; font-size: 14px; }
.stuck[aria-expanded="true"] { border-style: solid; color: var(--ink); }

/* 我卡在这一步:现场诊断 + 常见情况 + 兜底 */
.help { margin-top: 10px; }
.help h5 { margin: 14px 0 6px; font-size: 15px; }
.diag h4 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.diag h4 small { color: var(--sub); font-weight: 500; font-size: 12px; }
.diag button, .choice button, .follow button { border: 1px solid var(--brand); background: transparent; color: var(--brand); border-radius: 8px; padding: 4px 10px; font-size: 13px; font-weight: 600; }
.where { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.findings { list-style: none; padding: 0; margin: 6px 0; }
.findings li { margin: 6px 0; padding: 8px 10px; border-radius: 10px; border-left: 4px solid var(--line); background: var(--bg); font-size: 14px; }
.findings li.ok { border-color: var(--brand); background: var(--brand-soft); }
.findings li.wait { border-color: var(--amber); background: var(--amber-soft); }
.findings li.stop { border-color: var(--red); background: var(--red-soft); font-weight: 600; }
.choice { border: 1.5px solid var(--amber); border-radius: var(--radius); padding: 4px 12px; margin: 10px 0; }
.choice .opt { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.choice .opt:last-child { border-bottom: 0; }
.choice .opt p { margin: 4px 0; font-size: 14px; }
.choice .warn { padding: 6px 10px !important; }
.raw { color: var(--sub); font-size: 13px; margin: 6px 0; }
.raw summary { cursor: pointer; }
.raw ul { margin: 4px 0; padding-left: 18px; }
.sit { border: 1px solid var(--line); border-radius: 10px; margin: 6px 0; background: var(--card); }
.sit summary { padding: 9px 12px; cursor: pointer; font-size: 14px; }
.sit p { margin: 0; padding: 0 12px 10px; font-size: 14px; }
.sit.stop[open] { border-color: var(--red); }
.sit.stop p { color: var(--red); font-weight: 700; }
.fallback { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--red-soft); }
.fallback p { margin: 4px 0; }
.fallback .official { margin: 8px 0 4px; background: var(--card); }
.report { display: block; width: 100%; margin-top: 10px; padding: 9px; border: 1px dashed var(--sub); background: var(--card); color: var(--ink); border-radius: 10px; font-size: 14px; }
.follow { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 7; width: min(92vw, 560px); display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--ink); color: var(--card); font-size: 14px; }
.follow[hidden] { display: none; }
.follow span { flex: 1; }
.follow button { border-color: var(--card); color: var(--card); }
.pager {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px max(16px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line);
}
.pager button { flex: 1; max-width: 200px; padding: 11px; border-radius: 10px; border: 1.5px solid var(--brand); background: var(--card); color: var(--brand); font-weight: 700; }
.pager button[data-go="1"] { background: var(--brand); color: var(--brand-ink); }
.pager button:disabled { opacity: 0.35; }
.pager span { color: var(--sub); font-size: 14px; white-space: nowrap; }
.pro-card { background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 6px 14px; }
.pro-card p { margin: 10px 0; }
.meta { color: var(--sub); font-size: 13px; margin-top: 24px; }
.meta ul { padding-left: 18px; }

/* 提示条 */
.toast {
  position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 9;
  max-width: min(92vw, 520px); background: var(--ink); color: var(--card); padding: 10px 14px; border-radius: 12px; font-size: 14px; transition: 0.25s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 700px) { h1 { font-size: 30px; } .pager { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }