:root{
  --bg:#f4f4f1; --panel:#ffffff; --panel-2:#fbfbf9; --ink:#1b1b18; --ink-soft:#55554f;
  --muted:#8a8a82; --hair:#e6e6e1; --hair-2:#d9d9d2;
  --accent:#1887C1; --accent-2:#136fa0; --accent-soft:#e3f1f8; --accent-ink:#0f5f88; --accent-ring:rgba(24,135,193,.4);
  --tech-dtf:#00aeef; --tech-vinyl:#1b1b18; --tech-borduren:#e6007e; --tech-rhinestones:#f2c41b;
  --danger:#c4443b; --warn:#c98a00;
  --shadow:0 1px 2px rgba(20,22,21,.05),0 10px 30px rgba(20,22,21,.08);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* wint van .modal/.ctx-toolbar display */
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;-webkit-font-smoothing:antialiased;overflow:hidden}
button{font-family:inherit;cursor:pointer}
b{font-weight:650}
small{font-weight:400}

/* Topbar */
.topbar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:var(--panel);border-bottom:1px solid var(--hair)}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{height:32px;width:auto;display:block}
.brand-tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:650;border-left:1px solid var(--hair-2);padding-left:12px}
.logo{width:30px;height:30px;display:grid;place-items:center;background:var(--accent);color:#fff;border-radius:8px;font-size:16px}
.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.brand-txt b{font-size:16px;letter-spacing:.14em}
.brand-txt small{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.topbar-actions{display:flex;align-items:center;gap:8px}
/* Tools-switcher tussen de tekentafels */
.dg-tools{display:flex;gap:3px;background:rgba(20,30,26,.06);border-radius:9px;padding:3px}
.dg-tools a{font:650 12px/1 system-ui,-apple-system,sans-serif;color:var(--muted,#6b7268);text-decoration:none;padding:7px 12px;border-radius:7px;white-space:nowrap;transition:color .13s,background .13s}
.dg-tools a:hover{color:var(--accent,#1887C1)}
.dg-tools a.cur{background:var(--panel,#fff);color:var(--accent,#1887C1);box-shadow:0 1px 3px rgba(0,0,0,.1)}
@media (max-width:680px){.dg-tools a{padding:7px 8px;font-size:11px}.brand-tag{display:none}}
.icon-btn{width:34px;height:34px;border:1px solid var(--hair-2);background:var(--panel);border-radius:8px;color:var(--ink);font-size:16px;display:grid;place-items:center}
.icon-btn:hover:not(:disabled){background:var(--panel-2);border-color:var(--accent)}
.icon-btn:disabled{opacity:.38;cursor:default}
.ghost-btn{height:34px;padding:0 12px;border:1px solid var(--hair-2);background:var(--panel);border-radius:8px;color:var(--ink-soft);font-family:var(--mono);font-size:12px}
.ghost-btn:hover{border-color:var(--accent);color:var(--accent)}
.sep{width:1px;height:22px;background:var(--hair-2)}
/* Persistente prijs+bestelknop in de desktop-header (2026-07-24, uit de Claude Design-vergelijking) —
   zodat je op een lang scherm niet naar beneden hoeft te scrollen om je totaal/CTA te zien. */
.topbar-order{display:flex;align-items:center;gap:12px;padding-left:12px;margin-left:4px;border-left:1px solid var(--hair-2)}
.topbar-order-total{display:flex;flex-direction:column;line-height:1.15;text-align:right}
.topbar-order-total small{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.topbar-order-total b{font-family:var(--mono);font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.topbar-order-btn{height:36px;padding:0 16px;border:none;border-radius:9px;background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#fff;font-size:13px;font-weight:650;white-space:nowrap;box-shadow:0 1px 2px rgba(15,95,136,.4),inset 0 1px 0 rgba(255,255,255,.18)}
.topbar-order-btn:hover{background:linear-gradient(180deg,var(--accent-2),#0d5a83)}
.topbar-order-btn:active{transform:translateY(1px)}
@media (max-width: 1180px){ .topbar-order-total{display:none} }

/* Studio layout */
.studio{display:grid;grid-template-columns:100px 420px 1fr 300px;height:calc(100% - 56px)}
.panel{background:var(--panel);overflow-y:auto}
.tools{border-right:1px solid var(--hair)}
.side{border-left:1px solid var(--hair);display:flex;flex-direction:column}
.panel-sec{padding:18px 18px 20px;border-bottom:1px solid var(--hair)}
.panel-sec h3{margin:0 0 12px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:650}
.panel-sec h3 small{text-transform:none;letter-spacing:0;color:var(--muted);font-weight:400}
.step-no{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:0;color:var(--accent-ink);background:var(--accent-soft);border-radius:5px;padding:2px 5px;margin-right:8px;vertical-align:middle;transform:translateY(-1px)}

.tool-btn{width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:8px;border:1px solid var(--hair-2);border-radius:10px;background:var(--panel);color:var(--ink);font-size:14px;font-weight:550;text-align:left}
.tool-btn:hover{border-color:var(--accent);background:var(--accent-soft)}
.tool-btn span{width:26px;height:26px;flex:none;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);border-radius:7px;font-weight:700}

.field{width:100%;height:38px;padding:0 11px;border:1px solid var(--hair-2);border-radius:8px;background:var(--panel);color:var(--ink);font-size:14px;font-family:inherit;margin-bottom:10px}
.field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
select.field{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 16px) 16px,calc(100% - 11px) 16px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.lbl{display:block;font-size:12px;color:var(--muted);margin:2px 0 6px;font-weight:550}
.hint{font-size:11.5px;color:var(--muted);line-height:1.5;margin:6px 0 0}

/* Techniek-tegels */
.tech-tiles{display:flex;flex-direction:column;gap:7px}
.tech-tile{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;padding:10px 13px 10px 19px;border:1px solid var(--hair-2);border-radius:10px;background:var(--panel);color:var(--ink);font-size:14px;font-weight:600;line-height:1.2;position:relative;overflow:hidden}
.tech-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tc,var(--hair-2))}
.tech-tile[data-tech="dtf"]{--tc:var(--tech-dtf)}
.tech-tile[data-tech="vinyl"]{--tc:var(--tech-vinyl)}
.tech-tile[data-tech="borduren"]{--tc:var(--tech-borduren)}
.tech-tile[data-tech="rhinestones"]{--tc:var(--tech-rhinestones)}
.tech-tile small{font-weight:400;font-size:11px;color:var(--muted)}
.tech-tile:hover{border-color:var(--accent);background:var(--accent-soft)}
.tech-tile.active{border-color:var(--accent);background:var(--accent);color:#fff}
.tech-tile.active small{color:rgba(255,255,255,.82)}

.swatches{display:flex;flex-wrap:wrap;gap:8px}
.sw-note{font-size:12px;color:var(--muted);line-height:1.45;display:block}
.sw{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--hair-2);cursor:pointer}
.sw.active{box-shadow:0 0 0 2px var(--accent)}

/* Stage */
.stage-wrap{position:relative;display:flex;flex-direction:column;align-items:center;background:
  radial-gradient(55% 40% at 50% 6%,rgba(14,124,116,.06),transparent 72%),
  radial-gradient(circle at 1px 1px,rgba(20,22,21,.045) 1px,transparent 0) 0 0/22px 22px,
  radial-gradient(circle at 50% 36%,#ffffff,var(--bg) 74%);overflow:hidden;padding:16px 20px 20px}
/* Micro-interacties */
.tool-btn,.tech-tile,.sw,.icon-btn,.ghost-btn,.primary-btn,.view-tabs button,.icon-card,.tpl-card,.seg button{transition:transform .12s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease,color .16s ease}
.tool-btn:hover,.primary-btn:hover:not(:disabled){transform:translateY(-1px)}
.icon-card:hover,.tpl-card:hover{transform:translateY(-2px)}
.view-tabs{display:flex;gap:6px;margin-bottom:6px;background:var(--panel);border:1px solid var(--hair);border-radius:11px;padding:3px}   /* FIX (03-08): canvas krijgt voorrang */
.view-tabs button{border:none;background:transparent;color:var(--ink-soft);font-size:13px;font-weight:600;padding:5px 15px;border-radius:8px;display:flex;align-items:center;gap:7px}   /* FIX (03-08): 8px→5px, canvas krijgt voorrang */
.view-tabs button:hover{background:var(--panel-2)}
.view-tabs button.active{background:var(--accent);color:#fff}
.view-tabs button .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:.5}
.view-tabs button.active .dot{background:#fff;opacity:1}
.view-tabs button.has .dot{opacity:1}
.stage-body{position:relative;flex:1;display:grid;place-items:center;width:100%;min-height:0}
.pa-caption{margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.03em;text-align:center}
.pa-caption b{color:var(--accent-ink)}

/* Afmeting */
.size-grid{display:grid;grid-template-columns:auto 1fr;gap:9px 12px;align-items:center;margin-bottom:10px}
.size-grid label{font-size:13px;color:var(--ink-soft)}
.mm-in{position:relative;display:flex;align-items:center}
.mm-in input{margin:0;padding-right:34px}
.mm-in span{position:absolute;right:11px;font-size:12px;color:var(--muted);pointer-events:none}
.lock{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);cursor:pointer}
.lock input{accent-color:var(--accent)}
#size-cat{text-transform:none;letter-spacing:0;color:var(--accent-ink);font-weight:600}
.stage-inner{position:relative;box-shadow:var(--shadow);border-radius:14px;background:#fff;overflow:hidden}
/* Watermerk-overlays — alleen op het scherm (anti-screenshot-diefstal + branding), NOOIT in de canvas-export of het ontwerp-bestand */
.wm-tile{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.05;background-repeat:repeat;background-size:440px 300px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='440'%20height='300'%3E%3Ctext%20x='30'%20y='170'%20transform='rotate(-20%2030%20170)'%20font-family='Arial,Helvetica,sans-serif'%20font-size='23'%20font-weight='600'%20fill='%23111'%3EJ-Pro%20Solutions%3C/text%3E%3C/svg%3E")}
.wm-brand{position:absolute;right:10px;bottom:8px;pointer-events:none;z-index:3;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(20,20,20,.30)}
canvas{display:block;border-radius:14px;touch-action:none}

/* left:0/right:0 + margin:auto + fit-content = shrink-to-fit dat de VOLLE speelveldbreedte mag gebruiken
   (left:50% beperkte de beschikbare breedte tot de helft → balk wrapte onnodig) */
.ctx-toolbar{position:absolute;top:-9px;left:0;right:0;margin-inline:auto;width:fit-content;display:flex;align-items:center;gap:2px;background:linear-gradient(180deg,#464d54,#3c4249);border:1px solid rgba(0,0,0,.24);border-radius:13px;padding:5px 6px;box-shadow:0 10px 28px -12px rgba(0,0,0,.45);z-index:5}
/* alleen de eigen balk-knoppen (directe kinderen + menu-triggers); NIET de knoppen binnen popovers */
.ctx-toolbar>button,.ctx-menu>button{width:32px;height:32px;border:none;background:transparent;color:#fff;border-radius:8px;font-size:14px;display:grid;place-items:center;cursor:pointer}
/* Labels op de vaste knoppen (Grootte/Draaien/Kleur/Schikken) tonen we normaal WÉL — past ruim op één rij.
   Alleen in TEKST-modus verbergen we ze, want dan vraagt het brede tekst-lint (lettertype + B/I/U/S/Aa) de ruimte. */
.ctx-toolbar.text-mode #ctx-size-menu .has-pop>i,.ctx-toolbar.text-mode #ctx-rot-menu .has-pop>i,.ctx-toolbar.text-mode #ctx-color-menu .has-pop>i,.ctx-toolbar.text-mode #ctx-pos-menu .has-pop>i{display:none}
.ctx-toolbar.text-mode .notxt{display:none}   /* spiegelen inline bij iconen/afbeeldingen; in tekst-modus verborgen (ruimte) */
/* Tekst-opmaak (lettertype + B/I/U/S/Aa/uitlijnen) alleen tonen als er een TEKST geselecteerd is (.text-mode) */
.ctx-toolbar:not(.text-mode) .txt-only{display:none}
.ctx-toolbar>button:hover,.ctx-menu>button:hover{background:rgba(255,255,255,.18);color:#fff}
.ctx-toolbar>button.on{background:rgba(255,255,255,.26);color:#fff}
.ctx-toolbar>button.danger:hover{background:var(--danger);color:#fff}

/* Layers */
.layers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.layers .empty{color:var(--muted);font-size:13px;padding:6px 2px;line-height:1.5}
.layer{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--hair-2);border-radius:9px;background:var(--panel);cursor:pointer;font-size:13px}
.layer:hover{border-color:var(--accent)}
.layer.sel{border-color:var(--accent);background:var(--accent-soft)}
.layer .ico{width:22px;height:22px;flex:none;display:grid;place-items:center;background:var(--panel-2);border-radius:6px;font-size:12px;color:var(--accent-ink)}
.layer .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer .sz{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.layer .del{color:var(--muted);font-size:14px;background:none;border:none;padding:2px 4px}
.layer .del:hover{color:var(--danger)}
/* FIX (03-08, Ryan: Splitsen-knop ook in het lagenpaneel, EN "de uitklapbutton is sowieso slecht
   zichtbaar") — eerdere versie was muted-grijs zonder rand/vlak, net als de kleine ✕; met een
   tekstlabel erbij ("⊟ Splitsen"/"⊞ Groeperen") heeft die stijl te weinig gewicht om als knop te
   worden herkend. Duidelijk afgebakende pil i.p.v. platte tekst. */
.layer .ungrp,.layer .regrp{flex:none;color:var(--accent-ink);font-size:11.5px;font-weight:600;background:var(--accent-soft);border:1px solid var(--accent);border-radius:6px;padding:4px 9px;white-space:nowrap}
.layer .ungrp:hover,.layer .regrp:hover{background:var(--accent);color:#fff}
.layer .layer-edit{flex:1;min-width:0;border:1px solid transparent;background:transparent;font-size:13px;font-family:inherit;color:var(--ink);padding:5px 7px;border-radius:6px}
.layer .layer-edit::placeholder{color:var(--muted)}
.layer .layer-edit:hover{border-color:var(--hair-2);background:var(--panel)}
.layer .layer-edit:focus{outline:none;border-color:var(--accent);background:var(--panel);box-shadow:0 0 0 2px var(--accent-soft)}
.layer:focus-within{border-color:var(--accent)}

/* Techniek-modal */
.tech-body{padding:18px}
.tech-body p,.tech-body .tech-text{color:var(--ink-soft);font-size:.95rem;line-height:1.6;margin:0}
.tech-body a{color:var(--accent-ink);font-weight:600;text-decoration:underline}
.tech-list{margin:12px 0 14px;padding-left:20px;display:flex;flex-direction:column;gap:5px}
.tech-list li{color:var(--ink-soft);font-size:.9rem;line-height:1.45}
.tech-list li b{color:var(--ink)}

/* Teamwear-modal */
.team-card{max-width:600px}
.team-body{padding:18px}
.team-intro{color:var(--ink-soft);font-size:.92rem;line-height:1.55;margin:0 0 16px}
.team-top{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--hair-2);border-radius:9px;padding:3px}
.seg button{border:none;background:transparent;color:var(--ink-soft);font-size:13px;font-weight:600;padding:6px 14px;border-radius:7px;display:flex;flex-direction:column;line-height:1.2;align-items:center;gap:1px}
.seg button small{font-weight:400;font-size:10px;color:var(--muted)}
.seg button.active{background:var(--accent);color:#fff}
.seg button.active small{color:rgba(255,255,255,.82)}
.team-count{display:flex;flex-direction:column;font-size:12px;color:var(--muted);font-weight:550;gap:5px}
.team-count .field{width:88px;margin:0}
.roster-head,.roster-row{display:grid;grid-template-columns:24px 1fr 62px 90px 28px;gap:8px;align-items:center}
.roster-head{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:650;padding:0 2px 7px}
.roster-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:7px;max-height:42vh;overflow-y:auto}
.roster-row .idx{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:center}
.roster-row .field{margin:0;height:36px}
.roster-row .ros-del{color:var(--muted);background:none;border:none;font-size:15px;padding:2px;line-height:1}
.roster-row .ros-del:hover{color:var(--danger)}
.roster-add-btn{width:100%;margin-bottom:4px}
.team-edit-btn{width:100%}
#team-preview{margin-bottom:10px}
.tech-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.tech-cta{margin:0;padding:11px 18px;font-size:14px}

/* Price */
.price-box{flex:1}
.price-lines{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:7px}
.price-lines li{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-soft)}
.price-lines li span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px}
.price-lines .amt{font-family:var(--mono);white-space:nowrap}
.price-lines .fx{color:var(--accent-ink)}
.price-total,.price-grand{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--hair)}
.price-total b,.price-grand b{font-family:var(--mono)}
.price-grand{font-weight:700;font-size:15px}
.price-grand b{color:var(--accent-2);font-size:17px}
.qty-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0}
.qty-row label{font-size:13px;color:var(--ink-soft)}
.field.qty{width:80px;margin:0;text-align:center}
#vol-hint{color:var(--accent-ink);font-weight:550}

.primary-btn{margin:18px;padding:14px;border:none;border-radius:11px;background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#fff;font-size:15px;font-weight:650;box-shadow:0 1px 2px rgba(15,95,136,.4),inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px rgba(11,102,96,.16)}
.primary-btn:hover{background:linear-gradient(180deg,var(--accent-2),#0d5a83)}
.primary-btn:active{transform:translateY(1px)}
button:focus-visible,.sw:focus-visible{outline:none;box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--accent-ring)}

/* Templates */
.tpl-card-modal{max-width:640px}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;padding:18px}
.tpl-card{display:flex;flex-direction:column;border:1px solid var(--hair-2);border-radius:12px;overflow:hidden;background:var(--panel);text-align:left;padding:0;min-height:122px}
.tpl-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
/* FIX (03-08, Ryan: "achtergrond van de emblemen is nog steeds zwart"): vaste donkere gradient
   vervangen door de theme-aware paneelkleur (--panel-2/--ink) — volgt automatisch licht/donker-thema
   i.p.v. altijd een zwarte kaart te tonen, ook in het lichte standaardthema. */
.tpl-prev{display:grid;place-items:center;min-height:84px;flex:0 0 auto;background:var(--panel-2,#fbfbf9);color:var(--ink,#1b1b18);font-size:21px;padding:8px 10px;text-align:center;overflow:hidden;white-space:nowrap;line-height:1.05;border-bottom:1px solid var(--hair-2)}
.orig-submit{grid-column:1/-1;border:1px dashed var(--accent);background:var(--accent-soft);color:var(--accent-ink);border-radius:12px;padding:13px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;margin-bottom:6px}
.orig-submit:hover{background:var(--accent);color:#fff}
.orig-prev{display:grid;place-items:center;min-height:84px;flex:0 0 auto;padding:7px;overflow:hidden;background:repeating-conic-gradient(#efeee9 0% 25%,#fbfbf9 0% 50%) 50%/16px 16px}
.orig-prev img{max-width:100%;max-height:72px;object-fit:contain}
.tpl-meta{display:flex;flex-direction:column;padding:9px 11px;gap:1px}
.tpl-meta b{font-size:13px}
.tpl-meta small{color:var(--muted);font-size:11px}
.tpl-hint{padding:0 18px 18px}
.tpl-cat{grid-column:1/-1;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin:8px 2px 0}
/* Iconen */
.icon-grid{grid-template-columns:repeat(auto-fill,minmax(66px,1fr))}
.icon-card{display:grid;place-items:center;aspect-ratio:1;border:1px solid var(--hair-2);border-radius:11px;background:var(--panel);color:var(--ink);padding:12px}
.icon-card:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.icon-card svg{width:100%;height:100%;max-width:40px;max-height:40px;display:block}
.rotate-row{margin-top:12px}
.rotate-ctrl{display:flex;align-items:center;gap:8px;margin-top:6px}
.rotate-range{flex:1;height:4px;accent-color:var(--accent);cursor:pointer}
.mini-btn{flex:0 0 auto;width:34px;height:34px;border:1px solid var(--hair-2);border-radius:9px;background:var(--panel);color:var(--ink);font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center}
.mini-btn:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.mini-btn:active{transform:translateY(1px)}
#rot-val{color:var(--muted);font-variant-numeric:tabular-nums;font-weight:600}
.ctx-toolbar{flex-wrap:wrap;max-width:min(98vw,1000px);justify-content:flex-start}   /* FIX (02-08): center liet elke rij apart centreren zodra de balk wrapt (bv. bij tekst-objecten met veel knoppen) — rij 2 stond daardoor 57px verschoven t.o.v. rij 1 i.p.v. links uitgelijnd */
.ctx-sep{width:1px;align-self:stretch;background:rgba(255,255,255,.28);margin:5px 3px}
/* grootte-stepper */
.tb-step{display:flex;align-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);border-radius:9px;overflow:hidden;height:32px}
.tb-step button{width:24px;height:30px;border:none;background:transparent;color:rgba(255,255,255,.9);font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center}
.tb-step button:hover{background:rgba(255,255,255,.22);color:#fff}
.tb-step input{width:38px;height:30px;border:none;background:transparent;text-align:center;font:inherit;font-size:13px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;border-left:1px solid rgba(255,255,255,.22);border-right:1px solid rgba(255,255,255,.22)}
.tb-step input:focus{outline:none;background:rgba(255,255,255,.2)}
/* lettertype-keuze */
.tb-font{height:32px;max-width:96px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.14);border-radius:9px;padding:0 7px;font:inherit;font-size:12.5px;font-weight:600;color:#fff;cursor:pointer}
.tb-font option{color:var(--ink);background:var(--panel)}
.tb-font:hover{border-color:rgba(255,255,255,.5)}
.tb-font:focus{outline:none;border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.25)}

/* ---- balk-knoppen met label + popovers ---- */
.ctx-menu{position:relative;display:flex}
.ctx-toolbar button.has-pop{width:auto;gap:5px;padding:0 9px;display:flex;align-items:center;font-size:13px;font-weight:600}
.ctx-toolbar button.has-pop>span{font-size:15px;line-height:1;display:grid;place-items:center}
.ctx-toolbar button.has-pop>i{font-style:normal;font-size:12.5px}
.ctx-menu.open>button{background:rgba(255,255,255,.26);color:#fff}
.color-dot{width:17px;height:17px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);background:#1b1b1b}
.ctx-pop{position:absolute;top:calc(100% + 9px);left:0;background:var(--panel);color:var(--ink);border:1px solid var(--hair-2);border-radius:13px;box-shadow:0 14px 34px rgba(0,0,0,.22);padding:14px;z-index:20;display:none;min-width:196px;max-height:min(560px,calc(100dvh - 200px));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;text-align:left;cursor:default}
.ctx-menu.open .ctx-pop{display:block}
.ctx-pop.wide{width:292px}
.ctx-pop .rotate-ctrl{margin-top:8px}
.pop-note{font-size:11.5px;color:var(--muted);margin:9px 0 0;line-height:1.45}
.size-slide{display:flex;align-items:center;gap:11px;margin:4px 0 13px}
.size-slide .mini-lbl{font-size:11px;color:var(--muted);font-weight:800;flex:none}
.size-slide .mini-lbl.big{font-size:17px}
.size-slide .rotate-range{flex:1}
[data-pop-for="more"] .rotate-range{width:100%;display:block;margin:8px 0 4px}
.pos-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:6px}
.pos-grid button{border:1px solid var(--hair-2);background:var(--panel);border-radius:9px;padding:9px 6px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px}
.pos-grid button:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
#size-cat{text-transform:none;letter-spacing:0}

/* onderdelen-kiezer */
.parts-row{margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--hair)}
.parts{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;max-height:112px;overflow:auto}
.part{display:flex;align-items:center;gap:6px;border:1px solid var(--hair-2);background:var(--panel);border-radius:9px;padding:4px 9px 4px 6px;font-size:12px;color:var(--ink);cursor:pointer;font-weight:600}
.part:hover{border-color:var(--accent)}
.part .pd{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);flex:none}
.part .pd.multi{background:conic-gradient(#e1251b,#ffcd00,#009639,#0057b8,#7f2b8e,#e1251b)}
.part.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}

/* productie-palet swatches */
.swatches.prod{gap:7px;max-height:150px;overflow:auto}
.swatches.prod .sw{width:24px;height:24px;position:relative}
.swatches.prod .sw.sp::after{content:"★";position:absolute;inset:0;display:grid;place-items:center;font-size:9px;color:rgba(255,255,255,.9);text-shadow:0 0 2px rgba(0,0,0,.5)}

/* eigen kleur — Photoshop-achtige kiezer */
.cp-toggle{display:block;width:100%;margin-top:11px;border:1px dashed var(--hair-2);background:var(--panel-2);border-radius:9px;padding:9px 8px;font-size:12.5px;font-weight:600;color:var(--accent-ink);cursor:pointer;white-space:nowrap;text-align:center}
.cp-toggle:hover{border-color:var(--accent);background:var(--accent-soft)}
.cp-toggle:hover{border-color:var(--accent);color:var(--accent-ink)}
.cp{margin-top:11px}
.cp-sv{position:relative;width:100%;height:120px;border-radius:9px;overflow:hidden;cursor:crosshair;touch-action:none}
.cp-sv canvas{width:100%;height:100%;display:block}
.cp-sv .cur{position:absolute;width:13px;height:13px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.55);transform:translate(-50%,-50%);pointer-events:none}
.cp-hue{width:100%;height:14px;border-radius:7px;margin:11px 0 9px;-webkit-appearance:none;appearance:none;cursor:pointer;background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.cp-hue::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.4);cursor:pointer}
.cp-hue::-moz-range-thumb{width:17px;height:17px;border:none;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.4);cursor:pointer}
.cp-hexrow{display:flex;align-items:center;gap:8px;margin-top:11px}
.cp-preview{width:36px;height:36px;flex:none;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.6);background:#000}
.cp-hexwrap{flex:1}
.cp-hex{width:100%;border:1px solid var(--hair-2);border-radius:8px;padding:9px 10px;font:inherit;font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);background:var(--panel);font-variant-numeric:tabular-nums}
.cp-hex:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.cp-copy{flex:none;width:36px;height:36px;border:1px solid var(--hair-2);border-radius:8px;background:var(--panel);color:var(--ink-soft);cursor:pointer;font-size:15px}
.cp-copy:hover{border-color:var(--accent);color:var(--accent-ink)}
.cp-copy.ok{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.cp-rgb{display:flex;gap:7px;margin-top:8px}.cp-rgb>div{flex:1}
.cp-rgb input{width:100%;border:1px solid var(--hair-2);border-radius:8px;padding:7px 4px;font:inherit;font-size:12.5px;text-align:center;color:var(--ink);background:var(--panel);font-variant-numeric:tabular-nums}
.cp-rgb input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.cp-lab{font-size:9.5px;color:var(--muted);text-align:center;display:block;margin-top:3px;letter-spacing:.06em;text-transform:uppercase}
.cp-cmyk{font-size:12px;color:var(--ink-soft);margin:10px 0 0;font-weight:600;font-variant-numeric:tabular-nums}
.ai-hq{margin:4px 0 10px;font-size:12.5px;gap:7px}
.ai-hq small{color:var(--muted)}
.sw-photo{background-size:cover;background-position:center;background-color:var(--panel-2)}
.product-name{display:flex;align-items:center;gap:9px;margin-left:2px;padding-left:14px;border-left:1px solid var(--hair);align-self:center;max-width:46ch}
.product-name:empty{display:none}
.product-name .pn-txt{font-size:15px;color:var(--ink);font-weight:700;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.product-sku{flex:none;font-size:10.5px;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);padding:3px 8px;border-radius:6px;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.price-lines .gl>span:first-child{font-weight:600}
.price-lines .gl em{font-style:normal;color:var(--muted);font-weight:700}
.price-lines .gl em.disc{color:var(--accent-ink)}
.price-lines .gl em.sku{display:block;font-size:10px;font-weight:600;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;margin-top:2px}
.price-lines .gl .amt{display:inline-flex;align-items:center;gap:9px;justify-content:flex-end}
.price-lines .gl-rm{flex:none;border:1px solid var(--hair-2);background:var(--panel);color:var(--muted);width:21px;height:21px;border-radius:6px;font-size:13px;line-height:1;cursor:pointer;padding:0;transition:all .12s}
.price-lines .gl-rm:hover{color:#fff;background:#c0392b;border-color:#c0392b}
.order-box{margin:12px 0 10px}
.order-box[hidden]{display:none}
.order-head{display:grid;grid-template-columns:1fr 56px 50px 28px;gap:6px;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;padding:0 2px 5px}
.order-line{display:grid;grid-template-columns:1fr 56px 50px 28px;gap:6px;align-items:center;margin-bottom:6px}
.order-line select,.order-line input.oq{font:inherit;font-size:12px;padding:6px;border:1px solid var(--hair-2);border-radius:8px;background:var(--panel);color:var(--ink);width:100%;min-width:0}
.order-line input.oq{text-align:center}
.order-line .rm{width:26px;height:26px;border:1px solid var(--hair-2);background:var(--panel);border-radius:7px;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;display:grid;place-items:center;padding:0;transition:all .12s}
.order-line .rm:hover{color:#fff;background:#c0392b;border-color:#c0392b}
.add-line{width:100%;margin:2px 0 10px;font-size:12px;font-weight:600;padding:7px;border:1px dashed var(--hair-2);border-radius:8px;background:var(--panel);color:var(--accent-ink);cursor:pointer}
.add-line:hover{border-color:var(--accent);background:var(--accent-soft)}
.order-total{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--ink);font-weight:700;padding:2px 2px 0}
/* Meerdere ontwerpen per bestelling */
.add-design-btn{width:100%;margin:2px 0 8px;font-size:12.5px;font-weight:700;padding:10px;border:none;border-radius:9px;background:var(--accent);color:#fff;cursor:pointer;transition:background .16s ease}
.add-design-btn:hover:not(:disabled){background:var(--accent-2)}
.add-design-btn:disabled{background:var(--hair-2);color:var(--ink-soft);cursor:not-allowed;opacity:.85}
.order-groups{display:flex;flex-direction:column;gap:6px;margin:0 0 8px}
.order-groups[hidden]{display:none}
.order-group{display:flex;align-items:center;gap:9px;padding:6px;border:1px solid var(--hair-2);border-radius:9px;background:var(--panel)}
.og-thumb{width:38px;height:38px;object-fit:contain;border-radius:6px;background:var(--accent-soft);flex:none}
.og-info{display:flex;flex-direction:column;min-width:0}
.og-info b{font-size:12.5px;color:var(--ink)}
.og-info small{font-size:11px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.og-rm{margin-left:auto;width:24px;height:24px;border:1px solid var(--hair-2);border-radius:6px;background:var(--panel);color:var(--ink-soft);cursor:pointer;font-size:14px;line-height:1;flex:none}
.og-rm:hover{border-color:#c0392b;color:#c0392b;background:#fbeaea}
.design-choice{margin:0 0 10px;padding:9px 11px;border:1px solid var(--accent);border-radius:9px;background:var(--accent-soft)}
.design-choice[hidden]{display:none}
.dc-msg{display:block;font-size:11.5px;color:var(--accent-ink);margin-bottom:7px}
.dc-btns{display:flex;gap:6px}
.dc-btns .ghost-btn{flex:1;height:32px;font-size:11.5px}
.price-lines .grp-head{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;font-weight:800;letter-spacing:.03em;color:var(--accent-ink);margin:7px 0 1px;padding:0 2px;text-transform:uppercase}
.price-lines .grp-head:first-child{margin-top:0}
.price-lines .empty-price{color:var(--ink-soft);font-style:italic}
.price-lines.is-indicatie{border-left:2px dashed var(--hair-2);padding-left:8px;margin-left:1px}
.pa-caption-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:3px}   /* FIX (03-08): 8px→3px, canvas krijgt voorrang */
.sel-caption{margin-top:4px;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.02em;text-align:center;font-variant-numeric:tabular-nums}
.sel-caption b{color:var(--accent-ink)}
.layer.hover-highlight{border-color:var(--accent);background:var(--accent-soft)}
.pa-edit-btn{font:inherit;font-size:12px;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);border:1px solid transparent;border-radius:8px;padding:5px 10px;cursor:pointer}
.pa-edit-btn:hover{border-color:var(--accent)}
.pa-edit-btn.on{background:var(--accent);color:#fff}
.pa-edit-panel{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pa-edit-panel[hidden]{display:none}
.pa-edit-hint{font-size:12px;color:var(--muted)}
.pa-mini{font:inherit;font-size:12px;font-weight:600;border:1px solid var(--hair-2);background:var(--panel);color:var(--ink);border-radius:8px;padding:5px 10px;cursor:pointer}
.pa-mini:hover{border-color:var(--accent)}
.pa-mini.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.pa-mini.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}   /* resize-ontgrendeld-staat (ronde 5) */
.opt-row{display:flex;gap:10px;align-items:flex-start;padding:10px 0;cursor:pointer;border-top:1px solid var(--hair)}
.opt-row:first-of-type{border-top:none;padding-top:2px}
.opt-row input[type=checkbox]{margin-top:2px;width:16px;height:16px;accent-color:var(--accent);flex:none;cursor:pointer}
.opt-txt{display:flex;flex-direction:column;gap:3px}
.opt-txt b{font-size:13px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.opt-txt small{font-size:11.5px;color:var(--muted);line-height:1.4}
.opt-fee{color:var(--accent-ink);font-weight:700}
.opt-free{font-style:normal;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-ink);background:var(--accent-soft);padding:1px 7px;border-radius:999px}
.tb-step .tb-x{color:rgba(255,255,255,.55);font-size:12px;font-weight:700;padding:0 1px;user-select:none}
.tb-step .tb-ratio{font-size:12px}
.tb-step .tb-ratio:not(.on){opacity:.38}
.product-note-bar{transform:translateY(-17px);margin:4px auto 0;max-width:560px;text-align:center;font-size:12.5px;line-height:1.3;padding:4px 14px;border-radius:10px;border:1px solid var(--hair);margin-bottom:4px}   /* FIX (03-08, Ryan: canvas moet voorrang krijgen) — padding/margin verkleind, dit bleek een 53px-hoge balk die niet was meegeteld in eerdere ronde */
.product-note-bar.ok{background:var(--accent-soft);color:var(--accent-ink)}
.product-note-bar.info{background:#fbf1dc;color:#7a5600;border-color:#efdcae}
.ai-engine-hint{font-size:12px;color:var(--muted);margin:3px 0 6px}
.ai-svg-prev{display:grid;place-items:center;padding:8px;background:#fff;border-radius:10px}
.ai-svg-prev svg{max-width:100%;max-height:220px;width:auto;height:auto;display:block}
.ai-status.blocked{background:#fce8ea;color:#a11f2e;border:1px solid #f0b8bf;border-radius:11px;padding:13px 15px;margin-top:9px;font-weight:600;font-size:12.5px;line-height:1.55;text-align:left}
.ai-status.warn{background:#fbf1dc;color:#7a5600;border:1px solid #efdcae;border-radius:10px;padding:11px 14px;margin-top:9px;font-size:12.5px;text-align:left}
.icon-search-wrap{padding:14px 18px 2px}
.icon-search-wrap .field{margin:0}
.icon-grid{max-height:56vh;overflow-y:auto}
/* Bibliotheek (sjablonen + iconen) */
.library-card{max-width:880px}
.lib-body{display:flex;align-items:stretch}
.lib-tree{width:212px;flex:none;border-right:1px solid var(--hair);overflow-y:auto;max-height:58vh;padding:10px 9px}
.lib-main{flex:1;min-width:0;display:flex;flex-direction:column}
.tree-group{margin-bottom:1px}
.tree-head{display:flex;align-items:center;gap:7px;width:100%;border:none;background:transparent;border-radius:8px;padding:8px;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer;text-align:left}
.tree-head:hover{background:var(--panel-2)}
.tree-head .tw{font-size:10px;color:var(--muted);transition:transform .15s ease;display:inline-block;width:10px;flex:none}
.tree-head.open .tw{transform:rotate(90deg)}
.tree-head .ti{font-size:14px;flex:none}
.tree-kids{display:flex;flex-direction:column;gap:1px;margin:1px 0 5px 9px;padding-left:8px;border-left:1px solid var(--hair)}
.tree-leaf{display:flex;align-items:center;gap:7px;width:100%;border:none;background:transparent;border-radius:8px;padding:7px 9px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;text-align:left}
.tree-leaf:hover{background:var(--panel-2);color:var(--ink)}
.tree-leaf.active{background:var(--accent-soft);color:var(--accent-ink)}
.tree-leaf .ti{font-size:13px;flex:none}
.tree-leaf .tl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree-leaf .tc{font-size:11px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;background:var(--panel-2);border-radius:6px;padding:1px 6px;flex:none}
.tree-leaf.active .tc{background:rgba(255,255,255,.45);color:var(--accent-ink)}
@media(max-width:680px){.lib-body{flex-direction:column}.lib-tree{width:auto;max-height:128px;border-right:none;border-bottom:1px solid var(--hair)}}
.lib-search-wrap{padding:14px 18px 8px}
.lib-search-wrap .field{margin:0}
.lib-tabs{display:flex;flex-wrap:wrap;gap:7px;padding:0 18px 12px;border-bottom:1px solid var(--hair)}
.lib-tab{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hair-2);background:var(--panel);border-radius:20px;padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--ink-soft);transition:all .14s ease}
.lt-ic{font-size:13px;line-height:1}
.lib-nav{width:100%;height:42px;border:1px solid var(--hair-2);background:var(--panel);border-radius:11px;padding:0 13px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.lib-nav:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.lib-tab:hover{border-color:var(--accent);color:var(--accent-ink)}
.lib-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.lib-grid{max-height:52vh;overflow-y:auto;padding-top:14px}
/* Lege-staat leesbaar op elke shirtkleur */
.empty-state .es-inner{background:rgba(255,255,255,.84);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.7);border-radius:20px;padding:22px 26px;box-shadow:0 12px 44px rgba(18,28,26,.20);pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:3px;max-width:90%}

/* AI-ontwerp */
.ai-body{padding:18px;display:flex;flex-direction:column}
.ai-prompt{height:auto;padding:10px 12px;resize:vertical;font-family:inherit;line-height:1.5;margin-bottom:12px}
.ai-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.ai-chip{border:1px solid var(--hair-2);background:var(--panel);border-radius:20px;padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.ai-chip.active,.ai-chip:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
/* ===== AI-flow (3 stappen) ===== */
.ai-step{animation:aifade .35s ease}
@keyframes aifade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ai-step{animation:none}}
.ai-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);font-weight:700;font-family:ui-monospace,Menlo,monospace}
.ai-h1{font-size:clamp(21px,3.4vw,27px);letter-spacing:-.02em;line-height:1.1;margin:6px 0 0;font-weight:800}
.ai-lede{font-size:15.5px;color:var(--ink-2);margin:10px 0 0;font-weight:550}
.ai-body{font-size:13.5px;color:var(--ink-2);margin:12px 0 0;line-height:1.6}
.ai-props{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0 4px}
@media(max-width:560px){.ai-props{grid-template-columns:1fr}}
.ai-prop{display:flex;gap:9px;align-items:flex-start;background:var(--panel-2);border:1px solid var(--hair);border-radius:11px;padding:12px}
.ai-prop .ic{width:28px;height:28px;flex:none;border-radius:8px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-size:14px}
.ai-prop b{display:block;font-size:13px;color:var(--ink)}
.ai-prop span{font-size:11.5px;color:var(--muted);line-height:1.35}
#ai-start{margin-top:22px}
.ai-step-head{margin-bottom:14px}
.ai-step-head b{font-size:17px;display:block}
.ai-step-head span{font-size:13px;color:var(--muted)}
.ai-engs{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:560px){.ai-engs{grid-template-columns:1fr}}
.ai-eng{display:flex;flex-direction:column;text-align:left;border:1px solid var(--hair-2);background:var(--panel);border-radius:13px;padding:0;overflow:hidden;cursor:pointer;transition:border-color .14s ease,transform .14s ease,box-shadow .14s ease}
.ai-eng:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 22px -10px rgba(28,27,24,.28)}
.ae-prev{position:relative;aspect-ratio:16/10;background:var(--panel-2);border-bottom:1px solid var(--hair);overflow:hidden}
.ae-prev img{width:100%;height:100%;object-fit:contain;display:block;padding:6px}
.ae-badge{position:absolute;top:8px;left:8px;font-family:ui-monospace,Menlo,monospace;font-size:9.5px;font-weight:700;letter-spacing:.03em;background:#dd9138;color:#3a2708;padding:3px 7px;border-radius:6px;z-index:1}
.ae-b{padding:12px 13px;display:flex;flex-direction:column;gap:5px}
.ae-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ae-top b{font-size:14px;color:var(--ink)}
.ae-cr{font-size:11px;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);border-radius:999px;padding:2px 9px;white-space:nowrap;flex:none}
.ae-desc{font-size:12px;color:var(--ink-2);line-height:1.45}
.ae-best{font-size:11.5px;color:var(--accent-ink);font-weight:600}
.ai-step3-top{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.ai-back{border:1px solid var(--hair-2);background:var(--panel);border-radius:9px;padding:7px 12px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer}
.ai-back:hover{border-color:var(--accent);color:var(--accent-ink)}
.ai-chosen{font-size:13px;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);padding:6px 12px;border-radius:999px}
.ai-howlink{margin-top:12px;background:none;border:none;font:inherit;font-size:12.5px;color:var(--muted);text-decoration:underline;cursor:pointer;padding:0}
.ai-howlink:hover{color:var(--accent-ink)}
.ai-assist{background:var(--panel);border:1px solid var(--hair-2);border-radius:12px;padding:13px 14px;margin-bottom:14px}
.ai-assist-h{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:10px}
.ai-assist-in{width:100%;border:1px solid var(--hair-2);border-radius:9px;padding:9px 11px;font:inherit;font-size:13.5px;color:var(--ink);background:var(--panel);margin-bottom:8px}
.ai-assist-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ai-assist-btn{width:100%;border:1px dashed var(--accent);background:var(--accent-soft);border-radius:9px;padding:9px;font:inherit;font-size:12.5px;font-weight:700;color:var(--accent-ink);cursor:pointer}
.ai-assist-btn:hover{background:var(--accent);color:#fff}
.ai-own{margin:16px 0 6px;padding:12px 15px;background:var(--accent-soft);border:1px solid var(--accent-ring);border-radius:12px;font-size:12.5px;line-height:1.55;color:var(--accent-ink);text-align:left}
.ai-own b{color:var(--accent-ink);font-weight:700}
.ai-own-mini{margin:2px 0 12px;font-size:12px;line-height:1.45;color:var(--accent-ink);font-weight:500}
.ai-own-mini b{font-weight:700}
.panel-sec.info-blue{margin:2px 0 6px;padding:14px 15px;border:1px solid #bcd7f2;border-bottom:1px solid #bcd7f2;border-radius:12px;background:#eaf2fb}
.info-blue p{margin:0 0 8px;font-size:12px;line-height:1.5;color:#2c4a6b}
.info-blue .ib-h{font-size:13px;font-weight:700;color:#173a5c;margin-bottom:9px}
.info-blue b{color:#173a5c}
.info-blue a{color:#1c6fd0;font-weight:700;text-decoration:none}
.info-blue a:hover{text-decoration:underline}
.info-blue .ib-price{margin:9px 0 0;padding-top:9px;border-top:1px solid #cfe0f5;font-size:11.5px;color:#2c4a6b}
/* opmerkingen-veld */
.note-field{resize:vertical;min-height:54px;line-height:1.45}
/* printvlak-kalibratie-paneel (?cal=1) */
#cal-panel{position:fixed;top:72px;right:18px;width:272px;background:var(--panel);border:1px solid var(--hair-2);border-radius:14px;box-shadow:var(--shadow);padding:16px;z-index:60}
.cal-h{font-weight:800;font-size:15px;margin-bottom:4px}
.cal-p{color:var(--ink-soft);font-size:12.5px;margin:0 0 12px;line-height:1.45}
.cal-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.cal-row label{font-size:12.5px;color:var(--ink-soft)}
.cal-row input{width:82px;border:1px solid var(--hair-2);border-radius:8px;padding:7px 8px;font:inherit;text-align:center;color:var(--ink);background:var(--panel)}
.cal-vals{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--muted);background:var(--panel-2);border-radius:8px;padding:8px 10px;margin-bottom:11px}
#cal-panel .primary-btn{width:100%}
.cal-msg{font-size:12px;margin-top:9px;min-height:15px;line-height:1.4}
.cal-msg.ok{color:var(--accent-ink);font-weight:600}
.cal-msg.err{color:var(--danger)}
.ai-gen{margin:0 0 8px}
.ai-status{font-size:12.5px;color:var(--muted);min-height:16px;margin:4px 0;line-height:1.5}
.ai-result{display:grid;place-items:center}
.ai-result img{max-width:100%;max-height:320px;border-radius:10px;border:1px solid var(--hair);margin:6px 0}
.ai-login{text-align:center;padding:26px 10px}
.ai-login p{color:var(--ink-soft);font-size:.95rem;margin:0 0 18px;line-height:1.55}
.ai-login-btn{display:inline-block;text-decoration:none;text-align:center;margin:0}
.ai-quota{font-size:12px;color:var(--accent-ink);font-weight:600;margin:2px 0 6px}
.ai-spin{width:36px;height:36px;border:3px solid var(--hair-2);border-top-color:var(--accent);border-radius:50%;animation:aispin .8s linear infinite;margin:16px auto}
@keyframes aispin{to{transform:rotate(360deg)}}

/* ── Background-erase WOW: zichtbaar de achtergrond wegvegen ── */
.bgw{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;border-radius:12px;overflow:visible;pointer-events:none;opacity:0;transition:opacity .22s ease;box-shadow:0 0 0 1px rgba(14,124,116,.35),0 8px 30px rgba(14,124,116,.18);
  background:
    linear-gradient(45deg,rgba(14,124,116,.07) 25%,transparent 25%,transparent 75%,rgba(14,124,116,.07) 75%) 0 0/18px 18px,
    linear-gradient(45deg,rgba(14,124,116,.07) 25%,transparent 25%,transparent 75%,rgba(14,124,116,.07) 75%) 9px 9px/18px 18px,
    rgba(255,255,255,.5)}
.bgw.on{opacity:1}
.bgw-scan{position:absolute;left:0;right:0;top:-4px;height:3px;
  background:linear-gradient(90deg,transparent,#1887C1 20%,#5fe9da 50%,#1887C1 80%,transparent);
  box-shadow:0 0 16px 5px rgba(95,233,218,.6),0 0 3px 1px rgba(14,124,116,.9);
  animation:bgw-sweep 1.5s cubic-bezier(.4,0,.6,1) 2 alternate forwards}
@keyframes bgw-sweep{0%{top:-4px}100%{top:calc(100% + 4px)}}
.bgw-badge{display:flex;align-items:center;gap:9px;background:rgba(20,26,24,.88);color:#fff;font-size:13px;font-weight:600;
  padding:9px 16px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.28);backdrop-filter:blur(6px);transition:background .25s ease}
.bgw-dot{width:9px;height:9px;border-radius:50%;background:#5fe9da;box-shadow:0 0 8px #5fe9da;animation:bgw-pulse 1s ease-in-out infinite}
.bgw.done .bgw-scan{opacity:0}
.bgw.done .bgw-badge{background:rgba(14,124,116,.96)}
.bgw.done .bgw-dot{display:none}
@keyframes bgw-pulse{0%,100%{opacity:.45;transform:scale(.75)}50%{opacity:1;transform:scale(1.2)}}
@media (prefers-reduced-motion:reduce){.bgw-scan{animation:none;top:50%;opacity:.4}.bgw-dot{animation:none}}
.icon-credit{display:block;margin-top:5px;font-size:10.5px;color:var(--muted);opacity:.85}

/* Mijn ontwerpen */
.designs-body{padding:18px}
.designs-save{display:flex;gap:10px;margin-bottom:16px}
.designs-save .field{margin:0;flex:1}
.designs-save .primary-btn{margin:0;padding:0 16px;white-space:nowrap}
.designs-list{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow-y:auto}
.design-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border:1px solid var(--hair-2);border-radius:10px;background:var(--panel)}
.design-row:hover{border-color:var(--accent)}
.design-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.design-info b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.design-info small{color:var(--muted);font-size:11px}
.design-actions{display:flex;align-items:center;gap:6px;flex:none}
.dl-del{color:var(--muted)}
.dl-del:hover{color:var(--danger)}

/* Drukklaar-check (maakbaarheid als merkkenmerk) */
.print-check{display:flex;align-items:center;gap:8px;margin:0 18px 2px;padding:9px 12px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--muted);background:var(--panel-2);border:1px solid var(--hair-2)}
.print-check .pc-dot{width:8px;height:8px;border-radius:50%;background:var(--hair-2);flex:none}
.print-check.ok{color:#0c7a4e;background:#e8f7f0;border-color:#bfe6d3}
.print-check.ok .pc-dot{background:#18a05f}
.print-check.warn{color:var(--warn);background:#fdf6e7;border-color:#f0dba8}
.print-check.warn .pc-dot{background:var(--warn)}

/* Onboarding lege-staat over het canvas */
.empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;pointer-events:none;z-index:4;text-align:center;padding:16px}
.empty-state .es-title{font-size:20px;font-weight:750;color:var(--ink);margin:0}
.empty-state .es-sub{font-size:13px;color:var(--muted);margin:0 0 16px}
.es-cards{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;pointer-events:auto}
.es-cards button{display:flex;flex-direction:column;align-items:center;gap:7px;width:98px;padding:15px 8px;border:1px solid var(--hair-2);border-radius:13px;background:rgba(255,255,255,.9);backdrop-filter:blur(5px);color:var(--ink);font-size:12.5px;font-weight:600;transition:transform .12s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease}
.es-cards button span{font-size:22px}
.es-cards button:hover{border-color:var(--accent);background:#fff;transform:translateY(-2px);box-shadow:var(--shadow)}

/* nette cijfers + swatch-hover */
.field.qty,.mm-in input,.price-lines .amt,.price-total b,.price-grand b,#print-total,#grand-total,.pa-caption{font-variant-numeric:tabular-nums}
.sw:hover{transform:scale(1.14)}
@media(prefers-reduced-motion:reduce){.ai-spin{animation:none}.es-cards button:hover,.sw:hover,.tool-btn:hover,.primary-btn:hover,.icon-card:hover,.tpl-card:hover{transform:none}}

/* Modal + toast */
.modal{position:fixed;inset:0;background:rgba(15,22,21,.55);display:grid;place-items:center;z-index:50;padding:20px}
.modal-card{background:var(--panel);border-radius:14px;max-width:560px;width:100%;max-height:80vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--hair);position:sticky;top:0;background:var(--panel)}
#json-out{margin:0;padding:16px 18px;font-family:var(--mono);font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-word;color:var(--ink-soft)}
.modal .hint{padding:0 18px 18px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--warn);color:#fff;padding:11px 18px;border-radius:10px;font-size:13px;font-weight:550;box-shadow:var(--shadow);z-index:60}

/* Mobiele .studio/.stage-wrap-regels geconsolideerd naar het hoofdblok bij "MOBIEL (≤900px)"
   verderop in dit bestand (was hier dubbel/tegenstrijdig gedefinieerd — geconsolideerd 2026-07-27). */

/* ── Mobiel: bottom-sheet-tabs + sticky prijs/bestelbalk (2026-07-24) ──
   Desktop: volledig verborgen, geen enkel verschil met voorheen. */
.mobile-tabs,.mobile-order-bar{display:none}
@media(max-width:1100px){
  .mobile-tabs{
    /* z-index 26 (2026-07-27, boven #edit-float's 25): de tabbalk moet ALTIJD klikbaar blijven,
       ook terwijl het Bewerken-paneel open staat — anders kan de gebruiker nergens heen om het
       paneel via de auto-sluit-fix te sluiten (ontdekt tijdens verificatie: font-open-knop uit
       het paneel onderschepte de klik op "Kleur"). */
    display:flex;position:fixed;left:0;right:0;bottom:64px;z-index:26;
    background:var(--panel);border-top:1px solid var(--hair);padding:6px 8px;gap:4px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
  }
  .mt-tab{flex:1;min-width:64px;height:36px;border:none;background:transparent;border-radius:8px;
    color:var(--ink-soft);font-size:12px;font-weight:600;white-space:nowrap}
  .mt-tab.active{background:var(--accent-soft);color:var(--accent-ink)}
  .mobile-order-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;height:64px;
    align-items:center;justify-content:space-between;gap:12px;padding:0 14px;
    background:var(--panel);border-top:1px solid var(--hair);box-shadow:0 -4px 16px rgba(20,22,21,.08);
  }
  .mob-total{display:flex;flex-direction:column;line-height:1.15}
  .mob-total small{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
  .mob-total b{font-family:var(--mono);font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
  .mobile-order-btn{height:44px;padding:0 18px;border:none;border-radius:10px;
    background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#fff;font-size:14px;font-weight:650;
    box-shadow:0 1px 2px rgba(15,95,136,.4),inset 0 1px 0 rgba(255,255,255,.18)}
  .mobile-order-btn:active{transform:translateY(1px)}
  /* toon alleen de panel-sec die bij het actieve tabblad hoort — bestaande DOM/ID's blijven ongewijzigd */
  body:not([data-mt="techniek"]) [data-mt-section="techniek"],
  body:not([data-mt="kleur"]) [data-mt-section="kleur"],
  body:not([data-mt="maten"]) [data-mt-section="maten"],
  body:not([data-mt="lagen"]) [data-mt-section="lagen"],
  body:not([data-mt="service"]) [data-mt-section="service"]{display:none}
  /* team-panel/print-check blijven hun eigen [hidden]-logica houden; data-mt-section verbergt ze alleen EXTRA op het verkeerde tabblad */
}

/* ── Bibliotheek = zichtbaar links-gedokt zij-paneel i.p.v. full-cover modal (gedrags-fix 2026-07-21) ──
   Product blijft zichtbaar tijdens bladeren; klik plaatst live; paneel sluit niet bij toevoegen.
   Alleen #library-modal — andere modals (ai/team/tech/json) blijven ongewijzigd. */
#library-modal{background:transparent;pointer-events:none;padding:0;place-items:stretch start}
/* FIX (03-08, Ryan: "het aller linker menu met tekst/uploads/sjablonen... die valt weg als ik op
   iconen druk, daarom komt de breedte niet overeen met het bewerk-menu"): #edit-float begint bewust
   bij links:100px (ná de .rail-kolom, zie .studio{grid-template-columns:100px ...}) zodat de rail
   zichtbaar blijft — #library-modal had dat niet en startte op links:0px, met een hogere z-index
   (.modal's 50 t.o.v. .rail's 10) dan de rail zelf, dus de rail verdween daar volledig ONDER de
   bibliotheek. Twee zichtbare gevolgen: (1) de rail (icoon-navigatie) was niet meer bereikbaar
   terwijl de bibliotheek open stond, (2) de effectieve breedte van "bibliotheek" (372px, begint bij
   0) week daardoor duidelijk af van "bewerken" (380px, begint bij 100 → eindigt bij 480) — vandaar
   de door Ryan gemelde "ongelijke afmetingen". Fix: dezelfde links:100px-marge, alleen op desktop-
   breedtes (>1100px, zelfde grens als .rail/.studio's desktop-grid) — op mobiel blijft de rail zijn
   eigen onderste balk (position:fixed) en is dit niet van toepassing. */
@media(min-width:1101px){ #library-modal{padding-left:100px} }
#library-modal .library-card{
  pointer-events:auto;display:flex;flex-direction:column;
  width:min(372px,92vw);max-width:372px;height:100%;max-height:none;overflow:hidden;
  border-radius:0 16px 16px 0;
  box-shadow:1px 0 0 var(--hair), 22px 0 48px rgba(0,0,0,.17);
}
#library-modal .modal-head{flex:none}
#library-modal .lib-search-wrap{flex:none}
#library-modal .lib-body{flex:1;min-height:0;flex-direction:column;overflow:hidden;align-items:stretch}
#library-modal .lib-tree{width:auto;max-height:108px;border-right:none;border-bottom:1px solid var(--hair);flex:none}
#library-modal .lib-main{min-height:0;flex:1;overflow:hidden;display:flex;flex-direction:column}
#library-modal .lib-tabs{flex:none}
#library-modal .lib-grid{overflow:auto;flex:1;min-height:0}
#library-modal .tpl-hint{flex:none;padding:9px 16px;font-size:11.5px;line-height:1.4}
@media(max-width:700px){
  /* FIX (28-07, Ryan: "springt open over het hele scherm... dat moet dat kleine stukje blijven"):
     de oorspronkelijke bedoeling was hier al goed ("product staat dan boven de tools"), maar de
     link-gedokte kaart had ook al height:100% (regel 626, nooit mobiel-specifiek overschreven) —
     samen met width:100vw hierboven werd dat dus alsnog een volledig schermvullend paneel, canvas
     volledig weg. Nu een bottom-sheet zoals #edit-float elders al doet: breedte vol, hoogte
     begrensd en naar de onderkant gedokt, canvas blijft er altijd boven zichtbaar. */
  #library-modal{align-items:end}   /* align-items (niet place-items/stretch) — anders blijft de kaart aan de BOVENkant hangen met lege ruimte eronder i.p.v. naar de onderkant te zakken */
  /* 46vh i.p.v. 60vh: zelfde bewezen cap als #edit-float — canvas (tot 58vh, ronde 6) + sheet
     moeten sámen onder de 100vh blijven, ook ná het in-beeld-scrollen hierboven. */
  #library-modal .library-card{width:100vw;max-width:100vw;height:auto;max-height:46vh;max-height:46dvh;border-radius:16px 16px 0 0;animation:libSheetIn .18s ease}
  /* FIX (03-08, Ryan: "menu die niet netjes opent" bij Emblemen-klik): de sheet verscheen tot nu
     toe abrupt — geen overgangsanimatie én geen visuele scheiding (background bleef transparent,
     bewust zo voor desktop, zie de "zichtbaar links-gedokt zij-paneel"-toelichting hierboven) — op
     mobiel, waar de sheet WAARDOOR canvas-inhoud heen klapt i.p.v. ernaast, oogde dat als een
     onaangekondigd blok dat zomaar over de knoppen/tekst heen valt. Halftransparante achtergrond
     (puur visueel, `pointer-events:none` blijft ongewijzigd op de modal zelf staan — canvas blijft
     dus gewoon bedienbaar terwijl je bladert) + een korte opschuif-animatie op de kaart zelf (zelfde
     patroon als #edit-float's `efIn`) geven de sheet duidelijk een eigen, herkenbare laag i.p.v. een
     harde knip midden in de pagina. */
  #library-modal{background:rgba(15,22,21,.4)}
}
@keyframes libSheetIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ctx-toolbar boven het shirt i.p.v. erover (respect de canvas) */
.stage-wrap > .ctx-toolbar{width:fit-content;max-width:100%}   /* FIX (03-08, Ryan: canvas mag niet automatisch kleiner worden zodra je iets selecteert): position:static liet de balk in de normale doorloop meetellen, wat #stage-body (en dus de canvas) bij elke selectie inklemde. Terug naar de basis position:absolute (zie regel 127) — de balk zweeft nu los boven het canvas i.p.v. 'm omlaag te duwen. Live geverifieerd: geen overlap met het canvas (canvas begint ruim onder de balk), blijft netjes gecentreerd boven de canvas-kolom (stage-wrap heeft z'n eigen position:relative). */

/* ── "Bewerken"-paneel links: tekststijl-knoppen + sliders (verplaatst uit de bovenbalk, discoverability-bundeling) ── */
.style-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.style-row button{width:34px;height:34px;border:1px solid var(--hair-2);background:var(--panel);border-radius:8px;color:var(--ink);font-size:14px;line-height:1;display:grid;place-items:center;cursor:pointer;transition:border-color .16s ease,background .16s ease,color .16s ease}
.style-row button:hover{border-color:var(--accent);background:var(--accent-soft)}
.style-row button.on{background:var(--accent);border-color:var(--accent);color:#fff}
#common-controls .rotate-range,#text-controls .rotate-range,#opacity-sec .rotate-range{width:100%;display:block;height:4px;margin:2px 0 14px}
/* ═══ DISEGNO premium editor-panel redesign (v1) ═══ */
:root{
  --paper:#faf8f4; --sunken:#efece4; --ink:#26241f; --ink-soft:#6f6c62; --ink-faint:#a4a094;
  --hair-2:#e4e0d6; --accent:#1887C1; --accent-2:#136fa0; --accent-ink:#0f5f88; --accent-soft:#e6f2f0;
}
.mockwrap{background:var(--paper)}
.panel-sec{padding:20px 20px 22px;border-bottom:1px solid var(--hair-2)}
/* section header: rustiger, met accent-tick */
.panel-sec h3{display:block;margin:0 0 14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-faint)}

/* label + inline value-pill */
.lbl{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--ink-soft);font-weight:600;margin:0 0 9px}
.lbl span{font-variant-numeric:tabular-nums;color:var(--accent-ink);font-weight:700;background:var(--accent-soft);padding:2px 9px;border-radius:20px;font-size:11px;letter-spacing:0}
/* tekstinput + selects: verfijnd */
.field{width:100%;height:42px;padding:0 13px;border:1px solid var(--hair-2);border-radius:11px;background:#fff;color:var(--ink);font-size:14px;font-family:inherit;margin-bottom:14px;transition:border-color .15s,box-shadow .15s}
.field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
select.field{-webkit-appearance:none;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' stroke='%236f6c62' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}
#text-value{font-weight:600;letter-spacing:.01em}
/* tekststijl = segmented control in een verzonken spoor */
.style-row{display:flex;gap:2px;background:var(--sunken);border:1px solid var(--hair-2);border-radius:11px;padding:3px;margin-bottom:16px}
.style-row button{flex:1;width:auto;height:33px;border:none;background:transparent;border-radius:8px;color:var(--ink-soft);font-size:14px;line-height:1;display:grid;place-items:center;cursor:pointer;transition:background .14s,color .14s,box-shadow .14s}
.style-row button:hover{background:rgba(255,255,255,.6);color:var(--ink)}
.style-row button.on{background:#fff;color:var(--accent);box-shadow:0 1px 3px rgba(20,30,28,.14)}
/* sliders: teal fill (--fill live via JS), ronde duim. VISUEEL = globaal; LAYOUT (block/breedte) = alleen linkerpaneel (balk-pops houden hun flex-rij). */
input[type=range].rotate-range{-webkit-appearance:none;appearance:none;height:7px;border-radius:99px;cursor:pointer;background:linear-gradient(var(--accent),var(--accent)) 0/var(--fill,50%) 100% no-repeat,var(--sunken)}
input[type=range].rotate-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:1px solid var(--hair-2);box-shadow:0 2px 6px rgba(20,30,28,.26);cursor:pointer}
#common-controls .rotate-range,#text-controls .rotate-range,#opacity-sec .rotate-range{width:100%;display:block;height:7px;margin:3px 0 17px}   /* FIX (02-08): #opacity-sec (Doorzichtigheid) ontbrak hier, sloot niet aan bij de rest van het paneel na het losknippen van dit blok */
/* swatches iets ruimer + nette ring */
.swatches{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:14px}
.sw{width:25px;height:25px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--hair-2);cursor:pointer}
.sw:hover{transform:scale(1.08)}
.sw.active{box-shadow:0 0 0 2px var(--accent)}
/* hint verfijnd */
.hint{font-size:11.5px;line-height:1.5;color:var(--ink-faint);margin:4px 0 0}
.hint b{color:var(--ink-soft)}
/* Bewerken + Tekst visueel als één blok laten voelen: zachtere divider */
#common-controls{border-bottom:1px solid var(--hair-2);background:linear-gradient(var(--paper),var(--paper))}

/* ── Bewerken-venster: opent bij selectie, OVER de 248px tools-kolom (shirt + prijs blijven vrij) ── */
.studio{position:relative}
#edit-float{position:absolute;left:100px;top:0;width:380px;height:100%;z-index:9;background:var(--paper);border-right:1px solid var(--hair-2);box-shadow:9px 0 34px -14px rgba(20,30,28,.30);display:flex;flex-direction:column;animation:efIn .16s ease}   /* FIX (03-08): 420px→380px, moet gelijk blijven aan de nieuwe .tools-kolombreedte */
#edit-float[hidden]{display:none}
@keyframes efIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.ef-head{flex:none;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--hair-2);background:#fff}
.ef-title{font-size:13px;font-weight:750;color:var(--ink);letter-spacing:.01em}
#ef-close{width:30px;height:30px;border:1px solid var(--hair-2);background:var(--paper);border-radius:8px;color:var(--ink-soft);font-size:13px;cursor:pointer;display:grid;place-items:center;transition:all .14s}
#ef-close:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.ef-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.ef-body .panel-sec{border-bottom:1px solid var(--hair-2)}
.ef-body .panel-sec:first-child{padding-top:16px}
/* venster compacter zodat alles in één overzicht past (geen scroll) */
.ef-body .panel-sec{padding:13px 16px 14px}
.ef-body .lbl{margin-bottom:6px}
.ef-body .field{margin-bottom:10px;height:39px}
.ef-body input.rotate-range{margin:2px 0 11px}
.ef-body .style-row{margin-bottom:12px}
.ef-body .swatches{margin-bottom:10px;gap:8px}
.ef-body .hint{font-size:11px;line-height:1.45;margin-top:2px}

/* ── Stage: wit productvlak vult de ruimte (geen los kaartje in een beige zee → "dood vlak" weg) ── */
.stage-wrap{padding:10px 12px 14px;background:radial-gradient(circle at 1px 1px,rgba(20,22,21,.03) 1px,transparent 0) 0 0/22px 22px,radial-gradient(64% 48% at 50% 30%,#ffffff,#f6f6f3 92%)}
.stage-inner{box-shadow:0 1px 2px rgba(20,22,21,.04),0 16px 40px -10px rgba(20,22,21,.10)}


/* Afmeting op één regel: breedte × hoogte + slot, eenvoudig aanpasbaar */
.mm-row{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.mm-row .field.mm{flex:1;width:auto;min-width:0;height:40px;text-align:center;padding:0 6px;margin:0;font-variant-numeric:tabular-nums;font-weight:600}
.mm-x{color:var(--ink-faint);font-size:15px}
.mm-u{color:var(--ink-soft);font-size:13px;font-weight:600}
.mm-lock{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--hair-2);border-radius:10px;cursor:pointer;background:var(--paper);flex:none;transition:border-color .15s,background .15s}
.mm-lock input{position:absolute;opacity:0;pointer-events:none}
.mm-lock span{font-size:14px;filter:grayscale(1);opacity:.45}
.mm-lock:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.mm-lock:has(input:checked) span{filter:none;opacity:1}

/* Vaste icoon-balk uiterst links (add-acties, altijd bereikbaar) */
.rail{background:var(--paper);border-right:1px solid var(--hair);display:flex;flex-direction:column;align-items:stretch;padding:12px 6px;gap:3px;overflow-y:auto;z-index:10}
.rail-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 2px;border:none;background:transparent;border-radius:12px;color:var(--ink-soft);font-size:10.5px;font-weight:600;cursor:pointer;text-align:center;line-height:1.15;font-family:inherit;transition:background .14s ease,color .14s ease}
.rail-ic{width:44px;height:44px;border-radius:13px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-size:20px;font-weight:700;transition:background .14s ease,color .14s ease,transform .14s ease}
.rail-item:hover{color:var(--ink)}
.rail-item:hover .rail-ic{background:var(--accent);color:#fff;transform:translateY(-1px)}
.rail-item:active .rail-ic{transform:translateY(0)}

/* Rust & cohesie: één kleurfamilie (teal + neutraal), geen botsende blauw/roze/geel */
.panel-sec.info-blue{background:#f1f7f5;border-color:#dcebe7}
.info-blue p{color:var(--ink-soft)}
.info-blue .ib-h{color:var(--accent-ink)}
.info-blue .ib-price b{color:var(--accent-ink)}
/* iets meer lucht in de panelen + rechter opties */
.panel-sec{padding:22px 20px 24px}
.opt-row{padding:13px 0}
.opt-txt small{line-height:1.5}

/* Techniek compacter: één regel per tegel (naam + omschrijving inline), kleur-randje behouden */
.tech-tiles{display:flex;flex-direction:column;gap:6px;margin-bottom:2px}
.tech-tiles .tech-tile{flex-direction:row;align-items:baseline;gap:9px;padding:9px 12px 9px 15px;font-size:13px;line-height:1.2;margin:0;min-height:0}
.tech-tiles .tech-tile small{font-size:11px;color:var(--muted);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tech-tiles .tech-tile.active small{color:rgba(255,255,255,.85)}
.tech-sec-hint,.panel-sec .tech-tiles + .hint{margin-top:9px}

/* "Geen zin"-blok recht uitlijnen: zelfde 20px inspringing als de andere secties (was full-width kaartje dat uitstak) */
.panel-sec.info-blue{margin:2px 0 10px;padding:16px 20px}
/* icoon-balk iets ruimer bij de bredere kolom */
.rail{padding:14px 8px;gap:4px}
.rail-item{padding:10px 3px;font-size:11px}
.rail-ic{width:46px;height:46px}

/* ═══ Strakke uitlijning v2: menu | podium | menu sluiten strak op elkaar aan ═══ */
/* 1. Middenkolom mag krimpen → het rechterpaneel valt nooit meer buiten beeld.
      (Kale 1fr houdt min-content = canvasbreedte aan en duwt kolom 4 van het scherm.) */
.studio{grid-template-columns:100px 380px minmax(0,1fr) 320px}   /* FIX (03-08, Ryan: "linker en rechter menus minder breed, het draait om het canvas") — was 420/360, canvas-kolom krijgt de 80px terug */

/* 2. Techniek-tegels groter i.v.m. het bredere paneel — meer aanwezigheid,
      nog steeds één regel, gekleurde rand behouden. */
.tech-tiles{gap:6px}
.tech-tiles .tech-tile{padding:10px 16px 10px 20px;font-size:14.5px;gap:10px}
.tech-tiles .tech-tile small{font-size:12px}
.tech-tile::before{width:5px}

/* 3. Podium = één vlak dat de kolom vult en strak tegen de panelen sluit
      (i.p.v. een klein kaartje in een losse beige zee). Product blijft even
      groot en gecentreerd; dezelfde stippen-textuur zit nu op het hele vlak. */
.stage-wrap{padding:12px 16px 12px;background:#fff;overflow:hidden}
.stage-body{place-items:stretch}
/* Fris & wit: podium = zuiver wit met alleen een subtiele stippen-textuur (geen beige),
   zachte hairline zodat het als één wit vlak met de panelen aanvoelt. */
.stage-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  border-radius:16px;border:1px solid var(--hair);
  box-shadow:0 1px 2px rgba(20,22,21,.04),0 16px 40px -26px rgba(20,22,21,.10);
  background:
    radial-gradient(circle at 1px 1px,rgba(20,22,21,.025) 1px,transparent 0) 0 0/22px 22px,
    #ffffff}

/* ── Compacter: minder witruimte zodat het linkerpaneel zonder scroll uitkomt ── */
.panel-sec{padding:14px 20px 16px}
.panel-sec h3{margin:0 0 10px}
.swatches{gap:8px;margin-bottom:8px}
.hint{margin-top:3px}
.panel-sec.info-blue{margin:2px 0 6px;padding:13px 18px}

/* Icoon-balk lager laten starten → eerste icoon op gelijke hoogte met het DTF-tegelblok
   (paneel: 14px padding + kop ~13px + 10px marge ≈ 37px → rail-item heeft zelf 10px top).
   + wit i.p.v. beige zodat de hele studio één fris wit vlak is (border-right scheidt nog). */
.rail{padding-top:28px;background:#fff}

/* ── Rail: SVG line-iconen + compartiment-lijnen (vakken-uitstraling, zoals de concurrent) ── */
.rail{gap:0}
.rail-ic .ric-svg{width:24px;height:24px}
.rail-item{padding:12px 3px;border-bottom:1px solid var(--hair-2);border-radius:0}
.rail-item:last-child{border-bottom:none}
.rail-item:hover{background:var(--accent-soft)}

/* ── Welkomstvenster (rijk onboarding — zelfde stijl/kwaliteit als de AI-studio) ──
   Links verankerd (over het menu, zoals Ryan wilde) → product blijft rechts schoon zichtbaar; lichte dim+blur. */
/* Gecentreerd op het PRODUCTVLAK (de stage tussen de menu's): links 520px (icoonbalk+paneel), rechts 300px.
   Op smallere schermen (stage < venster) valt het terug op venster-centrering. */
.welcome-modal{background:rgba(16,24,22,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
/* Productvlak-centrering ALLEEN op ruime desktop (≥1441px); daaronder = venster-centrering (base .modal padding:20px). */
@media(min-width:1441px){.welcome-modal{padding:20px 360px 20px 520px}}
.welcome-card{position:relative;width:560px;max-width:calc(100vw - 40px);max-height:calc(100vh - 40px);overflow:auto;padding:0}
.wc-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border:1px solid var(--hair-2);background:var(--paper);border-radius:9px;color:var(--ink-soft);font-size:14px;cursor:pointer;display:grid;place-items:center;transition:all .14s;z-index:2}
.wc-x:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.welcome-body{padding:28px 30px 24px}
.welcome-card .ai-h1{margin:6px 0 0}
.welcome-card .ai-lede{margin:10px 0 0}
.welcome-card .ai-own{margin:16px 0 0}
.wc-optlabel{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ink-soft);margin:20px 0 10px}
.welcome-card .start-grid{gap:12px}
.wc-skip{margin-top:16px;background:none;border:none;color:var(--ink-soft);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;padding:6px 0}
.wc-skip:hover{color:var(--accent)}

/* ── Onboarding-kaartjes (herbruikt in het welkomstvenster) ── */
#start-sec[hidden]{display:none}
.start-sec .start-grid,.welcome-card .start-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.start-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 14px 12px;
  border:1px solid var(--hair-2);border-radius:14px;background:#fff;cursor:pointer;text-align:left;
  font-family:inherit;color:var(--ink);transition:border-color .15s,box-shadow .18s,transform .12s,background .15s}
.start-card:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px);
  box-shadow:0 10px 24px -14px rgba(14,124,116,.5)}
.start-card:active{transform:translateY(0)}
.sc-ic{width:26px;height:26px;color:var(--accent);margin-bottom:9px}
.start-card .sc-t{font-size:14px;font-weight:700;letter-spacing:.01em}
.start-card small{font-size:11px;color:var(--ink-faint);font-weight:500}

/* ═══════════ MOBIEL (≤900px): desktop 4-koloms-grid → gestapelde kolom ═══════════
   Staat bewust achteraan zodat het mijn desktop-.studio-grid-override overrulet. */
@media(max-width:1100px){
  html{overflow-x:hidden}
  body{overflow-x:hidden;overflow-y:auto}

  /* Topbar compact: productnaam weg, knop-labels weg (alleen icoon), horizontaal scrollbaar */
  .topbar{padding:0 8px;gap:6px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .topbar > *{flex:0 0 auto}
  .product-name{display:none}
  /* Aanzicht-tabs + contextbalk horizontaal scrollbaar zodat niets wegvalt */
  .view-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start}
  .view-tabs button{flex:0 0 auto}
  /* FIX (28-07, Ryan: "geen zichtbare optie om te verwijderen"): .ctx-toolbar hing tot nu toe in de
     normale document-flow vlak boven .stage-body — zodra een object geselecteerd wordt scrollt
     app.js de pagina zo dat .stage-body bovenaan komt (Taak 1), en omdat ctx-toolbar DAARVOOR in
     de flow zit, werd het daarbij gewoon boven de zichtbare viewport uit geduwd (gemeten: top -176px
     — volledig onzichtbaar, dus ook "Verwijder" onbereikbaar, niet alleen "moeilijk te vinden").
     Zelfde bewezen aanpak als edit-float/mobile-tabs: position:fixed, losgekoppeld van de
     documentflow/scrollpositie, dus altijd zichtbaar zodra een object geselecteerd is. z-index 27
     (boven .rail 20 en .mobile-tabs 26) — bewust, zelfde precedent als edit-float hierboven: de
     contextbalk van het GESELECTEERDE object mag tijdelijk navigatie-chrome overdekken. */
  /* FIX 2 (28-07, live iPhone-screenshot Ryan): full-width + de losstaande desktop-regel
     .ctx-toolbar{flex-wrap:wrap} (elders in dit bestand, niet mobiel-specifiek) samen gaven een
     3-rijen-hoog blok dat voor de helft leeg bleef — er waren simpelweg niet genoeg knoppen om een
     hele telefoonbreedte per rij te vullen. flex-wrap:nowrap dwingt terug naar ÉÉN compacte,
     horizontaal scrollbare rij (de overflow-x:auto + mask-fade-hint hierboven/verderop waren daar
     al voor bedoeld, wrap omzeilde ze alleen ongemerkt). */
  .stage-wrap > .ctx-toolbar{position:fixed;top:8px;left:8px;right:8px;margin:0;bottom:auto;
    max-width:none;width:auto;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;z-index:27}
  /* FIX 3 (28-07, Ryan): Draaien komt op mobiel niet vaak van pas (je kan een object toch al met
     de vinger draaien via het rotatie-handvat op het canvas zelf) en kost kostbare breedte in de nu
     compacte rij — weg op mobiel, blijft op desktop gewoon staan. */
  #ctx-rot-menu{display:none}
  /* FIX 4 (28-07, Ryan: "ongelijke tussenruimtes"): .ctx-sep had een EIGEN margin:5px 3px bovenop
     de gewone flex-gap van de balk — rond elke scheidingsstreep ontstond zo een veel grotere
     tussenruimte (2+3+1+3+2=11px) dan tussen twee gewone knoppen (2px). Op mobiel de eigen margin
     van de streep weg en de balk-brede gap iets ruimer gezet — nu overal precies dezelfde afstand. */
  .stage-wrap > .ctx-toolbar{gap:6px}
  .stage-wrap > .ctx-toolbar .ctx-sep{margin:4px 0}
  /* FIX (28-07, Ryan: "de kleurknop in de bovenste bewerkingsbalk doet het niet"): .ctx-toolbar kreeg
     hierboven (FIX 2) overflow-x:auto voor de horizontale scroll — maar zodra overflow-x niet
     'visible' is, rekent de browser overflow-y ook automatisch als 'auto' (CSS-spec-gedrag, geen bug
     in onze eigen regels), zelfs al staat overflow-y nergens expliciet genoemd. Elke .ctx-pop
     (Kleur/Schikken/Draaien) is een absoluut gepositioneerd dropdown-paneel dat van nature ONDER de
     balk uitsteekt — en werd daardoor stilzwijgend afgeknipt: de open-class en syncColorUI() werkten
     nog gewoon (bevestigd via getComputedStyle), maar er verscheen visueel niets, exact "doet het
     niet". Fix: op mobiel escapen .ctx-pop's uit de geclipte balk via position:fixed (ontsnapt aan
     ELKE ancestor-overflow, mits geen enkele ancestor een eigen transform/filter heeft — gecontroleerd,
     .stage-wrap heeft dat niet) — de knop-positie wordt in app.js bij het openen zelf uitgerekend. */
  .ctx-pop{position:fixed;top:auto;left:auto}
  .brand-logo{height:26px}
  .dg-tools{gap:1px}
  .dg-tools a{padding:6px 8px;font-size:11px}
  .topbar-actions{gap:3px}
  .topbar-actions .sep{display:none}
  .gb-lbl{display:none}
  .topbar-actions .ghost-btn{padding:8px 10px;font-size:15px}

  /* Studio → gestapelde kolom, product bovenaan.
     .stage-body kreeg eerst position:sticky (2026-07-27) om zichtbaar te blijven tijdens het
     bewerken — bleek op echt iOS (WebKit, ook onder "Chrome" op iPhone: Apple verplicht WebKit
     voor alle browser-apps) niet betrouwbaar te werken (sticky binnen een flex:1-item is een
     bekende cross-browser-valkuil). VERVANGEN door: gewone positionering (geen sticky) + actief
     naar de canvas scrollen zodra een ontwerpelement geselecteerd wordt (zie app.js) — simpeler,
     geen flex/sticky-interactie, werkt overal hetzelfde. min/max-height blijft staan zodat de
     canvas zelf altijd een gezonde afmeting krijgt (was eerder te klein: 106px i.p.v. deze ~46vh
     doordat het budget op de hele stage-wrap stond in plaats van alleen de canvas-houder). */
  .studio{display:flex;flex-direction:column;height:auto}
  .stage-wrap{order:1;padding:10px 12px}
  /* max-height omhoog van 46vh naar 58vh (28-07, wens Ryan: canvas nam de helft van het scherm in,
     "menu" de andere helft) — fitCanvas() is hier daadwerkelijk HOOGTE-gebonden (bevestigd gemeten:
     bij 46vh kwam de canvas nooit in de buurt van de beschikbare breedte), dus deze cap rechtstreeks
     ophogen vergroot de canvas zichtbaar. edit-float's eigen 46vh-cap blijft ongewijzigd (Taak 1) —
     die twee hoeven niet gelijk te zijn. */
  /* dvh weer teruggedraaid (28-07, direct ná invoeren): .stage-body is een gewoon in-flow element
     (geen position:fixed zoals edit-float) — dvh liet 'm precies daarom MEEKRIMPEN zodra het
     toetsenbord opende (dvh volgt de zichtbare viewport, en die wordt kleiner met het toetsenbord
     erbij) — gecombineerd met fitCanvas()'s eigen resize-listener (zie app.js) gaf dat exact "beeld
     verspringt en valt terug in een kleine maat" zodra je ging typen. Hier is stabiliteit juist
     gewenst: de canvas moet z'n grootte BEHOUDEN terwijl je typt, niet meekrimpen. vh (vaste,
     toetsenbord-onafhankelijke waarde) is hier dus de juiste keuze, dvh niet.  */
  .stage-body{min-height:230px;max-height:58vh;overflow:hidden;background:var(--paper)}
  .stage-inner{border-radius:12px}
  /* product-note-bar ("Realistische weergave…") had een desktop-only transform:translateY(-17px) —
     op mobiel, sinds de zoom-controls-rij (Taak 4) erboven bijkwam, duwde die het bannertje 3px ÍN
     de zoom-controls. Tegelijk compacter gemaakt (kleinere tekst/padding) — samen met de hogere
     stage-body-cap hierboven levert dit merkbaar meer canvas-ruimte op (28-07, wens Ryan). */
  .product-note-bar{transform:none;margin:4px auto 8px;font-size:11.5px;line-height:1.35;padding:6px 12px}

  /* FIX (28-07, Ryan: "menu met techniek, kleur, maten is terug gekomen irritant op de pagina"):
     .rail stond hier op position:sticky;top:0 — sticky "vast" pas zodra je zo ver scrolt dat de
     natuurlijke top-positie van het element voorbij top:0 zou gaan. Gemeten: .rail's natuurlijke
     top lag op 724px, maar de pagina heeft maar ~480px scrolruimte (body.scrollHeight 1324 −
     innerHeight 844) — sticky kwam dus NOOIT in werking. Het resultaat: .rail bleef gewoon in de
     normale document-flow meescrollen en gleed daarbij dwars door de vaste 723-780px-band waar
     .mobile-tabs zweeft (position:fixed, altijd zichtbaar, z-index 26 > rail's 20) — bevestigd met
     scrollsimulatie: bij slechts 20-150px scrollen (het bereik waar je normaal stopt om de
     "Toevoegen aan ontwerp"-balk te gebruiken) zat 17 tot bijna de volledige knophoogte al onder
     mobile-tabs verstopt, incl. de betaalde functie "Namen & nummers". Sticky op basis van een
     top-drempel is dus niet robuust (hangt af van canvaslengte, die per product verschilt) — .rail
     wordt daarom net als mobile-tabs/mobile-order-bar een DERDE vaste balk onderaan, gestapeld
     boven mobile-tabs (bottom:121px = mobile-tabs 57px + mobile-order-bar 64px), zodat er nooit meer
     overlap met scrollende inhoud kan ontstaan — zelfde patroon, geen scroll-afhankelijkheid meer. */
  .rail{order:2;flex-direction:row;align-items:stretch;overflow-x:auto;overflow-y:hidden;
    padding:6px 4px;gap:0;border-right:none;border-top:1px solid var(--hair);
    position:fixed;left:0;right:0;bottom:121px;z-index:21;background:#fff;-webkit-overflow-scrolling:touch}
  .rail-item{flex:0 0 auto;min-width:68px;padding:8px 4px;border-bottom:none;font-size:10px}
  .rail-item:not(:last-child){border-right:1px solid var(--hair-2)}
  .rail-ic{width:34px;height:34px}
  .rail-ic .ric-svg{width:19px;height:19px}
  /* .rail staat nu vast (zie boven) en telt dus niet meer mee in de document-flow — reserveer die
     ruimte onderaan de pagina zodat de laatste inhoud (.panel.side) niet achter de vaste stapel
     rail+mobile-tabs+mobile-order-bar verdwijnt. */
  .studio{padding-bottom:210px}

  /* Optie- + samenvattingspaneel = volle breedte, gestapeld (natuurlijke pagina-scroll) */
  .panel.tools{order:3}
  .panel.side{order:4;border-top:1px solid var(--hair)}
  .panel{overflow:visible;max-height:none}

  /* Bewerken = bottom-sheet i.p.v. links-uitschuivend paneel.
     max-height 74vh→46vh (2026-07-27): liet op een 667px-scherm maar 26vh vrij, ruim onder de
     44-48vh die de sticky canvas hierboven nu vraagt — canvas werd dus grotendeels bedekt.
     z-index:25 (2026-07-27, ontdekt tijdens verificatie): zonder expliciete z-index erft dit de
     desktop-waarde (9) en komt het ACHTER de sticky .rail/.mobile-tabs te liggen (beide 20) —
     het paneel was daardoor zelf grotendeels onzichtbaar/onklikbaar geworden door de fix
     hierboven. 25 = boven beide, zodat het bewerkpaneel bij openen echt op de voorgrond komt
     (rail/tabbalk worden dan tijdelijk overdekt — bewust, want ze sluiten dit paneel toch al
     bij een tik dankzij de auto-sluit-fix in app.js). */
  /* dvh ná vh (28-07, Ryan: "vult mijn hele scherm, krijg het niet weg" tijdens tekst-invoer):
     vh negeert het toetsenbord op mobiel (blijft de VOLLE, ongeopende schermhoogte gebruiken) —
     een klassieke bron van precies dit soort "paneel klopt niet meer zodra het toetsenbord open
     staat"-bugs. dvh volgt de daadwerkelijk zichtbare viewport wél; vh blijft als fallback staan
     voor browsers die dvh niet kennen (cascade: latere regel wint als beide ondersteund worden). */
  #edit-float{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;height:auto;
    max-height:46vh;max-height:46dvh;z-index:25;border-right:none;border-top:1px solid var(--hair);
    border-radius:16px 16px 0 0;box-shadow:0 -14px 36px -14px rgba(20,30,28,.32);animation:none}

  /* Welkomstvenster: op mobiel de grid-centrering vervangen door FLEX — anders rekent de kaart
     tegen de content-sized grid-cel en loopt-ie over het scherm (✕ valt weg). Flex maakt 'm 100%. */
  .welcome-modal{display:flex;align-items:center;justify-content:center;padding:12px}
  .welcome-card{width:100%;max-width:none;min-width:0;max-height:calc(100vh - 24px)}
  .welcome-body{padding:22px 18px 18px}
  .welcome-card .ai-h1{font-size:21px}
  .welcome-card .start-grid{gap:9px}
  .wc-x{top:12px;right:12px}
}

/* Zichtbare aanwijzing dat topbar/view-tabs/rail horizontaal doorlopen — CSS mask-fade i.p.v.
   afhankelijk zijn van een toevallig half-zichtbare knop (2026-07-27, PDCA-mobielaudit, Taak 2).
   Onschuldig aanwezig ook als een rij toevallig niet overflowt (geen content tegen de rand). */
@media(max-width:1100px){
  .topbar,.view-tabs,.rail,#ctx-toolbar{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);
  }
}

/* Touch-doelen ≥40px op mobiel/tablet (2026-07-24-audit + code-audit bevestigd: .sw 25-26px,
   .style-row button 33-34px, #ef-close 30px — allemaal onder de 40-44px-vingerrichtlijn).
   Bewust GESCOPED tot dit bereik — desktop-dichtheid blijft ongewijzigd, Taak 3. */
@media(max-width:1100px){
  .sw{width:40px;height:40px}
  .swatches{gap:10px}
  .style-row button{width:40px;height:40px}
  .icon-btn{width:40px;height:40px}
  .mt-tab{height:44px}
  #ef-close{width:40px;height:40px;display:grid;place-items:center}
}

/* In-app zoom op de canvas (2026-07-27, Taak 4) — desktop verbergt dit (muis+trackpad hebben
   geen precisieprobleem); mobiel/tablet krijgt +/− om op een klein printvlak-detail in te
   zoomen, compensatie voor user-scalable=no. .stage-body wordt pan-baar (overflow:auto) zodra
   userZoom>1 via app.js. */
.zoom-controls{display:none}
@media(max-width:1100px){
  .zoom-controls{display:flex;gap:4px;justify-content:center;margin:6px 0}
  .zoom-controls button{width:40px;height:40px;border:1px solid var(--hair-2);border-radius:8px;
    background:var(--panel);font-size:16px;font-weight:700;color:var(--ink);cursor:pointer}
  #zoom-reset{width:auto;padding:0 10px;font-size:12px;font-weight:600}
}

/* Teamwear-rooster: naamveld te krap op smalle telefoons (2026-07-27, Taak 6) — de vaste kolommen
   (Nr/Maat/verwijder) laten op 375px maar 63px over voor 1fr (naam), terwijl Nr/Maat ruim genoeg
   blijven bij een kleinere vaste breedte. Alleen de smalste telefoons (≤420px); vanaf tablet is de
   rij breed genoeg en blijft de desktop-verdeling gelden. */
@media(max-width:420px){
  .roster-head,.roster-row{grid-template-columns:20px 1fr 46px 74px 24px;gap:4px}
}


/* ═══ Donkere studio-modus — teal-variant (2026-07-24, gekozen door Ryan na side-by-side vs lime).
   Activering: <html data-theme="dark">, standaard = licht. Schakelaar in de topbar (#theme-toggle),
   keuze onthouden in localStorage 'disegno_theme'. Tokens overriden hier álles wat var() gebruikt;
   daaronder de hardcoded lichte plekken die in de preview door de mand vielen. ═══ */
html[data-theme=dark]{
  --bg:#191b1a; --panel:#222523; --panel-2:#1e211f;
  --ink:#f0efe9; --ink-soft:#b8b7ae; --muted:#8b8b83;
  --hair:#2e332f; --hair-2:#3d443f;
  --paper:#1e211f; --sunken:#141615; --ink-faint:#8b8b83;
  --accent:#3fb0e8; --accent-2:#27a094; --accent-soft:rgba(47,184,170,.16);
  --accent-ink:#7fe0d6; --accent-ring:rgba(47,184,170,.4);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.55);
}
html[data-theme=dark] body{background:var(--bg)}
html[data-theme=dark] .stage-wrap{background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.045) 1px,transparent 0) 0 0/22px 22px,radial-gradient(64% 48% at 50% 30%,#232625,#1b1e1d 92%) !important}
html[data-theme=dark] .stage-inner{background:#101211}
html[data-theme=dark] .rail{background:var(--panel) !important}
html[data-theme=dark] .field{background:var(--panel-2)}
html[data-theme=dark] .style-row button.on{background:#2c302d;color:var(--accent)}
html[data-theme=dark] .ef-head{background:var(--panel)}
html[data-theme=dark] .panel-sec.info-blue{background:#1f2624;border-color:#2c3531}
html[data-theme=dark] .sw{border-color:var(--panel-2)}
html[data-theme=dark] a{color:var(--accent-ink)}
html[data-theme=dark] .wm-tile{filter:invert(1);opacity:.06}
html[data-theme=dark] .brand-logo{filter:invert(1) hue-rotate(180deg)}
html[data-theme=dark] input,html[data-theme=dark] select,html[data-theme=dark] textarea{color-scheme:dark}
html[data-theme=dark] .modal-card,html[data-theme=dark] .library-card{background:var(--panel)}
html[data-theme=dark] .es-inner{background:rgba(34,37,35,.92)}
html[data-theme=dark] .topbar,html[data-theme=dark] .mobile-tabs,html[data-theme=dark] .mobile-order-bar{background:var(--panel)}


/* ── v143: senior-audit-polish ── */
.font-preview{margin:7px 0 2px;padding:8px 11px;border:1px dashed var(--line,#d8d2c6);border-radius:8px;font-size:19px;line-height:1.25;color:var(--ink,#20241f);background:var(--paper-2,#fbf9f4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#left-cp-open{margin-top:8px;width:100%}
#print-check{position:sticky;bottom:-1px;z-index:6;box-shadow:0 -8px 18px rgba(20,24,20,.07)}
.opt-txt small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
label:hover .opt-txt small,label:focus-within .opt-txt small,input:checked~.opt-txt small,input:checked+.opt-txt small{-webkit-line-clamp:30}
.g-score{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-size:12.5px;color:var(--ink-2,#5a5f58);text-decoration:none}
.g-score b{color:var(--ink,#20241f)}
.g-score:hover{text-decoration:underline}
html[data-theme=dark] .font-preview{background:#23282406;border-color:#3a413c;color:#e8ebe6}


/* ── v144: senior-v2-structuur (teal) ── */
.opt-txt small{display:block;-webkit-line-clamp:unset;overflow:visible}   /* v143-clamp vervangen door echte compacte copy */
.tip-box{margin:0 0 10px;padding:9px 12px;border-radius:9px;background:rgba(24,135,193,.08);border:1px solid rgba(24,135,193,.22);font-size:12.5px;line-height:1.45;color:var(--ink,#20241f)}
.opt-row{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line,#ddd6c8);border-radius:10px;padding:10px 12px;margin:0 0 8px;background:var(--paper-2,#fbf9f4);transition:border-color .15s, background .15s}
.opt-row:has(input:checked){border-color:#1887C1;background:rgba(24,135,193,.06)}
.opt-row input{margin-top:3px}
.opt-kop{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.opt-kop b{font-size:13px}
.opt-fee{font-size:12px;font-weight:700;color:#1887C1;white-space:nowrap}
.opt-row .opt-txt small{margin-top:3px;font-size:11.5px;line-height:1.45;color:var(--ink-2,#6a7066)}
.hexrow-left{display:flex;align-items:center;gap:8px;margin-top:8px}
.hex-dot{width:26px;height:26px;border-radius:7px;border:1px solid var(--line,#ccc);background:#1c211f;flex:none}
.hexfield{flex:1;font-family:ui-monospace,Menlo,monospace;letter-spacing:.04em;text-transform:uppercase}
.hex-lab{font-size:10px;letter-spacing:.12em;color:var(--ink-2,#8a8f85)}
.cp-link{background:none;border:none;padding:4px 0 0;font-size:11.5px;color:#1887C1;cursor:pointer;text-align:left}
.cp-link:hover{text-decoration:underline}
.fx-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:4px}
.fx-chips button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px 5px;border:1px solid var(--line,#ddd6c8);border-radius:9px;background:var(--paper-2,#fbf9f4);cursor:pointer}
.fx-chips button.on{border-color:#1887C1;background:rgba(24,135,193,.08)}
.fx-chips i{font-style:normal;font-size:9.5px;letter-spacing:.03em;color:var(--ink-2,#6a7066)}
.fxA{font-family:Anton,sans-serif;font-size:19px;line-height:1;color:#20241f}
.fx-shadow{text-shadow:2px 2px 2px rgba(0,0,0,.35)}
.fx-outline{-webkit-text-stroke:1px #1887C1}
.fx-glow{text-shadow:0 0 6px rgba(24,135,193,.9)}
.fx-hollow{-webkit-text-stroke:1.3px #20241f;color:transparent}
.fx-3d{text-shadow:1px 1px 0 #9db8b4,2px 2px 0 #7ba39e,3px 3px 3px rgba(0,0,0,.25)}
.fx-hl{background:#1887C1;color:#fff;padding:0 4px;border-radius:3px}
html[data-theme=dark] .opt-row{background:#232824;border-color:#3a413c}
html[data-theme=dark] .fx-chips button{background:#232824;border-color:#3a413c}
html[data-theme=dark] .fxA{color:#e8ebe6}
html[data-theme=dark] .tip-box{color:#e8ebe6}


/* ── v146: gelabelde toolbar (licht, senior-structuur) + contextuele hint ── */
.lab-btn{width:auto !important;padding:0 11px !important;gap:5px}
.btn-lab{font-size:11px;letter-spacing:.02em}
@media(max-width:1100px){.btn-lab{display:none}.lab-btn{width:34px !important;padding:0 !important}}
.ctx-toolbar{background:#fff;border:1px solid var(--line,#ddd6c8);box-shadow:0 5px 18px rgba(20,24,20,.12)}
.ctx-toolbar>button,.ctx-menu>button{color:#2a2f2b;width:auto;min-width:42px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:3px 6px;font-size:14px}   /* FIX (03-08): 9px→6px — de balk (incl. de sindsdien toegevoegde "Bewerken"-knop) paste hierdoor op 1440-1728px net niet meer op 1 regel (843px nodig, 816px beschikbaar) en brak af naar 2; Ryan bevestigde dat 'ie voorheen altijd 1 regel was */
.ctx-toolbar>button:hover,.ctx-menu>button:hover{background:rgba(24,135,193,.10);color:#1887C1}
.ctx-menu.open>button{background:rgba(24,135,193,.14);color:#1887C1}
.ctx-toolbar button i{font-style:normal;font-size:8.5px;letter-spacing:.03em;opacity:.85;display:block;line-height:1}
.ctx-toolbar .notxt,.ctx-toolbar #tb-ratio{flex-direction:row}
.ctx-sep{background:var(--line,#ddd6c8)}
.ctx-toolbar .danger:hover{background:rgba(166,61,47,.12);color:#a63d2f}
.dbl-hint{margin:7px auto 0;width:max-content;max-width:92%;padding:5px 13px;border-radius:999px;background:rgba(24,135,193,.10);border:1px solid rgba(24,135,193,.28);font-size:12px;color:#1887C1}
html[data-theme=dark] .ctx-toolbar{background:#232824;border-color:#3a413c}
html[data-theme=dark] .ctx-toolbar>button,html[data-theme=dark] .ctx-menu>button{color:#e8ebe6}
html[data-theme=dark] .ctx-toolbar>button:hover,html[data-theme=dark] .ctx-menu>button:hover{background:rgba(76,180,235,.16);color:#6cc4ee}
html[data-theme=dark] .dbl-hint{background:rgba(76,180,235,.14);border-color:rgba(76,180,235,.35);color:#6cc4ee}

/* v147: labels ALTIJD zichtbaar (senior-stijl) — oude text-mode-verberging opgeheven */
.ctx-toolbar.text-mode #ctx-size-menu .has-pop>i,.ctx-toolbar.text-mode #ctx-rot-menu .has-pop>i,.ctx-toolbar.text-mode #ctx-color-menu .has-pop>i,.ctx-toolbar.text-mode #ctx-pos-menu .has-pop>i{display:block}
.ctx-toolbar button.has-pop>i{font-size:8.5px}


/* ── v148: maten-matrix per kleur ── */
.mx-blok{border:1px solid var(--line,#ddd6c8);border-radius:11px;background:var(--paper-2,#fbf9f4);padding:9px 11px;margin:0 0 9px}
.mx-kop{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.mx-kop img{width:22px;height:22px;border-radius:6px;object-fit:cover;border:1px solid var(--line,#ddd6c8)}
.mx-dot{width:20px;height:20px;border-radius:6px;background:#c9c4b8;display:inline-block}
.mx-kop b{font-size:12.5px}
.mx-som{margin-left:auto;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:#1887C1;font-weight:700}
.mx-kop .rm{margin-left:6px}
.mx-rij{display:grid;grid-template-columns:1fr 30px 48px 30px;gap:6px;align-items:center;padding:3px 0}
.mx-rij+.mx-rij{border-top:1px dashed rgba(0,0,0,.05)}
.mx-maat{font-size:12.5px;font-weight:600}
.mx-btn{width:30px;height:30px;border:1px solid var(--line,#ddd6c8);border-radius:8px;background:#fff;font-size:15px;cursor:pointer;line-height:1}
.mx-btn:hover{border-color:#1887C1;color:#1887C1}
.mx-qty{width:48px;height:30px;text-align:center;border:1px solid var(--line,#ddd6c8);border-radius:8px;font-size:13px;-moz-appearance:textfield}
.mx-qty::-webkit-outer-spin-button,.mx-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mx-qty:focus{border-color:#1887C1;outline:none}
.mx-add{margin:2px 0 6px}
.matrix-staffel{margin-top:7px;font-size:11.5px;line-height:1.45;color:var(--ink-2,#6a7066)}
.matrix-staffel.actief{color:#1887C1;font-weight:600}
html[data-theme=dark] .mx-blok{background:#232824;border-color:#3a413c}
html[data-theme=dark] .mx-btn,html[data-theme=dark] .mx-qty{background:#1b201d;border-color:#3a413c;color:#e8ebe6}


/* v150: actieve kleur gemarkeerd in de matrix */
.mx-blok.actueel{border-color:#1887C1;box-shadow:0 0 0 1px rgba(24,135,193,.25)}
.mx-blok.actueel .mx-kop b::after{content:' \2014 op het kledingstuk';font-weight:400;font-size:10.5px;color:#1887C1}


/* ── v151: zichtbare mm-velden + bewerkbare preview + toolbar-undo ── */
.ctx-toolbar input{width:46px;height:27px;text-align:center;color:#2a2f2b;background:#fff;border:1px solid var(--line,#ddd6c8);border-radius:7px;font-size:12.5px;font-family:ui-monospace,Menlo,monospace}
.ctx-toolbar input:focus{border-color:#1887C1;outline:none}
.ctx-toolbar .tb-x{color:#8a8f85;font-size:11px}
.ctx-toolbar button:disabled{opacity:.35;cursor:default}
.font-preview{cursor:text}
.font-preview:focus{outline:2px solid rgba(24,135,193,.35);outline-offset:1px;background:#fff}
/* FIX (03-08, Ryan: "veel open ruimte, daar past nog een slotje tussen" — bleek al te bestaan, niet
   zichtbaar): .tb-step (−/breedte/×/hoogte/+/🔗) dateert van vóór v146's omschakeling naar een
   lichte balk-standaard en kleurt z'n knoppen nog altijd bijna-wit (voor de oude donkere achtergrond).
   v151 hierboven gaf alleen de invoervelden een lichte stijl, de knoppen (−, + en het 🔗-slotje)
   werden toen over het hoofd gezien — wit-op-wit dus onzichtbaar tegen de lichte balk, terwijl ze wel
   gewoon werkten en hun ruimte innamen (vandaar het "lege" gevoel). */
.ctx-toolbar .tb-step button{color:#2a2f2b}
.ctx-toolbar .tb-step button:hover{background:rgba(24,135,193,.10);color:#1887C1}
html[data-theme=dark] .ctx-toolbar input{background:#1b201d;color:#e8ebe6;border-color:#3a413c}
html[data-theme=dark] .ctx-toolbar .tb-step button{color:rgba(255,255,255,.9)}
html[data-theme=dark] .ctx-toolbar .tb-step button:hover{background:rgba(255,255,255,.22);color:#fff}
html[data-theme=dark] .font-preview:focus{background:#1b201d}

/* v152: "op het kledingstuk"-label alleen tonen bij MEERDERE kleurblokken (anders ruis) */
#order-lines .mx-blok:only-child .mx-kop b::after{content:none}
#order-lines .mx-blok:only-child{border-color:var(--line,#ddd6c8);box-shadow:none}


/* ── v152: eigen font-dropdown + kleurenkiezer in het linkerpaneel ── */
.font-open{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;font-size:16px;text-align:left}
.font-open i{font-style:normal;font-size:10px;color:#8a8f85}
.font-list{border:1px solid var(--line,#ddd6c8);border-radius:10px;background:#fff;max-height:264px;overflow:auto;margin:6px 0 4px;box-shadow:0 8px 22px rgba(20,24,20,.12)}
.font-rij{display:block;width:100%;text-align:left;padding:9px 13px;border:none;background:none;font-size:17px;cursor:pointer;color:#20241f}
.font-rij:hover{background:rgba(24,135,193,.08)}
.font-rij.on{background:rgba(24,135,193,.12);color:#1887C1}
#left-cp-host{margin-top:8px}
#left-cp-host .cp{position:static;display:block;box-shadow:none;border:1px solid var(--line,#ddd6c8);border-radius:11px;padding:11px;background:#fff;margin:0}
html[data-theme=dark] .font-list,html[data-theme=dark] #left-cp-host .cp{background:#232824;border-color:#3a413c}
html[data-theme=dark] .font-rij{color:#e8ebe6}


/* v154: het font-voorbeeld is nu HET tekstveld */
.font-preview.veld{border:1px solid var(--line,#ddd6c8);border-style:solid;background:#fff;min-height:44px;display:flex;align-items:center;padding:9px 13px}
html[data-theme=dark] .font-preview.veld{background:#1b201d;border-color:#3a413c}

/* v155: kleurenkiezer-link strak op de hexbalk */
.hexrow-left{margin-top:8px;margin-bottom:0}
.cp-link{margin:3px 0 0;padding:2px 0}
#left-cp-host:empty{display:none}
#left-cp-host{margin-top:6px}

/* v158: kiezer-link op 3px van de hexbalk */
.cp-link{margin:0;padding:1px 0 0}


/* v158: kiezer-link exact ~3px onder de hexbalk (ID-regel uit v143 overstemmen) */
#left-cp-open{margin-top:2px}

/* v165: mm-velden compacter (waren fors uitgevallen bovenaan het paneel) */
.mm-row{gap:7px}
.mm-row .field.mm{height:34px;padding:4px 8px;font-size:14px;max-width:92px;text-align:center}
.mm-row .mm-u{font-size:12px}
.mm-row .mm-lock{transform:scale(.88)}

/* v166: Afmeting-blok compacter — kleinere marges, alles dichter op elkaar */
#common-controls{padding-top:10px;padding-bottom:10px}
#common-controls .lbl{margin:0 0 4px}
#common-controls .size-slide{margin:0 0 7px}
#common-controls .mm-row{margin:0}
#common-controls .mini-lbl{font-size:11px}
#common-controls .mini-lbl.big{font-size:17px}

/* v167: Afmeting-rij uitlijnen — A-labels gecentreerd op de schuif, spinners weg, slotje in lijn */
#common-controls .size-slide{display:flex;align-items:center;gap:9px}
#common-controls .mini-lbl{line-height:1;display:flex;align-items:center}
.field.mm::-webkit-inner-spin-button,.field.mm::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.field.mm{-moz-appearance:textfield;appearance:textfield}
#common-controls .mm-row{display:flex;align-items:center}
#common-controls .mm-row .mm-lock{transform:none}
#common-controls .mm-row .mm-lock span{font-size:14px}

/* v170: verhouding-slot uit de balk (zit al bij Afmeting) — TERUGGEDRAAID (03-08, Ryan: de
   breedte/hoogte-velden staan zelf ook al dubbel in balk én linkerpaneel, dan is het slotje er ook
   bij makkelijker dan enkel in het linkerpaneel). #tb-ratio en #size-lock (linkerpaneel) delen
   dezelfde onderliggende sizeLock-checkbox (zie app.js) en blijven dus vanzelf gesynchroniseerd. */


/* v171: balk compacter + Verticaal alleen bij tekst */
.ctx-toolbar{gap:2px;padding:3px 8px}   /* FIX (03-08): 5px→3px, canvas krijgt voorrang */
.ctx-toolbar>button,.ctx-menu>button{min-width:36px;height:42px;padding:3px 5px}   /* FIX (03-08): 7px→5px — deze latere regel won het van de v-eerdere 6px-poging hierboven; balk paste met 7px nog steeds niet op 1 regel (843px nodig, 816px beschikbaar) */
.ctx-toolbar .tb-step{gap:4px}
.ctx-toolbar:not(.text-mode) .txt-only{display:none}


/* v172: Bewerken-venster zonder scroll — alles compact en vast */
#edit-float .panel-sec{padding-top:8px;padding-bottom:8px}
#edit-float .lbl{margin:4px 0 3px}
#edit-float h3{margin:2px 0 5px}
.duo-sliders{display:flex;gap:14px}
.duo-sliders>div{flex:1;min-width:0}
.fx-chips{gap:5px}
.fx-chips button{padding:4px 2px 3px}
.fxA{font-size:15px}
.fx-chips i{font-size:8px}
#effect-sec .hint{display:none}
#edit-float .font-preview.veld{min-height:38px;padding:7px 12px}
#edit-float .field{min-height:36px}
#edit-float .swatches{margin-bottom:4px}

/* v174: alles op één stramien — mm-rij vult de breedte, chips één gelijke rij, afstanden 50/50 */
#edit-float .mm-row{display:flex;align-items:center;gap:8px}
#edit-float .mm-row .field.mm{flex:1;max-width:none}
#edit-float .fx-chips{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
#edit-float .fx-chips button{padding:5px 1px 4px;min-width:0}
#edit-float .fxA{font-size:14px}
#edit-float .fx-chips i{font-size:7.5px;letter-spacing:0}
.duo-sliders>div{flex:1 1 0;width:0}
.duo-sliders .lbl{display:flex;justify-content:space-between;align-items:center}

/* v175: gereedschapskolom op hetzelfde stramien — eerste tegel lijnt met de paneelinhoud */
.rail{padding-top:43px}
.rail{padding-top:59px}
.rail{padding-top:34px}   /* v176: proef Ryan — 25px omhoog t.o.v. de paneellijn */
.rail{padding-top:59px}   /* v177: terug naar uitlijning op de paneelinhoud (keuze Ryan) */
#size-cat{display:none}   /* v178: klein/middel/groot-aanduiding verwijderd (keuze Ryan) — de mm zeggen het al */


/* v179: chips groter in 2 rijen; doorzichtigheid + folie zij-aan-zij */
#edit-float .fx-chips{grid-template-columns:repeat(4,1fr);gap:6px}
#edit-float .fx-chips button{padding:8px 2px 6px}
#edit-float .fxA{font-size:18px}
#edit-float .fx-chips i{font-size:9px;letter-spacing:.02em}
.duo-secs{display:flex}
.duo-secs .panel-sec{flex:1;min-width:0}
.duo-secs .panel-sec+.panel-sec{border-left:1px solid rgba(0,0,0,.05)}


/* v180: secties weer gestapeld; micro-compactie financiert de grotere chips */
.duo-secs{display:block}
.duo-secs .panel-sec+.panel-sec{border-left:none}
#edit-float .ef-head{padding-top:10px;padding-bottom:10px}
#edit-float .panel-sec{padding-top:6px;padding-bottom:6px}
#edit-float .field{min-height:34px}
#edit-float .font-preview.veld{min-height:34px;padding:6px 12px}
#edit-float .style-row button{padding-top:7px;padding-bottom:7px}
#edit-float .fx-chips button{padding:6px 2px 5px}
#edit-float .swatches{margin-bottom:3px}
#edit-float .hexrow-left{margin-top:5px}
#edit-float .duo-sliders{margin-top:2px}

/* v181: nieuwe rail-iconen (Phosphor fill + maatwerk) — kleurneutraal tot de accentwissel */
.rail-ic{background:rgba(32,36,31,.06);color:#20241f}
.ric-svg{width:24px;height:24px}
.rail-item{color:#5a5f58}
.rail-item:hover .rail-ic{background:#20241f;color:#fff;transform:translateY(-1px)}
.rail-item:hover{color:#20241f}

/* v182: welkomst- en snelstart-iconen = zelfde set als de rail */
.es-svg{width:15px;height:15px;vertical-align:-2px}

/* v130 — welkomstmodal tekstkleuren (Ryan 24-07): eyebrow terug naar de vorige donkere kleur, notitie leesbaar in inkt */
.ai-eyebrow{color:#0b5f59}
.ai-own{color:#1b1b18}

/* v131 — bewerkingsbalk 10px hoger (Ryan 24-07): balk staat in flow (r644), dus via marge; onderkant compenseert zodat het canvas blijft staan */
.stage-wrap > .ctx-toolbar{margin-inline:auto}   /* FIX (03-08): de verticale marge (was -8px/4px) hoorde bij de nu verwijderde position:static-aanpak — bij position:absolute (zie hierboven) regelt de basis top:-9px de verticale plek al */

/* v133 — vinyl = K/zwart (Ryan 25-07): technieken vormen samen CMYK (C=DTF, M=borduren, Y=rhinestones, K=vinyl); in dark theme licht, anders valt de balk weg */

/* FIX vervolg (28-07): .rail{padding-top:59px} hierboven (v177) is een ONGESCoopte desktop-
   uitlijnwaarde (eerste icoontegel lijnt met de paneelinhoud in de 3-koloms-layout) die zonder
   media-guard ook op mobiel gold. Nu .rail hierboven een vaste, compacte balk is geworden heeft die
   uitlijning geen functie meer op mobiel — hier teruggezet naar de balk-eigen 6px (padding-shorthand
   verderop in dit bestand), wint van v177 door latere plek in de cascade. Desktop blijft op 59px. */
@media(max-width:1100px){
  .rail{padding-top:6px}
}

html[data-theme=dark] .tech-tile[data-tech=vinyl]{--tc:#e8e8e3}