:root {
   --toc-width: 260px;
   --bg: #121212; /* Dark background */
   --text: #e0e0e0; /* Light text */
   --accent: #4dabf7; /* Muted blue accent */
   --active-bg: #1e3a5f; /* Active highlight */
 }
 
 /* Smooth scrolling */
 html {
   scroll-behavior: smooth;
 }
 
 /* === BASE === */
 body {
   font-family: system-ui, sans-serif;
   line-height: 1.6;
   color: var(--text);
   background: var(--bg);
   margin: 0;
   display: flex;
   min-height: 100vh;
 }
 
 /* === SIDEBAR TOC === */
 nav#toc {
   position: fixed;
   top: 0;
   left: 0;
   width: var(--toc-width);
   height: 100vh;
   overflow-y: auto;
   background: #1c1c1c;
   border-right: 1px solid #333;
   padding: 1rem;
   box-sizing: border-box;
   transition: transform 0.3s ease;
 }
 
 nav#toc h2 {
   margin-top: 0;
   font-size: 1.1em;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: #aaa;
 }
 
 nav#toc ul {
   list-style-type: none;
   padding-left: 0;
   margin: 0;
 }
 
 nav#toc li {
   margin: 0.3em 0;
   line-height: 1.4;
 }
 
 nav#toc li ul {
   padding-left: 0.7rem;
   margin-top: 0.2em;
 }
 
 nav#toc a {
   color: var(--accent);
   text-decoration: none;
   display: inline-block;
   padding: 0.1em 0.2em;
   border-radius: 4px;
   transition: background 0.2s ease;
 }
 
 nav#toc a:hover {
   background: rgba(77, 171, 247, 0.15);
 }
 
 nav#toc a.active {
   background: var(--active-bg);
   font-weight: bold;
 }
 
 nav#toc a.back-link {
   font-weight: 600;
   color: #ddd;
 }
 
 nav#toc a.back-link::before {
   content: "← ";
   color: var(--accent);
 }
 
 /* === MAIN CONTENT === */
 main {
   flex: 1;
   max-width: 900px;
   margin: 2rem auto;
   padding: 2rem;
   background: #1e1e1e;
   border-radius: 8px;
   box-shadow: 0 0 10px rgba(0,0,0,0.4);
   box-sizing: border-box;
   margin-left: calc(var(--toc-width) + 2rem);
 }
 
 h1, h2, h3, h4 {
   color: #f0f0f0;
   border-bottom: 1px solid #333;
   padding-bottom: 0.2em;
 }
 
 a {
   color: var(--accent);
   text-decoration: none;
 }
 
 a:hover {
   text-decoration: underline;
 }
 
 /* === CODE & PRE === */
 pre, code {
   font-family: monospace;
   background: #2b2b2b;
   color: #f8f8f2;
   padding: 0.2em 0.4em;
   border-radius: 4px;
 }
 
 pre {
   padding: 1em;
   overflow-x: auto;
 }
 
 /* === BLOCKQUOTE === */
 blockquote {
   border-left: 4px solid #444;
   padding-left: 1em;
   color: #bbb;
   margin-left: 0;
   background: #1a1a1a;
 }
 
 /* === HR === */
 hr {
   border: none;
   border-top: 1px solid #333;
   margin: 2em 0;
 }
 
 /* === MOBILE === */
 #toc-toggle {
   display: none;
   position: fixed;
   top: 1rem;
   left: 1rem;
   background: var(--accent);
   color: white;
   border: none;
   border-radius: 4px;
   padding: 0.5rem 0.8rem;
   font-size: 1rem;
   z-index: 1000;
 }
 
 @media (max-width: 900px) {
   nav#toc {
     transform: translateX(-100%);
     z-index: 999;
   }
 
   nav#toc.open {
     transform: translateX(0);
     box-shadow: 2px 0 5px rgba(0,0,0,0.5);
   }
 
   #toc-toggle {
     display: block;
   }
 
   main {
     margin: 2rem 1rem;
     padding: 1.5rem;
   }
 }
 
 /* === MEDIA (IMAGES & VIDEOS) === */
 img {
   max-width: 400px;
   height: auto;
   display: block;
   margin: 1rem auto;
   border-radius: 6px;
   cursor: zoom-in;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   box-shadow: 0 0 6px rgba(0,0,0,0.6);
 }
 
 img:hover {
   box-shadow: 0 0 15px rgba(0,0,0,0.8);
 }
 
 /* Lightbox overlay */
 #img-lightbox {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0,0,0,0.9);
   display: none;
   justify-content: center;
   align-items: center;
   z-index: 2000;
 }
 
 #img-lightbox img {
   max-width: 90%;
   max-height: 90%;
   border-radius: 8px;
   cursor: zoom-out;
   box-shadow: 0 0 20px rgba(0,0,0,0.8);
 }
 
 /* Responsive videos */
 video, iframe {
   display: block;
   max-width: 100%;
   height: auto;
   border-radius: 6px;
   margin: 1.5rem auto;
   box-shadow: 0 0 10px rgba(0,0,0,0.4);
 }
     
 /* === QUIZ STYLING === */
 .quiz-container {
   background: #222;
   border: 1px solid #333;
   border-radius: 10px;
   padding: 2rem;
   margin: 2rem auto;
   box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
   max-width: 800px;
 }
 
 .quiz-question {
   font-size: 1.3rem;
   font-weight: 600;
   margin-bottom: 1rem;
   color: #f0f0f0;
 }
 
 .quiz-options {
   list-style: none;
   padding: 0;
   margin: 0 0 1.5rem 0;
 }
 
 .quiz-options li {
   margin: 0.6rem 0;
 }
 
 .quiz-option-btn {
   width: 100%;
   text-align: left;
   background: #2b2b2b;
   color: #e0e0e0;
   border: 1px solid #444;
   border-radius: 6px;
   padding: 0.7rem 1rem;
   cursor: pointer;
   font-size: 1rem;
   transition: background 0.2s ease, transform 0.1s ease, border-color 0.2s ease;
 }
 
 .quiz-option-btn:hover {
   background: #333;
   border-color: var(--accent);
   transform: scale(1.01);
 }
 
 .quiz-option-btn.correct {
   background: #144d2a;
   border-color: #21c55d;
   color: #d4ffd8;
 }
 
 .quiz-option-btn.incorrect {
   background: #5a1a1a;
   border-color: #f87171;
   color: #ffdada;
 }
 
 .quiz-feedback {
   font-size: 1.1rem;
   margin-top: 1rem;
   padding: 0.7rem 1rem;
   border-radius: 6px;
   background: #1b1b1b;
   border: 1px solid #333;
   color: #bbb;
 }
 
 .quiz-feedback.correct {
   border-color: #21c55d;
   color: #b9f6ca;
 }
 
 .quiz-feedback.incorrect {
   border-color: #f87171;
   color: #ffcdd2;
 }
 
 .quiz-next-btn {
   background: var(--accent);
   color: white;
   border: none;
   padding: 0.8rem 1.5rem;
   font-size: 1rem;
   border-radius: 6px;
   cursor: pointer;
   margin-top: 1rem;
   transition: background 0.2s ease, transform 0.1s ease;
 }
 
 .quiz-next-btn:hover {
   background: #6ab0ff;
   transform: scale(1.03);
 }
 
 .quiz-score {
   text-align: center;
   font-size: 1.3rem;
   color: var(--accent);
   font-weight: bold;
   margin-top: 2rem;
 }
 
 .quiz-restart-btn {
   background: transparent;
   border: 1px solid var(--accent);
   color: var(--accent);
   padding: 0.6rem 1.2rem;
   border-radius: 6px;
   cursor: pointer;
   transition: all 0.2s ease;
   margin-top: 1rem;
 }
 
 .quiz-restart-btn:hover {
   background: var(--accent);
   color: #fff;
 }
 

 .quiz-progress {
   height: 8px;
   border-radius: 5px;
   background: #333;
   margin-bottom: 1.5rem;
   overflow: hidden;
 }
 
 .quiz-progress-inner {
   height: 100%;
   width: 0%;
   background: var(--accent);
   transition: width 0.3s ease;
 }

 .trainer-container {
   background: #222;
   border: 1px solid #333;
   border-radius: 1rem;
   padding: 2rem;
   margin: 2rem auto;
   box-shadow: 0 0 10px rgba(0,0,0,0.4);
   max-width: 800px;
   color: #eee;
 }
 
 .trainer-container h1 {
   color: var(--accent);
   font-weight: 700;
   text-align: center;
   font-size: 1.8rem;
   margin-bottom: 1.5rem;
 }
 
 /* Dropdowns and buttons */
 .trainer-container select {
   background: #1b1b1b;
   color: #eee;
   border: 1px solid #444;
   border-radius: 0.5rem;
   padding: 0.5rem;
   width: 100%;
 }
 
 .trainer-container select:focus {
   outline: none;
   border-color: var(--accent);
 }
 
 .trainer-container button {
   border-radius: 0.6rem;
   font-weight: 600;
   transition: all 0.15s ease;
 }
 
 .trainer-container button:hover {
   transform: scale(1.02);
 }
 
 /* Color classes for action buttons */
 .btn-blue { background: #2563eb; color: white; }
 .btn-blue:hover { background: #3b82f6; }
 
 .btn-green { background: #16a34a; color: white; }
 .btn-green:hover { background: #22c55e; }
 
 .btn-gray { background: #333; color: #ddd; }
 .btn-gray:hover { background: #444; }
 
 .btn-yellow { background: #b45309; color: #fff; }
 .btn-yellow:hover { background: #d97706; }
 
 /* Prompt and Input */
 #prompt {
   font-size: 3rem;
   font-weight: 600;
   text-align: center;
   margin-bottom: 1rem;
   color: #fff;
   min-height: 3rem;
 }
 
 #answerInput {
   width: 100%;
   background: #1b1b1b;
   border: 1px solid #444;
   color: #eee;
   text-align: center;
   font-size: 1.1rem;
   border-radius: 0.5rem;
   padding: 0.7rem;
   transition: border-color 0.2s ease;
 }
 
 #answerInput:focus {
   border-color: var(--accent);
   outline: none;
 }
 
 #answerInput.border-green-500 { border-color: #22c55e; }
 #answerInput.border-red-500 { border-color: #ef4444; }
 
 #feedback {
   text-align: center;
   font-size: 1.1rem;
   font-weight: 600;
   margin-top: 1rem;
   min-height: 1.5rem;
 }
 
 .text-green-600 { color: #22c55e; }
 .text-red-600 { color: #ef4444; }
 
 /* Grid for controls */
 .trainer-controls {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
   gap: 1rem;
   margin-bottom: 1.5rem;
 }

/* Hide input + MCQ buttons in auto mode */
#lang-practice.auto-mode #answerContainer,
#lang-practice.auto-mode #speakBtn,
#lang-practice.auto-mode #streakDisplay,
#lang-practice.auto-mode #mcqContainer {
  display: none !important;
}

/* Large centered question */
#lang-practice.auto-mode .quiz-question {
  align-items: center;
}

/* Fade-in for answer */
#lang-practice.auto-mode .quiz-feedback {
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Vertical centering */
#lang-practice.auto-mode .quiz-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* === TOC SEARCH BAR === */
#toc-search {
  margin-bottom: 1rem;
}

#toc-search-input {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border-radius: 4px;
  border: 1px solid #333;
  background: #111;
  color: var(--text);
  box-sizing: border-box;
  margin-bottom: 0.5rem;
}

#toc-search-input:focus {
  outline: none;
  border-color: var(--accent);
}

#toc-search-results {
  list-style: none;
  padding-left: 0.3rem;
  margin: 0;
}

#toc-search-results li a {
  display: block;
  padding: 0.2rem 0.3rem;
  border-radius: 4px;
}

#toc-search-results li a:hover {
  background: rgba(77, 171, 247, 0.15);
}