/* Gedeelde opmaak cursuspagina's (Michel 8 nov 2026): eindexamen, uitslag, certificaatcontrole, Mijn cursussen en de
   blokken onder de cursus-startpagina. Zelfde huisstijl als assets/dns-cursus.css (quiz/opdrachten): navy #152a80,
   blauw #1062fe/#1d65af, groen #0d9488/#16a34a, oranje #ea580c, goud #f59e0b. Alles onder .crs / .crs-startblok,
   zodat de rest van de site niet verandert. */

/* ---------- Basis: ruimte terug die .eoh weghaalt ---------- */
.crs .eoh-artikel { max-width: 880px; }
.crs .eoh-artikel h1 { margin-bottom: 16px; }
.crs .eoh-artikel h2 { font-size: 22px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: #152a80; margin: 0 0 10px; }
.crs .eoh-artikel h3 { font-size: 17px; font-weight: 800; color: #152a80; margin: 18px 0 8px; }
.crs .eoh-artikel p { margin: 0 0 12px; }
.crs .eoh-artikel p:last-child, .crs .eoh-artikel ul:last-child { margin-bottom: 0; }
.crs .eoh-artikel ul { list-style: disc; padding-left: 22px; margin: 0 0 12px; }
.crs .eoh-artikel li { margin: 0 0 5px; }
.crs .eoh-melding { border-radius: 14px; padding: 14px 18px; }
.crs code { font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: #eef2fb; color: #152a80; padding: 2px 7px; border-radius: 6px; word-break: break-all; }

/* ---------- Knoppen ---------- */
.crs .eoh-knop, .crs-startblok .eoh-knop { background: linear-gradient(90deg, #152a80, #1062fe); color: #fff; border: 0; border-radius: 12px; padding: 13px 22px;
	box-shadow: 0 6px 18px rgba(16, 98, 254, .28); font: inherit; font-weight: 700; cursor: pointer; transition: filter .15s, transform .1s; }
.crs .eoh-knop:hover, .crs-startblok .eoh-knop:hover { filter: brightness(1.08); text-decoration: none; }
.crs .eoh-knop:active { transform: translateY(1px); }
.crs .eoh-knop:disabled { opacity: .6; cursor: wait; }
.crs .eoh-knop-sec, .crs-startblok .eoh-knop-sec { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 2px solid #c9d6f2; border-radius: 12px;
	background: #fff; color: #152a80; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s; }
.crs .eoh-knop-sec:hover, .crs-startblok .eoh-knop-sec:hover { border-color: #1062fe; background: #f2f6ff; text-decoration: none; }
.crs .eoh-knop:focus-visible, .crs .eoh-knop-sec:focus-visible, .crs button:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.crs-knoppen, .crs .eoh-artikel .crs-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 18px 0 0; }
.crs .crs-knop-groot { font-size: 18px; padding: 16px 28px; }
.crs .crs-knop-groen { background: linear-gradient(90deg, #0f766e, #16a34a); box-shadow: 0 6px 18px rgba(22, 163, 74, .28); }
.crs .crs-knop-oranje { background: linear-gradient(90deg, #ea580c, #f59e0b); box-shadow: 0 6px 18px rgba(234, 88, 12, .3); }
.crs .crs-knop-goud { background: linear-gradient(90deg, #b45309, #f59e0b); box-shadow: 0 6px 18px rgba(245, 158, 11, .32); }

/* ---------- Kaarten ---------- */
.crs-kaart { position: relative; margin: 0 0 22px; padding: 24px 26px; border-radius: 16px; background: #fff; border: 1px solid #e3e8f3;
	box-shadow: 0 1px 2px rgba(21, 42, 128, .06), 0 8px 24px rgba(21, 42, 128, .08); }
.crs-kaart-blauw { border-top: 6px solid #1062fe; }
.crs-kaart-paars { border-top: 6px solid #7c3aed; }
.crs-kaart-groen { border-top: 6px solid #0d9488; }
.crs-kaart-oranje { border-top: 6px solid #ea580c; }
.crs-kaart-goud { border-top: 6px solid #f59e0b; }
.crs-vlak { background: linear-gradient(135deg, #eef4ff 0%, #f6f0ff 100%); border-color: #dfe6fb; }
.crs-lead { font-size: 18px; font-weight: 600; line-height: 1.5; color: #152a80; }
.crs-wie { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px !important; padding: 6px 14px; border-radius: 999px; background: #e9f0ff; color: #152a80; font-size: 14px; font-weight: 600; }
.crs-wie::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }

/* ---------- Regels als lijst met iconen (volgorde: slaag, tijd, heen en weer, herkansen, poging, toezicht, praktijk) ---------- */
.crs .eoh-artikel ul.crs-regels { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.crs-regels li { position: relative; display: flex; align-items: flex-start; min-height: 36px; margin: 0 !important; padding: 12px 14px 12px 62px; border-radius: 14px;
	background: #fff; border: 1px solid #e3e8f3; box-shadow: 0 2px 8px rgba(21, 42, 128, .05); font-size: 15px; line-height: 1.45; color: #26292e; }
.crs-regels li::before { content: ""; position: absolute; left: 14px; top: 12px; width: 36px; height: 36px; border-radius: 50%;
	background: #dbeafe center / 20px no-repeat; }
.crs-regels li:nth-child(7n+1)::before { background-color: #dcfce7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16.2 9.6'/%3E%3C/svg%3E"); }
.crs-regels li:nth-child(7n+2)::before { background-color: #dbeafe; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231062fe' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2M9.5 2.5h5'/%3E%3C/svg%3E"); }
.crs-regels li:nth-child(7n+3)::before { background-color: #ede9fe; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l-4 5 4 5M17 7l4 5-4 5M3 12h18'/%3E%3C/svg%3E"); }
.crs-regels li:nth-child(7n+4)::before { background-color: #ffedd5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.4-5.7'/%3E%3Cpath d='M4 3.5V8h4.5'/%3E%3C/svg%3E"); }
.crs-regels li:nth-child(7n+5)::before { background-color: #fef3c7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h12l-2.5 4L17 12H5'/%3E%3C/svg%3E"); }
.crs-regels li:nth-child(7n+6)::before { background-color: #ccfbf1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.5c0 4.6-3.2 7.9-7.5 9.5-4.3-1.6-7.5-4.9-7.5-9.5V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.crs-regels li:nth-child(7n+7)::before { background-color: #e0e7ff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23152a80' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3.5 17.5l3 3 5.8-5.8a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-.6-.6-2.4z'/%3E%3C/svg%3E"); }
.crs-regels li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------- Formulieren ---------- */
.crs-veld { margin: 16px 0 0; }
.crs-veld label, .crs-label { display: block; margin: 0 0 6px; font-weight: 700; color: #1f2937; }
.crs input[type="email"], .crs input[type="text"], .crs input[type="url"], .crs input[type="number"], .crs select, .crs textarea,
.cursist-aanmelden input[type="email"] {
	box-sizing: border-box; width: 100%; max-width: 420px; padding: 12px 14px; border: 2px solid #dbe2ee; border-radius: 12px; background: #fbfcfe;
	font: inherit; font-size: 16px; color: #17191c; transition: border-color .15s, box-shadow .15s, background .15s; }
.crs textarea { max-width: 100%; font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
.crs input[type="number"] { max-width: 120px; }
.crs select { max-width: 240px; }
.crs input:focus, .crs select:focus, .crs textarea:focus, .cursist-aanmelden input[type="email"]:focus {
	outline: none; border-color: #1062fe; background: #fff; box-shadow: 0 0 0 4px rgba(16, 98, 254, .15); }
.crs input[type="checkbox"] { width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: -3px; accent-color: #1062fe; }
.crs-vink { display: flex !important; align-items: flex-start; gap: 4px; font-weight: 500 !important; line-height: 1.45; }
.crs input[type="file"] { font: inherit; font-size: 14px; }
.crs .dnse-melding:empty { display: none; }
.crs .dnse-melding { margin: 14px 0 0; padding: 12px 16px; border-radius: 12px; background: #eef4ff; border: 1px solid #cfdcfb; color: #152a80; font-weight: 600; }

/* Aanmeldformulier van CursistAuth (oefenzone/analyse): dezelfde invoer en knop. */
.cursist-aanmelden { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.cursist-aanmelden label { flex-basis: 100%; font-weight: 700; color: #1f2937; }
.cursist-aanmelden input[type="email"] { flex: 1 1 260px; }
.cursist-aanmelden button { padding: 12px 20px; border: 0; border-radius: 12px; background: linear-gradient(90deg, #152a80, #1062fe); color: #fff; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(16, 98, 254, .25); }
.cursist-aanmelden button:hover { filter: brightness(1.08); }
.cursist-aanmelden-uitleg { flex-basis: 100%; margin: 0; color: #5e636e; font-size: 14px; }

/* ---------- Tijdens het examen ---------- */
.crs-examenbalk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 22px; padding: 14px 16px;
	border-radius: 16px; background: linear-gradient(135deg, #eef4ff 0%, #f6f0ff 100%); border: 1px solid #dfe6fb; }
.crs .dnse-klok { display: inline-flex; align-items: center; gap: 10px; margin: 0 !important; padding: 9px 18px 9px 14px; border-radius: 999px; color: #fff;
	background: linear-gradient(90deg, #152a80, #1062fe); box-shadow: 0 6px 18px rgba(16, 98, 254, .28); font-size: 15px; transition: background .3s; }
.crs .dnse-klok::before { content: ""; width: 22px; height: 22px; background: center / 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2M9.5 2.5h5'/%3E%3C/svg%3E"); }
.crs .dnse-klok strong { font-weight: 600; opacity: .9; }
.crs .dnse-klok [data-dnse-klok] { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.crs .dnse-klok[data-crs-klok="let"] { background: linear-gradient(90deg, #ea580c, #f59e0b); box-shadow: 0 6px 18px rgba(234, 88, 12, .32); }
.crs .dnse-klok[data-crs-klok="bijna"] { background: linear-gradient(90deg, #b91c1c, #ef4444); box-shadow: 0 6px 18px rgba(220, 38, 38, .35); animation: crs-puls 1.2s ease-in-out infinite; }
@keyframes crs-puls { 50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, .18), 0 6px 18px rgba(220, 38, 38, .35); } }
@media (prefers-reduced-motion: reduce) { .crs .dnse-klok[data-crs-klok="bijna"] { animation: none; } }

.crs .dnse-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 999px; background: #fff; border: 1px solid #dfe6fb; }
.crs .dnse-tabs .eoh-knop-sec { border: 0; border-radius: 999px; padding: 9px 18px; background: transparent; color: #3d4a6b; }
.crs .dnse-tabs .eoh-knop-sec:hover { background: #f2f6ff; color: #152a80; }
.crs .dnse-tabs .eoh-knop-sec[aria-selected="true"] { background: linear-gradient(90deg, #152a80, #1062fe); color: #fff; box-shadow: 0 4px 12px rgba(16, 98, 254, .25); }
.crs .dnse-tabs [data-dnse-tab="inleveren"][aria-selected="true"] { background: linear-gradient(90deg, #ea580c, #f59e0b); box-shadow: 0 4px 12px rgba(234, 88, 12, .28); }

.crs [data-dnse-teller] { margin: 0 0 10px; font-weight: 800; color: #152a80; }
.crs-voortgang { height: 10px; margin: 0 0 16px; border-radius: 999px; background: #e6ebf5; overflow: hidden; }
.crs-voortgang i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #0d9488, #16a34a); transition: width .3s; }

.crs .dnse-nav { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; }
.crs .dnse-nav button { width: 36px; height: 36px; padding: 0; border: 2px solid #c9d6f2; border-radius: 50%; background: #fff; color: #152a80;
	font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; }
.crs .dnse-nav button:hover { border-color: #1062fe; transform: translateY(-1px); }
.crs .dnse-nav button.dnse-gedaan { background: #1062fe; border-color: #1062fe; color: #fff; }
.crs .dnse-nav button[aria-current="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #f59e0b; }

.crs .dnse-vraag { margin: 0 0 16px; padding: 22px 24px 18px; border-radius: 16px; background: #fff; border: 1px solid #e3e8f3; border-left: 6px solid #1d65af;
	box-shadow: 0 1px 2px rgba(21, 42, 128, .06), 0 8px 24px rgba(21, 42, 128, .08); }
.crs .dnse-vraag h2 { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #1062fe; }
.crs .dnse-vraagtekst { margin: 0 0 14px; font-size: 18px; font-weight: 700; line-height: 1.45; color: #152a80; }
.crs .dnse-vraagtekst p { margin: 0 0 8px; }
.crs .dnse-opties { margin: 0; padding: 0; border: 0; min-width: 0; }
.crs .dnse-opties > br { display: none; }
.crs .dnse-opties label { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 12px 14px; border: 2px solid #e4e8f2; border-radius: 10px;
	background: #fafbfe; cursor: pointer; line-height: 1.4; transition: border-color .15s, background .15s; }
.crs .dnse-opties label:hover { border-color: #9db8ec; background: #f2f6ff; }
.crs .dnse-opties input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: #1062fe; }
.crs .dnse-opties label:has(input:checked) { border-color: #1062fe; background: #e9f0ff; box-shadow: 0 0 0 3px rgba(16, 98, 254, .12); font-weight: 600; }
.crs .dnse-opties label:has(input:focus-visible) { outline: 3px solid #f59e0b; outline-offset: 2px; }
.crs-vraagknoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.crs [data-dnse-bewaard]:not(:empty) { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #e8f6ec; color: #15803d; font-size: 14px; font-weight: 700; }

/* Zo werkt het: uitleg bij de tabbladen (klik = tab openen; de actieve is gemarkeerd) */
.crs-zowerkt { margin: 0 0 16px; }
.crs .crs-zowerkt h2 { margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #1062fe; }
.crs .eoh-artikel .crs-zowerkt ol, .crs-zowerkt ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.crs-zowerkt li { margin: 0 !important; padding: 12px 14px; border-radius: 14px; background: #fff; border: 2px solid #e3e8f3; border-top-width: 5px; border-top-color: #1062fe;
	font-size: 14px; line-height: 1.45; color: #3d424b; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.crs-zowerkt li[data-crs-naar="praktijk"] { border-top-color: #0d9488; }
.crs-zowerkt li[data-crs-naar="inleveren"] { border-top-color: #ea580c; }
.crs-zowerkt li:hover { box-shadow: 0 6px 18px rgba(21, 42, 128, .1); }
.crs-zowerkt li.crs-zw-actief { border-color: #1062fe; background: #f2f6ff; box-shadow: 0 6px 18px rgba(16, 98, 254, .14); }
.crs-zowerkt li[data-crs-naar="praktijk"].crs-zw-actief { border-color: #0d9488; background: #f0fdfa; }
.crs-zowerkt li[data-crs-naar="inleveren"].crs-zw-actief { border-color: #ea580c; background: #fff7ed; }
.crs-zw-naam { display: block; margin: 0 0 4px; font-size: 16px; font-weight: 800; color: #152a80; }
.crs-zw-tekst { display: block; }

/* Praktijk */
.crs .dnse-opdracht { margin: 18px 0; padding: 20px 22px; border-radius: 16px; background: #fff; border: 1px solid #e3e8f3; border-top: 6px solid #0d9488;
	box-shadow: 0 6px 20px rgba(21, 42, 128, .07); font-size: 16px; }
.crs .dnse-opdracht:nth-of-type(3n+3) { border-top-color: #7c3aed; }
.crs .dnse-opdracht:nth-of-type(3n+1) { border-top-color: #ea580c; }
.crs .dnse-opdracht h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: #0f5f58; }
.crs .dnse-opdracht h3::before { content: "\270E"; flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #ccfbf1; color: #0f766e; font-size: 16px; }
.crs .dnse-opdracht label { display: block; margin: 12px 0 6px; font-weight: 700; color: #1f2937; }
.crs .dnse-opdracht label + br { display: none; }
.crs .dnse-opdracht p { margin: 0 0 10px; }
.crs-praktijk-intro { margin: 0 0 6px; }
.crs .dnse-opdracht input[type="text"], .crs .dnse-opdracht textarea { max-width: 100%; font-family: 'Roboto Mono', ui-monospace, monospace; font-size: 14.5px; }
.crs .dnse-opdracht input:focus, .crs .dnse-opdracht textarea:focus, .crs .dnse-opdracht select:focus { border-color: #0d9488; box-shadow: 0 0 0 4px rgba(13, 148, 136, .15); }
.crs .dnse-opdracht .eoh-knop { background: linear-gradient(90deg, #0f766e, #14b8a6); box-shadow: 0 6px 18px rgba(13, 148, 136, .25); }
.crs .dnse-controle:empty { display: none; }
.crs .dnse-controle { margin: 12px 0 0; padding: 12px 16px; border-radius: 12px; background: #f5f7fb; }
.crs .dnse-controle > p { margin: 0 0 6px; font-weight: 800; }
.crs .dnse-controle ul { margin: 0; }
.crs .dnse-groen { color: #15803d; }
.crs .dnse-oranje { color: #b45309; }
.crs .dnse-rood { color: #b91c1c; }
.crs .dnse-records { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 14px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px #e3e8f3; }
.crs .dnse-records td { padding: 8px 10px; border-bottom: 1px solid #eef1f7; vertical-align: top; }
.crs .dnse-records code { font-size: 13px; }
.crs .dnse-record { margin: 12px 0 0; padding: 18px 20px; border-radius: 16px; background: linear-gradient(135deg, #f0fdfa 0%, #eef4ff 100%); border: 1px solid #ccfbf1; }
.crs .dnse-record label { font-weight: 700; color: #1f2937; }
.crs .dnse-record small { color: #5e636e; }

/* Inleveren */
.crs [data-dnse-open]:empty { display: none; }
.crs [data-dnse-open] { padding: 12px 16px; border-radius: 12px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-weight: 700; }

/* ---------- Uitslag ---------- */
.crs-score { display: flex; align-items: center; gap: 24px; margin: 0 0 18px; }
.crs-score-cirkel { --pct: 0; --kleur: #ea580c; flex: none; display: grid; place-items: center; width: 128px; height: 128px; border-radius: 50%;
	background: conic-gradient(var(--kleur) calc(var(--pct) * 1%), #e6ebf5 0); }
.crs-score-cirkel > span { display: grid; place-items: center; width: 102px; height: 102px; border-radius: 50%; background: #fff; text-align: center; line-height: 1; }
.crs-score-cirkel strong { display: block; font-size: 38px; font-weight: 900; color: var(--kleur); letter-spacing: -.02em; }
.crs-score-cirkel small { display: block; margin-top: 4px; font-size: 14px; font-weight: 700; color: #5e636e; }
.crs-oordeel { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 8px !important; padding: 7px 16px; border-radius: 999px; font-size: 17px; font-weight: 800; color: #fff; }
.crs-geslaagd .crs-score-cirkel { --kleur: #16a34a; }
.crs-geslaagd .crs-oordeel { background: linear-gradient(90deg, #0f766e, #16a34a); }
.crs-geslaagd .crs-oordeel::before { content: "\2713"; }
.crs-gezakt .crs-oordeel { background: linear-gradient(90deg, #ea580c, #f59e0b); }
.crs-geslaagd { border-top: 6px solid #16a34a; }
.crs-gezakt { border-top: 6px solid #ea580c; }
.crs-klein { color: #5e636e; font-size: 14.5px; }
.crs .eoh-artikel ul.crs-modules { list-style: none; padding: 0; margin: 8px 0 18px; display: grid; gap: 10px; }
.crs-modules li { margin: 0 !important; }
.crs-modules .crs-mod-tekst { display: block; margin: 0 0 4px; font-size: 14.5px; color: #26292e; }
.crs-balkje { display: block; height: 10px; border-radius: 999px; background: #e6ebf5; overflow: hidden; }
.crs-balkje i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ea580c, #f59e0b); }
.crs-balkje-goed i { background: linear-gradient(90deg, #0d9488, #16a34a); }
.crs-balkje-matig i { background: linear-gradient(90deg, #d97706, #f59e0b); }
.crs-uitslag-blok { margin: 18px 0 0; padding: 14px 18px; border-radius: 12px; background: #f5f7fb; }
.crs-uitslag-blok > p:first-child { font-weight: 800; color: #152a80; }
.crs .eoh-artikel ul .crs-pr { list-style: none; position: relative; margin-left: -22px; padding-left: 24px; }
.crs-pr::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 12px; border-radius: 50%; background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); }
.crs-pr-groen::before { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); }
.crs-pr-oranje::before { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }

/* ---------- Certificaat (controlepagina, naam, Mijn cursussen) ---------- */
.crs .eoh-artikel .crs-cert-status, .crs-cert-status { display: flex; align-items: center; gap: 14px; margin: -24px -26px 20px; padding: 18px 26px; border-radius: 16px 16px 0 0; font-size: 19px; font-weight: 800; }
.crs-cert-status::before { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-size: 22px; font-weight: 900; }
.crs-cert-geldig { background: linear-gradient(90deg, #ecfdf3, #e6f7f5); color: #05603a; border-bottom: 1px solid #abefc6; }
.crs-cert-geldig::before { content: "\2713"; background: #16a34a; box-shadow: 0 4px 12px rgba(22, 163, 74, .35); }
.crs-cert-ingetrokken { background: linear-gradient(90deg, #fef3f2, #fff1eb); color: #b42318; border-bottom: 1px solid #fecdca; }
.crs-cert-ingetrokken::before { content: "\2717"; background: #dc2626; box-shadow: 0 4px 12px rgba(220, 38, 38, .3); }
.crs-certtabel { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 16px; font-size: 16px; border: 1px solid #e3e8f3; border-radius: 12px; overflow: hidden; }
.crs-certtabel th, .crs-certtabel td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid #eef1f7; }
.crs-certtabel tr:last-child th, .crs-certtabel tr:last-child td { border-bottom: 0; }
.crs-certtabel th { width: 34%; background: #f4f7fe; color: #152a80; font-weight: 700; }
.crs-certtabel td { color: #17191c; font-weight: 500; }
.crs-toezicht { color: #5e636e; font-size: 14.5px; }
.crs-certnaam { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 6px !important; font-size: 18px; }
.crs-certnaam strong { color: #152a80; }

/* ---------- Mijn cursussen ---------- */
.crs .mijnc-cursus { border-top: 6px solid #1062fe; }
.crs .mijnc-cursus:nth-of-type(4n+2) { border-top-color: #7c3aed; }
.crs .mijnc-cursus:nth-of-type(4n+3) { border-top-color: #0d9488; }
.crs .mijnc-cursus:nth-of-type(4n+4) { border-top-color: #ea580c; }
.crs .mijnc-cursus h3 { margin: 18px 0 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #1062fe; }
.crs .mijnc-cursus h2 + h3 { margin-top: 4px; }
.crs .eoh-artikel .mijnc-cursus ul { columns: 3 210px; column-gap: 28px; font-size: 14.5px; }
.crs .mijnc-cursus li { break-inside: avoid; margin: 0 0 3px; }
.crs-certregel { margin: 8px 0 !important; padding: 12px 16px; border-radius: 12px; background: linear-gradient(135deg, #fffbeb 0%, #fff7ed 100%); border: 1px solid #fde68a; line-height: 1.7; }
.crs-certregel code { background: #fff; }
.crs .mijnc-bevestig { background: #fff7ed; border: 1px solid #fed7aa; border-top: 6px solid #ea580c; }
.crs .mijnc-alles { background: #fafbfe; box-shadow: none; }

/* ---------- Blokken onder de cursus-startpagina ---------- */
.crs-startblok .eoh-blok { padding: 26px 28px; border-radius: 16px; background: linear-gradient(135deg, #eef4ff 0%, #f6f0ff 100%); border: 1px solid #dfe6fb;
	border-left: 6px solid #f59e0b; box-shadow: 0 8px 24px rgba(21, 42, 128, .08); }
.crs-startblok.dnsc-mijn .eoh-blok { background: linear-gradient(135deg, #f0fdfa 0%, #eef4ff 100%); border-color: #ccfbf1; border-left-color: #0d9488; }
.crs-startblok h3 { font-size: 22px; font-weight: 800; color: #152a80; }
.crs-startblok .eoh-knop-sec { align-self: flex-start; }

/* ---------- Mobiel ---------- */
@media (max-width: 600px) {
	.crs-kaart { padding: 18px 16px; border-radius: 14px; }
	.crs-lead { font-size: 16.5px; }
	.crs .eoh-artikel .crs-cert-status { margin: -18px -16px 16px; padding: 14px 16px; font-size: 17px; border-radius: 14px 14px 0 0; }
	.crs .eoh-artikel ul.crs-regels { grid-template-columns: 1fr; }
	.crs-regels li { padding-left: 58px; }
	.crs-examenbalk { padding: 12px; }
	.crs-zowerkt li { padding: 9px 12px; font-size: 13.5px; }
	.crs-zw-naam { font-size: 15px; margin-bottom: 2px; }
	.crs .dnse-tabs { width: 100%; box-sizing: border-box; justify-content: space-between; }
	.crs .dnse-tabs .eoh-knop-sec { flex: 1; justify-content: center; padding: 9px 10px; }
	.crs .dnse-vraag { padding: 16px 14px 12px; }
	.crs .dnse-opdracht { padding: 16px 14px; }
	.crs .dnse-nav button { width: 34px; height: 34px; }
	.crs-score { gap: 16px; }
	.crs-score-cirkel { width: 104px; height: 104px; }
	.crs-score-cirkel > span { width: 82px; height: 82px; }
	.crs-score-cirkel strong { font-size: 30px; }
	.crs-certtabel th, .crs-certtabel td { display: block; width: auto; padding: 8px 14px; }
	.crs-certtabel th { border-bottom: 0; padding-bottom: 2px; background: transparent; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: #1062fe; }
	.crs .crs-knop-groot { width: 100%; justify-content: center; }
	.crs-startblok .eoh-blok { padding: 20px 18px; }
}