/* Hatch — uitbouw van de v1-stijl: warme aardetinten, mobiel-eerst. */

/* Merkletters (DECISIONS.md 18): Plus Jakarta Sans Bold voor koppen, Fraunces Bold
   (statische opsz-72-instance) voor bedragen. Self-hosted, latin-gesubset (~38 kB samen),
   licenties in web/fonts/*-OFL.txt. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --font-kop: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-bedrag: 'Fraunces', Georgia, 'Times New Roman', serif;
  color-scheme: light;
  --bg: #f7f5f2;
  --tekst: #2b2620;
  --gedempt: #6b6358;
  --licht: #8a8272;
  --rand: #e9e3d6;
  --accent: #c98a4b;
  --accent-donker: #a8632a;
  --chip-bg: #eee7db;
  --chip-tekst: #55503f;
}
.lucide-icoon { width: 1em; height: 1em; vertical-align: -0.15em; flex-shrink: 0; }
h1, h2, h3 { font-family: var(--font-kop); letter-spacing: -.01em; }
* { box-sizing: border-box; }
/* --app-hoogte wordt door app.js gezet op de echte zichtbare viewporthoogte (visualViewport),
   want 100dvh trekt op sommige Android-toestellen (o.a. tablets als de Lenovo Tab M11) de
   systeem-navigatiebalk niet correct af, waardoor de tabbalk er net onder verdwijnt. */
html, body { height: 100%; height: 100dvh; height: var(--app-hoogte, 100dvh); }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--tekst);
  display: flex;
  flex-direction: column;
}

/* Profielkeuze */
.profiel-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: linear-gradient(160deg, #faf6ee, #f1ebdc);
  display: flex; align-items: center; justify-content: center;
}
.profiel-overlay[hidden] { display: none; }
.profiel-box { text-align: center; padding: 24px; }
.profiel-box h1 { font-size: 28px; margin: 0 0 4px; color: var(--accent-donker); }
.profiel-sub { font-size: 13px; font-weight: 600; color: var(--accent); margin: 0 0 12px; text-transform: uppercase; letter-spacing: .04em; }
.profiel-box p { color: var(--gedempt); margin: 0 0 22px; }

