.account-container { max-width: 1100px; padding-top: 3rem; padding-bottom: 3rem; }
.account-surface { border: 1px solid var(--mud-palette-divider); background: var(--mud-palette-surface); }
.account-surface h1, .account-surface h2, .account-surface h3 { color: var(--mud-palette-text-primary); }
.account-surface h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 600; margin-bottom: 1.5rem; }
.account-surface h2 { font-size: 1.25rem; font-weight: 500; }
.account-surface h3 { font-size: 1.1rem; font-weight: 500; }
.account-surface hr { border: 0; border-top: 1px solid var(--mud-palette-divider); margin: 1.25rem 0; opacity: 1; }
.account-surface .form-control { width: 100%; min-height: 3.5rem; border: 1px solid var(--mud-palette-lines-inputs); border-radius: var(--mud-default-borderradius); background-color: var(--mud-palette-surface); color: var(--mud-palette-text-primary); padding: 1.25rem .9rem .35rem; transition: border-color .15s ease, box-shadow .15s ease; }
.account-surface .form-control:focus { border-color: var(--mud-palette-primary); outline: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 20%, transparent); }
.account-surface .form-floating > label { color: var(--mud-palette-text-secondary); padding: .85rem .9rem; }
.account-surface .form-floating > .form-control:focus ~ label, .account-surface .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--mud-palette-primary); opacity: 1; transform: scale(.78) translateY(-.15rem) translateX(.1rem); }
.account-surface .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; border: 0; border-radius: var(--mud-default-borderradius); padding: .65rem 1.25rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: filter .15s ease; }
.account-surface .btn:hover { filter: brightness(1.08); }
.account-surface .btn-primary { background-color: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.account-surface .btn-link { background: transparent; color: var(--mud-palette-primary); }
.account-surface .text-danger, .account-surface .validation-message { color: var(--mud-palette-error) !important; }
.account-surface .alert { border-radius: var(--mud-default-borderradius); border: 1px solid var(--mud-palette-divider); background: var(--mud-palette-background-grey); color: var(--mud-palette-text-primary); padding: .85rem 1rem; }
.account-navigation { background: var(--mud-palette-background-grey); }
@media (max-width: 600px) { .account-container { padding: 1rem; } .account-surface { padding: 1.25rem !important; } }

/* Standalone login screen */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, #f4f2ff 0%, #fafafa 55%, #eef7f2 100%);
}
.login-card {
    width: min(100%, 30rem);
    padding: clamp(1.5rem, 5vw, 2.75rem);
    border: 1px solid rgba(126, 111, 255, .18);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 1.5rem 4rem rgba(38, 31, 91, .14);
}
.login-card h1 { margin: 0 0 .5rem; color: #28234f; font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
.login-card h2, .login-card h3 { color: #575276; font-size: 1rem; font-weight: 500; }
.login-card hr { border: 0; border-top: 1px solid #e8e5f2; margin: 1.35rem 0; }
.login-card .form-control { width: 100%; min-height: 3.5rem; border: 1px solid #d8d4e6; border-radius: .6rem; background: #fff; color: #28234f; padding: 1.25rem .9rem .35rem; }
.login-card .form-control:focus { border-color: #7e6fff; outline: 0; box-shadow: 0 0 0 3px rgba(126,111,255,.16); }
.login-card .form-floating > label { color: #77718d; padding: .85rem .9rem; }
.login-card .btn { border-radius: .6rem; min-height: 2.8rem; font-weight: 600; }
.login-card .btn-primary { border: 0; background: #6658e8; color: #fff; }
.login-card .btn-primary:hover { background: #5547d3; }
.login-card .btn-link { color: #5b4bd8; }
.login-card .text-secondary { color: #77718d !important; }
.login-card .alert { border-radius: .6rem; }
@media (max-width: 600px) { .login-page { align-items: flex-start; padding-top: 10vh; } .login-card { padding: 1.5rem; } }