* { box-sizing:border-box; }
html, body { min-height:100%; }
body.auth-page { margin:0; min-height:100vh; display:grid; place-items:center; padding:24px; font-family:var(--font-family-body); color:var(--color-text-primary); background:var(--color-page-bg); }
.auth-shell { width:min(1080px,100%); display:grid; grid-template-columns:minmax(320px,.9fr) minmax(480px,1.15fr); overflow:hidden; border:1px solid var(--color-border); border-radius: 16px; background:var(--color-surface-raised); box-shadow:var(--shadow-modal); }
.auth-intro { padding:44px; display:flex; flex-direction:column; justify-content:space-between; background:var(--color-surface-secondary); }
.auth-page .brand { display:flex; align-items:center; gap:13px; }
.auth-page .brand-logo { width:48px; height:48px; display:grid; place-items:center; border-radius: 10px; color:var(--color-accent-contrast); font:600 24px var(--font-family-display); background:linear-gradient(135deg,var(--color-accent-hover),var(--color-accent)); }
.auth-page .brand-title { font-family:var(--font-family-display); font-weight:500; font-size:26px; letter-spacing:1px; line-height:1; color:var(--color-text-primary); }
.auth-page .brand-title span { font-weight:100; }
.auth-page .brand-subtitle { color:var(--color-text-secondary); font-size:12px; line-height:1.35; margin-top:2px; }
.auth-page h1 { margin:56px 0 12px; font:600 clamp(31px,4vw,48px)/1.05 var(--font-family-display); }
.intro-note { margin-top:32px; padding:16px 18px; border-radius: 11px; background:var(--color-surface-glass); color:var(--color-text-secondary); font-size:13px; line-height:1.55; }
.auth-panel { padding:44px 52px; background:var(--color-surface); }
.auth-page .eyebrow { color:var(--color-accent); text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight: 600; }
.auth-page h2 { margin:9px 0 8px; font:600 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: 600; }
.auth-page input { width:100%; padding:13px 14px; border:1px solid var(--color-border-strong); border-radius: 8px; 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: 8px; 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 22px; border:0; border-radius: var(--radius-pill); color:var(--color-accent-contrast); cursor:pointer; font:600 14px var(--font-family-body); background:var(--color-accent); }
.auth-error { margin-bottom:14px; padding:11px 13px; border-radius: 8px; color:#ff8a8a; background:#2a1f21; border:1px solid #5a2a2e; 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: 600; text-decoration:none; }
@media (max-width:760px) { .auth-shell { grid-template-columns:1fr; } .auth-intro { display:none; } .auth-panel { padding:28px 22px; } }