/* Inkeer 2.0 — tokens (nacht & amber) + nieuwe componenten */
:root {
  --bg: #131626; --bg-soft: #1B1F33; --bg-card: #1F2439; --bg-2: #262C46; --line: #2C3150;
  --gold: #E0A44B; --gold-soft: #9C7A3E; --gold-wash: rgba(224,164,75,0.14);
  --text: #EFE7D6; --text-dim: #A9A493; --text-faint: #6F6C62;
  --danger: #D0745A; --danger-wash: rgba(208,116,90,0.16); --ok: #7FA57A; --ok-wash: rgba(127,165,122,0.16); --rec: #D0745A;
  --mist: #8B97E0; --mist-wash: rgba(139,151,224,0.14);
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #F5F0E6; --bg-soft: #EEE7D8; --bg-card: #FFFDF8; --bg-2: #E6DECB; --line: #D9D0BD;
  --gold: #B97B22; --gold-soft: #D2A25A; --gold-wash: rgba(185,123,34,0.14);
  --text: #1E2130; --text-dim: #5E5A50; --text-faint: #9A948A;
  --danger: #B0503A; --danger-wash: rgba(176,80,58,0.14); --ok: #4E7D4A; --ok-wash: rgba(78,125,74,0.14); --rec: #B0503A;
  --mist: #5462B8; --mist-wash: rgba(84,98,184,0.12);
  --shadow: 0 10px 30px rgba(60,50,30,0.12);
  color-scheme: light;
}
.mono { font-family: 'JetBrains Mono', Consolas, monospace; }
.eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.hidden { display: none !important; }
button.btn.big { padding: 0.9rem 1.2rem; font-size: 1.05rem; border-radius: 12px; width: 100%; font-family: 'Fraunces', serif; font-weight: 600; }
button.btn.big small { display: block; font-family: 'JetBrains Mono', monospace; font-weight: 400; font-size: 0.66rem; letter-spacing: 0.08em; opacity: 0.75; margin-top: 2px; }
.btn.ok { background: var(--ok); color: var(--bg); border: none; }
.btn.warn { background: var(--danger); color: white; border: none; }
nav.tabs button { min-width: 3.6rem; }
nav.tabs button .ic { font-size: 1.15rem; }

