/* Matchpage · app-identiteit richting A "Puzzel" (design/app-identiteit/richting-a/handoff.md).
   Laag over system.css/app.css: zelfde markup en gedrag, nieuwe huid. Tokens: canvas #F7F9FD, kaarten 14px, held 18px,
   effect-groen #0F7A37, warn-tekst #8A4B05. Puzzelmotief alleen in held, lege staten, loader en succesmoment. */
:root { --canvas: #F7F9FD; --r-card: 14px; --r-hero: 18px; --ok-text: #0F7A37; --warn-text: #8A4B05; --shadow-lift: 0 6px 20px rgba(16,24,40,.08); }
body, .app { background: var(--canvas); }
.app { grid-template-columns: 240px minmax(0,1fr); }
/* zijbalk: wit, 240px, actief = accent-soft */
.sidebar { background: #fff; padding: 0; gap: 0; }
/* zijbalk loopt door tot onderaan de pagina (align-self: stretch); de inhoud blijft in beeld bij scrollen (.sb-in is sticky) */
.sidebar { position: static; align-self: stretch; height: auto; min-height: 100vh; overflow: visible; }
.sidebar .sb-in { position: sticky; top: 0; flex: none; box-sizing: border-box; width: 100%; height: 100vh; overflow: auto; padding: 14px 10px; display: flex; flex-direction: column; gap: 0; }
@media (max-width: 1000px) { .app .sidebar { min-height: 0; } .app .sidebar .sb-in { position: static; height: 100%; } }
.sb-top { padding: 2px 8px 0; }
.ws { margin-top: 14px; height: auto; min-height: 44px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; position: relative; }
.ws:hover { background: #fff; border-color: var(--border-strong); }
.ws .ws-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ws .ws-t b { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws .ws-t span { font-size: 11px; color: var(--fg-2); font-weight: 400; }
.ws .ws-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--fg-4); }
.ws .ws-dot.ok { background: var(--green); } .ws .ws-dot.warn { background: var(--amber); }
.ws .mark { display: none; }
.add-site { margin: 8px 0 4px; width: 100%; border-style: dashed; color: var(--fg-2); }
.nav-h { padding: 18px 10px 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); }
.nav a { min-height: 34px; padding: 0 10px; border-radius: 8px; font-size: 13px; color: var(--fg-2); }
.nav a:hover { background: var(--bg-hover); color: var(--fg); }
.nav a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav a.on .i { color: var(--accent); }
.nav a .cnt, .nav a .cnt.hot { background: var(--accent); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 600; padding: 0 7px; min-width: 20px; text-align: center; }
.sidebar .foot .trial { border-radius: 10px; }
/* inhoud: geen balk op desktop; kop met eyebrow + H1 en acties rechts */
.content { background: var(--canvas); }
.topbar { background: transparent; border-bottom: 0; height: 52px; padding: 0 32px; position: static; }
.topbar .crumbs { visibility: hidden; }
.page { padding: 0 32px 64px; max-width: 1160px; }
.page.wide { padding: 0 32px 48px; max-width: none; }
.page-h { align-items: flex-end; margin: 0 0 20px; }
.page-h > div:first-child { display: flex; flex-direction: column-reverse; }
.page-h h1 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.page-h > div:first-child > p { margin: 0 0 6px; font-size: 12px; color: var(--fg-2); }
.settings > h1 { font-size: 26px; letter-spacing: -.02em; }
/* kaarten, knoppen, tabellen */
.card { border-radius: var(--r-card); border-color: var(--border); min-width: 0; }
.card .hd { padding: 16px 20px 0; } .card .bd { padding: 12px 20px 18px; } .card .ft { padding: 0 20px 14px; }
.card h2, .card .hd h2 { font-size: 14px; }
.btn { border-radius: 6px; } .btn.primary { box-shadow: none; }
.table thead th { background: var(--bg-sidebar); font-size: 12px; font-weight: 500; color: var(--fg-2); }
.table td { font-size: 13px; } .table tbody tr:hover td { background: #FAFBFE; }
.co-list, .co-list .bd { border-radius: var(--r-card); overflow: hidden; }
.badge.warn, .mp-example { background: #FDF1DC; color: var(--warn-text); border-radius: 999px; }
.empty { border: 1px dashed var(--border-strong); border-radius: var(--r-card); background: #fff; }
.lift { transition: transform .15s, box-shadow .15s; } .lift:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
/* KPI-kaarten */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: #fff; border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px 18px; min-width: 0; }
.kpi p { margin: 0; font-size: 12px; color: var(--fg-2); }
.kpi .v { margin: 10px 0 4px; font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--fg); font-variant-numeric: tabular-nums; }
.kpi small { font-size: 12px; color: var(--fg-2); }
/* overzicht */
.ov-row { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 16px; margin-bottom: 16px; }
.wait-list { list-style: none; margin: 0; padding: 0; }
.wait-list li { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border); }
.wait-list .bar { width: 3px; align-self: stretch; border-radius: 2px; background: var(--accent); }
.wait-list .t { flex: 1; min-width: 0; } .wait-list .t b { display: block; font-weight: 500; } .wait-list .t span { font-size: 12px; color: var(--fg-2); }
.wait-list .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.cnt-pill { margin-left: auto; background: var(--accent-soft); color: var(--accent); border-radius: 999px; font-size: 11px; font-weight: 600; padding: 1px 8px; }
.empty-a { border: 1px dashed var(--border-strong); border-radius: var(--r-card); background: #fff; padding: 32px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.empty-a b { font-size: 14px; } .empty-a p { margin: 0; max-width: 360px; font-size: 12px; color: var(--fg-2); }
.empty-a .row { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.more-h { margin: 28px 0 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); }
/* installatie-status */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist .ck { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 1.5px dashed var(--border-strong); color: var(--fg-3); font-size: 13px; }
.checklist .ck.ok { background: var(--green); border: 0; color: #fff; }
.checklist b { display: block; font-weight: 500; } .checklist span { font-size: 12px; color: var(--fg-2); }
/* mobiel: topbalk 56px met logo en menuknop 44×44 */
.top-logo { display: none; }
@media (max-width: 1000px) {
  .app { grid-template-columns: 1fr; }
  .topbar { position: sticky; top: 0; z-index: 30; height: 56px; padding: 0 12px; background: #fff; border-bottom: 1px solid var(--border); }
  .topbar .crumbs { display: none; }
  .top-logo { display: inline-flex; align-items: center; }
  .nav-btn { order: 3; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 10px; }
  .topbar .right { margin-left: 0; order: 2; flex: 1; justify-content: flex-end; }
  .page, .page.wide { padding: 16px 12px 48px !important; }
  .page-h h1 { font-size: 22px; }
  .kpis { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .kpi .v { font-size: 22px; }
  .ov-row { grid-template-columns: 1fr; }
  .wait-list li { flex-wrap: wrap; } .wait-list .acts { width: 100%; padding-left: 15px; }
  .nav a { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .lift, .lift:hover { transition: none; transform: none; } }
.seg-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-subtle); margin: 1px 4px 1px 0; }
.seg-chip i { width: 7px; height: 7px; border-radius: 50%; }
.co-v2 td { vertical-align: middle; } .co-v2 .sub.mono { font-family: var(--mono); font-size: 11px; }
.co-segs { margin-bottom: 12px; }
.cp-facts { display: grid; grid-template-columns: 140px 1fr; gap: 4px 10px; margin: 0 20px 10px; font-size: 12px; } .cp-facts dt { color: var(--fg-2); } .cp-facts dd { margin: 0; }
.p-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.p-tools .search { flex: 1; min-width: 220px; } .p-tools .search .input { width: 100%; height: 36px; }
.p-tools .seg button { border: 0; background: transparent; padding: 4px 10px; border-radius: 6px; font: inherit; font-weight: 600; font-size: 12px; color: var(--fg-2); cursor: pointer; min-height: 32px; }
.p-tools .seg { display: inline-flex; background: var(--bg-subtle); border-radius: 8px; padding: 2px; } .p-tools .seg button.on { background: #fff; color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.p-table .table td, .p-table .table th { padding-left: 16px; }
@media (max-width: 1000px) { .p-tools .seg button { min-height: 44px; } }
details.more > summary { list-style: none; cursor: pointer; } details.more > summary::-webkit-details-marker { display: none; } details.more > summary::before { content: "▸ "; } details.more[open] > summary::before { content: "▾ "; }
.page.wide > .page-h.a-auto { margin-bottom: 16px; }
.co-v2 .intent .ibar { width: 36px; }

/* Facturatie: maand/jaar-toggle + verbruiksbalken (warn vanaf 80%) */
.bill-t { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border, #E3E8F2); border-radius: 8px; background: #fff; margin-top: 12px; }
.bill-t button { border: 0; background: transparent; padding: 6px 10px; border-radius: 6px; font: inherit; font-size: 12px; cursor: pointer; min-height: 32px; }
.bill-t button[aria-pressed="true"] { background: #EAF1FE; color: #2069F1; font-weight: 600; }
.bill-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.ubar { margin-bottom: 12px; font-size: 13px; }
.ubar .track { height: 6px; background: #EEF2F8; border-radius: 99px; margin-top: 6px; overflow: hidden; }
.ubar .track i { display: block; height: 100%; background: #2069F1; border-radius: 99px; }
.ubar.warn .track i { background: #D97706; }
.ubar.warn .num { color: #8A4B05; }
@media (max-width: 760px) { .bill-row { grid-template-columns: 1fr; } .bill-t button { min-height: 44px; } }

/* ── Puzzel v2 ronde 2 ── */
.eyebrow { display: block; font-size: 12px; color: var(--fg-2, #5B6475); margin-bottom: 2px; }
.page-h h1 { font-size: 26px; font-weight: 600; }
@media (max-width: 760px) { .page-h h1 { font-size: 22px; } }
/* personalisaties */
.tabs[role=tablist] button { border: 0; background: transparent; font: inherit; padding: 8px 10px; min-height: 36px; cursor: pointer; color: var(--fg-2, #5B6475); border-bottom: 2px solid transparent; }
.tabs[role=tablist] button.on { color: #2069F1; border-bottom-color: #2069F1; font-weight: 600; }
.tabs[role=tablist] .cnt { margin-left: 6px; font-size: 11px; }
.bulk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #0F1B33; color: #fff; padding: 8px 12px; border-radius: 10px; margin: 8px 0; }
.bulk-bar .btn { background: #fff; }
.p-table th.ck, .p-table td.ck { width: 36px; }
.p-table input[type=checkbox] { width: 16px; height: 16px; }
.p-table .sub-seg { display: none; font-size: 12px; color: var(--fg-2, #5B6475); }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.exp-after { margin-top: 20px; }
@media (max-width: 760px) {
  .p-table .hide-sm { display: none; }
  .p-table .sub-seg { display: block; }
  .tabs[role=tablist] { overflow-x: auto; white-space: nowrap; }
  .tabs[role=tablist] button, .pager .btn, .bulk-bar .btn { min-height: 44px; }
  .p-table td.ck { padding: 0 4px; } .p-table td.ck input { width: 22px; height: 22px; }
}
/* bedrijven filterbar + sheet */
.fbar { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.fbar-d { display: flex; gap: 6px; flex-wrap: wrap; }
.fbar-m { display: none; }
.fdrop { position: relative; }
.fd-btn.on { border-color: #2069F1; color: #2069F1; }
.fd-menu { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 200px; max-height: 280px; overflow: auto; background: #fff; border: 1px solid #E3E8F2; border-radius: 10px; box-shadow: 0 8px 24px rgba(15,27,51,.12); padding: 6px; }
.fd-opt { display: flex; gap: 8px; align-items: center; padding: 6px 8px; font-size: 13px; border-radius: 6px; cursor: pointer; }
.fd-opt:hover { background: #F3F6FC; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.sheet-bg { position: fixed; inset: 0; background: rgba(15,27,51,.35); z-index: 60; }
.fsheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; background: #fff; border-radius: 16px 16px 0 0; max-height: 85vh; display: flex; flex-direction: column; }
.fs-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #E3E8F2; }
.fs-b { overflow: auto; padding: 8px 16px; }
.fs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fs-chips .chip { min-height: 44px; padding: 0 14px; border: 1px solid #E3E8F2; background: #fff; cursor: pointer; }
.fs-chips .chip[aria-pressed=true] { background: #EAF1FE; color: #2069F1; border-color: #2069F1; }
.fs-f { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid #E3E8F2; position: sticky; bottom: 0; background: #fff; }
.fs-f .btn { flex: 1; min-height: 44px; justify-content: center; }
@media (max-width: 760px) { .fbar-d { display: none; } .fbar-m { display: inline-flex; min-height: 44px; } }
@media (min-width: 761px) { .fsheet, .sheet-bg { display: none; } }
/* bedrijf-detail */
.co-dgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 16px; }
.dl-a { grid-template-columns: 140px 1fr; }
.dl-a dd { text-align: right; }
.tl-a { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid #E3E8F2; }
.tl-a > li { position: relative; padding: 0 0 16px 12px; font-size: 13px; }
.tl-a .dot { position: absolute; left: -21px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #2069F1; }
.tl-a ul { list-style: none; padding: 4px 0; margin: 0; }
@media (max-width: 1023px) { .co-dgrid { grid-template-columns: 1fr; } }
/* segmenten */
.seg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.seg-grid .seg.editing { grid-column: 1 / -1; }
.seg-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.s1 { background: #2069F1; } .s2 { background: #16A34A; } .s3 { background: #D97706; } .s4 { background: #7C3AED; } .s5 { background: #0F1B33; } .s6 { background: #0891B2; }
.seg .hd { gap: 8px; } .seg-live { margin-left: auto; font-size: 12px; }
.seg-rule { display: block; font-size: 12px; color: var(--fg-2, #5B6475); margin-bottom: 10px; }
.seg-big { font-size: 13px; color: var(--fg-2, #5B6475); } .seg-big b { font-size: 24px; color: #0F1B33; margin-right: 4px; }
.seg-bar { height: 6px; background: #EEF2F8; border-radius: 99px; margin: 8px 0 12px; overflow: hidden; } .seg-bar i { display: block; height: 100%; border-radius: 99px; }
.seg .seg-metrics { font-size: 12px; }
.seg .ft { display: flex; gap: 4px; justify-content: flex-end; }
@media (max-width: 1100px) { .seg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .seg-grid { grid-template-columns: 1fr; } }
/* resultaten */
.sbar { display: grid; grid-template-columns: 160px 1fr 60px; gap: 10px; align-items: center; font-size: 13px; margin-bottom: 10px; }
.sbar .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbar .b { display: grid; gap: 3px; } .sbar .b i { display: block; height: 7px; border-radius: 99px; background: #CBD5E1; min-width: 2px; } .sbar .b i.v { background: #2069F1; }
.legend span { display: inline-flex; gap: 6px; align-items: center; margin-right: 12px; font-size: 12px; }
.legend span i { width: 10px; height: 6px; border-radius: 3px; background: #CBD5E1; } .legend span i.v { background: #2069F1; }
@media (max-width: 760px) { .sbar { grid-template-columns: 100px 1fr 50px; } }
/* suggesties */
.sug-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1023px) { .sug-grid { grid-template-columns: 1fr; } }
/* integraties */
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.int-card .bd { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.int-ft { margin-top: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* testmodus */
.tm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.lbl { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
@media (max-width: 1023px) { .tm-grid { grid-template-columns: 1fr; } }
/* instellingen + profiel */
.set-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 12px; }
.set-grid .srow { border: 0; border-bottom: 1px solid #EEF2F8; border-radius: 0; padding-left: 0; padding-right: 0; }
.set-ck { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #EEF2F8; font-size: 13px; min-height: 44px; }
.avatar-a { width: 44px; height: 44px; border-radius: 50%; background: #EAF1FE; color: #2069F1; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.danger-zone { border-color: #FCA5A5; }
@media (max-width: 1023px) { .set-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .set-grid .srow { flex-direction: column; align-items: stretch; gap: 6px; } .set-grid .srow .v .input { width: 100%; } }
.co-dh > div:first-child { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.co-dh > div:first-child > :first-child { order: 0; flex: none; }
.seg .seg-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.seg .seg-metrics > div { padding: 6px 8px; }
.seg .seg-metrics b { font-size: 14px; }
.page-h > div:first-child:has(> .eyebrow) { flex-direction: column; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
  .p-table table { display: table !important; width: 100%; }
  .p-table thead { display: table-header-group !important; }
  .p-table tbody { display: table-row-group !important; }
  .p-table tr { display: table-row !important; border: 0 !important; padding: 0 !important; }
  .p-table th, .p-table td { display: table-cell !important; padding: 10px 6px !important; vertical-align: middle; }
  .p-table th.hide-sm, .p-table td.hide-sm { display: none !important; }
  .p-table td::before { content: none !important; }
  .p-tools { flex-wrap: wrap; } .p-tools .search { flex: 1 1 100%; }
}

/* ── Ronde 19: pixel-pass tegen richting A ── */
/* menu-iconen uit de handoff: 16px, lijn 1.6 (viewBox 20) */
.nav a { gap: 10px; }
.nav a .i.ni { width: 16px; height: 16px; flex: none; stroke-width: 1.6; fill: none; }
.sidebar .foot .user .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* labels/tags = design .pill: volledig rond, 11px/500, 2px 8px, geen rand */
.chip, .pill { display: inline-flex; align-items: center; gap: 4px; height: auto; min-height: 0; border: 0; border-radius: 999px; padding: 2px 8px; font-size: 11px; line-height: 16px; font-weight: 500; color: #1A1A1A; background: #F5F5F5; white-space: nowrap; }
.chip.blue, .pill.blue { background: #EAF1FD; color: #2069F1; }
.chip.purple, .pill.purple { background: #F1EAFD; color: #7C3AED; }
.chip.green, .pill.green { background: #E6F6EC; color: #0F6B32; }
.chip.yellow, .pill.yellow, .pill.warn { background: #FDF1DC; color: #8A4B05; }
.chip.pink, .pill.pink { background: #FDEAF1; color: #A3195B; }
.seg-chip { background: #F5F5F5; margin: 0; } .seg-chip i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.co-v2 td[data-l="Segmenten"], .co-v2 td[data-l="Tags"] { white-space: nowrap; }
.co-v2 td[data-l="Segmenten"] .chip + .chip, .co-v2 td[data-l="Tags"] .chip + .chip { margin-left: 4px; }
/* bedrijf-detail: tags-kaart en kopacties zoals het ontwerp */
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cp-icp { display: contents; }
.cp-icp .pill, .tag-row .pill { cursor: pointer; font-family: inherit; }
.cp-icp .pill.off { background: #fff; color: var(--fg-2); box-shadow: inset 0 0 0 1px #D6D6D6; }
.cp-icp .pill[aria-pressed="true"] { outline: 0; font-weight: 500; }
.tag-row .x { border: 0; background: none; padding: 0 0 0 2px; font: inherit; font-weight: 600; color: inherit; cursor: pointer; }
.tag-in { height: 32px !important; width: 150px; font-size: 12px; border-radius: 6px; padding: 0 10px; }
.co-acts { gap: 8px; align-items: center; }
.co-segc .seg-li { display: flex; padding: 6px 0; border-bottom: 1px solid #F0F0F0; }
.co-pers { margin-top: 12px; }
@media (max-width: 1000px) {
  .tag-in { min-height: 44px; width: 160px; }
  .co-acts { width: 100%; } .co-acts .btn { min-height: 44px; }
  .co-pers { min-height: 44px; width: 100%; justify-content: center; }
}

/* ── Ronde 19: 390-fixes ── */
@media (max-width: 760px) {
  /* topbalk zoals ontwerp: logo + menuknop; periode/voorbeelddata op een eigen regel eronder */
  .topbar { flex-wrap: wrap; height: auto; min-height: 56px; row-gap: 0; }
  .topbar .right { order: 4; flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; gap: 6px; padding: 0 0 8px; }
  .nav-btn { flex: none; }
  /* Personalisaties: Effect-kolom niet meer afgesneden */
  .p-table { overflow: hidden; }
  .p-table table { table-layout: fixed; width: 100% !important; }
  .p-table th.ck, .p-table td.ck { width: 34px; }
  .p-table th:nth-child(5) { width: 96px; }
  .p-table th:nth-child(7) { width: 58px; }
  .p-table td[data-l="Naam"] { overflow-wrap: anywhere; }
  .p-table td[data-l="Status"] .chip { white-space: normal; text-align: left; }
  .p-tools .search .input, .p-tools select { max-width: 100%; }
  .p-tools > * { max-width: 100%; min-width: 0; }
  /* Bedrijven-kaarten: compact zoals ontwerp (naam, domein, metaregel, labels) */
  .co-v2 td[data-l="Intentie"], .co-v2 td[data-l="Laatst gezien"] { display: none !important; }
  .co-v2 td .chip { margin: 2px 4px 2px 0; }
}
.dl-a { gap: 0; font-size: 13px; }
.dl-a dt, .dl-a dd { padding: 8px 0; border-bottom: 1px solid #F0F0F0; margin: 0; }
.dl-a dt { color: var(--fg-2); } .dl-a dd { color: var(--fg); font-weight: 500; }
@media (max-width: 760px) { .srow { flex-wrap: wrap; min-width: 0; } .srow .l, .srow .v { min-width: 0; max-width: 100%; } .srow .l span, .srow .l b, .srow .v span { overflow-wrap: anywhere; white-space: normal; } .stackv > .card { min-width: 0; max-width: 100%; } }
@media (max-width: 1023px) { .set-grid, .co-dgrid, .tm-grid, .sug-grid { grid-template-columns: minmax(0, 1fr); } .set-grid > * { min-width: 0; } }
@media (max-width: 760px) { .ns-add { flex-wrap: wrap; width: 100%; } .ns-add .input { min-width: 0 !important; width: 100%; min-height: 44px; } }
/* desktop: geen aparte topbalk; hulpknoppen in de paginakop (zoals ontwerp) */
@media (min-width: 1001px) {
  .topbar.tb-empty { height: 24px; min-height: 0; padding: 0; overflow: hidden; }
  .page-h .ph-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
  .ph-tools { display: flex; gap: 8px; align-items: center; }
}
/* zijbalk: zoals ontwerp alleen site-kiezer + menu; 'Site toevoegen' zit in het kiezermenu */
.sidebar > .add-site { display: none; }
.wait-list .bar { width: 4px; height: 32px; align-self: center; border-radius: 99px; flex: none; }
/* Bedrijven op 390: lijstrijen zoals ontwerp (tegel 28px, naam, domein mono, metaregel, labels) */
@media (max-width: 1000px) {
  .co-cards { gap: 0 !important; padding: 0 !important; }
  .co-card { border: 0 !important; border-top: 1px solid #E6E6E6 !important; border-radius: 0 !important; padding: 12px !important; min-height: 44px; align-items: flex-start; }
  .co-card:first-child { border-top: 0 !important; }
  .cc-main { gap: 2px !important; } .cc-main b { font-weight: 500; font-size: 13px; }
  .cc-dom { font-family: var(--mono); font-size: 11px; color: var(--fg-2); }
  .cc-main .sub { font-size: 11px; color: var(--fg-2); white-space: normal !important; }
  .cc-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .cc-pills .chip { margin: 0 !important; }
}
/* tags: visueel klein zoals ontwerp, raakvlak ≥44px via onzichtbare rand */
.cp-icp .pill, .tag-row .x { position: relative; }
.cp-icp .pill::before, .tag-row .x::before { content: ""; position: absolute; inset: -12px -4px; }
.tag-row .x::before { inset: -14px -10px; }
@media (max-width: 760px) {
  .p-table td[data-l="Naam"] .cell-b, .p-table td[data-l="Naam"] .sub-seg { white-space: normal !important; overflow-wrap: anywhere; display: block; }
  .p-table td[data-l="Naam"] { overflow: hidden; }
  .p-table .pager { flex-wrap: wrap; } .p-table .pager .btn { min-width: 88px; justify-content: center; }
  .p-tools .search { border: 0; padding: 0; background: none; }
}

/* ── Logo-vorm final (richting-a/logo-vorm/logo-vorm.css, 19:21), letterlijk: alleen held-uitsnede + loader ── */
/* ==========================================================================
   Matchpage · logo-vorm (final) · drop-in for public/app/puzzel.css
   The exact icon (brand/svg …KQY3KF5F8BSWDV2WZWP.svg, viewBox 0 0 761.06 652.67), two paths .l / .r.
   EXACTLY two uses:
     1. .mp-hero-crop — the logo shape very large, cut off by the blue hero bar on Overzicht (decorative)
     2. .mp-loader    — the two pieces click together, only where something loads
   Decorative = aria-hidden="true". House blues only. prefers-reduced-motion: static.
   ========================================================================== */
:root { --pz-ratio: 761.06 / 652.67; --pz-dur: 320ms; --pz-spring: cubic-bezier(.34, 1.4, .64, 1); }
@supports (animation-timing-function: linear(0, 1)) {
  :root { --pz-spring: linear(0, .16 4.5%, .72 13%, .94 17%, 1.04 21%, 1.07 25%, 1.05 31%, 1.01 40%, .995 50%, 1); }
}

/* 1 · hero crop: <svg class="mp-hero-crop" aria-hidden="true" viewBox="0 0 761.06 652.67"><path class="l"/><path class="r"/></svg>
      as first child of the hero section (position:relative; overflow:hidden). Text stays on top. */
.mp-hero-crop { position: absolute; z-index: 0; pointer-events: none; right: -5%; top: 6%; height: 150%; width: auto; aspect-ratio: var(--pz-ratio); }
/* two-tone so the zig-zag seam reads: lighter left piece, stronger right piece (white tints on the blue bar) */
.mp-hero-crop .l { fill: #FFFFFF; opacity: .18; }
.mp-hero-crop .r { fill: #FFFFFF; opacity: .25; }
.mp-hero-crop ~ * { position: relative; z-index: 1; }
@media (max-width: 639px) { .mp-hero-crop { right: -18%; top: 71%; height: 95%; } .mp-hero-crop .l { opacity: .16; } .mp-hero-crop .r { opacity: .2; } }
/* on white backgrounds (website hero): house blues */
.mp-hero-crop--light .l { fill: #5890F8; opacity: .18; } .mp-hero-crop--light .r { fill: #2069F1; opacity: .18; }

/* 2 · loader: <div class="mp-loader" role="status"><svg class="mp-load" aria-hidden="true" viewBox=…><path class="l"/><path class="r"/></svg><span>… laden</span></div>
      Pieces start ~7 px apart (rendered), slide together in 320 ms (spring), short hold, slide apart, repeat while loading.
      NB: transforms on SVG paths are in viewBox units (761 wide), not screen px. With transform-box: fill-box a %
      is relative to each piece's own box: at the fixed 26 px height, 46% of the left piece (386 units) and 41% of the
      right piece (435 units) ≈ 177 units ≈ 7 px rendered. Change --pz-load-gap-* together with the height. */
.mp-loader { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 96px; font-size: 13px; color: var(--fg-2, #5f5f5f); }
.mp-load { --pz-load-gap-l: -46%; --pz-load-gap-r: 41%; height: 26px; width: auto; aspect-ratio: var(--pz-ratio); flex: none; overflow: visible; }
.mp-load .l { fill: #5890F8; } .mp-load .r { fill: #2069F1; }
.mp-load .l, .mp-load .r { transform-box: fill-box; transform-origin: 50% 50%; }
.mp-load .l { animation: pz-load-l 1.1s infinite; } .mp-load .r { animation: pz-load-r 1.1s infinite; }
/* 0 → 29% (320 ms): snap together · 29–64%: hold · 64–100%: drift apart */
@keyframes pz-load-l { 0% { transform: translateX(var(--pz-load-gap-l)); animation-timing-function: var(--pz-spring); } 29%, 64% { transform: translateX(0); animation-timing-function: ease-in-out; } 100% { transform: translateX(var(--pz-load-gap-l)); } }
@keyframes pz-load-r { 0% { transform: translateX(var(--pz-load-gap-r)); animation-timing-function: var(--pz-spring); } 29%, 64% { transform: translateX(0); animation-timing-function: ease-in-out; } 100% { transform: translateX(var(--pz-load-gap-r)); } }

/* remove the old generic puzzle art */
.hero-match .hm-puz, .puzzle-empty .puz { display: none; }

@media (prefers-reduced-motion: reduce) { .mp-load .l, .mp-load .r { animation: none !important; transform: none !important; } }

/* v4 · mobile contrast: on <640px the bar ends in a darker house blue so all white text (incl. over the crop) is ≥ 4.5:1 */
@media (max-width: 639px) {
  .hero-match, .bg-match:has(> .mp-hero-crop) { background: linear-gradient(120deg, #1A5AD4 0%, #1550C8 100%); }
  .mp-hero-crop .l { opacity: .14; } .mp-hero-crop .r { opacity: .18; }
  /* white-tint chips/pills in the bar a touch less light (approved design: /15 and /20) */
  .hm-chip, .bg-match:has(> .mp-hero-crop) .bg-white\/15 { background: rgba(255,255,255,.11); }
  .hm-concept, .bg-match:has(> .mp-hero-crop) .bg-white\/20 { background: rgba(255,255,255,.14); }
}

/* ── Ronde 20 ── */
@media (max-width: 1000px) {
  .page-h { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-h .ph-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-start; }
  .ph-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .topbar.tb-empty .right { display: none; }
  .ph-tools .seg span, .ph-tools .btn, .page-h .ph-acts .btn { min-height: 44px; }
}
/* Segmenten zoals ontwerp: kaart p-4, stip 12px r4, naam + status, regel mono, groot getal, balk 6px */
.seg-grid { gap: 16px; }
.seg-a { background: #fff; border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px; min-width: 0; }
.seg-a-h { display: flex; align-items: center; gap: 8px; }
.seg-a-h .seg-dot { width: 12px; height: 12px; border-radius: 4px; }
.seg-a-h h2 { margin: 0; font-size: 13px; font-weight: 600; min-width: 0; }
.seg-a-n { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; min-height: 24px; }
.seg-a-n:hover { color: var(--accent); }
.seg-a-s { margin-left: auto; font-size: 12px; color: var(--fg-2); white-space: nowrap; }
.seg-a-r { margin: 8px 0 0; font-family: var(--mono); font-size: 12px; color: var(--fg-2); }
.seg-a-v { margin: 12px 0 0; } .seg-a-v b { font-size: 22px; font-weight: 600; } .seg-a-v span { font-size: 12px; color: var(--fg-2); }
.seg-a-bar { margin-top: 8px; height: 6px; border-radius: 99px; background: #F5F5F5; overflow: hidden; } .seg-a-bar i { display: block; height: 100%; border-radius: 99px; }
@media (max-width: 1000px) { .seg-a-n { min-height: 44px; } }
/* Installatie zoals ontwerp: succeskaart, dan Je tag | Status naast elkaar */
.inst-ok { margin-bottom: 20px; }
.inst-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; margin-bottom: 20px; }
.tag-pre { margin: 0; overflow-x: auto; border-radius: 8px; background: #0F1B33; color: #B6C2D9; padding: 16px; font-family: var(--mono); font-size: 12px; white-space: pre; }
.inst-status .checklist { gap: 16px; }
@media (max-width: 1279px) { .inst-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1000px) { .inst-grid .btn { min-height: 44px; } }
.hm-empty { display: block; max-width: 560px; font-size: 13px; color: rgba(255,255,255,.9); margin-bottom: 8px; } .hm-link { color: #fff; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; } .hm-link:hover { background: rgba(255,255,255,.25); } @media (max-width: 1000px) { .hm-link { min-height: 44px; } }
/* ── Ronde 21: Herkende bedrijven zoals ontwerp ── */
.co-tools { display: flex; gap: 8px; align-items: center; margin: 4px 0 8px; }
.co-tools .search { flex: 1; min-width: 0; } .co-tools .search .input { width: 100%; height: 36px; }
@media (min-width: 761px) { .co-tools .search { flex: 0 1 260px; } .co-tools { float: left; margin: 8px 8px 0 0; } .fbar { margin-top: 8px; } .co-filters { clear: both; } }
.co-view { height: 32px; border: 1px solid #D6D6D6; border-radius: 6px; padding: 0 8px; background: #fff; font: inherit; font-size: 13px; }
.co-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; margin: 4px 0 12px; }
.co-filters .fpill { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 500; background: #EAF1FD; color: #2069F1; }
.co-filters .fpill b { font-weight: 500; } .co-filters .fpill button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0 0 0 2px; position: relative; }
.co-filters .fpill button::before { content: ""; position: absolute; inset: -14px -10px; }
.linkish { color: var(--accent); padding: 0 4px; min-height: 0; height: auto; font-size: 12px; }
.co-count { margin-left: auto; }
.co-cards-h { display: none; }
.co-note { font-size: 12px; margin-top: 12px; }
@media (max-width: 1000px) {
  .co-cards-h { display: block; padding: 10px 12px; font-size: 12px; font-weight: 500; color: var(--fg-2); background: var(--bg-sidebar, #FAFAFA); border-bottom: 1px solid #E6E6E6; }
  .co-tools .search .input, .co-tools .fbar-m { height: 44px; min-height: 44px; }
  .co-tools .fbar-m { display: inline-flex; flex: none; }
  .co-filters .co-count { margin-left: 0; }
  .linkish { min-height: 32px; }
}
.inst-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .inst-grid { grid-template-columns: minmax(0, 1fr); } }
.inst-adv { margin-top: 12px; font-size: 12px; } .inst-adv > summary { cursor: pointer; color: var(--accent); list-style: none; min-height: 24px; display: inline-flex; align-items: center; }
.inst-adv > summary::-webkit-details-marker { display: none; } .inst-adv[open] > summary { margin-bottom: 10px; }
@media (max-width: 1000px) { .inst-adv > summary { min-height: 44px; } }
.inst-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .inst-grid { grid-template-columns: minmax(0, 1fr); } }
.inst-adv { margin-top: 12px; font-size: 12px; } .inst-adv > summary { cursor: pointer; color: var(--accent); list-style: none; min-height: 24px; display: inline-flex; align-items: center; }
.inst-adv > summary::-webkit-details-marker { display: none; } .inst-adv[open] > summary { margin-bottom: 10px; }
@media (max-width: 1000px) { .inst-adv > summary { min-height: 44px; } }
.ph-tools .btn.icon { display: none; } .mp-example .ex-long { display: inline !important; }
.co-tools .search .input { border: 1px solid #D6D6D6; border-radius: 8px; background: #fff; padding: 0 12px; }
/* CompanyLogo-fallback volgens handoff: initialen op surface-subtle, rand, rounded-6 */
.mp-mono { background: #F5F5F5 !important; color: #5F5F5F !important; border: 1px solid #E6E6E6; border-radius: 6px !important; font-weight: 600; }
/* ── Ronde 22: Personalisaties zoals ontwerp ── */
.p-sel { height: 36px; border: 1px solid #D6D6D6; border-radius: 6px; background: #fff; padding: 0 8px; font: inherit; font-size: 13px; max-width: 100%; }
.eb-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .eb-link:hover { color: var(--accent); }
.trend { display: block; }
@media (max-width: 760px) { .p-sel { height: 44px; flex: 1 1 140px; } .eb-link { display: inline-block; min-height: 24px; } }
.co-meta { display: block; font-size: 11px; color: var(--fg-2); margin-top: 1px; } .co-int { font-weight: 500; }
.co-v2 td[data-l="CRM"] .chip { white-space: nowrap; }
/* ronde 22b: Personalisaties-filters op 390 zoals ontwerp: zoeken + segment, status + weergave */
@media (max-width: 760px) {
  .p-tools { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 8px; }
  .p-tools .search { flex: none; min-width: 0; } .p-tools .p-sel { width: 100%; } .p-tools .seg { justify-self: start; }
}
.tm-open { width: 100%; justify-content: center; min-height: 44px; }
/* ronde 23: Personalisaties kaarten 1:1 ontwerp */
.pc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 4px; }
@media (max-width: 1279px) { .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .pc-grid { grid-template-columns: minmax(0, 1fr); } }
.pcard { display: block; background: #fff; border: 1px solid var(--line, #E6E6E6); border-radius: 12px; padding: 16px; color: inherit; text-decoration: none; min-width: 0; transition: box-shadow .15s, transform .15s; }
.pcard:hover { box-shadow: 0 4px 14px rgba(15,27,51,.08); transform: translateY(-1px); }
.pc-top { display: flex; align-items: center; gap: 8px; } .pc-t { flex: 1; min-width: 0; }
.pc-t h2 { font-size: 14px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-t p { margin: 0; font: 12px var(--mono, monospace); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-bar { width: 6px; height: 36px; border-radius: 99px; background: #0F1B33; flex: none; }
.pc-bot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 16px; gap: 8px; }
.pc-l { font-size: 11px; color: var(--fg-2); margin: 0; } .pc-eff { font-size: 22px; font-weight: 600; margin: 0; font-variant-numeric: tabular-nums; }
.pc-eff.up { color: #0f7a37; } .pc-eff.down { color: #b42318; } .pc-eff.na { color: var(--fg-3, #9a9a9a); }
.pc-bar.green, .pc-sp.green { background: #16A34A; color: #16A34A; } .pc-bar.purple, .pc-sp.purple { background: #7C3AED; color: #7C3AED; } .pc-bar.blue, .pc-sp.blue { background: #2069F1; color: #2069F1; }
.pc-bar.yellow, .pc-sp.yellow { background: #D97706; color: #D97706; } .pc-bar.pink, .pc-sp.pink { background: #DB2777; color: #DB2777; } .pc-sp.navy { color: #0F1B33; }
.pc-sp { background: none !important; } .pc-note { font-size: 12px; margin-top: 16px; }
.pgroup + .pc-grid { margin-bottom: 16px; }
/* ronde 23: Resultaten volgens ontwerp */
.res-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
@media (max-width: 1279px) { .res-grid { grid-template-columns: minmax(0, 1fr); } }
.res-sub { display: flex; justify-content: flex-end; gap: 4px; margin: -8px 0 12px; flex-wrap: wrap; }
.res-sub button, .res-sub a { border: 0; background: none; font: inherit; font-size: 12px; color: var(--fg-2); padding: 4px 10px; border-radius: 6px; cursor: pointer; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.res-sub button.on { background: var(--bg-subtle, #F5F5F5); color: var(--fg, #0F1B33); font-weight: 600; }
.res-seg .sbar .b i.v.pc-bar { height: 10px; }
.seg.res-per button { border: 0; background: transparent; padding: 4px 10px; border-radius: 6px; font: inherit; font-weight: 600; font-size: 12px; color: var(--fg-2); cursor: pointer; min-height: 32px; }
.seg.res-per { display: inline-flex; background: var(--bg-subtle, #F5F5F5); border-radius: 8px; padding: 2px; } .seg.res-per button.on { background: #fff; color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
@media (max-width: 1000px) { .res-sub button, .res-sub a, .seg.res-per button { min-height: 44px; } }
/* ronde 23: Instellingen volgens ontwerp */
.set-form { display: grid; gap: 6px; } .set-form .lbl { font-size: 13px; font-weight: 500; margin-top: 8px; } .set-form .lbl:first-child { margin-top: 0; }
.set-form .input { width: 100%; height: 44px; } .set-goal { justify-self: start; } .set-more { font-size: 12px; margin: 10px 0 0; }
.team-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line, #E6E6E6); }
.team-row small { display: block; color: var(--fg-2); font-size: 12px; }
.linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--accent, #2069F1); cursor: pointer; text-decoration: underline; min-height: 24px; }
.danger-zone .btn.danger[disabled] { opacity: .7; }
.pf-name { gap: 8px; } .pf-name .input { flex: 1; min-width: 0; } .pf-note { font-size: 12px; margin: 2px 0 0; } .pf-av { width: 56px; height: 56px; font-size: 20px; }
.set-form select.input { height: 44px; }
/* ronde 23: Testmodus volgens ontwerp */
.tm-a { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
@media (max-width: 1279px) { .tm-a { grid-template-columns: minmax(0, 1fr); } }
.tm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.tm-chip { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--bg-subtle, #F5F5F5); border-radius: 99px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; min-height: 32px; white-space: nowrap; }
.tm-chip .pc-bar { width: 8px; height: 8px; } .tm-chip.on { background: #E8F0FE; color: var(--accent, #2069F1); font-weight: 600; }
@media (max-width: 1000px) { .tm-chip { min-height: 44px; } }
.tm-a .tm-open { margin-top: 12px; justify-self: start; width: auto; } @media (max-width: 639px) { .tm-a .tm-open { justify-self: stretch; width: 100%; } }
.tm-co { margin-top: 12px; font-size: 13px; } .tm-co summary { color: var(--accent, #2069F1); cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.tm-browser { border: 1px solid var(--line, #E6E6E6); border-radius: 10px; overflow: hidden; }
.tm-bar { display: flex; align-items: center; gap: 6px; background: #FAFAFA; border-bottom: 1px solid var(--line, #E6E6E6); padding: 8px 12px; }
.tm-bar i { width: 8px; height: 8px; border-radius: 99px; background: #D6D6D6; } .tm-bar span { margin-left: 8px; font: 11px var(--mono, monospace); color: var(--fg-2); }
.tm-page { padding: 20px; } .tm-eb { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--accent, #2069F1); margin: 0; }
.tm-h { font-size: 20px; font-weight: 600; margin: 4px 0 0; } .tm-s { font-size: 13px; color: var(--fg-2); margin: 8px 0 0; }
/* ronde 23: Wacht op jou — Bekijk rechts, Goedkeuren onder de tekst (ontwerp) */
.wait-list li { flex-wrap: nowrap !important; align-items: flex-start; } .wait-list .bar { align-self: flex-start; margin-top: 2px; }
.wait-list .t .wl-ok { display: inline-flex; margin-top: 10px; } .wait-list .wl-view { flex: none; }
.wait-list .t > span { display: block; }
.co-why { margin-top: 16px; } .co-why .cp-why { margin: 8px 0 0; font-size: 13px; color: var(--fg-2); }
/* ronde 23: Integraties-eyebrows zoals ontwerp */
.int-a .sect { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 600; color: var(--fg-2); margin: 20px 0 8px; border: 0; padding: 0; }
.int-a .sect:first-child { margin-top: 4px; }
.int-a .int-card p.muted { margin: 6px 0 10px; font-size: 12px; }
/* ronde 23: Herkenning in twee kolommen, verbruik als balken */
.rec-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .rec-grid { grid-template-columns: minmax(0, 1fr); } }
.use-bars { display: grid; gap: 12px; font-size: 12px; } .ub-h { display: flex; justify-content: space-between; gap: 8px; }
.ub-t { height: 6px; border-radius: 99px; background: var(--bg-subtle, #F5F5F5); margin-top: 4px; overflow: hidden; } .ub-t i { display: block; height: 100%; border-radius: 99px; }
.ub-warn { color: #8a4b05; margin: 0; }
.bill-h { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; } .bill-h .bill-t { margin: 0; }
/* ronde 24 */
.set-adv { margin-top: 8px; font-size: 13px; } .set-adv summary { color: var(--accent, #2069F1); cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.set-form select.input:disabled { color: var(--fg-2); }
.set-ck input[type=checkbox] { width: 18px; height: 18px; accent-color: #2069F1; flex: none; }
.pill-cur { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 99px; background: #E8F0FE; color: var(--accent, #2069F1); font-size: 11px; font-weight: 600; margin-left: 8px; }
.recact { min-height: 32px; } @media (max-width: 1000px) { .recact { min-height: 44px; } }
/* Testmodus 390: kleine pill zoals ontwerp, tikvlak 44px via onzichtbare padding op de knop */
@media (max-width: 1000px) {
  .tm-chips { gap: 0 4px; margin: 0 -4px; }
  .tm-chip { min-height: 44px; padding: 0 4px; background: none !important; border-radius: 0; font-size: 11px; }
  .tm-chip .tm-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 99px; background: var(--bg-subtle, #F5F5F5); line-height: 16px; }
  .tm-chip.on .tm-pill { background: #E8F0FE; }
  .tm-chip .pc-bar { width: 6px; height: 6px; }
}
@media (min-width: 1101px) { .recsrc .rowh { flex-wrap: nowrap; } .recsrc .l { min-width: 0; } .recsrc .status, .recsrc .recact { white-space: nowrap; flex: none; } }

/* ronde 25 — Personalisaties + Resultaten 1:1 ontwerp */
.p-tools .search { border: 0; padding: 0; background: none; box-shadow: none; margin: 0; display: block; }
.p-tools .search .input { margin: 0; }
.vb-chip { font-size: 11px; color: var(--fg-2); background: var(--bg-subtle, #F5F5F5); border: 1px solid var(--border, #E5E5E5); }
.tabs-link { margin-left: auto; align-self: center; font-size: 12px; color: var(--fg-2); text-decoration: none; padding: 6px 4px; white-space: nowrap; }
.tabs-link:hover { color: var(--fg); text-decoration: underline; }
.pc-t h2 { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
.pc-eff { font-size: 22px; line-height: 1.1; }
.pc-eff small { display: block; font-size: 11px; font-weight: 500; color: var(--fg-2); margin-top: 2px; }
.pc-bot .pc-sp { margin-left: auto; }
.res-links { display: flex; gap: 14px; margin: -10px 0 14px; flex-wrap: wrap; font-size: 12px; }
.res-links a, .res-links .lnk { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; color: var(--fg-2); cursor: pointer; text-decoration: none; }
.res-links a:hover, .res-links .lnk:hover { color: var(--fg); text-decoration: underline; }
.res-kpis .kpi .v { font-size: 26px; white-space: nowrap; }
.res-seg .sbar .b { gap: 4px; }
.res-seg .sbar .b i { height: 6px; background: #E2E8F0; }
.res-seg .sbar .b i.v { height: 10px; }
.res-best .best-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; min-height: 44px; border-top: 1px solid var(--border, #EEE); text-decoration: none; color: inherit; }
.res-best .best-row:first-child { border-top: 0; }
.res-best .pc-bar { width: 4px; align-self: stretch; border-radius: 99px; flex: none; }
.res-best .t { flex: 1; min-width: 0; } .res-best .t b { display: block; font-size: 13px; font-weight: 600; }
.res-best .t small { font-size: 12px; color: var(--fg-2); }
.res-best .num { font-size: 18px; font-weight: 600; } .res-best .num.up { color: #0f7a37; } .res-best .num.na { color: var(--fg-3, #9a9a9a); }
@media (max-width: 1000px) { .res-links a, .res-links .lnk, .tabs-link { min-height: 44px; display: inline-flex; align-items: center; } }

/* ronde 26 */
.chip.seg-c { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-subtle, #F5F5F5); color: var(--fg); border: 1px solid var(--border, #E5E5E5); }
.chip.seg-c i { width: 7px; height: 7px; border-radius: 99px; display: inline-block; flex: none; }
.pc-note .lnk { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.res-more { margin-top: 20px; }
.res-more-l { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 4px; }
.res-more-l .btn { min-height: 44px; }

/* ronde 28: segmenten met uitleg (bedrijf-detail) */
.seg-li.seg-why { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.seg-li.seg-why .muted { font-size: 12px; text-align: right; }
.seg-chip i { width: 7px; height: 7px; border-radius: 99px; display: inline-block; margin-right: 6px; }

/* ronde 29: Wacht op jou-rij zoals ontwerp — balk · titel + grijze regel · Bekijk + Goedkeuren rechts naast elkaar */
.wait-list li.wl-row { display: grid !important; grid-template-columns: 4px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; }
.wait-list li.wl-row .bar { align-self: center; margin-top: 0; height: 32px; }
.wait-list li.wl-row .t b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wait-list li.wl-row .t > span { display: block; font-size: 12px; color: var(--fg-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wait-list li.wl-row .wl-ok { margin: 0; display: inline-flex; }
@media (max-width: 760px) {
  /* 390 volgens ontwerp: Bekijk rechts naast de titel, Goedkeuren eronder; beide 44px */
  .wait-list li.wl-row { grid-template-columns: 4px minmax(0, 1fr) auto; row-gap: 10px; padding: 12px 16px; }
  .wait-list li.wl-row .bar { grid-row: 1 / span 2; align-self: stretch; height: auto; }
  .wait-list li.wl-row .wl-ok { grid-column: 2 / 3; justify-self: start; }
  .wait-list li.wl-row .btn { min-height: 44px; }
  .wait-list li.wl-row .t b, .wait-list li.wl-row .t > span { white-space: normal; }
}