/* ============================================================
   Stijlen voor Çalış Artık Da. Afgesplitst van index.html voor
   overzicht en caching. Bewerk hier het uiterlijk van de site.
   ============================================================ */
:root{
  --ground:#f5faf7; --surface:#ffffff; --surface-2:#eaf5ef;
  --ink:#0f2a22; --ink-soft:#41645a; --ink-faint:#5f7d72;
  --line:#d6e7de; --line-soft:#e7f1eb;
  --brand:#12a06a; --brand-deep:#0a7048; --brand-tint:#dcf3e8;
  --accent:#f2934b; --accent-deep:#d8722a; --accent-tint:#fdeede;
  --good:#1f9d6b; --good-tint:#e2f4ec; --bad:#d64545; --bad-tint:#fbe6e6;
  --shadow:0 1px 2px rgba(15,42,34,.06), 0 8px 24px -12px rgba(15,42,34,.22);
  --shadow-lg:0 24px 60px -22px rgba(10,112,72,.45);
  --radius:14px; --maxw:1140px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0b1712; --surface:#122620; --surface-2:#173029;
    --ink:#eaf6f0; --ink-soft:#a9c8bc; --ink-faint:#6f8f82;
    --line:#25423a; --line-soft:#1d352e;
    --brand:#39c78d; --brand-deep:#7ce0b6; --brand-tint:#13302a;
    --accent:#ff9a5e; --accent-deep:#ffb083; --accent-tint:#3a2419;
    --good:#3bc487; --good-tint:#15332a; --bad:#f2726f; --bad-tint:#33191b;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
    --shadow-lg:0 28px 70px -24px rgba(0,0,0,.8);
  }
}
:root[data-theme="light"]{
  --ground:#f5faf7; --surface:#ffffff; --surface-2:#eaf5ef; --ink:#0f2a22; --ink-soft:#41645a;
  --ink-faint:#5f7d72; --line:#d6e7de; --line-soft:#e7f1eb; --brand:#12a06a; --brand-deep:#0a7048;
  --brand-tint:#dcf3e8; --accent:#f2934b; --accent-deep:#d8722a; --accent-tint:#fdeede;
  --good:#1f9d6b; --good-tint:#e2f4ec; --bad:#d64545; --bad-tint:#fbe6e6;
  --shadow:0 1px 2px rgba(15,42,34,.06), 0 8px 24px -12px rgba(15,42,34,.22);
  --shadow-lg:0 24px 60px -22px rgba(10,112,72,.45);
}
:root[data-theme="dark"]{
  --ground:#0b1712; --surface:#122620; --surface-2:#173029; --ink:#eaf6f0; --ink-soft:#a9c8bc;
  --ink-faint:#6f8f82; --line:#25423a; --line-soft:#1d352e; --brand:#39c78d; --brand-deep:#7ce0b6;
  --brand-tint:#13302a; --accent:#ff9a5e; --accent-deep:#ffb083; --accent-tint:#3a2419;
  --good:#3bc487; --good-tint:#15332a; --bad:#f2726f; --bad-tint:#33191b;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  --shadow-lg:0 28px 70px -24px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--ink); background:var(--ground);
  line-height:1.55; -webkit-font-smoothing:antialiased; font-size:16px; min-height:100vh;
}
h1,h2,h3{margin:0; line-height:1.15; letter-spacing:-.02em; text-wrap:balance; font-weight:800}
p{margin:0}
button{font-family:inherit; cursor:pointer}
.tnum{font-variant-numeric:tabular-nums}
.hidden{display:none !important}
/* alleen voor schermlezers: onzichtbaar op het scherm, wél voorgelezen */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
/* duidelijke toetsenbord-focus voor álle interactieve elementen (a11y) */
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid color-mix(in srgb,var(--brand) 60%,transparent); outline-offset:2px; border-radius:8px}
a{color:var(--brand-deep)}

