:root { --blue: #1f5eff; --ink: #172033; --sub: #667085; --line: #d9dee8; --bg: #f3f5f9; --red: #d92d20; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--bg);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; color: var(--ink); padding: 16px; }
.card { width: 100%; max-width: 380px; background: #fff; border-radius: 16px; padding: 32px 28px;
  box-shadow: 0 10px 30px rgba(23, 32, 51, .08); }
.brand { display: flex; gap: 14px; align-items: center; margin-bottom: 28px; }
.logo { width: 44px; height: 44px; border-radius: 11px; background: var(--blue); flex: none; }
.logo svg { width: 44px; height: 44px; }
h1 { font-size: 19px; margin: 0; }
.brand p { margin: 2px 0 0; color: var(--sub); font-size: 12.5px; }
label { display: block; font-size: 13px; color: var(--sub); margin-bottom: 14px; }
input { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font-size: 15px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; outline: none; }
input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31, 94, 255, .15); }
.err { min-height: 20px; color: var(--red); font-size: 13px; margin: -4px 0 8px; }
button { width: 100%; padding: 11px; font-size: 15px; font-weight: 600; color: #fff; background: var(--blue);
  border: 0; border-radius: 9px; cursor: pointer; }
button:disabled { opacity: .6; cursor: default; }
@media(max-width:700px){body{min-height:100dvh;padding:24px 20px;padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}.card{padding:28px 24px}.brand{gap:12px}h1{font-size:20px;line-height:1.5}.brand p{font-size:13px}input{min-height:52px;font-size:16px}label{font-size:14px}button{min-height:54px;font-size:17px}}