/* Base dark theme styles */
body { font-family: 'Inter', sans-serif; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1f2937; }
::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #6b7280; }

/* Neon text */
.neon-cyan-text { color: #22d3ee; }
.neon-green-text { color: #34d399; }
.neon-yellow-text { color: #facc15; }
.neon-red-text { color: #ef4444; } /* NEW: For missing stats */

/* Custom dashboard card class */
.dash-card {
    background-color: #1f2937; /* gray-800 */
    border-radius: 0.75rem; /* rounded-xl */
    padding: 1.5rem; /* p-6 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    border: 1px solid #374151; /* gray-700 */
}

/* --- Slider Styles --- */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Scrolls 50% (the width of one set of images) */
}
.slider {
    width: 100%;
    overflow: hidden;
    padding: 1rem 0;
    background-color: #111827; /* gray-900, slightly darker */
    border-top: 1px solid #374151;
    border-bottom: 1px solid #374151;
    /* Fades at the edges */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.slider-track {
    display: flex;
    width: fit-content;
    /* Animation will be set by JS */
    animation: scroll 100s linear infinite; 
    will-change: transform;
}
.slider-card {
    flex-shrink: 0;
    width: 120px; /* Fixed width for cards */
    margin: 0 0.75rem; /* 12px */
    transition: transform 0.2s;
}
.slider-card:hover {
    transform: scale(1.1);
    z-index: 10;
}
.slider-card img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 2px solid #374151;
}

/* --- Top Sets List Styles --- */
#top-sets-list li {
    font-size: 1rem; /* 16px */
    font-weight: 500; /* medium */
    padding: 0.5rem 0.75rem; /* p-2 pr-3 */
    border-radius: 0.375rem; /* rounded-md */
    background-color: #374151; /* gray-700 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* Style the number (1., 2., etc.) from the <ol> */
#top-sets-list li::marker {
    color: #facc15; /* neon-yellow-text */
    font-weight: 700;
    font-size: 1.125rem; /* text-lg */
}
/* Style the count span we add via JS */
#top-sets-list li .set-count {
    color: #22d3ee; /* neon-cyan-text */
    font-weight: 700;
    font-size: 0.9rem;
    background-color: #1f2937; /* gray-800 */
    padding: 0.125rem 0.5rem;
    border-radius: 99px; /* rounded-full */
}