/* ---------- top bar ---------- */
.topbar{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--surface) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.topbar-in{max-width:var(--maxw); margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:16px}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:-.02em; font-size:18px; color:var(--ink)}
.logo{width:34px; height:34px; border-radius:9px; background:linear-gradient(140deg,var(--brand),var(--brand-deep));
  display:grid; place-items:center; color:#fff; font-weight:800; box-shadow:0 4px 12px -4px var(--brand); flex:0 0 auto; font-size:15px}
.brand small{display:block; font-size:11px; font-weight:600; color:var(--ink-faint); letter-spacing:.02em}
.spacer{flex:1}
.iconbtn{background:var(--surface-2); border:1px solid var(--line); color:var(--ink-soft); width:38px; height:38px;
  border-radius:10px; display:grid; place-items:center; font-size:16px; transition:.15s}
.iconbtn:hover{color:var(--ink); border-color:var(--brand)}
.userchip{display:flex; align-items:center; gap:9px; padding:5px 12px 5px 5px; border:1px solid var(--line);
  border-radius:999px; background:var(--surface-2); font-weight:600; font-size:14px; color:var(--ink)}
.avatar{width:30px; height:30px; border-radius:50%; background:linear-gradient(140deg,var(--accent),var(--accent-deep));
  color:#fff; display:grid; place-items:center; font-size:13px; font-weight:800; flex:0 0 auto}
.linkbtn{background:none; border:none; color:var(--ink-soft); font-weight:600; font-size:14px; padding:8px 10px; border-radius:8px}
.linkbtn:hover{color:var(--brand-deep); background:var(--surface-2)}

/* ---------- login ---------- */
.login-wrap{min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr}
@media (max-width:880px){.login-wrap{grid-template-columns:1fr}}
.login-aside{position:relative; overflow:hidden; color:#eafaf2; padding:48px;
  background:radial-gradient(120% 120% at 15% 10%,#12a06a 0%,#0a7048 55%,#064d31 100%);
  display:flex; flex-direction:column; justify-content:space-between;}
@media (max-width:880px){.login-aside{display:none}}
.login-aside canvas{position:absolute; inset:0; width:100%; height:100%; opacity:.5}
.aside-top{position:relative; z-index:2; display:flex; align-items:center; gap:11px; font-weight:800; font-size:19px}
.aside-mid{position:relative; z-index:2; max-width:420px}
.aside-mid .eyebrow{text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:700; color:#a9f0cf; margin-bottom:16px}
.aside-mid .aside-title{font-size:clamp(30px,3.6vw,44px); color:#fff; line-height:1.08; font-weight:800; letter-spacing:-.02em; text-wrap:balance; margin:0}
.aside-mid p{margin-top:16px; color:#cff3e2; font-size:16px; max-width:380px}
.aside-stats{position:relative; z-index:2; display:flex; gap:30px}
.aside-stats .n{font-size:26px; font-weight:800; color:#fff}
.aside-stats .l{font-size:12.5px; color:#a9f0cf; letter-spacing:.02em}

.login-main{display:grid; place-items:center; padding:40px 24px; background:var(--ground); position:relative}
.themebtn{position:absolute; top:20px; right:22px}
.login-card{width:100%; max-width:400px}
.login-card .mobile-brand{display:none}
@media (max-width:880px){.login-card .mobile-brand{display:flex; margin-bottom:26px}}
.login-card h1{font-size:27px}
.login-card .sub{color:var(--ink-soft); margin-top:8px; font-size:15px}
.sso{display:grid; gap:10px; margin-top:26px}
.sso-btn{display:flex; align-items:center; gap:11px; justify-content:center; padding:11px 14px; border-radius:11px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:650; font-size:14.5px; transition:.15s}
.sso-btn:hover{border-color:var(--brand); background:var(--surface-2); transform:translateY(-1px)}
.sso-btn .g{width:19px; height:19px; flex:0 0 auto}
.divider{display:flex; align-items:center; gap:14px; color:var(--ink-faint); font-size:12.5px; margin:22px 0; font-weight:600}
.divider::before,.divider::after{content:""; height:1px; flex:1; background:var(--line)}
.field{margin-bottom:15px}
.field label{display:block; font-size:13px; font-weight:700; color:var(--ink-soft); margin-bottom:7px}
.field input{width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:11px; background:var(--surface);
  color:var(--ink); font-size:15px; font-family:inherit; transition:.15s}
.field input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.field .lbl-row{display:flex; justify-content:space-between; align-items:center}
.field .lbl-row a{font-size:12.5px; font-weight:600}
.row-between{display:flex; align-items:center; justify-content:space-between; margin:4px 0 20px}
.check{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-soft); font-weight:600}
.check input{width:16px; height:16px; accent-color:var(--brand)}
.btn-primary{width:100%; padding:13px; border:none; border-radius:11px; background:linear-gradient(180deg,var(--brand),var(--brand-deep));
  color:#fff; font-weight:750; font-size:15.5px; box-shadow:0 8px 20px -8px var(--brand); transition:.15s}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 12px 26px -8px var(--brand)}
.btn-primary:active{transform:translateY(0)}
.signup-line{text-align:center; margin-top:22px; font-size:14px; color:var(--ink-soft)}
.signup-line button{background:none; border:none; color:var(--brand-deep); font-weight:750; font-size:14px; padding:0}
.login-error{margin-top:14px; padding:11px 13px; border-radius:10px; background:var(--bad-tint); border:1px solid color-mix(in srgb,var(--bad) 45%,transparent);
  font-size:13px; color:var(--bad); font-weight:600; display:none}
.login-error.show{display:block}

/* ---------- app / dashboard ---------- */
.app{max-width:var(--maxw); margin:0 auto; padding:26px 20px 80px}
.welcome{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:6px 0 22px; flex-wrap:wrap}
.welcome h1{font-size:26px}
.welcome p{color:var(--ink-soft); margin-top:5px; font-size:14.5px}
.stat-strip{display:flex; gap:12px; flex-wrap:wrap}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 16px; min-width:120px; box-shadow:var(--shadow)}
.stat .n{font-size:22px; font-weight:800; letter-spacing:-.02em}
.stat .l{font-size:12px; color:var(--ink-faint); font-weight:600; letter-spacing:.02em; margin-top:1px}
.stat.accent .n{color:var(--accent-deep)}

/* ---------- ga verder + badges ---------- */
.continue-bar{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:2px 2px 6px; padding:14px 18px; border-radius:var(--radius);
  background:linear-gradient(150deg,var(--brand),var(--brand-deep)); color:#fff; box-shadow:var(--shadow)}
.continue-bar.cb-done{background:linear-gradient(150deg,var(--good),var(--brand-deep))}
.continue-bar .cb-text{display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0}
.continue-bar .cb-kick{font-size:11.5px; text-transform:uppercase; letter-spacing:.12em; font-weight:800; opacity:.9}
.continue-bar .cb-text b{font-size:16px; font-weight:750; color:#fff}
.continue-bar .cb-btn{flex:0 0 auto; padding:11px 20px; border:none; border-radius:10px; background:rgba(255,255,255,.96);
  color:var(--brand-deep); font-weight:800; font-size:14.5px; box-shadow:0 6px 16px -8px rgba(0,0,0,.5); transition:transform .15s, background .15s}
.continue-bar .cb-btn:hover{transform:translateY(-1px); background:#fff}
.badges{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:12px}
.badge{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:16px 12px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--surface-2); box-shadow:var(--shadow); opacity:.6; filter:grayscale(.5); transition:transform .15s}
.badge.earned{opacity:1; filter:none; background:var(--surface); border-color:color-mix(in srgb,var(--brand) 40%,transparent)}
.badge.earned:hover{transform:translateY(-2px)}
.badge-ic{font-size:30px; line-height:1}
.badge-t{font-weight:800; font-size:14px}
.badge-d{font-size:11.5px; color:var(--ink-faint); line-height:1.3}
.lesson-search{margin:0 2px 12px}
.lesson-search input{width:100%; max-width:340px; padding:10px 13px; border:1px solid var(--line); border-radius:11px;
  background:var(--surface); color:var(--ink); font-size:14.5px; font-family:inherit; transition:.15s}
.lesson-search input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}

.section-head{display:flex; align-items:center; gap:12px; margin:30px 2px 15px}
.section-head h2{font-size:17px}
.section-head .bar{width:26px; height:3px; border-radius:2px; background:var(--accent)}
.section-head .count{margin-left:auto; font-size:12.5px; color:var(--ink-faint); font-weight:600}

.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media (max-width:980px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.grid{grid-template-columns:1fr}}

.card{position:relative; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface);
  padding:16px 16px 14px; min-height:132px; display:flex; flex-direction:column; box-shadow:var(--shadow);
  transition:transform .16s, box-shadow .16s, border-color .16s; text-align:left; width:100%; color:inherit; font-family:inherit}
.card.live{cursor:pointer}
.card.live:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--brand)}
.card.live:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 55%,transparent); outline-offset:2px}
.card .num{font-size:12px; font-weight:800; color:var(--brand-deep); letter-spacing:.02em; margin-bottom:6px}
.card h3{font-size:15.5px; font-weight:750; letter-spacing:-.01em; line-height:1.25}
.card .meta{margin-top:auto; padding-top:12px; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-faint); font-weight:600}
.card .pill{margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:11px; padding:3px 8px; border-radius:999px; font-weight:700}
.pill.done{background:var(--good-tint); color:var(--good)}
.pill.busy{background:var(--brand-tint); color:var(--brand-deep)}
.pill.new{background:var(--accent-tint); color:var(--accent-deep)}
.pill.soon{background:var(--surface-2); color:var(--ink-faint)}
.progress{height:5px; border-radius:3px; background:var(--line-soft); overflow:hidden; margin-top:11px}
.progress > i{display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,var(--brand),var(--brand-deep))}
.card.soon{border-style:dashed; background:var(--surface-2)}
.card.soon h3,.card.soon .num{color:var(--ink-faint)}
.card .bookmark{position:absolute; top:-1px; right:15px; width:16px; height:26px; background:var(--accent);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%); box-shadow:0 3px 6px -2px rgba(0,0,0,.25)}

