:root { /* 语义色别名 → vibe.css 主题 (配色由 html[data-theme] 切换) */
--bg:var(--c-bg); --fg:var(--c-text); --muted:var(--c-muted);
--border:var(--c-border); --accent:var(--c-accent); --ok:var(--c-ok); --err:var(--c-err);
--fg-strong:var(--c-text-strong); --link:var(--c-accent); --link2:var(--c-accent-2);
--input-bg:var(--c-surface-2); --hd-bg:var(--c-bg-deep); --warn2:var(--c-warn);
--ok-bg:var(--c-ok-soft); --ok-line:color-mix(in srgb, var(--c-ok) 45%, transparent);
--err-bg:var(--c-err-soft); --err-line:color-mix(in srgb, var(--c-err) 40%, transparent);
--panel:var(--c-surface); --panel2:var(--c-surface-2);
}
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--fg); font-family:var(--font-ui); font-size:var(--fs-md); line-height:1.7; }
/* 2026-09-04 A1: 键盘可见焦点环 (vibe.css 已有 — 保留兼容) */
input:focus { border-color:var(--accent); }
/* 主题切换控件 */
.vibe-theme-sw { display:inline-flex; border:1px solid var(--border); border-radius:999px; overflow:hidden; }
.vibe-theme-btn { background:transparent; border:0; color:var(--muted); padding:5px 11px; font-size:11px; cursor:pointer; font-family:var(--font-mono); }
.vibe-theme-btn.on { background:var(--accent); color:var(--c-on-accent); }
h1, h2, h3 { letter-spacing:-.02em; }
h1 { font-weight:800; }
.keybox code, .bal-num, .step, .btn, .preset-btn { font-variant-numeric:tabular-nums; }
.nav { max-width:1000px; margin:0 auto; padding:24px 20px 0; display:flex; justify-content:space-between; align-items:center; }
.nav a { color:var(--muted); text-decoration:none; font-size:14px; padding:4px 0; }
.nav a:hover { color:var(--accent); }
.wrap { max-width:1000px; margin:0 auto; padding:40px 20px 60px; }
h1 { font-size:30px; margin-bottom:8px; color:var(--fg-strong); }
.sub { color:var(--muted); margin-bottom:28px; max-width:680px; }
.steps { display:flex; gap:8px; margin-bottom:32px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
.step { padding:8px 18px; border:1px solid var(--border); border-radius:8px; font-size:13px; color:var(--muted); background:transparent; white-space:nowrap; }
.step.active { background:var(--accent); border-color:var(--accent); color:var(--fg-strong); font-weight:600; }
.step.done { border-color:var(--accent); color:var(--accent); }
.panel { display:none; }
.panel.active { display:block; }
.card { border:1px solid var(--border); border-radius:12px; padding:28px 26px; background:linear-gradient(180deg,#151827,#10131c); max-width:640px; }
.card h2 { font-size:20px; color:var(--fg-strong); margin-bottom:6px; }
.card p { color:var(--muted); font-size:14px; margin-bottom:16px; }
label { display:block; font-size:13px; color:var(--muted); margin:14px 0 6px; }
input[type=email], input[type=text], input[type=password], input[type=number] {
width:100%; max-width:420px; padding:11px 12px; border-radius:8px; border:1px solid var(--border);
background:var(--input-bg); color:var(--fg); font-size:16px; /* 16px 防止 iOS 聚焦自动放大 */
}
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:16px; }
.btn { display:inline-block; padding:11px 20px; min-height:44px; border-radius:8px; border:1px solid transparent; cursor:pointer;
font-weight:600; font-size:14px; background:var(--accent); color:var(--fg-strong); text-decoration:none; }
.btn:hover { filter:brightness(1.1); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.ghost { background:transparent; border-color:var(--border); color:var(--fg); }
.btn.green { background:var(--ok); color:#06230f; }
.link { background:none; border:none; color:var(--accent); cursor:pointer; font-size:13px; padding:0; text-decoration:underline; }
.msg { display:none; margin-top:16px; padding:10px 12px; border-radius:8px; font-size:14px; }
.msg.ok { display:block; background:var(--ok-bg); border:1px solid var(--ok-line); color:var(--ok); }
.msg.err { display:block; background:var(--err-bg); border:1px solid var(--err-line); color:var(--err); }
.keybox { display:flex; gap:10px; align-items:center; background:var(--input-bg); border:1px solid var(--border); border-radius:8px; padding:12px 14px; margin-top:14px; flex-wrap:wrap; }
.keybox code { font-size:14px; word-break:break-all; overflow-wrap:anywhere; color:var(--fg-strong); }
.warn { color:var(--warn2); font-size:13px; margin-top:12px; }
.bal-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:18px 0; }
.bal-cell { background:var(--input-bg); border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
.bal-num { font-size:22px; font-weight:700; color:var(--fg-strong); }
.bal-label { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }
table.quota { width:100%; border-collapse:collapse; margin-top:10px; font-size:14px; }
table.quota th, table.quota td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); }
table.quota th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin:18px 0; max-width:720px; }
.plan-card { border:1px solid var(--border); border-radius:10px; padding:16px 14px; cursor:pointer; background:var(--input-bg); transition:border-color .15s, box-shadow .15s; }
.plan-card:hover { border-color:var(--accent); }
.plan-card.selected { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.plan-card h3 { font-size:16px; color:var(--fg-strong); margin-bottom:4px; }
.plan-card .price { font-size:18px; font-weight:700; color:var(--accent); }
.plan-card .price .per { margin-left:6px; }
.plan-card .per { font-size:12px; color:var(--muted); }
.topup-block { margin-top:24px; border:1px solid var(--border); border-radius:12px; padding:20px 18px; background:var(--input-bg); max-width:760px; }
.topup-block.selected { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.topup-block h3 { font-size:16px; color:var(--fg-strong); margin-bottom:4px; }
.topup-sub { color:var(--muted); font-size:13px; margin-bottom:16px; max-width:640px; }
.topup-channels { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; }
.topup-channel { border:1px solid var(--border); border-radius:10px; padding:16px 14px; background:#10131c; display:flex; flex-direction:column; }
.topup-channel h4 { font-size:14px; color:var(--fg-strong); margin-bottom:12px; }
.topup-row { display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.topup-row input[type=number] { flex:1; max-width:none; width:100%; }
.topup-currency { color:var(--accent); font-weight:700; font-size:17px; }
.topup-presets { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.preset-btn { padding:7px 12px; border:1px solid var(--border); border-radius:8px; background:transparent; color:var(--fg); font-size:13px; cursor:pointer; transition:border-color .15s, color .15s; }
.preset-btn:hover { border-color:var(--accent); color:var(--accent); }
.topup-hint { color:var(--muted); font-size:12px; margin:0 0 14px; }
.topup-channel .btn { width:100%; text-align:center; }
.pay-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
#qr-area { margin-top:18px; min-height:220px; }
#qr-area img, #qr-area canvas { display:block; }
.zh { color:var(--muted); font-size:13px; margin-top:14px; }
.foot { max-width:1000px; margin:0 auto; padding:28px 20px 44px; border-top:1px solid var(--border); font-size:13px; color:var(--muted); }
.foot a { color:var(--muted); text-decoration:none; }
.foot a:hover { color:var(--accent); }
/* 移动端: 微信扫码用户常见小屏 */
@media (max-width: 560px) {
.wrap { padding:24px 14px 40px; }
.nav { padding:18px 14px 0; }
.card { padding:20px 16px; }
h1 { font-size:24px; }
.btn { width:100%; text-align:center; }
.row .btn { flex:1 1 100%; }
.keybox { flex-direction:column; align-items:stretch; }
.keybox .btn { flex:0 0 auto; }
.bal-grid { grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }
#qr-area img, #qr-area canvas { max-width:100%; height:auto; }
}
header.site { background:var(--hd-bg); color:var(--fg-strong); padding:14px 0; }
header.site .container { display:flex; align-items:center; justify-content:space-between; max-width:960px; margin:0 auto; padding:0 20px; }
header.site .brand { color:var(--fg-strong); font-weight:700; font-size:18px; text-decoration:none; }
header.site nav a { color:var(--link); margin-left:16px; text-decoration:none; font-size:14px; }
@media (max-width:640px){ header.site .container{flex-wrap:wrap;gap:8px;} header.site nav a{margin-left:10px;font-size:13px;} }
/* ===== 2026-09-04 layout v2: 两栏漏斗 (左侧价值叙事 + 右侧流程) ===== */
.wrap.page { max-width:var(--content-max); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,560px);
gap: clamp(24px, 5vw, 72px); align-items:start; }
.pitch { position:sticky; top:28px; padding:8px 0 0; }
.pitch .eyebrow { font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase;
color:var(--c-accent); margin-bottom:18px; }
.pitch-h { font-size:var(--fs-3xl); font-weight:800; letter-spacing:var(--tracking-tight);
line-height:1.08; color:var(--c-text-strong); }
.pitch-h em { font-style:normal; color:var(--c-accent); }
.pitch-sub { font-size:var(--fs-lg); color:var(--c-muted); margin:18px 0 26px; max-width:440px; }
.pitch-points { list-style:none; margin:0 0 30px; display:grid; gap:14px; }
.pitch-points li { display:flex; gap:14px; align-items:baseline; color:var(--c-text); font-size:var(--fs-md); }
.pitch-points li span { color:var(--c-accent); font-size:var(--fs-sm); min-width:22px; }
.faux-lead { border:var(--line) solid var(--c-border); background:var(--c-surface);
border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--shadow-md); position:relative; overflow:hidden; }
.faux-lead::before { content:""; position:absolute; inset:0 0 auto; height:2px;
background:linear-gradient(90deg, var(--c-accent), transparent 70%); }
.fl-top { display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; }
.fl-sub { color:var(--c-accent-2); font-size:var(--fs-xs); }
.fl-score { color:var(--c-ok); font-size:var(--fs-xs); }
.fl-body { color:var(--c-text); font-size:var(--fs-sm); line-height:1.6; margin:0; }
.fl-body i { color:var(--c-muted); font-style:normal; }
.pitch-foot { color:var(--c-faint); margin-top:16px; }
.stage { min-width:0; padding-top:4px; }
/* 步骤条: mono 序号胶囊 + 连接线 */
.steps { display:flex; margin:0 0 22px; gap:0; }
.step { position:relative; flex:1; display:flex; align-items:center; gap:8px;
padding:0 10px; border:0; border-radius:0; background:transparent;
font-size:var(--fs-sm); color:var(--c-muted); white-space:nowrap; }
.step:first-child { padding-left:0; }
.step:not(:last-child)::after { content:""; position:absolute; left:calc(100% - 6px); right:-10%;
top:50%; height:1px; background:var(--c-border); transform:translateY(-50%); }
.step .step-n { width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center;
justify-content:center; border:1px solid var(--c-border); font-size:12px; background:var(--c-surface-2); flex:none; }
.step .step-l { font-weight:500; }
.step.active { color:var(--c-text-strong); background:transparent; }
.step.active .step-n { background:var(--c-accent); border-color:var(--c-accent); color:var(--c-on-accent); }
.step.done { color:var(--c-muted); background:transparent; }
.step.done .step-n { border-color:var(--c-accent); color:var(--c-accent); }
.stage .card { max-width:none; border-radius:var(--r-lg); }
/* 主卡质感: 顶缘光 + 表面分层 */
.stage .card { position:relative; overflow:hidden; background:
linear-gradient(180deg, var(--c-surface), var(--c-surface-2)); }
.stage .card::before { content:""; position:absolute; inset:0 0 auto; height:1px;
background:linear-gradient(90deg, transparent, var(--c-glass-line) 30%, var(--c-glass-line) 70%, transparent); }
.stage .card h2 { font-size:var(--fs-xl); font-weight:700; letter-spacing:var(--tracking-tight); }
.stage .card > p { font-size:var(--fs-md); }
@media (max-width:920px){
.wrap.page { grid-template-columns:1fr; gap:8px; }
.pitch { position:static; padding:0 0 4px; }
.pitch-h { font-size:var(--fs-2xl); }
.faux-lead, .pitch-points, .pitch-sub { display:none; }
.eyebrow { margin-bottom:10px; }
}