/* Videostijl pakket 1: de gedeelde onderdelen van Ecom AI Office.
   Kaart, tabel, tabbladen, invoerveld, badge, lege staat, laden, venster en knoppen.
   Eén versie van elk onderdeel; de bestaande klassen sluiten hierop aan. Oude css blijft staan, dit ligt erbovenop.
   Rust bij werken: geen gloed en geen animatie op deze onderdelen. Alleen de tokens van de videostijl.

   Geladen ná nieuwe-stijl.css en videostijl.css, vóór de pakket-css (vs-coaching, vs-product, vs-winkel, vs-account).
   Winnen zonder !important: elke regel begint met
     body:not(#vs):not(#vs-shared)  → telt als twee id's, zwaarder dan oude regels als "#calcCenter #wcPage .wc-panel".
   Werkonderdelen slaan de pagina's met een eigen, goedgekeurde stijl over (Productscan, Mijn scans, Roadmap, Advertentie maken):
     :not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"])
   Vensters gelden overal, ook boven die pagina's. */

:root {
  --vs-navy: #0a0d1a;
  --vs-card: rgba(14, 18, 38, 0.9);
  --vs-hero: #10142a;
  --vs-glass: rgba(255, 255, 255, 0.03);
  --vs-modal: #0e1226;
  --vs-edge: rgba(91, 139, 255, 0.25);
  --vs-edge-hero: rgba(91, 139, 255, 0.35);
  --vs-hair: rgba(255, 255, 255, 0.08);
  --vs-row: rgba(255, 255, 255, 0.06);
  --vs-head-bg: rgba(10, 13, 26, 0.35);
  --vs-field: rgba(10, 13, 26, 0.6);
  --vs-field-edge: rgba(255, 255, 255, 0.14);
  --vs-accent: #5b8bff;
  --vs-accent-hover: #4a7af0;
  --vs-ok: #7ee0b5;
  --vs-warn: #ffc46b;
  --vs-bad: #ff8f9c;
  --vs-text: #eef1f8;
  --vs-copy: #c7cce0;
  --vs-muted: #8790b5;
  --vs-info-text: #c3d2ff;
  --vs-skel: rgba(255, 255, 255, 0.07);
  --vs-ghost-line: rgba(255, 255, 255, 0.14);
}
html[data-theme="light"] {
  --vs-card: #ffffff;
  --vs-hero: #f3f6ff;
  --vs-glass: #ffffff;
  --vs-modal: #ffffff;
  --vs-edge: rgba(63, 111, 232, 0.28);
  --vs-edge-hero: rgba(63, 111, 232, 0.4);
  --vs-hair: #dde2ea;
  --vs-row: #e6eaf2;
  --vs-head-bg: #f6f7f9;
  --vs-field: #ffffff;
  --vs-field-edge: #c9d1e3;
  --vs-accent: #3f6fe8;
  --vs-accent-hover: #335fd0;
  --vs-ok: #11795a;
  --vs-warn: #8a5a00;
  --vs-bad: #b4233a;
  --vs-text: #171a21;
  --vs-copy: #3b4256;
  --vs-muted: #5d6678;
  --vs-info-text: #2a55c9;
  --vs-skel: rgba(15, 23, 42, 0.08);
  --vs-ghost-line: rgba(15, 23, 42, 0.16);
}

/* ---------- Kaart: gewoon, uitslag (hero) en glas ---------- */
/* Gewoon: de werkpanelen. 20px hoek, dunne blauwe rand. */
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-card, .wc-panel:not(.wc-day-result), .pd-panel:not(.pd-sheet), #coachingPage .coach-panel) {
  border: 1px solid var(--vs-edge); border-radius: 20px; background: var(--vs-card); box-shadow: none;
}
/* Uitslag: een uitkomst of de volgende stap. Iets lichter, rand iets sterker. Geen gloed. */
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-hero, .wc-panel.wc-day-result, #productDetailCenter .pk-next, #coachingPage .coach-next) {
  border: 1px solid var(--vs-edge-hero); border-radius: 18px; background: var(--vs-hero); box-shadow: none;
}
/* Een kaart is nooit breder dan de ruimte die hij krijgt (telefoon). */
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-card, .vs-hero, .vs-glass, .wc-panel, .pd-panel, .pt-panel, #coachingPage .coach-panel) { min-width: 0; max-width: 100%; box-sizing: border-box; }
/* Glas: lijsten, tabellen en kleine tegels. */
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-glass, .pd-panel.pd-sheet, .pt-panel, #productDetailCenter .pk-tile, .pd-price-card, .pd-link-card, #coachingPage .coach-stat, #productsCenter .pd-overview-list) {
  border: 1px solid var(--vs-hair); border-radius: 16px; background: var(--vs-glass); box-shadow: none;
}

