:root {
  --accent: 15 118 110;
  --accent-strong: 13 148 136;
  --accent-soft: 204 251 241;
  --font-scale: 1;
}

html { font-size: calc(16px * var(--font-scale)); }
body { text-rendering: optimizeLegibility; }
body.vehicle-car { --accent: 37 99 235; --accent-strong: 59 130 246; --accent-soft: 219 234 254; }
body.vehicle-moto { --accent: 234 88 12; --accent-strong: 249 115 22; --accent-soft: 255 237 213; }

.text-accent { color: rgb(var(--accent)); }
.bg-accent { background-color: rgb(var(--accent)); }
.bg-accent-soft { background-color: rgb(var(--accent-soft)); }
.border-accent { border-color: rgb(var(--accent)); }
.gradient-accent { background: linear-gradient(135deg, rgb(var(--accent)), rgb(var(--accent-strong))); }
.hover-accent:hover { background-color: rgb(var(--accent-strong)); }

.card {
  border: 1px solid rgb(226 232 240);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
}

.dark .card { border-color: rgb(51 65 85); background: rgba(15, 23, 42, .94); }
.glass { background: rgba(255, 255, 255, .84); backdrop-filter: blur(18px); }
.dark .glass { background: rgba(2, 6, 23, .84); }

.app-section { animation: sectionIn .35s ease both; }
.option-btn { transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.option-btn:hover:not(:disabled) { transform: translateY(-2px); border-color: rgb(var(--accent)); box-shadow: 0 12px 30px rgba(15, 23, 42, .08); }
.option-btn.selected { border-color: rgb(var(--accent)); background: rgb(var(--accent-soft)); }
.dark .option-btn.selected { background: rgba(var(--accent), .18); }
.option-btn.correct { border-color: rgb(22 163 74); background: rgb(220 252 231); color: rgb(20 83 45); }
.dark .option-btn.correct { background: rgba(22, 163, 74, .18); color: rgb(187 247 208); }
.option-btn.incorrect { border-color: rgb(220 38 38); background: rgb(254 226 226); color: rgb(127 29 29); }
.dark .option-btn.incorrect { background: rgba(220, 38, 38, .18); color: rgb(254 202 202); }

.mode-tab.active { background: rgb(var(--accent)); color: white; box-shadow: 0 8px 24px rgba(var(--accent), .24); }
.footer-link { color: rgb(71 85 105); transition: color .18s ease, transform .18s ease; }
.footer-link:hover { color: rgb(var(--accent)); transform: translateX(2px); }
.dark .footer-link { color: rgb(148 163 184); }
.dark .footer-link:hover { color: rgb(var(--accent-strong)); }

.skip-link {
  position: fixed;
  left: .75rem;
  top: .75rem;
  z-index: 130;
  transform: translateY(-6rem);
  border-radius: .75rem;
  background: white;
  padding: .65rem 1rem;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }
.dark .skip-link { background: rgb(15 23 42); color: white; }

.ad-placeholder {
  display: grid;
  min-height: 90px;
  place-items: center;
  border: 1px dashed rgb(203 213 225);
  border-radius: 1rem;
  color: rgb(148 163 184);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.manual-sidebar { scrollbar-width: thin; }
.manual-chapter[open] > summary .chapter-chevron { transform: rotate(180deg); }
.manual-chapter summary::-webkit-details-marker { display: none; }
.chapter-chevron { transition: transform .2s ease; }

.progress-track { overflow: hidden; background: rgb(226 232 240); }
.dark .progress-track { background: rgb(51 65 85); }
.progress-fill { height: 100%; background: linear-gradient(90deg, rgb(var(--accent)), rgb(var(--accent-strong))); transition: width .3s ease; }

.timer-danger { color: rgb(220 38 38); animation: timerPulse .7s ease-in-out infinite alternate; }
.pulse-ring { animation: pulseRing 1.8s ease-out infinite; }
.skeleton { background: linear-gradient(90deg, rgba(148, 163, 184, .15), rgba(148, 163, 184, .35), rgba(148, 163, 184, .15)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }

.high-contrast { filter: contrast(1.18) saturate(1.1); }
.high-contrast .card,
.high-contrast button,
.high-contrast input,
.high-contrast select,
.high-contrast details { border-width: 2px !important; }
.high-contrast .text-slate-500,
.high-contrast .text-slate-600,
.high-contrast .dark\:text-slate-400 { color: currentColor !important; opacity: .92; }

.focusable:focus-visible,
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible { outline: 3px solid rgb(var(--accent)); outline-offset: 3px; }

.toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  max-width: min(24rem, calc(100vw - 2rem));
  border-radius: 1rem;
  padding: .9rem 1rem;
  background: rgb(15 23 42);
  color: white;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .25);
  animation: toastIn .25s ease both;
}

@keyframes sectionIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulseRing { 0% { transform: scale(.9); opacity: .65; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes timerPulse { to { transform: scale(1.08); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 767px) {
  .manual-sidebar { max-height: 17rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}