/* ============================================================
   TravelAppBuilder — B2C-builder · dark/olijf zoals de hoofdsite,
   minimalistisch: één kolom, één actie per scherm, geen afleiding.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  color-scheme: dark;
  --bl-bg: #101014;
  --bl-surface: #1a1a20;
  --bl-surface-2: #22222b;
  --bl-line: #26262e;
  --bl-line-2: #2e2e38;
  --bl-text: #f2f2f5;
  --bl-dim: #9a9aa5;
  --bl-accent: #a3b763;
  --bl-accent-soft: rgba(163, 183, 99, .13);
  --bl-btn: #879a4c;
  --bl-red: #f87171;
  --bl-red-soft: rgba(248, 113, 113, .12);
}

body.b2c-builder {
  background: var(--bl-bg);
  color: var(--bl-text);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.b2c-builder a { color: var(--bl-accent); text-decoration: none; }
.b2c-builder :focus-visible { outline: 3px solid var(--bl-accent); outline-offset: 2px; border-radius: 6px; }

/* ── Kop: klein logo + voortgang ─────────────────────────── */
.bl-top { padding: 18px 20px 0; display: flex; justify-content: center; }
/* uniforme wordmark (card-y8jwx4b): icoon 32px · "Travelapp Builder" 23px/800 */
.bl-logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 23px; color: var(--bl-text); }
.bl-logo img { width: 32px; border-radius: 8px; }
.bl-logo span { color: var(--bl-accent); }

.bl-progress { max-width: 560px; margin: 22px auto 0; padding: 0 20px; width: 100%; }
.bl-progress .bar { height: 6px; border-radius: 999px; background: var(--bl-surface-2); overflow: hidden; }
.bl-progress .bar i { display: block; height: 100%; border-radius: 999px; background: var(--bl-accent); transition: width .4s ease; }
.bl-progress .meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--bl-dim); }
.bl-progress .meta b { color: var(--bl-accent); }

/* ── Stapkaart ───────────────────────────────────────────── */
main.bl-main { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 22px 20px 60px; }
.bl-card {
  background: var(--bl-surface); border: 1px solid var(--bl-line); border-radius: 20px;
  padding: 28px 22px;
}
@media (min-width: 640px) { .bl-card { padding: 34px 32px; } }
.bl-card h1 { font-size: clamp(22px, 4.5vw, 26px); line-height: 1.2; letter-spacing: -.015em; margin-bottom: 10px; }
.bl-card p.intro { color: var(--bl-dim); font-size: 15px; margin-bottom: 22px; }
.bl-card .hint { color: var(--bl-dim); font-size: 13px; margin-top: 14px; }
.bl-emoji { font-size: 38px; margin-bottom: 12px; display: block; }

/* ── Formulieren ─────────────────────────────────────────── */
.bl-field { margin-bottom: 16px; }
.bl-field label { display: block; font-size: 13.5px; font-weight: 800; margin-bottom: 6px; }
.bl-field .opt { color: var(--bl-dim); font-weight: 600; font-size: 12px; }
.bl-field input[type=text], .bl-field input[type=email], .bl-field input[type=password], .bl-field select {
  width: 100%; background: var(--bl-bg); border: 1.5px solid var(--bl-line-2); border-radius: 12px;
  padding: 13px 14px; font: inherit; font-size: 15px; color: var(--bl-text);
}
.bl-field input:focus, .bl-field select:focus { border-color: var(--bl-accent); outline: none; }
.bl-grid2 { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 560px) { .bl-grid2 { grid-template-columns: 1fr 1fr; } }

.bl-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.bl-chips label {
  display: flex; align-items: center; gap: 7px; background: var(--bl-bg);
  border: 1.5px solid var(--bl-line-2); border-radius: 999px; padding: 10px 16px;
  cursor: pointer; font-size: 14px; font-weight: 700; color: var(--bl-text);
}
.bl-chips input { position: absolute; opacity: 0; pointer-events: none; }
.bl-chips label:has(input:checked) { border-color: var(--bl-accent); background: var(--bl-accent-soft); color: var(--bl-accent); }
.bl-chips label:has(input:focus-visible) { outline: 3px solid var(--bl-accent); outline-offset: 2px; }

/* ── Knoppen ─────────────────────────────────────────────── */
.bl-btn {
  display: inline-block; width: 100%; text-align: center;
  background: var(--bl-btn); color: #101014; border: none; border-radius: 14px;
  padding: 16px 24px; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.bl-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.bl-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.bl-btn--ghost { background: var(--bl-surface-2); color: var(--bl-accent); border: 1px solid var(--bl-line-2); }
.bl-btn--ghost:hover { filter: brightness(1.15); }
.bl-actions { display: grid; gap: 10px; margin-top: 22px; }
.bl-back { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--bl-dim); }
.bl-back:hover { color: var(--bl-text); }
button.bl-back { background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; }

/* ── Meldingen ───────────────────────────────────────────── */
.bl-error {
  background: var(--bl-red-soft); color: var(--bl-red); border-radius: 12px;
  padding: 12px 15px; font-size: 14px; font-weight: 600; margin-bottom: 16px;
}
.bl-ok {
  background: var(--bl-accent-soft); color: var(--bl-accent); border-radius: 12px;
  padding: 12px 15px; font-size: 14px; font-weight: 600; margin-bottom: 16px;
}

/* ── Upload (stap documenten) ────────────────────────────── */
.bl-drop {
  border: 2px dashed var(--bl-line-2); border-radius: 18px; background: var(--bl-bg);
  padding: 34px 20px; text-align: center; cursor: pointer; display: block;
  transition: border-color .15s ease, background .15s ease;
}
.bl-drop.is-drag { border-color: var(--bl-accent); background: var(--bl-accent-soft); }
.bl-drop .ic { font-size: 34px; display: block; margin-bottom: 8px; }
.bl-drop b { font-size: 15.5px; }
.bl-drop p { color: var(--bl-dim); font-size: 13px; margin-top: 5px; }
.bl-drop input[type=file] { display: none; }
.bl-drop-fallback { margin-top: 12px; color: var(--bl-dim); font-size: 13px; }

.bl-files { list-style: none; margin-top: 14px; display: grid; gap: 8px; }
.bl-file {
  display: flex; align-items: center; gap: 11px;
  background: var(--bl-bg); border: 1px solid var(--bl-line); border-radius: 13px; padding: 10px 13px;
  font-size: 13.5px;
}
.bl-file .ext {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  background: var(--bl-accent-soft); color: var(--bl-accent);
  display: grid; place-items: center; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
}
.bl-file .nm { flex: 1; min-width: 0; }
.bl-file .nm b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.bl-file .nm span { color: var(--bl-dim); font-size: 12px; }
.bl-file button {
  background: none; border: none; cursor: pointer; font-size: 17px; color: var(--bl-dim);
  padding: 4px 6px; border-radius: 8px; line-height: 1;
}
.bl-file button:hover { color: var(--bl-red); background: var(--bl-red-soft); }

.bl-upload-progress { margin-top: 16px; display: none; }
.bl-upload-progress.on { display: block; }
.bl-upload-progress .bar { height: 8px; border-radius: 999px; background: var(--bl-surface-2); overflow: hidden; }
.bl-upload-progress .bar i { display: block; height: 100%; background: var(--bl-accent); width: 0; transition: width .2s ease; }
.bl-upload-progress p { font-size: 13px; color: var(--bl-dim); margin-top: 7px; font-weight: 600; }

