/* /Components/Layout/AppLayout.razor.rz.scp.css */
.mem-app[b-ui0wrjspa5] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mem-kop[b-ui0wrjspa5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mem-ruimte-4);
    padding: var(--mem-ruimte-3) var(--mem-ruimte-6);
    background: var(--mem-vlak);
    border-bottom: 1px solid var(--mem-lijn);
}

.mem-kop-merk[b-ui0wrjspa5] {
    display: inline-flex;
    text-decoration: none;
}

.mem-kop-merk:hover[b-ui0wrjspa5] {
    text-decoration: none;
}

.mem-kop-rechts[b-ui0wrjspa5] {
    display: flex;
    align-items: center;
    gap: var(--mem-ruimte-2);
}

.mem-kop-naam[b-ui0wrjspa5] {
    font-size: var(--mem-maat-bijschrift);
    color: var(--mem-bijschrift);
}

.mem-kop-rechts form[b-ui0wrjspa5] {
    margin: 0;
}

.mem-inhoud[b-ui0wrjspa5] {
    flex: 1;
    width: 100%;
    max-width: var(--mem-inhoud-max);
    margin: 0 auto;
    padding: var(--mem-ruimte-8) var(--mem-ruimte-6) var(--mem-ruimte-12);
}

@media (max-width: 560px) {
    .mem-kop[b-ui0wrjspa5] {
        padding: var(--mem-ruimte-3) var(--mem-ruimte-4);
    }

    /* Op een telefoon is de naam ballast: het gaat om de knop. */
    .mem-kop-naam[b-ui0wrjspa5] {
        display: none;
    }

    .mem-inhoud[b-ui0wrjspa5] {
        padding: var(--mem-ruimte-6) var(--mem-ruimte-4) var(--mem-ruimte-10);
    }

    .mem-kop-rechts .mem-knop[b-ui0wrjspa5] {
        width: auto;
    }
}
/* /Components/Layout/OefenLayout.razor.rz.scp.css */
.mem-oefen[b-5sbqntcu96] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--mem-grond);
}
/* /Components/Layout/StartLayout.razor.rz.scp.css */
.mem-start[b-018caay5i6] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--mem-ruimte-8) var(--mem-ruimte-4);
    background:
        radial-gradient(1100px 520px at 50% -10%, #EDE7FE 0%, rgba(237, 231, 254, 0) 70%),
        var(--mem-grond);
}

.mem-start-midden[b-018caay5i6] {
    width: 100%;
    max-width: var(--mem-inhoud-smal);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mem-ruimte-6);
}

.mem-start-merk[b-018caay5i6] {
    display: inline-flex;
    text-decoration: none;
}

.mem-start-merk:hover[b-018caay5i6] {
    text-decoration: none;
}

.mem-start-midden[b-018caay5i6]  .mem-kaart {
    width: 100%;
}

.mem-start-voet[b-018caay5i6] {
    font-size: var(--mem-maat-bijschrift);
    color: var(--mem-bijschrift);
    text-align: center;
}
/* /Components/Ontwerp/MemBadge.razor.rz.scp.css */
.mem-badge[b-rw3to57vmj] {
    display: block;
    filter: drop-shadow(0 6px 14px rgba(52, 26, 140, 0.22));
}

/* Nog niet verdiend: vlakker en rustiger, zodat het verschil met behaald meteen te zien is. */
.mem-badge--leeg[b-rw3to57vmj] {
    filter: none;
    opacity: 0.75;
}
/* /Components/Ontwerp/MemBadgeViering.razor.rz.scp.css */
.viering[b-xmkqa4gm3o] {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: var(--mem-ruimte-4);
    background: var(--mem-overlay);
    animation: viering-vervaag-b-xmkqa4gm3o 0.25s ease-out;
}

