/**
 * SocialeTicket Theme - Neon Cyan (Default Cyberpunk)
 */
:root {
    --st-accent: #00f0ff;
    --st-accent-dim: #06b6d4;
    --st-accent-glow: rgba(0, 240, 255, 0.45);
    --st-accent-border: rgba(0, 240, 255, 0.35);
    --st-accent-rgb: 0, 240, 255;
    --st-cyan: #00f0ff;
    --st-cyan-dim: #06b6d4;
    --st-cyan-glow: rgba(0, 240, 255, 0.45);
    --glass-border-hover: rgba(0, 240, 255, 0.4);
    --neon-blue: #38bdf8;
    --theme-color-name: 'cyan';
}

/* Text Colors */
.text-cyan-400, .text-cyan-300, .text-cyan-500 {
    color: #00f0ff !important;
}
.text-cyan-200, .text-cyan-100 {
    color: #a5f3fc !important;
}
.hover\:text-cyan-300:hover, .hover\:text-cyan-400:hover {
    color: #67e8f9 !important;
}
.group:hover .group-hover\:text-cyan-300,
.group:hover .group-hover\:text-cyan-400 {
    color: #67e8f9 !important;
}

/* Background Colors */
.bg-cyan-500\/5 { background-color: rgba(0, 240, 255, 0.05) !important; }
.bg-cyan-500\/10 { background-color: rgba(0, 240, 255, 0.10) !important; }
.bg-cyan-500\/20 { background-color: rgba(0, 240, 255, 0.20) !important; }
.bg-cyan-500\/25 { background-color: rgba(0, 240, 255, 0.25) !important; }
.bg-cyan-500\/30 { background-color: rgba(0, 240, 255, 0.30) !important; }
.bg-cyan-500\/40 { background-color: rgba(0, 240, 255, 0.40) !important; }
.bg-cyan-500\/50 { background-color: rgba(0, 240, 255, 0.50) !important; }
.bg-cyan-400, .bg-cyan-500 { background-color: #00f0ff !important; }
.bg-cyan-950, .bg-cyan-950\/80, .bg-cyan-950\/60, .bg-cyan-950\/50, .bg-cyan-950\/40, .bg-cyan-950\/30, .bg-cyan-950\/20 {
    background-color: rgba(0, 240, 255, 0.12) !important;
}
.hover\:bg-cyan-500\/10:hover { background-color: rgba(0, 240, 255, 0.10) !important; }
.hover\:bg-cyan-500\/20:hover { background-color: rgba(0, 240, 255, 0.20) !important; }
.hover\:bg-cyan-500\/30:hover { background-color: rgba(0, 240, 255, 0.30) !important; }
.hover\:bg-cyan-500\/40:hover { background-color: rgba(0, 240, 255, 0.40) !important; }
.hover\:bg-cyan-950\/20:hover, .hover\:bg-cyan-950\/30:hover { background-color: rgba(0, 240, 255, 0.18) !important; }

/* Border Colors */
.border-cyan-500\/10 { border-color: rgba(0, 240, 255, 0.10) !important; }
.border-cyan-500\/20 { border-color: rgba(0, 240, 255, 0.20) !important; }
.border-cyan-500\/25 { border-color: rgba(0, 240, 255, 0.25) !important; }
.border-cyan-500\/30 { border-color: rgba(0, 240, 255, 0.30) !important; }
.border-cyan-500\/40 { border-color: rgba(0, 240, 255, 0.40) !important; }
.border-cyan-500\/50 { border-color: rgba(0, 240, 255, 0.50) !important; }
.border-cyan-400, .border-cyan-500 { border-color: #00f0ff !important; }
.hover\:border-cyan-400:hover, .hover\:border-cyan-500\/50:hover, .hover\:border-cyan-500\/40:hover {
    border-color: #00f0ff !important;
}
.focus\:border-cyan-400:focus, .focus\:border-cyan-500:focus {
    border-color: #00f0ff !important;
}

/* Gradients */
.from-cyan-400, .from-cyan-500 {
    --tw-gradient-from: #00f0ff var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(0, 240, 255, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-cyan-400, .to-cyan-500 {
    --tw-gradient-to: #06b6d4 var(--tw-gradient-to-position) !important;
}
.via-cyan-400, .via-cyan-500 {
    --tw-gradient-to: rgba(0, 240, 255, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), #00f0ff var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

/* Shadows & Glows */
.shadow-cyan-500\/20 { box-shadow: 0 0 15px rgba(0, 240, 255, 0.20) !important; }
.shadow-cyan-500\/30 { box-shadow: 0 0 20px rgba(0, 240, 255, 0.30) !important; }
.shadow-cyan-950\/40 { box-shadow: 0 0 25px rgba(0, 240, 255, 0.35) !important; }

/* Progression Bars */
#home-progression-bar-top {
    background: linear-gradient(90deg, #00f0ff 0%, #06b6d4 50%, #38bdf8 100%) !important;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.8), 0 0 4px #00f0ff !important;
}
#menu-sync-bar {
    background: linear-gradient(90deg, #00f0ff 0%, #38bdf8 50%, #6366f1 100%) !important;
    box-shadow: 0 0 10px #00f0ff !important;
}
#wall-progress-bar {
    background: linear-gradient(90deg, #00f0ff 0%, #38bdf8 100%) !important;
}

/* Active Navigation Item */
.nav-item.active {
    background-color: rgba(0, 240, 255, 0.12) !important;
    border-color: rgba(0, 240, 255, 0.35) !important;
}
.nav-item.active i {
    color: #00f0ff !important;
}
.nav-item.active .nav-label {
    color: #a5f3fc !important;
}