/* Balanced columns: enough room for account/status, no crushed actions. */

/* Header alignment matches the data alignment. */

/* ══════════════════════════════════════
   3) Payments: readable production hero in light mode
══════════════════════════════════════ */
#panel-payments .hero {
  isolation: isolate !important;
}

html[data-theme="light"] #panel-payments .hero,
html:not([data-theme="dark"]) #panel-payments .hero {
  color: #ffffff !important;
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--apex-brand) 30%, transparent), transparent 34%),
    radial-gradient(circle at 18% 92%, color-mix(in srgb, var(--apex-warning) 20%, transparent), transparent 38%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--apex-brand-strong) 72%, #08110e) 0%,
      color-mix(in srgb, var(--apex-brand) 66%, #0c1713) 48%,
      #10231d 100%) !important;
  border: 1px solid color-mix(in srgb, var(--apex-brand) 34%, var(--apex-line)) !important;
  box-shadow: 0 26px 72px rgba(15, 63, 53, .24) !important;
}

html[data-theme="light"] #panel-payments .hero::before,
html:not([data-theme="dark"]) #panel-payments .hero::before {
  width: 560px !important;
  height: 560px !important;
  right: -210px !important;
  top: -245px !important;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 65%) !important;
  opacity: 1 !important;
}

html[data-theme="light"] #panel-payments .hero::after,
html:not([data-theme="dark"]) #panel-payments .hero::after {
  width: 420px !important;
  height: 420px !important;
  left: 32% !important;
  bottom: -230px !important;
  background: radial-gradient(circle, color-mix(in srgb, var(--apex-brand-soft) 28%, transparent), transparent 70%) !important;
  opacity: 1 !important;
}

html[data-theme="light"] #panel-payments .hero *,
html:not([data-theme="dark"]) #panel-payments .hero * {
  color: inherit !important;
}

html[data-theme="light"] #panel-payments .hero .sub-badge,
html:not([data-theme="dark"]) #panel-payments .hero .sub-badge,
html[data-theme="light"] #panel-payments .hero .date-chip,
html:not([data-theme="dark"]) #panel-payments .hero .date-chip {
  color: rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.105) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
}

html[data-theme="light"] #panel-payments .hero .hero-plan span,
html:not([data-theme="dark"]) #panel-payments .hero .hero-plan span,
html[data-theme="light"] #panel-payments .hero .date-chip span,
html:not([data-theme="dark"]) #panel-payments .hero .date-chip span,
html[data-theme="light"] #panel-payments .hero .meter-labels,
html:not([data-theme="dark"]) #panel-payments .hero .meter-labels,
html[data-theme="light"] #panel-payments .hero .days-label,
html:not([data-theme="dark"]) #panel-payments .hero .days-label {
  color: rgba(255,255,255,.76) !important;
}

html[data-theme="light"] #panel-payments .hero .days-num,
html:not([data-theme="dark"]) #panel-payments .hero .days-num,
html[data-theme="light"] #panel-payments .hero .hero-plan strong,
html:not([data-theme="dark"]) #panel-payments .hero .hero-plan strong,
html[data-theme="light"] #panel-payments .hero .date-chip strong,
html:not([data-theme="dark"]) #panel-payments .hero .date-chip strong {
  color: #ffffff !important;
  text-shadow: 0 10px 32px rgba(0,0,0,.18) !important;
}

html[data-theme="light"] #panel-payments .hero .timeline-line::before,
html:not([data-theme="dark"]) #panel-payments .hero .timeline-line::before,
html[data-theme="light"] #panel-payments .hero .timeline-line::after,
html:not([data-theme="dark"]) #panel-payments .hero .timeline-line::after {
  background: rgba(255,255,255,.55) !important;
}

html[data-theme="light"] #panel-payments .hero .timeline-line-bar,
html:not([data-theme="dark"]) #panel-payments .hero .timeline-line-bar,
html[data-theme="light"] #panel-payments .hero .meter,
html:not([data-theme="dark"]) #panel-payments .hero .meter {
  background: rgba(255,255,255,.18) !important;
}

html[data-theme="light"] #panel-payments .hero .meter-bar,
html:not([data-theme="dark"]) #panel-payments .hero .meter-bar {
  background: linear-gradient(90deg, var(--apex-warning), var(--apex-brand), var(--apex-success)) !important;
}

/* Keep the existing mobile card conversion intact. */

/* V11.1 desktop fit correction: keep critical action columns visible at standard laptop widths. */