.afh-help-widget{position:fixed;right:1rem;bottom:6rem;z-index:1200;font-family:inherit}.whatsapp-btn{bottom:2.5rem!important}.afh-help-toggle{border:0;border-radius:999px;background:#7c3aed;color:#fff;padding:.65rem .9rem;box-shadow:0 8px 24px rgba(76,29,149,.25);font-weight:700;cursor:pointer}.afh-help-panel{display:none;width:min(340px,calc(100vw - 2rem));max-height:min(360px,65vh);overflow-y:auto;margin-bottom:.55rem;padding:1rem;border:1px solid #ddd6fe;border-radius:14px;background:#fff;color:#334155;box-shadow:0 14px 40px rgba(15,23,42,.2);font-size:.82rem;line-height:1.55}.afh-help-panel.is-open{display:block}.afh-help-panel h3{margin:0 0 .35rem;color:#4c1d95;font-size:.95rem}.afh-help-panel p{margin:.35rem 0 .7rem}.afh-help-actions{display:flex;gap:.45rem;flex-wrap:wrap}.afh-help-actions a{display:inline-block;padding:.42rem .65rem;border-radius:8px;text-decoration:none;font-weight:700;background:#7c3aed;color:#fff}.afh-help-actions a.secondary{background:#f3e8ff;color:#6b21a8}@media(max-width:600px){.whatsapp-btn{right:.9rem!important}.afh-help-widget{right:.65rem;bottom:.65rem}.afh-help-panel{max-height:55vh}.afh-help-toggle{font-size:.72rem;padding:.5rem .7rem}.afh-help-toggle .afh-help-desktop{display:none}.afh-help-toggle .afh-help-mobile{display:inline}}@media(min-width:601px){.afh-help-toggle .afh-help-mobile{display:none}}

/* Keep shared utility surfaces aligned with the active dark theme. These
   rules are intentionally last because this file is loaded after feature CSS. */
html.dark-mode .afh-help-panel,
html.dark .afh-help-panel {
  background: var(--card-bg, var(--bg-secondary)) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-light) !important;
}
html.dark-mode .afh-help-panel h3,
html.dark .afh-help-panel h3 { color: var(--text-primary) !important; }
html.dark-mode .afh-help-actions a.secondary,
html.dark .afh-help-actions a.secondary {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

html.dark-mode input:not([type="checkbox"]):not([type="radio"]),
html.dark-mode select,
html.dark-mode textarea,
html.dark input:not([type="checkbox"]):not([type="radio"]),
html.dark select,
html.dark textarea {
  background-color: var(--card-bg, var(--bg-secondary));
  color: var(--text-primary);
  border-color: var(--border-light);
}

html.dark-mode .card-link,
html.dark-mode .widget-card,
html.dark-mode .report-card,
html.dark-mode .cal-slot,
html.dark-mode #chartDisplayArea .back-btn,
html.dark .card-link,
html.dark .widget-card,
html.dark .report-card,
html.dark .cal-slot,
html.dark #chartDisplayArea .back-btn {
  background: var(--card-bg, var(--bg-secondary)) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-light) !important;
}

