.br-security-controls { display: grid; gap: 1.5rem; }
.br-app :is(.br-privacy-page, .br-security-controls) .br-settings-card__heading { flex: 1; min-width: 0; }
.br-app :is(.br-privacy-page, .br-security-controls) .br-settings-card__heading > p { margin: .35rem 0 0; color: var(--app-text-muted); font-size: .8125rem; line-height: 1.6; }
.br-app .br-settings-card__body { display: grid; gap: 1rem; margin: 0; padding: 1rem 1.15rem; border-top: 1px solid var(--app-border); }
.br-app .br-settings-card__body .br-field { display: grid; gap: .4rem; min-width: 0; max-width: none; margin: 0; }
.br-app .br-settings-card__body .br-field__label { margin: 0; font-size: .8125rem; color: var(--app-text); }
.br-app .br-settings-card__body .br-field__hint { margin: 0; color: var(--app-text-faint); font-size: .75rem; line-height: 1.6; }
.br-app .br-settings-inline-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin: 0; }
.br-app .br-settings-inline-row > .br-field { flex: 1 1 16rem; }
.br-app .br-settings-inline-row__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.br-app .br-settings-inline-row .br-input { width: 100%; }
.br-app .br-settings-inline-row .br-button { flex-shrink: 0; min-height: 2.15rem; }
.br-security-controls__status { margin: 0; }
.br-security-recovery { padding: 1rem; border: 1px solid var(--app-border); border-radius: var(--app-radius-control); }
.br-security-recovery h3 { margin: 0; font-size: .875rem; }
.br-security-recovery p { color: var(--app-text-muted); font-size: .8125rem; line-height: 1.6; }
.br-security-recovery ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .75rem; padding: 0; list-style: none; }
.br-security-recovery code { overflow-wrap: anywhere; user-select: all; }
@media (max-width: 600px) {
  .br-app .br-security-controls .br-settings-card__heading { flex-basis: 100%; }
  .br-app .br-settings-inline-row { flex-direction: column; align-items: stretch; }
  .br-app .br-settings-inline-row > .br-field { flex-basis: auto; }
  .br-app .br-settings-inline-row__actions > .br-button { flex: 1 1 auto; }
}

/* Shared account surfaces use the existing app buttons and neutral palette. */
.br-app .br-billing-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
.br-app .br-billing-support { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; padding: 1.5rem; }
.br-app .br-billing-support__copy { min-width: 0; }
.br-app .br-billing-support__copy .br-app-panel__copy { max-width: 46rem; margin-bottom: 0; }
.br-app .br-billing-support__actions { display: flex; justify-content: flex-end; }
.br-app .br-billing-support__actions .br-button { max-width: 100%; }
.br-auth-portal-form .br-policy-links { font-size: .8125rem; line-height: 1.6; gap: .5rem 1rem; margin: 0; }
.br-auth-portal-form .br-terms-acceptance { display: flex; align-items: flex-start; gap: .75rem; font-size: .8125rem; line-height: 1.6; }
.br-terms-acceptance input[type="checkbox"] { width: 1rem; height: 1rem; flex: 0 0 auto; margin: .15rem 0 0; accent-color: var(--br-text-primary); }
.br-privacy-consent .br-privacy-consent__panel { padding: 1.5rem; border-radius: .75rem; background: var(--br-surface-2); }
.br-privacy-consent .br-dialog__title { font-size: 1.125rem; }
.br-privacy-consent .br-dialog__copy, .br-privacy-consent__choice p { font-size: .875rem; }
.br-privacy-consent__links { font-size: .8125rem; }
.br-privacy-consent .br-privacy-consent__actions { gap: .75rem; padding-top: .5rem; }
.br-privacy-consent .br-privacy-consent__actions .br-button { min-height: 2.75rem; white-space: normal; line-height: 1.3; padding: .65rem 1rem; border-radius: .5rem; font-size: .875rem; height: 100%; }
@media (max-width: 480px) {
  .br-privacy-consent .br-privacy-consent__panel { padding: 1rem; }
  .br-privacy-consent .br-privacy-consent__actions { grid-template-columns: minmax(0, 1fr); }
}

.br-app .br-billing-management {
  display: grid;
  gap: 1rem;
  padding: 1.15rem;
  border-top: 1px solid var(--app-border);
}

.br-app .br-billing-management__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.br-app .br-billing-management__form { margin: 0; }

