/* Mailing - stijl van de app. De kleuren van de organisatie (--brand, --accent en afgeleiden) zet index.php op
   <html>; inloggen en platformbeheer gebruiken de kleuren van Mailing zelf. Lettertype Poppins (lokaal, OFL). */

@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-latin-600-normal.woff2) format("woff2")}

:root{
  --brand:#2F4A73; --brand-deep:#22375A; --brand-tint:#E6EBF2; --brand-soft:#B9C6D8; --on-brand:#FFFFFF; --accent:#E07B39;
  --paper:#EEF2F4; --surface:#FFFFFF; --sunk:#E3E9ED; --tint:#F5F8F9;
  --ink:#16212B; --ink-2:#3C4A57; --ink-3:#5A6876; --ink-4:#8A97A3;
  --line:#D5DDE3; --line-2:#B3C0CA; --line-3:#E3E9ED;
  --danger:#B42318; --danger-deep:#8E1B12; --danger-tint:#FDECEA;
  --warn-ink:#92400E; --warn-bg:#FEF3C7; --warn-deep:#9A3412;
  --ok-ink:#1E5631; --ok-bg:#E7F4EC;
  --lane:#E3E9ED; --dot-wait:#8A97A3;
  --r-s:4px; --r-m:8px; --r-l:12px;
  --pop:0 18px 48px rgba(22,33,43,.18),0 2px 8px rgba(22,33,43,.08);
  --font:"Poppins",Arial,Helvetica,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 14.5px/1.6 var(--font);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-family:var(--font);font-weight:500;line-height:1.2;letter-spacing:-.005em}
h1{font-size:28px}
h2{font-size:18px}
h3{font-size:15px}
p{margin:0}
a{color:var(--brand-deep);text-underline-offset:2px}
a:hover{color:var(--ink)}
code{font-family:var(--mono);font-size:12.5px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.muted{color:var(--ink-3)}
.nowrap{white-space:nowrap}

/* ---------- knoppen en velden ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border:1px solid var(--brand);border-radius:var(--r-s);background:var(--surface);color:var(--brand-deep);font-size:14.5px;font-weight:500;white-space:nowrap;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--brand-tint);color:var(--brand-deep)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn-primary:hover{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-danger:hover{background:var(--danger-deep);border-color:var(--danger-deep);color:#fff}
.btn-danger-outline{border-color:var(--danger);color:var(--danger)}
.btn-danger-outline:hover{background:var(--danger-tint);color:var(--danger)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-small{height:36px;padding:0 13px;font-size:13.5px}
.btn-block{width:100%}
.btn-dashed{width:100%;border-style:dashed;background:var(--surface)}
.btn .ico{width:17px;height:17px}
.btn.is-busy{position:relative;color:transparent!important}
.btn.is-busy .ico{visibility:hidden}
.btn.is-busy::after{content:"";position:absolute;width:16px;height:16px;border:2px solid var(--on-brand);border-color:var(--on-brand) transparent var(--on-brand) transparent;border-radius:50%;animation:spin .8s linear infinite}
.btn:not(.btn-primary):not(.btn-danger).is-busy::after{border-color:var(--brand) transparent var(--brand) transparent}
@keyframes spin{to{transform:rotate(360deg)}}
.linkbtn{display:inline;padding:0;border:0;background:none;color:var(--brand-deep);font-size:inherit;font-weight:500;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.linkbtn:hover{color:var(--ink)}
.linkbtn.danger,.linkbtn-danger{color:var(--danger)}
.linkbtn:disabled{opacity:.5;cursor:default}
.iconbtn{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:var(--r-s);background:none;color:var(--ink-3);cursor:pointer}
.iconbtn:hover{background:var(--paper);color:var(--ink)}
.iconbtn:disabled{opacity:.35;cursor:default;background:none}
.iconbtn.del:hover{background:var(--danger-tint);color:var(--danger)}
.iconbtn.sm{width:30px;height:30px}
.iconbtn.sm .ico{width:16px;height:16px}
.lbl{display:block;margin-bottom:6px;font-size:13.5px;font-weight:500}
.lbl-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.lbl-row .lbl{margin:0}
.lbl-row a{font-size:13.5px}
.opt{font-weight:400;color:var(--ink-3)}
.input{display:block;width:100%;height:44px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--surface)}
.input:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.input[readonly]{background:var(--tint);color:var(--ink-2)}
select.input{padding-right:30px}
textarea.input,.ta{height:auto;min-height:90px;padding:10px 12px;line-height:1.5;resize:vertical}
.input.mono,.mono{font-family:var(--mono);font-size:14px}
.input.otp{height:56px;font-size:26px;font-weight:500;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums}
.input-sm{display:inline-block;width:auto;min-width:130px;height:36px;padding:0 8px;font-size:13.5px}
.hint{margin-top:6px;font-size:13px;color:var(--ink-3)}
.fld+.fld{margin-top:18px}
.seg{display:inline-flex;gap:2px;max-width:100%;padding:3px;border-radius:6px;background:var(--sunk);overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:none;height:32px;padding:0 12px;border:0;border-radius:4px;background:none;color:var(--ink-2);font-size:13.5px;cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button[aria-checked="true"],.seg button[aria-pressed="true"],.seg button.on{background:var(--surface);color:var(--brand-deep);font-weight:500;box-shadow:0 1px 2px rgba(20,27,23,.14)}
.seg button span{margin-left:6px;color:var(--ink-3);font-weight:400;font-variant-numeric:tabular-nums}
.seg button:disabled{opacity:.5;cursor:default}
.chk{width:18px;height:18px;margin:0;accent-color:var(--brand);cursor:pointer;flex:none}
.check{display:inline-flex;align-items:center;gap:8px;min-height:36px;cursor:pointer}
.check-block{display:flex;align-items:flex-start;gap:10px}
.check-block .chk{margin-top:3px}
.check-block b{display:block;font-weight:500}
.check-block .hint{margin-top:2px}
.row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.row-end{display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px 14px}
.row-end>.grow{flex:1 1 200px;min-width:0}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.g-port{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:14px 16px}
.stack>*+*{margin-top:14px}
.okline{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;color:var(--brand-deep)}
.okline .ico{width:16px;height:16px}
.okline.is-error{color:var(--danger)}
.err{margin-top:10px;padding:10px 12px;border-radius:6px;background:var(--danger-tint);color:var(--danger);font-size:13.5px}
.infobox{padding:12px 14px;border-radius:var(--r-m);background:var(--tint);font-size:13.5px;color:var(--ink-2)}
.rules{margin:0;padding-left:20px;font-size:13.5px;color:var(--ink-2)}
.rules li{margin-bottom:5px}
.pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:500;white-space:nowrap}
.pill .ico{width:15px;height:15px}
.pill.ok{background:var(--brand-tint);color:var(--brand-deep)}
.pill.bad{background:var(--warn-bg);color:var(--warn-ink)}
.badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:var(--sunk);color:var(--ink-2);font-size:12px;font-weight:500;white-space:nowrap}
.badge.brand{background:var(--brand-tint);color:var(--brand-deep)}
.badge.warn{background:var(--warn-bg);color:var(--warn-ink)}
.badge.bad{background:var(--danger-tint);color:var(--danger)}
.ltag{display:inline-block;margin:1px 4px 1px 0;padding:1px 8px;border-radius:999px;background:var(--paper);color:var(--ink-2);font-size:12px;white-space:nowrap}
.free{display:inline-block;margin-left:6px;padding:0 5px;border-radius:3px;background:var(--sunk);color:var(--ink-2);font-size:11px;font-weight:500;vertical-align:1px}
.card{border-radius:var(--r-l);background:var(--surface);box-shadow:0 1px 0 var(--line)}
.mark{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:8px;background:var(--brand);color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em}
.mark.m-sm{width:28px;height:28px;border-radius:6px;font-size:11px}
.mark.m-lg{width:48px;height:48px;border-radius:10px;font-size:16px}
.mark .ico{width:16px;height:16px}
.brandmark{display:inline-grid;place-items:center;flex:none;border-radius:10px;background:#2F4A73}
.empty-state{padding:44px 24px;border-radius:var(--r-l);background:var(--surface);text-align:center}
.empty-state p{margin:8px auto 18px;max-width:52ch;color:var(--ink-2)}
.loading{padding:24px;color:var(--ink-3);font-size:13.5px}

/* ---------- inloggen, tweestap, uitnodiging, wachtwoord, afmelden ---------- */
.auth-page{background:#EEF1F5}
.auth{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:9vh 16px 40px}
.auth-card{position:relative;width:min(440px,100%);padding:34px 34px 30px;border-radius:var(--r-l);background:var(--surface);box-shadow:0 1px 0 var(--line)}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:26px;font-size:20px;font-weight:600;color:#16212B}
.auth-icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:18px;border-radius:12px;background:var(--brand-tint);color:var(--brand-deep)}
.auth-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:20px;font-size:13.5px;font-weight:500;text-decoration:none}
.auth-back:hover{text-decoration:underline}
.auth-card h1{font-size:25px}
.auth-sub{margin-top:8px;color:var(--ink-2)}
.auth-form{margin-top:22px}
.auth-form .btn{margin-top:22px}
.auth-alt{margin-top:18px;font-size:13.5px;color:var(--ink-2);text-align:center}
.auth-foot{max-width:440px;margin-top:18px;font-size:13px;color:var(--ink-3);text-align:center}
.auth-foot .inline-form{display:inline}
.auth-logo{height:auto;max-height:60px;width:auto;margin-bottom:22px}
.auth-company{margin-bottom:18px;font-size:20px;font-weight:600}
.form-error{margin-top:16px;padding:10px 12px;border-radius:var(--r-s);background:var(--danger-tint);color:var(--danger);font-size:13.5px}
.form-ok{margin-top:16px;padding:10px 12px;border-radius:var(--r-s);background:var(--ok-bg);color:var(--ok-ink);font-size:13.5px}
.setup-steps{margin:22px 0 0;padding-left:20px;font-size:14px;color:var(--ink-2)}
.setup-steps li+li{margin-top:12px}
.setup-steps b{color:var(--ink);font-weight:500}
.qr{display:block;width:fit-content;margin:12px 0 4px;padding:10px;border:1px solid var(--line);border-radius:var(--r-m);background:#fff}
.qr svg{display:block}
.secret{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--ink);overflow-wrap:anywhere}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:20px 0 6px;padding:14px;border-radius:var(--r-m);background:var(--tint);list-style:none}
.codes code{font-size:15px;letter-spacing:.04em;color:var(--ink)}

