/* =====================================================
   TOTALMCQ OPTIMIZED CSS v2
   PART 1: ROOT + RESET + LAYOUT + HEADER + BUTTONS
   ===================================================== */


html {
    background: var(--background);
}


body {
    background: var(--background);
    color: var(--text);
}
/* =========================
   ROOT VARIABLES
   ========================= */

:root {

  --primary: #2563eb;
  --primary-dark: #1e40af;
  --primary-hover: #1d4ed8;

  --success: #15803d;
  --success-light: #16a34a;

  --danger: #dc2626;
  --warning: #f59e0b;

  --text: #111827;
  --text-muted: #475569;

  --background: #f3f4f6;
  --surface: #ffffff;

  --border: #e5e7eb;

  --header: #0f172a;


  --font-main:
    "Roboto",
    Arial,
    sans-serif;

  --font-code:
    "Fira Code",
    monospace;


  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;


  --shadow-sm:
    0 2px 6px rgba(0,0,0,.06);

  --shadow-md:
    0 6px 18px rgba(0,0,0,.12);


  --transition:
    .2s ease;

}



/* =========================
   DARK THEME VARIABLES
   ========================= */


[data-theme="dark"] {

  --text:#e5e7eb;

  --text-muted:#cbd5e1;

  --background:#111827;

  --surface:#020617;

  --border:#334155;

  --header:#020617;

}



/* =========================
   RESET
   ========================= */


*,
*::before,
*::after {

  box-sizing:border-box;

}



html {

  scroll-behavior:smooth;

}



body {

  margin:0;

  font-family:var(--font-main);

  background:var(--background);

  color:var(--text);

  line-height:1.6;

  -webkit-font-smoothing:antialiased;

  text-rendering:optimizeLegibility;

}



/* =========================
   GLOBAL ELEMENTS
   ========================= */


img {

  max-width:100%;

  height:auto;

}



button,
a {

  -webkit-tap-highlight-color:transparent;

}



button {

  font-family:inherit;

}



h1,
h2,
h3,
h4 {

  line-height:1.3;

}



/* =========================
   HEADER
   ========================= */


header {

  background:var(--header);

  color:white;

  padding:14px;

  text-align:center;

}



header h1,
header h2,
header h3 {

  margin:.3rem 0;

}



/* =========================
   MAIN CONTENT
   ========================= */


main {

  max-width:960px;

  margin:auto;

  padding:18px;

  background:var(--surface);

}



/* Long pages optimisation */

.mcq {

  content-visibility:auto;

  contain-intrinsic-size:300px;

}



/* =========================
   BREADCRUMB
   ========================= */


.breadcrumb {

  font-size:.9rem;

  margin-bottom:15px;

}



.breadcrumb span {

  font-weight:600;

}



.breadcrumb-link {

  color:var(--primary);

  text-decoration:none;

  font-weight:500;

}



.breadcrumb-link:hover {

  color:var(--primary-dark);

  text-decoration:underline;

}



.breadcrumb-link:focus-visible {

  outline:3px solid #93c5fd;

  outline-offset:3px;

  border-radius:4px;

}



/* =========================
   COMMON BUTTON SYSTEM
   ========================= */


.btn,
.nav-btn,
.show-btn {


  border:0;

  cursor:pointer;

  font-weight:600;

  border-radius:var(--radius-sm);


  transition:

    background-color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);


}



.btn:hover,
.nav-btn:hover,
.show-btn:hover {


  transform:translateY(-1px);

  box-shadow:var(--shadow-md);


}



.btn:active,
.nav-btn:active,
.show-btn:active {


  transform:none;

}



.btn:focus-visible,
.nav-btn:focus-visible,
.show-btn:focus-visible {


  outline:3px solid #93c5fd;

  outline-offset:3px;

}



/* =========================
   TOP / BOTTOM BUTTON AREA
   ========================= */


.top-buttons,
.bottom-buttons {


  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-bottom:15px;


}



.btn {


  padding:10px 18px;

  color:white;

  text-decoration:none;

}



.home-btn {


  background:var(--header);

}



.home-btn:hover {


  background:#1e293b;

}



.download-btn {


  background:var(--primary);

}



.download-btn:hover {


  background:var(--primary-hover);

}



/* =========================
   HEADER ACTION BUTTONS
   ========================= */


.header-actions {


  display:flex;

  justify-content:center;

  gap:10px;

  margin-top:10px;


}



