:root { --brand: #6366f1; }
* { -webkit-tap-highlight-color: transparent; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* Flashcard flip */
.card-flip { perspective: 1000px; }
.card-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform 0.5s; transform-style: preserve-3d;
}
.card-inner.flipped { transform: rotateY(180deg); }
.card-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; border-radius: 1rem; text-align: center;
  font-size: 0.875rem; line-height: 1.4;
  overflow: hidden;
}
.card-back { transform: rotateY(180deg); }

/* Spinner */
.spinner {
  width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.4);
  border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite;
  display: inline-block; vertical-align: middle;
}
.spinner-dark { border-color: rgba(99,102,241,.3); border-top-color: var(--brand); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Fade in */
.fade-in { animation: fade .4s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px);} to {opacity:1;transform:none;} }

/* Scan ring for camera verification */
.scan-ring { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:.5;transform:scale(1);} 50%{opacity:1;transform:scale(1.03);} }

textarea, input, select { outline: none; }
.checkbox-robot { transition: all .2s; }

/* ======= QUIZ DARK MODE (matching screenshot) ======= */
.quiz-dark-mode {
  background: #1a1a2e;
  color: #e0e0e0;
}

.quiz-dark-mode .quiz-option {
  transition: all 0.2s ease;
}

.quiz-dark-mode .quiz-option:hover {
  border-color: #6366f1;
  background: #1e1e3a;
}

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar { width: 6px; }
.dark ::-webkit-scrollbar-track { background: #1f2937; }
.dark ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 3px; }

/* Smooth transitions for theme switch */
body, header, nav, main, section, article, div, button {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Bottom nav safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  nav.fixed.bottom-0 {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ======= LIGHT THEME (no dark backgrounds, black readable text) ======= */
html:not(.dark), html:not(.dark) body {
  background-color: #f1f2f4; /* light gray (replaces the old #111827 dark bg) */
  color: #111111;
  color-scheme: light;
}
html.dark, html.dark body { background-color: #111827; color: #f3f4f6; color-scheme: dark; }

/* ======= QUIZ-ONLY PAGE (layout matches the reference screenshot) ======= */
.qz { --qz-bg:#f1f2f4; --qz-card:#ffffff; --qz-card-border:#e5e7eb; --qz-text:#111111; --qz-muted:#4b5563;
      --qz-track:#d1d5db; --qz-fill:#6b7280; --qz-knob:#ffffff; --qz-back:#e5e7eb; --qz-back-text:#111111; }
html.dark .qz { --qz-bg:#1f1f1f; --qz-card:#141414; --qz-card-border:#141414; --qz-text:#f3f4f6; --qz-muted:#d1d5db;
      --qz-track:#111111; --qz-fill:#d1d5db; --qz-knob:#1f1f1f; --qz-back:#111111; --qz-back-text:#f3f4f6; }
.qz { background: var(--qz-bg); color: var(--qz-text); min-height: 100vh; }
.qz-card { background: var(--qz-card); border: 1px solid var(--qz-card-border); color: var(--qz-text); }
.qz-muted { color: var(--qz-muted); }
.qz-track { background: var(--qz-track); }
.qz-fill { background: var(--qz-fill); }
.qz-knob { background: var(--qz-knob); border: 2px solid var(--qz-fill); }
.qz-back { background: var(--qz-back); color: var(--qz-back-text); }
.qz-opt { transition: border-color .15s ease, background-color .15s ease; }
.qz-opt:not([disabled]):hover { border-color: #6366f1; }
.qz-pill-wrong { background:#f87171; color:#3b0a0a; }
.qz-pill-right { background:#86efac; color:#052e14; }
.qz-badge-right { background:#86efac; color:#052e14; }
.qz-badge-wrong { background:#f87171; color:#3b0a0a; }

/* Light theme: make faint/light gray text readable (near black) */
html:not(.dark) .text-slate-300, html:not(.dark) .text-slate-400, html:not(.dark) .text-slate-500,
html:not(.dark) .text-gray-300, html:not(.dark) .text-gray-400, html:not(.dark) .text-gray-500 { color: #374151 !important; }
html:not(.dark) .text-slate-600, html:not(.dark) .text-slate-700, html:not(.dark) .text-slate-800,
html:not(.dark) .text-gray-600, html:not(.dark) .text-gray-700 { color: #111111 !important; }
html:not(.dark) input::placeholder, html:not(.dark) textarea::placeholder { color: #6b7280; }
/* keep white text on colored buttons / badges */
html:not(.dark) .bg-indigo-600 .text-slate-400 { color: inherit !important; }