/* Global light/dark appearance. Loaded last so dynamically rendered modules inherit it. */
:root {
  --theme-bg: #edf2f5;
  --theme-surface: #ffffff;
  --theme-surface-soft: #f5f9fa;
  --theme-surface-raised: #ffffff;
  --theme-text: #34464f;
  --theme-heading: #243840;
  --theme-muted: #758790;
  --theme-border: #d7e0e4;
  --theme-input: #ffffff;
  --theme-table-head: #e8eef1;
  --theme-table-hover: #f5fafb;
  --theme-shadow: rgba(22, 47, 58, .14);
}

html[data-theme="dark"] {
  --theme-bg: #10191e;
  --theme-surface: #19262c;
  --theme-surface-soft: #202f36;
  --theme-surface-raised: #24343b;
  --theme-text: #d7e4e8;
  --theme-heading: #f2f8fa;
  --theme-muted: #9fb1b8;
  --theme-border: #34474f;
  --theme-input: #142127;
  --theme-table-head: #263840;
  --theme-table-hover: #22343b;
  --theme-shadow: rgba(0, 0, 0, .38);
}

.theme-toggle {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 7px;
  background: rgba(8, 53, 70, .24);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.theme-toggle:hover { background: rgba(8, 53, 70, .42); border-color: rgba(255, 255, 255, .55); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 3px solid rgba(255, 255, 255, .48); outline-offset: 2px; }
.theme-icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-icon-moon { display: block; }

body { background: var(--theme-bg); color: var(--theme-text); transition: background-color .18s ease, color .18s ease; }
.workspace, .page { background: var(--theme-bg); }
.page-head h1, .page-head h2, .page-head h3,
.card h1, .card h2, .card h3, .modal h1, .modal h2, .modal h3 { color: var(--theme-heading); }
.page-head p, .muted, .empty-state p { color: var(--theme-muted); }

html[data-theme="dark"] .card,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .top-popover,
html[data-theme="dark"] .top-profile-menu,
html[data-theme="dark"] [class*="-card"],
html[data-theme="dark"] [class*="-editor"],
html[data-theme="dark"] [class*="-panel"] {
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
  color: var(--theme-text);
  box-shadow: 0 12px 30px var(--theme-shadow);
}

html[data-theme="dark"] .data-table th,
html[data-theme="dark"] table th { background: var(--theme-table-head); color: #b9cbd1; border-color: var(--theme-border); }
html[data-theme="dark"] .data-table td,
html[data-theme="dark"] table td { color: var(--theme-text); border-color: var(--theme-border); }
html[data-theme="dark"] .data-table tbody tr:hover,
html[data-theme="dark"] table tbody tr:hover { background: var(--theme-table-hover); }

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: var(--theme-input);
  border-color: #40565f;
  color: var(--theme-text);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #788b93; }
html[data-theme="dark"] option { background: var(--theme-input); color: var(--theme-text); }
html[data-theme="dark"] label,
html[data-theme="dark"] legend { color: var(--theme-text); }

html[data-theme="dark"] .button:not(.primary):not(.danger),
html[data-theme="dark"] .modal-head button {
  background-color: var(--theme-surface-raised);
  border-color: #49606a;
  color: var(--theme-text);
}
html[data-theme="dark"] .modal-head,
html[data-theme="dark"] .modal-actions,
html[data-theme="dark"] .section-head,
html[data-theme="dark"] .form-actions { border-color: var(--theme-border); }
html[data-theme="dark"] .drop-zone,
html[data-theme="dark"] .note,
html[data-theme="dark"] .migration-steps > *,
html[data-theme="dark"] .service-grid > div { background-color: var(--theme-surface-soft); border-color: var(--theme-border); color: var(--theme-text); }

html[data-theme="dark"] .safety-banner { background: #28301e; border-color: #655f2f; color: #e6d98b; }
html[data-theme="dark"] .top-search-links button,
html[data-theme="dark"] .top-profile-menu button,
html[data-theme="dark"] .notification-footer { background-color: var(--theme-surface); border-color: var(--theme-border); color: var(--theme-text); }
html[data-theme="dark"] .top-search-links button:hover,
html[data-theme="dark"] .top-profile-menu button:hover,
html[data-theme="dark"] .notification-footer:hover { background-color: var(--theme-surface-soft); }
html[data-theme="dark"] .top-popover-title,
html[data-theme="dark"] .profile-menu-head { border-color: var(--theme-border); color: var(--theme-heading); }

html[data-theme="dark"] .filters,
html[data-theme="dark"] [class*="-filters"],
html[data-theme="dark"] [class*="-toolbar"],
html[data-theme="dark"] [class*="-summary"] { color: var(--theme-text); }
html[data-theme="dark"] .profile-group-info,
html[data-theme="dark"] .profile-group-actions,
html[data-theme="dark"] .hotspot-profile-actions,
html[data-theme="dark"] .check { border-color: var(--theme-border); }
html[data-theme="dark"] .hotspot-profile-limits { background: #172c30; border-color: #326269; }

html[data-theme="dark"] .profile-group-manage > div,
html[data-theme="dark"] .hotspot-profile-manage > div { background: var(--theme-surface-raised); border-color: var(--theme-border); }
html[data-theme="dark"] .profile-group-manage > div button,
html[data-theme="dark"] .hotspot-profile-manage > div button { background: var(--theme-surface-raised); border-color: var(--theme-border); color: var(--theme-text); }
html[data-theme="dark"] .profile-group-manage > div button:hover,
html[data-theme="dark"] .hotspot-profile-manage > div button:hover { background: #2a4048; }

html[data-theme="dark"] a { color: #67c7e5; }
html[data-theme="dark"] hr { border-color: var(--theme-border); }
html[data-theme="dark"] .status.ok { background: #173e2d; color: #7ce1aa; }
html[data-theme="dark"] .status.pending { background: #453a19; color: #f0cf68; }
html[data-theme="dark"] .status.blocked { background: #472526; color: #f0a09c; }

/* Remove remaining light surfaces in dark mode. */
html[data-theme="dark"] .invoice-kpis article,
html[data-theme="dark"] .invoice-kpis article.total,
html[data-theme="dark"] [class*="-kpis"] article,
html[data-theme="dark"] [class*="-summary"] article,
html[data-theme="dark"] .export-summary article {
  background: var(--theme-surface-raised);
  border-color: var(--theme-border);
  color: var(--theme-text);
  box-shadow: 0 4px 14px var(--theme-shadow);
}
html[data-theme="dark"] .invoice-kpis b,
html[data-theme="dark"] [class*="-kpis"] article b,
html[data-theme="dark"] [class*="-kpis"] article strong,
html[data-theme="dark"] [class*="-summary"] article b,
html[data-theme="dark"] [class*="-summary"] article strong { color: var(--theme-heading); }
html[data-theme="dark"] .invoice-kpis small,
html[data-theme="dark"] .invoice-kpis span,
html[data-theme="dark"] [class*="-kpis"] article small,
html[data-theme="dark"] [class*="-summary"] article small { color: var(--theme-muted); }

html[data-theme="dark"] .invoice-toolbar,
html[data-theme="dark"] .invoice-period-filter,
html[data-theme="dark"] .invoice-detail-grid article,
html[data-theme="dark"] .top-popover-title,
html[data-theme="dark"] .profile-menu-head {
  background: var(--theme-surface-soft);
  border-color: var(--theme-border);
  color: var(--theme-text);
}
html[data-theme="dark"] .invoice-card-head h2,
html[data-theme="dark"] .invoice-toolbar label,
html[data-theme="dark"] .invoice-empty b,
html[data-theme="dark"] .invoice-table-foot { color: var(--theme-text); }
html[data-theme="dark"] .invoice-card-head p,
html[data-theme="dark"] .invoice-empty span,
html[data-theme="dark"] .invoice-table-foot span { color: var(--theme-muted); }

html[data-theme="dark"] .nav-console label {
  background: #14252c;
  border-color: #49636c;
  color: #a9bec5;
}
html[data-theme="dark"] .nav-console input { color: #e1ecef; }

html[data-theme="dark"] .login-card {
  background: #17272e;
  border-color: #3f5d67;
  box-shadow: 0 34px 95px #000000d9, 0 0 0 1px #3edcff18, 0 0 45px #00b9ee16;
}
html[data-theme="dark"] .login-brand { border-color: #3a5058; }
html[data-theme="dark"] .login-heading h1 { color: #eaf5f8; }
html[data-theme="dark"] .login-heading > span,
html[data-theme="dark"] .access-login-form > label > span,
html[data-theme="dark"] .captcha-label span { color: #87cde2; }
html[data-theme="dark"] .login-heading p,
html[data-theme="dark"] .login-state { color: #a8b9bf; }
html[data-theme="dark"] .login-input {
  background: #101d23;
  border-color: #46616b;
}
html[data-theme="dark"] .login-field-icon { border-color: #3b5058; }
html[data-theme="dark"] .login-field-icon svg,
html[data-theme="dark"] .password-eye svg { stroke: #80cae0; }
html[data-theme="dark"] .login-input button { color: #80cae0; }
html[data-theme="dark"] .password-eye:hover { background: #243940; }
html[data-theme="dark"] .captcha-image { background: #d9edf1; border-color: #52717b; }

html[data-theme="dark"] .backup-drop,
html[data-theme="dark"] .stage-drop,
html[data-theme="dark"] .stage-map-panel [data-map-card],
html[data-theme="dark"] .smartolt-detail-grid article,
html[data-theme="dark"] .domain-access-editor label,
html[data-theme="dark"] .resource-strip > button,
html[data-theme="dark"] .dashboard-mode-tabs button,
html[data-theme="dark"] .traffic-grid button {
  background: var(--theme-surface-soft);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

/* Complete dark surfaces across every menu and submenu module. */
html[data-theme="dark"] #page[data-page="payment-h2h"] .page-head,
html[data-theme="dark"] #page[data-page="session-hotspot"] .page-head,
html[data-theme="dark"] #page[data-page="session-ppp"] .page-head,
html[data-theme="dark"] #page[data-page="settings-gateway"] .page-head,
html[data-theme="dark"] #page[data-page="settings-map"] .page-head,
html[data-theme="dark"] #page[data-page="settings-whatsapp"] .page-head,
html[data-theme="dark"] .mix-panel,
html[data-theme="dark"] .addon-product-hero,
html[data-theme="dark"] .addon-service-card,
html[data-theme="dark"] .traffic-chart-card,
html[data-theme="dark"] .traffic-detail-card,
html[data-theme="dark"] .service-restart,
html[data-theme="dark"] .income-date-banner,
html[data-theme="dark"] .bhp-result,
html[data-theme="dark"] .advanced-permissions,
html[data-theme="dark"] .user-account-card,
html[data-theme="dark"] .voucher-create-actions,
html[data-theme="dark"] .voucher-guidance,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .portal-panel {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

html[data-theme="dark"] .customer-kpis section,
html[data-theme="dark"] .profit-kpis section,
html[data-theme="dark"] .topup-kpis section,
html[data-theme="dark"] .xendit-kpis section,
html[data-theme="dark"] .domain-summary section,
html[data-theme="dark"] .template-summary section,
html[data-theme="dark"] .gateway-status-grid section,
html[data-theme="dark"] .h2h-status-grid section,
html[data-theme="dark"] .session-summary section,
html[data-theme="dark"] .bhp-result-grid article,
html[data-theme="dark"] .log-detail-modal dl > div {
  background: var(--theme-surface-raised);
  border-color: var(--theme-border);
  color: var(--theme-text);
  box-shadow: 0 4px 14px var(--theme-shadow);
}

html[data-theme="dark"] .addon-customer-results,
html[data-theme="dark"] .bandwidth-manage > div,
html[data-theme="dark"] .customer-manage-menu,
html[data-theme="dark"] .odp-manage-menu {
  background: var(--theme-surface-raised);
  border-color: var(--theme-border);
  color: var(--theme-text);
  box-shadow: 0 12px 28px var(--theme-shadow);
}

html[data-theme="dark"] .addon-customer-combobox button,
html[data-theme="dark"] .addon-customer-results button,
html[data-theme="dark"] .addon-tabs button,
html[data-theme="dark"] .bandwidth-manage > div button,
html[data-theme="dark"] .customer-manage-menu button,
html[data-theme="dark"] .odp-manage-menu button,
html[data-theme="dark"] .domain-actions button,
html[data-theme="dark"] .stage-row-actions button,
html[data-theme="dark"] .stage-history button,
html[data-theme="dark"] .template-actions button,
html[data-theme="dark"] .tab-action,
html[data-theme="dark"] .interface-list button,
html[data-theme="dark"] .traffic-pause {
  background: var(--theme-surface-raised);
  border-color: #49606a;
  color: var(--theme-text);
}
html[data-theme="dark"] .addon-customer-results button:hover,
html[data-theme="dark"] .bandwidth-manage > div button:hover,
html[data-theme="dark"] .customer-manage-menu button:hover,
html[data-theme="dark"] .odp-manage-menu button:hover,
html[data-theme="dark"] .template-actions button:hover { background: #2a4048; }

html[data-theme="dark"] .mix-tabs button.active,
html[data-theme="dark"] .wa-tabs button.active,
html[data-theme="dark"] .portal-tabs button.active,
html[data-theme="dark"] .customer-form-tabs > button.active {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  color: var(--theme-heading);
}

html[data-theme="dark"] .voucher-create-modal .modal-head,
html[data-theme="dark"] .modal-actions,
html[data-theme="dark"] .router-log-tabs span,
html[data-theme="dark"] .report-reset-modules label,
html[data-theme="dark"] .template-role-section label,
html[data-theme="dark"] .template-user-section label {
  background: var(--theme-surface-soft);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

html[data-theme="dark"] .voucher-credentials button,
html[data-theme="dark"] .voucher-credentials code,
html[data-theme="dark"] .voucher-code,
html[data-theme="dark"] .gateway-flow span,
html[data-theme="dark"] .gmap-pin b,
html[data-theme="dark"] .map-pin b,
html[data-theme="dark"] .customer-map-pin > b,
html[data-theme="dark"] .odp-map-pin > b,
html[data-theme="dark"] .stage-map-pin b,
html[data-theme="dark"] .stage-map-legend {
  background: var(--theme-surface-raised);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

html[data-theme="dark"] .client-shell > footer,
html[data-theme="dark"] .client-login-card,
html[data-theme="dark"] .sidebar-brand img {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

html[data-theme="dark"] .report-panel .data-table th { background: var(--theme-table-head); }
html[data-theme="dark"] .finance-lookup-control { background: var(--theme-input); border-color: #40565f; }
html[data-theme="dark"] .finance-lookup-control input { background: transparent; }
html[data-theme="dark"] .finance-lookup-results,
html[data-theme="dark"] [class*="lookup-results"] { background: var(--theme-surface-raised); border-color: var(--theme-border); }

/* Dark-mode surface completion. These rules are presentation-only: they replace
   light component fills without changing module state, data, or interactions. */
html[data-theme="dark"] .resource-strip > button {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  color: var(--theme-text);
}
html[data-theme="dark"] .resource-strip b,
html[data-theme="dark"] .resource-strip em {
  background: var(--theme-surface-raised);
  color: var(--theme-text);
}
html[data-theme="dark"] .resource-strip span { color: var(--theme-heading); }

html[data-theme="dark"] .dashboard-mode-tabs {
  background: var(--theme-surface-soft);
  border-color: var(--theme-border);
}
html[data-theme="dark"] .dashboard-mode-tabs button b {
  background: #28434c;
  color: #72dfcf;
}
html[data-theme="dark"] .dashboard-mode-tabs button small,
html[data-theme="dark"] .tab-content-head p { color: var(--theme-muted); }
html[data-theme="dark"] .tab-content-head h3,
html[data-theme="dark"] .summary-stat { color: var(--theme-heading); }
html[data-theme="dark"] .tab-content-head { border-color: var(--theme-border); }
html[data-theme="dark"] .activity-content .data-table th { background: var(--theme-table-head); }
html[data-theme="dark"] .traffic-detail-grid section {
  background: var(--theme-surface-raised);
  border-color: var(--theme-border);
}

html[data-theme="dark"] .summary-icon {
  background: #263b43;
  border-color: #4b626b;
  color: #b4c6cc;
  box-shadow: 0 2px 5px var(--theme-shadow);
}
html[data-theme="dark"] .summary-icon svg { color: #b4c6cc; }
html[data-theme="dark"] .summary-stat:hover .summary-icon {
  background: #2b4b53;
  border-color: #59b8b0;
}
html[data-theme="dark"] .summary-copy b {
  background: #2a4048;
  color: var(--theme-heading);
}

html[data-theme="dark"] .service-panel {
  background: var(--theme-surface);
  border-color: var(--theme-border);
}
html[data-theme="dark"] .service-panel h2 { border-color: var(--theme-border); color: var(--theme-heading); }
html[data-theme="dark"] .service-line,
html[data-theme="dark"] .service-line:nth-child(odd) {
  background: var(--theme-surface-raised);
  border-color: var(--theme-border);
  color: var(--theme-text);
}
html[data-theme="dark"] .service-line:nth-child(even) { background: var(--theme-surface-soft); }
html[data-theme="dark"] .service-line > b,
html[data-theme="dark"] .service-link,
html[data-theme="dark"] .service-line.stacked > span:last-child { color: var(--theme-heading); }
html[data-theme="dark"] .service-line .btn,
html[data-theme="dark"] .service-restart {
  background: #223942;
  border-color: #4a626c;
  color: var(--theme-text);
}
html[data-theme="dark"] .service-link:hover { background: #24434a; }

html[data-theme="dark"] .session-summary section > span {
  background: #24464b;
  color: #6de0cf;
}
html[data-theme="dark"] .session-summary small,
html[data-theme="dark"] .session-card-head p { color: var(--theme-muted); }
html[data-theme="dark"] .session-summary b { color: var(--theme-heading); }
html[data-theme="dark"] .session-filters,
html[data-theme="dark"] #page [class*="-filters"] {
  background-color: var(--theme-surface-soft);
  border-color: var(--theme-border);
}
html[data-theme="dark"] .session-table th { background: var(--theme-table-head); }
html[data-theme="dark"] .session-row-disconnected { background: #3a292b !important; }

html[data-theme="dark"] .report-tools { color: var(--theme-text); }
html[data-theme="dark"] .report-tools select,
html[data-theme="dark"] .report-tools input {
  background: var(--theme-input);
  border-color: #40565f;
  color: var(--theme-text);
}
html[data-theme="dark"] .live-mode,
html[data-theme="dark"] .wa-alert,
html[data-theme="dark"] .wa-checks,
html[data-theme="dark"] .wa-capabilities > div,
html[data-theme="dark"] .gmap-alert,
html[data-theme="dark"] .gmap-toggle,
html[data-theme="dark"] .gateway-card-head,
html[data-theme="dark"] .gateway-guards label,
html[data-theme="dark"] .gateway-flow,
html[data-theme="dark"] .h2h-warning {
  background: var(--theme-surface-soft);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

/* Settings pages: remove the last light-only fills while dark mode is active. */
html[data-theme="dark"] .wa-tabs {
  background: var(--theme-surface-soft);
  border-color: var(--theme-border);
}
html[data-theme="dark"] .wa-tabs button {
  background: transparent;
  border-color: transparent;
  color: #75cae2;
}
html[data-theme="dark"] .wa-tabs button.active {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  border-bottom-color: var(--theme-surface);
  color: var(--theme-heading);
}
html[data-theme="dark"] .wa-alert b,
html[data-theme="dark"] .wa-alert span,
html[data-theme="dark"] .wa-checks label,
html[data-theme="dark"] .wa-capabilities b,
html[data-theme="dark"] .wa-capabilities span { color: var(--theme-text); }

html[data-theme="dark"] .stage-safe-note {
  background: #203840;
  border-color: #2b9fc4;
  color: var(--theme-text);
}

html[data-theme="dark"] .gmap-preview,
html[data-theme="dark"] .map-demo,
html[data-theme="dark"] .stage-map {
  background: #1b3037;
  border-color: var(--theme-border);
}
html[data-theme="dark"] .gmap-preview .map-grid,
html[data-theme="dark"] .map-demo .map-grid,
html[data-theme="dark"] .stage-map .map-grid {
  background-image:
    linear-gradient(rgba(83, 143, 158, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83, 143, 158, .22) 1px, transparent 1px);
}

/* Full-menu audit: normalize informational, lookup, map, and tool surfaces. */
html[data-theme="dark"] .account-security-note,
html[data-theme="dark"] .domain-info,
html[data-theme="dark"] .odp-map-empty,
html[data-theme="dark"] .odp-map-legend,
html[data-theme="dark"] .customer-map-legend,
html[data-theme="dark"] .topup-search,
html[data-theme="dark"] .expense-search,
html[data-theme="dark"] .bhp-base,
html[data-theme="dark"] .usage-note,
html[data-theme="dark"] .usage-server,
html[data-theme="dark"] .usage-details dt,
html[data-theme="dark"] .export-safe-note,
html[data-theme="dark"] .export-result-bar,
html[data-theme="dark"] .backup-file-state,
html[data-theme="dark"] .report-reset-note,
html[data-theme="dark"] .db-impact-summary,
html[data-theme="dark"] .module-status,
html[data-theme="dark"] .log-detail-result,
html[data-theme="dark"] .log-safety-note {
  background: var(--theme-surface-soft);
  border-color: var(--theme-border);
  color: var(--theme-text);
}
html[data-theme="dark"] .account-security-note b,
html[data-theme="dark"] .domain-info b,
html[data-theme="dark"] .domain-info code,
html[data-theme="dark"] .odp-map-empty,
html[data-theme="dark"] .odp-map-legend,
html[data-theme="dark"] .customer-map-legend { color: var(--theme-text); }
html[data-theme="dark"] .domain-info code { background: #29434b; }

html[data-theme="dark"] .finance-audit-notice,
html[data-theme="dark"] .finance-audit-inline,
html[data-theme="dark"] .addon-sandbox,
html[data-theme="dark"] .evoucher-guidance,
html[data-theme="dark"] .ticket-notice,
html[data-theme="dark"] .backup-warning,
html[data-theme="dark"] .report-reset-confirm,
html[data-theme="dark"] .db-reset-ack,
html[data-theme="dark"] .bhp-formula {
  background: #352f1e;
  border-color: #66592e;
  color: #ead99a;
}
html[data-theme="dark"] .finance-audit-notice b,
html[data-theme="dark"] .finance-audit-inline b,
html[data-theme="dark"] .finance-audit-notice span,
html[data-theme="dark"] .finance-audit-inline span,
html[data-theme="dark"] .addon-sandbox span,
html[data-theme="dark"] .ticket-notice span { color: #d9c987; }

html[data-theme="dark"] .xendit-info,
html[data-theme="dark"] .h2h-standby-note,
html[data-theme="dark"] .report-reset-protected,
html[data-theme="dark"] .db-reset-preserved,
html[data-theme="dark"] .db-backup-check.ready {
  background: #1d382e;
  border-color: #35684f;
  color: #9bd7b8;
}
html[data-theme="dark"] .db-reset-danger,
html[data-theme="dark"] .db-reset-confirm,
html[data-theme="dark"] .db-impact-list > div,
html[data-theme="dark"] .db-backup-check {
  background: #3a2527;
  border-color: #714348;
  color: #efb3b0;
}
html[data-theme="dark"] .db-reset-danger p { color: #d9a3a0; }
html[data-theme="dark"] .db-reset-scopes label.selected {
  background: #203b43;
  border-color: #2d91aa;
}
html[data-theme="dark"] .db-reset-scopes em { background: #2a3b42; color: var(--theme-text); }

html[data-theme="dark"] .bhp-result-grid { background: var(--theme-border); border-color: var(--theme-border); }
html[data-theme="dark"] .bhp-total { background: #1d382e; }
html[data-theme="dark"] .bhp-total small,
html[data-theme="dark"] .bhp-total b,
html[data-theme="dark"] .bhp-total > strong { color: #94d6b5; }

html[data-theme="dark"] .neighbor-live { background: #1d382e; color: #86d7b1; }
html[data-theme="dark"] .row-action,
html[data-theme="dark"] .secret-input button,
html[data-theme="dark"] #page[data-page^="tool-export"] label {
  background: var(--theme-surface-raised);
  border-color: #49606a;
  color: var(--theme-text);
}

html[data-theme="dark"] .addon-service-card > span,
html[data-theme="dark"] .addon-product-hero > span,
html[data-theme="dark"] .smartolt-kpi-icon.teal {
  background: #234149;
  color: #69d4e3;
}
html[data-theme="dark"] .addon-service-card.purple > span,
html[data-theme="dark"] .addon-product-hero.purple > span,
html[data-theme="dark"] .smartolt-kpi-icon.blue {
  background: #302f49;
  color: #ada4ee;
}
html[data-theme="dark"] .addon-service-card.green > span,
html[data-theme="dark"] .addon-product-hero.green > span,
html[data-theme="dark"] .smartolt-kpi-icon.green {
  background: #213d32;
  color: #84d9ae;
}
html[data-theme="dark"] .addon-service-card.orange > span,
html[data-theme="dark"] .smartolt-kpi-icon.amber {
  background: #43331f;
  color: #eab86e;
}

@media (max-width: 760px) {
  .theme-toggle { width: 40px; justify-content: center; padding: 7px; }
  .theme-toggle span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body, .theme-toggle { transition: none; }
}