/* Dark Theme - Complete Styling */
:root {
    --primary-gradient: linear-gradient(135deg, #8b5cf6, #c4b5fd);
    --primary-color: #8b5cf6;
    --primary-light: #c4b5fd;
    --primary-dark: #7c3aed;
    --success-color: #10b981;
    --success-color-light: #34d399;
    --success-color-rgb: 16, 185, 129;
    --bg-gradient: linear-gradient(135deg, #0f0f0f 0%, #1a0b2e 50%, #0f0f0f 100%);
    --bg-light: #1a0b2e;
    --text-primary: #ffffff;
    --text-secondary: #c4b5fd;
    --text-tertiary: #a78bfa;
    --border-color: #7c3aed;
    --border-color-light: rgba(124, 58, 237, 0.3);
    --accent-color: rgba(139, 92, 246, 0.1);
    --box-shadow-color: rgba(124, 58, 237, 0.4);
    --hover-bg: rgba(124, 58, 237, 0.1);
    --shop-coin-color: #fef08a;
}

body {
    background: var(--bg-gradient);
}

h1, h2, h3 {
    color: var(--text-secondary);
}

p {
    color: var(--text-secondary);
}

/* Borders and shadows */
input, select, textarea {
    border-color: var(--border-color-light) !important;
    background: var(--accent-color) !important;
    color: var(--text-primary) !important;
}

input::placeholder, select::placeholder, textarea::placeholder {
    color: var(--text-tertiary) !important;
}

/* Modal and cards */
.modal-content {
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-light) 100%) !important;
    border-color: var(--primary-color) !important;
}

.auth-form {
    border-color: var(--border-color-light) !important;
}

.form-group label {
    color: var(--text-secondary) !important;
}

.form-group input, .form-group select, .form-group textarea {
    border-color: var(--border-color-light) !important;
    background: var(--accent-color) !important;
    color: var(--text-primary) !important;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
}

/* Profile and cards */
.profile-card {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%) !important;
    border: 1px solid var(--border-color-light) !important;
    border-color: var(--border-color-light) !important;
}

.profile-card:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 8px 16px rgba(124, 58, 237, 0.2) !important;
}

.profile-header {
    border-bottom-color: var(--border-color-light) !important;
}

.profile-info h3 {
    color: var(--text-secondary) !important;
}

.profile-info p {
    color: var(--text-tertiary) !important;
}

.profile-stats-mini {
    display: grid !important;
}

.mini-stat {
    background: var(--accent-color) !important;
    border: 1px solid var(--border-color-light) !important;
}

.mini-stat .label {
    color: var(--text-tertiary) !important;
}

.mini-stat .value {
    color: var(--text-secondary) !important;
}

.library-info {
    border-color: var(--border-color-light) !important;
    background: var(--accent-color) !important;
}

.library-info p {
    color: var(--text-secondary) !important;
}

.library-info small {
    color: var(--text-tertiary) !important;
}

/* Buttons and interactive */
.btn {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), var(--primary-color)) !important;
    color: var(--text-primary) !important;
    border-color: var(--primary-color) !important;
}

.btn:hover {
    box-shadow: 0 8px 25px var(--box-shadow-color) !important;
}

.start-btn {
    background: var(--primary-gradient) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.start-btn:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
}

.secondary-btn {
    background: transparent !important;
    border-color: var(--primary-color) !important;
    color: var(--text-secondary) !important;
}

.secondary-btn:hover {
    background: var(--hover-bg) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Answer buttons */
.answer-btn {
    border-color: var(--border-color-light) !important;
    background: var(--accent-color) !important;
    color: var(--text-secondary) !important;
}

.answer-btn:hover {
    background: var(--hover-bg) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 8px 25px var(--box-shadow-color) !important;
}

.answer-btn.active {
    background: var(--hover-bg) !important;
    border-color: var(--primary-color) !important;
}

/* Stats */
.stats {
    background: var(--accent-color) !important;
    border-color: var(--border-color-light) !important;
}

/* Filter buttons */
.filter-btn {
    background: var(--accent-color) !important;
    border-color: var(--border-color-light) !important;
    color: var(--text-secondary) !important;
}

.filter-btn.active {
    background: var(--primary-gradient) !important;
    border-color: var(--primary-light) !important;
    color: white !important;
}

.filter-btn:hover {
    background: var(--hover-bg) !important;
}

/* Mode cards */
.mode-card {
    background: var(--accent-color) !important;
    border-color: var(--border-color-light) !important;
}

.mode-card:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

/* Volume slider */
.volume-track {
    background: linear-gradient(to right, 
        rgba(139, 92, 246, 0.2) 0%,
        rgba(139, 92, 246, 0.4) 50%,
        rgba(139, 92, 246, 0.6) 100%) !important;
}

.volume-track-fill {
    background: var(--primary-gradient) !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3) !important;
}

