.test-mode-badge,
.status-chip,
.plan-badge,
.current-plan-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
}

.test-mode-badge { color: #6552d8; border: 1px solid #ded7ff; background: #f2efff; }
.status-chip { color: #6f697d; background: #f2f0f5; }
.status-chip.active { color: #237a55; background: #eaf8f0; }
.status-chip.canceling { color: #9a651c; background: #fff5df; }
.status-chip.past_due, .status-chip.canceled { color: #a33d4b; background: #fff0f2; }

.billing-summary-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; margin-top: 18px; }
.account-summary-card { background: linear-gradient(135deg, #f8f5ff, #fff); border-color: #e3ddfc; }
.summary-number { display: flex; align-items: end; gap: 12px; margin: 7px 0 20px; }
.summary-number strong { font-size: 42px; line-height: 1; letter-spacing: -.06em; }
.summary-number span { color: var(--muted); font-size: 11px; }
.balance-split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.balance-split > div { padding: 13px; border: 1px solid #e8e3f2; border-radius: 12px; background: rgba(255,255,255,.75); }
.balance-split span, .balance-split b { display: block; }
.balance-split span { color: var(--muted); font-size: 10px; }
.balance-split b { margin-top: 5px; font-size: 17px; }
.plan-summary-card { display: flex; flex-direction: column; align-items: flex-start; }
.plan-summary-card .panel-heading { width: 100%; }
.plan-summary-card h3 { margin: 3px 0 8px; font-family: "Noto Serif SC", serif; font-size: 28px; }
.plan-summary-card p { min-height: 45px; margin: 0 0 18px; color: var(--muted); font-size: 12px; line-height: 1.7; }

.pricing-switch { display: flex; width: fit-content; padding: 4px; margin: 0 auto 22px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.pricing-switch button { padding: 9px 17px; color: var(--muted); border: 0; border-radius: 9px; background: transparent; font-size: 12px; font-weight: 800; }
.pricing-switch button.active { color: var(--lavender-dark); background: var(--lavender-soft); }
.pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.plan-card { position: relative; display: flex; flex-direction: column; min-height: 390px; padding: 24px 20px 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: #fff; }
.plan-card.featured { color: #fff; border: 2px solid #7562e8; background: linear-gradient(145deg, #211c3b 0%, #302663 48%, #4d3ca0 100%); box-shadow: 0 20px 46px rgba(60, 42, 145, .34), 0 0 0 6px rgba(117, 98, 232, .12); transform: translateY(-6px); }
.plan-card.featured::before { content: ""; position: absolute; top: -85px; right: -75px; width: 190px; height: 190px; border-radius: 50%; background: rgba(180, 166, 255, .2); filter: blur(2px); pointer-events: none; }
.plan-card.current { box-shadow: inset 0 0 0 2px var(--lavender); }
.plan-badge { position: absolute; top: 0; right: 0; z-index: 1; padding: 8px 13px; color: #fff; border-radius: 0 16px 0 12px; background: linear-gradient(135deg, #8978f4, #624dde); box-shadow: 0 6px 16px rgba(98, 77, 222, .3); font-weight: 800; }
.current-plan-badge { margin-bottom: 10px; color: #237a55; background: #eaf8f0; }
.plan-card h2 { margin: 0 0 18px; font-family: "Noto Serif SC", serif; font-size: 22px; }
.plan-price { display: flex; align-items: baseline; gap: 4px; font-family: "Manrope", sans-serif; font-weight: 700; }
.plan-price strong { font-family: "Noto Serif SC", serif; font-size: 30px; font-weight: 500; letter-spacing: -.035em; }
.plan-price span { color: var(--muted); font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: -.01em; }
.plan-card.featured h2, .plan-card.featured .plan-price strong { color: #fff; }
.plan-card.featured .plan-price span { color: rgba(255, 255, 255, .72); }
.saving-note { min-height: 18px; margin: 7px 0 20px; color: #4f9c73; font-size: 10px; }
.plan-credits { padding: 12px; color: var(--lavender-dark); border-radius: 11px; background: var(--lavender-soft); font-size: 11px; }
.plan-credits b { font-size: 17px; }
.plan-card ul { display: grid; gap: 10px; padding: 0; margin: 20px 0; list-style: none; color: #736e80; font-size: 11px; line-height: 1.5; }
.plan-card li::before { content: "✓"; margin-right: 7px; color: var(--lavender-dark); font-weight: 800; }
.plan-card li b, .plan-card li small { display: block; }
.plan-card li b { color: var(--ink); font-size: 11px; }
.plan-card li small { padding-left: 17px; color: #928ba0; font-size: 10px; line-height: 1.55; }
.plan-card > button { width: 100%; margin-top: auto; }
.plan-card.featured .saving-note { color: #b9ebd0; }
.plan-card.featured .plan-credits { color: #fff; background: rgba(255, 255, 255, .14); }
.plan-card.featured ul { color: rgba(255, 255, 255, .78); }
.plan-card.featured li b { color: #fff; }
.plan-card.featured li small { color: rgba(255, 255, 255, .7); }
.plan-card.featured li::before { color: #cfc7ff; }
.plan-card.featured > button.primary-btn { color: #33266f; background: #fff; box-shadow: 0 10px 22px rgba(12, 8, 41, .25); }
.plan-card.featured > button.primary-btn:hover { color: #fff; background: #8d7af5; }
.section-block { margin-top: 38px; }
.section-block-heading { margin-bottom: 17px; }
.section-block-heading h2 { margin: 9px 0 5px; font-family: "Noto Serif SC", serif; font-size: 25px; }
.section-block-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.credit-pack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.credit-pack { padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
.credit-pack.featured { border-color: #cfc7fa; background: linear-gradient(145deg, #f8f5ff, #fff); }
.credit-pack > span { display: block; color: var(--lavender-dark); font-size: 12px; font-weight: 800; }
.credit-pack > strong { display: block; margin: 10px 0 7px; font-family: "Noto Serif SC", serif; font-size: 27px; font-weight: 500; letter-spacing: -.035em; }
.credit-pack p { min-height: 34px; margin: 0 0 15px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.credit-pack button { width: 100%; }
.billing-rules { margin-top: 18px; }
.rules-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.rules-grid p { margin: 0; padding: 13px; color: var(--muted); border-radius: 11px; background: #faf9fd; font-size: 11px; line-height: 1.65; }
.rules-grid b { display: block; margin-bottom: 3px; color: var(--ink); }
.text-action { padding: 8px 0; margin-top: 12px; color: var(--lavender-dark); border: 0; background: transparent; font-size: 11px; font-weight: 800; }
.text-action.danger { color: #a33d4b; }

.account-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 18px; }
.account-hero { grid-row: span 2; align-self: start; background: linear-gradient(145deg, #f8f5ff, #fff); border-color: #e2dcfb; }
.account-hero { display: flex; flex-direction: column; align-items: flex-start; }
.account-hero h2 { margin: 9px 0 4px; font-family: "Noto Serif SC", serif; font-size: 32px; }
.account-hero p { margin: 0 0 17px; color: var(--muted); font-size: 12px; }
.account-metrics { display: grid; width: 100%; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; }
.account-metrics > div { padding: 14px; border: 1px solid #e5e0f1; border-radius: 12px; background: rgba(255,255,255,.8); }
.account-metrics span, .account-metrics strong { display: block; }
.account-metrics span { color: var(--muted); font-size: 10px; }
.account-metrics strong { margin-top: 5px; font-size: 21px; }
.billing-info { display: grid; width: 100%; grid-template-columns: 1fr auto; gap: 10px; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.billing-info b { color: var(--ink); }
.account-orders { grid-column: 2; }
.data-list { display: grid; gap: 2px; }
.data-list article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px; border-bottom: 1px solid #f0edf4; }
.data-list article:last-child { border-bottom: 0; }
.data-list b, .data-list span { display: block; }
.data-list b { font-size: 11px; }
.data-list span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.data-list strong { flex: 0 0 auto; font-size: 12px; }
.data-list strong.credit, .order-paid { color: #25835d; }
.data-list strong.debit, .order-failed { color: #af4754; }
.data-list strong.neutral { color: var(--muted); }

.admin-user-card { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; }
.admin-user-main { display: flex; align-items: center; gap: 12px; }
.admin-user-main h2, .admin-user-main p { margin: 0; }
.admin-user-main h2 { font-size: 14px; }
.admin-user-main p { margin-top: 4px; color: var(--muted); font-size: 10px; }
.admin-user-stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.admin-user-stats span { padding: 8px 10px; color: var(--muted); border-radius: 9px; background: #faf9fd; font-size: 10px; }
.admin-user-stats b { color: var(--ink); }
.admin-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; }
.admin-adjust-form { display: grid; gap: 13px; }
.admin-ledger { margin-top: 18px; }
.cost-preview { min-height: 37px; padding: 10px 12px; margin-top: 13px; color: var(--lavender-dark); border: 1px solid #e3dcff; border-radius: 10px; background: #f8f6ff; font-size: 11px; }
.app-sidebar { overflow-y: auto; }

@media (max-width: 1080px) {
  .pricing-grid, .credit-pack-grid { grid-template-columns: repeat(2, 1fr); }
  .plan-card { min-height: 360px; }
}

@media (max-width: 720px) {
  .billing-summary-grid, .account-grid, .admin-grid { grid-template-columns: 1fr; }
  .account-hero, .account-orders { grid-column: auto; grid-row: auto; }
  .pricing-grid, .credit-pack-grid, .rules-grid { grid-template-columns: 1fr; }
  .plan-card { min-height: auto; }
  .plan-card ul { margin-bottom: 24px; }
  .balance-split { grid-template-columns: 1fr; }
  .admin-user-card { align-items: flex-start; flex-direction: column; }
  .admin-user-stats { justify-content: flex-start; }
  .view-title .test-mode-badge { margin-top: 12px; }
}

.demo-controls { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.demo-controls label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; }
.demo-controls select { max-width: 160px; padding: 7px 9px; border: 1px solid #e3dcff; border-radius: 8px; background: #fff; color: var(--ink); font-size: 10px; }
.referral-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; align-items: center; }
.referral-lock h2 { margin: 8px 0; font-size: 22px; }
.referral-lock p { max-width: 520px; color: var(--muted); line-height: 1.7; }
.referral-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.referral-stats div { padding: 15px; border: 1px solid #e7e2f6; border-radius: 12px; background: #faf9ff; }
.referral-stats b, .referral-stats span { display: block; }
.referral-stats b { font-size: 22px; }
.referral-stats span { margin-top: 5px; color: var(--muted); font-size: 11px; }
.referral-share { display: grid; gap: 10px; }
.referral-share .panel-heading { grid-column: 1 / -1; }
.referral-share .field { margin: 0; }
.referral-share input { width: 100%; }
.admin-referrals { margin-top: 18px; }
@media (max-width: 720px) { .referral-hero { grid-template-columns: 1fr; } .demo-controls { display: none; } }

.input-invalid { border-color: #d75b68 !important; box-shadow: 0 0 0 3px rgba(215,91,104,.10); }
.validation-error { color: #b4414d !important; }

.profile-box[data-view] { cursor: pointer; }
.profile-box[data-view]:focus-visible { outline: 2px solid #7562e8; outline-offset: 2px; }