/* UnboundPrint editor — design language.
   Tokens: bg #fafafa, ink #272e34/#001326, accent #3665f3,
   8px radius, Inter/Roboto, white rounded cards, light-grey tiles. */
:root {
  --bg: #fafafa; --panel: #fff; --ink: #272e34; --ink2: #001326; --muted: #6b7280;
  --line: #e6e8eb; --tile: #ededf0; --tile-hover: #e4e4e8;
  --accent: #3665f3; --accent-ink: #fff; --green: #18a558; --danger: #e23b3b;
  --r: 8px; --r-card: 16px; --shadow: 0 6px 24px rgba(16,24,40,.12);
}
/* Curated webfonts come from /fonts/fonts.css (generated from the font manifest,
   src/config/fonts.js) — single source of truth, same files the server renders. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink2);
  font: 15px/1.45 Inter, Roboto, -apple-system, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; }
/* Editor root: everything lives inside this so the editor fills its CONTAINER (not the
   viewport) and all overlays (toolbar, popovers, modal, toast) position relative to it.
   For the standalone page the container is html/body (100%); when embedded it is the host's
   mount element. */
.ub-root { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
button { font: inherit; cursor: pointer; border: 1px solid var(--line); background: #fff; border-radius: var(--r); color: var(--ink2); }
h1, h3 { margin: 0; }
.muted { color: var(--muted); font-weight: 400; }
/* Remix Icon glyphs, sized per context. */
[class^="ri-"], [class*=" ri-"] { line-height: 1; display: inline-flex; }
.rail-btn i { font-size: 25px; }
.link-back i { font-size: 20px; }
.btn-group i { font-size: 19px; }
.search i { font-size: 18px; color: var(--muted); }
.tile i { font-size: 34px; }
.obj-toolbar button i { font-size: 19px; }

.app { display: grid; grid-template-columns: 92px auto 1fr 340px; grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "rail panel stage product"; height: 100%; gap: 0; }

/* ---------- left rail ---------- */
/* rail + panel are one combined sidebar (same background, no divider between them) */
.rail { grid-area: rail; background: var(--panel); padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.app.panel-collapsed .rail { border-right: 1px solid var(--line); } /* panel folded → rail is the outer edge */
.rail-toggle { align-self: flex-end; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; color: var(--ink2); font-size: 18px; }
.rail-toggle:hover { background: #f5f6f8; }
.rail-bottom { margin-top: auto; }
.rail-card { background: transparent; border: 0; border-radius: var(--r-card);
  padding: 2px; display: flex; flex-direction: column; gap: 6px; box-shadow: none; }
.rail-btn { display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 1px solid transparent; background: transparent; color: var(--ink);
  border-radius: 10px; padding: 12px 4px; font-size: 11px; font-weight: 500; }
.rail-btn:hover { background: #f5f6f8; }
.rail-btn.active { background: #fff; border-color: var(--line); box-shadow: 0 1px 3px rgba(16,24,40,.08); }

/* ---------- tool panel ---------- */
.panel { grid-area: panel; width: 264px; background: var(--panel);
  border-right: 1px solid var(--line); padding: 18px 16px; overflow-y: auto; }
.panel[hidden] { display: none; }
.panel h4 { margin: 0 0 14px; font-size: 19px; font-weight: 700; color: var(--ink2); }
.search { display: flex; align-items: center; gap: 8px; background: var(--tile); border-radius: 10px;
  padding: 9px 12px; margin-bottom: 16px; color: var(--muted); }
.search input { border: 0; background: transparent; outline: none; width: 100%; font: inherit; color: var(--ink2); }
.cat { font-size: 14px; font-weight: 700; margin: 14px 0 8px; color: var(--ink2); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { aspect-ratio: 1; background: var(--tile); border: 0; border-radius: 10px; display: grid; place-items: center;
  font-size: 26px; color: var(--ink2); }
.tile:hover { background: var(--tile-hover); }
.tile svg { width: 46%; height: 46%; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.text-preset { text-align: left; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.text-preset:hover { background: #f5f6f8; }
.text-preset.h1 { font-size: 22px; font-weight: 800; }
.text-preset.h2 { font-size: 17px; font-weight: 700; }
.text-preset.h3 { font-size: 14px; font-weight: 500; }
.panel .upload-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px; border-radius: 10px; background: var(--accent); color: #fff; border: 0; font-weight: 600; }
.panel .upload-btn:hover { filter: brightness(1.05); }
.panel .upload-btn i { font-size: 18px; }
.panel .hint { font-size: 12px; color: var(--muted); margin-top: 10px; }
/* Uploaded artwork library */
.lib-item { display: flex; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 10px; margin-top: 8px; background: #fff; cursor: grab; }
.lib-item:hover { background: #f5f6f8; }
.lib-item:active { cursor: grabbing; }
.lib-thumb { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 8px; background: #f0f0f3 center/contain no-repeat; box-shadow: inset 0 0 0 1px var(--line); }
.lib-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lib-name { font-size: 12px; font-weight: 600; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-dim { font-size: 11px; color: var(--muted); }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; }
.badge i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.badge.good { color: #18794e; } .badge.good i { background: #1aa86b; }
.badge.ok { color: #9a6700; } .badge.ok i { background: #e3a008; }
.badge.low { color: #b42318; } .badge.low i { background: #e2483b; }

/* ---------- stage ---------- */
.stage-wrap { grid-area: stage; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; }
.link-back { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; font-size: 16px; font-weight: 500; color: var(--ink2); padding: 0; }
.design-bar { display: flex; align-items: center; gap: 8px; margin: 0 auto 0 16px; }
.design-bar .design-name { padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  color: var(--ink2); width: 160px; font: inherit; }
.design-bar .design-name:focus { outline: none; border-color: var(--accent); }
.design-bar .design-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 8px;
  background: var(--accent); color: #fff; border: 0; font-weight: 600; }
.design-bar .design-btn i { font-size: 17px; }
.design-bar .design-btn:hover { filter: brightness(1.05); }
.design-bar .design-btn:disabled { opacity: .6; cursor: default; }
.design-bar .design-load { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  color: var(--ink2); font: inherit; max-width: 180px; }
.topbar-tools { display: flex; gap: 10px; }
.btn-group { display: flex; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.btn-group button { border: 0; border-radius: 0; background: transparent; padding: 9px 12px; display: grid; place-items: center; }
.btn-group button + button { border-left: 1px solid var(--line); }
.btn-group button:hover { background: #f5f6f8; }
.dl-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 10px;
  background: var(--accent); color: #fff; border: 0; font-weight: 600; }
.dl-btn i { font-size: 18px; }
.dl-btn:hover { filter: brightness(1.05); }
.dl-btn:disabled { opacity: .6; cursor: default; }
.stage-scroll { flex: 1; min-height: 0; display: grid; place-items: center; place-content: center; overflow: hidden; padding: 8px; }
.stage { position: relative; }
/* Background (mockup) and foreground (print outline/guides) layers each wrapped
   in ONE element, so the zoom transform scales them about a single origin
   (consistent across browsers; per-element origins broke alignment in Safari). */
.stage .layer { position: absolute; inset: 0; transform-origin: 0 0; }
.stage .bg-layers { z-index: 1; }
.stage .fg-layers { z-index: 3; pointer-events: none; }
/* Zoom-to-print toggle — round button in the top bar, left of undo/redo. */
.zoom-print { width: 39px; height: 39px; border-radius: 50%; background: #fff; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink2); }
.zoom-print:hover { background: #f5f6f8; }
.zoom-print i { font-size: 19px; }
/* Stage is sized to the mockup's exact aspect, so the image fills it edge-to-edge
   (object-fit: fill / mask-size 100%) — no letterbox, so print-area fractions map
   1:1 to the image in every browser (Safari included). */
/* garment + mockup are positioned by JS (left/top/width/height) as a sub-region
   of the (padded) canvas, so the canvas extends beyond the shirt and zoomed-out
   design isn't clipped at the shirt edge. */
.stage .garment { position: absolute; pointer-events: none;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center; }
.stage .mockup { position: absolute; object-fit: fill; pointer-events: none; user-select: none; }
.stage .mockup.shade { mix-blend-mode: multiply; }
.stage .mockup.light { mix-blend-mode: screen; opacity: .3; }
.stage canvas { position: relative; z-index: 2; }
.print-outline { position: absolute; z-index: 3; border: 1.5px dashed rgba(54,101,243,.85); pointer-events: none; border-radius: 3px; }
.print-outline span { position: absolute; top: -19px; left: 0; font-size: 10px; line-height: 1.5; white-space: nowrap; color: #fff; background: var(--accent); padding: 1px 5px; border-radius: 3px; z-index: 1; }

/* Overlay (out of layout flow) so toggling it never reflows/shifts the stage. */
.print-warning { position: absolute; left: 50%; bottom: 104px; transform: translateX(-50%); z-index: 6; pointer-events: none;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px; background: #fff7ed; color: #b45309; border: 1px solid #fed7aa;
  font-size: 13px; font-weight: 500; box-shadow: 0 4px 14px rgba(16,24,40,.10); }
.print-warning[hidden] { display: none; }
.print-warning i { font-size: 18px; color: #ea8a00; }
/* Snap guides drawn while dragging an object. */
.guides { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.guides .guide { position: absolute; }
.guides .guide.v { top: -2px; bottom: -2px; width: 0; border-left: 1px dashed #ff3b8d; }
.guides .guide.h { left: -2px; right: -2px; height: 0; border-top: 1px dashed #ff3b8d; }

/* ---------- side thumbnails ---------- */
.sides { display: flex; gap: 14px; justify-content: center; padding: 14px 12px 22px; }
.side-tab { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: transparent; padding: 0; }
.side-thumb { width: 62px; height: 62px; border-radius: 12px; border: 2px solid var(--line); background: #fff center/72% no-repeat; }
.side-tab.active .side-thumb { border-color: var(--accent); }
.side-tab .side-lbl { font-size: 14px; color: var(--ink2); }
.side-tab.active .side-lbl { font-weight: 700; }

/* ---------- right product panel ---------- */
.product { grid-area: product; background: var(--bg); border-left: 1px solid var(--line); padding: 22px 22px 16px; overflow-y: auto; }
.prod-title { font-size: 20px; font-weight: 800; color: var(--ink2); line-height: 1.25; }
.prod-sub { margin: 6px 0 20px; color: var(--muted); font-size: 14px; }
.prod-sub strong { color: var(--ink2); }
.product h3 { font-size: 15px; font-weight: 700; margin: 20px 0 10px; color: var(--ink2); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { width: 56px; height: 56px; border-radius: 12px; border: 2px solid var(--line); background: #fff; cursor: pointer; position: relative; overflow: hidden; }
.swatch i { position: absolute; inset: 6px; border-radius: 7px; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.swatch.active { border-color: var(--accent); }
.swatch.more { display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--ink2); text-align: center; line-height: 1.15; }
.locations { display: flex; flex-wrap: wrap; gap: 8px; }
.loc { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 13px; font-weight: 500; color: var(--ink2); }
.loc:hover { background: #f5f6f8; }
.loc.active { border-color: var(--accent); color: var(--accent); background: #eef2fe; }
.sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.size { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 4px 5px; gap: 2px; }
.size .lbl { font-size: 12px; font-weight: 600; }
.size .qty { min-width: 12px; text-align: center; font-size: 12px; }
.size button { width: 19px; height: 19px; border: 0; border-radius: 5px; background: var(--tile); display: grid; place-items: center; font-size: 14px; line-height: 1; color: var(--ink2); padding: 0; }
.size button:hover { background: var(--tile-hover); }
.size.has-qty { border-color: var(--accent); }
.price-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 22px; }
.muted-link { color: var(--muted); font-size: 13px; cursor: pointer; }
.totals { margin: 8px 0 16px; }
.total-row { display: flex; justify-content: space-between; align-items: baseline; }
.total-row.sub { color: var(--muted); }
.total-lbl { font-size: 20px; font-weight: 800; color: var(--ink2); }
.total-val b { font-size: 20px; }
.total-val { font-size: 13px; color: var(--muted); }
.total-val b, .total-row.sub #total-incl { color: var(--ink2); }
.cta { width: 100%; padding: 16px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font-size: 17px; font-weight: 600; margin-top: 4px; }
.cta:hover { filter: brightness(1.05); }

/* ---------- floating object toolbar ---------- */
.obj-toolbar { position: absolute; z-index: 5000; display: flex; align-items: center; gap: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 5px; box-shadow: var(--shadow); }
.obj-toolbar[hidden] { display: none; }
.obj-toolbar button { border: 0; background: transparent; border-radius: 7px; padding: 7px; display: grid; place-items: center; color: var(--ink2); }
.obj-toolbar button:hover { background: #f2f3f5; }
.obj-toolbar button:disabled { opacity: .3; cursor: default; }
.obj-toolbar button:disabled:hover { background: transparent; }
.obj-toolbar button.danger { color: var(--danger); }
.obj-toolbar .sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 2px; }
.obj-toolbar select, .obj-toolbar input[type=number] { border: 1px solid var(--line); border-radius: 7px; padding: 5px 6px; font: inherit; font-size: 13px; }
.obj-toolbar input[type=number] { width: 52px; }
.obj-toolbar input[type=color] { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 7px; background: #fff; padding: 2px; cursor: pointer; }
.obj-toolbar .tbtn.on { background: #e9eefe; color: var(--accent); }

/* ---------- vector colour panel ---------- */
.vec-colors { position: absolute; z-index: 5000; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow); min-width: 150px; }
.vec-colors[hidden] { display: none; }
.vec-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.vec-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.vec-eye { border: 0; background: transparent; padding: 4px; border-radius: 6px; color: var(--ink2); display: grid; place-items: center; }
.vec-eye:hover { background: #f2f3f5; }
/* Bulk-action bar for a marquee / Ctrl-click selection in the vector colour editor */
.iv-selbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; padding: 8px 10px; background: #eef2ff; border: 1px solid #d9e0ff; border-radius: 10px; }
.iv-selcount { font-weight: 700; font-size: 13px; color: #3b4a8a; margin-right: auto; }
.iv-selcolor { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink2); cursor: pointer; }
.iv-selbtn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: 13px; cursor: pointer; }
.iv-selbtn:hover { background: #f2f3f5; }
.iv-selbtn.ghost { border: 0; background: transparent; color: var(--ink2); }
.iv-selbtn i { font-size: 16px; }
/* Delete-file card at the bottom of the viewer's right panel */
.iv-delcard { margin-top: 6px; }
.iv-del-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 14px; border-radius: 10px; border: 1px solid #f1c6c6; background: #fff5f5; color: #c0392b; font-weight: 600; cursor: pointer; }
.iv-del-btn:hover { background: #ffecec; }
.iv-del-btn.danger { background: #c0392b; color: #fff; border-color: #c0392b; }
.iv-del-btn.danger:hover { filter: brightness(1.05); }
.iv-del-btn i { font-size: 18px; }
.iv-del-msg { font-size: 13px; color: var(--ink2); margin: 4px 0 10px; }
.iv-del-msg.warn { color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 10px; }
.iv-del-actions { display: flex; gap: 8px; align-items: center; }
.iv-del-actions .iv-del-btn { width: auto; flex: 1; }
.vec-colors i { font-size: 18px; }
.vec-colors input[type=color] { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 7px; padding: 2px; background: #fff; cursor: pointer; }

/* ---------- toast ---------- */
.toast { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(10px);
  background: var(--ink2); color: #fff; padding: 9px 16px; border-radius: 999px; font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 9999; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { background: var(--danger); }

/* ---------- image library: view button ---------- */
.lib-meta { flex: 1; }
.lib-view { flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--line); background: #fff;
  border-radius: 8px; display: grid; place-items: center; color: var(--ink2); cursor: pointer; }
.lib-view i { font-size: 18px; }
.lib-view:hover { background: #f0f3ff; border-color: var(--accent); color: var(--accent); }

/* ---------- image viewer (over the stage) ---------- */
.img-viewer { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.img-viewer[hidden] { display: none; }
/* When the viewer is open it REPLACES the edit area (these have a display value that
   would otherwise override the [hidden] attribute). */
.stage-scroll[hidden], .sides[hidden], .topbar[hidden] { display: none; }
.iv-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.iv-title { font-weight: 700; font-size: 15px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-close { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 8px;
  background: #fff; border: 1px solid var(--line); color: var(--ink2); font-weight: 600; cursor: pointer; }
.iv-close:hover { background: #f5f6f8; }
.iv-body { flex: 1; min-height: 0; display: flex; gap: 16px; padding: 16px; }
.iv-preview { flex: 1; min-width: 0; display: grid; place-items: center; border-radius: 12px; overflow: hidden;
  padding: 40px; /* always show ≥40px of the background colour around the image */
  background-color: #fff;
  background-image: linear-gradient(45deg, #eceef1 25%, transparent 25%), linear-gradient(-45deg, #eceef1 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eceef1 75%), linear-gradient(-45deg, transparent 75%, #eceef1 75%);
  background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; border: 1px solid var(--line); }
.iv-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.iv-info { flex: 0 0 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.iv-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.iv-card h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.iv-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; border-top: 1px solid #f1f2f4; }
.iv-row:first-of-type { border-top: 0; }
.iv-k { color: var(--muted); }
.iv-v { color: var(--ink2); text-align: right; }
.iv-v.strong { font-weight: 700; }
.iv-quality .iv-q-head { display: flex; align-items: center; gap: 8px; font-size: 16px; margin-bottom: 8px; }
.iv-quality .iv-q-head i { font-size: 20px; }
.iv-quality .iv-q-explain, .iv-quality .iv-q-note { font-size: 13px; color: var(--muted); margin: 0 0 10px; line-height: 1.45; }
.iv-quality.iv-good { border-color: #cdeede; } .iv-quality.iv-good .iv-q-head { color: #18794e; }
.iv-quality.iv-ok { border-color: #f5e3b3; } .iv-quality.iv-ok .iv-q-head { color: #9a6700; }
.iv-quality.iv-low { border-color: #f6cccc; } .iv-quality.iv-low .iv-q-head { color: #b42318; }
@media (max-width: 920px) { .iv-body { flex-direction: column; } .iv-info { flex-basis: auto; } }
.iv-bg { margin-top: 14px; padding: 12px 14px; border-radius: 10px; }
.iv-bg-warn { background: #fff8e6; border: 1px solid #f5e3b3; }
.iv-bg-ok { background: #eefaf3; border: 1px solid #cdeede; }
.iv-bg-head { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 6px; }
.iv-bg-head i { font-size: 19px; }
.iv-bg-warn .iv-bg-head { color: #9a6700; }
.iv-bg-ok .iv-bg-head { color: #18794e; }
.iv-bg p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }

/* ---------- image viewer: interactive vector parts ---------- */
/* Same grid cell as #iv-img so place-items:center centres it too (without grid-area the
   Fabric wrapper auto-flows into a new cell → the vector preview shifts right). */
.iv-preview .canvas-container { max-width: 100%; max-height: 100%; grid-area: 1 / 1; }
.iv-bg-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 12px; margin-bottom: 12px; border-radius: 9px; border: 1px solid var(--line);
  background: #fff8e6; color: #9a6700; font-weight: 600; }
.iv-bg-btn:hover { filter: brightness(.99); border-color: #f5e3b3; }
.iv-bg-btn i { font-size: 18px; }
.iv-hint { font-size: 12px; color: var(--muted); margin: 0 0 10px; line-height: 1.4; }
.iv-card .vec-eye i { font-size: 18px; }
.iv-card input.vec-col { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 7px; padding: 2px; background: #fff; cursor: pointer; flex: 0 0 auto; }
.iv-tree { display: flex; flex-direction: column; gap: 2px; max-height: 48vh; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.iv-cnode { display: flex; flex-direction: column; }
.iv-crow { display: flex; align-items: center; gap: 8px; padding: 6px 7px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; }
.iv-crow:hover { background: #f5f6f8; }
.iv-crow.off { opacity: .55; }
.iv-caret { border: 0; background: transparent; padding: 0; width: 20px; height: 20px; display: grid; place-items: center; color: var(--muted); flex: 0 0 auto; }
.iv-caret i { font-size: 18px; }
.iv-children { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 4px 16px; }
.iv-children[hidden] { display: none; }
.iv-part { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; }
.iv-part:hover { background: #f5f6f8; }
.iv-part.active { background: #eef3ff; border-color: #cdd9fb; }
.iv-part.off { opacity: .55; }
.iv-pleft { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.iv-pthumb { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line);
  background-repeat: no-repeat; background-position: center; background-size: contain;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #eceef1 25%, transparent 25%), linear-gradient(-45deg, #eceef1 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eceef1 75%), linear-gradient(-45deg, transparent 75%, #eceef1 75%); }
.iv-cdot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.iv-cb { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; margin: 0; }
.iv-plabel { flex: 1; font-size: 13px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- printfile download modal ---------- */
.modal-overlay { position: absolute; inset: 0; z-index: 6000; background: rgba(16,24,40,.45);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay[hidden] { display: none; }
.modal { width: 440px; max-width: 100%; max-height: 88vh; overflow-y: auto; background: #fff;
  border-radius: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 8px; }
.modal-head h3 { margin: 0; font-size: 18px; font-weight: 800; }
.modal-x { border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; padding: 4px; border-radius: 8px; }
.modal-x i { font-size: 22px; } .modal-x:hover { background: #f2f3f5; }
.modal-body { padding: 6px 20px 8px; }
.modal-body section { margin: 14px 0; }
.modal-body h5 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pf-list { display: flex; flex-direction: column; gap: 4px; }
.pf-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ink2); cursor: pointer; }
.pf-row:hover { background: #f7f8fa; }
.pf-row input { width: 17px; height: 17px; accent-color: var(--accent); flex: 0 0 auto; }
.pf-row span { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--muted); }
.pf-row.empty { opacity: .5; cursor: default; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px 18px; }
.btn-ghost { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 16px; font-weight: 600; color: var(--ink2); }
.btn-ghost:hover { background: #f5f6f8; }
.modal-foot .dl-btn:disabled { opacity: .6; cursor: default; }

/* Hex input (object toolbar + garment "eigen kleur") */
.hex-input { width: 96px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  font: 13px/1 ui-monospace, "SF Mono", Menlo, monospace; text-transform: uppercase; color: var(--ink2); background: #fff; }
.hex-input:focus { outline: none; border-color: var(--accent); }
.obj-toolbar .hex-input { width: 80px; padding: 7px 8px; }

/* Garment "eigen kleur": a custom-colour swatch identical to the palette ones —
   white box (56×56) with the colour as an inset inner square. */
.custom-color { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cc-swatch { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 12px; border: 2px solid var(--line);
  background: #fff; cursor: pointer; position: relative; }
.custom-color.active .cc-swatch { border-color: var(--accent); }
.cc-swatch input[type=color] { position: absolute; inset: 6px; width: auto; height: auto; padding: 0; border: 0; background: none; cursor: pointer; }
.cc-swatch input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.cc-swatch input[type=color]::-webkit-color-swatch { border: 0; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.cc-swatch input[type=color]::-moz-color-swatch { border: 0; border-radius: 7px; }
.cc-label { font-size: 13px; color: var(--muted); }

/* Selected-object size bar (cm), below the floating toolbar */
/* Size fields now live inside the object toolbar (one bar), not a floating box. */
.obj-controls { display: contents; }
.obj-size { display: inline-flex; align-items: center; gap: 8px; }
.obj-size[hidden] { display: none; }
.os-sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 4px 2px 2px; }
.os-field { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.os-field input { width: 58px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; text-align: right; font: inherit; }
.os-field input:focus { outline: none; border-color: var(--accent); }
.os-field span { color: var(--muted); font-weight: 400; }
.os-link { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line);
  border-radius: 8px; background: #eef3ff; color: var(--accent); }
.os-link i { font-size: 17px; }
.os-link.off { background: #fff; color: var(--muted); }

/* AXIS-ExtraBold — branding font for the drukproef (NOT in the editor font picker) */
@font-face { font-family: 'AXIS'; font-weight: 800; font-style: normal;
  src: url('/fonts/AXIS-ExtraBold.otf') format('opentype'); font-display: swap; }

/* Upscale (kwaliteit verbeteren) in de view-bestand-pagina */
.iv-upscale { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.iv-upscale-btn { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 10px 16px;
  border-radius: 10px; background: var(--accent); color: #fff; border: 0; font-weight: 600; cursor: pointer; }
.iv-upscale-btn:hover { filter: brightness(1.05); }
.iv-upscale-btn:disabled { opacity: .7; cursor: default; }
.iv-upscale-btn i { font-size: 18px; }
.iv-vec-auto { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 9px 14px;
  border-radius: 10px; background: #f2f0ff; color: #5b3fd6; border: 1px solid #d9d2fb; font-weight: 600; cursor: pointer; }
.iv-vec-auto:hover { background: #ebe7ff; }
.iv-vec-auto:disabled { opacity: .6; cursor: default; }
.iv-vec-auto i { font-size: 18px; }

/* Live DPI-pill op de maatbalk (alleen rasterafbeeldingen) */
.os-dpi { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.os-dpi[hidden] { display: none; }
.os-dpi.good { background: #e7f6ee; color: #18794e; }
.os-dpi.ok { background: #fdf3e2; color: #9a6700; }
.os-dpi.low { background: #fdecec; color: #b42318; }


/* Eyedropper (pipet) — colour-to-transparent with live magenta mask preview */
.pipet-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; font-size: 14px; }
.pipet-radio { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.pipet-lbl { color: var(--muted); min-width: 66px; }
.pipet-slider { flex: 1; min-width: 120px; }
.pipet-val { min-width: 26px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.pipet-actions { display: flex; gap: 10px; margin-top: 12px; }
.pipet-actions .iv-upscale-btn { margin-top: 0; }
.pipet-cancel { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-weight: 600; }
.pipet-cancel:hover { background: #f7f8fa; }
.iv-bg-btn.on { background: #e7f0ff; color: #1b4fd8; border-color: #bcd3ff; }
.iv-preview.pipet-arm, .iv-preview.pipet-arm * { cursor: url('/editor/pipet-cursor.png') 3 29, crosshair; }
#iv-pipet { max-width: 100%; max-height: 100%; object-fit: contain; }

/* View-window edit history: undo / redo / reset */
.iv-hist { display: flex; gap: 6px; margin-left: auto; }
.iv-hbtn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 17px; color: #333; }
.iv-hbtn:hover:not(:disabled) { background: #f5f6f8; }
.iv-hbtn:disabled { opacity: .35; cursor: default; }

/* "Toevoegen aan ontwerp" — place a library image straight from the view window */
.iv-add-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; border-radius: 10px; background: var(--accent); color: #fff; border: 0; font-weight: 700; font-size: 15px; cursor: pointer; }
.iv-add-btn:hover { filter: brightness(1.05); }
.iv-add-btn i { font-size: 20px; }

/* "Terug naar ontwerp" — same shape as the add button, secondary (outline) variant */
.iv-add-btn.secondary { background: #fff; color: var(--ink2); border: 1px solid var(--line); }
.iv-add-btn.secondary:hover { background: #f5f6f8; filter: none; }

/* Corner-radius control popover (rounded rectangle) */
.corner-pop { position: absolute; z-index: 60; width: 244px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); padding: 12px 14px; }
.corner-pop[hidden] { display: none; }
.cp-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-bottom: 10px; }
.cp-presets { display: flex; gap: 6px; margin-bottom: 12px; }
.cp-chip { flex: 1; padding: 7px 2px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-size: 12px; font-weight: 600; color: var(--ink2); cursor: pointer; }
.cp-chip:hover { background: #f5f6f8; }
.cp-chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.cp-slider-row { display: flex; align-items: center; gap: 10px; }
.cp-slider { flex: 1; accent-color: var(--accent); }
.cp-val { min-width: 40px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink2); }

/* Shape-settings popover: multiple labelled control groups */
.cp-group { margin-top: 12px; }
.cp-group:first-of-type { margin-top: 0; }
.cp-label { font-size: 12px; font-weight: 600; color: var(--ink2); margin-bottom: 7px; }

/* Object settings rendered in the sidebar panel (header with a close button) */
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel-head h4 { margin: 0; }
.panel-back { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; color: var(--muted); font-size: 18px; }
.panel-back:hover { background: #f5f6f8; }

/* Toolbar fill/stroke/width fields (icon + control) */
.obj-toolbar .tb-field { display: inline-flex; align-items: center; gap: 3px; }
.obj-toolbar .tb-field > i { font-size: 15px; color: var(--muted); }
.obj-toolbar .tb-unit { font-size: 11px; color: var(--muted); }

/* Personalisation block (right panel): per-ordered-unit text with a live item navigator */
.pz-section { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 16px; }
.pz-section[hidden] { display: none; }
.pz-section h3 { margin-bottom: 4px; }
.pz-hint { font-size: 12px; color: var(--muted); margin: 0 0 12px; }
.pz-nav { display: flex; align-items: center; gap: 8px; background: var(--tile); border-radius: 10px; padding: 6px; margin-bottom: 12px; }
.pz-navbtn { width: 34px; height: 34px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; font-size: 18px; color: var(--ink2); }
.pz-navbtn:hover:not(:disabled) { background: #f5f6f8; }
.pz-navbtn:disabled { opacity: .4; cursor: default; }
.pz-count { flex: 1; text-align: center; font-size: 14px; color: var(--ink2); }
.pz-field { margin-bottom: 10px; }
.pz-flabel { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.pz-input { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font: inherit; color: var(--ink2); background: #fff; }
.pz-input:focus { outline: none; border-color: var(--accent); }

/* Print modal: personalisation note */
.pf-note { margin: 10px 0 0; padding: 9px 11px; font-size: 12px; line-height: 1.4; color: var(--ink2);
  background: #eef3ff; border: 1px solid #d6e0ff; border-radius: 8px; }
.pf-note[hidden] { display: none; }

/* Layers panel: objects grouped by kind, top of the stack first */
.layers { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.layer-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; cursor: pointer; }
.layer-row:hover { background: #f7f8fa; }
.layer-row.active { border-color: var(--accent); background: #eef3ff; }
.layer-ic { display: inline-flex; font-size: 16px; color: var(--muted); flex: 0 0 auto; }
.layer-lbl { flex: 1; min-width: 0; font-size: 13px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layer-acts { display: flex; gap: 0; flex: 0 0 auto; opacity: .55; }
.layer-row:hover .layer-acts, .layer-row.active .layer-acts { opacity: 1; }
.layer-act { border: 0; background: transparent; color: var(--ink2); cursor: pointer; padding: 3px; border-radius: 6px;
  display: inline-flex; align-items: center; font-size: 15px; }
.layer-act:hover { background: #e6e9f0; }
.layer-act.danger:hover { background: #fdecec; color: var(--danger); }

/* Personalisation toggle on a layer row (always shown on text layers when allowed) */
.layer-pz { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 3px; border-radius: 6px;
  display: inline-flex; align-items: center; font-size: 15px; flex: 0 0 auto; }
.layer-pz:hover { background: #e6e9f0; color: var(--ink2); }
.layer-pz.on { color: var(--accent); background: #e9eefe; }
.layer-pz.locked { cursor: not-allowed; }

/* Home (layers) rail button: icon-only, same box height as the labelled options */
.rail-home { margin-bottom: 6px; min-height: 73px; justify-content: center; }

/* Vectorize tolerance sliders in the view window */
.iv-slider { margin: 10px 0; }
.iv-slider-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.iv-slider-lbl { font-size: 13px; font-weight: 600; color: var(--ink2); }
.iv-slider-val { font-size: 12px; font-weight: 700; color: var(--accent); }
.iv-range { width: 100%; accent-color: var(--accent); cursor: pointer; }
.iv-slider-hint { margin: 4px 0 0; font-size: 11px; line-height: 1.4; color: var(--muted); }

/* Vectorize before/after: original + vector overlap perfectly in the same grid cell */
.iv-preview img { grid-area: 1 / 1; }
#iv-vec[hidden] { display: none; }
/* Segmented Origineel/Vector toggle */
.iv-vec-toggle { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin: 2px 0 10px; }
.iv-vec-toggle button { flex: 1; border: 0; border-radius: 0; background: #fff; padding: 8px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.iv-vec-toggle button + button { border-left: 1px solid var(--line); }
.iv-vec-toggle button.on { background: var(--accent); color: #fff; }
.iv-vec-status { font-size: 12px; color: var(--muted); margin: 2px 0 8px; display: flex; align-items: center; gap: 6px; min-height: 16px; }
.iv-vec-status .spin { width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: ivspin .7s linear infinite; }
@keyframes ivspin { to { transform: rotate(360deg); } }

/* Embed action buttons (Annuleren / Ontwerp gebruiken) + incomplete-design modal */
.embed-actions { display: flex; gap: 8px; }
.embed-actions[hidden] { display: none; }  /* the hidden attribute must win over display:flex */
.embed-btn { padding: 9px 16px; border-radius: 10px; font-weight: 600; font-size: 14px; border: 1px solid var(--line); cursor: pointer; }
.embed-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.embed-btn.primary:hover { filter: brightness(1.06); }
.embed-btn.ghost { background: #fff; color: var(--ink2); }
.embed-btn.ghost:hover { background: #f5f6f8; }
.embed-modal-ov { position: absolute; inset: 0; z-index: 6500; background: rgba(16,24,40,.45); display: grid; place-items: center; }
.embed-modal { background: #fff; border-radius: 14px; padding: 22px 24px; max-width: 440px; box-shadow: var(--shadow); }
.embed-modal h3 { font-size: 17px; margin: 0 0 8px; }
.embed-modal p { color: var(--ink2); font-size: 14px; margin: 0 0 18px; line-height: 1.5; }
.embed-modal .em-acts { display: flex; gap: 10px; justify-content: flex-end; }