body { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(460px, 100%); background: white; border: 1px solid var(--border); border-radius: 24px; padding: 32px; box-shadow: var(--shadow); }
.auth-card h1 { margin: 20px 0; }
.auth-card form { display: grid; gap: 18px; margin-top: 20px; }
.auth-card nav { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.auth-card a { color: var(--purple); }

/* Customer authentication baseline. Existing admin presentation remains scoped separately. */
body.customer-auth { --border:#e1e5eb; --muted:#667085; --purple:#9b146d; --shadow:0 6px 24px #10182806; background:#fff; color:#202939; font:14px/1.55 system-ui, sans-serif; padding:32px; }
.customer-auth .auth-layout { display:grid; grid-template-columns:1fr 1fr; max-width:940px; width:100%; background:white; border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
.customer-auth .auth-brand-panel { padding:36px; background:#fff; display:flex; flex-direction:column; justify-content:space-between; gap:42px; border-right:1px solid var(--border); }
.customer-auth .auth-logo img { width:180px; height:auto; }
.customer-auth .auth-brand-panel h2 { font-size:24px; line-height:1.4; font-weight:600; color:#253047; }
.customer-auth .auth-overline { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:#667085; margin-bottom:12px; font-weight:600; }
.customer-auth .auth-brand-panel ul { list-style:none; margin:24px 0 0; padding:0; }
.customer-auth .auth-brand-panel li { padding:7px 0; font-size:13px; color:#475467; }
.customer-auth .auth-brand-panel li::before { content:'\2713'; color:#765471; margin-right:10px; }
.customer-auth .auth-panel-foot { font-size:12px; }
.customer-auth .auth-card { width:auto; border:0; border-radius:0; padding:40px; box-shadow:none; align-self:center; }
.customer-auth .auth-card h1 { font-size:26px; line-height:1.25; letter-spacing:-.03em; margin:0 0 12px; }
.customer-auth .auth-intro { font-size:14px; line-height:1.65; color:#667085; }
.customer-auth .auth-card form { gap:16px; margin-top:22px; }
.customer-auth label { display:grid; gap:6px; font-size:13px; color:#344054; font-weight:500; }
.customer-auth input { width:100%; min-width:0; border:1px solid #cbd2dc; border-radius:6px; padding:11px 12px; color:#202939; background:white; font:inherit; outline-offset:3px; }
.customer-auth input:focus { border-color:#946087; outline:2px solid #eadde7; }
.customer-auth .primary-btn { border:1px solid #8b1462; background:#9b146d; border-radius:6px; padding:11px 16px; font-size:14px; font-weight:600; box-shadow:none; color:white; }
.customer-auth .primary-btn:hover { background:#801259; }
.customer-auth .primary-btn:disabled { opacity:.6; cursor:wait; }
.customer-auth .auth-card nav { gap:12px 20px; font-size:12px; padding-top:22px; border-top:1px solid var(--border); }
.customer-auth a { color:#8b1462; text-decoration:none; }
.customer-auth a:hover { text-decoration:underline; }
.customer-auth :focus-visible { outline:2px solid #9b146d; outline-offset:4px; }
.customer-auth .auth-notice { font-size:13px; padding:12px; border-radius:6px; background:#f4f6f9; border:1px solid #dfe4ed; margin-top:18px; }
.customer-auth .auth-notice:empty { display:none; }
.customer-auth .auth-notice[data-state=error] { color:#9b2534; background:#fff4f4; border-color:#f0cbd0; }
.customer-auth .auth-notice[data-state=success] { color:#236048; background:#f0f8f4; border-color:#cbe4d7; }
.customer-auth .auth-notice[data-state=loading] { color:#667085; }
.customer-auth .password-hint { font-size:12px; margin:0; }
.customer-auth .auth-mobile-logo { display:none; }
@media(max-width:760px) { body.customer-auth { padding:24px; } .customer-auth .auth-layout { grid-template-columns:1fr; max-width:460px; } .customer-auth .auth-brand-panel { display:none; } .customer-auth .auth-card { padding:30px; } .customer-auth .auth-mobile-logo { display:block; margin-bottom:30px; } .customer-auth .auth-mobile-logo img { width:160px; height:auto; } }
@media(max-width:400px) { body.customer-auth { padding:16px; } .customer-auth .auth-card { padding:24px; } .customer-auth .auth-card h1 { font-size:24px; } }