/* Kannik huisstijl. Kleuren uit tokens.css, elke kleur heeft één taak. */
:root{
  color-scheme:light;
  --k-oranje:#FF6A13; --k-oranje-knop:#F25C05; --k-oranje-tekst:#C94400; --k-oranje-licht:#FF9A4D; --k-oranje-zacht:#FFF1E6;
  --k-geel:#FFC21A; --k-geel-zacht:#FFF6D6; --k-geel-d:#D99A00;
  --k-groen:#22B35E; --k-groen-tekst:#11834A; --k-groen-zacht:#E6F7EC; --k-groen-d:#0B6538;
  --k-rood:#F23A3A; --k-rood-tekst:#C81E2B; --k-rood-zacht:#FDE8E8; --k-rood-d:#961620;
  --k-paars:#7A3CF0; --k-paars-zacht:#F0E9FE; --k-paars-d:#5523B8;
  --k-roze:#FF3D8B; --k-roze-zacht:#FFE6F0; --k-roze-tekst:#B0124F;
  --k-inkt:#1E1530; --k-grijs:#5E5670; --k-lijn:#ECE8F2; --k-wit:#FFFFFF;
  --k-font:'Nunito',system-ui,sans-serif;
  --k-radius-s:12px; --k-radius-m:20px; --k-radius-l:28px;
  --k-knop-diepte:4px;
  /* oude namen, zodat de app-code blijft werken */
  --ink:var(--k-inkt); --muted:var(--k-grijs); --line:var(--k-lijn);
  --acc:var(--k-oranje-knop); --acc-d:var(--k-oranje-tekst); --acc-soft:var(--k-oranje-zacht);
  --good:var(--k-groen-tekst); --good-b:var(--k-groen); --good-d:var(--k-groen-d); --good-soft:var(--k-groen-zacht);
  --bad:var(--k-rood-tekst); --bad-b:var(--k-rood); --bad-d:var(--k-rood-d); --bad-soft:var(--k-rood-zacht);
  --gold:var(--k-geel); --gold-d:var(--k-geel-d);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--k-wit);color:var(--k-inkt);font:600 17px/1.45 var(--k-font);-webkit-font-smoothing:antialiased}
h1,h2,h3,.disp{font-family:var(--k-font);font-weight:900;margin:0;letter-spacing:-.01em}
button{font:inherit;color:inherit;cursor:pointer}
.wrap{max-width:600px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 16px calc(150px + env(safe-area-inset-bottom))}
.muted{color:var(--k-grijs)} .small{font-size:14px}
.pix{display:inline-block;vertical-align:middle;flex:none}

/* logo: SVG-bestanden uit img/logo */
.woordmerk,.kannik-logo{display:block;width:auto}
.woordmerk{height:26px}
.kannik-logo{height:44px}
.startlogo{margin:0 auto 6px;display:flex;justify-content:center}
.startlogo .kannik-logo{height:64px}
.brand{font-size:40px;margin:2px 0 14px;padding-top:.12em}

/* de vos */
.vos{display:block;overflow:visible}
.kv-bob{animation:kvBob 1.2s steps(1) infinite}
.kv-pupil{animation:kvLook 6s steps(1) infinite}
.kv-lid{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);animation:kvBlink 6s linear infinite}
.kv-brow{animation:kvBrow 6s steps(1) infinite}
.kv-ear{transform-box:fill-box;transform-origin:100% 100%;animation:kvEar 6s ease-in-out infinite}
@keyframes kvBob{0%{transform:translateY(0)}50%{transform:translateY(-.5px)}}
@keyframes kvLook{0%{transform:translateX(0)}22%{transform:translateX(-1px)}46%{transform:translateX(0)}52%{transform:translateX(1px)}76%{transform:translateX(0)}}
@keyframes kvBlink{0%,86%,96%,100%{transform:scaleY(0)}89%,93%{transform:scaleY(1)}}
@keyframes kvBrow{0%{transform:translateY(0)}54%{transform:translateY(-1px)}74%{transform:translateY(0)}}
@keyframes kvEar{0%,26%,36%,100%{transform:rotate(0)}29%{transform:rotate(-14deg)}32%{transform:rotate(4deg)}}
.vos-stil *{animation:none!important}
/* goed: springt een blokje op */
.vos-goed .kv-bob{animation:kvSpring .7s steps(1) 3}
.vos-goed .kv-pupil,.vos-goed .kv-brow{animation:none}
@keyframes kvSpring{0%{transform:translateY(0)}20%{transform:translateY(-1px)}40%{transform:translateY(-2px)}60%{transform:translateY(-1px)}80%{transform:translateY(0)}}
/* fout: wenkbrauwen omlaag, schudt nee */
.vos-fout .kv-bob{animation:kvNee .8s steps(1) 2}
.vos-fout .kv-brow{animation:none;transform:translateY(1px)}
.vos-fout .kv-pupil{animation:none;transform:translateY(1px)}
@keyframes kvNee{0%{transform:translateX(0)}15%{transform:translateX(-1px)}35%{transform:translateX(1px)}55%{transform:translateX(-1px)}75%{transform:translateX(1px)}90%{transform:translateX(0)}}
/* kroon: zonnebril op, één wenkbrauw omhoog */
.vos-kroon .kv-pupil,.vos-kroon .kv-lid{display:none}
.vos-kroon .kv-brow{animation:none;transform:translateY(-1px)}
/* streak: vlammetje naast hem */
.kv-vlam2{visibility:hidden}
.vos-streak .kv-vlam1{animation:kvVlam1 .5s steps(1) infinite}
.vos-streak .kv-vlam2{animation:kvVlam2 .5s steps(1) infinite}
@keyframes kvVlam1{0%{visibility:visible}50%{visibility:hidden}}
@keyframes kvVlam2{0%{visibility:hidden}50%{visibility:visible}}
@media (prefers-reduced-motion: reduce){.vos *{animation:none!important}.kv-vlam2{visibility:hidden}}