/* ── Analyse (voortgangsflow) ────────────────────────────── */
.bl-stages { list-style: none; display: grid; gap: 4px; margin-top: 20px; }
.bl-stage { display: flex; align-items: center; gap: 13px; padding: 11px 4px; font-size: 15px; font-weight: 700; color: var(--bl-dim); }
.bl-stage .dot {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--bl-line-2); display: grid; place-items: center;
  font-size: 13px; font-weight: 800; background: var(--bl-bg); color: var(--bl-dim);
}
.bl-stage.done { color: var(--bl-text); }
.bl-stage.done .dot { background: var(--bl-accent); border-color: var(--bl-accent); color: #101014; }
.bl-stage.busy { color: var(--bl-accent); }
.bl-stage.busy .dot { border-color: var(--bl-accent); position: relative; }
.bl-stage.busy .dot::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  border: 2.5px solid var(--bl-accent); border-top-color: transparent;
  animation: blSpin .8s linear infinite;
}
@keyframes blSpin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .bl-stage.busy .dot::after { animation-duration: 2.4s; } }
.bl-reassure { margin-top: 18px; color: var(--bl-dim); font-size: 13.5px; min-height: 1.5em; }

/* ── Controle (herkende gegevens) ────────────────────────── */
.bl-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.bl-fact { background: var(--bl-bg); border: 1px solid var(--bl-line); border-radius: 13px; padding: 11px 13px; }
.bl-fact small { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--bl-dim); }
.bl-fact b { font-size: 14.5px; }
.bl-days { display: grid; gap: 8px; margin: 6px 0 18px; }
.bl-day { display: flex; gap: 11px; background: var(--bl-bg); border: 1px solid var(--bl-line); border-radius: 13px; padding: 11px 13px; }
.bl-day .em { font-size: 19px; }
.bl-day small { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--bl-dim); }
.bl-day b { font-size: 14px; }
.bl-day span.stay { display: block; color: var(--bl-dim); font-size: 12.5px; margin-top: 2px; }

/* ── Resultaat ───────────────────────────────────────────── */
.bl-result-frame {
  width: min(280px, 74vw); margin: 20px auto; border-radius: 36px;
  background: #000; border: 1px solid #33333d; padding: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.bl-result-frame iframe {
  display: block; width: 100%; aspect-ratio: 9 / 17.5; border: none; border-radius: 27px; background: var(--bl-bg);
}
.bl-qr { display: flex; gap: 16px; align-items: center; background: var(--bl-bg); border: 1px solid var(--bl-line); border-radius: 16px; padding: 14px; margin-top: 16px; }
.bl-qr img { width: 116px; height: 116px; border-radius: 10px; flex-shrink: 0; }
.bl-qr p { font-size: 13px; color: var(--bl-dim); }
.bl-qr--big { flex-direction: column; text-align: center; padding: 20px; }
.bl-qr--big img { width: 180px; height: 180px; }
.bl-paydesk { border: 1px solid var(--bl-line); border-radius: 16px; background: var(--bl-bg); padding: 16px; margin-top: 18px; }
.bl-paydesk .lbl { font-weight: 800; font-size: 14px; margin-bottom: 10px; }
.bl-payplans { display: grid; gap: 8px; }
.bl-payplan { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--bl-line); border-radius: 12px; padding: 11px 13px; cursor: pointer; }
.bl-payplan:has(input:checked) { border-color: var(--bl-accent); background: rgba(163, 183, 99, .07); }
.bl-payplan input { margin-top: 3px; accent-color: var(--bl-accent); }
.bl-payplan span { font-size: 14px; line-height: 1.4; }
.bl-payplan em { display: block; font-style: normal; color: var(--bl-accent); font-weight: 800; }
.bl-unlock { border: 1px solid var(--bl-accent); border-radius: 16px; background: rgba(163, 183, 99, .06); padding: 16px; margin: 14px 0 16px; }
.bl-install { margin-top: 16px; }
.bl-install details { border: 1px solid var(--bl-line); border-radius: 13px; background: var(--bl-bg); margin-bottom: 8px; }
.bl-install summary { cursor: pointer; padding: 12px 15px; font-weight: 800; font-size: 14px; list-style: none; display: flex; gap: 9px; align-items: center; }
.bl-install summary::-webkit-details-marker { display: none; }
.bl-install .a { padding: 0 15px 13px; font-size: 13.5px; color: var(--bl-dim); }
.bl-linkrow { display: flex; gap: 8px; margin-top: 14px; }
.bl-linkrow input { flex: 1; min-width: 0; background: var(--bl-bg); border: 1.5px solid var(--bl-line-2); border-radius: 12px; padding: 11px 13px; font: inherit; font-size: 13px; color: var(--bl-dim); }
.bl-linkrow button { flex-shrink: 0; width: auto; padding: 11px 16px; font-size: 14px; }

/* ── Voet ────────────────────────────────────────────────── */
.bl-foot { text-align: center; padding: 0 20px 26px; color: var(--bl-dim); font-size: 12.5px; }
.bl-foot a { color: var(--bl-dim); text-decoration: underline; }

/* ── Uploadpagina: badges ────────────────────────────────── */
.bl-badges { list-style: none; display: grid; gap: 6px; margin-bottom: 18px; }
.bl-badges li { color: var(--bl-dim); font-size: 13.5px; font-weight: 600; }

/* ── Algemene extra elementen ────────────────────────────── */
.bl-linkbtn { background: none; border: none; cursor: pointer; font: inherit; font-size: 14px;
  font-weight: 700; color: var(--bl-dim); text-decoration: underline; }
.bl-linkbtn:hover { color: var(--bl-text); }
.bl-field textarea { width: 100%; background: var(--bl-bg); border: 1.5px solid var(--bl-line-2);
  border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 14px; color: var(--bl-text); resize: vertical; }
.bl-field textarea:focus { border-color: var(--bl-accent); outline: none; }
.bl-field input[type=date], .bl-field input[type=file] { width: 100%; background: var(--bl-bg);
  border: 1.5px solid var(--bl-line-2); border-radius: 12px; padding: 11px 14px; font: inherit;
  font-size: 14px; color: var(--bl-text); }
label.chk { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; font-weight: 600;
  cursor: pointer; margin: 6px 0; }
label.chk input { width: 17px; height: 17px; accent-color: var(--bl-accent); margin-top: 2px; }
/* Niet van toepassing voor deze reis (bv. valuta in een euroland): tonen dat het bestaat,
   maar grijs en niet bedienbaar. Zelfde principe als in de app-instellingen. */
label.chk--off { cursor: default; opacity: .5; }
label.chk--off input { pointer-events: none; }
.bl-checks-inline { display: grid; gap: 2px; }
.dim { color: var(--bl-dim); }
.bl-actions--row { display: flex; flex-wrap: wrap; gap: 10px; }
.bl-actions--row .bl-btn { width: auto; flex: 1; min-width: 180px; }
.bl-btn--mini { width: auto; padding: 9px 14px; font-size: 13.5px; border-radius: 10px; }
.bl-btn--danger { background: var(--bl-red-soft); color: var(--bl-red); border: 1px solid rgba(248,113,113,.3); }
.bl-btn--danger:hover { filter: none; background: rgba(248,113,113,.2); }
.bl-rowbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }

/* ── Preview (stap 5) ────────────────────────────────────── */
.bl-preview { display: grid; gap: 12px; margin: 6px 0 4px; }
.bl-cover { border-radius: 18px; padding: 26px 20px;
  background: linear-gradient(140deg, rgba(163,183,99,.35), var(--bl-surface-2) 70%);
  border: 1px solid var(--bl-line-2); }
