/* App-Style Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --primary:#2563eb; --primary-dark:#1e40af;
  --accent:#06b6d4; --accent-dark:#0e7490;
  --bg:#f3f4f6; --card:#fff;
  --text:#22223b; --text2:#4a5568; --border:#e5e7eb;
  --green:#22c55e; --green-bg:#e6fbe6; --red:#ef4444;
  --shadow:0 4px 16px rgba(0,0,0,0.08);
}
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:linear-gradient(120deg,#2563eb 0%,#06b6d4 100%);
  min-height:100vh; color:var(--text); line-height:1.6;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
}
.main-container, .quiz-container {
  width:100%; max-width:600px; margin:32px auto 0 auto; background:var(--card);
  border-radius:18px; box-shadow:var(--shadow); padding:20px; min-height:calc(100vh - 48px);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  border:1px solid var(--border);
}
@media (max-width:700px) {
  .main-container, .quiz-container { max-width:98vw; margin:0 auto; padding:10px; border-radius:12px; }
}
@media (max-width:480px) {
  .main-container, .quiz-container { padding:2vw; border-radius:8px; }
}

/* Hero/App Title - Modern Container Design */
.hero-section {
  width: 100%;
  max-width: 600px;
  margin: 0 auto 24px auto;
  padding: 32px 0 24px 0;
  background: linear-gradient(90deg, #2563eb 0%, #06b6d4 100%);
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(38,99,235,0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.brand-title {
  font-family: 'Montserrat', 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 1.15rem; /* Match menu-title size */
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
  margin-bottom: 6px;
  text-shadow: 0 2px 8px rgba(38,99,235,0.12);
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  background-clip: initial;
}

.brand-subtitle {
  font-family: 'Montserrat', 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 0.98rem; /* Match menu-desc size */
  color: #e0f7fa;
  font-weight: 500;
  margin-bottom: 4px;
  text-shadow: 0 1px 4px rgba(6,182,212,0.10);
  max-width: 90%;
}

@media (max-width: 700px) {
  .hero-section {
    max-width: 98vw;
    padding: 18px 0 12px 0;
    border-radius: 10px;
  }
  .brand-title {
    font-size: 1.15rem;
    margin-bottom: 6px;
  }
  .brand-subtitle {
    font-size: 0.98rem;
    margin-bottom: 2px;
  }
}

/* Menu Grid */
.menu-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:16px; width:100%; margin-bottom:20px;
}
@media (max-width:600px) { .menu-grid { grid-template-columns:1fr; gap:10px; } }
.menu-card {
  background:var(--card); border-radius:14px; padding:22px; box-shadow:var(--shadow);
  cursor:pointer; transition:.2s; border:2px solid transparent; text-align:center;
  position:relative;
}
.menu-card:hover {
  border-color:var(--accent); box-shadow:0 6px 24px rgba(6,182,212,0.10);
  transform:translateY(-2px) scale(1.03);
}
.menu-icon {
  font-size:2.3rem; margin-bottom:12px; color:var(--primary);
  filter:drop-shadow(0 2px 4px rgba(38,99,235,0.10));
}
.menu-title { font-size:1.15rem; font-weight:700; color:var(--text);}
.menu-desc { color:var(--text2); font-size:0.98rem; }

/* Controls */
.controls-section, .controls-container {
  width:100%; background:var(--bg); border-radius:10px; margin-bottom:14px; padding:14px;
  display:flex; flex-direction:column; align-items:center; gap:10px; box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.chapter-select, .search-input {
  width:100%; padding:12px; border:1px solid var(--border); border-radius:8px; font-size:1rem;
  background:#fff; color:var(--text); margin-bottom:8px;
  transition:border-color .2s;
}
.chapter-select:focus, .search-input:focus { border-color:var(--primary); outline:none; }
.search-container { display:flex; gap:8px; width:100%; }
@media (max-width:600px) { .search-container { flex-direction:column; gap:4px; } }
.search-btn, .clear-btn, .nav-btn, .action-btn, .control-btn, .completion-btn {
  padding:10px 18px; border:none; border-radius:8px; font-weight:600; font-size:1rem;
  cursor:pointer; transition:.2s; margin:0 2px;
}
.search-btn { background:var(--primary); color:#fff; }
.clear-btn { background:var(--accent); color:#fff;}
.search-btn:hover { background:var(--primary-dark); }
.clear-btn:hover { background:var(--accent-dark); }

/* Stats */
.stats-container {
  display:flex; justify-content:space-around; align-items:center; gap:10px; width:100%; margin:12px 0;
}
.stat-item {
  text-align:center; padding:10px; background:var(--bg); border:1px solid var(--border);
  border-radius:8px; flex:1; min-width:80px; font-size:0.95rem;
  box-shadow:0 1px 4px rgba(0,0,0,0.04);
}
.stat-item i { font-size:1.2rem; color:var(--accent);}
.stat-item span { font-weight:700; font-size:1.05rem; display:block; }
.stat-item small { font-size:0.82rem; color:var(--text2); }

/* Quiz/Question Area */
.quiz-area, .question-container {
  width:100%; margin-bottom:14px; background:var(--card); border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,0.04); padding:18px;
}
.question-text, .solution-question {
  font-size:1.15rem; color:var(--primary-dark); margin-bottom:10px; text-align:center;
  font-weight:600;
}
.question-image { max-width:100%; border-radius:8px; margin:12px 0; box-shadow:0 2px 8px rgba(0,0,0,0.06);}
.answer-options {
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;
}
@media (max-width:600px) { .answer-options { grid-template-columns:1fr; gap:8px; } }
.answer-btn {
  padding:14px; border:2px solid var(--border); border-radius:10px; background:#fff;
  font-size:1.05rem; font-weight:600; cursor:pointer; transition:.2s;
  box-shadow:0 1px 4px rgba(0,0,0,0.03);
}
.answer-btn:hover { border-color:var(--primary); background:rgba(38,99,235,0.04);}
.answer-btn.correct { border-color:var(--green); background:var(--green-bg);}
.answer-btn.incorrect { border-color:var(--red); background:rgba(239,68,68,0.08);}
.true-btn { color:var(--green);}
.false-btn { color:var(--red);}

/* Progress */
.progress-container {
  background:#e0e6ed; height:8px; border-radius:4px; overflow:hidden; margin-bottom:10px; width:100%;
}
.progress-bar {
  height:100%; background:linear-gradient(90deg,var(--primary),var(--accent));
  border-radius:4px; transition:width .2s; width:0%;
}
.progress-text { text-align:center; font-weight:600; color:var(--text2); font-size:0.95rem; }

/* Navigation & Controls */
.quiz-controls, .review-navigation, .completion-buttons, .results-actions {
  display:flex; justify-content:center; align-items:center; gap:10px; width:100%; margin:10px 0;
  flex-wrap:wrap;
}
.control-btn, .nav-btn, .completion-btn, .action-btn {
  background:var(--accent); color:#fff;
}
.control-btn:disabled, .nav-btn:disabled, .completion-btn:disabled, .action-btn:disabled {
  background:#bdc3c7; cursor:not-allowed;
}
.speak-btn { background:#a29bfe; color:#fff; }
.speak-btn:hover { background:#6c5ce7; }
.completion-btn { background:var(--green); }
#next-section-btn { background:var(--primary); }
#restart-section-btn { background:var(--accent); }
#next-section-btn:hover { background:var(--primary-dark); }
#restart-section-btn:hover { background:var(--accent-dark); }

/* Feedback & Toast */
.feedback-message, .toast {
  position:fixed; top:20px; right:20px; padding:12px 22px; border-radius:10px;
  font-weight:700; z-index:1000; box-shadow:0 8px 32px rgba(0,0,0,0.15);
  max-width:340px; background:var(--primary); color:#fff; text-align:center;
  font-size:1rem;
}
.feedback-message.success, .toast.success { background:var(--green); }
.feedback-message.error, .toast.error { background:var(--red); }
.feedback-message.warning, .toast.warning { background:#fde68a; color:var(--text);}
@media (max-width:600px) {
  .feedback-message, .toast { left:50%; right:auto; transform:translateX(-50%); top:10px; }
}

/* Solution/Review Items */
.solution-item, .review-item {
  background:var(--bg); border:1px solid var(--border); border-left:5px solid var(--primary);
  border-radius:10px; padding:14px 18px; margin-bottom:12px; box-shadow:0 2px 8px rgba(0,0,0,0.04);
  width:100%;
}
.solution-header, .review-question {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; width:100%;
}
.solution-section { font-weight:700; color:var(--primary-dark);}
.tts-button {
  background:none; border:none; font-size:1.3rem; color:var(--accent);
  cursor:pointer; padding:2px;
}
.solution-pidgin {
  font-style:italic;
  color:var(--accent-dark);
  margin:6px 0 8px 10px;
  border-left:3px solid var(--accent);
  padding-left:10px;
  text-align:center;
  font-size:1.1rem;
  width:125%;
  box-sizing:border-box;
  display:block;
  margin-left:-12.5%;
  background:linear-gradient(90deg,#e0f7fa 0%,#f3f4f6 100%);
}
.solution-answer { color:var(--green); font-weight:700; }

/* Results */
.results-container {
  text-align:center; padding:28px 10px; width:100%;
}
.results-title { font-size:1.6rem; font-weight:800; color:var(--primary-dark); margin-bottom:12px; }
.score-display { font-size:2.2rem; font-weight:800; color:var(--primary); margin-bottom:12px; }
.score-status.passed { color:var(--green);}
.score-status.failed { color:var(--red);}
.section-completed-message {
  text-align:center; margin:12px 0; padding:10px; background:#d4edda; color:#155724;
  border-radius:8px; border-left:4px solid #22c55e;
}

/* Footer */
.copyright-footer {
  text-align:center; padding:12px; margin-top:16px; background:var(--bg);
  border-top:2px solid var(--border); border-radius:0 0 12px 12px; width:100%;
  box-shadow:0 -2px 8px rgba(0,0,0,0.04);
}
.copyright-footer p { margin:3px 0; font-size:0.9rem; color:var(--text2);}
.copyright-footer strong { color:var(--primary); font-weight:700;}
.created-by { font-style:italic; }
.highlight {
  color:var(--accent); font-weight:700;
  background:linear-gradient(45deg,var(--primary),var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* Utility */
.hidden { display:none!important; }
.fade-in { animation: fadeIn 0.5s ease-out; }
@keyframes fadeIn { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }