:root {
  /* Primary Colors — muted, professional */
  --primary-color: #0ea5e9;
  --secondary-color: #6366f1;

  /* Status Colors — enterprise-friendly */
  --success-color: #16a34a;
  --danger-color: #dc2626;
  --warning-color: #f59e0b;
  --info-color: #0ea5e9;

  /* Background Colors — dark theme default */
  --dark-color: #111827;
  --darker-color: #0b1120;
  --card-bg: #111827;
  --light-bg: #0b1120;
  --input-bg: #111827;

  /* Border & Shadow — subtle, no neon glow */
  --card-border: rgba(148, 163, 184, 0.12);
  --input-border: rgba(148, 163, 184, 0.18);
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3);
  --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.35);

  /* Text Colors */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --border-color: #1f2937;

  /* Component backgrounds */
  --bg-overlay: rgba(0, 0, 0, 0.6);
  --bg-modal-header: rgba(17, 24, 39, 0.95);
  --bg-table: rgba(17, 24, 39, 0.5);
  --bg-table-head: rgba(17, 24, 39, 0.9);
  --bg-table-row: rgba(17, 24, 39, 0.3);
  --bg-table-row-alt: rgba(17, 24, 39, 0.45);
  --bg-table-hover: rgba(148, 163, 184, 0.08);
  --bg-table-hover-alt: rgba(148, 163, 184, 0.12);
  --bg-input-check: rgba(17, 24, 39, 0.8);
  --bg-login-wrapper: rgba(17, 24, 39, 0.95);
  --bg-login-input: rgba(17, 24, 39, 0.8);
  --bg-scrollbar-track: rgba(17, 24, 39, 0.6);
  --bg-scrollbar-thumb: rgba(148, 163, 184, 0.35);
  --bg-scrollbar-thumb-hover: rgba(148, 163, 184, 0.55);
  --bg-skeleton-from: rgba(148, 163, 184, 0.06);
  --bg-skeleton-mid: rgba(148, 163, 184, 0.1);
  --bg-skeleton-reduced: rgba(148, 163, 184, 0.04);
  --bg-focus-ring: rgba(14, 165, 233, 0.25);
  --bg-focus-ring-subtle: rgba(14, 165, 233, 0.15);
  --bg-tab-hover: rgba(148, 163, 184, 0.06);
  --bg-dropdown-hover: rgba(148, 163, 184, 0.08);
  --bg-dropdown-menu-shadow: rgba(0, 0, 0, 0.45);
  --bg-chart-tooltip: rgba(17, 24, 39, 0.97);
  --bg-chart-grid: rgba(148, 163, 184, 0.08);
  --bg-queue-scrollbar-track: rgba(148, 163, 184, 0.06);
  --bg-queue-scrollbar-thumb: rgba(148, 163, 184, 0.25);
  --bg-queue-load-bar: rgba(148, 163, 184, 0.12);
  --bg-login-modal-bg: rgba(0, 0, 0, 0.7);
  --bg-login-grid-line: rgba(148, 163, 184, 0.04);
  --bg-btn-secondary-hover: rgba(31, 41, 55, 0.9);
  --bg-datatables-wrapper: rgba(17, 24, 39, 0.3);
  --bg-page-link-hover: rgba(148, 163, 184, 0.08);
  --bg-active-tab: rgba(14, 165, 233, 0.08);
  --bg-dropdown-item-hover: rgba(148, 163, 184, 0.08);
  --bg-lang-btn-hover: rgba(148, 163, 184, 0.08);
  --bg-login-icon: rgba(14, 165, 233, 0.12);
  --bg-login-submit: #0ea5e9;
  --bg-login-submit-hover-shadow: rgba(14, 165, 233, 0.35);
  --bg-login-orb-1: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 70%);
  --bg-login-orb-2: radial-gradient(circle, rgba(99, 102, 241, 0.06) 0%, transparent 70%);
  --bg-login-orb-3: radial-gradient(circle, rgba(99, 102, 241, 0.04) 0%, transparent 70%);
  --bg-modal-shadow: rgba(0, 0, 0, 0.4);
  --bg-modal-shadow-2: rgba(0, 0, 0, 0.3);
  --bg-login-border-top: rgba(148, 163, 184, 0.12);
  --bg-login-border: rgba(148, 163, 184, 0.15);
  --bg-login-input-focus-shadow: rgba(14, 165, 233, 0.2);
  --bg-login-input-focus-inset: rgba(14, 165, 233, 0.04);
  --bg-login-error: rgba(220, 38, 38, 0.08);
  --bg-login-error-border: rgba(220, 38, 38, 0.3);
  --bg-login-submit-shadow: rgba(14, 165, 233, 0.25);
  --bg-login-icon-shadow: rgba(14, 165, 233, 0.15);
  --bg-login-icon-border: rgba(14, 165, 233, 0.25);
  --bg-login-input-border: rgba(148, 163, 184, 0.18);
  --bg-login-input-focus-border: rgba(14, 165, 233, 0.5);
  --bg-login-check-bg: rgba(17, 24, 39, 0.8);
  --bg-ag-border: #1f2937;
  --bg-ag-header: rgba(17, 24, 39, 0.95);
  --bg-ag-row: #111827;
  --bg-ag-row-even: #0f172a;
  --bg-ag-viewport: #0f172a;
  --bg-ag-hover: rgba(148, 163, 184, 0.08);
  --bg-ag-selected: rgba(14, 165, 233, 0.12);
  --bg-ag-header-hover: rgba(148, 163, 184, 0.06);
  --bg-ag-active: rgba(14, 165, 233, 0.08);
  --bg-ag-active-hover: rgba(14, 165, 233, 0.14);
  --bg-ag-menu-shadow: rgba(0, 0, 0, 0.45);
  --bg-ag-menu-item-hover: rgba(148, 163, 184, 0.08);
  --bg-ag-set-filter-selected: rgba(14, 165, 233, 0.1);
  --bg-ag-loading: rgba(17, 24, 39, 0.6);
  --bg-ag-disabled-input: rgba(31, 41, 55, 0.5);
  --bg-ag-disabled-border: rgba(55, 65, 81, 0.5);
  --bg-ag-toggle-off: rgba(107, 114, 128, 0.35);
  --bg-ag-chip: rgba(14, 165, 233, 0.15);
  --bg-ag-range-selection: rgba(14, 165, 233, 0.06);
  --bg-ag-overlay: rgba(0, 0, 0, 0.6);
  --bg-ag-disabled-text: rgba(148, 163, 184, 0.35);
  --bg-card-icon-total: rgba(14, 165, 233, 0.12);
  --bg-card-icon-success: rgba(22, 163, 74, 0.12);
  --bg-card-icon-danger: rgba(220, 38, 38, 0.12);
  --bg-card-icon-warning: rgba(245, 158, 11, 0.12);
  --bg-card-icon-info: rgba(14, 165, 233, 0.12);
  --bg-card-icon-secondary: rgba(99, 102, 241, 0.12);
  --bg-card-icon-indigo: rgba(99, 102, 241, 0.12);
  --bg-badge-success: rgba(22, 163, 74, 0.12);
  --bg-badge-error: rgba(220, 38, 38, 0.12);
  --bg-badge-warning: rgba(245, 158, 11, 0.12);
  --bg-badge-secondary: rgba(107, 114, 128, 0.15);
  --bg-badge-primary: rgba(14, 165, 233, 0.12);
  --bg-token-display: rgba(14, 165, 233, 0.08);
  --bg-token-display-hover: rgba(14, 165, 233, 0.14);
  --bg-action-edit: rgba(14, 165, 233, 0.12);
  --bg-action-delete: rgba(220, 38, 38, 0.12);
  --bg-action-view: rgba(99, 102, 241, 0.12);
  --bg-action-tx: rgba(245, 158, 11, 0.12);
  --bg-trend-up: rgba(22, 163, 74, 0.08);
  --bg-trend-down: rgba(220, 38, 38, 0.08);
  --bg-btn-primary-hover-shadow: rgba(14, 165, 233, 0.35);
  --bg-btn-outline-active-shadow: rgba(99, 102, 241, 0.25);
  --bg-login-inset: rgba(0, 0, 0, 0.15);

  /* Gradient accents — subtle, professional */
  --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  --gradient-success: linear-gradient(135deg, var(--success-color) 0%, #15803d 100%);
  --gradient-danger: linear-gradient(135deg, var(--danger-color) 0%, #b91c1c 100%);
  --gradient-info: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
  --gradient-card-total: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  --gradient-card-success: linear-gradient(90deg, var(--success-color), #22c55e);
  --gradient-card-danger: linear-gradient(90deg, var(--danger-color), #f87171);
  --gradient-card-warning: linear-gradient(90deg, var(--warning-color), #fbbf24);
  --gradient-card-info: linear-gradient(90deg, var(--info-color), #38bdf8);
  --gradient-card-secondary: linear-gradient(90deg, var(--secondary-color), #818cf8);
  --gradient-card-indigo: linear-gradient(90deg, #6366f1, #818cf8);

  /* Focus ring */
  --focus-ring: 0 0 0 3px var(--bg-focus-ring);
  --focus-ring-subtle: 0 0 0 3px var(--bg-focus-ring-subtle);

  /* Border radius scale */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
}

/*
 * Light theme — clean, professional, enterprise-style.
 */
@media (prefers-color-scheme: light) {
  :root {
    --dark-color: #f8f9fb;
    --darker-color: #f1f3f7;
    --card-bg: #fafbfd;
    --light-bg: #f1f3f7;
    --input-bg: #ffffff;

    --card-border: rgba(15, 23, 42, 0.06);
    --input-border: rgba(15, 23, 42, 0.1);
    --card-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
    --card-shadow-hover: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.05);

    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #6b7280;

    --border-color: #e5e7eb;

    --bg-overlay: rgba(15, 23, 42, 0.2);
    --bg-modal-header: rgba(243, 244, 246, 0.95);
    --bg-table: rgba(243, 244, 246, 0.4);
    --bg-table-head: rgba(243, 244, 246, 0.9);
    --bg-table-row: rgba(243, 244, 246, 0.2);
    --bg-table-row-alt: rgba(243, 244, 246, 0.35);
    --bg-table-hover: rgba(15, 23, 42, 0.04);
    --bg-table-hover-alt: rgba(15, 23, 42, 0.06);
    --bg-input-check: rgba(243, 244, 246, 0.8);
    --bg-login-wrapper: rgba(255, 255, 255, 0.98);
    --bg-login-input: rgba(243, 244, 246, 0.9);
    --bg-scrollbar-track: rgba(243, 244, 246, 0.6);
    --bg-scrollbar-thumb: rgba(100, 116, 139, 0.4);
    --bg-scrollbar-thumb-hover: rgba(100, 116, 139, 0.6);
    --bg-skeleton-from: rgba(15, 23, 42, 0.04);
    --bg-skeleton-mid: rgba(15, 23, 42, 0.07);
    --bg-skeleton-reduced: rgba(15, 23, 42, 0.03);
    --bg-focus-ring: rgba(14, 165, 233, 0.3);
    --bg-focus-ring-subtle: rgba(14, 165, 233, 0.2);
    --bg-tab-hover: rgba(15, 23, 42, 0.04);
    --bg-dropdown-hover: rgba(15, 23, 42, 0.04);
    --bg-dropdown-menu-shadow: rgba(15, 23, 42, 0.12);
    --bg-chart-tooltip: rgba(255, 255, 255, 0.98);
    --bg-chart-grid: rgba(15, 23, 42, 0.06);
    --bg-queue-scrollbar-track: rgba(15, 23, 42, 0.04);
    --bg-queue-scrollbar-thumb: rgba(15, 23, 42, 0.15);
    --bg-queue-load-bar: rgba(15, 23, 42, 0.08);
    --bg-login-modal-bg: rgba(15, 23, 42, 0.25);
    --bg-login-grid-line: rgba(15, 23, 42, 0.03);
    --bg-btn-secondary-hover: rgba(243, 244, 246, 0.95);
    --bg-datatables-wrapper: rgba(243, 244, 246, 0.2);
    --bg-page-link-hover: rgba(15, 23, 42, 0.04);
    --bg-active-tab: rgba(14, 165, 233, 0.06);
    --bg-dropdown-item-hover: rgba(15, 23, 42, 0.04);
    --bg-lang-btn-hover: rgba(15, 23, 42, 0.04);
    --bg-login-icon: rgba(14, 165, 233, 0.08);
    --bg-login-submit: #0ea5e9;
    --bg-login-submit-hover-shadow: rgba(14, 165, 233, 0.3);
    --bg-login-orb-1: radial-gradient(circle, rgba(14, 165, 233, 0.04) 0%, transparent 70%);
    --bg-login-orb-2: radial-gradient(circle, rgba(99, 102, 241, 0.03) 0%, transparent 70%);
    --bg-login-orb-3: radial-gradient(circle, rgba(99, 102, 241, 0.02) 0%, transparent 70%);
    --bg-modal-shadow: rgba(15, 23, 42, 0.12);
    --bg-modal-shadow-2: rgba(15, 23, 42, 0.08);
    --bg-login-border-top: rgba(15, 23, 42, 0.06);
    --bg-login-border: rgba(15, 23, 42, 0.08);
    --bg-login-input-focus-shadow: rgba(14, 165, 233, 0.15);
    --bg-login-input-focus-inset: rgba(14, 165, 233, 0.02);
    --bg-login-error: rgba(220, 38, 38, 0.06);
    --bg-login-error-border: rgba(220, 38, 38, 0.25);
    --bg-login-submit-shadow: rgba(14, 165, 233, 0.2);
    --bg-login-icon-shadow: rgba(14, 165, 233, 0.1);
    --bg-login-icon-border: rgba(14, 165, 233, 0.18);
    --bg-login-input-border: rgba(15, 23, 42, 0.12);
    --bg-login-input-focus-border: rgba(14, 165, 233, 0.45);
    --bg-login-check-bg: rgba(243, 244, 246, 0.8);
    --bg-ag-border: #e5e7eb;
    --bg-ag-header: rgba(243, 244, 246, 0.95);
    --bg-ag-row: #ffffff;
    --bg-ag-row-even: #f9fafb;
    --bg-ag-viewport: #f9fafb;
    --bg-ag-hover: rgba(15, 23, 42, 0.04);
    --bg-ag-selected: rgba(14, 165, 233, 0.08);
    --bg-ag-header-hover: rgba(15, 23, 42, 0.03);
    --bg-ag-active: rgba(14, 165, 233, 0.06);
    --bg-ag-active-hover: rgba(14, 165, 233, 0.1);
    --bg-ag-menu-shadow: rgba(15, 23, 42, 0.12);
    --bg-ag-menu-item-hover: rgba(15, 23, 42, 0.04);
    --bg-ag-set-filter-selected: rgba(14, 165, 233, 0.06);
    --bg-ag-loading: rgba(243, 244, 246, 0.6);
    --bg-ag-disabled-input: rgba(243, 244, 246, 0.6);
    --bg-ag-disabled-border: rgba(209, 213, 219, 0.6);
    --bg-ag-toggle-off: rgba(148, 163, 184, 0.3);
    --bg-ag-chip: rgba(14, 165, 233, 0.1);
    --bg-ag-range-selection: rgba(14, 165, 233, 0.04);
    --bg-ag-overlay: rgba(15, 23, 42, 0.25);
    --bg-ag-disabled-text: rgba(100, 116, 139, 0.35);
    --bg-card-icon-total: rgba(14, 165, 233, 0.08);
    --bg-card-icon-success: rgba(22, 163, 74, 0.08);
    --bg-card-icon-danger: rgba(220, 38, 38, 0.08);
    --bg-card-icon-warning: rgba(245, 158, 11, 0.08);
    --bg-card-icon-info: rgba(14, 165, 233, 0.08);
    --bg-card-icon-secondary: rgba(99, 102, 241, 0.08);
    --bg-card-icon-indigo: rgba(99, 102, 241, 0.08);
    --bg-badge-success: rgba(22, 163, 74, 0.08);
    --bg-badge-error: rgba(220, 38, 38, 0.08);
    --bg-badge-warning: rgba(245, 158, 11, 0.08);
    --bg-badge-secondary: rgba(107, 114, 128, 0.08);
    --bg-badge-primary: rgba(14, 165, 233, 0.08);
    --bg-token-display: rgba(14, 165, 233, 0.06);
    --bg-token-display-hover: rgba(14, 165, 233, 0.1);
    --bg-action-edit: rgba(14, 165, 233, 0.08);
    --bg-action-delete: rgba(220, 38, 38, 0.08);
    --bg-action-view: rgba(99, 102, 241, 0.08);
    --bg-action-tx: rgba(245, 158, 11, 0.08);
    --bg-trend-up: rgba(22, 163, 74, 0.06);
    --bg-trend-down: rgba(220, 38, 38, 0.06);
    --bg-btn-primary-hover-shadow: rgba(14, 165, 233, 0.25);
    --bg-btn-outline-active-shadow: rgba(99, 102, 241, 0.15);
    --bg-login-inset: rgba(0, 0, 0, 0.02);
  }
}

/*
 * Manual theme override — [data-theme] on <html> takes precedence over
 * prefers-color-scheme media query.
 */

/* When data-theme="dark" is set, force dark vars even if OS prefers light */
@media (prefers-color-scheme: light) {
  [data-theme="dark"] {
    --dark-color: #111827;
    --darker-color: #0b1120;
    --card-bg: #111827;
    --light-bg: #0b1120;
    --input-bg: #111827;
    --card-border: rgba(148, 163, 184, 0.12);
    --input-border: rgba(148, 163, 184, 0.18);
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3);
    --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.35);
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: #1f2937;
    --bg-overlay: rgba(0, 0, 0, 0.6);
    --bg-modal-header: rgba(17, 24, 39, 0.95);
    --bg-table: rgba(17, 24, 39, 0.5);
    --bg-table-head: rgba(17, 24, 39, 0.9);
    --bg-table-row: rgba(17, 24, 39, 0.3);
    --bg-table-row-alt: rgba(17, 24, 39, 0.45);
    --bg-table-hover: rgba(148, 163, 184, 0.08);
    --bg-table-hover-alt: rgba(148, 163, 184, 0.12);
    --bg-input-check: rgba(17, 24, 39, 0.8);
    --bg-login-wrapper: rgba(17, 24, 39, 0.95);
    --bg-login-input: rgba(17, 24, 39, 0.8);
    --bg-scrollbar-track: rgba(17, 24, 39, 0.6);
    --bg-scrollbar-thumb: rgba(148, 163, 184, 0.35);
    --bg-scrollbar-thumb-hover: rgba(148, 163, 184, 0.55);
    --bg-skeleton-from: rgba(148, 163, 184, 0.06);
    --bg-skeleton-mid: rgba(148, 163, 184, 0.1);
    --bg-skeleton-reduced: rgba(148, 163, 184, 0.04);
    --bg-focus-ring: rgba(14, 165, 233, 0.25);
    --bg-focus-ring-subtle: rgba(14, 165, 233, 0.15);
    --bg-tab-hover: rgba(148, 163, 184, 0.06);
    --bg-dropdown-hover: rgba(148, 163, 184, 0.08);
    --bg-dropdown-menu-shadow: rgba(0, 0, 0, 0.45);
    --bg-chart-tooltip: rgba(17, 24, 39, 0.97);
    --bg-chart-grid: rgba(148, 163, 184, 0.08);
    --bg-queue-scrollbar-track: rgba(148, 163, 184, 0.06);
    --bg-queue-scrollbar-thumb: rgba(148, 163, 184, 0.25);
    --bg-queue-load-bar: rgba(148, 163, 184, 0.12);
    --bg-login-modal-bg: rgba(0, 0, 0, 0.7);
    --bg-login-grid-line: rgba(148, 163, 184, 0.04);
    --bg-btn-secondary-hover: rgba(31, 41, 55, 0.9);
    --bg-datatables-wrapper: rgba(17, 24, 39, 0.3);
    --bg-page-link-hover: rgba(148, 163, 184, 0.08);
    --bg-active-tab: rgba(14, 165, 233, 0.08);
    --bg-dropdown-item-hover: rgba(148, 163, 184, 0.08);
    --bg-lang-btn-hover: rgba(148, 163, 184, 0.08);
    --bg-modal-shadow: rgba(0, 0, 0, 0.4);
    --bg-modal-shadow-2: rgba(0, 0, 0, 0.3);
    --bg-login-border: rgba(148, 163, 184, 0.15);
    --bg-login-input-border: rgba(148, 163, 184, 0.18);
    --bg-login-input-focus-border: rgba(14, 165, 233, 0.5);
    --bg-login-input-focus-shadow: rgba(14, 165, 233, 0.2);
    --bg-login-input-focus-inset: rgba(14, 165, 233, 0.04);
    --bg-login-error: rgba(220, 38, 38, 0.08);
    --bg-login-error-border: rgba(220, 38, 38, 0.3);
    --bg-login-submit-shadow: rgba(14, 165, 233, 0.25);
    --bg-login-icon-shadow: rgba(14, 165, 233, 0.15);
    --bg-login-icon-border: rgba(14, 165, 233, 0.25);
    --bg-login-check-bg: rgba(17, 24, 39, 0.8);
    --bg-ag-border: #1f2937;
    --bg-ag-header: rgba(17, 24, 39, 0.95);
    --bg-ag-row: #111827;
    --bg-ag-row-even: #0f172a;
    --bg-ag-viewport: #0f172a;
    --bg-ag-hover: rgba(148, 163, 184, 0.08);
    --bg-ag-selected: rgba(14, 165, 233, 0.12);
    --bg-ag-header-hover: rgba(148, 163, 184, 0.06);
    --bg-ag-active: rgba(14, 165, 233, 0.08);
    --bg-ag-active-hover: rgba(14, 165, 233, 0.14);
    --bg-ag-menu-shadow: rgba(0, 0, 0, 0.45);
    --bg-ag-menu-item-hover: rgba(148, 163, 184, 0.08);
    --bg-ag-set-filter-selected: rgba(14, 165, 233, 0.1);
    --bg-ag-loading: rgba(17, 24, 39, 0.6);
    --bg-ag-disabled-input: rgba(31, 41, 55, 0.5);
    --bg-ag-disabled-border: rgba(55, 65, 81, 0.5);
    --bg-ag-toggle-off: rgba(107, 114, 128, 0.35);
    --bg-ag-chip: rgba(14, 165, 233, 0.15);
    --bg-ag-range-selection: rgba(14, 165, 233, 0.06);
    --bg-ag-overlay: rgba(0, 0, 0, 0.6);
    --bg-ag-disabled-text: rgba(148, 163, 184, 0.35);
    --bg-card-icon-total: rgba(14, 165, 233, 0.12);
    --bg-card-icon-success: rgba(22, 163, 74, 0.12);
    --bg-card-icon-danger: rgba(220, 38, 38, 0.12);
    --bg-card-icon-warning: rgba(245, 158, 11, 0.12);
    --bg-card-icon-info: rgba(14, 165, 233, 0.12);
    --bg-card-icon-secondary: rgba(99, 102, 241, 0.12);
    --bg-card-icon-indigo: rgba(99, 102, 241, 0.12);
    --bg-badge-success: rgba(22, 163, 74, 0.12);
    --bg-badge-error: rgba(220, 38, 38, 0.12);
    --bg-badge-warning: rgba(245, 158, 11, 0.12);
    --bg-badge-secondary: rgba(107, 114, 128, 0.15);
    --bg-badge-primary: rgba(14, 165, 233, 0.12);
    --bg-token-display: rgba(14, 165, 233, 0.08);
    --bg-token-display-hover: rgba(14, 165, 233, 0.14);
    --bg-action-edit: rgba(14, 165, 233, 0.12);
    --bg-action-delete: rgba(220, 38, 38, 0.12);
    --bg-action-view: rgba(99, 102, 241, 0.12);
    --bg-action-tx: rgba(245, 158, 11, 0.12);
    --bg-trend-up: rgba(22, 163, 74, 0.08);
    --bg-trend-down: rgba(220, 38, 38, 0.08);
    --bg-btn-primary-hover-shadow: rgba(14, 165, 233, 0.35);
    --bg-btn-outline-active-shadow: rgba(99, 102, 241, 0.25);
    --bg-login-inset: rgba(0, 0, 0, 0.15);
  }
}

/* When data-theme="light" is set, force light vars even if OS prefers dark */
@media (prefers-color-scheme: dark) {
  [data-theme="light"] {
    --dark-color: #f8f9fb;
    --darker-color: #f1f3f7;
    --card-bg: #fafbfd;
    --light-bg: #f1f3f7;
    --input-bg: #ffffff;
    --card-border: rgba(15, 23, 42, 0.06);
    --input-border: rgba(15, 23, 42, 0.1);
    --card-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
    --card-shadow-hover: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.05);
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #6b7280;
    --border-color: #e5e7eb;
    --bg-overlay: rgba(15, 23, 42, 0.25);
    --bg-modal-header: rgba(243, 244, 246, 0.95);
    --bg-table: rgba(243, 244, 246, 0.4);
    --bg-table-head: rgba(243, 244, 246, 0.9);
    --bg-table-row: rgba(243, 244, 246, 0.2);
    --bg-table-row-alt: rgba(243, 244, 246, 0.35);
    --bg-table-hover: rgba(15, 23, 42, 0.04);
    --bg-table-hover-alt: rgba(15, 23, 42, 0.06);
    --bg-input-check: rgba(243, 244, 246, 0.8);
    --bg-login-wrapper: rgba(255, 255, 255, 0.98);
    --bg-login-input: rgba(243, 244, 246, 0.9);
    --bg-scrollbar-track: rgba(243, 244, 246, 0.6);
    --bg-scrollbar-thumb: rgba(100, 116, 139, 0.4);
    --bg-scrollbar-thumb-hover: rgba(100, 116, 139, 0.6);
    --bg-skeleton-from: rgba(15, 23, 42, 0.04);
    --bg-skeleton-mid: rgba(15, 23, 42, 0.07);
    --bg-skeleton-reduced: rgba(15, 23, 42, 0.03);
    --bg-focus-ring: rgba(14, 165, 233, 0.3);
    --bg-focus-ring-subtle: rgba(14, 165, 233, 0.2);
    --bg-tab-hover: rgba(15, 23, 42, 0.04);
    --bg-dropdown-hover: rgba(15, 23, 42, 0.04);
    --bg-dropdown-menu-shadow: rgba(15, 23, 42, 0.12);
    --bg-chart-tooltip: rgba(255, 255, 255, 0.98);
    --bg-chart-grid: rgba(15, 23, 42, 0.06);
    --bg-queue-scrollbar-track: rgba(15, 23, 42, 0.04);
    --bg-queue-scrollbar-thumb: rgba(15, 23, 42, 0.15);
    --bg-queue-load-bar: rgba(15, 23, 42, 0.08);
    --bg-login-modal-bg: rgba(15, 23, 42, 0.25);
    --bg-login-grid-line: rgba(15, 23, 42, 0.03);
    --bg-btn-secondary-hover: rgba(243, 244, 246, 0.95);
    --bg-datatables-wrapper: rgba(243, 244, 246, 0.2);
    --bg-page-link-hover: rgba(15, 23, 42, 0.04);
    --bg-active-tab: rgba(14, 165, 233, 0.06);
    --bg-dropdown-item-hover: rgba(15, 23, 42, 0.04);
    --bg-lang-btn-hover: rgba(15, 23, 42, 0.04);
    --bg-modal-shadow: rgba(15, 23, 42, 0.12);
    --bg-modal-shadow-2: rgba(15, 23, 42, 0.08);
    --bg-login-border: rgba(15, 23, 42, 0.08);
    --bg-login-input-border: rgba(15, 23, 42, 0.12);
    --bg-login-input-focus-border: rgba(14, 165, 233, 0.45);
    --bg-login-input-focus-shadow: rgba(14, 165, 233, 0.15);
    --bg-login-input-focus-inset: rgba(14, 165, 233, 0.02);
    --bg-login-error: rgba(220, 38, 38, 0.06);
    --bg-login-error-border: rgba(220, 38, 38, 0.25);
    --bg-login-submit-shadow: rgba(14, 165, 233, 0.2);
    --bg-login-icon-shadow: rgba(14, 165, 233, 0.1);
    --bg-login-icon-border: rgba(14, 165, 233, 0.18);
    --bg-login-check-bg: rgba(243, 244, 246, 0.8);
    --bg-ag-border: #e5e7eb;
    --bg-ag-header: rgba(243, 244, 246, 0.95);
    --bg-ag-row: #ffffff;
    --bg-ag-row-even: #f9fafb;
    --bg-ag-viewport: #f9fafb;
    --bg-ag-hover: rgba(15, 23, 42, 0.04);
    --bg-ag-selected: rgba(14, 165, 233, 0.08);
    --bg-ag-header-hover: rgba(15, 23, 42, 0.03);
    --bg-ag-active: rgba(14, 165, 233, 0.06);
    --bg-ag-active-hover: rgba(14, 165, 233, 0.1);
    --bg-ag-menu-shadow: rgba(15, 23, 42, 0.12);
    --bg-ag-menu-item-hover: rgba(15, 23, 42, 0.04);
    --bg-ag-set-filter-selected: rgba(14, 165, 233, 0.06);
    --bg-ag-loading: rgba(243, 244, 246, 0.6);
    --bg-ag-disabled-input: rgba(243, 244, 246, 0.6);
    --bg-ag-disabled-border: rgba(209, 213, 219, 0.6);
    --bg-ag-toggle-off: rgba(148, 163, 184, 0.3);
    --bg-ag-chip: rgba(14, 165, 233, 0.1);
    --bg-ag-range-selection: rgba(14, 165, 233, 0.04);
    --bg-ag-overlay: rgba(15, 23, 42, 0.25);
    --bg-ag-disabled-text: rgba(100, 116, 139, 0.35);
    --bg-card-icon-total: rgba(14, 165, 233, 0.08);
    --bg-card-icon-success: rgba(22, 163, 74, 0.08);
    --bg-card-icon-danger: rgba(220, 38, 38, 0.08);
    --bg-card-icon-warning: rgba(245, 158, 11, 0.08);
    --bg-card-icon-info: rgba(14, 165, 233, 0.08);
    --bg-card-icon-secondary: rgba(99, 102, 241, 0.08);
    --bg-card-icon-indigo: rgba(99, 102, 241, 0.08);
    --bg-badge-success: rgba(22, 163, 74, 0.08);
    --bg-badge-error: rgba(220, 38, 38, 0.08);
    --bg-badge-warning: rgba(245, 158, 11, 0.08);
    --bg-badge-secondary: rgba(107, 114, 128, 0.08);
    --bg-badge-primary: rgba(14, 165, 233, 0.08);
    --bg-token-display: rgba(14, 165, 233, 0.06);
    --bg-token-display-hover: rgba(14, 165, 233, 0.1);
    --bg-action-edit: rgba(14, 165, 233, 0.08);
    --bg-action-delete: rgba(220, 38, 38, 0.08);
    --bg-action-view: rgba(99, 102, 241, 0.08);
    --bg-action-tx: rgba(245, 158, 11, 0.08);
    --bg-trend-up: rgba(22, 163, 74, 0.06);
    --bg-trend-down: rgba(220, 38, 38, 0.06);
    --bg-btn-primary-hover-shadow: rgba(14, 165, 233, 0.25);
    --bg-btn-outline-active-shadow: rgba(99, 102, 241, 0.15);
    --bg-login-inset: rgba(0, 0, 0, 0.02);
  }
}