:root {
  /* core hue/sat/lum make it very easy to recolour the whole UI */
  --primary-h: 221; /* Classic Blue defaults */
  --primary-s: 83%;
  --primary-l: 57%;

  --primary-color: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
  --primary-dark: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) - 15%));
  --primary-light: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) + 15%)); /* Adjusted for better lightness */

  --secondary-color: #e5e7eb;
  --success-color: #16a34a; /* Updated success */
  --danger-color: #dc2626; /* Updated danger */
  /* --warning-color: #f59e0b; /* Original warning color, define if used */

  --bg-color: #f3f4f6;
  --surface-color: #ffffff;

  --text-darker: #111827;
  --text-color-high: var(--text-darker);
  --text-light: #ffffff;
  --text-muted: #6b7280;
  --text-color-medium: var(--text-muted); 
  --card-background: #ffffff;
  --card-border-color: #e9ecef;
  --text-color-light: var(--text-muted);
  --progress-track-color: #f0f0f0;

  --radius-sm: .25rem; /* 4px */
  --radius-md: .45rem; /* Approx 7px, slightly adjusted from original 0.4rem */
  --container-max-width: 750px;
  --spacing-unit: 0.5rem; /* 8px, can be multiplied */
}

/* ---------- 2. BASE DARK ---------- */
body.dark {
  --bg-color: #0f172a;
  --surface-color: #1e293b;
  --secondary-color: #334155;
--card-background: var(--surface-color);
--card-border-color: var(--secondary-color);

  --text-darker: #e2e8f0;
  --text-light: #e2e8f0; /* Often same as --text-darker in dark mode for body text */
  --text-muted: #94a3b8;
  --text-muted: #94a3b8;
  --text-color-light: #64748b;
  --progress-track-color: #334155;

  /* accent shifts slightly brighter on dark so it ‘pops’ */
  --primary-l: 65%;
  /* --primary-light might need adjustment for dark mode if used on dark surfaces */
  --primary-light: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) - 25%)); /* Darker shade for dark mode "light" effect */


  /* Specific overrides for success/danger on dark if needed, otherwise they use root definitions */
  /* For example, if #16a34a is too dark on #1e293b, you might define a brighter version here */
  /* --success-color: #22c55e; */
  /* --danger-color: #f87171; */
}

/* ---------- 3. SOLAR DARK (optional extra theme) ---------- */
body.theme-solar {
  --bg-color: #0d1117;
  --surface-color: #161b22;
  --secondary-color: #30363d;
--card-background: var(--surface-color);
--card-border-color: var(--secondary-color);
--progress-track-color: #22272e;
  --text-darker: #c9d1d9;
  --text-light: #c9d1d9;
  --text-muted: #8b949e;
  --text-color-light: #586069; /* Solar placeholder text */
  --progress-track-color: #21262d;

  --primary-h: 197;
  --primary-s: 89%;
  --primary-l: 48%; /* teal-ish accent */
  --primary-light: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) + 10%)); /* Adjusted for solar */
}

/* Smooth color transitions */
body, .app-header, .container, .choice,
button, .progress-bar, .subject-card, .mode-card,
.theme-toggle .slider, .theme-toggle .slider::before {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}


/* Basic Reset and Body Styles */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: var(--bg-color);
  color: var(--text-darker);
  line-height: 1.6;
}

.app-header {
  width: 100%;
  /* background-color: var(--primary-color); */ /* Replaced by gradient */
    background: linear-gradient(90deg, hsl(0deg 10.43% 5.84%) 0%, var(--primary-dark) 80%);
    color: var(--text-light);
    padding: calc(var(--spacing-unit) * 2) 0;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    margin-bottom: calc(var(--spacing-unit) * 2);
    position: relative;
}
.app-header h1 {
  margin: 0;
  font-size: 1.8em;
  color: var(--text-light); /* Ensures text is light on gradient */
  letter-spacing: .5px;
  font-weight: 600;
}

/* Main Application Container */
.container {
  max-width: var(--container-max-width);
  width: 100%;
  padding: calc(var(--spacing-unit) * 3);
  margin-bottom: calc(var(--spacing-unit) * 4);
  background-color: var(--surface-color);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-height: 300px;
}

.loading-message {
  text-align: center;
  color: var(--primary-color);
  margin-top: calc(var(--spacing-unit) * 4);
  font-size: 1.2em;
}