.header-actions > * {


  flex:1;

  max-width:220px;

  display:flex;

  align-items:center;

  justify-content:center;


}



/* =========================
   DARK MODE BUTTON
   ========================= */


#dark-mode-toggle {


  padding:10px 18px;

  background:transparent;

  color:white;

  border:1px solid #94a3b8;

  border-radius:var(--radius-sm);

  cursor:pointer;

  font-weight:600;


}



#dark-mode-toggle::before {


  content:"🌙";

  margin-right:6px;


}



[data-theme="dark"] #dark-mode-toggle::before {


  content:"☀️";


}



#dark-mode-toggle:hover {


  background:rgba(255,255,255,.1);


}



/* =========================
   MAIN SITE BUTTON
   ========================= */


.main-site-btn {


  display:inline-flex;

  align-items:center;

  justify-content:center;


  padding:8px 16px;


  background:var(--primary-dark);


  color:white;


  text-decoration:none;


  border-radius:var(--radius-sm);


  font-weight:600;


}



.main-site-btn:hover {


  background:var(--primary-hover);


}
/* =====================================================
   TOTALMCQ OPTIMIZED CSS v2
   PART 2: MCQ + ANSWERS + EXPLANATIONS
   ===================================================== */


/* =========================
   MCQ CONTAINER
   ========================= */


.mcq {

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:var(--radius-lg);

  padding:1rem;

  margin-bottom:1.5rem;

}



/* Question */

.mcq legend {

  display:block;

  font-size:1.05rem;

  font-weight:700;

  margin-bottom:.8rem;

  color:var(--text);

}



/* =========================
   OPTIONS
   ========================= */


.options {

  list-style:none;

  padding:0;

  margin:.5rem 0 1rem;

}



.option {


  width:100%;

  display:block;

  text-align:left;


  padding:.65rem .85rem;


  margin-bottom:.45rem;


  background:#f8fafc;


  border:1px solid var(--border);


  border-radius:var(--radius-md);


  color:var(--text);


  font-size:.96rem;


  cursor:pointer;


  transition:

    background-color var(--transition),
    border-color var(--transition),
    transform var(--transition);


}



.option:hover {


  background:#eff6ff;

  border-color:var(--primary);

  transform:translateY(-1px);


}



.option:focus-visible {


  outline:3px solid #93c5fd;

  outline-offset:3px;


}



/* Selected option */


.option[aria-selected="true"] {


  font-weight:700;


}



/* Correct answer */


.option.correct {


  background:#dcfce7;

  border-color:var(--success);

  color:#065f46;


}



/* Incorrect answer */


.option.incorrect {


  background:#fee2e2;

  border-color:var(--danger);

  color:#991b1b;


}



/* =========================
   SHOW ANSWER BUTTON
   ========================= */


.show-btn {


  margin-top:.5rem;

  padding:.55rem 1rem;


  background:var(--primary);

  color:white;


}



.show-btn:hover {


  background:var(--primary-dark);


}



/* =========================
   NAVIGATION BUTTONS
   ========================= */


.nav-buttons {


  display:flex;

  gap:12px;

  margin:25px 0;


}



.nav-btn {


  flex:1;

  padding:12px;

  text-align:center;

  color:white;

  text-decoration:none;


}



.prev-btn {


  background:#64748b;


}



.prev-btn:hover {


  background:#475569;


}



.next-btn {


  background:var(--success);


}



.next-btn:hover {


  background:#116632;


}



/* =====================================================
   ANSWER AREA
   ===================================================== */


.answer {


  margin-top:.75rem;


  padding:.9rem 1rem;


  border-radius:var(--radius-lg);


  background:var(--background);


  border:1px solid var(--border);


  font-size:.95rem;


  line-height:1.6;


}



.answer.is-hidden {


  display:none;


}



.answer .label {


  font-weight:700;


}



/* =====================================================
   COMMON EXPLANATION BOX
   ===================================================== */


.correct-answer,
.exam-relevance,
.difficulty,
.concept-notes,
.common-mistakes,
.explanation-text,
.options-analysis,
.mnemonic {


  padding:.7rem .85rem;


  margin-bottom:.7rem;


  border-radius:var(--radius-sm);


  border-left:4px solid;


  box-shadow:var(--shadow-sm);


}



/* =========================
   BOX COLORS
   ========================= */


