.billing-page {
  --billing-surface: #fff;
  --billing-soft: #f2f5fa;
  --billing-border: #e2e8f0;
  --billing-ink: #142033;
  --billing-muted: #637289;
  --billing-accent: #245dcc;
  --billing-card: #0d1729;
  --billing-card-text: #f6f8fb;
  --billing-card-muted: #b9c7da;
  --billing-card-line: #263754;
  --billing-page-bg: var(--color-paper, #f6f8fb);
  min-height: 100vh;
  margin: 0;
  background: var(--billing-page-bg);
  color: var(--billing-ink);
  font-family: var(--font-sans, "Onest", "Segoe UI", Arial, sans-serif);
}
html[data-theme="dark"] .billing-page {
  --billing-surface: #101b2e;
  --billing-soft: #17243a;
  --billing-border: #2b3b55;
  --billing-ink: #f2f5fa;
  --billing-muted: #a8b8cc;
  --billing-accent: #79a7ff;
  --billing-page-bg: #08101f;
}
.product-header-inner { width: min(1180px, calc(100% - 48px)); }
.brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 11px;
  background: linear-gradient(145deg, #4d8cff, #245dcc);
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.06em;
  box-shadow: 0 5px 16px #245dcc38;
}
.theme-toggle {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--product-header-line);
  border-radius: 11px;
  background: transparent;
  color: var(--product-header-text);
  font: 500 13px/1 var(--font-sans);
  cursor: pointer;
}
.theme-toggle #themeIcon { color: var(--product-header-active); font-size: 17px; }
.billing-shell { width: min(1040px, calc(100% - 48px)); margin: 48px auto 72px; }
.billing-intro { margin: 0 auto 28px; max-width: 760px; }
.billing-eyebrow,.plan-kicker,.panel-kicker {
  margin: 0;
  color: var(--billing-muted);
  font: 600 11px/1.4 var(--font-mono, monospace);
  letter-spacing: .105em;
}
.billing-eyebrow { display: flex; align-items: center; gap: 9px; color: var(--billing-accent); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #58a0ff; box-shadow: 0 0 0 4px #3978f61c; }
.billing-intro h1 { margin: 14px 0 7px; color: var(--billing-ink); font-size: clamp(30px, 4vw, 42px); font-weight: 700; letter-spacing: -.045em; line-height: 1.12; }
.billing-lead { margin: 0; color: var(--billing-muted); font-size: 16px; line-height: 1.6; }
.billing-status { margin: 13px 0 0; color: #a35118; font-size: 13px; line-height: 1.5; }
.billing-status:empty { display: none; }
.purchase-card {
  position: relative;
  max-width: 760px;
  margin: 0 auto 30px;
  overflow: hidden;
  padding: clamp(24px, 5vw, 40px);
  border: 1px solid #263754;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 90% 0%, #3978f638, transparent 38%),
    linear-gradient(150deg, #101d33, #0b1424 72%);
  color: var(--billing-card-text);
  box-shadow: 0 22px 60px #08101f26;
}
.purchase-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(#79a7ff, #3978f6 62%, #58d692);
  content: "";
}
.purchase-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.plan-kicker { color: #8ca4c5; }
.purchase-card h2 { margin: 9px 0 0; color: #fff; font-size: clamp(21px, 3vw, 27px); font-weight: 600; letter-spacing: -.025em; }
.plan-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid #79a7ff4d; border-radius: 999px; color: #bad0ff; font: 600 10px/1 var(--font-mono, monospace); letter-spacing: .08em; }
.plan-badge span { color: #79a7ff; font-size: 13px; }
.purchase-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 11px; margin: 27px 0 12px; }
.price-value { color: #fff; font-size: clamp(40px, 7vw, 54px); font-weight: 700; letter-spacing: -.055em; line-height: 1; }
.price-value span { color: #9dbdff; font-size: .72em; }
.price-caption { color: var(--billing-card-muted); font-size: 13px; }
.purchase-description { max-width: 610px; margin: 0; color: var(--billing-card-muted); font-size: 14px; line-height: 1.65; }
.purchase-button {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 25px 0 0;
  padding: 0 18px;
  border: 1px solid #79a7ff;
  border-radius: 12px;
  background: #3978f6;
  color: #fff;
  font: 600 15px/1.3 var(--font-sans);
  opacity: .66;
  cursor: not-allowed;
}
.purchase-button:disabled { opacity: .66; }
.button-arrow { font-size: 20px; font-weight: 400; }
.purchase-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; color: #b9c7da; font-size: 12px; line-height: 1.5; }
.purchase-note span { color: #f0bd62; font-size: 10px; line-height: 1.75; }
.sales-status { margin: 0; color: #8ca4c5; font-size: 12px; }
.billing-content-grid { max-width: 760px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 auto; }
.billing-panel { min-width: 0; padding: 23px; border: 1px solid var(--billing-border); border-radius: 17px; background: var(--billing-surface); box-shadow: 0 5px 18px #0b1b3308; }
.panel-heading { display: flex; align-items: flex-start; gap: 12px; }
.panel-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background: color-mix(in srgb, var(--billing-accent) 12%, transparent); color: var(--billing-accent); font-size: 18px; }
.panel-kicker { color: var(--billing-accent); font-size: 10px; }
.billing-panel h2,.seller-panel h2 { margin: 4px 0 0; color: var(--billing-ink); font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.panel-copy,.payments-list { margin: 19px 0 0; color: var(--billing-ink); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.panel-hint { margin: 13px 0 0; color: var(--billing-muted); font-size: 12px; line-height: 1.55; }
.secondary-button { margin-top: 16px; padding: 10px 12px; border: 1px solid var(--billing-border); border-radius: 9px; background: var(--billing-surface); color: var(--billing-ink); font: 500 12px/1.45 var(--font-sans); cursor: pointer; }
.secondary-button:hover { border-color: var(--billing-accent); }
.payments-list { margin-top: 19px; }
.billing-payment { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--billing-border); font-size: 13px; }
.billing-payment button { padding: 8px 10px; border: 1px solid var(--billing-border); border-radius: 8px; background: var(--billing-surface); color: var(--billing-accent); font: 500 12px/1.35 var(--font-sans); cursor: pointer; }
.inline-status { margin: 10px 0 0; color: var(--billing-muted); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.inline-status:empty { display: none; }
.seller-panel { max-width: 760px; display: flex; align-items: center; justify-content: space-between; gap: 22px; margin: 16px auto 0; padding: 22px 24px; border: 1px solid var(--billing-border); border-radius: 17px; background: var(--billing-soft); }
.seller-copy { min-width: 0; }
.seller-copy > p:last-child { margin: 9px 0 0; color: var(--billing-muted); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.seller-support { flex: 0 0 auto; color: var(--billing-accent); font-size: 13px; font-weight: 600; text-decoration: none; }
.seller-support span { margin-left: 5px; }
.seller-support:hover { text-decoration: underline; }
.billing-shell button,.billing-shell select,.billing-shell input:not([type=checkbox]) { max-width: 100%; font: inherit; }
#payerBusiness label { display: block; margin-top: 12px; }
.billing-choice { display: flex; gap: 12px; align-items: flex-start; margin: 20px 0; }
.billing-choice input { min-width: 20px; min-height: 20px; margin-top: 5px; }
.billing-choice[hidden],[hidden] { display: none !important; }
.billing-payment { padding: 12px 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#billingStatus,#cancellationStatus,#refundStatus { overflow-wrap: anywhere; }
.reading-footer { border-top: 1px solid var(--billing-border); background: var(--billing-surface); }
.reading-nav { max-width: 760px; }
.footer-brand { max-width: 760px; margin: 0 auto; padding: 0 20px 21px; color: var(--billing-muted); font-size: 11px; }
.footer-brand span { margin: 0 5px; color: var(--billing-accent); }
@media (max-width: 760px) {
  .product-header-inner { width: 100%; }
  .billing-shell { width: min(100% - 32px, 600px); margin: 34px auto 48px; }
  .billing-content-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .product-header-inner { padding-inline: 12px; }
  .theme-toggle { padding: 8px 9px; }
  .theme-toggle > span:last-child { display: none; }
  .billing-shell { width: calc(100% - 28px); margin-top: 28px; }
  .billing-intro { margin-bottom: 21px; }
  .purchase-card { padding: 24px 20px 22px 23px; border-radius: 18px; }
  .purchase-card-top { gap: 10px; }
  .plan-badge { padding: 7px 8px; font-size: 9px; }
  .billing-panel { padding: 20px; }
  .seller-panel { align-items: flex-start; flex-direction: column; padding: 20px; }
  .seller-support { padding: 10px 0; }
  .billing-shell button:not(.purchase-button) { width: 100%; }
}