:root{--bg:#f4f6fa;--panel:#ffffff;--panel2:#ffffff;--line:#e3e7ef;--txt:#1b2330;--muted:#73808f;--accent:#2f6df6;--accent2:#15a36b;--ok:#16a34a;--warn:#d97706;--bad:#dc2626}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg);color:var(--txt);min-height:100vh}
.wrap{max-width:100%;margin:0 auto;padding:20px 26px 70px}
/* YourProgram-woordmerk: "Your" in de tekstkleur (wit op de donkere balk),
   "Program" in het goudverloop van yourprogram.nl, met het gouden YP-beeldmerk. */
.logo{font-weight:800;font-size:22px;letter-spacing:.5px;white-space:nowrap}
.logo b{background:linear-gradient(to bottom,#f1d87b 23%,#CA9B25 57%,#E4C05D 63%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#CA9B25}
.ypmark{height:1.05em;width:auto;vertical-align:-.14em;margin-right:.38em}
.muted{color:var(--muted)} .hidden{display:none!important}
/* Kleine helper-/lege-statustekst. Ontbrak, waardoor class="sm"-teksten op de standaardgrootte vielen. */
.sm{font-size:11.5px}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:16px}
.btn{background:var(--accent);color:#fff;border:none;padding:10px 16px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.btn.ghost{background:var(--panel2);border:1px solid var(--line);color:var(--txt)}
.btn.sm{padding:6px 11px;font-size:12px}
.btn:disabled{opacity:.5;cursor:default}
input,select,textarea{width:100%;background:#ffffff;border:1px solid var(--line);border-radius:10px;padding:11px 12px;color:var(--txt);font-size:14px;font-family:inherit}
/* Geen browser-focus-ring op velden; in plaats daarvan een subtiele blauwe rand (netter, leesbaarder) */
input:focus,select:focus,textarea:focus{outline:none;border-color:#3eb3e0}
textarea{min-height:54px;resize:vertical}
label{font-size:13px;font-weight:600;color:var(--muted)}
.field{margin-bottom:13px}
/* ---------- Inlogscherm in YourProgram-stijl: donker met goud ---------- */
#login{position:fixed;inset:0;z-index:300;margin:0;max-width:none;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 16px;overflow:auto;
  background:#0E0E10;
  background-image:radial-gradient(900px 520px at 50% -12%,rgba(217,180,74,.14),transparent 62%),radial-gradient(720px 440px at 88% 112%,rgba(217,180,74,.07),transparent 55%)}
#login.hidden{display:none}
.login-kop{text-align:center;margin-bottom:24px}
.login-logo-img{width:min(300px,78vw);height:auto;display:block;margin:0 auto;filter:drop-shadow(0 8px 22px rgba(217,180,74,.25))}
.cbar-logo{height:24px;width:auto;margin-right:20px;flex-shrink:0}
.login-sub{color:#83878f;font-size:11.5px;margin-top:8px;letter-spacing:2.4px;text-transform:uppercase}
#login .card{width:100%;max-width:400px;background:linear-gradient(180deg,#1a1a1e,#141417);border:1px solid #2a2a30;border-radius:20px;padding:30px 28px;
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(217,180,74,.05)}
#login .tabs{background:#101013;border:1px solid #26262c;border-radius:12px;padding:4px;gap:4px;margin-bottom:20px}
#login .tabs button{background:transparent;border:none;color:#8a8f98;border-radius:9px;padding:10px;font-weight:700}
#login .tabs button.on{background:#232329;color:#f1d87b;box-shadow:inset 0 0 0 1px rgba(217,180,74,.35)}
#login .field label{display:block;color:#9aa0a8;font-size:11.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;margin-bottom:6px}
#login .field input{width:100%;box-sizing:border-box;background:#101013;border:1px solid #2b2b31;border-radius:11px;color:#f2f2f2;padding:12px 13px;font-size:14px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
#login .field input:focus{border-color:#D9B44A;box-shadow:0 0 0 3px rgba(217,180,74,.14)}
#login .field input::placeholder{color:#565b63}
#login input[readonly]{opacity:.6}
#login .btn{background:linear-gradient(135deg,#F0D27E,#D9B44A,#A8842B);color:#0E0E10;font-weight:800;letter-spacing:.4px;border-radius:12px;padding:13px 16px;font-size:14px}
#login .btn:hover{filter:brightness(1.07)}
#login .btn:disabled{opacity:.55;cursor:default}
#login .muted{color:#8a8f98}
#login h3{color:#fff}
#login .msg{color:#9aa0a8}#login .msg.err{color:#ff8087}#login .msg.ok{color:#4ade80}
#login #inv-welkom{background:rgba(217,180,74,.1);border:1px solid rgba(217,180,74,.35);color:#f1d87b;padding:11px 13px;border-radius:11px;font-size:13px;line-height:1.55}
#login .lnk{background:none;border:none;color:#D9B44A;text-decoration:underline;cursor:pointer;font-family:inherit;font-size:12.5px}
.pfwrap{max-width:780px;margin:22px auto;background:var(--panel2);border:1px solid var(--line);border-radius:16px;padding:28px}
.pfav{width:76px;height:76px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;margin:0 auto 12px}
.pfgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
/* Profiel-tabbladen (Profiel / Voortgangsfoto's / Intakeformulier) */
.pftabbar{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:14px auto 0;max-width:780px;padding:0 4px}
.pftab{background:none;border:none;padding:11px 16px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;font-family:inherit}
.pftab:hover{color:var(--txt)}
.pftab.on{color:var(--txt);border-bottom-color:var(--accent)}
/* Voortgangsfoto-miniaturen */
.progthumb{position:relative;width:96px;height:96px;border-radius:10px;overflow:hidden;background:var(--panel);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;text-align:center}
.progthumb img{width:100%;height:100%;object-fit:cover;cursor:pointer;display:block}
.progdel{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.progdel:hover{background:#e5484d}
/* Zichtbaarheid-instellingen: schakelaars */
.pf-toggle{display:flex;align-items:center;gap:10px;font-size:12.5px;margin:11px 0;cursor:pointer;color:var(--txt)}
.pf-toggle input{display:none}
.pf-sw{width:34px;height:19px;border-radius:19px;background:#c7ccd3;position:relative;transition:background .15s;flex-shrink:0}
.pf-sw::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:left .15s}
.pf-toggle input:checked + .pf-sw{background:var(--accent)}
.pf-toggle input:checked + .pf-sw::after{left:17px}
.tabs{display:flex;gap:6px;margin-bottom:16px}
.tabs button{flex:1;padding:9px;border-radius:9px;background:#f1f4f8;border:1px solid var(--line);color:var(--muted);font-weight:600;cursor:pointer;font-family:inherit}
.tabs button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.msg{font-size:13px;margin-top:10px;min-height:18px}.msg.err{color:var(--bad)}.msg.ok{color:var(--ok)}
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.rolepill{font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;background:rgba(79,139,255,.16);color:var(--accent);text-transform:uppercase;letter-spacing:.5px}
.av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;background:linear-gradient(135deg,#3a4a6b,#2a3550);flex-shrink:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:16px 0}
.stat{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:15px}
.stat .n{font-size:24px;font-weight:800}.stat .n.acc{color:var(--accent)}.stat .n.ok{color:var(--ok)}
.stat .l{font-size:12px;color:var(--muted);margin-top:3px}
.row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}.row.click{cursor:pointer}.row.click:hover{background:rgba(79,139,255,.06)}
.row .nm{font-weight:600;font-size:14px}.row .sub{font-size:12px;color:var(--muted)}
.tag{font-size:11px;padding:3px 9px;border-radius:999px;background:#f1f4f8;border:1px solid var(--line);color:var(--muted)}
h2{font-size:20px;margin-bottom:4px}h3{font-size:15px;margin:18px 0 10px}
.note{font-size:13px;color:var(--muted);line-height:1.5;margin-top:8px}
.back{font-size:13px;color:var(--accent);cursor:pointer;display:inline-block;margin-bottom:10px}
.block{background:#f1f4f8;border:1px solid var(--line);border-radius:12px;padding:13px;margin-bottom:9px}
.block .bh{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.badge{min-width:30px;height:26px;padding:0 6px;border-radius:7px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.presc{font-size:13px;color:var(--muted);margin-left:39px}
.spin{color:var(--muted);font-size:13px;padding:20px;text-align:center}
/* ===== Klant-scherm: kalender naar het ontwerp ===== */
.i{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:-2px}
.i.sm-i{width:13px;height:13px}
.client-layout{display:flex;background:#fff;border:1px solid #e7e9ec;border-radius:12px;overflow:hidden;min-height:640px}
.cside{width:230px;flex-shrink:0;background:#16181c;color:#e6e8ea}
.cside-in{padding:14px 0 8px;display:flex;flex-direction:column;min-height:100%}
.cside .prof{padding:0 16px 10px;border-bottom:1px solid #2a2d33}
.cside .bigav{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#38bdf8,#6366f1);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff;margin-bottom:8px}
.cside .cnm{font-weight:700;font-size:13px}
.cside .cinfo{font-size:11px;color:#8f959d;margin-top:4px;line-height:1.5}
.cside .streak{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#c9cdd4;padding:7px 16px;border-bottom:1px solid #2a2d33}
.cnav{padding:6px;flex:1}
.cnav button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:6px 10px;border-radius:7px;font-size:12px;font-weight:600;color:#aab0b8;background:none;border:none;cursor:pointer;font-family:inherit}
.cnav button:hover{background:#22252b;color:#fff}
.cnav button.on{background:#2a2e35;color:#fff}
.cnav .i{width:13px;height:13px}
.cnav .soon{margin-left:auto;font-size:8.5px;color:#6b7280;border:1px solid #33373d;border-radius:6px;padding:1px 5px}
.cmain{flex:1;min-width:0;display:flex;flex-direction:column;background:#f6f7f8}
.calhead{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fff;border-bottom:1px solid #e7e9ec;flex-wrap:wrap}
.calhead .month{font-size:16px;font-weight:800}
.navarrows{display:flex;gap:2px}
.navarrows button{width:28px;height:28px;border-radius:6px;color:#8a919c;font-size:14px;background:none;border:none;cursor:pointer;font-family:inherit}
.navarrows button:hover{background:#f0f1f3}
.seg{display:flex;background:#eef1f4;border-radius:8px;padding:3px}
.seg button{padding:5px 14px;border-radius:6px;font-size:12px;font-weight:700;color:#8a919c;background:none;border:none;cursor:pointer;font-family:inherit}
.seg button.on{background:#fff;color:#1d2129;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.progsel{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e7e9ec;border-radius:10px;padding:6px 12px}
.progsel .pav{width:30px;height:30px;border-radius:8px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;background:linear-gradient(135deg,#38bdf8,#6366f1)}
.progsel .pn{font-weight:700;font-size:12.5px;line-height:1.2}
.progsel .pt{font-size:10.5px;color:#8a919c}
.tgl{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#8a919c;cursor:pointer;user-select:none;background:none;border:none;font-family:inherit}
.tgl .sw{width:34px;height:19px;border-radius:999px;background:#dfe3e8;position:relative;transition:background .15s}
.tgl .sw::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.tgl.on .sw{background:#27b376}
.tgl.on .sw::after{left:17px}
.mhead7{display:grid;grid-template-columns:repeat(7,1fr);background:#171719;color:#fff}
.mhead7 div{padding:8px 10px;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;text-align:center}
.mrow{display:grid;grid-template-columns:repeat(7,1fr)}
.mday{border-right:1px solid #f0f1f3;border-bottom:1px solid #e7e9ec;min-height:122px;padding:3px 4px 6px;background:#fff;position:relative}
.mday:last-child{border-right:none}
.mday.dim2{background:#fafbfc}
.mday-top{display:flex;align-items:center;gap:5px;margin:-3px -4px 6px;padding:4px 8px;background:#f4f5f7;border-bottom:1px solid #e7e9ec;color:#b3b9c2}
.mday-top .i{width:12px;height:12px}
.restchip{border:1px solid #e7e9ec;border-radius:999px;padding:0 7px;font-size:9.5px;font-weight:600;color:#8a919c;line-height:15px}
.dnum2{margin-left:auto;font-size:12px;font-weight:700;color:#1d2129}
.dnum2.today{color:#3eb3e0}
.mday.today-cell{outline:2px solid #6ec4e8;outline-offset:-2px;background:#fcfeff}
.addrow2{display:flex;gap:5px;margin-bottom:6px}
.addnewbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #e7e9ec;border-radius:7px;background:#fff;color:#8a919c;font-size:11px;font-weight:600;padding:5px 0;cursor:pointer;font-family:inherit}
.addnewbtn:hover{border-color:#b3b9c2;color:#2a9fce}
.sqbtn{width:30px;display:flex;align-items:center;justify-content:center;border:1px solid #e7e9ec;border-radius:7px;background:#fff;color:#8a919c;cursor:pointer}
.sqbtn:hover{border-color:#b3b9c2}
.mcard{border:1.5px solid #9fdcb8;border-radius:9px;padding:6px;background:#fff;position:relative;cursor:pointer;margin-bottom:6px}
.mcard.planned{border-color:#e7e9ec}
.mcard .msc{font-weight:800;font-size:12px;padding:2px 2px 5px;display:flex;justify-content:space-between;align-items:center;gap:6px}
.mcard .msc .wtitle{font-size:13.5px;font-weight:800;color:#1d2129;line-height:1.2}
.mcard .msc .wright{display:flex;align-items:center;gap:6px;flex-shrink:0}
.mcard .msc .wcount{font-size:10px;font-weight:700;color:#8a919c;background:#f0f1f3;border-radius:999px;padding:1px 7px}
.mcard .delx{color:#b3b9c2;cursor:pointer;font-size:13px;padding:0 3px;flex-shrink:0}
.mcard .delx:hover{color:#e5484d}
.mcard .msc{padding-right:22px}
.mcard .cardsel{position:absolute;top:5px;right:5px;width:15px;height:15px;cursor:pointer;accent-color:#3eb3e0;z-index:3;margin:0}
.mcard .cardtools{position:absolute;top:3px;right:26px;display:none;gap:1px;background:#fff;border:1px solid #e7e9ec;border-radius:8px;padding:2px;box-shadow:0 6px 18px rgba(15,18,22,.14);z-index:4}
.mcard:hover .cardtools{display:flex}
.mcard .cardtools button{border:none;background:none;color:#8a919c;cursor:pointer;padding:3px;border-radius:5px;display:flex;align-items:center}
.mcard .cardtools button:hover{background:#f0f1f3;color:#1d2129}
.mcard.selected{outline:2px solid #3eb3e0;outline-offset:-1px}
.mcard .cardtools button.mv{cursor:grab}
.mcard .cardtools button.mv:active{cursor:grabbing}
.mday.dragover,.pe-cell.dragover{background:#eaf7fd;box-shadow:inset 0 0 0 2px #6ec4e8}
.daynoot{background:#fdf6e3;border-left:3px solid #e7a44a;border-radius:5px;padding:4px 7px;margin-bottom:6px;font-size:10.5px;line-height:1.4;color:#6b5d3f;cursor:pointer;white-space:pre-line}
/* Geschiedenis-zoeker (History-knop in de bouwer) */
.histcard{background:#f6f7f8;border-radius:10px;padding:11px 13px;margin-bottom:10px}
.histcard .hh{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.histcard .hh b{font-size:13.5px;color:#1d2129}
.histcard .hbody{font-size:12.5px;color:#1d2129;line-height:1.5}
.histcard .hlabel{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;background:#e7e9ec;border-radius:6px;font-weight:800;font-size:11px;color:#5d6570;margin-right:7px;vertical-align:middle}
.histcard .hpr{color:#5d6570;margin-top:4px;white-space:pre-wrap;border-left:3px solid #e7a44a;padding-left:8px}
.histcard .hsc{margin-top:6px;font-weight:800;font-size:12.5px;color:#27b376}
.histcard .hsc.miss{color:#e5484d}
.histcard .hsc.leeg{color:#8a919c;font-weight:600}
#hist-tabs b{margin-left:5px;font-size:11px;background:#e7e9ec;color:#5d6570;border-radius:999px;padding:0 6px;font-weight:800}
#hist-tabs button.on b{background:#cdeafd;color:#1d6f9c}
#selbar{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#0f1113;color:#fff;border-radius:12px;padding:9px 14px;display:flex;align-items:center;gap:11px;font-size:13px;box-shadow:0 14px 44px rgba(0,0,0,.4);z-index:200}
#selbar .n{background:#3eb3e0;color:#fff;border-radius:999px;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}
#selbar .lnk{background:none;border:none;color:#8fd3ef;cursor:pointer;font-size:13px;font-family:inherit;padding:0 4px}
#selbar .lnk:hover{color:#fff;text-decoration:underline}
#selbar .ic{background:#22262c;border:none;color:#e6e8ea;cursor:pointer;border-radius:8px;padding:6px 8px;display:flex;align-items:center}
#selbar .ic:hover{background:#33383f}
.cblk{background:#eef2f7;border-radius:5px;padding:5px 7px;margin-bottom:4px;font-size:10.5px;line-height:1.42;position:relative;border-left:3px solid transparent}
.cblk .n{font-weight:700;font-size:11px;padding-right:14px}
.cblk .pr{color:#5d6570;white-space:pre-line}
.cblk.linked2{border-left-color:#8b7cf6}
.cblk.k-grijs{background:#f4f4f5}.cblk.k-roze{background:#fce8ec}.cblk.k-oranje{background:#fdeede}.cblk.k-geel{background:#fdf6d9}.cblk.k-blauw{background:#ddedfb}.cblk.k-groen{background:#e3f5e9}
.cblk .okc{position:absolute;right:5px;bottom:5px;width:14px;height:14px;border-radius:50%;background:#27b376;color:#fff;display:flex;align-items:center;justify-content:center}
.cblk .okc .i{width:9px;height:9px;stroke-width:2.4}
.cblk .okc.miss{background:#e5484d}
.loginp{background:#fff;border:1px solid #e7e9ec;border-radius:5px;padding:3px 7px;margin-top:4px;font-size:10.5px}
.combtn{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #e7e9ec;border-radius:7px;padding:6px 0;font-size:10.5px;font-weight:700;color:#4a4f57;background:#fff;margin-top:3px;cursor:pointer;font-family:inherit}
.combtn:hover{border-color:#b3b9c2}
.f-opts{display:flex;gap:6px;margin-top:6px}
.f-opts select{flex:1;font-size:11px;padding:5px 6px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--txt);width:auto}
.toast2{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#171719;color:#fff;font-size:12.5px;padding:10px 18px;border-radius:9px;z-index:500;opacity:0;transition:opacity .2s;pointer-events:none}
.toast2.show{opacity:.95}

/* ===== Bibliotheek (naar het ontwerp) ===== */
.libgrid{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:start}
@media(max-width:820px){.libgrid{grid-template-columns:1fr}}
.libnav{padding:10px;display:flex;flex-direction:column;gap:2px}
.libnav button{display:flex;align-items:center;gap:9px;text-align:left;padding:9px 11px;border-radius:8px;font-size:12.5px;font-weight:600;color:#5d6570;background:none;border:none;cursor:pointer;font-family:inherit}
.libnav button:hover{background:#f0f2f4}
.libnav button.on{background:#171719;color:#fff}
.thead{display:flex;align-items:center;padding:10px 18px;background:#f2f4f6;border-bottom:1px solid #e7e9ec;font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#8a919c;gap:12px}
.trow{display:flex;align-items:center;padding:12px 18px;border-bottom:1px solid #f0f1f3;gap:12px}
.trow:last-child{border-bottom:none}
.search2{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e7e9ec;border-radius:8px;padding:9px 13px;flex:1;max-width:520px;color:#b3b9c2}
.search2 input{border:none;flex:1;background:none;color:#1d2129;padding:0;width:auto}
/* Geen lelijke focus-ring om het zoekveld; subtiele blauwe rand om het hele veld bij focus */
.search2 input:focus{outline:none}
.search2:focus-within{border-color:#3eb3e0}
.srcbadge{min-width:26px;height:22px;padding:0 4px;border-radius:6px;background:#171719;color:#fff;font-size:8px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.legchip{display:inline-flex;align-items:center;gap:6px;border:1px solid #e7e9ec;border-radius:999px;padding:4px 10px;font-size:11.5px;font-weight:600;cursor:pointer;background:#fff;color:#5d6570}
.legchip.aan{border-color:#171719;background:#171719;color:#fff}
/* Trainingsdagen-popover in de zijbalk van het klant-scherm */
#cs-dagen-pop{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:80;background:#23272d;border:1px solid #33373d;border-radius:10px;padding:10px;width:216px;box-shadow:0 10px 28px rgba(0,0,0,.45)}
#cs-dagen-pop.show{display:block}
.dagknop{width:26px;height:26px;border-radius:7px;border:1px solid #3a3f46;background:#1c2025;color:#8f959d;font-size:10.5px;font-weight:700;cursor:pointer;font-family:inherit;text-transform:capitalize}
.dagknop.aan{background:#22c55e;border-color:#22c55e;color:#0c1116}
/* Afstreep-vinkje op de klantenlijst (bij een actief tag-filter) */
.afvink{width:22px;height:22px;border-radius:50%;border:2px solid #cfd4db;background:#fff;cursor:pointer;flex:none;margin-right:2px;color:#fff;font-size:12px;font-weight:800;line-height:1;padding:0}
.afvink:hover{border-color:var(--accent)}
.afvink.aan{background:var(--ok,#27b376);border-color:var(--ok,#27b376)}
.ktag.aan{outline:2px solid var(--accent);outline-offset:1px}
/* Randkleur-knopjes in het foto-bijsnijvenster */
.fcbg{width:22px;height:22px;border-radius:50%;border:1px solid #d0d4da;cursor:pointer;padding:0}
/* Tabellen in het AI-coach-antwoord */
.ai-tab{border-collapse:collapse;margin:6px 0 10px;font-size:12.5px;max-width:100%}
.ai-tab th,.ai-tab td{border:1px solid #e7e9ec;padding:5px 10px;text-align:left;vertical-align:top}
.ai-tab th{background:#f7f8f9;font-weight:700}
.lmodal{position:fixed;inset:0;background:rgba(15,18,22,.55);display:none;align-items:center;justify-content:center;z-index:400}
.lmodal.show{display:flex}
.lmodal .box{background:#fff;border-radius:14px;padding:20px;width:460px;max-width:92vw;max-height:84vh;overflow:auto}
.lmodal h3{margin-bottom:12px}
/* Scores invoeren door de coach (results-modal) */
.resrow{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid #eef0f2}
.resrow:last-child{border-bottom:none}
.resblok{flex:1.2;font-size:13px;font-weight:700;color:#1c2128}
.resblok .reslabel{color:#8a919c;font-weight:800;margin-right:4px}
.resblok .respr{font-weight:400;font-size:11.5px;color:#8a919c;margin-top:3px;white-space:pre-wrap}
.resinvoer{flex:1;display:flex;gap:6px;align-items:center}
.resval{flex:1;min-width:0;border:1px solid #e7e9ec;border-radius:8px;padding:8px 10px;font-size:12.5px;font-family:inherit}
.resval:disabled{background:#f6f7f8;color:#b3b9c2}
.resmiss{width:30px;height:30px;flex:none;border:1px solid #f3b8ba;border-radius:8px;background:#fff;color:#e5484d;cursor:pointer;display:flex;align-items:center;justify-content:center}
.resmiss .i{width:13px;height:13px}
.resmiss.on{background:#e5484d;color:#fff;border-color:#e5484d}
.resrow.missed .resblok{opacity:.55}
.kleurdots{display:flex;gap:10px;margin:6px 0 14px}
.kleurdots span{width:26px;height:26px;border-radius:50%;cursor:pointer;display:inline-block}
.kleurdots span.aan{outline:3px solid #171719;outline-offset:2px}

/* ===== Bouwer: bibliotheek-zoeker, demo-video en blokkleur (naar het ontwerp) ===== */
.exrow{position:relative}
.blokkleur{display:flex;gap:6px;align-items:center}
.blokkleur span{width:14px;height:14px;border-radius:50%;cursor:pointer;display:inline-block}
.exdrop{position:absolute;left:6px;top:100%;margin-top:4px;z-index:80;background:#fff;border:1px solid #e7e9ec;border-radius:12px;box-shadow:0 16px 44px rgba(15,18,22,.16);width:262px;padding:5px 0;display:none;max-height:280px;overflow:auto}
.exdrop.show{display:block}
.exdrop .hd{padding:8px 14px 5px;font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#8a919c}
.exopt{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer}
.exopt:hover{background:#f2f8fb}
.exopt .en{font-weight:700;font-size:12.5px}
.exopt .ep{font-size:10.5px;color:#8a919c;margin-top:1px}
.exopt .srcbadge{margin-left:auto}
.vidpop{position:absolute;right:-6px;top:100%;margin-top:6px;z-index:90;background:#fff;border:1px solid #e7e9ec;border-radius:12px;box-shadow:0 16px 44px rgba(15,18,22,.18);width:238px;padding:12px;display:none}
.vidpop.show{display:block}
.vidpop .vt{font-weight:800;font-size:12.5px;margin-bottom:8px;padding-right:18px}
.vidpop .vprev{background:#0d0f12;border-radius:8px;height:118px;position:relative;margin-bottom:8px;overflow:hidden}
.vidpop .vp-x{position:absolute;top:9px;right:12px;cursor:pointer;color:#8a919c;font-size:13px;z-index:5}
.vidpop .vp-x:hover{color:#e5484d}
.vidpop .vprev .vlabel{position:absolute;top:8px;left:8px;right:8px;color:#fff;font-size:10.5px;opacity:.85}
.vidpop .vprev .pbtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:27px;background:#e5484d;border-radius:6px;display:flex;align-items:center;justify-content:center}
.vidpop .vprev .pbtn::after{content:"";border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:2px}
.vidpop .vp-cap{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#8a919c}
.blokchips{margin-top:7px;display:flex;gap:6px;flex-wrap:wrap}
/* Demo-video koppelen aan warming-up / cooldown */
.cwmedia{position:relative;margin-top:5px}
.cwmedia .cwn{width:100%;font-size:12px;padding:6px 9px;border:1px solid #e7e9ec;border-radius:8px;font-family:inherit}
.cwmedia .cwchip{display:flex}
.cwmedia .cwchip:empty{display:none}
.vidchip{display:inline-flex;align-items:center;gap:8px;background:#f2f4f6;border-radius:8px;padding:6px 10px;font-size:11.5px;font-weight:600}
.vidchip .x{color:#b3b9c2;cursor:pointer}
.ic-btn.has-video{color:#2a9fce}
.cblk.k-yellow{background:#fdf4d5}.cblk.k-blue{background:#e0edfd}.cblk.k-purple{background:#ece4fb}.cblk.k-red{background:#fbe0e0}.cblk.k-green{background:#def4e6}.cblk.k-orange{background:#fdeada}

/* ===== Bouwer in ontwerp-stijl (ib2) + dag-menu + superset-cirkels ===== */
.ib2{background:#fff;border:1.5px solid #3eb3e0;border-radius:12px;padding:9px;font-size:12px;box-shadow:0 14px 40px rgba(15,18,22,.10);text-align:left;margin-bottom:6px}
.ib2 .sec{background:#f6f7f8;border-radius:9px;padding:9px 10px;margin-bottom:8px;position:relative;border:none}
.ib2 input,.ib2 textarea{width:100%;border:none;background:none;font-size:12px;padding:3px 0;resize:none;font-family:inherit;color:#1d2129;min-height:22px;overflow:hidden}
/* Geen focus-ring bij typen; je typt gewoon in het veld, netter zoals CoachRx */
.ib2 input:focus,.ib2 textarea:focus,.ib2 select:focus{outline:none}
.ib2 ::placeholder{color:#b3b9c2}
.ib2 .row-title{font-weight:800}
.ib2 .demolink{font-size:11px;color:#b3b9c2;cursor:pointer;padding:3px 0}
.ib2 .demolink:hover{color:#2a9fce}
.ib2 .exhead{display:flex;align-items:center;gap:7px}
.ib2 .exhead .lbl-badge{background:none;color:#2a9fce;font-weight:800;font-size:12.5px;flex:none;min-width:0;height:auto;padding:0;display:inline;border-radius:0}
.ib2 .exhead .lbl-badge::after{content:")"}
.ib2 .exhead input{font-weight:700}
.ib2 .extools{display:flex;gap:6px;color:#b3b9c2;margin-left:auto;flex:none;align-items:center}
.ib2 .extools .ic-btn{color:#b3b9c2}
.ib2 .extools .ic-btn:hover{color:#5d6570}
.ib2 .extools .ic-btn.has-video{color:#2a9fce}
.ib2 .corner{position:absolute;top:8px;right:9px;display:flex;gap:8px;color:#b3b9c2}
.ib2 .addbtns{display:flex;gap:6px;margin-bottom:8px}
.ib2 .addbtns button{flex:1;border:1px solid #e7e9ec;border-radius:8px;padding:8px 0;font-size:11.5px;font-weight:700;background:#fff;cursor:pointer;font-family:inherit;color:#1d2129}
.ib2 .addbtns button:hover{border-color:#b3b9c2}
.ib2 .addbtns .iconly{flex:0 0 34px;display:flex;align-items:center;justify-content:center;color:#8a919c}
.ib2 .foot{display:flex;gap:8px;flex-wrap:wrap}
.ib2 .foot .save{background:#3eb3e0;color:#fff;font-weight:700;border-radius:8px;padding:8px 14px;font-size:12px;border:none;cursor:pointer;font-family:inherit}
.ib2 .foot .save:hover{background:#2a9fce}
.ib2 .foot .cancel{border:1px solid #e7e9ec;border-radius:8px;padding:8px 14px;font-size:12px;font-weight:600;background:#fff;cursor:pointer;font-family:inherit;color:#1d2129}
.ib2 .exrow{border:none;padding:9px 10px;margin-bottom:0}
.ib2 .exrow.linked{border-left:none}
.ib2 .f-opts select{border:1px solid #e7e9ec;width:auto}
.sslink{display:flex;justify-content:center;align-items:center;width:24px;height:24px;border:1px solid #e7e9ec;border-radius:50%;background:#fff;cursor:pointer;margin:-2px auto 3px;position:relative;z-index:3;color:#8a919c}
.sslink:hover{border-color:#9aa0a8}
.sslink.aan{border-color:#3eb3e0;color:#2a9fce;background:#eaf6fb}
.daymenu{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;background:#fff;border:1px solid #e7e9ec;border-radius:12px;box-shadow:0 14px 40px rgba(15,18,22,.14);margin-bottom:8px}
.daymenu button{display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 6px;border-radius:9px;font-size:11px;font-weight:700;color:#4a4f57;background:none;border:none;cursor:pointer;font-family:inherit}
.daymenu button:hover{background:#f0f1f3}
.daymenu .i{width:17px;height:17px;color:#5d6570}
.mday.tall{min-height:420px}
.noscores .loginp,.noscores .okc{display:none!important}

/* ===== Statbar, klantentabel, contact-avatars, feed-rijen (naar het ontwerp) ===== */
.statbar2{background:#fff;border:1px solid #e7e9ec;border-radius:12px;display:grid;grid-template-columns:repeat(4,1fr);padding:20px 10px;margin-bottom:18px;text-align:center}
.statbar2 .n{font-size:24px;font-weight:800}
.statbar2 .n.acc{color:#2a9fce}
.statbar2 .l{font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#8a919c;margin-top:4px}
.statbar2 select{margin-top:8px;font-size:12px;padding:5px 8px;border:1px solid #e7e9ec;border-radius:7px;background:#fff;width:auto;font-family:inherit}
.cmav{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;color:#5d6570;font-weight:600}
.cmav .bol{width:56px;height:56px;border-radius:50%;background:#4a4f57;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;border:3px solid #e7e9ec}
.fbrow{display:flex;gap:11px;padding:12px 2px;border-top:1px solid #f0f1f3;align-items:flex-start}
.fbrow .fbadge{width:26px;height:26px;border-radius:7px;background:#171719;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.fbrow .fbody{flex:1;min-width:0}
.fbrow .fbody b{font-size:13px}
.fbrow .fbody .pr2{font-size:12.5px;color:#5d6570;margin-top:3px;white-space:pre-line;line-height:1.5}
.fbrow .fbody .loginp{max-width:340px;font-size:12px}
.fbrow .fside{display:flex;flex-direction:column;gap:8px;align-items:center;color:#b3b9c2;flex:none}
.dashvid{width:220px;max-width:100%;max-height:320px;border-radius:10px;background:#000;display:block;object-fit:contain}
.fbrow .okc2{width:22px;height:22px;border-radius:6px;border:1.5px solid #27b376;color:#27b376;display:flex;align-items:center;justify-content:center}
.fbrow .okc2.miss{border-color:#e5484d;color:#e5484d}
.fscore{font-size:17px;font-weight:800;padding:10px 2px 2px;border-bottom:1px solid #f0f1f3;margin-bottom:2px}
.kebab{border:none;background:none;color:#8a919c;font-size:16px;cursor:pointer;padding:2px 8px;font-family:inherit}
/* Coaches beheren: hover-rij + ⋮-menu */
.trow.crow{cursor:pointer;position:relative}
.trow.crow:hover{background:#fafbfc}
.trow.click{cursor:pointer;position:relative}
.trow.click:hover{background:#fafbfc}
/* Data > Atleten: klant-suggesties onder het naamveld van + Atleet */
.dt-sug{position:absolute;top:calc(100% + 4px);left:0;z-index:60;min-width:240px;max-height:230px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(16,24,40,.14)}
.dt-sug button{display:block;width:100%;text-align:left;padding:9px 13px;background:none;border:none;cursor:pointer;font-family:inherit;font-size:13px;color:var(--txt)}
.dt-sug button:hover{background:#f4f6f9}
/* Data > CrossFit Open: wereldtop-10 tabel */
.os-thead,.os-row{display:grid;grid-template-columns:34px minmax(0,1.1fr) minmax(0,1.1fr) 120px;gap:10px;align-items:center;padding:7px 4px}
.os-thead{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#8a919c;border-bottom:1px solid var(--line)}
.os-row{border-bottom:1px solid #f0f2f5;font-size:13px}
.os-row:last-child{border-bottom:none}
/* PR-merkje in de metric-geschiedenis (hoogste kg-meting ooit) */
.prbadge{display:inline-block;font-size:10px;font-weight:800;color:#9a7b1f;background:rgba(217,180,74,.18);border:1px solid rgba(217,180,74,.5);border-radius:6px;padding:0 5px;margin-left:6px;vertical-align:1px}
/* CoachRx-import: PR-kandidaten in een groot venster met nette rijen */
.crxpr-kop,.crxpr-rij{display:grid;grid-template-columns:26px minmax(0,1fr) 230px 110px;gap:12px;align-items:center;padding:9px 14px}
.crxpr-kop{background:#f6f7f9;border:1px solid var(--line);border-radius:10px 10px 0 0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#8a919c;padding:8px 14px}
.crxpr-rij{border-bottom:1px solid var(--line)}
.crxpr-overig{display:none;background:#fafbfc}
.crxpr-scheiding{padding:10px 14px;border-bottom:1px solid var(--line);background:#f6f7f9}
.crxpr-rij:last-child{border-bottom:none}
.crxpr-rij input[type=checkbox]{width:16px;height:16px;cursor:pointer}
.crxpr-rij input:not([type=checkbox]){border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:12.5px;width:100%;box-sizing:border-box}
/* Label op de klantenrij: uitnodiging nog niet geaccepteerd */
.pendtag{display:inline-block;font-size:10.5px;font-weight:700;color:#9a7b1f;background:rgba(217,180,74,.16);border:1px solid rgba(217,180,74,.45);border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:1px;white-space:nowrap}
/* Klant-tags + tag-picker + tags beheren */
.ktagcel{display:flex;align-items:center;gap:6px;flex-wrap:wrap;position:relative}
.ktag{display:inline-flex;align-items:center;gap:6px;background:#f2f4f6;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:600;color:#3a4048}
.ktag .x{color:#b3b9c2;cursor:pointer;font-size:9px}
.ktag .x:hover{color:#e5484d}
.kdot{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}
/* Tag-kiezer naast het zoekveld op de Klanten-pagina */
.tagkies{position:relative}
.tagkiesbtn{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #e7e9ec;border-radius:8px;padding:9px 13px;font-size:13px;font-weight:600;color:#3a4048;cursor:pointer;font-family:inherit;white-space:nowrap}
.tagkiesbtn:hover{border-color:#cfd4da}
.tagkiesbtn .i{color:#8a919c;width:14px;height:14px}
.tagkiesbtn.aan{border-color:var(--accent);color:var(--accent)}
.tagkiesbtn.aan .i{color:var(--accent)}
.tagdrop{position:absolute;top:100%;left:0;z-index:70;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 44px rgba(15,18,22,.16);width:224px;padding:6px;margin-top:5px}
.tagdrop .hd{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#8a919c;padding:4px 8px}
.tagdrop .tagopt{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:none;padding:7px 8px;border-radius:7px;font-size:12.5px;cursor:pointer;font-family:inherit;color:var(--txt)}
.tagdrop .tagopt:hover{background:#f4f8fb}
.tagdrop .tagopt .vk{color:#1d9a63;font-weight:800}
.tagdrop .leeg,#tagbeheer-lijst .leeg{font-size:12px;color:#8a919c;padding:8px}
.tagnieuw{display:flex;align-items:center;gap:8px;padding:8px 6px 4px;border-top:1px solid #f0f1f3;margin-top:4px;flex-wrap:wrap}
.tagnieuw input{flex:1;min-width:90px;border:1px solid #e7e9ec;border-radius:8px;padding:6px 9px;font-size:12px;font-family:inherit}
.kleuren{display:flex;gap:5px}
.kc{width:16px;height:16px;border-radius:5px;cursor:pointer;border:2px solid transparent;box-sizing:border-box}
.kc.on{border-color:#171719}
/* Vrije kleurkiezer naast de vaste tag-kleuren */
.kcvrij{width:22px;height:18px;padding:0;background:none;border-radius:5px}
.tagrow{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid #f0f1f3}
.tagrow:last-child{border-bottom:none}
/* Programma-editor (week/dag-indeling) */
.pe-top{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.pe-badges{display:flex;gap:6px}
.pe-bar{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:6px 0}
.pe-assign{font-size:12.5px;color:#8a919c;font-weight:600}
.pe-weeks{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-weight:800;font-size:13px}
.wtab{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:700;font-family:inherit;color:var(--txt)}
.wtab.on{background:var(--nav);color:#fff;border-color:var(--nav)}
/* Doorlopend week/dag-raster, zelfde look als de klant-kalender (.mlabel/.mday) */
.pe-cal{background:#fff;border:1px solid var(--line);border-radius:10px;overflow-x:auto}
.pe-wkbar{display:flex;align-items:center;gap:8px;scroll-margin-top:60px}
.pe-wkdel{background:none;border:none;color:#b3b9c2;cursor:pointer;display:flex;align-items:center;padding:4px;border-radius:6px;margin-left:6px}
.pe-wkdel:hover{color:#e5484d;background:#fdeaea}
.pe-wkdel .i{width:13px;height:13px}
.pe-hd7{display:grid;background:#f4f5f7}
.pe-hd7 div{padding:7px 10px;font-size:11.5px;font-weight:800;color:#5d6570;border-bottom:1px solid #e7e9ec;border-right:1px solid #e7e9ec}
.pe-hd7 div:last-child{border-right:none}
.pe-row{display:grid}
.pe-cell{background:#fff;border-right:1px solid #f0f1f3;border-bottom:1px solid #e7e9ec;min-height:160px;padding:8px;position:relative}
.pe-cell:last-child{border-right:none}
.pe-row:last-of-type .pe-cell{border-bottom:none}
.pe-cell .mcard{cursor:pointer}
.pe-ib{margin-top:8px;border:1px solid #cfe6f2;border-radius:10px;padding:8px;background:#fff}
/* Berichten-sectie (uit ontwerp.html) */
.chatwrap{display:flex;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;min-height:560px}
.chatlist{width:300px;border-right:1px solid var(--line);flex-shrink:0}
.chatlist .clh{padding:14px 16px;border-bottom:1px solid var(--line);font-weight:800}
.chatrow{display:flex;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line2);cursor:pointer;align-items:center}
.chatrow:hover{background:#fafbfc}
.chatrow.on{background:#f0f8fc}
.chatrow .prev{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.thread{flex:1;display:flex;flex-direction:column}
.thread .th{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px}
.thread .msgs{flex:1;padding:18px;display:flex;flex-direction:column;gap:10px;background:#fbfcfd;overflow:auto;max-height:560px}
.inputbar{display:flex;gap:10px;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.inputbar input{flex:1;border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-family:inherit;font-size:12.5px}
/* Weekworkout + leaderboard (uit ontwerp.html) */
.lbwrap{max-width:860px;margin:0 auto}
.lbhead{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:18px}
.lbcat{font-size:15px;font-weight:800;margin:20px 0 8px}
.lbcat span{color:#d63384}
.lbrow{display:flex;align-items:center;gap:13px;padding:11px 16px;border-bottom:1px solid var(--line2)}
.lbrow:last-child{border-bottom:none}
.lbrow .rank{width:22px;font-weight:800;color:var(--muted);font-size:13px}
.lbrow .lbnm{font-weight:700;font-size:13.5px}
.lbrow .lbsc{font-size:12px;color:var(--muted)}
.lbrow .fist{margin-left:auto;display:flex;gap:10px;align-items:center;color:var(--muted2);font-size:11px;font-weight:700}
.lbrow .fist .fb{display:flex;align-items:center;gap:4px;background:none;border:none;color:var(--muted2);font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;padding:4px 6px;border-radius:7px}
.lbrow .fist .fb:hover{background:#f0f1f3;color:#4a4f57}
.lbrow .fist .fb.aan{color:#d63384}
.rxtag{font-size:9px;font-weight:800;border-radius:4px;padding:1px 4px;background:#d63384;color:#fff;vertical-align:middle}
.rxtag.sc{background:#8b7cf6}
.cpill.gray{background:#f0f1f3;color:#8a919c}
.lid-in{border:1px solid #e7e9ec;border-radius:7px;padding:7px 10px;font-size:12.5px;font-family:inherit;background:#fff;color:#1d2129}
.lid-in:focus{outline:none;border-color:#8fcde8}
.coachmenu{position:absolute;top:44px;right:14px;z-index:60;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 40px rgba(15,18,22,.16);padding:5px;min-width:200px}
.coachmenu button{display:block;width:100%;text-align:left;background:none;border:none;padding:9px 11px;font-size:12.5px;color:var(--txt);border-radius:7px;cursor:pointer;font-family:inherit}
.coachmenu button:hover{background:#f4f8fb}
.coachmenu button.danger{color:#e5484d}
.rowicons{display:flex;gap:12px;color:#b3b9c2;align-items:center}
.rowicons .i{cursor:pointer}
.rowicons .i:hover{color:#5d6570}
/* Actie met klein tekstje erbij (verzoek Stefan: icoontjes alleen zijn onduidelijk) */
.rowact{display:inline-flex;align-items:center;gap:4px;cursor:pointer;color:#8a919c;font-size:10.5px;font-weight:600;white-space:nowrap}
.rowact:hover{color:var(--accent)}
.rowact .i{width:13px;height:13px}
.wchip{font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px}
.wchip.ok{background:#def4e6;color:#1d9a63}
.wchip.laat{background:#fbe0e0;color:#e5484d}
.wchip.leeg{background:#f0f1f3;color:#8a919c;font-weight:600}
.tagchip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:7px;background:#f0f2f4;color:#4a4f57}
.tagchip .sq2{width:8px;height:8px;border-radius:2px;flex:none}
.plusbtn{width:22px;height:22px;border:1px solid #e7e9ec;border-radius:6px;background:#fff;color:#8a919c;cursor:pointer;font-size:12px;line-height:1}
@media print{
  .cbar,.cside,.calhead .btn,.calhead .seg,.calhead .tgl,.calhead .navarrows,.addrow2,.daymenu,.combtn,.mcard .delx,.mcard .cardsel,.mcard .cardtools,#selbar,.toast2{display:none!important}
  body,.cmain{background:#fff!important}
  .client-layout{border:none;min-height:0}
  .mrow,.mhead7{min-width:0!important}
  .mhead7{background:#fff;color:#1d2129;border-bottom:2px solid #1d2129}
  .wrap{padding:0}
}
/* builder popover (zoals CoachRx-kaart) */
.builderin{background:var(--panel);border:1px solid var(--accent);border-radius:12px;padding:11px;margin-bottom:6px;box-shadow:0 8px 24px rgba(20,40,90,.10)}
.bp-sec{background:#f1f4f8;border:1px solid var(--line);border-radius:11px;padding:11px;margin-bottom:10px}
.titlerow{display:flex;align-items:center;gap:8px}
.titlerow .ibt{flex:1;font-weight:700;font-size:14px}
.iconbtn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:2px}
.iconbtn:hover{color:var(--txt)}
.bp-sec .ibs{margin-top:8px;font-size:13px}
.demolink{font-size:11px;color:var(--accent);cursor:pointer;margin-top:7px}
.exrow{background:#f1f4f8;border:1px solid var(--line);border-radius:11px;padding:11px;margin-bottom:9px}
.exrow.linked{border-left:3px solid var(--accent2)}
.exr-head{display:flex;align-items:center;gap:7px;margin-bottom:8px}.exr-tools{display:none;gap:2px;align-items:center}.exrow:hover .exr-tools{display:flex}.hist{flex-shrink:0}
.lbl-badge{color:var(--accent);font-weight:800;font-size:13px;flex-shrink:0}.lbl-badge::after{content:")"}
.exrow .exn{flex:1;font-size:13px;padding:7px 8px}
.ic-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 3px;line-height:1;font-family:inherit}
.ic-btn:hover{color:var(--txt)}.ic-btn.on{color:var(--accent2)}
.f-presc{font-size:12px;padding:7px 8px}
.f-desc{font-size:12px;padding:7px 8px;min-height:46px}
.bprow{display:flex;gap:8px;align-items:center;margin:6px 0}
.addbtn{flex:1;justify-content:center}
@media(max-width:820px){.client-layout{flex-direction:column}.cside{width:100%}.mrow,.mhead7{min-width:1100px}.calscroll{overflow-x:auto}.builderin{padding:9px}}

/* ===== Coach dashboard (naar het ontwerp) ===== */
.cwrap{--accent:#3eb3e0;--accent-d:#2a9fce;--ok:#27b376;--ok-bg:#e2f6ec;--bad:#e5484d;--bad-bg:#fde9ea;--purple:#8b7cf6;--purple-bg:#eeebfd;--teal-bg:#dff2f8;--nav:#171719;--line:#e7e9ec;--line2:#f0f1f3;--muted:#8a919c;--muted2:#b3b9c2;--card:#fff;--txt:#1d2129;color:var(--txt)}
.cbar{display:flex;align-items:center;gap:10px;background:var(--nav);color:#fff;height:52px;padding:0 20px;border-radius:12px;margin-bottom:22px}
/* Volle breedte zoals het ontwerp: donkere balk tegen de randen, inhoud gecentreerd */
body.coachmode .wrap{max-width:none;padding:0}
body.coachmode .cbar{border-radius:0;margin-bottom:0;padding:0 26px;position:sticky;top:0;z-index:120}
body.coachmode #cpage{max-width:1420px;margin:0 auto;padding:24px 26px 70px}
body.coachmode #cpage.fullbleed{max-width:none;padding:0}
#cpage.fullbleed .client-layout{border:none;border-radius:0;min-height:calc(100vh - 52px);overflow:visible}
#cpage.fullbleed .cside-in{position:sticky;top:52px;height:calc(100vh - 52px);min-height:0;overflow-y:auto;overflow-x:hidden}
/* ingeklapt: geen eigen scrollbalk, zodat de tooltips naast de balk zichtbaar zijn */
#cpage.fullbleed .client-layout.collapsed .cside-in{overflow:visible}
.progsel{cursor:pointer;position:relative}
.progsel .car{color:#b3b9c2;font-size:11px;margin-left:4px}
.progdrop{position:absolute;top:calc(100% + 8px);left:0;z-index:160;background:#fff;border:1px solid #e7e9ec;border-radius:12px;box-shadow:0 18px 50px rgba(15,18,22,.18);width:280px;padding:8px;display:none;text-align:left}
.progdrop.show{display:block}
.pd-search{display:flex;align-items:center;gap:8px;background:#f2f4f6;border-radius:9px;padding:9px 12px;margin-bottom:8px;color:#b3b9c2}
.pd-search input{border:none;background:none;flex:1;font-size:12.5px;padding:0;width:auto}
.pd-lijst{max-height:300px;overflow:auto}
.pd-kop{padding:8px 12px 4px;font-size:10.5px;font-weight:800;color:#8a919c;text-transform:uppercase;letter-spacing:.5px;border-top:1px solid #eceef1;margin-top:6px}
.pd-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer}
.pd-row:hover{background:#f4f8fb}
.pd-badge{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:800;flex:none}
.pd-naam{font-weight:700;font-size:12.5px;flex:1}
.pd-vink{color:#27b376;display:none}
.pd-row.actief .pd-vink{display:inline-flex}
.mday.selectable{cursor:pointer}
.mday.selectable:hover{background:#fbfdfe}
/* Doorlopend scrollen zoals CoachRx: plakkende koppen + maand-scheidingsbalken */
.mlabel{padding:10px 14px;font-weight:800;font-size:13px;letter-spacing:.3px;background:#f6f7f8;border-bottom:1px solid #e7e9ec;color:#4a4f57}
#cpage.fullbleed .calhead{position:sticky;top:52px;z-index:110}
#cpage.fullbleed .mhead7{position:sticky;top:calc(52px + var(--calh,62px));z-index:40}
/* Zijpanelen (Assessment enz.) zoals het ontwerp */
.sidepanel{width:320px;flex-shrink:0;background:#1d2025;color:#e6e8ea;padding:16px;display:none;position:sticky;top:52px;align-self:flex-start;height:calc(100vh - 52px);overflow:auto}
.sidepanel.show{display:block}
.sp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.sp-head h3{font-size:14px;color:#fff;font-weight:800}
.sp-x{color:#aab0b8;cursor:pointer;display:flex}
.sp-x:hover{color:#fff}
.sp-tabs{display:flex;gap:16px;border-bottom:1px solid #33373d;margin-bottom:14px}
.sp-tabs button{padding:6px 2px;font-size:12px;font-weight:700;color:#8f959d;border-bottom:2px solid transparent;background:none;border-top:none;border-left:none;border-right:none;cursor:pointer;font-family:inherit}
.sp-tabs button.on{color:#fff;border-bottom-color:#3eb3e0}
.sp-field{margin-bottom:12px}
.sp-field label{font-size:11px;font-weight:700;color:#c9cdd4;display:block;margin-bottom:5px}
.sp-field input,.sp-field select,.sp-field textarea{width:100%;background:#26292f;border:1px solid #33373d;border-radius:7px;padding:8px 10px;color:#e6e8ea;font-size:12px}
.sp-field textarea{min-height:90px;resize:vertical}
.sp-btn{background:#3eb3e0;color:#fff;font-weight:700;font-size:12px;padding:9px 14px;border-radius:7px;border:none;cursor:pointer;font-family:inherit}
.sp-btn:hover{background:#2a9fce}
.sp-btn.ghost{background:#26292f;color:#e6e8ea;border:1px solid #3a3f47}
.sp-info{font-size:11px;color:#8f959d;margin:6px 0 12px}
/* Sneltoetsen-paneel (zoals het ontwerp) */
.keyrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 0;font-size:12.5px;color:#e6e8ea}
.keygroep{font-size:13px;font-weight:800;color:#fff;margin:14px 0 4px}
.kbd{background:#26292f;border:1px solid #3a3f47;border-radius:5px;padding:2px 8px;font-size:10.5px;font-weight:700;color:#c9cdd4;margin-left:4px;white-space:nowrap}
.ass-pf{display:flex;gap:20px;margin-top:7px}
.ass-pf label{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#e6e8ea;font-weight:600;margin:0}
.ass-pf input{width:auto}
.ass-help{display:inline-flex;width:15px;height:15px;border-radius:50%;background:#3a3f47;color:#c9cdd4;font-size:10px;font-weight:700;align-items:center;justify-content:center;margin-left:5px;cursor:pointer;vertical-align:1px}
.ass-help:hover{background:#3eb3e0;color:#fff}
/* Hover-uitleg bij de assessment-vraagtekens (vast gepositioneerd, wordt niet geknipt door de zijbalk) */
#asstip{position:fixed;z-index:9999;max-width:300px;background:#0f1113;color:#e6e8ea;border:1px solid #3a3f47;border-radius:10px;padding:11px 13px;font-size:11.5px;font-weight:400;line-height:1.55;white-space:pre-line;box-shadow:0 14px 44px rgba(0,0,0,.55);pointer-events:none;display:none}
#asstip.show{display:block}
.ass-noteslink{display:block;color:#3eb3e0;font-size:12px;font-weight:600;cursor:pointer;margin-top:7px}
.ass-noteslink:hover{text-decoration:underline}
.ass-notes{margin-top:7px}
/* Metrics & 1RM (zoals het ontwerp) */
.mx-hd{display:flex;justify-content:space-between;align-items:center;background:#3a3f47;color:#e6e8ea;border-radius:8px;padding:11px 13px;font-size:13px;font-weight:700;cursor:pointer;margin-top:8px}
.mx-hd .plus{font-size:16px;cursor:pointer;padding:0 4px;color:#c9cdd4}
.mx-hd .plus:hover{color:#fff}
.mx-cols{display:flex;color:#8b919b;font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;padding:10px 11px 5px}
.mx-row{display:flex;align-items:center;padding:10px 11px;border-bottom:1px solid #24272c;font-size:12.5px;color:#e6e8ea;cursor:pointer}
.mx-row:hover{background:#22252b}
.mx-naam{flex:1.7;display:flex;align-items:center;gap:8px;line-height:1.3}
.mx-naam .mxcam{margin-left:auto;color:#8b919b;cursor:pointer;display:inline-flex;padding:2px 6px}
.mx-naam .mxcam:hover{color:#3eb3e0}
#mxvid{z-index:9999}
/* Metric-detail: geschiedenislijst */
.mh-head{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid #e7e9ec;font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#8a919c}
.mh-row{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid #f0f1f3;font-size:13px;color:#1d2129}
.mh-v{flex:1;font-weight:700}
.mh-d{flex:1;color:#5d6570}
.mh-n{flex:2;color:#5d6570;white-space:pre-line}
.mh-x{width:26px;text-align:right;flex:none}
.mxd-pf{display:flex;gap:18px;align-items:center}
.mxd-pf label{display:flex;align-items:center;gap:6px;font-size:14px;color:#1d2129;font-weight:600;cursor:pointer}
.mxd-pf input{width:auto}
.mx-cur{flex:.6}
.mx-pm{flex:.4;text-align:right;font-weight:700}
.metgrid{display:grid;grid-template-columns:280px 1fr;flex:1;background:#f6f7f8}
.metlist{background:#fff;border-right:1px solid #e7e9ec;overflow:auto;max-height:calc(100vh - 120px)}
.metlist .mlh{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;border-bottom:1px solid #e7e9ec}
.metlist .grp{padding:8px 15px;background:#f2f4f6;font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#8a919c;display:flex;justify-content:space-between}
.metrow{display:flex;justify-content:space-between;align-items:center;padding:9px 15px;border-bottom:1px solid #f0f1f3;font-size:12.5px;cursor:pointer}
.metrow:hover{background:#fafbfc}
.metrow .mv{font-weight:700}
.metrow .mv.na{color:#b3b9c2;font-weight:400}
.metmain{padding:18px}
.metcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.metcard{background:#fff;border:1px solid #e7e9ec;border-radius:12px;padding:16px;min-height:130px}
.metcard h3{margin-bottom:10px;font-size:13.5px}
.metcard .nodata{border:1px dashed #e7e9ec;border-radius:8px;color:#b3b9c2;font-size:11.5px;text-align:center;padding:14px 6px}
.metcard .val{font-size:22px;font-weight:800}
.metcard .delta{font-size:11.5px;color:#27b376;font-weight:700}
.spark{display:flex;align-items:flex-end;gap:4px;height:44px;margin-top:10px}
.spark i{flex:1;background:#cfe9f4;border-radius:3px 3px 0 0;min-height:3px}
.spark i.hi{background:#3eb3e0}
/* Zijbalk in-/uitklappen (zoals het ontwerp) */
.collapsebtn{width:30px;height:30px;border-radius:50%;background:#22252b;color:#aab0b8;display:flex;align-items:center;justify-content:center;font-size:14px;border:1px solid #2c3037;padding:0;cursor:pointer;margin:8px 12px 2px auto;flex:none;font-family:inherit}
.collapsebtn:hover{background:#2c3037;color:#fff}
.mini-sess{display:none}
.client-layout.collapsed .cside{width:52px;overflow:visible;z-index:70}
.client-layout.collapsed .cside .prof{padding:12px 0 10px}
.client-layout.collapsed .cside .prof .cnm,.client-layout.collapsed .cside .prof .cinfo,.client-layout.collapsed .cside #cs-dagen{display:none}
.client-layout.collapsed .cside .prof .bigav{width:34px;height:34px;font-size:11px;margin:0 auto}
.client-layout.collapsed .mini-sess{display:flex;align-items:center;justify-content:center;color:#e6e8ea;font-size:11px;font-weight:800;margin:7px auto 4px;background:#22252b;border-radius:10px;width:34px;padding:3px 0}
.client-layout.collapsed .cside .streak{display:none}
.client-layout.collapsed .cnav{overflow:visible}
.client-layout.collapsed .cnav button{justify-content:center;padding:11px 0;font-size:0;gap:0;position:relative}
.client-layout.collapsed .cnav .soon{display:none}
.client-layout.collapsed .cnav button::after{content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:#171719;color:#fff;font-size:11px;font-weight:600;padding:5px 10px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .06s;z-index:200;border:1px solid #2c3037}
.client-layout.collapsed .cnav button:hover::after{opacity:1}
.client-layout.collapsed .collapsebtn{margin:14px auto 4px}
/* Doelen + notities (zoals het ontwerp) */
.goalopt{border:1.5px solid #3a3f47;border-radius:8px;padding:11px 12px;font-size:12.5px;font-weight:600;color:#e6e8ea;margin-bottom:9px;cursor:pointer}
.goalopt:hover{border-color:#565c66}
.goalopt.aan{border-color:#3eb3e0}
.sp-chip{display:flex;justify-content:space-between;align-items:center;border:1.5px solid #3eb3e0;border-radius:8px;padding:9px 11px;font-size:12px;font-weight:600;margin-bottom:8px;color:#fff}
.sp-note{background:#26292f;border-radius:8px;margin-bottom:10px;overflow:hidden}
.sp-note .nh{display:flex;justify-content:space-between;align-items:center;padding:8px 11px;background:#2e3238;font-size:11.5px;font-weight:700;color:#fff}
.sp-note .nh span{display:flex;gap:10px;color:#8f959d}
.sp-note .nh .i{cursor:pointer}
.sp-note .nh .i:hover{color:#fff}
.sp-note .nb{padding:9px 11px;font-size:11.5px;color:#c9cdd4;line-height:1.65;white-space:pre-line}
.sp-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:12px;color:#e6e8ea}
.ampm{display:flex;gap:6px}
.ampm button{border:1px solid #3a3f47;border-radius:6px;padding:3px 7px;font-size:9.5px;font-weight:700;color:#8f959d;background:none;cursor:pointer;font-family:inherit}
.ampm button.on{background:#3eb3e0;border-color:#3eb3e0;color:#fff}
.sp-dark{background:#2e3238;border-radius:8px 8px 0 0;padding:8px 11px;font-size:12px;font-weight:700;color:#fff;display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.sp-dark .i{cursor:pointer;color:#8f959d}
.sp-dark .i:hover{color:#fff}
.sp-list{background:#26292f;border-radius:0 0 8px 8px;padding:10px 12px;font-size:11px;color:#c9cdd4;line-height:1.85;max-height:330px;overflow:auto}
.sp-chip .x{color:#8f959d;cursor:pointer}
.sp-chip .x:hover{color:#fff}
/* Chat-popup rechtsonder (zoals CoachRx Message) */
.chatpop{position:fixed;right:64px;bottom:0;width:302px;background:#fff;border-radius:12px 12px 0 0;box-shadow:0 -8px 44px rgba(0,0,0,.28);z-index:230;display:none;flex-direction:column;height:430px}
/* Op de telefoon (het lid gebruikt de app alleen mobiel): chat schermbreed */
@media(max-width:480px){.chatpop{left:0;right:0;width:auto;height:70vh;max-height:560px}}
.chatpop.show{display:flex}
.chatpop .ch{background:#26292f;color:#fff;padding:10px 12px;border-radius:12px 12px 0 0;display:flex;align-items:center;gap:9px}
.chatpop .ch b{font-size:12.5px;flex:1}
.chatpop .ch .i{width:13px;height:13px;color:#aab0b8;cursor:pointer}
.chatpop .ch .i:hover{color:#fff}
.chatpop .msgs2{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:#fbfcfd}
.bub{max-width:88%;padding:8px 11px;border-radius:14px;font-size:12px;line-height:1.5;white-space:pre-wrap;overflow-wrap:break-word}
.bub.them{background:#fff;border:1px solid #e7e9ec;align-self:flex-start;border-bottom-left-radius:4px}
.bub.me{background:#3eb3e0;color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.bub .meta{font-size:10px;opacity:.65;margin-top:3px}
.chatpop .cin{border-top:1px solid #e7e9ec;padding:8px 10px}
.chatpop .cin input{width:100%;border:none;font-size:12px;padding:6px 2px}
.chatpop .cinrow{display:flex;align-items:center;gap:10px;color:#b3b9c2}
.chatpop .send{margin-left:auto;background:#3eb3e0;color:#fff;font-weight:700;font-size:12px;padding:6px 14px;border-radius:7px;border:none;cursor:pointer;font-family:inherit}
.chatpop .send:hover{background:#2a9fce}
.cbar .logo{font-weight:900;font-size:17px;letter-spacing:.5px;margin-right:20px;color:#fff}
.cnav2{display:flex;gap:2px;flex:1;flex-wrap:wrap}
.cnav2 button,.cnav2 a{color:#c9cdd4;font-size:12px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;padding:7px 12px;border-radius:6px;background:none;border:none;cursor:pointer;font-family:inherit;text-decoration:none;display:inline-block}
.cnav2 button:hover,.cnav2 a:hover{color:#fff}
.cnav2 button.on,.cnav2 a.on{background:#fff;color:var(--nav)}
.navbadge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;margin-left:6px;border-radius:999px;background:#e11d48;color:#fff;font-size:10px;font-weight:800;letter-spacing:0;vertical-align:1px}
.wcdot{display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;padding:0 3px;margin-left:5px;border-radius:999px;background:#e11d48;color:#fff;font-size:10px;font-weight:800}
.exdrop .hdx{float:right;cursor:pointer;color:#8a919c;font-size:12px;padding:0 2px;line-height:1.4}
.exdrop .hdx:hover{color:#fff}
.vidtile{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:#14161a;color:#fff;font-size:10px;cursor:pointer;flex:none;border:1px solid #2a2e35}
.vidtile:hover{background:#2a2e35}
#vidoverlay{position:fixed;inset:0;background:rgba(10,12,15,.82);display:none;align-items:center;justify-content:center;z-index:600}
#vidoverlay video{max-width:min(760px,86vw);max-height:80vh;border-radius:14px;background:#000;box-shadow:0 24px 80px rgba(0,0,0,.6)}
#vidoverlay .vx{position:absolute;top:18px;right:26px;color:#fff;font-size:34px;line-height:1;cursor:pointer;opacity:.8}
#vidoverlay .vx:hover{opacity:1}
#vidoverlay .ytvak{width:min(860px,90vw);aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 24px 80px rgba(0,0,0,.6)}
#vidoverlay .ytvak iframe{width:100%;height:100%;border:0}
.cbar-right{display:flex;align-items:center;gap:12px}
/* Avatar-knop met pijltje (zodat je ziet dat hij klikbaar is) */
.cavbtn{display:flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;padding:0;color:#8f959d}
.cavbtn:hover{color:#fff}
.cav-caret{width:13px;height:13px;stroke-width:2}
/* Notificatie-bel + paneel */
.belwrap{position:relative}
.belbtn{position:relative;background:none;border:none;cursor:pointer;padding:6px;color:#c9cdd4;display:flex;align-items:center}
.belbtn:hover{color:#fff}
.belbtn .i{width:17px;height:17px}
.belbadge{position:absolute;top:0;right:0;background:#e5484d;color:#fff;font-size:9.5px;font-weight:800;min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.belpanel{display:none;position:absolute;top:calc(100% + 10px);right:-8px;width:360px;max-height:440px;overflow:auto;background:#fff;border:1px solid #e7e9ec;border-radius:12px;box-shadow:0 14px 40px rgba(15,18,22,.18);z-index:300;color:#171719}
.belpanel.show{display:block}
.belkop{padding:10px 14px;border-bottom:1px solid #f0f1f3;text-align:right}
.bellink{color:var(--accent);font-size:12.5px;font-weight:600;cursor:pointer}
.belrij{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-bottom:1px solid #f0f1f3;cursor:pointer}
.belrij:hover{background:#f7f9fb}
.belrij.on{background:color-mix(in srgb,var(--accent) 9%,#fff)}
.belrij.on:hover{background:color-mix(in srgb,var(--accent) 14%,#fff)}
.belico{font-size:15px;line-height:1.3}
.beltxt{flex:1;font-size:12.8px;line-height:1.45}
.beltijd{display:block;color:#8a919c;font-size:11px;margin-top:2px}
.beldot{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:5px;flex:none}
.belleeg{padding:22px 14px;color:#8a919c;font-size:12.5px;text-align:center}
.cbar .cav{width:30px;height:30px;border-radius:50%;background:#3a3f47;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;border:2px solid #565c66;cursor:pointer;padding:0;font-family:inherit}
.avwrap{position:relative}
.avmenu{position:absolute;right:0;top:38px;background:#fff;border-radius:12px;box-shadow:0 14px 44px rgba(0,0,0,.28);min-width:220px;padding:8px;display:none;z-index:320}
.avmenu.show{display:block}
.avm-kop{display:flex;gap:10px;align-items:center;padding:8px 10px 10px;border-bottom:1px solid #eef0f3;margin-bottom:6px}
.avm-kop b{font-size:13.5px;color:#1c2026;display:block}
.avm-rol{font-size:11px;color:#8a919c;display:block;margin-top:1px}
.avm-av{width:34px;height:34px;border-radius:50%;background:#3a3f47;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.avmenu button{display:flex;gap:9px;align-items:center;width:100%;text-align:left;background:none;border:none;padding:9px 10px;border-radius:8px;font-size:13px;color:#2a2e35;cursor:pointer;font-family:inherit}
.avmenu button:hover{background:#f2f4f6}
.avmenu button .i{color:#8a919c}
.instwrap{display:flex;gap:18px;align-items:flex-start}
.instnav{width:220px;flex:none;padding:8px}
.instnav button{display:flex;gap:9px;align-items:center;width:100%;text-align:left;background:none;border:none;padding:10px 12px;border-radius:9px;font-size:13px;color:#2a2e35;cursor:pointer;font-family:inherit}
.instnav button:hover{background:#f2f4f6}
.instnav button.on{background:#eef2f6;font-weight:700}
.instnav button .i{color:#8a919c}
.instpaneel{flex:1;min-width:0}
.instav{width:64px;height:64px;border-radius:50%;background:#3a3f47;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;flex:none}
.instprog{display:flex;align-items:center;gap:14px;background:#f6f8fa;border:1px solid #eef0f3;border-radius:12px;padding:14px 16px;margin-bottom:16px}
.pring{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.pring span{width:42px;height:42px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#1c2026}
.instbanner{display:flex;align-items:center;gap:16px;background:#f6f8fa;border:1px solid #eef0f3;border-radius:12px;padding:18px;margin-bottom:18px}
.instav-wrap{position:relative;display:inline-block}
.instav.groot{width:76px;height:76px;font-size:24px}
.instav-pen{position:absolute;right:-3px;bottom:-3px;width:26px;height:26px;border-radius:50%;background:#1c2026;color:#fff;border:2px solid #fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.instav-pen .i{width:12px;height:12px}
.instgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
@media(max-width:900px){.instgrid{grid-template-columns:1fr}}
.instlink{color:var(--accent);font-size:11px;font-weight:700;cursor:pointer;margin-left:8px;text-transform:none}
.instlogo{width:46px;height:46px;border-radius:10px;background:#eef0f3;display:flex;align-items:center;justify-content:center;color:#9aa1ab;flex:none;overflow:hidden}
.themagrid{display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start}
@media(max-width:1000px){.themagrid{grid-template-columns:1fr}}
.th-preset{width:24px;height:24px;border-radius:50%;display:inline-block;cursor:pointer;border:2px solid #fff;box-shadow:0 0 0 1px #dfe3e8;flex:none}
.th-preset:hover{transform:scale(1.1)}
.th-phone{position:relative;width:302px;background:#050506;border-radius:52px;padding:11px;color:#F5F4F2;box-shadow:0 24px 64px rgba(0,0,0,.45),inset 0 0 0 2px #3a3d44,inset 0 0 0 5px #101114;font-family:Inter,sans-serif;margin:0 auto}
.th-phone::before{content:"";position:absolute;left:-2px;top:120px;width:3px;height:30px;border-radius:2px;background:#2a2c31}
.th-phone::after{content:"";position:absolute;left:-2px;top:162px;width:3px;height:52px;border-radius:2px;background:#2a2c31}
.th-screen2{position:relative;background:#0E0E10;border-radius:42px;height:600px;display:flex;flex-direction:column;overflow:hidden;padding:10px 14px 6px}
.th-status{position:relative;display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700;color:#F5F4F2;padding:2px 10px 0;margin-bottom:14px}
.th-island{position:absolute;left:50%;transform:translateX(-50%);top:0;width:84px;height:22px;background:#050506;border-radius:14px}
.th-ico{display:inline-flex;align-items:center;gap:4px}
.th-scherm{flex:1;min-height:0;overflow:hidden}
.th-tabbar{display:flex;border-top:1px solid rgba(255,255,255,.08);padding-top:8px;margin-top:8px}
.th-homebar{width:110px;height:4px;border-radius:3px;background:#4a4e56;margin:7px auto 0}
.pt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.pt-kaart{border:1px solid #e7eaee;border-radius:14px;padding:16px;display:flex;flex-direction:column;background:#fbfcfd}
.pt-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#8a919c;background:#f0f2f5;border-radius:999px;padding:4px 10px}
.pt-dot{width:8px;height:8px;border-radius:50%;background:#e5533d;display:inline-block}
.cbar .lo{background:none;border:1px solid #3a3f47;color:#c9cdd4;border-radius:8px;padding:6px 11px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.cbar .lo:hover{color:#fff;border-color:#565c66}
.dashgrid{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start}
@media(max-width:900px){.dashgrid{grid-template-columns:1fr}}
.cwrap h1{font-size:22px;font-weight:800;margin-bottom:18px}
.cwrap h2{font-size:16px;font-weight:700}
.panel{background:#f0f2f4;border-radius:12px;padding:18px}
.ctabs{display:flex;gap:20px;margin-bottom:12px}
.ctabs button{padding:4px 2px;font-weight:700;font-size:13px;color:var(--muted);border:none;background:none;border-bottom:2px solid transparent;cursor:pointer;font-family:inherit}
.ctabs button.on{color:var(--accent);border-color:var(--accent)}
.attn-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.fchip{font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--muted);cursor:pointer;font-family:inherit}
.fchip.on{background:var(--nav);color:#fff;border-color:var(--nav)}
.attn-card{background:#fff;border-radius:10px;border:1px solid var(--line)}
.attn-row{display:flex;align-items:center;gap:12px;padding:13px 15px;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.attn-row:last-child{border-bottom:none}
.attn-row.click{cursor:pointer}.attn-row.click:hover{background:#fafbfc}
.attn-row .nm{font-weight:700;font-size:13px;min-width:130px}
.attn-row .pills{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.cpill{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap}
.cpill.teal{background:var(--teal-bg);color:var(--accent-d,#1e91b8)}
.cpill.ok{background:var(--ok-bg);color:var(--ok)}
.cpill.bad{background:var(--bad-bg);color:var(--bad)}
.cpill.purple{background:var(--purple-bg);color:var(--purple)}
.cavc{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;background:linear-gradient(135deg,#38bdf8,#6366f1)}
.feedcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px;margin-top:10px}
.feedcard .fh{display:flex;gap:11px;align-items:center;margin-bottom:8px}
.feedblock{display:flex;gap:10px;padding:6px 0;font-size:13px}
.feedblock .bic{width:22px;height:22px;border-radius:6px;background:#eef1f4;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#5d6570;flex-shrink:0}
.feedblock .desc{color:var(--muted);font-size:12.5px;margin-top:2px}
.sideblock{background:#f0f2f4;border-radius:12px;padding:18px;margin-bottom:18px}
.sideblock .shead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.statecard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;gap:13px;align-items:center}
.ring{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ring i{background:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:13px}
/* Mijn cijfers als carrousel + aandacht-kebab/snooze */
.statbig{font-size:34px;font-weight:800;line-height:1;color:var(--nav);min-width:58px;text-align:center}
.statdots{display:flex;gap:6px;justify-content:center;margin-top:10px}
.statdot{width:7px;height:7px;border-radius:50%;background:#d4d8dd;cursor:pointer}
.statdot.on{background:var(--accent)}
.attn-row{position:relative}
.attn-row.snoozed{opacity:.55}
.attn-kebab:hover{color:#5d6570}
.attnmenu{position:absolute;top:44px;right:12px;z-index:60;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 40px rgba(15,18,22,.16);padding:5px;min-width:200px}
.attnmenu button{display:block;width:100%;text-align:left;background:none;border:none;padding:8px 10px;font-size:12.5px;color:var(--txt);border-radius:7px;cursor:pointer;font-family:inherit}
.attnmenu button:hover{background:#f4f8fb}
.tp-avs{display:flex;gap:22px;margin:14px 2px 4px;flex-wrap:wrap}
.tp-av{text-align:center;font-size:11px;color:var(--muted);cursor:pointer}
.tp-av .circ{width:56px;height:56px;border-radius:50%;background:#6b7280;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;border:3px solid #cfe9f4;margin:0 auto 6px}
.cempty{color:var(--muted);font-size:12.5px;text-align:center;padding:20px 10px;line-height:1.6}
.cstat{display:inline-flex;flex-direction:column;gap:2px}
.cstat .n{font-size:26px;font-weight:800;color:var(--accent)}
.cstat .l{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#4a4f57}
.csoon{background:#fff;border:1px solid var(--line);border-radius:12px;padding:34px 20px;text-align:center;color:var(--muted);line-height:1.7}

/* ---------- Data-sectie: YP-atletenrapport (dt-) ---------- */
.dt-subnav{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:4px;width:max-content;margin-bottom:16px}
.dt-subnav button{background:none;border:0;color:var(--muted);padding:7px 15px;border-radius:7px;font-weight:600;font-size:13px;cursor:pointer;font-family:inherit}
.dt-subnav button:hover{color:var(--txt)}
.dt-subnav button.on{background:var(--accent);color:#fff}
.dt-kpis{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.dt-kpi{background:var(--panel);border:1px solid var(--line);border-left:3px solid #C9A227;border-radius:10px;padding:11px 16px;min-width:145px}
.dt-kpi .v{font-size:20px;font-weight:800}
.dt-kpi .l{color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.dt-grid-cols{--dtcols:28px minmax(150px,205px) repeat(7,minmax(58px,1fr)) minmax(130px,150px)}
.dt-thead{display:grid;grid-template-columns:28px minmax(150px,205px) repeat(7,minmax(58px,1fr)) minmax(130px,150px);gap:8px;align-items:end;padding:0 14px 8px}
.dt-thead button{background:none;border:0;color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;text-align:center;padding:2px 0;cursor:pointer;font-family:inherit}
.dt-thead button:hover{color:var(--txt)}
.dt-thead button.on{color:var(--accent)}
.dt-thead button:first-child,.dt-thead button:nth-child(2){text-align:left}
.dt-trow{display:grid;grid-template-columns:28px minmax(150px,205px) repeat(7,minmax(58px,1fr)) minmax(130px,150px);gap:8px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:9px 14px;margin-bottom:7px;cursor:pointer;transition:border-color .12s}
.dt-trow:hover{border-color:#b9c2d1}
.dt-trow .rk{font-weight:800;color:var(--muted);text-align:center}
.dt-trow.top1 .rk{color:#C9A227}
.dt-trow .nm{overflow:hidden}
.dt-trow .nm b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-trow .nm span{color:var(--muted);font-size:11.5px}
.dt-trow .ccell{text-align:center}
.dt-chip{display:inline-block;min-width:48px;padding:2.5px 7px;border-radius:6px;font-weight:700;font-size:12px;text-align:center;font-variant-numeric:tabular-nums}
.dt-chip.g{background:rgba(22,163,74,.12);color:var(--ok)}
.dt-chip.a{background:rgba(217,119,6,.12);color:var(--warn)}
.dt-chip.r{background:rgba(220,38,38,.10);color:var(--bad)}
.dt-chip.e{background:#eef0f4;color:#9aa1ad}
.dt-bar{position:relative;height:21px;background:#eef0f4;border-radius:5px}
.dt-bar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:linear-gradient(90deg,#a8851f,#C9A227);min-width:2px}
.dt-bar .tline{position:absolute;top:-3px;bottom:-3px;width:2px;background:#1b2330;opacity:.4}
.dt-bar .txt{position:absolute;right:7px;top:0;bottom:0;display:flex;align-items:center;font-weight:800;font-size:12px}
.dt-legend{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-top:12px;flex-wrap:wrap}
.dt-legend .dot{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.dt-athead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.dt-athead h2{font-size:26px;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.dt-badge{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:7px 15px;text-align:center}
.dt-badge .v{font-size:19px;font-weight:800}
.dt-badge .l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.dt-bwedit{width:64px;background:#fff;border:1px solid #C9A227;border-radius:6px;font-size:17px;font-weight:800;text-align:center;padding:2px;font-family:inherit}
.dt-bwedit.bad{border-color:var(--bad);color:var(--bad)}
.dt-grid2{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:16px;align-items:start}
@media(max-width:900px){.dt-grid2{grid-template-columns:1fr}.dt-thead{display:none}.dt-trow{grid-template-columns:28px 1fr minmax(120px,145px)}.dt-trow .ccell{display:none}}
.dt-h3{font-size:12.5px;text-transform:uppercase;color:var(--muted);letter-spacing:.08em;font-weight:700;margin-bottom:12px}
.dt-catbar{margin-bottom:11px}
.dt-catbar .toprow{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:4px}
.dt-catbar .pct{font-weight:800}
.dt-catbar .track{position:relative;height:9px;background:#eef0f4;border-radius:4px}
.dt-catbar .track .fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px}
.dt-catbar .track .tline{position:absolute;top:-2px;bottom:-2px;width:2px;background:#1b2330;opacity:.35}
.dt-catcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;margin-top:16px}
.dt-catcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.dt-catcard h4{background:#f7f8fb;border-bottom:1px solid var(--line);padding:9px 16px;font-weight:800;text-transform:uppercase;font-size:12.5px;letter-spacing:.05em;display:flex;justify-content:space-between}
.dt-testrow{display:flex;align-items:center;gap:10px;padding:7px 16px;border-bottom:1px solid #f0f1f5;font-size:13px}
.dt-testrow:last-child{border-bottom:0}
.dt-testrow .tn{flex:1;min-width:0}
.dt-testrow .gl{color:var(--muted);font-size:11.5px;min-width:56px;text-align:right}
.dt-scedit{width:74px;background:#fff;border:1px solid var(--line);border-radius:6px;font-weight:600;text-align:right;padding:3px 7px;font-size:13px;font-family:inherit}
.dt-scedit:focus{border-color:var(--accent)}
.dt-scedit.bad{border-color:var(--bad);color:var(--bad)}
.dt-delta{font-weight:800;text-align:center}
.dt-delta.pos{color:var(--ok)}.dt-delta.neg{color:var(--bad)}.dt-delta.zero{color:var(--muted)}
.dt-table{border-collapse:collapse;width:100%}
.dt-table th,.dt-table td{padding:8px 10px;text-align:center;white-space:nowrap;font-size:13px}
.dt-table th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--line)}
.dt-table td:first-child,.dt-table th:first-child{text-align:left}
.dt-table tbody tr{border-bottom:1px solid #f0f1f5}
.dt-cathead{background:#f7f8fb;font-weight:800;text-transform:uppercase;font-size:11.5px;letter-spacing:.05em}
.dt-rankrow{display:flex;align-items:center;gap:12px;padding:7px 0;cursor:pointer;border-radius:8px}
.dt-rankrow:hover{background:#f4f6fa}
.dt-rankrow .pos{font-weight:800;width:26px;color:var(--muted);text-align:right}
.dt-rankrow.top3 .pos{color:#C9A227}
.dt-rankrow .rn{width:180px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-rankrow .rbar{flex:1;position:relative;height:22px;background:#eef0f4;border-radius:5px}
.dt-rankrow .rbar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px}
.dt-rankrow .rsc{width:76px;text-align:right;font-weight:800;font-size:14px}
.dt-rankrow .rpct{width:62px;text-align:right}
@media(max-width:640px){.dt-rankrow .rn{width:110px;font-size:12.5px}.dt-rankrow .rpct{display:none}}

/* ---------- Data-sectie: wedstrijdanalyse (wd-) ---------- */
.wd-kaart{padding:16px;margin-bottom:12px}
.wd-kop{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.wd-pre{white-space:pre-wrap;font-family:inherit;font-size:13px;line-height:1.55;color:#3c4552;background:#f7f8fb;border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin:10px 0}
.wd-tag{display:inline-block;background:#f2f4f8;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;margin:0 6px 6px 0}
.wd-tag.meta{color:var(--muted);font-weight:600}
.wd-tag.skill{color:#a16207;background:rgba(201,162,39,.10);border-color:rgba(201,162,39,.35)}
.wd-tag.click{cursor:pointer}
.wd-tag.off{opacity:.35}
.wd-mrow{display:flex;align-items:center;gap:10px;padding:4px 0}
.wd-mrow .mn{width:190px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd-mrow .mbar{flex:1;position:relative;height:14px;background:#eef0f4;border-radius:4px}
.wd-mrow .mbar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;min-width:2px}
.wd-mrow .mc{width:34px;text-align:right;font-weight:800;font-size:13px}
@media(max-width:640px){.wd-mrow .mn{width:120px;font-size:12px}}

/* ---------- Help / handleiding (app/help.js) ---------- */
.belbtn.on{color:#fff}
.helpkop{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.helpkop>div:first-child{flex:1;min-width:260px}
.helpzoek{position:relative;display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:0 10px;width:320px;max-width:100%}
.helpzoek .i{width:15px;height:15px;color:var(--muted);flex:none}
.helpzoek input{border:none;outline:none;background:none;padding:10px 8px;font-size:13.5px;font-family:inherit;width:100%;color:var(--txt)}
.helpzoek-x{background:none;border:none;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;padding:0 2px}
.helpwrap{display:flex;gap:18px;align-items:flex-start}
.helpnav{width:250px;flex:none;padding:8px;position:sticky;top:70px}
.helpnav button{display:flex;gap:9px;align-items:center;width:100%;text-align:left;background:none;border:none;padding:10px 12px;border-radius:9px;font-size:13px;color:#2a2e35;cursor:pointer;font-family:inherit}
.helpnav button:hover{background:#f2f4f6}
.helpnav button.on{background:#eef2f6;font-weight:700}
.helpnav button .i{color:var(--muted);flex:none}
.helpnav button span:not(.helpnav-n){flex:1;min-width:0}
.helpnav-n{font-size:11px;font-weight:700;color:var(--muted);background:#e8ebef;border-radius:20px;padding:1px 7px;flex:none}
.helpnav-n.soon{color:var(--muted2)}
.helppaneel{flex:1;min-width:0;background:#fff}
.helpintro{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:6px}
.helpstap{padding:20px 0;border-bottom:1px solid var(--line2)}
.helpstap:last-child{border-bottom:none;padding-bottom:4px}
.helpstap-kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.helpstap-kop h2{margin:0;font-size:15.5px}
.helpnr{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:12.5px;display:flex;align-items:center;justify-content:center;flex:none}
.helpbron{font-size:11.5px;font-weight:700;color:var(--muted);background:#f0f2f4;border-radius:20px;padding:2px 9px}
.helpstap p{margin:8px 0 0;font-size:13.5px;line-height:1.65;color:#3a4048;max-width:72ch}
.helpshot{margin:14px 0 0;cursor:zoom-in}
.helpshot img{width:100%;display:block;border:1px solid var(--line);border-radius:10px;background:#f7f8fa}
.helpshot figcaption{font-size:11.5px;color:var(--muted2);margin-top:6px}
/* Screenshots uit de telefoon-app: op telefoonformaat tonen, niet uitgerekt. */
.helpshot.telefoon img{width:auto;max-width:320px;border-radius:16px;background:#0E0E10}
.helpshot.ontbreekt{cursor:default}
.helpshot.ontbreekt img{display:none}
.helpshot.ontbreekt figcaption{font-size:0}
.helpshot.ontbreekt figcaption::before{content:"Schermafbeelding volgt.";font-size:12.5px;color:var(--muted)}
#helpzoom{position:fixed;inset:0;background:rgba(10,12,15,.86);display:none;align-items:center;justify-content:center;z-index:900;cursor:zoom-out}
#helpzoom.show{display:flex}
#helpzoom img{max-width:94vw;max-height:92vh;border-radius:10px;box-shadow:0 24px 80px rgba(0,0,0,.6)}
#helpzoom .vx{position:absolute;top:16px;right:26px;color:#fff;font-size:34px;line-height:1;opacity:.85}
@media(max-width:900px){.helpwrap{flex-direction:column}.helpnav{width:100%;position:static;display:flex;flex-wrap:wrap}.helpnav button{width:auto}}

/* ---------- Foto's/video's in de chat (bijlagen bij een bericht) ---------- */
.bijlknop{background:#fff;border:1px solid var(--line);border-radius:999px;width:34px;height:34px;cursor:pointer;font-size:15px;line-height:1;flex:none;display:flex;align-items:center;justify-content:center;padding:0}
.bijlknop:hover{background:#f4f6f8}
.chatpop .bijlknop{width:28px;height:28px;font-size:13px}
.bijlrij{display:flex;flex-wrap:wrap;gap:6px}
.chatpop .bijlrij{padding:0 0 6px}
.bijlchip{display:inline-flex;align-items:center;gap:6px;background:#f1f3f6;border:1px solid #e3e6ea;border-radius:999px;padding:3px 9px;font-size:11.5px;color:#454c56}
.bijlchip b{cursor:pointer;color:#8a919c;font-weight:700;font-size:13px;line-height:1}
.bijlchip b:hover{color:#e5484d}
.chatmedia{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.chatmedia img,.chatmedia video{width:150px;max-width:100%;height:100px;object-fit:cover;border-radius:9px;cursor:pointer;background:#0e0e10;display:block}
.chatpop .chatmedia img,.chatpop .chatmedia video{width:120px;height:84px}

/* ---------- Video-kiezer in de blok-popover (demo-video toevoegen) ---------- */
.vidpop .vzk{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:12px;font-family:inherit;margin-top:4px}
.vidpop .vzk-lijst{max-height:190px;overflow:auto;margin-top:6px;display:flex;flex-direction:column;gap:2px}
.vidpop .vzk-rij{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:8px;cursor:pointer;font-size:12px}
.vidpop .vzk-rij:hover{background:#f4f6f8}
.vidpop .vzk-rij img{width:42px;height:28px;object-fit:cover;border-radius:5px;flex:none;background:#0e0e10}

/* ---------- Groot-weergave: bladerpijltjes bij meerdere bestanden ---------- */
#vidoverlay .vnav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:52px;line-height:1;cursor:pointer;opacity:.75;user-select:none;padding:18px 14px}
#vidoverlay .vnav:hover{opacity:1}
#vidoverlay .vprev{left:14px}
#vidoverlay .vnext{right:14px}
#vidoverlay .vtel{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;font-size:12.5px;opacity:.8;background:rgba(0,0,0,.45);padding:4px 12px;border-radius:999px}

/* "+ Plak blok" in de knoppenrij van de bouwer (blok-klembord) */
.addbtns .plakblok{border-style:dashed;color:#2a9fce;border-color:#bfe3f2}
.addbtns .plakblok:hover{background:#f0f8fc}

/* Blok slepen naar een andere sessie: sleepgreep + doelmarkering */
.exrow .lbl-badge[draggable]{cursor:grab}
.exrow .lbl-badge[draggable]:active{cursor:grabbing}
.mcard.dragover{outline:2px dashed #3eb3e0;outline-offset:2px;background:#f0f8fc}

/* Techniek-notitie per oefening (geel kaartje onder het blok in de bouwer) */
.exnote{margin-top:6px}
.exnote-kaart{background:#fff9e6;border:1px solid #f0e2b0;border-radius:8px;padding:6px 9px;font-size:11.5px;line-height:1.5;cursor:pointer;white-space:pre-wrap}
.exnote-kaart:hover{background:#fdf3d3}
.exnote-edit textarea{width:100%;border:1px solid #f0e2b0;background:#fffdf4;border-radius:8px;padding:7px 9px;font-size:11.5px;font-family:inherit;resize:none;overflow:hidden}

/* Historie-treffers zijn klikbaar (naar die dag op de kalender) + oplichtende dag */
.histcard.klik{cursor:pointer}
.histcard.klik:hover{background:#f4f9fc;border-color:#bfe3f2}
.mday.hist-licht{outline:3px solid #3eb3e0;outline-offset:-3px;background:#eaf6fb;transition:background .6s,outline-color .6s}

/* Scoretype + timecap op een blok (alleen in de blog-bouwer) */
.scorevak{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.scorevak select,.scorevak input{font-size:11px;padding:3px 6px;border:1px solid var(--line);border-radius:6px;font-family:inherit;background:#fff}
.scorevak .capinp{width:110px}
.scorevak .capvak{display:inline-flex;gap:6px;align-items:center}

/* Taalkiezer in de bovenbalk (vlag + pijltje) */
.taalbtn .vlag{width:22px;height:15px;border-radius:3px;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.taalmenu{min-width:180px}
.taalmenu .vlag{width:20px;height:14px;border-radius:2px;flex:none}
.taalmenu .taal-check{margin-left:auto;color:#2a2e35;font-weight:700}