:root { color-scheme: light; --ink:#17201c; --muted:#68736d; --line:#dce2dd; --lime:#dfff45; --violet:#5e5ce6; font-family:Inter,"Microsoft YaHei","PingFang SC",system-ui,sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { min-width:320px; min-height:100%; margin:0; background:#f3f5f1; color:var(--ink); }
body { min-height:100vh; }
button,input { font:inherit; letter-spacing:0; }
.auth-shell { min-height:100vh; display:grid; grid-template-columns:minmax(420px,1.25fr) minmax(390px,.75fr); }
.auth-visual { position:relative; min-height:100vh; overflow:hidden; background:#dadeda; }
.auth-visual > img { width:100%; height:100%; display:block; object-fit:cover; }
.visual-overlay { position:absolute; inset:auto 0 0; padding:22% 7% 7%; background:linear-gradient(transparent,rgba(11,15,13,.92)); color:white; }
.visual-overlay > span { display:inline-block; padding:6px 8px; border-radius:4px; background:var(--lime); color:#111512; font-size:9px; font-weight:900; letter-spacing:.12em; }
.visual-overlay h1 { max-width:600px; margin:14px 0 20px; font-size:clamp(32px,4vw,58px); line-height:1.08; letter-spacing:0; }
.visual-metrics { display:flex; gap:8px; }
.visual-metrics b { padding:7px 10px; border:1px solid rgba(255,255,255,.35); border-radius:5px; font-size:10px; }
.auth-panel { min-height:100vh; display:flex; flex-direction:column; padding:28px clamp(26px,5vw,72px); background:white; }
.brand { display:flex; align-items:center; gap:11px; }
.brand > span { width:38px; height:38px; display:grid; place-items:center; border-radius:6px; background:var(--ink); color:var(--lime); }
.brand svg { width:20px; }
.brand b,.brand small { display:block; }
.brand b { font-size:14px; }
.brand small { margin-top:2px; color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.12em; }
.auth-content { width:min(100%,420px); margin:auto; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; padding:3px; border:1px solid var(--line); border-radius:6px; background:#f0f3ef; }
.auth-tabs button { min-height:38px; border:0; border-radius:4px; background:transparent; color:var(--muted); cursor:pointer; }
.auth-tabs button.active { background:white; color:var(--ink); font-weight:800; box-shadow:0 2px 8px rgba(20,28,24,.08); }
.auth-title { margin:32px 0 22px; }
.auth-title h2 { margin:0; font-size:26px; letter-spacing:0; }
.auth-title p { margin:7px 0 0; color:var(--muted); font-size:12px; }
#authForm { display:grid; gap:15px; }
.field { display:grid; gap:7px; }
.field > span { color:#4d5853; font-size:11px; font-weight:700; }
.field > div { min-height:46px; display:flex; align-items:center; gap:9px; padding:0 11px; border:1px solid var(--line); border-radius:6px; background:#fbfcfa; }
.field > div:focus-within { border-color:var(--violet); box-shadow:0 0 0 3px rgba(94,92,230,.08); }
.field svg { width:17px; color:var(--muted); }
.field input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--ink); }
.field button { width:30px; height:30px; display:grid; place-items:center; padding:0; border:0; background:transparent; cursor:pointer; }
.submit-button { min-height:48px; display:flex; align-items:center; justify-content:center; gap:9px; margin-top:5px; border:1px solid var(--ink); border-radius:6px; background:var(--ink); color:white; font-weight:800; cursor:pointer; }
.submit-button:hover { background:#2b3732; }
.submit-button:disabled { cursor:wait; opacity:.65; }
.submit-button svg { width:17px; }
.auth-error { min-height:18px; margin:0; color:#c23f36; font-size:11px; text-align:center; }
.auth-footer { margin:20px 0 0; color:var(--muted); font-size:9px; text-align:center; }
@media (max-width:820px) { .auth-shell{grid-template-columns:1fr}.auth-visual{display:none}.auth-panel{padding:20px 18px}.auth-content{margin:70px auto auto}.auth-footer{padding-bottom:env(safe-area-inset-bottom)} }