/* Headings */
h1, h2, h3 {
  text-align: center;
  color: var(--primary-color); /* Default for h1 (screen titles) and h3 (mode card titles) */
}
h1 { /* For screen titles within .container */
  margin-bottom: calc(var(--spacing-unit) * 3);
  font-size: 1.75em;
}
h2 { /* For question text or section titles */
  margin-top: 0;
  margin-bottom: calc(var(--spacing-unit) * 3);
  font-size: 1.4em;
  line-height: 1.4;
  color: var(--text-darker); /* Questions are darker */
}
h3 { /* For sub-sections or info */
    font-size: 1.2em;
    color: var(--text-muted);
    margin-bottom: var(--spacing-unit);
}


/* Buttons */
.button, button {
  padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
  background-color: var(--primary-color);
  color: var(--text-light);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 1em;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out, transform 0.1s ease; /* Base transition, global adds bgcolor */
  user-select: none;
}
.button:hover:not([disabled]), button:hover:not([disabled]) {
  background-color: var(--primary-dark);
  transform: translateY(-1px);
}
.button:active:not([disabled]), button:active:not([disabled]) {
  transform: translateY(0px);
}
.button[disabled], button[disabled] {
  background-color: var(--secondary-color);
  color: var(--text-muted);
  opacity: 0.7;
  cursor: not-allowed;
}

.button-secondary {
  background-color: #6b7280; /* Using a specific gray, could be var(--text-muted) if desired */
  color: var(--text-light);
}
.button-secondary:hover:not([disabled]) {
  background-color: #4b5563; /* Darker Gray */
}

.button-success {
  background-color: var(--success-color);
  color: var(--text-light);
}
.button-success:hover:not([disabled]) {
  background-color: #15803d; /* Darker shade of new success-color */
}
.button-danger {
  background-color: var(--danger-color);
  color: var(--text-light);
}
.button-danger:hover:not([disabled]) {
  background-color: #b91c1c; /* Darker shade of new danger-color */
}

/* === Initial Choice & Custom Exam Setup & Mode Selection === */
.initial-choice-screen,
.subject-selection-screen,
.mode-selection-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing-unit) * 2.5);
  padding-top: calc(var(--spacing-unit) * 2); /* For initial-choice */
}
.initial-choice-screen .mode-card {
    max-width: 550px;
}

.subject-card, .mode-card {
  border: 1px solid var(--secondary-color);
  border-radius: var(--radius-md);
  padding: calc(var(--spacing-unit) * 2.5);
  width: 100%;
  max-width: 500px; /* Default for subject/mode */
  text-align: center;
  background-color: var(--surface-color);
  box-shadow: 0 2px 5px rgba(0,0,0,0.07);
  /* transition handled globally */
}
.subject-card:hover, .mode-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.12);
}
.subject-card h3, .mode-card h3 { /* Card titles */
  margin-top: 0;
  margin-bottom: var(--spacing-unit);
  color: var(--primary-color);
  font-size: 1.3em;
}
.subject-card p, .mode-card p { /* Card descriptions */
  color: var(--text-muted);
  font-size: 0.95em;
  margin-bottom: calc(var(--spacing-unit) * 2.5);
  min-height: 40px;
}

.custom-exam-setup-screen {
  padding: var(--spacing-unit);
}
.custom-exam-setup-screen form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 2.5);
}
.subject-config-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-unit);
  padding: calc(var(--spacing-unit) * 2);
  border: 1px solid var(--secondary-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-color); /* Slightly different from surface for visual separation */
}
body.dark .subject-config-item {
  background-color: hsl(var(--primary-h), var(--primary-s), 15%); /* Darker distinct background for dark mode */
}
.subject-config-item label {
  flex-grow: 1;
  font-weight: 500;
  color: var(--text-darker);
}
.subject-config-item input[type="checkbox"] {
  transform: scale(1.2);
  margin-right: var(--spacing-unit);
  accent-color: var(--primary-color);
}
.subject-config-item input[type="number"] {
  padding: var(--spacing-unit);
  border: 1px solid var(--secondary-color);
  border-radius: var(--radius-sm);
  width: 70px;
  text-align: center;
  background-color: var(--surface-color);
  color: var(--text-darker);
}
.subject-config-item input[type="number"]:disabled {
  background-color: var(--secondary-color); /* Use secondary for disabled bg */
  color: var(--text-muted);
  cursor: not-allowed;
}
.custom-exam-setup-screen form .button[type="submit"] {
  margin-top: calc(var(--spacing-unit) * 2);
  background-color: var(--success-color);
}
.custom-exam-setup-screen form .button[type="submit"]:hover {
  background-color: #15803d; /* Darker success */
}


