/* Final dark adapter for modal and runtime-overlay systems. */
@media (prefers-color-scheme: dark) {
:root {
  --modal-dark-canvas: #0a1222;
  --modal-dark-surface: #111b2c;
  --modal-dark-raised: #17243a;
  --modal-dark-soft: #1d2c44;
  --modal-dark-hover: #243650;
  --modal-dark-border: rgba(174, 194, 224, .18);
  --modal-dark-border-strong: rgba(174, 194, 224, .30);
  --modal-dark-text: #f4f7fc;
  --modal-dark-text-soft: #c1cce0;
  --modal-dark-text-muted: #8fa0bb;
}

:is(.modal-backdrop, .modal-overlay, .final-overlay, .final-overlay-competitive,
    .modal__overlay, .checkout-modal-overlay, .cct-modal-backdrop, .ctt-feedback-backdrop,
    .support-auth-modal__backdrop, .abc-pdf-coming-soon-modal__backdrop,
    .premium-upsell-modal__backdrop, .premium-upsell-modal__overlay,
    .premium-conversion-modal__backdrop, .premium-conversion-modal__overlay,
    .incomplete-quiz-modal__backdrop, .exam-track-modal__backdrop,
    .product-updates-modal__backdrop, .welcome-trial-modal__backdrop,
    .app-logout-modal__backdrop,
    .onboarding-overlay, .npc-onboarding-overlay) {
  background-color: rgba(2, 6, 15, .82) !important;
}

:is(.checkout-modal, .confirmation-modal, .section-break-modal, .limit-upsell-modal,
    .premium-video-modal, .add-friend-modal, .invite-modal, .modal__dialog,
    .premium-upsell-modal__dialog, .premium-conversion-dialog, .premium-conversion-modal__dialog,
    .incomplete-quiz-modal__dialog, .exam-track-modal__dialog,
    .product-updates-modal__dialog, .welcome-trial-modal__dialog,
    .free-trial-modal__dialog, .session-review-entry-modal__dialog,
    .ctt-feedback-modal, .cct-modal-card, .support-auth-modal__dialog,
    .abc-pdf-coming-soon-modal__dialog,
    .app-logout-modal__dialog, .onboarding-modal, .npc-onboarding-dialog,
    .entitlements-limit-modal__dialog, .overlay-content, .overlay-content-competitive) {
  background-color: var(--modal-dark-surface) !important;
  color: var(--modal-dark-text) !important;
  border-color: var(--modal-dark-border-strong) !important;
  box-shadow: 0 26px 64px rgba(0, 0, 0, .46) !important;
}

:is(.modal-header, .modal-body, .modal-footer, .modal-actions,
    .premium-upsell-benefits, .upsell-plan-section, .upsell-plan-card,
    .premium-conversion-card, .premium-conversion-stage, .premium-conversion-loop > div,
    .premium-beta-modal__info, .premium-welcome-modal__reassurance,
    .premium-welcome-modal__detail-card,
    .incomplete-quiz-modal__session, .incomplete-quiz-modal__details,
    .exam-track-option, .exam-track-modal__footer,
    .product-updates-modal__item, .product-updates-modal__feature-card,
    .welcome-trial-modal__card, .free-trial-modal__card,
    .session-review-entry-modal__summary, .session-review-entry-modal__pill,
    .ctt-feedback-step, .cct-modal-header, .cct-category, .onboarding-card,
    .onboarding-mini-card, .onboarding-note, .onboarding-chip,
    .season-announcement-modal__detail-card, .season-announcement-modal__season-pill,
    .quiz-init-overlay__card, .session-loading-card) {
  background-color: var(--modal-dark-raised) !important;
  color: var(--modal-dark-text-soft) !important;
  border-color: var(--modal-dark-border) !important;
}

/* The Exam Track footer is spacing within the dialog, not a nested raised
   panel. Let the dialog surface show through so the CTA does not sit inside a
   differently coloured rectangle. */
#examTrackModal .exam-track-modal__footer {
  background-color: transparent !important;
}

#examTrackModal .exam-track-modal__submit:disabled {
  --exam-track-submit-disabled-face: var(--modal-dark-soft);
  background-color: var(--exam-track-submit-disabled-face) !important;
}

