/* Public/customer-facing dark appearance. This file is loaded only when the
   operating system requests a dark color scheme. */
@media (prefers-color-scheme: dark) {
:root {
  color-scheme: dark;
  --public-dark-canvas: #080f20;
  --public-dark-surface: #111b2c;
  --public-dark-raised: #17243a;
  --public-dark-soft: #1d2c44;
  --public-dark-hover: #243650;
  --public-dark-border: rgba(174, 194, 224, .18);
  --public-dark-border-strong: rgba(174, 194, 224, .3);
  --public-dark-text: #f4f7fc;
  --public-dark-text-soft: #c1cce0;
  --public-dark-text-muted: #8fa0bb;
  --background: var(--public-dark-canvas);
  --background-light: var(--public-dark-soft);
  --background-card: var(--public-dark-surface);
  --surface: var(--public-dark-surface);
  --text-dark: var(--public-dark-text);
  --text-medium: var(--public-dark-text-soft);
  --text-light: var(--public-dark-text-muted);
  --text-primary: var(--public-dark-text);
  --text-secondary: var(--public-dark-text-soft);
  --border: var(--public-dark-border);
}

html,
body:not(.tw-dashboard) {
  background: var(--public-dark-canvas) !important;
  background-color: var(--public-dark-canvas) !important;
  color: var(--public-dark-text) !important;
}

body.external-page {
  background:
    radial-gradient(circle at 10% -12%, rgba(47, 107, 255, .27), transparent 34rem),
    radial-gradient(circle at 92% 8%, rgba(56, 189, 248, .1), transparent 30rem),
    linear-gradient(155deg, #101b35 0%, #0a1328 50%, #080f20 100%) !important;
  background-color: var(--public-dark-canvas) !important;
}

body:not(.tw-dashboard) :where(h1, h2, h3, h4, h5, h6, label, legend, strong) {
  color: var(--public-dark-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

body:not(.tw-dashboard) :where(p, li, dd, dt, small, .subtitle, .description, .helper-text, .support-copy) {
  color: var(--public-dark-text-soft) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.external-page :where(header, .main-header, .navbar, .mobile-menu, footer, .footer) {
  background-color: rgba(10, 18, 34, .96) !important;
  border-color: var(--public-dark-border) !important;
}

body:not(.tw-dashboard) :where(
  .card, .auth-card, .login-card, .registration-card, .form-card, .content-card,
  .feature-card, .benefit-card, .step-card, .testimonial-card, .support-card,
  .pricing-card, .plan-card, .contact-card, .contact-form, .info-card,
  .legal-container, .policy-container, .terms-container, .checkout-container,
  .checkout-card, .checkout-summary, .success-card, .cancel-card, .error-card,
  .payment-card, .feedback-card, .password-card, .otp-card, .banned-card,
  .faq-container, .faq-item, .comparison-table, .modal-content, .modal-dialog
) {
  background-color: var(--public-dark-surface) !important;
  background-image: none !important;
  color: var(--public-dark-text) !important;
  border-color: var(--public-dark-border) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .3) !important;
}

body:not(.tw-dashboard) :where(
  .card-inner, .field-group, .input-group, .summary-row, .price-row, .info-row,
  .faq-question, .faq-answer, .plan-option, .reason-option, .requirement-list,
  .notice, .tip, .guidance, .empty-state, .status-panel
) {
  background-color: var(--public-dark-raised) !important;
  background-image: none !important;
  color: var(--public-dark-text-soft) !important;
  border-color: var(--public-dark-border) !important;
}

body:not(.tw-dashboard) :where(input, select, textarea) {
  background-color: var(--public-dark-raised) !important;
  background-image: none !important;
  color: var(--public-dark-text) !important;
  border-color: var(--public-dark-border-strong) !important;
  caret-color: #7da2ff;
}

body:not(.tw-dashboard) :where(input, textarea)::placeholder {
  color: var(--public-dark-text-muted) !important;
  opacity: 1;
}

body:not(.tw-dashboard) :where(select option) {
  background: var(--public-dark-raised) !important;
  color: var(--public-dark-text) !important;
}

body:not(.tw-dashboard) input:-webkit-autofill,
body:not(.tw-dashboard) input:-webkit-autofill:hover,
body:not(.tw-dashboard) input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--public-dark-text) !important;
  box-shadow: 0 0 0 1000px var(--public-dark-raised) inset !important;
  transition: background-color 9999s ease-out 0s;
}

body:not(.tw-dashboard) :where(.secondary-btn, .btn-secondary, .ghost-btn, .btn-ghost, .google-btn, .back-link) {
  background-color: var(--public-dark-raised) !important;
  background-image: none !important;
  color: var(--public-dark-text) !important;
  border-color: var(--public-dark-border-strong) !important;
}

body:not(.tw-dashboard) :where(.secondary-btn, .btn-secondary, .ghost-btn, .btn-ghost, .google-btn):is(:hover, :focus-visible) {
  background-color: var(--public-dark-hover) !important;
  color: var(--public-dark-text) !important;
}

body:not(.tw-dashboard) :where(.divider, hr, .separator) {
  border-color: var(--public-dark-border) !important;
  background-color: var(--public-dark-border) !important;
}

body:not(.tw-dashboard) :where(.modal-backdrop, .overlay) {
  background-color: rgba(2, 6, 15, .76) !important;
}

body:not(.tw-dashboard) :where(.notification, .alert, .form-error, .error-message) {
  background-color: rgba(127, 29, 29, .22) !important;
  border-color: rgba(248, 113, 113, .34) !important;
  color: #fecaca !important;
}

body:not(.tw-dashboard) :where(.success-message, .alert-success) {
  background-color: rgba(6, 78, 59, .24) !important;
  border-color: rgba(52, 211, 153, .34) !important;
  color: #a7f3d0 !important;
}

body:not(.tw-dashboard) :where(table, thead, tbody, tr, th, td) {
  background-color: transparent !important;
  color: var(--public-dark-text-soft) !important;
  border-color: var(--public-dark-border) !important;
}

body:not(.tw-dashboard) :where(.faq-question, .accordion-button) {
  color: var(--public-dark-text) !important;
}

body:not(.tw-dashboard) :where(.faq-answer, .accordion-content) {
  color: var(--public-dark-text-soft) !important;
}

/* Standalone legal, password, checkout/payment and error templates contain
   late inline light surfaces. Scope the bridge to their structural elements. */
body:not(.external-page):not(.tw-dashboard) > :where(main, .container, .wrapper, .page-shell, .error-shell) {
  background-color: var(--public-dark-surface) !important;
  background-image: none !important;
  color: var(--public-dark-text) !important;
  border-color: var(--public-dark-border) !important;
}

body:not(.tw-dashboard) [style*="background: white" i],
body:not(.tw-dashboard) [style*="background:#fff" i],
body:not(.tw-dashboard) [style*="background: #fff" i],
body:not(.tw-dashboard) [style*="background-color: white" i],
body:not(.tw-dashboard) [style*="background-color:#fff" i] {
  background: var(--public-dark-surface) !important;
  background-color: var(--public-dark-surface) !important;
  color: var(--public-dark-text) !important;
  border-color: var(--public-dark-border) !important;
}

body:not(.tw-dashboard) ::selection {
  background: rgba(47, 107, 255, .42);
  color: #ffffff;
}

/* Cookie consent is shared by public and authenticated pages and uses its own
   very high z-index contract. Preserve that contract while darkening chrome. */
.cct-cookie-banner,
.cct-modal-card,
.cct-modal-header,
.cct-category {
  background: var(--public-dark-surface, #111b2c) !important;
  background-image: none !important;
  color: var(--public-dark-text, #f4f7fc) !important;
  border-color: var(--public-dark-border, rgba(174, 194, 224, .18)) !important;
  box-shadow: 0 20px 52px rgba(0, 0, 0, .38) !important;
}

.cct-modal-backdrop { background: rgba(2, 6, 15, .82) !important; }

:where(.cct-banner-title, .cct-modal-title, .cct-cat-title) {
  color: var(--public-dark-text, #f4f7fc) !important;
}

:where(.cct-banner-text, .cct-modal-desc, .cct-cat-note) {
  color: var(--public-dark-text-soft, #c1cce0) !important;
}

:where(.cct-btn-secondary, .cct-btn-ghost) {
  background: var(--public-dark-raised, #17243a) !important;
  color: var(--public-dark-text, #f4f7fc) !important;
  border-color: var(--public-dark-border-strong, rgba(174, 194, 224, .3)) !important;
}

.cct-toggle:not(:checked) {
  background: var(--public-dark-soft, #1d2c44) !important;
  border-color: var(--public-dark-border-strong, rgba(174, 194, 224, .3)) !important;
}

/* Page-level public adapters. Public templates intentionally own rich, highly
   specific light styling; these rules mirror those components in dark mode
   without changing their geometry or the light-mode cascade. */
html body.external-page.tw-homepage section.hero,
html body.external-page.tw-homepage .logos-container {
  background: var(--public-dark-raised) !important;
  background-color: var(--public-dark-raised) !important;
  background-image: none !important;
  border-color: var(--public-dark-border) !important;
}

html body.external-page.tw-homepage :is(.feature-card, .testimonial-card) {
  background: var(--public-dark-surface) !important;
  background-color: var(--public-dark-surface) !important;
  background-image: none !important;
  color: var(--public-dark-text) !important;
  border-color: var(--public-dark-border) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .28) !important;
}

html body.external-page.tw-homepage :is(
  .step, .step-card, .benefit-card, .support-item, .support-card,
  .quiz-container, .quiz-preview-container, .daily-tip-container,
  .gamification-container, .progress-container, .progress-card
) {
  background: var(--public-dark-surface) !important;
  background-color: var(--public-dark-surface) !important;
  background-image: none !important;
  color: var(--public-dark-text) !important;
  border-color: var(--public-dark-border) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .28) !important;
}

html body.external-page.tw-homepage :is(
  .step, .step-card, .benefit-card, .support-item, .support-card,
  .quiz-container, .quiz-preview-container, .daily-tip-container,
  .gamification-container, .progress-container, .progress-card
) :where(h3, h4, p, span, li, strong) {
  color: var(--public-dark-text-soft) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.external-page.tw-homepage :is(
  .step, .step-card, .benefit-card, .support-item, .support-card,
  .quiz-container, .quiz-preview-container, .daily-tip-container,
  .gamification-container, .progress-container, .progress-card
) :where(h3, h4, strong) {
  color: var(--public-dark-text) !important;
}

html body.external-page.tw-homepage :is(.feature-card, .testimonial-card)
  :where(h3, h4, p, span, strong) {
  color: var(--public-dark-text-soft) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.external-page.tw-homepage :is(.feature-card, .testimonial-card) :where(h3, h4, strong) {
  color: var(--public-dark-text) !important;
}

html body.external-page :is(.platform-preview, .comparison-section, .story-section, .team-section, .distinct-section) {
  background: var(--public-dark-surface) !important;
  background-color: var(--public-dark-surface) !important;
  background-image: none !important;
  color: var(--public-dark-text) !important;
  border-color: var(--public-dark-border) !important;
}

html body.external-page :is(.platform-preview, .comparison-section, .story-section, .team-section, .distinct-section)
  :where(h2, h3, h4, p, li, span, strong) {
  color: var(--public-dark-text-soft) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.external-page :is(.platform-preview, .comparison-section, .story-section, .team-section, .distinct-section)
  :where(h2, h3, h4, strong) {
  color: var(--public-dark-text) !important;
}

html body.tw-register .registration-container .form-container {
  background: var(--public-dark-surface) !important;
  background-color: var(--public-dark-surface) !important;
  background-image: none !important;
  color: var(--public-dark-text) !important;
  border-color: var(--public-dark-border) !important;
  box-shadow: 0 22px 56px rgba(0, 0, 0, .36) !important;
}

html body.external-page.tw-register .registration-container .form-container .form-card {
  background: var(--public-dark-surface) !important;
  background-color: var(--public-dark-surface) !important;
  background-image: none !important;
  color: var(--public-dark-text) !important;
  border-color: var(--public-dark-border) !important;
  box-shadow: 0 22px 56px rgba(0, 0, 0, .36) !important;
}

html body.external-page.tw-register .registration-container .form-container .form-card
  :where(.form-title, .form-group label) {
  color: var(--public-dark-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.external-page.tw-register .registration-container .form-container .form-card
  :where(.registration-hero p, .terms-text, .login-link, .requirement-item, .password-strength-text) {
  color: var(--public-dark-text-soft) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.tw-register .registration-container .form-container
  :is(input.form-control, input.picker-input, select.picker-select) {
  background: var(--public-dark-raised) !important;
  background-color: var(--public-dark-raised) !important;
  background-image: none !important;
  color: var(--public-dark-text) !important;
  border-color: var(--public-dark-border-strong) !important;
}

html body.tw-register .registration-container .form-container
  :is(.birthdate-picker, .password-requirements) {
  background: var(--public-dark-soft) !important;
  background-color: var(--public-dark-soft) !important;
  background-image: none !important;
  color: var(--public-dark-text-soft) !important;
  border-color: var(--public-dark-border) !important;
}

html body.tw-register .registration-container .form-container
  :where(label, .requirement, .requirement-text, .terms-checkbox, .strength-text) {
  color: var(--public-dark-text-soft) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.tw-login :is(input.form-input, select.form-input, textarea.form-input) {
  background: var(--public-dark-raised) !important;
  background-color: var(--public-dark-raised) !important;
  background-image: none !important;
  color: var(--public-dark-text) !important;
  border-color: var(--public-dark-border-strong) !important;
}

html body.external-page.tw-login input#id_username.form-input,
html body.external-page.tw-login input#id_password.form-input {
  background: var(--public-dark-raised) !important;
  background-color: var(--public-dark-raised) !important;
  background-image: none !important;
  color: var(--public-dark-text) !important;
  border-color: var(--public-dark-border-strong) !important;
}

html body.external-page .ban-icon {
  background: rgba(244, 63, 94, .14) !important;
  border-color: rgba(251, 113, 133, .28) !important;
}

html body:not(.tw-dashboard):not(.external-page) :is(.legal-content, .policy-content, .terms-content) p,
html body:not(.tw-dashboard):not(.external-page) :is(.legal-content, .policy-content, .terms-content) li {
  background-color: transparent !important;
  color: var(--public-dark-text-soft) !important;
}

html body:not(.tw-dashboard) p[style*="#EEF3FE" i] {
  background: var(--public-dark-soft) !important;
  background-color: var(--public-dark-soft) !important;
  color: var(--public-dark-text-soft) !important;
  border-color: #2f6bff !important;
}

/* The sign-in CTA is deliberately the white branded tactile button in both
   schemes; it is not an unthemed surface. Keep its normal border behavior. */
html body.external-page :is(.btn-login, .mobile-login-btn) {
  background: #ffffff !important;
  color: #1e54d6 !important;
  border-color: rgba(47, 107, 255, .24) !important;
}

/* Platform scrollbar foundation. Intentionally hidden scrollbars stay hidden:
   this dark-only layer changes colours, never visibility or dimensions. */
:root {
  --public-dark-scrollbar-track: #0b1423;
  --public-dark-scrollbar-thumb: #2f6bff;
  --public-dark-scrollbar-thumb-hover: #1e54d6;
}

html,
body:not(.tw-dashboard),
body:not(.tw-dashboard) :where(*) {
  scrollbar-color: var(--public-dark-scrollbar-thumb) var(--public-dark-scrollbar-track) !important;
}

html::-webkit-scrollbar-track,
body:not(.tw-dashboard)::-webkit-scrollbar-track,
body:not(.tw-dashboard) :where(*)::-webkit-scrollbar-track {
  background: var(--public-dark-scrollbar-track) !important;
}

html::-webkit-scrollbar-thumb,
body:not(.tw-dashboard)::-webkit-scrollbar-thumb,
body:not(.tw-dashboard) :where(*)::-webkit-scrollbar-thumb {
  background: var(--public-dark-scrollbar-thumb) !important;
  border-color: var(--public-dark-scrollbar-track) !important;
}

html::-webkit-scrollbar-thumb:hover,
body:not(.tw-dashboard)::-webkit-scrollbar-thumb:hover,
body:not(.tw-dashboard) :where(*)::-webkit-scrollbar-thumb:hover {
  background: var(--public-dark-scrollbar-thumb-hover) !important;
}

html::-webkit-scrollbar-corner,
body:not(.tw-dashboard)::-webkit-scrollbar-corner,
body:not(.tw-dashboard) :where(*)::-webkit-scrollbar-corner {
  background: var(--public-dark-scrollbar-track) !important;
}
}