.bl-cover small { text-transform: uppercase; letter-spacing: .08em; font-weight: 800; font-size: 10.5px; color: var(--bl-accent); }
.bl-cover .t { font-size: 23px; font-weight: 800; letter-spacing: -.015em; margin: 4px 0 10px; }
.bl-cover .chips, .bl-pweer .chips { display: flex; flex-wrap: wrap; gap: 7px; }
.bl-cover .chips span, .bl-pweer .chips span { background: rgba(16,16,20,.5); border: 1px solid var(--bl-line-2);
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; }
.bl-pday, .bl-pweer, .bl-ptip { background: var(--bl-bg); border: 1px solid var(--bl-line);
  border-radius: 16px; padding: 16px; }
.bl-pday .lbl, .bl-pweer .lbl, .bl-ptip .lbl, .bl-locked-days .lbl {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--bl-accent); margin-bottom: 8px; }
.bl-pday h2 { font-size: 17px; margin-bottom: 8px; }
.bl-pday .story, .bl-readonly .story { color: var(--bl-dim); font-size: 14px; line-height: 1.65; }
.bl-pday .story a, .bl-readonly .story a { color: var(--bl-accent); }
.bl-pday .stay, .bl-readonly .stay { margin-top: 10px; font-size: 13.5px; font-weight: 700; }
.bl-ptip p { color: var(--bl-dim); font-size: 13.5px; margin-top: 4px; }
.bl-locked-days { background: var(--bl-bg); border: 1px dashed var(--bl-line-2); border-radius: 16px; padding: 16px; }
.bl-locked-days .row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--bl-line); font-size: 14px; font-weight: 700; color: var(--bl-dim); }
.bl-locked-days .row:last-child { border-bottom: none; }
.bl-locked-feats { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-locked-feats span { background: var(--bl-bg); border: 1px dashed var(--bl-line-2); border-radius: 999px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 700; color: var(--bl-dim); }

/* ── Formulekaarten (stap 6) ─────────────────────────────── */
.bl-card--wide { max-width: none; }
main.bl-main:has(.bl-card--wide) { max-width: 980px; }
.bl-plans { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 8px 0 16px; }
@media (min-width: 860px) { .bl-plans { grid-template-columns: repeat(3, 1fr); } }
/* 2-tier-variant (b2cPricingColumns): twee gelijke kolommen, stapelt smal */
@media (min-width: 660px) { .bl-plans.bl-plans--2 { grid-template-columns: repeat(2, 1fr); } }
/* Eerste-login-keuzescherm (card-cm7j6is): twee grote keuzekaarten */
.bl-choice { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 8px 0 18px; }
@media (min-width: 860px) { .bl-choice { grid-template-columns: repeat(2, 1fr); } }
.bl-choice .bl-plan h2 { font-size: 17px; margin-bottom: 4px; }
.bl-choice form { margin-top: auto; }
.bl-plan { position: relative; background: var(--bl-bg); border: 1px solid var(--bl-line-2);
  border-radius: 18px; padding: 22px 20px; display: flex; flex-direction: column; }
.bl-plan.hl { border-color: var(--bl-accent); box-shadow: 0 0 0 1px var(--bl-accent); }
.bl-plan .tag { position: absolute; top: -11px; left: 18px; background: var(--bl-accent); color: #101014;
  border-radius: 999px; padding: 3px 12px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.bl-plan h2 { font-size: 18px; }
.bl-plan .prijs { color: var(--bl-accent); font-weight: 800; font-size: 16px; margin: 2px 0 6px; }
.bl-plan .pitch { color: var(--bl-dim); font-size: 13.5px; margin-bottom: 12px; }
.bl-plan ul { list-style: none; display: grid; gap: 6px; margin-bottom: 16px; flex: 1; }
.bl-plan li { font-size: 13px; color: var(--bl-dim); padding-left: 18px; position: relative; }
.bl-plan li::before { content: "✓"; position: absolute; left: 0; color: var(--bl-accent); font-weight: 800; }

/* ── Controlepaneel ──────────────────────────────────────── */
.bl-ptop { display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border-bottom: 1px solid var(--bl-line); background: var(--bl-surface); }
.bl-ptop .who { margin-left: auto; color: var(--bl-dim); font-size: 13.5px; font-weight: 700; }
.bl-tripswitch { display: flex; gap: 8px; flex-wrap: wrap; max-width: 860px; margin: 14px auto 0; padding: 0 20px; }
.bl-tripswitch a { background: var(--bl-surface); border: 1px solid var(--bl-line-2); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-weight: 700; color: var(--bl-dim); }
.bl-tripswitch a.on { border-color: var(--bl-accent); color: var(--bl-accent); }
.bl-nav { display: flex; gap: 6px; flex-wrap: wrap; max-width: 860px; margin: 16px auto 0; padding: 0 20px; }
.bl-nav a { background: var(--bl-surface); border: 1px solid var(--bl-line); border-radius: 11px;
  padding: 9px 13px; font-size: 13.5px; font-weight: 700; color: var(--bl-dim); }
.bl-nav a:hover { color: var(--bl-text); }
.bl-nav a.on { background: var(--bl-accent-soft); border-color: var(--bl-accent); color: var(--bl-accent); }
.bl-main--panel { max-width: 860px; }
.bl-facts--3 { grid-template-columns: 1fr 1fr; }
@media (min-width: 640px) { .bl-facts--3 { grid-template-columns: repeat(3, 1fr); } }
.bl-upgradebar { max-width: 860px; margin: 0 0 16px; background: rgba(163,183,99,.1);
  border: 1px solid var(--bl-accent); border-radius: 13px; padding: 12px 15px; font-size: 14px; color: var(--bl-dim); }
.bl-upgradebar b { color: var(--bl-text); }
.bl-upgradebar a { font-weight: 800; }
.bl-daybox { border: 1px solid var(--bl-line); border-radius: 14px; background: var(--bl-bg);
  margin-bottom: 10px; padding: 0 14px; }
.bl-daybox summary { cursor: pointer; padding: 13px 2px; font-weight: 800; font-size: 14.5px; }
.bl-daybox > form, .bl-daybox .bl-readonly { padding-bottom: 14px; }
.bl-extra { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--bl-surface); border: 1px solid var(--bl-line); border-radius: 11px;
  padding: 9px 12px; margin-bottom: 7px; font-size: 13.5px; flex-wrap: wrap; }
.bl-extra.off { opacity: .45; }
/* ── QR met TAB-logo (b2cQrImg, card-mvqw5di) ── */
.bl-qrwrap { position: relative; display: inline-block; flex-shrink: 0; }
.bl-qrwrap > img:first-child { display: block; width: 100% !important; height: 100% !important; border-radius: 10px; }
.bl-qrwrap .logo { position: absolute; inset: 0; margin: auto; border-radius: 20%;
  background: #1a1a20; padding: 3px; box-sizing: content-box;
  width: 24% !important; height: 24% !important; }

/* ── Mini-WYSIWYG in het CP (textarea[data-wysiwyg], zie builder.js) ──
   De werkbalk toont line-SVG-iconen (geen letters/emoji — icoonconventie). */
.cp-wys { border: 1px solid var(--bl-line); border-radius: 12px; overflow: hidden; background: var(--bl-bg); }
.cp-wysbar { display: flex; align-items: center; gap: 2px; padding: 5px 6px;
  border-bottom: 1px solid var(--bl-line); background: var(--bl-surface); }
.cp-wysbar button { display: grid; place-items: center; width: 30px; height: 28px; padding: 0;
  border: none; background: none; color: var(--bl-dim); border-radius: 7px; cursor: pointer; }
.cp-wysbar button:hover { background: var(--bl-bg); color: var(--bl-text); }
.cp-wysbar button:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: -2px; }
.cp-wysbar button svg { display: block; }
.cp-wyssep { width: 1px; height: 17px; margin: 0 5px; background: var(--bl-line-2); flex-shrink: 0; }
.cp-wysed { min-height: 110px; padding: 10px 13px; font-size: 14px; line-height: 1.6; outline: none; }
.cp-wysed--mini { min-height: 48px; }
/* Blocnote van de Notities-sectie: ruim schrijfvlak, zodat het als een notitieblok voelt. */
.cp-wysed--note { min-height: 300px; padding: 14px 16px; font-size: 14.5px; line-height: 1.7; }
.cp-wysed:focus { box-shadow: inset 0 0 0 1.5px var(--bl-accent); border-radius: 0 0 12px 12px; }
.cp-wysed a { color: var(--bl-accent); text-decoration: underline; }
.cp-wysed h4 { font-size: 15px; margin: 6px 0 2px; }
.cp-wysed ul, .cp-wysed ol { padding-left: 22px; margin: 4px 0; }
.cp-wysed:empty::before { content: attr(data-ph); color: var(--bl-dim); opacity: .65; }

