.account { max-width: 680px; margin: 48px auto; padding: 0 24px 48px; }
.account-large { font-size: 36px; }
.account-large .brand { font-size: clamp(1rem, 8vw, 1.6rem); }
.brand-icon { font-size: 28px; flex-shrink: 0; }
header button { max-width: 100%; }
#account-font-size { background: #e8ecdf; color: #234f40; }
.account h1 { font-size: clamp(2rem, 6vw, 3rem); overflow-wrap: anywhere; }
.account form { display: grid; gap: 24px; margin-top: 24px; }
.account form[hidden], .account-actions[hidden] { display: none; }
.account label { display: block; font-weight: 650; margin-bottom: 10px; }
.account input { display: block; width: 100%; min-width: 0; min-height: 58px; padding: 12px; border: 1px solid #6c7b6e; border-radius: 10px; background: white; }
.account button { min-height: 58px; white-space: normal; }
.account-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.account-actions button, #show-password, #logout { background: #e8ecdf; color: #234f40; }
.account-note { margin-top: 36px; color: #53665c; border-top: 1px solid #d8dfd6; padding-top: 24px; }
#account-message:not(:empty) { padding: 18px; border-radius: 10px; background: #eef0e5; border-left: 4px solid #234f40; }
#signed-in a { display: inline-block; padding: 16px 0; margin-right: 24px; }
@media (max-width: 520px) { header { flex-wrap: wrap; padding: 20px; } .account { margin-top: 24px; } .account-actions { flex-direction: column; } }