/* Answer Choices */
.choices-container {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 1.2);
}
.choice {
  display: flex;
  align-items: center;
  border: 2px solid var(--secondary-color);
  padding: calc(var(--spacing-unit) * 1.5);
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-bottom: calc(var(--spacing-unit) * 0.8);
  /* transition handled globally */
  text-align: left;
  background-color: var(--surface-color);
  user-select: none;
  color: var(--text-darker);
}
.choice input[type="radio"],
.choice input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 1em;
  height: 1em;
  border: 2px solid var(--text-muted);
  border-radius: 50%;
  outline: none;
  position: relative;
  margin-right: calc(var(--spacing-unit) * 1.5);
  transform: scale(1.3);
  cursor: pointer;
  vertical-align: middle;
  transition: border-color 0.2s ease;
  background: var(--surface-color);
}
.choice input[type="radio"]:checked::before,
.choice input[type="checkbox"]:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.6em;
  height: 0.6em;
  background-color: var(--primary-color);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.choice input[type="radio"]:hover,
.choice input[type="checkbox"]:hover {
  border-color: var(--primary-color);
}
.choice input[type="radio"]:focus-visible,
.choice input[type="checkbox"]:focus-visible {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px var(--primary-light);
}
.choice .choice-label {
  flex-grow: 1;
  cursor: pointer;
}
.choice:hover {
  border-color: var(--primary-color);
  background-color: var(--primary-light); /* Use primary-light for hover */
  transform: translateX(2px);
}
.choice.selected {
  background-color: var(--primary-color);
  color: var(--text-light);
  border-color: var(--primary-color);
  font-weight: 500;
}
.choice.correct {
  background-color: var(--success-color);
  border-color: #15803d; /* Darker success for border */
  color: var(--text-light);
}
.choice.incorrect {
  background-color: var(--danger-color);
  border-color: #b91c1c; /* Darker danger for border */
  color: var(--text-light);
  opacity: 0.9; /* Slightly less opacity */
}
.choice.actual-correct {
  border: 3px solid var(--success-color) !important;
  box-shadow: 0 0 8px var(--success-color);
}
.choice.disabled, .choice[disabled] { /* Added .choice[disabled] for consistency */
    cursor: not-allowed;
    opacity: 0.7;
}
.choice.disabled .choice-label, .choice[disabled] .choice-label {
    cursor: not-allowed;
}
.choice[disabled] input {
    pointer-events: none;
}


/* Feedback Area */
.feedback-area {
  margin-top: calc(var(--spacing-unit) * 2);
  padding: calc(var(--spacing-unit) * 1.5);
  border-radius: var(--radius-sm);
  text-align: center;
  font-weight: 500;
}
.feedback-area.correct {
  background-color: #d1fae5; /* Light Green - keeping static for now */
  color: #065f46; /* Dark Green text - keeping static */
  border: 1px solid #6ee7b7; /* Light Green border - keeping static */
}
.feedback-area.incorrect {
  background-color: #fee2e2; /* Light Red - keeping static */
  color: #991b1b; /* Dark Red text - keeping static */
  border: 1px solid #fca5a5; /* Light Red border - keeping static */
}
/* Consider theming feedback areas if they clash with dark/solar themes */
body.dark .feedback-area.correct {
    background-color: #065f46; color: #d1fae5; border-color: #10b981;
}
body.dark .feedback-area.incorrect {
    background-color: #991b1b; color: #fee2e2; border-color: #ef4444;
}
.feedback-area .explanation {
    font-size: 0.9em;
    margin-top: var(--spacing-unit);
    font-weight: normal;
    text-align: left;
    color: inherit; /* Inherit from parent feedback-area */
}