/* Inline bewerken van een suggestie (card-cm7j6is): uitklapformulier onder de rij */
.bl-extraedit { flex-basis: 100%; }
.bl-extraedit summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--bl-accent); padding: 2px 0; }
.bl-extraedit form { margin-top: 8px; }
.bl-extra .bl-rowbtns { margin-top: 0; flex-shrink: 0; }
.bl-subform { border: 1px dashed var(--bl-line-2); border-radius: 12px; padding: 0 12px; margin: 10px 0; }
.bl-subform summary { cursor: pointer; padding: 11px 2px; font-weight: 700; font-size: 13.5px; color: var(--bl-accent); }
.bl-subform form { padding-bottom: 12px; }
.bl-inlineform { display: flex; gap: 8px; margin-top: 8px; }
.bl-inlineform input[type=text] { flex: 1; min-width: 0; background: var(--bl-bg);
  border: 1.5px solid var(--bl-line-2); border-radius: 11px; padding: 10px 13px; font: inherit;
  font-size: 14px; color: var(--bl-text); }
.bl-doclist { margin-top: 16px; display: grid; gap: 8px; }
.bl-docrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: var(--bl-bg); border: 1px solid var(--bl-line); border-radius: 12px; padding: 10px 12px; }
.bl-docrow .ext { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
  background: var(--bl-accent-soft); color: var(--bl-accent); display: grid; place-items: center;
  font-size: 10px; font-weight: 800; }
.bl-docrow form.grow { flex: 1; min-width: 240px; display: flex; gap: 8px; }
.bl-docrow form.grow input[type=text] { flex: 1.4; min-width: 0; background: var(--bl-surface);
  border: 1px solid var(--bl-line-2); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--bl-text); }
.bl-docrow form.grow select { flex: 1; min-width: 0; background: var(--bl-surface);
  border: 1px solid var(--bl-line-2); border-radius: 9px; padding: 8px; font: inherit; font-size: 12.5px; color: var(--bl-text); }
.bl-planfeats { list-style: none; display: grid; gap: 6px; }
.bl-planfeats li { font-size: 14px; color: var(--bl-dim); }
.bl-chipsrow { display: flex; flex-wrap: wrap; gap: 7px; }
.bl-chipsrow .chip { background: var(--bl-bg); border: 1px solid var(--bl-line-2); border-radius: 999px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 700; color: var(--bl-dim); }
.bl-danger { margin-top: 24px; border: 1px solid rgba(248,113,113,.3); border-radius: 14px; padding: 14px 16px; }

/* ════════════════════════════════════════════════════════════
   Lena-builder (lb-) — 3 kolommen op desktop, stepper op tablet,
   single column + bottom sheets + previewoverlay op mobiel.
   ════════════════════════════════════════════════════════════ */

body.lb { display: block; }

/* ── Bovenbalk (mobiel + tablet) ─────────────────────────── */
.lb-topbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--bl-line); background: var(--bl-surface);
  position: sticky; top: 0; z-index: 30; }
.lb-topbtns { margin-left: auto; display: flex; gap: 8px; }
.lb-iconbtn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--bl-line-2);
  background: var(--bl-bg); color: var(--bl-text); font-size: 16px; cursor: pointer;
  display: grid; place-items: center; text-decoration: none; }
.lb-iconbtn:hover { border-color: var(--bl-accent); }

/* ── Stepper (mobiel + tablet) ───────────────────────────── */
.lb-stepper { max-width: 680px; margin: 14px auto 0; padding: 0 18px; }
.lb-stepline { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lb-stepline b { font-size: 14.5px; }
.lb-linklike { background: none; border: none; cursor: pointer; font: inherit; font-size: 12.5px;
  font-weight: 700; color: var(--bl-accent); padding: 0; }
.lb-segs { display: flex; gap: 5px; margin-top: 9px; }
.lb-segs i { flex: 1; height: 5px; border-radius: 999px; background: var(--bl-surface-2); }
.lb-segs i.done { background: var(--bl-accent); opacity: .55; }
.lb-segs i.on { background: var(--bl-accent); }
.lb-stephint { color: var(--bl-dim); font-size: 12.5px; margin-top: 8px; }
.lb-ctxline { display: block; width: 100%; text-align: left; background: var(--bl-surface);
  border: 1px solid var(--bl-line); border-radius: 11px; padding: 9px 12px; margin-top: 10px;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--bl-dim); cursor: pointer; }
.lb-ctxline:hover { border-color: var(--bl-accent); }

/* ── Shell ───────────────────────────────────────────────── */
.lb-shell { display: block; }
.lb-rail, .lb-right { display: none; }
.lb-convo { max-width: 680px; margin: 0 auto; padding: 18px 18px 90px; }

