:root{
  --blue:#005c7e; --blue2:#0a7ca6; --green:#65ba7c; --green-d:#00785d;
  --ink:#1f2a30; --muted:#6b7c84; --bg:#eef3f5; --card:#ffffff;
  --later:#e8a33d; --known:#3fae6b; --line:#dde6ea;
  --shadow:0 10px 30px rgba(0,40,60,.13);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:linear-gradient(160deg,#eef3f5,#dce9ee);
  color:var(--ink); min-height:100%;
  display:flex; flex-direction:column; align-items:center;
  -webkit-tap-highlight-color:transparent;
}
header{
  width:100%; text-align:center; padding:18px 16px 6px;
}
header h1{margin:0; font-size:1.35rem; color:var(--blue); letter-spacing:.3px}
header .sub{font-size:.8rem; color:var(--muted)}

.screen{
  width:100%; max-width:560px; padding:18px 18px 40px;
  margin:0 auto; flex:1;
  display:flex; flex-direction:column; gap:14px;
}
.hidden{display:none !important}
.lead,.note{color:var(--muted); line-height:1.5; font-size:.95rem}
.lead b{color:var(--ink)}
.note{font-size:.82rem; margin:0}

.field{display:flex; flex-direction:column; gap:6px; font-size:.85rem; color:var(--muted)}
.field select{
  font-size:1rem; padding:12px; border:1px solid var(--line); border-radius:12px;
  background:#fff; color:var(--ink);
}
.check{display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--ink); cursor:pointer}
.check input{margin-top:2px; width:18px; height:18px; accent-color:var(--blue)}

.prog-info{font-size:.9rem; color:var(--blue); font-weight:700; min-height:1.2em}