/* Progress Bar */
.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-unit);
}
.progress-text {
  font-size: 0.9em;
  color: var(--text-muted);
}
.score-text {
  font-size: 0.9em;
  font-weight: 500;
  color: var(--primary-color);
}
.progress-container {
  height: 12px;
  background-color: var(--secondary-color);
  border-radius: var(--radius-sm);
  margin-bottom: calc(var(--spacing-unit) * 3);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.progress-bar {
  height: 100%;
  background-color: var(--primary-color);
  width: 0%;
  /* transition handled globally */
  border-radius: var(--radius-sm);
}

/* Navigation Buttons Container */
.navigation-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: calc(var(--spacing-unit) * 4);
  padding-top: calc(var(--spacing-unit) * 2);
  border-top: 1px solid var(--secondary-color);
}
.navigation-buttons .button {
  min-width: 120px;
}

/* Results View */
.result-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing-unit) * 1.5);
  padding-top: calc(var(--spacing-unit) * 2);
  text-align: center;
}
.result-view h1 {
  color: var(--primary-color);
  margin-bottom: var(--spacing-unit);
}
.result-view p {
  font-size: 1.15em;
  margin: calc(var(--spacing-unit) * 0.8) 0;
  color: var(--text-darker);
}
.result-view strong {
  color: var(--primary-color);
  font-weight: 600;
}
.result-buttons {
  margin-top: calc(var(--spacing-unit) * 3);
  display: flex;
  gap: calc(var(--spacing-unit) * 2);
  flex-wrap: wrap;
  justify-content: center;
}

/* God Mode Specific Styles */
.god-mode-challenge {
  text-align: center;
}
.god-mode-presented{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  margin: calc(var(--spacing-unit) * 2) 0;
}
.god-mode-challenge .presented-choice { /* Renamed to match HTML if it's a single element */
  background: var(--primary-light);
  color: var(--primary-dark); /* Text on light primary bg */
  font-size: 1.6rem;
  font-weight: 700;
  border: 2px dashed var(--primary-color);
  border-radius: var(--radius-md);
  padding: 1rem 1.5rem;
  max-width: 90%;
  text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
body.dark .god-mode-challenge .presented-choice {
    color: var(--text-darker); /* Adjust if primary-light is too dark in dark mode */
}

.god-mode-instruction{
  font-size:.95rem;
  color:var(--text-muted);
  margin:.75rem 0 1.5rem;
  text-align:center;
}
.variant-badge{
  display:inline-block;
  background:var(--secondary-color);
  color:var(--text-darker); /* text-darker on secondary-color */
  font-size:.8rem;
  padding:.15rem .5rem;
  border-radius:9999px;
  margin-left:.5rem;
}
body.dark .variant-badge {
    color: var(--text-light); /* Light text on dark secondary color */
}

.god-mode-buttons {
  display: flex;
  justify-content: center;
  gap: calc(var(--spacing-unit) * 4);
  margin-top: calc(var(--spacing-unit) * 3);
}
.god-mode-buttons .button {
  min-width: 100px;
}
.god-mode-feedback {
    margin-top: calc(var(--spacing-unit) * 2);
    font-size: 1.1em;
    font-weight: bold;
}
.god-mode-feedback.correct { color: var(--success-color); }
.god-mode-feedback.incorrect { color: var(--danger-color); }

.god-mode-correct-answer-reveal {
    margin-top: var(--spacing-unit);
    font-size: 1em;
    color: var(--text-muted);
}
.god-mode-correct-answer-reveal strong {
    color: var(--success-color);
}


/* Review Mode */
.review-container h1 {
    margin-bottom: calc(var(--spacing-unit) * 4);
}
.review-question-item {
    border: 1px solid var(--secondary-color);
    border-radius: var(--radius-sm);
    padding: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 2);
    background-color: var(--surface-color); /* Use surface color */
}
body.dark .review-question-item {
    background-color: hsl(var(--primary-h), var(--primary-s), 12%); /* Slightly different dark shade */
}
.review-question-item h3 {
    font-size: 1.1em;
    text-align: left;
    color: var(--text-darker);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}
.review-answer {
    padding: calc(var(--spacing-unit) * 1.5);
    border-radius: var(--radius-sm);
    margin-top: var(--spacing-unit);
    font-size: 0.95em;
    border-left: 4px solid transparent;
    color: var(--text-darker); /* Default text color */
}
.review-answer strong {
    font-weight: 600;
}