/* ── Lena-gesprek ────────────────────────────────────────── */
.lb-msg { display: flex; gap: 11px; align-items: flex-start; margin: 16px 0 14px; }
.lb-ava { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(140deg, var(--bl-accent), #6b7f3a); display: grid; place-items: center;
  font-size: 19px; box-shadow: 0 4px 12px rgba(163, 183, 99, .3); }
.lb-bubble { background: var(--bl-surface); border: 1px solid var(--bl-line);
  border-radius: 4px 18px 18px 18px; padding: 14px 16px; font-size: 14.5px; line-height: 1.6;
  color: var(--bl-dim); max-width: 560px; }
.lb-bubble b { color: var(--bl-text); }
.lb-bubble a { color: var(--bl-accent); }
.lb-done { display: flex; justify-content: space-between; gap: 10px; align-items: center;
  background: var(--bl-surface); border: 1px solid var(--bl-line); border-radius: 11px;
  padding: 8px 13px; margin: 6px 0 6px 49px; font-size: 12.5px; color: var(--bl-dim); }
.lb-done b { color: var(--bl-accent); font-size: 13px; }
.lb-help { color: var(--bl-dim); font-size: 12.5px; }
.lb-answer { margin-left: 0; }
@media (min-width: 560px) { .lb-answer { margin-left: 49px; } .lb-done { margin-left: 49px; } }

.lb-privacycard { background: var(--bl-accent-soft); border: 1px solid rgba(163, 183, 99, .35);
  border-radius: 13px; padding: 13px 15px; margin-top: 14px; font-size: 13px; }
.lb-privacycard b { display: block; margin-bottom: 4px; font-size: 13.5px; }
.lb-privacycard p { color: var(--bl-dim); line-height: 1.55; }
.lb-privacycard a { font-weight: 700; }

/* ── Actiebalk: sticky onderaan op mobiel ────────────────── */
/* Instemming onmiddellijke levering — verplicht vóór de betaalknop (WER VI.53, 13°). */
.lb-consent { display:flex; gap:10px; align-items:flex-start; margin:6px 0 10px;
  font-size:13.5px; line-height:1.45; color:var(--bl-dim); cursor:pointer; }
.lb-consent input { flex:none; width:18px; height:18px; margin-top:1px; accent-color:var(--bl-accent); }
.lb-actionbar { margin-top: 20px; display: grid; gap: 10px; }
/* groene (accent)knoppen krijgen ALTIJD donkere tekst — de generieke a-kleurregel
   (.b2c-builder a) maakte linkknoppen anders groen-op-groen */
.b2c-builder a.bl-btn { color: #101014; }
.b2c-builder a.bl-btn--ghost, .b2c-builder a.bl-btn.bl-btn--ghost { color: var(--bl-accent); }
.lb-actionbar--duo { grid-template-columns: 1fr 1fr; }
@media (max-width: 767px) {
  .lb-actionbar { position: sticky; bottom: 0; z-index: 10; padding: 12px 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--bl-bg) 65%, transparent); }
}

/* ── Previewknop in het gesprek (mobiel/tablet) ──────────── */
.lb-previewbtn { display: block; width: 100%; margin-top: 18px; background: var(--bl-surface);
  border: 1.5px dashed var(--bl-line-2); border-radius: 13px; padding: 13px; font: inherit;
  font-size: 14px; font-weight: 800; color: var(--bl-accent); cursor: pointer; }
.lb-previewbtn:hover { border-color: var(--bl-accent); }

/* ── Previewtelefoon ─────────────────────────────────────── */
.lb-phone { width: min(300px, 82vw); margin: 0 auto; border-radius: 34px; border: 1px solid #33333d;
  background: #000; padding: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
/* Mockup-variant (16/7/2026): previewPhone rendert exact het .tabmock-ontwerp uit
   mock.css — het telefoonkader komt dan uit .tabmock .phone, niet uit .lb-phone. */
.lb-phone--mock { width: auto; border: none; background: none; padding: 0; box-shadow: none;
  border-radius: 0; display: flex; justify-content: center; }
.lb-phone--mock .lb-screen { border: none; }
.lb-phone--mock .lb-screen-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.lb-phone--mock .tabmock { --s: 1; }
@media (max-width: 400px) { .lb-phone--mock .tabmock { --s: .84; } }
/* de preview heeft twee sbody's (Vandaag + Planning/voorproef): [hidden] wint van
   mock.css' display:flex, anders delen ze de hoogte */
.tabmock .sbody[hidden] { display: none; }
/* reistype/gezelschap-chips in de apphead volgen de antwoorden live (JS: data-pchips) */
.tabmock [data-pchips] { display: flex; gap: 5px; flex-wrap: wrap; }
.tabmock [data-pchips] .chip { margin-top: 6px; }
.tabmock [data-pchips] span[hidden], .tabmock .lb-apptabs span[hidden] { display: none; }
.lb-screen { border-radius: 25px; overflow: hidden; background: #14141a; border: 1px solid var(--bl-line);
  font-size: 12px; line-height: 1.45; position: relative; }
.lb-apphead { padding: 26px 15px 13px; background: linear-gradient(150deg, #5f7029, #7c8f3e); color: #fff; }
.lb-apphead small { opacity: .85; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 9px; }
.lb-apphead .t { font-size: 16px; font-weight: 800; margin-top: 2px; }
.lb-apphead .chips { display: flex; gap: 5px; margin-top: 9px; flex-wrap: wrap; }
.lb-apphead .chips span { background: rgba(255, 255, 255, .18); border-radius: 999px; padding: 3px 9px;
  font-size: 9.5px; font-weight: 700; }
.lb-appbody { padding: 11px; display: grid; gap: 8px; min-height: 150px; }
.lb-appcard { background: var(--bl-surface); border: 1px solid var(--bl-line); border-radius: 13px; padding: 10px 12px; }
.lb-appcard .lbl { font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--bl-dim); }
.lb-appcard .row { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-weight: 700; font-size: 12px; color: var(--bl-text); }
.lb-appcard .row .em { font-size: 15px; }
.lb-appcard .sub { color: var(--bl-dim); margin-top: 2px; font-size: 11px; }
/* nowrap: sinds Alex een eigen tab heeft passen er meer tabs dan er in beeld staan.
   De echte app laat de balk dan horizontaal scrollen (style.css .tabbar), dus wrappen
   naar een tweede rij zou een ontwerp tonen dat niet bestaat. */
.lb-apptabs { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 2px 0;
  border-top: 1px solid var(--bl-line); padding: 7px 4px 11px; background: var(--bl-surface);
  font-size: 8px; font-weight: 700; color: var(--bl-dim); text-align: center; }
.lb-apptabs span { min-width: 44px; }
.lb-apptabs span[hidden] { display: none; }
.lb-apptabs b { display: block; font-size: 14px; margin-bottom: 1px; }
.lb-apptabs .on { color: var(--bl-accent); }
.lb-appframe { display: block; width: 100%; aspect-ratio: 9 / 17; border: none; border-radius: 25px; background: var(--bl-bg); }

/* ── Rechterrail ─────────────────────────────────────────── */
.lb-previewhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  text-align: center; gap: 6px 12px; margin-bottom: 12px; }
.lb-previewhead b { font-size: 14.5px; }
.lb-previewhead .dim { font-size: 11.5px; }
.lb-previewnote { color: var(--bl-dim); font-size: 12px; text-align: center; margin-top: 12px; }

/* ── Linkerrail ──────────────────────────────────────────── */
.lb-brand { padding-bottom: 14px; border-bottom: 1px solid var(--bl-line); }
.lb-brandsub { display: block; color: var(--bl-dim); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; margin: 6px 0 10px 38px; }
.lb-status { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.lb-status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bl-accent);
  box-shadow: 0 0 8px rgba(163, 183, 99, .8); }
.lb-saved { color: var(--bl-dim); font-size: 11.5px; font-weight: 700; margin-top: 5px; }
.lb-phases { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--bl-line); }
.lb-phase { display: flex; gap: 10px; align-items: flex-start; padding: 8px 8px; border-radius: 10px;
  font-size: 13px; font-weight: 700; color: var(--bl-dim); text-decoration: none; }
a.lb-phase:hover { background: var(--bl-surface-2); color: var(--bl-text); }
.lb-phase .n { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--bl-line-2);
  display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.lb-phase.done { color: var(--bl-text); }
.lb-phase.done .n { background: var(--bl-accent); border-color: var(--bl-accent); color: #101014; }
.lb-phase.on { background: var(--bl-accent-soft); color: var(--bl-accent); }
.lb-phase.on .n { border-color: var(--bl-accent); color: var(--bl-accent); }
.lb-phase.todo { opacity: .55; }
.lb-phase .t small { display: block; font-weight: 600; font-size: 11px; color: var(--bl-dim); margin-top: 2px; }
.lb-ctxcard { padding: 14px 4px; border-bottom: 1px solid var(--bl-line); }
.lb-ctxcard h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--bl-dim); margin-bottom: 7px; }
.lb-ctxcard b { font-size: 13.5px; }
.lb-ctxcard p { color: var(--bl-dim); font-size: 12.5px; line-height: 1.55; margin-top: 3px; }
.lb-privacy { padding: 14px 4px 6px; font-size: 12px; }
.lb-privacy b { display: block; font-size: 12.5px; margin-bottom: 4px; }
.lb-privacy p { color: var(--bl-dim); line-height: 1.55; }
.lb-privacy a { font-weight: 700; font-size: 12px; }

