/* Videostijl pakket 5: Beheer en Account.
   Instellingen (kaarten, velden, menu), Gebruikers, Zoom-calls, Overzicht studentresultaten, Correcties, Database,
   Aandachtspunten, het welkomstvenster, Inloggen (wachtwoord vergeten, nieuwe link, foutmelding), Cmd-K zoeken en pagina-hulp.
   Rust bij werken: kop van hooguit 34px, de gedeelde kaarten, tabellen, tabs, velden en badges uit vs-shared.css.
   Geen streepjes onder koppen, geen gloed. Klaar-momenten lopen via VsMoment (lib/vs-moment.js).

   Geladen ná vs-shared.css en de andere pakketten. Winnen zonder !important: elke regel begint met
     body:not(#vs):not(#vs-account)  → twee id's, net als vs-shared.css; dit bestand komt later en wint bij gelijke stand.
   Niet aangeraakt: de volgpagina voor klanten (track.html) houdt zijn eigen lichte, neutrale stijl. */

/* ---------- Beheerpagina's: Gebruikers, Zoom-calls, Correcties, Overzicht ---------- */
/* Zelfde ruimte als de andere werkpagina's; nooit breder dan het scherm. */
body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage, #learningRulesPage, #studentResultsPage) { box-sizing: border-box; min-width: 0; max-width: 100%; }
body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage) { padding: 32px 40px 56px; }

/* Kop: kicker + titel met accentwoord (34px), uitleg eronder. "Terug" is een lichte knop. */
body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage, #learningRulesPage, #studentResultsPage) > .center-head {
  display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 24px; padding: 0; border: 0;
}
body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage, #learningRulesPage, #studentResultsPage) > .center-head > div:first-child { flex: 1 1 auto; min-width: 0; }
body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage) .vs-head { gap: 10px; margin: 0 0 12px; }
body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage, #learningRulesPage, #studentResultsPage) > .center-head .title {
  margin: 0; padding: 0; border: 0; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 34px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; color: var(--vs-text);
}
body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage, #learningRulesPage, #studentResultsPage) > .center-head .title::after { content: none; }
/* Correcties en Overzicht worden door de beheer-js opgebouwd; daar zet de css een kleine mono-kicker boven de titel. */
body:not(#vs):not(#vs-account) :is(#learningRulesPage, #studentResultsPage) > .center-head .title::before {
  content: "Beheer"; display: block; margin: 0 0 10px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; line-height: 1.4; text-transform: uppercase; color: var(--vs-accent);
}
body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage, #learningRulesPage, #studentResultsPage) > .center-head .subtitle { max-width: 70ch; margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--vs-copy); }
body:not(#vs):not(#vs-account) :is(#usersBack, #zoomCallsBack) {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--vs-ghost-line); border-radius: 12px; background: transparent; color: var(--vs-copy); font: 500 14px "IBM Plex Sans", sans-serif; cursor: pointer;
}
body:not(#vs):not(#vs-account) :is(#usersBack, #zoomCallsBack):hover { border-color: rgba(91, 139, 255, 0.4); color: var(--vs-text); }

/* Velden op deze pagina's: dezelfde veldstijl als in main (deze pagina's staan naast main, niet erin). */
body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage, #learningRulesPage, #studentResultsPage, #coachZoomHost) :is(input:not([type]), input[type="text"], input[type="email"], input[type="search"], input[type="date"], input[type="datetime-local"], input[type="number"], select, textarea) {
  box-sizing: border-box; min-width: 0; max-width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--vs-field-edge); border-radius: 12px; background-color: var(--vs-field); box-shadow: none; color: var(--vs-text); font: 400 15px "IBM Plex Sans", sans-serif; -webkit-appearance: none; appearance: none;
}
body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage, #learningRulesPage, #studentResultsPage, #coachZoomHost) select {
  padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238790b5' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center;
}
body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage, #learningRulesPage, #studentResultsPage, #coachZoomHost) textarea { min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage, #learningRulesPage, #studentResultsPage, #coachZoomHost) :is(input, select, textarea)::placeholder { color: var(--vs-muted); opacity: 1; }
body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage, #learningRulesPage, #studentResultsPage, #coachZoomHost) :is(input, select, textarea):focus { border-color: var(--vs-accent); outline: 2px solid rgba(91, 139, 255, 0.35); outline-offset: 0; }
body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage, #learningRulesPage, #studentResultsPage, #coachZoomHost) .label {
  margin: 6px 0 0; font: 600 13px "IBM Plex Sans", sans-serif; letter-spacing: 0; text-transform: none; color: var(--vs-copy);
}
/* Rustig rood foutblok, net als .vs-error. */
body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage, #learningRulesPage, #studentResultsPage, #coachZoomHost) .calc-field-error:not([hidden]) {
  display: block; margin: 0 0 16px; padding: 14px 16px; border: 1px solid rgba(255, 143, 156, 0.3); border-radius: 14px; background: rgba(255, 143, 156, 0.08); color: var(--vs-bad); font-size: 14px; line-height: 1.5;
}
/* Kleine knoppen in kaarten: allemaal dezelfde lichte knop van 40px. De primaire knop blijft blauw. */
body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage, #learningRulesPage, #studentResultsPage, #coachZoomHost) :is(.result-action, .settings-reset):not(#usersBack):not(#zoomCallsBack) {
  display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 40px; padding: 0 16px; border: 1px solid var(--vs-ghost-line); border-radius: 12px; background: transparent; box-shadow: none; color: var(--vs-copy); font: 500 14px "IBM Plex Sans", sans-serif; cursor: pointer;
}
body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage, #learningRulesPage, #studentResultsPage, #coachZoomHost) :is(.result-action, .settings-reset):not(#usersBack):not(#zoomCallsBack):hover:not(:disabled) { border-color: rgba(91, 139, 255, 0.4); color: var(--vs-text); }
body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage, #learningRulesPage, #studentResultsPage, #coachZoomHost) .result-action.is-primary { border-color: transparent; background: var(--vs-accent); color: #ffffff; font-weight: 600; }
body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage, #learningRulesPage, #studentResultsPage, #coachZoomHost) .cta { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 44px; padding: 0 20px; font-size: 15px; }