/* ---------- organisatie kiezen en platformbeheer: kop ---------- */
.pf-page{background:#EEF1F5}
.pf-bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;flex-wrap:wrap;gap:6px 26px;min-height:64px;padding:0 24px;background:#fff;box-shadow:0 1px 0 var(--line)}
.pf-brand{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:600;color:var(--ink);text-decoration:none}
.pf-brand .tag{padding:2px 9px;border-radius:999px;background:var(--brand-tint);color:var(--brand-deep);font-size:12.5px;font-weight:500}
.tnav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.tnav a{display:flex;align-items:center;min-height:40px;padding:0 12px;color:var(--ink);font-size:15px;text-decoration:none;white-space:nowrap}
.tnav a:hover{color:var(--brand-deep);text-decoration:underline}
.pf-user{display:flex;align-items:center;gap:16px;margin-left:auto;font-size:14px;color:var(--ink-2)}
.pf-user form{margin:0}
.chooser{max-width:760px;margin:0 auto;padding:48px 24px 60px}
.chooser h1{font-size:30px}
.chooser>p{margin-top:8px;color:var(--ink-2)}
.org-list{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.chooser-search{display:flex;gap:10px;margin-top:22px}
.chooser-search .search-wrap{flex:1;width:auto}
.chooser-search+.org-list{margin-top:16px}
.org-card{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:var(--r-l);background:#fff;box-shadow:0 1px 0 var(--line);color:inherit;text-decoration:none}
a.org-card:hover{box-shadow:0 0 0 2px var(--brand);color:inherit}
.org-card.is-off{opacity:.7}
.org-card .org-main{flex:1;min-width:0}
.org-card .org-name{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:16px;font-weight:500}
.org-card .org-line{display:flex;align-items:center;gap:7px;margin-top:3px;font-size:13.5px;color:var(--ink-3)}
.org-card .org-line .ico{width:15px;height:15px}
.org-card .org-line.is-warn{color:var(--warn-deep)}
.org-card .chev{color:var(--ink-4)}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}

/* ---------- app: kop ---------- */
.appbar{position:sticky;top:0;z-index:30;display:flex;align-items:stretch;flex-wrap:wrap;gap:0 28px;min-height:64px;padding:0 24px;background:var(--surface);box-shadow:0 1px 0 var(--line)}
.orgsw{position:relative;display:flex;align-items:center}
.orgbtn{display:flex;align-items:center;gap:10px;max-width:340px;min-height:48px;padding:6px 8px 6px 6px;border:0;border-radius:var(--r-m);background:none;text-align:left;cursor:pointer}
.orgbtn:hover{background:var(--paper)}
.orgbtn-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.orgbtn-name{overflow:hidden;font-size:15px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.orgbtn-sub{font-size:12px;color:var(--ink-3)}
.orgbtn .ico{color:var(--ink-3)}
.orgmenu{position:absolute;left:0;top:calc(100% - 2px);z-index:40;width:320px;max-height:min(70vh,560px);overflow:auto;padding:8px;border-radius:var(--r-l);background:#fff;box-shadow:var(--pop)}
.orgmenu-h{padding:6px 10px;font-size:12px;font-weight:500;color:var(--ink-3)}
.orgmenu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;color:var(--ink);font-size:14px;text-decoration:none}
.orgmenu a:hover{background:var(--paper)}
.orgmenu a span.n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orgmenu a .ico{color:var(--brand)}
.orgmenu .sep{height:1px;margin:6px 0;background:var(--line)}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{position:relative;display:flex;align-items:center;gap:8px;padding:0 14px;color:var(--ink);font-size:15px;text-decoration:none;white-space:nowrap}
.tabs a:hover{color:var(--brand-deep)}
.tabs a[aria-current="page"]::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:5px;border-radius:3px 3px 0 0;background:var(--accent)}
.tab-badge{padding:1px 8px;border-radius:999px;background:var(--brand);color:var(--on-brand);font-size:12px;font-weight:500;line-height:1.5}
.user{display:flex;align-items:center;gap:16px;margin-left:auto;font-size:14px;color:var(--ink-2)}
.user form{margin:0}
.user .linkbtn{font-size:14px}
.user .user-name{color:var(--ink-2);font-weight:400;text-decoration:none}
.user .user-name:hover{color:var(--ink);text-decoration:underline}
.user-name .av{display:none;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--sunk);color:var(--ink-2);font-size:12.5px;font-weight:600}
.pf-user .user-name{color:var(--ink-2);font-weight:400;text-decoration:none}
.pf-user .user-name:hover{color:var(--ink);text-decoration:underline}
.alertbar{padding:10px 24px;background:var(--danger-tint);border-bottom:1px solid #F3C2C6;color:#7A0610;font-size:14px}
.alertbar>div+div{margin-top:4px}

/* ---------- app: pagina ---------- */
main{max-width:1380px;margin:0 auto;padding:28px 24px 56px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;margin-bottom:26px}
.page-head h1{overflow-wrap:anywhere}
.page-head .sub{margin-top:6px;color:var(--ink-2)}
.head-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.head-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.back-link{display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;font-size:14px;font-weight:500;text-decoration:none}
.back-link:hover{text-decoration:underline}
.readiness{display:flex;align-items:flex-start;gap:6px;max-width:560px;font-size:13.5px;color:var(--ink-2);text-align:right}
.readiness .ico{width:16px;height:16px;margin-top:3px}
.readiness.ok .ico{color:var(--brand)}
.readiness.todo{color:var(--danger)}
.readiness .linkbtn{color:inherit}
.notice{display:flex;align-items:center;gap:10px;margin:-8px 0 22px;padding:10px 14px;border-radius:var(--r-m);background:var(--ok-bg);color:var(--ok-ink);font-size:14px}
.notice>span{flex:1;min-width:0}
.notice .linkbtn{color:var(--ok-ink);font-size:13.5px}
.notice.is-warn{background:var(--warn-bg);color:var(--warn-ink)}
.notice.is-warn .linkbtn{color:var(--warn-ink)}
.banner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 18px;margin:-6px 0 24px;padding:13px 18px;border-radius:var(--r-m);background:var(--brand);color:var(--on-brand);font-weight:500}
.banner a,.banner .linkbtn{color:var(--on-brand)}
.banner-actions{display:flex;gap:18px;align-items:center}
.warn{margin:-6px 0 20px;padding:13px 18px;border-radius:var(--r-m);border:1px solid #F3C2C6;background:var(--danger-tint);color:#7A0610;font-size:14px}
.warn b{font-weight:600}
.warn>div+div{margin-top:6px}

/* ---------- menu's (sjablonen, blok toevoegen, opmaak) ---------- */
.menu-wrap{position:relative}
.popmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:25;width:360px;max-width:calc(100vw - 32px);max-height:min(70vh,620px);overflow:auto;padding:8px;border-radius:var(--r-l);background:#fff;box-shadow:var(--pop)}
.popmenu.left{left:0;right:auto}
.popmenu.sm{width:auto;min-width:200px}
.menu-h{padding:6px 12px 2px;font-size:12px;font-weight:500;color:var(--ink-3)}
.menu-sep{height:1px;margin:6px 0;background:var(--line)}
.mi{display:flex;align-items:flex-start;gap:12px;width:100%;padding:11px 12px;border:0;border-radius:var(--r-m);background:none;color:var(--ink);text-align:left;cursor:pointer}
.mi:hover,.mi:focus-visible{background:var(--brand-tint)}
.mi .mic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:8px;background:var(--paper);color:var(--brand-deep)}
.mi .mit{flex:1;min-width:0}
.mi b{display:block;font-weight:500;font-size:14px;overflow-wrap:anywhere}
.mi small{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.45}
.mi-row{display:flex;align-items:center;gap:2px}
.mi-row .mi{flex:1;min-width:0}
.mi-none{padding:8px 12px;font-size:13px;color:var(--ink-3)}
.mitem{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:6px 10px;border:0;border-radius:6px;background:none;text-align:left;cursor:pointer;font-size:14px;white-space:nowrap}
.mitem:hover{background:var(--brand-tint)}
.mitem code{color:var(--brand-deep)}
.mitem .sw{width:14px;height:14px;border-radius:3px;flex:none}

/* ---------- opstellen ---------- */
.compose{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:start}
.compose.is-locked .compose-form{opacity:.6;pointer-events:none}
.c-sec{padding:24px 0;border-bottom:1px solid var(--line)}
.c-sec:first-child{padding-top:0}
.c-sec:last-child{border-bottom:0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin-bottom:6px}
.sec-intro{margin-bottom:16px;font-size:13px;color:var(--ink-3)}
.label-row{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;margin-bottom:6px}
.label-row .lbl{margin:0}
.merge-chips{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--ink-3)}
.mfld{height:28px;padding:0 9px;border:1px solid var(--line-2);border-radius:4px;background:var(--surface);font-size:13px;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.mfld:hover{border-color:var(--brand);color:var(--brand-deep)}
.blocks{display:flex;flex-direction:column;gap:12px}
.blk{position:relative}
.blk:focus-within{box-shadow:0 0 0 2px var(--brand)}
.blk.is-dragging{opacity:.55}
.blk-drop{height:4px;margin:-8px 0;border-radius:2px;background:var(--brand)}
.blk-head{display:flex;align-items:center;gap:4px;padding:6px 6px 6px 4px;border-bottom:1px solid var(--line-3)}
.blk-grip{display:grid;place-items:center;flex:none;width:28px;height:36px;border:0;border-radius:4px;background:none;color:var(--ink-4);cursor:grab;touch-action:none}
.blk-grip:hover{background:var(--paper);color:var(--ink-2)}
.blk-grip:active{cursor:grabbing}
.blk-title{display:flex;align-items:baseline;gap:10px;flex:1;min-width:0;min-height:36px;padding:6px 4px;font-size:14.5px}
.blk-title b{flex:none;font-weight:500}
.blk-title span{overflow:hidden;font-size:13px;color:var(--ink-3);text-overflow:ellipsis;white-space:nowrap}
.blk-body{padding:14px}
.blk-cols{display:flex;flex-wrap:wrap;gap:14px}
.blk-cols>.blk-side{display:flex;flex-direction:column;gap:12px;flex:1 1 240px;min-width:0}
.blk-opts{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.blk-opts .lbl{margin:0}
.blk-opts .hint{margin:0}
.blk-line{height:2px;margin:6px 0 10px;background:var(--line)}
.blk-add-menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:4px;margin-top:12px;padding:8px}
.blk-problem{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;color:var(--danger)}
.blk-problem .ico{width:15px;height:15px}

/* opgemaakte tekst */
.tb{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:4px;border:1px solid var(--line-2);border-bottom:0;border-radius:var(--r-s) var(--r-s) 0 0;background:var(--tint)}
.tb button{display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:34px;height:34px;padding:0 7px;border:0;border-radius:4px;background:none;color:var(--ink-2);font-size:14px;cursor:pointer}
.tb button:hover{background:var(--sunk);color:var(--ink)}
.tb button.on{background:var(--surface);color:var(--brand-deep);box-shadow:0 1px 2px rgba(20,27,23,.14)}
.tb .sep{width:1px;height:22px;margin:0 4px;background:var(--line)}
.tb .tb-wrap{position:relative;display:inline-flex}
.tb .sw{width:12px;height:12px;border-radius:3px}
.tb .popmenu{left:0;right:auto;top:calc(100% + 4px)}
.rte{min-height:96px;padding:12px 14px;border:1px solid var(--line-2);border-radius:0 0 var(--r-s) var(--r-s);background:var(--surface);font-size:14.5px;line-height:1.65;overflow-wrap:anywhere;cursor:text}
.rte:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.rte p,.rte h2,.rte h3,.rte ul,.rte ol{margin:0 0 10px}
.rte>:last-child{margin-bottom:0}
.rte h2{font-size:19px;font-weight:600;color:var(--brand)}
.rte h3{font-size:16px;font-weight:600}
.rte ul,.rte ol{padding-left:24px}
.rte a{color:var(--brand-deep)}
.rte:empty::before{content:attr(data-placeholder);color:var(--ink-4)}
.rte [data-kleur="primair"]{color:var(--brand)}
.rte [data-kleur="accent"]{color:var(--accent)}
.rte [data-kleur="tekst"]{color:var(--ink)}
.rte [data-kleur="grijs"]{color:var(--ink-3)}
.compose.is-locked .rte{background:var(--tint)}

/* fotoplekken */
.islot{position:relative;flex:none;width:100%}
.islot-frame{position:relative;overflow:hidden;border-radius:var(--r-s);background:var(--sunk);touch-action:none;user-select:none;-webkit-user-select:none}
.islot-frame>img{position:absolute;max-width:none;pointer-events:none}
.islot-frame.is-busy::after{content:attr(data-busy);position:absolute;inset:0;display:grid;place-items:center;padding:8px;background:rgba(12,20,28,.55);color:#fff;font-size:13px;font-weight:500;text-align:center}
.islot-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;padding:8px;border:2px dashed var(--line-2);border-radius:var(--r-s);background:var(--brand-tint);color:var(--brand-deep);font-size:12.5px;font-weight:500;text-align:center;cursor:pointer}
.islot-empty:hover{border-color:var(--brand)}
.islot-empty .ico{width:26px;height:26px}
.islot-empty small{font-weight:400;color:var(--ink-3)}
.islot.is-over .islot-frame{outline:3px dashed var(--accent);outline-offset:2px}
.islot-acts{display:flex;align-items:center;flex-wrap:wrap;gap:2px 12px;margin-top:6px;font-size:13px}
.islot-acts .linkbtn{font-size:13px}
.islot-acts .iconbtn{margin-left:auto}
.islot-flag{position:absolute;left:6px;bottom:6px;z-index:2;padding:2px 7px;border-radius:4px;background:rgba(12,20,28,.72);color:#fff;font-size:11.5px;line-height:1.4;pointer-events:none}
.islot-flag.warn{background:var(--danger)}
.islot-main{flex:none;width:200px}
.islot-main.half{width:150px}
.raster-grid{display:grid;gap:10px}
.raster-grid .cap{height:36px;margin-top:6px;font-size:13.5px}

/* bijlagen */
.att-list{display:flex;flex-direction:column;gap:10px}
.filerow{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.filerow.is-missing{border-color:#F3C2C6;background:var(--danger-tint)}
.extbadge{display:grid;place-items:center;flex:none;width:40px;height:48px;border-radius:4px;background:var(--ink-3);color:#fff;font-size:11px;font-weight:600;letter-spacing:.02em}
.extbadge.pdf{background:#B42318}
.extbadge.word{background:#2B579A}
.extbadge.excel,.extbadge.csv{background:#1D6F42}
.extbadge.ppt{background:#C4501C}
.extbadge.img{background:#6D28D9}
.extbadge.zip{background:#475569}
.file-main{flex:1;min-width:0}
.input-ext{display:flex;min-width:0}
.input-ext .input{flex:1;min-width:0;height:38px;border-top-right-radius:0;border-bottom-right-radius:0}
.input-ext .ext{display:flex;align-items:center;padding:0 10px;border:1px solid var(--line-2);border-left:0;border-radius:0 var(--r-s) var(--r-s) 0;background:var(--tint);color:var(--ink-2);font-size:13.5px;white-space:nowrap}
.file-meta{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;color:var(--ink-2)}
.file-meta .ico{width:15px;height:15px;color:var(--brand)}
.file-meta.is-error{color:var(--danger)}
.file-meta.is-error .ico{color:var(--danger)}
.dropzone{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;padding:18px;border:2px dashed var(--line-2);border-radius:var(--r-m);background:var(--surface);color:var(--ink-2);text-align:center}
.dropzone.is-over{border-color:var(--accent);background:var(--brand-tint)}
.dropzone.big{flex-direction:column;padding:44px 20px}
.dropzone.big .ico{width:34px;height:34px;color:var(--brand)}
.dropzone.big p{margin:0;font-size:16px;font-weight:500;color:var(--ink)}
.dropzone.big p.hint{margin:-4px 0 6px;font-size:13.5px;font-weight:400;color:var(--ink-3)}
.usage{height:6px;border-radius:3px;background:var(--sunk);overflow:hidden}
.usage>div{height:6px;background:var(--brand);transition:width .2s}
.usage.warn>div{background:#E0A019}
.usage.full>div{background:var(--danger)}

/* ontvangers */
.list-pick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.list-opt{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 15px 0 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink);font-size:14px;cursor:pointer}
.list-opt .ico{width:16px;height:16px;padding:1px;border:1.5px solid var(--line-2);border-radius:4px;color:transparent;stroke-width:3}
.list-opt small{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.list-opt:hover{border-color:var(--brand)}
.list-opt[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-deep);font-weight:500}
.list-opt[aria-pressed="true"] .ico{border-color:var(--brand);background:var(--brand);color:#fff}
.list-opt:disabled{cursor:default;opacity:.7}
.recip strong{font-size:20px;font-weight:600}
.recip.todo{color:var(--danger);font-weight:500}

/* voorbeeld */
.compose-preview{position:sticky;top:88px}
.preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.mailclient{border-radius:var(--r-l);background:var(--surface);overflow:hidden;box-shadow:0 1px 0 var(--line)}
.mail-meta{padding:14px 20px 16px;border-bottom:1px solid var(--line)}
.mm-row{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:8px;min-height:30px;font-size:13.5px}
.mm-k{color:var(--ink-3)}
.mm-v{overflow-wrap:anywhere}
.mm-select{justify-self:start;width:auto;max-width:100%;height:32px;padding:0 28px 0 8px;font-size:13.5px}
.mm-subject{margin:10px 0 8px;font-size:18px;font-weight:500;line-height:1.35;overflow-wrap:anywhere}
.mm-atts{display:flex;flex-wrap:wrap;gap:8px}
.mm-att{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:var(--tint);font-size:13px}
.mm-att .ico{width:15px;height:15px;color:var(--ink-2)}
.mm-att b{font-weight:500;overflow-wrap:anywhere}
.mm-att span{color:var(--ink-3);white-space:nowrap}
.mail-canvas{display:flex;justify-content:center;max-height:calc(100vh - 300px);min-height:440px;overflow:auto;padding:24px 18px;background:var(--brand-tint)}
.mail-canvas iframe{display:block;width:100%;max-width:640px;height:600px;border:0;background:transparent}
.is-phone .mail-canvas{padding:28px 16px}
.is-phone .mail-canvas iframe{width:375px;max-width:100%;border-radius:22px;box-shadow:0 0 0 8px #1E2933;background:#fff}
.preview-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;margin-top:10px;font-size:13px;color:var(--ink-3)}

/* uitsnede en editor van de fotobibliotheek */
.ed-stage{position:relative;height:min(62vh,620px);min-height:300px;border-radius:var(--r-l);overflow:hidden;background:#17212B;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:crosshair}
.ed-stage>img{position:absolute;inset:18px;width:calc(100% - 36px);height:calc(100% - 36px);max-width:none;object-fit:contain;pointer-events:none}
.crop{position:absolute;border:2px solid #fff;border-radius:2px;cursor:grab;background-repeat:no-repeat;background-size:100% 100%}
.ed-crop{box-shadow:0 0 0 4000px rgba(12,20,28,.62)}
.ed-stage.is-dragging .crop{cursor:grabbing}
.ed-stage.is-moving .ed-crop{background-image:none!important}
.crop::before,.crop::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .15s}
.crop::before{background:linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(255,255,255,.55) 0 calc(33.33% + .5px),transparent 0 calc(66.66% - .5px),rgba(255,255,255,.55) 0 calc(66.66% + .5px),transparent 0)}
.crop::after{background:linear-gradient(180deg,transparent calc(33.33% - .5px),rgba(255,255,255,.55) 0 calc(33.33% + .5px),transparent 0 calc(66.66% - .5px),rgba(255,255,255,.55) 0 calc(66.66% + .5px),transparent 0)}
.ed-stage:hover .crop::before,.ed-stage:hover .crop::after,.ed-stage.is-dragging .crop::before,.ed-stage.is-dragging .crop::after,.crop:focus-visible::before,.crop:focus-visible::after{opacity:1}
.crop:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.hdl{position:absolute;z-index:1;width:16px;height:16px;border:2px solid var(--brand);border-radius:3px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);touch-action:none}
.hdl::before{content:"";position:absolute;inset:-12px}
.hdl[data-h="nw"]{left:-9px;top:-9px;cursor:nwse-resize}
.hdl[data-h="ne"]{right:-9px;top:-9px;cursor:nesw-resize}
.hdl[data-h="sw"]{left:-9px;bottom:-9px;cursor:nesw-resize}
.hdl[data-h="se"]{right:-9px;bottom:-9px;cursor:nwse-resize}
.hdl[data-h="n"],.hdl[data-h="s"]{left:50%;width:30px;height:12px;margin-left:-15px;cursor:ns-resize}
.hdl[data-h="n"]{top:-7px}
.hdl[data-h="s"]{bottom:-7px}
.hdl[data-h="w"],.hdl[data-h="e"]{top:50%;width:12px;height:30px;margin-top:-15px;cursor:ew-resize}
.hdl[data-h="w"]{left:-7px}
.hdl[data-h="e"]{right:-7px}
.hdl.edge::before{inset:-10px}
.ed-stage.is-locked .hdl.edge{display:none}
.dims{position:absolute;right:8px;bottom:8px;z-index:2;padding:3px 8px;border-radius:4px;background:rgba(12,20,28,.74);color:#fff;font-size:12px;line-height:1.35;font-variant-numeric:tabular-nums;pointer-events:none}
.dims.warn{background:var(--danger)}
.ed-loading{position:absolute;left:8px;bottom:8px;z-index:2;padding:3px 8px;border-radius:4px;background:rgba(12,20,28,.74);color:#fff;font-size:12px;line-height:1.35;pointer-events:none}
.zoom-row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-3)}
.zoom-row input{flex:1;min-width:0;accent-color:var(--brand)}
.crop-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:22px;margin-top:18px}
.crop-grid .ed-stage{height:min(56vh,520px)}
.crop-side>*+*{margin-top:18px}
.crop-side .seg{display:flex}
.crop-side .seg button{flex:1;padding:0 6px}
.crop-prev{position:relative;overflow:hidden;width:100%;border-radius:var(--r-s);background:var(--sunk)}
.crop-prev>img{position:absolute;max-width:none}
.crop-state{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--ink-3)}
.crop-state .ico{width:15px;height:15px}
.crop-warn{font-size:13px;color:var(--danger)}

.editor{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start;margin-bottom:36px}
.ed-main>.hint{margin-top:10px}
.ed-panel{padding:22px;border-radius:var(--r-l);background:var(--surface)}
.ed-head h2{font-size:20px;overflow-wrap:anywhere}
.ed-file{margin-top:4px;font-size:13px;color:var(--ink-3);overflow-wrap:anywhere}
.ed-field{margin-top:20px}
.ed-field .seg{display:flex}
.ed-field .seg button{flex:1;padding:0 8px}
.ed-state{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:20px;font-size:13px;color:var(--ink-3)}
.ed-state .ico{width:15px;height:15px}
.ed-state .unsaved{flex-basis:100%;color:var(--danger);font-weight:500}
.ed-state .linkbtn{font-size:13px}
.ed-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.ed-actions .btn{flex:1}
.ed-more{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:13px}
.lib-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.lib-head .count{font-size:15px;font-weight:400;color:var(--ink-3)}
.search-wrap{position:relative;width:min(380px,100%)}
.toolbar .search-wrap{width:min(520px,100%)}
.search-wrap .ico{position:absolute;left:12px;top:50%;margin-top:-9px;color:var(--ink-3);pointer-events:none}
.search-wrap .input{padding-left:38px}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.lib-item{display:flex;flex-direction:column;min-width:0;padding:0 0 10px;border:0;border-radius:var(--r-m);background:var(--surface);color:inherit;text-align:left;cursor:pointer;overflow:hidden;box-shadow:0 1px 0 var(--line)}
.lib-item img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:var(--sunk);margin-bottom:8px}
.lib-cap,.lib-meta{padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-cap{font-size:13.5px;font-weight:500}
.lib-cap.is-empty{font-weight:400;font-style:italic;color:var(--ink-3)}
.lib-meta{font-size:12px;color:var(--ink-3)}
.lib-item:hover{box-shadow:0 0 0 2px var(--brand-soft)}
.lib-item[aria-current="true"]{box-shadow:0 0 0 3px var(--brand)}
.lib-tile{position:relative;display:flex;min-width:0}
.lib-tile>.lib-item{flex:1;min-width:0}
.lib-dl{position:absolute;top:8px;right:8px;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:6px;background:rgba(12,20,28,.72);color:#fff;text-decoration:none}
.lib-dl:hover{background:var(--brand-deep);color:#fff}
.lib-dl .ico{width:18px;height:18px;stroke-width:2}
.lib-dl.is-busy .ico{visibility:hidden}
.lib-dl.is-busy::after{content:"";position:absolute;width:16px;height:16px;border:2px solid #fff;border-color:#fff transparent #fff transparent;border-radius:50%;animation:spin .8s linear infinite}
.lib-busy{display:grid;place-items:center;min-height:150px;padding:12px;border:2px dashed var(--line-2);border-radius:var(--r-m);color:var(--ink-2);font-size:13px;text-align:center}
.library.is-over .lib-grid,.library.is-over .lib-empty{outline:3px dashed var(--accent);outline-offset:4px}
.lib-none{grid-column:1/-1;padding:14px 0;font-size:13.5px;color:var(--ink-3)}
.lib-pick{max-height:min(52vh,480px);overflow:auto;padding:4px;grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.lib-pick .lib-item{background:var(--tint)}
.pick-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:18px 0 14px}

/* ---------- verzending ---------- */
.run{padding:24px;border-radius:var(--r-l);background:var(--surface)}
.run-top{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin-bottom:18px}
.run-count{font-size:17px;font-weight:500;color:var(--ink-2)}
.run-count strong{margin-right:10px;font-size:46px;line-height:1;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:13.5px;color:var(--ink-2)}
.lg{display:inline-flex;align-items:center;gap:7px}
.lg i{width:11px;height:11px;border-radius:50%}
.lg .sent{background:var(--brand)}
.lg .fail{background:var(--danger)}
.lg .wait{box-shadow:inset 0 0 0 2px var(--dot-wait)}
.lg .retry{box-shadow:inset 0 0 0 2px var(--danger)}
.lg .now{background:#fff;box-shadow:inset 0 0 0 3px var(--brand)}
.run-next{font-size:15px;font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:right}
.fieldviz{position:relative;padding:16px 10px;border-radius:var(--r-m);background:var(--paper)}
.fieldviz svg{display:block;width:100%;height:auto}
.fieldviz .lane{fill:var(--lane)}
.fieldviz circle[data-s="w"],.fieldviz circle[data-s="g"]{fill:none;stroke:var(--dot-wait);stroke-width:1.5}
.fieldviz circle[data-s="g"]{stroke-dasharray:2 2}
.fieldviz circle[data-s="b"]{fill:#fff;stroke:var(--brand);stroke-width:3}
.fieldviz circle[data-s="v"]{fill:var(--brand)}
.fieldviz circle[data-s="m"]{fill:var(--danger)}
.fieldviz circle[data-s="r"]{fill:none;stroke:var(--danger);stroke-width:2}
.fieldviz .pulse{fill:none;stroke:var(--brand);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:ring 1.6s ease-out infinite;pointer-events:none}
@keyframes ring{from{transform:scale(1);opacity:.9}to{transform:scale(2.6);opacity:0}}
.field-tip{position:absolute;z-index:3;max-width:280px;padding:8px 11px;border-radius:6px;background:var(--ink);color:#fff;font-size:13px;line-height:1.4;pointer-events:none;box-shadow:var(--pop)}
.field-tip b{display:block;font-weight:500}
.field-tip span{display:block;color:#C9D3DB}
.run-foot{margin-top:14px;font-size:13.5px;color:var(--ink-2)}
.run-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.run-tab{display:inline-flex;flex-direction:column;align-items:flex-start;min-height:44px;padding:6px 14px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--surface);color:var(--ink-2);font-size:13px;text-align:left;cursor:pointer}
.run-tab b{color:var(--ink);font-weight:600;font-size:13.5px}
.run-tab[aria-selected="true"]{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset;color:var(--brand-deep)}
.run-cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:36px;margin-top:32px}
.run-cols h2{margin-bottom:6px}
.log,.fails{margin:0;padding:0;list-style:none}
.log li{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.log time{color:var(--ink-3);font-variant-numeric:tabular-nums}
.log .who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log .who b{font-weight:500}
.log .who span{color:var(--ink-3)}
.st-ok{color:var(--brand-deep);font-weight:500}
.st-fail{color:var(--danger);font-weight:500}
.st-retry{color:var(--warn-ink);font-weight:500}
.fails li{padding:12px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.fails .who{font-weight:500;overflow-wrap:anywhere}
.fails .who .muted{font-weight:400}
.fails .why{margin-top:2px;color:var(--ink-2);overflow-wrap:anywhere}
.fails .why code{font-size:12px;color:var(--ink-3)}
.fails .act{margin-top:6px}
.empty-line{padding:12px 0;font-size:13.5px;color:var(--ink-3)}
.list-sec{margin-top:36px}
.list-sec>h2{margin-bottom:12px}
.drafts{display:flex;flex-direction:column;gap:8px}
.draft-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;padding:14px 16px;border-radius:var(--r-m);background:var(--surface);box-shadow:0 1px 0 var(--line)}
.draft-row .d-main{flex:1 1 260px;min-width:0}
.draft-row b{display:block;font-weight:500;overflow-wrap:anywhere}
.draft-row .d-acts{display:flex;align-items:center;gap:16px}
.draft-row.is-current{box-shadow:0 0 0 2px var(--brand)}

/* ---------- tabellen ---------- */
.table-wrap{position:relative;overflow-x:auto;border-radius:var(--r-l);background:var(--surface);box-shadow:0 1px 0 var(--line)}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{padding:11px 14px;border-bottom:1px solid var(--line);background:var(--tint);font-size:12.5px;font-weight:500;color:var(--ink-2);text-align:left;white-space:nowrap}
.tbl td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl.hover tbody tr:hover td{background:var(--tint)}
.tbl tbody tr.is-sel td{background:var(--brand-tint)}
.tbl tbody tr.is-warn td{background:#FFFBEB}
.tbl .right{text-align:right}
.tbl .num{text-align:right}
.tbl td.muted{color:var(--ink-3)}
.tbl .sub{display:block;font-size:12.5px;color:var(--ink-3)}
.tbl .col-sel{width:44px;padding-right:0}
.rowbtn{display:block;max-width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.rowbtn b{font-weight:500}
.rowbtn:hover b{text-decoration:underline}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;white-space:nowrap}
.chip i{width:8px;height:8px;border-radius:50%}
.chip.actief{color:var(--brand-deep)}
.chip.actief i{background:var(--brand)}
.chip.afgemeld{color:var(--ink-2)}
.chip.afgemeld i{background:var(--ink-4)}
.chip.onbestelbaar{color:var(--danger)}
.chip.onbestelbaar i{background:var(--danger)}
.toolbar{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.toolbar-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.toolbar .hint{display:flex;align-items:center;gap:6px;margin:0}
.toolbar .hint .ico{width:15px;height:15px}
.bulkbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-bottom:12px;padding:10px 14px;border-radius:var(--r-m);background:var(--brand-tint);font-size:13.5px}
.bulkbar>b{font-weight:600}
.bulk-act{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.bulk-act label{font-weight:500}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-size:13.5px;color:var(--ink-2)}
.pager div{display:flex;gap:8px}

/* ---------- contact-venster en import ---------- */
.dc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin-top:18px}
.dc-grid .wide{grid-column:1/-1}
.dc-sub{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-3)}
.dc-sub>p{margin-bottom:10px;font-size:14px;font-weight:600}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px 0 10px;border:1px solid var(--line-2);border-radius:999px;font-size:13.5px;cursor:pointer}
.checks label:has(input:checked){border-color:var(--brand);background:var(--brand-tint);color:var(--brand-deep)}
.checks input{width:16px;height:16px;margin:0;accent-color:var(--brand)}
fieldset.plain{margin:0;padding:0;border:0;min-width:0}
fieldset.plain legend{margin-bottom:10px;padding:0;font-size:14px;font-weight:600}
.dc-warn{margin-top:8px;font-size:13.5px;color:var(--warn-deep)}
.steps{display:flex;flex-wrap:wrap;gap:8px 28px;margin:16px 0 26px;padding:0;list-style:none}
.steps li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-3)}
.steps li span{display:grid;place-items:center;width:30px;height:30px;border:1.5px solid var(--line-2);border-radius:50%;background:#fff;font-size:13.5px;font-weight:600}
.steps li span .ico{width:16px;height:16px}
.steps li.is-cur{color:var(--ink);font-weight:500}
.steps li.is-cur span{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-deep)}
.steps li.is-done{color:var(--ink)}
.steps li.is-done span{border-color:var(--brand);background:var(--brand);color:#fff}
.imp-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
.imp-file{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:24px}
.imp-file .f-main{flex:1;min-width:0}
.imp-file b{display:block;font-weight:500;overflow-wrap:anywhere}
.imp-cols h2{margin-bottom:6px}
.imp-cols .intro{margin-bottom:14px;color:var(--ink-2)}
.tbl .warntag{display:inline-block;margin-left:8px;padding:0 8px;border-radius:999px;background:var(--warn-bg);color:var(--warn-ink);font-size:11.5px;font-weight:500;white-space:nowrap}
.tbl .samples{max-width:280px;overflow:hidden;color:var(--ink-2);text-overflow:ellipsis;white-space:nowrap}
.tbl select.input{height:38px;min-width:190px}
.dupnote{margin-top:4px;font-size:12.5px;color:var(--danger)}
.imp-fields{padding:20px}
.imp-fields h2{font-size:16px;margin-bottom:12px}
.imp-fields ol{margin:0 0 14px;padding:0;list-style:none}
.imp-fields li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line-3);font-size:13.5px}
.imp-fields li:last-child{border-bottom:0}
.imp-fields li .src{display:inline-flex;align-items:center;gap:5px;color:var(--ink-3);text-align:right}
.imp-fields li .src.ok{color:var(--ink);font-weight:500}
.imp-fields li .src.req{color:var(--danger);font-weight:500}
.imp-fields li .src .ico{width:15px;height:15px;color:var(--brand)}
.imp-fields .hint+.hint{margin-top:8px}
.imp-check{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;margin-bottom:26px}
.imp-check .card{padding:20px 22px}
.imp-check .big{font-size:20px;font-weight:600}
.imp-check .card>p+p{margin-top:6px}
.imp-check .rules{margin-top:12px}
.imp-check .fld{margin-top:16px}
.res{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12.5px;font-weight:500;white-space:nowrap}
.res.new{background:var(--brand-tint);color:var(--brand-deep)}
.res.upd{background:var(--paper);color:var(--ink)}
.res.same{background:#fff;color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line)}
.res.skip{background:var(--danger-tint);color:var(--danger)}
.imp-done{max-width:640px;padding:26px 28px}
.imp-done .row{margin-top:20px}
.imp-done h2{display:flex;align-items:center;gap:10px}
.imp-done h2 .ico{width:26px;height:26px;color:var(--brand)}
.imp-done p{margin-top:10px}
.form-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:22px}

/* ---------- instellingen ---------- */
.settings-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start}
.snav{position:sticky;top:88px;margin:0;padding:0;list-style:none}
.snav a{display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:6px;color:var(--ink);font-size:14.5px;text-decoration:none}
.snav a:hover{background:var(--sunk);color:var(--ink)}
.snav a.on{background:var(--surface);color:var(--brand-deep);font-weight:500;box-shadow:0 1px 0 var(--line)}
.sections{display:flex;flex-direction:column;gap:18px;min-width:0}
.sec{display:flex;flex-wrap:wrap;gap:14px 40px;padding:26px 28px;scroll-margin-top:88px}
.sec-l{flex:1 1 220px;max-width:300px}
.sec-l .desc{margin-top:6px;font-size:13.5px;color:var(--ink-3)}
.sec-r{flex:999 1 480px;min-width:0}
.sec-r>*+*{margin-top:16px}
.subhead{margin:26px 0 12px!important;padding-top:18px;border-top:1px solid var(--line-3);font-size:14.5px;font-weight:600}
.save-row{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px 16px;padding:4px 0}
.logo-box{display:flex;align-items:center;flex-wrap:wrap;gap:16px}
.logo-prev{display:grid;place-items:center;min-width:160px;min-height:76px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-m);background:#fff}
.logo-prev img{max-height:60px;width:auto}
.logo-prev .name{font-size:17px;font-weight:700}
.color-row{display:flex;gap:8px}
.swatch{flex:none;width:44px;height:44px;padding:3px;border:1px solid var(--line-2);border-radius:var(--r-s);background:#fff;cursor:pointer}
.contrast{font-size:13.5px;color:var(--ink-3)}
.contrast.bad{color:var(--warn-deep)}
.mini-mail{max-width:460px;border:1px solid var(--line);border-radius:var(--r-m);background:#fff;overflow:hidden;font-family:Arial,Helvetica,sans-serif;color:#1B1B1B;font-size:13px;line-height:19px}
.mini-mail .mm-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid #EEF2F4}
.mini-mail .mm-logo img{max-height:40px;width:auto}
.mini-mail .mm-logo b{font-size:15px}
.mini-mail .mm-title{text-align:right;font-weight:700;font-size:14px}
.mini-mail .mm-title i{display:block;width:30px;height:3px;margin:5px 0 0 auto}
.mini-mail .mm-btn{padding:14px 16px}
.mini-mail .mm-btn span{display:inline-block;padding:9px 16px;border-radius:4px;font-weight:700}
.mini-mail .mm-foot{display:flex;flex-wrap:wrap;gap:8px 28px;padding:12px 16px;color:#fff;font-size:12px;line-height:18px;white-space:pre-line}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--surface);overflow:hidden}
.stepper button{display:grid;place-items:center;width:44px;height:42px;border:0;background:none;color:var(--brand-deep);font-size:20px;line-height:1;cursor:pointer}
.stepper button:hover{background:var(--brand-tint)}
.stepper button:disabled{color:var(--line-2);cursor:default;background:none}
.stepper output{display:grid;place-items:center;min-width:56px;height:42px;border-left:1px solid var(--line);border-right:1px solid var(--line);font-size:17px;font-weight:500;font-variant-numeric:tabular-nums}
.pw{display:flex;gap:8px}
.pw .input{flex:1;min-width:0}
.fchips{display:flex;flex-wrap:wrap;gap:8px}
.fchip{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border:1px solid var(--line);border-radius:6px;background:var(--tint);font-size:13.5px}
.fchip code,.codechip{color:var(--brand-deep)}
.codechip{padding:2px 8px;border-radius:4px;background:var(--brand-tint);font-family:var(--mono);font-size:12.5px}
.listbox{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.lrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:12px 14px;border-bottom:1px solid var(--line-3);font-size:14px}
.lrow:last-child{border-bottom:0}
.lrow .grow{flex:1 1 200px;min-width:0}
.lrow b{font-weight:500;overflow-wrap:anywhere}
.lrow .hint{margin:0}
.lrow .acts{display:flex;align-items:center;gap:16px;margin-left:auto}
.lrow .acts .linkbtn{font-size:13.5px}
.lrow.empty{color:var(--ink-3)}
.lrow form{display:flex;flex:1;gap:8px;min-width:0}
.lrow form .input{height:36px}
.avatar{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--sunk);color:var(--ink-2);font-size:13px;font-weight:600}
.avatar.inv{background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink-3)}
.tfa{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500}
.tfa .ico{width:15px;height:15px}
.tfa.on{color:var(--brand-deep)}
.tfa.off{color:var(--ink-3)}
.tfa.todo{color:var(--warn-deep)}
.rolebadge{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:var(--brand-tint);color:var(--brand-deep);font-size:13px;font-weight:500}
.u-who{flex:1 1 200px;min-width:0}
.u-who b{display:block}
.u-state{flex:1 1 200px;min-width:0}
.u-state .hint{display:block}
.u-role{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin-left:auto}
.u-role select{width:auto;height:36px}
.u-role .linkbtn{font-size:13px}
.copybox{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 10px;border-radius:var(--r-s);background:var(--tint);font-size:13px}
.copybox code{flex:1;min-width:0;overflow-wrap:anywhere;color:var(--ink)}
.code{display:flex;align-items:center;gap:12px;margin-top:6px;padding:10px 12px;border-radius:var(--r-s);background:#17212B;color:#E3EAF0;font:12.5px/1.5 var(--mono)}
.code code{flex:1;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;color:inherit}
.code button{flex:none;height:30px;padding:0 11px;border:1px solid #3B4B5A;border-radius:4px;background:none;color:#E3EAF0;font:500 13px var(--font);cursor:pointer}
.code button:hover{border-color:#7E8E9C}
.audit{margin:0;padding:0;list-style:none}
.audit li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--line-3);font-size:13.5px}
.audit li:last-child{border-bottom:0}
.audit time{color:var(--ink-3);font-variant-numeric:tabular-nums}
.audit b{font-weight:500}

/* ---------- dialogen en meldingen ---------- */
dialog{width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:0;border-radius:var(--r-l);background:var(--surface);color:var(--ink);box-shadow:var(--pop)}
dialog::backdrop{background:rgba(16,24,32,.5)}
dialog.dlg-wide{width:min(900px,calc(100vw - 32px))}
dialog.dlg-mid{width:min(680px,calc(100vw - 32px))}
.dlg{padding:26px}
.dlg-head{display:flex;align-items:flex-start;gap:12px}
.dlg-head h2{flex:1;min-width:0;font-size:22px;overflow-wrap:anywhere}
.dlg-head .iconbtn{margin:-6px -8px 0 0}
.dlg h2{font-size:22px}
.dlg>p,.dlg .lead{margin-top:8px;color:var(--ink-2)}
.dlg-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:24px}
.dlg-actions .left{margin-right:auto}
.dlg-error{margin-top:14px;padding:10px 12px;border-radius:var(--r-s);background:var(--danger-tint);color:#7A0610;font-size:13.5px}
.dsub{margin:22px 0 10px;padding-top:16px;border-top:1px solid var(--line-3);font-size:15px;font-weight:600}
.summary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 18px;margin:20px 0;padding:16px 18px;border-radius:var(--r-m);background:var(--tint);font-size:13.5px}
.summary dt{color:var(--ink-3)}
.summary dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.summary dd small{display:block;color:var(--ink-3);font-weight:400}
.start-opts{margin:0 0 12px;padding:0;border:0}
.start-opts legend{margin-bottom:8px;padding:0;font-weight:500;font-size:13.5px}
.radio-card{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-s);cursor:pointer}
.radio-card+.radio-card{margin-top:8px}
.radio-card input{margin:4px 0 0;accent-color:var(--brand)}
.radio-card:has(input:checked){border-color:var(--brand);background:var(--brand-tint)}
.radio-card b{display:block;font-weight:500}
.radio-card span{display:block;font-size:13.5px;color:var(--ink-2)}
.radio-card .when{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.when .input{height:38px;width:auto}
.toasts{position:fixed;left:50%;bottom:24px;z-index:100;display:grid;justify-items:center;gap:8px;transform:translateX(-50%);pointer-events:none}
.toast{max-width:calc(100vw - 32px);padding:11px 16px;border-radius:6px;background:var(--ink);color:#fff;font-size:13.5px;font-weight:500;box-shadow:var(--pop);animation:toast-in .2s ease-out}
.toast.is-error{background:var(--danger)}
.toast.out{opacity:0;transition:opacity .25s}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.acct-sec+.acct-sec{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-3)}
.acct-sec h3{margin-bottom:10px}

/* ---------- platformbeheer ---------- */
.pf-main{max-width:1380px;margin:0 auto;padding:28px 24px 56px}
.stats{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:22px}
.stat{flex:1 1 230px;min-width:0;padding:18px 20px}
.stat .k{font-size:13.5px;color:var(--ink-2)}
.stat .v{display:flex;align-items:center;gap:10px;margin-top:4px;font-size:30px;font-weight:600;line-height:1.2}
.stat .v .ico{width:24px;height:24px}
.stat .v .ok{color:var(--brand)}
.stat .v .bad{color:var(--danger)}
.stat .s{margin-top:6px;font-size:13px;color:var(--ink-3)}
.pf-sec{margin-bottom:22px;scroll-margin-top:84px}
.pf-sec-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 18px;padding:20px 22px 16px}
.pf-sec-head h2{font-size:19px}
.pf-sec-head .search-wrap{width:250px}
.pf-sec .tbl th:first-child,.pf-sec .tbl td:first-child{padding-left:22px}
.pf-sec .tbl th:last-child,.pf-sec .tbl td:last-child{padding-right:22px}
.org-cell{display:flex;align-items:center;gap:12px;min-width:220px}
.org-cell b{display:block;font-weight:500}
.st{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;white-space:nowrap}
.st .ico{width:15px;height:15px}
.st.ok{color:var(--brand-deep)}
.st.off{color:var(--ink-3)}
.st.bad{color:var(--danger)}
.st.warn{color:var(--warn-deep)}
.st i{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.usebar{width:130px;height:6px;margin-top:4px;border-radius:3px;background:#DDE4EE;overflow:hidden}
.usebar>div{height:6px;background:#2F4A73}
.usebar.warn{background:#FDEFC9}
.usebar.warn>div{background:#E0A019}
.usebar.crit{background:#F6D5D5}
.usebar.crit>div{background:#D03B3B}
.use-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:130px}
.near{display:inline-flex;align-items:center;gap:4px;margin-top:3px;font-size:12px;font-weight:500;color:var(--warn-deep)}
.near.crit{color:var(--danger)}
.near .ico{width:13px;height:13px}
.pf-cols{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px;align-items:start}
.pf-box{padding:22px}
.pf-box>h2{font-size:19px;margin-bottom:8px}
.fail-item{display:flex;gap:12px;padding:14px;border-radius:var(--r-m);background:var(--danger-tint)}
.fail-item+.fail-item{margin-top:10px}
.fail-item>.ico{color:var(--danger);margin-top:2px}
.fail-item p{margin:4px 0 10px;font-size:13.5px;color:var(--ink-2)}
.pf-log li{grid-template-columns:120px minmax(0,1fr)}
.lim-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.danger-zone{margin-top:22px;padding:16px 18px;border:1px solid #F3C2C6;border-radius:var(--r-m);background:#FFF8F7}
.danger-zone b{font-weight:600}
.danger-zone .row{margin-top:10px}
.danger-zone .row .input{flex:1 1 220px;width:auto}

/* ---------- kleinere schermen ---------- */
@media (max-width:1100px){
  .compose{grid-template-columns:minmax(0,1fr)}
  .editor{grid-template-columns:minmax(0,1fr)}
  .compose-preview{position:static}
  .mail-canvas{max-height:none}
  .imp-cols{grid-template-columns:minmax(0,1fr)}
  .pf-cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .settings-layout{grid-template-columns:minmax(0,1fr)}
  .snav{position:static;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
  .snav li{flex:none}
  .run-cols{grid-template-columns:1fr;gap:28px}
  .imp-check{grid-template-columns:1fr}
  .crop-grid{grid-template-columns:minmax(0,1fr)}
  .lim-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .appbar{gap:0 12px;padding:0 12px}
  .orgbtn{max-width:200px}
  .tabs{order:3;width:100%;height:46px;padding:0;border-top:1px solid var(--line)}
  .tabs a{padding:0 9px;font-size:14px}
  .user-name .un{display:none}
  .user-name .av{display:grid}
  main,.pf-main{padding:22px 16px 40px}
  h1{font-size:24px}
  .page-head{align-items:stretch}
  .head-side{align-items:stretch}
  .head-actions{justify-content:stretch}
  .head-actions>.btn,.head-actions>.menu-wrap{flex:1}
  .head-actions>.menu-wrap>.btn{width:100%}
  .readiness{text-align:left}
  .g2,.g-port,.dc-grid{grid-template-columns:1fr}
  .sec{padding:20px 18px}
  .run{padding:16px}
  .run-count strong{font-size:38px}
  .run-next{text-align:left}
  .ed-stage{height:52vh}
  .ed-panel{padding:18px}
  .dlg{padding:20px}
  .islot-main,.islot-main.half{width:100%}
  .col-hide{display:none}
  .u-role{flex:1 1 100%;flex-direction:row;align-items:center;gap:14px;margin-left:52px}
  .pf-bar{position:static;padding:10px 16px 0;gap:4px 12px}
  .pf-user{order:2;flex:1 1 100%;margin-left:0;justify-content:flex-start;flex-wrap:wrap;gap:4px 16px}
  .tnav{order:3;flex:1 1 100%;min-width:0;margin:0 -12px}
  .pf-sec-head>.row{flex:1 1 100%;min-width:0}
  .pf-sec-head .search-wrap{width:100%}
  .chooser{padding:30px 16px 40px}
}
@media (max-width:420px){
  .tabs a{padding:0 7px;font-size:13.5px}
  .tabs a[aria-current="page"]::after{left:4px;right:4px}
  .lim-grid{grid-template-columns:1fr}
  .audit li{grid-template-columns:minmax(0,1fr);gap:2px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .fieldviz .pulse{display:none}
}