/* ---------- Tabel ---------- */
/* Kopregel in mono, rustige rijlijn, cijfers in mono. Geldt voor echte tabellen en voor de rasterlijst van Producten. */
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-table, .pd-table, .wc-table, .pp-table, .pt-table, .users-table, .coach-table, .concept-table) {
  width: 100%; border-collapse: collapse; font-size: 14px; color: var(--vs-text);
}
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-table, .pd-table, .wc-table, .pp-table, .pt-table, .users-table, .coach-table, .concept-table) th,
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) #productsCenter .pd-overview-head {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vs-muted); background: var(--vs-head-bg); border-bottom: 1px solid var(--vs-hair);
}
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-table, .pd-table, .wc-table, .pp-table, .pt-table, .users-table, .coach-table, .concept-table) th { padding: 12px 14px; text-align: left; }
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-table, .pd-table, .wc-table, .pp-table, .pt-table, .users-table, .coach-table, .concept-table) td {
  padding: 12px 14px; border-top: 1px solid var(--vs-row); color: var(--vs-copy); background: none;
}
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-table, .pd-table, .wc-table, .pp-table, .pt-table, .users-table, .coach-table, .concept-table) :is(td.is-num, td.num, td[data-num]),
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) #productsCenter .pd-overview-card .pd-ov-cell:not(.pd-ov-result):not(.pd-ov-testing) {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums;
}
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) #productsCenter .pd-overview-card { border-top: 1px solid var(--vs-row); }
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) #productsCenter .pd-overview-head + .pd-overview-card { border-top: 0; }
/* Rij aanwijzen: alleen een kleur, geen beweging. */
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-table tbody tr, .pd-table tbody tr, #productsCenter .pd-overview-card):hover { background: rgba(91, 139, 255, 0.05); }
/* Brede tabellen schuiven binnen hun eigen kader, nooit de hele pagina. */
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-table-wrap, .pd-table-wrap) { max-width: 100%; overflow-x: auto; }