/* Home */
.home-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.streak { display: flex; gap: 0.9rem; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--text-dim); }
.streak b { color: var(--gold); font-weight: 500; }
.flame { width: 11px; height: 15px; background: var(--gold); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; display: inline-block; vertical-align: -2px; margin-right: 0.35rem; }
.goal { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 1rem; margin-bottom: 1rem; }
.goal .row-t { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--text-dim); }
.goal .bar { height: 8px; background: var(--bg-2); border-radius: 4px; margin-top: 0.5rem; overflow: hidden; }
.goal .bar i { display: block; height: 100%; background: var(--gold); border-radius: 4px; transition: width 0.4s ease; }
.path { display: flex; flex-direction: column; gap: 0.7rem; margin: 1rem 0 1.4rem; }
.node { display: flex; align-items: center; gap: 0.9rem; background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; padding: 0.7rem 0.9rem; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.node:hover { border-color: var(--gold-soft); }
.node.active { border-color: var(--gold); }
.node.locked { opacity: 0.55; }
.ring { width: 56px; height: 56px; position: relative; flex-shrink: 0; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 56px; height: 56px; transform: rotate(-90deg); }
.ring svg circle { fill: none; stroke-width: 4.5; }
.ring .core { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-2); display: grid; place-items: center; font-family: 'Fraunces', serif; font-size: 1rem; color: var(--text); z-index: 1; }
.node .t { flex: 1; min-width: 0; }
.node .t .title { font-weight: 500; line-height: 1.25; }
.node .t small { display: block; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.05em; margin-top: 0.2rem; }
.node .badge-due { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--danger); border: 1px solid var(--danger); border-radius: 999px; padding: 0.15rem 0.5rem; white-space: nowrap; }
.node .badge-ok { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--ok); border: 1px solid var(--ok); border-radius: 999px; padding: 0.15rem 0.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.18rem 0.5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--text-dim); }
.chip.nieuw { color: var(--mist); border-color: var(--mist); }
.chip.leren { color: var(--gold); border-color: var(--gold-soft); }
.chip.moeilijk { color: var(--danger); border-color: var(--danger); }
.chip.vertrouwd { color: var(--ok); border-color: var(--ok); opacity: 0.85; }
.chip.sterk { color: var(--bg); background: var(--ok); border-color: var(--ok); }
.chip.type { color: var(--text-faint); }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 1rem 0; }
.stat-row > div { background: var(--bg-card); padding: 0.7rem 0.9rem; }
.stat-row .n { font-family: 'Fraunces', serif; font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-row .l { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.25rem; }

/* Sessie */
.sess-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; }
.sess-head .prog { flex: 1; height: 8px; background: var(--bg-2); border-radius: 4px; overflow: hidden; }
.sess-head .prog i { display: block; height: 100%; background: var(--gold); border-radius: 4px; transition: width 0.3s ease; }
.sess-head .cnt { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--text-dim); }
.xcard { background: var(--bg-card); border: 1px solid var(--line); border-radius: 16px; padding: 1.2rem 1.2rem 1rem; box-shadow: var(--shadow); animation: fade 0.25s ease; }
.xcard .kind { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; }
.xcard .kind .src { color: var(--text-faint); font-size: 0.75rem; font-style: italic; text-align: right; max-width: 60%; }
.xcard h3.term { font-size: 1.5rem; color: var(--gold); margin: 0 0 0.5rem; }
.xcard .explain { font-size: 1.05rem; line-height: 1.6; }
.xcard ul.kp { margin: 0.6rem 0 0; padding-left: 1.1rem; color: var(--text-dim); }
.xcard ul.kp li { margin: 0.2rem 0; }
.reveal { margin-top: 0.8rem; }
.opts { display: grid; gap: 0.5rem; margin: 0.8rem 0; }
.opt { text-align: left; background: var(--bg-soft); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 0.75rem 0.9rem; font-family: inherit; font-size: 1rem; cursor: pointer; line-height: 1.4; }
.opt:hover { border-color: var(--gold-soft); }
.opt.correct { border-color: var(--ok); background: var(--ok-wash); }
.opt.wrong { border-color: var(--danger); background: var(--danger-wash); }
.opt:disabled { cursor: default; }
.order-list { display: grid; gap: 0.4rem; margin: 0.8rem 0; }
.order-list .opt { display: flex; gap: 0.6rem; align-items: center; }
.order-list .opt .n { font-family: 'Fraunces', serif; color: var(--gold); min-width: 1.4rem; }
.grade-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin-top: 1rem; }
.grade-row button { border-radius: 10px; padding: 0.7rem 0.3rem; font-family: inherit; font-size: 0.9rem; cursor: pointer; border: 1px solid var(--line); background: var(--bg-soft); color: var(--text); }
.grade-row button small { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.06em; color: var(--text-faint); margin-top: 2px; }
.grade-row button.g1 { border-color: var(--danger); } .grade-row button.g2 { border-color: var(--gold-soft); } .grade-row button.g3 { border-color: var(--ok); } .grade-row button.g4 { border-color: var(--ok); background: var(--ok-wash); }
.grade-row button.suggest { box-shadow: 0 0 0 2px var(--gold); }
.speak-text { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; font-size: 1.15rem; line-height: 1.85; white-space: pre-wrap; }
.speak-ctx { color: var(--text-dim); font-size: 0.9rem; margin: 0.4rem 0 0.6rem; }
.focus-chips { margin: 0.4rem 0 0.8rem; }
.recorder { display: flex; align-items: center; gap: 0.8rem; margin: 0.8rem 0; }
.recorder .rbtn { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--rec); background: transparent; color: var(--rec); font-size: 1.4rem; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.recorder .rbtn.on { background: var(--rec); color: white; animation: pulse 1.4s ease-in-out infinite; }
.recorder .rinfo { flex: 1; }
.recorder .timer { font-family: 'Fraunces', serif; font-size: 1.2rem; }
.recorder .hint { color: var(--text-dim); font-size: 0.85rem; }
.recorder .vu { height: 6px; background: var(--bg-2); border-radius: 3px; overflow: hidden; margin-top: 0.4rem; }
.recorder .vu i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ok), var(--gold), var(--rec)); transition: width 0.08s; }
.breath-ring { width: 64px; height: 64px; }
.busy { color: var(--text-dim); font-style: italic; padding: 0.6rem 0; }

