/* style.css (Complete, Reorganized, and Responsive Version) */

/* --- 1. Font Import --- */
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&display=swap');

/* --- 2. Global & Body Styles --- */
body {
    font-family: 'Hind Siliguri', sans-serif;
    transition: background-color 0.4s ease, color 0.4s ease;
    margin: 0;
    padding: 20px;
}
body.homepage {
    position: relative;
    overflow-x: hidden;
}
body.homepage::before, body.homepage::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.4;
    transition: background-color 0.5s ease;
}
body.homepage::before {
    width: 400px;
    height: 400px;
    background: #a5b4fc;
    top: -100px;
    left: -150px;
}
body.homepage::after {
    width: 500px;
    height: 500px;
    background: #f9a8d4;
    bottom: -150px;
    right: -200px;
}
main {
    max-width: 900px;
    margin: 20px auto;
}
h1, h2, h3, p {
    transition: color 0.4s ease;
}

/* --- 3. Day & Dark Mode Theming --- */
body.day-mode { background: #f0f4f8; color: #334155; }
body.dark-mode { background: #111827; color: #d1d5db; }

body.day-mode h1, body.day-mode h2, body.day-mode h3 { color: #1e293b; }
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 { color: #f9fafb; }

body.day-mode .main-header p, body.day-mode footer { color: #64748b; }
body.dark-mode .main-header p, body.dark-mode footer { color: #9ca3af; }

body.dark-mode.homepage::before { background: #4f46e5; opacity: 0.3; }
body.dark-mode.homepage::after { background: #be185d; opacity: 0.3; }

/* --- 4. Component Styles: Header, Card, Nav Grid, Footer --- */

/* Header */
.main-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    justify-content: center;
    text-align: left;
    margin-bottom: 20px;
}
.main-header h1 {
    font-size: 2.8rem;
    font-weight: 700;
    margin: 0 0 5px 0;
}
.main-header p {
    font-size: 1.1rem;
}
.profile-pic {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    object-fit: cover;
}
body.dark-mode .profile-pic {
    border-color: #374151;
}

/* Nav Grid */
.nav-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
    max-width: 900px; 
    margin: 20px auto; 
}
.nav-button { 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    padding: 25px 15px; border-radius: 20px; text-decoration: none; color: white; text-align: center; 
    box-shadow: 0 8px 25px -5px rgba(0,0,0,0.1); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.nav-button:hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 12px 30px -5px rgba(0,0,0,0.2); }
.nav-button i { font-size: 2.5rem; margin-bottom: 15px; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.nav-button span { font-size: 1.1rem; font-weight: 600; }
.color-notes { background: linear-gradient(135deg, #2563eb, #60a5fa); }
.color-quiz { background: linear-gradient(135deg, #16a34a, #4ade80); }
.color-revision { background: linear-gradient(135deg, #f59e0b, #facc15); }
.color-games { background: linear-gradient(135deg, #c026d3, #f472b6); }

/* Card */
.card { 
    padding: 25px; 
    border-radius: 16px; 
    margin-bottom: 30px; 
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}
body.dark-mode .card {
    background: #1f2937;
    border-color: #374151;
}
.card h2 { 
    font-size: 1.75rem; 
    margin-top: 0; 
    border-bottom: 2px solid #e2e8f0; 
    padding-bottom: 15px; 
    margin-bottom: 20px; 
    display: flex; 
    align-items: center;
}
.icon-title { margin-right: 15px; color: #3b82f6; }
body.dark-mode .card h2 { border-bottom-color: #374151; }
body.dark-mode .icon-title { color: #60a5fa; }

/* Link Container (Pill Style) */
.link-container { display: flex; flex-wrap: wrap; gap: 15px; counter-reset: link-counter; }
.link-container a { 
    position: relative; flex-grow: 0; padding: 10px 20px 10px 50px; border-radius: 50px; 
    display: inline-flex; align-items: center; font-weight: 600; overflow: hidden; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); text-decoration: none; transition: all 0.2s ease; 
}
.link-container a:hover { transform: translateY(-3px) scale(1.02); }
.link-container a::before { 
    counter-increment: link-counter; content: counter(link-counter); 
    position: absolute; left: 0; top: 0; height: 100%; width: 38px; 
    display: flex; align-items: center; justify-content: center; font-weight: 700; 
}
body.day-mode .link-container a { background-color: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; }
body.day-mode .link-container a:hover { background-color: #e0e7ff; box-shadow: 0 4px 12px rgba(67, 56, 202, 0.15); }
body.day-mode .link-container a::before { background-color: #dbeafe; color: #1e40af; }
body.dark-mode .link-container a { background-color: #312e81; color: #e0e7ff; border: 1px solid #4f46e5; }
body.dark-mode .link-container a:hover { background-color: #4338ca; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2); }
body.dark-mode .link-container a::before { background-color: #4338ca; color: #c7d2fe; }

/* Footer & Social Links */
footer {
    text-align: center;
    padding: 20px;
    margin-top: 30px;
    border-top: 1px solid #ddd;
}
body.dark-mode footer { border-top: 1px solid #333; }
footer p { margin: 0; margin-bottom: 15px; font-size: 0.9em; }
.social-links { display: flex; justify-content: center; gap: 20px; }
.social-links a {
    color: #333; font-size: 1.5em; width: 45px; height: 45px; line-height: 45px;
    border-radius: 50%; background-color: #f0f0f0;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
body.dark-mode .social-links a { color: #f1f1f1; background-color: #333; }
.social-links a:hover { transform: translateY(-5px); }
.social-links a[href*="facebook"]:hover { background-color: #1877F2; color: white; }
.social-links a[href*="youtube"]:hover { background-color: #FF0000; color: white; }
.social-links a[href*="telegram"]:hover { background-color: #0088cc; color: white; }

/* --- 5. Page-Specific Styles: Quiz, Revision, Notepad --- */

/* Quiz Page */
.quiz-page-container { padding: 20px; }
.quiz-header { text-align: center; border-bottom: 2px solid #eee; padding-bottom: 15px; margin-bottom: 20px; }
.score-board { display: flex; justify-content: center; gap: 20px; font-size: 1.2rem; font-weight: bold; margin-top: 10px; }
#correct-count { color: #28a745; }
#wrong-count { color: #dc3545; }
#timer { color: #6c757d; }
.option-btn { 
    display: flex; align-items: center; width: 100%; padding: 15px; border-radius: 16px; border: 2px solid; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); transition: all 0.2s ease-in-out; 
    font-weight: 500; font-size: 16px; cursor: pointer; text-align: left; 
}
.option-btn:disabled { cursor: not-allowed; }
.option-btn .option-prefix { font-weight: 700; margin-right: 12px; }
body.day-mode .option-btn { background-color: #f8fafc; border-color: #e2e8f0; color: #334155; }
body.day-mode .option-btn:hover:not(:disabled) { border-color: #3b82f6; }
body.day-mode .option-btn .option-prefix { color: #3b82f6; }
body.dark-mode .option-btn { background-color: #374151; border-color: #4b5563; color: #f3f4f6; }
body.dark-mode .option-btn:hover:not(:disabled) { border-color: #60a5fa; }
body.dark-mode .option-btn .option-prefix { color: #60a5fa; }
.option-btn.correct { background: #10b981 !important; color: white !important; border-color: #059669 !important; animation: pulse 0.6s ease; }
.option-btn.incorrect { background: #ef4444 !important; color: white !important; border-color: #b91c1c !important; animation: shake 0.5s ease; }

/* Action Buttons (for Quiz and Notepad) */
.action-btn { 
    padding: 12px 24px; font-weight: 600; border-radius: 12px; border: none; color: white; cursor: pointer; 
    background: linear-gradient(135deg, #2563eb, #3b82f6); 
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2); 
    transition: all 0.2s ease; text-decoration: none; 
}
.action-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3); }
.action-btn.green { background: linear-gradient(135deg, #16a34a, #22c55e); box-shadow: 0 4px 15px rgba(22, 163, 74, 0.2); }
.action-btn.gray { background: linear-gradient(135deg, #64748b, #94a3b8); }

/* Review Card (Quiz) */
.review-card { border-radius: 16px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); padding: 20px; margin-bottom: 20px; border-left: 6px solid; }
.review-card.review-correct { border-color: #22c55e; background-color: #f0fdf4; }
.review-card.review-incorrect { border-color: #ef4444; background-color: #fef2f2; }
body.dark-mode .review-card.review-correct { background-color: #1f392c; }
body.dark-mode .review-card.review-incorrect { background-color: #451a1a; }

/* Notepad Section */
#notepad .notepad-container { display: flex; gap: 20px; margin-top: 20px; flex-wrap: wrap; }
#notepad .notepad-column { flex: 1; min-width: 250px; }
#notepad h3 { font-size: 1.1em; margin-bottom: 10px; }
#notepad textarea {
    width: 100%; height: 150px; padding: 10px; border-radius: 8px;
    border: 1px solid #ccc; font-family: 'Arial', sans-serif;
    font-size: 1em; resize: vertical;
}
body.day-mode #notepad textarea { background-color: #f9f9f9; color: #333; }
body.dark-mode #notepad textarea { background-color: #3a3a3a; color: #f1f1f1; border-color: #555; }
#notepad .notepad-buttons { margin-top: 15px; display: flex; gap: 10px; }
#notepad .btn { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; transition: background-color 0.3s; }
#notepad .btn-primary { background-color: #007bff; color: white; }
#notepad .btn-primary:hover { background-color: #0056b3; }
#notepad .btn-secondary { background-color: #6c757d; color: white; }
#notepad .btn-secondary:hover { background-color: #5a6268; }

/* --- 6. Utility Styles: Preloader, Back-to-Top --- */
#preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999; display: flex; justify-content: center; align-items: center;
}
body.day-mode #preloader { background-color: #f0f4f8; }
body.dark-mode #preloader { background-color: #111827; }

.loader {
    border: 8px solid #e0e0e0; border-top: 8px solid #3498db;
    border-radius: 50%; width: 60px; height: 60px;
    animation: spin 1s linear infinite;
}
body.dark-mode .loader { border-color: #4b5563; border-top-color: #60a5fa; }

#back-to-top {
    position: fixed; bottom: 20px; right: 20px;
    background-color: #007bff; color: white;
    width: 40px; height: 40px; border-radius: 50%;
    text-align: center; line-height: 40px;
    display: none; z-index: 1000; transition: opacity 0.3s;
    text-decoration: none;
}
#back-to-top:hover { background-color: #0056b3; }

/* --- 7. Animations --- */
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25%, 75% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }


/* --- 8. Media Queries for Responsive Design --- */

/* For Tablets and larger phones (screen width <= 768px) */
@media (max-width: 768px) {
    .main-header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    .main-header h1 {
        font-size: 2.2rem;
    }
    .nav-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .card {
        padding: 20px;
    }
    #notepad .notepad-container {
        flex-direction: column;
        gap: 25px;
    }
}

/* For smaller mobile devices (screen width <= 480px) */
@media (max-width: 480px) {
    body {
        padding: 10px;
    }
    .main-header h1 {
        font-size: 1.8rem;
    }
    .main-header p {
        font-size: 1rem;
    }
    .nav-button span {
        font-size: 0.9em;
    }
    .card h2 {
        font-size: 1.5rem;
    }
    #notepad .notepad-buttons {
        flex-direction: column;
    }
    #notepad .btn {
        width: 100%;
    }
    .quiz-page-container {
        padding: 10px;
    }
    .option-btn {
        padding: 12px;
        font-size: 15px;
    }
}
/* --- 9. Advanced Leaderboard Styles --- */

.leaderboard-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.leaderboard-item {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 15px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
body.dark-mode .leaderboard-item {
    background-color: #374151;
    border-color: #4b5563;
}

.leaderboard-item .main-score {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 600;
}

.leaderboard-item .details-list {
    list-style-type: '✅  ';
    padding-left: 20px;
    margin-top: 10px;
    border-top: 1px dashed #d1d5db;
    padding-top: 10px;
    font-size: 0.9em;
    color: #4b5563;
}
body.dark-mode .leaderboard-item .details-list {
    border-top-color: #4b5563;
    color: #d1d5db;
}

.leaderboard-item .details-list li {
    padding: 3px 0;
}
/* ========================================= */
/*      New Page Navigation Design with Better Hover Effects      */
/* ========================================= */

/* নেভিগেশন কন্টেইনার */
.page-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* বাটনগুলোর মধ্যে ফাঁকা জায়গা */
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

body.dark-mode .page-navigation {
    border-top-color: #374151;
}

/* সব বাটনের জন্য সাধারণ স্টাইল */
.page-navigation .btn {
    display: inline-flex; /* আইকন ও টেক্সটকে পাশাপাশি রাখার জন্য */
    align-items: center;
    gap: 8px; /* আইকন ও টেক্সটের মধ্যে ফাঁকা জায়গা */
    text-decoration: none;
    padding: 10px 22px; /* কম্প্যাক্ট সাইজ */
    border-radius: 12px; /* হালকা গোলাকার */
    font-weight: 600;
    font-size: 16px;
    border: none;
    position: relative; /* শ্যাডোর জন্য */
    overflow: hidden; /* ভেতরের ইফেক্টের জন্য */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-navigation .btn i {
    transition: transform 0.3s ease;
}

/* হোভার করলে আইকনের অ্যানিমেশন */
.page-navigation .btn:hover:not(.disabled) i.fa-arrow-left {
    transform: translateX(-4px);
}
.page-navigation .btn:hover:not(.disabled) i.fa-arrow-right {
    transform: translateX(4px);
}
.page-navigation .btn:hover:not(.disabled) i.fa-home {
    transform: scale(1.2) rotate(-10deg);
}


/* হোম বাটন (Primary) */
.page-navigation .btn-primary {
    background: #3b82f6;
    color: white;
}
.page-navigation .btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4);
}
body.dark-mode .page-navigation .btn-primary {
    background: #60a5fa;
    color: #111827;
}
body.dark-mode .page-navigation .btn-primary:hover {
    box-shadow: 0 10px 25px -5px rgba(96, 165, 250, 0.3);
}


/* পূর্ববর্তী/পরবর্তী বাটন (Secondary) */
.page-navigation .btn-secondary {
    background: #fff;
    color: #475569;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.page-navigation .btn-secondary:hover:not(.disabled) {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
body.dark-mode .page-navigation .btn-secondary {
    background: #374151;
    color: #cbd5e1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
}
body.dark-mode .page-navigation .btn-secondary:hover:not(.disabled) {
    background-color: #4b5563;
}


/* নিষ্ক্রিয় বাটন (Disabled) */
.page-navigation .btn.disabled {
    background-color: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.7;
}
body.dark-mode .page-navigation .btn.disabled {
    background-color: #4b5563;
    color: #6b7280;
}

/* "হোমপেজে ফিরে যান" লিঙ্কের জন্য কোনো পরিবর্তন নেই, এটি আগের মতোই থাকবে */
.back-to-home {
    display: block;
    text-align: center;
    margin-top: 25px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    color: #64748b;
    transition: color 0.2s;
}
.back-to-home:hover {
    color: #3b82f6;
    text-decoration: underline;
}
body.dark-mode .back-to-home {
    color: #9ca3af;
}
body.dark-mode .back-to-home:hover {
    color: #60a5fa;
}
/* রিভিউ কার্ডের স্টাইল */
.review-card {
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin-bottom: 1rem;
}

.review-correct {
    background-color: #e8f5e9; /* হালকা সবুজ */
    border-left: 5px solid #4caf50; /* গাঢ় সবুজ বর্ডার */
}

.review-incorrect {
    background-color: #ffebee; /* হালকা লাল */
    border-left: 5px solid #f44336; /* গাঢ় লাল বর্ডার */
}

/* লিডারবোর্ড স্টাইল */
.leaderboard-list {
    list-style: none;
    padding: 0;
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
}

.leaderboard-item {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    transition: transform 0.2s;
}

.leaderboard-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.leaderboard-item .main-score {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 500;
}

.leaderboard-item .details-list {
    list-style-type: disc;
    padding-left: 20px;
    margin-top: 8px;
    font-size: 0.9rem;
    color: #555;
}

/* সাধারণ বাটন স্টাইল */
.action-btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  color: white;
  background-color: #3b82f6; /* নীল */
}

.action-btn:hover {
    filter: brightness(1.1);
}

.action-btn:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
}

.action-btn.green {
    background-color: #22c55e; /* সবুজ */
}

.action-btn.gray {
    background-color: #6b7280; /* ধূসর */
}
/* --- Quiz Page Theme Updates --- */

/* Quiz Container */
body.day-mode .quiz-page-container {
    background-color: #f0f4f8;
    color: #334155;
}
body.dark-mode .quiz-page-container {
    background-color: #111827;
    color: #d1d5db;
}

/* Quiz Header */
body.day-mode .quiz-header {
    border-bottom-color: #e2e8f0;
}
body.dark-mode .quiz-header {
    border-bottom-color: #374151;
}

/* Score Board */
body.dark-mode #correct-count {
    color: #34d399;
}
body.dark-mode #wrong-count {
    color: #f87171;
}
body.dark-mode #timer {
    color: #9ca3af;
}

/* Question Container */
body.day-mode .question-container {
    background-color: #ffffff;
    color: #1e293b;
}
body.dark-mode .question-container {
    background-color: #1f2937;
    color: #f3f4f6;
}

/* Options Container */
body.day-mode .options-container {
    background-color: #ffffff;
}
body.dark-mode .options-container {
    background-color: #1f2937;
}

/* Review Section */
body.day-mode #review-section {
    background-color: #f8fafc;
}
body.dark-mode #review-section {
    background-color: #1f2937;
}

/* Review Cards - Dark Mode */
body.dark-mode .review-card {
    border-color: #374151;
}
body.dark-mode .review-correct {
    background-color: #064e3b;
    border-left-color: #10b981;
}
body.dark-mode .review-incorrect {
    background-color: #7f1d1d;
    border-left-color: #ef4444;
}

/* Leaderboard - Dark Mode */
body.dark-mode .leaderboard-item {
    background-color: #374151;
    border-color: #4b5563;
}
body.dark-mode .leaderboard-item:hover {
    background-color: #4b5563;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
body.dark-mode .leaderboard-item .details-list {
    color: #d1d5db;
}

/* Quiz Navigation Buttons */
body.dark-mode .quiz-navigation .action-btn {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
body.dark-mode .quiz-navigation .action-btn:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Result Section */
body.day-mode .result-section {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
}
body.dark-mode .result-section {
    background-color: #1f2937;
    border: 1px solid #374151;
}

/* Progress Bar (if any) */
body.day-mode .progress-bar {
    background-color: #e2e8f0;
}
body.dark-mode .progress-bar {
    background-color: #374151;
}
body.day-mode .progress-bar-fill {
    background-color: #3b82f6;
}
body.dark-mode .progress-bar-fill {
    background-color: #60a5fa;
}
/* style.css ফাইলে যোগ করার জন্য নতুন স্টাইল */

/* Dark Mode Toggle Button */
.dark-mode-button {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

.dark-mode-button:hover {
    background-color: var(--accent-color-light);
}

.dark-mode .dark-mode-button {
    background-color: #2d3748;
    border-color: #4a5568;
}

/* Search Container */
.search-container {
    max-width: 800px;
    margin: 20px auto;
    position: relative;
}

.search-container i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

#search-bar {
    width: 100%;
    padding: 12px 12px 12px 45px;
    font-size: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--card-bg);
    color: var(--text-color);
    transition: border-color 0.3s, box-shadow 0.3s;
}

#search-bar:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-color-light);
}

/* Leaderboard Section */
.nav-button.color-leaderboard {
    background-color: #8e44ad; /* Purple */
}

.leaderboard-container {
    margin-top: 1.5rem;
    overflow-x: auto; /* For small screens */
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

th, td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
}

thead {
    background-color: var(--accent-color-light);
}

.dark-mode thead {
     background-color: #2d3748;
}

tbody tr:hover {
    background-color: var(--accent-color-light);
}

.dark-mode tbody tr:hover {
     background-color: #374151;
}

th {
    font-weight: 600;
}
/* --- New Feature Styles for index.html --- */

/* Dark Mode Button in Header */
.dark-mode-button {
    position: absolute;
    top: 20px; right: 20px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    width: 45px; height: 45px;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; font-size: 1.2rem;
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
}
.dark-mode-button:hover {
    transform: scale(1.1) rotate(15deg);
}

/* Search Container */
.search-container { max-width: 800px; margin: 20px auto; position: relative; }
.search-container i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #9ca3af; }
#search-bar {
    width: 100%; padding: 12px 12px 12px 45px; font-size: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px; background-color: var(--card-bg);
    color: var(--text-color);
    transition: border-color 0.3s, box-shadow 0.3s;
}
#search-bar:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-color-light); }

/* New Nav Button Colors */
.nav-button.color-dashboard { background-color: #3498db; } /* Blue */
.nav-button.color-formulas { background-color: #f39c12; } /* Orange */
.nav-button.color-leaderboard { background-color: #8e44ad; } /* Purple */

/* Dashboard Section */
#dashboard h2 { margin-bottom: 2rem; }
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}
.dashboard-item { text-align: center; padding: 1.5rem; background-color: var(--accent-color-light); border-radius: 12px; }
.dark-mode .dashboard-item { background-color: #2c2c2c; }
.dashboard-item h3 { margin-top: 0; font-size: 1.2rem; color: var(--heading-color-3); }

/* Progress Bar */
.progress-bar-container { width: 100%; background-color: #e0e0e0; border-radius: 30px; margin: 1rem 0; }
.dark-mode .progress-bar-container { background-color: #444; }
.progress-bar {
    height: 20px; width: 0%;
    background-color: var(--accent-color);
    border-radius: 30px;
    transition: width 1s ease-in-out;
}
#chapter-progress-text { font-weight: 600; }

/* Daily Challenge */
.challenge-box { background-color: #fff; border: 2px dashed var(--accent-color); padding: 1rem; border-radius: 8px; margin-top: 1rem; }
.dark-mode .challenge-box { background-color: #333; }
#challenge-text { font-size: 1.1rem; font-weight: 500; }

/* Achievements */
.achievements-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-top: 1rem; }
.achievement-badge { 
    display: flex; flex-direction: column; align-items: center; 
    width: 80px; text-align: center; 
    opacity: 0.4; filter: grayscale(100%); transition: all 0.4s;
}
.achievement-badge.unlocked { opacity: 1; filter: grayscale(0%); }
.achievement-badge i { font-size: 2.5rem; color: #f1c40f; }
.achievement-badge span { font-size: 0.8rem; font-weight: 600; margin-top: 5px; }

/* Leaderboard Table */
.leaderboard-container { margin-top: 1.5rem; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: 12px 15px; border-bottom: 1px solid var(--border-color); }
thead { background-color: var(--accent-color-light); }
.dark-mode thead { background-color: #2d3748; }
td i { margin-right: 8px; }

/* FAQ Section */
.faq-container { margin-top: 1.5rem; }
.faq-item { border-bottom: 1px solid var(--border-color); }
.faq-question {
    width: 100%; background: none; border: none; text-align: left;
    padding: 1rem; font-size: 1.1rem; font-weight: 600;
    cursor: pointer; display: flex; justify-content: space-between; align-items: center;
    color: var(--heading-color-3);
}
.faq-question i { transition: transform 0.3s; }
.faq-item.active .faq-question i { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.faq-answer p { padding: 0 1rem 1rem; }

/* Video & Timer Section */
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-top: 1.5rem; border-radius: 8px; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.timer-display { font-size: 4rem; font-weight: bold; text-align: center; margin: 1.5rem 0; font-family: 'Courier New', Courier, monospace; }
.timer-controls { display: flex; justify-content: center; gap: 1rem; }

/* Feedback Form Section */
#feedback-form form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
#feedback-form input, #feedback-form textarea {
    padding: 10px; font-size: 1rem; border-radius: 5px;
    border: 1px solid var(--border-color);
    background-color: var(--card-bg); color: var(--text-color);
}

/* Formula Sheet Modal */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.7); z-index: 1001;
    display: none; justify-content: center; align-items: center;
}
.modal-content {
    background-color: var(--card-bg); padding: 2rem;
    border-radius: 12px; width: 90%; max-width: 500px;
    position: relative; box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}
.modal-close-btn {
    position: absolute; top: 10px; right: 20px;
    background: none; border: none; font-size: 2rem;
    cursor: pointer; color: var(--text-color);
}
.modal-content h2 { margin-top: 0; color: var(--heading-color-1); }
.modal-content ul { list-style: none; padding: 0; }
.modal-content li { padding: 8px 0; border-bottom: 1px dashed var(--border-color); }
.modal-content li:last-child { border-bottom: none; }
/* Add this to your quiz_style.css */
.review-card.review-skipped {
    border-left-color: #f59e0b; /* A yellow-orange color for skipped questions */
    background-color: rgba(245, 158, 11, 0.05);
}

.dark-mode .review-card.review-skipped {
    background-color: rgba(245, 158, 11, 0.1);
}