/* ============================================================================
 * KAI THEME — Keynius AI
 * ----------------------------------------------------------------------------
 * Laatste stijl-laag voor lockerwall-app. Vervangt de drie gestapelde lagen
 * die nu onderin styles.css staan:
 *
 *   1. "Keynius.eu Webflow style layer"  (~regel 9474)
 *   2. de correcties-laag daarna         (~regel 9900)
 *   3. "KEYNIUS — Dewy restyle"          (~regel 13450)
 *
 * Aanpak: laat die drie lagen voorlopig staan en plak dit bestand ER ACHTER
 * (of link het na styles.css). Alles hieronder is geschreven om die lagen te
 * verslaan — vandaar de !important op skin-properties. Zodra dit draait kun je
 * laag 1-3 in één keer verwijderen; deze laag is zelfdragend.
 *
 * Class-namen zijn 1:1 die van de bestaande app. Geen HTML-wijzigingen nodig
 * behalve kai-shell.js (topbar + ⌘K) en de logo-swap in side-menu.js.
 * ========================================================================== */

:root {
  /* ── Merk ───────────────────────────────────────────────────────────── */
  --kai-blue:            #0044ce;   /* Atlas Blue — primaire actie */
  --kai-blue-hover:      #0437a0;
  --kai-blue-soft:       #eef2fd;
  --kai-blue-border:     #cddcf6;
  --kai-green:           #09896d;   /* Eco Green — ALLES wat KAI is */
  --kai-green-hover:     #076d57;
  --kai-green-soft:      #e6f3ef;
  --kai-green-border:    #b7e0d4;
  --kai-green-light:     #19c29d;   /* op donkere vlakken */

  /* ── Neutralen ──────────────────────────────────────────────────────── */
  --kai-ink:             #101418;
  --kai-ink-2:           #5b6472;
  --kai-ink-3:           #8a92a0;
  --kai-bg:              #f6f7fa;
  --kai-rail:            #fbfcfe;
  --kai-surface:         #ffffff;
  --kai-line:            #e6eaf1;
  --kai-line-strong:     #d7dde7;
  --kai-hover:           #f1f3f7;

  /* ── Status: gevaar + waarschuwing ──────────────────────────────────────
   * Deze waarden zaten al ONBENOEMD in dit bestand (.ghost-button.danger:
   * #b91c1c op #f0cfce). Nu als token, zodat elke pagina dezelfde rode/amber
   * taal spreekt i.p.v. per module een eigen hex te kiezen. */
  /* Inkt op een BLAUW GEVULD vlak (knoppen, actieve pillen). In light is dat
     wit; in dark wordt --kai-blue juist lichter (#5a8dff) en haalt wit daar nog
     maar 3,1 — dus daar donkere inkt. Als token, zodat elke regel die
     `background: var(--kai-blue)` zet er meteen de juiste tekstkleur bij pakt
     en er geen aparte selectorlijst per element nodig is. */
  --kai-on-blue:         #ffffff;
  /* Twee modulebestanden schrijven `var(--kai-muted, #667085)`, maar dat token
     bestond niet — ze vielen dus ALTIJD terug op die lichte grijstint, ook in
     dark mode (contrast 3,5). Light houdt exact dezelfde waarde. */
  --kai-muted:           #667085;
  --kai-danger:          #b91c1c;
  --kai-danger-soft:     #fdecec;
  --kai-danger-border:   #f0cfce;
  --kai-warn:            #b45309;
  --kai-warn-strong:     #7a4e00;
  --kai-warn-soft:       #fef6e7;
  --kai-warn-border:     #f0c989;
  /* Succes-inkt is bewust DONKERDER dan het merkgroen (--kai-green #09896d).
     Dat merkgroen haalde op het zachte succesvlak maar 3,83 en op wit 4,37 —
     allebei onder de AA-grens van 4,5, terwijl dit token juist de "gelukt"-
     tekst en -randen draagt. Nu 5,10 op het zachte vlak en 5,81 op wit. Het
     wordt nergens als VULLING gebruikt (alleen color en border-left), dus er
     is geen vlak dat hierdoor donkerder wordt. In dark mode blijft het token
     ongewijzigd licht (#19c29d). */
  --kai-ok:              #07735c;
  --kai-ok-soft:         #e6f3ef;

  /* ── Vorm ───────────────────────────────────────────────────────────── */
  --kai-r-panel:         12px;
  --kai-r-control:       8px;
  --kai-r-small:         6px;
  --kai-r-pill:          999px;
  --kai-shadow:          0 1px 2px rgba(16, 20, 24, 0.04);
  --kai-shadow-lift:     0 8px 24px -12px rgba(16, 20, 24, 0.22);
  --kai-focus:           0 0 0 3px rgba(0, 68, 206, 0.14);

  /* ── Maat ───────────────────────────────────────────────────────────── */
  --kai-rail-w:          248px;
  --kai-rail-w-collapsed: 64px;
  --kai-topbar-h:        56px;
  --kai-control-h:       34px;
  --kai-row-h:           42px;

  /* Bestaande tokens overschrijven zodat oude regels meebewegen ─────────── */
  --ui-scale: 1;
  --panel-border: var(--kai-line);
  --panel-border-strong: var(--kai-line-strong);
  --panel-radius: var(--kai-r-panel);
  --card-radius: var(--kai-r-panel);
  --control-radius: var(--kai-r-control);
  --text: var(--kai-ink);
  --muted: var(--kai-ink-2);
  --focus-ring: var(--kai-focus);
  --shell-max-width: 1240px;
}

/* ── Typografische schaal ──────────────────────────────────────────────────
 * DE belangrijkste ingreep. Nu botst 12,8px pagina-tekst (root 16 × ui-scale
 * 0.8) met hardgecodeerde 16px sidebar-items. Eén root, één schaal.
 * ------------------------------------------------------------------------ */
