:root{
  --bg:#f3f8f5; --panel:#fff; --ink:#10231d; --muted:#6b837b; --faint:#93a69f;
  --line:#e0eae5; --market:#0e9c7f; --market-2:#0a7d65; --market-soft:#e6f7f2;
  --shadow:0 24px 70px rgba(16,35,29,.15);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:
    radial-gradient(900px 600px at 15% 10%, rgba(44,224,192,.18), transparent 60%),
    radial-gradient(700px 500px at 90% 20%, rgba(109,168,255,.14), transparent 60%),
    var(--bg);
  color:var(--ink);
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.login-page{min-height:100%; display:grid; place-items:center; padding:28px 16px}
.login-card{
  width:min(440px,100%); background:rgba(255,255,255,.92); border:1px solid var(--line);
  border-radius:20px; padding:30px 30px 24px; box-shadow:var(--shadow); backdrop-filter:blur(12px);
}
.brand{display:flex; align-items:center; gap:10px; margin-bottom:24px}
.brand-mark{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg,#20c9a8,#0e9c7f); color:#fff; font-weight:900; font-size:15px;
}
.brand b{display:block; font-size:14px; line-height:1.2}
.brand small{display:block; font-size:9.5px; color:var(--faint); letter-spacing:.13em; margin-top:2px}
h1{font-size:23px; letter-spacing:-.03em; margin:0 0 8px}
.lead{font-size:12px; color:var(--muted); margin:0 0 22px; line-height:1.7}
form{display:flex; flex-direction:column; gap:12px}
label{display:flex; flex-direction:column; gap:5px; font-size:11px; color:var(--muted)}
input{
  height:42px; border:1px solid var(--line); border-radius:9px; padding:0 12px;
  font:inherit; font-size:13px; outline:0; color:var(--ink); background:#fff;
}
input:focus{border-color:var(--market); box-shadow:0 0 0 3px var(--market-soft)}
button.primary{
  height:44px; border:0; border-radius:9px; background:var(--market); color:#fff;
  font:inherit; font-size:13px; font-weight:700; cursor:pointer; margin-top:4px;
}
button.primary:hover{background:var(--market-2)}
button.primary:disabled{opacity:.6; cursor:wait}
.error{min-height:18px; font-size:11px; color:#c0405e; line-height:1.5}
.foot{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:22px; padding-top:14px; border-top:1px solid var(--line); font-size:9.5px; color:var(--faint)}
@media(max-width:520px){
  .login-card{padding:24px 20px 20px; border-radius:16px}
  h1{font-size:20px}
  .foot{flex-direction:column; gap:3px}
}