/* Lettertypes voor het kaartje (zelf gehost; OFL-licentie in vendor/fonts) */
@font-face{font-family:'Fraunces';src:url('/vendor/fonts/fraunces.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/vendor/fonts/fraunces-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Inter';src:url('/vendor/fonts/inter.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0c0e13; --bg2:#11141b; --panel:#151922; --panel2:#1a1f2a; --hover:#1f2532;
  --line:#242b39; --line2:#2f3849;
  --tx:#e8ecf4; --tx2:#98a2b8; --tx3:#66708a;
  --acc:#141414; --acc2:#2c2b29;
  --grn:#2f7a4a; --amb:#a8680f; --red:#b42318; --pur:#7a5a3a; --cyn:#2b6f6b;
  --r:12px; --shadow:0 10px 30px rgba(0,0,0,.45);
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,Helvetica,Arial,sans-serif;
}
html[data-theme="light"]{
  --bg:#f4f6fa; --bg2:#eef1f7; --panel:#ffffff; --panel2:#f7f9fc; --hover:#eef2f9;
  --line:#e2e8f2; --line2:#d3dbe8;
  --tx:#141a26; --tx2:#5a6478; --tx3:#8590a5;
  --shadow:0 8px 24px rgba(20,30,60,.08);
}
body{background:var(--bg);color:var(--tx);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
a{color:var(--acc);text-decoration:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

/* ---------- layout ---------- */
/* 100dvh in plaats van 100vh: op een telefoon rekent 100vh met de adresbalk
   mee, waardoor de onderkant van het scherm wegvalt. */
#app{display:flex;height:100vh;height:100dvh;width:100vw}
#side{width:230px;flex:0 0 230px;background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:16px 12px}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px}
.brand .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--acc),var(--pur));display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;letter-spacing:-.5px}
.brand b{font-size:15px;letter-spacing:-.2px;display:block}
.brand span{font-size:11px;color:var(--tx3)}
.navlbl{font-size:12px;color:var(--tx3);padding:14px 10px 6px;font-weight:700}
.nav{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:var(--tx2);font-weight:500;width:100%;text-align:left;transition:.12s}
.nav em{font-style:normal}
.nav:hover{background:var(--hover);color:var(--tx)}
.nav.on{background:var(--panel2);color:var(--tx);box-shadow:inset 0 0 0 1px var(--line)}
.nav .dot{width:8px;height:8px;border-radius:3px;flex:0 0 8px}
.nav .ico{width:17px;height:17px;flex:0 0 17px;opacity:.75}
.nav.on .ico{opacity:1}
.icowrap{display:inline-flex;width:17px;height:17px;flex:0 0 17px}
/* Iets meer lucht in de menu-items; zo leest de zijbalk rustiger. */
.nav{padding:10px 11px}
.nav .cnt{margin-left:auto;font-size:11px;color:var(--tx3);background:var(--panel);padding:1px 7px;border-radius:20px;border:1px solid var(--line)}
.sidefoot{margin-top:auto;padding:10px 8px 2px;border-top:1px solid var(--line);font-size:11px;color:var(--tx3);display:flex;align-items:center;gap:8px;justify-content:space-between}

#main{flex:1;display:flex;flex-direction:column;min-width:0}
#top{height:60px;flex:0 0 60px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 20px;background:var(--bg)}
#top h1{font-size:17px;font-weight:650;letter-spacing:-.3px;white-space:nowrap}
#top .sub{font-size:12px;color:var(--tx3);margin-left:2px}
.search{margin-left:auto;position:relative}
.search input{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:8px 12px 8px 32px;width:260px;outline:none;transition:.15s}
.search input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(20,20,20,.15)}
.search:before{content:'⌕';position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--tx3);font-size:15px}
#view{flex:1;overflow:auto;padding:22px 20px 60px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);padding:8px 13px;border-radius:9px;font-weight:550;color:var(--tx);transition:.13s;white-space:nowrap}
.btn:hover{background:var(--hover);border-color:var(--line2)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.pri:hover{background:var(--acc2);border-color:var(--acc2)}
.btn.sm{padding:5px 10px;font-size:12.5px;border-radius:8px}
.btn.dgr{color:var(--red);border-color:rgba(180,35,24,.3)}
.btn.dgr:hover{background:rgba(180,35,24,.1)}
.btn.gh{background:transparent}

/* ---------- cards ---------- */
.grid{display:grid;gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card h3{font-size:15px;font-weight:600;color:var(--tx);letter-spacing:0;text-transform:none;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;position:relative;overflow:hidden}
.kpi:after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c,var(--acc));opacity:.9}
.kpi .lbl{font-size:11.5px;color:var(--tx2);font-weight:550;display:flex;align-items:center;gap:6px}
.kpi .val{font-size:24px;font-weight:700;letter-spacing:-.6px;margin-top:7px;font-variant-numeric:tabular-nums}
.kpi .meta{font-size:11.5px;color:var(--tx3);margin-top:5px}
.bar{height:5px;background:var(--line);border-radius:4px;overflow:hidden;margin-top:9px}
.bar i{display:block;height:100%;border-radius:4px;background:var(--c,var(--acc))}

/* ---------- tables ---------- */
.tblwrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
/* Kopregels in kleinkapitaal met wijde letterafstand schreeuwen harder dan de
   cijfers eronder, terwijl je juist naar de cijfers moet kijken. Gewoon klein
   en gedempt volstaat. */
th{text-align:left;font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--tx3);font-weight:600;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--panel);position:sticky;top:0;z-index:2;cursor:pointer;user-select:none}
th:hover{color:var(--tx2)}
th.na{cursor:default}
th .ar{opacity:.5;font-size:9px}
td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
tbody tr{transition:.1s}
tbody tr:hover{background:var(--hover)}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.nm{display:flex;align-items:center;gap:9px;cursor:pointer}
.av{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;flex:0 0 28px}
.nm b{font-weight:600}
.nm small{display:block;color:var(--tx3);font-size:11px;font-weight:400}
.rowact{opacity:0;transition:.12s;display:flex;gap:4px;justify-content:flex-end}
tr:hover .rowact{opacity:1}
.iconbtn{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--tx3);border:1px solid transparent}
.iconbtn:hover{background:var(--panel2);color:var(--tx);border-color:var(--line)}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;padding:2.5px 9px;border-radius:20px;font-size:11.5px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.chip .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.c-grn{color:var(--grn);background:rgba(47,122,74,.11);border-color:rgba(47,122,74,.22)}
.c-amb{color:var(--amb);background:rgba(168,104,15,.11);border-color:rgba(168,104,15,.22)}
.c-red{color:var(--red);background:rgba(180,35,24,.11);border-color:rgba(180,35,24,.22)}
.c-blu{color:var(--acc);background:rgba(20,20,20,.11);border-color:rgba(20,20,20,.22)}
.c-pur{color:var(--pur);background:rgba(122,90,58,.11);border-color:rgba(122,90,58,.22)}
.c-cyn{color:var(--cyn);background:rgba(43,111,107,.11);border-color:rgba(43,111,107,.24)}
.c-gry{color:var(--tx3);background:var(--panel2);border-color:var(--line)}
.tag{display:inline-block;padding:1.5px 7px;border-radius:6px;background:var(--panel2);border:1px solid var(--line);font-size:11px;color:var(--tx2);margin:2px 3px 2px 0}

/* ---------- filters ---------- */
.bar2{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.seg{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.seg button{padding:5px 11px;border-radius:7px;font-size:12.5px;color:var(--tx2);font-weight:550}
.seg button.on{background:var(--panel2);color:var(--tx);box-shadow:inset 0 0 0 1px var(--line)}
select.inp,input.inp,textarea.inp{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:8px 11px;outline:none;color:var(--tx);width:100%;transition:.13s}
select.inp:focus,input.inp:focus,textarea.inp:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(20,20,20,.14)}
.inp.s{width:auto;padding:7px 10px;font-size:12.5px}
textarea.inp{resize:vertical;min-height:74px;line-height:1.55}
label.f{display:block;margin-bottom:12px}
label.f>span{display:block;font-size:11.5px;color:var(--tx2);font-weight:600;margin-bottom:5px}
label.f>span em{color:var(--tx3);font-style:normal;font-weight:400}
.chk{display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--acc)}

/* ---------- formulierregel (huisstijl): label vast links, veld rechts, hint eronder ---------- */
.formrij{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.formrij:last-child{border-bottom:none}
.formrij>.lbl{flex:0 0 160px;font-size:13px;color:var(--tx2);font-weight:550}
.formrij>.veld{flex:1;min-width:0}
.formrij>.veld>.hint{margin-top:4px}
@media(max-width:560px){.formrij{flex-direction:column;align-items:stretch;gap:5px}.formrij>.lbl{flex:none}}

/* ---------- checkbox-rij (huisstijl): toggle/vinkje + label op één regel, hint inspringend ---------- */
.vinkrij{display:flex;align-items:flex-start;gap:9px;padding:8px 0}
.vinkrij>input[type=checkbox]{width:16px;height:16px;margin-top:2px;accent-color:var(--acc);flex:0 0 16px}
.vinkrij>.tekst{flex:1;min-width:0}
.vinkrij>.tekst>.lbl{font-size:13px;font-weight:550;display:block}
.vinkrij>.tekst>.hint{margin-top:2px}

/* ---------- modal / drawer ---------- */
.ovl{position:fixed;inset:0;background:rgba(5,7,12,.6);backdrop-filter:blur(3px);z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow:auto}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);width:100%;max-width:660px;animation:pop .16s ease}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.99)}}
.mhead{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}
.mhead h2{font-size:15.5px;font-weight:650}
.mbody{padding:18px 20px;max-height:calc(100vh - 220px);max-height:calc(100dvh - 220px);overflow:auto}
.mfoot{display:flex;gap:9px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--line);background:var(--panel2);border-radius:0 0 16px 16px}
.x{margin-left:auto;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--tx3);font-size:17px}
.x:hover{background:var(--hover);color:var(--tx)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px}
.sect{font-size:12px;color:var(--tx3);font-weight:700;margin:6px 0 11px;padding-top:14px;border-top:1px solid var(--line)}
.sect:first-child{padding-top:0;border-top:none;margin-top:0}

#drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:94vw;background:var(--bg2);border-left:1px solid var(--line);z-index:55;display:flex;flex-direction:column;box-shadow:-20px 0 50px rgba(0,0,0,.35);animation:slide .18s ease}
@keyframes slide{from{transform:translateX(30px);opacity:.6}}
.dhead{padding:18px 20px 0;border-bottom:1px solid var(--line)}
.dtabs{display:flex;gap:2px;margin-top:16px}
.dtabs button{padding:9px 13px;font-size:13px;color:var(--tx2);font-weight:550;border-bottom:2px solid transparent;margin-bottom:-1px}
.dtabs button.on{color:var(--tx);border-bottom-color:var(--acc)}
.dbody{flex:1;overflow:auto;padding:18px 20px 40px}
.kv{display:grid;grid-template-columns:130px 1fr;gap:9px 12px;font-size:13px}
.kv dt{color:var(--tx3);font-size:12px}
.kv dd{color:var(--tx)}
.mini{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin:14px 0 4px}
.mini div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.mini span{font-size:11px;color:var(--tx3);display:block;font-weight:600}
.mini b{font-size:17px;font-weight:650;letter-spacing:-.4px;font-variant-numeric:tabular-nums;
  display:block;margin:5px 0 3px}

.note{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:12px 13px;margin-bottom:10px;position:relative}
.note .nh{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:11.5px;color:var(--tx3)}
.note p{white-space:pre-wrap;font-size:13px;line-height:1.6}
.note .prob{margin-top:9px;padding:9px 11px;background:rgba(168,104,15,.07);border:1px solid rgba(168,104,15,.2);border-radius:9px;font-size:12.5px;color:#f0c07a;white-space:pre-wrap}
.note .prob b{display:block;font-size:12px;margin-bottom:3px;opacity:.8}
.pay{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.pay b{font-variant-numeric:tabular-nums;margin-left:auto}

.empty{text-align:center;padding:52px 20px;color:var(--tx3)}
.empty .big{font-size:34px;margin-bottom:10px;opacity:.35}
.empty h4{color:var(--tx2);font-size:15px;margin-bottom:6px;font-weight:600}
.empty p{font-size:13px;max-width:380px;margin:0 auto 16px}

.hint{font-size:12px;color:var(--tx3);line-height:1.6}
.warn{background:rgba(168,104,15,.08);border:1px solid rgba(168,104,15,.25);color:#e8bb72;padding:11px 13px;border-radius:10px;font-size:12.5px;line-height:1.55}
.alertrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.alertrow:last-child{border-bottom:none}
.alertrow .rt{margin-left:auto;font-size:12px;color:var(--tx3);white-space:nowrap}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line2);padding:10px 18px;border-radius:10px;box-shadow:var(--shadow);z-index:99;font-size:13px;font-weight:550;opacity:0;pointer-events:none;transition:.2s}
#toast.on{opacity:1;transform:translateX(-50%) translateY(-6px)}
.hr{height:1px;background:var(--line);margin:16px 0}
html[data-theme="light"] .warn{background:#fff7e6;border-color:#f0d49a;color:#8a5d0f}
html[data-theme="light"] .note .prob{background:#fff7e6;border-color:#f0d49a;color:#8a5d0f}
html[data-theme="light"] .av{color:#fff}
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:#cbd4e2}
@media print{#side,#top,.bar2,.rowact,#toast,#drawerbg{display:none!important}#view{overflow:visible;padding:0}body{overflow:visible;background:#fff}#drawer{position:static;width:auto;border:none;box-shadow:none}}
@media(max-width:900px){#side{width:64px;flex:0 0 64px}.brand b,.brand span,.nav em,.navlbl,.nav .cnt{display:none}.nav{justify-content:center}.search input{width:150px}}

/* ---------- inlogscherm ---------- */
#login{display:none;position:fixed;inset:0;z-index:80;background:var(--bg);align-items:center;justify-content:center;padding:24px}
.loginbox{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px;width:100%;max-width:380px;box-shadow:var(--shadow)}
.loginbox .brand{display:flex;align-items:center;gap:11px}
.sidebottom{margin-top:auto}
#account{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:9px 10px 9px 12px;border-radius:9px;background:var(--panel);border:1px solid var(--line);font-size:12px;color:var(--tx2)}
#account span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){#account span{display:none}}

@media(max-width:900px){#saved{display:none}#account{justify-content:center;padding:9px 6px}}

/* ---------- studentenportaal ---------- */
#portaal{min-height:100vh;min-height:100dvh;background:var(--bg);overflow-y:auto;height:100vh;height:100dvh}
.phead{border-bottom:1px solid var(--line);background:var(--bg2);position:sticky;top:0;z-index:10}
.pwrap{max-width:960px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:12px}
main.pwrap{display:block}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:15px;display:flex;flex-direction:column;justify-content:space-between;transition:.14s}
.pcard:hover{border-color:var(--line2);transform:translateY(-1px)}
@media(max-width:600px){.pwrap{padding:12px 14px}.pgrid{grid-template-columns:1fr}}

/* ---------- portaal: mijlpalenladder, to-do's ---------- */
.pgrid2{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;align-items:start}
.ladder{position:relative;display:flex;justify-content:space-between;gap:4px;padding-top:6px}
.ladderlijn{position:absolute;left:14px;right:14px;top:19px;height:4px;background:var(--line);border-radius:3px;overflow:hidden}
.ladderlijn i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--pur));border-radius:3px;transition:width .35s ease}
.ladderstap{display:flex;flex-direction:column;align-items:center;gap:7px;flex:1;position:relative;z-index:1;background:none}
.ladderstap .bol{width:28px;height:28px;border-radius:50%;background:var(--panel2);border:2px solid var(--line2);
  display:grid;place-items:center;font-size:13px;color:#0c0e13;transition:.18s}
.ladderstap .lbl{font-size:11px;color:var(--tx3);font-variant-numeric:tabular-nums;white-space:nowrap}
.ladderstap:hover .bol{border-color:var(--acc);transform:scale(1.08)}
.ladderstap.aan .bol{background:linear-gradient(135deg,var(--acc),var(--pur));border-color:transparent;color:#fff}
.ladderstap.aan .lbl{color:var(--tx);font-weight:650}
.todo{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)}
.todo:last-child{border-bottom:none}
.todo.af span{text-decoration:line-through;color:var(--tx3)}
.vink{width:20px;height:20px;flex:0 0 20px;border-radius:6px;border:2px solid var(--line2);margin-top:1px;
  display:grid;place-items:center;font-size:12px;color:#fff;transition:.15s}
.vink:hover{border-color:var(--acc)}
.vink.aan{background:var(--grn);border-color:var(--grn);color:#0c0e13;font-weight:700}
.todo .iconbtn{opacity:0}
.todo:hover .iconbtn{opacity:1}
@media(max-width:820px){.pgrid2{grid-template-columns:1fr}.ladderstap .lbl{font-size:10px}}

/* ---------- calls terugkijken in het portaal ---------- */
.callrij{border-bottom:1px solid var(--line)}
.callrij:last-child{border-bottom:none}
.callrij summary{display:flex;align-items:center;gap:10px;padding:9px 0;cursor:pointer;list-style:none}
.callrij summary::-webkit-details-marker{display:none}
.callrij .pijl{color:var(--tx3);transition:.18s;font-size:12px}
.callrij[open] .pijl{transform:rotate(90deg)}
.callrij[open] summary b{color:var(--acc)}

/* ---------- community ---------- */
.thread{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;overflow:hidden;transition:.14s}
.thread:hover{border-color:var(--line2)}
.thread.vast{border-color:rgba(168,104,15,.3)}
.threadkop{display:flex;gap:11px;padding:14px 15px;cursor:pointer;align-items:flex-start}
.threadkop:hover b{color:var(--acc)}
.threadbody{padding:0 15px 15px;border-top:1px solid var(--line);margin-top:2px}
.reactie{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.reactie:last-of-type{border-bottom:none}
.reactie .iconbtn{opacity:0}
.reactie:hover .iconbtn{opacity:1}

/* ---------- samenvattingen van Fathom ---------- */
.md{font-size:12.5px;line-height:1.65;color:var(--tx2)}
.md p{margin:0 0 8px}
.md a{color:var(--acc);text-decoration:none}
.md a:hover{text-decoration:underline}
.md .mdkop{font-weight:650;color:var(--tx);margin:14px 0 7px}
.md .mdkop1,.md .mdkop2{font-size:13.5px;letter-spacing:-.2px}
.md .mdkop3,.md .mdkop4{font-size:12.5px;color:var(--tx2)}
.md .mdkop:first-child{margin-top:0}
.md .mdlijst{list-style:none;padding:0;margin:0 0 10px}
.md .mdlijst li{position:relative;padding-left:14px;margin-bottom:5px}
.md .mdlijst li:before{content:'•';position:absolute;left:2px;color:var(--tx3)}

/* ---------- tabbladen in het studentenportaal ---------- */
.ptabs{border-bottom:1px solid var(--line);background:var(--bg2);position:sticky;top:57px;z-index:9;overflow-x:auto}
.ptabs .pwrap{display:flex;align-items:stretch}
.ptab{display:flex;align-items:center;gap:7px;padding:12px 14px;font-size:13.5px;font-weight:550;
  color:var(--tx2);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:.13s}
.ptab:hover{color:var(--tx)}
.ptab.on{color:var(--tx);border-bottom-color:var(--acc)}
.ptab .cnt{font-size:10.5px;background:var(--panel);border:1px solid var(--line);
  border-radius:20px;padding:1px 6px;color:var(--tx3)}
.ptab.on .cnt{border-color:var(--acc);color:var(--acc)}
@media(max-width:600px){.ptab{padding:11px 10px;font-size:12.5px}.ptab span:first-child{display:none}}

/* Melding dat er een nieuwe versie klaarstaat (alleen als je net iets invult). */
#nieuwbalk{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:9999;
  display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.34);font-size:13px;color:var(--tx)}

/* ---------- inlogscherm ---------- */
#login{background:#05070c;overflow:hidden}
#lgfx{position:absolute;inset:0;width:100%;height:100%;display:block}
.lgveil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgba(20,20,20,.10),transparent 62%),
             radial-gradient(ellipse at 50% 50%,transparent 28%,rgba(2,4,8,.88) 100%)}
.lgscan{position:absolute;inset:0;pointer-events:none;opacity:.45;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.026) 0 1px,transparent 1px 3px)}
.lgwrap{position:relative;z-index:2;width:100%;max-width:390px;display:flex;flex-direction:column;
  align-items:stretch;gap:20px}
.lgmark{display:flex;align-items:center;gap:11px;justify-content:center}
.lgmark .logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#141414,#7a5a3a);
  display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;letter-spacing:-.5px;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 8px 26px rgba(20,20,20,.4)}
.lgmark b{display:block;font-size:17px;color:#eef2fb}
.lgmark span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#141414;font-weight:700}
#login .loginbox{background:rgba(14,18,27,.82);backdrop-filter:blur(18px);
  border:1px solid rgba(120,150,220,.16);box-shadow:0 30px 70px rgba(0,0,0,.6);
  max-width:none;position:relative}
#login .loginbox:before{content:'';position:absolute;left:22px;right:22px;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(20,20,20,.85),transparent)}
#login .loginbox .brand{display:none}
.lgkop{font-size:17px;font-weight:700;color:#eef2fb;margin-bottom:16px;text-align:center}
.lgkop+p.hint{margin-top:-10px;margin-bottom:16px}
.lgclocks{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(20,20,20,.14);
  border:1px solid rgba(20,20,20,.15);border-radius:11px;overflow:hidden}
.lgclock{background:rgba(8,11,18,.7);padding:8px 9px;backdrop-filter:blur(6px)}
.lgclock .c{font-size:12px;color:#66708a;font-weight:700;
  display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lgclock .c i{width:4px;height:4px;border-radius:50%;background:#2b3242;flex:0 0 4px}
.lgclock.dag .c i{background:#a8680f;box-shadow:0 0 7px rgba(168,104,15,.8)}
.lgclock.nacht .c i{background:#3d4c6d}
.lgclock .t{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;font-weight:600;
  color:#cfd8ea;letter-spacing:.02em;margin-top:2px}
.lgclock .t s{text-decoration:none;color:#57607a;font-size:10px}
@media(max-width:420px){.lgclocks{grid-template-columns:repeat(3,1fr)}.lgclock .t{font-size:12.5px}}

/* ---------- rondleiding bij de eerste keer inloggen ---------- */
#tour{position:fixed;inset:0;z-index:120;display:none}
#tour.aan{display:block}
.trmask{position:fixed;background:rgba(4,6,11,.74);transition:all .28s cubic-bezier(.4,0,.2,1)}
.trring{position:fixed;border-radius:12px;box-shadow:0 0 0 2px var(--acc),0 0 0 7px rgba(20,20,20,.22);
  pointer-events:none;transition:all .28s cubic-bezier(.4,0,.2,1)}
.trcard{position:fixed;width:340px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);overflow-y:auto;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.5);
  transition:all .28s cubic-bezier(.4,0,.2,1)}
.trcard .stap{font-size:12px;color:var(--acc);
  font-weight:700;margin-bottom:7px}
.trcard h3{font-size:16.5px;font-weight:700;color:var(--tx);margin-bottom:7px;line-height:1.25}
.trcard p{font-size:13px;line-height:1.6;color:var(--tx2);margin-bottom:14px}
.trcard ul{margin:-6px 0 14px;padding-left:16px}
.trcard li{font-size:12.5px;line-height:1.55;color:var(--tx2);margin-bottom:4px}
.trvoet{display:flex;align-items:center;gap:8px}
.trbolletjes{display:flex;gap:5px;margin-right:auto}
.trbolletjes i{width:6px;height:6px;border-radius:50%;background:var(--line2);transition:.2s}
.trbolletjes i.on{background:var(--acc);width:18px;border-radius:3px}
.trover{background:none;border:0;color:var(--tx3);font-size:12px;cursor:pointer;padding:6px 2px}
.trover:hover{color:var(--tx2)}
@media(max-width:720px){
  .trcard{left:16px !important;right:16px;width:auto;bottom:16px !important;top:auto !important}
}

/* ---------- uitleg bij het koppelen van een winkel ---------- */
.uitleg3{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:14px}
.uitleg3>div{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:13px 14px}
.uitleg3 i{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--acc);
  color:#fff;font-style:normal;font-weight:800;font-size:11.5px;margin-bottom:8px}
.uitleg3 b{display:block;font-size:13px;margin-bottom:3px;color:var(--tx)}
.uitleg3 span{font-size:12px;line-height:1.5;color:var(--tx2)}
.uitlegvouw{border:1px solid var(--line);border-radius:11px;background:var(--panel2)}
.uitlegvouw summary{cursor:pointer;padding:12px 14px;font-size:13px;font-weight:600;color:var(--tx);list-style:none}
.uitlegvouw summary::-webkit-details-marker{display:none}
.uitlegvouw summary:before{content:'▸';color:var(--acc);margin-right:8px;display:inline-block;transition:.15s}
.uitlegvouw[open] summary:before{transform:rotate(90deg)}
.uitlegvouw>div{padding:0 14px 14px}
.uitlegvouw p{font-size:12.5px;color:var(--tx);font-weight:600;margin:8px 0 5px}
.uitlegvouw ul{margin:0;padding-left:17px}
.uitlegvouw li{font-size:12.5px;line-height:1.6;color:var(--tx2);margin-bottom:3px}

/* kleine tekstknop binnen een regel */
.lnk{background:none;border:0;color:var(--acc);font-size:11px;cursor:pointer;padding:0 0 0 4px;text-decoration:underline}
.lnk:hover{color:var(--acc2)}

/* ---- lezer: materiaal openen in de hub zelf ---- */
.lees{position:fixed;inset:0;z-index:80;background:rgba(5,7,12,.86);backdrop-filter:blur(4px);
  display:flex;flex-direction:column;padding:14px}
.leeskop{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.leeskop b{font-size:14.5px;color:var(--tx);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leeskop .op{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap}
.leesvak{flex:1;min-height:0;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;overflow:hidden}
.leesvak iframe{width:100%;height:100%;border:0;display:block;background:#fff}
.leesval{padding:26px;text-align:center;color:var(--tx2);font-size:13px;line-height:1.6}
@media(max-width:640px){
  .lees{padding:8px}
  .leeskop b{width:100%;margin-bottom:2px}
  .leeskop .op{margin-left:0;width:100%}
}
.leesnoot{font-size:11.5px;color:var(--tx3);text-align:center;padding-top:8px}

/* ============================================================
   MOBIEL — één plek waar alles smal wordt gemaakt
   ============================================================ */
@media(max-width:820px){
  /* Alles wat met vaste kolommen is neergezet, gaat onder elkaar. Dit is
     bewust bot: er staan tientallen roosters met eigen kolommen in het
     scherm, en op een telefoon wil je die zonder uitzondering onder elkaar. */
  .grid{grid-template-columns:1fr !important}
  .pgrid,.pgrid2{grid-template-columns:1fr !important}
  .f2,.f3{grid-template-columns:1fr !important}
  .mini{grid-template-columns:1fr 1fr !important}
}
@media(max-width:600px){
  #side{width:56px;flex:0 0 56px;padding:12px 6px}
  #view{padding:14px 12px 70px}
  .mini{grid-template-columns:1fr !important}
  .bar2{gap:7px}
  .bar2 .btn,.bar2 .inp{font-size:12.5px}
  .ovl{padding:14px 10px}
  .modal{border-radius:13px}
  .mbody{padding:14px 15px;max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px)}
  .mhead,.mfoot{padding:12px 15px}
  h1{font-size:19px !important}
  .kpi .val{font-size:20px}
  /* Tabellen schuiven horizontaal in plaats van het scherm op te rekken */
  .tblwrap{-webkit-overflow-scrolling:touch}
  .tblwrap table{min-width:560px}
  .pay{flex-wrap:wrap}
  .seg{overflow-x:auto;max-width:100%}
  .seg button{white-space:nowrap}
  /* De bovenbalk paste niet op een telefoon: titel, zoekveld en knop stonden
     samen breder dan het scherm, waardoor de knop erbuiten viel. */
  #top{padding:0 12px;gap:8px}
  #top .sub{display:none}
  #top h1{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .search{flex:0 1 130px;min-width:0}
  .search input{width:100%;min-width:0}
  #add{padding:8px 11px;font-size:12.5px;flex:0 0 auto}
  /* Meldingsbalken met een knop ernaast: op een telefoon past dat niet naast
     elkaar, dan wordt de tekst een kolom van honderd pixels. Knop eronder. */
  .warn[style*="flex"], .note[style*="flex"]{flex-wrap:wrap}
  .warn[style*="flex"] > div{flex:1 1 100% !important}
  .warn[style*="flex"] > .btn{margin-left:26px}
}
/* De submenubalk binnen Profits: altijd schuifbaar, nooit afgekapt */
.subtabs{display:flex;gap:4px;overflow-x:auto;padding-bottom:2px;margin-bottom:14px;
  border-bottom:1px solid var(--line)}
.subtabs button{white-space:nowrap;padding:9px 13px;font-size:13px;font-weight:550;color:var(--tx2);
  border-bottom:2px solid transparent;margin-bottom:-1px}
.subtabs button:hover{color:var(--tx)}
.subtabs button.on{color:var(--tx);border-bottom-color:var(--acc)}

/* Een rastervak mag standaard niet smaller worden dan zijn inhoud. Eén lang
   e-mailadres of ordernummer duwt zo de hele kolom breder dan het scherm.
   Hiermee mogen vakken wél krimpen en breekt lange tekst gewoon af. */
.grid > *, .pgrid > *, .pgrid2 > *, .mini > *{min-width:0}
@media(max-width:820px){
  .card, .pcard, .kpi, .pay{overflow-wrap:anywhere}
  .kpi .val{overflow-wrap:normal}
}


/* ---------- opstartscherm ---------- */
#opstart{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;background:#05070c;color:#66708a;
  font-size:13px;letter-spacing:.02em}
#opstart .oplogo{width:44px;height:44px;border-radius:13px;
  background:linear-gradient(135deg,#141414,#7a5a3a);display:grid;place-items:center;
  font-weight:800;font-size:14px;color:#fff;letter-spacing:-.5px;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 8px 26px rgba(20,20,20,.4);
  animation:oppuls 1.4s ease-in-out infinite}
@keyframes oppuls{0%,100%{opacity:1}50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){#opstart .oplogo{animation:none}}

/* ---------- aanwijzen in een grafiek ---------- */
.grafiek{cursor:crosshair}
.grballon{position:absolute;top:6px;pointer-events:none;z-index:5;min-width:158px;
  background:var(--panel);border:1px solid var(--line2);border-radius:9px;padding:9px 11px;
  font-size:11.5px;line-height:1.75;color:var(--tx2);box-shadow:0 10px 28px rgba(0,0,0,.45)}
.grballon b{color:var(--tx);font-variant-numeric:tabular-nums}
.grballon > b:first-child{display:block;margin-bottom:4px;font-size:12px}

/* ---------- Profits: rustige cijferstrook ----------
   Zes tegels met elk een eigen kleurbalkje lezen als een kermis: alles schreeuwt
   even hard en niets springt eruit. Hier staat alles in één kader, gescheiden
   door een haarlijn, in dezelfde kleur. Kleur gebruiken we alleen nog waar hij
   iets betekent: of een getal beter of slechter is dan de vorige periode. */
.mstrook{display:grid;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.mstrook .mtr{padding:15px 18px;border-left:1px solid var(--line);min-width:0}
.mstrook .mtr:first-child{border-left:none}
.mtr .lbl{font-size:11px;color:var(--tx3);font-weight:600;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtr .val{font-size:23px;font-weight:650;letter-spacing:-.7px;margin-top:6px;
  font-variant-numeric:tabular-nums;line-height:1.15}
.mtr .sub{font-size:11.5px;color:var(--tx3);margin-top:5px;line-height:1.35}
.mtr .delta{font-variant-numeric:tabular-nums;font-weight:600}
/* De twee getallen waar het echt om draait staan groter, bovenaan, met de rest
   eronder als toelichting in plaats van als concurrent. */
.mhero{display:grid;grid-template-columns:1fr 1fr;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:12px}
.mhero .mtr{padding:20px 22px}
.mhero .val{font-size:34px;letter-spacing:-1.2px;margin-top:8px}
.mhero .lbl{font-size:12px;color:var(--tx2)}
@media(max-width:820px){
  .mhero{grid-template-columns:1fr}
  .mhero .mtr:nth-child(2){border-left:none;border-top:1px solid var(--line)}
  .mstrook .mtr{border-left:none;border-top:1px solid var(--line)}
  .mstrook .mtr:first-child{border-top:none}
}

/* ---------- portaal: menu links, zoals je het van Stripe kent ----------
   Tabbladen bovenaan werken tot een stuk of vijf. Daarna wordt het een rij
   die je moet scrollen en waarin je de weg kwijtraakt. Links is er ruimte
   voor groepen met koppen, en zie je in één oogopslag alles wat er is. */
.play{display:flex;align-items:flex-start}
.pside{width:226px;flex:0 0 226px;background:var(--bg2);border-right:1px solid var(--line);
  position:sticky;top:57px;height:calc(100vh - 57px);overflow-y:auto;padding:14px 10px 24px}
.pside .kop{font-size:12px;color:var(--tx3);
  padding:14px 10px 6px;font-weight:700}
.pside .kop:first-child{padding-top:4px}
.pnav{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:var(--tx2);
  font-weight:500;width:100%;text-align:left;transition:.12s;font-size:13.5px}
.pnav:hover{background:var(--hover);color:var(--tx)}
.pnav.on{background:var(--panel);color:var(--tx);box-shadow:inset 0 0 0 1px var(--line)}
.pnav .ico{width:17px;flex:0 0 17px;display:inline-flex;align-items:center;justify-content:center;opacity:.8;font-size:13px}
.pnav .cnt{margin-left:auto;font-size:10.5px;background:var(--panel2);border:1px solid var(--line);
  border-radius:20px;padding:1px 7px;color:var(--tx3)}
/* 07-10 (Mees): eigen zijbalk-indeling — 'Menu aanpassen' bovenin en de pin/verschuif-knopjes per regel. .pnav-edit
   is een div (geen button, zoals .pnav normaal) zodat de kleine knopjes er gewoon ín kunnen zonder button-in-button;
   hij deelt verder dezelfde .pnav/.pnav.on/.pnav:hover-regels (kleur, afgeronde hoeken, actieve staat). */
.pnav-editbar{display:flex;gap:8px;padding:2px 10px 10px}
.pnav-editbar.hint{font-size:11px;padding:4px 10px 8px}
.pnav-edit{cursor:pointer}
.pnav-edit .cnt{flex:0 0 auto}
.pnav-editbtns{display:flex;gap:1px;margin-left:auto;flex:0 0 auto}
.iconbtn.mini{width:21px;height:21px;border-radius:6px;flex:0 0 21px}
.iconbtn.mini svg{width:13px;height:13px}
.iconbtn.mini.aan{color:var(--acc)}
.iconbtn:disabled{opacity:.25;cursor:default}
.pmain{flex:1;min-width:0;padding:26px 26px 70px;max-width:1080px}
.pmain h1{font-size:22px;letter-spacing:-.5px;margin-bottom:5px}
.pmain .onder{color:var(--tx2);margin-bottom:20px;font-size:13.5px}

/* ---------- paginakop (huisstijl): titel + ondertitel links, acties rechts ---------- */
.paginakop{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.paginakop h1{margin-bottom:5px}
.paginakop .onder{margin-bottom:0}
.paginakop .acties{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding-top:2px}
@media(max-width:640px){.paginakop{flex-direction:column;align-items:stretch}.paginakop .acties{flex-wrap:wrap}}

@media(max-width:860px){
  .play{display:block}
  .pside{position:static;width:auto;height:auto;border-right:none;border-bottom:1px solid var(--line);
    display:flex;gap:4px;overflow-x:auto;padding:8px 10px;white-space:nowrap}
  .pside .kop{display:none}
  .pnav{width:auto;padding:8px 12px}
  .pnav .cnt{margin-left:6px}
  .pmain{padding:18px 16px 60px}
}

/* De balk bovenaan loopt over de volle breedte, met het logo pal boven het
   menu. Stond hij gecentreerd, dan zweefde het logo ergens in het niets. */
.pbalk{display:flex;align-items:center;gap:12px;padding:12px 18px}
.pmain th{cursor:pointer;user-select:none}
.pmain th:hover{color:var(--tx2)}
.sorteerpijl{margin-left:5px;font-size:9px;opacity:.7}

/* ---------- zoeken in het portaal ---------- */
.pzoek{position:relative;flex:1;max-width:420px}
.pzoek input{width:100%}
.zoekuit{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);z-index:40;
  overflow:hidden;max-height:60vh;overflow-y:auto}
.zoekrij{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:10px 13px;
  border-bottom:1px solid var(--line);color:var(--tx)}
.zoekrij:last-child{border-bottom:none}
.zoekrij:hover,.zoekrij.eerste{background:var(--hover)}
.zoekrij .ico{width:18px;text-align:center;opacity:.7;flex:none}
.zoekrij b{display:block;font-size:13.5px;font-weight:600}
.zoekrij .onder{display:block;font-size:11.5px;color:var(--tx3);margin-top:1px}
@media(max-width:860px){ .pzoek{max-width:none;order:3;flex-basis:100%;margin-top:8px} }

/* De stappen van een bewakingsregel, onder elkaar met een nummer ervoor. */
.regelstap{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.regelstap:first-of-type{border-top:none;padding-top:4px}
.regelstap .nr{width:22px;height:22px;border-radius:50%;flex:none;margin-top:1px;
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:650;
  background:var(--panel2);color:var(--tx3);border:1px solid var(--line)}
.regelstap .kop{font-size:13.5px;font-weight:600}

/* Kopjes tussen de lagen van het dashboard: klein, rustig, geen emoji. */
.dsec{font-size:12px;font-weight:650;color:var(--tx3);margin:0 0 10px;display:flex;align-items:center;gap:10px}
.dsec::after{content:"";flex:1;height:1px;background:var(--line)}
.dsec span{text-transform:none;letter-spacing:0;font-weight:500}
.bestype{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:24px;padding:0 6px;border-radius:6px;background:var(--hover);color:var(--tx2);font-size:10px;font-weight:700;letter-spacing:.06em}
.ok{background:rgba(47,122,74,.08);border:1px solid rgba(47,122,74,.28);color:var(--grn);padding:11px 13px;border-radius:10px;font-size:12.5px;line-height:1.55}
html[data-theme="light"] .ok{background:#ecfbf3;border-color:#a7e6c4;color:#11764a}

/* kaartje ontwerpen */
.kaartvb{margin:0 0 12px}
.kaartdoek{aspect-ratio:216/154;border-radius:8px;overflow:hidden;background:var(--bg2);display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.kaartdoek canvas{width:100%;height:100%;display:block}
.kaartvb2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kaartvb2 img{width:100%;aspect-ratio:1264/898;object-fit:cover;border-radius:6px;background:var(--bg2);box-shadow:0 1px 3px rgba(0,0,0,.18)}
@media (max-width:640px){.kaartvb2{grid-template-columns:1fr}}

/* klantenservice: stappenplan per provider */
.ksprov{border:1px solid var(--line);border-radius:9px;padding:9px 12px;margin-bottom:7px;background:var(--panel2)}
.ksaanbevolen{border:1px solid rgba(47,122,74,.3);background:rgba(47,122,74,.05);border-radius:10px;padding:12px 14px;margin-bottom:4px}
.ksaanbevolen .cw-doe{margin:10px 0 12px}
.ksgeavanceerd[open]{background:var(--panel)}
.ksprov summary{cursor:pointer;font-weight:600;font-size:13.5px;list-style:none}
.ksprov summary::-webkit-details-marker{display:none}
.ksprov summary::after{content:'+';float:right;color:var(--tx3)}
.ksprov[open] summary::after{content:'–'}
label.f.ksanders{display:none}

/* klantenservice: wizard en inbox */
.kswiz{display:grid;grid-template-columns:250px minmax(0,1fr);gap:14px;align-items:start}
.kswizlijst{position:sticky;top:12px}
.kswizstap{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:8px 8px;border-radius:9px;font-size:13.5px;color:var(--tx2)}
.kswizstap b{width:24px;height:24px;border-radius:50%;color:#fff;display:grid;place-items:center;font-size:12px;flex:0 0 24px}
.kswizstap.on{background:var(--panel2);color:var(--tx);font-weight:600}
.kswizstap:disabled{opacity:.55;cursor:not-allowed}
.kswizstap:not(:disabled):hover{background:var(--hover)}
.ksinbox{display:grid;grid-template-columns:minmax(260px,380px) minmax(0,1fr);gap:14px;align-items:start}
.ksinlijst{padding:6px;max-height:72vh;overflow:auto}
.ksinrij{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;padding:10px;border-radius:9px;border-bottom:1px solid var(--line)}
.ksinrij:hover{background:var(--hover)} .ksinrij.on{background:var(--panel2)}
.ksinrij .d{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:0 0 8px}
.ksinrij .onder{display:block;font-size:12.5px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ksinrij .tags i{font-style:normal;font-size:10.5px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:1px 6px;margin:3px 4px 0 0;display:inline-block}
.ksbericht{margin-top:12px;padding:12px;border-radius:9px;background:var(--panel2);white-space:pre-wrap;font-size:13px;line-height:1.55;max-height:280px;overflow:auto}
.kstagknoppen{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
@media(max-width:820px){.kswiz,.ksinbox{grid-template-columns:1fr}.kswizlijst{position:static}.ksinlijst{max-height:none}}

/* setupbalk bovenaan het studentenportaal */
.setupbalk{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 16px;margin:0 0 16px;border-radius:12px;
  background:linear-gradient(90deg,rgba(20,20,20,.10),rgba(20,20,20,.04));border:1px solid rgba(20,20,20,.35)}
.setupstappen{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px;font-size:12px;color:var(--tx3)}
.setupstappen .ok{color:var(--grn)} .setupstappen .nu{color:var(--acc);font-weight:600}

/* inbox: één paneel met drie kolommen, elk met eigen scroll (zoals een tickettool) */
.pmain.breed{max-width:none}
.ib{display:grid;grid-template-columns:220px minmax(300px,380px) minmax(0,1fr);height:calc(100vh - 170px);min-height:600px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ib-rail{border-right:1px solid var(--line);padding:12px 8px;overflow:auto;background:var(--panel2)}
.ib-railkop{font-size:12px;color:var(--tx3);padding:4px 12px 6px}
.ib-view{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border-radius:8px;font-size:13px;color:var(--tx2);text-align:left}
.ib-view:hover{background:var(--hover)} .ib-view.on{background:var(--panel);color:var(--tx);font-weight:600;box-shadow:0 0 0 1px var(--line)}
.ib-view .ib-vn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib-view b{font-size:11.5px;color:var(--tx3);font-weight:600} .ib-view b.rood{color:var(--red)}
.ib-ic svg{width:15px;height:15px;display:block;opacity:.8}
.ib-dot{width:8px;height:8px;border-radius:50%;background:var(--acc);flex:0 0 8px} .ib-dot.rood{background:var(--red)} .ib-dot.amber{background:var(--amb)}
.ib-lijstkol{display:flex;flex-direction:column;border-right:1px solid var(--line);min-width:0}
.ib-lijstkop{padding:14px 14px 10px;border-bottom:1px solid var(--line)}
.ib-titel{font-weight:600;font-size:15px;margin-bottom:10px}
.ib-filter{font-size:12px;font-weight:500;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:1px 8px;margin-left:6px}
.ib-filter a{cursor:pointer;margin-left:2px}
.ib-zoek{display:grid;grid-template-columns:1fr auto;gap:6px}
.ib-bulk{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:10px;font-size:12.5px}
.ib-bulk select{width:auto}
.ib-lijst{overflow:auto;flex:1}
.ib-rij{display:flex;gap:6px;align-items:flex-start;padding:12px 12px 12px 10px;border-bottom:1px solid var(--line)}
.ib-rij:hover{background:var(--hover)} .ib-rij.on{background:var(--panel2);box-shadow:inset 3px 0 0 var(--acc)}
.ib-rij input{margin-top:11px}
.ib-rijknop{display:flex;gap:10px;flex:1;min-width:0;text-align:left;align-items:flex-start}
.ib-av{width:34px;height:34px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--tx2);flex:0 0 34px}
.ib-av.rood{background:rgba(229,72,77,.1);color:var(--red);border-color:rgba(229,72,77,.3)}
.ib-rijtekst{flex:1;min-width:0;display:block}
.ib-r1{display:flex;gap:8px;align-items:baseline} .ib-r1 b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.ib-rij.nieuw .ib-r1 b::after{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acc);margin-left:6px;vertical-align:1px}
.ib-tijd{font-size:11.5px;color:var(--tx3);white-space:nowrap}
.ib-r2{display:block;font-size:13px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.ib-r3{display:block;font-size:12.5px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.ib-r4{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.ib-tag{font-style:normal;font-size:11px;padding:2px 8px;border-radius:10px;background:rgba(20,20,20,.1);color:var(--acc);white-space:nowrap}
.ib-tag.rood{background:rgba(229,72,77,.1);color:var(--red)} .ib-tag.amber{background:rgba(232,160,40,.14);color:#a86b0c}
.ib-tag a{cursor:pointer;margin-left:3px;opacity:.7}
.ib-st{font-style:normal;font-size:11px;color:var(--tx3);padding:2px 0}
.ib-leeg{padding:28px 18px;color:var(--tx3);font-size:13px;line-height:1.55}
.ib-detail{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.ib-leegdetail{display:grid;place-items:center;padding:24px;text-align:center}
.ib-dkop{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:16px 20px;border-bottom:1px solid var(--line)}
.ib-dkop h3{font-size:16px;margin:0 0 3px;font-weight:600}
.ib-dacties{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.ib-draad{flex:1;overflow:auto;padding:20px}
.ib-bericht{display:flex;gap:12px;align-items:flex-start;max-width:720px}
.ib-bel{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line);border-radius:4px 14px 14px 14px;padding:12px 14px}
.ib-belkop{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px;font-size:13px}
.ib-beltekst{white-space:pre-wrap;font-size:13.5px;line-height:1.6}
.ib-tagsrij{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px 20px;border-top:1px solid var(--line)}
.ib-tagkies{width:auto;padding:3px 8px;font-size:12px;height:auto}
.ib-composer{border-top:1px solid var(--line);padding:12px 20px 16px;background:var(--panel)}
.ib-compkop{display:flex;gap:8px;align-items:baseline;margin-bottom:6px;font-size:13px}
.ib-composer textarea{resize:vertical;min-height:150px;font-size:13.5px;line-height:1.55}
.ib-compvoet{display:flex;gap:8px;align-items:center;margin-top:10px}
@media(max-width:1180px){.ib{grid-template-columns:190px minmax(260px,330px) minmax(0,1fr)}}
@media(max-width:980px){.ib{grid-template-columns:minmax(260px,340px) minmax(0,1fr)}.ib-rail{display:none}}
@media(max-width:720px){.ib{display:block;height:auto}.ib-lijstkol{border-right:0}.ib-lijst{max-height:none}.ib-detail{border-top:1px solid var(--line)}}

/* =====================================================================
   THEMA 1 — STANDAARD  (herzien: ontwerpgids fase 2)
   Eén neutrale, koele basis: inkt-zwart is de merkkleur en de enige
   accentkleur; groen/oranje/rood alleen voor status. Systeemletter overal,
   geen serif, geen verlopen, geen gloed. Deze laag staat onderaan zodat hij
   alles erboven overschrijft.
   ===================================================================== */
:root, html[data-theme="light"]{
  --bg:#F5F6F8; --bg2:#EEF0F3; --panel:#FFFFFF; --panel2:#F9FAFB; --hover:#F2F4F7;
  --line:#E4E7EC; --line2:#D0D5DD;
  --tx:#101828; --tx2:#475467; --tx3:#667085;
  --acc:#111418; --acc2:#2A2F36; --on-acc:#FFFFFF;
  --grn:#2f7a4a; --amb:#a8680f; --red:#b42318; --pur:#7a5a3a; --cyn:#2b6f6b; --blu:#3b6ea5; --rd:var(--red);
  --zij:#16191E; --zijtx:#F2F4F7;
  --r:12px; --shadow:0 8px 24px rgba(16,24,40,.12),0 2px 4px rgba(16,24,40,.06);
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --kopfont:var(--font);
}
html[data-theme="dark"]{
  --bg:#0E1014; --bg2:#121418; --panel:#16191E; --panel2:#1B1F25; --hover:#22262D;
  --line:#272B33; --line2:#353B45;
  --tx:#F2F4F7; --tx2:#B0B7C3; --tx3:#8A93A2;
  --acc:#F2F4F7; --acc2:#FFFFFF; --on-acc:#0E1014;
  --grn:#74c69d; --amb:#e0b064; --red:#f08a7e; --pur:#caa27c; --cyn:#7cc4bd; --blu:#8fb3de; --rd:var(--red);
  --zij:#16191E; --zijtx:var(--tx);
  --shadow:0 8px 24px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.3);
}
body{letter-spacing:-.006em}
a{color:var(--tx);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:2px}
a:hover{text-decoration-color:currentColor}
::selection{background:var(--acc);color:var(--on-acc)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--line2);border-color:var(--bg)}
input[type=checkbox],input[type=radio]{accent-color:var(--acc)}
a:focus-visible,[tabindex]:focus-visible,.pnav:focus-visible,.nav:focus-visible,.vink:focus-visible,.seg button:focus-visible,.tabbalk button:focus-visible{
  outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* logo: de omlijnde JDA-tegel, zoals het app-icoon */
.logo,.oplogo,.lgmark .logo,.brand .logo{background:transparent!important;box-shadow:none!important;border:1.6px solid currentColor;
  border-radius:8px;color:inherit;font:700 10.5px/1 var(--font)!important;letter-spacing:.06em!important;
  width:34px;height:34px;display:grid;place-items:center}

/* zijbalken: zwart met crème tekst */
#side,.pside{background:var(--zij)!important;border-right:1px solid #000;color:var(--zijtx)}
#side .brand,.pside .brand{color:var(--zijtx)}
#side .brand span,.pside .brand span{color:rgba(242,244,247,.5)}
#side .nav,.pside .pnav{color:rgba(242,244,247,.68);border-radius:7px;font-weight:450}
#side .nav:hover,.pside .pnav:hover{background:rgba(242,244,247,.07);color:#F2F4F7}
#side .nav.on,.pside .pnav.on{background:rgba(242,244,247,.12);color:#fff;box-shadow:none}
#side .navlbl,.pside .kop{color:rgba(242,244,247,.42);font-weight:600;letter-spacing:.1em}
#side .nav .cnt,.pside .pnav .cnt{background:rgba(242,244,247,.08);border-color:transparent;color:rgba(242,244,247,.7)}
#side .iconbtn,#side #saved,#side #account span,.pside .iconbtn{color:rgba(242,244,247,.6)}
#side .sidebottom{border-top-color:rgba(242,244,247,.1)}
#side .dot{box-shadow:none}
.pside .pnav .ico{opacity:.75}
/* 07-10 (Mees): bewerkmodus van de zijbalk-indeling leest hier ook mee (.pnav-edit is óók .pnav). */
.pside .pnav-editbar .btn.gh{color:rgba(242,244,247,.75);border-color:rgba(242,244,247,.2)}
.pside .pnav-editbar.hint{color:rgba(242,244,247,.42)}

/* koppen: serif voor paginatitels, verder rustige sans */
#top h1,#portaal h1,.pmain h1{font-family:var(--kopfont);font-weight:600;letter-spacing:-.01em;line-height:1.2}
#portaal h1,.pmain h1{font-size:24px}
#top{background:var(--bg);border-bottom-color:var(--line)}
.phead{background:var(--bg)}

/* knoppen zoals een echt dashboard */
.btn{border-radius:8px;padding:7px 12px;font-weight:500;background:var(--panel);border:1px solid var(--line2);
  box-shadow:0 1px 1px rgba(16,24,40,.04);transition:background .12s,border-color .12s,transform .1s}
.btn:hover{background:var(--panel2);border-color:var(--line2)}
.btn:active{transform:scale(.98)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:var(--on-acc);box-shadow:0 1px 2px rgba(16,24,40,.16)}
.btn.pri:hover{background:var(--acc2);border-color:var(--acc2)}
.btn.sm{padding:4px 10px;border-radius:7px;font-size:12.5px}
.btn.gh{background:transparent;border-color:transparent;box-shadow:none}
.btn.gh:hover{background:var(--hover);border-color:transparent}
.btn.dgr{color:var(--red);border-color:rgba(180,35,24,.3)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:disabled:active{transform:none}
.btn:focus-visible,.inp:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.inp{border-radius:7px;background:var(--panel);border:1px solid var(--line2);box-shadow:inset 0 1px 1px rgba(20,20,20,.03)}
.inp:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(20,20,20,.08);outline:none}
html[data-theme="dark"] .inp:focus{box-shadow:0 0 0 3px rgba(242,244,247,.12)}

/* kaarten en onderdelen: plat, dunne lijnen, niets zweeft */
.card,.pcard,.kpi{background:var(--panel);border-color:var(--line);box-shadow:none}
.pcard:hover{transform:none;border-color:var(--line2)}
.kpi:after{display:none}
.kpi .val{font-family:var(--kopfont);font-weight:500;letter-spacing:-.02em}
.chip{border-radius:999px;font-weight:500}
.seg{border-radius:8px;background:var(--panel2);border-color:var(--line)}
.seg button{border-radius:6px;font-weight:500}
.seg button.on{background:var(--panel);box-shadow:0 1px 2px rgba(20,20,20,.08),inset 0 0 0 1px var(--line)}
.ok{background:rgba(47,122,74,.08);border-color:rgba(47,122,74,.25);color:#24603a}
html[data-theme="dark"] .ok{color:var(--grn)}
.setupbalk{background:var(--panel);border:1px solid var(--line2);box-shadow:0 1px 2px rgba(20,20,20,.04)}
.setupstappen .nu{color:var(--tx)}
.kswizstap b{font-weight:600}
.slotje{display:inline-block;width:12px;height:12px;vertical-align:-1px;margin-right:4px;opacity:.7}

/* inbox: kleuren uit het thema */
.ib-tag{background:rgba(20,20,20,.06);color:var(--tx)}
.ib-tag.rood{background:rgba(180,35,24,.08);color:var(--red)}
.ib-tag.amber{background:rgba(168,104,15,.1);color:var(--amb)}
.ib-dot{background:var(--tx2)} .ib-rij.on{box-shadow:inset 3px 0 0 var(--acc)}
.ib-rij.nieuw .ib-r1 b::after{background:var(--acc)}
.ib-rail{background:var(--panel2)}
.kstagknoppen .btn.aan{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}

/* inloggen en opstarten: rustig crème scherm met het logo */
#login{background:var(--bg)!important}
#lgfx,.lgveil,.lgscan{display:none!important}
#login .loginbox{background:var(--panel)!important;backdrop-filter:none!important;border:1px solid var(--line)!important;
  box-shadow:0 1px 2px rgba(20,20,20,.04),0 20px 50px rgba(20,20,20,.08)!important}
#login .loginbox:before{display:none}
.lgmark{color:var(--tx)} .lgmark b{color:var(--tx);font-family:var(--kopfont);font-weight:500;font-size:19px}
.lgmark span{color:var(--tx3);letter-spacing:.14em}
.lgkop{color:var(--tx);font-family:var(--kopfont);font-weight:500;font-size:20px}
.lgclocks{background:var(--line);border-color:var(--line)}
.lgclock{background:var(--panel2);backdrop-filter:none}
.lgclock .t{color:var(--tx)} .lgclock .t s{color:var(--tx3)} .lgclock .c{color:var(--tx3)}
.lgclock.dag .c i{background:#a8680f;box-shadow:none} .lgclock .c i{background:var(--line2)}
#opstart{background:var(--bg);color:var(--tx3)}
#opstart .oplogo{color:var(--tx);width:44px;height:44px;border-radius:10px;font-size:12px!important}
#tour .trmask{background:rgba(20,20,20,.6)}
/* statuslabels in de themakleuren */
.c-grn{color:var(--grn);background:rgba(47,122,74,.09);border-color:rgba(47,122,74,.22)}
.c-amb{color:var(--amb);background:rgba(168,104,15,.09);border-color:rgba(168,104,15,.22)}
.c-red{color:var(--red);background:rgba(180,35,24,.08);border-color:rgba(180,35,24,.2)}
.c-blu{color:var(--tx);background:rgba(20,20,20,.05);border-color:rgba(20,20,20,.12)}
.c-pur{color:var(--pur);background:rgba(122,90,58,.09);border-color:rgba(122,90,58,.22)}
.c-cyn{color:var(--cyn);background:rgba(43,111,107,.09);border-color:rgba(43,111,107,.22)}
.c-gry{color:var(--tx2);background:rgba(20,20,20,.04);border-color:var(--line)}
html[data-theme="dark"] .c-blu{color:var(--tx);background:rgba(242,244,247,.08);border-color:rgba(242,244,247,.16)}
.empty .big svg{width:34px;height:34px;display:inline-block}
#side #account{background:rgba(242,244,247,.06);border-color:rgba(242,244,247,.1);color:rgba(242,244,247,.75)}
#side .sidefoot{border-top-color:rgba(242,244,247,.1);color:rgba(242,244,247,.45)}
#side .iconbtn,.pside .iconbtn{color:rgba(242,244,247,.6)} #side .iconbtn:hover,.pside .iconbtn:hover{background:rgba(242,244,247,.08);color:#fff;border-color:transparent}
#side .nav i svg,.pside .pnav svg{opacity:.85}
/* links: alleen in lopende tekst onderstrepen, niet op knoppen en menu's */
a{text-decoration:none} p a,.hint a,.onder a,li a,td a{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:2px}
a.btn,a.btn:hover,.btn a{text-decoration:none!important}

/* =====================================================================
   AFWERKING THEMA 1 — alsof er over alles is nagedacht
   ===================================================================== */
/* portaal: de zwarte kolom loopt van boven tot onder, logo erin (zoals Stripe) */
.phead{background:var(--bg);border-bottom:1px solid var(--line)}
.pbalk{padding:0 20px 0 0;height:60px;gap:14px}
.phead .brand{align-self:stretch;width:232px!important;flex:0 0 232px!important;padding:0 18px!important;margin:0;
  background:var(--zij);color:var(--zijtx);display:flex;align-items:center;gap:11px;border-right:1px solid #000}
.phead .brand b{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.phead .brand span{color:rgba(242,244,247,.5);font-size:11px}
.phead .brand .logo{width:32px;height:32px}
.pside{width:232px;flex:0 0 232px;top:60px;height:calc(100vh - 60px);padding:10px 12px 28px}
.pzoek .inp{height:34px;background:var(--panel)}

/* menu: gelijke hoogtes, uitgelijnde iconen, rustige kopjes */
.pside .kop,#side .navlbl{font-size:10.5px;letter-spacing:.09em;font-weight:600;padding:18px 10px 6px}
.pside .kop:first-child{padding-top:8px}
.pnav,#side .nav{height:34px;padding:0 10px;gap:11px;font-size:13.5px;border-radius:7px;margin:1px 0}
.pnav .ico,#side .nav i{width:18px;flex:0 0 18px;display:inline-flex;align-items:center;justify-content:center}
.pnav .ico svg,#side .nav i svg{width:16px;height:16px}
#side .nav.on,.pside .pnav.on{font-weight:550}
#side .nav.on i,.pside .pnav.on .ico{opacity:1}
#side .brand{padding:6px 8px 20px}
#side .brand b{font-size:14.5px;font-weight:600}

/* knoppen en velden: vaste hoogtes zodat alles op één lijn staat */
.btn{height:36px;padding:0 14px;font-size:13px;gap:7px;justify-content:center;line-height:1}
.btn.sm{height:30px;padding:0 10px;font-size:12.5px}
.inp{height:36px;padding:0 11px;font-size:13.5px}
.inp.s{height:32px;padding:0 10px}
textarea.inp{height:auto;padding:9px 11px;line-height:1.55}
select.inp{padding-right:28px}
label.f>span,.f>span{font-size:12.5px;font-weight:500;color:var(--tx2);margin-bottom:5px;display:block}

/* paginatabs: onderstreept, zoals een echt dashboard */
.tabbalk{display:flex;gap:22px;border-bottom:1px solid var(--line);margin:0 0 22px;flex-wrap:wrap}
.tabbalk button{padding:10px 0 11px;font-size:13.5px;font-weight:500;color:var(--tx2);border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:6px}
.tabbalk button:hover{color:var(--tx)}
.tabbalk button.on{color:var(--tx);border-bottom-color:var(--acc);font-weight:600}
.tabbalk b{font-weight:600}

/* kaarten: één maat voor binnenruimte en afstand */
.pmain{padding:30px 34px 80px;max-width:1120px}
.pmain h1{font-size:30px;margin-bottom:6px}
.pmain .onder{font-size:14px;color:var(--tx2);max-width:760px;line-height:1.6;margin-bottom:22px}
.pcard{border-radius:12px;padding:20px 22px}
.pgrid2,.pgrid{gap:16px}
.card{border-radius:12px;padding:18px 20px}
.card h3{font-size:15px;letter-spacing:0;margin-bottom:14px}
.alertrow{padding:11px 0}
.hint{color:var(--tx3)}
.chip{padding:3px 8px}
.setupbalk{border-radius:12px;padding:14px 18px;margin-bottom:22px}
.kswizlijst{padding:10px!important}
.kswizstap{height:40px;padding:0 10px}
.kswizstap b{width:22px;height:22px;flex:0 0 22px;font-size:11px}
.regelstap{padding:12px 0}
@media(max-width:860px){
  .phead .brand{width:auto!important;flex:0 0 auto!important;padding:0 14px!important}
  .phead .brand span{display:none}
  .pside{width:auto;flex:none;top:auto;height:auto;padding:8px 10px}
  .pnav{height:34px}
  .pmain{padding:20px 16px 60px}
}
.phead .brand{box-shadow:0 1px 0 var(--zij);position:relative;z-index:1}
.kswizstap b{background:transparent;border:1px solid var(--line2);color:var(--tx3)}
.kswizstap b.nu{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.kswizstap b.klaar{background:var(--grn);border-color:var(--grn);color:#fff}
.kswizstap b .slotje{margin:0;width:11px;height:11px}
.kswizstap.on{background:var(--panel2)}
.ib-tagsrij select.inp{width:auto!important;height:28px;padding:0 26px 0 9px;font-size:12px}
input[type=file]{font-size:12.5px;color:var(--tx2)}
input[type=file]::file-selector-button{height:30px;padding:0 12px;margin-right:10px;border-radius:6px;border:1px solid var(--line2);
  background:var(--panel);color:var(--tx);font:500 12.5px var(--font);cursor:pointer;box-shadow:0 1px 1px rgba(20,20,20,.04)}
input[type=file]::file-selector-button:hover{background:var(--panel2)}
input[type=checkbox],input[type=radio]{accent-color:#141414}
.phead{border-bottom:none!important}
.pbalk{position:relative}
.pbalk::after{content:'';position:absolute;left:232px;right:0;bottom:0;height:1px;background:var(--line)}
@media(max-width:860px){.pbalk::after{left:0}}
/* regelbouwer bewaking */
.rgpresets{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 16px}
.rgcamp{position:relative;flex:1 1 320px;min-width:260px;max-width:520px}
.rgchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:4px;border:1px solid var(--line2);border-radius:7px;background:var(--panel);min-height:36px}
.rgchips .inp{border:0;box-shadow:none;height:26px;flex:1;min-width:160px;padding:0 6px;background:transparent}
.rgchips .inp:focus{box-shadow:none}
.rgchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:3px 4px 3px 8px;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.rgchip a{cursor:pointer;color:var(--tx3);font-size:16px;line-height:1;padding:2px 6px;flex:none} .rgchip a:hover{color:var(--tx)}
.rgresult{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;background:var(--panel);border:1px solid var(--line2);border-radius:9px;box-shadow:var(--shadow);overflow:hidden}
.rgresult:empty{display:none}
.rgresult button{display:flex;justify-content:space-between;gap:12px;width:100%;padding:8px 12px;text-align:left;font-size:13px;border-bottom:1px solid var(--line)}
.rgresult button:last-child{border-bottom:0} .rgresult button:hover{background:var(--hover)}
.rgresult button span{color:var(--tx3);font-size:11.5px;font-variant-numeric:tabular-nums}
.rgaccs{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;width:100%;margin-top:4px;font-size:13px}
.rgaccs label{display:inline-flex;gap:6px;align-items:center}
.rgstap{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px;margin-bottom:6px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}

/* Proefberekening van een bewakingsregel */
.rgtest{margin-top:14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden}
.rgtest-kop{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line)}
.rgtest-kop .hint{flex:1;min-width:200px}
.rgtest-rij{display:grid;grid-template-columns:minmax(180px,1.1fr) 2fr auto;gap:6px 14px;padding:11px 14px;border-top:1px solid var(--line);align-items:start}
.rgtest-rij:first-of-type{border-top:0}
.rgtest-rij.af{background:color-mix(in srgb, var(--red, #b3261e) 6%, transparent)}
.rgtest-naam{display:flex;flex-direction:column;gap:2px;min-width:0}
.rgtest-naam b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rgtest-stappen{display:flex;flex-wrap:wrap;gap:6px}
.rgtest-stap{font-size:12px;padding:3px 8px;border-radius:6px;border:1px solid var(--line);white-space:nowrap}
.rgtest-stap.ok{border-color:color-mix(in srgb, var(--grn, #2e7d32) 45%, var(--line))}
.rgtest-stap.rood{border-color:var(--red, #b3261e);color:var(--red, #b3261e)}
.rgtest-stap.nog{opacity:.5}
.rgtest-bron{grid-column:1 / 3;font-size:12px}
.rgtest-zou{grid-row:1;grid-column:3;text-align:right;font-size:13px}
@media (max-width:700px){.rgtest-rij{grid-template-columns:1fr auto}.rgtest-stappen,.rgtest-bron{grid-column:1 / -1}}
.rgtest-stap.voorbij{opacity:.62;text-decoration:line-through;text-decoration-color:color-mix(in srgb, currentColor 40%, transparent)}
.rgtest-stap.onbekend{border-style:dashed;color:var(--tx3, #8a8378)}

/* Meekijken met een student */
.meekijkbalk{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px;padding:5px 6px 5px 12px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.meekijkbalk .dot{width:8px;height:8px;border-radius:50%;background:#c8872a;box-shadow:0 0 0 3px color-mix(in srgb,#c8872a 22%,transparent)}
@media (max-width:700px){.meekijkbalk span:not(.dot){display:none}}
.topnr{width:18px;text-align:right;font-size:12px;color:var(--tx3);font-variant-numeric:tabular-nums;flex:0 0 18px}

/* Creative-analyse */
.crea-uitleg{padding:16px 18px;margin-bottom:14px}
.crea-uitleg ol{margin:8px 0 8px 18px;padding:0;line-height:1.65;font-size:13.5px;color:var(--tx2)}
.crea-prompt{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;background:var(--panel2,#F2F4F7);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--tx)}
.crea-med{grid-template-columns:repeat(6,1fr);margin-bottom:14px}
@media (max-width:760px){.crea-med{grid-template-columns:repeat(3,1fr)}}
.crea-tbl td{white-space:nowrap}
.crea-oordeel{display:inline-block;font-size:11px;padding:1px 6px;border-radius:5px;margin-left:4px;border:1px solid var(--line);color:var(--tx3)}
.crea-oordeel.grn{color:var(--grn);border-color:color-mix(in srgb,var(--grn) 45%,var(--line))}
.crea-oordeel.rd{color:var(--rd,#b3261e);border-color:color-mix(in srgb,var(--rd,#b3261e) 45%,var(--line))}
.crea-oordeel.amb{color:var(--amb);border-color:color-mix(in srgb,var(--amb) 45%,var(--line))}
.crea-rij{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:12px 0;border-top:1px solid var(--line);align-items:start}
.crea-rij:first-of-type{border-top:0}
.crea-rij img,.crea-leeg{width:64px;height:64px;border-radius:8px;object-fit:cover;background:var(--panel2,#F2F4F7);border:1px solid var(--line)}
.crea-info{min-width:0}
.crea-info b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crea-tekst{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:2px 0 6px;font-size:12.5px}
.crea-labels{display:flex;flex-wrap:wrap;gap:5px;align-items:center;font-size:11.5px}
.crea-labels span:not(.hint){padding:1px 7px;border-radius:5px;background:var(--panel2,#F2F4F7);border:1px solid var(--line)}
.crea-labels span.nog{color:var(--tx3);border-style:dashed;background:none}
.crea-labels em{color:var(--tx2)}
.crea-kpi{display:grid;grid-template-columns:repeat(7,minmax(54px,auto));gap:2px 12px;text-align:right}
.crea-kpi span{display:block;font-size:12px;color:var(--tx3);}
.crea-kpi b{font-size:13px;font-variant-numeric:tabular-nums;font-weight:600}
.crea-kpi b.op{color:var(--grn)} .crea-kpi b.af{color:var(--tx3)}
@media (max-width:900px){.crea-rij{grid-template-columns:48px 1fr}.crea-rij img,.crea-leeg{width:48px;height:48px}.crea-kpi{grid-column:1 / -1;grid-template-columns:repeat(4,1fr);text-align:left}}
.crea-tbl .crea-oordeel{display:table;margin:3px 0 0}
.crea-tbl td.num .crea-oordeel{margin-left:auto}

/* Winst en verlies in de studentenkaart */
.ladepl{border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden}
.ladepl-r{display:flex;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--line);font-size:13.5px;align-items:baseline}
.ladepl-r:first-child{border-top:0}
.ladepl-r span{display:flex;flex-direction:column;gap:1px}
.ladepl-r em{font-style:normal;font-size:11.5px;color:var(--tx3)}
.ladepl-r b{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.ladepl-r.plus{background:color-mix(in srgb,var(--grn) 7%,transparent)} .ladepl-r.plus b{color:var(--grn);font-size:15px}
.ladepl-r.min{background:color-mix(in srgb,var(--rd,#b3261e) 7%,transparent)} .ladepl-r.min b{color:var(--rd,#b3261e);font-size:15px}
.ladepl-dagen{display:flex;gap:2px;align-items:flex-end;height:90px;margin:8px 0 4px}
.ladepl-dagen div{flex:1;height:100%;display:flex;align-items:flex-end}
.ladepl-dagen i{display:block;width:100%;border-radius:3px 3px 0 0}

/* Stappenkaart (wizard) */
.stappen{padding:18px 20px;margin-bottom:14px}
.stappen-kop b{font-size:15px}
.stappen-kop p{margin:4px 0 12px;color:var(--tx2);font-size:13.5px}
.stappen ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.stappen li{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:start;padding:11px 0;border-top:1px solid var(--line)}
.stappen li:first-child{border-top:0}
.stappen-nr{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:600;border:1px solid var(--line);color:var(--tx2);background:var(--panel)}
.stappen li.klaar .stappen-nr{background:var(--grn);border-color:var(--grn);color:#fff}
.stappen li.nu .stappen-nr{background:var(--acc);border-color:var(--acc);color:var(--on-acc,#fff)}
.stappen li.klaar .stappen-tekst b{color:var(--tx2)}
.stappen-tekst b{font-size:14px;display:block;line-height:26px}
.stappen-tekst p{margin:0;font-size:13px;color:var(--tx2);line-height:1.55}
.stappen li .btn{margin-top:2px;white-space:nowrap}
@media (max-width:640px){.stappen li{grid-template-columns:30px 1fr}.stappen li .btn{grid-column:2;justify-self:start}}
/* Creatives: opdrachten en skillset */
.cr-opdr{padding:14px 16px;margin-bottom:12px}
.cr-kop{display:flex;gap:12px;align-items:flex-start}
.cr-kop img,.cr-kop .crea-leeg{width:56px;height:56px;border-radius:8px;object-fit:cover;flex:0 0 56px;border:1px solid var(--line)}
.cr-galerij{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:12px 0 6px}
.cr-galerij img,.cr-galerij video{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:var(--panel2,#F2F4F7)}
.cr-galerij video{aspect-ratio:9/16}
.cr-teksten{display:grid;gap:8px;margin:8px 0}
.cr-teksten>div{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px}
.cr-teksten b{display:block}.cr-teksten em{display:block;font-style:normal;color:var(--tx2)}.cr-teksten p{margin:4px 0 0;white-space:pre-line}
.cr-zoekres{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin:0 0 14px}
.cr-zoekres button{display:flex;gap:8px;align-items:center;text-align:left;padding:6px;border:1px solid var(--line);border-radius:8px;background:var(--panel);cursor:pointer;font:inherit;color:inherit}
.cr-zoekres button:hover{border-color:var(--tx3)}
.cr-zoekres img{width:40px;height:40px;object-fit:cover;border-radius:6px}
.cr-zoekres em{display:block;font-style:normal;font-size:11.5px;color:var(--tx3)}
.cr-gekozen{display:flex;gap:10px;align-items:center;margin:0 0 14px;padding:8px;border:1px solid var(--line);border-radius:8px;max-width:520px}
.cr-gekozen img{width:44px;height:44px;object-fit:cover;border-radius:6px}
.cr-gekozen b{flex:1}
.cr-winn{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;margin:4px 0 14px}
.cr-winn button{display:flex;gap:10px;align-items:center;text-align:left;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);cursor:pointer;font:inherit;color:inherit}
.cr-winn button.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.cr-winn img{width:48px;height:48px;object-fit:cover;border-radius:6px}
.cr-winn b{display:block;font-size:13px}.cr-winn em{display:block;font-style:normal;font-size:11.5px;color:var(--tx3)}
.sk-blok{padding:16px 18px;margin-bottom:12px}
.sk-kop{display:flex;justify-content:space-between;align-items:baseline}
.sk-kop b{font-size:14.5px}
.sk-items{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.sk-item{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.sk-prompt{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--tx2);white-space:pre-wrap;margin-top:4px;max-height:120px;overflow:auto;background:var(--panel2,#F2F4F7);border-radius:6px;padding:6px 8px}
.sk-thumb{width:42px;height:42px;object-fit:cover;border-radius:6px;vertical-align:middle;margin-right:8px}
.sk-nieuw{margin-top:10px}
.sk-nieuw summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--tx2);list-style:none}
.sk-nieuw summary::-webkit-details-marker{display:none}
.sk-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 12px;margin-top:8px;align-items:end}
.sk-form .f:has(textarea){grid-column:1 / -1}
.sk-form .btn{justify-self:start;margin-bottom:12px}
.crea-oordeel.blu{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 35%,var(--line))}
.rgtest-stap.gered{border-color:color-mix(in srgb,var(--grn) 55%,var(--line));border-style:dashed;color:var(--grn)}

/* Zo werkt deze pagina */
.pagina-uitleg{padding:0;margin-bottom:14px;overflow:hidden}
.pagina-uitleg summary{display:flex;gap:10px;align-items:baseline;padding:12px 16px;cursor:pointer;list-style:none}
.pagina-uitleg summary::-webkit-details-marker{display:none}
.pagina-uitleg summary span{font-weight:600;font-size:13.5px}
.pagina-uitleg summary span::before{content:'▸';display:inline-block;width:14px;color:var(--tx3)}
.pagina-uitleg[open] summary span::before{content:'▾'}
.pagina-uitleg summary em{font-style:normal;color:var(--tx3);font-size:12.5px}
.pagina-uitleg.eerste{border-color:var(--acc)}
.pagina-uitleg.eerste summary span{color:var(--acc)}
.pagina-uitleg .uitleg-voet{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:0 16px 14px}
/* Subtabs (afronding 01-10): lange pagina's in delen, één klik per deel, geen scrollen door alles. */
.subtabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.subtabs button{border:1px solid var(--line);background:var(--panel);color:var(--tx2);border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;cursor:pointer}
.subtabs button.on{background:var(--acc);border-color:var(--acc);color:var(--on-acc,#fff)}
.subtabs button .n{opacity:.75;margin-left:4px}
.pagina-uitleg ol{list-style:none;margin:0;padding:0 16px 12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.pagina-uitleg li{display:grid;grid-template-columns:30px 1fr;gap:8px}
.pagina-uitleg li b{font-size:13px;display:block;line-height:26px}
.pagina-uitleg li p{margin:0;font-size:12.5px;color:var(--tx2);line-height:1.5}

/* Werkplaats */
.werk-kop{display:flex;gap:16px;align-items:flex-end;margin-bottom:14px;flex-wrap:wrap}
.werk-kop>div:first-child{flex:1;min-width:260px}
.werk-teller{border:1px solid var(--line);border-radius:10px;padding:8px 14px;background:var(--panel);text-align:right}
.werk-teller b{display:block;font-size:20px;font-variant-numeric:tabular-nums}
.werk-teller span{font-size:11.5px;color:var(--tx3)}
.robots{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin-bottom:14px}
.robot{display:flex;gap:10px;align-items:center;border:1px dashed var(--line);border-radius:10px;padding:8px 12px;background:var(--panel);opacity:.7}
.robot.aan{opacity:1;border-style:solid}
.robot-kop{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--panel2,#F2F4F7);font-size:15px}
.robot.aan .robot-kop{animation:robotdraai 4s linear infinite}
.robot b{display:block;font-size:13px}.robot em{font-style:normal;font-size:11.5px;color:var(--tx3)}
@keyframes robotdraai{to{transform:rotate(360deg)}}
.wereld{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;padding:14px;border-radius:14px;margin-bottom:16px;
  background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--panel2,#efe7d8) 70%,transparent) 0 14px,transparent 14px 28px),var(--bg)}
.station{border:1px solid var(--line);border-radius:12px;background:var(--panel);display:flex;flex-direction:column;min-height:170px;box-shadow:0 2px 0 rgba(0,0,0,.04)}
.station-bord{display:flex;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}
.station-bord .ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--panel2,#F2F4F7)}
.station-bord .ico svg{width:17px;height:17px}
.station-bord b{display:block;font-size:13.5px}.station-bord em{font-style:normal;font-size:11.5px;color:var(--tx3)}
.station-vloer{flex:1;display:flex;flex-wrap:wrap;gap:6px 4px;align-items:flex-end;padding:12px 10px 10px}
.st-rust{grid-column:1 / -1;min-height:120px}
.pop{position:relative;background:none;border:0;padding:0 2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;font:inherit;color:inherit;opacity:.55;transition:opacity .2s}
.pop em{font-style:normal;font-size:11px;color:var(--tx2);margin-top:-2px}
.pop.actief{opacity:1}
.pop.actief svg{animation:popwerk .9s ease-in-out infinite}
.pop.sel em{font-weight:700;color:var(--tx)}
.pop:hover{opacity:1}
.pop-bel{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10.5px;background:var(--tx);color:var(--bg);padding:2px 7px;border-radius:8px;margin-bottom:2px;max-width:150px;overflow:hidden;text-overflow:ellipsis}
@keyframes popwerk{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.werk-paneel h3{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.werk-actie{font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--line)}
.werk-actie span{display:inline-block;min-width:52px;color:var(--tx3);font-variant-numeric:tabular-nums}
.werk-actie.fout{color:var(--rd,#b3261e)}
.werk-sjablonen{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px}
.les-rij{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line)}
@media (prefers-reduced-motion: reduce){.pop.actief svg,.robot.aan .robot-kop{animation:none}}

/* Setupbalk: alle stappen dezelfde vorm, klaar = vinkje, nu = gemarkeerd */
.setupstappen2{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px}
.setupstappen2 span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--tx3);line-height:22px}
.setupstappen2 i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;border:1px solid var(--line);background:var(--panel);color:var(--tx2)}
.setupstappen2 span.ok{color:var(--tx2)}
.setupstappen2 span.ok i{background:var(--grn);border-color:var(--grn);color:#fff}
.setupstappen2 span.nu{color:var(--tx);font-weight:600}
.setupstappen2 span.nu i{background:var(--acc);border-color:var(--acc);color:var(--on-acc,#fff)}
.setupbalk .setupstappen2 span,.setupbalk .setupstappen2 span.ok,.setupbalk .setupstappen2 span.nu{background:none;border:0;padding:0;box-shadow:none;border-radius:0}
@media (max-width:640px){
  .setupbalk{flex-direction:column;align-items:stretch}
  .setupbalk>div{min-width:0}
  .setupbalk .btn{width:100%;justify-content:center}
  .setupstappen2{flex-direction:column;gap:4px}
  .tabbalk{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabbalk::-webkit-scrollbar{display:none}
  .tabbalk button{flex:0 0 auto;white-space:nowrap}
}
/* Topbalk portaal op de telefoon: zoekveld op een eigen regel eronder, naam
   weg (het rondje met initialen blijft), knoppen compacter. Eerst knipte de
   balk af: de naam brak over twee regels en het zoekveld viel buiten beeld. */
@media(max-width:640px){
  .pbalk{flex-wrap:wrap;height:auto;padding:0 10px 10px 0;row-gap:0;gap:8px}
  .pbalk .brand{height:56px}
  .pbalk .pzoek{order:3;flex:1 1 100%;max-width:none;margin:0 0 0 10px}
  .pbalk .pzoek input{width:100%!important;max-width:none!important}
  .pbalk > div[style*="margin-left:auto"] .hint{display:none}
  .pbalk > div[style*="margin-left:auto"]{gap:6px!important}
  .pbalk > div[style*="margin-left:auto"] .btn{height:30px;padding:0 10px;font-size:12.5px}
}
/* Werkplaats: het lab van de dagelijkse analist */
.werk-lab{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:14px;
  background:linear-gradient(90deg,var(--panel2,#F2F4F7),var(--panel))}
.werk-lab .lab-pop{position:relative;display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
.werk-lab .lab-pop em{font-style:normal;font-size:11px;font-weight:600;color:var(--tx2)}
.werk-lab .lab-pop .pop-bel{position:absolute;bottom:100%;left:0;transform:none;white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis}
.werk-lab.bezig{padding-top:26px}
.werk-lab.bezig .lab-pop svg{animation:popwerk 1.2s ease-in-out infinite}
.werk-lab .lab-tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.werk-lab .lab-tekst b{font-size:14px}
.werk-lab .lab-tekst span{font-size:13px;color:var(--tx2)}
.werk-lab .lab-tekst em{font-style:normal;font-size:11.5px;color:var(--tx3)}
@media(max-width:640px){.werk-lab{flex-wrap:wrap}.werk-lab .btn{width:100%;justify-content:center}}
@media (prefers-reduced-motion: reduce){.werk-lab.bezig .lab-pop svg{animation:none}}
/* ============ Agent OS ============ */
.aos{display:flex;flex-direction:column;gap:12px}
.aos-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.aos-titel{font-size:18px;display:block;letter-spacing:-.01em}
.aos-kop{font-size:12px;color:var(--tx3);display:flex;align-items:center;gap:6px}
.aos-status{width:8px;height:8px;border-radius:50%;display:inline-block;background:#22a35a;box-shadow:0 0 0 3px rgba(34,163,90,.18)}
.aos-status.rood{background:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.18)}
.aos-zoek{flex:1;min-width:220px;max-width:460px;margin-left:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;height:36px;padding:0 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--tx3);font:inherit;font-size:13px;cursor:pointer}
.aos-zoek kbd{font:600 11px var(--font);border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--tx2)}
.aos-grid{display:grid;grid-template-columns:190px minmax(0,1fr) 260px;gap:12px;align-items:start}
.aos-ex,.aos-rechts>div,.aos-midden,.aos-logpaneel{background:var(--panel);border:1px solid var(--line);border-radius:14px}
.aos-ex{padding:10px 8px;max-height:640px;overflow:auto}
.aos-exgroep{margin-bottom:10px}.aos-exgroep>span{display:block;font-size:12px;font-weight:700;color:var(--tx3);padding:4px 6px}
.aos-rij{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:7px;font-size:12.5px;cursor:pointer;white-space:nowrap;overflow:hidden}
.aos-rij:hover,.aos-rij.sel{background:var(--panel2,#F2F4F7)}
.aos-rij i,.aos-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;display:inline-block}
.aos-rij em{margin-left:auto;font-style:normal;font-size:11px;color:var(--tx3)}.aos-rij em.aos-st-actief{color:#22a35a}.aos-rij em.aos-st-wacht{color:#f0a020}.aos-rij em.aos-st-fout{color:#e5484d}
.aos-midden{overflow:hidden}
.aos-led{animation:aosled 1.6s ease-in-out infinite}@keyframes aosled{50%{opacity:.25}}
.aos-rechts{display:flex;flex-direction:column;gap:12px}
.aos-det{padding:14px;font-size:13px}.aos-detkop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.aos-dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:10px 0 0;font-size:12.5px}.aos-dl dt{color:var(--tx3)}.aos-dl dd{margin:0;word-break:break-word}
.aos-minilog{margin-top:10px;border-top:1px solid var(--line);padding-top:8px;font-size:11.5px;max-height:160px;overflow:auto}
.aos-minilog div{padding:2px 0;color:var(--tx2)}.aos-minilog span{color:var(--tx3);margin-right:6px;font-variant-numeric:tabular-nums}
.aos-logpaneel{overflow:hidden}
.aos-logtabs{display:flex;align-items:center;gap:4px;padding:6px 10px;border-bottom:1px solid var(--line)}
.aos-logtabs button{border:0;background:none;font:600 11.5px var(--font);color:var(--tx3);padding:6px 8px;cursor:pointer;border-bottom:2px solid transparent}
.aos-logtabs button.on{color:#3b82f6;border-bottom-color:#3b82f6}.aos-logtabs .hint{margin-left:auto;font-size:11.5px}
.aos-log{max-height:220px;overflow:auto;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;padding:6px 0}
.aos-logrij{display:grid;grid-template-columns:68px 140px 52px 1fr;gap:8px;padding:3px 12px;align-items:baseline}
.aos-logrij:hover{background:var(--panel2,#f6f3ee)}
.aos-logrij .t{color:var(--tx3)}.aos-logrij .a{display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.aos-logrij .a i{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.aos-logrij .n{font-weight:700;font-size:10.5px}.n-info{color:#3b82f6}.n-waars{color:#d99210}.n-fout{color:#e5484d}
.aos-logrij .b{color:var(--tx);word-break:break-word}
.aos-kanban{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:12px;align-items:start;max-height:680px;overflow:auto}
.aos-kol{background:var(--panel2,#f6f3ee);border-radius:12px;padding:8px}
.aos-kolkop{display:flex;align-items:center;gap:8px;padding:4px 4px 8px}.aos-kolkop span{font-size:11.5px;color:var(--tx3)}.aos-kolkop .btn{margin-left:auto}
.kol-bezig .aos-kolkop b{color:#3b82f6}.kol-review .aos-kolkop b{color:#d97706}.kol-klaar .aos-kolkop b{color:#22a35a}
.aos-kaart{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;cursor:pointer;font-size:12.5px}
.aos-kaart.sel{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.18)}
.aos-kaart b{display:block;line-height:1.35}.aos-kaart p{margin:4px 0 0;color:var(--tx3);font-size:11.5px;line-height:1.4}
.aos-kaartlab{display:flex;align-items:center;gap:6px;margin-bottom:6px}.aos-kaartlab em{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--tx3)}
.aos-kaartvoet{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11.5px;color:var(--tx2)}.aos-kaartvoet i{width:14px;height:14px;border-radius:50%}
.aos-balk{height:4px;border-radius:2px;background:rgba(59,130,246,.15);margin-top:8px;overflow:hidden}
.aos-balk span{display:block;height:100%;width:40%;background:#3b82f6;border-radius:2px;animation:aosbalk 1.8s ease-in-out infinite}
@keyframes aosbalk{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.aos-net{position:relative;background:radial-gradient(circle at 50% 45%,#1d2233,#0f121b);min-height:420px}
.aos-net canvas{display:block}
.aos-netleg{position:absolute;left:12px;bottom:10px;display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:#c9d1e0}
.aos-netleg i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px}
.aos-cmd{position:fixed;inset:0;background:rgba(15,18,27,.28);z-index:9999;display:flex;justify-content:center;align-items:flex-start;padding-top:12vh}
.aos-cmdvak{width:min(560px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.2);overflow:hidden}
.aos-cmdvak input{width:100%;border:0;border-bottom:1px solid var(--line);padding:14px 16px;font:15px var(--font);outline:none;background:transparent;color:var(--tx)}
#aoscmdlijst{max-height:50vh;overflow:auto;padding:6px}
.aos-cmdrij{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:13.5px}
.aos-cmdrij em{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--tx3)}.aos-cmdrij.on,.aos-cmdrij:hover{background:var(--panel2,#F2F4F7)}
@media(max-width:1180px){.aos-grid{grid-template-columns:minmax(0,1fr) 250px}.aos-ex{display:none}}
@media(max-width:820px){.aos-grid{grid-template-columns:minmax(0,1fr)}.aos-kanban{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aos-logrij{grid-template-columns:52px 1fr;}.aos-logrij .a,.aos-logrij .n{display:none}.aos-zoek{max-width:none;margin-left:0}}
/* ============ Agent OS v2 ============ */
.aos-tegels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;width:100%}
.aos-tegel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.aos-tegel[data-act]{cursor:pointer}.aos-tegel[data-act]:hover{border-color:var(--line2)}
.aos-tegel b{font-size:22px;letter-spacing:-.02em;line-height:1.1}.aos-tegel span{font-size:12px;color:var(--tx3)}
.aos-tegel.groen b{color:#22a35a}.aos-tegel.oranje{border-color:#f0a020;background:rgba(240,160,32,.07)}.aos-tegel.oranje b{color:#d97706}.aos-tegel.rood b{color:#e5484d}
.aos-balk2{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.aos-balk2 .aos-zoek{margin-left:auto}
.aos-grid{grid-template-columns:minmax(0,1fr) 300px!important}
.aos-rechts{display:flex;flex-direction:column;gap:12px}
.aos-rechts>div:empty{display:none}
.aos-wie{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px;max-height:620px;overflow:auto}
.aos-wiekop{display:flex;align-items:baseline;justify-content:space-between;padding:2px 6px 8px}
.aos-wierij{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:9px;cursor:pointer}
.aos-wierij:hover,.aos-wierij.sel{background:var(--panel2,#F2F4F7)}
.aos-wierij>i{width:10px;height:10px;border-radius:50%;flex:0 0 10px;margin-top:4px}
.aos-wierij>div{flex:1;min-width:0;display:flex;flex-direction:column}
.aos-wierij b{font-size:13px}.aos-wierij span{font-size:11px;color:var(--tx3)}.aos-wierij em{font-style:normal;font-size:12px;color:var(--tx2);margin-top:2px;line-height:1.35}
.aos-wierij small{font-size:12px;font-weight:700;}
.aos-wierij.st-actief small{color:#22a35a}.aos-wierij.st-wacht small{color:#d97706}.aos-wierij.st-fout small{color:#e5484d}
.aos-wierij.st-rust{opacity:.72}
.aos-wierobots{display:flex;flex-wrap:wrap;gap:6px;padding:8px 6px 2px;border-top:1px solid var(--line);margin-top:6px}
.aos-wierobots span{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--panel2,#F2F4F7);color:var(--tx3)}
.aos-wierobots span.aan{background:rgba(34,163,90,.12);color:#1f8a4c}
.aos-det{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;font-size:13px}
.aos-knipper{animation:aosled 1s ease-in-out infinite}
.aos-kanfilter{display:flex;gap:6px;align-items:center;padding:12px 12px 0;flex-wrap:wrap}
/* 14-10 (harnas) mission control boven de kanban */
.aos-mission{margin:12px 12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow-x:auto}
.aos-missionkop{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.aos-mission .aosx-tab{min-width:560px}
.aos-missionaandacht{margin-top:10px;display:grid;gap:4px;font-size:12.5px}
.aos-kanfilter>button:not(.btn){border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:5px 12px;font:500 12.5px var(--font);cursor:pointer;color:var(--tx2)}
.aos-kanfilter>button.on{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.aos-kolstip{width:8px;height:8px;border-radius:50%;display:inline-block}.aos-kolstip.c-amb{background:#f0a020}.aos-kolstip.c-gr{background:#9aa3b1}.aos-kolstip.c-blu{background:#3b82f6}.aos-kolstip.c-grn{background:#22a35a}
.aos-kolkop{gap:6px!important}
.aos-kaart b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.aos-kaartlab{font-size:12px;color:var(--tx3);font-weight:600}
.aos-kaartvoet em{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--tx3)}
.goed-wrap{padding:14px;max-height:760px;overflow:auto}
.goed-blok{margin-bottom:18px}.goed-kop{display:flex;align-items:center;gap:8px;margin-bottom:8px}.goed-kop em{font-style:normal;font-size:12px;color:var(--tx3);margin-left:4px}
.goed-rij{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--panel)}
.goed-rij .bar2{flex:0 0 auto}
.aos-grid>*{min-width:0}
@media(max-width:1100px){.aos-grid{grid-template-columns:minmax(0,1fr)!important}.aos-tegels{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.aos-tegels{grid-template-columns:repeat(2,minmax(0,1fr))}.goed-rij{flex-direction:column}}
/* ============ Analist-dashboard ============ */
.an-dash{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.an-tegels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.an-tegel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column}
.an-tegel b{font-size:22px;letter-spacing:-.02em}.an-tegel b span{font-size:inherit}.an-tegel>span{font-size:12px;color:var(--tx2)}.an-tegel em{font-style:normal;font-size:11.5px;color:var(--tx3)}
.an-kaart{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.an-kaart>b{display:block;font-size:13.5px;margin-bottom:10px}
.an-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.an-rij{display:grid;grid-template-columns:120px 1fr 38px;gap:8px;align-items:center;font-size:12px;margin-bottom:2px}
.an-rij .an-sub{grid-column:2 / 4;font-size:10.5px;color:var(--tx3);margin:-2px 0 6px}
.an-lab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tx2)}
.an-num{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.an-balk{display:block;height:10px;border-radius:5px;background:var(--panel2,#f1ece3);overflow:hidden}
.an-balk i{display:block;height:100%;border-radius:5px}
.an-voet{font-size:10.5px;color:var(--tx3);margin-top:6px}
.an-tabel{font-size:12.5px;overflow:auto}
.an-trkop,.an-tr{display:grid;grid-template-columns:minmax(150px,1.4fr) minmax(140px,1.4fr) 60px 60px 60px 60px 70px 60px;gap:8px;align-items:center;padding:7px 4px;min-width:720px}
.an-trkop{font-size:12px;color:var(--tx3);border-bottom:1px solid var(--line)}
.an-tr{border-bottom:1px solid var(--line)}.an-tr:last-child{border-bottom:0}
.an-tr>span:first-child{display:flex;flex-direction:column}.an-tr em{font-style:normal;font-size:11px;color:var(--tx3)}.an-tr em i{font-style:normal}
.an-tr>span:nth-child(2){display:flex;align-items:center;gap:8px}.an-tr>span:nth-child(2) .an-balk{flex:1}.an-tr small{font-size:11.5px;white-space:nowrap}
.an-beterrij{display:flex;gap:10px;padding:8px 10px;border-radius:8px;margin-bottom:6px;font-size:12.5px;background:var(--panel2,#f6f3ee);border-left:3px solid #9aa3b1}
.an-beterrij.rood{border-left-color:#d63d42}.an-beterrij.oranje{border-left-color:#f0a020}.an-beterrij b{flex:0 0 110px}
.an-winn{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.an-winn>div{display:flex;flex-direction:column;gap:2px;font-size:12px}.an-winn img,.an-winn .crea-leeg{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:var(--panel2)}
.an-winn em{font-style:normal;color:var(--tx3);font-size:11px}
.an-trend{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.an-trend span{font-size:11.5px;color:var(--tx3)}.an-spark{width:100%;height:46px}
.an-conc{display:flex;gap:10px;flex-wrap:wrap}.an-conc span{background:var(--panel2,#f6f3ee);border-radius:10px;padding:8px 12px;font-size:12px;color:var(--tx3)}.an-conc b{display:block;font-size:18px;color:var(--tx)}
@media(max-width:900px){.an-tegels{grid-template-columns:repeat(2,minmax(0,1fr))}.an-trend{grid-template-columns:1fr}}
/* ============ Research ============ */
.rs-balk{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}.rs-balk select{max-width:220px}
.rs-tel{font-size:12.5px;margin-bottom:12px;color:var(--tx2)}
.rs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.rs-ad{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column}
.rs-adkop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.rs-chips{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.rs-kop{font-weight:700;font-size:13px;margin-bottom:4px}
.rs-tekst{font-size:12.5px;color:var(--tx2);line-height:1.5;margin:0 0 8px;white-space:pre-line;flex:1}
.rs-snel{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.rs-snel a{font-size:12px;padding:3px 9px;border-radius:999px;background:var(--panel2,#F2F4F7);color:var(--tx2);text-decoration:none}
@media(max-width:820px){.rs-grid{grid-template-columns:1fr}#cc-grid,.pmain .grid[style*="1fr 1fr"]{grid-template-columns:1fr!important}}
/* ============ Copy-check ============ */
.cc-score{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.cc-ring{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--k) calc(var(--p) * 1%), var(--panel2,#efe9df) 0)}
.cc-ring b{width:58px;height:58px;border-radius:50%;background:var(--panel);display:grid;place-items:center;font-size:20px}
.cc-verbeter{background:rgba(240,160,32,.08);border:1px solid rgba(240,160,32,.35);border-radius:10px;padding:10px 12px;margin-bottom:10px;font-size:12.5px}
.cc-verbeter ol{margin:6px 0 0 18px;padding:0}.cc-verbeter li{margin-bottom:4px}
.cc-lijst{display:flex;flex-direction:column;gap:4px}
.cc-rij{display:flex;gap:10px;font-size:12.5px;padding:6px 8px;border-radius:8px}
.cc-rij>span{width:18px;flex:0 0 18px;font-weight:700;text-align:center}
.cc-rij.goed>span{color:#1f8a4c}.cc-rij.fout>span{color:#d63d42}.cc-rij.half>span{color:#c27c0e}.cc-rij.fout{background:rgba(214,61,66,.05)}
.cc-rij div{display:flex;flex-direction:column}.cc-rij em{font-style:normal;color:var(--tx3);font-size:12px}
.sk-intro{padding:14px 16px;margin-bottom:12px;border-left:3px solid var(--acc,#141414)}


.chat{display:flex;flex-direction:column;height:640px}
.chat-kop{display:flex;align-items:baseline;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.chat-lijst{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.chat-m{display:flex;flex-direction:column;max-width:78%}.chat-m.ik{align-self:flex-end;align-items:flex-end}.chat-m.hij{align-self:flex-start}
.chat-bel{padding:10px 13px;border-radius:14px;font-size:13px;line-height:1.5;white-space:pre-wrap}
.chat-m.ik .chat-bel{background:var(--tx);color:var(--bg);border-bottom-right-radius:4px}
.chat-m.hij .chat-bel{background:var(--panel2,#F2F4F7);border-bottom-left-radius:4px;white-space:normal}
.chat-m em{font-style:normal;font-size:10.5px;color:var(--tx3);margin-top:3px}
.chat-in{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}.chat-in textarea{flex:1;resize:vertical}

.gk-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-radius:14px;background:var(--tx);color:var(--bg);margin-bottom:14px;flex-wrap:wrap}
.gk-top>div{display:flex;align-items:center;gap:14px}.gk-top p{margin:2px 0 0;font-size:12.5px;opacity:.75}.gk-top b{font-size:15px}
.gk-n{font-size:34px;font-weight:700;line-height:1;min-width:44px;text-align:center}
.gk-alles{background:#22a35a!important;border-color:#22a35a!important;color:#fff!important;font-size:14px;padding:11px 18px}
.gk-app{border:2px solid #f0a020;background:rgba(240,160,32,.08);border-radius:12px;padding:12px 16px;margin-bottom:14px;font-size:13px}.gk-app p{margin:4px 0}.gk-app ol{margin:4px 0 0 18px;padding:0}.gk-app li{margin:2px 0}
.gk-groep{margin-bottom:18px}.gk-kop{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}.gk-kop em{font-style:normal;font-size:12px;color:var(--tx3)}.gk-kop .btn{margin-left:auto}
.gk-inh{flex:1;min-width:0}.gk-inh summary{cursor:pointer;list-style:none}.gk-inh summary::-webkit-details-marker{display:none}
.gk-link{font-size:12px;color:var(--tx3);text-decoration:underline;margin-left:4px}
.gk-knop{display:flex;gap:6px;flex:0 0 auto}
.gk-ja,.gk-nee{border-radius:9px;padding:8px 12px;font:600 13px var(--font,system-ui);cursor:pointer;border:1px solid transparent;white-space:nowrap}
.gk-ja{background:#22a35a;color:#fff}.gk-ja:hover{background:#1c8a4b}.gk-nee{background:transparent;color:var(--tx2);border-color:var(--line)}.gk-nee:hover{border-color:var(--rd);color:var(--rd)}
.gk-ja:disabled,.gk-nee:disabled{opacity:.5}
.gk-leeg{text-align:center;padding:48px 16px}.gk-leeg span{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#22a35a;color:#fff;font-size:26px;margin-bottom:10px}.gk-leeg b{display:block;font-size:16px}.gk-leeg p{color:var(--tx3);font-size:13px}
.gk-banner{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;border-radius:12px;background:#f0a020;color:#1a1204;padding:10px 14px;margin:0 0 12px;cursor:pointer;font:500 13.5px var(--font,system-ui)}
.gk-banner b{background:#1a1204;color:#f0a020;border-radius:99px;min-width:26px;height:26px;display:grid;place-items:center;font-size:13px;padding:0 6px}.gk-banner em{margin-left:auto;font-style:normal;font-weight:700}
.gk-teller{font-style:normal;background:#f0a020;color:#1a1204;border-radius:99px;padding:0 7px;margin-left:4px;font-size:11px;font-weight:700}
@media(max-width:640px){.gk-knop{width:100%}.gk-ja,.gk-nee{flex:1}.gk-alles{width:100%}}

.rs-score{display:inline-block;min-width:34px;padding:2px 7px;border-radius:99px;font-weight:700;color:#fff;background:hsl(calc(var(--s) * 1.2) 60% 40%)}

.an-bib{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;margin-top:10px}.an-bib>div{border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12.5px}.an-bib em{display:block;font-style:normal;color:var(--tx3);font-size:11px;margin-top:2px}
.an-conc span em{display:block;font-style:normal;font-size:10.5px}
.gk-beelden{display:flex;gap:6px;margin-top:6px}.gk-beelden img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}

.cl-tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:12px}.cl-tegels div{border:1px solid var(--line);border-radius:10px;padding:10px}.cl-tegels b{display:block;font-size:20px}.cl-tegels span{font-size:11.5px;color:var(--tx3)}
.cl-skills details,.card details{border-top:1px solid var(--line);padding:8px 0}.cl-skills summary,.card details>summary{cursor:pointer}
.cl-best{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.cl-best span{font-size:11.5px;border:1px solid var(--line);border-radius:99px;padding:2px 8px}.cl-best em{font-style:normal;color:var(--tx3)}
.cl-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:6px;margin-top:6px}.cl-tools>div{font-size:12px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}.cl-tools span{color:var(--tx3)}

/* ============ Agent OS: het bouwdorp ============ */
.aos-wereld{--aos-lucht:#0f1a22;--aos-gras1:#2d5b30;--aos-gras2:#316335;--aos-weg:#6f5a40;--aos-rand1:#4a3624;--aos-rand2:#3a2a1c;--aos-dek:#7a5a3a;--aos-naad:rgba(0,0,0,.28);--aos-kavel:rgba(84,62,38,.6);
  position:relative;background:radial-gradient(ellipse at 50% 58%,#193326 0%,var(--aos-lucht) 78%)}
html[data-theme="light"] .aos-wereld{--aos-lucht:#d9eef6;--aos-gras1:#7cc35a;--aos-gras2:#86ca63;--aos-weg:#dcc08d;--aos-rand1:#a47a4c;--aos-rand2:#8a6440;--aos-dek:#c99a64;--aos-naad:rgba(90,60,30,.28);--aos-kavel:rgba(160,118,66,.4);
  background:radial-gradient(ellipse at 50% 58%,#eef8e6 0%,var(--aos-lucht) 82%)}
.aos-svg{display:block;width:100%;height:auto;max-height:calc(100vh - 420px);max-height:calc(100dvh - 420px);min-height:0;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.aos-gras{fill:var(--aos-gras1)}.aos-gras2{fill:var(--aos-gras2)}.aos-weg{fill:var(--aos-weg)}.aos-rand1{fill:var(--aos-rand1)}.aos-rand2{fill:var(--aos-rand2)}
.aos-dek{fill:var(--aos-dek)}.aos-deknaad{stroke:var(--aos-naad);stroke-width:1}
.aos-kavel{fill:var(--aos-kavel);stroke:rgba(0,0,0,.14);stroke-width:1;stroke-dasharray:3 3}
.aos-schaduw{fill:rgba(0,0,0,.22)}
.aos-led{animation:aosled 1.6s ease-in-out infinite}@keyframes aosled{50%{opacity:.25}}
.aos-klik,.aos-poort,.aos-plot,.aos-fig,.aos-plaats,.aos-tag{cursor:pointer}.aos-plot.leeg{cursor:default}
.aos-lamp{fill:#35d07f}.aos-lamp.aan{fill:#f0a020;animation:aosled .9s ease-in-out infinite}
.aos-bordtekst{font:700 9px var(--font);fill:#fbe9d0;text-anchor:middle}.aos-bordtekst.klein{font-size:8px;fill:#6b4a2b}
.aos-damp circle,.aos-rook circle{fill:rgba(220,220,220,.7);transform-box:fill-box;transform-origin:center;animation:aosrook 2.4s linear infinite}
.aos-rook circle{fill:rgba(190,190,190,.65);animation-duration:3s}
@keyframes aosrook{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:.85}100%{opacity:0;transform:translate(6px,-24px) scale(1.9)}}
.aos-gloed{animation:aosgloed 1.1s ease-in-out infinite}@keyframes aosgloed{50%{opacity:.55}}
/* bouwplaatsen */
.aos-plot:not(.bouwt) .aos-kraan{display:none}
.aos-plot.af .aos-steiger,.aos-plot.af .aos-vg{display:none}.aos-plot:not(.af) .aos-vlag{display:none}
.aos-plot.sel .aos-kavel,.aos-plot:not(.leeg):hover .aos-kavel{stroke:#3b82f6;stroke-width:2;stroke-dasharray:none}
.aos-steiger line{stroke:#c89b5e;stroke-width:2}.aos-steiger .plank{stroke:#9a6836;stroke-width:3.2}.aos-steiger .schoor{stroke:#b98049;stroke-width:1.4}
.aos-vgbg{fill:rgba(20,24,36,.78)}.aos-vgbalk{fill:#35d07f}.aos-niv{font:700 8px var(--font);fill:var(--tx)}
.aos-vlag line{stroke:#6b4a2b;stroke-width:1.6}.aos-vlag path{transform-box:fill-box;transform-origin:left center;animation:aosvlag 1.6s ease-in-out infinite}
@keyframes aosvlag{50%{transform:scaleX(.82) skewY(7deg)}}
.aos-mast{stroke:#e0a100;stroke-width:1.8;fill:none}.aos-mast.dun{stroke-width:1}
.aos-giek{animation:aosgiek 7s ease-in-out infinite}@keyframes aosgiek{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.5)}}
/* bouwvakkers */
.aos-hesje{fill:#ffb21c}.aos-reflex{fill:#eef2f6;opacity:.9}
.aos-selring{fill:none;stroke:transparent;stroke-width:2.5}
.aos-fig:hover .aos-selring{stroke:rgba(59,130,246,.55)}.aos-fig.sel .aos-selring{stroke:#3b82f6;animation:aosled 1.4s ease-in-out infinite}
.aos-hamer,.aos-kopje,.aos-stof,.aos-plank,.aos-uitroep,.aos-zzz{display:none}
.aos-fig.aan .aos-hamer{display:inline}.aos-fig.m-koffie .aos-kopje{display:inline}.aos-fig.m-koffie .aos-hamer{display:none}
.aos-fig.bouwt .aos-stof{display:inline}.aos-fig.draagt .aos-plank{display:inline}.aos-fig.draagt .aos-hamer{display:none}
.aos-fig.wacht .aos-uitroep{display:inline;animation:aosknip 1s ease-in-out infinite}
.aos-fig.m-zit:not(.aan):not(.wacht) .aos-zzz{display:inline}
.aos-fig.rug .aos-gezicht{display:none}
@keyframes aosknip{0%,45%{opacity:1}55%,100%{opacity:.25}}
.aos-uitroep rect{fill:#f0a020;stroke:#8a5a0a;stroke-width:1}.aos-uitroep text{font:900 13px var(--font);fill:#1a1204;text-anchor:middle}
.aos-zzz text{font:800 8px var(--font);fill:var(--tx2);opacity:0;animation:aoszzz 2.7s ease-in-out infinite}
.aos-zzz text:nth-child(2){animation-delay:.6s}.aos-zzz text:nth-child(3){animation-delay:1.2s;font-size:10px}
@keyframes aoszzz{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.aos-stof circle{fill:#cdb89a;opacity:0;transform-box:fill-box;transform-origin:center;animation:aosstof .53s ease-out infinite}
.aos-stof .s2{animation-delay:.12s}.aos-stof .s3{animation-delay:.26s}.aos-fig.vonk .aos-stof circle{fill:#ffcf3a}
@keyframes aosstof{0%{opacity:.95;transform:translate(0,0) scale(.5)}100%{opacity:0;transform:translate(5px,-8px) scale(1.5)}}
.aos-fig.robot .aos-oog{fill:#cfe8ff}.aos-fig.robot.aan .aos-oog{fill:#7df9ff}.aos-wiel{fill:#2b303b}
.aos-antenne{fill:#8a94a6}.aos-fig.robot.aan .aos-antenne{fill:#7df9ff;animation:aosled 1s ease-in-out infinite}
.aos-fig.robot:not(.aan) .aos-lijf{opacity:.75}
/* naambordjes, ballonnen en plaatsnamen */
.aos-tag{transition:opacity .2s}.aos-tag rect{fill:var(--panel);stroke:var(--line2);stroke-width:1}
.aos-tag text{font:600 9.5px var(--font);fill:var(--tx);text-anchor:middle}
.aos-wolk{pointer-events:none;transition:opacity .2s}.aos-wolk rect,.aos-wolk path{fill:var(--tx)}.aos-wolk text{font:500 8.5px var(--font);fill:var(--bg);text-anchor:middle}
.aos-tag.weg,.aos-wolk.weg{opacity:0;pointer-events:none}
.aos-plaats rect{fill:var(--panel);stroke:var(--line2);stroke-width:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
.aos-plaats .t1{font:700 10.5px var(--font);fill:var(--tx);text-anchor:middle}.aos-plaats .t2{font:500 8.8px var(--font);fill:var(--tx2);text-anchor:middle}
.aos-plaats:hover rect{stroke:#3b82f6}
.aos-plaats.let rect{fill:#f0a020;stroke:#b3740f;animation:aosled 1.3s ease-in-out infinite}.aos-plaats.let .t1,.aos-plaats.let .t2{fill:#1a1204}
/* de muur met vaste taken */
.aos-muur{position:relative;padding:9px 12px 12px;background:linear-gradient(180deg,#8a5a33,#6c4426);border-bottom:4px solid #4a2e19}
.aos-muur:empty{display:none}
.aos-muur::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 62px,rgba(0,0,0,.14) 62px 64px);pointer-events:none}
.aos-muurkop{position:relative;display:flex;align-items:baseline;gap:8px;margin-bottom:9px;color:#fbe9d0;flex-wrap:wrap}
.aos-muurkop b{font-size:12px;}.aos-muurkop span{font-size:11.5px;opacity:.75}
.aos-posters{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.aos-poster{position:relative;min-width:0;display:flex;flex-direction:column;gap:1px;text-align:left;padding:8px 10px 7px;border-radius:3px;border-top:4px solid #9aa3b1;
  background:#fffdf5;color:#2b2217;box-shadow:0 3px 6px rgba(0,0,0,.3);transform:rotate(var(--r,0deg));transition:transform .15s,box-shadow .15s}
.aos-poster:hover{transform:rotate(0) translateY(-2px)}
.aos-poster.klaar{border-top-color:#22a35a}
.aos-poster.wacht{border-top-color:#f0a020;background:#fff1d6;box-shadow:0 0 0 2px #f0a020,0 3px 6px rgba(0,0,0,.3)}
.aos-poster.sel{box-shadow:0 0 0 2px #3b82f6,0 3px 6px rgba(0,0,0,.3)}
.aos-punaise{position:absolute;top:-6px;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#e5484d;box-shadow:0 1px 2px rgba(0,0,0,.45)}
.aos-ptijd{font:750 15px var(--font);letter-spacing:-.01em;font-variant-numeric:tabular-nums;padding-right:44px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aos-poster b{font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aos-poster em{font-style:normal;font-size:11px;color:#6b5d4b;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aos-poster em i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:0}
.aos-pvink{position:absolute;top:7px;right:8px;width:20px;height:20px;border-radius:50%;background:#22a35a;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800}
.aos-pwacht{position:absolute;top:8px;right:8px;background:#f0a020;color:#1a1204;border-radius:99px;padding:1px 7px;font-size:10.5px;font-weight:800;animation:aosled 1.2s ease-in-out infinite}
/* indeling: nergens horizontaal scrollen */
.aos,.aos-midden,.aos-rechts{min-width:0}
.aos-balk2 .seg{flex-wrap:wrap;max-width:100%}
@media(max-width:640px){.aos-zoek{min-width:0;flex:1 1 0}.aos-zoek kbd{display:none}.aos-balk2{gap:8px}
  .aos-tegels{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px}.aos-tegel{padding:7px 9px;border-radius:10px}.aos-tegel b{font-size:17px}.aos-tegel span{font-size:10.5px;line-height:1.25}
  .aos-wereld{display:flex;flex-direction:column}.aos-muur{order:2;border-bottom:0;border-top:4px solid #4a2e19}.aos-kanban{grid-template-columns:minmax(0,1fr)}.aos-posters{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .aos-poster{padding:7px 8px 6px}.aos-ptijd{font-size:13.5px}.aos-muur{padding:8px 8px 10px}.aos-svg{max-height:none}}
@media (prefers-reduced-motion: reduce){.aos-wereld *,.aos-balk span{animation:none!important;transition:none!important}}

.wiz-kaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.wiz-kaart{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--panel)}.wiz-kaart b{font-size:14px}.wiz-kaart p{margin:6px 0;font-size:12.5px;color:var(--tx2);line-height:1.5}
.wiz-zeg{font-size:12px;background:var(--panel2,#F2F4F7);border-radius:8px;padding:6px 8px;color:var(--tx2)}

.seg{max-width:100%;overflow-x:auto;scrollbar-width:none}.seg::-webkit-scrollbar{display:none}.seg button{white-space:nowrap}

/* ---------- Dagelijkse analist: tabs, compacte rijen, uitklapbaar ---------- */
.anx{--op:#1f8a4c;--neer:#d63d42;--wrn:#c27c0e;max-width:1280px;min-width:0}
.anx-kop{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--tx3);margin:0 0 12px}.anx-kop b{color:var(--tx);font-weight:650}
.anx-kop .anx-nu{color:var(--tx2)}.anx-kop .anx-nu em{font-style:normal;color:var(--tx3)}
.anx-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:14px}
.anx-tabs button{padding:6px 11px;border-radius:8px;font-size:12.5px;font-weight:550;color:var(--tx2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.anx-tabs button:hover{color:var(--tx);background:var(--hover)}
.anx-tabs button.on{background:var(--panel2);color:var(--tx);box-shadow:inset 0 0 0 1px var(--line2)}
.anx-tabs em,.anx-pills em{font-style:normal;font-size:10.5px;color:var(--tx3);font-variant-numeric:tabular-nums}
.anx-body{min-width:0}
.anx-kaart{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;min-width:0}
.anx-kt{display:flex;align-items:baseline;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;margin-bottom:8px}.anx-kt b{font-size:13.5px}.anx-kt .hint{font-size:11.5px}
.anx-noot{margin:0 0 10px;font-size:11.5px}
.anx-leeg{border:1px dashed var(--line2);border-radius:14px;padding:28px 16px;text-align:center;color:var(--tx3);font-size:13px}
.anx-link{color:var(--tx2);font-size:12px;text-decoration:underline;text-underline-offset:2px;padding:0}.anx-link:hover{color:var(--tx)}
.anx .chip{font-size:10.5px;padding:1.5px 7px}
.anx .an-balk{height:8px;background:var(--panel2)}
/* KPI-tegels */
.anx-tegels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:12px}
.anx-tegel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 12px 8px;display:flex;flex-direction:column;min-width:0}
.anx-tegel .l{font-size:11.5px;color:var(--tx2)}.anx-tegel>b{font-size:21px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.25}
.anx-tegel .s{display:flex;gap:6px;flex-wrap:wrap;font-size:11px;min-height:16px}.anx-tegel .s em{font-style:normal;color:var(--tx3)}
.anx-tegel .s i{font-style:normal;font-weight:650}.anx i.op,.anx .g.op,.anx b.op{color:var(--op)}.anx i.neer,.anx .g.neer{color:var(--neer)}.anx i.gelijk{color:var(--tx3);font-weight:500}
.anx-spark{display:block;width:100%;height:28px;margin-top:4px}
/* conclusies */
.anx-concl{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.anx-concl:first-of-type{border-top:0}
.anx-concl .z b{display:block;font-size:13px;font-weight:600}.anx-concl .z em{display:block;font-style:normal;font-size:11.5px;color:var(--tx3);margin-top:1px}
.anx-concl .g{font-size:18px;font-weight:750;font-variant-numeric:tabular-nums;text-align:right}.anx-concl .g.beter{color:var(--op)}.anx-concl .g.slechter{color:var(--neer)}
.anx-twee{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:12px;align-items:start}
/* acties per student */
.anx-actie{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;align-items:center;padding:7px 10px;border-radius:8px;margin-bottom:5px;background:var(--panel2);border-left:3px solid var(--line2);font-size:12.5px}
.anx-actie.rood{border-left-color:var(--neer)}.anx-actie.oranje{border-left-color:#f0a020}.anx-actie.groen{border-left-color:var(--op)}.anx-actie.grijs{color:var(--tx2)}
.anx-actie .n b{display:block;font-size:12.5px}.anx-actie .n em,.anx-actie .t em{display:block;font-style:normal;font-size:10.5px;color:var(--tx3)}
.anx-sig{display:grid;grid-template-columns:minmax(0,1fr) 80px 54px minmax(0,1.3fr);gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:12.5px}
.anx-sig:first-of-type{border-top:0}.anx-sig .g{font-weight:750;text-align:right;font-variant-numeric:tabular-nums}.anx-sig .w{font-size:11.5px;color:var(--tx2)}
.anx-sig .anx-spark,.anx-trij .anx-spark{height:24px;margin:0}
/* lijsten met uitklapbare rijen */
.anx-lijst{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:12px}
.anx-lkop,.anx-rij>summary{display:grid;gap:10px;align-items:center;padding:8px 14px}
.anx-lkop{font-size:12px;color:var(--tx3);border-bottom:1px solid var(--line)}
.anx-mkt .anx-lkop,.anx-mkt .anx-rij>summary{grid-template-columns:minmax(0,1.7fr) minmax(0,1.3fr) repeat(5,62px)}
.anx-acc .anx-lkop,.anx-acc .anx-rij>summary{grid-template-columns:minmax(0,2.6fr) minmax(0,1.1fr) 56px 56px 64px 96px}
.anx-prod .anx-lkop,.anx-prod .anx-rij>summary{grid-template-columns:minmax(0,2.4fr) minmax(0,1.2fr) 70px 58px 58px 60px}
.anx-conc .anx-lkop,.anx-conc .anx-rij>summary{grid-template-columns:26px minmax(0,2.4fr) 90px 48px 70px 70px}
.anx-rij{border-top:1px solid var(--line)}.anx-lkop+.anx-rij{border-top:0}
.anx-rij>summary{list-style:none;cursor:pointer;font-size:12.5px}.anx-rij>summary::-webkit-details-marker{display:none}
.anx-rij>summary:hover,.anx-rij[open]>summary{background:var(--panel2)}
.anx-rij.slecht>summary{box-shadow:inset 3px 0 0 var(--neer)}.anx-rij.goed>summary{box-shadow:inset 3px 0 0 var(--op)}.anx-rij.dun>summary .nm b{color:var(--tx2)}
.anx-rij .nm{display:flex;flex-wrap:wrap;align-items:center;gap:3px 7px;min-width:0}
.anx-rij .nm>b{font-size:13px;overflow-wrap:anywhere}.anx-rij .nm>b::before{content:'';display:inline-block;vertical-align:middle;margin:-2px 7px 0 0;border-left:5px solid var(--tx3);border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s}
.anx-rij[open] .nm>b::before{transform:rotate(90deg)}
.anx-rij .nm>em{font-style:normal;font-size:11px;color:var(--tx3);flex-basis:100%;padding-left:12px}
.anx-flags{display:flex;flex-wrap:wrap;gap:4px;flex-basis:100%;padding-left:12px}
.anx-rij .bw{display:flex;align-items:center;gap:8px;min-width:0}.anx-rij .bw .an-balk{flex:1}.anx-rij .bw small{font-size:11.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.anx-rij .k{font-variant-numeric:tabular-nums;white-space:nowrap}.anx-rij .k.onder,.anx-rij .k.onder b{color:var(--tx3)!important;font-weight:500}
.anx-open{padding:10px 14px 14px;border-top:1px dashed var(--line);font-size:12.5px;min-width:0}
.anx-open>*+*{margin-top:10px}
.anx-weinig{background:var(--panel2);border-left:3px solid var(--tx3);border-radius:6px;padding:7px 10px;font-size:12px;color:var(--tx2)}
.anx-besten{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.anx-best{background:var(--panel2);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.anx-best .l,.anx-topcr .l,.anx-inst .l,.anx-cdims .l{font-size:12px;color:var(--tx3)}
.anx-best>b{font-size:13.5px;overflow-wrap:anywhere}.anx-best em{font-style:normal;font-size:11px;color:var(--tx3)}.anx-best .chip{align-self:flex-start;white-space:normal}
.anx-best.dun>b{font-weight:500}
.anx-topcr{display:flex;gap:12px;align-items:center}.anx-topcr .anx-img{width:72px;flex:0 0 72px}
.anx-topcr>div{display:flex;flex-direction:column;gap:2px;min-width:0}.anx-topcr b{font-size:13px}.anx-topcr em{font-style:normal;font-size:11.5px;color:var(--tx2)}.anx-topcr em.dun{color:var(--tx3)}
.anx-vgls{background:var(--panel2);border-radius:10px;padding:8px 10px}.anx-vgls .kop{display:block;font-size:12px;margin-bottom:4px}
.anx-vgl{display:grid;grid-template-columns:92px minmax(0,1fr);gap:8px;padding:4px 0;border-top:1px solid var(--line);font-size:12px;color:var(--tx2)}
.anx-vgl:first-of-type{border-top:0}.anx-vgl .d{color:var(--tx3);font-size:12px;padding-top:1px}.anx-vgl b{color:var(--tx)}.anx-vgl b.op{color:var(--op)}.anx-vgl b.nieuw{color:var(--wrn)}
.anx-conc-m .anx-kt b{font-size:12.5px}
.anx-cdims{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.anx-cw{display:grid;grid-template-columns:minmax(0,1fr) 54px 34px;gap:6px;align-items:center;font-size:11.5px;margin-top:3px}.anx-cw span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.anx-cw em{font-style:normal;color:var(--tx3);text-align:right;font-variant-numeric:tabular-nums}
.anx-inst{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}.anx-inst>div{background:var(--panel2);border-radius:8px;padding:6px 9px;display:flex;flex-direction:column;min-width:0}
.anx-inst b{font-size:12.5px;overflow-wrap:anywhere}.anx-inst em{font-style:normal;font-size:10.5px;color:var(--tx3)}
.anx-mini{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}.anx-mini th{text-align:left;font-size:10px;color:var(--tx3);font-weight:600;padding:4px 6px;border-bottom:1px solid var(--line)}
.anx-mini td{padding:5px 6px;border-bottom:1px solid var(--line)}.anx-mini tr:last-child td{border-bottom:0}
/* beelden */
.anx-img{position:relative;display:block;aspect-ratio:1;border-radius:9px;overflow:hidden;background:var(--panel2)}
.anx-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}.anx-img.fout img{display:none}
.anx-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--tx3);text-align:center;padding:6px}
.anx-ph em{font-style:normal;font-size:10.5px;text-transform:capitalize;line-height:1.2}
.anx-winn{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.anx-w{display:flex;flex-direction:column;gap:3px;font-size:12px;min-width:0;position:relative}.anx-w>.chip{position:absolute;top:6px;left:6px;z-index:2;background:var(--panel)}
.anx-w>b{font-size:12.5px;line-height:1.3;margin-top:3px;overflow-wrap:anywhere}.anx-w>em{font-style:normal;color:var(--tx3);font-size:11px}.anx-w .c{font-size:11.5px;color:var(--tx2)}
/* dimensies */
.anx-dims{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-top:6px}
.anx-dim{border:1px solid var(--line);border-radius:10px;padding:9px 10px;min-width:0}.anx-dim>b{display:block;font-size:12.5px;margin-bottom:6px}
.anx-drij{display:grid;grid-template-columns:minmax(64px,1fr) minmax(24px,1fr) 44px 34px 86px;gap:6px;align-items:center;font-size:11.5px;padding:2px 0}
.anx-drij .lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx2)}.anx-drij.beter .lab{color:var(--op);font-weight:600}.anx-drij.slechter .lab{color:var(--neer);font-weight:600}
.anx-drij.weinig{opacity:.6}.anx-drij .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}.anx-drij .o{text-align:right;min-width:0}.anx-drij .o em{font-style:normal;color:var(--tx3);font-size:10.5px;white-space:nowrap}
.anx-drij .o .chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.anx-sub{border-top:1px solid var(--line);margin-top:8px}.anx-sub>summary{cursor:pointer;font-size:12.5px;font-weight:600;padding:8px 0;color:var(--tx2)}.anx-sub>summary:hover{color:var(--tx)}
/* trends */
.anx-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;align-items:center}
.anx-pills button{padding:5px 11px;border-radius:20px;font-size:12px;font-weight:550;color:var(--tx2);border:1px solid var(--line);background:var(--panel);display:inline-flex;gap:6px;align-items:center}
.anx-pills button.on{color:var(--tx);border-color:var(--tx3);background:var(--panel2)}.anx-pills .anx-bij{margin-left:auto;border-style:dashed}
.anx-tkop,.anx-trij{display:grid;grid-template-columns:minmax(0,1fr) 80px 52px 52px 42px;gap:8px;align-items:center}
.anx-trij .kp{display:block;font-style:normal;font-size:11px;color:var(--tx3);margin-top:1px}.anx-trij .kp.op{color:var(--op)}
.anx-drij .o em.r{color:var(--wrn)}
.anx-meer>div{border-top:1px solid var(--line)}.anx-meer>summary .nm>b{font-weight:550;color:var(--tx2)}
.anx-tkop{font-size:12px;color:var(--tx3);padding-bottom:4px;border-bottom:1px solid var(--line)}
.anx-trij{padding:6px 0;border-bottom:1px solid var(--line);font-size:12.5px}.anx-trij:last-child{border-bottom:0}
.anx-trij .t{min-width:0;overflow-wrap:anywhere}.anx-trij .g{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}.anx-trij .g.zacht{font-weight:500;opacity:.8}
.anx-trij .nv{text-align:right;color:var(--tx3);font-variant-numeric:tabular-nums}.anx-trij .kp{min-width:0;text-align:right}.anx-trij .kp .chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.anx-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.anx-cats>div{background:var(--panel2);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:1px;border-left:3px solid var(--line2)}
.anx-cats>div.op{border-left-color:var(--op)}.anx-cats>div.neer{border-left-color:var(--neer)}
.anx-cats b{font-size:12.5px;text-transform:capitalize}.anx-cats .g{font-size:17px;font-weight:750;font-variant-numeric:tabular-nums}.anx-cats>div.op .g{color:var(--op)}.anx-cats>div.neer .g{color:var(--neer)}
.anx-cats em{font-style:normal;font-size:11px;color:var(--tx3)}
/* kennis */
.anx-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}.anx-filter #anzoek{flex:1 1 220px;min-width:0}.anx-filter .anx-pills{margin:0}.anx-filter select{width:auto}
.anx-groep{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:8px;min-width:0}
.anx-groep>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 14px;font-size:13px}
.anx-groep>summary::-webkit-details-marker,.anx-item>summary::-webkit-details-marker{display:none}
.anx-groep>summary::before,.anx-item>summary::before{content:'';flex:0 0 auto;border-left:5px solid var(--tx3);border-top:4px solid transparent;border-bottom:4px solid transparent;margin-right:2px;transition:transform .15s}
.anx-groep[open]>summary::before,.anx-item[open]>summary::before{transform:rotate(90deg)}
.anx-groep>summary .tel{font-size:11px;color:var(--tx3);font-variant-numeric:tabular-nums}.anx-groep>div{padding:0 14px 10px}
.anx-voorproef{flex-basis:100%;padding-left:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anx-item{border-top:1px solid var(--line)}.anx-kaart>.anx-item:first-of-type{border-top:0}
.anx-item>summary{list-style:none;cursor:pointer;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;padding:7px 0;font-size:12.5px}
.anx-item>summary>b{flex:1 1 200px;min-width:0;font-weight:600}.anx-item>summary:hover>b{text-decoration:underline;text-underline-offset:2px}
.anx-item .mk{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.anx-item .mk em{font-style:normal;font-size:11px;color:var(--tx3)}
.anx-item>.anx-open{border-top:0;padding:0 0 10px 18px}.anx-item .md{font-size:12.5px}
.anx-bewijs{font-size:12px;color:var(--tx2);background:var(--panel2);border-radius:6px;padding:6px 9px}.anx-bewijs b{color:var(--tx);margin-right:4px}
.anx-meta{border-left:3px solid #8b5cf6}
.anx-md{padding:4px 0 8px;font-size:13px}
.anx-score{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-variant-numeric:tabular-nums}
.anx-score::after{content:'';width:40px;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--op) calc(var(--s)*1%),var(--panel2) 0)}
@media(max-width:1100px){.anx-tegels{grid-template-columns:repeat(3,minmax(0,1fr))}.anx-twee{grid-template-columns:1fr}}
@media(max-width:720px){
  .anx-tegels{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.anx-tegel>b{font-size:19px}
  .anx-tabs{gap:2px;padding:3px}.anx-tabs button{padding:5px 8px;font-size:12px}
  .anx-concl{grid-template-columns:minmax(0,1fr) auto}.anx-concl>.chip{grid-column:1 / -1;justify-self:start;margin-bottom:-6px}
  .anx-actie{grid-template-columns:minmax(0,1fr)}.anx-actie .an-balk{display:none}
  .anx-sig{grid-template-columns:minmax(0,1fr) 64px 50px}.anx-sig .w{grid-column:1 / -1;margin-top:-4px}
  .anx-lkop{display:none}
  .anx-lijst .anx-rij>summary{display:flex;flex-wrap:wrap;gap:4px 12px;padding:9px 12px}
  .anx-rij .nm,.anx-rij .bw{flex:1 1 100%}
  .anx-rij .k{font-size:12px}.anx-rij .k[data-l]::before{content:attr(data-l) ' ';color:var(--tx3);font-size:10.5px;font-weight:500}
  .anx-conc .anx-rij .k.nr{display:none}
  .anx-open{padding:10px 12px 12px}
  .anx-dims{grid-template-columns:minmax(0,1fr)}
  .anx-winn{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .anx-vgl{grid-template-columns:minmax(0,1fr)}.anx-vgl .d{padding:0}
  .anx-tkop{display:none}.anx-trij{grid-template-columns:minmax(0,1fr) 64px 48px 48px}.anx-trij .nv{display:none}
  .anx-mini th:nth-child(5),.anx-mini td:nth-child(5),.anx-mini th:nth-child(7),.anx-mini td:nth-child(7){display:none}
  .anx-item>.anx-open{padding-left:0}
}

.anx-bewijs details{border-top:1px solid var(--line);padding:6px 0}.anx-bewijs summary{cursor:pointer;font-size:13px}
.anx-bwr{display:grid;grid-template-columns:minmax(120px,190px) minmax(60px,1fr) 52px minmax(0,2fr) auto;gap:8px;align-items:center;font-size:12.5px;padding:3px 0}
.anx-bwr em{font-style:normal;color:var(--tx3);font-size:11.5px}.anx-bwbalk{height:8px;border-radius:4px;background:var(--line);overflow:hidden}.anx-bwbalk i{display:block;height:100%;background:#3b82f6;border-radius:4px}
.anx-rij2{display:grid;grid-template-columns:1fr 1.4fr;gap:18px;margin-top:10px}.anx-prod summary{cursor:pointer;display:flex;gap:8px;flex-wrap:wrap;font-size:12.5px;padding:3px 0}.anx-prod summary em{font-style:normal;color:var(--tx3)}
@media(max-width:760px){.anx-rij2{grid-template-columns:1fr}.anx-bwr{grid-template-columns:1fr 60px 44px;}.anx-bwr em,.anx-bwr .chip{grid-column:1/-1}}

/* ---------- Creatives: Maken (presets, product kiezen, tekstsets) ---------- */
.cr-tabs{align-items:flex-end}
.cr-hulp{font:inherit;font-size:13px;color:var(--tx2);text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;cursor:pointer;white-space:nowrap}
.cr-tel{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--acc);color:var(--on-acc,#fff);font-size:11px;font-weight:600}
.cr-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;margin:0 0 16px;border:1px solid rgba(240,160,32,.4);background:rgba(240,160,32,.08);border-radius:var(--r);font-size:13px}
.cr-banner span{flex:1;min-width:0}
.cr-stap{margin:0 0 22px}
.cr-staplbl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600;font-size:14.5px;margin:0 0 10px}
.cr-staplbl i{font-style:normal;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--acc);color:var(--on-acc,#fff);font-size:12px;font-weight:700}
.cr-staplbl em{font-style:normal;font-weight:400;font-size:12px;color:var(--tx3)}
.cr-seg{margin-left:auto}
.cr-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cr-preset{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:10px;row-gap:2px;align-items:start;text-align:left;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--tx);cursor:pointer;font:inherit;transition:border-color .13s,box-shadow .13s}
.cr-preset:hover{border-color:var(--tx3)}
.cr-preset.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.cr-preset svg{grid-row:1 / span 3;width:34px;height:34px;padding:7px;border-radius:9px;background:var(--panel2);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cr-preset.on svg{background:var(--acc);color:var(--on-acc,#fff)}
.cr-preset b{font-size:14px;line-height:1.3}
.cr-preset span{font-size:12.5px;color:var(--tx2);line-height:1.35}
.cr-preset em{font-style:normal;font-size:11.5px;color:var(--tx3)}
.cr-zoek{max-width:520px;margin:0 0 10px}
.cr-tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.cr-tegels button{display:flex;flex-direction:column;gap:6px;padding:6px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:inherit;font:inherit;text-align:left;cursor:pointer;min-width:0}
.cr-tegels button:hover{border-color:var(--tx3)}
.cr-tegels img,.cr-tegels .cr-geenbeeld{width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px;background:var(--panel2);display:block}
.cr-tegels span{font-size:12.5px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0 2px 2px}
.cr-tegels em{display:block;font-style:normal;font-size:11.5px;color:var(--tx3)}
.cr-gekozen{max-width:520px}
.cr-gekozen img{width:56px;height:56px}
.cr-extra{display:flex;flex-direction:column;gap:8px;margin:0 0 18px;max-width:760px}
.cr-uit{border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.cr-uit summary{cursor:pointer;padding:11px 14px;font-weight:600;font-size:13.5px;list-style:none;display:flex;align-items:center;gap:8px}
.cr-uit summary::-webkit-details-marker{display:none}
.cr-uit summary::before{content:'+';display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;border:1px solid var(--line2,var(--line));font-weight:500;color:var(--tx2)}
.cr-uit[open] summary::before{content:'–'}
.cr-uitin{padding:2px 14px 12px}
.cr-uit > .hint{padding:0 14px 12px}
.cr-vink{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tx2);cursor:pointer}
.cr-actie{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap;padding:14px 0 4px;border-top:1px solid var(--line);max-width:none}
.cr-actie .hint{flex:1;min-width:200px;font-size:12.5px}
.cr-go{height:42px;padding:0 20px;font-size:14px}
.cr-meer summary{cursor:pointer;list-style:none}
.cr-meer summary::-webkit-details-marker{display:none}
/* opgeleverde teksten */
.cr-teksten{gap:10px}
.cr-teksten>.cr-tblok{padding:12px 14px}
.cr-tkop{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cr-tkop b{display:inline;margin-right:auto}
.cr-score{font-size:11.5px;padding:2px 7px;border-radius:6px;background:rgba(214,61,66,.1);color:#b3383d}
.cr-score.ok{background:rgba(31,138,76,.1);color:#1f8a4c}
.cr-hook{font-weight:600;margin-bottom:8px}
.cr-tveld{margin-bottom:8px;min-width:0}
.cr-tveld span{display:block;font-size:12px;font-weight:600;color:var(--tx3);margin-bottom:2px}
.cr-tveld p{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.cr-tveld.lang p{max-height:220px;overflow:auto}
.cr-tveld .cr-mist{color:#b3383d;font-style:italic}
.cr-trij{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0 14px}
.cc-knop{display:flex;align-items:flex-end;margin-bottom:12px}
@media (max-width:900px){.cr-presets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .cr-presets{gap:8px}
  .cr-preset{grid-template-columns:minmax(0,1fr);padding:11px}
  .cr-preset svg{grid-row:auto;width:28px;height:28px;padding:5px;margin-bottom:4px}
  .cr-preset b{font-size:13.5px}
  .cr-tegels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-actie{flex-direction:column;align-items:stretch}
  .cr-actie .hint{min-width:0}
  .cr-go{width:100%}
  .cr-seg{margin-left:0}
}
/* Creatives → Maken: vier manieren (zelf bepalen, JDA-presets, Andromeda-concepten, uit mijn data) */
.cr-modi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:1040px}
@media (min-width:1500px){.cr-modi{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}}
.cr-modus{display:flex;gap:12px;align-items:center;text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--tx);cursor:pointer;font:inherit;min-height:64px;transition:border-color .13s,box-shadow .13s}
.cr-modus:hover{border-color:var(--tx3)}
.cr-modus.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.cr-modus svg{flex:0 0 38px;width:38px;height:38px;padding:8px;border-radius:10px;background:var(--panel2);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cr-modus.on svg{background:var(--acc);color:var(--on-acc,#fff)}
.cr-modus span{min-width:0}
.cr-modus b{display:block;font-size:14.5px;line-height:1.3}
.cr-modus em{display:block;font-style:normal;font-size:12.5px;color:var(--tx2);line-height:1.35;margin-top:1px}
.cr-eigen2{max-width:760px}
.cr-eigen2 textarea{min-height:120px;font-size:14px;line-height:1.5}
.cr-eigrij{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin:4px 0 10px}
.cr-eigrij > .f{margin:0}
.cr-eigrij > .f > span{display:block;font-size:12px;color:var(--tx2);margin-bottom:5px}
.cr-fmt button{padding:8px 14px;font-size:13.5px}
.cr-media{display:inline-flex}
.cr-media button{padding:8px 16px;font-size:13.5px;min-width:76px}
.cr-aantal{width:110px}
.cr-lbl{display:block;font-size:12px;font-weight:600;color:var(--tx2);margin:0 0 6px}
.cr-data{padding:16px 18px;max-width:900px}
.cr-data.leeg{border-style:dashed}
.cr-datakop{display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap;margin-bottom:10px}
.cr-datakop b{font-size:14.5px}
.cr-datakop span{font-size:12px;color:var(--tx3)}
.cr-kenmerken{display:grid;gap:6px}
.cr-kenm{display:grid;grid-template-columns:150px minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:baseline;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel2)}
.cr-kenmlbl{font-size:12px;color:var(--tx3)}
.cr-kenm > b{font-size:14px;overflow-wrap:anywhere}
.cr-kenmcijf{grid-column:2 / span 2;font-size:12px;color:var(--tx2)}
.cr-kenmcijf b{color:var(--tx)}
.cr-sterk{font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;border:1px solid var(--line);color:var(--tx2);white-space:nowrap}
.cr-sterk.ok{color:var(--grn);border-color:color-mix(in srgb,var(--grn) 45%,var(--line))}
.cr-datawinn{margin-top:12px}
.cr-datawinn > div{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.cr-dwin{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:9px;min-width:0}
.cr-dwin img{flex:0 0 52px;width:52px;height:52px;object-fit:cover;border-radius:6px;background:var(--panel2)}
.cr-dwin span{min-width:0}
.cr-dwin b{display:block;font-size:12.5px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cr-dwin em{display:block;font-style:normal;font-size:11.5px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-datasoort{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:760px}
.cr-datasoort button{text-align:left;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--tx);cursor:pointer;font:inherit}
.cr-datasoort button.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.cr-datasoort b{display:block;font-size:13.5px}
.cr-datasoort em{display:block;font-style:normal;font-size:12px;color:var(--tx3)}
.cr-go[disabled]{opacity:.5;cursor:not-allowed}
/* Andromeda-concepten */
.cr-andrcamp{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px}
.cr-alleenjij{display:inline-block;vertical-align:1px;margin-left:4px;font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:20px;background:color-mix(in srgb,var(--amb,#b7791f) 16%,transparent);color:var(--amb,#b7791f)}
.cr-andr{display:flex;gap:12px 22px;flex-wrap:wrap;align-items:flex-end}
.cr-andr > .f{margin:0}
.cr-andr > .f > span{display:block;font-size:12px;color:var(--tx2);margin-bottom:5px}
.cr-andrn button{min-width:44px;padding:8px 12px;font-size:14px}
.cr-andrv button{padding:8px 14px;font-size:13.5px}
.cr-andrv button small{font-size:11.5px;color:inherit;opacity:.75}
.cr-andrv button[disabled]{opacity:.4;cursor:not-allowed}
.cr-andrv button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;white-space:normal;line-height:1.25;padding:6px 14px;text-align:center}
.cr-andrv button small{display:block;font-weight:400}
.cr-andr .seg.cr-andrv button{white-space:normal}
.cr-kenmuitleg{font-weight:400;font-size:12.5px;color:var(--tx2)}
.cr-samen{margin:8px 0 0}
.cr-andrkenm small{font-size:11.5px;color:var(--tx3)}
.cr-andrsom{display:flex;gap:4px 10px;flex-wrap:wrap;align-items:baseline;margin:12px 0 8px;font-size:13.5px}
.cr-andrsom span{color:var(--tx2);font-size:12.5px}
/* Jairo 05-10: vaste Andromeda-set (samenstelling uit het onderzoek) */
.cr-andrset{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;max-width:760px}
.cr-andrdeel{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.cr-andrdeel b{font-size:20px;line-height:1;margin-right:6px;font-variant-numeric:tabular-nums}
.cr-andrdeel span{font-size:13.5px;font-weight:600}
.cr-andrdeel em{display:block;font-style:normal;font-size:12px;color:var(--tx3);margin-top:4px}
@media (max-width:600px){.cr-andrset{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cr-andrregel{max-width:760px}
.cr-andrregel ul{margin:0;padding-left:18px;font-size:13px;line-height:1.55;color:var(--tx2)}
.cr-andrregel li{margin:0 0 4px}
.cr-andrregel b{color:var(--tx)}
.cr-andreigen{margin-top:8px;max-width:760px}
.cr-andrkenmen{display:flex;flex-wrap:wrap;gap:6px}
.cr-andrkenm{font-size:12.5px;padding:4px 10px;border:1px solid var(--line);border-radius:20px;background:var(--panel2);color:var(--tx2)}
.cr-andrkenm b{color:var(--tx);font-weight:600}
@media (max-width:760px){
  .cr-modi{grid-template-columns:minmax(0,1fr);gap:8px}
  .cr-modus{padding:12px 14px;min-height:0}
  .cr-andrcamp{grid-template-columns:minmax(0,1fr)}
  .cr-andr > .f{width:100%}
  .cr-andr .seg{width:100%;padding:3px;-webkit-mask-image:none;mask-image:none}
  .cr-andr .seg button{flex:1 1 0;min-width:0;padding:0 6px}
  .cr-andr .seg.cr-andrv button{padding:6px 8px;min-height:48px}
  .cr-kenm{grid-template-columns:minmax(0,1fr) auto}
  .cr-kenmlbl{grid-column:1 / span 2}
  .cr-kenmcijf{grid-column:1 / span 2}
  .cr-datasoort{grid-template-columns:minmax(0,1fr)}
  .cr-fmt,.cr-media{width:100%}
  .cr-media button{flex:1;min-width:0}
  .cr-fmt button{flex:1}
}

/* ---------- Claude koppelen: wizard ---------- */
.cw{padding:20px 22px;display:block}
.cw-balk{display:flex;list-style:none;margin:0 0 18px;padding:0;gap:0}
.cw-balk li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;min-width:0}
.cw-balk li::before{content:'';position:absolute;top:13px;left:-50%;right:50%;height:2px;background:var(--line)}
.cw-balk li:first-child::before{display:none}
.cw-balk li.af::before,.cw-balk li.nu::before{background:var(--grn)}
.cw-balk button{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line2,var(--line));background:var(--panel);color:var(--tx3);font-size:12.5px;font-weight:700;cursor:pointer;display:grid;place-items:center}
.cw-balk li.af button{background:var(--grn);border-color:var(--grn);color:#fff}
.cw-balk li.nu button{border-color:var(--acc);background:var(--acc);color:var(--on-acc,#fff)}
.cw-balk span{font-size:11.5px;color:var(--tx3);text-align:center;line-height:1.25}
.cw-balk li.nu span{color:var(--tx);font-weight:600}
.cw-stapnr{font-size:12px;color:var(--tx3);font-weight:600;}
.cw-kop{font-size:19px;margin:2px 0 12px;font-weight:650}
.cw .hint{margin:8px 0 0}
.cw-groot{height:44px;padding:0 22px;font-size:14.5px}
.cw-link{display:flex;gap:8px;max-width:640px}
.cw-link .inp{font-family:ui-monospace,Menlo,monospace;font-size:12px;min-width:0}
.cw-doe{margin:0 0 14px;padding:0;list-style:none;counter-reset:cw}
.cw-doe li{counter-increment:cw;position:relative;padding:4px 0 4px 30px;font-size:13.5px;line-height:1.5}
.cw-doe li::before{content:counter(cw);position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--tx2)}
.cw-mock{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:0 0 14px;max-width:560px;background:var(--panel2);font-size:12px;user-select:none}
.cw-mbalk{display:flex;align-items:center;gap:5px;padding:7px 10px;border-bottom:1px solid var(--line);background:var(--panel)}
.cw-mbalk i{width:8px;height:8px;border-radius:50%;background:var(--line2,var(--line))}
.cw-mbalk span{margin-left:8px;color:var(--tx3);font-size:11px}
.cw-mlijf{display:grid;grid-template-columns:118px minmax(0,1fr)}
.cw-zij{display:flex;flex-direction:column;gap:2px;padding:10px 8px;border-right:1px solid var(--line)}
.cw-zij span{padding:5px 8px;border-radius:6px;color:var(--tx3)}
.cw-zij span.aan{background:var(--panel);color:var(--tx);font-weight:600;box-shadow:0 0 0 2px #d97757}
.cw-mhoofd{padding:12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0}
.cw-mknop{display:inline-block;padding:5px 10px;border-radius:7px;background:var(--panel);border:1px solid var(--line);font-weight:600;box-shadow:0 0 0 2px #d97757}
.cw-mknop.klein{align-self:flex-end;background:var(--acc);color:var(--on-acc,#fff);border-color:var(--acc)}
.cw-mdialoog{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:8px;display:flex;flex-direction:column;gap:6px}
.cw-mveld{display:flex;flex-direction:column;gap:2px;min-width:0}
.cw-mveld em{font-style:normal;font-size:10.5px;color:var(--tx3)}
.cw-mveld span{border:1px solid var(--line);border-radius:5px;padding:3px 6px;font-family:ui-monospace,Menlo,monospace;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-mrij{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:6px 0;border-bottom:1px solid var(--line)}
.cw-mschakel{width:28px;height:16px;border-radius:8px;background:var(--grn);position:relative;flex:0 0 28px;box-shadow:0 0 0 2px #d97757}
.cw-mschakel::after{content:'';position:absolute;right:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff}
.cw-mzips{display:flex;flex-wrap:wrap;gap:4px}
.cw-mzips span{font-size:10.5px;padding:2px 6px;border-radius:5px;background:var(--panel);border:1px solid var(--line);color:var(--tx2)}
.cw-skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:640px}
.cw-skill{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--tx);text-decoration:none}
.cw-skill:hover{border-color:var(--tx3)}
.cw-skill b{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:var(--on-acc,#fff);font-size:13px}
.cw-skill.af b{background:var(--grn);color:#fff}
.cw-skill span{font-weight:600;font-size:13px;min-width:0;overflow-wrap:anywhere}
.cw-skill em{display:block;font-style:normal;font-weight:400;font-size:11.5px;color:var(--tx3)}
.cw-zin{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;padding:10px 12px;border:1px dashed var(--line2,var(--line));border-radius:8px;background:var(--panel2);margin:0 0 12px;max-width:640px}
.cw-check{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:var(--r);margin:0 0 12px;max-width:640px}
.cw-check>b{flex:0 0 34px;height:34px;border-radius:50%;background:var(--grn);color:#fff;display:grid;place-items:center;font-size:17px}
.cw-check.ok{border-color:var(--grn);background:rgba(34,160,90,.07)}
.cw-check div{display:flex;flex-direction:column}
.cw-check span{font-size:12.5px;color:var(--tx2)}
.cw-draai{flex:0 0 26px;height:26px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--acc);animation:cwdraai 1s linear infinite}
@keyframes cwdraai{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cw-draai{animation:none}}
.cw-voet{display:flex;gap:8px;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.cw-voet span{flex:1}
@media (max-width:600px){
  .cw{padding:16px 14px}
  .cw-balk span{display:none}
  .cw-balk li.nu span{display:none}
  .cw-mlijf{grid-template-columns:1fr}
  .cw-zij{flex-direction:row;overflow:hidden;border-right:0;border-bottom:1px solid var(--line);padding:6px}
  .cw-zij span{white-space:nowrap;padding:4px 6px}
  .cw-skills{grid-template-columns:1fr}
  .cw-link{flex-direction:column}
  .cw .bar2 .btn{flex:1}
}
.cr-uitin select.inp,.cr-uitin input.inp:not([type=checkbox]){width:100%;max-width:none}
@media (max-width:600px){
  .cr-tabs{gap:16px}
  .cr-tabs button{font-size:13px}
  .cr-tabs .cr-mijn{display:none}
  .cr-tegels{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .cr-tegels button{padding:4px;gap:4px}
  .cr-tegels span{font-size:11.5px}
}
@media (max-width:600px){
  .cr-opdr .cr-kop{flex-wrap:wrap}
  .cr-opdr .cr-kop>div:not(.crea-leeg){flex:1 1 calc(100% - 70px)!important}
  .cr-opdr .cr-kop .crea-oordeel{margin-left:68px}
  .cr-galerij{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
}
/* Creatives: eigen productfoto's uploaden */
.cr-eigen{max-width:720px;margin-bottom:10px}
.cr-fotos{display:flex;flex-wrap:wrap;gap:8px}
.cr-foto{position:relative;width:84px;height:84px}
.cr-foto img{width:100%;height:100%;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.cr-foto button{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:var(--bg,#fff);color:inherit;font-size:15px;line-height:1;cursor:pointer}
.cr-fotoplus{position:relative;width:84px;height:84px;display:flex;align-items:center;justify-content:center;text-align:center;border:1.5px dashed var(--line);border-radius:8px;cursor:pointer;font-size:12.5px;padding:6px}
.cr-fotoplus:hover{border-color:currentColor}
.cr-fotoplus input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.cr-fotoplus.bezig{opacity:.6;pointer-events:none}
.cr-fotoplus:focus-within{outline:2px solid currentColor;outline-offset:2px}
/* Voorbeeld-upload (06-10): sleepfeedback op het eigen data-crvbdrop-vak (los van de algemene .cr-drop/.cr-stap-sleep,
   die ook de "Eigen foto's uploaden"-zone bedient en anders ook dit vak zou raken). */
[data-crvbdrop].over{outline:2px dashed var(--acc);outline-offset:4px;border-radius:var(--r)}
/* Chat-uploads (12-10): eigen sleepfeedback op het voetje van de chat (los van de Creatives-zone hierboven). */
[data-clcvbdrop].over{outline:2px dashed var(--acc);outline-offset:-2px}
/* Bewaking: snelstart en budget/leeftijd-filter */
.rgbudget{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;width:100%;margin-top:4px}
.rg-uitleg summary{cursor:pointer;font-size:13px;font-weight:600}
.rg-uitleg ol{margin:6px 0 0;padding-left:20px;line-height:1.55}
.rg-zelf > summary{list-style:none}
.rg-zelf > summary::-webkit-details-marker{display:none}
.rg-zelf > summary::before{content:'+ ';opacity:.6}
.rg-zelf[open] > summary::before{content:'– '}
.rg-zelf > .pcard{border:none;margin:0 !important;box-shadow:none}

/* ---------- Ads Uploader (beheerder) ---------- */
.upl{max-width:1100px}
.upl-kop{display:flex;align-items:flex-start;gap:12px;justify-content:space-between;margin-bottom:6px}
.upl-kop .hint{max-width:640px;margin-top:3px}
.upl-tabs{margin-bottom:14px;overflow-x:auto}
.upl-kaart{margin-bottom:14px;display:block}
.upl-kaart:hover{transform:none}
.upl-stapkop{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.upl-stapkop b{display:block;font-size:14px}
.upl-stapkop .hint{display:block}
.upl-nr{flex:0 0 24px;height:24px;border-radius:7px;background:var(--acc);color:var(--on-acc,#fff);display:grid;place-items:center;font-size:12px;font-weight:700}
.upl-nr:empty{display:none}
.upl-g2,.upl-g3,.upl-g4{display:grid;gap:0 12px}
.upl-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.upl-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.upl-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.upl-seg{flex-wrap:wrap;width:100%}
.upl-seg button{flex:1 1 160px;text-align:left;padding:7px 11px}
.upl-seg button em{display:block;font-style:normal;font-size:11px;color:var(--tx3);font-weight:400}
.upl-info{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:12.5px;line-height:1.55;margin:4px 0 12px}
.upl-tester{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.upl-tester:last-child{border-bottom:0}
@media (max-width:600px){.upl-tester{flex-direction:column}.upl-tester>div:last-child{text-align:left!important;max-width:none!important}}
.upl-vinken{display:flex;gap:8px;flex-wrap:wrap}
.upl-drop{display:flex;flex-direction:column;align-items:center;gap:3px;border:1.5px dashed var(--line2);border-radius:12px;padding:22px 14px;text-align:center;cursor:pointer;transition:.13s}
.upl-drop:hover,.upl-drop.over{border-color:var(--acc);background:var(--panel2)}
.upl-ads{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.upl-ad{border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--panel2);min-width:0}
.upl-adkop{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.upl-adkop .hint{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upl-vars{display:flex;gap:8px;flex-wrap:wrap}
.upl-var{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px}
.upl-var em{font-style:normal;font-size:10.5px;color:var(--tx3)}
.upl-th{position:relative;width:96px;height:96px;border-radius:8px;overflow:hidden;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;font-size:11px;color:var(--tx3)}
.upl-th.k{width:64px;height:64px}
.upl-th img{width:100%;height:100%;object-fit:cover;display:block}
.upl-th i{position:absolute;right:4px;bottom:3px;font-style:normal;font-size:10px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.upl-x{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--panel);border:1px solid var(--line);font-size:10px;color:var(--tx2)}
.upl-thumbknop{font-size:10.5px;color:var(--acc);cursor:pointer;text-decoration:underline}
.upl-uit{margin-top:10px}
.upl-uit summary{cursor:pointer;font-size:12.5px;color:var(--tx2)}
.upl-lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-top:8px}
.upl-libitem{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px;border:1px solid var(--line);border-radius:9px;background:var(--panel);min-width:0}
.upl-libitem span{font-size:10.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upl-libitem em{font-style:normal;font-size:10px;color:var(--tx3)}
.upl-libitem:hover{border-color:var(--acc)}
.upl-libgroot{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-top:12px}
.upl-libkaart{border:1px solid var(--line);border-radius:10px;padding:9px;display:flex;flex-direction:column;gap:4px;min-width:0}
.upl-libkaart .upl-th{width:100%;height:auto;aspect-ratio:1}
.upl-libkaart b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upl-sam{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--tx2);margin:12px 0 6px}
.upl-camp{border:1px solid var(--line);border-radius:10px;padding:11px;margin-top:10px}
.upl-camphead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.upl-set{border-left:2px solid var(--line2);padding:6px 0 2px 11px;margin-top:10px}
.upl-pad{display:flex;gap:11px;padding:10px 0;border-top:1px solid var(--line);margin-top:8px}
.upl-tekst{display:grid;gap:3px;margin-top:6px;font-size:12.5px;line-height:1.5}
.upl-tekst em{font-style:normal;color:var(--tx3);font-size:11px;margin-right:6px}
.upl-tekst div{white-space:pre-wrap;overflow-wrap:anywhere}
.upl-url{color:var(--tx2);overflow-wrap:anywhere}
.upl-voortgang{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:10px;background:var(--panel2)}
.upl-vkop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.upl-vrij{display:flex;gap:8px;align-items:baseline;padding:4px 0;border-top:1px solid var(--line);font-size:12.5px;flex-wrap:wrap}
.upl-vrij .l{flex:1 1 220px;min-width:0}
.upl-vfout{color:var(--red);font-size:12px;flex:1 1 100%;padding-left:26px}
.upl-st{flex:0 0 18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;font-size:11px;font-weight:700;background:var(--panel);border:1px solid var(--line);color:var(--tx3)}
.upl-st.ok{background:var(--grn);border-color:var(--grn);color:#fff}
.upl-st.fout{background:var(--red);border-color:var(--red);color:#fff}
.upl-st.bezig{border-color:var(--amb);color:var(--amb)}
.upl-live{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:10px}
.upl-postlijst{display:grid;gap:6px;margin-top:8px}
.upl-postrij{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:9px;cursor:pointer;flex-wrap:wrap}
.upl-postrij.on{border-color:var(--acc);background:var(--panel2)}
.upl-postrij b{display:block;font-size:13px}
.upl-bkop{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.upl-ids{display:grid;gap:4px;margin-top:8px;font-size:12.5px}
.upl-stappen{margin:8px 0 10px 18px;font-size:12.5px;line-height:1.6;color:var(--tx2)}
.upl-presetbalk .inp.s{max-width:230px}
@media (max-width:760px){
  .upl-g2,.upl-g3,.upl-g4{grid-template-columns:1fr}
  .upl-kop{flex-direction:column}
  .upl-ads{grid-template-columns:1fr}
  .upl-pad{flex-direction:column}
}
/* Ads Uploader ronde 2 (03-10): één scrollende pagina zoals Ads Uploader */
.upl-stap .upl-stapkop{align-items:center}
.upl-klaar{flex:0 0 auto;font-size:11.5px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--tx3);white-space:nowrap;max-width:46%;overflow:hidden;text-overflow:ellipsis}
.upl-klaar.ok{border-color:color-mix(in srgb,var(--grn) 45%,transparent);color:var(--grn);background:color-mix(in srgb,var(--grn) 9%,transparent)}
.upl-voortbalk{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.upl-voortlijn{flex:1 1 160px;height:6px;border-radius:9px;background:var(--panel2);overflow:hidden;border:1px solid var(--line)}
.upl-voortlijn i{display:block;height:100%;background:var(--acc);border-radius:9px;transition:width .25s}
.upl-gekozen{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.upl-gekozen b,.upl-accrij b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis}
.upl-acckop{font-size:12px;color:var(--tx3);margin:10px 0 4px}
.upl-acclijst{max-height:280px;overflow:auto;display:grid;gap:4px;margin-top:6px}
.upl-accrij{display:block;width:100%;text-align:left;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:inherit;font:inherit;cursor:pointer;min-width:0;margin-top:4px}
.upl-accrij:hover,.upl-accrij.on{border-color:var(--acc)}
.upl-accrij .hint{display:block}
.upl-methodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.upl-methode{display:flex;gap:9px;align-items:flex-start;padding:11px 12px;border:1.5px solid var(--line);border-radius:10px;cursor:pointer;min-width:0}
.upl-methode input{margin-top:3px;flex:0 0 auto}
.upl-methode b{font-size:13px}
.upl-methode .hint{display:block;margin-top:2px}
.upl-methode.on{border-color:var(--acc);background:var(--panel2)}
.upl-methode.uit{opacity:.55;cursor:default}
.upl-badge{font-style:normal;font-size:10.5px;font-weight:600;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--acc);color:var(--on-acc,#fff);white-space:nowrap}
.upl-kolbalk{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.upl-kols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.upl-kol{border:1px solid var(--line);border-radius:10px;padding:9px;display:flex;flex-direction:column;gap:7px;min-width:0;background:var(--panel)}
.upl-kolkop{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.upl-kolkop .chk{font-size:11.5px;padding:0}
.upl-kol .inp.s{width:100%}
.upl-kolbody{height:300px;overflow:auto;display:flex;flex-direction:column;gap:4px}
.upl-kolleeg{margin:auto;text-align:center}
.upl-kolrij{display:flex;align-items:center;gap:8px;text-align:left;width:100%;padding:7px 9px;border:1px solid transparent;border-radius:8px;background:transparent;color:inherit;font:inherit;cursor:pointer;min-width:0}
.upl-kolrij:hover{background:var(--panel2)}
.upl-kolrij.on{border-color:var(--acc);background:var(--panel2)}
.upl-kolrij b{display:block;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upl-kolrij .hint{display:block;font-size:11px}
.upl-kolrij img{width:34px;height:34px;border-radius:6px;object-fit:cover;flex:0 0 auto}
.upl-kolrij i{font-style:normal;color:var(--acc);font-weight:700}
.upl-kolvoet{font-size:11px}
.upl-bron{margin-top:12px;padding:12px;border:1.5px solid var(--acc);border-radius:10px;background:var(--panel2)}
.upl-bronkop b{display:block;font-size:13.5px;margin-top:2px;overflow-wrap:anywhere}
.upl-pijl{color:var(--tx3);font-weight:400;margin:0 3px}
.upl-bronraster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 14px;margin-top:10px;font-size:12.5px;line-height:1.45}
.upl-bronraster em{display:block;font-style:normal;font-size:11px;color:var(--tx3)}
.upl-presets{display:grid;gap:8px}
.upl-preset{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;flex-wrap:wrap}
.upl-preset.on{border-color:var(--acc);background:var(--panel2)}
.upl-preset b{display:block;font-size:13.5px}
.upl-preset .hint{display:block;overflow-wrap:anywhere}
.upl-presetknop{display:flex;gap:6px}
.upl-plh{display:flex;flex-wrap:wrap;gap:4px;margin:5px 0 2px}
.upl-plhk{font:inherit;font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--tx2);cursor:pointer}
.upl-plhk:hover{border-color:var(--acc);color:var(--acc)}
.upl-tpbalk{margin:0}
.upl-tpbalk .inp.s{max-width:260px}
.upl-enh{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 10px;margin-top:8px}
.upl-mediaboven{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:10px}
.upl-dropcr{background:transparent;color:inherit;font:inherit;width:100%}
.upl-creaties{margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:10px;display:grid;gap:8px}
.upl-creatie{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.upl-creatie b{display:block;font-size:13px}
.upl-creatie .hint{display:block}
.upl-crbeeld{display:flex;gap:4px}
.upl-crbeeld img,.upl-crbeeld .upl-th{width:44px;height:44px;border-radius:6px;object-fit:cover}
.upl-doelen{display:grid;gap:8px}
.upl-doel{display:grid;grid-template-columns:24px repeat(5,minmax(0,1fr)) auto;gap:8px;align-items:end;padding:10px;border:1px solid var(--line);border-radius:10px}
.upl-doel .upl-nr{align-self:center}
.upl-doel .f{margin:0}
.cr-galknoppen{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:860px){
  .upl-kols{grid-template-columns:1fr}
  .upl-kolbody{height:auto;max-height:230px}
  .upl-methodes,.upl-bronraster,.upl-mediaboven{grid-template-columns:1fr}
  .upl-doel{grid-template-columns:1fr}
  .upl-doel .upl-nr{display:none}
  .upl-klaar{max-width:40%}
}
/* Ads Uploader ronde 4 (03-10): kaarten zoals adsuploader.com, één accentkleur voor de hoofdknop en actieve keuzes */
.upl{--ua:#2f5d8a;--ua2:#264d73;--ua-zacht:rgba(47,93,138,.09);--ua-rand:rgba(47,93,138,.35);--uk:#fff;--uk-rand:#e2d8c6}
html[data-theme="dark"] .upl{--ua:#8fb3de;--ua2:#a9c5e6;--ua-zacht:rgba(143,179,222,.12);--ua-rand:rgba(143,179,222,.4);--uk:var(--panel);--uk-rand:var(--line2)}
.upl-flow{max-width:900px}
.upl-flow input[type=radio],.upl-flow input[type=checkbox],.upl-kies input[type=checkbox]{accent-color:var(--ua)}
.upl-kop .upl-koprechts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.upl-tourbtn{white-space:nowrap}
.upl-status{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--tx2);white-space:nowrap}
.upl-status i{width:7px;height:7px;border-radius:50%;background:var(--grn)}
.upl-status.let{color:var(--red)}
.upl-status.let i{background:var(--red)}
.upl-flow .upl-kaart{background:var(--uk);border:1px solid var(--uk-rand);border-radius:12px;padding:20px 22px;margin-bottom:14px;box-shadow:0 1px 2px rgba(20,20,20,.05),0 6px 18px rgba(20,20,20,.05)}
.upl-kkop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.upl-k h3{font-size:16px;font-weight:650;letter-spacing:-.2px;margin:0}
.upl-kkop .hint{margin-top:3px;max-width:640px}
.upl-sectie{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}
.upl-sectie.upl-eerste{border-top:0;margin-top:0;padding-top:0}
.upl-sectie h4,.upl-kies h4,.upl-enhkol h4{font-size:13.5px;font-weight:650;margin:0 0 10px}
.upl-lbl2{display:block;font-size:12px;font-weight:600;color:var(--tx3)}
.upl-fout{color:var(--red);font-size:12.5px}
.upl-vol{grid-column:1/-1;margin-top:10px}
/* velden: één raster, gelijke hoogte, label erboven */
.upl-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;margin:12px 0 4px}
.upl-raster.upl-r3{grid-template-columns:repeat(3,minmax(0,1fr))}
.upl-raster .upl-s2{grid-column:span 1}
.upl-f{display:flex;flex-direction:column;gap:5px;margin:0;min-width:0}
.upl-f>span{font-size:12.5px;font-weight:600;color:var(--tx2)}
.upl-f>span em{font-style:normal;font-weight:400;color:var(--tx3)}
.upl-flow .upl-f .inp,.upl-flow .upl-trij .inp,.upl-flow .upl-presetsel{width:100%;min-height:42px;border-radius:8px}
.upl-flow input.inp,.upl-flow select.inp{height:42px}
.upl-flow textarea.inp{min-height:84px;resize:vertical}
.upl-flow .inp{background:var(--uk)}
.upl-tvelden .upl-raster{margin:0}
.upl-flow .inp:focus{border-color:var(--ua);box-shadow:0 0 0 3px var(--ua-zacht);outline:none}
.upl-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.upl-chip{font:inherit;font-size:11.5px;padding:2px 9px;border-radius:6px;border:1px solid var(--ua-rand);background:var(--ua-zacht);color:var(--ua);cursor:pointer}
.upl-chip:hover{background:var(--ua);color:#fff}
.upl-smal{width:90px!important;flex:0 0 90px}
/* keuzes onder elkaar, actieve keuze in de accentkleur */
.upl-opties{display:grid;gap:8px}
.upl-opties.upl-rij2{grid-template-columns:repeat(2,minmax(0,1fr));margin:6px 0}
.upl-opt{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:transparent;flex-wrap:wrap}
.upl-opt:hover{border-color:var(--ua-rand)}
.upl-opt.on{border-color:var(--ua);background:var(--ua-zacht);box-shadow:inset 0 0 0 1px var(--ua)}
.upl-opt input{margin-top:3px;flex:0 0 auto}
.upl-opt>span{flex:1 1 240px;min-width:0}
.upl-opt b{font-size:13.5px;font-weight:600}
.upl-opt em{display:block;font-style:normal;font-size:12px;color:var(--tx3);margin-top:1px}
.upl-opt.uit{opacity:.5;cursor:default}
.upl-optextra{flex:1 1 260px;display:flex;align-items:center;gap:8px;min-width:0}
.upl-badge{display:inline-block;font-size:10.5px;font-weight:600;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--ua);color:#fff;vertical-align:1px}
.upl-presetknoppen{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 4px;padding:10px 12px;border-radius:10px;background:var(--panel2);border:1px solid var(--line)}
.upl-presetknoppen .upl-lbl2{margin-right:4px}
.upl-presetknoppen .btn[disabled]{opacity:.45;cursor:default}
.upl-gevaar{color:var(--red)}
.upl-kies{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.upl-kies .hint{margin:-4px 0 10px}
.upl-bronbox{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-top:14px;padding:13px 14px;border:1px solid var(--ua-rand);border-left:3px solid var(--ua);border-radius:10px;background:var(--ua-zacht)}
.upl-bronbox b{display:block;font-size:13.5px;margin:2px 0;overflow-wrap:anywhere}
.upl-bronbox .hint{display:block}
.upl-bronknop{display:flex;gap:12px;align-items:center}
.upl-pijl{color:var(--tx3);font-weight:400;margin:0 3px}
.upl-preview{font-size:14px;margin:0}
.upl-schakel{display:inline-flex;align-items:center;gap:9px;font-size:13px;cursor:pointer;margin:8px 18px 0 0;user-select:none}
.upl-schakel{position:relative}
.upl-schakel input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.upl-schakel i{position:relative;width:34px;height:20px;border-radius:20px;background:var(--line2);flex:0 0 34px;transition:.15s}
.upl-schakel i:after{content:'';position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.upl-schakel input:checked+i{background:var(--ua)}
.upl-schakel input:checked+i:after{left:17px}
.upl-schakel input:focus-visible+i{box-shadow:0 0 0 3px var(--ua-zacht)}
.upl-link{background:none;border:0;padding:0;font:inherit;font-size:12.5px;color:var(--ua);text-decoration:underline;text-decoration-color:var(--ua-rand);text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.upl-link:hover{text-decoration-color:currentColor}
.upl-link[disabled]{color:var(--tx3);cursor:default;text-decoration:none}
.upl-kvoet{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
/* account */
.upl-acckaart{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px}
.upl-acckaart h3{margin:0}
.upl-accrechts{display:flex;gap:8px;justify-content:flex-end;min-width:0}
.upl-ico{flex:0 0 44px;height:44px;border:1px solid var(--line2);border-radius:8px;background:var(--uk);color:var(--tx2);font-size:16px;cursor:pointer}
.upl-ico:hover{border-color:var(--ua);color:var(--ua)}
.upl-accwrap{position:relative;flex:0 1 380px;min-width:0}
.upl-kiezer{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:7px 12px;border:1px solid var(--line2);border-radius:8px;background:var(--uk);color:inherit;font:inherit;cursor:pointer;min-height:44px}
.upl-kiezer:hover{border-color:var(--ua)}
.upl-kiezer>span{flex:1;min-width:0}
.upl-kiezer b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upl-kiezer em{display:block;font-style:normal;font-size:11.5px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upl-kiezer i{font-style:normal;color:var(--tx2)}
.upl-pop{position:absolute;z-index:30;right:0;top:calc(100% + 6px);width:max(100%,360px);max-width:calc(100vw - 32px);background:var(--uk);border:1px solid var(--line2);border-radius:10px;padding:10px;box-shadow:var(--shadow)}
/* media */
.upl-dropwrap{position:relative}
.upl-mbron{position:absolute;left:12px;top:12px;display:flex;gap:6px;z-index:2}
.upl-mknop{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border:1px solid var(--line2);border-radius:8px;background:var(--uk);color:var(--tx);font:inherit;font-size:12.5px;cursor:pointer}
.upl-mknop i{font-style:normal;color:var(--ua)}
.upl-mknop:hover{border-color:var(--ua)}
.upl-flow .upl-drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:58px 14px 24px;border:1.5px dashed var(--line2);border-radius:12px;background:var(--panel2);text-align:center;cursor:pointer}
.upl-flow .upl-drop.klein{padding:56px 14px 16px}
.upl-flow .upl-drop:hover,.upl-flow .upl-drop.over{border-color:var(--ua);background:var(--ua-zacht)}
.upl-dropico{font-size:22px;color:var(--ua);line-height:1}
.upl-drop u{color:var(--ua);text-decoration-color:var(--ua-rand)}
.upl-mopties{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:0 4px}
.upl-tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px;margin-top:14px}
.upl-tegel{position:relative;min-width:0}
.upl-tegel .upl-th{width:100%;height:auto;aspect-ratio:1;border-radius:8px}
.upl-tegel .upl-x{top:6px;right:6px}
.upl-meer{position:absolute;left:6px;top:6px;font-size:11px;font-weight:600;padding:1px 6px;border-radius:6px;background:rgba(20,20,20,.7);color:#fff}
.upl-tegelnaam{font-size:12px;font-weight:600;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upl-tegelsub{font-size:11.5px;color:var(--tx3)}
.upl-mediavoet{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:10px}
.upl-mediavoet span{margin-right:auto}
.upl-flow .upl-info{margin:10px 0 0}
/* teksten */
.upl-tvelden{display:grid;gap:14px;margin-top:16px}
.upl-tlijst{display:grid;gap:8px}
.upl-tlbl{font-size:12.5px;font-weight:600;color:var(--tx2)}
.upl-trij{display:flex;gap:8px;align-items:flex-start}
.upl-trij .inp{flex:1;min-width:0}
.upl-trweg{flex:0 0 42px;height:42px;border:1px solid var(--line2);border-radius:8px;background:var(--uk);color:var(--tx3);cursor:pointer;font-size:13px}
.upl-trweg:hover{border-color:var(--red);color:var(--red)}
.upl-plus{justify-self:start;font:inherit;font-size:12.5px;font-weight:600;color:var(--ua);background:var(--ua-zacht);border:1px dashed var(--ua-rand);border-radius:8px;padding:6px 12px;cursor:pointer}
.upl-plus:hover{border-style:solid}
.upl-perad{display:grid;gap:10px}
.upl-peradrij{display:flex;gap:12px;align-items:flex-start}
.upl-peradrij .upl-raster{margin:0}
/* 12-10: campagnekaarten (eigen productlink/teksten per nieuwe campagne) */
.upl-campkaart{border:1px solid var(--line2);border-radius:10px;padding:12px 14px;margin-top:10px;background:var(--panel2)}
.upl-campkaart-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.upl-campkaart-kop b{font-size:13px;overflow-wrap:anywhere}
.upl-campkaart .upl-raster{margin:0}
/* 12-10 (vereenvoudigd): compact overzicht "welke creatives" in de campagnekaart, met een snelle link naar de verdeling. */
.upl-campkaart-creatives{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.upl-campkaart-thumbs{display:flex;gap:4px;flex-wrap:wrap}
.upl-campkaart-thumbs .upl-th.k{width:30px;height:30px}
.upl-campkaart-meer{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;background:var(--hover);font-size:11px;color:var(--tx2)}
/* verbeteringen */
.upl-enhkol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 20px;margin-top:14px}
.upl-enhkol .chk,.upl-enh .chk{display:flex;gap:8px;align-items:center;background:none;border:0;padding:3px 0;font-size:13px}
.upl-enh{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px 14px;margin-top:8px}
.upl-uit{margin-top:12px}
.upl-uit summary{cursor:pointer;font-size:12.5px;color:var(--tx2)}
.upl-tekstp{font-size:13px;line-height:1.6;color:var(--tx2);margin:0}
.upl-zone{font-size:12.5px;color:var(--tx2);margin:10px 0 0}
/* status + knop */
.upl-lanceer{margin:6px 0 10px}
.upl-statusbox{padding:14px 16px;border:1px solid var(--uk-rand);border-radius:10px;background:var(--panel2);font-size:13.5px;line-height:1.55}
.upl-statusbox > b:first-child{display:block;font-size:14px;margin-bottom:2px}
.upl-statusbox.klaar{background:var(--uk);border-color:var(--ua-rand)}
.upl-flow .upl-go{display:flex;width:100%;justify-content:center;margin-top:12px;min-height:52px;font-size:15.5px;font-weight:650;border-radius:10px;background:var(--ua);border-color:var(--ua);color:#fff}
.upl-flow .upl-go:hover{background:var(--ua2);border-color:var(--ua2)}
.upl-flow .upl-go[disabled]{opacity:.4;cursor:default;box-shadow:none}
.upl-onderknop{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.upl-tempo{text-align:center;margin-top:8px}
.upl-details{display:block;margin-top:12px}
.upl-details summary{cursor:pointer;font-size:12.5px;color:var(--tx2)}
.upl-voet{margin:4px 0 0}
.upl-kolkop .chk,.upl-flow .chk{background:none;border:0;box-shadow:none}
.upl-flow .upl-st{width:18px;flex:0 0 18px;padding:0;margin:0;font-size:11px;line-height:1;background:transparent;border-color:var(--line2);color:var(--tx3)}
.upl-flow .upl-st.ok{background:var(--ua-zacht);border-color:var(--ua-rand);color:var(--ua)}
.upl-flow .upl-voortgang{background:var(--uk)}
.upl-kolrij.on{border-color:var(--ua);background:var(--ua-zacht)}
.upl-kolrij i{color:var(--ua)}
.upl-i{position:relative;display:inline-grid;place-items:center;width:16px;height:16px;margin-left:4px;border-radius:50%;border:1px solid var(--ua-rand);color:var(--ua);font:600 10.5px/1 Georgia,serif;font-style:italic;cursor:help;vertical-align:1px;flex:0 0 16px}
.upl-i:hover:after,.upl-i:focus:after{content:attr(data-tip);position:absolute;z-index:50;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:min(260px,80vw);padding:8px 10px;border-radius:8px;background:#1f2329;color:#fff;font:400 12.5px/1.45 var(--font);font-style:normal;text-align:left;white-space:normal;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.upl-mopties .upl-i{margin:8px 14px 0 -10px}
.upl-zone .upl-i{margin-left:6px}
.upl-koppelkaart{margin:0 0 14px;padding:16px 18px;border:1px solid var(--ua-rand,#b9c9da);border-left:4px solid var(--ua,#2f5d8a);background:var(--panel)}
.upl-koppelkaart b{font-size:15px}
.upl-koppelkaart p{margin:6px 0 12px;font-size:13.5px;line-height:1.55;color:var(--tx2)}
.upl-geenpag{margin:12px 0 0;padding:12px 14px;border:1px solid var(--line);border-left:4px solid var(--amb);border-radius:8px;background:var(--panel)}
.upl-geenpag b{font-size:14px}
.upl-geenpag p{margin:4px 0 10px;font-size:13px;line-height:1.5;color:var(--tx2)}
.upl-koppelkaart.let{border-left-color:var(--amb)}
.upl-koppelkaart .btn.pri{background:var(--ua,#2f5d8a);border-color:var(--ua,#2f5d8a);color:#fff}
.upl-presetrij{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:13px}
/* rondleiding */
#upl-tour{position:fixed;inset:0;z-index:400;pointer-events:none}
.upl-spot{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px rgba(15,18,24,.55);outline:2px solid var(--ua,#2f5d8a);transition:all .2s;pointer-events:none}
.upl-spot.leeg{left:50%;top:50%;width:0;height:0}
.upl-tourkaart{position:fixed;width:380px;max-width:calc(100vw - 24px);background:var(--panel,#fff);color:var(--tx);border-radius:12px;padding:16px 18px;box-shadow:0 18px 50px rgba(0,0,0,.3);pointer-events:auto;font-size:13.5px;line-height:1.55}
.upl-tourkaart.midden{left:50%;top:50%;transform:translate(-50%,-50%)}
.upl-tourkaart.mob{left:12px!important;right:12px;bottom:12px!important;top:auto!important;width:auto;transform:none}
.upl-tourkaart b{display:block;font-size:15px;margin:2px 0 4px}
.upl-tourkaart p{margin:0}
.upl-tourkaart ul{margin:8px 0 0 18px;padding:0;color:var(--tx2)}
.upl-tourstap{font-size:11.5px;color:var(--tx3)}
.upl-tourknop{display:flex;align-items:center;gap:8px;margin-top:12px}
.upl-tourvol{background:#2f5d8a!important;border-color:#2f5d8a!important;color:#fff!important}
@media (max-width:760px){
  .upl-flow .upl-kaart{padding:16px 14px}
  .upl-raster,.upl-raster.upl-r3,.upl-opties.upl-rij2,.upl-enhkol{grid-template-columns:1fr}
  .upl-acckaart{grid-template-columns:1fr}
  .upl-accrechts{justify-content:stretch}
  .upl-accwrap{flex:1 1 auto}
  .upl-pop{left:0;right:auto;width:100%}
  .upl-tegels{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .upl-mbron{position:static;margin-bottom:8px;flex-wrap:wrap}
  .upl-flow .upl-drop,.upl-flow .upl-drop.klein{padding:20px 12px}
  .upl-mopties{justify-content:flex-start}
  .upl-bronbox{flex-direction:column}
  .upl-kop .upl-koprechts{justify-content:flex-start}
}
/* Claude automatisch */
.cr-auto{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 16px;margin-bottom:14px;border:1px dashed var(--line);border-radius:10px;font-size:13.5px}
.cr-auto > span{flex:1;min-width:240px}
.cr-auto.aan{border-style:solid;background:var(--panel2)}
/* Bewaking: nieuwe regel als stappenplan */
.rg-wiz .cw-balk{margin-bottom:12px}
.rg-kaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.rg-kaart{display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px;border:1.5px solid var(--line);border-radius:10px;background:transparent;color:inherit;cursor:pointer;font:inherit}
.rg-kaart b{font-size:14px}
.rg-kaart span{font-size:12.5px;opacity:.75;line-height:1.45}
.rg-kaart:hover{border-color:currentColor}
.rg-kaart.aan{border-color:var(--acc,currentColor);box-shadow:0 0 0 1px var(--acc,currentColor) inset}
.rg-velden{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:10px}
.rg-velden .f{flex:1;min-width:220px}
.rg-rij{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.rg-ladder{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.rg-punt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:13.5px}
.rg-samen{margin-top:12px;padding:12px 14px;border-radius:8px;background:var(--panel2);font-size:13.5px}
.rg-samen ul{margin:6px 0 0;padding-left:18px;line-height:1.6}
/* Creatives: batch-keuze */
.cr-tegels button.on{border-color:var(--acc,currentColor);box-shadow:0 0 0 2px var(--acc,currentColor) inset}
.cr-gekozenlijst{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.cr-gekozenlijst .cr-gekozen{margin:0;max-width:320px}

/* ---------- Research (herontwerp 29-09): beeld voorop, weinig tekst ---------- */
.rs2-tabs{display:grid;grid-template-columns:repeat(4,auto);width:max-content;max-width:100%;margin-bottom:12px}
@media(min-width:721px){.rs2-tabs:has(> :nth-child(5)){grid-template-columns:repeat(5,auto)}}
.rs2-tabs button{white-space:nowrap}
.rs2-n{font-size:11px;color:var(--tx3);margin-left:6px;font-weight:600}
.rs2-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;min-width:0}
.rs2-chip{padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--tx2);font-size:12.5px;font-weight:550;white-space:nowrap;transition:.13s}
.rs2-chip:hover{border-color:var(--line2);color:var(--tx)}
.rs2-chip span{color:var(--tx3);font-size:11px;margin-left:2px}
.rs2-chip.on{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.rs2-chip.on span{color:inherit;opacity:.7}
.rs2-filters{display:flex;gap:8px 12px;flex-wrap:wrap;align-items:flex-start;margin-bottom:6px}
.rs2-filters .rs2-chips{flex:1 1 auto}
.rs2-zoek{max-width:260px;flex:0 1 260px;margin-bottom:10px}
.rs2-grid{display:grid;gap:12px}
.rs2-g-store{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.rs2-g-ad{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.rs2-g-prod{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.rs2-g-bib{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));align-items:start}
.rs2-g-mini{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.rs2-store,.rs2-ad,.rs2-prod,.rs2-mini{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;transition:border-color .14s,transform .14s;min-width:0}
.rs2-store:hover,.rs2-ad:hover,.rs2-prod:hover,.rs2-mini:hover{border-color:var(--line2);transform:translateY(-1px)}
.rs2-store:focus-visible,.rs2-ad:focus-visible,.rs2-prod:focus-visible,.rs2-mini:focus-visible{outline:2px solid var(--tx2);outline-offset:2px}
.rs2-store{padding:14px;display:flex;flex-direction:column;gap:10px}
.rs2-sk{display:flex;align-items:center;gap:10px}
.rs2-rang{flex:0 0 26px;height:26px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--tx2)}
.rs2-snaam{flex:1;min-width:0}
.rs2-snaam b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs2-snaam small{display:block;font-size:11.5px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs2-score{display:flex;align-items:center;gap:8px}
.rs2-score b{font-size:13px;min-width:24px;text-align:right}
.rs2-sbalk{flex:1;height:6px;border-radius:4px;background:var(--line);overflow:hidden}
.rs2-sbalk i{display:block;height:100%;border-radius:4px;background:hsl(calc(var(--s) * 1.2) 55% 42%)}
.rs2-krit{display:flex;gap:5px;flex-wrap:wrap}
.rs2-cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.rs2-cijfers.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.rs2-cijfers div,.rs2-tegels div{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:6px 8px;min-width:0}
.rs2-cijfers b,.rs2-tegels b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs2-cijfers span,.rs2-tegels span{display:block;font-size:11px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs2-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.rs2-strip.leeg{display:block;font-size:12px;color:var(--tx3);padding:10px;border:1px dashed var(--line);border-radius:9px;text-align:center}
.rs2-th{position:relative;display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--panel2);border:1px solid var(--line)}
.rs2-th em{position:absolute;left:4px;bottom:4px;font-style:normal;font-size:10.5px;font-weight:700;background:rgba(0,0,0,.62);color:#fff;padding:1px 5px;border-radius:5px}
.rs2-img{width:100%;height:100%;object-fit:cover;display:block}
.rs2-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--tx3);background:var(--panel2)}
.rs2-ph svg,.rs2-fmt svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rs2-ph small{font-size:10.5px}
.rs2-th .rs2-ph svg{width:18px;height:18px}
.rs2-th .rs2-ph small{display:none}
.rs2-niche{font-size:12px;color:var(--tx2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.rs2-ad,.rs2-prod{display:flex;flex-direction:column;overflow:hidden}
.rs2-media{position:relative;aspect-ratio:1;background:var(--panel2);border-bottom:1px solid var(--line);overflow:hidden}
.rs2-media.pr{aspect-ratio:4/5}
.rs2-badges{position:absolute;left:6px;top:6px;right:36px;display:flex;gap:4px;flex-wrap:wrap}
.rs2-badges b{font-size:11px;font-weight:700;background:rgba(0,0,0,.66);color:#fff;padding:2px 6px;border-radius:6px}
.rs2-badges b.uit{background:var(--red)}
.rs2-fmt{position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:6px;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center}
.rs2-fmt svg{width:15px;height:15px}
.rs2-adtxt,.rs2-ptxt{padding:9px 11px 11px;display:flex;flex-direction:column;gap:3px;min-width:0}
.rs2-adtxt b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs2-adtxt p{font-size:12px;color:var(--tx2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.rs2-adtxt small{font-size:11px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs2-bsl{position:absolute;left:6px;top:6px;background:var(--panel)!important;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.rs2-ptxt b{font-size:12.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rs2-prijs{font-size:14px;font-weight:700}
.rs2-prijs em{font-style:normal;color:var(--grn);font-size:12px;font-weight:650}
.rs2-pmeta{font-size:11.5px;color:var(--tx3)}
.rs2-tr{white-space:nowrap}.rs2-tr.op{color:var(--grn);font-weight:650}.rs2-tr.neer{color:var(--red);font-weight:650}
.rs2-tel{font-size:12.5px;color:var(--tx2);margin:0 0 10px}
.rs2-meer{display:flex;justify-content:center;margin:16px 0 4px}
.rs2-leeg{padding:28px 16px;text-align:center;color:var(--tx3);border:1px dashed var(--line);border-radius:var(--r)}
.rs2-sectie{font-size:12px;color:var(--tx3);font-weight:700;margin:2px 0 8px}
.rs2-trends{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin-bottom:14px}
.rs2-trend{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;align-items:center;gap:8px;min-width:0;font-size:12px}
.rs2-trend div{flex:1;min-width:0}
.rs2-trend b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs2-trend small{font-size:11px;color:var(--tx3)}
.rs2-trend svg{width:56px;height:20px;flex:0 0 56px;fill:none;stroke:var(--tx3);stroke-width:1.5}
.rs2-bib{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;min-width:0}
.rs2-bib summary{cursor:pointer;list-style:none}
.rs2-bib summary::-webkit-details-marker{display:none}
.rs2-bibkop{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.rs2-bibkop b{font-size:13.5px;line-height:1.35}
.rs2-bibkort{font-size:12.5px;color:var(--tx2);margin:5px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rs2-bib[open] .rs2-bibkort{display:none}
.rs2-bib .md{font-size:13px;margin-top:8px;overflow-wrap:anywhere}
.rs2-bibvoet{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.rs2-modal{max-width:940px}
.rs2-mgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px;align-items:start}
.rs2-mmedia{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--panel2);aspect-ratio:1;position:sticky;top:0}
.rs2-mmedia.pr{aspect-ratio:4/5}
.rs2-mmedia .rs2-img{object-fit:contain;background:#000}
.rs2-vid{width:100%;height:100%;display:block;background:#000;object-fit:contain;max-height:70vh}
.rs2-vidweg{width:100%;height:100%;display:flex;flex-direction:column}
.rs2-vidweg .hint{margin:6px 8px}
.rs2-mmedia.pr .rs2-img{object-fit:cover;background:none}
.rs2-minfo,.rs2-sdet{display:flex;flex-direction:column;gap:12px;min-width:0}
.rs2-tegels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.rs2-veld>span{display:block;font-size:12px;color:var(--tx3);font-weight:700;margin-bottom:3px}
.rs2-veld b{font-size:14px}
.rs2-veld p{margin:0;font-size:13px;color:var(--tx2)}
.rs2-lang{white-space:pre-line;font-size:13px;line-height:1.55;max-height:320px;overflow:auto;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:10px 12px;overflow-wrap:anywhere}
.rs2-bron{font-size:12.5px;color:var(--tx2);overflow-wrap:anywhere}
.rs2-bron a,.rs2-bsrij a{color:var(--tx);text-decoration:underline;text-underline-offset:2px}
.rs2-knoppen{margin:0}
.rs2-cc{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--panel2)}
.rs2-ccscore{display:flex;align-items:center;gap:10px}
.rs2-ccscore b{font-size:22px}
.rs2-cc ol{margin:8px 0 0 18px;font-size:12.5px}
.rs2-sdkop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rs2-sdkop .rs2-score{flex:1 1 180px}
.rs2-kritlijst{display:flex;flex-direction:column;gap:6px}
.rs2-kritlijst div{display:flex;gap:8px;align-items:baseline;font-size:12.5px;color:var(--tx2);min-width:0}
.rs2-kritlijst div>span:last-child{min-width:0;overflow-wrap:anywhere}
.rs2-notitie summary{cursor:pointer;font-size:12.5px;font-weight:600}
.rs2-notitie p{font-size:12.5px;color:var(--tx2);margin:6px 0 0;overflow-wrap:anywhere}
.rs2-h3{font-size:13px;font-weight:700;margin:4px 0 -2px}
.rs2-h3 span{color:var(--tx3);font-weight:600;margin-left:4px}
.rs2-mini{overflow:hidden}
.rs2-mini small{display:block;padding:5px 7px;font-size:11px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs2-bs{display:flex;flex-direction:column;gap:6px}
.rs2-bsrij{display:flex;align-items:center;gap:10px;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);min-width:0}
.rs2-bsrij .rs2-th{flex:0 0 44px;width:44px}
.rs2-bsrij div{flex:1;min-width:0}
.rs2-bsrij b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs2-bsrij small{font-size:11.5px;color:var(--tx3)}
.rs2-terug{margin-bottom:10px}
/* Research 30-09: alle 12 markten, trends 5 jaar + 2 maanden, vroeg bij de trend, bibliotheek in vaste opbouw, EU-bereik */
@media(min-width:721px){.rs2-tabs:has(> :nth-child(6)){grid-template-columns:repeat(6,auto)}.rs2-tabs:has(> :nth-child(7)){grid-template-columns:repeat(7,auto)}}
.rs2-chip.nul{opacity:.55}
.rs2-chip.nul.on{opacity:1}
.rs2-link{background:none;border:0;padding:0 0 0 6px;color:var(--tx2);font:inherit;font-size:11px;text-transform:none;letter-spacing:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.rs2-vroeg{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;margin:0 0 12px}
.rs2-vroeg summary{cursor:pointer;display:flex;gap:4px 10px;align-items:baseline;flex-wrap:wrap;list-style:none}
.rs2-vroeg summary::-webkit-details-marker{display:none}
.rs2-vroeg summary b{font-size:14px}
.rs2-vroeg summary b::before{content:'▸';display:inline-block;margin-right:6px;color:var(--tx3);transition:transform .15s}
.rs2-vroeg[open] summary b::before{transform:rotate(90deg)}
.rs2-vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:10px}
.rs2-vgrid.rs2-vgrid1{grid-template-columns:minmax(0,1fr)}
/* Meta-waarschuwingen voor de student (D2/D3/D5) en de aandachtlijst voor de beheerder */
.mw-balk{display:grid;gap:8px;margin:0 0 14px}
.pcard .mw-balk{margin:12px 0 0}
.warn.mw-rij{display:flex;align-items:center;gap:12px;margin:0}
.mw-rij .mw-tekst{flex:1;min-width:0}
.mw-rij .mw-tekst b{display:block;margin-bottom:2px}
.mw-rij .btn{flex:0 0 auto}
.warn.mw-hoog{border-color:rgba(180,35,24,.4);background:rgba(180,35,24,.07)}
/* Herstelronde 30-09: 'hoog' en 'midden' ook in het lichte thema duidelijk verschillend (html[data-theme=light] .warn won eerst):
   rode rand links en een rode kop. */
.warn.mw-hoog,html[data-theme="light"] .warn.mw-hoog{border-left:4px solid var(--rd)}
html[data-theme="light"] .warn.mw-hoog{background:#fdf0ee;border-color:#efc2bc;border-left-color:var(--rd);color:#7a2a20}
.warn.mw-hoog .mw-tekst b{color:var(--rd)}
.crea-verloop{margin-top:4px;font-size:11.5px;line-height:1.45;overflow-wrap:anywhere}
@media (max-width:640px){.warn.mw-rij{flex-direction:column;align-items:stretch}.warn.mw-rij .btn{align-self:flex-start}}
.kop-aandacht-rij{padding:8px 0;border-top:1px solid var(--line)}
.kop-aandacht-rij:first-of-type{border-top:0}
.kop-aandacht-w{display:flex;gap:8px;align-items:baseline;margin-top:4px;min-width:0}
.kop-aandacht-w .chip{flex:0 0 auto}
@media (max-width:640px){.kop-aandacht-w{flex-direction:column;align-items:flex-start;gap:3px}}
.rs2-vkol{min-width:0;display:flex;flex-direction:column;gap:6px}
.rs2-vrij{display:flex;align-items:center;gap:8px;min-width:0;font-size:12px;padding:5px 6px;border-radius:9px;background:var(--panel2);border:1px solid var(--line)}
.rs2-vrij[role=button]{cursor:pointer}
.rs2-vrij .rs2-th{flex:0 0 34px;width:34px}
.rs2-vrij div{flex:1;min-width:0}
.rs2-vrij b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs2-vrij small{display:block;font-size:11px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs2-vrij svg{width:48px;height:18px;flex:0 0 48px;fill:none;stroke:var(--tx3);stroke-width:1.5}
.rs2-g-trend{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.rs2-tkaart{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.rs2-tkop{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.rs2-tkop div{min-width:0}
.rs2-tkop b{display:block;font-size:13.5px;overflow-wrap:anywhere}
.rs2-tkop small{font-size:11.5px;color:var(--tx3)}
.rs2-tgraf span{display:block;font-size:11px;color:var(--tx3);margin-bottom:2px}
.rs2-tgraf em{font-size:11.5px;color:var(--tx3)}
.rs2-tgraf svg{width:100%;height:34px;display:block;fill:none;stroke:var(--tx2);stroke-width:1.4;vector-effect:non-scaling-stroke}
.rs2-tgraf svg polyline{vector-effect:non-scaling-stroke}
.rs2-jaren{display:flex;gap:4px;flex-wrap:wrap}
.rs2-jaren span{font-size:11px;padding:2px 6px;border-radius:6px;background:var(--panel2);border:1px solid var(--line);color:var(--tx2)}
.rs2-jaren em{font-style:normal;color:var(--tx3);margin-right:3px}
.rs2-bibcijf{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.rs2-bibcijf span{font-size:11px;padding:2px 7px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);color:var(--tx2)}
.rs2-bib[open] summary .rs2-bibcijf{display:none}
.rs2-bibdelen{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.rs2-bibdeel>span{display:block;font-size:12px;color:var(--tx3);font-weight:700;margin-bottom:3px}
.rs2-bibdeel p{margin:0;font-size:13px;line-height:1.5;color:var(--tx);overflow-wrap:anywhere}
.rs2-bibdeel p.hint{color:var(--tx3)}
.rs2-biblijst{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.rs2-biblijst>div{font-size:12.5px;padding:6px 8px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);overflow-wrap:anywhere}
.rs2-biblijst small{display:block;color:var(--tx3);margin-top:2px}
.rs2-biblijst a{color:var(--tx);text-decoration:underline;text-underline-offset:2px}
.rs2-uitleg{display:block;font-size:11.5px;color:var(--tx3);margin-top:2px}
.rs2-bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:6px}
.rs2-bgrid small{display:block;font-size:11px;color:var(--tx3);margin-bottom:2px}
.rs2-bbalk{display:grid;grid-template-columns:44px 1fr 34px;align-items:center;gap:6px;font-size:11.5px;color:var(--tx2)}
.rs2-bbalk i{height:6px;border-radius:4px;background:var(--line);overflow:hidden}
.rs2-bbalk b{display:block;height:100%;background:var(--tx2);border-radius:4px}
.rs2-bbalk em{font-style:normal;text-align:right}
@media(max-width:720px){
  .rs2-vgrid,.rs2-bgrid{grid-template-columns:minmax(0,1fr)}
  .rs2-g-trend{grid-template-columns:minmax(0,1fr)}
  .rs2-vroeg{padding:10px 12px}
}
/* Research 30-09 (2): straatje (R3), trends nu/piek, tegels met tekst, research-database (beheerder) */
.rs2-cijfers div.tx b,.rs2-tegels div.tx b{font-size:12.5px;font-weight:600;color:var(--tx2);line-height:18px}
.rs2-tegels b small{font-size:11px;font-weight:500;color:var(--tx3)}
.rs2-straatje{margin:0 0 8px}
.rs2-chip.st-twijfel:not(.on){border-color:color-mix(in srgb,var(--amb) 45%,var(--line))}
.rs2-chip.st-niet:not(.on){border-color:color-mix(in srgb,var(--red) 40%,var(--line))}
.rs2-badges b.st{background:color-mix(in srgb,var(--amb) 85%,#000)}
.rs2-badges b.st-niet{background:color-mix(in srgb,var(--red) 85%,#000)}
.rs2-badges b.st-techecken{background:rgba(40,40,40,.8)}
.rs2-tnu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.rs2-tnu span{font-size:12px;color:var(--tx2);background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:5px 8px;min-width:0}
.rs2-tnu em{display:block;font-style:normal;font-size:12px;color:var(--tx3)}
.rs2-tnu b{font-size:13px;color:var(--tx)}
.rs2-dbf{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.rs2-dbf .inp{width:auto;flex:0 1 190px;min-width:0}
.rs2-dbf input.inp{flex:1 1 180px}
.rs2-db{position:relative;transition:opacity .15s}
.rs2-db.laden{opacity:.55;pointer-events:none}
.rs2-dbbezig{position:absolute;top:6px;right:8px;font-size:12px;color:var(--tx2);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px 10px;z-index:2}
.rs2-dbkaarten{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0 0 12px}
.rs2-dbk{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;min-width:0}
.rs2-dbk b{display:block;font-size:19px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs2-dbk span{display:block;font-size:11.5px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs2-dbwat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;margin:0 0 12px}
.rs2-dbwat ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.rs2-dbwat li{font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.rs2-dbexport{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 14px}
.rs2-dbtot{flex:1 1 100%;font-size:11.5px}
.rs2-dbgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rs2-dbsec{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;min-width:0}
.rs2-dbkop{display:flex;flex-direction:column;gap:1px;margin-bottom:6px}
.rs2-dbkop b{font-size:14px}
.rs2-dbkop .hint{font-size:11.5px}
.rs2-dbt{display:flex;flex-direction:column}
.rs2-dbr{display:grid;gap:8px;align-items:center;padding:6px 4px;border-top:1px solid var(--line);font-size:12.5px;min-width:0}
.rs2-dbr>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs2-dbr>span:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.rs2-dbr.kop{border-top:0;font-size:12px;color:var(--tx3);font-weight:700;padding-top:0}
.rs2-dbr.klik{cursor:pointer;border-radius:8px}
.rs2-dbr.klik:hover{background:var(--hover)}
.rs2-dbnaam{display:flex;align-items:center;gap:8px;min-width:0}
.rs2-dbnaam .rs2-th{flex:0 0 34px;width:34px}
.rs2-dbnaam>div{min-width:0}
.rs2-dbnaam b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs2-dbnaam small{display:block;font-size:11px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1100px){.rs2-dbkaarten{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:720px){
  .rs2-dbkaarten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rs2-dbgrid{grid-template-columns:minmax(0,1fr)}
  .rs2-dbf .inp,.rs2-dbf input.inp{flex:1 1 calc(50% - 4px)}
  .rs2-dbr{grid-template-columns:minmax(0,1fr) !important;gap:2px 10px;display:flex;flex-wrap:wrap}
  .rs2-dbr>span:first-child{flex:1 1 100%}
  .rs2-dbr>span:not(:first-child){text-align:left;font-size:11.5px;color:var(--tx2)}
  .rs2-dbr>span[data-l]::before{content:attr(data-l) ' ';color:var(--tx3)}
  .rs2-dbr.kop{display:none}
}
@media(max-width:720px){
  .rs2-tabs{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .rs2-filters{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0}
  .rs2-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .rs2-chips::-webkit-scrollbar{display:none}
  .rs2-zoek{max-width:none;flex:1 1 auto}
  .rs2-g-ad,.rs2-g-prod{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .rs2-g-store,.rs2-g-bib{grid-template-columns:minmax(0,1fr)}
  .rs2-mgrid{grid-template-columns:minmax(0,1fr)}
  .rs2-mmedia{position:static;max-height:55vh}
  .rs2-tegels,.rs2-cijfers.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rs2-ovl{padding:10px 8px}
  .rs2-modal .mbody{padding:14px}
}
/* App op je telefoon (PWA) */
.app-kaart{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:16px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.app-ikoon{flex:0 0 40px;height:40px;border-radius:10px;background:#141414;color:#f3efe6;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;letter-spacing:.5px}
.app-tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13.5px}
.app-tekst span{color:var(--tx2);font-size:12.5px;line-height:1.45}
@media (display-mode: standalone){ body{padding-top:env(safe-area-inset-top)} }

/* =====================================================================
   MOBIELE APP (tot en met 860px) — 29-09-2026
   Op een telefoon werkt de hub als een app: geen zijbalk maar een vaste
   onderbalk met labels, een Meer-scherm met alle andere onderdelen, een
   compacte kopbalk en een zoekscherm. Alles hieronder staat binnen één
   media-query (plus de regels die de nieuwe onderdelen op de desktop
   verbergen), zodat de desktop precies blijft zoals hij was.
   Maten: tikdoelen minstens 44px, tekst minstens 15px, invoervelden 16px
   (anders zoomt iOS in bij elke tik in een veld).
   ===================================================================== */
/* Telefoon liggend: niets onder de inkeping. Op een computer is env() 0, dus daar verandert niets. */
#app,#portaal{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
#tabbar,#meer,#mzoek,.mkeuze,.mkopacties,.pmkop,.pmmeekijk,.mchips,.mlijst,.mterug,.ib-mchips,.ib-terug,.malleen,.mdacties,.setupbalk .sbkort,.stroas2{display:none}
/* Agenda: "Je agenda blijft privé" was lichtgroen op lichtgroen in het lichte thema */
html:not([data-theme="dark"]) .agprive{color:var(--grn)!important}

/* Zelfde regel als MOB_MQ in app.js: tot 860px, en op een aanraakscherm ook
   tot 1023px (telefoon liggend, kleine tablet) of bij een laag scherm. */
@media (max-width:860px), (max-width:1023px) and (pointer:coarse), (max-height:500px) and (pointer:coarse){
  :root{--kop:56px;--tbh:calc(64px + env(safe-area-inset-bottom))}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{font-size:15px;padding-top:0!important;-webkit-tap-highlight-color:transparent}
  ::-webkit-scrollbar{width:0;height:0}

  /* ---------- app-shell beheer: geen zijbalk, compacte kop ---------- */
  #side{display:none!important}
  #app{width:100%}
  #main{width:100%;min-width:0}
  #top{height:auto;flex:0 0 auto;min-height:calc(var(--kop) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 6px 0 16px;gap:2px;position:relative;z-index:20}
  #top h1{flex:1 1 auto;min-width:0;font-size:21px!important;line-height:var(--kop);height:var(--kop);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #top .sub,#top .search,#top #add{display:none!important}
  .mkopacties{display:flex;align-items:center;flex:0 0 auto}
  .mkopknop{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:var(--tx);flex:0 0 44px}
  .mkopknop svg{width:23px;height:23px}
  .mkopknop:active{background:var(--hover)}
  .mkopknop .av{width:32px!important;height:32px!important;flex:0 0 32px!important;border-radius:50%}
  #view{padding:14px 16px calc(var(--tbh) + 28px);overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}

  /* ---------- onderbalk ---------- */
  body.mapp #tabbar{display:grid}
  #tabbar{position:fixed;left:0;right:0;bottom:0;z-index:58;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
    background:var(--zij);color:var(--zijtx);padding:4px calc(4px + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(4px + env(safe-area-inset-left));border-top:1px solid #000;
    box-shadow:0 -8px 24px rgba(20,20,20,.14)}
  .tbk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:5px 1px 6px;
    color:rgba(242,244,247,.66);font-size:11.5px;font-weight:500;letter-spacing:0;min-width:0;border-radius:12px}
  .tbk .tbico{position:relative;display:grid;place-items:center;width:54px;height:30px;border-radius:15px;transition:background .15s}
  .tbk svg{width:23px;height:23px;stroke-width:1.7}
  .tbk .tblab{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.15;font-size:12px}
  .tbk.on{color:#fff}
  .tbk.on .tblab{font-weight:650}
  .tbk.on .tbico{background:rgba(242,244,247,.17)}
  .tbk:active .tbico{background:rgba(242,244,247,.1)}
  .tbbadge{position:absolute;top:-4px;right:4px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:#e0a33a;color:#1a1204;
    font:700 11px/19px var(--font);text-align:center;box-shadow:0 0 0 2px var(--zij)}
  /* wat onderaan vastzit, schuift boven de onderbalk */
  body.mapp #toast{bottom:calc(var(--tbh) + 14px);max-width:calc(100vw - 32px);text-align:center;font-size:14.5px}
  body.mapp #nieuwbalk{bottom:calc(var(--tbh) + 12px)!important;max-width:calc(100vw - 24px)}

  /* ---------- Meer-scherm ---------- */
  body.mapp.mmeer #meer{display:block}
  #meer{position:fixed;inset:0;z-index:57;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    padding:0 env(safe-area-inset-right) calc(var(--tbh) + 24px) env(safe-area-inset-left)}
  .mmkop{position:sticky;top:0;z-index:2;background:var(--bg);border-bottom:1px solid var(--line);
    padding:env(safe-area-inset-top) 16px 0;min-height:calc(var(--kop) + env(safe-area-inset-top));display:flex;align-items:center;gap:10px}
  .mmkop h1{font:500 21px/var(--kop) var(--kopfont);letter-spacing:-.015em;margin:0;flex:0 0 auto}
  .mmkop .hint{flex:1;min-width:0;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
  .mmgroep{padding:0 16px;margin-top:20px}
  .mmgroep h2,.mzkopje{font:600 12px/1.3 var(--font);color:var(--tx3);padding:0 4px 8px;margin:0}
  .mmlijst{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .mrij{display:flex;align-items:center;gap:13px;width:100%;min-height:56px;padding:8px 14px;text-align:left;font-size:16px;color:var(--tx);
    border-top:1px solid var(--line);background:none}
  .mrij:first-child{border-top:0}
  .mrij:active{background:var(--hover)}
  .mrico{width:34px;height:34px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);display:grid;place-items:center;flex:0 0 34px;color:var(--tx)}
  .mrico svg{width:19px;height:19px}
  .mrico .av{width:34px!important;height:34px!important;flex:0 0 34px!important;border-radius:10px;font-size:12px}
  .mrl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mrl b{display:block;font-weight:550;overflow:hidden;text-overflow:ellipsis}
  .mrl small{display:block;font-size:13px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis}
  .mrn{font-size:13px;color:var(--tx2);background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:1px 9px;flex:0 0 auto}
  .mrn.let{color:var(--amb);border-color:rgba(168,104,15,.35)}
  .mrchev{color:var(--tx3);font-size:24px;line-height:1;flex:0 0 auto;margin-left:2px}
  .mrij.rood{color:var(--red)}
  .mrij.rood .mrico{color:var(--red)}
  .mmversie{text-align:center;color:var(--tx3);font-size:12px;margin:22px 0 0}

  /* ---------- zoekscherm ---------- */
  body.mapp.mzoekt #mzoek{display:flex}
  #mzoek{position:fixed;inset:0;z-index:59;background:var(--bg);flex-direction:column;padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left)}
  .mzkop{display:flex;align-items:center;gap:6px;padding:calc(env(safe-area-inset-top) + 6px) 8px 8px 16px;border-bottom:1px solid var(--line);background:var(--bg)}
  .mzveld{flex:1;position:relative;display:block;min-width:0}
  .mzveld .mzico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--tx3);display:grid}
  .mzveld .mzico svg{width:19px;height:19px}
  .mzveld input{width:100%;height:44px;font-size:16px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);padding:0 12px 0 40px;outline:none;color:var(--tx)}
  .mzveld input:focus{border-color:var(--acc)}
  .mzsluit{height:44px;padding:0 10px;font-size:16px;color:var(--tx);flex:0 0 auto}
  #mzuit{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 16px calc(24px + env(safe-area-inset-bottom))}
  #mzuit .mmlijst{margin-bottom:18px}
  .mzleeg{color:var(--tx3);text-align:center;padding:40px 10px;font-size:15px}

  /* ---------- keuzelijstje (bottom sheet) ---------- */
  .mkeuze{display:flex;position:fixed;inset:0;z-index:70;background:rgba(10,10,10,.45);align-items:flex-end}
  .mkeuzevel{width:100%;background:var(--panel);border-radius:18px 18px 0 0;padding:6px 16px calc(14px + env(safe-area-inset-bottom));animation:msheet .22s ease}
  .mkeuzevel > b{display:block;font-size:13px;color:var(--tx3);padding:10px 4px 6px}
  .mkeuzevel .mrij{padding:8px 4px}
  .mgreep{width:40px;height:5px;border-radius:3px;background:var(--line2);margin:4px auto 4px}
  @keyframes msheet{from{transform:translateY(40px);opacity:.4}}

  /* ---------- chips: onderdelen van één tab, en alle tabbalken ---------- */
  .mchips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    padding:10px 16px;margin:-14px -16px 14px;position:sticky;top:-14px;z-index:6;background:var(--bg);border-bottom:1px solid var(--line)}
  .mchips::-webkit-scrollbar{display:none}
  .phead .mchips{margin:0;position:static;top:auto;border-bottom:0;border-top:1px solid var(--line);padding:8px 16px 10px}
  .mchip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:19px;font-size:14.5px;font-weight:500;
    background:var(--panel);border:1px solid var(--line2);color:var(--tx2);white-space:nowrap}
  .mchip.on{background:var(--acc);border-color:var(--acc);color:var(--on-acc);font-weight:600}
  .mchip b{font-size:12px;font-weight:600;background:rgba(20,20,20,.08);border-radius:10px;padding:0 7px;line-height:19px;color:inherit}
  .mchip.on b{background:rgba(246,241,231,.22)}

  .seg,.tabbalk,.subtabs,.dtabs,.anx-tabs,.upl-tabs,.ckbar,.aos-logtabs{flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;max-width:100%;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
  .seg::-webkit-scrollbar,.tabbalk::-webkit-scrollbar,.subtabs::-webkit-scrollbar,.dtabs::-webkit-scrollbar,.anx-tabs::-webkit-scrollbar,
  .upl-tabs::-webkit-scrollbar,.ckbar::-webkit-scrollbar,.aos-logtabs::-webkit-scrollbar{display:none}
  .seg{display:flex;width:max-content;padding:3px 26px 3px 3px}
  .seg button,.anx-tabs button,.aos-logtabs button{flex:0 0 auto;white-space:nowrap;min-height:38px;padding:0 13px;font-size:14px}
  .tabbalk,.subtabs,.dtabs,.ckbar{padding-right:26px;gap:18px}
  .tabbalk button,.subtabs button,.dtabs button,.cktab{flex:0 0 auto;white-space:nowrap;min-height:44px;font-size:14.5px}
  .dtabs{gap:4px}
  .anx-tabs{padding-right:26px}
  /* 13-10 (layout-controle, Gedrag-pagina): 8 periodeknoppen (Vandaag/Gisteren/7 d/30 d/90 d/Deze maand/Vorige
     maand/Zelf kiezen) zijn meer dan andere .seg's in de hub — hier overklappen i.p.v. de nowrap+scroll hierboven,
     zelfde brede breakpoint zodat het ook bij coarse-pointer/tablet-achtige breedtes al klapt. */
  .gd-periode-seg{flex-wrap:wrap!important;overflow-x:visible!important;-webkit-mask-image:none!important;mask-image:none!important;width:100%!important;max-width:100%!important;padding-right:3px}
  .gd-periode-seg button{flex:0 0 auto}

  /* ---------- tekst breekt op woorden, niet per letter ---------- */
  .card,.pcard,.kpi,.pay{overflow-wrap:break-word!important}
  .pay{flex-wrap:wrap;row-gap:10px;align-items:flex-start;padding:12px 12px}
  .pay > div[style*="flex:1"]{flex:1 1 calc(100% - 64px)!important;min-width:0}
  .pay > .btn + .iconbtn,.pay > a.btn + .iconbtn,.pay > b + .iconbtn{margin-left:auto}
  .pay > select.inp{flex:1 1 100%;max-width:none!important}
  .pay > .btn[data-keur]{flex:1 1 0}
  .malleen{display:block}

  /* ---------- tikdoelen en velden ---------- */
  .btn{height:auto;min-height:44px;padding:6px 16px;font-size:15px;white-space:normal;text-align:center;line-height:1.25}
  .btn.sm{min-height:40px;padding:5px 13px;font-size:14px}
  .mscroll > .btn,.bar2 > .btn.sm{white-space:nowrap}
  .iconbtn{width:40px;height:40px;font-size:16px}
  .x{width:44px;height:44px;font-size:20px}
  .inp,select.inp,input.inp,textarea.inp{font-size:16px!important}
  input.inp,select.inp{height:44px;min-height:44px}
  .inp.s,input.inp.s,select.inp.s{height:40px;min-height:40px}
  textarea.inp{min-height:96px}
  label.f>span,.f>span{font-size:13.5px}
  input[type=checkbox],input[type=radio]{width:22px;height:22px;flex:0 0 22px}
  .chk{min-height:48px;font-size:15px}
  .lnk{font-size:13.5px;padding:8px 0 8px 4px}
  input[type=file]{font-size:14px;max-width:100%}
  input[type=file]::file-selector-button{height:40px;font-size:14px}
  /* acties die op een computer pas bij aanwijzen verschijnen, staan hier gewoon in beeld */
  .rowact,.todo .iconbtn,.reactie .iconbtn{opacity:1!important}
  .hint{font-size:13.5px}
  .chip{font-size:12.5px}

  /* ---------- kaarten en cijfers ---------- */
  .grid:has(> .kpi){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .grid:has(> .kpi) > .kpi:last-child:nth-child(odd){grid-column:1 / -1}
  .kpi{padding:12px 13px}
  .kpi .lbl{font-size:12.5px;line-height:1.3}
  .kpi .val{font-size:22px!important;margin-top:4px;line-height:1.15}
  .kpi .meta{font-size:12px;margin-top:4px;line-height:1.35}
  .mini{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .mini div{padding:11px 12px}
  .mini span{font-size:12px}
  .mstrook{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .mstrook .mtr{border-left:none!important;border-top:1px solid var(--line)!important;padding:12px 14px}
  .mstrook .mtr:nth-child(-n+2){border-top:none!important}
  .mstrook .mtr:nth-child(even){border-left:1px solid var(--line)!important}
  .mstrook .mtr:last-child:nth-child(odd){grid-column:1 / -1}
  .mtr .val{font-size:20px}
  .mhero{grid-template-columns:minmax(0,1fr)!important}
  .mhero .mtr{padding:14px 16px!important}
  .mhero .mtr:nth-child(2){border-left:none!important;border-top:1px solid var(--line)!important}
  .mhero .val{font-size:30px!important;letter-spacing:-.8px}
  .card{padding:15px 15px}
  .pcard{padding:16px 15px}
  .card h3{font-size:13.5px}

  /* tabellen: schuiven binnen hun kaart, de eerste kolom blijft staan */
  .tblwrap,.an-tabel{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tblwrap table{min-width:0}
  .tblwrap td:first-child,.tblwrap th:first-child,.pmain table td:first-child,.pmain table th:first-child{position:sticky;left:0;z-index:1;background:var(--panel)}
  .tblwrap th:first-child,.pmain table th:first-child{z-index:3}
  td,th{padding:11px 12px}
  table{font-size:14px}
  .ckwrap{grid-template-columns:minmax(0,1fr)!important}
  .ckwrap > *{min-width:0}
  .cktbl{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cktbl td,.cktbl th{white-space:normal!important;min-width:90px}
  #view .mweg{display:none!important}
  select.inp,input.inp,textarea.inp,select{max-width:100%!important}
  .seg select.inp{max-width:140px!important}
  .pcard > table td,.card > table td,.pcard > table th,.card > table th{white-space:normal}
  .rgcamp{flex:1 1 100%!important;min-width:0!important;max-width:none!important}
  .rgchips .inp{min-width:0!important}

  /* ---------- mensenlijsten als kaartlijst ---------- */
  .mdesk{display:none!important}
  .mlijst{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .mlrij{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 14px;text-align:left;border-top:1px solid var(--line);color:var(--tx)}
  .mlrij:first-child{border-top:0}
  .mlrij:active{background:var(--hover)}
  .mlrij .av{width:38px;height:38px;flex:0 0 38px;border-radius:11px;font-size:13px}
  .mltekst{flex:1;min-width:0}
  .mltekst b{display:block;font-size:15.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mltekst small{display:block;font-size:13px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
  .mlrechts{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto;max-width:44%}
  .mlrechts b{font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
  .mlrechts .chip{font-size:11.5px}
  .msom{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}
  .msom > .card{padding:10px 12px!important;flex-direction:column;gap:2px!important;align-items:flex-start!important}
  /* filterbalk boven een lijst: segment over de volle breedte, keuzes naast elkaar */
  .bar2{gap:8px}
  .bar2 > .seg{flex:1 1 100%;width:auto}
  .bar2 > select.inp.s{flex:1 1 40%;width:auto;min-width:0}
  .bar2 > span[style*="margin-left:auto"]:empty{display:none}

  /* ---------- modals als bottom sheet ---------- */
  .ovl{align-items:flex-end!important;padding:0!important;overflow:hidden}
  .ovl > .modal{max-width:none!important;width:100%;border-radius:18px 18px 0 0!important;max-height:94dvh;display:flex;flex-direction:column;
    border-left:0;border-right:0;border-bottom:0;animation:msheet .22s ease}
  .ovl > .modal::before{content:'';display:block;width:40px;height:5px;border-radius:3px;background:var(--line2);margin:8px auto 0;flex:0 0 auto}
  .ovl .mhead{padding:4px 6px 8px 18px;flex:0 0 auto}
  .ovl .mhead h2{font-size:18px;flex:1;min-width:0}
  .ovl .mbody{max-height:none!important;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 18px 18px}
  .ovl .mfoot{padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-radius:0;flex:0 0 auto}
  .ovl .mfoot .btn{flex:1 1 0;min-height:48px;font-size:16px}
  .rs2-ovl{padding:0!important}

  /* ---------- detail van een contact: scherm over de volle breedte ---------- */
  #drawer{width:100%!important;max-width:none!important;left:0;border-left:0;box-shadow:none;animation:none;z-index:56}
  #drawer .dbody [style*="display:flex"][style*="gap:8px"]{flex-wrap:wrap}
  #drawerbg{display:none}
  .dhead{padding:env(safe-area-inset-top) 16px 0;position:relative}
  .dhead .x{display:none}
  .mterug{display:inline-flex;align-items:center;gap:4px;height:44px;margin:4px 0 4px -8px;padding:0 8px;font-size:16px;color:var(--tx);border-radius:10px}
  .mterug:active{background:var(--hover)}
  .mterug span{font-size:26px;line-height:1;margin-top:-3px}
  .dtabs{margin-top:12px}
  .mdacties{display:flex;gap:8px;margin-top:12px}
  .mdacties .btn{flex:1 1 0;min-width:0;text-decoration:none;padding:0 8px}
  #drawer .btn.dgr[data-del]{flex:1 1 100%;margin-top:14px}
  .dbody{padding:16px 16px calc(var(--tbh) + 30px)}
  .kv{grid-template-columns:1fr;gap:2px;font-size:15px}
  .kv dt{margin-top:10px;font-size:12.5px}
  .kv dt:first-child{margin-top:0}

  /* ---------- studentenportaal ---------- */
  #portaal{height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
  .phead{position:sticky;top:0;z-index:20;background:var(--bg)!important;border-bottom:1px solid var(--line)!important}
  .pbalk{display:none!important}
  .pmkop{display:flex;align-items:center;gap:2px;padding:env(safe-area-inset-top) 6px 0 16px;min-height:calc(var(--kop) + env(safe-area-inset-top))}
  .pmtitel{flex:1;min-width:0;font:500 21px/var(--kop) var(--kopfont);letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:10px}
  .pmtitel .logo{width:30px!important;height:30px!important;font-size:9.5px!important;flex:0 0 30px}
  .pmmeekijk{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 16px;border-top:1px solid rgba(200,135,42,.35);
    background:rgba(200,135,42,.12);font-size:14px;color:var(--tx)}
  .pmmeekijk span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pmmeekijk .dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#c8872a}
  .pside{display:none!important}
  .play{display:block}
  .pmain{padding:16px 16px calc(var(--tbh) + 28px)!important;max-width:none!important}
  #portaal h1,.pmain h1{font-size:24px!important;line-height:1.2}
  /* uitleg ("Zo werkt deze pagina") onder de cijfers, niet erboven */
  .pmain{display:flex;flex-direction:column}
  .pmain > *{min-width:0}
  .pmain > .pagina-uitleg{order:50;margin-top:14px}
  /* Afronding 01-10: de eerste keer staat de uitleg bovenaan (daarna ingeklapt onderaan). */
  .pmain > .pagina-uitleg.eerste{order:0;margin-top:0}
  .pmain .onder{font-size:15px;margin-bottom:16px}
  .pgrid,.pgrid2{grid-template-columns:minmax(0,1fr)!important;gap:12px}
  /* setupbalk: één compacte regel met de volgende stap */
  .setupbalk{flex-direction:row!important;align-items:center!important;flex-wrap:wrap;gap:8px 12px;padding:12px 14px!important;margin-bottom:14px!important}
  .setupbalk .setupstappen2{display:none!important}
  .setupbalk > div{flex:1 1 150px!important}
  .setupbalk b{font-size:14px}
  .setupbalk .btn{width:auto!important;flex:0 0 auto}
  .setupbalk[data-tab="koppelingen"],.setupbalk[data-tab="klantenservice"],.setupbalk[data-tab="disputes"]{display:none!important}
  /* to-do: tekstveld over de volle breedte, datum en toevoegen eronder */
  #todoform{flex-wrap:wrap}
  #todoform [name=tekst]{flex:1 1 100%!important}
  #todoform [name=deadline]{flex:1 1 auto;width:auto!important}
  #todoform .btn{flex:0 0 64px}
  .todo{min-height:52px}
  .todo .vink{width:30px!important;height:30px!important;flex:0 0 30px!important}
  .ladderstap .lbl{font-size:12px!important}
  .callrij summary{min-height:52px}
  .pcard .btn.sm{min-height:42px}

  /* ---------- inbox klantenservice: lijst en gesprek als twee schermen ---------- */
  .ib{display:block!important;height:auto!important;min-height:0!important;border-radius:14px}
  .ib-rail{display:none!important}
  .ib.ib-heeftsel .ib-lijstkol{display:none}
  .ib:not(.ib-heeftsel) .ib-detail{display:none}
  .ib-detail{border-top:0!important;scroll-margin-top:calc(var(--kop) + 12px)}
  .ib-terug{display:inline-flex}
  .ib-dkop{flex-direction:column;align-items:stretch;padding:12px 14px}
  .ib-dacties{justify-content:flex-start}
  .ib-draad{padding:14px}
  .ib-tagsrij{padding:10px 14px}
  .ib-tag a{display:inline-block;padding:4px 6px;margin:-4px -4px -4px 2px;font-size:15px}
  .ib-composer{padding:12px 14px 14px}
  .ib-composer textarea{font-size:16px!important}
  .ib-compvoet{flex-wrap:wrap}
  .ib-compvoet .hint{flex:1 1 100%}
  .ib-compvoet .btn{flex:1 1 0}
  .ib-rij{padding:12px 12px 12px 10px}
  .ib-r1 b{font-size:15px}
  .ib-r2{font-size:14.5px}
  .ib-r3{font-size:13.5px}
  .ib-zoek{grid-template-columns:minmax(0,1fr) 128px}
  .ib-compvoet{position:sticky;bottom:var(--tbh);background:var(--panel);padding:10px 0 4px;margin-top:6px;z-index:2}

  /* ---------- wizards: Vorige/Volgende blijven onderaan in beeld ---------- */
  .cw-voet,.wizvoet{position:sticky;bottom:var(--tbh);z-index:5;background:var(--panel);margin:14px -15px -16px!important;
    padding:10px 15px 12px!important;border-top:1px solid var(--line);border-radius:0 0 12px 12px;gap:8px;flex-wrap:nowrap!important}
  .wizvoet{background:var(--bg);margin:14px -16px 0!important;padding:10px 16px!important;border-radius:0}
  .cw-voet span:empty,.wizvoet > span[style*="flex:1"]{display:none}
  .cw-voet .btn,.wizvoet .btn{flex:1 1 0;min-height:48px;font-size:15px}
  /* 04-10 (controle): met 4 knoppen (Vorige, Doorspoelen, Overslaan, Volgende) viel "Volgende" op 390 px buiten beeld. */
  .cw-voet .btn,.wizvoet .btn{min-width:0;padding-left:6px;padding-right:6px;white-space:normal;line-height:1.15}

  /* ---------- rondleiding: kaart boven de onderbalk ---------- */
  .trcard{left:16px!important;right:16px!important;width:auto!important;top:auto!important;bottom:calc(var(--tbh) + 18px)!important;max-height:calc(100dvh - var(--tbh) - 60px);overflow-y:auto}
  .trvoet{flex-wrap:wrap;row-gap:10px}
  .trbolletjes{flex:1 1 100%;margin:0!important}
  .trvoet .btn{min-height:44px;flex:1 1 0}
  .trover{min-height:44px;font-size:14px}
  .trmeer{font-size:13.5px;color:var(--tx2);background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 10px;margin:-4px 0 12px}

  /* ---------- losse schermen ---------- */
  .mmkop h1{font-size:21px!important}
  .alertrow{flex-wrap:wrap;row-gap:8px}
  .alertrow > a[data-open]{flex:1 1 0;min-width:0}
  .alertrow > div[style*="flex:1"]{flex:1 1 calc(100% - 44px)!important}
  .alertrow > div[style*="flex-direction:column"]{flex-direction:row!important;flex-wrap:wrap;width:100%;padding-left:38px}
  .pay > div[style^="min-width:0"]:not([style*="flex"]){flex:1 1 0}
  .pay > .chip + .iconbtn,.pay > span + .iconbtn{margin-left:auto}
  .pay > input.inp{flex:1 1 150px;min-width:0!important}
  .note .nh{flex-wrap:wrap;row-gap:2px;padding-right:40px;font-size:13px}
  .note .nh > *{white-space:nowrap}
  .note .nh > a{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .note .nh .rowact{position:absolute;top:4px;right:4px;margin:0!important}
  .note p{font-size:15px}
  .bar2 > .card{flex:1 1 40%;min-width:0}
  .threadkop{flex-wrap:wrap}
  .threadkop > div[style*="flex-direction:column"]{flex:1 1 100%;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:10px!important}
  .reactie p{font-size:15px!important}
  .mscroll{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;margin-left:-16px!important;margin-right:-16px!important;padding:0 16px 2px}
  .mscroll::-webkit-scrollbar{display:none}
  .mscroll > *{flex:0 0 auto}
  .mscroll > span[style*="flex:1"]{display:none}
  div:has(> select[data-logf]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}
  select[data-logf]{width:100%!important;min-width:0!important}
  .pagina-uitleg summary{min-height:48px;align-items:center;padding:10px 14px}
  .pagina-uitleg summary span{font-size:15px}
  .pagina-uitleg summary em{display:none}
  .pagina-uitleg ol{grid-template-columns:1fr}
  .mvouw{margin-top:18px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
  .mvouw > summary{min-height:52px;display:flex;align-items:center;padding:0 16px;font-weight:600;list-style:none;cursor:pointer}
  .mvouw > summary::-webkit-details-marker{display:none}
  .mvouw > summary::after{content:'›';margin-left:auto;font-size:22px;color:var(--tx3);transition:transform .15s}
  .mvouw[open] > summary::after{transform:rotate(90deg)}
  .mvouw > .card{border:0;border-top:1px solid var(--line);border-radius:0 0 14px 14px;margin:0!important}
  .app-kaart{padding:12px;gap:10px;align-items:flex-start}
  .app-kaart .app-ikoon{flex:0 0 36px;height:36px}
  .app-tekst span{font-size:13.5px}
  /* kleine grijze regels iets groter: goed leesbaar zonder bril */
  #view [style*="font-size:11px"],#view [style*="font-size:11.5px"],#portaal [style*="font-size:11px"],#portaal [style*="font-size:11.5px"],
  #drawer [style*="font-size:11px"],#drawer [style*="font-size:11.5px"]{font-size:13px!important}
  #view [style*="font-size:12px"],#portaal [style*="font-size:12px"],#drawer [style*="font-size:12px"]{font-size:13.5px!important}
  #view .chip[style*="font-size:10"],#portaal .chip[style*="font-size:10"],#drawer .chip[style*="font-size:10"]{font-size:12px!important}
  /* stap + knop naast elkaar: de knop gaat op de telefoon onder de tekst */
  div[style*="display:flex"]:has(> div[style="flex:1"] + .btn),div[style*="display:flex"]:has(> div[style="flex:1"] + a.btn){flex-wrap:wrap}
  div[style*="display:flex"] > div[style="flex:1"]:has(+ .btn){flex:1 1 calc(100% - 44px)!important}
  div[style*="display:flex"] > div[style="flex:1"] + .btn{margin-left:34px}
  .callrij .pijl{font-size:18px;width:28px;text-align:center}
  /* Agent OS */
  .aos-tegels{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .aos-tegel{padding:10px 12px!important}
  .aos-tegel span{font-size:12.5px!important;line-height:1.3!important}
  .aos-tegel:last-child:nth-child(odd){grid-column:1 / -1}
  .aos-balk2{flex-wrap:wrap}
  .aos-balk2 > .seg{flex:1 1 100%}
  .aos-zoek{flex:1 1 100%!important;min-width:0!important;min-height:44px;font-size:15px}
  .chat{height:calc(100dvh - var(--kop) - env(safe-area-inset-top) - var(--tbh) - 28px)!important;min-height:300px;scroll-margin-top:12px}
  .chat-in{position:sticky;bottom:0;background:var(--panel)}
  .chat-in textarea{font-size:16px!important;min-height:48px}
  .chat-in .btn{min-height:48px}
  .aos-kanban{display:grid!important;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:85%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .aos-kanban > *{scroll-snap-align:start}
  .aos-logtabs button{font-size:13px!important}

  .cr-tabs .cr-mijn{display:inline!important}
  .rs2-tabs button,.rs2-chips button,.rs2-chips .chip{min-height:40px}
  .upl-tabs button{min-height:40px;white-space:nowrap}
  .thread .threadbody textarea,.reactie textarea{font-size:16px!important}
  .reactieform{position:sticky;bottom:var(--tbh);z-index:4;background:var(--panel);padding:10px 0 8px;margin-bottom:-8px}
  .reactieform .inp{font-size:16px!important}
  #login a{font-size:15px!important}
  /* ---------- inlogscherm ---------- */
  #login .inp{height:48px}
  #login .btn{min-height:48px}
  #login a,#login .lnk{display:inline-block;min-height:44px;line-height:44px}

  /* ---------- tweede ronde, na de twee controleurs (30-09-2026) ---------- */
  /* onderbalk precies zo hoog als de ruimte die de rest voor hem vrijhoudt (--tbh) */
  #tabbar{height:var(--tbh);box-sizing:border-box;align-items:stretch}
  /* De antwoordbalk (community) en de knoppenbalk (inbox) plakken aan het
     scherm. Met overflow:hidden werd de kaart zelf de scrollbak en zweefde
     de balk 64px boven de onderkant van de kaart, over de laatste reactie. */
  .thread{overflow:visible;overflow:clip}
  .ib,.ib-detail{overflow:visible!important;overflow:clip!important}
  /* Een plakkende balk telt vanaf de binnenrand van de scrollbak. #view heeft
     onderaan var(--tbh)+28px witruimte, dus daar is "net boven de onderbalk" -28px. */
  #view .reactieform,#view .ib-compvoet,#view .cw-voet,#view .wizvoet{bottom:-28px}
  /* tabrijen: vervaging alleen aan de kant waar nog tabs verstopt zitten */
  .seg.mlinks,.tabbalk.mlinks,.subtabs.mlinks,.dtabs.mlinks,.anx-tabs.mlinks,.upl-tabs.mlinks,.ckbar.mlinks,.aos-logtabs.mlinks{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent)}
  .seg.meind,.tabbalk.meind,.subtabs.meind,.dtabs.meind,.anx-tabs.meind,.upl-tabs.meind,.ckbar.meind,.aos-logtabs.meind{-webkit-mask-image:none;mask-image:none}
  .seg.mlinks.meind,.tabbalk.mlinks.meind,.subtabs.mlinks.meind,.dtabs.mlinks.meind,.anx-tabs.mlinks.meind,.upl-tabs.mlinks.meind,.ckbar.mlinks.meind,.aos-logtabs.mlinks.meind{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 26px);mask-image:linear-gradient(90deg,transparent,#000 26px)}
  /* tikdoelen minstens 44px */
  .seg button,.anx-tabs button,.aos-logtabs button{min-height:44px}
  .mchips{padding:8px 16px}
  .mchip{height:44px;border-radius:22px}
  .cw-balk li::before{top:17px}
  .cw-balk button{width:36px;height:36px;font-size:14px}
  .cw-balk button::after{content:'';position:absolute;inset:-4px;border-radius:50%}
  .app-kaart [data-act="appweg"]{min-width:44px;min-height:44px;padding:0;font-size:22px;line-height:1}
  #view details:not([class]) > summary:not([class]):not([style*="padding"]),
  #portaal details:not([class]) > summary:not([class]):not([style*="padding"]),
  #drawer details:not([class]) > summary:not([class]):not([style*="padding"]){padding-top:12px;padding-bottom:12px;min-height:44px;box-sizing:border-box}
  /* profielfoto kiezen: het veld over de volle breedte, zodat je leest wat er staat */
  div[style*="display:flex"]:has(> div > #fotokiezer){flex-wrap:wrap}
  div:has(> #fotokiezer){flex:1 1 100%!important;order:3}
  div[style*="display:flex"]:has(> div > #fotokiezer) > .btn{margin-left:auto}
  #fotokiezer{height:auto!important;min-height:44px;padding:6px 8px!important;width:100%;font-size:14px!important}
  /* totaalregel in een tabel: ook de vaste eerste kolom in de totaalkleur */
  .tblwrap tr[style*="background:var(--panel2)"] > td:first-child{background:var(--panel2)}
  /* agenda: de hele locatie, op meer regels als dat moet */
  .aglocatie{max-width:none!important;white-space:normal!important;overflow:visible!important}
  /* kleine koppen niet onder 12px */
  .sect,.dsec{font-size:12.5px}
  .aos-logtabs .hint{white-space:nowrap}
  /* kaartkop met uitleg ernaast: de uitleg gaat eronder als hij niet past */
  .card h3{flex-wrap:wrap;row-gap:2px}
  .card h3 > span[style*="margin-left:auto"]{min-width:0;max-width:100%;line-height:1.4}
  /* Inkomsten: naam over de volle breedte, bedragen eronder */
  .artraject{flex-wrap:wrap;row-gap:2px}
  .artraject > a[data-open]{flex:1 1 calc(100% - 52px)!important;min-width:0}
  .artraject .rt{flex:1 1 100%;margin-left:42px;white-space:normal;text-align:left;font-size:13px}
  /* winst- en verliesrekening: past ook op 360px en met grote bedragen */
  .pmain .pcard[style*="padding:18px"]{padding:16px 14px!important}
  .plregel{gap:6px!important;padding:9px 6px!important}
  .plregel .pllabel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .plregel .plpct{min-width:0!important;flex:0 0 auto}
  .plregel > b{min-width:0!important;flex:0 0 auto;white-space:nowrap}
  /* totalen boven een lijst (Betalingen): als cijfertegels, twee naast elkaar */
  .bar2 > .card{flex:1 1 calc(50% - 4px)!important;flex-direction:column!important;align-items:flex-start!important;gap:2px!important;padding:10px 12px!important}
  .bar2 > select.inp + .card{flex-basis:100%!important}
  .bar2 > .card > b{font-size:17px}
  /* "Je hub is nog niet klaar": op Start de hele balk, elders één smalle regel */
  .setupbalk:not([data-tab="start"]){flex-wrap:nowrap!important;padding:6px 6px 6px 14px!important;margin-bottom:12px!important}
  .setupbalk:not([data-tab="start"]) > div{flex:1 1 auto!important;min-width:0}
  .setupbalk:not([data-tab="start"]) b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .setupbalk:not([data-tab="start"]) .sblang{display:none}
  .setupbalk:not([data-tab="start"]) .sbkort{display:inline}
  .setupbalk:not([data-tab="start"]) .btn{min-height:40px;padding:4px 14px;white-space:nowrap}
  /* paginatitel die de kopbalk al noemt */
  #portaal .pmain h1.mdubbel{display:none!important}
  /* Cijfers: "Aan de slag" als één regel die je openklapt */
  .plstapmob{margin:0 0 14px}
  .plstapmob > summary > span{display:flex;flex-direction:column;min-width:0;padding:8px 0}
  .plstapmob > summary b{font-size:15px}
  .plstapmob > summary small{font-size:13px;color:var(--tx3);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .plstaplijst{padding:0 14px 8px;border-top:1px solid var(--line)}
  /* brede tabellen als lijst: het belangrijkste getal groot rechts */
  .mlijst.vlak{border:0;border-radius:0;background:none;margin:0}
  .mlijst.vlak .mlrij{padding:10px 0;min-height:58px}
  .mlijst.vlak .mltekst > b{font-size:15px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .mlijst.vlak .mnw{white-space:nowrap}
  .bar2 > #roasproduct,.bar2 > #prodfilter{flex:1 1 100%;max-width:none!important}
  .mlijst.vlak .mltekst small{white-space:normal;line-height:1.4;margin-top:2px}
  .mlijst.vlak .mltekst small b{display:inline;font-size:inherit;font-weight:600;white-space:normal;overflow:visible}
  .mlijst.vlak .mlrechts{max-width:48%}
  .mlijst.vlak .mlrechts b{font-size:18px;font-weight:650}
  .mlrechts small{font-size:12.5px;color:var(--tx3);white-space:nowrap}
  /* Agent OS: de wereld breder dan het scherm, je veegt erdoorheen */
  .aos-svgwrap{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}
  .aos-svgwrap::-webkit-scrollbar{display:none}
  .aos-svgwrap .aos-svg{width:1100px!important;max-width:none!important;max-height:none!important;height:auto!important}
  .aos-veeg{font-size:13px;color:var(--tx3);text-align:center;margin:0;padding:8px 12px}
  /* stappenplannen: als je erheen springt, niet onder de kop of de onderbalk */
  .cw,.rg-wiz{scroll-margin-top:12px;scroll-margin-bottom:calc(var(--tbh) + 80px)}

  /* ---------- derde ronde, na de controleurs (30-09-2026) ---------- */
  /* App-kaart: de installeerknop onder de tekst, het kruisje rechtsboven.
     Naast elkaar kneep de knop de tekst samen tot een kolom van één woord. */
  .app-kaart{flex-wrap:wrap}
  .app-kaart .app-tekst{flex:1 1 0}
  .app-kaart [data-act="appinstall"]{order:3;flex:1 1 calc(100% - 46px);margin-left:46px;min-height:44px}
  /* Rondleiding: de ring om een tab in de zwarte onderbalk is licht */
  .trring.optab{box-shadow:0 0 0 2px #F2F4F7,0 0 0 7px rgba(242,244,247,.28)}
  /* Tikdoelen van minstens 44px */
  .aos-kanfilter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:12px 12px 2px;gap:8px}
  .aos-kanfilter::-webkit-scrollbar{display:none}
  .aos-kanfilter>button:not(.btn){flex:0 0 auto;min-height:44px;padding:0 15px;font-size:14.5px;border-radius:22px;white-space:nowrap}
  .cw-balk li::before{top:21px}
  .cw-balk button{width:44px;height:44px;border:4px solid transparent!important;background-clip:padding-box!important;box-shadow:inset 0 0 0 1.5px var(--line2)}
  .cw-balk li.af button,.cw-balk li.nu button{box-shadow:none}
  .cw-balk button::after{display:none}
  .todo{align-items:center}
  .todo .vink{width:44px!important;height:44px!important;flex:0 0 44px!important;margin:-7px -4px -7px -7px;border:7px solid transparent!important;
    background-clip:padding-box;box-shadow:inset 0 0 0 2px var(--line2);border-radius:13px;font-size:15px}
  .todo .vink.aan{box-shadow:none}
  .cr-hulp{display:inline-block;padding:11px 4px;margin:-11px -4px;line-height:22px}
  details > summary.hint{padding-top:11px;padding-bottom:11px;min-height:44px;box-sizing:border-box}
  .sk-nieuw summary{display:flex;align-items:center;min-height:44px;padding:10px 0;font-size:14.5px}
  .sk-form{grid-template-columns:minmax(0,1fr)}
  .sk-form .inp{width:100%}
  .ib-tag a{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0;margin:-14px -12px -14px -6px;font-size:17px;vertical-align:middle}
  .ladder{gap:0}
  /* Agent OS: alle vijf de weergaven in beeld (twee regels), zodat je ziet dat
     Wereld en Chat met Max er ook zijn */
  .aos-balk2 > .seg{flex-wrap:wrap!important;overflow:visible;-webkit-mask-image:none!important;mask-image:none!important;width:100%;padding:3px!important;row-gap:3px}
  .aos-balk2 > .seg button{flex:1 1 auto}
  /* Klantenservice en Dispute fighter, stap 1: de Claude-wizard staat gewoon
     in de kaart (geen tweede plakkende knoppenbalk), eronder één knop naar stap 2 */
  .kswiz .cw .cw-voet{position:static!important;margin:16px 0 0!important;padding:12px 0 0!important;border-radius:0;background:none}
  .kswiz .pcard[style*="padding:20px"]{padding:16px 14px!important}
  .kswiz .pcard .pcard.cw{padding:14px 12px}
  .kswiz .cw .cw-voet:not(:has(button:not([disabled]))){display:none!important}
  .bar2:has(> .mstap1) > span[style*="flex:1"]{display:none}
  .mstap1{flex:1 1 100%;min-height:48px}
  /* Klantenservice stap 4, Geavanceerd: geen kaart-in-kaart-in-kaart */
  .ksgeavanceerd .pgrid2 > .pcard{padding:14px 0!important;border:0;background:none;box-shadow:none}
  /* Start: de vier cijferkaarten twee naast elkaar, compact */
  .stcijfers{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .stblok{padding:12px 13px!important}
  .stblok .stlbl{margin-bottom:3px!important;font-size:13px}
  .stblok .stval{font-size:21px!important;line-height:1.2}
  .stblok .stmeta{font-size:12.5px!important;line-height:1.35}
  .stblok .stroas{display:none}
  .stblok .stnw{white-space:nowrap}
  .stblok .stwinst{margin-top:4px!important;font-size:13px;display:flex;flex-wrap:wrap;column-gap:8px;row-gap:0}
  .stblok .stroas2{display:inline;white-space:nowrap;color:var(--tx2)}
  div > [data-act="herkoppel"] + .hint{display:block;margin:8px 0 0!important}
  /* Betalingen: verwijderen zit achter ⋯ */
  .mpaymenu{font-size:20px;line-height:1;width:44px;height:44px;flex:0 0 44px;display:grid!important;place-items:center;margin-right:-8px}
  /* Checkout: de stappenrij op één regel */
  .ckstappen{flex-wrap:nowrap!important;gap:4px!important}
  .ckstap-bol{gap:5px!important;font-size:12.5px!important;flex:0 0 auto;white-space:nowrap}
  .ckstreep{min-width:6px!important}
  /* Data & backup: eerst de back-up, daarna de gebruiksstatistieken */
  #view:has(> .mgebruik + .mdatagrid){display:flex;flex-direction:column}
  #view > .mdatagrid{order:-1;margin-bottom:18px}
  /* Bestand kiezen: het veld zo hoog als de knop erin */
  input[type=file].inp{height:auto!important;min-height:48px;padding:6px 8px!important;line-height:normal}
  /* Een lijstje met een vaste labelkolom (Verbinding met Fathom): label boven de waarde */
  .kv[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  /* Paginatitel die de kopbalk al noemt (beheer) */
  #view .mdubbel{display:none!important}
  /* Typen: de onderbalk gaat weg zolang het toetsenbord open is */
  body.mapp.mtypt #tabbar{display:none!important}
  body.mapp.mtypt{--tbh:0px}
}
@media (max-width:980px){
  .ib-mchips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px 12px;border-bottom:1px solid var(--line)}
  .ib-mchips::-webkit-scrollbar{display:none}
  .ib-mchips .mchip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 15px;border-radius:22px;font-size:14.5px;font-weight:500;
    background:var(--panel);border:1px solid var(--line2);color:var(--tx2);white-space:nowrap}
  .ib-mchips .mchip.on{background:var(--acc);border-color:var(--acc);color:var(--on-acc);font-weight:600}
  .ib-mchips .mchip b{font-size:12px;font-weight:600;background:rgba(20,20,20,.08);border-radius:10px;padding:0 7px;line-height:19px;color:inherit}
}
/* Calls: knop om een nieuwe call te plannen, bovenaan de pagina */
.callplan{display:flex;justify-content:center;width:100%;max-width:420px;min-height:48px;margin:0 0 16px;font-size:15px}

/* =====================================================================
   30-09-2026 — nieuwe onderdelen (bewaking, setupbalk, Claude automatisch,
   research-status, beheer-connector, dispute-lessen) en de laatste punten
   van de mobiele controle. Desktopregels eerst, daarna alleen de telefoon.
   ===================================================================== */
.mmeerterug,.ib-mfilters{display:none}
/* Bewaking: regels bovenaan, wizard via "Nieuwe regel", status en uitleg inklapbaar */
.rg-lijstkop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rg-werkt>summary,.rg-intro>summary{cursor:pointer;display:flex;align-items:center;gap:8px;flex-wrap:wrap;list-style:none;min-height:28px}
.rg-werkt>summary::-webkit-details-marker,.rg-intro>summary::-webkit-details-marker{display:none}
.rg-werkt>summary::after,.rg-intro>summary::after{content:'›';margin-left:auto;color:var(--tx3);font-size:18px;line-height:1;transition:transform .15s}
.rg-werkt[open]>summary::after,.rg-intro[open]>summary::after{transform:rotate(90deg)}
.rg-werkt[open]>summary{margin-bottom:6px}
.rg-werkt-teken{font-weight:700;font-size:15px;width:18px;text-align:center}
/* Setupbalk buiten Start (en op de telefoon): één regel, uitklapbaar */
.setupbalk.sbkompakt{flex-wrap:nowrap;align-items:flex-start;gap:10px;padding:8px 8px 8px 16px}
.sbdetails{flex:1 1 auto;min-width:0}
.sbdetails>summary{cursor:pointer;list-style:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px;line-height:1.4;padding:8px 0}
.sbdetails>summary::-webkit-details-marker{display:none}
.sbdetails>summary::before{content:'›';display:inline-block;width:12px;margin-right:4px;color:var(--tx3);font-weight:700;transition:transform .15s}
.sbdetails[open]>summary::before{transform:rotate(90deg)}
.sbdetails[open]>summary{white-space:normal}
.sbdetails .setupstappen2{margin:2px 0 8px}
.setupbalk.sbkompakt>.btn{flex:0 0 auto}
.sbdetails .sblet{color:var(--rd);font-weight:600;white-space:normal}
/* Winkel & koppelingen: kopje Claude automatisch */
.koppel-kop{font:500 18px/1.3 var(--kopfont,inherit);margin:24px 0 10px}
/* Research (beheerder): statusbalk */
.rs2-status{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding:10px 14px;margin:0 0 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:13px;color:var(--tx2)}
.rs2-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--tx3);margin-right:6px;vertical-align:1px}
.rs2-dot.aan{background:var(--grn)}
.rs2-dot.uit{background:var(--red)}
.rs2-keur{margin-left:auto;border:1px solid var(--line2);background:var(--panel2);border-radius:999px;padding:5px 12px;font:inherit;color:var(--tx);cursor:pointer}
.rs2-keur.let{border-color:var(--amb);color:var(--amb)}
.rs2-opdr{margin-top:4px}
/* Beheer-connector */
.beheer-routine{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
/* Dispute fighter: uitkomst en lessen */
.dp-lesrij{display:flex;gap:10px;align-items:baseline;padding:5px 0;font-size:13px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.dp-lesrij span{flex:1 1 160px;min-width:0}
.dp-les{display:flex;flex-direction:column;gap:2px;padding:7px 0 0;font-size:13px}
.dp-knoppen{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.dp-zaak>.btn{align-self:center}
/* Creatives: merkprofiel ontbreekt */
.cr-merkmist{margin:12px 0}
.cr-faceless{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);font-size:13px;color:var(--tx2);line-height:1.45}
.cr-faceless b{color:var(--tx);margin-right:4px}
.cr-faceless span{flex:1 1 240px;min-width:0}

@media (max-width:860px), (max-width:1023px) and (pointer:coarse), (max-height:500px) and (pointer:coarse){
  /* iPhone-app (black-translucent): de strook achter klok en batterij donker, zoals de onderbalk */
  #top,.mmkop,.mzkop{background:linear-gradient(#141414 0 env(safe-area-inset-top),var(--bg) 0)!important}
  .pmkop,.dhead{background:linear-gradient(#141414 0 env(safe-area-inset-top),transparent 0)!important}
  .mmeerterug{display:inline-flex;align-items:center;flex:0 0 auto;height:44px;padding:0 10px 0 4px;margin-right:2px;font-size:15px;font-weight:600;color:var(--tx);border-radius:12px}
  .mmeerterug:active{background:var(--hover)}
  /* Setupbalk: één regel met de knop ernaast */
  .setupbalk.sbkompakt{flex-wrap:nowrap!important;align-items:flex-start!important;padding:4px 6px 4px 14px!important}
  .setupbalk.sbkompakt .sbdetails{flex:1 1 auto!important;min-width:0}
  .setupbalk.sbkompakt summary b{display:inline!important;font-size:14px}
  .setupbalk.sbkompakt summary{padding:12px 0;font-size:14px}
  .setupbalk .sbdetails[open] .setupstappen2{display:flex!important;flex-direction:column;gap:6px}
  .setupbalk.sbkompakt>.btn{min-height:44px!important;margin-top:0;width:auto!important}
  /* Tikdoelen minstens 44px, ook in de pagina's zelf */
  .btn.sm,.pcard .btn.sm{min-height:44px}
  .iconbtn{width:44px;height:44px}
  .upl-tabs button{min-height:44px}
  .kswizstap{height:auto;min-height:44px}
  .inp.s,input.inp.s,select.inp.s{height:44px;min-height:44px}
  input[type=color]{width:44px!important;height:44px!important;padding:2px!important}
  /* Velden altijd 16px (anders zoomt iOS in): de regel voor kleine tekst mag geen invoerveld raken */
  #view .inp[style*="font-size"],#portaal .inp[style*="font-size"],#drawer .inp[style*="font-size"],.ovl .inp[style*="font-size"]{font-size:16px!important}
  /* Hele rij tikbaar (Dashboard, Betalingen, Inkomsten, Notities) */
  #view .alertrow,#view .pay{min-height:52px}
  #view .alertrow:has(> a[data-open]),#view .pay:has(a[data-open]),#view .note:has(a[data-open]){cursor:pointer}
  #view .alertrow > a[data-open]{display:flex;align-items:center;min-height:44px;align-self:stretch}
  /* Wizard: na Volgende niet onder de plakkende kop van het portaal */
  .rg-wiz,.cw{scroll-margin-top:calc(var(--kop) + env(safe-area-inset-top) + 72px)}
  .cr-autoset{scroll-margin-top:calc(var(--kop) + env(safe-area-inset-top) + 12px)}
  /* Checkout-trechter: label en getal op een regel, de balk eronder over de hele breedte */
  .ckstap{grid-template-columns:minmax(0,1fr) auto!important;row-gap:4px!important;column-gap:10px!important}
  .ckstap .balk{grid-column:1 / -1;grid-row:2;height:14px!important}
  .ckperiode{display:flex!important;gap:6px;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:100%;padding-right:26px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
  .ckperiode::-webkit-scrollbar{display:none}
  .ckper{min-height:44px;padding:0 15px!important;flex:0 0 auto;white-space:nowrap;font-size:14px!important}
  /* Checkout-formulieren (facturen, vormgeving): één kolom */
  .ckrij{grid-template-columns:minmax(0,1fr)!important}
  /* Chiprijen: vervagen waar nog chips verstopt zitten, net als de tabbalken */
  .mchips,.ib-mchips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
  .mchips.mlinks,.ib-mchips.mlinks,.ckperiode.mlinks{-webkit-mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent)}
  .mchips.meind,.ib-mchips.meind,.ckperiode.meind{-webkit-mask-image:none;mask-image:none}
  .mchips.mlinks.meind,.ib-mchips.mlinks.meind,.ckperiode.mlinks.meind{-webkit-mask-image:linear-gradient(90deg,transparent,#000 26px);mask-image:linear-gradient(90deg,transparent,#000 26px)}
  /* Afkappingen: logboekfilters onder elkaar, sorteerkeuze in de inbox breed genoeg */
  .logfilters,div.logfilters:has(> select[data-logf]){display:flex!important;flex-direction:column;align-items:stretch!important}
  .logfilters select.inp{width:100%!important;min-width:0!important}
  .ib-zoek{grid-template-columns:minmax(0,1fr) auto!important}
  .ib-zoek select{min-width:150px}
  /* Koppelingen (beheer): per student een raster van 2×2 met leesbare kopjes */
  .kop-vakken{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px!important}
  .kop-vakken>.kop-vak{min-width:0!important}
  .kop-vakken>.kop-hub{grid-column:1 / -1}
  .kop-vakkop{font-size:12px!important}
  .bestype{font-size:12px!important}
  /* Bewaking */
  .rg-lijstkop .btn{min-height:44px}
  .rs2-status{font-size:14px}
  .rs2-keur{margin-left:0;min-height:44px}
  .beheer-routine{flex-wrap:wrap}
  .dp-knoppen{width:100%;justify-content:flex-start}
  .dp-zaak{flex-wrap:wrap}
}
@media (max-width:420px){ .lgclock .c{font-size:11px!important;letter-spacing:.06em} }
/* Inbox onder 980px (geen zijrail): tagfilter en ophalen/vernieuwen onder de weergaven */
@media (max-width:980px){
  .ib-mfilters{display:flex;gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line)}
  .ib-mfilters select{flex:1 1 auto;min-width:0}
  .ib-mfilters .btn{flex:0 0 auto}
}

/* =====================================================================
   Claude in de hub: de chat met je eigen Claude (tab "Claude")
   ===================================================================== */
.pmain.clc-main{max-width:980px}
.clc{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  height:clamp(420px,calc(100dvh - 230px),900px);overflow:hidden;margin-bottom:14px}
.clc-status{padding:10px 14px 10px 16px;border-bottom:1px solid var(--line);background:var(--panel2);font-size:13px;display:flex;flex-direction:column;gap:8px}
.clc-auto{display:flex;align-items:center;gap:9px;min-height:28px}
.clc-auto > span:not(.clc-dot){flex:1;min-width:0;color:var(--tx2)}
.clc-auto b{color:var(--tx);font-weight:600}
.clc-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:var(--tx3)}
.clc-dot.aan{background:var(--grn);box-shadow:0 0 0 3px color-mix(in srgb,var(--grn) 18%,transparent)}
.clc-dot.fout{background:var(--red)}
.clc-ververs{flex:0 0 auto}
.clc-bezig{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--tx2);padding-left:1px}
.clc-bezig > span:nth-child(2){flex:1 1 260px;min-width:0}
.clc-bezig b{color:var(--tx);font-weight:600}
.clc-lijst{flex:1;min-height:0;overflow-y:auto;padding:18px 18px 10px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.clc-dag{display:flex;justify-content:center;margin:6px 0 0}
.clc-dag span{font-size:11.5px;color:var(--tx3);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:1px 10px}
.clc-rij{display:flex;gap:8px;align-items:flex-end;min-width:0}
.clc-rij.jij{justify-content:flex-end}
.clc-av{width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:var(--on-acc)}
.clc-av svg{width:15px;height:15px}
.clc-bel{max-width:min(640px,78%);padding:9px 13px;border-radius:16px;line-height:1.55;font-size:14px;overflow-wrap:anywhere;min-width:0}
.clc-rij.jij .clc-bel{background:var(--acc);color:var(--on-acc);border-bottom-right-radius:5px}
.clc-rij.claude .clc-bel{background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--tx)}
.clc-rij.claude .clc-tekst,.clc-rij.claude .clc-tekst p,.clc-rij.claude .clc-tekst li{color:var(--tx)}
.clc-rij.claude.upd .clc-bel{background:transparent;border-style:dashed}
.clc-bel.vraag{background:var(--panel)!important;border-color:var(--line2)!important;box-shadow:var(--shadow)}
.clc-label{font-size:12px;font-weight:650;color:var(--tx3);margin-bottom:3px}
.clc-tekst p{margin:0 0 6px}
.clc-tekst p:last-child{margin-bottom:0}
.clc-tekst .mdlijst{margin:2px 0 6px 18px;padding:0}
.clc-tekst .mdlijst li{margin:2px 0}
.clc-tekst .mdkop{font-weight:650;margin:6px 0 3px}
.clc-tekst a{color:inherit;text-decoration:underline}
.clc-meta{font-size:11px;color:var(--tx3);margin-top:4px}
.clc-rij.jij .clc-meta{color:inherit;opacity:.6;text-align:right}
.clc-citaat{font-size:12px;opacity:.72;border-left:2px solid currentColor;padding-left:8px;margin:1px 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clc-keuzes{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.clc-keuze{min-height:36px;padding:6px 13px;border-radius:18px;border:1px solid var(--line2);background:var(--panel);font-size:13.5px;font-weight:550;color:var(--tx);text-align:left;line-height:1.3}
.clc-keuze:hover:not(:disabled){border-color:var(--tx)}
.clc-keuze.on{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
.clc-keuze:disabled{cursor:default}
.clc-keuze:disabled:not(.on){opacity:.42}
.clc-keuze.vrij{border-style:dashed;color:var(--tx2);font-weight:500}
.clc-kaart{max-width:min(560px,84%);min-width:0;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--tx);border-radius:10px;padding:11px 13px}
.clc-kkop{display:flex;gap:10px;align-items:flex-start}
.clc-kic{flex:0 0 28px;height:28px;border-radius:7px;background:var(--panel2);border:1px solid var(--line);display:grid;place-items:center;color:var(--tx2)}
.clc-ktekst{min-width:0;padding-top:3px}
.clc-ktekst b{display:block;font-size:13.5px;font-weight:600;line-height:1.4}
.clc-ktekst span{font-size:12.5px;color:var(--tx2);margin-top:3px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.clc-items{list-style:none;margin:8px 0 0 38px;padding:0;font-size:12.5px;color:var(--tx2)}
.clc-items li{padding:4px 0;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:space-between;min-width:0}
.clc-items li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.clc-items li em{font-style:normal;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.clc-items li.meer{color:var(--tx3)}
.clc-kvoet{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:9px 0 0 38px}
.clc-kvoet .clc-meta{margin:0}
.clc-typt{padding:12px 14px}
.clc-puntjes{display:inline-flex;gap:4px;align-items:center;flex:0 0 auto}
.clc-puntjes i{width:6px;height:6px;border-radius:50%;background:var(--tx3);animation:clcpunt 1.2s infinite ease-in-out}
.clc-puntjes i:nth-child(2){animation-delay:.15s}
.clc-puntjes i:nth-child(3){animation-delay:.3s}
@keyframes clcpunt{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.clc-puntjes i{animation:none;opacity:.6}}
.clc-leeg{margin:auto;text-align:center;max-width:380px;color:var(--tx2);padding:24px 8px}
.clc-leeg b{display:block;font:500 21px/1.3 var(--kopfont);color:var(--tx);margin-bottom:6px}
.clc-voet{border-top:1px solid var(--line);padding:10px 12px 8px;background:var(--panel);position:relative}
/* Desktop: de snelle vragen mogen over twee regels (met een muis is zijwaarts scrollen niet vanzelfsprekend); op de telefoon zijwaarts. */
.clc-snel{display:flex;flex-wrap:wrap;gap:6px;padding:0 0 8px}
.clc-snel::-webkit-scrollbar{display:none}
.clc-nieuw{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);z-index:7;min-height:32px;padding:5px 14px;border-radius:16px;
  border:1px solid var(--line2);background:var(--panel);color:var(--tx);font-size:12.5px;font-weight:600;box-shadow:var(--shadow);white-space:nowrap;cursor:pointer}
.clc-nieuw:hover{border-color:var(--tx)}
.clc-nieuw[hidden]{display:none}
.clc-chip{flex:0 0 auto;min-height:32px;padding:5px 12px;border-radius:16px;border:1px solid var(--line);background:var(--panel2);font-size:12.5px;color:var(--tx2);white-space:nowrap}
.clc-chip:hover{color:var(--tx);border-color:var(--line2)}
/* Chat-uploads (12-10): "Maak prompts voor mijn creative" is een chip die aan/uit kan blijven staan tot verstuurd. */
.clc-chip.on{color:var(--tx);border-color:var(--tx);background:var(--panel)}
.clc-in{display:flex;gap:8px;align-items:flex-end}
.clc-in textarea{flex:1;min-width:0;min-height:46px;max-height:180px;resize:none;padding:12px 13px;border-radius:12px;border:1px solid var(--line2);background:var(--bg);color:var(--tx);font:15px/1.45 var(--font)}
.clc-in textarea:focus{outline:none;border-color:var(--tx)}
.clc-stuur{width:46px;height:46px;padding:0!important;justify-content:center;border-radius:12px!important;flex:0 0 46px}
/* Paperclip: zelfde maat als de verstuur-knop, maar los bestandsveld (input) onzichtbaar erin, zoals .cr-fotoplus. */
.clc-clip{position:relative;width:46px;height:46px;flex:0 0 46px;display:flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--line2);color:var(--tx2);cursor:pointer}
.clc-clip:hover{color:var(--tx);border-color:var(--tx)}
.clc-clip input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.clc-clip:focus-within{outline:2px solid currentColor;outline-offset:2px}
/* Thumbnails van bijlagen op een eigen bericht (al verstuurd) — klein, naast elkaar boven de tekst. */
.clc-bijlagen{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.clc-bijlagen img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.clc-bijlvid{position:absolute;bottom:4px;right:4px;width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center}
.clc-hint{font-size:11.5px;color:var(--tx3);margin-top:5px}
.clc-op{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tx2);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:5px 5px 5px 10px;margin-bottom:8px}
.clc-op span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clc-op button{width:30px;height:30px;border-radius:6px;font-size:17px;line-height:1;color:var(--tx2)}
.clc-op button:hover{background:var(--hover)}
.clc-uitleg{font-size:13px;color:var(--tx2);margin:2px 0 0}
.clc-uitleg summary{cursor:pointer;font-weight:550;color:var(--tx);padding:6px 0}
.clc-uitleg ul{margin:4px 0 0 18px;line-height:1.6}
.pside .pnav .cnt.clc-cnt{background:#e0a33a;color:#1a1204}

/* Dispute fighter: het indienpakket per veld */
.dp-pakketten{padding:18px 20px!important;margin-bottom:14px;display:block!important}
.dp-pktitel{font-size:15px;display:block}
.dp-pakdet{border:1px solid var(--line);border-radius:10px;margin-top:8px;background:var(--panel);scroll-margin-top:76px}
.dp-pakdet > summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;list-style:none}
.dp-pakdet > summary::-webkit-details-marker{display:none}
.dp-pakdet > summary::after{content:'›';font-size:18px;color:var(--tx3);transition:transform .15s}
.dp-pakdet[open] > summary::after{transform:rotate(90deg)}
.dp-pakdet > summary > span:first-child{flex:1;min-width:0}
.dp-sum small{display:block;font-size:12.5px;color:var(--tx3);margin-top:1px}
.dp-pakdet > .dp-pak > .dp-waar{margin-top:10px}
.dp-pak{padding:4px 14px 14px;border-top:1px solid var(--line)}
.alertrow + .dp-pak,.dp-zaak + .dp-pak{border:1px solid var(--line);border-radius:10px;margin:6px 0 10px}
.dp-pakkop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;margin:10px 0 4px}
.dp-deadline{font-size:12px;font-weight:600;color:var(--amb);white-space:nowrap}
.dp-waar{margin:0 0 6px}
.dp-veld{border-top:1px solid var(--line);padding:12px 0 4px}
.dp-vkop{display:flex;gap:9px;align-items:baseline;font-size:13px;margin-bottom:7px}
.dp-vkop em{font-style:normal;color:var(--tx3)}
.dp-nr{flex:0 0 20px;height:20px;border-radius:50%;background:var(--acc);color:var(--on-acc);font-size:11px;font-weight:700;display:grid;place-items:center}
.dp-waarde{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 6px 29px}
.dp-keus{font-weight:600;background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:5px 10px}
.dp-veld > .hint,.dp-veld > .dp-check{margin-left:29px}
.dp-upload{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;margin:0 0 8px 29px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);font-size:13px}
.dp-uvak{flex:0 0 100%;font-size:12px;font-weight:650;color:var(--tx3)}
.dp-ubody{flex:1 1 220px;min-width:0;line-height:1.5}
.dp-tekst{margin:0 0 8px 29px;white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.55 var(--font);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;max-height:340px;overflow:auto}
.dp-tekst.kort{max-height:200px}
.dp-check{margin:0 0 6px 47px;font-size:13px;line-height:1.6}
.dp-pakvoet{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px;margin-top:6px}

@media (max-width:860px), (max-width:1023px) and (pointer:coarse), (max-height:500px) and (pointer:coarse){
  .clc{height:auto;overflow:visible;border:0;border-radius:0;background:transparent;margin:0 -16px 10px}
  /* statusregel ('Claude is bezig…', 'wacht tot je Claude start') blijft in beeld als het gesprek lang is */
  .clc-status{border:1px solid var(--line);border-left:0;border-right:0;padding:10px 16px;position:sticky;top:0;z-index:5;background:var(--panel2)}
  .clc-kvoet{flex-wrap:wrap;row-gap:6px}
  .clc-lijst{overflow:visible;padding:14px 12px 10px;min-height:40vh}
  /* lege chat: geen groot gat, de kaart en het invoerveld blijven samen in beeld */
  .clc-lijst:has(> .clc-leeg){min-height:24vh}
  .clc-snel{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .clc-nieuw{min-height:40px;font-size:13.5px}
  .clc-bel{max-width:86%;font-size:15px}
  .clc-kaart{max-width:calc(100% - 36px)}
  .clc-voet{position:sticky;bottom:var(--tbh);z-index:6;background:var(--bg);border-top:1px solid var(--line);padding:8px 12px 8px}
  .clc-in textarea{font-size:16px;background:var(--panel)}
  .clc-hint{display:none}
  .clc-chip{min-height:44px;font-size:13.5px}
  .clc-keuze{min-height:44px;padding:8px 14px;font-size:14.5px}
  .clc-uitleg{margin:4px 0 0}
  .clc-uitleg summary{min-height:44px;display:flex;align-items:center}
  .dp-pakketten{padding:16px 12px!important}
  .dp-pak{padding:4px 12px 12px}
  .dp-pakdet > summary{padding:11px 12px;flex-wrap:wrap}
  .dp-pakdet > summary .dp-deadline{order:3;flex:1 1 100%}
  .clc-auto{flex-wrap:wrap}
  /* de tekst over de hele breedte, de knoppen op een eigen regel eronder (niet 8 regels tekst naast de knoppen) */
  .clc-auto > span:not(.clc-dot){flex:1 1 calc(100% - 20px)}
  .clc-auto > span:not(.clc-dot) + .btn{margin-left:17px}
  .clc-auto > .clc-dot{align-self:flex-start;margin-top:7px}
  .dp-waarde,.dp-upload,.dp-tekst,.dp-veld > .hint{margin-left:0}
  .dp-check{margin-left:18px}
}

/* ---------- Claude automatisch instellen (30-09): vier stappen, één plakvak, opslaan en testen ---------- */
.ca{padding:20px 22px;margin-bottom:14px;max-width:880px}
.ca-kop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.ca-h{font-size:16.5px;line-height:1.3}
.ca-kosten{margin:12px 0 14px;padding:11px 14px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);font-size:13.5px;line-height:1.55}
.ca-stappen{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ca-stappen > li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.ca-nr{width:30px;height:30px;border-radius:50%;background:var(--acc);color:var(--on-acc,#fff);display:grid;place-items:center;font-weight:700;font-size:14px}
.ca-in{min-width:0;font-size:14px;line-height:1.6}
.ca-in p{margin:8px 0 0}
.ca-in .hint{font-size:12.5px;line-height:1.5}
.ca-titel{display:block;font-size:15px;margin:3px 0 8px}
.ca-in > .btn{margin:0 0 2px}
.ca-open{display:inline-flex;align-items:center}
.ca-knop{display:inline-block;padding:0 6px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);font-weight:600;font-size:13px;line-height:1.6;white-space:nowrap}
.ca-sub{font-weight:650}
.ca-in code{font-size:13px;padding:1px 6px;border-radius:5px;background:var(--panel2);border:1px solid var(--line)}
.ca-in kbd{font:600 12px var(--font,inherit);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 5px;background:var(--panel2)}
.ca-lijst{margin:6px 0 0;padding-left:18px}
.ca-lijst li{margin:3px 0}
.ca-doe{margin:8px 0 0;padding-left:20px;list-style:disc}
.ca-doe li{margin:7px 0;padding-left:2px}
.ca-doe li::marker{color:var(--acc)}
.ca-doe .btn{vertical-align:middle}
.ca-kopieer{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 2px}
.ca-kopieer code{font-size:14px;padding:4px 8px}
.ca-uitleg{margin:10px 0 0;border:1px dashed var(--line);border-radius:9px;padding:8px 12px;font-size:13px}
.ca-uitleg summary{cursor:pointer;font-weight:600}
.ca-uitleg p{margin:6px 0 2px}
.ca-plak{margin:12px 0 6px}
.ca-plak textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.45;min-height:74px;overflow-wrap:anywhere}
.ca-chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.ca-chip{font-size:12px;padding:3px 9px;border-radius:20px;border:1px solid var(--line);color:var(--tx3)}
.ca-chip.ok{color:var(--grn);border-color:color-mix(in srgb,var(--grn) 45%,var(--line));background:color-mix(in srgb,var(--grn) 8%,transparent)}
.ca-test{min-height:44px;padding:0 20px;font-size:14.5px}
.ca-status{margin:0 0 14px;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel)}
.ca-status.aan{border-color:color-mix(in srgb,var(--grn) 45%,var(--line))}
.ca-statuskop{display:flex;align-items:center;gap:8px;font-size:14.5px}
.ca-bol{width:10px;height:10px;border-radius:50%;background:var(--amb);flex:0 0 10px}
.ca-status.aan .ca-bol{background:var(--grn)}
.ca-opnieuw{margin-top:4px}
.ca-opnieuw > summary{cursor:pointer;font-weight:600;font-size:13.5px;padding:8px 0 10px;color:var(--tx2)}
.ca-uitkomst{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;padding:13px 16px;border-radius:12px;border:1px solid var(--line);font-size:14px;line-height:1.55}
.ca-uitkomst > div{min-width:0}
.ca-uitkomst p{margin:4px 0 0}
.ca-uitkomst ul{margin:6px 0 0;padding-left:18px}
.ca-uitkomst.ok{display:block;border-color:color-mix(in srgb,var(--grn) 50%,var(--line));background:color-mix(in srgb,var(--grn) 8%,transparent)}
.ca-uitkomst.ok > b{color:var(--grn)}
.ca-uitkomst.let,.ca-uitkomst.fout{display:block}
.ca-uitkomst.let{border-color:color-mix(in srgb,var(--amb) 50%,var(--line));background:color-mix(in srgb,var(--amb) 8%,transparent)}
.ca-uitkomst.fout{border-color:color-mix(in srgb,var(--red) 50%,var(--line));background:color-mix(in srgb,var(--red) 7%,transparent)}
.ca-uitkomst.fout > b{color:var(--red)}
.ca-stappen .ca-ctrl .ca-uitkomst{margin:12px 0 0}
@media (max-width:600px){.cr-foto button{width:32px;height:32px;top:-10px;right:-10px}}
.ca-spin{flex:0 0 18px;width:18px;height:18px;margin-top:2px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--acc);animation:robotdraai .9s linear infinite}
@media (prefers-reduced-motion:reduce){.ca-spin{animation:none}}
@media (max-width:600px){
  .ca{padding:16px 14px}
  .ca-stappen > li{grid-template-columns:minmax(0,1fr);gap:8px;padding:13px 14px}
  .ca-nr{width:26px;height:26px;font-size:13px}
  .ca-in > .btn,.ca-test,.ca-doe li > .btn:only-child{width:100%;justify-content:center}
  .ca-doe li > .btn:not(:only-child){display:flex;width:100%;justify-content:center;margin:0 0 6px}
  .ca-knop{white-space:normal}
}

/* ---------- Onderzoeken (beheerder): lijst, playbook en leesweergave ---------- */
.onz{max-width:1120px}
.onz-pb{padding:0;margin:0 0 18px;overflow:hidden}
.onz-pb > summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.onz-pb > summary::-webkit-details-marker{display:none}
.onz-pbkop{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;font-size:15.5px}
.onz-pbkop::after{content:'▾';margin-left:auto;color:var(--tx3);font-size:13px;transition:transform .15s}
.onz-pb:not([open]) .onz-pbkop::after{transform:rotate(-90deg)}
.onz-pb .chip{white-space:normal}
.onz-pbbasis{margin:0 18px 12px;padding:9px 12px;border-radius:9px;background:var(--panel2);font-size:13px;line-height:1.5}
.onz-pbgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 18px}
.onz-pbgrid section{border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-width:0;background:var(--panel)}
.onz-pbgrid section.breed{grid-column:1 / -1}
.onz-pbgrid h4{margin:0 0 8px;font-size:14px}
.onz-pbgrid ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.55}
.onz-pbgrid li{margin:0 0 5px}
.onz-pbvraag{margin-top:10px;padding:10px 12px;border-left:3px solid var(--acc);background:var(--panel2);border-radius:0 8px 8px 0;font-size:13.5px;line-height:1.55}
.onz-pbvraag p{margin:4px 0 0}
.onz-pbnoot{margin:12px 18px 16px;font-size:12.5px;color:var(--tx2);line-height:1.55;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.onz-pbnoot .btn{margin-left:auto}
.onz-zoekbalk{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.onz-zoek{flex:1 1 320px;min-width:0;height:42px}
.onz-filter button span{opacity:.6;font-weight:500;margin-left:2px}
.onz-lijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.onz-doc{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--tx);font:inherit;cursor:pointer;min-width:0;transition:border-color .13s}
.onz-doc:hover{border-color:var(--tx3)}
.onz-doc > b{font-size:14.5px;line-height:1.35}
.onz-docmeta{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;font-size:12px;color:var(--tx3)}
.onz-tref{color:var(--acc);font-weight:600}
.onz-intro{font-size:13px;color:var(--tx2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.onz-stukje{font-size:12.5px;color:var(--tx2);line-height:1.5;border-left:2px solid var(--line);padding-left:8px}
.onz-stukje em{display:block;font-style:normal;font-weight:600;color:var(--tx3);font-size:11.5px}
.onz-naam{font-size:11.5px;color:var(--tx3);overflow-wrap:anywhere}
.onz mark,.onz-art mark{background:color-mix(in srgb,var(--amb) 30%,transparent);color:inherit;border-radius:3px;padding:0 1px}
/* leesweergave */
.onz-leesbalk{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.onz-leeskop h2{font-size:24px;line-height:1.25;margin:8px 0 18px;letter-spacing:-.3px;overflow-wrap:anywhere}
.onz-leesgrid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;align-items:start}
.onz-tocdesk{position:sticky;top:calc(var(--kop,56px) + 14px);max-height:calc(100vh - var(--kop,56px) - 40px);overflow:auto;padding-right:4px}
.onz-toc{display:flex;flex-direction:column;gap:1px}
.onz-toc > b{font-size:12px;color:var(--tx3);margin:0 0 6px}
.onz-toc button{text-align:left;font:inherit;font-size:12.5px;line-height:1.35;color:var(--tx2);padding:5px 8px;border-radius:6px;background:none;border:0;cursor:pointer}
.onz-toc button:hover{background:var(--panel2);color:var(--tx)}
.onz-toc button.onz-toc3{padding-left:20px;font-size:12px;color:var(--tx3)}
.onz-tocmob{display:none}
.onz-art{min-width:0;max-width:760px;font-size:15px;line-height:1.7;color:var(--tx)}
.onz-art > :first-child{margin-top:0}
.onz-art p{margin:0 0 12px}
.onz-art h2,.onz-art h3,.onz-art h4,.onz-art h5{scroll-margin-top:calc(var(--kop,56px) + 16px);line-height:1.3;color:var(--tx)}
.onz-art h2{font-size:21px;margin:30px 0 12px}
.onz-art h3{font-size:18px;margin:28px 0 10px;padding-top:14px;border-top:1px solid var(--line)}
.onz-art h4{font-size:15.5px;margin:22px 0 8px}
.onz-art h5{font-size:14.5px;margin:18px 0 6px;color:var(--tx2)}
.onz-art ul,.onz-art ol{margin:0 0 12px;padding-left:22px}
.onz-art li{margin:0 0 5px}
.onz-art li > ul,.onz-art li > ol{margin:5px 0 4px}
.onz-art a{color:var(--acc)}
.onz-art code{font-size:.86em;padding:1px 5px;border-radius:5px;background:var(--panel2);border:1px solid var(--line);overflow-wrap:anywhere}
.onz-art pre.onz-code{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:12px 14px;overflow-x:auto;font-size:13px;line-height:1.5;margin:0 0 14px}
.onz-art pre code{background:none;border:0;padding:0}
.onz-art blockquote{margin:0 0 14px;padding:8px 14px;border-left:3px solid var(--acc);background:var(--panel2);border-radius:0 8px 8px 0;color:var(--tx2)}
.onz-art hr{border:0;border-top:1px solid var(--line);margin:24px 0}
.onz-tabel{overflow-x:auto;margin:0 0 16px;border:1px solid var(--line);border-radius:10px;-webkit-overflow-scrolling:touch}
.onz-tabel table{border-collapse:collapse;width:100%;font-size:13.5px;line-height:1.5}
.onz-tabel th,.onz-tabel td{padding:8px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.onz-tabel th{background:var(--panel2);font-weight:650;font-size:12.5px;white-space:normal;position:static;cursor:default;user-select:text;min-width:80px}
.onz-tabel tr:last-child td{border-bottom:0}
/* De algemene td-regel zet nowrap: in rapporten moet tekst in een cel gewoon doorlopen, anders zie je bij brede tabellen maar 2 kolommen. */
.onz-tabel td{min-width:90px;white-space:normal;overflow-wrap:break-word}
.onz-doclink{font:inherit;font-size:.86em;padding:1px 6px;border-radius:5px;border:1px solid color-mix(in srgb,var(--acc) 45%,var(--line));background:none;color:var(--acc);cursor:pointer;overflow-wrap:anywhere;text-align:left}
@media (max-width:900px){
  .onz-leesgrid{grid-template-columns:minmax(0,1fr);gap:0}
  .onz-tocdesk{display:none}
  .onz-tocmob{display:block;margin:0 0 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
  .onz-tocmob > summary{cursor:pointer;padding:11px 14px;font-weight:600;font-size:14px}
  .onz-tocmob .onz-toc{padding:0 8px 10px}
  .onz-tocmob .onz-toc > b{display:none}
  .onz-toc button{padding:8px;font-size:13.5px}
  .onz-lijst{grid-template-columns:minmax(0,1fr)}
  .onz-pbgrid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .onz-pb > summary{padding:14px}
  .onz-pbbasis{margin:0 14px 12px}
  .onz-pbgrid{padding:0 14px}
  .onz-pbnoot{margin:12px 14px 14px}
  .onz-pbnoot .btn{margin-left:0;width:100%}
  .onz-leeskop h2{font-size:21px}
  .onz-art{font-size:15.5px}
  .onz-art h2{font-size:19px}.onz-art h3{font-size:17px}
  .onz-filter{width:100%}
  .onz-tabel table{font-size:13px}
  /* Rapporttabellen: op de telefoon elke rij als kaartje met de kolomkop boven elke waarde (geen zijwaarts scrollen). */
  .onz-tabel.stapel{overflow:visible;border:0;border-radius:0}
  .onz-tabel.stapel thead{display:none}
  .onz-tabel.stapel table,.onz-tabel.stapel tbody,.onz-tabel.stapel tr,.onz-tabel.stapel td{display:block;width:100%}
  .onz-tabel.stapel tr{border:1px solid var(--line);border-radius:10px;margin:0 0 8px;padding:6px 0;background:var(--panel)}
  .onz-tabel.stapel td{border:0;padding:4px 12px;min-width:0;font-size:14px}
  .onz-tabel.stapel td:first-child{font-weight:650}
  .onz-tabel.stapel td[data-l]::before{content:attr(data-l);display:block;font-size:11.5px;font-weight:650;color:var(--tx3);letter-spacing:.01em}
}

/* ---------- R14 (30-09): werk voor je eigen Claude klaarzetten vanuit de hub ---------- */
.wiz-zeg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.wiz-zeg .btn{flex:0 0 auto}
.wiz-zeg .hint{font-size:11.5px;min-width:0;overflow-wrap:anywhere}
.klaar-m p{margin:0 0 10px;line-height:1.55;font-size:14px}
.klaar-m .klaar-nu{font-weight:600}
.klaar-m .klaar-kopie{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:4px 0 0;font-size:12.5px}
.ca-nieuw{margin:12px 0 0;padding:11px 14px;border-radius:10px;background:var(--panel2);border:1px solid var(--line2);font-size:13.5px;line-height:1.55}
.dz-kies{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 0 0;cursor:pointer}
.dz-kies{position:relative}
.dz-kies input[type=file]{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.dz-kies:focus-within .btn{outline:2px solid var(--acc);outline-offset:2px}
.dz-lijst{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.dz-lijst li{display:flex;align-items:center;gap:8px;font-size:12.5px;min-width:0}
.dz-lijst li a{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.werk-actie .taak-res summary{cursor:pointer;list-style:none;margin-top:3px}
.werk-actie .taak-res summary::-webkit-details-marker{display:none}
.werk-actie .taak-res div{white-space:pre-wrap;margin-top:4px}
.werk-actie .taak-st{min-width:0;margin-right:10px;font-size:11.5px;padding:1px 7px;border-radius:999px;background:var(--panel2);border:1px solid var(--line)}

/* ---------- Koppel-wizard (30-09): stand per stap, foutblok, "Wat zie je?", accounts met leesproef ---------- */
.kw-stand{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r,12px);background:var(--panel);margin:0 0 12px}
.kw-licht{flex:0 0 14px;width:14px;height:14px;border-radius:50%;background:var(--tx3);box-shadow:0 0 0 4px color-mix(in srgb,var(--tx3) 18%,transparent)}
.kw-grn .kw-licht{background:var(--grn);box-shadow:0 0 0 4px color-mix(in srgb,var(--grn) 20%,transparent)}
.kw-amb .kw-licht{background:var(--amb);box-shadow:0 0 0 4px color-mix(in srgb,var(--amb) 20%,transparent)}
.kw-rd .kw-licht{background:var(--red);box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 20%,transparent)}
.kw-stand.kw-grn{border-color:color-mix(in srgb,var(--grn) 45%,var(--line))}
.kw-stand.kw-rd{border-color:color-mix(in srgb,var(--red) 45%,var(--line))}
.kw-standtekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.kw-standtekst b{font-size:13.5px}
.kw-standtekst span{font-size:13px;color:var(--tx2);line-height:1.45}
.kw-fout{position:relative;border:1px solid var(--line);border-left:4px solid var(--amb);border-radius:var(--r,12px);padding:14px 16px 12px;margin:0 0 12px;background:color-mix(in srgb,var(--amb) 6%,var(--panel))}
.kw-fout.kw-rood{border-left-color:var(--red);background:color-mix(in srgb,var(--red) 5%,var(--panel))}
.kw-fkop{display:block;font-size:15px;margin:0 0 6px;padding-right:70px}
.kw-fout p{margin:0 0 8px;font-size:13.5px;line-height:1.55;color:var(--tx2)}
.kw-fout ol,.kw-ol{margin:4px 0 10px;padding-left:20px;font-size:14px;line-height:1.65}
.kw-fout ol li,.kw-ol li{margin:0 0 4px}
.kw-code{position:absolute;top:14px;right:14px;font-size:11px;color:var(--tx3)}
.kw-fknoppen{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kw-hulp{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.kw-kaarten{display:grid;gap:8px;margin:6px 0 4px}
.kw-kaart{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--tx);font:inherit;cursor:pointer}
.kw-kaart:hover,.kw-kaart:focus-visible{border-color:var(--acc)}
.kw-kaart b{font-size:13.5px}
.kw-kaart span{font-size:12.5px;color:var(--tx2);line-height:1.45}
.kw-vraag{padding:16px 18px;margin:0 0 12px}
.kw-vraag>b{display:block;font-size:15px;margin-bottom:6px}
.kw-vraag .hint{margin:0 0 12px;line-height:1.55}
.kw-winkel{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin:4px 0 10px;background:var(--panel2)}
.kw-winkel strong{font-size:15px}
.kw-winkel span{font-size:12.5px;color:var(--tx2)}
.kw-acclijst{display:grid;gap:6px;max-height:420px;overflow:auto}
.kw-accrij{display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:9px 11px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.kw-accrij.uit{cursor:default;background:var(--panel2)}
.kw-accrij.uit .kw-accnaam{opacity:.7}
.kw-accnaam{display:flex;flex-direction:column;min-width:0}
.kw-accnaam b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kw-accnaam em{font-style:normal;font-size:11.5px;color:var(--tx3)}
.kw-accstat{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--tx2);white-space:nowrap}
.kw-accstat i{width:9px;height:9px;border-radius:50%;background:var(--tx3)}
.kw-accstat.kw-grn i{background:var(--grn)}.kw-accstat.kw-amb i{background:var(--amb)}.kw-accstat.kw-rd i{background:var(--red)}
.kw-optioneel{display:inline-block;font-family:var(--font);letter-spacing:0;font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);color:var(--tx2);vertical-align:middle;margin-left:6px}
.kw-eig{display:grid;gap:8px;margin:10px 0 0}
.setupstappen2 span.fout,.setupstappen2 span.bijna{color:var(--tx);font-weight:600}
.setupstappen2 span.fout i{background:var(--red);border-color:var(--red);color:#fff}
.setupstappen2 span.bijna i{background:var(--amb);border-color:var(--amb);color:#fff}
@media (max-width:640px){
  .kw-stand{flex-wrap:wrap}
  .kw-stand .btn{width:100%}
  .kw-accrij{grid-template-columns:22px minmax(0,1fr);grid-template-rows:auto auto}
  .kw-accrij .kw-accstat{grid-column:2}
  .kw-accrij .btn{grid-column:2;justify-self:start}
  .kw-fkop{padding-right:0;margin-top:14px}
  .kw-code{top:10px;right:12px}
}

/* ---------- inlogpagina JDA Checkout (/checkout-login, 30-09-2026) ----------
   Zelfde inlog als de hub, eigen gezicht: links het zwarte vlak van de checkout (zoals de zijbalk
   van het checkoutdashboard) met wat een winkelier hier doet, rechts het formulier op crème.
   Op de telefoon onder elkaar: een smalle zwarte kop, dan meteen het formulier. */
#login.cklogin{display:block!important;padding:0;overflow-x:hidden;overflow-y:auto;background:var(--bg)!important}
.ckl{min-height:100%;display:grid;grid-template-columns:minmax(400px,5fr) 7fr;grid-template-rows:1fr auto;
  grid-template-areas:"merk vak" "voet vak"}
.ckl-merk{grid-area:merk;background:#141414;color:#F2F4F7;padding:40px 52px 28px;display:flex;flex-direction:column;gap:40px}
.ckl-logo{display:flex;align-items:center;gap:12px}
.ckl-logo .logo{color:#F2F4F7;width:38px;height:38px}
.ckl-logo b{display:block;font-family:var(--kopfont);font-weight:500;font-size:20px;letter-spacing:-.01em;color:#f6f1e7}
.ckl-logo em{display:block;font-style:normal;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,244,247,.55);margin-top:1px}
.ckl-pitch{margin:auto 0;max-width:470px}
.ckl-pitch h1{font-family:var(--kopfont);font-weight:500;font-size:40px;line-height:1.12;letter-spacing:-.02em;color:#f6f1e7}
.ckl-pitch ul{list-style:none;margin-top:30px;border-top:1px solid rgba(242,244,247,.14)}
.ckl-pitch li{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:13px 0;border-bottom:1px solid rgba(242,244,247,.14);font-size:14px;line-height:1.45}
.ckl-pitch li b{font-weight:600;color:#f6f1e7}
.ckl-pitch li span{color:rgba(242,244,247,.7)}
.ckl-voet{grid-area:voet;background:#141414;color:rgba(242,244,247,.5);padding:0 52px 32px;font-size:12.5px}
#login .ckl-voet a{color:rgba(242,244,247,.78);text-decoration-color:rgba(242,244,247,.3);font-size:12.5px!important;
  display:inline;min-height:0;line-height:inherit}
.ckl-vak{grid-area:vak;display:flex;align-items:center;justify-content:center;padding:56px 40px}
#login.cklogin .loginbox{width:100%;max-width:380px;padding:0;background:transparent!important;border:0!important;box-shadow:none!important}
#login.cklogin .lgkop{text-align:left;font-size:32px;line-height:1.15;letter-spacing:-.015em;margin-bottom:6px}
#login.cklogin .lgkop+p.hint{margin-top:0}
.ckl-sub{font-size:14.5px;color:var(--tx2);margin-bottom:24px}
#login.cklogin .inp{height:44px;font-size:15px}
#login.cklogin .btn.pri{height:auto;min-height:46px;font-size:14.5px}
.ckl-vergeten{margin-top:14px;font-size:13px}
.ckl-vergeten a{color:var(--tx2)}
/* herkenbaar als link: onderstreept, net als "Wachtwoord vergeten?" (de gewone a-regel haalt de streep weg) */
#login .ckl-vergeten a,#login a.ckl-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:var(--tx3)}
#login a.ckl-link{color:var(--tx);font-weight:500;font-size:inherit!important}
#login .ckl-vergeten a:hover,#login a.ckl-link:hover{text-decoration-color:currentColor}
.ckl-nieuw .ckl-meer{font-size:13px}
.ckl-nieuw .btn+.ckl-meer{margin-top:10px}
.ckl-nieuw{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px;font-size:13.5px;line-height:1.5}
.ckl-nieuw b{font-size:14px;font-weight:600;color:var(--tx)}
.ckl-nieuw span{color:var(--tx2)}
#login .ckl-nieuw .btn{display:flex;width:100%;justify-content:center;align-items:center;height:auto;min-height:44px;line-height:1.2;
  margin-top:12px;text-decoration:none;font-size:14px!important}
@media (max-width:860px){
  .ckl{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"merk" "vak" "voet"}
  .ckl-merk{padding:calc(18px + env(safe-area-inset-top)) 20px 22px;gap:16px}
  .ckl-logo .logo{width:34px;height:34px}
  .ckl-logo b{font-size:18px}
  .ckl-pitch{margin:0}
  .ckl-pitch h1{font-size:23px;line-height:1.2}
  .ckl-pitch ul{display:none}
  .ckl-vak{align-items:flex-start;padding:28px 20px 12px}
  #login.cklogin .loginbox{max-width:440px}
  #login.cklogin .lgkop{font-size:27px}
  #login.cklogin .inp{height:48px;font-size:16px}
  .ckl-sub{margin-bottom:20px}
  .ckl-vergeten{margin-top:6px}
  .ckl-nieuw{margin-top:18px;padding-top:18px}
  .ckl-nieuw .ckl-meer{font-size:14.5px}
  .ckl-voet{background:transparent;color:var(--tx3);padding:8px 20px calc(24px + env(safe-area-inset-bottom));text-align:center}
  #login .ckl-voet a{color:var(--tx2);text-decoration-color:var(--line2);display:inline-block;min-height:40px;line-height:40px}
}

/* ---------- Research-tegoed (30-09): saldo, opwaarderen, per research wat hij kostte ---------- */
.tg-kaart{margin-bottom:16px;padding:16px 18px;gap:12px;justify-content:flex-start;scroll-margin-top:84px}
.tg-rij{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tg-links{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 180px}
.tg-label{font-size:12px;font-weight:600;color:var(--tx3)}
.tg-saldo{font-family:var(--kopfont);font-size:32px;font-weight:500;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.tg-op{min-height:44px;padding:0 20px;font-size:14.5px;justify-content:center}
.tg-kies{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px}
.tg-bedrag{justify-content:center;min-height:54px;font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.tg-bedrag:hover{border-color:var(--acc)}
.tg-kort-uitleg,.tg-veilig{font-size:13px;line-height:1.55}
.tg-melding{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:10px;border:1px solid;font-size:14px;line-height:1.5}
.tg-melding span{flex:1}
.tg-laag{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13.5px}
.tg-laag span{flex:1 1 220px}
.tg-uitleg{list-style:none;display:grid;gap:8px;font-size:14px;color:var(--tx2);line-height:1.55}
.tg-uitleg li{padding-left:14px;position:relative}
.tg-uitleg li:before{content:'';position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--tx3)}
.tg-uitleg b{color:var(--tx);font-weight:600}
.tg-kop{font-size:15px;font-weight:600;margin:6px 0 0}
.tg-lijst{display:flex;flex-direction:column}
.tg-res{padding:11px 0;border-top:1px solid var(--line)}
.tg-res-kop{display:flex;align-items:center;gap:8px}
.tg-res-kop b{font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tg-prijs{margin-left:auto;font-weight:600;font-size:14.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tg-prijs.nul{color:var(--tx3)}
.tg-prijs.bezig{color:var(--amb);font-weight:500;font-size:13px}
.tg-res-sub{font-size:13px;color:var(--tx2);margin-top:2px}
.tg-res .hint{font-size:12.5px;margin-top:2px}
.tg-bew summary{cursor:pointer;font-size:13.5px;font-weight:600;padding:8px 0;min-height:44px;display:flex;align-items:center}
.tg-bew-rij{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.tg-bew-rij span{flex:1;min-width:0}
.tg-bew-rij small{display:block;color:var(--tx3);font-size:12px}
.tg-bew-rij b{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.tg-bew-rij b.plus{color:var(--grn)}
.tg-kaart .tg-naar{align-self:flex-start;padding:0 2px;min-height:40px;margin-top:-4px}
@media (max-width:720px){
  .tg-kaart{padding:14px}
  .tg-op{flex:1 1 100%;min-height:48px}
  .tg-saldo{font-size:30px}
}
/* beheer */
.tgb-status{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.tgb-knoppen{display:flex;gap:8px;flex-wrap:wrap}
.tgb-maand{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tgb-maand select{width:auto}
.tgb-inst{margin-bottom:14px}
.tgb-inst summary{cursor:pointer;display:flex;gap:10px;align-items:center;flex-wrap:wrap;list-style:none}
/* herstel 2: zichtbaar dat hier iets openklapt (display:flex haalt het standaardpijltje weg) */
.tgb-inst summary::-webkit-details-marker{display:none}
.tgb-pijl{display:inline-block;width:14px;color:var(--tx2);font-size:15px;line-height:1;transition:transform .15s}
.tgb-inst[open] .tgb-pijl{transform:rotate(90deg)}
.tgb-open{margin-left:auto;font-size:13px;font-weight:600;padding:7px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--tx)}
.tgb-open::after{content:'Openen'}
.tgb-inst[open] .tgb-open::after{content:'Sluiten'}
.tgb-inst summary:hover .tgb-open{border-color:var(--acc)}
.tgb-prijs{margin-bottom:14px;display:flex;flex-direction:column;gap:10px}
.tgb-prijs-kop{display:flex;gap:4px 12px;align-items:baseline;flex-wrap:wrap}
.tgb-prijs .tgb-prijszin,.tgb-prijs p.hint{margin:0}
.tgb-tbl td{vertical-align:top}
.tgb-tbl td small{display:block;font-size:12px;margin-top:3px;white-space:normal}
.tgb-tbl .tgb-st{white-space:normal;min-width:140px;max-width:320px}
.tgb-fout{color:var(--amb);font-size:12.5px;line-height:1.45}
.tgb-tbl .tgb-bon{white-space:nowrap;width:1%}
.tgb-tbl .tgb-term{white-space:normal;min-width:110px;max-width:240px}
.tgb-tbl tr.tgb-hoofd td{border-bottom:none;padding-bottom:3px}
.tgb-tbl tr.tgb-onder td{white-space:normal;color:var(--tx2);font-size:12.5px;line-height:1.45;padding-top:0}
.tgb-smal .tgb-bon small{margin-left:6px;align-self:center}
.tgb-velden{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:14px 0}
.tgb-veld{display:flex;flex-direction:column;gap:4px;font-size:12.5px}
.tgb-veld small{color:var(--tx3);font-size:11.5px}
.tgb .tbl select{min-width:110px}
/* herstel 30-09: bedragknoppen zeggen dat ze betalen; prijszin; aanpassen als formulier; per student als kaartje op smal scherm */
.tg-kies-uitleg{font-size:14px;line-height:1.5;margin:0;color:var(--tx)}
.tg-bedrag{flex-direction:column;gap:1px;line-height:1.15}
/* herstel 2: bedragen met centen (vaste prijs € 14,85) niet over twee regels */
.tg-bedrag span{white-space:nowrap}
.tg-kies .tg-bedrag{padding-left:6px;padding-right:6px}
.tg-bedrag small{font-size:12px;font-weight:500;color:var(--tx2)}
.tgb-prijszin{font-size:14px;line-height:1.6;margin:0 0 14px;padding:10px 14px;border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:8px}
.tgb-corr{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0 0 14px;display:flex;flex-direction:column;gap:10px}
.tgb-corr-velden{display:grid;grid-template-columns:minmax(140px,190px) 1fr;gap:10px}
.tgb-smal{display:none}
@media (max-width:720px){
  .tgb-breed{display:none}
  .tgb-smal{display:flex;flex-direction:column}
  .tgb-stud{padding:12px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
  .tgb-stud-kop{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:15px}
  .tgb-stud-sub{font-size:13px;color:var(--tx2);line-height:1.5}
  .tgb-stud-knoppen{display:flex;gap:8px;flex-wrap:wrap}
  .tgb-stud-knoppen select{flex:1 1 160px;min-height:44px}
  .tgb-stud-knoppen .btn{min-height:44px}
  .tgb-corr-velden{grid-template-columns:1fr}
  /* herstel 2: knop Openen/Sluiten op de eerste regel, de uitleg eronder */
  .tgb-inst summary .hint{order:3;flex-basis:100%;padding-left:24px}
}
/* melding() is gemaakt voor het oude donkere inlogscherm; op crème de kleuren van het thema */
#login.cklogin .warn[style*="ff9a9a"]{color:var(--red)!important}
#login.cklogin .warn[style*="7ce8b4"]{color:#24603a!important}
/* Research 30-09 (3): comp-KPI (≥ 25 actieve ads), niche/soort, ingeklapte groep 'Onder de KPI', comp-geheugen en comps aanvragen */
.rs2-kpi{display:flex;gap:10px 14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:0 0 12px;padding:9px 12px;border:1px solid color-mix(in srgb,var(--grn) 35%,var(--line));background:color-mix(in srgb,var(--grn) 7%,var(--panel));border-radius:var(--r)}
.rs2-kpi>div{min-width:0;flex:1 1 320px}
.rs2-kpi b{font-size:13.5px;color:var(--tx)}
.rs2-kpi .hint{display:block;font-size:12px;margin-top:2px}
.rs2-comp{margin-bottom:8px}
.rs2-ns{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:11.5px;color:var(--tx3);margin:0}
.rs2-ns span+span::before{content:'·';margin-right:8px;color:var(--tx3)}
.rs2-ns .chip{font-size:10.5px;padding:1px 7px}
.rs2-ns label{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--tx2)}
.rs2-ns label .inp{width:auto;min-width:0;max-width:220px}
@media(max-width:720px){.rs2-ns label{flex:1 1 100%;min-width:0}.rs2-ns label .inp{flex:1 1 auto;width:100%!important;max-width:100%!important;min-width:0}}
.rs2-onder,.rs2-geheugen{background:var(--panel);border:1px dashed var(--line);border-radius:var(--r);padding:10px 14px;margin:14px 0 0}
.rs2-geheugen{border-style:solid;margin:0 0 12px}
.rs2-onder summary,.rs2-geheugen summary{cursor:pointer;display:flex;gap:4px 10px;align-items:baseline;flex-wrap:wrap;list-style:none}
.rs2-onder summary::-webkit-details-marker,.rs2-geheugen summary::-webkit-details-marker{display:none}
.rs2-onder summary b::before,.rs2-geheugen summary b::before{content:'▸';display:inline-block;margin-right:6px;color:var(--tx3);transition:transform .15s}
.rs2-onder[open] summary b::before,.rs2-geheugen[open] summary b::before{transform:rotate(90deg)}
.rs2-onder[open]>.rs2-grid{margin-top:12px;opacity:.8}
.rs2-kpiform{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end;margin:12px 0}
.rs2-kpiform .f{margin:0}
.rs2-kpiform .inp{width:110px}
.rs2-kpiform .hint{flex:1 1 260px;font-size:12px}
.rs2-geh .rs2-dbr{grid-template-columns:70px repeat(5,minmax(52px,76px)) minmax(0,1fr)}
.rs2-geh .rs2-dbr>span:last-child{text-align:left}
.rs2-geh .rs2-dbr.tot{font-weight:600}
.rs2-kok{color:var(--grn)}
.rs2-knee{color:var(--red)}
.rs2-comps{padding:14px 16px;margin:0 0 14px}
.rs2-ckop b{font-size:15px;display:block}
.rs2-ckop .hint{display:block;font-size:12.5px;margin-top:2px}
.rs2-cform{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.rs2-cform .inp{width:auto;flex:0 1 190px;min-width:0}
.rs2-cvink{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--tx2);flex:1 1 220px}
.rs2-cuit{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--panel2);border:1px solid var(--line)}
.rs2-cuit ul{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.rs2-cuit li{font-size:12.5px}
.rs2-cuit li small{color:var(--tx3)}
.rs2-cfout{margin:10px 0 0;color:var(--red);font-size:12.5px}
.rs2-cgrens{display:block;margin-top:6px;font-size:12px;color:var(--tx2)}
.rs2-cgrens.vol{color:var(--amb);font-weight:600}
.rs2-cform .btn .rs2-n{margin-left:4px}
.rs2-kbron{font-size:11.5px;color:var(--tx3);margin:-2px 0 0;overflow-wrap:anywhere}
.rs2-kbron b{color:var(--pur);font-weight:600}
.rs2-bewijs{margin:0;font-size:12px;overflow-wrap:anywhere}
.rs2-kpi .btn.on{border-color:var(--pur);color:var(--pur)}
.rs2-chip.st-onderKPI:not(.on){border-color:color-mix(in srgb,var(--pur) 45%,var(--line))}
.rs2-badges b.st-onderKPI{background:color-mix(in srgb,var(--pur) 85%,#000)}
@media(max-width:720px){
  .rs2-cform .inp{flex:1 1 calc(50% - 4px)}
  .rs2-cform .btn{flex:1 1 100%}
  .rs2-geh .rs2-dbr{grid-template-columns:minmax(0,1fr) !important}
  .rs2-kpi .btn{flex:1 1 100%}
}

/* ---------- Affiliates (beheer, 30-09) ---------- */
.afp{display:flex;flex-direction:column;gap:14px;min-width:0}
.afp .card{min-width:0}
.afp-uitleg summary{cursor:pointer;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.afp-stappen{margin:12px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.afp-stappen li{font-size:13.5px;line-height:1.55;color:var(--tx2)}
.afp-stappen b{color:var(--tx)}
.afp-kpis{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.afp-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.afp-kop h3{margin:0}
.afp-tbl td{vertical-align:top}
.afp-tbl .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.afp-naam{display:flex;flex-direction:column;gap:3px;min-width:0}
.afp-naam small{color:var(--tx3);font-size:11.5px;line-height:1.35}
.afp-naam span:empty{display:none}
.afp-geenapi{font-size:11px;color:var(--tx3)}
.afp-tbl tr.afp-open td{background:var(--panel2)}
.afp-detailrij>td{padding:0!important;background:var(--panel2)}
.afp-totaal td{border-top:2px solid var(--line)}
.afp-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 24px;padding:14px 16px 16px;border-top:1px solid var(--line)}
.afp-detail h4{font-size:12px;color:var(--tx3);margin:0 0 8px}
.afp-detail h4:not(:first-child){margin-top:16px}
.afp-detail p{font-size:13px;line-height:1.55;margin:0 0 8px;overflow-wrap:anywhere}
.afp-link a{overflow-wrap:anywhere}
.afp-velden{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 10px}
.afp-veld{display:flex;flex-direction:column;gap:4px;font-size:12.5px;min-width:0}
.afp-veld .inp{width:100%;min-width:0}
.afp-breedveld{grid-column:1/-1}
.afp-knoppen{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.afp-csv{cursor:pointer}
.afp-rij{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.afp-rij select{flex:1 1 180px;min-width:0}
.afp-gebruikers,.afp-regels{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column}
.afp-gebruikers li,.afp-regels li{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.afp-gebruikers li small,.afp-regels li small{flex-basis:100%;color:var(--tx3);font-size:11.5px;overflow-wrap:anywhere}
.afp-gebruikers li .btn,.afp-regels li .btn{margin-left:auto}
.afp-form{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0 0 12px;display:flex;flex-direction:column;gap:10px}
.afp-voet{margin:10px 0 0}
.afp-verborgen{margin-top:10px}
.afp-verborgen summary{cursor:pointer;color:var(--tx3);font-size:13px}
.afp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.afp-api-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:10px}
.afp-api{border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-width:0}
.afp-api-kop{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.afp-api .hint{font-size:12.5px;line-height:1.5}
.afp-api-stand{font-size:12.5px;color:var(--tx2);margin:0 0 8px}
.afp-api .warn{margin:0 0 8px}
.afp-scan p{margin:0 0 10px}
.afp-scan h4{font-size:13px;margin:14px 0 4px}
.afp-fouten{margin:6px 0}
.afp-fouten summary{cursor:pointer;font-size:13px;color:var(--amb)}
.afp-fouten ul{margin:6px 0 0;padding-left:18px;font-size:12.5px;color:var(--tx2)}
.afp-smal{display:none}
@media (max-width:1000px){
  .afp-breed{display:none}
  .afp-smal{display:flex;flex-direction:column}
  .afp-kaart{padding:12px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;min-width:0}
  .afp-kaart-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .afp-kaart-bedrag{display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap}
  .afp-kaart-bedrag small{color:var(--tx3);font-size:11.5px}
  .afp-kaart-sub{font-size:12.5px;color:var(--tx2);line-height:1.5;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
  .afp-kaart-knop{align-self:flex-start;min-height:40px}
  .afp-kaart .afp-detail{grid-template-columns:1fr;padding:12px 0 4px;border-top:1px dashed var(--line)}
  .afp-kaart-totaal{font-size:14px}
  .afp-api-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .afp-velden{grid-template-columns:1fr}
  .afp-knoppen .btn,.afp-rij .btn{min-height:44px}
  .afp-veld .inp,.afp-rij select{min-height:44px}
}

/* ---------- koppel-wizard, herstel 30-09 (controle): leesbaar voor 40-70, hoofdknop niet achter de voet ---------- */
.pmain:has(.wizvoet) .hint,.pmain:has(.cw-voet) .hint,#shopwiz .hint,.kw-ovl .hint{font-size:13.5px}
.kw-kaarten .kw-kaart span{font-size:13.5px;color:var(--tx2)}
.kw-fout .kw-nietbij{margin:8px 0 10px;font-size:13.5px;color:var(--tx2)}
.setupbalk .sbreden{flex:1 1 100%;order:3;margin:0;font-size:13.5px;line-height:1.45;color:var(--red);font-weight:600}
.setupbalk .sbdetails summary .sbvolg{white-space:normal}
@media (max-width:640px){
  #shopwiz .kw-kopieer{width:100%!important;justify-content:center;min-height:44px}
  /* Staat Volgende nog uit, dan hoeft de voet niet te zweven: anders viel "Koppelen met Facebook" half achter de voet. */
  .wizvoet:has(button[data-act="wizverder"][disabled]){position:static}
  .setupbalk.sbkompakt:has(.sbreden){flex-wrap:wrap!important}
}
.afp-tbl td{white-space:normal}
.afp-tbl td.num{white-space:nowrap}
.afp-tbl .afp-kol-naam{width:30%}
.afp-detail{white-space:normal}
.afp-api .hint{margin-bottom:10px}

/* ---------- koppel-wizard, herstelronde 2 (30-09): hulpknoppen zien eruit als knoppen (40-70) ----------
   "Het lukt niet", "Ik kom er niet uit", "Lukt het niet bij deze stap?" en "Wat nu?" waren spookknoppen (geen rand, 12,5 px):
   ze lazen als een bijschrift, terwijl de foutteksten ernaar verwijzen. Nu met rand, 14 px, en "Ik kom er niet uit" valt het
   meest op (rand in de accentkleur, met een vraagteken). Op de telefoon over de volle breedte. */
.kw-hulp .btn,.kw-nietbij .btn,.kw-acc [data-kw=kies],#shopwiz [data-kw=lukt],.kw-ovl .kw-fknoppen .btn.gh,.kw-ovl .hint .btn.gh{border:1px solid var(--line2,var(--line));background:var(--panel);font-size:14px;min-height:38px;padding-left:14px;padding-right:14px;box-shadow:none}
.kw-hulp .btn:hover,.kw-nietbij .btn:hover,.kw-acc [data-kw=kies]:hover,#shopwiz [data-kw=lukt]:hover{border-color:var(--acc);background:var(--panel)}
.kw-hulp [data-kw=hulp],.kw-nietbij [data-kw=hulp],.kw-ovl [data-kw=hulp]{border-color:var(--acc)!important;font-weight:600}
.kw-hulp [data-kw=hulp]::before,.kw-nietbij [data-kw=hulp]::before,.kw-ovl [data-kw=hulp]::before{content:'?';display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--acc);color:var(--on-acc,#fff);font-size:11.5px;font-weight:700;margin-right:7px;flex:0 0 18px}
.kw-hulp{border-top-style:solid}
@media (max-width:640px){
  .kw-hulp .btn,#shopwiz [data-kw=lukt]{flex:1 1 100%;width:100%;justify-content:center;min-height:44px}
  .kw-hulp .hint{flex:1 1 100%}
}
/* ---------- koppel-wizard, herstelronde 3 (30-09): één hulpknop "Ik kom er niet uit", altijd in beeld onderin het scherm ----------
   Op de telefoon boven de onderbalk én boven de plakkende Vorige/Volgende-balk, zodat hij nooit iets anders afdekt. */
.kw-hulpvast{position:fixed;right:24px;bottom:24px;z-index:30}
.kw-hulpvast .btn,.kw-hulpinvenster .btn{display:inline-flex;align-items:center;border:1.5px solid var(--acc);background:var(--panel);color:var(--tx);font-size:14.5px;font-weight:600;min-height:46px;padding:0 18px 0 12px;border-radius:999px;box-shadow:var(--shadow)}
.kw-hulpinvenster .btn{box-shadow:none;min-height:42px}
.kw-hulpvast .btn::before,.kw-hulpinvenster .btn::before{content:'?';display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--acc);color:var(--on-acc,#fff);font-size:13px;font-weight:700;margin-right:8px;flex:0 0 22px}
.kw-hulpvast .btn:hover,.kw-hulpinvenster .btn:hover{background:var(--panel2,var(--panel))}
.pmain:has(.kw-hulpvast){padding-bottom:104px}
.kw-coachdeel{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
/* Op de telefoon geen zwevende knop over de tekst, maar een vaste strook net boven de onderbalk (zoals de onderbalk zelf):
   de tekst schuift eronder door en blijft helemaal leesbaar. Een plakkende Vorige/Volgende-balk komt erboven. */
@media (max-width:640px){
  .kw-hulpvast{left:0;right:0;bottom:var(--tbh);padding:8px 16px;background:var(--bg);border-top:1px solid var(--line)}
  .kw-hulpvast .btn{width:100%;justify-content:center;min-height:44px;box-shadow:none}
  .pmain:has(.kw-hulpvast){padding-bottom:calc(var(--tbh) + 96px)!important}
  .pmain:has(.kw-hulpvast) .wizvoet,.pmain:has(.kw-hulpvast) .cw-voet{bottom:calc(var(--tbh) + 61px)}
  .wizvoet:has(button[data-act="wizklaar"][disabled]){position:static}
}
/* Claude-wizard: een stap die opnieuw moet (nieuwe skillversie, skill mist) is oranje, niet groen. */
.cw-balk li.lo button{background:var(--amb);border-color:var(--amb);color:#fff}
.kw-tokenfout .kw-fkop{padding-right:0}
/* C3 (30-09): "Deze connectoren heeft je Claude nodig" + test per connector in de Claude-wizard. */
.cwc{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:14px 16px;margin:0 0 14px;max-width:680px}
.cwc-kop{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:0 0 8px}
.cwc-kop b{font-size:15px}
.cwc-kop span{font-size:12px;color:var(--tx3)}
.cwc-rij{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.cwc-ic{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:var(--panel2);color:var(--tx3);border:1px solid var(--line)}
.cwc-grn .cwc-ic{background:var(--grn);border-color:var(--grn);color:#fff}
.cwc-amb .cwc-ic{background:var(--amb);border-color:var(--amb);color:#fff}
.cwc-rd .cwc-ic{background:var(--red);border-color:var(--red);color:#fff}
.cwc-tekst{min-width:0;flex:1}
.cwc-naam{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.cwc-naam b{font-size:14px}
.cwc-tag{font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--panel2);color:var(--tx2);border:1px solid var(--line)}
.cwc-tag.verpl{background:var(--acc);border-color:var(--acc);color:var(--on-acc,#fff)}
.cwc-tekst em{display:block;font-style:normal;font-size:12.5px;color:var(--tx2);margin-top:2px;line-height:1.45}
.cwc-fix{margin:6px 0 0;font-size:12.5px;line-height:1.5;padding:7px 10px;border-radius:8px;background:var(--panel2);border-left:3px solid var(--red)}
.cwc-amb .cwc-fix{border-left-color:var(--amb)}
.cwc-niet{border-top:1px solid var(--line);padding-top:10px;margin-top:2px}
.cwc-niet>b{font-size:13px}
.cwc-niet p{margin:6px 0 0;font-size:12.5px;color:var(--tx2);line-height:1.5}
.cwc-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.cwc-chips span{font-size:11.5px;padding:2px 8px;border-radius:999px;background:var(--panel2);color:var(--tx3);border:1px solid var(--line);text-decoration:line-through;text-decoration-color:var(--tx3)}
.cwc-chips span.heb{text-decoration:none;color:var(--amb);border-color:var(--amb);font-weight:600}
.cwc-nieuw{display:block;font-size:12.5px;line-height:1.5;padding:9px 12px;border-radius:8px;background:var(--panel2);border:1px dashed var(--acc);margin:0 0 12px;max-width:680px}
.cwc-nieuw .btn{margin-left:6px;vertical-align:middle}
.cwc-stap{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line);max-width:680px}
.cwc-snr{flex:0 0 26px;height:26px;border-radius:50%;background:var(--acc);color:var(--on-acc,#fff);display:grid;place-items:center;font-weight:700;font-size:13px}
.cwc-sin{min-width:0;flex:1}
.cwc-skop{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:14.5px;margin:3px 0 8px}
.cwc-test{margin-top:4px}
.cwc-oorzaak{border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;max-width:680px;margin:0 0 12px}
.cwc-oorzaak summary{cursor:pointer;font-weight:600;font-size:13.5px}
.cwc-orij{padding:8px 0;border-top:1px solid var(--line);font-size:12.5px;line-height:1.5;display:flex;flex-direction:column;gap:2px}
.cwc-orij:first-of-type{margin-top:8px}
.cwc-orij span{color:var(--tx2)}
.cw-mtabs{display:flex;gap:4px;align-items:center;width:100%;flex-wrap:wrap}
.cw-mtabs>span{padding:3px 8px;border-radius:6px;color:var(--tx3)}
.cw-mtabs>span.aan{background:var(--panel);color:var(--tx);font-weight:600}
.cw-mtabs .cw-madd{margin-left:auto}
.cw-mmenu{align-self:flex-end;padding:4px 10px;border-radius:7px;background:var(--panel);border:1px solid var(--line);font-weight:600;box-shadow:0 0 0 2px #d97757}
.cw-mdialoog>b{font-size:12.5px}
.cw-mklein{font-style:normal;font-size:10.5px;color:var(--tx3)}
.cw-mchat{padding:12px;display:flex;flex-direction:column;gap:8px}
.cw-minvoer{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--panel)}
.cw-mplaats{color:var(--tx3)}
.cw-mmenu2{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:4px 10px;max-width:260px}
.cw-mmenu2 .cw-mrij:last-child{border-bottom:0}
@media (max-width:640px){
  .cwc{padding:12px}
  .cwc-stap{gap:10px}
  .cw-mtabs .cw-madd{margin-left:0}
}
/* C2.1/C2.6 (30-09): bovenaan de inbox hoe het bij deze student werkt; tijdlijn per gesprek. */
.ib-route{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;padding:10px 14px;margin:0 0 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);font-size:13px;line-height:1.5}
.ib-route.proef{border-style:dashed;border-color:var(--amb)}
.ib-routechips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ib-routechips i{font-style:normal;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:var(--tx2)}
.ib-routechips i.ja{color:var(--grn);border-color:var(--grn)}
.ib-routechips i.nee{color:var(--tx2)}
.ib-tijdlijn{margin:8px 0 0;font-size:12px;line-height:1.6}
.ib-tijdlijn b{font-weight:600;color:var(--tx)}

/* ---------- Mijn creatives (C1, 30-09): nieuwste opdracht groot, historie ernaast ---------- */
.cr-resbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.cr-resbar .hint{flex:1 1 160px;margin:0}
.cr-resgrid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:18px;align-items:start}
.cr-hoofd{min-width:0;grid-column:1;grid-row:1}
.cr-hist{grid-column:2;grid-row:1;position:sticky;top:12px;max-height:calc(100vh - 24px);display:flex;flex-direction:column;gap:8px;min-width:0;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.cr-hist-kop{display:flex;align-items:center;gap:8px}
.cr-hist-kop b{font-size:13.5px}
.cr-hist-zoek{flex:1;min-width:0;height:32px;padding:4px 10px;font-size:13px}
.cr-hist-filter{display:flex;gap:4px;flex-wrap:wrap}
.cr-hist-filter button{font:inherit;font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--tx2);cursor:pointer}
.cr-hist-filter button.on{background:var(--acc);border-color:var(--acc);color:var(--on-acc,#fff)}
.cr-hist-lijst{display:flex;flex-direction:column;gap:6px;overflow:auto;min-height:0;margin:0 -4px;padding:0 4px 2px}
.cr-hist-item{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;align-items:center;text-align:left;padding:6px;border-radius:10px;border:1px solid transparent;
  background:none;color:inherit;font:inherit;cursor:pointer;width:100%}
.cr-hist-item:hover{background:var(--hover)}
.cr-hist-item.on{border-color:var(--acc);background:var(--panel2)}
.cr-hist-th{position:relative;width:56px;height:56px;border-radius:8px;overflow:hidden;background:var(--panel2);border:1px solid var(--line);display:block}
.cr-hist-th img{width:100%;height:100%;object-fit:cover;display:block}
.cr-hist-th i{position:absolute;inset:0;background:linear-gradient(135deg,var(--panel2),var(--hover));display:grid;place-items:center;font-style:normal;font-family:Georgia,serif;font-size:20px;color:var(--tx3)}
.cr-hist-th em{position:absolute;right:3px;bottom:3px;font-style:normal;font-size:10.5px;font-weight:700;padding:0 5px;border-radius:6px;background:rgba(0,0,0,.62);color:#fff}
.cr-hist-tx{min-width:0;display:flex;flex-direction:column;gap:1px}
.cr-hist-tx b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-hist-tx>span{font-size:12px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-hist-tx small{font-size:11.5px;color:var(--tx3);display:flex;align-items:center;gap:5px}
.cr-dot{width:7px;height:7px;border-radius:50%;background:var(--tx3);flex:0 0 7px;display:inline-block}
.cr-dot.grn{background:var(--grn)}.cr-dot.amb{background:var(--amb)}.cr-dot.rd{background:var(--red)}.cr-dot.blu{background:var(--blu,var(--acc))}
.cr-hist-leeg{margin:6px 2px}
.cr-res{padding:18px 20px;margin:0 0 14px}
.cr-res-kop{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.cr-res-kopt{min-width:0}
.cr-res h2{margin:0;font-size:19px;line-height:1.3;overflow-wrap:anywhere}
.cr-res-meta{font-size:12.5px;color:var(--tx3);margin-top:2px}
.cr-res-kop .crea-oordeel{flex:0 0 auto;margin:3px 0 0;font-size:12px;padding:2px 8px}
.cr-brief{margin:12px 0 0;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.cr-brief>summary{list-style:none;display:flex;gap:10px;align-items:baseline;padding:9px 12px;cursor:pointer}
.cr-brief>summary::-webkit-details-marker{display:none}
.cr-brief-kort{flex:1;min-width:0;font-size:13.5px;color:var(--tx2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cr-brief-kort b{color:var(--tx);margin-right:4px}
.cr-brief[open] .cr-brief-kort{-webkit-line-clamp:unset;display:block}
.cr-meer{font-size:12px;color:var(--tx2);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.cr-brief[open] .cr-meer{visibility:hidden}
.cr-brief-dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 14px;margin:0;padding:0 12px 12px;font-size:13px}
.cr-brief-dl dt{color:var(--tx3)}
.cr-brief-dl dd{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.cr-tijdlijn{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column}
.cr-tijdlijn li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;position:relative;padding:0 0 12px}
.cr-tijdlijn li:last-child{padding-bottom:0}
.cr-tijdlijn li::before{content:"";position:absolute;left:7px;top:14px;bottom:-2px;width:2px;background:var(--line)}
.cr-tijdlijn li:last-child::before{display:none}
.cr-tl-bol{width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);background:var(--panel);margin-top:2px;box-sizing:border-box}
.cr-tijdlijn li.klaar .cr-tl-bol{background:var(--grn);border-color:var(--grn)}
.cr-tijdlijn li.klaar::before{background:color-mix(in srgb,var(--grn) 45%,var(--line))}
.cr-tijdlijn li.nu .cr-tl-bol{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)}
.cr-tijdlijn li.let .cr-tl-bol{background:var(--amb);border-color:var(--amb)}
.cr-tijdlijn li.fout .cr-tl-bol{background:var(--red);border-color:var(--red)}
.cr-tijdlijn b{font-size:13.5px;font-weight:600}
.cr-tijdlijn li:not(.klaar):not(.nu):not(.let):not(.fout) b{color:var(--tx3);font-weight:500}
.cr-tijdlijn time{font-size:12.5px;color:var(--tx3);margin-left:4px;font-variant-numeric:tabular-nums}
.cr-tl-x{font-size:12.5px;margin-left:4px}
.cr-tl-uitleg{margin:10px 0 0;padding:9px 12px;border-radius:8px;font-size:13px;line-height:1.55;color:var(--tx2);background:var(--panel2);border:1px solid var(--line)}
.cr-tl-uitleg.fout{border-color:color-mix(in srgb,var(--red) 40%,var(--line));background:color-mix(in srgb,var(--red) 6%,var(--panel))}
.cr-tl-uitleg .btn{margin-left:4px;vertical-align:baseline}
@media (min-width:861px){
  .cr-tijdlijn{flex-direction:row;flex-wrap:wrap;gap:6px 0}
  .cr-tijdlijn li{flex:1 1 0;min-width:130px;grid-template-columns:16px minmax(0,1fr);padding:0 12px 0 0}
  .cr-tijdlijn li::before{left:22px;right:12px;top:8px;bottom:auto;width:auto;height:2px}
  .cr-tijdlijn li>div{padding-top:20px;margin-left:-26px}
  .cr-tijdlijn li b{display:block;line-height:1.35}
  .cr-tijdlijn time{display:block;margin:1px 0 0}
  .cr-tl-x{display:block;margin:1px 0 0}
}
.cr-opm{margin:14px 0 0;border-left:3px solid var(--line2);padding:2px 0 2px 12px}
.cr-opm>summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.cr-opm>summary::-webkit-details-marker{display:none}
.cr-opm>summary b{font-size:12.5px}
.cr-opm>summary span{font-size:13px;color:var(--tx2)}
.cr-opm>summary span::after{content:" Lees alles";color:var(--tx);text-decoration:underline;text-underline-offset:3px;font-size:12px}
.cr-opm[open]>summary span{display:none}
.cr-opm p{margin:6px 0 0;font-size:13px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.cr-fwanalyse{margin-top:6px;display:flex;flex-direction:column;gap:4px}
.cr-fwanalyse div{font-size:13px;line-height:1.5}
.cr-fwanalyse div b{margin-right:4px}
.cr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:16px 0 4px}
.cr-grid.een{grid-template-columns:minmax(0,420px)}
.cr-tegel{margin:0;min-width:0}
.cr-tegel-beeld{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel2);cursor:zoom-in;position:relative;aspect-ratio:1}
.cr-tegel-beeld img,.cr-tegel-beeld video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.cr-tegel-beeld:hover img{transform:scale(1.02)}
.cr-tegel-beeld:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.cr-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;font-size:16px}
.cr-tegel figcaption{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:6px;font-size:12.5px;color:var(--tx2)}
.cr-tegel figcaption span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Eenvoud 01-10: Varianten + Download per beeld, Alles downloaden boven de beelden, snelkeuzes, foto's slepen. */
.cr-tegel figcaption:has(.cr-tegel-knop .btn + .btn){flex-wrap:wrap}
.cr-tegel figcaption:has(.cr-tegel-knop .btn + .btn)>span:first-child{flex:1 1 100%}
.cr-tegel figcaption .cr-tegel-knop{display:flex;gap:6px;flex-shrink:0;overflow:visible;max-width:100%}
.cr-tegel figcaption .cr-tegel-knop .btn{min-width:0}
.cr-galbalk{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 -6px}
.cr-galbalk b{font-size:14px}.cr-galbalk b span{color:var(--tx2);font-weight:500;margin-left:4px}
.cr-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 4px}
.cr-chips>span{font-size:12.5px;color:var(--tx2);margin-right:2px}
.cr-chip{font:inherit;font-size:12.5px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel2);color:inherit;cursor:pointer}
.cr-chip:hover{border-color:currentColor}
.cr-chip:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.cr-stap.cr-sleep{outline:2px dashed currentColor;outline-offset:4px;border-radius:var(--r)}
.cr-lb-kop .cr-lb-var{background:transparent;color:#F2F4F7;border-color:#F2F4F7}
.cr-wachtgrid .cr-tegel-leeg{aspect-ratio:1;border-radius:10px;border:1px dashed var(--line2);background:linear-gradient(100deg,var(--panel2) 30%,var(--hover) 50%,var(--panel2) 70%);background-size:200% 100%;animation:cr-glans 1.6s linear infinite}
@keyframes cr-glans{from{background-position:120% 0}to{background-position:-80% 0}}
@media (prefers-reduced-motion:reduce){.cr-wachtgrid .cr-tegel-leeg{animation:none}}
.cr-netwerk{margin:12px 0 4px;padding:12px 14px;border-radius:10px;border:1px solid color-mix(in srgb,var(--amb) 50%,var(--line));background:color-mix(in srgb,var(--amb) 9%,var(--panel))}
.cr-netwerk>b{display:block;margin-bottom:4px}
.cr-netwerk p{margin:4px 0;line-height:1.45}
.cr-netwerk .ca-uitleg{margin-top:8px}
.cr-netwerk .ca-lijst{margin:6px 0 0;padding-left:20px}
.cr-netwerk .ca-lijst li{margin:4px 0;line-height:1.5}
.cr-netwerk .ca-kopieer{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.cr-geenbeeld{margin:16px 0 4px;padding:12px 14px;border-radius:10px;border:1px solid color-mix(in srgb,var(--amb) 45%,var(--line));background:color-mix(in srgb,var(--amb) 8%,var(--panel))}
.cr-geenbeeld b{font-size:13.5px}
.cr-geenbeeld p{margin:4px 0 0;font-size:13.5px;line-height:1.5}
.cr-lokaal{margin:8px 0 0}
.cr-sectie{margin:18px 0 0}
.cr-sectie h3{font-size:14px;margin:0 0 8px;display:flex;align-items:baseline;gap:6px}
.cr-sectie h3 span{font-size:12px;font-weight:500;color:var(--tx3)}
.cr-prompts>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:8px}
.cr-prompts>summary::-webkit-details-marker{display:none}
.cr-prompts>summary h3{margin:0}
.cr-prompts>summary h3::before{content:"▸";display:inline-block;margin-right:2px;color:var(--tx3);transition:transform .15s}
.cr-prompts[open]>summary h3::before{transform:rotate(90deg)}
.cr-prompts>summary em{font-style:normal;font-size:12.5px;color:var(--tx3)}
.cr-prompt{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0 0 8px}
.cr-prompt-kop{display:flex;align-items:center;gap:8px}
.cr-prompt-kop b{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);font-size:12px}
.cr-prompt-kop span{flex:1;min-width:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-prompt p{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--tx2);white-space:pre-line;overflow-wrap:anywhere;max-height:7.5em;overflow:auto}
.cr-tset{border:1px solid var(--line);border-radius:10px;margin:0 0 8px;background:var(--panel)}
.cr-tset>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:10px 12px}
.cr-tset>summary::-webkit-details-marker{display:none}
.cr-tset-kop{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.cr-tset-kop b{font-size:13.5px}
.cr-tset-kop em{font-style:normal;font-size:12.5px;color:var(--tx2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.cr-tset-voor{grid-column:1;font-size:13px;color:var(--tx2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cr-tset[open] .cr-tset-voor{display:none}
.cr-tset-knop{grid-column:2;grid-row:1 / span 2;display:flex;align-items:center;gap:8px}
.cr-tset-knop i{width:18px;height:18px;display:inline-block;border-right:2px solid var(--tx3);border-bottom:2px solid var(--tx3);transform:rotate(45deg) scale(.5);transition:transform .15s}
.cr-tset[open] .cr-tset-knop i{transform:rotate(225deg) scale(.5)}
.cr-tset-in{padding:0 12px 10px;border-top:1px solid var(--line);padding-top:10px}
.cr-tset-in .cr-tveld span{display:flex;align-items:center;gap:8px}
.cr-kop1{font:inherit;font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;padding:0 6px;border-radius:5px;border:1px solid var(--line);background:none;color:var(--tx2);cursor:pointer;line-height:18px}
.cr-kop1:hover{color:var(--tx);border-color:var(--tx3)}
.cr-acties{margin:18px -20px -18px;padding:10px 20px 12px;border-top:1px solid var(--line);position:sticky;bottom:0;z-index:4;background:var(--panel);border-radius:0 0 var(--r) var(--r);box-shadow:0 -6px 14px -10px rgba(0,0,0,.18)}
.cr-acties.cr-acties-los{position:static;box-shadow:none}
.cr-fb{margin:0 0 8px}
.cr-fb textarea{min-height:38px;height:38px;transition:height .15s}
.cr-fb textarea:focus,.cr-fb textarea:not(:placeholder-shown){height:72px}
.cr-knoppen{display:flex;gap:8px;flex-wrap:wrap}
/* 01-10: tekstsets als tabbladen, beeldopdrachten op één regel, lange tekst ingekort met 'Lees alles'. */
.cr-ttabs{display:block}
.cr-ttabs{position:relative}
.cr-ttab-r{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.cr-ttab{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;margin:0 6px 8px 0;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;background:var(--panel)}
.cr-ttab i{font-style:normal;font-size:11px;font-weight:600;padding:0 6px;border-radius:999px;background:var(--panel2);color:var(--tx2)}
.cr-ttab i.ok{background:#e3f1e6;color:#1f6b35}
.cr-ttab-r:focus-visible+.cr-ttab{outline:2px solid var(--tx);outline-offset:2px}
.cr-tpaneel{display:none;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.cr-tpaneel-kop{display:flex;align-items:center;gap:8px;padding:10px 12px;flex-wrap:wrap}
.cr-tpaneel-kop b{font-size:13.5px}
.cr-tpaneel-kop em{font-style:normal;font-size:12.5px;color:var(--tx2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-tpaneel-kop .btn{margin-left:auto}
.cr-ttab-r:nth-of-type(1):checked~.cr-tpaneel:nth-of-type(1){display:block}.cr-ttab-r:nth-of-type(1):checked+.cr-ttab{background:var(--tx);color:var(--bg);border-color:var(--tx)}.cr-ttab-r:nth-of-type(2):checked~.cr-tpaneel:nth-of-type(2){display:block}.cr-ttab-r:nth-of-type(2):checked+.cr-ttab{background:var(--tx);color:var(--bg);border-color:var(--tx)}.cr-ttab-r:nth-of-type(3):checked~.cr-tpaneel:nth-of-type(3){display:block}.cr-ttab-r:nth-of-type(3):checked+.cr-ttab{background:var(--tx);color:var(--bg);border-color:var(--tx)}.cr-ttab-r:nth-of-type(4):checked~.cr-tpaneel:nth-of-type(4){display:block}.cr-ttab-r:nth-of-type(4):checked+.cr-ttab{background:var(--tx);color:var(--bg);border-color:var(--tx)}.cr-ttab-r:nth-of-type(5):checked~.cr-tpaneel:nth-of-type(5){display:block}.cr-ttab-r:nth-of-type(5):checked+.cr-ttab{background:var(--tx);color:var(--bg);border-color:var(--tx)}.cr-ttab-r:nth-of-type(6):checked~.cr-tpaneel:nth-of-type(6){display:block}.cr-ttab-r:nth-of-type(6):checked+.cr-ttab{background:var(--tx);color:var(--bg);border-color:var(--tx)}.cr-ttab-r:nth-of-type(7):checked~.cr-tpaneel:nth-of-type(7){display:block}.cr-ttab-r:nth-of-type(7):checked+.cr-ttab{background:var(--tx);color:var(--bg);border-color:var(--tx)}.cr-ttab-r:nth-of-type(8):checked~.cr-tpaneel:nth-of-type(8){display:block}.cr-ttab-r:nth-of-type(8):checked+.cr-ttab{background:var(--tx);color:var(--bg);border-color:var(--tx)}.cr-ttab-r:nth-of-type(9):checked~.cr-tpaneel:nth-of-type(9){display:block}.cr-ttab-r:nth-of-type(9):checked+.cr-ttab{background:var(--tx);color:var(--bg);border-color:var(--tx)}.cr-ttab-r:nth-of-type(10):checked~.cr-tpaneel:nth-of-type(10){display:block}.cr-ttab-r:nth-of-type(10):checked+.cr-ttab{background:var(--tx);color:var(--bg);border-color:var(--tx)}.cr-ttab-r:nth-of-type(11):checked~.cr-tpaneel:nth-of-type(11){display:block}.cr-ttab-r:nth-of-type(11):checked+.cr-ttab{background:var(--tx);color:var(--bg);border-color:var(--tx)}.cr-ttab-r:nth-of-type(12):checked~.cr-tpaneel:nth-of-type(12){display:block}.cr-ttab-r:nth-of-type(12):checked+.cr-ttab{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.cr-lm{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.cr-lm-r:checked+.cr-lm{display:block;-webkit-line-clamp:unset}
.cr-lm-k{display:inline-block;margin-top:4px;font-size:12.5px;font-weight:600;color:var(--tx2);text-decoration:underline;cursor:pointer}
.cr-lm-k::after{content:"Lees alles"}
.cr-lm-r:checked~.cr-lm-k::after{content:"Minder"}
details.cr-prompt{padding:0}
details.cr-prompt>summary{list-style:none;cursor:pointer;padding:8px 12px}
details.cr-prompt>summary::-webkit-details-marker{display:none}
details.cr-prompt>summary span::after{content:" ▸";color:var(--tx3)}
details.cr-prompt[open]>summary span::after{content:" ▾"}
details.cr-prompt>p{margin:0;padding:0 12px 10px;max-height:none}
.cr-nieuwuitleg{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;margin:0 0 14px;border-radius:var(--r);border:1px solid var(--line2);background:var(--panel2)}
.cr-nieuwuitleg div{flex:1;min-width:0}
.cr-nieuwuitleg p{margin:4px 0 0;font-size:13px;line-height:1.55;color:var(--tx2)}
.cr-proefmerk{margin:8px 0 12px;padding:9px 12px;border-radius:8px;font-size:13px;line-height:1.5;border:1px solid color-mix(in srgb,var(--amb) 45%,var(--line));background:color-mix(in srgb,var(--amb) 8%,var(--panel))}
.cr-vink.uit{cursor:default;opacity:.7}
.ca-kosten-cr{display:block;margin-top:6px}
/* Groot bekijken */
.ovl.cr-lb{background:#0e0d0c;backdrop-filter:none;padding:0!important;display:flex;flex-direction:column;align-items:stretch!important;justify-content:flex-start;overflow:hidden}
.cr-lb-kop{display:flex;align-items:center;gap:10px;padding:10px 14px;color:#F2F4F7;font-size:13.5px}
.cr-lb-kop>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-lb-kop em{font-style:normal;color:#b9b1a3;margin-left:6px}
.cr-lb-kop .cr-dl{background:#F2F4F7;color:#141414;border-color:#F2F4F7}
.cr-lb-x{font:inherit;font-size:18px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.cr-lb-beeld{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 56px 18px}
.cr-lb-beeld img,.cr-lb-beeld video{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;background:#111}
.cr-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.cr-lb-nav.vorige{left:10px}.cr-lb-nav.volgende{right:10px}
.cr-lb-nav:hover,.cr-lb-x:hover{background:rgba(255,255,255,.26)}
@media (max-width:1100px){.cr-resgrid{grid-template-columns:minmax(0,1fr) 250px}}
@media (max-width:860px){
  .cr-resbar{flex-wrap:nowrap}
  .cr-resbar .hint{display:none}
  .cr-resbar .btn.pri{flex:1 1 auto}
  .cr-resgrid{grid-template-columns:minmax(0,1fr);gap:12px}
  .cr-hist-kop b{display:none}
  .cr-hist{grid-column:1;grid-row:1;position:static;max-height:none;padding:10px;gap:6px}
  .cr-hoofd{grid-row:2}
  .cr-hist-filter{flex-wrap:nowrap;overflow-x:auto}
  .cr-hist-filter button{flex:0 0 auto}
  .cr-hist-lijst{flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:8px;scroll-snap-type:x proximity;padding-bottom:4px}
  .cr-hist-item{flex:0 0 140px;width:140px;grid-template-columns:1fr;gap:4px;padding:5px;scroll-snap-align:start}
  .cr-hist-th{width:100%;height:auto;aspect-ratio:1.7}
  .cr-hist-tx>span{display:none}
  .cr-hist-tx small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cr-hist-tx small .cr-dot{margin-right:4px;vertical-align:1px}
  .cr-res-kop{flex-direction:column;gap:6px}
  .cr-tegel figcaption{flex-direction:column;align-items:flex-start;gap:4px}
  .cr-tegel figcaption .cr-dl{min-height:34px;padding:4px 10px;border:1px solid var(--line)}
  .cr-tegel figcaption .cr-tegel-knop{width:100%}
  .cr-tegel figcaption .cr-tegel-knop .btn{flex:1 1 0;min-height:34px;padding:4px 6px;font-size:12.5px;justify-content:center;border:1px solid var(--line)}
  .cr-prompt p{max-height:5.5em}
  details.cr-prompt>p{max-height:none}
  .cr-res{padding:14px}
  .cr-acties{margin:14px -14px -14px;padding:8px 14px 10px}
  body.mapp .cr-acties{bottom:var(--tbh,64px)}
  body.mapp.mtypt .cr-acties{bottom:0}
  .cr-knoppen .btn.gh{flex:0 1 auto}
  .cr-acties .cr-knoppen{flex-wrap:nowrap;gap:6px}
  .cr-acties .cr-knoppen .btn{padding-left:10px;padding-right:10px;white-space:nowrap}
  .cr-acties .cr-lang,.cr-acties .cr-fb>span{display:none}
  .cr-res h2{font-size:17px}
  .cr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cr-grid.een{grid-template-columns:minmax(0,1fr)}
  .cr-tegel figcaption{flex-wrap:wrap}
  .cr-lb-beeld{padding:0 8px 70px}
  .cr-lb-nav{top:auto;bottom:14px;transform:none}
  .cr-lb-nav.vorige{left:calc(50% - 54px)}.cr-lb-nav.volgende{right:calc(50% - 54px)}
  .cr-knoppen .btn{flex:1 1 auto}
  .cr-nieuwuitleg{flex-direction:column;gap:8px}
}

/* ============================================================
   Dashboard + Dagelijkse analist (Jairo 30-09): 'wat is dit'-regels, Vandaag, tabs, minder scrollen
   ============================================================ */
.wat{font-size:11.5px;line-height:1.45;color:var(--tx3);margin:-6px 0 10px}
.wat a{color:var(--tx2);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.kpi .wat{margin:8px 0 0;padding-top:7px;border-top:1px dashed var(--line);font-size:11px}
.dvandaag{margin-bottom:14px}
.dvrij{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 12px;margin-top:6px;border-radius:9px;background:var(--panel2);border-left:3px solid var(--k,var(--line2))}
.dvt{min-width:0}.dvt b{display:block;font-size:13px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.dvt span{display:block;font-size:11.5px;color:var(--tx3);margin-top:2px;overflow-wrap:anywhere}
.dvrij .btn{white-space:nowrap}
.dkpis{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-bottom:14px}
.dtabs{width:max-content;max-width:100%;margin-bottom:12px}.dtabs em{font-style:normal;font-size:11px;color:var(--tx3)}
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px;align-items:start}.dgrid>*{min-width:0}
.dgrid .alertrow .rt{white-space:normal;text-align:right}
.dtab-inhoud{margin-bottom:18px}
.dmeer>summary{font-size:12px;color:var(--tx2);cursor:pointer;padding:6px 0 2px;list-style:none}.dmeer>summary::-webkit-details-marker{display:none}
.dmeer>summary::before{content:'+ '}.dmeer[open]>summary{display:none}
.dzone{display:grid;grid-template-columns:10px auto 1fr;gap:4px 8px;align-items:center;font-size:12.5px;margin-bottom:9px}
.dzone>span{width:9px;height:9px;border-radius:50%}.dzone>em{font-style:normal;font-weight:650;justify-self:end}
.dzone>div{grid-column:2/4;font-size:12px;color:var(--tx2)}.dzone>div a{color:var(--tx2)}
.dnot{color:var(--tx2);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hint.leeg{background:var(--panel2);border:1px dashed var(--line2);border-radius:9px;padding:10px 12px}
.hint.leeg a{color:var(--tx);text-decoration:underline;cursor:pointer}
/* analist */
.anx-stand{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:12px;color:var(--tx2);margin:0 0 12px;padding:9px 12px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.anx-stand b{color:var(--tx);font-weight:650;margin-right:3px}.anx-stand .anx-nu b{color:#c27c0e}.anx-stand .anx-nu em{font-style:normal;color:var(--tx3)}
.anx-stand .anx-link{margin-left:auto}
.anx-tegel .wat{display:block;margin:4px 0 0;font-size:10.5px;line-height:1.35}
.anx-tegels{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.anx-concl .z em+em{margin-top:2px}
.anx-bw{margin-top:5px}.anx-bw>summary{font-size:11.5px;color:var(--tx2);cursor:pointer;text-decoration:underline;text-underline-offset:2px;list-style:none}
.anx-bw>summary::-webkit-details-marker{display:none}.anx-bw .anx-mini{margin-top:6px}
.anx-bw .anx-mini td{max-width:200px;overflow-wrap:anywhere}
.anx-weg{font-size:12px;padding:5px 0;border-top:1px solid var(--line)}.anx-weg:first-of-type{border-top:0}
.anx-dk{display:flex;gap:8px;align-items:flex-start;font-size:12px;padding:5px 0;border-top:1px solid var(--line)}.anx-dk:first-of-type{border-top:0}
.anx-dk .chip{flex:none}
.anx-mc{display:block;margin-top:3px}
.anx-uitleg{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px 12px;margin-bottom:12px;font-size:12.5px}
.anx-uitleg>summary{cursor:pointer}.anx-uitleg ul{margin:8px 0 2px 18px;display:grid;gap:4px}
.anx-sub-seg{width:max-content;max-width:100%;margin:0 0 12px}
.anx-stud{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:10px 14px 6px;border-top:1px solid var(--line2);background:var(--panel2);font-size:12px;color:var(--tx2)}
.anx-stud>b{font-size:13px;color:var(--tx)}
.anx-acc .anx-lkop,.anx-acc .anx-rij>summary{grid-template-columns:minmax(0,2.6fr) minmax(0,1.1fr) 56px 60px 64px}
.anx-sec{border-top:1px solid var(--line);padding:6px 0}.anx-sec>summary{cursor:pointer;font-size:13px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.anx-sec>summary .hint{font-size:11.5px;flex-basis:100%}.anx-sec[open]>summary .hint{display:none}
.anx-kc{display:inline-block}.anx-kc>summary{list-style:none;cursor:pointer}.anx-kc>summary::-webkit-details-marker{display:none}
.anx-drij .lab{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.25}
.anx-drij .o em{white-space:normal}
@media(max-width:860px){
  .dkpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .dkpis .kpi{padding:11px 12px}.dkpis .kpi .wat{font-size:10.5px;line-height:1.35}
  .dvrij{gap:8px;padding:7px 9px}.dvrij .btn{padding:4px 8px;font-size:12px}
  .dvt b{font-size:12.5px}.dvt span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .dtabs button{padding:5px 8px;font-size:12px}
  .dgrid{grid-template-columns:1fr}
  .anx-stand{gap:4px 10px;font-size:11.5px}.anx-stand .anx-link{margin-left:0}
  .anx-tegels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .anx-stud{padding:9px 12px 5px}
}

/* ---------- Research 30-09 avond (leeftijdsregel, PPSpy-bestsellers, start met prijs, Mijn aanvragen, minder scrollen) ---------- */
.rs2-dot.half{background:var(--amb)}
.rs2-status{padding:8px 12px;gap:4px 16px;font-size:12.5px}
.rs2-status .rs2-link{font-size:12px;padding-left:4px}
.rs2-vkop{margin:0 0 10px}
.rs2-uitklap{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;margin:0 0 12px}
.rs2-uitklap:empty{display:none}
.rs2-uitklap>details{margin:0;min-width:0}
.rs2-uitklap>details[open]{grid-column:1/-1}
.rs2-meer{margin:0 0 10px;font-size:13px}
.rs2-meer summary{cursor:pointer;color:var(--tx2);list-style:none;display:inline-flex;gap:6px;align-items:baseline}
.rs2-meer summary::-webkit-details-marker{display:none}
.rs2-meer summary::before{content:'▸';color:var(--tx3);transition:transform .15s}
.rs2-meer[open] summary::before{transform:rotate(90deg)}
.rs2-meer[open] summary{margin-bottom:6px}
.rs2-sep{display:inline-block;width:1px;height:18px;background:var(--line);margin:0 4px;align-self:center}
.rs2-badges b.fz-test{background:color-mix(in srgb,var(--cyn,#2aa7c9) 80%,#000)}
.rs2-badges b.fz-oud{background:color-mix(in srgb,var(--amb) 80%,#000)}
.rs2-meten{grid-template-columns:1fr}
.rs2-meten div{border-style:dashed}
.rs2-waarsch,.rs2-meetmelding{font-size:12px;line-height:1.45;padding:7px 10px;border-radius:9px;border:1px solid color-mix(in srgb,var(--amb) 45%,var(--line));background:color-mix(in srgb,var(--amb) 9%,var(--panel));color:var(--tx)}
.rs2-bskort{font-size:12px;color:var(--tx2)}
.rs2-bskort b{color:var(--grn)}
.rs2-dekking{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;font-size:12.5px;padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:var(--panel2)}
.rs2-dekking.onv{border-color:color-mix(in srgb,var(--amb) 45%,var(--line))}
.rs2-dekking span{flex:1 1 260px;min-width:0}
.rs2-pp{align-items:flex-start}
.rs2-pp>div{display:flex;flex-direction:column;gap:2px}
.rs2-pp small{display:block;line-height:1.45;white-space:normal}
.rs2-pp s{color:var(--tx3)}
.rs2-pp em{font-style:normal;font-weight:600;color:var(--grn)}
.pp-rang{font-weight:700;color:var(--tx)}
.pp-rang em{margin-left:3px;font-size:11px}
.pp-rang em.neer{color:var(--red)}
.pp-nieuw{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--cyn,#2aa7c9);margin-left:2px}
.pp-ads{color:var(--tx2)}
.pp-ads.nul{color:var(--tx3)}
.pp-chips{display:flex;flex-direction:column;gap:4px;align-items:flex-end;flex:0 0 auto}
.rs2-bscheck{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:8px}
.rs2-bscheck .hint{flex:1 1 240px;font-size:12px}
.rs2-media .rs2-bew{position:absolute;left:6px;bottom:6px}
.rs2-intro{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:12px 14px;margin:0 0 12px;border:1px solid color-mix(in srgb,var(--grn) 35%,var(--line))}
.rs2-intro ul{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--tx2)}
.rs2-intro .btn{flex:0 0 auto}
.rs2-tgb{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) auto;gap:8px;align-items:center;padding:10px 12px;margin:0 0 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.rs2-tgb>div{min-width:0}
.rs2-tgb span{display:block;font-size:11px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs2-tgb b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs2-tgb small{display:block;font-size:11px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs2-tgb>.hint{grid-column:1/-2}
.rs2-cform{align-items:flex-end}
.rs2-cveld{display:flex;flex-direction:column;gap:3px;flex:0 1 190px;min-width:0}
.rs2-cveld span{font-size:11.5px;color:var(--tx3)}
.rs2-cveld .inp{width:100%;flex:none}   /* anders gaf '.rs2-cform .inp{flex:0 1 190px}' in deze kolom de select 190 px hoogte (desktop) */
.rs2-cstart{min-width:110px}
.rs2-cprijs{margin:10px 0 0;font-size:13px;color:var(--tx2);line-height:1.5}
.rs2-cprijs .rs2-cgrens{display:inline;margin:0 0 0 6px}
.rs2-claag{display:block;color:var(--amb);font-size:12.5px}
.rs2-mijn{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.rs2-mijnkop{display:flex;gap:10px;align-items:baseline;margin-bottom:6px}
.rs2-mijnkop b{font-size:13.5px}
.rs2-mijnkop .hint{font-size:12px}
.rs2-mijn ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rs2-mijnrij{display:flex;gap:10px;align-items:flex-start;font-size:13px;min-width:0}
.rs2-mijnrij>div{flex:1;min-width:0}
.rs2-mijnrij small{display:block;color:var(--tx3);font-size:12px;line-height:1.4}
.rs2-mijnrij em{font-style:normal;font-size:12px;color:var(--tx2);white-space:nowrap}
.rs2-mst{flex:0 0 auto;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;border-radius:6px;background:var(--panel2);border:1px solid var(--line);color:var(--tx2)}
.st-bezig .rs2-mst{color:var(--amb);border-color:color-mix(in srgb,var(--amb) 45%,var(--line))}
.st-klaar .rs2-mst{color:var(--grn);border-color:color-mix(in srgb,var(--grn) 45%,var(--line))}
.st-mislukt .rs2-mst{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,var(--line))}
@media (max-width:900px){
  .rs2-tgb{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rs2-tgb>.btn{grid-column:1/-1;justify-self:start}
}
@media (max-width:720px){
  .rs2-status{gap:3px 12px;font-size:12.5px}
  .rs2-intro{flex-direction:column}
  .rs2-cveld{flex:1 1 140px}
  .rs2-cstart{flex:1 1 100%}
  .rs2-pp{flex-wrap:wrap}
  .pp-chips{flex-direction:row;flex-wrap:wrap;align-items:center;flex-basis:100%;padding-left:54px}
}

/* ============================================================
   VERZENDING ZOALS PARCELPANEL + VERZENDMELDINGEN (30-09 avond)
   ============================================================ */
.vz-kop{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;margin:0 0 12px;padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);font-size:12.5px;color:var(--tx2)}
.vz-kop .btn{margin-left:auto}
.vz-vers,.vz-sync{display:inline-flex;align-items:center;gap:7px;min-width:0}
.vz-vers i,.vz-sync i{width:8px;height:8px;border-radius:50%;background:var(--grn);flex:0 0 8px}
.vz-vers.oud i{background:var(--amb)}
.vz-vers b{font-weight:600}
.vz-sync i{background:var(--tx3)}
.vz-sync.aan i{background:var(--grn)}
.vz-sync.uit{color:var(--red);font-weight:600}
.vz-sync.uit i{background:var(--red)}
.vz-noot{margin:0 0 12px}
.vz-rood{margin:0 0 14px;padding:14px 16px;border-radius:var(--r);background:rgba(180,35,24,.06);border:1px solid rgba(180,35,24,.35);color:var(--tx);font-size:13px;line-height:1.55}
.vz-rood>b{display:block;color:var(--red);font-size:14px;margin-bottom:6px}
.vz-rood p{margin:0 0 8px}
.vz-rood ol{margin:0 0 8px 18px;padding:0}
.vz-rood li{margin:2px 0}
.vz-rood .vz-klein{font-size:12px;color:var(--tx2);margin:0}
.vz-statussen{padding:14px 16px;margin-bottom:12px}
.vz-khead{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-bottom:10px}
.vz-khead b{font-size:14px}
.vz-khead .btn{margin-left:auto}
.vz-tegels{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}
.vz-tegel{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 10px 8px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);text-align:left;min-width:0;border-top:3px solid var(--c);transition:border-color .15s,background .15s}
.vz-tegel:hover{border-color:var(--line2);border-top-color:var(--c)}
.vz-tegel.on{background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--c)}
.vz-tegel.leeg{opacity:.6}
.vz-tn{display:flex;align-items:flex-start;gap:6px;font-size:11.5px;line-height:1.25;color:var(--tx2);font-weight:550;min-height:29px}
.vz-tn i{display:none}
.vz-tegel b{font-size:20px;font-weight:650;letter-spacing:-.4px;font-variant-numeric:tabular-nums;color:var(--tx)}
.vz-tegel small{font-size:11.5px;color:var(--tx3);font-variant-numeric:tabular-nums}
.vz-bron{margin:10px 0 0;font-size:12px}
.vz-tabs{margin:0 0 12px;width:max-content;max-width:100%}
.vz-tabs button{display:inline-flex;align-items:center;gap:6px}
.vz-tal{display:inline-block;min-width:18px;padding:0 6px;border-radius:10px;background:var(--red);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.vz-paneel{padding:14px 16px}
.vz-uitleg{margin:0 0 10px;font-size:12px}
.vz-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.vz-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:7px;font-size:12px;font-weight:550;border:1px solid var(--line);background:var(--panel2);color:var(--tx2)}
.vz-chip b{font-weight:700}
.vz-chip.on{border-color:currentColor;background:var(--panel);box-shadow:inset 0 0 0 1px currentColor}
.vz-chip.c-red,.vz-chip.c-amb{background:transparent}
.vz-lijst{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.vz-rij{display:flex;flex-direction:column;gap:3px;padding:10px 4px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:6px}
.vz-rij:hover,.vz-rij:focus-visible{background:var(--panel2);outline:none}
.vz-r1{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:13.5px}
.vz-r1>b{font-size:14px}
.vz-bedrag{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600;font-size:13px}
.vz-sinds{font-size:12px;color:var(--tx2)}
.vz-lab{font-size:11px;color:var(--tx3);border:1px dashed var(--line2);border-radius:6px;padding:1px 6px}
.vz-gl{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--c,var(--tx2));font-weight:600}
.vz-gl i{width:7px;height:7px;border-radius:50%;background:var(--c,var(--tx3))}
.vz-gl.groot{font-size:13.5px}
.vz-r2{display:flex;flex-wrap:wrap;gap:0 4px;font-size:12px;color:var(--tx2)}
.vz-r3{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;font-size:12px}
.vz-advies{flex:1 1 280px;color:var(--tx);min-width:0}
.vz-trk{font-size:11.5px;color:var(--tx2);white-space:nowrap;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:2px}
a.vz-trk:hover{color:var(--tx)}
.vz-meer{font-size:12px;color:var(--tx3);white-space:nowrap}
.vz-leeg{margin:6px 0;color:var(--tx2);font-size:13px}
.vz-voor{margin:10px 0 0;font-size:12px}
.vz-tijden{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.vz-tijd{display:flex;flex-direction:column;gap:1px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.vz-tijd>span{font-size:12px;color:var(--tx2);font-weight:600}
.vz-tijd b{font-size:20px;font-weight:650;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.vz-tijd small{font-size:11.5px;color:var(--tx3)}
.vz-tijd em{font-style:normal;font-size:11.5px;color:var(--tx2);margin-top:4px;line-height:1.35}
.vz-belofte{margin:0 0 12px;font-size:12.5px;color:var(--tx2)}
.vz-2kol{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vz-sub{display:block;font-size:13px;margin:0 0 4px}
.vz-tab{font-size:12.5px}
.vz-tab th{position:static;padding:7px 8px;cursor:default;font-size:11px}
.vz-tab td{padding:7px 8px}
.vz-tab .num{text-align:right;font-variant-numeric:tabular-nums}
.vz-weinig{color:var(--tx3);font-style:italic}
.vz-grenzen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px}
.vz-grens{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--tx2);font-weight:550}
.vz-gin{display:flex;align-items:center;gap:7px}
.vz-gin .inp{width:72px}
.vz-gin em{font-style:normal;font-size:12px;color:var(--tx3);font-weight:400}
/* tijdlijn */
.vz-tl-kop{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-bottom:10px}
.vz-tl-advies{display:flex;flex-direction:column;gap:3px;margin:0 0 10px;padding:10px 12px;border-radius:10px;background:rgba(168,104,15,.07);border:1px solid rgba(168,104,15,.25);font-size:13px}
.vz-tl-advies b{color:var(--amb)}
.vz-zend{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.vz-tl{list-style:none;margin:12px 0 6px;padding:0}
.vz-st{position:relative;display:flex;gap:12px;padding:0 0 14px 0}
.vz-st::before{content:'';position:absolute;left:5px;top:14px;bottom:0;width:2px;background:var(--line)}
.vz-st:last-child::before{display:none}
.vz-st>i{flex:0 0 12px;width:12px;height:12px;border-radius:50%;background:var(--c);margin-top:3px;box-shadow:0 0 0 3px var(--panel);position:relative}
.vz-st>div{display:flex;flex-direction:column;min-width:0}
.vz-st b{font-size:13px;font-weight:600}
.vz-st span{font-size:12px;color:var(--tx2);font-variant-numeric:tabular-nums}
.vz-st small{font-size:12px;color:var(--tx3);overflow-wrap:anywhere}
.vz-st-verwacht>i{background:transparent;border:2px dashed var(--tx3)}
.vz-tl-noot{margin:4px 0 0;font-size:12px}
/* pop-up in de hub */
.vz-pop{position:fixed;right:20px;bottom:20px;z-index:70;width:360px;max-width:calc(100vw - 32px);padding:14px 16px;background:var(--panel);border:1px solid var(--line2);border-radius:14px;box-shadow:0 14px 40px rgba(20,20,20,.18);display:none;font-size:13px}
.vz-pop.aan{display:block;animation:pop .18s ease}
.vz-pop-kop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.vz-pop-kop b{font-size:14px}
.vz-pop-kop .x{font-size:15px;color:var(--tx3);padding:4px 6px}
.vz-pop-sub{margin:0 0 8px;color:var(--tx2);font-size:12.5px}
.vz-pop-rij{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--line)}
.vz-pop-rij span{min-width:0;overflow-wrap:anywhere}
.vz-pop-meer{margin:4px 0 0;font-size:12px;color:var(--tx3)}
.vz-pop-knop{display:flex;gap:8px;margin-top:10px}
.pside .pnav .vz-cnt{background:rgba(240,138,126,.18);color:#f3c0b8}
/* Meldingen */
.vzm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.vzm-blok{padding:18px}
.vzm-kaart{padding:16px 18px;margin-bottom:14px}
.vzm-kop{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-bottom:4px}
.vzm-kop>b{font-size:14.5px}
.vzm-kop .btn{margin-left:auto}
.vzm-freq{display:inline-flex;flex-wrap:wrap;gap:4px 14px;margin-left:auto;font-size:12.5px;color:var(--tx2)}
.vzm-freq label{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.vzm-uitleg{margin:2px 0 8px;font-size:12px}
.vzm-tab{font-size:13px}
.vzm-tab th{position:static;cursor:default;padding:7px 6px;font-size:11px;text-align:center}
.vzm-tab th:first-child{text-align:left}
.vzm-tab td{padding:7px 6px;text-align:center;white-space:normal}
.vzm-tab td:first-child{text-align:left}
.vzm-tab td small{display:block;font-size:11.5px;color:var(--tx3);font-weight:400;line-height:1.35}
.vzm-tab td .vzm-extra{margin-top:3px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.vzm-tab input[type=checkbox]{width:17px;height:17px;accent-color:var(--acc)}
.vzm-na{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.vzm-na .inp{width:52px;padding:4px 6px;text-align:center}
.vzm-na em{font-style:normal;font-size:11.5px;color:var(--tx3)}
.vzm-voet{margin:8px 0 0;font-size:12px}
.vzm-besluit{display:grid;gap:8px;margin-top:12px}
.vzm-besluit .chk span{display:flex;flex-direction:column}
.vzm-besluit .chk em{font-style:normal;font-size:12px;color:var(--tx3)}
.vzm-beheer td{white-space:nowrap}
.vzm-beheer td:first-child{white-space:normal}
.vzm-beheer .num{text-align:right}
.vzm-schuif{border:0;border-radius:0}
@media (max-width:1180px){ .vz-tegels{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (max-width:860px), (max-width:1023px) and (pointer:coarse){
  .vz-kop{padding:9px 12px;gap:6px 10px}
  .vz-kop .btn{margin-left:0}
  .vz-statussen,.vz-paneel{padding:12px}
  .vz-tegels{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .vz-tegel{padding:7px 8px 6px}
  .vz-tn{font-size:11px;min-height:28px}
  .vz-tegel b{font-size:18px}
  .vz-tabs{width:100%}
  .vz-tabs button{flex:1 0 auto;justify-content:center}
  .vz-tijden{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vz-2kol{grid-template-columns:1fr}
  .vz-gem{display:none}
  .vz-grenzen{grid-template-columns:1fr 1fr}
  .vz-advies{flex-basis:100%}
  .vz-pop{left:12px;right:12px;width:auto;max-width:none;bottom:calc(var(--tbh, 0px) + 12px)}
  .vzm-grid{grid-template-columns:1fr;gap:12px}
  .vzm-kaart{padding:14px 12px}
  .vzm-freq{margin-left:0}
  .vzm-tab th,.vzm-tab td{padding:7px 3px}
  .vzm-tab td:first-child{padding-right:6px}
}
.vzm-pushboven{padding:16px 18px;margin-bottom:14px;border-color:color-mix(in srgb,var(--amb) 45%,var(--line));background:color-mix(in srgb,var(--amb) 5%,var(--panel))}
.vzm-pushboven>b{display:block;font-size:14.5px}
/* 30-09 avond: compacter (DASH-7 / AN-10) */
@media(min-width:1100px){.anx-tegels{grid-template-columns:repeat(6,minmax(0,1fr))}}
.anx-tegel .l{line-height:1.25}
.anx-acties{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:0 10px}
.anx-acties .anx-actie{grid-template-columns:170px minmax(0,1fr)}
.anx-studgroep{border-top:1px solid var(--line)}.anx-studgroep>summary{list-style:none;cursor:pointer}.anx-studgroep>summary::-webkit-details-marker{display:none}
.anx-studgroep>summary>b::before{content:'';display:inline-block;vertical-align:middle;margin:-2px 7px 0 0;border-left:5px solid var(--tx3);border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s}
.anx-studgroep[open]>summary>b::before{transform:rotate(90deg)}
.anx-studgroep[open]>summary{border-bottom:1px solid var(--line)}
.dgrafiek>summary{list-style:none;cursor:pointer}.dgrafiek>summary::-webkit-details-marker{display:none}.dgrafiek>summary h3{margin-bottom:12px}
details.anx-kaart>summary{list-style:none;cursor:pointer}details.anx-kaart>summary::-webkit-details-marker{display:none}
@media(max-width:860px){
  .anx-acties{grid-template-columns:1fr}.anx-acties .anx-actie{grid-template-columns:minmax(0,1fr);gap:3px}
  .anx-tegel .wat{font-size:10px}
}
.cr-autoregel{display:flex;gap:8px;align-items:baseline;margin:-6px 0 14px;font-size:13px;line-height:1.5;color:var(--tx2)}
.cr-autoregel i{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--amb);transform:translateY(-1px)}
.cr-autoregel.ja i{background:var(--grn)}
.cr-autoregel b{color:var(--tx)}
/* Verzending: compacter (VZ21) */
details.vz-statussen>summary{list-style:none;cursor:default}
details.vz-statussen>summary::-webkit-details-marker{display:none}
.vz-kort{display:none}
.vz-r2{align-items:baseline}
.vz-delen{display:flex;flex-wrap:wrap;gap:0 4px;flex:1 1 auto;min-width:0}
.vz-delen>span:not(:last-child)::after{content:'·';margin-left:4px;color:var(--tx3)}
.vz-staart{display:inline-flex;align-items:center;gap:12px;margin-left:auto;white-space:nowrap}
.vz-rij.kort{padding:8px 4px}
.vz-meerknop{margin-top:10px}
.vz-grens{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 10px}
.vz-grens>span:first-child{flex:1 1 100%}
@media (max-width:860px), (max-width:1023px) and (pointer:coarse){
  .vz-kop>.btn{display:none}
  details.vz-statussen>summary{cursor:pointer;display:flex;flex-direction:column;align-items:stretch;gap:3px;margin:0}
  details.vz-statussen>summary .vz-tel{font-size:12px}
  details.vz-statussen[open]>summary{margin-bottom:10px}
  details.vz-statussen:not([open]) .vz-tel{display:none}
  details.vz-statussen:not([open])>summary .vz-kort{display:block;font-size:12.5px;color:var(--tx2);line-height:1.45}
  details.vz-statussen>summary b::after{content:' ▸';color:var(--tx3);font-weight:400}
  details.vz-statussen[open]>summary b::after{content:' ▾'}
  .vz-lang{display:none}
  .vz-tabs{display:grid;grid-template-columns:repeat(4,auto);justify-content:stretch;width:100%;overflow:visible}
  .vz-tabs button{justify-content:center;padding:7px 6px;font-size:12.5px;white-space:nowrap;min-width:0}
  .vz-tabs .vz-tal{font-size:10.5px;min-width:16px;line-height:16px;padding:0 4px}
  .vz-rij.kort .vz-r2{flex-wrap:wrap}
  .vz-staart{margin-left:0;width:100%;justify-content:space-between;margin-top:2px}
  .vz-grenzen{grid-template-columns:1fr;gap:8px}
  .vz-grens>span:first-child{flex:1 1 150px}
}
/* Research 30-09 avond — correcties na de eerste screenshots */
.rs2-cform .rs2-cveld .inp{flex:0 0 auto;width:100%;height:auto}
.rs2-cform .btn{align-self:flex-end}
.rs2-pp small b,.rs2-pp small b.pp-nieuw{display:inline;font-size:10.5px}
.rs2-meer{text-align:left}
.rs2-meten div span{white-space:normal;overflow:visible}
.rs2-waarom{font-size:12px;color:var(--tx2);line-height:1.4}
.rs2-winkel{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--tx2);margin:0 0 6px}
.rs2-winkel b{color:var(--tx)}
.rs2-kpi1{padding:7px 12px}
.rs2-kpi1 .hint{display:inline;margin:0 0 0 8px}
.rs2-fconc{align-items:center}
.rs2-fconc .rs2-meer{flex:1 1 200px;margin:0 0 10px}
.rs2-fconc .rs2-meer[open]{flex-basis:100%}
.rs2-uitklap{margin-bottom:10px}
.rs2-uitklap>details{padding:8px 12px}
@media (max-width:720px){
  .rs2-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%}
  .rs2-tabs::-webkit-scrollbar{display:none}
  .rs2-tabs>button{flex:0 0 auto}
  .rs2-kpi1 .hint{display:block;margin:2px 0 0}
  .rs2-fconc .rs2-meer{margin:0 0 8px}
}
.anx-bwtab{max-width:100%;overflow-x:auto;max-height:320px;overflow-y:auto}
@media(max-width:860px){
  .anx-concl{grid-template-columns:minmax(0,1fr) auto}.anx-concl>.chip{grid-column:1/-1;justify-self:start}
  .anx-concl .z em{font-size:11px}
  .anx-tegel{padding:9px 10px 6px}.anx-tegel .anx-spark{display:none}
}
/* Research-tegoed: opwaarderen met factuur (30-09 avond) */
.tg-methode{display:flex;gap:8px;flex-wrap:wrap}
.tg-methode .btn{min-height:40px}
.tg-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.tg-tier{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg2,transparent)}
.tg-tier-bonus{border-color:color-mix(in srgb,var(--grn) 45%,var(--line))}
.tg-tier-kop{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.tg-tier-kop b{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.tg-cadeau{font-size:12px;font-weight:600;color:var(--grn);background:color-mix(in srgb,var(--grn) 12%,transparent);padding:2px 8px;border-radius:999px;white-space:nowrap}
.tg-som{display:grid;grid-template-columns:1fr auto;gap:3px 10px;margin:0;font-size:13.5px;color:var(--tx2)}
.tg-som dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;color:var(--tx)}
.tg-som .tg-tot{border-top:1px solid var(--line);padding-top:5px;margin-top:2px;font-weight:600;color:var(--tx);font-size:14.5px}
.tg-betaal{justify-content:center;min-height:46px;margin-top:auto;font-variant-numeric:tabular-nums}
.tg-fgeg summary{cursor:pointer;font-size:14px;font-weight:600;min-height:44px;display:flex;align-items:center;gap:6px}
.tg-fvelden{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:8px}
.tg-fveld{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--tx2)}
.tg-fveld .inp{width:100%;min-height:42px}
.tg-btwk{margin-top:10px;display:flex;flex-direction:column;gap:4px}.tg-btwk .hint{margin:0}
.tg-vies{font-size:13.5px;font-weight:600;color:var(--tx2)}.tg-vies.ok{color:var(--grn)}.tg-vies.nee{color:var(--red)}
.tg-facturen{display:flex;flex-direction:column;scroll-margin-top:84px}
.tg-fac{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:11px 0;border-top:1px solid var(--line);color:inherit;text-decoration:none;align-items:center}
.tg-fac span b{font-weight:600;font-size:14.5px}
.tg-fac small{display:block;color:var(--tx3);font-size:12.5px}
.tg-fac-bedrag{font-variant-numeric:tabular-nums;font-weight:600}
.tg-fac-open{grid-column:1/-1;font-size:13px;color:var(--acc)}
.tg-fac:hover .tg-fac-open{text-decoration:underline}
.anx-mc .chip{white-space:normal;display:inline-block;max-width:100%;line-height:1.3}
.anx-actie .n{min-width:0;overflow:hidden}
.vzm-tab th{white-space:nowrap}
.vzm-na .inp:disabled{opacity:.55;cursor:not-allowed}
@media (max-width:860px), (max-width:1023px) and (pointer:coarse){ .vzm-tab th{font-size:10.5px;padding:7px 2px} }
/* RS20 telefoon: tegoed en status als één schuifregel, zodat het eerste resultaat op het eerste scherm staat */
@media (max-width:720px){
  .rs2-vkop{display:none}
  .rs2-tgb{display:flex;overflow-x:auto;scrollbar-width:none;gap:16px;align-items:center;padding:8px 12px}
  .rs2-tgb::-webkit-scrollbar{display:none}
  .rs2-tgb>div{flex:0 0 auto}
  .rs2-tgb>.btn{flex:0 0 auto;grid-column:auto}
  .rs2-status{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap;padding:8px 12px}
  .rs2-status::-webkit-scrollbar{display:none}
  .rs2-status>span,.rs2-status>button{flex:0 0 auto}
  .rs2-uitklap{gap:8px}
}
@media (max-width:720px){ .rs2-kpi1 .hint{display:none} .rs2-kpi1 .btn{padding:4px 8px} }
@media (max-width:720px){ .rs2-kpi1>div{flex:1 1 100%} .rs2-kpi1>.btn{flex:0 0 auto} }
.tg-eigen [data-tgeigen-som]{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.tg-eigen .tg-betaal{width:100%}
/* Bewaking 01-10: campagnes kiezen is verplicht (gepland / net live), melding bij een nieuwe testcampagne. */
.rg-camp{border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:14px}
.rg-camp-kop{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.rg-verplicht{font-size:11px;font-weight:600;color:var(--amb);border:1px solid currentColor;border-radius:999px;padding:1px 8px}
.rg-campgroep{margin-top:10px}
.rg-campgroep-kop{margin-bottom:6px;font-size:13px}
.rg-camplijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.rg-campknop{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:transparent;color:inherit;cursor:pointer;font:inherit;min-width:0}
.rg-campknop:hover{border-color:currentColor}
.rg-campknop.aan{border-color:var(--acc,currentColor);box-shadow:0 0 0 1px var(--acc,currentColor) inset}
.rg-vink{flex:none;width:18px;height:18px;border:1.5px solid var(--line);border-radius:5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1;margin-top:1px}
.rg-campknop.aan .rg-vink{background:var(--acc,currentColor);border-color:var(--acc,currentColor);color:#fff}
.rg-campt{display:flex;flex-direction:column;gap:2px;min-width:0}
.rg-campt b{font-size:13px;overflow-wrap:anywhere}
.rg-campt small{font-size:12px;opacity:.75}
.rg-nodig{text-align:center;color:var(--amb)}
.cw-voet .btn[disabled]{opacity:.45;cursor:not-allowed}
.rg-geencamp{margin-top:6px;padding:8px 10px;border-radius:8px;border:1px solid var(--amb);font-size:12.5px;line-height:1.5}
.rg-geencamp .btn{margin-left:6px;width:auto;display:inline-flex}
.rg-gezien{border-color:var(--acc,var(--line))}
.rg-gezien-rij{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:6px 0}
.rg-gezien-rij+.rg-gezien-rij{border-top:1px solid var(--line);padding-top:10px}
.rg-gezien-rij>div:first-child{flex:1 1 260px;min-width:0;font-size:13px;overflow-wrap:anywhere}
.rg-gezien-knoppen{display:flex;gap:6px;flex-wrap:wrap}
.rg-gezien-knoppen .btn{width:auto}
/* BER per product */
.ber-mist{color:var(--amb);font-size:12px;white-space:nowrap;text-decoration:underline dotted}
.ber-kop{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin:0 0 10px;font-size:13px}
.ber-kop b{font-size:15px}
.ber-kop .hint{flex-basis:100%}
@media (max-width:720px){ .rg-camplijst{grid-template-columns:1fr} .rg-wiz .cw-voet{flex-wrap:wrap} .rg-nodig{order:-1;flex-basis:100%;text-align:left} }

/* ===== Research 01-10: startbalk, Jouw resultaten, kansscore (Jairo: minder scrollen, output bovenaan) ===== */
.rs3-h1{margin:0 0 10px}
.rs3-balk{padding:10px 12px;margin:0 0 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.rs3-rij{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rs3-tegoed{display:inline-flex;gap:6px;align-items:center;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--tx2);font:inherit;font-size:13px;cursor:pointer}
.rs3-tegoed b{color:var(--tx)}
.rs3-tegoed:hover{border-color:var(--line2)}
.rs3-markt{width:auto!important;flex:0 0 auto;height:36px}
.rs3-seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel2)}
.rs3-seg button{height:34px;padding:0 14px;border:0;background:transparent;color:var(--tx2);font:inherit;font-size:13.5px;cursor:pointer}
.rs3-seg button.on{background:var(--acc);color:var(--on-acc,#fff);font-weight:600}
.rs3-start{height:36px}
.rs3-help{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--tx2);font:inherit;font-weight:700;cursor:pointer;margin-left:auto}
.rs3-help:hover{color:var(--tx);border-color:var(--line2)}
.rs3-sub{margin:6px 0 0;font-size:12.5px;color:var(--tx3)}
.rs3-fout{margin:8px 0 0;font-size:13px;color:var(--red)}
.rs3-ok{margin:8px 0 0;font-size:13px;color:var(--tx2,inherit)}
.rs3-upload{white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.rs3-lijstkaart{margin:10px 0 0;padding:14px 16px;border:1.5px solid var(--acc);border-radius:12px;background:color-mix(in srgb,var(--acc) 7%,var(--panel));display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.rs3-lijstkaart>div{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 260px}
.rs3-lijstkaart b{font-size:15px}
.rs3-lijstkaart span{font-size:13px;color:var(--tx2,inherit);line-height:1.4}
.rs3-upgroot{padding:11px 18px;font-size:15px}
@media (max-width:600px){.rs3-upgroot{width:100%;justify-content:center}}
.rs3-lijstregel{margin:8px 0 0;font-size:13px;color:var(--tx2,inherit)}
.tgb-min{color:var(--red)}
.rs3-stand{margin:8px 0 0;font-size:13px;color:var(--tx2);line-height:1.45;overflow-wrap:anywhere}
.rs2-mijnrij small.rs2-mkost{color:var(--tx2);margin-top:2px;overflow-wrap:anywhere}
.rs3-uitleg{margin:0;padding-left:18px;display:grid;gap:8px;font-size:14px;line-height:1.45}
.rs3-res{padding:12px 14px;margin:0 0 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.rs3-reskop{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin:0 0 8px}
.rs3-reskop h2{margin:0;font-size:17px}
.rs3-reskop .hint{font-size:12.5px}
.rs3-reskop .rs2-link{font-size:12.5px}
.rs3-leeg{margin:0;font-size:13.5px;color:var(--tx2)}
.rs3-resgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);gap:14px}
.rs3-blok h3{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--tx2);text-transform:none}
.rs3-blok h3 span{color:var(--tx3);font-weight:500;margin-left:4px}
.rs3-comps{display:grid;gap:6px}
.rs3-comp{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.rs3-cnaam{cursor:pointer;min-width:0}
.rs3-cnaam b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs3-cnaam small{display:block;font-size:12px;color:var(--tx3)}
.rs3-links{display:flex;gap:6px;flex-wrap:wrap}
.rs3-links .btn{height:28px;padding:0 10px;font-size:12.5px;text-decoration:none}
.rs2-store .rs3-links{margin-top:6px}
.rs3-prods{display:grid;gap:6px}
.rs3-prod{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:start;padding:6px;border-radius:10px;cursor:pointer}
.rs3-prod:hover{background:var(--hover)}
.rs3-prod .rs2-th{width:44px;height:56px;border-radius:6px;overflow:hidden;display:block}
.rs3-prod .rs2-th img,.rs3-prod .rs2-th .rs2-ph{width:100%;height:100%;object-fit:cover}
.rs3-prod b{display:block;font-size:13px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.rs3-pr{display:flex;gap:6px;align-items:center;font-size:12.5px;margin-top:2px}
.rs3-waarom{display:block;font-size:12px;color:var(--tx2);line-height:1.35;margin-top:2px}
.rs3-kans{white-space:nowrap}
.rs3-ads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.rs3-ad{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;cursor:pointer;background:var(--panel2)}
.rs3-ad img,.rs3-ad .rs2-ph{width:100%;height:100%;object-fit:cover}
.rs3-ad em{position:absolute;left:4px;bottom:4px;padding:1px 6px;border-radius:6px;background:rgba(0,0,0,.62);color:#fff;font-size:11px;font-style:normal}
.rs3-voet{margin:8px 0 0;font-size:12px}
.rs3-kansblok{margin:0 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.rs3-kanskop{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.4}
.rs3-delen{margin-top:8px}
.rs3-delen summary{cursor:pointer;font-size:12.5px;color:var(--tx2)}
.rs3-delen>div{display:grid;gap:3px;margin-top:6px}
.rs3-delen>div>div{display:flex;justify-content:space-between;gap:10px;font-size:12.5px}
.rs3-delen b{font-variant-numeric:tabular-nums}
.rs3-delen b.min{color:var(--red)}
.rs3-delen b.nul{color:var(--tx3);font-weight:500}
.rs3-opdr{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rs3-opdr li{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:13px}
.rs3-opdr small{flex-basis:100%;color:var(--tx3);font-size:12px}
.rs3-res .rs2-status{margin:0 0 8px}
.rs3-stot{margin:0 0 8px}
.rs3-stud{display:grid;gap:6px}
.rs3-st{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:8px 12px}
.rs3-st summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.rs3-st summary .hint{font-size:12.5px}
.rs3-staan{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.rs3-staan li{font-size:13px}
.rs3-staan small{display:block;color:var(--tx3);font-size:12px}
.rs3-stuit{margin-top:8px;display:grid;gap:4px;font-size:13px}
.rs3-stuit small{color:var(--tx2)}
.rs3-aanvr .rs2-mijn{margin:0}
@media (max-width:900px){.rs3-resgrid{grid-template-columns:minmax(0,1fr)}.rs3-ads{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:560px){
  .rs3-balk{padding:8px 10px}
  .rs3-rij{gap:6px}
  .rs3-tegoed{height:34px;padding:0 10px}
  .rs3-seg button{padding:0 11px}
  .rs3-start{flex:1 1 auto}
  .rs3-comps{grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:2px}
  .rs3-comp{scroll-snap-align:start}
  .rs3-ads{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rs3-prods .rs3-prod:nth-child(n+5){display:none}
}
.rs3-meer{margin-top:6px;font-size:12.5px}
/* 01-10 Research 'waar voor je geld': samenvatting, tijdlijn, concurrenten met beste product, sorteerbare producten, ads-rij, eerdere research */
.rs3-sum{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;padding:10px 12px;margin:0 0 12px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);font-size:14px}
.rs3-sum b{font-size:18px;font-variant-numeric:tabular-nums}
.rs3-sum small{color:var(--tx3);font-size:12px;margin-left:2px}
.rs3-sumkop{font-size:12px;font-weight:600;color:var(--tx2);flex-basis:100%}
.rs3-kost{margin-left:auto}
.rs3-tl{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px;font-size:13px}
.rs3-tl li{position:relative;padding-left:20px;color:var(--tx3)}
.rs3-tl li::before{content:'';position:absolute;left:3px;top:5px;width:9px;height:9px;border-radius:50%;border:2px solid var(--line2)}
.rs3-tl li.tk{color:var(--tx2)}.rs3-tl li.tk::before{background:var(--grn);border-color:var(--grn)}
.rs3-tl li.tn{color:var(--tx);font-weight:600}.rs3-tl li.tn::before{border-color:var(--amb);animation:rs3puls 1.2s ease-in-out infinite}
@keyframes rs3puls{50%{background:var(--amb)}}
.rs3-deel{margin:0 0 14px}
.rs3-deel h3{margin:0 0 8px;font-size:14px;font-weight:600}
.rs3-deel h3 span{color:var(--tx3);font-weight:500;margin-left:4px;font-size:13px}
.rs3-deelkop{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin:0 0 8px}
.rs3-deelkop h3{margin:0}
.rs3-sort{display:flex;flex-wrap:wrap;gap:4px}
.rs3-sort .rs2-chip{height:28px;font-size:12.5px}
.rs3-ccg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rs3-cc{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);min-width:0}
.rs3-cckop{display:flex;gap:6px;align-items:center;min-width:0}
.rs3-cckop b{flex:1 1 auto;min-width:0;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.rs3-cctal{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--tx2)}
.rs3-cctal b{color:var(--tx);font-size:14px}
.rs3-bp{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;padding:6px;border-radius:8px;background:var(--panel);cursor:pointer}
.rs3-bp:hover{background:var(--hover)}
.rs3-bp.leeg{display:block;font-size:12.5px;color:var(--tx3);cursor:default}
.rs3-bpimg{width:48px;height:60px;border-radius:6px;overflow:hidden;display:block;background:var(--panel2)}
.rs3-bpimg img,.rs3-bpimg .rs2-ph{width:100%;height:100%;object-fit:cover}
.rs3-bp small{display:block;font-size:11px;color:var(--tx3)}
.rs3-bp b{display:block;font-size:13px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs3-bp span:not(.rs3-bpimg){display:flex;gap:6px;align-items:center;font-size:12.5px;margin-top:2px}
.rs3-cc .rs3-links{margin-top:auto}
.rs3-pcg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.rs3-pc{display:flex;flex-direction:column;gap:3px;min-width:0;cursor:pointer;border-radius:10px;padding:0 0 4px}
.rs3-pc:hover b{text-decoration:underline}
.rs3-pimg{position:relative;display:block;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--panel2);margin-bottom:4px}
.rs3-pimg img,.rs3-pimg .rs2-ph{width:100%;height:100%;object-fit:cover}
.rs3-pkans{position:absolute;left:6px;top:6px}
.rs3-pkans .chip{background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.rs3-pc b{font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rs3-pprijs{font-size:13px;font-weight:600}
.rs3-pprijs s{color:var(--tx3);font-weight:400;margin-left:4px}
.rs3-pprijs.rs3-weg{color:var(--tx3);font-weight:400;font-size:12px}
.rs3-pc .rs3-waarom{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rs3-bij{font-size:11.5px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs3-adrij{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.rs3-adrij .rs3-ad{aspect-ratio:4/5}
.rs3-adrij .rs3-ad em{font-size:10.5px;right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs3-adrij .rs3-ad.oud{opacity:.7}
.rs3-pcg:not(.alle) .rs3-pc:nth-child(n+9){display:none}
.rs3-alleenm{display:none}
.rs3-kost b{white-space:nowrap}
.rs3-adgroot{display:flex;justify-content:center;background:var(--panel2);border-radius:10px;overflow:hidden}
.rs3-adgroot img,.rs3-adgroot .rs2-ph{max-width:100%;max-height:70vh;object-fit:contain}
.rs3-adinfo{margin:10px 0 0;font-size:14px;line-height:1.5}
.rs3-eerder{border-top:1px solid var(--line);padding-top:8px}
.rs3-eerder summary{cursor:pointer;font-size:13.5px;font-weight:600}
.rs3-eerder summary .hint{font-weight:400;margin-left:6px}
.rs3-eerder ul{list-style:none;margin:8px 0;padding:0;display:grid;gap:6px}
.rs3-eerder li{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:13px}
.rs3-eerder li em{margin-left:auto;font-style:normal;font-variant-numeric:tabular-nums}
@media (max-width:1100px){.rs3-ccg{grid-template-columns:repeat(2,minmax(0,1fr))}.rs3-pcg{grid-template-columns:repeat(3,minmax(0,1fr))}.rs3-adrij{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){
  .rs3-sum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;font-size:13px;padding:8px 10px}.rs3-sum b{font-size:16px}
  .rs3-sumkop,.rs3-kost{grid-column:1/-1;margin-left:0}
  .rs3-tl{gap:2px;font-size:12.5px}
  .rs3-ccg{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;padding-bottom:4px}
  .rs3-ccg{align-items:start}
  .rs3-cc{scroll-snap-align:start}
  .rs3-pcg{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .rs3-pcg:not(.alle) .rs3-pc:nth-child(n+5){display:none}
  .rs3-pimg{aspect-ratio:1}
  .rs3-sort{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:2px}
  .rs3-sort .rs2-chip{flex:0 0 auto}
  .rs3-aanvr .rs2-mijnrij{flex-wrap:wrap}
  .rs3-aanvr .rs2-mijnrij em{flex-basis:100%;text-align:right;margin-top:-2px}
  .rs3-alleenm{display:inline}
  .rs3-adrij{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:6px;padding-bottom:2px}
  .rs3-adrij .rs3-ad{flex:0 0 38%;scroll-snap-align:start}
}
.rs3-prods .rs3-prod:nth-child(n+5){display:none}

/* 01-10: tweede bron voor de bezorgstatus (bron per order, nog niet gecontroleerd, sleutels) */
.vz-bronlab{color:var(--tx3);font-size:11.5px}
.vz-tecontr{margin:12px 0 0;border-top:1px solid var(--line);padding-top:10px}
.vz-tecontr>summary{cursor:pointer;display:flex;flex-direction:column;gap:2px;list-style:none}
.vz-tecontr>summary::-webkit-details-marker{display:none}
.vz-tecontr>summary b::after{content:' ›';color:var(--tx3)}
.vz-tecontr[open]>summary b::after{content:' ⌄'}
.vz-tecontr>summary .hint{font-size:12px}
.vz-tecontr .vz-lijst{margin-top:8px}
.vz-bronkaart{margin-top:12px}
.vz-bronkaart .vz-khead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.vz-sl{display:flex;flex-direction:column;gap:4px;margin:10px 0 0}
.vz-sl>span:first-child{font-weight:600;font-size:13px}
.vz-sl em{font-weight:400;font-style:normal;color:var(--tx3)}
.vz-slrij{display:flex;flex-wrap:wrap;gap:6px}
.vz-slrij .inp{flex:1 1 180px;min-width:0}
.vz-tl-bron{margin:10px 0 0;font-size:12.5px}
.rs3-prod .rs3-waarom{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:560px){.rs3-prods .rs3-prod:nth-child(n+4){display:none}}
/* 01-10: Jouw resultaten — max. 6 ad-tegels (een tegel waarvan het beeld niet laadt verdwijnt, de volgende schuift door); verouderd licht gedimd;
   product zonder foto zegt dat in woorden. */
.rs3-ads .rs3-ad:nth-child(n+7){display:none}
.rs3-ad.oud img{opacity:.7}
.rs3-prod .rs2-th .rs2-ph{gap:1px;padding:2px;text-align:center}
.rs3-prod .rs2-th .rs2-ph small{display:block;font-size:9px;line-height:1.1}
/* 01-10: proefbalk op de telefoon: tekst over de hele breedte, knop eronder. */
@media (max-width:760px){.setupbalk.sbproef{flex-direction:column!important;align-items:stretch!important}.setupbalk.sbproef>div{flex:none!important}.setupbalk.sbproef .btn{width:100%;justify-content:center}}
/* 01-10 Research Ads: sorteren, Bewaard, downloaden (benchmark) */
.rs2-werk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 0 10px}
.rs2-sort{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--mut,#667)}
.rs2-sort select{min-width:0;width:auto;max-width:190px}
.rs2-badges .rs2-bw{color:#c2185b}
.rs2-kaarten{margin:4px 0 0 18px;padding:0;font-size:13px;line-height:1.45}
.rs2-knoppen .btn.on{border-color:#c2185b;color:#c2185b}
@media (max-width:600px){.rs2-werk{gap:6px}.rs2-werk .btn{flex:0 0 auto}.rs2-sort select{max-width:160px}}

/* Klantenservice (01-10): interview, score per concept, lessen, oude antwoorden */
.ksiv{padding:20px;margin-bottom:14px}
.ksiv-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ksiv-kop b{font-size:15px}
.ksiv-pct{font-size:12.5px;font-weight:600;color:var(--amb);background:color-mix(in srgb,var(--amb) 12%,transparent);padding:3px 10px;border-radius:999px}
.ksiv-pct.klaar{color:var(--grn);background:color-mix(in srgb,var(--grn) 12%,transparent)}
.ksiv-balk{height:6px;border-radius:6px;background:var(--line);margin:10px 0 12px;overflow:hidden}
.ksiv-balk span{display:block;height:100%;background:var(--grn);border-radius:6px;transition:width .3s}
.ksiv-uitleg{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:0 0 12px}
.ksiv-uitleg summary{cursor:pointer;font-size:13px;font-weight:600}
.ksiv-uitleg ol{margin:8px 0 4px 18px;padding:0;font-size:13px;line-height:1.55;color:var(--tx2)}
.ksiv-uitleg li{margin:3px 0}
.ksiv-claude{border:1px solid color-mix(in srgb,var(--amb) 40%,var(--line));background:color-mix(in srgb,var(--amb) 6%,transparent);border-radius:10px;padding:12px;margin:0 0 12px}
.ksiv-claude>b{font-size:13.5px}
.ksiv-vraag{margin-top:10px}
.ksiv-vraag p{margin:0 0 4px;font-size:13.5px;line-height:1.5}
.ksiv-vraag textarea{margin:6px 0}
.ksiv-stap{display:flex;flex-direction:column;gap:6px}
.ksiv-vr{font-size:14.5px;font-weight:600;line-height:1.45}
.ksiv-stap textarea{min-height:76px}
.ksiv-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.ksiv-chip{font:inherit;font-size:12px;border:1px solid var(--line);background:transparent;color:var(--tx2);border-radius:999px;padding:4px 10px;cursor:pointer}
.ksiv-chip.ok{color:var(--grn);border-color:color-mix(in srgb,var(--grn) 35%,var(--line))}
.ksiv-chip.on{border-color:var(--acc);color:var(--tx)}
.ksles-kop{font-size:15px;display:block;margin-bottom:6px}
.ksles{display:flex;flex-direction:column;gap:6px}
.ksles-rij{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:start;padding:7px 0;border-bottom:1px solid var(--line)}
.ksles-rij .chip{font-size:11px;white-space:nowrap}
.ksles-t{font-size:13px;line-height:1.45;overflow-wrap:anywhere;min-width:0}
.ksles-d{white-space:nowrap;font-size:11.5px}
.ksles-weg{padding:0 8px;min-height:26px}
@media (max-width:600px){.ksles-rij{grid-template-columns:1fr auto}.ksles-rij .chip{grid-column:1/2;justify-self:start}.ksles-t{grid-column:1/3}.ksles-d{grid-column:1/2}.ksles-weg{grid-column:2/3;grid-row:1}}
.ksh{padding:20px;margin-top:14px}
.ksh-kop{font-size:15px;display:block}
.ksh-stappen{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:700px){.ksh-stappen{grid-template-columns:1fr}}
.ksh-velden{margin-top:8px}
.ksh-res{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
.ksh-toon{margin:8px 0 10px 18px;padding:0;font-size:13px;line-height:1.55}
.ksh-sj{margin:8px 0}
.ksh-sj pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:12.5px;line-height:1.5;background:var(--panel2);border-radius:8px;padding:10px;margin:4px 0 0}
.ks-sein{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid color-mix(in srgb,var(--amb) 40%,var(--line));background:color-mix(in srgb,var(--amb) 6%,transparent);border-radius:10px;padding:10px 12px;margin:0 0 12px;font-size:13.5px}
.ks-sein span{flex:1 1 220px}
.ib-kw{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:0 0 8px;font-size:13px}
.ib-kw summary{cursor:pointer;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.ib-kw.goed summary b{color:var(--grn)} .ib-kw.niet{border-color:color-mix(in srgb,var(--amb) 45%,var(--line))} .ib-kw.niet summary b{color:var(--amb)}
.ib-kwscore{font-weight:700;font-variant-numeric:tabular-nums}
.ib-kwlijst{margin:8px 0 0 18px;padding:0;line-height:1.5}
.ib-kwlijst li{margin:3px 0}
.ib-kwchip{font-style:normal;font-size:11px;font-weight:600;padding:2px 7px;border-radius:10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ib-kwchip.goed{color:var(--grn);background:color-mix(in srgb,var(--grn) 12%,transparent)} .ib-kwchip.niet{color:var(--amb);background:color-mix(in srgb,var(--amb) 14%,transparent)}

/* Creatives: kosten vóór Zet klaar, runbook en stijlcheck (01-10, handboek in de hub) */
.cr-budget{display:flex;flex-direction:column;gap:8px;padding:12px 14px;margin:14px 0 0;border:1px solid var(--line);border-radius:12px;background:var(--bg2, transparent)}
.cr-budget p{margin:0;line-height:1.5;overflow-wrap:anywhere}
.cr-budget .cr-kwal{align-self:flex-start;max-width:100%}
.cr-budget .cr-vink{margin:0}
.cr-runbook{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:12px 0}
.cr-rbkop{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.cr-rbkop span{color:var(--amb, inherit);font-weight:600}
.cr-rblijst{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.cr-rblijst li{overflow-wrap:anywhere;line-height:1.45}
.cr-rblijst .sk-prompt{white-space:pre-wrap}
.cr-sclijst{margin:8px 0 0;padding-left:18px}
.cr-sclijst li.af{color:var(--rd, #b42318)}
.cr-bgregel{margin:6px 0}
.cr-knoppen.cr-knoppen-wrap{flex-wrap:wrap;overflow:visible}

/* Klanttest 01-10: Klantenservice — één inklapbare meldingenregel boven de inbox, en meer ruimte voor het bericht. */
.ks-meld{border:1px solid var(--line);border-radius:10px;background:var(--panel);margin:0 0 10px;font-size:13px}
.ks-meld.let{border-color:color-mix(in srgb,var(--amb) 45%,var(--line));background:color-mix(in srgb,var(--amb) 6%,var(--panel))}
.ks-meld>summary{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:8px 14px;cursor:pointer;list-style:none;min-height:40px}
.ks-meld>summary::-webkit-details-marker{display:none}
.ks-meld-t{min-width:0;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ks-meld-t b{color:var(--tx)}
.ks-meld-k{flex:none;font-size:12px;font-weight:600;color:var(--acc)}
.ks-meld-in{padding:4px 12px 2px}
.ks-meld-in>*{margin-bottom:10px!important}
@media(max-width:720px){.ks-meld-t{white-space:normal}}
@media(min-width:981px){.ib.ib-heeftsel{grid-template-columns:190px minmax(250px,320px) minmax(0,1fr)}}
.ib-draad{min-height:190px}
.ib-composer textarea{min-height:130px}
/* Klanttest 01-10: totaalregel in de ROAS-sheet */
tfoot tr.rs-totaal td{border-top:2px solid var(--line);background:var(--panel2);font-weight:600}
/* Klanttest 01-10: zoeken op ordernummer of trackingcode bij Verzending */
.vz-zoek{display:flex;gap:8px;margin:0 0 12px;max-width:520px}
.vz-zoek .inp{flex:1;min-width:0}
@media(max-width:720px){.vz-zoek{max-width:none}.vz-zoek .inp{font-size:16px}}
/* Klanttest 01-10: inklapbare groepen in het beheermenu */
#side > .navlbl.navklap{cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none}
#side > .navlbl.navklap::after{content:'▾';font-size:10px;opacity:.6;margin-right:4px;transition:transform .15s}
#side > .navlbl.navklap.dicht::after{transform:rotate(-90deg)}
#side > .nav.navdicht{display:none!important}
.wiz-staptitel{font-size:19px;margin:2px 0 4px;font-weight:650}
.tgb-deel[hidden]{display:none!important}
/* Klanttest 01-10: Bewaking — standaardregel uit de 1-pager */
.rg-std{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between;padding:10px 12px;margin:0 0 12px;border:1px dashed var(--line);border-radius:10px;font-size:13px;line-height:1.5}
.rg-std span{flex:1 1 240px}
.rg-std.aan{display:block;border-style:solid;border-color:color-mix(in srgb,var(--grn) 45%,var(--line));background:color-mix(in srgb,var(--grn) 6%,transparent)}
.rg-std.aan .hint{display:block;margin-top:4px}
.rg-preset-preview{flex-basis:100%;min-width:0}
.rg-preset-preview summary{cursor:pointer}
.rg-preset-tabel{width:100%;margin:8px 0;border-collapse:collapse;table-layout:fixed;font-size:13px;text-align:left}
.rg-preset-tabel th,.rg-preset-tabel td{padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top;white-space:normal;overflow-wrap:anywhere}
.rg-preset-tabel th{position:static;cursor:default}
.rg-preset-tabel th:first-child,.rg-preset-tabel td:first-child{width:90px;white-space:nowrap;font-variant-numeric:tabular-nums}
.rg-kopknoppen,.rg-voetknoppen{display:inline-flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* Klanttest 01-10: Dispute fighter — velden ingevuld vanuit het ordernummer */
.dz-gevonden{border:1px solid color-mix(in srgb,var(--grn) 40%,var(--line));background:color-mix(in srgb,var(--grn) 6%,transparent);border-radius:10px;padding:9px 12px;margin:0 0 12px;font-size:13px;line-height:1.5}
.acc-fac-meer>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--acc);padding:8px 0}

/* Advertenties zonder product (01-10): reden + 'Koppel aan product' per regel */
.zp-kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.zp-rij{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}
.zp-rij:first-of-type{border-top:none}
.zp-wat{flex:1 1 260px;min-width:0}
.zp-wat b{display:block;overflow-wrap:anywhere;font-size:13.5px}
.zp-wat small{display:block;color:var(--tx3);font-size:12px;margin-top:2px;overflow-wrap:anywhere}
.zp-bedrag{font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap}
.zp-form{display:flex;gap:6px;flex:1 1 100%;flex-wrap:wrap}
.zp-form .inp{flex:1 1 200px;min-width:0;max-width:420px}
@media (max-width:600px){ .zp-knop{width:100%} .zp-bedrag{margin-left:auto} }
/* 02-10: Koppel aan product / Koppel aan collectie naast elkaar, op de telefoon onder elkaar */
.zp-knoppen{display:flex;gap:6px;flex-wrap:wrap}
.zp-vraag{flex:1 1 100%;font-size:13px}
.zp-uitleg{flex:1 1 100%;margin:0}
.zp-form select.inp{flex:1 1 220px;min-width:0;max-width:420px}
@media (max-width:600px){ .zp-knoppen{width:100%} .zp-knoppen .zp-knop{flex:1 1 100%} .zp-form .btn{flex:1 1 100%} }
/* ROAS-sheet (controle 01-10): tien kolommen passen op 1280 zonder dat de ROAS-kolom wegvalt */
.rs-tbl th{white-space:normal;line-height:1.25;vertical-align:bottom}
.rs-tbl th,.rs-tbl td{padding-left:9px;padding-right:9px}
.rs-tbl th:first-child,.rs-tbl td:first-child{padding-left:14px}
/* Leaderboard op Start (02-10): bovenaan, volle breedte, donkere kaart in de kleur van de zijbalk (--zij), podium voor de top 3
   en plek 4–10 compact. Plat, zoals de huisstijl: geen verloop of gloed. Schakelaar 'Toon mij op het leaderboard' klein onderaan. */
.lb-kaart{--lbtx:var(--zijtx,#F2F4F7);--lbtx2:rgba(242,244,247,.66);--lblijn:rgba(242,244,247,.12);--lbvak:rgba(242,244,247,.06);
  background:var(--zij,#141414);color:var(--lbtx);border:1px solid var(--zij,#141414);border-radius:14px;padding:20px 22px 14px;margin:0 0 20px;display:flex;flex-direction:column;gap:16px}
html[data-theme="dark"] .lb-kaart{border-color:var(--line2)}
.lb-hkop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px}
.lb-titel{display:flex;align-items:center;gap:12px;min-width:0}
.lb-titel .lb-trofee{width:34px;height:34px;flex:none}
.lb-titel h2{font-family:var(--kopfont);font-weight:500;font-size:24px;letter-spacing:-.015em;line-height:1.1;color:var(--lbtx)}
.lb-titel span{display:block;font-size:12.5px;color:var(--lbtx2);margin-top:2px}
.lb-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.lb-seg{display:flex;gap:2px;padding:3px;border-radius:9px;background:var(--lbvak);border:1px solid var(--lblijn)}
.lb-seg button{min-height:34px;padding:0 14px;border-radius:7px;font-size:13px;font-weight:550;color:var(--lbtx2)}
.lb-seg button.on{background:var(--lbtx);color:var(--zij,#141414)}
.lb-seg button:not(.on):hover{color:var(--lbtx)}
.lb-mnav{display:flex;align-items:center;gap:2px;font-size:13px;font-weight:600}
.lb-mnav span{min-width:74px;text-align:center}
.lb-mnav button{width:34px;height:34px;border-radius:8px;font-size:18px;line-height:1;color:var(--lbtx)}
.lb-mnav button:hover:not(:disabled){background:var(--lbvak)}
.lb-mnav button:disabled{opacity:.3;cursor:default}
.lb-body{display:flex;flex-direction:column;gap:12px}
.lb-laadt{opacity:.5;transition:opacity .15s}
.lb-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end}
.lb-podium.n1{grid-template-columns:minmax(0,1fr);max-width:320px;margin:0 auto;width:100%}
.lb-podium.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lb-pod{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:16px 10px 14px;border-radius:12px;background:var(--lbvak);border:1px solid var(--lblijn);min-width:0}
.lb-pod .lb-trofee{width:40px;height:40px;margin-bottom:4px}
.lb-pod.eerste{padding-top:24px;padding-bottom:20px;border-color:rgba(224,178,46,.55);border-top:3px solid #e0b22e}
.lb-pod.eerste .lb-trofee{width:52px;height:52px}
.lb-pod.p2:not(.eerste){border-top:3px solid #b9c0cb}
.lb-pod.p3:not(.eerste){border-top:3px solid #c98450}
.lb-pod-plek{font-size:12px;font-weight:600;color:var(--lbtx2)}
.lb-pod-naam{font-size:17px;font-weight:650;line-height:1.25;overflow-wrap:anywhere;max-width:100%}
.lb-pod.eerste .lb-pod-naam{font-size:20px}
.lb-pod-vol{font-size:11px;color:var(--lbtx2)}
.lb-pod-euro{font-family:var(--kopfont);font-size:24px;font-weight:500;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.lb-pod.eerste .lb-pod-euro{font-size:30px;color:#f0c94f}
.lb-pod-dag{font-size:12px;color:var(--lbtx2)}
.lb-pod.jij{background:rgba(242,244,247,.12)}
.lb-lijst{list-style:none;margin:0;padding:0;columns:2 300px;column-gap:28px}
.lb-rij{display:grid;grid-template-columns:24px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid var(--lblijn);font-size:14px;break-inside:avoid}
.lb-nr{font-size:12.5px;font-weight:600;color:var(--lbtx2);font-variant-numeric:tabular-nums;text-align:center}
.lb-naam{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:550}
.lb-maand{font-size:12px;color:var(--lbtx2);white-space:nowrap}
.lb-euro{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;min-width:64px;font-weight:650}
.lb-rij.jij{background:rgba(242,244,247,.1);border-radius:8px;border-bottom-color:transparent}
.lb-rij:last-child{border-bottom-color:transparent}
.lb-jij{font-style:normal;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:99px;background:var(--lbtx);color:var(--zij,#141414);margin-left:6px;vertical-align:1px}
.lb-leeg,.lb-mijn{margin:0;font-size:13px;color:var(--lbtx2)}
.lb-leeg{padding:16px;border:1px dashed var(--lblijn);border-radius:10px;text-align:center}
.lb-uit{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border:1px dashed var(--lblijn);border-radius:10px;font-size:13px}
.lb-uit span{flex:1 1 200px}
.lb-voet{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;border-top:1px solid var(--lblijn);padding-top:6px}
.lb-proef{margin:0;font-size:12px;color:#e0b064}
.lb-schakel{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:12.5px;min-height:40px;position:relative;color:var(--lbtx2)}
.lb-schakel input{position:absolute;left:0;top:0;opacity:0;width:1px;height:1px}
.lb-knop{width:32px;height:18px;border-radius:99px;background:rgba(242,244,247,.25);position:relative;flex:none;transition:background .15s}
.lb-knop::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s}
.lb-schakel input:checked + .lb-knop{background:#3f9a62}
.lb-schakel input:checked + .lb-knop::after{transform:translateX(14px)}
.lb-schakel input:focus-visible + .lb-knop{outline:2px solid var(--lbtx);outline-offset:2px}
.lb-schakel input:disabled + .lb-knop{opacity:.6}
/* Instellingen (Meldingen): gewone lichte kaart, zelfde schakelaar in de kleuren van de pagina. */
.lb-inst{margin:0 0 16px;justify-content:flex-start}
.lb-inst .lb-schakel{color:var(--tx);font-size:13.5px}
.lb-inst .lb-knop{background:var(--line2)}
.lb-inst .lb-schakel input:checked + .lb-knop{background:var(--grn)}
.lb-inst .lb-proef{color:var(--amb);margin-top:6px}
@media (max-width:600px){
  .lb-kaart{padding:16px 14px 10px;border-radius:12px;gap:14px}
  .lb-titel h2{font-size:21px}
  .lb-tabs{width:100%;justify-content:space-between}
  .lb-podium{gap:6px}
  .lb-pod{padding:12px 4px 10px;border-radius:10px}
  .lb-pod.eerste{padding-top:16px;padding-bottom:14px}
  .lb-pod .lb-trofee{width:30px;height:30px}
  .lb-pod.eerste .lb-trofee{width:40px;height:40px}
  .lb-pod-plek{font-size:10px;letter-spacing:.04em}
  .lb-pod-naam{font-size:14px}
  .lb-pod.eerste .lb-pod-naam{font-size:15.5px}
  .lb-pod-euro{font-size:18px}
  .lb-pod.eerste .lb-pod-euro{font-size:21px}
  .lb-pod-dag{font-size:11px}
  .lb-rij{gap:8px;padding:8px 4px}
  .lb-euro{min-width:0}
}

/* 02-10 Research voor studenten: één vast submenu (Resultaat · Concurrenten · Producten · Ads · Trends · Geschiedenis · Tegoed),
   filters op één regel, compacte kaarten, Geschiedenis als één rij per research. */
.rs3 #rs2{scroll-margin-top:var(--rs3top,0px)}
.rs3 #tegoed{scroll-margin-top:calc(var(--rs3top,0px) + 56px)}
.rs3-nav{position:sticky;top:var(--rs3top,0px);z-index:8;background:var(--bg);margin:0 0 14px;border-bottom:1px solid var(--line)}
.rs3-navin{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rs3-navin::-webkit-scrollbar{display:none}
.rs3-navin button{flex:0 0 auto;height:42px;padding:0 12px;border:0;background:transparent;color:var(--tx2);font:inherit;font-size:14px;font-weight:550;cursor:pointer;white-space:nowrap;box-shadow:inset 0 -2px 0 transparent}
.rs3-navin button:hover{color:var(--tx)}
.rs3-navin button.on{color:var(--tx);font-weight:650;box-shadow:inset 0 -2px 0 var(--tx)}
.rs3-navin button span{margin-left:6px;font-size:12px;color:var(--tx3);font-weight:500}
.rs3-tegoed.laag b{color:var(--red)}
.rs3-intro{padding:12px 14px;margin:0 0 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:13.5px;line-height:1.45}
.rs3-intro ul{margin:6px 0 10px;padding-left:18px;display:grid;gap:3px;color:var(--tx2)}
.rs3-intro ul b{color:var(--tx)}
.rs3-markten{margin-bottom:8px}
.rs3-fbalk{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.rs3-fbalk .rs2-zoek{margin:0;flex:1 1 180px;max-width:240px}
.rs3-fbalk .rs2-chips{margin:0;flex:0 1 auto}
.rs3-frest{display:contents}
.rs3-sel{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--tx2)}
.rs3-sel select{width:auto!important;max-width:175px;height:34px}
.rs3-toonmeer{margin:14px 0 4px}
/* Concurrentkaart (compact) */
.rs3-g-comp{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rs3-sc{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer;min-width:0;transition:border-color .14s}
.rs3-sc:hover{border-color:var(--line2)}
.rs3-sc:focus-visible{outline:2px solid var(--tx2);outline-offset:2px}
.rs3-sckop{display:flex;gap:6px;align-items:center;min-width:0}
.rs3-sckop b{flex:1 1 auto;min-width:0;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs3-sctal{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:12.5px;color:var(--tx2)}
.rs3-sctal b{color:var(--tx);font-size:14px}
.rs3-scstrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.rs3-scstrip span{display:block;aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--panel2)}
.rs3-scstrip img,.rs3-scstrip .rs2-ph{width:100%;height:100%;object-fit:cover}
.rs3-scstrip .rs2-ph small{display:none}
.rs3-sc .rs3-links,.rs3-cc .rs3-links{margin-top:auto}
/* Collecties (06-10): ads die naar een collectiepagina linken i.p.v. één product, apart naast Producten. */
.rs3-g-col{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rs3-col{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);min-width:0}
.rs3-colkop{display:flex;gap:6px;align-items:center;min-width:0}
.rs3-colkop b{flex:1 1 auto;min-width:0;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs3-colwinkel{font-size:12.5px;color:var(--tx3)}
.rs3-coltal{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:12.5px;color:var(--tx2)}
.rs3-coltal b{color:var(--tx);font-size:14px}
.rs3-colprod{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--tx2)}
.rs3-colprod span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs3-collinks{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap}
.rs3-colrij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.rs3-colmini{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);min-width:0}
.rs3-colmini b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs3-colmini span{font-size:12px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1100px){.rs3-g-col{grid-template-columns:repeat(2,minmax(0,1fr))}.rs3-colrij{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.rs3-g-col{grid-template-columns:minmax(0,1fr)}.rs3-colrij{grid-template-columns:minmax(0,1fr)}}
/* Producten en ads in de tabs: korter */
.rs3 .rs2-g-prod .rs3-waarom{display:none}
.rs3 .rs2-g-prod .rs2-pmeta{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.rs3 .rs2-g-prod{grid-template-columns:repeat(6,minmax(0,1fr))}
.rs3 .rs2-media .rs2-bew,.rs3 .rs2-media .rs2-bsl{background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.18)}
/* Resultaat */
.rs3-som{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;padding:10px 14px;margin:0 0 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:14px}
.rs3-som b{font-size:18px;font-variant-numeric:tabular-nums}
.rs3-somwat{color:var(--tx3);font-size:13px}
.rs3-somprijs{margin-left:auto;color:var(--tx2)}
.rs3-bekeken{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin:0 0 8px;font-size:13px;color:var(--tx2)}
.rs3-deel{margin:0 0 18px}
.rs3-deelkop{display:flex;align-items:baseline;gap:10px;margin:0 0 8px}
.rs3-deelkop h3{margin:0;font-size:15px;font-weight:600}
.rs3-deelkop h3 span{color:var(--tx3);font-weight:500;font-size:13px;margin-left:4px}
.rs3-deelkop .rs2-link{margin-left:auto;font-size:13px;white-space:nowrap}
.rs3 .rs3-pcg{grid-template-columns:repeat(6,minmax(0,1fr))}
.rs3 .rs3-pc b{-webkit-line-clamp:2}
/* Geschiedenis */
.rs3-histkop{margin:0 0 8px;font-size:13.5px;color:var(--tx2)}
.rs3-hist ul{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.rs3-hr+.rs3-hr{border-top:1px solid var(--line)}
.rs3-hknop{display:grid;grid-template-columns:minmax(0,1fr) 90px 72px 64px 14px;gap:10px;align-items:center;width:100%;padding:8px 14px;border:0;background:transparent;color:var(--tx);font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.rs3-hknop:hover{background:var(--hover)}
.rs3-hknop:disabled{opacity:.6;cursor:progress}
.rs3-hwie{min-width:0}
.rs3-hwie b{display:block;font-weight:600}
.rs3-hwie small{display:block;color:var(--tx3);font-size:12px}
.rs3-hn{font-weight:600;text-align:right}
.rs3-hp{text-align:right;font-variant-numeric:tabular-nums;color:var(--tx2)}
.rs3-hknop .chip{justify-self:end}
.rs3-hpijl{color:var(--tx3);font-size:18px;line-height:1;transition:transform .15s}
.rs3-hr.open .rs3-hpijl{transform:rotate(90deg)}
.rs3-hknop.laadt .rs3-hpijl{animation:rs3puls 1s ease-in-out infinite}
.rs3-hdet{display:flex;flex-wrap:wrap;gap:4px 18px;padding:0 14px 12px;font-size:13px;color:var(--tx2)}
.rs3-hr.mis{display:flex;justify-content:space-between;gap:10px;padding:6px 14px;font-size:12px;color:var(--tx3);background:var(--panel2)}
/* Tegoed */
.rs3-tgzin{margin:8px 0 4px}
.rs3-tgkol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px}
.rs3-tgkol .tg-kop{margin:8px 0 4px}
.rs3-fac{color:inherit;text-decoration:none}
.rs3-fac:hover span{text-decoration:underline}
@media (max-width:1100px){.rs3-g-comp{grid-template-columns:repeat(2,minmax(0,1fr))}.rs3 .rs3-pcg,.rs3 .rs2-g-prod{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:720px){
  .rs3-nav{margin:0 -16px 12px;padding:0 8px}
  .rs3-navin button{height:44px;padding:0 10px}
  .rs3-fbalk .rs2-zoek{flex:1 1 100%;max-width:none}
  .rs3-frest{display:flex;flex:1 1 100%;min-width:0;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .rs3-frest::-webkit-scrollbar{display:none}
  .rs3-frest>*{flex:0 0 auto}
  .rs3-frest .rs2-chips{flex-wrap:nowrap;overflow:visible}
  .rs3-sel>span{display:none}
  .rs3-sel select{max-width:170px}
  .rs3-markten{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .rs3-g-comp{grid-template-columns:minmax(0,1fr)}
  .rs3 .rs2-g-prod{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rs3-som{gap:2px 14px;font-size:13px;padding:8px 12px}.rs3-som b{font-size:16px}
  .rs3-somwat{flex-basis:100%}
  .rs3 .rs3-pcg{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:42%;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;padding-bottom:4px;scrollbar-width:none}
  .rs3 .rs3-pcg .rs3-pc{scroll-snap-align:start}
  .rs3-hknop{grid-template-columns:minmax(0,1fr) auto auto 14px;gap:8px;padding:10px 12px}
  .rs3-hknop .chip{display:none}
  .rs3-tgkol{grid-template-columns:minmax(0,1fr)}
}

/* Eindronde layout 02-10: minder scrollen, inklapbare uitleg, patronen bij Research → Ads. */
.zp-kaart:not([open]) > summary{margin:0}
.zp-kaart[open] .zp-open{display:none}
.zp-kaart > summary::-webkit-details-marker,.rs3-pat > summary::-webkit-details-marker{display:none}
.zp-kaart > summary::before,.rs3-pat > summary::before{content:'▸';color:var(--tx3);font-size:12px;margin-right:2px}
.zp-kaart[open] > summary::before,.rs3-pat[open] > summary::before{content:'▾'}
.plwv:not([open]) > summary,.dp-zopak:not([open]) > summary{margin-bottom:0!important}
.rs3-pat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:0 0 12px}
.rs3-pat > summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:14px}
.rs3-pat ul{list-style:none;margin:8px 0 0;padding:0}
.rs3-pat li{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid var(--line);min-width:0}
.rs3-pat li:first-child{border-top:0}
.rs3-pat .chip{flex:0 0 58px;justify-content:center;font-size:11px}
.rs3-pat-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.rs3-pat li .btn{flex:0 0 auto;padding:3px 10px}
@media (max-width:860px){
  .stcijfers .wat,.mhero .mtr .wat,.mstrook .mtr .wat{display:none}
  .mlijst.vlak .mltekst small b{white-space:nowrap}
  .rs3-pat{padding:10px 12px}
  .rs3-pat li{align-items:flex-start;gap:6px;padding:6px 0}
  .rs3-pat .chip{flex:0 0 auto;min-width:0;padding:1px 7px;margin-top:1px}
  .rs3-pat-t{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35}
  .rs3-pat li .btn{min-height:0;height:auto;padding:3px 8px;font-size:12.5px}
}
/* Seizoenswinnaars (02-10) */
.rs3-modus{margin:0 0 8px}
.rs3-szsel{width:auto}
.rs3-szvorig{height:34px}
.rs3-szuitleg{margin:0 0 12px;font-size:13px}
.rs3-sztrends{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 14px;font-size:13px;color:var(--tx2)}
.rs3-szk .rs3-szw{color:var(--tx2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs3-szk .rs3-szt{font-size:12px;color:var(--tx2);line-height:1.35}
.rs3-szk .rs3-szt b{font-size:12px;color:var(--tx);-webkit-line-clamp:unset;display:inline}
.rs3-szads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0}
.rs3-szads figure{margin:0;min-width:0}
.rs3-szads figure{display:flex;flex-direction:column}
.rs3-szimg{position:relative;display:block;width:100%;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--panel2)}
.rs3-szimg img,.rs3-szimg .rs2-ph{position:static;width:100%;height:100%;object-fit:cover}
.rs3-szads figcaption{font-size:12px;color:var(--tx2);margin-top:4px;overflow-wrap:anywhere}
@media (max-width:720px){
  .rs3-modus{display:flex;width:100%}
  .rs3-modus button{flex:1;padding:0 8px}
  .rs3-szads{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rs3 .rs3-pcg.rs3-szg{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;scroll-snap-type:none}
}
/* Productvenster en Vergelijk (02-10): kansscore met opbouw, drie blokken, ads 3–30 d eerst */
.rs4{display:flex;flex-direction:column;gap:14px;min-width:0}
.rs4-top{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:start}
.rs4-beeld{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--panel2);aspect-ratio:4/5}
.rs4-beeld img,.rs4-beeld .rs2-ph{width:100%;height:100%;object-fit:cover;display:block}
.rs4-score{border:1px solid var(--line);border-radius:12px;background:var(--panel2);padding:12px 14px;min-width:0;--sk:var(--tx3)}
.rs4-score.s-goed{--sk:var(--grn)}.rs4-score.s-twijfel{--sk:var(--amb)}.rs4-score.s-zwak{--sk:var(--tx3)}
.rs4-skop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.rs4-sgetal{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.rs4-sgetal small{width:100%;font-size:12px;color:var(--tx2);font-weight:600}
.rs4-sgetal b{font-size:34px;line-height:1;color:var(--sk);font-variant-numeric:tabular-nums}
.rs4-sgetal span{font-size:15px;color:var(--tx3)}
.rs4-balk{position:relative;height:8px;border-radius:5px;background:var(--line);margin:10px 0 2px}
.rs4-balk>i{display:block;height:100%;border-radius:5px;background:var(--sk)}
.rs4-balk>em{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--tx2);border-radius:1px}
.rs4-zin{margin:8px 0 10px;font-size:14px;line-height:1.45;font-weight:600}
.rs4-delen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rs4-delen li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:7px 0;border-top:1px solid var(--line)}
.rs4-delen li>span{min-width:0}
.rs4-delen li b{display:block;font-size:13px;font-weight:600}
.rs4-delen li span small{display:block;font-size:12px;color:var(--tx2);line-height:1.35;overflow-wrap:anywhere}
.rs4-delen em{font-style:normal;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;align-self:start}
.rs4-delen em small{font-weight:500;color:var(--tx3);font-size:12px}
.rs4-delen li.p em{color:var(--grn)}.rs4-delen li.m em{color:var(--red)}.rs4-delen li.n em{color:var(--tx3)}
.rs4-delen li.n b{color:var(--tx2)}
.rs4-mb{grid-column:1/-1;display:block;height:4px;border-radius:3px;background:var(--line);overflow:hidden}
.rs4-mb>i{display:block;height:100%;background:var(--grn)}
.rs4-voet{margin:8px 0 0;font-size:12px;color:var(--tx3);line-height:1.4}
.rs4-blokken{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rs4-blok{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--panel);min-width:0}
.rs4-blok h3{margin:0 0 6px;font-size:14px;font-weight:700}
.rs4-blok dl{margin:0;display:flex;flex-direction:column}
.rs4-blok dl>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:8px;padding:5px 0;border-top:1px solid var(--line);font-size:13px}
.rs4-blok dl>div:first-child{border-top:0}
.rs4-blok dt{color:var(--tx2);min-width:0}
.rs4-blok dd{margin:0;min-width:0;overflow-wrap:anywhere}
.rs4-blok dd small{display:block;font-size:11.5px;color:var(--tx3);line-height:1.35;margin-top:1px}
.rs4-blok dd s{color:var(--tx3);margin-left:3px}
.rs4-blok dd .chip{padding:0 6px;font-size:11px}
.rs4-def{margin:8px 0 0;font-size:12px;color:var(--tx2);line-height:1.4;padding-top:6px;border-top:1px dashed var(--line)}
.rs4-link{display:inline-block;margin-top:6px;font-size:13px}
.rs4-ads{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.rs4-ad{display:flex;flex-direction:column;gap:3px;min-width:0;cursor:pointer}
.rs4-ad.oud .rs4-adimg{opacity:.6}
.rs4-adimg{position:relative;display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--panel2);border:1px solid var(--line)}
.rs4-adimg img,.rs4-adimg .rs2-ph{width:100%;height:100%;object-fit:cover}
.rs4-adtxt{font-size:12px;color:var(--tx2);line-height:1.35}
.rs4-adtxt b{color:var(--tx);font-weight:600}
.rs4-ad>i{font-style:normal;font-size:11px;font-weight:600}
.rs4-ad .t-zone{color:var(--grn)}.rs4-ad .t-test{color:var(--cyn)}.rs4-ad .t-oud,.rs4-ad .t-uit{color:var(--tx3);font-weight:500}
.rs4-kpi summary{cursor:pointer;font-size:12.5px;color:var(--tx2);margin-bottom:6px}
.rs4-red{font-size:12px;line-height:1.35;color:var(--tx);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rs3-pc .rs4-red{color:var(--tx2)}
/* Kaarten | Vergelijk */
.rs4-weergave{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;margin:0 0 10px}
.rs4-weergave .hint{font-size:12.5px}
.rs4-tabwrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel);max-width:100%}
.rs4-tab{border-collapse:collapse;width:100%;min-width:760px;font-size:13px}
.rs4-tab th,.rs4-tab td{padding:7px 10px;text-align:right;border-top:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums}
.rs4-tab thead th{border-top:0;background:var(--panel2);position:sticky;top:0}
.rs4-tab thead th button{all:unset;cursor:pointer;font-size:12px;font-weight:600;color:var(--tx2)}
.rs4-tab thead th[aria-sort] button{color:var(--tx)}
.rs4-tab thead th button:focus-visible{outline:2px solid var(--tx2);outline-offset:2px;border-radius:3px}
.rs4-tab th:first-child,.rs4-tab td:first-child{text-align:left}
.rs4-tab tbody th{font-weight:500;white-space:normal}
.rs4-tab th:first-child{position:sticky;left:0;z-index:1;background:var(--panel)}
.rs4-tab thead th:first-child{z-index:2;background:var(--panel2)}
.rs4-tab tbody tr:hover th{background:var(--hover)}
.rs4-tprod{display:flex;align-items:center;gap:8px;width:280px;max-width:280px}
.rs4-tab tbody tr{cursor:pointer}
.rs4-tab tbody tr:hover{background:var(--hover)}
.rs4-tbeeld{flex:0 0 34px;width:34px;height:42px;border-radius:5px;overflow:hidden;background:var(--panel2)}
.rs4-tbeeld img,.rs4-tbeeld .rs2-ph{width:100%;height:100%;object-fit:cover}
.rs4-tbeeld .rs2-ph small,.rs4-tbeeld .rs2-ph svg{display:none}
.rs4-tnaam{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.rs4-tnaam .chip{padding:0 5px;font-size:10.5px}
.rs4-ts{font-weight:700}.rs4-ts.s-goed{color:var(--grn)}.rs4-ts.s-twijfel{color:var(--amb)}.rs4-ts.s-zwak{color:var(--tx3)}
.rs4-tabnoot{margin:6px 0 0;font-size:12px}
@media (max-width:860px){
  .rs4-top{grid-template-columns:110px minmax(0,1fr);gap:10px}
  .rs4-blokken{grid-template-columns:minmax(0,1fr)}
  .rs4-tprod{width:190px;max-width:190px}
}
@media (max-width:560px){
  .rs4-top{grid-template-columns:minmax(0,1fr)}
  .rs4-beeld{aspect-ratio:auto;height:190px}
  .rs4-tprod{width:150px;max-width:150px}
  .rs4-beeld img{object-fit:contain}
  .rs4-ads{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .ovl > .modal.rs4m{max-height:100dvh;height:100dvh;border-radius:0!important}
  .ovl > .modal.rs4m::before{display:none}
  .ovl > .modal.rs4m .mhead{padding-top:10px}
}
.rs3-szk .rs3-szbad{display:flex;flex-wrap:wrap;gap:3px 4px}
.rs3-szk .rs3-szbad span{font-size:11.5px;line-height:1.3;padding:1px 6px;border-radius:6px;background:var(--panel2);color:var(--tx2)}
.rs3-szk .rs3-szbad b{font-size:11.5px;color:var(--tx);display:inline;-webkit-line-clamp:unset}
.rs3-szraming{font-size:13px;color:var(--tx2);white-space:nowrap}

/* 02-10: wat werkt per markt (Research → Ads) */
.rs3-mp{margin:4px 0 12px;padding:10px 12px;border:1px solid var(--line,#e7e0d4);border-radius:10px;background:var(--bg2,transparent)}
.rs3-mp ul{margin:8px 0 0}
.rs3-mp-r .rs3-pat-t b{font-weight:600}
.rs3-pat-sub{margin:6px 0 4px;font-size:13px}
.rs3-szk .rs3-szher{display:inline-block;margin-left:4px;padding:0 5px;border-radius:5px;font-size:10.5px;line-height:16px;background:var(--panel2);color:var(--tx3);vertical-align:1px}
.rs3-szk .rs3-szher.nw{background:rgba(46,125,50,.12);color:#2e7d32}
/* ROAS-sheet zoals Profitz (02-10): kiezer met foto's, kop per item, dagtabel die in zijn eigen vak scrolt */
.rs2-foto{position:relative;display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
.rs2-foto.groot{width:56px;height:56px;flex-basis:56px;border-radius:12px}
.rs2-foto em{font-style:normal;font-weight:650;color:var(--tx3);font-size:15px}
.rs2-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--panel2)}
.rsk-balk{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.rsk-balk .inp{flex:1 1 260px;max-width:420px;min-width:0}
.rsk-sort{margin:0;align-items:center}
.rsk-sort .hint{padding:0 6px 0 2px}
.rsk-lijst{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rsk-kop,.rsk-rij{display:grid;grid-template-columns:44px minmax(0,1fr) 110px 110px 130px 120px;gap:12px;align-items:center;padding:10px 14px}
.rsk-kop{font-size:11.5px;font-weight:600;color:var(--tx3);background:var(--panel2);padding-top:8px;padding-bottom:8px}
.rsk-kop span:nth-child(n+3){text-align:right}
.rsk-rij{width:100%;border:0;border-top:1px solid var(--line);background:var(--panel);color:var(--tx);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.rsk-rij:hover{background:var(--hover)}
.rsk-rij.rsk-x{display:none}
.rsk-naam{min-width:0}
.rsk-naam b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.rsk-naam small{display:block;color:var(--tx3);font-size:12px;margin-top:2px}
.rsk-naam .rsk-mob{display:none}
.rsk-c{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* 07-10 (Mees): ROAS-sheet, Per product — ingeklapte sectie 'Alleen via collecties verkocht' en, bij Per collectie, de
   productenlijst van die collectie. Eigen (eenvoudige) rij in plaats van .rsk-rij: geen zoeken/sorteren hier (dat zou de
   id's en S.rsSort van de kiezer hierboven delen), dus geen grid met evenveel kolommen nodig. */
.rs-collectiealleen summary{cursor:pointer;display:flex;align-items:baseline;gap:9px;list-style:none;padding:2px 0}
.rs-collectiealleen summary::-webkit-details-marker{display:none}
.rs-collectiealleen summary b{font-size:13.5px}
.rs-cl-kop{display:flex;align-items:baseline;gap:9px;margin-bottom:2px}
.rs-cl-kop b{font-size:13.5px}
.rs-collectielijst{margin-top:10px}
/* .rs-cl-rij is a <button> (klikbaar: dezelfde data-act="rskies" als de kiezer) — reset de knopstijl zodat hij als rij oogt. */
.rs-cl-rij{display:flex;align-items:center;gap:12px;padding:8px 0;border:0;border-top:1px solid var(--line);width:100%;
  background:transparent;color:var(--tx);font:inherit;text-align:left;cursor:pointer}
.rs-cl-rij:hover{background:var(--hover)}
.rs-cl-rij:first-child{border-top:0}
.rs-collectiealleen .rs-cl-rij:first-child{border-top:1px solid var(--line)}
.rs-cl-naam{min-width:0;flex:1}
.rs-cl-naam b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-cl-naam small{display:block;color:var(--tx3);font-size:11.5px;margin-top:2px}
.rs-cl-c{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto;min-width:60px;font-size:12.5px;color:var(--tx2)}
.rs2-roas{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end}
.rs2-roas .chip{font-size:10.5px;padding:1px 7px}
.rs2-kop{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:14px}
.rs2-kopnaam{display:flex;align-items:center;gap:12px;flex:1 1 240px;min-width:0}
.rs2-kopnaam b{display:block;font-size:16px;overflow-wrap:anywhere}
.rs2-kopnaam .hint{display:block}
.rs2-blok{margin-top:16px}
.rs2-tit{display:block;font-size:14px;margin-bottom:8px}
.rs2-tw{overflow-x:auto;border:1px solid var(--line);border-radius:12px;-webkit-overflow-scrolling:touch}
.rs2-tbl{min-width:760px}
.rs2-tbl th{cursor:default;position:static}
.rs2-tbl th:first-child,.rs2-tbl td:first-child{position:sticky;left:0;z-index:1;background:var(--panel)}
.rs2-tbl tfoot td:first-child{background:var(--panel2)}
.rs2-tbl tbody td:first-child{box-shadow:inset 0 -1px 0 var(--line)}
.rs2-tbl tbody tr:last-child td{border-bottom:0}
.rs2-gesch{color:var(--amb)}
.rs2-uitleg{margin-top:14px}
.rs2-uitleg summary{cursor:pointer}
.rs2-uitleg p{margin:6px 0 0}
a.rs-open{color:inherit;text-decoration:none}
a.rs-open:hover{text-decoration:underline}
/* 06-10 (Jairo, mobiel overzichtelijker): compacte kaartjes per dag in de ROAS-sheet i.p.v. de brede tabel met
   horizontaal scrollen (die blijft op de computer: .rs2-tw.mdesk). Zichtbaar via .malleen, zelfde schakelaar als de
   rest van de hub (display:none tot de mobiele media query hieronder). */
/* display:none als basis (.malleen alleen al zet dat, maar een latere regel met gelijke specificiteit mag dat nooit
   stilletjes overschrijven — vandaar hier expliciet, en pas in de mobiele media query hieronder weer aan). */
.rs2k-lijst{display:none;flex-direction:column;gap:10px}
.rs2k-kaart{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.rs2k-kaart.rs2k-tot{background:var(--panel2,var(--panel))}
.rs2k-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.rs2k-datum{font-size:14.5px;font-weight:600;color:var(--tx)}
.rs2k-tot .rs2k-datum{font-weight:700}
.rs2k-roas .rs2-roas{justify-content:flex-end}
.rs2k-roas .rs2-roas b,.rs2k-roas > span > b{font-size:19px;font-weight:650}
.rs2k-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 16px}
.rs2k-stat{min-width:0}
.rs2k-stat:last-child{grid-column:1 / -1;padding-top:8px;border-top:1px dashed var(--line)}
.rs2k-stat small{display:block;font-size:12px;color:var(--tx3);margin-bottom:2px}
.rs2k-stat b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.rs2k-retour{margin-top:9px;font-size:12.5px;color:var(--red)}
/* ---------- Sheets (18-10): de data sheet per advertentieaccount; telefoon = dezelfde rs2k-kaartjes als de ROAS-sheet ---------- */
.shs-uitleg{display:block;margin:0 0 14px}
.shs-uitleg:hover,.shs-acc:hover{transform:none}
.shs-uitleg summary{cursor:pointer;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;list-style:none}
.shs-uitleg summary::-webkit-details-marker{display:none}
.shs-uitleg summary::after{content:'▾';margin-left:auto;color:var(--tx3)}
.shs-uitleg[open] summary::after{content:'▴'}
.shs-lijst{margin:10px 0 0;padding-left:18px;font-size:13.5px;line-height:1.55;color:var(--tx2)}
.shs-lijst li{margin:5px 0}
.shs-acc{display:block;margin:0 0 16px}
.shs-acckop h3{margin:0 0 2px;font-size:16px;overflow-wrap:anywhere}
.shs-acckop .hint{margin:0}
.shs-tbl th:first-child,.shs-tbl td:first-child{white-space:normal}
.shs-tbl tfoot td{background:var(--panel2);border-bottom:0}
.shs-tbl tbody tr:last-child td{border-bottom:0}
.shs-r{color:var(--tx2)}
.shs-n{font-size:13px;color:var(--tx3);white-space:nowrap}
.shs-n b{font-size:17px;color:var(--tx);font-weight:650}
.shs-tests{margin-top:16px}
.shs-tests summary{cursor:pointer;font-weight:600;font-size:14px;padding:6px 0}
.shs-tests > .rs2-tw,.shs-tests > .rs2k-lijst{margin-top:8px}
.shs-ttbl td.shs-wrap{white-space:normal;min-width:120px;max-width:260px}
.rs2k-stat b.shs-camp{white-space:normal;overflow-wrap:anywhere}
.rs2k-stat .chip{margin-top:2px}
.rs2k-stat .hint{display:block;font-size:12px;margin-top:2px}
@media (max-width:860px){
  .rs2k-lijst{display:flex}
  .rsk-kop{display:none}
  .rsk-rij{grid-template-columns:44px minmax(0,1fr) auto;min-height:64px;font-size:14.5px}
  .rsk-c{display:none}
  .rsk-c.rsk-w{display:block}
  /* 06-10 (Jairo, geen afgekapte tekst): een lange productnaam liep op de telefoon af in '…'. Twee regels mogen. */
  .rsk-naam b{white-space:normal;overflow:visible;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .rsk-naam .rsk-mob{display:block;white-space:normal}
  .rsk-sort{width:100%}
  .rsk-balk .inp{max-width:none;flex-basis:100%;font-size:16px}
  .rs2-tbl{min-width:760px}
  /* 06-10 (Jairo, goed tikbaar): de advertenties-koppelen-rij (naam + chip + keuzelijst) kreeg op smalle schermen een
     volwaardige hoogte in plaats van net de tekstregel. */
  .rsm-rij{min-height:56px;padding:12px 2px}
}

/* ---------- Leerlus Creatives (02-10): 👍/👎 per item, creatief profiel, beheeroverzicht ---------- */
.crb{margin-top:6px;min-width:0}
.crb-rij{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.crb-d{min-width:44px;height:36px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:16px;line-height:1;cursor:pointer;filter:grayscale(1);opacity:.75;transition:background .15s,border-color .15s,opacity .15s}
.crb-d:hover{opacity:1;filter:none;background:var(--hover)}
.crb-d:focus-visible,.crb-chip:focus-visible,.crb-waarom:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.crb-d[aria-pressed="true"]{filter:none;opacity:1}
.crb.is-p .crb-d[data-v="1"]{background:color-mix(in srgb,var(--grn) 16%,var(--panel));border-color:var(--grn)}
.crb.is-m .crb-d[data-v="-1"]{background:color-mix(in srgb,var(--red) 14%,var(--panel));border-color:var(--red)}
.crb-waarom{border:0;background:none;padding:6px 4px;font:inherit;font-size:12.5px;color:var(--acc);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.crb-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.crb-chip{border:1px solid var(--line);background:var(--panel);color:var(--tx2);border-radius:999px;padding:6px 11px;font:inherit;font-size:12.5px;line-height:1.25;cursor:pointer;text-align:left;max-width:100%}
.crb-chip:hover{background:var(--hover)}
.crb-chip[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--on-acc,#fff)}
.crb-vrij{flex:1 1 100%;min-width:0;font-size:13px;padding:7px 10px}
.crb-t{margin-top:4px}
.crb-t .crb-d{height:30px;min-width:38px;font-size:14px}
.crb-volgde{margin:4px 0 0;font-size:11.5px;color:var(--tx3);overflow-wrap:anywhere}
.crb-uitleg{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:14px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);font-size:13.5px}
.crb-set{margin:8px 0;padding:10px 12px;border:1px solid var(--red);border-radius:10px;background:color-mix(in srgb,var(--red) 6%,var(--panel))}
.crb-set b{font-size:13px}
.crb-sethint{margin:2px 0 8px}
.crp{margin-bottom:14px;padding:12px 14px}
.crp>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none}
.crp>summary::-webkit-details-marker{display:none}
.crp-kop{display:flex;flex-direction:column;min-width:0}
.crp-kop em{font-style:normal;font-size:12.5px;color:var(--tx2)}
.crp-lijn{width:120px;height:30px;flex-shrink:0;color:var(--grn)}
.crp-leeg p{margin:4px 0 0}
.crp-dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 12px;margin:10px 0;font-size:13px}
.crp-dl dt{color:var(--tx3)}
.crp-dl dd{margin:0;overflow-wrap:anywhere}
.crp-bron{font-size:11px;color:var(--tx3);border:1px solid var(--line);border-radius:6px;padding:0 5px;margin-left:4px;white-space:nowrap}
.crp-refs>div{display:flex;gap:6px;margin:4px 0 10px;flex-wrap:wrap}
.crp-refs img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.crp-regels{font-size:13px;margin:6px 0}
.crp-regels ul{margin:4px 0 0;padding-left:18px}
.crp-regels li{margin:2px 0;overflow-wrap:anywhere}
.crp-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:8px;margin-top:8px}
.crp-form .hint,.crp-form .bar2{grid-column:1/-1}
@media (max-width:560px){.crp-dl{grid-template-columns:1fr;gap:0}.crp-dl dd{margin-bottom:6px}.crp-lijn{width:80px}}
.crfb-groepen{display:grid;gap:14px}
.crfb-groep>b{display:block;font-size:12.5px;margin-bottom:4px}
.crfb-rij{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(60px,1fr) auto;gap:4px 10px;align-items:center;padding:5px 0;border-top:1px solid var(--line);font-size:13px}
.crfb-naam{overflow-wrap:anywhere}
.crfb-balk{height:8px;border-radius:4px;background:color-mix(in srgb,var(--red) 22%,var(--panel2));overflow:hidden}
.crfb-balk i{display:block;height:100%;background:var(--grn)}
.crfb-pct{font-variant-numeric:tabular-nums;font-weight:600}
.crfb-meta{grid-column:1/-1}
/* Google-concurrenten (02-10) */
.gc{display:flex;flex-direction:column;gap:12px;min-width:0}
.gc-uitleg{background:var(--panel2);border:1px solid var(--line,rgba(127,127,127,.2));border-radius:12px;padding:12px 14px;display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.gc-uitleg p{margin:0;font-size:13.5px;line-height:1.5;color:var(--tx2)}
.gc-kaart h3{margin:0 0 10px;font-size:15px}
.gc-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.gc-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--tx2)}
.gc-veld{flex:1 1 240px;min-width:0}
.gc-veld .inp{width:100%}
.gc-markt .inp{width:90px}
.gc-form .btn{white-space:nowrap}
.gc-fout{margin-top:10px;padding:10px 12px;border-radius:10px;background:rgba(220,80,60,.1);color:var(--tx);font-size:13px}
.gc-sam{margin:0 0 10px;font-size:13.5px;color:var(--tx2)}
.gc-adv{background:var(--panel);border:1px solid var(--line,rgba(127,127,127,.2));border-radius:12px;padding:12px;margin:0 0 12px;min-width:0}
.gc-adv-kop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.gc-adv-kop h4{margin:0;font-size:14.5px;overflow-wrap:anywhere}
.gc-adv-kop .hint{margin:2px 0 0;overflow-wrap:anywhere}
.gc-n{flex:none;font-size:12px;color:var(--tx2);background:var(--panel2);border-radius:999px;padding:3px 9px}
.gc-meta{margin:8px 0 0;font-size:12.5px;font-weight:600;color:#1f7a4d}
.gc-tel{margin:8px 0 6px;font-size:12px;color:var(--tx3)}
.gc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.gc-ad{display:flex;flex-direction:column;border:1px solid var(--line,rgba(127,127,127,.2));border-radius:10px;overflow:hidden;background:var(--panel2);color:inherit;text-decoration:none;min-width:0}
.gc-ad:hover{border-color:var(--tx3)}
.gc-beeld{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden}
.gc-beeld img{width:100%;height:100%;object-fit:contain}
.gc-geen{font-size:12px;color:#8a8374}
.gc-ad-info{display:flex;flex-wrap:wrap;gap:2px 8px;padding:6px 8px;font-size:11.5px;color:var(--tx2)}
.gc-ad-info b{color:var(--tx);font-weight:600}
.gc-link{background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit}
.gc-eerder{background:var(--panel);border:1px solid var(--line,rgba(127,127,127,.2));border-radius:12px;padding:10px 12px}
.gc-eerder summary{cursor:pointer;font-size:13.5px;font-weight:600}
.gc-rij{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line,rgba(127,127,127,.15));padding:9px 2px;color:inherit;font:inherit;font-size:13px;cursor:pointer}
.gc-rij small{color:var(--tx3)}
.gc-rij span{min-width:0;overflow-wrap:anywhere}
@media (max-width:720px){.gc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gc-markt .inp{width:80px}.gc-form .btn{flex:1 1 100%}.gc-uitleg{flex-direction:column}}

/* ---------- Abonnement (02-10): betaalmuur, pagina Abonnement en beheer ---------- */
.ab{max-width:900px;padding-bottom:64px}
@media(max-width:600px){.ab{padding-bottom:88px}}
.ab-slot{display:inline-block;vertical-align:-1px;opacity:.65;flex:none}
.ab-h3{display:block;font-size:14.5px;margin-bottom:8px}
.ab-seg{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);margin:2px 0 16px;flex-wrap:wrap}
.ab-seg button{padding:8px 14px;border-radius:7px;font-weight:600;font-size:13px;color:var(--tx2)}
.ab-seg button.on{background:var(--panel);color:var(--tx);box-shadow:0 1px 3px rgba(20,30,60,.12)}
.ab-gratis{font-size:11px;font-weight:600;color:var(--grn);margin-left:4px}
.ab-tiers{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.ab-tier{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--panel);border:1.5px solid var(--line);border-radius:12px;padding:18px 20px;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.ab-tier:hover{border-color:var(--line2)}
.ab-tier.aan{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.ab-tier:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.ab-tier-kop{display:flex;align-items:center;gap:8px;justify-content:space-between}
.ab-tier-kop b{font-size:17px}
.ab-prijs b{font-size:28px;letter-spacing:-.6px}
.ab-prijs small{color:var(--tx2);font-size:13px}
.ab-sub{font-size:12px;color:var(--tx3);min-height:18px}
.ab-tier ul,.ab-lijst{list-style:none;display:flex;flex-direction:column;gap:7px;margin:8px 0 6px;padding:0}
.ab-tier li,.ab-lijst li{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--tx2)}
.ab-tier li svg,.ab-lijst li svg{flex:none;margin-top:2px;color:var(--grn)}
.ab-kies{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;border:1px solid var(--line2);font-weight:600;font-size:13px}
.ab-tier.aan .ab-kies{background:var(--acc);border-color:var(--acc);color:var(--on-acc,#fff)}
.ab-betaal{gap:12px;margin-bottom:14px}
.ab-methodes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ab-methode{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:12px;cursor:pointer}
.ab-methode.aan{border-color:var(--acc)}
.ab-methode input{margin-top:3px;accent-color:#141414}
.ab-methode span{display:flex;flex-direction:column;gap:2px}
.ab-methode small{color:var(--tx3);font-size:12px;line-height:1.5}
.ab-factuur{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.ab-factuur summary{cursor:pointer;display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.ab-f-velden{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-top:10px}
.ab-f-voet{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ab-totaal{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}
.ab-totaal b{font-size:16px}
.ab-start{min-width:190px;justify-content:center}
.ab-test{background:#fff4e5;color:#8a4b00;border-radius:8px;padding:8px 12px;font-size:13px;font-weight:600}
.ab-terug{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid var(--line2);background:var(--panel2);border-radius:10px;padding:12px 14px;margin-bottom:14px;font-size:13.5px}
.ab-terug.ok{border-color:rgba(47,122,74,.35);background:rgba(47,122,74,.08)}
.ab-terug.mis{border-color:rgba(180,35,24,.3);background:rgba(180,35,24,.06)}
.ab-lid{gap:8px;margin-bottom:14px}
.ab-lid-kop{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ab-lid-naam b{font-size:18px}
.ab-regel{font-size:13.5px;color:var(--tx2)}
.ab-knoppen{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.ab-opzeg{color:var(--red)}
.ab-melding{font-size:13px;color:var(--grn)}
.ab-bonus,.ab-fac,.ab-upsell{margin-bottom:14px;gap:6px}
.ab-bonus p{font-size:13px;color:var(--tx2)}
.ab-fac .tg-fac{margin-top:6px}
.ab-teaser .rs2-link{margin-left:4px}
/* 04-10: de Plus-teaser (video-hooks) nooit afkappen, anders valt de knop Bekijk Plus weg op de telefoon. */
.ab-teaser .rs3-pat-t{white-space:normal;display:block;overflow:visible;-webkit-line-clamp:unset}
.ab-schakel{margin-bottom:14px}
.ab-schakel .hint{margin-top:8px}
.ab-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.ab-stats .card{padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.ab-stats b{font-size:20px;letter-spacing:-.3px}
.ab-tbl td{vertical-align:top}
@media (max-width:760px){
  .ab-tiers,.ab-methodes,.ab-f-velden{grid-template-columns:1fr}
  .ab-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-start{width:100%}
  .ab-totaal{flex-direction:column;align-items:stretch}
}
/* Zelf maken (02-10): prompt per creative, referentiefoto's, uploadvak. */
.cr-zelf>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:8px}
.cr-zelf>summary::-webkit-details-marker{display:none}
.cr-zelf>summary h3{margin:0}
.cr-zelf>summary h3::before{content:"▸";display:inline-block;margin-right:2px;color:var(--tx3);transition:transform .15s}
.cr-zelf[open]>summary h3::before{transform:rotate(90deg)}
.cr-zelf>summary em{font-style:normal;font-size:12.5px;color:var(--tx3);min-width:0}
.cr-zelf-in{min-width:0}
.cr-zelf-eerst{margin:0 0 10px}
.cr-zelf-bron{margin:0 0 8px}
.cr-zelf-claude{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.cr-zelf-claude>div:first-of-type{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:2px}
.cr-zelf-claude b{font-size:13.5px}
.cr-zelf-claude span{font-size:12.5px;line-height:1.45;color:var(--tx2)}
.cr-zelf-claude code{display:block;margin-top:4px;font-family:inherit;font-size:13px;color:var(--tx);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:4px 8px;overflow-wrap:anywhere;user-select:all}
.cr-zelf-claude .cr-zelf-knoppen{margin:0}
.cr-zelf-claude.bezig{flex-wrap:nowrap}
.cr-zelf-spin{flex-shrink:0;width:16px;height:16px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--acc);animation:robotdraai .9s linear infinite}
@media (prefers-reduced-motion:reduce){.cr-zelf-spin{animation:none}}
.cr-zelf-voorlopig{margin:8px 0 0;font-size:13px}
.cr-zelf-voorlopig>summary{cursor:pointer;color:var(--tx2)}
.cr-zelf-voorlopig>.btn{margin-top:6px}
.cr-zelf-tips{margin:0 0 10px;padding-left:20px;font-size:13px;line-height:1.5;color:var(--tx2)}
.cr-zelf-tips li{margin:2px 0}
.cr-zelf-opt{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.4;margin:0 0 12px;cursor:pointer}
.cr-zelf-opt input{margin-top:2px;flex-shrink:0}
.cr-zelf-lijst{display:grid;gap:10px}
.cr-zelf-item{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--panel);min-width:0}
.cr-zelf-kop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cr-zelf-kop b{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);font-size:12px}
.cr-zelf-kop span{flex:1;min-width:0;font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.cr-zelf-kop em{font-style:normal;font-size:12px;color:var(--tx3);border:1px solid var(--line);border-radius:999px;padding:1px 8px}
.cr-zelf-prompt{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--tx2);overflow-wrap:anywhere;max-height:7.5em;overflow:auto;background:var(--panel2);border-radius:8px;padding:8px 10px}
.cr-zelf-start{margin:8px 0 0;font-size:13px}
.cr-zelf-start summary{cursor:pointer;color:var(--tx2)}
.cr-zelf-start .btn{margin-top:6px}
.cr-zelf-knoppen{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;align-items:center}
.cr-zelf-knoppen .btn{text-decoration:none}
.cr-zelf-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;margin:10px 0 0;padding:16px 12px;border:1.5px dashed var(--line);border-radius:10px;text-align:center;cursor:pointer;background:var(--panel2);transition:border-color .15s,background .15s;position:relative}
.cr-zelf-drop:hover,.cr-zelf-drop.over{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 7%,var(--panel))}
.cr-zelf-drop:focus-within{outline:2px solid var(--acc);outline-offset:2px}
.cr-zelf-drop.bezig{cursor:progress;border-style:solid}
.cr-zelf-drop{position:relative}
.cr-zelf-drop input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.cr-zelf-drop b{font-size:13.5px}
.cr-zelf-drop span{font-size:12px;color:var(--tx3)}
.cr-zelf-klaar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 0}
.cr-zelf-klaar span{display:flex;flex-direction:column;align-items:center;gap:2px}
.cr-zelf-klaar img,.cr-zelf-klaar i{width:56px;height:56px;border-radius:6px;object-fit:cover;background:var(--panel2);display:grid;place-items:center;font-style:normal;color:var(--tx3)}
.cr-zelf-klaar em{font-style:normal;font-size:11px;color:var(--tx3)}
.cr-zelf-klaar small{flex:1 1 160px;font-size:12px;color:var(--grn)}
/* Bewaking: oudere campagnes met eigen regels (02-10) */
.rgo-gekozen{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 12px;border:1.5px solid var(--acc,var(--line));border-radius:10px}
.rgo-gekozen .rg-campt{flex:1 1 200px}
.rgo-gekozen .btn{width:auto}
.rgo-camplijst{max-height:420px;overflow:auto;padding:2px}
.rgo-campknop[hidden]{display:none}
.rgo-sjablonen{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.rgo-sjablonen .btn{width:auto}
.rgo-punten{margin:8px 0 0;padding-left:18px;line-height:1.55}
.rgo-groep{border-top:1px solid var(--line);padding:12px 0 4px;margin-top:10px}
.rgo-groepkop{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.rgo-groepkop b{overflow-wrap:anywhere}
.rgo-groepkop .btn{width:auto;margin-left:auto}
.rgo-regel{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;padding:10px 0 10px 12px;border-left:2px solid var(--line);margin:8px 0}
.rgo-regeltekst{flex:1 1 320px;min-width:0;overflow-wrap:anywhere}
.rgo-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.rgo-knoppen{display:flex;gap:6px;flex-wrap:wrap}
.rgo-knoppen .btn{width:auto}
.rgo-nodig{color:var(--amb)}
@media (max-width:720px){ .rgo-groepkop .btn{margin-left:0} .rgo-knoppen .btn{min-height:40px} .rgo-wiz .rg-punt select{max-width:100% !important} }
/* 03-10 (Jairo: "in mijn dashboard kan ik in het menu niet meer scrollen en uitloggen, ik moet eerst alles inklappen"):
   het zijmenu scrollt zelf; account en uitloggen blijven onderaan zichtbaar. */
#side{overflow-y:auto;overscroll-behavior:contain;max-height:100vh;max-height:100dvh;scrollbar-width:thin}
#side .sidebottom{position:sticky;bottom:0;background:var(--zij,var(--bg2));padding-top:6px;z-index:2}
/* 03-10: op de telefoon viel de laatste knop (Kopieer startzin) half weg; de knoppen mogen nu naar een tweede regel. */
@media (max-width:600px){ .cr-acties .cr-knoppen{flex-wrap:wrap} }
/* Winnaars van de week (Plus) */
.wk-kop{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin:4px 0 4px}.wk-kop b{font-size:16px}
.wk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:12px 0 14px}
.wk-kaart{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.wk-kaart img,.wk-geen{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--panel2);display:grid;place-items:center;color:var(--tx3);font-size:12px}
.wk-tekst{padding:12px;display:flex;flex-direction:column;gap:6px;flex:1}.wk-tekst p{font-size:12.5px;color:var(--tx2);line-height:1.5}
.wk-tekst .btn{margin-top:auto;align-self:flex-start}.wk-tekst .chip{align-self:flex-start;white-space:normal}
.wk-teaser-rij{display:flex;gap:14px;align-items:center;margin-top:10px;flex-wrap:wrap}
.wk-blur{width:120px;height:120px;object-fit:cover;border-radius:10px;filter:blur(8px)}
.wk-pat ul{margin:8px 0 0 18px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.ab-auto{margin-top:8px;font-size:13px;background:rgba(47,122,74,.08);border:1px solid rgba(47,122,74,.25);border-radius:8px;padding:8px 12px}

/* Claude automatisch-wizard (02-10): één scherm per stap, één grote knop, "Dit zie je in Claude", Terug/Volgende */
.caw{padding:20px 22px}
.caw-intro{margin:0 0 16px;font-size:14px;line-height:1.6;color:var(--tx2)}
.caw-balk{display:flex;list-style:none;margin:0 0 16px;padding:0}
.caw-balk li{flex:1;display:flex;justify-content:center;position:relative;min-width:0}
.caw-balk li::before{content:'';position:absolute;top:13px;left:-50%;right:50%;height:2px;background:var(--line)}
.caw-balk li:first-child::before{display:none}
.caw-balk li.af::before{background:var(--grn)}
.caw-balk button{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line2,var(--line));background:var(--panel);color:var(--tx3);font-size:12.5px;font-weight:700;cursor:pointer;display:grid;place-items:center;padding:0}
.caw-balk li.af button{background:var(--grn);border-color:var(--grn);color:#fff}
.caw-balk li.nu button{border-color:var(--acc);background:var(--acc);color:var(--on-acc,#fff)}
.caw-nr{font-size:12px;color:var(--tx3);font-weight:600;}
.caw-kop{font-size:20px;margin:2px 0 14px;font-weight:650;line-height:1.3}
.caw-doe{margin:0 0 16px}
.caw-groot{min-height:48px;font-size:15.5px;padding:12px 22px;display:inline-flex;align-items:center;justify-content:center}
.caw-actie{font-size:16px;line-height:1.6;padding:14px 16px;border-radius:12px;border:1.5px solid var(--acc);background:var(--panel2)}
.caw-zie{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);margin:0 0 14px}
.caw-zie > b{display:block;font-size:14px;margin-bottom:6px}
.caw-zie ol{margin:0;padding-left:20px;font-size:14.5px;line-height:1.65}
.caw-zie li + li{margin-top:4px}
.caw-voet{display:flex;justify-content:space-between;gap:10px;margin-top:6px}
.caw-voet .btn{min-height:44px;padding:10px 20px;font-size:14.5px}
.caw-hulp{margin:12px 0 0}
.caw .ca-plak textarea{font-size:13px}
@media (max-width:600px){
  .caw{padding:16px 14px}
  .caw-groot{width:100%}
  .caw-balk button{width:24px;height:24px;font-size:11px}
  .caw-balk li::before{top:11px}
  .caw-zie ol{padding-left:18px;font-size:14px}
}
/* Verplicht: zonder werkende Claude automatisch een duidelijke kaart op Start, Klantenservice, Dispute fighter en Creatives */
.ca-poort{padding:20px 22px;margin:0 0 16px;border:1.5px solid var(--acc)}
.ca-poort-kop{display:block;font-size:18px;margin-bottom:6px}
.ca-poort p{margin:0 0 12px;font-size:14.5px;line-height:1.6;color:var(--tx2)}
.ca-poort .ca-poort-reden{color:var(--tx);font-weight:600}
@media (max-width:600px){ .ca-poort{padding:16px 14px} .ca-poort .caw-groot{width:100%} }

/* ---------- Hulp-knop (FAQ, 02-10): rechtsonder op elke studentpagina; het paneel met de bekende problemen per pagina ----------
   De knop staat buiten #portaal (body) en schuift zelf omhoog boven plakkende balken (hulpPlaats in app.js). */
.hulp-fab{position:fixed;right:22px;bottom:22px;z-index:56;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px 0 10px;
  border-radius:999px;border:1.5px solid var(--acc);background:var(--panel);color:var(--tx);font:inherit;font-size:15px;font-weight:650;
  box-shadow:var(--shadow);cursor:pointer;transition:bottom .18s ease}
.hulp-fab:hover{background:var(--panel2,var(--panel))}
.hulp-fab:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.hulp-fab[hidden]{display:none}
.clc-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.clc-kop h1{margin:0}
.clc-kop.hulp-kop-actief{position:sticky;top:0;z-index:3;background:var(--bg)}
.hulp-fab.hulp-in-kop{position:static;flex-shrink:0}
.hulp-fab-ico{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--acc);color:var(--on-acc,#fff);font-size:15px;font-weight:800;flex:0 0 26px}
#portaal.hulp-fab-aan .pmain{padding-bottom:96px}
html.hulp-open{overflow:hidden}
.hulp-ovl{display:none}
.hulp-ovl.open{display:block;position:fixed;inset:0;z-index:61;background:rgba(10,10,10,.32)}
.hulp-paneel{position:absolute;top:0;right:0;bottom:0;width:460px;max-width:100vw;background:var(--bg2,var(--panel));border-left:1px solid var(--line);
  box-shadow:-20px 0 50px rgba(0,0,0,.18);display:flex;flex-direction:column;font-size:15px;line-height:1.5}
.hulp-paneelkop{display:flex;align-items:center;gap:10px;padding:16px 18px 10px}
.hulp-paneelkop>div{flex:1;min-width:0}
.hulp-paneelkop b{display:block;font-size:19px;letter-spacing:-.3px}
.hulp-paneelkop span{color:var(--tx3);font-size:13px}
.hulp-dicht{width:40px;height:40px;font-size:17px}
.hulp-zoek{padding:0 18px 10px;border-bottom:1px solid var(--line)}
.hulp-zoek .inp{width:100%;min-height:44px;font-size:15px}
.hulp-lijst{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:6px 18px 18px}
.hulp-kop{font-size:12.5px;font-weight:650;color:var(--tx3);margin:14px 0 6px;text-transform:none}
.hulp-kop2{margin-top:22px}
.hulp-leeg{color:var(--tx2);margin:16px 0}
.hulp-item{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:8px}
.hulp-item>summary{list-style:none;cursor:pointer;padding:12px 40px 12px 14px;font-weight:600;position:relative;min-height:44px}
.hulp-item>summary::-webkit-details-marker{display:none}
.hulp-item>summary::after{content:'+';position:absolute;right:14px;top:10px;font-size:19px;font-weight:500;color:var(--tx3)}
.hulp-item[open]>summary::after{content:'−'}
.hulp-item[open]{border-color:var(--line2)}
.hulp-ant{padding:0 14px 14px}
.hulp-oorzaak{margin:0 0 8px;color:var(--tx2)}
.hulp-stappen{margin:0 0 10px;padding-left:22px}
.hulp-stappen li{margin:0 0 6px}
.hulp-ga{min-height:40px}
.hulp-groep{margin:0 0 6px}
.hulp-groep>summary{cursor:pointer;padding:10px 2px;font-weight:650;border-bottom:1px solid var(--line)}
.hulp-groep>summary span{color:var(--tx3);font-weight:500;font-size:13px;margin-left:4px}
.hulp-groep[open]>summary{margin-bottom:8px}
.hulp-voet{border-top:1px solid var(--line);padding:12px 18px calc(14px + env(safe-area-inset-bottom));background:var(--panel)}
.hulp-voet b{display:block;margin-bottom:8px}
.hulp-voetknoppen{display:flex;gap:8px;flex-wrap:wrap}
.hulp-voetknoppen .btn{min-height:40px}
/* 12-10 (uploader-hulp): de vraagbot in het hulppaneel, zelfde kaartstijl als de rest van de hub. */
.hulp-vb{margin:0 18px 14px;padding:14px;border:1px solid var(--line2);border-radius:12px;background:var(--panel)}
.hulp-vb-kop{display:block;margin-bottom:2px}
.hulp-vb textarea{width:100%;resize:vertical;min-height:52px}
.hulp-vb-rij{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.hulp-vb-foto{cursor:pointer}
.hulp-vb-thumbwrap{position:relative;display:inline-flex}
.hulp-vb-thumb{width:34px;height:34px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.hulp-vb-thumbwrap .iconbtn{position:absolute;top:-7px;right:-7px;width:18px;height:18px;min-height:0;border-radius:50%;background:var(--panel2);border:1px solid var(--line);font-size:10px;line-height:1;display:flex;align-items:center;justify-content:center}
.hulp-vb-fout{color:var(--red);font-size:12.5px;margin:8px 0 0}
.hulp-vb-antwoord{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.hulp-vb-antwoord b{display:block;font-size:12px;color:var(--tx3);margin-bottom:4px;text-transform:uppercase;letter-spacing:.02em}
.hulp-vb-antwoord p{margin:0;white-space:pre-wrap;font-size:13.5px;line-height:1.5}
@media (max-width:860px), (max-width:1023px) and (pointer:coarse), (max-height:500px) and (pointer:coarse){
  .hulp-fab{right:16px;min-height:44px;font-size:14.5px;padding:0 14px 0 9px}
  #portaal.hulp-fab-aan .pmain{padding-bottom:calc(var(--tbh,0px) + 84px)!important}
  .hulp-paneel{width:100%;border-left:0}
  .hulp-paneelkop{padding:calc(12px + env(safe-area-inset-top)) 16px 8px}
  .hulp-zoek,.hulp-lijst{padding-left:16px;padding-right:16px}
  .hulp-vb{margin-left:16px;margin-right:16px}
  .hulp-voet{padding-left:16px;padding-right:16px}
  .hulp-voetknoppen .btn{flex:1 1 140px;justify-content:center;min-height:44px;white-space:normal;text-align:center;line-height:1.25}
  .hulp-voet b{margin-bottom:6px}
}
.hulpb .tbl td{vertical-align:top}
.ab-vanaf{display:flex;flex-direction:column;gap:4px;border:1px solid rgba(47,122,74,.3);background:rgba(47,122,74,.07);border-radius:12px;padding:14px 16px;margin-bottom:14px;font-size:13.5px}
.ab-vanaf b{font-size:15px}
.ab-aank{margin-bottom:14px;gap:6px;border-color:rgba(47,122,74,.35)}.ab-aank p{font-size:13.5px;color:var(--tx2)}
.ab-betaal .ab-seg{margin:4px 0 0}
/* Eén knop rechtsonder (coordinator 02-10): "Ik kom er niet uit" van de koppel-wizard zit in het Hulp-paneel, niet meer als tweede knop. */
#portaal.hulp-fab-aan .kw-hulpvast{display:none!important}
#portaal.hulp-fab-aan .pmain:has(.kw-hulpvast){padding-bottom:96px}
.hulp-coach{width:100%;justify-content:center;min-height:44px;margin:0 0 8px;white-space:normal;text-align:center;line-height:1.25}
@media (max-width:860px), (max-width:1023px) and (pointer:coarse), (max-height:500px) and (pointer:coarse){
  #portaal.hulp-fab-aan .pmain:has(.kw-hulpvast){padding-bottom:calc(var(--tbh,0px) + 84px)!important}
  #portaal.hulp-fab-aan .pmain:has(.kw-hulpvast) .wizvoet,#portaal.hulp-fab-aan .pmain:has(.kw-hulpvast) .cw-voet{bottom:var(--tbh)}
}
/* 02-10: verdeelde collectiekosten per collectie gegroepeerd in Producten */
.prod-verdeeld{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 10px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel2)}
.prod-groep{margin-top:4px;font-size:12.5px}
.prod-groep summary{cursor:pointer;color:var(--tx3)}
.prod-groep ul{list-style:none;margin:6px 0 0;padding:0;max-height:260px;overflow:auto}
.prod-groep li{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px solid var(--line)}
.prod-groep li span{min-width:0;overflow-wrap:anywhere;color:var(--tx2)}
.prod-groep li b{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.mltekst .prod-groep li b{display:inline;font-size:13px;font-weight:500;overflow:visible;text-overflow:clip;white-space:nowrap}
.mltekst .prod-groep li span{font-size:13px;text-transform:none}
.mc-kaart{margin-bottom:14px;gap:6px}.mc-kaart p{font-size:13.5px;color:var(--tx2)}
.mc-acties{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:8px}
.mc-acties li{display:flex;flex-direction:column;gap:2px;border-left:3px solid var(--line2);padding:4px 0 4px 10px;font-size:13.5px}
.mc-acties li span{color:var(--tx2)}.mc-op{border-color:var(--grn)!important}.mc-stop{border-color:var(--red)!important}.mc-test{border-color:var(--amb)!important}
/* Abonnement-pagina v2 (02-10): duidelijke hiërarchie, Plus met accent */
.ab-menuchip{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.02em;background:#e9b949;color:#1a1204;vertical-align:1px}
.ab-menuchip.plus{background:#2f7a4a;color:#fff}
.ab-plannen{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px;align-items:stretch;margin-bottom:14px}
.ab-plan{position:relative;display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1.5px solid var(--line);border-radius:14px;padding:22px 22px 18px;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.ab-plan:hover{border-color:var(--line2)}.ab-plan.aan{border-color:var(--acc)}
.ab-plan-plus{border:2px solid #2f7a4a;box-shadow:0 10px 28px rgba(47,122,74,.14);background:linear-gradient(180deg,rgba(47,122,74,.06),var(--panel) 40%)}
.ab-plan-plus.aan{border-color:#2f7a4a;box-shadow:0 0 0 2px #2f7a4a,0 12px 30px rgba(47,122,74,.18)}
.ab-lint{position:absolute;top:-12px;left:20px;background:#2f7a4a;color:#fff;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;letter-spacing:.02em}
.ab-plan-naam{font-family:var(--font);font-size:26px;font-weight:500;letter-spacing:-.4px}
.ab-plan-plus .ab-plan-naam{font-size:32px}
.ab-plan-prijs{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}.ab-plan-prijs b{font-size:34px;letter-spacing:-.8px}.ab-plan-plus .ab-plan-prijs b{font-size:42px}
.ab-plan-prijs small{color:var(--tx2);font-size:13px}
.ab-plan-sub{font-size:13px;font-weight:600;color:#2f7a4a}.ab-plan-btw{font-size:12px;color:var(--tx3)}
.ab-anker{font-size:13px;line-height:1.55;color:var(--tx2);background:rgba(47,122,74,.07);border-radius:10px;padding:10px 12px;margin:6px 0 2px}
.ab-plan .ab-kies{margin-top:auto}
.ab-plan.aan .ab-kies{background:var(--acc);border-color:var(--acc);color:var(--on-acc,#fff)}
.ab-plan-plus.aan .ab-kies{background:#2f7a4a;border-color:#2f7a4a;color:#fff}
.ab-vgl{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:14px}
.ab-vgl summary{cursor:pointer}
.ab-vgl-t{width:100%;border-collapse:collapse;margin-top:8px;font-size:13px}
.ab-vgl-t th{font-size:12px;color:var(--tx3);text-align:center;padding:6px 4px;font-weight:600}.ab-vgl-t th:first-child{text-align:left}
.ab-vgl-t td{padding:8px 4px;border-top:1px solid var(--line);text-align:center}.ab-vgl-t td:first-child{text-align:left;color:var(--tx2)}
.ab-vgl-t td.ja svg{color:#2f7a4a}.ab-vgl-t td.nee svg{color:var(--tx3);opacity:.6}.ab-vgl-plus{background:rgba(47,122,74,.06)}
.ab-totaal small{display:block;font-size:12px;color:var(--tx3);font-weight:400;margin-top:2px}
.ab-hero{border-radius:16px;padding:22px 24px;margin-bottom:14px;color:#fff;background:linear-gradient(135deg,#1f5a37,#2f7a4a 60%,#3f8f5c);box-shadow:0 12px 30px rgba(31,90,55,.22)}
.ab-hero-basis{background:var(--panel);color:var(--tx);border:1px solid var(--line);box-shadow:none}
.ab-hero-kop{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.ab-hero-label{font-size:12px;opacity:.85;font-weight:600}
.ab-hero .chip{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.3)}.ab-hero-basis .chip{background:rgba(47,122,74,.11);color:var(--grn)}
.ab-hero-naam{font-family:var(--font);font-weight:500;font-size:38px;letter-spacing:-.6px;margin:6px 0 4px}
.ab-hero-feit{font-size:14px;opacity:.92}
.ab-tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:14px}
.ab-tegel{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;transition:border-color .12s,transform .12s}
.ab-tegel:hover{border-color:#2f7a4a;transform:translateY(-1px)}
.ab-tegel-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(47,122,74,.1);color:#2f7a4a;margin-bottom:4px}
.ab-tegel b{font-size:14px}.ab-tegel span:last-child{font-size:12.5px;color:var(--tx2);line-height:1.45}
.ab-betaling{gap:8px;margin-bottom:12px}
.ab-dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:13px;margin:0}.ab-dl dt{color:var(--tx3)}.ab-dl dd{margin:0}
.ab-acties{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin-top:6px}
.ab-link{font-size:13px;color:var(--tx2);text-decoration:underline;text-underline-offset:3px;padding:4px 0}.ab-link:hover{color:var(--tx)}
.ab-link.ab-opzeg{color:var(--tx3)}
.ab-fac summary{cursor:pointer;display:flex;gap:8px;align-items:baseline}
.ab-upgrade{cursor:default;margin-bottom:14px;padding-top:26px}.ab-upgrade .btn.pri{background:#2f7a4a;border-color:#2f7a4a;color:#fff}
@media (max-width:760px){
  .ab-plannen{grid-template-columns:1fr}.ab-plannen .ab-plan-plus{order:-1}
  .ab-plan-plus .ab-plan-prijs b{font-size:36px}.ab-hero-naam{font-size:32px}
  .ab-tegels{grid-template-columns:1fr 1fr}
}
.ab-logos{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ab-logo{display:inline-flex;align-items:center;gap:3px;height:24px;padding:0 8px;border:1px solid var(--line2);border-radius:6px;font-size:11.5px;font-weight:700;color:var(--tx2);background:var(--panel)}
.ab-logo.ideal{color:#cc0066}.ab-logo.apple{color:#111}

/* =====================================================================
   KLEURTHEMA'S v2 (02-10) — Jairo: "zo'n 10 kleuren, maar alleen voor Plus. Ook 3 vrouwelijke kleuren" en daarna
   "echt mooier, beter contrast, net als Discord; ook iets bijzonders". <html data-thema="…"> naast data-theme (licht/donker).
   Zonder data-thema: zwart en crème zoals altijd. Verlopen alleen in de zijbalk, het logo-vak, het leaderboard en dunne
   accentranden; kaarten blijven effen. Contrast nagerekend op elk verlooppunt (tekst ≥ 4,5; gewone tekst ≥ 7, AAA).
   .kt-mini[data-thema] is het voorbeeldje in Mijn account: dezelfde variabelen, alleen voor dat blokje.
   ===================================================================== */
/* leesbaarheid voor iedereen (ook zonder thema): grijze hulptekst, oranje statuskleur en placeholders donkerder */
:root:not([data-theme="dark"]){--amb:#8a5a0a}
:root:not([data-theme="dark"]):not([data-thema]){--tx2:#504b43;--tx3:#6b6559}
html[data-theme="dark"]:not([data-thema]){--tx2:#c9c0b0;--tx3:#a39b8b}
::placeholder{color:var(--tx3);opacity:1}
/* Zwart & crème */
.kt-mini[data-thema="standaard"]{--bg:#F5F6F8;--bg2:#EEF0F3;--panel:#FFFFFF;--panel2:#F9FAFB;--hover:#F2F4F7;--line:#E4E7EC;--line2:#D0D5DD;--tx:#101828;--tx2:#475467;--tx3:#667085;--acc:#111418;--acc2:#2A2F36;--on-acc:#FFFFFF;--zij:#16191E;--zijtx:#F2F4F7;--zij-grad:linear-gradient(180deg,#16191E,#16191E);--rand:linear-gradient(90deg,#16191E,#16191E);--pop:#16191E}
html[data-theme="dark"] .kt-mini[data-thema="standaard"]{--bg:#0E1014;--bg2:#121418;--panel:#16191E;--panel2:#1B1F25;--hover:#22262D;--line:#272B33;--line2:#353B45;--tx:#F2F4F7;--tx2:#B0B7C3;--tx3:#8A93A2;--acc:#F2F4F7;--acc2:#ffffff;--on-acc:#0E1014;--zij:#16191E;--zijtx:#F2F4F7;--zij-grad:linear-gradient(180deg,#16191E,#16191E);--rand:linear-gradient(90deg,#F2F4F7,#F2F4F7);--pop:#F2F4F7}
/* Rosé goud */
:root[data-thema="rose"],.kt-mini[data-thema="rose"]{--bg:#fbf3f1;--bg2:#f6e8e5;--panel:#ffffff;--panel2:#fdf6f4;--hover:#f8e9e6;--line:#efdcd8;--line2:#e2c4bf;--tx:#2b1418;--tx2:#5e3c42;--tx3:#7a5359;--acc:#a8445c;--acc2:#8f3a4f;--on-acc:#ffffff;--zij:#4a1c2c;--zijtx:#fff1ec;--zij-grad:linear-gradient(180deg,#3f1626,#552234,#653339);--rand:linear-gradient(90deg,#e7a1a9,#d9a27a,#f3cdb9);--pop:#d9a27a}
html[data-theme="dark"][data-thema="rose"],html[data-theme="dark"] .kt-mini[data-thema="rose"]{--bg:#1c1315;--bg2:#21171a;--panel:#291c20;--panel2:#302227;--hover:#38282d;--line:#3d2b31;--line2:#4f3840;--tx:#fdeef0;--tx2:#e2c6cb;--tx3:#bc9aa1;--acc:#f2a7b6;--acc2:#f7c3cd;--on-acc:#2a0f17;--zij:#1a0b10;--zijtx:#fdeef0;--zij-grad:linear-gradient(180deg,#14080c,#2a1219,#3a1d24);--rand:linear-gradient(90deg,#e7a1a9,#d9a27a,#f3cdb9);--pop:#d9a27a}
/* Lavender haze */
:root[data-thema="lavendel"],.kt-mini[data-thema="lavendel"]{--bg:#f5f2fb;--bg2:#ede8f7;--panel:#ffffff;--panel2:#f8f6fd;--hover:#efeaf9;--line:#e3dcf1;--line2:#cfc4e6;--tx:#1c1530;--tx2:#4a4066;--tx3:#62577f;--acc:#6a4cc0;--acc2:#5a3ea9;--on-acc:#ffffff;--zij:#2e2257;--zijtx:#f4efff;--zij-grad:linear-gradient(180deg,#241a48,#33275f,#433474);--rand:linear-gradient(90deg,#c4b5fd,#a5b4fc,#f0abfc);--pop:#a5b4fc}
html[data-theme="dark"][data-thema="lavendel"],html[data-theme="dark"] .kt-mini[data-thema="lavendel"]{--bg:#131022;--bg2:#17132a;--panel:#1e1934;--panel2:#251f3e;--hover:#2c2548;--line:#322a4f;--line2:#41376a;--tx:#f3efff;--tx2:#cdc5ea;--tx3:#a59cc7;--acc:#c7b7ff;--acc2:#dbd0ff;--on-acc:#1f1640;--zij:#0e0b1c;--zijtx:#f3efff;--zij-grad:linear-gradient(180deg,#0b0918,#1c1636,#2b2152);--rand:linear-gradient(90deg,#c4b5fd,#a5b4fc,#f0abfc);--pop:#a5b4fc}
/* Champagne */
:root[data-thema="champagne"],.kt-mini[data-thema="champagne"]{--bg:#f9f4ec;--bg2:#f3ebde;--panel:#fffdf9;--panel2:#fbf6ee;--hover:#f4eadb;--line:#ebdfcc;--line2:#dcc8a8;--tx:#241b10;--tx2:#55462f;--tx3:#6e5d44;--acc:#85601d;--acc2:#6f4f16;--on-acc:#ffffff;--zij:#2a2016;--zijtx:#fbf1df;--zij-grad:linear-gradient(180deg,#231a11,#37291b,#463522);--rand:linear-gradient(90deg,#b8914a,#f0d9a0,#c9a35c);--pop:#f0d9a0}
html[data-theme="dark"][data-thema="champagne"],html[data-theme="dark"] .kt-mini[data-thema="champagne"]{--bg:#16120d;--bg2:#1b1610;--panel:#231d15;--panel2:#2b241a;--hover:#332b20;--line:#3b3226;--line2:#4d4131;--tx:#fbf3e6;--tx2:#dccdb3;--tx3:#b4a286;--acc:#e6c584;--acc2:#efd6a4;--on-acc:#24190a;--zij:#0f0c08;--zijtx:#fbf3e6;--zij-grad:linear-gradient(180deg,#0d0a06,#1f180f,#2e2416);--rand:linear-gradient(90deg,#b8914a,#f0d9a0,#c9a35c);--pop:#f0d9a0}
/* Aurora */
:root[data-thema="aurora"],.kt-mini[data-thema="aurora"]{--bg:#eef6f4;--bg2:#e4f0ed;--panel:#ffffff;--panel2:#f5faf9;--hover:#e6f2ef;--line:#d5e6e2;--line2:#bcd6d0;--tx:#0e1f1d;--tx2:#3a524e;--tx3:#4f6a65;--acc:#0b7362;--acc2:#095f51;--on-acc:#ffffff;--zij:#0a2a30;--zijtx:#e8fbf6;--zij-grad:linear-gradient(180deg,#08222e,#0b3a3a,#1d2f5e);--rand:linear-gradient(90deg,#34d399,#22d3ee,#a78bfa);--pop:#22d3ee}
html[data-theme="dark"][data-thema="aurora"],html[data-theme="dark"] .kt-mini[data-thema="aurora"]{--bg:#0c1517;--bg2:#0f1a1d;--panel:#142225;--panel2:#19292d;--hover:#1f3236;--line:#24383c;--line2:#2f474c;--tx:#e8fbf6;--tx2:#bcd8d2;--tx3:#91b0aa;--acc:#5eead4;--acc2:#99f6e4;--on-acc:#042f2a;--zij:#061114;--zijtx:#e8fbf6;--zij-grad:linear-gradient(180deg,#05101a,#08292b,#17173d);--rand:linear-gradient(90deg,#34d399,#22d3ee,#a78bfa);--pop:#22d3ee}
/* Sunset */
:root[data-thema="sunset"],.kt-mini[data-thema="sunset"]{--bg:#fbf3ee;--bg2:#f6e8df;--panel:#ffffff;--panel2:#fdf7f3;--hover:#f8e9df;--line:#efdcd0;--line2:#e2c3b0;--tx:#26140f;--tx2:#5b3b2f;--tx3:#775446;--acc:#b2401a;--acc2:#963514;--on-acc:#ffffff;--zij:#2a1640;--zijtx:#fff1ea;--zij-grad:linear-gradient(180deg,#25133d,#481b49,#622538);--rand:linear-gradient(90deg,#f97316,#ec4899,#8b5cf6);--pop:#ec4899}
html[data-theme="dark"][data-thema="sunset"],html[data-theme="dark"] .kt-mini[data-thema="sunset"]{--bg:#1a1016;--bg2:#1f131a;--panel:#271820;--panel2:#2f1e27;--hover:#38242e;--line:#3d2933;--line2:#4f3542;--tx:#fff0ea;--tx2:#e6c7bd;--tx3:#bf9c90;--acc:#fb9b6e;--acc2:#fdb995;--on-acc:#2b0f04;--zij:#140a1e;--zijtx:#fff0ea;--zij-grad:linear-gradient(180deg,#12081d,#2a1030,#3c1626);--rand:linear-gradient(90deg,#f97316,#ec4899,#8b5cf6);--pop:#ec4899}
/* Galaxy */
:root[data-thema="nacht"],.kt-mini[data-thema="nacht"]{--bg:#eff0f8;--bg2:#e6e8f4;--panel:#ffffff;--panel2:#f6f7fc;--hover:#e9ebf7;--line:#dcdff0;--line2:#c6cbe4;--tx:#11132b;--tx2:#3f4466;--tx3:#575c80;--acc:#4f46e5;--acc2:#4338ca;--on-acc:#ffffff;--zij:#0d0f2a;--zijtx:#eef0ff;--zij-grad:linear-gradient(180deg,#090b22,#131336,#24184b);--rand:linear-gradient(90deg,#6366f1,#a855f7,#ec4899);--pop:#a855f7;--zij-ster1:radial-gradient(circle,rgba(255,255,255,.1) 0 1px,transparent 1.5px);--zij-ster2:radial-gradient(circle,rgba(255,255,255,.07) 0 .8px,transparent 1.3px)}
html[data-theme="dark"][data-thema="nacht"],html[data-theme="dark"] .kt-mini[data-thema="nacht"]{--bg:#0c0d1d;--bg2:#0f1024;--panel:#15172d;--panel2:#1b1d37;--hover:#222542;--line:#272a48;--line2:#343859;--tx:#eef0ff;--tx2:#c3c7ea;--tx3:#9a9fc8;--acc:#a5b4fc;--acc2:#c7d2fe;--on-acc:#111338;--zij:#06071a;--zijtx:#eef0ff;--zij-grad:linear-gradient(180deg,#05061a,#0e0e2c,#1b1240);--rand:linear-gradient(90deg,#6366f1,#a855f7,#ec4899);--pop:#a855f7;--zij-ster1:radial-gradient(circle,rgba(255,255,255,.1) 0 1px,transparent 1.5px);--zij-ster2:radial-gradient(circle,rgba(255,255,255,.07) 0 .8px,transparent 1.3px)}
/* Oceaan */
:root[data-thema="oceaan"],.kt-mini[data-thema="oceaan"]{--bg:#eef4f9;--bg2:#e4edf5;--panel:#ffffff;--panel2:#f5f9fc;--hover:#e6eef6;--line:#d6e2ed;--line2:#bccfe0;--tx:#0d1a28;--tx2:#3a4f64;--tx3:#50667c;--acc:#0b62a0;--acc2:#09528a;--on-acc:#ffffff;--zij:#0b2440;--zijtx:#e9f5ff;--zij-grad:linear-gradient(180deg,#0a1f3a,#0b2f4e,#0c405a);--rand:linear-gradient(90deg,#0ea5e9,#22d3ee,#67e8f9);--pop:#22d3ee}
html[data-theme="dark"][data-thema="oceaan"],html[data-theme="dark"] .kt-mini[data-thema="oceaan"]{--bg:#0b1520;--bg2:#0e1a27;--panel:#122130;--panel2:#172839;--hover:#1d3144;--line:#22364a;--line2:#2d455d;--tx:#e9f5ff;--tx2:#bcd2e6;--tx3:#91aac2;--acc:#7dd3fc;--acc2:#bae6fd;--on-acc:#062033;--zij:#06111d;--zijtx:#e9f5ff;--zij-grad:linear-gradient(180deg,#051020,#082339,#0a3343);--rand:linear-gradient(90deg,#0ea5e9,#22d3ee,#67e8f9);--pop:#22d3ee}
/* Bos & mint */
:root[data-thema="bos"],.kt-mini[data-thema="bos"]{--bg:#eff5f0;--bg2:#e5eee7;--panel:#ffffff;--panel2:#f6faf7;--hover:#e7f0e9;--line:#d7e4da;--line2:#bdd2c2;--tx:#0f1d14;--tx2:#3c5243;--tx3:#506a58;--acc:#17734a;--acc2:#12603d;--on-acc:#ffffff;--zij:#0f2a1f;--zijtx:#eafbf0;--zij-grad:linear-gradient(180deg,#0d2419,#133324,#1a442f);--rand:linear-gradient(90deg,#34d399,#6ee7b7,#a3e635);--pop:#6ee7b7}
html[data-theme="dark"][data-thema="bos"],html[data-theme="dark"] .kt-mini[data-thema="bos"]{--bg:#0d1611;--bg2:#101b15;--panel:#15231b;--panel2:#1a2b21;--hover:#203428;--line:#253a2d;--line2:#30493a;--tx:#eafbf0;--tx2:#bdd8c5;--tx3:#93b09c;--acc:#6ee7b7;--acc2:#a7f3d0;--on-acc:#052e1c;--zij:#07120c;--zijtx:#eafbf0;--zij-grad:linear-gradient(180deg,#06110b,#0d2418,#143323);--rand:linear-gradient(90deg,#34d399,#6ee7b7,#a3e635);--pop:#6ee7b7}
/* Neon */
:root[data-thema="neon"],.kt-mini[data-thema="neon"]{--bg:#f2f2f8;--bg2:#e9e9f3;--panel:#ffffff;--panel2:#f7f7fb;--hover:#ebebf5;--line:#dedeec;--line2:#c9c9de;--tx:#12121f;--tx2:#424260;--tx3:#5a5a7a;--acc:#a3159f;--acc2:#86117f;--on-acc:#ffffff;--zij:#0b0b16;--zijtx:#f3f0ff;--zij-grad:linear-gradient(180deg,#0a0a14,#120f24,#1a0f2e);--rand:linear-gradient(90deg,#f0abfc,#e879f9,#22d3ee);--pop:#e879f9}
html[data-theme="dark"][data-thema="neon"],html[data-theme="dark"] .kt-mini[data-thema="neon"]{--bg:#0b0b14;--bg2:#0e0e19;--panel:#141422;--panel2:#1a1a2b;--hover:#212135;--line:#26263b;--line2:#34344f;--tx:#f3f2ff;--tx2:#c9c8e8;--tx3:#a09fc6;--acc:#22d3ee;--acc2:#67e8f9;--on-acc:#03222a;--zij:#06060d;--zijtx:#f3f2ff;--zij-grad:linear-gradient(180deg,#05050c,#0d0a1c,#160a26);--rand:linear-gradient(90deg,#f0abfc,#e879f9,#22d3ee);--pop:#e879f9}
/* zijbalk en logo-vak: het verloop hangt vast aan het scherm, zodat ze samen één vlak zijn */
:root[data-thema] #side,:root[data-thema] .pside,:root[data-thema] .phead .brand{background-color:var(--zij)!important;
  background-image:var(--zij-ster1,none),var(--zij-ster2,none),var(--zij-grad)!important;background-size:37px 37px,53px 53px,100% 100%;
  background-position:0 0,19px 27px,0 0;background-attachment:fixed;border-right-color:color-mix(in srgb,var(--zij),#000 40%)}
:root[data-thema] #side .brand span,:root[data-thema] .pside .brand span,:root[data-thema] .phead .brand span{color:color-mix(in srgb,var(--zijtx) 82%,transparent)}
:root[data-thema] #side .nav,:root[data-thema] .pside .pnav{color:color-mix(in srgb,var(--zijtx) 92%,transparent)}
:root[data-thema] #side .nav:hover,:root[data-thema] .pside .pnav:hover{background:color-mix(in srgb,var(--zijtx) 10%,transparent);color:var(--zijtx)}
:root[data-thema] #side .nav.on,:root[data-thema] .pside .pnav.on{background:color-mix(in srgb,var(--zijtx) 16%,transparent);color:#fff;box-shadow:inset 3px 0 0 var(--pop)}
:root[data-thema] #side .navlbl,:root[data-thema] .pside .kop{color:color-mix(in srgb,var(--zijtx) 82%,transparent)}
:root[data-thema] #side .nav .cnt,:root[data-thema] .pside .pnav .cnt{background:color-mix(in srgb,var(--zijtx) 12%,transparent);color:var(--zijtx)}
:root[data-thema] #side .iconbtn,:root[data-thema] #side #saved,:root[data-thema] #side #account span,:root[data-thema] .pside .iconbtn{color:color-mix(in srgb,var(--zijtx) 85%,transparent)}
:root[data-thema] #side .sidebottom{background:transparent}
:root[data-thema] #side .sidebottom,:root[data-thema] #side .sidefoot{border-top-color:color-mix(in srgb,var(--zijtx) 14%,transparent)}
:root[data-thema] #side #account{background:color-mix(in srgb,var(--zijtx) 8%,transparent);border-color:color-mix(in srgb,var(--zijtx) 14%,transparent)}
/* dunne accentrand onder de kopbalk */
:root[data-thema] .pbalk::after{height:2px;background:var(--rand)}
:root[data-thema] ::selection{background:var(--acc);color:var(--on-acc)}
:root[data-thema] ::-webkit-scrollbar-thumb{background:var(--line2)}
:root[data-thema] input[type=checkbox],:root[data-thema] input[type=radio],:root[data-thema] .ab-methode input{accent-color:var(--acc)}
:root[data-thema] .btn:hover{border-color:color-mix(in srgb,var(--line2),var(--tx) 16%)}
:root[data-thema] .app-ikoon{background:var(--zij);color:var(--zijtx)}
:root[data-thema] .ib-tag,:root[data-thema] .c-blu{background:color-mix(in srgb,var(--acc) 9%,transparent);border-color:color-mix(in srgb,var(--acc) 24%,transparent)}
/* leaderboard: het verloop van de zijbalk met een accentrand bovenaan; goud/zilver/brons blijven hun eigen kleur */
:root[data-thema] .abv-lb,:root[data-thema] .lbs-vb,:root[data-thema] .lb-kaart{--lbtx:var(--zijtx);--lbtx2:color-mix(in srgb,var(--zijtx) 85%,transparent);--lblijn:color-mix(in srgb,var(--zijtx) 16%,transparent);
  --lbvak:color-mix(in srgb,var(--zijtx) 8%,transparent);background-color:var(--zij);background-image:var(--zij-ster1,none),var(--zij-ster2,none),var(--zij-grad);
  background-size:37px 37px,53px 53px,100% 100%;background-position:0 0,19px 27px,0 0;border-color:transparent;position:relative;overflow:hidden}
:root[data-thema] .lb-kaart::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--rand)}
:root[data-thema] .lb-pod.jij,:root[data-thema] .lb-rij.jij{background:color-mix(in srgb,var(--zijtx) 13%,transparent)}
:root[data-thema] .abv-lb,:root[data-thema] .lbs-vb{background-color:var(--zij);background-image:var(--zij-grad)}
:root[data-thema] .pside .pnav.on .cnt{background:transparent}
:root[data-thema] .lb-proef{color:#f6d491}
@media (max-width:860px), (max-width:1023px) and (pointer:coarse), (max-height:500px) and (pointer:coarse){
  :root[data-thema] #top,:root[data-thema] .mmkop,:root[data-thema] .mzkop{background:linear-gradient(var(--zij) 0 env(safe-area-inset-top),var(--bg) 0)!important}
  :root[data-thema] .pmkop,:root[data-thema] .dhead{background:linear-gradient(var(--zij) 0 env(safe-area-inset-top),transparent 0)!important}
  :root[data-thema] #tabbar{background-color:var(--zij);background-image:var(--zij-grad);border-top:2px solid transparent;border-image:var(--rand) 1}
  :root[data-thema] .tbk{color:color-mix(in srgb,var(--zijtx) 82%,transparent)}
  :root[data-thema] .tbk.on .tbico{background:color-mix(in srgb,var(--zijtx) 18%,transparent)}
}
/* kleine contrastreparaties die voor elk thema gelden (gevonden met de automatische controle) */
.gc-geen{color:var(--tx3)}
#side .navlbl,.pside .kop{color:rgba(242,244,247,.66)}
html[data-theme="dark"] .av[style*="var(--acc)"]{color:var(--on-acc)}
.pside .pnav .cnt[style*="var(--acc)"]{color:var(--zijtx)!important}
.ladderstap.aan .bol{color:var(--on-acc)}
html[data-theme="dark"] .ab-plan-sub{color:var(--grn)}
html[data-theme="dark"] .ab-logo.ideal,html[data-theme="dark"] .ab-logo.apple{background:#fff;border-color:#fff}
html:not([data-theme="dark"]) .ib-kwchip.goed{color:#215a36}

/* de keuze in Mijn account: per thema een mini-hub (zijbalk met verloop, kaart met accentrand, knop) */
.kt-modus{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);margin:0 0 12px}
.kt-modus button{height:30px;padding:0 14px;border-radius:7px;font-size:13px;font-weight:500;color:var(--tx2)}
.kt-modus button.on{background:var(--panel);color:var(--tx);box-shadow:0 1px 2px rgba(0,0,0,.08),inset 0 0 0 1px var(--line)}
.kt{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin:0 0 8px}
.kt-keus{position:relative;display:flex;flex-direction:column;gap:7px;padding:6px 6px 8px;border:1px solid var(--line);border-radius:12px;background:var(--panel);text-align:left;min-width:0;transition:border-color .12s,transform .12s}
.kt-keus:hover{border-color:var(--line2);transform:translateY(-1px)}
.kt-keus.aan{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.kt-mini{display:flex;height:70px;border-radius:8px;overflow:hidden;background:var(--bg);border:1px solid var(--line)}
.kt-mini .z{flex:0 0 32%;background-color:var(--zij);background-image:var(--zij-ster1,none),var(--zij-ster2,none),var(--zij-grad);background-size:9px 9px,13px 13px,100% 100%;
  display:flex;flex-direction:column;gap:5px;padding:8px 6px}
.kt-mini .z i{display:block;height:3px;border-radius:2px;background:var(--zijtx);opacity:.5}
.kt-mini .z i:first-child{opacity:1;width:72%;height:4px;margin-bottom:2px}
.kt-mini .z i:nth-child(3){opacity:.95;box-shadow:-6px 0 0 -1px var(--pop)}
.kt-mini .m{flex:1;min-width:0;display:flex;flex-direction:column}
.kt-mini .r{height:3px;background:var(--rand)}
.kt-mini .mb{flex:1;padding:7px;display:flex;flex-direction:column;gap:6px}
.kt-mini .k{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:5px 6px;display:flex;flex-direction:column;gap:4px}
.kt-mini .k i{display:block;height:3px;border-radius:2px;background:var(--tx);width:80%}
.kt-mini .k i+i{background:var(--tx3);width:55%}
.kt-mini .b{height:10px;width:52%;border-radius:4px;background:var(--acc)}
.kt-naam{display:flex;align-items:center;gap:5px;padding:0 2px;font-size:12.5px;font-weight:600;color:var(--tx);min-width:0;line-height:1.2}
.kt-naam span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kt-naam svg{flex:0 0 14px;color:var(--acc)}
.kt-plus{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:650;line-height:1;padding:3px 6px;border-radius:99px;background:var(--panel);color:var(--tx);border:1px solid var(--line2);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.kt-plus .ab-slot{width:10px;height:10px}
.kt-upsell{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 14px;font-size:12.5px;color:var(--tx2)}
.kt-upsell span{flex:1 1 200px}

/* Jouw naam op het leaderboard (02-10, Plus): kleur, lettertype en badge. Kleuren nagerekend op de donkerste én lichtste
   zijbalk van alle thema's (met de 6 en 12 % vlakjes): overal ≥ 4,5. Lettertypen: alleen Inter en Fraunces (zelf gehost). */
.lbs-k-goud{color:#f5d36e}.lbs-k-rose{color:#fcc3d2}.lbs-k-lavendel{color:#dccfff}.lbs-k-champagne{color:#ecd3a1}
.lbs-k-oceaan{color:#acd9fb}.lbs-k-salie{color:#ade3c1}.lbs-k-koraal{color:#fdc8b3}
.lbs-f-klassiek{font-family:var(--kopfont);font-weight:600;letter-spacing:-.01em}
.lbs-f-sierlijk{font-family:var(--kopfont);font-style:italic;font-weight:500}
.lbs-f-stoer{font-family:'Inter',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.9em}
.lbs-b{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:99px;font:700 10.5px/1.35 var(--font);letter-spacing:.02em;font-style:normal;text-transform:none;vertical-align:2px;white-space:nowrap}
.lbs-b-plus{background:linear-gradient(135deg,#f5d36e,#e2a93b);color:#2a1d04}
.lbs-b-ecom{background:rgba(242,244,247,.14);color:#F2F4F7;border:1px solid rgba(242,244,247,.32)}
.lbs-e{margin-left:5px;font-style:normal;font-size:.95em;line-height:1}
.lb-pod-naam .lbs-b{vertical-align:3px}
/* keuze in Mijn account */
.lbs-vb{--lbtx:var(--zijtx,#F2F4F7);--lbtx2:rgba(242,244,247,.66);--lblijn:rgba(242,244,247,.12);background:var(--zij,#141414);color:var(--lbtx);border-radius:12px;padding:8px 10px;margin:0 0 12px}
.lbs-vb .lb-lijst{columns:auto}
/* Abonnement → "Zo ziet Plus eruit": de voorbeeldnamen ook op de leaderboard-achtergrond (anders lichte namen op wit) */
.abv-lb{--lbtx:var(--zijtx,#F2F4F7);--lbtx2:rgba(242,244,247,.7);--lblijn:rgba(242,244,247,.12);background:var(--zij,#141414);color:var(--lbtx);border-radius:12px;padding:4px 10px!important;columns:auto}
.lbs-groep{margin:0 0 12px}
.lbs-kop{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--tx2);margin:0 0 6px}
.lbs-kop .lbs-slot{position:static;box-shadow:none}
.lbs-opties{display:flex;flex-wrap:wrap;gap:6px}
.lbs-opt{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:64px;min-height:52px;padding:6px 8px;border-radius:9px;
  background:var(--zij,#141414);color:var(--zijtx,#F2F4F7);border:1px solid transparent;font-size:15px;font-weight:600;line-height:1.1}
.lbs-opt small{font-size:10.5px;font-weight:500;color:rgba(242,244,247,.75);font-style:normal;text-transform:none;letter-spacing:0;font-family:var(--font)}
.lbs-opt.aan{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--acc)}
.lbs-opt:hover{border-color:rgba(242,244,247,.35)}
.lbs-opt.dicht{opacity:.72}
.lbs-opt .lbs-b,.lbs-opt .lbs-e{margin-left:0}
.lbs-bwrap{min-height:18px;display:inline-flex;align-items:center}
/* Keuzepagina v3 (02-10): Gratis-kop, bewijs, grote CTA, geruststelling */
.ab-gratis-kop{display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:8px}
.ab-gratis-kop>div{display:flex;flex-direction:column;gap:2px;min-width:200px}.ab-gratis-kop>div>span:last-child{font-size:13.5px;color:var(--tx2)}
.ab-gratis-naam{font-family:var(--font);font-size:30px;font-weight:500;line-height:1.1}
.ab-blijft{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;max-width:440px;font-size:13px}
.ab-blijft li{display:flex;gap:8px;align-items:flex-start}.ab-blijft li.ja svg{color:#2f7a4a;flex:none;margin-top:2px}.ab-blijft li.nee{color:var(--tx2)}.ab-blijft li.nee svg{flex:none;margin-top:2px;opacity:.8}
.ab-vanaf-zin{margin:0 0 14px}
.ab-plan-lijst{margin:8px 0 4px}
.ab-bewijs{border:1px dashed rgba(47,122,74,.45);background:rgba(47,122,74,.05);border-radius:12px;padding:12px 16px;margin-bottom:14px}
.ab-bewijs-rij{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:6px;font-size:13.5px;color:var(--tx2)}.ab-bewijs-rij b{color:var(--tx);font-size:16px}
.ab-cta{background:#2f7a4a!important;border-color:#2f7a4a!important;color:#fff!important;font-size:16px;padding:12px 26px;min-width:240px;display:inline-flex;flex-direction:column;align-items:center;gap:2px;line-height:1.2}
.ab-cta small{font-size:11.5px;font-weight:500;opacity:.9}
.ab-rust{list-style:none;padding:0;margin:2px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--tx2)}.ab-rust li{display:flex;gap:6px;align-items:center}.ab-rust svg{color:#2f7a4a}
@media (max-width:760px){.ab-cta{width:100%}.ab-gratis-kop{padding:16px}}
/* Keuzepagina v4 (02-10): Plus premium (vaste kleuren, leesbaar in elk thema), Basis rustig, som, rode kruizen */
.ab-boven{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:4px 0 16px}.ab-boven .ab-seg{margin:0}
.ab-seg-klein button{font-size:12.5px;padding:6px 11px}
.ab-kaarten{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start;margin:14px 0 16px}
.ab-p-kaart{position:relative;border-radius:18px;padding:30px 26px 22px;color:#fff;cursor:pointer;
  background:radial-gradient(120% 90% at 100% 0%,rgba(242,201,76,.16),transparent 55%),linear-gradient(160deg,#0d2a1e 0%,#174a33 55%,#1f5c40 100%);
  box-shadow:0 18px 40px rgba(13,42,30,.35),0 0 0 1px rgba(242,201,76,.35);transition:box-shadow .15s}
.ab-p-kaart.aan{box-shadow:0 18px 40px rgba(13,42,30,.4),0 0 0 2px #f2c94c}
.ab-p-lint{position:absolute;top:-13px;left:22px;background:#f2c94c;color:#1a1204;font-size:12px;font-weight:800;letter-spacing:.03em;padding:4px 12px;border-radius:999px;box-shadow:0 4px 12px rgba(242,201,76,.35)}
.ab-p-kop{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.ab-p-naam{font-family:var(--font);font-size:40px;font-weight:500;letter-spacing:-.6px;line-height:1}
.ab-p-prijs{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.ab-p-prijs b{font-size:48px;letter-spacing:-1px;line-height:1.05}.ab-p-prijs small{font-size:14px;color:rgba(255,255,255,.8)}
.ab-p-sub{font-size:13px;color:#f2c94c;font-weight:600}
.ab-pv{font-size:12.5px;font-weight:600;color:#1a1204;background:#f2c94c;border-radius:6px;padding:3px 8px;align-self:flex-start}
.ab-b-kaart .ab-pv{color:var(--tx);background:rgba(242,201,76,.35)}
.ab-p-alles{font-size:13px;font-weight:700;color:rgba(255,255,255,.75);margin:6px 0 8px}
.ab-p-lijst,.ab-b-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ab-p-lijst li,.ab-b-lijst li{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45}
.ab-p-lijst li b,.ab-b-lijst li b{display:block;font-size:14px}
.ab-p-lijst li span:last-child{color:rgba(255,255,255,.82)}.ab-p-lijst li b{color:#fff}
.ab-p-ico{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(242,201,76,.16);color:#f2c94c}
.ab-p-cta{display:block;width:100%;margin-top:18px;padding:15px 18px;border-radius:12px;background:#f2c94c;color:#1a1204;font-size:17px;font-weight:800;letter-spacing:.01em;box-shadow:0 8px 20px rgba(242,201,76,.3);cursor:pointer;transition:transform .12s,box-shadow .12s}
.ab-p-cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(242,201,76,.4)}.ab-p-cta:disabled{opacity:.7}
.ab-p-onder{display:block;margin-top:8px;font-size:12px;color:rgba(255,255,255,.78);line-height:1.5;text-align:center}
.ab-b-kaart{border-radius:16px;padding:22px 22px 18px;background:var(--panel);border:1px solid var(--line);color:var(--tx);cursor:pointer}
.ab-b-kaart.aan{border-color:var(--tx2)}
.ab-b-naam{font-family:var(--font);font-size:28px;font-weight:500}
.ab-b-prijs{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}.ab-b-prijs b{font-size:32px;letter-spacing:-.6px}.ab-b-prijs small{color:var(--tx2);font-size:13px}
.ab-b-sub{font-size:12.5px;color:var(--tx3)}
.ab-b-alles{font-size:12px;font-weight:700;color:var(--tx3);margin:4px 0 8px}
.ab-b-lijst li span:last-child{color:var(--tx2)}.ab-b-lijst li b{color:var(--tx)}
.ab-b-ico{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--panel2);color:var(--tx2);border:1px solid var(--line)}
.ab-b-ook{font-size:12.5px;color:var(--tx3);margin:10px 0 0}
.ab-b-cta{width:100%;justify-content:center;margin-top:14px;padding:11px}
.ab-som{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.ab-som>div{flex:1 1 140px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.ab-som>div b{font-size:24px;letter-spacing:-.4px;color:var(--tx)}.ab-som>div span{font-size:12.5px;color:var(--tx2)}
.ab-som i{font-style:normal;font-size:24px;font-weight:700;color:var(--tx3);align-self:center}
.ab-som .ab-som-net{background:linear-gradient(160deg,#0d2a1e,#1f5c40);border-color:#174a33}.ab-som .ab-som-net b{color:#f2c94c}.ab-som .ab-som-net span{color:rgba(255,255,255,.85)}
.ab-vgl-t{font-size:14px}.ab-vgl-t td{padding:10px 6px}
.ab-vgl-t td.nee svg{color:#d1321f!important;opacity:1!important}.ab-vgl-t td.ja svg{color:#2f7a4a}
.ab-vgl-t th.ab-vgl-plus{background:linear-gradient(160deg,#0d2a1e,#1f5c40);color:#f2c94c;border-radius:8px 8px 0 0}
.ab-vgl-t td.ab-vgl-plus{background:rgba(47,122,74,.09)}
.ab-vgl-groep td{font-size:12px!important;font-weight:700;color:var(--tx3)!important;padding-top:14px!important;text-align:left!important;background:transparent!important}
.ab-rust-rij{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:13px;color:var(--tx2);margin:2px 0 12px}
.ab-rust-rij>span{display:inline-flex;gap:6px;align-items:center}.ab-rust-rij svg{color:#2f7a4a}.ab-rust-rij .ab-logos{margin-left:auto}
.ab-faq{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.ab-faq details{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.ab-faq summary{cursor:pointer;font-weight:600;font-size:13.5px}.ab-faq p{font-size:13px;color:var(--tx2);margin-top:6px}
.ab-factuur{margin-bottom:12px}
@media (max-width:760px){
  .ab-kaarten{grid-template-columns:1fr}
  .ab-p-naam{font-size:34px}.ab-p-prijs b{font-size:40px}.ab-p-kaart{padding:28px 18px 18px}
  .ab-som>div{flex-basis:100%}.ab-som i{align-self:center;margin:-6px auto}
  .ab-rust-rij .ab-logos{margin-left:0}
}
.lbs-logo{display:inline-block;width:1.15em;height:1.15em;margin-left:6px;vertical-align:-.2em;object-fit:contain}
.lbs-opt .lbs-logo{margin-left:0;width:20px;height:20px}
/* Keuzepagina v3 (02-10): licht en rustig, één accentkleur (var(--acc) van het thema), Plus links en groter */
.v3{max-width:1040px}
.v3-hero{text-align:center;margin:4px 0 22px}
.v3-hero h2{font-family:var(--font);font-weight:500;font-size:34px;letter-spacing:-.6px;margin:0 0 6px;color:var(--tx)}
.v3-hero p{font-size:16px;color:var(--tx2);margin:0 0 14px}
.v3-seg{margin:0 auto}.v3-gratis{font-size:12px;font-weight:700;color:var(--grn);margin-left:4px}
.v3-kaarten{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start;margin-bottom:18px}
.v3-plus,.v3-basis{position:relative;background:var(--panel);border-radius:18px;cursor:pointer;color:var(--tx)}
.v3-plus{border:3px solid var(--acc);overflow:hidden;box-shadow:0 14px 34px rgba(20,20,20,.12)}
.v3-basis{border:1px solid var(--line2);padding:22px}
.v3-plus-kop{display:flex;flex-direction:column;gap:4px;padding:26px 24px 16px;background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 8%,var(--panel)),var(--panel))}
.v3-lint{position:absolute;top:14px;right:16px;background:var(--acc);color:var(--on-acc,#fff);font-size:13px;font-weight:700;padding:4px 12px;border-radius:999px}
.v3-naam{font-family:var(--font);font-size:34px;font-weight:500;line-height:1}.v3-naam.klein{font-size:26px}
.v3-prijs{font-size:17px;color:var(--tx2)}.v3-prijs b{font-size:46px;letter-spacing:-1px;color:var(--tx)}.v3-prijs small{font-size:14px;color:var(--tx3)}
.v3-prijs.klein b{font-size:32px}
.v3-netto{font-size:16px;font-weight:700;color:var(--tx)}.v3-netto::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--grn);margin-right:8px;vertical-align:2px}
.v3-pv{font-size:14px;font-weight:600;color:var(--tx)}
.v3-tegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 24px}
.v3-tegel{display:flex;flex-direction:column;gap:4px;background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:12px}
.v3-tegel b{font-size:15px;line-height:1.3}.v3-tegel>span:last-child{font-size:13.5px;color:var(--tx2);line-height:1.4}
.v3-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:6px}
.v3-thumb{position:relative;aspect-ratio:1/1;border-radius:7px;overflow:hidden;background:var(--line);display:grid;place-items:center}
.v3-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(3px) saturate(.9);transform:scale(1.1)}
.v3-thumb .ab-slot{position:relative;z-index:1;color:#fff;opacity:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.v3-groot{font-size:38px;font-weight:800;letter-spacing:-1px;color:var(--tx);line-height:1.1;margin-bottom:2px}
.v3-mock{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}.v3-mock i{font-style:normal;display:flex;gap:6px;align-items:center;font-size:13px;background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:3px 7px}
.v3-mock svg,.v3-vink svg{color:var(--grn);flex:none}
.v3-kopje{font-size:15px;font-weight:800;color:var(--tx);margin:18px 24px 8px}.v3-basis .v3-kopje{margin:14px 0 6px}
.v3-lijst{list-style:none;margin:0;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.v3-lijst li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.v3-lijst li b{display:block;font-size:15px}.v3-lijst li small{display:block;font-size:13.5px;color:var(--tx2);line-height:1.4}
.v3-nr{flex:none;width:24px;height:24px;border-radius:50%;background:var(--acc);color:var(--on-acc,#fff);font-size:12.5px;font-weight:700;display:grid;place-items:center;margin-top:1px}
.v3-cta{display:block;width:calc(100% - 48px);margin:20px 24px 6px;padding:16px;border-radius:12px;background:var(--acc);color:var(--on-acc,#fff);font-size:18px;font-weight:800;cursor:pointer;box-shadow:0 8px 20px rgba(20,20,20,.15)}
.v3-cta:hover{background:var(--acc2)}.v3-cta:disabled{opacity:.7}
.v3-onder{display:block;text-align:center;font-size:13.5px;color:var(--tx2);padding:0 24px 20px}
.v3-groep{margin-top:10px}.v3-groep-kop{font-size:12.5px;font-weight:700;color:var(--tx3)}
.v3-vink{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:5px}
.v3-vink li{display:flex;gap:8px;align-items:flex-start;font-size:15px}.v3-vink li small{font-size:13px;color:var(--tx2)}
.v3-tweede{width:100%;justify-content:center;margin-top:16px;padding:12px;font-size:15px}
.v3-methode{font-size:14px;color:var(--tx2);margin:-6px 0 16px;text-align:center}.v3-methode button{font-size:14px;color:var(--tx2);text-decoration:underline;text-underline-offset:3px}.v3-methode button.on{color:var(--tx);font-weight:700;text-decoration:none}
.v3-vgl{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:16px}
.v3-vgl summary{cursor:pointer;font-weight:700;font-size:16px}
.v3-vgl table{width:100%;border-collapse:collapse;margin-top:10px;font-size:15px}
.v3-vgl th{font-size:13.5px;color:var(--tx3);padding:8px;text-align:center}.v3-vgl th:first-child{text-align:left}
.v3-vgl td{padding:9px 8px;border-top:1px solid var(--line);text-align:center;vertical-align:top}.v3-vgl td:first-child{text-align:left}
.v3-vgl td b{display:block;font-size:15px}.v3-vgl td small{display:block;font-size:13px;color:var(--tx2)}
.v3-vgl td.ja svg{color:var(--grn)}.v3-vgl td.nee svg{color:#d1321f}
.v3-vgl .v3-kol{background:color-mix(in srgb,var(--acc) 7%,var(--panel));font-weight:700;color:var(--tx)}
.v3-tgroep td{font-size:12.5px!important;font-weight:700;color:var(--tx3)!important;background:transparent!important;padding-top:14px!important;text-align:left!important}
.v3-vgl tfoot td{font-weight:700;font-size:15px;border-top:2px solid var(--line2)}
.v3-faq{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.v3-faq details{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.v3-faq summary{cursor:pointer;font-weight:600;font-size:15px}.v3-faq p{font-size:14.5px;color:var(--tx2);margin-top:6px}
.v3-logos{display:flex;justify-content:center;margin-top:4px}
@media (max-width:760px){
  .v3-kaarten{grid-template-columns:1fr}.v3-hero h2{font-size:28px}
  .v3-tegels{grid-template-columns:1fr;padding:0 16px}.v3-plus-kop{padding:24px 16px 14px}.v3-kopje{margin:16px 16px 8px}
  .v3-lijst{grid-template-columns:1fr;padding:0 16px}.v3-cta{width:calc(100% - 32px);margin:18px 16px 6px}.v3-onder{padding:0 16px 18px}
  .v3-prijs b{font-size:40px}.v3-vgl{padding:12px}
}
.v3-basis .v3-naam,.v3-basis .v3-prijs,.v3-basis .v3-pv{display:block}
.v3-thumbs{grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){.v3-thumbs{grid-template-columns:repeat(4,1fr)}}
/* Zo ziet Plus eruit (02-10) */
.abv{margin:4px 0 18px}.abv-titel{font-family:var(--font);font-weight:500;font-size:24px;margin:0 0 10px;color:var(--tx)}
.abv-rij{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.abv-tegel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.abv-kop{display:flex;justify-content:space-between;align-items:center;gap:8px}.abv-kop b{font-size:15px;color:var(--tx)}
.abv-vb{font-size:12px;font-weight:700;color:var(--tx3);border:1px solid var(--line2);border-radius:999px;padding:1px 8px}
.abv-zin{font-size:13.5px;color:var(--tx2);margin:0}
.abv-lb{margin:0;padding:0}.abv-lb .lb-rij{font-size:14px}
.abv-themas{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.abv-thema{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);cursor:pointer;min-width:0}
.abv-thema.aan{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}.abv-thema small{font-size:10.5px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.abv-thema .kt-mini{width:100%}
.abv-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.abv-mc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.abv-mc li{border-left:3px solid var(--line2);padding:2px 0 2px 8px;font-size:13px;color:var(--tx2);display:flex;flex-direction:column}.abv-mc li b{color:var(--tx);font-size:13.5px}
.abv-mc .op{border-color:var(--grn)}.abv-mc .stop{border-color:#d1321f}.abv-mc .test{border-color:var(--acc)}
.abv-sz{display:flex;flex-direction:column;gap:2px;font-size:13.5px;color:var(--tx2)}.abv-sz b{color:var(--tx);font-size:15px}
.abv-hook{font-family:var(--font);font-size:17px;line-height:1.4;color:var(--tx);margin:0}
.abv-push{display:flex;flex-direction:column;gap:2px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13px;color:var(--tx2)}
.abv-push b{color:var(--tx);font-size:14px}.abv-push-app{font-size:11.5px;color:var(--tx3)}
@media (max-width:760px){
  .abv-rij{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .abv-tegel{flex:0 0 82%;scroll-snap-align:start}
}
.v3-vgl table{table-layout:fixed}.v3-vgl th:not(:first-child),.v3-vgl td:not(:first-child){width:84px}
.v3-vgl td:first-child{overflow-wrap:anywhere}
@media (max-width:760px){.v3-vgl th:not(:first-child),.v3-vgl td:not(:first-child){width:54px}.v3-vgl td b{font-size:14.5px}}
.v3-vgl td,.v3-vgl td b,.v3-vgl td small{white-space:normal!important;word-break:normal;overflow-wrap:anywhere}

/* 02-10: Producten → zo sluit het aan op Overzicht (één winstberekening) */
.pl-aansluiting .pl-ans{display:flex;align-items:baseline;gap:10px;padding:5px 0;border-bottom:1px dotted var(--line);font-size:13px;flex-wrap:wrap}
.pl-aansluiting .pl-ans span{flex:1;min-width:160px}
.pl-aansluiting .pl-ans b{font-variant-numeric:tabular-nums}
.pl-aansluiting .pl-ans small{flex-basis:100%;color:var(--tx3);font-size:11.5px}
@media (min-width:700px){.pl-aansluiting .pl-ans small{flex-basis:auto;margin-left:8px}}
.mtr .val a.pl-naar:hover{text-decoration:underline !important}
/* v3 compact (02-10: "past niet op 1 pagina"): kaarten + knop binnen 1280×900 */
.v3-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.v3-h1{font-size:26px!important;margin:0!important;letter-spacing:-.4px}.v3-sub{font-size:14px;color:var(--tx2);margin:2px 0 0}
.v3-top .v3-seg{margin:0}.v3 .ab-test{margin:0 0 8px;padding:5px 10px;font-size:12.5px}
.v3-kaarten{gap:14px;margin-bottom:14px}
.v3-plus{border-width:2px;box-shadow:0 8px 22px rgba(20,20,20,.10)}
.v3-plus-kop{padding:16px 20px 10px;gap:2px}
.v3-lint{top:12px;right:14px;font-size:12px;padding:3px 10px}
.v3-naam{font-size:24px}.v3-naam.klein{font-size:20px}
.v3-prijsrij{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
.v3-prijs{font-size:15px}.v3-prijs b{font-size:44px;letter-spacing:-1px}.v3-prijs.klein b{font-size:30px}
.v3-netto{font-size:14.5px}
.v3-tegels{gap:8px;padding:0 20px}
.v3-tegel{padding:9px 10px;gap:2px;height:112px;overflow:hidden}
.v3-tegel b{font-size:13.5px}.v3-tegel>span:last-child{font-size:12px}
.v3-thumbs{grid-template-columns:repeat(4,22px);gap:3px;margin-bottom:4px}.v3-thumb{width:22px;height:22px;border-radius:5px}.v3-thumb .ab-slot{width:9px;height:9px}
.v3-groot{font-size:28px;margin:0}
.v3-mock{gap:2px;margin-bottom:3px}.v3-mock i{font-size:11.5px;padding:1px 6px}
.v3-kopje{font-size:14px;margin:12px 20px 6px}.v3-basis .v3-kopje{margin:10px 0 4px}
.v3-lijst{padding:0 20px;gap:5px 14px}
.v3-lijst li{font-size:13.5px;gap:7px;align-items:center;min-width:0}
.v3-een{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.v3-een b{display:inline;font-size:13.5px}.v3-een small{display:inline;font-size:12.5px;color:var(--tx3)}
.v3-nr{width:20px;height:20px;font-size:11px}
.v3-cta{margin:12px 20px 4px;width:calc(100% - 40px);padding:12px;font-size:16.5px}
.v3-onder{font-size:12.5px;padding:0 20px 12px}
.v3-basis{padding:16px 18px}
.v3-bgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.v3-groep{margin-top:6px}.v3-groep-kop{font-size:11px}
.v3-vink{gap:2px;margin-top:2px}.v3-vink li{font-size:13px;gap:5px;align-items:center}.v3-vink svg{width:12px;height:12px}
.v3-tweede{margin-top:10px;padding:9px;font-size:14px}
.abv-titel{font-size:20px}.abv-tegel{padding:12px}
.v3-vgl{padding:12px 16px}.v3-vgl td{padding:7px 8px}.v3-vgl td b{font-size:14px}.v3-vgl td small{font-size:12.5px}
@media (max-width:760px){
  .v3-h1{font-size:22px!important}.v3-top{margin-bottom:8px}
  .v3-tegels{grid-template-columns:repeat(3,minmax(0,1fr));padding:0 12px;gap:6px}
  .v3-tegel{height:auto;min-height:104px;padding:8px}.v3-tegel b{font-size:12.5px}.v3-tegel>span:last-child{font-size:11.5px}
  .v3-thumbs{grid-template-columns:repeat(2,20px)}.v3-thumb{width:20px;height:20px}.v3-groot{font-size:22px}
  .v3-mock i{font-size:10.5px;padding:1px 4px}
  .v3-plus-kop{padding:14px 14px 8px}.v3-lijst{grid-template-columns:1fr;padding:0 14px}.v3-kopje{margin:10px 14px 6px}
  .v3-cta{margin:12px 14px 4px;width:calc(100% - 28px)}.v3-onder{padding:0 14px 12px}.v3-prijs b{font-size:38px}
}

/* ============ Mijn persona & stijl, creative-QC, eigen API-sleutels (02-10) ============ */
.crs-uitleg{padding:14px 16px;margin-bottom:14px}
.crs-uitleg .hint{margin:6px 0 0}
.crs-blok{margin:0 0 18px}
.crs-blok h3{display:flex;align-items:baseline;gap:8px;font-size:15px;margin:0 0 10px}
.crs-blok h3 span{font-size:12.5px;font-weight:400;color:var(--tx3)}
.crs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.crs-item{margin:0;min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden;display:flex;flex-direction:column}
.crs-item.aan{border-color:color-mix(in srgb,var(--grn) 55%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--grn) 40%,transparent) inset}
.crs-beeld{position:relative;aspect-ratio:1;background:var(--panel2)}
.crs-beeld img{width:100%;height:100%;object-fit:cover;display:block}
.crs-vlag{position:absolute;left:8px;top:8px;background:var(--grn);color:#fff;font-size:11.5px;font-weight:600;border-radius:999px;padding:3px 9px}
.crs-item figcaption{display:flex;flex-direction:column;gap:8px;padding:10px;font-size:12.5px}
.crs-bron{color:var(--tx3);font-size:12px;overflow-wrap:anywhere}
.crs-woorden{margin:0}
.crs-woorden span{font-size:12px}
.crs-woorden em{font-style:normal;color:var(--tx3);font-weight:400}
.crs-woorden .inp{font-size:13px}
.crs-prompt summary{cursor:pointer;color:var(--tx2);font-size:12px}
.crs-prompt p{margin:6px 0 0;font-size:12px;line-height:1.45;color:var(--tx2);max-height:140px;overflow:auto;overflow-wrap:anywhere}
.crs-weg{align-self:flex-start}
.crs-upload{position:relative;align-self:start;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;min-height:190px;padding:14px;border:1.5px dashed var(--line);border-radius:12px;background:var(--panel2);cursor:pointer;color:var(--tx2);font-size:12.5px}
.crs-upload:hover,.crs-upload:focus-within{border-color:var(--tx3)}
.crs-upload b{font-size:14px;color:var(--tx)}
.crs-upload input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0}
.crb-stijl{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;font-size:12px;color:var(--tx3)}
.crb-stijl .crb-chip{padding:4px 10px;font-size:12px}
.crb-stijl-al{margin:6px 0 0;font-size:12px;color:var(--grn)}
.crqc{margin-top:6px;font-size:12.5px;border:0;padding:0;background:none}
.crqc[open]{border:1px solid var(--line);border-radius:9px;padding:6px 9px;background:var(--panel)}
.crqc summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none}
.crqc summary::-webkit-details-marker{display:none}
.crqc summary b{border-radius:999px;padding:2px 8px;font-size:12px;color:#fff;white-space:nowrap;flex:0 0 auto}
.crqc.crqc-ok summary b{background:var(--grn)}
.crqc.crqc-laag summary b{background:var(--amb)}
.crqc.crqc-laag[open]{border-color:color-mix(in srgb,var(--red) 45%,var(--line))}
.crqc summary span{color:var(--tx2);min-width:0;line-height:1.25}
.crqc.wacht{color:var(--tx3)}
.crqc-reden,.crqc-fix{margin:6px 0 0;line-height:1.45;color:var(--tx)}
.crqc-fix b{font-weight:600}
.crqc .hint{margin:6px 0 0}
.crqc-knoppen{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.crqc-vervolg{margin:6px 0 0;font-size:12px;color:var(--tx2)}
.cr-api-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.cr-api-knoppen .hint{font-size:12px}
.cr-api-st{display:flex;align-items:center;gap:8px;margin:6px 0 0;font-size:12.5px;color:var(--tx2)}
.cr-api-st.fout{color:var(--red)}
.cr-api-st.klaar{color:var(--grn)}
.cr-apit{border-top:1px solid var(--line);padding:12px 0 4px}
.cr-apit-kop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cr-apit-let{margin:6px 0 4px;font-size:12.5px;line-height:1.45;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--amb) 10%,transparent);color:var(--tx)}
.cr-apit-form{display:flex;gap:8px;margin:8px 0 4px}
.cr-apit-form .inp{flex:1;min-width:0}
.cr-apit-geen{border-top:1px solid var(--line);padding-top:10px;margin-top:8px}
@media (max-width:600px){
  .crs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .crs-upload{min-height:0}
  .crs-item figcaption{padding:8px}
  .cr-apit-form{flex-direction:column}
}
/* Hele pagina compact (02-10) */
.v3-onder{padding-bottom:4px}.v3-onder-logos{display:flex;justify-content:center;padding:0 20px 12px}.v3-onder-logos .ab-logo{height:20px;font-size:10.5px;padding:0 6px}
.abv{margin:2px 0 12px}.abv-titel{display:block;font-family:var(--font);font-weight:500;font-size:18px;margin:0 0 8px;color:var(--tx)}
.abv-rij{display:flex!important;flex-wrap:nowrap;overflow-x:auto;gap:10px;padding-bottom:6px;scroll-snap-type:x mandatory}
.abv-tegel{flex:0 0 190px!important;height:140px;padding:10px!important;gap:6px!important;overflow:hidden;scroll-snap-align:start}
.abv-t{font-size:13px;color:var(--tx)}.abv-vb{font-size:10px;font-weight:700;color:var(--tx3);border:1px solid var(--line2);border-radius:999px;padding:0 5px;vertical-align:1px}
.abv-thumbs{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}.abv-thumbs .v3-thumb{width:auto;height:46px;border-radius:7px}
.abv-themas{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.abv-thema{padding:2px!important;border-radius:6px!important}
.abv-lb .lb-rij{font-size:13px;padding:4px 6px}.abv-lb{display:flex;flex-direction:column;gap:2px}
.abv-mc li{font-size:12.5px;padding:2px 0 2px 7px;font-weight:600;color:var(--tx)}
.abv-hook{font-size:14px!important;line-height:1.35}
.abv-push{padding:8px 10px!important;font-size:12px}.abv-push b{font-size:12.5px}
.v3-vgl{margin-bottom:8px}.v3-vgl summary{font-size:15px}
.v3-faq-dl{margin:8px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px}.v3-faq-dl dt{font-weight:600;color:var(--tx)}.v3-faq-dl dd{margin:0;color:var(--tx2)}
.v3 .ab-factuur,.v3 .ab-fac{margin-bottom:8px;padding:12px 16px}
@media (max-width:760px){.abv-tegel{flex-basis:165px!important}.v3-faq-dl{grid-template-columns:1fr}}

/* Opruimronde 02-10 (Jairo: minder uitleg, minder ruimte): de ingeklapte 'Zo werkt deze pagina' als dunne regel, kortere ondertitels. */
.pagina-uitleg{margin-bottom:10px}
.pagina-uitleg:not([open]) summary{padding:8px 14px}
.pagina-uitleg:not([open]) summary span{font-size:12.5px;font-weight:550;color:var(--tx2)}
.pmain .onder{margin-bottom:14px}
.pmain h1 + .seg, .pmain h1 + .pagina-uitleg{margin-top:10px}
.v3-lijst .v3-een b{display:inline}.v3-lijst .v3-een small{display:inline}
.v3-tegel{height:118px}.v3-mock i{padding:0 6px}
@media (max-width:760px){.v3-tegel{height:auto}.v3-lijst li{font-size:13.5px}}
.abv-thumbs{grid-template-columns:repeat(2,46px);justify-content:start}.abv-thumbs .v3-thumb{width:46px}
.pcard > .dp-lessen:first-child{border-top:0!important;margin-top:0!important;padding-top:0!important}
/* v5 (02-10, exact naar spec) */
.v3-top{margin:4px 0 10px}.v5-gratis{font-size:14.5px;color:var(--tx2);margin:0;font-weight:600}
.v5-test{font-size:12.5px;color:#8a4b00;background:#fff4e5;border-radius:6px;padding:4px 10px;margin:0 0 8px;display:inline-block}
.v5-kaarten{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:16px;align-items:start;margin-bottom:14px}
.v5-kaart{background:var(--panel);border-radius:16px;padding:20px;color:var(--tx);min-width:0}
.v5-plus{border:2px solid var(--acc);box-shadow:0 8px 22px rgba(20,20,20,.08)}.v5-basis{border:1px solid var(--line2)}
.v5-rij{display:flex;justify-content:space-between;align-items:center;gap:10px}
.v5-naam{font-family:var(--font);font-size:26px;font-weight:500;line-height:1.1}
.v5-pil{background:var(--acc);color:var(--on-acc,#fff);font-size:12.5px;font-weight:700;padding:3px 11px;border-radius:999px}
.v5-prijs{margin:6px 0 0;line-height:1.1}.v5-prijs b{font-size:44px;letter-spacing:-1px}.v5-prijs span{font-size:14px;color:var(--tx3)}
.v5-netto{margin:6px 0 0;font-size:15px;font-weight:700;color:var(--acc)}
html[data-theme="dark"] .v5-netto{color:var(--tx)}
.v5-pv{margin:4px 0 0;font-size:13.5px;font-weight:600}
.v5-cta{display:block;width:100%;height:48px;margin:14px 0 6px;border-radius:11px;background:var(--acc);color:var(--on-acc,#fff);font-size:17px;font-weight:800;cursor:pointer}
.v5-cta:hover{background:var(--acc2)}.v5-cta:disabled{opacity:.7}
.v5-onder{margin:0;font-size:12.5px;color:var(--tx3);text-align:center}
.v5-tweede{width:100%;justify-content:center;height:44px;margin:14px 0 6px;font-size:15px}
.v5-kop{margin:16px 0 8px;font-size:15px;font-weight:800}
.v5-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.v5-lijst li{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.4;color:var(--tx2);white-space:normal;overflow:visible}
.v5-lijst li b{color:var(--tx);font-weight:700}.v5-lijst li svg{flex:none;margin-top:3px;color:var(--grn)}
.v5-logos{margin-top:10px}
.abv-groot{display:flex;gap:6px}.abv-groot .v3-thumb{width:84px;height:84px;border-radius:9px}
.abv-tegel{flex-basis:200px!important;height:150px}
@media (max-width:760px){.v5-kaarten{grid-template-columns:1fr}.v5-kaart{padding:16px}.v5-prijs b{font-size:40px}}
.v5-onder{font-size:12px}
.abv-tegel.abv-breed,.abv-rij>.abv-tegel:first-child{flex-basis:276px!important;height:auto;min-height:150px}
.abv-groot .v3-thumb{width:120px;height:120px}
@media (max-width:760px){.abv-rij>.abv-tegel:first-child{flex-basis:276px!important}}
/* v6 (Jairo 02-10): Plus net iets aantrekkelijker, rustig en compact; thema-voorbeelden tonen de echte thema's */
.v5-plus{position:relative;overflow:hidden;border:3px solid var(--acc);box-shadow:0 10px 30px color-mix(in srgb,var(--acc) 16%,transparent),0 2px 6px rgba(20,20,20,.06)}
.v5-plus::before{content:"";position:absolute;left:0;right:0;top:0;height:84px;background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 15%,transparent),color-mix(in srgb,var(--acc) 0%,transparent));pointer-events:none}
.v5-plus>*{position:relative}
.v5-ster{color:var(--acc);font-size:.62em;vertical-align:.55em;margin-left:3px}
.v5-plus .v5-pil{display:inline-flex;align-items:center;gap:5px;box-shadow:0 3px 10px color-mix(in srgb,var(--acc) 30%,transparent)}
.v5-plus .v5-pil svg{flex:none}
.v5-cta{transition:box-shadow .18s ease,transform .18s ease,background .18s ease}
.v5-cta:hover:not(:disabled){box-shadow:0 6px 22px color-mix(in srgb,var(--acc) 45%,transparent),0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent);transform:translateY(-1px)}
.v5-plus .v5-lijst li svg{color:var(--acc)}
html[data-theme="dark"] .v5-plus .v5-lijst li svg,html[data-theme="dark"] .v5-ster{color:var(--acc)}
.abv-rij{align-items:stretch}
.abv-rij>.abv-tegel{height:auto!important;min-height:150px}
.abv-rij>.abv-thtegel{flex-basis:316px!important}
.abv-thtegel .abv-themas{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.abv-thtegel .abv-thema{gap:2px;padding:3px!important;border-radius:8px!important}
.abv-thtegel .abv-thema small{font-size:10px;line-height:1.2}
.kt-mini.abv-sw{display:block;position:relative;width:100%;height:40px;border-radius:6px;border:0;overflow:hidden;
  background-color:var(--zij);background-image:var(--zij-ster1,none),var(--zij-ster2,none),var(--zij-grad);background-size:9px 9px,13px 13px,100% 100%;background-position:0 0,4px 6px,0 0}
.abv-sw-r{position:absolute;left:0;right:0;top:0;height:4px;background:var(--rand)}
.abv-sw-k{position:absolute;right:5px;bottom:5px;width:46%;height:16px;border-radius:4px;background:var(--panel);display:flex;flex-direction:column;justify-content:center;gap:3px;padding:0 4px}
.abv-sw-k i{display:block;height:2px;border-radius:2px;background:var(--line2)}.abv-sw-k i:first-child{background:var(--pop);width:70%}
.abv-thema.aan{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}
@media (max-width:760px){.abv-rij>.abv-thtegel{flex-basis:300px!important}}
.v5-plus::before{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 9%,transparent),color-mix(in srgb,var(--acc) 0%,transparent))}
.abv-rij>.abv-thtegel{order:-1;flex-basis:344px!important}
.abv-thtegel .abv-thema small{font-size:9.5px;letter-spacing:-.1px}
@media (max-width:760px){.abv-rij>.abv-thtegel{flex-basis:326px!important}}
.abv-thtegel .abv-thema{padding:3px 1px 2px!important}.abv-thtegel .abv-sw{width:calc(100% - 4px)}
@media (max-width:760px){.abv-rij>.abv-thtegel{flex-basis:344px!important}}

/* =====================================================================
   03-10-2026 — Klantenservice-inbox in Gorgias-stijl (ib2): weergaven links, tickets met ordernummer/status/soort,
   een open ticket = gesprek + antwoord in het midden en rechts het Shopify-paneel. Telefoon: lijst → ticket.
   ===================================================================== */
/* 08-10 (ronde 2): standaard (brede desktop, vanaf 1440px) — nav 200 | lijst/hoofdvak flexibel; met een open gesprek komt
   de ticketlijst (.ksd-rail) en de klantzijbalk erbij. Smallere tiers staan in de media queries verderop. */
.ib2{display:grid;grid-template-columns:190px minmax(0,1fr);height:calc(100vh - 150px);min-height:620px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ib2.heeftsel{grid-template-columns:190px minmax(0,1fr) 280px}
.ib2.heeftsel:has(.ksd-rail){grid-template-columns:190px 290px minmax(0,1fr) 270px}
.ib2-nav{border-right:1px solid var(--line);padding:10px 8px;overflow:auto;background:var(--panel2);display:flex;flex-direction:column;gap:1px}
.ib2-nav .ib-view{padding:8px 10px}
.ib2-navknop{display:flex;flex-direction:column;gap:6px;margin:14px 4px 6px}
.ib2-navknop .btn{width:100%;justify-content:center}
.ib2-main{min-width:0;overflow:auto;display:flex;flex-direction:column}
.ib2 .ib-mchips{display:none}
.ib2-lijstkop{padding:14px 16px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2}
.ib2-lijstkop .ib-zoek{grid-template-columns:minmax(0,1fr) 150px}
.ib2-lijst{flex:1}
/* Compacte rij (~72px): regel 1 naam + tijd, regel 2 onderwerp, regel 3 hoogstens twee chips (status, ordernummer) plus
   "+N" voor de rest. Geen stapel chips; een rode rand alleen bij dispute-risico (.risico, hieronder ongewijzigd). */
.ib2-rij{display:flex;gap:10px;align-items:center;padding:10px 16px 10px 12px;border-bottom:1px solid var(--line);min-height:72px}
.ib2-rij:hover{background:var(--hover)}
.ib2-rij.risico{box-shadow:inset 3px 0 0 var(--red)}
.ib2-rij input{flex:0 0 auto}
.ib2-rijknop{display:flex;gap:10px;flex:1;min-width:0;text-align:left;align-items:center}
.ib2-rijknop .ib-av{width:28px;height:28px;font-size:11px;flex:0 0 28px}
.ib2-rt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ib2-r1{display:flex;gap:8px;align-items:baseline;justify-content:space-between}
.ib2-r1 b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.ib2-rij.nieuw .ib2-r1 b::after{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acc);margin-left:6px;vertical-align:1px}
.ib2-r1 .ib-tijd{flex:0 0 auto}
.ib2-r2{font-size:12.5px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib2-r3{display:flex;align-items:center;gap:5px}
.ksd-meer{background:transparent;border-style:dashed}
.ib2-chip{font-style:normal;font-size:11.5px;line-height:1.5;padding:1px 8px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);color:var(--tx2);white-space:nowrap}
button.ib2-chip{cursor:pointer}
.ib2-chip.nr{font-variant-numeric:tabular-nums;font-weight:600;color:var(--tx);background:var(--panel)}
.ib2-chip.soort{background:transparent;border-style:dashed}
.ib2-chip.goed{background:rgba(47,122,74,.1);border-color:rgba(47,122,74,.25);color:var(--grn)}
.ib2-chip.amber{background:rgba(168,104,15,.1);border-color:rgba(168,104,15,.25);color:var(--amb)}
.ib2-chip.rood{background:rgba(180,35,24,.08);border-color:rgba(180,35,24,.25);color:var(--red);font-weight:600}
.ib2-chip.blauw{background:rgba(59,110,165,.1);border-color:rgba(59,110,165,.25);color:var(--blu,var(--acc))}
/* leeg: alles bijgewerkt */
.ib2-klaar{display:flex;flex-direction:column;align-items:center;text-align:center;padding:56px 20px;gap:4px}
.ib2-klaar>b{font-size:17px}.ib2-klaar p{margin:0 0 14px;color:var(--tx3)}
.ib2-klaarvink{width:52px;height:52px;border-radius:50%;background:rgba(47,122,74,.12);color:var(--grn);display:grid;place-items:center;font-size:24px;font-weight:700;margin-bottom:10px}
.ib2-klaar ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;text-align:left}
.ib2-klaar li{font-size:13.5px;color:var(--tx2)} .ib2-klaar li b{color:var(--grn);margin-right:8px}
/* het ticket */
.ib2-ticket{display:flex;flex-direction:column;min-width:0}
.ib2-tkopbalk{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 18px 0}
.ib2-tacties{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ib2-esc{margin:10px 18px 0;padding:10px 12px;border-radius:10px;background:rgba(180,35,24,.07);border:1px solid rgba(180,35,24,.3);color:var(--tx);display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13px;line-height:1.5}
.ib2-esc b{background:var(--red);color:#fff;border-radius:6px;padding:0 8px;font-size:12px;line-height:20px;height:20px}
.ib2-esc span{flex:1;min-width:180px;font-weight:600;color:var(--red)} .ib2-esc em{flex-basis:100%;font-style:normal;color:var(--tx3);font-size:12.5px}
.ib2-titel{padding:10px 18px 0}
.ib2-titel h2{font-size:21px;line-height:1.25;margin:0 0 6px;font-weight:600;overflow-wrap:anywhere}
.ib2-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ib2-tabs{display:flex;gap:2px;padding:12px 18px 0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.ib2-tabs::-webkit-scrollbar{display:none}
.ib2-tabs button{padding:8px 12px;font-size:13.5px;color:var(--tx2);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.ib2-tabs button.on{color:var(--tx);font-weight:600;border-bottom-color:var(--acc)}
.ib2-tabinh{padding:16px 18px 24px}
.ib2-draad{padding:16px 18px 20px;display:flex;flex-direction:column;gap:12px}
.ib2-draad .ib-bericht{max-width:none}
.ib2-bkaart{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel)}
.ib2-bkaart>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13px}
.ib2-bkaart>div>span{color:var(--tx3)}
.ib2-bkaart.ok{border-color:rgba(47,122,74,.35);background:rgba(47,122,74,.06)}
button.ib2-bkaart.ok:hover{background:rgba(47,122,74,.1)}
.ib2-bkaart.niet{border-color:rgba(168,104,15,.35);background:rgba(168,104,15,.06)}
.ib2-vink{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:0 0 24px;font-size:13px;color:#fff;background:var(--grn)}
.ib2-bkaart.niet .ib2-vink{background:var(--amb)}
.ib2-pijl{font-size:20px;color:var(--tx3);align-self:center}
.ib2-spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--tx2);animation:ib2draai .8s linear infinite;display:inline-block;flex:0 0 16px}
@keyframes ib2draai{to{transform:rotate(360deg)}}
.ib2-zoekbest{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.ib2-zoekbest input{min-width:0;flex:1 1 120px}
.ib2-zoekbest .inp{flex:1;min-width:0}
.ib2-mshop{display:none;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.ib2-mshop>summary{padding:12px 14px;font-weight:600;font-size:14px;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.ib2-mshop>summary::after{content:'▾';color:var(--tx3)} .ib2-mshop[open]>summary::after{content:'▴'}
.ib2-mshop>div{padding:0 14px 12px}
.ib2-draad .ib-tagsrij{padding:0;border-top:0}
/* het antwoord */
.ib2-comp{border:1px solid var(--line);border-radius:12px;padding:12px 14px 14px;background:var(--panel)}
.ib2-compkop{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.ib2-ctabs{display:flex;gap:4px;background:var(--panel2);border-radius:9px;padding:3px}
.ib2-ctabs button{padding:5px 12px;border-radius:7px;font-size:13px;color:var(--tx2)}
.ib2-ctabs button.on{background:var(--panel);color:var(--tx);font-weight:600;box-shadow:0 0 0 1px var(--line)}
.ib2-gk{font-size:12.5px;color:var(--tx3)} .ib2-gk.klaar{color:var(--grn);font-weight:600}
.ib2-aan{display:flex;flex-direction:column;gap:3px;font-size:12.5px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px dashed var(--line);min-width:0}
.ib2-aan span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib2-aan em{font-style:normal;color:var(--tx3);display:inline-block;width:78px}
/* Fase 4 punt 2: cc in de opsteller, zelfde regelstijl als Aan/Onderwerp hierboven. */
.ib2-cc{display:flex;align-items:center;gap:0;font-size:12.5px;margin:-2px 0 8px}
.ib2-cc em{font-style:normal;color:var(--tx3);display:inline-block;width:78px;flex:0 0 78px}
.ib2-cc input{flex:1;min-width:0;border:none;background:transparent;padding:2px 0;font-size:12.5px;color:var(--tx)}
.ib2-cc input:focus{outline:none;box-shadow:none}
.ib2-cc input::placeholder{color:var(--tx3)}
/* Fase 4 punt 3/4: bijlagen, zowel ontvangen (in het bericht) als toegevoegd (in de opsteller). */
.ib2-bijlagen{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ib2-bijlage{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);color:var(--tx);font-size:12.5px;text-decoration:none;max-width:220px}
.ib2-bijlage:hover{background:var(--hover)}
.ib2-bijlage svg{width:15px;height:15px;flex:0 0 15px;color:var(--tx2)}
.ib2-bijlage span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib2-bijlage em{font-style:normal;color:var(--tx3)}
.ib2-bijlage.beeld{padding:0;overflow:hidden;width:64px;height:64px;max-width:64px}
.ib2-bijlage.beeld img{width:100%;height:100%;object-fit:cover;display:block}
.ib2-bijlagelabel{cursor:pointer}
.ib2-bijlagelabel input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ib2-sjabloon{margin-bottom:8px;max-width:280px}
.ib2-comp textarea{resize:vertical;min-height:170px;font-size:13.5px;line-height:1.55}
.ib2-notitie{background:rgba(168,104,15,.05)}
.ib2-bewijs{list-style:none;margin:10px 0 0;padding:10px 12px;border-radius:10px;background:var(--panel2);display:flex;flex-direction:column;gap:6px;font-size:12.5px;line-height:1.45}
.ib2-bewijs li{display:flex;gap:8px;align-items:flex-start}
.ib2-bewijs li>b{width:18px;height:18px;border-radius:50%;flex:0 0 18px;display:grid;place-items:center;font-size:11px;color:#fff;background:var(--grn)}
.ib2-bewijs li.niet>b{background:var(--amb)}
.ib2-compvoet{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.ib2-gkknop{background:var(--grn)!important;border-color:var(--grn)!important;color:#fff!important;font-weight:600;padding:0 18px;min-height:40px}
.ib2-gkknop:hover{filter:brightness(1.08)}
.ib2-route{margin:8px 0 0;font-size:12px}
.ib2-duimen{display:flex;gap:8px;margin-bottom:12px}
.ib2-duimen [aria-pressed=true]{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
/* het Shopify-paneel */
.ib2-shop{border-left:1px solid var(--line);overflow:auto;background:var(--panel2);padding:12px 14px 20px;font-size:13px}
.ib2-pkop{display:flex;gap:8px;align-items:center;font-weight:600;font-size:13px;padding:9px 11px;border-radius:9px;margin-bottom:10px;background:var(--panel);border:1px solid var(--line)}
.ib2-pkop.ok{background:rgba(47,122,74,.1);border-color:rgba(47,122,74,.3);color:var(--grn)}
.ib2-pkop.niet{background:rgba(168,104,15,.08);border-color:rgba(168,104,15,.3);color:var(--amb)}
.ib2-pkop b{width:18px;height:18px;border-radius:50%;background:var(--grn);color:#fff;display:grid;place-items:center;font-size:11px}
.ib2-skel{height:90px;border-radius:10px;background:linear-gradient(90deg,var(--panel) 0,var(--hover) 50%,var(--panel) 100%);background-size:200% 100%;animation:ib2skel 1.2s infinite;margin-bottom:10px}
.ib2-skel.kort{height:50px} @keyframes ib2skel{to{background-position:-200% 0}}
.ib2-psec{padding:10px 0;border-top:1px solid var(--line)}
.ib2-psec:first-of-type{border-top:0;padding-top:0}
.ib2-ptitel{font-size:12px;color:var(--tx3);margin-bottom:6px;font-weight:600}
.ib2-prij{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.ib2-prij h4{margin:0;font-size:16px}
.ib2-onr{font-size:15px}
.ib2-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 10px;margin:8px 0 0;align-items:center}
.ib2-dl dt{color:var(--tx3);font-size:12px} .ib2-dl dd{margin:0;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;min-width:0}
.ib2-verw{font-size:11.5px}
.ib2-tlink{display:inline-block;margin-top:8px;font-weight:600;font-size:12.5px}
.ib2-prod{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:5px 0}
.ib2-prod img,.ib2-geenfoto{width:40px;height:40px;border-radius:8px;object-fit:cover;background:var(--panel);border:1px solid var(--line)}
.ib2-prod>span:nth-child(2){min-width:0;display:flex;flex-direction:column;font-size:12.5px}
.ib2-prod b{font-weight:600;overflow-wrap:anywhere} .ib2-prod em{font-style:normal;color:var(--tx3);font-size:12px}
.ib2-pp{font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ib2-prod.groot{grid-template-columns:52px minmax(0,1fr) auto} .ib2-prod.groot img,.ib2-prod.groot .ib2-geenfoto{width:52px;height:52px}
.ib2-tot{border-top:1px dashed var(--line);margin-top:6px;padding-top:6px}
.ib2-kcijfers{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:12.5px;color:var(--tx2)}
.ib2-kcijfers.groot{font-size:13.5px;margin:10px 0 12px}
.ib2-adres{font-size:12.5px;line-height:1.55;overflow-wrap:anywhere}
.ib2-breek{overflow-wrap:anywhere;word-break:break-word}
.ib2-pknop{display:flex;flex-wrap:wrap;gap:6px}
.ib2-pvoet{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ib2-andere{display:flex;flex-wrap:wrap;gap:6px}
.ib2-andersz{margin-top:8px}.ib2-andersz summary{cursor:pointer}
.ib2-vtl{list-style:none;margin:0;padding:0 0 0 4px;position:relative}
.ib2-vtl li{position:relative;padding:0 0 12px 20px;display:flex;flex-direction:column;font-size:12.5px;line-height:1.4}
.ib2-vtl li::before{content:'';position:absolute;left:0;top:3px;width:10px;height:10px;border-radius:50%;background:var(--grn);box-shadow:0 0 0 3px rgba(47,122,74,.15)}
.ib2-vtl li::after{content:'';position:absolute;left:4.5px;top:15px;bottom:-1px;width:1px;background:var(--line2,var(--line))}
.ib2-vtl li:last-child::after{display:none}
.ib2-vtl li.toekomst::before{background:var(--panel);border:2px dashed var(--tx3);box-shadow:none;width:8px;height:8px}
.ib2-vtl li span{color:var(--tx3)}
.ib2-vtl.kort li{padding-bottom:9px}
.ib2-tabkaart{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--panel);margin-bottom:12px;min-width:0}
.ib2-tabkaart h4{margin:0 0 4px;font-size:16px}
.ib2-chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 10px}
.ib2-tableeg{padding:6px 0}
.ib2-tkop{display:flex;gap:8px;align-items:center;font-weight:600;padding:9px 11px;border-radius:9px;margin-bottom:12px;background:rgba(47,122,74,.1);color:var(--grn)}
.ib2-tkop b{width:18px;height:18px;border-radius:50%;background:var(--grn);color:#fff;display:grid;place-items:center;font-size:11px;flex:0 0 18px}
.ib2-tkop.rood{background:rgba(180,35,24,.08);color:var(--red)} .ib2-tkop.rood b{background:var(--red)}
.ib2-verv{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.ib2-verv>div{flex:1;min-width:120px}
.ib2-vlogo{width:38px;height:38px;border-radius:9px;background:var(--acc);color:var(--on-acc);display:grid;place-items:center;font-weight:700;font-size:13px;flex:0 0 38px}
.ib2-lm{font-size:13px;line-height:1.5;padding:9px 11px;border-radius:9px;margin-bottom:14px;overflow-wrap:anywhere}
.ib2-lm.ok{background:rgba(47,122,74,.07);border:1px solid rgba(47,122,74,.25)}
.ib2-lm.niet{background:rgba(168,104,15,.07);border:1px solid rgba(168,104,15,.25)}
.ib2-scans{margin-top:4px}.ib2-scans summary{cursor:pointer}
.ib2-scan{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;font-size:12px;padding:4px 0;border-top:1px dashed var(--line)}
.ib2-eerder{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:7px 0;border-top:1px dashed var(--line);font-size:13px}
.ib2-eerder span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* werk-pagina's */
.ib2-pagina{padding:16px 18px 24px}
.ib2-pkopt{margin-bottom:12px}.ib2-pkopt h3{margin:0 0 2px;font-size:18px}
.ib2-klrij{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:10px 4px;border-bottom:1px solid var(--line)}
.ib2-klrij:hover{background:var(--hover)}
.ib2-klcijfers{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.ib2-link{display:flex;flex-direction:column;padding:5px 0;font-size:13px}
.ib2-kennis{white-space:pre-wrap;font:12.5px/1.55 ui-monospace,Menlo,monospace;max-height:420px;overflow:auto;margin:0;overflow-wrap:anywhere}
.ib2-sj summary{cursor:pointer} .ib2-sj pre{white-space:pre-wrap;font:12.5px/1.55 inherit;background:var(--panel2);padding:10px;border-radius:8px;margin:10px 0 0;overflow-wrap:anywhere}
/* 08-10 (ronde 2) — drie tiers, zoals gevraagd:
   ≥1440px: weergaven 200 | lijst 320 | gesprek flexibel (≥ ~560px) | klantzijbalk 300 (zie de basisregels hierboven).
   1100–1439px: weergaven smal (alleen iconen, zie .ib2-nav hieronder), lijst 300, gesprek flexibel, geen 4e kolom —
     klant/bestelling blijven bereikbaar via de bestaande tabs (Bestelling/Tracking/Klant), niet als aparte kolom.
   <1100px: lijst → gesprek, zoals op de telefoon hieronder. */
@media (max-width:1439px){
  .ib2.heeftsel{grid-template-columns:56px minmax(0,1fr)}
  .ib2.heeftsel:has(.ksd-rail){grid-template-columns:56px 300px minmax(0,1fr)}
  .ib2-shop{display:none}
  .ib2-mshop{display:block}
}
@media (min-width:1100px) and (max-width:1439px){
  /* Weergaven ingeklapt tot een smalle, iconen-alleen kolom; de volledige namen en aantallen zie je in de kop van de
     lijst zelf (die altijd al de naam van de huidige weergave met het aantal toont). */
  .ib2{grid-template-columns:56px minmax(0,1fr)}
  .ib2-nav .ib-vn,.ib2-nav .ib-view b,.ib2-nav .ib2-autopct,.ib2-nav .ib2-tags,.ib2-nav .ib2-navknop,.ib2-nav .hint{display:none}
  .ib2-nav{padding:10px 4px;align-items:center}
  .ib2-nav .ib-view{padding:9px;justify-content:center}
}
@media (max-width:1099px), (max-width:1023px) and (pointer:coarse){
  .ib2,.ib2.heeftsel{display:block;height:auto;min-height:0;border-radius:12px;overflow:visible}
  .ib2-nav{display:none}
  .ksd-rail{display:none!important}
  .ib2-main{overflow:visible}
  .ib2 .ib-mchips{display:flex}
  .ib2-lijstkop{position:static;padding:12px}
  .ib2-lijstkop .ib-zoek{grid-template-columns:minmax(0,1fr) auto}
  .ib2 .ib-mfilters{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
  .ib2 .ib-mfilters select{flex:1;min-width:0}
  .ib2-tkopbalk{padding:10px 12px 0}
  .ksd-ticketbalk{padding:8px 12px;flex-wrap:wrap}
  .ib2-esc{margin:10px 12px 0}
  .ib2-titel{padding:8px 12px 0} .ib2-titel h2{font-size:19px}
  .ib2-tabs{padding:10px 8px 0}
  .ib2-tabs button{padding:10px 12px;font-size:14px}
  .ib2-tabinh,.ib2-draad,.ib2-pagina{padding:14px 12px 18px}
  .ib2-comp{padding:12px}
  .ib2-compvoet .ib2-gkknop{flex:1 1 100%;min-height:48px;font-size:15px}
  .ib2-compvoet .btn.sm{flex:1;min-height:42px;justify-content:center}
  .ib2-sjabloon{max-width:none}
  .ib2-aan em{width:auto;margin-right:6px}
  .ib2-klrij{flex-wrap:wrap}
  .ib2-klcijfers{justify-content:flex-start;padding-left:46px}
}
@media (max-width:860px){ .ib2-rij{padding:10px 12px 10px 10px} }
.ib2-terug{display:inline-flex}
.ib2-compvoet .btn.sm{white-space:nowrap}
@media (max-width:1099px), (max-width:1023px) and (pointer:coarse){ .ib2-compvoet .btn.sm{flex:1 1 auto} }
.ib2-nav .ib-vn{white-space:normal;line-height:1.3}
/* 03-10: wizard Mail koppelen */
.modal.mw{max-width:560px}
.mw .mbody p{margin:0 0 10px;line-height:1.55}
.mw-voortgang{display:flex;gap:4px;align-items:center;padding:0 20px 4px}
.mw-voortgang i{flex:1;height:4px;border-radius:2px;background:var(--line)} .mw-voortgang i.gedaan{background:var(--grn)} .mw-voortgang i.nu{background:var(--acc)}
.mw-voortgang span{font-size:12px;color:var(--tx3);margin-left:8px;white-space:nowrap}
.mw-keuzes{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.mw-keuze{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.mw-keuze span{font-size:12.5px;color:var(--tx3)} .mw-keuze:hover{background:var(--hover)} .mw-keuze.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.mw-stappen{margin:0 0 12px;padding-left:20px;line-height:1.6;font-size:13.5px} .mw-stappen li{margin-bottom:4px}
.mw-let{font-size:12.5px;line-height:1.55;padding:10px 12px;border-radius:10px;background:rgba(168,104,15,.07);border:1px solid rgba(168,104,15,.25);overflow-wrap:anywhere}
.mw-seg{display:flex;gap:6px;margin-bottom:12px}
.mw-servers{display:flex;flex-direction:column;gap:2px;font-size:12.5px;padding:10px 12px;border-radius:10px;background:var(--panel2);margin:4px 0 8px;overflow-wrap:anywhere}
.mw-servers span{color:var(--tx2)}
.mw-checks{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.mw-checks li{display:flex;gap:10px;align-items:center;font-size:13.5px;color:var(--tx2)}
.mw-checks li>b{width:22px;height:22px;border-radius:50%;flex:0 0 22px;display:grid;place-items:center;font-size:11.5px;background:var(--panel2);border:1px solid var(--line)}
.mw-checks li.goed>b{background:var(--grn);border-color:var(--grn);color:#fff} .mw-checks li.goed{color:var(--tx)}
.mw-checks li.fout>b{background:var(--red);border-color:var(--red);color:#fff} .mw-checks li.fout{color:var(--red);font-weight:600}
.mw-checks li.bezig>b{border:2px solid var(--line);border-top-color:var(--tx2);animation:ib2draai .8s linear infinite}
.mw-fout{padding:10px 12px;border-radius:10px;background:rgba(180,35,24,.07);border:1px solid rgba(180,35,24,.3);margin-bottom:12px;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.mw-fout p{margin:6px 0 0!important} .mw-fout code{font-size:11.5px;word-break:break-all} .mw-fout .btn{margin-top:8px}
.mw-ok{padding:10px 12px;border-radius:10px;background:rgba(47,122,74,.08);border:1px solid rgba(47,122,74,.3);color:var(--grn);margin-bottom:12px;font-size:13px}
.mw-ok.groot b{font-size:16px;display:block;margin-bottom:4px} .mw-ok.groot p{color:var(--tx);margin:0!important}
.mw-kaart{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 16px 4px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.mw-kaart>div{flex:1 1 260px;display:flex;flex-direction:column;gap:2px;font-size:13px} .mw-kaart>div span{color:var(--tx3)}
@media (max-width:860px){ .mw-kaart{margin:12px} .mw-kaart .btn{flex:1;min-height:42px;justify-content:center} }

/* 12-10 (taak rechten-wizard): dezelfde stijl als de wizard "Mail koppelen" (.mw, .mw-voortgang, .mw-let, .mw-ok,
   .mw-fout) en de plaklijst van "Nieuwe functies vrijgeven" (.kp-plak, .kp-stap) — één look voor elke stap-wizard. */
.modal.rw{max-width:560px}
.rw .mbody p{margin:0 0 10px;line-height:1.55}
.rw-staptitel{margin:0 0 10px;font-size:15px}

@media (max-width:860px), (max-width:1023px) and (pointer:coarse){ .ib2 .ib-mfilters select{flex:1 1 100%} .ib2 .ib-mfilters .btn{flex:1;justify-content:center} }

/* ============================================================================================
   .ksd- — Klantenservice-helpdesk (08-10, Gorgias-stijl). Alleen klassen met dit voorvoegsel zijn
   nieuw voor deze module; de rest van dit blok wijzigt geen bestaande regel. Zie ook de .ib2-*
   regels hierboven, die al van de klantenservice-inbox waren en hier soms worden uitgebreid.
   ============================================================================================ */
/* Status als kleine hoofdletter-pil, precies de drie die je ook in Gorgias zelf ziet. */
.ksd-pil{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;line-height:1.6;padding:0 7px;border-radius:5px;white-space:nowrap;flex:0 0 auto}
.ksd-pil-open{background:rgba(59,110,165,.12);color:var(--blu,var(--acc))}
.ksd-pil-snoozed{background:var(--panel2);color:var(--tx3);border:1px solid var(--line)}
.ksd-pil-closed{background:var(--panel2);color:var(--tx3);border:1px solid var(--line)}
.ksd-toegewezen{background:transparent;border-style:dashed}
/* Het AI-conceptkaartje: duidelijk gemarkeerd (rand in --acc, lichte --panel2-vulling) met een sparkle-icoon en
   Goedkeuren/Aanpassen/Afwijzen — het patroon uit de uitleg die Jairo liet zien, en dezelfde opzet als Gorgias' eigen
   "Let AI Agent …"-kaarten. Gebruikt alleen bestaande kleurvariabelen, geen eigen accentkleur: past zich vanzelf aan
   het gekozen thema aan. */
.ksd-aikaart{border:1px solid var(--acc);background:var(--panel2);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.ksd-aikop{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.ksd-aikop b{font-size:13.5px}
.ksd-spark{color:var(--acc);flex:0 0 auto}
.ksd-aipil{margin-left:auto;font-size:11px;font-weight:600;color:var(--amb);background:rgba(168,104,15,.1);border:1px solid rgba(168,104,15,.25);border-radius:20px;padding:2px 10px;white-space:nowrap}
.ksd-aiknoppen{display:flex;gap:8px;flex-wrap:wrap}
.ksd-aiknoppen .btn{flex:1 1 auto;justify-content:center;min-width:100px}
/* Goedkeuren is de primaire actie (--acc/--on-acc, geen groen): dezelfde kleur als elke andere primaire knop in de hub.
   Aanpassen is een gewone (secundaire) knop. Afwijzen is een ghost-knop met rode tekst, geen rode rand. */
.ksd-aigoed{background:var(--acc)!important;border-color:var(--acc)!important;color:var(--on-acc,#fff)!important;font-weight:600}
.ksd-aigoed:hover{filter:brightness(1.08)}
.ksd-airood{background:transparent!important;border-color:transparent!important;color:var(--red)!important;font-weight:600}
.ksd-airood:hover{background:rgba(180,35,24,.08)!important}
.ksd-kiesrij{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;margin-bottom:8px}
.ksd-kiesrij select{max-width:280px}
/* Macro- en tagknop: een popover met een zoekveld, in plaats van een keuzelijst (naast elkaar in de opstellerbalk). */
.ksd-pop{position:relative}
.ksd-popover{position:absolute;left:0;top:calc(100% + 4px);z-index:6;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(16,24,40,.12);padding:8px;display:flex;flex-direction:column;gap:6px;width:240px}
.ksd-popoverlijst{display:flex;flex-direction:column;gap:1px;max-height:220px;overflow:auto}
.ksd-popoverlijst button{padding:7px 9px;text-align:left;border-radius:7px;font-size:13px}
.ksd-popoverlijst button:hover{background:var(--hover)}
.ksd-popoverlijst .hint{padding:6px 2px;margin:0}
/* Titel bovenaan het gesprek, daaronder één horizontale balk met Toewijzen/Prioriteit/Snoozen/Sluiten. */
.ksd-ticketbalk{display:flex;align-items:center;gap:8px;padding:10px 18px 0;position:relative}
.ksd-ticketbalk select.inp.sm{min-height:32px;padding:4px 8px;font-size:12.5px;max-width:160px}
.ksd-ticketbalk > :last-child{margin-left:auto}
.ksd-snooze{position:relative}
.ksd-snoozepop{position:absolute;right:0;top:calc(100% + 4px);z-index:5;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;display:flex;flex-direction:column;min-width:160px}
.ksd-snoozepop button{padding:7px 10px;text-align:left;border-radius:7px;font-size:13px}
.ksd-snoozepop button:hover{background:var(--hover)}
/* Fase 4 punt 9: het aangepaste moment, inline in dezelfde popover. */
.ksd-snoozeaangepast{display:flex;gap:6px;padding:4px 2px}
.ksd-snoozeaangepast input{flex:1;min-width:0;font-size:12.5px;padding:5px 7px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--tx)}
/* Interne notities: meerdere per ticket, elk met een naam erbij. */
.ksd-notities{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;max-height:260px;overflow:auto}
.ksd-notitie{background:rgba(168,104,15,.06);border:1px solid rgba(168,104,15,.18);border-radius:10px;padding:8px 10px}
.ksd-notitie b{font-size:12.5px}
.ksd-notitie .hint{float:right;font-size:11.5px}
.ksd-notitie p{margin:4px 0 0;font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
/* Fase 4 punt 7: @-mention in een notitie, alleen nadruk (geen link). */
.ksd-mention{color:var(--acc);font-weight:600}
/* Macro's (onder Regels) en Team (eigen pagina onder Instellingen). */
.ksd-macrorij{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.ksd-macrorij:first-of-type{border-top:0}
.ksd-macrorij b{flex:0 0 160px;font-size:13px}
.ksd-macrorij .hint{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ksd-macroform{display:flex;flex-direction:column;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.ksd-teamrij{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.ksd-teamrij:first-of-type{border-top:0}
.ksd-teamrij select{max-width:140px}
.ksd-teamstatus{margin-left:auto;white-space:nowrap}
/* Extra eis Jairo: rechten per teamlid, los van de rol. */
.ksd-rechten{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:640px){ .ksd-rechten{grid-template-columns:1fr} }
.ksd-rechten .vinkrij.sm{padding:5px 0}
.ksd-rechten .vinkrij.sm .lbl{font-size:12.5px;font-weight:500}
.ksd-rechtenpaneel{padding:10px 0 4px;border-top:1px dashed var(--line);margin-top:2px}
/* De persistente ticketlijst-kolom naast een open gesprek (Gorgias-stijl: views | ticketlijst | gesprek+zijbalk). Alleen op
   een brede desktop; op een laptop/telefoon valt hij weg en blijft het bestaande lijst → gesprek (zie media queries). */
.ksd-rail{display:none}
@media (min-width:1100px){
  .ksd-rail{display:flex;flex-direction:column;border-right:1px solid var(--line);overflow:auto;background:var(--panel)}
  .ksd-railkop{padding:12px 14px;font-weight:600;font-size:13px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel)}
  .ksd-rail .ib2-lijst{flex:1}
  .ksd-rail .ib2-rij{padding:9px 12px;min-height:0}
  .ksd-rail .ib2-rij.on{background:var(--hover);box-shadow:inset 3px 0 0 var(--acc)}
  .ksd-rail input[type=checkbox]{display:none}
}

/* 03-10 / 04-10: Vergelijkbare winkels via Google (overzichtelijker: één start, kaarten met reden, 3 bestsellers, zoekterm) */
.gcv-sub{margin:-2px 0 12px;font-size:13.5px;color:var(--tx2);max-width:65ch}
.gcv-form .gc-veld small{color:var(--tx3);font-weight:400}
.gcv-reskop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:18px 2px 4px}
.gcv-reskop h3{margin:0;font-size:16px}.gcv-reskop h3 span{color:var(--tx3);font-weight:600;font-size:13px;margin-left:6px}.gcv-reskop small{color:var(--tx3);font-size:12px}
.gcv-winkel{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:10px 0;background:var(--panel)}
.gcv-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.gcv-naam{display:flex;flex-direction:column;gap:1px;min-width:0}.gcv-naam b{font-size:15px}
.gcv-naam a{font-size:12.5px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcv-kop .btn{flex:none}.gcv-kop .btn:active{transform:translateY(1px)}
.gcv-waarom{margin:6px 0 12px;font-size:13.5px;color:var(--tx2);line-height:1.45}
.gcv-bs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:540px}
.gcv-p{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:inherit;text-decoration:none;min-width:0}
.gcv-p img,.gcv-geen{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;background:var(--bg2)}
.gcv-p span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35}
.gcv-p b{font-size:13px}
.gcv-voet{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:12px;font-size:12px;color:var(--tx3)}
.gcv-voet i{font-style:normal;color:var(--tx2)}.gcv-voet .gcv-ja{color:var(--grn);font-weight:600}
.gcv-leeg{padding:14px 16px;border:1px dashed var(--line2);border-radius:12px;color:var(--tx2);font-size:13.5px}
.gcv-skelet .gcv-winkel i{display:block;height:12px;border-radius:6px;background:var(--bg2);margin:0 0 8px;width:40%}
.gcv-skelet .gcv-winkel i+i{width:70%}
.gcv-skelet .gcv-winkel div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:540px;margin-top:10px}
.gcv-skelet .gcv-winkel div i{width:100%;height:auto;aspect-ratio:1/1;border-radius:8px}
@media (prefers-reduced-motion:no-preference){.gcv-skelet i{animation:gcvPuls 1.4s ease-in-out infinite}@keyframes gcvPuls{50%{opacity:.5}}}
@media (max-width:600px){.gcv-winkel{padding:12px}.gcv-bs{gap:8px}}
/* 03-10: btw-nummer vragen (België en andere EU-bedrijven: btw verlegd) */
.v5-btwvraag{margin:-4px 0 14px;font-size:13.5px;color:var(--tx2)}
.v5-btwvraag .ab-link{font-size:13.5px;font-weight:700}
/* 03-10: volledig automatisch + leren */
.ksna-modi{display:flex;flex-direction:column;gap:8px;margin:0 0 10px}
.ksna-modus{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:13px}
.ksna-modus.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)} .ksna-modus input{margin-top:3px}
.ksna-modus span{display:flex;flex-direction:column;gap:2px} .ksna-modus em{font-style:normal;color:var(--tx3);font-size:12.5px;line-height:1.45}
.ksna-uitleg{font-size:12.5px;line-height:1.5;padding:9px 11px;border-radius:9px;background:var(--panel2);margin:0 0 10px}
.ib2-reden{font-size:12px;color:var(--amb);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib2-wacht,.ib2-autook{margin:10px 18px 0;padding:9px 12px;border-radius:10px;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13px;line-height:1.45}
.ib2-wacht{background:rgba(168,104,15,.08);border:1px solid rgba(168,104,15,.3)} .ib2-wacht b{color:var(--amb)}
.ib2-autook{background:rgba(47,122,74,.08);border:1px solid rgba(47,122,74,.3)} .ib2-autook b{color:var(--grn)}
.ib2-autopct{margin:10px 4px 0;padding:10px;border-radius:10px;background:var(--panel);border:1px solid var(--line);display:flex;gap:8px;align-items:center;font-size:11.5px;color:var(--tx3);line-height:1.3}
.ib2-autopct b{font-size:20px;color:var(--grn)} .ib2-autopct.m{display:none}
.ib2-duim{display:inline-flex;gap:2px;margin-left:auto}
.ib2-leercijfers{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.ib2-leercijfers span{flex:1 1 110px;display:flex;flex-direction:column;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:12px;color:var(--tx3)}
.ib2-leercijfers b{font-size:20px;color:var(--tx)}
@media (max-width:860px), (max-width:1023px) and (pointer:coarse){
  .ib2-wacht,.ib2-autook{margin:10px 12px 0}
  .ib2-autopct.m{display:block;margin:0 0 8px;padding:8px 10px;font-size:12.5px} .ib2-autopct.m b{font-size:15px}
  .ib2-duim{margin-left:0}
}
.mw-server{font-weight:600;color:var(--tx)}
.mw-meer{margin:4px 0 8px} .mw-meer summary{cursor:pointer}

/* ---------- Koppel-wizard 04-10: stappen met naam en vinkje ---------- */
.wiz-stappen{display:flex;gap:6px;list-style:none;margin:0 0 18px;padding:0}
.wiz-stappen li{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.wiz-stappen li i{display:block;height:4px;border-radius:2px;background:var(--line)}
.wiz-stappen li span{font-size:11.5px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wiz-stappen li.nu i{background:var(--acc)}
.wiz-stappen li.nu span{color:var(--tx);font-weight:650}
.wiz-stappen li.af i,.wiz-stappen li.grn i{background:var(--grn)}
.wiz-stappen li.af span{color:var(--grn)}
.wiz-stappen li.amb i{background:var(--amb)}
.wiz-stappen li.rd i{background:var(--red)}
.wiz-gelukt{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:10px;background:color-mix(in srgb,var(--grn) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--grn) 35%,var(--line));font-size:14px;margin:12px 0 0}
.wiz-gelukt b{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--grn);color:#fff;font-size:13px;flex:none}
.wiz-wacht{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);font-size:13.5px;margin:12px 0 0;color:var(--tx2)}
.wiz-wacht b{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--tx3);color:#fff;font-size:13px;flex:none}
.wiz-doe{margin:0 0 14px;padding-left:20px;line-height:1.6;font-size:14px}
.wiz-doe li{margin:0 0 6px}
.wiz-groot{font-size:15px;padding:11px 18px}
.wiz-tip{font-size:13px;color:var(--tx2);margin:10px 0 0}
.wiz-opt{margin-top:14px}
.wiz-opt>summary{cursor:pointer;font-weight:600;font-size:14px;padding:6px 0}
.wiz-vink{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:12px 0 0;cursor:pointer}
.wiz-vink input{margin-top:3px;width:18px;height:18px}
@media (max-width:560px){ .wiz-stappen{gap:4px} .wiz-stappen li span{font-size:10.5px} .wiz-stappen li em{display:none} }
.wiz-stappen li em{font-style:normal}
/* 04-10: tags in Gorgias-stijl */
.ib2-tagchip{font-style:normal;display:inline-flex;align-items:center;gap:4px;font-size:11.5px;line-height:1.5;padding:1px 9px;border-radius:11px;white-space:nowrap;border:1px solid transparent;font-weight:500}
.ib2-tagchip a{cursor:pointer;opacity:.65;margin-left:2px;font-weight:700} .ib2-tagchip a:hover{opacity:1}
.ib2-tagchip.voorstel{border-style:dashed;background:transparent!important;cursor:pointer}
.ib2-tagchip.groot{font-size:13px;padding:2px 10px}
.ib2-tags{gap:6px}
.k0{background:#e7f0fb;color:#2c5c94;border-color:#c9dcf3} .k1{background:#e9f6ee;color:#2f7a4a;border-color:#c8e8d4} .k2{background:#f6eefb;color:#7a3e9c;border-color:#e6d3f2}
.k3{background:#fdf3e2;color:#9a5d08;border-color:#f3dfb8} .k4{background:#e6f6f5;color:#2b6f6b;border-color:#c5e7e4} .k5{background:#fbeef2;color:#a23a5c;border-color:#f2d2dd}
.k6{background:#eef0f4;color:#4a5160;border-color:#d9dde5} .k7{background:#f1f5e3;color:#5d6e14;border-color:#dfe8bf} .k-rood{background:rgba(180,35,24,.09);color:var(--red);border-color:rgba(180,35,24,.25)}
.ib-dot.k0{background:#3b6ea5}.ib-dot.k1{background:#2f7a4a}.ib-dot.k2{background:#8a4cb0}.ib-dot.k3{background:#c07a12}.ib-dot.k4{background:#2b6f6b}.ib-dot.k5{background:#b84a6e}.ib-dot.k6{background:#6b7280}.ib-dot.k7{background:#7a8a1e}.ib-dot.k-rood{background:var(--red)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .ib2-tagchip:not(.k-rood){filter:brightness(.92) saturate(1.1)} }
.mw-groot{display:flex;justify-content:center;width:100%;min-height:48px;font-size:15px;margin:6px 0 12px}
.ib2-meer{display:block;margin:12px auto}
.kspro-rij{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.kspro-aan{display:flex;gap:10px;align-items:flex-start;font-size:13px;cursor:pointer} .kspro-aan input{margin-top:3px}
.kspro-aan span{display:flex;flex-direction:column;gap:2px} .kspro-aan em{font-style:normal;color:var(--tx3);font-size:12.5px}
.kspro-vb{margin-top:6px} .kspro-vb summary{cursor:pointer}
.kspro-mail{margin-top:8px;padding:10px 12px;border-radius:8px;background:var(--panel2);font-size:12.5px;overflow-wrap:anywhere}
.kspro-mail pre{white-space:pre-wrap;font:12.5px/1.55 inherit;margin:6px 0 0}
.kspro-recent{margin-top:10px;display:flex;flex-direction:column;gap:2px} .kspro-recent div{display:flex;justify-content:space-between;gap:8px;border-top:1px dashed var(--line);padding-top:3px}

/* Dispute fighter → Invulgids (04-10) */
.dg-kaart .dp-pak{padding-top:2px}
.dg-gids{padding-top:6px}
.dg-blok{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:10px 0;font-size:13.5px;line-height:1.55;background:var(--panel)}
.dg-blok p{margin:4px 0}
.dg-blok ol,.dg-blok ul{margin:6px 0 2px 18px;padding:0}
.dg-sub{display:block;margin-top:8px}
.dg-eis{font-weight:550}
.dg-pod.dg-ok{border-left:4px solid var(--grn)}
.dg-pod.dg-let{border-left:4px solid var(--amb)}
.dg-pod.dg-mis{border-left:4px solid var(--red);background:color-mix(in srgb,var(--red) 7%,var(--panel))}
.dg-pod.dg-mis > b:first-child{color:var(--red)}
.dg-klaar.dg-mis{border-left:4px solid var(--red);background:color-mix(in srgb,var(--red) 7%,var(--panel))}
.dg-klaar.dg-mis > b:first-child{color:var(--red)}
.dg-klaar.dg-ok{border-left:4px solid var(--grn)}
.dg-klaar li{margin:4px 0;overflow-wrap:anywhere}
.dg-pod .dg-uplrij .hint{flex:1 1 180px}
.dg-kv{display:grid;grid-template-columns:minmax(110px,170px) 1fr;gap:4px 12px;margin-top:8px;font-size:13px}
.dg-kv > span:nth-child(odd){color:var(--tx3)}
.dg-kv > span{overflow-wrap:anywhere}
.dg-scans{margin-top:8px}
.dg-scans summary{cursor:pointer;font-weight:600}
.dg-tab{width:100%;border-collapse:collapse;font-size:12.5px;margin:6px 0;table-layout:fixed}
.dg-tab td{border-top:1px solid var(--line);padding:5px 6px 5px 0;vertical-align:top}
.dg-tab td{overflow-wrap:anywhere}
.dg-tab td:first-child{white-space:nowrap;color:var(--tx3);width:150px}
.dg-best{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line)}
.dg-best > span{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.dg-upl{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line2)}
.dg-uplrij{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
.dg-uplrij select{max-width:100%}
.dg-kop{display:block;font-size:14px;margin:16px 0 2px}
.dg-lab{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.dg-st{font-size:12px;font-weight:700;border-radius:20px;padding:1px 8px;border:1px solid}
.dg-v{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,transparent)}
.dg-a{color:var(--amb);border-color:color-mix(in srgb,var(--amb) 40%,transparent)}
.dg-n{color:var(--tx3);border-color:var(--line2)}
.dg-uit{opacity:.7}
.dg-rood{color:var(--red);font-weight:600;margin:0 0 6px 29px}
.dg-blok .dg-rood,.dg-kaart > .dp-pakdet .dg-rood{margin-left:0}
.dg-groen{color:var(--grn)}
.dg-oranje{color:var(--amb)}
.dg-w{gap:8px}
.dg-w .hint{flex:0 0 100%}
.dg-wv{font-weight:600;overflow-wrap:anywhere;min-width:0}
.dg-nvtrij{margin:10px 0 0}
@media (max-width:600px){ .dg-tab td:first-child{white-space:normal;width:84px} .dg-kv{grid-template-columns:1fr} .dg-kv > span:nth-child(odd){margin-top:4px} .dp-waarde,.dp-tekst,.dp-veld > .hint,.dg-rood{margin-left:0} .dp-check{margin-left:18px} }

.rs3-prijs{margin:8px 0 0}

/* Plus-pagina (04-10) */
.pl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px;margin-bottom:14px}
.pl-kaart{display:flex;flex-direction:column;gap:8px;min-width:0}
.pl-kaart.pl-breed{grid-column:1/-1}
.pl-kop{display:flex;align-items:center;justify-content:space-between;gap:8px}.pl-kop b{font-size:15px}
.pl-kaart .hint{margin:0}
.pl-met{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.pl-met li{display:grid;grid-template-columns:minmax(92px,auto) 1fr;gap:10px;padding:6px 0;border-top:1px solid var(--line)}
.pl-met li>span:first-child{color:var(--tx2);white-space:nowrap}
.pl-met small{display:block;color:var(--tx2);font-size:12px}
.pl-sub{font-size:13px;margin-top:4px}
.pl-ads{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.pl-ad{display:flex;flex-direction:column;gap:4px;font-size:12.5px;min-width:0}
.pl-ad img,.pl-ad .wk-geen{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:var(--bg2)}
.pl-ad b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pl-ad small{color:var(--tx2)}
.pl-lijst summary{cursor:pointer;font-size:13px;font-weight:600}
.pl-lijst ul{list-style:none;margin:8px 0 0;padding:0;max-height:260px;overflow:auto;font-size:13px}
.pl-lijst li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px solid var(--line);min-width:0}
.pl-lijst li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pl-lijst li small{color:var(--tx2);flex:none}
.pl-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pl-thumbs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.pl-hooks{margin:0;padding-left:18px;font-size:13.5px;display:flex;flex-direction:column;gap:4px}
.pl-vb{opacity:.85}
.pl-upsell{margin-bottom:14px}
@media (max-width:560px){.pl-lijst li{flex-direction:column;gap:0}.pl-met li{grid-template-columns:1fr;gap:2px}}
.pl-kop .kt-plus{position:static;flex:none}
/* 04-10: meldingen — alleen wat nu actie vraagt, belangrijkste eerst */
.ks-meldkop{font-size:12px;font-weight:600;color:var(--red);margin:4px 0 6px}
.ks-meldrij.p3{border-left:3px solid var(--red);padding-left:10px} .ks-meldrij.p2{border-left:3px solid var(--amb);padding-left:10px} .ks-meldrij.klaar{opacity:.6}
.ks-meldprio{font-size:12px;font-weight:700;color:var(--red);margin-bottom:2px}

/* ---------- Geld, Thema en Google Ads (04-10) ---------- */
.gl{display:flex;flex-direction:column;gap:14px;max-width:1180px}
.gl-kop{display:grid;grid-template-columns:minmax(220px,1fr) 2.4fr;gap:20px;align-items:center;padding:18px 20px}
.gl-mrr{display:flex;flex-direction:column;gap:2px}
.gl-mrr b{font-size:32px;letter-spacing:-.6px;line-height:1.15;font-variant-numeric:tabular-nums}
.gl-tal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 18px;margin:0}
.gl-tal div{border-left:1px solid var(--line);padding-left:12px}
.gl-tal dt{font-size:12px;color:var(--tx3)}
.gl-tal dd{margin:0;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.gl-tal .rood dd{color:var(--red)}
.gl-let{font-size:13px;color:var(--tx2);background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.gl-twee{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.gl-blok{padding:16px 18px}
.gl-blok h3{font-size:15px;margin:0 0 10px}
.gl-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.gl-lijst>li{padding:10px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.gl-lijst>li:first-child{border-top:none;padding-top:2px}
.gl-r1{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:space-between}
.gl-r1 b{min-width:0;overflow-wrap:anywhere}
.gl-bedrag{font-weight:600;font-variant-numeric:tabular-nums}
.gl-reden{font-size:13px;color:var(--red)}
.gl-acties{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.gl-link{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}
.gl-link input{flex:1 1 260px;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.gl-link .hint{flex-basis:100%}
.gl-stud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.gl-stud>li:nth-child(2){border-top:none;padding-top:2px}
.gl-afftabel{display:flex;flex-direction:column}
.gl-ah,.gl-ar{display:grid;grid-template-columns:1.3fr 1.2fr 1.2fr 1.1fr .7fr;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:13px}
.gl-ah{border-top:none;font-size:12px;color:var(--tx3);padding-top:0}
.gl-an{display:flex;flex-direction:column}
.gl-an em{font-style:normal;color:var(--tx3);font-size:12px}
.gl-ja{color:var(--grn);font-weight:600}
.gl-tot{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.gl-mistchips{display:flex;gap:6px;flex-wrap:wrap}
.gl-mist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.gl-mist>li:nth-child(2){border-top:none;padding-top:2px}
.gl-voet{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media (max-width:900px){
  .gl-kop{grid-template-columns:1fr;gap:14px;padding:16px}
  .gl-tal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gl-twee,.gl-stud,.gl-mist{grid-template-columns:1fr}
  .gl-stud>li:nth-child(2),.gl-mist>li:nth-child(2){border-top:1px solid var(--line);padding-top:10px}
  .gl-ah{display:none}
  .gl-ar{grid-template-columns:1fr;gap:4px}
  .gl-ar>span[data-l]::before{content:attr(data-l) ": ";color:var(--tx3);font-size:12px}
  .gl-tot{text-align:left}
}
/* Thema */
.th{display:flex;flex-direction:column;gap:14px;max-width:1180px}
.th-blok{padding:16px 18px}
.th-blok h3{font-size:15px;margin:0 0 10px}
.th-winkelbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.th-stappen{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.th-stappen li{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--tx3);padding:5px 10px 5px 5px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}
.th-stappen li span{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--panel2);border:1px solid var(--line)}
.th-stappen li.klaar{color:var(--grn)}
.th-stappen li.klaar span{background:var(--grn);color:#fff;border-color:var(--grn)}
.th-stappen li.nu{color:var(--tx);border-color:var(--tx2)}
.th-let{border-color:rgba(168,104,15,.35)}
/* 12-10 (taak thema-veilig/coördinator namens Jairo): de thema's-lijst mag kleiner/inklapbaar zijn (de kaart
   "Thema bijwerken" is de eerste, duidelijke actie op deze pagina; zie themaPagina() in app.js). */
.th-themaslijst>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.th-themaslijst>summary::-webkit-details-marker{display:none}
.th-themaslijst>summary::before{content:'▸';font-size:11px;color:var(--tx3);transition:transform .15s}
.th-themaslijst[open]>summary::before{transform:rotate(90deg)}
.th-themaslijst>ul{margin-top:10px}
/* De inklapbare detaillijsten op de update-kaart zelf (handmatig nakijken, bestanden, notities) — standaard dicht. */
.th-details{margin-top:8px}
.th-details>summary{cursor:pointer;list-style:none;font-size:12.5px;color:var(--tx2)}
.th-details>summary::-webkit-details-marker{display:none}
.th-details>summary::before{content:'▸ ';color:var(--tx3)}
.th-details[open]>summary::before{content:'▾ '}
.th-details ul{margin:6px 0 0 18px;font-size:12.5px}
.th-ol{margin:8px 0 12px 18px;display:flex;flex-direction:column;gap:5px;font-size:13.5px}
.th-terug{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.th-terug>div{display:flex;flex-direction:column}
.th-themas>li.on{background:var(--panel2);margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:8px}
.th-split{display:grid;grid-template-columns:260px minmax(0,1fr);gap:14px;align-items:start}
.th-links{display:flex;flex-direction:column;gap:8px;min-width:0}
.th-zoek{width:100%}
.th-bestanden{list-style:none;margin:0;padding:0;max-height:460px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.th-bestanden button{display:block;width:100%;text-align:left;padding:6px 10px;font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--tx2);overflow-wrap:anywhere}
.th-bestanden button:hover{background:var(--hover)}
.th-bestanden button.on{background:var(--panel2);color:var(--tx);font-weight:600}
.th-rechts{min-width:0;display:flex;flex-direction:column;gap:8px}
.th-bestandkop{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.th-code{width:100%;min-height:420px;resize:vertical;font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;tab-size:2;white-space:pre;overflow:auto;padding:10px 12px;border:1px solid var(--line2);border-radius:8px;background:var(--panel);color:var(--tx)}
.th-code[readonly]{background:var(--panel2);color:var(--tx2)}
.th-diff{border:1px solid var(--line);border-radius:8px;max-height:360px;overflow:auto;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
.th-dl{display:grid;grid-template-columns:44px 16px minmax(0,1fr);padding:0 8px}
.th-dl code{white-space:pre-wrap;overflow-wrap:anywhere}
.th-ln{color:var(--tx3);text-align:right;padding-right:8px}
.th-plus{background:rgba(47,122,74,.12)}
.th-min{background:rgba(180,35,24,.10)}
.th-sep{color:var(--tx3);display:block;padding:2px 8px}
@media (max-width:900px){
  .th-stappen{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .th-stappen li{flex:0 0 auto}
  .th-split{grid-template-columns:1fr}
  .th-bestanden{max-height:220px}
  .th-code{min-height:300px}
}
/* Google Ads */
.ga-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:4px 0 12px}
.ga-form select,.ga-form input{max-width:100%}
.ga-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:6px 0}
.ga-lbl{font-size:12px;color:var(--tx3);min-width:130px}
.ga-chip{padding:5px 11px;border:1px solid var(--line2);border-radius:20px;font-size:13px;background:var(--panel);color:var(--tx2)}
.ga-chip.on{background:var(--tx);color:var(--panel);border-color:var(--tx)}
.ga-titels{margin-top:12px}
.ga-prompt{margin-top:12px}
.ga-prompt summary{cursor:pointer;font-weight:600;font-size:13.5px}
.ga-prompt pre{white-space:pre-wrap;font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:8px 0}
.ga-gmckop{margin:4px 0 6px;overflow-wrap:anywhere}
.ga-checks>li.ga-st-fout{box-shadow:inset 3px 0 0 var(--red);padding-left:10px}
.ga-checks>li.ga-st-let_op{box-shadow:inset 3px 0 0 var(--amb);padding-left:10px}
.ga-bewijs{overflow-wrap:anywhere}
.ga-feed{display:flex;flex-direction:column}
.ga-fh,.ga-fr{display:grid;grid-template-columns:minmax(0,2.6fr) .8fr .6fr .6fr .6fr 1.1fr;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:13px;align-items:start;font-variant-numeric:tabular-nums}
.ga-fh{border-top:none;font-size:12px;color:var(--tx3);padding-top:0}
.ga-fn{display:flex;flex-direction:column;min-width:0}
.ga-fn b{overflow-wrap:anywhere}
.ga-fn em{font-style:normal;color:var(--tx3);font-size:12px}
.ga-kal{display:flex;flex-direction:column}
.ga-kr{display:grid;grid-template-columns:minmax(0,1.2fr) 200px minmax(0,2fr);gap:14px;padding:10px 0;border-top:1px solid var(--line);align-items:start}
.ga-kr:first-child{border-top:none}
.ga-kr.later{opacity:.75}
.ga-kn{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.ga-mnd{display:grid;grid-template-columns:repeat(12,1fr);gap:2px}
.ga-mnd i{font-style:normal;font-size:10.5px;text-align:center;padding:3px 0;border-radius:4px;background:var(--panel2);color:var(--tx3)}
.ga-mnd i.p{background:rgba(47,122,74,.22);color:var(--tx)}
.ga-mnd i.nu{outline:1.5px solid var(--tx);outline-offset:-1.5px}
.ga-kw{margin:0;display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.ga-kw div{display:grid;grid-template-columns:56px minmax(0,1fr);gap:6px}
.ga-kw dt{color:var(--tx3)}
.ga-kw dd{margin:0}
@media (max-width:900px){
  .ga-fh{display:none}
  .ga-fr{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px}
  .ga-fn{grid-column:1/-1}
  .ga-fr>span[data-l]::before{content:attr(data-l) ": ";color:var(--tx3);font-size:12px}
  .ga-kr{grid-template-columns:1fr;gap:6px}
  .ga-lbl{min-width:0;flex-basis:100%}
}
.ib2-samnl{margin:10px 18px 0;padding:10px 12px;border-radius:10px;background:rgba(59,110,165,.07);border:1px solid rgba(59,110,165,.25);font-size:13.5px;line-height:1.5;display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}
.ib2-samnl b{font-size:12.5px;font-weight:600;color:var(--blu,var(--acc))}
.ib2-samnl.voorlopig{background:var(--panel2);border-color:var(--line)} .ib2-samnl.voorlopig b{color:var(--tx3)}
@media (max-width:860px), (max-width:1023px) and (pointer:coarse){ .ib2-samnl{margin:10px 12px 0} }

/* ---------- UX-audit 04-10 (alleen weergave) ----------
   Contrast, focus, tikgrootte, "Bezig…"-stand, korte uitleg met "Meer uitleg", iconen in plaats van emoji. */
/* Contrast: tellers in subtabs en lege verzendtegels haalden geen 4,5:1. */
.subtabs button .n{opacity:.92}
.vz-tegel.leeg{opacity:1;background:transparent}
.vz-tegel.leeg b,.vz-tegel.leeg .vz-tn{color:var(--tx3)}
.vz-tegel.leeg small{color:var(--tx3)}
/* Focus: ook links, uitklappers en keuzelijsten; in de donkere zijbalk een lichte ring (de accentkleur viel daar weg). */
a:focus-visible,summary:focus-visible,select:focus-visible,[role="button"]:focus-visible,[role="tab"]:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
.pside .pnav:focus-visible,.pside button:focus-visible,.phead .brand a:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
/* Tikgrootte: minstens 24px (WCAG 2.2), zonder dat iets verschuift. */
.pmain summary{min-height:24px}
.vink{position:relative}
.vink::after,.upl-x::after{content:'';position:absolute;inset:-7px}
.pmain .lnk{min-height:24px;display:inline-flex;align-items:center}
.rs4-tab thead th button{min-height:24px}
/* "Bezig…": de knop wacht op de server. */
.is-bezig{pointer-events:none;cursor:progress;opacity:.72;transition:opacity .15s ease-out}
/* Lange uitleg: eerst één regel. */
.ux-kort{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ux-meer{display:inline-flex;align-items:center;min-height:24px;margin:-2px 0 8px;padding:0;background:none;border:0;color:var(--tx2);font-size:12.5px;font-weight:550;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.ux-meer:hover{color:var(--tx)}
/* Iconen die emoji vervangen. */
.crb-d svg{display:block;margin:auto;width:18px;height:18px}
.crb-d[aria-pressed="true"][data-v="1"]{color:var(--grn)}
.wiz-kaart b svg{vertical-align:-3px;margin-right:5px}
.upl-mknop i svg{width:15px;height:15px;vertical-align:-3px}
.rs2-chip svg{width:15px;height:15px}
.rs2-chip svg{vertical-align:-3px;margin-right:2px}
.gl-nw{white-space:nowrap}
/* "Nieuwe versie"-balk: op de telefoon was hij half zo breed als het scherm (4 regels tekst over de inhoud). */
#nieuwbalk{width:max-content;max-width:calc(100vw - 24px)}

/* Comp-watch-pagina (04-10) */
.cw-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.cw-zij{display:flex;flex-direction:column;gap:14px;position:sticky;top:12px}
.cw-zij .pcard{display:flex;flex-direction:column;gap:8px}
.cw-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.cw-filters select{max-width:260px}
.cw-dag{font-size:12px;font-weight:650;color:var(--tx2);margin:14px 0 8px}
.cw-tl .cw-dag:first-child{margin-top:0}
.cw-item{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;padding:12px;margin-bottom:10px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.cw-item.gezien{opacity:.72}
.cw-beeld{position:relative;display:block;width:120px;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--bg2)}
.cw-beeld img{width:100%;height:100%;object-fit:cover;display:block}
.cw-leeg{display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--tx2)}
.cw-video{position:absolute;left:6px;bottom:6px;font-size:11px;font-weight:650;padding:2px 6px;border-radius:99px;background:rgba(0,0,0,.65);color:#fff}
.cw-tekst{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:13.5px}
.cw-tekst p{margin:0;color:var(--tx2);line-height:1.45;overflow-wrap:anywhere}
.cw-r1{display:flex;align-items:center;gap:8px;justify-content:space-between}
.cw-r2{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.cw-r2 small{color:var(--tx2);font-size:12px}
.cw-kop{font-size:13.5px;overflow-wrap:anywhere}
.cw-acties{display:flex;flex-wrap:wrap;gap:8px}
.cw-wlijst{list-style:none;margin:0;padding:0;max-height:420px;overflow:auto;font-size:13px}
.cw-wlijst li{padding:6px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:1px}
.cw-wlijst small{color:var(--tx2);font-size:11.5px}
.cw-wk{all:unset;cursor:pointer;display:flex;justify-content:space-between;gap:8px;font-weight:600}
.cw-wk span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-wk:hover span:first-child{text-decoration:underline}
.cw-preview{opacity:.6;filter:grayscale(.3);pointer-events:none;margin-top:14px}
.cw-vb .cw-beeld{background:linear-gradient(135deg,var(--bg2),var(--line))}
.chip.c-acc{background:var(--acc);color:#fff}
@media (max-width:900px){.cw-wrap{grid-template-columns:1fr}.cw-zij{position:static}}
@media (max-width:560px){.cw-item{grid-template-columns:84px minmax(0,1fr);gap:10px;padding:10px}.cw-beeld{width:84px}.cw-filters select{max-width:100%;flex:1 1 100%}}
.cw-wrap>*{min-width:0}
.cw-filters .rs3-seg{max-width:100%;overflow-x:auto;flex-wrap:nowrap}
.cw-zij .pl-met li{grid-template-columns:1fr;gap:2px}
.cw-tekst>.chip{align-self:flex-start}

/* ---------- UX 04-10, ronde 2 (Jairo): één tabbladstijl, statusbalk, "Nu doen", skelet, rustiger kop ----------
   Alleen weergave. Alle tabbladen op paginaniveau (subtabs, tabbalk, Verzending, Research) zien er hetzelfde uit:
   tekst met een streep eronder bij het gekozen tabblad. Filters (periode, markt, categorie) blijven segmenten. */
main.pmain :is(.subtabs,.tabbalk,.vz-tabs,.rs3-navin,.dtabs){display:flex;flex-wrap:nowrap;gap:2px;width:auto;max-width:100%;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;margin:0 0 18px;padding:0;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
main.pmain :is(.subtabs,.tabbalk,.vz-tabs,.rs3-navin,.dtabs)::-webkit-scrollbar{display:none}
.rs3-nav main.pmain .rs3-navin,main.pmain .rs3-nav .rs3-navin{margin:0;border-bottom:0}
main.pmain :is(.subtabs,.tabbalk,.vz-tabs,.rs3-navin,.dtabs) > :is(button,a){flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:auto;min-height:42px;
  padding:0 12px;margin:0 0 -1px;background:none;border:0;border-bottom:2px solid transparent;border-radius:0;box-shadow:none;color:var(--tx2);
  font:inherit;font-size:14px;font-weight:550;white-space:nowrap;cursor:pointer;transition:color .15s ease,border-color .15s ease}
main.pmain :is(.subtabs,.tabbalk,.vz-tabs,.rs3-navin,.dtabs) > :is(button,a):hover{color:var(--tx);background:none}
main.pmain :is(.subtabs,.tabbalk,.vz-tabs,.rs3-navin,.dtabs) > :is(button.on,button[aria-selected="true"],a.on){color:var(--tx);font-weight:650;
  background:none;border-bottom-color:var(--acc);box-shadow:none}
main.pmain :is(.subtabs,.tabbalk,.vz-tabs,.rs3-navin,.dtabs) > button .n,main.pmain .rs3-navin > button > span{font-size:12px;font-weight:500;color:var(--tx3);opacity:1;margin-left:2px}
main.pmain .vz-tabs > button span{font:inherit;color:inherit}
main.pmain :is(.subtabs,.tabbalk,.vz-tabs,.rs3-navin,.dtabs) > button b{font-weight:600;color:var(--tx2)}
main.pmain :is(.subtabs,.tabbalk,.vz-tabs,.rs3-navin,.dtabs) > button:focus-visible{outline:2px solid var(--acc);outline-offset:-2px;border-radius:4px}
@media (max-width:860px), (max-width:1023px) and (pointer:coarse){
  main.pmain :is(.subtabs,.tabbalk,.vz-tabs,.rs3-navin,.dtabs){gap:0;padding-right:0;margin-left:-2px}
  main.pmain :is(.subtabs,.tabbalk,.vz-tabs,.rs3-navin,.dtabs) > :is(button,a){min-height:44px;padding:0 11px;font-size:14.5px}
}
/* Zichtbare randen bij schuivende rijen (telefoon): een duidelijkere vervaging en een pijltje aan de kant waar nog iets zit. */
@media (max-width:860px), (max-width:1023px) and (pointer:coarse){
  :is(.seg,.tabbalk,.subtabs,.dtabs,.upl-tabs,.rs3-navin,.lb-seg,.rs3-seg,.cr-hist-filter,.vz-tabs):not(.meind){
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)!important;mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)!important}
  :is(.seg,.tabbalk,.subtabs,.dtabs,.upl-tabs,.rs3-navin,.lb-seg,.rs3-seg,.cr-hist-filter,.vz-tabs).mlinks:not(.meind){
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 44px),transparent)!important;mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 44px),transparent)!important}
  :is(.seg,.tabbalk,.subtabs,.dtabs,.upl-tabs,.rs3-navin,.lb-seg,.rs3-seg,.cr-hist-filter,.vz-tabs).mlinks.meind{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 36px)!important;mask-image:linear-gradient(90deg,transparent,#000 36px)!important}
  :is(.seg,.tabbalk,.subtabs,.dtabs,.upl-tabs,.rs3-navin,.lb-seg,.rs3-seg,.cr-hist-filter,.vz-tabs).meind:not(.mlinks){-webkit-mask-image:none!important;mask-image:none!important}
}

/* Eén dunne statusbalk onder de titel (Start en Overzicht). */
.uxbalk{display:flex;align-items:flex-start;gap:10px;margin:4px 0 16px;padding:7px 10px 7px 12px;border:1px solid color-mix(in srgb,var(--amb) 38%,var(--line));
  background:color-mix(in srgb,var(--amb) 7%,var(--panel));border-radius:10px;font-size:13px;line-height:1.4}
.uxb-d{flex:1;min-width:0}
.uxb-d > summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;min-height:30px}
.uxb-d > summary::-webkit-details-marker{display:none}
.uxb-rij{display:flex;align-items:center;gap:9px;min-width:0;flex:1;min-height:30px}
.uxb-d > .uxb-rij + .uxb-rij,.uxb-d[open] > .uxb-rij{border-top:1px solid color-mix(in srgb,var(--amb) 22%,var(--line));padding-top:6px;margin-top:6px;flex-wrap:wrap}
.uxb-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--amb)}
.uxb-rij.hoog .uxb-dot{background:var(--red)}
.uxb-t{display:flex;gap:8px;align-items:baseline;min-width:0;flex:1}
.uxb-t b{font-weight:650;color:var(--tx);white-space:nowrap}
.uxb-t span{color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.uxb-d[open] .uxb-t span,.uxb-d > .uxb-rij .uxb-t span{white-space:normal}
.uxb-d > summary .uxb-t span{white-space:nowrap}
.uxb-n{flex:0 0 auto;font-size:12px;font-weight:650;color:var(--tx2);padding:2px 8px;border-radius:999px;border:1px solid var(--line2);background:var(--panel)}
.uxb-d[open] .uxb-n{background:var(--hover)}
.uxb-k{display:flex;gap:6px;flex:0 0 auto;align-items:center;flex-wrap:wrap}
.uxb-k1{padding-top:1px}
@media (max-width:860px), (max-width:1023px) and (pointer:coarse){
  .uxbalk{flex-wrap:wrap;padding:8px 10px}
  .uxb-t{flex-direction:column;gap:1px}
  .uxb-t span,.uxb-d > summary .uxb-t span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .uxb-k1{width:100%;padding-left:17px}
}

/* "Nu doen" bovenaan Start. */
.ux-startzin{color:var(--tx2);margin:0 0 14px;max-width:680px;line-height:1.55}
.ux-nudoen{display:flex;flex-direction:row;align-items:center;gap:18px;padding:18px 20px;margin:0 0 18px;border:1px solid var(--line2);
  box-shadow:0 1px 2px rgba(20,20,20,.05),0 6px 18px -10px rgba(20,20,20,.18)}
.ux-nd-t{flex:1;min-width:0}
.ux-nd-t h2{font-size:17px;font-weight:650;letter-spacing:-.2px;margin:0;line-height:1.3}
.ux-nd-t p{margin:4px 0 0;color:var(--tx2);font-size:13.5px;line-height:1.5}
.ux-nd-k{flex:0 0 auto}
.ux-nd-k .btn{min-height:40px;padding:0 18px;font-size:14px}
.ux-nudoen-sb .setupbalk{margin-bottom:18px}
.ux-start-lager{margin-top:22px;display:grid;gap:0}
.ux-start-lager > *{margin-top:0}
@media (max-width:860px), (max-width:1023px) and (pointer:coarse){
  .ux-nudoen{flex-direction:column;align-items:stretch;gap:12px;padding:16px}
  .ux-nd-k .btn{width:100%;justify-content:center;min-height:46px}
}

/* Skelet tijdens het laden. */
.ux-skel{display:grid;gap:10px;padding:2px 0}
.ux-sk-tekst{font-size:13px;color:var(--tx2);margin-bottom:2px}
.ux-skel i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--panel2) 0%,var(--hover) 40%,var(--panel2) 80%);background-size:300% 100%;
  animation:uxsk 1.3s ease-in-out infinite}
.ux-skel i:nth-of-type(3n+1){height:16px}
@keyframes uxsk{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.ux-skel i{animation:none}}
.ux-skelvak{display:block;text-align:left;padding:16px}

/* Kop: één accountknop (Uitloggen staat in Mijn account) en een stille knop bij een nieuwe versie. */
.ux-accknop{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:3px 12px 3px 4px;border:1px solid var(--line);border-radius:999px;
  background:var(--panel);color:var(--tx);font-size:12.5px;font-weight:600;cursor:pointer}
.ux-accknop:hover{background:var(--hover);border-color:var(--line2)}
.ux-nieuw{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:none;
  color:var(--tx2);font-size:12px;font-weight:550;cursor:pointer;white-space:nowrap}
.ux-nieuw::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--grn)}
.ux-nieuw:hover{color:var(--tx);border-color:var(--line2)}
.pmkop .ux-nieuw{margin-left:auto;min-height:32px}
.ux-uitlog{width:100%;justify-content:center;margin-top:16px}
#nieuwbalk{box-shadow:0 4px 14px rgba(0,0,0,.14);font-size:12.5px;padding:6px 6px 6px 12px}

/* Meldingen: "komt nergens aan" en de pushknop in één blok. */
.vzm-samen{margin-top:10px}
.vzm-samen .hint{color:inherit}

/* Hulp-knop op de telefoon: alleen het rondje, rechts boven de onderbalk. */
@media (max-width:860px), (max-width:1023px) and (pointer:coarse), (max-height:500px) and (pointer:coarse){
  .hulp-fab{min-height:44px;width:44px;padding:0;justify-content:center;gap:0;right:12px}
  .hulp-fab > span:not(.hulp-fab-ico){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hulp-fab .hulp-fab-ico{margin:0}
  #portaal.hulp-fab-aan .pmain{padding-bottom:calc(var(--tbh,0px) + 64px)!important}
}
/* Verzending: op de telefoon stond er "aandacht"; met de nieuwe tabbladstijl past het hele woord. */
main.pmain .vz-tabs .vz-lang{display:inline!important}
/* Eén uitlegpatroon: ook op de telefoon "Zo werkt deze pagina" direct onder de titel (stond onderaan de pagina). */
@media (max-width:860px), (max-width:1023px) and (pointer:coarse), (max-height:500px) and (pointer:coarse){
  .pmain > .pagina-uitleg,.pmain > .pagina-uitleg.eerste{order:0;margin:0 0 12px}
}

/* 04-10: Profitz-weergave in de ROAS-sheet: schakelaar 'Tel per collectie', fixes-teller en Advertenties koppelen.
   Zelfde tokens en radius als de rest van de hub (pcard 12-14px, seg 9px); contrast via --tx/--tx2, status via chips. */
.rs-tel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.rs-tel .seg button{font-weight:600}
.rs-tel .seg button.on{color:var(--tx)}
.rs-fixes{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:700;line-height:16px;background:var(--red);color:#fff}
.rs-fixlijst{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.rs-fixlijst li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.rs-fixlijst li > b{min-width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:13px}
.rs-fixlijst li.rsf-open > b{background:rgba(196,48,43,.12);color:var(--red)}
.rs-fixlijst li.rsf-ok > b{background:rgba(47,122,74,.12);color:var(--grn)}
.rs-fixlijst li > span{flex:1;font-size:13.5px;color:var(--tx)}
.rsm-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;align-items:start}
.rsm-grid > .pcard{margin-bottom:0!important}
.rsm-balk{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.rsm-balk .inp{flex:1 1 180px;min-width:0}
.rsm-lijst{display:grid}
.rsm-rij{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(160px,220px);gap:10px;align-items:center;padding:10px 2px;border-top:1px solid var(--line)}
.rsm-rij:first-child{border-top:0}
.rsm-naam{min-width:0}
.rsm-naam b{display:block;font-size:13.5px;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsm-naam small{display:block;font-size:12px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsm-naam small.rsm-doel{color:var(--tx3)}
.rsm-rij select{width:100%;min-width:0}
.rsm-rechts{display:grid;margin-top:8px}
.rsm-r{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.rsm-r:first-child{border-top:0}
.rsm-r b{font-size:13.5px;color:var(--tx)}
.rsm-r small{display:block;font-size:12px;color:var(--tx2)}
.rsm-rw{text-align:right;flex:0 0 auto}
@media (max-width:860px){
  .rsm-grid{grid-template-columns:1fr}
  .rsm-rij{grid-template-columns:minmax(0,1fr) auto}
  .rsm-rij select{grid-column:1 / -1}
  .rs-tel .seg{width:100%}
  .rs-tel .seg button{flex:1 1 0;white-space:normal;line-height:1.2}
}

/* ============ Agent OS 04-10: detail-lade, managers, kennisbank, servers, schermvullende wereld ============ */
:root{--aos-groen:#3ccf7c;--aos-blauw:#6aa6ff;--aos-oranje:#f0a63a;--aos-rood:#ff6b6e;--aos-grijs:#8f9ab0;--aos-lade:cubic-bezier(.32,.72,0,1)}
html[data-theme="light"]{--aos-groen:#17803f;--aos-blauw:#1f5fd1;--aos-oranje:#a85d00;--aos-rood:#c2272d;--aos-grijs:#667085}
.aosx-pil,.aosx-dot,.aosx-mkaart,.aosx-dienst,.aosx-mruns i{--c:var(--aos-grijs)}
.aosx-pil.s-bezig,.aosx-dot.s-bezig,.aosx-mkaart.s-bezig,.aosx-dienst.s-bezig,.aosx-mruns i.s-bezig{--c:var(--aos-groen)}
.aosx-pil.s-klaar,.aosx-dot.s-klaar,.aosx-mkaart.s-klaar,.aosx-dienst.s-klaar,.aosx-mruns i.s-klaar{--c:var(--aos-blauw)}
.aosx-pil.s-wacht,.aosx-dot.s-wacht,.aosx-mkaart.s-wacht,.aosx-dienst.s-wacht,.aosx-mruns i.s-wacht{--c:var(--aos-oranje)}
.aosx-pil.s-fout,.aosx-dot.s-fout,.aosx-mkaart.s-fout,.aosx-dienst.s-fout,.aosx-mruns i.s-fout{--c:var(--aos-rood)}
.aosx-pil{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;padding:3px 9px 3px 8px;border-radius:999px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);white-space:nowrap}
.aosx-pil i,.aosx-dot{width:8px;height:8px;border-radius:50%;background:var(--c);flex:0 0 8px;display:inline-block}
.aosx-pil.s-bezig i,.aosx-dot.s-bezig,.aos-tagdot.l-bezig{animation:aosled 1.6s ease-in-out infinite}
/* de lade */
.aosl{position:fixed;inset:0;z-index:10050;display:none}
.aosl-bg{position:absolute;inset:0;background:rgba(8,10,16,.46);opacity:0;transition:opacity 220ms ease}
.aosl.open .aosl-bg{opacity:1}
.aosl-paneel{position:absolute;top:0;right:0;bottom:0;width:min(560px,100vw);background:var(--panel);border-left:1px solid var(--line);box-shadow:0 0 50px rgba(0,0,0,.28);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform 280ms var(--aos-lade);outline:none;overflow:hidden}
.aosl.open .aosl-paneel{transform:none}
#aosladeinh{display:flex;flex-direction:column;min-height:0;flex:1}
.aosl-kop{display:flex;gap:12px;align-items:flex-start;padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.aosl-kop>div{flex:1;min-width:0}
.aosl-kop h2{font-size:18px;line-height:1.3;letter-spacing:-.01em;margin:7px 0 0;word-break:break-word}
.aosl-kop p{color:var(--tx2);font-size:13px;margin-top:3px}
.aosl-boven{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tx3);flex-wrap:wrap}
.aosl-x{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--tx);font-size:22px;line-height:1;cursor:pointer;flex:0 0 40px;transition:transform 140ms ease-out}
.aosl-x:active,.aos-volknop:active,.aosx-mkaart:active,.aosl-lijstrij:active{transform:scale(.97)}
.aosl-body{overflow:auto;padding:16px 20px 32px;flex:1;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.aosl-feiten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;margin:0 0 14px}
.aosl-feiten>div{min-width:0}.aosl-feiten>div:first-child{grid-column:1/-1}
.aosl-feiten dt{font-size:11.5px;color:var(--tx3);margin-bottom:2px}
.aosl-feiten dd{font-size:13.5px;margin:0;word-break:break-word;line-height:1.45}
.aosl-feiten code{font-size:12px}
.aosl-knoppen{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 16px}
.aosl-blok{border-top:1px solid var(--line);padding:14px 0 6px}
.aosl-blok h3{font-size:13px;font-weight:650;margin:0 0 9px;display:flex;gap:8px;align-items:baseline}
details.aosl-blok>summary{list-style:none;cursor:pointer;min-height:32px}details.aosl-blok>summary::-webkit-details-marker{display:none}
details.aosl-blok>summary h3::after{content:'+';margin-left:auto;color:var(--tx3);font-weight:500}details.aosl-blok[open]>summary h3::after{content:'−'}
.aosl-blok.fout h3{color:var(--aos-rood)}
.aosl-blok.fout>p{font-size:13px;color:var(--tx2);margin-bottom:6px}
.aosl-run{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--panel2)}
.aosl-run>summary{display:flex;align-items:center;gap:9px;padding:10px 12px;cursor:pointer;list-style:none;min-height:44px}
.aosl-run>summary::-webkit-details-marker{display:none}
.aosl-run>summary b{font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.aosl-run>summary em{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--tx3);white-space:nowrap}
.aosl-run>div{padding:0 12px 12px}
.aosl-uit{font-size:13px;color:var(--tx2);margin:0 0 8px;line-height:1.45;word-break:break-word}
.aosl-stappen{list-style:none;font-size:12px;border-left:2px solid var(--line2);padding:0 0 0 10px;margin:6px 0 10px}
.aosl-stappen li{padding:2px 0;color:var(--tx2)}.aosl-stappen li span{color:var(--tx3);margin-right:8px;font-variant-numeric:tabular-nums}
.aosl-md{font-size:13.5px;line-height:1.55;word-break:break-word}
.aosl-pre{white-space:pre-wrap;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--panel2);padding:10px;border-radius:8px;margin:0;color:var(--tx2)}
.aosl-log{max-height:320px;overflow:auto}
.aosl-logrij{font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--line);color:var(--tx2);word-break:break-word;line-height:1.4}
.aosl-logrij span{display:block;color:var(--tx3);font-size:11px;font-variant-numeric:tabular-nums}
.aosl-logrij.n-fout{color:var(--aos-rood)}.aosl-logrij.n-waarschuwing{color:var(--aos-oranje)}
.aosl-lijstrij{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:1px solid var(--line);background:var(--panel2);border-radius:10px;padding:9px 12px;margin-bottom:6px;color:var(--tx);font:inherit;cursor:pointer;min-height:44px;transition:transform 140ms ease-out,border-color 150ms ease}
.aosl-lijstrij b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.aosl-lijstrij em{margin-left:auto;font-style:normal;color:var(--tx3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.aosl-beelden{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;margin:10px 0}
.aosl-beelden img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block;background:var(--panel2)}
.aosl-let{font-size:13px;padding:10px 12px;border-radius:10px;margin-bottom:12px;color:var(--aos-oranje);background:color-mix(in srgb,var(--aos-oranje) 12%,transparent)}
.aosl-form .f{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.aosl-form .f>span{font-size:12px;color:var(--tx2)}
.aosl-form .f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.aosl-form textarea{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical}
.aosl-sk{display:flex;flex-direction:column;gap:8px;flex:1}.aosl-sk i,.aosl-skel i,.aosx-skel i{display:block;height:14px;border-radius:7px;background:var(--panel2);animation:aosled 1.4s ease-in-out infinite}
.aosl-sk i:first-child{width:90px}.aosl-sk i:last-child{width:70%;height:20px}
.aosl-skel,.aosx-skel{display:flex;flex-direction:column;gap:12px;padding:16px}.aosl-skel i:nth-child(2n),.aosx-skel i:nth-child(2n){width:72%}.aosx-skel i{height:52px;border-radius:12px}
@media (hover:hover) and (pointer:fine){.aosl-lijstrij:hover,.aosx-mkaart:hover,.aosx-routrij:hover{border-color:var(--line2)}.aosx-krij:hover,.aosx-routrij:hover{background:var(--panel2)}.aosl-x:hover{border-color:var(--line2)}}
@media (max-width:700px){
  .aosl-paneel{top:auto;left:0;right:0;width:100%;max-height:92dvh;border-left:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;transform:translateY(100%);padding-bottom:env(safe-area-inset-bottom)}
  .aosl-kop{padding:16px 16px 12px}.aosl-body{padding:14px 16px 28px}
  .aosl-feiten{grid-template-columns:minmax(0,1fr)}
  .aosl-form .f2{grid-template-columns:1fr}
  .aosl-form .inp,.aosl-form textarea{font-size:16px}
}
@media (prefers-reduced-motion: reduce){
  .aosl-paneel{transform:none!important;opacity:0;transition:opacity 180ms ease}.aosl.open .aosl-paneel{opacity:1}
  .aosx-pil i,.aosx-dot,.aosl-sk i,.aosl-skel i,.aosx-skel i{animation:none!important}
}
/* brede tabbladen zonder zijkolom */
.aos-grid.breed{grid-template-columns:minmax(0,1fr)!important}.aos-grid.breed .aos-rechts{display:none}
.aosx-leeg{padding:28px 16px;text-align:center;color:var(--tx2)}.aosx-leeg b{display:block;color:var(--tx);margin-bottom:4px}.aosx-leeg p{font-size:13px}
.aosx-intro{padding:16px 16px 0;display:flex;flex-direction:column;gap:3px}.aosx-intro b{font-size:15px}.aosx-intro span{font-size:13px;color:var(--tx3)}
/* managers */
.aosx-man{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;padding:14px 16px 18px}
.aosx-mkaart{display:flex;flex-direction:column;gap:8px;text-align:left;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--tx);font:inherit;cursor:pointer;min-width:0;
  transition:transform 160ms ease-out,border-color 150ms ease}
.aosx-mkaart.s-bezig,.aosx-mkaart.s-fout{border-color:color-mix(in srgb,var(--c) 45%,var(--line))}
.aosx-mkop{display:flex;justify-content:space-between;align-items:center;gap:8px}
.aosx-team{font-size:11.5px;color:var(--tx2);border:1px solid var(--line);border-radius:999px;padding:2px 9px;white-space:nowrap}
.aosx-mtitel{font-size:15px;line-height:1.3}.aosx-msub{font-size:12.5px;color:var(--tx3);margin-top:-5px}
.aosx-mfeit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:2px 0 0;padding:9px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.aosx-mfeit dt{font-size:11px;color:var(--tx3)}.aosx-mfeit dd{font-size:12.5px;margin:0;word-break:break-word}
.aosx-muit{font-size:12.5px;color:var(--tx2);line-height:1.45;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.aosx-mruns{display:flex;gap:4px;align-items:center;min-height:14px}.aosx-mruns i{width:14px;height:6px;border-radius:3px;background:var(--c)}
.aosx-mruns em{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--tx3)}
/* kennisbank */
.aosx-kbalk{display:flex;flex-wrap:wrap;gap:8px;padding:12px;border-bottom:1px solid var(--line);align-items:center;background:var(--panel)}
.aosx-kbalk input{flex:1 1 260px;min-width:0}.aosx-kbalk select{flex:0 1 190px;min-width:0}.aosx-kbalk .hint{margin-left:auto;font-variant-numeric:tabular-nums}
.aosx-klijst{max-height:calc(100dvh - 330px);min-height:380px;overflow:auto;overscroll-behavior:contain}
.aosx-krij{display:flex;flex-direction:column;gap:6px;width:100%;text-align:left;padding:12px 16px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--tx);font:inherit;cursor:pointer;transition:background-color 120ms ease}
.aosx-krij b{font-size:13.5px;line-height:1.35;font-weight:600}
.aosx-krij.archief{opacity:.62}
.aosx-kchips{display:flex;flex-wrap:wrap;gap:5px}
.aosx-kchips i{font-style:normal;font-size:11px;padding:1px 8px;border-radius:999px;border:1px solid var(--line);color:var(--tx2);white-space:nowrap}
.aosx-kchips .c-bron{color:var(--tx);border-color:var(--line2)}.aosx-kchips .c-student{color:var(--aos-groen);border-color:color-mix(in srgb,var(--aos-groen) 40%,var(--line))}
.aosx-kchips .c-beheer{color:var(--aos-blauw);border-color:color-mix(in srgb,var(--aos-blauw) 40%,var(--line))}.aosx-kchips .c-arch{color:var(--tx3)}
.aosx-kchips .c-let{color:var(--aos-oranje);border-color:color-mix(in srgb,var(--aos-oranje) 45%,var(--line))}
.aosx-krij em{font-style:normal;font-size:12.5px;color:var(--tx3);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* servers */
.aosx-srv{padding:14px 16px 18px;display:flex;flex-direction:column;gap:14px}
.aosx-srvblok{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--panel);min-width:0}
.aosx-srvblok h3{font-size:13px;font-weight:650;margin:0 0 10px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.aosx-srvblok details summary{cursor:pointer;margin-top:10px;min-height:32px;display:flex;align-items:center}
.aosx-diensten{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.aosx-dienst{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel2);display:flex;flex-direction:column;gap:5px;min-width:0}
.aosx-dienst.s-fout,.aosx-dienst.s-wacht{border-color:color-mix(in srgb,var(--c) 50%,var(--line))}
.aosx-dkop{display:flex;align-items:center;gap:8px}.aosx-dkop b{font-size:13px}
.aosx-dienst p{font-size:12.5px;color:var(--tx2);line-height:1.4;margin:0;word-break:break-word}.aosx-dienst em{font-style:normal;font-size:11.5px;color:var(--tx3)}
.aosx-dienst .btn{align-self:flex-start;margin-top:4px}
.aosx-srv2{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}
.aosx-groot{font-size:28px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;margin:0 0 4px}
.aosx-groot code{font-size:20px}.aosx-groot.groen{color:var(--aos-groen)}.aosx-groot.oranje{color:var(--aos-oranje)}.aosx-groot.rood{color:var(--aos-rood)}
.aosx-uren{display:flex;align-items:flex-end;gap:2px;height:46px;margin:12px 0 6px}
.aosx-uren i{flex:1;min-width:3px;background:color-mix(in srgb,var(--tx3) 38%,transparent);border-radius:2px 2px 0 0;display:flex;align-items:flex-end;overflow:hidden}
.aosx-uren b{display:block;width:100%;background:var(--aos-rood)}
.aosx-tab{width:100%;font-size:12.5px;border-collapse:collapse;margin-top:8px}
.aosx-tab th{font-weight:600;color:var(--tx3);font-size:11.5px}.aosx-tab th,.aosx-tab td{text-align:left;padding:5px 6px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.aosx-tab td.rood{color:var(--aos-rood);font-weight:650}
.aosx-mini{list-style:none;font-size:12px;margin:8px 0 0;padding:0}.aosx-mini li{display:flex;justify-content:space-between;gap:10px;padding:3px 0;color:var(--tx2)}
.aosx-rout{display:flex;flex-direction:column}
.aosx-routrij{display:grid;grid-template-columns:12px minmax(150px,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:center;padding:10px 8px;border:0;border-bottom:1px solid var(--line);
  background:none;color:var(--tx);font:inherit;text-align:left;cursor:pointer;min-height:44px;border-radius:6px}
.aosx-routrij b{font-size:13px}.aosx-routrij span{font-size:12.5px;color:var(--tx2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){.aosx-routrij{grid-template-columns:12px minmax(0,1fr);row-gap:2px}.aosx-routrij>span:not(.aosx-dot){grid-column:2;white-space:normal}
  .aosx-man{padding:12px;grid-template-columns:minmax(0,1fr)}.aosx-srv{padding:12px}.aosx-kbalk select{flex:1 1 calc(50% - 4px)}.aosx-kbalk input{flex-basis:100%;font-size:16px}
  .aosx-klijst{max-height:none;min-height:0}}
/* de wereld: balk met live status en schermvullend */
.aos-wbalk{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.aos-legenda{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--tx2)}
.aos-legenda span{display:inline-flex;align-items:center;gap:6px}.aos-legenda b{color:var(--tx);font-variant-numeric:tabular-nums}.aos-legenda .nul{opacity:.5}
.aos-volknop{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);color:var(--tx);font:600 12.5px var(--font);cursor:pointer;flex:0 0 auto;transition:transform 140ms ease-out}
@media (min-width:1101px){.aos-svg{max-height:calc(100vh - 300px);max-height:calc(100dvh - 300px);min-height:460px}}
.aos-wereld.aos-vol{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column}
.aos-vol .aos-svgwrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto}
.aos-vol .aos-svg{width:100%;height:100%;max-height:none;min-height:0}
.aos-vol .aos-muur{order:3;padding:6px 10px 8px;border-bottom:0;border-top:4px solid #4a2e19}.aos-vol .aos-muurkop{display:none}
.aos-vol .aos-posters{display:flex;overflow-x:auto;gap:10px;padding:6px 2px 2px;scrollbar-width:none}.aos-vol .aos-poster{flex:0 0 170px}
.aos-vol .aos-veeg{display:none}
@media (max-width:640px){.aos-volknop span{display:none}.aos-volknop{width:44px;height:44px;padding:0;justify-content:center}.aos-legenda{gap:4px 12px;font-size:12px}
  .aos-vol .aos-svgwrap{justify-content:flex-start;align-items:center}}

/* 04-10: fixes-blok rustiger en op de telefoon onder elkaar (tekst krijgt de volle breedte, knop eronder). */
.rs-fixkop{margin:14px 0 0;font-size:13.5px;color:var(--tx)}
.rs-fixinfo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--panel2,var(--panel));color:var(--tx2);font-size:13px}
.rs-fixinfo span{flex:1 1 220px;min-width:0}
.rs-fixlijst li > span{min-width:0}
@media (max-width:600px){
  .rs-fixlijst li{flex-wrap:wrap}
  .rs-fixlijst li > span{flex:1 1 calc(100% - 44px)}
  .rs-fixlijst li > .btn,.rs-fixinfo .btn{margin-left:38px}
  .rs-fixinfo .btn{margin-left:0}
}
.aosx-pil.s-ok,.aosx-dot.s-ok,.aosx-dienst.s-ok{--c:var(--aos-groen)}
.aos-vol .aos-svg{flex:0 0 auto}
.aosl-runtekst{display:flex;flex-direction:column;min-width:0;flex:1}.aosl-runtekst small{font-size:12px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aosl-run[open] .aosl-runtekst small{display:none}

/* ---------- 04-10: Profitz-vergelijking (alleen weergave) ----------
   Lijst per product en per collectie in de ROAS-sheet: vaste kolommen (Verkocht, Omzet, Netto omzet, Inkoop, Advertenties,
   Retouren, Netto winst, ROAS met label), compacte rijen met een kleine foto. Smaller scherm: de extra kolommen vallen weg. */
.rsk-kop,.rsk-rij{grid-template-columns:32px minmax(150px,1fr) 58px 84px 88px 80px 88px 74px 90px 104px;gap:7px;padding:7px 10px}
.rsk-rij{font-size:12.5px;min-height:46px}
.rsk-kop{font-size:11px;padding-top:7px;padding-bottom:7px}
.rsk-rij .rs2-foto{width:32px;height:32px;flex:0 0 32px;border-radius:7px}
.rsk-naam b{font-size:13px}
.rsk-naam small{font-size:11.5px}
.rsk-c .rs2-roas{justify-content:flex-end}
@media (max-width:1240px){
  .rsk-kop,.rsk-rij{grid-template-columns:32px minmax(0,1fr) 90px 96px 96px 112px}
  .rsk-x2{display:none!important}
}
@media (max-width:860px), (max-width:1023px) and (pointer:coarse){
  .rsk-rij{grid-template-columns:40px minmax(0,1fr) auto;min-height:60px;font-size:14px;padding:9px 12px}
  .rsk-rij .rs2-foto{width:40px;height:40px;flex:0 0 40px}
}

/* 04-10: info-regel 'alle bronnen' (geen ROAS) bij een collectie */
.rs-allebronnen{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--panel2,var(--panel));border:1px dashed var(--line);font-size:13px;color:var(--tx2);line-height:1.45}
.rs-allebronnen b{display:block;color:var(--tx);font-weight:600}
.rsm-rij select:disabled{opacity:1;color:var(--tx3);background:var(--panel2,var(--panel))}
/* Producten → Alle producten: foto naast de naam, compactere rijen, ROAS met label (zoals de ROAS-sheet). */
#prodtabel .prod-naam{display:inline-flex;align-items:center;gap:10px;min-width:0;color:var(--tx);text-decoration:none}
#prodtabel .prod-naam .rs2-foto{width:32px;height:32px;flex:0 0 32px;border-radius:7px}
#prodtabel .prod-naam:hover b{text-decoration:underline}
#prodtabel td,#prodtabel th{padding-top:7px;padding-bottom:7px}
#prodtabel td .rs2-roas{justify-content:flex-end;white-space:nowrap}
#prodtabel .prod-naam b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:260px;min-width:150px;line-height:1.3}
/* UX 04-10: de uitleg van de pagina staat nu bovenaan in Hulp. */
.hulp-uitleg{margin:12px 0 4px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.hulp-uitleg > summary{list-style:none;cursor:pointer;padding:11px 14px;font-weight:650;font-size:14px;color:var(--tx)}
.hulp-uitleg > summary::-webkit-details-marker{display:none}
.hulp-uitleg > summary::after{content:'';float:right;width:8px;height:8px;margin-top:5px;border-right:2px solid var(--tx3);border-bottom:2px solid var(--tx3);transform:rotate(45deg);transition:transform .15s ease}
.hulp-uitleg[open] > summary::after{transform:rotate(-135deg);margin-top:8px}
.hulp-uitleg ol{margin:0;padding:0 14px 12px 32px;display:grid;gap:8px}
.hulp-uitleg li b{display:block;font-size:13.5px;color:var(--tx)}
.hulp-uitleg li span{display:block;font-size:13px;line-height:1.5;color:var(--tx2)}
.kg-keuze{display:flex;flex-direction:column;gap:6px;margin:4px 0 10px;font-size:13.5px}
.kg-regels{margin-bottom:10px} .kg-regel{display:flex;gap:8px;align-items:center;font-size:13px;margin-bottom:6px} .kg-regel input{width:64px;flex:0 0 64px}
.kg-samenvatting{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:10px;background:var(--panel2);font-size:13px;margin-top:6px}
.kg-samenvatting b{font-size:15px} .kg-grens{display:flex;gap:6px;align-items:center;color:var(--red);font-weight:600;margin-top:4px}

/* Nog te betalen (Betalingen) en betaallink in Abonnementen (04-10, ronde 2) */
.abb .gl-kop{margin-bottom:14px}
.gl-tal .amber dd{color:var(--amb)}
.ab-link .gl-link{min-width:260px}
.ntb-tabel{display:flex;flex-direction:column}
.ntb-h,.ntb-r{display:grid;grid-template-columns:1.3fr 1.5fr 1.3fr .8fr;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:13px;align-items:start}
.ntb-h{border-top:none;font-size:12px;color:var(--tx3);padding-top:0}
.ntb-r.laat{box-shadow:inset 3px 0 0 var(--red);padding-left:10px}
.ntb-r.week{box-shadow:inset 3px 0 0 var(--amb);padding-left:10px}
.ntb-naam{cursor:pointer}
.ntb-rood{color:var(--red)}
.ntb-amber{color:var(--amb)}
.ntb-let{display:block;font-style:normal;font-weight:400;font-size:11.5px;color:var(--amb)}
@media (max-width:900px){
  .ntb-h{display:none}
  .ntb-r{grid-template-columns:1fr;gap:4px}
  .ntb-r>span[data-l]::before{content:attr(data-l) ": ";color:var(--tx3);font-size:12px}
}

/* ---------- UX 04-10 ronde 4 (Jairo): één meldingen-systeem ----------
   urgent = rood met icoon en vette titel · waarschuwing = amber · info = neutraal · gelukt = groen.
   De tekst zelf blijft in de gewone tekstkleur (contrast in elk thema); kleur zit in rand, achtergrondtint en icoon. */
:root{
  --ic-urg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v6'/%3E%3Ccircle cx='12' cy='16.6' r='.6' fill='%23000'/%3E%3C/svg%3E");
  --ic-wrs:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.8 19.5h18.4z'/%3E%3Cpath d='M12 9.5v4.5'/%3E%3Ccircle cx='12' cy='16.9' r='.5' fill='%23000'/%3E%3C/svg%3E");
  --ic-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v6'/%3E%3Ccircle cx='12' cy='7.6' r='.6' fill='%23000'/%3E%3C/svg%3E");
  --ic-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m7.8 12.3 2.9 2.9 5.5-5.8'/%3E%3C/svg%3E");
}
main.pmain :is(.warn,div[class="ok"],p[class="ok"],.vz-rood,.ab-terug.mis,.ux-info){position:relative;padding-left:42px!important;color:var(--tx);border-radius:10px;line-height:1.55}
main.pmain :is(.warn,div[class="ok"],p[class="ok"],.vz-rood,.ab-terug.mis,.ux-info)::before{content:'';position:absolute;left:14px;top:12px;width:18px;height:18px;
  -webkit-mask:var(--ic-wrs) center/contain no-repeat;mask:var(--ic-wrs) center/contain no-repeat;background:var(--amb)}
/* waarschuwing (amber) */
main.pmain .warn{background:color-mix(in srgb,var(--amb) 9%,var(--panel));border:1px solid color-mix(in srgb,var(--amb) 42%,var(--line));border-left-width:1px}
main.pmain .warn b{color:var(--tx);font-weight:700}
/* urgent (rood) */
main.pmain :is(.warn.mw-hoog,.vz-rood,.ab-terug.mis){background:color-mix(in srgb,var(--red) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--red) 45%,var(--line));border-left-width:1px;color:var(--tx)}
main.pmain :is(.warn.mw-hoog,.vz-rood,.ab-terug.mis)::before{-webkit-mask-image:var(--ic-urg);mask-image:var(--ic-urg);background:var(--red)}
main.pmain :is(.warn.mw-hoog,.vz-rood,.ab-terug.mis) b,main.pmain .vz-rood>b,main.pmain .warn.mw-hoog .mw-tekst b{color:var(--tx);font-weight:750}
/* gelukt (groen) */
main.pmain :is(div,p)[class="ok"]{background:color-mix(in srgb,var(--grn) 9%,var(--panel));border:1px solid color-mix(in srgb,var(--grn) 40%,var(--line));color:var(--tx)}
main.pmain :is(div,p)[class="ok"]::before{-webkit-mask-image:var(--ic-ok);mask-image:var(--ic-ok);background:var(--grn)}
/* info (neutraal) */
main.pmain .ux-info{background:var(--panel2);border:1px solid var(--line)}
main.pmain .ux-info::before{-webkit-mask-image:var(--ic-info);mask-image:var(--ic-info);background:var(--tx2)}
/* compacte varianten met een knop rechts blijven netjes uitgelijnd */
main.pmain .warn.mw-rij::before,main.pmain .ab-terug.mis::before{top:50%;margin-top:-9px}

/* Statusbalk: zelfde systeem (icoon per regel, rood als er iets urgents in zit) */
.uxbalk.uxbalk-urg{border-color:color-mix(in srgb,var(--red) 45%,var(--line));background:color-mix(in srgb,var(--red) 6%,var(--panel))}
.uxb-dot{width:16px;height:16px;flex:0 0 16px;border-radius:0;background:var(--amb);-webkit-mask:var(--ic-wrs) center/contain no-repeat;mask:var(--ic-wrs) center/contain no-repeat}
.uxb-urg .uxb-dot{background:var(--red);-webkit-mask-image:var(--ic-urg);mask-image:var(--ic-urg)}
.uxb-info .uxb-dot{background:var(--tx2);-webkit-mask-image:var(--ic-info);mask-image:var(--ic-info)}
.uxb-urg .uxb-t b{font-weight:750}

/* Belangrijke menu-opties en kopjes vet */
.pside .kop{font-weight:750;letter-spacing:.09em}
.pside .pnav{font-weight:550}
.pside .pnav.on{font-weight:700}
main.pmain h2{font-weight:650}
.pcard > b:first-child,.pcard > div:first-child > b:first-child{font-weight:700}

/* Mijn account · instellingen: groter en duidelijker */
.ux-accknop{min-height:38px;padding:4px 14px 4px 5px;font-size:13.5px;font-weight:650;border-color:var(--line2);gap:9px;box-shadow:0 1px 2px rgba(20,20,20,.05)}
.ux-accknop .av,.ux-accknop img{width:28px!important;height:28px!important}

/* ---------- Ads Uploader 04-10: kopjes met iconen (zoals Ads Manager), Identity-logo's, zelf verdelen, Meta-verbeteringen ---------- */
.upl-ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;margin-right:7px;color:var(--ua,#2f5d8a)}
.upl-kkop h3{display:flex;align-items:center}
.upl-h4{display:flex;align-items:center;margin:0 0 8px}
.upl-sub{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.upl-logo{width:18px;height:18px;flex:none;margin-right:6px}
.upl-lbl-logo{display:inline-flex;align-items:center}
.upl-enhregel{padding:12px 16px}
.upl-enhregel p{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0;font-size:13.5px}
.upl-enhregel p .upl-ico{margin-right:2px}
.upl-vlijst{display:flex;flex-direction:column;gap:6px}
.upl-vrij{display:flex;gap:10px;align-items:flex-start;padding:8px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.upl-vin{min-width:0;flex:1;display:flex;flex-direction:column;gap:6px}
.upl-vin b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upl-vkeus{display:flex;flex-wrap:wrap;gap:5px}
.upl-vchip{padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);font-size:12.5px;color:var(--tx2);min-height:30px}
.upl-vchip.on{background:var(--ua,#2f5d8a);border-color:var(--ua,#2f5d8a);color:#fff;font-weight:600}

/* Gouden ster: favoriete comps (04-10) */
.cw-ster{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:99px;flex:none;color:var(--tx2)}
.cw-ster svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.cw-ster:hover{background:var(--hover);color:#c9a227}
.cw-ster.aan{color:#d4a017}.cw-ster.aan svg{fill:#e3b23c;stroke:#b8860b}
.cw-ster.dicht{opacity:.55}
.cw-ster:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.rs3-links .cw-ster{width:30px;height:30px;border:1px solid var(--line)}
.cw-wnaam{display:inline-flex;align-items:center;gap:4px;min-width:0}
.cw-wkr{display:flex;align-items:center;gap:4px;min-width:0}.cw-wkr .cw-wk{flex:1;min-width:0}
.cw-favchip{display:inline-flex;align-items:center;gap:5px}.cw-favchip svg{fill:none;stroke:currentColor;stroke-width:1.8}
.cw-favchip.on svg{fill:#e3b23c;stroke:#b8860b}
.cw-mkkeus{display:flex;flex-wrap:wrap;gap:6px}.cw-mkkeus small{opacity:.7;margin-left:3px}
.cw-filters .cw-mk{max-width:150px}
@media (max-width:560px){.cw-filters .cw-mk{flex:1 1 40%;max-width:none}}

/* ---------- UX 04-10 ronde 4: vijf bijzondere Plus-thema's met een subtiel effect ----------
   Noorderlicht (zachte gloed die heel langzaam beweegt), Glas (matglazen kaarten), Korrel (filmkorrel), Vloeiend (bewegend
   verloop in de zijbalk), Glinster (glans over knoppen bij aanwijzen). Tekst blijft op dekkende vlakken: AA in licht en donker.
   prefers-reduced-motion: alle beweging staat uit. */
:root[data-thema="noorderlicht"],.kt-mini[data-thema="noorderlicht"]{--bg:#f1f4fb;--bg2:#e8edf8;--panel:#ffffff;--panel2:#f6f8fd;--hover:#ecf0fa;--line:#dbe2f1;--line2:#c3cde6;--tx:#0f1630;--tx2:#3c4566;--tx3:#535d80;--acc:#2f4fd6;--acc2:#2541b8;--on-acc:#ffffff;--zij:#0b1433;--zijtx:#eef2ff;--zij-grad:linear-gradient(180deg,#081030,#0f2a4a 55%,#1b1e5c);--rand:linear-gradient(90deg,#4ade80,#22d3ee,#a78bfa);--pop:#4ade80;--gloed1:#22d3ee;--gloed2:#a78bfa;--gloed3:#4ade80}
html[data-theme="dark"][data-thema="noorderlicht"],html[data-theme="dark"] .kt-mini[data-thema="noorderlicht"]{--bg:#070b1a;--bg2:#0a1022;--panel:#10172c;--panel2:#151d36;--hover:#1b2442;--line:#232d4c;--line2:#2f3b62;--tx:#eef2ff;--tx2:#c2c9ea;--tx3:#9aa3cc;--acc:#86efc1;--acc2:#b4f6d9;--on-acc:#03261a;--zij:#050816;--zijtx:#eef2ff;--zij-grad:linear-gradient(180deg,#040716,#0a2033,#151545);--rand:linear-gradient(90deg,#4ade80,#22d3ee,#a78bfa);--pop:#4ade80}
:root[data-thema="glas"],.kt-mini[data-thema="glas"]{--bg:#eef0f7;--bg2:#e6e9f4;--panel:#ffffff;--panel2:#f5f6fb;--hover:#eceff8;--line:#dde1ee;--line2:#c5cbe0;--tx:#151a2e;--tx2:#40465f;--tx3:#575d77;--acc:#3b5bdb;--acc2:#2f4bc0;--on-acc:#ffffff;--zij:#1b2140;--zijtx:#f2f4ff;--zij-grad:linear-gradient(160deg,#1a2042,#2a2f5e 50%,#3a2b5c);--rand:linear-gradient(90deg,#7dd3fc,#c4b5fd,#f9a8d4);--pop:#c4b5fd;--vlek1:#a5d8ff;--vlek2:#d0bfff;--vlek3:#fcc2d7}
html[data-theme="dark"][data-thema="glas"],html[data-theme="dark"] .kt-mini[data-thema="glas"]{--bg:#0d1020;--bg2:#111528;--panel:#171c33;--panel2:#1d2340;--hover:#242a4b;--line:#2a3152;--line2:#384069;--tx:#f2f4ff;--tx2:#c6cbe8;--tx3:#a0a6cc;--acc:#a5b8ff;--acc2:#c3d0ff;--on-acc:#10173a;--zij:#0a0d1c;--zijtx:#f2f4ff;--zij-grad:linear-gradient(160deg,#0a0d1d,#161b3c 50%,#241a3f);--rand:linear-gradient(90deg,#7dd3fc,#c4b5fd,#f9a8d4);--pop:#c4b5fd;--vlek1:#1d4b7a;--vlek2:#3f2d7a;--vlek3:#6a2850}
:root[data-thema="korrel"],.kt-mini[data-thema="korrel"]{--bg:#f2f1ea;--bg2:#eae8de;--panel:#fbfaf5;--panel2:#f5f3eb;--hover:#ecebe1;--line:#e0ddd0;--line2:#ccc8b6;--tx:#1d1f16;--tx2:#474a39;--tx3:#5c5f4d;--acc:#9b3b22;--acc2:#82311c;--on-acc:#ffffff;--zij:#2a2e21;--zijtx:#f4f2e8;--zij-grad:linear-gradient(180deg,#252a1d,#30351f 60%,#3b2a1f);--rand:linear-gradient(90deg,#9b3b22,#c9a227,#6b7f3a);--pop:#c9a227}
html[data-theme="dark"][data-thema="korrel"],html[data-theme="dark"] .kt-mini[data-thema="korrel"]{--bg:#14150f;--bg2:#181a12;--panel:#1f2118;--panel2:#26281d;--hover:#2d2f23;--line:#33362a;--line2:#424636;--tx:#f2f0e4;--tx2:#cdcab6;--tx3:#a8a590;--acc:#f0a585;--acc2:#f6c0a7;--on-acc:#2c0e05;--zij:#0f100b;--zijtx:#f2f0e4;--zij-grad:linear-gradient(180deg,#0e0f0a,#191b11 60%,#22170f);--rand:linear-gradient(90deg,#c2593a,#c9a227,#6b7f3a);--pop:#c9a227}
:root[data-thema="vloeiend"],.kt-mini[data-thema="vloeiend"]{--bg:#fbf3f6;--bg2:#f6e8ee;--panel:#ffffff;--panel2:#fdf6f9;--hover:#f8eaf0;--line:#efdce4;--line2:#e1c3d0;--tx:#2a1020;--tx2:#5e3a4c;--tx3:#785060;--acc:#b0275e;--acc2:#931f4e;--on-acc:#ffffff;--zij:#3a1030;--zijtx:#fff0f6;--zij-grad:linear-gradient(180deg,#2e0c2a,#5a1640,#8a2f3a,#5a1640,#2e0c2a);--rand:linear-gradient(90deg,#f472b6,#fb923c,#a855f7,#f472b6);--pop:#fb923c}
html[data-theme="dark"][data-thema="vloeiend"],html[data-theme="dark"] .kt-mini[data-thema="vloeiend"]{--bg:#1a0d15;--bg2:#1f111a;--panel:#281621;--panel2:#301b28;--hover:#3a2231;--line:#402937;--line2:#543547;--tx:#fff0f6;--tx2:#ecc6d6;--tx3:#c69fb1;--acc:#f9a3c7;--acc2:#fcc4dc;--on-acc:#3a0a1f;--zij:#14070f;--zijtx:#fff0f6;--zij-grad:linear-gradient(180deg,#12060e,#3a0f2b,#5c1d28,#3a0f2b,#12060e);--rand:linear-gradient(90deg,#f472b6,#fb923c,#a855f7,#f472b6);--pop:#fb923c}
:root[data-thema="glinster"],.kt-mini[data-thema="glinster"]{--bg:#f2f3f7;--bg2:#e9ebf2;--panel:#ffffff;--panel2:#f7f8fb;--hover:#eceef5;--line:#dee1ea;--line2:#c8cddb;--tx:#121a33;--tx2:#3f4762;--tx3:#565e79;--acc:#1f3a8a;--acc2:#172d6e;--on-acc:#ffffff;--zij:#0e1733;--zijtx:#f4f1e6;--zij-grad:linear-gradient(180deg,#0b1430,#14214a 60%,#1c2754);--rand:linear-gradient(90deg,#e9c46a,#f4e3b0,#e9c46a);--pop:#e9c46a}
html[data-theme="dark"][data-thema="glinster"],html[data-theme="dark"] .kt-mini[data-thema="glinster"]{--bg:#0a0f1f;--bg2:#0d1326;--panel:#131a31;--panel2:#18203b;--hover:#1f2847;--line:#252e4f;--line2:#323d65;--tx:#f4f1e6;--tx2:#d0ccbd;--tx3:#aaa694;--acc:#e9c46a;--acc2:#f4d98f;--on-acc:#1c1503;--zij:#070b18;--zijtx:#f4f1e6;--zij-grad:linear-gradient(180deg,#060a17,#0e1630 60%,#151d3d);--rand:linear-gradient(90deg,#e9c46a,#f4e3b0,#e9c46a);--pop:#e9c46a}

/* effecten: de inhoud ligt erboven */
:root:is([data-thema="noorderlicht"],[data-thema="glas"],[data-thema="korrel"]) #portaal > .play{position:relative;z-index:1}
/* Noorderlicht: zachte gloed achter de inhoud, beweegt heel langzaam */
:root[data-thema="noorderlicht"] #portaal::before{content:'';position:fixed;inset:-15% -10%;pointer-events:none;z-index:0;
  background:radial-gradient(40% 35% at 78% 8%,color-mix(in srgb,var(--gloed1,#22d3ee) 22%,transparent),transparent 70%),
    radial-gradient(38% 32% at 22% 4%,color-mix(in srgb,var(--gloed2,#a78bfa) 20%,transparent),transparent 70%),
    radial-gradient(30% 28% at 55% 0%,color-mix(in srgb,var(--gloed3,#4ade80) 14%,transparent),transparent 70%);
  animation:uxgloed 38s ease-in-out infinite alternate}
html[data-theme="dark"][data-thema="noorderlicht"] #portaal::before{opacity:.9}
@keyframes uxgloed{0%{transform:translate3d(-3%,0,0) scale(1)}100%{transform:translate3d(3%,2%,0) scale(1.08)}}
/* Glas: kleurvlekken achter matglazen kaarten */
:root[data-thema="glas"] #portaal::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(30% 30% at 85% 12%,var(--vlek1),transparent 70%),radial-gradient(28% 30% at 30% 85%,var(--vlek2),transparent 70%),radial-gradient(24% 26% at 60% 45%,var(--vlek3),transparent 70%);opacity:.55}
html[data-theme="dark"][data-thema="glas"] #portaal::before{opacity:.5}
:root[data-thema="glas"] main.pmain > .pcard,:root[data-thema="glas"] main.pmain > div > .pcard{background:color-mix(in srgb,var(--panel) 80%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);border-color:color-mix(in srgb,var(--line) 70%,#fff 30%)}
html[data-theme="dark"][data-thema="glas"] main.pmain > .pcard,html[data-theme="dark"][data-thema="glas"] main.pmain > div > .pcard{background:color-mix(in srgb,var(--panel) 84%,transparent);border-color:color-mix(in srgb,var(--line) 80%,#fff 8%)}
/* Korrel: fijne filmkorrel op de achtergrond en in de zijbalk */
:root[data-thema="korrel"]{--korrel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-thema="korrel"] #portaal::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background-image:var(--korrel);opacity:.10}
html[data-theme="dark"][data-thema="korrel"] #portaal::before{opacity:.14;mix-blend-mode:screen}
:root[data-thema="korrel"] .pside{background-image:var(--korrel),var(--zij-grad)!important;background-size:160px 160px,100% 100%!important}
/* Vloeiend: het verloop in de zijbalk en de rand bovenaan beweegt langzaam */
:root[data-thema="vloeiend"] .pside{background-size:100% 300%!important;animation:uxvloei 40s ease-in-out infinite alternate}
:root[data-thema="vloeiend"] .pbalk::after{background-size:300% 100%!important;animation:uxvloeih 24s linear infinite}
@keyframes uxvloei{0%{background-position:50% 0%}100%{background-position:50% 100%}}
@keyframes uxvloeih{0%{background-position:0% 50%}100%{background-position:300% 50%}}
/* Glinster: een glans over knoppen en menu-items bij aanwijzen */
:root[data-thema="glinster"] :is(.btn.pri,.pside .pnav,.ux-accknop){position:relative;overflow:hidden}
:root[data-thema="glinster"] :is(.btn.pri,.pside .pnav,.ux-accknop)::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;
  background:linear-gradient(105deg,transparent,color-mix(in srgb,var(--pop) 38%,transparent),transparent);transform:skewX(-18deg);opacity:0}
:root[data-thema="glinster"] :is(.btn.pri,.pside .pnav,.ux-accknop):hover::after{animation:uxglans .75s cubic-bezier(.23,1,.32,1)}
@keyframes uxglans{0%{left:-60%;opacity:0}20%{opacity:1}100%{left:120%;opacity:0}}
@media (prefers-reduced-motion:reduce){
  :root[data-thema="noorderlicht"] #portaal::before,:root[data-thema="vloeiend"] .pside,:root[data-thema="vloeiend"] .pbalk::after{animation:none!important}
  :root[data-thema="glinster"] :is(.btn.pri,.pside .pnav,.ux-accknop):hover::after{animation:none}
}
/* Leaderboard: extra naamstijlen en badges (Plus). Het leaderboard is altijd donker; de kleuren zijn licht genoeg (AA). */
.lbs-k-zilver{color:#e3e8ef}.lbs-k-mint{color:#a7f3d0}
.lbs-k-zonsondergang,.lbs-k-noorderlicht,.lbs-k-regenboog,.lbs-k-glans{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.lbs-k-zonsondergang{background-image:linear-gradient(90deg,#fdba74,#f9a8d4)}
.lbs-k-noorderlicht{background-image:linear-gradient(90deg,#86efac,#67e8f9,#c4b5fd)}
.lbs-k-regenboog{background-image:linear-gradient(90deg,#fca5a5,#fdba74,#fde68a,#86efac,#93c5fd,#c4b5fd)}
.lbs-k-gloed{color:#fff7d6;text-shadow:0 0 10px rgba(253,224,71,.55),0 0 2px rgba(253,224,71,.6)}
.lbs-k-glans{background-image:linear-gradient(100deg,#f5d36e 0%,#f5d36e 40%,#fff6d8 50%,#f5d36e 60%,#f5d36e 100%);background-size:250% 100%;animation:lbsglans 4.5s ease-in-out infinite}
@keyframes lbsglans{0%{background-position:100% 0}60%,100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.lbs-k-glans{animation:none}}
.lbs-f-rond{font-family:ui-rounded,'SF Pro Rounded','Nunito','Inter',sans-serif;font-weight:700}
.lbs-f-smal{font-family:'Inter',sans-serif;font-stretch:condensed;font-weight:650;letter-spacing:-.02em;transform:scaleX(.92);display:inline-block;transform-origin:left}
.lbs-f-strak{font-family:'Inter',sans-serif;font-weight:300;font-size:.88em}
.lbs-b-pro{background:#F2F4F7;color:#141414}
.lbs-b-ceo{background:linear-gradient(135deg,#1f2937,#0f172a);color:#f5d36e;border:1px solid rgba(245,211,110,.45)}
.lbs-b-top{background:linear-gradient(135deg,#a7f3d0,#67e8f9);color:#06231d}
.pl-met li>span{min-width:0;overflow-wrap:anywhere}
.cw-zij .pcard{min-width:0}

/* ---------- Klantenservice zoals Gorgias (alleen weergave) ----------
   De inbox-panelen zijn wit/neutraal, los van het kleurthema, met hoog contrast in de zijbalk. */
.ib2{--panel:#ffffff;--panel2:#f6f7f9;--hover:#f0f2f5;--line:#e3e6eb;--line2:#cfd4dc;--tx:#111827;--tx2:#374151;--tx3:#5b6474;--bg:#f6f7f9;
  --acc:#111827;--acc2:#1f2937;--on-acc:#ffffff;color:var(--tx);background:#ffffff;border-color:#e3e6eb}
html[data-theme="dark"] .ib2{--panel:#17191d;--panel2:#1d2025;--hover:#252930;--line:#2d3139;--line2:#3b4049;--tx:#f3f4f6;--tx2:#d1d5db;--tx3:#a7adb8;--bg:#121418;
  --acc:#f3f4f6;--acc2:#ffffff;--on-acc:#111827;background:#17191d;border-color:#2d3139}
.ib2-nav{background:var(--panel2);border-right:1px solid var(--line)}
.ib2-nav .ib-view{color:var(--tx);font-weight:550;min-height:34px}
.ib2-nav .ib-view:hover{background:var(--hover)}
.ib2-nav .ib-view.on{background:var(--acc);color:var(--on-acc);font-weight:650}
.ib2-nav .ib-view.on svg{color:var(--on-acc)}
.ib2-nav .ib-view b{color:var(--tx);font-weight:700}
.ib2-nav .ib-view.on b{color:var(--on-acc)}
.ib2-nav .ib-view b.rood{color:#b42318}
html[data-theme="dark"] .ib2-nav .ib-view b.rood{color:#fca5a5}
.ib2-nav .ib-view.on b.rood{color:var(--on-acc)}
.ib2-nav .ib-railkop{color:var(--tx2);font-weight:700;text-transform:none;letter-spacing:normal}
.ib2-tags > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;margin-top:12px}
.ib2-tags > summary::-webkit-details-marker{display:none}
.ib2-tags > summary::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);margin-left:2px}
.ib2-tags[open] > summary::after{transform:rotate(45deg)}
/* tabbalk met rechts Mail koppelen en Instellingen */
main.pmain .ks-tabbalk{align-items:center;overflow:visible}
.ks-tabrechts{margin-left:auto;display:flex;align-items:center;gap:8px;padding-bottom:4px}
.ks-inst{position:relative}
.ks-inst > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 12px;border:1px solid var(--line2);border-radius:9px;
  background:var(--panel);color:var(--tx);font-size:13px;font-weight:600}
.ks-inst > summary::-webkit-details-marker{display:none}
.ks-inst > summary svg{width:16px;height:16px}
.ks-inst.on > summary{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.ks-instmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:250px;padding:6px;border:1px solid var(--line2);border-radius:12px;background:var(--panel);
  box-shadow:0 12px 32px -12px rgba(20,20,20,.35);display:grid;gap:1px}
.ks-instmenu button{text-align:left;padding:9px 11px;border-radius:8px;font-size:13.5px;color:var(--tx);background:none;border:0;cursor:pointer}
.ks-instmenu button:hover,.ks-instmenu button:focus-visible{background:var(--hover)}
.ks-mailknop{min-height:34px}
/* "x klanten vragen nu actie": volgens het meldingen-systeem */
.alertrow.ux-melding{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px 10px 42px;margin:0 0 12px;border-radius:10px;color:var(--tx)}
.alertrow.ux-melding::before{content:'';position:absolute;left:14px;top:50%;margin-top:-9px;width:18px;height:18px;-webkit-mask:var(--ic-wrs) center/contain no-repeat;mask:var(--ic-wrs) center/contain no-repeat;background:var(--amb)}
.alertrow.ux-urg{background:color-mix(in srgb,var(--red) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--red) 45%,var(--line))}
.alertrow.ux-urg::before{-webkit-mask-image:var(--ic-urg);mask-image:var(--ic-urg);background:var(--red)}
.alertrow.ux-wrs{background:color-mix(in srgb,var(--amb) 9%,var(--panel));border:1px solid color-mix(in srgb,var(--amb) 42%,var(--line))}
.alertrow.ux-melding b{font-weight:750}
@media (max-width:860px), (max-width:1023px) and (pointer:coarse){
  .ks-tabrechts{padding-bottom:0}
  .ks-instmenu{right:-4px;min-width:min(280px,calc(100vw - 32px))}
  main.pmain .ks-tabbalk{flex-wrap:wrap!important}
}
.ux-accknop{white-space:nowrap;flex:0 0 auto}
main.pmain > .ux-th-wiz{margin-top:20px}
.th-koppel-dicht{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between}
:root[data-thema="korrel"]:not([data-theme="dark"]) .chip.c-grn{color:#256b40}
.kg-rechten{display:flex;flex-wrap:wrap;gap:6px} .kg-rechten span{font-size:12.5px;padding:3px 10px;border-radius:11px;border:1px solid var(--line)}
.kg-rechten .ja{background:rgba(47,122,74,.08);color:var(--grn);border-color:rgba(47,122,74,.3)} .kg-rechten .nee{background:rgba(180,35,24,.06);color:var(--red);border-color:rgba(180,35,24,.25)}
/* 04-10: Shopify-toewijzing naast Meta */
.rs-geschat{color:var(--muted,#6b7280);font-style:italic}
.rs-metazegt{color:var(--muted,#6b7280)}

/* Nieuwe functies vrijgeven (koppelingen) */
.kp-vrij{border:1px solid rgba(168,104,15,.35);border-radius:10px;padding:14px 16px;margin:0 0 14px;display:flex;flex-direction:column;gap:10px}
.kp-vrij.klaar{border-color:var(--line)}
.kp-fn{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.kp-fn li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:8px;align-items:center}
.kp-fn li.ok .kp-v{color:var(--grn);font-weight:700}
.kp-fn li.nee .kp-v{color:var(--amb)}
.kp-stap{margin:0 0 0 18px;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.kp-plak{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.kp-plak input{flex:1 1 220px;min-width:0;font:11.5px ui-monospace,SFMono-Regular,Menlo,monospace}
.ib2-funnel{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:10px;margin-bottom:10px;background:rgba(59,110,165,.07);border:1px solid rgba(59,110,165,.25);font-size:13px;line-height:1.45}
.ib2-funnel>b{font-size:12px;color:var(--blu,var(--acc))} .ib2-funnel em{font-style:normal;color:var(--red);font-weight:600}
.ib2-funnel.fout{background:rgba(180,35,24,.06);border-color:rgba(180,35,24,.3)}
.rsm-naam small.rsm-cijfers{white-space:normal;overflow:visible;line-height:1.45;margin-top:2px}
/* 04-10: groene meldingen die nog als .warn met groene inline-stijl gebouwd zijn: groen vinkje i.p.v. amber driehoek */
main.pmain .warn:is([style*="47,122,74"],[style*="var(--grn)"])::before{-webkit-mask-image:var(--ic-ok);mask-image:var(--ic-ok);background:var(--grn)}

/* ---------- Studentendiner (04-10) ---------- */
.pcard.din{display:block;margin:0 0 16px;border-left:3px solid var(--grn)}
.din-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.din-kop{font-size:15px;font-weight:650;letter-spacing:-.2px}
.din-intro,.din-mijn{font-size:13.5px;line-height:1.55;margin:0 0 12px;color:var(--tx2,inherit)}
.din-form{display:flex;flex-direction:column;gap:12px}
.din-vraag{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:7px;min-width:0}
.din-vraag legend{font-size:13px;font-weight:600;margin-bottom:7px;padding:0}
.din-vraag legend .hint{font-weight:400;margin-left:4px}
.din-loc{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.din-keus{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);cursor:pointer;font-size:13.5px;min-height:44px;box-sizing:border-box}
.din-keus input{width:18px;height:18px;margin:0;accent-color:var(--grn);flex:none}
.din-keus:has(input:checked){border-color:color-mix(in srgb,var(--grn) 55%,var(--line));background:color-mix(in srgb,var(--grn) 9%,var(--panel))}
.din-niet{align-self:flex-start}
.din-fout{margin:0;color:var(--red);font-size:12.5px}
.din-knoppen{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.din-tel{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;margin-top:12px}
.din-groep{display:flex;flex-direction:column;gap:6px;min-width:0}
.din-sub{font-size:12px;color:var(--tx3)}
.din-bar{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(40px,1fr) 24px;align-items:center;gap:8px;font-size:12.5px}
.din-bar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.din-bar i{display:block;height:7px;border-radius:4px;background:color-mix(in srgb,var(--grn) 14%,var(--panel2));position:relative;overflow:hidden}
.din-bar i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--grn);border-radius:4px}
.din-bar b{text-align:right;font-variant-numeric:tabular-nums}
.din-noot{grid-column:1/-1;margin:4px 0 0}
.din-modal{max-width:480px}
.din-beheer .din-btbl{display:flex;flex-direction:column}
.din-brij{display:grid;grid-template-columns:200px 36px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;align-items:baseline}
.din-brij em{font-style:normal;font-weight:650;font-variant-numeric:tabular-nums}
.din-beheer .din-knoppen{margin-top:10px}
@media (max-width:760px){
  .din-tel{grid-template-columns:1fr}
  .din-brij{grid-template-columns:1fr 30px}
  .din-brij div{grid-column:1/-1}
  .din-ovl{padding:16px 12px}
}

/* ---------- ROAS-sheet: Koppelingen + labels (Mees, 04-10) ---------- */
.rs-klab{font-size:10.5px;margin-left:4px;cursor:help;vertical-align:-3px;display:inline-block;max-width:min(240px,100%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rkp-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rkp-seg button{white-space:nowrap}
.rkp-lijst{display:flex;flex-direction:column}
.rkp-rij{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.2fr) 100px 70px;gap:12px;align-items:center;padding:10px 2px;border-top:1px solid var(--line);font-size:13px}
.rkp-rij .num{text-align:right;font-variant-numeric:tabular-nums}
.rkp-kop{font-size:12px;color:var(--tx3);border-top:0;padding-top:0}
.rkp-naam{display:flex;flex-direction:column;min-width:0}
.rkp-naam b,.rkp-naam small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rkp-naam small,.rkp-sub{color:var(--tx3);font-size:12px}
.rkp-doel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rkp-m{display:none;color:var(--tx3)}
.rkp-col{padding:12px 2px;border-top:1px solid var(--line)}
.rkp-colkop{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13.5px}
.rkp-colkop span{color:var(--tx2);font-variant-numeric:tabular-nums}
.rkp-sub{display:block;margin-top:4px;line-height:1.5}
.rkp-prods{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rkp-prod{font-size:12.5px;padding:4px 9px;border:1px solid var(--line);border-radius:999px;background:var(--panel2)}
.rkp-prod em{font-style:normal;color:var(--tx3);margin-left:4px}
@media (max-width:760px){
  .rkp-kop{display:none}
  .rkp-rij{grid-template-columns:1fr 1fr;gap:4px 12px}
  .rkp-naam,.rkp-doel{grid-column:1/-1}
  .rkp-doel{white-space:normal}
  .rkp-rij .num{text-align:left}
  .rkp-m{display:inline}
}

/* 04-10: advertentieaccount toevoegen (3 stappen) */
.modal.acctoev,.modal.crmw{max-width:520px;padding:22px;margin-top:8vh}
.modal.acctoev h3,.modal.crmw h3{margin:0 0 6px;font-size:18px}
.acctoev-st{list-style:none;counter-reset:st;margin:14px 0 0;padding:0;display:grid;gap:12px}
.acctoev-st li{counter-increment:st;display:grid;grid-template-columns:28px 1fr;gap:2px 10px;font-size:13.5px;line-height:1.5}
.acctoev-st li::before{content:counter(st);grid-row:1/3;width:26px;height:26px;border-radius:50%;background:var(--tx);color:var(--panel);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.acctoev-st li span{color:var(--tx2)}
.acctoev-knoppen,.crmw-voet{margin:18px 0 0;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.acc-nieuw{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:rgba(47,122,74,.14);color:var(--grn);font-size:11px;font-weight:700;vertical-align:1px}
tr.acc-nieuwrij{background:rgba(47,122,74,.06)}
.acc-mist{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.upl-acctoev{margin-top:8px}
.upl-pop .upl-acctoev{padding:8px;border-top:1px solid var(--line);margin:6px 0 0}
/* 04-10: merk in 3 vragen */
.crmw-tel{margin:0 0 4px;font-size:12px;color:var(--tx2);}
.modal.crmw .inp{width:100%;margin-top:10px}
.crmw-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.crmw-chip{border:1px solid var(--line2);background:var(--panel);color:var(--tx);border-radius:999px;padding:8px 13px;font:inherit;font-size:13.5px;cursor:pointer;min-height:40px}
.crmw-chip.on{background:var(--tx);color:var(--panel);border-color:var(--tx)}
.crmw-keus{display:grid;gap:8px;margin-top:12px}
.crmw-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1px solid var(--line2);background:var(--panel);color:var(--tx);border-radius:12px;padding:12px 14px;font:inherit;cursor:pointer}
.crmw-opt span{font-size:12.5px;color:var(--tx2)}
.crmw-opt.on{border-color:var(--tx);box-shadow:0 0 0 1px var(--tx)}
.crmw-sam{margin:10px 0;font-size:14px}
.crm-meer{margin:6px 0 14px;border-top:1px solid var(--line);padding-top:10px}
.crm-meer>summary{cursor:pointer;font-weight:600;font-size:13.5px}
.crm-meer>summary .hint{font-weight:400;margin-left:6px}
/* 04-10: advies JDA-set vs Andromeda, persona-standaard, Higgsfield vooraf */
.cr-advies{margin:12px 0 0;padding:12px 14px;border:1px solid rgba(47,122,74,.35);background:rgba(47,122,74,.06);border-radius:12px;font-size:13.5px;line-height:1.55}
.cr-advies p{margin:4px 0 10px;color:var(--tx2)}
.cr-advies-d>summary{cursor:pointer;font-weight:600}
.cr-advies-ok{font-size:12.5px;font-weight:600;color:var(--grn)}
.cr-persona{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);font-size:13px;color:var(--tx2);line-height:1.45}
.cr-persona>span:first-child{flex:1 1 240px;min-width:0}
.cr-persona b{color:var(--tx)}
.cr-persona-k{display:flex;gap:6px;flex-wrap:wrap}
.cr-hfmist{margin:0 0 12px}
.cr-hfmist p{margin:4px 0 10px;line-height:1.5}
.cr-hfmist .bar2{margin:0;gap:8px;flex-wrap:wrap}
@media (max-width:600px){
  .modal.acctoev,.modal.crmw{margin-top:2vh;padding:18px}
  .acctoev-knoppen .btn,.crmw-voet .btn{flex:1 1 auto}
}
.cr-persona-k .btn.gh{background:var(--panel);border-color:var(--line2)}
/* 05-10: "Zet dezelfde koppelingen aan als Jairo" (pariteitKaart) */
.pk .pk-stand{font-size:11.5px;color:var(--tx3);margin-left:auto}
.pk .pk-stand.pk-ja{color:var(--grn);font-weight:600}
.pk .pk-knop{margin-top:7px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pk .pk-knop .hint{font-size:12px}
@media (max-width:600px){.pk .pk-stand{margin-left:0;flex-basis:100%}}
/* ===== Bewaarde producten (05-10): knop Bewaren op elke productkaart, Research → Bewaard ===== */
.bp-knop{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;margin-top:6px;padding:4px 9px 4px 7px;min-height:30px;border-radius:7px;border:1px solid var(--line2);background:var(--panel);color:var(--tx2);font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.bp-knop .ico{width:15px;height:15px}
.bp-knop:hover{border-color:var(--tx3);color:var(--tx)}
.bp-knop.aan{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.bp-knop.aan .ico{fill:currentColor}
.bp-knop:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.bp-knop.bp-groot{margin-top:0;min-height:36px;padding:6px 12px 6px 10px;font-size:13px;flex:0 0 auto}
.rs3-pc .bp-knop,.rs3-szk .bp-knop{margin-top:4px}
.gcv-pw{display:flex;flex-direction:column;min-width:0}
.cw-acties .bp-knop{margin-top:0;min-height:30px}
.bp-kred{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bp-zekr{margin-top:2px}
.bp-zek{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.01em;padding:1px 6px;border-radius:5px;border:1px solid var(--line2);color:var(--tx2);white-space:nowrap}
.bp-zek.z-hoog{color:var(--grn);border-color:color-mix(in srgb,var(--grn) 40%,transparent)}
.bp-zek.z-middel{color:var(--amb);border-color:color-mix(in srgb,var(--amb) 40%,transparent)}
.bp-zek.z-laag{color:var(--tx3)}
.bp-vbalk{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;margin:0 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel2)}
.bp-vred{font-size:13px;min-width:0}
.bp-vred ul{margin:4px 0 0;padding-left:18px;color:var(--tx2)}
.bp-vred li{margin:1px 0}
.bp .bp-uitleg{margin:2px 0 10px;max-width:760px}
.bp-filters{margin-bottom:10px}
.bp-balk{position:sticky;top:calc(var(--rs3top,0px) + 46px);z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:8px 10px;margin:0 0 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);box-shadow:var(--shadow)}
.bp-balk .bp-n{font-size:12.5px;color:var(--tx2);min-width:80px}
.bp-balk .bp-bknop{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto;align-items:center}
.bp-balk.aan{border-color:var(--tx3)}
.bp-stsel select{min-width:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bp-lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:10px}
.bp-item{position:relative;display:grid;grid-template-columns:auto 84px minmax(0,1fr);gap:10px;align-items:start;padding:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);transition:border-color .15s}
.bp-item.sel{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.bp-vink{width:26px;height:26px;margin-top:2px;border-radius:7px;border:1.5px solid var(--line2);background:var(--panel);display:grid;place-items:center;cursor:pointer;padding:0}
.bp-vink svg{width:14px;height:14px;fill:none;stroke:transparent;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bp-vink[aria-pressed="true"]{background:var(--acc);border-color:var(--acc)}
.bp-vink[aria-pressed="true"] svg{stroke:var(--on-acc)}
.bp-vink:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.bp-img{width:84px;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--panel2);display:block}
.bp-img img{width:100%;height:100%;object-fit:cover;display:block}
.bp-info{min-width:0;display:flex;flex-direction:column;gap:4px}
.bp-r1 b{font-size:13.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bp-r2{display:flex;flex-wrap:wrap;align-items:center;gap:5px 6px;font-size:12.5px;color:var(--tx2)}
.bp-r2 .bp-stchip{margin-left:auto}
.bp-red{margin:0;padding-left:16px;font-size:12px;color:var(--tx2);line-height:1.45}
.bp-stap{margin:0;font-size:12px;color:var(--tx3);line-height:1.45}
.bp-res{display:block;color:var(--tx);font-weight:600;margin-bottom:1px}
.bp-acties{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:2px}
.bp-acties select{height:30px;font-size:12.5px;padding:0 8px}
.bp-item textarea.bp-notitie{width:100%;min-height:34px;height:34px;font-size:12.5px;line-height:1.4;padding:7px 9px;resize:vertical;box-sizing:border-box}
.bp-item textarea.bp-notitie:focus{height:72px}
.bp-acties select.bp-st-winnaar{color:var(--grn);border-color:color-mix(in srgb,var(--grn) 45%,transparent);font-weight:600}
.bp-acties select.bp-st-killed{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,transparent)}
.bp-acties select.bp-st-getest{color:var(--amb);border-color:color-mix(in srgb,var(--amb) 45%,transparent)}
@media (max-width:720px){
  .bp-lijst{grid-template-columns:1fr}
  .bp-item{grid-template-columns:auto 64px minmax(0,1fr);gap:8px;padding:9px}
  .bp-img{width:64px}
  .bp-balk{position:static;padding:8px;gap:6px 10px;box-shadow:none}
  .bp-balk.aan{position:fixed;top:auto;left:8px;right:8px;bottom:calc(var(--tbh,0px) + 8px);z-index:57;margin:0;box-shadow:0 10px 30px rgba(0,0,0,.25)}
  .bp-balk:not(.aan) .bp-bknop{display:none}
  .bp-balk .bp-bknop{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;margin-left:0}
  .bp-balk .bp-bknop .btn,.bp-balk .bp-bknop select{width:100%;min-height:38px;font-size:12.5px;padding:0 8px}
  .bp-balk .bp-bknop .bp-stsel{display:block;min-width:0}
  .bp.sel-aan .bp-lijst{padding-bottom:170px}
  .bp-vbalk{flex-direction:column}
}
/* 05-10 (cijfers-audit): korte uitleg onder elke tegel op de telefoon (de lange .wat staat daar uit) */
.mtr .wat-kort{display:none}
@media (max-width:860px){ .mhero .mtr .wat-kort,.mstrook .mtr .wat-kort{display:block;font-size:11px;line-height:1.35;color:var(--tx3);margin-top:3px} }
.plsync{font-size:11.5px}

/* ===== 05-10: voorbeeld van een tool met een slotje (aboVoorbeeld) + slotje in het menu ===== */
.ab-vbslot{margin-left:auto;display:inline-flex;align-items:center;gap:4px;flex:none;color:inherit;opacity:.7}
.ab-vbslot .ab-slot{opacity:1;width:11px;height:11px}
.ab-vbslot b{font-size:10px;font-weight:700;letter-spacing:.02em;padding:1px 6px;border-radius:999px;background:#e9b949;color:#1a1204}
.ab-vbslot.plus{opacity:1}
.pnav .ab-vbslot~.cnt{margin-left:6px}
.mrij .ab-vbslot{margin-left:8px;color:var(--tx3);opacity:1}
.mrij .ab-vbslot .ab-slot{width:13px;height:13px}
.tbslot{position:absolute;right:9px;bottom:1px;width:14px;height:14px;border-radius:50%;display:grid;place-items:center;background:var(--zij);color:var(--zijtx)}
.tbslot .ab-slot{width:9px;height:9px;opacity:.9}

.abvb{max-width:1040px}
.abvb-kop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.abvb-badge{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--acc);color:var(--on-acc,#fff)}
.abvb-laag{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--tx2);padding:3px 9px;border-radius:999px;border:1px solid var(--line)}
.abvb-laag .ab-slot{opacity:.8}
.abvb-laag.plus{border-color:#e9b949;background:color-mix(in srgb,#e9b949 14%,transparent);color:var(--tx)}
.abvb-nav{margin-left:auto;display:inline-flex;align-items:center;gap:2px;font-size:12px;color:var(--tx3);font-variant-numeric:tabular-nums}
.abvb-nav button{width:32px;height:32px;border-radius:9px;font-size:20px;line-height:1;color:var(--tx);display:grid;place-items:center}
.abvb-nav button:hover{background:var(--hover)}
.abvb h1{font-size:30px;letter-spacing:-.02em;margin:0 0 6px;line-height:1.1}
.abvb-zin{font-size:15px;line-height:1.5;color:var(--tx2);margin:0 0 18px;max-width:640px}
.abvb-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr);gap:22px;align-items:start}
.abvb-demo{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.abvb-demokop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--panel2)}
.abvb-lint{font-size:12px;font-weight:600;color:var(--tx3)}
.abvb-seg{display:flex;gap:4px;margin-left:auto;overflow-x:auto;max-width:100%;scrollbar-width:none}
.abvb-seg::-webkit-scrollbar{display:none}
.abvb-seg button{flex:none;font-size:12.5px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);color:var(--tx2);background:var(--panel);white-space:nowrap}
.abvb-seg button.on{background:var(--acc);border-color:var(--acc);color:var(--on-acc,#fff);font-weight:600}
.abvb-demobody{padding:14px;min-height:230px;animation:abvbIn .22s ease}
@keyframes abvbIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.abvb-demobody{animation:none}}
.abvb-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.abvb-kpi{border:1px solid var(--line);border-radius:10px;padding:9px 10px;background:var(--panel)}
.abvb-kpi span{display:block;font-size:11.5px;color:var(--tx3)}
.abvb-kpi b{display:block;font-size:19px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:2px}
.abvb-kpi small{font-size:11.5px;color:var(--tx3)}.abvb-kpi small.op{color:var(--grn);font-weight:600}
.abvb-balken{display:flex;align-items:flex-end;gap:8px;height:120px;margin-top:14px;padding:0 2px}
.abvb-balken>div{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px}
.abvb-balken i{display:block;width:100%;max-width:34px;border-radius:6px 6px 2px 2px;background:var(--tx);opacity:.85}
.abvb-balken>div:last-child i{background:var(--grn);opacity:1}
.abvb-balken span{font-size:10.5px;color:var(--tx3)}
.abvb-voet{font-size:11.5px;color:var(--tx3);margin:8px 0 0}
.abvb-tabel{width:100%;border-collapse:collapse;font-size:13px}
.abvb-tabel th{font-size:12px;font-weight:600;color:var(--tx3);text-align:left;padding:0 6px 8px;}
.abvb-tabel td{padding:10px 6px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums;white-space:nowrap}
.abvb-tabel td:first-child{white-space:normal;font-weight:550}
.abvb-tabel th:not(:first-child),.abvb-tabel td:not(:first-child){text-align:right}
.abvb-lijst{list-style:none;margin:0;padding:0}
.abvb-lijst li{display:flex;align-items:center;gap:11px;padding:10px 2px;border-top:1px solid var(--line)}
.abvb-lijst li:first-child{border-top:0;padding-top:2px}
.abvb-lico{flex:0 0 34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--panel2);border:1px solid var(--line);color:var(--tx)}
.abvb-ltx{flex:1;min-width:0}
.abvb-ltx b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.abvb-ltx small{display:block;font-size:12px;color:var(--tx3);line-height:1.35;margin-top:1px}
.abvb-lijst em{font-style:normal;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.abvb-lijst .chip,.abvb-tabel .chip,.abvb-ad .chip{white-space:nowrap;font-size:11px}
.abvb-chat{display:flex;flex-direction:column;gap:9px}
.abvb-msg{max-width:88%;padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.45}
.abvb-msg p{margin:0}
.abvb-msg.jij,.abvb-msg.klant{align-self:flex-end;background:var(--acc);color:var(--on-acc,#fff);border-bottom-right-radius:4px}
.abvb-msg.klant{align-self:flex-start;background:var(--panel2);color:var(--tx);border:1px solid var(--line);border-radius:14px;border-bottom-left-radius:4px}
.abvb-msg.auto{align-self:flex-start;background:color-mix(in srgb,var(--grn) 9%,var(--panel));border:1px solid color-mix(in srgb,var(--grn) 30%,var(--line));border-bottom-left-radius:4px}
.abvb-msg.auto small{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--grn);margin-bottom:3px}
.abvb-msg.auto small .ico{width:12px;height:12px}
.abvb-chatknop{display:flex;gap:6px;margin-top:2px}
.abvb-chatknop span{font-size:12.5px;padding:6px 12px;border-radius:9px;border:1px solid var(--line);color:var(--tx2)}
.abvb-chatknop span.pri{background:var(--acc);border-color:var(--acc);color:var(--on-acc,#fff);font-weight:600}
.abvb-beelden{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.abvb-ad{position:relative;display:flex;flex-direction:column;gap:6px}
.abvb-adbeeld{aspect-ratio:4/5;border-radius:10px;display:flex;align-items:flex-end;padding:10px;
  background:radial-gradient(120% 80% at 70% 25%,hsl(var(--h) 45% 92%) 0,transparent 60%),linear-gradient(165deg,hsl(var(--h) 38% 82%),hsl(var(--h) 30% 62%));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.abvb-adbeeld span{font:500 14px/1.2 var(--kopfont);color:#1a1712;letter-spacing:-.01em}
.abvb-adtx b{display:block;font-size:12.5px;font-weight:600}
.abvb-adtx small{display:block;font-size:11.5px;color:var(--tx3)}
.abvb-ad .chip{position:absolute;top:7px;left:7px;background:var(--panel);color:var(--tx)}
.abvb-tekst b{display:block;font:500 20px/1.25 var(--kopfont);margin-bottom:8px}
.abvb-tekst blockquote{margin:0 0 14px;padding:11px 13px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);font-size:13.5px;line-height:1.45}
.abvb-score{height:8px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);overflow:hidden;margin:0 0 12px}
.abvb-score i{display:block;height:100%;background:var(--grn);border-radius:99px}
.abvb-tekst p{margin:0 0 8px;font-size:13.5px;line-height:1.5;color:var(--tx2);padding-left:12px;border-left:2px solid var(--line2)}
.abvb-pitch{display:flex;flex-direction:column;gap:12px}
.abvb-punten{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.abvb-punten li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;line-height:1.4}
.abvb-punten li svg{flex:none;margin-top:3px;color:var(--grn)}
.abvb-proof{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--tx3);margin:0}
.abvb-proof .ico{flex:none}
.abvb-cta{display:flex;flex-direction:column;gap:2px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.abvb-prijs{display:flex;align-items:center;gap:10px}
.abvb-prijs b{font:600 28px/1 var(--font);letter-spacing:-.03em}
.abvb-prijs span{font-size:12px;line-height:1.35;color:var(--tx3)}
.abvb-prijs i{font-style:normal}
.abvb-knop.v5-cta{margin:10px 0 0;height:48px}
.abvb-alle{align-self:flex-start}
.v5-kaart.abvb-flits{animation:abvbFlits 1.6s ease}
@keyframes abvbFlits{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 3px #e9b949}}
html[data-theme="dark"] .abvb-adbeeld{background:linear-gradient(165deg,hsl(var(--h) 22% 42%),hsl(var(--h) 20% 28%))}
html[data-theme="dark"] .abvb-adbeeld span{color:#F2F4F7}
html[data-theme="dark"] .ab-vbslot b,html[data-theme="dark"] .abvb-laag.plus{color:#1a1204}
html[data-theme="dark"] .abvb-laag.plus{color:var(--tx)}
@media (max-width:860px){
  .abvb h1{font-size:24px;margin-bottom:4px}
  .abvb-zin{font-size:14px;margin-bottom:12px}
  .abvb-kop{margin-bottom:8px}
  .abvb-grid{grid-template-columns:1fr;gap:12px}
  .abvb-demobody{min-height:0;padding:12px}
  .abvb-demokop{padding:8px 10px}
  .abvb-balken{height:78px;margin-top:10px}
  .abvb-kpi b{font-size:16px}
  .abvb-lijst li{padding:8px 2px}
  .abvb-lico{flex-basis:30px;height:30px}
  .abvb-tabel td{padding:8px 4px}
  .abvb-adbeeld{aspect-ratio:1/1;padding:8px}
  .abvb-adbeeld span{font-size:12px}
  .abvb-punten li{font-size:14px}
  .abvb-cta{position:sticky;bottom:calc(var(--tbh,0px) + 8px);z-index:3;flex-direction:row;align-items:center;gap:12px;padding:10px 10px 10px 14px;box-shadow:0 8px 28px rgba(0,0,0,.14)}
  .abvb-prijs{flex-direction:column;align-items:flex-start;gap:2px}
  .abvb-prijs b{font-size:22px}
  .abvb-prijs span{font-size:11px}
  .abvb-lang{display:none}
  .abvb-kop{flex-wrap:nowrap}
  .abvb-nav{gap:0}
  .abvb-demokop{flex-wrap:nowrap}
  .abvb-seg{order:0;flex:1 1 auto;min-width:0;width:auto}
  .abvb-lint{order:1;flex:none;font-size:10px}
  .abvb-knop.v5-cta{margin:0 0 0 auto;width:auto;flex:1 1 auto;max-width:210px;height:46px;font-size:15.5px;padding:0 14px}
  .abvb-pitch{gap:10px}
  .abvb-demo{order:0}
}

/* ---------- Mobiel-audit 05-10 (390×844 en 360×780): minder scrollen, belangrijkste eerst, tikvlakken ≥ 44px ----------
   Alleen op de telefoon; de desktop blijft zoals hij was. */
@media (max-width:860px), (max-width:1023px) and (pointer:coarse){
  /* Brede tabellen als kaartjes (mobTabelKaarten in app.js): eerste cel = titel, elke waarde met zijn kolomnaam. */
  #portaal table.mkaart{display:block;min-width:0!important;width:100%!important;border-collapse:separate}
  #portaal table.mkaart thead{display:none}
  #portaal table.mkaart tbody,#portaal table.mkaart tfoot{display:block}
  #portaal table.mkaart tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;padding:12px 12px 13px;border-top:1px solid var(--line)}
  #portaal table.mkaart tbody tr:first-child{border-top:0}
  #portaal table.mkaart td{display:block;position:static!important;padding:0!important;border:0!important;text-align:left!important;
    background:none!important;min-width:0;max-width:none!important;white-space:normal!important;overflow-wrap:anywhere;font-size:14px;line-height:1.35}
  #portaal table.mkaart td:first-child,#portaal table.mkaart td.mbreed{grid-column:1 / -1;font-size:14.5px}
  #portaal table.mkaart td:first-child .hint{font-size:12px!important}
  #portaal table.mkaart td[data-ml]::before{content:attr(data-ml);display:block;font-size:11.5px;font-weight:500;color:var(--tx3);margin-bottom:1px;letter-spacing:.01em}
  #portaal table.mkaart td:empty{display:none}
  #portaal table.mkaart tr.mverberg{display:none}
  #portaal .tblwrap:has(> table.mkaart),#portaal div[style*="overflow"]:has(> table.mkaart){overflow:visible!important}
  #portaal .mtabelmeer{display:flex;width:100%;justify-content:center;min-height:44px;margin:10px 0 4px}

  /* "Meer uitleg": rechts op dezelfde regel als de ingeklapte uitleg; de hele regel is een tikvlak van 44px. */
  .ux-kortw{position:relative}
  .ux-kortw > .ux-kort{padding-right:96px}
  .ux-kortw > .ux-kort + .ux-meer{position:absolute;left:0;right:0;top:-11px;height:44px;min-height:44px;margin:0;justify-content:flex-end;
    align-items:center;font-size:13px;color:var(--tx2);-webkit-tap-highlight-color:transparent}
  .ux-meer{min-height:44px}

  /* Cijfers: de regel "bijgewerkt" kort houden (de tijdzone staat in de uitleg van de pagina). */
  #portaal .plsync{margin-top:-10px!important;margin-bottom:8px!important}
  #portaal .plsync-tz{display:none}

  /* Stappenkaarten: van een afgeronde stap alleen de titel; de uitleg bij de stap die nu aan de beurt is. */
  #portaal .stappen li.klaar .stappen-tekst p{display:none}
  #portaal .stappen li{padding:9px 0}

  /* Creative-analyse: de winnaarsrij liet de knop "Maak iteraties" links buiten de kaart hangen. */
  .crea-rij > div[style*="flex-direction:column"]{grid-column:1 / -1;flex-direction:row!important;align-items:center!important;justify-content:space-between;flex-wrap:wrap}
  .crea-rij > div[style*="flex-direction:column"] .crea-kpi{grid-template-columns:repeat(3,auto)!important;gap:2px 16px;text-align:left}
  .crea-rij > div[style*="flex-direction:column"] .btn{min-height:44px}
  .crea-kpi span{white-space:nowrap}

  /* Comp-watch: beeld en naam naast elkaar, de tekst (3 regels) en de knoppen over de hele breedte. */
  .cw-item{grid-template-columns:72px minmax(0,1fr);gap:4px 12px;padding:12px}
  .cw-item .cw-beeld{width:72px;grid-row:1 / span 3;align-self:start}
  .cw-item .cw-tekst{display:contents}
  .cw-item .cw-tekst > *{grid-column:2;min-width:0}
  .cw-item .cw-tekst > p,.cw-item .cw-tekst > .cw-acties{grid-column:1 / -1}
  .cw-item .cw-tekst > p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;font-size:13.5px}
  .cw-item .cw-kop{font-size:14px;margin:0}
  .cw-acties{flex-wrap:nowrap;gap:6px;margin-top:6px}
  .cw-acties > *{flex:1 1 0;min-height:44px;justify-content:center;white-space:nowrap;min-width:0}
  .cw-meer{display:flex;width:100%;justify-content:center;min-height:44px;margin:4px 0 14px}

  /* Winnaars van de week: beeld links, tekst rechts (was een vierkant beeld over de hele breedte per kaart). */
  .wk-grid{grid-template-columns:1fr;gap:10px}
  .wk-kaart{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:start}
  .wk-kaart img,.wk-kaart .wk-geen{width:96px;height:96px;aspect-ratio:auto;margin:12px 0 12px 12px;border-radius:8px}
  .wk-tekst{padding:12px}
  .wk-tekst p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .wk-tekst .btn{min-height:44px;align-self:stretch;justify-content:center}

  /* Klantenservice-inbox: zoeken, sorteren en tags compact, zodat het eerste gesprek boven de vouw staat.
     Rij 1: zoeken + vernieuwen (pictogram); rij 2: sorteren en tags naast elkaar. */
  .ib2 .ib2-lijstkop{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px}
  .ib2 .ib2-lijstkop > *{flex:1 1 100%;min-width:0}
  .ib2 .ib2-lijstkop > .ib2-autopct.m{margin:0;padding:6px 10px;order:0}
  .ib2 .ib2-lijstkop > .ib-titel{margin:0;order:0}
  .ib2 .ib2-lijstkop > .ib-titel:not(:has(.ib2-tagchip)){display:none}
  .ib2 .ib2-lijstkop > .ib-zoek,.ib2 .ib2-lijstkop > .ib-mfilters{display:contents}
  .ib2 .ib2-lijstkop .ib-zoek > input{order:1;flex:1 1 calc(100% - 52px);min-width:0}
  .ib2 .ib2-lijstkop .ib-mfilters > .btn:first-of-type{order:2}
  .ib2 .ib2-lijstkop .ib-zoek > select,.ib2 .ib2-lijstkop .ib-mfilters > select{order:3;flex:1 1 calc(50% - 4px);min-width:0!important;width:auto}
  .ib2 .ib2-lijstkop .ib-mfilters > .btn{flex:none;white-space:nowrap;min-height:44px}
  .ib2 .ib2-lijstkop .ib-mfilters > .btn ~ .btn{order:4;flex:1 1 100%}
  .ib2 .ib2-lijstkop > .ib-bulk{order:5}
}
@media (max-width:860px), (max-width:1023px) and (pointer:coarse){
  /* Tikvlakken (mobiel-audit 05-10): periode-, tab- en keuzeknoppen 44px hoog; kleine links en sterren krijgen een onzichtbaar
     tikvlak van 44px zonder dat de opmaak verschuift. */
  #portaal .seg > button,#portaal .rs3-seg > button,#portaal .lb-seg > button,#portaal .subtabs > button,#portaal .rs3-tegoed,
  #portaal .gc-rij,#portaal .upl-mknop,#portaal .ib-mchips > button{min-height:44px}
  #portaal main summary{min-height:44px;box-sizing:border-box;padding-top:10px;padding-bottom:10px}
  #portaal :is(a.rs-open,a.pl-naar,a.ber-mist,.rs2-link,.rs3-help,.cw-ster,.rs2-chip,.ab-link,.ib2-tagchip a,.ib2-tlink,.bp-knop,.cw-wk){position:relative}
  #portaal :is(a.rs-open,a.pl-naar,a.ber-mist,.rs2-link,.rs3-help,.cw-ster,.rs2-chip,.ab-link,.ib2-tagchip a,.ib2-tlink,.bp-knop,.cw-wk)::after{
    content:'';position:absolute;top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px));left:min(0px,calc(50% - 22px));right:min(0px,calc(50% - 22px))}
}
@media (max-width:860px), (max-width:1023px) and (pointer:coarse){
  /* Klantenservice: de actiemelding op één regel met de knop ernaast; met een gesprek open alleen het gesprek. */
  #portaal .alertrow.ux-melding{flex-wrap:nowrap;padding-top:8px;padding-bottom:8px}
  #portaal .alertrow.ux-melding > b{flex:1 1 auto;min-width:0;font-size:13.5px;line-height:1.35}
  #portaal .alertrow.ux-melding > .btn{flex:none;margin-left:0!important}
  #portaal main:has(.ib2.heeftsel) :is(.alertrow.ux-melding,details.ks-meld){display:none}
  #portaal .ib2-tabs > button{min-height:44px}
  /* Vernieuwen als pictogram, zodat sorteren en tags leesbaar blijven. */
  .ib2 .ib2-lijstkop .ib-mfilters > .btn:first-of-type{font-size:0;width:44px;padding:0;justify-content:center}
  .ib2 .ib2-lijstkop .ib-mfilters > .btn:first-of-type::before{content:'↻';font-size:20px;line-height:1}
}
@media (max-width:860px), (max-width:1023px) and (pointer:coarse){
  /* "Wat nu werkt": per les 3 regels; tik op de les voor de hele tekst. */
  #portaal .kk-les:not(.open) > .hint{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
  #portaal [data-toonmeer]{min-height:44px}
}
@media (max-width:860px), (max-width:1023px) and (pointer:coarse){
  /* Kleine vinkjes in tabellen (Meldingen) iets groter. */
  #portaal main td input[type=checkbox]{width:24px;height:24px}
}

/* ---------- Bon / factuur indienen (05-10) ---------- */
.bon{display:grid;gap:14px;max-width:820px}
.bon-intro{color:var(--tx2);font-size:13.5px;line-height:1.55;margin-bottom:14px}
.bon-intro b{color:var(--tx)}
.bon-knoppen{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bon-groot{position:relative;display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 16px;border-radius:12px;border:1px solid var(--line2);background:var(--panel2);cursor:pointer;transition:background .12s,border-color .12s}
.bon-groot:hover{background:var(--hover)}
.bon-groot:focus-within{outline:2px solid var(--tx2);outline-offset:2px}
.bon-groot.pri{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.bon-groot.pri:hover{opacity:.92}
.bon-groot span{display:flex;flex-direction:column;line-height:1.25}
.bon-groot b{font-size:15px;font-weight:600}
.bon-groot small{font-size:12px;opacity:.7}
.bon-groot .ico{flex:0 0 auto}
.bon-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);pointer-events:none}
.bon-knoppen.klein .bon-groot{min-height:52px}
.bon-res{display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:start}
.bon-thumb{position:relative;border-radius:10px;border:1px solid var(--line);background:var(--panel2);overflow:hidden;min-height:120px;display:grid;place-items:center}
.bon-thumb img{display:block;width:100%;height:auto;max-height:320px;object-fit:contain;background:#fff}
.bon-scaninfo{position:absolute;left:6px;bottom:6px;right:6px;font-size:11px;padding:3px 7px;border-radius:6px;background:rgba(0,0,0,.62);color:#fff;text-align:center}
.bon-pdfico{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--tx2);font-size:12px;padding:24px}
.bon-pdfico .ico{width:34px;height:34px}
.bon-bezig{display:flex;flex-direction:column;gap:6px;justify-content:center;min-height:120px}
.bon-bezig b{font-weight:600}
.bon-spin{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--line2);border-top-color:var(--tx);animation:bonspin .8s linear infinite}
@keyframes bonspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bon-spin{animation-duration:2.4s}}
.bon-velden{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 12px}
.bon-velden .bon-vol{grid-column:1/-1}
.bon-velden label.f{margin-bottom:10px;min-width:0}
.bon-velden .inp{width:100%;min-width:0}
.bon-naam{margin-top:2px;word-break:break-all}
.bon-naam code,.bon-l2 code,.bon-ok code{font-size:12px;background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.bon-orig{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tx2);margin-top:10px;cursor:pointer}
.bon-acties{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.bon-aftel{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;margin-bottom:14px;border-radius:10px;background:rgba(47,122,74,.1);border:1px solid rgba(47,122,74,.28)}
.bon-aftel div{display:flex;flex-direction:column;line-height:1.3}
.bon-aftel div span{font-size:12.5px;color:var(--tx2)}
.bon-aftel .btn{flex:0 0 auto}
.bon-balk{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--grn);transform-origin:left;animation:bonbalk 3s linear forwards}
@keyframes bonbalk{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.bon-fout{margin-bottom:14px}
.bon-ok{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:10px;background:rgba(47,122,74,.1);border:1px solid rgba(47,122,74,.28)}
.bon-ok div{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.bon-ok .hint,.bon-okn{word-break:break-all}
.bon-l2 code{align-self:flex-start}
.bon-ok b{font-size:16px}
.bon-vink{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--grn);color:#fff}
.bon-lijst{list-style:none;display:grid}
.bon-lijst li{padding:10px 0;border-top:1px solid var(--line)}
.bon-lijst li:first-child{border-top:0;padding-top:0}
.bon-l1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bon-l1 b{flex:1 1 140px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bon-ld{color:var(--tx2);font-size:12.5px;font-variant-numeric:tabular-nums;min-width:74px}
.bon-lb{font-variant-numeric:tabular-nums;font-weight:600}
.bon-l2{margin-top:4px;display:flex;flex-direction:column;gap:3px;word-break:break-all}
.bon-lf{font-size:12px;color:var(--red)}
.bon-l3{margin-top:6px}
@media (max-width:860px){
  .bon{max-width:none}
  .bon-knoppen{grid-template-columns:1fr}
  .bon-groot{min-height:60px}
  .bon-res{grid-template-columns:1fr}
  .bon-thumb{max-width:260px;justify-self:center;width:100%}
  .bon-thumb img{max-height:260px}
  .bon-bezig{min-height:0;align-items:center;text-align:center}
  .bon-velden{grid-template-columns:1fr 1fr}
  .bon-velden .inp{height:42px;font-size:16px}
  .bon-acties .btn{flex:1 1 auto;min-height:44px}
  .bon-aftel{flex-direction:column;align-items:stretch}
  .bon-aftel .btn{min-height:44px}
}
/* 06-10: verplichte adres-popup boven alles (ook de rondleiding). */
.adres-ovl{z-index:9999}
.adres-ovl .g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:480px){.adres-ovl .g2{grid-template-columns:1fr}}
.adres-ovl > .modal::before{display:none}
/* 06-10: statusregel koppelingen (Winkel & koppelingen) */
.kw-overzicht{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px;font-size:12.5px}
.kw-otitel{color:var(--tx2);margin-right:2px}
.kw-ochip{border:1px solid var(--line);background:var(--bg2,transparent);border-radius:999px;padding:3px 10px;font:inherit;cursor:pointer;color:inherit}
.kw-ochip.kw-grn{border-color:color-mix(in srgb,var(--grn,#2e7d4f) 45%,transparent)}
.kw-ochip.kw-amb{border-color:color-mix(in srgb,var(--amb,#d9822b) 60%,transparent)}
.kw-ochip.kw-rd{border-color:color-mix(in srgb,var(--red,#c0392b) 60%,transparent);font-weight:600}
.wk-links{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 6px}

/* Verschil met de vorige periode: eigen klein label, geen ·-reeks (08-10). */
.pl-delta{display:inline-block;margin-left:4px;padding:0 6px;border-radius:999px;background:color-mix(in srgb,currentColor 10%,transparent);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
/* ============================================================
   Klantenservice fase 3 (08-10): macro-actiebundel, regels, team-rollen,
   CSAT, statistieken, opgeslagen weergaven. Nieuwe CSS onderaan toegevoegd.
   ============================================================ */
.ksd-macrorij{flex-wrap:wrap}
.ksd-macroinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ksd-macroinfo .hint{white-space:normal}
.ksd-macrozet{color:var(--acc)}
.ksd-regelblok{border-top:1px solid var(--line);padding-top:10px;margin-top:4px;display:flex;flex-direction:column;gap:8px}
.ksd-regelblok > b{font-size:13px}
.ksd-regelrij{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ksd-regelrij .inp{flex:1;min-width:120px}
.ksd-regelaan{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--tx2);cursor:pointer}
.ksd-meekijk{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin:0 0 10px}
.ksd-statsperiode{display:flex;gap:6px;margin:0 0 14px}
.ksd-statsgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 14px}
.ksd-stattegel{border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.ksd-stattegel b{font-size:20px;font-variant-numeric:tabular-nums}
.ksd-stattegel span{font-size:12.5px;color:var(--tx2)}
.ksd-statstabel{width:100%;border-collapse:collapse;font-size:13px}
.ksd-statstabel th{text-align:left;font-weight:600;color:var(--tx2);font-size:12.5px;padding:0 8px 6px 0;border-bottom:1px solid var(--line)}
.ksd-statstabel td{padding:7px 8px 7px 0;border-bottom:1px solid var(--line)}
.ksd-statstabel tr:last-child td{border-bottom:0}
.ksd-eigenweergaverij{display:flex;align-items:center;gap:2px}
.ksd-eigenweergaverij .ib-view{flex:1}
.ksd-viewweg{border:0;background:transparent;color:var(--tx2);cursor:pointer;font-size:14px;padding:4px 6px;border-radius:6px;line-height:1}
.ksd-viewweg:hover{background:var(--hover);color:var(--tx)}
.ksd-viewform{display:flex;flex-direction:column;gap:6px;padding:8px 10px 2px}
.ksd-viewform .inp{width:100%}
.ksd-aanwezig{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:7px 12px;margin:0 0 10px;color:var(--tx2)}
.ib2-aanwezigstip{width:20px;height:20px;border-radius:999px;background:var(--line2);color:var(--tx);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex:0 0 auto;align-self:center}
.ib2-aanwezigstip.typt{background:var(--acc);color:var(--on-acc,#fff)}
.ib2-rijclaim{flex:0 0 auto;align-self:center;margin-left:4px}
/* 08-10: op smal (telefoon) week de naam (vaste 160px) + de twee knoppen de tekst van een macro/regel samen in een paar
   pixels, waardoor elk woord apart afbrak. Onder 600px de rij laten stapelen in plaats van naast elkaar te persen. */
@media (max-width:600px){
  .ksd-macrorij{flex-direction:column;align-items:flex-start;gap:4px}
  .ksd-macrorij b{flex:none}
  .ksd-macroinfo{width:100%}
}

/* 08-10: cijfertegels, overal één korte uitlegregel plus de link (geen lappen tekst op desktop). */
.mhero .mtr .wat-kort,.mstrook .mtr .wat-kort{display:block;font-size:12px;line-height:1.4;color:var(--tx3);margin-top:4px}
.mtr .mtr-naar{display:inline-block;margin-top:6px;font-size:12.5px;color:var(--tx2)}
.mtr .mtr-naar:hover{color:var(--tx)}

/* 09-10: Research → product: alle winkels met product, winkel en Ad Library */
.rs4-winkels{margin:14px 0 4px}
.rs4-wlijst{display:flex;flex-direction:column;gap:6px}
.rs4-wrij{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);min-width:0;flex-wrap:wrap}
.rs4-wnaam{flex:1 1 180px;min-width:0}
.rs4-wnaam b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs4-wnaam small{color:var(--tx3);font-size:12px}
.rs4-wknop{display:flex;gap:6px;flex-wrap:wrap}
.rs4-kaartknop{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.upl-crbeeld video{width:44px;height:44px;border-radius:6px;object-fit:cover;background:#000;display:block}
.upl-th video{width:100%;height:100%;object-fit:cover;display:block;background:#000}

/* 09-10: Gedrag (tracker) */
.gd-stand{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin-bottom:14px;flex-wrap:wrap}
.gd-stand .hint{display:block;margin-top:2px}
.gd-knoppen{display:flex;gap:8px;flex-wrap:wrap}
.gd-tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.gd-tegel{padding:14px 16px}.gd-tegel span{display:block;font-size:12.5px;color:var(--tx3)}.gd-tegel b{display:block;font-size:26px;letter-spacing:-.5px;margin-top:2px}.gd-tegel em{font-style:normal;font-size:12px;color:var(--tx3)}
.gd-blok{padding:16px;margin-bottom:14px}.gd-blok h3{font-size:14.5px;margin:0 0 10px}
.gd-twee{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;align-items:start}.gd-twee>.gd-blok{margin-bottom:14px}
.gd-rij{display:grid;grid-template-columns:minmax(110px,190px) 1fr auto;gap:10px;align-items:center;font-size:13px;margin:5px 0}
.gd-rij em{grid-column:2/4;font-style:normal;font-size:11.5px;color:var(--tx3);margin-top:-4px}
.gd-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx2)}
.gd-baan{height:10px;background:var(--panel2);border-radius:4px;overflow:hidden}.gd-baan i{display:block;height:100%;background:var(--acc);border-radius:0 4px 4px 0}
.gd-rij b{font-variant-numeric:tabular-nums;min-width:36px;text-align:right}
.gd-klik{display:grid;grid-template-columns:1fr 150px;gap:18px}
.gd-kaart{position:relative;width:120px;height:320px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);overflow:hidden}
.gd-kaart i{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--acc);opacity:.55;border:1px solid var(--panel)}
.gd-kaart i.m{opacity:.3}
.gd-kboven,.gd-konder{position:absolute;left:6px;font-size:10px;color:var(--tx3)}.gd-kboven{top:4px}.gd-konder{bottom:4px}
@media (max-width:640px){.gd-klik{grid-template-columns:1fr}.gd-rij{grid-template-columns:minmax(100px,150px) 1fr auto;align-items:start}
  /* 12-10 (controleur: "Productpagina · pro…" op de telefoon): laten wrappen i.p.v. afkappen, zodat de handle
     (bv. welk product) leesbaar blijft — de balk/het getal staan dan gewoon naast de eerste regel. */
  .gd-rij .gd-l{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;padding-top:1px}
  .gd-rij .gd-baan,.gd-rij>b{align-self:center}}
.gd-stand::before,.gd-stand::after{display:none!important;content:none!important}.gd-stand>div:first-child{flex:1 1 auto;min-width:0;margin:0!important}
/* 12-10: herontwerp (Shopify Analytics/Stripe-stijl) — statusregel met stip + ⋯-menu, (?)-tooltips, delta-pilletjes. */
.gd-status-regel{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--tx2);margin:0 0 14px;flex-wrap:wrap}
.gd-stip{width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:var(--tx3)}
.gd-stip-groen{background:var(--grn)}.gd-stip-amber{background:var(--amb,#e0a020)}.gd-stip-rood{background:var(--red)}.gd-stip-grijs{background:var(--tx3)}
.gd-kebab{margin-left:auto;position:relative}
/* 15-10: per stap de echte Shopify Analytics-cijfers ernaast (gedrag_shopify_dag): stip groen ≤ 5%, oranje ≤ 15%, rood > 15%. */
.gd-shop{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--tx2);margin:-1px 0 8px;font-variant-numeric:tabular-nums}
.gd-shop b{font-weight:600;color:var(--tx)}
/* Op de telefoon de uitleg onder een stap ("… stoppen hier — laatste pagina …") over de volle breedte, niet in de smalle balkkolom. */
@media (max-width:640px){.gd-rij-afhaak em{grid-column:1/4;margin-top:0}}
.gd-shop-kop{font-size:12.5px;color:var(--tx2);margin:0 0 10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
.gd-hulp{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--panel2);color:var(--tx3);
  font-size:10px;font-weight:700;cursor:help;flex:0 0 auto;margin-left:4px;border:1px solid var(--line);vertical-align:1px}
.gd-tegel b{display:flex;align-items:baseline;gap:2px;flex-wrap:wrap}

/* 13-10 (Jairo: "veel data die je niet makkelijk overzichtelijk hebt" + "kleine tekst op desktop"): grotere tekst,
   duidelijkere koppen, inklapbare secties, winkeloverzicht en de checkout-trechter. */
.gd-tegel{padding:16px 18px}
.gd-tegel span{font-size:13.5px}
.gd-tegel b{font-size:28px}
.gd-blok h3{font-size:16px}
.gd-rij{font-size:14.5px}
.gd-rij em{font-size:12.5px}
/* Eén zin boven alles: het automatisch bepaalde grootste afhaakpunt. */
.gd-samenvat{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;margin:0 0 14px;border-radius:12px;
  background:color-mix(in srgb,var(--red) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--red) 22%,var(--line))}
.gd-samenvat b{color:var(--red)}
.gd-samenvat svg{flex:0 0 auto;margin-top:2px}
/* Inklapbare secties: <details class="pcard gd-sectie">, open alleen voor wat het belangrijkst is. */
.gd-sectie{padding:0;margin-bottom:14px;overflow:hidden}
.gd-sectie > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:15px 18px;font-weight:650;font-size:15.5px}
.gd-sectie > summary::-webkit-details-marker{display:none}
.gd-sectie > summary::before{content:'';width:9px;height:9px;border-right:2px solid var(--tx3);border-bottom:2px solid var(--tx3);
  transform:rotate(-45deg);transition:transform .15s;flex:0 0 auto;margin-top:-2px}
.gd-sectie[open] > summary::before{transform:rotate(45deg);margin-top:2px}
.gd-sectie > summary em{font-style:normal;font-weight:500;font-size:13px;color:var(--tx3);margin-left:auto;margin-right:4px}
.gd-sectie > .gd-sectie-inhoud{padding:0 18px 18px}
.gd-sectie > .gd-sectie-inhoud > .gd-twee:last-child,.gd-sectie > .gd-sectie-inhoud > *:last-child{margin-bottom:0}
/* Zoekveld boven een lijst/tabel (producten, campagnes, pagina's). */
.gd-zoek{margin:0 0 10px;max-width:280px}
[data-gdfilter-rij].gd-verborgen{display:none!important}
/* Winkeloverzicht (admin zonder gekozen winkel): tabel i.p.v. een lege kaart. */
.gd-wtabel{width:100%;border-collapse:collapse;font-size:14px}
.gd-wtabel th{text-align:left;font-weight:600;color:var(--tx3);font-size:12.5px;text-transform:uppercase;letter-spacing:.02em;padding:8px 10px;border-bottom:1px solid var(--line)}
.gd-wtabel td{padding:10px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.gd-wtabel tbody tr{cursor:pointer}
.gd-wtabel tbody tr:hover{background:var(--hover,var(--panel2))}
.gd-wtabel td.num{text-align:right;font-variant-numeric:tabular-nums}
.gd-wrij-naam{font-weight:600}
.gd-wrij-student{color:var(--tx3);font-size:12.5px}
/* Checkout-trechter: dezelfde gd-rij-balkjes, eigen kleur zodat hij zich onderscheidt van de site-trechter. */
.gd-ck-baan i{background:var(--pur,#7a5a3a)}
/* 15-10: trechter als kaarten (Gedrag › Waar haken bezoekers af) */
.gd-fun{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:6px 0 12px}
.gd-fun-k{position:relative;padding:16px 12px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.gd-fun-k>span{display:block;font-size:12.5px;color:var(--tx3)}.gd-fun-k>b{display:block;font-size:24px;letter-spacing:-.5px;margin:2px 0 2px;font-variant-numeric:tabular-nums}
.gd-fun-k>small{display:block;font-size:11.5px;color:var(--tx3);line-height:1.4}.gd-fun-k em{font-style:normal}
.gd-fun-doel-rood{color:var(--red);font-weight:600}.gd-fun-doel-ok{color:var(--grn)}.gd-fun-rood-tekst{color:var(--red)}
.gd-fun-rood{border-color:var(--red)}.gd-fun-erg{box-shadow:0 0 0 2px var(--red) inset}
.gd-fun-drop{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:1px 9px;font-size:11.5px;font-weight:600;color:var(--red);white-space:nowrap;font-variant-numeric:tabular-nums}
.gd-fun-drop small{color:var(--tx3);font-weight:500;margin-left:5px}
.gd-fun-oordeel{margin:4px 0 6px;font-size:13.5px;line-height:1.45}.gd-fun-oordeel b{color:var(--red)}.gd-fun-oordeel-ok b{color:var(--grn)}
.gd-fun-cart{margin:0 0 6px;font-size:13px;color:var(--tx2);line-height:1.45}.gd-fun-bots{margin:0 0 8px}
/* 15-10: popup "nog twee stappen" (checkout op slot: contract/machtiging) */
.ck-slot-stap{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.ck-slot-stap:first-of-type{border-top:0;padding-top:4px}
.ck-slot-bol{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.ck-slot-stap.af .ck-slot-bol{background:var(--grn);color:#fff;border-color:var(--grn)}
.ck-slot-stap.af b{color:var(--tx3)}
.gd-fun-details{margin:8px 0 4px}.gd-fun-details>summary{cursor:pointer;margin-bottom:6px}
@media (max-width:760px){.gd-fun{grid-template-columns:1fr 1fr;gap:16px 10px}.gd-fun-k:first-child{grid-column:1/3}}
@media (max-width:430px){.gd-fun{grid-template-columns:1fr;gap:18px}.gd-fun-k:first-child{grid-column:auto}}
@media (max-width:640px){
  .gd-sectie > summary{padding:13px 14px;font-size:14.5px}
  .gd-sectie > .gd-sectie-inhoud{padding:0 14px 14px}
  .gd-wtabel{font-size:13px}
  /* 13-10 (controleur): op de telefoon Winkel, Bezoeken, Besteld, Omzet en de trackerstatus; de percentages en de trend
     staan op de winkelpagina zelf. Zo zie je ook op je telefoon of de tracker van een winkel kapot is. */
  .gd-wtabel th:nth-child(3),.gd-wtabel td:nth-child(3),.gd-wtabel th:nth-child(4),.gd-wtabel td:nth-child(4),
  .gd-wtabel th:nth-child(6),.gd-wtabel td:nth-child(6),.gd-wtabel th:nth-child(8),.gd-wtabel td:nth-child(8){display:none}
}

/* 09-10: link naar de creative onder elke ad-tegel; collecties: productlinks en de ads */
.rs4-adlink{font-size:12px;font-weight:600;color:var(--acc,#2563eb);text-decoration:none;margin-top:1px}
.rs4-adlink:hover{text-decoration:underline}
.rs3-colprod a{color:inherit;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rs3-colprod a:hover{text-decoration:underline}
.rs3-colads{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 2px;font-size:12px}
.rs3-colads b{font-size:12px;margin-right:2px}
.rs3-colads a{padding:3px 8px;border:1px solid var(--bd,#e5e7eb);border-radius:999px;color:inherit;text-decoration:none;white-space:nowrap}
.rs3-colads a:hover{background:var(--bg2,#f3f4f6)}

/* ---------- Exporteren naar Excel/Google Sheets (12-10, Jairo) ---------- */
.sheetexp{position:relative;display:inline-block}
.sheetexp>summary{list-style:none;cursor:pointer}
.sheetexp>summary::-webkit-details-marker{display:none}
.sheetexp-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);
  display:flex;flex-direction:column;min-width:252px;overflow:hidden;padding:4px}
.sheetexp-menu button{all:unset;cursor:pointer;padding:9px 11px;font-size:12.5px;color:var(--tx);
  border-radius:7px;display:block;width:100%;box-sizing:border-box}
.sheetexp-menu button:hover{background:var(--hover)}
.sheetexp-menu button small{display:block;color:var(--tx3);font-size:11px;font-weight:400;margin-top:1px}
/* =====================================================================================================================
   ks-gorgias (12-10) — Klantenservice als rustige werkplek. Alles hieronder hangt aan .ksx-main / .ksx (de inbox) en
   #portaal.ks-werk (alleen zolang de inbox open staat). Eén schaal: 4/8/12/16/24. Tekst 14px, meta 13px, kopjes 16–18px.
   Eén accent (inkt, --k-acc) voor de hoofdactie en de selectie; status alleen als stip + woord. Neutrale vlakken, los van
   het kleurthema van de hub (net als de oude inbox), met een eigen donkere variant.
   ===================================================================================================================== */
.ksx-main{--k-bg:#f5f6f8;--k-panel:#ffffff;--k-panel2:#f7f8fa;--k-hover:#f1f3f6;--k-sel:#eceff4;--k-line:#e4e7ec;--k-line2:#d2d7df;
  --k-tx:#14171c;--k-tx2:#454c58;--k-tx3:#636b78;--k-acc:#15181d;--k-on-acc:#ffffff;--k-blu:#2f62a8;--k-grn:#1f7a46;--k-amb:#9a5a06;--k-red:#b42318;
  --k-uit-bg:#e8f0fb;--k-uit-line:#bcd2ef;--k-uit-av:#2f62a8;--k-mis-bg:#fdecea;--k-mis-line:#f0b4ae;
  --k-schaduw:0 1px 2px rgba(16,24,40,.06),0 8px 24px -12px rgba(16,24,40,.18);--k-r:10px}
html[data-theme="dark"] .ksx-main{--k-bg:#101215;--k-panel:#16191d;--k-panel2:#1b1f24;--k-hover:#20252b;--k-sel:#262c34;--k-line:#2a3038;--k-line2:#38404a;
  --k-tx:#eef0f3;--k-tx2:#c3c8d0;--k-tx3:#9aa2ad;--k-acc:#eef0f3;--k-on-acc:#101215;--k-blu:#8db4ea;--k-grn:#7cc79e;--k-amb:#e2b169;--k-red:#f1958a;
  --k-uit-bg:#1a2639;--k-uit-line:#2e4666;--k-uit-av:#8db4ea;--k-mis-bg:#3a1f1d;--k-mis-line:#6b322d;
  --k-schaduw:0 1px 2px rgba(0,0,0,.4),0 12px 28px -12px rgba(0,0,0,.6)}
.ksx-main ::selection{background:color-mix(in srgb,var(--k-blu) 22%,transparent)}
.ksx-main :focus-visible{outline:2px solid var(--k-blu);outline-offset:2px}

/* --- de hub eromheen: zijbalk ingeklapt tot iconen, de werkplek vult het scherm --- */
@media (min-width:861px) and (pointer:fine), (min-width:1024px){
  #portaal.ks-werk:not(.ks-zij-open) .pside{width:64px;flex:0 0 64px;padding:10px 8px 24px;overflow-x:hidden;scrollbar-width:none}
  #portaal.ks-werk:not(.ks-zij-open) .pside::-webkit-scrollbar{display:none}
  #portaal.ks-werk:not(.ks-zij-open) .pside :is(.kop,.pnav-editbar,.winkelkiezer,select,.wk-kies,.wkiezer){display:none!important}
  #portaal.ks-werk:not(.ks-zij-open) .pnav{font-size:0;gap:0;justify-content:center;padding:10px 0;position:relative;min-height:40px}
  #portaal.ks-werk:not(.ks-zij-open) .pnav .ico{width:20px;flex:0 0 20px;font-size:14px;opacity:.85}
  #portaal.ks-werk:not(.ks-zij-open) .pnav .ico svg{width:19px;height:19px}
  #portaal.ks-werk:not(.ks-zij-open) .pnav :is(.ab-menuchip,.slotje){display:none}
  #portaal.ks-werk:not(.ks-zij-open) .pnav .cnt{position:absolute;top:3px;right:3px;margin:0;font-size:9.5px;line-height:14px;min-width:16px;padding:0 4px;text-align:center}
  #portaal.ks-werk .pmain.ksx-main{max-width:none;padding:12px 16px 16px!important;height:calc(100dvh - 60px);display:flex;flex-direction:column;overflow:hidden}
  #portaal.ks-werk .pmain.ksx-main > *{flex:0 0 auto}
  #portaal.ks-werk .pmain.ksx-main > .ksx{flex:1 1 auto;min-height:0}
  #portaal.ks-werk.hulp-fab-aan .pmain{padding-bottom:16px}
}
#portaal.ks-werk .pmain.ksx-main .setupbalk{margin-bottom:12px}

/* --- de kop: titel, Inbox/Meldingen, één statusregel, acties rechts --- */
.ksx-kop{display:flex;align-items:center;gap:12px;min-height:40px;margin:0 0 12px;flex-wrap:nowrap}
.ksx-titel{font:650 18px/1.2 var(--font)!important;letter-spacing:-.01em;margin:0!important;color:var(--tx);white-space:nowrap}
.ksx-zijknop{margin-left:-4px}
.ksx-tabs{display:flex;gap:2px;padding:2px;background:var(--k-panel2,var(--panel2));border:1px solid var(--k-line,var(--line));border-radius:9px;flex:0 0 auto}
.ksx-tabs button{height:30px;padding:0 12px;border-radius:7px;font-size:13.5px;font-weight:550;color:var(--k-tx2,var(--tx2));display:inline-flex;gap:6px;align-items:center;transition:background-color .15s,color .15s}
.ksx-tabs button:hover{color:var(--k-tx,var(--tx))}
.ksx-tabs button.on{background:var(--k-panel,var(--panel));color:var(--k-tx,var(--tx));box-shadow:0 1px 2px rgba(16,24,40,.08),0 0 0 1px var(--k-line,var(--line))}
.ksx-tabs b{font-size:12px;font-weight:600;color:var(--k-tx3,var(--tx3));font-variant-numeric:tabular-nums}
.ksx-tabs b.rood{color:var(--k-red,var(--red))}
.ksx-tabs .slotje{width:13px;height:13px}
.ksx-status{display:flex;gap:8px;align-items:center;flex:1 1 auto;min-width:0;overflow:hidden}
.ksx-sein{height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--k-line,var(--line));background:var(--k-panel,var(--panel));font-size:13px;color:var(--k-tx2,var(--tx2));
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;transition:background-color .15s,border-color .15s}
.ksx-sein::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--k-tx3,var(--tx3));flex:0 0 6px}
.ksx-sein:hover{background:var(--k-hover,var(--hover))}
.ksx-sein b{font-weight:600;color:var(--k-tx3,var(--tx3))}
.ksx-sein svg{width:14px;height:14px;opacity:.7}
.ksx-sein.rood{color:var(--k-red,var(--red));border-color:color-mix(in srgb,var(--k-red,var(--red)) 32%,var(--k-line,var(--line)));font-weight:600}
.ksx-sein.rood::before{background:var(--k-red,var(--red))}
.ksx-sein.amb::before{background:var(--k-amb,var(--amb))}
.ksx-kopacties{display:flex;gap:8px;align-items:center;margin-left:auto;flex:0 0 auto}
.ksx-kopacties .ks-inst > summary{min-height:32px;font-size:13px}
.ksx-meldpaneel{display:grid;gap:8px;margin:-4px 0 12px;padding:12px;border:1px solid var(--k-line,var(--line));border-radius:var(--k-r,10px);background:var(--k-panel,var(--panel));box-shadow:var(--k-schaduw)}
.ksx-meldpaneel > *{margin:0!important}
.ksx-onder{max-width:70ch}

/* --- gedeelde kleine onderdelen --- */
.ksx-k{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:8px;border:1px solid var(--k-line);background:var(--k-panel);color:var(--k-tx);
  font-size:13px;font-weight:550;white-space:nowrap;transition:background-color .15s,border-color .15s,transform .1s}
.ksx-k:hover{background:var(--k-hover);border-color:var(--k-line2)}
.ksx-k:active{transform:scale(.98)}
.ksx-k:disabled{opacity:.45;cursor:default}
.ksx-k svg{width:16px;height:16px;flex:0 0 16px;color:var(--k-tx2)}
.ksx-k.ghost{border-color:transparent;background:transparent;padding:0 8px}
.ksx-k.ghost:hover{background:var(--k-hover)}
.ksx-kop .ksx-k{--k-line:var(--line);--k-panel:var(--panel);--k-hover:var(--hover);--k-tx:var(--tx);--k-tx2:var(--tx2)}
.ksx-link{color:var(--k-blu);font-size:13px;font-weight:550;display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:0;cursor:pointer;text-underline-offset:3px}
.ksx-link:hover{text-decoration:underline}
.ksx-link svg{width:13px;height:13px}
.ksx-st{font-style:normal;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--k-tx2);white-space:nowrap}
.ksx-st::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--k-tx3);flex:0 0 7px}
.ksx-st.acc::before{background:var(--k-blu)} .ksx-st.amb::before{background:var(--k-amb)} .ksx-st.grn::before{background:var(--k-grn)} .ksx-st.red::before{background:var(--k-red)}
.ksx-st.red{color:var(--k-red)}
.ksx-st svg{width:13px;height:13px;margin-left:-2px}
.ksx-st:has(svg)::before{display:none}
.ksx-nr{font-style:normal;font-size:12.5px;font-weight:600;color:var(--k-tx);font-variant-numeric:tabular-nums;padding:1px 6px;border-radius:6px;background:var(--k-panel2);border:1px solid var(--k-line);line-height:1.4}
button.ksx-nr{cursor:pointer} button.ksx-nr:hover{border-color:var(--k-line2)}
.ksx-risico,.ksx-chip.rood{font-style:normal;font-size:12px;font-weight:600;color:var(--k-red);padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--k-red) 9%,transparent);line-height:1.5;white-space:nowrap}
.ksx-prio{font-style:normal;font-size:12px;font-weight:600;color:var(--k-amb);white-space:nowrap}
.ksx-chip{font-style:normal;font-size:12px;font-weight:550;padding:1px 8px;border-radius:999px;line-height:1.5;white-space:nowrap;background:var(--k-panel2);color:var(--k-tx2);border:1px solid var(--k-line)}
.ksx-chip.rood{border-color:transparent}
.ksx-chip.amb{color:var(--k-amb);background:color-mix(in srgb,var(--k-amb) 9%,transparent);border-color:transparent}
.ksx-chip.grn{color:var(--k-grn);background:color-mix(in srgb,var(--k-grn) 9%,transparent);border-color:transparent}
.ksx-hint{margin:0;font-size:13px;color:var(--k-tx3);line-height:1.5}
.ksx-av{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;flex:0 0 28px;background:var(--k-sel);color:var(--k-tx2);font-size:11.5px;font-weight:650;letter-spacing:.02em}
.ksx-av.jij{background:var(--k-acc);color:var(--k-on-acc)}
.ksx-av.groot{width:36px;height:36px;flex:0 0 36px;font-size:13px}
/* ks-fix3 (controle 12-10): kleine avatar voor klantnaam in de ticketlijst (14) en voor "Toegewezen" in de ticketkop (9). */
.ksx-av.klein{width:20px;height:20px;flex:0 0 20px;font-size:9.5px}
.ksx-av.klein.jij{background:var(--k-acc);color:var(--k-on-acc)}
.ksx-av.klein.leeg{background:transparent;border:1.3px dashed var(--k-line2)}
.ksx-menu{position:absolute;z-index:30;min-width:200px;padding:6px;border:1px solid var(--k-line);border-radius:10px;background:var(--k-panel);box-shadow:var(--k-schaduw);display:grid;gap:1px}
.ksx-menu > button,.ksx-menu > a{display:flex;align-items:center;gap:6px;width:100%;text-align:left;padding:8px 10px;border-radius:7px;font-size:13.5px;color:var(--k-tx);background:none;border:0;cursor:pointer;text-decoration:none}
.ksx-menu > button:hover,.ksx-menu > a:hover,.ksx-menu > button:focus-visible{background:var(--k-hover)}
.ksx-menu > .gevaar{color:var(--k-red)}
.ksx-menu svg{width:14px;height:14px}
.ksx-pop{position:relative}
.ksx-skel{height:64px;margin:8px 12px;border-radius:8px;background:linear-gradient(90deg,var(--k-panel2,#f3f4f6) 0,var(--k-hover,#eceef1) 50%,var(--k-panel2,#f3f4f6) 100%);background-size:200% 100%}
.ksx-skel.kort{height:32px}
@media (prefers-reduced-motion:no-preference){ .ksx-skel{animation:ib2skel 1.3s linear infinite} }
.ksx kbd,.ksx-geen kbd{font:600 11px/1 ui-monospace,Menlo,monospace;padding:2px 5px;border-radius:5px;border:1px solid var(--k-line);border-bottom-width:2px;color:var(--k-tx3);background:var(--k-panel)}

/* --- de werkplek: lijst | gesprek | klant (en de weergaven als kolom op een breed scherm) --- */
.ksx{position:relative;display:grid;grid-template-columns:380px minmax(0,1fr) 360px;grid-template-areas:"lijst gesprek paneel";
  background:var(--k-panel);border:1px solid var(--k-line);border-radius:12px;overflow:hidden;color:var(--k-tx);font-size:15px;line-height:1.56;min-height:600px}
.ksx > .ksx-views{grid-area:views} .ksx > .ksx-lijst{grid-area:lijst} .ksx > .ksx-gesprek{grid-area:gesprek} .ksx > .ksx-paneel{grid-area:paneel} .ksx > .ksx-pagina{grid-area:gesprek}
.ksx:not(.heeftsel){grid-template-columns:400px minmax(0,1fr);grid-template-areas:"lijst gesprek"}
.ksx.heeftsel.paneel-dicht{grid-template-columns:380px minmax(0,1fr);grid-template-areas:"lijst gesprek"}
.ksx.heeftsel.paneel-dicht > .ksx-paneel{display:none}
.ksx.heeftpag{grid-template-columns:248px minmax(0,1fr);grid-template-areas:"views gesprek"}
.ksx-lijst,.ksx-gesprek,.ksx-paneel,.ksx-views,.ksx-pagina{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain}
.ksx-lijst{border-right:1px solid var(--k-line);display:flex;flex-direction:column}
.ksx-paneel{border-left:1px solid var(--k-line);background:var(--k-panel2)}
.ksx-pagina{padding:20px 28px 28px}
/* Weergaven: ks-fix3 (controle 12-10) — stond pas vanaf 1600px als vaste kolom; op een gewoon 1440px-scherm (de meeste
   laptops) moest je dus steeds het paneel openklikken om te zien welke weergave actief was. Nu al vanaf 1280px, met iets
   smallere kolommen dan op een heel breed scherm zodat het gesprek zelf leesbaar breed blijft. */
.ksx-views{display:none;background:var(--k-panel2);border-right:1px solid var(--k-line);padding:12px 8px;flex-direction:column;gap:12px}
.ksx.views-open > .ksx-views,.ksx.heeftpag > .ksx-views{display:flex}
.ksx.views-open:not(.heeftpag) > .ksx-views{position:absolute;z-index:25;left:0;top:0;bottom:0;width:248px;box-shadow:var(--k-schaduw)}
@media (min-width:1280px){
  .ksx{grid-template-columns:200px 340px minmax(0,1fr) 320px;grid-template-areas:"views lijst gesprek paneel"}
  .ksx:not(.heeftsel){grid-template-columns:200px 380px minmax(0,1fr);grid-template-areas:"views lijst gesprek"}
  .ksx.heeftsel.paneel-dicht{grid-template-columns:200px 340px minmax(0,1fr);grid-template-areas:"views lijst gesprek"}
  .ksx > .ksx-views{display:flex}
  .ksx.views-open:not(.heeftpag) > .ksx-views{position:static;width:auto;box-shadow:none}
}
@media (min-width:1600px){
  .ksx{grid-template-columns:240px 400px minmax(0,1fr) 380px;grid-template-areas:"views lijst gesprek paneel"}
  .ksx:not(.heeftsel){grid-template-columns:240px 440px minmax(0,1fr);grid-template-areas:"views lijst gesprek"}
  .ksx.heeftsel.paneel-dicht{grid-template-columns:240px 400px minmax(0,1fr);grid-template-areas:"views lijst gesprek"}
}
.ksx-viewsgroep{display:flex;flex-direction:column;gap:1px}
.ksx-viewsgroep > summary,.ksx-views .ib-railkop{list-style:none;cursor:pointer;font-size:12px;font-weight:600;color:var(--k-tx3);padding:6px 10px;display:flex;align-items:center;gap:6px}
.ksx-viewsgroep > summary::-webkit-details-marker{display:none}
.ksx-views details.ib2-tags{margin:0}
.ksx-views .ib-view{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:0 10px;border-radius:7px;font-size:13.5px;font-weight:500;color:var(--k-tx2);text-align:left;box-shadow:none;background:none}
.ksx-views .ib-view:hover{background:var(--k-hover);color:var(--k-tx)}
.ksx-views .ib-view.on{background:var(--k-sel);color:var(--k-tx);font-weight:600;box-shadow:none}
.ksx-views .ib-view svg{width:16px;height:16px;flex:0 0 16px;opacity:.8}
.ksx-views .ib-view b{margin-left:auto;font-size:12px;font-weight:600;color:var(--k-tx3);font-variant-numeric:tabular-nums}
.ksx-views .ib-view b.rood{color:var(--k-red)}
.ksx-views .ksd-eigenweergaverij .ib-view{flex:1}
.ksx-views .btn.gh{justify-content:flex-start}
.ksx-auto{margin:0;padding:0 10px;font-size:12.5px;color:var(--k-tx3);line-height:1.45} .ksx-auto b{color:var(--k-grn);font-variant-numeric:tabular-nums}
.ksx-viewsvoet{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding:0 4px}
.ksx-viewsvoet .btn{justify-content:center}

/* --- de ticketlijst --- */
.ksx-lijstkop{position:sticky;top:0;z-index:3;background:var(--k-panel);border-bottom:1px solid var(--k-line);padding:14px 16px 12px;display:flex;flex-direction:column;gap:10px}
.ksx-lijstrij1{display:flex;align-items:center;gap:6px}
.ksx-viewknop{display:inline-flex;align-items:center;gap:8px;min-width:0;height:32px;padding:0 8px;margin-left:-4px;border-radius:8px;font-size:15px;font-weight:650;color:var(--k-tx);flex:0 1 auto}
.ksx-viewknop:hover{background:var(--k-hover)}
.ksx-viewknop span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ksx-viewknop b{font-size:13px;font-weight:600;color:var(--k-tx3);font-variant-numeric:tabular-nums}
.ksx-viewknop svg{width:16px;height:16px;flex:0 0 16px;color:var(--k-tx3)}
.ksx-viewknop svg:first-child{color:var(--k-tx2)}
@media (min-width:1600px){ .ksx:not(.heeftpag) .ksx-viewknop{pointer-events:none} .ksx:not(.heeftpag) .ksx-viewknop svg{display:none} }
.ksx-sort{margin-left:auto;height:30px;padding:0 6px;border:0;border-radius:7px;background:transparent;color:var(--k-tx2);font-size:13px;cursor:pointer}
.ksx-sort:hover{background:var(--k-hover)}
.ksx-zoek{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border:1px solid var(--k-line);border-radius:8px;background:var(--k-panel);transition:border-color .15s,box-shadow .15s}
.ksx-zoek:focus-within{border-color:var(--k-line2);box-shadow:0 0 0 3px color-mix(in srgb,var(--k-blu) 14%,transparent)}
.ksx-zoek svg{width:16px;height:16px;color:var(--k-tx3);flex:0 0 16px}
.ksx-zoek input{flex:1;min-width:0;border:0;background:transparent;font-size:14px;color:var(--k-tx);outline:none;height:100%}
.ksx-zoek input::placeholder{color:var(--k-tx3)}
.ksx-zoek input:focus-visible{outline:none}
.ksx-zoek:focus-within kbd{display:none}
.ksx-zoekwis{display:grid;place-items:center;width:28px;height:28px;margin-right:-6px;border:0;border-radius:6px;background:transparent;color:var(--k-tx3);cursor:pointer}
.ksx-zoekwis:hover{background:var(--k-hover,rgba(0,0,0,.05));color:var(--k-tx)}
.ksx-zoekwis svg{width:14px;height:14px}
.ksx-andertickets{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.ksx-bulk{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 8px;border-radius:8px;background:var(--k-sel);font-size:13px}
.ksx-bulk b{margin-right:auto}
.ksx-bulk select{height:30px;font-size:13px;max-width:140px}
/* ks-fix3 (controle 12-10): vaste ruimte voor de bulkbalk (4) — onzichtbaar maar nog aanwezig i.p.v. de lijst elke keer
   te laten springen als je een ticket aan- of uitvinkt. */
/* Bugronde 13-10: zonder selectie geen lege strook maar een rustige hint op dezelfde plek (zelfde hoogte, geen verspringen). */
.ksx-bulk{position:relative;transition:background-color .15s}
.ksx-bulkhint{display:none}
.ksx-bulk.leeg{background:transparent}
.ksx-bulk.leeg > :not(.ksx-bulkhint){visibility:hidden}
.ksx-bulk.leeg .ksx-bulkhint{display:flex;align-items:center;position:absolute;inset:0;padding:0 8px;color:var(--k-tx3);font-size:12.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
/* Eén compacte regel (lijst is 340-440 px breed): anders liep de balk over twee regels (± 78 px), en was dat zonder selectie een
   grote lege strook. Selects krimpen mee met een ellips, Wissen is een kruisje. */
.ksx-bulk{flex-wrap:nowrap;gap:4px;min-height:38px;padding:4px 4px 4px 8px}
.ksx-bulk b{white-space:nowrap;font-size:12.5px;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ksx-bulk .btn.sm{flex:0 0 auto;height:28px;padding:0 8px;white-space:nowrap}
/* Vaste breedte: een select is anders zo breed als zijn langste tagnaam; de volledige namen staan in de keuzelijst zelf. */
.ksx-bulk select.inp{flex:0 0 auto;max-width:none;height:28px;padding:0 2px 0 6px;font-size:12.5px;line-height:26px;text-overflow:ellipsis}
.ksx-bulk select[data-ksinbulktag]{width:58px}
.ksx-bulk select[data-ksinbulktoewijzen]{width:96px}
.ksx-bulk .ksx-bulkwis{width:28px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.ksx-bulk .ksx-bulkwis svg{width:14px;height:14px}
.ksx-bulk.leeg .ksx-bulkhint{padding:0 10px;display:block;line-height:38px}
/* Smalste lijst (340 px: 1280-1599 px breed mét een open ticket): alleen het getal, dan past alles op één regel. */
@media (min-width:1280px) and (max-width:1599px){ .ksx.heeftsel .ksx-bulk .ksx-bulkwoord{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} }
@media (prefers-reduced-motion:reduce){.ksx-bulk{transition:none}}
.ksx-rijen{flex:1}
.ksx-rij{position:relative;display:flex;align-items:stretch;border-bottom:1px solid var(--k-line);transition:background-color .12s}
.ksx-rij:hover{background:var(--k-hover)}
.ksx-rij.on{background:var(--k-sel)}
.ksx-rij.gekozen{background:color-mix(in srgb,var(--k-blu) 7%,var(--k-panel))}
.ksx-vink{position:absolute;left:10px;top:15px;width:15px;height:15px;margin:0;opacity:0;transition:opacity .12s;accent-color:var(--k-acc);z-index:1}
.ksx-rij:hover .ksx-vink,.ksx-vink:focus-visible,.ksx-vink:checked,.ksx:has(.ksx-vink:checked) .ksx-vink{opacity:1}
.ksx-rijknop{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding:15px 16px 15px 34px;text-align:left;color:inherit}
.ksx-r1{display:flex;align-items:baseline;gap:8px}
.ksx-naam{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:550;color:var(--k-tx)}
.ksx-rij.nieuw .ksx-naam{font-weight:700}
.ksx-rij.nieuw .ksx-naam::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--k-blu);margin:0 6px 1px 0;vertical-align:middle}
.ksx-tijd{flex:0 0 auto;font-size:12.5px;color:var(--k-tx3);font-variant-numeric:tabular-nums}
.ksx-r2{font-size:14px;color:var(--k-tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ksx-rij.nieuw .ksx-r2{font-weight:600}
.ksx-r3{font-size:13.5px;color:var(--k-tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ksx-r4{display:flex;align-items:center;gap:8px;margin-top:4px;min-width:0}
.ksx-aan,.ksx-aanwezig{margin-left:auto;width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;font-size:10px;font-weight:700;background:var(--k-sel);color:var(--k-tx2);flex:0 0 20px}
.ksx-aanwezig{margin-left:0;background:var(--k-grn);color:#fff}
.ksx-aanwezig.typt{background:var(--k-blu)}
.ksx-aan + .ksx-aanwezig{margin-left:-4px}
.ksx-claim{position:absolute;right:10px;top:10px;height:28px;padding:0 10px;border-radius:7px;border:1px solid var(--k-line2);background:var(--k-panel);font-size:12.5px;font-weight:600;color:var(--k-tx);
  opacity:0;pointer-events:none;transition:opacity .12s;box-shadow:0 1px 2px rgba(16,24,40,.08)}
.ksx-rij:hover .ksx-claim,.ksx-claim:focus-visible{opacity:1;pointer-events:auto}
.ksx-rij:hover .ksx-tijd{visibility:hidden}
.ksx-rij:has(.ksx-claim):hover .ksx-tijd{visibility:hidden}
.ksx-rij:not(:has(.ksx-claim)):hover .ksx-tijd{visibility:visible}
.ksx-meer{display:block;margin:12px auto}
.ksx-leeg,.ksx-geen{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;padding:48px 24px;color:var(--k-tx3);font-size:13.5px}
.ksx-leeg b,.ksx-geen b{font-size:15px;color:var(--k-tx);font-weight:650}
.ksx-leeg p,.ksx-geen p{margin:0;max-width:34ch}
.ksx-geen{height:100%}
.ksx-leegico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--k-panel2);border:1px solid var(--k-line);margin-bottom:8px}
.ksx-leegico svg{width:19px;height:19px;color:var(--k-tx2)}

/* --- het gesprek --- */
.ksx-gesprek{background:var(--k-panel)}
.ksx-ticket{display:flex;flex-direction:column;height:100%;min-height:0}
.ksx-tkop{flex:0 0 auto;padding:18px 28px 16px;border-bottom:1px solid var(--k-line);display:flex;flex-direction:column;gap:10px;background:var(--k-panel)}
.ksx-tkop1{display:flex;align-items:flex-start;gap:8px}
.ksx-tkop1 h2{flex:1;min-width:0;margin:0;font-size:20px;line-height:1.32;font-weight:650;letter-spacing:-.01em;color:var(--k-tx);overflow-wrap:anywhere;text-wrap:balance}
.ksx-terug{display:none;align-items:center;gap:4px;height:32px;margin:0 4px 0 -8px;padding:0 8px;border-radius:8px;font-size:14px;font-weight:550;color:var(--k-tx2)}
.ksx-terug:hover{background:var(--k-hover)}
.ksx-terug svg{width:18px;height:18px}
.ksx-paneelknop{margin-top:-4px}
/* ks-fix3 (controle 12-10, 15): vanaf 1280px staat het klant-paneel altijd al open (zie de werkplek hierboven) — de
   knop "Klant" in de ticketkop is dan een dode herhaling van wat al zichtbaar is. */
@media (min-width:1280px){ .ksx-paneelknop{display:none} }
.ksx-tmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;color:var(--k-tx2)}
.ksx-klantnaam{font-weight:600;color:var(--k-tx)}
.ksx-mail{color:var(--k-tx3);overflow-wrap:anywhere}
.ksx-balk{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* ks-fix3 (controle 12-10, 9): avatar + select in één label, met iets meer linkerruimte voor de avatar. */
.ksx-veldtoewijs{padding-left:4px;gap:6px}
.ksx-veldtoewijs .ksx-av{margin-left:2px}
.ksx-veldtoewijs span:first-child{padding-left:6px}
/* ks-fix3 (controle 12-10, 16): de vaste uitlegzin onder de opsteller is nu een (i)-tooltip naast de hoofdknop. */
.ksx-routeinfo{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--k-tx3);cursor:help;flex:0 0 28px}
.ksx-routeinfo:hover,.ksx-routeinfo:focus-visible{background:var(--k-hover);color:var(--k-tx2);outline:none}
.ksx-routeinfo svg{width:16px;height:16px}
/* ks-fix3 (controle 12-10, 5): Escalatie en Dispute-risico als rode chip zagen er identiek uit — nu met een eigen icoon. */
.ksx-risico{display:inline-flex;align-items:center;gap:3px}
.ksx-risico svg{width:12px;height:12px}
.ksx-chip svg{width:13px;height:13px}
/* ks-fix3 (controle 12-10, 3): sub-knip op leeftijd binnen de weergave Te laat. */
.ksx-telaatseg{margin-left:auto}
/* ks-fix3 (controle 12-10, 6): een kleine, altijd zichtbare "?" bij de weergaven. */
.ksx-viewskop{display:flex;justify-content:flex-end;padding:0 4px 2px}
.ksx-sneltoetsen{width:22px;height:22px;border-radius:50%;border:1px solid var(--k-line);background:var(--k-panel);color:var(--k-tx3);font-size:12px;font-weight:700;line-height:1;cursor:pointer}
.ksx-sneltoetsen:hover{background:var(--k-hover);color:var(--k-tx2)}
/* ks-fix3 (controle 12-10, 10): Template naast Macro dezelfde ghost-knop-stijl met icoon. */
.ksx-tplwrap{display:inline-flex;align-items:center;gap:6px;padding:0 10px 0 8px}
.ksx-tplwrap .ksx-sjabloon{height:100%;max-width:170px;padding:0;margin:0}
/* ks-fix3 (controle 12-10, 1): breedte voor de inline "Weggooien"-popover (was window.prompt()). */
.ksx-afwijzenpop{width:280px}
.ksx-afwijzenpop textarea{width:100%;resize:vertical}
.ksx-veld{position:relative;display:inline-flex;align-items:center;height:32px;border:1px solid var(--k-line);border-radius:8px;background:var(--k-panel);transition:border-color .15s,background-color .15s}
.ksx-veld:hover{border-color:var(--k-line2);background:var(--k-hover)}
.ksx-veld span{padding-left:10px;font-size:12.5px;color:var(--k-tx3);white-space:nowrap;pointer-events:none}
.ksx-veld select{appearance:none;-webkit-appearance:none;border:0;background:transparent;height:100%;padding:0 28px 0 6px;font-size:13px;font-weight:600;color:var(--k-tx);cursor:pointer;max-width:160px;text-overflow:ellipsis}
.ksx-veld select:focus-visible{outline:none}
.ksx-veld:focus-within{outline:2px solid var(--k-blu);outline-offset:1px}
.ksx-veld > svg{position:absolute;right:8px;width:14px;height:14px;color:var(--k-tx3);pointer-events:none}
.ksx-veld:has(select:disabled){opacity:.6}
.ksx-balk .ksd-snoozepop{left:0;right:auto;top:calc(100% + 4px);min-width:200px}
.ksx-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ksx-tag{display:inline-flex;align-items:center;gap:2px;height:24px;padding:0 4px 0 9px;border-radius:999px;background:var(--k-panel2);border:1px solid var(--k-line);font-size:12.5px;color:var(--k-tx2)}
.ksx-tag a{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;cursor:pointer;color:var(--k-tx3)}
.ksx-tag a:hover{background:var(--k-hover);color:var(--k-tx)}
.ksx-tag a svg{width:11px;height:11px}
.ksx-tagplus{height:24px;padding:0 9px;border-radius:999px;border:1px dashed var(--k-line2);font-size:12.5px;color:var(--k-tx3);background:none}
.ksx-tagplus:hover{color:var(--k-tx);border-color:var(--k-tx3)}
.ksx-tags .ksd-popover{width:240px}
.ksx-tags .ksd-popoverlijst em{font-style:normal;margin-left:auto;font-size:11.5px;color:var(--k-tx3)}
.ksx-tags .ksd-popoverlijst button{display:flex;gap:8px;align-items:center}
.ksx-draad{flex:1 1 auto;min-height:0;overflow:auto;padding:22px 32px 32px;display:flex;flex-direction:column;gap:20px;background:var(--k-bg)}
.ksx-draad > *{max-width:900px;width:100%;margin-left:auto;margin-right:auto}

/* Inzicht: één balk, rode chip bij risico, de rest erachter. */
.ksx-inzicht{border:1px solid var(--k-line);border-radius:var(--k-r);background:var(--k-panel)}
.ksx-inzicht > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;font-size:13px;color:var(--k-tx2)}
.ksx-inzicht > summary::-webkit-details-marker{display:none}
.ksx-inzichtkop{display:inline-flex;align-items:center;gap:6px;color:var(--k-tx);flex:0 0 auto}
.ksx-inzichtkop svg{width:15px;height:15px;color:var(--k-tx2)}
.ksx-inzichtkort{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--k-tx3)}
.ksx-inzicht > summary > svg:last-child{width:15px;height:15px;color:var(--k-tx3);flex:0 0 15px;transition:transform .2s}
.ksx-inzicht[open] > summary > svg:last-child{transform:rotate(180deg)}
.ksx-inzicht[open] .ksx-inzichtkort{visibility:hidden}
.ksx-inzichtlijf{padding:2px 14px 14px;display:flex;flex-direction:column;gap:10px;font-size:13.5px;line-height:1.55}
.ksx-sam{margin:0;color:var(--k-tx);max-width:70ch}
.ksx-regel{margin:0;color:var(--k-tx2)} .ksx-regel b{color:var(--k-tx);margin-right:6px}
.ksx-regel.rood b{color:var(--k-red)}
.ksx-inzichtlijf .ib2-funnel{margin:0;background:var(--k-panel2);border:1px solid var(--k-line)}
.ksx-inzichtlijf .ib2-funnel.fout{background:color-mix(in srgb,var(--k-red) 5%,var(--k-panel));border-color:color-mix(in srgb,var(--k-red) 25%,var(--k-line))}
.ksx-inzichtlijf .ib2-funnel > b{color:var(--k-tx)}
.ksx-bewijs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.ksx-bewijs li{display:flex;gap:8px;align-items:flex-start;color:var(--k-tx2)}
.ksx-bewijs li > svg{width:15px;height:15px;flex:0 0 15px;margin-top:2px}
.ksx-bewijs li.goed > svg{color:var(--k-grn)} .ksx-bewijs li.niet > svg{color:var(--k-amb)}
.ksx-bewijs li b{color:var(--k-tx);font-weight:600}
.ksx-bewijs .btn{margin-left:6px;vertical-align:baseline}
.ksx-bewijs li.laden{align-items:center}

/* Berichten */
.ksx-bericht{border:1px solid var(--k-line);border-radius:var(--k-r);background:var(--k-panel);padding:18px 20px}
/* 1-11 (thread leesbaar): klant links neutraal, winkel rechts in de accentkleur; mislukt rood. */
.ksx-draadlijst{display:flex;flex-direction:column;gap:14px}
.ksx-draadlijst .ksx-bericht{width:auto;max-width:100%;margin:0}
.ksx-draadlijst .ksx-bericht.in{align-self:flex-start;margin-right:min(12%,120px);border-bottom-left-radius:4px}
.ksx-draadlijst .ksx-bericht.uit{align-self:flex-end;margin-left:min(12%,120px);background:var(--k-uit-bg);border-color:var(--k-uit-line);border-bottom-right-radius:4px}
.ksx-draadlijst .ksx-bericht.uit .ksx-av.jij{background:var(--k-uit-av);color:var(--k-on-acc)}
.ksx-draadlijst .ksx-bericht.uit.mislukt{background:var(--k-mis-bg);border-color:var(--k-mis-line)}
.ksx-draadlijst .ksx-bericht.uit.mislukt .ksx-av.jij{background:var(--k-red)}
.ksx-bfout{margin:0 0 10px;font-size:13.5px;font-weight:600;color:var(--k-red);line-height:1.5}
.ksx-bmeta{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto}
.ksx-bstatus{font-style:normal;font-size:11.5px;font-weight:600;padding:1px 8px;border-radius:999px;line-height:1.5;white-space:nowrap;border:1px solid currentColor;color:var(--k-tx2)}
.ksx-bstatus.grn{color:var(--k-grn)} .ksx-bstatus.amb{color:var(--k-amb)} .ksx-bstatus.red{color:var(--k-red)} .ksx-bstatus.gry{color:var(--k-tx3)}
.ksx-dag{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--k-tx3);margin:6px 0 -2px}
.ksx-dag::before,.ksx-dag::after{content:'';flex:1;height:1px;background:var(--k-line)}
.ksx-dag span{display:inline-block} .ksx-dag span::first-letter{text-transform:uppercase}
.ksx-draadkop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--k-tx3);margin-bottom:-6px}
.ksx-legenda{display:inline-flex;align-items:center;gap:6px}
.ksx-legenda i{width:12px;height:12px;border-radius:4px;border:1px solid var(--k-line2);background:var(--k-panel);display:inline-block}
.ksx-legenda i.uit{background:var(--k-uit-bg);border-color:var(--k-uit-line);margin-left:8px}
.ksx-draadhint{font-size:12px}
.ksx-bericht.uit{background:var(--k-panel2)}
/* ks-snel (20-10): optimistisch "Wordt verstuurd…" — zacht knipperend tot de achtergrond het echt verstuurt. */
.ksx-bericht.uit.bezig{opacity:.72;animation:ksxbezig 1.4s ease-in-out infinite}
@keyframes ksxbezig{0%,100%{opacity:.72}50%{opacity:.95}}
.ksx-bkop{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:14px}
.ksx-bkop b{color:var(--k-tx);font-weight:600}
.ksx-bkop time{margin-left:auto;font-size:12.5px;color:var(--k-tx3);font-variant-numeric:tabular-nums}
.ksx-btekst{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15.5px;line-height:1.7;color:var(--k-tx);max-width:76ch}
.ksx-eerder{border:1px dashed var(--k-line2);border-radius:var(--k-r);background:transparent}
.ksx-eerder > summary{cursor:pointer;padding:10px 14px;font-size:13px;color:var(--k-tx2);font-weight:550}
.ksx-eerder[open]{padding:0 0 8px}
.ksx-eerder .ksx-bericht{margin:0 8px 8px;border-style:solid}

/* De opsteller */
.ksx-comp{border:1px solid var(--k-line2);border-radius:12px;background:var(--k-panel);box-shadow:var(--k-schaduw);padding:16px 18px 16px;display:flex;flex-direction:column;gap:12px}
.ksx-comp.claude{border-color:color-mix(in srgb,var(--k-blu) 40%,var(--k-line2))}
.ksx-comp.notitie{background:color-mix(in srgb,var(--k-amb) 4%,var(--k-panel));border-color:color-mix(in srgb,var(--k-amb) 30%,var(--k-line2))}
.ksx-compkop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ksx-seg{display:inline-flex;gap:2px;padding:2px;border-radius:8px;background:var(--k-panel2);border:1px solid var(--k-line)}
.ksx-seg button{height:28px;padding:0 12px;border-radius:6px;font-size:13px;font-weight:550;color:var(--k-tx2)}
.ksx-seg button.on{background:var(--k-panel);color:var(--k-tx);box-shadow:0 1px 2px rgba(16,24,40,.08),0 0 0 1px var(--k-line)}
.ksx-seg b{font-weight:600;color:var(--k-tx3)}
.ksx-staat{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--k-tx3)}
.ksx-staat.claude{color:var(--k-blu);font-weight:600}
.ksx-staat svg{width:15px;height:15px}
.ksx-staatsub{font-weight:500;color:var(--k-tx3)}
.ksx-staatsub::before{content:'·';margin:0 6px 0 0}
.ksx-score{position:relative;margin-left:auto}
.ksx-score > summary{list-style:none;cursor:pointer;height:24px;display:inline-flex;align-items:center;padding:0 8px;border-radius:999px;font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;
  color:var(--k-grn);background:color-mix(in srgb,var(--k-grn) 9%,transparent)}
.ksx-score > summary::-webkit-details-marker{display:none}
.ksx-score.niet > summary{color:var(--k-amb);background:color-mix(in srgb,var(--k-amb) 10%,transparent)}
.ksx-scoremenu{right:0;top:calc(100% + 6px);width:300px;padding:12px;gap:8px;font-size:13px;line-height:1.5}
.ksx-scoremenu ul{margin:0;padding-left:16px;display:grid;gap:4px}
.ksx-scoremenu .hint{margin:0}
.ksx-aanrij{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--k-tx2);min-width:0}
.ksx-aanrij > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ksx-aanrij em{font-style:normal;color:var(--k-tx3);margin-right:8px}
.ksx-aanrij .ksx-link{margin-left:auto}
.ksx-cc input{flex:1;min-width:0;height:28px;border:0;border-bottom:1px solid var(--k-line);background:transparent;font-size:13px;color:var(--k-tx);outline:none}
.ksx-cc input:focus{border-bottom-color:var(--k-blu)}
.ksx-tekst{width:100%;min-height:210px;resize:vertical;padding:14px 16px;border:1px solid var(--k-line);border-radius:10px;background:var(--k-panel);font-size:15px;line-height:1.65;color:var(--k-tx);
  transition:border-color .15s,box-shadow .15s;max-width:none}
.ksx-tekst:focus{outline:none;border-color:var(--k-line2);box-shadow:0 0 0 3px color-mix(in srgb,var(--k-blu) 14%,transparent)}
.ksx-tekst[readonly]{background:var(--k-panel2);min-height:0;height:auto}
.ksx-tekst.notitie{min-height:96px;background:var(--k-panel)}
.ksx-tekst::placeholder{color:var(--k-tx3)}
.ksx-gereedschap{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ksx-gereedschap .ksx-k{height:30px;border-color:transparent;background:transparent;color:var(--k-tx2)}
.ksx-gereedschap .ksx-k:hover{background:var(--k-hover);color:var(--k-tx)}
.ksx-gereedschap .ksd-popover{top:auto;bottom:calc(100% + 4px)}
.ksx-gereedschap .ib2-bijlagelabel{position:relative;cursor:pointer}
.ksx-sjabloon{height:30px;max-width:220px;border:0;border-radius:8px;background:transparent;color:var(--k-tx2);font-size:13px;padding:0 6px;cursor:pointer}
.ksx-sjabloon:hover{background:var(--k-hover)}
.ksx-compvoet{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--k-line)}
.ksx-leer{display:inline-flex;align-items:center;gap:2px}
.ksx-leer .ksx-k{height:30px;color:var(--k-tx3)} .ksx-leer .ksx-k svg{width:15px;height:15px}
.ksx-voetrechts{margin-left:auto;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ksx-weg{color:var(--k-red)!important}
.ksx-hoofd{height:38px;padding:0 16px;font-size:14px;font-weight:650;background:var(--k-acc)!important;border-color:var(--k-acc)!important;color:var(--k-on-acc)!important;border-radius:9px}
.ksx-hoofd:hover{filter:brightness(1.15)}
.ksx-hoofd:active{transform:scale(.98)}
.ksx-route{margin:-2px 0 0;font-size:12.5px;color:var(--k-tx3)}
.ksx-melding{padding:10px 12px;border-radius:9px;background:var(--k-panel2);border:1px solid var(--k-line);font-size:13.5px;line-height:1.5;color:var(--k-tx2);display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ksx-melding.goed{background:color-mix(in srgb,var(--k-grn) 6%,var(--k-panel));border-color:color-mix(in srgb,var(--k-grn) 25%,var(--k-line))}
.ksx-melding.fout{background:color-mix(in srgb,var(--red,#b42318) 6%,var(--k-panel,#fff));border-color:color-mix(in srgb,var(--red,#b42318) 28%,var(--k-line,#e4e7ec));color:var(--tx)}
.ksx-main > .ksx-melding{margin:0 0 12px}
.ksx-comp .ib-tijdlijn{margin:0;font-size:12.5px}

/* Maat- of variantwissel: twee vinkjes en één regel uitleg. */
.ksx-maat{border:1px solid var(--k-line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;background:var(--k-panel2)}
.ksx-maat.fout{border-color:color-mix(in srgb,var(--k-red) 35%,var(--k-line));background:color-mix(in srgb,var(--k-red) 4%,var(--k-panel))}
.ksx-maat.klaar{border-color:color-mix(in srgb,var(--k-grn) 30%,var(--k-line))}
.ksx-maatkop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13.5px}
.ksx-maatnaar{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:12.5px;color:var(--k-tx3)}
.ksx-maatnaar input{width:72px;height:28px;font-size:13px;font-weight:600;padding:0 8px}
.ksx-maatvink{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--k-tx);min-height:28px;cursor:pointer}
.ksx-maatvink input{width:16px;height:16px;margin:0;accent-color:var(--k-grn)}
.ksx-maatvink .ksx-link{margin-left:4px}
.ksx-maatmeld{margin:2px 0 0;font-size:13px;color:var(--k-tx3);display:flex;gap:6px;align-items:flex-start;line-height:1.5}
.ksx-maatmeld svg{width:15px;height:15px;flex:0 0 15px;margin-top:2px}
.ksx-maatmeld.fout{color:var(--k-red)} .ksx-maatmeld.goed{color:var(--k-grn)}

/* --- klant en bestelling --- */
.ksx-pkop{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;min-height:56px;padding:10px 10px 10px 18px;background:var(--k-panel2);border-bottom:1px solid var(--k-line)}
.ksx-pkop b{flex:1;font-size:14px;font-weight:650}
.ksx-pterug{display:none}
.ksx-psec{padding:16px 18px;border-bottom:1px solid var(--k-line);font-size:14px}
.ksx-psec h4{margin:0 0 8px;font-size:12.5px;font-weight:600;color:var(--k-tx3)}
.ksx-klant{display:grid;grid-template-columns:36px minmax(0,1fr);gap:4px 12px;align-items:center}
.ksx-klant > div{display:flex;flex-direction:column;min-width:0}
.ksx-klant b{font-size:15px;overflow-wrap:anywhere}
.ksx-klant .ksx-mail{font-size:13px}
.ksx-klant .ksx-kv,.ksx-klant .ksx-link{grid-column:1 / -1}
.ksx-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;margin:8px 0 0;font-size:13px}
.ksx-kv dt{color:var(--k-tx3)} .ksx-kv dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;color:var(--k-tx);font-variant-numeric:tabular-nums}
.ksx-sub{font-size:12.5px;color:var(--k-tx3)}
.ksx-orderkop{display:flex;align-items:center;gap:8px}
.ksx-orderkop b{font-size:15px;font-variant-numeric:tabular-nums}
.ksx-orderkop > span{font-size:12.5px;color:var(--k-tx3)}
.ksx-acties{position:relative;margin-left:auto}
.ksx-acties > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px;height:30px}
.ksx-acties > summary::-webkit-details-marker{display:none}
.ksx-acties > summary svg{width:14px;height:14px}
.ksx-acties .ksx-menu{right:0;top:calc(100% + 4px);min-width:220px}
.ksx-tlink{display:flex;align-items:center;gap:8px;margin-top:12px;padding:8px 10px;border-radius:8px;border:1px solid var(--k-line);background:var(--k-panel);color:var(--k-tx);font-weight:600;font-size:13px;text-decoration:none}
.ksx-tlink:hover{border-color:var(--k-line2)}
.ksx-tlink svg{width:16px;height:16px;color:var(--k-tx2);flex:0 0 16px}
.ksx-tlink em{margin-left:auto;font-style:normal;font-weight:500;color:var(--k-tx3);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ksx-pnoot{margin:10px 0 0;display:flex;gap:8px;font-size:13px;line-height:1.5;color:var(--k-tx3)}
.ksx-pnoot svg{width:16px;height:16px;flex:0 0 16px;margin-top:2px}
.ksx-pnoot.rood{color:var(--k-red);margin:0 0 8px}
.ksx-pleeg{margin:0 0 10px;display:flex;flex-direction:column;gap:2px;color:var(--k-tx3);font-size:13px} .ksx-pleeg b{color:var(--k-tx);font-size:14px}
.ksx-prods{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.ksx-prod{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center}
.ksx-prod img,.ksx-geenfoto{width:40px;height:40px;border-radius:8px;object-fit:cover;background:var(--k-panel);border:1px solid var(--k-line)}
.ksx-prodtekst{display:flex;flex-direction:column;min-width:0;font-size:13px}
.ksx-prodtekst b{font-weight:600;overflow-wrap:anywhere}
.ksx-prodtekst em{font-style:normal;color:var(--k-tx2)}
.ksx-prod.fout .ksx-prodtekst em{color:var(--k-red);text-decoration:line-through;text-decoration-thickness:1px}
.ksx-prodmeld{font-size:12px;font-weight:600;color:var(--k-red)}
.ksx-pp{font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ksx-totaal{display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid var(--k-line);font-size:13.5px}
.ksx-totaal b{font-variant-numeric:tabular-nums}
.ksx-adres{margin:0;font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.ksx-andere{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.ksx-eerdermail{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:8px 0;border-top:1px solid var(--k-line);font-size:13px;color:var(--k-tx)}
.ksx-eerdermail:hover span{text-decoration:underline}
.ksx-eerdermail span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ksx-eerdermail time{color:var(--k-tx3);flex:0 0 auto}
.ksx-tijdlijn > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.ksx-tijdlijn > summary::-webkit-details-marker{display:none}
.ksx-tijdlijn > summary h4{margin:0}
.ksx-tijdlijn > summary svg{width:15px;height:15px;color:var(--k-tx3);transition:transform .2s}
.ksx-tijdlijn[open] > summary svg{transform:rotate(180deg)}
.ksx-tijdlijn[open] > summary{margin-bottom:10px}
.ksx-pvoet{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;font-size:12.5px;color:var(--k-tx3)}
.ksx-andersz{padding:0 16px 16px;font-size:13px} .ksx-andersz summary{cursor:pointer;color:var(--k-tx2)}

/* Tussen 1100 en 1279px: geen vaste klantkolom, wel als paneel over het gesprek (knop Klant). */
@media (min-width:1100px) and (max-width:1279px){
  .ksx.heeftsel{grid-template-columns:340px minmax(0,1fr);grid-template-areas:"lijst gesprek"}
  .ksx.heeftsel > .ksx-paneel{display:none}
  .ksx.heeftsel.paneel-open > .ksx-paneel{display:block;position:absolute;z-index:20;right:0;top:0;bottom:0;width:360px;box-shadow:var(--k-schaduw)}
  .ksx-tkop,.ksx-draad{padding-left:24px;padding-right:24px}
}
@media (min-width:1100px) and (prefers-reduced-motion:no-preference){
  .ksx.views-open:not(.heeftpag) > .ksx-views,.ksx.paneel-open > .ksx-paneel{animation:ksxIn .2s cubic-bezier(.2,.8,.2,1)}
  .ksx.paneel-open > .ksx-paneel{animation-name:ksxInR}
}
@keyframes ksxIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes ksxInR{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

/* Telefoon en tablet (< 1100px): drie schermen na elkaar met een knop terug; de pagina scrolt zelf. */
@media (max-width:1099px){
  .ksx-kop{flex-wrap:wrap;gap:8px}
  .ksx-zijknop{display:none}
  .ksx-status{order:5;flex:1 1 100%;flex-wrap:wrap;overflow:visible}
  .ksx{display:block;height:auto;min-height:0;border-radius:12px;overflow:visible}
  .ksx-lijst,.ksx-gesprek,.ksx-paneel,.ksx-views,.ksx-pagina{overflow:visible}
  .ksx > .ksx-gesprek,.ksx > .ksx-paneel{display:none}
  .ksx.scherm-gesprek > .ksx-lijst,.ksx.scherm-paneel > .ksx-lijst{display:none}
  .ksx.scherm-gesprek > .ksx-gesprek{display:block}
  .ksx.scherm-paneel > .ksx-paneel{display:block;border-left:0;border-radius:12px}
  .ksx.heeftpag > .ksx-pagina{display:block;padding:16px}
  .ksx.heeftpag > .ksx-views{display:none}
  .ksx.views-open > .ksx-views{display:flex;position:static;width:auto;box-shadow:none;border-right:0;border-bottom:1px solid var(--k-line);border-radius:12px 12px 0 0}
  .ksx-lijst{border-right:0}
  .ksx-lijstkop{position:static;border-radius:12px 12px 0 0}
  .ksx-rijknop{padding:12px 14px 12px 14px}
  .ksx-vink{display:none}
  /* ks-fix3 (controle 12-10, vervolg op 4): de vaste ruimte voor de bulkbalk is bedoeld om de lijst niet te laten springen
     bij het aan/uitvinken van een ticket — maar het vinkje zelf is hier net verborgen (mobiel selecteert niet in bulk).
     Zonder deze regel bleef er een gereserveerd, onzichtbaar blok staan dat op een smal scherm (de balk wrapt dan naar
     meerdere regels) een rare lege ruimte boven de lijst gaf. */
  .ksx-bulk{display:none!important}
  .ksx-claim{display:none}
  .ksx-rij:hover .ksx-tijd{visibility:visible}
  .ksx-terug,.ksx-pterug{display:inline-flex}
  .ksx-pdicht{display:none}
  .ksx-ticket{height:auto}
  .ksx-tkop{padding:10px 14px 12px;border-radius:12px 12px 0 0;position:sticky;top:calc(var(--kop,56px) + env(safe-area-inset-top));z-index:4}
  .ksx-tkop1 h2{font-size:17px}
  .ksx-draad{overflow:visible;padding:12px 12px 16px;border-radius:0 0 12px 12px}
  .ksx-balk{gap:6px}
  .ksx-veld select{max-width:120px}
  .ksx-comp{padding:12px}
  .ksx-compvoet{flex-direction:column;align-items:stretch}
  .ksx-voetrechts{margin-left:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .ksx-voetrechts .btn{justify-content:center;min-height:44px}
  .ksx-voetrechts .ksx-hoofd{grid-column:1 / -1;order:-1;min-height:48px;font-size:15px}
  .ksx-leer{justify-content:center}
  .ksx-k,.ksx-veld,.ksx-tabs button,.ksx-sein{min-height:40px}
  .ksx-tabs button{height:38px}
  .ksx-pkop{position:static;border-radius:12px 12px 0 0}
}
@media (max-width:1099px) and (min-width:861px){ .ksx-tkop{top:0} }
@media (max-width:860px), (max-width:1023px) and (pointer:coarse){
  .ksx-kop .ksx-titel{display:none}
  .ksx-kop{margin-bottom:10px}
  .ksx-kopacties .ks-inst > summary span{display:none}
  .ksx-tkop{top:calc(var(--kop,56px) + env(safe-area-inset-top))}
  .ksx-zoek{height:44px}
  .ksx-zoek kbd{display:none}
  .ksx-paneelknop{height:40px}
  .ksx-scoremenu{right:auto;left:0;width:min(300px,calc(100vw - 48px))}
}
/* ks-gorgias ronde 2: de donkere merkhoek boven het ingeklapte menu even smal als het menu; de Hulp-knop linksonder zodat hij
   nooit over de hoofdknop van het antwoord valt; op de telefoon met een open gesprek alleen het gesprek. */
@media (min-width:861px) and (pointer:fine), (min-width:1024px){
  #portaal.ks-werk:not(.ks-zij-open) .phead .brand{width:64px!important;flex:0 0 64px!important;padding:0 16px!important}
  #portaal.ks-werk:not(.ks-zij-open) .phead .brand > div:not(.logo){display:none}
  #portaal.ks-werk:not(.ks-zij-open) .pbalk::after{left:64px}
  body:has(#portaal.ks-werk) .hulp-fab{left:10px!important;right:auto!important;bottom:12px!important;padding:0 9px;min-height:44px;width:auto}
  body:has(#portaal.ks-werk:not(.ks-zij-open)) .hulp-fab > span:last-child{display:none}
}
@media (max-width:1099px){
  .ksx-main:has(.ksx.heeftsel) > :is(.ksx-kop,.ksx-meldpaneel,.setupbalk,.crauto-kaart){display:none}
  .ksx-tkop{position:static}
  .ksx-tkop1{flex-wrap:wrap;row-gap:4px}
  .ksx-tkop1 h2{order:3;flex:1 1 100%}
  .ksx-terug{margin-right:auto}
  .ksx-balk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .ksx-balk > *{min-width:0}
  .ksx-status{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .ksx-status::-webkit-scrollbar{display:none}
  .ksx-sein{flex:0 0 auto}
  .ksx-balk .ksx-veld{width:100%}
  .ksx-balk .ksx-veld select{max-width:none;flex:1;min-width:0}
  .ksx-balk .ksx-pop > .ksx-k,.ksx-balk > .ksx-k{width:100%;justify-content:center}
}
@media (min-width:1280px) and (max-width:1439px){
  /* ks-fix3 (controle 12-10): hier stonden nog eigen .ksx.heeftsel-regels zonder de weergavenkolom (3 kolommen i.p.v. 4) —
     die overschreven (hogere specificiteit dan .ksx) de nieuwe vaste weergavenkolom vanaf 1280px hierboven, inclusief een
     paneel-dicht-regel die nu toch al woordelijk hetzelfde zegt als de regel in dat blok. Allebei weg; alleen de iets
     krappere padding op dit formaat blijft een eigen regel. */
  .ksx-tkop,.ksx-draad{padding-left:24px;padding-right:24px}
}
.ksx-balk .ksx-veld select{max-width:130px}
/* ks-fix3 (controle 12-10, 13): op een smalle telefoon kneep de 2-koloms balk Toegewezen/Prioriteit af tot "Nie…" — één
   kolom eronder is leesbaar in plaats van afgekapt. */
@media (max-width:480px){
  .ksx-balk{grid-template-columns:1fr}
}
/* ks-fix3 (controle 12-10, 11): op de telefoon viel de bestaande regel voor de Hulp-knop (linksboven, alleen vanaf
   861px/pointer:fine) weg, dus bleef hij rechtsonder staan — precies waar de hoofdknop van het antwoord en "Sluiten"
   zitten. Op de klantenservice-werkplek altijd linksonder, hoog genoeg om nooit over de voetrij van de opsteller te
   vallen. De knop zelf staat buiten #portaal (zie hulpZet() in app.js: "één keer in de body, dat elke keer opnieuw
   getekend wordt"), dus net als de bestaande desktop-regel hierboven via body:has(), niet #portaal .hulp-fab. */
@media (max-width:1099px){
  body:has(#portaal.ks-werk) .hulp-fab{left:10px!important;right:auto!important;bottom:calc(var(--tbh,0px) + 84px)!important}
}

/* 13-10: Jairo als baas met zweep in Agent OS (alleen voor Jairo) */
.aos-baas{ pointer-events:none; }
.aos-baas .aos-zweep{ stroke-dasharray:60; stroke-dashoffset:0; transform-origin:8.4px -17px; transform-box:view-box; }
.aos-baas .aos-baas-arm{ transform-origin:8.4px -27px; transform-box:view-box; }
.aos-baas.slaat .aos-baas-arm{ animation:aosZweepArm .55s ease-in-out 2; }
.aos-baas.slaat .aos-zweep{ animation:aosZweepKnal .55s ease-in-out 2; }
@keyframes aosZweepArm{ 0%{ transform:rotate(0) } 35%{ transform:rotate(-70deg) } 60%{ transform:rotate(35deg) } 100%{ transform:rotate(0) } }
@keyframes aosZweepKnal{ 0%,30%{ stroke-dashoffset:0 } 55%{ stroke-dashoffset:-12 } 100%{ stroke-dashoffset:0 } }
.aos-baas-tag rect{ fill:#111827; opacity:.88 } .aos-baas-tag text{ fill:#fff; font:600 7.5px system-ui, sans-serif; text-anchor:middle; }
.aos-au-wolk rect{ fill:#fff; stroke:#e11d48; stroke-width:1 } .aos-au-wolk text{ fill:#e11d48; font:800 8px system-ui, sans-serif; text-anchor:middle; }
.aos-au{ animation:aosAu .9s ease-out; }
@keyframes aosAu{ 0%,100%{ translate:0 0 } 15%{ translate:-3px -4px } 30%{ translate:3px 0 } 45%{ translate:-2px -2px } 60%{ translate:2px 0 } }
/* 13-10: trackerstatus in het winkeloverzicht: stip + één woord (uitleg in de tooltip). */
.gd-wstatus{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:12.5px;color:var(--tx2);cursor:help}
/* 13-10: wizard "JDA Tracker op je winkel zetten" (gdwToon in app.js). */
.gdw-code{white-space:pre-wrap;word-break:normal;overflow-wrap:anywhere;margin:8px 0 12px;padding:10px 12px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--tx)}
.gdw-code b{color:var(--acc);font-weight:600}
.gdw-lijst{margin:10px 0 12px;padding-left:20px;line-height:1.55}
.gdw-lijst li{margin:0 0 7px}
.gdw-titel{margin:0 0 10px;font-size:16px;outline:none}
.gdw-titel:focus,.gdw-titel:focus-visible{outline:none!important;box-shadow:none!important;border:0!important}
.gdw-ok{padding:10px 12px;border-radius:10px;background:rgba(22,130,70,.08);border:1px solid rgba(22,130,70,.32);font-size:13px;line-height:1.5}
/* 14-10 (Fase D) Lio-OS mission control in het Agent OS */
.lio{padding:12px;display:grid;gap:12px;min-width:0}
.lio .rood{color:var(--red);font-weight:650}
.lio-usage{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:12.5px;font-variant-numeric:tabular-nums}
.lio-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px}
.lio-blok,.lio-inhoud{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:12px 14px;min-width:0}
.lio-blok .md{font-size:13px;max-height:320px;overflow:auto}
.lio-kop{display:flex;gap:8px;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.lio-blok textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:72px}
.lio-dumps{display:grid;gap:4px;margin-top:8px;font-size:12px}
.lio-tabs{padding:0;flex-wrap:wrap}
.lio-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.lio-tab{min-width:680px}
.lio-skills{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:6px}
.lio-skill{border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12.5px;min-width:0}.lio-skill p{margin:4px 0;color:var(--tx2);font-size:12px;line-height:1.4}
.lio-kennis{display:grid;gap:5px;margin:8px 0 10px;font-size:12.5px}
.lio-krij{display:grid;grid-template-columns:140px minmax(0,1fr) 52px;gap:8px;align-items:center}.lio-krij span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lio-krij i{height:8px;border-radius:4px;background:var(--tx3);opacity:.45}.lio-krij b{text-align:right;font-variant-numeric:tabular-nums}
.lio-bord{display:grid;grid-template-columns:repeat(5,minmax(210px,1fr));gap:10px;overflow-x:auto;align-items:start;-webkit-overflow-scrolling:touch}
.lio-kaart{cursor:default}.lio-kaart p.rood{color:var(--red)}
.lio-inhoud .chat{border:0;padding:0}
@media(max-width:820px){.lio{padding:8px 0}.lio-top{grid-template-columns:minmax(0,1fr)}.lio-krij{grid-template-columns:100px minmax(0,1fr) 44px}.lio-blok,.lio-inhoud{padding:10px 12px}}

/* =====================================================================
   CHECKOUT-DASHBOARD (14-10, herontwerp "zoals Shopify Analytics", Jairo)
   Alles hangt aan .ckdash (de omhulling die vCheckout in checkout.js om elk checkoutscherm zet) of aan een ck-klasse,
   zodat de rest van de hub niet verandert. Rechte hoeken (2px), één lijn als rand, geen schaduw, geen verloop.
   Eén accent: JDA-zwart met crème voor de actieve keuze en de hoofdknop (in de donkere weergave omgedraaid).
   Groen en rood alleen voor stijgen en dalen (en de statusbadges), oranje alleen voor "let op". Cijfers uitgelijnd.
   De !important hieronder is bewust en alleen voor hoeken en schaduw: de schermen hebben eigen <style>-blokken die
   later in de pagina staan en anders winnen.
   ===================================================================== */
.ckdash{--ck-r:2px;--ck-acc:#141414;--ck-acc-tx:#F2EEE3;--ck-sel:var(--hover);font-variant-numeric:tabular-nums;min-width:0}
html[data-theme="dark"] .ckdash{--ck-acc:#F2EEE3;--ck-acc-tx:#141414}
.ckdash .card,.ckdash .btn,.ckdash .inp,.ckdash select,.ckdash textarea,.ckdash .seg,.ckdash .seg button,
.ckdash [class^="ck"],.ckdash [class*=" ck"],.ckdash button,.ckdash .ckbl-chip em{border-radius:var(--ck-r)!important;box-shadow:none!important}
/* Rond blijft rond: stapbolletjes en het (i)-teken. */
.ckdash .cklaatst-bol,.ckdash .cki{border-radius:50%!important}
.ckdash .card{border:1px solid var(--line);background:var(--panel)}
.ckdash .card h3{font-size:15px;font-weight:600;letter-spacing:0}
.ckdash .btn{box-shadow:none}
.ckdash .btn:active{transform:none}
.ckdash .btn.pri{background:var(--ck-acc);border-color:var(--ck-acc);color:var(--ck-acc-tx)}
.ckdash .btn.pri:hover{background:var(--ck-acc);border-color:var(--ck-acc);opacity:.88}
.ckdash .inp:focus,.ckdash select:focus,.ckdash textarea:focus{outline:1px solid var(--ck-acc);outline-offset:0;border-color:var(--ck-acc)}
.ckdash input[type=checkbox],.ckdash input[type=radio],.ckdash input[type=range]{accent-color:var(--ck-acc)}
.ckdash .seg{background:var(--panel);border:1px solid var(--line2);padding:0;gap:0}
.ckdash .seg button{border-radius:0;padding:5px 11px;font-size:13px;color:var(--tx2)}
.ckdash .seg button.on{background:var(--ck-acc);color:var(--ck-acc-tx);font-weight:500}
.ckdash .hr{height:1px;background:var(--line);margin:12px 0}

/* Zinskapitalen: geen labels in HOOFDLETTERS meer. */
.ckdash .ckversies>span,.ckdash .cksplit th,.ckdash .ckeigen h4,.ckdash .ckab-verdeling .ckab-l,.ckdash .ckbl-plek-kop,
.ckdash .ckperiode>span,.ckdash .ckedab .ckversies>span{text-transform:none;letter-spacing:0;font-size:12px;color:var(--tx2)}

/* Actieve keuzes: altijd hetzelfde JDA-zwart met crème. */
.ckdash .ckversie{border-color:var(--line2)}
.ckdash .ckversie.on,.ckdash .ckedab .ckversie.on{background:var(--ck-acc);border-color:var(--ck-acc);color:var(--ck-acc-tx)}
.ckdash .ckversie.on small,.ckdash .ckedab .ckversie.on small{color:inherit;opacity:.75}
.ckdash .ckedab.b{border-color:var(--ck-acc)}
.ckdash .ckpagina.on{border-color:var(--ck-acc);background:var(--ck-sel)}
.ckdash .ckpagina.nieuw{color:var(--tx)}
.ckdash .ckblok.on{background:var(--ck-acc);color:var(--ck-acc-tx)}
.ckdash .ckbl-toon input:checked + span{background:var(--ck-acc)}
.ckdash .ckpi:has(input:checked){border-color:var(--ck-acc);outline:1px solid var(--ck-acc);outline-offset:-2px}
.ckdash .cked-chip{border-color:var(--line2);background:var(--panel)}
.ckdash .cked-chip:hover{border-color:var(--ck-acc)}
.ckdash .cked-chip i{background:var(--ck-acc)}
.ckdash .cked-nav button:hover{border-color:var(--ck-acc)}
/* Lijnen in plaats van stippellijnen; alleen een sleepvak blijft gestippeld (daar hoort iets heen). */
.ckdash .ckmeer,.ckdash .ckbl-bundelregel{border-style:solid}
.ckdash .ckkiezer{background:var(--panel)}
.ckdash .ckmelding-uit{border-color:var(--red)}
.ckdash .ckstat{white-space:nowrap}
.ckdash .ckmelding-uit h3{color:var(--red)}

/* Periode: gesegmenteerde knop, rechts "Vergelijk met vorige periode". */
.ckperiode-rij{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:0 0 12px}
.ckdash .ckperiode{display:inline-flex;gap:0;flex-wrap:wrap;align-items:center;margin:0}
.ckdash .ckper{padding:6px 12px;border:1px solid var(--line2);background:var(--panel);color:var(--tx2);font-size:13px;margin:0 0 0 -1px;min-height:32px;box-shadow:none}
.ckdash .ckperiode .ckper:first-child{margin-left:0}
.ckdash .ckper:hover{color:var(--tx)}
.ckdash .ckper.on{background:var(--ck-acc);border-color:var(--ck-acc);color:var(--ck-acc-tx);position:relative;z-index:1}
.ckperiode-extra{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ckdash .ckperiode-extra .ckper,.ckdash .ckagenda-snel .ckper{margin-left:0}
.ckdash .ckagenda{background:var(--panel);border:1px solid var(--line);padding:14px;margin:-4px 0 14px;max-width:460px}
.ckdash .ckagenda[hidden]{display:none}
.ckagenda-snel{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.ckana-uitleg{margin:0 0 12px;font-size:12.5px;max-width:120ch}

/* De rij van zes cijfers bovenaan Analytics. */
.ckkr{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border:1px solid var(--line);background:var(--panel);margin:0 0 16px}
.ckkr-c{padding:12px 14px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;min-width:0}
.ckkr-c:last-child{border-right:0}
.ckkr-l{font-size:12.5px;color:var(--tx2)}
.ckkr-v{font-size:21px;font-weight:600;letter-spacing:-.01em;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ckkr-d{font-size:12px;color:var(--tx3)}
.ckkr-d.op{color:var(--grn)}
.ckkr-d.neer{color:var(--red)}
.ckkr-s{font-size:12px;color:var(--tx3)}
.ckkr-lijn{width:100%;height:28px;margin-top:4px;color:var(--tx2)}

/* Kaarten met een kop, inhoud en voet; tabellen lopen tot de rand en scrollen in hun eigen vak. */
.ckana{display:grid;gap:16px;min-width:0}
.ckana>*{margin:0;min-width:0}
.ckgrid2{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px;align-items:start;min-width:0}
.ckgrid2>*{margin:0;min-width:0}
.ckdash .ckkaart{padding:0;min-width:0}
.ckkaart-kop{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:11px 14px;border-bottom:1px solid var(--line)}
.ckdash .ckkaart-kop h3{margin:0;font-size:14px;font-weight:600;display:block;line-height:1.35}
.ckkaart-kop h3 small{font-weight:400;color:var(--tx3);font-size:12px;margin-left:4px}
.ckkaart-in{padding:12px 14px}
.ckkaart-voet{padding:10px 14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--tx2);line-height:1.5}
.ckscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.ckkaart .cktbl th:first-child,.ckkaart .cktbl td:first-child{padding-left:14px}
.ckkaart .cktbl th:last-child,.ckkaart .cktbl td:last-child{padding-right:14px}
.ckkaart .cktbl thead th{background:var(--panel2)}
.ckcijfers{display:flex;gap:12px 24px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.ckcijfers>div{display:flex;flex-direction:column;min-width:0;max-width:280px}
.ckcijfers b{font-size:17px;font-weight:600}
.ckcijfers em{font-style:normal;font-size:11.5px}
.ckzoekrij{border-bottom:1px solid var(--line);padding:10px 14px}
.ckzoekrij .inp{width:100%;max-width:420px}
.ckab-uitslag{margin-top:16px}
.ckdash-abtests .ckversies{margin:0}

/* Het kopje "Beheer" in de checkout-zijbalk van een klant (ckZijbalkBeheer). */
#side .ckzij-kop{font-size:12px;color:rgba(242,244,247,.42);font-weight:600;letter-spacing:.1em;padding:14px 10px 6px}

@media(max-width:1100px){
  .ckgrid2{grid-template-columns:minmax(0,1fr)}
  .ckkr{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ckkr-c:nth-child(3n){border-right:0}
  .ckkr-c:nth-child(-n+3){border-bottom:1px solid var(--line)}
}
@media(max-width:900px){ #side .ckzij-kop{display:none} }
/* Telefoon: zes cijfers drie per rij, tabellen scrollen zijwaarts in hun eigen vak, nooit de hele pagina. */
@media(max-width:600px){
  .ckdash{overflow-x:hidden}
  .ckkr-c{padding:10px 10px}
  .ckkr-v{font-size:15px;white-space:normal;overflow-wrap:normal;line-height:1.25}
  .ckkr-l,.ckkr-d,.ckkr-s{font-size:11.5px}
  .ckperiode-rij{flex-direction:column;align-items:stretch}
  .ckperiode-extra{justify-content:flex-start}
  .ckkaart-kop{padding:10px 12px}
  .ckkaart-in{padding:10px 12px}
  .ckdash .ckbar-sub{display:flex}
  .ckdash .ckstap{grid-template-columns:minmax(0,1fr) auto}
}
/* Trechter in een smalle kaart: label, balk, en het getal met percentage ernaast zonder af te breken. */
.ckkaart .ckstap{grid-template-columns:minmax(80px,150px) minmax(0,1fr) auto}
.ckkaart .ckstap>span:last-child{white-space:nowrap}

/* ---- Checkout-dashboard, tweede ronde (14-10, Jairo: "layout, highlights, dikgedrukte tekst, kleurvlakken") ---- */
/* Paginatitel met de statuschips rechts ernaast (ckStatusBadges zit nu in .ckkop). */
.ckdash .ckkop{display:flex;justify-content:space-between;align-items:flex-start;gap:8px 16px;flex-wrap:wrap}
.ckkop-tekst{min-width:0;flex:1 1 320px}
.ckdash .ckkop .ckstatusbadges{margin:4px 0 0;flex:0 1 auto;justify-content:flex-end}
/* Cijferrij: het cijfer groot en vet, het verschil als gekleurd blokje direct eronder. */
.ckdash .ckkr-v{font-size:clamp(22px,2.1vw,30px);font-weight:700;line-height:1.15;letter-spacing:-.02em}
.ckdash .ckkr-d{display:inline-block;align-self:flex-start;padding:1px 7px;margin:5px 0 2px;font-size:12px;font-weight:600;background:var(--panel2);color:var(--tx2);white-space:nowrap}
.ckdash .ckkr-d.op{background:rgba(22,130,70,.13);color:var(--grn)}
.ckdash .ckkr-d.neer{background:rgba(180,35,24,.11);color:var(--red)}
.ckdash .ckkr-s{margin-top:2px}
/* Rood/groen in een zin (traag laden, laadfouten, kaartvelden onder 99%). */
.ckdash .ckrood{color:var(--red);font-weight:600}
.ckdash .ckgroen{color:var(--grn);font-weight:600}
.ckdash .ckkv-regel{margin:6px 0 2px;color:var(--tx)}
.ckkaart-voet .hint{font-size:12px;line-height:1.45}
/* De hoofdkolom van een tabel: vet, licht vlak; de beste groen, de slechtste rood. */
.ckdash .cktbl .ckhoofd{font-weight:700;background:rgba(127,127,127,.07)}
.ckdash .cktbl thead th.ckhoofd{background:rgba(127,127,127,.15);color:var(--tx)}
.ckdash .cktbl td.ckhoofd.goed{color:var(--grn);background:rgba(22,130,70,.11)}
.ckdash .cktbl td.ckhoofd.slecht{color:var(--red);background:rgba(180,35,24,.09)}
/* Afhaakpercentage in de trechter als vlakje. */
.ckdash .ckafh{display:inline-block;padding:1px 6px;margin-left:4px;font-size:12px;font-weight:600;background:var(--panel2);color:var(--tx2)}
.ckdash .ckafh.slecht{background:rgba(180,35,24,.11);color:var(--red)}
.ckdash .ckafh.goed{background:rgba(22,130,70,.13);color:var(--grn)}
.ckdash .ckversie-laad{line-height:1.55}
.ckkolom{display:grid;gap:16px;min-width:0;align-content:start}
.ckkolom>*{margin:0;min-width:0}
.ckcijfers.ckcijfers-los{margin-top:0;padding-top:0;border-top:0}
/* Versiekiezer ("Je bewerkt Checkout A / Checkout B") overal zoals in de editor, ook op Verzending en prijs en de
   Bedankpagina, waar het stijlblok van de editor (CKB_STIJL) niet staat en de knoppen ongestyled een zwart blok werden. */
.ckdash .ckedab{border:1px solid var(--line);padding:10px 12px;margin:0 0 12px;background:var(--panel)}
.ckdash .ckedab .ckversies,.ckdash .ckversies{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ckdash .ckversie{padding:6px 12px;border:1px solid var(--line2);background:var(--panel);color:var(--tx2);font-size:13px;cursor:pointer;line-height:1.3}
.ckdash .ckversie small{color:var(--tx3);font-size:11.5px}
.ckdash .ckedab-uitleg{margin:8px 0 0;font-size:12.5px;color:var(--tx2);line-height:1.45}
/* Verzending en prijs: de staffels als één tabel; het voorbeeld rechts iets smaller zodat de tabel ruimte heeft. */
.ckdash .ckst-wrap{grid-template-columns:minmax(0,1fr) minmax(0,400px)}
.ckst-tabelvak{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 10px;border:1px solid var(--line)}
.ckst-tabel{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.ckst-tabel th:first-child{width:66px}
.ckst-tabel th:nth-child(2){width:104px}
.ckst-tabel th.ckst-munt{width:96px;white-space:normal;line-height:1.25}
.ckst-tabel th.ckst-wegkop{width:44px}
.ckst-tabel th{font-weight:500;font-size:12px;color:var(--tx2);text-align:left;padding:7px 8px;background:var(--panel2);border-bottom:1px solid var(--line);line-height:1.25;vertical-align:bottom}
.ckst-tabel td{padding:5px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
.ckst-tabel tr:last-child td{border-bottom:0}
.ckst-tabel .inp{width:100%;min-width:0;margin:0;padding:6px 8px}
.ckst-tabel .ckst-wegcel{text-align:right}
@media(max-width:1400px){
  .ckkr{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ckkr-c:nth-child(3n){border-right:0}
  .ckkr-c:nth-child(-n+3){border-bottom:1px solid var(--line)}
}
@media(max-width:600px){
  .ckdash .ckkop .ckstatusbadges{justify-content:flex-start;margin:0}
  /* Vijf periodeknoppen (met Gisteren erbij): op de telefoon op twee regels die de breedte vullen, niet half buiten beeld. */
  .ckdash .ckperiode{flex-wrap:wrap!important;overflow:visible;padding-right:0;-webkit-mask-image:none;mask-image:none;row-gap:0}
  .ckdash .ckperiode .ckper{flex:1 1 auto;padding:0 10px!important;margin-top:-1px}
  .ckkr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ckkr-c:nth-child(3n){border-right:1px solid var(--line)}
  .ckkr-c:nth-child(2n){border-right:0}
  .ckkr-c:nth-child(-n+4){border-bottom:1px solid var(--line)}
  .ckkr-c:nth-child(n+5){border-bottom:0}
  .ckdash .ckkr-v{font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ckst-tabelvak{border:0;overflow:visible}
  .ckst-tabel,.ckst-tabel tbody{display:block}
  .ckst-tabel thead{display:none}
  .ckst-tabel tr.ckst-rij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px;gap:6px 8px;padding:10px 0;border-bottom:1px solid var(--line)}
  .ckst-tabel td{display:block;padding:0!important;border:0;min-width:0}
  .ckst-tabel td[data-kol]::before{content:attr(data-kol);display:block;font-size:11.5px;color:var(--tx2);margin-bottom:2px}
  .ckst-tabel td.ckst-breed{grid-column:1/-1}
  .ckst-tabel .ckst-wegcel{grid-column:3;grid-row:1;align-self:end;width:auto}
  .ckst-tabel{table-layout:auto}
}

/* Reacties 18-10 (CommentGuard-nabouw), herzien 18-10 avond (uitlijning): één ritme voor alle subtabs.
   - .rx-blok: alle kaarten van een subtab onder elkaar met 14px tussenruimte, binnen de 1120px van main.pmain.
   - .rx-werkbalk: werkbalk bovenaan elke subtab (links keuze, rechts de hoofdknop), zelfde hoogte als .inp.s/.btn.sm.
   - Formulieren: label.f (kop + veld) en label.vinkrij (vinkje + .tekst), zoals de rest van de hub. Velden onder een
     vinkje springen 25px in (16px vinkje + 9px gap), precies onder de tekst van het vinkje.
   - Geen nieuwe kleuren: alleen de bestaande tokens (--panel, --line, --tx2, --tx3, --acc, --amb, --red, --grn) en .c-*-chips. */
.rx-blok{display:flex;flex-direction:column;gap:14px;container:rx / inline-size}   /* kolommen volgen de breedte van de inhoud, niet van het scherm */
.rx-blok > *{margin-top:0;margin-bottom:0}
.rx .card > :last-child{margin-bottom:0}
.rx .card h3{margin-bottom:10px}
.rx .card .rx-kaartuitleg{margin:-4px 0 10px}
.rx h4.rx-kop{font-size:13.5px;font-weight:600;color:var(--tx);margin:0 0 4px}
.rx .card .warn{margin:0 0 10px}
.rx .bar2{margin-bottom:0}
.rx .card .bar2{margin-top:10px}
.rx .hr{margin:16px 0}
.rx div.f{display:block;margin-bottom:12px}
.rx div.f > span em{color:var(--tx3);font-style:normal;font-weight:400}
.rx label.f > .inp, .rx label.f > select.inp, .rx label.f > textarea.inp{width:100%}
.rx .card .empty{padding:28px 12px}
.rx .card .empty p{margin-bottom:12px}
.rx-smal{max-width:640px}
.rx .rx-knoppen{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* werkbalk */
.rx-werkbalk{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;min-height:32px}
.rx-werkbalk-l,.rx-werkbalk-r{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;min-width:0}
.rx-werkbalk-r{margin-left:auto}
.rx-kies{display:flex;align-items:center;gap:8px;margin:0}
.rx-kies > span{font-size:12.5px;color:var(--tx2);font-weight:500;white-space:nowrap}
.rx-kies select.inp{min-width:180px;max-width:280px}
.rx-dagteller{font-size:12.5px;color:var(--tx3);white-space:nowrap}
.rx-dagteller b{color:var(--tx2);font-weight:600}
.rx-dagteller.rx-warm,.rx-dagteller.rx-warm b{color:var(--amb)}

/* segmentknop (Inbox/Archief/Bin, Toepassen op, periode) */
.rx-seg{display:inline-flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden;background:var(--panel);flex:0 0 auto}
.rx-seg button{height:30px;padding:0 12px;font-size:12.5px;background:transparent;border:0;border-right:1px solid var(--line);color:var(--tx2);cursor:pointer;white-space:nowrap}
.rx-seg button:last-child{border-right:0}
.rx-seg button:hover{background:var(--hover)}
.rx-seg button.on{background:var(--acc);color:var(--on-acc,#fff)}   /* --on-acc zoals .btn.pri, anders wit op wit in de donkere modus */

/* filters (Overzicht): 4 kolommen (pagina, soort, zichtbaarheid, beantwoord / zoeken over 2, van, tot); smal: 2 kolommen.
   "Antwoord nodig" staat als snelfilter in de werkbalk naast Inbox/Archief/Bin. */
.rx-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:center}
.rx-filters .inp{width:100%;min-width:0}
.rx-filters .rx-fzoek{grid-column:span 2}
.chk.rx-fvink{height:32px;padding:0 10px;font-size:12.5px;color:var(--tx2);background:var(--panel);border-color:var(--line2);border-radius:8px;white-space:nowrap;margin:0}
.chk.rx-fvink input{width:15px;height:15px}
.rx-fdatum{display:flex;align-items:center;gap:6px;min-width:0;margin:0}
.rx-fdatum > span{font-size:12px;color:var(--tx3);flex:0 0 auto;min-width:22px}
.rx-fdatum .inp{flex:1}

/* lijst */
.rx-lijst{display:flex;flex-direction:column;gap:10px}
.rx-lijstkop{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;min-height:38px;padding:4px 10px 4px 14px;
  border:1px solid transparent;border-radius:10px}
.rx-lijstkop.actief{background:var(--panel2);border-color:var(--line)}
.rx-alles{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--tx2);margin:0;cursor:pointer}
.rx-alles input,.rx-vink{width:16px;height:16px;accent-color:var(--acc);flex:0 0 16px;margin:0}
.rx-alles b{color:var(--tx);font-weight:600}
.rx-rijen{display:flex;flex-direction:column;gap:10px}
.rx-rij{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;align-items:start;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.rx-rij .rx-vink{margin-top:2px}
.rx-rij.gekozen{border-color:var(--acc)}
.rx-rijinhoud{min-width:0}
.rx-rijkop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px;min-height:20px}
.rx-rijkop b{font-size:13.5px;font-weight:600}
.rx-rijkop b.rx-anoniem{color:var(--tx2);font-weight:550}
.rx-bron{display:inline-flex;gap:5px;margin-left:auto}
.rx-tekst{font-size:13.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 6px}
.rx-tekst.rx-leeg{color:var(--tx3);font-style:italic}
.rx-rij.rx-verborgen .rx-tekst{color:var(--tx3);font-style:italic}
.rx-chips{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 8px}
.rx-antwoordregel{margin:0 0 8px;padding:6px 10px;border-left:3px solid var(--line2);font-size:12.5px;line-height:1.45;overflow-wrap:anywhere}
.rx-antwoordregel svg{width:13px;height:13px;vertical-align:-2px;margin-right:4px}
.rx-acties{display:flex;flex-wrap:wrap;gap:6px;align-items:center;position:relative}
.rx-acties .btn svg{width:14px;height:14px}
.rx-meer{position:relative}
.rx-meermenu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:220px;max-width:280px;padding:6px;border:1px solid var(--line2);border-radius:12px;background:var(--panel);
  box-shadow:0 12px 32px -12px rgba(20,20,20,.35);display:grid;gap:1px}
.rx-meermenu button,.rx-meermenu a{display:flex;align-items:center;gap:6px;text-align:left;padding:7px 9px;border-radius:8px;font-size:12.5px;color:var(--tx);background:none;border:0;cursor:pointer;text-decoration:none}
.rx-meermenu button:hover,.rx-meermenu a:hover{background:var(--hover)}
.rx-meermenu button:disabled{opacity:.55;cursor:default}
.rx-meermenu svg{width:13px;height:13px}
.rx-meermenu .rx-meerkop{padding:6px 9px 2px;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--tx3)}
.rx-meerhint{margin:0;padding:7px 9px;font-size:12px;line-height:1.45;color:var(--tx3)}
.rx-meerladen{justify-content:center}

/* antwoordvak, AI-kennis, bewaarde antwoorden */
.rx-antwoordvak,.rx-kennisvak,.rx-bewaardbeheer{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px;margin:0 0 8px}
.rx-antwoordbalk{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.rx-antwoordbalk .rx-spatie{flex:1}
.rx-antwoordbalk .btn svg{width:13px;height:13px}
.rx-antwoordtekst{width:100%;min-height:72px}
.rx-vertaling{margin:6px 0 0}
.rx-antwoordvoet{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin-top:8px}
.rx-mention{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tx2);margin:0}
.rx-mention input{width:15px;height:15px;accent-color:var(--acc)}
span.rx-mention{color:var(--tx3)}
.rx-kennisknop{margin-top:8px}
.rx-kennisvak,.rx-bewaardbeheer{margin:8px 0}
.rx-bewaardrij{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.rx-bewaardrij:last-of-type{border-bottom:0}
.rx-bewaardtekst{flex:1;min-width:0}
.rx-bewaardtekst b{display:block;font-size:13px}
.rx-bewaardtekst .hint{display:block;overflow-wrap:anywhere}
.rx-bewaardform{padding:8px 0;border-bottom:1px solid var(--line)}

/* formulieren */
.rx-velden{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 14px;align-items:end}   /* velden onderaan gelijk, ook als een kop twee regels wordt */
.rx-velden > label.f,.rx-velden > div.f{min-width:0}
.rx-velden.rx-half{grid-template-columns:repeat(2,minmax(0,1fr))}   /* één veld: halve breedte, niet de hele kaart */
.rx-sub{margin:0 0 6px 25px}
.rx-sub > label.f:last-child,.rx-sub.rx-velden > label.f{margin-bottom:6px}
.rx-sub > .vinkrij{padding:6px 0 2px}
.rx-geenvink{padding-left:25px}
.rx .vinkrij{margin:0;cursor:pointer}
.rx .vinkrij.rx-uit{opacity:.55;cursor:not-allowed}
.rx .vinkrij .chip{margin-left:6px;vertical-align:1px}
.rx-vinkgroep{display:flex;flex-wrap:wrap;gap:0 20px}
.rx-vinkgroep > .vinkrij{padding:5px 0}
.rx-vinkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0 16px;margin-top:6px}
.rx-vinkgrid > .vinkrij{padding:5px 0}
.rx-naveld{margin-top:6px}
.rx label.f > span.rx-inline{display:flex;align-items:center;gap:8px;margin:0;font-size:inherit;font-weight:400;color:inherit}
.rx-inline select.inp{flex:1;min-width:0}
.rx-inline .rx-min{width:72px;flex:0 0 72px}
.rx-uitklap{margin:2px 0 6px}
.rx .rx-sub > details.rx-uitklap{border-top:0;padding:0}   /* .card details zet een lijn erboven; onder een vinkje hoort die niet */
.rx-uitklap > summary{cursor:pointer;font-size:12.5px;font-weight:550;color:var(--tx2);padding:4px 0;list-style-position:inside}
.rx-uitklap > summary .hint{font-weight:400;margin-left:4px}
.rx-uitklap[open] > summary{margin-bottom:8px}
.rx-varianten{display:flex;flex-direction:column;gap:8px}
.rx-variant{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start}
.rx-variant .btn svg{width:13px;height:13px}
.rx-faq{display:flex;flex-direction:column;gap:8px}
.rx-faqrij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:8px;align-items:center}
.rx-faqrij .btn svg{width:13px;height:13px}
.rx-formvoet{padding-top:4px}
.rx-opslabalk{padding:2px 0}
.rx-testuit{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin-top:12px;padding:10px 12px;background:var(--panel2);border:1px solid var(--line);border-radius:10px}
.rx-testuit .rx-chips{margin:0}
.rx-agenttest{flex-direction:column;align-items:flex-start}
.rx-concept{margin:0;font-size:13px;line-height:1.5;white-space:pre-wrap}

/* lijstrijen (automations, agents) en paginakaarten */
.rx-lijstgroep{display:flex;flex-direction:column;gap:10px}
.rx-lijstrij{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.rx-lijstrij-tekst{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 260px}
.rx-lijstrij-tekst b{font-size:13.5px;font-weight:600}
.rx-pagkaart h3{margin-bottom:4px}
.rx-pagrij{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line)}
.rx-pagkaart .warn,.rx-pagkaart .rx-melding{margin:12px 0 0}
.rx-paghint .rx-metafout{display:block;margin-top:4px;opacity:.8;font-size:11.5px}
.rx-melding{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;padding:11px 13px;border-radius:10px;font-size:12.5px;line-height:1.55}
.rx-melding.rood{color:var(--red);background:color-mix(in srgb,var(--red) 7%,var(--panel));border:1px solid color-mix(in srgb,var(--red) 32%,var(--line))}
.rx-fouttekst{margin:2px 0 8px;color:var(--red)}

/* startwizard */
.rx-wizvoort{display:flex;gap:6px 18px;flex-wrap:wrap;list-style:none;margin:0 0 16px;padding:0}
.rx-wizvoort li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tx3)}
.rx-wizvoort li.on{color:var(--tx);font-weight:550}
.rx-wizstip{width:24px;height:24px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--tx3);flex:0 0 24px}
.rx-wizvoort li.on .rx-wizstip{background:var(--acc);color:var(--on-acc,#fff);border-color:var(--acc)}
.rx-wizvoort li.af .rx-wizstip{background:var(--grn);color:#fff;border-color:var(--grn)}
.rx-smal > .hint{margin:0 0 6px}
.rx-puntjes{margin:10px 0 4px 18px;font-size:13px;line-height:1.65;color:var(--tx2)}
.rx-paglijst{margin:0 0 10px;border-top:1px solid var(--line)}
.rx-pagvink{display:flex;align-items:center;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;padding:4px 0;border-bottom:1px solid var(--line)}
.rx-pagvink > .vinkrij{flex:1 1 220px}
.rx-pagvink .rx-igvink{flex:0 0 auto}
.rx-paguitslag{padding:8px 0}
.rx-presetkaart{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:10px;margin:0 0 10px;cursor:pointer}
.rx-presetkaart:has(input:checked){border-color:var(--acc)}
.rx-presetkaart input{margin-top:3px;width:16px;height:16px;accent-color:var(--acc);flex:0 0 16px}
.rx-presetkaart .tekst{display:flex;flex-direction:column;gap:2px}
.rx-presetkaart .lbl{font-size:13.5px;font-weight:600}

/* inzichten */
.rx-kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.rx-twee{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:start}
.rx-balkrij{display:flex;align-items:center;gap:10px;margin:6px 0}
.rx-balklabel{width:170px;flex:0 0 170px;font-size:12.5px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rx-balk{flex:1;height:8px;border-radius:5px;background:var(--panel2);overflow:hidden}
.rx-balk i{display:block;height:100%;background:var(--acc)}
.rx-balkwaarde{width:44px;text-align:right;font-size:12.5px;color:var(--tx2);font-variant-numeric:tabular-nums}

/* beheerkaart: tabel van 7 kolommen, dus de hele rij van het beheerraster */
.card.rx-beheer{grid-column:1/-1}
.rx-code{font-size:12px;padding:2px 6px;border-radius:6px;background:var(--panel2);border:1px solid var(--line);overflow-wrap:anywhere}

@container rx (max-width:760px){
  .rx-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rx-filters .rx-fzoek{grid-column:1/-1}
}
@media (max-width:700px){
  .rx-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rx-filters .rx-fzoek{grid-column:1/-1}
  .rx-velden.rx-half{grid-template-columns:minmax(0,1fr)}
  .rx .btn{min-height:36px}
  .rx-seg button{height:36px}
  .rx-werkbalk-r{margin-left:0}
  .rx-kies{flex:1 1 100%}
  .rx-kies select.inp{flex:1;max-width:none;min-width:0}
  .rx-rij{padding:12px}
  .rx-bron{margin-left:0;flex-basis:100%}
  .rx-sub{margin-left:25px}
  .rx-faqrij{grid-template-columns:minmax(0,1fr) auto}
  .rx-faqrij [data-rxfaqa]{grid-column:1;grid-row:2}
  .rx-faqrij .btn{grid-column:2;grid-row:1 / span 2;align-self:center}
  .rx-variant{grid-template-columns:minmax(0,1fr)}
  .rx-balklabel{width:110px;flex:0 0 110px}
  .rx-wizvoort li:not(.on) .rx-wizlabel{display:none}
  .rx-antwoordbalk .rx-spatie{display:none}
  .rx-meer{position:static}
  .rx-meermenu{left:0;right:auto;width:min(280px,100%);max-width:none}
}

/* Add-ons 19-10 (CommentGuard als betaalde add-on): hergebruikt zoveel mogelijk bestaande klassen (.abvb-*,
   .pcard, .ab-h3, .chip, .ab-link, .bar2) — hier alleen wat er nog niet was.
   - .abvb-addon: de previewpagina (rxPreviewPagina) gebruikt dezelfde .abvb-opbouw als aboVoorbeeld, maar heeft
     al een eigen <h1> (rxKop()) erboven staan; de titel van de kaart zelf is daarom een <h2>, zelfde formaat
     als .abvb h1 had.
   - .ab-addon-*: de add-on-rij op Abonnement (aboAddonsHtml), zelfde ritme als .rx-lijstrij. */
.abvb-addon h2{font-size:30px;letter-spacing:-.02em;margin:0 0 6px;line-height:1.1}
@media (max-width:860px){ .abvb-addon h2{font-size:24px;margin-bottom:4px} }
.ab-addons{gap:10px}
.ab-addon-rij{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}
.ab-addon-rij:first-of-type{border-top:0;padding-top:4px}
.ab-addon-tekst{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 220px}
.ab-addon-tekst b{font-size:13.5px;font-weight:600}
.ab-addon-acties{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* 19-10 (opdracht: CommentGuard bij het afsluiten): het vinkje op de keuzepagina/betaalstap (aboUpsellHtml),
   zelfde .chk-stijl als elders in de hub, met de titel/uitleg als kolom (anders loopt <em> inline achter <b>). */
.ab-addon-vink{margin:10px 0 0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.ab-addon-vink .chk{width:100%}
.ab-addon-vink .chk span{display:flex;flex-direction:column;gap:1px}
.ab-addon-vink .chk em{font-style:normal;font-size:12.5px;color:var(--tx3)}
/* 19-10 (correctie na controle op 390px): de previewpagina heeft, anders dan de gewone .abvb-cta (aboVoorbeeld),
   drie regels in de prijskaart (bedrag+label, de incl.-regel eronder, dan de knop) — in de staande rij van de
   860px-regel hierboven (.abvb-cta{flex-direction:row}) werd dat te krap en brak de knoptekst af. Onder 480px
   daarom gestapeld: bedrag + label weer op één regel, de incl.-regel klein eronder, de knop op volle breedte. */
@media (max-width:480px){
  .abvb-addon .abvb-cta{flex-direction:column;align-items:stretch;gap:6px}
  .abvb-addon .abvb-prijs{flex-direction:row;align-items:baseline;gap:8px}
  .abvb-addon .rx-addon-inclbtw{font-size:11px}
  .abvb-addon .abvb-knop.v5-cta{margin:4px 0 0;width:100%;max-width:none;flex:none}
}

/* ---------- 'Nieuw'-markering in het menu (20-10): zachte glans + pulserend stipje; zie MENU_NIEUW in app.js ---------- */
.pnav.nieuw,.mrij.nieuw{position:relative;overflow:hidden}
.pnav.nieuw::after,.mrij.nieuw::after{content:'';position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);transform:translateX(-140%);
  animation:pnavGlans 3.2s ease-in-out 1s infinite}
html[data-theme="dark"] .pnav.nieuw::after,html[data-theme="dark"] .mrij.nieuw::after{background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.14) 50%,transparent 100%)}
.pnav-nieuw{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--grn);margin-left:7px;vertical-align:middle;flex:0 0 7px;
  box-shadow:0 0 0 0 rgba(47,122,74,.45);animation:pnavPuls 2.2s ease-out infinite}
html[data-theme="dark"] .pnav-nieuw{box-shadow:0 0 0 0 rgba(116,194,143,.45)}
.mrl .pnav-nieuw{margin-left:8px}
@keyframes pnavGlans{0%{transform:translateX(-140%)}55%{transform:translateX(320%)}100%{transform:translateX(320%)}}
@keyframes pnavPuls{0%{box-shadow:0 0 0 0 rgba(47,122,74,.45)}70%{box-shadow:0 0 0 7px rgba(47,122,74,0)}100%{box-shadow:0 0 0 0 rgba(47,122,74,0)}}
@media (prefers-reduced-motion:reduce){.pnav.nieuw::after,.mrij.nieuw::after{display:none}.pnav-nieuw{animation:none;box-shadow:none}}

/* Verlengactie-popup (20-10): maand → 3 maanden met extra korting. Kleuren via de thematokens, dus ook goed in dark. */
.vl-popup .mhead h2{font-size:1.3rem;line-height:1.2}
.vl-intro{margin:0 0 14px;color:var(--tx2)}
.vl-cijfers{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.vl-cijfers>div{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;text-align:center;min-width:0}
.vl-cijfers small{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
.vl-cijfers b{display:block;font-size:1.55rem;line-height:1.15;margin-top:4px}
.vl-cijfers span{display:block;font-size:.85rem;color:var(--tx2)}
.vl-cijfers s{display:block;font-size:.85rem;color:var(--tx3)}
.vl-cijfers .vl-nieuw{border-color:var(--grn);box-shadow:inset 0 0 0 1px var(--grn)}
.vl-pijl{flex:none;font-size:1.4rem;color:var(--tx3)}
.vl-bespaar{margin:0 0 12px;font-size:1.05rem}
.vl-bespaar b{color:var(--grn)}
.vl-addon{margin:0 0 14px}
@media (max-width:600px){.vl-cijfers{flex-direction:column;align-items:stretch}.vl-pijl{transform:rotate(90deg);text-align:center}}
/* De twee bestaande loginroutes delen één rustige publieke ingang. */
#login.jdalogin{--bg:#f2eee3;--panel:#fff;--tx:#141414;--tx2:#57534a;--tx3:#68645b;--line:#d3cec3;--line2:#bdb6a7;--acc:#141414;--on-acc:#f2eee3;background:#f2eee3;color:#141414;min-height:100dvh;align-items:flex-start;padding:0;overflow:auto}
.jdl{width:min(1180px,100%);margin:0 auto;padding:36px 48px 24px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.85fr);column-gap:clamp(36px,6vw,96px);row-gap:58px}
.jdl-merk{grid-column:1/-1;display:flex;align-items:center;gap:12px;font-size:18px;font-weight:650;letter-spacing:-.4px}
.jdl-merk .logo{width:39px;height:39px;background:#141414!important;color:#f2eee3;border-color:#141414;border-radius:9px}
.jdl-merk i{font-style:normal;font-weight:400;color:#777267}
.jdl-merk>a{margin-left:auto;font-size:13px;font-weight:500;letter-spacing:0;color:#49463f;text-decoration:none}
.jdl-merk>a:hover,.jdl a:hover{text-decoration:underline;text-underline-offset:4px}
.jdl-intro{min-width:0;align-self:start;padding-top:5px}
.jdl-intro h1{font-size:clamp(43px,4.8vw,63px);font-weight:620;line-height:1.04;letter-spacing:-2.8px;margin:0 0 22px;max-width:540px}
.jdl-lead{font-size:17px;line-height:1.65;color:#57534a;max-width:430px;margin:0 0 36px}
.jdl-producten{border-top:1px solid #cfc9bc}
.jdl-product{border-bottom:1px solid #cfc9bc;padding:0}
.jdl-product summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;cursor:pointer;list-style:none}
.jdl-product summary::-webkit-details-marker{display:none}
.jdl-product summary b{display:block;font-size:18px;font-weight:650;letter-spacing:-.35px}
.jdl-product summary small{display:block;font-size:13px;line-height:1.5;color:#625d53;margin-top:4px}
.jdl-plus{font-size:24px;font-weight:350;line-height:1;transition:transform .15s ease}
.jdl-product[open] .jdl-plus{transform:rotate(45deg)}
.jdl-product ul{padding-left:18px;margin:0 0 14px;color:#49463f;font-size:13px;line-height:1.75}
.jdl-product>p{font-size:12px;color:#625d53;line-height:1.6;margin:10px 0}
.jdl-product>a{display:inline-block;font-size:13px;color:#141414;margin:0 16px 18px 0;text-underline-offset:3px}
.jdl-traject{font-size:12px;color:#625d53;line-height:1.6;margin:20px 0 0;max-width:420px}
.jdl-formulier{align-self:start;min-width:0;background:#fff;border:1px solid #ded9ce;border-radius:12px;padding:32px;box-shadow:0 8px 26px #302c2206}
#login.jdalogin .loginbox{width:100%;max-width:none;padding:0;border:0!important;box-shadow:none!important;background:transparent!important;color:#141414}
#login.jdalogin .lgkop{font-size:25px;line-height:1.2;letter-spacing:-.8px;text-align:left;margin:0 0 8px;font-weight:600}
.jdl-formtekst{font-size:13px;line-height:1.6;color:#68645b;margin:0 0 26px}
#login.jdalogin .f{margin-bottom:17px}
#login.jdalogin .f>span{color:#49463f;font-size:12px}
#login.jdalogin .inp{background:#fff;color:#141414;border:1px solid #d3cec3;min-height:46px;border-radius:7px;box-shadow:none}
#login.jdalogin .inp:focus{border-color:#141414;outline:2px solid #141414;outline-offset:2px}
#login.jdalogin .btn{min-height:45px;border-radius:7px;font-size:13px}
#login.jdalogin .btn.pri{background:#141414;color:#f2eee3;border-color:#141414}
#login.jdalogin .btn:not(.pri){background:#fff;color:#141414;border-color:#d3cec3}
#login.jdalogin a{color:#49463f}
#login.jdalogin a:focus-visible,#login.jdalogin summary:focus-visible{outline:2px solid #141414;outline-offset:4px;border-radius:3px}
.jdl-accountinfo{font-size:11px;color:#68645b;line-height:1.6;text-align:center;margin:14px 0 0}
.jdl-voet{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #cfc9bc;padding-top:20px;font-size:11px;color:#625d53}
.jdl-voet nav{display:flex;flex-wrap:wrap;gap:18px}
.jdl-voet a{text-decoration:none}
@media(max-width:800px){
  .jdl{max-width:530px;padding:24px 22px;grid-template-columns:minmax(0,1fr);row-gap:26px}
  .jdl-merk{font-size:16px;gap:10px}
  .jdl-merk>a{font-size:11px;white-space:nowrap;text-align:right;line-height:1.5}
  .jdl-intro{grid-row:3;padding:6px 0 0}
  .jdl-intro h1{font-size:36px;line-height:1.07;letter-spacing:-1.6px;margin-bottom:16px}
  .jdl-lead{font-size:14px;line-height:1.65;margin-bottom:23px}
  .jdl-formulier{grid-row:2;padding:25px 24px}
  .jdl-product summary{padding:18px 0}
  .jdl-voet{flex-direction:column;align-items:flex-start;gap:12px;padding-top:18px}
  .jdl-voet nav{gap:10px 18px}
}
.jdl-taal{margin-left:12px;background:transparent;border:1px solid #bdb6a7;border-radius:6px;color:#141414;font:inherit;font-size:12px;font-weight:600;letter-spacing:.04em;padding:5px 9px;cursor:pointer}
.jdl-taal:hover{border-color:#141414}
.jdl-taal:focus-visible{outline:2px solid #141414;outline-offset:3px}
.jdl-funckop{font-size:13px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:#49463f;margin:34px 0 4px}
.jdl-functies{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;border-top:1px solid #cfc9bc}
.jdl-functies li{padding:13px 0;border-bottom:1px solid #cfc9bc;min-width:0}
.jdl-functies b{display:block;font-size:14px;font-weight:650;letter-spacing:-.15px}
.jdl-functies span{display:block;font-size:12.5px;line-height:1.55;color:#625d53;margin-top:2px}
@media(max-width:800px){.jdl-functies{grid-template-columns:minmax(0,1fr)}.jdl-taal{margin-left:8px;padding:4px 8px}}
@media(prefers-reduced-motion:reduce){.jdl-plus{transition:none}}

/* Keep category colours visible on the compact ticket tags as well as the tag filters. */
.ksx-tag.k0{background:#e7f0fb;color:#2c5c94;border-color:#c9dcf3}
.ksx-tag.k1{background:#e9f6ee;color:#2f7a4a;border-color:#c8e8d4}
.ksx-tag.k2{background:#f6eefb;color:#7a3e9c;border-color:#e6d3f2}
.ksx-tag.k3{background:#fdf3e2;color:#9a5d08;border-color:#f3dfb8}
.ksx-tag.k4{background:#e6f6f5;color:#2b6f6b;border-color:#c5e7e4}
.ksx-tag.k5{background:#fbeef2;color:#a23a5c;border-color:#f2d2dd}
.ksx-tag.k6{background:#eef0f4;color:#4a5160;border-color:#d9dde5}
.ksx-tag.k7{background:#f1f5e3;color:#5d6e14;border-color:#dfe8bf}
.ksx-tag.k-rood{background:rgba(180,35,24,.09);color:var(--red);border-color:rgba(180,35,24,.25)}

/* ks-indeling: vaste volgorde in het ticket, Volgende stap prominent bovenaan; compacte verzendstatus alleen waar het paneel dicht is. */
.ksx-vastenotitie .ksx-volgende{font-size:15px;font-weight:600;color:var(--k-tx);padding:10px 12px;margin-bottom:6px;border-radius:10px;background:var(--k-panel2,var(--panel2));border-left:3px solid var(--acc)}
.ksx-vastenotitie .ksx-volgende b{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);margin:0 0 2px}
.ksx-sectiekop{margin:4px 0 -8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--k-tx3);font-weight:600}
@media (min-width:1280px){ .ksx-tkompact{display:none} }

/* De bundel gebruikt dezelfde zachte glans als de CommentGuard-menuknop. */
.ab-seg .ab-bundel-glans{position:relative;overflow:hidden}
.ab-seg .ab-bundel-glans::after{content:'';position:absolute;inset:0 auto 0 0;width:45%;pointer-events:none;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-140%);animation:pnavGlans 3.2s ease-in-out 1s 2}
html[data-theme="dark"] .ab-seg .ab-bundel-glans::after{background:linear-gradient(105deg,transparent,rgba(255,255,255,.14),transparent)}
@media(prefers-reduced-motion:reduce){.ab-seg .ab-bundel-glans::after{display:none}}
/* Taak38: kostenbeheer volgt de bestaande velden en scrollbare tabellen. */
.beheer-kosten{min-width:0;max-width:100%}
.beheer-kosten>p{max-width:72ch;margin:12px 0;overflow-wrap:anywhere}
.beheer-kosten h2{margin:24px 0 12px}
.beheer-kosten .tblwrap{max-width:100%;margin-top:12px}
.beheer-kosten td:last-child{white-space:normal;min-width:220px;overflow-wrap:anywhere}
#beheer-kosten-form{width:100%;grid-template-columns:minmax(0,1fr)}
#beheer-kosten-form label{display:block;min-width:0;overflow-wrap:anywhere}
#beheer-kosten-form label>input:not([type=checkbox]),#beheer-kosten-form select{display:block;width:100%;max-width:100%;margin-top:5px;padding:9px 11px;background:var(--panel);border:1px solid var(--line2);border-radius:8px}
#beheer-kosten-form input[type=checkbox]{accent-color:var(--acc)}
.beheer-kosten :is(input,select,button):focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* =====================================================================
   SMS-menu per winkel (taak 33, 25-10). Hub-stijl van het checkoutdashboard (2px hoeken, zwart/crème accent),
   groen (--grn) alleen voor wat aan staat of werkt. Het telefoonvoorbeeld is het enige ronde element.
   Klassen met smsx- zodat de .ckdash-regels voor [class^="ck"] de telefoon niet vierkant maken.
   ===================================================================== */
.smsx{display:flex;flex-direction:column;gap:16px;min-width:0}
.smsx h3{margin:0;font-size:18px;font-weight:650;letter-spacing:-.01em}
.smsx h4{margin:0 0 8px;font-size:14px;font-weight:600}
.smsx p{margin:0}
.smsx .hint{margin:0}
.smsx-kop{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.smsx-kopacties{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.smsx-saldoknop{background:none;border:1px solid var(--line2);color:var(--tx2);font:inherit;font-size:13px;padding:6px 10px;cursor:pointer}
.smsx-saldoknop b{color:var(--tx);font-variant-numeric:tabular-nums;margin-left:4px}
.smsx-saldoknop:hover{background:var(--hover)}
.smsx-alarm{border:1px solid color-mix(in srgb,var(--red) 45%,transparent);background:color-mix(in srgb,var(--red) 8%,var(--panel));color:var(--tx);padding:10px 12px}
.smsx-rood{color:var(--red)} .smsx-amb{color:var(--amb)} .smsx-ok{color:var(--grn)}
/* schakelaar */
.smsx-schakel{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px;margin:4px 0;user-select:none}
.smsx-schakel input{appearance:none;-webkit-appearance:none;width:34px;height:20px;margin:0;border-radius:999px!important;background:var(--line2);position:relative;cursor:pointer;transition:background .18s ease;flex:0 0 34px}
.smsx-schakel input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--panel);transition:transform .18s ease}
.smsx-schakel input:checked{background:var(--grn)}
.smsx-schakel input:checked::after{transform:translateX(14px)}
.smsx-schakel input:disabled{opacity:.5;cursor:not-allowed}
.smsx-schakel input:focus-visible{outline:2px solid var(--tx);outline-offset:2px}
.smsx-schakel.groot{font-weight:600}
/* tabs */
.smsx-tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.smsx-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 0;margin-bottom:-1px;font:inherit;font-size:14px;color:var(--tx2);cursor:pointer;white-space:nowrap}
.smsx-tabs button[aria-selected="true"]{color:var(--tx);border-bottom-color:var(--tx);font-weight:600}
.smsx-tabs button:focus-visible{outline:2px solid var(--tx);outline-offset:2px}
.smsx-paneel[hidden]{display:none}
.smsx-paneel{display:flex;flex-direction:column;gap:16px;min-width:0}
/* overzicht */
.smsx-tegels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.smsx-tegel{background:var(--panel);padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.smsx-tegel span{font-size:12.5px;color:var(--tx2)}
.smsx-tegel b{font-size:22px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.smsx-tegel em{font-style:normal;font-size:12px;color:var(--tx3)}
.smsx-beheer{border:1px dashed var(--line2);padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.smsx-twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.smsx-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.smsx-check li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--tx2)}
.smsx-check li.smsx-klaar{color:var(--tx)}
.smsx-check li .btn{margin-left:auto}
.smsx-vink{width:16px;height:16px;border:1.5px solid var(--line2);border-radius:50%;flex:0 0 16px;position:relative}
.smsx-check li.smsx-klaar .smsx-vink{border-color:var(--grn);background:var(--grn)}
.smsx-check li.smsx-klaar .smsx-vink::after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid var(--panel);border-width:0 2px 2px 0;transform:rotate(45deg)}
.smsx-flowrij{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.smsx-flowrij span:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.smsx-flowrij em,.smsx-flow em{font-style:normal;font-size:12.5px;color:var(--tx2)}
.smsx-flowrij.uit b{color:var(--tx2)}
.smsx-twee .btn{margin-top:12px}
.smsx .chip:not(.c-grn):not(.c-amb):not(.c-red){border:1px solid var(--line2);color:var(--tx2);background:none}
/* flows */
.smsx-flows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.smsx-flow{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:2px 8px;text-align:left;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line2);padding:10px 12px;font:inherit;color:var(--tx);cursor:pointer}
.smsx-flow b{font-size:14px} .smsx-flow em{grid-column:1} .smsx-flow .chip{grid-row:1/3;grid-column:2;align-self:center}
.smsx-flow.on{border-color:var(--tx);border-left-color:var(--grn)}
.smsx-flow.uit{color:var(--tx2)}
.smsx-flow:focus-visible{outline:2px solid var(--tx);outline-offset:2px}
.smsx-leeg{border:1px dashed var(--line2);padding:24px;display:flex;flex-direction:column;gap:6px;max-width:640px}
.smsx-raster{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
.smsx-trigger{margin:0 0 4px}
.smsx-tijdlijn{display:flex;flex-direction:column;min-width:0}
.smsx-stap{display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 14px;position:relative;padding-bottom:24px}
.smsx-stap::before{content:"";position:absolute;left:13px;top:30px;bottom:0;width:2px;background:var(--line)}
.smsx-stap.aan::before{background:color-mix(in srgb,var(--grn) 55%,var(--line))}
.smsx-stap.volgt{padding-bottom:0}.smsx-stap.volgt::before{display:none}
.smsx-stapmerk{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:650;border:2px solid var(--line2);color:var(--tx2);background:var(--panel);position:relative;z-index:1}
.smsx-stap.aan .smsx-stapmerk{border-color:var(--grn);background:var(--grn);color:var(--panel)}
.smsx-stap.volgt .smsx-stapmerk{border-style:dashed}
.smsx-stapin{display:flex;flex-direction:column;gap:8px;min-width:0;padding:2px 0 0}
.smsx-stap.gekozen .smsx-stapin{border-left:0}
.smsx-stapkop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:26px}
.smsx-stapkop h4{margin:0}
.smsx-stap.volgt h4{color:var(--tx3)}
.smsx-wacht{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--tx2);margin-left:auto}
.smsx-wacht .inp{width:76px;padding:4px 8px}
.smsx-label{font-size:12.5px;color:var(--tx2);font-weight:500}
.smsx-tekst{width:100%;box-sizing:border-box;resize:vertical;min-height:96px;font-size:14px;line-height:1.5}
.smsx-vars{display:flex;flex-wrap:wrap;gap:6px}
.smsx-var{font:inherit;font-size:12.5px;padding:3px 8px;background:var(--panel2);border:1px solid var(--line);color:var(--tx);cursor:pointer;font-variant-ligatures:none}
.smsx-var:hover{border-color:var(--tx2)}
.smsx-var.uit{cursor:default;color:var(--tx3);border-style:dashed;background:none}
.smsx-tekstacties{display:flex;gap:8px;flex-wrap:wrap}
.smsx-korting{display:flex;flex-direction:column;gap:8px;padding-top:8px;border-top:1px solid var(--line);margin-top:4px}
.smsx .smsx-seg{display:inline-flex;flex-wrap:wrap;width:max-content;max-width:100%;overflow:visible}
.smsx-seg button:disabled{opacity:.45;cursor:not-allowed}
.smsx-rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.smsx-veld{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:12.5px;color:var(--tx2)}
.smsx-veld .inp{width:100%;box-sizing:border-box;font-size:14px;color:var(--tx)}
.smsx-codecheck{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.smsx-fouten{border-left:3px solid var(--red);padding:6px 10px;background:color-mix(in srgb,var(--red) 6%,var(--panel));font-size:13px;display:flex;flex-direction:column;gap:2px}
/* telefoon */
.smsx-telwrap{position:sticky;top:16px;display:flex;flex-direction:column;gap:10px;align-items:stretch}
.smsx-telkies{display:flex;border:1px solid var(--line2)}
.smsx-telkies button{flex:1;background:var(--panel);border:0;padding:6px 8px;font:inherit;font-size:12.5px;color:var(--tx2);cursor:pointer}
.smsx-telkies button+button{border-left:1px solid var(--line2)}
.smsx-telkies button[aria-pressed="true"]{background:var(--ck-acc,var(--acc));color:var(--ck-acc-tx,var(--on-acc))}
.smsx-telkies button:disabled{opacity:.45;cursor:not-allowed}
.smsx-tel{background:var(--zij);border:1px solid var(--line2);border-radius:42px;padding:9px;box-shadow:0 1px 0 color-mix(in srgb,var(--tx) 10%,transparent) inset,0 18px 40px -22px color-mix(in srgb,var(--zij) 70%,transparent)}
.smsx-telscherm{background:var(--bg);border-radius:34px;min-height:420px;padding:16px 14px 22px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.smsx-telkop{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 10px;border-bottom:1px solid var(--line)}
.smsx-telkop b{font-size:13px;font-weight:600}
.smsx-telkop span:last-child{font-size:11px;color:var(--tx3)}
.smsx-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--tx3) 35%,var(--panel));color:var(--panel);font-weight:650;font-size:16px}
.smsx-teltijd{text-align:center;font-size:11px;color:var(--tx3)}
.smsx-bubbel{align-self:flex-start;max-width:88%;background:color-mix(in srgb,var(--tx) 9%,var(--panel));color:var(--tx);padding:9px 12px;border-radius:18px 18px 18px 6px;font-size:13.5px;line-height:1.42;overflow-wrap:anywhere;white-space:pre-wrap}
.smsx-bubbel u{text-decoration-color:color-mix(in srgb,var(--blu,var(--tx)) 70%,transparent);color:var(--blu,var(--tx))}
.smsx-auto{color:var(--tx3)}
.smsx-auto u{color:var(--tx3)}
.smsx-meter{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--tx2);justify-content:center}
.smsx-meter b{color:var(--tx);font-variant-numeric:tabular-nums}
.smsx-telnoot{text-align:center}
/* instellingen */
.smsx-instel{display:flex;flex-direction:column;gap:28px;min-width:0;max-width:640px}
.smsx-instel section{display:flex;flex-direction:column;gap:8px}
.smsx-instel section>h4{margin:0}
.smsx-instel details summary{cursor:pointer;font-size:13px;color:var(--tx2);margin:4px 0}
.smsx-vinktekst{margin:0;display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);background:var(--panel2);padding:10px 12px;font-size:13.5px;line-height:1.45}
.smsx-vakje{width:16px;height:16px;border:1.5px solid var(--grn);background:var(--grn);flex:0 0 16px;margin-top:2px;position:relative;border-radius:3px}
.smsx-vakje::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--panel);border-width:0 2px 2px 0;transform:rotate(45deg)}
/* tegoed */
.smsx-tegoed{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 32px}
.smsx-tegoed h4{margin:16px 0 8px}.smsx-tegoed>div>h4:first-child{margin-top:0}
.smsx-saldo{grid-column:1/-1;display:flex;flex-direction:column;gap:2px;padding:16px 0;border-bottom:1px solid var(--line)}
.smsx-saldo span{font-size:13px;color:var(--tx2)}
.smsx-saldo b{font-size:34px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.smsx-saldo em{font-style:normal;font-size:13px;color:var(--grn)}
.smsx-knoppen{display:flex;gap:8px;flex-wrap:wrap}
.smsx-mutaties{grid-column:1/-1}
/* opslaan */
.smsx-opslaan{position:sticky;bottom:12px;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;background:var(--panel);border:1px solid var(--tx);font-size:13.5px}
.smsx-opslaan[hidden]{display:none}
.smsx-opslaan>div{display:flex;gap:8px}
.smsx-start{display:flex;flex-direction:column;gap:12px;max-width:640px}
@media (prefers-reduced-motion: reduce){.smsx-schakel input,.smsx-schakel input::after{transition:none}}
@media (max-width:1100px){.smsx-tegels{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){
  .smsx-raster{grid-template-columns:minmax(0,1fr);gap:24px}
  .smsx-telwrap{position:static;max-width:320px;width:100%;margin:0 auto}
  .smsx-flows{grid-template-columns:minmax(0,1fr)}
  .smsx-twee,.smsx-tegoed{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .smsx-tegels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .smsx-rij{grid-template-columns:minmax(0,1fr)}
  .smsx .smsx-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;box-sizing:border-box}
  .smsx .smsx-seg button{white-space:nowrap}
  .smsx-wacht{margin-left:0}
  .smsx-tabs{gap:18px}
  .smsx-opslaan{bottom:8px}
  .smsx-opslaan>div{width:100%}.smsx-opslaan>div .btn{flex:1}
  .smsx-telscherm{min-height:340px}
}

/* Taak 60: de werkplek draait om inbox, antwoord en klantcontext. De volledige
   weergaven blijven via de bestaande knop bereikbaar; dagelijkse wachtrijen direct. */
.ksx.paneel-dicht .ksx-paneelknop{display:inline-flex}
.ksx-snelviews{display:flex;gap:4px;flex-wrap:wrap}
.ksx-snelviews button{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 8px;border:1px solid var(--k-line);border-radius:6px;font-size:12px;color:var(--k-tx2);background:var(--k-panel)}
.ksx-snelviews button[aria-pressed="true"]{background:var(--k-sel);border-color:var(--k-line2);color:var(--k-tx);font-weight:600}
.ksx-snelviews b{font-variant-numeric:tabular-nums;color:var(--k-tx3)}
.ksx-snelviews button:focus-visible{outline:2px solid var(--k-blu);outline-offset:2px}
.ksx-vastenotitie{border-radius:6px;box-shadow:none}
.ksx-vastenotitie .ksx-volgende{border-radius:4px}
.ksx-vastenotitie .ksx-volgende b,.ksx-sectiekop{text-transform:none;letter-spacing:normal;font-size:13px}
@media (min-width:1100px) and (max-width:1599px){
  .ksx.heeftsel{grid-template-columns:min(280px,26%) minmax(0,1fr) min(280px,28%);grid-template-areas:"lijst gesprek paneel"}
  .ksx:not(.heeftsel):not(.heeftpag){grid-template-columns:320px minmax(0,1fr);grid-template-areas:"lijst gesprek"}
  .ksx:not(.heeftpag) > .ksx-views{display:none}
  .ksx.views-open:not(.heeftpag) > .ksx-views{display:flex;position:absolute;width:248px;box-shadow:var(--k-schaduw)}
  .ksx.heeftsel > .ksx-paneel,.ksx.heeftsel.paneel-open > .ksx-paneel{display:block;position:static;width:auto;box-shadow:none}
  .ksx.heeftsel.paneel-dicht{grid-template-columns:280px minmax(0,1fr);grid-template-areas:"lijst gesprek"}
  .ksx.heeftsel.paneel-dicht > .ksx-paneel{display:none}
  .ksx-tkop,.ksx-draad{padding-left:16px;padding-right:16px}
  .ksx-tkop1 h2{font-size:18px}
  .ksx-balk{gap:6px}
  .ksx-comp{padding:14px}
  .ksx-psec{padding:14px}
  .ksx-r4{flex-wrap:wrap;gap:4px}
  .ksx-bulk select[data-ksinbulktoewijzen]{width:70px}
  .ksx-bulk select[data-ksinbulktag]{width:48px}
}
@media (min-width:1600px){.ksx-snelviews{display:none}}
@media (max-width:1099px){
  .ksx-snelviews button{min-height:40px}
  .ksx-balk{display:flex;flex-wrap:wrap}
  .ksx-balk > .ksx-k,.ksx-balk .ksx-pop > .ksx-k{width:auto}
  .ksx-balk .ksx-veld{width:auto;flex:1 1 140px}
  .ksx-balk .ksx-pop{flex:0 0 auto}
  .ksx-compvoet{position:sticky;bottom:0;z-index:3;background:var(--k-panel);padding:10px 0 max(10px,env(safe-area-inset-bottom));border-top:1px solid var(--k-line)}
}

/* ---------- Productlisting (25-10): één menu, een tab per markt, vier stappen en een status per product ---------- */
.lst{max-width:1120px}
.lst-kop h1{margin-bottom:2px}
.lst-kop .hint{margin:0 0 14px;max-width:72ch}
.lst-markten{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto;scrollbar-width:none}
.lst-markten::-webkit-scrollbar{display:none}
.lst-markt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:10px 34px 11px 16px;margin-bottom:-1px;border-bottom:2px solid transparent;border-radius:8px 8px 0 0;color:var(--tx2);text-align:left;white-space:nowrap;transition:background .15s,color .15s}
.lst-markt:hover{background:var(--hover);color:var(--tx)}
.lst-markt.on{color:var(--tx);border-bottom-color:var(--acc)}
.lst-markt:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.lst-markt-land{font-weight:650;font-size:14.5px}
.lst-markt-winkel{font-size:12px;color:var(--tx3)}
.lst-markt-n{position:absolute;top:50%;right:8px;transform:translateY(-50%);min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}

.lst-flow{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 26px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.lst-flow li+li{border-left:1px solid var(--line)}
.lst-stap{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"nr t" "n n" "u u";align-items:center;column-gap:9px;row-gap:1px;width:100%;height:100%;padding:14px 16px 13px;text-align:left;transition:background .15s}
.lst-stap:hover{background:var(--hover)}
.lst-stap:focus-visible{outline:2px solid var(--acc);outline-offset:-3px}
.lst-stap[aria-pressed="true"]{background:var(--panel2);box-shadow:inset 0 -3px 0 var(--tx2)}
.lst-stap.nu{box-shadow:inset 0 -3px 0 var(--acc)}
.lst-nr{grid-area:nr;width:22px;height:22px;border-radius:50%;border:1px solid var(--line2);display:inline-grid;place-items:center;font-size:11.5px;font-weight:650;color:var(--tx2)}
.lst-stap.nu .lst-nr{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.lst-stap-t{grid-area:t;font-weight:600;font-size:13.5px}
.lst-stap-n{grid-area:n;margin-top:8px;font-size:30px;line-height:1.1;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lst-stap-u{grid-area:u;font-size:12px;color:var(--tx3)}

.lst-sectie{margin:0 0 32px;scroll-margin-top:12px}
.lst-sk{margin-bottom:12px}
.lst-sk h2{font-size:16px;font-weight:650;letter-spacing:-.01em}
.lst-sk .hint{margin-top:2px;max-width:72ch}
.lst-blok{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.lst-blok+.lst-blok{margin-top:12px}
.lst-blok h3{font-size:14px;font-weight:650}
.lst-blok-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px 20px;flex-wrap:wrap;margin-bottom:12px}
.lst-blok-kop .hint{margin-top:2px;max-width:62ch}
.lst-chips{display:flex;flex-wrap:wrap;gap:6px}
.lst-acties{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.lst-leeg{text-align:left}
.lst-leeg .hint{margin-top:2px}
.lst-fout b{display:block;margin-bottom:2px}
.lst-fout .btn{margin-top:10px}

.lst-sheetlijst{list-style:none;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.lst-sheetrij{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:10px 14px}
.lst-sheetrij+.lst-sheetrij{border-top:1px solid var(--line)}
.lst-sh-naam{font-weight:600;font-size:13.5px;overflow-wrap:anywhere}
.lst-sh-naam a{color:inherit;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.lst-sh-meta{grid-column:1 / -1;font-size:12px;color:var(--tx3)}
.lst-sh-uitkomst{grid-column:1 / -1;font-size:13px;overflow-wrap:anywhere}
.lst-sh-uitkomst a{text-decoration:underline;text-underline-offset:3px}

.lst-filterbalk{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:32px;margin:0 0 8px}
.lst-lijstkop{display:flex;justify-content:flex-start;margin-bottom:10px}
.lst-seg{display:inline-flex;gap:6px}
.lst-lijst{list-style:none;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.lst-rij{display:grid;grid-template-columns:auto 52px minmax(0,1fr) minmax(170px,220px) auto;align-items:center;gap:12px;padding:12px 16px}
.lst-rij+.lst-rij{border-top:1px solid var(--line)}
.lst-rij-nl{grid-template-columns:auto minmax(0,1fr) minmax(170px,220px) 150px}
.lst-rij-nl .lst-rij-extra{grid-column:2 / -1}
.lst-foto{width:52px;height:52px;border-radius:8px;object-fit:cover;background:var(--panel2);display:block}
.lst-rij-hoofd{display:flex;flex-direction:column;gap:2px;min-width:0}
.lst-titel{font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.lst-prijs{font-size:13px}
.lst-status{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.lst-tracker{display:inline-grid;grid-template-columns:repeat(4,1fr);gap:3px;width:96px}
.lst-tracker i{height:5px;border-radius:3px;background:var(--line2)}
.lst-tracker i.aan{background:var(--tx3)}
.lst-t-ok i.aan,.lst-t-klaar i.aan{background:var(--grn)}
.lst-t-wacht i.aan{background:var(--tx3)}
.lst-t-aandacht i.aan{background:var(--amb)}
.lst-t-fout i.aan{background:var(--red)}
.lst-rij-extra{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:2px}
.lst-rij-extra .hint{flex:1 1 100%}
.lst-rij select{max-width:100%}

@media (max-width:900px){
  .lst-rij{grid-template-columns:auto 44px minmax(0,1fr)}
  .lst-rij .lst-status,.lst-rij .lst-rij-act{grid-column:2 / -1}
  .lst-rij .lst-foto{width:44px;height:44px}
  .lst-rij-nl{grid-template-columns:auto minmax(0,1fr)}
  .lst-rij-nl .lst-status,.lst-rij-nl select,.lst-rij-nl .lst-rij-extra{grid-column:2 / -1}
}
@media (max-width:720px){
  .lst-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lst-flow li:nth-child(3){border-left:none}
  .lst-flow li:nth-child(n+3){border-top:1px solid var(--line)}
  .lst-stap-n{font-size:26px}
  .lst-blok{padding:14px}
  .lst-rij{padding:12px}
}
@media (prefers-reduced-motion:reduce){.lst-markt,.lst-stap{transition:none}}
.lst{text-align:left}
.lst .btn.gh{border-color:var(--line2)}
.lst-rij input[type=checkbox]{width:18px;height:18px;flex:none;margin:0}
/* 26-10: Bewaking-overzicht bovenaan (per account tijdzone, regels in gewone taal, overlap, laatste acties). */
.rgo{padding:18px;margin-bottom:14px}
.rgo-kop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.rgo-kop>b{font-size:15px}
.rgo-tel{display:flex;gap:18px;flex-wrap:wrap}
.rgo-tel>span{display:flex;align-items:baseline;gap:6px;font-size:13px;color:var(--tx2,var(--tx3))}
.rgo-tel b{font-size:18px;color:var(--tx);font-variant-numeric:tabular-nums}
.rgo-accs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.rgo-acc{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;font-size:13px;min-width:0}
.rgo-overlap{margin-top:12px;display:flex;flex-direction:column;gap:4px}
.rgo-overlap ul{margin:4px 0 0;padding-left:18px}
.rgo-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;margin-top:14px}
.rgo-sub{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--tx3);margin-bottom:8px}
.rgo-regels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rgo-regels li{display:flex;gap:10px;font-size:13.5px;line-height:1.45}
.rgo-nr{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:600;background:var(--panel2);color:var(--tx3)}
.rgo-acties{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rgo-acties li{display:flex;gap:10px;font-size:13px;line-height:1.4}
.rgo-wat{flex:0 0 74px;font-weight:600}
.rgo-nu{margin-top:14px;gap:10px;flex-wrap:wrap;align-items:center}
@media (max-width:760px){.rgo-grid{grid-template-columns:1fr}.rgo-tel{gap:12px}.rgo{padding:14px}}

/* ---------- Login-animatie en laadanimaties (26-10) ---------- */
@keyframes lgOp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes lgIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
#login.jdalogin .jdl>*{animation:lgOp .7s cubic-bezier(.2,.8,.2,1) both}
#login.jdalogin .jdl-merk{animation-delay:0s}
#login.jdalogin .jdl-formulier{animation-delay:.08s}
#login.jdalogin .jdl-intro{animation-delay:.16s}
#login.jdalogin .jdl-voet{animation-delay:.28s}
#login.jdalogin .jdl-intro h1{animation:lgOp .8s .22s cubic-bezier(.2,.8,.2,1) both}
#login.jdalogin .jdl-formulier>.loginbox{animation:lgIn .45s cubic-bezier(.2,.8,.2,1) both}
#login.jdalogin .inp{transition:border-color .2s,box-shadow .2s,transform .2s}
#login.jdalogin .inp:focus{box-shadow:0 6px 18px #14141412}
#login.jdalogin .btn.pri{transition:transform .15s ease,width .35s cubic-bezier(.2,.8,.2,1),border-radius .35s,box-shadow .2s}
#login.jdalogin .btn.pri:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 20px #14141426}
#login.jdalogin .btn.pri:active:not(:disabled){transform:scale(.98)}
#login.jdalogin .btn.pri.lg-bezig{width:96px!important;margin-left:auto!important;margin-right:auto!important;display:flex!important;border-radius:999px;opacity:1}
.lg-stip{width:14px;height:14px;border-radius:50%;background:#f2eee3;animation:lgStip .9s ease-in-out infinite}
@keyframes lgStip{0%,100%{transform:scale(.6);opacity:.55}50%{transform:scale(1);opacity:1}}
@keyframes lgSchud{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.jdl-formulier.lg-schud{animation:lgSchud .45s both!important}
#lgdoek{position:fixed;inset:0;z-index:200;background:#141414;color:#f2eee3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  clip-path:circle(0% at 50% 100%);transition:clip-path .7s cubic-bezier(.7,0,.2,1)}
#lgdoek.in{clip-path:circle(150% at 50% 100%)}
#lgdoek.uit{clip-path:circle(150% at 50% 100%);opacity:0;transform:translateY(-12px);transition:opacity .5s ease,transform .5s ease}
#lgdoek .lgd-logo{width:56px;height:56px;border:1.6px solid #f2eee3;border-radius:14px;display:grid;place-items:center;font-weight:700;font-size:15px;letter-spacing:-.4px;
  opacity:0;transform:scale(.7);transition:opacity .4s .35s,transform .5s .35s cubic-bezier(.2,1.4,.4,1)}
#lgdoek.in .lgd-logo{opacity:1;transform:none}
#lgdoek p{margin:0;font-size:13px;color:#b9b3a6;opacity:0;transition:opacity .4s .5s}
#lgdoek.in p{opacity:1}
.lgd-balk,.opbalk{width:120px;height:2px;border-radius:2px;background:#f2eee326;overflow:hidden}
.opbalk{background:var(--line)}
.lgd-balk i,.opbalk i{display:block;width:40%;height:100%;border-radius:2px;background:#f2eee3;animation:lgBalk 1.1s cubic-bezier(.6,0,.4,1) infinite}
.opbalk i{background:var(--tx)}
@keyframes lgBalk{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
#opstart .oplogo{animation:lgAdem 1.6s ease-in-out infinite}
@keyframes lgAdem{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.92);opacity:.6}}
/* Menu's: elke "Laden…" krijgt een teken, bovenin een dunne laadbalk */
.laadt{display:flex!important;align-items:center;gap:10px}
.laadt::before{content:'';flex:none;width:16px;height:16px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--tx);animation:lgDraai .7s linear infinite}
@keyframes lgDraai{to{transform:rotate(360deg)}}
#laadbalk{position:fixed;left:0;right:0;top:0;height:2px;z-index:150;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .25s}
#laadbalk.aan{opacity:1}
#laadbalk::before{content:'';position:absolute;inset:0;width:35%;background:var(--acc,#141414);animation:lgBalk 1.2s cubic-bezier(.6,0,.4,1) infinite}
@media(prefers-reduced-motion:reduce){
  #login.jdalogin .jdl>*,#login.jdalogin .jdl-intro h1,#login.jdalogin .jdl-formulier>.loginbox,.jdl-formulier.lg-schud{animation:none!important}
  #lgdoek,#lgdoek *{transition:none!important}
  .lg-stip,.laadt::before,#laadbalk::before,.lgd-balk i,.opbalk i,#opstart .oplogo{animation-duration:2.4s}
}

/* 28-10: bewaking-logboek op de telefoon als kaartjes onder elkaar in plaats van een te brede tabel (alleen weergave). */
@media(max-width:700px){
  .tblwrap table.rg-logtabel{min-width:0;display:block;width:100%}
  .rg-logtabel thead{display:none}
  .rg-logtabel tbody{display:block}
  .rg-logtabel tr{display:block;padding:10px 12px;border-bottom:1px solid var(--line)}
  .rg-logtabel td{display:block;padding:3px 0;border:none;text-align:left;white-space:normal!important;overflow-wrap:anywhere}
  .rg-logtabel td.num{text-align:left}
  .rg-logtabel td[data-l]::before{content:attr(data-l);display:block;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--tx3);margin-top:4px}
  .rg-logtabel td[data-l="Wat"]::before{display:none}
}

/* 28-10 affiliate-actie: popup + label */
.refa-tekst{font-size:16px;line-height:1.55;margin:0 0 8px}
.refa-link{display:flex;gap:8px;flex-wrap:wrap}.refa-link .inp{flex:1;min-width:0;font-size:13px}
.aff-actie{border-color:var(--grn, #2f8a4f)}
.aff-actie-label{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--grn, #2f8a4f);color:#fff}

/* 28-10 avond: maandoverzicht affiliate-uitbetalingen (beheer) */
.affm-kop{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
.affm-filter{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.affm-tot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}
.affm-tot>div{border:1px solid var(--bd, #e3e3df);border-radius:8px;padding:8px 12px;display:flex;flex-direction:column;gap:2px}
.affm-tot b{font-size:18px}
.affm-rij{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) minmax(0,.7fr) minmax(0,1.5fr) 260px;gap:10px 14px;align-items:center;padding:10px 0;border-top:1px solid var(--bd, #e3e3df)}
.affm-rij.betaald{opacity:.65}
.affm-naam,.affm-veld{display:flex;flex-direction:column;gap:2px;min-width:0}
.affm-veld code,.affm-oms{overflow-wrap:anywhere;font-size:13px}
.affm-kopie{align-self:flex-start;padding:2px 8px;font-size:12px}
.affm-acties{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.affm-ok{color:var(--grn, #2f8a4f);font-size:13px;font-weight:600}
.affm-blok{color:var(--red, #c0392b);font-size:13px;font-weight:600}
@media (max-width:760px){.affm-rij{grid-template-columns:1fr 1fr}.affm-naam,.affm-acties{grid-column:1/-1}.affm-acties{justify-content:flex-start}.affm-veld:nth-of-type(4){grid-column:1/-1}.affm-tot{grid-template-columns:1fr 1fr}.affm-tot>div:first-child{grid-column:1/-1}}
.smsx-reeks-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0}
.smsx-reeks-blok h4{margin:0 0 6px}
.smsx-reeks{width:100%;border-collapse:collapse;font-size:13px}
.smsx-reeks th,.smsx-reeks td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.smsx-reeks th:first-child,.smsx-reeks td:first-child{text-align:left}
@media (max-width:1100px){.smsx-reeks-wrap{grid-template-columns:minmax(0,1fr);overflow-x:auto}}

/* Eigen winkels: actuele prijsnorm naast de ROAS, op mobiel onder de productnaam. */
@media (min-width:1201px){
  .rsk-metmarge{overflow-x:auto}
  .rsk-metmarge .rsk-kop,.rsk-metmarge .rsk-rij{grid-template-columns:32px minmax(150px,1fr) 58px 84px 88px 80px 88px 74px 90px 104px 176px;min-width:1220px}
}
@media (min-width:861px) and (max-width:1200px){
  .rsk-metmarge{overflow-x:auto}
  .rsk-metmarge .rsk-kop,.rsk-metmarge .rsk-rij{grid-template-columns:32px minmax(150px,1fr) 90px 96px 96px 112px 176px;min-width:820px}
}
.rsk-metmarge .rsk-margecel{white-space:normal;font-size:12px}

/* Leesbare klantconversatie, met volledige originele mail bereikbaar. */
.ksx-berichtrol{display:block;font-size:12px;font-weight:500;color:var(--k-tx2);margin-top:3px}
.ksx-bericht.actueel{border-color:var(--k-tx2)}
.ksx-citaat{margin:14px 0;color:var(--k-tx2);font-size:13px}
.ksx-citaat summary{cursor:pointer;padding:8px 0;text-decoration:underline;text-underline-offset:3px}
.ksx-citaat[open] .ksx-btekst{margin-top:10px;padding-top:12px;border-top:1px solid var(--k-line)}
.ksx-citaat summary:focus-visible{outline:2px solid var(--k-blu);outline-offset:3px}
@media(max-width:600px){.ksx-bkop{flex-wrap:wrap}.ksx-bkop b{min-width:0;overflow-wrap:anywhere;flex:1}.ksx-bmeta{width:100%;margin-left:38px;justify-content:flex-start}.ksx-bkop time{margin-left:0}.ksx-bericht{padding:14px}.ksx-draadlijst .ksx-bericht.in{margin-right:6%}.ksx-draadlijst .ksx-bericht.uit{margin-left:6%}}