.account-layout { display:block; max-width:540px; padding-block:28px 44px; }
.account-content { padding: 0 24px; background: #fff; min-width: 0; }
.account-content h2 { font: 500 28px/1.3 var(--serif); color: #403448; margin: 0 0 24px; }
.account-intro { color: #77707d; font-size: 14px; line-height: 1.75; margin: 0 0 27px; }
.account-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.form-field { display: grid; gap: 7px; font-size: 13px; font-weight: 500; }
.form-field input { width: 100%; min-width: 0; height: 46px; padding: 10px 12px; border: 1px solid #dcd7df; border-radius: 3px; background: #fff; color: #36333e; font: 400 15px var(--serif); }
.form-field input:focus { outline: 2px solid #912c4040; outline-offset: 1px; border-color: #912c40; }
.field-hint { font-size: 11px; font-weight: 400; line-height: 1.65; color: #85818a; margin: 0; }
.password-wrap { display: flex; align-items: center; border: 1px solid #dcd7df; border-radius: 3px; }
.password-wrap:focus-within { outline: 2px solid #912c4040; outline-offset: 1px; border-color: #912c40; }
.password-wrap input { border: 0; }
.password-wrap input:focus { outline: none; }
.password-wrap button { display:grid; place-items:center; flex:0 0 46px; width:46px; height:46px; border:0; background:none; color:#76516e; padding:12px; cursor:pointer; border-radius:3px; }
.password-wrap button svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.password-wrap .eye-slash { display:none; }
.password-wrap [aria-pressed="true"] .eye-slash { display:block; }
.password-wrap button:focus-visible { outline:2px solid #76516e; outline-offset:-4px; }
.account-submit { width: 100%; min-width: 0; min-height: 58px; padding: 14px 32px; margin-top: 4px; justify-content: center; text-align: center; white-space: normal; letter-spacing: 0; text-transform: none; font: 500 16px var(--serif); }
.account-submit:disabled { opacity: .55; cursor: wait; }
.account-links { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 22px; font-size: 14px; justify-content:space-between; }
.account-content a, .account-text-button { color: #912c40; text-underline-offset: 3px; }
.account-status { font-size: 13px; line-height: 1.7; color: #403448; margin: 24px 0 0; }
.account-status:empty { display: none; }
.account-status.error { color:#a3233d; background:#fff0f2; border-inline-start:3px solid #b32944; border-radius:3px; padding:10px 12px; margin:0 0 18px; }
.account-status:focus { outline:none; }
.field-feedback { display:grid; min-height:18px; }
.field-feedback:not(.confirm-feedback):not(:has(.field-hint)):has(.field-error:empty) { display:none; }
.field-feedback > * { grid-area:1 / 1; }
.field-feedback:has(.field-error:not(:empty)) .field-hint { visibility:hidden; }
.field-error { margin:0; color:#a3233d; font-size:12px; line-height:1.5; }
.form-field input[aria-invalid="true"], .password-wrap:has([aria-invalid="true"]) { border-color:#b32944; background:#fff8f9; }
.form-field input[aria-invalid="true"]:focus { outline-color:#b3294440; }
.account-status.success { border-inline-start: 3px solid #6e8e66; padding-inline-start: 14px; }
.account-captcha-field[hidden] { display:none; }
.account-captcha-field:not([hidden]) + .account-submit { margin-top:-8px; }
.account-captcha-error { min-height:26px; margin:4px 0 0; padding:4px 10px; border-inline-start:3px solid transparent; border-radius:3px; font:400 13px/18px var(--serif); color:#a3233d; overflow-wrap:anywhere; }
.account-captcha-error:not(:empty) { background:#fff0f2; border-inline-start-color:#b32944; }
.account-captcha { min-height: 78px; overflow: hidden; }
.account-details { margin: 0 0 28px; display: grid; gap: 16px; }
.account-details dt { font-size: 11px; color: #85818a; margin-bottom: 5px; }
.account-details dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.email-badge { display: inline-block; font-size: 11px; color: #527448; background: #f1f5ed; border-radius: 3px; padding: 4px 8px; margin-top: 7px; }
.login-history { list-style: none; padding: 0; margin: 18px 0 26px; }
.login-history li { padding: 12px 0; border-top: 1px solid #e9e6eb; display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; font-size: 12px; }
.login-history small { grid-column: 1 / -1; color: #85818a; overflow-wrap: anywhere; font-size: 10px; }
.account-content h3 { font: 500 18px var(--serif); color: #403448; }
.account-text-button { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }

@media(prefers-reduced-motion: reduce) { .account-page * { scroll-behavior: auto; } }
.account-remember { display: flex; align-items: center; gap: .65rem; cursor: pointer; }
.account-remember input { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; accent-color: #702b4d; }

.password-guidance { display:grid; gap:4px; margin-bottom:-8px; }
.password-rules { list-style:none; margin:0; padding:0; display:grid; gap:7px; font-size:13px; color:#5c6773; }
.password-rules li { display:flex; align-items:baseline; gap:9px; line-height:1.45; }
.password-rule-mark { width:16px; flex:0 0 16px; font-weight:700; }
.password-rules .is-met { color:#237042; }
.password-format { min-height:1.5em; color:#a13b37; margin:0; font-size:13px; }
.registration-success { max-width:620px; padding-block:12px; }
.registration-success p { line-height:1.65; overflow-wrap:anywhere; }
.registration-success-mark { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:#e6f2e9; color:#237042; font-size:28px; margin-bottom:16px; }

.password-rules .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

.account-submit::after { content:''; position:absolute; inset-inline-end:22px; top:calc(50% - 8px); width:16px; height:16px; border:2px solid #ffffff66; border-top-color:#fff; border-radius:50%; opacity:0; }
.account-submit[aria-busy="true"] { opacity:.8; }
.account-submit[aria-busy="true"]::after { opacity:1; animation:account-request 800ms linear infinite; }
@keyframes account-request { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .account-submit[aria-busy="true"]::after { animation:none; } }