/* Account UI retains the existing MAO authentication endpoints. */
.account-form { padding: 36px; background: var(--paper-light); color: var(--ink); border: 1px solid #bda878; box-shadow: 0 0 0 5px #eadaba12, inset 0 0 0 5px #e5dac030, 0 17px 40px #051a1540; }
.account-form .eyebrow { color: #73613d; font-size: 8px; letter-spacing: 1.7px; margin: 0 0 10px; }
.account-form h3, .account-form h2 { font-family: var(--serif); font-size: 38px; font-weight: 600; line-height: 1; margin: 0; }
.form-description { color: var(--muted); font-size: 11px; margin: 13px 0 24px; }
.account-form label { display: grid; gap: 7px; margin-bottom: 16px; font-size: 11px; font-weight: 800; line-height: 1.5; color: #4b4c38; }
.account-form input:not([type='checkbox']) { width: 100%; min-width: 0; height: 44px; border: 1px solid #c5ba9c; border-radius: 2px; background: #e9e3d3; color: #2b3225; padding: 11px 12px; font-size: 12px; font-weight: 500; box-shadow: inset 0 2px 3px #5b583a08; }
.account-form input::placeholder { color: #77745e; opacity: 1; }
.account-form input:focus-visible { border-color: #667d4d; outline: 2px solid #9ba477; outline-offset: 1px; }
.account-form label small { font-size: 9px; color: #747059; font-weight: 500; }
.account-form label.check { display: flex; align-items: flex-start; gap: 10px; font-size: 9px; line-height: 1.65; font-weight: 500; color: #6b6753; margin: 20px 0; }
.check input { width: 15px; height: 15px; margin: 1px 0 0; flex-shrink: 0; accent-color: #416442; }
.account-form .trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.account-form > .button, #login-fields > .button { width: 100%; margin-top: 2px; }
.message { color: #66634f; font-size: 11px; line-height: 1.65; margin: 18px 0 0; overflow-wrap: anywhere; }
.message:empty { display: none; }
.message.success { color: #345b2b; }
.message.error { color: #98372c; }
.verification-link { display: inline-block; color: #315732; font-weight: 800; text-decoration: underline; }
dialog { width: min(460px, calc(100% - 32px)); max-height: calc(100svh - 44px); padding: 0; border: 1px solid #bda878; border-radius: 3px; background: var(--paper-light); box-shadow: 0 25px 90px #04160e99; }
dialog::backdrop { background: #081c12c9; backdrop-filter: blur(6px); }
dialog .account-form { border: 0; box-shadow: inset 0 0 0 5px #e5dac050; padding: 43px 36px 31px; }
.dialog-close { position: absolute; top: 9px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; background: none; color: #6b654d; font: 26px/1 var(--body); }
.dialog-close:hover { color: #252f1b; background: #ded5bd; }
.profile { display: grid; justify-items: start; gap: 12px; padding-top: 8px; }
.profile-label { color: #6f7150; font-size: 9px; font-weight: 800; letter-spacing: 2px; }
.profile strong { font-family: var(--serif); font-size: 37px; line-height: 1.1; color: #3d5c31; overflow-wrap: anywhere; max-width: 100%; }
.profile-uuid-label { font-size: 9px; color: #6b6a54; margin-top: 2px; }
.profile code { font-size: 10px; color: #64634e; overflow-wrap: anywhere; max-width: 100%; }
.profile > .button { width: 100%; margin: 15px 0 7px; }
.profile > .text-link { font-size: 11px; }
.login-register-hint { text-align: center; font-size: 11px; color: #706b55; margin: 23px 0 0; }
.login-register-hint a { color: #3e6235; font-weight: 800; }
body.dialog-open { overflow: hidden; }
@media(max-width: 600px) {
  .account-form { padding: 29px 23px; }
  .account-form h3, .account-form h2 { font-size: 35px; }
  .account-form input:not([type='checkbox']) { font-size: 16px; }
  dialog .account-form { padding: 41px 25px 28px; }
  .account-form label small { font-size: 10px; }
  .account-form label.check { font-size: 10px; }
}