/*
 * ransomware-classroom.css — klassessies: het docentbord en de deelnemerskant in de room.
 * Gebruikt de tokens uit css/main.css. Alle klassen beginnen met .klas-, zodat er niets
 * van het bestaande platform of van de room zelf wordt overschreven.
 */

/* Een display-waarde in een eigen klasse wint van [hidden]; daarom expliciet. */
.klas-gate[hidden],
.klas-sessies[hidden],
.klas-bord[hidden],
.klas-detail[hidden],
.klas-cijfers[hidden],
.klas-overlay[hidden],
.klas-chip[hidden],
.klas-klok[hidden],
.klas-podium[hidden],
.klas-qr[hidden] {
  display: none;
}

/* De battle-kolommen bestaan altijd in de tabel en worden hier weggelaten als de
   sessie een gewone klassessie is. Zo blijft de kolomvolgorde van kop en rijen
   onder alle omstandigheden gelijk. */
.klas-tabel:not(.is-battle) [data-kolom="battle"] {
  display: none;
}

/* .btn uit main.css zet display:inline-flex en wint daarmee van [hidden]; zonder deze
   regel bleef "Sessie starten" zichtbaar terwijl de sessie al liep. */
.btn[hidden] {
  display: none;
}


.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;
}

/* --------------------------------------------- instapvak in de room zelf */

/*
 * Het vak waar een student een klascode invult, op het startscherm van de room.
 * Die pagina laadt css/main.css niet, dus de kleuren komen uit de room (styles.css),
 * met een terugval voor het geval dit bestand ooit elders belandt.
 *
 * De accentkleur is bewust die van de room en niet het blauw van de startknop
 * ernaast: meedoen aan een klassessie is een andere keuze dan zelf gaan oefenen.
 */
.klas-instap {
  margin: 0 0 22px;
  padding: 22px 24px;
  border: 1px solid var(--accent, #38e28a);
  border-radius: 10px;
  background: #101b2ddd;
}

/* Zonder dit script blijft de plek leeg; dan hoort er ook geen kader te staan. */
.klas-instap:empty,
#klas-instap:empty {
  display: none;
}

