/* Ondernemerspas app — stijl uit het ontwerp (App-01 … App-65). */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:#D9DCE3;color:#0B0C10;font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.m{font-family:'JetBrains Mono',ui-monospace,monospace}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #2433FF;outline-offset:2px}
input::placeholder{color:var(--grijs)}
[hidden]{display:none!important}

/* veilige randen: in de browser van iOS zelf, in de native app (Flux) van de
   shell, want daar geeft env() in een WebView 0 */
:root{--veilig-boven:env(safe-area-inset-top,0px);--veilig-onder:env(safe-area-inset-bottom,0px)}
html.flux-app{--veilig-boven:var(--flux-safe-area-inset-top,0px);--veilig-onder:var(--flux-safe-area-inset-bottom,0px)}
/* op een tabpagina zweeft de native tabbalk over de onderkant */
html.flux-app.met-tabs .scherm{padding-bottom:calc(var(--veilig-onder) + 76px)}
/* In de app selecteer je geen tekst door lang te drukken: dat voelt als een
   webpagina. Invoer kan altijd; verder alleen wat .selecteerbaar heeft
   (een uitnodigingslink, een chatbericht). In een gewone browser blijft
   selecteren gewoon werken. */
html.flux-app body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.flux-app :is(input,textarea,[contenteditable],.selecteerbaar),html.flux-app .selecteerbaar *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
/* de statusbalk van de telefoon: inhoud schuift eronder door, dus een
   doorschijnende strook erachter, zoals in een native app */