.viering-kaart[b-xmkqa4gm3o] {
    width: 100%;
    max-width: 480px;
    padding: var(--mem-ruimte-8);
    border-radius: var(--mem-radius-xl);
    background: var(--mem-vlak);
    box-shadow: var(--mem-schaduw-diep);
    text-align: center;
    animation: viering-omhoog-b-xmkqa4gm3o 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.viering-label[b-xmkqa4gm3o] {
    font-family: var(--mem-font-kop);
    font-size: var(--mem-maat-label);
    font-weight: 600;
    letter-spacing: var(--mem-letterafstand-label);
    text-transform: uppercase;
    color: var(--mem-oranje-tekst);
}

.viering-kop[b-xmkqa4gm3o] {
    margin-top: var(--mem-ruimte-2);
    font-size: var(--mem-maat-kop);
}

.viering-badges[b-xmkqa4gm3o] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--mem-ruimte-6);
    margin-top: var(--mem-ruimte-6);
}

.viering-badge[b-xmkqa4gm3o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    /* De badge komt met een kleine overshoot binnen, alsof hij neerkomt. */
    animation: viering-badge-land-b-xmkqa4gm3o 0.6s cubic-bezier(0.2, 1.2, 0.3, 1);
}

.viering-naam[b-xmkqa4gm3o] {
    margin-top: var(--mem-ruimte-3);
    font-family: var(--mem-font-kop);
    font-weight: 600;
    font-size: var(--mem-maat-subkop);
}

.viering-eis[b-xmkqa4gm3o] {
    font-size: var(--mem-maat-bijschrift);
    color: var(--mem-bijschrift);
    max-width: 22ch;
}

.viering-knoppen[b-xmkqa4gm3o] {
    display: flex;
    flex-direction: column;
    /* Uitrekken, anders wordt de knop op een smal scherm te nauw voor zijn tekst. */
    align-items: stretch;
    gap: var(--mem-ruimte-3);
    margin-top: var(--mem-ruimte-8);
}

.viering-geluid[b-xmkqa4gm3o] {
    border: 0;
    background: transparent;
    color: var(--mem-bijschrift);
    font-family: inherit;
    font-size: var(--mem-maat-bijschrift);
    cursor: pointer;
    text-decoration: underline;
}

.viering-geluid:hover[b-xmkqa4gm3o] {
    color: var(--mem-tekst);
}

