/* =========================================================================
   Appdeft AI — FX layer
   Loaded after theme.css. The dark theme's multi-hue glows (violet, magenta,
   pink) are folded back into Appdeft's own blue + cyan here, so any
   stylesheet that still names those accents stays on-brand.
   ========================================================================= */

:root {
    --vs-violet: #3d5bf6;
    --vs-magenta: #19c2ff;
    --vs-pink: #7eb6fb;
}

/* Kept as an empty layer so layouts that still render it cost nothing. */
.vs-aurora {
    display: none;
}

/* ---------------------------------------------------------------------------
   FILTER PILLS — white glass pills; active = navy, as appdeft.ai's tabs.
   --------------------------------------------------------------------------- */
.showcase-filter {
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.66);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--vs-ink-soft);
    box-shadow: inset 0 1px 0 #fff, 0 8px 20px -16px rgba(10, 22, 40, 0.45);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease,
        box-shadow 0.25s ease, transform 0.2s ease, opacity 0.35s ease;
}
.showcase-filter:hover {
    background: #fff;
    color: var(--vs-ink);
    transform: translateY(-1px);
}
.showcase-filter.is-active {
    background: var(--vs-navy);
    border-color: var(--vs-navy);
    color: #fff;
    box-shadow: 0 14px 26px -14px rgba(10, 22, 40, 0.8);
}