:root {
    --bg-black: #050505;
    --neon-blue: #00f3ff;
    --neon-pink: #ff0099;
    --neon-lime: #ccff00;
    --neon-gold: #ffd700;
}

body {
    background-color: var(--bg-black);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.font-heading { font-family: 'Exo 2', sans-serif; }
.font-monospace { font-family: 'JetBrains Mono', monospace; }

/* Custom Utilities */
.bg-opacity-90 { --bs-bg-opacity: 0.9; }
.bg-cover { background-size: cover; background-position: center; }
.text-cyan { color: var(--neon-blue) !important; }
.text-lime { color: var(--neon-lime) !important; }
.text-gold { color: var(--neon-gold) !important; }
.text-pink { color: var(--neon-pink) !important; }
.opacity-05 { opacity: 0.05; }

/* Neon Effects */
.text-shadow-neon { text-shadow: 0 0 10px rgba(0, 243, 255, 0.5), 0 0 20px rgba(0, 243, 255, 0.3); }
.glow-primary { box-shadow: 0 0 15px rgba(13, 110, 253, 0.5); }
.glow-btn { transition: box-shadow 0.3s ease; }
.glow-btn:hover { box-shadow: 0 0 20px rgba(13, 110, 253, 0.6); }

/* Gradients */
.bg-gradient-primary { background: linear-gradient(45deg, var(--neon-blue), var(--neon-pink)); }
.bg-gradient-dark-to-black { background: linear-gradient(to bottom, #1a1a1a, #000000); }
.bg-clip-text { -webkit-background-clip: text; background-clip: text; }

/* Animations */
@keyframes pulse-glow {
    0% { box-shadow: 0 0 5px rgba(0, 243, 255, 0.2); }
    50% { box-shadow: 0 0 20px rgba(0, 243, 255, 0.6); }
    100% { box-shadow: 0 0 5px rgba(0, 243, 255, 0.2); }
}
.pulse-slow { animation: pulse-glow 3s infinite; }

.hover-glow:hover { box-shadow: 0 0 15px rgba(255, 255, 255, 0.3); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--neon-blue); }

/* Backdrop Filter */
.backdrop-blur { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Override global-items.css so new-theme pages use dark background and light text */
[data-theme="theme-cyan"] body {
    background-color: var(--bg-black) !important;
}
[data-theme="theme-cyan"] .container p,
[data-theme="theme-cyan"] .container label {
    color: inherit !important;
}

/* Mode Themes (Switched via body class or JS handling) */
[data-theme="theme-cyan"] .text-primary { 
    color: var(--neon-blue) !important; 
}
[data-theme="theme-cyan"] .btn-primary,
[data-theme="theme-cyan"] label.btn-primary {
    background-color: var(--neon-blue);
    border-color: var(--neon-blue);
    color: #000 !important;
}
[data-theme="theme-cyan"] .border-primary {
    border-color: var(--neon-blue) !important;
}

[data-theme="theme-lime"] .text-primary,
[data-theme="theme-lime"] .btn-primary { 
    color: var(--neon-lime) !important; 
}
[data-theme="theme-lime"] .btn-primary {
    background-color: var(--neon-lime);
    border-color: var(--neon-lime);
    color: #000 !important;
}
[data-theme="theme-lime"] .border-primary {
    border-color: var(--neon-lime) !important;
}

[data-theme="theme-gold"] .text-primary,
[data-theme="theme-gold"] .btn-primary { 
    color: var(--neon-gold) !important; 
}
[data-theme="theme-gold"] .btn-primary {
    background-color: var(--neon-gold);
    border-color: var(--neon-gold);
    color: #000 !important;
}
[data-theme="theme-gold"] .border-primary {
    border-color: var(--neon-gold) !important;
}

[data-theme="theme-pastel"] .text-primary,
[data-theme="theme-pastel"] .btn-primary { 
    color: #ffb7b2 !important; 
}
[data-theme="theme-pastel"] .btn-primary {
    background-color: #ffb7b2;
    border-color: #ffb7b2;
    color: #000 !important;
}
[data-theme="theme-pastel"] .border-primary {
    border-color: #ffb7b2 !important;
} 

/* Score Card Specifics */
.score-card { 
    transition: transform 0.2s, box-shadow 0.2s; 
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.score-card:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border-color: rgba(255, 255, 255, 0.3);
}

.judgment-marvelous { color: #aeeeff; text-shadow: 0 0 5px #aeeeff; }
.judgment-perfect { color: #ffd700; }
.judgment-great { color: #00ff00; }
.judgment-good { color: #0099ff; }
.judgment-miss { color: #ff3333; }

/* Chart Container */
.chart-container { position: relative; height: 200px; width: 100%; }

/* Utilities */
.cursor-pointer { cursor: pointer; }

/* Entrance Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 20px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.fade-in-up { animation: fadeInUp 0.5s ease-out forwards; opacity: 0; }
.fade-in-up.show { opacity: 1; }

/* Hero Title Transition */
#heroTitle { transition: opacity 0.5s ease-in-out; }

/* Responsive Utilities */
@media (max-width: 768px) {
    .display-1 { font-size: 3rem; }
    #heroSection { min-height: 30vh !important; }
}

/* Missing Bootstrap Utility Classes */
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.hover-text-white:hover { color: #fff !important; }
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-wide { letter-spacing: 0.05em; }
.border-white-10 { border-color: rgba(255, 255, 255, 0.1) !important; }
.text-transparent { color: transparent !important; }
.z-1 { z-index: 1; }
.min-width-0 { min-width: 0; }
.h-10 { height: 2.5rem; }
.fw-black { font-weight: 900; }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }

/* Fix rotate utility */
.rotate-45 { transform: rotate(45deg); display: inline-block; }