/* Deelmenu + toast */
.deel-overlay {
  position: fixed; inset: 0; z-index: 70; background: rgba(43, 38, 32, .5);
  display: flex; align-items: flex-end; justify-content: center; padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom)); animation: match-fade .15s ease-out;
}
.deel-box {
  background: #fff; border-radius: 18px; width: 100%; max-width: 420px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
  animation: match-pop .25s cubic-bezier(.34,1.56,.64,1);
}
.deel-titel { text-align: center; font-size: 13px; color: var(--licht); padding: 8px 6px 4px; }
.deel-optie {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px;
  border: 1px solid var(--rand); border-radius: 12px; background: #fff;
  font-size: 15px; font-weight: 600; color: var(--tekst); cursor: pointer;
}
.deel-optie:active { transform: scale(.98); }
.deel-optie.annuleer { border: none; color: var(--licht); font-weight: 500; }
.toast {
  position: fixed; left: 50%; bottom: 78px; transform: translateX(-50%) translateY(10px);
  background: #2b2620; color: #fff; padding: 10px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; z-index: 80;
  transition: opacity .2s, transform .2s;
}
.toast.aan { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Match-popup */
.match-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(43, 38, 32, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: match-fade .2s ease-out;
}
.match-overlay[hidden] { display: none; }
.match-box {
  background: #fff; border-radius: 18px; padding: 28px 24px; text-align: center;
  max-width: 340px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.3);
  animation: match-pop .35s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
/* Match-gloed (V5, plan-design-eigenheid §5 besluit 7): een warme gloed die achter de box
   opbloeit en weer uitdooft, plus (op de match-foto) een lichtveeg. Vervangt het confetti-deel
   van U10. Gedeelde .match-gloed-klasse, ook gebruikt op de nieuwe-match-popup. */
.match-gloed { position: relative; }
.match-gloed::before {
  content: ''; position: absolute; inset: -50px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 138, 75, .55), rgba(201, 138, 75, 0) 70%);
  opacity: 0; animation: gloed-bloei 1.5s ease-out;
}
@keyframes gloed-bloei {
  0% { opacity: 0; transform: scale(.6); }
  35% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.2); }
}
.match-eyebrow { font-size: 12.5px; font-weight: 600; color: var(--licht); margin: 0 0 4px; }
.match-titel { font-family: var(--font-kop); font-size: 24px; font-weight: 800; color: var(--accent-donker); margin-bottom: 14px; text-align: center; }
.match-foto-wrap { position: relative; border-radius: 12px; overflow: hidden; margin-bottom: 14px; background: var(--chip-bg); }
.match-foto-wrap[hidden] { display: none; }
.match-foto-wrap::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .7) 50%, transparent 60%);
  transform: translateX(-130%);
  animation: lichtveeg 1.5s ease-out;
}
@keyframes lichtveeg {
  0%, 15% { transform: translateX(-130%); }
  70%, 100% { transform: translateX(130%); }
}
.match-foto { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.match-adres { font-weight: 700; margin-bottom: 20px; }
.match-adres-extra { font-weight: 400; color: var(--licht); }
.match-knoppen { display: flex; flex-direction: column; gap: 10px; }
.match-sluit {
  width: 100%; padding: 14px; border: none; border-radius: 12px; background: var(--accent);
  color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
}
.match-sluit-zwak { background: #fff; color: var(--gedempt); border: 1.5px solid var(--rand); }
@keyframes match-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes match-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .match-box, .match-gloed { animation: none; }
  .match-gloed::before, .match-foto-wrap::after { content: none; }
}
/* Bron-modal: bron blijft binnen Hatch openen, met een vast "Terug naar Hatch"-knopje */
.bron-overlay {
  position: fixed; inset: 0; z-index: 90; background: #fff;
  display: flex; flex-direction: column;
}
.bron-overlay[hidden] { display: none; }
.bron-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--accent); color: #fff; flex-shrink: 0;
}
.bron-terug, .bron-extern {
  display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700;
  color: #fff; background: rgba(255,255,255,.18); border: none; border-radius: 12px;
  padding: 9px 12px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.bron-terug:active, .bron-extern:active { transform: scale(.97); }
.bron-frame { flex: 1; width: 100%; border: none; background: #fff; }

.profiel-knoppen { display: flex; gap: 14px; }
.profiel-knop {
  flex: 1; padding: 22px 36px; font-size: 19px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--rand); border-radius: 18px; background: #fff; color: var(--tekst);
  box-shadow: 0 4px 18px rgba(60,50,30,.08);
}
.profiel-knop:active { transform: scale(.97); }

/* Header + tabs */
.top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 12px 16px 8px; max-width: 640px; width: 100%; margin: 0 auto;
}
.top-titel { flex: 1; min-width: 0; }
.top h1 { font-size: 23px; margin: 0; line-height: 1.2; }
.top .sub { display: block; font-size: 11.5px; line-height: 1.5; color: var(--licht); margin-top: 1px; }
.profiel-chip { flex-shrink: 0; }
.profiel-chip {
  background: var(--accent); color: #fff; border: none; border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.install-knop {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  background: #fff; color: var(--accent-donker); border: 1px solid var(--accent);
  border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.install-knop[hidden] { display: none; }
.install-knop .lucide-icoon { width: 15px; height: 15px; }
/* Tijdelijke feedback-knop naast de profielchip. */
.feedback-knop {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
  background: none; color: #a49c8e; border: none;
  padding: 7px 4px; font-size: 12px; font-weight: 500; cursor: pointer;
}
.feedback-knop[hidden] { display: none; }
.feedback-knop:active { color: #8a8272; }
.feedback-knop .lucide-icoon { width: 13px; height: 13px; }
/* De select hergebruikt .passcode-input voor de rand/afronding, maar niet de code-opmaak
   (gespatieerd, gecentreerd, groot); die zetten we hier terug naar gewone tekst. Element-qualifier
   (select.…) zodat dit wint van de later gedeclareerde .passcode-input met gelijke specificiteit. */
select.feedback-soort { width: 100%; font-size: 15px; letter-spacing: normal; text-align: left; padding: 10px 12px; }
.feedback-veld {
  width: 100%; min-height: 120px; resize: vertical; box-sizing: border-box;
  border: 1px solid var(--rand); border-radius: 12px; padding: 12px 14px;
  font: inherit; font-size: 15px; color: var(--tekst); background: #fff;
}
.feedback-veld:focus { outline: none; border-color: var(--accent); }
.feedback-bijlage {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px dashed var(--rand); border-radius: 12px; padding: 12px 14px;
  font-size: 14px; font-weight: 600; color: var(--accent-donker);
}
.feedback-bijlage:active { transform: scale(.99); }
.feedback-bijlage .lucide-icoon { width: 17px; height: 17px; flex-shrink: 0; }
.feedback-bijlage-tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feedback-melding { font-size: 13px; color: var(--licht); text-align: center; padding: 2px 4px; }
.feedback-melding[hidden] { display: none; }
main { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.view { max-width: 640px; margin: 0 auto; padding: 4px 14px 20px; }
.tabs {
  display: flex; border-top: 1px solid var(--rand); background: #fffdf9;
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1; background: none; border: none; padding: 8px 0 6px; cursor: pointer;
  font-size: 17px; color: var(--licht); display: flex; flex-direction: column; align-items: center; gap: 1px;
  position: relative;
  /* Geen blauw/grijs tik-vlak op mobiel (Android tekent standaard een vierkant achter de knop). */
  -webkit-tap-highlight-color: transparent;
}
.tab span { font-size: 10.5px; font-weight: 600; }
.tab.actief { color: var(--accent-donker); }
.tab em {
  position: absolute; top: 3px; right: 18%; background: var(--accent-donker); color: #fff;
  font-style: normal; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 5px;
}

/* Matches steekt als een 'drempel' boven de balk uit: een verhoogde accent-bubbel die de
   horizontale lijn onderbreekt, zodat de gedeelde matches meteen de aandacht trekken. */
.tab-matches { overflow: visible; }
.tab-matches .lucide-icoon {
  width: 26px; height: 26px; color: #fff; box-sizing: content-box;
  background: linear-gradient(160deg, var(--accent), var(--accent-donker));
  border-radius: 50%; padding: 11px; margin-top: -24px; margin-bottom: 1px;
  border: 4px solid #fffdf9; box-shadow: 0 6px 16px rgba(168,99,42,.4);
  transition: transform .12s;
}
.tab-matches span { font-size: 11px; font-weight: 800; color: var(--accent-donker); }
.tab-matches.actief .lucide-icoon { background: linear-gradient(160deg, var(--accent-donker), #8a4d1f); }
.tab-matches:active .lucide-icoon { transform: scale(.93); }
.tab-matches em { top: -16px; right: calc(50% - 26px); border: 2px solid #fffdf9; }

/* Kaart */
.kaart-zone { position: relative; min-height: 66vh; touch-action: pan-y; }
.kaart {
  background: #fff; border-radius: 18px; border: 1px solid var(--rand);
  box-shadow: 0 6px 22px rgba(60,50,30,.08); overflow: hidden;
  user-select: none; touch-action: pan-y;
}
/* touch-action erft niet over naar children: zonder deze regel pakt de browser in het
   scrollbare kaart-body-vak de aanraking native (beide assen) i.p.v. 'm door te geven aan
   de pointermove-swipelogica, waardoor swipen daar minder soepel aanvoelt dan op de foto. */
.kaart-body { touch-action: pan-y; }

/* Stapel vult precies het scherm: de foto krimpt mee zodat de actieknoppen altijd
   zichtbaar blijven zonder te scrollen (in plaats van een vaste 66vh + 4/3-foto). */
#view-stapel:not([hidden]) { display: flex; flex-direction: column; height: 100%; }
#view-stapel .kaart-zone { flex: 1 1 auto; min-height: 0; }
#view-stapel .kaart { display: flex; flex-direction: column; height: 100%; }
#view-stapel .foto-band { flex: 1 1 auto; min-height: 150px; aspect-ratio: auto; }
#view-stapel .kaart-body { flex-shrink: 0; overflow-y: auto; }
.kaart.sleep { transition: none; cursor: grabbing; }
.kaart.terug { transition: transform .25s; }
.kaart.weg { transition: transform .3s, opacity .3s; opacity: 0; }

.foto-band { position: relative; aspect-ratio: 4/3; background: linear-gradient(135deg,#f1ebdc,#e2d8c2); }
.foto-band img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.foto-band .geen-foto {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #b0a688; font-size: 40px;
}
.foto-band .foto-fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; text-align: center; padding: 0 24px;
  color: #8a7f60;
}
/* display:flex hierboven wint anders van het UA-[hidden]-regeltje, waardoor de fallback
   óók over een geldige foto verscheen. Expliciet verbergen zodra het hidden-attribuut staat. */
.foto-band .foto-fallback[hidden] { display: none; }
.foto-band .foto-fallback .ff-icoon { font-size: 32px; color: #b0a688; }
.foto-band .foto-fallback p { margin: 0; font-size: 14px; }
.foto-band .foto-fallback a { font-size: 14px; font-weight: 600; }
/* Kleine zichtbare navigatieknopjes; de rest van de foto is tikbaar → opent de bron. */
.foto-pijl {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.85); color: #2b2620;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.28);
}
.foto-pijl .lucide-icoon { width: 20px; height: 20px; }
.foto-pijl.links { left: 8px; }
.foto-pijl.rechts { right: 8px; }
.foto-dots { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; }
.foto-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); }
.foto-dots i.aan { background: #fff; }
.bron-badges { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.bron-badge {
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; color: #fff;
  text-decoration: none; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.bron-pararius { background: #2563a8; }
.bron-huislijn { background: #1d8a5f; }
.bron-buurtje { background: #f79824; }
.bron-nieuwbouw { background: #7c5cbf; }
.bron-funda { background: #ea580c; }
.status-lint {
  position: absolute; top: 10px; left: 10px; background: rgba(43,38,32,.82); color: #fff;
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 8px;
}
.nieuw-badge {
  position: absolute; top: 10px; left: 10px; background: #e0245e; color: #fff;
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
/* Onopvallende hint dat je partner deze woning al likete (staat daarom bovenaan de stapel). */
.partner-like-badge {
  position: absolute; bottom: 10px; right: 10px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35); color: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.partner-like-badge svg { width: 14px; height: 14px; }

.swipe-stempel {
  position: absolute; top: 18px; font-size: 26px; font-weight: 800; padding: 6px 14px;
  border: 3px solid; border-radius: 12px; opacity: 0; transform: rotate(-12deg); pointer-events: none;
}
.stempel-like { left: 14px; color: #2e7d4f; border-color: #2e7d4f; background: rgba(233,245,238,.9); }
.stempel-nee { right: 14px; color: #c0392b; border-color: #c0392b; background: rgba(248,235,232,.9); transform: rotate(12deg); }

.kaart-body { padding: 14px 18px 16px; }
.adres-rij { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.adres { font-size: 19px; font-weight: 700; margin: 0; }
.adres-acties { display: flex; gap: 8px; flex-shrink: 0; }
.deel-knop, .kaart-knop {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rand);
  background: #fff; color: var(--gedempt); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.deel-knop:hover, .kaart-knop:hover { background: #f7f4ee; color: var(--accent-donker); }
.kaart-knop.actief { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Geen coördinaten: doorstreept pin-icoon, gedempt maar wél aanklikbaar (toont een uitleg-toast). */
.kaart-knop-leeg { color: var(--licht); border-style: dashed; }
.kaart-knop-leeg:hover { background: #f7f4ee; color: var(--gedempt); }
.wijk { color: var(--licht); font-size: 12.5px; margin: 2px 0 8px; }
.kaart-mini { margin: 0 0 10px; }
.kaart-frame {
  width: 100%; height: 180px; border: 1px solid var(--rand); border-radius: 12px; display: block;
}
.kaart-mini-voet {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 5px; font-size: 11.5px; color: var(--licht);
}
.kaart-benadering { font-style: italic; }
.kaart-mini-voet a { display: inline-flex; align-items: center; gap: 3px; color: var(--accent-donker); font-weight: 600; text-decoration: none; }
.kaart-mini-voet a .lucide-icoon { width: 13px; height: 13px; }
.prijs { font-family: var(--font-bedrag); font-size: 24px; font-weight: 700; color: var(--accent-donker); font-variant-numeric: tabular-nums; }
.prijs .kk { font-size: 12px; color: #a39a89; margin-left: 4px; font-weight: 400; }
.prijs-wijziging {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  font-size: 12.5px; font-weight: 700; padding: 3px 8px; border-radius: 8px;
}
.prijs-wijziging .lucide-icoon { width: 15px; height: 15px; }
.prijs-wijziging.omlaag { background: #eef6ec; border: 1px solid #d6e9d0; color: #3f6b34; }
.prijs-wijziging.omhoog { background: #fbeee6; border: 1px solid #f0d3bd; color: #96502a; }
.criteria-badge {
  margin: 10px 0 2px; background: #fbeee6; border: 1px solid #f0d3bd; color: #96502a;
  font-size: 12.5px; font-weight: 600; padding: 7px 11px; border-radius: 8px;
}
.criteria-badge.ok { background: #eef6ec; border-color: #d6e9d0; color: #3f6b34; }
/* Profiel zonder opgeslagen wensen: neutrale, aanklikbare hint i.p.v. een loze groene badge. */
.criteria-badge.hint {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 600;
  background: #f7f4ee; border: 1px dashed #d8cfbc; color: var(--gedempt);
}
.criteria-badge.hint:active { transform: scale(.99); }
.kenmerken { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.kenmerk {
  font-size: 12px; background: #f7f4ee; border: 1px solid #ece5d5; padding: 4px 9px;
  border-radius: 8px; color: var(--chip-tekst);
}
.kenmerk.unknown { color: #b0a996; font-style: italic; }
.kenmerk-tuin { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.kenmerk.good { background: #eef6ec; border-color: #d6e9d0; color: #3f6b34; }
.kenmerk.warn { background: #fbeee6; border-color: #f0d3bd; color: #96502a; }
.kaart-links { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.kaart-links a { font-size: 13px; color: #2563a8; text-decoration: none; }
.kaart-links a:hover { text-decoration: underline; }

.actie-rij { display: flex; gap: 12px; margin-top: 14px; }
.actie-rij button {
  flex: 1; padding: 15px; border-radius: 12px; border: none; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: transform .1s;
}
.actie-rij button:active { transform: scale(.96); }
.btn-nee { background: #f7e5e1; color: #c0392b; }
.btn-ja { background: #4a9e6f; color: #fff; }
.btn-nee.aan { box-shadow: inset 0 0 0 2px #c0392b; }
.btn-ja.aan { box-shadow: inset 0 0 0 2px #2e7d4f; }
/* Brede oordeel-knop onderaan de kaart-modal (rood "Toch niet mijn ding" bij een like,
   groen "Spreekt mij toch wel aan" bij een afwijzing). Kleuren komen van .btn-nee/.btn-ja. */
.btn-oordeel-breed {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-top: 10px; padding: 15px; border: none; border-radius: 12px; font-size: 15px;
  font-weight: 700; cursor: pointer; transition: transform .1s;
}
.btn-oordeel-breed:active { transform: scale(.98); }

/* "Nieuwe versie beschikbaar"-balk (automatische versiecheck): zweeft boven de tabbalk. */
.update-balk {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 80;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-donker); color: #fff; border: none; border-radius: 999px;
  padding: 10px 18px; font-size: 13.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.28); animation: match-fade .2s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.update-balk:active { transform: translateX(-50%) scale(.97); }
.update-balk .lucide-icoon { width: 16px; height: 16px; }

.leeg-paneel { text-align: center; padding: 60px 18px; color: var(--gedempt); }
.leeg-paneel .leeg-merk { display: block; width: 64px; height: auto; margin: 0 auto 14px; opacity: .8; }
.leeg-paneel h2 { color: var(--tekst); }
.leeg-paneel a { color: var(--accent-donker); font-weight: 600; }
.leeg-paneel .leeg-tips, .leeg-paneel .leeg-slim { max-width: 300px; margin: 16px auto 0; }
.leeg-paneel .leeg-tips .lucide-icoon, .leeg-paneel .leeg-slim .lucide-icoon { width: 16px; height: 16px; vertical-align: -3px; }
/* Uitleg boven de slimme-selectie-knop op de lege stapel, plus de losse vervolgopties eronder. */
.leeg-slim-uit { margin: 16px auto 0; max-width: 320px; font-size: 13.5px; }
.leeg-paneel .leeg-slim-uit + .leeg-slim { margin-top: 8px; }
.leeg-opties { margin: 16px auto 0; max-width: 320px; }
.leeg-opties p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; }
.leeg-opties p:last-child { margin-bottom: 0; }

/* Tip op de lege stapel: blader je eerdere keuzes verticaal terug. */
.leeg-blader { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rand); }
.leeg-blader p { margin: 0 0 12px; font-size: 13.5px; }
.leeg-blader-knoppen { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.blader-knop {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--rand); background: #fff; color: var(--tekst); font-size: 13.5px; font-weight: 700;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.blader-knop:hover { border-color: var(--accent); color: var(--accent-donker); }
.blader-knop:active { transform: scale(.97); }
.blader-knop .lucide-icoon { width: 15px; height: 15px; }

/* "Bladeren"-knop in de sectiekop van Overzicht (naast Geliket / Afgewezen). */
.blok-bladeren {
  display: inline-flex; align-items: center; gap: 5px; margin-left: auto; margin-right: 8px;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rand); background: #fff;
  color: var(--accent-donker); font-size: 12px; font-weight: 700; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.blok-bladeren:hover { border-color: var(--accent); }
.blok-bladeren:active { transform: scale(.96); }
.blok-bladeren .lucide-icoon { width: 14px; height: 14px; color: var(--accent-donker); }
/* Slim-variant van de sectiekop-knop: noemt de slimme selectie i.p.v. het neutrale "Bladeren",
   met de paarse sparkle uit de moduskeuze. Alleen als er genoeg likes zijn om een smaak te lezen. */
.blok-bladeren.slim { border-color: var(--accent); }
.blok-bladeren.slim .lucide-icoon { color: #6b3fa0; }
/* Payoff-regel bovenaan Overzicht: verschijnt alleen als afgewezen woningen tóch bij je smaak
   passen, en opent de slimme selectie direct. Verdwijnt zodra er geen kandidaat meer is. Naast de
   regel staat een kruisje om 'm weg te tikken tot er een nieuwe woning past. */
.overzicht-slim-rij { display: flex; align-items: stretch; gap: 8px; margin: 0 0 12px; }
.overzicht-slim {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; margin: 0;
  padding: 11px 13px; border-radius: 13px; border: 1px solid var(--accent);
  background: #fffaf3; color: var(--tekst); font-size: 13.5px; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.overzicht-slim:hover { border-color: var(--accent-donker); }
.overzicht-slim:active { transform: scale(.99); }
.overzicht-slim .os-icoon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; background: #efe7fb; color: #6b3fa0;
}
.overzicht-slim .os-icoon .lucide-icoon { width: 18px; height: 18px; }
.overzicht-slim .os-tekst { flex: 1; line-height: 1.4; }
.overzicht-slim .os-tekst b { color: var(--accent-donker); }
.overzicht-slim .os-pijl { width: 18px; height: 18px; color: var(--licht); flex-shrink: 0; }
.overzicht-slim-weg {
  flex-shrink: 0; width: 44px; border-radius: 13px; border: 1px solid var(--rand);
  background: #fff; color: var(--licht); display: grid; place-items: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.overzicht-slim-weg .lucide-icoon { width: 18px; height: 18px; }
@media (hover: hover) { .overzicht-slim-weg:hover { border-color: var(--accent); color: var(--accent-donker); } }
.overzicht-slim-weg:active { transform: scale(.96); }
.voortgang-rij { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 8px 0 10px; }
.voortgang { font-size: 12px; color: var(--licht); font-variant-numeric: tabular-nums; }
.voortgang b { color: var(--accent-donker); }
.voortgang-stop {
  border: none; background: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--accent-donker); font-weight: 600; text-decoration: underline;
}

/* Ongedaan-maken-snackbar na een swipe: zweeft boven de tabbalk, onder de overlays (z 60+)
   zodat een match-popup er altijd overheen valt. */
.oordeel-snackbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 55;
  border: none; cursor: pointer; white-space: nowrap;
  background: #2b2620; color: #fff; border-radius: 999px; padding: 10px 18px;
  font-size: 13px; font-weight: 700; box-shadow: 0 4px 16px rgba(0,0,0,.25);
  animation: match-fade .2s ease-out;
}
.oordeel-snackbar:active { transform: translateX(-50%) scale(.97); }
/* Op de Ontdek-stapel hoger, boven de actieknoppen, zodat "Niet mijn ding" en
   "Dit spreekt mij aan" vrij blijven voor het volgende oordeel. */
.oordeel-snackbar.os-hoog { bottom: calc(148px + env(safe-area-inset-bottom)); }
.bron-filter-veld { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gedempt); }
.bron-filter-veld span { font-weight: 600; flex-shrink: 0; }
.bron-filter-veld .sorteer-select { padding: 4px 8px; font-size: 12px; max-width: none; }

/* Lijsten & matches */
.blok { background: #fff; border: 1px solid var(--rand); border-radius: 12px; padding: 14px 16px; margin-top: 14px; }
.blok h3 { font-size: 14.5px; margin: 0 0 8px; }
.lijst-item {
  display: flex; gap: 11px; padding: 9px 4px; border-bottom: 1px solid #f3eee0; align-items: center;
  cursor: pointer; border-radius: 8px;
}
.lijst-item:hover { background: #faf6ee; }
.lijst-item:last-child { border-bottom: none; }
.lijst-item img { width: 62px; height: 47px; object-fit: cover; border-radius: 8px; background: #eee5d2; flex-shrink: 0; }
.lijst-item .li-info { flex: 1; min-width: 0; }
.lijst-item .li-adres { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lijst-item .li-sub { font-size: 12px; color: var(--licht); }
.lijst-item .li-prijs { font-family: var(--font-bedrag); font-size: 13px; color: var(--accent-donker); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lijst-item .li-score {
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: #2e7d4f; background: #eef6ec; border: 1px solid #d6e9d0; border-radius: 999px; padding: 2px 8px;
}
.lijst-item .li-score .lucide-icoon { width: 12px; height: 12px; }
.lijst-item.vervallen { opacity: .5; filter: grayscale(.9); }
.lijst-item a { color: inherit; text-decoration: none; }
.vervallen-label { font-size: 10.5px; font-weight: 700; color: #8a8272; background: #eceadf; border-radius: 8px; padding: 2px 6px; }
.li-unlike {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rand);
  background: #fff; color: var(--licht); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.li-unlike:hover { background: #f7ece6; color: #b3452f; border-color: #e6c9bc; }
.empty-note { font-size: 12.5px; color: #b0a996; font-style: italic; }

/* Sterwaardering. Read-only rij (Matches-lijst + modal) met halve vulling via een breedte-clip:
   de gevulde laag ligt over de lege en wordt op de exacte fractie afgeknipt (dus 4,5 klopt). */
.sterren { position: relative; display: inline-flex; vertical-align: -0.18em; line-height: 1; }
.sterren-laag { display: inline-flex; }
.sterren-laag .lucide-icoon { width: 15px; height: 15px; }
.sterren-klein .sterren-laag .lucide-icoon { width: 13px; height: 13px; }
.sterren-leeg { color: #e2dccc; }
.sterren-leeg .lucide-icoon { fill: #efeadd; }
.sterren-vol { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; }
.sterren-vol .lucide-icoon { fill: currentColor; }
/* Twee stemmen: vol goud. Eén stem: gedempter/lichter goud — het subtiele "één van twee". */
.sterren-twee .sterren-vol { color: #e0a52a; }
.sterren-een .sterren-vol { color: #ecca8b; }
.li-sterren { margin-top: 3px; }

/* Waarderingsblok in de kaart-modal: je eigen (klikbare) sterren + het gedeelde gemiddelde.
   Eigen witte kaart (net als het notitieblok), zodat de gedimde lijst er niet doorheen schijnt. */
.ster-blok { background: #fff; border: 1px solid var(--rand); border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.ster-rijen { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.ster-kolom-partner { text-align: right; }
.ster-kolom-partner .sterren { margin-top: 4px; }
.ster-leeg-note { margin-top: 4px; font-size: 12px; color: var(--licht); font-style: italic; }
.ster-kop { font-size: 12px; font-weight: 600; color: var(--gedempt); margin-bottom: 6px; }
.ster-invoer { display: inline-flex; gap: 5px; }
.ster-knop { background: none; border: none; padding: 2px; cursor: pointer; color: #e2dccc; line-height: 0; }
.ster-knop .lucide-icoon { width: 27px; height: 27px; fill: #efeadd; transition: transform .08s ease; }
.ster-knop:hover .lucide-icoon { transform: scale(1.12); }
.ster-knop.aan { color: #e0a52a; }
.ster-knop.aan .lucide-icoon { fill: currentColor; }
.ster-samen { margin-top: 9px; font-size: 12px; color: var(--gedempt); display: inline-flex; align-items: center; gap: 6px; }

/* Overzicht: in-/uitklapbare Geliket/Afgewezen-secties met een stevigere, getinte kop
   zodat de twee lijsten ook tijdens het scrollen duidelijk van elkaar te onderscheiden zijn. */
.blok-vouw { padding: 0; }
.blok-vouw > summary { list-style: none; cursor: pointer; }
.blok-vouw > summary::-webkit-details-marker,
.blok-vouw > summary::marker { display: none; content: ''; }
.blok-kop {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; font-size: 16px; font-weight: 800; color: var(--tekst);
  background: #f5eee0; border-radius: 12px 12px 0 0;
}
.blok-vouw:not([open]) > .blok-kop { border-radius: 12px; }
.kop-tekst { display: flex; align-items: center; gap: 8px; }
.blok-kop .lucide-icoon:not(.vouw-pijl) { color: var(--accent-donker); width: 18px; height: 18px; flex-shrink: 0; }
.vouw-pijl { width: 18px; height: 18px; color: var(--licht); transition: transform .2s; flex-shrink: 0; }
.blok-vouw[open] > .blok-kop .vouw-pijl { transform: rotate(90deg); }
.blok-inhoud { padding: 6px 16px 14px; }

/* Sorteren (Overzicht + Matches): compacte knop die het sorteermenu opent (.deel-overlay) */
.sorteer-veld { display: flex; justify-content: flex-end; margin: 4px 2px 12px; }
.sorteer-knop {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px; max-width: 100%;
  border: 1px solid var(--rand); border-radius: 8px; background: #fff;
  font-size: 12.5px; font-weight: 600; color: var(--tekst); cursor: pointer;
}
.sorteer-knop:active { transform: scale(.98); }
.sorteer-knop .lucide-icoon { width: 15px; height: 15px; color: var(--licht); flex-shrink: 0; }
.sorteer-knop span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Eén rij per sorteercategorie in het menu: labelknop en de twee richtingpijlen staan los op de
   achtergrond van het menu, zonder eigen rand of vak — alleen een dunne lijn tussen de rijen. */
.sorteer-rij { display: flex; align-items: stretch; border-bottom: 1px solid var(--rand); }
.sorteer-rij:last-of-type { border-bottom: none; }
.sorteer-rij-kies {
  flex: 1; display: flex; align-items: center; gap: 8px; padding: 14px 4px; text-align: left;
  border: none; background: transparent; font-size: 15px; font-weight: 600; color: var(--tekst); cursor: pointer;
}
.sorteer-rij-kies:active { opacity: .7; }
.sorteer-rij-kies .lucide-icoon { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }
.sorteer-rij.actief .sorteer-rij-kies { color: var(--accent-donker); }
/* Twee losse pijlen (omhoog/omlaag) i.p.v. één omkeerknopje: alleen de actieve pijl (de huidige
   woordvolgorde van de categorie) krijgt een kleur, de andere blijft gedempt. */
.sorteer-rij-pijlen { display: flex; flex-direction: column; flex-shrink: 0; }
.sorteer-pijl {
  padding: 6px 10px; border: none; background: transparent; color: var(--licht); cursor: pointer;
}
.sorteer-pijl:active { opacity: .6; }
.sorteer-pijl.actief { color: var(--accent-donker); }
.sorteer-pijl .lucide-icoon { width: 15px; height: 15px; }
.sorteer-select {
  padding: 7px 10px; border: 1px solid var(--rand); border-radius: 8px;
  font-size: 12.5px; background: #fff; color: var(--tekst); max-width: 62%;
}
.sorteer-select:focus { outline: none; border-color: var(--accent); }
.status-filter { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: -4px 2px 14px; }
.status-optie {
  font-size: 12.5px; font-weight: 600; color: var(--gedempt);
  background: #fff; border: 1px solid var(--rand); border-radius: 999px;
  padding: 6px 12px; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.status-optie:hover { border-color: var(--accent); }
.status-optie.aan { background: var(--accent); border-color: var(--accent); color: #fff; }

.matches-kaart-rij { display: flex; justify-content: flex-end; margin: -4px 2px 14px; }
.matches-kaart-toggle {
  display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--accent-donker); background: #fff; border: 1px solid var(--rand); border-radius: 999px;
  padding: 6px 12px; cursor: pointer;
}
.matches-kaart-toggle:hover { border-color: var(--accent); }
.matches-kaart-toggle .lucide-icoon { width: 14px; height: 14px; }

/* Matches: kaartweergave (overlay met OSM-tegels + pins, zie toonMatchesKaart in app.js) */
.matches-kaart-overlay {
  position: fixed; inset: 0; z-index: 65; background: rgba(43,38,32,.55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom)); animation: match-fade .15s ease-out;
}
.matches-kaart-modal {
  position: relative; width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto;
  background: #fff; border-radius: 18px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px; animation: match-pop .25s cubic-bezier(.34,1.56,.64,1);
}
.matches-kaart-titel { font-size: 15px; font-weight: 700; color: var(--tekst); padding-right: 30px; }
.matches-kaart-vlak { position: relative; width: 100%; border-radius: 12px; overflow: hidden; background: #e9e4d8; }
.matches-kaart-tegel { position: absolute; display: block; }
.matches-kaart-pin {
  position: absolute; transform: translate(-50%, -100%); border: none; background: none; padding: 0;
  cursor: pointer; color: #b6412c; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.matches-kaart-pin .lucide-icoon { width: 26px; height: 26px; }
.matches-kaart-pin:active { transform: translate(-50%, -100%) scale(1.15); }
.matches-kaart-voet { font-size: 12px; color: var(--licht); text-align: center; }

/* Bezichtigingsstatus: statusblok in de kaart-modal + pillen op de matches-lijst.
   Ruime verticale ritmiek: elk direct kind krijgt lucht van het vorige. */
.bez-blok { background: #fff; border: 1px solid var(--rand); border-radius: 14px; padding: 18px 18px 20px; margin-top: 12px; }
.bez-blok > * + * { margin-top: 16px; }
.bez-kop { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--gedempt); }
.bez-kop .lucide-icoon { width: 16px; height: 16px; color: var(--accent-donker); }
.bez-acties { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.bez-primair { width: 100%; }
.bez-tekstknop { background: none; border: none; color: var(--licht); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 6px; text-decoration: underline; text-underline-offset: 2px; }
.bez-tekstknop:hover { color: var(--gedempt); }
.bez-huidig { display: flex; }
.bez-kiezer-veld { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--gedempt); }
.bez-kiezer-veld span { font-weight: 600; flex-shrink: 0; }
.bez-kiezer { max-width: 62%; }

/* Datumvak bij een geplande bezichtiging: eigen kalender + tijdkiezer, inklapbaar zodra er al
   een moment gekozen is (dat staat dan al als pil hierboven). */
.bez-datum { padding-top: 18px; border-top: 1px solid var(--rand); }
.bez-datum-kop {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12.5px; font-weight: 700; color: var(--gedempt); cursor: pointer; list-style: none;
  padding: 8px 2px; margin: -8px -2px 0; -webkit-tap-highlight-color: transparent;
}
.bez-datum-kop:active { opacity: .65; }
.bez-datum-kop::-webkit-details-marker, .bez-datum-kop::marker { display: none; content: ''; }
.bez-datum-kop .vouw-pijl { width: 16px; height: 16px; }
.bez-datum[open] > .bez-datum-kop .vouw-pijl { transform: rotate(90deg); }
.bez-datum-inhoud { margin-top: 14px; }
.bez-datum-inhoud > * + * { margin-top: 14px; }
.bez-kal { border: 1px solid var(--rand); border-radius: 12px; padding: 12px; background: #fffdf9; }
.bez-kal-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bez-kal-titel { font-size: 14px; font-weight: 700; color: var(--tekst); text-transform: capitalize; }
.bez-kal-nav {
  width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rand); border-radius: 8px; background: #fff; color: var(--gedempt); cursor: pointer;
}
.bez-kal-nav:hover { border-color: var(--accent); color: var(--accent-donker); }
.bez-kal-nav .lucide-icoon { width: 18px; height: 18px; }
.bez-kal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.bez-kal-wd { text-align: center; font-size: 11px; font-weight: 700; color: var(--licht); padding-bottom: 4px; }
.bez-kal-leeg { aspect-ratio: 1; }
.bez-kal-dag {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 9px; background: none; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--tekst);
}
.bez-kal-dag:hover { background: #f2ead9; }
.bez-kal-dag.vandaag { border-color: #e0cfb0; }
.bez-kal-dag.gekozen { background: var(--accent); border-color: var(--accent); color: #fff; }
.bez-kal-tijd { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rand); }
.bez-kal-tijd-label { font-size: 12.5px; font-weight: 600; color: var(--gedempt); margin-right: auto; }
.bez-kal-uur, .bez-kal-min {
  padding: 8px 10px; border: 1px solid var(--rand); border-radius: 8px;
  font-size: 14px; background: #fff; color: var(--tekst); font-family: inherit;
}
.bez-kal-uur:focus, .bez-kal-min:focus { outline: none; border-color: var(--accent); }
.bez-kal-dp { font-weight: 700; color: var(--gedempt); }
.bez-kal-sel { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--accent-donker); text-align: center; }

.bez-datum-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bez-moment-bewaar {
  font-size: 13px; font-weight: 700; color: #fff; background: var(--accent);
  border: none; border-radius: 8px; padding: 10px 18px; cursor: pointer;
}
.bez-moment-bewaar:active { transform: scale(.98); }
.bez-agenda-rij { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bez-agenda {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13.5px; font-weight: 700;
  color: var(--accent-donker); background: #fff; border: 1px solid #ecd9c4; border-radius: 10px;
  padding: 11px 16px; cursor: pointer;
}
.bez-agenda-hoofd { width: 100%; }
.bez-agenda .lucide-icoon { width: 16px; height: 16px; }
.bez-agenda:hover { border-color: var(--accent); }
.bez-agenda:disabled { opacity: .6; cursor: default; }

/* Lichte terugkomst-nudge: één regel met een knopje naar 'gepland'. */
.bez-nudge {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  font-size: 12.5px; color: var(--gedempt);
  background: #f8f4ea; border: 1px solid var(--rand); border-radius: 10px; padding: 11px 13px;
}
.bez-nudge-knop {
  font-size: 12.5px; font-weight: 700; color: var(--accent-donker);
  background: #fff; border: 1px solid #ecd9c4; border-radius: 8px; padding: 7px 13px; cursor: pointer;
}
.bez-nudge-knop:hover { border-color: var(--accent); }
.li-bez { margin-top: 4px; }
/* Statuspil: eigen kleurcode per fase, in dezelfde chip-vorm als .notitie-count. */
.bez-pil { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; border: 1px solid var(--rand); background: var(--chip-bg); color: var(--chip-tekst); }
.bez-pil-aanvragen { background: #f6ece0; border-color: #ecd9c4; color: #a8632a; }
.bez-pil-gepland { background: #eef6ec; border-color: #d6e9d0; color: #3f6b34; }
.bez-pil-bezichtigd { background: #eef2f6; border-color: #d6dfe9; color: #45566b; }
.bez-pil-afgevallen { background: #eceadf; border-color: #e0dccd; color: #8a8272; }
/* Gepland, maar het moment is al voorbij: amber i.p.v. groen, als stille vraag om een update. */
.bez-pil-verstreken { background: #f7efdc; border-color: #e9d8ab; color: #8a6a1c; }
/* Groepskoppen in de matcheslijst (per bezichtigingsfase) + de ingeklapte afgevallen-groep. */
.bez-groep { margin-top: 8px; }
.bez-groep:first-child { margin-top: 0; }
.bez-groep-kop { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; color: var(--licht); margin: 12px 2px 4px; }
.bez-groep-tel { font-weight: 700; color: var(--gedempt); background: var(--chip-bg); border-radius: 999px; padding: 0 7px; font-size: 11px; }
.bez-afgevallen { margin-top: 12px; }
.bez-afgevallen > summary { list-style: none; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--gedempt); padding: 6px 2px; }
.bez-afgevallen > summary::-webkit-details-marker, .bez-afgevallen > summary::marker { display: none; content: ''; }
.bez-afgevallen[open] > summary { margin-bottom: 4px; }

/* Inzichten */
.insight-line { font-size: 13.5px; color: #47412f; margin-bottom: 9px; line-height: 1.5; }
.insight-line b { color: var(--accent-donker); }
.bar-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; margin-bottom: 6px; }
.bar-label { width: 110px; color: var(--gedempt); flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { flex: 1; height: 8px; background: #f1ecdf; border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); }
.bar-val { width: 34px; text-align: right; color: var(--licht); }
.ai-blok { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; color: #47412f; }
.ai-meta { font-size: 11.5px; color: var(--licht); margin-top: 8px; }
/* Gemiste kansen (slimme selectie) op Inzichten. */
.blok-intro { font-size: 12.5px; color: var(--gedempt); line-height: 1.5; margin: 0 0 8px; }
.blok-slim { margin-top: 12px; }
.blok-slim .lucide-icoon { width: 15px; height: 15px; vertical-align: -3px; }
.inzicht-spiegel {
  display: block; margin-top: 10px; font-size: 12.5px; font-weight: 600;
  color: var(--accent-donker); text-decoration: none;
}
.inzicht-spiegel:hover { text-decoration: underline; }

/* Instellingen */
.veld { margin-bottom: 14px; }
.veld label { display: block; font-size: 12.5px; font-weight: 600; color: var(--gedempt); margin-bottom: 4px; }
.veld input, .veld select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 8px;
  font-size: 15px; background: #fff; color: var(--tekst);
}
.veld-rij { display: flex; gap: 10px; }
.veld-rij .veld { flex: 1; }
.uitleg-top { font-size: 12px; color: var(--gedempt); line-height: 1.5; margin: -2px 0 14px; }

/* Live teller boven de wensen: wat doen deze instellingen met het actieve aanbod. */
.eisen-teller {
  font-size: 12.5px; line-height: 1.5; color: var(--gedempt);
  background: #f8f4ea; border: 1px solid var(--rand); border-radius: 10px;
  padding: 8px 12px; margin: 0 0 12px;
}
.eisen-teller b { color: var(--accent-donker); font-variant-numeric: tabular-nums; }
/* Per verplichte wens: hoeveel actieve woningen verbergt díe wens nu. */
.eis-verbergt {
  margin-left: auto; flex-shrink: 0; white-space: nowrap;
  font-size: 11px; font-weight: 600; color: #b3452f;
  background: #f7ece6; border: 1px solid #e6c9bc; border-radius: 999px; padding: 1px 7px;
}
.eis-verbergt[hidden] { display: none; }

/* Eén criterium-blok met compacte "Verplicht"-toggle */
.eis {
  border: 1px solid var(--rand); border-left: 3px solid var(--rand);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 10px;
  transition: border-color .15s, background .15s;
}
.eis-hard { border-left-color: var(--accent); background: #fdfaf5; }
.eis-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.eis-label { font-size: 12.5px; font-weight: 600; color: var(--gedempt); }
.eis .veld { margin-bottom: 0; }
.eis-hint { font-size: 11.5px; color: var(--licht); line-height: 1.5; margin: 7px 0 0; }
.eis-hint b { color: var(--gedempt); font-weight: 700; }
.eis input, .eis select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 8px;
  font-size: 15px; background: #fff; color: var(--tekst);
}
.verplicht-toggle {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; cursor: pointer;
  padding: 3px 10px 3px 8px; border-radius: 999px; border: 1px solid var(--rand);
  font-size: 11.5px; font-weight: 600; color: var(--licht); user-select: none;
  transition: background .15s, border-color .15s, color .15s;
}
.verplicht-toggle::before {
  content: ''; width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid currentColor; flex-shrink: 0;
}
.verplicht-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.eis-hard .verplicht-toggle { background: var(--accent); border-color: var(--accent); color: #fff; }
.eis-hard .verplicht-toggle::before { background: #fff; border-color: #fff; }
.opslaan-knop {
  width: 100%; padding: 14px; border: none; border-radius: 12px; background: var(--accent);
  color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 4px;
}
.opslaan-knop:disabled { opacity: .78; cursor: default; }
/* Laadspinner in een knop met accent-achtergrond: wit i.p.v. het donkere accent van .admin-spin. */
.knop-spin {
  display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff; border-radius: 50%; animation: admin-spin .7s linear infinite;
  vertical-align: -2px; margin-right: 8px;
}
.uitleg { font-size: 12px; color: var(--licht); line-height: 1.5; margin-top: 10px; }

/* Verborgen ontwikkelaarsmodus: passcode-dialoog (5x tikken op "Eisen") + dev-blok */
.passcode-form { display: flex; gap: 8px; padding: 4px 6px 10px; }
.passcode-input {
  flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid var(--rand); border-radius: 12px;
  font-size: 18px; letter-spacing: .3em; text-align: center; background: #fff; color: var(--tekst);
}
.passcode-input:focus { outline: none; border-color: var(--accent); }
.passcode-form .opslaan-knop { width: auto; padding: 12px 18px; margin-top: 0; flex-shrink: 0; }
.passcode-fout { color: #c0392b; font-size: 12.5px; padding: 0 6px 8px; text-align: center; }
.passcode-fout[hidden] { display: none; }
.dev-blok { border-color: var(--accent); border-style: dashed; }
.dev-divider { border: none; border-top: 1px solid #ece5d5; margin: 20px 0 4px; }

/* Admin-bewerker: woningdata handmatig corrigeren (dev-/adminmodus). */
/* Admin-bewerkknop in de adresrij: zelfde vorm als de kaart-/deelknop, maar met accentrand zodat
   hij als admin-actie herkenbaar is. */
.bewerk-knop { color: var(--accent); border-color: var(--accent); }
.bewerk-knop:hover { background: var(--accent); color: #fff; }
.bewerk-box { max-width: 460px; max-height: 88vh; overflow-y: auto; padding: 14px; gap: 4px; }
.bewerk-form { display: flex; flex-direction: column; gap: 12px; padding: 4px 4px 2px; }
.bewerk-rij { display: flex; flex-direction: column; gap: 5px; }
.bewerk-label { font-size: 12.5px; font-weight: 600; color: var(--tekst); display: flex; align-items: center; gap: 8px; }
.bewerk-vast {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent); background: #f4ede0; border-radius: 6px; padding: 1px 6px;
}
/* De algemene .passcode-input is voor de code (gespatieerd, gecentreerd); in het bewerkformulier
   willen we gewone links uitgelijnde velden. */
.bewerk-form .passcode-input { font-size: 15px; letter-spacing: normal; text-align: left; padding: 10px 12px; }
.bewerk-acties { display: flex; gap: 8px; margin-top: 4px; }
.bewerk-acties .deel-optie, .bewerk-acties .opslaan-knop { flex: 1; margin-top: 0; padding: 12px; }
.bewerk-melding { color: #c0392b; font-size: 12.5px; padding: 2px 2px 0; }
.bewerk-melding[hidden] { display: none; }
/* Admin-platformoverzicht in het dev-paneel */
.admin-sub { margin-bottom: 14px; }
.admin-kop { display: flex; align-items: center; gap: 6px; font-size: 14px; margin: 6px 0 8px; color: var(--accent-donker); }
.admin-kop .lucide-icoon { width: 16px; height: 16px; }
.admin-kop-sub { font-weight: 500; font-size: 11.5px; color: var(--licht); }
.admin-mini-kop { font-size: 11.5px; font-weight: 700; color: var(--gedempt); text-transform: uppercase; letter-spacing: .03em; margin: 12px 0 5px; }
.admin-tiles { display: flex; flex-wrap: wrap; gap: 7px; }
.admin-tile { flex: 1 1 78px; background: #f7f4ee; border: 1px solid #ece5d5; border-radius: 8px; padding: 8px 10px; }
.admin-tile.accent { background: #fbf1e6; border-color: #f0dcc2; }
.at-val { font-family: var(--font-bedrag); font-size: 18px; font-weight: 800; color: var(--accent-donker); line-height: 1.1; font-variant-numeric: tabular-nums; }
.at-label { font-size: 11px; color: var(--licht); margin-top: 2px; }
.admin-bars { display: flex; flex-direction: column; gap: 5px; }
.admin-bar-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ab-label { flex: 0 0 34%; color: var(--gedempt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-track { flex: 1; height: 8px; background: #f1ecdf; border-radius: 999px; overflow: hidden; }
.ab-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.ab-val { flex: 0 0 auto; font-weight: 700; color: var(--accent-donker); min-width: 34px; text-align: right; }
.ab-status { margin-left: auto; font-weight: 700; font-size: 11.5px; padding: 2px 8px; border-radius: 8px; }
.ab-status.ok { background: #eef6ec; color: #3f6b34; }
.ab-status.waarschuwing { background: #fbeee6; color: #96502a; }
.ab-status.fout { background: #f7e0d8; color: #a5341c; }
.admin-hh-lijst { display: flex; flex-direction: column; gap: 6px; }
.admin-hh { background: #f7f4ee; border: 1px solid #ece5d5; border-radius: 8px; padding: 7px 10px; }
.ahh-naam { font-weight: 700; font-size: 13px; color: var(--tekst); }
.wl-nieuw { display: inline-block; background: var(--accent-donker); color: #fff; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 8px; vertical-align: 1px; }
.wl-uitgenodigd { display: inline-block; background: #eef6ec; color: #3f6b34; border: 1px solid #d6e9d0; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 0 6px; border-radius: 8px; vertical-align: 1px; }
.ahh-meta { font-size: 11.5px; color: var(--licht); margin-top: 1px; }
.admin-lid-lijst { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; padding-top: 6px; border-top: 1px solid #ece5d5; }
.admin-lid { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11.5px; align-items: baseline; }
.al-naam { font-weight: 700; color: var(--tekst); }
.al-meta { color: var(--licht); }
.admin-degrade { font-size: 12px; color: var(--licht); line-height: 1.5; background: #f7f4ee; border: 1px dashed #e0d7c4; border-radius: 8px; padding: 9px 11px; }
.admin-degrade .lucide-icoon { width: 14px; height: 14px; vertical-align: -2px; }
.admin-degrade-reden { color: #b0a996; font-size: 11px; }
.admin-spin { display: inline-block; width: 11px; height: 11px; border: 2px solid #e0d7c4; border-top-color: var(--accent); border-radius: 50%; animation: admin-spin .7s linear infinite; vertical-align: -1px; }
@keyframes admin-spin { to { transform: rotate(360deg); } }
/* Inklapbare admin-clusters (native <details>, standaard dicht) */
.admin-cluster { border: 1px solid var(--rand); border-radius: 8px; margin-bottom: 8px; background: #fffdf9; }
.admin-cluster > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; padding: 10px 12px; font-weight: 700; font-size: 13.5px; color: var(--accent-donker); user-select: none; }
.admin-cluster > summary::-webkit-details-marker { display: none; }
.admin-cluster > summary::after { content: "\25B8"; margin-left: auto; color: var(--licht); font-size: 12px; transition: transform .15s ease; }
.admin-cluster[open] > summary::after { transform: rotate(90deg); }
.admin-cluster > summary .lucide-icoon { width: 15px; height: 15px; }
.admin-cluster-body { padding: 2px 12px 12px; }
.dev-toggle { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--tekst); padding: 4px 0; cursor: pointer; }
.dev-toggle input { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--accent); }
.scrape-status { border-radius: 8px; padding: 10px 12px; margin: 2px 0 14px; font-size: 12.5px; }
.scrape-status-kop { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.5px; }
.scrape-status-sub { margin-top: 4px; opacity: .85; }
.scrape-status-sub a { color: inherit; font-weight: 600; text-decoration: underline; }
.scrape-status.onbekend { background: #f2ede2; color: var(--gedempt); }
.scrape-status.bezig { background: #eaf1f8; color: #2d5a86; }
.scrape-status.ok { background: #eef6ec; color: #3f6b34; }
.scrape-status.fout { background: #fbeee6; color: #96502a; }
.changelog-blok {
  max-height: 320px; overflow-y: auto; font-size: 12.5px; line-height: 1.5;
  border: 1px solid var(--rand); border-radius: 8px; padding: 10px 14px; background: #f9f7f2;
}
.changelog-blok h4 { font-size: 14px; margin: 12px 0 4px; }
.changelog-blok h4:first-child { margin-top: 0; }
.changelog-blok h5 { font-size: 12.5px; margin: 8px 0 2px; opacity: .8; }
.changelog-blok ul { margin: 0 0 6px; padding-left: 18px; }
.changelog-blok p { margin: 4px 0; }
.scrape-log-rij { padding: 8px 0; border-bottom: 1px solid var(--rand); }
.scrape-log-rij:last-child { border-bottom: none; }
.scrape-log-rij.fout .scrape-status-sub { color: #96502a; }
.sl-stats { margin-top: 2px; font-weight: 600; }
.sl-bronnen { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 6px; }
.sl-bron { font-size: 11px; padding: 1px 7px; border-radius: 8px; background: #eef1ea; }
.sl-bron.fout { background: #fbeee6; color: #96502a; }
/* Handmatige correcties in het adminpaneel. */
.admin-corr { padding: 7px 0; border-bottom: 1px solid var(--rand); font-size: 12px; }
.admin-corr:last-child { border-bottom: none; }
.ac-veld { font-weight: 700; margin-right: 8px; }
.ac-delta { color: var(--tekst); }
.ac-meta { display: block; margin-top: 2px; color: var(--gedempt); font-size: 11px; }
.status-stip {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #2d5a86;
  animation: status-puls 1.2s ease-in-out infinite;
}
@keyframes status-puls { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* Kaart-modal (klik op een woning in het Overzicht/Matches) */
.kaart-modal-overlay {
  position: fixed; inset: 0; z-index: 65; background: rgba(43,38,32,.55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom)); animation: match-fade .15s ease-out;
}
.kaart-modal {
  position: relative; width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto;
  display: flex; flex-direction: column; animation: match-pop .25s cubic-bezier(.34,1.56,.64,1);
}
.kaart-modal .kaart { flex-shrink: 0; }
.modal-sluit {
  position: absolute; top: 10px; left: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.9); color: #2b2620; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 5px rgba(0,0,0,.25);
}

/* Verticaal bladeren door je gelikete/afgewezen woningen: één volledige kaart per scherm, met
   scroll-snap. z-index onder de match-popup (60) en kaart-modal (65), boven de app-schil. */
.bladeraar-overlay {
  position: fixed; inset: 0; z-index: 58; background: var(--bg);
  display: flex; flex-direction: column; animation: match-fade .15s ease-out;
}
.bladeraar-kop {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  border-bottom: 1px solid var(--rand); background: #fffdf9;
}
.bladeraar-sluit {
  width: 36px; height: 36px; border-radius: 50%; border: none; background: none; flex-shrink: 0;
  color: var(--tekst); cursor: pointer; display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.bladeraar-sluit:hover { background: #f1ece2; }
.bladeraar-titel {
  flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 15px; font-weight: 700; color: var(--tekst);
}
.bladeraar-titel .lucide-icoon { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent-donker); }
.bladeraar-teller {
  flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: var(--gedempt);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bladeraar-baan {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch;
}
.bladeraar-slide {
  scroll-snap-align: start; min-height: 100%; box-sizing: border-box;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 14px 14px calc(22px + env(safe-area-inset-bottom));
}
.bladeraar-kaart { width: 100%; max-width: 460px; }
.bladeraar-slide.bladeraar-weg { opacity: 0; transform: scale(.96); transition: opacity .2s ease, transform .2s ease; }
.bladeraar-klaar { margin: auto; text-align: center; padding: 60px 20px; max-width: 340px; color: var(--gedempt); }
.bladeraar-klaar .leeg-merk { display: block; width: 56px; height: auto; margin: 0 auto 14px; opacity: .8; }
.bladeraar-klaar h2 { color: var(--tekst); margin: 0 0 6px; }

/* Sparkles-icoon in de kop bij de slimme selectie: de paarse slim-tint (zie de moduskeuze), zodat
   de feature herkenbaar blijft zonder het misleidende "AI"-label (de score is lokaal en
   deterministisch, geen AI-call; zie DECISIONS.md #37). */
.bladeraar-titel .bladeraar-slim-icoon { color: #6b3fa0; }

/* Zekerheidsblok boven een kaart in de slimme selectie: percentage, label en reden. Paarse AI-tint;
   de meterkleur en het cijfer volgen het zekerheidsniveau (hoog groen, midden amber, laag grijs). */
.bladeraar-score { margin: 0 0 12px; padding: 13px 15px; border-radius: 16px;
  background: linear-gradient(180deg, #f6f1fb, #f2ebfa); border: 1px solid #e6dbf6; }
.bs-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bs-pct { font-family: var(--font-bedrag); font-weight: 700; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.bs-lab { font-size: 12px; font-weight: 700; color: #6b3fa0; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.bs-lab .lucide-icoon { width: 13px; height: 13px; }
.bs-meter { height: 8px; border-radius: 999px; background: #e7dcf6; margin: 11px 0 9px; overflow: hidden; }
.bs-meter span { display: block; height: 100%; border-radius: 999px; background: #8b5cc4; }
.bs-reden { font-size: 12px; line-height: 1.45; color: #5a4a72; }
.bladeraar-score[data-niveau="hoog"] .bs-pct { color: #2e7d4f; }
.bladeraar-score[data-niveau="hoog"] .bs-meter span { background: #4a9e6f; }
.bladeraar-score[data-niveau="midden"] .bs-pct { color: #b0761d; }
.bladeraar-score[data-niveau="midden"] .bs-meter span { background: #c98a4b; }
.bladeraar-score[data-niveau="laag"] .bs-pct { color: #8c8577; }
.bladeraar-score[data-niveau="laag"] .bs-meter span { background: #a49b8c; }

/* Scroll-hint: wippende pijl + een kaartrand die net onderaan in beeld piept. */
.bladeraar-peek { position: absolute; left: 14px; right: 14px; bottom: 0; height: 26px; z-index: 20; pointer-events: none;
  background: #fff; border: 1px solid var(--rand); border-bottom: none; border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 16px rgba(43,38,32,.07); animation: match-fade .3s ease-out; }
.bladeraar-hint { position: absolute; left: 50%; bottom: calc(8px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 22; pointer-events: none; }
.bh-pil { display: inline-flex; align-items: center; gap: 6px; background: rgba(43,38,32,.92); color: #fff;
  font-size: 12px; font-weight: 700; padding: 6px 13px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.bh-pil .lucide-icoon { width: 14px; height: 14px; }
.bh-chev { color: var(--accent-donker); filter: drop-shadow(0 1px 3px rgba(255,255,255,.7)); animation: bladeraar-bob 1.25s ease-in-out infinite; }
.bh-chev .lucide-icoon { width: 28px; height: 28px; stroke-width: 2.4; }
@keyframes bladeraar-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@media (prefers-reduced-motion: reduce) { .bh-chev { animation: none; } }

/* Moduskeuze bij het starten van het terugkijken (neutraal / slimme selectie). */
.bladeraar-keuze-overlay { position: fixed; inset: 0; z-index: 66; background: rgba(43,38,32,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom)); animation: match-fade .15s ease-out; }
.bk-box { position: relative; width: 100%; max-width: 380px; background: var(--bg); border-radius: 20px;
  padding: 22px 20px 18px; box-shadow: 0 24px 60px -20px rgba(40,28,14,.5);
  animation: match-pop .25s cubic-bezier(.34,1.56,.64,1); display: flex; flex-direction: column; gap: 12px; }
.bk-sluit { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border: none; background: none;
  color: var(--gedempt); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.bk-sluit .lucide-icoon { width: 18px; height: 18px; }
.bk-titel { font-family: var(--font-kop); font-size: 20px; font-weight: 800; margin: 2px 40px 0 0; color: var(--tekst); letter-spacing: -.01em; }
.bk-sub { margin: 0; font-size: 13.5px; color: var(--gedempt); }
.bk-opt { display: flex; gap: 12px; align-items: flex-start; text-align: left; border: 1.5px solid var(--rand);
  background: #fff; border-radius: 16px; padding: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bk-opt:hover { border-color: var(--accent); }
.bk-opt.slim { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201,138,75,.22); }
.bk-opt:active { transform: scale(.99); }
.bk-icoon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; }
.bk-icoon.neutraal { background: #f0ece2; color: var(--accent-donker); }
.bk-icoon.slim { background: #efe7fb; color: #6b3fa0; }
.bk-icoon .lucide-icoon { width: 20px; height: 20px; }
.bk-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bk-ot { font-family: var(--font-kop); font-weight: 800; font-size: 15px; color: var(--tekst); display: flex; align-items: center; gap: 8px; }
.bk-od { font-size: 12.5px; color: var(--gedempt); line-height: 1.45; }
.bk-aanrader { font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--accent-donker);
  background: #f6e7d5; border-radius: 999px; padding: 2px 7px; }
.bk-voet { margin: 2px 0 0; font-size: 11.5px; color: var(--gedempt); line-height: 1.45; display: flex; gap: 7px; align-items: flex-start; }
.bk-voet .lucide-icoon { width: 14px; height: 14px; color: #6b3fa0; flex-shrink: 0; margin-top: 1px; }

/* Notities (gedeelde berichtjes bij een woning, in de kaart-modal) */
.notities {
  background: #fff; border: 1px solid var(--rand); border-radius: 12px;
  padding: 12px 14px; margin-top: 10px;
}
.notities-kop {
  display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700;
  color: var(--tekst); margin-bottom: 10px;
}
.notities-kop .lucide-icoon { width: 16px; height: 16px; color: var(--accent-donker); }
.notities-sub { font-weight: 500; font-size: 11.5px; color: var(--licht); }
.notitie-lijst { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.notitie {
  background: #f7f4ee; border: 1px solid #ece5d5; border-radius: 12px 12px 12px 4px;
  padding: 7px 11px; max-width: 88%; align-self: flex-start;
}
.notitie.eigen {
  background: #f2ede2; border-color: #e6dcc7; border-radius: 12px 12px 4px 12px; align-self: flex-end;
}
/* Kort oplichten van het laatste bericht bij openen vanuit een nieuw-bericht-melding. */
.notitie-focus { animation: notitie-flits 1.8s ease-out; }
@keyframes notitie-flits {
  0% { box-shadow: 0 0 0 0 rgba(201, 138, 75, 0); }
  25% { box-shadow: 0 0 0 3px rgba(201, 138, 75, .55); }
  100% { box-shadow: 0 0 0 0 rgba(201, 138, 75, 0); }
}
.notitie-meta { font-size: 10.5px; color: var(--licht); margin-bottom: 2px; }
.notitie-meta b { color: var(--accent-donker); font-weight: 700; }
.notitie-tekst { font-size: 13.5px; line-height: 1.4; color: var(--tekst); white-space: pre-wrap; word-break: break-word; }
.notitie-form { display: flex; gap: 8px; margin-top: 10px; }
.notitie-input {
  flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 999px;
  font-size: 14px; background: #fff; color: var(--tekst);
}
.notitie-input:focus { outline: none; border-color: var(--accent); }
.notitie-verstuur {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
}
.notitie-verstuur:active { transform: scale(.94); }
.notitie-verstuur .lucide-icoon { width: 18px; height: 18px; }
.notitie-count {
  display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600;
  color: var(--accent-donker); background: #f6ece0; border: 1px solid #ecd9c4;
  border-radius: 999px; padding: 1px 7px; vertical-align: middle;
}
.notitie-count .lucide-icoon { width: 12px; height: 12px; }
/* Gevuld accent bij een ongelezen berichtje van de ander (badge op het tabblad telt 'm mee). */
.notitie-count.ongelezen { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Popup bij het opstarten: nieuw(e) berichtje(s) van de ander bij een match */
.notitie-melding-box { max-height: 80vh; overflow-y: auto; }
.notitie-melding-item {
  display: block; width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 6px;
  border: 1px solid var(--rand); border-radius: 12px; background: #fff; cursor: pointer; font: inherit;
}
.notitie-melding-item:active { transform: scale(.98); }
.nm-adres { font-weight: 700; font-size: 13.5px; margin-bottom: 2px; color: var(--tekst); }
.nm-preview { font-size: 12.5px; color: var(--gedempt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-preview b { color: var(--accent-donker); }

/* Splash screen */
.splash {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #faf6ee, #efe7d6);
  transition: opacity .4s ease; padding: 24px;
}
.splash.weg { opacity: 0; pointer-events: none; }
.splash-inner { text-align: center; }
/* Logo: het merkteken (web/logo-wolken.svg), de wordmark met rookwolken van
   schoorsteen naar schoorsteen. Bron: visual_assets/merk/, kleur #a8632a. */
.splash-logo { display: block; width: min(78vw, 300px); height: auto; }
.slogan { margin-top: 22px; font-size: 22px; font-weight: 600; color: var(--gedempt); }
.slogan .hl { color: var(--accent-donker); font-weight: 800; }

/* Auth (supabase-modus): login + onboarding — kaart met logo, hergebruikt .profiel-overlay */
.auth-box {
  width: 100%; max-width: 360px; background: #fff; border-radius: 18px;
  padding: 34px 26px 24px; text-align: center; position: relative; overflow: hidden;
  box-shadow: 0 20px 55px rgba(80, 60, 30, .16);
}
.auth-box::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--accent), var(--accent-donker));
}
.auth-logo { display: block; width: 150px; max-width: 62%; height: auto; margin: 4px auto 0; }
.auth-logo-wolken { width: 190px; max-width: 78%; }
.auth-sub { font-size: 13.5px; color: var(--licht); margin: 6px 0 10px; font-weight: 500; }
.auth-sub b { color: var(--accent-donker); font-weight: 800; }
.auth-pitch { font-size: 13.5px; color: var(--gedempt); line-height: 1.5; margin: 0 4px 20px; }
.auth-form { display: flex; flex-direction: column; gap: 11px; margin: 0; }
.auth-form input {
  width: 100%; padding: 14px 15px; border: 1.5px solid var(--rand); border-radius: 12px;
  font-size: 16px; background: #fdfbf7; color: var(--tekst);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.auth-form input::placeholder { color: #bcb2a0; }
.auth-form input:focus {
  outline: none; border-color: var(--accent); background: #fff;
  box-shadow: 0 0 0 3px rgba(201, 138, 75, .16);
}
/* Startwensen-stap (U2): drie korte vragen in dezelfde auth-vormtaal. */
.start-wensen { text-align: left; }
.start-wensen select {
  width: 100%; padding: 14px 15px; border: 1.5px solid var(--rand); border-radius: 12px;
  font-size: 16px; background: #fdfbf7; color: var(--tekst);
}
.start-wensen select:focus { outline: none; border-color: var(--accent); background: #fff; }
.sw-label { font-size: 12.5px; font-weight: 600; color: var(--gedempt); margin-top: 4px; }
.sw-rij { display: flex; gap: 10px; }
.sw-rij input { min-width: 0; }
.sw-hint { font-size: 11.5px; color: var(--licht); line-height: 1.5; margin: -4px 0 0; }
#loginCode {
  text-align: center; font-family: 'SF Mono', 'Courier New', monospace;
  font-size: 24px; letter-spacing: 8px; font-weight: 700; color: var(--accent-donker);
}
/* Tweede stap (code invoeren) krijgt duidelijk lucht t.o.v. het "code opvragen"-blok erboven. */
#codeForm { margin-top: 12px; }
/* "code uit de mail"-scheiding tussen de twee stappen */
.auth-scheiding { display: flex; align-items: center; gap: 10px; margin: 14px 2px 6px; }
.auth-scheiding::before, .auth-scheiding::after { content: ""; height: 1px; flex: 1; background: var(--rand); }
.auth-scheiding span { font-size: 11px; color: var(--licht); text-transform: uppercase; letter-spacing: .06em; }
.opslaan-knop { transition: filter .15s ease, transform .05s ease; }
.opslaan-knop:hover { filter: brightness(1.04); }
.opslaan-knop:active { transform: scale(.985); }
.auth-keuze { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.auth-keuze[hidden] { display: none; }
.opslaan-knop.zwak { background: #fff; color: var(--accent); border: 1px solid var(--accent); }
.auth-melding { font-size: 13px; color: var(--gedempt); line-height: 1.5; margin: 12px 2px 0; min-height: 18px; }
.auth-privacy { font-size: 11px; color: var(--licht); line-height: 1.55; margin: 16px 4px 2px; }
.auth-privacy a { color: var(--gedempt); }
.juridisch-links { text-align: center; font-size: 12px; color: var(--licht); margin: 4px 0 12px; }
.juridisch-links a { color: var(--gedempt); }
.auth-code { font-size: 15px; color: var(--tekst); margin: 6px 0; }
.auth-code b { font-size: 22px; letter-spacing: .12em; color: var(--accent-donker); }
/* Popup na "stuur me een inlogcode" (i.p.v. de kleine grijze .auth-melding-regel), met spam-hint */
.code-popup-box { padding: 26px 22px 22px; text-align: center; }
.code-popup-icoon {
  width: 46px; height: 46px; border-radius: 50%; background: var(--chip-bg); color: var(--accent-donker);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.code-popup-icoon svg { width: 22px; height: 22px; }
.code-popup-titel { font-family: var(--font-kop); font-size: 19px; font-weight: 800; margin: 0 0 8px; }
.code-popup-tekst { font-size: 14px; color: var(--gedempt); line-height: 1.55; margin: 0 0 18px; }
.code-popup-box .deel-optie { width: 100%; }
.auth-uitlog {
  display: block; width: 100%; background: none; border: none; cursor: pointer;
  font-size: 12px; color: var(--gedempt); text-decoration: underline; text-underline-offset: 2px;
  margin: 18px 0 2px; padding: 4px;
}
.auth-landing-knop {
  position: fixed; top: calc(14px + env(safe-area-inset-top)); right: 14px; z-index: 51;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--rand);
  background: rgba(255, 255, 255, .85); backdrop-filter: blur(4px);
  font-size: 12px; font-weight: 700; color: var(--accent-donker); text-decoration: none;
  box-shadow: 0 4px 14px rgba(80, 60, 30, .12);
}
.auth-landing-knop:hover { background: #fff; }
.auth-landing-knop .lucide-icoon { width: 14px; height: 14px; }
.auth-uitlog:hover { color: var(--tekst); }

/* Profielmenu (account-sheet bij tik op je naam) + uitnodigingscode */
.profiel-menu-kop { text-align: center; padding: 8px 10px 12px; }
.pm-naam { font-size: 18px; font-weight: 800; color: var(--accent-donker); }
.pm-sub { font-size: 12.5px; color: var(--licht); margin-top: 3px; line-height: 1.45; }
.pm-code-blok { background: #faf6ee; border: 1px solid #ecdfca; border-radius: 12px; padding: 12px; margin: 2px 6px 8px; text-align: center; }
.pm-code-label { font-size: 12px; color: var(--gedempt); margin-bottom: 8px; }
.pm-code { display: block; max-width: 240px; margin: 0 auto; font-family: 'SF Mono', 'Courier New', monospace; font-size: 26px; font-weight: 700; letter-spacing: 8px; color: var(--accent-donker); background: #fff; border: 1px dashed #d9c7a8; border-radius: 8px; padding: 10px 6px 10px 14px; }
/* In het profielmenu vullen codebox én "Code delen"-knop de volle breedte van het blok → uitgelijnd. */
.pm-code-blok .pm-code { max-width: none; margin: 0; }
.pm-code-blok .deel-optie { width: 100%; margin-top: 10px; }
.deel-optie.pm-gevaar { color: #c0392b; }
.match-uitnodiging { display: flex; flex-direction: column; align-items: center; line-height: 1.55; }

/* QR-deellaag (uitnodigingscode / Hatch delen) */
.qr-box { text-align: center; padding: 16px 18px 10px; max-height: 92vh; overflow-y: auto; }
.qr-titel { font-family: var(--font-kop); font-size: 18px; font-weight: 800; color: var(--accent-donker); }
.qr-tekst { font-size: 13px; color: var(--gedempt); line-height: 1.5; margin: 6px 4px 14px; }
.qr-plaat { width: 220px; max-width: 74vw; margin: 0 auto 12px; background: #fff; border: 1px solid var(--rand); border-radius: 14px; padding: 12px; box-shadow: 0 6px 20px rgba(80,60,30,.08); }
.qr-plaat svg { display: block; width: 100%; height: auto; }
.qr-code { font-family: 'SF Mono', 'Courier New', monospace; font-size: 22px; font-weight: 700; letter-spacing: 6px; color: var(--accent-donker); margin: 0 0 8px; padding-left: 6px; }
.qr-link { font-size: 12px; color: var(--licht); word-break: break-all; margin: 0 6px 14px; }

/* Eén-scherm handleiding (eerste login + menu → Help) */
.handleiding-overlay { z-index: 75; padding: 20px; overflow-y: auto; }
.handleiding-box { width: 100%; max-width: 380px; max-height: 90vh; background: #fff; border-radius: 18px; padding: 28px 24px 22px; text-align: left; box-shadow: 0 20px 55px rgba(80,60,30,.16); position: relative; overflow-x: hidden; overflow-y: auto; }
.handleiding-box::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--accent), var(--accent-donker)); }
.hl-logo { display: block; width: 118px; height: auto; margin: 4px auto 4px; }
.hl-titel { text-align: center; font-size: 21px; color: var(--accent-donker); margin: 0 0 6px; font-weight: 800; }
.hl-intro { text-align: center; font-size: 13.5px; color: var(--gedempt); line-height: 1.5; margin: 0 0 18px; }
.hl-stap { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 13px; }
.hl-stap .hl-icoon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; background: #faf1e6; color: var(--accent-donker); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.hl-stap p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--tekst); }
.hl-stap p b { color: var(--accent-donker); }
.hl-code { font-family: 'SF Mono', 'Courier New', monospace; letter-spacing: 3px; color: var(--accent-donker); background: #faf6ee; border: 1px dashed #d9c7a8; border-radius: 8px; padding: 1px 7px; white-space: nowrap; }
.hl-knop { margin-top: 14px; }

/* Toggle-rij in het profielmenu (recap-mail aan/uit) */
.pm-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; border: 1px solid var(--rand); border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--tekst); cursor: pointer; }
.pm-toggle input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }