.platform-billing-entry { padding: 15px 20px; border-bottom: 1px solid #e5dfe9; }
.platform-billing-entry > p { color: #8c7a98; font-size: 12px; margin: 0 0 10px; }
.platform-billing-entry > button + p { margin: 8px 0 0; }
.platform-detail-grid[hidden] { display: none; }
.saas-billing { min-width: 0; padding: 22px; color: #302637; }
.saas-billing-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid #e5dfe9; }
.saas-billing-header h2 { font-size: 20px; margin: 10px 0 8px; overflow-wrap: anywhere; }
.saas-billing-header p { color: #7f7188; font-size: 12px; max-width: 70ch; }
.saas-billing-header > button { flex: 0 0 auto; margin-top: 5px; }
.saas-billing-badge { display: inline-flex; align-items: center; gap: 5px; color: #816027; background: #fff8e9; padding: 3px 7px; border: 1px solid #e5d2ae; border-radius: 4px; font-size: 10px; }
.saas-billing-state-line { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 18px 0; color: #8b7c94; font-size: 11px; }
.saas-billing-status { display: inline-flex; padding: 3px 8px; border: 1px solid #d9cee1; border-radius: 4px; color: #795385; background: #f5eef9; }
.saas-billing-status.is-active { color: #4c7148; background: #eff7ee; border-color: #c7dbc5; }
.saas-billing-status:is(.is-grace, .is-hold, .is-expired) { color: #8d6535; background: #fff5e8; border-color: #e7d2b8; }
.saas-billing-columns { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; padding-bottom: 24px; }
.saas-billing-columns > div { min-width: 0; }
.saas-billing h3 { margin: 0 0 17px; font-size: 14px; font-weight: 600; }
.saas-billing-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 20px; margin: 0; }
.saas-billing-facts dt { color: #95859e; font-size: 11px; }
.saas-billing-facts dd { color: #504156; font-size: 12px; margin: 4px 0 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.saas-billing-help { color: #8c7a98; font-size: 11px; line-height: 1.7; margin-top: 13px !important; }
.saas-billing form fieldset { gap: 16px; }
.saas-billing label.saas-billing-check { display: flex; align-items: flex-start; gap: 9px; color: #7a6087; font-size: 12px; line-height: 1.7; }
.saas-billing .saas-billing-check input[type="checkbox"] { appearance: auto; width: 18px; height: 18px; min-height: 18px; flex: 0 0 18px; padding: 0; margin-top: 3px; accent-color: #67406e; }
.saas-billing-error, .saas-billing-recovery, .saas-billing-info, .saas-billing-notice { padding: 13px 15px; border-radius: 5px; margin: 16px 0; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.saas-billing-error { color: #973e49; background: #fff0f2; border: 1px solid #e7c7cc; }
.saas-billing-error button { margin-top: 10px; }
.saas-billing-recovery { color: #896a32; background: #fff8ea; border: 1px solid #e5d1ae; }
.saas-billing-recovery > div { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.saas-billing-recovery dl { display: flex; gap: 24px; margin: 13px 0 0; }
.saas-billing-recovery dt { color: #9a8051; font-size: 10px; }
.saas-billing-recovery dd { margin: 3px 0 0; }
.saas-billing-info { color: #786185; background: #f7f2fa; border: 1px solid #ded2e7; }
.saas-billing-notice { display: flex; align-items: flex-start; gap: 7px; color: #4d7148; background: #f0f7ee; border: 1px solid #ccdec6; }
.saas-billing-notice.is-pending { color: #8b6b32; background: #fff8ea; border-color: #e5d1ae; }
.saas-billing-notice > svg { flex: 0 0 16px; margin-top: 3px; }
.saas-billing-loading { display: flex; justify-content: center; align-items: center; gap: 9px; min-height: 150px; color: #8c7a97; font-size: 13px; }
.saas-billing-empty { padding: 24px 18px; color: #8b7a95; background: #fbf9fc; border: 1px dashed #ded4e5; border-radius: 5px; font-size: 12px; }
.saas-billing-empty button { margin-top: 14px; }
.saas-billing-invoices { padding-top: 22px; border-top: 1px solid #e5dfe9; }
.saas-billing-invoices > div:first-child { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; color: #8e7e98; font-size: 11px; }
.saas-billing-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid #e3dae9; border-radius: 5px; }
.saas-billing table { width: 100%; border-collapse: collapse; min-width: 610px; text-align: left; font-size: 11px; }
.saas-billing th, .saas-billing td { padding: 11px 12px; border-bottom: 1px solid #ece6f0; }
.saas-billing thead th { color: #93819e; background: #faf7fc; font-weight: 500; }
.saas-billing tbody th { max-width: 210px; overflow-wrap: anywhere; font-weight: 400; }
.saas-billing tbody tr:last-child > * { border-bottom: 0; }
.saas-billing-notices { margin-top: 20px; padding-top: 18px; border-top: 1px solid #e5dfe9; color: #8a7596; font-size: 12px; }
.saas-billing-notices summary { cursor: pointer; padding: 4px 0; }
.saas-billing-notices > div { padding: 12px 0; border-bottom: 1px solid #eee7f3; }
.saas-billing-notices > div > span { display: block; color: #ab98b6; font-size: 11px; margin-top: 3px; }
@media (max-width: 800px) {
  .saas-billing-columns { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .saas-billing-header { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .saas-billing { padding: 18px 15px; }
  .saas-billing-header h2 { font-size: 19px; }
  .saas-billing-header > button { width: 100%; }
  .saas-billing-facts { gap: 15px 12px; }
  .saas-billing-recovery > div > button { width: 100%; }
  .saas-billing :is(button, input, select) { min-height: 44px; }
  .saas-billing :is(input, select, textarea) { font-size: 16px; }
  .saas-billing .saas-billing-check { min-height: 44px; }
}