/* ==========================================================================
   dark.css — Dark theme for the components that paint their own colours
   (site chrome, home page, cards, tables, auth screens). The design tokens
   themselves flip in variables.css; this file catches the hard-coded values.
   Loaded on every page after the component styles.
   ========================================================================== */

html[data-theme="dark"] body { background: var(--color-background); color: var(--color-on-surface); }

/* ── Theme toggle button ───────────────────────────────────────────────── */
.theme-toggle {
  width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface-variant);
  cursor: pointer; position: relative; flex-shrink: 0;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.theme-toggle:hover { color: var(--color-primary); border-color: var(--color-primary); }
.theme-toggle .theme-toggle-icon { display: inline-flex; transition: opacity .18s ease, transform .18s ease; }
.theme-toggle .theme-icon-dark { position: absolute; opacity: 0; transform: rotate(-90deg) scale(.6); }
html[data-theme="dark"] .theme-toggle .theme-icon-light { opacity: 0; transform: rotate(90deg) scale(.6); }
html[data-theme="dark"] .theme-toggle .theme-icon-dark { opacity: 1; transform: none; }
.dash-topbar .theme-toggle { width: 38px; height: 38px; }

/* ── Site chrome ───────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  --chrome-ink: #eef0ff;
  --chrome-ink-soft: #aab3cc;
  --chrome-line: #263255;
  --chrome-brand: #c5d4ff;
  --chrome-brand-soft: rgba(147, 180, 255, .18);
}
html[data-theme="dark"] { --chrome-header-bg: rgba(14, 20, 36, .74); }
html[data-theme="dark"] .site-header { background: rgba(14, 20, 36, .74); background: var(--chrome-header-bg, rgba(14, 20, 36, .74)); }
html[data-theme="dark"] .site-header.is-stuck { box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .mega-dropdown {
  background: #131b2e;
  background: var(--color-surface-container-low, #131b2e);
  border-color: var(--color-outline-variant, #2b3958);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .mega-dropdown::before { border-color: rgba(255, 255, 255, .1); left: 22px; transform: rotate(45deg); }
html[data-theme="dark"] .mega-card:hover { background: rgba(255, 255, 255, .06); box-shadow: none; }
html[data-theme="dark"] .mega-head { border-bottom-color: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .icon-action,
html[data-theme="dark"] .nav-toggle,
html[data-theme="dark"] .theme-toggle { background: #131b2e; border-color: #263255; color: #c3cbe4; }
html[data-theme="dark"] .drawer-panel { background: #0e1424; }
html[data-theme="dark"] .drawer-link,
html[data-theme="dark"] .drawer-group,
html[data-theme="dark"] .drawer-group-body a,
html[data-theme="dark"] .drawer-section-label { border-color: #243049; }
html[data-theme="dark"] .drawer-head, html[data-theme="dark"] .drawer-foot { border-color: #1e2740; background: #0b1120; }
html[data-theme="dark"] .drawer-close { background: #131b2e; border-color: #263255; color: #dfe4f5; }
html[data-theme="dark"] .drawer-group-body a { color: #e8eefc; }
html[data-theme="dark"] .drawer-link,
html[data-theme="dark"] .drawer-group-trigger { color: #e8eefc; }
html[data-theme="dark"] .drawer-link:hover, html[data-theme="dark"] .drawer-group-trigger:hover,
html[data-theme="dark"] .drawer-group-body a:hover { background: rgba(255, 255, 255, .06); color: #c5d4ff; }
html[data-theme="dark"] .bottom-nav { background: rgba(14, 20, 36, .9); border-top-color: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .brand-logo { filter: brightness(0) invert(1); opacity: .92; }
html[data-theme="dark"] .site-footer .brand-logo { opacity: .92; }

/* ── Cards, panels, tables ─────────────────────────────────────────────── */
html[data-theme="dark"] .card,
html[data-theme="dark"] .chart-panel,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .svc-card,
html[data-theme="dark"] .blog-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .svc-review,
html[data-theme="dark"] .support-block,
html[data-theme="dark"] .track-card,
html[data-theme="dark"] .menu-card,
html[data-theme="dark"] .faq-block,
html[data-theme="dark"] .svc-review-row,
html[data-theme="dark"] .quick-account {
  background: var(--color-surface-container-lowest);
  border-color: var(--color-outline-variant);
  color: var(--color-on-surface);
}
html[data-theme="dark"] .svc-stat-icon {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
html[data-theme="dark"] .svc-stat-icon .icon,
html[data-theme="dark"] .svc-stat-icon svg {
  color: #fff;
  stroke: #fff;
}
html[data-theme="dark"] .data-table thead { background: var(--color-surface-container-low); }
html[data-theme="dark"] .data-table td { border-top-color: var(--color-outline-variant); }
html[data-theme="dark"] .data-table tbody tr:hover { background: rgba(255, 255, 255, .04); }
html[data-theme="dark"] .table-wrap { border-color: var(--color-outline-variant); }
html[data-theme="dark"] .modal { background: var(--color-surface-container-low); color: var(--color-on-surface); }
html[data-theme="dark"] .form-input, html[data-theme="dark"] .input,
html[data-theme="dark"] .textarea, html[data-theme="dark"] select.form-input {
  background: var(--color-surface-container-low);
  border-color: var(--color-outline-variant);
  color: var(--color-on-surface);
}
html[data-theme="dark"] .rte { background: var(--color-surface-container-low); border-color: var(--color-outline-variant); }
html[data-theme="dark"] .rte-toolbar, html[data-theme="dark"] .rte-status { background: var(--color-surface-container); border-color: var(--color-outline-variant); }
html[data-theme="dark"] .rte-surface { color: var(--color-on-surface); }
html[data-theme="dark"] .img-uploader, html[data-theme="dark"] .img-uploader-empty { background: var(--color-surface-container-low); border-color: var(--color-outline-variant); }
html[data-theme="dark"] .doc-pill { background: var(--color-surface-container-low); border-color: var(--color-outline-variant); color: var(--color-on-surface); }
html[data-theme="dark"] .btn-outline { color: var(--color-on-surface); border-color: var(--color-outline-variant); }
html[data-theme="dark"] .btn-outline:hover { background: var(--color-surface-container); }

/* ── Home page (its own palette) ───────────────────────────────────────── */
html[data-theme="dark"] .home-hub { background: var(--color-background); color: var(--color-on-surface); }
html[data-theme="dark"] .hub-section.soft { background: var(--color-surface-container-low); }
html[data-theme="dark"] .home-hub .service,
html[data-theme="dark"] .trust-card,
html[data-theme="dark"] .review,
html[data-theme="dark"] .trust-badges > div,
html[data-theme="dark"] .review-summary {
  background: var(--color-surface-container-lowest);
  border-color: var(--color-outline-variant);
  color: var(--color-on-surface);
}
html[data-theme="dark"] .home-hub .service h3,
html[data-theme="dark"] .trust-card h3,
html[data-theme="dark"] .review-top b,
html[data-theme="dark"] .trust-badges b,
html[data-theme="dark"] .section-head h2,
html[data-theme="dark"] .hub-hero h1 { color: var(--color-on-surface); }
html[data-theme="dark"] .home-hub .service p,
html[data-theme="dark"] .trust-card p,
html[data-theme="dark"] .section-head p,
html[data-theme="dark"] .hub-hero p,
html[data-theme="dark"] .review p { color: var(--color-on-surface-variant); }
html[data-theme="dark"] .trust-strip { background: var(--color-surface-container-low); border-color: var(--color-outline-variant); }
html[data-theme="dark"] .home-hub .svc-ico,
html[data-theme="dark"] .trust-card-icon { background: rgba(255, 255, 255, .12); color: #fff; }
html[data-theme="dark"] .trust-badge-icon { background: rgba(52, 211, 153, .14); color: #6ee7b7; }
html[data-theme="dark"] .rating-bars i { background: var(--color-surface-container-high); }

/* ── Auth screens (Tailwind utility colours) ───────────────────────────── */
html[data-theme="dark"] .auth-split-page, html[data-theme="dark"] .auth-right-panel { background: var(--color-background); }
html[data-theme="dark"] .auth-form-card, html[data-theme="dark"] .auth-input { background: var(--color-surface-container-low); border-color: var(--color-outline-variant); }
html[data-theme="dark"] .auth-input-field { background: transparent; color: var(--color-on-surface); }
html[data-theme="dark"] .auth-field-label, html[data-theme="dark"] .text-on-surface { color: var(--color-on-surface) !important; }
html[data-theme="dark"] .text-on-surface-variant { color: var(--color-on-surface-variant) !important; }
html[data-theme="dark"] .bg-white { background: var(--color-surface-container-low) !important; }
html[data-theme="dark"] .bg-surface, html[data-theme="dark"] .bg-surface-container-low { background: var(--color-surface-container) !important; }
html[data-theme="dark"] .border-outline-variant { border-color: var(--color-outline-variant) !important; }
html[data-theme="dark"] .staff-card, html[data-theme="dark"] .staff-main { background: var(--color-surface-container-lowest); }
html[data-theme="dark"] .staff-main { background: var(--color-background); }
html[data-theme="dark"] .quick-account .qa-role { color: var(--color-on-surface); }

/* ── Glass / premium panels that paint their own rgba white ────────────── */
html[data-theme="dark"] .glass-panel,
html[data-theme="dark"] .services-sidebar,
html[data-theme="dark"] .svc-card-v2,
html[data-theme="dark"] .review-card-premium,
html[data-theme="dark"] .blog-card-premium,
html[data-theme="dark"] .scheme-card-premium,
html[data-theme="dark"] .stat-box,
html[data-theme="dark"] .work-card,
html[data-theme="dark"] .info-banner,
html[data-theme="dark"] .trust-badges,
html[data-theme="dark"] .faq-list details,
html[data-theme="dark"] .process .step,
html[data-theme="dark"] .legal-card,
html[data-theme="dark"] .hub-dashboard {
  background: var(--color-surface-container-low) !important;
  border-color: var(--color-outline-variant) !important;
  color: var(--color-on-surface);
}
html[data-theme="dark"] .svc-card-v2-icon,
html[data-theme="dark"] .scheme-icon,
html[data-theme="dark"] .legal-icon,
html[data-theme="dark"] .work-icon,
html[data-theme="dark"] .stat-icon {
  background: rgba(255, 255, 255, .12) !important;
  color: #fff !important;
}
html[data-theme="dark"] .svc-card-v2-title,
html[data-theme="dark"] .svc-card-v2-title a,
html[data-theme="dark"] .trust-badges b,
html[data-theme="dark"] .process .step h3,
html[data-theme="dark"] .legal-card h3 { color: var(--color-on-surface); }
html[data-theme="dark"] .svc-card-v2-desc,
html[data-theme="dark"] .trust-badges span,
html[data-theme="dark"] .process .step p,
html[data-theme="dark"] .legal-card p { color: var(--color-on-surface-variant); }
html[data-theme="dark"] .svc-card-v2-time { background: var(--color-surface-container); color: var(--color-on-surface-variant); }
html[data-theme="dark"] .hub-hero { background: var(--color-background); }
html[data-theme="dark"] .hub-badge { background: var(--color-surface-container); color: var(--color-on-surface); }

/* Form controls (Tailwind's forms plugin hard-codes white) */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .auth-input,
html[data-theme="dark"] .auth-input-field {
  background-color: var(--color-surface-container-low) !important;
  border-color: var(--color-outline-variant);
  color: var(--color-on-surface);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--color-outline); }
html[data-theme="dark"] .auth-form-card { background: var(--color-surface-container-lowest) !important; }
html[data-theme="dark"] .sidebar-hint { background: rgba(255, 255, 255, .06); }

/* Anything still painting pure white gets the dark surface instead */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"] {
  background: var(--color-surface-container-lowest) !important;
}

/* ==========================================================================
   DASHBOARDS IN DARK
   Page → sidebar → topbar → card, each a visible step apart.
   ========================================================================== */
html[data-theme="dark"] .dash-shell { background: var(--color-background); }
html[data-theme="dark"] .dash-main { background: var(--color-background); }
html[data-theme="dark"] .dash-content { background: transparent; }

/* Sidebar — one shade below the content area, with a hairline separator */
html[data-theme="dark"] .dash-sidebar,
html[data-theme="dark"] .dash-sidebar.is-dark {
  background: #0b1220;
  color: var(--color-on-surface);
  border-right: 1px solid rgba(255, 255, 255, .07);
}
html[data-theme="dark"] .dash-sidebar .sidebar-brand,
html[data-theme="dark"] .dash-sidebar.is-dark .sidebar-brand { border-bottom-color: rgba(255, 255, 255, .07); }
html[data-theme="dark"] .dash-sidebar .dash-nav-group-label,
html[data-theme="dark"] .dash-sidebar.is-dark .dash-nav-group-label { color: rgba(233, 237, 250, .42); }
html[data-theme="dark"] .dash-sidebar .dash-nav-link,
html[data-theme="dark"] .dash-sidebar.is-dark .dash-nav-link { color: rgba(233, 237, 250, .78); }
html[data-theme="dark"] .dash-sidebar .dash-nav-link:hover,
html[data-theme="dark"] .dash-sidebar.is-dark .dash-nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
html[data-theme="dark"] .dash-sidebar .dash-nav-link.is-active,
html[data-theme="dark"] .dash-sidebar.is-dark .dash-nav-link.is-active {
  background: #2563eb; color: #fff;
}
html[data-theme="dark"] .dash-sidebar .brand-mark-img { background: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .sidebar-hint,
html[data-theme="dark"] .dash-sidebar:not(.is-dark) .sidebar-hint {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .08);
  color: rgba(233, 237, 250, .7);
}

/* Topbar */
html[data-theme="dark"] .dash-topbar {
  background: rgba(15, 22, 38, .86);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--color-outline-variant);
}
html[data-theme="dark"] .topbar-page-title { color: var(--color-on-surface); }
html[data-theme="dark"] .topbar-page-sub { color: var(--color-on-surface-variant); }
html[data-theme="dark"] .user-menu-btn { background: var(--color-surface-container-low); border-color: var(--color-outline-variant); color: var(--color-on-surface); }
html[data-theme="dark"] .user-menu-btn:hover { background: var(--color-surface-container); }
html[data-theme="dark"] .user-menu-panel,
html[data-theme="dark"] .notif-dropdown,
html[data-theme="dark"] .user-dropdown {
  background: var(--color-surface-container-low);
  border-color: var(--color-outline-variant);
  box-shadow: var(--shadow-2);
  color: var(--color-on-surface);
}
html[data-theme="dark"] .user-menu-panel a:hover,
html[data-theme="dark"] .notif-item:hover { background: var(--color-surface-container); }
html[data-theme="dark"] .dash-menu-btn { color: var(--color-on-surface); }

