body { margin: 0; background: #FAF6EC; }

#lucas-app {
  --paper: #FAF6EC;
  --paper-line: #E4DCC8;
  --ink: #26241E;
  --ink-soft: #6B6455;
  --highlight: #FFE066;
  --underline: #2B6CB0;
  --circle: #E0483A;
  --gold: #C98A2E;
  --good: #2F9E5A;
  --bad: #D6483C;
  --card: #FFFFFF;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--paper);
  background-image: repeating-linear-gradient(var(--paper) 0px, var(--paper) 37px, var(--paper-line) 38px);
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  line-height: 1.55;
  min-height: 100vh;
}
#lucas-app * { box-sizing: border-box; }

.header { background: var(--ink); color: var(--paper); padding: 22px 24px 26px; position: relative; overflow: hidden; }
.header .eyebrow { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #D8B978; font-weight: 700; margin-bottom: 6px; }
.header h1 { font-size: 24px; margin: 0; font-weight: 800; line-height: 1.25; }
.bolt { position: absolute; right: -10px; top: -10px; font-size: 120px; opacity: 0.08; transform: rotate(12deg); }

.progress-bar { display: flex; gap: 6px; padding: 14px 24px; background: var(--paper); border-bottom: 2px solid var(--paper-line); position: sticky; top: 0; z-index: 5; }
.progress-seg { flex: 1; height: 8px; border-radius: 4px; background: #E4DCC8; transition: background 0.25s ease; }
.progress-seg.done { background: var(--good); }

.section { padding: 22px 24px; border-bottom: 1px dashed var(--paper-line); }
.section-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }

.intro-card { background: var(--card); border: 2px solid var(--paper-line); border-radius: 10px; padding: 16px; }
.mode-toggle { display: flex; gap: 8px; margin-bottom: 12px; }
.mode-btn { flex: 1; padding: 9px; border-radius: 8px; border: 2px solid var(--paper-line); background: var(--paper); font-weight: 700; font-size: 13.5px; cursor: pointer; color: var(--ink-soft); }
.mode-btn.active[data-mode="oorzaak"] { border-color: var(--underline); color: var(--underline); background: #EAF1FA; }
.mode-btn.active[data-mode="gevolg"] { border-color: var(--circle); color: var(--circle); background: #FBEAE8; }

.tap-sentence, .tap-word { cursor: pointer; border-radius: 3px; padding: 1px 1px; }
.stijl-onderstreep { text-decoration: underline; text-decoration-color: var(--underline); text-decoration-thickness: 3px; }
.stijl-omcirkel { box-shadow: 0 0 0 2px var(--circle); border-radius: 10px; }
.stijl-markeer { background: var(--highlight); border-radius: 3px; }

.vink-lijst { display: flex; flex-direction: column; gap: 8px; }
.vink-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 2px solid var(--paper-line); border-radius: 8px; cursor: pointer; background: var(--paper); }
.vink-item.aangevinkt { border-color: var(--good); background: #E6F6EC; }
.vink-box { flex: none; width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--paper-line); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; background: var(--card); }
.vink-item.aangevinkt .vink-box { border-color: var(--good); color: var(--good); }
.vink-tekst { font-size: 14.5px; }

.main-text p { margin: 0 0 14px; font-size: 15.5px; }
.tap-sentence.selected { background: var(--highlight); }
.tap-sentence:hover { background: #F1EAD4; }

.vocab-card { background: var(--card); border-left: 4px solid var(--gold); border-radius: 6px; padding: 10px 14px; margin-bottom: 10px; }
.vocab-card b { color: var(--gold); }

.question { background: var(--card); border: 2px solid var(--paper-line); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.question .qnum { display: inline-block; background: var(--ink); color: var(--paper); width: 24px; height: 24px; border-radius: 50%; text-align: center; line-height: 24px; font-weight: 800; font-size: 13px; margin-right: 8px; }
.qtext { font-weight: 700; font-size: 15px; }
.qhint { color: var(--ink-soft); font-size: 13px; margin: 6px 0 10px; }

.option { display: block; width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 8px; border: 2px solid var(--paper-line); border-radius: 8px; background: var(--paper); font-size: 14.5px; cursor: pointer; color: var(--ink); }
.option.picked { border-color: var(--ink); background: #EFEADA; }
.option.correct { border-color: var(--good); background: #E6F6EC; font-weight: 700; }
.option.incorrect { border-color: var(--bad); background: #FBEAE8; }

textarea, input[type=text] { width: 100%; border: 2px solid var(--paper-line); border-radius: 8px; padding: 9px 10px; font-size: 14.5px; font-family: inherit; background: var(--paper); }

.wist-card { background: #FFF6DD; border: 2px solid #EAD68A; border-radius: 10px; padding: 14px 16px; font-size: 14.5px; }

.check-bar { padding: 20px 24px 28px; text-align: center; }
.check-btn { background: var(--ink); color: var(--paper); border: none; padding: 13px 28px; border-radius: 999px; font-weight: 800; font-size: 15px; cursor: pointer; }
.check-btn:active { transform: scale(0.98); }
.result-msg { margin-top: 12px; font-weight: 700; font-size: 15px; }

/* Evaluatie per vraag */
.eval-box { margin-top: 12px; padding: 12px 14px; border-radius: 8px; font-size: 13.5px; }
.eval-box.eval-ok { background: #E6F6EC; border: 1px solid #BFE6CC; }
.eval-box.eval-fout { background: #FBEAE8; border: 1px solid #F0C4BE; }
.eval-badge { font-weight: 800; margin-bottom: 6px; font-size: 13px; }
.eval-row { margin-bottom: 4px; }
.eval-uitleg { color: var(--ink-soft); font-style: italic; margin-top: 6px; }
.correct-answer-sentence { box-shadow: 0 0 0 2px var(--good); border-radius: 4px; background: #E6F6EC; }

/* Samenvatting na afronden */
.summary-section { background: #FDFBF5; }
.summary-card { background: var(--card); border: 2px solid var(--gold); border-radius: 12px; padding: 18px; }
.summary-score { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.summary-msg { color: var(--ink-soft); font-size: 14px; margin-bottom: 14px; }
.skill-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-chip { padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.skill-chip.skill-ok { background: #E6F6EC; color: var(--good); }
.skill-chip.skill-fout { background: #FBEAE8; color: var(--bad); }

.nav-link { color: var(--ink-soft); font-size: 13px; text-decoration: none; font-weight: 600; }
.nav-link:hover { color: var(--ink); }

/* Overzichtspagina */
.overview { max-width: 760px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #26241E; }
.overview-header { background: #26241E; color: #FAF6EC; padding: 26px 24px; }
.overview-header h1 { margin: 0 0 4px; font-size: 22px; }
.overview-header p { margin: 0; color: #B9B2A0; font-size: 13.5px; }
.niveau-group { padding: 18px 24px 6px; }
.niveau-group h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: #C98A2E; margin: 0 0 10px; }
.les-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: #26241E; }
.les-row:hover { background: #F1EAD4; }
.les-num { width: 30px; height: 30px; flex: none; border-radius: 50%; background: #26241E; color: #FAF6EC; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12.5px; }
.les-onderwerp { font-size: 14.5px; flex: 1; }
.les-score { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); flex: none; }

/* Voortgangspagina */
.progress-empty { padding: 40px 24px; text-align: center; color: var(--ink-soft); }
.progress-table { padding: 8px 24px 24px; }
.progress-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; background: var(--card); border: 1px solid var(--paper-line); margin-bottom: 8px; }
.progress-row .les-num { background: var(--gold); }
.progress-meta { flex: 1; }
.progress-meta .titel { font-weight: 700; font-size: 14px; }
.progress-meta .datum { font-size: 12px; color: var(--ink-soft); }
.progress-score { font-weight: 800; font-size: 15px; flex: none; }
.progress-score.hoog { color: var(--good); }
.progress-score.laag { color: var(--bad); }
.skill-summary { padding: 18px 24px; }
.skill-summary h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold); margin: 0 0 10px; }
.skill-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13.5px; }
.skill-bar-label { flex: none; width: 220px; }
.skill-bar-track { flex: 1; height: 10px; background: var(--paper-line); border-radius: 5px; overflow: hidden; }
.skill-bar-fill { height: 100%; background: var(--good); }
.skill-bar-fill.zwak { background: var(--bad); }
.skill-bar-pct { flex: none; width: 40px; text-align: right; color: var(--ink-soft); font-size: 12.5px; }