/* ---------- Tabbladenbalk ---------- */
/* Horizontaal: tekst met een blauwe lijn eronder als hij aan staat, zoals in de Productscan. */
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-tabs, .wc-tabs, .pd-tabs, .dash-tabs, .pt-chips) {
  display: flex; gap: 28px; max-width: 100%; padding: 0; overflow-x: auto; scrollbar-width: none; border: 0; border-bottom: 1px solid var(--vs-hair); border-radius: 0; background: none; box-shadow: none;
}
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) .pt-chips { border-bottom: 0; }
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-tabs, .wc-tabs, .pd-tabs, .dash-tabs, .pt-chips)::-webkit-scrollbar { display: none; }
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-tab, .wc-tabs .wc-tab, .pd-tabs .pd-tab, .dash-tabs .dash-tab, .pt-chips button) {
  flex: 0 0 auto; height: auto; min-height: 44px; margin: 0 0 -1px; padding: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; box-shadow: none; color: var(--vs-muted); font: 500 14px "IBM Plex Sans", sans-serif; white-space: nowrap; cursor: pointer;
}
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-tab, .wc-tabs .wc-tab, .pd-tabs .pd-tab, .dash-tabs .dash-tab, .pt-chips button):hover { background: none; color: var(--vs-text); }
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-tab, .wc-tabs .wc-tab, .pd-tabs .pd-tab, .dash-tabs .dash-tab, .pt-chips button):is(.is-on, [aria-selected="true"], [aria-pressed="true"]) {
  border-bottom-color: var(--vs-accent); background: none; color: var(--vs-text); font-weight: 600;
}
/* Verticaal (Instellingen): rustige rij, de gekozen rij licht blauw. */
body:not(#vs):not(#vs-shared) :is(.vs-tab-v, #settingsModal .settings-nav-item) { border: 1px solid transparent; border-radius: 12px; background: transparent; box-shadow: none; color: var(--vs-text); }
body:not(#vs):not(#vs-shared) :is(.vs-tab-v, #settingsModal .settings-nav-item):hover { border-color: transparent; background: var(--vs-glass); }
body:not(#vs):not(#vs-shared) :is(.vs-tab-v, #settingsModal .settings-nav-item):is(.is-on, [aria-current="page"]) { border-color: rgba(91, 139, 255, 0.28); background: rgba(91, 139, 255, 0.1); }

/* ---------- Invoerveld, keuzelijst en zoekveld ---------- */
/* Overal dezelfde rand, kleur en blauwe focusrand. Het chatvak van de AI Coach heeft al een eigen kader. */
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(main, .office-modal-card, dialog) :is(input:not([type]), input[type="text"], input[type="email"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], input[type="password"], input[type="tel"], select, textarea:not(#aiCoachInput)),
body:not(#vs):not(#vs-shared) :is(.vs-input, #settingsModal .settings-form input, #settingsModal .settings-form select, #settingsModal .settings-pane select) {
  box-sizing: border-box; border: 1px solid var(--vs-field-edge); border-radius: 12px; background-color: var(--vs-field); box-shadow: none; color: var(--vs-text); font-family: "IBM Plex Sans", sans-serif;
}
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(main, .office-modal-card, dialog) :is(input, select, textarea:not(#aiCoachInput))::placeholder,
body:not(#vs):not(#vs-shared) .vs-input::placeholder { color: var(--vs-muted); opacity: 1; }
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(main, .office-modal-card, dialog) :is(input:not([type]), input[type="text"], input[type="email"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], input[type="password"], input[type="tel"], select, textarea:not(#aiCoachInput)):focus,
body:not(#vs):not(#vs-shared) :is(.vs-input, #settingsModal .settings-form input, #settingsModal .settings-form select, #settingsModal .settings-pane select):focus {
  border-color: var(--vs-accent); outline: 2px solid rgba(91, 139, 255, 0.35); outline-offset: 0;
}
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(main, .office-modal-card, dialog) :is(input, select, textarea:not(#aiCoachInput)):disabled { opacity: 0.6; }
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(main, .office-modal-card, dialog) input[readonly] { color: var(--vs-muted); }
/* Een veld en zijn label passen altijd in hun kaart (telefoon). */
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-input, .wc-field, .wc-field input, .wc-field select, .pd-field, .pd-field input, .pt-search) { min-width: 0; max-width: 100%; }
/* De echte formuliervelden: 48px hoog. Kleine velden in tabellen en kaarten houden hun eigen hoogte. */
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-input, .wc-field input, .wc-field select, .pd-field input, .pd-field select, .pt-search, #productsCenter .pd-toolbar input, #productsCenter .pd-toolbar select),
body:not(#vs):not(#vs-shared) :is(#settingsModal .settings-form input, #settingsModal .settings-form select) {
  min-height: 48px; padding: 0 14px; font-size: 15px;
}
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(main, .office-modal-card, dialog) textarea:not(#aiCoachInput) { padding: 12px 14px; font-size: 15px; line-height: 1.5; }
/* Eén label-stijl boven een veld. */
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-label, .wc-field > span:first-child, .pd-field > span:first-child),
body:not(#vs):not(#vs-shared) :is(#settingsModal .settings-form .settings-label, #settingsModal .settings-label) {
  font-family: "IBM Plex Sans", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--vs-copy);
}

/* ---------- Badge of pil: ok, let op, fout, neutraal (en blauw voor info) ---------- */
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-badge, .pk-pill, .pd-pill, .pt-pill, .ework-pill, .cs-tag, .users-badge, .pd-ov-testing .pd-status, #coachingPage .pd-status) {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--vs-hair); border-radius: 999px; background: rgba(255, 255, 255, 0.05); box-shadow: none; color: var(--vs-copy); font: 600 12px/1.4 "IBM Plex Sans", sans-serif; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-badge.is-info, .pk-pill.is-blue, .pd-ov-testing .pd-status.is-even, .users-badge-uitgenodigd) {
  border-color: rgba(91, 139, 255, 0.3); background: rgba(91, 139, 255, 0.14); color: var(--vs-info-text);
}
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-badge.is-ok, .pk-pill.is-profit, .pd-pill.is-profit, .ework-pill.is-voldoet, .users-badge-actief) {
  border-color: rgba(126, 224, 181, 0.3); background: rgba(126, 224, 181, 0.12); color: var(--vs-ok);
}
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-badge.is-warn, .pk-pill.is-even, .pd-pill.is-even, .ework-pill.is-voldoende, .users-badge-gepauzeerd) {
  border-color: rgba(255, 196, 107, 0.3); background: rgba(255, 196, 107, 0.12); color: var(--vs-warn);
}
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-badge.is-bad, .pk-pill.is-loss, .pd-pill.is-loss, .users-badge-geblokkeerd) {
  border-color: rgba(255, 143, 156, 0.3); background: rgba(255, 143, 156, 0.12); color: var(--vs-bad);
}
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-badge.is-muted, .pk-pill.is-muted, .users-badge-verlopen, .pd-ov-testing .pd-status.is-stopped) {
  border-color: var(--vs-hair); background: rgba(255, 255, 255, 0.05); color: var(--vs-copy);
}

/* ---------- Lege staat: "Nog geen …" ---------- */
/* Gecentreerd, kleine kop, één regel uitleg en hooguit één knop. */
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-empty, .pt-empty, .pd-empty-hero) {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 24px; border: 0; background: none; box-shadow: none; text-align: center;
}
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-empty, .pt-empty, .pd-empty-hero) :is(h2, h3, h4, strong):first-of-type {
  margin: 0; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: var(--vs-text);
}
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-empty, .pt-empty, .pd-empty-hero) p { max-width: 46ch; margin: 0; font-size: 14px; line-height: 1.6; color: var(--vs-muted); }
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-empty, .pt-empty, .pd-empty-hero) :is(button, a.cta) { margin-top: 8px; }
/* Een losse regel "Nog geen …" in een kaart: rustig en in het midden. */
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-empty-line, #coachingPage .coach-empty, .pd-perf-empty) {
  margin: 0; padding: 20px 16px; font-size: 14px; line-height: 1.6; color: var(--vs-muted); text-align: center;
}