@keyframes viering-vervaag-b-xmkqa4gm3o {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes viering-omhoog-b-xmkqa4gm3o {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

@keyframes viering-badge-land-b-xmkqa4gm3o {
    0% { opacity: 0; transform: scale(0.3) rotate(-12deg); }
    60% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
/* /Components/Ontwerp/MemKaart.razor.rz.scp.css */
.mem-kaart[b-au2d6a2i5v] {
    background: var(--mem-vlak);
    border: 1px solid var(--mem-lijn);
    border-radius: var(--mem-radius-groot);
    padding: var(--mem-ruimte-6);
    box-shadow: var(--mem-schaduw);
}

.mem-kaart--ruim[b-au2d6a2i5v] {
    padding: var(--mem-ruimte-8);
    border-radius: var(--mem-radius-xl);
}

.mem-kaart-titel[b-au2d6a2i5v] {
    margin-bottom: var(--mem-ruimte-4);
}

@media (max-width: 560px) {
    .mem-kaart[b-au2d6a2i5v], .mem-kaart--ruim[b-au2d6a2i5v] {
        padding: var(--mem-ruimte-5);
    }
}
/* /Components/Ontwerp/MemLogo.razor.rz.scp.css */
.mem-logo[b-rplvzjaxlt] {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.mem-logo-woord[b-rplvzjaxlt] {
    font-family: var(--mem-font-kop);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--mem-inkt);
}

.mem-logo-train[b-rplvzjaxlt] {
    color: var(--mem-paars);
}

.mem-logo--licht .mem-logo-woord[b-rplvzjaxlt] {
    color: #FFFFFF;
}

.mem-logo--licht .mem-logo-train[b-rplvzjaxlt] {
    color: #B9A3FF;
}
/* /Components/Ontwerp/MemMelding.razor.rz.scp.css */
.mem-melding[b-534avyjiv4] {
    padding: 14px 18px;
    border: 1px solid var(--mem-lijn);
    border-radius: var(--mem-radius);
    background: var(--mem-paars-zacht);
    color: var(--mem-tekst);
    font-size: var(--mem-maat-bijschrift);
    margin-bottom: var(--mem-ruimte-4);
}

.mem-melding--goed[b-534avyjiv4] {
    background: var(--mem-goed-zacht);
    border-color: var(--mem-goed-rand);
    color: var(--mem-goed-tekst);
}

.mem-melding--fout[b-534avyjiv4] {
    background: var(--mem-fout-zacht);
    border-color: var(--mem-fout-rand);
    color: var(--mem-fout-tekst);
}
/* /Components/Ontwerp/MemOpmaak.razor.rz.scp.css */
/* Opgemaakte vraagtekst en toelichting (VR-162). De inhoud komt als HTML binnen, dus de opmaak loopt via ::deep. */
.mem-opmaak[b-d38118454m] {
    display: flex;
    flex-direction: column;
    gap: var(--mem-ruimte-3);
    min-width: 0;
}

.mem-opmaak[b-d38118454m]  p,
.mem-opmaak[b-d38118454m]  ul,
.mem-opmaak[b-d38118454m]  ol {
    margin: 0;
}

.mem-opmaak[b-d38118454m]  ul,
.mem-opmaak[b-d38118454m]  ol {
    padding-left: 1.3em;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mem-opmaak[b-d38118454m]  li::marker { color: var(--mem-bijschrift); }

/* Een tabel mag smal blijven en krijgt bij te weinig ruimte een eigen schuifbalk. */
.mem-opmaak[b-d38118454m]  table {
    border-collapse: collapse;
    width: auto;
    max-width: 100%;
    font-size: var(--mem-maat-standaard);
    font-variant-numeric: tabular-nums;
    display: block;
    overflow-x: auto;
}

.mem-opmaak[b-d38118454m]  th,
.mem-opmaak[b-d38118454m]  td {
    border: 1px solid var(--mem-lijn);
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
    line-height: 1.45;
}

.mem-opmaak[b-d38118454m]  th {
    background: var(--mem-vlak-zacht);
    font-weight: 600;
}

/* Een kolom met bedragen staat rechts: "---:" in de scheidingsregel van de tabel. */
.mem-opmaak[b-d38118454m]  th.tm-rechts,
.mem-opmaak[b-d38118454m]  td.tm-rechts { text-align: right; }

/* De vraag in een oefensessie: alleen de tekst wordt groot, een tabel blijft leesbaar. */
.mem-opmaak--vraag[b-d38118454m]  p,
.mem-opmaak--vraag[b-d38118454m]  li {
    font-size: var(--mem-maat-kop-klein);
    line-height: 1.35;
}

/* VR-163: hoe meer tekst, hoe kleiner de letter, zodat een lange vraag in beeld blijft passen. */
.mem-opmaak--vraag.mem-vraag--middel[b-d38118454m]  p,
.mem-opmaak--vraag.mem-vraag--middel[b-d38118454m]  li,
.mem-opmaak--vraag.mem-vraag--lang[b-d38118454m]  p,
.mem-opmaak--vraag.mem-vraag--lang[b-d38118454m]  li {
    font-family: var(--mem-font-tekst);
    font-weight: 500;
    letter-spacing: 0;
}

.mem-opmaak--vraag.mem-vraag--middel[b-d38118454m]  p,
.mem-opmaak--vraag.mem-vraag--middel[b-d38118454m]  li { font-size: 20px; line-height: 1.45; }

.mem-opmaak--vraag.mem-vraag--lang[b-d38118454m]  p,
.mem-opmaak--vraag.mem-vraag--lang[b-d38118454m]  li { font-size: var(--mem-maat-body); line-height: 1.6; }
/* /Components/Pages/Kopen.razor.rz.scp.css */
.koop-bedrag[b-uwva1yg8ga] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--mem-ruimte-2);
}

.koop-prijs[b-uwva1yg8ga] {
    font-family: var(--mem-font-kop);
    font-weight: 600;
    font-size: 38px;
    line-height: 1.1;
    color: var(--mem-paars);
}

.koop-periode[b-uwva1yg8ga] {
    font-size: var(--mem-maat-body);
    color: var(--mem-tekst-zacht);
}
/* /Components/Pages/Oefenen.razor.rz.scp.css */
/* De balk bovenin: merk links, voortgang en reeks rechts. */
.oefen-balk[b-1yu565s0fn] {
    display: flex;
    align-items: center;
    gap: var(--mem-ruimte-4);
    padding: var(--mem-ruimte-3) var(--mem-ruimte-6);
    background: var(--mem-vlak);
    border-bottom: 1px solid var(--mem-lijn);
}

.oefen-merk[b-1yu565s0fn] {
    display: inline-flex;
    margin-right: auto;
    text-decoration: none;
}

.oefen-merk:hover[b-1yu565s0fn] {
    text-decoration: none;
}

.oefen-voortgang[b-1yu565s0fn] {
    font-size: var(--mem-maat-bijschrift);
    color: var(--mem-bijschrift);
    white-space: nowrap;
}

/* Oranje is alleen voor beloning (MT-73). */
.oefen-reeks[b-1yu565s0fn] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px 6px 10px;
    border-radius: var(--mem-radius-pil);
    background: var(--mem-oranje-zacht);
    color: var(--mem-oranje-tekst);
    font-family: var(--mem-font-kop);
    font-weight: 600;
    font-size: var(--mem-maat-bijschrift);
    white-space: nowrap;
}

.oefen-inhoud[b-1yu565s0fn] {
    flex: 1;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: var(--mem-ruimte-8) var(--mem-ruimte-6) var(--mem-ruimte-12);
}

.oefen-vraag[b-1yu565s0fn] {
    display: flex;
    flex-direction: column;
}

.oefen-stempel[b-1yu565s0fn] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    margin-bottom: var(--mem-ruimte-4);
    border-radius: var(--mem-radius-pil);
    background: var(--mem-paars);
    color: #fff;
    font-family: var(--mem-font-kop);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.04em;
}

