/* ============================================================================
   wallet_sale —— 全站样式
   设计意图：深色、克制、信息密度高。没有霓虹色、没有夸张动效 —— 目标读者是
   愿意为一个「未知密码的钱包文件」付真金白银的人，页面必须显得冷静可信。
   配色：背景 #0b0f16，卡片 #121926，正文 #e6ebf2，次要 #93a1b5，
        强调金 #e8b53c，可信绿 #3ecf8e，警示橙 #f0a35e，危险红 #f2685f。
   ========================================================================== */

*,*::before,*::after { box-sizing: border-box; }

:root {
  --bg: #0b0f16;
  --bg2: #0e131d;
  --card: #121926;
  --card2: #161f2e;
  --line: #23304a;
  --line2: #2e3d5a;
  --fg: #e6ebf2;
  --fg2: #93a1b5;
  --fg3: #6b7a91;
  --gold: #e8b53c;
  --gold2: #f5cf72;
  --ok: #3ecf8e;
  --warn: #f0a35e;
  --bad: #f2685f;
  --blue: #6ea8fe;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --radius: 14px;
  --maxw: 1180px;
}

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 15% -10%, #16203300 0%, transparent 60%),
    radial-gradient(900px 500px at 85% 0%, #1a2438 0%, transparent 55%),
    var(--bg);
  color: var(--fg);
  font: 15px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold2); text-decoration: none; }
