/* Ontwerp — "officieel, maar van jou".
De beeldtaal van een paspoort (perforatie, microtekst, de machineleesbare
strook, stempels) in een stevige, eigentijdse grafische stijl. Papier en
inkt, één blauw dat iets betekent, groen alleen voor "het klopt".
Deze laag komt na app.css en bepaalt het uiterlijk; app.css de opbouw. */
/* Kleuren zijn betekenis, geen waarden: elk scherm gebruikt deze tokens, en
donker is dezelfde set omgedraaid. Inkt is wat schrijft en wat je indrukt
(tekst, randen, de zwarte knop); in donker wordt inkt licht en draait een
inktvlak mee. Een vlak dat altijd donker hoort te zijn (een kaartje met een
live verzoek, je eigen chatbericht) gebruikt --vlak-donker. */
:root{
--papier:#F3F2EE;--papier-2:#E9E7E1;--wit:#FFFFFF;
--inkt:#0B0C10;--inkt-2:#3A3C44;--grijs:#6F727B;--op-inkt:#FFFFFF;
--lijn:rgba(11,12,16,.11);--lijn-2:rgba(11,12,16,.22);
--blauw:#2433FF;--blauw-tekst:#2433FF;--blauw-2:#E6E8FF;--blauw-2-tekst:#1A2299;--blauw-rand:#C7CBFF;
--groen:#3DFF8F;--rood:#E2372B;--geel:#FFB020;
--ok-bg:#DFFFEC;--ok-tekst:#0B6B37;
--warn-bg:#FFF3DA;--warn-tekst:#8A5300;--warn-rand:#F2D79B;
--bad-bg:#FFE3DF;--bad-tekst:#B42318;
--vlak-donker:#0B0C10;--knop-uit:#C9C7C0;--knop-uit-2:#B4B2AA;--blad:var(--papier);
--buiten:#DCDAD3;
--r:20px;--r-groot:28px;
--schaduw:0 1px 0 rgba(11,12,16,.04),0 18px 40px -24px rgba(11,12,16,.35);
color-scheme:light;
}
:root.donker,.scherm.donker{
--papier:#0B0C10;--papier-2:#1A1B21;--wit:#15161C;
--inkt:#F3F2EE;--inkt-2:#B4B7C0;--grijs:#8C8F98;--op-inkt:#0B0C10;
--lijn:rgba(255,255,255,.08);--lijn-2:rgba(255,255,255,.17);
--blauw-tekst:#9AA2FF;--blauw-2:rgba(142,151,255,.14);--blauw-2-tekst:#C7CBFF;--blauw-rand:rgba(142,151,255,.35);
--rood:#FF6B5E;
--ok-bg:rgba(61,255,143,.12);--ok-tekst:#6CFFAE;
--warn-bg:rgba(255,176,32,.13);--warn-tekst:#FFC75A;--warn-rand:rgba(255,176,32,.35);
--bad-bg:rgba(255,107,94,.14);--bad-tekst:#FF8A7A;
--vlak-donker:#1C1D24;--knop-uit:#2A2C33;--knop-uit-2:#3A3C44;--blad:#16171E;
--buiten:#050506;
--schaduw:0 0 0 1px rgba(255,255,255,.06),0 18px 40px -26px rgba(0,0,0,.9);
color-scheme:dark;
}
body{background:var(--buiten)}
.scherm{background:var(--papier);color:var(--inkt)}
.scherm.donker{background:#0B0C10;color:#F3F2EE}
html.flux-app body::before{background:rgba(243,242,238,.86)}
::selection{background:var(--blauw);color:#fff}
/* ---------- typografie ---------- */
h1{font-size:44px;line-height:.9;letter-spacing:-.058em;font-weight:900}
h1.groot{font-size:58px;line-height:.86;letter-spacing:-.065em}
h1 .accent{color:var(--blauw-tekst)}
.donker h1 .accent{color:#8E97FF}
.lead{margin-top:16px;font-size:17px;line-height:1.45;color:var(--inkt-2);letter-spacing:-.01em;max-width:34ch}
.donker .lead{color:#A3A6AF}
.eyebrow,.stap{display:inline-flex;align-items:center;gap:10px;font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--inkt-2)}
.eyebrow::before{content:"";width:18px;height:1.5px;background:currentColor}
.blok>.eyebrow{color:var(--blauw-tekst)}
.donker .eyebrow{color:#8E97FF}
/* sectiekop op een haarlijn: "01 — WAT JE NODIG HEBT" */
.sectie{display:flex;align-items:center;gap:12px;margin-top:30px;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--grijs)}
.sectie::after{content:"";flex:1;height:1px;background:var(--lijn)}
.sectie b{color:var(--blauw-tekst);font-weight:700}
.vraag{font-size:24px;letter-spacing:-.045em;line-height:1}
/* ---------- opbouw ---------- */
.blok{padding:30px 24px 0}
.voet{padding:22px 24px 28px;gap:12px}
.kop{padding:16px 20px 0}
.terug,.sluit{width:44px;height:44px;border-radius:50%;border:1px solid var(--lijn-2);background:transparent}
.donker .terug{border-color:#2E3038}
.stap{color:var(--grijs);gap:6px}
.voortgang{padding:16px 24px 0;gap:3px}
.voortgang span{height:3px;border-radius:0;background:var(--lijn)}
.voortgang span.aan{background:var(--inkt)}
.voortgang span.aan:last-of-type{background:var(--blauw)}
.voortgang span.aan:has(+ span:not(.aan)){background:var(--blauw)}
.donker .voortgang span{background:#23252D}.donker .voortgang span.aan{background:#F3F2EE}
/* ---------- knoppen ---------- */
/* primair: een pil met een pijl in een cirkel die meeloopt */
.knop{height:64px;border-radius:999px;padding:0 10px 0 26px;justify-content:space-between;background:var(--inkt);color:var(--op-inkt);font-size:17px;font-weight:800;letter-spacing:-.02em;box-shadow:0 14px 30px -16px rgba(11,12,16,.55)}
.knop::before{content:"";order:2;flex:none;width:44px;height:44px;border-radius:50%;background:var(--blauw) url("data:image/svg+xml;utf8,") center/20px no-repeat;transition:transform .35s cubic-bezier(.2,1.35,.35,1)}
.knop:active::before{transform:translateX(4px)}
.knop.blauw{background:var(--blauw)}
.knop.blauw{color:#fff}
.knop.blauw::before{background-color:var(--vlak-donker)}
.knop.rood{background:var(--rood)}
.knop.rood::before{background-color:rgba(0,0,0,.25)}
.knop[disabled],.knop[aria-disabled=true]{background:var(--knop-uit);color:var(--grijs);box-shadow:none}
.knop[disabled]::before{background-color:var(--knop-uit-2)}
.knop.wit{background:#fff;color:var(--blauw);height:52px}
.knop2{height:58px;border-radius:999px;border:1px solid var(--lijn-2);font-weight:700;letter-spacing:-.01em;background:transparent}
.knop2.rood{border-color:rgba(226,55,43,.45);color:var(--rood)}
.donker .knop2{border-color:#2E3038}
.link{font-size:10.5px;letter-spacing:.14em;color:var(--blauw-tekst)}
.link span,.link{text-underline-offset:4px}
.zacht{font-size:10px;letter-spacing:.12em;color:var(--grijs)}
/* ---------- papier: kaarten met perforatie ---------- */
.kaart{background:var(--wit);border:0;border-radius:var(--r);box-shadow:var(--schaduw);overflow:hidden}
.kaart .boven{padding:20px 20px 16px}
.kaart .onder{position:relative;border-top:1.5px dashed var(--lijn-2);padding:16px 20px 18px}
.kaart .onder::before,.kaart .onder::after{content:"";position:absolute;top:-9px;width:16px;height:16px;border-radius:50%;background:var(--papier)}
.kaart .onder::before{left:-8px}.kaart .onder::after{right:-8px}
.lbl{font-size:9.5px;letter-spacing:.14em;color:var(--grijs)}
.waarde{font-size:15px;letter-spacing:-.01em}
.tip,.hint,.tip-blauw{border:0;border-radius:var(--r);background:var(--papier-2);color:var(--inkt-2)}
.hint,.tip-blauw{background:var(--blauw-2);color:var(--blauw-2-tekst)}
.bd{border-radius:999px;padding:4px 10px;font-size:11px;letter-spacing:.06em}
/* ---------- lijsten: haarlijnen, mono-nummers ---------- */
.lijst{gap:0}
.lijst li{padding:16px 0;border-top:1px solid var(--lijn);gap:16px}
.lijst li:last-child{border-bottom:1px solid var(--lijn)}
.lijst .nr{width:auto;height:auto;min-width:26px;background:none;border-radius:0;color:var(--blauw-tekst);font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;padding-top:3px;justify-content:flex-start}
.lijst b{font-size:17px;letter-spacing:-.02em}
.lijst small{font-size:14.5px;margin-top:3px;color:var(--inkt-2)}
.vink{font-size:15px;align-items:center;padding:14px 0;border-top:1px solid var(--lijn)}
.vink input{width:24px;height:24px;margin:0}
/* ---------- invoer ---------- */
.veld{height:76px;border:1px solid var(--lijn-2);border-radius:var(--r);background:var(--wit);font-size:30px;transition:border-color .2s,box-shadow .2s}
.veld:focus{outline:0;border-color:var(--blauw);box-shadow:0 0 0 4px rgba(36,51,255,.14)}
.veld.klein{height:60px}
/* ---------- pincode ---------- */
.punten{gap:16px;margin-top:24px}
.punten span{width:13px;height:13px;border:1.5px solid var(--inkt)}
.punten span.vol{background:var(--blauw);border-color:var(--blauw)}
.pinpad{gap:14px 22px;padding:0 44px;justify-items:center}
.pinpad button{width:72px;height:72px;border-radius:50%;background:var(--wit);font-size:28px;font-weight:600;box-shadow:0 1px 0 rgba(11,12,16,.05),0 10px 20px -16px rgba(11,12,16,.4)}
.pinpad button.leeg{box-shadow:none}
.pinpad button:active{background:var(--blauw);color:#fff}
/* ---------- inloggen ---------- */
.getallen{gap:12px}
.getallen button{height:104px;border:0;border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw);font-size:44px;letter-spacing:-.04em}
.getallen button:active{background:var(--blauw);color:#fff}
.verzoekkaart{border-radius:var(--r)}
/* het live verzoek op Mijn pas: een kaartje met een kloppend punt */
.verzoek{margin:18px 20px 0;padding:18px 20px;border-radius:var(--r);background:#15161C;border:1px solid #262833;box-shadow:0 20px 40px -24px rgba(36,51,255,.6)}
.verzoek .eyebrow{color:var(--groen)}
.verzoek .eyebrow::before{width:7px;height:7px;border-radius:50%;background:var(--groen);animation:klop 1.4s ease-in-out infinite}
@keyframes klop{50%{opacity:.25;transform:scale(.7)}}
.verzoek b{font-size:21px;letter-spacing:-.035em;line-height:1.05}
.verzoek .pijl{color:#fff;background:var(--blauw);padding:10px 14px;border-radius:999px;font-size:10.5px}
.verzoek-kop{font-size:34px;line-height:.95}
/* inlogverzoek, pincodefase: gecentreerd, één samenvatting, zoals het slot */
.pin-fase{text-align:center}
.pin-samenvatting{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0 4px}
.pin-samenvatting b{font-size:24px;line-height:1.08;letter-spacing:-.04em;max-width:16ch}
.pin-samenvatting .bevestigd{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--ok-bg);color:var(--ok-tekst);font-size:10px;letter-spacing:.12em;font-weight:700}
.pin-label{margin-top:26px;text-transform:uppercase}
.knop2.keuze{background:var(--wit);border-color:transparent;box-shadow:var(--schaduw)}
.knop2.keuze.aan{border:2px solid var(--blauw);color:var(--blauw-tekst)}
.donker .tabs{background:#101116;border-top-color:#22242C}
.donker .tabs a{color:#6E717A}.donker .tabs a.aan{color:#F3F2EE}
/* microtekst: zoals op waardepapier, net leesbaar als je goed kijkt */
.microtekst{margin:6px 24px 0;font-family:'JetBrains Mono',monospace;font-size:5.5px;letter-spacing:.32em;color:var(--inkt);opacity:.3;white-space:nowrap;overflow:hidden;user-select:none}
.donker .microtekst{color:#F3F2EE;opacity:.2}
/* chip lezen: golven tussen telefoon en document */
.nfc{position:relative;width:200px;height:170px}
.nfc .doc{position:absolute;left:30px;bottom:6px;width:140px;height:92px;border-radius:12px;background:var(--vlak-donker);transform:perspective(500px) rotateX(48deg);box-shadow:0 20px 30px -18px rgba(0,0,0,.5)}
.nfc .doc::after{content:"";position:absolute;left:18px;top:22px;width:26px;height:20px;border-radius:4px;border:2px solid var(--groen)}
.nfc .tel{position:absolute;left:62px;top:0;width:76px;height:118px;border-radius:16px;background:var(--wit);border:1px solid var(--lijn-2);box-shadow:var(--schaduw);animation:zweef 2.4s ease-in-out infinite}
.nfc .tel::after{content:"";position:absolute;left:28px;top:7px;width:20px;height:5px;border-radius:3px;background:var(--inkt)}
.nfc .golf{position:absolute;left:50%;top:92px;width:60px;height:60px;margin-left:-30px;border-radius:50%;border:2px solid var(--blauw);opacity:0;animation:golf 2.1s cubic-bezier(.2,.6,.3,1) infinite}
.nfc .golf:nth-of-type(3){animation-delay:.7s}.nfc .golf:nth-of-type(4){animation-delay:1.4s}
@keyframes golf{0%{transform:scale(.3);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@keyframes zweef{50%{transform:translateY(8px)}}
/* selfie: een scanlijn door de ovaal */
.scanlijn{animation:scan 2.2s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes scan{to{transform:translateY(222px)}}
/* terug voor een gestapeld scherm zonder eigen kop (zie op.js) */
.zwevend-terug{position:relative;margin:14px 0 0 20px;flex:none;align-self:flex-start;background:var(--wit);box-shadow:var(--schaduw);border:0}
.donker .zwevend-terug{background:#1C1D24;color:#F3F2EE}
/* bladen: sluitknop rechtsboven, en nooit hoger dan het scherm */
.venster-blad,.blad{position:relative;max-height:calc(100dvh - var(--veilig-boven) - 24px);overflow-y:auto;padding-bottom:calc(26px + var(--veilig-onder))}
/* een blad ligt boven de pagina: in donker een tint lichter, met een lichtrand */
.venster-blad,.blad{background:var(--blad);box-shadow:0 -1px 0 var(--lijn-2),0 -30px 60px -30px rgba(0,0,0,.5)}
/* de vraag houdt ruimte vrij voor de sluitknop rechtsboven */
.venster-blad .vraag{padding:0 64px}
.venster-sluit{position:absolute;top:14px;right:14px;border:1px solid var(--lijn-2);background:var(--wit);color:var(--inkt);cursor:pointer}
/* geen pas op dit toestel: de plek waar hij komt */
.lege-pas{margin:30px auto 0;width:250px;height:160px;border-radius:20px;border:1.5px dashed var(--lijn-2);display:flex;align-items:flex-end;padding:18px;background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(11,12,16,.025) 10px 20px)}
.lege-pas .m{font-size:9.5px;letter-spacing:.16em;color:var(--grijs)}
.keuzelijst .keuzerij{align-items:center}
.keuze-ico{border-radius:50%;font-size:20px}
/* ---------- donkere controle ---------- */
.checks{border-radius:var(--r);background:#14151B;border-color:#22242C}
.banier{border-radius:999px;padding:16px 22px;background:var(--groen)}
/* ---------- lijsten op de tabs ---------- */
.rij-kaart,.tl-kaart,.lijstkaart,.bedrijfrij,.keuzerij,.hulp-status{border:0;box-shadow:var(--schaduw);border-radius:var(--r)}
.rij-kaart{padding:16px 18px}
.rij-kaart.zacht-rand{box-shadow:none;border:1px dashed var(--lijn-2)}
.logo-blok{border-radius:14px;width:46px;height:46px;font-size:12px;letter-spacing:-.02em}
.schakel{border:0;background:var(--papier-2);border-radius:999px;padding:5px}
.schakel a{border-radius:999px}
.schakel a.aan{background:var(--inkt)}
.toevoegen,.bedrijf-erbij{border:1px dashed var(--lijn-2);border-radius:999px}
.veilig{border-radius:var(--r-groot);padding:20px}
.veilig .schild{border-radius:50%}
.tijdlijn li::before{background:var(--lijn-2);width:1px;left:10.5px}
.bolletje{border:1.5px solid var(--inkt)}
.abo-kaart,.abo-groot{border-radius:var(--r-groot)}
.lijstkaart>a,.lijstkaart>div{border-bottom-color:var(--lijn)}
/* ---------- de machineleesbare strook als ornament ---------- */
.mrz{font-family:'JetBrains Mono',monospace;font-size:10px;line-height:1.55;letter-spacing:.18em;color:var(--inkt);opacity:.28;white-space:nowrap;overflow:hidden;padding:0 24px;user-select:none}
.donker .mrz{color:#F3F2EE;opacity:.18}
/* ---------- lopende band met diensten ---------- */
.band{margin-top:26px;border-block:1px solid var(--lijn);overflow:hidden;white-space:nowrap}
.band>span{display:inline-block;padding:12px 0;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--inkt-2);animation:band 26s linear infinite}
.band i{font-style:normal;color:var(--blauw-tekst);margin:0 14px}
@keyframes band{to{transform:translateX(-50%)}}
/* ---------- welkom ---------- */
.merkregel{padding:20px 24px 0;display:flex;align-items:center;justify-content:space-between}
.merk-woord{display:flex;align-items:center;gap:9px;font-weight:900;font-size:19px;letter-spacing:-.05em}
.merk-teken{width:18px;height:26px;border-radius:3px 3px 6px 6px;background:var(--blauw);display:flex;justify-content:center;padding-top:4px}
.merk-teken::after{content:"";width:7px;height:2.5px;border-radius:2px;background:var(--papier)}
.merkregel .m{font-size:10px;letter-spacing:.16em;color:var(--grijs)}
/* ---------- Mijn pas: de wallet ---------- */
/* Mijn pas: licht of donker (wallet). Kantlijn 22px, ook voor de pas. */
.wallet-kop{padding:18px 22px 0;display:flex;align-items:flex-start;justify-content:space-between}
.wallet-kop .groet{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;color:var(--grijs)}
.wallet-kop h1{font-size:34px;margin-top:6px;color:var(--inkt)}
.profielknop{width:44px;height:44px;border-radius:50%;background:var(--wit);border:1px solid var(--lijn);color:var(--inkt);box-shadow:var(--schaduw);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;letter-spacing:-.02em}
.pas-status{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:18px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;color:var(--grijs)}
.pas-status .aan{display:inline-flex;align-items:center;gap:7px;color:var(--ok-tekst);font-weight:700}
.pas-status .aan::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--groen);box-shadow:0 0 0 3px rgba(61,255,143,.25)}
.wallet-acties{margin:6px 22px 0;border-top:1px solid var(--lijn)}
.wallet-acties a{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--lijn);font-weight:700;font-size:16px;letter-spacing:-.02em;color:var(--inkt)}
.wallet-acties a small{display:block;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:9.5px;letter-spacing:.14em;color:var(--grijs);margin-top:4px}
.wallet-acties .pijltje{width:34px;height:34px;border-radius:50%;border:1px solid var(--lijn-2);display:flex;align-items:center;justify-content:center;color:var(--inkt);flex:none}
.donker .wallet-kop .groet,.donker .pas-status,.donker .wallet-acties a small,.donker .bedrijfknop{color:#8A8D96}
.donker .wallet-kop h1,.donker .wallet-acties a,.donker .wallet-acties .pijltje{color:#F3F2EE}
.donker .profielknop{background:#1C1D24;border-color:#2E3038;color:#F3F2EE;box-shadow:none}
.donker .pas-status .aan{color:var(--groen)}
.donker .pas-status .aan::before{box-shadow:0 0 12px var(--groen)}
.donker .wallet-acties,.donker .wallet-acties a{border-color:#22242C}
.donker .wallet-acties .pijltje{border-color:#2E3038}
.donker .pas-midden::before{background:radial-gradient(closest-side,rgba(36,51,255,.45),rgba(36,51,255,0))}
.donker .podium .schaduw{background:radial-gradient(closest-side,rgba(0,0,0,.8),rgba(0,0,0,0))}
/* de pas op Mijn pas: volle breedte tussen de kantlijnen, in de maat van
een bankpas (ID-1, 85,6 × 54 mm) */
.scherm .pas-midden{width:100%;padding:22px 22px 10px;box-sizing:border-box}
.pas-midden .podium.liggend{width:100%;height:auto;aspect-ratio:85.6/54}
.pas-midden .pas{padding:22px}
.pas-midden .pas .rij .waarde{font-size:15px}
.pas-midden .pas .rij .lbl{font-size:9.5px}
.pas-midden .pas>div:first-of-type span:first-child{font-size:17px!important}
/* de wallet: passen naast elkaar, één per scherm, op de kantlijn */
.scherm .pas-midden{padding:0}
.passtapel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.passtapel::-webkit-scrollbar{display:none}
.pasplek{flex:0 0 100%;box-sizing:border-box;padding:22px 22px 6px;scroll-snap-align:center;scroll-snap-stop:always;display:flex;flex-direction:column}
.pasplek .podium{touch-action:pan-x pan-y}
.lege-pas.groot{width:100%;height:auto;aspect-ratio:85.6/54;margin:0;box-sizing:border-box;border-radius:20px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:22px;color:var(--inkt)}
.lege-pas.groot .plus{width:46px;height:46px;border-radius:50%;background:var(--blauw);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:500}
.lege-pas.groot b{display:block;font-size:22px;letter-spacing:-.04em}
.lege-pas.groot small{display:block;margin-top:6px;font-size:9.5px;letter-spacing:.16em;color:var(--grijs)}
.donker .lege-pas{border-color:#2E3038;background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(255,255,255,.03) 10px 20px)}
.donker .lege-pas.groot{color:#F3F2EE}
.pasteller{display:flex;justify-content:center;gap:6px;margin-top:14px}
.pasteller span{width:6px;height:6px;border-radius:3px;background:var(--lijn-2);transition:width .35s var(--veer,ease),background-color .2s}
.pasteller span.aan{width:22px;background:var(--blauw)}
.pasteller .erbij-stip{background:transparent;border:1px solid var(--lijn-2);box-sizing:border-box}
.donker .pasteller span{background:#2E3038}.donker .pasteller span.aan{background:#8E97FF}
.donker .pasteller .erbij-stip{background:transparent;border-color:#3A3D46}
/* KVK-nummer van een pas die je al hebt */
.al-in-wallet{display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:center;padding:18px;border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw)}
.al-in-wallet b{display:block;margin-top:6px;font-size:22px;letter-spacing:-.045em}
.al-in-wallet p{margin:6px 0 0;font-size:14.5px;line-height:1.45;color:var(--inkt-2)}
.mini-pas{aspect-ratio:85.6/54;border-radius:10px;background:linear-gradient(135deg,#3A48FF,#2433FF);color:#fff;padding:9px 10px;display:flex;flex-direction:column;box-shadow:0 10px 20px -12px rgba(36,51,255,.7);transform:rotate(-4deg)}
.mini-pas .mp-merk{font-weight:900;font-size:8.5px;letter-spacing:-.03em}
.mini-pas .mp-bedrijf{margin-top:auto;font-weight:800;font-size:10.5px;letter-spacing:-.02em;line-height:1.1}
.mini-pas .mp-kvk{font-size:6.5px;letter-spacing:.1em;opacity:.8;margin-top:3px}
.jij{display:inline-block;margin-right:6px;padding:1px 6px;border-radius:999px;background:var(--blauw);color:#fff;font-weight:700;letter-spacing:.1em}
/* weergave-keuze in Profiel */
/* De pil schuift naar je keuze (data-keuze, gezet door op.js) in plaats van
te springen; de knoppen zelf zijn doorzichtig. */
.thema-keuze{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:8px;padding:4px;border-radius:999px;background:var(--papier-2)}
.thema-keuze::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);border-radius:999px;background:var(--inkt);box-shadow:0 8px 18px -10px rgba(11,12,16,.6);transition:transform .45s var(--veer),background-color .3s}
.thema-keuze[data-keuze=licht]::before{transform:translateX(100%)}
.thema-keuze[data-keuze=donker]::before{transform:translateX(200%)}
.thema-keuze:not([data-keuze])::before{opacity:0}
.thema-keuze button{all:unset;position:relative;z-index:1;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px 0;border-radius:999px;font-weight:700;font-size:14.5px;color:var(--inkt-2);transition:color .3s}
.thema-keuze button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.thema-keuze button.aan{color:var(--op-inkt)}
/* Wisselen van licht naar donker: het nieuwe thema groeit als een cirkel uit
de knop die je aantikte (View Transition), het oude blijft eronder liggen. */
html.thema-wissel::view-transition-old(root){animation:none}
html.thema-wissel::view-transition-new(root){animation:thema-onthul 700ms cubic-bezier(.65,0,.15,1)}
html.thema-wissel::view-transition-group(pas){animation:none}
@keyframes thema-onthul{from{clip-path:circle(0 at var(--thema-x,50%) var(--thema-y,50%))}to{clip-path:circle(150vmax at var(--thema-x,50%) var(--thema-y,50%))}}
.thema-keuze button:focus-visible{outline:2px solid var(--blauw);outline-offset:2px}
/* ---------- Machtigingen ----------
Twee grote getallen zijn tegelijk de samenvatting en de keuze tussen
Diensten en Personen. Lijsten zijn één kaart met scheidslijnen, geen stapel
losse kaarten die allemaal hetzelfde zeggen. Groen alleen voor "het klopt". */
.mg-blok{padding-bottom:120px}
.mg-wissel:focus-visible,.mg-keuze button:focus-visible{outline:2px solid var(--blauw);outline-offset:2px}
.mg-een{margin-top:14px;font-size:10.5px;letter-spacing:.14em;color:var(--inkt-2)}
.mg-inhoud{transition:opacity .25s}
.laden .mg-inhoud{opacity:.35;pointer-events:none}
.mg-keuze{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.mg-keuze button{all:unset;cursor:pointer;position:relative;display:flex;flex-direction:column;padding:16px 16px 14px;border-radius:var(--r);background:var(--wit);box-shadow:inset 0 0 0 1px var(--lijn);transition:background .25s,color .25s,box-shadow .25s,transform .15s}
.mg-keuze button:active{transform:scale(.98)}
.mg-keuze button.aan{background:var(--blauw);color:#fff;box-shadow:0 18px 36px -20px rgba(36,51,255,.9)}
.mg-getal{font-size:46px;line-height:.9;font-weight:900;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.mg-wat{margin-top:6px;font-weight:800;font-size:16px;letter-spacing:-.02em}
.mg-keuze small{margin-top:2px;font-size:12.5px;line-height:1.3;color:var(--grijs)}
.mg-keuze button.aan small{color:rgba(255,255,255,.75)}
.mg-paneel{margin-top:22px;animation:mg-in .35s cubic-bezier(.2,.8,.2,1)}
@keyframes mg-in{from{opacity:0;transform:translateY(6px)}}
.mg:not([data-tab=personen]) .mg-paneel-personen,.mg[data-tab=personen] .mg-paneel-diensten{display:none}
.mg-uitleg{margin:0 0 12px;font-size:15px;line-height:1.45;color:var(--inkt-2);max-width:36ch}
.mg-uitleg b{color:var(--inkt)}
.mg-lijst{list-style:none;margin:10px 0 0;padding:0;border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw);overflow:hidden}
.mg-lijst li{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 16px}
.mg-lijst li+li{border-top:1px solid var(--lijn)}
.mg-lijst li.uit .mg-logo{background:var(--papier-2);color:var(--grijs)}
.mg-lijst li.uit b{color:var(--inkt-2)}
.mg-lijst li.wacht{background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(255,176,32,.06) 8px 16px)}
.mg-tekst{flex:1;min-width:0}
.mg-tekst b{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.mg-tekst small{display:block;margin-top:2px;font-size:13px;color:var(--grijs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-tekst .jij{margin:0;font-size:9px;font-family:'JetBrains Mono',monospace}
.mg-logo,.mg-av{flex:none;width:40px;height:40px;display:grid;place-items:center;font-weight:900;font-size:11.5px;letter-spacing:-.02em;color:#fff;background:var(--blauw)}
.mg-logo{border-radius:12px}
.mg-av{border-radius:50%;background:var(--inkt);color:var(--op-inkt)}
.mg-av.collega{background:var(--blauw);color:#fff}
.mg-av.kantoor{border-radius:12px;background:var(--inkt-2);color:var(--op-inkt)}
.mg-av.open{background:var(--blauw-2);color:var(--blauw-tekst)}
.mg-vink{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--ok-bg);color:var(--ok-tekst)}
.mg-vink svg{width:14px;height:14px}
.mg-niet{font-size:10px;letter-spacing:.12em;color:var(--grijs)}
.mg-intrek{all:unset;cursor:pointer;flex:none;padding:8px 12px;border-radius:999px;font-weight:700;font-size:13.5px;color:var(--rood);box-shadow:inset 0 0 0 1px rgba(226,55,43,.35)}
.mg-intrek:active{background:rgba(226,55,43,.08)}
.mg-actie{margin-top:16px}
.mg-actie-boven{margin:0 0 4px}
.mg-paneel .sectie:first-of-type{margin-top:22px}
.mg-paneel-personen>.sectie:first-child{margin-top:0}
/* ---------- Fase 2: de zakelijke rekening (prototype) ----------
De betaalpas is hetzelfde voorwerp als de toegangspas, in inkt in plaats
van blauw: naast elkaar in de hand, niet te verwarren. */
.rk-proto{margin:10px 24px 0;padding:7px 12px;border-radius:999px;background:var(--warn-bg);color:var(--warn-tekst);font-size:9.5px;letter-spacing:.14em;text-align:center}
.rk-strook{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border-radius:18px;background:var(--wit);box-shadow:var(--schaduw);color:var(--inkt);transition:transform .15s}
.rk-strook:active{transform:scale(.98)}
.rk-strook-ico{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--inkt);color:var(--op-inkt);font-weight:900;font-size:16px}
.rk-strook-ico.nieuw{background:var(--blauw);color:#fff;font-size:22px;font-weight:500}
.rk-strook-tekst{flex:1;min-width:0}
.rk-strook-tekst b{display:block;font-size:15.5px;letter-spacing:-.02em;font-weight:800}
.rk-strook-tekst small{display:block;margin-top:2px;font-size:9.5px;letter-spacing:.12em;color:var(--grijs)}
.rk-strook.open b{font-size:19px;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.rk-strook .pijltje{width:30px;height:30px;border-radius:50%;border:1px solid var(--lijn-2);display:grid;place-items:center;flex:none;font-size:13px}
.pas.betaalpas{background:radial-gradient(120% 90% at 85% 0%,#2B2E3A 0%,#14151B 55%,#0B0C10 100%);padding:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.05)}
.bp-boven{display:flex;justify-content:space-between;align-items:center}
.bp-merk{font-weight:900;font-size:17px;letter-spacing:-.04em}
.bp-soort{font-size:9px;letter-spacing:.2em;color:#9EA2AD}
.bp-chip{margin-top:18px;width:38px;height:28px;border-radius:7px;background:linear-gradient(135deg,#E9D9A6,#B99A52 60%,#E3CF92);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.bp-contactloos{position:absolute;right:26px;top:66px;width:18px;height:22px;border-radius:0 50% 50% 0;border:2px solid rgba(255,255,255,.55);border-left:0;box-shadow:5px 0 0 -2px transparent}
.bp-contactloos::after{content:"";position:absolute;inset:3px 3px 3px -4px;border-radius:0 50% 50% 0;border:2px solid rgba(255,255,255,.35);border-left:0}
.bp-onder{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.bp-onder .lbl{color:#8C8F98}
.bp-nummer{font-size:15px;letter-spacing:.14em}
.betaalpas.bevroren{filter:saturate(.2)}
.betaalpas.bevroren::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,rgba(190,220,255,.32),rgba(255,255,255,.06));backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px)}
.bp-ijs{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);padding:6px 12px;border:2px solid #CFE6FF;border-radius:8px;color:#CFE6FF;font-size:13px;font-weight:800;letter-spacing:.18em}
.rk-deel .boven{display:grid;grid-template-columns:1fr auto;gap:12px}
.rk-deel .onder{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
.rk-krijg{list-style:none;margin:10px 0 0;padding:0}
.rk-krijg li{display:flex;flex-direction:column;gap:2px;padding:14px 0 14px 34px;border-top:1px solid var(--lijn);position:relative}
.rk-krijg li::before{content:"";position:absolute;left:4px;top:17px;width:18px;height:18px;border-radius:50%;background:var(--ok-bg) url("data:image/svg+xml;utf8,") center/11px no-repeat}
.rk-krijg b{font-size:16px;letter-spacing:-.02em}
.rk-krijg span{font-size:14px;line-height:1.45;color:var(--inkt-2)}
.rk-klein{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--grijs)}
.rk-saldo{margin-top:14px;display:flex;align-items:baseline;font-weight:900;letter-spacing:-.06em;font-variant-numeric:tabular-nums;line-height:.9}
.rk-saldo span{font-size:52px}
.rk-saldo small{font-size:26px;letter-spacing:-.03em;color:var(--grijs)}
.rk-iban{all:unset;cursor:pointer;margin-top:12px;display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;background:var(--papier-2);font-size:12px;letter-spacing:.08em}
.rk-iban i{font-style:normal;font-size:9.5px;letter-spacing:.14em;color:var(--blauw-tekst)}
.rk-iban .ok,.rk-iban.gekopieerd i:not(.ok){display:none}
.rk-iban.gekopieerd .ok{display:inline;color:var(--ok-tekst)}
.scherm .pas-midden.rk-pas{padding:22px 22px 0}
/* achterop staat de tekst van de toegangspas; die hoort niet bij een betaalpas */
.rk-pas .achter .regel{display:none}
.rk-pas.opkomst .podium{animation:opkomst 1300ms var(--veer) backwards}
.rk-acties{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rk-actie{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw);font-weight:700;font-size:13.5px;text-align:center;transition:transform .15s,background .2s,color .2s}
.rk-actie span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--papier-2);font-size:18px}
.rk-actie:active{transform:scale(.96)}
.rk-actie.aan{background:#CFE6FF;color:#0B2A4A}
.rk-actie.aan span{background:#fff}
.rk-actie.proef span{background:var(--warn-bg);color:var(--warn-tekst)}
.rk-tx .rk-av{border-radius:12px;font-size:11px}
.rk-av.in{background:var(--ok-bg);color:var(--ok-tekst)}
.rk-av.kaart{background:var(--papier-2);color:var(--inkt)}
.rk-bedrag{flex:none;font-size:14.5px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.rk-bedrag.plus{color:var(--ok-tekst)}
.rk-tx li.wacht{background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(36,51,255,.06) 8px 16px)}
.rk-tx li.wacht small{color:var(--blauw-tekst)}
.rk-tx li.geweigerd .rk-bedrag{text-decoration:line-through;color:var(--grijs)}
.rk-tx li.geweigerd small{color:var(--bad-tekst)}
.rk-betaal-bedrag{font-size:58px;font-weight:900;letter-spacing:-.06em;line-height:.9;margin-top:6px;font-variant-numeric:tabular-nums}
/* ---------- een antwoord van de klantenservice ----------
Een stip op je profielknop, live; in Profiel en bij Hulp staat erbij wat
het is. Weg zodra je de chat opent. */
.profielknop{position:relative}
.stip{position:absolute;top:-1px;right:-1px;width:12px;height:12px;border-radius:50%;background:var(--blauw);box-shadow:0 0 0 2.5px var(--papier);transform:scale(0);transition:transform .35s var(--veer)}
.stip.aan{transform:scale(1)}
.stip.aan::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--blauw);animation:stip-puls 2.4s ease-out infinite}
@keyframes stip-puls{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.6);opacity:0}}
.rij-rechts{display:inline-flex;align-items:center;gap:10px}
.nieuw-label{padding:3px 8px;border-radius:999px;background:var(--blauw);color:#fff;font-size:9px;letter-spacing:.12em}
.hulp-contact a.nieuw{position:relative}
.hulp-contact a.nieuw::after{content:"";position:absolute;top:12px;right:12px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
/* ---------- native invoerbalk (op.js, FluxInvoerbalk) ----------
In de app tekent de shell de invoer; het webveld verdwijnt en het gesprek
houdt onderaan ruimte vrij voor de balk (en het toetsenbord). */
html.native-invoer .chat-invoer{display:none!important}
html.native-invoer .scherm{padding-bottom:calc(var(--invoer-hoogte,96px) + 12px)}
/* Een kop die blijft staan terwijl je scrolt (de chat): de terugknop is
altijd in beeld. Glas zoals de statusbalk erboven. .scherm clipt met
overflow:clip, anders werkt sticky niet. */
.kop.vast{position:sticky;top:var(--veilig-boven);z-index:50;margin:0;padding:12px 20px 12px;
background:color-mix(in srgb,var(--papier) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
box-shadow:0 1px 0 var(--lijn)}
/* twee keuzes (Geluiden): dezelfde schuivende pil, op de helft */
.thema-keuze.twee{grid-template-columns:repeat(2,1fr)}
.thema-keuze.twee::before{width:calc((100% - 8px) / 2)}
.thema-keuze.twee[data-keuze=uit]::before{transform:translateX(100%)}
/* de pas op slot: dezelfde kleine pas als bij ontgrendelen, met een stempel */
.slot-geblokkeerd .slot-pas{position:relative;filter:saturate(.35)}
.slot-stempel{position:absolute;right:50%;top:50%;transform:translate(50%,-50%) rotate(-10deg);margin:0;font-size:22px;padding:8px 16px;border-width:3px;background:var(--papier)}
/* ---------- Binnen: na een geslaagde inlog ----------
Een eigen laag over het verzoek, verder precies de opbouw van Klaar. */
.binnen{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;overflow-y:auto;
background:var(--papier);padding-top:var(--veilig-boven);padding-bottom:var(--veilig-onder)}
/* Boekhouder zoeken */
.kt-actie{flex:none;padding:8px 14px;border-radius:999px;background:var(--blauw);color:#fff;font-weight:700;font-size:13.5px;text-decoration:none}
.kt-actie.stil{background:transparent;color:var(--blauw-tekst);border:1px solid var(--lijn-2)}
.kt-zoeklink{display:block;margin-top:10px;font-size:14px}
.kt-zoeklink{display:block;margin-top:12px;font-size:14.5px;font-weight:600;color:var(--blauw-tekst);text-decoration:none}
.kt-strook{margin-top:16px}
.kt-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.kt-chip{padding:9px 14px;border-radius:999px;border:1px solid var(--lijn-2);background:var(--wit);font-weight:700;font-size:14px;color:var(--inkt)}
.kt-chip:active{transform:scale(.97)}
/* Het bedrijf op de pas zelf: één pas per bedrijf */
.pas-bedrijf{margin-top:18px;min-width:0}
.pas-bedrijf .lbl{opacity:.75}
.pas-bedrijf b{display:block;margin-top:2px;font-size:22px;font-weight:900;letter-spacing:-.035em;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:28px}
.bedrijf-zoek{margin:4px 0 10px}
/* Kleuren van de pas (domein.PasKleuren). [data-kleur] wint in de kiezer. */
.pas.kleur-blauw,[data-kleur=blauw] .pas{background:#2433FF}
.pas.kleur-nacht,[data-kleur=nacht] .pas{background:#17181F}
.pas.kleur-groen,[data-kleur=groen] .pas{background:#0B7A55}
.pas.kleur-petrol,[data-kleur=petrol] .pas{background:#0E5C73}
.pas.kleur-paars,[data-kleur=paars] .pas{background:#6A2BD9}
.pas.kleur-koraal,[data-kleur=koraal] .pas{background:#D9452F}
.podium:has(.kleur-nacht) .rand,[data-kleur=nacht] .podium .rand{background:#0B0C10}
.podium:has(.kleur-groen) .rand,[data-kleur=groen] .podium .rand{background:#08603F}
.podium:has(.kleur-petrol) .rand,[data-kleur=petrol] .podium .rand{background:#0A4757}
.podium:has(.kleur-paars) .rand,[data-kleur=paars] .podium .rand{background:#5220AD}
.podium:has(.kleur-koraal) .rand,[data-kleur=koraal] .podium .rand{background:#B3351F}
.kleur-voorbeeld{margin-top:28px;padding:14px 0 0}
.kleuren{display:flex;justify-content:center;gap:14px;margin-top:22px}
.kleurstip{width:40px;height:40px;border-radius:50%;border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:transform .15s,box-shadow .15s}
.kleurstip.aan{transform:scale(1.12);box-shadow:0 0 0 3px var(--papier,#fff),0 0 0 5px var(--inkt)}
.kleurstip.kleur-blauw{background:#2433FF}.kleurstip.kleur-nacht{background:#17181F}.kleurstip.kleur-groen{background:#0B7A55}
.kleurstip.kleur-petrol{background:#0E5C73}.kleurstip.kleur-paars{background:#6A2BD9}.kleurstip.kleur-koraal{background:#D9452F}
.pas-kleurlink{display:block;text-align:center;margin-top:10px;font-size:10px;letter-spacing:.14em;color:var(--grijs);text-decoration:none}
/* Wissellijst: de initialen dragen de kleur van hun pas. */
.bedrijfrij .bedrijf-ini[class*=kleur-]{color:#fff}
.bedrijfrij .bedrijf-ini.kleur-blauw{background:#2433FF}.bedrijfrij .bedrijf-ini.kleur-nacht{background:#17181F;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.bedrijfrij .bedrijf-ini.kleur-groen{background:#0B7A55}.bedrijfrij .bedrijf-ini.kleur-petrol{background:#0E5C73}
.bedrijfrij .bedrijf-ini.kleur-paars{background:#6A2BD9}.bedrijfrij .bedrijf-ini.kleur-koraal{background:#D9452F}
.scherm .kleur-voorbeeld.pas-midden{margin:32px auto 0;padding:12px 0 0}
.bedrijven-pagina{padding-top:18px}
/* Nep-zoekbalk boven de wallet: opent de wissellijst. */
.nep-zoek{display:flex;align-items:center;gap:10px;width:calc(100% - 44px);margin:16px 22px 0;height:48px;padding:0 16px;box-sizing:border-box;border:1px solid var(--lijn-2);border-radius:14px;background:var(--wit);color:var(--grijs);font:600 16px 'Inter Tight',sans-serif;text-align:left;cursor:pointer}
.nep-zoek span:first-of-type{flex:1}
.nep-zoek-aantal{font-size:10px;letter-spacing:.12em;color:var(--grijs)}
.nep-zoek:active{border-color:#2433FF}
.nep-zoek:focus-visible{outline:2px solid #2433FF;outline-offset:2px}
/* Machtigingen: het bedrijf dat je beheert, als op Pas; tik = het wisselblad */
.mg-wissel{appearance:none;font:inherit;text-align:left;box-sizing:border-box;width:100%;cursor:pointer;margin-top:18px;transition:transform .15s}
.mg-wissel:active{transform:scale(.985)}
.mg-wissel b{font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.mg-wissel-label{margin-left:auto;font-size:9.5px;letter-spacing:.12em;color:var(--grijs);white-space:nowrap}