/* ── Bottom sheets & overlay (dialog) ────────────────────── */
.lb-sheet, .lb-overlay { border: none; padding: 0; background: var(--bl-surface); color: var(--bl-text); }
.lb-sheet::backdrop, .lb-overlay::backdrop { background: rgba(10, 10, 14, .6); backdrop-filter: blur(2px); }
.lb-sheet { width: min(560px, 100vw); max-height: 80dvh; overflow-y: auto;
  border-radius: 20px 20px 0 0; border: 1px solid var(--bl-line);
  margin: auto auto 0; padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .lb-sheet { border-radius: 18px; margin: auto; } }
.lb-sheethead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.lb-sheethead b { font-size: 15.5px; }
.lb-ctxrow { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px;
  border-bottom: 1px solid var(--bl-line); font-size: 13.5px; }
.lb-ctxrow:last-child { border-bottom: none; }
.lb-ctxrow small { color: var(--bl-dim); font-weight: 700; }
.lb-overlay { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; background: var(--bl-bg); }
.lb-overlayhead { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--bl-line); background: var(--bl-surface); position: sticky; top: 0; }
.lb-overlayhead b { color: var(--bl-accent); font-size: 13px; }
.lb-overlayhead .dim { font-size: 13px; }
.lb-overlaybody { padding: 22px 16px calc(30px + env(safe-area-inset-bottom)); overflow-y: auto;
  height: calc(100dvh - 62px); }
.lb-overlaybody .lb-phone { width: min(420px, 94vw); }
.lb-appframe--full { border-radius: 14px; aspect-ratio: auto; height: 100%; min-height: 70dvh; }

/* ── Tablet (≥768) ───────────────────────────────────────── */
@media (min-width: 768px) {
  .lb-stepper { max-width: 640px; }
  .lb-convo { padding-bottom: 40px; }
}

/* ── Desktop (≥1200): full width, logobalk boven, 3 kolommen ─ */
@media (min-width: 1200px) {
  .lb-stepper, .lb-previewbtn { display: none; }
  .lb-topbar { padding: 13px 28px; }
  .lb-topbar .lb-topbtns { display: none; }
  /* kolommen stretchen mee (geen align-items:start!) zodat sticky binnenin werkt */
  .lb-shell { display: grid; grid-template-columns: 300px minmax(520px, 1fr) 460px;
    gap: 36px; max-width: none; margin: 0; padding: 28px 36px 48px; }
  .lb-rail, .lb-right { display: block; }
  /* fijne verticale scheidingslijnen tussen de drie kolommen */
  .lb-rail { border-right: 1px solid var(--bl-line); padding-right: 32px; }
  .lb-right { border-left: 1px solid var(--bl-line); padding-left: 36px; }
  .lb-rail .lb-sticky, .lb-right .lb-sticky { position: sticky; top: 92px; }
  .lb-convo { max-width: 780px; margin: 0 auto; padding: 0 0 40px; width: 100%; }
}
@media (min-width: 1200px) and (max-width: 1420px) {
  .lb-shell { grid-template-columns: 260px minmax(500px, 1fr) 430px; gap: 24px; padding: 24px 24px 40px; }
  .lb-rail { padding-right: 22px; }
  .lb-right { padding-left: 24px; }
}

/* ── Controlestap: bewerkbare dagplanning ────────────────── */
.bl-dayedit { display: flex; flex-direction: column; gap: 10px; }
/* Dag-widget met lichtgrijze achtergrond (zoals de previewkaarten) */
.bl-day { display: flex; align-items: center; gap: 10px; background: var(--bl-surface-2);
  border: 1px solid var(--bl-line-2); border-radius: 14px; padding: 11px 12px;
  transition: border-color .15s ease, background .15s ease; }
.bl-day:hover { border-color: var(--bl-line-2); background: var(--bl-surface); }
.bl-day.dragging { opacity: .55; border-color: var(--bl-accent); }
.bl-drag { flex-shrink: 0; color: var(--bl-dim); cursor: grab; font-size: 17px; line-height: 1;
  padding: 4px 2px; touch-action: none; user-select: none; }
.bl-drag:active { cursor: grabbing; }
/* Datumbadge: dag groot + maand eronder, afgeleid uit het datumveld */
.bl-daybadge { flex-shrink: 0; width: 48px; min-height: 52px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  background: var(--bl-accent-soft); border-radius: 12px; }
/* dubbele selector: wint van de generieke .bl-day b/small-typografie verderop */
.bl-day .bl-daybadge b { font-size: 20px; font-weight: 800; line-height: 1.05; color: var(--bl-text); }
.bl-day .bl-daybadge small { font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--bl-accent); }
.bl-day-in { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bl-daystay { background: none; border: none; color: var(--bl-text); font: inherit;
  font-size: 15px; font-weight: 700; padding: 1px 0; width: 100%; }
.bl-dayplace { background: none; border: none; color: var(--bl-dim); font: inherit;
  font-size: 13px; padding: 1px 0; width: 100%; }
.bl-daydate { background: none; border: none; color: var(--bl-dim); font: inherit;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 0; width: 100%; opacity: .85; }
.bl-daydate:focus, .bl-dayplace:focus, .bl-daystay:focus { outline: none; }
.bl-day:focus-within { border-color: var(--bl-accent); }
.bl-inh { display: block; font-size: 11px; color: var(--bl-dim); margin-top: 2px; }
.bl-day--inh .bl-daystay, .bl-day--inh .bl-dayplace { color: var(--bl-dim); }
.bl-day--inh .bl-daybadge { background: var(--bl-surface); }
.bl-day--inh .bl-daybadge b { color: var(--bl-dim); }
/* Hint bij de dagen → wijst naar de Roadmap-tab in de preview */
.bl-roadhint { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--bl-accent); }
.bl-roadhint .arrow { display: inline-block; font-size: 15px; animation: bl-arrow 1.1s ease-in-out infinite; }
@keyframes bl-arrow { 0%, 100% { transform: translateX(0); opacity: .7; } 50% { transform: translateX(6px); opacity: 1; } }
/* Opvallende RODE pijl die naar de Planning-tab wijst (tijdens de controlestap) */
.lb-planarrow { display: none; }
body[data-autotab="roadmap"] .lb-planarrow {
  display: block; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 44px; z-index: 6; color: #ff3b30;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
  animation: bl-planarrow 0.85s ease-in-out infinite; pointer-events: none; }
body[data-autotab="roadmap"] .lb-apptabs span[data-tabgo="roadmap"] { color: #ff3b30; }
@keyframes bl-planarrow {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(7px); } }
@media (prefers-reduced-motion: reduce) {
  .bl-roadhint .arrow, body[data-autotab="roadmap"] .lb-planarrow { animation: none; } }

.bl-dayrm { flex-shrink: 0; background: none; border: none; cursor: pointer; color: var(--bl-dim);
  font-size: 16px; width: 30px; height: 30px; border-radius: 8px; line-height: 1; }