/* Specific Review Answer States - using more descriptive classes */
.review-user-answer.is-correct {
    background-color: hsl(var(--primary-h), var(--primary-s), 92%); /* Lighter primary shade */
    border-left-color: var(--primary-color);
}
.review-user-answer.is-incorrect {
    background-color: hsl(var(--danger-h, 0), var(--danger-s, 90%), 92%); /* Lighter danger shade */
    border-left-color: var(--danger-color);
    /* text-decoration: line-through; */ /* Optional, can be distracting */
}
.review-user-answer.not-answered {
    background-color: var(--secondary-color); /* Use secondary for not answered */
    border-left-color: var(--text-muted);
    font-style: italic;
    color: var(--text-muted);
}
.review-correct-answer-text { /* This is the one that shows the actual correct answer */
    background-color: hsl(var(--success-h, 145), var(--success-s, 63%), 92%); /* Lighter success shade */
    border-left-color: var(--success-color);
    font-weight: 500;
    margin-top: calc(var(--spacing-unit) * 1.5); /* More space if user was wrong or didn't answer */
}

/* Dark mode adjustments for review answers */
body.dark .review-user-answer.is-correct {
    background-color: hsl(var(--primary-h), var(--primary-s), 20%);
    color: var(--text-light);
}
body.dark .review-user-answer.is-incorrect {
    background-color: hsl(var(--danger-h, 0), var(--danger-s, 50%), 20%);
    color: var(--text-light);
}
body.dark .review-user-answer.not-answered {
    background-color: hsl(var(--primary-h), var(--primary-s), 15%);
    color: var(--text-muted);
}
body.dark .review-correct-answer-text {
    background-color: hsl(var(--success-h, 145), var(--success-s, 50%), 20%);
    color: var(--text-light);
}


/* ── Footer container ── */
.app-footer {
  /* Înlocuim culoarea statică cu variabila de fundal a suprafeței */
  background-color: var(--surface-color);
  padding: 1.5rem 0 1rem;
  text-align: center;
  /* Bordura de sus preia o nuanță apropiată text-muted pentru contrast */
  border-top: 1px solid var(--secondary-color);
  /* Scurtă tranziție pentru a anima trecerea */
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* Container centrat pentru footer */
.app-footer .footer-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}
.footer-container a {color:rgb(0, 0, 0);}

/* Stil pentru textul generic din footer (ex: © 2025…) */
.app-footer p {
  margin: 0; 
  /* Preia culoarea textului principal (dark: #e2e8f0, light: #111827) */
  color: var(--text-darker);
  font-size: 0.95rem;
  line-height: 1.4;
}

/* ── Lista de link-uri din footer ── */
.footer-links {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Fiecare element <li> rămâne inline-flex */
.footer-links li {
  display: inline-flex;
  align-items: center;
}

/* Stil pentru link-urile din footer */
.footer-links li a {
  /* Link-urile preiau default culoarea principală, adaptabilă la tema curentă */
  color: var(--primary-color);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.25rem 0.5rem;
  transition: color 0.2s ease, background-color 0.2s ease;
}

/* Hover pentru link-uri */
.footer-links li a:hover {
  /* Dacă ați definit var(--primary-color-hover), acesta va fi folosit atât în light, cât și în dark */
  color: var(--primary-light);
  /* Fundal ușor translucid, adaptabil la orice fundal subiacient */
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

/* Separator între elementele listei; se lasă gol la primul <li> */
.footer-links li + li::before {
  padding: 0 0.5rem;
  /* Preluăm var(--text-muted) pentru separator – are valoare potrivită în light (#6b7280) și în dark (#94a3b8) */
  color: var(--text-muted);
  font-size: 0.8rem;
  display: inline-block;
  vertical-align: middle;
  
}

/* Dacă doriți să micșorați vizibil „•” în dark, puteți ajusta opacitatea: */
body.dark .footer-links li + li::before {
  opacity: 0.8; /* ușoară dezactivare a separatorului */
}

/* În modul solar, puteți ajusta separat dacă este nevoie */
body.theme-solar .footer-links li + li::before {
  opacity: 0.7;
}

/* Theme Toggle Styles (from your initial CSS, verified for new vars) */
.theme-toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(var(--spacing-unit) * 3); /* Adjust positioning */
  width: 42px;
  height: 22px;
  z-index: 25; /* Ensure it's above header content */
}
.theme-toggle input { display: none; }
.theme-toggle .slider {
  position: absolute;
  inset: 0;
  background: var(--secondary-color);
  border-radius: 9999px;
  cursor: pointer;
  /* transition handled globally */
}
.theme-toggle .slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary-color); /* Knob color in light mode */
  /* transition handled globally */
}
.theme-toggle input:checked + .slider {
  background: var(--primary-dark); /* Slider background when "dark" (or active) */
}
.theme-toggle input:checked + .slider::before {
  transform: translateX(20px);
  background: var(--surface-color); /* Knob color when "dark" (or active) */
}
body.dark .theme-toggle .slider { /* Specific for body.dark state */
    background: var(--primary-color); /* Brighter primary for slider track in dark mode */
}
body.dark .theme-toggle .slider::before {
    background: var(--surface-color); /* Knob on dark mode slider */
}
body.dark .theme-toggle input:checked + .slider { /* If toggle is for "light" when in dark mode */
    background: var(--secondary-color);
}
body.dark .theme-toggle input:checked + .slider::before {
    background: var(--primary-color);
}