.featured{grid-column:span 1; background:linear-gradient(150deg,var(--accent),var(--accent-deep)); color:#fff;
  border:none; box-shadow:0 14px 30px -14px var(--accent-deep)}
.featured .num,.featured h3{color:#fff}
.featured .kick{font-size:11px; text-transform:uppercase; letter-spacing:.14em; font-weight:800; opacity:.85; margin-bottom:8px}
.featured p{font-size:12.5px; color:rgba(255,255,255,.9); margin-top:6px}
.featured .go{margin-top:auto; padding-top:12px; font-size:12.5px; font-weight:800; display:flex; align-items:center; gap:6px}

/* ---------- quiz ---------- */
.quiz{max-width:760px; margin:0 auto; padding:26px 20px 90px}
.back{display:inline-flex; align-items:center; gap:7px; background:none; border:none; color:var(--ink-soft); font-weight:650; font-size:14px; padding:6px 0; margin-bottom:12px}
.back:hover{color:var(--brand-deep)}
.quiz-head{border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow); margin-bottom:22px}
.quiz-head .num{font-size:12px; font-weight:800; color:var(--brand-deep); letter-spacing:.03em}
.quiz-head h1{font-size:23px; margin-top:4px}
.quiz-head p{color:var(--ink-soft); font-size:14px; margin-top:8px}
.qbar{height:6px; border-radius:4px; background:var(--line-soft); overflow:hidden; margin-top:16px}
.qbar > i{display:block; height:100%; background:linear-gradient(90deg,var(--brand),var(--brand-deep)); transition:width .3s}
.qmeta{display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-faint); font-weight:600; margin-top:8px}

.qcard{border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.qtag{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-deep); background:var(--brand-tint); padding:4px 9px; border-radius:6px}
.qtext{font-size:19px; font-weight:700; margin:14px 0 4px; line-height:1.4; letter-spacing:-.01em}
.qtext .m{font-family:var(--mono); background:var(--surface-2); padding:1px 6px; border-radius:5px; font-size:.92em; font-weight:600}
.speakbtn{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--brand-deep); font-size:16px; vertical-align:middle; flex:0 0 auto; transition:.13s}
.speakbtn:hover{border-color:var(--brand); background:var(--brand-tint); transform:translateY(-1px)}
.speakbtn:active{transform:none}
.speakbtn.speaking{border-color:var(--brand); background:var(--brand-tint); animation:speakpulse .8s ease-in-out infinite}
@keyframes speakpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 40%,transparent)}50%{box-shadow:0 0 0 5px transparent}}
.qtext-row{display:flex; align-items:flex-start; gap:10px}
.qtext-row .qtext{flex:1 1 auto; margin-top:0}
.flash-speak{margin-top:12px}
.q-img{display:block; max-width:100%; max-height:220px; width:auto; border-radius:11px; margin:14px 0 2px; border:1px solid var(--line); background:var(--surface-2)}
.tip-box .q-img{max-height:170px; margin:10px 0 0}
.opts{display:grid; gap:10px; margin-top:20px}
.opt{display:flex; align-items:center; gap:13px; padding:14px 16px; border:1.5px solid var(--line); border-radius:12px;
  background:var(--surface); text-align:left; font-size:15.5px; color:var(--ink); font-weight:600; transition:.13s; width:100%; font-family:inherit}
