/* Ledenportaal — overrides bovenop de gedeelde backoffice-stylesheet
   (/css/styles.css is de huisstijl-bron: kleuren, fonts, sidebar, cm-cards,
   knoppen, roi-tabel). Hier staan alleen leden-specifieke onderdelen. */

/* Rustiger, premium beeld: de document-scrollbalk verdwijnt (scrollen blijft
   gewoon werken). De subtiele balk binnen kaarten/chat/modals blijft behouden. */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; }

.lp-laden { min-height: 100vh; display: grid; place-items: center; color: var(--fg-muted); font-size: 14px; }
.lp-tester-banner { margin: 14px 32px 0; background: #fff8e6; border: 1px solid #e8d9a8; border-radius: 12px; padding: 10px 16px; font-size: 13px; color: #6b5a23; }
.lp-voet { text-align: center; font-size: 11.5px; color: var(--fg-muted); padding: 10px 32px 28px; margin-top: auto; }

/* ── De Poort: het originele leden-login-ontwerp (volledig navy, goud embleem) ── */
.lp-poort { min-height: 100vh; position: relative;
  background: #0a1929 url('/login-bg.jpg') center center / cover no-repeat fixed;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 18px 30px; }
.lp-poort::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 18, 30, .84) 0%, rgba(10, 25, 41, .78) 45%, rgba(6, 14, 24, .9) 100%); }
.lp-poort > * { position: relative; }
.lp-poort-embleem { width: 92px; height: 92px; border-radius: 50%; border: 1.5px solid rgba(201, 160, 78, .6);
  background: rgba(8, 18, 30, .35); display: grid; place-items: center; color: #c9a04e; margin-bottom: 18px;
  box-shadow: 0 0 0 6px rgba(201, 160, 78, .07); }
.lp-poort-embleem svg { width: 52px; height: 52px; }
.lp-poort-titel { font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1.12; color: #fff; text-align: center; margin: 0; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.lp-poort-sub { font-size: 11.5px; font-weight: 600; letter-spacing: .38em; text-transform: uppercase; color: #c9a04e; margin: 12px 0 30px; text-align: center; padding-left: .38em; }
.lp-poort-kaart { width: min(520px, 100%); background: rgba(10, 22, 37, .78); border: 1px solid rgba(255, 255, 255, .1);
  border-top: 2px solid rgba(201, 160, 78, .5);
  border-radius: 16px; padding: 30px 36px 26px; backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4); text-align: center; }
.lp-poort-kop { font-family: var(--font-display); font-size: 27px; font-weight: 700; color: #fff; margin: 0; }
.lp-poort-kop::after { content: ''; display: block; width: 34px; height: 2.5px; background: var(--c-accent-red); border-radius: 2px; margin: 10px auto 14px; }
.lp-poort-intro { font-size: 13.5px; line-height: 1.6; color: #b8c4d2; margin: 0 auto 20px; max-width: 40ch; }
.lp-poort-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #8fa0b3; margin: 0 0 7px; text-align: left; }
.lp-poort-kaart input#email { width: 100%; padding: 14px 16px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .16);
  background: #f4f6f9; color: var(--c-ink); font: inherit; font-size: 15px; outline: none; text-align: left; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12); }
.lp-poort-kaart input#email:focus { border-color: var(--c-accent-red); box-shadow: 0 0 0 3px rgba(226, 131, 116, .22); }
.lp-poort-kaart .lp-login-knoppen { margin-top: 12px; }
.lp-poort-kaart .cb-btn-primary { width: 100%; padding: 14px; font-size: 15px; }
.lp-poort-melding { margin-top: 16px; font-size: 12.5px; line-height: 1.6; color: #8fa0b3; max-width: 44ch; margin-left: auto; margin-right: auto; }
.lp-poort-melding.is-ok { color: #9fc6ae; }
.lp-poort-fout { margin-top: 16px; font-size: 13px; line-height: 1.6; color: #f0a898; }
.lp-poort-voet { margin-top: 24px; font-size: 12.5px; color: #8fa0b3; text-align: center; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
.lp-poort-voet a { color: #c9a04e; text-decoration: none; }
.lp-poort-kaart .lp-sms-input { background: #f2f4f7; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; width: 100%; color: var(--c-ink); }
.lp-poort-kaart .login-switch a { color: #c9a04e; }
@media (max-width: 560px) { .lp-poort-titel { font-size: 34px; } .lp-poort-kaart { padding: 24px 22px 20px; } }

/* login-extra's (bovenop .login-screen/.login-card van het backoffice) */
.lp-melding { margin-top: 10px; font-size: 13px; color: #3d7a5c; min-height: 18px; }
.lp-itsme { width: 100%; padding: 12px 18px; border-radius: 10px; border: none; background: #ff4612; color: #fff; font-weight: 600; margin-bottom: 4px; }
.lp-of { font-size: 12px; color: var(--fg-muted); margin: 10px 0; }
.lp-itsme-uit { margin-top: 14px; font-size: 12px; color: var(--fg-muted); }

/* dashboard */
.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.card-title .lp-embleem, .card-title svg { width: 17px; height: 17px; vertical-align: -3px; color: var(--c-accent-hover); display: inline-block; }
.lp-embleem svg { width: 19px; height: 19px; }
.lp-cijfer { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--c-ink); line-height: 1.05; font-variant-numeric: tabular-nums; }
.lp-cijfer-sub { font-size: 12px; color: var(--fg-muted); margin-top: 5px; }
.lp-kv { margin-top: 13px; display: grid; gap: 7px; font-size: 13px; }
.lp-kv > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.lp-kv span { color: var(--fg-muted); }
.lp-kv b { font-weight: 600; color: var(--c-ink); font-variant-numeric: tabular-nums; text-align: right; }
.lp-voetnoot { font-size: 11.5px; color: var(--fg-muted); margin-top: 10px; line-height: 1.5; }
.lp-klein { font-size: 10.5px; color: var(--fg-muted); display: block; }
.lp-oms { white-space: normal; min-width: 200px; text-align: left !important; font-weight: 400; }

/* status-pillen (zelfde vormtaal als de backoffice-badges) */
.lp-pil { display: inline-block; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .04em; border-radius: 999px; padding: 3px 11px; }
.lp-pil-ok { background: #ecf5ef; color: #3d7a5c; }
.lp-pil-open { background: #fdf0ea; color: #c1664f; }
.lp-pil-vooruit { background: #f2f5fa; color: #4a6280; }

/* leden / tafels */
.lp-genoten { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.lp-genoot { border: 1px solid var(--border-subtle); border-radius: 14px; padding: 16px 10px 14px; text-align: center;
  background: linear-gradient(180deg, #fdfbf8 0%, #ffffff 46%); box-shadow: 0 1px 2px rgba(13, 23, 41, .04); }
.lp-genoot img, .lp-init { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; margin: 0 auto 9px; display: block; background: var(--c-body);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(226, 131, 116, .35), 0 3px 8px rgba(13, 23, 41, .1); }
.lp-init { display: grid; place-items: center; font-family: var(--font-display); font-size: 19px; color: var(--c-accent-hover); border: 1px solid var(--border-default); }
.lp-genoot-naam { font-size: 12.5px; font-weight: 600; color: var(--c-ink); line-height: 1.25; }
/* heraldische rol-labels: kleine kapitalen met sierlijntjes (monogram-stijl) —
   bestuursfuncties in navy, overige in goud; élke tekstlengte past netjes */
.lp-rolchip { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #a3814a; line-height: 1.45; text-align: center; }
.lp-rolchip::before, .lp-rolchip::after { content: ''; height: 1px; flex: 0 1 26px; }
.lp-rolchip::before { background: linear-gradient(90deg, transparent, #d9c69a); }
.lp-rolchip::after { background: linear-gradient(90deg, #d9c69a, transparent); }
.lp-rolchip-bestuur { color: #16283f; letter-spacing: .13em; }
.lp-rolchip-bestuur::before { background: linear-gradient(90deg, transparent, #6c7f99); }
.lp-rolchip-bestuur::after { background: linear-gradient(90deg, #6c7f99, transparent); }
.lp-genoot-sinds { font-size: 10px; color: var(--fg-muted); opacity: .8; margin-top: 3px; }
.lp-uittredend { opacity: .55; }
.lp-tafelkaart { position: relative; overflow: hidden; }
.lp-tafelkaart.lp-eigen { outline: 2px solid var(--c-accent-red); outline-offset: -2px; }
.lp-eigen-label { position: absolute; top: 14px; right: 16px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent-hover); font-weight: 700; }
.lp-watermerk { position: absolute; right: -14px; bottom: -16px; width: 100px; height: 100px; color: var(--c-peach); pointer-events: none; }
.lp-watermerk svg { width: 100%; height: 100%; }

/* chat-CSS is gedeeld → public/css/styles.css (lp-chat-*) */

/* vragen */
.lp-vraag-form { display: grid; gap: 10px; max-width: 560px; }
.lp-vraag-form input, .lp-vraag-form textarea { width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border-default); background: #fff; font: inherit; outline: none; }
.lp-vraag-form input:focus, .lp-vraag-form textarea:focus { border-color: var(--c-accent-red); box-shadow: 0 0 0 3px rgba(226, 131, 116, .18); }
.lp-vraag-kaart { margin-bottom: 14px; }
.lp-vraag-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; }
.lp-vraag-meta { font-size: 11.5px; color: var(--fg-muted); margin-top: 3px; }
.lp-vraag-tekst { font-size: 13.5px; margin-top: 10px; white-space: pre-wrap; }
.lp-vraag-antwoord { margin-top: 12px; background: var(--c-body); border-left: 3px solid var(--c-accent-red); border-radius: 0 10px 10px 0; padding: 10px 14px; font-size: 13.5px; white-space: pre-wrap; }
.lp-vraag-antwoord-kop { font-size: 11px; font-weight: 700; color: var(--c-accent-hover); margin-bottom: 4px; }

/* stemmingen */
.lp-stem-kaart { margin-bottom: 16px; }
.lp-stem-opties { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.lp-stem-knop { border: 1.5px solid var(--c-accent-red); background: #fff; color: var(--c-accent-hover); font-weight: 600; font-size: 13.5px; border-radius: 999px; padding: 10px 22px; transition: background .15s, color .15s; }
.lp-stem-knop:hover { background: var(--c-accent-red); color: #fff; }
.lp-stem-knop:disabled { opacity: .5; }
.lp-stem-bevestiging { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; background: #ecf5ef; color: #3d7a5c; border: 1px solid #dcebe1; border-radius: 999px; padding: 8px 18px; font-size: 12.5px; line-height: 1.4; }
.lp-stem-bevestiging svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 6px; }
.lp-stem-balken { margin-top: 14px; display: grid; gap: 8px; }
.lp-stem-balkrij { display: grid; grid-template-columns: minmax(110px, 180px) 1fr 76px; gap: 10px; align-items: center; font-size: 13px; }
.lp-stem-balkrij.is-mijn .lp-stem-balklabel { font-weight: 700; color: var(--c-accent-hover); }
.lp-stem-balk { height: 12px; background: var(--c-body); border-radius: 999px; overflow: hidden; border: 1px solid var(--border-subtle); }
.lp-stem-balk i { display: block; height: 100%; background: var(--c-accent-red); border-radius: 999px; min-width: 2px; }
.lp-stem-balkn { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.lp-stem-balkrij.is-winnaar .lp-stem-balklabel { font-weight: 700; color: var(--c-ink); }
.lp-stem-balkrij.is-winnaar .lp-stem-balk i { background: var(--c-sidebar); }

/* stemmingen — filters, deelname-avatars, voorlopige stand, online-chip */
.lp-stem-filters { display: flex; gap: 8px; margin: 0 0 18px; flex-wrap: wrap; }
.lp-stem-filter { border: 1px solid var(--border-default); background: #fff; color: var(--fg-muted); font: inherit; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 7px 16px; cursor: pointer; transition: .15s; }
.lp-stem-filter:hover { border-color: var(--c-accent-red); color: var(--c-accent-hover); }
.lp-stem-filter.active { background: var(--c-sidebar); border-color: var(--c-sidebar); color: #fff; }
.lp-stem-filter-n { display: inline-block; min-width: 17px; text-align: center; font-size: 10.5px; background: rgba(13, 23, 41, .08); border-radius: 999px; padding: 1px 5px; margin-left: 4px; }
.lp-stem-filter.active .lp-stem-filter-n { background: rgba(255, 255, 255, .18); }
.lp-stem-sectie { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--c-ink); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.lp-stem-sectie svg { width: 17px; height: 17px; color: var(--c-accent-hover); }
.lp-stem-vraag { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.22; letter-spacing: .01em; }
.lp-stem-kaart { padding: 26px 28px; transition: box-shadow .2s; }
.lp-stem-kaart:hover { box-shadow: 0 2px 6px rgba(13, 23, 41, .06), 0 14px 34px rgba(13, 23, 41, .07); }
.lp-stem-kaart.is-actie:hover { box-shadow: inset 3px 0 0 var(--c-accent-red), 0 2px 6px rgba(13, 23, 41, .06), 0 14px 34px rgba(13, 23, 41, .07); }
.lp-stem-kaart.is-actie { box-shadow: inset 3px 0 0 var(--c-accent-red), var(--shadow-card); }
.lp-stem-timer.is-bijna { background: linear-gradient(135deg, #fbe3da, #f8d5c8); border-color: #ecc0ae; }
.lp-stand-kop { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--c-accent-hover); white-space: nowrap; }
.lp-stand-kop::after { content: ''; flex: 1; height: 1px; background: var(--border-subtle); }
.lp-stand-kop .lp-stand-sub { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-muted); }
.lp-stem-deelname { display: flex; align-items: center; gap: 14px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--border-subtle); }
.lp-stem-avatars { display: flex; flex-shrink: 0; }
.lp-stem-avatar { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; margin-left: -8px; background: var(--c-body); display: grid; place-items: center; box-shadow: 0 1px 3px rgba(13, 23, 41, .15); }
.lp-stem-avatar:first-child { margin-left: 0; }
.lp-stem-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lp-stem-avatar .lp-sa-init { font-size: 11px; font-weight: 700; color: var(--c-accent-hover); }
.lp-stem-avatar.is-mij { border-color: var(--c-accent-red); }
.lp-stem-deelname-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.lp-stem-deelname-n { font-size: 12.5px; color: var(--fg-muted); }
.lp-stem-deelname-n strong { color: var(--c-ink); }
.lp-stem-voortgang { display: block; height: 6px; background: var(--c-body); border-radius: 999px; overflow: hidden; border: 1px solid var(--border-subtle); }
.lp-stem-voortgang i { display: block; height: 100%; background: var(--c-sidebar); border-radius: 999px; transition: width .4s; }
.lp-stemgedrag-naam { display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px 3px 3px; }
.lp-stemgedrag-naam .lp-stem-avatar { width: 24px; height: 24px; margin-left: 0; border-width: 1px; }
.lp-online-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 4px 12px; }
.lp-online-chip i { width: 7px; height: 7px; border-radius: 50%; }
.lp-online-chip.is-on { background: #ecf5ef; color: #3d7a5c; }
.lp-online-chip.is-on i { background: #57a97e; box-shadow: 0 0 0 3px rgba(87, 169, 126, .18); }
.lp-online-chip.is-off { background: #fbf0ec; color: #b06553; }
.lp-online-chip.is-off i { background: #cf8b7a; }

/* Poll-balken (Mighty-stijl in huisstijl): label ín de balk, vulling = aandeel,
   avatars + % rechts. Klikbalken vóór het stemmen, resultaatbalken erna. */
.lp-poll { margin-top: 14px; display: grid; gap: 11px; }
.lp-poll-rij { position: relative; overflow: hidden; border-radius: 14px; background: #faf9f7; border: 1px solid #efece6; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 0 18px; }
.lp-poll-fill { position: absolute; top: 0; left: 0; bottom: 0; background: linear-gradient(90deg, #ffeee8, #ffe3da); border-right: 2px solid rgba(226, 131, 116, .35); transition: width .5s cubic-bezier(.22, .8, .3, 1); }
.lp-poll-rij.is-winnaar .lp-poll-fill { background: linear-gradient(90deg, #fde4dc, #f9d3c7); border-right-color: rgba(208, 107, 92, .5); }
.lp-poll-label { position: relative; font-size: 14px; font-weight: 600; color: var(--c-ink); padding: 13px 0; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lp-poll-tag { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: #fff; border: 1px solid var(--border-default); border-radius: 999px; padding: 2px 9px; color: var(--fg-muted); }
.lp-poll-tag.is-mij { border-color: var(--c-accent-red); color: var(--c-accent-hover); }
.lp-poll-rechts { position: relative; display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lp-poll-pct { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 700; color: var(--c-ink); }
.lp-poll-n { font-size: 11px; color: var(--fg-muted); white-space: nowrap; }
.lp-poll-avatars { display: flex; align-items: center; }
.lp-poll-avatars .lp-stem-avatar { width: 26px; height: 26px; }
.lp-poll-meer { font-size: 10.5px; font-weight: 700; color: var(--fg-muted); background: #fff; border: 1px solid var(--border-default); border-radius: 999px; padding: 3px 7px; margin-left: -6px; position: relative; }
.lp-poll-keuzes { margin-top: 14px; display: grid; gap: 10px; }
.lp-stem-knop.lp-poll-keuze { width: 100%; text-align: left; border: 1.5px solid #e9e4dc; background: #fff; color: var(--c-ink); border-radius: 14px; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, transform .1s, box-shadow .15s; }
.lp-stem-knop.lp-poll-keuze:hover { box-shadow: 0 3px 10px rgba(226, 131, 116, .13); }
.lp-stem-knop.lp-poll-keuze:hover { background: var(--c-peach); color: var(--c-ink); border-color: var(--c-accent-red); transform: translateY(-1px); }
.lp-poll-stemtxt { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent-hover); opacity: 0; transition: opacity .15s; flex-shrink: 0; }
.lp-stem-knop.lp-poll-keuze:hover .lp-poll-stemtxt { opacity: 1; }
.lp-poll-stemtxt svg { width: 14px; height: 14px; }
.lp-stem-knop.lp-poll-keuze.is-onthouding { border-style: dashed; }
.lp-stem-knop.lp-poll-keuze.is-onthouding .lp-poll-label { color: var(--fg-muted); font-weight: 500; }

/* gesegmenteerde countdown (dagen · uur · min · sec) in de navy timer-pil */
.lp-timer-cellen { display: inline-flex; gap: 5px; }
.lp-timer-cel { display: inline-flex; flex-direction: column; align-items: center; background: #fff; border: 1px solid #f0ded2; border-radius: 9px; padding: 3px 9px 4px; min-width: 44px; box-shadow: 0 1px 2px rgba(13, 23, 41, .04); }
.lp-timer-cel b { font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.1; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.lp-timer-cel i { font-style: normal; font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #c08e7d; }
.lp-stem-timer.is-bijna .lp-timer-cel { border-color: #e5b5a2; }
.lp-stem-timer.is-bijna .lp-timer-cel i { color: var(--c-accent-hover); }

/* keuze-marker (radio-achtig) op de klikbalken */
.lp-poll-links { position: relative; display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.lp-poll-kies { width: 21px; height: 21px; border-radius: 50%; border: 2px solid var(--border-default); flex-shrink: 0; display: inline-grid; place-items: center; transition: border-color .15s, background .15s; }
.lp-poll-kies::after { content: ''; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(0, -1px); opacity: 0; transition: opacity .15s; }
.lp-stem-knop.lp-poll-keuze:hover .lp-poll-kies { border-color: var(--c-accent-red); background: var(--c-accent-red); }
.lp-stem-knop.lp-poll-keuze:hover .lp-poll-kies::after { opacity: 1; }

/* kroon-tag voor de meerderheid (goud — spaarzaam premium-accent) */
.lp-poll-tag.is-win { display: inline-flex; align-items: center; gap: 5px; border-color: #dcc389; color: #a5842c; background: #fdf8ec; }
.lp-poll-tag.is-win svg { width: 12px; height: 12px; }

/* huisstijl-iconen (SVG, geen emoji) in timer/voetnoten/banners */
.lp-stem-timer .lp-timer-ico svg { width: 13.5px; height: 13.5px; display: block; }
.lp-oog-ico svg, .lp-inline-ico svg { width: 14px; height: 14px; vertical-align: -2.5px; display: inline-block; }
.lp-oog-ico { color: var(--c-accent-hover); margin-right: 5px; }
.lp-inline-ico { color: var(--c-accent-hover); }
.lp-vink-ico { color: #57a97e; margin-right: 6px; }
.lp-vink-ico svg { width: 15px; height: 15px; vertical-align: -3px; display: inline-block; }
.lp-tester-banner .lp-inline-ico { color: #a5842c; }

/* stemmingen — soort, timer, uitslag, stemgedrag */
.lp-stem-intro { font-size: 13px; color: var(--fg-muted); line-height: 1.55; margin: 2px 0 18px; }
.lp-stem-pillen { display: inline-flex; gap: 6px; flex-shrink: 0; }
.lp-soort-asset, .lp-soort-werking { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: 700; }
.lp-soort-asset { background: #f2f5fa; color: #4a6280; }
.lp-soort-werking { background: #fdf0ea; color: #c1664f; }
.lp-stem-timer { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; background: linear-gradient(135deg, #fdf6f0, #fbede4); border: 1px solid #f2ddd0; color: var(--c-ink); border-radius: 999px; padding: 7px 16px 7px 13px; font-size: 12.5px; }
.lp-stem-timer strong { color: var(--c-ink); font-variant-numeric: tabular-nums; }
.lp-timer-ico { font-size: 13px; color: var(--c-accent-hover); }
.lp-uitslag { margin-top: 14px; background: var(--c-body); border-radius: 12px; padding: 13px 16px; }
.lp-uitslag-kop { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--c-ink); }
.lp-uitslag-vink { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #57a97e; color: #fff; font-size: 12px; }
.lp-uitslag-staking { color: var(--c-accent-hover); }
.lp-uitslag-noot { font-size: 12.5px; color: var(--fg-muted); margin-top: 6px; line-height: 1.5; }
.lp-stem-knop.is-onthouding { border-color: var(--border-default); color: var(--fg-muted); }
.lp-stem-knop.is-onthouding:hover { background: var(--fg-muted); color: #fff; border-color: var(--fg-muted); }
.lp-stemgedrag { margin-top: 14px; border-top: 1px solid var(--border-subtle); padding-top: 12px; }
.lp-stemgedrag > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--c-accent-hover); list-style: none; }
.lp-stemgedrag > summary::-webkit-details-marker { display: none; }
.lp-stemgedrag > summary::before { content: '▸ '; }
.lp-stemgedrag[open] > summary::before { content: '▾ '; }
.lp-stemgedrag-groep { margin-top: 11px; }
.lp-stemgedrag-keuze { font-size: 12px; font-weight: 700; color: var(--c-ink); margin-bottom: 6px; }
.lp-stemgedrag-namen { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-stemgedrag-naam { font-size: 12px; background: #fff; border: 1px solid var(--border-default); border-radius: 999px; padding: 4px 11px; color: var(--c-ink); }
.lp-stemgedrag-naam.is-mij { border-color: var(--c-accent-red); color: var(--c-accent-hover); font-weight: 600; }

/* mobiel: sidebar wordt een compacte topnavigatie */
@media (max-width: 820px) {
  .app { flex-direction: column; }
  .lp-sidebar { width: 100%; min-width: 0; height: auto; position: static; }
  .lp-sidebar .sb-nav { display: flex; overflow-x: auto; padding: 4px 8px; scrollbar-width: none; }
  .lp-sidebar .sb-nav::-webkit-scrollbar { display: none; }
  .lp-sidebar .sb-section { display: none; }
  .lp-sidebar .sb-item { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; padding: 9px 13px; }
  .lp-sidebar .sb-item.active { border-left: none; border-bottom-color: var(--c-accent-red); background: none; }
  .lp-sidebar .sb-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; }
  .lp-sidebar .sb-addr { margin-bottom: 0; }
  .topbar { padding: 12px 18px; }
  .content { padding: 20px 16px; }
}

/* Vraag het aan Merlijn (topbar) */
.lp-topbar-rechts { display: flex; align-items: center; gap: 14px; }

/* Volledige ledenfiche + tafeldossier (besluit voorzitter 10-7-2026) */
.lp-terug { display: inline-block; margin-bottom: 12px; font-size: 13px; color: var(--fg-muted); text-decoration: none; }
.lp-terug:hover { color: var(--c-accent-red); }
.lp-genoot-link { text-decoration: none; color: inherit; transition: border-color .16s, transform .16s, box-shadow .16s; }
.lp-genoot-link:hover { border-color: var(--c-accent-red); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13, 23, 41, .09); }
.lp-fiche-kop { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.lp-fiche-foto { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none;
  box-shadow: 0 0 0 4px rgba(226, 131, 116, .15); font-size: 26px; line-height: 84px; text-align: center; }
.lp-fiche-sub { color: var(--fg-muted); font-size: 13.5px; margin-top: 4px; }
.lp-fiche-uit { color: #c0392b; font-weight: 600; }
.lp-fiche-tafel { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 13px; color: var(--fg-muted); }
.lp-fiche-tafel .lp-embleem svg { width: 20px; height: 20px; }
.lp-fiche-grids { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px 30px; }
.lp-kv-sub { color: var(--fg-muted); font-weight: 400; font-size: 11.5px; }
.lp-dossier-knop { display: inline-block; margin-top: 14px; text-decoration: none; width: auto; padding: 9px 20px; font-size: 13.5px; position: relative; z-index: 1; }
@media (max-width: 700px) { .lp-fiche-kop { flex-direction: column; text-align: center; } .lp-fiche-tafel { justify-content: center; } }
.lp-kv b.lf-roi-pos, .rt-bl-table td.lf-roi-pos { color: #2f7f4d; }
.lp-kv b.lf-roi-neg, .rt-bl-table td.lf-roi-neg { color: #b23a3a; }
.lp-kv-srij { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding-left: 14px; font-size: 12px; }
.lp-kv-srij span { color: var(--fg-muted); }
.lp-kv-srij b { font-weight: 500; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.lp-genoot { position: relative; }
.lp-pdot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.lp-pdot-recent { background: #2f7f4d; }
.lp-pdot-oud { background: #d4a017; }
.lp-pdot-nooit { background: #c0392b; }

/* Overzicht-acties (rechts naast de paginatitel) + bevestigingsdialogen */
.lp-kop-rij { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 6px; }
.lp-kop-rij .cb-page-h1 { margin-bottom: 0; }
.lp-acties { display: flex; gap: 10px; flex-wrap: wrap; }
.lp-actie { display: inline-flex; align-items: center; gap: 10px; padding: 8px 22px 8px 9px; border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .01em; cursor: pointer; border: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s, color .16s; }
.lp-actie-ico { width: 28px; height: 28px; min-width: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.lp-actie-ico svg { width: 15px; height: 15px; }
.lp-actie-vh { background: linear-gradient(135deg, #e79184 0%, #d06b5c 100%); color: #fff;
  box-shadow: 0 4px 16px rgba(208, 107, 92, .32), inset 0 1px 0 rgba(255, 255, 255, .25); }
.lp-actie-vh .lp-actie-ico { background: rgba(255, 255, 255, .22); color: #fff; }
.lp-actie-vh:hover { transform: translateY(-1px); box-shadow: 0 7px 20px rgba(208, 107, 92, .42), inset 0 1px 0 rgba(255, 255, 255, .25); }
.lp-actie-ut { background: #fff; border: 1px solid var(--border-default); color: var(--fg-muted); }
.lp-actie-ut .lp-actie-ico { background: var(--c-body); color: var(--fg-muted); transition: background .16s, color .16s; }
.lp-actie-ut:hover { transform: translateY(-1px); border-color: #c0564a; color: #a5311f; box-shadow: 0 4px 14px rgba(192, 57, 43, .14); }
.lp-actie-ut:hover .lp-actie-ico { background: rgba(192, 57, 43, .1); color: #a5311f; }
@media (max-width: 700px) { .lp-kop-rij { flex-direction: column; align-items: flex-start; } }
.lp-btn-uit { background: #c0392b; }
.lp-modal-ov { position: fixed; inset: 0; background: rgba(13, 23, 41, .45); z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lp-modal { max-width: 520px; width: 100%; max-height: 88vh; overflow-y: auto; }
.lp-modal-p { font-size: 13.5px; line-height: 1.6; margin: 0 0 12px; }
.lp-modal-lijst { margin: 0 0 12px; padding-left: 20px; font-size: 13px; line-height: 1.6; }
.lp-modal-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-muted); margin: 4px 0 5px; }
.lp-modal-input { width: 100%; padding: 9px 12px; border: 1px solid var(--border-default); border-radius: 10px; font: inherit; font-size: 13.5px; margin-bottom: 12px; }
.lp-modal-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 2px 0 14px; cursor: pointer; }
.lp-modal-voet { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lp-modal-res { font-size: 12.5px; color: #c0392b; }

/* Tafel-wisselaar bovenaan het dossier (emblemen van de andere tafels) */
.lp-tafel-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.lp-tafel-kop-l { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); margin-right: 2px; }
.lp-tafel-chip { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--rt-fg, var(--c-ink));
  background: color-mix(in srgb, var(--rt-bg, #fff) 55%, #fff); border: 1px solid color-mix(in srgb, var(--rt-fg, #000) 25%, transparent);
  border-radius: 999px; padding: 5px 14px 5px 6px; font-size: 12.5px; font-weight: 600; transition: box-shadow .14s, transform .14s; }
.lp-tafel-chip:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-fg, #000) 12%, transparent); transform: translateY(-1px); }
.lp-tafel-chip-emblem { width: 26px; height: 26px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--rt-fg, #000) 25%, transparent); }
.lp-tafel-chip-emblem svg { width: 18px; height: 18px; }

/* Meta-blok in dialogen (zelfde stijl als de mail-templates) + ridder-dagen */
.lp-meta { background: #faf7f3; border: 1px solid #ece5dc; border-radius: 12px; margin: 2px 0 16px; }
.lp-meta-rij { padding: 10px 16px; display: flex; flex-direction: column; gap: 2px; }
.lp-meta-rij + .lp-meta-rij { border-top: 1px solid #ece5dc; }
.lp-meta-rij span { font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; color: #d06b5c; text-transform: uppercase; }
.lp-meta-rij b { font-size: 13.5px; font-weight: 600; color: var(--c-ink); line-height: 1.45; }
.lp-ridder-dagen { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 13px; color: var(--fg-muted); }
.lp-ridder-dagen svg { width: 15px; height: 15px; color: var(--c-accent-hover); }
.lp-ridder-dagen b { color: var(--c-ink); }

/* klikbare tafelkaarten + financiële detail-knoppen */
.lp-tafelkaart-link { display: block; text-decoration: none; color: inherit; transition: transform .16s, box-shadow .16s, border-color .16s; }
.lp-tafelkaart-link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(13, 23, 41, .1); border-color: var(--c-accent-red); }
.lp-tafelkaart-open { display: inline-flex; align-items: center; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--c-accent-hover); position: relative; z-index: 1; }
.lp-tafelkaart-link:hover .lp-tafelkaart-open { text-decoration: underline; }
.lp-detail-knop { display: inline-flex; align-items: center; margin-top: 12px; background: none; border: 1px solid var(--border-default);
  border-radius: 999px; padding: 5px 14px; font: inherit; font-size: 12px; font-weight: 600; color: var(--fg-muted); cursor: pointer;
  transition: border-color .14s, color .14s, box-shadow .14s; }
.lp-detail-knop:hover { border-color: var(--c-accent-red); color: var(--c-accent-hover); box-shadow: 0 0 0 3px rgba(226, 131, 116, .12); }
.lp-sectie-kop { font-family: var(--font-display); font-size: 21px; font-weight: 700; margin: 4px 0 14px; }

/* Ledenchat met ledenpaneel (zoals het backoffice) */
.lp-chat-grid { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
.lp-chat-ledenlijst { display: flex; flex-direction: column; gap: 2px; max-height: 560px; overflow-y: auto; }
.lp-chat-lid { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; text-decoration: none; color: inherit; }
.lp-chat-lid:hover { background: var(--c-body); }
.lp-chat-lid img, .lp-chat-lid-init { width: 34px; height: 34px; min-width: 34px; border-radius: 50%; object-fit: cover;
  background: var(--c-peach); color: var(--c-accent-hover); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.lp-chat-lid-main { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.lp-chat-lid-main .lp-rolchip { margin-top: 2px; font-size: 9px; width: auto; justify-content: flex-start; }
.lp-chat-lid-main .lp-rolchip::before, .lp-chat-lid-main .lp-rolchip::after { display: none; }
.lp-chat-lid-naam { font-size: 13px; font-weight: 600; }
.lp-chat-lid-jij { color: var(--fg-muted); font-weight: 400; font-size: 11.5px; }
@media (max-width: 900px) { .lp-chat-grid { grid-template-columns: 1fr; } }
.lp-genoot .lp-rolchip { max-width: 100%; }
.lp-modal { position: relative; }
.lp-modal-x { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 24px; line-height: 1;
  color: var(--fg-muted); cursor: pointer; padding: 2px 6px; z-index: 2; }
.lp-modal-x:hover { color: var(--c-ink); }

/* Vragen-pagina */
.lp-vragen-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
.lp-vraag-intro { font-size: 13.5px; line-height: 1.6; color: var(--fg-muted); margin: 0 0 14px; }
.lp-vraag-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.lp-vraag-chip { background: none; border: 1px solid var(--border-default); border-radius: 999px; padding: 6px 14px;
  font: inherit; font-size: 12.5px; color: var(--fg-muted); cursor: pointer; transition: border-color .14s, color .14s, box-shadow .14s; }
.lp-vraag-chip:hover { border-color: var(--c-accent-red); color: var(--c-accent-hover); box-shadow: 0 0 0 3px rgba(226, 131, 116, .1); }
.lp-vragen-leeg { display: flex; align-items: center; gap: 16px; color: var(--fg-muted); }
.lp-vragen-leeg-ico { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; background: var(--c-peach);
  color: var(--c-accent-hover); display: inline-flex; align-items: center; justify-content: center; }
.lp-vragen-leeg-ico svg { width: 22px; height: 22px; }
.lp-vragen-leeg p { margin: 0; line-height: 1.6; font-size: 13.5px; }
.lp-vraag-antwoord-kop svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
@media (max-width: 900px) { .lp-vragen-grid { grid-template-columns: 1fr; } }

/* profielkaarten: labels netjes uitgelijnd (naam 2 regels gecentreerd, chip vast, sinds onderaan) */
.lp-genoot { display: flex; flex-direction: column; align-items: center; }
.lp-genoot-naam { display: flex; align-items: center; justify-content: center; min-height: 37px; line-height: 1.25; }
.lp-genoot .lp-rolchip { margin-top: 6px; }
.lp-genoot-sinds { margin-top: auto; padding-top: 8px; }
.lp-groet { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lp-groet-sub { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-muted); }
.lp-groet-sub svg { width: 13px; height: 13px; color: var(--c-accent-hover); }
.lp-groet-sub b { color: var(--c-ink); }

/* Rewards: NØA & SØF */
.lp-reward-banner { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 2px 0 20px; padding: 15px 22px;
  background: linear-gradient(120deg, #fdf7ea 0%, #f7ecd4 55%, #fdf7ea 100%); border: 1px solid #e6d5ae; border-radius: 14px;
  font-size: 14px; line-height: 1.55; text-align: center; color: #4a3c22; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.lp-reward-ster { color: #c9a04e; font-size: 15px; }
.lp-reward-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; align-items: stretch; }
.lp-token-kaart { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; }
.lp-token-noa { background: linear-gradient(155deg, #16283f 0%, #0a1929 70%); border: 1px solid #0a1929; color: #eef2f7; }
.lp-token-sof { background: linear-gradient(155deg, #fdfaf3 0%, #f4ecdb 100%); border: 1px solid #e3d5ba; }
.lp-token-symbool { font-family: var(--font-display); font-size: 52px; font-weight: 700; line-height: 1;
  width: 86px; height: 86px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.lp-token-noa .lp-token-symbool { color: #e2c48d; border: 2px solid rgba(226, 196, 141, .55); box-shadow: 0 0 0 6px rgba(226, 196, 141, .08); }
.lp-token-logo { background: #fff; padding: 0; overflow: hidden; }
.lp-token-logo img { width: 100%; height: 100%; object-fit: cover; }
.lp-token-sof .lp-token-symbool { color: #8a6a3b; border: 2px solid #d9c69a; box-shadow: 0 0 0 6px rgba(201, 160, 78, .1); font-size: 26px; letter-spacing: .04em; }
.lp-token-naam { font-family: var(--font-display); font-size: 30px; font-weight: 700; }
.lp-token-noa .lp-token-naam { color: #fff; }
.lp-token-tagline { font-size: 13.5px; line-height: 1.6; font-style: italic; margin: 6px 0 12px; opacity: .92; }
.lp-token-woorden { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; color: #e2c48d; margin-bottom: 14px; }
.lp-token-woorden span { display: block; font-family: var(--font-body, inherit); font-weight: 400; letter-spacing: 0; font-size: 11.5px; color: #8fa0b3; margin-top: 2px; text-transform: none; }
.lp-token-feiten { width: 100%; display: flex; flex-direction: column; gap: 9px; margin-bottom: 4px; }
.lp-token-feiten > div { display: flex; flex-direction: column; gap: 1px; padding-bottom: 9px; border-bottom: 1px solid rgba(127, 127, 127, .16); }
.lp-token-feiten span { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.lp-token-noa .lp-token-feiten span { color: #e2c48d; }
.lp-token-sof .lp-token-feiten span { color: #a3814a; }
.lp-token-feiten b { font-size: 13px; font-weight: 500; line-height: 1.5; }
.lp-token-noa .lp-token-feiten b { color: #eef2f7; }
.lp-token-cta { margin-top: 14px; text-decoration: none; }
.lp-reward-tijdlijn { display: flex; flex-direction: column; gap: 0; margin: 4px 0 10px; }
.lp-rw-stap { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 8px 0 8px 26px; font-size: 13.5px; line-height: 1.5; }
.lp-rw-stap i { position: absolute; left: 6px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: #d8cdbb; }
.lp-rw-stap::before { content: ''; position: absolute; left: 10px; top: 24px; bottom: -6px; width: 1px; background: #e8e0d2; }
.lp-rw-stap:last-child::before { display: none; }
.lp-rw-stap.gedaan i { background: #2f7f4d; }
.lp-rw-stap.actief i { background: #c9a04e; box-shadow: 0 0 0 4px rgba(201, 160, 78, .2); }
.lp-rw-wanneer { min-width: 68px; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: #8a6a3b; }
@media (max-width: 900px) { .lp-reward-grid { grid-template-columns: 1fr; } }

/* Ledenportaal-login: knoppenrij + SMS-formulier */
.lp-login-knoppen { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.lp-login-knoppen .cb-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.lp-login-knoppen svg, .lp-login-sms svg { width: 15px; height: 15px; }
.lp-login-sms { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #fff; border: 1px solid var(--border-default);
  border-radius: 12px; padding: 11px 16px; font: inherit; font-size: 14px; color: var(--c-ink); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.lp-login-sms:hover { border-color: var(--c-accent-red); box-shadow: 0 0 0 3px rgba(226, 131, 116, .12); }
.lp-sms-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.lp-sms-input { text-align: center; letter-spacing: .5em; font-size: 22px; font-weight: 700; padding: 10px; font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
/* Orde-ladder in de verhogingsmodal */
.lp-ladder { margin: 4px 0 14px; }
.lp-ladder-rij { display: flex; flex-wrap: wrap; gap: 7px; }
.lp-ladder-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--border-subtle); color: var(--fg-muted); background: #fff; }
.lp-ladder-chip b { font-weight: 700; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.lp-ladder-chip.bereikt { border-color: #c9a04e; background: linear-gradient(180deg, #fdfaf3, #f6eeda); color: #8a6a3b; }
.lp-ladder-chip.bereikt b { color: #8a6a3b; }
.lp-ladder-chip.huidig { box-shadow: 0 0 0 2px rgba(201, 160, 78, .35); }

/* Eigen profielfoto wijzigen (ledenportaal) */
.lp-foto-edit { position: relative; display: inline-block; cursor: pointer; }
.lp-foto-cam { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-accent-hover); color: #fff; display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(13,23,41,.2); transition: transform .14s; }
.lp-foto-cam svg { width: 14px; height: 14px; }
.lp-foto-edit:hover .lp-foto-cam { transform: scale(1.08); }
.lp-foto-edit.bezig { opacity: .55; pointer-events: none; }

/* Mijn rewards (ledenportaal) */
.lp-rw-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.lp-rw-tegel { border: 1px solid var(--border-subtle); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.lp-rw-tegel b { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.1; }
.lp-rw-tk { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.lp-rw-sub { font-size: 11.5px; color: var(--fg-muted); }
/* zachte pasteltinten (verzoek 11-7-2026): licht blauwgrijs voor NØA, warm ivoor voor SØF */
.lp-rw-noa { background: linear-gradient(160deg, #f2f5fa, #e9eff7); border-color: #dde5f0; }
.lp-rw-noa b, .lp-rw-noa .lp-rw-tk { color: #3b5878; }
.lp-rw-noa .lp-rw-sub { color: #8b99ab; }
.lp-rw-sof { background: linear-gradient(160deg, #fdfbf6, #f7f1e4); border-color: #ebe2cd; }
.lp-rw-sof b { color: #a08553; }
.lp-rw-sof .lp-rw-tk { color: #b09565; }

/* stem-bevestigmodus (klik nogmaals) + huisstijl-toast + wallet-bevestiging */
.lp-stem-knop.lp-poll-keuze.is-bevestig { border-color: var(--c-accent-red); background: var(--c-peach); }
.lp-stem-knop.lp-poll-keuze.is-bevestig .lp-poll-kies { border-color: var(--c-accent-red); background: var(--c-accent-red); }
.lp-stem-knop.lp-poll-keuze.is-bevestig .lp-poll-kies::after { opacity: 1; }
.lp-stem-knop.lp-poll-keuze.is-bevestig .lp-poll-stemtxt { opacity: 1; }
.lp-melding-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 400; background: var(--c-sidebar); color: #f4efe6; font-size: 13.5px; border-radius: 999px; padding: 11px 22px; box-shadow: 0 8px 28px rgba(13, 23, 41, .25); opacity: 1; transition: opacity .4s, transform .4s; max-width: min(80vw, 560px); text-align: center; }
.lp-melding-toast.weg { opacity: 0; transform: translateX(-50%) translateY(8px); }
.lp-rw-wallet-wijzig.is-bevestig { color: var(--c-accent-hover); font-weight: 700; }

/* ── Rewards: wallet-koppelkaart in huisstijl (witte kaart, koraal = actie) ── */
.lp-mijn-rewards .card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.lp-rw-wallet { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.lp-rw-wallet.is-leeg { box-shadow: inset 3px 0 0 var(--c-accent-red), var(--shadow-card); }
.lp-rw-wallet.is-klaar { box-shadow: inset 3px 0 0 #57a97e, var(--shadow-card); }
.lp-rw-zegel { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; }
.lp-rw-zegel.is-leeg { background: var(--c-peach); color: var(--c-accent-hover); }
.lp-rw-zegel.is-leeg svg { width: 24px; height: 24px; }
.lp-rw-zegel.is-klaar { background: #57a97e; color: #fff; font-size: 26px; font-weight: 700; }
.lp-rw-wallet-body { flex: 1; min-width: 0; }
.lp-rw-wallet-kop { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--c-ink); line-height: 1.2; }
.lp-rw-wallet-sub { font-size: 13px; line-height: 1.55; color: var(--fg-muted); margin: 5px 0 13px; }
.lp-rw-wallet-sub code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; background: rgba(13, 23, 41, .06); padding: 1px 6px; border-radius: 5px; }
.lp-rw-wallet-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lp-rw-wallet-form .lp-modal-input { max-width: 220px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.lp-rw-wallet-acc { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 15px; font-weight: 600; color: #3d7a5c; background: rgba(87, 169, 126, .12); border-radius: 8px; padding: 8px 14px; display: inline-block; }
.lp-rw-wallet-wijzig { margin-top: 11px; background: none; border: none; padding: 0; font: inherit; font-size: 12.5px; color: #3d7a5c; text-decoration: underline; cursor: pointer; }
.lp-rw-wallet-res { display: block; margin-top: 9px; font-size: 12.5px; color: var(--c-accent-hover); min-height: 15px; }
@media (max-width: 620px) { .lp-rw-wallet { flex-direction: column; gap: 12px; } }

/* Online/offline-ring rond profielfoto's (groen = online, rood = offline) */
.lp-genoot.lp-online img, .lp-genoot.lp-online .lp-init { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #5cae85, 0 3px 8px rgba(13,23,41,.1); }
.lp-genoot.lp-offline img, .lp-genoot.lp-offline .lp-init { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #d6907e, 0 3px 8px rgba(13,23,41,.1); }
.rt-member.lp-online .lid-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #5cae85; border-radius: 50%; }
.rt-member.lp-offline .lid-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #d6907e; border-radius: 50%; }
.lp-fiche-foto.lp-online, .lp-online > .lp-fiche-foto { box-shadow: 0 0 0 4px #5cae85; }