.bl-dayrm:hover { color: var(--bl-red); background: var(--bl-red-soft); }
.bl-addday { margin-top: 10px; background: none; border: 1.5px dashed var(--bl-line-2);
  border-radius: 12px; padding: 11px; width: 100%; color: var(--bl-accent); font: inherit;
  font-size: 14.5px; font-weight: 800; cursor: pointer; }
.bl-addday:hover { border-color: var(--bl-accent); }


/* ── Uploadstap: rustige tweede (privacy)bubbel + modal ──── */
/* .lb-msg heeft display:flex → het [hidden]-attribuut moet dat overrulen */
.lb-msg[hidden] { display: none !important; }
/* privacybubbel: zelfde stijl als de eerste chatbubbel (erft van .lb-bubble) */
/* uploadstap compact houden: minder ruimte rond de twee bubbels → uploadzone hoger op mobiel */
#uploadFlow .lb-msg { margin: 10px 0 8px; }
#uploadFlow .lb-msg .lb-bubble { padding: 13px 15px; }
#uploadFlow #uploadForm { margin-top: 6px; }
@media (max-width: 767px) {
  #uploadFlow .lb-bubble { font-size: 14px; line-height: 1.5; }
  #uploadFlow #dropZone { padding: 20px 16px; }
}
.lb-privlink { display: block; margin-top: 9px; background: none; border: none; padding: 0;
  cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--bl-accent);
  text-decoration: underline; text-align: left; }
.bl-drop-meta { color: var(--bl-dim); font-size: 12.5px; margin-top: 4px; }
.lb-uploadalt { text-align: center; margin-top: 12px; font-size: 12.5px; color: var(--bl-dim); }
.lb-devbadge { display: inline-block; margin-bottom: 12px; background: rgba(248, 113, 113, .12);
  color: var(--bl-red); border: 1px solid rgba(248, 113, 113, .3); border-radius: 8px;
  padding: 4px 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; }
/* modal: gecentreerd op het scherm (dialog::backdrop + margin auto) */
.lb-modal { position: fixed; inset: 0; margin: auto; border: 1px solid var(--bl-line-2); padding: 0;
  background: var(--bl-surface); color: var(--bl-text); width: min(440px, 92vw); height: max-content;
  max-height: 86vh; border-radius: 18px; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
.lb-modal::backdrop { background: rgba(10, 10, 14, .66); backdrop-filter: blur(3px); }
.lb-modalhead { display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; border-bottom: 1px solid var(--bl-line); }
.lb-modalhead b { font-size: 16.5px; }
.lb-modalbody { padding: 16px 18px 18px; font-size: 14px; line-height: 1.55; color: var(--bl-dim); }
.lb-modalbody ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lb-modalbody li { padding-left: 2px; }
.lb-modalfoot { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--bl-line); font-size: 13px; }
.lb-modalbody a { color: var(--bl-accent); font-weight: 700; }

/* ── Chatbalk onderaan + antwoordbubbels van de gebruiker ── */
form.lb-chat { display: flex; flex-direction: column; min-height: calc(100dvh - 188px); }
@media (min-width: 1200px) { form.lb-chat { min-height: calc(100dvh - 88px); } }
.lb-dock { position: sticky; bottom: 0; z-index: 12; margin-top: auto;
  padding: 18px 0 30px; padding-bottom: calc(30px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bl-bg) 72%, transparent); }
.lb-dock[hidden] { display: none; }
.lb-dock .lb-inline[hidden] { display: none; }
.lb-user { display: flex; justify-content: flex-end; margin: 4px 0 14px; }
.lb-user .bubble { background: var(--bl-accent-soft); border: 1px solid rgba(163, 183, 99, .4);
  color: var(--bl-text); border-radius: 18px 4px 18px 18px; padding: 12px 17px;
  font-size: 15.5px; font-weight: 700; max-width: 75%; overflow-wrap: break-word; }
/* de hoofdactie hoort boven de (lege) dock te eindigen, niet eronder te plakken */
form.lb-chat .lb-qa-final { margin-bottom: 6px; }

/* ── Landenkeuze: geselecteerde landen als chips ─────────── */
.lb-landchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.lb-landchips:empty { display: none; }
.lb-landchips .chip { display: inline-flex; align-items: center; gap: 7px;
  background: var(--bl-accent-soft); border: 1px solid rgba(163, 183, 99, .4); color: var(--bl-text);
  border-radius: 999px; padding: 7px 8px 7px 14px; font-size: 15px; font-weight: 700; }
.lb-landchips .chip button { background: rgba(255, 255, 255, .1); border: none; cursor: pointer;
  width: 20px; height: 20px; border-radius: 50%; color: var(--bl-dim); font-size: 15px; line-height: 1;
  display: grid; place-items: center; }
.lb-landchips .chip button:hover { background: rgba(248, 113, 113, .25); color: var(--bl-red); }
.lb-landhint { color: var(--bl-dim); font-size: 13px; margin-top: 8px; }
.lb-landklaar { width: auto; margin-top: 12px; padding: 12px 20px; font-size: 15px; }
.lb-landklaar[hidden] { display: none; }

/* ── Landenkeuze: type-ahead dropdown (opent naar boven) ─── */
.lb-inline.lb-ac { position: relative; }
.lb-aclist { position: absolute; bottom: calc(100% + 10px); left: 0; right: 0;
  list-style: none; margin: 0; padding: 6px;
  background: var(--bl-surface); border: 1px solid var(--bl-line-2); border-radius: 15px;
  box-shadow: 0 -14px 40px rgba(0, 0, 0, .45); max-height: 300px; overflow-y: auto; z-index: 40; }
.lb-aclist li { display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  border-radius: 10px; font-size: 15.5px; font-weight: 700; cursor: pointer; color: var(--bl-text); }
.lb-aclist li .vlag { font-size: 19px; }
.lb-aclist li:hover, .lb-aclist li.on { background: var(--bl-accent-soft); color: var(--bl-accent); }

.lb-apptabs span[data-tabgo] { cursor: pointer; }

