/* Account settings: quiet application chrome, independent of the marketing site. */
.settings-body { margin: 0; background: #101112; color: #ececec; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 14px; }
.settings-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: 58px minmax(0, 1fr); height: 100dvh; }
.settings-topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 0 24px; border-bottom: 1px solid #2c2d30; background: #121314; }
.settings-brand { font-weight: 650; font-size: 17px; text-decoration: none; white-space: nowrap; }
.settings-brand span { font-size: 13px; color: #929497; font-weight: 400; margin-left: 12px; }
.settings-back { margin-left: auto; color: #b9bbbd; font-size: 13px; white-space: nowrap; }
.settings-sidebar { display: flex; flex-direction: column; gap: 20px; min-height: 0; padding: 24px 14px 18px; background: #171819; border-right: 1px solid #2c2d30; overflow-y: auto; }
.settings-context { position: relative; border: 1px solid #383a3d; border-radius: 8px; margin: 0 4px; }
.settings-context summary { cursor: pointer; padding: 12px; list-style: none; }
.settings-context strong { display: block; font-size: 14px; font-weight: 550; overflow-wrap: anywhere; margin: 5px 0; }
.settings-context-meta { color: #9a9c9f; font-size: 12px; display: flex; justify-content: space-between; }
.settings-context > div { padding: 6px; border-top: 1px solid #383a3d; }
.settings-context a { display: block; padding: 9px; border-radius: 5px; }
.settings-context a[aria-current], .settings-context a:hover { background: #292b2d; }
.settings-caption { display: block; font-size: 11px; color: #85888c; font-weight: 550; letter-spacing: .03em; }
.settings-nav { display: flex; flex-direction: column; gap: 2px; }
.settings-nav > .settings-caption { padding: 14px 12px 6px; }
.settings-nav > .settings-caption:first-child { padding-top: 0; }
.settings-nav a { display: flex; justify-content: space-between; padding: 9px 12px; border-radius: 6px; color: #b9bbbe; text-decoration: none; }
.settings-nav a:is(:hover, :focus-visible) { background: #252729; color: #fff; }
.settings-nav a[aria-current="page"] { background: #303234; color: #fff; }
.settings-person { display: flex; flex-direction: column; gap: 4px; margin: auto 10px 0; padding-top: 18px; border-top: 1px solid #303234; font-size: 12px; overflow-wrap: anywhere; }
.settings-person > span { color: #96999d; }
.settings-person button { margin-top: 8px; color: #bbb; cursor: pointer; }
.settings-main { min-width: 0; overflow-y: auto; }
.customer-area { max-width: 1120px; padding: 44px clamp(20px, 4vw, 64px) 72px; margin: 0 auto; }
.customer-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.customer-heading h1 { margin: 0; font-size: 25px; letter-spacing: -.035em; font-weight: 550; }
.customer-area h2 { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.customer-area p { line-height: 1.6; }
.settings-intro { color: #999ca0; margin-bottom: 32px; max-width: 700px; }
.customer-card { min-width: 0; border: 1px solid #313336; border-radius: 9px; padding: 24px; margin: 22px 0; background: #141516; }
.customer-card > p { margin: 10px 0 18px; color: #999ca0; }
.customer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.customer-facts { display: grid; grid-template-columns: minmax(120px, 1fr) 2.5fr; gap: 18px 24px; margin: 20px 0 6px; }
.customer-facts dt { color: #91959a; }
.customer-facts dd { min-width: 0; overflow-wrap: anywhere; }
.settings-muted, .settings-footnote { color: #909398; font-size: 12px; }
.settings-footnote { margin-top: 28px; }
.settings-badge { display: inline-flex; border: 1px solid #414449; border-radius: 5px; padding: 3px 8px; font-size: 11px; color: #d0d2d5; margin-right: 8px; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 24px; }
.customer-area a:not(.btn):is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 3px; }
.settings-body .btn { min-height: 34px; height: auto; padding: 8px 14px; background: #efefef; color: #171819; border: 1px solid #efefef; border-radius: 6px; font: inherit; font-weight: 550; box-shadow: none; text-decoration: none; cursor: pointer; }
.settings-body .btn:hover { background: #d5d7d9; border-color: #d5d7d9; }
.settings-body .btn-outline { background: transparent; color: #ddd; border-color: #484b50; }
.settings-body .btn-outline:hover { background: #292b2f; }
.customer-form { max-width: 620px; }
.customer-form p { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.customer-form input, .customer-form textarea, .customer-form select, .customer-form .settings-select { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #474a50; border-radius: 6px; background: #101112; color: #eee; font: inherit; }

.customer-form select:focus, .customer-form .settings-select:focus-visible {
    outline: 2px solid #777d88;
    outline-offset: 2px;
}
.settings-body [data-menu-accent="settings"] { --menu-accent: 150 155 165; }
.settings-body .sg-select-menu.sg-select-attached { border-color: #474a50; border-radius: 0 0 6px 6px; }
.settings-body .sg-select-menu.sg-select-attached.sg-select-above { border-radius: 6px 6px 0 0; }
.customer-form .sg-select-attached-trigger.sg-select-open { border-radius: 6px 6px 0 0; }
.customer-form .sg-select-attached-trigger.sg-select-open.sg-select-above { border-radius: 0 0 6px 6px; }
.customer-form .settings-select[aria-invalid="true"] { border-color: #fca5a5; }
.customer-form .helptext { font-size: 12px; color: #91959a; }
.customer-form .helptext ul { padding-left: 18px; list-style: disc; }
.customer-form .errorlist, .settings-error { color: #fca5a5; margin: 12px 0; }
.settings-table-wrap { overflow: auto; border: 1px solid #313336; border-radius: 8px; margin: 24px 0; }
.settings-table { width: 100%; border-collapse: collapse; text-align: left; }
.settings-table th { padding: 13px 18px; background: #1a1b1d; color: #909398; font-size: 12px; font-weight: 500; }
.settings-table td { padding: 18px; border-top: 1px solid #2c2e31; overflow-wrap: anywhere; }
.settings-empty { color: #92969b; padding: 28px 0; line-height: 1.7; }
.settings-key-integration { display: block; margin-top: 5px; color: #92969b; font-size: 11px; }
.settings-passkey { border-top: 1px solid #313336; margin-top: 20px; padding-top: 18px; }
.settings-passkey summary { cursor: pointer; color: #bfc3c8; }
.settings-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.settings-plans .customer-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.settings-plans .btn { margin-top: auto; }
.customer-list li { padding: 18px 0; border-bottom: 1px solid #313336; }
.customer-list a, .customer-member { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.customer-list span { color: #b0b3b7; }
.customer-key-actions summary { cursor: pointer; padding: 12px 0; }
.customer-key-actions form { display: flex; flex-wrap: wrap; gap: 10px; }
.customer-area pre { overflow: auto; padding: 16px; border-radius: 6px; background: #08090a; margin: 16px 0; }
.customer-notice { padding: 16px; border: 1px solid #54756d; background: #17221f; border-radius: 6px; margin: 24px 0; }
.customer-secret { display: block; overflow-wrap: anywhere; user-select: all; margin-top: 12px; }
.account-launcher { width: min(390px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow-y: auto; }
.account-summary { display: grid; gap: 12px; margin: 22px 0; font-size: 13px; }
.account-summary > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 14px; }
.account-summary dt { color: #ffffff80; }
.account-summary dd { overflow-wrap: anywhere; }
.account-org-line { display: block; margin-bottom: 4px; }
.account-org-line small { color: #ffffff80; margin-left: 6px; }
.account-settings-link { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid #ffffff25; border-bottom: 1px solid #ffffff25; margin-bottom: 16px; font-size: 14px; }
#accountModal::backdrop { background: transparent; }
.settings-menu-toggle, .settings-nav-backdrop { display: none; }
@media (max-width: 760px) {
    .settings-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: 54px minmax(0, 1fr); }
    .settings-topbar { padding: 0 16px; gap: 12px; }
    .settings-brand { font-size: 15px; }
    .settings-brand span { display: none; }
    .settings-menu-toggle { display: block; background: none; border: 1px solid #45484c; border-radius: 5px; padding: 5px 8px; color: #ddd; font: inherit; cursor: pointer; }
    .settings-sidebar { position: fixed; z-index: 30; inset: 54px auto 0 0; width: 252px; visibility: hidden; transform: translateX(-100%); }
    .settings-shell[data-nav-open] .settings-sidebar { visibility: visible; transform: none; }
    .settings-shell[data-nav-open] .settings-nav-backdrop { display: block; position: fixed; z-index: 20; inset: 54px 0 0; background: #0009; border: none; }
    .customer-area { padding: 28px 20px 48px; }
    .settings-plans { grid-template-columns: 1fr; gap: 0; }
    .settings-plans .customer-card { margin: 8px 0; }
    .customer-facts { grid-template-columns: minmax(90px, 1fr) 2fr; gap: 14px; }
    .customer-card { padding: 18px; }
    .settings-table th, .settings-table td { padding: 12px; }
}

/* Shared public/settings plan comparison. */
.plans-public { max-width: 1120px; margin: 0 auto; padding: 44px 24px 64px; }
.plans-public > h1 { font-size: 30px; font-weight: 600; letter-spacing: -.035em; }
.plans-content { color: #ececec; font-size: 14px; }
.plans-notice { padding: 18px 20px; border: 1px solid #facc15; border-radius: 8px; background: #191b1d; color: #facc15; margin: 22px 0; }
.plans-notice strong { font-size: 14px; }
.plans-notice p { margin: 8px 0 0; color: #fff; line-height: 1.6; }
.plan-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 28px 0 14px; }
.plan-choice { border: 1px solid #35393d; border-radius: 9px; background: #141516; min-width: 0; }
.plan-choice.is-current, .plan-choice.is-selected { border-color: #fff; }
.plan-choice.is-selected { background: #1c1e20; }
.plan-choice-button { display: flex; flex-direction: column; gap: 16px; width: 100%; min-height: 220px; height: 100%; padding: 22px; text-align: left; color: inherit; background: none; border: none; border-radius: inherit; font: inherit; cursor: pointer; }
.plan-choice-button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.plan-choice-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.plan-current { font-size: 10px; font-weight: 500; border: 1px solid #d6d8db; border-radius: 4px; padding: 3px 6px; }
.plan-price { font-size: 23px; font-weight: 550; letter-spacing: -.025em; }
.plan-summary { color: #a4a8ad; font-size: 13px; line-height: 1.65; }
.plans-compare-hint, .plans-footnote { font-size: 12px; color: #92979d; line-height: 1.7; margin: 14px 0; }
.plan-table-scroll { overflow-x: auto; margin: 24px 0 12px; border: 1px solid #34383d; border-radius: 8px; }
.plan-comparison { width: 100%; min-width: 530px; border-collapse: collapse; text-align: center; font-size: 13px; }
.plan-comparison caption { text-align: left; padding: 18px; font-size: 15px; font-weight: 550; }
.plan-comparison th, .plan-comparison td { border-top: 1px solid #34383d; padding: 15px 14px; }
.plan-comparison th { font-weight: 500; }
.plan-comparison th:first-child { text-align: left; width: 43%; }
.plan-comparison td { color: #a7acb2; }
.plan-comparison .is-selected { background: #ffffff09; color: #eee; }
.plan-dot { color: #eee; font-size: 12px; }
.plan-next { margin-top: 24px; padding-top: 20px; border-top: 1px solid #34383d; }
.plan-next p { color: #a4a8ad; margin-bottom: 16px; }
.plan-action { display: inline-flex; padding: 9px 15px; border: 1px solid #eee; border-radius: 6px; background: #eee; color: #151617; font: inherit; font-weight: 550; text-decoration: none; }
.plan-action:hover { background: #d5d8db; text-decoration: none !important; }

.account-modal-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.account-modal-identity {
    overflow-wrap: anywhere;
}
.account-modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
.account-modal-actions .sg-modal-close { position: relative; }
.account-modal-actions .sg-modal-close > svg { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: 0; transform: translate(-50%, -50%); }
.account-settings-button { display: block; padding: 11px 14px; width: 100%; background: #eee; color: #151617; border: 1px solid #eee; border-radius: 6px; font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; }
.account-settings-button:hover { background: #d5d8db; }
.account-plans-link { display: block; margin-top: 13px; text-align: center; color: #ffffffaa; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
    .plan-choices { grid-template-columns: 1fr; gap: 12px; }
    .plan-choice-button { min-height: 0; padding: 18px; gap: 10px; }
    .plan-choice-heading { justify-content: space-between; }
    .plan-price { font-size: 20px; }
    .plans-public { padding: 28px 20px 48px; }
}