/* ────────────────────────────────────────────
 Classroom By Muksifur Site Stylesheet
 Design system is primarily in base.html.
 This file covers page-specific overrides,
 flashcard components, and legacy practice pages.
 ──────────────────────────────────────────── */

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.dark ::-webkit-scrollbar-thumb { background: #334155; }
.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ── Loading spinner ── */
.spinner {
 display: inline-block; width: 18px; height: 18px;
 border: 2px solid currentColor; border-top-color: transparent;
 border-radius: 9999px; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Flashcard (IELTS / SAT vocabulary) ── */
.flashcard-wrapper {
 perspective: 1200px;
 cursor: pointer;
 user-select: none;
}
.flashcard-inner {
 position: relative; width: 100%; min-height: 260px;
 transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
 transform-style: preserve-3d;
}
.flashcard-wrapper.flipped .flashcard-inner { transform: rotateY(180deg); }
.flashcard-front,
.flashcard-back {
 position: absolute; inset: 0;
 backface-visibility: hidden; -webkit-backface-visibility: hidden;
 border-radius: 1.25rem; padding: 2.5rem;
 display: flex; flex-direction: column; align-items: center; justify-content: center;
 text-align: center;
}
.flashcard-front {
 background: linear-gradient(135deg, #4f46e5, #7c3aed);
 color: white;
}
.flashcard-back {
 background: linear-gradient(135deg, #0d9488, #059669);
 color: white;
 transform: rotateY(180deg);
}
.flashcard-word { font-size: 2.5rem; font-weight: 800; line-height: 1.15; }
.flashcard-hint { font-size: 0.875rem; opacity: 0.75; margin-top: 0.75rem; }
.flashcard-definition { font-size: 1.125rem; font-weight: 500; line-height: 1.6; }
.flashcard-example { font-size: 0.875rem; opacity: 0.8; margin-top: 0.75rem; font-style: italic; }

/* ── Quiz / Practice answer buttons ── */
.answer-btn {
 width: 100%; text-align: left; padding: 0.875rem 1.25rem;
 border-radius: 0.75rem; border: 1.5px solid #e2e8f0;
 background: white; color: #0f172a;
 font-size: 0.9375rem; font-weight: 500;
 transition: background 130ms, border-color 130ms, transform 80ms;
 cursor: pointer;
}
.dark .answer-btn { background: rgb(17 27 50); color: #f1f5f9; border-color: rgb(42 58 88); }
.answer-btn:hover { border-color: #4f46e5; background: #eef2ff; }
.dark .answer-btn:hover { background: rgb(79 70 229 / 0.1); border-color: #818cf8; }
.answer-btn:active { transform: scale(0.99); }
.answer-btn.correct { background: #d1fae5; border-color: #10b981; color: #065f46; }
.dark .answer-btn.correct { background: rgb(16 185 129 / 0.15); border-color: #10b981; color: #6ee7b7; }
.answer-btn.wrong { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
.dark .answer-btn.wrong { background: rgb(239 68 68 / 0.15); border-color: #ef4444; color: #fca5a5; }
.answer-btn:disabled { cursor: default; }

/* ── Progress bar ── */
.progress-track {
 height: 5px; border-radius: 9999px; background: #e2e8f0; overflow: hidden;
}
.dark .progress-track { background: rgb(42 58 88); }
.progress-fill {
 height: 100%; border-radius: 9999px;
 background: linear-gradient(90deg, #4f46e5, #7c3aed);
 transition: width 0.3s ease;
}

/* ── Leaderboard ── */
.leaderboard-row { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; }
.leaderboard-rank { font-weight: 800; font-size: 1.125rem; width: 2rem; text-align: center; color: #94a3b8; }
.leaderboard-rank.top-1 { color: #f59e0b; }
.leaderboard-rank.top-2 { color: #94a3b8; }
.leaderboard-rank.top-3 { color: #b45309; }

/* ── IELTS TTS audio player ── */
.tts-btn {
 display: inline-flex; align-items: center; gap: 0.5rem;
 padding: 0.5rem 1rem; border-radius: 0.625rem;
 border: 1px solid #c7d2fe; background: #eef2ff;
 color: #4338ca; font-size: 0.8125rem; font-weight: 600;
 cursor: pointer; transition: background 130ms;
}
.tts-btn:hover { background: #e0e7ff; }
.dark .tts-btn { background: rgb(79 70 229 / 0.12); border-color: rgb(79 70 229 / 0.25); color: #a5b4fc; }
.dark .tts-btn:hover { background: rgb(79 70 229 / 0.2); }

/* ── Word level badges (IELTS/SAT) ── */
.level-A1 { background: #dcfce7; color: #166534; }
.level-A2 { background: #d1fae5; color: #065f46; }
.level-B1 { background: #dbeafe; color: #1e40af; }
.level-B2 { background: #ede9fe; color: #5b21b6; }
.level-C1 { background: #fef3c7; color: #92400e; }
.level-C2 { background: #fee2e2; color: #991b1b; }
.dark .level-B1 { background: rgb(37 99 235/0.15); color: #93c5fd; }
.dark .level-B2 { background: rgb(124 58 237/0.15); color: #c4b5fd; }
.dark .level-C1 { background: rgb(245 158 11/0.15); color: #fcd34d; }
.dark .level-C2 { background: rgb(239 68 68/0.15); color: #fca5a5; }