:root {
    --brand: #6366f1;
    --brand-light: #e0e7ff;
    --dark: #0f172a;
    --white: #ffffff;
    --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

body {
    background: #f8fafc;
    margin: 0;
    font-family: 'Hind Siliguri', sans-serif;
    color: var(--dark);
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

.mesh-gradient {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.15) 0, transparent 50%), 
                radial-gradient(at 100% 100%, rgba(236, 72, 153, 0.1) 0, transparent 50%);
    z-index: -1;
}

.app-container { width: 100%; max-width: 480px; padding: 20px; }

/* Screens */
.screen { display: none; animation: fadeIn 0.4s ease forwards; }
.screen.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Hero Section */
.hero-section { text-align: center; margin-bottom: 40px; padding-top: 20px; }
.profile-badge { background: var(--brand-light); color: var(--brand); padding: 5px 15px; border-radius: 20px; font-size: 12px; font-weight: 700; display: inline-block; margin-bottom: 15px; }
.hero-section h1 { font-size: 32px; margin: 0; color: var(--dark); }

/* Subject Cards */
.subject-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.sub-card { background: var(--white); padding: 25px; border-radius: 24px; text-align: center; box-shadow: var(--shadow); cursor: pointer; transition: 0.3s; border: 1px solid transparent; }
.sub-card:hover { transform: translateY(-5px); border-color: var(--brand); }
.sub-card span { font-size: 35px; display: block; margin-bottom: 10px; }

/* Navigation */
.header-nav { display: flex; align-items: center; gap: 15px; margin-bottom: 30px; }
.back-circle { width: 45px; height: 45px; border-radius: 50%; border: none; background: var(--white); box-shadow: var(--shadow); cursor: pointer; font-size: 20px; }

/* Mode Cards */
.mode-container { display: flex; flex-direction: column; gap: 15px; }
.mode-card { background: var(--white); padding: 25px; border-radius: 20px; box-shadow: var(--shadow); cursor: pointer; border: 2px solid transparent; }
.mode-card:hover { border-color: var(--brand); }
.mode-card h3 { margin: 0 0 5px 0; color: var(--brand); }
.mode-card p { margin: 0; font-size: 14px; color: #64748b; }

/* Exam Layout */
.exam-top-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.exit-btn { background: none; border: none; font-size: 24px; color: #94a3b8; cursor: pointer; }
.progress-info { text-align: right; }
.score-pill { background: var(--brand); color: white; padding: 4px 12px; border-radius: 12px; font-size: 14px; margin-top: 5px; }

.main-card { background: var(--white); padding: 30px; border-radius: 32px; box-shadow: var(--shadow); }
.question-style { font-size: 20px; font-weight: 700; line-height: 1.4; margin-bottom: 25px; }

.option-btn { background: #f1f5f9; border: 2px solid transparent; padding: 16px; border-radius: 16px; width: 100%; text-align: left; margin-bottom: 12px; cursor: pointer; font-weight: 600; transition: 0.2s; }
.option-btn:hover { background: var(--brand-light); border-color: var(--brand); }

.bottom-controls { display: flex; gap: 15px; margin-top: 20px; }
.voice-fab { width: 60px; height: 60px; border-radius: 18px; border: none; font-size: 24px; cursor: pointer; transition: 0.3s; }
.voice-fab.off { background: #f1f5f9; color: #64748b; }
.voice-fab.on { background: #ef4444; color: white; box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); }

.main-action-btn { flex: 1; background: var(--brand); color: white; border: none; border-radius: 18px; font-weight: 700; font-size: 16px; cursor: pointer; }

.feedback-toast { margin-top: 20px; padding: 15px; border-radius: 15px; display: none; font-weight: 600; }
.correct-style { display: block; background: #dcfce7; color: #15803d; }
.wrong-style { display: block; background: #fee2e2; color: #b91c1c; }

.next-action-btn { width: 100%; margin-top: 15px; padding: 18px; background: var(--dark); color: white; border: none; border-radius: 18px; font-weight: 700; cursor: pointer; }





/* --- Corrected Dark Mode Section --- */

/* Dark Mode Variables */
[data-theme="dark"] {
    --brand: #0ea5e9; /* Sky Blue */
    --brand-light: #1e293b;
    --dark: #ffffff;
    --white: #1e1b4b; /* Deep Indigo/Black */
    --bg: #0f172a;
    /* পিঙ্ক সরিয়ে স্কাই ব্লু গ্লো দেওয়া হলো */
    --glow-sky: 0 0 10px #0ea5e9, 0 0 20px #38bdf8; 
    --glow-yellow: 0 0 10px #fbbf24, 0 0 20px #fbbf24;
}

body { transition: background 0.3s, color 0.3s; background: var(--bg, #f8fafc); }

/* Theme Toggle Button */
#theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    padding: 10px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: var(--white);
    box-shadow: var(--shadow);
}

/* Neon Glow Effects for Dark Mode */
[data-theme="dark"] h1, [data-theme="dark"] h2 {
    color: #fbbf24; /* Yellow text */
    text-shadow: var(--glow-yellow);
}

[data-theme="dark"] .sub-card b {
    color: #0ea5e9; /* Sky Blue Text */
    text-shadow: var(--glow-sky);
}

[data-theme="dark"] .sub-card:hover {
    box-shadow: 0 0 15px #0ea5e9;
    border-color: #0ea5e9; /* Hover border now Sky Blue */
}

[data-theme="dark"] .option-btn:hover {
    background: #0ea5e9;
    color: white;
    box-shadow: 0 0 15px #0ea5e9;
}

/* Mobile Responsive Fixes */
@media (max-width: 400px) {
    .subject-grid { grid-template-columns: 1fr; } 
    .hero-section h1 { font-size: 24px; }
    .main-card { padding: 15px; }
    .bottom-controls { flex-direction: column; }
    .voice-fab { width: 100%; border-radius: 12px; }
}

/* Dark Mode specific fixes for buttons */
[data-theme="dark"] .back-circle, 
[data-theme="dark"] .exit-btn {
    background: #1e1b4b; /* Deep background */
    color: #ffffff;      /* White arrow/icon */
    border: 1px solid #0ea5e9; /* Sky Blue Border */
    box-shadow: var(--glow-sky); /* Sky Glow */
}

[data-theme="dark"] .back-circle:hover {
    background: #0ea5e9;
    color: #ffffff;
    box-shadow: 0 0 20px #0ea5e9;
}

/* নিশ্চিত করতে যে হেডার টেক্সট দৃশ্যমান */
[data-theme="dark"] .header-nav h2 {
    color: #fbbf24;
    text-shadow: var(--glow-yellow);
}