/* Reuse the product typography, controls, spacing and surface tokens. */
.login-page { min-width: 0; }
.login-layout { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-5); }
.login-card { width: 100%; max-width: 28rem; padding: var(--space-6); }
.login-card h1 { font-size: var(--font-xl); margin: var(--space-2) 0; }
.login-card > .muted-text { margin-bottom: var(--space-6); }
.login-footer { color: var(--text-muted); font-size: var(--font-sm); text-align: center; }
.account-form, .account-field { display: grid; gap: var(--space-2); min-width: 0; }
.account-form { gap: var(--space-5); }
.account-field label { font-weight: 600; }
.account-field input { width: 100%; min-width: 0; min-height: 2.75rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.account-field input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.password-control { display: flex; min-width: 0; gap: var(--space-2); align-items: stretch; }
.password-control input { flex: 1; }
.password-toggle { flex: 0 0 auto; color: var(--text-muted); background: var(--surface); border-color: var(--border-color); }
.password-toggle[hidden] { display: none; }
.account-help { font-size: var(--font-sm); color: var(--text-muted); }
.account-help ul, .account-field-error ul { padding-left: var(--space-5); margin: 0; }
.account-field-error { color: #b42318; font-size: var(--font-sm); }
.account-field input[aria-invalid="true"] { border-color: #b42318; }
.account-notice { padding: var(--space-4); border: 1px solid; border-radius: var(--radius-sm); margin: 0 0 var(--space-4); }
.account-error { color: #b42318; border-color: #fecdca; background: #fef3f2; }
.account-success { color: #067647; border-color: #abefc6; background: #ecfdf3; }
.account-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
.account-toolbar { display: flex; justify-content: flex-end; margin: var(--space-3) 0 var(--space-4); }
.account-menu { position: relative; max-width: 100%; }
.account-menu-trigger { cursor: pointer; color: var(--text); background: transparent; border: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.account-menu-trigger:hover { background: var(--surface-subtle); }
.account-menu-trigger[hidden], .account-menu-content[hidden] { display: none; }
.account-menu-content { position: absolute; right: 0; z-index: 30; min-width: 11rem; padding: var(--space-2); background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: 0 4px 12px #18223014; }
.account-menu-content a, .account-menu-content button { display: block; width: 100%; padding: var(--space-3); text-align: left; color: var(--text); background: transparent; border: 0; font: inherit; text-decoration: none; cursor: pointer; }
.account-menu-content a:hover, .account-menu-content button:hover { background: var(--surface-subtle); }
.account-form button:disabled { cursor: wait; opacity: .7; }
@media (max-width: 55rem) { .account-settings-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 25rem) { .login-layout { padding: var(--space-4); } .login-card { padding: var(--space-5); } }