:root{
    --paper:#F2F6F1;--card:#FFFFFF;--card-2:#E6EEE5;--ink:#0E241E;--soft:#4C5C55;--faint:#8A968E;
    --line:#D6E1D7;--green:#013F34;--green-deep:#012A23;--on-green:#FFFFFF;--amber:#9C6B1E;--amber-soft:#F2ECDB;--rust:#A8492F;--rust-soft:#F2E3DB;
    --blue:#2A5C99;--blue-soft:#DCE6F2;--purple:#6B3FA0;--purple-soft:#EBE0F2;--orange:#B5651D;--orange-soft:#F5E6D3;--grey:#5C6B64;--grey-soft:#E4E8E3;
    --lightbrown:#AF956A;--lightbrown-soft:#EFE6D6;--darkbrown:#5F341C;--darkbrown-soft:#E4D9CC;
    --chip-ink:#FFFFFF;
    /* CORRECTIE 21 sept 2026 (Agendakleuren, 2e ronde op verzoek van Stefan): de eerste, subtiele
       correctie was niet genoeg. Stefan wil dat de eventstatussen echt "knallen" (goed verzadigd, in
       één oogopslag te onderscheiden), terwijl opbouw/afbouw bewust rustiger/aardser blijven - dat is
       het expliciete ontwerpprincipe: status mag knallen, opbouw/afbouw mag rustig blijven. Daarom nu
       5 EIGEN, alleen voor de kalenderweergave bedoelde statuskleuren (optie/bevestigd/definitief/
       kleine_kans/showcase), los van --amber/--orange/--green-deep/--blue/--purple die elders in de
       app (knoppen, "nog niet ingericht"-badge, Keuken-weekblokjes, focusringen, etc.) hun eigen,
       ongewijzigde betekenis houden - --green-deep/--blue/--purple worden alleen al op tientallen
       andere plekken gebruikt, dus die mochten niet meeveranderen. --lightbrown/--darkbrown hierboven
       worden ALLEEN door de opbouw/afbouw-kalenderblokjes gebruikt, dus die zijn wel direct aangepast
       (lichter zandbruin / donkerder chocoladebruin dan voorheen, bewust rustig/gedempt gehouden).
       Bewust dezelfde kleur in licht en donker thema (geen aparte donkere variant): dit zijn
       statuskleuren die je moet herkennen, geen tekstkleuren die met het thema hoeven mee te bewegen.
       --chip-ink-dark/--chip-ink-light zijn de bijbehorende tekstkleuren per blokje, gekozen op basis
       van een echte contrastberekening (WCAG-relatieve luminantie) per kleur, niet een vaste keuze
       voor alle blokjes tegelijk - zie het rapport voor de contrastcijfers per kleur. */
    --status-optie:#DCB30E;--status-bevestigd:#F0620F;--status-definitief:#0B6B46;--status-kleine-kans:#226DC3;--status-showcase:#782FBC;
    --chip-ink-dark:#17120A;--chip-ink-light:#FFFFFF;
    --serif:"Poppins","Futura","Century Gothic","Avenir Next","Segoe UI",system-ui,sans-serif;
    --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,"SF Mono",Menlo,monospace;
  }
  @media (prefers-color-scheme:dark){
    :root{--paper:#0B1512;--card:#12211C;--card-2:#17271F;--ink:#E8EFE7;--soft:#A6B5AB;--faint:#74837A;
    --line:#243530;--green:#BBD7AD;--green-deep:#D4E8C9;--on-green:#0B1512;--amber:#D6A64E;--amber-soft:#2A2216;--rust:#D68763;--rust-soft:#2C1D16;
    --blue:#7FAEDE;--blue-soft:#1B2A3A;--purple:#C9A3E8;--purple-soft:#2A1F35;--orange:#E0975A;--orange-soft:#3A2A18;--grey:#A9B0AC;--grey-soft:#262B28;
    --chip-ink:#0B1512;}
  }
  :root[data-theme="light"]{--paper:#F2F6F1;--card:#FFFFFF;--card-2:#E6EEE5;--ink:#0E241E;--soft:#4C5C55;--faint:#8A968E;--line:#D6E1D7;--green:#013F34;--green-deep:#012A23;--on-green:#FFFFFF;--amber:#9C6B1E;--amber-soft:#F2ECDB;--rust:#A8492F;--rust-soft:#F2E3DB;--blue:#2A5C99;--blue-soft:#DCE6F2;--purple:#6B3FA0;--purple-soft:#EBE0F2;--orange:#B5651D;--orange-soft:#F5E6D3;--grey:#5C6B64;--grey-soft:#E4E8E3;--chip-ink:#FFFFFF;}
  :root[data-theme="dark"]{--paper:#0B1512;--card:#12211C;--card-2:#17271F;--ink:#E8EFE7;--soft:#A6B5AB;--faint:#74837A;--line:#243530;--green:#BBD7AD;--green-deep:#D4E8C9;--on-green:#0B1512;--amber:#D6A64E;--amber-soft:#2A2216;--rust:#D68763;--rust-soft:#2C1D16;--blue:#7FAEDE;--blue-soft:#1B2A3A;--purple:#C9A3E8;--purple-soft:#2A1F35;--orange:#E0975A;--orange-soft:#3A2A18;--grey:#A9B0AC;--grey-soft:#262B28;--chip-ink:#0B1512;}

  *{box-sizing:border-box;}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;}
  /* Layout-correctie 2.20.0 (5-10-2026): één centrale layout-toestand. --inhoud-max is de actieve
     contentbreedte; body.layout-breed zet die op de brede maat (overzichten, planning, tabellen,
     dashboards, later Agenda). Kopbalk, containers, "+" en Feedback lezen allemaal deze waarde. */
  :root{--inhoud-normaal:1200px;--inhoud-breed:min(96vw,1600px);--inhoud-max:var(--inhoud-normaal);--inhoud-pad:20px;--rand-min:16px;--maat-smal:360px;--maat-formulier:520px;}
  body.layout-breed{--inhoud-max:var(--inhoud-breed);}
  /* Onder de normale breedte is er geen verschil: dan gebruiken normaal en breed allebei de volle breedte. */
  @media (max-width:1250px){body.layout-breed{--inhoud-max:var(--inhoud-normaal);}}
  .wrap{max-width:var(--inhoud-max);margin:0 auto;padding:0 var(--inhoud-pad);box-sizing:border-box;}
  .wrap-breed{max-width:var(--inhoud-breed);}
  /* Centrale maten in plaats van losse breedtes per scherm. */
  .maat-smal{max-width:var(--maat-smal);}
  .maat-formulier{max-width:var(--maat-formulier);}
  .addmenu.op-maat{width:auto;max-width:100%;padding-left:18px;padding-right:18px;}
  /* Ruimte onder de laatste content, zodat de vaste "+" en Feedback nooit content afdekken. */
  body{padding-bottom:calc(168px + env(safe-area-inset-bottom));} /* ruimte voor + en Feedback boven elkaar */
  h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;}

  header.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0 14px;flex-wrap:wrap;}
  .brand{display:flex;align-items:baseline;gap:11px;}
  .brand .logo{font-family:var(--serif);font-size:24px;font-weight:800;letter-spacing:-.01em;text-transform:lowercase;}
  .brand .tl{font-size:12px;color:var(--faint);font-family:var(--mono);letter-spacing:.03em;}
  .savebtn{border:none;background:var(--green);color:var(--on-green);font-family:var(--sans);font-size:12.5px;font-weight:700;padding:8px 15px;border-radius:100px;cursor:pointer;white-space:nowrap;box-shadow:0 1px 3px rgba(1,63,52,.18);transition:transform .08s,background .15s;}
  .savebtn:hover{transform:translateY(-1px);}
  .savebtn:active{transform:translateY(0);}
  .savebtn.saved-ok{background:#2e9e5b;color:#fff;}
  .ink-btn.saved-ok,button.saved-ok{background:#2e9e5b !important;color:#fff !important;border-color:#2e9e5b !important;}
  .bkup-banner{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;background:#F2ECDB;border-bottom:1px solid #9C6B1E;color:#6b4a1e;font-size:14px;padding:10px 16px;font-family:var(--sans);}
  .bkup-banner .bk-msg{font-weight:600;}
  .bkup-banner .bk-act{display:flex;gap:8px;}
  .bkup-banner button{border:none;border-radius:8px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--sans);background:var(--green);color:var(--on-green);}
  .bkup-banner button.bk-later{background:transparent;color:#6b4a1e;border:1px solid #c9a86a;font-weight:600;}
  .langtog{display:flex;border:1px solid var(--line);border-radius:100px;overflow:hidden;background:var(--card);}
  .langtog button{border:none;background:transparent;color:var(--soft);font-size:12.5px;font-weight:600;padding:7px 13px;cursor:pointer;font-family:var(--sans);}
  .langtog button.on{background:var(--green);color:var(--on-green);}
  /* CORRECTIE 21 sept 2026 (technische opschoonronde, punt 5): de vaste bovenbalk (logo, tagline
     "Keuken OS", versienummer, Opslaan, NL/EN, Uitloggen) had geen enkele manier om mee te krimpen
     op een smaller scherm, waardoor er een ongewenste horizontale scrollbalk ontstond op elk scherm
     van de app (bevinding uit het Fase B-structuurrapport, sectie 11). Dit is nu opgelost met
     uitsluitend layout/CSS: .topbar mag wrappen naar een tweede regel (hierboven) in plaats van
     breder te worden dan het scherm, en op kleinere breedtes wordt secundaire informatie (de tagline
     en het versienummer) compacter gemaakt. Alle knoppen en functies blijven ongewijzigd aanwezig en
     werkend; op een normaal breed scherm (desktop) verandert er visueel niets. */
  .topactions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
  @media (max-width:700px){
    .topbar{gap:10px;padding:12px 0 10px;}
    .brand .tl{display:none;}
    .ver-badge{display:none;}
  }
  @media (max-width:420px){
    .savebtn{padding:7px 11px;font-size:11.5px;}
    .langtog button{padding:6px 10px;font-size:11.5px;}
  }

  .tools{display:flex;flex-wrap:wrap;gap:10px;padding:0 0 14px;align-items:center;}
  .search{flex:1;min-width:210px;position:relative;}
  .search input{width:100%;padding:11px 14px 11px 38px;border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--ink);font-size:14.5px;font-family:var(--sans);}
  .search input:focus-visible{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green);}
  .search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--faint);fill:none;stroke-width:1.8;}
  .exwrap{display:flex;align-items:center;gap:7px;flex-wrap:wrap;border:1px dashed var(--line);border-radius:11px;padding:6px 10px;background:var(--card);min-width:210px;flex:1;}
  .exwrap .exlab{font-size:11px;color:var(--rust);font-weight:600;white-space:nowrap;}
  .exwrap input{border:none;background:transparent;outline:none;color:var(--ink);font-size:13.5px;font-family:var(--sans);flex:1;min-width:80px;padding:5px 2px;}
  .exchip{display:inline-flex;align-items:center;gap:5px;background:var(--rust-soft);color:var(--rust);border-radius:100px;padding:3px 5px 3px 10px;font-size:12px;font-weight:600;}
  .exchip button{border:none;background:transparent;color:var(--rust);cursor:pointer;font-size:14px;line-height:1;padding:0 2px;}

  .cats{display:flex;gap:8px;overflow-x:auto;padding:2px 0 18px;}
  .cats button{white-space:nowrap;border:1px solid var(--line);background:var(--card);color:var(--soft);border-radius:100px;padding:8px 15px;font-size:13px;cursor:pointer;font-family:var(--sans);font-weight:500;}
  .cats button.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}
  .count{font-size:12.5px;color:var(--faint);margin:0 0 16px;font-family:var(--mono);}

  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px;padding-bottom:56px;}
  .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;display:flex;flex-direction:column;gap:8px;}
  .card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(40,34,24,.09);}
  .card .cat{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-weight:700;font-family:var(--mono);}
  .card h3{font-size:20px;margin:0;line-height:1.15;}
  .card .yield{font-size:12.5px;color:var(--faint);}
  .card .ings{font-size:13px;color:var(--soft);line-height:1.5;margin-top:2px;}
  .card .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;}
  .badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;letter-spacing:.02em;border-radius:100px;padding:3px 8px;font-family:var(--mono);width:max-content;}
  .badge.add{background:var(--amber-soft);color:var(--amber);}
  .badge.res{background:var(--rust-soft);color:var(--rust);}
  .badge.estq{background:var(--card-2);color:var(--faint);border:1px solid var(--line);}
  .badge.ai-gegenereerd{background:var(--card-2);color:var(--faint);border:1px solid var(--line);}
  .badge.ai-goedgekeurd{background:var(--amber-soft);color:var(--amber);}
  .badge.ai-afgekeurd{background:var(--rust-soft);color:var(--rust);}
  .est{font-style:italic;}
  .aitog{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;font-family:var(--mono);letter-spacing:.02em;border:1px solid var(--line);border-radius:100px;padding:7px 14px;background:var(--card);cursor:pointer;color:var(--soft);}
  .aitog.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}
  .aitog .n{font-size:10px;background:var(--rust);color:#fff;border-radius:100px;padding:1px 6px;}

  .overlay{position:fixed;inset:0;z-index:60;background:rgba(20,16,10,.5);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;padding:26px 14px;overflow-y:auto;}
  .overlay.on{display:flex;}
  .sheet{background:var(--paper);border:1px solid var(--line);border-radius:20px;max-width:640px;width:100%;overflow:hidden;animation:pop .3s ease;}
  @keyframes pop{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
  .sheet-head{padding:26px 28px 20px;border-bottom:1px solid var(--line);position:relative;}
  .sheet-head .cat{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-weight:700;font-family:var(--mono);margin:0 0 8px;}
  .sheet-head h2{font-size:29px;margin:0 0 6px;line-height:1.08;}
  .sheet-head .yield{font-size:13px;color:var(--faint);}
  .closeb{position:absolute;top:20px;right:20px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--card);cursor:pointer;display:grid;place-items:center;color:var(--soft);}
  .closeb svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;}

  .portion{display:flex;align-items:center;gap:14px;padding:18px 28px;background:var(--card-2);border-bottom:1px solid var(--line);flex-wrap:wrap;}
  .portion .pl{font-size:13px;color:var(--soft);font-weight:600;}
  .stepper{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--card);}
  .stepper button{border:none;background:transparent;color:var(--green);width:38px;height:40px;font-size:20px;cursor:pointer;font-family:var(--sans);}
  .stepper button:hover{background:var(--card-2);}
  .stepper .n{min-width:44px;text-align:center;font-family:var(--serif);font-size:20px;font-variant-numeric:tabular-nums;}
  .stepper input.n{width:70px;border:none;background:transparent;color:var(--ink);padding:6px 2px;font-weight:600;}
  .stepper input.n:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:6px;}
  .presets{display:flex;flex-wrap:wrap;gap:6px;}
  .presets button{border:1px solid var(--line);background:var(--card);color:var(--soft);border-radius:9px;padding:8px 12px;font-size:12.5px;cursor:pointer;font-family:var(--sans);}
  .presets button.on{border-color:var(--green);color:var(--green-deep);background:color-mix(in srgb,var(--green) 10%,transparent);}

  .sheet-body{padding:24px 28px 30px;}
  .sec-h{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-family:var(--mono);margin:26px 0 14px;display:flex;align-items:center;gap:10px;}
  .sec-h:first-child{margin-top:0;}
  .ings-list{list-style:none;margin:0;padding:0;}
  .ings-list li{padding:11px 0;border-bottom:1px solid var(--line);}
  .ings-list .row{display:flex;justify-content:space-between;gap:16px;font-size:15px;}
  .ings-list li:last-child{border-bottom:none;}
  .ings-list .q{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--green-deep);font-weight:600;white-space:nowrap;text-align:right;}
  .ings-list .q.tt{color:var(--faint);font-style:italic;}
  .ings-list .fn{font-size:12.5px;color:var(--soft);font-style:italic;margin-top:4px;padding-left:2px;display:flex;gap:6px;}
  .ings-list .fn::before{content:"→";color:var(--green);font-style:normal;}

  .csvbtn{margin-top:14px;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--green);background:transparent;color:var(--green-deep);border-radius:10px;padding:10px 16px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--sans);}
  .csvbtn:hover{background:color-mix(in srgb,var(--green) 10%,transparent);}

  .method{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:15px;}
  .method li{display:grid;grid-template-columns:28px 1fr;gap:13px;align-items:start;font-size:15px;color:var(--ink);}
  .method li::before{counter-increment:step;content:counter(step);font-family:var(--serif);font-size:14px;color:var(--on-green);background:var(--green);width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font-weight:600;}

  .teach{border-radius:12px;padding:16px 18px;margin-top:10px;}
  .teach.why{background:var(--card-2);border-left:3px solid var(--green);}
  .teach.bal{background:color-mix(in srgb,var(--green) 8%,var(--card));border-left:3px solid var(--green-deep);}
  .teach.res{background:var(--rust-soft);border-left:3px solid var(--rust);}
  .teach p{margin:0;font-size:14px;color:var(--soft);line-height:1.55;}
  .teach .tl2{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-family:var(--mono);margin:0 0 7px;font-weight:700;display:flex;align-items:center;gap:8px;}
  .teach.why .tl2,.teach.bal .tl2{color:var(--green-deep);}
  .teach.res .tl2{color:var(--rust);}

  .pairs{display:flex;flex-wrap:wrap;gap:8px;}
  .pairs span{font-size:13px;background:var(--card);border:1px solid var(--line);border-radius:100px;padding:6px 13px;color:var(--soft);}
  .allerg{display:flex;flex-wrap:wrap;gap:8px;}
  .allerg span{font-size:12.5px;background:var(--rust-soft);color:var(--rust);border:1px solid var(--rust);border-radius:100px;padding:5px 12px;font-weight:600;}
  .allerg span.none{background:var(--card);color:var(--faint);border-color:var(--line);font-weight:400;}
  .allergnote{font-size:12px;color:var(--faint);margin:9px 0 0;font-style:italic;}
  .kitchen{background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:6px 18px;}
  .kline{padding:14px 0;border-bottom:1px solid var(--line);}
  .kline:last-child{border-bottom:none;}
  .kline .klbl{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-deep);font-family:var(--mono);font-weight:700;margin-bottom:6px;}
  .kline p{margin:0;font-size:13.5px;color:var(--soft);line-height:1.55;}
  .csvbtn{margin-top:16px;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--green);background:transparent;color:var(--green-deep);border-radius:11px;padding:11px 18px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:var(--sans);}
  .csvbtn:hover{background:color-mix(in srgb,var(--green) 12%,transparent);}
  .csvbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;}
  .sheet-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
  .sheet-actions .csvbtn{margin-top:16px;}
  .pdfbtn{border-color:var(--amber);color:var(--amber);}
  .pdfbtn:hover{background:color-mix(in srgb,var(--amber) 12%,transparent);}

  .disc{max-width:var(--inhoud-max);margin:0 auto;padding:0 var(--inhoud-pad) 50px;box-sizing:border-box;}
  .disc .box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:12.5px;color:var(--faint);line-height:1.5;}
  .disc b{color:var(--amber);}
  .empty{grid-column:1/-1;text-align:center;color:var(--faint);padding:50px;font-size:15px;}
  @media (max-width:520px){.sheet-head h2{font-size:24px;}}
  .badge.own{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green-deep);}
  /* Statuskleuren Agenda/Event (geel/blauw/oranje/groen/paars) — zelfde badge-vorm, eigen tint per
     status. Herstructurering appflow 20-9-2026 (op verzoek van Stefan): "mondeling_bevestigd"
     wordt in de nieuwe agenda-kleurenbetekenis getoond als "grote kans" (oranje) en er is een
     nieuwe status "showcase" (paars) bijgekomen - de databasewaarden zelf zijn NIET hernoemd,
     alleen de betekenis/weergave, zie T.statusLabel_showcase en de agendaColorKey()-helper. */
  .badge.status-optie{background:var(--amber-soft);color:var(--status-optie);}
  .badge.status-kleine_kans{background:var(--blue-soft);color:var(--status-kleine-kans);}
  .badge.status-mondeling_bevestigd{background:var(--orange-soft);color:var(--status-bevestigd);}
  .badge.status-definitief{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--status-definitief);}
  .badge.status-niet_doorgegaan{background:var(--grey-soft);color:var(--grey);}
  .badge.status-geannuleerd{background:var(--rust-soft);color:var(--rust);}
  .badge.status-showcase{background:var(--purple-soft);color:var(--status-showcase);}
  .status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;}
  .status-dot.status-optie{background:var(--status-optie);}
  .status-dot.status-kleine_kans{background:var(--status-kleine-kans);}
  .status-dot.status-mondeling_bevestigd{background:var(--status-bevestigd);}
  .status-dot.status-definitief{background:var(--status-definitief);}
  .status-dot.status-niet_doorgegaan{background:var(--grey);}
  .status-dot.status-geannuleerd{background:var(--rust);}
  .status-dot.status-showcase{background:var(--status-showcase);}
  .agenda-card{border-left-width:4px;border-left-style:solid;}
  .agenda-card.status-optie{border-left-color:var(--status-optie);}
  .agenda-card.status-kleine_kans{border-left-color:var(--status-kleine-kans);}
  .agenda-card.status-mondeling_bevestigd{border-left-color:var(--status-bevestigd);}
  .agenda-card.status-definitief{border-left-color:var(--status-definitief);}
  .agenda-card.status-niet_doorgegaan{border-left-color:var(--grey);}
  .agenda-card.status-geannuleerd{border-left-color:var(--rust);}
  .agenda-card.status-showcase{border-left-color:var(--status-showcase);}
  /* Agenda-kalender (maandweergave): elke dag is een cel met een klein aantal gekleurde chips
     (1 per event op die dag, meerdere per dag kan gewoon), kleur = statuskleur zoals hierboven bij
     .badge.status-x en .status-dot. Cellen buiten de huidige maand ("out") staan er vager bij, puur
     om de rooster-context te tonen (vorige/volgende maand loopt door in dezelfde week).
     CORRECTIE 20 sept 2026 (herstructurering-correctieronde): deze toelichting bevatte hierboven
     per ongeluk de CSS-commentaar-sluittekens (sterretje direct gevolgd door een schuine streep)
     middenin de tekst, wat dit hele commentaarblok te vroeg afsloot. Daardoor werd alle tekst
     daarna, tot aan het echte einde van dit blok, door de browser gelezen als ongeldige CSS-
     selectortekst, die zich vastplakte aan de eerstvolgende regel (.cal-nav met display:flex).
     Een selectorlijst met een ongeldig onderdeel wordt door de browser in zijn geheel genegeerd,
     dus .cal-nav kreeg in de praktijk nooit display:flex en viel terug op standaard block-gedrag:
     de kop, de Vandaag-knop en de pijltjes stonden daardoor onder elkaar in plaats van op één
     rustige regel. Puur een kapotte toelichtende tekst, geen wijziging in kleuren of logica. */
  .cal-nav{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
  .cal-nav .cal-monthlabel{margin:0;flex:1;font-family:var(--serif);font-size:19px;font-weight:700;text-transform:capitalize;}
  .cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding-bottom:8px;}
  .cal-weekday{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:center;padding:2px 0 6px;}
  /* CORRECTIE 20 sept 2026 (herstructurering-correctieronde, punt 1D): min-width:0 hier en op
     .cal-chips/.cal-chip hieronder toegevoegd. Zonder dit kon één dag met een lang event (een lange
     klant-/eventnaam die niet afbreekt, zie white-space:nowrap bij .cal-chip) die ene kolom van het
     7-koloms rooster breder duwen dan de rest ("1fr" respecteert anders de eigen minimale
     inhoudsbreedte van zijn cel), waardoor het hele rooster breder werd dan het scherm en er
     onderin een ongewenste horizontale scrollbalk ontstond - dit is exact wat Stefan meldde bij
     punt 1D. Met min-width:0 mag een kolom/cel wel degelijk smaller worden dan zijn inhoud, zodat
     de tekst-ellipsis (text-overflow:ellipsis bij .cal-chip) het overnemen: de naam wordt netjes
     afgekapt met "…" i.p.v. de kolom op te rekken. Geen wijziging in kleuren, data of logica. */
  .cal-cell{background:var(--card);border:1px solid var(--line);border-radius:10px;min-height:88px;padding:6px;display:flex;flex-direction:column;gap:4px;min-width:0;overflow:hidden;}
  .cal-cell.out{opacity:.4;}
  .cal-cell.today{border-color:var(--green);border-width:2px;}
  .cal-daynum{font-size:12px;font-weight:600;color:var(--soft);}
  .cal-chips{display:flex;flex-direction:column;gap:3px;overflow:hidden;min-width:0;}
  /* CORRECTIE 20 sept 2026 (herstructurering-correctieronde, punt 1C): de statuskleur was hier
     voorheen alleen een lichte pastel-achtergrond met gekleurde TEKST (.status-soft), wat in de
     kleine kalendercel te subtiel bleek - Stefan wil de status in één oogopslag kunnen aflezen aan
     het blok zelf. Daarom nu een volle, verzadigde achtergrondkleur (dezelfde kleurbetekenis als
     voorheen, alleen de sterke variant i.p.v. de zachte) met --chip-ink als leesbare tekstkleur
     (wit in het lichte thema, donker in het donkere thema - zie de root-variabelen hierboven).
     Rustig blijft het omdat het nog steeds kleine, compacte pilletjes zijn, geen grote vlakken. */
  .cal-chip{font-size:11px;line-height:1.3;padding:3px 8px;border-radius:100px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;min-width:0;}
  /* CORRECTIE 21 sept 2026 (Agendakleuren, 2e ronde): de tekstkleur per blokje is nu per status
     gekozen op basis van een echte contrastberekening (WCAG-relatieve luminantie) tegen die ene
     kleur, niet meer één vaste --chip-ink voor alle blokjes tegelijk - een vast lichte/donkere
     tekstkleur per thema werkte niet meer nu de statuskleuren zelf sterk in helderheid verschillen
     (een licht, verzadigd goud heeft donkere tekst nodig, een diep donkergroen juist witte). */
  .cal-chip.status-optie{background:var(--status-optie);color:var(--chip-ink-dark);}
  .cal-chip.status-kleine_kans{background:var(--status-kleine-kans);color:var(--chip-ink-light);}
  .cal-chip.status-mondeling_bevestigd{background:var(--status-bevestigd);color:var(--chip-ink-dark);}
  .cal-chip.status-definitief{background:var(--status-definitief);color:var(--chip-ink-light);}
  .cal-chip.status-niet_doorgegaan{background:var(--grey);color:var(--chip-ink);}
  .cal-chip.status-geannuleerd{background:var(--rust);color:var(--chip-ink);}
  .cal-chip.status-showcase{background:var(--status-showcase);color:var(--chip-ink-light);}
  /* cal-chip.phase-opbouw/afbouw (20-9-2026, herstructurering appflow): dit zijn GEEN
     eventstatussen maar losse kalenderfases van hetzelfde event (opbouw_start/eind,
     afbouw_start/eind) - daarom een eigen klasse-naamruimte (phase-*) i.p.v. status-*, zodat een
     opbouw/afbouw-blok altijd lichtbruin/donkerbruin blijft, ongeacht de status van het event zelf.
     Bewust rustiger/aardser gehouden dan de statuskleuren hierboven (21-9-2026, ontwerpprincipe
     "status mag knallen, opbouw/afbouw mag rustig blijven"), met dezelfde per-kleur contrastkeuze
     voor de tekst. */
  .cal-chip.phase-opbouw{background:var(--lightbrown);color:var(--chip-ink-dark);}
  .cal-chip.phase-afbouw{background:var(--darkbrown);color:var(--chip-ink-light);}
  /* CORRECTIE 28 sept 2026 (Sales-kalender): sales-actie-chips (open salesacties, action_date)
     krijgen bewust GEEN eigen statuskleur (dat blijft voorbehouden aan events, zie boven), maar
     hetzelfde neutrale grijs als het bestaande cal-chip-precedent (regel ~8300, keukenplanning),
     met een stippellijnrand erbij zodat "dit is een actie, geen event" ook zonder te klikken
     meteen herkenbaar is. */
  /* AGENDA-FILTERS (2.22.0, 12-10-2026, op verzoek van Stefan): feestdagen/officiële vrije dagen
     zijn geen events en geen status - daarom een neutrale, ongevulde chip (alleen rand), zodat ze
     nooit verward worden met een statuskleur. Niet klikbaar (geen Eventmap). De filterknoppen
     boven de Agenda hergebruiken de bestaande .agenda-tab-stijl; het bolletje erin is exact de
     kleur van de chips die die filter aan/uit zet (functionele kleurkoppeling, geen afdelingskleur). */
  .cal-chip.cal-feestdag{background:transparent;color:var(--soft);border:1px solid var(--line);cursor:default;font-weight:600;}
  .status-dot.phase-opbouw{background:var(--lightbrown);}
  .status-dot.phase-afbouw{background:var(--darkbrown);}
  .status-dot.cal-feestdag{background:transparent;border:1.5px solid var(--faint);box-sizing:border-box;}
  .agenda-filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 14px;}
  .agenda-filters .agenda-tab{display:inline-flex;align-items:center;gap:6px;}
  /* Actieve filter: lichte knop met groene rand, zodat het kleurbolletje (= de chipkleur) altijd
     goed zichtbaar blijft. Uit: vervaagd en doorgestreept. */
  .agenda-filters .agenda-tab.on{background:var(--card);color:var(--ink);border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green);}
  .agenda-filters .agenda-tab:not(.on){opacity:.6;text-decoration:line-through;}
  .agenda-filters .agenda-filter-reset{border:none;background:transparent;color:var(--soft);font-size:12px;text-decoration:underline;cursor:pointer;padding:6px 4px;font-family:inherit;}
  .cal-chip.sales-actie{background:var(--grey-soft);color:var(--ink);border:1.5px dashed var(--grey);}
  @media (max-width:640px){.cal-cell{min-height:60px;}.cal-chip{font-size:9.5px;}}
  /* Agenda-koptekst compact (20-9-2026, herstructurering-correctieronde, punt 1D): .dp-head had
     hier geen eigen opmaak, dus vielen h2/p terug op de kale browserstandaard (grote marges), en de
     "+ Nieuw event"-knop stond als aparte, volle blok-rij eronder. Nu: titel + knop op één regel,
     ondertitel klein en subtiel, veel minder lucht bovenin voordat de kalender zelf in beeld komt.
     Scoped op .agenda-head, zodat dit geen enkel ander .dp-head-scherm elders in de app raakt. */
  .agenda-head{margin:0 0 14px;padding:0;border:none;}
  .agenda-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
  .agenda-head h2{margin:0;font-family:var(--serif);font-size:clamp(20px,3.6vw,26px);font-weight:700;}
  .agenda-head p{margin:2px 0 0;font-size:12.5px;color:var(--soft);}
  .agenda-newbtn{border:1px solid var(--line);background:transparent;color:var(--green-deep);border-radius:10px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--sans);white-space:nowrap;}
  .agenda-newbtn:hover{background:var(--green-deep);color:#fff;}
  @media (max-width:480px){.agenda-head-row{flex-direction:column;align-items:stretch;}.agenda-newbtn{width:100%;}}
  /* Planning > Keuken: weekoverzicht met MEP-capaciteitsstatus per dag, zelfde toonzetting als
     de Agenda-kalender hierboven maar dan 7 kolommen naast elkaar i.p.v. een maandrooster. */
  .kp-week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:8px;}
  .kp-daycol{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px;cursor:pointer;display:flex;flex-direction:column;gap:6px;}
  .kp-daycol.today{border-color:var(--green);border-width:2px;}
  .kp-daycol.selected{outline:2px solid var(--ink);outline-offset:-2px;}
  .kp-daylabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);display:flex;justify-content:space-between;}
  .kp-capbar{position:relative;height:6px;border-radius:4px;background:var(--grey-soft);overflow:hidden;}
  .kp-capfill{height:100%;border-radius:4px;background:var(--green);}
  .kp-capfill-optie{position:absolute;top:0;height:100%;background-image:repeating-linear-gradient(45deg, var(--amber) 0 3px, transparent 3px 6px);}
  .kp-status-bijna_vol .kp-capfill{background:var(--amber);}
  .kp-status-over .kp-capfill{background:var(--rust);}
  .kp-status-geen_mep .kp-capfill{background:var(--grey);}
  .kp-daycol.dreigt{border-color:var(--amber);}
  .kp-capnum{font-size:13px;font-weight:700;}
  .kp-statuslbl{font-size:11px;color:var(--soft);}
  .kp-status-ruim .kp-statuslbl{color:var(--green-deep);}
  .kp-status-bijna_vol .kp-statuslbl{color:var(--amber);}
  .kp-status-over .kp-statuslbl{color:var(--rust);font-weight:700;}
  .kp-chips{display:flex;flex-direction:column;gap:2px;}
  @media (max-width:900px){.kp-week{grid-template-columns:repeat(4,1fr);}}
  @media (max-width:640px){.kp-week{grid-template-columns:repeat(2,1fr);}}
  /* Weekbanner: open diensten deze week, met spring-links; rustige bevestiging als alles ingevuld
     is (geen onnodige waarschuwing). */
  .kp-weekbanner{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:14px;background:var(--card);}
  .kp-weekbanner.heeftopen{border-color:var(--rust);}
  .kp-weekbanner ul{margin:6px 0 0 18px;padding:0;font-size:13px;}
  .kp-weekbanner li{cursor:pointer;}
  .kp-weekbanner li:hover{text-decoration:underline;}
  .kp-allinvuld{color:var(--green-deep);font-size:12.5px;font-weight:600;}
  .kp-daybadges{display:flex;gap:4px;}
  .kp-badge-optie{width:8px;height:8px;border-radius:50%;background:var(--purple);}
  .kp-badge-open{width:8px;height:8px;border-radius:50%;background:var(--rust);}
  .kp-openbadge{display:inline-block;background:var(--rust);color:#fff;border-radius:100px;padding:1px 7px;font-size:9.5px;font-weight:700;}
  .kp-rij-open td{color:var(--rust);}
  .kp-highlight{outline:2px solid var(--rust);outline-offset:2px;}
  /* Dagagenda: tijdlijn 06:00-24:00, tijdsgetrouwe blokken per diensttype, gestreept voor optie. */
  .kp-agenda-wrap{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:10px 10px 10px 54px;position:relative;overflow:hidden;margin-bottom:14px;}
  .kp-agenda{position:relative;}
  .kp-agenda-hourline{position:absolute;left:-46px;right:0;border-top:1px dashed var(--line);}
  .kp-agenda-hourline span{position:absolute;left:0;top:-8px;font-family:var(--mono);font-size:10px;color:var(--faint);width:40px;text-align:right;}
  .kp-agenda-block{position:absolute;border-radius:8px;padding:4px 6px;font-size:11px;overflow:hidden;box-sizing:border-box;border:1px solid rgba(0,0,0,.08);}
  .kp-agenda-blocktitle{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .kp-agenda-blockmeta{font-size:9.5px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .kp-agenda-blockoptie{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;}
  .kp-blok-mep{background:var(--blue-soft);color:var(--blue);}
  .kp-blok-event{background:var(--purple-soft);color:var(--purple);}
  .kp-blok-opruimen{background:var(--grey-soft);color:var(--grey);}
  .kp-blok-tasting{background:var(--orange-soft);color:var(--orange);}
  .kp-blok-optie{background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 6px, transparent 6px 12px);}
  /* Evaluatie: gepland vs werkelijk, kleurbadge op basis van instelbare afwijkingsdrempel. */
  .eval-badge{display:inline-block;margin-top:2px;padding:2px 8px;border-radius:100px;font-size:11px;font-weight:700;}
  .eval-groen{background:var(--green);color:var(--on-green);}
  .eval-oranje{background:var(--amber);color:#fff;}
  .eval-rood{background:var(--rust);color:#fff;}
  .eval-neutraal{background:var(--grey-soft);color:var(--soft);}
  /* Vaste primaire "+" (UX-ronde 2.20.0): overal dezelfde positie, grootte, stijl en staten. */
  .fab{position:fixed;right:max(var(--rand-min), calc((100% - var(--inhoud-max)) / 2 + var(--inhoud-pad)));bottom:calc(28px + env(safe-area-inset-bottom));z-index:55;width:64px;height:64px;border-radius:50%;background:var(--green);color:var(--on-green);border:none;font-size:36px;font-weight:500;line-height:62px;text-align:center;padding:0;cursor:pointer;box-shadow:0 10px 26px rgba(40,34,24,.30);transition:transform .12s ease,background .12s ease,box-shadow .12s ease;}
  .fab:hover{background:var(--green-deep);box-shadow:0 12px 30px rgba(40,34,24,.36);}
  .fab:active{transform:scale(.94);}
  .fab:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
  .fab:disabled,.fab[aria-disabled="true"]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none;}
  /* App-feedback v1: vaste knop linksonder, boven geopende vensters (z 61) maar onder het inlogscherm (z 200). */
  .fbbtn{position:fixed;right:max(var(--rand-min), calc((100% - var(--inhoud-max)) / 2 + var(--inhoud-pad)));bottom:calc(28px + env(safe-area-inset-bottom));z-index:61;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:600;box-shadow:0 2px 10px rgba(0,0,0,.15);cursor:pointer;}
  .fbbtn:hover{background:var(--paper);}
  /* UI-correctie 2.20.0: Feedback staat rechtsonder, direct boven de "+" (vaste tussenruimte 12 px).
     Zonder "+" op het scherm schuift Feedback naar de plek van de "+". */
  :root{--fab-maat:64px;--fab-onder:28px;--fab-tussen:12px;}
  body.fab-aan .fbbtn{bottom:calc(var(--fab-onder) + var(--fab-maat) + var(--fab-tussen) + env(safe-area-inset-bottom));}
  @media (max-width:560px){:root{--fab-maat:60px;--fab-onder:40px;}.fbbtn{bottom:calc(40px + env(safe-area-inset-bottom));padding:9px 12px;font-size:13px;}}
  @media (max-width:560px){.fab{bottom:calc(40px + env(safe-area-inset-bottom));width:60px;height:60px;line-height:58px;font-size:34px;}}
  .crud-actions{margin-top:26px;display:flex;gap:10px;}
  .delbtn{width:100%;border:1px solid var(--rust);background:transparent;color:var(--rust);border-radius:11px;padding:12px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:var(--sans);}
  .delbtn:hover{background:var(--rust-soft);}
  .editbtn{width:100%;border:1px solid var(--green);background:transparent;color:var(--green);border-radius:11px;padding:12px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:var(--sans);}
  .editbtn:hover{background:var(--card-2);}
  .voicecorrectbtn{width:100%;border:1px solid var(--amber);background:transparent;color:var(--amber);border-radius:11px;padding:12px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:var(--sans);}
  .voicecorrectbtn:hover{background:var(--amber-soft);}
  .form-body{padding:24px 28px 30px;}
  .form-row{margin-bottom:16px;}
  .form-row label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-family:var(--mono);margin-bottom:7px;}
  .form-row input,.form-row select,.form-row textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font-size:14.5px;font-family:var(--sans);}
  .form-row textarea{resize:vertical;min-height:90px;line-height:1.5;}
  .form-row input:focus-visible,.form-row select:focus-visible,.form-row textarea:focus-visible{outline:2px solid var(--green);border-color:var(--green);}
  /* .ingrow was een platte grid-rij met 4 directe kinderen (bedrag/eenheid/naam/verwijderen).
     Branch receptuur-productkeuzes-mvp voegt een tweede regel toe (.ingrow-prod, de productkeuze-
     status per ingredient) onder de bestaande velden, dus de oorspronkelijke grid-opmaak verhuist
     naar .ingrow-main en .ingrow zelf wordt een simpele verticale stapeling van die twee regels. */
  .ingrow{margin-bottom:7px;}
  .ingrow-main{display:grid;grid-template-columns:70px 90px 1fr 34px;gap:7px;}
  .ingrow input{padding:9px 10px;font-size:14px;}
  .ingrow button{border:1px solid var(--line);background:var(--card-2);color:var(--rust);border-radius:8px;cursor:pointer;font-size:16px;}
  .ingrow-prod{margin-top:4px;min-height:22px;display:flex;align-items:center;}
  .ingrow-prod:empty{margin-top:0;min-height:0;}
  .ingrow-prod-btn{border:1px dashed var(--line);background:transparent;color:var(--soft);border-radius:7px;
    cursor:pointer;font-size:12.5px;padding:3px 9px;display:inline-flex;align-items:center;gap:5px;}
  .ingrow-prod-btn:hover{border-color:var(--soft);}
  .prodbadge{display:inline-flex;align-items:center;gap:5px;border-radius:7px;padding:3px 9px;font-size:12.5px;
    cursor:pointer;border:1px solid transparent;}
  .prodbadge-ok{background:var(--green);color:var(--on-green);}
  .prodbadge-warn{background:var(--amber-soft);color:var(--amber);border-color:var(--amber);}
  .prodbadge-none{background:var(--rust-soft);color:var(--rust);border-color:var(--rust);}
  .prodbadge-nonoodig{background:var(--card-2);color:var(--faint);border-color:var(--line);}
  /* Productzoeker-overlay: hergebruikt de bestaande .overlay/.sheet-shell (zie #pickOverlay
     hierboven), alleen de inhoud van de sheet krijgt eigen klassen. */
  .prodpick-head{margin-bottom:10px;}
  .prodpick-orig{font-size:13px;color:var(--faint);margin-bottom:2px;}
  .prodpick-meaning{display:flex;gap:8px;align-items:center;margin:8px 0;}
  .prodpick-meaning input{flex:1;padding:8px 10px;font-size:14px;}
  .prodpick-search{width:100%;padding:9px 10px;font-size:14px;margin-bottom:8px;}
  .prodpick-results{max-height:280px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;}
  .prodpick-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 11px;
    border-bottom:1px solid var(--line);cursor:pointer;}
  .prodpick-row:last-child{border-bottom:none;}
  .prodpick-row:hover{background:var(--card-2);}
  .prodpick-row-name{font-size:14px;}
  .prodpick-row-sup{font-size:12px;color:var(--faint);}
  .prodpick-empty{padding:14px;text-align:center;color:var(--faint);font-size:13px;}
  .prodpick-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
  .prodpick-actions button{padding:8px 12px;font-size:13.5px;border-radius:8px;cursor:pointer;border:1px solid var(--line);background:var(--card-2);}
  .prodpick-tmpform{border-top:1px solid var(--line);margin-top:12px;padding-top:12px;}
  .prodpick-tmpform input,.prodpick-tmpform textarea{width:100%;padding:8px 10px;font-size:14px;margin-bottom:7px;}
  /* Statusteller bovenaan de ingredientenlijst (Stap 7-8: werkvoorraad opvraagbaar + teller). */
  .prodcount-bar{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:9px;font-size:12.5px;color:var(--soft);}
  .prodcount-item{display:inline-flex;align-items:center;gap:5px;}
  .prodcount-dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
  .prodcount-dot.ok{background:var(--green);}
  .prodcount-dot.warn{background:var(--amber);}
  .prodcount-dot.none{background:var(--rust);}
  .addingbtn{border:1px dashed var(--line);background:transparent;color:var(--green-deep);border-radius:9px;padding:9px;font-size:13px;cursor:pointer;font-family:var(--sans);width:100%;margin-top:2px;}
  .form-actions{display:flex;gap:10px;margin-top:22px;}
  .form-actions .save{flex:1;border:none;background:var(--green);color:var(--on-green);border-radius:11px;padding:13px;font-size:14.5px;font-weight:600;cursor:pointer;font-family:var(--sans);}
  .form-actions .cancel{border:1px solid var(--line);background:transparent;color:var(--soft);border-radius:11px;padding:13px 20px;font-size:14px;cursor:pointer;font-family:var(--sans);}
  .backup{display:flex;gap:8px;margin-top:16px;}
  .backup button{flex:1;border:1px solid var(--line);background:var(--card-2);color:var(--soft);border-radius:9px;padding:10px;font-size:12.5px;cursor:pointer;font-family:var(--sans);}
  .backup-note{font-size:12px;color:var(--faint);font-style:italic;margin:12px 0 0;line-height:1.5;}
  .scanbox{margin-bottom:20px;}
  .scanbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:1px dashed var(--green);background:color-mix(in srgb,var(--green) 6%,transparent);color:var(--green-deep);border-radius:11px;padding:13px 16px;font-size:14.5px;font-weight:600;cursor:pointer;font-family:var(--sans);}
  .scanbtn:hover{background:color-mix(in srgb,var(--green) 12%,transparent);}
  .scanbtn:disabled{opacity:.6;cursor:default;}
  .scan-status{font-size:12.5px;margin:10px 2px 0;line-height:1.5;}
  .scan-status.busy{color:var(--soft);}
  .scan-status.err{color:var(--rust);font-weight:600;}
  .scan-status.ok{color:var(--green-deep);font-weight:600;}
  .form-row label .badge{text-transform:none;letter-spacing:normal;font-family:var(--sans);vertical-align:middle;}
  .importzone{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1.5px dashed var(--green);background:color-mix(in srgb,var(--green) 5%,transparent);border-radius:12px;padding:10px 14px;margin-bottom:14px;transition:background .15s,border-color .15s;}
  .importzone.dragover{background:color-mix(in srgb,var(--green) 14%,transparent);border-color:var(--green-deep);}
  .importzone:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
  .importzone-ic{width:19px;height:19px;stroke:var(--green-deep);fill:none;stroke-width:1.8;flex-shrink:0;}
  .importzone-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:180px;}
  .importzone-text strong{font-size:13px;color:var(--ink);font-weight:700;}
  .importzone-text span{font-size:11.5px;color:var(--soft);}
  /* .importzone-actions: aparte flex-rij voor alle knoppen in de importzone (foto maken, bestand
     kiezen, plak tekst, en straks een 4e knop voor spraakmemo). Los van .importzone-text
     getrokken zodat de knoppenrij altijd netjes kan wrappen (bv. op mobiel naar 2 regels) zonder
     dat de tekst ertussen springt. Nieuwe knoppen: gewoon een .importzone-browse-knop toevoegen
     als kind van deze div, de wrap/gap doet de rest. */
  .importzone-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
  .importzone-browse{border:1px solid var(--green);background:var(--card);color:var(--green-deep);border-radius:8px;padding:6px 11px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--sans);white-space:nowrap;}
  .importzone-browse:hover{background:var(--card-2);}
  .importzone-browse svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;vertical-align:-2px;margin-right:4px;}
  .importzone-browse.importzone-paste-submit{background:var(--green);color:var(--on-green);border-color:var(--green);}
  .importzone-browse.importzone-paste-submit:hover{background:var(--green-deep);}
  .importzone-pastebox{margin:-6px 0 18px;}
  .importzone-paste-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;}
  /* Op mobiel bestaat de FAB ("+"-knop) al met hetzelfde 5-opties-menu, en slepen is toch geen
     mobiel gebaar — daarom hier nog verder verkleind/onopvallender, zonder de zone of zijn
     functionaliteit (drag&drop, de 3 knoppen) te verwijderen. */
  @media (max-width:560px){
    .importzone{gap:8px;padding:7px 10px;margin-bottom:10px;border-style:solid;border-width:1px;}
    .importzone-ic{width:15px;height:15px;}
    .importzone-text strong{font-size:11.5px;}
    .importzone-text span{display:none;}
    .importzone-browse{padding:5px 9px;font-size:11px;}
  }
  .sheet.wide{max-width:820px;}
  /* DRANKENSCHEMA (2.23.0) */
  #dkOverlay{z-index:61;} #dkVraagOverlay{z-index:62;}
  .dk-kaart{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0;background:var(--card);}
  .dk-rij{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
  .dk-knop{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:9px;padding:6px 11px;font-size:12.5px;cursor:pointer;font-family:var(--sans);line-height:1.2;}
  .dk-knop.hoofd{border-color:var(--green);background:var(--green);color:var(--on-green);font-weight:600;}
  .dk-knop:hover{border-color:var(--green);}
  .dk-melding{border-left:3px solid var(--amber);background:var(--amber-soft);padding:10px 12px;border-radius:8px;font-size:13px;margin:10px 0;line-height:1.45;}
  .dk-klein{font-size:12px;color:var(--faint);}
  .dk-in{padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font-size:13px;font-family:var(--sans);}
  .dk-aantal{width:72px;text-align:right;}
  .dk-uitleg{font-size:13px;line-height:1.5;color:var(--soft);background:var(--card-2);border-radius:8px;padding:8px 12px;}
  /* Eventmap A.Overzicht-koptekst + B/C/D/E-tabs (HERSTRUCTURERING-RONDE-2, 20-9-2026, sectie 8).
     em-overzicht/em-tabs zitten direct in .sheet-body (die al 24px/28px/30px padding geeft aan al
     zijn kinderen) - de negatieve zij-marge laat de koptekst-band vol-breed doorlopen tot de rand
     van het sheet, met eigen padding om de tekst weer netjes uit te lijnen. */
  .em-overzicht{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 -28px 18px;padding:14px 28px;background:var(--card-2);border-bottom:1px solid var(--line);border-top:1px solid var(--line);font-size:13px;color:var(--soft);}
  .em-overzicht .em-ov-item b{color:var(--ink);font-weight:600;}
  .em-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
  .em-tab-btn{border:1px solid var(--line);background:var(--card);color:var(--soft);border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:var(--sans);}
  .em-tab-btn.on{background:var(--green);border-color:var(--green);color:#fff;}
  .em-tabpane .bs-section:first-child{margin-top:0;}
  .impq-progress{font-size:13px;color:var(--soft);margin:0 0 14px;font-family:var(--mono);}
  .impq-list{display:flex;flex-direction:column;gap:10px;}
  .impq-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:13px 16px;background:var(--card);cursor:pointer;}
  .impq-row:hover{border-color:var(--green);}
  .impq-row.err{border-color:var(--rust);background:var(--rust-soft);cursor:pointer;}
  .impq-row.busy{cursor:default;opacity:.75;}
  .impq-row.saved{opacity:.55;cursor:default;}
  .impq-main{flex:1;min-width:0;}
  .impq-name{font-weight:600;font-size:14.5px;}
  .impq-meta{font-size:12px;color:var(--faint);font-family:var(--mono);margin-top:2px;}
  .impq-err-msg{font-size:12.5px;color:var(--rust);margin-top:4px;}
  .impq-arrow{color:var(--green);font-size:19px;font-weight:700;flex-shrink:0;}
  .impq-empty{color:var(--faint);font-size:14px;padding:18px;text-align:center;border:1px dashed var(--line);border-radius:11px;}
  .gate{position:fixed;inset:0;z-index:200;background:var(--paper);display:flex;align-items:center;justify-content:center;padding:24px;}
  .gate.hide{display:none;}
  .gate-box{text-align:center;max-width:320px;width:100%;}
  .gate-logo{font-family:var(--serif);font-size:34px;font-weight:800;letter-spacing:-.01em;text-transform:lowercase;color:var(--green-deep);}
  .gate-sub{color:var(--soft);font-size:14px;margin:6px 0 20px;}
  .gate input{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--ink);font-size:15px;font-family:var(--sans);margin-bottom:10px;}
  .gate input:focus-visible{outline:2px solid var(--green);border-color:var(--green);}
  .gate button{width:100%;padding:13px;border:none;border-radius:11px;background:var(--green);color:var(--on-green);font-size:15px;font-weight:600;cursor:pointer;font-family:var(--sans);}
  .gate-err{color:var(--rust);font-size:13px;margin-top:10px;min-height:18px;}
  .gate-hint{color:var(--faint);font-size:12px;margin:-4px 0 10px;text-align:left;line-height:1.35;}
  .gate-msg{color:var(--green-deep);font-size:13.5px;font-weight:600;margin-top:10px;}
  .gate-loading{color:var(--soft);font-size:14px;margin-top:18px;}
  .gate-ver{color:var(--faint);font-size:11.5px;font-family:var(--mono);margin-top:22px;letter-spacing:.02em;}
  /* Onboarding (29-9-2026): "wachtwoord vergeten"-link onder het inlogformulier, en het readonly
     e-mailveld op het "Account instellen"/"Nieuw wachtwoord instellen"-scherm hieronder. */
  .gate-link{display:block;width:100%;background:none;border:none;color:var(--green-deep);font-size:13px;font-family:var(--sans);text-decoration:underline;cursor:pointer;padding:2px 0 0;margin:0 0 4px;}
  .gate input[readonly]{background:var(--paper);color:var(--soft);}
  .ver-badge{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-left:8px;letter-spacing:.02em;white-space:nowrap;}
  .modetog{display:flex;border:1px solid var(--line);border-radius:100px;overflow:hidden;background:var(--card);}
  .modetog button{border:none;background:transparent;color:var(--soft);font-size:12.5px;font-weight:600;padding:7px 14px;cursor:pointer;font-family:var(--sans);}
  .modetog button.on{background:var(--green);color:var(--on-green);}
  /* deptbar: hoofdnavigatie boven alles (Ontwikkelen/Voorstellen/Agenda/Produceren/Office):
     dit is de primaire manier om tussen de 5 afdelingen te wisselen; per afdeling wordt
     precies 1 van de *Body-containers hieronder getoond (zie setDept() in het script). */
  /* .deptbar/.deptbar button (19-9-2026, top-nav-overhaul): compacter gemaakt t.o.v. de vorige
     versie (6 knoppen) omdat er nu 8 knoppen zijn, waaronder de langere labels "Eventmanagement"
     en "Personeel planner" - padding/lettergrootte/gap allemaal iets verkleind zodat alle 8 op een
     normale desktop/laptop-breedte netjes op 1 regel blijven staan (flex-wrap:wrap blijft als
     vangnet staan voor kleinere schermen, zie ook @media hieronder). */
  .deptbar{display:flex;gap:4px;flex-wrap:wrap;padding:10px 0 4px;border-bottom:1px solid var(--line);margin-bottom:10px;}
  .deptbar button{border:1px solid var(--line);background:var(--card);color:var(--soft);border-radius:9px;padding:7px 11px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:var(--sans);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
  .deptbar button.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}
  .deptbar button:not(.on):hover{border-color:var(--green);}
  @media (max-width:1180px){.deptbar button{padding:7px 8px;font-size:11.5px;}}
  /* subnav: tweede-laags rij binnen Ontwikkelen (Recepten/AI gegenereerd/Gerechten/Menu's/
     Foodstations) — hergebruikt de bestaande .aitog-knopstijl, alleen nu in een eigen rij i.p.v.
     los in de topbar, en met een expliciete "Recepten"-knop erbij (was voorheen impliciet). */
  .subnav{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:6px 0 2px;}
  /* dept-placeholder: "binnenkort"-scherm voor Office/Voorstellen/Produceren — puur informatief,
     toont de bekende toekomstige onderdelen per afdeling zodat Stefan al kan zien waar het
     naartoe gaat, zonder dat er al functionaliteit achter zit. */
  .dept-placeholder{padding:22px 0 40px;}
  .dept-placeholder .dp-head{padding:0 0 18px;border-bottom:1px solid var(--line);margin-bottom:22px;}
  .dept-placeholder .dp-head h2{font-family:var(--serif);font-size:clamp(22px,4vw,30px);margin:0 0 6px;font-weight:700;}
  .dept-placeholder .dp-head p{color:var(--soft);font-size:14px;margin:0;}
  .dept-placeholder .dp-soon{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:var(--amber-soft);color:var(--amber);border:1px solid var(--amber);border-radius:100px;padding:3px 10px;margin-bottom:10px;}
  .dp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
  .dp-card{background:var(--card);border:1px dashed var(--line);border-radius:12px;padding:16px 18px;}
  .dp-card h3{font-family:var(--serif);font-size:16px;margin:0 0 8px;font-weight:700;color:var(--green-deep);}
  .dp-card ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--soft);line-height:1.65;}
  /* dept-choice/dc-card: kopjes-keuzeschermen (afdelingsdashboards + het keuzescherm binnen
     Ontwikkelen). HERSTRUCTURERING-RONDE-3 (20-9-2026, sectie 1-3, op verzoek van Stefan):
     COMPACTE afdelingsdashboards - standaard 4 kaarten naast elkaar op een normaal laptop/
     desktopscherm, met een nette terugval naar 3/2/1 kolommen op kleinere schermen. Veel minder
     padding/gap en kleinere lettergroottes dan de vorige (grote, met veel witruimte) kaartversie,
     zodat 12 kaarten praktisch zonder scrollen passen en 16 kaarten ook nog compact ogen. De
     kaart zelf blijft bewust simpel: klein icoon, titel, en hooguit één regel toelichting
     (.dc-sub wordt met line-clamp tot 1 regel beperkt i.p.v. door te lopen naar meerdere regels).
     .dept-choice.home/.dc-card.big (verderop) blijven ONGEWIJZIGD - de startpagina had deze
     compacte stijl al sinds de eerdere homepage-redesign van 18-9-2026, en wint door hogere CSS-
     specificiteit (.dept-choice.home) altijd van de responsive regels hieronder. */
  .dept-choice{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;padding:20px 0 32px;}
  .dc-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px 12px;cursor:pointer;font-family:var(--sans);min-height:84px;justify-content:center;}
  .dc-card:hover{border-color:var(--green);}
  .dc-ic{font-size:18px;line-height:1;}
  .dc-t{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--ink);line-height:1.25;}
  .dc-sub{font-size:11.5px;color:var(--soft);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;line-height:1.35;}
  @media (max-width:680px){.dept-choice{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:420px){.dept-choice{grid-template-columns:repeat(1,1fr);}}
  /* dept-choice.home/dc-card.big: het startscherm. Homepage-compact-redesign (18-9-2026, op
     verzoek van Stefan): precies 8 tegels, 4 kolommen x 2 rijen, compact genoeg om zonder
     scrollen te passen op een normale laptop/desktop-resolutie - vandaar veel minder gap/padding
     en kleinere lettergroottes dan de vorige (6-tegel) versie hiervan. #homeBody krijgt ook zelf
     minder padding, zie verderop bij .dept-placeholder. Onder ~880px (tablet/telefoon) vallen de
     tegels terug naar 2 kolommen x 4 rijen; scrollen daar is geen probleem, de eis "geen scrollen"
     gold specifiek voor normale desktop/laptop-schermen. */
  .dept-choice.home{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;padding:16px 0 20px;}
  .dc-card.big{padding:26px 22px 24px;border-radius:16px;gap:8px;min-height:156px;justify-content:center;}
  .dc-card.big .dc-ic{font-size:30px;}
  .dc-card.big .dc-t{font-size:18px;}
  .dc-card.big .dc-sub{font-size:12.5px;}
  @media (max-width:880px){.dept-choice.home{grid-template-columns:repeat(2,1fr);}}
  /* #homeBody: eigen, kleinere padding dan de andere .dept-placeholder-schermen (die houden hun
     eigen 22px/40px) - de startpagina heeft geen titel/subtitel meer (zie renderHome), dus hoeft
     niet dezelfde luchtige marge te hebben. */
  #homeBody{padding-top:10px;padding-bottom:14px;}
  /* agenda-tabs: klein tabblad-kiezertje bovenaan Agenda (Mijn werk/Eventagenda/Eventmanagement),
     zie agendaView in het script. Zelfde stijlfamilie als .langtog, maar met 3 opties. */
  .agenda-tabs{display:flex;gap:6px;margin:2px 0 18px;flex-wrap:wrap;}
  .agenda-tab{border:1px solid var(--line);background:var(--card);color:var(--soft);font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:100px;cursor:pointer;font-family:var(--sans);}
  .agenda-tab.on{background:var(--green);color:var(--on-green);border-color:var(--green);}
  /* backb: kleine terugknop boven een gekozen kopje binnen Ontwikkelen, terug naar dept-choice. */
  .backb{border:none;background:transparent;color:var(--green-deep);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--sans);padding:10px 0 4px;display:inline-flex;align-items:center;gap:4px;}
  .backb:hover{text-decoration:underline;}
  /* bs-section: het echte, werkende Brainstorm-onderdeel binnen Voorstellen (boven de nog
     statische "binnenkort"-kaarten). Zelfde kaartenraster als de rest van de app (.grid/.card). */
  .bs-section{margin:22px 0 30px;padding-bottom:22px;border-bottom:1px solid var(--line);}
  .bs-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px;}
  .bs-head h3{font-family:var(--serif);font-size:19px;margin:0;font-weight:700;}
  /* CORRECTIE 21 sept 2026 (technische opschoonronde, punt 6): de twee tussenkopjes "Keuken" en
     "Inkoop & leveringen" in Eventmap > Uitvoering gebruikten .dp-head, een klasse die alleen is
     opgemaakt binnen .dept-placeholder (zie hierboven). Buiten die context (zoals hier, in het
     eventSheet) viel de kop terug op de kale browser-standaardopmaak - dezelfde soort bug als eerder
     bij Agenda gevonden en opgelost (zie .agenda-head hierboven). Deze twee kopjes staan tussen
     kopjes van hetzelfde tabblad die wél consistent zijn opgemaakt via .bs-head h3 (Materiaal,
     Externe inhuur, Stroom & voorzieningen, Logistiek, Personeel). Met .em-subhead krijgen ze exact
     dezelfde letterproeven (grootte en gewicht) als die kopjes, puur visueel, zonder de bestaande
     HTML-structuur/spacing eromheen aan te passen. */
  .dp-head.em-subhead h3{font-size:19px;font-weight:700;}
  .bs-form{display:flex;flex-direction:column;gap:14px;max-width:var(--maat-formulier);}
  .bs-form label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-family:var(--mono);display:block;margin-bottom:6px;}
  .bs-form input,.bs-form select{width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font-size:14.5px;font-family:var(--sans);}
  .bs-form input:focus-visible,.bs-form select:focus-visible{outline:2px solid var(--green);border-color:var(--green);}
  .bs-transcript{white-space:pre-wrap;font-size:14px;line-height:1.6;background:var(--card-2);border:1px solid var(--line);border-radius:11px;padding:14px 16px;margin-top:8px;}
  /* inkoop */
  .ink-head{padding:26px 0 18px;border-bottom:1px solid var(--line);margin-bottom:22px;}
  .ink-head h2{font-family:var(--serif);font-size:clamp(24px,4vw,32px);margin:0 0 6px;font-weight:700;}
  .ink-head p{color:var(--soft);font-size:14px;margin:0;}
  .ink-event{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px;}
  .ink-field{display:flex;flex-direction:column;gap:6px;}
  .ink-field label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-family:var(--mono);}
  .ink-field input{padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font-size:14.5px;font-family:var(--sans);}
  .ink-field input:focus-visible{outline:2px solid var(--green);border-color:var(--green);}
  .ink-field.name input{min-width:240px;}
  .ink-sec{margin-bottom:30px;}
  .ink-sec h3{font-family:var(--serif);font-size:19px;margin:0 0 14px;font-weight:700;display:flex;align-items:center;gap:10px;justify-content:space-between;}
  .ink-sec h3 .cnt{font-family:var(--mono);font-size:12px;color:var(--faint);font-weight:400;}
  .menu-item{display:grid;grid-template-columns:1fr 120px 40px;gap:12px;align-items:center;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:11px;margin-bottom:9px;}
  .menu-item .mi-name{font-weight:600;font-size:14.5px;}
  .menu-item .mi-name small{display:block;color:var(--faint);font-weight:400;font-size:11.5px;font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;margin-top:2px;}
  .menu-item .mi-port{display:flex;align-items:center;gap:6px;}
  .menu-item .mi-port input{width:70px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--card-2);color:var(--ink);font-family:var(--mono);font-size:13px;text-align:right;}
  .menu-item .mi-port span{font-size:11px;color:var(--faint);}
  .menu-item .mi-del{border:none;background:transparent;color:var(--rust);cursor:pointer;font-size:18px;}
  .addmenu{border:1px dashed var(--line);background:transparent;color:var(--green-deep);border-radius:10px;padding:12px;font-size:13.5px;cursor:pointer;font-family:var(--sans);width:100%;font-weight:600;}
  .addmenu:hover{border-color:var(--green);}
  .ink-empty{color:var(--faint);font-size:14px;padding:18px;text-align:center;border:1px dashed var(--line);border-radius:11px;}
  .ink-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--card);}
  table.ink{width:100%;border-collapse:collapse;font-size:14px;min-width:520px;}
  table.ink th{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);font-weight:500;background:var(--card-2);}
  table.ink th.r,table.ink td.r{text-align:right;}
  table.ink td{padding:10px 14px;border-bottom:1px solid var(--line-soft,var(--line));}
  table.ink tbody tr:last-child td{border-bottom:none;}
  table.ink .amt{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--green-deep);font-weight:600;white-space:nowrap;}
  table.ink .price input{width:80px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:var(--card-2);color:var(--ink);font-family:var(--mono);font-size:13px;text-align:right;}
  table.ink .cost{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;color:var(--ink);}
  table.ink .sup input{width:130px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:var(--card-2);color:var(--ink);font-family:var(--sans);font-size:13px;}
  table.ink .sup input:focus-visible{outline:2px solid var(--green);border-color:var(--green);}
  .sup-group{border:1px solid var(--line);border-radius:11px;padding:14px 16px;margin-bottom:10px;background:var(--card);}
  .sup-group.none{background:var(--card-2);border-style:dashed;}
  .sup-group-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
  .sup-name{font-family:var(--serif);font-size:17px;font-weight:700;}
  .sup-sub{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:13px;color:var(--green-deep);font-weight:600;}
  .sup-dl{border:1px solid var(--green);background:transparent;color:var(--green-deep);border-radius:8px;padding:6px 11px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--sans);}
  .sup-dl:hover{background:color-mix(in srgb,var(--green) 12%,transparent);}
  .sup-line{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:14px;border-top:1px solid var(--line-soft,var(--line));}
  .sup-line:first-of-type{border-top:none;}
  .sup-line .sup-amt{font-family:var(--mono);font-size:13px;color:var(--faint);white-space:nowrap;}
  .na-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;}
  .na-grid input{padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font-size:14.5px;font-family:var(--mono);}
  .na-grid input:focus-visible{outline:2px solid var(--green);border-color:var(--green);}
  .na-diff.na-over{color:var(--rust);} .na-diff.na-under{color:var(--green-deep);}
  .na-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;}
  .na-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;}
  .na-card.big{grid-column:span 2;}
  .na-card .na-lab{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-family:var(--mono);}
  .na-card .na-val{font-family:var(--serif);font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;}
  .na-card .na-val small{font-family:var(--mono);font-size:12px;color:var(--faint);font-weight:400;}
  .na-card.good .na-val{color:var(--green-deep);} .na-card.bad .na-val{color:var(--rust);}
  .na-notes{width:100%;min-height:90px;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--ink);font-size:14px;font-family:var(--sans);line-height:1.55;resize:vertical;}
  .na-notes:focus-visible{outline:2px solid var(--green);border-color:var(--green);}
  .prod-checklist{display:flex;flex-direction:column;gap:6px;margin:10px 0;}
  .prod-ci{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);}
  .prod-ci input[type="checkbox"]{width:17px;height:17px;flex-shrink:0;accent-color:var(--green);}
  .prod-ci span{flex:1;font-size:14.5px;}
  .prod-ci span.done{text-decoration:line-through;color:var(--faint);}
  .prod-ci-del{border:none;background:none;color:var(--faint);cursor:pointer;font-size:13px;padding:2px 4px;}
  .prod-ci-del:hover{color:var(--ink);}
  .prod-ci-add{display:flex;gap:8px;margin-top:4px;}
  .prod-ci-add input{flex:1;padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font-size:14.5px;font-family:var(--sans);}
  .prod-ci-add input:focus-visible{outline:2px solid var(--green);border-color:var(--green);}
  @media (max-width:520px){.na-card.big{grid-column:span 1;}}
  table.ink .unitlbl{font-family:var(--mono);font-size:11px;color:var(--faint);margin-left:4px;}
  .ink-total{display:flex;justify-content:space-between;align-items:baseline;padding:16px 4px 2px;border-top:2px solid var(--green);margin-top:2px;flex-wrap:wrap;gap:8px;}
  .ink-total .lbl{font-size:14px;color:var(--soft);}
  .ink-total .val{font-family:var(--serif);font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;}
  .ink-total .per{font-size:13px;color:var(--faint);}
  .ink-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
  .ink-btn{border:1px solid var(--green);background:transparent;color:var(--green-deep);border-radius:10px;padding:11px 16px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:var(--sans);display:inline-flex;align-items:center;gap:8px;}
  .ink-btn.solid{background:var(--green);color:var(--on-green);border-color:var(--green);}
  .ink-btn:hover{background:color-mix(in srgb,var(--green) 12%,transparent);}
  .ink-btn.solid:hover{background:var(--green-deep);}
  .prod-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:11px;margin-bottom:9px;}
  .prod-item .p-name{font-weight:600;font-size:14.5px;}
  .prod-item .p-meta{font-family:var(--mono);font-size:12px;color:var(--faint);}
  .prod-item button{border:1px solid var(--line);background:var(--card-2);color:var(--green-deep);border-radius:8px;padding:7px 12px;font-size:12.5px;cursor:pointer;font-family:var(--sans);font-weight:600;}
  .pick-list{padding:14px 22px 26px;}
  .pick-cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-deep);margin:16px 0 8px;font-weight:700;}
  .pick-row{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:9px;margin-bottom:7px;cursor:pointer;background:var(--card);}
  .pick-row:hover{border-color:var(--green);}
  .pick-row .pr-name{font-size:14px;font-weight:500;}
  .pick-row .pr-add{color:var(--green);font-size:19px;font-weight:700;}
  @media (max-width:560px){.menu-item{grid-template-columns:1fr 100px 34px;}}
  .pp-eventname{font-family:var(--serif);font-size:18px;font-weight:600;padding:6px 0;}
  .pp-phasenum{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--green);color:var(--on-green);font-size:13px;font-family:var(--mono);margin-right:4px;}
  .prodplan{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:10px;}
  .prodplan .pp-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px;}
  .prodplan .pp-name{font-family:var(--serif);font-size:17px;font-weight:600;}
  .prodplan .pp-meta{font-family:var(--mono);font-size:12px;color:var(--faint);}
  .prodplan .pp-prep{margin:0 0 10px;font-size:14px;color:var(--soft);line-height:1.55;}
  .prodplan .pp-recipe{border:none;background:transparent;color:var(--green-deep);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--sans);padding:0;}
  .eq-site{font-family:var(--mono);font-size:11px;background:var(--amber-soft);color:var(--amber);border:1px solid var(--amber);border-radius:100px;padding:3px 9px;white-space:nowrap;}
  .eq-kitchen{font-family:var(--mono);font-size:11px;background:var(--card-2);color:var(--faint);border:1px solid var(--line);border-radius:100px;padding:3px 9px;white-space:nowrap;}