body.tw-dashboard :is(.upsell-plan-card.is-active, .exam-track-option.is-selected,
    .ctt-feedback-rating-btn[aria-checked="true"], .session-review-entry-modal__pill.is-active) {
  background-color: color-mix(in srgb, var(--track-primary, #2f6bff) 20%, var(--modal-dark-raised)) !important;
  color: var(--modal-dark-text) !important;
  border-color: color-mix(in srgb, var(--track-primary, #2f6bff) 58%, transparent) !important;
}

:is(.checkout-modal, .confirmation-modal, .section-break-modal,
    .premium-upsell-modal__dialog, .premium-conversion-dialog, .premium-conversion-modal__dialog,
    .incomplete-quiz-modal__dialog, .exam-track-modal__dialog,
    .product-updates-modal__dialog, .welcome-trial-modal__dialog,
    .free-trial-modal__dialog, .session-review-entry-modal__dialog,
    .ctt-feedback-modal, .cct-modal-card, .support-auth-modal__dialog,
    .abc-pdf-coming-soon-modal__dialog, .app-logout-modal__dialog,
    .entitlements-limit-modal__dialog, .modal__dialog,
    .overlay-content, .overlay-content-competitive)
  :is(h1, h2, h3, h4, .modal-title, .premium-upsell-modal__title,
      .exam-track-modal__title, .ctt-feedback-title, .cct-modal-title, strong) {
  color: var(--modal-dark-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

:is(.checkout-modal, .confirmation-modal, .section-break-modal,
    .premium-upsell-modal__dialog, .premium-conversion-dialog, .premium-conversion-modal__dialog,
    .incomplete-quiz-modal__dialog, .exam-track-modal__dialog,
    .product-updates-modal__dialog, .welcome-trial-modal__dialog,
    .free-trial-modal__dialog, .session-review-entry-modal__dialog,
    .ctt-feedback-modal, .cct-modal-card, .support-auth-modal__dialog,
    .abc-pdf-coming-soon-modal__dialog, .app-logout-modal__dialog,
    .entitlements-limit-modal__dialog, .modal__dialog,
    .overlay-content, .overlay-content-competitive)
  :is(p, li, small, .modal-description, .modal-copy, .ctt-feedback-subtitle,
      .cct-modal-desc, .premium-upsell-modal__disclaimer,
      .entitlements-limit-modal__message) {
  color: var(--modal-dark-text-soft) !important;
  -webkit-text-fill-color: currentColor !important;
}

:is(.modal-close, .premium-upsell-modal__close, .premium-conversion-modal__close,
    .incomplete-quiz-modal__close, .exam-track-modal__close,
    .product-updates-modal__close, .welcome-trial-modal__close,
    .ctt-feedback-close, .cct-modal-close, .abc-pdf-coming-soon-modal__close,
    .app-logout-modal__cancel, .entitlements-limit-modal__close,
    .premium-conversion-modal__secondary, .modal__close, .modal-btn.cancel-btn) {
  background-color: var(--modal-dark-soft) !important;
  color: var(--modal-dark-text-soft) !important;
  border-color: var(--modal-dark-border) !important;
}

:is(.modal-close, .premium-upsell-modal__close, .premium-conversion-modal__close,
    .incomplete-quiz-modal__close, .exam-track-modal__close,
    .product-updates-modal__close, .welcome-trial-modal__close,
    .ctt-feedback-close, .cct-modal-close, .abc-pdf-coming-soon-modal__close,
    .app-logout-modal__cancel, .entitlements-limit-modal__close,
    .premium-conversion-modal__secondary, .modal__close,
    .modal-btn.cancel-btn):is(:hover, :focus-visible) {
  background-color: var(--modal-dark-hover) !important;
  color: var(--modal-dark-text) !important;
  border-color: var(--modal-dark-border-strong) !important;
}

:is(.ctt-feedback-modal, .cct-modal-card, .checkout-modal,
    .subscription-cancel-card, .support-auth-modal__dialog, .modal__dialog,
    .add-friend-modal, .invite-modal, .exam-track-modal__dialog)
  :is(input, textarea, select) {
  background-color: var(--modal-dark-raised) !important;
  color: var(--modal-dark-text) !important;
  border-color: var(--modal-dark-border-strong) !important;
}

:is(.ctt-feedback-modal, .cct-modal-card, .checkout-modal,
    .subscription-cancel-card, .support-auth-modal__dialog, .modal__dialog,
    .add-friend-modal, .invite-modal, .exam-track-modal__dialog)
  :is(input, textarea)::placeholder {
  color: var(--modal-dark-text-muted) !important;
  opacity: 1;
}

:is(.session-loading-overlay, .quiz-init-overlay) { background-color: var(--modal-dark-canvas) !important; }
:is(.session-loading-card, .quiz-init-overlay__card) :is(.skeleton, [class*="skeleton"]) {
  background: linear-gradient(90deg, var(--modal-dark-soft), var(--modal-dark-hover), var(--modal-dark-soft)) !important;
}

/* Semantic feedback remains distinct from the Exam Track accent. */
:is(.premium-beta-modal__feedback.is-error, .exam-track-modal__error,
    .ctt-feedback-error, .modal-error) {
  background-color: rgba(127, 29, 29, .24) !important;
  color: #fca5a5 !important;
  border-color: rgba(248, 113, 113, .34) !important;
}

:is(.premium-beta-modal__feedback.is-success, .ctt-feedback-success, .modal-success) {
  background-color: rgba(20, 83, 45, .26) !important;
  color: #86efac !important;
  border-color: rgba(74, 222, 128, .32) !important;
}

:is(.exam-track-modal__submit, .incomplete-quiz-modal__button,
    .premium-conversion-modal__cta, .premium-beta-modal__cta,
    .entitlements-limit-modal__cta):disabled {
  background-color: var(--modal-dark-soft) !important;
  color: var(--modal-dark-text-muted) !important;
  border-color: var(--modal-dark-border) !important;
  box-shadow: none !important;
}

:is(.modal-backdrop, .modal-overlay, .modal, .checkout-modal-overlay, .ctt-feedback-backdrop,
    .cct-modal-backdrop, .support-auth-modal__backdrop,
    .abc-pdf-coming-soon-modal, .premium-upsell-modal, .premium-conversion-modal,
    .incomplete-quiz-modal, .exam-track-modal, .entitlements-limit-modal,
    .app-logout-modal, .onboarding-overlay, .npc-onboarding-overlay)
  :is(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--track-primary, #2f6bff) 58%, white) !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  :is(.modal-backdrop, .modal-overlay, .modal, .checkout-modal-overlay, .ctt-feedback-backdrop,
      .cct-modal-backdrop, .premium-upsell-modal, .premium-conversion-modal,
      .incomplete-quiz-modal, .exam-track-modal, .entitlements-limit-modal,
      .app-logout-modal, .onboarding-overlay, .npc-onboarding-overlay) * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Modal actions use many independent component sheets. This final guard makes
   every enabled modal press a single continuous face without affecting its
   resting elevation, semantic colour or keyboard focus ring. */
:is(.modal-backdrop, .modal-overlay, .final-overlay, .final-overlay-competitive,
    .modal, .checkout-modal-overlay, .ctt-feedback-backdrop, .cct-modal-backdrop,
    .support-auth-modal__backdrop, .abc-pdf-coming-soon-modal,
    .premium-upsell-modal, .premium-conversion-modal, .incomplete-quiz-modal,
    .exam-track-modal, .product-updates-modal__backdrop,
    .welcome-trial-modal__backdrop,
    .entitlements-limit-modal, .app-logout-modal, .onboarding-overlay,
    .npc-onboarding-overlay)
  :is(
    button,
    input[type="button"], input[type="submit"], input[type="reset"],
    [role="button"],
    a.btn, a[class*="-btn"], a[class*="btn-"],
    a[class*="-button"], a[class$="button"]
  ):not(#dark-modal-pressed-face-lock-1):not(#dark-modal-pressed-face-lock-2):not(#dark-modal-pressed-face-lock-3):not(#dark-modal-pressed-face-lock-4):not(#dark-modal-pressed-face-lock-5):not(#dark-modal-pressed-face-lock-6):not(#dark-modal-pressed-face-lock-7):not(#dark-modal-pressed-face-lock-8):not(:disabled):not(.disabled):not(.is-disabled):active {
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
  translate: none !important;
  transition: background-color 80ms ease, color 80ms ease !important;
}

/* Exhaustive modal-state completion. These rules intentionally live in the
   media-gated final adapter because several dialogs are mounted or restyled by
   JavaScript after the component styles have already loaded. */
.entitlements-limit-modal {
  background: rgba(2, 6, 15, .82) !important;
  backdrop-filter: blur(10px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(112%) !important;
}

.entitlements-limit-modal__dialog {
  background: linear-gradient(180deg, var(--modal-dark-raised), var(--modal-dark-surface)) !important;
}

.entitlements-limit-modal__title {
  color: color-mix(in srgb, var(--track-primary, #2f6bff) 64%, #fff) !important;
}

.entitlements-limit-modal__message,
.entitlements-limit-modal__message span,
.entitlements-limit-modal__message span:first-child {
  color: var(--modal-dark-text-soft) !important;
  -webkit-text-fill-color: currentColor !important;
}

.entitlements-limit-modal__message span:first-child { color: var(--modal-dark-text) !important; }

.entitlements-limit-modal__close {
  background: var(--modal-dark-soft) !important;
  color: var(--modal-dark-text-soft) !important;
  border: 1px solid var(--modal-dark-border) !important;
}

/* Summer-discount conversion modal: retain its sunny identity without any
   white cards or white transient states. */
.premium-conversion-modal__dialog {
  background: linear-gradient(180deg, #17243a 0%, #111b2c 100%) !important;
}

.premium-conversion-stage {
  background:
    radial-gradient(circle at 50% 18%, rgba(251, 191, 36, .16), transparent 34%),
    linear-gradient(180deg, #1d2c44 0%, #17243a 100%) !important;
  border-color: rgba(45, 212, 191, .24) !important;
}

.premium-conversion-stage::before {
  background: linear-gradient(90deg, rgba(14, 165, 233, .10), rgba(20, 184, 166, .12)), #19283d !important;
}

.premium-conversion-stage__badge {
  color: #fde68a !important;
  background: #273044 !important;
  border-color: rgba(251, 191, 36, .34) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .24) !important;
}

.premium-conversion-modal__eyebrow { color: #7dd3fc !important; }
.premium-conversion-modal__copy { color: var(--modal-dark-text-soft) !important; }

.premium-conversion-loop > div {
  background: var(--modal-dark-raised) !important;
  border-color: rgba(45, 212, 191, .22) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .22) !important;
}

.premium-conversion-loop span {
  color: #7dd3fc !important;
  background: rgba(14, 165, 233, .14) !important;
}

.premium-conversion-loop strong { color: var(--modal-dark-text) !important; }

#premiumConversionModal .premium-conversion-modal__secondary,
#premiumConversionModal .premium-conversion-modal__secondary:is(:hover, :focus-visible, :active) {
  color: var(--modal-dark-text-soft) !important;
  background: transparent !important;
}

#premiumConversionModal .premium-conversion-modal__secondary:is(:hover, :focus-visible) {
  color: var(--modal-dark-text) !important;
  background: var(--modal-dark-soft) !important;
}

/* Welcome/trial, seasonal announcement and product-news variants. */
.premium-welcome-modal .premium-upsell-modal__dialog,
.product-updates-modal__dialog,
.session-review-entry-modal .premium-upsell-modal__dialog,
.modal__dialog,
.onboarding-modal,
.npc-onboarding-dialog {
  background: linear-gradient(180deg, var(--modal-dark-raised), var(--modal-dark-surface)) !important;
}

.premium-welcome-modal .premium-upsell-modal__dialog::after {
  border-color: var(--modal-dark-border) !important;
}

.premium-welcome-modal__ribbon,
.premium-welcome-modal__chip,
.premium-welcome-modal__reassurance,
.premium-welcome-modal__detail-card {
  background: color-mix(in srgb, #4f8edc 13%, var(--modal-dark-raised)) !important;
  border-color: color-mix(in srgb, #6bb6f3 30%, var(--modal-dark-border)) !important;
  box-shadow: none !important;
}

.premium-welcome-modal__ribbon,
.premium-welcome-modal__chip { color: #93c5fd !important; }

.premium-welcome-modal__subtitle,
.premium-welcome-modal__subtitle small,
.premium-welcome-modal__reassurance,
.premium-welcome-modal__detail-card .detail-label,
.premium-welcome-modal__detail-card .detail-value,
.welcome-trial-signature {
  color: var(--modal-dark-text-soft) !important;
  -webkit-text-fill-color: currentColor !important;
}

.premium-welcome-modal__subtitle strong { color: #93c5fd !important; }

.season-announcement-modal__eyebrow { color: #93c5fd !important; }
.season-announcement-modal__season-label,
.season-announcement-modal__detail-card .detail-value { color: var(--modal-dark-text) !important; }
.season-announcement-modal__season-dates,
.season-announcement-modal__note { color: var(--modal-dark-text-soft) !important; }

.season-announcement-modal .premium-upsell-modal__dialog {
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, .13), transparent 42%),
    linear-gradient(180deg, var(--modal-dark-raised), var(--modal-dark-surface)) !important;
}

.season-announcement-modal__eyebrow,
.season-announcement-modal__season-pill,
.season-announcement-modal__detail-card,
.season-announcement-modal__detail-card--calm,
.season-announcement-modal__list {
  background: var(--modal-dark-raised) !important;
  border-color: var(--modal-dark-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.season-announcement-modal__detail-card .detail-label { color: var(--modal-dark-text-muted) !important; }
.season-announcement-modal__subtitle { color: var(--modal-dark-text-soft) !important; }
.season-announcement-modal__subtitle strong { color: #93c5fd !important; }
.season-announcement-modal__list li { color: var(--modal-dark-text-soft) !important; }

.product-updates-modal__feature-card {
  background: linear-gradient(180deg, var(--modal-dark-raised), #142137) !important;
  border-color: var(--modal-dark-border-strong) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .24) !important;
}

.product-updates-modal__feature-card :is(h3, p) {
  color: var(--modal-dark-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

.product-updates-modal__feature-card p { color: var(--modal-dark-text-soft) !important; }
.product-updates-modal__eyebrow { color: #93c5fd !important; }

.product-updates-modal__annotation-sheet {
  background: #e8effb !important;
  border-color: rgba(191, 211, 255, .72) !important;
}

/* The statistics review prompt is followed by high-specificity inline rules;
   keep its dark surfaces stable even when those rules appear later. */
html body.tw-dashboard.stats-tailwind.stats-tailwind
  .session-review-entry-modal .premium-upsell-modal__dialog {
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, .12), transparent 44%),
    linear-gradient(180deg, var(--modal-dark-raised), var(--modal-dark-surface)) !important;
  border-color: var(--modal-dark-border-strong) !important;
}

html body.tw-dashboard.stats-tailwind.stats-tailwind
  .session-review-entry-modal__pill {
  background: var(--modal-dark-raised) !important;
  border-color: var(--modal-dark-border) !important;
}

html body.tw-dashboard.stats-tailwind.stats-tailwind
  .session-review-entry-modal__pill-label { color: var(--modal-dark-text-muted) !important; }

html body.tw-dashboard.stats-tailwind.stats-tailwind
  .session-review-entry-modal__pill-value { color: var(--modal-dark-text) !important; }

html body.tw-dashboard.stats-tailwind.stats-tailwind
  .session-review-entry-modal .premium-upsell-modal__close:is(:hover, :active, :focus-visible) {
  background: var(--modal-dark-hover) !important;
  color: var(--modal-dark-text) !important;
  border-color: var(--modal-dark-border-strong) !important;
}

/* Shared neutral chrome and interactive cards. */
.app-logout-modal__dialog h2,
.onboarding-modal :is(h2, h3, h4),
.npc-onboarding-dialog :is(h2, h3, h4) {
  color: var(--modal-dark-text) !important;
}

.app-logout-modal__dialog {
  background: linear-gradient(180deg, var(--modal-dark-raised), var(--modal-dark-surface)) !important;
  background-image: linear-gradient(180deg, var(--modal-dark-raised), var(--modal-dark-surface)) !important;
}

.app-logout-modal__dialog p,
.onboarding-modal :is(p, li, small),
.npc-onboarding-dialog :is(p, li, small) {
  color: var(--modal-dark-text-soft) !important;
}

.onboarding-header,
.onboarding-progress-row,
.onboarding-body,
.onboarding-footer,
.onboarding-card-media,
.onboarding-mini-card {
  background: var(--modal-dark-raised) !important;
  border-color: var(--modal-dark-border) !important;
}

.onboarding-body { background: var(--modal-dark-surface) !important; }
.onboarding-card-media,
.onboarding-mini-card { background: var(--modal-dark-soft) !important; }

.onboarding-modal :is(.onboarding-title, .onboarding-card-content h3,
    .onboarding-list li, .onboarding-mini-card h4) {
  color: var(--modal-dark-text) !important;
}

.onboarding-modal :is(.onboarding-subtitle, .onboarding-progress-hint,
    .onboarding-card-content p, .onboarding-mini-card p, .onboarding-note) {
  color: var(--modal-dark-text-soft) !important;
}

.onboarding-modal :is(.onboarding-chip, .onboarding-media-caption,
    .onboarding-link:not(.primary), .onboarding-btn.secondary, .onboarding-skip) {
  background: var(--modal-dark-soft) !important;
  color: color-mix(in srgb, var(--track-primary, #2f6bff) 58%, #fff) !important;
  border-color: var(--modal-dark-border-strong) !important;
}

.onboarding-modal :is(.onboarding-link:not(.primary), .onboarding-btn.secondary,
    .onboarding-skip):is(:hover, :focus-visible) {
  background: var(--modal-dark-hover) !important;
  color: var(--modal-dark-text) !important;
}

.onboarding-progress-bar { background: var(--modal-dark-soft) !important; }
.onboarding-dot { background: var(--modal-dark-border-strong) !important; }
.onboarding-dot.is-active { background: var(--track-primary, #2f6bff) !important; }

.npc-onboarding-copy__title { color: var(--modal-dark-text) !important; }
.npc-onboarding-copy__body { color: var(--modal-dark-text-soft) !important; }

.modal__close span { background: var(--modal-dark-text-soft) !important; }

/* Feedback is mounted on every route and its component sheet deliberately uses
   white hover faces in light mode. Keep every transient state inside the dark
   surface hierarchy, including the success step rendered after submission. */
.ctt-feedback-modal :is(.ctt-feedback-rating-label, .ctt-feedback-title) {
  color: var(--modal-dark-text) !important;
}

.ctt-feedback-modal :is(.ctt-feedback-kicker, .ctt-feedback-success-icon) {
  color: color-mix(in srgb, var(--track-primary, #2f6bff) 62%, #fff) !important;
}

.ctt-feedback-modal :is(.ctt-feedback-subtitle, .ctt-feedback-scale) {
  color: var(--modal-dark-text-soft) !important;
}

.ctt-feedback-modal .ctt-feedback-rating-btn {
  color: var(--modal-dark-text-soft) !important;
  background: var(--modal-dark-soft) !important;
  border-color: var(--modal-dark-border-strong) !important;
  box-shadow: none !important;
}

.ctt-feedback-modal .ctt-feedback-rating-btn:is(:hover, :focus-visible) {
  color: var(--modal-dark-text) !important;
  background: var(--modal-dark-hover) !important;
  border-color: color-mix(in srgb, var(--track-primary, #2f6bff) 54%, var(--modal-dark-border)) !important;
}

.ctt-feedback-modal .ctt-feedback-rating-btn:is(.is-selected, [aria-checked="true"]) {
  color: var(--modal-dark-text) !important;
  background: color-mix(in srgb, var(--track-primary, #2f6bff) 24%, var(--modal-dark-raised)) !important;
  border-color: color-mix(in srgb, var(--track-primary, #2f6bff) 66%, transparent) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .28) !important;
}

.ctt-feedback-modal .ctt-feedback-btn-ghost,
.ctt-feedback-modal .ctt-feedback-btn-ghost:is(:hover, :focus-visible) {
  color: var(--modal-dark-text-soft) !important;
  background: var(--modal-dark-soft) !important;
  border-color: var(--modal-dark-border-strong) !important;
}

.ctt-feedback-modal .ctt-feedback-btn-ghost:is(:hover, :focus-visible) {
  color: var(--modal-dark-text) !important;
  background: var(--modal-dark-hover) !important;
}

.ctt-feedback-modal .ctt-feedback-success-icon {
  background: color-mix(in srgb, var(--track-primary, #2f6bff) 18%, var(--modal-dark-soft)) !important;
  border: 1px solid color-mix(in srgb, var(--track-primary, #2f6bff) 42%, var(--modal-dark-border)) !important;
}

/* Dashboard friend/invite dialogs contain rows generated after the modal has
   opened. Give those rows the same hierarchy as their static shell. */
html body.tw-dashboard.dashboard-page :is(#addFriendModal, #inviteModal) {
  --modal-friend-accent: var(--track-primary, #2f6bff);
}

html body.tw-dashboard.dashboard-page :is(#addFriendModal, #inviteModal)
  :is(.modal-title, .friend-name, .request-name, .friend-list-title, .requests-header) {
  color: var(--modal-dark-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.tw-dashboard.dashboard-page :is(#addFriendModal, #inviteModal)
  :is(.friend-username, .request-details, .request-time, .invite-description,
      .search-hint, .no-results) {
  color: var(--modal-dark-text-soft) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.tw-dashboard.dashboard-page #addFriendModal
  :is(.friend-item, .modal-request-item, .search-hint, .no-results, .loading) {
  background: var(--modal-dark-raised) !important;
  border-color: var(--modal-dark-border) !important;
}

html body.tw-dashboard.dashboard-page #addFriendModal
  :is(.friend-item, .modal-request-item):is(:hover, :focus-within) {
  background: var(--modal-dark-hover) !important;
  border-color: color-mix(in srgb, var(--modal-friend-accent) 48%, var(--modal-dark-border)) !important;
}

html body.tw-dashboard.dashboard-page #inviteModal .share-btn.outline {
  color: color-mix(in srgb, var(--modal-friend-accent) 62%, #fff) !important;
  background: var(--modal-dark-raised) !important;
  border-color: color-mix(in srgb, var(--modal-friend-accent) 58%, var(--modal-dark-border)) !important;
}

html body.tw-dashboard.dashboard-page #inviteModal .share-btn.outline:is(:hover, :focus-visible),
html body.tw-dashboard.dashboard-page #inviteModal .share-btn.copied {
  color: #fff !important;
  background: var(--modal-friend-accent) !important;
}

/* system-dark-public-pages.css is intentionally loaded after this adapter and
   has a broad checkout selector. Higher specificity prevents that backdrop
   colour from leaking onto the actual subscription dialog. */
html:root body.external-page .checkout-modal-overlay {
  background: rgba(2, 6, 15, .82) !important;
}

html:root body.external-page .checkout-modal-overlay .checkout-modal {
  color: var(--modal-dark-text) !important;
  background: linear-gradient(180deg, var(--modal-dark-raised), var(--modal-dark-surface)) !important;
  border: 1px solid var(--modal-dark-border-strong) !important;
  box-shadow: 0 26px 64px rgba(0, 0, 0, .48) !important;
}

html:root body.external-page .checkout-modal-overlay .checkout-modal :is(h3, p) {
  color: var(--modal-dark-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

html:root body.external-page .checkout-modal-overlay .checkout-modal p {
  color: var(--modal-dark-text-soft) !important;
}

:is(.upsell-plan-card, .session-review-entry-modal__pill,
    .product-updates-modal__feature-card, .onboarding-card, .onboarding-mini-card,
    .premium-conversion-loop > div):is(:hover, :focus-visible) {
  background-color: var(--modal-dark-hover) !important;
  color: var(--modal-dark-text) !important;
  border-color: var(--modal-dark-border-strong) !important;
}

:is(.incomplete-quiz-modal__details, .session-review-entry-modal__pill)
  :is(span, small, strong) {
  color: var(--modal-dark-text-soft) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Keep scrollable dialogs legible on desktop and touch devices. */
:is(.premium-upsell-modal__dialog, .premium-conversion-modal__dialog,
    .product-updates-modal__dialog, .exam-track-modal__dialog,
    .modal__dialog, .entitlements-limit-modal__dialog) {
  scrollbar-color: color-mix(in srgb, var(--track-primary, #2f6bff) 72%, #fff) var(--modal-dark-raised);
}

:is(.premium-upsell-modal__dialog, .premium-conversion-modal__dialog,
    .product-updates-modal__dialog, .exam-track-modal__dialog,
    .modal__dialog, .entitlements-limit-modal__dialog)::-webkit-scrollbar-track {
  background: var(--modal-dark-raised) !important;
}

:is(.premium-upsell-modal__dialog, .premium-conversion-modal__dialog,
    .product-updates-modal__dialog, .exam-track-modal__dialog,
    .modal__dialog, .entitlements-limit-modal__dialog)::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--track-primary, #2f6bff) 72%, #fff) !important;
  border: 2px solid var(--modal-dark-raised) !important;
}

/* Checkout and late-mounted dialog completion ------------------------------
   This stylesheet is media-gated by the templates, so native controls may
   safely advertise a dark scheme here without affecting the light UI. */
:root { color-scheme: dark; }

/* Checkout success/cancel are standalone result pages rather than overlays.
   Treat their nested summaries as raised surfaces and retain semantic error
   identity instead of allowing inline light colours to leak through. */
html:root body:not(.external-page):not(.tw-dashboard)
  :is(.success-card, .cancel-card) {
  color: var(--modal-dark-text) !important;
  background: linear-gradient(180deg, var(--modal-dark-raised), var(--modal-dark-surface)) !important;
  border-color: var(--modal-dark-border-strong) !important;
  box-shadow: 0 28px 68px rgba(0, 0, 0, .48) !important;
}

html:root body:not(.external-page):not(.tw-dashboard)
  :is(.success-card, .cancel-card) :is(h1, h2, h3, strong) {
  color: var(--modal-dark-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

html:root body:not(.external-page):not(.tw-dashboard)
  :is(.success-card, .cancel-card) :is(.subtitle, .support, .next-steps, small) {
  color: var(--modal-dark-text-soft) !important;
  -webkit-text-fill-color: currentColor !important;
}

html:root body:not(.external-page):not(.tw-dashboard)
  .success-card .subscription-summary {
  color: var(--modal-dark-text-soft) !important;
  background: var(--modal-dark-raised) !important;
  border-color: var(--modal-dark-border) !important;
}

html:root body:not(.external-page):not(.tw-dashboard)
  .success-card .subscription-summary .label {
  color: var(--modal-dark-text-muted) !important;
}

html:root body:not(.external-page):not(.tw-dashboard)
  .success-card .subscription-summary--error {
  color: #fecaca !important;
  background: rgba(127, 29, 29, .25) !important;
  border-color: rgba(248, 113, 113, .42) !important;
}

html:root body:not(.external-page):not(.tw-dashboard)
  .success-card .subscription-summary--error :is(.label, strong, small) {
  color: #fecaca !important;
  -webkit-text-fill-color: currentColor !important;
}

html:root body:not(.external-page):not(.tw-dashboard)
  :is(.success-card, .cancel-card) .btn-secondary,
html:root body:not(.external-page):not(.tw-dashboard)
  :is(.success-card, .cancel-card) .btn-secondary:is(:hover, :focus-visible, :active) {
  color: var(--modal-dark-text-soft) !important;
  background: var(--modal-dark-soft) !important;
  border-color: var(--modal-dark-border) !important;
  box-shadow: none !important;
}

html:root body:not(.external-page):not(.tw-dashboard)
  :is(.success-card, .cancel-card) .btn-secondary:is(:hover, :focus-visible) {
  color: var(--modal-dark-text) !important;
  background: var(--modal-dark-hover) !important;
  border-color: var(--modal-dark-border-strong) !important;
}

html:root body:not(.external-page):not(.tw-dashboard)
  :is(.success-card, .cancel-card) :is(.support, .next-steps) a {
  color: color-mix(in srgb, var(--track-primary, #2f6bff) 62%, #fff) !important;
}

/* Existing-subscription checkout prompt, including every transient action. */
html:root body.external-page.checkout-page
  #subscription-block-modal.checkout-modal-overlay {
  background: rgba(2, 6, 15, .84) !important;
  backdrop-filter: blur(8px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(112%) !important;
}

html:root body.external-page.checkout-page
  #subscription-block-modal .checkout-modal {
  color: var(--modal-dark-text) !important;
  background: linear-gradient(180deg, var(--modal-dark-raised), var(--modal-dark-surface)) !important;
  border: 1px solid var(--modal-dark-border-strong) !important;
  box-shadow: 0 28px 68px rgba(0, 0, 0, .5) !important;
}

html:root body.external-page.checkout-page
  #subscription-block-modal .checkout-modal-icon {
  color: color-mix(in srgb, var(--track-primary, #2f6bff) 68%, #fff) !important;
  background: color-mix(in srgb, var(--track-primary, #2f6bff) 17%, var(--modal-dark-soft)) !important;
  border: 1px solid color-mix(in srgb, var(--track-primary, #2f6bff) 38%, var(--modal-dark-border)) !important;
  box-shadow: none !important;
}

html:root body.external-page.checkout-page
  #subscription-block-modal :is(h3, p) {
  color: var(--modal-dark-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

html:root body.external-page.checkout-page
  #subscription-block-modal p { color: var(--modal-dark-text-soft) !important; }

html:root body.external-page.checkout-page
  #subscription-block-modal .btn-close,
html:root body.external-page.checkout-page
  #subscription-block-modal .btn-close:is(:hover, :focus-visible, :active) {
  color: var(--modal-dark-text-soft) !important;
  background: var(--modal-dark-soft) !important;
  border-color: var(--modal-dark-border) !important;
  box-shadow: none !important;
}

html:root body.external-page.checkout-page
  #subscription-block-modal .btn-close:is(:hover, :focus-visible) {
  color: var(--modal-dark-text) !important;
  background: var(--modal-dark-hover) !important;
  border-color: var(--modal-dark-border-strong) !important;
}

/* Support dialog is assembled with inline light colours at runtime. */
html:root body.tw-dashboard .support-auth-modal__backdrop {
  background: rgba(2, 6, 15, .84) !important;
}

html:root body.tw-dashboard .support-auth-modal__dialog {
  color: var(--modal-dark-text) !important;
  background: linear-gradient(180deg, var(--modal-dark-raised), var(--modal-dark-surface)) !important;
  border-color: var(--modal-dark-border-strong) !important;
  box-shadow: 0 26px 64px rgba(0, 0, 0, .48) !important;
}

html:root body.tw-dashboard .support-auth-modal__dialog
  :is(.support-auth-modal__title, h3) {
  color: var(--modal-dark-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

html:root body.tw-dashboard .support-auth-modal__dialog
  :is(.support-auth-modal__copy, p) {
  color: var(--modal-dark-text-soft) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Entitlement dialogs are injected together with a late light-only <style>.
   These ID-scoped rules deliberately outrank that runtime stylesheet. */
html:root body #entitlementsLimitModal.entitlements-limit-modal {
  color: var(--modal-dark-text) !important;
  background: rgba(2, 6, 15, .84) !important;
}

html:root body #entitlementsLimitModal .entitlements-limit-modal__dialog {
  color: var(--modal-dark-text) !important;
  background: linear-gradient(180deg, var(--modal-dark-raised), var(--modal-dark-surface)) !important;
  border-color: var(--modal-dark-border-strong) !important;
  box-shadow: 0 26px 64px rgba(0, 0, 0, .5) !important;
}

html:root body #entitlementsLimitModal .entitlements-limit-modal__title {
  color: color-mix(in srgb, var(--track-primary, #2f6bff) 64%, #fff) !important;
}

html:root body #entitlementsLimitModal .entitlements-limit-modal__message,
html:root body #entitlementsLimitModal .entitlements-limit-modal__message span {
  color: var(--modal-dark-text-soft) !important;
  -webkit-text-fill-color: currentColor !important;
}

html:root body #entitlementsLimitModal .entitlements-limit-modal__message span:first-child {
  color: var(--modal-dark-text) !important;
}

html:root body #entitlementsLimitModal .entitlements-limit-modal__close,
html:root body #entitlementsLimitModal .entitlements-limit-modal__close:is(:hover, :focus-visible, :active) {
  color: var(--modal-dark-text-soft) !important;
  background: var(--modal-dark-soft) !important;
  border-color: var(--modal-dark-border) !important;
  box-shadow: none !important;
}

html:root body #entitlementsLimitModal .entitlements-limit-modal__close:is(:hover, :focus-visible) {
  color: var(--modal-dark-text) !important;
  background: var(--modal-dark-hover) !important;
  border-color: var(--modal-dark-border-strong) !important;
}

/* Remaining semantic icon containers: no accidental pale tiles. */
:is(.abc-pdf-coming-soon-modal__icon, .app-logout-modal__icon,
    .premium-upsell-modal__icon, .free-trial-modal__icon,
    .session-review-entry-modal__icon) {
  color: color-mix(in srgb, var(--track-primary, #2f6bff) 66%, #fff) !important;
  background: color-mix(in srgb, var(--track-primary, #2f6bff) 16%, var(--modal-dark-soft)) !important;
  border-color: color-mix(in srgb, var(--track-primary, #2f6bff) 34%, var(--modal-dark-border)) !important;
  box-shadow: none !important;
}

@media (max-width: 560px) {
  html:root body.external-page.checkout-page #subscription-block-modal.checkout-modal-overlay {
    padding:
      calc(1rem + env(safe-area-inset-top, 0px))
      .75rem
      calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  html:root body.external-page.checkout-page #subscription-block-modal .checkout-modal,
  html:root body #entitlementsLimitModal .entitlements-limit-modal__dialog,
  html:root body.tw-dashboard .support-auth-modal__dialog {
    max-width: calc(100vw - 1.5rem) !important;
    max-height: calc(100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
}
}