.oefen-gebied[b-1yu565s0fn] {
    font-size: var(--mem-maat-bijschrift);
    color: var(--mem-bijschrift);
    margin-bottom: var(--mem-ruimte-2);
}

.oefen-tekst[b-1yu565s0fn] {
    font-size: var(--mem-maat-kop-klein);
    line-height: 1.35;
}

/* VR-163: een vraag met veel tekst in een kleinere letter, anders valt hij buiten beeld. Vanaf dat formaat ook de
   tekstletter in plaats van de koppenletter: een lap tekst in de zware koppenletter leest niet prettig. */
.oefen-tekst.mem-vraag--middel[b-1yu565s0fn],
.oefen-tekst.mem-vraag--lang[b-1yu565s0fn] {
    font-family: var(--mem-font-tekst);
    font-weight: 500;
    letter-spacing: 0;
}
.oefen-tekst.mem-vraag--middel[b-1yu565s0fn] { font-size: 20px; line-height: 1.45; }
.oefen-tekst.mem-vraag--lang[b-1yu565s0fn] { font-size: var(--mem-maat-body); line-height: 1.6; }

.oefen-afbeelding[b-1yu565s0fn] {
    max-width: 100%;
    height: auto;
    margin-top: var(--mem-ruimte-5);
    border-radius: var(--mem-radius);
    border: 1px solid var(--mem-lijn);
}

.oefen-hulp[b-1yu565s0fn] {
    margin-top: var(--mem-ruimte-3);
}

/* Meerdere goede antwoorden is de uitzondering, dus die springt eruit. */
.oefen-meerdere[b-1yu565s0fn] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    margin-top: var(--mem-ruimte-4);
    padding: 9px 16px 9px 13px;
    border-radius: var(--mem-radius-pil);
    background: var(--mem-paars-zacht);
    color: var(--mem-paars-donker);
    font-family: var(--mem-font-kop);
    font-weight: 600;
    font-size: var(--mem-maat-bijschrift);
}

.oefen-meerdere svg[b-1yu565s0fn] {
    flex: 0 0 auto;
}

.oefen-opties[b-1yu565s0fn] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: var(--mem-ruimte-5);
}

