/* ===== cc-layout.css — DE LAY-OUT VAN DE EERSTE VERSIE (Fable Z27 deel 2 met Sam, 29 sep 2026; gebouwd in r357 = v1.80.0, Opus 145e) =====
   Waarom een eigen bestand: index.html staat op no-cache en moet onder de 180.000 tekens blijven (r98; v1.79.0 = 177.970). Dit bestand hangt aan de ?v=-buster,
   dus het wordt één keer per versie geladen. Het staat als <link> in de BODY, direct na het blok cc-r356: op DIE plek in de cascade maten Fables proefkopieën
   (na de ingespoten stijl van app.js en na de oudere blokken; cc-mobiel-r166 en cc-r176a komen er nog na). De landing (#cc-landing) wordt hier niet aangeraakt.
   De regels staan per paragraaf van z27-layout/REGELS-Z27.md; Sams keuzes letterlijk in z27-layout/KAARTEN-Z27.md. */

/* ---------- § EXP — de Exporteer-knop overal links (Sam 29 sep ± 17.22, zonder kaart) ----------
   Het grootboek had zijn drie knoppen in een tussenlaagje (<div style="display:flex">) ín de knoppenbalk; dat laagje wordt doorzichtig, zodat de bestaande regel
   .modal-foot .cc-exp{margin-right:auto;order:-1} de knop bereikt. De knop zelf nog eens met !important: het laagje had een inline stijl. */
.modal-foot>div:has(>.cc-exp,>.io-icon-btn.export){display:contents!important}
.modal-foot .cc-exp,.modal-foot .io-icon-btn.export{margin-right:auto!important;order:-1!important}

/* ---------- § BREED — een keuzelijst is zo breed als haar langste optie (Sam 29 sep 19.40, zonder kaart) ----------
   „deze dropdown te breed; dat ziet er raar uit en is irritant”. De breedte stond inline (width:100%), vandaar !important; hoogstens de kolom. */
select.ed-pill[style*="width"]{width:auto!important;min-width:12ch;max-width:100%}

/* ---------- § KLIK — de hele regel opent het item (Sam 29 sep 19.38, zonder kaart) ----------
   De rij-pas (r129) zet een verborgen „Openen”-knop (absoluut, 1 px) in de regel: de regel is zijn bevattende blok, anders ligt die knop tegen het venster. */
.cc-fl9-klik,.cc-tx9-klik{cursor:pointer;position:relative}

/* ---------- § B — de gevlagde werklijstregel: de melding onder de naamregel (Z27-6 (1) „a”) + op de telefoon het bedrag onder de naam (Z27-6 (2) „d”) ----------
   Letterlijk Z26 a4 + d (z26-platen/REGELS-Z26.md § (1)); de kleur via --txtamb (licht #b45309 = 4,73 : 1 op --tamb, donker #f59e0b = 7,31 : 1). */
.cc-fl9-vlag{margin:4px 0 1px;font-size:11px;line-height:1.4;color:var(--txtamb);display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.cc-fl9-vlagt{flex:1 1 100%;white-space:normal;overflow-wrap:anywhere}
.cc-fl9-vlagk{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cc-fl9-vlagm{background:none;border:0;padding:0 2px;font:inherit;font-weight:600;color:var(--txtamb);text-decoration:underline;text-underline-offset:2px;cursor:pointer;min-height:24px}
.cc-fl9-vlag:not(.klemt):not(.meerdere):not(.uit) .cc-fl9-vlagm{display:none}
@media (max-width:480px){.cc-fl9-rij .cc-fl9{flex-wrap:wrap}.cc-fl9-rij .cc-fl9-bed{flex:1 1 100%;order:9;margin:-2px 0 0 36px;text-align:left}}

/* ---------- § B — de banklijst dezelfde regel als de facturen (Z27-6 (3)) ----------
   Het icoon B in het blauw van de hub (tag BANK); het ✓ van een geboekte regel is een echte knop (opent „Transactie koppelen”), zodat elke regel met het
   toetsenbord bereikbaar is; het waarom van een stille boeking staat onder de regel. */
.cc-bk9-ok{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:26px;min-height:26px;padding:0;background:none;border:0;border-radius:6px;color:var(--txtgrn);font-weight:600;font-size:14px;line-height:1;font-family:inherit;cursor:pointer}
.cc-bk9-ok:hover{background:var(--tgrn,rgba(22,163,74,.08))}
.cc-bk9-auto{margin:3px 0 1px;font-size:11px;line-height:1.4;color:var(--muted);white-space:normal;overflow-wrap:anywhere}

/* ---------- § WEG — de vraag vóór het verwijderen (Sam 29 sep 19.41, tekst kaart Z27-13): de rode knop rechts ----------
   Rood = het ene rood van de app (--txtred; licht #c81e1e = 5,9 : 1 op wit, donker #f87171), zoals de rode knop „Verwijderen” (.cc-del9). */
.cc-dlgb.cc-dlgb-rood{color:var(--txtred,#c81e1e);border-color:var(--txtred,#c81e1e);background:var(--surf,#fff)}
.cc-dlgb.cc-dlgb-rood:hover{background:var(--tred,#fef2f2);border-color:var(--red,#c81e1e);color:var(--txtred,#c81e1e)}
.cc-dlgb.cc-dlgb-rood:focus-visible{outline:2px solid var(--txtred,#c81e1e);outline-offset:2px}
.cc-weg9-titel:focus{outline:none}
@media (pointer:coarse){.cc-weg9 .cc-dlgb{min-height:32px}}

/* ---------- § A3 — het uploadvak op de telefoon als knopregel van 36 px, in de eigen kleuren (Z27-4 (2) „B”) ----------
   Twee teksten in het vak: het sleepvak (tablet/computer) en „Bestand kiezen…” (telefoon); de a11y-laag noemt het vak naar de zichtbare. */
.upload-mini .cc-up9-k{display:none}
@media (max-width:720px){
.upload-mini:has(.cc-up9-k){flex-direction:row!important;justify-content:flex-start!important;gap:10px!important;padding:6px 12px!important;min-height:36px!important;border-style:solid!important}
.upload-mini .cc-up9-g{display:none}
.upload-mini .cc-up9-k{display:inline;font-size:12px;font-weight:600;color:var(--txt)}
}

/* ---------- § A4 — de bol van Charlie: overal 40 px, 12 px uit de hoek, en ruimte onder de inhoud (Z27-5 „B2 · Zelfde plek, overal gelijk”) ----------
   Op de telefoon is de bol in een venster al verborgen (r342/r351); op tablet en computer staat hij op de hoek van het venster, dus daar krijgt de inhoud van
   een werkvenster 56 px ruimte onderaan (een kaart ligt in het midden). De hub krijgt die ruimte NIET: zie r357b hieronder. */
/* de letter 19 px (Fables blok zei 17): de C is wit op --grn (#16a34a, 3,3 : 1 — Sams kleur, r284-L) en haalt de norm alleen als GROTE tekst (vet ≥ 18,66 px,
   WCAG 1.4.3: 3 : 1). Met 17 px werd hij gewone tekst en eiste de schermkeur 4,5 : 1 (keten r357, 3b CONTRAST __hub). 19 px vet = de maat van r176a/r284-L. */
html body .cc-chef-fab{width:40px!important;height:40px!important;font-size:19px!important;right:12px!important;bottom:12px!important}
/* r357b (Sam, 30 sep 13.4x: „de tussenruimte boven de onderste 3 hubs … moet hetzelfde zijn als de tussenruimte onder de bovenste hubs”): de 56 px van A4 stonden
   op .cc-bento, en dat is niet de onderkant van de hub maar de ruimte TUSSEN het Boekhouding-blok en Beheer/Fiscaal/Jaarwerk (.cc-top volgt .cc-bento): 66 px
   i.p.v. 11 op 1440. De bol heeft ze niet nodig — onder de hub ligt altijd de voetregel (op tien maten nagemeten: na schuiven ligt er nooit iets van de
   hub onder de bol). Dus weg, en de ruimte boven de onderste rij precies die tussen de bovenste hubs: 12 px (v1.79.0 had 14). */
/* r362 (REGELS-Z31 § RASTER): .cc-top bestaat niet meer — de onderste rij staat in het ene raster (.cc-bento, gap 12 px) */
/* niet op een LAAG scherm (≤ 500 px: de telefoon liggend, r351 — daar is de bol in een venster verborgen) en niet in Charlie zelf (zijn venster ligt over de bol):
   daar kostte de ruimte het gesprek 50 px (s97 L3: 128 px op 852 × 393, de eis is ≥ 150) */
@media (min-width:721px) and (min-height:501px){.modal-overlay:not(.cc-chefbot-ov)>.modal:not(.cc-kaart9)>.modal-body{padding-bottom:56px!important}}

/* ---------- § V3 — twee venstermodellen: het WERKVENSTER (vol) en de KAART (Z27-3 „C · Twee modellen”) ----------
   Een venster met de klasse cc-kaart9 (keuzes met 2–4 knoppen, uitleg, de smalle beheervensters, een leeg overzicht) is op ≥ 721 px een gecentreerde kaart:
   hoogstens 640 px breed, hoogte naar inhoud, nooit hoger dan tussen kop en voet. Op de telefoon blijft elk venster schermvullend (r340). Letterlijk Fables
   gemeten blok V3-C, met de klasse in plaats van het meetmiddel :not(:has(table,input,…)). Een lege knoppenbalk van zo'n kaart verdwijnt.
   Niet op een LAAG scherm (≤ 500 px hoog: de telefoon liggend) — daar blijft elk venster schermvullend (r351 Z21; V3: „op de telefoon verandert niets”). */
@media (min-width:721px) and (min-height:501px){
html body .modal-overlay.cc-cardmodal>.modal.cc-kaart9{position:fixed!important;top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:min(640px,calc(100vw/var(--ccZm,1) - 32px))!important;max-width:min(640px,calc(100vw/var(--ccZm,1) - 32px))!important;height:auto!important;max-height:calc(100vh/var(--ccZm,1) - var(--ccHdrH,60px) - var(--ccFtrH,52px) - 32px)!important;margin:0!important;border-radius:16px!important;display:flex!important;flex-direction:column!important;overflow-y:auto!important}
html body .modal-overlay.cc-cardmodal>.modal.cc-kaart9>.modal-body{flex:0 1 auto!important;min-height:0!important}
html body .modal-overlay.cc-cardmodal>.modal.cc-kaart9>.modal-foot:empty{display:none!important}
}

/* ---------- § C — de lege staat: één zin en één knop naar de volgende stap (Z27-7 (1) „Kaart + één knop/verwijzing”) ---------- */
.cc-leeg9-t{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.cc-leeg9-k{white-space:normal;text-align:left}

/* ---------- § V2 — één rijmodel: de KAARTREGEL op de telefoon (Z27-2 „B · Kaartregel”) ----------
   Elke tabel met rollen (data-cc-rol9 op de cellen, gezet in app.js) wordt op ≤ 720 px een lijst van kaartjes: regel 1 = [voor] titel … bedrag, regel 2 = de kleine
   gegevens (sub, met „·” ertussen), dan de knoppen (actie); „weg” verdwijnt op de telefoon. Niets schuift meer zijwaarts, dus de hint „Schuif zijwaarts” verdwijnt
   vanzelf (r294-B6 meet de overloop). De plakkende eerste kolommen (r246-D) gaan uit. Een kop met filters of sorteerknoppen blijft staan, als een balk boven de lijst;
   een kop met alleen kolomnamen verdwijnt. Op tablet en computer blijven het tabellen. */
@media (max-width:720px){
table:has(td[data-cc-rol9]){display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;table-layout:auto!important}
table:has(td[data-cc-rol9])>tbody,table:has(td[data-cc-rol9])>tfoot{display:block!important;width:100%!important}
table:has(td[data-cc-rol9])>thead:not(:has(input,select,button,[aria-sort])){display:none!important}
table:has(td[data-cc-rol9])>thead:has(input,select,button,[aria-sort]){display:block!important;width:100%!important}
table:has(td[data-cc-rol9])>thead:has(input,select,button,[aria-sort])>tr{display:flex!important;flex-wrap:wrap;gap:4px 6px;padding:4px 10px;border-bottom:1px solid var(--bdr)}
table:has(td[data-cc-rol9])>thead>tr>th{display:block!important;position:static!important;left:auto!important;box-shadow:none!important;max-width:none!important;padding:2px 4px!important;border:0!important;white-space:nowrap}
table:has(td[data-cc-rol9])>thead>tr>th:empty{display:none!important}
table:has(td[data-cc-rol9])>thead>tr>th:has(input,select){flex:1 1 128px}
table:has(td[data-cc-rol9]) :is(tbody,tfoot)>tr{display:flex!important;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px;padding:6px 10px!important;min-height:44px;border-bottom:1px solid var(--bdr);box-sizing:border-box}
table:has(td[data-cc-rol9]) :is(tbody,tfoot)>tr>td{display:block;padding:0!important;border:0!important;width:auto!important;max-width:none!important;min-width:0!important;position:static!important;left:auto!important;box-shadow:none!important;text-align:left!important;height:auto!important}
table:has(td[data-cc-rol9]) :is(tbody,tfoot)>tr>td[colspan]{flex:1 1 100%}
table:has(td[data-cc-rol9]) td[data-cc-rol9="voor"]{order:0;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
table:has(td[data-cc-rol9]) td[data-cc-rol9="titel"]{order:1;flex:1 1 0;min-width:0;font-size:12px;font-weight:600;color:var(--txt);white-space:normal!important;overflow-wrap:anywhere}
table:has(td[data-cc-rol9]) td[data-cc-rol9="bedrag"]{order:2;margin-left:auto;font-size:12px;font-weight:600;color:var(--txt);text-align:right!important;white-space:nowrap!important;font-variant-numeric:tabular-nums}
table:has(td[data-cc-rol9]) :is(tbody,tfoot)>tr:has(>td[data-cc-rol9="sub"]:not(:empty))::after{content:"";order:3;flex:0 0 100%;height:0}
/* een lange subregel („Stand bij het begin van het boekjaar …” in het grootboek) mag afbreken — met nowrap liep de beginsaldoregel 86 px te breed (s27, 375 px) */
table:has(td[data-cc-rol9]) td[data-cc-rol9="sub"]{order:4;font-size:11px;color:var(--muted);white-space:normal!important;overflow-wrap:anywhere;font-weight:400}
table:has(td[data-cc-rol9]) td[data-cc-rol9="sub"]~td[data-cc-rol9="sub"]:not(:empty)::before{content:"· "}
table:has(td[data-cc-rol9]) td[data-cc-rol9="sub"]~td[data-cc-rol9="sub"][data-cc-voor9]:not(:empty)::before{content:"· " attr(data-cc-voor9)}
table:has(td[data-cc-rol9]) td[data-cc-rol9][data-cc-voor9]:not([data-cc-rol9="sub"]):not(:empty)::before{content:attr(data-cc-voor9);font-weight:400;color:var(--muted)}
table:has(td[data-cc-rol9]) [data-cc-na9]:not(:empty)::after{content:attr(data-cc-na9)}
table:has(td[data-cc-rol9]) td[data-cc-rol9="actie"]{order:5;flex:1 1 100%;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;white-space:normal!important}
table:has(td[data-cc-rol9]) td[data-cc-rol9]:is([data-cc-rol9="bedrag"],[data-cc-rol9="sub"],[data-cc-rol9="voor"]):empty,table:has(td[data-cc-rol9]) td[data-cc-rol9="weg"]{display:none!important}
/* de band van r356 (Z25-3/Z25-4 A: een lijn op de PLAKCELLEN, omdat die over de ring van de rij heen lagen) hoort niet op een kaartje: er plakt niets meer, de ring van
   de rij (outline) is heel — de band tekende er losse streepjes boven en onder de naam en een doosje om het nummer bij (gezien op 390 px, Relatiebeheer) */
table:has(td[data-cc-rol9]) :is(tbody,tfoot)>tr>td{background-image:none!important}
}

/* ---------- § B/§ C — het filterblok inklapbaar op de telefoon (Z27-6 (4); Z27-7 (3)) ----------
   Op ≤ 720 px blijft het zoekveld staan met een knop „Filters (n)”; de rest klapt uit. In een tabelkop (Relatiebeheer, Debiteurenbeheer, de postenlijsten)
   verdwijnen de filtervelden tot je de knop gebruikt; de sorteerknoppen en de andere knoppen in de kop blijven. Op tablet en computer is er geen knop. */
@media (min-width:721px){.cc-filt9-knop{display:none!important}}
@media (max-width:720px){
.cc-filt9:not(.open)>:not(.cc-filt9-altijd):not(.cc-filt9-knop){display:none!important}
.cc-filt9-knop{white-space:nowrap;justify-self:start}
.cc-filt9-knop:not(.cc-filt9 .cc-filt9-knop){margin:0 0 8px}
table.cc-filt9-dicht>thead>tr>:is(th,td):has(input,select){display:none!important}
table:has(td[data-cc-rol9])>thead>tr>:is(th,td):has(button):not(:has(input,select)){flex:1 1 100%;display:flex!important;flex-wrap:wrap;gap:6px;white-space:normal}
}

/* ---------- § G3 — de afsluitwizard in stappen (Z27-10 (4) „Stappen met voortgangsbalk”) ---------- */
.cc-wiz9-balk{display:flex;gap:6px;list-style:none;margin:0 0 14px;padding:0}
.cc-wiz9-st{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--bdr);border-radius:10px;background:var(--surf2);font-size:12px;color:var(--muted)}
.cc-wiz9-st.nu{border-color:var(--blu);color:var(--txt);font-weight:600}
.cc-wiz9-nr{flex:0 0 20px;height:20px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;border:1.5px solid currentColor;box-sizing:border-box}
.cc-wiz9-st.nu .cc-wiz9-nr{background:var(--blu);border-color:var(--blu);color:#fff}
.cc-wiz9-st.klaar:not(.nu){color:var(--txtgrn)}
.cc-wiz9-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-wiz9-kop:focus{outline:none}

/* ---------- § D+E en § F4 — factuur, offerte en Administratiebeheer in secties (Z27-8 (3), Z27-10 (2)) ----------
   De wikkel is display:contents, dus op tablet en computer blijft het raster van twee kolommen precies zoals het was; op de telefoon (één kolom) klapt een dichte
   sectie in en toont de kop een samenvatting. */
.cc-sec9-kop{grid-column:1/-1;margin:14px 0 0;padding:0 0 4px;border-bottom:1px solid var(--bdr);font-size:11px;font-weight:600;letter-spacing:normal;text-transform:uppercase;color:var(--txt)}
.cc-sec9-sub{margin:10px 0 0;font-size:11px;font-weight:600;letter-spacing:normal;text-transform:uppercase;color:var(--muted)}
@media (max-width:720px){
.cc-sec9-inh.dicht{display:none}
.cc-sec9-knop{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:4px 0;background:none;border:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-align:left;cursor:pointer}
.cc-sec9-sam{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)}
.cc-sec9-pijl{margin-left:auto;font-size:12px}
}

/* ---------- § D4/E3 — één knoppenbalk overal (Z27-8 (1)): links Exporteer/Annuleren/Verwijderen, rechts de hoofdknop; op de telefoon plakt hij onderaan ----------
   Het factuurformulier: [Sluiten] links (de rode gloed van r98; de Sluiten-regel .modal-foot .cc-redhover{margin-left:auto} geldt hier niet), de melding wat er nog ontbreekt en de hoofdknop rechts; op de telefoon staat de melding op een eigen regel erboven. */
@media (max-width:720px){
/* de lijstvensters en de smalle vensters hebben hun eigen plakkende voet (bottom:-22px + margin-bottom:-22px, r144/r145): die NIET overschrijven — met
   bottom:0 schoof de voet 22 px over de laatste regel (s101 D1: Relatiebeheer op 360, de laatste rij half onder de voet) */
.modal-overlay.cc-cardmodal>.modal:not(.cc-lijstmodal):not(.cc-modalnarrow)>.modal-foot{position:sticky;bottom:0;z-index:5;background:var(--surf)}
}

/* ---------- § C4 — de btw: één venster met secties (Z27-7 (2)) ----------
   De lijst van een rubriek klapt uit onder de rubriekregel; zolang er een open is, staat het raster in één kolom (anders krijgt de lijst een halve breedte). */
.kb-tvorm.cc-btwsec9-open{grid-template-columns:minmax(0,1fr)!important}
.cc-btwsec9{margin:4px 0 10px;padding:8px 10px;border:1px solid var(--bdr);border-radius:10px;background:var(--surf)}
.cc-btwsec9-body>div:first-child{margin-bottom:6px}
.ob-line.cc-btwsec9-aan,.kb-line.cc-btwsec9-aan{background:var(--surf2);border-radius:6px}
.ob-line.clickable[aria-expanded] .ob-line-lbl::after,.kb-line.clickable[aria-expanded] .kb-line-lbl::after{content:" \25BE";color:var(--muted);font-size:11px}
.ob-line.clickable[aria-expanded="true"] .ob-line-lbl::after,.kb-line.clickable[aria-expanded="true"] .kb-line-lbl::after{content:" \25B4"}

/* § EXP (aanvulling): twee exportknoppen naast elkaar (btw-detail: PDF en Excel) — alleen de laatste duwt de rest naar rechts */
/* § C5/D4 (Z27-7 (3) en Z27-8 (1): „Exporteer LINKS, doorklik rechts”): in een knoppenbalk MET een exportknop (die duwt met margin-right:auto alles naar
   rechts) staan alle andere knoppen rechts bij elkaar. De Sluiten-regel van r98 (.modal-foot .cc-redhover{margin-left:auto}) splitste de vrije ruimte anders
   in tweeën en zette de doorklikknoppen ertussen midden in de balk (btw-detail: „Overnemen in MBZ” en „Rondrekening BTW”, gemeten op 1440). */
.modal-foot:has(.cc-exp,.io-icon-btn.export) .cc-redhover{margin-left:0!important}
/* ---- § A5/A6 (REGELS-Z27 § A, „zonder kaart, aanbeveling”; niet door Fable gemeten — gemeten door Opus 145e op 1024×768, 820×1180 en 1366×1024 met aanraking):
   op een TABLET MET AANRAKING (pointer:coarse, vanaf 721 px) krijgen de kleine doelen hetzelfde minimum van 24 px als de knoppen in r352 (WCAG 2.5.8): de koppen
   van de statuskolommen op de hub („Omzetbelasting ›”, was 16 px), „Boekjaar ▾” in de kop (13 px) en de links/knoppen in de voetregel (13 px). De tekst blijft
   even groot; alleen het aanraakvlak groeit. Een computer met muis of trackpad (pointer:fine) en de telefoon (r353 regelt de voetregel daar al) blijven zoals ze waren. */
@media (pointer:coarse) and (min-width:721px){
html body .cc-stcol-h.cc-stcol-link{display:flex;align-items:center;min-height:calc(24.2px/var(--ccZm,1))}
html body button.cc-boekjaar.cc-boekjaar{align-items:center;min-height:calc(24.2px/var(--ccZm,1))}
html body footer.copyright>a,html body footer.copyright>button{display:inline-flex;align-items:center;min-height:calc(24.2px/var(--ccZm,1));vertical-align:middle}
}

/* ========== r358 = v1.81.0 (Opus 146e, 30 sep 2026) — Sams besluiten van 30 sep ==========
   § ST — de statusregels (W5, SPEC 145e-c): rechts op de kopregel van Verkoopfacturen / Inkoopfacturen en bonnen / Banktransacties.
   Grijs = rustig, oranje = werk voor jou, rood = stuk; de hubkleur alleen nog voor het labeltje en het icoon. Nooit afgekapt (geen „…”).
   Past het niet naast de titel (721–1023 px: drie hubs naast elkaar op ± 175–276 px; ≤ 360 px), dan onder de titel — alle drie tegelijk (W34). */
/* De kleur van „werk voor jou”: #b45309 (--txtamb) haalt op de hubtint #edeff1 maar 4,36:1 — voor 11 px tekst te weinig (WCAG 1.4.3). #92400e (6,2:1) haalde
   het wel, maar las op 11 px als roestbruin, te dicht bij het rood van „Bankkoppeling werkt niet” (ΔE2000 14,4) — Sam 30 sep: „Verschilt de donkere oranje wel
   voldoende van de rode want dat was het doel?”. Daarom geler in plaats van donkerder: #8f5500 (amber) haalt 5,25:1 op de hub en staat ΔE 24,0 van #c81e1e.
   In het donker blijft het --txtamb (#f59e0b, 6,9:1; ΔE 32,8 van #f87171). Alleen voor de nieuwe plekken van r358. */
:root{--ccWerk9:#8f5500}
.cc-hubst9{font:inherit;font-size:11px;font-weight:600;letter-spacing:normal;line-height:1.3;white-space:nowrap;text-align:right;
  background:none;border:0;padding:0 2px;margin:0 0 0 auto;color:var(--mut2);display:inline-flex;align-items:center;min-height:24px;margin-top:-4px;margin-bottom:-4px;border-radius:6px}
button.cc-hubst9{cursor:pointer}
button.cc-hubst9:hover{text-decoration:underline;text-underline-offset:2px}
.cc-hubst9-verwerk,.cc-hubst9-bevestig{color:var(--ccWerk9)}
.cc-hubst9-fout{color:var(--txtred)}
.cc-hubst9-v{color:var(--txtgrn);white-space:pre}
.cc-hubst9-c{white-space:pre}
@media (min-width:721px) and (max-width:1023px),(max-width:360px){
.cc-wlkop9{flex-wrap:wrap!important;row-gap:2px!important}
.cc-hubst9{flex-basis:100%;margin-left:0;justify-content:flex-start;text-align:left;white-space:normal}
}
/* 721–759 px: de herhaalfactuurregel mag over twee regels (SPEC) */
@media (min-width:721px) and (max-width:759px){.cc-wlrow .cc-wlbtn{white-space:normal!important}}

/* § EXP (W37, Sam: „een exporteer knop … links in het zwart”): in een rapportscherm (cc-cardscreen) maakt .cc-cardscreen .btn elke knop wit (r145); de Exporteer van
   Balans en resultaat wordt zwart zoals in elk werkvenster. Alleen deze knop: de rest van de knoppen in de rapportschermen is de consistentieronde (Fable, W22/W24). */
.cc-cardscreen .iobar .btn.cc-brexp9{background:var(--txt)!important;color:var(--bg)!important;border:1px solid var(--txt)!important}
.cc-cardscreen .iobar .btn.cc-brexp9:hover{opacity:.86}

/* § BEV — de knop „Bevestigen” in de lijsten (W6; was het oranje vinkje „Klopt zo — vlag opheffen”): het woord zelf, in de kleur van „werk voor jou”. */
.cc-bevestig9{font-size:12px!important;font-weight:600!important;line-height:1.2!important;padding:3px 10px!important;min-height:24px;border-radius:999px!important;
  border:1px solid var(--ccWerk9)!important;color:var(--ccWerk9)!important;background:transparent!important;white-space:nowrap;flex-shrink:0;cursor:pointer}
.cc-bevestig9:hover{background:var(--tamb)!important}

/* § UIT — de uitslagregel na het inlezen (W7, kaart 145e-1): het uploadvak wordt één regel met de uitslag en een kruisje; klik je ernaast, dan lees je iets nieuws in. */
.upload-mini:has(.cc-upuit9){flex-direction:row!important;justify-content:flex-start!important;align-items:center!important;gap:10px!important;padding:6px 8px 6px 12px!important;
  min-height:36px!important;border-style:solid!important;text-align:left!important}
.upload-mini:has(.cc-upuit9-werk){border-color:var(--ccWerk9)!important}
.cc-upuit9{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;flex:1;min-width:0;font-size:12px;font-weight:600;color:var(--txt);text-align:left}
.cc-upuit9-t{color:var(--txt)}
.cc-upuit9-v{color:var(--txtgrn);white-space:pre}
.cc-upuit9-s{color:var(--mut2)}
.cc-upuit9-l{font:inherit;font-size:12px;font-weight:600;background:none;border:0;padding:0;margin:0;color:var(--ccWerk9);cursor:pointer;text-align:left;min-height:24px}
.cc-upuit9-l:hover{text-decoration:underline;text-underline-offset:2px}
.cc-upuit9-x{margin-left:auto;background:none;border:0;padding:0;font-size:16px;line-height:1;color:var(--mut2);cursor:pointer;min-width:24px;min-height:24px;border-radius:6px;flex-shrink:0}
.cc-upuit9-x:hover{color:var(--txt)}

/* =====================================================================================================================================
   Z33 = REGELS-Z33 van Fable Z33 deel 2 (Sam, zo 4 okt 2026): het fundament (kaart Z33-1/1b: letters A · kleur A · donker A · hoeken A),
   de hub (kaart Z33-2b: vlak 1 „wit met haarlijn”; kaart Z33-1b: de kaart Balans en resultaat in het midden, de boekjaarpil rechts),
   de lijsten (kaart Z33-3: regels A · bedrag A · kolomkop A) en het werkvenster (kaart Z33-3 + Z33-3b: zo hoog als de inhoud, in het midden
   bij openen en daarna vast — dat laatste is JS-deel J4). Getoetst in Fables proef (z33-uitstraling/, platen Z33-01…24); meter toets-z33.py.
   Staat VÓÓR het blok van r360: de latere, specifiekere blokken (r360 = Z29, r361 = Z30, 151e = Z31/Z32) winnen waar ze iets anders zeggen.
   NIET in dit blok (Sam koos „zo laten” of het schuift naar Fable Z34): de kop (Z33-2 Kop C), de vorm van het kerngetal (Z33-2b 2D — alleen
   de maat volgt de schaal), de PRO-regels (3C), het welkomstblok (Welkom C), de venstertitel en het kruisje, de knoppen, lege schermen,
   meldingen en beweging (Z33-4…6 → Z34).
   155e-voorwerk (Opus 155e, ma 5 okt 2026) — afwijkingen van REGELS-Z33 § 1, elk met reden: (a) § LIJST staat NIET in dit blok: Fable Z34 vervangt
   „Regels A” door zwevende regels (REGELS-Z34; het oude stuk staat apart in 155e-voorwerk/z33-lijst-WACHT-Z34.css) · (b) de .cc-top-selectors van
   § HUB zijn weg (r362: .cc-top bestaat niet meer) · (c) het woordmerk (.logo, .ld-logo) houdt zijn letterspatiëring: Kop C = „zo laten” ·
   (d) th krijgt 600 zoals b en strong (de browser zet 700) · (e) de pijl › (.cc-hl-c) in g6 i.p.v. g5: g5 haalt op wit 3,3 : 1 en in het donker
   4,1 : 1, de schermkeur van de keten eist 4,5 : 1 (WCAG 1.4.3) · (f) in het donker wordt --txtamb #f0b45a, dezelfde waarde als het blok van
   Fable Z34 (8,8 : 1 op #1e2024, 8,0 : 1 op #26282d; REGELS § 3 noemde #f59e0b, maar het blok vergat het donker: #8f5500 op donker = 2,4 : 1) ·
   (g) in het donker is --blu licht (#e7e8ea): een VLAK in var(--blu) krijgt daar donkere letters (#16181c,
   zoals de zwarte pil van Z29 in het donker) — anders wit op bijna-wit (1,2 : 1: „Suppletie indienen”, de stappen 1-2-3 van Indienen) ·
   (h) de focusring blijft zoals hij is (§ KLEUR: „Sam, Z33-1 Kleur A”): een eigen token --ccRing9 met de waarden van nu (licht #0369a1, donker
   #60a5fa) — J2 laat de ringregels dat token lezen, want --blu/--txtblu worden grijs (zwart op een zwarte pil = geen ring, WCAG 2.4.7/1.4.11) ·
   (i) twee regels van de app die in het stijlblok van de landing staan (.cc-seclink 8 → 10 en het abonnementslabel 800 → 600): zie onderaan ·
   (k) § VENSTER pas vanaf 501 px hoog: liggend op de telefoon blijft het venster schermvullend (zoals nu).
   ===================================================================================================================================== */

/* ===== Z33 § TOKENS — één warme grijsreeks (KL1). Licht g0…g8; in het donker de kleuren die er al zijn. ===== */
:root{--ccG0:#ffffff;--ccG1:#f6f6f4;--ccG2:#efefec;--ccG3:#e4e4e0;--ccG4:#d3d3ce;--ccG5:#8d8d87;--ccG6:#6b6b66;--ccG7:#45453f;--ccG8:#111111}
html[data-theme="dark"]{--ccG0:#1e2024;--ccG1:#141519;--ccG2:#26282d;--ccG3:rgba(255,255,255,.09);--ccG4:rgba(255,255,255,.16);--ccG5:#7d8086;--ccG6:#a1a3a7;--ccG7:#c9cacd;--ccG8:#e7e8ea}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]){--ccG0:#1e2024;--ccG1:#141519;--ccG2:#26282d;--ccG3:rgba(255,255,255,.09);--ccG4:rgba(255,255,255,.16);--ccG5:#7d8086;--ccG6:#a1a3a7;--ccG7:#c9cacd;--ccG8:#e7e8ea}}
/* 155e (h): de focusring blijft zoals hij is — licht #0369a1, donker #60a5fa (de waarden van v1.85.0); gelezen door de ringregels (J2) */
:root{--ccRing9:#0369a1} /* 155e (h) */
html[data-theme="dark"]{--ccRing9:#60a5fa} /* 155e (h) */
@media (prefers-color-scheme:dark){html:not([data-theme="light"]){--ccRing9:#60a5fa}} /* 155e (h) */

/* ===== Z33 § KLEUR — geen blauw in de app (KL2) en één amber (KL3). app.js zet --txtblu/--blu/--txtamb in een React-stijlblok op :root
   (0,1,0, ná deze link); html:root (0,1,1) wint dus. Het donker van index.html (html[data-theme="dark"], 0,1,1) overstemmen we met (0,2,1).
   De focusring blijft zoals hij is (Sam, Z33-1 Kleur A). De losse hexwaarden in app.js/index.html: JS-deel J2. ===== */
html[data-theme="dark"]:root{--blu:#e7e8ea;--txtblu:#e7e8ea;--tblu:#26282d;--txtamb:#f0b45a}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]):root{--blu:#e7e8ea;--txtblu:#e7e8ea;--tblu:#26282d;--txtamb:#f0b45a}}
/* 155e (g): een vlak in var(--blu) draagt witte letters; in het donker is --blu licht → donkere letters (zoals --ccKzT9 van Z29) */
html[data-theme="dark"] :is(.btn.cc-blue,.kb-info:hover,.bd-flow-num,.io-icon-btn.abo-pro,.io-icon-btn.indienen,.btn-belastingdienst,.tag-blue,.scan-icon.b,.cc-wiz9-st.nu .cc-wiz9-nr){color:#16181c!important}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) :is(.btn.cc-blue,.kb-info:hover,.bd-flow-num,.io-icon-btn.abo-pro,.io-icon-btn.indienen,.btn-belastingdienst,.tag-blue,.scan-icon.b,.cc-wiz9-st.nu .cc-wiz9-nr){color:#16181c!important}}

/* ===== Z33 § LETTERS — zeven maten (11·12·13·14·16·18·22), drie gewichten (400 tekst · 500 labels en links · 600 koppen en bedragen),
   geen letterspatiëring in gewone tekst, cijfers van gelijke breedte (T1–T5). De inline maten van app.js gaan in J1 naar de schaal;
   de attribuutregel hieronder is het vangnet voor wat de bouw mist. ===== */
:root body,:root .cc-hl-i,:root .cc-hl-i *,:root .cc-v9v,:root .cc-wlkop9-t,:root .cc-hubst9,:root .cc-hubst9 *,:root .admin-switch,:root .cc-hub-t,
:root .ccc-l,:root .ccc-v,:root .cc-bt td,:root .cc-bsub,:root .cc-bper9,:root .modal-title,:root .cc-fl9 *,:root .card-title,:root .card-sub,
:root .st-badge,:root .btn,:root .cc-dlgb,:root .hist-tag,:root .upload-tag{letter-spacing:normal!important}
:root [style*="font-size: 8px"],:root [style*="font-size: 9px"],:root [style*="font-size: 9.5px"],:root [style*="font-size: 10px"],:root [style*="font-size: 10.5px"]{font-size:11px!important}
:root .cc-plan-tag{font-size:11px!important;letter-spacing:.04em!important;padding:1px 5px!important}
:root input,:root select,:root textarea,:root button{font-family:inherit!important}
:root .ccc-v,:root .cc-bt td,:root .cc-fl9-bed,:root .cc-fl9-dat,:root .cc-fl9-nr,:root td,:root .cc-r{font-variant-numeric:tabular-nums}
:root b,:root strong,:root th{font-weight:600!important}
:root [style*="font-weight: 700"],:root [style*="font-weight: 800"],:root [style*="font-weight: 900"],:root [style*="font-weight: bold"]{font-weight:600!important}
/* de +0,5 px spatiëring staat op tientallen plekken in index.html en app.js (J1 haalt ze weg); dit is het vangnet. Kleine HOOFDLETTERlabels
   (PRO/MAX, de uploadtags) houden .04 em; het woordmerk (.logo, .ld-logo) houdt zijn -1px (Kop C, 155e). */
:root body *:not(.cc-plan-tag):not(.upload-tag):not(.logo):not(.logo *):not(.ld-logo):not(.ld-logo *){letter-spacing:normal!important}
:root .upload-tag{letter-spacing:.04em!important}

/* ===== Z33 § HOEKEN — 6 (veld, badge) · 10 (vlak) · 14 (hub) · 16 (venster) · rond (pil, profiel) (T6). Labels kleiner dan 20 px
   (het letterblokje van Z30, PRO/MAX) houden 4 px: 6 px maakt van zo'n blokje een rondje. ===== */
:root .modal .dep-input,:root .filter-bar input,:root .filter-bar select,:root .modal input[type="text"],:root .modal input[type="search"],:root .modal select{border-radius:6px!important}

/* ===== Z33 § DONKER — zachte randen in plaats van de witte lijn (KL4); zwevende vlakken een stap lichter; het laadscherm in de kleur
   van de app, zonder flits (KL5). ===== */
#loader{background:#f6f6f4}
html[data-theme="dark"] #loader{background:#141519!important}

/* ===== Z33 § HUB — richting 1: witte hubs met een haarlijn op een warm lichtgrijze pagina, geen schaduw, geen streep onder de hubkop,
   het hubicoon 18 px in de tekstkleur (Z33-2b 1A + plaat Z33-18/19/20/22). De kop van de app blijft zoals hij is (Z33-2 Kop C). ===== */
:root body,:root .cc-bento-bg{background:var(--ccG1)!important}
:root .cc-hub-t{font-size:16px!important;font-weight:600!important;color:var(--ccG8)!important}
:root .cc-hl-i{font-size:13px!important;font-weight:500!important;padding:4px 6px!important}
:root .cc-hl-i .cc-hl-c{color:var(--ccG6)!important;font-weight:400!important}
:root .cc-verkoop .cc-nieuw2col9{grid-template-columns:auto auto!important;justify-content:start!important;column-gap:28px!important}
:root .cc-nieuw2col9 .cc-tophov>div:first-child{overflow:visible!important;text-overflow:clip!important}
:root .cc-wlkop9-t{font-size:12px!important;font-weight:600!important;color:var(--ccG6)!important}
:root .cc-hubst9{font-size:12px!important;font-weight:500!important}
:root .cc-stcol-h{font-size:13px!important;font-weight:500!important}
:root .cc-stcol-h .cc-hl-c{color:var(--ccG6)!important;font-weight:400!important;font-size:13px!important}
:root .cc-stlbl9{font-size:12px!important;font-weight:400!important;color:var(--ccG6)!important}
:root .st-badge{font-weight:500!important}
/* het kerngetal: plek, woord en vorm zoals nu (Z33-2b 2D); alleen de maat en het gewicht volgen de schaal (Letters A): 15/800 → 16/600 */
/* de kaart Balans en resultaat: een licht vlak in de witte hub */
:root .cc-bt td{font-size:13px!important}
:root .cc-bsub b,:root .cc-bsub strong{color:var(--ccG8)!important;font-weight:600!important}
/* de uploadvakken */
:root .upload-mini{border:1px dashed var(--ccG4)!important;background:transparent!important}
:root .upload-mini-txt{font-size:12px!important;color:var(--ccG6)!important}

/* ===== Z33 § BOEKH — de kaart Balans en resultaat in het MIDDEN van de hub Boekhouding, de boekjaarpil met „afsluiten ›” RECHTS naast
   de kaart, de knoppen Kas · Investeringen · Memoriaal · Grootboek links zoals in elke hub (Sams idee 18.29 + kaart Z33-1b Boekjaarpil A).
   Pas vanaf 1280 px; smaller (tablet) en op de telefoon blijft alles zoals nu — op de telefoon de pil gecentreerd boven de kaart.
   De greep van „Indeling aanpassen” (Z31) houdt de rechterbovenhoek van de hubkop: de pil staat naast de kaart, niet in de kop. ===== */
@media (min-width:1280px){
  .cc-h3 .cc-boekh-cols.cc-boekh9{display:grid!important;grid-template-columns:minmax(max-content,1fr) minmax(0,860px) minmax(max-content,1fr)!important;grid-template-areas:"links kaart pil"!important;column-gap:24px!important;align-items:stretch!important}
  .cc-h3 .cc-boekh-btns{display:contents!important}
  .cc-h3 .cc-boekh-bal{grid-area:kaart!important;width:100%!important;max-width:860px!important;justify-self:center!important;margin:0!important}
  .cc-h3 .cc-bj-menu{left:auto!important;right:0!important}
}

/* ===== Z33 § VENSTER — het werkvenster zo hoog als de inhoud, tot het maximum van nu (Z33-3 Venster + Z33-3b A). 100vh staat in de
   ingezoomde app (--ccZm .945): delen door --ccZm, anders wordt het maximum 736 in plaats van 786 px (gemeten). In het midden bij openen
   en daarna vast = JS-deel J4. De uitleg onder de titel 13 px grijs (het inklappen zelf: werkpakket G1). ===== */
/* 155e (k): ook (min-height:501px) — liggend op de telefoon (852 × 393, 740 × 360) blijft elk venster schermvullend, zoals nu (s97 L1, s99 C2);
   zonder deze grens won deze regel (0,4,1) van de liggende regel in index.html (0,3,1) en werd het venster daar zo hoog als de inhoud. */
@media (min-width:721px) and (min-height:501px){
  :root body .modal-overlay.cc-cardmodal>.modal{bottom:auto!important;height:auto!important;max-height:calc(100vh / var(--ccZm,1) - var(--ccHdrH,60px) - var(--ccFtrH,52px))!important}
}
:root .modal-hdr+div:not([class]){font-size:13px!important;color:var(--ccG6)!important;line-height:1.5!important}
/* 155e (i): twee regels van de APP staan in het stijlblok BINNEN <section id="cc-landing"> (index.html). Dat stuk blijft in de standaardmodus
   byte voor byte (de pen r357-9; de landing krijgt een eigen sessie ná Z35), dus zetten we ze hier: .cc-seclink (de kleine knoppen van Accountbeheer,
   Charlie's takenrij, Aangifte overnemen) hoek 8 → 10 (J5), en het abonnementslabel in de app 800 → 600 (J1: .cc-abonaam9 staat later in de pagina
   dan de 600 van .cc-plan-tag uit app.js en won daardoor). De landing zelf gebruikt .cc-seclink en .cc-plan-tag niet: zij verandert niet. */
 /* 155e (i) */
:root .cc-plan-tag{font-weight:600} /* 155e (i) */
/* ===== einde Z33 ===== */
/* ===== 156e-D1 (punt D van 151e, WCAG 2.4.3): op de telefoon staat de kop in twee rijen (logo + Indeling + Account boven, de wissel eronder),
   maar Tab volgde de bron: logo → wissel → (54–61 px omhoog) Indeling → Account. reading-flow laat Tab de rijen volgen; de computer verandert niet
   (één rij, bron = beeld). Chrome/Edge ≥ 137, Samsung Internet ≥ 30, Opera ≥ 121; Safari (ook iOS) en Firefox kennen het nog niet en houden de
   oude volgorde. ===== */
@media(max-width:720px){html body .hdr{reading-flow:grid-rows}}
/* ===== r364 (Opus 154e) — eigen deel, direct ná 156e-D1 en vóór MEMO-4 (het Z34-blok blijft het laatste deel, toets-z34 S1). Zwaar genoeg om de regels van Z29–Z34 te winnen.
   (1) REGELS-Z34 § 8.2 (Fable 5 okt 19.59): een knop die echt niet kan — herkenbaar uit. De groene hoofdknop (.cc-hoofd9) is nooit uitgeschakeld (J8); een TWEEDE knop die
       niet kan: vlak g1, rand g3, letter g5, geen hover, cursor not-allowed; donker vlak #1a1c20, rand rgba(255,255,255,.08), letter #7d8086. Een icoonknop zonder vlak: alleen de letter.
   (2) Wat B′ per ongeluk terugdraaide van eerdere besluiten van Sam (niet in de lijst „bewuste afwijkingen”, REGELS-Z34 § 4):
       · de hoofdknop staat RECHTS in de voet (Z29-3 A: „de doe-knop rechtsonder”) — ook als er geen Annuleren naast staat (het blok zette margin-left:0);
       · de afsluitknop met open punten (cc-werk9) blijft werk = amber (Z29 § KN; K5 van Z34: amber alleen voor werk), niet groen gevuld;
       · de terugpijl ‹ met de naam van het vorige venster (r288-B, Sam 11 sep: „in dezelfde stijl als het kruisje en er gelijk links van”, „met naam erin”) houdt zijn
         naam: even hoog en rond als het kruisje, maar zo breed als nodig (het blok zette elk .modal-close op 32 breed). ===== */
html:root body button.btn.btn.btn.btn.btn.btn.btn.btn:disabled:not(.cc-hoofd9),html:root body button.btn.btn.btn.btn.btn.btn.btn.btn:disabled:not(.cc-hoofd9):hover{background:#f6f6f4!important;background-image:none!important;border-color:#e4e4e0!important;color:#8d8d87!important;box-shadow:none!important;opacity:1!important;filter:none!important;cursor:not-allowed!important}
html:root[data-theme="dark"] body button.btn.btn.btn.btn.btn.btn.btn.btn:disabled:not(.cc-hoofd9),html:root[data-theme="dark"] body button.btn.btn.btn.btn.btn.btn.btn.btn:disabled:not(.cc-hoofd9):hover{background:#1a1c20!important;border-color:rgba(255,255,255,.08)!important;color:#7d8086!important}
html:root body button:disabled:not(.btn):not(.cc-hoofd9){color:#8d8d87!important;cursor:not-allowed!important}
html:root[data-theme="dark"] body button:disabled:not(.btn):not(.cc-hoofd9){color:#7d8086!important}
html:root body .modal-overlay .modal :is(.modal-foot,.iobar) .btn.btn.btn.btn.cc-hoofd9.cc-werk9,html:root body .modal-overlay .modal :is(.modal-foot,.iobar) .btn.btn.btn.btn.cc-hoofd9.cc-werk9:hover{background:#fdf3e1!important;color:#8f5500!important;border:1px solid #8f5500!important;box-shadow:none!important}
html:root[data-theme="dark"] body .modal-overlay .modal :is(.modal-foot,.iobar) .btn.btn.btn.btn.cc-hoofd9.cc-werk9,html:root[data-theme="dark"] body .modal-overlay .modal :is(.modal-foot,.iobar) .btn.btn.btn.btn.cc-hoofd9.cc-werk9:hover{background:rgba(240,180,90,.12)!important;color:#f0b45a!important;border-color:#f0b45a!important}
html:root body .modal-overlay .modal .modal-close.cc-mterug9{width:auto!important;min-width:32px!important;padding:0 12px 0 10px!important}
/* (3) De zwevende regels — wat REGELS-Z34 § 1 („bedrag … telefoon links onder de naam”) en Sams Z27 (d) zeggen en het blok niet deed (s104 Z1): op de telefoon staat het
   bedrag LINKS ONDER de naam en blijft de naam heel (niet afgekapt); de melding van een gevlagde regel (OCR: „controleer de datum”) staat op de computer ONDER de regel over de
   volle breedte — niet als smalle kolom ernaast (dan schoven datum, nummer en bedrag van die regel uit de pas met de rest). */
html:root body .modal-overlay .modal .cc-fl9-rij.cc-fl9-rij.vlag{flex-wrap:wrap!important;flex-shrink:0!important}
html:root body .modal-overlay .modal .cc-fl9-rij.cc-fl9-rij.vlag>.cc-fl9-vlag{flex:1 1 100%!important;min-width:0!important;padding:0 16px 10px 51px!important}
@media (max-width:720px){
  html:root body .modal-overlay .modal .cc-fl9-rij.cc-fl9-rij .scan-icon.cc-fl9-ico{grid-row:1/span 3!important}
  html:root body .modal-overlay .modal .cc-fl9-rij.cc-fl9-rij .cc-fl9-nmt{grid-column:2/span 3!important;grid-row:1!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere!important}
  html:root body .modal-overlay .modal .cc-fl9-rij.cc-fl9-rij .cc-fl9-bed{grid-column:2!important;grid-row:2!important;text-align:left!important;justify-self:start!important}
  html:root body .modal-overlay .modal .cc-fl9-rij.cc-fl9-rij .cc-fl9-sub{grid-column:2!important;grid-row:3!important}
  html:root body .modal-overlay .modal .cc-fl9-rij.cc-fl9-rij .inv-del{grid-column:3!important;grid-row:2/span 2!important;align-self:center!important}
  html:root body .modal-overlay .modal .cc-fl9-rij.cc-fl9-rij .cc-fl9-klik>:is(span[title],.cc-bevestig9){grid-column:4!important;grid-row:2/span 2!important;align-self:center!important;justify-self:end!important}
}
/* (4) De focusring blijft (REGELS-Z34 § 1 „de focusring … blijft zoals hij is”; Sam Z33-1 Kleur A; 155e (h)): het blok zette bij de velden en de keuzepil (.ed-pill) op :focus
   „outline:none” met een inktrand — dan viel de ring van r354 weg (s101 A1/A2/C1). De inktrand blijft; bij toetsenbordfocus komt de ring er weer bij (2 px óp het scherm). */
html:root body .modal-overlay .modal.modal :is(.dep-input,select.ed-pill,.filter-bar input,textarea):focus-visible{outline:calc(2px / var(--ccZm,1)) solid var(--ccRing9)!important;outline-offset:calc(2px / var(--ccZm,1))!important}
/* (5) De hub Boekhouding op de telefoon: de boekjaarpil en „afsluiten ›” staan naast elkaar (één rij, Z30/Z31) — de 8 px boven de werkregel die het blok voor de
   computer zet (daar staat hij ónder de pil) schoof hem op de telefoon 6 px uit het midden (s108 HUB2). */
@media (max-width:720px){html:root body .cc-bento .cc-h3 .cc-boekh9 .cc-bjwrap9 .cc-bjst9{margin-top:0!important}}
/* (6) De voet van Z29 (§ KN): „Terug naar concept” e.d. (.cc-links9) staat LINKS, naast Exporteer — het blok gaf Exporteer margin-right:auto en duwde ze naar rechts (s107 GESCH1). */
html:root body .modal-overlay .modal .modal-foot.modal-foot:has(>.cc-links9)>.cc-exp{margin-right:0!important}
html:root body .modal-overlay .modal .modal-foot.modal-foot>.cc-links9{margin-right:auto!important}
/* (7) De bevestigingskaart van de app (ccBevestig · ccWeg9 · ccMelding: het kaartje in [data-cc-modal], inline „border:var(--ccMrand)”) volgt in het donker de
   vensters van look B′ (REGELS-Z34 § 2: „border:1px solid rgba(255,255,255,.08)” + diepe schaduw; de hub: rand 0 + ring): r193 („één regel voor ALLE modals”)
   gaf beide de lichte rand #e9ecee — het blok nam hem bij .modal weg, niet bij dit kaartje (s6-r193 1g/1h). Licht verandert niets (daar is --ccMrand leeg). */
html:root[data-theme="dark"] body [data-cc-modal="1"]>div{--ccMrand:0 none;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 24px 64px rgba(0,0,0,.55)!important}
/* (8) De filterrij van Klanten/Leveranciers (r289-B7) plakt op var(--ccRlKop9, 37px) = de koprij in layout-pixels (6 + 6 + knop 24 + rand 1). Het blok maakt de
   kolomknop 24 px ÓP het scherm (min-height calc(24.2px / var(--ccZm,1))) — de koprij werd 1,6 px hoger en de filterrij schoof er 1 px onder (s58 B7). */
html:root body .modal-overlay .modal{--ccRlKop9:calc(13px + 24.2px / var(--ccZm,1))}
/* (9) De omslagpunten van r349 (Sam 25 sep: „Verkoopofferte en Verkoopfactuur naast elkaar, ook in dit smalle scherm”; inkorten pas als het echt niet past; de uitleg
   onder E-mailadressen/Bankkoppelingen alleen als hij op één regel past) waren geijkt op de oude maten. Z33 § HUB (de kolommen auto auto, het label 13/500, niet meer
   afgekapt) en Z34 (de acties: rondje 36 + 12 + label, kolomafstand 32; de uitleg 12 px) verschoven ze — gemeten 6 okt 13.4x in CSS-px van de container (zonder zijn
   padding 2 × 24): de volle teksten passen vanaf 333 (was 286), de korte vanaf 226 (was 196); de uitleg van E-mailadressen vanaf 297 (was 276), die van Bankkoppelingen vanaf
   345 (was 322). Zonder dit deel stak „Verkoopfactuur” op 800–840 en 1040–1160 px buiten de hub en liep de uitleg op 1040 en 1160–1200 px over twee regels (s96 V1,
   A1–A3). Alleen op de computer: op de telefoon kiest Z34 de korte labels en mag de uitleg omlopen (r349 A5). */
@media (min-width:721px){
  @container ccvk9 (min-width:226px) and (max-width:332.99px){
    html:root .cc-bento .cc-nieuw2col9 .cc-v9v{display:none!important}
    html:root .cc-bento .cc-nieuw2col9 .cc-v9k{display:inline!important}
  }
  @container ccvk9 (max-width:225.99px){
    html:root .cc-bento .cc-verkoop .cc-nieuw2col9{grid-template-columns:36px 36px!important}
    html:root .cc-bento .cc-nieuw2col9 .cc-v9v{display:inline!important}
    html:root .cc-bento .cc-nieuw2col9 .cc-v9k{display:none!important}
    html:root .cc-bento .cc-nieuw2col9 .cc-tophov{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
  }
  @container ccact9 (max-width:296.99px){html:root .cc-bento .cc-inkoop .cc-a9sub{visibility:hidden!important;white-space:nowrap!important;overflow:hidden!important}}
  @container ccact9 (max-width:344.99px){html:root .cc-bento .cc-bank .cc-a9sub{visibility:hidden!important;white-space:nowrap!important;overflow:hidden!important}}
}
/* (9b) De statusregel boven het uploadvak (r358: de titel en „x te verwerken ›”) gaat tussen 721 en 1023 px onder elkaar staan (index.html/cc-layout, r358). Sinds Z34 J7
   is de pil langer („100 te verwerken ›”, 123 px): op 1024–1047 px liep „Inkoopfacturen en bonnen” in Inkoop daardoor over twee regels (de titel 144 + de pil 123,5 + 6 >
   de rij 271) en stond het uploadvak van Inkoop 5 px lager dan dat van Verkoop en Bank (s96 A1, 1040 px). De band loopt nu door tot en met 1079 px (bij 1080 past ook een
   telling van vier cijfers nog: de rij 284). Dezelfde regels als r358, dus in alle drie de hubs dezelfde stand. */
@media (min-width:1024px) and (max-width:1079px){
  html:root .cc-bento .cc-wlkop9{flex-wrap:wrap!important;row-gap:2px!important}
  html:root .cc-bento .cc-hubst9{flex-basis:100%!important;margin-left:0!important;justify-content:flex-start!important;text-align:left!important;white-space:normal!important}
}
/* (10) Het balansveld op de telefoon (r349 D7: „geen woord breekt middenin”, 360–1728 px): Z33/Z34 zetten de cellen op 13 px (was 12) en het veld werd 8 px smaller —
   op 360 px brak „Vennootschapsbelasting” in de resultatenrekening (de cel 64 % = 148 px binnen, het woord 151 px). Bij een smal veld krijgt de naam 68 % en het
   bedrag 32 % (ook een bedrag in miljoenen past nog); gemeten 6 okt 13.5x: geen breuk meer vanaf 360 px, geen bedrag over zijn cel. Op 320 mag hij breken (r349). */
@container ccbf9 (max-width:299.99px){
  html:root .cc-bento .cc-boekh-bal table.cc-bt td:first-child:nth-last-child(2){width:68%!important}
  html:root .cc-bento .cc-boekh-bal table.cc-bt td:last-child:nth-child(2){width:32%!important}
}
/* (11) De ondertitels in de bovenste rij (r290 Q1, Sam: „kop en ondertitel op dezelfde hoogte als E-mailadressen koppelen”): sinds Z33/Z34 stond de uitleg onder
   „E-mailadressen koppelen” / „Automatische bankkoppelingen” 6,7 px lager dan „Nieuwe offerte” / „Nieuwe factuur” (de kop 14 px met regelhoogte 18,9 en 4 px marge
   eronder; het label van Verkoop 14 px met regelhoogte normal en 2 px). Hier dezelfde opbouw als Verkoop: regelhoogte normal, geen marge eronder, en de marge erboven
   9 → 2,33 px zodat de kop (het blok is midden uitgelijnd, 54 hoog) precies blijft staan. Gemeten 6 okt 14.0x op 1440: de koppen 163,58 = 163,58, de ondertitels
   181,45 / 182,33 (was 188,16); het blok blijft 51 hoog (s59 Q1, s96 A1/A2). Alleen op de computer: op de telefoon staat het blok alleen in zijn hub. */
@media (min-width:721px){
}
/* (12) Shift+Tab door de rijen van een lijst (s101 D1, WCAG 2.4.11): de browser zet de gefocuste rij `scroll-padding-top` onder de bovenrand van het schuifvak.
   Dat was 80 px (index.html, r354) — sinds Z34 is de vaste kop van een lijst op de computer hoger (de kolomkop + de filterrij = 85,6 CSS-px: de koprij met de knop van
   24 px óp het scherm, (8)) en op de telefoon is de vaste vensterkop 116 px hoog (de titel 18/600 en de zoekregel). Gemeten 6 okt 14.2x in Relatiebeheer (110 rijen):
   terug met Shift+Tab stond elke 8e rij 5,4 px onder de filterrij (1440) en op 360 lagen twee rijen half onder de vensterkop. Nu: computer --ccRlKop9 + 54 px (± 92),
   telefoon 124 px; vooruit (de onderkant) blijft. De tabletregel (pointer:coarse, 124 px) blijft zoals hij was. */
@media (pointer:fine){html:root body div:has(> table > tbody > tr[data-cc-rij9]){scroll-padding-top:calc(var(--ccRlKop9, 37px) + 54px)!important}}
@media (max-width:720px){html:root body .modal:has(tr[data-cc-rij9]){scroll-padding-top:124px!important}}
/* (13) De kop van de landing (r282/r287, Sam 10–11 sep: de melding „Cijferchef is nog niet live” precies in het midden tussen het einde van het woordmerk en het
   einde van „bv” in de h1): Z33 liet de landing bewust ongemoeid, maar zijn vangnetregel `:root body *:not(.cc-plan-tag)…{letter-spacing:normal!important}` raakte ook
   `#cc-landing h1{letter-spacing:-.5px}` (index.html). De h1 werd 23 px breder („bv” eindigde op 860,4 i.p.v. 837,2 op 1920) en de melding stond 9,3 px naast het midden
   (s50-1a). Hier de letterafstand van de landing terug, alleen voor die h1. */
html:root body #cc-landing h1{letter-spacing:-.5px!important}
/* (14) Kaart 154e-1 vraag 2 (Sam di 6 okt 15.39: „A want de prullenbak is een redmiddel voor herstel; eens?” = A · rood omrand): „Verwijderen” in een
   GEOPEND item (.cc-del9, r291-Q1e — de knop die de vraag „Deze factuur verwijderen?” opent) blijft rood omrand, zoals de knop in die vraag (.cc-dlgb-rood)
   en elke .cc-rood9 (REGELS-Z34 K/§ 116: een tweede knop met rode letter en rode rand). De tweede-knopregel van Z34 maakte hem grijs (s58 A6, s60 Q1e). */
html:root body .modal-overlay .modal .btn.btn.btn.cc-del9.cc-del9,html:root body .modal-overlay .modal .btn.btn.btn.cc-del9.cc-del9:not(:disabled):hover{
  border:1px solid var(--cc34-rood)!important;color:var(--cc34-rood)!important}
/* (15) Een GEOPEND item in een factuurlijst (de werklijst, Verkoop- en Inkoopfacturen: __invPanel in de regel): Z34 maakte de regel op de computer een
   flexrij van één regel (52 hoog), en het item kwam daardoor NAAST de regel te staan — 390 px smal, half buiten de kaart, „Verwijderen” niet meer links in
   de voet (gemeten 6 okt 15.4x op 1728: de regel 1545 breed, het item 390). Het item breekt nu af naar een eigen regel over de hele breedte, zoals in
   v1.86.0; de kaart krijgt onderin 16 px lucht. Niet in de banklijst (.cc-bk9: andere kinderen) en niet op de telefoon (daar is de regel geen flexrij).
   Én: de lijst is een flexkolom met een schuifbalk, en de min-height van 52 px (Z34) verving min-height:auto — daarmee mocht elke regel krimpen tot 52 px
   zodra de lijst langer was dan het venster, dus ook de geopende (52 hoog, het item er 384 px overheen). Een regel krimpt nooit (flex-shrink 0, ook in de banklijst). */
@media (min-width:721px){
  html:root body .modal-overlay .modal .cc-fl9-rij{flex-shrink:0!important}
  html:root body .modal-overlay .modal .cc-fl9-rij:not(.cc-bk9):has(>:not(.cc-fl9-klik)){flex-wrap:wrap!important;padding-bottom:16px!important}
  html:root body .modal-overlay .modal .cc-fl9-rij:not(.cc-bk9)>:not(.cc-fl9-klik){flex:1 0 100%!important;min-width:0!important;max-width:100%!important}
}
/* (16) Kaart 154e-1 vraag 3 (Sam 15.39: A · even breed als in de app): de drie abonnementskaarten op de landing zijn even breed als in het venster Abonnement
   van de app (Z35 G3: 302 px óp het scherm = 302 / --ccZm CSS-px), in het midden van de kolom; op een smaller scherm smaller, net als de app
   (r274/r279 „1-op-1”: s45-6a, s47-2b). Onder 761 px blijft de landing één kolom (index.html). */
@media (min-width:761px){html:root body #cc-landing .ld-prijzen{grid-template-columns:repeat(3,minmax(0,calc(302px / var(--ccZm,1))))!important;justify-content:center!important}}
/* (16b) Door (16) passen de kaarten op 761–1099 px weer binnen de kolom (vóór (16) staken ze er op 800 px 90 px buiten: de pil hieronder rekte de kolommen op),
   maar dan is een kaart smaller dan de pil met de jaarkorting (Z35: één regel, nowrap + „…”) en werd „of € 86,29 per jaar — 10% korting” afgekapt tot
   „… — 10…”. Daar mag de pil over twee regels lopen: de tekst blijft heel, de hoek blijft rond. Waar hij past (vanaf ± 1000 px) blijft hij één regel.
   (Zwaarder dan de pilregel van Z35, want het Z35-blok staat ná dit deel.) */
@media (min-width:761px) and (max-width:1099.98px){html:root body #cc-landing .ld-prijzen .ld-card.ld-prijs .ld-omreken9.ld-omreken9{white-space:normal!important;height:auto!important;
  line-height:1.4!important;padding:3px 10px!important;border-radius:12px!important;text-overflow:clip!important}}
/* (17) Charlie liggend (≤ 500 px hoog; Z21/r351 L3: „het gesprek krijgt de ruimte”, ≥ 150 px): de kop (49 px, met het ronde kruisje van 32) en de voet
   (16 + 16 px lucht) van Z34 namen samen 41 px van het gesprek (180 → 139 px op 852 × 393, gemeten 6 okt 16.0x; s97 L3). Liggend krijgt het venster van
   Charlie minder lucht: 8 px onder de kop en 8 + 8 boven de voet. De knoppen en het kruisje houden hun maat (≥ 24 px, WCAG 2.5.8). */
@media (max-height:500px) and (orientation:landscape){
  html:root body .modal-overlay .modal:has(.cb-feed)>.modal-hdr{margin-bottom:8px!important}
  html:root body .modal-overlay .modal:has(.cb-feed)>.modal-foot{margin-top:8px!important;padding-top:8px!important}
}
/* (18) De bevestigingsvragen op de telefoon (de keten r364, stap 2b: bev-087 en bev-088 op 360 × 640 — „Je klant heeft een btw-identificatienummer uit
   Duitsland …” en „Je klant zit buiten de EU …”): Z34 maakte de knoppen groter (tweede knop 36 hoog, hoofdknop 40 en 14/600, binnen 18 px), en dan passen
   „Annuleren” (94) en „Toch opslaan met dit tarief” (218) niet meer naast elkaar in de rij van 276 px — „Annuleren” schoof links buiten het scherm (v1.86.0:
   90 + 191, net binnen de kaart). Past het niet, dan breekt de rij af: de hoofdknop boven, „Annuleren” eronder, allebei rechts, 8 px ertussen. Past het
   wel (de meeste vragen), dan verandert er niets. Alleen op de telefoon (≤ 480 px); breder is de rij ruim genoeg (het venster is daar tot 560 px). */
@media (max-width:480px){html:root body [data-cc-modal="1"]>div>div:last-child:has(>.cc-dlgb){flex-wrap:wrap-reverse!important;row-gap:8px!important;align-items:center!important}}
/* (19) De vraagchips van Charlie (de keten r364, stap 2c: 1440 × 1000, kaart-chefbot, „Wat was mijn omzet dit jaar?” e.a.): Z33 zette ze op 12 px, en dan zijn ze
   23,53 px hoog óp het scherm (24,9 CSS-px × de zoom 0,945) — net onder de 24 van WCAG 2.5.8 die de keten eist. Op aanraakschermen gaf Z22-5 ze al minstens
   24,2 px op het scherm (index.html, pointer:coarse); nu overal, ook met een muis (+0,7 CSS-px). */
html:root body .cc-chefbot-ov .cb-chip.cb-chip.cb-chip{min-height:calc(24.2px / var(--ccZm,1))!important}
/* (20) Een VOL rood vlak met een witte letter (de „!” van de afsluitwizard, .cc-wizst9; keten r364 3b: CONTRAST 2,79 : 1, 1440 en 360, donker): Z33 maakt
   het oude #c81e1e als vlak overal var(--red), en dat is in het donker #f97066 — wit erop haalt maar 2,79 : 1. In het donker krijgt zo'n vlak de donkere inkt
   #1e2024 (5,86 : 1); in het licht blijft het wit op #b42318 (6,57 : 1). */
html:root[data-theme="dark"] body [style*="background: rgb(200, 30, 30)"][style*="color: rgb(255, 255, 255)"]{color:#1e2024!important}
/* (21) Op de telefoon breekt de werkregel („termijn voorbij — indienen ›”, .cc-werkst9) onder de venstertitel af (Z34: het icoonblokje + de titel); zijn doel van
   24 px (min-height, marge −4 px boven en onder) liep dan 4 px over de ondertitel (.card-sub) eronder, en daar was de knop niet te raken (keten r364 3b:
   BEDEKT, kaart-winstbelasting 360 × 640). 4 px lucht boven de ondertitel. */
@media (max-width:720px){html:root body div:has(> .cc-werkst9) + .card-sub{margin-top:4px!important}}
/* ===== einde r364 (Opus 154e) ===== */

/* ===== r365 (Opus 160e) — begin: ⌘K + de kop C + de onderbalk · het beginscherm volgens de smal-ladder · Sams punten (r365-gereedschap/bouw-r365.py) ===== */
/* ===== r365 (Opus 160e) — ⌘K, de kop (C) en de onderbalk: REGELS-Z34 § 5.2–5.4 en § 8.4 (Fable Z34, LOOKS-SPEC § I1–I3, proef-i.css) · kaart 160e-2 (Sam 21.02: de kop op de
   telefoon = C, alle drie de knoppen op elk toestel) · W17 (21.05: „Meer” = alleen de andere blokken). Hoort bij het blok „r365-zoek-balk” in app.js (de knop #cc-zoekknop9, het venster
   #cc-zoekvenster9, de balk #cc-onderbalk9 en het blad #cc-meer9). Kleuren ALLEEN uit tabel K (REGELS-Z34 § 1): inkt/grijs = --ccG0…8 · klikbaar groen #166534 / donker #4ade80 ·
   het merkgroen alleen in de streep bovenop het venster · het zachte groene pilletje ALLEEN achter het actieve icoon in de onderbalk. ===== */

/* ---------- I1 · het zoekknopje: dezelfde klassen als „Indeling aanpassen” (cc-indeling9 + cc-ind9-r) → dezelfde maat, ring, rand en vlak; alleen het icoon is een lijn ---------- */
/* (r366: hier stond „margin-right:4px” voor het zoekknopje; die regel viel in v1.88.0 weg door een sluitteken in het commentaar hierboven en is vervangen door r366 deel (1)) */
html:root body .hdr-right .cc-indeling9.cc-zoek9 svg{fill:none!important;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
@media (max-width:720px){
  /* kop C (kaart 160e-2): de drie ronde knoppen 32 breed, zonder tussenruimte; het raster „woordmerk | knoppen” 4 px kolomafstand. Gemeten 320–430: niets overlapt
     (het logo wordt onder 380 px al kleiner, Z33). Geen uitzondering onder 380 px (Z34 had daar het zoekknopje naar „Meer”; Sam koos C). */
  html:root body .hdr-right{gap:0!important}
  html:root body .hdr-right .cc-indeling9,html:root body .hdr-right .cc-indeling9.cc-zoek9{width:32px!important;min-width:32px!important;margin:0!important}
  html:root body header.hdr:has(#cc-zoekknop9){column-gap:4px!important}
}

/* ---------- I2 · het zoekvenster ---------- */
html:root #cc-zoekvenster9{display:none;position:fixed;inset:0;z-index:99990;background:rgba(17,17,17,.20);font-family:'Inter',-apple-system,system-ui,sans-serif}
html:root[data-theme="dark"] #cc-zoekvenster9{background:rgba(0,0,0,.50)}
html:root #cc-zoekvenster9.open{display:block}
html:root #cc-zoekvenster9 .zk{position:absolute;left:50%;top:18%;transform:translateX(-50%);width:640px;max-width:calc(100% - 32px);max-height:74vh;display:flex;flex-direction:column;
  background:linear-gradient(#16a34a,#16a34a) top/100% calc(4px / var(--ccZm,1)) no-repeat border-box,#ffffff;border-radius:16px;overflow:hidden;
  box-shadow:0 24px 64px rgba(17,17,17,.18);color:var(--ccG8)}
html:root[data-theme="dark"] #cc-zoekvenster9 .zk{background:linear-gradient(#22c55e,#22c55e) top/100% calc(4px / var(--ccZm,1)) no-repeat border-box,#1e2024;
  border:1px solid rgba(255,255,255,.08);border-top-color:transparent;box-shadow:0 24px 64px rgba(0,0,0,.55)}
html:root #cc-zoekvenster9 .zk-veld{display:flex;align-items:center;gap:12px;height:48px;padding:0 16px;margin-top:calc(4px / var(--ccZm,1));border-bottom:1px solid var(--ccG3);flex:0 0 auto}
html:root #cc-zoekvenster9 .zk-veld>svg{flex:0 0 20px;width:20px;height:20px;fill:none;stroke:var(--ccG6);stroke-width:2;stroke-linecap:round}
html:root #cc-zoekvenster9 .zk-veld input{flex:1 1 auto;min-width:0;height:46px;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;
  font:400 16px/1.2 'Inter',-apple-system,system-ui,sans-serif;color:var(--ccG8)}
html:root #cc-zoekvenster9 .zk-veld input::placeholder{color:var(--ccG6);opacity:1}
html:root #cc-zoekvenster9 .zk-esc{flex:0 0 auto;display:inline-flex;align-items:center;height:22px;padding:0 6px;border:1px solid var(--ccG4);border-radius:6px;
  font:500 11px/1 'Inter',-apple-system,system-ui,sans-serif;color:var(--ccG6)}
html:root #cc-zoekvenster9 .zk-sluit{display:none;flex:0 0 32px;width:32px;height:32px;border-radius:999px;border:0;background:var(--ccG2);color:var(--ccG7);font-size:18px;line-height:1;cursor:pointer;
  align-items:center;justify-content:center;padding:0}
html:root #cc-zoekvenster9 .zk-lijst{flex:1 1 auto;overflow:auto;padding:8px;overscroll-behavior:contain}
html:root #cc-zoekvenster9 .zk-groep{padding:10px 8px 6px;font:600 12px/16px 'Inter',-apple-system,system-ui,sans-serif;color:var(--ccG6)}
html:root #cc-zoekvenster9 .zk-regel{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 8px;border-radius:8px;cursor:pointer;color:var(--ccG8)}
html:root #cc-zoekvenster9 .zk-regel:hover{background:var(--ccG1)}
html:root #cc-zoekvenster9 .zk-regel[aria-selected="true"]{background:var(--ccG2)}
html:root #cc-zoekvenster9 .zk-ico{flex:0 0 28px;width:28px;height:28px;border-radius:999px;background:var(--ccG2);color:var(--ccG7);display:flex;align-items:center;justify-content:center;
  font:600 12px/1 'Inter',-apple-system,system-ui,sans-serif}
html:root #cc-zoekvenster9 .zk-ico.vk{border-radius:6px}
html:root #cc-zoekvenster9 .zk-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
html:root #cc-zoekvenster9 .zk-regel[aria-selected="true"] .zk-ico{background:#ffffff}
html:root[data-theme="dark"] #cc-zoekvenster9 .zk-regel[aria-selected="true"] .zk-ico{background:#1e2024}
html:root #cc-zoekvenster9 .zk-tekst{flex:1 1 auto;min-width:0}
html:root #cc-zoekvenster9 .zk-titel{display:block;font:500 14px/18px 'Inter',-apple-system,system-ui,sans-serif;color:var(--ccG8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:root #cc-zoekvenster9 .zk-sub{display:block;font:400 13px/17px 'Inter',-apple-system,system-ui,sans-serif;color:var(--ccG6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:root #cc-zoekvenster9 mark{background:none;color:inherit;font-weight:600}
html:root #cc-zoekvenster9 .zk-bedrag{flex:0 0 auto;font:600 14px/18px 'Inter',-apple-system,system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--ccG8);white-space:nowrap}
html:root #cc-zoekvenster9 .zk-meta,html:root #cc-zoekvenster9 .zk-dat{flex:0 0 auto;font:500 12px/16px 'Inter',-apple-system,system-ui,sans-serif;color:var(--ccG6);white-space:nowrap}
html:root #cc-zoekvenster9 .zk-alle{min-height:36px;padding-left:48px}
html:root #cc-zoekvenster9 .zk-alle .zk-titel{color:#166534;font-weight:500}
html:root[data-theme="dark"] #cc-zoekvenster9 .zk-alle .zk-titel{color:#4ade80}
html:root #cc-zoekvenster9 .zk-leeg{padding:16px 8px 20px;font:400 14px/20px 'Inter',-apple-system,system-ui,sans-serif;color:var(--ccG6)}
html:root #cc-zoekvenster9 .zk-voet{flex:0 0 auto;display:flex;gap:16px;align-items:center;padding:10px 16px;border-top:1px solid var(--ccG3);
  font:400 12px/16px 'Inter',-apple-system,system-ui,sans-serif;color:var(--ccG6)}
@media (max-width:720px){
  /* telefoon: het zoekvenster schermvullend, het veld bovenaan; „esc” wordt een rond kruisje; geen toetsenregel */
  html:root #cc-zoekvenster9 .zk{left:0;top:0;transform:none;width:100%;max-width:none;height:100%;max-height:none;border-radius:0;border:0}
  html:root #cc-zoekvenster9 .zk-veld{height:56px;padding:0 12px 0 16px}
  html:root #cc-zoekvenster9 .zk-esc{display:none}
  html:root #cc-zoekvenster9 .zk-sluit{display:inline-flex}
  html:root #cc-zoekvenster9 .zk-voet{display:none}
  html:root #cc-zoekvenster9 .zk-regel{min-height:52px}
  html:root #cc-zoekvenster9 .zk-dat{display:none}
}

/* ---------- I3 · de onderbalk op de telefoon (≤ 720): Overzicht + de eerste drie blokken in de volgorde van de gebruiker + Meer ---------- */
html:root #cc-onderbalk9,html:root #cc-meer9{display:none}
@media (max-width:720px){
  html:root #cc-onderbalk9{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:99970;height:calc(56px + env(safe-area-inset-bottom,0px));
    padding:0 4px env(safe-area-inset-bottom,0px);box-sizing:border-box;background:#ffffff;border-top:1px solid var(--ccG3);font-family:'Inter',-apple-system,system-ui,sans-serif}
  html:root[data-theme="dark"] #cc-onderbalk9{background:#1e2024;border-top-color:rgba(255,255,255,.08)}
  html:root #cc-onderbalk9 .bk{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:56px;padding:0;border:0;background:none;
    color:var(--ccG6);font:500 11px/14px 'Inter',-apple-system,system-ui,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
  html:root #cc-onderbalk9 .bk-ico{display:flex;align-items:center;justify-content:center;width:56px;height:28px;border-radius:999px}
  html:root #cc-onderbalk9 .bk-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
  html:root #cc-onderbalk9 .bk-ico svg.vul{fill:currentColor;stroke:none}
  html:root #cc-onderbalk9 .bk-label{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html:root #cc-onderbalk9 .bk[aria-current="page"]{color:#166534}
  html:root #cc-onderbalk9 .bk[aria-current="page"] .bk-ico{background:#e8f3ec}
  html:root[data-theme="dark"] #cc-onderbalk9 .bk[aria-current="page"]{color:#4ade80}
  html:root[data-theme="dark"] #cc-onderbalk9 .bk[aria-current="page"] .bk-ico{background:rgba(34,197,94,.14)}
  html:root #cc-onderbalk9 .bk:focus-visible{outline:2px solid currentColor;outline-offset:-4px;border-radius:12px}
  /* de inhoud krijgt onderaan ruimte; Charlie (A4: 40 px, 12 px uit de hoek) schuift boven de balk */
  html:root body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))!important}
  html:root body .cc-chef-fab{bottom:calc(56px + 12px + env(safe-area-inset-bottom,0px))!important}
  /* een werklijst (een lijst = een plek in de app) stopt boven de balk; een invoervenster of ander venster bedekt de balk (eigen knoppenbalk) */
  html:root body .modal-overlay.cc-cardmodal:has(>.modal:is(.cc-wlmodal,.cc-lijstmodal)){bottom:calc(56px + env(safe-area-inset-bottom,0px))!important;height:auto!important}
  html:root body .modal-overlay.cc-cardmodal>.modal:is(.cc-wlmodal,.cc-lijstmodal){max-height:calc(100vh - 56px - env(safe-area-inset-bottom,0px))!important;bottom:calc(56px + env(safe-area-inset-bottom,0px))!important}
  html:root body:has(.modal-overlay .modal:not(.cc-wlmodal):not(.cc-lijstmodal)) #cc-onderbalk9{display:none}
  html:root body:has(.modal-overlay .modal:not(.cc-wlmodal):not(.cc-lijstmodal)){padding-bottom:0!important}
  html:root body:has(#cc-zoekvenster9.open) #cc-onderbalk9{display:none}
  /* het blad „Meer”: van onderen, boven de balk — alleen de andere blokken (W17) */
  html:root #cc-meer9.open{display:block;position:fixed;inset:0;z-index:99960;font-family:'Inter',-apple-system,system-ui,sans-serif}
  html:root #cc-meer9 .mr-scrim{position:absolute;inset:0;background:rgba(17,17,17,.20)}
  html:root[data-theme="dark"] #cc-meer9 .mr-scrim{background:rgba(0,0,0,.50)}
  html:root #cc-meer9 .mr-blad{position:absolute;left:0;right:0;bottom:calc(56px + env(safe-area-inset-bottom,0px));background:#ffffff;border-radius:16px 16px 0 0;
    box-shadow:0 -8px 32px rgba(17,17,17,.14);padding:8px 16px 8px;max-height:70vh;overflow:auto}
  html:root[data-theme="dark"] #cc-meer9 .mr-blad{background:#1e2024;box-shadow:0 -8px 32px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08);border-bottom:0}
  html:root #cc-meer9 .mr-greep{width:36px;height:4px;border-radius:999px;background:var(--ccG4);margin:4px auto 12px}
  html:root #cc-meer9 .mr-titel{font:600 16px/24px 'Inter',-apple-system,system-ui,sans-serif;color:var(--ccG8);margin:0 0 4px 4px}
  html:root #cc-meer9 .mr-k{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0 4px;border:0;background:none;border-bottom:1px solid var(--ccG3);
    font:500 15px/20px 'Inter',-apple-system,system-ui,sans-serif;color:var(--ccG8);text-align:left;cursor:pointer}
  html:root #cc-meer9 .mr-k:last-child{border-bottom:0}
  html:root #cc-meer9 .mr-ico{flex:0 0 32px;width:32px;height:32px;border-radius:10px;background:var(--ccG2);color:var(--ccG7);display:flex;align-items:center;justify-content:center}
  html:root #cc-meer9 .mr-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
  html:root #cc-meer9 .mr-ico svg.vul{fill:currentColor;stroke:none}
  html:root #cc-meer9 .mr-pijl{margin-left:auto;color:var(--ccG6);font-weight:400}
  html:root #cc-meer9 .mr-k:active{background:var(--ccG1)}
}
@media (prefers-reduced-motion:no-preference){
  html:root #cc-zoekvenster9.open .zk{animation:cc-zk9-in .2s ease-out}
  html:root #cc-meer9.open .mr-blad{animation:cc-mr9-in .24s ease-out}
}
@keyframes cc-zk9-in{from{opacity:0;margin-top:-8px}to{opacity:1;margin-top:0}}
@keyframes cc-mr9-in{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
/* ===== einde r365-zoek ===== */
/* ---------- r365 · het beginscherm volgens Sams SMAL-LADDER (W18–W31, di 6 okt 21.1x–22.2x; geheugen cijferchef-standing-smal-ladder; plaat plaat-160e-beginscherm-ladder.html;
   kaart 160e-3 vraag 1 = B (wo 7 okt 09.42): het bedrag 18 px; kaart 160e-5: op één lijn met de links, onderaan dit deel). Verkoop · Inkoop · Bank:
   · het kerngetal (staafjes + bedrag) blijft OVERAL rechtsonder naast de links, zoals Z34 op de computer — ook op de telefoon (de voetregel van Z34 ≤ 720 vervalt);
     het label („Open”/„Totaalsaldo”) staat los boven het bedrag, zodat alleen het woord zelf naast de bovenste link staat (het klikvlak botst nergens);
   · per breedte een tikkie kleiner: telefoon en ≥ 885 bedrag 18 · staafjes 80 % — 800–884 bedrag 16 · staafjes 60 % — 721–799 de binnenrand van ALLE blokken 18,
     bedrag 15 · label 11 · staafjes 50 %; een bedrag van 8 tekens of meer (1.234.567, −125.430): alle drie één stap kleiner (data-kern9="lang", gezet door het script);
   · „Inkoopfacturen en bonnen” → „Inkoopfacturen” op 721–884 (app.js: „ en bonnen” in .cc-hl-rest9; de naam van het venster en de title blijven);
   · W24: het uploadvak in alle drie even hoog en op één regel: „Bestand kiezen…” op 721–1179, op 721–959 en < 360 alleen de letter in het label; de statuspil blijft een pil;
   · W25: „Offerte”/„Factuur” met tekst op de smalste tablet (kleiner) · de koppelblokken „E-mailadres koppelen” (enkelvoud: alleen inkoop, Sam 6 okt 15.2x) en waar de uitleg niet
     past de korte titel + „Koppel nu” of „Gekoppeld” (app.js, met de stand; zonder ›, kaart 160e-5) — in beide blokken op dezelfde breedte.
   Gemeten (ladder.js, 160e): 300–1920 px in kleine stappen × MAX/PRO/START/leeg/een miljoen → nergens overlap, afkappen of ongelijke banden. ---------- */
@media (max-width:720px){
  html:root body .cc-bento>.cc-hub>.cc-hub-corner{position:absolute!important;right:24px!important;bottom:22px!important;margin:0!important;justify-content:flex-end!important}
}
html:root body .cc-bento>.cc-hub>.cc-hub-corner{gap:10px!important}
html:root body .cc-bento .cc-hub-corner .ccc-v{font-size:18px!important}
html:root body .cc-bento .cc-hub-corner .cc-kpihov{position:relative}
html:root body .cc-bento .cc-hub-corner .ccc-l{position:absolute;right:0;bottom:100%;white-space:nowrap;margin:0 0 2px!important}
@media (min-width:721px) and (max-width:884.9px){
  html:root body .cc-bento .cc-hub-corner .cc-staaf9{zoom:.6}
  html:root body .cc-bento>.cc-hub>.cc-hub-corner{gap:8px!important}
  html:root body .cc-bento .cc-hl-rest9{display:none!important}
}
@media (min-width:721px) and (max-width:799.9px){
  html:root body .cc-bento>.cc-hub{padding:18px!important}
  html:root body .cc-bento>.cc-hub>.cc-hub-corner{right:18px!important;bottom:16px!important;gap:6px!important}
}
/* W24 (Sam 21.5x): smal → in Verkoop · Inkoop · Bank het uploadvak in alle drie even groot (één regel), de statusregel gelijk, dezelfde regelhoogtes */
/* (a) het uploadvak: de korte tekst „Bestand kiezen…” waar de lange niet op één regel past (zoals de telefoon) */
@media (min-width:721px) and (max-width:1179.9px){
  html:root body .cc-bento .upload-mini .cc-up9-g{display:none!important}
  html:root body .cc-bento .upload-mini .cc-up9-k{display:inline!important}
}
/* (b) de statuspil blijft een pil als hij onder de titel staat: de titel neemt de hele regel, de pil zijn eigen breedte */
@media (min-width:721px) and (max-width:1079.9px),(max-width:360px){
  html:root body .cc-bento .cc-wlkop9-t{flex-basis:100%!important}
  html:root body .cc-bento .cc-wlkop9 .cc-hubst9{flex-basis:auto!important;margin-left:0!important}
}
/* (b2) vondst 162e (wo 7 okt): de pilregel (9b) van 1024–1079 trof ook de pil „afsluiten ›” in het blok Boekhouding. Die staat in een kolom (.cc-bjwrap9), dus
   flex-basis 100 % maakte hem 64 px hoog, en hij lag 24 px over „Kas ›”. Hier blijft hij een pil op één regel, zoals op elke andere breedte (.cc-bjst9). */
@media (min-width:1024px) and (max-width:1079.9px){
  html:root body .cc-bento .cc-bjwrap9 .cc-hubst9{flex-basis:auto!important;white-space:nowrap!important}
}
/* (c) de smalste telefoon: het vak iets krapper, zodat „Bestand kiezen…” op één regel past */
@media (max-width:350px){
  html:root body .cc-bento .upload-mini{gap:6px!important;padding-left:8px!important;padding-right:8px!important}
}
/* W25 (1): de smalle tablet — „Offerte” en „Factuur” met tekst naast het rondje, een tikkie kleiner (rondje 30, label 13, „Nieuw” 11, tussenruimte 8, kolomafstand 12) */
@media (min-width:721px){
  @container ccvk9 (max-width:225.99px){
    html:root body .cc-bento .cc-verkoop .cc-nieuw2col9{grid-template-columns:auto auto!important;column-gap:12px!important;justify-content:start!important}
    html:root body .cc-bento .cc-nieuw2col9 .cc-tophov{position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip-path:none!important}
    html:root body .cc-bento .cc-nieuw2col9 .cc-v9v{display:none!important}
    html:root body .cc-bento .cc-nieuw2col9 .cc-v9k{display:inline!important}
    html:root body .cc-bento .cc-nieuw2col9>.card.cc-wfield{gap:8px!important}
    html:root body .cc-bento .cc-nieuw2col9 .cc-wfield>span:first-child{width:30px!important;height:30px!important}
    html:root body .cc-bento .cc-nieuw2col9 .cc-wfield>span:first-child svg{width:17px!important;height:17px!important}
    html:root body .cc-bento .cc-tophov>div:first-child :is(.cc-v9v,.cc-v9k){font-size:13px!important}
    html:root body .cc-bento .cc-tophov>div+div :is(.cc-v9v,.cc-v9k){font-size:11px!important}
  }
}
/* W25 (3): waar de uitleg niet past — „Koppel nu” (of „Gekoppeld”) in de plaats van de uitleg; kaart 160e-5 vraag 1 = A (Sam 10.39): zonder › en in de kleur en maat van de
   uitleg, net als „Nieuw” onder Offerte en Factuur (eerst groen met ›, terwijl de uitleg op een breed scherm grijs is zonder ›) — de hele kaart blijft klikbaar */
/* in BEIDE koppelblokken tegelijk (zelfde drempel 360): de korte titel („E-mailadres” · „Bankkoppelingen”) + „Koppel nu”; daarboven de lange titel + de uitleg.
   De drempel was 345 (die van r364 voor de bankuitleg): de uitleg „Koppel je zakelijke rekeningen voor automatische transacties” is 344,4 CSS-px, dus bij 345 bleef er
   0,6 px over — op de GitHub-runner (een andere tekstweergave) sprong hij op 1212 px naar twee regels en liep Bank niet meer gelijk (s122 L2, zuinige ronde wo 7 okt).
   Nu pas vanaf 360: ± 16 px speling (4,5 %), bewaakt door s122 L5d (≥ 8 px). In schermbreedte: de uitleg vanaf ± 1247 px in plaats van 1205. */
@media (min-width:721px){
  @container ccact9 (max-width:359.99px){
    html:root body .cc-bento :is(.cc-inkoop,.cc-bank) .cc-a9sub{visibility:visible!important}
    html:root body .cc-bento :is(.cc-inkoop,.cc-bank) .cc-a9sub>span:not(.cc-a9kort9){display:none!important}
    html:root body .cc-bento :is(.cc-inkoop,.cc-bank) .cc-a9sub .cc-a9kort9{display:inline!important}
    html:root body .cc-bento :is(.cc-inkoop,.cc-bank) .cc-a9v{display:none!important}
    html:root body .cc-bento :is(.cc-inkoop,.cc-bank) .cc-a9k{display:inline!important}
  }
  @container ccact9 (min-width:360px){
    html:root body .cc-bento :is(.cc-inkoop,.cc-bank) .cc-a9sub{visibility:visible!important}
    html:root body .cc-bento :is(.cc-inkoop,.cc-bank) .cc-a9v{display:inline!important}
    html:root body .cc-bento :is(.cc-inkoop,.cc-bank) .cc-a9k{display:none!important}
  }
}
/* op slot (START) staat de regel in g6 (G2 van Z35): hij erft de kleur van de uitleg (.cc-a9sub, ook g6) — de aparte regel daarvoor is sinds kaart 160e-5 overbodig */
/* W24 + ladder stap 4: het uploadvak op 721–919 — de korte tekst past niet naast „V VERKOOP” → het woord in het label weg, de letter blijft (één regel, even hoog in alle drie) */
@media (min-width:721px) and (max-width:959.9px),(max-width:359.9px){
  html:root body .cc-bento .upload-mini .upload-tag{font-size:0!important;gap:0!important;padding:0!important;background:none!important}
}
/* ladder stap 4 op de smalste telefoon (< 360): de korte titels in beide koppelblokken (bij START staat het label PRO ernaast) */
@media (max-width:359.9px){
}
/* lange bedragen (≥ 8 tekens, bijv. 1.234.567 of −123.456): ALLE drie de kerngetallen een stap kleiner (het script zet data-kern9="lang" op .cc-bento) */
html:root body .cc-bento[data-kern9="lang"] .cc-hub-corner .ccc-v{font-size:16px!important}
@media (min-width:721px) and (max-width:884.9px){html:root body .cc-bento[data-kern9="lang"] .cc-hub-corner .ccc-v{font-size:14px!important}}
@media (min-width:721px) and (max-width:799.9px){html:root body .cc-bento[data-kern9="lang"] .cc-hub-corner .ccc-v{font-size:13px!important}}
@media (max-width:339.9px){html:root body .cc-bento[data-kern9="lang"] .cc-hub-corner .ccc-v{font-size:15px!important}html:root body .cc-bento[data-kern9="lang"] .cc-hub-corner .cc-staaf9{zoom:.6}}
@media (min-width:721px) and (max-width:739.9px){html:root body .cc-bento[data-kern9="lang"] .cc-hub-corner .ccc-v{font-size:12px!important}}
/* W39 (Sam wo 7 okt 09.4x; kaart 160e-5): de KPI op één lijn met de links. Het bedrag stond 5½–7 px en de staafjes 8–9 px ónder de onderste link, het label „Open”/„Totaalsaldo”
   11–17 px onder de bovenste. Nu: de basislijn van het bedrag = die van de onderste link · de staafjes staan erop (align-items: baseline — een blok zonder tekst zet zijn onderkant
   op de basislijn) · het label op de basislijn van de bovenste link (één linkafstand hoger: 28 px op de telefoon, 26 px vanaf 721). De maten per breedte en per stap van het bedrag
   (18/16/15, „lang” één stap kleiner) zijn gemeten (kpi2.js, 160e); de afwijking is overal ≤ 1 px (s122 L10). */
html:root body .cc-bento>.cc-hub>.cc-hub-corner{--kpi-b:28px;--kpi-l:7.3px;align-items:baseline!important}
@media (max-width:720px){}
@media (min-width:800px) and (max-width:884.9px){}
@media (min-width:721px) and (max-width:799.9px){}
html:root body .cc-bento[data-kern9="lang"]>.cc-hub>.cc-hub-corner{--kpi-b:29.2px;--kpi-l:8.4px}
@media (max-width:720px){html:root body .cc-bento[data-kern9="lang"]>.cc-hub>.cc-hub-corner{--kpi-b:29.2px;--kpi-l:8.5px}}
@media (max-width:339.9px){html:root body .cc-bento[data-kern9="lang"]>.cc-hub>.cc-hub-corner{--kpi-b:29.3px;--kpi-l:9.5px}}
@media (min-width:800px) and (max-width:884.9px){html:root body .cc-bento[data-kern9="lang"]>.cc-hub>.cc-hub-corner{--kpi-b:29.4px;--kpi-l:10.4px}}
@media (min-width:740px) and (max-width:799.9px){html:root body .cc-bento[data-kern9="lang"]>.cc-hub>.cc-hub-corner{--kpi-b:23.5px;--kpi-l:11.7px}}
@media (min-width:721px) and (max-width:739.9px){html:root body .cc-bento[data-kern9="lang"]>.cc-hub>.cc-hub-corner{--kpi-b:23.6px;--kpi-l:12.7px}}
/* … en ladder stap 3: de staafjes staan nu op de lijn van de onderste link en reiken dus hoger. Waar de bovenste link boven de staafjes doorloopt (de telefoon smaller
   dan 390 en het smalle laptopvenster 885–1099: „Inkoopfacturen en bonnen ›”), worden ze een stap kleiner (60 %, zoals op 800–884), zodat ze onder die link blijven
   (s122 L1 meet het, ook bij een miljoen; zonder deze stap lagen ze 6½ px in het klikvlak van de bovenste link). */
@media (max-width:389.9px){html:root body .cc-bento .cc-hub-corner .cc-staaf9{zoom:.6}html:root body .cc-bento[data-kern9="lang"] .cc-hub-corner .cc-staaf9{zoom:.6}}
@media (min-width:885px) and (max-width:1099.9px){html:root body .cc-bento .cc-hub-corner .cc-staaf9{zoom:.6}html:root body .cc-bento[data-kern9="lang"] .cc-hub-corner .cc-staaf9{zoom:.6}}
html:root body .cc-bento>.cc-hub>.cc-hub-corner{bottom:var(--kpi-b)!important}
html:root body .cc-bento .cc-hub-corner .ccc-l{margin-bottom:var(--kpi-l)!important}
/* ---------- r365 · Sams punten van di 6 okt 19.2x–19.4x (startzin 160e) ---------- */
/* (1) het profielicoon (Sam 19.20: „Als ik op profielicoon druk dan wordt deze weer de oude stijl (dus wanneer met cursor erop al) … niet mooi.”): gemeten op v1.87.0 — in rust
   vlak g2 (#efefec) + de zwevende schaduw van Z35 (G13), bij hover/klik/focus #fff met een rand van 1 px #111 en géén schaduw: een oude kopregel
   (`.hdr .hdr-right .profile-btn-lg:hover`, (0,4,0) + !important) won van de Z35-regel (0,3,2). Zoeken en Indeling blijven bij hover zoals in rust → het profiel nu ook:
   dezelfde familie (rust = hover = klik), in licht en donker. De focusring voor het toetsenbord (:focus-visible, outline) blijft. */
html:root body header.hdr .hdr-right .profile-btn-lg:is(:hover,:active,:focus){background:var(--ccG2)!important;border:0!important;color:var(--ccG8)!important}
html:root body header.hdr .hdr-right .profile-btn-lg:is(:hover,:active,:focus:not(:focus-visible)){box-shadow:0 0 0 1px rgba(17,17,17,.03),0 1px 2px rgba(17,17,17,.08),0 6px 12px -6px rgba(17,17,17,.30)!important}
html:root[data-theme="dark"] body header.hdr .hdr-right .profile-btn-lg:is(:hover,:active,:focus){background:#3a3b40!important;border:0!important;color:#e7e8ea!important}
html:root[data-theme="dark"] body header.hdr .hdr-right .profile-btn-lg:is(:hover,:active,:focus:not(:focus-visible)){box-shadow:0 0 0 1px rgba(255,255,255,.08),0 6px 12px -6px rgba(0,0,0,.7)!important}

/* (2) de grijze ruimte onder de blokken (Sam 19.4x: „Boven de hubs zie je een kleine strook ruimte grijs … maar onder de hubs (dus net boven de footer) heb je dat niet”):
   gemeten op v1.87.0 — boven 20,8 px óp het scherm (kop → eerste blok: 10 + 12 CSS-px × 0,945), telefoon 30 (14 + 16); onder 0: de witte voet `.copyright` trok zich met
   margin-top −24 px over de onderrand van .cc-bento-bg. Nu onder = boven, op elke breedte (s123 meet het: ± 0,5 px). */
html:root body .copyright{margin-top:0!important}
html:root body .cc-bento-bg{padding-bottom:22px!important}
@media (max-width:720px){html:root body .cc-bento-bg{padding-bottom:30px!important}}

/* (3) de voetregel onder de abonnementen op de landing (Sam 19.2x: „Zet deze tekst onder de abo's op de landing … letterlijk in kleine letters en ook gecentreerd, zodat
   het beter bij de abo kaarten past.”): de tekst blijft letterlijk; klein = de kleine tekst van Z33 (12 px, zoals „of € … per jaar” op de kaarten), gecentreerd en even breed als
   de rij van drie kaarten (3 × 302 óp het scherm + 2 × 14). Alleen de regel ná de kaarten, niet de regel erboven. Fable Z37 kijkt daarna naar het hele prijsblok. */
html:root body #cc-landing .ld-prijzen + .ld-abo-sub{font-size:12px!important;line-height:1.5!important;text-align:center!important;
  max-width:calc(3 * 302px / var(--ccZm,1) + 28px);margin-left:auto!important;margin-right:auto!important}
/* ===== einde r365 (Opus 160e) ===== */

/* ===== r366 (Opus 161e) — begin: v1.89.0 · de kopknoppen gelijk · … (r366-gereedschap/bouw-r366.py) ===== */
/* (1) L79 — de kopknoppen gelijk (Sam W56–W58 aan 160e, wo 7 okt ± 14.0x; startzin 161e punt 0a). Gemeten op v1.88.0 (de rondjes van zoeken en Indeling 28 px in een
   klikvlak van 44, het profielrondje vult zijn 44; zoom .945 vanaf 721): zichtbaar zoeken→Indeling 20 en Indeling→profiel 16 CSS-px (18,9 en 15,1 schermpixels; met de
   ring van 1 px wat Sam als 17 en 13 zag). → Indeling en zoeken 4 px naar links: 20 en 20; het profiel blijft waar het stond.
   Telefoon (kop C, ≤ 720): zoeken→Indeling 4, Indeling→profiel 6 → 4 en 4 (de linkerruimte van het profielrondje 4 → 2; de kop wordt 2 px smaller, nooit breder).
   Toets: s127 K1–K3 (± 1 px op 300–1920, licht/donker, Indeling aan/uit) mét NEG op v1.88.0. */
@media (min-width:721px){
  html:root body .hdr-right .cc-indeling9:not(.cc-zoek9){margin-right:4px!important}
}
@media (max-width:720px){
  html:root body .hdr-right .profile-btn-lg{margin-left:2px!important}
}
/* (2) J23-1 (Fable Z36 deel 2, VOOR-OPUS 13.01; 161e): een datum breekt nooit (REGELS-Z34 § 8; J3) — de mijlpaal „Gemarkeerd als ingediend/gedeponeerd” zet de datum in een
   span .cc-datum9 (app.js, r366 J23-1). Eén klasse voor elke datum die niet mag breken; Z36 R10 kan hem overal gebruiken. Toets: s128 J1 mét NEG. */
html:root body .cc-datum9{white-space:nowrap!important}
/* r366 (161e) — aanvullingen op het Z36-blok die maak-blok-z36.py niet meenam (REGELS-Z36) */
/* R32 · .sr-only: de klasse bestond nergens in de CSS (162e, 22.59) — app.js gebruikt hem voor de kolomkoppen „Actie” (Import terugdraaien, Geleerde regels); de standaardregel */
html:root body .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
/* R37 · P10 (REGELS-Z36; Fable 14.44: optie C) · de hub Boekhouding in het ritme van de andere hubs (1) titel → eerste inhoud 24 (was 16; de andere hubs 24–25) */
html:root body .cc-bento .cc-h3 .cc-boekh-cols{margin-top:8px!important}
/* (2) vanaf 1280 blijven de pil en „afsluiten ›” links boven „Kas”, zoals op elke smallere breedte — v1.88.0 zette ze daar in een rechterkolom en liet links boven „Kas”
   51–72 px leeg (Sam W58); de links 20 px onder de pilrij, de kaart blijft in het midden, de lege ruimte valt onderaan; het boekjaarmenu klapt links uit */
@media (min-width:1280px){
  html:root body .cc-bento .cc-h3 .cc-boekh-cols.cc-boekh9{grid-template-areas:"pil kaart ." "links kaart ."!important;grid-template-rows:auto 1fr!important;row-gap:20px!important;align-items:start!important}
  html:root body .cc-bento .cc-h3 .cc-bjwrap9{grid-area:pil!important;justify-self:start!important;align-self:start!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important}
  html:root body .cc-bento .cc-h3 .cc-hl{grid-area:links!important;align-self:start!important;justify-self:start!important}
  html:root body .cc-bento .cc-h3 .cc-bj-menu{left:0!important;right:auto!important}
  html:root body .cc-bento .cc-h3 .cc-bjwrap9 .cc-bjst9{margin:0!important}/* op één rij: „afsluiten ›” in het midden naast de pil (de marge 8/−4 van de kolomvorm schoof hem 6 px omlaag) */
}
/* R39 (de bol, s97 L2) · liggend op de telefoon (≤ 500 px hoog) is de bol weg zolang er een venster openstaat (index.html, Z21-5: hij lag over „Sluiten”) — de
   rondje-regel van het Z36-blok (rond-midden.css, vanaf 722 px breed, specificiteit 0,5,3) zette hem met display:inline-block weer terug; deze regel (0,6,2) wint */
@media (max-height:500px){
  html:root:root:root:root body:has(.modal-overlay) .cc-chef-fab{display:none!important}
}
/* R44 + s97 L3 · liggend (≤ 500 px hoog) houdt het gesprek van Charlie zijn ruimte (Sam, Z21-5): de AI-zin is nu 12 px op 1,5 (R44, art. 50 — op 852 px drie regels:
   26 → 51 px) en „Vraag” 40 hoog, de kop werd 12 px lager; netto 162 → 145 px gesprek. Het schermvullende venster (L1) heeft liggend geen kaartrand van 24 nodig:
   16 boven en onder (alleen Charlie, zoals de rest van de liggende Charlie-regel van Z21-5) — gemeten 145 → 160 px op 852 × 393 */
@media (max-height:500px){
  html:root:root body .modal-overlay.cc-chefbot-ov>.modal.modal{padding-top:16px!important;padding-bottom:16px!important}
}
/* P12 (het Z36-blok) geeft elk datumveld in een venster min-width 150 (de datum + het icoontje passen dan altijd) — maar in de periode van de omzetimport staan er
   twee naast elkaar met „t/m” (de component zet zelf flex 1 1 0 + min-width 0); op de telefoon (390) schoof het venster daardoor 7 px zijwaarts (s121 A11, rood
   sinds deel 3). Daar krimpen ze weer: op 390 elk ± 140 px, „01-12-2025” met het icoontje past (gemeten). Specificiteit 0,5,3 wint van P12 (0,4,3), dat later staat. */
html:root body .modal [data-omz-form] input.dep-input[type="date"]{min-width:0!important}
/* 175e-rest9omz (r366 deel 34): de R70-band van .cc-hl-rest9-omz is weg — sinds deel 31 (kaart 173e-1) staat „Omzet uit webshop, kassa of platform” niet meer op de hub; de regel raakte geen element (M2260 grafsteen) */
/* R17 (P05, M12) · één keuzegroep (segment): één grijs vlak g2, hoek 8, 3 px binnenrand, 1 px g3; de gekozen optie #166534 met wit (donker #22c55e met #0c120e) — naar
   Fables proef keuze-z36.css § P05, met de klassen van de bouw (app.js zet .cc-seg9 op de groep en .cc-seg9-k/.cc-seg9-aan op de knoppen; z36-d-r17-161e.py) */
html:root:root:root:root:root:root body .modal .cc-seg9{box-shadow:inset 0 0 0 1px var(--ccG3)!important;display:inline-flex!important;gap:2px!important;padding:3px!important;border-radius:8px!important;background:var(--ccG2)!important;flex-wrap:nowrap!important;width:auto!important;flex:0 0 auto!important;align-items:center!important}
html:root:root:root:root:root:root body .modal .cc-seg9>button.cc-seg9-k{border:0!important;background:transparent!important;color:var(--ccG7)!important;border-radius:6px!important;min-height:calc(28px / var(--ccZm,1))!important;height:auto!important;padding:0 12px!important;font-size:13px!important;font-weight:500!important;box-shadow:none!important;margin:0!important}
html:root:root:root:root:root:root body .modal .cc-seg9>button.cc-seg9-k.cc-seg9-aan{background:#166534!important;color:#fff!important;font-weight:600!important}
html:root:root:root:root:root:root[data-theme="dark"] body .modal .cc-seg9{background:#26282d!important;box-shadow:inset 0 0 0 1px #3a3b40!important}
html:root:root:root:root:root:root[data-theme="dark"] body .modal .cc-seg9>button.cc-seg9-k.cc-seg9-aan{background:#22c55e!important;color:#0c120e!important}
/* R7 (P18, M26) · „Exporteer ▾”: het menu klapt omhoog boven de knop (beide plekken staan in de voet), in de vorm van een menu (zoals het boekjaarmenu): wit, rand g3,
   hoek 8, schaduw; de items 32 hoog (≥ 24), 13 px, hover/focus g1, de focusring alleen met het toetsenbord */
html:root:root:root body .cc-exp9{position:relative!important;display:inline-flex!important}
html:root:root:root body .cc-exp9-menu{position:absolute!important;bottom:calc(100% + 6px)!important;left:0!important;min-width:150px!important;background:var(--surf)!important;border:1px solid var(--ccG3)!important;border-radius:8px!important;box-shadow:0 8px 24px rgba(17,17,17,.14)!important;padding:4px!important;z-index:60!important;display:flex!important;flex-direction:column!important;gap:2px!important}
html:root:root:root body .cc-exp9-menu>button.cc-exp9-item{all:unset;box-sizing:border-box!important;display:block!important;width:100%!important;padding:0 12px!important;min-height:32px!important;line-height:32px!important;border-radius:6px!important;font-size:13px!important;font-weight:500!important;color:var(--ccG8)!important;cursor:pointer!important;white-space:nowrap!important;text-align:left!important;background:transparent!important}
html:root:root:root body .cc-exp9-menu>button.cc-exp9-item:hover,html:root:root:root body .cc-exp9-menu>button.cc-exp9-item:focus{background:var(--ccG1)!important}
html:root:root:root body .cc-exp9-menu>button.cc-exp9-item:focus-visible{outline:2px solid #0369a1!important;outline-offset:-2px!important}
html:root:root:root[data-theme="dark"] body .cc-exp9-menu{background:#26282d!important;border-color:#3a3b40!important;box-shadow:0 8px 24px rgba(17,17,17,.5)!important}
html:root:root:root[data-theme="dark"] body .cc-exp9-menu>button.cc-exp9-item{color:#e7e8ea!important}
html:root:root:root[data-theme="dark"] body .cc-exp9-menu>button.cc-exp9-item:hover,html:root:root:root[data-theme="dark"] body .cc-exp9-menu>button.cc-exp9-item:focus{background:#3a3b40!important}
/* R27 (P07, M14) · de voet volgens Z29 § KN: „rechts de doorklikknoppen en als LAATSTE de hoofdknop”. Het Z34-blok (0,7,2) zette de hoofdknop op order 3 — vóór de
   doorklikknoppen (order 4): in Administratiebeheer, Bankrekeningen, de afsluitwizard („‹ Vorige” stond rechts van „Volgende ›”) en de aangifte omzetbelasting stond de
   hoofdknop daardoor niet rechts. Order 6 (0,8,2) zet hem achteraan; het vulstuk (::after, order 3, flex 1) houdt links en rechts uit elkaar. */
html:root:root body .modal-overlay .modal .modal-foot .btn.btn.cc-hoofd9{order:6!important}
/* … en het vulstuk weer aan (het Z34-blok zette .modal-foot::after uit en gaf de hoofdknop margin-left:auto — dan plakten de doorklikknoppen links tegen Sluiten aan):
   links (order 0–2) · het vulstuk (order 3, groeit) · de doorklikknoppen (4) · de hoofdknop (6). Zijn margin-left:auto blijft: op de telefoon, op een eigen regel, staat
   hij daardoor rechts (op de eerste regel neemt het vulstuk de ruimte, dus is die marge daar 0) — s104 C5 „de andere knoppen rechts bij elkaar” */
html:root:root body .modal-overlay .modal .modal-foot::after{display:block!important;content:""!important;order:3!important;flex:1 1 0!important;min-width:0!important;height:0!important}
/* R7 + R27 · „Exporteer ▾” staat in de voet in een eigen span (.cc-exp9, de menuknop met zijn menu): die span krijgt de plek van Exporteer (order 1, links) — anders
   kreeg hij als „geen .btn” order 4 en stond hij rechts (M14 op de aangifte omzetbelasting) */
html:root body .modal-foot>.cc-exp9,html:root body .cc-cardscreen .iobar>.cc-exp9{order:1!important}
/* R54 (Z36-1b 1 A · 2 A, M5) · de rollen in Accountbeheer › Administraties: één aanduiding per regel — lijn-icoon 14 px g6 + woord 12/500 g7, geen vlak, geen rand
   (donker: icoon #a1a3a7, woord #c9cacd) — naar Fables proef rol-vorm.js („ico”) */
html:root:root body .modal .cc-rol9{display:inline-flex!important;align-items:center!important;gap:6px!important;margin-left:10px!important;font-size:12px!important;font-weight:500!important;color:var(--ccG7)!important;white-space:nowrap!important;line-height:20px!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
html:root:root body .modal .cc-rol9 .cc-rol9-ic{color:var(--ccG6)!important;flex:0 0 auto!important;display:inline-block!important}
html:root:root[data-theme="dark"] body .modal .cc-rol9{color:#c9cacd!important}
html:root:root[data-theme="dark"] body .modal .cc-rol9 .cc-rol9-ic{color:#a1a3a7!important}
/* R57 (Z36-6 2 A · 160e-5 1 A; meter M37) · de koppelknoppen „E-mailadres koppelen” en „Automatische bankkoppelingen” ZOALS VERKOOP: een groen rondje van 36 px
   met een icoon (envelop · schakel; wit op var(--grn) = #16a34a, licht én donker, zoals de rondjes van Verkoop), de titel 14/500 g8 en een grijze regel 12 g6, één regel.
   Op slot: het rondje g2 + g6 (donker #3a3b40 + #a1a3a7), de titel g6 en de pil (R62/R63) — past die niet naast de titel, dan eronder (flex-wrap, nooit buiten de kaart).
   Geen groene tekst bij hover meer (de rondjes van Verkoop doen dat ook niet; het Z34-blok had dat daar al uitgezet) — en het icoon blijft wit (de hoverregel
   .cc-tophov:hover * zou het groen op groen maken). De kaart (.cc-actw, min-height 54) zet de rij in het midden, net als de rij van Verkoop: de rondjes staan even hoog. */
html:root:root body .cc-bento .cc-actw>.cc-kop9{display:flex!important;align-items:center!important;gap:12px!important;margin:0!important;padding:0!important;min-width:0!important;line-height:normal!important;font-size:14px!important;font-weight:500!important;color:var(--ccG8)!important}
html:root:root body .cc-bento .cc-actw .cc-kop9-ico{flex:0 0 36px!important;width:36px!important;height:36px!important;border-radius:50%!important;background:var(--grn)!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;position:static!important;margin:0!important;padding:0!important}
html:root:root body .cc-bento .cc-actw .cc-kop9-ico svg{width:18px!important;height:18px!important;flex:none!important}
html:root:root body .cc-bento .cc-actw .cc-kop9-ico svg,html:root:root body .cc-bento .cc-actw .cc-kop9-ico svg *{color:inherit!important}
html:root:root body .cc-bento .cc-actw .cc-kop9-uit .cc-kop9-ico{background:#efefec!important;color:#6b6b66!important}
html:root:root[data-theme="dark"] body .cc-bento .cc-actw .cc-kop9-uit .cc-kop9-ico{background:#3a3b40!important;color:#a1a3a7!important}
html:root:root body .cc-bento .cc-actw .cc-kop9-b{flex:1 1 auto!important;min-width:0!important;margin:0!important;padding:0!important}
html:root:root body .cc-bento .cc-actw .cc-kop9-t{display:flex!important;flex-wrap:wrap!important;align-items:center!important;column-gap:8px!important;row-gap:3px!important;min-width:0!important;margin:0!important;padding:0!important;font-size:14px!important;font-weight:500!important;line-height:normal!important;color:var(--ccG8)!important}
html:root:root body .cc-bento .cc-actw .cc-kop9-uit .cc-kop9-t{color:var(--ccG6)!important}
html:root:root body .cc-bento .cc-actw .cc-kop9-tt{min-width:0!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:inherit!important}
html:root:root body .cc-bento .cc-actw .cc-kop9-t :is(.cc-a9v,.cc-a9k){font-size:inherit!important;font-weight:inherit!important;color:inherit!important;line-height:inherit!important}
html:root:root body .cc-bento .cc-actw .cc-kop9-s{display:block!important;visibility:visible!important;margin:2px 0 0!important;padding:0!important;min-width:0!important;font-size:12px!important;font-weight:400!important;line-height:18px!important;color:var(--ccG6)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
html:root:root body .cc-bento .cc-actw .cc-kop9-s *{font-size:inherit!important;font-weight:inherit!important;color:inherit!important}
html:root:root body .cc-bento .cc-actw .cc-kop9-s .cc-kop9-v{display:inline-block!important;width:12px!important;height:12px!important;margin-right:3px!important;vertical-align:-1px!important}
/* (de grijze regel 12/18 zoals „Nieuwe offerte”: de titel en de regel staan dan op dezelfde hoogte als bij Verkoop — s59 Q1, ± 0,1 px) */
/* de schakel tussen lang en kort — beide blokken tegelijk, nu ook op de telefoon (R57: de grijze regel blijft één regel): de uitleg staat er alleen als hij op één
   regel naast het rondje past. Het rondje + de tussenruimte (36 + 12) gaan van de breedte af: de drempel van r365 (de kaart 360 CSS-px; de bankuitleg is 344,4 px,
   dus ± 16 px speling, s122 L5d ≥ 8) wordt 360 + 48 = 408. Daaronder de korte titel („E-mailadres” · „Bankkoppelingen”) + „Koppel nu” (of „✓ Gekoppeld”). */
@container ccact9 (max-width:407.99px){
  html:root:root body .cc-bento :is(.cc-inkoop,.cc-bank) .cc-actw .cc-kop9 .cc-a9v{display:none!important}
  html:root:root body .cc-bento :is(.cc-inkoop,.cc-bank) .cc-actw .cc-kop9 .cc-a9k{display:inline!important}
  html:root:root body .cc-bento :is(.cc-inkoop,.cc-bank) .cc-actw .cc-kop9-s>span:not(.cc-a9kort9){display:none!important}
  html:root:root body .cc-bento :is(.cc-inkoop,.cc-bank) .cc-actw .cc-kop9-s>.cc-a9kort9{display:inline!important}
}
@container ccact9 (min-width:408px){
  html:root:root body .cc-bento :is(.cc-inkoop,.cc-bank) .cc-actw .cc-kop9 .cc-a9v{display:inline!important}
  html:root:root body .cc-bento :is(.cc-inkoop,.cc-bank) .cc-actw .cc-kop9 .cc-a9k{display:none!important}
  html:root:root body .cc-bento :is(.cc-inkoop,.cc-bank) .cc-actw .cc-kop9-s>span:not(.cc-a9kort9){display:inline!important}
  html:root:root body .cc-bento :is(.cc-inkoop,.cc-bank) .cc-actw .cc-kop9-s>.cc-a9kort9{display:none!important}
}
/* … op slot op de smalle tablet loopt de pil onder de titel (gemeten: Bank op 721–874, E-mail op 721–738; Fable mat het op 768) en wordt de rij titel · pil ·
   grijze regel ± 62 px hoog (17 + 3 + 22 + 2 + 18) — hoger dan de 54 van de kaart. Dan de drie bovenste blokken (de knoppen van Verkoop, E-mailadres, Bankkoppelingen) samen 65 hoog, zodat
   de sleepvakken op één lijn blijven (r349 wens B; s96 A1, s122 L2); alleen met een koppeling op slot, tot 920 (± 45 px speling voor een andere tekstweergave). */
@media (min-width:721px) and (max-width:919.9px){
  html:root:root body .cc-bento:has(.cc-kop9-uit) :is(.cc-verkoop .cc-nieuw2col9,.cc-inkoop .cc-actw,.cc-bank .cc-actw){min-height:65px!important}
}
/* P49 (Z36-3 vraag 2 = A; meter M43) · het icoonblokje van een venster = het icoon van zijn hub, in merkgroen zacht (licht #e8f3ec + lijn #166534 · donker
   rgba(34,197,94,.12) + lijn #4ade80). app.js (z36-d-p49-161e.py) zet data-cc-hub op .modal-overlay uit de tabel venster → hub van Fable (TABEL-VENSTER-HUB-Z36, op de
   titel); de iconen zijn die van de hubkoppen (IC.* en het tandwiel van Beheer). Zonder data-cc-hub blijft het algemene icoon (en Charlie zijn C). */
html:root body .modal-overlay[data-cc-hub="verkoop"]{--cc-hub-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166534' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2.5h7L18 7.5V21a.5.5 0 0 1-.5.5h-11A.5.5 0 0 1 6 21V3a.5.5 0 0 1 .5-.5z'/%3E%3Cpath d='M13 2.5V8h5'/%3E%3C/svg%3E");--cc-hub-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2.5h7L18 7.5V21a.5.5 0 0 1-.5.5h-11A.5.5 0 0 1 6 21V3a.5.5 0 0 1 .5-.5z'/%3E%3Cpath d='M13 2.5V8h5'/%3E%3C/svg%3E")}
html:root body .modal-overlay[data-cc-hub="inkoop"]{--cc-hub-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166534' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='17' cy='20' r='1.4'/%3E%3Cpath d='M3 4.5h2l2.3 10a1 1 0 0 0 1 .8h8.4a1 1 0 0 0 1-.8L19 7.5H6'/%3E%3C/svg%3E");--cc-hub-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='17' cy='20' r='1.4'/%3E%3Cpath d='M3 4.5h2l2.3 10a1 1 0 0 0 1 .8h8.4a1 1 0 0 0 1-.8L19 7.5H6'/%3E%3C/svg%3E")}
html:root body .modal-overlay[data-cc-hub="bank"]{--cc-hub-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166534' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5l9-5 9 5'/%3E%3Cpath d='M5.5 9.5v8M10 9.5v8M14 9.5v8M18.5 9.5v8'/%3E%3Cpath d='M3.5 18.5h17'/%3E%3C/svg%3E");--cc-hub-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5l9-5 9 5'/%3E%3Cpath d='M5.5 9.5v8M10 9.5v8M14 9.5v8M18.5 9.5v8'/%3E%3Cpath d='M3.5 18.5h17'/%3E%3C/svg%3E")}
html:root body .modal-overlay[data-cc-hub="fiscaal"]{--cc-hub-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166534' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6'/%3E%3Ccircle cx='8' cy='8' r='1.7'/%3E%3Ccircle cx='16' cy='16' r='1.7'/%3E%3C/svg%3E");--cc-hub-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6'/%3E%3Ccircle cx='8' cy='8' r='1.7'/%3E%3Ccircle cx='16' cy='16' r='1.7'/%3E%3C/svg%3E")}
html:root body .modal-overlay[data-cc-hub="boekhouding"]{--cc-hub-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166534' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v16h16'/%3E%3Crect x='7.5' y='11' width='2.6' height='6' rx='.4'/%3E%3Crect x='12' y='8' width='2.6' height='9' rx='.4'/%3E%3Crect x='16.5' y='13' width='2.6' height='4' rx='.4'/%3E%3C/svg%3E");--cc-hub-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v16h16'/%3E%3Crect x='7.5' y='11' width='2.6' height='6' rx='.4'/%3E%3Crect x='12' y='8' width='2.6' height='9' rx='.4'/%3E%3Crect x='16.5' y='13' width='2.6' height='4' rx='.4'/%3E%3C/svg%3E")}
html:root body .modal-overlay[data-cc-hub="jaarwerk"]{--cc-hub-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166534' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h10a2 2 0 0 1 2 2v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z'/%3E%3Cpath d='M9 4v15'/%3E%3C/svg%3E");--cc-hub-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h10a2 2 0 0 1 2 2v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z'/%3E%3Cpath d='M9 4v15'/%3E%3C/svg%3E")}
html:root body .modal-overlay[data-cc-hub="beheer"]{--cc-hub-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166534' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");--cc-hub-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E")}
html:root:root body .modal-overlay[data-cc-hub] .modal .modal-title::before{background:var(--cc-hub-l) center/18px 18px no-repeat,#e8f3ec!important}
html:root:root[data-theme="dark"] body .modal-overlay[data-cc-hub] .modal .modal-title::before{background:var(--cc-hub-d) center/18px 18px no-repeat,rgba(34,197,94,.12)!important}
/* op de telefoon het blokje 28 met een icoon van 16 (zoals het Z34-blok; de regel hierboven zou het anders op 18 zetten) */
@media (max-width:720px){
  html:root:root body .modal-overlay[data-cc-hub] .modal .modal-title::before{background-size:16px 16px,auto!important}
}
/* R52 (Z36-2b vraag 1 = A) · geen „Sluiten” meer in een voet (app.js: z36-d-r52-161e.py) — en een voet zonder knoppen verdwijnt: de omzetimport zonder kanalen had
   alleen Sluiten; zijn voet blijft het laatste kind van het venster (r142b/r143), maar leeg toont hij geen balk */
html:root:root body .modal-overlay .modal .modal-foot:empty{display:none!important}
/* R53 (Z36-2b 2 A · W42, M14) · stap 2 van het indienvenster draagt de knop „Overnemen in Mijn Belastingdienst” (cc-seclink: hoek 6, 28 px, zoals de functieknoppen in een
   venster). De knop breekt nooit af; op de telefoon staat hij onder de tekst van de stap, uitgelijnd met die tekst (niet met het cijfer) — anders liep zijn tekst over twee
   regels uit het knopje (gemeten op 390 px). De link „Aansluiting met de rondrekening btw ›” vóór de voet van Aangifte omzetbelasting is de W8-link (.cc-w8link9). */
html:root:root body .modal .bd-flow-step.cc-stap2-9 .cc-stapknop9{flex:none!important;white-space:nowrap!important;margin-left:2px!important}
@media (max-width:720px){html:root:root body .modal .bd-flow-step.cc-stap2-9{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;column-gap:10px!important;row-gap:6px!important;align-items:center!important}
  html:root:root body .modal .bd-flow-step.cc-stap2-9 .cc-stapknop9{grid-column:2!important;justify-self:start!important;margin-left:0!important}}
/* R61 (Z36-5 3 B) · Openstaande verkoopfacturen op de telefoon (≤ 720 px): de voet Exporteer · Ouderdom · Herinneringen op één rij — de rest van de naam
   („sanalyse”, „ en aanmaningen”) staat alleen vanaf 721 px; de knop zegt op de telefoon wat hij zichtbaar zegt (WCAG 2.5.3) */
@media (max-width:720px){html:root:root body .modal .modal-foot .cc-kortrest9{display:none!important}}
/* … en op de smalste telefoon (≤ 400 px) passen de drie knoppen alleen met een smallere binnenrand (8 px i.p.v. 12): Exporteer + Ouderdom + Herinneringen + het vulstuk
   met drie tussenruimtes is 330 px, de voet op 360 px heeft 312 (gemeten); .modal-overlay erbij, anders wint de regel van 14 px (0,7,2 — later in de cascade) */
@media (max-width:400px){html:root:root body .modal-overlay .modal .modal-foot:has(.cc-dbher9) .btn.btn{padding-left:8px!important;padding-right:8px!important}}
/* r366 (161e) — de abonnementskaarten in de app (REGELS-Z36 R64, R68, R33; de proef van Fable: punten7.js, kies-kaart.js) */
/* R68 · de punten: een vinkje (10 × 8, svg-masker) in g6; groen (#16a34a, donker #22c55e) = zit in jouw (of het gekozen) abonnement; de kop „Onbeperkt:” 600 zonder vinkje; „en meer ›” g6 */
html:root body .cc-z35-kaart ul.cc-z36-punten{list-style:none!important;margin:0!important;padding:0!important}
html:root body .cc-z35-kaart ul.cc-z36-punten li{position:relative!important;padding:0 0 0 19px!important;margin:0 0 4px!important;list-style:none!important}
html:root body .cc-z35-kaart ul.cc-z36-punten li::before{content:""!important;position:absolute!important;left:1px!important;top:calc(.775em - 4px)!important;width:10px!important;height:8px!important;background:#6b6b66!important;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2010%208%27%3E%3Cpath%20d%3D%27M1%204.3%203.7%206.9%209%201.1%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain!important;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2010%208%27%3E%3Cpath%20d%3D%27M1%204.3%203.7%206.9%209%201.1%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain!important}
html:root[data-theme="dark"] body .cc-z35-kaart ul.cc-z36-punten li::before{background:#a1a3a7!important}
html:root body .cc-z35-kaart ul.cc-z36-punten li.cc-z36-groen::before{background:#16a34a!important}
html:root[data-theme="dark"] body .cc-z35-kaart ul.cc-z36-punten li.cc-z36-groen::before{background:#22c55e!important}
html:root body .cc-z35-kaart ul.cc-z36-punten li.cc-z36-kop{padding-left:0!important;font-weight:600!important}
html:root body .cc-z35-kaart ul.cc-z36-punten li.cc-z36-kop::before,html:root body .cc-z35-kaart ul.cc-z36-punten li.cc-z36-meer::before{display:none!important}
html:root body .cc-z35-kaart ul.cc-z36-punten li.cc-z36-meer{padding-left:0!important}
html:root body .cc-z35-kaart ul.cc-z36-punten li.cc-z36-meer a{color:#6b6b66!important;text-decoration:none!important}
html:root[data-theme="dark"] body .cc-z35-kaart ul.cc-z36-punten li.cc-z36-meer a{color:#a1a3a7!important}
html:root body .cc-z35-kaart ul.cc-z36-punten li.cc-z36-meer a:hover,html:root body .cc-z35-kaart ul.cc-z36-punten li.cc-z36-meer a:focus-visible{text-decoration:underline!important}
/* R68 · onder de kaarten één regel „In elk abonnement: …” (12,5 px, inkt, gecentreerd) */
html:root body .modal .cc-z36-onder{margin:14px 4px 0!important;font-size:12.5px!important;line-height:1.5!important;color:var(--txt)!important;text-align:center!important}
/* R33 · de voetnoot links, 12 px, g6 (inline in app.js; hier de zekerheid tegen oudere regels) */
html:root body .modal .cc-z35-klein{font-size:12px!important;text-align:left!important;color:var(--ccG6)!important;max-width:none!important;margin:16px 0 0!important}
/* R64 · kiezen zonder voorkeuze: een eigen knop over de hele kaart (aria-pressed); de knop „Kies …” en de link „en meer ›” liggen erboven */
html:root body .cc-z35-kaart.cc-z36-kiesbaar{position:relative!important;cursor:pointer}
html:root body .cc-z35-kaart .cc-z36-kies{position:absolute!important;inset:0!important;z-index:1!important;display:block!important;width:auto!important;height:auto!important;min-height:0!important;background:transparent!important;border:0!important;border-radius:inherit!important;padding:0!important;margin:0!important;box-shadow:none!important;cursor:pointer!important}
html:root body .cc-z35-kaart .cc-z36-kies:focus-visible{outline:2px solid #0369a1!important;outline-offset:3px!important}
html:root body .cc-z35-kaart.cc-z36-kiesbaar .cc-abo-btn,html:root body .cc-z35-kaart.cc-z36-kiesbaar a{position:relative!important;z-index:2!important}
html:root body .cc-z35-kaart.cc-z36-kiesbaar:not(.cc-z36-gekozen):hover{border-color:var(--ccG5,#b8b8b2)!important}
html:root:root:root:root:root:root:root:root:root body .modal .cc-z35-kaart.cc-z36-gekozen .cc-abo-btn.cc-abo-btn{background:#166534!important;border-color:#166534!important;color:#fff!important;box-shadow:none!important}
html:root:root:root:root:root:root:root:root:root[data-theme="dark"] body .modal .cc-z35-kaart.cc-z36-gekozen .cc-abo-btn.cc-abo-btn{background:#22c55e!important;border-color:#22c55e!important;color:#0c120e!important}
html:root body .modal .cc-z35-woord{white-space:nowrap}
/* R68 · de landing: dezelfde punten (gegenereerd uit yt[].punten door z36-e-landing-161e.py), dezelfde vorm als in de app; Z37 maakt de vorm van de landing af */
html:root body #cc-landing .ld-punten{list-style:none;margin:10px 0 0;padding:0;font-size:13.5px;line-height:1.55;color:#3a3a36;flex:1 1 auto}
html:root body #cc-landing .ld-punten li{position:relative;padding:0 0 0 19px;margin:0 0 4px}
html:root body #cc-landing .ld-punten li::before{content:"";position:absolute;left:1px;top:calc(.775em - 4px);width:10px;height:8px;background:#6b6b66;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2010%208%27%3E%3Cpath%20d%3D%27M1%204.3%203.7%206.9%209%201.1%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2010%208%27%3E%3Cpath%20d%3D%27M1%204.3%203.7%206.9%209%201.1%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain}
html:root body #cc-landing .ld-punten li.ld-pk{padding-left:0;font-weight:600}
html:root body #cc-landing .ld-punten li.ld-pk::before,html:root body #cc-landing .ld-punten li.ld-pm::before{content:none}
html:root body #cc-landing .ld-punten li.ld-pm{padding-left:0}
html:root body #cc-landing .ld-punten li.ld-pm a{color:#6b6b66;text-decoration:none}
html:root body #cc-landing .ld-punten li.ld-pm a:hover,html:root body #cc-landing .ld-punten li.ld-pm a:focus-visible{text-decoration:underline}
html:root[data-theme="dark"] body #cc-landing .ld-punten{color:#c9cacd}
html:root[data-theme="dark"] body #cc-landing .ld-punten li::before{background:#a1a3a7}
html:root[data-theme="dark"] body #cc-landing .ld-punten li.ld-pm a{color:#a1a3a7}
html:root body #cc-landing .ld-onder9{margin:16px 4px 0;font-size:12.5px;line-height:1.5;color:var(--txt,#111);text-align:center}
/* R68 · de voetregel op de landing blijft klein en gecentreerd (Sam via 160e, r365): de regel van r365 koos hem met „.ld-prijzen + .ld-abo-sub”; nu staat
   „In elk abonnement: …” (.ld-onder9) ertussen, dus dezelfde regel met „~” (de enige .ld-abo-sub ná de kaarten) */
html:root body #cc-landing .ld-prijzen ~ .ld-abo-sub{font-size:12px!important;line-height:1.5!important;text-align:center!important;max-width:calc(3 * 302px / var(--ccZm,1) + 28px);margin-left:auto!important;margin-right:auto!important}
html:root body #cc-landing .ld-onder9{max-width:calc(3 * 302px / var(--ccZm,1) + 28px);margin-left:auto!important;margin-right:auto!important}
/* R63 · de abonnementspil als knop (een echte <button>): dezelfde pil; tikvlak ≥ 24 op het scherm (::after, zoals .kb-info); hover de schaduwring g4; de focusring van de app */
html:root body button.cc-plan-tag.cc-pil-knop9{font-family:inherit!important;border:0!important;margin:0;cursor:pointer!important;position:relative!important;line-height:1.5;vertical-align:middle}
html:root body .cc-plan-tag.cc-pil-knop9::after{content:""!important;position:absolute!important;left:-2px!important;right:-2px!important;top:calc(50% - 13px)!important;height:26px!important;border-radius:999px!important}
html:root body .cc-plan-tag.cc-pil-knop9:hover{box-shadow:0 0 0 1px rgba(17,17,17,.28),0 1px 2px rgba(17,17,17,.08),0 4px 8px -4px rgba(17,17,17,.26)!important}
html:root[data-theme="dark"] body .cc-plan-tag.cc-pil-knop9:hover{box-shadow:0 0 0 1px rgba(255,255,255,.30),0 4px 8px -4px rgba(0,0,0,.6)!important}
html:root body .cc-plan-tag.cc-pil-knop9:focus-visible{outline:2px solid #0369a1!important;outline-offset:2px!important}
/* R66 · de fiscale eenheid op slot zonder MAX: de titel en de zin g6, de MAX-pil (slotje) achter de titel */
html:root body .cc-z36-fe-slot .cc-w8kop9 .cc-vlak9-kop,html:root body .cc-z36-fe-slot .cc-w8sam9{color:#6b6b66!important}
html:root[data-theme="dark"] body .cc-z36-fe-slot .cc-w8kop9 .cc-vlak9-kop,html:root[data-theme="dark"] body .cc-z36-fe-slot .cc-w8sam9{color:#a1a3a7!important}
html:root body .cc-z36-fe-slot .cc-z36-fe-pil{margin-left:8px}
/* ===== einde r366 (Opus 161e) ===== */

/* Z32 § MEMO-4: het open/dicht-pijltje van „Door Cijferchef geboekt” in Memoriaal (display:flex op een <summary> verbergt het eigen driehoekje) */
.cc-z32auto9 summary{list-style:none}
.cc-z32auto9 summary::-webkit-details-marker{display:none}
.cc-z32auto9 summary::before{content:"\25B8";content:"\25B8" / "";display:inline-block;width:12px;color:var(--muted);flex:none}
.cc-z32auto9[open]>summary::before,.cc-z32auto9 details[open]>summary::before{content:"\25BE";content:"\25BE" / ""}

/* ===================================================================================================================================================
   r360 = v1.83.0 (Opus 149e, za 3 okt 2026) — REGELS-Z29 van Fable Z29: één vaste stijl voor het hele systeem (Sam, kaarten Z29-1 t/m Z29-4) +
   Fables zeven kleine voorstellen B1, B2, B5–B9 (Sam, kaart 149e-1 „A · Alle zeven mee”). De blokken § KN, § KR, § BR en § VL zijn letterlijk die van
   z29-consistentie/REGELS-Z29.md (getoetst in Fables proef); erachter de aanvullingen van de bouw (r360-…). Staat ACHTERAAN, zodat het de oudere regels
   (r44 .modal-foot .btn, r357 .cc-cardscreen .btn, r358 .cc-brexp9) overstemt.
   =================================================================================================================================================== */

/* ===== Z29 § KN — de knoppen onderin (Sam, kaart Z29-1: alles zwart · afsluitknop amber omrand · rood omrand links · vraagvensters zonder kruisje) =====
   Elke knop in een knoppenbalk (.modal-foot, .cc-cardscreen .iobar, de balk van een los venster) is één pil van 24 px met 13 px letter.
   Plaats: links rood (weg) · Exporteer · Sluiten/Annuleren — een vulstuk — rechts de doorklikknoppen en als laatste de hoofdknop; niets in het midden. */
html body .modal-foot .btn,html body .cc-cardscreen .iobar .btn,html body [data-cc-modal="1"] .cc-dlgb{border-radius:999px!important;height:24px!important;min-height:24px!important;padding:0 12px!important;font-size:13px!important;font-weight:500!important;line-height:1!important;box-sizing:border-box!important;white-space:nowrap}
html body :is(.modal-foot,.cc-cardscreen .iobar) .btn:is(:disabled,.disabled),html body [data-cc-modal="1"] .cc-dlgb:disabled{opacity:.45!important;cursor:not-allowed!important}
html body .modal-foot,html body .cc-cardscreen .iobar{justify-content:flex-start!important;column-gap:8px!important}
html body .modal-foot .btn,html body .cc-cardscreen .iobar .btn{margin-left:0!important;margin-right:0!important;order:4}
html body .modal-foot>div:has(>.btn){display:contents!important}
html body .modal-foot>:not(.btn):not(div:has(>.btn)){order:4}
html body :is(.modal-foot,.cc-cardscreen .iobar) .btn:is(.cc-rood9,.cc-solid-red,.cc-del9){order:0!important}
html body :is(.modal-foot,.cc-cardscreen .iobar) .btn:is(.cc-exp,.io-icon-btn.export){order:1!important}
html body .modal-foot::after,html body .cc-cardscreen .iobar::after{content:"";order:3;flex:1 1 0;min-width:0}
/* de hoofdknop houdt margin-left:auto: op de computer neemt het vulstuk de ruimte, op de telefoon blijft hij op een eigen regel rechts staan */
html body :is(.modal-foot,.cc-cardscreen .iobar) .btn.cc-hoofd9{order:5!important;margin-left:auto!important}
/* één kleur: zwart (licht #343a40 · donker #e8eaed met donkere letter) — ook de rapportschermen en de losse vensters */
:root{--ccKz9:#343a40;--ccKzT9:#fff;--ccKzH9:#24272b}html[data-theme="dark"]{--ccKz9:#e8eaed;--ccKzT9:#16181c;--ccKzH9:#cfd4da}
html body :is(.modal-foot,.cc-cardscreen .iobar) .btn.btn:hover:not(:disabled),html body [data-cc-modal="1"]>div>div:last-child:has(>.cc-dlgb) .cc-dlgb.cc-dlgb:hover{background:var(--ccKzH9)!important;border-color:var(--ccKzH9)!important;color:var(--ccKzT9)!important}
/* rood = weg, ontkoppelen, uitloggen, leegmaken: omrand in het ene rood, links (drie keer .btn wint van de zwarte regel) */
html body :is(.modal-foot,.cc-cardscreen .iobar) .btn.btn.btn:is(.cc-rood9,.cc-solid-red,.cc-del9):hover:not(:disabled),html body [data-cc-modal="1"]>div>div:last-child:has(>.cc-dlgb) .cc-dlgb.cc-dlgb.cc-dlgb.cc-dlgb-rood:hover{background:var(--tred)!important;color:var(--txtred)!important;border-color:var(--txtred)!important}
/* de afsluitknop, stand 1 „Boekjaar afsluiten — N punten open” = werk voor jou: amber omrand (zoals Bevestigen); stand 2 = de zwarte hoofdknop */
html body :is(.modal-foot,.cc-cardscreen .iobar) .btn.btn.btn.cc-werk9{background:var(--surf)!important;color:var(--ccWerk9)!important;border:1.5px solid var(--ccWerk9)!important}
html body :is(.modal-foot,.cc-cardscreen .iobar) .btn.btn.btn.cc-werk9:hover:not(:disabled){background:var(--tamb)!important}
/* de knoppen in de losse vensters (ook in hun lijst: Terugzetten, Downloaden, Transacties ophalen): dezelfde pil */
html body [data-cc-modal="1"] .cc-dlgb{border-radius:999px!important}

/* ===== Z29 § KR — het kruisje in de losse vensters: rechtsboven op dezelfde plek en maat als in elk venster; de titel houdt er ruimte voor; hoek 18 px ===== */
html body [data-cc-modal="1"]>div>.cc-dlgx9{position:absolute!important;top:18px;right:18px;width:25px;height:25px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;cursor:pointer;padding:0;border:0}
html body [data-cc-modal="1"]>div:has(>.cc-dlgx9){border-radius:16px!important}
html body [data-cc-modal="1"]>div:has(>.cc-dlgx9)>.cc-dlgx9+div{padding-right:36px}

/* ===== Z29 § BR — de rapportkaarten met één kolom inhoud zo smal als Omzetbelasting (≤ 640 px): Winstbelasting, Jaarrekening, Omzetspecificatie.
   Balans en resultaat blijft breed (twee kolommen). Op de telefoon verandert niets. ===== */
html body .modal-overlay.cc-smal9>.modal.cc-scherm{width:min(640px,calc(100vw/var(--ccZm,1) - 32px))!important;max-width:min(640px,calc(100vw/var(--ccZm,1) - 32px))!important;min-width:0!important}
/* de twee PDF-knoppen van de Jaarrekening: een rij met tussenruimte i.p.v. margin-left, zodat de tweede bij het omslaan niet inspringt */
html body .modal-overlay.cc-smal9 .card>div:has(>.btn.btn-go){display:flex;flex-wrap:wrap;gap:8px}
html body .modal-overlay.cc-smal9 .card>div:has(>.btn.btn-go)>.btn.btn-go{margin-left:0!important}
html body .modal-overlay.cc-smal9 .card>div:has(>.btn.btn-go)>:not(.btn){flex-basis:100%}

/* ===== Z29 § VL — de vlakken (Sam, kaart Z29-2: grijs · uitleg ingeklapt) ===== */
:root{--ccVlak9:var(--surf2)}
html body .modal .cc-vlak9{margin:10px 0 0;padding:12px 14px;background:var(--ccVlak9);border-radius:10px}
html body .modal .cc-vlak9:first-child{margin-top:0}
html body .modal .cc-vlak9-kop,html body .modal .cc-vlak9>label:first-child{display:block;font-size:13px!important;font-weight:600!important;color:var(--txt);margin-bottom:4px!important}
html body .modal .cc-vlak9.cc-vlak9-rood>.cc-vlak9-kop,html body .modal .cc-vlak9.cc-vlak9-rood>label:first-child{color:var(--txtred)!important}
/* de secties met koppen van r357 (Administratiebeheer, nieuwe factuur/offerte): de kop is de bovenkant van het vlak, de velden de onderkant */
html body .modal :is(.profile-grid,.gen-grid)>.cc-sec9-kop{margin:10px 0 0!important;padding:12px 14px 2px!important;background:var(--ccVlak9)!important;border-radius:10px 10px 0 0;font-size:13px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;color:var(--txt)!important}
html body .modal :is(.profile-grid,.gen-grid)>.cc-sec9-kop:first-child{margin-top:0!important}
html body .modal :is(.profile-grid,.gen-grid)>.cc-sec9-kop:has(+.cc-sec9-inh.dicht){border-radius:10px;padding-bottom:12px!important}
html body .modal :is(.profile-grid,.gen-grid)>.cc-sec9-inh:not(.dicht){display:grid!important;grid-column:1/-1;grid-template-columns:inherit;gap:12px;margin-top:-12px;padding:10px 14px 14px;background:var(--ccVlak9);border-radius:0 0 10px 10px}
html body .modal :is(.profile-grid,.gen-grid)>.cc-sec9-kop .cc-sec9-knop{font-size:13px!important}
/* de uitleg bij een instelling: één regel (telefoon twee) met „meer ▾”; een klik klapt hem uit. Waarschuwingen (amber/rood) krijgen deze klasse NIET. */
html body .modal .cc-uitleg9{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.5;position:relative;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;padding-right:52px;cursor:pointer}
html body .modal .cc-uitleg9::after{content:"meer ▾";position:absolute;right:0;bottom:0;padding-left:8px;background:var(--ccVlak9);font-weight:600;color:var(--txt)}
html body .modal .cc-uitleg9.open{display:block;-webkit-line-clamp:unset;padding-right:0}
html body .modal .cc-uitleg9.open::after{content:none}
@media (max-width:720px){html body .modal .cc-uitleg9{-webkit-line-clamp:2}}
/* het abonnement bovenin Administratiebeheer blijft zijn eigen gekleurde kaart (Z27-10), met dezelfde hoek */
html body .cc-admbeheer-ov .modal-body>div[style*="var(--pstartR)"]{border-radius:10px!important;margin-bottom:0!important}
html body .cc-admbeheer-ov .modal-body>.profile-grid{margin-top:10px}

/* ===== r360 — aanvullingen van de bouw (Opus 149e) ===== */
/* (r360-a) § GESCH: „Terug naar concept” staat in de aangifte en in de jaarrekening zelf, links onderin naast Exporteer (Sam, kaart Z29-4 A) */
html body :is(.modal-foot,.cc-cardscreen .iobar) .btn.cc-links9{order:1!important}
/* (r360-b) B6 (Sam, kaart 149e-1): een knop die iets weghaalt is óók in de inhoud van een venster rood omrand („Account verwijderen”, „Definitief wissen”) */
html body .modal .btn.btn.btn.cc-rood9{background:var(--surf)!important;color:var(--txtred)!important;border:1.5px solid var(--txtred)!important}
html body .modal .btn.btn.btn.cc-rood9:hover:not(:disabled){background:var(--tred)!important;color:var(--txtred)!important;border-color:var(--txtred)!important}
/* (r360-c) B2: de knop in een lege lijst is de doe-knop: de zwarte pil, rechts onder de zin */
html body .cc-leeg9 .btn.cc-leeg9-k{align-self:flex-end;border-radius:999px!important;height:calc(24.2px / var(--ccZm,1))!important;min-height:calc(24.2px / var(--ccZm,1))!important;padding:0 12px!important;font-size:13px!important;font-weight:500!important;line-height:1!important;white-space:nowrap!important;background:var(--ccKz9)!important;border:1.5px solid var(--ccKz9)!important;color:var(--ccKzT9)!important}
html body .cc-leeg9 .btn.cc-leeg9-k:hover:not(:disabled){background:var(--ccKzH9)!important;border-color:var(--ccKzH9)!important}
/* (r360-d) § GESCH: het kopje „Eerdere jaren” onder de regel van dit jaar (Winstbelasting) */
html body .modal .cc-eerder9-kop{font-size:12px;font-weight:600;color:var(--muted);margin:14px 0 6px}
/* (r360-f) § VL: de ingeklapte uitleg is een knop (klik = uitklappen) en dus een DOEL: op de computer 24 px op het scherm (WCAG 2.5.8). Met één regel van
   11 px (16,5 px; op 1440 15,6) raakte zijn cirkel die van het vinkje erboven (14 px, 5,7 px tussenruimte) — de keten (stap 2c) vond 33 plekken in
   Administratiebeheer. De regelhoogte van de ingeklapte regel is nu de doelmaat (de tekst staat er midden in, „meer ▾” op dezelfde regel, er lekt
   geen tweede regel door de afkapping); uitgeklapt weer 1,5 met dezelfde eerste regel en minstens dezelfde 24 px (een korte uitleg is uitgeklapt óók één
   regel). Op de telefoon (≤ 720 px) is de uitleg twee regels = 33 px. */
@media (min-width:721px){html body .modal .cc-uitleg9{line-height:calc(24.2px / var(--ccZm,1))}html body .modal .cc-uitleg9.open{line-height:1.5;padding-top:calc((24.2px / var(--ccZm,1) - 16.5px) / 2);min-height:calc(24.2px / var(--ccZm,1));box-sizing:border-box}}
/* (r360-g) § VL: de ingeklapte uitleg krimpt nooit in een flexkolom — met overflow:hidden is zijn minimale hoogte 0, en in „Overnemen in Mijn Belastingdienst
   Zakelijk” (een modal-body als flexkolom met een vaste hoogte) werd hij op 1440 0 px hoog: onzichtbaar (de keten, stap 3b: DICHTE-BAK 0/51 px). */
html body .modal .cc-uitleg9{flex-shrink:0}
/* (r360-e) de pil is 24 px OP HET SCHERM — WCAG 2.5.8 zonder uitzondering, zoals r342 dat voor Exporteer en de taakknoppen van Charlie al regelde (a11y-lijst A1):
   onder zoom .945 werd 24 CSS-px 22,67 px (REGELS-Z29 § KN mat het zelf: „22,7 px op het scherm”) en de keten (2b) en s90 C-1 vingen dat. calc(24.2px/var(--ccZm,1))
   = 24,2 px op elke breedte (onder 721 px is --ccZm 1), dezelfde vorm als de acht andere plekken in de app. Wint van § KN door de plaats (gelijke specificiteit). */
html body .modal-foot .btn,html body .cc-cardscreen .iobar .btn,html body [data-cc-modal="1"] .cc-dlgb{height:calc(24.2px / var(--ccZm,1))!important;min-height:calc(24.2px / var(--ccZm,1))!important}

/* ===================================================================================================================================================
   r361 = v1.84.0 (Opus 150e, za 3 okt 2026) — REGELS-Z30 van Fable Z30 deel 2 (Sam, kaarten Z30-1 v2, Z30-2, Z30-3) + de aanvulling van Fable Z31 (kaart Z31-3:
   de kaart in Boekhouding 860 px). De blokken § TEKEN, § STATUS en § BADGE zijn die van z30-hub-kleur/REGELS-Z30.md; erachter § WERK en § HUB zoals gebouwd.
   Staat ACHTERAAN (na het blok van r360), zodat het de oudere regels overstemt; de dashboardregels in app.js (een React-stijlblok ná deze link; s104-0b: geen stijltag-tekst in dit bestand) verslaat het met
   „html body …” (hogere specificiteit), de labels met :root[data-theme] en !important (de vullingen in app.js en index.html).
   =================================================================================================================================================== */

/* ===== Z30 § TEKEN (Sam, za 3 okt 2026, kaart Z30-1 v2 = A): letter = wie, kleur = hoe. Licht: zwart blokje + witte letter; donker: wit blokje + zwarte letter.
   Geen dagboekkleuren meer. Geen rondje: een rondje met een letter is in de app een persoon (je profiel, Charlie). ===== */
:root{--ccDbk9:#111111;--ccDbk9t:#ffffff;--ccTag9:#f1f2f4;--ccTag9t:#3f4246}/*r361: --ccTag9t #374151 (REGELS) is licht blauwig (HSL-verzadiging 0,19) en de meter van Z30 telt dat als kleur (> 0,18) — #3f4246 is echt neutraal (0,05), 9,9:1 op #f1f2f4*/
html[data-theme="dark"]{--ccDbk9:#f3f4f6;--ccDbk9t:#111111;--ccTag9:#2a2d33;--ccTag9t:#d1d5db}
.cc-dbk9{display:inline-flex;align-items:center;justify-content:center;flex:none;width:14px;height:14px;border-radius:4px;background:var(--ccDbk9);color:var(--ccDbk9t);font-size:11px;font-weight:600;line-height:1;letter-spacing:0}
:root[data-theme] .hist-tag,:root[data-theme] .upload-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;letter-spacing:.3px;border-radius:10px;padding:2px 8px;background:var(--ccTag9)!important;color:var(--ccTag9t)!important}
:root[data-theme] .hist-tag:has(> .cc-dbk9),:root[data-theme] .upload-tag:has(> .cc-dbk9){padding-left:3px}
/* het werklijst-icoontje = het grote blokje (V, I, B — K en M bestaan nog niet als icoontje) */
:root[data-theme] .scan-icon,:root[data-theme] .scan-icon.v,:root[data-theme] .scan-icon.i,:root[data-theme] .scan-icon.b{width:22px;height:22px;border-radius:6px;background:var(--ccDbk9)!important;border-color:var(--ccDbk9)!important;color:var(--ccDbk9t)!important}
@media (max-width:720px){.cc-dbk9.cc-dbk9-l{width:16px;height:16px;font-size:11px}}

/* ===== Z30 § STATUS (Sam, za 3 okt: „dan kan de alles geboekt helemaal groen toch?”) — klaar = groen, tekst én vinkje; wijzigt r358 (grijs + groen vinkje) ===== */
html body .cc-hubst9.cc-hubst9-klaar,html body .cc-hubst9-klaar .cc-hubst9-v{color:var(--txtgrn)}          /* licht #166534 (6,1:1 op de hub) · donker #22c55e */
html body .cc-upuit9-klaar,html body .cc-upuit9-klaar .cc-upuit9-t,html body .cc-upuit9-klaar .cc-upuit9-v,html body .cc-upuit9-t.cc-upuit9-klaar{color:var(--txtgrn)}

/* ===== Z30 § BADGE (Sam, za 3 okt): één familie, omrand, nooit gevuld; Concept altijd rustig; klaar = ✓. Het amber staat in de vensters (§ WERK), nooit in een badge.
   (de oude kleurregels in index.html blijven als dode code staan: deze regels winnen — :root[data-theme] + twee klassen = (0,4,0) — en de vulling met !important) ===== */
:root[data-theme] .st-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;border:1px solid;background:transparent!important;opacity:1;line-height:1.35}
:root[data-theme] .st-badge.st-concept,:root[data-theme] .st-badge.st-klad{color:var(--txt);border-color:var(--txt)}
:root[data-theme] .st-badge.st-definitief,:root[data-theme] .st-badge.st-ingediend,:root[data-theme] .st-badge.st-info9{color:var(--txt);border-color:#c9ccd1}
:root[data-theme="dark"] .st-badge.st-definitief,:root[data-theme="dark"] .st-badge.st-ingediend,:root[data-theme="dark"] .st-badge.st-info9{border-color:#4a4e55}
:root[data-theme] .st-badge.st-definitief::before,:root[data-theme] .st-badge.st-ingediend::before{content:"✓ ";color:var(--txtgrn);font-weight:600}

/* ===== Z30 § WERK — het amber als statusregel op de kopregel van het venster waar je het werk doet (de termijnen uit het takenregister, zoals Charlie).
   Een doel van 24 px óp het scherm (149e: calc(24.2px/var(--ccZm,1))); de −4/−4 marge houdt de kopregel even hoog. ===== */
html body .cc-werkst9{min-height:calc(24.2px / var(--ccZm,1));flex:0 0 auto;white-space:nowrap}
html body .modal-hdr .cc-werkst9{margin:0 10px 0 auto}

/* ===== Z30 § HUB — de hub Boekhouding (Sams ontwerp; plaat Z30-2d/2e/2f/2g) =====
   Computer: links een kolom met bovenaan het boekjaar (de zwarte pil, de regel eronder) en onderaan de vier links, gelijk met de onderkant van de kaart (Z30-2e A);
   de kolom rekt mee met de kaart, dus een langere kaart laat de links meezakken. De kaart 860 px, rechts rust (kaart Z31-3 = A, REGELS-Z31 § BOEKH). */
html body .cc-h3 .cc-boekh9 .cc-bjwrap9{display:flex;flex-direction:column;align-items:flex-start;gap:6px;position:relative}
html body .cc-h3 .cc-boekh9 .cc-bjwrap9 .cc-bjhc{position:relative;left:auto;transform:none;zoom:1;display:inline-flex;align-items:center;margin:0}
html body .cc-bento .cc-h3 .cc-boekh9 .cc-boekh-btns .cc-hl{margin-top:auto;justify-content:flex-start}
@media (min-width:721px){html body .cc-bento .cc-h3 .cc-boekh9 .cc-boekh-bal{flex:0 1 860px;max-width:860px}}
/* de pil = de zwarte knop van Z29 § KN (dezelfde tokens --ccKz9/--ccKzT9/--ccKzH9; donker wit met donkere letter), 24 px óp het scherm, 12 px / 600, het ▾ in de pil.
   index.html maakt .cc-boekjaar bij :hover/:focus doorzichtig met !important — deze regels winnen door de specificiteit. */
html body .cc-h3 button.cc-boekjaar.cc-bjpil9{display:inline-flex;align-items:center;gap:5px;height:calc(24.2px / var(--ccZm,1));min-height:calc(24.2px / var(--ccZm,1));padding:0 11px;border-radius:999px;
  border:1.5px solid var(--ccKz9)!important;background:var(--ccKz9)!important;color:var(--ccKzT9)!important;font:inherit;font-size:12px;font-weight:600;line-height:1;letter-spacing:normal;text-transform:none;
  white-space:nowrap;cursor:pointer;box-shadow:none!important;transform:none!important;box-sizing:border-box}
html body .cc-h3 button.cc-boekjaar.cc-bjpil9:hover,html body .cc-h3 button.cc-boekjaar.cc-bjpil9:active{background:var(--ccKzH9)!important;border-color:var(--ccKzH9)!important;color:var(--ccKzT9)!important}
html body .cc-h3 button.cc-boekjaar.cc-bjpil9:focus{background:var(--ccKz9)!important;color:var(--ccKzT9)!important}
html body .cc-h3 button.cc-boekjaar.cc-bjpil9 .cc-bj-arrow{color:inherit;margin-left:0;font-size:11px}
/* de regel onder de pil: groen „✓ afgesloten” of amber „afsluiten ›” (de klassen van de werklijsten, r358); een doel van 24 px óp het scherm, niet naar rechts geduwd */
html body .cc-h3 .cc-bjwrap9 .cc-bjst9{flex:0 0 auto;margin:-4px 0 -4px 0;min-height:calc(24.2px / var(--ccZm,1));white-space:nowrap;justify-content:flex-start;text-align:left}
/* het menu: het lichte lijstje (kaart Z30-3 A); de tweede kolom: „✓ afgesloten” groen, „opent 1 jan” grijs */
html body .cc-bj-menu .cc-bjm9-dicht{color:var(--txtgrn);font-size:11px;font-weight:600;letter-spacing:normal}
html body .cc-bj-menu .cc-bjm9-open{color:var(--mut2);font-size:11px;font-weight:600}
/* het open menu ligt bovenop de kaart en knipt niet af (zoals r349-L dat in Beheer deed) */
html body .cc-hub.cc-h3:has(.cc-bj-menu){z-index:30;overflow:visible}
/* de periode in de kaart, klein en grijs (§ HUB-4) */
html body .cc-boekh-bal .cc-bper9{color:var(--mut2);font-weight:500;margin-left:4px}
/* Telefoon (de hub ≤ 545 px, de container-query van r245-B): eerst het boekjaar (gecentreerd, de regel ernaast), dan de kaart, dan de links in een rij */
@container (max-width:545.98px){
  html body .cc-bento .cc-h3 .cc-boekh9 .cc-boekh-btns{display:contents}
  html body .cc-h3 .cc-boekh9 .cc-bjwrap9{order:-2;flex:0 0 100%;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 12px}
  html body .cc-h3 .cc-boekh9 .cc-boekh-bal{order:-1;flex:0 0 100%}
  html body .cc-bento .cc-h3 .cc-boekh9 .cc-boekh-btns .cc-hl{order:0;flex:1 1 100%;flex-direction:row;flex-wrap:wrap;gap:0 4px!important/*+ 2 × 6 px padding = 16 px tussen de woorden (plaat Z30-2g); index.html zet .cc-hl{gap:2px!important}*/;justify-content:flex-start;margin-top:0}
}
/* de links in de Jaarrekening (§ HUB-6: Omzetspecificatie ›, Resultaat per boekjaar ›; alleen MAX) */
html body .cc-jrlnk9 .cc-hl{margin:8px 0 0 -6px;padding-top:0!important;flex-direction:row;flex-wrap:wrap;gap:0 14px}
/* ===================================================================================================================================================
   r362 = v1.85.0 (Opus 151e, zo 4 okt 2026) — REGELS-Z31 van Fable Z31 (Sam, kaarten Z31-1 en Z31-2): de hubs verplaatsen („Indeling aanpassen”) + de kop.
   Eén raster (de zeven hubs direct in .cc-bento, in de volgorde van hubIndeling9 in het profiel), de knop links van het profiel, de stand (computer: de hele hubs
   lichter; telefoon: alleen de koppen), de grepen ⠿ rechtsboven in elke kop, wisselen met tik-tik, slepen en het toetsenbord. Alles klikbaars ≥ 24 px OP HET SCHERM.
   Kleur = geen nieuwe kleur: zwart is de actie, grijs het mogelijke doel (REGELS-Z30: kleur is status). Plus T13-A (cloudklus T13): ruimte onder de focus in een venster.
   =================================================================================================================================================== */
/* ===== Z31 § RASTER: één raster, één vorm — alle zes kleine hubs padding 17px 19px (de regel .cc-bento .cc-hub in index.html geldt nu ook voor rij 3) ===== */
/* ===== Z31 § KOP (kaart Z31-2 = A): de naam van de administratie 14 px halfvet, telefoon 13 px (het profiel 44/40 px staat in index.html) ===== */
:root[data-theme] .admin-switch{font-size:13px!important;font-weight:600!important}
@media(min-width:721px){:root[data-theme] .admin-switch{font-size:14px!important;font-weight:600!important}}
/* ===== Z31 § KNOP (kaart Z31-2 = A): „Indeling aanpassen” — het tikvlak = het profiel (44 × 44, telefoon 40 × 40), het zichtbare rondje 28 px; de rand, het vlak en de
   kleur van het rondje komen uit DEZELFDE selectorlijst als het profiel (index.html), zodat ze altijd samen veranderen; aan = omgekeerd (de zwarte pil van Z29). ===== */
html body .hdr-right .cc-indeling9{width:44px;height:44px;min-width:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;margin:0;padding:0!important;
  cursor:pointer;background:transparent!important;border:none!important;box-shadow:none!important;color:inherit;font:inherit;transform:none!important}
@media(max-width:720px){html body .hdr-right .cc-indeling9{width:40px;height:40px;min-width:40px}}
html body .hdr-right .cc-indeling9 .cc-ind9-r{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;box-sizing:border-box;pointer-events:none}
html body .hdr-right .cc-indeling9 svg{width:14px;height:14px;display:block;fill:currentColor}
html body .hdr-right .cc-indeling9[aria-pressed="true"] .cc-ind9-r{background:var(--txt)!important;color:var(--surf)!important}
/* ===== Z31 § STAND (kaart Z31-1 = A + A) ===== */
html body .cc-bento .cc-greep9{display:none}
html body .cc-bento.cc-ind-aan9{position:relative}
html body .cc-bento.cc-ind-aan9>.cc-hub{cursor:pointer;transform:none!important}
html body .cc-bento.cc-ind-aan9>.cc-hub>:not(.cc-hub-h){opacity:.38;pointer-events:none}
html body .cc-bento.cc-ind-aan9 .cc-hub-h>.cc-greep9{display:inline-flex;align-items:center;justify-content:center;flex:none;margin:0 0 0 auto;padding:0;width:28px;height:28px;min-width:28px;
  border-radius:10px;border:none;background:transparent;box-shadow:none;color:var(--mut2);cursor:grab;touch-action:none}
html body .cc-bento .cc-greep9 svg{width:16px;height:16px;display:block;fill:currentColor;pointer-events:none}
html body .cc-bento.cc-ind-aan9>.cc-hub.cc-gekozen9{box-shadow:0 0 0 2px #111111!important}
html[data-theme="dark"] body .cc-bento.cc-ind-aan9>.cc-hub.cc-gekozen9{box-shadow:0 0 0 2px #f3f4f6!important}
html body .cc-bento.cc-ind-aan9>.cc-hub.cc-gekozen9 .cc-greep9{background:#111111;color:#ffffff}
html[data-theme="dark"] body .cc-bento.cc-ind-aan9>.cc-hub.cc-gekozen9 .cc-greep9{background:#f3f4f6;color:#111111}
html body .cc-bento.cc-ind-aan9>.cc-hub.cc-doel9{outline:2px dashed #9aa1ab;outline-offset:3px}
html body .cc-bento.cc-ind-aan9>.cc-hub.cc-niet9{opacity:.45}
html body .cc-bento.cc-ind-aan9>.cc-rijdoel9{position:absolute;inset:-3px;border:2px dashed #9aa1ab;border-radius:21px;pointer-events:none}
/* de telefoon (≤ 720 px, dezelfde grens als r245-A): alleen de koppen, alle zeven in beeld; Boekhouding 8 px ruimte boven en onder (de groepen 3 · 1 · 3) */
@media(max-width:720px){
  html body .cc-bento.cc-ind-aan9.cc-ind-kort9>.cc-hub>:not(.cc-hub-h){display:none!important}
  html body .cc-bento.cc-ind-aan9.cc-ind-kort9>.cc-hub{padding:12px 16px!important;min-height:0!important;height:auto!important}
  html body .cc-bento.cc-ind-aan9.cc-ind-kort9>.cc-hub>.cc-hub-h{margin-bottom:0!important;padding-bottom:0!important;border-bottom:none!important}
  html body .cc-bento.cc-ind-aan9.cc-ind-kort9>.cc-h3{margin:8px 0!important}
}
/* de regel bovenaan: de uitleg · „Standaardindeling” (groen, zoals elke link — standing #2i) · rechts de zwarte pil „Klaar” (Z29: --ccKz9); beide 24 px OP HET SCHERM */
html body .cc-indregel9{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 12px;font-size:13px}
html body .cc-indregel9 .cc-indlink9{color:var(--txtgrn)!important;font:inherit;font-weight:600;cursor:pointer;background:none!important;border:none!important;box-shadow:none!important;
  padding:0 2px;min-height:calc(24.2px / var(--ccZm,1))}
html body .cc-indregel9 .cc-indklaar9{margin-left:auto;height:calc(24.2px / var(--ccZm,1));min-height:calc(24.2px / var(--ccZm,1));border-radius:999px;padding:0 13px;font-size:12px;
  font-weight:600;line-height:1;background:var(--ccKz9,#343a40)!important;color:var(--ccKzT9,#fff)!important;border:none!important;box-shadow:none!important;cursor:pointer}
html body .cc-indregel9 .cc-indklaar9:hover{background:var(--ccKzH9,#24272b)!important}
@media(max-width:720px){html body .cc-indregel9 .cc-indsep9{display:none}html body .cc-indregel9 .cc-indtekst9{flex:1 1 100%}}
/* § WISSEL: de twee hubs glijden 180 ms naar hun nieuwe plek (FLIP met translate); bij „minder beweging” meteen */
html body .cc-bento .cc-hub.cc-wissel9{transition:translate .18s ease}
@media(prefers-reduced-motion:reduce){html body .cc-bento .cc-hub.cc-wissel9{transition:none}}
/* de aankondiging (#cc-indlive9, aria-live): onzichtbaar, wel voorgelezen */
.cc-vh9{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
/* ===== T13-A (cloudklus T13, PR #14 — WCAG 2.4.11): op de telefoon schuift Tab het volgende element niet meer onder de plakkende knoppenbalk van het venster
   (.modal-foot, 70–102 px hoog als de knoppen in twee regels breken). Gemeten door T13 op 360 × 640: bedekt 163 → 0, ring<3 23 → 0, stappen gelijk. ===== */
@media(max-width:720px){html body .modal{scroll-padding-bottom:130px}}
/* ===================================================================================================================================================
   r363 = v1.86.0 (Opus 152e, ma 5 okt 2026) — § W8 van REGELS-Z29 (Sams belastingidee Z29-9; kaart Z29-4 vraag 3 = A · ingeklapt): de belastinginstellingen staan in het
   venster waar je ze gebruikt. Omzetbelasting: „Instellingen omzetbelasting” en „Fiscale eenheid btw” onder de aangiften; Winstbelasting: „Fiscale eenheid Vpb” onderin;
   Debiteurenbeheer: „Instellingen aanmaningen”; Administratiebeheer: „Boekjaar” met één verwijsregel. Dicht: de kop, rechts de groene link, eronder één samenvattingsregel;
   open: de velden en onderin Annuleren (links) en Opslaan (rechts) als de zwarte pil van Z29-1. Alles klikbaars ≥ 24 px OP HET SCHERM (calc(24.2px / var(--ccZm,1))).
   =================================================================================================================================================== */
html body .cc-w8kop9{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:calc(24.2px / var(--ccZm,1))}
html body .cc-w8kop9>.cc-vlak9-kop{margin-bottom:0!important}
/* de link (standing #2i: groen, zonder grijze hover) — zoals „Standaardindeling” in de stand van Z31 */
html body .cc-w8link9{display:inline-flex;align-items:center;flex:none;min-height:calc(24.2px / var(--ccZm,1));margin:0;padding:0 2px;background:none!important;border:none!important;
  box-shadow:none!important;transform:none!important;color:var(--txtgrn)!important;font:inherit;font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;cursor:pointer;text-decoration:none}
html body .cc-w8link9:hover{text-decoration:underline;background:none!important}
html body .cc-w8sam9{font-size:12px;line-height:1.5;color:var(--muted);margin-top:2px}
/* een vinkje met zijn zin: de hele regel is het klikdoel (het label) — 24 px OP HET SCHERM */
html body .cc-w8vlak9 .bb-field>label:has(>input[type="checkbox"]),html body .cc-w8koppel9>label:has(>input[type="checkbox"]){min-height:calc(24.2px / var(--ccZm,1));box-sizing:border-box}
/* de knoppen en keuzelijsten die verhuisden (de aangifteperiode „Wijzigen”, de keuzeknoppen, de rekenmethode) en de knop in het venster Fiscale eenheid: 24 px OP HET SCHERM —
   op de computer waren ze 24 CSS-px = 22,7 px op het scherm (zoom .945); op een aanraakscherm gold de 24 px al (r140e-3) */
html body .cc-w8vlak9 :is(.btn,.btw-btn,select),html body .modal.cc-kaart9:has(.cc-w8koppel9) .modal-body .btn{min-height:calc(24.2px / var(--ccZm,1))!important;box-sizing:border-box}
/* onderin het open vlak: Annuleren links, Opslaan rechts — de zwarte pil van Z29-1 (--ccKz9), 24 px OP HET SCHERM */
html body .cc-w8voet9{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px}
html body .cc-w8voet9 .btn.btn{min-height:calc(24.2px / var(--ccZm,1));border-radius:999px;background:var(--ccKz9)!important;border:1.5px solid var(--ccKz9)!important;color:var(--ccKzT9)!important;box-shadow:none!important;transform:none!important}
html body .cc-w8voet9 .btn.btn:hover:not(:disabled){background:var(--ccKzH9)!important;border-color:var(--ccKzH9)!important;color:var(--ccKzT9)!important}
html body .cc-w8voet9 .btn::before{display:none!important}
/* Administratiebeheer › Boekjaar: de verwijsregel */
html body .cc-w8verwijs9{font-size:12px;line-height:1.6;color:var(--txt)}
html body .cc-w8verwijs9 .cc-w8link9{vertical-align:middle}

/* =====================================================================================================================================
   Z34 = REGELS-Z34 van Fable Z34 (Sam, ma 5 okt 2026): de complete look B′ „Meer Cijferchef” — kaart Z34-1 (basis 1 Helder · knoppen hoekig ·
   het aantal als pil · de merkstreep · Inter), W3/W10 (zwevende regels), W6 (functieknoppen hoek 6, dagboekletters en icoonknoppen rond),
   kaart Z34-2 (B: groen = klikbaar), W12 (consistentie: tabel K), W13 (B′: de icoonblokjes van C links van de titels, hubs én vensters).
   Kleuren: ALLEEN tabel K (REGELS-Z34 § 1). Dit blok staat ONDERAAN cc-layout.css (na r362 / T13-A): het wint van Z29–Z33 waar het iets anders zegt.
   De selectors beginnen met html:root (= het gewicht van een klas, (0,1,1)) — even zwaar als de goedgekeurde proef (html.z34-l9, look-9.css), dus het
   wint overal waar de proef won; in de cascade staat cc-layout.css ná app.js en ná de stijlblokken van index.html (behalve #cc-mobiel-r166 en
   #cc-r176a, die na de link staan — gemeten op v1.85.0). Gemaakt met maak-blok.py uit look-9.css (proefbouwer L1, 17.01); meter toets-z34.py.
   Hoort bij J6 (de staafjes: .cc-staaf9) en J7 (het aantal: .cc-aantal9) in app.js — REGELS-Z34 § 3.
   NIET in dit blok (§ 5 OPEN): de proef-elementen van § H-B (melding, mijlpaal, „bezig”, de amberen regel na een klik), ⌘K, de onderbalk, de factuur-pdf.
   ===================================================================================================================================== */

/* ---------- tokens (de grijsreeks zelf komt uit Z33: --ccG0 … --ccG8, licht en donker) ---------- */
html:root{
  --cc34-kaart:#ffffff;
  --cc34-schaduw:0 1px 2px rgba(17,17,17,.04),0 8px 24px rgba(17,17,17,.06);
  --cc34-regel:0 1px 2px rgba(17,17,17,.05),0 2px 8px rgba(17,17,17,.04);
  --cc34-regel-hover:0 1px 2px rgba(17,17,17,.07),0 6px 16px rgba(17,17,17,.09);
  --cc34-venster:#ffffff;
  --cc34-sectie:var(--ccG1);
  --cc34-veld:#ffffff;
  --cc34-amber:#8f5500;
  --cc34-amber-waas:#fdf3e1;
  --cc34-staaf:var(--ccG3);
  --cc34-icoon-blok:var(--ccG2);
  --cc34-icoon:var(--ccG7);
  --cc34-sleep:var(--ccG1);
  --cc34-merk:#16a34a;
  --cc34-knop-rand:var(--ccG5);
}
html:root[data-theme="dark"]{
  --cc34-kaart:#1e2024;
  --cc34-schaduw:0 8px 24px rgba(0,0,0,.35);
  --cc34-regel:0 1px 2px rgba(0,0,0,.30);
  --cc34-regel-hover:0 4px 14px rgba(0,0,0,.45);
  --cc34-venster:#1e2024;
  --cc34-sectie:#26282d;
  --cc34-veld:#1a1c20;
  --cc34-amber:#f0b45a;
  --cc34-amber-waas:rgba(240,180,90,.12);
  --cc34-staaf:rgba(255,255,255,.16);
  --cc34-icoon-blok:#26282d;
  --cc34-icoon:var(--ccG7);
  --cc34-sleep:#17181c;
  --cc34-merk:#22c55e;
  --cc34-knop-rand:var(--ccG5);
}

/* ---------- letter: Inter van de app (niets te doen); cijfers van gelijke breedte ---------- */
html:root .ccc-v,html:root .cc-bt td,html:root .cc-fl9-bed,html:root .cc-fl9-dat,html:root .cc-fl9-nr,html:root .cc-fl9-sub,
html:root .modal td,html:root .dep-input,html:root .cc-aantal9{font-variant-numeric:tabular-nums}

/* =====================================================================================================================================
   DE HUB
   ===================================================================================================================================== */
/* pagina: canvas g1; hubs = witte kaarten zonder rand, zachte schaduw, hoek 14, binnenruimte 24, tussenruimte 16; bovenop de groene merkstreep 3 px
   (in de achtergrond, zo volgt hij de hoek van 14 precies) */
html:root body,html:root .cc-bento-bg{background:var(--ccG1)!important}
/* iets minder lucht boven de eerste rij (16 → 12): zo past de hub weer in 1440 × 900 */
@media (min-width:721px){html:root .cc-bento-bg{padding-top:12px!important}}
html:root .cc-bento{gap:16px!important}
html:root .cc-bento>.cc-hub{background:linear-gradient(var(--cc34-merk),var(--cc34-merk)) top/100% calc(3px / var(--ccZm,1)) no-repeat border-box,var(--cc34-kaart)!important;
  border:0!important;border-radius:14px!important;box-shadow:var(--cc34-schaduw)!important;padding:24px!important}
/* donker: de zachte rand als ring in de schaduw (geen border): even hoog als licht, de hub past nog steeds in 900 */
html:root[data-theme="dark"] .cc-bento>.cc-hub{border:0!important;box-shadow:0 0 0 1px rgba(255,255,255,.06),var(--cc34-schaduw)!important}

/* hubkop: icoonblokje 32 (hoek 10, vlak g2, icoon 18 in g7) + titel 16/600 */
html:root .cc-bento .cc-hub-h{gap:12px!important;padding:0!important;margin:0 0 16px!important;min-height:32px;border:0!important}
html:root .cc-bento .cc-hub-h>svg:first-child,html:root .cc-bento .cc-hub-h>.cc-dim:first-child>svg{
  width:32px!important;height:32px!important;padding:7px!important;box-sizing:border-box!important;flex:0 0 32px!important;margin:0!important;
  background:var(--cc34-icoon-blok)!important;border-radius:10px!important;stroke:var(--cc34-icoon)!important;stroke-width:1.75!important;overflow:visible}
html:root .cc-bento .cc-hub-t{font-size:16px!important;font-weight:600!important;color:var(--ccG8)!important}

/* ritme in de bovenste rij: kop · acties/PRO-regel (even hoog) · statusregel + uploadvak · links — de banden lijnen uit over de hubs */
html:root .cc-bento .cc-nieuw2col9,html:root .cc-bento .cc-actw{min-height:54px!important;box-sizing:border-box!important}
html:root .cc-bento .cc-wlcard{margin:0!important}
html:root .cc-bento>.cc-hub>.cc-hl,html:root .cc-bento .cc-hub-scroll>.cc-hl{margin-top:auto!important;padding-top:16px!important}
/* de links lijnen met hun tekst uit op de rand van de inhoud (het hovervlak steekt 6 px uit) */
html:root .cc-bento .cc-hl{margin-left:-6px!important}
html:root .cc-bento .cc-behlinks9{margin-left:-2px!important}

/* acties (Verkoop): de groene rondjes zoals nu (36, rond — het logo-rondje), het label ernaast 14/500 */
html:root .cc-bento .cc-nieuw2col9{column-gap:32px!important;margin:0 0 16px!important;align-items:center!important}
html:root .cc-bento .cc-nieuw2col9 .cc-wfield>span,html:root .cc-bento .cc-nieuw2col9 .cc-tophov{top:0!important}
html:root .cc-bento .cc-tophov>div:first-child,html:root .cc-bento .cc-tophov>div:first-child :is(.cc-v9v,.cc-v9k){font-size:14px!important;font-weight:500!important;color:var(--ccG8)!important}
html:root .cc-bento .cc-tophov>div+div{margin-top:2px!important}

/* PRO-regels (Inkoop, Bank): inhoud zoals nu (3C); alleen de lege afstandhouders weg */
html:root .cc-bento .cc-actw{padding:0!important;margin:0 0 16px!important;background:transparent!important;box-shadow:none!important;border:0!important;justify-content:center!important}
html:root .cc-bento .cc-actw>div:empty{display:none!important}

/* statusregel + werk-pil („3 te verwerken ›”: amber op een amber waas, 12/600, 24 óp het scherm, rond — een status, geen knop in de zin van Sam) */
html:root .cc-bento .cc-wlkop9{min-height:24px}
html:root .cc-bento .cc-wlkop9-t{font-size:12px!important;font-weight:600!important;color:var(--ccG6)!important}
html:root .cc-bento button.cc-hubst9-verwerk{display:inline-flex!important;align-items:center!important;height:calc(24.2px / var(--ccZm,1))!important;padding:0 10px!important;
  border-radius:999px!important;background:var(--cc34-amber-waas)!important;color:var(--cc34-amber)!important;font-size:12px!important;font-weight:600!important;border:0!important;line-height:1!important;white-space:nowrap}
html:root .cc-bento button.cc-hubst9-verwerk:hover{filter:brightness(.97)}
html:root .cc-bento .cc-hubst9-klaar{display:inline-flex;align-items:center;height:24px;font-size:12px!important;font-weight:500!important}

/* uploadvak — één korte regel (± 40 hoog), vlak g1, stippelrand g4, hoek 10, pijl omhoog 18 + „Sleep of klik om te uploaden” 13 g6 */
html:root .cc-bento .upload-mini{background:var(--cc34-sleep)!important;border:1px dashed var(--ccG4)!important;border-radius:10px!important;box-shadow:none!important;
  display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-height:40px!important;padding:6px 12px!important}
html:root .cc-bento .upload-mini::before{content:"";flex:0 0 18px;width:18px;height:18px;background:var(--ccG6);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4'/%3E%3Cpath d='M7 9l5-5 5 5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E") center/18px 18px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4'/%3E%3Cpath d='M7 9l5-5 5 5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E") center/18px 18px no-repeat}
html:root .cc-bento .upload-mini-txt{font-size:13px!important;color:var(--ccG6)!important}
html:root .cc-bento .upload-mini:hover{border-color:var(--ccG5)!important}

/* linklijst */
html:root .cc-bento .cc-hl-i:hover{background:var(--ccG1)!important}

/* kerngetal RECHTSONDER (Z33-2b) in Verkoop · Inkoop · Bank: label 12/500 g6 + getal 22/600; links ervan het staafjesgrafiekje */
html:root .cc-bento>.cc-hub>.cc-hub-corner{right:24px!important;bottom:22px!important;display:flex!important;align-items:flex-end!important;gap:14px!important}
html:root .cc-bento .cc-hub-corner .ccc-l{font-size:12px!important;font-weight:500!important;color:var(--ccG6)!important;margin-bottom:2px}
html:root .cc-bento .cc-hub-corner .ccc-v{font-size:22px!important;font-weight:600!important;color:var(--ccG8)!important;line-height:1.15!important;letter-spacing:normal!important}

/* staafjes (J6/J7 in app.js): 6 maanden t/m de laatste maand van het boekjaar; staven g3, de laatste g7, hoogte 32. Verkoop = gefactureerd per maand,
   Inkoop = kosten per maand, Bank = het saldo per maandeinde — zelfde stijl en maat. Geen cijfers → een gestippelde basis (de lege staat). */

/* Boekhouding: de kaart Balans en resultaat in het midden als vlak g1, hoek 10; de boekjaarpil rechts — klikbaar groen (--ccKz9, § B) en rond (op de hub blijft rond rond) */
html:root .cc-bento .cc-boekh-bal{background:var(--ccG1)!important;border:0!important;border-radius:10px!important;box-shadow:none!important}
html:root[data-theme="dark"] .cc-bento .cc-boekh-bal{background:#26282d!important}
html:root .cc-bento .cc-bsub{font-size:12px!important;font-weight:500!important;color:var(--ccG6)!important}
html:root .cc-bento .cc-bt td{font-size:13px!important}
html:root body .cc-bento button.cc-boekjaar.cc-bjpil9{height:32px!important;padding:0 14px!important;font-size:13px!important;font-weight:600!important;border-radius:999px!important}
html:root .cc-bento .cc-bjst9{margin-top:8px!important}

/* Fiscaal / Jaarwerk / Beheer: alleen de maat en de rust (de labels houden hun vorm; ruimte voor „Ingediend”) */
html:root .cc-bento .cc-stcol-h{font-size:13px!important;font-weight:500!important}
html:root .cc-bento .cc-stcol-h.cc-stcol-link{position:relative}
html:root .cc-bento .cc-stcol-h.cc-stcol-link::after{content:"";position:absolute;inset:-5px -4px}

/* =====================================================================================================================================
   HET VENSTER — wit, hoek 16, schaduw 0 24 64, bovenaan de merkstreep 4 px; titel 18/600 met icoonblokje 32; secties als vlakken g1;
   velden 40, rand g5; ALLE knoppen hoekig (hoek 6, 36 hoog): hoofdknop g8, tweede knop wit met rand g5; tabjes als hoekige segmenten
   ===================================================================================================================================== */
html:root body .modal-overlay .modal{background:linear-gradient(var(--cc34-merk),var(--cc34-merk)) top/100% calc(4px / var(--ccZm,1)) no-repeat border-box,var(--cc34-venster)!important;
  border:0!important;border-radius:16px!important;box-shadow:0 24px 64px rgba(17,17,17,.18)!important;padding:24px!important}
html:root[data-theme="dark"] body .modal-overlay .modal{border:1px solid rgba(255,255,255,.08)!important;border-top-color:transparent!important;box-shadow:0 24px 64px rgba(0,0,0,.55)!important}

/* kop: titel 18/600 met icoonblokje 32 (factuur = blad met plus, werklijst = blad met regels); het aantal als pil erachter (J6/J7 in app.js) */
html:root body .modal-overlay .modal .modal-hdr{margin:0 0 16px!important;gap:12px!important;min-height:36px;align-items:center!important}
html:root body .modal-overlay .modal .modal-title{display:inline-flex!important;align-items:center!important;gap:12px!important;font-size:18px!important;font-weight:600!important;color:var(--ccG8)!important;line-height:1.3!important}
html:root body .modal-overlay .modal .modal-title::before{content:"";flex:0 0 32px;width:32px;height:32px;border-radius:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345453f' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E") center/18px 18px no-repeat,var(--cc34-icoon-blok)}
/* het aantal als „figuurtje” (look 3): „Alle verkoopfacturen” + [100] — vlak g2, 12/600, g7, 20 hoog, rond; bij filteren „3 van 100” */
html:root body .modal-overlay .modal .modal-title .cc-aantal9{display:inline-flex;align-items:center;height:20px;padding:0 8px;margin-left:-4px;border-radius:999px;
  background:var(--ccG2);color:var(--ccG7);font-size:12px;font-weight:600;line-height:1;white-space:nowrap}

/* kruisje: hoekig 32 (hoek 6), zacht vlak */
html:root body .modal-overlay .modal .modal-close{width:32px!important;height:32px!important;min-width:32px!important;border-radius:6px!important;background:var(--ccG2)!important;color:var(--ccG7)!important;
  border:0!important;padding:0!important;font-size:18px!important;line-height:1!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;box-shadow:none!important}
html:root body .modal-overlay .modal .modal-close:hover{background:var(--ccG3)!important;color:var(--ccG8)!important}

/* de ring die de app met ::before op knoppen en tabjes tekent: weg (de knoppen hebben hier een eigen rand) */
html:root body .modal-overlay .modal :is(.btn,.q-opt)::before{display:none!important}

/* tabjes Factuur · Creditfactuur · Offerte: hoekige segmenten (hoek 6) in een zacht vlak; de actieve op --ccKz9 = klikbaar groen (§ B) */
html:root body .modal-overlay .modal .modal-body>div:has(>button.q-opt){display:inline-flex!important;align-self:flex-start;width:fit-content;gap:2px!important;padding:3px!important;
  background:var(--ccG2)!important;border-radius:10px!important}
html:root body .modal-overlay .modal .q-opt{height:30px!important;padding:0 14px!important;border-radius:6px!important;background:transparent!important;color:var(--ccG7)!important;
  border:0!important;box-shadow:none!important;font-size:13px!important;font-weight:500!important;display:inline-flex!important;align-items:center!important}
html:root body .modal-overlay .modal .q-opt:hover{background:var(--ccG3)!important;color:var(--ccG8)!important}
html:root body .modal-overlay .modal .q-opt.sel{background:var(--ccKz9)!important;color:var(--ccKzT9)!important;font-weight:600!important}

/* de uitleg onder de tabjes: 13 g6 */
html:root body .modal-overlay .modal.cc-invoer9 .modal-body>div:first-child:not([class]){margin-bottom:16px!important}
html:root body .modal-overlay .modal.cc-invoer9 .modal-body>div:nth-child(2):not([class]){font-size:13px!important;color:var(--ccG6)!important;line-height:1.55!important;margin:0 0 20px!important}

/* secties als vlakken g1 (hoek 10, 16 binnen); de kop en de inhoud zijn één vlak */
html:root body .modal-overlay .modal .gen-grid{row-gap:16px!important}
html:root body .modal-overlay .modal .gen-grid>h3.cc-sec9-kop{background:var(--cc34-sectie)!important;border:0!important;border-radius:10px 10px 0 0!important;padding:16px 16px 0!important;margin:8px 0 0!important;
  font-size:14px!important;font-weight:600!important;color:var(--ccG8)!important;box-shadow:none!important}
html:root body .modal-overlay .modal .gen-grid>h3.cc-sec9-kop:first-child{margin-top:0!important}
html:root body .modal-overlay .modal .gen-grid>.cc-sec9-inh:not(.dicht){background:var(--cc34-sectie)!important;border:0!important;border-radius:0 0 10px 10px!important;margin-top:-16px!important;
  padding:16px!important;gap:14px 16px!important;box-shadow:none!important}
html:root body .modal-overlay .modal .gen-grid>h3.cc-sec9-kop:has(+.cc-sec9-inh.dicht){border-radius:10px!important;padding-bottom:16px!important}
html:root body .modal-overlay .modal .cc-sec9-sub{font-size:12px!important;font-weight:600!important;color:var(--ccG7)!important;text-transform:none!important}
html:root body .modal-overlay .modal .gen-preview{background:var(--cc34-sectie)!important;border:0!important;border-radius:10px!important}

/* labels 12/500; hulpregels 12 g6 */
html:root body .modal-overlay .modal .bb-field>label{font-size:12px!important;font-weight:500!important;color:var(--ccG7)!important;margin:0 0 6px!important}
html:root body .modal-overlay .modal .bb-field>div:not([class]){font-size:12px!important;color:var(--ccG6)!important;line-height:1.45!important;margin-top:4px!important}

/* velden: wit, hoogte 40, rand g5 (≥ 3:1), hoek 6, focus = rand + ring g8 */
html:root body .modal-overlay .modal :is(.dep-input,select.ed-pill,.filter-bar input,textarea){
  height:40px!important;min-height:40px!important;box-sizing:border-box!important;padding:0 12px!important;background-color:var(--cc34-veld)!important;
  border:1px solid var(--ccG5)!important;border-radius:6px!important;font-size:14px!important;color:var(--ccG8)!important;box-shadow:none!important;outline:none!important}
html:root body .modal-overlay .modal textarea{height:auto!important;padding:10px 12px!important}
html:root body .modal-overlay .modal .dep-input[readonly]{background-color:var(--ccG2)!important;color:var(--ccG7)!important}
html:root body .modal-overlay .modal :is(.dep-input,.filter-bar input)::placeholder{color:var(--ccG6)!important;opacity:1}
html:root body .modal-overlay .modal :is(.dep-input,select.ed-pill,.filter-bar input,textarea):focus{border-color:var(--ccG8)!important;box-shadow:0 0 0 1px var(--ccG8)!important;outline:none!important}
html:root body .modal-overlay .modal select.ed-pill{-webkit-appearance:none!important;appearance:none!important;padding-right:36px!important;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345453f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 12px center!important;background-size:16px 16px!important}
html:root[data-theme="dark"] body .modal-overlay .modal select.ed-pill{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9cacd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important}

/* knoppen — ALLE hoekig (hoek 6, look 2). Hoofdknop = --ccKz9 (§ B: klikbaar groen) met --ccKzT9, 14/600 (40 hoog: § H); een uitgeschakelde hoofdknop blijft groen (Z33-4 „nooit grijs”) */
html:root body .modal-overlay .modal .modal-foot .btn.btn.cc-hoofd9{order:3!important;margin-left:0!important;height:36px!important;min-height:36px!important;padding:0 16px!important;border-radius:6px!important;
  background:var(--ccKz9)!important;border:1px solid var(--ccKz9)!important;color:var(--ccKzT9)!important;font-size:14px!important;font-weight:600!important;box-shadow:none!important;opacity:1!important}
html:root body .modal-overlay .modal .modal-foot .btn.btn.cc-hoofd9:not(:disabled):hover{background:var(--ccKzH9)!important;border-color:var(--ccKzH9)!important}
html:root body .modal-overlay .modal .modal-foot .btn.btn.cc-hoofd9:disabled{cursor:not-allowed!important}
/* tweede knop = wit met rand g5 (≥ 3:1), 36 hoog, 13/500 (Sluiten, Exporteer, Filters wissen, Adres ophalen, BTW-nummer controleren) */
html:root body .modal-overlay .modal .modal-foot .btn.btn:not(.cc-hoofd9),html:root body .modal-overlay .modal .modal-body .btn.btn{
  height:36px!important;min-height:36px!important;padding:0 14px!important;border-radius:6px!important;background:var(--cc34-kaart)!important;border:1px solid var(--cc34-knop-rand)!important;
  color:var(--ccG8)!important;font-size:13px!important;font-weight:500!important;box-shadow:none!important;align-items:center!important;justify-content:center!important}
html:root body .modal-overlay .modal .modal-foot .btn.btn:not(.cc-hoofd9):hover,html:root body .modal-overlay .modal .modal-body .btn.btn:not(:disabled):hover{background:var(--ccG1)!important;border-color:var(--ccG7)!important}
html:root[data-theme="dark"] body .modal-overlay .modal .modal-foot .btn.btn:not(.cc-hoofd9),html:root[data-theme="dark"] body .modal-overlay .modal .modal-body .btn.btn{background:#26282d!important}
html:root body .modal-overlay .modal .modal-body .btn.btn:disabled{opacity:.55!important}

/* voet van het venster: de melding links, de knoppen rechts (Sluiten · hoofdknop) */
html:root body .modal-overlay .modal .modal-foot{border-top:1px solid var(--ccG3)!important;padding:16px 0 0!important;margin:16px 0 0!important;gap:12px!important;align-items:center!important;flex-wrap:wrap!important;background:var(--cc34-venster)!important}
html:root body .modal-overlay .modal .modal-foot>.cc-mis9{order:1!important;flex:1 1 300px!important;margin:0!important;font-size:12px!important;color:var(--ccG6)!important;line-height:1.45!important;min-width:0}

/* =====================================================================================================================================
   DE WERKLIJST — zwevende regels (W3, wint van Z33 „Regels A”): de lijst ligt op g1, elke regel een wit kaartje (hoek 10, zachte schaduw,
   8 px ertussen), hover = de schaduw iets sterker; letterblokje 28 rond (g2, 12/600, g7 — ronde 3b); klant 14/500, datum · nr 13 g6, bedrag 14/600 rechts;
   de kolomkoppen erboven (12 g6, zonder vlak); zoek/filters als witte velden met rand g5 en een zoekicoon
   ===================================================================================================================================== */
html:root body .modal-overlay .modal .filter-bar{gap:8px!important;margin:0 0 12px!important}
html:root body .modal-overlay .modal .filter-bar input[type="search"]{padding-left:36px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:12px center!important;background-size:16px 16px!important}
html:root[data-theme="dark"] body .modal-overlay .modal .filter-bar input[type="search"]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a3a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")!important}
html:root body .modal-overlay .modal .filter-bar :is(input,.btn.btn){font-size:13px!important}
html:root body .modal-overlay .modal .filter-bar .btn.btn{height:40px!important;min-height:40px!important}
html:root body .modal-overlay .modal .modal-hdr select.ed-pill{height:36px!important;min-height:36px!important;font-size:13px!important}

/* de lijst: een vlak g1 (hoek 10) met de kaartjes erop; de kolomkop zonder eigen vlak (g1 = het vlak eronder, ook als hij plakt) */
html:root body .modal-overlay .modal .cc-fl9-kop{background:var(--ccG1)!important;border:0!important;padding:10px 16px 2px!important;margin:0!important}
html:root body .modal-overlay .modal .cc-fl9-kbtn{font-size:12px!important;font-weight:500!important;color:var(--ccG6)!important;min-height:calc(24.2px / var(--ccZm,1))!important}
html:root body .modal-overlay .modal .cc-fl9-kbtn.aan{color:var(--ccG8)!important;font-weight:600!important}
html:root body .modal-overlay .modal .cc-fl9-rij{background:var(--cc34-kaart)!important;border:0!important;border-radius:10px!important;box-shadow:var(--cc34-regel)!important;margin:0!important;transition:box-shadow .15s ease}
html:root body .modal-overlay .modal .cc-fl9-rij:hover{box-shadow:var(--cc34-regel-hover)!important;background:var(--cc34-kaart)!important}
html:root body .modal-overlay .modal .scan-icon.cc-fl9-ico{width:28px!important;height:28px!important;min-width:28px!important;flex:0 0 28px!important;border-radius:50%!important;
  background:var(--ccG2)!important;border:0!important;color:var(--ccG7)!important;font-size:12px!important;font-weight:600!important}
html:root[data-theme="dark"] body .modal-overlay .modal .scan-icon.cc-fl9-ico{background:rgba(255,255,255,.07)!important}
html:root body .modal-overlay .modal .cc-fl9-kop .cc-fl9-ico{width:28px!important;flex:0 0 28px!important}
html:root body .modal-overlay .modal .cc-fl9-nmt{font-size:14px!important;font-weight:500!important;color:var(--ccG8)!important}
html:root body .modal-overlay .modal :is(.cc-fl9-dat,.cc-fl9-nr){font-size:13px!important;color:var(--ccG6)!important}
html:root body .modal-overlay .modal .cc-fl9-rij .cc-fl9-bed{font-size:14px!important;font-weight:600!important;color:var(--ccG8)!important}
html:root body .modal-overlay .modal .cc-fl9-rij .inv-del:hover{background:var(--ccG2)!important;color:var(--ccG8)!important}
html:root body .modal-overlay .modal .modal-foot>.cc-exp{margin-right:auto!important}

@media (min-width:721px){
  /* computer: dezelfde kaartjes als op de telefoon, op één regel (klant · datum · nummer · bedrag · iconen), 52 hoog. De kolomverdeling (klant krijgt
     de ruimte) alleen in lijsten met gelijke regels (de factuurlijsten, herkenbaar aan het oog-icoon .inv-del); elders — bv. de bankregels met
     wisselende knoppen — houden de kolommen de vaste breedtes van de app, anders lopen ze per regel uit de pas */
  html:root body .modal-overlay .modal .cc-fl9-rij{padding:0 16px!important;min-height:52px!important;display:flex!important;align-items:center!important}
  html:root body .modal-overlay .modal .cc-fl9-rij>.cc-fl9-klik{width:100%;min-height:52px}
  html:root body .modal-overlay .modal:has(.cc-fl9-rij .inv-del) .cc-fl9 .cc-fl9-nm{flex:1 1 0!important;min-width:0!important;width:auto!important}
  html:root body .modal-overlay .modal:has(.cc-fl9-rij .inv-del) .cc-fl9 .cc-fl9-dat{flex:0 0 120px!important;width:120px!important}
  html:root body .modal-overlay .modal:has(.cc-fl9-rij .inv-del) .cc-fl9 .cc-fl9-nr{flex:0 0 160px!important;width:160px!important}
  html:root body .modal-overlay .modal:has(.cc-fl9-rij .inv-del) .cc-fl9 .cc-fl9-bed{margin-left:0!important;margin-right:0!important;flex:0 0 140px!important;min-width:120px;text-align:right!important}
  html:root body .modal-overlay .modal:has(.cc-fl9-rij .inv-del) .cc-fl9-kop .cc-fl9-act{flex:0 0 70px!important;width:70px!important;min-width:70px!important}
  html:root body .modal-overlay .modal:has(.cc-fl9-rij .inv-del) .cc-fl9-rij .cc-fl9-bed{margin-right:8px!important}
  html:root body .modal-overlay .modal.cc-wlmodal .modal-body{padding-bottom:0!important}
}

/* ---------- ronde 3b (Sam 14.41): de dagboekletters V/I/M/K/B ROND, overal (lijsten, vensters, de uploadregels van de hubs); de functieknoppen
   in werklijsten, overzichten en vensters hoekig (hoek 6) — ook de ronde icoonknoppen van de bankregels en de memoriaalknop ---------- */
html:root .cc-dbk9,html:root .scan-icon,html:root body .modal-overlay .modal .scan-icon{border-radius:50%!important}
html:root body .modal-overlay .modal :is(.io-icon-btn,.icon-btn,.cc-memo-btn){border-radius:6px!important}

/* =====================================================================================================================================
   TELEFOON (≤ 720)
   ===================================================================================================================================== */
@media (max-width:720px){
  /* acties: de korte labels die de app zelf voor smal heeft (Offerte / Factuur) */
  html:root .cc-bento .cc-nieuw2col9{column-gap:24px!important}
  html:root .cc-bento .cc-nieuw2col9 .cc-tophov>div:first-child .cc-v9v{display:none!important}
  html:root .cc-bento .cc-nieuw2col9 .cc-tophov>div:first-child .cc-v9k{display:inline!important}
  html:root body .cc-bento .upload-mini{border-style:dashed!important;min-height:40px!important;justify-content:center!important;padding:6px 12px!important}
  /* kerngetal: als voetregel onder de links, rechts uitgelijnd, de staafjes ernaast */
  /* venster en werklijst: de titel zonder icoonblokje, het kruisje op de titelregel */
  html:root body .modal-overlay .modal .modal-hdr{align-items:flex-start!important}
  html:root body .modal-overlay .modal .modal-hdr .modal-close{margin-top:-2px!important}
  html:root body .modal-overlay .modal .modal-title .cc-aantal9{margin-left:8px}
  html:root body .modal-overlay .modal .modal-hdr select.ed-pill{flex:1 1 100%!important;margin-left:0!important;width:100%!important}
  html:root body .modal-overlay .modal .filter-bar{grid-template-columns:minmax(0,1fr) auto!important}
  /* voet: de melding over de volle breedte, daaronder Sluiten + de hoofdknop (vult de rest) */
  html:root body .modal-overlay .modal .modal-foot{gap:10px 8px!important}
  html:root body .modal-overlay .modal .modal-foot>.cc-mis9{flex:1 1 100%!important}
  html:root body .modal-overlay .modal .modal-foot .btn.btn.cc-hoofd9{flex:1 1 auto!important}
  /* werklijst: de kaartjes op twee regels (naam + bedrag / datum · nr + de icoontjes) */
  html:root body .modal-overlay .modal .cc-fl9-rij{padding:12px!important}
  html:root body .modal-overlay .modal .cc-fl9-rij>.cc-fl9-klik{display:grid!important;grid-template-columns:28px minmax(0,1fr) auto auto;grid-template-rows:auto auto;column-gap:10px;row-gap:3px;align-items:center}
  html:root body .modal-overlay .modal .cc-fl9-rij .scan-icon.cc-fl9-ico{grid-column:1;grid-row:1/span 2}
  html:root body .modal-overlay .modal .cc-fl9-rij .cc-fl9-nm{display:contents!important}
  html:root body .modal-overlay .modal .cc-fl9-rij .cc-fl9-nmt{grid-column:2;grid-row:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html:root body .modal-overlay .modal .cc-fl9-rij .cc-fl9-sub{grid-column:2;grid-row:2;font-size:12px!important;color:var(--ccG6)!important;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:normal!important}
  html:root body .modal-overlay .modal .cc-fl9-rij .cc-fl9-bed{grid-column:3/span 2;grid-row:1;margin:0!important;width:auto!important;text-align:right!important;white-space:nowrap}
  html:root body .modal-overlay .modal .cc-fl9-rij .inv-del{grid-column:3;grid-row:2;justify-self:end}
  html:root body .modal-overlay .modal .cc-fl9-rij .cc-fl9-klik>span[title]{grid-column:4;grid-row:2;justify-self:end}
}

/* =====================================================================================================================================
   § B · de verschillen met A (look 6)
   ===================================================================================================================================== */
/* de zwarte knop van de app (Z29 § KN, --ccKz9) = in B het klikbare groen van tabel K: hoofdknop, boekjaarpil, actief tabje, „Klaar” */
html:root{--ccKz9:#166534;--ccKzT9:#ffffff;--ccKzH9:#14532d}
html:root[data-theme="dark"]{--ccKz9:#22c55e;--ccKzT9:#0c120e;--ccKzH9:#4ade80}
/* (B′: het groene icoonrondje en het C-merk van B vervallen — zie § B′ onderaan) */

/* ---------- ronde 3c (Sam 15.0x, W10: „Dit zijn niet de zwevende regels die ik je eerder doorstuurde in het wit”): de regels precies zoals
   look 1 op de telefoon — witte kaartjes op het WITTE venster met een zachte schaduw, GEEN grijs vlak eronder; hoek 14; in het donker een stap
   lichter (#26282d) dan het venster (#1e2024), zonder vlak eronder ---------- */
html:root body .modal-overlay .modal div:has(>.cc-fl9-rij){background:transparent!important;border-radius:0!important;padding:4px 4px 12px!important;gap:10px!important}
html:root body .modal-overlay .modal .cc-fl9-kop{background:#ffffff!important}
html:root[data-theme="dark"] body .modal-overlay .modal .cc-fl9-kop{background:#1e2024!important}
html:root body .modal-overlay .modal .cc-fl9-rij{background:#ffffff!important;border:0!important;border-radius:14px!important;
  box-shadow:0 0 0 1px rgba(17,17,17,.03),0 1px 2px rgba(17,17,17,.06),0 8px 16px -12px rgba(17,17,17,.22)!important}
html:root body .modal-overlay .modal .cc-fl9-rij:hover{background:#ffffff!important;
  box-shadow:0 0 0 1px rgba(17,17,17,.05),0 2px 4px rgba(17,17,17,.08),0 12px 24px -12px rgba(17,17,17,.28)!important}
html:root[data-theme="dark"] body .modal-overlay .modal .cc-fl9-rij,
html:root[data-theme="dark"] body .modal-overlay .modal .cc-fl9-rij:hover{background:#26282d!important;border:1px solid rgba(255,255,255,.06)!important;
  box-shadow:0 1px 2px rgba(0,0,0,.40),0 8px 16px -10px rgba(0,0,0,.60)!important}

/* =====================================================================================================================================
   § B′ · de icoonblokjes van C links van de titels (hubs en ALLE vensters) — merkgroen zacht (aanvulling kleurtabel K), nergens anders
   ===================================================================================================================================== */
html:root{--cc34-icoon-blok:#e8f3ec;--cc34-icoon:#166534}
html:root[data-theme="dark"]{--cc34-icoon-blok:rgba(34,197,94,.12);--cc34-icoon:#4ade80}
html:root body .modal-overlay .modal .modal-title::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166534' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E") center/18px 18px no-repeat,var(--cc34-icoon-blok)}
html:root[data-theme="dark"] body .modal-overlay .modal .modal-title::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E") center/18px 18px no-repeat,var(--cc34-icoon-blok)}
/* telefoon: het blokje blijft (B′: „in alle vensters”), iets kleiner (28) en de titel mag op twee regels — het kruisje staat op de eerste regel */
@media (max-width:720px){
  html:root body .modal-overlay .modal .modal-title::before{display:block!important;flex:0 0 28px!important;width:28px!important;height:28px!important;background-size:16px 16px,auto!important;align-self:flex-start;margin-top:1px}
  html:root body .modal-overlay .modal .modal-title{gap:10px!important;align-items:flex-start!important}
}

/* =====================================================================================================================================
   § H (in B′) · de knoppen die gewone stijl zijn (§ H1 + § H-B + kleurtabel K)
   ===================================================================================================================================== */
/* het ene rood (K): #b42318 / #f97066 — voor fouten en onomkeerbare knoppen */
html:root{--txtred:#b42318;--cc34-rood:#b42318}
html:root[data-theme="dark"]{--txtred:#f97066;--cc34-rood:#f97066}
/* het kruisje = een rond icoonknopje 32 (vlak g2, × in g7) — rond, want het is een icoonknop (Sam W6) */
html:root body .modal-overlay .modal .modal-close{border-radius:999px!important;font-size:18px!important}
/* de ene hoofdknop per venster: de groene rechthoek, 40 hoog, 14/600 (§ H1); tweede knoppen 36 */
html:root body .modal-overlay .modal .modal-foot .btn.btn.cc-hoofd9{height:40px!important;min-height:40px!important;padding:0 18px!important}
/* per venster maar ÉÉN knop op --ccKz9 (K): de knoppen van de bevestigingsvensters (.cc-dlgb) en de rode/groene voetknoppen worden tweede knoppen;
   alleen de hoofdknop (.cc-dlgb-pri / .cc-hoofd9 / „Wissel naar PRO”) blijft groen. (.cc-dlgb vier keer: de app-regel in cc-layout.css telt 5 klassen) */
html:root body [data-cc-modal="1"] .cc-dlgb.cc-dlgb.cc-dlgb.cc-dlgb:hover{background:var(--ccG1)!important;border-color:var(--ccG7)!important;color:var(--ccG8)!important}
html:root body [data-cc-modal="1"] .cc-dlgb.cc-dlgb.cc-dlgb.cc-dlgb.cc-dlgb-pri{height:40px!important;min-height:40px!important;padding:0 18px!important;
  background:var(--ccKz9)!important;border-color:var(--ccKz9)!important;color:var(--ccKzT9)!important;font-size:14px!important;font-weight:600!important}
html:root body [data-cc-modal="1"] .cc-dlgb.cc-dlgb.cc-dlgb.cc-dlgb.cc-dlgb-pri:hover{background:var(--ccKzH9)!important;border-color:var(--ccKzH9)!important;color:var(--ccKzT9)!important}
/* rood = alleen onomkeerbaar: „Verwijderen” = tweede knop met rode letter en rode rand; „Uitloggen” = gewone tweede knop (zie hierboven) */
html:root body [data-cc-modal="1"] .cc-dlgb.cc-dlgb.cc-dlgb.cc-dlgb.cc-dlgb-rood{border-color:var(--cc34-rood)!important;color:var(--cc34-rood)!important}

/* =====================================================================================================================================
   § H-B · het venster „Abonnement kiezen” (+ Accountbeheer): Wissel naar PRO = de ene groene hoofdknop · Opzeggen = rode tweede knop ·
   de andere plannen en Uitloggen = gewone tweede knoppen · donker zonder witte lijnen
   ===================================================================================================================================== */
/* plan-kleur van de app (navy #111827, donker WIT): de labels START/PRO/MAX, de bovenrand van de plankaarten en de rand om het huidige plan.
   In B′ inkt; donker GEEN wit blok en geen witte lijnen meer (labels zelf niet ontworpen — Z35) */
html:root{--pstart:var(--ccG8);--pstartR:var(--ccG8);--pstxt:#ffffff}
html:root[data-theme="dark"]{--pstart:var(--ccG2);--pstartR:var(--ccG5);--pstxt:var(--ccG8)}
/* maand/jaar: hetzelfde segment als de tabjes Factuur · Creditfactuur · Offerte (vlak g2, hoek 6, het gekozen = klikbaar groen) */
html:root body .modal-overlay .modal :is(.abo-period-btn,.cc-abo-btn,.cc-seclink)::before{display:none!important}
html:root body .modal-overlay .modal .abo-period-toggle{display:inline-flex!important;gap:2px!important;padding:3px!important;background:var(--ccG2)!important;border:0!important;
  border-radius:10px!important;box-shadow:none!important}
html:root body .modal-overlay .modal .abo-period-btn.abo-period-btn{height:30px!important;padding:0 14px!important;border-radius:6px!important;background:transparent!important;
  color:var(--ccG7)!important;border:0!important;box-shadow:none!important;font-size:13px!important;font-weight:500!important;text-transform:none!important;letter-spacing:normal!important;
  display:inline-flex!important;align-items:center!important;gap:6px!important}
html:root body .modal-overlay .modal .abo-period-btn.abo-period-btn:hover{background:var(--ccG3)!important;color:var(--ccG8)!important}
html:root body .modal-overlay .modal .abo-period-btn.abo-period-btn.sel{background:var(--ccKz9)!important;color:var(--ccKzT9)!important;font-weight:600!important}
html:root body .modal-overlay .modal .abo-korting-badge{background:transparent!important;color:inherit!important;border:1px solid currentColor!important;box-shadow:none!important;
  border-radius:999px!important;font-size:11px!important;font-weight:600!important;padding:0 6px!important;line-height:16px!important}
/* de planknoppen: hoekig (W6), gewone letters (geen HOOFDLETTERS — „Opzeggen” mag nooit lijken op „Wissel naar PRO”) */
html:root body .modal-overlay .modal .cc-abo-btn.cc-abo-btn{height:36px!important;min-height:36px!important;padding:0 14px!important;border-radius:6px!important;
  background:var(--cc34-kaart)!important;background-image:none!important;border:1px solid var(--ccG5)!important;color:var(--ccG8)!important;font-size:13px!important;font-weight:500!important;
  text-transform:none!important;letter-spacing:normal!important;box-shadow:none!important;transform:none!important}
html:root[data-theme="dark"] body .modal-overlay .modal .cc-abo-btn.cc-abo-btn{background:#26282d!important}
html:root body .modal-overlay .modal .cc-abo-btn.cc-abo-btn:hover{background:var(--ccG1)!important;border-color:var(--ccG7)!important;transform:none!important}
html:root body .modal-overlay .modal .cc-abo-btn.cc-abo-btn.pro:not(.cc-opzeg){height:40px!important;min-height:40px!important;padding:0 18px!important;
  background:var(--ccKz9)!important;border-color:var(--ccKz9)!important;color:var(--ccKzT9)!important;font-size:14px!important;font-weight:600!important}
html:root body .modal-overlay .modal .cc-abo-btn.cc-abo-btn.pro:not(.cc-opzeg):hover{background:var(--ccKzH9)!important;border-color:var(--ccKzH9)!important}
html:root body .modal-overlay .modal .cc-abo-btn.cc-abo-btn.cc-opzeg{border-color:var(--cc34-rood)!important;color:var(--cc34-rood)!important}
/* de twee infovlakken (groen waas „Je hebt momenteel …” en oranje „Betaling via Mollie …”): neutraal — merkgroen zacht is alleen voor de
   icoonblokjes (B′) en amber alleen voor werk (K); donker zonder de lichte randen */
html:root body .modal-overlay .modal:has(.cc-abo-btn) .modal-body>div:is([style*="--tgrn"],[style*="--tamb"]){background:var(--ccG1)!important;border:0!important;color:var(--ccG7)!important}
html:root[data-theme="dark"] body .modal-overlay .modal:has(.cc-abo-btn) .modal-body>div:is([style*="--tgrn"],[style*="--tamb"]){background:var(--ccG2)!important}
/* het icoonblokje van dit venster: een betaalkaart */
html:root body .modal-overlay .modal:has(.cc-abo-btn) .modal-title::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166534' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E") center/18px 18px no-repeat,var(--cc34-icoon-blok)}
html:root[data-theme="dark"] body .modal-overlay .modal:has(.cc-abo-btn) .modal-title::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E") center/18px 18px no-repeat,var(--cc34-icoon-blok)}
/* Accountbeheer: de kleine knopjes (E-mailadres wijzigen · Licht/Donker/Systeem) hoekig (W6), rand g5; het gekozen segment = klikbaar groen (K) */
html:root body .modal-overlay .modal .cc-seclink.cc-seclink{border-radius:6px!important;border:1px solid var(--ccG5)!important;background:var(--cc34-kaart)!important;color:var(--ccG8)!important;
  height:28px!important;padding:0 10px!important;font-size:12px!important;box-shadow:none!important}
html:root[data-theme="dark"] body .modal-overlay .modal .cc-seclink.cc-seclink{background:#26282d!important}
html:root body .modal-overlay .modal .cc-seclink.cc-seclink:hover{background:var(--ccG1)!important;border-color:var(--ccG7)!important}
html:root body .modal-overlay .modal .cc-seclink.cc-seclink.sel{background:var(--ccKz9)!important;border-color:var(--ccKz9)!important;color:var(--ccKzT9)!important;font-weight:600!important}

/* =====================================================================================================================================
   de smalle schermen (Winstbelasting · Jaarrekening · Consolidatie: .cc-smal9 > .modal.cc-scherm met .card-title en een .iobar) —
   dezelfde kop (icoonblokje 32 + titel 18/600) en dezelfde knoppen als de vensters: één groene hoofdknop, de rest tweede knop
   ===================================================================================================================================== */
html:root body .modal-overlay .modal.cc-scherm>.card{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
html:root body .modal-overlay .modal.cc-scherm .card-title{display:inline-flex!important;align-items:center!important;gap:12px!important;font-size:18px!important;font-weight:600!important;
  color:var(--ccG8)!important;line-height:1.3!important;min-height:36px}
html:root body .modal-overlay .modal.cc-scherm .card-title::before{content:"";flex:0 0 32px;width:32px;height:32px;border-radius:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166534' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E") center/18px 18px no-repeat,var(--cc34-icoon-blok)}
html:root[data-theme="dark"] body .modal-overlay .modal.cc-scherm .card-title::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E") center/18px 18px no-repeat,var(--cc34-icoon-blok)}
html:root body .modal-overlay .modal .iobar .btn.btn{height:36px!important;min-height:36px!important;padding:0 14px!important;border-radius:6px!important;background:var(--cc34-kaart)!important;
  border:1px solid var(--ccG5)!important;color:var(--ccG8)!important;font-size:13px!important;font-weight:500!important;box-shadow:none!important;opacity:1!important}
html:root[data-theme="dark"] body .modal-overlay .modal .iobar .btn.btn{background:#26282d!important}
html:root body .modal-overlay .modal .iobar .btn.btn:hover:not(:disabled):not(.disabled){background:var(--ccG1)!important;border-color:var(--ccG7)!important;color:var(--ccG8)!important}
html:root body .modal-overlay .modal .iobar .btn.btn:is(:disabled,.disabled):not(.cc-hoofd9){opacity:.55!important}
/* de hoofdknop blijft groen, ook als hij nog niet kan (§ H1 „nooit grijs”) */
html:root body .modal-overlay .modal .iobar .btn.btn.cc-hoofd9{height:40px!important;min-height:40px!important;padding:0 18px!important;background:var(--ccKz9)!important;
  border-color:var(--ccKz9)!important;color:var(--ccKzT9)!important;font-size:14px!important;font-weight:600!important;opacity:1!important}
html:root body .modal-overlay .modal .iobar .btn.btn.cc-hoofd9:hover:not(:disabled):not(.disabled){background:var(--ccKzH9)!important;border-color:var(--ccKzH9)!important;color:var(--ccKzT9)!important}
@media (max-width:720px){
  html:root body .modal-overlay .modal.cc-scherm .card-title::before{flex:0 0 28px;width:28px;height:28px;background-size:16px 16px,auto!important}
  html:root body .modal-overlay .modal.cc-scherm .card-title{gap:10px!important}
}

/* =====================================================================================================================================
   ronde 6 (Sam W15, 19.0x): de iconen optisch in het midden van hun rondje — gemeten (bbox van de inkt t.o.v. het midden van de cirkel, ÓP het
   scherm, 1440 en 390 licht) en met halve/kwart px rechtgezet; het €-teken een fractie rechts van het bbox-midden (zijn gewicht zit links)
   ===================================================================================================================================== */
html:root body .cc-indeling9:not(.cc-zoek9) .cc-ind9-r svg{transform:translate(.25px,-.25px)}
html:root body .hdr-right .cc-indeling9.cc-zoek9 .cc-ind9-r svg,html:root body .cc-indeling9.cc-zoek9 .cc-ind9-r svg{transform:translate(.125px,-.375px)}
html:root .cc-bento .cc-nieuw2col9 .cc-wfield>span:first-child>svg{transform:translate(.25px,.25px)}
html:root .cc-bento .cc-nieuw2col9 .cc-wfield>span:first-child:not(:has(svg)){box-sizing:border-box!important;padding:1.5px 0 0 1.5px!important}

/* ronde 7 (Sam W23, Fable eens): korte vensters ± 560 px breed, in het midden — de „Weet je het zeker?”-bevestigingen en de meldvensters van
   de app (ccBevestig · ccWeg9 · ccMelding: het kaartje in [data-cc-modal] met .cc-dlgb-knoppen; de app zet 460). De werkvensters met lijsten en
   formulieren blijven breed, ook een lege lijst. */
html:root body [data-cc-modal="1"]>div:has(.cc-dlgb){max-width:560px!important;width:100%!important}

/* =====================================================================================================================================
   § K · DE KLEURTABEL OVERAL (W12: „kleuren en dergelijke consistent”) — wat de proef (gemeten op 25 vensters) nog niet ving en de kleurtelling
   van toets-z34.py over ALLE schermen vond (look-9 op basis-z33, 174 schermstanden: K1 3 · K2 324 · K5 86 · K6 134). Elke regel hieronder brengt een
   oude kleur terug naar tabel K; de bron-literals zelf (#c81e1e, #dcfce7, #fef3c7, #fed7aa, #f59e0b, #fbbf24) haalt J9 weg (§ 3).
   ===================================================================================================================================== */
/* het ene rood (K): #b42318 / donker #f97066 — ook de oude --red en de vangnetregels voor inline #c81e1e (de rode stand van de afsluitwizard,
   de te-late dagen in debiteurenbeheer en ouderdomsanalyse, de foutregels) */
html:root{--red:#b42318;--txtred:#b42318}
html:root[data-theme="dark"]{--red:#f97066;--txtred:#f97066}
html:root body [style*="color: rgb(200, 30, 30)"]{color:var(--txtred)!important}
html:root body [style*="background: rgb(200, 30, 30)"],html:root body [style*="background-color: rgb(200, 30, 30)"]{background:var(--red)!important}
/* het CONCEPT-watermerk (btw-detail) is geen fout: grijs — in v1.85.0 rgba(220,38,38,.1), na Z33 J2 (155e) rgba(200,30,30,.1) */
html:root body .modal :is([style*="color: rgba(220, 38, 38, 0.1)"],[style*="color: rgba(200, 30, 30, 0.1)"]){color:rgba(17,17,17,.06)!important}
html:root[data-theme="dark"] body .modal :is([style*="color: rgba(220, 38, 38, 0.1)"],[style*="color: rgba(200, 30, 30, 0.1)"]){color:rgba(255,255,255,.06)!important}
/* amber = werk, in de tinten van K: de werkmeldingen in vensters („Nog niet gekoppeld …”, „Er is nog geen consolidatie …”, „De jaarrekening kan
   pas …”, „Cijferchef verstuurt je aangifte niet zelf …”) = amber letter op de amber waas — zonder de oude rand #fed7aa / streep #f59e0b / letter #fbbf24 */
html:root{--tamb:#fdf3e1;--txtamb:#8f5500;--ccWerk9:#8f5500}
html:root[data-theme="dark"]{--tamb:rgba(240,180,90,.12);--txtamb:#f0b45a;--ccWerk9:#f0b45a}
html:root body :is(.block-notice,.cc-bdlet9){background:var(--tamb)!important;border:0!important;border-radius:10px!important;color:#8f5500!important}
html:root[data-theme="dark"] body :is(.block-notice,.cc-bdlet9),html:root[data-theme="dark"] body :is(.block-notice,.cc-bdlet9) b{color:#f0b45a!important}
/* de amberen letter die de app inline zet (#8f5500, 15× in app.js: „loop ze even na”, „Kies eerst …”) haalt in het donker 2,9 : 1 — daar #f0b45a;
   de oude amberen randen (#fed7aa, #fde68a) vallen weg: amber = letter op waas, zonder rand (K) */
html:root[data-theme="dark"] body [style*="color: rgb(143, 85, 0)"]{color:#f0b45a!important}
html:root body :is([style*="solid rgb(254, 215, 170)"],[style*="solid rgb(253, 230, 138)"]){border-color:transparent!important}
/* klaar = de groene letter op een neutraal vlak: geen groene waas (#dcfce7) meer — zacht groen is ALLEEN voor de icoonblokjes (K, B′) */
html:root body [style*="background: rgb(220, 252, 231)"],html:root body [style*="background-color: rgb(220, 252, 231)"]{background:var(--ccG1)!important}
html:root[data-theme="dark"] body [style*="background: rgb(220, 252, 231)"],html:root[data-theme="dark"] body [style*="background-color: rgb(220, 252, 231)"]{background:var(--ccG2)!important;color:var(--txtgrn)!important}
/* per venster maar ÉÉN groene knop (K): de groene knoppen van de app die geen hoofdknop zijn („Herinneringen en aanmaningen”, de icoonknoppen
   „Terugzetten in de werklijst” in de bankregels) = tweede knop: wit, rand g5, inkt, hoek 6 (W6) */
html:root body .modal-overlay .modal :is(.btn.cc-green:not(.cc-hoofd9),.io-icon-btn.green){background:var(--cc34-kaart)!important;border:1px solid var(--ccG5)!important;
  color:var(--ccG8)!important;border-radius:6px!important;box-shadow:none!important}
html:root[data-theme="dark"] body .modal-overlay .modal :is(.btn.cc-green:not(.cc-hoofd9),.io-icon-btn.green){background:#26282d!important}
html:root body .modal-overlay .modal :is(.btn.cc-green:not(.cc-hoofd9),.io-icon-btn.green):hover{background:var(--ccG1)!important;border-color:var(--ccG7)!important}
/* rood = onomkeerbaar (K; r360 B6 „weg = rood omrand”): elke .cc-rood9 — „Definitief wissen” (administratie), „Alles leegmaken” (beginbalans),
   „Account verwijderen” — blijft een tweede knop met rode letter en rode rand, ook in de body en de voet van een venster (de regel voor tweede
   knoppen hierboven is zwaarder dan .cc-rood9 van de app en maakte ze grijs) */
html:root body .modal-overlay .modal .btn.btn.btn.cc-rood9.cc-rood9,html:root body .modal-overlay .modal .btn.btn.btn.cc-rood9.cc-rood9:not(:disabled):hover{
  border:1px solid var(--cc34-rood)!important;color:var(--cc34-rood)!important}
/* klikbaar groen als LETTER in het donker (links, de pijltjes ›, de klaar-✓): #4ade80 (K: „links #4ade80”; index.html r167 zette #22c55e);
   de vlakken blijven #22c55e (--ccKz9: hoofdknop, boekjaarpil, actief tabje) */
html:root[data-theme="dark"]{--txtgrn:#4ade80}
/* groen = klikbaar (K): het vaste label „Omzet (excl. BTW)” in de bankregel (r291-L6, inline var(--txtgrn)) is geen link — inkt, 600 */
html:root body .ed-tag[style*="--txtgrn"]{color:var(--ccG8)!important}

/* =====================================================================================================================================
   § H-B · de knoppen, het lege scherm, de melding en de mijlpaal (kaart Z34-3 (1) A, W23) — de CSS van proef-h.js (L1), mechanisch overgenomen
   (ph- → cc-h9-). Werkt pas als J8–J12 in app.js de klassen zetten (REGELS-Z34 § 3): cc-h9-mis/-veld-mis/-veld-regel (J8, nooit grijs),
   cc-h9-bezig/-draai (J9, „Opslaan…”), cc-h9-leeg* en cc-h9-geen-aan (J10, het lege scherm; 155e Z34-d), cc-h9-melding* (J11, de melding), cc-h9-mijl* (J12, de
   mijlpaal, een kort venster van ± 560 px). Beweging 100/200/240 ms, uit bij prefers-reduced-motion.
   ===================================================================================================================================== */
html:root body .modal-overlay .modal.cc-invoer9 .modal-foot>.cc-mis9,html:root body .modal-overlay .modal.cc-invoer9 #cc-mis9{display:none!important}
html:root body .modal-overlay .modal .cc-h9-mis{display:flex;align-items:flex-start;gap:10px;margin:0 0 16px;padding:10px 12px;border-radius:10px;background:var(--cc34-amber-waas);color:var(--cc34-amber);font-size:13px;font-weight:500;line-height:1.45;animation:cc-h9-in .1s ease-out}
html:root body .modal-overlay .modal .cc-h9-mis::before{content:"";flex:0 0 16px;width:16px;height:16px;margin-top:1px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.6h.01'/%3E%3C/svg%3E") center/16px 16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.6h.01'/%3E%3C/svg%3E") center/16px 16px no-repeat}
html:root body .modal-overlay .modal :is(.dep-input,input,select,textarea).cc-h9-veld-mis,html:root body .modal-overlay .modal :is(.dep-input,input,select,textarea).cc-h9-veld-mis:focus{border-color:var(--cc34-amber)!important;box-shadow:0 0 0 calc(1px / var(--ccZm,1)) var(--cc34-amber)!important;outline:none!important}
html:root body .modal-overlay .modal .cc-h9-veld-regel{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;font-weight:500;line-height:1.3;color:var(--cc34-amber)}
html:root body .modal-overlay .modal .cc-h9-veld-regel::before{content:"";flex:0 0 14px;width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.6h.01'/%3E%3C/svg%3E") center/14px 14px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.6h.01'/%3E%3C/svg%3E") center/14px 14px no-repeat}
html:root body .modal-overlay .modal .modal-foot .btn.btn.cc-hoofd9.cc-h9-bezig,html:root body .modal-overlay .modal .btn.btn.cc-h9-bezig{font-size:0!important;cursor:progress!important;opacity:1!important}
html:root body .modal-overlay .modal .cc-h9-bezig-in{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;line-height:1;white-space:nowrap}
html:root body .modal-overlay .modal .cc-h9-draai{display:inline-block;flex:0 0 16px;width:16px;height:16px;box-sizing:border-box;border-radius:50%;border:1.5px solid currentColor;border-right-color:transparent;animation:cc-h9-draai .8s linear infinite}
@keyframes cc-h9-draai{to{transform:rotate(360deg)}}
@keyframes cc-h9-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes cc-h9-op{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes cc-h9-zacht{from{opacity:0}to{opacity:1}}
html:root .cc-h9-knop{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 14px;border-radius:6px;border:1px solid var(--ccG5);background:var(--cc34-kaart);color:var(--ccG8);font:inherit;font-size:13px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;box-sizing:border-box}
html:root .cc-h9-knop:hover{background:var(--ccG1);border-color:var(--ccG7)}
html:root .cc-h9-knop.cc-h9-hoofd{height:40px;padding:0 18px;background:var(--ccKz9);border-color:var(--ccKz9);color:var(--ccKzT9);font-size:14px;font-weight:600}
html:root .cc-h9-knop.cc-h9-hoofd:hover{background:var(--ccKzH9);border-color:var(--ccKzH9)}
html:root .cc-h9-knop:focus-visible{outline:2px solid var(--ccG8);outline-offset:2px}
html:root .cc-h9-leeg-vlak{display:flex;flex:1 1 auto;align-items:center;justify-content:center;min-height:min(440px,56vh);padding:24px 16px;box-sizing:border-box}
html:root .cc-h9-leeg{display:flex;flex-direction:column;align-items:center;text-align:center;box-sizing:border-box;width:100%;max-width:400px;padding:32px 28px 28px;border-radius:14px;background:var(--cc34-kaart);box-shadow:0 0 0 1px rgba(17,17,17,.04),0 1px 2px rgba(17,17,17,.06),0 12px 28px -14px rgba(17,17,17,.28);animation:cc-h9-zacht .2s ease-out}
html:root[data-theme="dark"] .cc-h9-leeg{background:#26282d;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.4),0 12px 28px -12px rgba(0,0,0,.6)}
html:root .cc-h9-leeg-ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--cc34-merk);color:#ffffff;font-size:16px;font-weight:700;line-height:1;margin:0 0 14px}
html:root .cc-h9-leeg-ico.cc-h9-grijs{background:var(--ccG2);color:var(--ccG7)}
html:root .cc-h9-leeg-titel{margin:0 0 6px;font-size:16px;font-weight:600;line-height:1.35;color:var(--ccG8)}
html:root .cc-h9-leeg-zin{margin:0 0 20px;font-size:14px;line-height:1.5;color:var(--ccG6);max-width:320px}
html:root body .modal-overlay .modal.cc-h9-leeg-aan .filter-bar,html:root body .modal-overlay .modal.cc-h9-leeg-aan .modal-foot,html:root body .modal-overlay .modal.cc-h9-leeg-aan .modal-title .cc-aantal9,html:root body .modal-overlay .modal.cc-h9-leeg-aan .modal-hdr :is(select,.ed-pill){display:none!important}
html:root body .modal-overlay .modal.cc-h9-geen-aan .modal-foot{display:none!important}
html:root body .modal-overlay .modal .cc-h9-weg{display:none!important}
html:root body .modal-overlay .modal.cc-h9-geen-aan .filter-bar .cc-h9-wis-dubbel{visibility:hidden!important}
html:root .cc-h9-melding{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:2147483600;display:flex;align-items:center;gap:10px;box-sizing:border-box;min-height:48px;max-width:calc(100vw - 32px);padding:0 18px;border-radius:10px;background:#111111;color:#ffffff;font-size:14px;font-weight:500;line-height:1.3;white-space:nowrap;box-shadow:0 10px 28px rgba(17,17,17,.28);animation:cc-h9-op .2s ease-out}
html:root[data-theme="dark"] .cc-h9-melding{background:#26282d;box-shadow:0 0 0 1px rgba(255,255,255,.10),0 10px 28px rgba(0,0,0,.55)}
html:root .cc-h9-melding-punt{color:rgba(255,255,255,.45)}
html:root .cc-h9-melding-link{background:none;border:0;padding:0;margin:0;font:inherit;font-weight:600;color:#4ade80;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
html:root .cc-h9-melding-link:hover{text-decoration-thickness:2px}
html:root .cc-h9-melding-link:focus-visible{outline:2px solid #4ade80;outline-offset:3px;border-radius:2px}
@media (max-width:720px){html:root .cc-h9-melding{bottom:calc(88px + env(safe-area-inset-bottom,0px))}}
html:root body .modal-overlay .modal.cc-h9-mijl-aan .modal-body>:not(.cc-h9-mijlpaal),html:root body .modal-overlay .modal.cc-h9-mijl-aan .modal-foot,html:root body .modal-overlay .modal.cc-h9-mijl-aan>.card>:not(.cc-h9-mijlpaal){display:none!important}
html:root body .modal-overlay .modal.cc-h9-mijl-aan{height:auto!important;min-height:0!important;width:560px!important;min-width:0!important;max-width:calc(100vw - 32px)!important;flex:0 0 auto!important;align-self:center!important;margin:auto!important}
html:root .cc-h9-mijlpaal{display:flex;flex-direction:column;align-items:center;text-align:center;box-sizing:border-box;padding:48px 24px 40px;margin:0 auto;max-width:480px;animation:cc-h9-zacht .24s ease-out}
html:root .cc-h9-mijl-vink{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--cc34-merk);color:#ffffff;margin:0 0 18px}
html:root .cc-h9-mijl-titel{margin:0 0 8px;font-size:18px;font-weight:600;line-height:1.3;color:var(--ccG8)}
html:root .cc-h9-mijl-zin{margin:0 0 28px;font-size:14px;line-height:1.5;color:var(--ccG6)}
html:root .cc-h9-mijl-knoppen{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
@media (prefers-reduced-motion:reduce){html:root :is(.cc-h9-mis,.cc-h9-leeg,.cc-h9-melding,.cc-h9-mijlpaal){animation:none!important}html:root .cc-h9-draai{animation:none!important}}

/* ===== einde Z34 ===== */
/* ===== Z35 — de badges START/PRO/MAX (Stip), de abonnementskaarten (gelijk), de statussen (één eindpunt), de kopknoppen (zacht grijs), zweven en de landing (Fable Z35 deel 2, di 6 okt 2026, Sams keuze `--keuze E,A,P,N`; REGELS-Z35 § 3–§ 9; gemaakt met maak-blok-z35.py uit proef/z35-keuze.css) ===== */
/* ---------- GEMEEN · G1 G2 G3 G5 G7 G11 G12 (ongewijzigd uit deel 1; G6/G8 → STATUS, G4 → KAARTEN, G9 = N: de kop krijgt nooit een label, dus geen regel) */
/* G1 · het label alleen bij wat op slot zit („heb je” = rust; „kun je krijgen” = label). Wie MAX heeft, ziet nergens meer „PRO”. */
html:root body .cc-hub :not(.cc-locked)>.cc-plan-tag:not(.cc-dim):not(.cc-abonaam9){display:none!important}
html:root body .modal .cc-plan-tag:not(.cc-dim):not(.cc-abonaam9):not(.cc-z35-acc){display:none!important}
/* G2 · op slot = leesbaar: geen opacity .5 + grijsfilter meer; de rij in g6 (5,4 : 1 licht, 6,5 : 1 donker); het label zelf blijft vol */
html:root body .cc-hub :is(.cc-dim,.cc-locked),html:root body .cc-hub :is(.cc-dim,.cc-locked):hover{opacity:1!important;filter:none!important}
html:root body .cc-hub .cc-dim:not(.cc-plan-tag),html:root body .cc-hub .cc-locked,html:root body .cc-hub .cc-locked *:not(.cc-plan-tag){color:var(--ccG6)!important}
/* G3 · het venster Abonnement (+ de betaalmuur) zo breed als de drie kaarten: ≤ 1040 CSS-px, in het midden. Telefoon: schermvullend zoals nu. */
@media (min-width:721px) and (min-height:501px){
  html:root body .modal-overlay.cc-cardmodal>.modal:has(.cc-abo-btn){width:min(1040px,96vw)!important;max-width:min(1040px,96vw)!important;min-height:0!important;
    left:50%!important;right:auto!important;bottom:auto!important;height:auto!important;transform:translateX(-50%)!important}
}
/* G5 · Administratiebeheer — het blok „Je …-abonnement is actief”: een B′-sectie (vlak g1, hoek 10; donker #26282d); het watermerk weg; het tandwiel = tweede knop met tekst */
html:root body .cc-z35-admblok{display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:wrap!important;gap:12px 16px!important;
  background:var(--ccG1)!important;border:0!important;border-radius:10px!important;padding:16px 20px!important;overflow:visible!important}
html:root[data-theme="dark"] body .cc-z35-admblok{background:#26282d!important}
html:root body .cc-z35-admrechts{position:static!important;order:2!important;flex-direction:row!important;justify-content:flex-end!important;align-items:center!important;
  inset:auto!important;cursor:default!important}
html:root body .cc-z35-admrechts>button.icon-btn{width:auto!important;height:36px!important;min-height:36px!important;aspect-ratio:auto!important;padding:0 14px!important;
  border-radius:6px!important;border:1px solid var(--ccG5)!important;background:#ffffff!important;color:var(--ccG8)!important;font-size:13px!important;font-weight:500!important;
  display:inline-flex!important;align-items:center!important;gap:6px!important}
html:root[data-theme="dark"] body .cc-z35-admrechts>button.icon-btn{background:#1e2024!important;border-color:#7d8086!important;color:#e7e8ea!important}
html:root body .cc-z35-admrechts>button.icon-btn>svg{display:none!important}
html:root body .cc-z35-admtitel{margin-top:8px!important;font-size:14px!important;font-weight:600!important;color:var(--ccG8)!important}
/* G7 · het groen GEVULDE label „enkelvoudig + geconsolideerd” → rustig zoals st-info9 (groen = klikbaar; een badge is nooit gevuld) */
html:root body .st-badge[style*="--tgrn"]{background:transparent!important;color:var(--ccG7)!important;border:1px solid var(--ccG4)!important}
/* G11 · geen 56 px lege ruimte onder de Mollie-regel op de computer */
@media (min-width:721px) and (min-height:501px){html:root body .modal-overlay .modal:has(.cc-abo-btn)>.modal-body{padding-bottom:12px!important}}
/* G12 · de creditnota: het vak „Te crediteren factuur” een gewone B′-sectie (vlak g1, hoek 10, geen rand; donker #26282d) — rood = fout of onomkeerbaar (K) */
html:root body .cc-z35-credit{background:var(--ccG1)!important;border:0!important;border-radius:10px!important}
html:root[data-theme="dark"] body .cc-z35-credit{background:#26282d!important}

/* ---------- LABEL · E · Stip (REGELS § 3) — een zwevende pil, letter in de inkt, ervoor een stip (::before): groen = jouw abonnement (cc-z35-aan),
   open ring g5 = hoort bij een ander abonnement. Geen kleur per abonnement (r284-J), geen slotje (G1 nieuw). Maat S is de basis; M/L/Z hieronder.
   Zwaarder dan de Z33-regel `:root .cc-plan-tag{font-size:11px!important;…;padding:1px 5px!important}` (0,2,0) en het Z33-vangnet voor de letterafstand (0,7,1). */
html:root body :is(.cc-plan-tag,.cc-abonaam9,.cc-z35-acc).cc-plan-tag,
html:root body :is(.cc-plan-tag,.cc-abonaam9,.cc-z35-acc).cc-abonaam9,
html:root body :is(.cc-plan-tag,.cc-abonaam9,.cc-z35-acc).cc-z35-acc{
  display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;gap:6px!important;box-sizing:border-box!important;
  height:22px!important;min-height:22px!important;padding:0 9px 0 8px!important;margin:0!important;border:0!important;border-radius:999px!important;
  font-size:11px!important;font-weight:600!important;letter-spacing:.04em!important;line-height:1!important;text-transform:uppercase!important;text-indent:0!important;
  white-space:nowrap!important;font-variant-numeric:normal!important;vertical-align:middle!important;
  background:#ffffff!important;background-image:none!important;color:var(--ccG8)!important;opacity:1!important;filter:none!important;
  box-shadow:0 0 0 1px rgba(17,17,17,.07),0 1px 2px rgba(17,17,17,.07),0 4px 8px -4px rgba(17,17,17,.22)!important}
html:root[data-theme="dark"] body :is(.cc-plan-tag,.cc-abonaam9,.cc-z35-acc):is(.cc-plan-tag,.cc-abonaam9,.cc-z35-acc){background:#26282d!important;color:#e7e8ea!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 4px 8px -4px rgba(0,0,0,.6)!important}
/* de stip: 7 × 7, uit = rand 1,5 px óp het scherm g5 (geen vlak) · aan = vlak merkgroen (K-aanvulling: de stip „jouw abonnement”).
   De rand is een inset-schaduw, geen border: Chromium zet een randbreedte van 1,5 px op 1 px (randbreedtes worden op hele px afgerond; gemeten) — een schaduw niet. */
html:root body :is(.cc-plan-tag,.cc-abonaam9,.cc-z35-acc):is(.cc-plan-tag,.cc-abonaam9,.cc-z35-acc)::before{content:""!important;display:block!important;flex:0 0 auto!important;
  box-sizing:border-box!important;width:7px!important;height:7px!important;margin:0!important;border-radius:50%!important;background:transparent!important;
  border:0!important;box-shadow:inset 0 0 0 calc(1.5px / var(--ccZm,1)) #8d8d87!important;-webkit-mask:none!important;mask:none!important}
html:root[data-theme="dark"] body :is(.cc-plan-tag,.cc-abonaam9,.cc-z35-acc):is(.cc-plan-tag,.cc-abonaam9,.cc-z35-acc)::before{box-shadow:inset 0 0 0 calc(1.5px / var(--ccZm,1)) #7d8086!important}
html:root body :is(.cc-plan-tag,.cc-abonaam9,.cc-z35-acc).cc-z35-aan.cc-z35-aan::before{background:#16a34a!important;box-shadow:none!important}
html:root[data-theme="dark"] body :is(.cc-plan-tag,.cc-abonaam9,.cc-z35-acc).cc-z35-aan.cc-z35-aan::before{background:#22c55e!important}
/* M — de kaarten (venster Abonnement, betaalmuur, landing): 24 · 12 · 9/10 */
html:root body :is(.cc-plan-tag,.cc-abonaam9).cc-abonaam9:not(.cc-abonaam9-xl):not(.cc-abonaam-inline9){height:24px!important;min-height:24px!important;padding:0 10px 0 9px!important;font-size:12px!important}
/* L — Administratiebeheer: 26 · 13 · 10/11 · stip 8 */
html:root body .cc-abonaam9.cc-abonaam9.cc-abonaam9-xl{height:26px!important;min-height:26px!important;padding:0 11px 0 10px!important;font-size:13px!important}
html:root body .cc-abonaam9.cc-abonaam9.cc-abonaam9-xl::before{width:8px!important;height:8px!important}
/* Z — in een zin („Alles uit START plus …”): 20 · 11 · 7/8 · ruimte 5 · midden van de regel · de schaduw loopt hooguit 2 px onder het label uit */
html:root body .cc-abonaam9.cc-abonaam9.cc-abonaam-inline9{height:20px!important;min-height:20px!important;padding:0 8px 0 7px!important;gap:5px!important;font-size:11px!important;
  vertical-align:middle!important;margin:0 1px!important;box-shadow:0 0 0 1px rgba(17,17,17,.07),0 1px 1px rgba(17,17,17,.07)!important}
html:root[data-theme="dark"] body .cc-abonaam9.cc-abonaam9.cc-abonaam-inline9{box-shadow:0 0 0 1px rgba(255,255,255,.10),0 1px 1px rgba(0,0,0,.6)!important}
/* het label in een zin op de LANDING draagt geen .cc-plan-tag (index.html blijft op die plek gelijk) → het Z33-vangnet (0,7,1) zette de .04 em op normal: de id wint */
html:root body #cc-landing .cc-abonaam9.cc-abonaam9{letter-spacing:.04em!important}
/* G10 · donker: een pil op een vlak #26282d (kaart, blok Administratiebeheer) krijgt vlak #3a3b40 (de donkere g3) */
html:root[data-theme="dark"] body :is(.cc-z35-kaart,.cc-z35-admblok,#cc-landing .ld-prijs) :is(.cc-plan-tag,.cc-abonaam9).cc-abonaam9{background:#3a3b40!important}
/* de open stip op #3a3b40: g5 #7d8086 haalt daar maar 2,8 : 1 (< 3 : 1, WCAG 1.4.11) → g6 #a1a3a7 (4,4 : 1) — afwijking van § 3 („uit = g5”), alleen op dit vlak */
html:root[data-theme="dark"] body :is(.cc-z35-kaart,.cc-z35-admblok,#cc-landing .ld-prijs) :is(.cc-plan-tag,.cc-abonaam9).cc-abonaam9:not(.cc-z35-aan)::before{box-shadow:inset 0 0 0 calc(1.5px / var(--ccZm,1)) #a1a3a7!important}

/* ---------- KAARTEN · A · gelijk (REGELS § 4; G3/G4) — zwevend wit op wit, hoek 14, geen bovenrand; geen „Aanbevolen”, geen groene knop op de kaarten */
html:root body .cc-z35-raster{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;gap:16px!important;align-items:stretch!important}
html:root body .cc-z35-kaart{border:0!important;border-radius:14px!important;padding:20px!important;background:#ffffff!important;position:relative!important;
  box-shadow:0 0 0 1px rgba(17,17,17,.03),0 1px 2px rgba(17,17,17,.06),0 8px 16px -12px rgba(17,17,17,.22)!important}
html:root[data-theme="dark"] body .cc-z35-kaart{background:#26282d!important;box-shadow:0 0 0 1px rgba(255,255,255,.06)!important}
/* kopregel: links het label (M), rechts „Huidig abonnement” op je eigen kaart */
html:root body .cc-z35-kaart>h3{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin:0 0 14px!important;
  min-height:24px!important;line-height:1!important;font-size:12px!important}
/* de prijs: 22/600, cijfers van gelijke breedte; de eenheid „per maand, excl. btw” / „per jaar, excl. btw” 13/400 g6 in de regel */
html:root body .cc-z35-prijs{display:flex!important;flex-wrap:wrap!important;align-items:baseline!important;column-gap:6px!important;row-gap:4px!important;margin:0!important;
  font-size:22px!important;font-weight:600!important;line-height:1.2!important;color:var(--ccG8)!important;font-variant-numeric:tabular-nums!important;letter-spacing:normal!important}
html:root body .cc-z35-eenheid{font-size:13px!important;font-weight:400!important;color:var(--ccG6)!important}
/* de jaarbadge „✓ 10% korting — jaarabonnement” (tekst blijft): rustige pil g2 + g7, rond, 22 hoog, 12/600 (donker #3a3b40, G10) */
html:root body .cc-z35-jaar{display:inline-flex!important;align-items:center!important;height:22px!important;padding:0 10px!important;border:0!important;border-radius:999px!important;
  background:var(--ccG2)!important;color:var(--ccG7)!important;font-size:12px!important;font-weight:600!important;letter-spacing:normal!important;box-shadow:none!important}
html:root[data-theme="dark"] body .cc-z35-jaar{background:#3a3b40!important}
html:root body .cc-z35-jaar-wrap{margin-top:8px!important}
/* de beschrijving (tekst blijft): 13/400, regelafstand 1,55, g7 · de knoppen de hele breedte onderaan */
html:root body .cc-z35-tekst{margin:14px 0 18px!important;font-size:13px!important;font-weight:400!important;line-height:1.55!important;color:var(--ccG7)!important}
html:root body .modal-overlay .modal .cc-z35-kaart .cc-abo-btn.cc-abo-btn{width:100%!important;justify-content:center!important;margin-top:auto!important}
/* geen groene knop op de kaarten — met én zonder abonnement (A): elke „Kies …”/„Wissel naar …” is een tweede knop; „Opzeggen” blijft rood omrand (K) */
html:root body .modal-overlay .modal .cc-z35-kaart .cc-abo-btn.cc-abo-btn:not(.cc-opzeg){height:36px!important;min-height:36px!important;padding:0 14px!important;
  background:#ffffff!important;border:1px solid var(--ccG5)!important;color:var(--ccG8)!important;font-size:13px!important;font-weight:500!important;box-shadow:none!important}
html:root[data-theme="dark"] body .modal-overlay .modal .cc-z35-kaart .cc-abo-btn.cc-abo-btn:not(.cc-opzeg){background:#26282d!important;border-color:#7d8086!important;color:#e7e8ea!important}
html:root body .modal-overlay .modal .cc-z35-kaart .cc-abo-btn.cc-abo-btn:not(.cc-opzeg):hover{background:var(--ccG1)!important;border-color:var(--ccG7)!important}
/* je eigen kaart: „Huidig abonnement” (pil g2 + g7, 22 hoog, 12/600; donker #3a3b40) + ring 2 px óp het scherm in de inkt (donker g6) */
html:root body .cc-z35-kaart.cc-z35-eigen{box-shadow:0 0 0 calc(2px / var(--ccZm,1)) var(--ccG8),0 8px 16px -12px rgba(17,17,17,.22)!important}
html:root[data-theme="dark"] body .cc-z35-kaart.cc-z35-eigen{box-shadow:0 0 0 calc(2px / var(--ccZm,1)) var(--ccG6)!important}
html:root body .cc-z35-woord{display:inline-flex!important;align-items:center!important;height:22px!important;padding:0 10px!important;border-radius:999px!important;
  background:var(--ccG2)!important;color:var(--ccG7)!important;font-size:12px!important;font-weight:600!important;letter-spacing:normal!important;text-transform:none!important;white-space:nowrap!important}
html:root[data-theme="dark"] body .cc-z35-woord{background:#3a3b40!important}
/* de kleine lettertjes (tekst blijft): 12/400 g6, regelafstand 1,6, ≤ 820 px, gecentreerd · de Mollie-regel: tekst en vorm ongewijzigd */
html:root body .cc-z35-klein{max-width:820px!important;margin:18px auto 0!important;font-size:12px!important;line-height:1.6!important;color:var(--ccG6)!important;text-align:center!important}

/* ---------- STATUS · P · één eindpunt (REGELS § 5) — Concept/Geen aangifte rustig · tussenstap (st-definitief) rand 1 px g5, geen ✓ ·
   eindpunt (st-ingediend) rand 1,5 px óp het scherm in de inkt + groene ✓ ervoor, 600 · nooit gevuld (Z30). De klas volgt het eindpunt (J19/J24). */
html:root[data-theme] body .st-badge.st-concept,html:root[data-theme] body .st-badge.st-klad,html:root[data-theme] body .st-badge.st-geen9{color:var(--ccG6)!important;border-color:var(--ccG4)!important}
html:root[data-theme] body .st-badge.st-definitief:not(.st-ingediend){color:var(--ccG8)!important;border:1px solid #8d8d87!important;background:transparent!important}
html:root[data-theme="dark"] body .st-badge.st-definitief:not(.st-ingediend){border-color:#7d8086!important}
html:root[data-theme] body .st-badge.st-definitief:not(.st-ingediend)::before{content:none!important}
/* de rand van 1,5 px óp het scherm = border 1 px + een inset-schaduw van 0,5 px in dezelfde inkt (Chromium rondt een border van 1,5 px af op 1 px); de maat van de badge blijft gelijk aan de tussenstap */
html:root[data-theme] body .st-badge.st-ingediend{color:var(--ccG8)!important;border:calc(1px / var(--ccZm,1)) solid #111111!important;box-shadow:inset 0 0 0 calc(.5px / var(--ccZm,1)) #111111!important;font-weight:600!important;background:transparent!important}
html:root[data-theme="dark"] body .st-badge.st-ingediend{border-color:#e7e8ea!important;box-shadow:inset 0 0 0 calc(.5px / var(--ccZm,1)) #e7e8ea!important}
html:root[data-theme] body .st-badge.st-ingediend::before{content:"✓ "!important;color:#166534!important;font-weight:600!important}
html:root[data-theme="dark"] body .st-badge.st-ingediend::before{color:#4ade80!important}

/* ---------- KOP · kopknoppen D · zacht grijs (REGELS § 3b, G13) — zoeken (.cc-zoek9), Indeling, profiel: vlak g2 (donker #3a3b40), geen ring, icoon/letter g8,
   zwevend; Indeling aan (aria-pressed) = vlak g8 + icoon in de achtergrondkleur (zoals nu). Maten blijven (knop 28, profiel 44/40). */
html:root body .hdr-right .cc-indeling9 .cc-ind9-r,html:root body .hdr-right .profile-btn-lg{background:var(--ccG2)!important;border:0!important;color:var(--ccG8)!important;
  box-shadow:0 0 0 1px rgba(17,17,17,.03),0 1px 2px rgba(17,17,17,.08),0 6px 12px -6px rgba(17,17,17,.30)!important}
html:root[data-theme="dark"] body .hdr-right .cc-indeling9 .cc-ind9-r,html:root[data-theme="dark"] body .hdr-right .profile-btn-lg{background:#3a3b40!important;color:#e7e8ea!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 6px 12px -6px rgba(0,0,0,.7)!important}
html:root body .hdr-right .cc-indeling9[aria-pressed="true"] .cc-ind9-r{background:var(--ccG8)!important;color:var(--surf)!important}

/* ---------- ZWEVEN · de groene actierondjes (Z34 § 8.5 A, G14): Verkoop › Offerte/Factuur — rond én aan te tikken = zwevend. Niet: letterrondjes in een
   regel die al zweeft, de icoonblokjes bij de titels. */
html:root body .cc-nieuw2col9 .cc-wfield>span:first-child{box-shadow:0 1px 2px rgba(17,17,17,.10),0 6px 12px -6px rgba(22,101,52,.55)!important}
html:root[data-theme="dark"] body .cc-nieuw2col9 .cc-wfield>span:first-child{box-shadow:0 1px 2px rgba(0,0,0,.4),0 6px 12px -6px rgba(0,0,0,.7)!important}

/* ---------- LANDING · = de app (REGELS § 9): `.ld-card.ld-prijs` × 3 dezelfde kaart — zwevend wit op wit, hoek 14, geen bovenrand; label M uit (geen abonnement
   op de landing); prijs 22/600 tabular + „per maand, excl. btw”; de jaarkorting als rustige pil; drie gelijke tweede knoppen (tekst „PROBEER GRATIS” blijft). */
html:root body #cc-landing .ld-card.ld-prijs{border:0!important;border-radius:14px!important;padding:20px!important;background:#ffffff!important;
  box-shadow:0 0 0 1px rgba(17,17,17,.03),0 1px 2px rgba(17,17,17,.06),0 8px 16px -12px rgba(17,17,17,.22)!important}
html:root[data-theme="dark"] body #cc-landing .ld-card.ld-prijs{background:#26282d!important;box-shadow:0 0 0 1px rgba(255,255,255,.06)!important}
html:root body #cc-landing .ld-card.ld-prijs>h3{display:flex!important;align-items:center!important;min-height:24px!important;margin:0 0 14px!important;line-height:1!important;font-size:12px!important}
html:root body #cc-landing .ld-card.ld-prijs .ld-bedrag{font-size:22px!important;font-weight:600!important;line-height:1.2!important;color:var(--ccG8)!important;
  font-variant-numeric:tabular-nums!important;letter-spacing:normal!important;margin:0 0 8px!important}
html:root body #cc-landing .ld-card.ld-prijs .ld-bedrag>span{font-size:13px!important;font-weight:400!important;color:var(--ccG6)!important;margin-left:0!important}
/* de jaarkorting („of € … per jaar — 10% korting” / „omgerekend € … per maand”, tekst blijft): rustige pil g2 + g7, 22 hoog, 12/600 — display blijft van de landing (de schakelaar) */
html:root body #cc-landing .ld-card.ld-prijs .ld-omreken9{width:fit-content!important;max-width:100%!important;box-sizing:border-box!important;height:22px!important;line-height:22px!important;
  padding:0 10px!important;border-radius:999px!important;background:var(--ccG2)!important;color:var(--ccG7)!important;font-size:12px!important;font-weight:600!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;margin:0 0 4px!important}
html:root[data-theme="dark"] body #cc-landing .ld-card.ld-prijs .ld-omreken9{background:#3a3b40!important}
html:root body #cc-landing .ld-card.ld-prijs>p{margin:14px 0 18px!important;font-size:13px!important;font-weight:400!important;line-height:1.55!important;color:var(--ccG7)!important}
html:root body #cc-landing .ld-card.ld-prijs .cc-abo-btn.ld-abo-knop9{width:100%!important;height:36px!important;min-height:36px!important;padding:0 14px!important;margin-top:auto!important;
  justify-content:center!important;background:#ffffff!important;border:1px solid var(--ccG5)!important;color:var(--ccG8)!important;font-size:13px!important;font-weight:500!important;
  border-radius:6px!important;box-shadow:none!important;background-image:none!important}
html:root[data-theme="dark"] body #cc-landing .ld-card.ld-prijs .cc-abo-btn.ld-abo-knop9{background:#26282d!important;border-color:#7d8086!important;color:#e7e8ea!important}
/* ===== einde Z35 ===== */

/* ===== Z36 · de professionaliteitsslag (REGELS-Z36 § 4; gemaakt met maak-blok-z36.py op 2026-10-07 uit keuze-z36.css) — alleen tabel K + g0–g8 ===== */
/* --- uit keuze-z36.css --- */
/* ==== proef-z36.css ==== */

/* ---------- P01 · Cijfers van gelijke breedte alleen waar cijfers staan (body → normaal) ---------- */

html:root body :is(.ccc-v,.cc-r,.cc-fl9-bed,.cc-fl9-dat,.cc-fl9-nr,.cc-fl9-sub,.ed-amt,.ob-amt-link,.ed-date,.cc-aantal9,.cc-z35-prijs,
  .cb-tktel,[data-cc-rol9="bedrag"],td[style*="text-align: right"],input[type="number"],input[type="date"],input[type="month"]){font-variant-numeric:tabular-nums!important}
html:root body .modal td:first-child:not([style*="text-align: right"]),html:root body .cc-bt td:not(.cc-r){font-variant-numeric:normal!important}

/* ---------- P02 · Eén toelichting: grijs (g6), 13 px als inleiding, 12 px onder een kop/veld en als voetnoot ---------- */

html:root body [style*="font-size: 11px"]:is([style*="color: var(--muted)"],[style*="color: var(--mut2)"]){font-size:12px!important;line-height:1.5!important}

/* P02 · het label van een keuzerondje of vinkje is inhoud: inkt, niet de toelichtingskleur (de labels van Rekeningen staan in de bron op var(--muted)) */
html:root body label:has(> input[type="radio"],> input[type="checkbox"]){color:var(--txt)!important}
/* R14/M35 · een gekozen rondje of vinkje is klikbaar groen, niet het blauw van de browser (tabel K: geen blauw behalve de focusring) */
html:root body :is(input[type="radio"],input[type="checkbox"]){accent-color:#166534!important}
html:root[data-theme="dark"] body :is(input[type="radio"],input[type="checkbox"]){accent-color:#22c55e!important}

/* P02 · de verwijsregel („Btw-instellingen staan bij Omzetbelasting › · incassokosten bij …”) is uitleg: grijs, 12 px (de links blijven groen). De census op de proef
   (hulp/H4b) vond buiten deze ene regel geen zwarte toelichting meer: wat zwart blijft, is inhoud (omschrijvingen, rubrieken, stappen, meldingen) */
html:root body .modal .cc-w8verwijs9{color:var(--ccG6)!important;font-size:12px!important}

/* ---------- P03 · Rolbadges (Eigenaar · Actief · Gedeeld · Dochter …): een eigen familie — zacht grijs vlak, geen rand, rond ---------- */
html:root body .st-badge.st-info9{border:0!important;background:var(--ccG2)!important;color:var(--ccG7)!important;border-radius:999px!important;
  min-height:20px!important;height:20px!important;padding:0 8px!important;font-size:12px!important;font-weight:500!important;line-height:20px!important;
  letter-spacing:normal!important;text-transform:none!important;display:inline-flex!important;align-items:center!important;opacity:1!important}
html:root[data-theme="dark"] body .st-badge.st-info9{background:#3a3b40!important;color:#c9cacd!important}

/* ---------- P04 · Knoppen op één schaal: hoofd 40 · tweede 36 · compact 28 (in regels en naast velden) · icoon rond 32 ---------- */
/* rij-acties in Debiteurenbeheer en de postenlijsten (nu 22,7 px, hoek 10, 11–13 px) → compacte knop */
/* compacte knoppen naast velden (E-mailadres wijzigen, Wachtwoord wijzigen, Kopieer …) → hoek 6, 28 */
html:root body .modal .cc-seclink:not([aria-pressed]):not(.cb-taak-knop){border-radius:6px!important;min-height:calc(28px / var(--ccZm,1))!important}
/* een onomkeerbare knop is altijd hoekig (Account verwijderen was een pil) */
html:root body .modal :is(.cc-rood9,.cc-solid-red.cc-rood9){border-radius:6px!important;min-height:calc(28px / var(--ccZm,1))!important}
/* Charlies vraagknopjes en taakknoppen → compacte knop */
html:root body .cb-chip,html:root body .cb-taak-knop{border-radius:6px!important;min-height:calc(28px / var(--ccZm,1))!important;height:auto!important;padding:0 10px!important;
  font-size:12px!important;font-weight:500!important;border:1px solid var(--ccG4)!important;background:var(--surf)!important;color:var(--ccG8)!important;box-shadow:none!important;white-space:nowrap}
html:root body .cb-chip:hover,html:root body .cb-taak-knop:hover{background:var(--ccG1)!important;border-color:var(--ccG7)!important;color:var(--ccG8)!important;box-shadow:none!important}
html:root[data-theme="dark"] body :is(.cb-chip,.cb-taak-knop){border-color:#7d8086!important;background:#26282d!important;color:#e7e8ea!important}

/* P35 · „Filters wissen” wordt een compacte knop van 28 (nu 22 px, kale tekst) — in de bouw krijgt de knop een klasse in app.js */
html:root:root:root body .btn.btn.cc-wis9.cc-wis9.cc-wis9,html:root:root:root body label.btn.btn-primary.btn-sm[aria-label="Bankbestand inlezen"]{height:auto!important;min-height:calc(28px / var(--ccZm,1))!important;padding:0 10px!important;border-radius:6px!important;border:1px solid var(--ccG4)!important;background:var(--surf)!important;color:var(--ccG8)!important;font-size:12px!important;font-weight:500!important;line-height:1!important;align-items:center!important;justify-content:center!important;box-shadow:none!important;opacity:1!important}
html:root:root:root body .btn.btn.cc-wis9.cc-wis9.cc-wis9:not(:disabled):hover,html:root:root:root body label.btn.btn-primary.btn-sm[aria-label="Bankbestand inlezen"]:hover{background:var(--ccG1)!important;border-color:var(--ccG7)!important}
html:root:root:root body .btn.btn.cc-wis9.cc-wis9.cc-wis9:disabled{background:var(--ccG1)!important;border-color:var(--ccG3)!important;color:var(--ccG5)!important;cursor:default!important}
html:root:root:root[data-theme="dark"] body .btn.btn.cc-wis9.cc-wis9.cc-wis9,html:root:root:root[data-theme="dark"] body label.btn.btn-primary.btn-sm[aria-label="Bankbestand inlezen"]{border-color:#7d8086!important;background:#26282d!important;color:#e7e8ea!important}
html:root:root:root[data-theme="dark"] body .btn.btn.cc-wis9.cc-wis9.cc-wis9:disabled{background:var(--ccG1)!important;border-color:var(--ccG3)!important;color:var(--ccG5)!important}
/* P35 · „Verstuur e-mail” (Wachtwoord wijzigen) was zwart (.pr #343a40 in app.js) — Tabel K kent geen zwarte hoofdknop: groen = de hoofdknop */
html:root body button.pr{background:var(--ccKz9)!important;color:var(--ccKzT9)!important;border-color:var(--ccKz9)!important}
html:root body button.pr:not(:disabled):hover{background:var(--ccKzH9)!important;border-color:var(--ccKzH9)!important;filter:none!important}
/* P35 · „Koppelen of categoriseren” en „Akkoord — boek en haal uit de werklijst” stonden in de letter van de browser (13,33 px): de letter van de app, 13 px */
html:root body .io-icon-btn:is([title="Koppelen of categoriseren"],[title="Akkoord — boek en haal uit de werklijst"]){font-family:inherit!important;font-size:13px!important}
/* P41 · R47 (deel 27, 171e): „Privé afgewikkeld …” in Debiteuren/Crediteuren — een compacte knop van 28 */
html:root:root:root body .btn.btn.cc-prafw9.cc-prafw9.cc-prafw9{height:auto!important;min-height:calc(28px / var(--ccZm,1))!important;padding:0 10px!important;border-radius:6px!important;border:1px solid var(--ccG4)!important;background:var(--surf)!important;color:var(--ccG8)!important;font-size:12px!important;font-weight:500!important;line-height:1!important;align-items:center!important;box-shadow:none!important;white-space:nowrap!important}
html:root:root:root body .btn.btn.cc-prafw9.cc-prafw9.cc-prafw9:hover{background:var(--ccG1)!important;border-color:var(--ccG7)!important}
html:root:root:root[data-theme="dark"] body .btn.btn.cc-prafw9.cc-prafw9.cc-prafw9{border-color:#7d8086!important;background:#26282d!important;color:#e7e8ea!important}
/* 175e-r42-nowrap (r366 deel 35, Opus 175e) R42: vanaf 721 px breken datum, nummer, dagen en factuurbedrag in Openstaande verkoopfacturen niet meer (REGELS-Z36 R42 „Datums en nummers breken nooit”; de inkooplijst had het al). Gemeten 721–1023: de tabel past, de naam vangt de ruimte op. */
@media (min-width:721px){
  html:root:root body .modal table.cc-vast1:has(span[data-cc-na9=" dagen"]) td[data-cc-rol9="sub"]{white-space:nowrap!important}
}
/* 176e-v175 (r366 deel 36, Opus 176e) V175-1: [data-cc-scroll="krap"] = de compacte opmaak (hierboven, 162e) laat de tabel passen — dan schuift er niets en hoort er ook geen hint te staan (de hint-regel in index.html kent elke waarde van het attribuut). */
html:root:root body .modal [data-cc-scroll="krap"]::before{content:none!important;display:none!important}
/* 177e-r43 (r366 deel 37, Opus 177e) R43: de btw-lijsten zijn een tabel met rollen (data-cc-rol9) — op de telefoon de kaartregel van § V2. Het oogje (de PDF) staat daar op de eerste regel, direct na het btw-bedrag, in plaats van op een eigen derde regel. */
@media (max-width:720px){html:root:root body .modal table.cc-btwtab9 td[data-cc-rol9="actie"]{order:2!important;flex:0 0 auto!important;display:block!important;margin-left:2px!important}}
/* P37 · R18 (deel 30, 172e): Debiteurenbeheer en Openstaande inkoopfacturen — per regel één compacte knop (de volgende stap) + „⋯” met een menu (Afboeken rood) */
html:root:root:root body .cc-rmenu9{position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important;flex-wrap:nowrap!important;vertical-align:middle!important}
html:root:root:root body .cc-rmenu9>.btn.btn:is(.cc-rmenu9-hoofd,.cc-rmenu9-meer){height:auto!important;min-height:calc(28px / var(--ccZm,1))!important;padding:0 10px!important;margin:0!important;border-radius:6px!important;border:1px solid var(--ccG4)!important;background:var(--surf)!important;color:var(--ccG8)!important;font-size:12px!important;font-weight:500!important;line-height:1!important;display:inline-flex!important;align-items:center!important;box-shadow:none!important;white-space:nowrap!important}
html:root:root:root body .cc-rmenu9>.btn.btn.cc-rmenu9-meer.cc-rmenu9-meer{width:calc(28px / var(--ccZm,1))!important;min-width:calc(28px / var(--ccZm,1))!important;padding:0!important;justify-content:center!important;font-size:16px!important;font-weight:600!important;letter-spacing:0!important}
html:root:root:root body .cc-rmenu9>.btn.btn:is(.cc-rmenu9-hoofd,.cc-rmenu9-meer):hover:not(:disabled){background:var(--ccG1)!important;border-color:var(--ccG7)!important}
html:root:root:root body .cc-rmenu9>.btn.btn.cc-rmenu9-hoofd:disabled{opacity:1!important;color:var(--ccG5)!important;border-color:var(--ccG3)!important;cursor:default!important}
html:root:root:root[data-theme="dark"] body .cc-rmenu9>.btn.btn:is(.cc-rmenu9-hoofd,.cc-rmenu9-meer){border-color:#7d8086!important;background:#26282d!important;color:#e7e8ea!important}
html:root:root:root body .cc-rmenu9>.cc-rmenu9-menu{position:absolute!important;top:calc(100% + 4px)!important;right:0!important;left:auto!important;bottom:auto!important;min-width:200px!important;background:var(--surf)!important;border:1px solid var(--ccG3)!important;border-radius:8px!important;box-shadow:0 8px 24px rgba(17,17,17,.14)!important;padding:4px!important;z-index:60!important;display:flex!important;flex-direction:column!important;gap:2px!important;text-align:left!important}
html:root:root:root body .cc-rmenu9>.cc-rmenu9-menu[data-boven="1"]{top:auto!important;bottom:calc(100% + 4px)!important}
html:root:root:root body .cc-rmenu9-menu>.cc-rmenu9-item.cc-rmenu9-item{all:unset;box-sizing:border-box!important;display:block!important;position:relative!important;width:100%!important;padding:0 12px!important;min-height:32px!important;line-height:32px!important;border-radius:6px!important;font-size:13px!important;font-weight:500!important;color:var(--ccG8)!important;cursor:pointer!important;white-space:nowrap!important;text-align:left!important;background:transparent!important}
html:root:root:root body .cc-rmenu9-menu>.cc-rmenu9-item.cc-rmenu9-item:is(:hover,:focus){background:var(--ccG1)!important}
html:root:root:root body .cc-rmenu9-menu>.cc-rmenu9-item.cc-rmenu9-item:focus-visible{outline:2px solid #0369a1!important;outline-offset:-2px!important}
html:root:root:root body .cc-rmenu9-menu>.cc-rmenu9-item.cc-rmenu9-item[aria-disabled="true"]{color:var(--ccG5)!important;cursor:default!important}
html:root:root:root body .cc-rmenu9-menu>.cc-rmenu9-item.cc-rmenu9-item.cc-rood9{color:var(--txtred)!important;margin-top:5px!important}
html:root:root:root body .cc-rmenu9-menu>.cc-rmenu9-item.cc-rmenu9-item.cc-rood9::before{content:""!important;position:absolute!important;left:8px!important;right:8px!important;top:-4px!important;border-top:1px solid var(--ccG3)!important}
html:root:root:root[data-theme="dark"] body .cc-rmenu9>.cc-rmenu9-menu{background:#26282d!important;border-color:#3a3b40!important;box-shadow:0 8px 24px rgba(17,17,17,.5)!important}
html:root:root:root[data-theme="dark"] body .cc-rmenu9-menu>.cc-rmenu9-item.cc-rmenu9-item{color:#e7e8ea!important}
html:root:root:root[data-theme="dark"] body .cc-rmenu9-menu>.cc-rmenu9-item.cc-rmenu9-item:is(:hover,:focus){background:#3a3b40!important}
html:root:root:root[data-theme="dark"] body .cc-rmenu9-menu>.cc-rmenu9-item.cc-rmenu9-item[aria-disabled="true"]{color:#a1a3a7!important}
html:root:root:root[data-theme="dark"] body .cc-rmenu9-menu>.cc-rmenu9-item.cc-rmenu9-item.cc-rood9{color:var(--txtred)!important}
html:root:root:root[data-theme="dark"] body .cc-rmenu9-menu>.cc-rmenu9-item.cc-rmenu9-item.cc-rood9::before{border-top-color:#3a3b40!important}

/* ---------- P05 · Eén keuzegroep (segment): grijs vlak, de gekozen in klikbaar groen — overal waar je één uit 2–4 kiest ---------- */
html:root body .modal div:has(> .cc-seclink[aria-pressed]){box-shadow:inset 0 0 0 1px var(--ccG3)!important;display:inline-flex!important;gap:2px!important;padding:3px!important;border-radius:8px!important;background:var(--ccG2)!important;flex-wrap:nowrap!important;width:auto!important}
html:root body .modal :is(.cc-seclink[aria-pressed]){border:0!important;background:transparent!important;color:var(--ccG7)!important;border-radius:6px!important;
  min-height:calc(28px / var(--ccZm,1))!important;height:auto!important;padding:0 12px!important;font-size:13px!important;font-weight:500!important;box-shadow:none!important;margin:0!important}
html:root body .modal :is(.cc-seclink[aria-pressed="true"],.cc-seclink.sel){background:#166534!important;color:#fff!important;font-weight:600!important}
html:root[data-theme="dark"] body .modal div:has(> .cc-seclink[aria-pressed]){background:#26282d!important;box-shadow:inset 0 0 0 1px #3a3b40!important}
/* P05 · staan de knoppen tussen velden (de periode in het Grootboek), dan krijgen de knoppen zelf het grijze vlak, niet de hele balk (in de bouw: een eigen groep in app.js) */

html:root[data-theme="dark"] body .modal :is(.cc-seclink[aria-pressed]){color:#c9cacd!important}
html:root[data-theme="dark"] body .modal :is(.cc-seclink[aria-pressed="true"],.cc-seclink.sel){background:#22c55e!important;color:#0c120e!important}

/* ---------- P06 · Tabelkoppen in één stijl: gewone letters, 12/500, grijs ---------- */
html:root body .modal :is(.cc-fl9-kbtn,.cc-fl9-kop .cc-fl9-kbtn),html:root body .modal table:not(.cc-bt) th,html:root body .modal table:not(.cc-bt) th button{
  text-transform:none!important;letter-spacing:normal!important;font-size:12px!important;font-weight:500!important;color:var(--ccG6)!important}

/* ---------- P07 · De venstervoet volgens REGELS-Z29 § KN — de volgorde zet proef-z36.js (data-z36-voet); een lege voet verdwijnt ---------- */
html:root body .modal .modal-foot > div:has(> button){display:contents!important}


/* ---------- P08 · Titels breken nooit midden in een woord; een keuzelijst in de kop gaat op de telefoon onder de titel ---------- */
html:root body .modal :is(.modal-title,.card-title){overflow-wrap:normal!important;word-break:normal!important}
html:root body .modal .st-badge{white-space:nowrap!important;overflow-wrap:normal!important;word-break:keep-all!important}
@media (max-width:720px){
  html:root body .modal .modal-hdr{flex-wrap:wrap!important;row-gap:8px!important}
  html:root body .modal .modal-hdr .modal-title{flex:1 1 0!important;min-width:0!important}
  html:root body .modal .modal-hdr > select{order:3!important;flex:1 0 100%!important;margin:0!important;max-width:none!important;width:100%!important}
  html:root body .modal .modal-hdr > .cc-werkst9{order:3!important;margin:0 0 0 44px!important;flex:0 0 auto!important}
  html:root body .modal .modal-hdr:has(> .cc-werkst9)::after{content:"";order:2;flex:1 0 100%;height:0}
  html:root body .modal .modal-hdr > :is(.cc-msluit9,.modal-close){order:2!important;margin-left:auto!important}
}

/* G12 · ook op de hub breekt een woord nooit midden in een woord (het balans- en resultaatvlak: „Ondernemingsvermoge / n” op 1024–1079) */
html:root body .cc-bento :is(td,th,.cc-hl-i,.cc-h3){overflow-wrap:normal!important;word-break:normal!important}

/* ---------- P09 · Niets onder het kruisje: de titelrij van de kaartvensters houdt rechts plaats vrij ---------- */
html:root body .modal.cc-scherm > .card > div:first-child,html:root body .modal.cc-scherm > .modal-hdr,html:root body .modal.cc-scherm > div:not(.modal-close) > .modal-hdr:first-child{padding-right:48px!important;box-sizing:border-box}
html:root body .modal.cc-scherm > .card > div:first-child > div > div:first-child{justify-content:flex-start!important}
html:root body .modal.cc-scherm .card-title ~ .cc-werkst9{margin-left:0!important}

/* ---------- P10 · De hub Boekhouding in het ritme van de andere hubs: boekjaar en „afsluiten ›” op één rij, de links er direct onder ---------- */
html:root body .cc-bento .cc-boekh-btns{justify-content:flex-start!important;gap:20px!important}
html:root body .cc-bento .cc-bjwrap9{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important}
html:root body .cc-bento .cc-bjst9{height:auto!important;max-height:calc(28px / var(--ccZm,1))!important;min-height:calc(24.2px / var(--ccZm,1))!important;align-self:center!important;flex:0 0 auto!important;width:auto!important}
html:root body .cc-bento .cc-boekh-btns .cc-hl{margin-top:0!important}

/* ---------- P11 · Lege lijst in een venster met meer inhoud: één rustige regel + de knop eronder (links) ---------- */
html:root body .modal .cc-leeg9{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:10px!important;text-align:left!important;padding:2px 0!important}
html:root body .modal .cc-leeg9 .btn.cc-leeg9-k{margin:0!important;align-self:flex-start!important;height:calc(36px / var(--ccZm,1))!important;min-height:calc(36px / var(--ccZm,1))!important;padding:0 14px!important;border-radius:6px!important;background:var(--surf)!important;border:1px solid var(--ccG4)!important;color:var(--ccG8)!important;font-size:13px!important;font-weight:500!important;box-shadow:none!important}
html:root body .modal .cc-leeg9 .btn.cc-leeg9-k:hover{background:var(--ccG1)!important;border-color:var(--ccG7)!important;color:var(--ccG8)!important}
html:root[data-theme="dark"] body .modal .cc-leeg9 .btn.cc-leeg9-k{background:#26282d!important;border-color:#7d8086!important;color:#e7e8ea!important}

/* ---------- P12 · Velden: tekst links, bedragen rechts (nu staan naam, IBAN, datum en e-mail rechts) ---------- */
html:root body .modal input.dep-input:is([type="text"],[type="email"],[type="search"],[type="date"],[type="month"],:not([type])){text-align:left!important}
html:root body .modal input.dep-input[type="month"]{min-width:170px!important}
html:root body .modal input.dep-input[type="date"]{min-width:calc(150px)!important}

/* ---------- P13 · Charlie in de familie van de vensters (W37) ---------- */
/* één merk in de kop: het C-rondje staat op de plek van het icoonblokje (geen tweede, algemeen blad-icoon) */
html:root body .modal-overlay .modal:has(.cb-avatar) .modal-title::before{display:none!important}
html:root body .modal .cb-avatar{width:32px!important;height:32px!important;min-width:32px!important;font-size:19px!important;font-weight:700!important;border-radius:50%!important}/* r366 (170e): de C als grote tekst (≥ 18,66 px vet) — wit op #16a34a is 3,3 : 1 (s90 D-1, WCAG 1.4.3) */
/* berichten: Charlie rustig grijs, geen groene vlakken of randen (groen = klikbaar); jouw vraag rechts in g2 */
html:root body .cb-msg.b{background:var(--ccG1)!important;border:0!important;box-shadow:none!important;color:var(--ccG8)!important}
html:root body .cb-msg:not(.b){background:var(--ccG2)!important;border:0!important;box-shadow:none!important;color:var(--ccG8)!important}
/* taken = zwevende kaartjes (zoals de zwevende regels), de stip alleen bij een verstreken termijn */
html:root body .cb-msg.b.cb-taak{background:var(--surf)!important;box-shadow:0 0 0 1px rgba(17,17,17,.03),0 1px 2px rgba(17,17,17,.06),0 8px 16px -12px rgba(17,17,17,.22)!important}
html:root[data-theme="dark"] body .cb-msg.b{background:#26282d!important}
html:root[data-theme="dark"] body .cb-msg:not(.b){background:#3a3b40!important}
html:root[data-theme="dark"] body .cb-msg.b.cb-taak{background:#1e2024!important;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 16px -12px rgba(17,17,17,.6)!important}
/* de bladeraar: „‹ 1 van 20 ›” zonder twintig stippen */
html:root body .cb-tkdots{display:none!important}
/* versturen = de ene groene hoofdknop van dit venster (zo veel klassen als de Z34-regel `.modal-overlay .modal .modal-body .btn.btn` — anders wint die in de bouw; de nagebootste bouw vond het) */
html:root body .modal-overlay .modal .cb-inrow .btn.btn.btn{background:#166534!important;border-color:#166534!important;color:#fff!important;height:40px!important;min-height:40px!important;border-radius:6px!important;font-size:14px!important;font-weight:600!important;padding:0 16px!important}
html:root[data-theme="dark"] body .modal-overlay .modal .cb-inrow .btn.btn.btn{background:#22c55e!important;border-color:#22c55e!important;color:#0c120e!important}
html:root body .modal-overlay .modal .cb-inrow .cb-in.cb-in{height:40px!important;border-radius:6px!important}
/* de AI-zin rustig en links, één blok */
html:root body .cb-disc{font-size:12px!important;line-height:1.5!important;color:var(--ccG6)!important;text-align:left!important}

/* ---------- P14 · De teller op Charlies bol in de kleur van „werk” (amber), niet zwart ---------- */
html:root body .cc-chef-fab .cc-chef-badge{background:#fdf3e1!important;color:#8f5500!important;box-shadow:0 0 0 2px var(--surf)!important;font-weight:600!important}
html:root[data-theme="dark"] body .cc-chef-fab .cc-chef-badge{background:#2e2821!important;color:#f0b45a!important;box-shadow:0 0 0 2px #141519!important}

/* ---------- P15 · De melding: „Ongedaan maken” is een klikdoel van 24 px ---------- */
html:root body :is(.cc-h9-melding,[class*="cc-h9-melding"]) :is(a,button){min-height:calc(24.2px / var(--ccZm,1))!important;display:inline-flex!important;align-items:center!important}

/* ---------- P16 · De afsluitwizard: de stap zonder „(deze stap)”, „‹ Vorige” links van „Volgende ›” ---------- */

/* ---------- P17 · Het abonnement: de voetnoot links en rustig ---------- */
html:root body .modal [class*="abo"] p,html:root body .modal .cc-abo-noot9{text-align:left!important}

/* ---------- P21 · Titels zonder streepjes: de uitleg na de streep wordt een ondertitel (grijs, 13) ---------- */

/* ---------- P25 · Symmetrie: onder de blokken dezelfde grijze ruimte als erboven (Sam S4 — 160e bouwt het in v1.88.0; hier alleen zodat de meter het vasthoudt) ---------- */

/* ---------- P26 · Een venstertitel krijgt alleen een focusring met het toetsenbord, niet na een muisklik ---------- */
html:root body .modal :is(.modal-title,.card-title):focus:not(:focus-visible),html:root.cc-muis9 body .modal :is(.modal-title,.card-title):focus{outline:none!important;box-shadow:none!important}

@media (max-width:720px){
  html:root body .cb-chips{flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#111111 82%,transparent);mask-image:linear-gradient(to right,#111111 82%,transparent);padding-right:24px!important}
}
/* P17 · de voetnoot van het abonnement links, in de toelichting-maat */
html:root body .modal .cc-z35-klein{text-align:left!important;font-size:12px!important}

/* ==== var-scrim.css ==== */
/* variant kaart Z36-3 (1): de achtergrond achter een venster rustiger (sterker gedimd), licht .36 · donker .62 */
html:root body .modal-overlay.cc-cardmodal,html:root body .modal-overlay{background:rgba(17,17,17,.36)!important}
html:root[data-theme="dark"] body .modal-overlay.cc-cardmodal,html:root[data-theme="dark"] body .modal-overlay{background:rgba(17,17,17,.62)!important}

/* ==== var-ico.css ==== */
/* variant kaart Z36-3 (2): het icoonblokje van een venster = het icoon van zijn hub, in merkgroen zacht (tabel K) */
html:root body .modal-overlay .modal .modal-title[data-z36-hub]::before{background:var(--z36-ico-l) center/18px 18px no-repeat,#e8f3ec!important}
html:root[data-theme="dark"] body .modal-overlay .modal .modal-title[data-z36-hub]::before{background:var(--z36-ico-d) center/18px 18px no-repeat,rgba(34,197,94,.12)!important}

/* ==== var-kort-streep.css ==== */
/* variant kaart Z36-3 (3) A: een korte vraag krijgt het kader van elk venster — de merkstreep 4 px en de titel 18/600 */
html:root body [data-cc-modal] > div,html:root body [data-cc-modal] .cc-bev9{background:linear-gradient(#16a34a,#16a34a) top/100% calc(4px / var(--ccZm,1)) no-repeat border-box,var(--surf)!important;border-top:0!important}
html:root[data-theme="dark"] body [data-cc-modal] > div{background:linear-gradient(#22c55e,#22c55e) top/100% calc(4px / var(--ccZm,1)) no-repeat border-box,#1e2024!important}
html:root body [data-cc-modal] :is(.cc-weg9-titel,[class$="-titel"]){font-size:18px!important;font-weight:600!important;line-height:1.3!important}

/* ==== dbk-grijs.css ==== */
/* Z36-1b vraag 3 · A: overal grijs (Z34) — het kleine rondje in de uploadtag één stap donkerder dan de tag, zodat het zichtbaar blijft */
html:root:root body .cc-dbk9{background:#e4e4e0!important;color:#45453f!important}
html:root:root[data-theme="dark"] body .cc-dbk9{background:#3a3b40!important;color:#c9cacd!important}

/* ==== tag-zwart2.css ==== */
/* Sams idee, versie 2 (11.2x): de uploadtag zwart met witte letters, met daarin het lichte (grijze) dagboekrondje zoals in de lijsten — donker omgekeerd */
html:root:root body .upload-tag{background:#111111!important;color:#ffffff!important}
html:root:root body .upload-tag .cc-dbk9{background:#efefec!important;color:#45453f!important}
html:root:root[data-theme="dark"] body .upload-tag{background:#e7e8ea!important;color:#111111!important}
html:root:root[data-theme="dark"] body .upload-tag .cc-dbk9{background:#3a3b40!important;color:#c9cacd!important}

/* ==== charlie-amber-a.css ==== */
/* Z36-4b · A: de teller boven de taken in de amberen pil (zoals op de bol en „100 te verwerken ›”) + een smalle amberen streep links aan elke taakkaart */
html:root:root body .modal .cb-tktel{background:#fdf3e1!important;color:#8f5500!important;border-color:transparent!important;font-weight:600!important;border-radius:999px!important;padding:2px 9px!important}
html:root:root body .cb-msg.b.cb-taak{box-shadow:inset 3px 0 0 #c98a1e,0 0 0 1px rgba(17,17,17,.03),0 1px 2px rgba(17,17,17,.06),0 8px 16px -12px rgba(17,17,17,.22)!important}
html:root:root[data-theme="dark"] body .modal .cb-tktel{background:#2e2821!important;color:#f0b45a!important}
html:root:root[data-theme="dark"] body .cb-msg.b.cb-taak{box-shadow:inset 3px 0 0 #f0b45a,0 0 0 1px rgba(255,255,255,.08),0 8px 16px -12px rgba(17,17,17,.6)!important}

/* ==== rond-midden.css ==== */
/* Z36 · de letter in het rondje (Sam 11.3x: „de V, I en B staan niet netjes in het midden … in het hele systeem rechttrekken”)
   Oorzaak (gemeten): de app staat vanaf 721 px op zoom .945. Chromium rondt dan de stijg- en daalhoogte van de letter
   elk apart af en rondt de halve regelafstand naar beneden: de basislijn schuift ± 1 px omhoog. Gemiddeld −0,8 tot −1,0 px
   (te hoog), in elk rondje dat met flex + line-height centreert.
   Regel: het rondje centreert de HOOFDLETTERHOOGTE, niet de regel — text-box: trim-both cap alphabetic (letters en cijfers;
   Inter: hoofdletters en cijfers lopen van 0 tot 0,728 em, het midden is precies cap/2). Tekens (× ‹ › ★ en de info-i): teken.css.
   Geen duwtjes per maat. Browsers zonder text-box (Firefox) houden de huidige centrering.
   PROEF: dit bestand moet display overschrijven en mag daarbij niets zichtbaar maken dat de app verbergt — vandaar de
   uitzonderingen (verborgen info-knopjes op het beginscherm, het kruisje van het btw-venster, de bol achter een venster op
   de telefoon, inline display:none). In de bouw verandert alleen de eigen regel van elke klasse; dan zijn die niet nodig. */
@supports (text-box: trim-both cap alphabetic) {
  html:root:root body :is(.cc-dbk9, .scan-icon.cc-fl9-ico, .profile-btn-lg, .cb-avatar,
      .cc-chef-badge, .bd-flow-num, .cc-wiz9-nr, .cc-wizst9):not(:has(svg, img)):not([hidden]):not([style*="display: none"]):not([style*="display:none"]),
  html:root:root body:not(:has(.modal-overlay)) .cc-chef-fab:not(:has(svg, img)):not([hidden]):not([style*="display: none"]) {
    display: inline-block !important; text-align: center !important; align-content: center !important;
    line-height: 1 !important; padding-top: 0 !important; padding-bottom: 0 !important;
    text-box: trim-both cap alphabetic !important;
  }
  @media (min-width: 722px) {
    html:root:root body .cc-chef-fab:not(:has(svg, img)):not([hidden]):not([style*="display: none"]) {
      display: inline-block !important; text-align: center !important; align-content: center !important;
      line-height: 1 !important; padding-top: 0 !important; padding-bottom: 0 !important;
      text-box: trim-both cap alphabetic !important;
    }
  }
}

/* ==== teken.css ==== */
/* Z36 · tekens in een rondje worden een tekening (× ‹ › ★ en de info-i)
   Een teken is geen letter: het × staat op de wiskunde-as (0,29 em), ‹ › op 0,30 em, de ★ komt niet eens uit Inter
   (de computer kiest zelf een letter, op elke Mac/pc anders) en de info-i is schuin, zodat hij 1 px rechts van het
   midden staat. Gemeten: het kruisje stond in Charlie 1,1 px te laag en op de telefoon overal 0,9 px te laag; de
   letterregel (cap/ex) haalt het niet, want het pixelraster gooit het per venster ± 1 px heen en weer.
   Een tekening (svg-masker op ::before, kleur = currentColor) staat in het midden van de VORM, overal gelijk. Maten
   gelijk aan de inkt van het teken van nu; vakken met even maten, zodat ze op de telefoon op hele pixels vallen.
   De tekst blijft in de knop (font-size 0): de naam voor de schermlezer verandert niet.
   PROEF: de uitzonderingen zijn er om niets zichtbaar te maken dat de app verbergt (info-knopjes op het beginscherm,
   het kruisje van het btw-venster, inline display:none). */
html:root:root body .modal-close:not(.cc-mterug9):not(:has(svg, img)):not([hidden]):not([style*="display: none"]):not([style*="display:none"]):not(.cc-btw > .modal > .modal-close),
html:root:root body .cb-tkknoppen > button:is([aria-label="Vorige taak"], [aria-label="Volgende taak"]):not(:has(svg, img)),
html:root:root body .kb-info:not(:has(svg, img)):not([hidden]):not([style*="display: none"]):not([style*="display:none"]):not(.cc-hub .kb-info) {
  font-size: 0 !important; line-height: 0 !important; display: inline-flex !important; align-items: center !important;
  justify-content: center !important; padding: 0 !important; gap: 0 !important;
}
html:root:root body .modal-close:not(.cc-mterug9):not(:has(svg, img)):not([hidden]):not([style*="display: none"]):not([style*="display:none"]):not(.cc-btw > .modal > .modal-close)::before,
html:root:root body .cb-tkknoppen > button:is([aria-label="Vorige taak"], [aria-label="Volgende taak"]):not(:has(svg, img))::before,
html:root:root body .kb-info:not(:has(svg, img)):not([hidden]):not([style*="display: none"]):not([style*="display:none"]):not(.cc-hub .kb-info)::before {
  content: "" !important; display: block !important; flex: none !important; background-color: currentColor !important;
  -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important; mask-position: center !important;
  -webkit-mask-size: 100% 100% !important; mask-size: 100% 100% !important;
}
/* × — sluiten: inkt 8 × 8 px, lijn 1,25 (zoals het ×-teken van Inter op 18 px) */
html:root:root body .modal-close:not(.cc-mterug9):not(:has(svg, img)):not([hidden]):not([style*="display: none"]):not([style*="display:none"]):not(.cc-btw > .modal > .modal-close)::before {
  width: 8px !important; height: 8px !important; 
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M.45.45l7.1 7.1M7.55.45.45 7.55' stroke='black' stroke-width='1.25' fill='none'/></svg>") !important;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M.45.45l7.1 7.1M7.55.45.45 7.55' stroke='black' stroke-width='1.25' fill='none'/></svg>") !important;
}
/* ‹ › — vorige/volgende taak in Charlie: inkt 5 × 8,3 px, lijn 1,35 */
html:root:root body .cb-tkknoppen > button[aria-label="Vorige taak"]:not(:has(svg, img))::before {
  width: 6px !important; height: 10px !important; 
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'><path d='M5.1.85.9 5l4.2 4.15' stroke='black' stroke-width='1.35' fill='none' stroke-linejoin='round' stroke-linecap='round'/></svg>") !important;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'><path d='M5.1.85.9 5l4.2 4.15' stroke='black' stroke-width='1.35' fill='none' stroke-linejoin='round' stroke-linecap='round'/></svg>") !important;
}
html:root:root body .cb-tkknoppen > button[aria-label="Volgende taak"]:not(:has(svg, img))::before {
  width: 6px !important; height: 10px !important; 
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'><path d='M.9.85 5.1 5 .9 9.15' stroke='black' stroke-width='1.35' fill='none' stroke-linejoin='round' stroke-linecap='round'/></svg>") !important;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'><path d='M.9.85 5.1 5 .9 9.15' stroke='black' stroke-width='1.35' fill='none' stroke-linejoin='round' stroke-linecap='round'/></svg>") !important;
}
/* i — uitleg: rechtop (de schuine i stond 1 px rechts), stip + steel, 4 × 9 px */
html:root:root body .kb-info:not([aria-label="Geleerde regels"]):not(:has(svg, img)):not([hidden]):not([style*="display: none"]):not([style*="display:none"]):not(.cc-hub .kb-info)::before {
  width: 4px !important; height: 9px !important; 
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 9'><circle cx='2' cy='1.1' r='.9'/><rect x='1.4' y='2.8' width='1.2' height='5.95' rx='.15'/></svg>") !important;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 9'><circle cx='2' cy='1.1' r='.9'/><rect x='1.4' y='2.8' width='1.2' height='5.95' rx='.15'/></svg>") !important;
}
/* ★ — geleerde regels: gevuld, 10 px (inkt 8,3 × 7,9 zoals de ster van nu) */
html:root:root body .kb-info[aria-label="Geleerde regels"]:not(:has(svg, img)):not([hidden]):not([style*="display: none"]):not([style*="display:none"]):not(.cc-hub .kb-info)::before {
  width: 10px !important; height: 10px !important; 
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12.00 2.50 L14.53 9.52 L21.99 9.76 L16.09 14.33 L18.17 21.50 L12.00 17.30 L5.83 21.50 L7.91 14.33 L2.01 9.76 L9.47 9.52Z'/></svg>") !important;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12.00 2.50 L14.53 9.52 L21.99 9.76 L16.09 14.33 L18.17 21.50 L12.00 17.30 L5.83 21.50 L7.91 14.33 L2.01 9.76 L9.47 9.52Z'/></svg>") !important;
}

/* ==== plan-naam-kaart.css ==== */
/* R69 · Z36-8 B (Sam, wo 7 okt 2026 15.08 — zijn eigen idee W40m 15.00): het keuzerondje op de kaartpil. Op de abonnementskaarten (de kop van de kaart, niet in een zin):
   het witte rondje (de ring van de app: #8d8d87 licht 3,3 : 1 · #a1a3a7 donker) = niet gekozen / niet actief; de groene stip (cc-z35-aan) = gekozen (landing, betaalmuur) of actief (jouw abonnement).
   Elders blijft R62: geen teken = alleen de naam (ook „Alles uit START” in een zin) · groene stip = jouw abonnement · slotje = op slot. Vervangt plan-naam.css (Z36-6b) in de bundel. */
html:root:root body .cc-plan-tag:not(.cc-z35-aan):not(.cc-dim):not(.cc-locked .cc-plan-tag)::before{display:none!important}
html:root:root body .cc-z35-kaart .cc-plan-tag.cc-abonaam9:not(.cc-abonaam-inline9):not(.cc-z35-aan)::before{display:inline-block!important}

/* ==== slot-c.css ==== */
/* Z36-6 vraag 1 · C: het slotje in de pil, op de plek van de open stip (de plannaam blijft) */
html:root:root body :is(.cc-plan-tag.cc-dim,.cc-locked .cc-plan-tag)::before{border:0!important;box-shadow:none!important;background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b66' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/10px 10px no-repeat!important;width:10px!important;height:10px!important;border-radius:0!important}
html:root:root[data-theme="dark"] body :is(.cc-plan-tag.cc-dim,.cc-locked .cc-plan-tag)::before{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a3a7' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E")!important}

/* ==== staaf-r70.css ==== */
/* R70 · W40n (Sam wo 7 okt 2026 15.12): het kerngetal ZONDER staafjes, en de smal-ladder opnieuw gemeten (staaf/kpi-scan.js: 300–1920 px per 10, de drempels exact;
   START/MAX · kort/lang/negatief/leeg). Het bedrag is nu overal 18 px; alleen een lang bedrag en het label krijgen op de smalste tablet (721–799, waar alle blokken al
   de binnenrand 18 hebben) één stap kleiner; „Inkoopfacturen en bonnen” wordt alleen nog op 721–849 „Inkoopfacturen”. Op één lijn (160e-5) met nieuwe maten.
   In de bouw (161e): de staafjes uit app.js (__staaf9, J6/J7) en alle .cc-staaf9-regels en de oude ladderstappen uit cc-layout.css; hier (proef) overschreven. */
html:root:root body .cc-bento .cc-hub-corner .ccc-v{font-size:18px!important}
html:root:root body .cc-bento[data-kern9="lang"] .cc-hub-corner .ccc-v{font-size:16px!important}
html:root:root body .cc-bento .cc-hl-rest9{display:inline!important}
@media (min-width:721px) and (max-width:799.9px){
  html:root:root body .cc-bento[data-kern9="lang"] .cc-hub-corner .ccc-v{font-size:13px!important}
  html:root:root body .cc-bento .cc-hub-corner .ccc-l{font-size:11px!important}
}
@media (min-width:721px) and (max-width:849.9px){
  html:root:root body .cc-bento .cc-hl-rest9{display:none!important}
}
/* op één lijn: de basislijn van het bedrag = die van de onderste link, het label op die van de bovenste (gemeten, staaf/offsets.py) */
html:root:root body .cc-bento>.cc-hub>.cc-hub-corner{--kpi-b:28px;--kpi-l:7.3px}
html:root:root body .cc-bento[data-kern9="lang"]>.cc-hub>.cc-hub-corner{--kpi-b:29.2px;--kpi-l:8.4px}
@media (max-width:720px){
  html:root:root body .cc-bento>.cc-hub>.cc-hub-corner{--kpi-b:27.9px;--kpi-l:7.5px}
  html:root:root body .cc-bento[data-kern9="lang"]>.cc-hub>.cc-hub-corner{--kpi-b:29.2px;--kpi-l:8.5px}
}
@media (min-width:721px) and (max-width:799.9px){
  html:root:root body .cc-bento>.cc-hub>.cc-hub-corner{--kpi-b:22.1px;--kpi-l:7.4px}
  html:root:root body .cc-bento[data-kern9="lang"]>.cc-hub>.cc-hub-corner{--kpi-b:23.5px;--kpi-l:11.8px}
}

/* ==== lees-balk.css ==== */
/* R71 · W40o/W40p (Sam wo 7 okt 2026 15.47 + 15.51 „Bouw maar in hoor!”): de laadbalk in het uploadvak tijdens het inlezen — Verkoop · Inkoop · Bank.
   In het vak, op de plek van „Sleep of klik om te uploaden”: links het label (VERKOOP/INKOOP/BANK, zoals nu), dan „Inlezen · 3 van 12” (smal, waar het vak „Bestand kiezen…”
   toont: „3 van 12” — dezelfde drempels, W24), rechts „25 %”; langs de onderrand een balk van 3 px (spoor g2, vulling het klikbare groen #166534 / donker #22c55e — de kleur van
   een vinkje of keuzerondje, M35). Eén bestand: „Factuur uitlezen…” (zoals nu) met een lopende balk, zonder %. Het vak blijft even hoog en op één regel. Daarna de uitslag zoals nu. */
html:root:root body .cc-bento .upload-mini.z36-lees-aan{position:relative!important}
html:root:root body .cc-bento .upload-mini.z36-lees-aan>.upload-mini-txt,
html:root:root body .cc-bento .upload-mini.z36-lees-aan>.cc-upuit9{display:none!important}
/* tijdens het inlezen is het vak geen „sleep hierheen” meer maar een stand: het pijltje (::before) gaat weg — dat geeft de ruimte voor „140 van 140 · 100 %” op de smalste tablet */
html:root:root body .cc-bento .upload-mini.z36-lees-aan::before{display:none!important}
html:root:root body .cc-bento .upload-mini .z36-lees{display:inline-flex!important;align-items:baseline!important;gap:8px!important;min-width:0!important;white-space:nowrap!important;font-size:13px!important;color:var(--ccG7)!important}
html:root:root body .cc-bento .upload-mini .z36-lees-p{font-variant-numeric:tabular-nums!important;font-weight:600!important;color:var(--ccG8)!important}
html:root:root body .cc-bento .upload-mini .z36-lees-balk{position:absolute!important;left:12px!important;right:12px!important;bottom:5px!important;height:3px!important;border-radius:2px!important;background:var(--ccG2)!important;overflow:hidden!important;display:block!important}
html:root:root body .cc-bento .upload-mini .z36-lees-vul{display:block!important;height:100%!important;border-radius:2px!important;background:#166534!important;transition:width .3s ease!important}
html:root:root[data-theme="dark"] body .cc-bento .upload-mini .z36-lees-vul{background:#22c55e!important}
html:root:root body .cc-bento .upload-mini .z36-lees-loop .z36-lees-vul{width:30%!important;animation:z36lees 1.2s ease-in-out infinite!important}
@keyframes z36lees{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
@media (prefers-reduced-motion:reduce){
  html:root:root body .cc-bento .upload-mini .z36-lees-loop .z36-lees-vul{animation:none!important;width:100%!important;opacity:.35!important}
  html:root:root body .cc-bento .upload-mini .z36-lees-vul{transition:none!important}
}
/* ===== 179e-r367-d1 (r367 deel 1, Opus 179e) — W19 (Sam, zo 11 okt 2026): één scrollvlak per venster. Transactie koppelen had op een laag
   laptopscherm (1440 × 780) twee scrollvlakken in elkaar: de lijst met facturen (een vast vak van 220 px) in een body die er 115 px omheen scrolde
   (56 px daarvan de ruimte voor de bol van Charlie, § A4 — die ligt bij een kaartvenster altijd buiten het venster). Nu vult de lijst de ruimte die er
   is en scrolt alleen de lijst; de rest staat stil (1440 × 780 161 px · × 1000 394 px). Vanaf vier kandidaten is drie regels (140 px) de ondergrens;
   lager dan ± 760 px schuift het midden dan eerst een stukje mee, zoals voorheen. De telefoon (≤ 720) blijft. Toets: s148 ===== */
@media (min-width:721px) and (min-height:501px){
  html body .modal-overlay.cc-cardmodal>.modal>.modal-body:has(>.cc-bm9-lijst){padding-bottom:0!important}
  html body .modal-overlay.cc-cardmodal>.modal>.modal-body>.cc-bm9-lijst{flex:0 1 auto!important;max-height:none!important}
  html body .modal-overlay.cc-cardmodal>.modal>.modal-body>.cc-bm9-lijst:has(>:nth-child(4)){min-height:140px!important}
}
/* ===== 179e-r367-d2 (r367 deel 2, Opus 179e) — V-Z37-1 (Fable Z37, zo 11 okt 2026; REGELS-Z37 R78): geen keuzerondje in de pil midden in een zin op de
   landing („Alles uit START” op de PRO-kaart, „Alles uit PRO” op MAX) — R62/R69: in een zin geen teken. De pil bovenaan elke kaart houdt zijn rondje. Toets: s149 ===== */
html:root:root body #cc-landing .cc-abonaam9.cc-abonaam-inline9::before{display:none!important}
/* ===== 179e-r367-d3 (r367 deel 3, Opus 179e) — T26-4 (kaart 179e-2 = A, Sam zo 11 okt 13.15): de C van Charlie (de bol en de avatar in zijn venster) op het
   scherm 19 px vet = grote tekst (WCAG 1.4.3: 3 : 1 — wit op #16a34a is 3,3 : 1). Op ≥ 721 px staat :root op zoom .945: 19 CSS px werd 17,95 px. Zelfde kleur;
   de telefoon (--ccZm 1) verandert niet. Toets: s150 ===== */
html:root body .cc-chef-fab,html:root body .modal .cb-avatar{font-size:calc(19px / var(--ccZm,1))!important}
/* ===== 181e-r368-d1 (r368 deel 1, Opus 181e, wo 14 okt 2026) — REGELS-Z37 R79 (Fable Z37; kaart Z37-1 vraag 1 = A, dicht): de vergelijkingstabel onder de
   kaarten, dicht achter de ghost-knop „Vergelijk alle functies per abonnement” (<details id="vergelijk">); „en meer ›” opent hem (de bridge). Uit
   z37-landing/gereedschap/z37-proef.css (§ 5 + de details-regels), zonder de regels voor de gekozen kaart (R64: komt met de bouw van Z37). Toets: s151 ===== */
#cc-landing .ld-sr{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
#cc-landing .ld-vgl9{width:100%;border-collapse:separate;border-spacing:0;background:var(--surf,#fff);border-radius:14px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(17,17,17,.06),0 1px 2px rgba(17,17,17,.06);font-size:13.5px;line-height:1.45}
#cc-landing .ld-vgl9 th,#cc-landing .ld-vgl9 td{padding:9px 14px;border-bottom:1px solid #efefec;text-align:left;vertical-align:middle;font-weight:400;color:var(--txt,#111)}
#cc-landing .ld-vgl9 thead td,#cc-landing .ld-vgl9 thead th{padding-top:14px;padding-bottom:12px;border-bottom:1px solid #e4e4e0}
#cc-landing .ld-vgl9 .k1,#cc-landing .ld-vgl9 .k2,#cc-landing .ld-vgl9 .k3{width:150px;text-align:center}
#cc-landing .ld-vgl9 thead .cc-abonaam9{margin:0 auto}
#cc-landing .ld-vgl9-prijs{display:block;margin-top:6px;font-size:14px;font-weight:700}
#cc-landing .ld-vgl9-prijs::after{content:"per maand, excl. btw";display:block;font-size:11px;font-weight:500;color:#6b6b66;margin-top:1px}
#cc-landing .ld-vgl9-groep th{background:#f6f6f4;font-size:12px;font-weight:700;color:#45453f;padding-top:11px;padding-bottom:7px}
#cc-landing .ld-vgl9-toel{display:block;font-size:12px;color:#6b6b66;margin-top:1px}
#cc-landing .ld-vgl9-ja{color:#6b6b66;font-size:15px;font-weight:700}
#cc-landing .ld-vgl9-nee{color:#b8b8b2}
#cc-landing .ld-vgl9-tekst{font-size:12px}
#cc-landing .ld-vgl9-voet{font-size:12px;color:#6b6b66}
html[data-theme="dark"] #cc-landing .ld-vgl9{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
html[data-theme="dark"] #cc-landing .ld-vgl9 th,html[data-theme="dark"] #cc-landing .ld-vgl9 td{border-bottom-color:#2e3036}
html[data-theme="dark"] #cc-landing .ld-vgl9-groep th{background:#26282d;color:#c9cacd}
html[data-theme="dark"] #cc-landing .ld-vgl9-toel,html[data-theme="dark"] #cc-landing .ld-vgl9-tekst,html[data-theme="dark"] #cc-landing .ld-vgl9-voet,html[data-theme="dark"] #cc-landing .ld-vgl9-ja,html[data-theme="dark"] #cc-landing .ld-vgl9-prijs::after{color:#a1a3a7}
html[data-theme="dark"] #cc-landing .ld-vgl9-nee{color:#5c5f66}
@media (max-width:760px){
  #cc-landing .ld-vgl9{font-size:12.5px}
  #cc-landing .ld-vgl9 th,#cc-landing .ld-vgl9 td{padding:8px 8px}
  #cc-landing .ld-vgl9 .k1,#cc-landing .ld-vgl9 .k2,#cc-landing .ld-vgl9 .k3{width:54px}
  #cc-landing .ld-vgl9 thead .cc-abonaam9{padding:0 6px!important;font-size:10.5px!important}
  #cc-landing .ld-vgl9 thead .cc-abonaam9::before{display:none!important}
  #cc-landing .ld-vgl9-prijs{font-size:12px}
  #cc-landing .ld-vgl9-prijs::after{content:"p/m"}
  #cc-landing .ld-vgl9-tekst{font-size:10.5px}
}
html:root body #cc-landing details.ld-vgl9-blok{background:transparent;border:0;padding:0;margin:14px auto 0;box-shadow:none;max-width:1080px;text-align:center;scroll-margin-top:20px}
@media (max-width:720px){html:root body #cc-landing details.ld-vgl9-blok{scroll-margin-top:84px}}/*na de sprong 20 px onder de bovenrand, op smal onder de vaste strook — zoals de koppen (r268-E)*/
#cc-landing details.ld-vgl9-blok > summary{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border:1px solid #b8b8b2;border-radius:6px;background:var(--surf,#fff);font-weight:600;font-size:14px;list-style:none;margin:0 auto}
#cc-landing details.ld-vgl9-blok > summary::-webkit-details-marker{display:none}
#cc-landing details.ld-vgl9-blok > summary::after{content:"›";transform:rotate(90deg);font-size:15px;line-height:1}
#cc-landing details.ld-vgl9-blok[open] > summary::after{transform:rotate(-90deg)}
#cc-landing details.ld-vgl9-blok > summary:focus-visible{outline:2px solid #0369a1;outline-offset:2px}
html[data-theme="dark"] #cc-landing details.ld-vgl9-blok > summary{background:#26282d;border-color:#7d8086;color:#e7e8ea}
#cc-landing details.ld-vgl9-blok .ld-vgl9-wrap{max-width:1080px;margin:14px auto 0;text-align:left}
#cc-landing details.ld-vgl9-blok .ld-vgl9-voet{max-width:1080px;margin:10px auto 0;text-align:left}
/* ===== 181e-r368-d1b (r368 deel 1b, Opus 181e) — de tabel ook op 360 en 375 zonder zijwaarts uitsteken (R79: „niets zijwaarts”; smal-ladder stap 1: de binnenruimte kleiner, geen tekst kleiner). Toets: s151 V6 ===== */
@media (max-width:400px){
  #cc-landing .ld-vgl9 th,#cc-landing .ld-vgl9 td{padding-left:4px;padding-right:4px}
  #cc-landing .ld-vgl9 tbody th[scope="row"]{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
}
/* ===== 186e-r369-w25 (r369, klaargezet door Opus 181e; Sam W25: de knop „PROBEER GRATIS” op de telefoon) — op een aanraakscherm zet r176a-4 de title als tweede regel ín de uitgeschakelde knop; de Z35-hoogte van 36 px sneed die af en de regel stond links. Nu groeit de knop mee en staat de regel in het midden. Alleen pointer:coarse + :disabled[title] ===== */
@media (pointer:coarse){
  html:root body #cc-landing .ld-card.ld-prijs .cc-abo-btn.ld-abo-knop9[title]:disabled{height:auto!important;min-height:36px!important;padding:7px 14px 8px!important;align-content:center!important}
  html:root body #cc-landing .ld-card.ld-prijs .cc-abo-btn.ld-abo-knop9[title]:disabled::after{text-align:center!important;margin-top:2px!important}
}
/* --- 162e · de smal-ladder (L75; REGELS-162e-smal v4, kaart 162e-1 = A · A · A, Sam wo 7 okt 09.56) — gebouwd door Opus 161e (r366) uit 162e-smalschouw/proef/proef-162e-alles.css
     (sha e780a07862f4): de klassen van de proef op <html> (s162 + k, l, t of b) zijn hier :root:root — even sterk. Het laatste deel ín het Z36-blok (Fable, POST-Z36-deel2-KLAAR punt 3). --- */
/* ===== 178e-r366-d50 (r366 deel 50, Opus 178e) — de smal-schouw van 162e op r366: twee A-vondsten en de rest volgens de smal-ladder (r366-gereedschap/deel50-178e.py) ===== */
/* S1 Administratiebeheer (≤ 720): de titel een eigen rij en de kop breekt niet (het kruisje rechtsboven) — Z36 P08 (titel 1 1 0, kop wrap) is voor een kop mét keuzelijst */
@media (max-width:720px){
  html:root:root body .cc-admbeheer-ov .modal .modal-hdr{flex-wrap:nowrap!important}
  html:root:root body .cc-admbeheer-ov .modal .modal-hdr .modal-title{flex:1 1 100%!important}
}
/* S2 Transactie koppelen (≤ 720): geen vulstuk naast de zin bij „Transactie verwijderen” — de zin krijgt de hele ruimte naast de knop */
@media (max-width:720px){
  html:root:root:root body .modal-overlay .modal .modal-foot:has(>.cc-del9+span)::after{display:none!important}
}
/* S4 (178e-r366-d51, r366 deel 51 — was een ondergrens van 158 px: die paste niet in de cel van de filterbalk en schoof het veld over „Datum vanaf”) de zoekhint „Zoek in de lijst…” (R59) past op 768–1099, waar de cel het smalst is (90–97 px voor 99,8): het zoekveld 12 px en rechts 8 — Sams smal-ladder stap 1 en 2 */
@media (min-width:768px) and (max-width:1099.9px){
  html:root:root:root body .modal-overlay .modal .filter-bar.cc-filt9>input.cc-filt9-altijd{font-size:12px!important;padding-right:8px!important}
}
/* S6 een leeg kaartje (≤ 320): de knop een tikkie kleiner, zodat hij niet zijwaarts uitsteekt („Boek een overlopende post (memoriaal)”) */
@media (max-width:320px){
  html:root:root:root body .modal-overlay .modal .cc-leeg9>.btn.btn{font-size:12px!important}
}
/* S7 Grootboekschema (721–800): de btw-aanduiding weer 11 px zoals de app hem tekent (de tabelregel van 162e maakte er 12 van), zodat het raster niet zijwaarts schuift */
@media (min-width:721px) and (max-width:800px){
  html:root:root:root body .modal-overlay .modal .cc-gbs9-raster td[data-cc-rol9="sub"]{font-size:11px!important}
}
/* S8 een voet met twee knoppen (≤ 310): geen vulstuk naast een hoofdknop die zelf al de rij vult (het vulstuk telde als derde ding: een tweede tussenruimte) — de beginbalans op 300 */
@media (max-width:310px){
  html:root:root:root body .modal-overlay .modal .modal-foot:has(>.cc-hoofd9)::after{display:none!important}
}
/* ===== 178e-r366-d50c (r366 deel 50c, Opus 178e) — M36 op 390: de terugknop „‹” in een vervolgvenster stond 0,96 px links en 0,59 px te laag (de padding van „‹ Naam”, terwijl de naam op ≤ 760 weg is) → op ≤ 760 een rondje zoals R51: 32 × 32, het pijltje als tekening (het masker van „Vorige taak” in Charlie) ===== */
@media (max-width:760px){
  html:root:root body .modal-overlay .modal .modal-close.cc-mterug9{font-size:0!important;line-height:0!important;padding:0!important;gap:0!important;width:32px!important;min-width:32px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
  html:root:root body .modal-overlay .modal .modal-close.cc-mterug9::before{content:""!important;display:block!important;flex:none!important;width:6px!important;height:10px!important;background-color:currentColor!important;-webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;-webkit-mask-position:center!important;mask-position:center!important;-webkit-mask-size:100% 100%!important;mask-size:100% 100%!important;-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'><path d='M5.1.85.9 5l4.2 4.15' stroke='black' stroke-width='1.35' fill='none' stroke-linejoin='round' stroke-linecap='round'/></svg>")!important;mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'><path d='M5.1.85.9 5l4.2 4.15' stroke='black' stroke-width='1.35' fill='none' stroke-linejoin='round' stroke-linecap='round'/></svg>")!important}
}
/* ===== 178e-r366-d52 (r366 deel 52, Opus 178e) — M50 (R70): in Verkoop stond het label van het kerngetal op 300 en 850–852 minder dan 8 px van „Verkoopfacturen en omzet” (7,2–7,8) → daar „Verkoopfacturen”, zoals R70 „Inkoopfacturen en bonnen” op 721–849 knipt ===== */
@media (max-width:302.9px){
  html:root:root:root body .cc-bento .cc-hl-i[title="Verkoopfacturen en omzet"] .cc-hl-rest9{display:none!important}
}
@media (min-width:850px) and (max-width:854.9px){
  html:root:root:root body .cc-bento .cc-hl-i[title="Verkoopfacturen en omzet"] .cc-hl-rest9{display:none!important}
}
/* ===== 178e-r366-d56 (r366 deel 56, Opus 178e) — R4/G12 + Sams smal-ladder: „Ondernemingsvermogen” (bij een bv „Vennootschapsbelasting”) in het
   balansvlak van de hub breekt sinds R4 niet meer middenin, maar liep op 300–350 uit zijn cel en op 300–322 over het bedrag (−22,4 px op 300). De ladder,
   alleen in dit vlak (gemeten met het lange bedrag van de smal-schouw, 1.889.072): (2) een tikkie kleiner — de cellen 12 px waar de naam op 13 px niet
   in zijn kolom past (binnen ≤ 237 = venster ≤ 353); (3) een onderdeel kleiner — binnen ≤ 220 (venster ≤ 336) de binnenrand 18 → 10 en de buitenste
   celrand 4 → 2 (de namen onder „Balans”); (2) nog een tikkie — binnen ≤ 200 (venster ≤ 316) 11 px. Grenzen in hele px (199.99px gold op 200 al:
   Chrome rondt af op 1/64 px). Gemeten 300–720: geen woordbreuk, ≥ 8 px tot het bedrag, niets steekt uit, niets schuift (s145 S12) ===== */
@container ccbf9 (max-width:237px){
  html:root .cc-bento .cc-boekh-bal table.cc-bt td{font-size:12px!important}
}
@container ccbf9 (max-width:220px){
  html:root .cc-bento .cc-boekh-bal .cc-bcols{margin-inline:-8px!important}
  html:root .cc-bento .cc-boekh-bal table.cc-bt tr>:first-child{padding-left:2px!important}
  html:root .cc-bento .cc-boekh-bal table.cc-bt tr>:last-child{padding-right:2px!important}
}
@container ccbf9 (max-width:200px){
  html:root .cc-bento .cc-boekh-bal table.cc-bt td{font-size:11px!important}
}
/* ===== 162e — de smal-ladder (L75) — G1 de venstertitel op de telefoon volgens Sams smal-ladder (in de proef een klasse op <html>; hier :root:root — even sterk) =====
   Nu (v1.87.0): titel 18/600 op elke breedte; ≤ 720 met het icoonblokje 28 en r170a `overflow-wrap:anywhere` → de titel breekt midden in een woord
   („Relat/iebe/heer”, „Te verwerken verkoopfactur/en”, de pil „Con/cept”); een keuzelijst in de kop (Relatiebeheer, Gekoppelde namen) drukt de titel tot 69–115 px.
   De ladder, per stap pas waar het nodig is:
   (1) ≤ 480: de titel 16 · (2) ≤ 400: de hele kop een tikkie kleiner — icoonblokje 24, tussenruimte 8 (het kruisje blijft rond 32: Z36 R14) · ≤ 360: titel 14 en de binnenrand van het venster 24 → 18 (v4: alleen maten van de Z33-schaal 11 · 12 · 13 · 14 · 16 · 18 · 22)
   (3) ≤ 340: de pil in de titel (aantal/status) 11 px · nooit midden in een woord of in een pil breken
   (4) wat dan nog niet op één regel past: de korte titel (kaart 162e-1 vraag 2; in de bouw app.js, hier korte-titels.js — alleen als de lange niet past).
   Plus (al besloten, geen nieuwe stap): de keuzelijst in de kop staat op de telefoon op een eigen regel — Z34 zet hem al op flex 1 1 100%; hier mag de kop daarvoor ook breken. */
@media (max-width:720px){
  html:root:root body .modal-overlay .modal :is(.modal-title,.modal-hdr) :is(.st-badge,.cc-aantal9,.cc-hubst9){white-space:nowrap!important;flex-shrink:0}
  html:root:root body .modal-overlay .modal .modal-hdr>select{order:3!important;flex:1 1 100%!important;width:100%!important;max-width:none!important;margin-left:0!important}
}
@media (max-width:480px){
  html:root:root body .modal-overlay .modal .modal-title{font-size:16px!important}   /* v4: de maten van Z33 (… 14 · 16 · 18 …), geen 17 */
}
@media (max-width:400px){
  html:root:root body .modal-overlay .modal .modal-title{gap:8px!important}
  html:root:root body .modal-overlay .modal .modal-title::before{flex-basis:24px!important;width:24px!important;height:24px!important;background-size:14px 14px,auto!important}
  html:root:root body .modal-overlay .modal .modal-hdr{gap:8px!important}
}
@media (max-width:360px){
  html:root:root body .modal-overlay .modal .modal-title{font-size:14px!important}   /* v4: 14 (Z33-schaal), geen 15 */
  html:root:root body .modal-overlay .modal{padding-left:18px!important;padding-right:18px!important}
}
@media (max-width:340px){
  html:root:root body .modal-overlay .modal :is(.modal-title,.modal-hdr) :is(.st-badge,.cc-aantal9){font-size:11px!important;padding-left:6px!important;padding-right:6px!important}
}
/* ===== G1b — de statuspil in de kop en het kruisje (Omzetbelasting, Winstbelasting, Balans en resultaat) =====
   Nu: in de kaartvensters staat het kruisje absoluut rechtsboven, maar de kopregel (titel + pil, flex-wrap) loopt eronder door → de pil ligt op 1024–1920 én op de telefoon
   onder „×” („termijn voorbij — indiene…”). In Omzetbelasting (modal-hdr, nowrap) drukt de pil de titel op 320 tot één letter per regel („O/m/z/e/t…”).
   Voorstel: (a) het kruisje houdt zijn eigen ruimte (geen ladderstap: een fout) · (b) ladder voor de pil: 11 px (stap 3) → de korte vorm, alleen het deel na „—”
   (stap 4: „indienen ›”) zodra de lange niet meer naast de titel past · (c) pas daarna onder de titel — dat vraag ik Sam eerst (kaart 162e-1 vraag 2). De vrije ruimte rechts = 48 px, zoals Z36 R29. */
html:root:root body .modal-overlay .modal.cc-scherm div:has(>.card-title):has(>.cc-hubst9){padding-right:48px!important}
@media (max-width:720px){
  html:root:root body .modal-overlay .modal :is(.modal-hdr,div:has(>.card-title))>.cc-hubst9{font-size:11px!important;padding-left:8px!important;padding-right:8px!important}
}
/* Z36 R29 nagebootst (Fables regel; hier alleen zodat de proef zonder app.js niet botst): een kop met een werkpil houdt rechts 48 px vrij voor het kruisje (het kruisje uit
   de rij), en past de pil niet naast de titel, dan gaat hij eronder (= vraag 2 B). Met vraag 2 A zet app.js eerst de korte pil; pas als ook die niet past, gaat hij eronder. */
@media (max-width:720px){
  html:root:root body .modal-overlay .modal .modal-hdr:has(>.cc-hubst9){flex-wrap:wrap!important;position:relative!important;padding-right:48px!important;row-gap:6px!important}
  html:root:root body .modal-overlay .modal .modal-hdr:has(>.cc-hubst9)>.cc-msluit9{position:absolute!important;right:0!important;top:0!important}
  html:root:root body .modal-overlay .modal :is(.modal-hdr,div:has(>.card-title))>.cc-hubst9{margin-left:0!important}   /* naast de titel, en eronder links (Z36 R29: „links onder de titel”) */
}
/* stap 4 (de korte vormen, kaart 162e-1 vraag 2 = A): app.js zet het deel dat weg mag in een span (.cc-titel-rest9 · .cc-pilrest9 · .cc-kortweg9) of een ander woord in
   data-kort9 (de lange in .cc-lang9); de kleine meting __ccKort9 zet .cc-kort9 alleen als de lange niet past (eerst eraf, dan meten, dan zo nodig erop) */
html:root:root body .cc-kort9 :is(.cc-titel-rest9,.cc-pilrest9,.cc-kortweg9),html:root:root body .cc-kort9:is(.cc-titel-rest9,.cc-pilrest9,.cc-kortweg9){display:none!important}
html:root:root body :is(.cc-kort9[data-kort9],.cc-kort9 [data-kort9])>.cc-lang9{display:none!important}
html:root:root body :is(.cc-kort9[data-kort9],.cc-kort9 [data-kort9])::after{content:attr(data-kort9)}
html:root:root body .cc-kort9 .cc-hfd9{display:inline-block}
html:root:root body .cc-kort9 .cc-hfd9::first-letter{text-transform:uppercase}
/* ===== 162e — de smal-ladder (L75) — G2 + G3 de tabellen op telefoon en tablet volgens Sams smal-ladder (in de proef een klasse op <html>; hier :root:root — even sterk) =====
   G2 (telefoon ≤ 720, § V2 „Kaartregel” van Z27-2): „een kop met sorteerknoppen blijft staan als een balk boven de lijst” — maar de regel voor een kopcel met knoppen
   (`…>thead>tr>:is(th,td):has(button):not(:has(input,select)){flex:1 1 100%}`, § B/§ C) pakt ook elke sorteerknop: elke knop een eigen regel → in Relatiebeheer,
   Debiteurenbeheer en de postenlijsten een lijst van 5–7 regels („NR ⇅ / NAAM ▲ / TYPE ⇅ …”) vóór de eerste relatie. Herstel: de sorteerknoppen weer als kleine
   chips naast elkaar (de bedoeling van § V2); alleen een cel met méér knoppen (Wis …) houdt de hele regel.
   G3 (tablet en smal laptopvenster 721–1180): in een brede tabel breekt nu alles — datum „06-01-/2025”, nummer „VICT-/2025-/0001”, naam over 4 regels — omdat de
   actieknoppen (Beoordeeld · Afboeken · Twijfelachtig · Herinnering) 436 px pakken. Ladder: (1) krappere cellen · (2) datum, nummer en bedrag
   (de rollen sub/bedrag/voor) breken nooit (Z33 G12); alleen de naam (titel) mag over twee regels · (4) wat dan nog niet past schuift zijwaarts
   met de hint (zoals nu, Fable Z15). v4: GEEN regel meer voor de regelknoppen zelf (Z36-2 „Regelknop”, R14) en nowrap alleen in een tabel die al zijwaarts schuift. */
@media (max-width:720px){
  html:root:root table:has(td[data-cc-rol9])>thead>tr>:is(th,td):has(.cc-fl9-kbtn):not(:has(input,select)):not(:has(button:not(.cc-fl9-kbtn))){flex:0 1 auto!important;display:block!important}
  html:root:root table:has(td[data-cc-rol9])>thead>tr:has(.cc-fl9-kbtn){gap:8px 10px!important;padding:6px 10px!important}   /* v4: ≥ 8 px tussen knoppen (Z33 G11) */
     /* 12: Z36-2 tabelkop A */
}
@media (min-width:721px) and (max-width:1180px){
  /* v4b: ook de krappere cellen alleen waar de tabel al zijwaarts schuift — Grootboekschema heeft links 0 px; 6 px maakte hem breder (gemeten) */
  html:root:root body .modal-overlay .modal [data-cc-scroll] table:has(td[data-cc-rol9]) :is(td,th){padding-left:6px!important;padding-right:6px!important}
  /* v4: nowrap alleen in een tabel die al zijwaarts schuift (r294/r340 zet daar [data-cc-scroll]) — anders maakte nowrap Relatiebeheer en Grootboekschema op 721–744 breder
     dan het venster (gemeten). De regelknoppen zelf: niet hier (Z36-2 „Regelknop”, R14). */
  /* v4c — (3) de filtervelden in de tabelkop: in Debiteurenbeheer past „filter…” op 900–1100 niet in 32–35 px (de tabel schuift daar nog niet) → minder ruimte opzij in het veld
     (12 → 6 px); de letter blijft */
  html:root:root body .modal-overlay .modal table th input.dep-input{padding-left:6px!important;padding-right:6px!important}
}
/* G2b — een LEGE tabel op de telefoon (stand leeg): § V2 (de kaartregel) geldt alleen als er regels met rollen zijn → een lege Relatiebeheer of Geschiedenis
   facturen wordt weer een brede tabel die zijwaarts schuift: de kolomkoppen afgekapt, „Wis / Alle filters wissen” letter voor letter, de uitleg half buiten beeld.
   Voorstel (consistent met J10 „één zin en één knop” van Z34/Z27-7): op ≤ 720 px bij een lege tabel geen kop, geen hint en niets dat zijwaarts schuift — alleen de zin. */
@media (max-width:720px){
  html:root:root table:has(>tbody>tr:only-child>td[colspan]):not(:has(td[data-cc-rol9]))>:is(thead,tfoot){display:none!important}
  html:root:root table:has(>tbody>tr:only-child>td[colspan]):not(:has(td[data-cc-rol9])){display:block!important;width:100%!important;min-width:0!important}
  html:root:root table:has(>tbody>tr:only-child>td[colspan]):not(:has(td[data-cc-rol9])) :is(tbody,tr,td){display:block!important;width:auto!important;text-align:left!important}
  /* (161e) de regel voor de lijst eromheen (div:has(>table:has(…))) is weg: :has binnen :has is ongeldig — de browser liet hem ook in de proef al vallen (s127 K4); de tabel zelf schuift niet meer, dus de lijst hoeft het ook niet */
}
/* ===== 162e — de smal-ladder (L75) — G4 knoppenrijen op de telefoon volgens Sams smal-ladder (in de proef een klasse op <html>; hier :root:root — even sterk) =====
   Nu: de voet (Z34: tweede knoppen 36 hoog/13 px/binnenruimte 14, de hoofdknop 40/14/18 en „vult de rest”) zakt op 300–370 px onder elkaar zodra twee knoppen niet
   meer naast elkaar passen (Aangifte overnemen 370 · Kas 330 · Administratiebeheer en Rekeningen 310 · Omzetbelasting 5 rijen op 320); de segmentknoppen
   (Factuur · Creditfactuur · Offerte) lopen op ≤ 310 rechts het venster uit; in „Transactie koppelen” zakt „Interne overboeking” al vanaf 440 naar een tweede rij;
   de bevestigingsvensters zetten hun twee knoppen op 300–320 onder elkaar (op 400 bij „Toch opslaan …”).
   Ladder: (1)+(2) ≤ 400: alle knoppen in die rij een tikkie kleiner — tweede knoppen 12 px, binnenruimte 10; de hoofdknop 13 px, binnenruimte 14 (de hoogtes blijven
   zoals Z36 R14 ze vastlegt: 40 · 36; alleen de breedte telt hier); het segment
   12 px met binnenruimte 10 · (3) ≤ 340: het segment binnenruimte 8 en de knoppen van de bevestigingsvensters binnenruimte 8 · (4) wat dan nog niet past: een korte
   naam (kaart 162e-1 vraag 2; korte-namen.js, alleen als de lange niet past) — pas daarna onder elkaar, en dat eerst aan Sam vragen.
   Tussen twee knoppen blijft ≥ 8 px (Z33 G11); binnen één keuzegroep (q-opt) staan de opties tegen elkaar (één knop met delen). */
@media (max-width:400px){
  html:root:root body .modal-overlay .modal .modal-foot .btn.btn:not(.cc-hoofd9){padding:0 10px!important;font-size:12px!important}
  html:root:root body .modal-overlay .modal .modal-foot .btn.btn.cc-hoofd9{padding:0 14px!important;font-size:13px!important}
  html:root:root body .modal-overlay .modal .modal-foot{gap:8px!important}   /* v4: ≥ 8 px tussen twee knoppen (Z33 G11 / Z36 R24) */
  html:root:root body .modal-overlay .modal .q-opt.q-opt{padding:0 10px!important;font-size:12px!important}
  html:root:root body .modal-overlay .modal div:has(>button.q-opt){gap:2px!important}
}
@media (max-width:400px){
  html:root:root body [data-cc-modal="1"] .cc-dlgb.cc-dlgb.cc-dlgb.cc-dlgb.cc-dlgb{padding:0 10px!important;font-size:12px!important;min-width:0!important}
  html:root:root body [data-cc-modal="1"]>div>div:last-child:has(>.cc-dlgb){gap:8px!important}   /* v4: ≥ 8 px (Z33 G11) */
}
@media (max-width:360px){
  html:root:root body [data-cc-modal="1"]>div{padding-left:18px!important;padding-right:18px!important}
}
@media (max-width:340px){
  /* v4c — (3) de voet: nog iets minder ruimte opzij (10 → 8, de hoofdknop 14 → 12), zoals het segment en de dialogen: Beginbalans (300), werklijst Bank (310),
     Aangifte overnemen (320) blijven zo naast elkaar (gemeten: 7 · 7 · 5 px tekort) */
  html:root:root body .modal-overlay .modal .modal-foot .btn.btn:not(.cc-hoofd9){padding:0 8px!important}
  html:root:root body .modal-overlay .modal .modal-foot .btn.btn.cc-hoofd9{padding:0 12px!important}
  html:root:root body .modal-overlay .modal .q-opt.q-opt{padding:0 8px!important}
  html:root:root body [data-cc-modal="1"] .cc-dlgb.cc-dlgb.cc-dlgb.cc-dlgb.cc-dlgb{padding:0 8px!important}
}
@media (max-width:720px){
  /* v4c — naast elkaar blijven: de zin naast „Transactie verwijderen” in de voet van Transactie koppelen („Deelbetalingen worden automatisch verrekend.”, 11 px)
     zakte op ≤ 460 onder de knop → hij loopt in zijn eigen ruimte over twee of drie regels door (zoals een titel), de knop blijft ernaast */
  html:root:root body .modal-overlay .modal .modal-foot:has(>.cc-del9)>span:not(.btn){flex:1 1 0!important;min-width:0!important}
}
/* ===== 162e — de smal-ladder (L75) — G5 velden + G6 losse vondsten volgens Sams smal-ladder (in de proef een klasse op <html>; hier :root:root — even sterk) ===== */
/* G5 — de zoekhint „Zoek (naam, nr, oms)” op 721–1200: GEEN css meer (v3). Het bredere zoekveld maakte de bedragvelden te smal („max EUR” afgekapt op 721) en hielp op 721–820
   niet genoeg. Oplossing: de korte zoekhint „Zoek …” met de lange in het aria-label en de title — Z36 R41 (P12), en anders ladder stap 4 (dezelfde korte hint). */
/* G6a — Bankbestand importeren (≤ 360): de IBAN loopt onder de knop „Bankbestand inlezen” (rij zonder ruimte, IBAN 16 px).
   Ladder: (1) IBAN 12 px · (2) de knop 12 px met binnenruimte 10 · (4) als laatste „Inlezen” (kaart 162e-1 vraag 2; korte-namen.js, alleen als het botst). */
@media (max-width:360px){
  html:root:root body .modal-overlay .modal div:has(>label.btn.btn-primary.btn-sm){flex-wrap:wrap!important;row-gap:8px!important}   /* bij vraag 2 B: de knop op de regel eronder i.p.v. eroverheen */
  html:root:root body .modal-overlay .modal div:has(>label.btn.btn-primary.btn-sm)>div:first-child{min-width:0!important;flex:1 1 auto!important}
  html:root:root body .modal-overlay .modal div:has(>div:first-child)>label.btn.btn-primary.btn-sm{padding:0 10px!important;font-size:12px!important;flex:0 0 auto!important}
}
/* G6c — de werklijsten (≤ 340): het bedrag (14 px, 75 px breed) staat in een kolom van 55 px en loopt over het oogje.
   Ladder stap 2: de hele regel een tikkie kleiner — bedrag 13, oogje 24, „Bevestigen” 12 px met binnenruimte 10. */
@media (max-width:350px){   /* v4: tot 350 (in Inkoop met lange bedragen botste het tot 350) */
  html:root:root body .modal-overlay .modal .cc-fl9-rij.cc-fl9-rij .cc-fl9-bed{font-size:13px!important}
  html:root:root body .modal-overlay .modal .cc-fl9-rij.cc-fl9-rij .inv-del{width:24px!important;min-width:24px!important}
  html:root:root body .modal-overlay .modal .cc-fl9-rij.cc-fl9-rij .cc-bevestig9{padding:0 10px!important;font-size:12px!important}
  html:root:root body .modal-overlay .modal .cc-fl9-rij>.cc-fl9-klik{column-gap:8px!important}
}
@media (max-width:320px){
  /* v4c — G6c, nog een stap (MAX lang: bedragen van zes cijfers, „−€ 192.207,60”): het bedrag 12 px en „Bevestigen” minder ruimte opzij (10 → 8); op 300 px raakt
     zo'n bedrag het oogje nog net (5 px) — smaller dan elke gangbare telefoon, aanvaard (BEVINDINGEN § 5) */
  html:root:root body .modal-overlay .modal .cc-fl9-rij.cc-fl9-rij .cc-fl9-bed{font-size:12px!important}
  html:root:root body .modal-overlay .modal .cc-fl9-rij.cc-fl9-rij .cc-bevestig9{padding:0 8px!important}
}

/* G6d — de kaartvensters met een los kruisje (Omzetspecificatie, Winstbelasting, Balans en resultaat): de kopregel houdt ruimte vrij voor „×”
   (geen ladderstap: nu loopt de titel of de pil eronder door, op 340–400 en — Winstbelasting — ook op de computer). 48 px = Z36 R29. */
   /* v3: de kop zit in een div zonder klasse, dus niet >.modal-hdr */
html:root:root body .modal-overlay .modal.cc-scherm div:has(>.card-title):has(>.cc-hubst9){padding-right:48px!important}
/* G6b — Administratiebeheer (721–800): de administratiewissel staat in het midden van de kop (absoluut, left:50%) en ligt daar over „Delen” (dat direct na de titel staat).
   Kleiner maken helpt niet (het midden blijft het midden). Ladder: de wissel in de rij zetten zoals op de telefoon (static, na „Delen”), de naam met „…” (stap 4: een naam = gegevens).
   Alles blijft op één rij. Z36 R35 (P46) wil de knop en Delen op een eigen rij — dat is onder elkaar, dus eerst Sam vragen. */
@media (min-width:721px) and (max-width:800px){
  html:root:root body .cc-admbeheer-ov .cc-adm-badge-wrap{position:static!important;transform:none!important;min-width:0!important;flex:0 1 auto!important;max-width:170px!important}
  html:root:root body .cc-admbeheer-ov .cc-adm-badge-wrap .admin-switch{max-width:100%!important;overflow:hidden!important;white-space:nowrap!important}
}
/* G6e — Administratiebeheer (≤ 380): de vakken (Bedrijf, Adres, Boekjaar …) zijn 328 px breed en schuiven zijwaarts: .profile-grid heeft 1fr (= minmax(auto,1fr): de inhoud wint).
   Dezelfde reparatie die de app al heeft voor .gen-grid (index.html: „.gen-grid krijgt minmax(0,1fr)”): ladder stap 3, het vak smaller — de velden blijven onder elkaar zoals nu. */
@media (max-width:720px){
  html:root:root body .modal .profile-grid{grid-template-columns:minmax(0,1fr)!important}
}
/* G6f — een keuzelijst in een bewerkregel (Crediteuren/Debiteuren op de balans, ≤ 330): de lijst is zo breed als zijn langste keuze (281 px) en duwt het venster zijwaarts →
   hij krimpt mee (de gekozen tekst kort de lijst zelf al af). */
@media (max-width:720px){
  html:root:root body .modal .tx-edit-row>select.ed-pill{min-width:0!important;max-width:100%!important}
}
/* G6g — Charlie (≤ 375): het invoerveld heeft zijn standaardbreedte als minimum, „Vraag” loopt 11 px het venster uit → het veld krimpt mee (ladder stap 3). Charlie zelf is van Z36-4. */
html:root:root body .modal .cb-inrow>input.cb-in{min-width:0!important}
/* --- einde 162e --- */
/* ===== einde Z36 ===== */