:root{
  --cream:#faf6ee; --cream-2:#f4eee2; --card:#fffdf8;
  --forest:#2f5d50; --forest-2:#3d7a6a; --forest-3:#e8f0ec;
  --gold:#c8963e; --gold-2:#e8b962; --gold-soft:#faf1de;
  --ink:#2c2823; --ink-2:#6b635a; --ink-3:#9c948a;
  --line:#e8e0d2; --red:#c0392b; --red-soft:#fbeceb;
  --r:14px; --r-s:9px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--cream); color:var(--ink); font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased; min-height:100vh;
  display:flex; align-items:center; justify-content:center; padding:32px 18px;
}
/* 背景：暖奶油 + 极淡的森林绿光晕 */
body::before{
  content:''; position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(47,93,80,.10), transparent 62%),
    radial-gradient(720px 480px at 108% 108%, rgba(200,150,62,.12), transparent 60%);
}
.wrap{width:100%; max-width:412px}

.brand{display:flex; align-items:center; gap:12px; margin-bottom:20px}
.brand-mark{width:44px;height:44px;border-radius:13px;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:700;color:#3d2c10;
  box-shadow:0 6px 18px rgba(200,150,62,.28)}
.brand-title{font-size:17px;font-weight:680;letter-spacing:.3px}
.brand-sub{font-size:11.5px;color:var(--ink-3);margin-top:1px}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 26px 24px; box-shadow:0 1px 2px rgba(44,40,35,.04),0 10px 34px rgba(44,40,35,.07);
}
.card h1{font-size:20px;font-weight:660;letter-spacing:.2px}
.card .sub{font-size:12.5px;color:var(--ink-3);margin-top:5px;line-height:1.6}

.field{margin-top:16px}
.field label{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:6px;font-weight:500}
.input{
  width:100%; border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:var(--r-s); padding:11px 13px; font-size:15px; font-family:inherit;
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.input:focus{border-color:var(--forest-2); box-shadow:0 0 0 3px rgba(61,122,106,.13)}
.input::placeholder{color:var(--ink-3); font-size:13.5px}
.row{display:flex; gap:9px}
.row .input{flex:1; min-width:0}

.code-btn{
  flex:0 0 auto; padding:0 14px; border-radius:var(--r-s); border:1px solid var(--forest);
  background:var(--forest); color:#fff; font-size:13px; font-family:inherit; cursor:pointer;
  font-weight:600; transition:background .15s; white-space:nowrap;
}
.code-btn:hover{background:var(--forest-2)}
.code-btn[disabled]{background:var(--cream-2); border-color:var(--line); color:var(--ink-3); cursor:not-allowed}

.submit{
  width:100%; margin-top:20px; padding:12px; border:0; border-radius:var(--r-s);
  background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:#3d2c10;
  font-size:15px; font-weight:680; font-family:inherit; cursor:pointer; letter-spacing:.4px;
  box-shadow:0 4px 14px rgba(200,150,62,.3); transition:transform .12s, box-shadow .15s;
}
.submit:hover{transform:translateY(-1px); box-shadow:0 6px 20px rgba(200,150,62,.36)}
.submit[disabled]{opacity:.55; transform:none; box-shadow:none; cursor:not-allowed}

.tip{
  margin-top:14px; font-size:12px; color:var(--ink-2); background:var(--gold-soft);
  border:1px solid rgba(200,150,62,.28); border-radius:var(--r-s); padding:10px 12px; line-height:1.65;
}
.tip b{color:#8a5a12}
.err{margin-top:12px; font-size:12.5px; color:var(--red); background:var(--red-soft);
  border:1px solid rgba(192,57,43,.2); border-radius:var(--r-s); padding:9px 12px; display:none}
.err.show{display:block}
.ok{margin-top:12px; font-size:12.5px; color:var(--forest); background:var(--forest-3);
  border:1px solid rgba(47,93,80,.2); border-radius:var(--r-s); padding:9px 12px; display:none}
.ok.show{display:block}

.foot{margin-top:18px; font-size:11.5px; color:var(--ink-3); text-align:center; line-height:1.7}
.quote{margin-top:22px; text-align:center; font-size:12px; color:var(--ink-3); letter-spacing:.4px}
.quote .big{display:block; font-size:13px; color:var(--forest); margin-top:3px; letter-spacing:1px}

.steps{display:flex; gap:8px; margin-bottom:18px}
.step{
  flex:1; height:4px; border-radius:3px; background:var(--line); transition:background .25s;
}
.step.on{background:var(--gold)}

.devcode{
  margin-top:12px; border:1px dashed rgba(47,93,80,.4); background:var(--forest-3);
  border-radius:var(--r-s); padding:12px; text-align:center;
}
.devcode .lb{font-size:11.5px; color:var(--ink-2)}
.devcode .v{font-size:26px; font-weight:700; letter-spacing:6px; color:var(--forest); margin-top:2px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

@media (max-width:480px){
  .card{padding:22px 18px}
  .brand-mark{width:38px;height:38px;font-size:18px}
}