/* Panels, cards and tables inside the console */
html[data-theme="dark"] .chart-panel,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .stat-box,
html[data-theme="dark"] .card,
html[data-theme="dark"] .work-card,
html[data-theme="dark"] .section-row,
html[data-theme="dark"] .guide-steps li,
html[data-theme="dark"] .timeline-item,
html[data-theme="dark"] .doc-check-item,
html[data-theme="dark"] .service-select-card,
html[data-theme="dark"] .doc-upload-row,
html[data-theme="dark"] .apply-step-circle,
html[data-theme="dark"] .perm-legend div,
html[data-theme="dark"] .menu-item-row .form-input {
  background: var(--color-surface-container-lowest);
  border-color: var(--color-outline-variant);
  color: var(--color-on-surface);
}
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .menu-card-head { border-color: var(--color-outline-variant); background: var(--color-surface-container-low); }
html[data-theme="dark"] .guide-panel {
  background: linear-gradient(135deg, rgba(126, 162, 255, .14), var(--color-surface-container-lowest) 70%);
  border-color: var(--color-outline-variant);
}
html[data-theme="dark"] .guide-tour-card { background: var(--color-surface-container-lowest); border-color: var(--color-outline-variant); color: var(--color-on-surface); }
html[data-theme="dark"] .dash-filter-wrap.is-open .filter-row,
html[data-theme="dark"] .dash-filter-wrap.is-open .filter-bar {
  background: var(--color-surface-container-lowest);
}
html[data-theme="dark"] .guide-badge { background: var(--color-surface-container); }
html[data-theme="dark"] .data-table th { color: var(--color-on-surface-variant); }
html[data-theme="dark"] .data-table td { color: var(--color-on-surface); }
html[data-theme="dark"] .table-wrap { background: var(--color-surface-container-lowest); }
html[data-theme="dark"] .tabs, html[data-theme="dark"] .tab-list { border-bottom-color: var(--color-outline-variant); }
html[data-theme="dark"] .tab-btn { color: var(--color-on-surface-variant); }
html[data-theme="dark"] .tab-btn.is-active { color: var(--color-primary); border-color: var(--color-primary); }
html[data-theme="dark"] .modal-overlay { background: rgba(3, 7, 18, .72); }
html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--color-outline-variant); }
html[data-theme="dark"] .empty-state { color: var(--color-on-surface-variant); }
html[data-theme="dark"] .text-muted { color: var(--color-on-surface-variant) !important; }
html[data-theme="dark"] .perm-switch .track { background: var(--color-surface-container-high); }
html[data-theme="dark"] .ta-conn { background: var(--color-surface-container-lowest); border-color: var(--color-outline-variant); }
html[data-theme="dark"] .ta-source .track, html[data-theme="dark"] .ta-index div { background: var(--color-surface-container); }
html[data-theme="dark"] .svc-pick label { background: var(--color-surface-container-lowest); border-color: var(--color-outline-variant); }
html[data-theme="dark"] .set-note { background: var(--color-info-container); color: var(--color-on-info-container); }