.btn{
  font:inherit; font-weight:700; border:none; border-radius:14px;
  padding:14px 18px; cursor:pointer; transition:transform .06s ease, filter .15s ease, background .15s;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.big{font-size:1.05rem; padding:16px}
.btn.small{padding:8px 12px; font-size:.85rem; border-radius:10px}
.btn-primary{background:var(--blue); color:#fff}
.btn-primary:hover{filter:brightness(1.07)}
.btn-ghost{background:transparent; color:var(--muted); border:1px solid var(--line)}
.btn-later{background:#fff5e6; color:#9a6510; border:1.5px solid var(--later); flex:1}
.btn-known{background:#e7f7ee; color:#1f7a48; border:1.5px solid var(--known); flex:1}

/* study bar */
.bar{display:flex; align-items:center; gap:12px}
.meter{flex:1; height:8px; background:#d8e4ea; border-radius:99px; overflow:hidden}
#meterFill{height:100%; width:0; background:linear-gradient(90deg,var(--green),var(--green-d)); transition:width .3s}
.counter{font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums; min-width:54px; text-align:right}

/* card flip */
.card{
  perspective:1400px; width:100%; cursor:pointer; margin-top:6px; min-height:260px;
}
.card-inner{position:relative; width:100%; transition:transform .5s cubic-bezier(.2,.7,.2,1); transform-style:preserve-3d; display:grid}
.card.flipped .card-inner{transform:rotateY(180deg)}
.card-face{
  grid-area:1/1; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:var(--card); border-radius:22px; box-shadow:var(--shadow);
  padding:22px; display:flex; flex-direction:column; justify-content:center; align-items:center;
  border:1px solid #fff; min-height:260px;
}
.card-front{gap:14px}
.card-back{transform:rotateY(180deg); justify-content:flex-start; align-items:stretch; gap:10px; text-align:left}
.caput-tag{
  position:absolute; top:14px; left:16px; font-size:.7rem; font-weight:700;
  color:#fff; background:var(--green-d); padding:3px 9px; border-radius:99px;
}
.lat{font-size:2.4rem; font-weight:700; color:var(--blue); text-align:center; word-break:break-word; line-height:1.15}
.lat.small{font-size:1.6rem; margin-top:18px; text-align:left}
.hint{font-size:.78rem; color:#a9b8bf}
.row{display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--line); padding-top:8px}
.row .lbl{font-size:.68rem; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:700}
.row .val{font-size:1.05rem; color:var(--ink)}
.row .val.big{font-size:1.35rem; font-weight:700; color:var(--green-d)}

.actions{display:flex; gap:12px; margin-top:4px}
.actions .btn{width:100%}

#done{align-items:center; text-align:center; justify-content:center}
.done-emoji{font-size:3.5rem}
#done h2{color:var(--blue); margin:.2em 0}
#doneText{color:var(--muted)}

@media (max-width:380px){ .lat{font-size:2rem} }

/* --- login / setup extra --- */
.field input[type=text]{
  font-size:1.05rem; padding:13px; border:1px solid var(--line); border-radius:12px; background:#fff;
}
.who{display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:.9rem; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:10px}
.who b{color:var(--blue)}
.link{display:inline-block; text-align:center; color:var(--blue); text-decoration:none;
  font-weight:700; font-size:.92rem; padding:8px}
.link:hover{text-decoration:underline}
.dim{color:var(--muted); font-weight:400; font-size:.85rem}
.btn:disabled{opacity:.45; cursor:not-allowed}

/* --- beheer --- */
.bar2{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.count{margin-left:auto; font-size:.85rem; color:var(--blue); font-weight:700}
.list{display:flex; flex-direction:column; gap:14px}
.cgroup{background:#fff; border:1px solid var(--line); border-radius:16px; padding:10px 12px}
.chead{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.ctitle{font-weight:700; color:var(--blue)}
.capToggle{white-space:nowrap}
.srow{display:flex; align-items:center; gap:10px; padding:8px 6px; border-radius:10px; cursor:pointer}
.srow + .srow{border-top:1px solid #eef3f5}
.srow.on{background:#f1f9f4}
.srow input{width:18px; height:18px; accent-color:var(--green-d)}
.sles{font-weight:700; min-width:42px; color:var(--ink)}
.sinfo{font-size:.82rem; color:var(--muted)}
.savebar{display:flex; gap:12px; margin-top:18px}
.savebar .btn{flex:1}

/* --- layout met inhoudstafel links --- */
.layout{display:flex; gap:20px; width:100%; max-width:920px; margin:0 auto; align-items:flex-start; padding:0 14px}
.main{flex:1; min-width:0; max-width:560px; margin:0 auto}
.toc{width:215px; flex:none; position:sticky; top:12px; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:12px; box-shadow:var(--shadow)}
.toc-head{font-weight:700; color:var(--blue); font-size:.95rem; margin-bottom:8px}
.toc-all{display:flex; align-items:center; gap:8px; font-size:.85rem; font-weight:700; color:var(--muted);
  padding:6px 4px; border-bottom:1px solid var(--line); margin-bottom:4px; cursor:pointer}
.toc-all input{width:16px;height:16px;accent-color:var(--blue)}
.toc-item{display:flex; align-items:center; gap:6px; padding:6px 4px; border-radius:8px}
.toc-item.on{background:#f1f9f4}
.toc-cb{display:flex; align-items:center; gap:8px; flex:1; cursor:pointer; font-size:.86rem; min-width:0}
.toc-cb input{width:16px;height:16px;accent-color:var(--green-d); flex:none}
.toc-cb span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.toc-count{font-size:.72rem; color:var(--muted); font-variant-numeric:tabular-nums}
.toc-reset{border:none; background:#eef3f5; color:var(--muted); width:24px; height:24px; border-radius:7px;
  cursor:pointer; font-size:.95rem; line-height:1; flex:none}
.toc-reset:hover{background:#ffe9e3; color:#b0432a}

@media (max-width:760px){
  .layout{flex-direction:column}
  .toc{width:100%; position:static; order:-1}
  .toc-cb span{white-space:normal}
}

/* --- beheer: niet-studeren --- */
.excl{margin-top:18px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0}
.chip{display:inline-flex; align-items:center; gap:6px; background:#fff5e6; color:#9a6510;
  border:1px solid var(--later); border-radius:99px; padding:4px 6px 4px 11px; font-size:.82rem; font-weight:700}
.chip button{border:none; background:#f3c98a; color:#5b3d08; width:18px; height:18px; border-radius:50%; cursor:pointer; line-height:1}
.addrow{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.addrow input{width:110px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; font:inherit}

/* --- login: gebruikerslijst + nieuwe leerling --- */
.userlist{display:flex; flex-wrap:wrap; gap:10px; margin:4px 0 8px}
.userbtn{font:inherit; font-weight:700; cursor:pointer; background:#fff; color:var(--blue);
  border:1.5px solid var(--line); border-radius:99px; padding:10px 16px; transition:all .12s}
.userbtn:hover{border-color:var(--blue); background:#eef6fa}
.addform{display:flex; flex-direction:column; gap:6px; font-size:.85rem; color:var(--muted);
  border-top:1px solid var(--line); padding-top:14px}
.addform .addrow{display:flex; gap:8px}
.addform input{flex:1; font-size:1rem; padding:12px; border:1px solid var(--line); border-radius:12px}
.lat.prompt-pas{font-size:1.7rem; color:var(--green-d)}

/* --- inhoudstafel compact (nummer + teller) --- */
.toc-allrow{font-weight:700; border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:4px; cursor:pointer}
.toc-allrow .toc-cap{color:var(--muted)}
.toc-cap{font-weight:700; min-width:20px; color:var(--ink); white-space:nowrap; overflow:visible; text-overflow:clip}
.toc-cb .toc-count, .toc-allrow .toc-count{margin-left:auto}
.toc-count{font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums}
.toc-count.strong{color:var(--blue); font-weight:700; font-size:.82rem}

/* Stop-knop boven de inhoudstafel (enkel tijdens oefenen) */
.toc-stop{width:100%; margin-bottom:10px}

/* Ongedaan-maken-knop in de balk boven de kaart */
.bar #undoBtn{flex:none; white-space:nowrap}