/* Feedbackkaart */
.fb { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; margin-top: 0.9rem; }
.fb .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.6rem; gap: 0.6rem; }
.fb .head b { font-family: 'Fraunces', serif; font-weight: 500; }
.fb .head span { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--text-dim); }
.meter { display: grid; grid-template-columns: 7.6rem 1fr 4.6rem; gap: 0.6rem; align-items: center; padding: 0.42rem 0; border-top: 1px dashed var(--line); font-size: 0.9rem; }
.meter:first-of-type { border-top: none; }
.meter .track { height: 8px; background: var(--bg-2); border-radius: 4px; position: relative; }
.meter .zone { position: absolute; top: 0; bottom: 0; background: var(--ok-wash); border-left: 1px solid var(--ok); border-right: 1px solid var(--ok); }
.meter .val { position: absolute; top: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); transform: translateX(-50%); }
.meter .val.bad { background: var(--danger); }
.meter .val.good { background: var(--ok); }
.meter .num { font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; }
.fb .tip { margin-top: 0.8rem; padding: 0.7rem 0.9rem; background: var(--gold-wash); border-radius: 10px; font-size: 0.95rem; }
.fb .tip b { color: var(--gold); font-weight: 500; }
.fb .good { color: var(--ok); font-size: 0.95rem; margin: 0.5rem 0 0; }
.fb .good li { margin: 0.15rem 0; }
.fb .transcript { margin-top: 0.7rem; font-size: 0.9rem; color: var(--text-dim); line-height: 1.6; }
.fb .transcript .diff-view { font-size: 0.95rem; max-height: 30vh; }
.fb details summary { cursor: pointer; color: var(--text-dim); font-size: 0.85rem; }
.timeline { display: block; width: 100%; height: 58px; margin: 0.4rem 0 0.2rem; }
.own-words { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.8rem; }
.own-words input { flex: 1; min-width: 12rem; margin: 0; }
.variant-note { color: var(--mist); font-size: 0.85rem; margin-top: 0.3rem; }
.free-answer textarea { min-height: 90px; }
.model-answer { background: var(--bg-soft); border-left: 3px solid var(--gold-soft); padding: 0.6rem 0.9rem; border-radius: 0 8px 8px 0; margin-top: 0.7rem; white-space: pre-wrap; line-height: 1.6; }
.principles { color: var(--text-dim); font-size: 0.9rem; margin: 0.4rem 0; }
.crit { display: flex; gap: 0.4rem; align-items: center; font-size: 0.9rem; color: var(--text-dim); }
.crit.ok::before { content: "✓"; color: var(--ok); } .crit.no::before { content: "○"; color: var(--danger); }

/* Sessie-einde */
.done-card { text-align: center; padding: 2rem 1rem; }
.done-card .big { font-family: 'Fraunces', serif; font-size: 2.4rem; color: var(--gold); }
.done-card p { color: var(--text-dim); }

/* Leerpad-unit detail */
.item-row { display: flex; gap: 0.7rem; align-items: center; padding: 0.55rem 0; border-top: 1px dashed var(--line); }
.item-row:first-child { border-top: none; }
.item-row .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
.item-row .txt small { color: var(--text-faint); }
.trend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin: 0.8rem 0; }
.trend .tcard { background: var(--bg-card); border: 1px solid var(--line); border-radius: 10px; padding: 0.6rem 0.8rem; }
.trend .tcard .l { color: var(--text-dim); font-size: 0.75rem; }
.trend .tcard svg { width: 100%; height: 36px; display: block; }
.knowledge-list .item-row { cursor: pointer; }
.md { line-height: 1.65; }
.md h1, .md h2, .md h3 { color: var(--gold); margin: 1.2rem 0 0.4rem; }
.md ul { padding-left: 1.2rem; }
.md code { font-size: 0.85em; }
@media (max-width: 600px) { .meter { grid-template-columns: 6.2rem 1fr 4.2rem; font-size: 0.85rem; } .stat-row .n { font-size: 1.3rem; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Lagen */
.layers { display: grid; gap: 0.5rem; margin: 0.8rem 0 0.4rem; }
.layer { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: 0.8rem; align-items: center; background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem 0.9rem; cursor: pointer; }
.layer.current { border-color: var(--gold); }
.layer.done { border-color: var(--ok); }
.layer.locked { opacity: 0.55; cursor: default; }
.layer .lnum { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--bg-2); display: grid; place-items: center; font-family: 'Fraunces', serif; color: var(--gold); }
.layer.done .lnum { background: var(--ok); color: var(--bg); }
.layer .ltitle { font-weight: 500; }
.layer .ldesc { color: var(--text-dim); font-size: 0.88rem; margin-top: 0.1rem; }
.layer .lbar { height: 5px; background: var(--bg-2); border-radius: 3px; margin: 0.4rem 0 0.2rem; overflow: hidden; }
.layer .lbar i { display: block; height: 100%; background: var(--gold); border-radius: 3px; }
.layer.done .lbar i { background: var(--ok); }
.layer small { color: var(--text-faint); font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.04em; }
.focus-card { cursor: pointer; border-color: var(--gold-soft); }
.ldots { display: flex; gap: 0.35rem; margin-top: 0.4rem; }
.ldot { width: 22px; height: 6px; border-radius: 3px; background: var(--bg-2); }
.ldot.done { background: var(--ok); } .ldot.current { background: var(--gold); } .ldot.locked { opacity: 0.5; }
.sim-ref { margin: 0.4rem 0 0.6rem; }
.sim-ref details { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 0.4rem 0.7rem; margin-bottom: 0.3rem; }
.sim-ref summary { cursor: pointer; color: var(--gold); font-weight: 500; }
.sim-ref .script-pre { max-height: 32vh; font-size: 1rem; margin-top: 0.4rem; }