.correct-answer {


  background:#dcfce7;

  border-color:#16a34a;


}



.exam-relevance {


  background:#dbeafe;

  border-color:#3b82f6;


}



.difficulty {


  background:#fef3c7;

  border-color:#f59e0b;


}



.concept-notes {


  background:#f1f5f9;

  border-color:#64748b;


}



.common-mistakes {


  background:#fee2e2;

  border-color:#dc2626;


}



.explanation-text {


  background:#e0f2fe;

  border-color:#0284c7;


}



.options-analysis {


  background:#f0fdf4;

  border-color:#16a34a;


}



.mnemonic {


  background:#fefce8;

  border-color:#f59e0b;

  color:#92400e;

  font-style:italic;


}



/* =========================
   EXPLANATION LISTS
   ========================= */


.common-mistakes li,
.options-analysis li {


  margin-left:1.2rem;


}



/* =========================
   EXPLANATION ICONS
   ========================= */


.correct-answer::before {

  content:"✅";

  margin-right:.5rem;

}



.exam-relevance::before {

  content:"📘";

  margin-right:.5rem;

}



.difficulty::before {

  content:"⚡";

  margin-right:.5rem;

}



.concept-notes::before {

  content:"💡";

  margin-right:.5rem;

}



.common-mistakes::before {

  content:"⚠️";

  margin-right:.5rem;

}



.explanation-text::before {

  content:"📖";

  margin-right:.5rem;

}



.options-analysis::before {

  content:"🔍";

  margin-right:.5rem;

}



.mnemonic::before {

  content:"🧠";

  margin-right:.5rem;

}



/* =====================================================
   DARK MODE
   ===================================================== */


[data-theme="dark"] .option {


  background:#020617;

  border-color:#334155;


}



[data-theme="dark"] .option:hover {


  background:#1e293b;

  border-color:#93c5fd;


}



[data-theme="dark"] .option.correct {


  background:#022c22;

  color:#d1fae5;


}



[data-theme="dark"] .option.incorrect {


  background:#2a0a0a;

  color:#fecaca;


}



[data-theme="dark"] .answer {


  background:#020617;

  border-color:#334155;


}



/* Explanation dark colors */


[data-theme="dark"] .correct-answer {


  background:#022c22;

  color:#d1fae5;


}



[data-theme="dark"] .exam-relevance {


  background:#0f172a;

  color:#bfdbfe;


}



[data-theme="dark"] .difficulty {


  background:#29220a;

  color:#fde68a;


}



[data-theme="dark"] .concept-notes {


  background:#111827;

  color:#cbd5e1;


}



[data-theme="dark"] .common-mistakes {


  background:#2a0a0a;

  color:#fecaca;


}



[data-theme="dark"] .explanation-text {


  background:#021f2f;

  color:#bae6fd;


}



[data-theme="dark"] .options-analysis {


  background:#022c22;

  color:#d1fae5;


}



[data-theme="dark"] .mnemonic {


  background:#20200a;

  color:#fde68a;


}



/* =====================================================
   REDUCED MOTION
   ===================================================== */


@media(prefers-reduced-motion:reduce){


* {

  transition:none!important;

  animation:none!important;

}


}

/* =====================================================
   TOTALMCQ OPTIMIZED CSS v2
   PART 3: CARDS + FAQ + CATEGORY + RESPONSIVE + PRINT
   ===================================================== */


/* =====================================================
   DOMAIN CARDS
   ===================================================== */


.domains {

  max-width:1000px;

  margin:3rem auto;

  padding:0 1rem;

  text-align:center;

}



.domain-grid {


  display:grid;


  grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));


  gap:1.5rem;


  margin-top:1.5rem;


}



.domain-card {


  display:block;


  background:var(--surface);


  color:var(--text);


  text-decoration:none;


  padding:2rem;


  border-radius:var(--radius-xl);


  border:1px solid var(--border);


  transition:

    transform var(--transition),
    box-shadow var(--transition);


}



.domain-card:hover {


  transform:translateY(-5px);


  box-shadow:var(--shadow-md);


}



.domain-card .icon {


  display:block;


  font-size:2.5rem;


  margin-bottom:.5rem;


}



.domain-card .cta {


  display:inline-block;


  margin-top:1rem;


  color:var(--primary);


  font-weight:700;


}



.domain-card.cbse {


  border-top:5px solid var(--success-light);


}



