/* Portaal in de nieuwe huisstijl: Young Serif en Figtree (lokaal), bierbruin, bordeaux en amber.
 * De namen 'Fraunces' en 'DM Sans' wijzen hier naar de nieuwe lettertypes, net als op de website. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/young-serif.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/young-serif.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/figtree.woff2') format('woff2'); }

:root {
  --bp-dark: #140e0a; --bp-dark-2: #21160f; --bp-ink: #2a1f19; --bp-soft: #5c4d42;
  --bp-cream: #eeeae2; --bp-paper: #f6f3ec;
  --bp-red: #8a2d31; --bp-red-d: #6e2327; --bp-gold: #e3a43a;
  --r-sm: 2px; --r-md: 2px; --r-lg: 2px;
  --shadow: none;
}
.eyebrow { display: none; }
h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 400; }
.btn, button { border-radius: 0; }

/* Inloggen, registreren en wachtwoord: donker, zoals de website */
body.bp-auth { background: #140e0a; color: #f7eedb; }
.bp-auth .auth { grid-template-columns: minmax(300px, 5fr) 6fr; }
.bp-auth .art { background: #5e2025; border-right: 0; color: #f7eedb; }
.bp-auth .art .word { font: 400 28px/1 'Fraunces', Georgia, serif; color: #f7eedb; }
.bp-auth .art .word span { color: #e3a43a; font: 600 14px/1.4 'DM Sans', Arial, sans-serif; letter-spacing: 0; text-transform: none; }
.bp-auth .art .big { font: 400 clamp(2rem, 3.6vw, 3.4rem)/1.05 'Fraunces', Georgia, serif; color: #f7eedb; }
.bp-auth .art p { color: #eddcd0; font-size: 17px; }
.bp-auth .art .back { color: #f7eedb; text-decoration: underline; text-underline-offset: 4px; }
.bp-auth .formcol { background: #140e0a; }
.bp-auth h1 { font-size: clamp(2.4rem, 4vw, 3.6rem); color: #f7eedb; margin-bottom: 18px; }
.bp-auth label { color: #f7eedb; font-weight: 500; font-size: 15px; }
.bp-auth input, .bp-auth textarea, .bp-auth select { background: #21160f; border: 1px solid rgba(247, 238, 219, .3); color: #f7eedb; border-radius: 0; min-height: 52px; }
.bp-auth input:focus { border-color: #e3a43a; box-shadow: none; outline: 2px solid #e3a43a; outline-offset: 2px; }
.bp-auth input::placeholder { color: #9a8a76; }
.bp-auth .btn, .bp-auth button { min-height: 52px; padding: 0 28px; margin-top: 22px; background: #8a2d31; border-color: #8a2d31; color: #f7eedb; font-weight: 600; border-radius: 0; }
.bp-auth .btn:hover, .bp-auth button:hover { background: #a23a3f; border-color: #a23a3f; }
.bp-auth .ghost { background: transparent; border-color: rgba(247, 238, 219, .45); }
.bp-auth .ghost:hover { background: rgba(247, 238, 219, .1); }
.bp-auth a { color: #e3a43a; }
.bp-auth .muted { color: #cdbfa9; font-size: 15px; margin-top: 22px; }
.bp-auth .notice { background: #21160f; color: #f7eedb; border-left-color: #e3a43a; border-radius: 0; }
.bp-auth .notice.bad { background: #3a1014; border-left-color: #d26a6e; color: #f7eedb; }
.bp-auth .notice.good { background: #1c2a1d; border-left-color: #a8c5a0; color: #f7eedb; }
.bp-auth :focus-visible { outline-color: #e3a43a; }
@media (max-width: 900px) { .bp-auth .art { border-bottom: 0; } }

/* ---- Inloggen: officieel logo, foto, rustige animaties ---- */
.bp-auth .art { position: relative; overflow: hidden; isolation: isolate; background: #5e2025 url('/assets/images/general/WhatsApp%20Image%202026-10-09%20at%2017.39.00.jpeg') center / cover no-repeat; }
.bp-auth .art::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(94, 32, 37, .86); }
.bp-auth .art .word { display: inline-block; line-height: 0; }
.bp-auth .art .word img { width: clamp(84px, 8vw, 112px); height: auto; display: block; }
.bp-auth .art .art-copy { max-width: 520px; }
.bp-auth .art .big { font-size: clamp(2.2rem, 3.8vw, 3.6rem); }
.bp-auth .formcol { background: #140e0b; justify-content: center; }
.bp-auth .panel.narrow { max-width: 480px; width: 100%; }
.bp-auth h1 { font-size: clamp(2.4rem, 3.6vw, 3.4rem); margin-bottom: 26px; }
.bp-auth form { background: #1d1511; padding: clamp(22px, 2.6vw, 36px); margin: 0; }
.bp-auth form label:first-of-type { margin-top: 0; }
.bp-auth input { background: #2a1e18; border: 0; border-bottom: 2px solid rgba(247, 238, 219, .22); transition: border-color .25s ease, background-color .25s ease; }
.bp-auth input:hover { background: #32261f; }
.bp-auth input:focus { background: #32261f; border-bottom-color: #e3a43a; outline: none; }
.bp-auth form .btn, .bp-auth form button { width: 100%; }
.bp-auth .muted { margin-top: 18px; line-height: 1.9; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes rd-auth-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  @keyframes rd-auth-zoom { from { transform: scale(1.1); } to { transform: scale(1); } }
  .bp-auth .art { animation: none; }
  .bp-auth .art::after { content: ''; position: absolute; inset: 0; z-index: -2; background: inherit; animation: rd-auth-zoom 3s cubic-bezier(.2, .7, .2, 1) both; }
  .bp-auth .art .word { animation: rd-auth-up .9s cubic-bezier(.2, .7, .2, 1) .05s both; }
  .bp-auth .art .art-copy { animation: rd-auth-up 1s cubic-bezier(.2, .7, .2, 1) .25s both; }
  .bp-auth .art .back { animation: rd-auth-up .9s cubic-bezier(.2, .7, .2, 1) .5s both; }
  .bp-auth h1 { animation: rd-auth-up .9s cubic-bezier(.2, .7, .2, 1) .15s both; }
  .bp-auth .notice { animation: rd-auth-up .6s cubic-bezier(.2, .7, .2, 1) .3s both; }
  .bp-auth form { animation: rd-auth-up 1s cubic-bezier(.2, .7, .2, 1) .35s both; }
  .bp-auth form label, .bp-auth form button { animation: rd-auth-up .8s cubic-bezier(.2, .7, .2, 1) both; }
  .bp-auth form label:nth-of-type(1) { animation-delay: .5s; } .bp-auth form label:nth-of-type(2) { animation-delay: .6s; } .bp-auth form label:nth-of-type(3) { animation-delay: .7s; } .bp-auth form button { animation-delay: .75s; }
  .bp-auth .muted { animation: rd-auth-up .8s cubic-bezier(.2, .7, .2, 1) .9s both; }
  .bp-auth .btn, .bp-auth button { transition: background-color .25s ease, transform .35s cubic-bezier(.2, .7, .2, 1); }
  .bp-auth .btn:hover, .bp-auth button:hover { transform: translateY(-2px); }
}

/* ---- Compact: past op één scherm, zonder scrollen ---- */
.bp-auth .auth { min-height: 100dvh; height: 100dvh; overflow: hidden; }
.bp-auth .formcol { padding: clamp(14px, 3vh, 40px) clamp(20px, 5vw, 80px); overflow-y: auto; }
.bp-auth .art { padding: clamp(18px, 4vh, 48px) clamp(24px, 4.5vw, 64px); gap: 16px; }
.bp-auth .art .word img { width: clamp(72px, 7vh + 24px, 104px); }
.bp-auth .art .big { font-size: clamp(1.8rem, 5.2vh, 3.2rem); margin-bottom: 10px; }
.bp-auth .art p { font-size: clamp(15px, 2vh, 17px); }
.bp-auth h1 { font-size: clamp(1.9rem, 5.4vh, 3rem); margin-bottom: clamp(10px, 2vh, 22px); }
.bp-auth .panel.narrow > p:not(.muted):not(.auth-links) { font-size: clamp(14px, 1.9vh, 16px); margin: 0 0 clamp(8px, 1.6vh, 16px); color: #cdbfa9; }
.bp-auth form { padding: clamp(14px, 2.6vh, 30px) clamp(16px, 2.2vw, 30px); }
.bp-auth label { margin-top: clamp(8px, 1.6vh, 16px); font-size: clamp(13px, 1.8vh, 15px); }
.bp-auth input { min-height: clamp(42px, 5.8vh, 54px); padding-block: 8px; }
.bp-auth form .btn, .bp-auth form button { min-height: clamp(46px, 6vh, 56px); margin-top: clamp(12px, 2.2vh, 22px); }
.bp-auth .notice { margin-bottom: 10px; padding: 10px 14px; font-size: 14px; }
.bp-auth .panel.narrow { max-width: 520px; }
.bp-auth form.auth-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.bp-auth form.auth-grid > label.check, .bp-auth form.auth-grid > button, .bp-auth form.auth-grid > input[type="hidden"] { grid-column: 1 / -1; }
.bp-auth form.auth-grid .check { display: flex; align-items: flex-start; font-size: clamp(12px, 1.7vh, 14px); font-weight: 400; line-height: 1.4; margin-top: clamp(6px, 1.2vh, 12px); color: #cdbfa9; }
.bp-auth form.auth-grid .check input { min-height: 0; width: 18px; height: 18px; margin: 2px 10px 0 0; accent-color: #8a2d31; }
.bp-auth .panel.narrow:has(.auth-grid) { max-width: 640px; }
.bp-auth .auth-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: clamp(12px, 2.4vh, 22px); color: #cdbfa9; font-size: 15px; }
.bp-auth a.auth-alt { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border: 1px solid rgba(247, 238, 219, .5); color: #f7eedb; text-decoration: none; font-weight: 600; transition: background-color .25s ease, border-color .25s ease, transform .35s cubic-bezier(.2, .7, .2, 1); }
.bp-auth a.auth-alt:hover { background: rgba(247, 238, 219, .1); border-color: #e3a43a; transform: translateY(-2px); }
.bp-auth a.auth-small { margin-left: auto; font-size: 14px; }
@media (max-width: 900px) { .bp-auth .auth { height: auto; overflow: visible; } .bp-auth .formcol { overflow: visible; } .bp-auth form.auth-grid { grid-template-columns: 1fr; } }
.bp-auth form.auth-grid > label:nth-of-type(-n+2) { margin-top: 0; } .bp-auth form.auth-grid > label:nth-of-type(n+3):not(.check) { margin-top: clamp(8px, 1.6vh, 16px); }

/* ===== Beheer en ledenomgeving: donker, zoals de website (#140E0B) ===== */
body.bp-app, body.bp-site {
  --bp-dark: #f7eedb; --bp-ink: #efe5d2; --bp-soft: #b9a998;
  --bp-paper: #140e0b; --bp-cream: #261a14; --bp-white: #1d1511;
  --bp-line: rgba(247,238,219,.16); --bp-line-s: rgba(247,238,219,.09);
  --bp-ok: #a8c5a0; --bp-ok-bg: rgba(168,197,160,.14); --bp-bad: #f0a59c; --bp-bad-bg: rgba(240,165,156,.14);
  --bp-warn: #e3a43a; --bp-warn-bg: rgba(227,164,58,.14);
  background: #140e0b; color: #efe5d2;
}
.bp-app a, .bp-site a:not(.btn):not(.ghost):not(.gold) { color: #e3a43a; }
.bp-app .stage { background: #140e0b; border: 0; border-radius: 0; margin: 0; height: 100dvh; }
.bp-app .side { background: #0e0907; border-right: 1px solid rgba(247,238,219,.08); }
.bp-app .side nav a[aria-current=page] { background: #5e2025; box-shadow: none; color: #f7eedb; }
.bp-app .bar, .bp-site .top { background: rgba(20,14,11,.92); border-bottom: 1px solid var(--bp-line); }
.bp-site .topnav a:hover { background: rgba(247,238,219,.08); color: #e3a43a; }
.bp-site .topnav a[aria-current=page] { color: #e3a43a; }
.bp-site .topnav a[aria-current=page]::after { background: #e3a43a; }
.bp-app .word, .bp-site .word { color: #f7eedb; } .bp-site .word span { color: #e3a43a; }

/* vlakken: toon op toon in plaats van dunne lijnen */
.bp-app .panel, .bp-site .panel, .bp-app .setting-form, .bp-site .setting-form, .bp-app .strip, .bp-site .strip,
.bp-app .stat, .bp-app .stat:first-child, .bp-site .menu, .bp-app .menu, .bp-app .toast, .bp-site .toast {
  background: #1d1511; border: 0; border-radius: 0; box-shadow: none; color: #efe5d2;
}
.bp-app .stat, .bp-app .stat:first-child { border-top: 2px solid #e3a43a; }
.bp-app .stat:first-child { background: #5e2025; }
.bp-app .stat:first-child .sub { color: #eddcd0; }
.bp-app .stat:hover { transform: translateY(-3px); background: #261a14; }
.bp-app .stat .ibub, .bp-app .ibub { background: rgba(227,164,58,.14); color: #e3a43a; border-radius: 0; }
.bp-app .stat .num, .bp-site .strip b { color: #f7eedb; }
.bp-site .feature, .bp-app .feature { background: #5e2025; border-radius: 0; color: #f7eedb; }
.bp-site .dbadge, .bp-app .dbadge { background: #5e2025; color: #f7eedb; border-radius: 0; }
.bp-site .avatar, .bp-app .avatar { background: #261a14; color: #e3a43a; border-radius: 0; }
.bp-app .avatar.big, .bp-site .avatar.big { background: #5e2025; color: #f7eedb; }
.bp-app .notice, .bp-site .notice, .bp-app .summary, .bp-site .summary, .bp-app .empty, .bp-site .empty { background: #1d1511; border-radius: 0; color: #efe5d2; }
.bp-app .badge, .bp-site .badge, .bp-app .fill, .bp-site .fill { border-radius: 0; background: #261a14; color: #efe5d2; }
.bp-app .filters, .bp-site .filters { background: #1d1511; }
.bp-app th, .bp-site th { background: #1d1511; color: #b9a998; }
.bp-app td, .bp-site td { border-color: rgba(247,238,219,.09); }
.bp-app .eventcard, .bp-site .eventcard { background: #1d1511; border: 0; border-radius: 0; }
.bp-app .meter, .bp-site .meter { background: #261a14; border-radius: 0; } .bp-app .meter > *, .bp-site .meter > * { border-radius: 0; }

/* formulieren */
.bp-app input, .bp-app textarea, .bp-app select, .bp-site input, .bp-site textarea, .bp-site select {
  background: #261a14; color: #f7eedb; border: 0; border-bottom: 2px solid rgba(247,238,219,.28); border-radius: 0;
}
.bp-app input:focus, .bp-app textarea:focus, .bp-app select:focus, .bp-site input:focus, .bp-site textarea:focus, .bp-site select:focus { border-bottom-color: #e3a43a; outline: none; }
.bp-app input:disabled, .bp-site input:disabled { background: #1d1511; color: #b9a998; }
.bp-app fieldset.kind, .bp-site fieldset.kind { background: #1d1511; border-color: var(--bp-line); }

/* knoppen */
.bp-app .btn, .bp-site .btn, .bp-app button, .bp-site button { background: #8a2d31; border-color: #8a2d31; color: #f7eedb; border-radius: 0; }
.bp-app .btn:hover, .bp-site .btn:hover, .bp-app button:hover, .bp-site button:hover { background: #a23a3f; border-color: #a23a3f; }
.bp-app .ghost, .bp-site .ghost { background: transparent; color: #f7eedb; border-color: rgba(247,238,219,.4); }
.bp-app .ghost:hover, .bp-site .ghost:hover { background: rgba(247,238,219,.08); border-color: #e3a43a; color: #e3a43a; }
.bp-app .gold, .bp-site .gold { background: #e3a43a; border-color: #e3a43a; color: #140e0b; }
.bp-app .gold:hover, .bp-site .gold:hover { background: #f0ba5c; border-color: #f0ba5c; color: #140e0b; }
.bp-app .danger, .bp-site .danger { background: transparent; color: #f0a59c; border-color: #f0a59c; }
.bp-app .danger:hover, .bp-site .danger:hover { background: #9c2a25; color: #f7eedb; border-color: #9c2a25; }
.bp-app .side .out, .bp-app .rail-toggle, .bp-app .burger, .bp-app .bar-search { background: transparent; border-color: var(--bp-line); }

/* beweging */
@keyframes rd-portal-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.bp-app .content > *, .bp-site .shell > * { animation: rd-portal-up .6s cubic-bezier(.2,.7,.2,1) both; }
.bp-app .content > *:nth-child(2), .bp-site .shell > *:nth-child(2) { animation-delay: .07s; }
.bp-app .content > *:nth-child(3), .bp-site .shell > *:nth-child(3) { animation-delay: .14s; }
.bp-app .content > *:nth-child(n+4), .bp-site .shell > *:nth-child(n+4) { animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) { .bp-app .content > *, .bp-site .shell > * { animation: none; } .bp-app .stat:hover { transform: none; } }

/* ===== Compacter: meer op één scherm ===== */
body.bp-app { --fs-body: 14.5px; --fs-h1: clamp(1.6rem, 2.4vw, 2rem); --fs-h2: 1.2rem; --bar: 56px; --s5: 18px; --s6: 24px; }
.bp-app .content { padding: clamp(12px, 2vw, 24px); }
.bp-app .hello { margin-bottom: var(--s4); } .bp-app .hello h1 { margin-bottom: 2px; } .bp-app .hello .lead { margin: 0; font-size: 15px; }
.bp-app .panel { padding: var(--s4); margin-bottom: var(--s4); }
.bp-app .stats { gap: var(--s3); margin-bottom: var(--s4); }
.bp-app .stat { padding: var(--s3) var(--s4); }
.bp-app .stat .num { font-size: 1.9rem; } .bp-app .stat .ibub { width: 32px; height: 32px; margin-bottom: var(--s2); }
.bp-app .ovgrid { gap: var(--s4); }
.bp-app .side-stack { gap: var(--s4); }
.bp-app .side-stack .panel, .bp-app .ovgrid .panel { margin-bottom: 0; }
.bp-app .ovgrid > div { display: grid; gap: var(--s4); }
.bp-app .reg-card { padding: var(--s2) 0; }
.bp-app .setting { padding: var(--s4) 0; gap: var(--s3) var(--s5); }
.bp-app .setting-form { padding: var(--s4); border: 0; border-radius: 0; background: #1d1511; }
.bp-app label { margin-top: var(--s3); }
.bp-app input, .bp-app select, .bp-app textarea { min-height: 40px; padding: 8px 12px; }
.bp-app .btn, .bp-app button { min-height: 40px; }
.bp-app .splithead { margin-bottom: var(--s2); }

/* tellertje in het menu */
.bp-app .side nav .cnt { margin-left: auto; background: #e3a43a; color: #140e0b; font: 700 12px/1 'DM Sans', sans-serif; padding: 4px 7px; min-width: 22px; text-align: center; }
.bp-app .filters-tabs { border-bottom-color: var(--bp-line); margin: var(--s3) 0 var(--s4); }
.bp-app .filters-tabs a[aria-current=page] { color: #e3a43a; border-bottom-color: #e3a43a; }

/* profielfoto's */
.avatar.has-img { padding: 0; overflow: hidden; background: #261a14; }
.avatar.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.huge { width: 112px; height: 112px; font-size: 38px; }
.avatar-form { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: center; }
.avatar-form form:last-child { grid-column: 2; }
.bp-app .side .who { text-decoration: none; color: inherit; } .bp-app .side .who:hover { background: rgba(247,238,219,.06); }
.bp-app .side .who .avatar.has-img, .bp-app .avatar.has-img { background: #261a14; }

/* beoordeling en ledenfoto's */
.modgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s3); }
.bp-app .mod { padding: 0; margin: 0; display: flex; flex-direction: column; }
.bp-app .mod img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.bp-app .mod:hover img { transform: scale(1.03); } .bp-app .mod > a, .bp-app .mod { overflow: hidden; }
.bp-app .mod figcaption { padding: var(--s3); display: grid; gap: 6px; font-size: 13.5px; }
.bp-app .mod figcaption small { color: var(--bp-soft); }
.bp-app .mod .mod-actions { display: grid; gap: 6px; } .bp-app .mod .mod-actions form { margin: 0; display: grid; gap: 6px; }
.bp-app .mod .btn, .bp-app .mod button { min-height: 34px; padding: 0 12px; width: 100%; }
.bp-app .mod input { min-height: 34px; margin: 0; }
@media (prefers-reduced-motion: reduce) { .bp-app .mod img { transition: none; } .bp-app .mod:hover img { transform: none; } }
.bp-app .side .who strong { color: #f7eedb; } .bp-app .side .who small { color: #b9a998; }
.bp-app input[type=file] { padding: 6px; min-height: 0; }
.bp-app input[type=file]::file-selector-button { background: #8a2d31; color: #f7eedb; border: 0; padding: 8px 14px; margin-right: 12px; font: 600 14px 'DM Sans', sans-serif; cursor: pointer; }
.bp-app input[type=file]::file-selector-button:hover { background: #a23a3f; }
.bp-app input[type=checkbox] { accent-color: #e3a43a; width: 18px; min-height: 0; height: 18px; flex: none; }

/* ===== Leesbaarheid: lichte tekst op donkere vlakken ===== */
.bp-app .outline { color: #f7eedb; border-color: rgba(247,238,219,.5); }
.bp-app .outline:hover { background: rgba(247,238,219,.1); color: #fff; }
.bp-app .dbadge, .bp-app .feature, .bp-app .stat:first-child, .bp-app .side, .bp-app .side .word, .bp-app .rail-toggle { color: #f7eedb; }
.bp-app .feature .chips .badge, .bp-app .feature .badge { background: rgba(247,238,219,.14); color: #f7eedb; }
.bp-app .feature .chips .badge.good { background: rgba(168,197,160,.22); color: #cfe7c4; }
.bp-app .dbadge i { color: #e3a43a; }
.bp-app .badge.gold { background: rgba(227,164,58,.18); color: #f0ba5c; }
.bp-app .badge.good { background: rgba(168,197,160,.16); color: #bcd8b3; }
.bp-app .badge.bad { background: rgba(240,165,156,.16); color: #f5b8b0; }
.bp-app .nav-sec, .bp-app .side nav .nav-sec span { color: #b9a998; }
.bp-app .dangerlink, .bp-app .menu a.dangerlink { color: #f0a59c; }
.bp-app .muted, .bp-app .meta, .bp-app small { color: #b9a998; }
.bp-app .savebar { background: rgba(29,21,17,.96); border-top: 1px solid var(--bp-line); }
.bp-app .savebar.dirty [data-dirty-note] { color: #e3a43a; }
.bp-app td a, .bp-app th a { color: #f7eedb; } .bp-app td a:hover { color: #e3a43a; }

/* rij-hover, zoeken en zijbalk die ook op lage schermen past */
.bp-app tr:hover, .bp-app tr:hover td { background: #261a14; }
.bp-app .side-search { background: rgba(247,238,219,.06); border: 1px solid var(--bp-line); color: #efe5d2; }
.bp-app .side-search:hover { background: rgba(247,238,219,.1); border-color: #e3a43a; color: #fff; }
.bp-app .side { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3a2a22 transparent; }
.bp-app .side nav a, .bp-app .side .site-link, .bp-app .side .out { min-height: 38px; }
.bp-app .nav-sec { margin: var(--s3) var(--s3) 2px; }
.bp-app .side-head { padding-bottom: var(--s3); }
.bp-app .side .acct { padding-top: var(--s2); }
.bp-app .filters-tabs a { color: #b9a998; } .bp-app .filters-tabs a:hover { color: #f7eedb; }
.bp-app .filters-tabs a[aria-current=page] { color: #e3a43a; }
.bp-app .crumb span, .bp-app .today { color: #b9a998; }

/* zoekvenster (Ctrl K) donker */
dialog.pal { background: #1d1511; color: #efe5d2; border: 1px solid var(--bp-line); border-radius: 0; box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); }
dialog.pal::backdrop { background: rgba(10,7,5,.7); }
.pal-in { border-bottom-color: var(--bp-line); color: #b9a998; }
.pal-in input { color: #f7eedb; background: transparent; border: 0; }
.pal-h { color: #b9a998; }
.bp-app .pal-i, .bp-app .pal-i:visited { color: #f7eedb; } .pal-i small { color: #b9a998; }
.bp-app .pal-i.on, .bp-app .pal-i:hover { background: #5e2025; color: #f7eedb; } .bp-app .pal-i.on small, .bp-app .pal-i:hover small { color: #eddcd0; }
.pal-empty { color: #b9a998; }
.bp-app .mod.is-off img { opacity: .35; filter: grayscale(1); }
.bp-app .uprow { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: end; }
.bp-app .uprow label { margin: 0; flex: 1 1 260px; } .bp-app .uprow button { margin: 0; }
.bp-app .uprow + .muted { margin: var(--s3) 0 0; font-size: 13px; }

/* ledenprofiel in beheer */
.bp-app .profilehead { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s4) var(--s5); align-items: center; border-top: 2px solid #e3a43a; position: relative; }
.bp-app .profilehead h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0 0 6px; }
.bp-app .ph-main > * { margin: 0 0 8px; } .bp-app .ph-main > *:last-child { margin: 0; }
.bp-app .ph-contact a { color: #f7eedb; } .bp-app .ph-contact a:hover { color: #e3a43a; }
.bp-app .ph-stats { display: flex; gap: 2px; }
.bp-app .ph-stats div { background: #261a14; padding: 12px 18px; min-width: 112px; display: grid; gap: 2px; }
.bp-app .ph-stats b { font: 600 1.7rem/1 'DM Sans', sans-serif; color: #f7eedb; } .bp-app .ph-stats small { color: #b9a998; }
.bp-app .ph-back { position: absolute; top: var(--s3); right: var(--s3); }
.bp-app .profilehead .avatar.huge { width: 96px; height: 96px; }
.bp-app .ph-stats { margin-top: var(--s4); }
@media (max-width: 1100px) { .bp-app .profilehead { grid-template-columns: auto 1fr; } .bp-app .ph-stats { grid-column: 1 / -1; margin: 0; } .bp-app .ph-back { position: static; grid-column: 1 / -1; justify-self: start; } }
@media (max-width: 560px) { .bp-app .profilehead { grid-template-columns: 1fr; } .bp-app .ph-stats div { flex: 1; min-width: 0; padding: 10px; } }
.avatar.sm { width: 32px; height: 32px; font-size: 12px; flex: none; }
.bp-app .userlink { display: inline-flex; align-items: center; gap: 10px; color: #f7eedb; text-decoration: none; } .bp-app .userlink:hover span { color: #e3a43a; text-decoration: underline; }
.bp-app .thumbrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--s3); }
.bp-app .thumbcard { display: grid; gap: 6px; text-decoration: none; justify-items: start; }
.bp-app .thumbcard img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #261a14; }