#billing-notice { margin: .65rem 1.8rem 0; padding: 0; color: var(--ui-color-text-muted); display: flex; gap: .3rem 1rem; align-items: baseline; flex-wrap: wrap; font-size: .8rem; line-height: 1.5; }
#billing-notice[hidden] { display: none; }
#billing-notice-summary { margin: 0; }
.billing-account-panel { margin: 0; color: var(--ui-color-text-muted); }
.billing-plan-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .4rem 1rem; margin: 0; }
.billing-plan-summary > div { min-width: 0; }
.billing-plan-summary dt { margin: 0 0 .2rem; font-size: .8rem; }
.billing-plan-summary dd { margin: 0; color: var(--ui-color-text); font-size: 1.05rem; font-weight: 750; overflow-wrap: anywhere; }
#billing-plan-detail { margin: .35rem 0 .75rem; font-size: .75rem; line-height: 1.4; overflow-wrap: anywhere; }
#billing-notice-message { overflow-wrap: anywhere; }
.dialog-compact #billing-plan-detail { margin-bottom: .4rem; }
@media (max-width: 380px) {
  .billing-plan-summary { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
}
#billing-notice-message { margin: 0; font-size: .875rem; line-height: 1.5; }
.billing-account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .75rem; }
#billing-notice .billing-text-button, .billing-account-panel .billing-text-button { width: auto; min-height: 2rem; margin: 0; padding: .2rem 0; border: 0; border-radius: .2rem; background: transparent; color: var(--ui-color-text-muted); box-shadow: none; font-size: .8rem; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
#billing-notice .billing-text-button:hover, .billing-account-panel .billing-text-button:hover { color: var(--ui-color-text); background: transparent; box-shadow: none; transform: none; }
#billing-notice .billing-text-button:focus-visible, .billing-account-panel .billing-text-button:focus-visible { outline: 2px solid var(--ui-color-gold); outline-offset: 3px; }
.billing-account-panel .billing-buy-button { width: auto; min-height: 44px; margin: 0; padding: .65rem 1.4rem; border-radius: .65rem; font-size: .9rem; font-weight: 750; }
.billing-account-panel .billing-buy-button:focus-visible { outline: 2px solid var(--ui-color-gold); outline-offset: 3px; }
.billing-account-panel .billing-buy-button:disabled { opacity: .5; cursor: not-allowed; }
.billing-account-panel .billing-text-button:disabled { opacity: .5; cursor: not-allowed; }
#billing-cancellation-error { margin: .4rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--ui-color-text); }
.modal.billing-access-expired-dialog {
  width: min(34rem, calc(var(--dialog-viewport-width, 100vw) - 1.5rem));
  max-height: calc(var(--app-available-height, 100dvh) - 1.75rem);
  padding: clamp(.95rem, 2.5vw, 1.5rem);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(42, 155, 160, .72);
  border-radius: 1.1rem;
  color: #f1f5f2;
  background:
    radial-gradient(circle at 100% 0, rgba(14, 122, 102, .2), transparent 42%),
    linear-gradient(145deg, #08363a, #061f26 76%);
  box-shadow: 0 2rem 6rem rgba(0, 9, 13, .62);
}
.modal.billing-access-expired-dialog[open] {
  display: grid;
  gap: clamp(.55rem, 1.5vw, .8rem);
}
.billing-access-expired-dialog::backdrop {
  background: rgba(0, 15, 20, .72);
  backdrop-filter: blur(.6rem) brightness(.65);
}
.billing-access-expired-header {
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr);
  align-items: center;
  gap: clamp(.65rem, 2vw, .9rem);
}
.billing-access-expired-mark {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid rgba(244, 210, 119, .7);
  border-radius: .8rem;
  color: #082d31;
  background: linear-gradient(145deg, #f0cf78, #d5ad52);
  font-size: 1.4rem;
  font-weight: 900;
  box-shadow: 0 .7rem 1.8rem rgba(213, 173, 82, .16);
}
.billing-access-expired-header h2 {
  margin: 0;
  color: #f6f5ed;
  font-size: clamp(1.35rem, 3.3vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -.025em;
}
.billing-access-expired-message {
  margin: 0;
  color: #c7dcdd;
  font-size: .94rem;
  line-height: 1.45;
}
.billing-access-expired-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: .5rem .6rem;
}
.billing-access-expired-actions button {
  width: 100%;
  min-width: 0;
  min-height: 2.8rem;
  margin: 0;
  white-space: normal;
}
#billing-access-expired-buy[hidden] { display: none; }
.billing-access-expired-actions:has(#billing-access-expired-buy[hidden]) { grid-template-columns: minmax(0, 1fr); }
.billing-access-expired-actions .secondary-button {
  border-color: #56888a;
  color: #d8e7e5;
  background: transparent;
  box-shadow: none;
}
.billing-access-expired-actions .secondary-button:hover {
  border-color: #8bcac5;
  color: #fff;
  background: rgba(23, 81, 90, .45);
  box-shadow: none;
}
.billing-access-expired-actions :is(.primary-button, .secondary-button):focus-visible,
.billing-access-expired-actions .billing-access-expired-logout:focus-visible,
.billing-privacy-links :is(a, .inline-link-button):focus-visible {
  outline: 2px solid #f0cf78;
  outline-offset: 3px;
}
.billing-access-expired-actions .billing-access-expired-logout {
  grid-column: 1 / -1;
  justify-self: center;
  width: auto;
  min-height: 2.5rem;
  padding: .2rem .5rem;
  border: 0;
  color: #a9c2c2;
  background: transparent;
  box-shadow: none;
  font-size: .85rem;
  text-decoration: none;
}
.billing-access-expired-actions .billing-access-expired-logout:hover { color: #fff; background: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: .2em; }

.billing-privacy-links { margin: 0; color: #9db7b8; font-size: .76rem; line-height: 1.45; text-align: center; }
.billing-privacy-links a,
.billing-privacy-links .inline-link-button { color: #a9c2c2; font: inherit; text-decoration: none; }
.billing-privacy-links a:hover,
.billing-privacy-links .inline-link-button:hover { color: #f0cf78; text-decoration: underline; text-underline-offset: .16em; }
.billing-retention-message {
  display: grid;
  gap: .18rem;
  margin: 0;
  padding: .05rem 0 .05rem .8rem;
  border: 0;
  border-left: 2px solid #d4b45f;
  color: #c7dcdd;
  background: transparent;
  font-size: .85rem;
  line-height: 1.55;
}
.billing-retention-message[hidden], #billing-privacy-request-list[hidden] { display: none; }
.billing-retention-message strong { color: #a9c2c2; font-size: .8rem; font-weight: 650; }
.billing-retention-message time { color: #f0cf78; font-size: clamp(1.2rem, 3.4vw, 1.45rem); font-weight: 800; line-height: 1.2; }
.billing-open-request-message { margin: 0; padding: .05rem 0 .05rem .8rem; border-left: 2px solid #d4b45f; color: #c7dcdd; background: transparent; font-size: .85rem; line-height: 1.5; }
.inline-link-button { border: 0; padding: 0; color: var(--ui-color-gold-light); background: transparent; text-decoration: underline; cursor: pointer; font: inherit; }
.billing-management-dialog .billing-privacy-management { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid rgba(107, 171, 171, .25); }
.billing-management-dialog .billing-privacy-management h3,
.billing-management-dialog #billing-license-heading { margin: 0 0 .45rem; color: #f1f4f0; font-size: 1rem; }
.billing-management-dialog .billing-privacy-management > p { margin: .35rem 0; color: #c7dcdd; font-size: .875rem; line-height: 1.45; }
.billing-privacy-request-list { display: grid; gap: .3rem; margin: .55rem 0; padding: 0; list-style: none; }
.billing-privacy-request-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .8rem; padding: .45rem .6rem; border-radius: .5rem; color: #dbe7e4; background: rgba(4, 37, 42, .75); font-size: .85rem; }
.billing-privacy-request-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.billing-privacy-request-actions button { min-height: 2.5rem; margin: 0; }
@media (max-height: 480px) {
  .modal.billing-access-expired-dialog { padding: .75rem; }
  .modal.billing-access-expired-dialog[open] { gap: .45rem; }
  .billing-access-expired-header { gap: .55rem; }
  .billing-access-expired-header h2 { font-size: 1.3rem; }
  .billing-access-expired-message { font-size: .86rem; }
  .billing-retention-message { gap: .1rem; padding-left: .65rem; font-size: .8rem; }
  .billing-access-expired-actions { gap: .3rem .45rem; }
}
.modal.app-standard-dialog.billing-management-dialog {
  width: min(40rem, calc(var(--dialog-viewport-width, 100vw) - 1.75rem));
}
.billing-management-dialog .billing-plan-summary { gap: .75rem 1.25rem; }
.billing-management-dialog .billing-plan-summary dt { color: #c7dcdd; font-size: .875rem; }
.billing-management-dialog .billing-plan-summary dd { color: #f1f4f0; font-size: 1.125rem; }
.billing-management-dialog #billing-plan-detail,
.billing-management-dialog #billing-notice-message {
  color: #c7dcdd;
  font-size: .9375rem;
  line-height: 1.5;
}
.billing-management-dialog .billing-account-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .5rem;
  margin-top: .25rem;
}
.billing-management-dialog .billing-buy-button { width: 100%; min-height: 3rem; }
.billing-management-dialog .billing-text-button { justify-self: center; }
.billing-management-dialog #billing-cancellation-error { color: #ffb4ad; font-size: .875rem; }
.modal.app-standard-dialog.billing-payment-dialog {
  width: min(34rem, calc(var(--dialog-viewport-width, 100vw) - 1.75rem));
}
.billing-payment-dialog .billing-payment-progress {
  width: 2rem; height: 2rem; margin-inline: auto;
  border: .2rem solid #17515a; border-top-color: #e2c275; border-radius: 50%;
  animation: billing-payment-spin 1s linear infinite;
}
.billing-payment-dialog .billing-payment-progress[hidden] { display: none; }
.billing-payment-dialog .modal-actions { margin: 0; padding: 0 1.5rem 1.25rem; }
.billing-payment-dialog .modal-actions button { width: 100%; min-width: 0; margin: 0; white-space: normal; }
.billing-payment-dialog.dialog-compact > .setup-dialog-content { padding: .75rem; gap: .5rem; }
.billing-payment-dialog.dialog-compact .modal-header h2 { font-size: 1.125rem; }
.billing-payment-dialog.dialog-compact .setup-dialog-content > p { font-size: .875rem; line-height: 1.4; }
.billing-payment-dialog.dialog-compact .billing-payment-progress { display: none; }
.billing-payment-dialog.dialog-compact .modal-actions { padding: 0 .75rem .75rem; }
.billing-payment-dialog.dialog-compact .modal-actions button { min-height: 2.5rem; padding: .5rem .75rem; }
@keyframes billing-payment-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .billing-payment-dialog .billing-payment-progress { animation: none; }
}
.modal.app-standard-dialog.billing-purchase-dialog {
  width: min(38rem, calc(var(--dialog-viewport-width, 100vw) - 1.75rem));
}
#billing-form { display: block; padding: 0; border: 0; background: transparent; box-shadow: none; }
.billing-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1rem; }
#billing-form .field { display: grid; align-content: start; gap: .4rem; margin: 0; min-width: 0; color: #c8dedf; font-size: .9375rem; }
.billing-code-field { grid-column: 1 / -1; }
#billing-form select, #billing-form .billing-code-field input { width: 100%; min-width: 0; }
.billing-quote { grid-column: 1 / -1; padding: .9rem 1rem; border: 1px solid #268c91; border-radius: .75rem; background: #092e35; }
#billing-price { margin: 0; color: #e2c275; font-size: 1.2rem; font-weight: 780; }
#billing-detail { margin: .45rem 0 0; color: #c7dcdd; font-size: .875rem; line-height: 1.5; }
.billing-confirmation { color: #c8dedf; font-size: .875rem; line-height: 1.4; }
.billing-confirmation h3 { margin: 0 0 .4rem; color: #eef4f2; font-size: 1.1rem; }
.billing-confirmation p { margin: .25rem 0; }
.billing-confirmation #billing-confirmation-price { color: #e2c275; font-weight: 750; }
.billing-confirmation #billing-region-changed { color: #e2c275; }
.billing-terms { display: flex; align-items: start; gap: .5rem; margin-top: .6rem; }
.billing-terms input { flex: none; margin-top: .15rem; }
.billing-terms a { color: #e2c275; }
.billing-terms a:not([href]) { color: inherit; text-decoration: none; cursor: default; }
.billing-confirmation #billing-terms-status { color: #ffb4ad; }
.billing-confirmation #billing-back { margin-top: .35rem; color: #c8dedf; background: transparent; border: 0; text-decoration: underline; }
.billing-choice[hidden], .billing-confirmation[hidden], #billing-region-changed[hidden] { display: none; }
.billing-purchase-dialog .billing-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 0 clamp(1rem, 2.5vw, 2rem) clamp(1rem, 2.5vw, 2rem);
  padding: 0;
  border: 0;
}
.billing-purchase-dialog .billing-actions button { width: 100%; min-width: 0; min-height: 3rem; margin: 0; }
.billing-purchase-dialog #billing-close { border-color: #3c7779; color: #c8dedf; background: #10333a; box-shadow: none; }
.billing-purchase-dialog #billing-close:hover { border-color: #8bcac5; color: #eef4f2; background: #17515a; box-shadow: none; }
@media (max-width: 680px) {
  #billing-notice { margin: .5rem 1rem 0; }
  .billing-account-panel .billing-buy-button { width: 100%; }
  .billing-choice { grid-template-columns: minmax(0, 1fr); }
  .billing-quote { grid-column: 1; }
  .billing-purchase-dialog .billing-actions button { padding-inline: .6rem; }
}
@media (max-width: 420px) {
  .billing-purchase-dialog .billing-actions { grid-template-columns: minmax(0, 1fr); }
  .billing-access-expired-header { grid-template-columns: 2.5rem minmax(0, 1fr); gap: .6rem; }
  .billing-access-expired-mark { width: 2.5rem; height: 2.5rem; border-radius: .7rem; font-size: 1.25rem; }
  .billing-access-expired-actions { grid-template-columns: minmax(0, 1fr); }
}
