/* Verlaten checkout: eigen herinneringsmails. Videostijl: vs-kop, vs-hero, vs-card, vs-tabs,
   vs-table, vs-badge en de --vs-* tokens uit vs-shared.css. Laptop eerst, telefoon onderaan. */
#checkoutMailOffice{display:none}
#agentCheckoutMail::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011V6H3v12h8M3%207l9%206%209-6M14%2018h6M17%2015l3%203-3%203%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011V6H3v12h8M3%207l9%206%209-6M14%2018h6M17%2015l3%203-3%203%22%2F%3E%3C%2Fsvg%3E")}
body[data-agent="checkout-mail"] .center>:not(#checkoutMailOffice){display:none!important}
body[data-agent="checkout-mail"] #checkoutMailOffice{display:block;width:100%;max-width:1320px;margin:0 auto}
body[data-agent="checkout-mail"] .rail{display:none!important}
body[data-agent="checkout-mail"] .workspace-main{grid-template-columns:minmax(0,1fr)}
body[data-agent="checkout-mail"] .center{grid-column:1/-1;overflow:auto;display:block;padding:0 32px 48px}
.cm{color:var(--vs-text,#eef1f8);font-family:"IBM Plex Sans",Inter,system-ui,sans-serif;font-size:14px;line-height:1.5}
.cm *{box-sizing:border-box}
.cm h1,.cm h2,.cm h3,.cm h4,.cm p{margin:0}
.cm-head{padding:22px 0 20px}
.cm-muted{color:var(--vs-muted,#8790b5);font-weight:400}

.cm-notice{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px;padding:14px 16px;border-radius:14px;border:1px solid rgba(91,139,255,.28);background:rgba(91,139,255,.08);color:var(--vs-info-text,#c3d2ff);font-size:14px}
.cm-notice.is-warn{border-color:rgba(255,196,107,.35);background:rgba(255,196,107,.08);color:var(--vs-warn,#ffc46b)}
.cm-notice b{color:inherit}

.cm .cm-hero{padding:24px 26px;border:1px solid var(--vs-edge-hero,rgba(91,139,255,.35));border-radius:20px;background:var(--vs-hero,#10142a)}
.cm-flow{display:flex;align-items:center;justify-content:space-between;gap:24px}
.cm-flow-copy{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.cm-flow h2{font-family:"Sora","IBM Plex Sans",sans-serif;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.cm-flow p{max-width:62ch;color:var(--vs-copy,#c7cce0)}
.cm-switch{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto;cursor:pointer;font-weight:600}
.cm-switch input{position:absolute;opacity:0;width:1px;height:1px}
.cm-switch-track{position:relative;width:58px;height:32px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid var(--vs-ghost-line,rgba(255,255,255,.14));transition:background .2s}
.cm-switch-track span{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s}
.cm-switch.is-on .cm-switch-track{background:var(--vs-accent,#5b8bff);border-color:transparent}
.cm-switch.is-on .cm-switch-track span{transform:translateX(26px)}
.cm-switch input:focus-visible+.cm-switch-track{outline:2px solid var(--vs-text,#eef1f8);outline-offset:2px}
.cm-switch input:disabled+.cm-switch-track{opacity:.45;cursor:not-allowed}
.cm-switch-label{min-width:24px}
.cm-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.cm-stat{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--vs-hair,rgba(255,255,255,.08));border-radius:16px;background:var(--vs-glass,rgba(255,255,255,.03))}
.cm-stat span{font-size:13px;color:var(--vs-muted,#8790b5)}
.cm-stat strong{font-family:"Sora","IBM Plex Sans",sans-serif;font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.cm-stat.is-money strong{color:var(--vs-ok,#7ee0b5)}
.cm-stat small{font-size:12px;color:var(--vs-muted,#8790b5)}

.cm .cm-tabs{margin:26px 0 18px}
.cm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:20px;align-items:start}
.cm .cm-card{display:flex;flex-direction:column;gap:10px;padding:22px}
.cm-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.cm-card h3{display:flex;align-items:center;gap:10px;font-family:"Sora","IBM Plex Sans",sans-serif;font-size:17px;font-weight:600;letter-spacing:-.01em}
.cm-num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(91,139,255,.16);color:var(--vs-info-text,#c3d2ff);font-size:13px;font-weight:700}
.cm textarea,.cm select,.cm input[type="email"],.cm input:not([type]){width:100%}
.cm textarea{resize:vertical;min-height:150px}
.cm select{min-height:48px;padding:0 12px;border-radius:12px;font-size:15px}
.cm input[type="color"]{width:100%;height:48px;padding:4px;border-radius:12px;border:1px solid var(--vs-field-edge,rgba(255,255,255,.14));background:var(--vs-field,rgba(10,13,26,.6));cursor:pointer}
.cm-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.cm-row>div{display:flex;flex-direction:column;gap:8px}
.cm-check{display:flex;align-items:center;gap:10px;min-height:48px;font-weight:600;color:var(--vs-copy,#c7cce0)}
.cm-check input{width:18px;height:18px;margin:0;accent-color:var(--vs-accent,#5b8bff)}
.cm-hint{font-size:13px;color:var(--vs-muted,#8790b5)}
.cm-hint code,.cm-dns code{padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.06);color:var(--vs-text,#eef1f8);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px}
.cm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px}
.cm-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid var(--vs-ghost-line,rgba(255,255,255,.14));border-radius:12px;background:transparent;color:var(--vs-copy,#c7cce0);font:600 14px "IBM Plex Sans",sans-serif;cursor:pointer}
.cm-btn.is-primary{border:0;background:var(--vs-accent,#5b8bff);color:#fff;box-shadow:0 8px 24px rgba(91,139,255,.25)}
.cm-btn.is-primary:hover{background:var(--vs-accent-hover,#4a7af0)}
.cm-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.cm-btn:focus-visible,.cm-link:focus-visible,.cm-step:focus-visible,.cm-copy:focus-visible{outline:2px solid var(--vs-text,#eef1f8);outline-offset:2px}
.cm-link{border:0;background:none;padding:0 4px;color:var(--vs-muted,#8790b5);font:500 13px "IBM Plex Sans",sans-serif;text-decoration:underline;cursor:pointer}
.cm-notice .cm-btn{flex:0 0 auto;color:inherit;border-color:currentColor}

.cm-steps{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.cm-step{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border:1px solid var(--vs-hair,rgba(255,255,255,.08));border-radius:14px;background:transparent;color:var(--vs-text,#eef1f8);font:inherit;text-align:left;cursor:pointer}
.cm-step span{font-size:12px;color:var(--vs-muted,#8790b5)}
.cm-step.is-on{border-color:rgba(91,139,255,.45);background:rgba(91,139,255,.12)}

.cm-preview{position:sticky;top:16px;display:flex;flex-direction:column;border:1px solid var(--vs-edge,rgba(91,139,255,.25));border-radius:20px;overflow:hidden;background:#f4f6f9}
.cm-mailbar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--vs-hero,#10142a);border-bottom:1px solid var(--vs-hair,rgba(255,255,255,.08))}
.cm-mailbar p{margin-left:8px;font-size:12px;color:var(--vs-muted,#8790b5)}
.cm-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.cm-mailhead{display:flex;flex-direction:column;gap:4px;padding:12px 16px;background:#fff;border-bottom:1px solid #e6e9ef;color:#17253a;font-size:13px}
.cm-mailhead p{display:flex;gap:10px;min-width:0}
.cm-mailhead span{flex:0 0 72px;color:#8793a6}
.cm-mailhead b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-preview iframe{width:100%;height:620px;border:0;background:#f4f6f9}

.cm-checklist{margin-top:14px;padding-top:16px;border-top:1px solid var(--vs-hair,rgba(255,255,255,.08))}
.cm-kicker{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--vs-accent,#5b8bff);margin-bottom:8px}
.cm-checklist ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;color:var(--vs-copy,#c7cce0)}
.cm-dns td small{display:block;font-size:11px;color:var(--vs-muted,#8790b5)}
.cm-value{display:flex;align-items:center;gap:8px;min-width:0}
.cm-value code{display:block;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-copy{flex:0 0 auto;min-height:30px;padding:0 10px;border:1px solid var(--vs-ghost-line,rgba(255,255,255,.14));border-radius:8px;background:transparent;color:var(--vs-copy,#c7cce0);font:600 12px "IBM Plex Sans",sans-serif;cursor:pointer}
.cm .cm-table-card{padding:6px 0 0}
.cm-sends td.is-num,.cm-sends th.is-num{text-align:right;white-space:nowrap}
.cm-foot{padding:14px 22px 18px}
.cm-status{min-height:22px;margin-top:14px;font-size:13px;color:var(--vs-muted,#8790b5)}
.cm-status.cm-error{color:var(--vs-bad,#ff8f9c)}

html[data-theme="light"] .cm-switch-track{background:#dde2ea}
html[data-theme="light"] .cm-hint code,html[data-theme="light"] .cm-dns code{background:#eef1f6}
html[data-theme="light"] .cm-dot{background:#c9d1e3}

@media(max-width:1000px){.cm-grid{grid-template-columns:1fr}.cm-preview{position:static}}
@media(max-width:640px){
  body[data-agent="checkout-mail"] .center{padding:0 16px 32px}
  .cm .cm-hero{padding:20px 18px}
  .cm-flow{flex-direction:column;align-items:flex-start;gap:16px}
  .cm-flow h2{font-size:19px}
  .cm-stats{grid-template-columns:1fr 1fr}
  .cm-stat.is-money{grid-column:1/-1;order:-1}
  .cm-stat strong{font-size:24px}
  .cm .cm-card{padding:18px 16px}
  .cm-row{grid-template-columns:1fr}
  .cm-notice{flex-direction:column;align-items:flex-start}
  .cm-preview iframe{height:560px}
  .cm-actions .cm-btn{flex:1 1 100%}
  .cm-dns thead,.cm-sends thead{display:none}
  .cm-dns,.cm-dns tbody,.cm-sends,.cm-sends tbody{display:block}
  .cm-dns tr,.cm-sends tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:14px 16px;border-top:1px solid var(--vs-row,rgba(255,255,255,.06))}
  .cm .cm-dns td,.cm .cm-sends td{display:block;padding:0;border:0;min-width:0}
  .cm-dns td:nth-child(3){grid-column:1/-1}
  .cm-value code{max-width:none;flex:1}
  .cm-sends td:nth-child(1){grid-column:1/-1;font-size:12px;color:var(--vs-muted,#8790b5)}
  .cm-sends td:nth-child(4){display:none}
  .cm-sends td:nth-child(5){grid-column:1/-1}
}

/* vs-shared kleurt .vs-badge.is-* niet: de basisregel bevat #coachingPage en wint. Hier lokaal zwaarder. */
body:not(#vs):not(#vs-shared) #checkoutMailOffice .cm .vs-badge.is-info{border-color:rgba(91,139,255,.3);background:rgba(91,139,255,.14);color:var(--vs-info-text,#c3d2ff)}
body:not(#vs):not(#vs-shared) #checkoutMailOffice .cm .vs-badge.is-ok{border-color:rgba(126,224,181,.3);background:rgba(126,224,181,.12);color:var(--vs-ok,#7ee0b5)}
body:not(#vs):not(#vs-shared) #checkoutMailOffice .cm .vs-badge.is-warn{border-color:rgba(255,196,107,.3);background:rgba(255,196,107,.12);color:var(--vs-warn,#ffc46b)}
body:not(#vs):not(#vs-shared) #checkoutMailOffice .cm .vs-badge.is-bad{border-color:rgba(255,143,156,.3);background:rgba(255,143,156,.12);color:var(--vs-bad,#ff8f9c)}
.cm-grid.is-domain{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
.cm-dns .cm-value code{max-width:170px}
.cm-dns th,.cm-dns td{padding-left:10px!important;padding-right:10px!important}
@media(max-width:1000px){.cm-grid.is-domain{grid-template-columns:1fr}}
/* Telefoon: tabellen als kaartjes. Zwaarder dan de vs-table-regels uit vs-shared. */
@media(max-width:640px){
  body:not(#vs):not(#vs-shared) #checkoutMailOffice .cm :is(.cm-dns,.cm-sends) tr{display:grid;gap:6px 12px;padding:14px 16px;border-top:1px solid var(--vs-row,rgba(255,255,255,.06));background:none}
  body:not(#vs):not(#vs-shared) #checkoutMailOffice .cm :is(.cm-dns,.cm-sends) td{display:block;padding:0;border:0;background:none;min-width:0;text-align:left;white-space:normal}
  body:not(#vs):not(#vs-shared) #checkoutMailOffice .cm .cm-sends tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"when when" "prod amount" "mail mail" "state state"}
  body:not(#vs):not(#vs-shared) #checkoutMailOffice .cm .cm-sends td:nth-child(1){grid-area:when;font-size:12px;color:var(--vs-muted,#8790b5)}
  body:not(#vs):not(#vs-shared) #checkoutMailOffice .cm .cm-sends td:nth-child(2){grid-area:mail;font-size:13px;color:var(--vs-muted,#8790b5)}
  body:not(#vs):not(#vs-shared) #checkoutMailOffice .cm .cm-sends td:nth-child(3){grid-area:prod;font-weight:600;color:var(--vs-text,#eef1f8)}
  body:not(#vs):not(#vs-shared) #checkoutMailOffice .cm .cm-sends td:nth-child(4){display:none}
  body:not(#vs):not(#vs-shared) #checkoutMailOffice .cm .cm-sends td:nth-child(5){grid-area:state}
  body:not(#vs):not(#vs-shared) #checkoutMailOffice .cm .cm-sends td:nth-child(6){grid-area:amount;text-align:right;font-weight:600}
  body:not(#vs):not(#vs-shared) #checkoutMailOffice .cm .cm-dns tr{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"type name state" "val val val";align-items:center}
  body:not(#vs):not(#vs-shared) #checkoutMailOffice .cm .cm-dns td:nth-child(1){grid-area:type;font-weight:600}
  body:not(#vs):not(#vs-shared) #checkoutMailOffice .cm .cm-dns td:nth-child(1) small{display:inline;margin-left:6px}
  body:not(#vs):not(#vs-shared) #checkoutMailOffice .cm .cm-dns td:nth-child(2){grid-area:name}
  body:not(#vs):not(#vs-shared) #checkoutMailOffice .cm .cm-dns td:nth-child(3){grid-area:val}
  body:not(#vs):not(#vs-shared) #checkoutMailOffice .cm .cm-dns td:nth-child(4){grid-area:state}
  body:not(#vs):not(#vs-shared) #checkoutMailOffice .cm .cm-dns .cm-value code{max-width:none;flex:1}
}
/* Geen winkel gekoppeld: geen lege tabbladen tonen. */
#checkoutMailOffice .cm-tabs[hidden]{display:none!important}

/* Opmaak: uitgebreide mail (foto's kiezen, vergelijking) */
.cm-fill{padding:14px;border:1px dashed var(--vs-edge,rgba(91,139,255,.25));border-radius:14px;background:rgba(91,139,255,.05);margin-bottom:6px}
.cm-fill .cm-row{align-items:end}
.cm-img-row{display:flex;gap:12px;align-items:flex-start}
.cm-img-row>img,.cm-img-empty{flex:0 0 88px;width:88px;height:88px;border-radius:12px;object-fit:cover;border:1px solid var(--vs-hair,rgba(255,255,255,.08))}
.cm-img-empty{display:grid;place-items:center;font-size:12px;color:var(--vs-muted,#8790b5)}
.cm-img-pick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.cm-thumb{width:52px;height:52px;padding:0;border:2px solid transparent;border-radius:10px;background:none;cursor:pointer;overflow:hidden}
.cm-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cm-thumb.is-on{border-color:var(--vs-accent,#5b8bff)}
.cm-rows{display:flex;flex-direction:column;gap:8px}
.cm-cmp-row{display:grid;grid-template-columns:minmax(0,1fr) 84px 84px;gap:8px}
.cm-cmp-row select{min-height:48px}
.cm .cm-card .cm-kicker{margin:14px 0 0}
@media(max-width:640px){.cm-cmp-row{grid-template-columns:minmax(0,1fr) 72px 72px}.cm-img-row>img,.cm-img-empty{flex-basis:64px;width:64px;height:64px}}

/* Blokken per product */
.cm-plist{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.cm-pitem{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--vs-hair,rgba(255,255,255,.08));border-radius:14px;background:var(--vs-glass,rgba(255,255,255,.03))}
.cm-pitem>img,.cm-pitem>.cm-img-empty{width:48px;height:48px;flex:none;border-radius:10px;object-fit:cover}
.cm-pitem b{display:block;font-size:14px;color:var(--vs-text,#eef1f8);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-pitem span{font-size:12px;color:var(--vs-muted,#8790b5)}
.cm-pitem .cm-btn{min-height:36px;padding:0 12px}
@media(max-width:640px){.cm-pitem{grid-template-columns:40px minmax(0,1fr) auto}.cm-pitem .cm-link{grid-column:2/-1;justify-self:start;padding:0}}

/* Ronde 3: kliks, startlijst, beheer, dashboardblok */
.cm-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.cm-stat.is-warn strong{color:var(--vs-warn,#ffc46b)}
.cm-check-list{margin-top:18px;padding:14px 16px;border:1px solid var(--vs-hair,rgba(255,255,255,.08));border-radius:14px;background:var(--vs-glass,rgba(255,255,255,.03))}
.cm-check-list ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.cm-check-list li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--vs-copy,#c7cce0)}
.cm-check-list li.is-done{color:var(--vs-text,#eef1f8)}
.cm-check-list label{display:flex;align-items:center;gap:8px;cursor:pointer}
.cm-check-list input{width:16px;height:16px;margin:0;accent-color:var(--vs-accent,#5b8bff)}
.cm-tick{display:inline-grid;place-items:center;width:20px;height:20px;flex:none;border-radius:50%;border:1.5px solid var(--vs-ghost-line,rgba(255,255,255,.14));font-size:12px;font-weight:800}
.cm-check-list li.is-done .cm-tick{background:var(--vs-ok,#7ee0b5);border-color:transparent;color:#0a0d1a}
.cm-check-list .cm-link{padding:0;color:var(--vs-info-text,#c3d2ff);font-size:14px;text-align:left}
.cm .cm-admin{margin-top:18px}
.cm-admin-stats{margin-top:6px}
.cm-admin code{font-size:12px}
.cm-dash{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cm-dash h2{margin:4px 0}
@media(max-width:900px){.cm-stats{grid-template-columns:1fr 1fr}.cm-check-list ul{grid-template-columns:1fr}}
@media(max-width:640px){.cm-dash{flex-direction:column;align-items:flex-start}}
.cm-admin .cm-notice{display:block;margin-top:14px}

/* Opmaak in stappen, voorbeeldknoppen en kleine verbeteringen */
.cm-etitle{margin:0 0 4px;font-family:"Sora","IBM Plex Sans",sans-serif;font-size:19px;font-weight:600;color:var(--vs-text,#eef1f8)}
.cm-ostep{display:flex;gap:12px;align-items:flex-start;margin:22px 0 6px;padding-top:18px;border-top:1px solid var(--vs-hair,rgba(255,255,255,.08))}
.cm-ostep h3{margin:2px 0 2px;font-family:"Sora","IBM Plex Sans",sans-serif;font-size:16px;font-weight:600;color:var(--vs-text,#eef1f8)}
.cm-ostep .cm-hint{margin:0}
.cm-pitem{grid-template-columns:48px minmax(0,1fr) auto auto}
.cm-pitem span.is-ok{color:var(--vs-ok,#7ee0b5)}
.cm-pitem span.is-warn{color:var(--vs-warn,#ffc46b)}
.cm-x{width:36px;height:36px;border:1px solid var(--vs-ghost-line,rgba(255,255,255,.14));border-radius:10px;background:transparent;color:var(--vs-muted,#8790b5);font-size:14px;cursor:pointer}
.cm-x:hover{color:var(--vs-bad,#ff8f9c);border-color:currentColor}
.cm-fill>.cm-link{margin-top:10px;padding:0}
.cm-pcol{display:flex;flex-direction:column;gap:12px;min-width:0;position:sticky;top:16px}
.cm-pcol .cm-preview{position:static}
.cm-pchips{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--vs-hair,rgba(255,255,255,.08));border-radius:14px;background:var(--vs-glass,rgba(255,255,255,.03))}
.cm-pchips>div{display:flex;flex-wrap:wrap;gap:8px}
.cm-pchips .cm-hint{margin:0}
.cm-chip{min-height:34px;padding:0 14px;border:1px solid var(--vs-ghost-line,rgba(255,255,255,.14));border-radius:999px;background:transparent;color:var(--vs-copy,#c7cce0);font:600 13px "IBM Plex Sans",sans-serif;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-chip.is-on{border-color:transparent;background:var(--vs-accent,#5b8bff);color:#fff}
.cm-chip.is-small{min-height:30px;padding:0 12px;font-size:12px}
.cm-chip:focus-visible{outline:2px solid var(--vs-text,#eef1f8);outline-offset:2px}
.cm-row.is-single{grid-template-columns:1fr}
.cm-done{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:14px;border:1px solid rgba(126,224,181,.3);background:rgba(126,224,181,.08)}
.cm-done b{display:block;color:var(--vs-text,#eef1f8)}
.cm-done span{font-size:13px;color:var(--vs-copy,#c7cce0)}
.cm-tick.is-on{background:var(--vs-ok,#7ee0b5);border-color:transparent;color:#0a0d1a}
.cm-details{margin-top:6px}
.cm-details>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--vs-info-text,#c3d2ff);padding:8px 0}
.cm-tickbtn{display:inline-flex;align-items:center;gap:10px;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:14px;cursor:pointer;text-align:left}
.cm-tickbtn:focus-visible{outline:2px solid var(--vs-text,#eef1f8);outline-offset:2px;border-radius:6px}
.cm-check-list li{flex-wrap:wrap}
@media(max-width:1180px){.cm-grid.is-domain{grid-template-columns:1fr}}
@media(max-width:1000px){.cm-pcol{position:static}}
@media(max-width:640px){.cm-pitem{grid-template-columns:40px minmax(0,1fr) auto}.cm-pitem .cm-x{grid-column:3;grid-row:1}.cm-pitem .cm-btn{grid-column:2/-1;justify-self:start}}

/* Mail: links de keuzes, rechts de mail waarin je klikt om aan te passen */
.cm-grid.is-editor{grid-template-columns:280px minmax(0,1fr)}
.cm-grid.is-editor .cm-pcol{position:static}
.cm-side{position:sticky;top:16px}
.cm .cm-side .cm-kicker{margin:18px 0 8px}
.cm .cm-side .cm-kicker:first-child{margin-top:0}
.cm-side select,.cm-side .vs-input{width:100%}
.cm-side .cm-hint{margin-top:6px}
.cm-side input[type=color]{width:56px;height:36px;padding:2px;border:1px solid var(--vs-hair,rgba(255,255,255,.12));border-radius:10px;background:transparent;cursor:pointer}
.cm-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--vs-hair,rgba(255,255,255,.08));border-radius:12px;background:rgba(255,255,255,.02)}
.cm-seg button{padding:9px 10px;border:0;border-radius:9px;background:transparent;color:var(--vs-muted,#8790b5);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.cm-seg button[aria-pressed=true]{background:rgba(91,139,255,.18);color:var(--vs-text,#eef1f8);box-shadow:inset 0 0 0 1px rgba(91,139,255,.45)}
.cm-seg button:focus-visible{outline:2px solid var(--vs-text,#eef1f8);outline-offset:1px}
.cm-side .cm-check{margin:10px 0 2px}
.cm-reset{display:block;margin-top:14px;font-size:13px}
.cm-edit-tip{margin:0;padding:11px 16px;background:rgba(91,139,255,.14);border-bottom:1px solid rgba(91,139,255,.3);color:var(--vs-text,#eef1f8);font-size:14px;line-height:1.45}
.cm-edit-tip code{font-size:12px}
.cm-preview .cm-edit-tip{background:#1b2547;color:#eef1f8}
.cm-saved{margin-left:auto;font-size:12px;color:#7fd1a0;white-space:nowrap}
.cm-subject{cursor:text;border-radius:4px}
.cm-subject:hover{outline:2px dashed #4f7cff;outline-offset:2px}
.cm-subject[contenteditable]{outline:2px solid #4f7cff;outline-offset:2px;white-space:normal}
.cm-frame-wrap{position:relative}
.cm-grid.is-editor .cm-preview iframe{display:block;height:900px;min-height:300px;background:#efe9df}
.cm-pop{position:absolute;left:50%;transform:translateX(-50%);z-index:5;width:min(360px,calc(100% - 24px));padding:14px;border-radius:16px;background:var(--vs-hero,#10142a);border:1px solid rgba(91,139,255,.4);box-shadow:0 18px 50px rgba(0,0,0,.45);color:var(--vs-text,#eef1f8)}
.cm-pop-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cm-pop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.cm-pop .cm-thumb{width:100%;height:auto;aspect-ratio:1}
.cm-pop .cm-thumb:hover{border-color:var(--vs-accent,#5b8bff)}
@media(max-width:1000px){.cm-grid.is-editor{grid-template-columns:1fr}.cm-side{position:static}}
@media(max-width:640px){.cm-pop-grid{grid-template-columns:repeat(3,1fr)}.cm-edit-tip{font-size:13px}}

/* Sleepbalk tussen de keuzes en het voorbeeld */
.cm-grid.is-editor{grid-template-columns:var(--cm-side,280px) 12px minmax(0,1fr);gap:8px}
.cm-split{position:sticky;top:16px;align-self:stretch;display:flex;justify-content:center;cursor:col-resize;touch-action:none;border-radius:8px}
.cm-split span{width:4px;height:100%;min-height:120px;border-radius:4px;background:var(--vs-hair,rgba(255,255,255,.1));transition:background .15s}
.cm-split:hover span,.cm-split:focus-visible span,.cm-grid.is-dragging .cm-split span{background:var(--vs-accent,#5b8bff)}
.cm-split:focus-visible{outline:none}
.cm-grid.is-dragging{user-select:none}
.cm-grid.is-dragging iframe{pointer-events:none}
.cm-pop .cm-hint{margin:0 0 10px}
@media(max-width:1000px){.cm-grid.is-editor{grid-template-columns:1fr}.cm-split{display:none}}

/* Keuzes blijven in beeld bij een lange mail, en scrollen zelf als ze niet passen */
.cm-grid.is-editor .cm-side{max-height:calc(100vh - 92px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
@media(max-width:1000px){.cm-grid.is-editor .cm-side{max-height:none;overflow:visible}}