.account-page .shell { min-height: 100svh; display: flex; flex-direction: column; }
.account-page .header { flex: 0 0 auto; }
.account-back { margin-left: auto; font-size: 12px; color: var(--mute); }
.account-main { flex: 1; display: grid; place-items: center; padding: 36px 0 72px; }
.account-card { width: min(100%, 390px); text-align: center; animation: room-arrive .4s both; }
.account-symbol { display: flex; justify-content: center; margin: 0 0 30px; }
.account-symbol span { display: block; width: 32px; height: 32px; border: 1px solid #aaa; border-radius: 50%; }
.account-symbol span + span { margin-left: -12px; border-color: #555; }
.account-eyebrow { font: 10px var(--mono); color: var(--soft); letter-spacing: .16em; margin: 0 0 22px; }
.account-card h1 { font: 400 clamp(32px, 6vw, 44px)/1.25 var(--display); letter-spacing: -.045em; margin: 0 0 18px; }
.account-description { font-size: 13px; color: var(--mute); line-height: 1.8; min-height: 24px; margin: 0 0 32px; overflow-wrap: anywhere; }
.account-card form { text-align: left; }
.account-card label { display: block; font-size: 12px; margin-bottom: 10px; color: #aaa; }
.account-card input { width: 100%; height: 54px; padding: 0 16px; border: 1px solid #393939; border-radius: 10px; background: #222; color: var(--ink); font: 16px var(--sans); outline: 0; box-shadow: none; }
.account-card input:focus-visible { border-color: #b5b5b5; box-shadow: 0 0 0 3px #ffffff0a; }
.account-card input::placeholder { color: #737373; }
.account-card #code { font-family: var(--mono); font-size: 24px; letter-spacing: .36em; text-align: center; }
.account-primary { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; margin-top: 14px; padding: 0 18px; border: 0; border-radius: 10px; background: #e0e0e0; color: #202020; font-size: 14px; transition: background .18s, transform .18s; }
.account-primary:hover { background: #f1f1f1; }.account-primary:active { transform: scale(.985); }
.account-card button:disabled { cursor: default; opacity: .45; }.account-card button:disabled:active { transform: none; }
.account-card :is(button,a):focus-visible { outline: 2px solid #ccc; outline-offset: 4px; }
.account-note { text-align: center; font-size: 11px; color: #858585; margin-top: 20px; }
.account-links { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.account-links :is(a,button) { display: flex; align-items: center; min-height: 44px; padding: 0; color: #aaa; font-size: 12px; border: 0; background: none; }
.account-identity { font-size: 13px; color: #aaa; margin: 0 0 24px; text-align: center; overflow-wrap: anywhere; }
.account-feedback { font-size: 12px; line-height: 1.8; color: #bcbcbc; min-height: 22px; margin: 18px 0 0; }
.account-page footer { flex: 0 0 auto; }
.account-header-actions { display: flex; align-items: center; gap: 8px; }
.account-entry { display: inline-flex; align-items: center; max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media(max-width:600px) { .account-page .shell { padding: 0 24px; }.account-page .header { height: 82px; gap: 14px; }.account-page .brand { font-size: 22px; }.account-main { padding: 28px 0 56px; align-items: start; }.account-card { margin-top: min(7vh,56px); }.account-back { font-size: 11px; } }
@media(prefers-reduced-motion:reduce) { .account-card { animation: none; }.account-primary { transition: none; } }
.login-methods{display:flex;gap:8px;margin-bottom:28px;padding:4px;border:1px solid #ffffff1c;border-radius:12px;background:#ffffff02}.login-methods button{flex:1;min-height:42px;border:0;border-radius:8px;background:none;font-size:12px;color:#999}.login-methods button[aria-pressed=true]{background:#ffffff0b;color:#eee;box-shadow:0 1px 5px #0003}.account-card form label:not(:first-child){margin-top:22px}.password-field{position:relative}.password-field input{padding-right:56px}.password-field .show-password{position:absolute;right:4px;top:4px;height:46px;min-width:46px;background:none;border:0;color:#8c8c8c;font-size:16px}.show-password[aria-pressed=true]{color:#ddd}.account-settings{text-align:left}.account-settings>.account-primary{margin-top:0}.credentials-summary{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:26px 0 18px;margin-top:12px;border-bottom:1px solid #ffffff16}.credentials-summary small{display:block;font-size:10px;color:#888}.credentials-summary strong{display:block;font:18px var(--mono);font-weight:400;margin-top:10px;overflow-wrap:anywhere}.credentials-summary p{font-size:11px;color:#999;line-height:1.8;margin:10px 0 0}.credentials-summary button{background:#ffffff05;border:1px solid #ffffff24;border-radius:30px;color:#bbb;font-size:11px;min-height:40px;min-width:58px;padding:0 14px}.account-card .field-note{font-size:10px;color:#929292;line-height:1.7;margin:8px 0 20px}.account-card #credentials-form{margin:24px 0 20px}.account-card #credentials-form>label{margin-top:20px}.account-settings .account-links{margin-top:20px}.account-settings .account-identity{margin-bottom:22px}.account-page button{touch-action:manipulation}
@media(max-width:600px){.account-card:has(#profile-form:not([hidden])){margin-top:12px}.account-card:has(#profile-form:not([hidden])) .account-symbol{margin-bottom:22px}.account-card:has(#profile-form:not([hidden])) .account-description{margin-bottom:20px}.account-card:has(#password-form:not([hidden])){margin-top:12px}}
@media(max-width:600px){.account-card:has(#password-form:not([hidden])) .account-symbol,.account-card:has(#password-form:not([hidden])) .account-eyebrow{display:none}.account-card:has(#password-form:not([hidden])){margin-top:0}.account-card:has(#password-form:not([hidden])) .account-description{margin-bottom:22px}.account-card:has(#password-form:not([hidden])) .login-methods{margin-bottom:22px}.account-card:has(#password-form:not([hidden])) .account-note{margin-top:12px}.account-card:has(#password-form:not([hidden])) h1{font-size:34px;margin-bottom:12px}}

.account-card:has(#signup-form:not([hidden])) .account-symbol,.account-card:has(#signup-form:not([hidden])) .account-eyebrow{display:none}
.account-card:has(#signup-form:not([hidden])){margin-top:0}
.account-card #signup-form .account-note{line-height:1.7;margin:16px 0 0}
.account-card #signup-form .account-links{justify-content:center;margin-top:2px}
@media(max-width:600px){.account-card:has(#signup-form:not([hidden])) h1{font-size:34px;margin-bottom:12px}.account-card:has(#signup-form:not([hidden])) .account-description{margin-bottom:20px}}