/* One layout for subscription content; no absolute price/control clusters. */
html body .main-content #sub-list { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
html body .main-content #sub-list .sub-item {
  display: grid !important;
  grid-template-columns: 44px minmax(0,1fr) max-content !important;
  grid-template-rows: auto auto !important;
  grid-template-areas: 'icon details price' 'date details controls' 'actions actions actions' !important;
  gap: 8px 14px !important;
  align-items: center !important;
  padding: 20px 18px 17px !important;
  min-height: 128px !important;
  height: auto;
  position: relative !important;
  overflow: clip !important;
  isolation: isolate;
}
html body .main-content #sub-list .sub-icon-outer {
  grid-area: icon !important; width: 44px !important; height: 44px !important;
  margin: 0 !important; align-self: center !important; border-radius: 13px !important;
}
html body .main-content #sub-list .sub-icon-outer > div { width: 100% !important; height: 100% !important; }
html body .main-content #sub-list .sub-details {
  grid-area: details !important; position: relative !important; inset: auto !important;
  width: auto !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
  align-self: start !important; justify-content: flex-start !important;
  overflow: hidden !important; z-index: 2;
}
html body .main-content #sub-list .sub-details::after { display: none !important; }
html body .main-content #sub-list .sub-details h4 {
  font-size: 17px !important; line-height: 1.45 !important; padding: 0 !important;
  white-space: normal !important; margin: 0 0 4px !important; color: var(--studio-ink) !important;
}
html body .main-content #sub-list .sub-details h4 > span:first-child {
  overflow: hidden !important; text-overflow: ellipsis; white-space: nowrap !important;
}
html body .main-content #sub-list .sub-item.expanded .sub-details h4 > span:first-child {
  white-space: normal !important; overflow-wrap: anywhere;
}
html body .main-content #sub-list .sub-category-row {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important;
  gap: 5px 7px !important; margin: 0 !important; line-height: 1.5 !important;
}
html body .main-content #sub-list .sub-category-row > p { font-size: 12px !important; opacity: 1 !important; }
html body .main-content #sub-list .category-badges { display: flex !important; flex-wrap: wrap; gap: 4px; min-width: 0; }
html body .main-content #sub-list .badge { white-space: normal; }
html body .main-content #sub-list .sub-right { display: contents !important; position: static !important; }
html body .main-content #sub-list .sub-price {
  grid-area: price !important; position: relative !important; inset: auto !important;
  margin: 0 !important; padding: 0 !important; width: auto !important;
  align-self: center !important; text-align: end !important;
  font-size: 25px !important; line-height: 1.1 !important; font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate; z-index: 2;
}
html body .main-content #sub-list .price-cycle {
  display: block !important; margin: 4px 0 0 !important; font-size: 10px !important;
  line-height: 1.3 !important; font-weight: 500 !important; letter-spacing: 0 !important;
  color: var(--studio-secondary) !important;
}
html body .main-content #sub-list .desktop-top-controls,
html body .main-content #sub-list .mobile-actions {
  grid-area: controls !important; position: relative !important; inset: auto !important;
  margin: 0 !important; padding: 0 !important; gap: 5px !important;
  align-items: center !important; justify-content: flex-end !important;
  width: auto !important; height: auto !important; z-index: 3;
}
html body .main-content #sub-list .mobile-actions { display: none !important; }
html body .main-content #sub-list .desktop-top-controls { display: flex !important; }
html body .main-content #sub-list .desktop-bell-strict { display: contents !important; }
html body .main-content #sub-list :is(.bell-indicator,.expand-chevron) {
  position: static !important; inset: auto !important; width: 38px !important; height: 38px !important;
  flex: 0 0 38px !important; display: inline-flex !important; align-items: center !important;
  justify-content: center !important; margin: 0 !important; padding: 0 !important;
  background: var(--studio-accent-soft) !important; border: 1px solid var(--studio-line) !important;
  border-radius: 11px !important; color: var(--studio-secondary) !important; font-size: 19px !important;
  cursor: pointer; transition: background .2s ease,color .2s ease !important;
}
html body .main-content #sub-list :is(.bell-indicator,.expand-chevron):hover {
  background: var(--studio-raised) !important; color: var(--studio-accent) !important;
}
html body .main-content #sub-list .bell-indicator.active { color: var(--studio-accent) !important; }
html body .main-content #sub-list .payment-progress-container { display: contents !important; }
html body .main-content #sub-list .next-date-label {
  grid-area: date !important; position: relative !important; inset: auto !important;
  width: auto !important; margin: 0 !important; padding: 0 !important; align-self: center !important;
  font-size: 10px !important; text-align: center !important; line-height: 1.5 !important;
  color: var(--studio-secondary) !important; opacity: 1 !important; white-space: normal !important;
}
html body .main-content #sub-list .progress-track {
  position: absolute !important; inset: auto 0 0 !important; width: 100% !important;
  height: 3px !important; margin: 0 !important; border-radius: 0 !important;
}
html body .main-content #sub-list .action-buttons { display: none !important; }
html body .main-content #sub-list .sub-item.expanded .action-buttons {
  grid-area: actions !important; position: relative !important; inset: auto !important;
  display: flex !important; justify-content: flex-end !important; align-items: center !important;
  max-height: none !important; height: auto !important; opacity: 1 !important; visibility: visible !important;
  pointer-events: auto !important; transform: none !important;
  border-top: 1px solid var(--studio-line); padding: 12px 0 0 !important; margin: 4px 0 0 !important;
}
html body .main-content #sub-list .expanded-actions { display: flex !important; gap: 9px !important; }
html body .main-content #sub-list .expanded-actions button { width: 44px !important; height: 44px !important; }
html body .main-content #sub-list .notes-text { margin-top: 8px !important; max-width: 100%; }
@media (max-width:1279px) {
  html body .main-content #sub-list { grid-template-columns: minmax(0,1fr) !important; }
}
@media (min-width:600px) and (max-width:900px) {
  html body .main-content #sub-list { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:900px) {
  html body .main-content #sub-list .desktop-top-controls { display: none !important; }
  html body .main-content #sub-list .mobile-actions { display: flex !important; }
  html body .main-content #sub-list .sub-item { gap: 8px 10px !important; padding: 16px 14px !important; }
  html body .main-content #sub-list .sub-details h4 { font-size: 16px !important; }
  html body .main-content #sub-list .sub-price { font-size: 23px !important; }
}
@media (max-width:359px) {
  html body .main-content #sub-list .sub-item { grid-template-columns: 38px minmax(0,1fr) max-content !important; gap: 8px !important; padding-inline: 12px !important; }
  html body .main-content #sub-list .sub-icon-outer { width: 38px !important; height: 38px !important; }
  html body .main-content #sub-list .sub-price { font-size: 21px !important; }
  html body .main-content #sub-list .sub-details h4 { font-size: 14px !important; }
}
@media (prefers-reduced-motion:reduce) {
  html body .main-content #sub-list :is(.sub-item,.bell-indicator,.expand-chevron) { transition: none !important; }
}