/* topbalk */
.topbar{position:sticky;top:0;z-index:5;background:var(--k-wit);display:flex;align-items:center;gap:8px;padding:10px 0 12px;border-bottom:2px solid var(--k-lijn);margin-bottom:18px}
.topbar .sp{flex:1}
.stat{display:inline-flex;align-items:center;gap:6px;font-weight:900;font-size:16px;padding:5px 12px;border-radius:999px}
.stat.lvl{background:var(--k-paars-zacht);color:var(--k-paars)}
.stat.fire{background:var(--k-roze-zacht);color:var(--k-roze-tekst)}
.stat.xp{background:var(--k-geel-zacht);color:var(--k-inkt)} .stat.xp .pix{color:var(--k-geel-d)}
.back,.link{background:none;border:0;padding:6px 0;color:var(--k-grijs);font-weight:800}
.link{text-decoration:underline;text-underline-offset:3px}
.x{font-size:24px;color:var(--k-grijs);padding:0 6px 0 0;font-weight:900}
.homebtn{background:none;border:0;padding:4px;line-height:1;color:var(--k-grijs);min-width:36px;min-height:36px;display:inline-grid;place-items:center}
.preset{display:block;margin:2px auto 0;padding:2px 0;font-size:13px}

/* knoppen: dik, 3D, zakken in */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border:0;border-radius:16px;padding:12px 20px;font-weight:900;font-size:19px;letter-spacing:.02em;text-transform:uppercase;background:var(--k-oranje-knop);color:#fff;box-shadow:0 var(--k-knop-diepte) 0 var(--k-oranje-tekst);margin-bottom:var(--k-knop-diepte)}
.btn:active{transform:translateY(var(--k-knop-diepte));box-shadow:none}
.btn:disabled{background:var(--k-lijn);color:var(--k-grijs);box-shadow:0 var(--k-knop-diepte) 0 #D9D3E3;cursor:not-allowed;transform:none}
.btn.ghost{background:#fff;color:var(--k-inkt);border:2px solid var(--k-lijn);box-shadow:0 var(--k-knop-diepte) 0 var(--k-lijn)}
.btn.green{background:var(--k-groen-tekst);box-shadow:0 var(--k-knop-diepte) 0 var(--k-groen-d)}
.btn.red{background:var(--k-rood-tekst);box-shadow:0 var(--k-knop-diepte) 0 var(--k-rood-d)}
.btn.purple{background:var(--k-paars);box-shadow:0 var(--k-knop-diepte) 0 var(--k-paars-d)}
.btn.big{width:100%}
.actions{margin-top:20px;display:flex;gap:12px}
.actions .btn{flex:1;padding-left:10px;padding-right:10px}

/* kaarten */
.card{background:#fff;border:2px solid var(--k-lijn);border-radius:var(--k-radius-m);padding:18px}
.sec{margin:28px 0 12px;font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--k-grijs)}
.hint{margin-top:16px;padding:14px 16px;border-radius:16px;background:var(--k-oranje-zacht);font-size:15px;color:var(--k-inkt)}
.hint b{font-weight:900;color:var(--k-oranje-tekst)}
.bar{height:16px;border-radius:99px;background:var(--k-lijn);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--k-oranje);border-radius:99px;transition:width .4s;position:relative}
.bar>i::after{content:"";position:absolute;left:8px;right:8px;top:4px;height:4px;border-radius:9px;background:rgba(255,255,255,.35)}
.bar.gold>i{background:var(--k-geel)}
.bar.purple>i{background:var(--k-paars)}

/* home */
.hello{display:flex;gap:16px;align-items:center;margin:4px 0 6px}
.hello .vos{width:92px;flex:none}
.hello .bubble{position:relative;border:2px solid var(--k-lijn);border-radius:16px;padding:12px 14px;font-weight:800;font-size:18px}
.hello .bubble::before{content:"";position:absolute;left:-9px;top:50%;margin-top:-7px;width:14px;height:14px;background:#fff;border-left:2px solid var(--k-lijn);border-bottom:2px solid var(--k-lijn);transform:rotate(45deg)}
.goal{display:flex;gap:12px;align-items:center}
.goal .ic{color:var(--k-oranje)}
.weekrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{border:2px solid var(--k-lijn);border-radius:12px;padding:6px 12px;font-size:15px;font-weight:800;background:#fff;box-shadow:0 2px 0 var(--k-lijn)}
.chip.on{background:var(--k-groen-zacht);border-color:var(--k-groen);color:var(--k-groen-tekst);box-shadow:0 2px 0 var(--k-groen)}
.chip.on::before{content:"✓ "}
button.chip{cursor:pointer;min-height:40px}
.opdr{border-color:var(--k-groen);background:var(--k-groen-zacht);margin-top:16px}
.opdr .kop{display:flex;gap:12px;align-items:flex-start}
.opdr .kop .pix{color:var(--k-groen-tekst);margin-top:4px}
.opdr .t{font-weight:900;color:var(--k-groen-tekst)}
.vak{display:flex;align-items:center;gap:14px;text-align:left;width:100%;border:2px solid var(--k-lijn);background:#fff;border-radius:var(--k-radius-m);padding:16px;box-shadow:0 var(--k-knop-diepte) 0 var(--k-lijn);margin-bottom:16px}
.vak:active{transform:translateY(var(--k-knop-diepte));box-shadow:none}
.vak .flag{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;font-size:30px;background:var(--k-oranje-zacht);flex:none}
.vak h3{font-size:21px}
.vak .meta{color:var(--k-grijs);font-size:14px;font-weight:700}
.vak .meta .fout{color:var(--k-groen-tekst);font-weight:800}
.vak .bar{height:10px;margin-top:8px}

/* lespad */
.unit{background:var(--k-oranje);color:#fff;border-radius:var(--k-radius-m);padding:16px 18px;margin:8px 0 28px;box-shadow:0 var(--k-knop-diepte) 0 var(--k-oranje-tekst)}
.unit .t{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.unit h2{font-size:24px}
.path{display:flex;flex-direction:column;align-items:center;gap:24px;padding-bottom:10px}
.nodewrap{display:flex;flex-direction:column;align-items:center;gap:8px;width:160px}
.node{position:relative;width:76px;height:70px;border-radius:50%;border:0;background:var(--k-oranje-knop);box-shadow:0 7px 0 var(--k-oranje-tekst);display:grid;place-items:center;font-size:28px;font-weight:900;color:#fff}
.node:active{transform:translateY(5px);box-shadow:0 2px 0 var(--k-oranje-tekst)}
.node.done{background:var(--k-geel);box-shadow:0 7px 0 var(--k-geel-d);color:var(--k-inkt)}
.node.new{background:#fff;border:3px solid var(--k-lijn);box-shadow:0 7px 0 var(--k-lijn);color:var(--k-grijs)}
.node.lock{background:var(--k-lijn);box-shadow:0 7px 0 #D9D3E3;color:var(--k-grijs)}
.node.trophy{width:86px;height:80px;background:var(--k-paars);box-shadow:0 7px 0 var(--k-paars-d);color:#fff}
.node.trophy.done{background:var(--k-paars);color:var(--k-geel)}
.node.trophy.lock{background:var(--k-lijn);box-shadow:0 7px 0 #D9D3E3;color:var(--k-grijs)}
.ring{position:absolute;inset:-9px;border-radius:50%;background:conic-gradient(var(--k-groen) calc(var(--p)*1%),var(--k-lijn) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px))}
.nodelabel{font-size:15px;font-weight:800;text-align:center;line-height:1.25}
.nodelabel small{display:block;color:var(--k-grijs);font-weight:700;font-size:13px;margin-top:2px}
.weekbtn{margin:4px 0 14px}

/* quiz */
.qtop{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.qtop .bar{flex:1}
.tag{display:inline-block;font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--k-oranje-tekst);margin-bottom:8px}
.tag.pw{color:var(--k-paars)}
.combo{display:inline-flex;align-items:center;gap:4px;font-size:15px;font-weight:900;color:var(--k-roze-tekst)}
.qtext{font-size:21px;font-weight:800;line-height:1.35;margin-bottom:22px;white-space:pre-line}
.opts{display:grid;gap:12px}
.opt{text-align:left;min-height:56px;border:2px solid var(--k-lijn);background:#fff;border-radius:16px;padding:12px 16px;display:flex;gap:12px;align-items:center;box-shadow:0 var(--k-knop-diepte) 0 var(--k-lijn);font-weight:700;margin-bottom:2px}
.opt:active{transform:translateY(var(--k-knop-diepte));box-shadow:none}
.opt .k{flex:none;width:30px;height:30px;border-radius:9px;border:2px solid var(--k-lijn);display:grid;place-items:center;font-size:14px;font-weight:900;color:var(--k-grijs)}
.opt.sel{border-color:var(--k-oranje);background:var(--k-oranje-zacht);box-shadow:0 var(--k-knop-diepte) 0 var(--k-oranje);color:var(--k-oranje-tekst)}
.opt.sel .k{border-color:var(--k-oranje);color:var(--k-oranje-tekst)}
.opt.ok{border-color:var(--k-groen);background:var(--k-groen-zacht);box-shadow:0 var(--k-knop-diepte) 0 var(--k-groen);color:var(--k-groen-tekst)}
.opt.no{border-color:var(--k-rood);background:var(--k-rood-zacht);box-shadow:0 var(--k-knop-diepte) 0 var(--k-rood);color:var(--k-rood-tekst)}
.wo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wo .opt{justify-content:center;font-weight:900;font-size:19px;padding:22px}
textarea,input#kt{width:100%;border:2px solid var(--k-lijn);border-radius:16px;padding:14px;font:inherit;font-size:18px;background:#FAF9FC;color:var(--k-inkt)}
textarea{min-height:140px;resize:vertical}
textarea:focus,input#kt:focus{outline:none;border-color:var(--k-oranje);background:#fff}
.sortrow{border:2px solid var(--k-lijn);border-radius:16px;padding:12px;margin-bottom:12px}
.sortrow .lbl{font-weight:800;margin-bottom:8px}
.selfbox{margin-top:18px;border-radius:16px;padding:16px;background:#FAF9FC;border:2px solid var(--k-lijn)}
.self{display:grid;gap:10px;margin-top:12px}
.fb{margin-top:16px;border-radius:16px;padding:14px 16px}
.fb.ok{background:var(--k-groen-zacht)} .fb.no{background:var(--k-rood-zacht)} .fb.half{background:var(--k-oranje-zacht)}
.fb b{display:block;margin-bottom:4px}
.fb .model,.selfbox .model{margin-top:8px;font-size:15px}

/* feedbackbalk */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:18px 16px calc(18px + env(safe-area-inset-bottom));animation:up .22s ease-out;border-top:2px solid transparent}
.sheet .in{max-width:600px;margin:0 auto}
.sheet.ok{background:var(--k-groen-zacht);color:var(--k-groen-tekst);border-color:var(--k-groen)}
.sheet.no{background:var(--k-rood-zacht);color:var(--k-rood-tekst);border-color:var(--k-rood)}
.sheet.half{background:var(--k-oranje-zacht);color:var(--k-oranje-tekst);border-color:var(--k-oranje)}
.sheet h3{font-size:26px;display:flex;align-items:center;gap:12px}
.sheet h3 .vos{width:52px;flex:none}
.sheet .uitleg{margin-top:6px;font-size:16px;font-weight:700;color:var(--k-inkt);white-space:pre-line;max-height:34vh;overflow:auto}
.sheet .uitleg.kop{color:inherit;font-weight:900}
.sheet .btn{width:100%;margin-top:14px}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.xpfly{position:fixed;left:50%;top:38%;transform:translate(-50%,0);font-weight:900;font-size:34px;color:var(--k-geel-d);pointer-events:none;animation:fly 1s ease-out forwards;z-index:30}
@keyframes fly{to{transform:translate(-50%,-80px);opacity:0}}

/* resultaat */
.res{text-align:center;padding-top:10px}
.res .vos{width:150px;margin:0 auto}
.res .vos.vos-streak{width:200px}
.res h1{font-size:32px;margin-top:14px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.tile{border-radius:16px;border:2px solid;overflow:hidden}
.tile .h{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:5px 4px}
.tile .v{font-size:24px;font-weight:900;padding:10px 4px;background:#fff;color:var(--k-inkt)}
.tile.g{border-color:var(--k-geel)} .tile.g .h{background:var(--k-geel);color:var(--k-inkt)}
.tile.s{border-color:var(--k-groen)} .tile.s .h{background:var(--k-groen-tekst);color:#fff}
.tile.p{border-color:var(--k-paars)} .tile.p .h{background:var(--k-paars);color:#fff}
.tile.o{border-color:var(--k-oranje)} .tile.o .h{background:var(--k-oranje-knop);color:#fff}
.bonus{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:6px 14px;border-radius:999px;background:var(--k-geel-zacht);font-weight:900}
.confetti{position:fixed;top:-12px;width:10px;height:10px;z-index:40;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(360deg)}}
.dot{width:12px;height:12px;border-radius:3px;margin-top:7px;flex:none}
.row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:2px solid var(--k-lijn)}
.row:first-child{border-top:0}
.row .t{flex:1;min-width:0}
.rev .row{align-items:flex-start}
.empty{text-align:center;padding:36px 18px}
.empty .vos{width:110px;margin:0 auto 12px}
.toast{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));max-width:520px;margin:auto;background:var(--k-inkt);color:#fff;border-radius:14px;padding:12px 16px;font-size:15px;font-weight:700;z-index:50}
.foot{margin-top:28px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}

/* records: ranglijst met jezelf */
.recs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rec{border:2px solid var(--k-lijn);border-radius:16px;padding:12px 8px;text-align:center}
.rec .v{font-size:22px;font-weight:900}
.rec .l{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--k-grijs);margin-top:2px}
.weeks{display:flex;align-items:flex-end;gap:6px;height:92px;margin-top:6px}
.weeks .w{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.weeks .w i{display:block;width:100%;border-radius:6px 6px 2px 2px;background:var(--k-lijn);min-height:4px}
.weeks .w.nu i{background:var(--k-oranje)}
.weeks .w span{font-size:11px;font-weight:800;color:var(--k-grijs)}

/* laden */
.laden{min-height:70vh;display:grid;place-items:center;text-align:center}
.laden .vos{width:120px;margin:0 auto 14px}

/* klopt niet */
.meld{margin-top:10px;text-align:center}
.meld .link{color:inherit;opacity:.85}
.meld textarea{min-height:64px;font-size:16px;background:#fff}

/* ouderpagina en inloggen */
.okop{display:flex;align-items:center;gap:10px;padding:6px 0 14px;border-bottom:2px solid var(--k-lijn);margin-bottom:18px}
.okop .woordmerk{height:30px}
.okop .sp{flex:1}
.otag{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--k-grijs);border:2px solid var(--k-lijn);border-radius:999px;padding:2px 10px}
.ohero{display:flex;gap:16px;align-items:center;margin:6px 0 18px}
.ohero .vos{width:84px;flex:none}
.ohero h1{font-size:28px}
.ohero p{margin:4px 0 0}
.form{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.form label{font-size:14px;font-weight:800;letter-spacing:.04em;margin-top:8px}
.form label:first-child{margin-top:0}
.form .btn{margin-top:14px}
.veld{width:100%;min-height:52px;border:2px solid var(--k-lijn);border-radius:14px;padding:12px 14px;font:inherit;font-size:18px;background:#FAF9FC;color:var(--k-inkt)}
.veld:focus{outline:none;border-color:var(--k-oranje);background:#fff}
.veld.code{font-size:30px;font-weight:900;letter-spacing:.3em;text-align:center}
.rij{display:flex;gap:10px;align-items:flex-start}
.rij .veld{flex:1}
.rij .btn{margin-top:0;flex:none}
.ofout{margin:10px 0 0;color:var(--k-rood-tekst);font-weight:800}
.otest{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--k-geel-zacht);font-weight:700}
.kind{margin-bottom:16px}
.kkop{display:flex;align-items:center;gap:12px}
.kkop h2{font-size:22px}
.kav{width:48px;height:48px;border-radius:14px;background:var(--k-oranje-zacht);color:var(--k-oranje-tekst);display:grid;place-items:center;font-weight:900;font-size:22px;flex:none}
.kbtn{min-height:44px;padding:8px 16px;font-size:16px;text-decoration:none}
.kstats{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.kstats .stat{font-size:14px;padding:4px 10px}
.krondes{margin-top:12px;border-top:2px solid var(--k-lijn)}
.krondes .row b{font-weight:900}
.krondes .row b.pw{color:var(--k-paars)}
.kqr{margin-top:12px;text-align:center}
.qr{width:200px;margin:0 auto;padding:8px;border:2px solid var(--k-lijn);border-radius:16px;background:#fff}
.qr svg{display:block;width:100%;height:auto}
.qr svg path,.qr svg rect[fill="black"]{fill:var(--k-inkt)}
.kqr .form{text-align:left}

/* UX-ronde 3 nov */
.topbar .terug{min-width:44px;min-height:44px;display:inline-grid;place-items:center;padding:0;margin-left:-10px;color:var(--k-inkt)}
.topbar .terug .pix{transform:none}
.topbar .ttl{font-weight:900;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}
.btn.hoofd{flex-direction:column;gap:2px;margin-top:16px;min-height:72px}
.btn.hoofd small{font-size:14px;font-weight:800;letter-spacing:0;text-transform:none;opacity:.9}
.vak .flag{color:var(--k-oranje-tekst)}
.vak .meta .fout{color:var(--k-rood-tekst)}
.hint.tip{display:flex;gap:10px;align-items:flex-start;margin-top:22px}
.hint.tip span{flex:1}
.hint.tip .tipx{font-size:18px;padding:0 4px;min-width:32px;min-height:32px;color:var(--k-grijs);background:none;border:0}
.chip{min-height:44px}
.unit{box-shadow:none}
.foutbtn{margin:0 0 22px}
.foutbtn .pix{color:var(--k-rood-tekst)}
/* lespad: één actieve knoop */
.node.actief{width:86px;height:80px;background:var(--k-oranje-knop);color:#fff}
.node.new{background:#fff;border:3px solid var(--k-lijn);box-shadow:0 7px 0 var(--k-lijn);color:var(--k-grijs)}
.startlabel{position:relative;background:#fff;border:2px solid var(--k-lijn);border-radius:12px;padding:4px 12px;font-size:14px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--k-oranje-tekst);margin-bottom:6px;box-shadow:0 2px 0 var(--k-lijn)}
.startlabel::after{content:"";position:absolute;left:50%;bottom:-7px;margin-left:-6px;width:10px;height:10px;background:#fff;border-right:2px solid var(--k-lijn);border-bottom:2px solid var(--k-lijn);transform:rotate(45deg)}
/* quiz */
.qtop .x{min-width:44px;min-height:44px;display:inline-grid;place-items:center;padding:0;margin-left:-10px}
.teller{font-size:14px;font-weight:800;color:var(--k-grijs);min-width:36px;text-align:right}
.qtop.pw .teller{color:var(--k-paars)}
.xppil{margin-left:auto;background:var(--k-geel);color:var(--k-inkt);border-radius:999px;padding:4px 12px;font-size:18px;font-weight:900;animation:pil .35s steps(3)}
@keyframes pil{from{transform:scale(.6)}to{transform:scale(1)}}
.sheet .uitleg.extra{color:inherit;font-weight:800;font-size:15px;margin-top:2px}
.sheet.stop{background:#fff;border-color:var(--k-lijn);box-shadow:0 -8px 24px rgba(30,21,48,.12)}
.sheet.stop h3{color:var(--k-inkt)}
.sheet.stop .btn.ghost{margin-top:10px}
/* meerdere goed: eigen vinkvak */
.opts [data-m] .k{border-radius:8px}
.opts [data-m].sel .k{background:var(--k-oranje-knop);border-color:var(--k-oranje-knop)}
.opts [data-m].sel .k::after,.opts [data-m].ok .k::after{content:"";width:12px;height:7px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:translateY(-2px) rotate(-45deg)}
.opts [data-m].ok .k{background:var(--k-groen);border-color:var(--k-groen)}
.opts [data-m] .gemist{margin-left:auto;font-weight:800;font-size:13px}
/* sorteren: selectie is oranje, pas na controle groen of rood */
.sortrow .chip.on{background:var(--k-oranje-zacht);border-color:var(--k-oranje);color:var(--k-oranje-tekst);box-shadow:0 2px 0 var(--k-oranje)}
.sortrow .chip.on::before{content:none}
.sortrow .chip.ok{background:var(--k-groen-zacht);border-color:var(--k-groen);color:var(--k-groen-tekst);box-shadow:0 2px 0 var(--k-groen)}
.sortrow .chip.ok::before{content:"✓ "}
.sortrow .chip.no{background:var(--k-rood-zacht);border-color:var(--k-rood);color:var(--k-rood-tekst);box-shadow:0 2px 0 var(--k-rood)}
.sortrow .chip.juist{border-color:var(--k-groen);border-style:dashed;color:var(--k-groen-tekst)}
/* jij tegen jezelf: rustiger labels */
.weeks .w span{font-size:13px;font-weight:700}
.rec .l{font-size:13px;letter-spacing:0;text-transform:none;font-weight:700}
@media (prefers-reduced-motion: reduce){.xppil{animation:none}}
.wis{margin-top:16px;padding-top:12px;border-top:2px solid var(--k-lijn);text-align:center}
.wis .link{color:var(--k-rood-tekst)}
.wis .btn{margin-top:8px}
.wis .wisja{color:var(--k-rood-tekst)}
.form .blijf{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;letter-spacing:0;margin-top:14px;min-height:44px;cursor:pointer}
.form .blijf input{width:22px;height:22px;accent-color:var(--k-oranje-knop);flex:none}
.vak .flag .pix{max-width:40px;height:auto}
.topbar .logo{display:inline-flex;align-items:center}
.topbar .logo .woordmerk{height:28px}
.topbar .ttl{max-width:55%}

.ico{display:inline-block;vertical-align:middle;flex:none}
.stat.xp .ico{color:var(--k-geel-d)}
.bonus .ico{color:var(--k-geel-d)}
.opdr{position:relative}
.opdrweg{position:absolute;top:8px;right:8px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--k-groen-tekst);font-size:17px;font-weight:800;cursor:pointer}
.opdrweg:hover{background:rgba(0,0,0,.06)}
.opdr .kop{padding-right:30px}

/* lespad compact: knoop links, tekst rechts, overzicht bovenin */
.unit{margin:8px 0 10px;padding:14px 16px}
.unit h2{font-size:22px}
.overzicht{display:flex;align-items:center;gap:10px;margin-top:10px}
.stippen{display:flex;flex-wrap:wrap;gap:5px;flex:1}
.telt{font-size:14px;font-weight:800;white-space:nowrap}
.stip{display:inline-block;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.35)}
.unit .stip.done{background:var(--k-geel)}
.unit .stip.actief{background:#fff}
.unit .stip.pw{border-radius:4px}
.unit .stip.pw.open,.unit .stip.pw.done{background:var(--k-paars)}
.legenda{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;font-weight:700;color:var(--k-grijs);margin:0 2px 18px}
.legenda span{display:inline-flex;align-items:center;gap:6px}
.legenda .stip{width:12px;height:12px}
.legenda .stip.done{background:var(--k-geel)}
.legenda .stip.actief{background:var(--k-oranje-knop)}
.legenda .stip.new{background:#fff;border:2px solid var(--k-lijn)}
.legenda .stip.pw{background:var(--k-paars);border-radius:3px}
.path{align-items:flex-start;gap:14px;padding:0 0 26px}
.nodewrap{flex-direction:row;align-items:center;gap:14px;width:auto;max-width:100%}
.node{width:58px;height:54px;font-size:22px;box-shadow:0 5px 0 var(--k-oranje-tekst);flex:none}
.node.done{box-shadow:0 5px 0 var(--k-geel-d)}
.node.new{box-shadow:0 5px 0 var(--k-lijn)}
.node.lock,.node.trophy.lock{box-shadow:0 5px 0 #D9D3E3}
.node.actief{width:66px;height:62px}
.node.trophy{width:66px;height:62px;box-shadow:0 5px 0 var(--k-paars-d)}
.node.trophy .pix{width:26px;height:auto}
.nodelabel{text-align:left;font-size:15px;min-width:0}
.startlabel{display:inline-block;margin:0 0 4px;padding:2px 8px;font-size:12px;border-radius:8px;box-shadow:none}
.startlabel::after{display:none}
.nodelabel .startlabel{display:table}
.path .ring{inset:-6px}
/* lespad iets ruimer */
.path{gap:30px;padding:6px 0 34px}
.nodewrap{gap:18px}
.node{width:64px;height:60px}
.node.actief,.node.trophy{width:72px;height:68px}
.path .ring{inset:-8px}
.legenda{margin-bottom:26px}
.nodelabel small{margin-top:4px}
.path{padding-left:10px}

/* overzicht: genummerde rondjes, gelijk aan het pad */
.stippen{gap:6px}
.stip{width:26px;height:26px;border:0;padding:0;border-radius:50%;font:900 13px/26px Nunito,sans-serif;text-align:center;color:#fff;background:rgba(255,255,255,.28);cursor:pointer}
.unit .stip.done{background:var(--k-geel);color:var(--k-inkt)}
.unit .stip.actief{background:#fff;color:var(--k-oranje-tekst)}
.unit .stip.pw{width:34px;border-radius:8px;font-size:11px;background:rgba(255,255,255,.28)}
.unit .stip.pw.open,.unit .stip.pw.done{background:var(--k-paars);color:#fff}
.telt{text-align:right;line-height:1.3;font-size:13px}
.lg{display:inline-block;width:12px;height:12px;border-radius:50%}
.lg.done{background:var(--k-geel)}.lg.actief{background:var(--k-oranje-knop)}.lg.new{background:#fff;border:2px solid var(--k-lijn)}

/* uitklapper Wat zit erin? */
.inhoud{margin:-12px 0 24px;border:2px solid var(--k-lijn);border-radius:var(--k-radius-m);background:#fff}
.inhoud summary{cursor:pointer;list-style:none;padding:12px 16px;font-weight:900;font-size:15px;display:flex;align-items:center;gap:8px}
.inhoud summary::-webkit-details-marker{display:none}
.inhoud summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:3px solid var(--k-grijs);border-bottom:3px solid var(--k-grijs);transform:rotate(45deg) translateY(-3px)}
.inhoud[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.inhoud ol{list-style:none;margin:0;padding:0 16px 14px;display:grid;gap:12px}
.inhoud li{display:flex;gap:12px;align-items:flex-start}
.inhoud .nr{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:900;background:#fff;border:2px solid var(--k-lijn);color:var(--k-grijs)}
.inhoud .nr.done{background:var(--k-geel);border-color:var(--k-geel);color:var(--k-inkt)}
.inhoud .nr.actief{background:var(--k-oranje-knop);border-color:var(--k-oranje-knop);color:#fff}
.inhoud li b{font-size:15px;line-height:1.3}
.inhoud li small{display:block;color:var(--k-grijs);font-size:14px;font-weight:600;line-height:1.35;margin-top:2px}

.uitlog{text-align:center;margin:18px 0 8px}
.uitlog .link{color:var(--k-grijs);font-weight:700}
/* logo in de balk is de knop naar home */
.topbar button.logo{background:none;border:0;padding:6px 0;margin:0;cursor:pointer;min-height:44px}
.topbar .terug{margin-right:-2px}

/* keuze leerling of ouder bij een nieuw mailadres */
.keuze{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.keuze label{position:relative;display:block;cursor:pointer}
.keuze input{position:absolute;opacity:0}
.keuze span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:56px;padding:8px 10px;border:2px solid var(--k-lijn);border-radius:var(--k-radius-m);font-weight:800;font-size:15px;background:#fff}
.keuze input:checked+span{border-color:var(--k-oranje);background:var(--k-oranje-zacht);color:var(--k-oranje-tekst)}
.keuze input:focus-visible+span{outline:3px solid var(--k-oranje);outline-offset:2px}
.keuze label{display:flex}
.keuze span{flex:1;min-height:56px;box-sizing:border-box;margin:0}
.form .keuze label{margin:0;letter-spacing:0}

/* beheer */
.bcard{padding:6px 14px}
.bvak{border-bottom:2px solid var(--k-lijn)}
.bvak:last-child{border-bottom:0}
.bvak summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 2px;cursor:pointer;list-style:none;font-size:16px}
.bvak summary::-webkit-details-marker{display:none}
.bh{font-weight:900;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--k-grijs);margin:6px 0 4px}
.bo{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--k-lijn)}
.bon{flex:1 1 180px;min-width:0}
.boa{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.boa label{display:inline-flex;align-items:center;gap:6px;margin:0;letter-spacing:0}
.bdat{font:inherit;padding:6px 8px;border:2px solid var(--k-lijn);border-radius:10px;background:#fff}
.btn.small{min-height:40px;padding:8px 14px;font-size:14px}
.bst{font-weight:800}
.bst.live{color:var(--k-groen-tekst)}
.bst.gepland{color:var(--k-paars)}
.bst.klaar{color:var(--k-oranje-tekst)}
.bmeld{padding:12px 0;border-top:1px solid var(--k-lijn)}
.bmeld:first-child{border-top:0;padding-top:0}

/* hoofdstuk wegzetten en terughalen */
.unit{position:relative}
.wegzet{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.22);color:#fff;border:0;border-radius:999px;padding:6px 12px;font:800 13px Nunito,sans-serif;cursor:pointer;min-height:32px}
.weglijst{margin:4px 0 8px;border:2px solid var(--k-lijn);border-radius:var(--k-radius-m);background:#fff}
.weglijst summary{padding:12px 16px;font-weight:800;color:var(--k-grijs);cursor:pointer}
.wegrij{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--k-lijn)}
.unit .t{padding-right:96px}
.wegzet{z-index:2}

/* beloningen */
.belkop{display:flex;justify-content:space-between;align-items:center;font-weight:800;margin-bottom:4px}
.belkop b{display:inline-flex;align-items:center;gap:6px;font-size:20px}
.belkop .ico{color:var(--k-geel-d)}
.belrij{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--k-lijn)}
.belrij:first-of-type{border-top:0}
.belopen{margin-top:8px;padding:10px 12px;border-radius:12px;background:var(--k-geel-zacht)}

/* meekijken als ouder */
.kijkbalk{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;background:var(--k-paars);color:#fff;border-radius:14px;padding:10px 14px;margin:8px 0 0;font-size:14px;font-weight:700}
.kijkbalk a{color:#fff;font-weight:900;text-decoration:underline;text-underline-offset:3px}
.topbar.metkijk{flex-wrap:wrap}
.topbar .kijkbalk{flex:1 1 100%;margin:0 0 6px}

/* pakketten in beheer */
.bpk{padding:6px 0 4px}
.bpkkop{display:flex;align-items:center;gap:4px;padding:10px 2px 4px;font-size:17px;border-bottom:2px solid var(--k-oranje)}
.pen{background:none;border:0;color:var(--k-grijs);font-size:15px;padding:4px 8px;cursor:pointer;min-height:32px}
select.veld{appearance:auto;background:#fff}
#klasvak label{display:block;margin-top:14px}

/* volgorde */
.vlijst{list-style:none;counter-reset:v;margin:0 0 12px;padding:0;display:grid;gap:8px}
.vlijst li{counter-increment:v;display:flex;align-items:center;gap:10px;min-height:48px;border:2px dashed var(--k-lijn);border-radius:14px;padding:4px 8px}
.vlijst li::before{content:counter(v);font-weight:900;color:var(--k-grijs);width:22px;text-align:center}
.vlijst li:not(.leeg){border-style:solid}
.vlijst li.ok{border-color:var(--k-groen);background:#EAF8EF}.vlijst li.no{border-color:var(--k-rood);background:#FDECEC}
.vitem.gekozen{flex:1;text-align:left;background:none;border:0;font:800 16px Nunito,sans-serif;color:var(--k-inkt);padding:8px 4px;cursor:pointer}
.vpool{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
/* koppel */
.koppel{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.kkol{display:grid;gap:8px;align-content:start}
.kitem{min-height:52px;border:2px solid var(--k-lijn);border-radius:14px;background:#fff;font:800 15px Nunito,sans-serif;color:var(--k-inkt);padding:8px 10px;text-align:left;cursor:pointer;box-shadow:0 3px 0 var(--k-lijn)}
.kitem.sel{border-color:var(--k-oranje);background:var(--k-oranje-zacht)}
.kitem.gepaard{border-color:var(--kk);box-shadow:0 3px 0 var(--kk)}
.kitem.ok{border-color:var(--k-groen);background:#EAF8EF;box-shadow:0 3px 0 var(--k-groen)}.kitem.no{border-color:var(--k-rood);background:#FDECEC;box-shadow:0 3px 0 var(--k-rood)}
/* aanwijs */
.aanwijs{position:relative;border:2px solid var(--k-lijn);border-radius:16px;overflow:hidden;margin-bottom:8px;cursor:crosshair;touch-action:manipulation;user-select:none}
.aanwijs img{display:block;width:100%;height:auto}
.awpunt{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:4px solid var(--k-oranje);background:rgba(255,255,255,.6)}
.awpunt.ok{border-color:var(--k-groen)}.awpunt.no{border-color:var(--k-rood)}
.awdoel{position:absolute;border:3px solid var(--k-groen);border-radius:10px;background:rgba(34,179,94,.15)}

/* winkel */
.winkel{background:linear-gradient(160deg,#FFF6D6 0%,#FFF1E6 45%,#F1EAFE 100%);border-color:#FFE2B8}
.wsaldo{display:flex;justify-content:space-between;align-items:center;font-weight:800}
.wsaldo b{display:inline-flex;align-items:center;gap:6px;font-size:24px;background:var(--k-geel);color:var(--k-inkt);padding:6px 14px;border-radius:999px;box-shadow:0 3px 0 var(--k-geel-d)}
.wsaldo .ico{color:var(--k-inkt)}
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.witem{display:flex;flex-direction:column;gap:6px;background:var(--wz);border:2px solid var(--wk);border-radius:16px;padding:12px;box-shadow:0 4px 0 var(--wk);min-height:118px}
.wnaam{font-weight:900;font-size:16px;line-height:1.2;flex:1}
.wprijs{display:inline-flex;align-items:center;gap:4px;font-weight:900;color:var(--wk)}
.wprijs .ico{color:var(--wk)}
.wkoop{border:0;border-radius:12px;background:var(--wk);color:#fff;font:900 14px Nunito,sans-serif;letter-spacing:.04em;text-transform:uppercase;padding:10px 8px;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.wkoop:active{transform:translateY(2px);box-shadow:none}
.wbar{height:8px;border-radius:99px;background:rgba(0,0,0,.08);overflow:hidden}.wbar i{display:block;height:100%;background:var(--wk);border-radius:99px}
.wnog{font-size:13px;font-weight:700;color:var(--k-grijs)}
.wafschrift{margin-top:12px}
.wafschrift summary{cursor:pointer;font-weight:800;color:var(--k-grijs)}
.wrij{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid rgba(0,0,0,.08)}
.wrij small{display:block;color:var(--k-grijs);font-size:12px}
.wrij .plus{color:var(--k-groen-tekst)}.wrij .min{color:var(--k-rood-tekst)}
.stat.saldo{background:var(--k-oranje-zacht);color:var(--k-oranje-tekst)}
button.stat{border:0;font:inherit;cursor:pointer}
#bel{scroll-margin-top:90px}

/* overhoren */
.ohteller{font-weight:900;color:var(--k-grijs);margin:4px 0 10px}
.ohkaart{padding:18px}
.ohvraag{font-size:20px;font-weight:900;line-height:1.3;margin:6px 0 10px;white-space:pre-line}
.ohopt{margin:0 0 6px;padding-left:22px;display:grid;gap:4px;font-weight:700}
.ohantw{margin-top:12px;padding:12px 14px;border-radius:14px;background:#EAF8EF;border:2px solid var(--k-groen)}
.ohgoed{font-weight:900;font-size:18px;white-space:pre-line;margin-top:2px}
.btn.green{background:var(--k-groen);box-shadow:0 5px 0 var(--k-groen-tekst);color:#fff}
.btn.red{background:var(--k-rood);box-shadow:0 5px 0 var(--k-rood-tekst);color:#fff}
.ohkaart .rij .btn,#onog,#oterug{font-size:16px;padding-left:8px;padding-right:8px;white-space:nowrap}

/* winkelpicto's: zweven in stapjes, wiebelen als je het kunt kopen, springen bij inwisselen */
.wpicvak{height:52px;display:flex;align-items:flex-end}
.wpic{display:block;animation:wZweef 2.4s steps(2) infinite;animation-delay:var(--wd,0s);transform-origin:50% 100%}
.witem.kan .wpic{animation:wWiebel 1.6s steps(4) infinite;animation-delay:var(--wd,0s)}
.witem:not(.kan) .wpic{filter:saturate(.55);opacity:.85}
.witem.gekocht .wpic{animation:wSprong .8s steps(6) 1}
.witem.gekocht{animation:wFlits .8s steps(4) 1}
@keyframes wZweef{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes wWiebel{0%,60%,100%{transform:rotate(0) translateY(0)}70%{transform:rotate(-8deg) translateY(-4px)}80%{transform:rotate(8deg) translateY(-4px)}90%{transform:rotate(-4deg) translateY(-2px)}}
@keyframes wSprong{0%{transform:scale(1)}30%{transform:scale(1.35) translateY(-10px)}60%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes wFlits{0%,100%{box-shadow:0 4px 0 var(--wk)}50%{box-shadow:0 0 0 6px var(--wk)}}
.wconf{position:fixed;width:8px;height:8px;z-index:50;pointer-events:none;animation:wConf .9s steps(9) forwards}
@keyframes wConf{to{transform:translate(var(--dx),var(--dy)) rotate(180deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.wpic,.witem.kan .wpic,.witem.gekocht,.witem.gekocht .wpic,.wconf{animation:none}}

/* navigatie voor kinderen: duidelijke terugknop, menubalk onderin, hele rij aanklikbaar */
.terugpil{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--k-lijn);background:#fff;border-radius:999px;padding:8px 14px 8px 10px;font:900 15px Nunito,sans-serif;color:var(--k-inkt);cursor:pointer;min-height:44px;box-shadow:0 3px 0 var(--k-lijn)}
.terugpil:active{transform:translateY(2px);box-shadow:none}
.terugpil .pix{color:var(--k-oranje-tekst)}
.tabbalk{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;gap:4px;background:#fff;border-top:2px solid var(--k-lijn);padding:6px 10px calc(6px + env(safe-area-inset-bottom))}
.tabbalk button{flex:1;max-width:180px;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;border-radius:14px;padding:6px 4px;font:800 12px Nunito,sans-serif;color:var(--k-grijs);cursor:pointer;min-height:54px}
.tabbalk button .pix,.tabbalk button .ico{color:var(--k-grijs)}
.tabbalk button.aan{background:var(--k-oranje-zacht);color:var(--k-oranje-tekst)}
.tabbalk button.aan .pix{color:var(--k-oranje-tekst)}
.tabbalk [data-tab=winkel] .ico{color:var(--k-geel-d)}
.sheet{z-index:30}
.vak .pijlr{flex:none;align-self:center;margin-left:6px;color:var(--k-grijs);transform:rotate(180deg)}
.nodelabel{cursor:pointer}
.wregel{margin:12px 0 0;font-size:14px;font-weight:700;color:var(--k-grijs);line-height:1.4}

/* winkel dicht of open */
.winkeldicht{background:#F6F4FA}
.winkeldicht .wdkop{display:flex;align-items:center;gap:12px}
.winkeldicht .pix{color:var(--k-grijs)}
.winkeldicht.open{background:linear-gradient(160deg,#FFF6D6 0%,#FFF1E6 50%,#F1EAFE 100%);border-color:#FFE2B8}
.winkeldicht.open .wpic{animation:wWiebel 1.6s steps(4) infinite}
.wdsaldo{display:inline-flex;align-items:center;gap:4px;background:var(--k-geel-zacht);border-radius:999px;padding:4px 10px;font-weight:900}
.winkelbtn{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;background:var(--k-paars);box-shadow:0 5px 0 var(--k-paars-d);color:#fff}
.winkeldicht{padding:12px 16px}
.winkeldicht b{font-size:15px}
.winkeldicht.open .wpic{animation:none}
.stat.xp{position:relative}
.stat.xp.winkelopen::after{content:"";position:absolute;top:-2px;right:-2px;width:12px;height:12px;border-radius:50%;background:var(--k-groen);border:2px solid #fff}
/* meldingen bovenin, onder de balk, zodat ze niet achter de menubalk vallen */
.toast{top:calc(78px + env(safe-area-inset-top));bottom:auto;animation:toastIn .25s steps(3)}
@keyframes toastIn{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}

/* winkel aanpassen door ouder */
.bpic{flex:none;display:flex;align-items:center}
.bedit{padding:12px 0;border-top:1px solid var(--k-lijn)}
.pkies{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pkies label{position:relative;margin:0;cursor:pointer}
.pkies input{position:absolute;opacity:0}
.pkies span{display:grid;place-items:center;width:46px;height:46px;border:2px solid var(--k-lijn);border-radius:12px;background:#fff}
.pkies input:checked+span{border-color:var(--k-oranje);background:var(--k-oranje-zacht)}
.pkies .wpic{animation:none}

/* kindkaart: rondjes en XP inklapbaar */
.kuit{margin-top:10px;border-top:1px solid var(--k-lijn);padding-top:4px}
.kuit summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:15px;padding:8px 0;min-height:40px}
.kuit summary::-webkit-details-marker{display:none}
.kuit summary::after{content:"";width:8px;height:8px;border-right:3px solid var(--k-grijs);border-bottom:3px solid var(--k-grijs);transform:rotate(45deg) translateY(-3px)}
.kuit[open] summary::after{transform:rotate(-135deg)}
.kuit .krondes{margin-top:0}
.kindbij{padding:4px 16px 8px;margin-top:18px}
.kindbij .kuit:first-child{border-top:0}
.kindbij .form{padding-bottom:8px}
.redenen{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.redenen .chip.on{border-color:var(--k-oranje);background:var(--k-oranje-zacht);color:var(--k-oranje-tekst)}

/* feedbackloop in beheer */
.rchip{display:inline-block;background:var(--k-oranje-zacht);color:var(--k-oranje-tekst);border-radius:8px;padding:1px 8px;font-weight:800}
.rij.wrap{flex-wrap:wrap}
.vedit{margin-top:10px;padding:12px;border:2px solid var(--k-oranje);border-radius:14px;background:#FFFBF7}
.vedit textarea.veld{font:inherit;resize:vertical;min-height:0}
.vedit .mono{font-family:ui-monospace,monospace;font-size:13px}
.vedit .goed{display:inline-flex;align-items:center;gap:4px;margin:0;font-size:13px;white-space:nowrap;letter-spacing:0}
.vedit .rij{align-items:center;margin-top:6px}
.card.reactie{border-color:var(--k-paars);background:#F6F1FF}
.reactie .kop{display:flex;gap:10px;align-items:flex-start}
.reactie .vos{width:44px;flex:none}
.reactie .t{font-weight:900;color:var(--k-paars)}
.rtekst{margin-top:6px;font-weight:700;font-size:16px}

/* winkelklok: 60 seconden */
.wklok{position:sticky;top:76px;z-index:4;background:#fff;border:2px solid var(--k-lijn);border-radius:14px;padding:8px 12px;margin:0 0 10px;font-size:14px;font-weight:700}
.wklok b{font-weight:900;color:var(--k-oranje-tekst)}
.wklok i{display:block;height:6px;border-radius:99px;background:var(--k-lijn);margin-top:6px;overflow:hidden}
.wklok i b{display:block;height:100%;width:100%;background:var(--k-oranje)}

/* leestekst boven een vraag */
.lees{background:#fff;border:2px solid var(--k-lijn);border-radius:16px;margin:4px 0 16px;overflow:hidden}
.lees summary{cursor:pointer;list-style:none;padding:10px 14px;font-weight:800;font-size:15px;display:flex;gap:8px;align-items:center}
.lees summary::-webkit-details-marker{display:none}
.lees summary::after{content:'▾';margin-left:auto;color:var(--muted)}
.lees:not([open]) summary::after{content:'▸'}
.lees .leesin{padding:0 14px 14px;font-size:16px;line-height:1.5;white-space:pre-line;max-height:46vh;overflow-y:auto;border-top:2px solid var(--k-lijn);padding-top:10px}
.lees u{text-decoration-thickness:2px;text-underline-offset:3px;font-weight:700}