.account-page {
    min-height: 100dvh;
    display: flex;
    padding: clamp(24px, 6vh, 64px) 20px;
}
.account-container { width: 100%; max-width: 480px; min-width: 0; margin: auto; }
.account-heading { text-align: center; margin-bottom: 28px; }
.account-brand { color: light-dark(#28634e, #96c5a5); font-size: 22px; font-weight: 700; letter-spacing: -.6px; text-decoration: none; }
.account-heading .eyebrow { margin: 24px 0 8px; }
.account-heading h1 { margin: 0; font-size: clamp(26px, 5vw, 32px); }
.auth-card {
    padding: clamp(24px, 5vw, 36px);
    border: 1px solid light-dark(#dce4da, #35463a);
    border-radius: 20px;
    background: light-dark(#fff, #1d2921);
    color: inherit;
    box-shadow: 0 12px 40px light-dark(#243a320a, #00000020);
    overflow-wrap: anywhere;
}
.auth-card h2 { margin: 0 0 10px; font-size: 23px; font-weight: 600; letter-spacing: -.5px; }
.auth-card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.auth-card p { margin: 0 0 22px; color: light-dark(#617367, #afbeb1); font-size: 14px; line-height: 1.65; }
.auth-card hr { margin: 28px 0; border: 0; border-top: 1px solid light-dark(#dce4da, #35463a); opacity: 1; }
.auth-card label { display: grid; gap: 8px; margin: 0 0 16px; font-size: 14px; font-weight: 600; }
.auth-card input {
    box-sizing: border-box;
    width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px;
    border: 1px solid light-dark(#bdcbbf, #607666); border-radius: 10px;
    background: light-dark(#fbfcfa, #17221b); color: inherit; font: inherit; font-size: 16px; font-weight: 400;
}
.auth-card input::placeholder { color: light-dark(#728075, #a2b1a4); opacity: 1; }
.auth-card button {
    width: 100%; min-height: 48px; padding: 12px 16px;
    border: 1px solid transparent; border-radius: 10px;
    background: light-dark(#28634e, #96c5a5); color: light-dark(#fff, #14291c);
    font: inherit; font-size: 14px; font-weight: 600; line-height: 1.5; cursor: pointer;
}
.auth-card button:hover:not(:disabled) { background: light-dark(#1f503e, #b1d6bb); }
.auth-card button.secondary { background: transparent; border-color: light-dark(#bdcbbf, #607666); color: inherit; }
.auth-card button.secondary:hover:not(:disabled) { background: light-dark(#eff4e9, #2c3b2f); }
.auth-card button:disabled { opacity: .55; cursor: not-allowed; }
.auth-card button + button, .auth-card button + p, .auth-card > form[action] { margin-top: 12px; }
.account-page :is(button, input, a):focus-visible { outline: 3px solid light-dark(#28634e, #96c5a5); outline-offset: 3px; }
.auth-card a { color: light-dark(#28634e, #96c5a5); text-underline-offset: 3px; }
.auth-card #auth-message:empty { margin: 0; }
.auth-card #auth-message:not(:empty) { padding: 12px 14px; border-radius: 10px; background: light-dark(#eff4e9, #2c3b2f); color: inherit; }
.auth-card .list-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-block: 16px; border-top: 1px solid light-dark(#dce4da, #35463a); }
.auth-card .list-row span { flex: 1; min-width: 0; }
.auth-card .list-row small { display: block; margin-top: 4px; font-size: 12px; }
.auth-card .list-row button { width: auto; }
.auth-card section > :last-child { margin-bottom: 0; }