/* Een antwoord is een knop, zodat hij met het toetsenbord bereikbaar is. */
.oefen-optie[b-1yu565s0fn] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 15px 18px;
    border: 2px solid var(--mem-lijn);
    border-radius: var(--mem-radius);
    background: var(--mem-vlak);
    color: var(--mem-tekst);
    font-family: inherit;
    font-size: var(--mem-maat-standaard);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.oefen-optie:hover:not(:disabled)[b-1yu565s0fn] {
    border-color: var(--mem-paars-rand);
}

.oefen-optie:disabled[b-1yu565s0fn] {
    cursor: default;
}

.oefen-letter[b-1yu565s0fn] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 2px solid var(--mem-lijn);
    border-radius: var(--mem-radius-pil);
    font-family: var(--mem-font-kop);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mem-bijschrift);
}

/* Vierkant bij een vraag met meerdere goede antwoorden: de bekende vorm van een selectievakje. */
.oefen-letter--vakje[b-1yu565s0fn] {
    border-radius: 7px;
}

.oefen-optie-tekst[b-1yu565s0fn] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.oefen-optie--gekozen[b-1yu565s0fn] {
    border-color: var(--mem-paars);
    background: #F8F5FF;
}

.oefen-optie--gekozen .oefen-letter[b-1yu565s0fn] {
    border-color: var(--mem-paars);
    background: var(--mem-paars);
    color: #fff;
}

.oefen-optie--goed[b-1yu565s0fn] {
    border-color: var(--mem-goed);
    background: var(--mem-goed-zacht);
}

.oefen-optie--goed .oefen-letter[b-1yu565s0fn] {
    border-color: var(--mem-goed);
    background: var(--mem-goed);
    color: #fff;
}

.oefen-optie--fout[b-1yu565s0fn] {
    border-color: var(--mem-fout);
    background: var(--mem-fout-zacht);
}

.oefen-optie--fout .oefen-letter[b-1yu565s0fn] {
    border-color: var(--mem-fout);
    background: var(--mem-fout);
    color: #fff;
}

/* Niet gekozen en niet juist: uit beeld laten zakken. */
.oefen-optie--stil[b-1yu565s0fn] {
    opacity: 0.55;
}

.oefen-feedback[b-1yu565s0fn] {
    display: flex;
    gap: 16px;
    margin-top: var(--mem-ruimte-5);
    padding: 20px 22px;
    border-radius: var(--mem-radius-groot);
}

.oefen-feedback--goed[b-1yu565s0fn] {
    background: var(--mem-goed-zacht);
    border: 1px solid var(--mem-goed-rand);
}

.oefen-feedback--fout[b-1yu565s0fn] {
    background: var(--mem-fout-zacht);
    border: 1px solid var(--mem-fout-rand);
}

.oefen-feedback-icoon[b-1yu565s0fn] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: var(--mem-radius-pil);
}

.oefen-feedback--goed .oefen-feedback-icoon[b-1yu565s0fn] {
    background: var(--mem-goed);
}

.oefen-feedback--fout .oefen-feedback-icoon[b-1yu565s0fn] {
    background: var(--mem-fout);
}

.oefen-feedback-kop[b-1yu565s0fn] {
    font-size: var(--mem-maat-subkop);
    margin-bottom: 3px;
}

.oefen-feedback--goed .oefen-feedback-kop[b-1yu565s0fn] {
    color: var(--mem-goed-tekst);
}

.oefen-feedback--fout .oefen-feedback-kop[b-1yu565s0fn] {
    color: var(--mem-fout-tekst);
}

.oefen-feedback-tekst[b-1yu565s0fn] {
    font-size: var(--mem-maat-bijschrift);
    color: var(--mem-tekst-zacht);
}

/* De toelichting komt opgemaakt binnen (VR-162) en houdt dezelfde maat als de tekst eromheen. */
.oefen-feedback-tekst[b-1yu565s0fn]  p,
.oefen-feedback-tekst[b-1yu565s0fn]  li {
    font-size: var(--mem-maat-bijschrift);
}

/* Het voorstel om meer op een onderwerp te oefenen (MT-38). */
.oefen-tip[b-1yu565s0fn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--mem-ruimte-4);
    margin-top: var(--mem-ruimte-5);
    padding: 18px 20px;
    border-radius: var(--mem-radius-groot);
    background: var(--mem-paars-zacht);
}

