/* Kiddo'z University
   Kleuren en lettertypen volgen de Kiddo'z-site (bso-2026/css/style.css). */

:root {
    --colorA: #eba552;   /* oranje */
    --colorB: #e1959b;   /* roze */
    --colorC: #71578d;   /* paars */
    --colorD: #9ec642;   /* groen */
    --colorE: #488a9a;   /* blauwgroen */
    --colorF: #fed45e;   /* geel */
    --colorG: #e65c78;   /* rood-roze */

    --ink:      #1c2530;
    --ink-soft: #4a5562;
    --paper:    #fffaf2;
    --card:     #ffffff;
    --line:     #ece3d6;
    --muted-bg: #f0ece6;

    --good: #5d8f1f;
    --good-bg: #eef7dc;
    --bad: #c23b58;
    --bad-bg: #fde9ee;
    --warn: #a8641a;
    --warn-bg: #fdf0dc;

    --radius: 14px;
    --shadow: 0 2px 0 rgba(28, 37, 48, .06), 0 6px 18px rgba(28, 37, 48, .06);
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-script: 'Brush Script MT', 'Segoe Script', 'Bradley Hand', 'Comic Sans MS', cursive;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
h2 { font-size: 1.25rem; margin-top: 2rem; }
p { margin: 0 0 .75rem; }
a { color: var(--colorC); }
small { color: var(--ink-soft); }
code { font-size: .85em; background: var(--muted-bg); padding: 0 .3em; border-radius: 4px; }

/* ---------- kop ---------- */
.banner {
    background: repeating-linear-gradient(-45deg, var(--colorF), var(--colorF) 14px, #ffe48f 14px, #ffe48f 28px);
    color: var(--ink);
    text-align: center;
    font-size: .8rem;
    font-weight: 700;
    padding: .3rem 1rem;
}
.banner button { font: inherit; font-size: .78rem; margin-left: .5rem; border: 0; border-radius: 999px; padding: .1rem .7rem; background: var(--ink); color: #fff; cursor: pointer; }
.banner[hidden] { display: none; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 1rem;
    background: rgba(255, 250, 242, .95);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--colorC); }
.brand__logo { height: 38px; width: auto; display: block; }
.brand__name { font-family: var(--font-script); font-size: 1.6rem; transform: rotate(-2deg); white-space: nowrap; }

.user-menu { display: flex; align-items: center; gap: .35rem; }
.nav-link { position: relative; font-weight: 700; font-size: .9rem; text-decoration: none; padding: .4rem .6rem; border-radius: 8px; white-space: nowrap; }
.nav-link:hover { background: #f1eaf7; }
.unread-badge {
    position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: var(--colorG); color: #fff; font-size: .7rem; font-weight: 800;
    display: grid; place-items: center; line-height: 1;
}
.chip {
    display: flex; align-items: center; gap: .5rem;
    text-decoration: none; color: var(--ink);
    background: var(--card); border: 1px solid var(--line); border-radius: 999px;
    padding: .2rem .8rem .2rem .2rem;
}
.chip .avatar { width: 34px; height: 34px; font-size: 1rem; }
.chip__text { display: flex; flex-direction: column; line-height: 1.15; }
.chip__text small { font-size: .72rem; white-space: nowrap; }

@media (max-width: 640px) {
    .brand__logo { height: 30px; }
    .brand__name { font-size: 1.3rem; }
    .chip__text small { display: none; }
    .chip { padding-right: .6rem; }
    .nav-link__label { display: none; }
}
@media (max-width: 420px) {
    .chip__text { display: none; }
    .chip { padding: .2rem; }
}

/* ---------- algemeen ---------- */
.app { max-width: 880px; margin: 0 auto; padding: 1.25rem 1rem 4rem; outline: none; }
.loading { text-align: center; padding: 3rem 0; color: var(--ink-soft); }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 700; color: var(--ink-soft); margin: 0 0 .25rem; }
.crumbs { font-size: .85rem; margin-bottom: 1rem; color: var(--ink-soft); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.center { text-align: center; }
.center .btn-row { justify-content: center; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; }
.card + .card { margin-top: 1rem; }
.card h2:first-child { margin-top: 0; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    border: 0; border-radius: 999px; cursor: pointer;
    background: var(--colorC); color: #fff;
    font: inherit; font-weight: 700;
    padding: .7rem 1.3rem; text-decoration: none;
    box-shadow: 0 3px 0 #533f6a;
    transition: transform .08s;
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #533f6a; }
.btn:disabled { opacity: .4; cursor: default; }
.btn--ghost { background: var(--card); color: var(--colorC); border: 2px solid var(--colorC); box-shadow: none; }
.btn--small { padding: .45rem .9rem; font-size: .9rem; }
.btn--danger { background: var(--bad); box-shadow: 0 3px 0 #8f2a40; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.btn-row--tight { margin-top: 0; margin-bottom: 1rem; }

.pill { display: inline-block; border-radius: 999px; padding: .15rem .65rem; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.pill--valid    { background: var(--good-bg); color: var(--good); }
.pill--expiring, .pill--draft { background: var(--warn-bg); color: var(--warn); }
.pill--expired, .pill--revised, .pill--overdue { background: var(--bad-bg); color: var(--bad); }
.pill--none, .pill--muted { background: var(--muted-bg); color: var(--ink-soft); }

.bar { height: 8px; background: var(--muted-bg); border-radius: 999px; overflow: hidden; margin: .5rem 0 .25rem; }
.bar span { display: block; height: 100%; background: var(--course, var(--colorD)); border-radius: inherit; transition: width .6s; }
.bar--big { height: 12px; }

.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; flex: none; }
.avatar--lg { width: 84px; height: 84px; }
.avatar--xl { width: 120px; height: 120px; }
.avatar--letter { background: var(--colorB); color: #fff; font-weight: 800; font-size: 1.2rem; }
.avatar--lg.avatar--letter { font-size: 2.2rem; }
.avatar--xl.avatar--letter { font-size: 3rem; }

.note { font-size: .85rem; color: var(--ink-soft); background: #f6f0e7; border-radius: 10px; padding: .6rem .9rem; }
.note ul { margin: .35rem 0 0; padding-left: 1.2rem; }
.error-text { color: var(--bad); font-weight: 700; font-size: .9rem; min-height: 1.3em; margin: .5rem 0 0; }

/* ---------- formulieren ---------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .25rem 1rem; align-items: start; }
.field { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .75rem; }
.field > span, .field-label { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field input[type=date],
.field textarea, .field select, .option-row input[type=text] {
    font: inherit; font-size: .95rem; padding: .55rem .7rem; border: 2px solid var(--line); border-radius: 10px; background: #fff; width: 100%; color: var(--ink);
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus, .option-row input:focus { outline: none; border-color: var(--colorC); }
.field small { font-size: .78rem; color: var(--ink-soft); }
.field--small { max-width: 220px; }
.check { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 700; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--colorC); }

/* ---------- inloggen ---------- */
.auth { max-width: 420px; margin: 1.5rem auto; }
.hero { text-align: center; margin: 1rem 0 1.5rem; }
.hero__cap { font-size: 3.5rem; line-height: 1; animation: wobble 2.5s ease-in-out infinite; display: inline-block; }
@keyframes wobble { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.auth .btn { width: 100%; margin-top: .5rem; }
.demo-choice { display: grid; gap: .75rem; }

/* ---------- dashboard ---------- */
.welcome { display: flex; gap: 1.25rem; align-items: center; margin-bottom: 1.25rem; }
.welcome .title-line { font-size: 1.05rem; margin-bottom: .25rem; }
.welcome > div:last-child { flex: 1; min-width: 0; }

.team-meter { display: flex; align-items: center; gap: 1rem; background: #f1eaf7; border-radius: var(--radius); padding: .9rem 1.1rem; }
.team-meter__number { font-size: 1.8rem; font-weight: 800; color: var(--colorC); }

.assignment-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.assignment {
    display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--ink);
    background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--course, var(--colorA));
    border-radius: var(--radius); padding: .75rem 1rem; box-shadow: var(--shadow);
}
.assignment__icon { font-size: 1.8rem; }
.assignment > div { flex: 1; min-width: 0; }
.assignment strong { display: block; }
.assignment small { display: block; }

.course-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.course-card {
    display: flex; gap: 1rem; height: 100%;
    background: var(--card); border: 1px solid var(--line); border-top: 6px solid var(--course, var(--colorE));
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 1.1rem; text-decoration: none; color: var(--ink);
    transition: transform .15s;
}
a.course-card:hover { transform: translateY(-3px); }
.course-card h3 { margin-bottom: .1rem; }
.course-card p { margin-bottom: .5rem; color: var(--ink-soft); font-size: .9rem; }
.course-card > div { flex: 1; min-width: 0; }
.course-card__icon { font-size: 2.2rem; line-height: 1; }
.course-card--locked { opacity: .55; border-top-color: #d8d0c4; filter: grayscale(.6); }
.category-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin: 1.5rem 0 .6rem; }

.badge-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .75rem; }
.badge { text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem .5rem; }
.badge__icon { font-size: 2.2rem; display: block; }
.badge strong { display: block; font-size: .9rem; }
.badge small { font-size: .75rem; }
.badge--off { opacity: .45; filter: grayscale(1); }

/* ---------- vak ---------- */
.course-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; background: var(--course); color: #fff; border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; }
.course-head > div { flex: 1; min-width: 180px; }
.course-head .eyebrow, .course-head p { color: rgba(255, 255, 255, .85); margin: 0; }
.course-head h1 { margin: 0; }
.course-head__icon { font-size: 3rem; line-height: 1; }

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.step {
    display: flex; align-items: center; gap: .9rem;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: .9rem 1rem; text-decoration: none; color: var(--ink); box-shadow: var(--shadow);
    transition: transform .15s;
}
.step:hover { transform: translateX(4px); }
.step strong { display: block; }
.step small { font-size: .85rem; }
.step__number { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--muted-bg); flex: none; }
.step--done .step__number { background: var(--colorD); color: #fff; }
.step__icon { font-size: 1.6rem; }

.hunt-card { margin-top: 1.5rem; }
.hunt-posts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.hunt-posts li { display: flex; align-items: center; gap: .35rem; background: var(--muted-bg); border-radius: 999px; padding: .3rem .75rem; font-size: .85rem; color: var(--ink-soft); }
.hunt-posts li.found { background: var(--good-bg); color: var(--good); font-weight: 700; }

/* ---------- hoorcollege ---------- */
.lecture-card {
    background: var(--card); border-radius: 22px; box-shadow: var(--shadow);
    border: 3px solid var(--course); padding: 2rem 1.5rem; text-align: center;
    min-height: 320px; display: flex; flex-direction: column; justify-content: center;
    animation: card-in .35s ease-out;
}
@keyframes card-in { from { opacity: 0; transform: translateY(12px) rotate(-1deg); } }
.lecture-card__icon { font-size: 4rem; line-height: 1; margin-bottom: .75rem; }
.lecture-card p { font-size: 1.15rem; max-width: 36rem; margin-inline: auto; }

.source { margin-top: 1rem; font-size: .85rem; color: var(--ink-soft); text-align: left; }
.source summary { cursor: pointer; font-weight: 700; }
.source blockquote { margin: .5rem 0 0; padding: .5rem .8rem; border-left: 4px solid var(--colorF); background: #fffbea; border-radius: 0 8px 8px 0; font-style: italic; }

.dots { display: flex; justify-content: center; gap: .4rem; margin: 1rem 0; }
.dots span { width: 9px; height: 9px; border-radius: 50%; background: #e2d9cc; }
.dots span.on { background: var(--colorC); transform: scale(1.3); }
.pager { display: flex; justify-content: space-between; gap: 1rem; }

/* ---------- werkcollege ---------- */
.scenario-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.scene {
    background: var(--colorE); color: #fff; border-radius: 22px 22px 22px 6px;
    padding: 1.25rem 1.4rem; font-size: 1.1rem; box-shadow: var(--shadow);
    animation: card-in .35s ease-out;
}
.scene p { margin: 0; }
.choices { display: grid; gap: .6rem; margin-top: 1rem; }
.choice {
    text-align: left; font: inherit; cursor: pointer;
    background: var(--card); border: 2px solid var(--line); border-radius: 14px;
    padding: .85rem 1rem; color: var(--ink);
    transition: border-color .15s, background .15s;
}
.choice:hover:not(:disabled) { border-color: var(--colorC); }
.choice:disabled { cursor: default; }
.choice--good { border-color: var(--good); background: var(--good-bg); }
.choice--bad  { border-color: var(--bad); background: var(--bad-bg); }
.choice--dim  { opacity: .5; }

.feedback { margin-top: 1rem; border-radius: 14px; padding: 1rem 1.1rem; animation: card-in .25s ease-out; }
.feedback--good { background: var(--good-bg); border: 2px solid var(--good); }
.feedback--bad  { background: var(--bad-bg); border: 2px solid var(--bad); }
.feedback strong { font-size: 1.05rem; }
.feedback p { margin: .35rem 0 .75rem; }
.feedback ol, .feedback ul { margin: .25rem 0 .75rem; padding-left: 1.25rem; }

.big-icon { font-size: 4rem; line-height: 1; }

/* ---------- tentamen ---------- */
.progress-top { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.progress-top .bar { flex: 1; margin: 0; }
.question { font-size: 1.2rem; margin-bottom: 1rem; }

.truefalse { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.truefalse .choice { text-align: center; font-weight: 800; font-size: 1.1rem; padding: 1.1rem; }

.order { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; counter-reset: step; }
.order li {
    display: flex; align-items: center; gap: .6rem;
    background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: .5rem .5rem .5rem .75rem;
    counter-increment: step;
}
.order li::before { content: counter(step); font-weight: 800; color: var(--colorC); width: 1.3rem; flex: none; }
.order li span { flex: 1; }
.order li.ok { border-color: var(--good); background: var(--good-bg); }
.order li.wrong { border-color: var(--bad); background: var(--bad-bg); }
.order button { border: 0; background: var(--muted-bg); border-radius: 8px; width: 36px; height: 36px; cursor: pointer; font-size: 1rem; flex: none; }
.order button:disabled { opacity: .3; cursor: default; }

.hotspot-image { position: relative; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); user-select: none; }
.hotspot-image img { display: block; width: 100%; height: auto; }
.spot { position: absolute; border: 3px solid transparent; border-radius: 12px; background: transparent; cursor: pointer; padding: 0; transition: border-color .15s, background .15s; }
.spot:hover { border-color: rgba(255, 255, 255, .9); }
.spot:focus-visible { outline: 3px solid var(--colorF); }
.spot.selected { border-color: var(--colorF); background: rgba(254, 212, 94, .35); box-shadow: 0 0 0 3px rgba(28, 37, 48, .35); }
.spot.ok { border-color: var(--good); background: rgba(93, 143, 31, .35); }
.spot.wrong { border-color: var(--bad); background: rgba(194, 59, 88, .35); }
.spot.missed { border: 3px dashed #fff; background: rgba(93, 143, 31, .25); }
.spot__label {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    background: rgba(28, 37, 48, .85); color: #fff; font-size: .72rem; font-weight: 700;
    padding: .1rem .45rem; border-radius: 6px; white-space: nowrap; pointer-events: none;
}
.spot__number {
    position: absolute; left: 6px; top: 6px; width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center; background: var(--colorC); color: #fff; font-weight: 900; font-size: .95rem;
    box-shadow: 0 0 0 3px #fff; pointer-events: none; animation: pop .2s ease-out;
}
@keyframes pop { from { transform: scale(.3); } }
.hotspot-count { margin: .75rem 0 0; font-size: .9rem; color: var(--ink-soft); }

.result__score { font-size: 3.5rem; font-weight: 900; color: var(--colorC); line-height: 1; margin: .5rem 0; }
.mistakes { text-align: left; }
.mistakes li { margin-bottom: .6rem; }

/* ---------- diploma ---------- */
.diploma {
    position: relative; background: #fffdf7; text-align: center;
    border: 10px double var(--colorC); border-radius: 6px;
    padding: 2.5rem 1.5rem; margin: 0 auto; max-width: 720px; box-shadow: var(--shadow);
}
.diploma__logo { height: 60px; margin-bottom: .5rem; }
.diploma__cap { font-size: 3rem; position: absolute; top: -.6rem; right: 1rem; transform: rotate(14deg); }
.diploma__title { font-family: var(--font-script); color: var(--colorC); font-size: clamp(2rem, 6vw, 3rem); margin: .25rem 0 1rem; font-weight: 400; }
.diploma__name { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 800; border-bottom: 2px solid var(--colorA); display: inline-block; padding: 0 1rem .25rem; margin: .5rem 0 1rem; }
.diploma__course { font-size: 1.2rem; font-weight: 700; color: var(--colorE); }
.diploma__meta { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; font-size: .9rem; }
.diploma__meta strong { display: block; }
.diploma__signature { font-family: var(--font-script); font-size: 1.6rem; color: var(--ink); }
.seal {
    display: inline-grid; place-items: center; width: 92px; height: 92px; border-radius: 50%;
    background: var(--colorG); color: #fff; font-weight: 800; font-size: .75rem; line-height: 1.1;
    box-shadow: 0 0 0 5px #fff, 0 0 0 8px var(--colorG); transform: rotate(-10deg); margin-top: 1rem;
}

/* ---------- speurtocht-post ---------- */
.post-hero { text-align: center; }
.post-hero__icon { font-size: 4.5rem; line-height: 1; display: inline-block; animation: wobble 2.5s ease-in-out infinite; }

/* ---------- prikbord ---------- */
.wall { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.wall-post { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem; }
.wall-post--new { border-color: var(--colorF); box-shadow: 0 0 0 3px rgba(254, 212, 94, .45); }
.wall-post__head { display: flex; gap: .75rem; align-items: center; }
.wall-post__head .avatar { width: 48px; height: 48px; }
.wall-post__head p { margin: 0; flex: 1; }
.wall-post__head small { display: block; }
.reaction-bar { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.reaction-btn {
    font: inherit; font-size: .95rem; border: 2px solid var(--line); background: #fff; border-radius: 999px;
    padding: .2rem .65rem; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem;
}
.reaction-btn:hover { border-color: var(--colorC); }
.reaction-btn--on { border-color: var(--colorC); background: #f1eaf7; font-weight: 800; }
.reaction-btn small { font-weight: 700; color: inherit; }
.replies { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .4rem; }
.replies li { background: #f8f4ee; border-radius: 10px; padding: .4rem .7rem; font-size: .92rem; display: flex; gap: .5rem; align-items: baseline; }
.replies li span { flex: 1; }
.reply-form { display: flex; gap: .5rem; margin-top: .6rem; }
.reply-form input { flex: 1; font: inherit; font-size: .92rem; padding: .45rem .7rem; border: 2px solid var(--line); border-radius: 999px; min-width: 0; }
.reply-form input:focus { outline: none; border-color: var(--colorC); }
.link-btn { border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: .8rem; cursor: pointer; padding: 0; text-decoration: underline; }
.wall-preview .wall-post { box-shadow: none; }

/* ---------- profiel ---------- */
.profile-head { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.25rem; }
.profile-head > div { flex: 1; min-width: 200px; }
.photo-picker { position: relative; display: inline-block; cursor: pointer; border: 0; background: none; padding: 0; }
.photo-picker__hint { position: absolute; right: 0; bottom: 0; background: var(--colorC); color: #fff; border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; box-shadow: 0 0 0 3px #fff; font-size: 1rem; }
.invite-box { background: #f1eaf7; border-radius: 12px; padding: .9rem 1rem; margin-top: .75rem; }
.invite-box input { width: 100%; font: inherit; font-size: .85rem; padding: .45rem .6rem; border: 2px solid var(--line); border-radius: 8px; background: #fff; margin: .4rem 0; }
.progress-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.progress-list li { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.progress-list li:last-child { border-bottom: 0; }
.progress-list li span:nth-child(2) { flex: 1; }

/* ---------- beheer ---------- */
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--line); margin-bottom: 1.25rem; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: .6rem .7rem; font-size: .92rem; text-decoration: none; font-weight: 700; color: var(--ink-soft); border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.tabs a.on { color: var(--colorC); border-bottom-color: var(--colorC); }
@media (max-width: 700px) { .tabs a { padding: .5rem .55rem; font-size: .85rem; } }

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; }
.stat strong { display: block; font-size: 1.7rem; line-height: 1.1; }
.stat--valid strong { color: var(--good); }
.stat--expiring strong { color: var(--warn); }
.stat--expired strong { color: var(--bad); }

.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); background: #fbf7f1; }
tr:last-child td { border-bottom: 0; }
.person-cell { display: flex; align-items: center; gap: .5rem; }
.person-cell .avatar { width: 32px; height: 32px; font-size: .9rem; }
.yes { color: var(--good); font-weight: 800; }
.no { color: #c9bfb1; }
.wrap-cells td { white-space: normal; vertical-align: middle; }
.wrap-cells td:last-child { white-space: nowrap; }

.matrix th, .matrix td { text-align: center; padding: .5rem .4rem; }
.matrix th:first-child, .matrix td:first-child { text-align: left; position: sticky; left: 0; background: var(--card); z-index: 1; }
.matrix th:first-child { background: #fbf7f1; }
.matrix th a { text-decoration: none; font-size: 1.3rem; }
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .85rem; color: var(--ink-soft); margin: .75rem 0 0; }

.course-picker { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; margin-bottom: 1rem; }
.course-picker select { font: inherit; padding: .45rem .7rem; border-radius: 10px; border: 2px solid var(--line); background: var(--card); max-width: 70vw; }

.hard-questions { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.hard-questions li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; }
.hard-questions .bar span { background: var(--colorG); }

.review-list { display: grid; gap: 1rem; }
.review-list ol { margin: 0; padding-left: 1.25rem; }
.review-list li { margin-bottom: .6rem; }
.review-list li p { margin: 0 0 .35rem; }
.review-list li textarea { width: 100%; font: inherit; font-size: .9rem; padding: .45rem .6rem; border: 2px solid var(--line); border-radius: 10px; resize: vertical; }
.review-list li.done p { color: var(--ink-soft); text-decoration: line-through; }

.posters { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.poster { background: #fff; border: 3px dashed var(--colorA); border-radius: 18px; padding: 1.25rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.poster__top { display: flex; align-items: center; gap: .4rem; font-family: var(--font-script); color: var(--colorC); font-size: 1.05rem; white-space: nowrap; }
.poster__top img { height: 26px; }
.poster__icon { font-size: 2.6rem; line-height: 1; }
.poster h2 { margin: 0; font-size: 1.3rem; }
.poster__qr { width: 100%; max-width: 200px; height: auto; image-rendering: pixelated; padding: 8px; background: #fff; }
.poster p { margin: 0; font-weight: 700; }

/* ---------- editor ---------- */
.editor-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; border-left: 8px solid var(--course); background: var(--card); border-radius: var(--radius); padding: 1rem 1.25rem; box-shadow: var(--shadow); margin-bottom: 1rem; position: sticky; top: 64px; z-index: 5; }
.editor-head h2 { margin: 0; }
.editor-head > div:nth-child(2) { flex: 1; min-width: 160px; }
.editor-head__icon { font-size: 2.4rem; line-height: 1; }
.editor-head__actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.save-status { font-size: .8rem; font-weight: 700; color: var(--ink-soft); }
.editor-tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1rem; }
.editor-tabs button { font: inherit; font-weight: 700; font-size: .9rem; border: 2px solid var(--line); background: var(--card); border-radius: 999px; padding: .4rem .9rem; cursor: pointer; color: var(--ink-soft); }
.editor-tabs button.on { border-color: var(--colorC); background: var(--colorC); color: #fff; }
.editor-tabs button small { color: inherit; opacity: .8; }
.editor-body h3 { margin: 1.5rem 0 .5rem; font-size: 1rem; }
.hint { color: var(--ink-soft); font-size: .92rem; }
.editor-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: .75rem; box-shadow: var(--shadow); }
.editor-card--done { opacity: .65; }
.editor-card__head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.editor-card summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none; }
.editor-card summary::-webkit-details-marker { display: none; }
.editor-card summary::before { content: '▸'; color: var(--colorC); font-weight: 900; transition: transform .15s; }
.editor-card[open] summary { margin-bottom: .75rem; }
.editor-card[open] summary::before { transform: rotate(90deg); }
.editor-card summary .row-actions { margin-left: auto; }
.question-id { font-family: ui-monospace, monospace; font-size: .8rem; color: var(--ink-soft); }
.question-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-actions { display: inline-flex; gap: .25rem; flex: none; }
.row-actions button, .icon-btn { border: 0; background: var(--muted-bg); border-radius: 8px; width: 32px; height: 32px; cursor: pointer; font-size: .85rem; }
.row-actions button:disabled { opacity: .3; cursor: default; }
.danger:hover { background: var(--bad-bg); }
.option-list { margin-bottom: .75rem; }
.option-row { display: flex; align-items: center; gap: .5rem; margin: .35rem 0; }
.option-row input[type=radio] { width: 20px; height: 20px; accent-color: var(--good); flex: none; }
.option-number { width: 20px; text-align: center; font-weight: 800; color: var(--colorC); flex: none; }
.radio-row { display: flex; gap: 1.25rem; }
.radio-row label { display: inline-flex; gap: .35rem; align-items: center; font-weight: 700; cursor: pointer; }
.color-picker { display: flex; gap: .5rem; }
.color-swatch input { position: absolute; opacity: 0; }
.color-swatch span { display: block; width: 34px; height: 34px; border-radius: 50%; background: var(--swatch); cursor: pointer; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line); }
.color-swatch input:checked + span { box-shadow: 0 0 0 3px var(--ink); }
.color-swatch input:focus-visible + span { outline: 3px solid var(--colorF); }
.version-box { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; background: #f6f0e7; border-radius: 12px; padding: .75rem 1rem; }
.version-box strong { display: block; }
.step-editor { border: 2px dashed var(--line); border-radius: 12px; padding: .75rem; margin: .75rem 0; }
.step-editor--end { border-style: solid; border-color: var(--colorD); background: #f8fcef; }
.choice-list { display: grid; gap: .5rem; }
.choice-editor { border-left: 4px solid var(--bad); background: #fffafb; border-radius: 8px; padding: .5rem .75rem; }
.choice-editor--correct { border-left-color: var(--good); background: #f8fcef; }
.course-table__icon { font-size: 1.5rem; }
#editor-checks > * { margin-bottom: .75rem; }
#editor-checks ul { margin: .35rem 0 0; padding-left: 1.2rem; font-size: .9rem; }
@media (max-width: 560px) { .editor-head { position: static; } }

/* ---------- toasts & confetti ---------- */
.toasts { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); display: grid; gap: .5rem; z-index: 50; pointer-events: none; }
.toast {
    background: var(--ink); color: #fff; font-weight: 800; border-radius: 999px;
    padding: .6rem 1.2rem; box-shadow: var(--shadow); text-align: center;
    animation: toast-in .3s ease-out, toast-out .3s ease-in 2.7s forwards;
}
.toast--points { background: var(--colorF); color: var(--ink); font-size: 1.2rem; }
.toast--big { background: var(--colorC); font-size: 1.1rem; }
.toast--error { background: var(--bad); }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.9); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(var(--r, 540deg)); } }

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

/* ---------- printen ---------- */
@media print {
    .no-print, .crumbs, .btn-row, .tabs, .poster a, .print-intro { display: none !important; }
    body { background: #fff; }
    .app { max-width: none; padding: 0; }
    .diploma { box-shadow: none; margin-top: 2cm; }
    .posters { display: block; }
    .poster { break-inside: avoid; break-after: page; border-width: 4px; margin: 1.5cm auto 0; max-width: 14cm; padding: 1.5cm 1cm; }
    .poster__qr { max-width: 9cm; }
    .poster__icon { font-size: 4rem; }
    .poster h2 { font-size: 2rem; }
}
a.person-cell { text-decoration: none; color: inherit; }
a.person-cell:hover strong { color: var(--colorC); text-decoration: underline; }

/* ---------- uitloggen, leertijd, privacy ---------- */
.nav-button { border: 0; background: none; font: inherit; color: var(--colorC); cursor: pointer; font-size: 1.05rem; }
.learning-time { white-space: nowrap; min-width: 4.5rem; text-align: right; }
.danger-zone { border-color: var(--bad-bg); }
.danger-zone h2 { color: var(--bad); }
.card ul { margin: 0; padding-left: 1.2rem; }
.card ul li { margin-bottom: .4rem; }
.rights-table td:not(:first-child), .rights-table th:not(:first-child) { text-align: center; width: 7rem; }
.rights-table input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--colorC); }