/* ══════════════════════════════════════════════════════════
     BACKOFFICE — het werkscherm achter de site
     ══════════════════════════════════════════════════════════ */
  .bo{display:grid;grid-template-columns:212px 1fr;min-height:100vh;background:var(--bg)}
  @media(max-width:900px){.bo{grid-template-columns:1fr}}

  /* ── zijbalk ──────────────────────────────────────────── */
  .bo-zij{border-right:1px solid var(--line);background:var(--bg2);padding:18px 12px;
    display:flex;flex-direction:column;gap:3px;position:sticky;top:0;height:100vh;overflow-y:auto}
  .bo-zij .merkje{display:flex;align-items:center;gap:9px;padding:6px 10px 18px}
  .bo-zij .merkje b{font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:-.03em}
  .bo-zij .merkje s{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:1.8px;
    text-transform:uppercase;color:var(--steel);text-decoration:none;margin-top:3px}
  .bo-tab{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-m);
    font-size:14px;color:var(--ink2);text-align:left;white-space:nowrap;transition:all .22s;background:transparent}
  .bo-tab:hover{background:var(--v-zacht);color:var(--ink)}
  .bo-tab.aan{background:var(--accent-zacht);color:var(--ink);font-weight:600}
  .bo-tab i{width:20px;text-align:center;font-style:normal;font-size:14px;color:var(--steel)}
  .bo-tab.aan i{color:var(--accent)}
  .bo-tab b{margin-left:auto;font-family:var(--mono);font-size:10.5px;font-weight:600;
    background:var(--v-koel);color:#fff;border-radius:999px;padding:2px 7px}
  .bo-zij .onderaan{margin-top:auto;padding-top:14px;border-top:1px solid var(--line2)}

  /* ── werkblad ─────────────────────────────────────────── */
  .bo-blad{min-width:0;padding:24px 28px 70px}
  .bo-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px}
  .bo-bar h2{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-.04em;margin:0}
  .bo-bar .rechts{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .bo-zoek{position:relative}
  .bo-zoek input{width:230px;max-width:46vw;padding:10px 14px 10px 34px;border-radius:999px;
    border:1px solid var(--line);background:var(--v-kaart);color:var(--ink);font-family:inherit;font-size:14px}
  .bo-zoek input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-zacht)}
  .bo-zoek:before{content:'';position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808a9b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.2 15.2 5.3 5.3'/%3E%3C/svg%3E") no-repeat center/contain;
    font-size:16px;color:var(--steel)}

  /* kaarten en cijfers */
  .bo-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
  @media(max-width:900px){.bo-kpi{grid-template-columns:1fr 1fr}}
  .bo-kpi > div{padding:17px 19px;border-radius:var(--r-m);border:1px solid var(--line);
    background:var(--v-kaart);transition:border-color .3s}
  .bo-kpi > div:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
  .bo-kpi b{display:block;font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.04em;
    background:var(--t-koel);-webkit-background-clip:text;background-clip:text;color:transparent}
  .bo-kpi b.warm{background:var(--t-warm);-webkit-background-clip:text;background-clip:text}
  .bo-kpi span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--steel);margin-top:7px;line-height:1.5}

  .bo-vak{border-radius:var(--r-l);border:1px solid var(--line);background:var(--v-kaart);overflow:hidden;
    margin-bottom:16px}
  .bo-vak-kop{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line2);
    background:var(--bg2)}
  .bo-vak-kop b{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.02em}
  .bo-vak-kop s{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--steel);text-decoration:none}
  .bo-leeg{padding:26px 18px;text-align:center;font-size:14px;color:var(--steel);line-height:1.55}

  /* rijen */
  .bo-rij{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line2);
    font-size:14px;cursor:pointer;transition:background .2s}
  .bo-rij:last-child{border-bottom:none}
  /* de kopregel van een lijst — eigen naam, want .kop is al in gebruik
     voor de sectiekoppen op de site */
  .bo-rij.kolomkop{background:var(--bg2);font-family:var(--mono);font-size:10.5px;
    letter-spacing:1.4px;text-transform:uppercase;color:var(--steel);cursor:default;
    padding-top:11px;padding-bottom:11px}
  .bo-rij.kolomkop:hover{background:var(--bg2)}
  .bo-rij.kolomkop .wie{font-size:10.5px}
  .bo-rij:hover{background:var(--v-zacht)}
  .bo-rij .wie{min-width:0;flex:1}
  .bo-rij .wie b{display:block;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bo-rij .wie span{display:block;font-size:12.5px;color:var(--steel);margin-top:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bo-rij .wie.leeg b{color:var(--steel);font-style:italic;font-weight:500}
  .bo-rij .kolom{flex-shrink:0;font-family:var(--mono);font-size:11.5px;color:var(--steel)}
  @media(max-width:700px){.bo-rij .verbergklein{display:none}}

  /* labels */
  .bo-vlag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
    font-family:var(--mono);font-size:9.5px;letter-spacing:1.1px;text-transform:uppercase;
    border:1px solid;white-space:nowrap}
  .bo-vlag i{width:6px;height:6px;border-radius:50%;background:currentColor;font-style:normal}

  /* ── pipeline ─────────────────────────────────────────── */
  /* Zeven kolommen naast elkaar. De ondergrens is met opzet laag:
     liever zeven smalle kolommen die je allemaal ziet dan vier brede
     met de rest buiten beeld — dan lijkt de pipeline leeg terwijl er
     rechts nog leads staan. Op een breed scherm groeien ze vanzelf
     mee door de 1fr. */
  .pl-veld{position:relative}
  .pl-baan{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(132px,1fr);gap:12px;
    overflow-x:auto;padding-bottom:12px;align-items:start;scroll-behavior:smooth}

  /* Past het toch niet — op een telefoon, of een smal venster — dan
     zegt een zachte rand dat er meer is. */
  .pl-veld::before,.pl-veld::after{content:"";position:absolute;top:0;bottom:12px;width:38px;
    pointer-events:none;opacity:0;transition:opacity .2s;z-index:2}
  .pl-veld::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
  .pl-veld::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}
  .pl-veld.meer-links::before{opacity:1}
  .pl-veld.meer-rechts::after{opacity:1}
  .pl-buiten{padding:4px 10px;border-radius:999px;border:1px solid var(--accent);
    background:var(--accent-zacht);color:var(--accent);font-family:var(--mono);
    font-size:10.5px;cursor:pointer;margin-right:10px}
  .pl-buiten:hover{background:var(--accent);color:#fff}
  .pl-buiten[hidden]{display:none}
  .pl-kolom{border-radius:var(--r-l);border:1px solid var(--line);background:var(--bg2);
    display:flex;flex-direction:column;min-height:180px;transition:border-color .25s,background .25s}
  .pl-kolom.hover{border-color:var(--accent);background:var(--accent-zacht)}
  .pl-kop{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--line2)}
  .pl-kop b{font-family:var(--display);font-weight:600;font-size:13.5px;letter-spacing:-.02em}
  .pl-kop s{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--steel);text-decoration:none}
  .pl-kop .stip{width:8px;height:8px;border-radius:50%;flex-shrink:0}
  /* Op een smalle kolom moet alles kunnen afbreken in plaats van
     buiten de kaart te steken — maar wél op een woordgrens, niet
     midden in een woord. De telling zakt altijd onder de naam, ook
     als hij ernaast zou passen: dan staan alle zeven koppen even
     hoog en beginnen de kaarten op één lijn. */
  .pl-kop{display:grid;grid-template-columns:auto 1fr;row-gap:3px;
    align-items:center;padding:11px 12px}
  .pl-kop b{grid-column:2;font-size:12.5px;min-width:0;overflow-wrap:break-word;line-height:1.25;min-height:2.5em;display:flex;align-items:center}
  .pl-kop s{grid-column:1/-1;margin-left:0}
  .pl-kaart{padding:11px 12px}
  .pl-kaart b,.pl-kaart .sub{overflow-wrap:break-word}
  .pl-kaart .sub{margin-bottom:7px}
  .pl-lijst{padding:10px;display:grid;gap:9px;min-height:60px}
  .pl-kaart{padding:12px 13px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--v-kaart);
    cursor:grab;transition:transform .2s var(--veer),box-shadow .25s,border-color .25s}
  .pl-kaart:hover{transform:translateY(-2px);box-shadow:var(--schaduw);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
  .pl-kaart.sleept{opacity:.4}
  .pl-kaart b{display:block;font-weight:600;font-size:14px;color:var(--ink);margin-bottom:3px}
  .pl-kaart .sub{font-size:12.5px;color:var(--steel);margin-bottom:9px}
  .pl-kaart .voet{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    font-family:var(--mono);font-size:10px;color:var(--steel)}
  .pl-kaart .voet .waarde{color:var(--accent);font-weight:600}
  .pl-kaart .voet .laat{color:var(--warm)}
  .pl-verplaats{display:flex;gap:4px;margin-top:9px}
  .pl-verplaats button{flex:1;padding:5px;border-radius:7px;border:1px solid var(--line);
    background:transparent;font-family:var(--mono);font-size:10px;color:var(--steel)}
  .pl-verplaats button:hover{border-color:var(--accent);color:var(--accent)}

  /* ── leaddetail ───────────────────────────────────────── */
  .ld-kop{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
  .ld-kop .bal{width:52px;height:52px;border-radius:16px;flex-shrink:0;display:grid;place-items:center;
    font-family:var(--display);font-weight:700;font-size:19px;color:#fff;background:var(--v-koel);
    box-shadow:var(--gloed)}
  .ld-kop h2{font-family:var(--display);font-weight:600;font-size:25px;letter-spacing:-.04em;margin:0 0 5px}
  .ld-kop .meta{font-family:var(--mono);font-size:11.5px;color:var(--steel)}
  .ld-kop .acties{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
  .ld-net{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  @media(max-width:1000px){.ld-net{grid-template-columns:1fr}}
  .ld-fases{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
  .ld-fase{padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:var(--v-kaart);
    font-family:var(--mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--steel);
    transition:all .22s}
  .ld-fase:hover{border-color:var(--accent);color:var(--ink)}
  .ld-fase.aan{background:var(--v-koel);color:#fff;border-color:transparent;box-shadow:var(--gloed)}

  .stap-punten{display:grid;gap:5px;padding:2px 18px 14px 44px;border-bottom:1px solid var(--line2)}
  .stap-punt{display:flex;align-items:flex-start;gap:10px;padding:7px 10px;border-radius:9px;
    text-align:left;font-size:13px;color:var(--steel);background:transparent;transition:all .2s}
  .stap-punt:hover{background:var(--v-zacht);color:var(--ink2)}
  .stap-punt i{width:16px;height:16px;flex-shrink:0;border-radius:5px;border:1px solid var(--line);
    font-style:normal;font-size:9px;display:grid;place-items:center;margin-top:1px}
  .stap-punt.af{color:var(--ink2)}
  .stap-punt.af i{background:var(--v-koel);border-color:transparent;color:#fff}
  .stap-punt.af span{text-decoration:line-through;opacity:.6}
  .ld-rij{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:11px 18px;
    border-bottom:1px solid var(--line2);font-size:13.5px;align-items:start}
  .ld-rij:last-child{border-bottom:none}
  @media(max-width:560px){.ld-rij{grid-template-columns:1fr;gap:3px}}
  .ld-rij s{font-family:var(--mono);font-size:10px;letter-spacing:1.1px;text-transform:uppercase;
    color:var(--steel);text-decoration:none;padding-top:2px}
  .ld-rij b{font-weight:500;color:var(--ink2);line-height:1.5;word-break:break-word}
  .ld-rij input,.ld-rij select{width:100%;padding:7px 10px;border-radius:8px;border:1px solid var(--line);
    background:var(--bg);color:var(--ink);font-family:inherit;font-size:13.5px}
  .ld-rij input:focus{outline:none;border-color:var(--accent)}

  /* tijdlijn */
  .tijdlijn{padding:6px 18px 16px}
  .tl-item{position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--line2)}
  .tl-item:last-child{border-bottom:none}
  .tl-item:before{content:'';position:absolute;left:5px;top:18px;width:9px;height:9px;border-radius:50%;
    background:var(--accent);box-shadow:0 0 0 3px var(--accent-zacht)}
  .tl-item.taak:before{background:var(--warm);box-shadow:0 0 0 3px var(--warm-zacht)}
  .tl-item.klaar:before{background:var(--mint);box-shadow:0 0 0 3px rgba(45,212,168,.18)}
  .tl-item:after{content:'';position:absolute;left:9px;top:30px;bottom:-12px;width:1px;background:var(--line2)}
  .tl-item:last-child:after{display:none}
  .tl-kop{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:5px}
  .tl-kop b{font-size:13.5px;font-weight:600;color:var(--ink)}
  .tl-kop s{font-family:var(--mono);font-size:10px;color:var(--steel);text-decoration:none}
  .tl-kop .weg{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--steel);background:transparent}
  .tl-kop .weg:hover{color:var(--warm)}
  .tl-item p{margin:0;font-size:13.5px;color:var(--ink2);line-height:1.55;white-space:pre-wrap}
  .tl-vink{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:5px 11px;border-radius:999px;
    border:1px solid var(--line);background:transparent;font-family:var(--mono);font-size:10px;
    letter-spacing:1px;text-transform:uppercase;color:var(--steel)}
  .tl-vink:hover{border-color:var(--mint);color:var(--mint)}
  .tl-vink.af{border-color:transparent;background:color-mix(in srgb,var(--mint) 14%,transparent);color:var(--mint)}

  /* invoerblokken */
  .bo-invoer{padding:14px 18px;border-top:1px solid var(--line2);background:var(--bg2)}
  .bo-invoer textarea,.bo-invoer input,.bo-invoer select{width:100%;padding:10px 12px;border-radius:10px;
    border:1px solid var(--line);background:var(--bg);color:var(--ink);font-family:inherit;font-size:14px}
  .bo-invoer textarea{min-height:74px;resize:vertical;line-height:1.5}
  .bo-invoer textarea:focus,.bo-invoer input:focus,.bo-invoer select:focus{outline:none;border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-zacht)}
  .bo-invoer .regel{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
  .bo-invoer .regel > *{flex:1;min-width:120px}
  .bo-invoer .regel .knop{flex:0 0 auto}

  /* ── prototypes ───────────────────────────────────────── */
  .pr-net{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
  .pr-kaart{border-radius:var(--r-l);border:1px solid var(--line);background:var(--v-kaart);overflow:hidden;
    display:flex;flex-direction:column;transition:transform .3s var(--veer),border-color .3s,box-shadow .3s}
  .pr-kaart:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
    box-shadow:var(--schaduw)}
  .pr-band{height:5px;background:var(--v-koel)}
  .pr-lijf{padding:16px 18px;flex:1}
  .pr-lijf b{display:block;font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.03em;
    margin-bottom:5px}
  .pr-lijf .klant{font-size:13px;color:var(--steel);margin-bottom:12px}
  .pr-lijf p{margin:0;font-size:13px;color:var(--steel);line-height:1.5}
  .pr-voet{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line2);
    background:var(--bg2);flex-wrap:wrap}
  .pr-voet .knop{padding:7px 12px;font-size:12.5px}

  /* ── agenda ───────────────────────────────────────────── */
  .ag-groep{margin-bottom:18px}
  .ag-groep > h3{font-family:var(--mono);font-size:11px;letter-spacing:1.8px;text-transform:uppercase;
    color:var(--steel);margin:0 0 10px}
  .ag-groep.telaat > h3{color:var(--warm)}

  /* ── instellingen ─────────────────────────────────────── */
  .set-net{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  @media(max-width:860px){.set-net{grid-template-columns:1fr}}
  .set-veld{padding:12px 18px;border-bottom:1px solid var(--line2)}
  .set-veld:last-child{border-bottom:none}
  .set-veld label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:1.2px;
    text-transform:uppercase;color:var(--steel);margin-bottom:7px}
  .set-veld input,.set-veld textarea{width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--line);
    background:var(--bg);color:var(--ink);font-family:inherit;font-size:14px}
  .set-veld textarea{min-height:130px;resize:vertical;line-height:1.55;font-size:13.5px}
  .set-veld input:focus,.set-veld textarea:focus{outline:none;border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-zacht)}
  .set-veld .hint{margin:7px 0 0;font-family:var(--mono);font-size:10.5px;color:var(--steel);line-height:1.6}

  /* melding */
  .bo-melding{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:400;
    padding:13px 22px;border-radius:999px;background:var(--v-koel);color:#fff;font-size:14px;font-weight:500;
    box-shadow:var(--schaduw-l),var(--gloed);opacity:0;pointer-events:none;transition:all .35s var(--veer)}
  .bo-melding.zie{opacity:1;transform:translate(-50%,0)}
  /* ── beheer op een telefoon: echte kop met menupaneel ─── */
  .bo-mkop{display:none}
  .bo-mlaag{display:none}
  @media(max-width:900px){
    .bo-zij{display:none}
    .bo-mkop{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
      padding:12px 14px;background:color-mix(in srgb,var(--bg) 92%,transparent);
      backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
    .bo-mwaar{min-width:0;flex:1}
    .bo-mwaar b{display:block;font-family:var(--display);font-weight:600;font-size:17px;
      letter-spacing:-.03em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .bo-mwaar s{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:1.6px;
      text-transform:uppercase;color:var(--steel);text-decoration:none;margin-top:2px}
    .bo-mknop{width:40px;height:40px;flex-shrink:0;border-radius:12px;border:1px solid var(--line);
      background:var(--v-kaart);display:flex;flex-direction:column;align-items:center;
      justify-content:center;gap:4px;color:var(--ink);font-size:15px}
    .bo-mknop:active{background:var(--v-zacht)}
    .bo-mknop i{width:16px;height:1.8px;background:var(--ink);border-radius:2px}
    .bo-mknop.rond{border-radius:999px}
    .bo-mknop.rond i{display:none}

    .bo-mlaag{position:fixed;inset:0;z-index:120;display:block;pointer-events:none}
    .bo-mdoek{position:absolute;inset:0;background:rgba(6,10,22,.6);backdrop-filter:blur(5px);
      opacity:0;transition:opacity .28s}
    .bo-mpaneel{position:absolute;left:0;top:0;bottom:0;width:min(300px,84vw);
      background:var(--bg2);border-right:1px solid var(--line);
      box-shadow:26px 0 60px -30px rgba(0,0,0,.6);display:flex;flex-direction:column;
      transform:translateX(-100%);transition:transform .38s var(--veer);overflow-y:auto}
    .bo-mlaag.aan{pointer-events:auto}
    .bo-mlaag.aan .bo-mdoek{opacity:1}
    .bo-mlaag.aan .bo-mpaneel{transform:none}
    .bo-mpaneel-kop{display:flex;align-items:center;gap:12px;padding:18px 16px;
      border-bottom:1px solid var(--line2)}
    .bo-mpaneel-kop b{display:block;font-family:var(--display);font-weight:700;font-size:15px;
      letter-spacing:-.03em}
    .bo-mpaneel-kop s{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:1.8px;
      text-transform:uppercase;color:var(--steel);text-decoration:none;margin-top:3px}
    .bo-mpaneel-kop .bo-mknop{margin-left:auto}
    .bo-mlijst{flex:1;padding:10px 10px 6px;display:grid;gap:2px}
    .bo-mlijst .bo-tab{padding:13px 14px;font-size:15px}
    .bo-mlijst .bo-tab i{font-size:15px}
    .bo-mvoet{padding:10px;border-top:1px solid var(--line2)}
    .bo-mvoet .bo-tab{padding:13px 14px;font-size:15px}
    .bo-blad{padding:18px 16px 70px}
  }


  /* ── de kop op een telefoon ───────────────────────────── */
  @media(max-width:620px){
    /* de themaknop verhuist naar het menupaneel: in de kop is geen ruimte */
    .navrechts .thema{display:none}
    .kop-schaal{padding:0 8px 0 15px;gap:10px}
    .merk .hoofd{font-size:16px}
    .merk .teken{width:27px;height:27px}
    .navrechts{gap:7px}
    .navrechts .knop.klein{padding:9px 14px;font-size:12.5px}
  }
  @media(max-width:400px){
    .navrechts .knop.klein span{font-size:12px}
    .navrechts .knop.klein{padding:9px 12px}
    .merk .hoofd{font-size:15px}
  }

  /* de themaknop in het menupaneel */
  .mm-thema{display:flex;align-items:center;gap:12px;width:100%;margin-top:10px;
    padding:13px 16px;border-radius:var(--r-m);border:1px solid rgba(234,240,251,.14);
    background:transparent;color:#B9C4DA;font-size:14.5px;text-align:left;transition:all .25s}
  .mm-thema:hover{border-color:rgba(139,140,240,.5);color:#EAF0FB}
  .mm-thema .bol{width:20px;height:20px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,#F5A524 50%,#0A0F1C 50%);border:1px solid rgba(234,240,251,.3)}

/* ── melding als de aanvragen niet opgehaald konden worden ──────
   Deze mag opvallen. Een lege lijst zonder uitleg laat je denken
   dat er geen aanvragen zijn, terwijl ze er wel staan. */
.bo-waarschuw{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 18px;padding:13px 16px;border-radius:var(--r-m);
  background:color-mix(in srgb,var(--warm) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--warm) 40%,transparent)}
.bo-waarschuw i{display:grid;place-items:center;width:22px;height:22px;flex-shrink:0;
  border-radius:50%;background:var(--warm);color:#0A0F1C;
  font-family:var(--mono);font-size:13px;font-style:normal;font-weight:700}
.bo-waarschuw span{flex:1;min-width:200px;font-size:14px;color:var(--ink);line-height:1.5}
.bo-opnieuw{padding:8px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font-size:13px;font-weight:600;
  cursor:pointer;transition:all .2s}
.bo-opnieuw:hover{border-color:var(--warm)}

/* ── afmelden onderaan de zijbalk ────────────────────────────── */
.bo-tab.bo-afmeld{flex-wrap:wrap}
.bo-tab.bo-afmeld s{flex-basis:100%;padding-left:32px;margin-top:-2px;
  font-family:var(--mono);font-size:10px;text-decoration:none;
  color:var(--steel);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}