.auth-page{min-height:100vh;display:flex;align-items:stretch;}
.auth-left{flex:1;background:linear-gradient(135deg,var(--navy-deeper) 0%,var(--navy) 60%,#1a4fa0 100%);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:60px 48px;position:relative;overflow:hidden;}
.auth-left::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 60% 40%,rgba(37,99,235,0.3) 0%,transparent 65%),radial-gradient(ellipse at 20% 80%,rgba(0,212,255,0.2) 0%,transparent 55%);}
.auth-left-content{position:relative;z-index:1;max-width:400px;text-align:center;}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:40px;justify-content:center;}
.auth-brand img{width:60px;height:60px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,0.2);}
.auth-brand-name{font-family:var(--font-display);font-weight:800;font-size:1.8rem;color:#fff;}
.auth-tagline{font-size:2rem;font-family:var(--font-display);font-weight:700;color:#fff;line-height:1.25;margin-bottom:20px;}
.auth-tagline span{background:linear-gradient(135deg,var(--accent-light),#00ff88);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.auth-desc{color:rgba(255,255,255,0.65);font-size:15px;line-height:1.7;}
.auth-features{display:flex;flex-direction:column;gap:14px;margin-top:36px;text-align:left;}
.auth-feature{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,0.8);font-size:14px;}
.auth-feature-icon{width:32px;height:32px;border-radius:var(--radius-sm);background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.auth-right{width:500px;display:flex;flex-direction:column;justify-content:center;padding:60px 48px;background:var(--bg);}
.auth-form-wrap{max-width:380px;width:100%;margin:0 auto;}
.auth-form-title{font-size:1.8rem;font-weight:800;margin-bottom:6px;}
.auth-form-sub{color:var(--text-secondary);font-size:14px;margin-bottom:32px;}
.role-selector{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:24px;}
.role-btn{padding:14px 16px;border-radius:var(--radius-lg);border:1.5px solid var(--border-strong);background:var(--surface);text-align:left;cursor:pointer;transition:all var(--t) var(--ease);}
.role-btn:hover{border-color:var(--accent);background:rgba(37,99,235,0.05);}
.role-btn.selected{border-color:var(--accent);background:rgba(37,99,235,0.08);box-shadow:0 0 0 1px var(--accent);}
.role-btn-icon{font-size:22px;margin-bottom:6px;}
.role-btn-name{font-size:13px;font-weight:700;color:var(--text-primary);}
.role-btn-desc{font-size:11px;color:var(--text-muted);margin-top:2px;}
.auth-switch{text-align:center;margin-top:20px;font-size:14px;color:var(--text-secondary);}
.auth-switch a{color:var(--accent);font-weight:600;}
.auth-switch a:hover{text-decoration:underline;}
@media(max-width:900px){.auth-left{display:none;}.auth-right{width:100%;padding:40px 24px;}}


/* ── Auth inline field error ── */
@keyframes authShake {
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}
}
.auth-field-err { animation:fadeInDown 0.2s ease; }
@keyframes fadeInDown { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }