:root {
  --commerce-bg: #07080c;
  --commerce-panel: #101218;
  --commerce-panel-raised: #151821;
  --commerce-line: rgba(226, 232, 255, .12);
  --commerce-line-strong: rgba(174, 188, 255, .28);
  --commerce-text: #f7f8fc;
  --commerce-muted: #969dad;
  --commerce-accent: #9ba8ff;
  --commerce-cyan: #69d9e7;
  --commerce-success: #83d4b2;
  --commerce-danger: #ff9aa9;
}

.commerce-page {
  min-width: 0;
  overflow-x: hidden;
  color: var(--commerce-text) !important;
  background:
    radial-gradient(ellipse 72% 34% at 50% -8%, rgba(137, 147, 255, .13), transparent 70%),
    linear-gradient(180deg, #090a0f 0%, var(--commerce-bg) 48%, #080a0e 100%) !important;
}

.commerce-page :where(button, input, a) {
  font: inherit;
}

.commerce-page :where(button, a, input):focus-visible {
  outline: 2px solid var(--commerce-cyan) !important;
  outline-offset: 2px !important;
}

.commerce-page :is(.token-topbar, .subscription-topbar, .account-topbar) {
  position: sticky !important;
  top: 10px !important;
  z-index: 40 !important;
  width: min(1200px, calc(100% - 32px)) !important;
  min-height: 56px !important;
  margin: 12px auto 0 !important;
  padding: 7px 8px !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 8px !important;
  background: rgba(9, 10, 14, .86) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
}

.commerce-page :is(.token-brand, .subscription-brand, .account-brand) {
  gap: 9px !important;
  min-width: 0 !important;
  color: var(--commerce-text) !important;
}

.commerce-page :is(.token-brand, .subscription-brand, .account-brand) > span {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  border: 1px solid rgba(155, 168, 255, .28) !important;
  border-radius: 6px !important;
  color: var(--commerce-accent) !important;
  background: rgba(155, 168, 255, .08) !important;
}

.commerce-page :is(.token-brand, .subscription-brand, .account-brand) > span img {
  width: 21px !important;
  height: 21px !important;
  display: block !important;
}

.commerce-page :is(.token-brand, .subscription-brand, .account-brand) strong {
  font-size: 14px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

.commerce-page :is(.token-topbar, .subscription-topbar, .account-topbar) nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 2px !important;
  flex-wrap: nowrap !important;
  padding: 3px !important;
  border: 1px solid rgba(226, 232, 255, .09) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, .025) !important;
}

.commerce-page :is(.token-topbar, .subscription-topbar, .account-topbar) nav a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 0 11px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  color: var(--commerce-muted) !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  transform: none !important;
  transition: color .18s ease, background .18s ease, border-color .18s ease !important;
}

.commerce-page :is(.token-topbar, .subscription-topbar, .account-topbar) nav a:hover {
  color: var(--commerce-text) !important;
  border-color: var(--commerce-line) !important;
  background: rgba(255, 255, 255, .045) !important;
}

.commerce-page :is(.token-topbar, .subscription-topbar, .account-topbar) nav a.is-active {
  color: var(--commerce-text) !important;
  border-color: rgba(155, 168, 255, .38) !important;
  background: rgba(155, 168, 255, .12) !important;
  box-shadow: inset 0 0 0 1px rgba(155, 168, 255, .08) !important;
}

.commerce-page :is(.token-shell, .subscription-shell, .account-shell) {
  width: min(1200px, calc(100% - 32px)) !important;
  margin: 18px auto 52px !important;
  padding-top: 0 !important;
}

.commerce-page :is(.eyebrow, .panel-head p, .ledger-head p, .checkout-main p) {
  color: var(--commerce-cyan) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
}

.commerce-page :is(.panel-head, .ledger-head) h2 {
  color: var(--commerce-text) !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

.commerce-page :is(.panel-head, .ledger-head) > span,
.commerce-page :is(.panel-head, .ledger-head) small {
  color: var(--commerce-muted) !important;
}

/* Charge */
.charge-page .charge-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr) !important;
  gap: 22px !important;
  align-items: stretch !important;
  min-height: 0 !important;
  margin: 0 0 12px !important;
  padding: 22px 24px !important;
  overflow: hidden !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 8px !important;
  background: linear-gradient(115deg, rgba(155, 168, 255, .07), transparent 44%), var(--commerce-panel) !important;
  box-shadow: none !important;
}

.charge-page .charge-hero .hero-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  padding: 2px 0 !important;
}

.charge-page .hero-copy h1 {
  margin: 6px 0 10px !important;
  color: var(--commerce-text) !important;
  font-size: clamp(34px, 4vw, 52px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.charge-page .hero-text {
  max-width: 56ch !important;
  margin: 0 !important;
  color: var(--commerce-muted) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  word-break: keep-all !important;
}

.charge-page .hero-facts {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 18px 0 0 !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--commerce-line) !important;
}

.charge-page .hero-facts span {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-left: 1px solid var(--commerce-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.charge-page .hero-facts span:first-child {
  padding-left: 0 !important;
  border-left: 0 !important;
}

.charge-page .hero-facts b {
  color: var(--commerce-text) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.charge-page .hero-facts small {
  color: var(--commerce-muted) !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}

.charge-page .token-stage {
  display: block !important;
  min-width: 0 !important;
}

.charge-page .stage-dashboard {
  height: 100% !important;
  min-height: 178px !important;
  padding: 14px !important;
  border: 1px solid var(--commerce-line-strong) !important;
  border-radius: 8px !important;
  background: rgba(7, 9, 14, .64) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.charge-page .stage-dashboard-head {
  margin-bottom: 12px !important;
}

.charge-page .stage-dashboard-head em {
  color: var(--commerce-success) !important;
  border-color: rgba(131, 212, 178, .28) !important;
  background: rgba(131, 212, 178, .08) !important;
}

.charge-page .stage-dashboard-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(110px, .6fr) !important;
  gap: 8px !important;
}

.charge-page :is(.stage-balance-card, .stage-purchase-card) {
  min-height: 70px !important;
  padding: 11px !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .035) !important;
}

.charge-page .stage-balance-card strong {
  font-size: 24px !important;
}

.charge-page .stage-purchase-card strong {
  font-size: 14px !important;
}

.charge-page .stage-mini-packages {
  gap: 5px !important;
  margin-top: 9px !important;
}

.charge-page .stage-mini-packages span {
  min-height: 24px !important;
  border-radius: 5px !important;
  color: var(--commerce-muted) !important;
  background: rgba(255, 255, 255, .035) !important;
}

.charge-page .stage-mini-packages span.is-active {
  color: var(--commerce-text) !important;
  border-color: rgba(105, 217, 231, .32) !important;
  background: rgba(105, 217, 231, .09) !important;
}

.charge-page .stage-timeline {
  margin-top: 8px !important;
}

.charge-page .charge-console {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 340px !important;
  gap: 12px !important;
  align-items: stretch !important;
  margin: 0 !important;
}

.charge-page .charge-console > .charge-panel {
  height: 100% !important;
}

.charge-page :is(.charge-panel, .token-ledger) {
  min-width: 0 !important;
  padding: 17px !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 8px !important;
  background: var(--commerce-panel) !important;
  box-shadow: none !important;
}

.charge-page .payment-panel {
  position: sticky !important;
  top: 80px !important;
}

.charge-page .panel-head {
  min-height: 0 !important;
  margin: 0 0 13px !important;
  padding: 0 !important;
  border: 0 !important;
}

.charge-page .panel-head p {
  margin-bottom: 5px !important;
}

.charge-page .panel-head h2 {
  margin: 0 !important;
  font-size: 21px !important;
}

.charge-page .panel-head > span {
  padding: 5px 8px !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 5px !important;
  color: var(--commerce-muted) !important;
  background: rgba(255, 255, 255, .025) !important;
  font-size: 10px !important;
}

.charge-page .package-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.charge-page .package-card {
  position: relative !important;
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
  gap: 4px !important;
  min-width: 0 !important;
  min-height: 78px !important;
  padding: 11px !important;
  overflow: hidden !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 7px !important;
  color: var(--commerce-text) !important;
  background: var(--commerce-panel-raised) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .18s ease, background .18s ease !important;
}

.charge-page .package-card:hover,
.charge-page .package-card:focus-visible {
  border-color: var(--commerce-line-strong) !important;
  background: #191c25 !important;
}

.charge-page .package-card.is-selected,
.charge-page .package-card[aria-pressed="true"] {
  border-color: rgba(155, 168, 255, .58) !important;
  background: rgba(155, 168, 255, .10) !important;
  box-shadow: inset 3px 0 0 var(--commerce-accent) !important;
}

.charge-page .package-card span {
  color: var(--commerce-muted) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

.charge-page .package-card strong {
  max-width: 100% !important;
  overflow: hidden !important;
  color: var(--commerce-text) !important;
  font-size: clamp(14px, 1.35vw, 18px) !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.charge-page .package-card small {
  color: var(--commerce-muted) !important;
  font-size: 10px !important;
}

.charge-page .custom-token {
  display: grid !important;
  grid-template-columns: auto 126px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 52px !important;
  margin-top: 8px !important;
  padding: 7px 9px !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, .025) !important;
}

.charge-page .custom-token span {
  color: var(--commerce-text) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.charge-page .custom-token input {
  width: 100% !important;
  height: 38px !important;
  padding: 0 10px !important;
  border: 1px solid var(--commerce-line-strong) !important;
  border-radius: 5px !important;
  color: var(--commerce-text) !important;
  background: #090b11 !important;
  text-align: right !important;
}

.charge-page .custom-token em {
  justify-self: end !important;
  color: var(--commerce-muted) !important;
  font-size: 10px !important;
}

.charge-page .summary-card {
  display: grid !important;
  gap: 6px !important;
}

.charge-page .summary-card div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 50px !important;
  padding: 10px 11px !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .03) !important;
}

.charge-page .summary-card div:nth-child(2) {
  border-color: rgba(105, 217, 231, .26) !important;
  background: rgba(105, 217, 231, .06) !important;
}

.charge-page .summary-card span {
  color: var(--commerce-muted) !important;
  font-size: 10px !important;
}

.charge-page .summary-card strong {
  min-width: 0 !important;
  color: var(--commerce-text) !important;
  font-size: 15px !important;
  text-align: right !important;
  white-space: nowrap !important;
}

.charge-page .summary-card div:nth-child(2) strong,
.charge-page .summary-card div:nth-child(2) b {
  color: var(--commerce-cyan) !important;
}

.charge-page .meter {
  height: 3px !important;
  margin: 12px 0 !important;
  background: rgba(255, 255, 255, .08) !important;
}

.charge-page .method-group {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

.charge-page .method-chip {
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 0 6px !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 6px !important;
  color: var(--commerce-muted) !important;
  background: transparent !important;
  font-size: 10px !important;
}

.charge-page .method-chip.is-selected,
.charge-page .method-chip[aria-pressed="true"] {
  color: var(--commerce-text) !important;
  border-color: rgba(155, 168, 255, .5) !important;
  background: rgba(155, 168, 255, .09) !important;
}

.charge-page .pay-button {
  min-height: 46px !important;
  margin-top: 10px !important;
  border: 1px solid #eef0f7 !important;
  border-radius: 6px !important;
  color: #090a0f !important;
  background: #eef0f7 !important;
  box-shadow: none !important;
}

.charge-page .pay-button:hover,
.charge-page .pay-button:focus-visible {
  color: var(--commerce-text) !important;
  border-color: var(--commerce-accent) !important;
  background: rgba(155, 168, 255, .12) !important;
}

.charge-page .payment-note {
  margin: 9px 0 0 !important;
  color: var(--commerce-muted) !important;
  font-size: 10px !important;
  line-height: 1.55 !important;
}

.charge-page .charge-policy-links {
  gap: 12px !important;
  margin-top: 9px !important;
}

.charge-page .charge-policy-links a {
  padding: 0 0 2px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(155, 168, 255, .35) !important;
  border-radius: 0 !important;
  color: var(--commerce-accent) !important;
  background: transparent !important;
  font-size: 10px !important;
}

.charge-page .token-ledger {
  margin-top: 12px !important;
}

.charge-page .ledger-head {
  align-items: center !important;
  margin-bottom: 10px !important;
}

.charge-page .ledger-title > span {
  color: var(--commerce-muted) !important;
  font-size: 11px !important;
}

.charge-page .ledger-metrics span,
.charge-page :is(.ledger-empty, .ledger-item) {
  border-radius: 6px !important;
  background: var(--commerce-panel-raised) !important;
}

.charge-page :is(.ledger-empty, .ledger-item) {
  min-height: 58px !important;
}

/* Subscriptions */
.subscriptions-page .subscription-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 410px) !important;
  gap: 16px !important;
  align-items: stretch !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  overflow: visible !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 8px !important;
  background: linear-gradient(115deg, rgba(105, 217, 231, .055), transparent 42%), var(--commerce-panel) !important;
  box-shadow: none !important;
}

.subscriptions-page .subscription-hero .hero-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 0 !important;
}

.subscriptions-page .subscription-hero h1 {
  margin: 5px 0 7px !important;
  color: var(--commerce-text) !important;
  font-size: clamp(30px, 3.1vw, 40px) !important;
  line-height: 1.06 !important;
  letter-spacing: 0 !important;
}

.subscriptions-page .subscription-hero .hero-text {
  max-width: 56ch !important;
  margin: 0 !important;
  color: var(--commerce-muted) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.subscriptions-page .account-strip {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, .8fr)) !important;
  gap: 6px !important;
  min-height: 0 !important;
}

.subscriptions-page .account-strip span {
  position: static !important;
  display: grid !important;
  align-content: center !important;
  gap: 5px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 64px !important;
  height: auto !important;
  padding: 10px !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .028) !important;
  transform: none !important;
}

.subscriptions-page .account-strip small {
  color: var(--commerce-muted) !important;
  font-size: 9px !important;
}

.subscriptions-page .account-strip b,
.subscriptions-page .account-strip em {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--commerce-text) !important;
  font-size: 12px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.subscriptions-page .subscription-command {
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  gap: 7px !important;
  margin-top: 10px !important;
  padding: 8px !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 8px !important;
  background: rgba(16, 18, 24, .82) !important;
  box-shadow: none !important;
}

.subscriptions-page .subscription-steps {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding: 0 7px !important;
}

.subscriptions-page .subscription-steps span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  color: var(--commerce-muted) !important;
}

.subscriptions-page .subscription-steps span b {
  display: grid !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 50% !important;
  color: var(--commerce-muted) !important;
  background: transparent !important;
  font-size: 9px !important;
}

.subscriptions-page .subscription-steps span.is-active b {
  color: #090a0f !important;
  border-color: var(--commerce-accent) !important;
  background: var(--commerce-accent) !important;
}

.subscriptions-page .subscription-steps em {
  color: inherit !important;
  font-size: 9px !important;
  font-style: normal !important;
  white-space: nowrap !important;
}

.subscriptions-page .subscription-steps > i {
  flex: 1 !important;
  height: 1px !important;
  min-width: 8px !important;
  background: var(--commerce-line) !important;
}

.subscriptions-page .plan-shortcuts {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

.subscriptions-page .plan-shortcuts button {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 5px 8px !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 6px !important;
  color: var(--commerce-muted) !important;
  background: var(--commerce-panel-raised) !important;
  box-shadow: none !important;
  transform: none !important;
}

.subscriptions-page .plan-shortcuts button:hover {
  border-color: var(--commerce-line-strong) !important;
}

.subscriptions-page .plan-shortcuts button[aria-pressed="true"] {
  color: var(--commerce-text) !important;
  border-color: rgba(155, 168, 255, .56) !important;
  background: rgba(155, 168, 255, .10) !important;
  box-shadow: inset 2px 0 0 var(--commerce-accent) !important;
}

.subscriptions-page .plan-shortcuts button span {
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 5px !important;
  color: inherit !important;
  font-size: 9px !important;
}

.subscriptions-page .plan-shortcuts button b {
  color: inherit !important;
  font-size: 11px !important;
  text-align: left !important;
}

.subscriptions-page .plan-shortcuts button small {
  display: none !important;
}

.subscriptions-page .selection-summary {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(180px, 1.25fr) repeat(3, minmax(100px, .62fr)) 82px !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 6px !important;
  background: transparent !important;
}

.subscriptions-page .selection-summary > :is(div, span, em) {
  display: grid !important;
  align-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 7px 10px !important;
  border: 0 !important;
  border-left: 1px solid var(--commerce-line) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, .018) !important;
}

.subscriptions-page .selection-summary > div {
  border-left: 0 !important;
}

.subscriptions-page .selection-summary small {
  color: var(--commerce-muted) !important;
  font-size: 8px !important;
}

.subscriptions-page .selection-summary :is(strong, b) {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--commerce-text) !important;
  font-size: 10px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.subscriptions-page .selection-summary > em {
  place-items: center !important;
  color: var(--commerce-danger) !important;
  font-size: 9px !important;
  font-style: normal !important;
  white-space: nowrap !important;
}

.subscriptions-page .selection-summary[data-selection-state="ready"] > em {
  color: var(--commerce-success) !important;
}

.subscriptions-page .subscription-dashboard {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 322px !important;
  grid-template-areas:
    "status status"
    "catalog summary"
    "ledger ledger" !important;
  gap: 10px !important;
  align-items: start !important;
  margin-top: 10px !important;
}

.subscriptions-page :is(.status-panel, .catalog-panel, .checkout-panel, .subscription-ledger) {
  min-width: 0 !important;
  padding: 15px !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 8px !important;
  background: var(--commerce-panel) !important;
  box-shadow: none !important;
}

.subscriptions-page .status-panel {
  grid-area: status !important;
}

.subscriptions-page .catalog-panel {
  grid-area: catalog !important;
}

.subscriptions-page .summary-stack {
  grid-area: summary !important;
  position: sticky !important;
  top: 80px !important;
  display: block !important;
  min-width: 0 !important;
}

.subscriptions-page .subscription-stage {
  display: none !important;
}

.subscriptions-page .checkout-panel {
  padding: 15px !important;
}

.subscriptions-page .subscription-ledger {
  grid-area: ledger !important;
}

.subscriptions-page :is(.status-panel, .catalog-panel, .checkout-panel, .subscription-ledger) .panel-head,
.subscriptions-page .ledger-head {
  min-height: 0 !important;
  margin: 0 0 11px !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid var(--commerce-line) !important;
}

.subscriptions-page .active-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  max-height: none !important;
  overflow: visible !important;
}

.subscriptions-page .empty-card--status {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  grid-template-areas: "kicker copy actions" "kicker detail actions" !important;
  align-items: center !important;
  gap: 2px 12px !important;
  min-height: 54px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .025) !important;
  text-align: left !important;
}

.subscriptions-page .empty-card--status .empty-kicker {
  grid-area: kicker !important;
  color: var(--commerce-cyan) !important;
  font-size: 9px !important;
}

.subscriptions-page .empty-card--status b {
  grid-area: copy !important;
  color: var(--commerce-text) !important;
  font-size: 12px !important;
}

.subscriptions-page .empty-card--status small {
  grid-area: detail !important;
  color: var(--commerce-muted) !important;
  font-size: 9px !important;
}

.subscriptions-page .empty-card--status .empty-actions {
  grid-area: actions !important;
  display: flex !important;
  gap: 5px !important;
  margin: 0 !important;
}

.subscriptions-page .empty-card--status .empty-actions a,
.subscriptions-page .status-panel > .panel-head > span {
  min-height: 28px !important;
  padding: 0 9px !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 5px !important;
  color: var(--commerce-muted) !important;
  background: transparent !important;
  font-size: 9px !important;
}

.subscriptions-page .active-card {
  min-width: 0 !important;
  min-height: 68px !important;
  padding: 10px !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 6px !important;
  background: var(--commerce-panel-raised) !important;
}

.subscriptions-page .program-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
}

.subscriptions-page .program-card,
.subscriptions-page .program-card:not(.is-selected):not([aria-selected="true"]),
.subscriptions-page .program-card.is-selected,
.subscriptions-page .program-card[aria-selected="true"] {
  display: grid !important;
  grid-template-columns: minmax(170px, .9fr) minmax(126px, .64fr) minmax(240px, 1.25fr) 72px !important;
  grid-template-areas: "head limit plans action" !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  min-height: 84px !important;
  padding: 10px !important;
  overflow: hidden !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 7px !important;
  background: var(--commerce-panel-raised) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .18s ease, background .18s ease !important;
}

.subscriptions-page .program-card:hover,
.subscriptions-page .program-card:focus-within {
  border-color: var(--commerce-line-strong) !important;
  background: #191c25 !important;
}

.subscriptions-page .program-card.is-selected,
.subscriptions-page .program-card[aria-selected="true"] {
  border-color: rgba(155, 168, 255, .56) !important;
  background: rgba(155, 168, 255, .085) !important;
  box-shadow: inset 3px 0 0 var(--commerce-accent) !important;
}

.subscriptions-page .program-card::before,
.subscriptions-page .program-card::after,
.subscriptions-page .program-card > p,
.subscriptions-page .program-insight {
  display: none !important;
}

.subscriptions-page .program-card-head {
  grid-area: head !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
}

.subscriptions-page .program-card-head > span:first-child,
.subscriptions-page .program-card-head > span {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border: 1px solid rgba(155, 168, 255, .28) !important;
  border-radius: 6px !important;
  color: var(--commerce-accent) !important;
  background: rgba(155, 168, 255, .075) !important;
  box-shadow: none !important;
}

.subscriptions-page .program-card-head > span svg {
  width: 18px !important;
  height: 18px !important;
  color: inherit !important;
  stroke-width: 2 !important;
}

.subscriptions-page .program-card-head > div {
  min-width: 0 !important;
}

.subscriptions-page .program-card-head small {
  display: block !important;
  overflow: hidden !important;
  color: var(--commerce-muted) !important;
  font-size: 8px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.subscriptions-page .program-card-head h3,
.subscriptions-page .program-card h3 {
  margin: 2px 0 0 !important;
  overflow: hidden !important;
  color: var(--commerce-text) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.subscriptions-page .program-card-head em {
  display: none !important;
}

.subscriptions-page .limit-line.program-limit-note {
  grid-area: limit !important;
  display: grid !important;
  align-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 7px 9px !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .025) !important;
}

.subscriptions-page .program-limit-note b {
  overflow: hidden !important;
  color: var(--commerce-text) !important;
  font-size: 10px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.subscriptions-page .program-limit-note small {
  display: block !important;
  overflow: hidden !important;
  color: var(--commerce-muted) !important;
  font-size: 8px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.subscriptions-page .program-card .plan-grid {
  grid-area: plans !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.subscriptions-page .program-card .plan-button {
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 4px 3px !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 5px !important;
  color: var(--commerce-muted) !important;
  background: rgba(255, 255, 255, .028) !important;
  box-shadow: none !important;
}

.subscriptions-page .program-card .plan-button span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: 8px !important;
}

.subscriptions-page .program-card .plan-button span i {
  display: none !important;
}

.subscriptions-page .program-card .plan-button b {
  color: var(--commerce-text) !important;
  font-size: 10px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

.subscriptions-page .program-card .plan-button .plan-limit {
  display: block !important;
  color: var(--commerce-muted) !important;
  font-size: 7px !important;
  line-height: 1 !important;
}

.subscriptions-page .program-card .plan-button.is-selected,
.subscriptions-page .program-card .plan-button[aria-pressed="true"] {
  color: var(--commerce-text) !important;
  border-color: rgba(105, 217, 231, .45) !important;
  background: rgba(105, 217, 231, .09) !important;
  box-shadow: none !important;
}

.subscriptions-page .program-card .plan-button.is-selected :is(span, b, .plan-limit),
.subscriptions-page .program-card .plan-button[aria-pressed="true"] :is(span, b, .plan-limit) {
  color: var(--commerce-text) !important;
  background: transparent !important;
}

.subscriptions-page .program-foot {
  grid-area: action !important;
  display: block !important;
}

.subscriptions-page .program-foot button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 0 5px !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 5px !important;
  color: var(--commerce-muted) !important;
  background: transparent !important;
  font-size: 9px !important;
}

.subscriptions-page .program-card.is-selected .program-foot button,
.subscriptions-page .program-card[aria-selected="true"] .program-foot button {
  color: #090a0f !important;
  border-color: #eef0f7 !important;
  background: #eef0f7 !important;
}

.subscriptions-page .checkout-main h2 {
  margin: 5px 0 12px !important;
  color: var(--commerce-text) !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
}

.subscriptions-page .checkout-main h2 small {
  color: var(--commerce-muted) !important;
  font-size: 11px !important;
}

.subscriptions-page .checkout-facts {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

.subscriptions-page .checkout-facts span {
  display: grid !important;
  align-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  min-height: 52px !important;
  padding: 8px 9px !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .028) !important;
}

.subscriptions-page .checkout-facts span:first-child {
  grid-column: 1 / -1 !important;
}

.subscriptions-page .checkout-facts small {
  color: var(--commerce-muted) !important;
  font-size: 8px !important;
}

.subscriptions-page .checkout-facts :is(b, em) {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--commerce-text) !important;
  font-size: 11px !important;
  font-style: normal !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.subscriptions-page .checkout-facts span:first-child b {
  font-size: 17px !important;
}

.subscriptions-page .checkout-shortfall:not([hidden]) :is(b, em) {
  color: var(--commerce-danger) !important;
}

.subscriptions-page .checkout-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  margin-top: 9px !important;
}

.subscriptions-page .checkout-actions :is(.charge-link, .subscribe-button) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-height: 42px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-size: 11px !important;
}

.subscriptions-page .checkout-actions .charge-link {
  color: var(--commerce-accent) !important;
  border: 1px solid rgba(155, 168, 255, .34) !important;
  background: rgba(155, 168, 255, .07) !important;
}

.subscriptions-page .checkout-actions .subscribe-button {
  color: #090a0f !important;
  border: 1px solid #eef0f7 !important;
  background: #eef0f7 !important;
}

.subscriptions-page .subscription-policy-note {
  margin: 9px 0 0 !important;
  color: var(--commerce-muted) !important;
  font-size: 9px !important;
  line-height: 1.55 !important;
}

.subscriptions-page .subscription-policy-note a {
  margin-left: 5px !important;
  color: var(--commerce-accent) !important;
}

.subscriptions-page .subscription-ledger .ledger-list {
  max-height: 210px !important;
  overflow: auto !important;
}

.subscriptions-page .subscription-ledger :is(.empty-card, .ledger-item) {
  min-height: 54px !important;
  border-radius: 6px !important;
  background: var(--commerce-panel-raised) !important;
}

/* Account */
.account-page .dashboard-hero {
  grid-template-columns: minmax(0, 1fr) 292px !important;
  gap: 10px !important;
  margin: 0 0 10px !important;
}

.account-page .dashboard-hero > div,
.account-page .account-card,
.account-page .metric-grid article,
.account-page .panel {
  border: 1px solid var(--commerce-line) !important;
  border-radius: 8px !important;
  background: var(--commerce-panel) !important;
  box-shadow: none !important;
}

.account-page .dashboard-hero > div {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 132px !important;
  padding: 20px !important;
  background: linear-gradient(115deg, rgba(105, 217, 231, .055), transparent 46%), var(--commerce-panel) !important;
}

.account-page h1 {
  margin: 4px 0 7px !important;
  color: var(--commerce-text) !important;
  font-size: clamp(30px, 3.1vw, 40px) !important;
  line-height: 1.06 !important;
  letter-spacing: 0 !important;
}

.account-page .hero-copy {
  margin: 0 !important;
  color: var(--commerce-muted) !important;
  font-size: 12px !important;
}

.account-page .account-card {
  justify-content: center !important;
  min-height: 132px !important;
  padding: 16px !important;
  background: rgba(155, 168, 255, .055) !important;
}

.account-page .account-card > span,
.account-page .account-card small {
  color: var(--commerce-muted) !important;
  font-size: 10px !important;
}

.account-page .account-card strong {
  margin: 5px 0 2px !important;
  overflow: hidden !important;
  color: var(--commerce-text) !important;
  font-size: 18px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.account-page .account-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

.account-page .account-actions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 0 8px !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 5px !important;
  color: var(--commerce-muted) !important;
  background: transparent !important;
  font-size: 10px !important;
  transform: none !important;
}

.account-page .account-actions a:first-child {
  color: var(--commerce-text) !important;
  border-color: rgba(155, 168, 255, .4) !important;
  background: rgba(155, 168, 255, .08) !important;
}

.account-page .metric-grid {
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.account-page .metric-grid article {
  min-height: 82px !important;
  padding: 12px 13px !important;
  overflow: hidden !important;
}

.account-page .metric-grid article::before {
  height: 1px !important;
  background: linear-gradient(90deg, var(--commerce-accent), transparent 72%) !important;
}

.account-page .metric-grid span,
.account-page .metric-grid small {
  color: var(--commerce-muted) !important;
  font-size: 9px !important;
}

.account-page .metric-grid strong {
  margin-top: 7px !important;
  color: var(--commerce-text) !important;
  font-size: clamp(20px, 2vw, 27px) !important;
}

.account-page .dashboard-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, .72fr) !important;
  grid-template-areas:
    "program wallet"
    "program usage"
    "activity activity" !important;
  gap: 8px !important;
  align-items: start !important;
}

.account-page .program-panel {
  grid-area: program !important;
}

.account-page .wallet-panel {
  grid-area: wallet !important;
}

.account-page .usage-panel {
  grid-area: usage !important;
}

.account-page .activity-panel {
  grid-area: activity !important;
}

.account-page .panel {
  min-width: 0 !important;
  padding: 14px !important;
}

.account-page .panel-head {
  align-items: center !important;
  margin: 0 0 10px !important;
  padding-bottom: 9px !important;
  border-bottom: 1px solid var(--commerce-line) !important;
}

.account-page .panel-head p {
  margin-bottom: 4px !important;
}

.account-page .panel-head h2 {
  font-size: 17px !important;
}

.account-page .panel-head a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 0 9px !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 5px !important;
  color: var(--commerce-muted) !important;
  background: transparent !important;
  font-size: 9px !important;
  transform: none !important;
}

.account-page .program-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
}

.account-page .program-row,
.account-page .activity-row {
  min-width: 0 !important;
  min-height: 55px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 6px !important;
  background: var(--commerce-panel-raised) !important;
  transform: none !important;
}

.account-page .program-row {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) auto !important;
  gap: 9px !important;
  align-items: center !important;
}

.account-page .program-row:last-child {
  grid-column: auto !important;
}

.account-page .program-icon {
  width: 36px !important;
  height: 36px !important;
  border-color: rgba(155, 168, 255, .26) !important;
  border-radius: 6px !important;
  color: var(--commerce-accent) !important;
  background: rgba(155, 168, 255, .07) !important;
}

.account-page .program-row > div {
  min-width: 0 !important;
}

.account-page .program-row strong,
.account-page .activity-row strong {
  margin-bottom: 3px !important;
  overflow: hidden !important;
  color: var(--commerce-text) !important;
  font-size: 12px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.account-page .program-row :is(small, em),
.account-page .activity-row small {
  overflow: hidden !important;
  color: var(--commerce-muted) !important;
  font-size: 9px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.account-page .program-row b {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  padding: 5px 7px !important;
  border: 1px solid rgba(131, 212, 178, .24) !important;
  border-radius: 5px !important;
  color: var(--commerce-success) !important;
  background: rgba(131, 212, 178, .07) !important;
  font-size: 8px !important;
}

.account-page .program-row.is-empty b {
  color: var(--commerce-muted) !important;
  border-color: var(--commerce-line) !important;
  background: transparent !important;
}

.account-page .wallet-panel {
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
}

.account-page .wallet-panel .panel-head {
  grid-column: 1 / -1 !important;
}

.account-page .wallet-ring {
  width: 72px !important;
  margin: 0 !important;
  background: conic-gradient(var(--commerce-accent) var(--wallet-deg, 0deg), rgba(255, 255, 255, .07) 0) !important;
}

.account-page .wallet-ring::before {
  inset: 9px !important;
  background: var(--commerce-panel) !important;
}

.account-page .wallet-ring span {
  font-size: 15px !important;
}

.account-page :is(.wallet-lines, .usage-list) {
  gap: 5px !important;
}

.account-page :is(.wallet-lines, .usage-list) span {
  min-height: 34px !important;
  padding: 6px 8px !important;
  border-color: var(--commerce-line) !important;
  border-radius: 5px !important;
  background: rgba(255, 255, 255, .025) !important;
}

.account-page :is(.wallet-lines, .usage-list) small,
.account-page :is(.wallet-lines, .usage-list) b {
  font-size: 9px !important;
}

.account-page .activity-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.account-page .activity-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.account-page .activity-row > div {
  min-width: 0 !important;
}

.account-page .activity-row > span {
  flex: 0 0 auto !important;
  color: var(--commerce-cyan) !important;
  font-size: 9px !important;
}

.account-page .empty-state {
  grid-column: 1 / -1 !important;
  min-height: 72px !important;
  padding: 10px !important;
  border-color: var(--commerce-line) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .02) !important;
}

@media (max-width: 980px) {
  .charge-page .charge-hero,
  .charge-page .charge-console {
    grid-template-columns: 1fr !important;
  }

  .charge-page .token-stage {
    display: none !important;
  }

  .charge-page .payment-panel,
  .subscriptions-page .summary-stack {
    position: static !important;
  }

  .charge-page .charge-console > .charge-panel {
    height: auto !important;
  }

  .subscriptions-page .subscription-dashboard {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "status"
      "catalog"
      "summary"
      "ledger" !important;
  }

  .subscriptions-page .program-card,
  .subscriptions-page .program-card:not(.is-selected):not([aria-selected="true"]),
  .subscriptions-page .program-card.is-selected,
  .subscriptions-page .program-card[aria-selected="true"] {
    grid-template-columns: minmax(155px, .85fr) minmax(110px, .55fr) minmax(220px, 1.2fr) 68px !important;
  }

  .account-page .dashboard-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "program"
      "wallet"
      "usage"
      "activity" !important;
  }

  .account-page .program-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .commerce-page :is(.token-topbar, .subscription-topbar, .account-topbar) {
    top: 7px !important;
    width: calc(100% - 16px) !important;
    min-height: 50px !important;
    margin-top: 7px !important;
    padding: 5px 6px !important;
  }

  .commerce-page :is(.token-brand, .subscription-brand, .account-brand) > span {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }

  .commerce-page :is(.token-brand, .subscription-brand, .account-brand) strong {
    display: none !important;
  }

  .commerce-page :is(.token-topbar, .subscription-topbar, .account-topbar) nav {
    flex: 1 !important;
    padding: 2px !important;
  }

  .commerce-page :is(.token-topbar, .subscription-topbar, .account-topbar) nav a {
    flex: 1 1 0 !important;
    min-height: 34px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }

  .commerce-page :is(.token-shell, .subscription-shell, .account-shell) {
    width: calc(100% - 16px) !important;
    margin: 12px auto 34px !important;
    padding-top: 0 !important;
  }

  .charge-page .charge-hero {
    display: block !important;
    padding: 17px !important;
  }

  .charge-page .hero-copy h1 {
    margin-top: 5px !important;
    font-size: clamp(28px, 8vw, 36px) !important;
  }

  .charge-page .hero-text {
    font-size: 11px !important;
    line-height: 1.55 !important;
  }

  .charge-page .hero-facts {
    margin-top: 14px !important;
    padding-top: 10px !important;
  }

  .charge-page .hero-facts span {
    min-height: 0 !important;
    padding: 0 7px !important;
  }

  .charge-page .hero-facts b {
    font-size: 9px !important;
  }

  .charge-page .hero-facts small {
    font-size: 8px !important;
  }

  .charge-page :is(.charge-panel, .token-ledger) {
    padding: 13px !important;
  }

  .charge-page .package-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .charge-page .package-card {
    min-height: 68px !important;
    padding: 9px !important;
  }

  .charge-page .package-card strong {
    font-size: 14px !important;
  }

  .charge-page .custom-token {
    grid-template-columns: auto minmax(82px, 1fr) !important;
    gap: 7px !important;
  }

  .charge-page .custom-token em {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
  }

  .charge-page .ledger-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .subscriptions-page .subscription-hero {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 15px !important;
  }

  .subscriptions-page .subscription-hero h1 {
    font-size: 29px !important;
  }

  .subscriptions-page .account-strip span {
    min-height: 51px !important;
    padding: 8px !important;
  }

  .subscriptions-page .account-strip small {
    font-size: 8px !important;
  }

  .subscriptions-page .account-strip b,
  .subscriptions-page .account-strip em {
    font-size: 10px !important;
  }

  .subscriptions-page .subscription-command {
    grid-template-columns: 1fr !important;
    padding: 7px !important;
  }

  .subscriptions-page .selection-summary {
    grid-template-columns: minmax(0, 1fr) 84px 70px !important;
  }

  .subscriptions-page .selection-summary > div {
    grid-column: auto !important;
  }

  .subscriptions-page .selection-summary > span:nth-of-type(2),
  .subscriptions-page .selection-summary > span:nth-of-type(3) {
    display: none !important;
  }

  .subscriptions-page :is(.status-panel, .catalog-panel, .checkout-panel, .subscription-ledger) {
    padding: 12px !important;
  }

  .subscriptions-page .active-list {
    grid-template-columns: 1fr !important;
  }

  .subscriptions-page .empty-card--status {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "copy actions" "detail actions" !important;
  }

  .subscriptions-page .empty-card--status .empty-kicker {
    display: none !important;
  }

  .subscriptions-page .program-card,
  .subscriptions-page .program-card:not(.is-selected):not([aria-selected="true"]),
  .subscriptions-page .program-card.is-selected,
  .subscriptions-page .program-card[aria-selected="true"] {
    grid-template-columns: minmax(0, 1fr) 68px !important;
    grid-template-areas:
      "head action"
      "limit limit"
      "plans plans" !important;
    gap: 7px !important;
    min-height: 0 !important;
    padding: 9px !important;
  }

  .subscriptions-page .limit-line.program-limit-note {
    min-height: 38px !important;
  }

  .subscriptions-page .program-limit-note small {
    display: none !important;
  }

  .subscriptions-page .program-card .plan-button {
    min-height: 42px !important;
  }

  .subscriptions-page .checkout-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .subscriptions-page .mobile-subscription-bar {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: auto !important;
    min-height: 54px !important;
    padding: 7px !important;
    border: 1px solid var(--commerce-line) !important;
    border-radius: 8px !important;
    background: rgba(9, 10, 14, .94) !important;
  }

  .subscriptions-page .mobile-subscription-bar button {
    min-height: 38px !important;
    border-radius: 6px !important;
  }

  .account-page .dashboard-hero {
    grid-template-columns: 1fr !important;
  }

  .account-page .dashboard-hero > div,
  .account-page .account-card {
    min-height: 0 !important;
    padding: 15px !important;
  }

  .account-page h1 {
    font-size: 29px !important;
  }

  .account-page .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .account-page .metric-grid article {
    min-height: 74px !important;
    padding: 10px !important;
  }

  .account-page .program-list,
  .account-page .activity-list {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 390px) {
  .commerce-page :is(.token-topbar, .subscription-topbar, .account-topbar) nav a {
    gap: 3px !important;
    padding: 0 4px !important;
    font-size: 9px !important;
  }

  .commerce-page :is(.token-topbar, .subscription-topbar, .account-topbar) nav a svg {
    width: 14px !important;
    height: 14px !important;
  }

  .subscriptions-page .selection-summary {
    grid-template-columns: minmax(0, 1fr) 76px !important;
  }

  .subscriptions-page .selection-summary > em {
    display: none !important;
  }

  .subscriptions-page .empty-card--status {
    grid-template-columns: 1fr !important;
    grid-template-areas: "copy" "detail" "actions" !important;
  }

  .subscriptions-page .empty-card--status .empty-actions {
    margin-top: 5px !important;
  }

  .account-page .program-row {
    grid-template-columns: 34px minmax(0, 1fr) !important;
  }

  .account-page .program-row b {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    margin-top: 3px !important;
  }

  .account-page .wallet-panel {
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }

  .account-page .wallet-ring {
    width: 60px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .commerce-page *,
  .commerce-page *::before,
  .commerce-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Subscription selection board */
.subscriptions-page .subscription-topbar,
.subscriptions-page .subscription-shell {
  width: min(1260px, calc(100% - 40px)) !important;
}

.subscriptions-page .subscription-shell {
  margin-top: 20px !important;
}

.subscriptions-page .subscription-hero {
  grid-template-columns: minmax(0, 1fr) 420px !important;
  gap: 20px !important;
  padding: 22px 24px !important;
  border-radius: 10px !important;
  background: linear-gradient(120deg, rgba(155, 168, 255, .075), transparent 46%), #101218 !important;
}

.subscriptions-page .subscription-hero h1 {
  margin: 6px 0 9px !important;
  font-size: clamp(34px, 3.2vw, 44px) !important;
}

.subscriptions-page .subscription-hero .hero-text {
  max-width: 62ch !important;
  font-size: 13px !important;
}

.subscriptions-page .account-strip {
  gap: 8px !important;
}

.subscriptions-page .account-strip span {
  min-height: 72px !important;
  padding: 12px !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, .032) !important;
}

.subscriptions-page .account-strip b,
.subscriptions-page .account-strip em {
  font-size: 13px !important;
}

.subscriptions-page .subscription-command {
  grid-template-columns: 330px minmax(0, 1fr) !important;
  gap: 12px !important;
  margin-top: 12px !important;
  padding: 11px !important;
  border-radius: 10px !important;
  background: #0d0f15 !important;
}

.subscriptions-page .subscription-steps {
  padding: 0 10px !important;
}

.subscriptions-page .subscription-steps span b {
  width: 24px !important;
  height: 24px !important;
  flex-basis: 24px !important;
  border-radius: 6px !important;
}

.subscriptions-page .plan-shortcuts {
  gap: 7px !important;
}

.subscriptions-page .plan-shortcuts button {
  min-height: 46px !important;
  padding: 6px 10px !important;
  border-radius: 7px !important;
  transition: border-color .2s ease, background-color .2s ease, transform .25s ease !important;
}

.subscriptions-page .plan-shortcuts button:hover {
  background: rgba(255, 255, 255, .05) !important;
  transform: translateY(-1px) !important;
}

.subscriptions-page .plan-shortcuts button[aria-pressed="true"] {
  border-color: rgba(105, 217, 231, .48) !important;
  background: rgba(105, 217, 231, .08) !important;
  box-shadow: inset 0 -2px 0 var(--commerce-cyan) !important;
}

.subscriptions-page .selection-summary {
  display: none !important;
}

.subscriptions-page .subscription-dashboard {
  grid-template-columns: minmax(0, 1fr) 340px !important;
  grid-template-areas:
    "catalog summary"
    "status summary"
    "ledger ledger" !important;
  gap: 12px !important;
  margin-top: 12px !important;
}

.subscriptions-page :is(.status-panel, .catalog-panel, .checkout-panel, .subscription-ledger) {
  padding: 18px !important;
  border-radius: 10px !important;
  background: #101218 !important;
}

.subscriptions-page .catalog-panel {
  background: linear-gradient(145deg, rgba(155, 168, 255, .045), transparent 34%), #101218 !important;
}

.subscriptions-page :is(.panel-head, .ledger-head) h2,
.subscriptions-page .checkout-main h2 {
  font-size: 21px !important;
}

.subscriptions-page .panel-head {
  margin-bottom: 16px !important;
  padding-bottom: 13px !important;
}

.subscriptions-page .program-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.subscriptions-page .catalog-panel .program-card,
.subscriptions-page .catalog-panel .program-card:not(.is-selected):not([aria-selected="true"]),
.subscriptions-page .catalog-panel .program-card.is-selected,
.subscriptions-page .catalog-panel .program-card[aria-selected="true"] {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "head action"
    "copy copy"
    "limit limit"
    "plans plans" !important;
  align-content: start !important;
  gap: 12px !important;
  min-height: 232px !important;
  padding: 16px !important;
  overflow: hidden !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, rgba(var(--service-rgb), .055), transparent 42%), #151821 !important;
  transition: border-color .2s ease, background-color .2s ease, transform .3s ease !important;
}

.subscriptions-page .catalog-panel .program-card:hover,
.subscriptions-page .catalog-panel .program-card:focus-within {
  border-color: rgba(226, 232, 255, .24) !important;
  background: linear-gradient(145deg, rgba(var(--service-rgb), .08), transparent 46%), #171a23 !important;
  transform: translateY(-2px) !important;
}

.subscriptions-page .catalog-panel .program-card.is-selected,
.subscriptions-page .catalog-panel .program-card[aria-selected="true"] {
  border-color: rgba(var(--service-rgb), .5) !important;
  background: linear-gradient(145deg, rgba(var(--service-rgb), .115), transparent 52%), #171a23 !important;
  box-shadow: inset 0 3px 0 rgba(var(--service-rgb), .86) !important;
}

.subscriptions-page .catalog-panel .program-card-head {
  grid-area: head !important;
  gap: 11px !important;
}

.subscriptions-page .catalog-panel .program-card-head > span {
  width: 46px !important;
  height: 46px !important;
  flex-basis: 46px !important;
  border-color: rgba(var(--service-rgb), .3) !important;
  border-radius: 8px !important;
  background-color: #090b11 !important;
  background-image: url("../assets/product-selector-atlas-v1.png") !important;
  background-repeat: no-repeat !important;
  background-size: 400% 200% !important;
}

.subscriptions-page .catalog-panel [data-program-card="overview"] .program-card-head > span { background-position: 0 0 !important; }
.subscriptions-page .catalog-panel [data-program-card="overdesk"] .program-card-head > span { background-position: 33.333% 0 !important; }
.subscriptions-page .catalog-panel [data-program-card="overstudio"] .program-card-head > span { background-position: 66.667% 0 !important; }
.subscriptions-page .catalog-panel [data-program-card="overprotect"] .program-card-head > span { background-position: 100% 0 !important; }
.subscriptions-page .catalog-panel [data-program-card="overnet"] .program-card-head > span { background-position: 0 100% !important; }

.subscriptions-page .catalog-panel .program-card-head > span svg {
  opacity: 0 !important;
}

.subscriptions-page .catalog-panel .program-card-head small {
  font-size: 9px !important;
}

.subscriptions-page .catalog-panel .program-card-head h3 {
  margin-top: 3px !important;
  font-size: 17px !important;
}

.subscriptions-page .catalog-panel .program-card > p {
  grid-area: copy !important;
  display: -webkit-box !important;
  min-height: 36px !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--commerce-muted) !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.subscriptions-page .catalog-panel .limit-line.program-limit-note {
  grid-area: limit !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 8px 10px !important;
  border-color: rgba(var(--service-rgb), .18) !important;
  background: rgba(var(--service-rgb), .045) !important;
}

.subscriptions-page .catalog-panel .program-limit-note b {
  font-size: 11px !important;
}

.subscriptions-page .catalog-panel .program-limit-note small {
  max-width: 58% !important;
  font-size: 8px !important;
  text-align: right !important;
}

.subscriptions-page .catalog-panel .program-card .plan-grid {
  grid-area: plans !important;
  gap: 6px !important;
}

.subscriptions-page .catalog-panel .program-card .plan-button {
  min-height: 58px !important;
  gap: 4px !important;
  padding: 6px 4px !important;
  border-radius: 7px !important;
  transition: border-color .18s ease, background-color .18s ease, transform .2s ease !important;
}

.subscriptions-page .catalog-panel .program-card .plan-button:hover {
  border-color: rgba(var(--service-rgb), .34) !important;
  transform: translateY(-1px) !important;
}

.subscriptions-page .catalog-panel .program-card .plan-button span {
  font-size: 9px !important;
}

.subscriptions-page .catalog-panel .program-card .plan-button span i {
  display: inline-flex !important;
  padding: 2px 4px !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, .07) !important;
  font-size: 6px !important;
  font-style: normal !important;
}

.subscriptions-page .catalog-panel .program-card .plan-button b {
  font-size: 11px !important;
}

.subscriptions-page .catalog-panel .program-card .plan-button .plan-limit {
  display: block !important;
  font-size: 8px !important;
}

.subscriptions-page .catalog-panel .program-card .plan-button.is-selected,
.subscriptions-page .catalog-panel .program-card .plan-button[aria-pressed="true"] {
  border-color: rgba(var(--service-rgb), .56) !important;
  background: rgba(var(--service-rgb), .11) !important;
  box-shadow: inset 0 -2px 0 rgba(var(--service-rgb), .8) !important;
}

.subscriptions-page .catalog-panel .program-foot {
  grid-area: action !important;
  align-self: center !important;
}

.subscriptions-page .catalog-panel .program-foot button {
  width: 76px !important;
  min-height: 34px !important;
  border-radius: 6px !important;
}

.subscriptions-page .catalog-panel .program-card.is-selected .program-foot button,
.subscriptions-page .catalog-panel .program-card[aria-selected="true"] .program-foot button {
  color: var(--commerce-text) !important;
  border-color: rgba(var(--service-rgb), .48) !important;
  background: rgba(var(--service-rgb), .12) !important;
}

.subscriptions-page .summary-stack {
  top: 82px !important;
}