/* ─────────── Responsive Adjustments ─────────── */
@media (max-width: 768px) {
  .app-header h1          { font-size: 1.5em; }

  .container {
    padding: calc(var(--spacing-unit) * 2);
    margin: var(--spacing-unit) 0 calc(var(--spacing-unit) * 2);
  }

  h1                      { font-size: 1.5em; }   /* contextual */
  h2                      { font-size: 1.2em; }

  .button, button {
    font-size: 0.95em;
    padding: calc(var(--spacing-unit) * 1.2) calc(var(--spacing-unit) * 2);
  }

  .subject-card,
  .mode-card,
  .initial-choice-screen .mode-card {
    padding: calc(var(--spacing-unit) * 2);
  }

  .navigation-buttons .button { min-width: 100px; }

  /* fixed: wrap multiplication in calc() */
  .theme-toggle { right: calc(var(--spacing-unit) * 2); }
}


@media (max-width: 480px) {
  .app-header        { padding: var(--spacing-unit) 0; }
  .app-header h1     { font-size: 1.3em; }

  /* Keep the slider fully visible on tiny screens */
  .theme-toggle{
    top: .5rem;
    right: .5rem;
    transform:none;         /* cancel the 50% translate from desktop */
  }

  /* stack nav buttons */
  .navigation-buttons{
    flex-direction: column;
    gap: var(--spacing-unit);
  }
  .navigation-buttons .button { width: 100%; }

  /* likewise in results view */
  .result-buttons{
    flex-direction: column;
  }
  .result-buttons .button { width: 100%; }

  /* God-mode buttons one per row */
  .god-mode-buttons{
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
  }
  .god-mode-buttons .button{
    font-size: .9em;
    padding: calc(var(--spacing-unit) * 1.5);
    width: 100%;
  }

  /* tighter choice layout */
  .choice{
    padding: calc(var(--spacing-unit) * 1.2);
  }
  .choice input[type="radio"],
  .choice input[type="checkbox"]{
    margin-right: var(--spacing-unit);
    transform: scale(1.1);
  }
}
/* ───────── FORCE NO BULLETS INSIDE FOOTER ───────── */
.app-footer ul {
  list-style: none !important;       /* remove bullets on all ULs inside footer */
  margin: 0 !important;              /* reset any margin on the UL */
  padding: 0 !important;             /* reset any padding on the UL */
}

.app-footer ul li {
  display: inline-flex !important;   /* put items side by side */
  align-items: center !important;    /* vertical‐center their contents */
  margin: 0 !important;              /* remove any default left‐margin */
  padding: 0 !important;             /* remove any default left‐padding */
}

.app-footer ul li::marker {
  content: none !important;          /* even if a marker is re‐enabled, wipe it out */
}
/* FORCE-REMOVE ALL UL BULLETS; place at very end of style.css */

.footer-links,
footer .footer-links,
footer .footer-container .footer-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* --- Modern Subject Card --- */
.subject-cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 25px; /* Increased gap */
  justify-content: center;
  padding: 0 10px; /* Add some horizontal padding to the container */
}