.oefen-tip-kop[b-1yu565s0fn] {
    font-size: var(--mem-maat-standaard);
    margin-bottom: 3px;
}

.oefen-tip-tekst[b-1yu565s0fn] {
    font-size: var(--mem-maat-bijschrift);
    color: var(--mem-tekst-zacht);
    max-width: 46ch;
}

.oefen-tip-knoppen[b-1yu565s0fn] {
    display: flex;
    align-items: center;
    gap: var(--mem-ruimte-2);
    flex: 0 0 auto;
}

.oefen-knoppen[b-1yu565s0fn] {
    display: flex;
    align-items: center;
    gap: var(--mem-ruimte-3);
    margin-top: var(--mem-ruimte-6);
}

/* Naar de schuifjes en de badges: bereikbaar maar niet in de weg. */
.oefen-links[b-1yu565s0fn] {
    display: inline-flex;
    gap: var(--mem-ruimte-4);
    margin-left: auto;
}

.oefen-links a[b-1yu565s0fn] {
    font-size: var(--mem-maat-bijschrift);
    color: var(--mem-bijschrift);
}

.oefen-links a:hover[b-1yu565s0fn] {
    color: var(--mem-tekst);
}

/* Samenvatting bij het stoppen. */
.oefen-cijfers[b-1yu565s0fn] {
    display: flex;
    gap: var(--mem-ruimte-8);
}

.oefen-cijfer[b-1yu565s0fn] {
    display: flex;
    flex-direction: column;
}

.oefen-cijfer-getal[b-1yu565s0fn] {
    font-family: var(--mem-font-kop);
    font-weight: 600;
    font-size: 34px;
    line-height: 1.1;
    color: var(--mem-paars);
}

.oefen-cijfer-label[b-1yu565s0fn] {
    font-size: var(--mem-maat-bijschrift);
    color: var(--mem-bijschrift);
}

@media (max-width: 560px) {
    .oefen-balk[b-1yu565s0fn] {
        padding: var(--mem-ruimte-3) var(--mem-ruimte-4);
    }

    .oefen-voortgang[b-1yu565s0fn] {
        display: none;
    }

    .oefen-inhoud[b-1yu565s0fn] {
        padding: var(--mem-ruimte-6) var(--mem-ruimte-4) var(--mem-ruimte-10);
    }

    .oefen-knoppen[b-1yu565s0fn] {
        flex-direction: column;
        align-items: stretch;
    }

    .oefen-links[b-1yu565s0fn] {
        margin-left: 0;
        justify-content: center;
        gap: var(--mem-ruimte-6);
    }

    /* Naast elkaar breken "Ja, graag" en "Nee, laat maar" over twee regels; onder elkaar leest beter. */
    .oefen-tip-knoppen[b-1yu565s0fn] {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/Onderwerpen.razor.rz.scp.css */
.onderwerpen[b-t43wv02ctd] {
    display: flex;
    flex-direction: column;
    gap: var(--mem-ruimte-5);
}

.onderwerp[b-t43wv02ctd] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--mem-ruimte-4);
    align-items: center;
    padding-bottom: var(--mem-ruimte-5);
    border-bottom: 1px solid var(--mem-lijn-licht);
}

.onderwerp:last-child[b-t43wv02ctd] {
    padding-bottom: 0;
    border-bottom: 0;
}

/* Een onderwerp zonder oefenvragen wordt overgeslagen, wat de stand ook is (MT-35). */
.onderwerp--leeg[b-t43wv02ctd] {
    opacity: 0.6;
}