/* De achtergrond MOET ook op <html> staan, niet alleen op <body>.
   styles.css zet `html, body { background: var(--bg) }` — en zodra <html>
   een eigen achtergrond heeft, propageert die van <body> niet meer naar het
   paginacanvas. In dark mode kleurde <body> dus wél donker, maar bleef het
   canvas eronder de LICHTE --bg houden: onder de content sloeg de pagina
   spierwit uit (en onder de rail ook). Beide op --kai-bg zetten lost dat op
   ongeacht hoe hoog de content is. */
html {
  font-size: 14px;
  background: var(--kai-bg) !important;
}

body {
  background: var(--kai-bg) !important;
  color: var(--kai-ink);
  font: 400 13px/1.55 "Aeonik", Arial, sans-serif;
}

h1, h2, h3 { letter-spacing: -0.015em; }
.hero h1, .page-title { font: 600 20px/1.2 "Aeonik", Arial, sans-serif !important; }
.section-heading h2   { font: 600 14px/1.2 "Aeonik", Arial, sans-serif !important; }
.hero-copy, .helper-text, .messages {
  font: 400 12.5px/1.5 "Aeonik", Arial, sans-serif !important;
  color: var(--kai-ink-2) !important;
}
.eyebrow, .app-card-eyebrow, .side-menu-section-label, .metric-label {
  font: 600 10px/1 "Aeonik", Arial, sans-serif !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kai-ink-3) !important;
}

/* ══ SHELL ═════════════════════════════════════════════════════════════════ */

body:has(.side-menu) .editor-frame { padding-left: var(--kai-rail-w); }
body:has(.side-menu.side-menu-collapsed) .editor-frame { padding-left: var(--kai-rail-w-collapsed); }

/* Ingebed in een tabblad (?embed=1 → body[data-embed="1"], gezet door
   side-menu.js; Admin → Packages). De rail is al verborgen (styles.css), dus
   ook geen rail-inspringing, geen hero/subpagina-navigatie en geen
   topbar-marge — de omliggende pagina levert die. Staat ná de rail-regels
   zodat hij bij gelijke specificiteit wint. */
body[data-embed="1"]:has(.side-menu) .editor-frame,
body[data-embed="1"] .editor-frame { padding-left: 0; }
body[data-embed="1"] .hero,
body[data-embed="1"] .subpage-nav,
body[data-embed="1"] .kai-topbar { display: none !important; }
body[data-embed="1"] .page-shell,
body[data-embed="1"] .editor-page-shell { width: 100%; margin: 0 auto !important; padding: 12px 16px 20px; }

.page-shell,
.editor-page-shell {
  width: min(100%, var(--shell-max-width));
  margin: 20px auto 32px !important;
  padding: 0 24px;
}

/* De brand-row in de pagina blijft verborgen — het logo staat in de rail. */
.editor-frame .brand-row { display: none !important; }

/* ── Rail: van zwart 280px naar licht 248px ───────────────────────────────── */
.side-menu {
  width: var(--kai-rail-w) !important;
  padding: 0 !important;
  background: var(--kai-rail) !important;
  border: 0 !important;
  border-right: 1px solid var(--kai-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--kai-ink) !important;
}
.side-menu-collapsed { width: var(--kai-rail-w-collapsed) !important; }

.side-menu-brand {
  height: var(--kai-topbar-h);
  padding: 0 16px !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--kai-line) !important;
}
/* Het KAI-logo = mark (svg) + "AI" in Aeonik. De AI staat als tekst in de DOM
   zodat hij scherp meeschaalt en de webfont gebruikt (een <img> svg kan de
   @font-face niet laden). Zie kai-shell.js. */
.side-menu-brand img { height: 21px !important; width: auto; display: block; }
.side-menu-brand .kai-brand-word {
  font: 500 25px/1 "Aeonik", Arial, sans-serif;
  letter-spacing: -0.05em;
  color: #232323;
  transform: translateY(-1px);
}
.side-menu-collapsed .side-menu-brand { justify-content: center; padding: 0 !important; }
.side-menu-collapsed .side-menu-brand .kai-brand-word { display: none; }

/* Hamburger + "MENU"-label: overbodig naast de topbar-collapse. */
.side-menu-toggle { display: none !important; }
.side-menu-collapsed .side-menu-toggle { display: none !important; }

.side-menu-nav {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px;
  gap: 0 !important;
  overflow: hidden;
}
.side-menu-main { gap: 3px !important; overflow-y: auto; }

/* App-switcher (het "All apps"-blok) wordt één rustige knop. */
.side-menu-apps,
.side-menu-admin-menu {
  border: 0 !important;
  margin-bottom: 8px;
}
.side-menu-apps-header,
.side-menu-admin-header {
  grid-template-columns: minmax(0, 1fr) 32px !important;
  gap: 6px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: 0 !important;
}
.side-menu-apps-toggle,
.side-menu-admin-toggle {
  width: 32px !important;
  min-height: 38px !important;
  border: 1px solid var(--kai-line) !important;
  border-radius: var(--kai-r-control) !important;
  background: var(--kai-surface) !important;
  color: var(--kai-ink-3) !important;
  font-size: 15px !important;
}
.side-menu-apps-list,
.side-menu-admin-list { padding: 8px 0 4px !important; gap: 2px !important; }

