* { box-sizing:border-box; }
html, body { min-height:100%; }
body.auth-page { margin:0; display:grid; place-items:center; padding:24px; font-family:var(--font-family-body); color:var(--color-text-primary); background:radial-gradient(circle at 15% 12%,rgba(37,214,185,.2),transparent 30%),radial-gradient(circle at 88% 20%,rgba(48,116,255,.13),transparent 28%),linear-gradient(135deg,var(--color-page-bg-secondary),var(--color-page-bg)); }
.auth-shell { width:min(920px,100%); display:grid; grid-template-columns:1fr minmax(360px,.9fr); overflow:hidden; border:1px solid rgba(255,255,255,.9); border-radius:30px; background:var(--color-surface-raised); box-shadow:var(--shadow-modal); }
.auth-intro { padding:42px; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(150deg,var(--color-accent-soft),rgba(37,214,185,.04)); }
.auth-page .brand { display:flex; align-items:center; gap:14px; }
.auth-page .logo { width:54px; height:54px; display:grid; place-items:center; border-radius:18px; color:var(--color-text-inverse); font:900 27px var(--font-family-display); background:linear-gradient(135deg,var(--color-accent),var(--color-accent-secondary)); }
.auth-page h1 { margin:28px 0 12px; font:900 clamp(31px,4vw,48px)/1.05 var(--font-family-display); }
.intro-copy { max-width:480px; color:var(--color-text-secondary); line-height:1.65; }
.intro-note { margin-top:32px; padding:16px 18px; border-radius:18px; background:var(--color-surface-glass); color:var(--color-text-secondary); font-size:13px; line-height:1.55; }
.auth-panel { padding:38px; background:var(--color-surface); }
.auth-page .eyebrow { color:var(--color-accent); text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:800; }
.auth-page h2 { margin:9px 0 8px; font:900 30px var(--font-family-display); }
.auth-page .subtitle { margin:0 0 22px; color:var(--color-text-secondary); font-size:14px; }
.auth-page form { display:grid; gap:15px; }
.auth-page .field { display:grid; gap:7px; }
.auth-page .field-label { font-size:13px; font-weight:800; }
.auth-page input { width:100%; padding:13px 14px; border:1px solid var(--color-border-strong); border-radius:13px; font:inherit; color:var(--color-text-primary); outline:none; background:var(--color-surface-secondary); }
.auth-page input:focus { border-color:var(--color-accent); box-shadow:var(--shadow-focus); }
.avatar-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.avatar-option { position:relative; display:grid; justify-items:center; gap:3px; padding:9px 5px; border:1px solid var(--color-border); border-radius:13px; cursor:pointer; color:var(--color-text-secondary); font-size:10px; }
.avatar-option input { position:absolute; opacity:0; pointer-events:none; }
.avatar-option:has(input:checked) { border-color:var(--color-accent); background:var(--color-accent-soft); color:var(--color-text-primary); }
.avatar-symbol { font-size:24px; }
.auth-page button { margin-top:3px; padding:14px 18px; border:0; border-radius:14px; color:var(--color-accent-contrast); cursor:pointer; font:800 14px var(--font-family-body); background:linear-gradient(135deg,var(--color-accent),#08bfae); box-shadow:0 12px 25px rgba(0,168,181,.24); }
.auth-error { margin-bottom:14px; padding:11px 13px; border-radius:12px; color:#a53143; background:#fff0f2; border:1px solid #ffd1d8; font-size:13px; }
.auth-page .switch { margin-top:18px; text-align:center; color:var(--color-text-secondary); font-size:13px; }
.auth-page .switch a { color:var(--color-accent); font-weight:800; text-decoration:none; }
@media (max-width:760px) { .auth-shell { grid-template-columns:1fr; } .auth-intro { display:none; } .auth-panel { padding:28px 22px; } }