/* ---------- Gebruikers ---------- */
body:not(#vs):not(#vs-account) #usersPage #usersInviteOpen { margin: 0 0 20px; }
/* Uitnodigen: een gewone kaart met de velden onder elkaar. */
body:not(#vs):not(#vs-account) #usersPage .users-invite {
  display: grid; gap: 8px; width: 100%; max-width: 480px; margin: 0 0 24px; padding: 24px; box-sizing: border-box; border: 1px solid var(--vs-edge); border-radius: 20px; background: var(--vs-card); box-shadow: none;
}
body:not(#vs):not(#vs-account) #usersPage .users-invite[hidden] { display: none; }
body:not(#vs):not(#vs-account) #usersPage .users-invite .cta { margin-top: 12px; }
body:not(#vs):not(#vs-account) #usersPage .users-note { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--vs-muted); }
/* Zoeken en filters: zoekveld + tabbladen met een blauwe lijn, zoals overal. */
body:not(#vs):not(#vs-account) #usersPage .users-tools { display: grid; gap: 16px; margin: 0 0 20px; }
body:not(#vs):not(#vs-account) #usersPage #usersSearch { width: 100%; max-width: 420px; }
body:not(#vs):not(#vs-account) #usersPage .users-filters {
  display: flex; flex-wrap: nowrap; gap: 24px; max-width: 100%; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--vs-hair);
}
body:not(#vs):not(#vs-account) #usersPage .users-filters::-webkit-scrollbar { display: none; }
body:not(#vs):not(#vs-account) :is(#usersPage, #studentResultsPage) .users-filter {
  flex: 0 0 auto; min-height: 44px; margin: 0 0 -1px; padding: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--vs-muted); font: 500 14px "IBM Plex Sans", sans-serif; white-space: nowrap; cursor: pointer;
}
body:not(#vs):not(#vs-account) :is(#usersPage, #studentResultsPage) .users-filter:hover { color: var(--vs-text); }
body:not(#vs):not(#vs-account) :is(#usersPage, #studentResultsPage) .users-filter:is(.is-on, [aria-selected="true"]) { border-bottom-color: var(--vs-accent); color: var(--vs-text); font-weight: 600; }
/* Bevestigen (pauzeren, verwijderen): een rustige kaart. */
body:not(#vs):not(#vs-account) #usersPage #usersConfirm:not([hidden]) { margin: 0 0 20px; padding: 20px; border: 1px solid var(--vs-edge-hero); border-radius: 18px; background: var(--vs-hero); }
body:not(#vs):not(#vs-account) #usersPage #usersConfirm p { margin: 0 0 14px; color: var(--vs-text); }
/* Tabel in een glazen kader; acties rechts. */
body:not(#vs):not(#vs-account) #usersPage .users-table-wrap { border: 1px solid var(--vs-hair); border-radius: 16px; background: var(--vs-glass); overflow-x: auto; }
body:not(#vs):not(#vs-account) #usersPage .users-table td { vertical-align: middle; border-bottom: 0; }
body:not(#vs):not(#vs-account) #usersPage .users-table th { border-bottom: 1px solid var(--vs-hair); }
body:not(#vs):not(#vs-account) #usersPage .users-table td:first-child { color: var(--vs-text); font-weight: 600; }
body:not(#vs):not(#vs-account) #usersPage .users-menu summary { border-radius: 12px; color: var(--vs-copy); }
body:not(#vs):not(#vs-account) #usersPage .users-menu summary:hover { background: rgba(91, 139, 255, 0.08); color: var(--vs-text); }
body:not(#vs):not(#vs-account) #usersPage .users-menu[open] > div {
  position: absolute; right: 0; z-index: 5; padding: 8px; border: 1px solid var(--vs-edge); border-radius: 14px; background: var(--vs-modal); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
body:not(#vs):not(#vs-account) #usersPage .users-menu[open] > div button { justify-content: flex-start; border-color: transparent; }
/* Telefoon: kaarten in plaats van de tabel. */
body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage, #coachZoomHost) .users-card {
  margin: 0 0 12px; padding: 20px; box-sizing: border-box; border: 1px solid var(--vs-edge); border-radius: 20px; background: var(--vs-card); box-shadow: none;
}
body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage, #coachZoomHost) .users-card h2 { margin: 0 0 6px; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--vs-text); }
body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage, #coachZoomHost) .users-meta { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--vs-muted); }
body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage, #coachZoomHost) .users-card-line { color: var(--vs-copy); }
/* "Nog geen …" en "laden" op deze pagina's: rustig in het midden. */
body:not(#vs):not(#vs-account) :is(#zoomCallsList, #coachZoomList, #usersList) > p.users-meta:only-child { margin: 0; padding: 32px 16px; border: 1px dashed var(--vs-hair); border-radius: 16px; text-align: center; }

/* ---------- Zoom-calls (pagina en blok in Mijn coaching) ---------- */
body:not(#vs):not(#vs-account) :is(#zoomCallsPage, #coachZoomHost) .zoom-call { display: grid; gap: 10px; }
body:not(#vs):not(#vs-account) :is(#zoomCallsPage, #coachZoomHost) .zoom-call > label,
body:not(#vs):not(#vs-account) :is(#zoomCallsPage, #coachZoomHost) :is(.zoom-sub, .zoom-student-title) {
  margin: 8px 0 0; font-family: "IBM Plex Sans", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--vs-copy);
}
body:not(#vs):not(#vs-account) :is(#zoomCallsPage, #coachZoomHost) .zoom-call > :is(button, .users-actions, .coach-zoom-share-actions) { justify-self: start; }
body:not(#vs):not(#vs-account) :is(#zoomCallsPage, #coachZoomHost) .zoom-task { margin: 0; padding: 12px 0; border-top: 1px solid var(--vs-row); color: var(--vs-copy); }
body:not(#vs):not(#vs-account) :is(#zoomCallsPage, #coachZoomHost) .coach-zoom-warning:not([hidden]) {
  padding: 14px 16px; border: 1px solid rgba(255, 196, 107, 0.3); border-radius: 14px; background: rgba(255, 196, 107, 0.08); color: var(--vs-warn); font-size: 14px;
}

/* ---------- Correcties en Overzicht studentresultaten ---------- */
body:not(#vs):not(#vs-account) :is(#learningRulesPage, #studentResultsPage)[data-mounted="1"] { padding: 32px 40px 56px; }
body:not(#vs):not(#vs-account) :is(#learningRulesPage, #studentResultsPage) .learn-card {
  margin: 0 0 12px; padding: 20px; border: 1px solid var(--vs-edge); border-radius: 20px; background: var(--vs-card); box-shadow: none;
}
body:not(#vs):not(#vs-account) :is(#learningRulesPage, #studentResultsPage) .learn-card.is-focus { border-color: var(--vs-edge-hero); background: var(--vs-hero); box-shadow: none; }
body:not(#vs):not(#vs-account) #learningRulesPage .learn-rule-text { margin: 0 0 8px; font-size: 15px; line-height: 1.55; color: var(--vs-text); }
body:not(#vs):not(#vs-account) :is(#learningRulesPage, #studentResultsPage) .users-meta { font-size: 13px; color: var(--vs-muted); }
body:not(#vs):not(#vs-account) #learningRulesPage .learn-card .calc-field-error {
  display: inline-flex; margin: 0 0 10px; padding: 4px 10px; border: 1px solid rgba(255, 196, 107, 0.3); border-radius: 999px; background: rgba(255, 196, 107, 0.12); color: var(--vs-warn); font-size: 12px; font-weight: 600;
}
body:not(#vs):not(#vs-account) :is(#learningRulesPage, #studentResultsPage) .users-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Overzicht: links de lijst met leerlingen, rechts het profiel. */
body:not(#vs):not(#vs-account) #studentResultsPage .student-results-filters { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 12px 0 16px; border-bottom: 1px solid var(--vs-hair); }
body:not(#vs):not(#vs-account) #studentResultsPage .student-pick {
  display: block; width: 100%; margin: 0 0 8px; padding: 14px 16px; box-sizing: border-box; border: 1px solid var(--vs-hair); border-radius: 16px; background: var(--vs-glass); box-shadow: none; color: var(--vs-copy); text-align: left; font: 400 13px/1.5 "IBM Plex Sans", sans-serif; cursor: pointer;
}
body:not(#vs):not(#vs-account) #studentResultsPage .student-pick > * { display: block; }
body:not(#vs):not(#vs-account) #studentResultsPage .student-pick strong { display: block; color: var(--vs-text); font-size: 15px; font-weight: 600; }
body:not(#vs):not(#vs-account) #studentResultsPage .student-pick:hover { border-color: rgba(91, 139, 255, 0.35); }
body:not(#vs):not(#vs-account) #studentResultsPage .student-pick:is(.is-on, [aria-selected="true"]) { border-color: rgba(91, 139, 255, 0.45); background: rgba(91, 139, 255, 0.1); }
body:not(#vs):not(#vs-account) #studentResultsPage .student-profile-name { margin: 0 0 4px; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.025em; color: var(--vs-text); }
body:not(#vs):not(#vs-account) #studentResultsPage .student-stat-grid { gap: 12px; }
body:not(#vs):not(#vs-account) #studentResultsPage .student-stat { padding: 14px 16px; border: 1px solid var(--vs-hair); border-radius: 16px; background: var(--vs-glass); }
body:not(#vs):not(#vs-account) #studentResultsPage .student-stat strong { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; color: var(--vs-text); }
body:not(#vs):not(#vs-account) #studentResultsPage .student-result-row { border-top: 1px solid var(--vs-row); }
body:not(#vs):not(#vs-account) :is(#learningRulesPage, #studentResultsPage) .learn-summary div { border: 1px solid var(--vs-hair); border-radius: 16px; background: var(--vs-glass); }
body:not(#vs):not(#vs-account) :is(#learningRulesPage, #studentResultsPage) .learn-summary strong { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; color: var(--vs-text); }

/* ---------- Instellingen ---------- */
/* Keuzeknoppen (taal, thema, AI-taal): één rustige schakelaar, het gekozen deel licht blauw. */
body:not(#vs):not(#vs-account) #settingsModal :is(.settings-choice, .lang-switch) {
  display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 100%; padding: 4px; box-sizing: border-box; border: 1px solid var(--vs-field-edge); border-radius: 12px; background: var(--vs-field);
}
body:not(#vs):not(#vs-account) #settingsModal :is(.settings-choice, .lang-switch) button {
  min-height: 38px; padding: 0 16px; border: 1px solid transparent; border-radius: 9px; background: transparent; box-shadow: none; color: var(--vs-muted); font: 500 14px "IBM Plex Sans", sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer;
}
body:not(#vs):not(#vs-account) #settingsModal :is(.settings-choice, .lang-switch) button:hover { color: var(--vs-text); }
body:not(#vs):not(#vs-account) #settingsModal :is(.settings-choice, .lang-switch) button:is(.is-on, [aria-pressed="true"]) { border-color: rgba(91, 139, 255, 0.35); background: rgba(91, 139, 255, 0.14); color: var(--vs-text); font-weight: 600; }
/* Alle knoppen in een sectie: de primaire knop blauw (44px), de rest dezelfde lichte knop (44px). */
body:not(#vs):not(#vs-account) #settingsModal .settings-pane :is(.cta, .result-action, .settings-reset) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; max-width: 100%; min-height: 44px; padding: 0 18px; box-sizing: border-box; border-radius: 12px; font: 500 14px "IBM Plex Sans", sans-serif; text-align: center; text-decoration: none; white-space: normal; cursor: pointer;
}
body:not(#vs):not(#vs-account) #settingsModal .settings-pane .cta:not(.cta-secondary):not(.cta-danger) { border: 0; background: var(--vs-accent); color: #ffffff; font-weight: 600; box-shadow: none; }
body:not(#vs):not(#vs-account) #settingsModal .settings-pane .cta:not(.cta-secondary):not(.cta-danger):hover { background: var(--vs-accent-hover); }
body:not(#vs):not(#vs-account) #settingsModal .settings-pane :is(.result-action, .settings-reset) { border: 1px solid var(--vs-ghost-line); background: transparent; box-shadow: none; color: var(--vs-copy); }
body:not(#vs):not(#vs-account) #settingsModal .settings-pane :is(.result-action, .settings-reset):hover:not(:disabled) { border-color: rgba(91, 139, 255, 0.4); color: var(--vs-text); }
body:not(#vs):not(#vs-account) #settingsModal .settings-pane .settings-reset { margin-top: 8px; }
/* Knoppen die los onder elkaar stonden: netjes naast elkaar met ruimte. */
body:not(#vs):not(#vs-account) #settingsModal .settings-pane :is(.settings-row, .settings-fold-actions, .shopify-actions) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
body:not(#vs):not(#vs-account) #settingsModal #settingsDisplayBody > :is(.settings-reset, .result-action) { justify-self: start; margin-top: 4px; }
body:not(#vs):not(#vs-account) #settingsModal .settings-pane :is(.settings-hint, .calc-field-hint, .settings-desc) { font-size: 13px; line-height: 1.55; color: var(--vs-muted); }
body:not(#vs):not(#vs-account) #settingsModal .settings-pane .settings-desc { max-width: 60ch; margin: 0 0 20px; font-size: 14px; }
/* Pixel: de knop was te smal voor zijn tekst. */
body:not(#vs):not(#vs-account) #settingsModal #pixelGuideLink { min-height: 48px; padding: 0 22px; }
/* Shopify-stappen: een checklijst met rondjes; klaar = groen vinkje, nu bezig = blauw. */
body:not(#vs):not(#vs-account) #settingsModal .shopify-steps { display: grid; gap: 4px; margin: 0 0 20px; padding: 0; list-style: none; counter-reset: shopstep; }
body:not(#vs):not(#vs-account) #settingsModal .shopify-steps li {
  display: flex; align-items: center; gap: 12px; padding: 8px 0; border-radius: 0; background: none; color: var(--vs-muted); font: 400 14px "IBM Plex Sans", sans-serif; counter-increment: shopstep;
}
body:not(#vs):not(#vs-account) #settingsModal .shopify-steps li::before {
  content: counter(shopstep); display: inline-grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; box-sizing: border-box; border: 1px solid var(--vs-hair); border-radius: 50%; color: var(--vs-muted); font: 600 12px "IBM Plex Mono", ui-monospace, monospace;
}
body:not(#vs):not(#vs-account) #settingsModal .shopify-steps li.is-done { color: var(--vs-copy); }
body:not(#vs):not(#vs-account) #settingsModal .shopify-steps li.is-done::before { content: "✓"; border-color: transparent; background: var(--vs-ok); color: #0a0d1a; font-family: "IBM Plex Sans", sans-serif; }
body:not(#vs):not(#vs-account) #settingsModal .shopify-steps li.is-current { background: none; color: var(--vs-text); font-weight: 600; }
body:not(#vs):not(#vs-account) #settingsModal .shopify-steps li.is-current::before { border-color: var(--vs-accent); color: var(--vs-accent); }
/* Koppelingskaart, beheer-tegels en app-kaarten: de gedeelde kaart. */
body:not(#vs):not(#vs-account) #settingsModal :is(#shopifyConnectionCard, .settings-admin-tile, .lb-admin, .app-card) {
  padding: 20px; box-sizing: border-box; border: 1px solid var(--vs-edge); border-radius: 20px; background: var(--vs-card); box-shadow: none;
}
body:not(#vs):not(#vs-account) #settingsModal .settings-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0 0 16px; }
body:not(#vs):not(#vs-account) #settingsModal .settings-admin-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
body:not(#vs):not(#vs-account) #settingsModal .settings-admin-tile[hidden] { display: none; }
body:not(#vs):not(#vs-account) #settingsModal .settings-admin-tile h4 { margin: 0; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--vs-text); }
body:not(#vs):not(#vs-account) #settingsModal .settings-admin-tile p { flex: 1 1 auto; margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--vs-muted); }
body:not(#vs):not(#vs-account) #settingsModal #shopifyCardStatus { margin: 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vs-muted); }
body:not(#vs):not(#vs-account) #settingsModal #shopifyShopName { margin: 4px 0 0; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--vs-text); }
/* Schakelaars: groen als hij aan staat, zoals de vinkjes. */
body:not(#vs):not(#vs-account) #settingsModal .settings-toggle.is-on { border-color: rgba(126, 224, 181, 0.35); background: rgba(126, 224, 181, 0.16); color: var(--vs-ok); }
/* Melding onder een formulier: groen = gelukt, rood = mislukt. */
body:not(#vs):not(#vs-account) #settingsModal :is(#settingsProfileMessage, #settingsSecurityMessage, .settings-message).is-ok { color: var(--vs-ok); }
body:not(#vs):not(#vs-account) #settingsModal :is(#settingsProfileMessage, #settingsSecurityMessage, .settings-message).is-bad { color: var(--vs-bad); }

/* ---------- Database-venster ---------- */
body:not(#vs):not(#vs-account) #databaseModal .office-modal-card { width: min(480px, calc(100vw - 32px)); padding: 28px; box-sizing: border-box; }
body:not(#vs):not(#vs-account) #databaseModal .office-modal-card p { margin: 8px 0 20px; font-size: 14px; line-height: 1.6; color: var(--vs-copy); }
body:not(#vs):not(#vs-account) #databaseModal .office-modal-close { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; }

/* ---------- Welkomstvenster (onboarding) ---------- */
/* De stap als mono-kicker, geen balk onder de kop. De lijst als rustige checklijst. */
body:not(#vs):not(#vs-account) #onboardingModal .onboarding-dialog { width: min(560px, calc(100vw - 32px)); padding: 32px; box-sizing: border-box; }
body:not(#vs):not(#vs-account) #onboardingModal .onboarding-step { margin: 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vs-accent); }
body:not(#vs):not(#vs-account) #onboardingModal .onboarding-meter { display: none; }
body:not(#vs):not(#vs-account) #onboardingModal #onboardingTitle { margin: 10px 0 10px; padding: 0; border: 0; background: none; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 30px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; color: var(--vs-text); }
body:not(#vs):not(#vs-account) #onboardingModal #onboardingTitle::after { content: none; }
body:not(#vs):not(#vs-account) #onboardingModal #onboardingBody { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--vs-copy); }
body:not(#vs):not(#vs-account) #onboardingModal .onboarding-parts { display: grid; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
body:not(#vs):not(#vs-account) #onboardingModal .onboarding-parts li { display: flex; align-items: flex-start; gap: 12px; color: var(--vs-copy); font-size: 15px; line-height: 1.5; }
body:not(#vs):not(#vs-account) #onboardingModal .onboarding-parts li::before {
  content: "✓"; display: inline-grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; border: 1px solid rgba(91, 139, 255, 0.4); border-radius: 50%; color: var(--vs-accent); font-size: 12px; font-weight: 700;
}
body:not(#vs):not(#vs-account) #onboardingModal .onboarding-form { display: grid; gap: 14px; margin: 0 0 20px; }
body:not(#vs):not(#vs-account) #onboardingModal :is(.onboarding-form, .onboarding-parts)[hidden] { display: none; }
body:not(#vs):not(#vs-account) #onboardingModal .onboarding-form label { display: grid; gap: 8px; font: 600 13px "IBM Plex Sans", sans-serif; color: var(--vs-copy); }
body:not(#vs):not(#vs-account) #onboardingModal .onboarding-form :is(input, select) { min-height: 48px; padding: 0 14px; font-size: 15px; }
body:not(#vs):not(#vs-account) #onboardingModal .onboarding-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
body:not(#vs):not(#vs-account) #onboardingModal .onboarding-actions > button { min-height: 44px; padding: 0 20px; border-radius: 12px; font-size: 15px; }
body:not(#vs):not(#vs-account) #onboardingModal #onboardingBack { border: 1px solid var(--vs-ghost-line); background: transparent; color: var(--vs-copy); box-shadow: none; }
body:not(#vs):not(#vs-account) #onboardingModal .onboarding-actions > button:focus-visible { outline: 2px solid var(--vs-text); outline-offset: 2px; box-shadow: none; }

/* ---------- Pagina-hulp ---------- */
body:not(#vs):not(#vs-account) #pageHelpModal .page-help-dialog { width: min(560px, calc(100vw - 32px)); padding: 28px; box-sizing: border-box; }
body:not(#vs):not(#vs-account) #pageHelpModal #pageHelpTitle { margin: 0 48px 8px 0; }
body:not(#vs):not(#vs-account) #pageHelpModal #pageHelpShort { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--vs-copy); }
body:not(#vs):not(#vs-account) #pageHelpModal .page-help-kicker { margin: 16px 0 4px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vs-muted); }
body:not(#vs):not(#vs-account) #pageHelpModal .page-help-faqs > * { border-radius: 14px; }
body:not(#vs):not(#vs-account) #pageHelpModal :is(.result-action, .page-help-x) { border: 1px solid var(--vs-ghost-line); border-radius: 12px; background: transparent; box-shadow: none; color: var(--vs-copy); }
body:not(#vs):not(#vs-account) #pageHelpModal .result-action { min-height: 40px; padding: 0 16px; font-weight: 500; }
body:not(#vs):not(#vs-account) #pageHelpModal .result-action:hover { border-color: rgba(91, 139, 255, 0.4); color: var(--vs-text); }

/* ---------- Cmd-K zoeken ---------- */
body:not(#vs):not(#vs-account) .qs-backdrop { background: rgba(6, 8, 18, 0.72); backdrop-filter: blur(6px); }
body:not(#vs):not(#vs-account) .qs-dialog { border: 1px solid var(--vs-edge); border-radius: 20px; background: var(--vs-modal); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); overflow: hidden; }
body:not(#vs):not(#vs-account) .qs-dialog .qs-input { min-height: 52px; border: 0; outline: 0; background: transparent; box-shadow: none; color: var(--vs-text); font: 400 17px "IBM Plex Sans", sans-serif; }
body:not(#vs):not(#vs-account) .qs-dialog .qs-input:focus { border: 0; outline: 0; }
body:not(#vs):not(#vs-account) .qs-dialog .qs-group-title { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vs-muted); }
body:not(#vs):not(#vs-account) .qs-dialog .qs-row { border: 1px solid transparent; border-radius: 12px; }
body:not(#vs):not(#vs-account) .qs-dialog .qs-row:is([aria-selected="true"], .is-on) { border-color: rgba(91, 139, 255, 0.35); background: rgba(91, 139, 255, 0.12); }
body:not(#vs):not(#vs-account) .qs-dialog .qs-empty { padding: 28px 16px; color: var(--vs-muted); font-size: 14px; text-align: center; }
body:not(#vs):not(#vs-account) .qs-dialog .qs-kbd { border: 1px solid var(--vs-hair); border-radius: 6px; background: var(--vs-glass); color: var(--vs-muted); font-family: "IBM Plex Mono", ui-monospace, monospace; }

/* ---------- Aandachtspunten (belletje) ---------- */
body:not(#vs):not(#vs-account) .attn-panel { border: 1px solid var(--vs-edge); border-radius: 18px; background: var(--vs-modal); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
body:not(#vs):not(#vs-account) .attn-panel .attn-item { border: 1px solid var(--vs-hair); border-radius: 14px; background: var(--vs-glass); box-shadow: none; }
body:not(#vs):not(#vs-account) .attn-panel .attn-item:hover { border-color: rgba(91, 139, 255, 0.35); }

/* ---------- Inloggen: wachtwoord vergeten, nieuwe link, foutmelding ---------- */
/* Fout = rustig rood blok; een gewone melding (herstelmail verstuurd, wachtwoord aangepast) = rustig groen blok. */
body:not(#vs):not(#vs-account) #authScreen .auth-error:not([hidden]) {
  margin: 4px 0 12px; padding: 12px 14px; border: 1px solid rgba(255, 143, 156, 0.3); border-radius: 12px; background: rgba(255, 143, 156, 0.08); color: var(--vs-bad); font-size: 14px; line-height: 1.5;
}
body:not(#vs):not(#vs-account) #authScreen .auth-status:not([hidden]) {
  margin: 4px 0 12px; padding: 12px 14px; border: 1px solid rgba(126, 224, 181, 0.3); border-radius: 12px; background: rgba(126, 224, 181, 0.08); color: var(--vs-ok); font-size: 14px; line-height: 1.5;
}
/* "Wachtwoord vergeten" en "Nieuwe link aanvragen": dezelfde knoppen als bij inloggen. */
body:not(#vs):not(#vs-account) #authScreen #authResetPassword {
  display: block; width: 100%; min-height: 44px; margin-top: 8px; border: 0; background: none; color: var(--vs-copy); font: 500 14px "IBM Plex Sans", sans-serif; cursor: pointer;
}
body:not(#vs):not(#vs-account) #authScreen #authResetPassword:hover { color: var(--vs-text); text-decoration: underline; text-underline-offset: 3px; }
body:not(#vs):not(#vs-account) #authScreen #authResetPassword[hidden] { display: none; }

/* ---------- Telefoon ---------- */
@media (max-width: 800px) {
  body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage, #learningRulesPage, #studentResultsPage)[data-mounted="1"],
  body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage) { padding: 20px 16px 40px; }
  body:not(#vs):not(#vs-account) :is(#usersPage, #zoomCallsPage, #learningRulesPage, #studentResultsPage) > .center-head .title { font-size: 30px; }
  body:not(#vs):not(#vs-account) #usersPage :is(.cta, button.result-action) { width: 100%; }
  body:not(#vs):not(#vs-account) #usersPage .users-filters button { width: auto; }
  body:not(#vs):not(#vs-account) #usersPage #usersSearch { max-width: none; }
  body:not(#vs):not(#vs-account) #usersPage .users-invite { max-width: none; padding: 20px; }
}
@media (max-width: 560px) {
  body:not(#vs):not(#vs-account) #onboardingModal .onboarding-dialog { padding: 24px 20px; }
  body:not(#vs):not(#vs-account) #onboardingModal #onboardingTitle { font-size: 24px; }
  body:not(#vs):not(#vs-account) #onboardingModal .onboarding-actions > button { flex: 1 1 0; }
  body:not(#vs):not(#vs-account) #pageHelpModal .page-help-dialog { padding: 24px 20px; }
  body:not(#vs):not(#vs-account) #settingsModal .settings-pane :is(.settings-row, .settings-fold-actions, .shopify-actions) > :is(.cta, .result-action, .settings-reset) { flex: 1 1 100%; }
}

/* ---------- Verbeterronde (sessie coaching-account-ronde) ---------- */
/* Inloggen: de labels zijn echte <label for> geworden; klikken op "E-mail" zet de cursor in het veld. */
body:not(#vs):not(#vs-account) #authScreen .auth-card label.label { display: block; cursor: pointer; }
body:not(#vs):not(#vs-account) #settingsModal #settingsResetBtn[hidden] { display: none; }