.br-app .br-billing-management__hint,
.br-app .br-billing-management__notice p,
.br-app .br-billing-management__cancel p {
  margin: 0;
  color: var(--app-text-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.br-app .br-billing-management__hint .br-icon { margin-right: 0.3rem; }
.br-app .br-billing-management__notice strong { display: block; margin-bottom: 0.35rem; }

.br-app .br-billing-management__cancel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding-top: 1rem;
  border-top: 1px solid var(--app-border);
}

.br-app .br-billing-management__cancel p { flex: 1 1 12rem; }

@media (max-width: 640px) {
  .br-app .br-billing-management__buttons,
  .br-app .br-billing-management__cancel { flex-direction: column; align-items: stretch; }
  .br-app .br-billing-management__buttons .br-button,
  .br-app .br-billing-management__form .br-button { width: 100%; }
  .br-app .br-billing-management__cancel p { flex-basis: auto; }
}

/* Pricing and Billing share the same responsive period picker. */
.br-billing-periods { display: flex; justify-content: center; gap: 0.375rem; width: fit-content; max-width: 100%; margin: 0 auto 1.75rem; }
.br-billing-periods__option { display: flex; align-items: center; justify-content: center; gap: 0.375rem; min-width: 0; min-height: 2.5rem; padding: 0.5rem 0.75rem; border: 1px solid #343a46; border-radius: 999px; background: #181c23; color: #c1c9d5; text-align: center; text-decoration: none; font-size: 0.8125rem; line-height: 1.4; white-space: nowrap; }
.br-billing-periods__option:hover { background: #202733; color: #f4f4f5; }
.br-billing-periods__option.is-selected { background: #f4f4f5; border-color: #f4f4f5; color: #121212; }
.br-billing-periods__discount { display: inline-flex; align-items: center; padding: 0.1rem 0.3rem; border: 1px solid #296149; border-radius: 6px; background: #153c2d; color: #a4efc9; font-size: 0.6875rem; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.br-billing-periods__option.is-selected .br-billing-periods__discount { background: #d5f5e3; border-color: #94cfae; color: #145735; }
.br-billing-periods__option:focus-visible { outline: 2px solid #a6caff; outline-offset: 3px; }
.br-pricing__saving { color: #a6caff; font-size: 0.875rem; margin: -0.5rem 0 1rem; }
.br-app .br-billing-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.br-app .br-billing-plan-card { display: flex; flex-direction: column; min-width: 0; padding: 1.75rem; border: 1px solid #2c3441; border-radius: 6px; background: #171b22; }
.br-app .br-billing-plan-card--pro { border-color: #3c608e; background: linear-gradient(150deg, #173e762b, transparent 60%), #171b22; }
.br-app .br-billing-plan-card__identity { min-height: 11.5rem; }
.br-app .br-billing-plan-card__heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.br-app .br-billing-plan-card h2 { margin: 0; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.025em; }
.br-app .br-billing-current { padding: 0.25rem 0.6rem; border: 1px solid #415069; border-radius: 999px; color: #bed8fb; font-size: 0.7rem; }
.br-app .br-billing-plan-card__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; margin-bottom: 1.5rem; }
.br-app .br-billing-plan-card__amount strong { color: #d4dbe5; font-size: 1.75rem; font-weight: 400; letter-spacing: -0.03em; }
.br-app .br-billing-plan-card__amount span { color: #a9b3c2; font-size: 0.875rem; }
.br-app .br-billing-plan-card__description, .br-app .br-billing-plan-card__includes { margin: 0 0 1.5rem; color: #a9b3c2; font-size: 0.875rem; line-height: 1.6; }
.br-app .br-billing-plan-card__includes { margin-top: 0.5rem; margin-bottom: 1rem; }
.br-app .br-billing-plan-card__features { display: grid; gap: 0.8rem; padding: 0; margin: 0 0 1.5rem; list-style: none; }
.br-app .br-billing-plan-card__features li { display: flex; align-items: baseline; gap: 0.65rem; color: #d1d7df; font-size: 0.875rem; line-height: 1.5; }
.br-app .br-billing-plan-card__features .br-icon { color: #a6caff; flex-shrink: 0; }
.br-app .br-billing-plan-card__limitation { margin: 0; color: #a9b3c2; font-size: 0.75rem; max-width: 34ch; line-height: 1.6; }
.br-app .br-billing-plan-card__saving { margin: -0.75rem 0 1.5rem; color: #a6caff; font-size: 0.8125rem; line-height: 1.5; }
.br-app .br-billing-plan-card__action { margin-top: auto; padding-top: 1rem; }
.br-app .br-billing-plan-card .br-billing-management { padding: 0; border: 0; }
.br-app .br-billing-plan-card .br-billing-management > .br-button { width: fit-content; border-radius: 999px; }
.br-app .br-billing-plan-details { margin: 0 0 1.5rem; border-top: 1px solid var(--app-border); font-size: 0.8125rem; }
.br-app .br-billing-plan-details > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 0; border-bottom: 1px solid var(--app-border); }
.br-app .br-billing-plan-details dt { color: var(--app-text-muted); }
.br-app .br-billing-plan-details dd { margin: 0; }
.br-app .br-checkout-summary__action > form, .br-app .br-checkout-coupon .br-coupon-form { text-align: right; justify-content: flex-end; }
.br-app .br-checkout-coupon .br-coupon-form__field { text-align: left; }
.br-app .br-checkout-summary__action > form > .br-button { width: auto; min-width: 12rem; max-width: 100%; }
.br-app .br-checkout-period-saving { margin: -0.5rem 0 1.5rem; color: #a6caff; font-size: 0.875rem; }
@media (max-width: 700px) {
  .br-app .br-billing-plans { grid-template-columns: minmax(0, 1fr); }
  .br-app .br-billing-plan-card { padding: 1.25rem; }
  .br-billing-periods__option { gap: 0.25rem; padding: 0.5rem 0.375rem; font-size: 0.75rem; }
  .br-app .br-billing-support { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.25rem; }
}

.br-app .br-checkout-coupon .br-coupon-form > .br-button { align-self: flex-end; width: auto; }

.br-app .br-checkout-heading .br-app-page-header__actions { justify-content: flex-end; }
.br-app .br-checkout-heading .br-app-page-header__actions .br-button { width: auto; flex: 0 1 auto; }