.opt:hover:not(:disabled){border-color:var(--brand); background:var(--surface-2)}
.opt .key{width:26px; height:26px; border-radius:7px; background:var(--surface-2); border:1px solid var(--line);
  display:grid; place-items:center; font-size:13px; font-weight:800; color:var(--ink-soft); flex:0 0 auto; transition:.13s}
.opt .mark{margin-left:auto; font-weight:800; font-size:17px; opacity:0}
.opt.correct{border-color:var(--good); background:var(--good-tint)}
.opt.correct .key{background:var(--good); border-color:var(--good); color:#fff}
.opt.correct .mark{opacity:1; color:var(--good)}
.opt.wrong{border-color:var(--bad); background:var(--bad-tint)}
.opt.wrong .key{background:var(--bad); border-color:var(--bad); color:#fff}
.opt.wrong .mark{opacity:1; color:var(--bad)}
.opt:disabled{cursor:default}
.explain{margin-top:18px; padding:14px 16px; border-radius:11px; border-left:3px solid var(--brand); background:var(--brand-tint);
  font-size:14px; color:var(--ink); display:none}
.explain.show{display:block}
.explain b{color:var(--brand-deep)}
.tip-box{margin-top:16px; padding:13px 16px; border-radius:11px; border-left:3px solid var(--accent); background:var(--accent-tint);
  font-size:14px; color:var(--ink); display:none}
.tip-box.show{display:block}
.tip-box b{color:var(--accent-deep)}
.tip-btn{display:inline-flex; align-items:center; gap:6px; padding:9px 15px; border:1.5px solid var(--accent); border-radius:10px;
  background:var(--surface); color:var(--accent-deep); font-weight:750; font-size:13.5px; font-family:inherit; transition:.13s}
.tip-btn:hover:not(:disabled){background:var(--accent-tint); transform:translateY(-1px)}
.tip-btn:disabled{opacity:.45; cursor:default}
.qfoot{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:22px}
.qfoot .score{flex:1 1 auto}
.score{font-size:13.5px; color:var(--ink-soft); font-weight:650}
.btn-next{padding:11px 22px; border:none; border-radius:10px; background:linear-gradient(180deg,var(--brand),var(--brand-deep));
  color:#fff; font-weight:750; font-size:14.5px; box-shadow:0 8px 18px -8px var(--brand); transition:.15s}
.btn-next:hover{transform:translateY(-1px)}
.btn-next:disabled{opacity:.4; cursor:not-allowed; transform:none; box-shadow:none}

.result{border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:34px; text-align:center; box-shadow:var(--shadow)}
.result .ring{width:130px; height:130px; margin:6px auto 18px; position:relative}
.result .ring svg{transform:rotate(-90deg)}
.result .ring .pct{position:absolute; inset:0; display:grid; place-items:center; font-size:30px; font-weight:800}
.result h2{font-size:24px}
.result p{color:var(--ink-soft); margin-top:8px}
.result .acts{display:flex; gap:12px; justify-content:center; margin-top:24px; flex-wrap:wrap}
.btn-ghost{padding:11px 20px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); font-weight:700; font-size:14.5px}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand-deep)}

/* ---------- spelvorm-keuze ---------- */
.modes{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
@media (max-width:560px){.modes{grid-template-columns:1fr}}
.mode-card{display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; padding:18px 18px 16px;
  border:1.5px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--ink); box-shadow:var(--shadow);
  transition:transform .15s, box-shadow .15s, border-color .15s}