html.dark-mode .chart-cat-btn,
html.dark .chart-cat-btn {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* Pricing cards contain older fixed-color rules in some page bundles. Keep
   every visible text layer readable when the system preference selects dark. */
html.dark-mode .pricing-card h3,
html.dark-mode .pricing-card p,
html.dark-mode .pricing-card li,
html.dark-mode .pricing-card .pricing-duration,
html.dark .pricing-card h3,
html.dark .pricing-card p,
html.dark .pricing-card li,
html.dark .pricing-card .pricing-duration {
  color: var(--text-primary) !important;
}
html.dark-mode .pricing-card .pricing-duration,
html.dark .pricing-card .pricing-duration {
  color: var(--text-secondary) !important;
}
html.dark-mode .pricing-section,
html.dark .pricing-section {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Module pages also contain legacy inline palette values. Override only the
   common light-palette values inside dashboard content; status colors and
   chart-specific colors remain untouched. */
html.dark-mode .dash-section [style*="color:#1a1a1a"],
html.dark-mode .dash-section [style*="color: #1a1a1a"],
html.dark-mode .dash-section [style*="color:#111"],
html.dark-mode .dash-section [style*="color: #111"],
html.dark .dash-section [style*="color:#1a1a1a"],
html.dark .dash-section [style*="color: #1a1a1a"],
html.dark .dash-section [style*="color:#111"],
html.dark .dash-section [style*="color: #111"] {
  color: var(--text-primary) !important;
}
html.dark-mode .dash-section [style*="background:#fff"],
html.dark-mode .dash-section [style*="background: #fff"],
html.dark-mode .dash-section [style*="background-color:#fff"],
html.dark-mode .dash-section [style*="background-color: #fff"],
html.dark .dash-section [style*="background:#fff"],
html.dark .dash-section [style*="background: #fff"],
html.dark .dash-section [style*="background-color:#fff"],
html.dark .dash-section [style*="background-color: #fff"] {
  background: var(--card-bg, var(--bg-secondary)) !important;
}

html.dark-mode .dash-section .kp-chart-panel,
html.dark-mode .dash-section .kp-cusp-card,
html.dark-mode .dash-section .kp-planet-card,
html.dark-mode .dash-section .bnn-chart-panel,
html.dark-mode .dash-section .bnn-nak-card,
html.dark-mode .dash-section .pfr-card,
html.dark-mode .dash-section .pfr-transit-controls,
html.dark .dash-section .kp-chart-panel,
html.dark .dash-section .kp-cusp-card,
html.dark .dash-section .kp-planet-card,
html.dark .dash-section .bnn-chart-panel,
html.dark .dash-section .bnn-nak-card,
html.dark .dash-section .pfr-card,
html.dark .dash-section .pfr-transit-controls {
  background: var(--card-bg, var(--bg-secondary)) !important;
  color: var(--text-primary);
  border-color: var(--border-light) !important;
}

/* Financial Astrology uses its own light palette variables. Point those
   variables at the shared theme so every section, tab and evidence panel
   switches together instead of mixing white cards with dark page chrome. */
html.dark-mode .fa-enhanced-page,
html.dark .fa-enhanced-page,
html.dark-mode .fa-financial-dashboard,
html.dark .fa-financial-dashboard {
  --fa-bg: var(--bg-primary);
  --fa-card: var(--card-bg, var(--bg-secondary));
  --fa-border: var(--border-light);
  --fa-text: var(--text-primary);
  --fa-muted: var(--text-secondary);
}
html.dark-mode .fa-enhanced-page,
html.dark .fa-enhanced-page,
html.dark-mode .fa-financial-dashboard,
html.dark .fa-financial-dashboard,
html.dark-mode .dash-main:has(.fa-enhanced-page),
html.dark .dash-main:has(.fa-enhanced-page),
html.dark-mode .dash-main:has(.fa-financial-dashboard),
html.dark .dash-main:has(.fa-financial-dashboard) {
  background: var(--bg-primary) !important;
  color: var(--text-primary);
}
html.dark-mode .fa-enhanced-page .fa-context-strip,
html.dark-mode .fa-enhanced-page > .fa-tab-bar,
html.dark-mode .fa-enhanced-page .fa-loc-bar,
html.dark-mode .fa-enhanced-page .fa-timebar,
html.dark-mode .fa-enhanced-page .fa-sbc-card,
html.dark-mode .fa-enhanced-page .fa-western-aspect-matrix,
html.dark-mode .fa-enhanced-page .fa-weight-table-wrap,
html.dark-mode .fa-enhanced-page .panchak-tools,
html.dark-mode .fa-enhanced-page .panchak-guide-card,
html.dark .fa-enhanced-page .fa-context-strip,
html.dark .fa-enhanced-page > .fa-tab-bar,
html.dark .fa-enhanced-page .fa-loc-bar,
html.dark .fa-enhanced-page .fa-timebar,
html.dark .fa-enhanced-page .fa-sbc-card,
html.dark .fa-enhanced-page .fa-western-aspect-matrix,
html.dark .fa-enhanced-page .fa-weight-table-wrap,
html.dark .fa-enhanced-page .panchak-tools,
html.dark .fa-enhanced-page .panchak-guide-card {
  background: var(--card-bg, var(--bg-secondary)) !important;
  color: var(--text-primary);
  border-color: var(--border-light) !important;
}
html.dark-mode .fa-enhanced-page .fa-context-strip strong,
html.dark-mode .fa-enhanced-page .fa-dashboard-nav strong,
html.dark-mode .fa-enhanced-page .fa-sbc-card .dash-card-head h3,
html.dark-mode .fa-enhanced-page .panchak-tools h3,
html.dark .fa-enhanced-page .fa-context-strip strong,
html.dark .fa-enhanced-page .fa-dashboard-nav strong,
html.dark .fa-enhanced-page .fa-sbc-card .dash-card-head h3,
html.dark .fa-enhanced-page .panchak-tools h3 {
  color: var(--text-primary) !important;
}

html.dark-mode .fa-financial-dashboard .fa-dashboard-nav,
html.dark-mode .fa-financial-dashboard .fa-western-aspect-matrix,
html.dark-mode .fa-financial-dashboard .fa-weight-table-wrap,
html.dark-mode .fa-financial-dashboard .panchak-tools,
html.dark .fa-financial-dashboard .fa-dashboard-nav,
html.dark .fa-financial-dashboard .fa-western-aspect-matrix,
html.dark .fa-financial-dashboard .fa-weight-table-wrap,
html.dark .fa-financial-dashboard .panchak-tools {
  background: var(--card-bg, var(--bg-secondary)) !important;
  color: var(--text-primary);
  border-color: var(--border-light) !important;
}

/* Deep module pass: nested Financial Astrology and KP components use many
   independently named cards/panels. Keep their neutral surfaces consistent
   while leaving semantic bullish/bearish status colors intact. */
html.dark-mode .fa-financial-dashboard [class*="-card"],
html.dark-mode .fa-financial-dashboard [class*="-panel"],
html.dark-mode .fa-financial-dashboard [class*="-table-wrap"],
html.dark .fa-financial-dashboard [class*="-card"],
html.dark .fa-financial-dashboard [class*="-panel"],
html.dark .fa-financial-dashboard [class*="-table-wrap"],
html.dark-mode .kp-page [class*="-card"],
html.dark-mode .kp-page [class*="-panel"],
html.dark-mode .kp-page [class*="-toolbar"],
html.dark-mode .kp-page [class*="-table-wrap"],
html.dark .kp-page [class*="-card"],
html.dark .kp-page [class*="-panel"],
html.dark .kp-page [class*="-toolbar"],
html.dark .kp-page [class*="-table-wrap"] {
  background-color: var(--card-bg, var(--bg-secondary));
  color: var(--text-primary);
  border-color: var(--border-light);
}
html.dark-mode .kp-page,
html.dark .kp-page {
  color: var(--text-primary);
}
html.dark-mode .kp-page input,
html.dark-mode .kp-page select,
html.dark-mode .kp-page textarea,
html.dark .kp-page input,
html.dark .kp-page select,
html.dark .kp-page textarea {
  background-color: var(--card-bg, var(--bg-secondary)) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-light) !important;
}
html.dark-mode .fa-financial-dashboard h1,
html.dark-mode .fa-financial-dashboard h2,
html.dark-mode .fa-financial-dashboard h3,
html.dark-mode .fa-financial-dashboard h4,
html.dark-mode .kp-page h1,
html.dark-mode .kp-page h2,
html.dark-mode .kp-page h3,
html.dark-mode .kp-page h4,
html.dark .fa-financial-dashboard h1,
html.dark .fa-financial-dashboard h2,
html.dark .fa-financial-dashboard h3,
html.dark .fa-financial-dashboard h4,
html.dark .kp-page h1,
html.dark .kp-page h2,
html.dark .kp-page h3,
html.dark .kp-page h4 {
  color: var(--text-primary) !important;
}

/* Dashboard surfaces use the same shared theme state as the public pages. */
html.dark-mode .dash-wrap,
html.dark-mode .dash-main,
html.dark-mode .dash-section,
html.dark .dash-wrap,
html.dark .dash-main,
html.dark .dash-section {
  background: var(--bg-primary) !important;
  color: var(--text-primary);
}
html.dark-mode .dash-section-card,
html.dark-mode .dash-card,
html.dark-mode .kp-card,
html.dark-mode .panchanga-card,
html.dark-mode .booking-card,
html.dark-mode .sub-card,
html.dark-mode .order-card,
html.dark-mode .chart-card,
html.dark-mode .dash-panel-box,
html.dark-mode .section-panel,
html.dark-mode .ov-card,
html.dark .dash-section-card,
html.dark .dash-card,
html.dark .kp-card,
html.dark .panchanga-card,
html.dark .booking-card,
html.dark .sub-card,
html.dark .order-card,
html.dark .chart-card,
html.dark .dash-panel-box,
html.dark .section-panel,
html.dark .ov-card {
  background: var(--card-bg, var(--bg-secondary)) !important;
  color: var(--text-primary);
  border-color: var(--border-light) !important;
}
html.dark-mode .dash-card h2,
html.dark-mode .dash-card h3,
html.dark-mode .dash-card h4,
html.dark-mode .dash-card-head h2,
html.dark-mode .dash-card-head h3,
html.dark-mode .dash-section h2,
html.dark-mode .dash-section h3,
html.dark .dash-card h2,
html.dark .dash-card h3,
html.dark .dash-card h4,
html.dark .dash-card-head h2,
html.dark .dash-card-head h3,
html.dark .dash-section h2,
html.dark .dash-section h3 {
  color: var(--text-primary) !important;
}

/* Legacy dashboard modules use several card naming conventions. Normalize
   their neutral surfaces under the system-driven dark mode as well. */
html.dark-mode .dash-main .surface-card,
html.dark-mode .dash-main .module-card,
html.dark-mode .dash-main .card,
html.dark-mode .dash-main .fa-card,
html.dark-mode .dash-main [class$="-card"],
html.dark .dash-main .surface-card,
html.dark .dash-main .module-card,
html.dark .dash-main .card,
html.dark .dash-main .fa-card,
html.dark .dash-main [class$="-card"] {
  background: var(--card-bg, var(--bg-secondary)) !important;
  color: var(--text-primary);
  border-color: var(--border-light) !important;
}
html.dark-mode .dash-main [class$="-panel"],
html.dark-mode .dash-main .surface-panel,
html.dark .dash-main [class$="-panel"],
html.dark .dash-main .surface-panel {
  background: var(--card-bg, var(--bg-secondary)) !important;
  color: var(--text-primary);
  border-color: var(--border-light) !important;
}

/* System-only fallback: the site no longer has a manual theme toggle, so
   legacy dashboard markup must also follow the device preference directly. */
/* Device preference must not override the explicit site theme selection. */
@media (prefers-color-scheme: dark) and (not all) {
  .dash-wrap,
  .dash-main,
  .dash-section,
  .dash-main .surface-card,
  .dash-main .module-card,
  .dash-main .card,
  .dash-main .fa-card,
  .dash-main [class$="-card"],
  .dash-main [class$="-panel"],
  .dash-main .surface-panel {
    background: #141B2D !important;
    color: #F0F4FF !important;
    border-color: rgba(108, 140, 255, .18) !important;
  }
  .dash-main h1,
  .dash-main h2,
  .dash-main h3,
  .dash-main h4,
  .dash-main h5,
  .dash-main h6 {
    color: #F0F4FF !important;
  }

  .dash-content-wrap [class*="card"],
  .dash-content-wrap [class*="panel"],
  .dash-content-wrap [class*="surface"] {
    background-color: #141B2D !important;
    color: #F0F4FF !important;
    border-color: rgba(108, 140, 255, .18) !important;
  }

  .dash-content-wrap div[style*="background:#fff"],
  .dash-content-wrap div[style*="background: #fff"],
  .dash-content-wrap div[style*="background:#ffffff"],
  .dash-content-wrap div[style*="background: #ffffff"],
  .dash-content-wrap div[style*="background-color:#fff"],
  .dash-content-wrap div[style*="background-color: #fff"] {
    background: #141B2D !important;
    color: #F0F4FF !important;
  }
}