.auth-area { min-height:100vh; background: radial-gradient(circle at top left,#eff6ff 0,#f8fafc 38%,#f5f7fb 100%); }
.auth-header { padding:22px 0; }
.auth-brand { display:inline-flex; align-items:center; gap:10px; color:#111827; text-decoration:none; }
.auth-brand:hover { color:#111827; }
.auth-brand-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; color:#fff; background:linear-gradient(135deg,#2563eb,#1d4ed8 58%,#f59e0b 58%,#f59e0b); font-weight:900; }
.auth-brand strong { font-size:1.05rem; }
.auth-shell { width:min(100%,900px); margin:30px auto 60px; display:grid; grid-template-columns:.9fr 1.1fr; border:1px solid #e2e8f0; border-radius:22px; overflow:hidden; background:#fff; box-shadow:0 20px 55px rgba(15,23,42,.1); }
.auth-aside { position:relative; overflow:hidden; padding:42px 34px; color:#fff; background:linear-gradient(145deg,#0f172a,#1e3a8a 68%,#2563eb); }
.auth-aside::after { content:""; position:absolute; width:230px; height:230px; right:-100px; bottom:-95px; border-radius:50%; background:rgba(255,255,255,.08); }
.auth-aside h1 { position:relative; z-index:1; font-size:1.65rem; font-weight:850; line-height:1.25; margin:0 0 12px; }
.auth-aside p { position:relative; z-index:1; color:#dbeafe; font-size:.88rem; }
.auth-points { position:relative; z-index:1; display:grid; gap:13px; margin-top:28px; }
.auth-point { display:flex; align-items:center; gap:10px; font-size:.82rem; color:#e2e8f0; }
.auth-point i { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; background:rgba(255,255,255,.1); color:#fff; }
.auth-main { padding:42px 38px; }
.auth-main h2 { font-size:1.45rem; font-weight:850; margin-bottom:6px; }
.auth-main .lead-copy { color:#64748b; font-size:.88rem; margin-bottom:24px; }
.auth-main .btn { min-height:46px; }
.auth-footnote { margin-top:16px; color:#64748b; font-size:.8rem; text-align:center; }

.portal-login { min-height:100vh; display:grid; place-items:center; padding:24px; }
.portal-login.seller { background:linear-gradient(135deg,#0f172a,#172554); }
.portal-login.control { background:linear-gradient(135deg,#111827,#312e81); }
.portal-login-card { width:min(100%,460px); background:#fff; border-radius:20px; padding:30px; box-shadow:0 24px 65px rgba(0,0,0,.25); }
.portal-login-brand { display:flex; align-items:center; gap:11px; margin-bottom:28px; }
.portal-login-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:#fff; background:#2563eb; font-weight:900; }
.portal-login.control .portal-login-mark { background:#4338ca; }
.portal-login-brand strong { display:block; color:#111827; }
.portal-login-brand span { display:block; color:#94a3b8; font-size:.72rem; }
.portal-login-card h1 { font-size:1.35rem; font-weight:850; margin-bottom:5px; }
.portal-login-card p { color:#64748b; font-size:.86rem; }

@media (max-width:767.98px) {
  .auth-header { padding:15px 4px; }
  .auth-shell { grid-template-columns:1fr; margin:8px auto 30px; border-radius:17px; }
  .auth-aside { padding:24px 21px; }
  .auth-aside h1 { font-size:1.3rem; }
  .auth-aside p { margin-bottom:0; }
  .auth-points { display:none; }
  .auth-main { padding:25px 20px 26px; }
  .portal-login { padding:15px; }
  .portal-login-card { padding:24px 20px; border-radius:17px; }
}