.account-plans { box-sizing: border-box; width: min(1080px, calc(100% - 24px)); max-height: calc(100dvh - 24px); border: 1px solid #e5dfed; border-radius: 12px; padding: clamp(18px, 4vw, 36px); background: #fff; color: #241d30; font-family: Arial, sans-serif; overflow-y: auto; overscroll-behavior: contain; }
.account-plans *, .account-plans *::before, .account-plans *::after { box-sizing: border-box; }
.account-plans::backdrop { background: rgb(24 15 37 / .6); }
.account-plans__top, .account-plans__summary-top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.account-plans h2 { font-size: clamp(26px, 4vw, 36px); letter-spacing: -.04em; line-height: 1.15; margin: 0; }
.account-plans h3 { font-size: 24px; margin: 8px 0; letter-spacing: -.025em; line-height: 1.25; }
.account-plans h4 { font-size: 21px; margin: 0 0 6px; letter-spacing: -.02em; }
.account-plans button { cursor: pointer; font: inherit; min-height: 44px; }
.account-plans button:focus-visible { outline: 3px solid #7b3ed1; outline-offset: 3px; }
.account-plans__close, .account-plans__retry, .account-plans__refresh { flex: 0 0 auto; border: 1px solid #d7cce4; border-radius: 7px; padding: 10px 13px; background: #fff; color: #392a4e; font-weight: 700 !important; }
.account-plans__intro { color: #665a71; line-height: 1.5; max-width: 660px; margin: 14px 0 24px; font-size: 16px; }
.account-plans__summary { padding: 24px; border: 1px solid #dfd1ef; border-radius: 10px; background: #fcfaff; margin-bottom: 24px; }
.account-plans__summary p { margin: 8px 0 0; line-height: 1.5; }
.account-plans__eyebrow { font-size: 11px; letter-spacing: .1em; font-weight: 800; color: #705784; }
.account-plans__balance { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 36px; margin-top: 20px; }
.account-plans__donut { --credits-remaining: 0%; --credits-pending-end: 0%; display: grid; place-items: center; width: 210px; height: 210px; border-radius: 50%; background: conic-gradient(#7636cc 0 var(--credits-remaining), #bd9de3 var(--credits-remaining) var(--credits-pending-end), #e8e3ed var(--credits-pending-end) 100%); }
.account-plans__donut.is-unavailable { background: #e8e3ed; }
.account-plans__donut-center { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 176px; height: 176px; border-radius: 50%; background: #fcfaff; gap: 4px; color: #665a71; font-size: 13px; }
.account-plans__donut-center strong { color: #241d30; font-size: clamp(30px, 5vw, 40px); font-weight: 800; letter-spacing: -.055em; line-height: 1.05; max-width: 160px; overflow-wrap: anywhere; text-align: center; }
.account-plans__donut.is-unlimited strong { font-size: 58px; }
.account-plans__balance-details { min-width: 0; }
.account-plans__balance-total { color: #665a71; font-size: 14px; }
.account-plans__credit-stats { margin: 17px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.account-plans__credit-stat { min-width: 0; }
.account-plans__credit-stat dt { color: #665a71; font-size: 13px; line-height: 1.4; }
.account-plans__credit-stat dt::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: #7636cc; }
.account-plans__credit-stat.is-used dt::before { background: #e8e3ed; border: 1px solid #bcb1c8; }
.account-plans__credit-stat.is-pending dt::before { background: #bd9de3; }
.account-plans__credit-stat dd { font-size: 23px; font-weight: 700; letter-spacing: -.03em; margin: 5px 0 0; overflow-wrap: anywhere; }
.account-plans__pending-note { color: #74677e; font-size: 12px; }
.account-plans__renewal { font-size: 13px; color: #493b56; }
.account-plans p.account-plans__account-note { padding-top: 17px; margin-top: 22px; border-top: 1px solid #e8dfef; color: #665a71; font-size: 13px; }
.account-plans__cost-audit { margin-top: 16px; color: #665a71; font-size: 13px; line-height: 1.5; }
.account-plans__cost-audit summary { cursor: pointer; color: #493b56; font-weight: 700; }
.account-plans__tariff { margin: 0 0 30px; }
.account-plans__tariff h3 { font-size: 22px; }
.account-plans__tariff > p { color: #665a71; font-size: 14px; line-height: 1.5; margin: 8px 0 14px; }
.account-plans__tariff-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin: 0; }
.account-plans__tariff-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #ece7f2; font-size: 14px; line-height: 1.4; }
.account-plans__tariff-list dt { min-width: 0; overflow-wrap: anywhere; }
.account-plans__tariff-list dd { flex-shrink: 0; margin: 0; font-weight: 700; color: #6324b2; }
.account-plans__tariff p.account-plans__free-note { border-left: 3px solid #7636cc; padding: 10px 14px; background: #f7f2fc; margin-top: 18px; }
.account-plans__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.account-plans__card { min-width: 0; position: relative; padding: 24px 20px 20px; border: 1px solid #e1d9e8; border-radius: 9px; background: #fff; display: flex; flex-direction: column; }
.account-plans__card.is-featured { border: 2px solid #742ed2; padding: 23px 19px 19px; }
.account-plans__purpose { margin: 0; color: #655771; font-size: 15px; line-height: 1.45; min-height: 66px; }
.account-plans__comparison { border-collapse: collapse; width: 100%; table-layout: fixed; margin: 0 0 26px; font-size: 14px; line-height: 1.4; }
.account-plans__comparison caption { text-align: left; font-weight: 700; font-size: 22px; padding: 0 0 14px; }
.account-plans__comparison th, .account-plans__comparison td { overflow-wrap: anywhere; padding: 13px 8px; border-bottom: 1px solid #e4dce9; text-align: center; vertical-align: middle; }
.account-plans__comparison th:first-child { text-align: left; width: 31%; }
.account-plans__comparison thead th { color: #705784; font-weight: 700; }
.account-plans__comparison td { font-weight: 700; }
.account-plans__comparison tr > :nth-child(3) { background: #f4edfc; }
.account-plans__shared { padding: 22px; border: 1px solid #e1d9e8; border-radius: 9px; background: #fff; margin-top: 24px; }
.account-plans__shared h3 { margin-top: 0; font-size: 20px; }
.account-plans__shared ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 16px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.4; }
.account-plans__shared li::marker { color: #742ed2; }
.account-plans__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 12px 0 20px; }
.account-plans__price strong { font-size: 40px; letter-spacing: -.055em; font-weight: 800; }
.account-plans__price span { color: #75677e; font-size: 14px; }
.account-plans__card ul { padding: 0; margin: 0; list-style: none; flex: 1; }
.account-plans__card li { position: relative; padding: 0 0 14px 22px; font-size: 15px; line-height: 1.35; }
.account-plans__card li::before { content: '✓'; position: absolute; left: 0; color: #742ed2; font-weight: bold; }
.account-plans__card li.is-unavailable::before { content: '–'; color: #75677e; }
.account-plans__plan-note { font-size: 13px; color: #75677e; line-height: 1.4; min-height: 37px; margin: 18px 0; }
.account-plans__action { width: 100%; border: 1px solid #dbd0e7; border-radius: 7px; padding: 12px 8px; background: #f3eef8; color: #66556f; font-weight: 700 !important; }
.account-plans__action:disabled { cursor: default; opacity: 1; }
.account-plans__explanation { color: #716579; font-size: 13px; line-height: 1.55; margin-top: 24px; }
.account-plans__billing-note { padding: 14px 16px; background: #f6f3f9; border-radius: 7px; }
.account-plans__status { line-height: 1.5; }
.account-plans__status:empty { display: none; }
.account-plans__retry[hidden] { display: none; }
@media (max-width: 700px) {
 .account-plans { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 9px; padding: 20px 16px; }
 .account-plans__cards { grid-template-columns: 1fr; gap: 14px; }
 .account-plans__card { padding: 22px; }
 .account-plans__card.is-featured { padding: 21px; }
 .account-plans__summary { padding: 18px; }
 .account-plans__plan-note, .account-plans__purpose { min-height: 0; }
 .account-plans__balance { grid-template-columns: 1fr; gap: 22px; }
 .account-plans__donut { margin-inline: auto; }
 .account-plans__credit-stats { gap: 10px; }
 .account-plans__credit-stat dd { font-size: 21px; }
 .account-plans__comparison { font-size: 12px; }
 .account-plans__comparison th, .account-plans__comparison td { padding: 11px 4px; }
 .account-plans__shared { padding: 18px; }
 .account-plans__shared ul, .account-plans__tariff-list { grid-template-columns: 1fr; }
}
@media (max-width: 359px) {
 .account-plans { padding: 18px 12px; }
 .account-plans__summary { padding: 14px; }
 .account-plans__summary h3 { font-size: 21px; }
 .account-plans__credit-stats { grid-template-columns: 1fr; gap: 9px; }
 .account-plans__credit-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
 .account-plans__credit-stat dd { margin: 0; }
}

.account-plans__cost-amounts { margin: 12px 0; font-size: 13px; }
.account-plans__cost-amounts > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px 16px; margin: 8px 0; }
.account-plans__cost-amounts dd { margin: 0; font-weight: 700; }
.account-plans__cost-services { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: 10px; margin: 16px 0; }
.account-plans__cost-services section { padding: 14px; border: 1px solid #e4dce9; border-radius: 7px; background: #fff; min-width: 0; }
.account-plans__cost-services h4 { margin: 0 0 12px; }
.account-plans__cost-entry { border-top: 1px solid #e4dce9; padding: 12px 0; overflow-wrap: anywhere; }
.account-plans__cost-entry summary { cursor: pointer; font-size: 13px; line-height: 1.6; }
.account-plans__cost-entry p { font-size: 12px; line-height: 1.6; }
/* Owner: real API money instead of credits (renderSpend); the noir theme refines these. */
.account-plans__spend { display: grid; gap: 18px; min-width: 0; }
.account-plans__spend-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; }
.account-plans__spend-total strong { font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.account-plans__spend-periods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.account-plans__spend-periods dd { margin: 6px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.account-plans__spend-certainty, .account-plans__spend-days ol, .account-plans__spend-actions ol { margin: 0; padding: 0; list-style: none; }
.account-plans__spend-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.account-plans__spend-table th, .account-plans__spend-table td { padding: 8px 0 8px 10px; border-bottom: 1px solid #e4dce9; text-align: right; vertical-align: top; }
.account-plans__spend-table th[scope="row"], .account-plans__spend-table thead th:first-child { padding-left: 0; text-align: left; }
.account-plans__spend-table caption { text-align: left; font-weight: 700; margin-bottom: 6px; }
.account-plans__spend-table small { display: block; opacity: .75; }
.account-plans__spend-days li { display: grid; grid-template-columns: minmax(84px, auto) minmax(32px, 1fr) auto auto; align-items: center; gap: 10px; padding: 4px 0; font-size: 12px; }
.account-plans__spend-bar { height: 8px; background: linear-gradient(#ff9a2e, #ff9a2e) 0 0 / var(--spend-share, 2%) 100% no-repeat, #eee7f2; }
.account-plans__spend-actions li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; padding: 7px 0; border-top: 1px solid #e4dce9; font-size: 12px; }
.account-plans__spend-amount { font-weight: 700; text-align: right; white-space: nowrap; }