/* Alle nav-items: één maat, één gewicht, geen uppercase. */
.side-menu-item,
.side-menu-item.button-link,
.side-menu-app-link,
.side-menu-app-link.button-link,
.side-menu-nested-link,
.side-menu-subitem,
.side-menu-subitem.button-link {
  min-height: 32px !important;
  height: 32px;
  padding: 0 10px !important;
  gap: 9px !important;
  border: 0 !important;
  border-radius: var(--kai-r-control) !important;
  background: transparent !important;
  color: var(--kai-ink-2) !important;
  font: 500 12.5px/1 "Aeonik", Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
/* De 6×6 blokjes voor de sub-items verdwijnen — de inspringing doet het werk. */
.side-menu-app-link::before,
.side-menu-nested-link::before,
.side-menu-subitem::before { display: none !important; }
.side-menu-subnav {
  margin: 0 !important;
  padding: 0 !important;
  gap: 2px !important;
  background: transparent !important;
  border: 0 !important;
}

/* De `.button-link`-varianten MOETEN erbij staan. De generieke knop-hover
   verderop bevat `.button-link:hover` — even specifiek (0,2,0) als
   `.side-menu-subitem:hover`, maar later in de cascade, dus die won: een
   rail-item werd bij hover donkerblauw (--kai-blue-hover) terwijl de tekst
   grijs bleef → donkergrijs op donkerblauw, onleesbaar (Wesley 26-07). Met de
   compound-selector zit de rail op 0,3,0 en wint hij ongeacht de volgorde. */
.side-menu-item:hover,
.side-menu-item.button-link:hover,
.side-menu-app-link:hover,
.side-menu-app-link.button-link:hover,
.side-menu-nested-link:hover,
.side-menu-nested-link.button-link:hover,
.side-menu-subitem:hover,
.side-menu-subitem.button-link:hover {
  background: var(--kai-hover) !important;
  color: var(--kai-ink) !important;
}

.side-menu-item-active,
.side-menu-item-active.button-link,
.side-menu-subitem-active,
.side-menu-subitem-active.button-link,
.side-menu-app-link-active,
.side-menu-app-link-active.button-link,
.side-menu-nested-link-active,
.side-menu-nested-link-active.button-link {
  background: var(--kai-blue-soft) !important;
  border: 0 !important;
  border-radius: var(--kai-r-control) !important;
  color: var(--kai-blue) !important;
  font-weight: 600 !important;
}
.side-menu .side-menu-item-active:hover,
.side-menu .side-menu-item-active.button-link:hover,
.side-menu .side-menu-subitem-active:hover,
.side-menu .side-menu-subitem-active.button-link:hover,
.side-menu .side-menu-app-link-active:hover,
.side-menu .side-menu-app-link-active.button-link:hover,
.side-menu .side-menu-nested-link-active:hover,
.side-menu .side-menu-nested-link-active.button-link:hover {
  background: var(--kai-blue-border) !important;
  color: var(--kai-blue) !important;
}

.side-menu-current-app-header,
.side-menu-accordion-title,
.side-menu-section-label {
  padding: 16px 8px 6px !important;
  color: var(--kai-ink-3) !important;
  font: 600 10px/1 "Aeonik", Arial, sans-serif !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Rail-footer: gebruiker + uitloggen. Taalkiezer verhuist naar de topbar. */
.side-menu-footer {
  margin-top: auto;
  padding: 10px 12px !important;
  border-top: 1px solid var(--kai-line) !important;
}
.side-menu-user {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.side-menu-user-name { color: var(--kai-ink) !important; font: 600 12px/1.3 "Aeonik", Arial, sans-serif; }
.side-menu-user-role { color: var(--kai-ink-3) !important; font: 400 11px/1.3 "Aeonik", Arial, sans-serif; }
.side-menu-logout {
  min-height: 30px !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--kai-ink-3) !important;
  font: 500 11.5px/1 "Aeonik", Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.side-menu-logout:hover { color: var(--kai-ink) !important; background: transparent !important; }
.side-menu-language { display: none; }

/* ══ TOPBAR (geïnjecteerd door kai-shell.js) ══════════════════════════════ */

.kai-topbar {
  position: fixed;
  top: 0;
  left: var(--kai-rail-w);
  right: 0;
  height: var(--kai-topbar-h);
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  background: var(--kai-surface);
  border-bottom: 1px solid var(--kai-line);
  transition: left 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
body:has(.side-menu.side-menu-collapsed) .kai-topbar { left: var(--kai-rail-w-collapsed); }
body:has(.kai-topbar) .page-shell,
body:has(.kai-topbar) .editor-page-shell { margin-top: calc(var(--kai-topbar-h) + 20px) !important; }

.kai-crumbs { display: flex; align-items: center; gap: 8px; font: 500 12px/1 "Aeonik", Arial, sans-serif; color: var(--kai-ink-3); }
.kai-crumbs a { color: inherit; text-decoration: none; }
.kai-crumbs a:hover { color: var(--kai-ink); }
.kai-crumbs [aria-current] { color: var(--kai-ink); font-weight: 600; }
/* Een lijnkleur als tekstglyph: #c9d0da haalde op wit 1,55 — het schuine
   streepje in het kruimelpad was op elke pagina nauwelijks te zien. */
.kai-crumb-sep { color: var(--kai-ink-3); }

.kai-topbar-actions { display: flex; align-items: center; gap: 10px; }

.kai-search {
  width: 240px;
  height: var(--kai-control-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--kai-line);
  border-radius: var(--kai-r-control);
  background: var(--kai-bg);
  color: var(--kai-ink-3);
  font: 400 12.5px "Aeonik", Arial, sans-serif;
  cursor: text;
}
.kai-search:hover { border-color: var(--kai-line-strong); }

/* ── De KAI-affordance. Groen = KAI, overal, altijd. ─────────────────────── */
/* !important is hier nodig: de generieke knop-regel verderop draagt zelf
   !important en zou deze knop massief blauw maken — precies wat er gebeurde.
   De KAI-affordance moet juist groen zijn, op elke pagina en in beide
   thema's; anders is niet te zien welke knop KAI is. */
.kai-ask {
  height: var(--kai-control-h);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px !important;
  border: 1px solid var(--kai-green-border) !important;
  border-radius: var(--kai-r-control) !important;
  background: var(--kai-green-soft) !important;
  color: var(--kai-green-hover) !important;
  font: 600 12.5px "Aeonik", Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
  cursor: pointer;
}
.kai-ask:hover { background: #d9ede6 !important; border-color: #9ed4c4 !important; }
[data-theme="dark"] .kai-ask:hover { background: rgba(25, 194, 157, 0.22) !important; }
.kai-kbd {
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(7, 109, 87, 0.12);
}

/* De ring uit het logo, als levende status-indicator. */
.kai-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex: 0 0 auto; }
.kai-ring::before,
.kai-ring::after {
  content: "";
  position: absolute;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--kai-green);
}
.kai-ring::after { animation: kai-pulse 2.4s ease-out infinite; }
.kai-ring--idle::after { animation: none; opacity: 0; }
@keyframes kai-pulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  70%  { transform: scale(2.3); opacity: 0; }
  100% { transform: scale(2.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .kai-ring::after { animation: none; opacity: 0; } }

/* ── AI-blokken in de pagina (samenvattingen, suggesties, antwoorden) ────── */
.kai-note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--kai-surface);
  border: 1px solid var(--kai-line);
  border-left: 2px solid var(--kai-green);
  border-radius: 0 var(--kai-r-panel) var(--kai-r-panel) 0;
  font: 400 12.5px/1.5 "Aeonik", Arial, sans-serif;
}
.kai-note strong { font-weight: 600; }

/* ══ CONTROLS ══════════════════════════════════════════════════════════════
 * De grootste visuele verschuiving: weg met 48px uppercase slabs met 2px rand.
 *
 * Uitzondering .of-kpi: de KPI-tegels op het Order Flow-dashboard zijn
 * <button>-elementen met een eigen skin in order-flow-dashboard.css (witte
 * kaart, gekleurde accentrand uit de --of-*-statuskleuren). Zonder deze
 * :not() zou de blauwe knop-achtergrond hieronder daar overheen gaan en het
 * grijze label onleesbaar maken (contrast 1.29:1).
 *
 * Uitzondering [class*="ofw-"] / [class*="ofs-"]: de Order Flow-wizard en
 * -workspace hebben een volledige eigen knoppen-set (.ofw-btn met
 * -secondary/-ghost/-danger, .ofw-tab, .ofw-step, .ofw-acc-head, …) die zelf
 * al op de KAI-tokens staat. Zonder uitzondering plat de !important-regel
 * hieronder ELKE variant tot dezelfde blauwe knop.
 *
 * Uitzondering -card / -tile / -list-item: door de hele app zijn KAARTEN als
 * <button> gebouwd (.tpc-palette-card, .qhc-list-item, .qhc-art-card,
 * .app-card, …). Die hebben hun eigen witte-kaart-skin ZONDER !important en
 * verloren dus van de regel hieronder: massieve blauwe blokken met de
 * originele grijze/blauwe binnentekst erop — onleesbaar (Wesley 26-07, Hero-
 * configurator). Een kaart is geen knop; die laten we met rust.
 *
 * De :where()-verpakking houdt de specificiteit op 0, dus dit verandert niets
 * aan de cascade voor alles wat wél gewoon een knop is.
 *
 * UITZONDERING .lk-swatch (Wesley 26-07, testdata-ronde): de kleurstalen
 * in de webshops ZIJN knoppen, maar hun achtergrond IS de getoonde
 * lockerkleur (--sw). Zonder deze uitzondering kleurde !important ze
 * allemaal KAI-blauw en koos je blind een kleur.
 * ------------------------------------------------------------------------ */
button:where(:not(body[data-kai-shell-only] #root button)):where(:not(.of-kpi):not([class*="ofw-"]):not([class*="ofs-"]):not([class*="-card"]):not([class*="-tile"]):not([class*="-list-item"]):not(.lk-swatch):not([class*="-row"]):not([class*="-item"]):not([class*="-chip"]):not([class*="-pill"]):not([class*="-toggle"]):not([class*="-thumb"]):not([class*="-seg"]):not([class*="-tab"]):not([class*="swatch"])),
.button-link:where(:not(body[data-kai-shell-only] #root .button-link)),
.action-button:where(:not(body[data-kai-shell-only] #root .action-button)),
.primary-button:where(:not(body[data-kai-shell-only] #root .primary-button)),
.webshop-add-cart-button:where(:not(body[data-kai-shell-only] #root .webshop-add-cart-button)) {
  min-height: var(--kai-control-h) !important;
  height: auto;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: var(--kai-r-control) !important;
  background: var(--kai-blue) !important;
  color: var(--kai-on-blue) !important;
  box-shadow: none !important;
  font: 600 12.5px "Aeonik", Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
}
button:where(:not(body[data-kai-shell-only] #root button)):hover:where(:not(.of-kpi):not([class*="ofw-"]):not([class*="ofs-"]):not([class*="-card"]):not([class*="-tile"]):not([class*="-list-item"]):not(.lk-swatch):not([class*="-row"]):not([class*="-item"]):not([class*="-chip"]):not([class*="-pill"]):not([class*="-toggle"]):not([class*="-thumb"]):not([class*="-seg"]):not([class*="-tab"]):not([class*="swatch"])):not(:disabled),
.button-link:where(:not(body[data-kai-shell-only] #root .button-link)):hover,
.action-button:where(:not(body[data-kai-shell-only] #root .action-button)):hover:not(:disabled),
.primary-button:where(:not(body[data-kai-shell-only] #root .primary-button)):hover:not(:disabled) {
  background: var(--kai-blue-hover) !important;
  transform: none !important;
}
button:where(:not(body[data-kai-shell-only] #root button)):focus-visible,
.button-link:where(:not(body[data-kai-shell-only] #root .button-link)):focus-visible { outline: none; box-shadow: var(--kai-focus) !important; }
button:disabled { opacity: 0.45; cursor: not-allowed; }

/* De uitgezonderde knoppen (kaarten, tegels, wizard-eigen knoppen) houden hun
   eigen skin — maar ze mogen NIET terugvallen op de UPPERCASE + letterspacing
   uit de oude styles.css-laag. Die laag zette `text-transform: uppercase` op
   elke <button>; zolang de KAI-regel hierboven eroverheen ging viel dat niet
   op, maar een uitgezonderde knop erft 'm weer. Alleen de typografie wordt
   hier rechtgezet — achtergrond, rand en maat blijven van de pagina zelf. */
button:where(:not(body[data-kai-shell-only] #root button)):where(.of-kpi, [class*="ofw-"], [class*="ofs-"], [class*="-card"], [class*="-tile"], [class*="-list-item"], [class*="-row"], [class*="-item"], [class*="-chip"], [class*="-pill"], [class*="-toggle"], [class*="-thumb"], [class*="-seg"], [class*="swatch"], .lk-swatch) {
  /* Typografie moet andere lagen (o.a. de oude UPPERCASE) verslaan → !important. */
  text-transform: none !important;
  letter-spacing: normal !important;
  /* De oude styles.css `button{}` (blauw verloop, 999px pill, blauwe box-shadow,
     min-height 40px, witte tekst) mag NIET terugkomen op een uitgezonderde
     content-knop (rij/tegel/chip/pill/…). Deze neutralisatie staat BEWUST
     zonder !important: ze wint van die eerdere styles.css-regel (zelfde
     specificiteit, later in de cascade) maar verliest van de eigen component-
     CSS (hogere specificiteit). Zo houdt elk component z'n eigen skin, en valt
     een kale content-knop terug op een neutrale, leesbare look i.p.v. KAI-blauw. */
  min-height: 0;
  border-radius: var(--kai-r-control, 8px);
  box-shadow: none;
  background: transparent;
  color: inherit;
}

.ghost-button:where(:not(body[data-kai-shell-only] #root .ghost-button)),
a.button-link.ghost-button:where(:not(body[data-kai-shell-only] #root .ghost-button)),
.action-button--secondary:where(:not(body[data-kai-shell-only] #root .action-button--secondary)),
.secondary-button:where(:not(body[data-kai-shell-only] #root .secondary-button)) {
  background: var(--kai-surface) !important;
  border: 1px solid var(--kai-line-strong) !important;
  color: var(--kai-ink) !important;
}
.ghost-button:where(:not(body[data-kai-shell-only] #root .ghost-button)):hover:not(:disabled),
a.button-link.ghost-button:where(:not(body[data-kai-shell-only] #root .ghost-button)):hover,
.secondary-button:where(:not(body[data-kai-shell-only] #root .secondary-button)):hover:not(:disabled) {
  background: var(--kai-hover) !important;
  border-color: var(--kai-ink-3) !important;
  color: var(--kai-ink) !important;
}
.ghost-button.danger:where(:not(body[data-kai-shell-only] #root .ghost-button)),
.danger-action:where(:not(body[data-kai-shell-only] #root .danger-action)) {
  border-color: #f0cfce !important;
  color: #b91c1c !important;
  background: var(--kai-surface) !important;
}
.ghost-button.small:where(:not(body[data-kai-shell-only] #root .ghost-button)),
.ghost-button--small:where(:not(body[data-kai-shell-only] #root .ghost-button--small)) { min-height: 28px !important; padding: 0 10px !important; font-size: 11.5px !important; }

/* Deze lijst is een OPSOMMING van types, dus elk type dat er niet in staat valt
   terug op de browserstijl: een wit veld met zwarte tekst, midden in een donkere
   pagina. Zo bleven de URL-velden op de instellingenpagina's (Awareness, Support,
   Webshop, Adyen) wit. Daarom staan hier nu ook url/tel/time/month/week en
   datetime-local, plus een <input> zónder type-attribuut — dat is volgens de
   HTML-standaard een tekstveld. Kleur-, selectie- en bestandsknoppen houden
   bewust hun eigen weergave: input[type="color"] TOONT een kleurwaarde.
   De :where(:not(…#root…))-uitsluiting houdt de configurator-app buiten deze
   skin; elke nieuwe regel hieronder draagt 'm daarom mee. */
select:where(:not(body[data-kai-shell-only] #root select)),
textarea:where(:not(body[data-kai-shell-only] #root textarea)),
input[type="text"]:where(:not(body[data-kai-shell-only] #root input)),
input[type="password"]:where(:not(body[data-kai-shell-only] #root input)),
input[type="number"]:where(:not(body[data-kai-shell-only] #root input)),
input[type="search"]:where(:not(body[data-kai-shell-only] #root input)),
input[type="email"]:where(:not(body[data-kai-shell-only] #root input)),
input[type="date"]:where(:not(body[data-kai-shell-only] #root input)),
input[type="file"]:where(:not(body[data-kai-shell-only] #root input)),
input[type="url"]:where(:not(body[data-kai-shell-only] #root input)),
input[type="tel"]:where(:not(body[data-kai-shell-only] #root input)),
input[type="time"]:where(:not(body[data-kai-shell-only] #root input)),
input[type="month"]:where(:not(body[data-kai-shell-only] #root input)),
input[type="week"]:where(:not(body[data-kai-shell-only] #root input)),
input[type="datetime-local"]:where(:not(body[data-kai-shell-only] #root input)),
input:not([type]):where(:not(body[data-kai-shell-only] #root input)),
.toolbar-select:where(:not(body[data-kai-shell-only] #root .toolbar-select)),
.support-query-input:where(:not(body[data-kai-shell-only] #root .support-query-input)) {
  min-height: var(--kai-control-h) !important;
  padding: 0 11px !important;
  border: 1px solid var(--kai-line-strong) !important;
  border-radius: var(--kai-r-control) !important;
  background: var(--kai-surface) !important;
  color: var(--kai-ink) !important;
  box-shadow: none !important;
  font: 400 12.5px "Aeonik", Arial, sans-serif !important;
}
textarea:where(:not(body[data-kai-shell-only] #root textarea)) { padding: 9px 11px !important; line-height: 1.55; }
select:where(:not(body[data-kai-shell-only] #root select)):hover,
input:where(:not(body[data-kai-shell-only] #root input)):hover,
textarea:where(:not(body[data-kai-shell-only] #root textarea)):hover { border-color: var(--kai-ink-3) !important; }
select:where(:not(body[data-kai-shell-only] #root select)):focus,
input:where(:not(body[data-kai-shell-only] #root input)):focus,
textarea:where(:not(body[data-kai-shell-only] #root textarea)):focus {
  border-color: var(--kai-blue) !important;
  box-shadow: var(--kai-focus) !important;
  outline: none;
}
label {
  font: 600 11px/1 "Aeonik", Arial, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kai-ink-2);
  gap: 6px;
}

/* ══ OPPERVLAKKEN ══════════════════════════════════════════════════════════ */

.panel,
.hero-card,
.metric,
.app-card,
.sync-card,
.modal,
.saved-item,
.table-wrap,
.bom-table-shell,
.subtable-card,
.support-problem-panel,
.panel-subsection {
  background: var(--kai-surface) !important;
  border: 1px solid var(--kai-line) !important;
  border-radius: var(--kai-r-panel) !important;
  box-shadow: var(--kai-shadow) !important;
}
.panel { padding: 18px !important; }
.section-heading {
  padding-bottom: 12px !important;
  margin-bottom: 14px !important;
  border-bottom: 1px solid var(--kai-line) !important;
}

/* De blauwe gradient-hero op de launcher verdwijnt. */
body[data-app="launcher"] .hero {
  background: none !important;
  color: inherit !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
body[data-app="launcher"] .hero::after { display: none !important; }
body[data-app="launcher"] .hero .eyebrow { color: var(--kai-green) !important; }
body[data-app="launcher"] .hero h1 { color: var(--kai-ink) !important; font-size: 24px !important; }
body[data-app="launcher"] .hero .hero-copy { color: var(--kai-ink-2) !important; }
.hero { display: block !important; margin-bottom: 20px !important; }
.hero::after { display: none !important; }

/* ── App-tiles ───────────────────────────────────────────────────────────── */
.app-launcher-grid {
  gap: 12px !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}
.app-card,
.app-card.button-link {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-height: 0 !important;
  padding: 16px !important;
  border: 1px solid var(--kai-line) !important;
  background: var(--kai-surface) !important;
  color: var(--kai-ink) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* De dubbele zwarte binnenrand (::after) weg. */
.app-card.button-link::after { display: none !important; }
.app-card:hover,
.app-card.button-link:hover {
  border-color: var(--kai-blue-border) !important;
  box-shadow: var(--kai-shadow-lift) !important;
  background: var(--kai-surface) !important;
  transform: none !important;
}
.app-card-icon {
  width: 34px !important; height: 34px !important;
  max-width: 34px !important; max-height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: var(--kai-blue-soft) !important;
}
.app-card-icon.has-image img { width: 19px !important; height: 19px !important; }
.app-card-copy { gap: 3px !important; }
.app-card-copy strong { font: 600 14px/1.25 "Aeonik", Arial, sans-serif !important; color: var(--kai-ink) !important; }
.app-card-copy span:last-child { font: 400 12px/1.5 "Aeonik", Arial, sans-serif !important; color: var(--kai-ink-2) !important; }
/* De eyebrow herhaalt meestal de titel — verbergen scheelt ruis. */
.app-card-eyebrow { display: none !important; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.subpage-nav,
.project-tabs,
.style-filter-strip {
  gap: 22px !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kai-line) !important;
  border-radius: 0 !important;
}
.subpage-link,
.project-tab {
  min-height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--kai-ink-2) !important;
  font: 500 12.5px "Aeonik", Arial, sans-serif !important;
  /* De pijlvorm gaat eruit — die vervormde labels en was niet uit te leggen. */
  clip-path: none !important;
}
.subpage-link:hover,
.project-tab:hover { background: transparent !important; color: var(--kai-ink) !important; }
.subpage-link-active,
.subpage-link-active:hover,
.project-tab.is-active,
.project-tab.is-active:hover {
  background: transparent !important;
  border: 0 !important;
  color: var(--kai-ink) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 -2px 0 0 var(--kai-green) !important;
  clip-path: none !important;
}

/* ── Tabellen ────────────────────────────────────────────────────────────── */
.table-wrap { overflow: hidden auto; }
table { border-collapse: collapse; background: var(--kai-surface); }
th, thead th {
  height: 34px;
  padding: 0 12px !important;
  background: var(--kai-rail) !important;
  color: var(--kai-ink-3) !important;
  border-bottom: 1px solid var(--kai-line) !important;
  font: 600 10.5px/1 "Aeonik", Arial, sans-serif !important;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 1;
}
td {
  height: var(--kai-row-h);
  padding: 0 12px !important;
  border-bottom: 1px solid #f1f3f7 !important;
  font: 400 12.5px/1.4 "Aeonik", Arial, sans-serif !important;
}
tbody tr:hover td { background: var(--kai-blue-soft) !important; }
tbody tr:last-child td { border-bottom: 0 !important; }
/* Bedragen en aantallen rechts uitlijnen + cijfertabel. */
td.num, th.num, td[data-num], th[data-num] {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge,
.project-status-pill,
.bom-source-badge,
.support-result-badge,
.tpc-badge {
  height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px !important;
  border: 0 !important;
  border-radius: var(--kai-r-pill) !important;
  background: var(--kai-hover) !important;
  color: var(--kai-ink-2) !important;
  font: 600 11px "Aeonik", Arial, sans-serif !important;
}

/* ══ LOGIN ═════════════════════════════════════════════════════════════════ */
.auth-shell { background: var(--kai-bg); padding: 40px 16px; }
.auth-card {
  width: min(100%, 420px);
  padding: 32px !important;
  border-radius: 14px !important;
  box-shadow: var(--kai-shadow-lift) !important;
}
.auth-title { font: 600 24px/1.15 "Aeonik", Arial, sans-serif !important; margin-bottom: 6px !important; }
.office365-signin-button {
  width: 100%;
  height: 44px;
  justify-content: center;
  background: var(--kai-surface) !important;
  border: 1px solid var(--kai-line-strong) !important;
  border-radius: var(--kai-r-control) !important;
  color: var(--kai-ink) !important;
  font: 600 13px "Aeonik", Arial, sans-serif !important;
}
.office365-signin-button:hover { background: var(--kai-hover) !important; border-color: var(--kai-ink-3) !important; }
.auth-divider { color: var(--kai-ink-3); }
.auth-divider::before, .auth-divider::after { background: var(--kai-line); }

/* ══ DARK MODE ═════════════════════════════════════════════════════════════
 * Opt-in: <html data-theme="dark"> (kai-shell.js zet hem op basis van de
 * voorkeur in localStorage, met prefers-color-scheme als startwaarde).
 * ------------------------------------------------------------------------ */
[data-theme="dark"] {
  /* #4d86ff haalde op het actieve zijmenu-item (blue-soft over donker) contrast
     4,46 — net onder de AA-grens van 4,5, op 117 plekken in de app. Een klein
     stapje lichter tilt dat naar 4,84 én verbetert meteen de donkere tekst op
     de primaire knop, die dit token als achtergrond gebruikt. */
  --kai-blue:         #5a8dff;
  --kai-on-blue:      #04143c;
  --kai-muted:        rgba(242, 244, 247, 0.56);
  --kai-blue-hover:   #7ba6ff;
  --kai-blue-soft:    rgba(77, 134, 255, 0.14);
  --kai-blue-border:  rgba(77, 134, 255, 0.35);
  --kai-green:        #19c29d;
  --kai-green-hover:  #33d3b0;
  --kai-green-soft:   rgba(25, 194, 157, 0.13);
  --kai-green-border: rgba(25, 194, 157, 0.32);
  --kai-ink:          #f2f4f7;
  /* De doorzichtigheid van deze twee bepaalt de leesbaarheid van vrijwel alle
     bijschriften in dark mode. Op 0,42 haalde ink-3 contrast 3,80 op élk
     donker oppervlak (rail, surface én pagina-achtergrond) — onder de AA-grens
     van 4,5, en daarmee veruit de grootste bron van slecht leesbare tekst in de
     hele app: labels, hints, tabelkoppen, kruimelpad, placeholders. Nu 0,56
     (contrast ~5,2) en ink-2 mee omhoog naar 0,72, zodat het verschil tussen
     secundair en tertiair zichtbaar blijft i.p.v. tegen elkaar aan te kruipen. */
  --kai-ink-2:        rgba(242, 244, 247, 0.72);
  --kai-ink-3:        rgba(242, 244, 247, 0.56);
  --kai-bg:           #0f1216;
  --kai-rail:         #12161b;
  --kai-surface:      #161a20;
  --kai-line:         #22282f;
  --kai-line-strong:  #2b323b;
  --kai-hover:        #1b2027;
  --kai-shadow:       none;
  --kai-shadow-lift:  0 8px 24px -12px rgba(0, 0, 0, 0.6);
  /* Status blijft herkenbaar rood/amber, maar de zachte vlakken worden
     transparante tints zodat ze niet als lichte kaarten oplichten. */
  --kai-danger:        #f87171;
  --kai-danger-soft:   rgba(248, 113, 113, 0.13);
  --kai-danger-border: rgba(248, 113, 113, 0.34);
  --kai-warn:          #e2a03f;
  --kai-warn-strong:   #f0bd6d;
  --kai-warn-soft:     rgba(226, 160, 63, 0.13);
  --kai-warn-border:   rgba(226, 160, 63, 0.34);
  --kai-ok:            #19c29d;
  --kai-ok-soft:       rgba(25, 194, 157, 0.13);
}
[data-theme="dark"] .side-menu-brand .kai-brand-word { color: #fff; }

/* Kale <a>'s zonder eigen kleurregel vielen terug op de browser-standaard
   #0000EE: op een donkere achtergrond contrast 1,9 en dus onleesbaar. Alleen
   in dark mode rechtgezet — in light mode haalt die browserkleur ruim 8, dus
   daar valt niets te repareren en verandert er met deze regel ook niets. */
[data-theme="dark"] a:not([class]) { color: var(--kai-blue-hover); }

/* Order Flow-KPI's in dark mode. order-flow-dashboard.css kent geen donkere
   variant en houdt de tegel wit, terwijl de tekst erin wél de lichte
   dark-mode-inkt krijgt — het cijfer werd zo wit-op-wit (contrast 1.1).
   Alleen het oppervlak en de rand meedonkeren; de gekleurde statusaccent is
   een inset box-shadow uit de --of-*-kleuren en blijft dus onaangeroerd. */
[data-theme="dark"] .of-kpi {
  background: var(--kai-surface) !important;
  border-color: var(--kai-line) !important;
}
[data-theme="dark"] tbody tr:last-child td,
[data-theme="dark"] td { border-bottom-color: var(--kai-line) !important; }
/* Donkere inkt op de BLAUW GEVULDE knop. #04143c hoort bij de blauwe vulling
 * die de basisregel hierboven zet — het is geen algemene knopkleur.
 *
 * De ghost-/secundaire-/danger-regels geven hun knoppen juist een OPPERVLAK-
 * achtergrond in plaats van blauw. Deze regel staat verderop in het bestand en
 * won daardoor alleen de KLEUR van die regels: zo'n knop hield zijn donkere
 * vlak maar kreeg de inkt-voor-blauw → gemeten contrast 1,03 op ruim 200
 * knoppen (Test / Wissen / Vernieuwen / Annuleren) verspreid over de app.
 * Vandaar dezelfde uitsluitingen als de ghost-regel; die zet zijn eigen,
 * leesbare kleur al.
 *
 * `.kai-ask` (de "Vraag KAI"-knop in de topbalk) hoort er ook bij: die heeft
 * een groen getint vlak en verderop een eigen dark-regel met
 * var(--kai-green-hover), maar die regel draagt geen !important en verloor
 * dus. Die knop staat op ELKE pagina — hij was app-breed onleesbaar.
 *
 * .project-tab / .subpage-link: the tab strip above keeps those TRANSPARENT
 * with its own ink (var(--kai-ink-2)), but that rule is (0,1,0) and this one
 * is (0,1,1) — a tab built as a <button> (rmm-admin) got the ink-for-blue on
 * a transparent background: invisible in dark mode. The <a>-based tabs on the
 * project pages never hit this rule, which is why it went unnoticed.
 * [class*="-tab"] dekt daarnaast elk ander tabblad-fragment (Packages);
 * .subpage-link valt daar NIET onder, dus beide uitzonderingen blijven. */
[data-theme="dark"] button:where(:not(body[data-kai-shell-only] #root button)):where(:not(.ghost-button):not(.secondary-button):not(.action-button--secondary):not(.danger-action):not(.kai-ask):not(.project-tab):not(.subpage-link)):where(:not(.of-kpi):not([class*="ofw-"]):not([class*="ofs-"]):not([class*="-card"]):not([class*="-tile"]):not([class*="-list-item"]):not(.lk-swatch):not([class*="-row"]):not([class*="-item"]):not([class*="-chip"]):not([class*="-pill"]):not([class*="-toggle"]):not([class*="-thumb"]):not([class*="-seg"]):not([class*="-tab"]):not([class*="swatch"])) { color: #04143c !important; }
[data-theme="dark"] .kai-ask { color: var(--kai-green-hover); }
/* Verwijder-knoppen: het diepe rood #b91c1c is gekozen tegen een WIT vlak. Op
 * het donkere oppervlak haalt het 2,7 — te donker om te lezen, terwijl dit
 * juist de knop is die je goed moet zien vóór je klikt. Lichter rood haalt
 * 6,3 en blijft onmiskenbaar rood; de rand schuift mee zodat de knop niet als
 * bleke omlijning wegvalt. Light mode raakt dit niet. */
[data-theme="dark"] .ghost-button.danger:where(:not(body[data-kai-shell-only] #root .ghost-button)),
[data-theme="dark"] .danger-action:where(:not(body[data-kai-shell-only] #root .danger-action)) {
  color: #f87171 !important;
  border-color: rgba(248, 113, 113, 0.42) !important;
}

/* ══ ⌘K COMMANDOPALET ══════════════════════════════════════════════════════ */

.kai-palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(16, 20, 24, 0.45);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 12vh;
}
.kai-palette-backdrop[hidden] { display: none; }

.kai-palette {
  width: min(620px, calc(100vw - 32px));
  background: var(--kai-surface);
  border: 1px solid var(--kai-line-strong);
  border-radius: 14px;
  box-shadow: 0 32px 64px -24px rgba(16, 20, 24, 0.45);
  overflow: hidden;
}
.kai-palette-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--kai-line);
}
.kai-palette-input input {
  flex: 1;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font: 400 15px/1.4 "Aeonik", Arial, sans-serif !important;
  color: var(--kai-ink) !important;
}
.kai-palette-input input::placeholder { color: var(--kai-ink-3); }
.kai-palette-input input:focus { box-shadow: none !important; }

.kai-palette-results { padding: 10px 8px 12px; max-height: 46vh; overflow-y: auto; }
.kai-palette-group {
  padding: 6px 12px;
  font: 600 10px/1 "Aeonik", Arial, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kai-ink-3);
}
.kai-palette-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--kai-ink);
  text-decoration: none;
}
.kai-palette-row:hover,
.kai-palette-row.is-active { background: var(--kai-hover); color: var(--kai-ink); }
.kai-palette-row.is-kai { background: var(--kai-green-soft); }
/* Token i.p.v. de vaste licht-mint hex: in dark mode bleef die rij licht
   terwijl de tekst (var(--kai-ink)) bijna wit werd — contrast 1,11. */
.kai-palette-row.is-kai:hover { background: var(--kai-green-border); }
.kai-palette-icon {
  width: 22px; height: 22px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--kai-blue-soft);
}
.kai-palette-icon.is-kai { background: var(--kai-green); }
.kai-palette-icon img { width: 12px; height: 12px; object-fit: contain; }
.kai-palette-label { flex: 1; font: 500 13px/1.4 "Aeonik", Arial, sans-serif; }
.kai-palette-group-tag { font: 400 11.5px "Aeonik", Arial, sans-serif; color: var(--kai-ink-3); }

.kai-palette-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: var(--kai-rail);
  border-top: 1px solid var(--kai-line);
  font: 400 11px/1 "Aeonik", Arial, sans-serif;
  color: var(--kai-ink-3);
}
.kai-palette-sources { margin-left: auto; }

/* ══ RESPONSIVE ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body:has(.side-menu) .editor-frame { padding-left: 0; }
  .side-menu { transform: translateX(-100%); transition: transform 180ms ease; }
  .side-menu:not(.side-menu-collapsed) { transform: none; }
  .kai-topbar { left: 0; }
  .kai-search { width: 40px; }
  .kai-ask span:not(.kai-ring) { display: none; }
}