.klas-instap h2 {
  margin: 0 0 6px;
  font-size: 22px;
  color: var(--accent, #38e28a);
}

.klas-instap__uitleg {
  margin: 0 0 16px;
  max-width: 62ch;
  color: var(--muted, #9aaac1);
  font-size: 15px;
  line-height: 1.6;
}

.klas-instap__fout {
  margin: 0 0 14px;
  padding: 8px 12px;
  border-left: 3px solid #ff8199;
  color: #ffc2cd;
  font-size: 14px;
}

.klas-instap__velden {
  display: grid;
  grid-template-columns: 11em minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
}

.klas-instap__velden > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.klas-instap label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted, #9aaac1);
}

.klas-instap input {
  padding: 12px 14px;
  border: 1px solid #35455f;
  border-radius: 8px;
  background: #0d1728;
  color: var(--text, #eef5ff);
  font-size: 16px;
}

.klas-instap input:focus-visible {
  outline: 2px solid var(--accent, #38e28a);
  outline-offset: 1px;
}

/* De code is de enige plek waar hoofdletters en cijfers door elkaar lopen; een
   monospace-letter met ruime spatiëring scheelt verkeerd overgetypte codes. */
.klas-instap__code {
  font: 700 20px/1.2 Consolas, "JetBrains Mono", monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.klas-instap__knop {
  padding: 13px 22px;
  border: 0;
  border-radius: 8px;
  background: var(--accent, #38e28a);
  color: #06281a;
  font: 700 15px/1.2 inherit;
  cursor: pointer;
}

.klas-instap__knop:hover:not(:disabled) {
  filter: brightness(1.08);
}

.klas-instap__knop:disabled {
  opacity: 0.6;
  cursor: progress;
}

.klas-instap__privacy {
  margin: 14px 0 0;
  color: var(--muted, #9aaac1);
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .klas-instap__velden {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .klas-instap__knop {
    width: 100%;
  }
}

/* ---------------------------------------------------------------- toegang */

.klas-gate {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  text-align: center;
}

.klas-gate__tekst {
  margin: 0 0 14px;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------- sessies */

.klas-sessies {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.klas-sessies > div {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
}

.klas-sessies h2 {
  margin: 0 0 6px;
  font-size: 16px;
}

.klas-hint,
.klas-leeg {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 14px;
}

.klas-optioneel {
  color: var(--text-dim);
  font-weight: 400;
}

.klas-form {
  display: grid;
  gap: 8px;
  max-width: 420px;
}

.klas-form label {
  font-size: 13px;
  font-weight: 600;
}

.klas-form input {
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text);
}

.klas-form select,
.klas-form input[type="number"] {
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text);
}

.klas-form button {
  justify-self: start;
}

/* -------------------------------------------------------------- soort sessie */

.klas-soort {
  display: grid;
  gap: 8px;
  margin: 6px 0 4px;
  padding: 0;
  border: 0;
}

.klas-soort legend {
  padding: 0;
  font-size: 13px;
  font-weight: 600;
}

.klas-soort__kaart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-panel-2);
  cursor: pointer;
}

.klas-soort__kaart:hover {
  border-color: var(--cyan);
}

.klas-soort__kaart:has(input:checked) {
  border-color: var(--cyan);
  background: var(--cyan-dim);
}

.klas-soort__kaart:focus-within {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.klas-soort__kaart > span {
  display: grid;
  gap: 2px;
}

.klas-soort__kaart strong {
  font-size: 14px;
}

.klas-soort__kaart span span {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.klas-fout {
  margin: 10px 0 0;
  color: var(--red);
  font-size: 14px;
}

.klas-lijst {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.klas-lijst__knop {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-panel-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.klas-lijst__knop:hover {
  border-color: var(--cyan);
}

.klas-lijst__meta {
  color: var(--text-muted);
  font: 500 12px/1.5 var(--font-mono);
}

/* ------------------------------------------------------------------- bord */

.klas-bord__kop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 20px;
  align-items: start;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
}

.klas-eyebrow {
  margin: 0 0 4px;
  color: var(--cyan);
  font: 700 11px/1.4 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.klas-bord__kop h2 {
  margin: 0 0 4px;
  font-size: 22px;
}

.klas-status {
  margin: 0;
  color: var(--text-muted);
  font: 500 13px/1.5 var(--font-mono);
}

.klas-code {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 12px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg-panel-2);
}

.klas-code__label {
  color: var(--text-muted);
  font: 700 10px/1.4 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.klas-code__waarde {
  font: 700 34px/1.1 var(--font-mono);
  letter-spacing: 0.18em;
  color: var(--cyan);
}

.klas-code__acties {
  display: flex;
  gap: 6px;
}

.klas-code__url {
  max-width: 260px;
  overflow: hidden;
  color: var(--text-dim);
  font: 400 11px/1.4 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.klas-bord__acties {
  display: grid;
  gap: 6px;
  align-content: start;
}

.klas-knop--gevaar {
  border-color: var(--red);
  color: var(--red);
}

.klas-verbinding {
  margin: 12px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--amber);
  border-radius: 6px;
  background: var(--amber-dim);
  color: var(--text);
  font-size: 14px;
}

.klas-cijfers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.klas-cijfers > div {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
}

.klas-cijfers dt {
  color: var(--text-muted);
  font: 700 10px/1.4 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.klas-cijfers dd {
  margin: 4px 0 0;
  font: 700 26px/1.1 var(--font-mono);
}

.klas-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.klas-filters input,
.klas-filters select {
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text);
}

.klas-zoek input {
  min-width: 220px;
}

.klas-teller {
  margin-left: auto;
  color: var(--text-muted);
  font: 500 12px/1.4 var(--font-mono);
}

/* ------------------------------------------------------------------ tabel */

.klas-tabel-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
}

.klas-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.klas-tabel th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-strong);
  background: var(--bg-panel-2);
  color: var(--text-muted);
  font: 700 10px/1.4 var(--font-mono);
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
}

.klas-tabel td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.klas-rij {
  cursor: pointer;
}

.klas-rij:hover td,
.klas-rij:focus-visible td {
  background: var(--bg-panel-2);
}

.klas-rij:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

.klas-balk {
  display: block;
  width: 120px;
  height: 6px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bg-elev);
}

.klas-balk__vul {
  display: block;
  height: 100%;
  background: var(--cyan);
}

.klas-balk__label {
  font: 600 13px/1.4 var(--font-mono);
}

.klas-taken {
  display: flex;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.klas-taak {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-size: 11px;
  line-height: 1;
}

.klas-taak.is-klaar {
  border-color: var(--cyan);
  background: var(--cyan-dim);
  color: var(--cyan);
}

.klas-taak.is-open {
  color: var(--text-dim);
}

/* Status nooit alleen in kleur: er staat altijd tekst bij. */
.klas-werk,
.klas-verb {
  font-weight: 600;
  white-space: nowrap;
}

.klas-werk--submitted { color: var(--green); }
.klas-werk--tasks-complete { color: var(--cyan); }
.klas-werk--working { color: var(--text); }
.klas-werk--waiting { color: var(--text-muted); }

.klas-verb--ok { color: var(--green); }
.klas-verb--unsure { color: var(--amber); }
.klas-verb--offline { color: var(--text-dim); }

/* ----------------------------------------------------------------- detail */

.klas-detail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  width: min(420px, 100%);
  overflow-y: auto;
  border-left: 1px solid var(--border-strong);
  background: var(--bg-panel);
  box-shadow: -18px 0 50px rgba(0, 0, 0, 0.45);
}

.klas-detail__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.klas-detail__kop h3 {
  margin: 0;
  font-size: 18px;
}

.klas-detail__sluit {
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 2px 10px;
  background: var(--bg-panel-2);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
}

.klas-detail__body {
  padding: 16px 18px 28px;
}

.klas-detail__samenvatting {
  margin: 0 0 10px;
  font: 600 14px/1.5 var(--font-mono);
}

.klas-detail__punten {
  margin: 0 0 12px;
  color: var(--text-muted);
  font: 500 13px/1.5 var(--font-mono);
}

.klas-detail__punten.is-straf {
  color: var(--amber);
}

/* De handelingen die punten kostten, met de uitleg van de engine erbij. Die tekst is
   de les erachter; een docent kan hem voorlezen in plaats van zelf te verzinnen
   waarom iets fout was. */
.klas-detail__risico {
  display: grid;
  gap: 8px;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
}

.klas-detail__risico li {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: 6px;
  background: var(--bg-panel-2);
}

.klas-detail__risico li.is-kritiek {
  border-left-color: var(--red);
}

.klas-detail__risico-kop {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
}

.klas-detail__risico-kop strong {
  font-size: 13px;
}

.klas-detail__risico-kosten {
  flex: none;
  color: var(--amber);
  font: 700 13px/1.4 var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.klas-detail__risico li.is-kritiek .klas-detail__risico-kosten {
  color: var(--red);
}

.klas-detail__risico-uitleg {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.klas-detail__review {
  margin: 0 0 14px;
  padding: 8px 12px;
  border: 1px solid var(--amber);
  border-radius: 6px;
  background: var(--amber-dim);
  font-size: 13px;
}

.klas-detail__body h4 {
  margin: 18px 0 8px;
  color: var(--text-muted);
  font: 700 10px/1.4 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.klas-detail__taken {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: taak;
}

.klas-detail__taken li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}

.klas-detail__taken li.is-klaar {
  border-color: var(--cyan);
}

.klas-detail__taken strong {
  color: var(--text-muted);
  font: 600 11px/1.4 var(--font-mono);
  white-space: nowrap;
}

.klas-detail__taken li.is-klaar strong {
  color: var(--cyan);
}

.klas-detail__events {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  font: 500 12px/1.6 var(--font-mono);
}

/* -------------------------------------------------------------------- QR */

.klas-qr {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg-panel-2);
}

.klas-qr__label {
  color: var(--text-muted);
  font: 700 10px/1.4 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Witte ondergrond onder de code zelf: een QR op een donker vlak wordt door veel
   telefooncamera's niet gelezen. */
.klas-qr__vlak {
  display: flex;
  padding: 6px;
  border-radius: 4px;
  background: #fff;
}

.klas-qr__vlak svg {
  display: block;
  width: 150px;
  height: 150px;
}

/* ------------------------------------------------------------------ klok */

.klas-klok {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 14px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
}

.klas-klok__tijd {
  display: flex;
  gap: 14px;
  align-items: baseline;
}

.klas-klok__label {
  color: var(--text-muted);
  font: 700 10px/1.4 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.klas-klok__waarde {
  font: 700 30px/1.1 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.klas-klok__acties {
  display: flex;
  gap: 8px;
}

/* De laatste vijf minuten, en daarna de tijd die om is. Kleur alleen is nooit het
   enige signaal: het label ernaast zegt in woorden wat er aan de hand is. */
.klas-klok--bijna {
  border-color: var(--amber);
  background: var(--amber-dim);
}

.klas-klok--bijna .klas-klok__waarde,
.klas-klok--bijna .klas-klok__label {
  color: var(--amber);
}

.klas-klok--om {
  border-color: var(--red);
}

.klas-klok--om .klas-klok__waarde,
.klas-klok--om .klas-klok__label {
  color: var(--red);
}

/* -------------------------------------------------------------- ranglijst */

.klas-podium {
  margin-top: 12px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
}

.klas-podium__kop {
  margin: 0 0 10px;
  font-size: 14px;
}

.klas-podium__lijst {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Flex in plaats van grid: de strafmelding staat er alleen bij wie punten verspeelde,
   en met vaste kolommen zou de puntenkolom dan verspringen tussen de rijen. */
.klas-podium__plek {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-panel-2);
}

.klas-podium__plek:first-child {
  border-color: var(--cyan);
  background: var(--cyan-dim);
}

.klas-podium__nummer {
  flex: none;
  width: 2.4em;
  font: 700 18px/1 var(--font-mono);
  color: var(--cyan);
  text-align: center;
}

.klas-podium__naam {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.klas-podium__straf {
  flex: none;
  color: var(--amber);
  font: 600 12px/1.4 var(--font-mono);
}

.klas-podium__punten {
  flex: none;
  font: 700 16px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------ punten in de tabel */

.klas-punten {
  font-variant-numeric: tabular-nums;
}

.klas-punten__waarde {
  display: block;
  font: 600 13px/1.4 var(--font-mono);
}

/* De uitsplitsing staat er klein onder: de uitkomst blijft leidend, maar een nul
   die uit verspeelde punten komt is nu te onderscheiden van een nul door niets doen. */
.klas-punten__straf {
  display: block;
  margin-top: 2px;
  color: var(--amber);
  font: 500 11px/1.4 var(--font-mono);
  cursor: help;
}

.klas-podium__regel,
.klas-podium__leeg {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}

.klas-plaats {
  font: 700 15px/1 var(--font-mono);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.klas-plaats--top {
  color: var(--cyan);
}

/* ------------------------------------------------------- schermvullend */

.klas-groot .topnav,
.klas-groot .page-header-left,
.klas-groot .klas-filters {
  display: none;
}

/*
 * De knoppenbalk blijft staan. Hij zat eerder in het verborgen .page-header, en dan
 * was Schermvullend een deur die alleen naar binnen open ging: de knop om er weer uit
 * te komen verdween mee, en op een beamer tijdens de les is dat precies verkeerd.
 * Escape werkt er ook voor, zie js/ransomware-docent.js.
 */
.klas-groot .page-header-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.klas-groot .klas-tabel {
  font-size: 18px;
}

.klas-groot .klas-cijfers dd {
  font-size: 34px;
}

.klas-groot .klas-code__waarde {
  font-size: 46px;
}

.klas-groot .klas-klok__waarde {
  font-size: 48px;
}

.klas-groot .klas-qr__vlak svg {
  width: 200px;
  height: 200px;
}

.klas-groot .klas-podium__nummer {
  font-size: 24px;
}

.klas-groot .klas-podium__punten {
  font-size: 22px;
}

/* ------------------------------------------------------------ responsief */

@media (max-width: 1100px) {
  .klas-bord__kop {
    grid-template-columns: 1fr;
  }
  .klas-code,
  .klas-qr {
    justify-items: start;
  }
  .klas-klok {
    flex-wrap: wrap;
  }
  .klas-cijfers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .klas-sessies {
    grid-template-columns: 1fr;
  }
  .klas-detail {
    width: 100%;
  }
}

/* ============================================================== de room ===
 * Deelnemerskant: aanmelden met een klascode, wachtscherm en verbindingsstatus.
 * Deze klassen hangen in ransomware/index.html, naast de bestaande labstijl.
 */

.klas-chip {
  /* Linksonder: rechts staat in Zelfstandig het fasenoverzicht van de room. */
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid #2a3340;
  border-radius: 999px;
  background: rgba(13, 15, 21, 0.92);
  color: #e8eaf0;
  font: 600 12px/1.4 Consolas, monospace;
}

.klas-chip__stip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ADE80;
}

.klas-chip--wacht .klas-chip__stip { background: #fbbf24; }
.klas-chip--fout .klas-chip__stip { background: #FB7185; }

.klas-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 10, 16, 0.94);
}

.klas-kaart {
  width: min(460px, 100%);
  padding: 26px;
  border: 1px solid #2a3340;
  border-radius: 12px;
  background: #14171e;
  color: #e8eaf0;
}

.klas-kaart h2 {
  margin: 0 0 6px;
  font-size: 22px;
}

.klas-kaart p {
  margin: 0 0 16px;
  color: #9095a8;
  line-height: 1.6;
}

.klas-kaart label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
}

.klas-kaart input {
  width: 100%;
  margin-bottom: 14px;
  padding: 11px 13px;
  border: 1px solid #2a3340;
  border-radius: 6px;
  background: #11131a;
  color: #e8eaf0;
  font-size: 15px;
}

.klas-kaart input#klasCode {
  font: 700 22px/1.2 Consolas, monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.klas-kaart__knoppen {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.klas-kaart button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #2a3340;
  border-radius: 6px;
  background: #1e222d;
  color: #e8eaf0;
  font-weight: 650;
  cursor: pointer;
}

.klas-kaart button.is-primair {
  border-color: #34D399;
  background: #34D399;
  color: #06231a;
}

.klas-kaart__privacy {
  margin-top: 14px;
  font-size: 12px;
  color: #6b7186;
}

.klas-kaart__fout {
  margin: 0 0 12px;
  color: #FB7185;
  font-size: 14px;
}

.klas-kaart :focus-visible,
.klas-chip :focus-visible {
  outline: 3px solid #b4e6ff;
  outline-offset: 2px;
}