:root{
  color-scheme:dark;
  --bg:#05070b;
  --surface:rgba(17,23,33,.66);
  --surface-2:rgba(12,17,25,.86);
  --line:rgba(255,255,255,.085);
  --line-strong:rgba(255,255,255,.16);
  --ink:#eef4fa;
  --muted:#8b9cae;
  --accent:#35e6c8;
  --accent-2:#2aa8ff;
  --ok:#4ff0b6;
  --warn:#ffca6a;
  --bad:#ff8095;
  --r-lg:22px;
  --r-md:14px;
  --r-sm:10px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font:15.5px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* 环境光：两团渐变 + 细网格，替代死板纯色背景 */
body::before{
  content:"";position:fixed;inset:-20% -10% auto -10%;height:120vh;z-index:-2;
  background:
    radial-gradient(46rem 30rem at 18% -8%,rgba(53,230,200,.16),transparent 62%),
    radial-gradient(40rem 28rem at 88% 4%,rgba(42,168,255,.14),transparent 60%),
    radial-gradient(38rem 26rem at 50% 108%,rgba(120,86,255,.10),transparent 62%);
  pointer-events:none;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;opacity:.35;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(70% 60% at 50% 20%,#000 40%,transparent 100%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 20%,#000 40%,transparent 100%);
}
.wrap{
  width:100%;max-width:560px;margin:0 auto;
  padding:clamp(22px,5vw,44px) clamp(16px,4vw,24px) 56px;
  padding-bottom:calc(56px + env(safe-area-inset-bottom));
}

/* ── 顶栏 ───────────────────────────────────────────── */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:clamp(26px,6vw,40px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;letter-spacing:.3px}
.mark{
  width:26px;height:26px;border-radius:9px;flex:0 0 auto;position:relative;
  background:conic-gradient(from 140deg,var(--accent),var(--accent-2),#7a5cff,var(--accent));
  box-shadow:0 6px 20px rgba(53,230,200,.28),inset 0 0 0 1px rgba(255,255,255,.2);
}
.mark::after{
  content:"";position:absolute;inset:6px;border-radius:5px;background:#070b11;
  box-shadow:inset 0 0 8px rgba(53,230,200,.45);
}
.brand small{display:block;font-weight:500;font-size:11.5px;color:var(--muted);letter-spacing:.6px}
.top-link{
  font-size:13px;color:var(--muted);text-decoration:none;white-space:nowrap;
  padding:7px 13px;border-radius:999px;border:1px solid var(--line);
  transition:.2s ease;background:rgba(255,255,255,.02);
}
.top-link:hover{color:var(--ink);border-color:var(--line-strong);background:rgba(255,255,255,.05)}

/* ── 标题 ───────────────────────────────────────────── */
h1{
  font-size:clamp(26px,6.4vw,34px);line-height:1.18;margin:0 0 10px;
  font-weight:700;letter-spacing:-.5px;
  background:linear-gradient(180deg,#ffffff,#b9c9d8);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.lede{margin:0 0 26px;color:var(--muted);font-size:14.5px;max-width:46ch}

/* ── 卡片 ───────────────────────────────────────────── */
.card{
  position:relative;border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  padding:clamp(18px,4.5vw,26px);
  margin-bottom:18px;
  overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(53,230,200,.55),rgba(42,168,255,.5),transparent);
}
.label{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12.5px;letter-spacing:.4px;color:var(--muted);margin-bottom:10px;text-transform:none}
.label b{color:var(--ink);font-weight:600;font-size:12.5px;letter-spacing:0}

/* 卡密输入：等宽大字 + 内发光焦点 */
.field-shell{position:relative}
input#card{
  width:100%;padding:18px 18px;border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(8,12,18,.94),rgba(10,15,22,.8));
  color:var(--ink);text-align:center;
  font:640 clamp(20px,5.6vw,26px)/1.1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:3.5px;
  transition:border-color .2s,box-shadow .2s,background .2s;
  caret-color:var(--accent);
}
input#card::placeholder{color:#4a5a6b;letter-spacing:2.5px}
input#card:focus{
  outline:none;border-color:rgba(53,230,200,.65);
  box-shadow:0 0 0 4px rgba(53,230,200,.12),0 0 30px -8px rgba(53,230,200,.5);
  background:linear-gradient(180deg,rgba(10,16,23,.98),rgba(12,19,28,.9));
}

/* 按钮 */
.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;border:0;border-radius:var(--r-md);cursor:pointer;
  padding:15px 18px;font:650 16px/1 -apple-system,"PingFang SC",system-ui,sans-serif;
  color:#04241f;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 14px 32px -16px rgba(53,230,200,.75),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .12s ease,filter .2s,box-shadow .2s,opacity .2s;
  margin-top:14px;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px) scale(.996)}
