/* Vision theme (#002df5) — applied when html[data-brand="vision"] (file:// open) */

html[data-brand="vision"] .hero-banner.ai-support-banner {
    background: linear-gradient(135deg, rgba(0, 45, 245, 0.12) 0%, rgba(41, 98, 255, 0.08) 50%, rgba(0, 26, 158, 0.1) 100%);
}

html[data-brand="vision"] .hero-banner.ai-support-banner::before {
    background: linear-gradient(
        90deg,
        #002df5 0%,
        #2962ff 25%,
        #3366ff 50%,
        #2962ff 75%,
        #002df5 100%
    );
}

html[data-brand="vision"] .hero-badge {
    background: rgba(0, 45, 245, 0.18);
}

html[data-brand="vision"] .btn-glow {
    box-shadow: 0 4px 15px rgba(0, 45, 245, 0.35);
}

html[data-brand="vision"] .btn-glow:hover {
    background: #2962ff;
    box-shadow: 0 6px 20px rgba(0, 45, 245, 0.45);
}

html[data-brand="vision"] .ai-glow-border::before,
html[data-brand="vision"] .ai-glow-border::after {
    background: linear-gradient(
        90deg,
        #001a9e 0%,
        #002df5 20%,
        #2962ff 40%,
        #3366ff 60%,
        #2962ff 80%,
        #001a9e 100%
    );
}

html[data-brand="vision"] .ai-glow-border-sides::before,
html[data-brand="vision"] .ai-glow-border-sides::after {
    background: linear-gradient(
        180deg,
        #001a9e 0%,
        #002df5 20%,
        #2962ff 40%,
        #3366ff 60%,
        #2962ff 80%,
        #001a9e 100%
    );
}

html[data-brand="vision"] .ai-glow-corners::before {
    background: #002df5;
}

html[data-brand="vision"] .ai-glow-corners::after {
    background: #2962ff;
}

html[data-brand="vision"] .ai-glow-corners-extra::before {
    background: #3366ff;
}

html[data-brand="vision"] .ai-glow-corners-extra::after {
    background: #002df5;
}

html[data-brand="vision"] .ai-card-icon:not(.discord) {
    background: rgba(0, 45, 245, 0.18);
}

html[data-brand="vision"] .tutorial-spotlight {
    box-shadow:
        0 0 0 9999px rgba(0, 0, 0, 0.88),
        0 0 30px 5px rgba(0, 45, 245, 0.35);
}

html[data-brand="vision"] .tutorial-spotlight::before {
    border-color: rgba(0, 45, 245, 0.75);
}

html[data-brand="vision"] .tutorial-tooltip {
    border-color: rgba(0, 45, 245, 0.45);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 45, 245, 0.25);
}

html[data-brand="vision"] .tutorial-next-btn {
    background: linear-gradient(135deg, var(--accent-primary) 0%, #2962ff 100%);
}

html[data-brand="vision"] .tutorial-next-btn:hover {
    box-shadow: 0 8px 20px rgba(0, 45, 245, 0.45);
}

html[data-brand="vision"] .tutorial-arrow svg {
    filter: drop-shadow(0 0 10px rgba(0, 45, 245, 0.55));
}

html[data-brand="vision"] .tutorial-scroll-mouse {
    border-color: rgba(0, 45, 245, 0.55);
}

html[data-brand="vision"] .setup-overlay::before {
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 45, 245, 0.18), transparent),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(41, 98, 255, 0.12), transparent),
        radial-gradient(ellipse 50% 30% at 10% 80%, rgba(0, 45, 245, 0.1), transparent);
}

html[data-brand="vision"] .setup-option::before {
    background: linear-gradient(135deg, rgba(0, 45, 245, 0.12), rgba(41, 98, 255, 0.06));
}

html[data-brand="vision"] .setup-option:hover {
    border-color: rgba(0, 45, 245, 0.35);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 45, 245, 0.12);
}

html[data-brand="vision"] .setup-option.selected {
    background: rgba(0, 45, 245, 0.12);
    box-shadow: 0 0 0 1px var(--accent-primary), 0 8px 32px rgba(0, 45, 245, 0.25);
}

html[data-brand="vision"] .setup-option:hover .option-icon {
    background: rgba(0, 45, 245, 0.18);
}

html[data-brand="vision"] .building-progress::before {
    background: linear-gradient(90deg, rgba(0, 45, 245, 0.12) 0%, rgba(41, 98, 255, 0.06) 100%);
}