/* ============================================================
   NEON GLOW EFFECTS & BORDERS
   ============================================================ */

/* ── Keyframes ─────────────────────────────────────────── */
@keyframes neon-border-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(139,92,246,0.5), 0 0 18px rgba(139,92,246,0.25), 0 0 36px rgba(139,92,246,0.1); }
    50%       { box-shadow: 0 0 10px rgba(167,118,243,0.7), 0 0 28px rgba(139,92,246,0.4), 0 0 55px rgba(139,92,246,0.18); }
}

@keyframes neon-green-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(34,197,94,0.5), 0 0 16px rgba(34,197,94,0.25); }
    50%       { box-shadow: 0 0 10px rgba(34,197,94,0.7), 0 0 30px rgba(34,197,94,0.4); }
}

@keyframes neon-pink-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(236,72,153,0.5), 0 0 18px rgba(236,72,153,0.25); }
    50%       { box-shadow: 0 0 12px rgba(236,72,153,0.75), 0 0 32px rgba(236,72,153,0.4); }
}

@keyframes shimmer-slide {
    0%   { transform: translateX(-100%) skewX(-15deg); }
    100% { transform: translateX(250%) skewX(-15deg); }
}

@keyframes neon-flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
    20%, 24%, 55%                             { opacity: 0.5; }
}

/* ── Button neon shine ──────────────────────────────────── */
.neon-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important;
}
.neon-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    transform: skewX(-15deg);
    opacity: 0;
    transition: opacity 0.1s;
}
.neon-btn:hover::after {
    opacity: 1;
    animation: shimmer-slide 0.65s ease forwards;
}
.neon-btn:hover {
    box-shadow: 0 0 16px rgba(139,92,246,0.55), 0 0 32px rgba(139,92,246,0.28), 0 0 56px rgba(139,92,246,0.12) !important;
    transform: translateY(-2px) !important;
}
.neon-btn:active {
    transform: translateY(0) scale(0.97) !important;
}

/* ── Admin button glow states ───────────────────────────── */
#admin-mode-btn {
    transition: all 0.35s ease !important;
}
#admin-mode-btn:hover {
    animation: neon-border-pulse 1.8s infinite;
}
/* when admin is active (green) */
#admin-mode-btn.bg-green-600,
#admin-mode-btn.bg-green-500 {
    animation: neon-green-pulse 2s infinite;
}

/* ── Section / card neon edge ───────────────────────────── */
.premium-card {
    position: relative;
}
.premium-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(139,92,246,0.0), rgba(167,118,243,0.35), rgba(236,72,153,0.2), rgba(139,92,246,0.0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.premium-card:hover::before {
    opacity: 1;
}

/* ── Input focus neon ring ──────────────────────────────── */
input:focus,
textarea:focus {
    box-shadow: 0 0 0 2px rgba(139,92,246,0.35), 0 0 12px rgba(139,92,246,0.2) !important;
}

/* ── Neon heading accents ───────────────────────────────── */
h1.neon-glow-text,
h2.neon-glow-text {
    animation: neon-flicker 5s infinite, text-pulse 2.5s ease-in-out infinite alternate;
}

/* ── Header border glow ─────────────────────────────────── */
header {
    box-shadow: 0 1px 0 rgba(139,92,246,0.2), 0 4px 24px rgba(0,0,0,0.4) !important;
}

/* ── Active nav link ────────────────────────────────────── */
.nav-link-active,
a.text-brand-600,
a.text-brand-500 {
    text-shadow: 0 0 8px rgba(139,92,246,0.6), 0 0 18px rgba(139,92,246,0.3);
}

/* ── Vault / modal header icons ─────────────────────────── */
.fa-shield-halved,
.fa-lock,
.fa-key {
    filter: drop-shadow(0 0 6px currentColor);
}

/* ── Scrollbar neon ─────────────────────────────────────── */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(139,92,246,0.7), rgba(236,72,153,0.5)) !important;
    box-shadow: 0 0 6px rgba(139,92,246,0.4);
}

/* ── Toast notifications ────────────────────────────────── */
#toast-container > div {
    border: 1px solid rgba(139,92,246,0.3) !important;
    box-shadow: 0 0 14px rgba(139,92,246,0.2), 0 4px 20px rgba(0,0,0,0.5) !important;
}