:root{
  --navy:#071f35;--navy2:#0d2b46;--orange:#f28b19;--teal:#2ea09b;--teal-dark:#176d69;
  --bg:#eef2f5;--card:#ffffff;--line:#d9e0e5;--muted:#66737e;--danger:#bb3a3a;
  --shadow:0 5px 22px rgba(13,31,48,.09);
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:#1f2933;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;overflow:hidden}
button,input,textarea{font:inherit}button{cursor:pointer}.app{height:100vh;display:grid;grid-template-rows:78px 54px minmax(0,1fr)}
.brandbar{background:linear-gradient(100deg,var(--navy) 0%,#09253f 68%,#0c3152 100%);display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:2px solid rgba(242,139,25,.75)}
.brandbar img{height:66px;width:auto;display:block}.brandMeta{color:#c9d5df;text-align:right;font-size:12px;line-height:1.35}.brandMeta b{color:#fff;font-size:14px}
.slotbar{display:flex;align-items:center;gap:8px;padding:7px 14px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 8px rgba(15,31,45,.04);min-width:0}
.slotLabel{font-size:11px;color:var(--muted);white-space:nowrap}.plateTabs{display:flex;gap:7px;min-width:0}.slot{position:relative;min-width:110px;height:38px;padding:0 13px;border:1px solid #cbd4db;border-radius:8px;background:#f8fafb;color:#31404b;font-weight:750;white-space:nowrap}.slot:hover{background:#f1f5f7;border-color:#9eabb5}.slot.active{color:#fff;background:var(--navy2);border-color:var(--navy2);box-shadow:inset 0 -3px 0 var(--orange)}.slot.has-data::after{content:"";position:absolute;right:7px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--teal)}.slot.active.has-data::after{background:var(--orange)}.addSlot{min-width:105px;background:#fff7ee;border-color:#f0c998;color:#98540b}.slotHint{font-size:10px;color:#84909a}.spacer{flex:1}.autosave{font-size:11px;color:#167044;font-weight:800;white-space:nowrap}.iconBtn{width:38px;height:38px;padding:0;border:1px solid #cbd4db;border-radius:8px;background:#fff;display:grid;place-items:center;color:var(--navy2)}.iconBtn:hover{background:#f2f6f8;border-color:#9eabb5}.iconBtn svg{width:19px;height:19px;display:block}
.workspace{min-height:0;display:grid;grid-template-columns:310px minmax(560px,1fr) 355px;gap:12px;padding:12px}.card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);min-height:0;overflow:hidden}.catalogCard,.sideCard{display:flex;flex-direction:column}.cardHeader{padding:12px 12px 8px;border-bottom:1px solid #e3e8eb;background:#fbfcfd}.sectionTitle{font-size:14px;font-weight:850;color:#25333d;display:flex;align-items:center;justify-content:space-between;gap:8px}.smallTitle{font-size:12px;margin-bottom:7px}.miniHelp{margin-top:6px;color:#77848d;font-size:10px;line-height:1.4}.catalogControls{padding:10px 10px 7px}.search{width:100%;padding:8px 9px;border:1px solid #bac5cd;border-radius:7px;background:#fff;color:#23313b}.categoryTabs{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.categoryTab{border:1px solid #cbd4db;border-radius:999px;background:#f8fafb;padding:5px 8px;font-size:10px;font-weight:750;color:#52616b}.categoryTab.active{background:#e6f2f1;border-color:#a9d0cd;color:var(--teal-dark)}
.templateList{flex:1;min-height:0;overflow:auto;padding:2px 10px 8px;display:flex;flex-direction:column;gap:6px}.templateRow{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;border:1px solid #dfe5e9;border-radius:9px;padding:7px;background:#fff;transition:.12s}.templateRow:hover{border-color:#aebac3;background:#fbfcfd}.previewPlaceholder{width:30px;height:30px;border:1px solid #cbd4db;border-radius:6px;background:linear-gradient(145deg,#f8fafb,#e8edf0);display:grid;place-items:center;color:#4b5963;font-size:17px;overflow:hidden}.templateRow.selected{border-color:#9fcfcb;background:#f2faf9}.templateRow.selected .previewPlaceholder{box-shadow:inset 0 -3px 0 var(--teal)}.templateName{font-size:11px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qty{display:flex;align-items:center;gap:3px}.qty button{width:25px;height:25px;padding:0;border:1px solid #c4cdd4;border-radius:7px;background:#fff;color:#34434e;font-weight:900}.qty button:hover{background:#f0f4f6}.qty span{min-width:20px;text-align:center;font-size:11px;font-weight:850}.catalogFooter{padding:9px 10px;border-top:1px solid #e3e8eb;display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#fbfcfd}
.canvasCard{display:flex;flex-direction:column}.canvasToolbar{min-height:53px;padding:8px 12px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);background:#fbfcfd;font-size:12px}.toolbarNote{font-size:11px;color:#71808b;margin-left:7px}.emptyBadge{margin-left:auto;padding:6px 10px;border-radius:999px;background:#f1f4f6;color:#6a7780;font-size:11px;font-weight:700}.emptyBadge.slotActive{background:#e6f2f1;color:var(--teal-dark)}.plateWrap{min-height:0;flex:1;overflow:auto;padding:20px 20px 38px;display:flex;align-items:flex-start;justify-content:center;background:linear-gradient(180deg,#f8fafb,#f2f5f7)}.plateStage{position:relative;width:min(68vh,690px);aspect-ratio:1/1;flex:0 0 auto}.grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);gap:7px;padding:13px;border:3px solid #263238;background:linear-gradient(to right,rgba(12,45,62,.055) 1px,transparent 1px),linear-gradient(to bottom,rgba(12,45,62,.055) 1px,transparent 1px),#edf7f7;background-size:calc(100%/6) calc(100%/6);box-shadow:inset 0 0 0 1px #fff}.cell{position:relative;border:2px solid var(--teal-dark);border-radius:5px;background:rgba(46,160,155,.52);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4px;overflow:hidden}.cell.empty{border:1px dashed #aebbc4;background:rgba(255,255,255,.6)}.cell .icon{font-size:clamp(17px,2.2vw,28px);line-height:1}.cellName{font-size:9px;font-weight:800;margin-top:4px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pos{position:absolute;right:3px;bottom:2px;font-size:8px;color:#61717b}.tileRemove{position:absolute;top:4px;right:4px;width:20px;height:20px;padding:0;border:1px solid rgba(119,57,57,.28);border-radius:50%;background:rgba(255,255,255,.88);color:#9d2d2d;font-size:15px;font-weight:900;line-height:17px;display:grid;place-items:center;z-index:4;box-shadow:0 1px 3px rgba(0,0,0,.08)}.tileRemove:hover{background:#fff0f0;border-color:#d79a9a;color:#8b1e1e;transform:scale(1.05)}.plateLabel{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);font-size:10px;font-weight:850;color:#4a5963;white-space:nowrap;letter-spacing:.04em}.canvasFooter{min-height:36px;padding:8px 12px;display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);color:#71808b;font-size:10px;background:#fbfcfd}
.sideCard{min-height:0}.sideScroll{min-height:0;overflow:auto;padding:11px}.modePill{font-size:9px;font-weight:800;background:#eef2f5;color:#66737e;padding:4px 7px;border-radius:999px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}.stat{background:#f6f8fa;border:1px solid #e2e7ea;border-radius:8px;padding:8px}.stat span{display:block;font-size:9px;color:#77848d;text-transform:uppercase;letter-spacing:.04em}.stat b{display:block;margin-top:3px;font-size:14px;color:#25343e}.totalStat{grid-column:1/-1;background:#f9fbfc}.totalStat b{font-size:22px;color:var(--navy2)}.shipping{margin-top:8px;border-radius:8px;padding:9px;border:1px solid #e2e7ea;background:#f6f8fa;font-size:10px;font-weight:800;color:#56656f;line-height:1.35}.shipping.free{background:#eef9f3;border-color:#c7e7d4;color:#167044}.shipping.tease{background:#eef5fb;border-color:#c9dcec;color:#285f8c}.optimization{margin-top:7px;border:1px dashed #cfd9e0;border-radius:8px;padding:8px;background:#fbfcfd;color:#71808b;font-size:10px;line-height:1.35}.optimization.active{background:#fff7ee;border-color:#f0c998;color:#98540b}.sectionDivider{border-top:1px solid #e3e8eb;margin:11px 0 9px}.editor{border:1px solid #dfe5e9;border-radius:10px;padding:9px;background:#fbfcfd}.compactEditor{display:grid;gap:8px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:7px}.field{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;color:#475761}.field input,.field textarea{width:100%;padding:7px 8px;border:1px solid #bac5cd;border-radius:7px;background:#fff;color:#23313b;resize:vertical}.field.wide{grid-column:1/-1}.field small{color:#84909a;font-weight:600}.btn{border:1px solid #bcc7cf;border-radius:8px;background:#fff;padding:8px 9px;font-weight:800;font-size:11px;color:#34434e}.btn:hover{background:#f0f4f6}.btn.primary{background:var(--navy2);border-color:var(--navy2);color:#fff}.btn.primary:hover{background:#123a5d}.btn.orange{background:#fff7ee;border-color:#f0c998;color:#98540b}.btn.orange:hover{background:#ffeed9}.btn.danger{color:#a72d2d;border-color:#e0b2b2}.btn.compact{padding:6px 8px;font-size:10px}.wideBtn{width:100%;margin-top:8px}.orderBtn{padding:10px}.hiddenFile{display:none}.fileBtn{display:inline-flex;align-items:center;justify-content:center}.footerTip{font-size:10px;color:#7c8992;margin-top:8px;line-height:1.35}
dialog{border:none;border-radius:12px;box-shadow:0 18px 60px rgba(0,0,0,.24);max-width:440px;color:#25333d}dialog::backdrop{background:rgba(7,31,53,.38)}.dialogCard{padding:7px}.dialogCard h3{margin-top:0}.dialogActions{display:flex;justify-content:flex-end;gap:7px;margin-top:15px}.toast{position:fixed;right:18px;bottom:18px;background:#162b3c;color:#fff;padding:10px 13px;border-radius:8px;box-shadow:0 7px 25px rgba(0,0,0,.22);font-size:12px;z-index:200;opacity:0;transform:translateY(10px);pointer-events:none;transition:.18s ease}.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1250px){.workspace{grid-template-columns:285px minmax(500px,1fr) 330px}.slotHint{display:none}}
@media(max-width:1000px){body{overflow:auto}.app{height:auto;min-height:100vh;grid-template-rows:72px auto auto}.brandMeta{display:none}.slotbar{flex-wrap:wrap}.workspace{grid-template-columns:1fr}.catalogCard,.sideCard{overflow:visible}.templateList{max-height:390px}.plateWrap{min-height:600px}.plateStage{width:min(88vw,680px)}.canvasFooter{flex-direction:column;gap:2px}.autosave{display:none}}


/* V4 — echte preview-afbeeldingen */
.realPreviewHint{display:inline-block;margin-top:4px;color:#98540b;font-weight:700}
.previewPlaceholder.hasImage{background:#fff;padding:1px}
.previewPlaceholder img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;border-radius:4px}
.fallbackIcon{line-height:1}
.cellPreview{width:100%;min-height:0;flex:1;display:flex;align-items:center;justify-content:center;padding:2px 2px 0;overflow:hidden}
.cellPreview img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;border-radius:3px}
.cell:has(.cellPreview){padding:3px;background:#fff;border-color:var(--teal-dark)}
.cell:has(.cellPreview) .cellName{margin-top:2px}

/* V5 — custom uploads / drag & drop */
.hidden{display:none!important}
.customUploadPanel{padding:0 10px 8px}
.customDropZone{
  width:100%;min-height:118px;border:2px dashed #aebbc4;border-radius:10px;background:#f8fafb;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:#41515c;text-align:center;padding:12px;transition:.15s ease;
}
.customDropZone:hover,.customDropZone.dragActive{border-color:var(--orange);background:#fff8ef;color:#6d430e}
.customDropZone .uploadIcon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--navy2);color:#fff;font-size:20px;font-weight:800;margin-bottom:2px}
.customDropZone strong{font-size:12px}
.customDropZone span:not(.uploadIcon){font-size:10px;color:#6f7c85}
.customDropZone small{font-size:9px;color:#88939b;margin-top:4px}
.uploadAdvice{margin-top:6px;font-size:9px;line-height:1.35;color:#78858e}
.customEmpty{margin:5px 0;border:1px dashed #cfd8df;border-radius:9px;background:#fbfcfd;padding:11px;display:flex;flex-direction:column;gap:4px;color:#68757f;font-size:10px;line-height:1.35}
.customEmpty strong{font-size:11px;color:#3d4b55}
.plateWrap{position:relative}
.plateDropOverlay{position:absolute;inset:0;z-index:80;display:none;align-items:center;justify-content:center;background:rgba(7,31,53,.72);backdrop-filter:blur(2px);pointer-events:none;padding:22px}
.plateDropOverlay.show{display:flex}
.plateDropOverlayInner{width:min(520px,90%);min-height:150px;border:2px dashed rgba(255,255,255,.8);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;gap:8px;padding:20px}
.plateDropOverlayInner strong{font-size:18px}
.plateDropOverlayInner span{font-size:11px;color:#d8e2ea}
.wideDialog{max-width:min(900px,94vw);width:900px}
.customDialogCard{padding:5px 6px 7px}
.customDialogHead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-bottom:1px solid #e2e7ea;padding-bottom:10px;margin-bottom:12px}
.customDialogHead h3{margin:0 0 4px;font-size:18px}
.customDialogHead p{margin:0;color:#6f7d86;font-size:11px;line-height:1.4;max-width:700px}
.betaPill{display:inline-block;vertical-align:middle;padding:3px 6px;border-radius:999px;background:#fff1df;color:#98540b;font-size:9px;letter-spacing:.05em}
.dialogClose{border:0;background:#f0f3f5;color:#485762;width:30px;height:30px;border-radius:8px;font-size:20px;line-height:1;cursor:pointer}
.customPreviewGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.customPreviewCard{border:1px solid #dfe5e9;border-radius:10px;background:#fbfcfd;padding:8px}
.previewLabel{font-size:10px;font-weight:850;color:#52616b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.customPreviewBox{height:300px;border:1px solid #d3dbe1;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.customPreviewBox.checker{background-image:linear-gradient(45deg,#f2f4f6 25%,transparent 25%),linear-gradient(-45deg,#f2f4f6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f2f4f6 75%),linear-gradient(-45deg,transparent 75%,#f2f4f6 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}
.customPreviewBox img,.customPreviewBox canvas{max-width:100%;max-height:100%;object-fit:contain;display:block}
.customControls{margin-top:10px;border:1px solid #dfe5e9;border-radius:10px;background:#fbfcfd;padding:9px;display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:12px;align-items:center}
.thresholdControl{display:grid;grid-template-columns:auto minmax(150px,1fr) 38px;align-items:center;gap:9px;font-size:11px;font-weight:800;color:#4d5d67}
.thresholdControl input{width:100%}
.thresholdControl output{text-align:right;font-variant-numeric:tabular-nums;color:var(--navy2)}
.checkLine{display:flex;align-items:flex-start;gap:8px;font-size:11px;font-weight:700;color:#4d5d67;line-height:1.35}
.checkLine input{margin-top:1px;width:16px;height:16px;flex:0 0 auto}
.customPermission{margin-top:10px;border:1px solid #f0c998;border-radius:10px;background:#fff8ef;padding:10px}
.customPermission small{display:block;margin:5px 0 0 24px;color:#805b31;font-size:9px;line-height:1.4}
.customDialogActions{margin-top:12px}
@media(max-width:720px){
  .customPreviewGrid{grid-template-columns:1fr}.customPreviewBox{height:230px}.customControls{grid-template-columns:1fr}.wideDialog{width:96vw}
}


/* ===== V7: formaat + uitvoering ===== */
.sizeEditor{display:grid;gap:9px}
.sizeGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sizeBtn{
  min-height:38px;border:1px solid #cbd4db;border-radius:8px;background:#fff;
  color:#34434e;font-size:10px;font-weight:850;padding:7px 5px;line-height:1.2;
}
.sizeBtn:hover{background:#f0f4f6;border-color:#aebac3}
.sizeBtn.active{
  color:#fff;background:var(--navy2);border-color:var(--navy2);
  box-shadow:inset 0 -3px 0 var(--orange);
}
.customSizeBtn{grid-column:span 2}
.customSizePanel{
  border-top:1px dashed #d7dfe4;padding-top:9px;display:grid;gap:8px;
}
.customSizePanel.hidden{display:none}
.customSizeInputs{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.priceOnRequest{
  border:1px solid #f0c998;background:#fff7ee;color:#7d4a13;border-radius:8px;
  padding:8px;font-size:10px;line-height:1.4;
}
.priceOnRequest strong{display:block;color:#98540b;font-size:11px;margin-bottom:2px}
.sizeInfo{
  border-radius:8px;background:#f6f8fa;border:1px solid #e2e7ea;padding:8px;
  color:#63717b;font-size:10px;line-height:1.35;
}
.deliveryChoices{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.deliveryChoice{
  min-height:82px;text-align:left;border:1px solid #cbd4db;border-radius:9px;
  background:#fff;padding:9px;color:#34434e;
}
.deliveryChoice strong{display:block;font-size:11px;margin-bottom:4px}
.deliveryChoice span{display:block;font-size:9px;line-height:1.35;color:#71808b;font-weight:600}
.deliveryChoice:hover{background:#f5f8fa;border-color:#aebac3}
.deliveryChoice.active{
  background:#eef7f7;border-color:#84bebb;box-shadow:inset 0 -3px 0 var(--teal);
}
.deliveryChoice.active strong{color:var(--teal-dark)}
.grid.connectedMode{gap:3px}
.grid.connectedMode .cell:not(.empty){border-radius:3px}
.grid.connectedMode .cell:not(.empty)::before{
  content:"";position:absolute;inset:-4px;background:transparent;pointer-events:none;
}
.priceRequestText{font-size:18px!important;color:#98540b!important}
@media(max-width:1250px){
  .sizeGrid{grid-template-columns:repeat(2,1fr)}
  .customSizeBtn{grid-column:span 2}
  .deliveryChoices{grid-template-columns:1fr}
}


/* ===== V8: fysiek herkenbaar formaat op een vast 18×18-cm printgebied ===== */
.sizeBadge,.bedBadge{
  padding:5px 8px;border-radius:999px;font-size:10px;font-weight:850;white-space:nowrap;
}
.sizeBadge{
  background:#fff7ee;border:1px solid #f0c998;color:#98540b;
}
.bedBadge{
  background:#eef2f5;border:1px solid #d8e0e5;color:#5e6d77;
}

/*
  Belangrijk:
  Het centrale bed blijft altijd visueel 18×18 cm.
  De tegelvakken krijgen hun breedte/hoogte als percentage van die vaste maat.
  Daardoor is een 4×4-tegel zichtbaar groter dan een 3×3-tegel en blijft
  ongebruikte ruimte op het bed ook echt zichtbaar.
*/
.grid{
  gap:0 !important;
  justify-content:start;
  align-content:start;
  background:
    linear-gradient(to right,rgba(12,45,62,.075) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(12,45,62,.075) 1px,transparent 1px),
    #edf7f7 !important;
  background-size:calc(100% / 18) calc(100% / 18) !important;
}

/* De cellen zelf zijn de fysieke maat; we creëren geen kunstmatige grid-gap. */
.grid .cell{
  min-width:0;
  min-height:0;
  border-width:1px;
  border-radius:3px;
}

/* Bij losse tegels blijft de scheiding visueel zichtbaar zonder de fysieke slotmaat te veranderen. */
.grid:not(.connectedMode) .cell:not(.empty){
  box-shadow:inset 0 0 0 2px rgba(237,247,247,.9);
}

/* Complete printplaat: tegels ogen dichter aaneengesloten; daadwerkelijke verbindingsgeometrie komt later in productie. */
.grid.connectedMode{gap:0 !important}
.grid.connectedMode .cell:not(.empty){
  border-radius:1px;
  box-shadow:none;
}

.plateLabel{
  max-width:96%;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media(max-width:1250px){
  .bedBadge{display:none}
}


/* ===== V9: per tegel formaat + per printplaat uitvoering ===== */
.plateModeBadge{
  padding:5px 8px;border-radius:999px;font-size:10px;font-weight:850;white-space:nowrap;
  background:#eef7f7;border:1px solid #b8d9d6;color:var(--teal-dark);
}
.plateModeBadge.connected{background:#fff7ee;border-color:#f0c998;color:#98540b}
.linkBtn{border:0;background:transparent;color:#346b91;font-size:10px;font-weight:800;padding:2px 0;cursor:pointer}
.linkBtn:hover{text-decoration:underline}
.selectionStatus{padding:8px;border:1px solid #e1e7eb;background:#f7f9fa;border-radius:8px;font-size:10px;line-height:1.4;color:#5f6d77}
.selectionStatus.selected{background:#eef7f7;border-color:#b8d9d6;color:#225f5c}
.dialogNote{margin-top:9px;padding:8px;border-radius:8px;background:#f6f8fa;color:#61717b;font-size:10px;line-height:1.4}

/* Het printbed is een vaste 18×18-cm referentie. Tegels worden absoluut op schaal geplaatst. */
.grid{
  display:block !important;
  padding:0 !important;
  position:absolute;
  overflow:hidden;
  background:
    linear-gradient(to right,rgba(12,45,62,.075) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(12,45,62,.075) 1px,transparent 1px),
    #edf7f7 !important;
  background-size:calc(100% / 18) calc(100% / 18) !important;
}
.grid .cell{
  position:absolute !important;
  min-width:0;min-height:0;
  transition:left .16s ease,top .16s ease,width .16s ease,height .16s ease,outline .1s ease;
}
.grid .cell.selectedTile{outline:3px solid var(--navy);outline-offset:-3px;z-index:12}
.grid .cell .sizeTag{
  position:absolute;left:4px;bottom:3px;z-index:4;
  padding:2px 4px;border-radius:4px;background:rgba(7,31,53,.82);color:#fff;
  font-size:7px;font-weight:850;line-height:1;
}
.grid .cell .sourcePlateTag{display:none}
.grid .cell.tooSmall .cellName{display:none}
.grid .cell.tooSmall .sizeTag{font-size:6px;left:2px;bottom:2px;padding:1px 2px}
.grid .cell.tooSmall .tileRemove{width:16px;height:16px;top:2px;right:2px;font-size:12px;line-height:12px}
.grid.connectedMode .cell:not(.empty){
  border-color:#a96419;
  background:rgba(242,139,25,.11);
}
.grid.connectedMode .cell:has(.cellPreview){background:#fffaf5;border-color:#a96419}
.grid.connectedMode .cell.selectedTile{outline-color:#7b3f00}

@media(max-width:1250px){
  .plateModeBadge{display:none}
}


/* ===== V12: keuze voor versturen van de aanvraag ===== */
.requestChoiceBlock{display:grid;gap:8px;margin-top:10px}
.requestChoiceTitle{font-size:11px;font-weight:850;color:#394751;margin-bottom:1px}
.requestChoice{
  width:100%;text-align:left;border:1px solid #cbd4db;border-radius:9px;background:#fff;
  padding:10px 11px;color:#34434e;transition:.15s ease;
}
.requestChoice:hover{background:#f3f7f9;border-color:#9eabb5;transform:translateY(-1px)}
.requestChoice strong{display:block;font-size:11px;margin-bottom:4px;color:var(--navy2)}
.requestChoice span{display:block;font-size:10px;line-height:1.4;color:#6b7882;font-weight:600}
.requestChoice.emailChoice{box-shadow:inset 0 -3px 0 var(--orange)}
.requestChoice.downloadChoice{box-shadow:inset 0 -3px 0 var(--teal)}


/* ===== V13: fallback bij mailto ===== */
#mailFallbackDialog p{font-size:12px;line-height:1.5;color:#4c5a64}


/* ===== V16: uniforme stencilpresentatie =====
   Alle previews worden rechtstreeks uit de gekoppelde 3MF-geometrie gerenderd.
   Daardoor hebben ze dezelfde kleuren, schaal en uitsnede. */

.grid .cell:has(.cellPreview){
  padding:3px 3px 18px;
  background:#fff;
}

.grid .cell .cellPreview{
  position:absolute;
  left:3px;
  right:3px;
  top:3px;
  bottom:18px;
  width:auto;
  height:auto;
  padding:0;
  margin:0;
}

.grid .cell .cellPreview img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  border-radius:3px;
}

/* Naam van het sjabloon staat op ieder normaal tegelvak op exact dezelfde plek. */
.grid .cell .cellName,
.grid .cell.tooSmall .cellName{
  display:block;
  position:absolute;
  left:27px;
  right:20px;
  bottom:2px;
  z-index:5;
  height:13px;
  line-height:13px;
  margin:0;
  padding:0 2px;
  border-radius:2px;
  background:rgba(255,255,255,.94);
  color:#26343d;
  font-size:7px;
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
}

.grid .cell .sizeTag{
  z-index:6;
}

.grid .cell .pos{
  z-index:6;
}

/* Zijbalk: ook alle kleine previews op dezelfde neutrale achtergrond. */
.templateRow .previewPlaceholder img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#eef1f3;
}


/* ===== V17: formaatadvies per sjabloon ===== */
.grid .cell.sizeRiskWarn::after,
.grid .cell.sizeRiskHard::after{
  content:""; position:absolute; inset:0; z-index:7; pointer-events:none; border-radius:2px;
}
.grid .cell.sizeRiskWarn::after{
  background:rgba(205,68,42,.16);
  box-shadow:inset 0 0 0 2px rgba(180,62,38,.48);
}
.grid .cell.sizeRiskHard::after{
  background:rgba(183,32,32,.30);
  box-shadow:inset 0 0 0 2px rgba(150,24,24,.78);
}
.sizeRiskOverlay{
  position:absolute; z-index:8; left:5px; right:5px; top:50%; transform:translateY(-50%);
  padding:5px; border-radius:5px; text-align:center; pointer-events:none; line-height:1.15;
  backdrop-filter:blur(1px); overflow:hidden; max-height:70%;
}
.sizeRiskOverlay strong{display:block;font-size:9px;font-weight:950;text-transform:uppercase}
.sizeRiskOverlay span{display:block;margin-top:2px;font-size:7px;font-weight:800}
.sizeRiskOverlay.warn{background:rgba(255,237,232,.90);color:#8f2e22;border:1px solid rgba(181,61,42,.55)}
.sizeRiskOverlay.hard{background:rgba(255,224,224,.93);color:#8d1717;border:1px solid rgba(151,25,25,.76)}
.grid .cell.sizeRiskWarn .cellName,
.grid .cell.sizeRiskHard .cellName,
.grid .cell.sizeRiskWarn .sizeTag,
.grid .cell.sizeRiskHard .sizeTag,
.grid .cell.sizeRiskWarn .pos,
.grid .cell.sizeRiskHard .pos,
.grid .cell.sizeRiskWarn .tileRemove,
.grid .cell.sizeRiskHard .tileRemove{z-index:10}
.sizeBtn.sizeOptionWarn{border-color:#d98f72;background:#fff4ef}
.sizeBtn.sizeOptionRecommended{border-color:#4b9d94;box-shadow:inset 0 0 0 1px #4b9d94}
.sizeBtn.sizeOptionRecommended::after{content:"advies";display:block;margin-top:2px;font-size:8px;line-height:1;color:#24746c;font-weight:850}
.sizeBtn.sizeOptionBlocked,.sizeBtn:disabled{opacity:.38;cursor:not-allowed;filter:grayscale(.7)}
.sizeInfo.riskWarn{background:#fff4ef;border-color:#e1a088;color:#86412d}
.sizeInfo.riskHard{background:#fff0f0;border-color:#d98585;color:#8d2525;font-weight:750}

/* V0.64: Between desktop and tablet the catalogue/editor must not push the entire page sideways. */
@media (min-width:1101px) and (max-width:1500px) {
  .workspace {grid-template-columns:minmax(215px,270px) minmax(0,1fr) minmax(255px,290px);min-width:0}
  .workspace > * {min-width:0}
  .plateStage {width:min(100%, 62vh, 580px)}
}
@media (max-width:1100px) {
  .app {height:auto!important;min-height:100vh;grid-template-rows:auto auto!important}
  .workspace {grid-template-columns:minmax(0,1fr);min-width:0}
  .workspace > * {min-width:0}
  .catalogCard,.sideCard {overflow:visible}
  .plateWrap {min-height:550px}
  .plateStage {width:min(85vw,590px)}
}

/* V0.66 - complete-sheet placement and upload separation */
.layoutModeControls{display:flex;gap:4px;border:1px solid #bccad4;border-radius:8px;padding:3px;background:#f7f9fa}
.layoutModeControls button{border:0;border-radius:6px;padding:6px 8px;cursor:pointer;background:transparent;color:#334855;font-size:10px;font-weight:800}
.layoutModeControls button.active{background:#123a5d;color:#fff}
.grid.connectedMode .cell{touch-action:none;cursor:grab;user-select:none}
.grid.connectedMode .cell.tileMoving{cursor:grabbing!important;z-index:20;transition:none!important;box-shadow:0 3px 12px rgba(0,0,0,.35)!important}
.grid .cell img,.templateRow img{user-select:none;-webkit-user-drag:none;pointer-events:none}
.customDropZone{min-height:64px}

/* V0.67: clearly display valid magnetic contacts while dragging a full sheet. */
.grid.connectedMode .cell.tileMoving{transition:none!important;z-index:25;opacity:.94;cursor:grabbing}
.grid.connectedMode .cell.tileMoving.tileSnapped{outline:3px solid #138658;outline-offset:-3px;box-shadow:0 0 0 2px rgba(19,134,88,.15)}