/* ---------- Laden (skeleton) ---------- */
/* Stilstaande grijze blokjes. Geen pulseren: rust bij werken. Een echt wacht-moment heeft een eigen checklijst. */
body:not(#vs):not(#vs-shared) :is(.vs-skel, .of-skel) { border-radius: 8px; background: var(--vs-skel); animation: none; }
body:not(#vs):not(#vs-shared) :is(.of-skel-row, .of-skel-card) { border: 1px solid var(--vs-hair); border-radius: 16px; background: var(--vs-glass); }

/* ---------- Gedeeld venster ---------- */
/* Donkere, wazige achtergrond; kaart in de videostijl; kop in Sora, nooit groter dan 34px. Geen gloed: een venster is werk. */
body:not(#vs):not(#vs-shared) .office-modal { background: rgba(6, 8, 18, 0.72); backdrop-filter: blur(6px); }
body:not(#vs):not(#vs-shared) :is(.vs-modal, .office-modal-card, dialog:not(.am-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); color: var(--vs-text);
}
body:not(#vs):not(#vs-shared) dialog:not(.am-dialog)::backdrop { background: rgba(6, 8, 18, 0.72); backdrop-filter: blur(6px); }
body:not(#vs):not(#vs-shared) :is(.vs-modal-title, .office-modal-card > h2, .office-modal-card > h3, .office-modal-card .pd-testday-head h3, .office-modal-card .eval-modal-head h3, dialog:not(.am-dialog) > h2, dialog:not(.am-dialog) .pt-dialog-head > h2) {
  font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: var(--vs-text);
}
body:not(#vs):not(#vs-shared) .office-modal-card .settings-close { border-radius: 12px; border-color: var(--vs-ghost-line); }

/* ---------- Knoppen ---------- */
/* Eén primaire knop (blauw, 12px hoek) en één lichte knop (dunne rand), zonder !important.
   Overgenomen uit nieuwe-stijl.css (sessie videostijl-koppen); die regels met !important zijn daar weggehaald. */
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.cta:not(.cta-secondary):not(.cta-danger), .result-action.is-primary, .sq-primary, .pt-primary, .cs-primary, #productDetailCenter .pd-btn:not(.pd-btn-secondary):not(.pd-btn-danger), #calcCenter #wcPage .wc-fetch-btn) {
  border: 0; border-radius: 12px; background: var(--vs-accent); color: #ffffff; font-weight: 600; box-shadow: 0 8px 24px rgba(91, 139, 255, 0.25);
}
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.cta:not(.cta-secondary):not(.cta-danger), .result-action.is-primary, .sq-primary, .pt-primary, .cs-primary, #productDetailCenter .pd-btn:not(.pd-btn-secondary):not(.pd-btn-danger), #calcCenter #wcPage .wc-fetch-btn):hover:not(:disabled) { background: var(--vs-accent-hover); }
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.cta, .result-action.is-primary, .sq-primary, .pt-primary, .cs-primary):disabled { opacity: 0.55; box-shadow: none; }
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.result-action:not(.is-primary):not(.is-danger), .settings-reset, .pd-ghost:not(.pd-danger), .sq-secondary, .pd-btn-secondary, #productsCenter .pd-toolbar .pd-text-btn, .dash-roadmap-card .cta, .dash-goal-card .cta, #parcelOffice .pt :is(#ptShare, #ptMore, #ptRegister, #ptSettings, [data-pt-close]), #customerServiceOffice .cs #csAgain, #calcCenter #wcPage :is(#wcMetaCsvUpload, .wc-profit-actions .wc-fetch-btn, .wc-text-btn, .wc-add)) {
  border: 1px solid var(--vs-ghost-line); border-radius: 12px; background: transparent; color: var(--vs-copy); box-shadow: none;
}
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.result-action:not(.is-primary):not(.is-danger), .settings-reset, .pd-ghost:not(.pd-danger), .sq-secondary, .pd-btn-secondary, #productsCenter .pd-toolbar .pd-text-btn, .dash-roadmap-card .cta, .dash-goal-card .cta, #parcelOffice .pt :is(#ptShare, #ptMore, #ptRegister, #ptSettings, [data-pt-close]), #customerServiceOffice .cs #csAgain, #calcCenter #wcPage :is(#wcMetaCsvUpload, .wc-profit-actions .wc-fetch-btn, .wc-text-btn, .wc-add)):hover:not(:disabled) { border-color: rgba(91, 139, 255, 0.4); color: var(--vs-text); }
body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) .result-action:not(.is-primary):is(.is-on, [aria-pressed="true"]) { border-color: rgba(91, 139, 255, 0.45); background: rgba(91, 139, 255, 0.14); color: var(--vs-text); }
body:not(#vs):not(#vs-shared) #settingsModal .settings-reset { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; font-size: 14px; font-weight: 500; }
/* Toetsenbord: een duidelijke witte rand op elke knop, tab en veld. */
body:not(#vs):not(#vs-shared) :is(.vs-btn, .vs-ghost, .vs-tab, .vs-tab-v, .cta, .result-action, .pd-tab, .wc-tab, .dash-tab, .pt-chips button, .settings-nav-item):focus-visible { outline: 2px solid var(--vs-text); outline-offset: 2px; }

/* ---------- Telefoon ---------- */
@media (max-width: 560px) {
  body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-tabs, .wc-tabs, .pd-tabs, .dash-tabs, .pt-chips) { gap: 20px; }
  body:not(#vs):not(#vs-shared):not([data-agent="beoordelaar"], [data-agent="geschiedenis"], [data-agent="roadmap"], [data-agent="ad-maker"]) :is(.vs-empty, .pt-empty, .pd-empty-hero) { padding: 32px 16px; }
  body:not(#vs):not(#vs-shared) :is(.vs-modal-title, .office-modal-card > h2, .office-modal-card > h3, .office-modal-card .pd-testday-head h3, .office-modal-card .eval-modal-head h3, dialog:not(.am-dialog) > h2, dialog:not(.am-dialog) .pt-dialog-head > h2) { font-size: 22px; }
}