:root{
  --bg:#f5f7fa; --panel:#ffffff; --border:#e3e8ef; --text:#1f2933;
  --muted:#687385; --primary:#2563eb; --primary-d:#1d4ed8; --red:#dc2626;
  --shadow:0 4px 16px rgba(16,24,40,.08),0 1px 3px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  background:linear-gradient(160deg,#eef2ff 0%,#f5f7fa 45%,#f0f9ff 100%);color:var(--text);font-size:14px}
.wrap{width:100%;max-width:400px;padding:24px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow);padding:34px 30px 28px}
.brand{font-size:22px;font-weight:700;color:var(--primary);margin-bottom:14px}
h1{margin:0 0 6px;font-size:19px;font-weight:650}
.sub{margin:0 0 24px;color:var(--muted);font-size:13px}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
input{width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:9px;
  font-size:14px;font-family:inherit;background:#fff;transition:border-color .15s,box-shadow .15s}
input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.btn{width:100%;margin-top:18px;padding:11px;border:none;border-radius:9px;background:var(--primary);
  color:#fff;font-size:14.5px;font-weight:600;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--primary-d)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.err{min-height:18px;margin-top:8px;color:var(--red);font-size:12.5px}
.tip{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);
  color:var(--muted);font-size:12px;line-height:1.6}
.foot{text-align:center;margin-top:18px;color:#9aa4b2;font-size:12px}