.beta-banner {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: -10px 0 18px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--line, #d8e0f5) 80%, #c9b56a);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card, #fff) 88%, #f4e7b2);
  color: var(--ink, #17213b);
  font-size: 13px;
  line-height: 1.4;
}
.beta-banner[hidden] { display: none !important; }
.beta-banner strong {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: #1d3a8a;
  color: #fff;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.beta-banner span { min-width: 0; }

.sts-meta,
#safeToSpendConfidence,
#safeToSpendAsOf,
#calendarSafeToSpendConfidence,
#calendarSafeToSpendAsOf {
  display: block;
  margin-top: 4px;
  color: var(--muted, #64728e);
  font-size: 12px;
  font-weight: 650;
}
.sts-disclaimer,
#safeToSpendDisclaimer,
#calendarSafeToSpendDisclaimer {
  display: block;
  margin: 8px 0 0;
  color: var(--muted, #64728e);
  font-size: 12px;
  font-weight: 700;
}
.sts-disclaimer[hidden],
#safeToSpendDisclaimer[hidden],
#calendarSafeToSpendDisclaimer[hidden] { display: none !important; }

#safeToSpendCard.pay-period-unavailable #safeToSpend,
#calendarRailSts.pay-period-unavailable #calendarSafeToSpend,
#payPeriodPanel.pay-period-unavailable #payPeriodSafeToSpend {
  letter-spacing: .06em;
}

#calendarRailSts {
  margin-bottom: 12px;
}
#calendarRailSts .rail-sts-copy {
  margin: 0;
  color: var(--muted, #64728e);
  font-size: 12px;
}

.pay-period-panel,
#payPeriodPanel {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line, #d8e0f5);
  border-radius: 16px;
  background: var(--card, #f7f9ff);
}
.pay-period-panel h3,
#payPeriodPanel h3 { margin: 4px 0 8px; font: 800 1.1rem Manrope, sans-serif; }
.pay-period-status,
.pay-period-hint {
  margin: 0 0 10px;
  color: var(--muted, #3d4d73);
  font-size: 13px;
  font-weight: 650;
}
.pay-period-panel.pay-period-unavailable,
#payPeriodPanel.pay-period-unavailable {
  border-style: dashed;
  opacity: 1;
}
body[data-pay-period="loading"] #safeToSpendCard,
body[data-pay-period="loading"] #calendarRailSts,
body[data-pay-period="loading"] #payPeriodPanel {
  opacity: .78;
}
body[data-pay-period="error"] #safeToSpendCard,
body[data-pay-period="error"] #calendarRailSts,
body[data-pay-period="error"] #payPeriodPanel,
body[data-pay-period="empty"] #safeToSpendCard,
body[data-pay-period="empty"] #calendarRailSts,
body[data-pay-period="empty"] #payPeriodPanel {
  box-shadow: none;
}

body[data-theme="midnight"] .beta-banner {
  background: #2a3148;
  border-color: #4d5673;
  color: #e8ecff;
}
body[data-theme="midnight"] .beta-banner strong { background: #7ea0ff; color: #10162a; }
body[data-theme="midnight"] .pay-period-panel,
body[data-theme="midnight"] #payPeriodPanel {
  background: #1a2033;
  border-color: #33405f;
}

@media (max-width: 720px) {
  .beta-banner { flex-wrap: wrap; margin-bottom: 14px; }
}