a:hover { color: #fff; }
h1,h2,h3,h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 30px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
p { margin: 0 0 1em; }
code, .mono { font-family: var(--mono); font-size: .92em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.muted { color: var(--fg2); }
.dim { color: var(--fg3); }
.small { font-size: 13px; }
.xsmall { font-size: 12px; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: var(--card); padding: 8px 12px; border-radius: 8px; z-index: 99; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ---------- 顶栏 ---------- */
.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(11,15,22,.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.top-in { display: flex; align-items: center; gap: 22px; height: 62px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--fg); font-weight: 650; }
.brand:hover { color: #fff; }
.brand-mark {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(160deg, var(--gold2), var(--gold)); color: #241a04;
  font-weight: 800; font-size: 15px;
}
.brand.small .brand-mark { width: 22px; height: 22px; font-size: 13px; }
.nav { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
.nav a { color: var(--fg2); font-size: 14px; }
.nav a:hover, .nav a.on { color: var(--fg); }
.lang {
  border: 1px solid var(--line2); border-radius: 999px; padding: 5px 13px;
  font-size: 13px; color: var(--fg2);
}
.lang:hover { border-color: var(--gold); color: var(--gold2); }

/* ---------- 页脚 ---------- */
.bottom { border-top: 1px solid var(--line); margin-top: 70px; padding: 32px 0; background: var(--bg2); }
.bottom-in { display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap; }
.bottom-l { flex: 1 1 420px; }
.bottom-l p { max-width: 620px; font-size: 13px; margin-top: 10px; }
.bottom-r { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; }
.bottom-r a { color: var(--fg2); }

/* ---------- 通用块 ---------- */
.card {
  background: linear-gradient(180deg, var(--card2), var(--card));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px;
}
.card + .card { margin-top: 16px; }
.card h2 { margin-top: 0; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.hero { padding: 46px 0 26px; }
.hero h1 { font-size: 36px; max-width: 20ch; }
.hero .lead { color: var(--fg2); font-size: 16px; max-width: 78ch; }

/* 信任条 */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin: 26px 0 8px; }
@media (max-width: 900px) { .trust { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .trust { grid-template-columns: 1fr; } }
.trust > div { background: #101725; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.trust b { display: block; font-size: 14px; margin-bottom: 4px; }
.trust span { color: var(--fg2); font-size: 13px; }

/* 统计条 */
.stats { display: flex; gap: 30px; flex-wrap: wrap; padding: 16px 0 4px; }
.stat .k { color: var(--fg3); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.stat .v { font-family: var(--mono); font-size: 20px; }

/* ---------- 表格 ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th, table.tbl td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }

/* 表头默认【不吸顶】。
   ⚠ 这里踩过一个很隐蔽的坑：.tbl-wrap 写了 `overflow-x: auto`，按规范
   「一个轴不是 visible 时另一个轴会计算成 auto」—— 于是它同时成了**纵向滚动容器**。
   而在滚动容器内部，`position: sticky` 的粘性偏移是相对**这个容器**（scrollport）
   生效的，不是相对视口。结果表格根本没滚动，表头也被硬生生下移 62px，
   正好压在第一行钱包上（实测遮挡 62px，截图里第一行的 SHA-256 从表头底下透出来）。
   要吸顶必须让容器自己滚，并且用 top:0 —— 见下面的 .sticky 变体。 */
table.tbl thead th {
  background: #16202f; font-size: 12px; color: var(--fg2);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}

/* 可选：很长的表格（几百行）让容器自己滚，表头吸在容器顶部（此时 top:0 才是对的） */
.tbl-wrap.sticky { max-height: 74vh; overflow-y: auto; }
.tbl-wrap.sticky table.tbl thead th { position: sticky; top: 0; z-index: 2; }
.tbl-wrap.sticky table.tbl thead th:first-child { border-top-left-radius: calc(var(--radius) - 1px); }
.tbl-wrap.sticky table.tbl thead th:last-child { border-top-right-radius: calc(var(--radius) - 1px); }

table.tbl tbody tr:hover { background: #17202f; }
table.tbl tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-family: var(--mono); white-space: nowrap; }
td.acts { text-align: right; white-space: nowrap; }
/* txid 列表：64 位十六进制不换行会把窄屏页面整个撑宽（实测 390px 视口被撑到 533px），
   所以必须显式允许在任意位置断行。 */
.txlist { display: grid; gap: 6px; font-family: var(--mono); font-size: 12.5px; }
.txlist a { overflow-wrap: anywhere; }

/* 地址是连续无空格的字符串，用 overflow-wrap:anywhere 而不是 word-break:break-all ——
   后者会把普通单词也拦腰截断（实测 "70 records" 被断成 "70 rec / ords"）。 */
.addr { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.addr.nokey { color: var(--bad); }

/* ---------- 地址内链（站内工具页 /tools/btc_<addr>.html） ---------- */
/* 所有 BTC 地址统一走站内工具页，不再外链到区块浏览器。 */
.addr-link {
  color: var(--gold2); text-decoration: none;
  border-bottom: 1px solid #6b552066;
}
.addr-link:hover { color: #fff; border-bottom-color: var(--gold); }
/* 「文件里没有对应密钥」的红色警示不能被链接颜色盖掉 —— 这是产品页最重要的信号之一 */
.addr.nokey .addr-link,
.addr.nokey .addr-link:hover { color: var(--bad); border-bottom-color: #8a373366; }

/* ---------- 徽标 ---------- */
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--line2); color: var(--fg2); white-space: nowrap;
}
.badge.ok   { color: var(--ok);   border-color: #2c6b4f; background: #12301f33; }
.badge.ok2  { color: #86e0b6;     border-color: #295a45; background: #10281d33; }
.badge.warn { color: var(--warn); border-color: #6d4a26; background: #33230f33; }
.badge.bad2 { color: #ff9a92;     border-color: #6e3330; background: #33141333; }
.badge.bad  { color: var(--bad);  border-color: #8a3733; background: #3d131133; }
.badge.gold { color: var(--gold2); border-color: #6b5520; background: #33290b33; }
.badge.info { color: var(--blue); border-color: #33507e; background: #12233d33; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 10px; border: 1px solid var(--line2);
  background: #17202f; color: var(--fg); font: inherit; font-weight: 600; cursor: pointer;
}
.btn:hover { border-color: var(--fg3); color: #fff; }
.btn.primary {
  background: linear-gradient(160deg, var(--gold2), var(--gold));
  color: #241a04; border-color: #b98f22;
}
.btn.primary:hover { filter: brightness(1.07); }
.btn.big { padding: 13px 26px; font-size: 16px; }
.btn[disabled], .btn.off { opacity: .45; pointer-events: none; }
.btn.ghost { background: transparent; }

/* ---------- 表单 ---------- */
label.fld { display: block; margin-bottom: 16px; }
label.fld > span { display: block; font-size: 13px; color: var(--fg2); margin-bottom: 6px; }
input[type=text], input[type=email], input[type=search], select {
  width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line2);
  background: #0d1420; color: var(--fg); font: inherit;
}
input:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px #e8b53c22; }
input.bad { border-color: var(--bad); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 200px; }
.row > .fixed { flex: 0 0 auto; }
.chk { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--fg2); }
.chk input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; }
.err { color: var(--bad); font-size: 13px; margin-top: 6px; }

/* ---------- 事实卡 ---------- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }
.fact { background: #101725; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.fact-k { font-size: 12px; color: var(--fg3); text-transform: uppercase; letter-spacing: .05em; }
.fact-v { font-family: var(--mono); font-size: 19px; margin-top: 4px; word-break: break-word; }
.fact-s { font-size: 12px; color: var(--fg3); margin-top: 3px; }
.fact.ok .fact-v { color: var(--ok); }
.fact.warn .fact-v { color: var(--warn); }
.fact.bad .fact-v { color: var(--bad); }

/* ---------- 步骤条 ---------- */
.steps { display: flex; gap: 10px; margin: 22px 0 26px; flex-wrap: wrap; }
.steps > div {
  flex: 1 1 150px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px;
  color: var(--fg3); font-size: 13px; background: #0f1622;
}
.steps > div.on { border-color: var(--gold); color: var(--gold2); background: #1b1708; }
.steps > div.done { border-color: #2c6b4f; color: var(--ok); }
.steps em { font-style: normal; font-family: var(--mono); margin-right: 7px; }

/* ---------- 支付面板 ---------- */
.pay {
  display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 24px; align-items: start;
  background: #0f1622; border: 1px solid var(--line2); border-radius: var(--radius); padding: 22px;
}
@media (max-width: 760px) { .pay { grid-template-columns: 1fr; } }
.qrbox { background: #fff; border-radius: 12px; padding: 12px; display: grid; place-items: center; }
.qrbox svg, .qrbox img { display: block; width: 100%; height: auto; max-width: 276px; }
.copyline { display: flex; gap: 8px; align-items: stretch; }
.copyline input { font-family: var(--mono); font-size: 13px; }
.amount { font-family: var(--mono); font-size: 26px; color: var(--gold2); word-break: break-all; }

/* ---------- 提示条 ---------- */
.note { border-radius: 12px; padding: 14px 16px; border: 1px solid var(--line2); background: #101725; font-size: 13.5px; }
.note.warn { border-color: #6d4a26; background: #22180c; color: #f3c894; }
.note.bad  { border-color: #6e3330; background: #241010; color: #f5a8a2; }
.note.ok   { border-color: #2c6b4f; background: #0e2318; color: #9fe4c1; }
.note + .note { margin-top: 12px; }

/* ---------- 假钱包理由列表 ---------- */
.reasons { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.reasons li { border-left: 3px solid var(--line2); padding: 2px 0 2px 14px; font-size: 14px; }
.reasons li.critical { border-color: var(--bad); }
.reasons li.warning { border-color: var(--warn); }
.reasons li.notice { border-color: var(--blue); }
.reasons li.good { border-color: var(--ok); }
.reasons b { display: block; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--fg3); margin-bottom: 3px; }

/* 分数条 */
.score { display: flex; align-items: center; gap: 14px; }
.score-bar { flex: 1 1 auto; height: 9px; border-radius: 999px; background: #1b2537; overflow: hidden; }
.score-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ok), var(--warn), var(--bad)); }
.score-n { font-family: var(--mono); font-size: 22px; }

/* ---------- 折叠 ---------- */
details.more { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; background: #101725; }
details.more > summary { cursor: pointer; color: var(--gold2); font-size: 14px; }
details.more[open] > summary { margin-bottom: 12px; }

/* ---------- 分页 ---------- */
.pager { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 20px 0; }
.pager a, .pager span {
  padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line); font-size: 13px; color: var(--fg2);
}
.pager a:hover { border-color: var(--gold); color: var(--gold2); }
.pager span.cur { border-color: var(--gold); color: var(--gold2); background: #1b1708; }

/* ---------- 状态点 ---------- */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; background: var(--fg3); }
.dot.live { background: var(--gold); animation: pulse 1.6s ease-in-out infinite; }
.dot.ok { background: var(--ok); }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }

/* ---------- 列表页行内钱包名 ---------- */
.wname { font-weight: 600; }
.wname small { display: block; color: var(--fg3); font-weight: 400; font-size: 12px; font-family: var(--mono); }
.kv { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 7px 16px; font-size: 14px; }
.kv dt { color: var(--fg3); }
.kv dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; }
@media (max-width: 560px) { .kv { grid-template-columns: 1fr; } .kv dt { margin-top: 6px; } }

.anchor { scroll-margin-top: 80px; }