.btn[disabled]{cursor:not-allowed;filter:none;opacity:.5;
  background:#26313f;color:#93a5b6;box-shadow:none}
.btn.ghost{
  background:rgba(255,255,255,.045);color:var(--ink);
  border:1px solid var(--line-strong);box-shadow:none;font-weight:600;font-size:14.5px;
  padding:13px 18px;
}
.btn.ghost:hover{background:rgba(255,255,255,.075)}
.btn.ghost[disabled]{background:rgba(255,255,255,.02);border-color:var(--line);color:#6b7c8e}
.btn.sub{background:transparent;border:1px solid var(--line);color:var(--muted);box-shadow:none;
  font-weight:600;font-size:14px;padding:12px 18px}
.btn.sub:hover{color:var(--ink);border-color:var(--line-strong)}

/* ── 验证码 ─────────────────────────────────────────── */
.code-row{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(6px,2vw,10px);margin:2px 0 14px}
.digit{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1.18;border-radius:var(--r-sm);
  background:linear-gradient(180deg,rgba(9,14,20,.95),rgba(8,12,17,.75));
  border:1px solid rgba(255,255,255,.1);
  font:700 clamp(24px,7.4vw,34px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#fff;text-shadow:0 0 24px rgba(53,230,200,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  transition:.25s ease;
}
.digit.empty{color:#31414f;text-shadow:none}
.digit.live{border-color:rgba(53,230,200,.42);box-shadow:0 0 0 1px rgba(53,230,200,.12),0 12px 30px -20px rgba(53,230,200,.9)}
.ttl{height:3px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:2px 0 12px}
.ttl i{display:block;height:100%;width:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .9s linear}
.ttl.done i{background:var(--bad)}

/* 状态胶囊 */
.pill{display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:650;letter-spacing:.2px;
  border:1px solid transparent;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  box-shadow:0 0 10px currentColor}
.pill.wait{color:#9fc4ff;background:rgba(42,168,255,.1);border-color:rgba(42,168,255,.28)}
.pill.ok{color:var(--ok);background:rgba(79,240,182,.1);border-color:rgba(79,240,182,.28)}
.pill.bad{color:var(--bad);background:rgba(255,128,149,.1);border-color:rgba(255,128,149,.3)}
.pill.warn{color:var(--warn);background:rgba(255,202,106,.1);border-color:rgba(255,202,106,.28)}
.pill.live::before{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}

.topline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.meta{color:var(--muted);font-size:13px;display:flex;gap:14px;flex-wrap:wrap}
.meta b{color:var(--ink);font-weight:650}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ── 明细表 ─────────────────────────────────────────── */
.rows{display:grid;gap:0;margin-top:4px}
.row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.055)}
.row:last-child{border-bottom:0}
.row .k{color:var(--muted);font-size:13.5px;white-space:nowrap}
.row .v{font-weight:650;text-align:right;word-break:break-all}
.row .v.ok{color:var(--ok)}
.row .v.bad{color:var(--bad)}
.row .v.warn{color:var(--warn)}

/* 回执横幅 */
.receipt{
  border-radius:var(--r-md);padding:14px 16px;margin:4px 0 14px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  display:flex;gap:12px;align-items:flex-start;
}
.receipt.ok{background:linear-gradient(135deg,rgba(79,240,182,.12),rgba(53,230,200,.05));
  border-color:rgba(79,240,182,.34)}
.receipt.bad{background:linear-gradient(135deg,rgba(255,128,149,.12),rgba(255,128,149,.04));
  border-color:rgba(255,128,149,.32)}
.receipt .ico{width:22px;height:22px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}
.receipt.ok .ico{background:rgba(79,240,182,.18);color:var(--ok)}
.receipt.bad .ico{background:rgba(255,128,149,.18);color:var(--bad)}
.receipt .txt{font-size:13.5px;line-height:1.6}
.receipt .txt strong{display:block;font-size:14.5px;margin-bottom:2px}
.receipt .txt span{color:var(--muted)}

/* ── 步骤条 ─────────────────────────────────────────── */
.steps{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:2px}
.steps li{
  position:relative;padding:9px 0 9px 38px;color:#6f8092;font-size:13.5px;
  transition:color .25s
}
.steps li .n{
  position:absolute;left:0;top:6px;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font:650 12px/1 ui-monospace,Menlo,monospace;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:#6f8092;
  transition:.25s ease;
}
.steps li::before{
  content:"";position:absolute;left:11.5px;top:30px;bottom:-6px;width:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.1),transparent);
}
.steps li:last-child::before{display:none}
.steps li.on{color:var(--ink)}
.steps li.on .n{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#04241f;border-color:transparent;
  box-shadow:0 0 0 4px rgba(53,230,200,.12),0 8px 22px -12px rgba(53,230,200,.9)
}
.steps li.done .n{background:rgba(79,240,182,.16);color:var(--ok);border-color:rgba(79,240,182,.3)}

/* ── 首屏购买 ───────────────────────────────────────── */
.buy-cta{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:16px 0 0;padding:14px 16px;border-radius:var(--r-md);
  border:1px dashed rgba(53,230,200,.28);background:rgba(53,230,200,.055);
}
.buy-cta .t{font-size:13.5px;color:#b9cbdb}
.buy-cta .t b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:2px}
.buy-cta a{
  flex:0 0 auto;text-decoration:none;font-weight:650;font-size:14px;color:#04241f;
  padding:10px 16px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 12px 26px -16px rgba(53,230,200,.85);
}
.buy-cta a:hover{filter:brightness(1.07)}
.mini-buy{text-align:center;font-size:12.5px;color:var(--muted);margin-top:8px}
.mini-buy a{color:var(--accent);text-decoration:none}
.mini-buy a:hover{text-decoration:underline}

.donebox{display:flex;gap:14px;align-items:center;padding:18px 18px;border-radius:var(--r-md);
  border:1px solid rgba(79,240,182,.3);
  background:linear-gradient(135deg,rgba(79,240,182,.14),rgba(53,230,200,.05))}
.donebox-ico{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-size:17px;font-weight:800;color:#04241f;
  background:linear-gradient(135deg,var(--ok),var(--accent));
  box-shadow:0 10px 24px -14px rgba(79,240,182,.9)}
.donebox strong{display:block;font-size:15px;margin-bottom:3px}
.donebox span{color:var(--muted);font-size:13px}
.err{color:var(--bad);font-size:13.5px;margin-top:10px;min-height:0;word-break:break-word}
.err:empty{display:none}
.hint{font-size:12.5px;color:#6f8092;margin-top:10px;line-height:1.7}

.foot{margin-top:26px;text-align:center;color:#526476;font-size:12px;line-height:2}
.foot .sep{display:inline-block;margin:0 8px;opacity:.4}
.fade{animation:fade .35s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:400px){
  .brand small{display:none}
  input#card{letter-spacing:2px;padding:16px 12px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}