.domain-card.grammar {


  border-top:5px solid var(--primary);


}



/* =====================================================
   FAQ
   ===================================================== */


.faq {


  max-width:800px;


  margin:auto;


  padding:20px;


}



.faq-title {


  text-align:center;


  font-size:2rem;


  margin-bottom:30px;


  color:var(--primary-dark);


}



.faq-item {


  margin-bottom:15px;


  border:1px solid var(--border);


  border-radius:var(--radius-md);


  overflow:hidden;


  background:var(--surface);


}



.faq-item summary {


  cursor:pointer;


  padding:14px 20px;


  font-size:1.1rem;


  font-weight:600;


  color:var(--primary-dark);


  background:#f8fafc;


  list-style:none;


  position:relative;


}



.faq-item summary::after {


  content:"▼";


  position:absolute;


  right:20px;


  transition:transform var(--transition);


}



.faq-item[open] summary::after {


  transform:rotate(180deg);


}



.faq-item summary:hover {


  background:#eff6ff;


}



.faq-answer {


  padding:15px 20px;


  line-height:1.7;


  background:var(--surface);


  color:var(--text);


}



/* FAQ dark mode */


[data-theme="dark"] .faq-item summary {


  background:#020617;


  color:var(--text);


}



[data-theme="dark"] .faq-item summary:hover {


  background:#1e293b;


}



/* =====================================================
   PAGE DESCRIPTION
   ===================================================== */


.page-description {


  max-width:900px;


  margin:30px auto;


  padding:20px 25px;


  background:var(--background);


  border-left:5px solid var(--primary-dark);


  border-radius:var(--radius-md);


  line-height:1.7;


  color:var(--text);


  box-shadow:var(--shadow-sm);


}



.page-description:hover {


  box-shadow:var(--shadow-md);


}



/* =====================================================
   CATEGORY LIST
   ===================================================== */


.category-list ul {


  list-style:none;


  padding:0;


  margin:20px 0;


  display:grid;


  grid-template-columns:
    repeat(auto-fill,minmax(220px,1fr));


  gap:12px;


}



.category-item {


  background:var(--surface);


  border:1px solid var(--border);


  border-radius:var(--radius-md);


  transition:

    transform var(--transition),
    box-shadow var(--transition);


}



.category-item:hover {


  transform:translateY(-2px);


  box-shadow:var(--shadow-sm);


}



.category-title {


  font-weight:600;


}



/* =====================================================
   CODE BLOCKS
   ===================================================== */


pre {


  overflow-x:auto;


}



pre code {


  display:block;


  padding:14px 16px;


  background:#f6f8fa;


  border:1px solid var(--border);


  border-radius:var(--radius-sm);


  font-family:var(--font-code);


  font-size:.9rem;


  line-height:1.5;


  color:#24292e;


}



[data-theme="dark"] pre code {


  background:#020617;


  color:#e5e7eb;


  border-color:#334155;


}



/* =====================================================
   FOOTER
   ===================================================== */


footer {


  background:var(--header);


  color:white;


  text-align:center;


  padding:15px;


  font-size:.9rem;


}



/* =====================================================
   RESPONSIVE DESIGN
   ===================================================== */


@media(max-width:768px){


  main {

    padding:15px;

  }


  .header-actions {


    flex-direction:column;


  }


  .header-actions > * {


    max-width:none;


  }



  .top-buttons,
  .bottom-buttons {


    flex-direction:column;


  }



  .btn,
  .nav-btn,
  .show-btn {


    width:100%;


  }



  .nav-buttons {


    flex-direction:column;


  }



  .domain-grid {


    grid-template-columns:1fr;


  }


}



@media(max-width:480px){


  body {


    font-size:15px;


  }



  .mcq {


    padding:.8rem;


  }



  .faq {


    padding:10px;


  }



  .faq-title {


    font-size:1.5rem;


  }



  .domain-card {


    padding:1.5rem;


  }



  .page-description {


    padding:15px;


  }


}



/* =====================================================
   PRINT OPTIMIZATION
   ===================================================== */


@media print {


  body {


    background:white;

    color:black;


  }



  header,
  footer,
  .nav-buttons,
  .show-btn,
  #dark-mode-toggle {


    display:none!important;


  }



  main {


    max-width:100%;

    padding:0;


  }



  .mcq {


    break-inside:avoid;


    border:1px solid #999;


  }



  .answer {


    display:block!important;


  }


}