:root{--bg1: #1c2430;--bg2: #2a3648;--card: #f5f7fa;--text: #1a2330;--muted: #5b6b7c;--accent: #2f6fed;--danger: #b42318;--stack-gap: 12px;--panel-pad: 16px}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;background:radial-gradient(1200px 600px at 20% 10%,#3a4a60,transparent),linear-gradient(160deg,var(--bg1),var(--bg2));color:var(--text)}.wrap{min-height:100%;min-height:100dvh;display:grid;place-items:center;padding-block:max(20px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-bottom,0px));padding-inline:max(20px,env(safe-area-inset-left,0px)) max(20px,env(safe-area-inset-right,0px))}.card{width:min(380px,100%);background:var(--card);border-radius:12px;padding:var(--panel-pad) 22px;display:grid;gap:var(--stack-gap);box-shadow:0 18px 50px #00000047}.card>*{margin-block:0}h1{margin:0;font-size:1.35rem;letter-spacing:.02em}.sub{color:var(--muted);font-size:.92rem}label{display:grid;gap:6px;font-size:.9rem;color:var(--muted)}input{border:1px solid #c9d3e0;border-radius:8px;padding:10px 12px;font-size:1rem;color:var(--text);background:#fff;width:100%;min-height:44px}button{border:0;border-radius:8px;padding:11px 14px;background:var(--accent);color:#fff;font-size:1rem;cursor:pointer;min-height:44px}button:disabled{opacity:.7;cursor:wait}.error{color:var(--danger);font-size:.9rem}@media (max-width: 520px){:root{--stack-gap: 10px;--panel-pad: 12px}.card{padding-inline:16px;border-radius:10px}h1{font-size:1.2rem}}@media (max-height: 700px) and (max-width: 900px){:root{--stack-gap: 10px;--panel-pad: 12px}.wrap{align-content:center}}