*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--bg:#f4f1ee;--ink:#241f1b;--ink2:#55493f;--ink3:#978a7d;--accent:#9c3c17;--line:rgba(74,56,38,.12)}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--ink);
  font:400 15px/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  display:flex;align-items:center;justify-content:center;
  padding:28px 18px calc(28px + env(safe-area-inset-bottom))}
.wrap{width:100%;max-width:404px}
.brand{font-size:12px;letter-spacing:.16em;color:var(--ink3);margin:0 0 24px;text-align:center}
h1{font-size:23px;font-weight:600;margin:0 0 8px;letter-spacing:-.01em}
.sub{font-size:14px;color:var(--ink3);margin:0 0 26px;line-height:1.7}
.sub strong{color:var(--ink2);font-weight:500}

.tabs{display:flex;gap:0;margin:0 0 26px;border-bottom:1px solid var(--line)}
.tab{flex:1;background:none;border:none;padding:0 0 12px;font-size:14.5px;color:var(--ink3);
  cursor:pointer;position:relative;font-family:inherit}
.tab.on{color:var(--ink);font-weight:500}
.tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}

.pane{display:none}
.pane.on{display:block;animation:fade .26s ease}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.field{margin:0 0 14px}
label{display:block;font-size:12.5px;color:var(--ink3);margin:0 0 7px;letter-spacing:.02em}
input{width:100%;height:50px;border:1px solid var(--line);border-radius:10px;background:#fff;
  padding:0 15px;font-size:16px;color:var(--ink);outline:none;transition:border-color .18s;font-family:inherit}
input:focus{border-color:var(--accent)}
input.code{letter-spacing:.28em;font-size:20px;text-align:center;font-variant-numeric:tabular-nums}
input::placeholder{color:#b9aea3}
button{width:100%;height:50px;border:none;border-radius:10px;background:var(--accent);color:#fff;
  font-size:15.5px;font-weight:500;cursor:pointer;font-family:inherit;transition:opacity .18s,transform .1s}
button:active{transform:scale(.985)}
button:disabled{opacity:.4;cursor:default}
button.ghost{background:transparent;color:var(--ink2);border:1px solid var(--line);font-size:14px;height:46px}
button.link{background:none;border:none;color:var(--ink3);font-size:13px;height:auto;padding:0;
  text-decoration:underline;width:auto}

.msg{font-size:13.5px;line-height:1.65;margin:13px 0 0;min-height:21px}
.msg.ok{color:#2f6b4f}
.msg.err{color:var(--accent)}
.foot{font-size:12.5px;color:var(--ink3);margin:22px 0 0;text-align:center;line-height:1.9}
.foot a{color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--line);margin:0 4px}
.rowline{display:flex;justify-content:space-between;align-items:center;margin:18px 0 0}
.steps{display:flex;gap:6px;margin:0 0 22px}
.steps i{flex:1;height:2px;background:var(--line);border-radius:2px;transition:background .25s}
.steps i.on{background:var(--accent)}
.hint{font-size:12.5px;color:var(--ink3);margin:-4px 0 14px;line-height:1.6}
.ok-line{font-size:12.5px;color:#2f6b4f;margin:6px 0 0;min-height:17px}