.onderwerp-naam[b-t43wv02ctd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.onderwerp-titel[b-t43wv02ctd] {
    font-family: var(--mem-font-kop);
    font-weight: 600;
    font-size: var(--mem-maat-subkop);
}

.onderwerp-cijfers[b-t43wv02ctd] {
    display: flex;
    gap: 6px;
    font-size: var(--mem-maat-klein);
    color: var(--mem-bijschrift);
}

/* De vijf standen als één strook, zodat je ziet dat het een schaal is. */
.onderwerp-standen[b-t43wv02ctd] {
    display: inline-flex;
    padding: 3px;
    border-radius: var(--mem-radius-pil);
    background: var(--mem-paars-zacht);
}

.stand[b-t43wv02ctd] {
    padding: 8px 14px;
    border: 0;
    border-radius: var(--mem-radius-pil);
    background: transparent;
    color: var(--mem-bijschrift);
    font-family: var(--mem-font-kop);
    font-size: var(--mem-maat-bijschrift);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.stand:hover:not(:disabled):not(.stand--aan)[b-t43wv02ctd] {
    color: var(--mem-tekst);
}

.stand--aan[b-t43wv02ctd] {
    background: var(--mem-paars);
    color: #fff;
    box-shadow: 0 2px 8px rgba(108, 75, 246, 0.3);
}

.stand:disabled[b-t43wv02ctd] {
    cursor: not-allowed;
    opacity: 0.5;
}

@media (max-width: 720px) {
    .onderwerp[b-t43wv02ctd] {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    /* Op een smal scherm de hele breedte gebruiken, met kleinere knopjes. */
    .onderwerp-standen[b-t43wv02ctd] {
        justify-content: space-between;
    }

    .stand[b-t43wv02ctd] {
        padding: 8px 10px;
        font-size: var(--mem-maat-klein);
    }
}
/* /Components/Pages/Start.razor.rz.scp.css */
.mem-vakken[b-ue336rm3dm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--mem-ruimte-5);
}

.mem-vak[b-ue336rm3dm] {
    display: flex;
    flex-direction: column;
    gap: var(--mem-ruimte-3);
    background: var(--mem-vlak);
    border: 1px solid var(--mem-lijn);
    border-radius: var(--mem-radius-groot);
    padding: var(--mem-ruimte-6);
    box-shadow: var(--mem-schaduw);
}

/* Een vak waar je nu niet in kunt, valt terug naar de achtergrond. */
.mem-vak--dicht[b-ue336rm3dm] {
    background: var(--mem-vlak-zacht);
    box-shadow: none;
}

.mem-vak-naam[b-ue336rm3dm] {
    font-size: var(--mem-maat-subkop);
}

.mem-vak-omschrijving[b-ue336rm3dm] {
    font-size: var(--mem-maat-bijschrift);
    color: var(--mem-tekst-zacht);
}

.mem-vak-cijfers[b-ue336rm3dm] {
    font-size: var(--mem-maat-klein);
    color: var(--mem-bijschrift);
}

.mem-vak-status[b-ue336rm3dm] {
    font-size: var(--mem-maat-bijschrift);
    font-weight: 500;
}

.mem-vak-tot[b-ue336rm3dm], .mem-vak-gratis[b-ue336rm3dm] {
    color: var(--mem-goed-tekst);
}

.mem-vak-prijs[b-ue336rm3dm] {
    color: var(--mem-tekst);
}

.mem-vak-dicht[b-ue336rm3dm] {
    color: var(--mem-bijschrift);
    font-weight: 400;
}

/* De knop onderaan, zodat kaarten met verschillende teksten toch gelijk eindigen. */
.mem-vak-knop[b-ue336rm3dm] {
    margin-top: auto;
    padding-top: var(--mem-ruimte-2);
}
/* /Components/Pages/Voortgang.razor.rz.scp.css */
.cijfers[b-ic0p6f9rc0] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mem-ruimte-8);
}

.cijfer[b-ic0p6f9rc0] {
    display: flex;
    flex-direction: column;
}

.cijfer-getal[b-ic0p6f9rc0] {
    font-family: var(--mem-font-kop);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.1;
    color: var(--mem-paars);
}

.cijfer-label[b-ic0p6f9rc0] {
    font-size: var(--mem-maat-bijschrift);
    color: var(--mem-bijschrift);
}

.groep-kop[b-ic0p6f9rc0] {
    font-size: var(--mem-maat-subkop);
}

.groep-subkop[b-ic0p6f9rc0] {
    font-size: var(--mem-maat-standaard);
    color: var(--mem-tekst-zacht);
}

