:root {
  --groen: #009c3b;
  --geel: #ffdf00;
  --blauw: #002776;
  --donker: #1a1a2e;
  --kaart: #16213e;
  --tekst: #e8e8f0;
  --subtekst: #a0a0c0;
  --rand: #2a2a4a;
  --succes: #00c853;
  --fout: #ff3d00;
  --accent: #7c4dff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: var(--donker);
  color: var(--tekst);
  min-height: 100vh;
}

/* Nav */
nav {
  background: var(--kaart);
  border-bottom: 2px solid var(--groen);
  padding: 0 20px;
  display: flex;
  align-items: center;
  height: 56px;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 100;
}

nav .logo {
  font-weight: 700;
  color: var(--groen);
  font-size: 18px;
  margin-right: 16px;
  text-decoration: none;
  white-space: nowrap;
}

nav a {
  color: var(--subtekst);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  transition: all .2s;
}

nav a:hover, nav a.actief {
  background: var(--groen);
  color: white;
}

/* Container */
.container {
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 20px;
}

h1 { font-size: 26px; margin-bottom: 8px; color: var(--geel); }
h2 { font-size: 20px; margin-bottom: 12px; color: var(--tekst); }
p { color: var(--subtekst); line-height: 1.6; margin-bottom: 12px; }

/* Kaarten */
.kaart {
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

/* Knoppen */
.knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: all .2s;
}

.knop-primair { background: var(--groen); color: white; }
.knop-primair:hover { background: #00b347; }
.knop-secundair { background: var(--rand); color: var(--tekst); }
.knop-secundair:hover { background: #3a3a5a; }
.knop-geel { background: var(--geel); color: #000; }
.knop-geel:hover { background: #ffe040; }
.knop-rood { background: var(--fout); color: white; }
.knop-rood:hover { background: #ff5722; }
.knop-groot { padding: 14px 28px; font-size: 17px; }
.knop:disabled { opacity: .5; cursor: not-allowed; }

/* Input */
.invoer {
  width: 100%;
  background: var(--rand);
  border: 1px solid #3a3a5a;
  border-radius: 8px;
  color: var(--tekst);
  padding: 10px 14px;
  font-size: 15px;
  outline: none;
  transition: border-color .2s;
}
.invoer:focus { border-color: var(--groen); }

/* Gespreksbel */
.bericht-rij { display: flex; gap: 10px; margin-bottom: 14px; }
.bericht-rij.gebruiker { flex-direction: row-reverse; }
.bel {
  max-width: 72%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.5;
}
.bericht-rij.ai .bel { background: var(--kaart); border: 1px solid var(--rand); }
.bericht-rij.gebruiker .bel { background: var(--groen); color: white; }

.correctie {
  background: #3a2a00;
  border: 1px solid var(--geel);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--geel);
  margin-top: 6px;
  max-width: 72%;
}

/* Microfoon */
.mic-knop {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--rand);
  color: var(--tekst);
  font-size: 20px;
  cursor: pointer;
  transition: all .2s;
  display: flex; align-items: center; justify-content: center;
}
.mic-knop.actief { background: var(--fout); animation: pulseer 1s infinite; }
.mic-knop:hover { background: var(--groen); }

@keyframes pulseer {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Voortgangsbalk */
.balk-container { background: var(--rand); border-radius: 8px; height: 10px; overflow: hidden; }
.balk { height: 100%; border-radius: 8px; transition: width .5s; background: var(--groen); }
.balk.geel { background: var(--geel); }
.balk.rood { background: var(--fout); }

/* Badge niveau */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}
.badge-groen { background: #00c85333; color: var(--succes); }
.badge-geel { background: #ffdf0033; color: var(--geel); }
.badge-blauw { background: #7c4dff33; color: #b39ddb; }

/* Raster */
.raster { display: grid; gap: 16px; }
.raster-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.raster-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Laadspinner */
.laad {
  display: inline-block;
  width: 20px; height: 20px;
  border: 3px solid var(--rand);
  border-top-color: var(--groen);
  border-radius: 50%;
  animation: draai .8s linear infinite;
}
@keyframes draai { to { transform: rotate(360deg); } }

/* Flashcard flip */
.fc-scene { perspective: 800px; width: 100%; max-width: 480px; height: 240px; margin: 0 auto; cursor: pointer; }
.fc-kaart { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform .5s; }
.fc-kaart.omgedraaid { transform: rotateY(180deg); }
.fc-voor, .fc-achter {
  position: absolute; width: 100%; height: 100%;
  background: var(--kaart);
  border: 2px solid var(--rand);
  border-radius: 16px;
  backface-visibility: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 20px; text-align: center;
}
.fc-achter { transform: rotateY(180deg); background: #0a2a18; border-color: var(--groen); }

/* Score ring */
.score-ring {
  width: 80px; height: 80px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700;
  border: 4px solid var(--groen);
}

/* Audio speler */
.audio-knop {
  background: none;
  border: 1px solid var(--groen);
  color: var(--groen);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 13px;
}
.audio-knop:hover { background: var(--groen); color: white; }

/* Melding */
.melding {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 14px;
}
.melding-succes { background: #00c85322; border: 1px solid var(--succes); color: var(--succes); }
.melding-fout { background: #ff3d0022; border: 1px solid var(--fout); color: #ff7043; }
.melding-info { background: #7c4dff22; border: 1px solid var(--accent); color: #b39ddb; }

/* Verborgen */
.verborgen { display: none !important; }

/* Mobiel */
@media (max-width: 600px) {
  nav a span { display: none; }
  nav a { padding: 6px 8px; }
  .container { padding: 20px 12px; }
  h1 { font-size: 22px; }
}