:root {
    --color-bg: #f5f5f7;
    --color-bg-elevated: #ffffff;
    --color-border: #e0e0e5;
    --color-text: #111827;
    --color-text-muted: #6b7280;
    --color-accent: #4f46e5;
    --color-accent-soft: rgba(79, 70, 229, 0.1);
    --color-error: #dc2626;
    --radius-lg: 16px;
    --radius-md: 10px;
    --radius-sm: 6px;
    --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.12);
    --shadow-subtle: 0 2px 12px rgba(15, 23, 42, 0.06);
    --bs-background: #fff;
    --bs-primary: #555555;
    --bs-secondary: #008aff;
    --ai-primary-accent: #169cff;
    --ai-secondary-accent: #141e34;
    --ai-tertiary-accent: #0E76BC;
    --ai-primary: var(--ai-primary-accent, #169cff);
    --ai-secondary: var(--ai-secondary-accent, #141e34);
    --ai-tertiary: var(--ai-tertiary-accent, #0E76BC);
    --abp-bg: var(--ai-secondary);
    --abp-bg-grad-1: rgba(22, 156, 255, 0.14); /* primary */
    --abp-bg-grad-2: rgba(14, 118, 188, 0.10); /* tertiary */

    --abp-surface: rgba(255, 255, 255, 0.045);
    --abp-surface-strong: rgba(255, 255, 255, 0.06);
    --abp-surface-glass: rgba(255, 255, 255, 0.05);
    --abp-border: rgba(255, 255, 255, 0.09);
    --abp-border-strong: rgba(255, 255, 255, 0.12);
    --abp-text: #e7e9ee;
    --abp-text-strong: rgba(255, 255, 255, 0.95);
    --abp-text-muted: rgba(231, 233, 238, 0.62);
    --abp-text-muted-2: rgba(231, 233, 238, 0.78);
    --abp-text-muted-3: rgba(231, 233, 238, 0.72);
    /* Status accents (keep semantic) */
    --abp-accent-planned: rgba(245, 158, 11, 0.70);
    --abp-accent-created: rgba(34, 197, 94, 0.75);
    --abp-accent-failed: rgba(239, 68, 68, 0.75);
    /* Badge palettes */
    --abp-badge-bg: rgba(255, 255, 255, 0.03);
    --abp-badge-border: rgba(255, 255, 255, 0.10);
    /* Brand-aligned badges */
    --abp-badge-type-fg: rgba(22, 156, 255, 0.95); /* primary */
    --abp-badge-type-border: rgba(22, 156, 255, 0.26);
    --abp-badge-type-bg: rgba(22, 156, 255, 0.08);
    --abp-badge-id-fg: rgba(148, 163, 184, 0.92);
    --abp-badge-id-border: rgba(148, 163, 184, 0.20);
    --abp-badge-id-bg: rgba(148, 163, 184, 0.06);
    --abp-badge-route-fg: rgba(14, 118, 188, 0.98); /* tertiary */
    --abp-badge-route-border: rgba(14, 118, 188, 0.24);
    --abp-badge-route-bg: rgba(14, 118, 188, 0.08);
    --abp-badge-ok-fg: rgba(34, 197, 94, 0.95);
    --abp-badge-ok-border: rgba(34, 197, 94, 0.25);
    --abp-badge-ok-bg: rgba(34, 197, 94, 0.07);
    --abp-badge-warn-fg: rgba(245, 158, 11, 0.95);
    --abp-badge-warn-border: rgba(245, 158, 11, 0.25);
    --abp-badge-warn-bg: rgba(245, 158, 11, 0.07);
    --abp-badge-bad-fg: rgba(239, 68, 68, 0.95);
    --abp-badge-bad-border: rgba(239, 68, 68, 0.25);
    --abp-badge-bad-bg: rgba(239, 68, 68, 0.07);
    /* Tabs (brand-aligned) */
    --abp-tab-active-bg: rgba(22, 156, 255, 0.14);
    --abp-tab-active-border: rgba(22, 156, 255, 0.32);
    --abp-tab-active-fg: rgba(236, 248, 255, 0.97);
    /* Connectors */
    --abp-line: linear-gradient(to bottom, rgba(22,156,255,0.22), rgba(255,255,255,0.06));
    --abp-line-fade: linear-gradient(to bottom, rgba(22,156,255,0.14), rgba(255,255,255,0.00));
    /* Code block stays DARK in both themes */
    --abp-code-bg: #0B1220;
    --abp-code-fg: #E6EEF5;
    --abp-code-border: rgba(255, 255, 255, 0.10);
    /* Shadows */
    --abp-shadow-card: 0 10px 30px rgba(0,0,0,0.25);
    --abp-shadow-inset: 0 1px 0 rgba(255,255,255,0.04) inset;

    --abp-bg: #F7F8FB;
    --abp-bg-grad-1: rgba(22, 156, 255, 0.14);
    --abp-bg-grad-2: rgba(14, 118, 188, 0.08);
    --abp-surface: rgba(255, 255, 255, 0.82);
    --abp-surface-strong: rgba(255, 255, 255, 0.94);
    --abp-surface-glass: rgba(255, 255, 255, 0.74);
    --abp-border: rgba(31, 41, 55, 0.10);
    --abp-border-strong: rgba(31, 41, 55, 0.14);
    --abp-text: #1F2937;
    --abp-text-strong: #0F172A;
    --abp-text-muted: rgba(31, 41, 55, 0.62);
    --abp-text-muted-2: rgba(31, 41, 55, 0.72);
    --abp-text-muted-3: rgba(31, 41, 55, 0.70);
    --abp-badge-bg: rgba(15, 23, 42, 0.04);
    --abp-badge-border: rgba(15, 23, 42, 0.10);
    --abp-badge-type-fg: rgba(0, 98, 170, 0.95); /* tertiary-ish for light */
    --abp-badge-type-border: rgba(22, 156, 255, 0.22); /* primary border */
    --abp-badge-type-bg: rgba(22, 156, 255, 0.10);
    --abp-badge-route-fg: rgba(14, 118, 188, 0.95);
    --abp-badge-route-border: rgba(14, 118, 188, 0.18);
    --abp-badge-route-bg: rgba(14, 118, 188, 0.08);
    --abp-tab-active-bg: rgba(22, 156, 255, 0.12);
    --abp-tab-active-border: rgba(22, 156, 255, 0.22);
    --abp-tab-active-fg: rgba(15, 23, 42, 0.95);
    --abp-line: linear-gradient(to bottom, rgba(14,118,188,0.22), rgba(15,23,42,0.06));
    --abp-line-fade: linear-gradient(to bottom, rgba(14,118,188,0.14), rgba(15,23,42,0.00));
    --abp-shadow-card: 0 12px 30px rgba(15, 23, 42, 0.10);
    --abp-shadow-inset: 0 1px 0 rgba(255,255,255,0.55) inset;
    --abp-code-bg: #0B1220;
    --abp-code-fg: #E6EEF5;
    --abp-code-border: rgba(255, 255, 255, 0.10);
}

.e-appbar.e-primary {
    background: var(--ai-secondary-accent) !important;
    color: #fff;
    border-color: var(--ai-secondary-accent) !important;
}

.e-tooltip-wrap.e-popup,
.default-tooltip {
    background-color: rgba(240, 240, 240, 0.2) !important;
    border: 1px solid rgba(240, 240, 240, 0.3) !important;
}

    .prompt-config-container .e-float-text,
    .prompt-config-container .e-label,
    .prompt-config-container .e-editable-value,
    .e-tooltip-wrap.e-popup .e-tip-content,
    .tooltip-llm-config-menu .e-tip-content .btn-open-llm-popup {
        color: #333 !important;
    }

.tooltip-llm-config-menu .e-tip-content {
    display: flex;
    flex-direction: column;
}