html.flux-app body::before{content:"";position:fixed;top:0;left:0;right:0;height:var(--veilig-boven);z-index:55;background:rgba(238,240,244,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html.flux-app.donker body::before{background:rgba(11,12,16,.86)}

/* één telefoonscherm, gecentreerd op een groot scherm */
.scherm{width:100%;max-width:430px;min-height:100vh;min-height:100dvh;margin:0 auto;background:var(--papier);display:flex;flex-direction:column;position:relative;overflow:hidden;overflow:clip;padding-top:var(--veilig-boven);padding-bottom:var(--veilig-onder)}
.scherm.donker{background:#0B0C10;color:#EEF0F4}
@media (min-width:600px){body{padding:24px 0}.scherm{min-height:844px;border-radius:36px;box-shadow:0 30px 80px rgba(11,12,16,.25)}}

.kop{padding:20px 20px 0;display:flex;align-items:center;justify-content:space-between}
.terug{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--inkt);display:flex;align-items:center;justify-content:center}
.donker .terug{border-color:#3A3D46}
.sluit{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.stap{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--grijs)}
.voortgang{padding:14px 20px 0;display:flex;gap:5px}
.voortgang span{flex:1 1 0;height:4px;border-radius:2px;background:var(--papier-2)}
.voortgang span.aan{background:#2433FF}
.donker .voortgang span{background:#2A2C34}.donker .voortgang span.aan{background:#8E97FF}

.blok{padding:28px 24px 0}
h1{margin:0;font-weight:900;font-size:36px;line-height:.95;letter-spacing:-.05em}
h1.groot{font-size:44px;line-height:.9;letter-spacing:-.056em}
h1 .accent{color:var(--blauw-tekst)}
.lead{margin:12px 0 0;font-size:16px;line-height:1.5;color:var(--inkt-2)}
.donker .lead{color:#A8ACB6}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--blauw-tekst)}
.donker .eyebrow{color:#8A8E99}
.voet{margin-top:auto;padding:24px 24px 30px;display:flex;flex-direction:column;gap:10px}
.knop{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:60px;padding:0 22px;border:0;border-radius:14px;background:#2433FF;color:#FFFFFF;font:inherit;font-weight:800;font-size:17px;cursor:pointer;transition:translate .2s cubic-bezier(.16,.84,.24,1)}
.knop:active{translate:0 2px}
.knop.tussen{justify-content:space-between}
.knop[disabled],.knop[aria-disabled=true]{background:var(--knop-uit);cursor:not-allowed}
.knop2{display:flex;align-items:center;justify-content:center;width:100%;height:56px;border-radius:14px;border:1.5px solid var(--inkt);background:transparent;color:inherit;font:inherit;font-weight:700;font-size:16px;cursor:pointer}
.link{min-height:44px;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--blauw-tekst);background:none;border:0;cursor:pointer;width:100%}
.zacht{font-size:10px;letter-spacing:.06em;color:var(--grijs);text-align:center;margin:0}
.kaart{background:var(--wit);border:1.5px solid var(--inkt);border-radius:18px;overflow:hidden}
.kaart .boven{padding:18px 18px 14px}
.kaart .onder{border-top:2px dashed var(--inkt);padding:14px 18px 16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
.lbl{font-size:9.5px;letter-spacing:.12em;color:var(--grijs)}
.waarde{font-weight:700;font-size:15px}
.tip{border:1.5px dashed var(--lijn-2);border-radius:18px;padding:18px;display:flex;gap:14px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--inkt-2)}
.fout{margin:0;font-size:12px;color:var(--bad-tekst)}
.veld{margin-top:8px;width:100%;height:72px;padding:0 20px;border:1.5px solid var(--inkt);border-radius:14px;background:var(--wit);font-family:'JetBrains Mono',monospace;font-size:30px;font-weight:700;letter-spacing:.32em;color:var(--inkt)}
.veld.klein{height:56px;font-size:17px;letter-spacing:0;font-family:'Inter Tight',sans-serif;font-weight:600}
.bd{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:6px;font-size:13px;font-weight:700}
.bd.ok{background:var(--ok-bg);color:var(--ok-tekst)}.bd.bad{background:var(--bad-bg);color:var(--bad-tekst)}.bd.warn{background:var(--warn-bg);color:var(--warn-tekst)}
.lijst{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.lijst li{display:flex;gap:14px;align-items:flex-start}
.nr{width:30px;height:30px;flex-shrink:0;border-radius:9px;background:var(--inkt);color:var(--op-inkt);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.nr.blauw{background:#2433FF}
.lijst.kaart{border-radius:18px}
.lijst b{display:block;font-size:16px}.lijst small{display:block;font-size:14px;color:var(--inkt-2);line-height:1.45}
.vink{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45;cursor:pointer}
.vink input{width:22px;height:22px;margin:1px 0 0;accent-color:#2433FF;flex-shrink:0}
.vink a{color:var(--blauw-tekst);font-weight:700}

/* controle (donker) */
.checks{margin:18px 24px 0;padding:0;list-style:none;border-radius:20px;background:#15161C;border:1px solid #23252D}
.checks li{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid #23252D}
.checks li:last-child{border-bottom:0}
.checks b{display:block;font-weight:700;font-size:16px}.checks small{display:block;font-size:13px;color:#8A8E99}
.checks .st{font-size:11px;font-weight:700;letter-spacing:.1em}
.ok-rond{width:36px;height:36px;border-radius:50%;background:#3DFF8F;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.draai{width:36px;height:36px;border-radius:50%;border:3px solid #2A2C34;border-top-color:#FFB020;animation:draai .9s linear infinite;flex-shrink:0}
@keyframes draai{to{transform:rotate(360deg)}}
.banier{margin:16px 24px 0;padding:16px 18px;border-radius:16px;background:#3DFF8F;color:#0B0C10;display:flex;gap:12px;align-items:center;font-weight:800;font-size:16px}

/* pas */
.pas{width:220px;height:290px;margin:0 auto;background:#2433FF;color:#FFFFFF;border-radius:20px;padding:18px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.pas .streep{position:absolute;top:0;right:14px;width:16px;height:100%;background:repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 4px,transparent 4px 8px)}
.pas .chip{margin-top:14px;width:30px;height:22px;border-radius:5px;border:1.2px solid rgba(255,255,255,.8)}
.pas .naam{font-weight:900;font-size:34px;line-height:.88;letter-spacing:-.055em;margin-top:2px}
.pas .eh{font-size:8px;font-weight:700;letter-spacing:.1em;padding:2px 5px;border:1.2px solid #FFFFFF;border-radius:4px}
.pas .rij{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-right:20px}
.pas .rij .lbl{color:#C7CBFF}.pas .rij .waarde{font-size:13px}

/* pinpad */
.punten{display:flex;gap:14px;justify-content:center;margin:26px 0 0}
.punten span{width:16px;height:16px;border-radius:50%;border:2px solid var(--inkt)}
.punten span.vol{background:var(--inkt)}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 34px}
.pinpad button{height:64px;border:0;border-radius:16px;background:var(--wit);font:inherit;font-size:26px;font-weight:700;color:var(--inkt);cursor:pointer}
.pinpad button.leeg{background:transparent;cursor:default}
.pinpad button:active{background:var(--papier-2)}
.schud{animation:schud .4s}
@keyframes schud{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

.proef{margin:14px 24px 0;padding:10px 12px;border-radius:12px;background:var(--warn-bg);color:var(--warn-tekst);font-size:11px;display:flex;flex-direction:column;gap:6px}
.proef select{font:inherit;padding:6px;border-radius:8px;border:1px solid var(--warn-rand);background:var(--wit)}
.tabs{display:flex;justify-content:space-around;padding:10px 12px 18px;border-top:1px solid var(--lijn);background:var(--wit);margin-top:auto}
.tabs a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;letter-spacing:.08em;font-weight:700;color:var(--grijs)}
.tabs a.aan{color:var(--blauw-tekst)}

/* inloggen (App-10, App-11, App-38) */
.verzoek{display:grid;grid-template-columns:1fr auto;gap:2px 12px;margin:18px 20px 0;padding:16px 18px;border-radius:18px;background:#0B0C10;color:#FFFFFF;animation:binnen .35s cubic-bezier(.16,.84,.24,1)}
.verzoek .eyebrow{grid-column:1/-1;color:#8E97FF}
.verzoek b{font-size:18px;letter-spacing:-.02em}
.verzoek small{grid-column:1;font-size:13px;color:#A8ACB6}
.verzoek .pijl{grid-column:2;grid-row:2/4;align-self:center;font-size:11px;font-weight:700;letter-spacing:.08em;color:#3DFF8F}
@keyframes binnen{from{opacity:0;translate:0 -8px}}
.verzoekkaart{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;padding:18px 20px 22px;border-bottom:5px solid #2433FF}
.verzoekkaart .waarde{font-size:14px;margin-top:2px}
.vraag{margin:26px 0 0;font-weight:900;font-size:22px;letter-spacing:-.04em}
.getallen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.getallen button{height:92px;border:1.5px solid var(--inkt);border-radius:18px;background:var(--wit);font-size:40px;font-weight:800;color:var(--inkt);cursor:pointer}
.getallen button:active{background:var(--papier-2)}
.knop2.rood{border-color:var(--bad-tekst);color:var(--bad-tekst)}
.knop.rood{background:#B42318}
.zeker{display:flex;flex-direction:column;gap:10px}
.zeker p{margin:0;font-size:15px;line-height:1.5;color:var(--inkt-2)}
.rondje{width:56px;height:56px;border-radius:50%;background:var(--papier-2);display:flex;align-items:center;justify-content:center}
.fout.midden{text-align:center}
.hint{margin:16px 0 0;padding:14px 16px;border-radius:14px;background:var(--blauw-2);border:1px solid var(--blauw-rand);color:var(--blauw-2-tekst);font-size:14px;line-height:1.5}

/* machtigingen (App-12, 17, 46, 47, 51, 53) */
.schakel{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:16px;padding:4px;border-radius:14px;border:1.5px solid var(--inkt);background:var(--wit)}
.schakel a{height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
.schakel a.aan{background:var(--inkt);color:var(--op-inkt)}
.bedrijfwissel{display:flex;gap:6px;overflow-x:auto;margin-top:12px}
.bedrijfwissel a{flex-shrink:0;padding:6px 12px;border-radius:999px;border:1.5px solid var(--lijn-2);font-size:13px;font-weight:700}
.bedrijfwissel a.aan{border-color:#2433FF;color:var(--blauw-tekst);background:var(--blauw-2)}
.rijen{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.rij-kaart{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;border:1.5px solid var(--inkt);background:var(--wit)}
.rij-kaart b{display:block;font-size:16px}.rij-kaart small{display:block;font-size:10.5px;letter-spacing:.06em;color:var(--grijs);margin-top:2px}
.rij-kaart.zacht-rand{border-style:dashed;border-color:var(--lijn-2)}
.logo-blok,.av-rond{width:44px;height:44px;flex-shrink:0;border-radius:10px;background:#2433FF;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px}
.av-rond{border-radius:50%}
.av-rond.donker{background:var(--inkt)}.av-rond.licht{background:var(--blauw-2);color:var(--blauw-tekst)}
.toevoegen{display:flex;align-items:center;justify-content:center;height:56px;margin-top:12px;border-radius:16px;border:1.5px dashed var(--inkt);font-weight:800;font-size:16px}
.link.klein{width:auto;min-height:32px;font-size:10px}.link.rood{color:var(--bad-tekst)}
.venster-app{position:fixed;inset:0;background:rgba(11,12,16,.42);display:flex;align-items:flex-end;justify-content:center;z-index:30}
.venster-blad{width:100%;max-width:430px;background:var(--papier);border-radius:24px 24px 0 0;padding:24px 0 26px}
.venster-blad .vraag,.venster-blad .lead{padding:0 24px}
.soortkeuze{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.soortkeuze button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;border-radius:14px;border:1.5px solid var(--lijn-2);background:var(--wit);font:inherit;text-align:left;cursor:pointer}
.soortkeuze button b{font-size:16px}.soortkeuze button small{font-size:9.5px;letter-spacing:.06em;color:var(--grijs)}
.soortkeuze button.aan{border-color:#2433FF;box-shadow:0 0 0 1px #2433FF}
.vinkrij{cursor:pointer}
.vinkrij input{width:22px;height:22px;accent-color:#2433FF;flex-shrink:0;margin:0}
.linkvak{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--wit);border:1px dashed var(--lijn-2);font-size:11.5px;word-break:break-all}
.klantrij{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--lijn)}
.klantrij:last-child{border-bottom:0}
.klantrij b{display:block;font-size:16px}.klantrij small{display:block;font-size:10.5px;letter-spacing:.06em;color:var(--grijs);margin-top:2px}
.verzoek.licht{background:var(--wit);color:var(--inkt);border:1.5px solid var(--inkt)}
.verzoek.licht .eyebrow{color:var(--blauw-tekst)}.verzoek.licht small{color:var(--grijs)}.verzoek.licht .pijl{color:var(--blauw-tekst)}

/* activiteit, profiel, abonnement (App-14, 19, 21, 42, 52) */
.veilig{display:flex;align-items:center;gap:16px;margin-top:16px;padding:18px;border-radius:18px;background:var(--vlak-donker);color:#FFFFFF}
.veilig .schild{width:52px;height:52px;border-radius:14px;background:#3DFF8F;color:var(--inkt);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px;flex-shrink:0}
.veilig b{display:block;font-size:17px}.veilig small{display:block;font-size:10.5px;letter-spacing:.08em;color:#A8ACB6;margin-top:3px}
.tijdlijn{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.tijdlijn li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;position:relative}
.tijdlijn li::before{content:"";position:absolute;left:10px;top:24px;bottom:-14px;width:2px;background:var(--papier-2)}
.tijdlijn li:last-child::before{display:none}
.bolletje{width:20px;height:20px;border-radius:50%;border:2px solid var(--inkt);background:var(--wit);margin-top:12px;position:relative}
.bolletje::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#2433FF}
.ok .bolletje::after{background:#16C266}.bad .bolletje::after{background:#F04438}
.tl-kaart{padding:12px 14px;border-radius:14px;border:1.5px solid var(--inkt);background:var(--wit)}
.bad .tl-kaart{background:var(--bad-bg);border-color:var(--bad-tekst)}
.tl-kaart b{display:block;font-size:15.5px}.tl-kaart small{display:block;font-size:10px;letter-spacing:.08em;color:var(--grijs);margin-top:3px}
.bad .tl-kaart b,.bad .tl-kaart small{color:var(--bad-tekst)}
.abo-kaart{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:16px 18px;border-radius:16px;background:#2433FF;color:#FFFFFF;font-size:20px}
.abo-kaart b{display:block;font-size:16px}.abo-kaart small{display:block;font-size:10px;letter-spacing:.06em;opacity:.85;margin-top:3px}
.lijstkaart{margin-top:8px;border-radius:16px;border:1.5px solid var(--inkt);background:var(--wit);overflow:hidden}
.lijstkaart>a,.lijstkaart>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--lijn);font-weight:700;font-size:15.5px}
.lijstkaart>*:last-child{border-bottom:0}
.lijstkaart small{display:block;font-weight:500;font-size:9.5px;letter-spacing:.08em;color:var(--grijs);margin-top:2px}
.abo-groot{margin-top:16px;padding:18px;border-radius:20px;background:#2433FF;color:#FFFFFF}
.abo-groot .prijs{font-weight:900;font-size:46px;letter-spacing:-.05em;margin-top:8px}
.abo-groot .prijs small{font-size:12px;letter-spacing:.06em;font-weight:500}
.abo-groot small{display:block;font-size:9.5px;letter-spacing:.08em;opacity:.8;margin-top:3px}
.abo-scheur{margin:14px -18px;border-top:2px dashed rgba(255,255,255,.5)}
.knop.wit{background:#FFFFFF;color:#2433FF;height:48px}
.totaal{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding:16px 18px;border-radius:14px;background:var(--papier-2)}
.totaal span{font-size:11px;letter-spacing:.1em}.totaal b{font-size:22px;letter-spacing:-.03em}
.bon{margin-top:14px;padding:16px 18px;font-family:'JetBrains Mono',monospace;font-size:13px}
.bon>div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--lijn)}
.bon .zachter{color:var(--grijs)}.bon .totaalrij{font-weight:800;font-size:15px;border-bottom:0;border-top:2px dashed var(--inkt)}
.keuzes-app{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.keuzes-app label{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:16px;border:1.5px solid var(--lijn-2);background:var(--wit);cursor:pointer}
.keuzes-app label.aan{border-color:#2433FF;background:var(--blauw-2)}
.keuzes-app input{width:20px;height:20px;accent-color:#2433FF;margin:2px 0 0;flex-shrink:0}
.keuzes-app b{display:block;font-size:16px}.keuzes-app small{display:block;font-size:13.5px;color:var(--inkt-2);margin-top:3px;line-height:1.45}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Hulp (App-20) */
.hulp-status{margin-top:18px;display:flex;align-items:center;gap:10px;padding:14px 16px;border:1.5px solid var(--inkt);border-radius:14px;background:var(--wit);font-size:15px}
.hulp-status .bolletje{width:10px;height:10px;border-radius:50%;flex:none}
.hulp-status .m{margin-left:auto;font-size:10px;letter-spacing:.1em;color:var(--grijs)}
.hulp-faq>div{display:block;padding:0}
.hulp-faq button{all:unset;box-sizing:border-box;width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 18px;font-weight:800;font-size:15.5px;cursor:pointer}
.hulp-faq button:focus-visible{outline:2px solid #2433FF;outline-offset:-2px}
.hulp-faq .plus{width:28px;height:28px;flex:none;border:1.5px solid var(--inkt);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700}
.hulp-faq .antwoord{padding:0 18px 16px;font-weight:500;font-size:14.5px;line-height:1.5;color:var(--inkt-2)}
.hulp-faq .antwoord p{margin:0 0 10px}
.hulp-contact{margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hulp-contact>*{display:flex;flex-direction:column;gap:6px;padding:16px;border:1.5px solid var(--inkt);border-radius:16px;background:var(--wit);color:var(--inkt)}
.hulp-contact .blauw{background:#2433FF;border-color:#2433FF;color:#FFFFFF}
.hulp-contact b{font-size:17px;margin-top:8px}
.hulp-contact small{font-size:9.5px;letter-spacing:.06em;opacity:.8}
.gesprek{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.bubbel{max-width:86%;align-self:flex-end;padding:12px 14px;border-radius:16px 16px 4px 16px;background:var(--vlak-donker);color:#FFFFFF}
.bubbel.wij{align-self:flex-start;border-radius:16px 16px 16px 4px;background:var(--wit);color:var(--inkt);border:1.5px solid var(--inkt)}
.bubbel p{margin:0;font-size:14.5px;line-height:1.45;white-space:pre-wrap}
.bubbel small{display:block;margin-top:6px;font-size:9.5px;letter-spacing:.08em;opacity:.7}
.chat-veld{margin-top:8px;width:100%;padding:14px 16px;border:1.5px solid var(--inkt);border-radius:14px;background:var(--wit);font:inherit;font-size:15px;resize:vertical}
.app-melding{margin:16px 0 0;padding:12px 16px;border-radius:14px;background:var(--warn-bg);border:1.5px solid var(--warn-rand);font-weight:700;font-size:14px;line-height:1.4}

/* Sad-45 geen verbinding: een laag over elk scherm */
.offline{position:fixed;inset:0;z-index:50;background:var(--papier);display:flex;flex-direction:column;max-width:480px;margin:0 auto}
.opnieuw{margin-top:22px;display:flex;align-items:center;gap:12px;padding:16px 18px;border:1.5px solid var(--inkt);border-radius:14px;background:var(--wit);font-size:11px;letter-spacing:.08em;font-weight:700}
.draaier{width:16px;height:16px;border-radius:50%;border:2px solid var(--lijn-2);border-top-color:#2433FF;animation:draai 1s linear infinite}
@keyframes draai{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.draaier{animation:none}}
.tip-blauw{margin-top:16px;padding:14px 16px;border-radius:14px;background:var(--blauw-2);border:1px solid var(--blauw-rand);color:var(--blauw-2-tekst);font-size:14px;line-height:1.45}
.rondje.blauw{background:var(--blauw-2)}
/* Sad-65 toast */
.toast{position:fixed;top:calc(14px + var(--veilig-boven));left:50%;transform:translateX(-50%);z-index:60;width:min(92vw,420px);display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:16px;background:#0B0C10;color:#FFFFFF;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:opacity .3s, transform .3s}
.toast.weg{opacity:0;transform:translate(-50%,-10px)}
/* een melding is om te lezen, niet om aan te tikken: hij ligt over de terugknop */
.toast{pointer-events:none}
.toast b{display:block;font-size:15px}.toast small{display:block;font-size:13px;opacity:.8;margin-top:2px}
.toast-vink{width:30px;height:30px;border-radius:50%;background:#3DFF8F;display:flex;align-items:center;justify-content:center;flex:none}
/* Sad-63 */
.versievak{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;padding:18px;border-radius:16px;background:#1A1B22}
.versievak span{display:block;font-size:9.5px;letter-spacing:.1em;opacity:.6}.versievak b{display:block;margin-top:4px;font-size:15px}
/* Sad-64, Sad-62 */
.punten-lijst>div{display:block}.punten-lijst b{display:block;font-size:15.5px}.punten-lijst small{font-size:13px!important;letter-spacing:0!important;font-weight:500!important;color:var(--inkt-2)!important;margin-top:4px!important}
.melding-voorbeeld{margin-top:22px;display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:16px;background:var(--wit);box-shadow:0 8px 24px rgba(11,12,16,.12)}
.melding-voorbeeld b{display:block;font-size:14px}.melding-voorbeeld small{display:block;font-size:13px;color:var(--inkt-2);margin-top:2px;line-height:1.35}
.melding-voorbeeld .m{margin-left:auto;font-size:10px;color:var(--grijs)}
.logo-blokje{width:34px;height:34px;border-radius:9px;background:#2433FF;flex:none}
/* Sad-50 wisselen */
.bedrijfknop{all:unset;cursor:pointer;font-size:10.5px;letter-spacing:.12em;color:var(--inkt-2);font-weight:700;padding:4px 0}
.bedrijfknop:focus-visible{outline:2px solid #2433FF;outline-offset:2px;border-radius:4px}
.blad-achter{position:fixed;inset:0;z-index:40;background:rgba(11,12,16,.45);display:flex;align-items:flex-end;justify-content:center}
.blad{width:100%;max-width:480px;background:var(--papier);border-radius:24px 24px 0 0;padding:12px 22px calc(24px + var(--veilig-onder))}
.greep{display:block;width:40px;height:5px;border-radius:3px;background:var(--lijn-2);margin:0 auto 14px}
.blad h2{font-size:24px;letter-spacing:-.03em;margin:0 0 14px}
.bedrijfrij{display:flex;align-items:center;gap:12px;padding:14px;margin-top:8px;border:1.5px solid var(--lijn-2);border-radius:16px;background:var(--wit);color:var(--inkt)}
.bedrijfrij.nu{border-color:#2433FF;box-shadow:0 0 0 1px #2433FF inset}
.bedrijfrij b{display:block;font-size:15.5px}.bedrijfrij small{display:block;font-size:9.5px;letter-spacing:.08em;color:var(--grijs);margin-top:2px}
.bedrijf-ini{width:38px;height:38px;border-radius:10px;background:var(--inkt);color:var(--op-inkt);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;flex:none}
.bedrijfrij.nu .bedrijf-ini{background:#2433FF}
.nu-label{margin-left:auto;font-size:10px;font-weight:800;color:var(--blauw-tekst)}
.bedrijfrij .bd{margin-left:auto}
.bedrijf-erbij{display:flex;justify-content:center;margin-top:10px;padding:15px;border:1.5px dashed var(--inkt);border-radius:16px;font-weight:800;color:var(--inkt)}
/* Sad-43 stempel */
.stempel{position:absolute;right:18px;top:62px;transform:rotate(-12deg);padding:6px 12px;border:2.5px solid #B42318;border-radius:8px;color:#B42318;background:#FFFFFF;font-size:15px;font-weight:900;letter-spacing:.08em}
/* Sad-44 */
.rondje.geel{background:var(--warn-bg)}
.wijzigvak{margin-top:18px;padding:14px 16px;border:1.5px solid var(--inkt);border-radius:14px;background:var(--wit)}
.wijzigvak .m{font-size:9.5px;letter-spacing:.1em;color:var(--grijs)}
.wijzigvak p{margin:8px 0 0;font-size:15px}.wijzigvak s{color:var(--grijs)}
.verzoek.let-op .eyebrow{color:#FF8A7A}.verzoek.let-op .pijl{color:#FF8A7A}

/* Sad-55/56 */
.keuzelijst{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.keuzerij{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:14px;align-items:flex-start;padding:16px;border:1.5px solid var(--inkt);border-radius:16px;background:var(--wit);color:var(--inkt);width:100%}
.keuzerij:focus-visible{outline:2px solid #2433FF;outline-offset:2px}
.keuzerij b{display:block;font-size:16px}.keuzerij small{display:block;font-size:13px;color:var(--inkt-2);margin-top:3px;line-height:1.4}
.keuze-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;font-size:18px;font-weight:900}
.keuze-ico.blauw{background:#2433FF;color:#FFFFFF}.keuze-ico.zwart{background:var(--inkt);color:var(--op-inkt)}.keuze-ico.oranje{background:#FFB020;color:#0B0C10}.keuze-ico.groen{background:#3DFF8F;color:#0B0C10}
.bewijslijst{margin-top:18px}
.bewijslijst label{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--lijn);cursor:pointer;position:relative}
.bewijslijst label:last-child{border-bottom:0}
.bewijslijst label.optioneel{border:1.5px dashed #2433FF;border-radius:12px;margin:6px}
.bewijslijst b{display:block;font-size:15px}.bewijslijst small{display:block;font-size:12.5px;color:var(--grijs);margin-top:2px}
.bewijslijst .bestandsnaam{font-size:10.5px;color:var(--ok-tekst)}
.verborgen-bestand{position:absolute;inset:0;opacity:0;cursor:pointer}

/* App-18 */
.kiesknop{all:unset;cursor:pointer;font-size:10px;font-weight:800;color:var(--blauw-tekst);padding:6px 8px;border-radius:8px}
.kiesknop.aan{background:#2433FF;color:#FFFFFF}
.kiesknop:focus-visible{outline:2px solid #2433FF;outline-offset:2px}

/* Sad-58 */
.overstap-datum{margin-top:8px;display:flex;gap:10px;align-items:center}
.overstap-datum .veld{margin-top:0;flex:1}
.overstap-datum .bd{white-space:nowrap;flex:none}
/* groen vlak: het vinkje is altijd inkt, ook in donker */
.ok-rond,.toast-vink,.banier{color:#0B0C10}

/* geen dubbeltik-zoom, en knoppen reageren meteen */
html{touch-action:manipulation}