.subscriptions-page .checkout-panel {
  padding: 19px !important;
  border-color: rgba(155, 168, 255, .26) !important;
  background: linear-gradient(155deg, rgba(155, 168, 255, .065), transparent 42%), #101218 !important;
}

.subscriptions-page .checkout-main h2 {
  margin: 6px 0 16px !important;
  font-size: 26px !important;
}

.subscriptions-page .checkout-facts {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  border-top: 1px solid var(--commerce-line) !important;
}

.subscriptions-page .checkout-facts span,
.subscriptions-page .checkout-facts span:first-child {
  grid-column: auto !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--commerce-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.subscriptions-page .checkout-facts span:first-child b {
  font-size: 16px !important;
}

.subscriptions-page .checkout-facts :is(b, em) {
  font-size: 11px !important;
  text-align: right !important;
}

.subscriptions-page .checkout-actions {
  grid-template-columns: .9fr 1.1fr !important;
  gap: 7px !important;
  margin-top: 14px !important;
}

.subscriptions-page .checkout-actions :is(.charge-link, .subscribe-button) {
  min-height: 46px !important;
}

.subscriptions-page .status-panel {
  padding-block: 15px !important;
}

.subscriptions-page .active-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.subscriptions-page .subscription-ledger .ledger-list {
  max-height: 180px !important;
}

.subscriptions-page .mobile-subscription-bar {
  display: none !important;
}

@media (max-width: 980px) {
  .subscriptions-page .subscription-dashboard {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "catalog"
      "summary"
      "status"
      "ledger" !important;
  }

  .subscriptions-page .summary-stack {
    position: static !important;
  }
}

@media (max-width: 720px) {
  .subscriptions-page .subscription-topbar,
  .subscriptions-page .subscription-shell {
    width: calc(100% - 16px) !important;
  }

  .subscriptions-page .subscription-hero {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 17px !important;
  }

  .subscriptions-page .subscription-hero h1 {
    font-size: 31px !important;
  }

  .subscriptions-page .account-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .subscriptions-page .account-strip span:first-child {
    grid-column: 1 / -1 !important;
  }

  .subscriptions-page .subscription-command {
    grid-template-columns: 1fr !important;
    padding: 9px !important;
  }

  .subscriptions-page .subscription-steps {
    padding: 3px 5px !important;
  }

  .subscriptions-page .subscription-steps em {
    font-size: 8px !important;
  }

  .subscriptions-page .plan-shortcuts button {
    grid-template-columns: 22px minmax(0, 1fr) !important;
    min-height: 42px !important;
    padding: 5px !important;
  }

  .subscriptions-page .plan-shortcuts button span {
    width: 22px !important;
    height: 22px !important;
  }

  .subscriptions-page :is(.status-panel, .catalog-panel, .checkout-panel, .subscription-ledger) {
    padding: 13px !important;
  }

  .subscriptions-page .program-grid,
  .subscriptions-page .active-list {
    grid-template-columns: 1fr !important;
  }

  .subscriptions-page .catalog-panel .program-card,
  .subscriptions-page .catalog-panel .program-card:not(.is-selected):not([aria-selected="true"]),
  .subscriptions-page .catalog-panel .program-card.is-selected,
  .subscriptions-page .catalog-panel .program-card[aria-selected="true"] {
    min-height: 222px !important;
    padding: 14px !important;
  }

  .subscriptions-page .catalog-panel .program-limit-note small {
    display: block !important;
  }

  .subscriptions-page .catalog-panel .program-card .plan-button {
    min-height: 54px !important;
  }

  .subscriptions-page .checkout-actions {
    grid-template-columns: 1fr 1.15fr !important;
  }
}

@media (max-width: 390px) {
  .subscriptions-page .subscription-steps em {
    display: none !important;
  }

  .subscriptions-page .catalog-panel .program-card-head > span {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }

  .subscriptions-page .catalog-panel .program-card .plan-button span i {
    display: none !important;
  }
}