/* ═══════════════════════════════════════════════════
   CYBER ICONS — Modo PAN Cyberpunk Icon System
   Neon glow SVG icons with animated effects
   ═══════════════════════════════════════════════════ */

/* Base icon styling */
.ci {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-shrink: 0;
}
.ci svg {
    display: block;
}

/* ── Sizes ── */
.ci-xs svg { width: 14px; height: 14px; }
.ci-sm svg { width: 18px; height: 18px; }
.ci-md svg { width: 24px; height: 24px; }
.ci-lg svg { width: 32px; height: 32px; }
.ci-xl svg { width: 48px; height: 48px; }
.ci-2xl svg { width: 64px; height: 64px; }

/* ── Color themes with neon glow ── */
.ci-lilac svg {
    stroke: #A855F7;
    filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.5));
}
.ci-gold svg {
    stroke: #D4AF37;
    filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.5));
}
.ci-cyan svg {
    stroke: #22D3EE;
    filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.5));
}
.ci-red svg {
    stroke: #F43F5E;
    filter: drop-shadow(0 0 4px rgba(244, 63, 94, 0.4));
}
.ci-green svg {
    stroke: #10B981;
    filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.4));
}
.ci-white svg {
    stroke: #E2E8F0;
    filter: drop-shadow(0 0 3px rgba(226, 232, 240, 0.3));
}
.ci-muted svg {
    stroke: #64748B;
    filter: none;
}

/* ── Filled variants ── */
.ci-filled svg {
    fill: currentColor;
    stroke: none;
}
.ci-lilac.ci-filled svg { fill: #A855F7; }
.ci-gold.ci-filled svg { fill: #D4AF37; }
.ci-cyan.ci-filled svg { fill: #22D3EE; }
.ci-red.ci-filled svg { fill: #F43F5E; }
.ci-green.ci-filled svg { fill: #10B981; }

/* ── Glow intensity variants ── */
.ci-glow-strong svg {
    filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 12px currentColor);
}
.ci-lilac.ci-glow-strong svg {
    filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.6)) drop-shadow(0 0 14px rgba(168, 85, 247, 0.3));
}
.ci-gold.ci-glow-strong svg {
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.6)) drop-shadow(0 0 14px rgba(212, 175, 55, 0.3));
}
.ci-cyan.ci-glow-strong svg {
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.6)) drop-shadow(0 0 14px rgba(34, 211, 238, 0.3));
}

.ci-no-glow svg {
    filter: none;
}

/* ── Animated glow pulse ── */
.ci-pulse svg {
    animation: ciPulse 2s ease-in-out infinite;
}
@keyframes ciPulse {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.4)); }
    50% { filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.7)) drop-shadow(0 0 20px rgba(168, 85, 247, 0.3)); }
}
.ci-gold.ci-pulse svg {
    animation: ciPulseGold 2s ease-in-out infinite;
}
@keyframes ciPulseGold {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.4)); }
    50% { filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.7)) drop-shadow(0 0 20px rgba(212, 175, 55, 0.3)); }
}

/* ── Hover glow effect ── */
.ci-hover:hover svg {
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.7)) drop-shadow(0 0 16px rgba(168, 85, 247, 0.3));
    transition: filter 0.3s ease;
}
.ci-gold.ci-hover:hover svg {
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.7)) drop-shadow(0 0 16px rgba(212, 175, 55, 0.3));
}

/* ── Spin animation (for loading/spinner) ── */
.ci-spin svg {
    animation: ciSpin 1s linear infinite;
}
@keyframes ciSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Cyberpunk badge/container for icons ── */
.ci-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.15);
    position: relative;
}
.ci-badge::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), transparent, rgba(212, 175, 55, 0.1));
    z-index: 0;
    pointer-events: none;
}
.ci-badge > .ci {
    position: relative;
    z-index: 1;
}
.ci-badge-gold {
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.15);
}
.ci-badge-gold::before {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), transparent, rgba(168, 85, 247, 0.1));
}
.ci-badge-cyan {
    background: rgba(34, 211, 238, 0.08);
    border-color: rgba(34, 211, 238, 0.15);
}
.ci-badge-red {
    background: rgba(244, 63, 94, 0.08);
    border-color: rgba(244, 63, 94, 0.15);
}
.ci-badge-green {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.15);
}

/* Large badge for action cards */
.ci-badge-lg {
    width: 52px;
    height: 52px;
    border-radius: 14px;
}
.ci-badge-xl {
    width: 64px;
    height: 64px;
    border-radius: 16px;
}

/* ── Inline icon + text alignment ── */
.ci-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}
.ci-inline .ci {
    flex-shrink: 0;
}