/* ==========================================================================
   Literal fallbacks for the key dark surfaces.
   Each declaration is written twice: a plain colour first, the token second.
   If a browser (or an embedded webview) ever fails to resolve the custom
   property, the panel still paints dark instead of falling back to
   transparent-over-white.
   ========================================================================== */
html[data-theme="dark"] body,
html[data-theme="dark"] .dash-shell,
html[data-theme="dark"] .dash-main {
  background: #080d18;
  background: var(--color-background, #080d18);
  color: #e9edfa;
  color: var(--color-on-surface, #e9edfa);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .chart-panel,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .stat-box,
html[data-theme="dark"] .section-row,
html[data-theme="dark"] .work-card,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .guide-steps li,
html[data-theme="dark"] .svc-card,
html[data-theme="dark"] .blog-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .support-block,
html[data-theme="dark"] .svc-pricing-card,
html[data-theme="dark"] .review,
html[data-theme="dark"] .home-hub .service,
html[data-theme="dark"] .trust-card {
  background: #121a2c;
  background: var(--color-surface-container-lowest, #121a2c);
  border-color: #2b3958;
  border-color: var(--color-outline-variant, #2b3958);
  color: #e9edfa;
  color: var(--color-on-surface, #e9edfa);
}
html[data-theme="dark"] .data-table thead,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .hub-section.soft,
html[data-theme="dark"] .trust-strip,
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .input,
html[data-theme="dark"] .textarea,
html[data-theme="dark"] .modal {
  background: #172037;
  background: var(--color-surface-container-low, #172037);
  border-color: #2b3958;
  border-color: var(--color-outline-variant, #2b3958);
  color: #e9edfa;
  color: var(--color-on-surface, #e9edfa);
}
html[data-theme="dark"] .data-table td { border-top-color: #2b3958; border-top-color: var(--color-outline-variant, #2b3958); }
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .form-hint,
html[data-theme="dark"] .kpi-label,
html[data-theme="dark"] .section-row-text span {
  color: #a7b2ca !important;
  color: var(--color-on-surface-variant, #a7b2ca) !important;
}

/* Dark theme: readable brand-blue text + white labels on filled buttons */
html[data-theme="dark"] {
  --chrome-brand: #c5d4ff;
}
html[data-theme="dark"] .text-primary,
html[data-theme="dark"] .home-hub .eyebrow,
html[data-theme="dark"] .home-hub .svc-more,
html[data-theme="dark"] .home-hub .service a,
html[data-theme="dark"] .legal-card a,
html[data-theme="dark"] .num,
html[data-theme="dark"] .faq-list summary:after,
html[data-theme="dark"] .faq-trigger:hover,
html[data-theme="dark"] .faq-trigger[aria-expanded="true"],
html[data-theme="dark"] .nav-mega-item:hover .nav-mega-trigger,
html[data-theme="dark"] .mega-eyebrow,
html[data-theme="dark"] .mega-side small,
html[data-theme="dark"] .mobile-mega-group strong,
html[data-theme="dark"] .svc-card-more,
html[data-theme="dark"] .blog-card-more,
html[data-theme="dark"] .blog-toc a,
html[data-theme="dark"] .rich-text a,
html[data-theme="dark"] .quick-account:hover .qa-go {
  color: #c5d4ff;
}
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-get-started,
html[data-theme="dark"] .btn-apply-now,
html[data-theme="dark"] .home-hub .btn-primary,
html[data-theme="dark"] a.btn-primary,
html[data-theme="dark"] button.btn-primary {
  color: #fff !important;
  background: #2563eb !important;
  border-color: #2563eb !important;
}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-get-started:hover,
html[data-theme="dark"] .btn-apply-now:hover,
html[data-theme="dark"] .home-hub .btn-primary:hover {
  background: #3b82f6 !important;
  color: #fff !important;
}
html[data-theme="dark"] .btn-primary .icon,
html[data-theme="dark"] .btn-get-started .icon,
html[data-theme="dark"] .btn-apply-now .icon {
  color: #fff !important;
}
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .home-hub .btn-outline,
html[data-theme="dark"] .home-hub .btn-ghost {
  color: #fff !important;
}
html[data-theme="dark"] .home-hub .btn-outline {
  border-color: #4a5675 !important;
  background: transparent !important;
}
html[data-theme="dark"] .cta-panel .btn-primary,
html[data-theme="dark"] .blog-cta .btn-primary,
html[data-theme="dark"] .support-band .btn-primary,
html[data-theme="dark"] .hub-cta .btn-primary,
html[data-theme="dark"] .hub-cta-primary {
  background: #fff !important;
  color: #0f1b33 !important;
  border-color: #fff !important;
}
html[data-theme="dark"] .cta-panel .btn-primary:hover,
html[data-theme="dark"] .blog-cta .btn-primary:hover,
html[data-theme="dark"] .support-band .btn-primary:hover,
html[data-theme="dark"] .hub-cta .btn-primary:hover,
html[data-theme="dark"] .hub-cta-primary:hover {
  background: #eaf0ff !important;
  color: #0f1b33 !important;
}
html[data-theme="dark"] .cta-panel .btn-outline,
html[data-theme="dark"] .blog-cta .btn-outline,
html[data-theme="dark"] .support-band .btn-outline,
html[data-theme="dark"] .support-band .btn-ghost,
html[data-theme="dark"] .hub-cta-ghost {
  color: #fff !important;
}
html[data-theme="dark"] .cta-panel .btn-primary .icon,
html[data-theme="dark"] .blog-cta .btn-primary .icon,
html[data-theme="dark"] .support-band .btn-primary .icon,
html[data-theme="dark"] .hub-cta-primary .icon {
  color: #0f1b33 !important;
}
html[data-theme="dark"] .svc-section-nav button.is-active {
  background: #2563eb;
  color: #fff;
}

/* Dark theme: icons stay white (not brand-blue) */
html[data-theme="dark"] .icon,
html[data-theme="dark"] svg.icon,
html[data-theme="dark"] .svc-ico,
html[data-theme="dark"] .svc-ico .icon,
html[data-theme="dark"] .svc-card-icon,
html[data-theme="dark"] .svc-card-v2-icon,
html[data-theme="dark"] .svc-card-v2-icon .icon,
html[data-theme="dark"] .svc-card-v2-time .icon,
html[data-theme="dark"] .svc-card-v2-features .icon,
html[data-theme="dark"] .legal-card .svc-ico,
html[data-theme="dark"] .mega-card-icon,
html[data-theme="dark"] .mega-card-icon .icon,
html[data-theme="dark"] .drawer-item-icon,
html[data-theme="dark"] .drawer-item-icon .icon,
html[data-theme="dark"] .trust-card-icon,
html[data-theme="dark"] .trust-card-icon .icon,
html[data-theme="dark"] .work-icon,
html[data-theme="dark"] .stat-icon,
html[data-theme="dark"] .scheme-icon,
html[data-theme="dark"] .legal-icon,
html[data-theme="dark"] .notif-popup-icon,
html[data-theme="dark"] .header-track-btn .icon,
html[data-theme="dark"] .quick-account > svg:first-child,
html[data-theme="dark"] .svc-icon-blue,
html[data-theme="dark"] .svc-icon-indigo,
html[data-theme="dark"] .svc-icon-emerald,
html[data-theme="dark"] .svc-icon-amber,
html[data-theme="dark"] .svc-icon-teal,
html[data-theme="dark"] .svc-icon-rose,
html[data-theme="dark"] .svc-icon-purple,
html[data-theme="dark"] .support-block-icon,
html[data-theme="dark"] .support-block-icon .icon,
html[data-theme="dark"] .bottom-nav a .icon,
html[data-theme="dark"] .icon-action .icon,
html[data-theme="dark"] .nav-toggle .icon,
html[data-theme="dark"] .theme-toggle .icon,
html[data-theme="dark"] .footer-contact .icon,
html[data-theme="dark"] .site-footer .social-links svg.icon {
  color: #fff !important;
}
html[data-theme="dark"] svg.icon {
  fill: none !important;
  stroke: currentColor !important;
}
html[data-theme="dark"] .social-links svg.icon,
html[data-theme="dark"] .wa-btn svg.icon {
  fill: currentColor !important;
  stroke: none !important;
}
html[data-theme="dark"] .svc-icon-blue,
html[data-theme="dark"] .svc-icon-indigo,
html[data-theme="dark"] .svc-icon-emerald,
html[data-theme="dark"] .svc-icon-amber,
html[data-theme="dark"] .svc-icon-teal,
html[data-theme="dark"] .svc-icon-rose,
html[data-theme="dark"] .svc-icon-purple,
html[data-theme="dark"] .svc-card-icon,
html[data-theme="dark"] .drawer-item-icon,
html[data-theme="dark"] .mega-card-icon {
  background: rgba(255, 255, 255, .12) !important;
}
html[data-theme="dark"] .home-hub .service:hover .svc-ico {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}
html[data-theme="dark"] .review-stars .icon,
html[data-theme="dark"] .svc-review-stars,
html[data-theme="dark"] .svc-review-stars .icon {
  color: #f59e0b !important;
}
html[data-theme="dark"] .wa-btn .icon {
  color: #fff !important;
}
html[data-theme="dark"] .hub-cta-list .icon,
html[data-theme="dark"] .support-band .support-block-icon,
html[data-theme="dark"] .support-band .support-block-icon .icon {
  color: #6ee7b7 !important;
}
html[data-theme="dark"] .cta-panel .btn-primary .icon,
html[data-theme="dark"] .blog-cta .btn-primary .icon,
html[data-theme="dark"] .support-band .btn-primary .icon,
html[data-theme="dark"] .hub-cta-primary .icon {
  color: #0f1b33 !important;
}

html[data-theme="dark"] .home-hub .svc-price,
html[data-theme="dark"] .svc-card-v2-price,
html[data-theme="dark"] .svc-card-v2-price small,
html[data-theme="dark"] .svc-card-price,
html[data-theme="dark"] .svc-card-price strong,
html[data-theme="dark"] .svc-card-price span,
html[data-theme="dark"] .svc-price-total,
html[data-theme="dark"] .svc-price-row span:last-child,
html[data-theme="dark"] .svc-price-row .text-primary {
  color: #fff !important;
}

html[data-theme="dark"] .blog-card-cat {
  background: rgba(8, 12, 24, .72) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}

html[data-theme="dark"] .support-block-actions .btn-outline {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  color: #fff !important;
}
html[data-theme="dark"] .support-block-actions .btn-primary {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
}
html[data-theme="dark"] .support-block-actions .btn-outline .icon,
html[data-theme="dark"] .support-block-actions .btn-primary .icon {
  color: #fff !important;
}