.modern-card {
  background-color: var(--card-background, #fff); /* Define --card-background or default */
  border-radius: 16px; /* More rounded */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07), 0 2px 6px rgba(0,0,0,0.05); /* Refined shadow for depth */
  border: 1px solid var(--card-border-color, #e9ecef); /* Subtle border */
  padding: 25px;
  text-align: center;
  width: clamp(260px, 100%, 300px); /* Responsive width: min, preferred, max */
  min-height: 350px; 
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; -- Let content flow naturally, actions will push to bottom via margin-top: auto */
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

.modern-card:hover {
  transform: translateY(-6px) scale(1.02); /* Slightly more pronounced hover */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0,0,0,0.06);
}

.subject-card-header {
  margin-bottom: 10px;
}
.subject-card-header h3 {
  font-size: 1.5em; /* Adjusted size */
  font-weight: 600;
  color: var(--primary-color);
  margin-top: 0;
  margin-bottom: 5px; /* Space between title and description */
}

.subject-card-description {
  font-size: 0.9em; /* Slightly smaller */
  color: var(--text-color-medium);
  margin-bottom: 20px;
  line-height: 1.4;
  min-height: 40px; /* Help align cards if descriptions vary a lot */
}

.subject-card-progress-section {
  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Circular Progress Badge - Refined --- */
.circular-progress-badge {
  width: 100px; /* Slightly larger badge */
  height: 100px;
  margin-bottom: 12px;
  position: relative; /* For potential inner elements if needed */
}

.circular-chart {
  display: block;
  max-width: 100%;
  max-height: 100%;
  transform: rotate(-90deg); /* Start circle from 12 o'clock */
  transform-origin: 50% 50%;
}

.circular-chart .circle-bg {
  fill: none;
  stroke: var(--progress-track-color, #f0f0f0); /* Lighter track */
  stroke-width: 3.5; /* Adjust thickness */
}

.circular-chart .circle {
  fill: none;
  stroke: var(--primary-color);
  stroke-width: 3.8; /* Slightly thicker than bg */
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); /* Smooth animation for fill */
}
/* Style for when there's no actual progress yet, but we show 0% */
.circular-chart.no-actual-progress .circle {
  stroke: var(--progress-track-color, #f0f0f0); /* Make the progress bar itself same as track or very faint */
   /* stroke-dashoffset: [circumference]; /* Ensures it's empty, set in JS already */
}
.circular-chart.no-actual-progress .percentage-text {
  fill: var(--text-color-light); /* Lighter text for 0% */
}


.circular-chart .percentage-text {
  fill: var(--primary-color);
  font-family: var(--font-family-sans-serif);
  font-size: 0.55em; /* Adjust for new badge size */
  font-weight: 600; /* Slightly less bold */
  text-anchor: middle;
  dominant-baseline: middle; /* Better vertical centering */
  transform: rotate(90deg); /* Counter-rotate text */
  transform-origin: 50% 50%; /* Rotate text around its center */
}


.subject-card-stats-line {
  font-size: 0.8em; /* Smaller */
  color: var(--text-color-medium);
  margin-top: 8px;
}
.subject-card-stats-line strong {
  color: var(--text-color-high);
  font-weight: 600;
}
/* Add this new rule for body.dark */
body.dark .subject-card-stats-line strong {
  color: var(--text-color-medium); /* Use the same color as the non-bold text in dark mode */
}

/* Optional: Add a similar rule for body.theme-solar if you want the same behavior */
body.theme-solar .subject-card-stats-line strong {
  color: var(--text-color-medium); /* Use the same color as the non-bold text in solar mode */
}

/* --- Actions --- */
.subject-card-actions {
  margin-top: auto; /* CRITICAL: Pushes this block to the bottom of the card */
  padding-top: 20px; 
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* Ensure it takes full width for centering button */
}

.subject-card-actions .button-primary.button-large { /* More specific selector */
  width: 90%; /* Wider primary button */
  max-width: 220px; /* Max width for the button */
  padding: 10px 15px; /* Adjusted padding */
  font-size: 0.95em;
  font-weight: 500;
}

.reset-progress-link { /* Styling for the new reset <a> tag */
  font-size: 0.8em;
  color: var(--text-color-light);
  text-decoration: none;
  margin-top: 12px; /* Space above reset link */
  padding: 5px;
  border-radius: var(--border-radius-small);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.reset-progress-link:hover {
  color: var(--danger-color);
  text-decoration: underline;
  /* background-color: rgba(var(--danger-rgb, 220, 53, 69), 0.1); Optional subtle hover background */
}

.screen-main-title {
  text-align: center;
  margin-bottom: 30px; /* More space below main title */
  color: var(--primary-color); /* Or your desired title color */
}