:root{
  --bg:#0b121c;        /* 深海军蓝底 */
  --bg2:#0a0f18;       /* 输入框/凹陷面 */
  --card:#152030;      /* 卡片 */
  --line:#28394e;      /* 描边 */
  --fg:#eaf2fb;        /* 主文字 */
  --mut:#8ea3ba;       /* 次文字 */
  --accent:#2f80ed;    /* 球衣蓝（主色） */
  --accent2:#1c5fd0;   /* 深蓝 */
  --ball:#ffb02e;      /* 排球 / 木地板 暖琥珀（强调色） */
  --ball2:#e8941a;
  --blue:#2f80ed;      /* 链接/焦点 = 主蓝 */
  --ok:#2fbf6b; --warn:#e6b800; --bad:#e25555;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font-family:-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.55;
}
/* 漫画铺满全屏：固定背景 + 深色蒙版（保证卡片/文字清晰）。桌面用 cover，手机改成完整顶图。 */
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(8,13,21,.52), rgba(8,13,21,.74) 48%, rgba(8,13,21,.88)),
    url("/static/hero.jpg") center center / cover no-repeat;
}
/* 手机/窄屏：图片按完整宽度贴顶展示，下半屏深色让卡片清晰 */
@media (max-width: 720px){
  body::before{
    background:
      linear-gradient(180deg, rgba(8,13,21,.12) 0%, rgba(8,13,21,.40) 22%, rgba(8,13,21,.85) 40%, rgba(8,13,21,.92) 70%),
      url("/static/hero.jpg") top center / 100% auto no-repeat,
      var(--bg);
  }
}
.wrap{max-width:460px; margin:0 auto; padding:22px 16px 60px}

header.top{display:flex; align-items:center; gap:11px; margin-bottom:14px}
header.top .logo{font-size:22px; width:44px; height:44px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--accent), var(--accent2)); border-radius:13px;
  box-shadow:0 8px 18px rgba(47,128,237,.42)}
header.top h1{font-size:19px; margin:0; font-weight:800; letter-spacing:.3px; text-shadow:0 2px 12px rgba(0,0,0,.55)}
header.top .sub{color:var(--mut); font-size:12px; margin-top:2px}

.card{background:rgba(18,27,40,.72); backdrop-filter:blur(13px) saturate(1.15);
  -webkit-backdrop-filter:blur(13px) saturate(1.15);
  border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:17px; margin-bottom:14px;
  box-shadow:0 16px 38px rgba(0,0,0,.45)}
.card h2{font-size:15px; margin:0 0 10px; font-weight:800}
.muted{color:var(--mut); font-size:13px}
.row{display:flex; gap:10px}
.row > *{flex:1}

label{display:block; font-size:13px; color:var(--mut); margin:10px 0 4px}
input{width:100%; padding:12px 13px; border-radius:11px; border:1px solid var(--line);
  background:var(--bg2); color:var(--fg); font-size:15px; transition:.15s}
input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(47,128,237,.22)}

button{width:100%; padding:13px; border:0; border-radius:12px; font-size:15px; font-weight:800;
  color:#fff; cursor:pointer; transition:.15s; letter-spacing:.3px;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow:0 8px 20px rgba(47,128,237,.32)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}
button.sec{background:#243243; color:var(--fg); border:1px solid var(--line); box-shadow:none}
button.out{background:linear-gradient(135deg, var(--ball), var(--ball2)); color:#3a2600;
  box-shadow:0 8px 20px rgba(255,176,46,.30)}
button.ghost{background:transparent; color:var(--mut); border:1px solid var(--line);
  font-weight:700; box-shadow:none}
.btnrow{display:flex; gap:10px; margin-top:6px}

.big-state{text-align:center; padding:10px 0 6px}
.big-state .pts{font-size:46px; font-weight:900; line-height:1;
  color:var(--ball); text-shadow:0 0 26px rgba(255,176,46,.40)}
.big-state .pts small{font-size:15px; color:var(--mut); font-weight:700}
.steps{display:flex; gap:10px; margin:16px 0 6px}
.step{flex:1; text-align:center; padding:12px 6px; border-radius:12px; border:1px solid var(--line);
  background:var(--bg2); font-size:13px; color:var(--mut); transition:.15s}
.step .ic{font-size:22px; display:block; margin-bottom:4px}
.step.done{border-color:var(--accent); background:rgba(47,128,237,.13); color:var(--fg)}

.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:#0c1320; border:1px solid var(--line); color:var(--fg);
  padding:12px 16px; border-radius:13px; max-width:90%; font-size:14px; z-index:99;
  box-shadow:0 12px 36px rgba(0,0,0,.55); display:none}
.toast.show{display:block; animation:pop .2s}
.toast.ok{border-color:var(--ok)} .toast.bad{border-color:var(--bad)}
@keyframes pop{from{opacity:0; transform:translate(-50%,8px)}to{opacity:1}}

.devbox{background:rgba(255,176,46,.08); border:1px dashed var(--ball); color:#ffd98a;
  padding:10px 12px; border-radius:11px; font-size:13px; margin-top:10px}
.devbox b{color:#fff}
.tag{display:inline-block; font-size:11px; padding:2px 8px; border-radius:20px;
  background:rgba(47,128,237,.16); color:#9cc4f5; margin-left:6px; font-weight:700}
.hide{display:none}
.center{text-align:center}
.foot{color:var(--mut); font-size:12px; text-align:center; margin-top:18px}
.foot a{color:var(--accent); text-decoration:none; font-weight:600}
.spin{display:inline-block; width:14px; height:14px; border:2px solid #fff5;
  border-top-color:#fff; border-radius:50%; animation:sp .7s linear infinite; vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
.kv{display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--line); font-size:13px}
.kv:last-child{border:0}
.kv .k{color:var(--mut)}