.mode-card:hover:not(:disabled){transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--brand)}
.mode-card:disabled{opacity:.45; cursor:not-allowed}
.mode-card .mi{font-size:26px; line-height:1}
.mode-card b{font-size:16px; margin-top:6px}
.mode-card small{color:var(--ink-soft); font-size:13px; font-weight:500}
.mode-card.feat{grid-column:1/-1; background:linear-gradient(150deg,var(--accent),var(--accent-deep)); color:#fff; border:none}
.mode-card.feat b,.mode-card.feat small{color:#fff}
.mode-card.feat small{opacity:.9}

/* ---------- invullen ---------- */
.fill-form{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap}
.fill-input{flex:1; min-width:180px; padding:13px 15px; border:1.5px solid var(--line); border-radius:12px; background:var(--surface);
  color:var(--ink); font-size:17px; font-family:inherit; font-weight:600; transition:.13s}
.fill-input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.fill-input.ok{border-color:var(--good); background:var(--good-tint)}
.fill-input.no{border-color:var(--bad); background:var(--bad-tint)}

/* ---------- slepen ---------- */
.drag-wrap{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:6px}
.drag-col{display:flex; flex-direction:column; gap:10px}
.chip{padding:13px 15px; border:1.5px solid var(--brand); border-radius:12px; background:var(--brand-tint); color:var(--brand-deep);
  font-weight:750; font-size:15px; font-family:inherit; cursor:grab; text-align:center; transition:.13s; touch-action:manipulation}
.chip:hover:not(.used){transform:translateY(-1px)}
.chip.sel{outline:3px solid color-mix(in srgb,var(--brand) 55%,transparent); outline-offset:2px}
.chip.used{opacity:.25; border-style:dashed; cursor:default; background:var(--surface-2); color:var(--ink-faint)}
.slot{padding:11px 14px; border:1.5px dashed var(--line); border-radius:12px; background:var(--surface); min-height:56px;
  display:flex; flex-direction:column; justify-content:center; gap:2px; transition:.13s}
.slot-tr{font-weight:700; font-size:15px; color:var(--ink)}
.slot-drop{font-size:12px; color:var(--ink-faint); font-weight:600}
.slot.done{border-style:solid; border-color:var(--good); background:var(--good-tint)}
.slot.done .slot-drop{color:var(--good); font-weight:750}
.slot.bad{border-color:var(--bad); background:var(--bad-tint); animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ---------- Zinsopbouw (zinsstructuur) ---------- */
/* elke rol heeft een eigen kleur (--rc); zo herkent de leerling de zinsdelen terug */
.r-wie{--rc:#3b7dea}
.r-doet{--rc:#e0812a}
.r-wat{--rc:#8b5cf6}
.r-waar{--rc:#0d9488}
.r-wanneer{--rc:#d64592}
.r-eind{--rc:#4d7c0f}
@media (prefers-color-scheme:dark){
  .r-wie{--rc:#7aa9f7} .r-doet{--rc:#ffab5e} .r-wat{--rc:#b79bff} .r-waar{--rc:#2fc6bb} .r-wanneer{--rc:#f47bb8} .r-eind{--rc:#a3e635}
}
:root[data-theme="light"]{ }
:root[data-theme="dark"] .r-wie{--rc:#7aa9f7}
:root[data-theme="dark"] .r-doet{--rc:#ffab5e}
:root[data-theme="dark"] .r-wat{--rc:#b79bff}
:root[data-theme="dark"] .r-waar{--rc:#2fc6bb}
:root[data-theme="dark"] .r-wanneer{--rc:#f47bb8}
:root[data-theme="dark"] .r-eind{--rc:#a3e635}
.zrole{display:inline-block; padding:1px 9px; border-radius:8px; font-weight:800; font-size:.9em; line-height:1.5;
  color:var(--rc); background:color-mix(in srgb,var(--rc) 16%,transparent); border:1px solid color-mix(in srgb,var(--rc) 45%,transparent)}
.zrole-hint{color:var(--ink-faint); font-weight:600; font-size:.85em}
.zin-sentence{margin:12px 0 4px; padding:14px 16px; border-radius:11px; background:var(--surface-2); border:1px solid var(--line);
  font-size:19px; font-weight:750; color:var(--ink); line-height:1.5}
.zin-q{font-size:16.5px; font-weight:700; color:var(--ink)}
.zhit{border-radius:6px; padding:0 4px; font-weight:800; color:var(--rc);
  background:color-mix(in srgb,var(--rc) 20%,transparent); box-decoration-break:clone; -webkit-box-decoration-break:clone;
  border-bottom:2.5px solid var(--rc)}
/* slepen: delen → rolvakken */
.zin-drag{margin-top:18px; display:grid; gap:16px}
.zin-chips{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.zin-slots{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px}
.zin-slot{align-items:flex-start; gap:4px}
.zin-slot .slot-role{font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--rc)}
.zin-slot{border-color:color-mix(in srgb,var(--rc) 35%,transparent)}
.zin-slot.done{border-style:solid; border-color:var(--rc); background:color-mix(in srgb,var(--rc) 12%,transparent)}
.zin-slot.done .slot-drop{color:var(--rc); font-weight:750}
.zin-slot.bad{border-color:var(--bad); background:var(--bad-tint); animation:shake .4s}
/* bouw: woordenhulp + zelfbeoordeling */
.zin-help{margin-top:16px; padding:12px 15px; border-radius:11px; background:var(--brand-tint);
  border:1px solid color-mix(in srgb,var(--brand) 30%,transparent)}
.zin-help-lbl{font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--brand-deep)}
.zin-help-words{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.help-word{display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border-radius:9px; background:var(--surface);
  border:1px solid var(--line); font-weight:700; font-size:14px; color:var(--ink)}
.zin-self{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; font-size:14px; color:var(--ink-soft)}
.zin-self .btn-ghost{padding:8px 14px; font-size:13.5px}
/* introscherm van een Zinsopbouw-les */
.zin-intro{font-size:15px; color:var(--ink)}
.zin-intro h3{margin:0 0 6px; font-size:18px}
.zin-intro p{margin:8px 0; color:var(--ink-soft)}
.zin-intro .zin-legend{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0}
.zin-intro i{color:var(--ink)}
/* groepstitel in het vrijgeef-paneel (Woordjes / Zinsopbouw) */
.rel-group-title{margin:16px 0 6px; font-weight:800; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint)}
.rel-group-title:first-of-type{margin-top:4px}
/* zin + uitspraakknop op één rij (herken-opdracht) */
.zin-sentence-row{display:flex; align-items:center; gap:8px}
.zin-sentence-row .zin-sentence{flex:1; margin-bottom:4px}
.zin-sentence-row .zin-say{flex:none}
/* leerlijn-chip in 'laatste afgeronde lessen' (docentportaal) — één blik: welke leerlijn */
.rc-track{display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  padding:2px 7px; border-radius:999px; margin-right:8px; vertical-align:middle;
  color:var(--rc); background:color-mix(in srgb,var(--rc) 15%,transparent); border:1px solid color-mix(in srgb,var(--rc) 40%,transparent)}
.rc-track-woord{--rc:#3b7dea}
.rc-track-zins{--rc:#e0812a}
@media (prefers-color-scheme:dark){ .rc-track-woord{--rc:#7aa9f7} .rc-track-zins{--rc:#ffab5e} }
:root[data-theme="dark"] .rc-track-woord{--rc:#7aa9f7}
:root[data-theme="dark"] .rc-track-zins{--rc:#ffab5e}
:root[data-theme="light"] .rc-track-woord{--rc:#3b7dea}
:root[data-theme="light"] .rc-track-zins{--rc:#e0812a}
/* spelvorm-chip in 'laatste afgeronde lessen' — één blik: hóé de leerling de les maakte */
.rc-mode{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  padding:2px 8px 2px 6px; border-radius:999px; margin-right:8px; vertical-align:middle;
  color:var(--rcm); background:color-mix(in srgb,var(--rcm) 15%,transparent); border:1px solid color-mix(in srgb,var(--rcm) 40%,transparent)}
.rc-mode-icon{font-size:11px; line-height:1; text-transform:none; letter-spacing:0}
.rc-mode-slepen{--rcm:#7c3aed}
.rc-mode-quiz{--rcm:#0d9488}
.rc-mode-mix{--rcm:#d6459b}
.rc-mode-invullen{--rcm:#4f46e5}
.rc-mode-flits{--rcm:#0891b2}
.rc-mode-herhaling{--rcm:#64748b}
.rc-mode-anders{--rcm:#64748b}
@media (prefers-color-scheme:dark){
  .rc-mode-slepen{--rcm:#b79dff} .rc-mode-quiz{--rcm:#4fd1c5} .rc-mode-mix{--rcm:#ff8fc4}
  .rc-mode-invullen{--rcm:#a5b4fc} .rc-mode-flits{--rcm:#4dd0e1}
  .rc-mode-herhaling{--rcm:#a3b1c6} .rc-mode-anders{--rcm:#a3b1c6}
}
:root[data-theme="dark"] .rc-mode-slepen{--rcm:#b79dff}
:root[data-theme="dark"] .rc-mode-quiz{--rcm:#4fd1c5}
:root[data-theme="dark"] .rc-mode-mix{--rcm:#ff8fc4}
:root[data-theme="dark"] .rc-mode-invullen{--rcm:#a5b4fc}
:root[data-theme="dark"] .rc-mode-flits{--rcm:#4dd0e1}
:root[data-theme="dark"] .rc-mode-herhaling{--rcm:#a3b1c6}
:root[data-theme="dark"] .rc-mode-anders{--rcm:#a3b1c6}
:root[data-theme="light"] .rc-mode-slepen{--rcm:#7c3aed}
:root[data-theme="light"] .rc-mode-quiz{--rcm:#0d9488}
:root[data-theme="light"] .rc-mode-mix{--rcm:#d6459b}
:root[data-theme="light"] .rc-mode-invullen{--rcm:#4f46e5}
:root[data-theme="light"] .rc-mode-flits{--rcm:#0891b2}
:root[data-theme="light"] .rc-mode-herhaling{--rcm:#64748b}
:root[data-theme="light"] .rc-mode-anders{--rcm:#64748b}

/* ---------- flitskaarten ---------- */
.flash{perspective:1200px; margin:6px auto 0; max-width:520px; cursor:pointer}
.flash-inner{position:relative; width:100%; min-height:230px; transform-style:preserve-3d; transition:transform .5s}
.flash.flip .flash-inner{transform:rotateY(180deg)}
.flash-face{position:absolute; inset:0; backface-visibility:hidden; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:28px; text-align:center}
.flash-back{transform:rotateY(180deg); background:var(--brand-tint); border-color:var(--brand)}
.flash-lbl{font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint)}
.flash-word{font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--ink)}
.flash-hint{font-size:12.5px; color:var(--ink-faint); font-weight:600}
.flash-ex{font-size:13.5px; color:var(--ink-soft); max-width:400px}
.flash-acts{display:flex; gap:12px; justify-content:center; margin-top:20px; flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){.flash-inner{transition:none}}

/* ---------- contact ---------- */
.contact{max-width:var(--maxw); margin:0 auto; padding:10px 20px 40px}
.contact-card{border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); display:grid; grid-template-columns:1fr 1fr; gap:26px}
@media (max-width:720px){.contact-card{grid-template-columns:1fr}}
.contact-card h2{font-size:20px; margin-bottom:8px}
.contact-card p{color:var(--ink-soft); font-size:14px}
.contact-card form{display:grid; gap:12px}
.contact-card textarea{width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--ink); font-size:15px; font-family:inherit; min-height:90px; resize:vertical}
.contact-card input{width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--ink); font-size:15px; font-family:inherit}
.contact-card input:focus,.contact-card textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.contact-info a{font-weight:700}
.contact-feedback{margin:2px 0 0; font-size:13.5px; font-weight:600; color:var(--good); min-height:0}
.contact-feedback:empty{display:none}

/* ---------- docenten-dashboard ---------- */
.tv-banner{margin:0 2px 18px; padding:12px 15px; border-radius:11px; background:var(--accent-tint); border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); color:var(--accent-deep); font-size:13px}
.tv-tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow)}
.tv-table{width:100%; border-collapse:collapse; font-size:14px; min-width:520px}
.tv-table th,.tv-table td{padding:12px 14px; text-align:center; border-bottom:1px solid var(--line-soft); white-space:nowrap}
.tv-table th{font-size:12px; color:var(--ink-faint); font-weight:700; text-transform:uppercase; letter-spacing:.03em; background:var(--surface-2)}
.tv-table th:first-child,.tv-table td:first-child{text-align:left}
.tv-row{cursor:pointer; transition:background .12s}
.tv-row:hover{background:var(--surface-2)}
.tv-name{font-weight:700; color:var(--ink)}
.tv-name small{display:block; font-weight:500; color:var(--ink-faint); font-size:12px}
.tv-overall{font-weight:800; color:var(--brand-deep)}
.tv-open{color:var(--brand-deep); font-weight:700; font-size:12.5px}
.tv-lesson{border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:16px 18px; margin-bottom:14px; box-shadow:var(--shadow)}
.tv-lesson-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; font-size:15px}
.tv-lesson-head .tnum{color:var(--ink-soft); font-weight:700; font-size:13.5px}
.tv-note{color:var(--ink-faint); font-size:13px; font-style:italic}
.q-list{display:grid; gap:7px}
.q-item{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px; border:1px solid var(--line-soft); background:var(--surface-2); font-size:13.5px}
.q-item .q-txt{flex:1; color:var(--ink-soft)}
.q-item .q-res{font-weight:800; font-size:15px}
.q-item.q-ok{background:var(--good-tint); border-color:color-mix(in srgb,var(--good) 35%,transparent)}
.q-item.q-ok .q-res{color:var(--good)}
.q-item.q-no{background:var(--bad-tint); border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.q-item.q-no .q-res{color:var(--bad)}
.q-item.q-na .q-res{color:var(--ink-faint)}
/* laatste afgeronde lessen */
.tv-recent{border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:14px 18px; margin-bottom:18px; box-shadow:var(--shadow)}
.tv-recent-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 10px}
.tv-recent-head h2{margin:0; font-size:16px; color:var(--ink)}
.tv-recent-live{font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--good); background:var(--good-tint); border-radius:999px; padding:2px 9px; white-space:nowrap}
.tv-recent-live::before{content:"●"; margin-right:5px; font-size:9px; vertical-align:middle}
.rc-controls{display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:0 0 12px}
.rc-controls-label{font-size:12.5px; color:var(--ink-faint); margin-right:2px}
.rc-limit{cursor:pointer; padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--line-soft); transition:background .12s, border-color .12s, color .12s}
.rc-limit:hover{border-color:var(--brand)}
.rc-limit.on{color:#fff; background:var(--brand); border-color:var(--brand)}
.rc-all-btn{margin-left:auto; padding:5px 13px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--brand-deep);
  background:var(--brand-tint); border:1px solid color-mix(in srgb,var(--brand) 30%,transparent); transition:.13s}
.rc-all-btn:hover{border-color:var(--brand); background:var(--surface); transform:translateY(-1px)}
.rc-count{margin-top:6px; font-size:12px; color:var(--ink-faint); text-align:right}
.rc-list{display:grid; gap:8px}
.rc-item{display:grid; grid-template-columns:1fr auto; gap:2px 12px; align-items:baseline; padding:10px 13px; border:1px solid var(--line-soft); border-radius:10px; background:var(--surface-2)}
.rc-name{font-weight:800; color:var(--ink); font-size:14px}
.rc-lesson{grid-column:1; color:var(--ink-soft); font-size:13px}
.rc-score{grid-column:2; grid-row:1; font-weight:800; color:var(--brand-deep); font-size:13px; text-align:right}
.rc-when{grid-column:2; grid-row:2; color:var(--ink-faint); font-size:12.5px; text-align:right; white-space:nowrap}
.rc-ago{display:block; margin-top:2px; font-size:11.5px; font-weight:700; color:var(--brand-deep)}
.tv-recent-empty{color:var(--ink-faint); font-size:13.5px; font-style:italic; padding:6px 2px}
/* Serkan: inklapbaar 'Laatste afgeronde lessen' + versleepbare blokken */
details.tv-recent > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; user-select:none; margin:0}
details.tv-recent > summary::-webkit-details-marker{display:none}
details.tv-recent > summary::before{content:"▸"; color:var(--ink-faint); transition:transform .15s; flex:0 0 auto; font-size:13px}
details.tv-recent[open] > summary::before{transform:rotate(90deg)}
details.tv-recent > summary h2{flex:1 1 auto}
.tv-reorder-tip{margin:0 2px 14px; padding:9px 13px; border-radius:10px; background:var(--surface-2); border:1px dashed var(--line); color:var(--ink-faint); font-size:12.5px}
.tv-cards-title{margin:0 0 12px; font-size:16px}
.tv-serkan .tv-block > summary, .tv-serkan .tv-block-title{cursor:grab; touch-action:none}
.tv-serkan .tv-block{border-radius:var(--radius); transition:box-shadow .15s, transform .1s, opacity .15s}
.tv-block.tv-armed{opacity:.96; box-shadow:var(--shadow-lg); outline:2px solid var(--brand); outline-offset:2px; transform:scale(1.01)}
.tv-block.tv-armed summary, .tv-block.tv-armed .tv-block-title{cursor:grabbing}
.tv-reordering .tv-block:not(.tv-armed){outline:2px dashed var(--line); outline-offset:2px}
.tv-block > .rel-panel{margin-bottom:0}
.tv-block{margin-bottom:18px}
/* les-kaarten in het docenten-overzicht */
.tv-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px}
.tv-cards-sub{grid-column:1/-1; margin:8px 0 -2px; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint)}
.tv-cards-sub:first-child{margin-top:0}
.tv-card{text-align:left; cursor:pointer; padding:16px 17px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); transition:transform .12s, border-color .12s}
.tv-card:hover{transform:translateY(-2px); border-color:var(--brand)}
.tv-card .num{font-size:12px; font-weight:800; color:var(--brand-deep); text-transform:uppercase; letter-spacing:.04em}
.tv-card h3{margin:4px 0 12px; font-size:16px; color:var(--ink)}
.tv-card-meta{display:flex; justify-content:space-between; align-items:center; gap:8px}
.tv-chip{font-size:12px; color:var(--ink-faint); background:var(--surface-2); border:1px solid var(--line-soft); border-radius:999px; padding:3px 9px}
.tv-card-avg{font-weight:800; color:var(--brand-deep); font-size:13.5px}
/* per-vraag stippen in de les-tabel */
.tv-dot{font-weight:800; font-size:15px}
.tv-dot.q-ok{color:var(--good)}
.tv-dot.q-no{color:var(--bad)}
.tv-dot.q-na{color:var(--ink-faint)}
/* pogingen-lijst */
.tv-attempts{display:grid; gap:8px}
.tv-attempt{display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer; padding:11px 14px; border:1px solid var(--line-soft); border-radius:10px; background:var(--surface-2); transition:border-color .12s, background .12s}
.tv-attempt:hover{border-color:var(--brand); background:var(--surface)}
.tv-att-when{flex:1; font-weight:700; color:var(--ink); font-size:13.5px}
.tv-att-mode{color:var(--ink-faint); font-size:12.5px}
.tv-att-score{font-weight:800; color:var(--brand-deep); font-size:13.5px}
.tv-badge{display:inline-block; margin-left:6px; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--good); background:var(--good-tint); border-radius:999px; padding:1px 7px}
.tv-gave{display:block; margin-top:3px; color:var(--ink-faint); font-weight:500; font-size:12.5px}
.tv-given-no{color:var(--bad); text-decoration:line-through}
.tv-wipe{cursor:pointer; align-self:center; padding:9px 14px; border-radius:10px; font-size:13px; font-weight:700; color:var(--bad); background:var(--bad-tint); border:1px solid color-mix(in srgb,var(--bad) 35%,transparent); transition:background .12s, transform .12s}
.tv-wipe:hover{background:color-mix(in srgb,var(--bad) 20%,transparent); transform:translateY(-1px)}
/* lessen vrijgeven — paneel */
.rel-panel{border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:14px 18px; margin-bottom:18px; box-shadow:var(--shadow)}
.rel-panel > summary{cursor:pointer; font-size:15px; list-style:none; user-select:none}
.rel-panel > summary::-webkit-details-marker{display:none}
.rel-panel > summary::before{content:"▸"; display:inline-block; margin-right:8px; color:var(--ink-faint); transition:transform .15s}
.rel-panel[open] > summary::before{transform:rotate(90deg)}
.rel-hint{color:var(--ink-faint); font-weight:500; font-size:13px}
.rel-list{display:grid; gap:8px; margin-top:4px}
.rel-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 13px; border:1px solid var(--line-soft); border-radius:11px; background:var(--surface-2); cursor:pointer}
.rel-info{display:flex; flex-direction:column; gap:1px; min-width:0}
.rel-num{font-size:11.5px; font-weight:800; color:var(--brand-deep); letter-spacing:.03em; text-transform:uppercase}
.rel-title{font-weight:650; color:var(--ink); font-size:14.5px}
.rel-toggle{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.rel-state{font-size:12px; font-weight:700; color:var(--ink-faint); min-width:82px; text-align:right}
.rel-state.on{color:var(--good)}
.rel-check{position:absolute; opacity:0; width:0; height:0}
.rel-switch{position:relative; width:44px; height:26px; border-radius:999px; background:var(--line); transition:background .15s; flex:0 0 auto}
.rel-switch::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .15s}
.rel-check:checked + .rel-switch{background:var(--good)}
.rel-check:checked + .rel-switch::after{transform:translateX(18px)}
.rel-check:focus-visible + .rel-switch{outline:3px solid color-mix(in srgb,var(--brand) 55%,transparent); outline-offset:2px}
.rel-check:disabled + .rel-switch{opacity:.5}

.footer{max-width:var(--maxw); margin:0 auto; padding:22px 20px; color:var(--ink-faint); font-size:12.5px; border-top:1px solid var(--line); display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.footer .spacer{flex:1}

/* ---------- meldingen (toast) ---------- */
.toast-host{position:fixed; left:0; right:0; bottom:16px; z-index:1000; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; padding:0 12px}
.toast{pointer-events:auto; max-width:460px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-left:4px solid var(--brand);
  border-radius:11px; box-shadow:var(--shadow-lg); padding:12px 14px; font-size:13.5px; font-weight:600; line-height:1.4; display:flex; align-items:flex-start; gap:10px;
  opacity:0; transform:translateY(10px); transition:opacity .2s, transform .2s}
.toast.show{opacity:1; transform:none}
.toast.warn{border-left-color:var(--accent)}
.toast.bad{border-left-color:var(--bad)}
.toast .toast-x{margin-left:4px; background:none; border:none; color:var(--ink-faint); font-size:18px; line-height:1; padding:0 2px; flex:0 0 auto}
.toast .toast-x:hover{color:var(--ink)}

/* Uitleg 'zet op beginscherm' (iPhone/iPad) — kaartje onderaan het scherm. */
.install-hint{position:fixed; left:0; right:0; bottom:16px; z-index:1001; display:flex; justify-content:center; padding:0 12px}
.install-hint.hidden{display:none}
.install-hint-card{position:relative; max-width:460px; background:var(--surface); color:var(--ink); border:1px solid var(--line);
  border-left:4px solid var(--brand); border-radius:11px; box-shadow:var(--shadow-lg); padding:14px 40px 14px 16px}
.install-hint-title{font-weight:800; font-size:15px; margin-bottom:6px}
.install-hint-text{font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin:0}
.install-hint-x{position:absolute; top:8px; right:10px; background:none; border:none; color:var(--ink-faint); font-size:20px; line-height:1; padding:2px 4px; cursor:pointer}
.install-hint-x:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}