:root {
    --account-ink: #172033;
    --account-muted: #667085;
    --account-border: #d9e3ed;
}

.account-page {
    min-height: 100vh;
    margin: 0;
    color: var(--account-ink);
    font-family: var(--font-body, "DM Sans", sans-serif);
    background: #f4f8fb;
}

.account-shell {
    position: relative;
    display: grid;
    min-height: 100vh;
    place-items: center;
    overflow: hidden;
    padding: 2rem 1rem;
    background:
        linear-gradient(145deg, rgba(22, 134, 197, .08), transparent 42%),
        radial-gradient(circle at 85% 12%, rgba(22, 134, 197, .13), transparent 30%),
        #f7fafc;
}

.account-orb {
    position: absolute;
    width: 28rem;
    height: 28rem;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(3px);
}

.account-orb-left { left: -15rem; bottom: -17rem; background: rgba(22, 134, 197, .10); }
.account-orb-right { top: -18rem; right: -12rem; background: rgba(91, 195, 225, .13); }

.account-card {
    position: relative;
    z-index: 1;
    width: min(100%, 30rem);
    overflow: hidden;
    border: 1px solid rgba(217, 227, 237, .9);
    border-radius: 1.125rem;
    background: #fff;
    box-shadow: 0 1.5rem 4rem rgba(20, 50, 73, .13), 0 .25rem .75rem rgba(20, 50, 73, .06);
}

.account-card-header {
    padding: 2rem 2.25rem 1.5rem;
    border-bottom: 1px solid var(--account-border);
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}

.account-brand { display: inline-flex; align-items: center; }
.account-brand img { display: block; width: min(100%, 15.5rem); height: auto; }

.account-product {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: 1.25rem;
    padding: .35rem .65rem;
    border: 1px solid #cce7f5;
    border-radius: 999px;
    color: #125986;
    background: #eef8fd;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .045em;
    line-height: 1;
    text-transform: uppercase;
}

.account-product img { width: 1rem; height: 1rem; }
.account-card-body { padding: 2rem 2.25rem 2.25rem; }
.account-card-body h1 { color: var(--account-ink); letter-spacing: -.02em; }
.account-card-body p { color: var(--account-muted); }
.account-card-body .form-label { color: #344054; font-weight: 650; }
.account-card-body .form-input {
    width: 100%;
    min-height: 2.85rem;
    border-color: var(--account-border);
    border-radius: .55rem;
    color: var(--account-ink);
}
.account-card-body .form-input:focus { border-color: var(--color-primary); }
.account-card-body .btn { min-height: 2.85rem; border-radius: .55rem; font-weight: 700; box-shadow: 0 .35rem .8rem rgba(22, 134, 197, .18); }
.account-card-body .form-checkbox { border-radius: .25rem; }
.account-card-footer { padding: 1rem 2.25rem; border-top: 1px solid var(--account-border); color: var(--account-muted); background: #fbfcfe; font-size: .75rem; text-align: center; }

@media (max-width: 480px) {
    .account-shell { padding: 1rem; }
    .account-card { border-radius: .875rem; }
    .account-card-header, .account-card-body { padding-right: 1.5rem; padding-left: 1.5rem; }
    .account-card-footer { padding-right: 1.5rem; padding-left: 1.5rem; }
}