/* Hoe ver de cursist door de vragenbank heen is. */
.dekking[b-ic0p6f9rc0] {
    height: 10px;
    border-radius: var(--mem-radius-pil);
    background: var(--mem-lijn);
    overflow: hidden;
}

.dekking i[b-ic0p6f9rc0] {
    display: block;
    height: 100%;
    border-radius: var(--mem-radius-pil);
    background: var(--mem-paars);
}

/* ---- Per onderwerp ---- */
.onderwerpen[b-ic0p6f9rc0] {
    display: flex;
    flex-direction: column;
    gap: var(--mem-ruimte-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.onderwerp[b-ic0p6f9rc0] {
    padding: var(--mem-ruimte-4);
    border: 1px solid var(--mem-lijn);
    border-radius: var(--mem-radius-groot);
    background: var(--mem-vlak);
}

.onderwerp-kop[b-ic0p6f9rc0] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mem-ruimte-2);
}

.onderwerp-naam[b-ic0p6f9rc0] {
    font-family: var(--mem-font-kop);
    font-weight: 600;
    font-size: var(--mem-maat-standaard);
}

.onderwerp-cijfer[b-ic0p6f9rc0] {
    font-size: var(--mem-maat-bijschrift);
    color: var(--mem-goed-tekst);
}

.onderwerp-cijfer--leeg[b-ic0p6f9rc0] {
    color: var(--mem-bijschrift);
}

.onderwerp-balk[b-ic0p6f9rc0] {
    height: 8px;
    margin-top: var(--mem-ruimte-3);
    border-radius: var(--mem-radius-pil);
    background: var(--mem-lijn);
    overflow: hidden;
}

.onderwerp-balk i[b-ic0p6f9rc0] {
    display: block;
    height: 100%;
    border-radius: var(--mem-radius-pil);
    background: var(--mem-goed);
}

/* Een onderwerp dat achterblijft valt op, zonder alarm te slaan. */
.onderwerp-balk--zwak i[b-ic0p6f9rc0] {
    background: var(--mem-oranje);
}

.onderwerp-detail[b-ic0p6f9rc0] {
    display: block;
    margin-top: var(--mem-ruimte-2);
    font-size: var(--mem-maat-klein);
    color: var(--mem-bijschrift);
}

/* ---- Badges ---- */
.badges[b-ic0p6f9rc0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--mem-ruimte-4);
}

.badge[b-ic0p6f9rc0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: var(--mem-ruimte-6) var(--mem-ruimte-4);
    border: 1px solid var(--mem-lijn);
    border-radius: var(--mem-radius-groot);
    background: var(--mem-vlak-zacht);
    text-align: center;
}

/* Behaald steekt af tegen wat er nog te halen valt. */
.badge--behaald[b-ic0p6f9rc0] {
    background: var(--mem-vlak);
    box-shadow: var(--mem-schaduw);
}

.badge-naam[b-ic0p6f9rc0] {
    margin-top: var(--mem-ruimte-3);
    font-family: var(--mem-font-kop);
    font-weight: 600;
    font-size: var(--mem-maat-standaard);
}

.badge-eis[b-ic0p6f9rc0] {
    font-size: var(--mem-maat-klein);
    color: var(--mem-bijschrift);
}

.badge-datum[b-ic0p6f9rc0] {
    margin-top: var(--mem-ruimte-2);
    font-size: var(--mem-maat-klein);
    color: var(--mem-goed-tekst);
}

.badge-balk[b-ic0p6f9rc0] {
    width: 100%;
    height: 6px;
    margin-top: var(--mem-ruimte-3);
    border-radius: var(--mem-radius-pil);
    background: var(--mem-lijn);
    overflow: hidden;
}

.badge-balk i[b-ic0p6f9rc0] {
    display: block;
    height: 100%;
    border-radius: var(--mem-radius-pil);
    background: var(--mem-paars);
}

.badge-voortgang[b-ic0p6f9rc0] {
    margin-top: 4px;
    font-size: var(--mem-maat-klein);
    color: var(--mem-bijschrift);
}