.account-settings {
    --account-settings-brand-blue: #007cba;
    --account-settings-brand-blue-deep: #015682;
    --account-settings-brand-blue-soft: #e5f4fb;
    --account-settings-brand-red: #d1242b;
    --account-settings-background: #f5f7f9;
    --account-settings-surface: #fff;
    --account-settings-surface-subtle: #f6f9fa;
    --account-settings-text: #26343d;
    --account-settings-text-muted: #667681;
    --account-settings-border: #dce3e7;
    --account-settings-focus: #007cba;
    --account-settings-radius: .75rem;
    --account-settings-shadow: 0 .35rem 1.2rem rgba(14, 40, 65, .055);
    box-sizing: border-box;
    color: var(--account-settings-text);
    container-name: account-settings;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 0 auto;
    max-width: 72rem;
    min-width: 0;
    padding: 1.25rem 0 2.5rem;
    width: 100%;
}

.account-settings *,
.account-settings *::before,
.account-settings *::after { box-sizing: inherit; }

.account-settings--bootstrap {
    --account-settings-background: var(--bs-body-bg, #f5f7f9);
    --account-settings-surface: var(--bs-body-bg, #fff);
    --account-settings-surface-subtle: var(--bs-tertiary-bg, #f6f9fa);
    --account-settings-text: var(--bs-body-color, #26343d);
    --account-settings-text-muted: var(--bs-secondary-color, #667681);
    --account-settings-border: var(--bs-border-color, #dce3e7);
    --account-settings-focus: var(--bs-primary, #007cba);
    --account-settings-radius: var(--bs-border-radius-lg, .75rem);
}

.account-settings--fluent {
    --account-settings-brand-blue: var(--dxds-color-content-primary-default-rest, #007cba);
    --account-settings-brand-blue-deep: var(--dxds-color-content-primary-default-active, #015682);
    --account-settings-brand-blue-soft: var(--dxds-color-surface-primary-deep-rest, #e5f4fb);
    --account-settings-brand-red: var(--dxds-color-content-danger-default-rest, #d1242b);
    --account-settings-background: var(--dxds-color-surface-neutral-deep-rest, #f5f7f9);
    --account-settings-surface: var(--dxds-color-surface-neutral-default-rest, #fff);
    --account-settings-surface-subtle: var(--dxds-color-surface-neutral-subdued-rest, #f6f9fa);
    --account-settings-text: var(--dxds-color-content-neutral-default-rest, #26343d);
    --account-settings-text-muted: var(--dxds-color-content-neutral-subdued-rest, #667681);
    --account-settings-border: var(--dxds-color-border-neutral-default-rest, #dce3e7);
    --account-settings-focus: var(--dxds-color-border-focus-default, #007cba);
}

.account-settings a:focus-visible,
.account-settings button:focus-visible,
.account-settings [tabindex="-1"]:focus-visible {
    border-radius: .25rem;
    outline: .2rem solid color-mix(in srgb, var(--account-settings-focus) 30%, transparent);
    outline-offset: .15rem;
}

.account-settings-icon {
    display: block;
    flex: 0 0 auto;
    height: 1.1rem;
    width: 1.1rem;
}

.account-settings-hero {
    align-items: flex-start;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
}

.account-settings-hero > div { max-width: 52rem; }

.account-settings-eyebrow {
    color: var(--account-settings-brand-blue);
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.account-settings-hero h1 {
    color: var(--account-settings-text);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1.1;
    margin: .35rem 0 .55rem;
}

.account-settings-hero p {
    color: var(--account-settings-text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 1.1rem;
}

.account-settings-keyline {
    border: 0;
    border-top: 3px solid var(--account-settings-brand-red);
    margin: 0;
    opacity: 1;
    width: 5rem;
}

.account-settings-secure-pill,
.account-settings-status {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 700;
    gap: .35rem;
    width: fit-content;
}

.account-settings-secure-pill {
    background: var(--account-settings-brand-blue-soft);
    color: var(--account-settings-brand-blue-deep);
    flex: 0 0 auto;
    margin-top: .25rem;
    padding: .42rem .75rem;
}

.account-settings-secure-pill .account-settings-icon,
.account-settings-status .account-settings-icon { height: .9rem; width: .9rem; }

.account-settings-shell {
    align-items: start;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(13.5rem, 17rem) minmax(0, 1fr);
}

.account-settings-sidebar,
.account-settings-content {
    background: var(--account-settings-surface);
    border: 1px solid var(--account-settings-border);
    border-radius: var(--account-settings-radius);
    box-shadow: var(--account-settings-shadow);
    min-width: 0;
}

.account-settings-sidebar {
    overflow: hidden;
    position: sticky;
    top: 1rem;
}

.account-settings-nav-heading {
    background: var(--account-settings-surface-subtle);
    border-bottom: 1px solid var(--account-settings-border);
    display: flex;
    flex-direction: column;
    padding: .9rem 1rem;
}

.account-settings-nav-heading strong { font-size: .88rem; }
.account-settings-nav-heading span { color: var(--account-settings-text-muted); font-size: .72rem; margin-top: .1rem; }
.account-settings-content { min-height: 24rem; padding: 1.35rem; }

.account-settings-nav {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: .55rem;
}

.account-settings-nav-link {
    align-items: center;
    border-radius: .55rem;
    color: var(--account-settings-text-muted);
    display: flex;
    gap: .7rem;
    min-width: 0;
    padding: .68rem .72rem;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.account-settings-nav-link:hover {
    background: var(--account-settings-surface-subtle);
    color: var(--account-settings-brand-blue-deep);
}

.account-settings-nav-link.is-active {
    background: var(--account-settings-brand-blue-soft);
    box-shadow: inset 3px 0 0 var(--account-settings-brand-blue);
    color: var(--account-settings-brand-blue-deep);
}

.account-settings-nav-link > span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.account-settings-nav-link strong { color: inherit; font-size: .84rem; line-height: 1.2; }
.account-settings-nav-link small { color: var(--account-settings-text-muted); font-size: .68rem; line-height: 1.25; margin-top: .14rem; }

.account-settings-page-heading { margin-bottom: 1.1rem; }
.account-settings-page-heading h2 { font-size: 1.55rem; letter-spacing: -.02em; margin: 0 0 .45rem; }
.account-settings-page-heading p { color: var(--account-settings-text-muted); line-height: 1.55; margin: 0; max-width: 42rem; }

.account-settings-back-link {
    align-items: center;
    color: var(--account-settings-brand-blue-deep);
    display: inline-flex;
    font-size: .78rem;
    font-weight: 700;
    gap: .35rem;
    margin-bottom: .75rem;
    text-decoration: none;
}

.account-settings-back-link:hover { color: var(--account-settings-brand-blue); text-decoration: underline; }
.account-settings-back-link .account-settings-icon { height: .9rem; width: .9rem; }

.account-settings-identity {
    align-items: center;
    background: var(--account-settings-surface-subtle);
    border: 1px solid var(--account-settings-border);
    border-radius: .65rem;
    display: flex;
    gap: .8rem;
    margin-bottom: 1rem;
    padding: .9rem 1rem;
}

.account-settings-identity-icon,
.account-settings-card-icon {
    align-items: center;
    background: var(--account-settings-brand-blue-soft);
    border-radius: .55rem;
    color: var(--account-settings-brand-blue-deep);
    display: inline-flex;
    flex: 0 0 auto;
    height: 2.4rem;
    justify-content: center;
    width: 2.4rem;
}

.account-settings-identity > div:not(.account-settings-card-message) { display: flex; flex-direction: column; min-width: 0; }
.account-settings-identity span { color: var(--account-settings-text-muted); font-size: .72rem; }
.account-settings-identity strong { overflow-wrap: anywhere; }
.account-settings-identity small { color: var(--account-settings-text-muted); overflow-wrap: anywhere; }

.account-settings-dashboard-grid {
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-settings-card {
    background: var(--account-settings-surface);
    border: 1px solid var(--account-settings-border);
    border-radius: .7rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1rem;
}

.account-settings-card--danger { border-color: color-mix(in srgb, var(--account-settings-brand-red) 35%, var(--account-settings-border)); }
.account-settings-card--danger .account-settings-card-icon { background: color-mix(in srgb, var(--account-settings-brand-red) 12%, var(--account-settings-surface)); color: var(--account-settings-brand-red); }

.account-settings-card-heading { align-items: flex-start; display: flex; gap: .75rem; }
.account-settings-card-heading > div { min-width: 0; }
.account-settings-card h3 { font-size: 1rem; margin: .05rem 0 .2rem; }
.account-settings-card-heading p { color: var(--account-settings-text-muted); font-size: .82rem; line-height: 1.45; margin: 0; }

.account-settings-card-body {
    align-items: flex-start;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .45rem;
    margin: .9rem 0;
    min-height: 2rem;
}

.account-settings-card-value { font-size: .9rem; font-weight: 700; }
.account-settings-card-detail { color: var(--account-settings-text-muted); font-size: .76rem; }
.account-settings-break-word { overflow-wrap: anywhere; }

.account-settings-card-action {
    align-items: center;
    align-self: flex-start;
    color: var(--account-settings-brand-blue-deep);
    display: inline-flex;
    font-size: .8rem;
    font-weight: 700;
    gap: .35rem;
    text-decoration: none;
}

.account-settings-card-action:hover { color: var(--account-settings-brand-blue); text-decoration: underline; }
.account-settings-card-action-button { align-self: flex-start; }

.account-settings-status { padding: .3rem .58rem; }
.account-settings-status--neutral { background: var(--account-settings-surface-subtle); color: var(--account-settings-text-muted); }
.account-settings-status--positive { background: color-mix(in srgb, #279461 15%, var(--account-settings-surface)); color: var(--account-settings-text); }
.account-settings-status--warning { background: color-mix(in srgb, #d6a600 18%, var(--account-settings-surface)); color: var(--account-settings-text); }
.account-settings-status--negative { background: color-mix(in srgb, var(--account-settings-brand-red) 14%, var(--account-settings-surface)); color: var(--account-settings-text); }

.account-settings-card-message {
    align-items: center;
    color: var(--account-settings-text-muted);
    display: flex;
    font-size: .78rem;
    gap: .4rem;
    line-height: 1.4;
}

.account-settings-card-message--error { color: #861b21; }

.account-settings-alert {
    align-items: flex-start;
    border: 1px solid;
    border-radius: .6rem;
    display: flex;
    gap: .65rem;
    line-height: 1.5;
    margin: .9rem 0 1.1rem;
    max-width: 46rem;
    padding: .85rem 1rem;
}

.account-settings-alert > .account-settings-icon { margin-top: .18rem; }
.account-settings-alert p { margin: .2rem 0 0; }
.account-settings-alert--information { background: var(--account-settings-brand-blue-soft); border-color: color-mix(in srgb, var(--account-settings-brand-blue) 28%, var(--account-settings-border)); color: var(--account-settings-brand-blue-deep); }
.account-settings-alert--success { background: color-mix(in srgb, #279461 12%, var(--account-settings-surface)); border-color: color-mix(in srgb, #279461 28%, var(--account-settings-border)); color: var(--account-settings-text); }
.account-settings-alert--warning { background: color-mix(in srgb, #d6a600 14%, var(--account-settings-surface)); border-color: color-mix(in srgb, #d6a600 30%, var(--account-settings-border)); color: var(--account-settings-text); }
.account-settings-alert--error { background: color-mix(in srgb, var(--account-settings-brand-red) 11%, var(--account-settings-surface)); border-color: color-mix(in srgb, var(--account-settings-brand-red) 28%, var(--account-settings-border)); color: var(--account-settings-text); }

.account-settings-state {
    align-items: center;
    background: var(--account-settings-surface-subtle);
    border: 1px solid var(--account-settings-border);
    border-radius: .65rem;
    display: flex;
    gap: .8rem;
    padding: 1rem;
}

.account-settings-state > div { display: flex; flex: 1 1 auto; flex-direction: column; gap: .1rem; }
.account-settings-state span { color: var(--account-settings-text-muted); font-size: .82rem; }
.account-settings-state > .account-settings-icon { color: var(--account-settings-brand-blue-deep); height: 1.4rem; width: 1.4rem; }

.account-settings-spinner {
    animation: account-settings-spin .8s linear infinite;
    border: .18rem solid var(--account-settings-border);
    border-radius: 50%;
    border-top-color: var(--account-settings-brand-blue);
    display: block;
    flex: 0 0 auto;
    height: 1.6rem;
    width: 1.6rem;
}

.account-settings-button {
    border: 1px solid transparent;
    border-radius: .5rem;
    display: inline-flex;
    font-size: .85rem;
    font-weight: 700;
    justify-content: center;
    padding: .6rem .85rem;
    text-decoration: none;
}

.account-settings-button--primary { background: var(--account-settings-brand-blue); color: #fff; }
.account-settings-button--secondary { background: var(--account-settings-surface); border-color: var(--account-settings-border); color: var(--account-settings-brand-blue-deep); }
.account-settings-button--danger { background: var(--account-settings-brand-red); color: #fff; }

.account-settings-button:disabled { cursor: wait; opacity: .65; }
.account-settings-button:not(:disabled):hover { filter: brightness(.94); }

.account-settings-security-summary {
    align-items: center;
    background: var(--account-settings-surface-subtle);
    border: 1px solid var(--account-settings-border);
    border-radius: .7rem;
    display: flex;
    gap: .8rem;
    margin-bottom: 1rem;
    padding: 1rem;
}

.account-settings-security-summary.is-enabled { background: color-mix(in srgb, #279461 10%, var(--account-settings-surface)); }
.account-settings-security-summary > div { display: flex; flex-direction: column; gap: .18rem; }
.account-settings-security-summary span { color: var(--account-settings-text-muted); font-size: .82rem; }

.account-settings-action-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-settings-action-card {
    align-items: flex-start;
    background: var(--account-settings-surface);
    border: 1px solid var(--account-settings-border);
    border-radius: .7rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem;
}

.account-settings-action-card--danger { border-color: color-mix(in srgb, var(--account-settings-brand-red) 35%, var(--account-settings-border)); }
.account-settings-action-card h3 { font-size: .95rem; margin: 0 0 .25rem; }
.account-settings-action-card p { color: var(--account-settings-text-muted); font-size: .82rem; line-height: 1.45; margin: 0; }

.account-settings-inline-action {
    align-items: center;
    border-top: 1px solid var(--account-settings-border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 1rem;
}

.account-settings-inline-action > div { display: flex; flex-direction: column; gap: .15rem; }
.account-settings-inline-action span { color: var(--account-settings-text-muted); font-size: .8rem; }

.account-settings-setup-steps { display: flex; flex-direction: column; gap: 1rem; line-height: 1.55; padding-left: 1.4rem; }
.account-settings-authenticator-details { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .8rem; }
.account-settings-authenticator-details > div:last-child { display: flex; flex-direction: column; gap: .35rem; }
.account-settings-authenticator-details span { color: var(--account-settings-text-muted); font-size: .78rem; }
.account-settings-authenticator-details kbd { font-size: .9rem; overflow-wrap: anywhere; padding: .5rem .65rem; }
.account-settings-qr-code { background: #fff; border: 1px solid var(--account-settings-border); min-height: 202px; min-width: 202px; padding: 1px; }

.account-settings-form { align-items: flex-start; display: flex; flex-direction: column; gap: .9rem; max-width: 24rem; }
.account-settings-field { display: flex; flex-direction: column; gap: .3rem; width: 100%; }
.account-settings-field label { font-size: .78rem; font-weight: 700; }
.account-settings-field .validation-message { color: var(--account-settings-brand-red); font-size: .75rem; }
.account-settings-input {
    background: var(--account-settings-surface);
    border: 1px solid var(--account-settings-border);
    border-radius: .45rem;
    color: var(--account-settings-text);
    font: inherit;
    min-height: 2.4rem;
    padding: .5rem .65rem;
    width: 100%;
}

.account-settings-input:focus { border-color: var(--account-settings-focus); outline: .18rem solid color-mix(in srgb, var(--account-settings-focus) 22%, transparent); }

.account-settings-recovery-codes { background: var(--account-settings-surface-subtle); border: 1px solid var(--account-settings-border); border-radius: .7rem; margin-bottom: 1rem; padding: 1rem; }
.account-settings-recovery-codes h3 { font-size: .95rem; margin: 0 0 .75rem; }
.account-settings-recovery-codes ul { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.account-settings-recovery-codes kbd { display: block; font-size: .9rem; padding: .45rem .6rem; text-align: center; }

.account-settings-passkeys h3 { font-size: .95rem; margin: 0 0 .75rem; }
.account-settings-passkey-list { display: flex; flex-direction: column; gap: .75rem; }
.account-settings-passkey-card,
.account-settings-passkey-add {
    background: var(--account-settings-surface-subtle);
    border: 1px solid var(--account-settings-border);
    border-radius: .7rem;
    display: grid;
    gap: .85rem;
    padding: 1rem;
}

.account-settings-passkey-heading { align-items: center; display: flex; gap: .65rem; }
.account-settings-passkey-heading > .account-settings-icon { color: var(--account-settings-brand-blue-deep); }
.account-settings-passkey-heading > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.account-settings-passkey-heading strong { overflow-wrap: anywhere; }
.account-settings-passkey-heading span { color: var(--account-settings-text-muted); font-size: .75rem; }
.account-settings-button-row { display: flex; flex-wrap: wrap; gap: .55rem; }
.account-settings-passkey-add { background: var(--account-settings-surface); margin-top: 1rem; }
.account-settings-passkey-add h3 { margin-bottom: .25rem; }
.account-settings-passkey-add p { color: var(--account-settings-text-muted); font-size: .82rem; margin: 0; }

.account-settings-client-message { border-radius: .5rem; display: none; margin-bottom: .8rem; padding: .7rem .8rem; }
.account-settings-client-message:not(:empty) { display: block; }
.account-settings-client-message.is-success { background: color-mix(in srgb, #279461 12%, var(--account-settings-surface)); }
.account-settings-client-message.is-warning { background: color-mix(in srgb, #d6a600 14%, var(--account-settings-surface)); }
.account-settings-client-message.is-error { background: color-mix(in srgb, var(--account-settings-brand-red) 11%, var(--account-settings-surface)); }

@container account-settings (max-width: 48rem) {
    .account-settings-action-grid,
    .account-settings-recovery-codes ul { grid-template-columns: 1fr; }
    .account-settings-inline-action { align-items: flex-start; flex-direction: column; }
}

@keyframes account-settings-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .account-settings-spinner { animation: none; }
}

@container account-settings (max-width: 52rem) {
    .account-settings-shell { grid-template-columns: 1fr; }
    .account-settings-sidebar { position: static; }
    .account-settings-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container account-settings (max-width: 38rem) {
    .account-settings { gap: 1.15rem; padding-top: .75rem; }
    .account-settings-hero { flex-direction: column; gap: .75rem; }
    .account-settings-secure-pill { margin-top: 0; }
    .account-settings-content { padding: 1rem; }
    .account-settings-nav,
    .account-settings-dashboard-grid { grid-template-columns: 1fr; }
    .account-settings-empty-state { align-items: stretch; flex-direction: column; }
    .account-settings-button { width: 100%; }
}