/* ── Donkere scrollbar (pagina + sheets/overlay) ─────────── */
html { scrollbar-color: #2e2e38 #101014; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #101014; }
::-webkit-scrollbar-thumb { background: #2e2e38; border-radius: 999px; border: 3px solid #101014; }
::-webkit-scrollbar-thumb:hover { background: #3d3d4a; }
::-webkit-scrollbar-corner { background: #101014; }

/* ── Bovenbalk: logo identiek aan de homepage + accounticoon ─ */
.lb-brandlogo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.lb-brandlogo img { width: 40px; border-radius: 11px; }
.lb-wordmark { font-weight: 800; font-size: 23px; color: var(--bl-text); }
.lb-wordmark span { color: var(--bl-accent); }
.lb-beta { align-self: flex-start; margin: -2px 0 0 2px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .12em; color: var(--bl-accent); border: 1px solid var(--bl-accent);
  border-radius: 6px; padding: 1px 5px; }
@media (max-width: 720px) {
  .lb-brandlogo { gap: 8px; }
  .lb-brandlogo img { width: 30px; border-radius: 8px; }
  .lb-wordmark { font-size: 16px; }
  .lb-beta { display: none; }
}
.lb-account { margin-left: auto; display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--bl-line-2); border-radius: 999px; padding: 8px 16px 8px 10px;
  color: var(--bl-dim); font-size: 14px; font-weight: 700; text-decoration: none; }
.lb-account:hover { border-color: var(--bl-accent); color: var(--bl-text); }
.lb-account .ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--bl-surface-2); color: var(--bl-accent); }
@media (max-width: 560px) { .lb-account .nm { display: none; } .lb-account { padding: 8px 10px; } }
.lb-topbtns { margin-left: 0; }

/* ── Verzendknop: wit vliegtuigje (merk-icoon) ───────────── */
.lb-send { color: #fff !important; padding: 14px 20px; display: grid; place-items: center; }
.lb-send svg { display: block; }

/* ── Lena-avatar: illustratie (lena.svg) met online-stip ─── */
.lb-ava { width: 42px; height: 42px; background: none; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.lb-ava img { display: block; width: 100%; height: 100%; border-radius: 50%; }

/* ── Tekstbalans: links iets groter, chat iets rustiger ──── */
.lb-bubble { font-size: 16px; max-width: 600px; }
.bl-chips label { font-size: 15px; padding: 12px 18px; }
.bl-field input[type=text], .bl-field input[type=email], .bl-field input[type=password], .bl-field select,
.bl-field input[type=date], .bl-field textarea, .lb-inline input { font-size: 16px; padding: 14px 16px; }
.bl-btn { font-size: 16px; }
.lb-phase { font-size: 15.5px; padding: 10px 10px; }
.lb-phase .n { width: 27px; height: 27px; font-size: 12px; }
.lb-phase .t small { font-size: 13px; }
.lb-brandsub { font-size: 12px; margin-left: 0; }
.lb-status { font-size: 15px; }
.lb-saved { font-size: 12.5px; }
.lb-ctxcard h3 { font-size: 12px; }
.lb-ctxcard b { font-size: 15.5px; }
.lb-ctxcard p { font-size: 14px; }
.lb-privacy { font-size: 13.5px; }
.lb-privacy b { font-size: 14.5px; }
.lb-privacy p { font-size: 13.5px; }
.lb-privacy a { font-size: 13.5px; }

/* ── Chatvorm: één vraag per keer + typindicator ─────────── */
.lb-ava { position: relative; }
.lb-ava .on { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px;
  border-radius: 50%; background: #4ade80; border: 2.5px solid var(--bl-bg); }
.lb-qa-in { margin: 4px 0 18px 56px; }
@media (max-width: 559px) { .lb-qa-in { margin-left: 0; } }
.lb-chat .lb-qa[hidden], .lb-chat .lb-qa-final[hidden] { display: none; }
.lb-chat .lb-qa.answered { opacity: .72; }
.lb-inline { display: flex; gap: 10px; }
.lb-inline input { flex: 1; min-width: 0; }
.lb-ok { width: auto; padding: 13px 22px; flex-shrink: 0; }
/* Postcode-rij: groot, prominent invoerveld + compacte "Zoek"-knop */
.lb-inline--postcode { align-items: stretch; }
.lb-inline--postcode input { font-size: 22px; font-weight: 800; letter-spacing: .5px;
  padding: 18px 20px; border-radius: 16px; }
.lb-inline--postcode .lb-ok { align-self: stretch; padding: 0 20px; font-size: 15px; }
.lb-typing { display: inline-flex; gap: 6px; align-items: center; padding: 19px 20px; }
.lb-typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--bl-dim);
  animation: lbTyping 1.1s ease-in-out infinite; }
.lb-typing i:nth-child(2) { animation-delay: .18s; }
.lb-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes lbTyping { 0%, 60%, 100% { translate: 0 0; opacity: .45; } 30% { translate: 0 -5px; opacity: 1; } }

/* ── Grotere, rustigere typografie ───────────────────────── */
.lb-bubble { font-size: 16px; line-height: 1.65; padding: 16px 19px; max-width: 600px;
  color: var(--bl-text); font-weight: 700; }
.lb-done { font-size: 14.5px; }
.lb-done b { font-size: 15px; }
.bl-field label { font-size: 15.5px; }
.bl-field input[type=text], .bl-field input[type=email], .bl-field input[type=password], .bl-field select,
.bl-field input[type=date], .bl-field textarea, .lb-inline input {
  font-size: 16px; padding: 14px 16px; border-radius: 14px;
  background: var(--bl-bg); border: 1.5px solid var(--bl-line-2); color: var(--bl-text);
  width: 100%; font-family: inherit; }
.bl-chips label { font-size: 15px; padding: 12px 18px; }
.bl-btn { font-size: 16px; padding: 16px 24px; }
.bl-btn--mini { font-size: 14px; padding: 10px 16px; }
.lb-ok { font-size: 16px; }
.bl-card h1, .lb-convo h1 { font-size: 26px; }
.bl-card p.intro { font-size: 16px; }
.bl-error, .bl-ok { font-size: 15px; }
.lb-privacycard { font-size: 14px; }
.lb-privacycard b { font-size: 15px; }
.bl-day b { font-size: 15px; }
.bl-day small { font-size: 11.5px; }
.hint, .bl-card .hint { font-size: 14px; }
.lb-phase { font-size: 15.5px; padding: 10px; }
.lb-phase .n { width: 27px; height: 27px; font-size: 12px; }
.lb-phase .t small { font-size: 13px; }
.lb-ctxcard b { font-size: 15.5px; }
.lb-ctxcard p { font-size: 14px; }
.lb-privacy { font-size: 13.5px; }
.lb-privacy b { font-size: 14.5px; }
.lb-status { font-size: 15px; }

/* ── Previewtelefoon op ware grootte, donker, met leeg scherm ─ */
.lb-right .lb-phone { width: 400px; max-width: 100%; }
.lb-phone { border-radius: 44px; padding: 12px; }
.lb-screen { border-radius: 33px; background: #0b0b0f; display: flex; flex-direction: column;
  height: auto; }
.lb-right .lb-screen { height: min(750px, calc(100dvh - 180px)); }
.lb-overlaybody .lb-screen { height: min(760px, calc(100dvh - 140px)); }
.lb-screen-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.lb-screen.is-empty .lb-screen-content { display: none; }
.lb-screen-empty { display: none; }
.lb-screen.is-empty .lb-screen-empty { flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 30px 26px; }
.lb-screen-empty span { font-size: 40px; }
.lb-screen-empty .lb-empty-plane { color: #fff; }
.lb-screen-empty .lb-empty-plane svg { display: block; }
.lb-screen-empty b { font-size: 17px; }
.lb-screen-empty p { color: var(--bl-dim); font-size: 14px; line-height: 1.6; max-width: 240px; }

/* donkere app-kop (geen groene balk) */
.lb-apphead { background: #15151c; color: var(--bl-text); border-bottom: 1px solid var(--bl-line);
  padding: 30px 18px 15px; }
.lb-apphead small { color: var(--bl-accent); font-size: 10px; }
.lb-apphead .t { font-size: 20px; }
.lb-apphead .chips { margin-top: 11px; }
.lb-apphead .chips span { background: var(--bl-surface-2); border: 1px solid var(--bl-line-2);
  color: var(--bl-dim); font-size: 11px; padding: 4px 11px; }
.lb-apphead .chips em { font-style: normal; }
.lb-appbody { flex: 1; min-height: 0; overflow: hidden; padding: 14px; gap: 10px; }
.lb-appcard { padding: 13px 15px; border-radius: 15px; }
.lb-appcard .lbl { font-size: 10px; }
.lb-appcard .row { font-size: 14px; margin-top: 5px; }
.lb-appcard .row .em { font-size: 17px; }
.lb-appcard .sub { font-size: 12.5px; margin-top: 3px; }
.lb-apptabs { font-size: 9.5px; padding: 9px 4px 14px; }
.lb-apptabs b { font-size: 17px; }