.volume-slider::-webkit-slider-thumb {
    background: linear-gradient(135deg, #ffffff, var(--text-secondary)) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4), 0 3px 8px rgba(0, 0, 0, 0.3) !important;
}

.volume-slider::-moz-range-thumb {
    background: linear-gradient(135deg, #ffffff, var(--text-secondary)) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4), 0 3px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Theme cards */
.theme-card {
    border-color: var(--border-color-light) !important;
    background: var(--accent-color) !important;
}

.theme-card:hover {
    border-color: var(--primary-color) !important;
    background: var(--hover-bg) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

.theme-card span {
    color: var(--text-secondary) !important;
}

/* Modal styling */
.modal-header {
    border-bottom-color: var(--border-color-light) !important;
}

.modal-header h2 {
    color: var(--text-secondary) !important;
}

.modal-close {
    color: var(--text-secondary) !important;
}

.modal-close:hover {
    color: var(--text-primary) !important;
}

/* Achievement items */
.achievement {
    background: var(--accent-color) !important;
    border-color: var(--border-color-light) !important;
}

.achievement:hover {
    background: var(--hover-bg) !important;
    border-color: var(--primary-color) !important;
}

/* Stat cards in profile */
.stat-card {
    background: var(--accent-color) !important;
    border: 1px solid var(--border-color-light) !important;
}

.stat-card h3 {
    color: var(--text-secondary) !important;
}

.stat-value {
    color: var(--text-secondary) !important;
}

/* Profile header and avatar */
.user-info h3 {
    color: var(--text-secondary) !important;
}

.user-info p {
    color: var(--text-tertiary) !important;
}

.user-avatar-large {
    background: var(--primary-gradient) !important;
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.4) !important;
}

.user-avatar-image {
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.4) !important;
}

.avatar-upload-btn {
    background: var(--primary-gradient) !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4) !important;
}

/* Library items */
.library-item {
    background: rgba(124, 58, 237, 0.08) !important;
    border: 1px solid var(--border-color-light) !important;
}

.library-item:hover {
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.3) !important;
    border-color: var(--primary-color) !important;
}

.library-poster {
    border: 1px solid var(--border-color-light) !important;
}

.library-info h4 {
    color: var(--text-secondary) !important;
}

.library-info p {
    color: var(--text-tertiary) !important;
}

.library-info {
    background: transparent !important;
}

/* Library scrollbar */
.anime-library::-webkit-scrollbar-track {
    background: rgba(124, 58, 237, 0.1) !important;
}

.anime-library::-webkit-scrollbar-thumb {
    background: var(--primary-gradient) !important;
}

.anime-library::-webkit-scrollbar-thumb:hover {
    background: var(--primary-gradient) !important;
}

/* Scrollbar */
.achievements-modal-grid::-webkit-scrollbar-track {
    background: var(--accent-color) !important;
}

.achievements-modal-grid::-webkit-scrollbar-thumb {
    background: var(--primary-color) !important;
}

.achievements-modal-grid::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color) !important;
}

/* Search box */
.search-box input {
    border-color: var(--border-color-light) !important;
    background: var(--accent-color) !important;
    color: var(--text-primary) !important;
}

.search-box input::placeholder {
    color: var(--text-tertiary) !important;
}

.search-box input:focus {
    border-color: var(--primary-color) !important;
}

/* Leaderboard */
.leaderboard-item {
    background: var(--accent-color) !important;
    border: 1px solid var(--border-color-light) !important;
}

.leaderboard-item:hover {
    background: var(--hover-bg) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 5px 15px rgba(124, 58, 237, 0.3) !important;
}

.leaderboard-rank {
    background: var(--primary-gradient) !important;
}

.leaderboard-username {
    color: var(--text-secondary) !important;
}

.leaderboard-info {
    color: var(--text-tertiary) !important;
}

.leaderboard-stat {
    color: var(--text-secondary) !important;
}

.leaderboard-label {
    color: var(--text-tertiary) !important;
}

/* Volume slider track background */
.volume-track {
    background: linear-gradient(to right, 
        rgba(139, 92, 246, 0.2) 0%,
        rgba(139, 92, 246, 0.4) 50%,
        rgba(139, 92, 246, 0.6) 100%) !important;
}

/* Volume value display box */
.volume-value-display {
    color: var(--text-secondary) !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(195, 181, 253, 0.2)) !important;
    border: 1px solid rgba(139, 92, 246, 0.5) !important;
}

/* Volume slider container background */
.volume-slider-container {
    background: rgba(26, 11, 46, 0.98) !important;
    border: 2px solid rgba(139, 92, 246, 0.6) !important;
}

/* Game header */
.game-header {
    background: rgba(139, 92, 246, 0.1) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
}

/* Difficulty cards */
.difficulty-card {
    background: rgba(139, 92, 246, 0.1) !important;
    border: 2px solid rgba(139, 92, 246, 0.3) !important;
}

.difficulty-card:hover {
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3) !important;
    border-color: #8b5cf6 !important;
}

/* Answer buttons - keep distinct colors */
.answer-btn.correct {
    background: linear-gradient(135deg, #8b5cf6, #c4b5fd) !important;
    border-color: #8b5cf6 !important;
    color: #0f0f0f !important;
}

.answer-btn.incorrect {
    background: linear-gradient(135deg, #ef4444, #f87171) !important;
    border-color: #ef4444 !important;
}

/* Result stats display */
.result-stats {
    background: rgba(26, 11, 46, 0.98) !important;
    border: 2px solid rgba(139, 92, 246, 0.5) !important;
}

.result-stats .result-details {
    background: rgba(139, 92, 246, 0.2) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
}