:root{
  --paars:#8b5cf6; --paars-d:#6d3ff0; --roze:#ff5fa2; --roze-d:#e23d85;
  --groen:#20c997; --groen-d:#12a97b; --rood:#ff5a6e; --geel:#ffcf3d; --geel-d:#e0a800;
  --blauw:#4dabff; --blauw-d:#2b7fd6;
  --tekst:#3a2f5c; --grijs:#9791b3; --kaart:#ffffff; --line:#efe9fb;
  /* thema = kleur van het gekozen kind (wordt in JS gezet) */
  --theme:#8b5cf6; --theme-d:#6d3ff0;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;overscroll-behavior:none}
body{
  font-family:"Nunito",system-ui,"Segoe UI",sans-serif;font-weight:600;
  color:var(--tekst);min-height:100vh;min-height:100dvh;overflow-x:hidden;
  /* kleurrijk "podium" (Squla-stijl); de app-kolom staat er middenop */
  background:linear-gradient(165deg,#7c73ff 0%,#9a63f0 45%,#c86fd0 100%);
  background-attachment:fixed;
}
/* speelse flat vormen op de achtergrond */
body::before,body::after{content:"";position:fixed;border-radius:50%;z-index:0;pointer-events:none;filter:blur(2px);opacity:.5}
body::before{width:340px;height:340px;left:-90px;top:8%;background:radial-gradient(circle,#ffd86b,transparent 70%)}
body::after{width:420px;height:420px;right:-120px;bottom:4%;background:radial-gradient(circle,#5ad1ff,transparent 70%)}
/* de app zelf: een portret-kolom, als een echte app-schermpje op het podium */
.appcol{position:relative;z-index:1;max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;
  background:linear-gradient(180deg,#fbf9ff 0%,#fdf1f8 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.4),0 20px 70px rgba(50,30,110,.45);
  padding-bottom:calc(30px + env(safe-area-inset-bottom))}
@media(min-width:520px){.appcol{border-radius:0 0 34px 34px;min-height:calc(100dvh - 24px);margin-top:0}}
h1,h2,h3,.speels{font-family:"Fredoka",system-ui,sans-serif;font-weight:600;letter-spacing:.2px}
.btn,.pnaam,.t-titel,.sectie-titel,.welkom-titel,.q-tekst,.pct,.bb-titel,.melding{font-family:"Fredoka",system-ui,sans-serif}
.hidden{display:none!important}
.wrap{max-width:760px;margin:0 auto;padding:18px}
/* zachte pop-in voor nieuwe schermen */
#app>*{animation:popin .32s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes popin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

/* app-gevoel: geen tekstselectie/callout op knoppen en kaarten */
.btn,.optie,.vakkaart,.lesrij,.profiel,.dagrij,.tip-knop,.audio-knop,.shopitem,.beheer-item,.topbar,.beloningsbalk,.svak,.terug-mini,.q-emoji,.hak,.klok,.bb-pijl{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea{-webkit-user-select:text;user-select:text}
button{font-family:inherit}

/* ---------- topbar ---------- */
.topbar{display:flex;align-items:center;gap:10px;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top));
  background:linear-gradient(120deg,var(--theme),var(--theme-d));color:#fff;position:sticky;top:0;z-index:10;
  box-shadow:0 6px 20px rgba(109,63,240,.28);border-radius:0 0 22px 22px}
.topbar .logo{font-size:26px;cursor:pointer;filter:drop-shadow(0 2px 3px rgba(0,0,0,.15))}
.topbar h1{font-size:20px;margin:0;flex:1;font-weight:600}
.topbar .stats{display:flex;gap:8px;font-weight:800;font-size:15px}
.topbar .stat{background:rgba(255,255,255,.24);padding:6px 13px;border-radius:20px;white-space:nowrap;cursor:pointer;
  backdrop-filter:blur(4px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25);transition:transform .1s}
.topbar .stat:active{transform:scale(.94)}

/* ---------- knoppen ---------- */
.btn{border:none;border-radius:18px;padding:14px 22px;font-size:17px;font-weight:600;cursor:pointer;color:#fff;
  background:linear-gradient(120deg,var(--theme),var(--theme-d));box-shadow:0 5px 0 var(--theme-d),0 8px 16px rgba(109,63,240,.25);
  transition:transform .08s,box-shadow .08s;position:relative}
.btn:hover{filter:brightness(1.04)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--theme-d),0 3px 8px rgba(109,63,240,.2)}
.btn.groot{font-size:21px;padding:18px 28px;width:100%;border-radius:22px}
.btn.groen{background:linear-gradient(120deg,#2fe3a8,var(--groen-d));box-shadow:0 5px 0 var(--groen-d),0 8px 16px rgba(18,169,123,.25)}
.btn.groen:active{box-shadow:0 1px 0 var(--groen-d)}
.btn.roze{background:linear-gradient(120deg,#ff7db6,var(--roze-d));box-shadow:0 5px 0 var(--roze-d),0 8px 16px rgba(226,61,133,.25)}
.btn.roze:active{box-shadow:0 1px 0 var(--roze-d)}
.btn.grijs{background:linear-gradient(120deg,#efeaff,#e3ddf6);color:var(--tekst);box-shadow:0 5px 0 #cfc6ea}
.btn.grijs:active{box-shadow:0 1px 0 #cfc6ea}
.btn.rood{background:linear-gradient(120deg,#ff7c8b,#e23d50);box-shadow:0 5px 0 #d63d50}
.btn.klein{padding:9px 14px;font-size:14px;border-radius:14px;box-shadow:0 4px 0 rgba(0,0,0,.14)}
.btn.klein:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.14)}
.knoprij{display:flex;gap:12px;margin-top:22px}
.knoprij .btn{flex:1}
.terug-mini{background:#fff;border:2px solid var(--line);color:var(--theme-d);font-weight:800;font-size:14px;cursor:pointer;
  padding:8px 16px;border-radius:30px;margin-bottom:14px;box-shadow:0 3px 8px rgba(109,63,240,.08)}
.terug-mini:active{transform:scale(.96)}

.sectie-titel{font-size:24px;margin:24px 0 10px;font-weight:600}
.uitleg{color:var(--grijs);margin:0 0 8px;line-height:1.55;font-weight:600}

/* ---------- profielkiezer ---------- */
.welkom{text-align:center;padding:26px 0}
.welkom-titel{font-size:34px;font-weight:600;margin-bottom:2px;color:var(--paars-d)}
.welkom-sub{color:var(--grijs);font-size:19px;margin-bottom:32px;font-weight:700}
.profielen{display:flex;gap:26px;justify-content:center;flex-wrap:wrap}
.profiel{background:var(--kaart);border-radius:32px;padding:24px 20px 20px;cursor:pointer;width:220px;border:none;
  box-shadow:0 14px 34px rgba(109,63,240,.16),0 3px 0 var(--kl);transition:transform .16s cubic-bezier(.2,.8,.3,1.4)}
.profiel:hover{transform:translateY(-8px) rotate(-1.2deg)}
.profiel:active{transform:translateY(-2px) scale(.98)}
.foto{width:158px;height:158px;margin:0 auto 16px;border-radius:50%;overflow:hidden;position:relative;
  border:6px solid var(--kl);background:#f4f0ff;box-shadow:0 8px 20px rgba(109,63,240,.18)}
.foto img{width:100%;height:100%;object-fit:cover}
.foto-fallback{width:100%;height:100%;align-items:center;justify-content:center;flex-direction:column;color:#fff;font-size:62px;line-height:1;
  background:var(--kl)!important}
.foto-fallback span{font-size:30px;font-weight:800;margin-top:-6px}
.pnaam{font-size:28px;font-weight:600}
.pleeft{color:#fff;font-size:15px;font-weight:800;background:var(--kl);display:inline-block;padding:3px 14px;border-radius:20px;margin-top:6px}
.ouder-link{margin-top:42px;background:#fff;border:2px solid var(--line);color:var(--grijs);border-radius:40px;
  padding:11px 22px;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 4px 12px rgba(109,63,240,.08)}
.laden{text-align:center;padding:70px 20px;font-size:28px;font-weight:800;color:var(--theme-d);font-family:"Fredoka",sans-serif}
.laden span{font-size:16px;color:var(--grijs)}
.wobble{display:inline-block;animation:wob 1.6s ease-in-out infinite}
@keyframes wob{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

/* mascotte (onze eigen "Q") */
.mascot{display:block;overflow:visible}
.mascot .m-arm{transform-origin:96px 66px;animation:wave 1.3s ease-in-out infinite}
@keyframes wave{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-24deg)}}
.mascot-groot{display:flex;justify-content:center;margin-bottom:8px;animation:bob 2.6s ease-in-out infinite}
.groet{display:flex;align-items:center;gap:10px;margin:4px 0 6px}
.groet .mascot{flex:0 0 auto}
.bubble{position:relative;background:#fff;border-radius:18px;padding:12px 15px;font-weight:800;color:var(--tekst);
  box-shadow:0 6px 16px rgba(50,30,110,.14);font-size:15px;flex:1;font-family:"Fredoka",sans-serif}
.bubble::before{content:"";position:absolute;left:-9px;top:20px;border:9px solid transparent;border-right-color:#fff;border-left:0}

/* ---------- home: beloningsbalken ---------- */
.beloningsrij{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
@media(max-width:520px){.beloningsrij{grid-template-columns:1fr}}
.beloningsbalk{display:flex;align-items:center;gap:13px;border-radius:22px;padding:15px 18px;cursor:pointer;border:none;
  box-shadow:0 8px 20px rgba(109,63,240,.12);transition:transform .12s}
.beloningsbalk:active{transform:scale(.97)}
.beloningsbalk.munt{background:linear-gradient(120deg,#fff4d1,#ffe8a8)}
.beloningsbalk.sticker{background:linear-gradient(120deg,#ffe6f4,#ede4ff)}
.bb-emoji{font-size:36px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.12))}
.bb-titel{font-weight:600;font-size:19px}
.bb-sub{color:#8a7fa8;font-size:13px;font-weight:700}
.bb-tekst{flex:1}.bb-pijl{font-size:22px}

/* ---------- vakken grid ---------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:8px}
.vakkaart{border-radius:26px;padding:20px 12px 18px;cursor:pointer;text-align:center;border:none;color:#fff;
  box-shadow:0 10px 22px rgba(50,30,110,.22);transition:transform .14s cubic-bezier(.2,.8,.3,1.4)}
.vakkaart:hover{transform:translateY(-6px) rotate(1deg)}
.vakkaart:active{transform:scale(.96)}
.vakkaart .ico{font-size:40px;display:flex;align-items:center;justify-content:center;width:72px;height:72px;margin:0 auto 10px;
  background:rgba(255,255,255,.92);border-radius:50%;box-shadow:0 6px 14px rgba(0,0,0,.15)}
.vakkaart .naam{font-size:18px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.12)}
.vakkaart .sub{font-size:12.5px;color:rgba(255,255,255,.9);margin-top:3px;font-weight:700}

/* ---------- dagplan ---------- */
.dagplan{display:flex;flex-direction:column;gap:13px}
.dagrij{display:flex;align-items:center;gap:14px;background:var(--kaart);border-radius:22px;padding:15px 17px;box-shadow:0 6px 16px rgba(109,63,240,.10)}
.dagrij.af{opacity:.6}
.dagrij .ico{font-size:34px}.dagrij .info{flex:1}
.dagrij .info .v{font-weight:800;font-size:17px}.dagrij .info .l{font-size:13px;color:var(--grijs);font-weight:700}
.dagrij .vink{font-size:30px}
.klaar-vandaag{background:linear-gradient(120deg,#fff6d6,#ffe9a8);border:none;border-radius:22px;padding:16px;text-align:center;
  font-weight:800;font-size:19px;margin-bottom:16px;box-shadow:0 8px 20px rgba(224,168,0,.2)}

/* ---------- lessenlijst ---------- */
.leslijst{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.lesrij{display:flex;align-items:center;gap:14px;background:var(--kaart);border:none;width:100%;text-align:left;border-radius:22px;
  padding:15px 17px;cursor:pointer;box-shadow:0 6px 16px rgba(109,63,240,.10);transition:transform .1s}
.lesrij:hover{transform:translateX(4px)}
.lesrij:active{transform:scale(.98)}
.lesrij .ico{font-size:26px;width:54px;height:54px;display:flex;align-items:center;justify-content:center;border-radius:16px;
  color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.14);flex:0 0 auto}
.lesrij .titel{flex:1;font-weight:800;font-size:17px}
.score-badge{font-size:13px;font-weight:800;padding:6px 12px;border-radius:16px;background:#f0ecfb;color:var(--grijs)}
.score-badge.goed{background:#d4f7ea;color:#0e8d5d}.score-badge.matig{background:#fff0cf;color:#b8860b}

/* ---------- teach ---------- */
.teachkaart{background:var(--kaart);border-radius:30px;padding:28px 22px;text-align:center;box-shadow:0 14px 34px rgba(109,63,240,.16)}
.t-emoji{font-size:74px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.12));animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.t-titel{font-size:26px;margin:8px 0 16px}
.t-body{font-size:18px;line-height:1.7;text-align:left;background:linear-gradient(120deg,#f7f3ff,#fdf0f8);border-radius:18px;padding:18px 20px;margin-bottom:20px;font-weight:700}
.t-stip{margin-top:16px;color:#d3c9f0;letter-spacing:6px;font-size:14px}
.ru-uitleg{background:#eef4ff;border:2px solid #cfe0ff;border-radius:14px;padding:12px 14px;margin:0 0 14px;font-weight:700;color:#2b4a80;font-size:16px;text-align:left}
.feedback .ru-uitleg{margin-top:8px}

/* ---------- quiz ---------- */
.quizkaart{background:var(--kaart);border-radius:30px;padding:24px;box-shadow:0 14px 34px rgba(109,63,240,.16)}
.voortgang{height:15px;background:#eee6fb;border-radius:12px;overflow:hidden;margin-bottom:16px;box-shadow:inset 0 2px 4px rgba(109,63,240,.12)}
.voortgang .balk{height:100%;background:linear-gradient(90deg,var(--roze),var(--paars));width:0;transition:width .35s;border-radius:12px;
  box-shadow:0 0 10px rgba(255,95,162,.5)}
.q-teller{text-align:right;color:var(--grijs);font-weight:800;font-size:14px}
.intro-tekst{background:linear-gradient(120deg,#f6f3ff,#eef6ff);border-left:6px solid var(--paars);padding:16px 18px;border-radius:16px;
  font-size:18px;line-height:1.6;margin:8px 0 18px;font-weight:700}
.q-emoji{font-size:66px;text-align:center;margin:8px 0;filter:drop-shadow(0 5px 6px rgba(0,0,0,.1))}
.q-tekst{font-size:23px;font-weight:600;text-align:center;line-height:1.35;margin-top:6px}
.q-hint{text-align:center;color:var(--roze-d);font-size:16px;margin-top:8px;font-weight:800;background:#ffeef6;display:inline-block;padding:4px 14px;border-radius:20px;margin-left:50%;transform:translateX(-50%)}
.hak{display:flex;justify-content:center;align-items:center;gap:6px;margin:12px 0;font-size:42px;font-weight:700;font-family:"Fredoka",sans-serif}
.hak span{background:linear-gradient(120deg,#efe7ff,#e3f0ff);border-radius:14px;padding:6px 18px;color:var(--paars-d);box-shadow:0 4px 10px rgba(109,63,240,.14)}
.hak b{color:#cbc0e8}
.opties{display:grid;gap:13px;margin-top:20px}
.optie{border:3px solid var(--line);background:#fbf9ff;border-radius:20px;padding:17px;font-size:20px;font-weight:800;cursor:pointer;
  text-align:center;color:var(--tekst);transition:transform .08s,border-color .1s;box-shadow:0 4px 10px rgba(109,63,240,.06)}
.optie:hover{border-color:var(--theme);transform:translateY(-2px)}
.optie:active{transform:scale(.98)}
.optie.goed{background:#d4f7ea;border-color:var(--groen);color:#0e8d5d;animation:goedpop .4s}
.optie.fout{background:#ffe1e5;border-color:var(--rood);color:#c5283d;animation:shake .4s}
@keyframes goedpop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.typevak{display:flex;gap:10px;margin-top:20px}
.typevak input{flex:1;font-size:23px;padding:15px;border:3px solid var(--line);border-radius:18px;text-align:center;font-weight:800;color:var(--tekst);font-family:"Fredoka",sans-serif;background:#fbf9ff}
.typevak input:focus{outline:none;border-color:var(--theme)}
.feedback{margin-top:18px;padding:16px;border-radius:18px;font-size:19px;font-weight:800;text-align:center}
.feedback.goed{background:linear-gradient(120deg,#d4f7ea,#c3f5e3);color:#0e8d5d}
.feedback.fout{background:linear-gradient(120deg,#ffe1e5,#ffd6e0);color:#c5283d}
.feedback .uitleg{font-weight:700;margin-top:6px;color:var(--tekst)}
.audio-knop{display:block;margin:16px auto;background:linear-gradient(120deg,#5fbaff,var(--blauw-d));color:#fff;border:none;border-radius:40px;
  padding:14px 26px;font-size:17px;font-weight:800;cursor:pointer;box-shadow:0 5px 0 var(--blauw-d),0 8px 16px rgba(43,127,214,.25)}
.audio-knop:active{transform:translateY(3px);box-shadow:0 1px 0 var(--blauw-d)}
.audio-knop.groot{font-size:20px;padding:16px 32px}
.naspreek{text-align:center;margin-top:12px}
.naspreek-tip{color:var(--grijs);margin:12px 0;font-weight:700;font-size:17px}

/* klok */
.klok-wrap{display:flex;justify-content:center;margin:12px 0}
.klok{width:190px;height:190px;filter:drop-shadow(0 8px 16px rgba(109,63,240,.18))}

/* tekenveld: de lichte letter staat ín het vak, kind trekt er overheen */
.schrijfblok{margin-top:16px}
#tekenveld{width:100%;height:auto;aspect-ratio:620/240;background:#fbf9ff;border:4px dashed #d3c8f0;border-radius:20px;touch-action:none;display:block}
.schrijf-tip{text-align:center;color:var(--grijs);font-weight:800;margin-top:8px;font-size:15px}
.schrijfknoppen{display:flex;gap:12px;margin-top:12px}
.schrijfknoppen .btn{flex:1}

/* niveau (adaptief) */
.niveau-kaart{color:#fff;border-radius:22px;padding:16px 18px;margin:6px 0 14px;box-shadow:0 8px 20px rgba(50,30,110,.2)}
.nk-badge{font-family:"Fredoka",sans-serif;font-size:22px;font-weight:600;margin-bottom:2px}
.nk-tekst{font-size:14px;font-weight:700;color:rgba(255,255,255,.92)}
.niveau-pop{background:linear-gradient(120deg,#eafff4,#d4f7ea);border:2px solid var(--groen);border-radius:16px;padding:13px;margin-top:14px;font-weight:800;color:#0e8d5d}
.niveau-lijst{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:6px}
.niveau-chip{background:#f3ecff;border-radius:12px;padding:6px 11px;font-size:13px;font-weight:700}

/* afremmen bij te snel klikken */
.rust-banner{background:linear-gradient(120deg,#fff3d6,#ffe6c0);border:2px solid #f0b95a;border-radius:16px;padding:14px;margin-bottom:14px;
  text-align:center;font-weight:800;font-size:17px;color:#9a6a00;animation:popin .3s}

/* ---------- resultaat ---------- */
.resultaat{text-align:center;background:var(--kaart);border-radius:30px;padding:32px 22px;box-shadow:0 14px 34px rgba(109,63,240,.18)}
.resultaat .grootemoji{font-size:88px;animation:bob 2s ease-in-out infinite;filter:drop-shadow(0 6px 8px rgba(0,0,0,.14))}
.resultaat .pct{font-size:58px;font-weight:600;color:var(--theme-d)}
.resultaat .sterren{font-size:36px;letter-spacing:5px}
.resultaat .melding{font-size:22px;margin:8px 0 4px}
.resultaat.mislukt{box-shadow:0 14px 34px rgba(255,90,110,.18)}
.coins-pop{background:linear-gradient(120deg,#fff6d6,#ffe8a8);border:none;border-radius:18px;padding:14px;margin-top:16px;font-weight:800;font-size:22px;color:#b8860b;box-shadow:0 8px 20px rgba(224,168,0,.22)}
.sticker-pop{background:linear-gradient(120deg,#ffe6f4,#f3e4ff);border:none;border-radius:18px;padding:14px;margin-top:14px;font-weight:800;font-size:19px;box-shadow:0 8px 20px rgba(226,61,133,.15)}
.badge-pop{background:linear-gradient(120deg,#fff6d6,#fff0bd);border:none;border-radius:18px;padding:14px;margin-top:12px;font-weight:800;box-shadow:0 6px 16px rgba(224,168,0,.18)}
.uitje-pop{background:linear-gradient(120deg,#d4f7ea,#c3f5e3);border:none;border-radius:18px;padding:16px;margin-top:14px;font-weight:800;font-size:20px;color:#0e8d5d}

/* ---------- stickeralbum ---------- */
.stickerboek{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:10px;margin-top:16px}
.svak{aspect-ratio:1;background:#f4eefc;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;
  border:2px dashed #ddd0f2;color:#cabfe6}
.svak.op{background:#fff;border:3px solid var(--roze);box-shadow:0 5px 12px rgba(255,95,162,.28);animation:goedpop .4s}

/* ---------- winkel ---------- */
.coins-groot{font-size:34px;font-weight:600;color:var(--geel-d);text-align:center;margin:8px 0;font-family:"Fredoka",sans-serif}
.shop{display:flex;flex-direction:column;gap:13px;margin-top:14px}
.shopitem{display:flex;align-items:center;gap:15px;background:var(--kaart);border-radius:22px;padding:15px 17px;box-shadow:0 6px 16px rgba(109,63,240,.10);opacity:.66}
.shopitem.kan{opacity:1;box-shadow:0 8px 22px rgba(32,201,151,.22),0 0 0 3px var(--groen) inset}
.si-emoji{font-size:38px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.12))}.si-info{flex:1}
.si-naam{font-weight:800;font-size:18px}.si-kosten{color:var(--grijs);font-size:14px;font-weight:700}
.si-knop{padding:11px 18px}.si-slot{font-size:26px;opacity:.6}
.tip-knop{display:block;width:100%;margin-top:16px;background:linear-gradient(120deg,#fff4d1,#ffeab8);color:#a6790a;border:2px dashed #e8c65a;
  border-radius:18px;padding:14px;font-weight:800;cursor:pointer;font-size:15px}
.tip-knop:disabled{opacity:.5;cursor:default}
.tip-box{margin-top:14px;background:linear-gradient(120deg,#fffaf0,#fff3d6);border:2px solid var(--geel);border-radius:16px;padding:14px;font-weight:800}
.tip-fail{margin-top:14px;background:#ffe1e5;border:2px solid var(--rood);border-radius:16px;padding:14px;color:#c5283d;font-weight:800}
.unlock-rij{background:#f7f3ff;border-radius:14px;padding:11px 15px;margin-top:9px;font-weight:700}

/* sticker-animatie */
.sticker-fly{position:fixed;bottom:20px;font-size:46px;z-index:120;pointer-events:none;animation:vlieg 1.5s ease-out forwards}
@keyframes vlieg{0%{transform:translateY(0) scale(.4) rotate(0);opacity:0}20%{opacity:1}60%{transform:translateY(-45vh) scale(1.4) rotate(20deg)}100%{transform:translateY(-82vh) scale(.8) rotate(-15deg);opacity:0}}

/* ---------- ouder ---------- */
.pinvak{max-width:350px;margin:44px auto;text-align:center;background:var(--kaart);border-radius:30px;padding:32px;box-shadow:0 14px 34px rgba(109,63,240,.16)}
.pinvak h2{font-size:24px;margin-bottom:8px}
.pinvak input{font-size:32px;text-align:center;letter-spacing:12px;width:180px;padding:12px;border:3px solid var(--line);border-radius:16px;margin:16px 0;font-family:"Fredoka",sans-serif}
.pinvak input:focus{outline:none;border-color:var(--theme)}
.pinfout{color:var(--rood);font-weight:800;height:20px}
.pinvak .btn{margin-top:8px;width:100%}
.ouder-kind{background:var(--kaart);border-radius:24px;border-top:6px solid var(--paars);padding:20px;margin-bottom:22px;box-shadow:0 8px 22px rgba(109,63,240,.12)}
.ouder-kind h3{font-size:23px;margin-bottom:12px}.ouder-kind h4{margin:18px 0 6px;font-size:15px;color:var(--grijs);font-family:"Nunito";font-weight:800}
.ouder-kind .mini{font-size:13px;color:var(--grijs);font-weight:700}
.samenvat{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:11px}
.samenkaart{background:linear-gradient(140deg,#f8f5ff,#fdf1f8);border-radius:18px;padding:13px}
.samenkaart .g{font-size:12px;color:var(--grijs);font-weight:700}.samenkaart .b{font-size:26px;font-weight:800;color:var(--theme-d);font-family:"Fredoka",sans-serif}
.beheerrij{margin:14px 0 4px}
.tabelwrap{overflow-x:auto;border-radius:14px}
.tabel{width:100%;border-collapse:collapse;margin-top:6px;font-size:13px;font-weight:700}
.tabel th,.tabel td{padding:9px 11px;text-align:left;border-bottom:1px solid var(--line)}
.tabel th{background:#f3ecff;color:var(--paars-d);font-family:"Fredoka",sans-serif}
.daybars{display:flex;gap:10px;align-items:flex-end;padding:12px 4px;overflow-x:auto}
.daybar{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:40px}
.db-bar{width:28px;border-radius:8px 8px 0 0;min-height:6px}
.db-min{font-size:12px;font-weight:800}.db-dag{font-size:11px;color:var(--grijs);font-weight:700}
.openstaand{background:linear-gradient(120deg,#fff9e6,#fff2cf);border:none;border-radius:22px;padding:18px;margin-bottom:22px;box-shadow:0 8px 22px rgba(224,168,0,.16)}
.openstaand h3{margin-bottom:4px}
.unlock-kaart{display:flex;align-items:center;gap:13px;background:#fff;border-radius:16px;border-left:5px solid;padding:13px 15px;margin-top:11px;box-shadow:0 4px 12px rgba(0,0,0,.05)}
.uk-emoji{font-size:32px}.uk-info{flex:1;font-size:14px;font-weight:700}
.beheerlijst{display:flex;flex-direction:column;gap:11px}
.beheer-item{display:flex;align-items:center;gap:13px;background:var(--kaart);border-radius:16px;padding:13px 15px;box-shadow:0 4px 12px rgba(109,63,240,.08)}
.beheer-item.geblokkeerd{opacity:.55}
.bi-emoji{font-size:30px}.bi-info{flex:1;font-size:15px;font-weight:700}.bi-knoppen{display:flex;gap:7px}
.mini{font-size:12px;color:var(--grijs);font-weight:700}

/* instellingen */
.inst-kaart{background:var(--kaart);border-radius:18px;padding:16px 18px;margin-bottom:14px;box-shadow:0 6px 16px rgba(109,63,240,.10)}
.inst-kaart h4{margin-bottom:10px;font-size:17px;font-family:"Fredoka",sans-serif}
.inst-rij{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;font-weight:700;font-size:15px}
.inst-num{width:90px;padding:9px 10px;border:2px solid var(--line);border-radius:12px;font:inherit;font-weight:800;text-align:center}
.inst-sel{padding:9px 10px;border:2px solid var(--line);border-radius:12px;font:inherit;font-weight:700}
.inst-check{width:26px;height:26px}
.inst-kind{background:var(--kaart);border-radius:18px;border-left:6px solid var(--paars);padding:16px 18px;margin-bottom:14px;box-shadow:0 6px 16px rgba(109,63,240,.10)}
.inst-kind h4{font-size:18px;margin-bottom:8px}
.inst-label{font-weight:800;margin:10px 0 6px;font-size:14px}
.vakchk-lijst{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.vakchk{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700;background:#f7f4ff;border-radius:10px;padding:8px 10px}
.vakchk input{width:20px;height:20px}

/* confetti */
.confetti{position:fixed;top:-20px;width:12px;height:12px;border-radius:3px;z-index:100;animation:val 2.8s linear forwards}
@keyframes val{to{transform:translateY(110vh) rotate(760deg);opacity:.85}}

@media(max-width:520px){
  .grid{grid-template-columns:1fr 1fr}.topbar h1{font-size:17px}
  .q-tekst{font-size:21px}.profiel{width:160px}.foto{width:120px;height:120px}
  .welkom-titel{font-size:28px}
}