.pricing-hero { max-width: 820px; margin: 0 auto 2rem; text-align: center; }
.pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.plan-card { border: 1px solid rgba(148, 163, 184, .25); border-radius: .75rem; background: rgba(15, 23, 42, .72); min-height: 100%; display: flex; flex-direction: column; }
.plan-card.primary { border-color: #22c55e; box-shadow: 0 0 0 1px rgba(34, 197, 94, .4), 0 22px 55px rgba(34, 197, 94, .1); }
.plan-card.secondary { border-color: rgba(56, 189, 248, .65); box-shadow: 0 0 0 1px rgba(56, 189, 248, .22); }
.plan-price { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.plan-subtitle { min-height: 2rem; }
.plan-features { list-style: none; padding-left: 0; margin: 1rem 0; flex: 1; }
.plan-features li { display: flex; gap: .5rem; margin-bottom: .55rem; color: #dbe4ef; font-size: .94rem; line-height: 1.35; }
.plan-features i { color: #22c55e; margin-top: .2rem; }
.plan-helper { color: #cbd5e1; font-size: .95rem; margin: auto 0 1rem; }
.value-section { margin-top: 2rem; border: 1px solid rgba(148, 163, 184, .22); border-radius: .75rem; background: rgba(15, 23, 42, .5); padding: 1.5rem; }
.value-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem 1rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.value-grid li { display: flex; gap: .55rem; color: #dbe4ef; }
.value-grid i { color: #22c55e; margin-top: .2rem; }
.payment-processing-overlay { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(2, 6, 23, .58); backdrop-filter: blur(2px); }
.payment-processing-overlay.is-visible { display: flex; }
.payment-processing-dialog { width: min(420px, 100%); display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border: 1px solid rgba(148, 163, 184, .3); border-radius: 8px; background: #111827; color: #f8fafc; box-shadow: 0 24px 70px rgba(0, 0, 0, .28); }
.payment-processing-dialog .spinner-border { flex: 0 0 auto; }
.payment-processing-dialog .text-muted { color: #cbd5e1 !important; }

/* Light mode uses clean paper surfaces; the dark palette above remains unchanged. */
html[data-theme="light"] .pricing-hero h1,
html[data-theme="light"] .plan-card h3,
html[data-theme="light"] .plan-price,
html[data-theme="light"] .value-section h2 {
  color: #0f172a;
}

html[data-theme="light"] .pricing-hero .text-muted,
html[data-theme="light"] .plan-card .text-muted {
  color: #64748b !important;
}

html[data-theme="light"] .plan-card {
  background: #ffffff;
  border-color: #d7dee8;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .07);
}

html[data-theme="light"] .plan-card.primary {
  border: 2px solid #16a34a;
  box-shadow: 0 12px 30px rgba(22, 163, 74, .14);
}

html[data-theme="light"] .plan-card.secondary {
  border: 1px solid #0ea5e9;
  box-shadow: 0 10px 26px rgba(14, 165, 233, .11);
}

html[data-theme="light"] .plan-features li {
  color: #334155;
}

html[data-theme="light"] .plan-helper {
  color: #64748b;
}

html[data-theme="light"] .plan-card .btn-outline-light {
  color: #334155;
  border-color: #94a3b8;
  background: #ffffff;
}

html[data-theme="light"] .plan-card .btn-outline-light:hover,
html[data-theme="light"] .plan-card .btn-outline-light:focus {
  color: #ffffff;
  border-color: #334155;
  background: #334155;
}

html[data-theme="light"] .value-section {
  background: #ffffff;
  border-color: #d7dee8;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

html[data-theme="light"] .value-grid li {
  color: #334155;
}

html[data-theme="light"] .register-plan-modal .modal-content {
  background: #f8fafc;
  border: 1px solid #d7dee8;
  color: #0f172a;
}

html[data-theme="light"] .register-plan-modal .modal-header {
  border-bottom-color: #d7dee8;
}

html[data-theme="light"] .payment-processing-dialog {
  background: #ffffff;
  border-color: #d7dee8;
  color: #0f172a;
}

html[data-theme="light"] .payment-processing-dialog .text-muted {
  color: #64748b !important;
}

@media (max-width: 1199px) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
  .pricing-grid,
  .value-grid { grid-template-columns: 1fr; }
}