.workspace:has(.membership-overdue-notice) { grid-template-columns: minmax(0, 1fr); }
.membership-overdue-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #dba85b;
  border-radius: 14px;
  background: #fff8ed;
  color: #583908;
}
.membership-overdue-notice.is-paused { border-color: #d38d8d; background: #fff2f2; color: #762a2a; }
.membership-overdue-notice strong { font-size: 17px; }
.membership-overdue-notice p { margin: 7px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.membership-overdue-notice > div:first-child { flex: 1; min-width: 0; }
.membership-overdue-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#view-container .membership-overdue-notice .membership-overdue-actions .btn,
#view-container .membership-payment-modal .membership-overdue-actions .btn { min-height: 44px; white-space: normal; }
#view-container .membership-payment-modal { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
#view-container .membership-payment-modal p { line-height: 1.5; }
.membership-payment-amount { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px; border-radius: 10px; background: #fff2f2; color: #762a2a; }
.membership-payment-amount strong { font-size: 24px; }
html[data-theme="dark"] .membership-overdue-notice, body.dark .membership-overdue-notice, body[data-theme="dark"] .membership-overdue-notice {
  background: #352b1d; color: #ffe1ac;
}
html[data-theme="dark"] .membership-overdue-notice.is-paused, body.dark .membership-overdue-notice.is-paused, body[data-theme="dark"] .membership-overdue-notice.is-paused {
  background: #392222; color: #ffcaca;
}
@media (max-width: 768px) {
  .membership-overdue-notice { align-items: stretch; flex-direction: column; gap: 14px; padding: 16px; }
  .membership-overdue-actions .btn { flex: 1 1 150px; }
}