:root { --ink:#152431; --muted:#6a7a87; --teal:#0a766e; --navy:#153b50; --line:#dce7e9; }
* { box-sizing: border-box; }
body { margin:0; min-width:320px; min-height:100vh; color:var(--ink); background:#eef4f4; font-family:Inter,"Noto Sans SC","Microsoft YaHei",system-ui,sans-serif; }
.auth-shell { min-height:100vh; display:grid; grid-template-columns:minmax(360px,.9fr) minmax(430px,1.1fr); }
.auth-brand { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; padding:clamp(44px,8vw,110px); color:white; background:linear-gradient(145deg,#102f41,#0a655f); }
.auth-brand::after { content:""; position:absolute; width:430px; height:430px; right:-250px; bottom:-180px; border:70px solid rgba(116,211,198,.13); border-radius:50%; }
.brand-mark { width:52px; height:52px; margin-bottom:38px; border:10px solid #6bd0c2; border-radius:50% 50% 50% 15px; transform:rotate(-25deg); }
.eyebrow { margin:0 0 14px; color:#69cbbd; font-size:11px; font-weight:800; letter-spacing:.18em; }
.auth-brand h1 { margin:0; font:600 clamp(48px,7vw,78px)/1 Georgia,serif; letter-spacing:-.04em; }
.lead { max-width:520px; margin:22px 0 44px; color:#c9dfe3; font-size:17px; line-height:1.75; }
.method-card { display:flex; align-items:center; gap:18px; width:max-content; max-width:100%; padding:18px 22px; border:1px solid rgba(255,255,255,.16); border-radius:14px; background:rgba(255,255,255,.07); }
.method-card strong { color:#72d3c5; font:600 42px/1 Georgia,serif; }
.method-card span { color:#d7e8ea; font-size:12px; line-height:1.7; }
.auth-panel { display:grid; place-items:center; padding:36px; }
.auth-card { width:min(430px,100%); padding:40px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 24px 70px rgba(30,59,68,.10); }
.auth-card h2 { margin:0; font:600 32px/1.2 Georgia,"Noto Serif SC",serif; }
.intro { margin:12px 0 28px; color:var(--muted); font-size:13px; }
form { display:grid; gap:10px; }
label { margin-top:6px; color:#435663; font-size:13px; font-weight:700; }
input { width:100%; height:48px; border:1px solid #cad8dc; border-radius:10px; padding:0 13px; color:var(--ink); font:inherit; outline:none; }
input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(10,118,110,.12); }
button { height:48px; margin-top:8px; border:0; border-radius:10px; background:var(--teal); color:white; font:700 14px inherit; cursor:pointer; }
button:disabled { opacity:.65; cursor:wait; }
.error { min-height:19px; margin:4px 0 0; color:#b54231; font-size:13px; }
.help { margin:22px 0 0; color:var(--muted); font-size:12px; text-align:center; }
.legal { align-self:end; margin:0; color:#7c8b95; font-size:11px; }
@media(max-width:800px){ .auth-shell{grid-template-columns:1fr}.auth-brand{min-height:38vh;padding:38px}.brand-mark{margin-bottom:20px}.lead{margin-bottom:20px}.auth-panel{padding:24px}.legal{margin-top:24px} }