:root{
  --bg:#f6f7f5; --card:#fff; --ink:#17231f; --muted:#6b7a75;
  --line:#e3e8e5; --brand:#0e5a4a; --brand-soft:#e6f2ee;
  --danger:#a32a2a; --danger-bg:#fdecec; --ok:#1c7a4a; --ok-bg:#e7f6ee;
  --warn:#8a5a00; --warn-bg:#fff4dd;
  --radius:16px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#101614; --card:#18211e; --ink:#e8f0ec; --muted:#93a49e;
    --line:#26332e; --brand:#5fd0ae; --brand-soft:#17332b;
    --danger:#ff9c9c; --danger-bg:#331e1e; --ok:#7fe0ad; --ok-bg:#12301f;
    --warn:#ffd98a; --warn-bg:#33291a;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  display:flex; flex-direction:column; min-height:100%;
  padding:calc(env(safe-area-inset-top) + 0px) 0 calc(env(safe-area-inset-bottom) + 0px);
}

.wrap{width:100%; max-width:420px; margin:0 auto; padding:28px 20px 40px; flex:1}

.brand{display:flex; align-items:center; gap:10px; margin-bottom:24px}
.brand .flag{font-size:26px}
.brand h1{font-size:18px; margin:0; font-weight:700}
.brand p{margin:2px 0 0; font-size:12.5px; color:var(--muted)}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.card + .card{margin-top:14px}
h2{font-size:19px; margin:0 0 4px}
.sub{margin:0 0 18px; color:var(--muted); font-size:13.5px}

/* 分段控件 */
.seg{display:flex; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:3px; margin-bottom:18px}
.seg button{
  flex:1; border:0; background:transparent; color:var(--muted);
  padding:9px 0; border-radius:9px; font-size:14px; cursor:pointer; font-family:inherit;
}
.seg button.on{background:var(--card); color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* 表单 */
.field{margin-bottom:14px}
.field label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px}
.field input{
  width:100%; padding:12px 14px; font-size:16px; font-family:inherit;
  background:var(--bg); color:var(--ink);
  border:1px solid var(--line); border-radius:12px; outline:none;
  -webkit-appearance:none;
}
.field input:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.field .hint{font-size:12px; color:var(--muted); margin-top:6px}
.field .err{font-size:12.5px; color:var(--danger); margin-top:6px; display:none}
.field.bad input{border-color:var(--danger)}
.field.bad .err{display:block}

.btn{
  width:100%; padding:13px 16px; border:0; border-radius:12px; cursor:pointer;
  background:var(--brand); color:#fff; font-size:15.5px; font-weight:650; font-family:inherit;
}
.btn:active{transform:scale(.99)}
.btn[disabled]{opacity:.55; cursor:not-allowed}
.btn.ghost{background:var(--brand-soft); color:var(--brand)}
.btn.plain{background:transparent; color:var(--muted); border:1px solid var(--line); font-weight:500}

/* 第三方 */
.divider{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; margin:20px 0 14px}
.divider::before,.divider::after{content:''; flex:1; height:1px; background:var(--line)}
.oauth{display:flex; flex-direction:column; gap:10px}
.oauth button{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px; border-radius:12px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); font-size:15px; font-family:inherit; cursor:pointer;
}
.oauth button .ico{font-size:17px}
.oauth button small{color:var(--muted); font-size:11.5px; margin-left:4px}

/* 提示条 */
.notice{border-radius:12px; padding:10px 12px; font-size:13px; margin-bottom:14px; line-height:1.5}
.notice.info{background:var(--brand-soft); color:var(--brand)}
.notice.warn{background:var(--warn-bg); color:var(--warn)}
.notice.err{background:var(--danger-bg); color:var(--danger)}
.notice.ok{background:var(--ok-bg); color:var(--ok)}
.notice code{background:rgba(0,0,0,.08); padding:1px 6px; border-radius:5px; font-size:13px; letter-spacing:1px}
@media (prefers-color-scheme: dark){ .notice code{background:rgba(255,255,255,.12)} }

.foot-link{text-align:center; margin-top:18px; font-size:13.5px; color:var(--muted)}
.foot-link a{color:var(--brand); text-decoration:none; font-weight:600}

.pagefoot{margin-top:auto; padding:18px; text-align:center; font-size:12px; color:var(--muted)}
.pagefoot a{color:var(--muted)}

/* 验证码步骤 */
.step{display:none}
.step.on{display:block}
.code-input{
  letter-spacing:10px; text-align:center; font-size:24px; font-weight:700;
  padding:14px 10px; font-family:ui-monospace,Menlo,Consolas,monospace;
}
.row-btns{display:flex; gap:10px; margin-top:10px}
.row-btns .btn{flex:1}
.small{font-size:12.5px; color:var(--muted)}