/* ── Spinner ─────────────────────────────────────────────── */
.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(99, 102, 241, 0.2);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Topic Cards ─────────────────────────────────────────── */
.topic-card {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1rem;
    padding: 1.5rem;
    animation: fadeInUp 0.4s ease both;
    transition: transform 0.2s, box-shadow 0.2s;
}

.topic-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.15);
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.topic-card:nth-child(1) { animation-delay: 0.0s; }
.topic-card:nth-child(2) { animation-delay: 0.1s; }
.topic-card:nth-child(3) { animation-delay: 0.2s; }
.topic-card:nth-child(4) { animation-delay: 0.3s; }
.topic-card:nth-child(5) { animation-delay: 0.4s; }

/* ── Difficulty badges ──────────────────────────────────── */
.badge-easy   { background: rgba(16,185,129,0.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.3); }
.badge-medium { background: rgba(245,158,11,0.15); color: #fcd34d; border: 1px solid rgba(245,158,11,0.3); }
.badge-hard   { background: rgba(239,68,68,0.15);  color: #fca5a5; border: 1px solid rgba(239,68,68,0.3); }

/* ── Favorite star ───────────────────────────────────────── */
.star-btn { transition: color 0.15s, transform 0.15s; }
.star-btn:hover { transform: scale(1.25); }
.star-btn.active { color: #fbbf24; }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.7); }

/* ── Select & Input color fix ────────────────────────────── */
select option { background: #1e1b4b; color: white; }
input[type="range"] { accent-color: #6366f1; }