.glass-card {
    --glass-opacity: 0.02;                
    --glass-blur: 12px;                   
    --glass-border-opacity: 0.05;         
    --glass-radius: 2rem;                 
   
    background: rgba(255, 255, 255, var(--glass-opacity));
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur)); /* Safari support */
    border: 1px solid rgba(255, 255, 255, var(--glass-border-opacity));
    border-radius: var(--glass-radius);
    
    transform: translateZ(0); 
}

.text-gradient {
  background: linear-gradient(135deg, var(--gradient-colors));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.physics-gradient { --gradient-colors: #3b82f6 0%, #06b6d4 100%; }
.english-gradient { --gradient-colors: #a855f7 0%, #6366f1 100%; }
.code-gradient    { --gradient-colors: #a855f7 0%, #22d3ee 100%; }
.math-gradient    { --gradient-colors: #a855f7 0%, #3b82f6 100%; }


.neon-text {
  --glow-color: rgba(255, 255, 255, 0.5); 
  text-shadow: 0 0 15px var(--glow-color);
}

.blue-glow { --glow-color: rgba(59, 130, 246, 0.5); }
.purple-purple { --glow-color: rgba(168, 85, 247, 0.5); }

.body-pages { background-color: #050505; color: #d1d5db; }

.animate-glow { animation: pulse-glow 3s infinite; }

.neon-border { box-shadow: 0 0 15px rgba(168, 85, 247, 0.2); border: 1px solid rgba(168, 85, 247, 0.3); }
.border-gradient { border: 1px solid transparent; background: linear-gradient(#050505, #050505) padding-box, linear-gradient(135deg, #3b82f6, #a855f7) border-box; }

.btn-gradient { background: linear-gradient(135deg, #a855f7, #6366f1); transition: all 0.3s ease; }
.btn-gradient:hover { box-shadow: 0 0 20px rgba(168, 85, 247, 0.4); transform: translateY(-2px); }

.tag { background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.3); color: #c084fc; padding: 2px 10px; border-radius: 8px; font-size: 10px; font-weight: bold; text-transform: uppercase; }