/* Stitchist — Digitizer editor.
   A full-bleed vector-digitizing surface that lives beside the Appliqué Wizard.
   Reuses the wizard's theme tokens and shared components (style.css: :root,
   .topnav) so it feels native: same backdrop, same panel washes, same ink,
   accent on active controls — in BOTH the light and dark themes. */

/* The Digitizer takes over the viewport; the wizard shell is hidden while active. */
#digitizer-root { display: none; }
.mode-digitizer .shell { display: none; }
.mode-digitizer #digitizer-root {
  display: flex; position: fixed; inset: 0; z-index: 30; flex-direction: column;
  background: var(--app-bg);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --------------------------------------------------- app bar: project tabs */
/* Row 0: brand · one tab per open document · Projects + account. */
.dz-tabbar {
  display: flex; align-items: center; gap: 10px; padding: 6px 14px 0;
  background: rgba(var(--track-rgb), 0.2); border-bottom: 1px solid var(--card-line);
  position: relative; z-index: 22;   /* above .dz-top so the account menu paints over it */
}
.dz-brand { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 13px; padding-bottom: 6px; white-space: nowrap; }
.dz-brand .mark {
  width: 22px; height: 22px; border-radius: 7px; background: var(--mark-bg);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.dz-brand .word b { font-weight: 800; }
.dz-tabs { display: flex; align-items: flex-end; gap: 4px; overflow-x: auto; min-width: 0; scrollbar-width: thin; }
.dz-tab {
  display: flex; align-items: center; gap: 7px; max-width: 200px; flex: none;
  padding: 7px 8px 7px 12px; border: 1px solid transparent; border-bottom: none;
  border-radius: 10px 10px 0 0; background: rgba(var(--ink-rgb), 0.07);
  color: rgba(var(--ink-rgb), 0.72); font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: var(--tr);
}
.dz-tab:hover { background: rgba(var(--ink-rgb), 0.13); color: var(--ink); }
.dz-tab.on { background: rgba(var(--ink-rgb), 0.17); color: var(--ink); border-color: var(--card-line); }
.dz-tab .nm { overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.dz-tab .x {
  display: flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 5px; font-size: 13px; line-height: 1; color: rgba(var(--ink-rgb), 0.55);
}
.dz-tab .x:hover { background: rgba(var(--ink-rgb), 0.25); color: var(--ink); }
.dz-tab-add {
  flex: none; width: 26px; height: 26px; margin-bottom: 4px; border-radius: 8px;
  border: 1px dashed rgba(var(--ink-rgb), 0.35); background: transparent;
  color: rgba(var(--ink-rgb), 0.75); font-size: 13px; cursor: pointer; transition: var(--tr);
}
.dz-tab-add:hover { background: rgba(var(--ink-rgb), 0.14); color: var(--ink); }
.dz-tabbar .dz-btn { height: 30px; }
.dz-account { position: relative; padding-bottom: 4px; }
.dz-caret { min-width: 20px; padding: 0 3px; }

/* ------------------------------------------------------------ top toolbar */
.dz-top {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px; flex-wrap: wrap;
  background: rgba(var(--ink-rgb), 0.08); border-bottom: 1px solid var(--card-line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  /* backdrop-filter makes this a stacking context, trapping the Import dropdown's
     z-index inside it; lift the whole toolbar above .dz-main so the dropdown paints
     over the canvas (otherwise the canvas eats the menu clicks).
     z-index 21 (not 20) keeps it ABOVE the second toolbar row below: the Wizards /
     Save dropdowns live here and open downward across .dz-toolbar, so an equal
     z-index would let that later-in-DOM row paint over — and swallow the clicks on —
     the dropdown's top item (the "Appliqué Wizard" row). Still below .dz-tabbar (22)
     so the account menu keeps painting over this row. */
  position: relative; z-index: 21;
}

/* Second header row: editing / view tools. Kept above .dz-main (z-index) so the
   Import dropdown, which now lives here, paints over the canvas rather than under it. */
.dz-toolbar {
  display: flex; align-items: center; gap: 8px; padding: 6px 14px; flex-wrap: wrap;
  background: rgba(var(--ink-rgb), 0.045); border-bottom: 1px solid var(--card-line);
  position: relative; z-index: 20;
}
.dz-toolbar .dz-label { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--ink-3); margin-right: 2px; }

.dz-group { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 11px; background: rgba(var(--track-rgb), 0.14); }
.dz-sep { width: 1px; height: 26px; background: rgba(var(--ink-rgb), 0.18); margin: 0 2px; }
.dz-spacer { flex: 1; }

/* Selection context strip (right of Import): object parameters + secondary actions. */
.dz-ctx { animation: menuIn var(--dur-2) var(--ease-out); transform-origin: top left; }
.dz-ctx .dz-btn { height: 28px; min-width: 28px; padding: 0 6px; }
.dz-ctx .dz-btn svg { width: 15px; height: 15px; }
.dz-ctx-div { width: 1px; height: 20px; background: rgba(var(--ink-rgb), 0.16); margin: 0 3px; }
.dz-cf { display: flex; align-items: center; gap: 4px; }
.dz-cf > span { font-size: 10.5px; font-weight: 700; color: var(--ink-3); }
.dz-toolbar .dz-cf .dz-input { width: 56px; height: 26px; padding: 2px 6px; font-size: 12px; }

.dz-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; min-width: 34px; padding: 0 9px; border-radius: 9px;
  background: transparent; border: none; color: rgba(var(--ink-rgb), 0.78);
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: var(--tr);
}
.dz-btn svg { width: 17px; height: 17px; display: block; }
.dz-btn:hover { background: rgba(var(--ink-rgb), 0.14); color: var(--ink); }
.dz-btn:active { transform: scale(.94); }   /* uniform press feedback (see --tr) */
.dz-btn.on { background: var(--btn-hi-bg); color: var(--btn-hi-ink); }
.dz-btn.busy { pointer-events: none; opacity: 0.7; }
.dz-btn.primary { background: var(--btn-hi-bg); color: var(--btn-hi-ink); font-weight: 700; padding: 0 14px; }
.dz-btn.primary:hover { background: var(--btn-hi-bg); transform: translateY(-1px); }
.dz-btn .kbd { font-size: 9.5px; opacity: 0.6; font-weight: 700; }

/* ------------------------------------------------------------- main area */
/* Ember-style three panes: tool rail | stage | properties+sequence docker. */
.dz-main { flex: 1; display: flex; min-height: 0; }

.dz-rail {
  width: 52px; flex: none; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 10px 5px; overflow-y: auto; background: rgba(var(--ink-rgb), 0.06);
  border-right: 1px solid var(--card-line);
}
.dz-rail .dz-btn { flex-direction: column; gap: 1px; width: 40px; min-width: 40px; height: 38px; padding: 0; }
.dz-rail .dz-btn .kbd { font-size: 8.5px; line-height: 1; }
.dz-rail-sep { width: 26px; height: 1px; background: rgba(var(--ink-rgb), 0.18); margin: 4px 0; flex: none; }

.dz-dock {
  width: 292px; flex: none; display: flex; flex-direction: column; gap: 12px;
  padding: 12px; overflow-y: auto; background: rgba(var(--ink-rgb), 0.06);
  border-left: 1px solid var(--card-line);
}
.dz-inspector { display: flex; flex-direction: column; min-height: 0; }

/* top-bar project fields + the Import dropdown. Scoped to .dz-top so they beat the
   generic `.dz-input { width: 100% }` (which otherwise stretches them to full rows). */
.dz-top .dz-name { flex: 0 1 240px; width: auto; min-width: 150px; height: 34px; padding: 0 10px; font-weight: 600; }
.dz-top .dz-hoopsel { flex: none; width: 152px; height: 34px; padding: 0 8px; }
/* flex (not block) so the caret button can never wrap onto a second line when the
   toolbar squeezes this flex item below its natural width */
.dz-import-wrap { position: relative; display: flex; align-items: center; }
.dz-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 218px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--menu-bg); border: 1px solid var(--card-line); border-radius: 12px;
  box-shadow: var(--shadow-menu);
  transform-origin: top left;
  animation: menuIn var(--dur-2) var(--ease-out);   /* replays each time display flips on */
}
.dz-menu.dz-menu-right { transform-origin: top right; }
.dz-menu.dz-menu-right { left: auto; right: 0; }
.dz-mi {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px;
  background: transparent; border: none; color: var(--ink); font-family: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; text-align: left; transition: var(--tr);
}
.dz-mi:hover { background: rgba(var(--ink-rgb), 0.14); }
.dz-mi svg { flex: none; }

.dz-panel { background: rgba(var(--ink-rgb), 0.07); border: 1px solid var(--inset-line); border-radius: 13px; padding: 12px; }
.dz-panel > h4 {
  margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; justify-content: space-between;
}
.dz-panel > h4 .pc { font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink-3); }

/* ------------------------------------------------------------- the stage */
.dz-stage { flex: 1; position: relative; min-width: 0; overflow: hidden; }
.dz-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.dz-canvas.tool-select { cursor: default; }
.dz-canvas.tool-pan { cursor: grab; }
.dz-canvas.tool-pan.panning { cursor: grabbing; }
.dz-canvas.tool-draw { cursor: crosshair; }
.dz-canvas.tool-measure { cursor: crosshair; }

/* "Appliqué bundle ready" pill — shown after the Appliqué Wizard hands its design
   back for export. Sits top-centre of the stage. */
.dz-ready {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 9px; padding: 7px 8px 7px 13px;
  border-radius: 12px; background: var(--pill-bg); border: 1px solid var(--accent);
  box-shadow: var(--shadow-pill); color: var(--ink); font-size: 12.5px; font-weight: 600;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: dropIn var(--dur-3) var(--ease-out);
}
.dz-ready svg { flex: none; }
.dz-ready .rgo {
  padding: 6px 12px; border-radius: 9px; border: none; background: var(--btn-hi-bg); color: var(--btn-hi-ink);
  font-family: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
}
.dz-ready .rgo:hover { transform: translateY(-1px); }
.dz-ready .rx {
  display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 7px; border: none; background: transparent; color: var(--ink-3); cursor: pointer;
}
.dz-ready .rx:hover { background: rgba(var(--ink-rgb), 0.14); color: var(--ink); }
.dz-btn.hot { box-shadow: 0 0 0 2px var(--accent); }

.dz-readout {
  position: absolute; left: 12px; bottom: 12px; z-index: 4; pointer-events: none;
  display: flex; gap: 8px; align-items: center;
  background: var(--pill-bg); border: 1px solid var(--card-line); border-radius: 10px;
  padding: 7px 11px; font-size: 12px; font-weight: 600; color: var(--ink);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.dz-readout .muted { color: var(--ink-3); font-weight: 600; }

/* zoom in/out cluster — bottom-left of the canvas, stacked above the readout pill */
.dz-zoomctl {
  position: absolute; left: 12px; bottom: 52px; z-index: 5;
  display: flex; flex-direction: column; gap: 4px; padding: 4px;
  background: var(--pill-bg); border: 1px solid var(--card-line); border-radius: 11px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.dz-zoomctl .dz-btn { width: 30px; min-width: 30px; height: 28px; padding: 0; font-size: 16px; font-weight: 700; line-height: 1; }

.dz-hint {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 4; pointer-events: none;
  background: var(--pill-bg); border: 1px solid var(--card-line); border-radius: 999px;
  padding: 7px 16px; font-size: 12.5px; font-weight: 600; color: var(--ink); max-width: 80%;
  text-align: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: top var(--dur-3) var(--ease-out);
}
/* when the "bundle ready" pill is up it owns the top-centre slot — the hint steps down */
.dz-stage.has-ready .dz-hint { top: 58px; }

/* contextual shape-action toolbar floating over the stage */
.dz-actions {
  position: absolute; z-index: 5; display: flex; gap: 4px; padding: 4px;
  background: var(--pill-bg); border: 1px solid var(--card-line); border-radius: 11px;
  box-shadow: var(--shadow-pill); backdrop-filter: blur(8px); transform: translate(-50%, 0);
  animation: dz-actions-in var(--dur-2) var(--ease-out);
}
@keyframes dz-actions-in { from { opacity: 0; transform: translate(-50%, 5px) scale(.97); } to { opacity: 1; transform: translate(-50%, 0); } }
.dz-actions button {
  width: 30px; height: 28px; border-radius: 7px; background: rgba(var(--ink-rgb), 0.12);
  border: none; color: var(--ink); font-size: 13px; cursor: pointer; transition: var(--tr);
  display: flex; align-items: center; justify-content: center;
}
.dz-actions button:hover { background: rgba(var(--ink-rgb), 0.26); }
.dz-actions button:active { transform: scale(.92); }
.dz-actions button.danger:hover { background: rgba(255, 120, 130, 0.55); }
.dz-actions button svg { width: 15px; height: 15px; }

/* ------------------------------------------------------- sequencer list */
.dz-seq { display: flex; flex-direction: column; gap: 6px; }
.dz-seq .empty { font-size: 12px; color: var(--ink-3); text-align: center; padding: 10px 0; line-height: 1.5; }
.dz-row {
  display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 10px;
  background: rgba(var(--ink-rgb), 0.07); border: 1px solid transparent; cursor: pointer; transition: var(--tr);
}
.dz-row:hover { background: rgba(var(--ink-rgb), 0.12); }
.dz-row.sel { border-color: var(--sel-ring); background: rgba(var(--ink-rgb), 0.16); }
.dz-row.hidden-shape { opacity: 0.45; }
.dz-row .sw { width: 15px; height: 15px; border-radius: 4px; flex: none; border: 1px solid rgba(var(--ink-rgb), 0.4); }
.dz-row .nm { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-row .ty { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
.dz-row .ico { width: 22px; height: 22px; border-radius: 6px; background: rgba(var(--ink-rgb), 0.1); border: none;
  color: var(--ink-2); cursor: pointer; flex: none; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.dz-row .ico:hover { background: rgba(var(--ink-rgb), 0.24); color: var(--ink); }
.dz-row .ico svg { width: 13px; height: 13px; }

/* color palette */
.dz-palette { display: flex; flex-wrap: wrap; gap: 7px; }
.dz-palette .pc {
  width: 26px; height: 26px; border-radius: 7px; border: 2px solid rgba(var(--ink-rgb), 0.35);
  cursor: pointer; padding: 0; position: relative; transition: var(--tr);
}
.dz-palette .pc:hover { transform: scale(1.12); }
.dz-palette .pc:active { transform: scale(.95); }
.dz-palette .pc.add { display: flex; align-items: center; justify-content: center; background: rgba(var(--ink-rgb), 0.1); color: var(--ink); font-size: 16px; }

/* project info rows */
.dz-info { display: flex; flex-direction: column; gap: 6px; }
.dz-info .ir { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.dz-info .ir .k { color: var(--ink-3); }
.dz-info .ir .v { font-weight: 700; }
.dz-info .ir .v.warn { color: var(--warn); }

/* inspector form */
.dz-empty-insp { font-size: 12.5px; color: var(--ink-3); text-align: center; padding: 26px 8px; line-height: 1.6; }
.dz-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.dz-field > .k { font-size: 11px; font-weight: 700; color: var(--ink-2); }
.dz-seg { display: flex; gap: 4px; background: rgba(var(--track-rgb), 0.16); border-radius: 9px; padding: 3px; }
.dz-seg button {
  flex: 1; padding: 7px 2px; border-radius: 7px; background: transparent; border: none;
  color: var(--ink-2); font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: var(--tr);
}
.dz-seg button.on { background: var(--btn-hi-bg); color: var(--btn-hi-ink); }
.dz-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.dz-pf { display: flex; flex-direction: column; gap: 4px; }
.dz-pf .k { font-size: 10.5px; font-weight: 600; color: var(--ink-3); }
.dz-pf.chk { flex-direction: row; align-items: center; gap: 7px; }
.dz-pf.chk input { width: auto; }
.dz-pf.full { grid-column: 1 / -1; }
.dz-input {
  font-family: inherit; font-size: 13px; color: var(--ink); width: 100%;
  background: var(--field); border: 1px solid var(--field-line); border-radius: 9px; padding: 8px 10px; outline: none;
}
.dz-input:focus { border-color: var(--field-focus); }
select.dz-input option { color: #1a1330; }
.dz-color { width: 100%; height: 34px; padding: 3px; border-radius: 9px; border: 1px solid var(--field-line);
  background: var(--field); cursor: pointer; }

/* ----------------------------------------------------------- stitch player */
.dz-player {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6;
  width: min(620px, calc(100% - 28px)); display: none; flex-direction: column; gap: 9px;
  background: var(--pill-bg); border: 1px solid var(--card-line); border-radius: 15px; padding: 13px 15px;
  box-shadow: var(--shadow-pill); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.dz-player.on { display: flex; animation: slideUpIn var(--dur-3) var(--ease-out); }
.dz-player .prow { display: flex; align-items: center; gap: 10px; padding-right: 26px; /* keep the pause chip clear of the absolute .pclose button */ }
.dz-player .ptitle { font-size: 12.5px; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-player .pcount { font-size: 11.5px; color: var(--ink-2); }
.dz-player .ppause { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 20px; }
.dz-player .ppause.on { background: rgba(255, 214, 107, 0.22); color: var(--warn); }
.dz-player .ppause.off { background: rgba(var(--ink-rgb), 0.14); color: var(--ink-2); }
.dz-player input[type="range"] { width: 100%; accent-color: var(--btn-hi-bg); }
.dz-player .ptransport { display: flex; align-items: center; gap: 8px; justify-content: center; }
.dz-player .ptransport button {
  height: 32px; min-width: 38px; border-radius: 8px; background: rgba(var(--ink-rgb), 0.16);
  border: none; color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dz-player .ptransport button:hover { background: rgba(var(--ink-rgb), 0.28); }
.dz-player .ptransport .pplay { background: var(--btn-hi-bg); color: var(--btn-hi-ink); font-weight: 700; min-width: 56px; }
.dz-player .pspeed { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-2); }
/* leave room for the shared select chevron (style.css positions it 13px from the
   right) — with the old 6px padding the "1×" ran underneath the arrow */
.dz-player .pspeed select { padding: 4px 26px 4px 9px; font-size: 11px; background-position: right 8px center; }
.dz-player .pclose {
  position: absolute; top: 9px; right: 11px; background: none; border: none;
  color: var(--ink-2); cursor: pointer; display: flex; padding: 2px;
}
.dz-player .pclose:hover { color: var(--ink); }

/* ------------------------------------------------------------- footer */
.dz-foot {
  padding: 7px 14px; font-size: 11px; color: var(--ink-3); text-align: center;
  background: rgba(var(--track-rgb), 0.14); border-top: 1px solid var(--card-line);
}
.dz-foot b { color: var(--ink-2); }

@media (max-width: 900px) {
  .dz-dock { width: 232px; }
  .dz-top .dz-name { flex-basis: 120px; min-width: 96px; }
  .dz-top .dz-hoopsel { width: 120px; }
}

/* ---------------------------------------------------- lettering font browser */
/* Two-pane dialog: a searchable list of every installed font (each row is the
   font's name rendered IN that font, lazy-loaded) beside the text options and a
   live preview of the typed text. */
.modal.dz-let-modal { max-width: 780px; width: 94vw; }
.dz-let-body { display: grid; grid-template-columns: 272px 1fr; gap: 16px; margin-top: 12px; }
@media (max-width: 640px) { .dz-let-body { grid-template-columns: 1fr; } }
.dz-let-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dz-let-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.dz-let-chips button {
  padding: 4px 10px; border-radius: 20px; border: 1px solid var(--field-line);
  background: rgba(var(--ink-rgb), 0.06); color: var(--ink-2); font-family: inherit;
  font-size: 11px; font-weight: 700; cursor: pointer; transition: var(--tr);
}
.dz-let-chips button:hover { color: var(--ink); background: rgba(var(--ink-rgb), 0.14); }
.dz-let-chips button.on { background: var(--btn-hi-bg); color: var(--btn-hi-ink); border-color: transparent; }
.dz-let-list {
  height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--inset-line); border-radius: 12px; padding: 5px;
  background: rgba(var(--track-rgb), 0.18);
}
.dz-let-sec {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); padding: 6px 8px 3px;
}
.dz-fontrow {
  display: flex; align-items: center; min-height: 30px; padding: 4px 8px; flex: none;
  border: 1px solid transparent; border-radius: 8px; background: transparent;
  cursor: pointer; transition: background .15s ease; content-visibility: auto;
  contain-intrinsic-size: auto 30px;
}
.dz-fontrow:hover { background: rgba(var(--ink-rgb), 0.1); }
.dz-fontrow.on { background: rgba(var(--ink-rgb), 0.16); border-color: var(--accent); }
.dz-fontrow img { max-width: 100%; height: 19px; width: auto; display: block; }
.dz-let-loading {
  display: flex; align-items: center; justify-content: center; gap: 9px; flex: 1;
  padding: 22px 10px; color: var(--ink-3); font-size: 12px; text-align: center; line-height: 1.5;
}
.dz-let-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dz-let-right textarea.dz-input { resize: vertical; min-height: 44px; font-size: 14px; }
.dz-let-preview {
  display: flex; align-items: center; justify-content: center; min-height: 64px;
  border: 1px solid var(--inset-line); border-radius: 12px; padding: 8px 10px;
  background: rgba(var(--track-rgb), 0.18); overflow: hidden;
}
.dz-let-preview img { max-width: 100%; max-height: 96px; display: block; }
.dz-let-preview .ph { color: var(--ink-3); font-size: 12px; }
.dz-let-fontname { font-size: 11px; color: var(--ink-3); text-align: center; min-height: 14px; }
.dz-let-editbtn { width: 100%; justify-content: center; background: rgba(var(--ink-rgb), 0.1); }

/* The /api/fonts preview strips are white-on-transparent PNGs (drawn for the
   dark theme). In the light theme flip them to ink with a filter — brightness(0)
   blackens every opaque pixel and the alpha channel keeps the glyph shape. */
:root:not([data-theme="dark"]) .dz-fontrow img,
:root:not([data-theme="dark"]) .dz-let-preview img { filter: brightness(0) opacity(0.82); }

/* "experimental" tag on options that are still being proven (lettering satin) */
.dz-exp {
  display: inline-block; margin-left: 5px; padding: 1px 4px; border-radius: 6px;
  font-size: 7.5px; font-weight: 800; letter-spacing: .05em; line-height: 1.3;
  vertical-align: 1px; background: rgba(224, 163, 46, 0.22); color: var(--warn);
}
.dz-seg button.on .dz-exp { background: rgba(224, 163, 46, 0.3); color: #7a4d00; }
:root[data-theme="dark"] .dz-seg button.on .dz-exp { color: #8a6100; }

/* fill-pattern picker: real stitch-out photos (uniform crop) */
.dz-fp img { width: 100%; height: 46px; object-fit: cover; border-radius: 5px; display: block; }

/* brand button (navigates home; work autosaves on the way out) */
button.dz-brand {
  background: transparent; border: 0; font-family: inherit; font-weight: inherit;
  cursor: pointer; border-radius: 9px; padding: 2px 8px 6px 4px; transition: var(--tr);
}
button.dz-brand:hover { background: rgba(var(--ink-rgb), 0.08); }
button.dz-brand:active { transform: scale(.97); }

/* little icon crowning the empty panels so they don't read as bare text */
.dz-empty-art {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 2px auto 10px; border-radius: 12px;
  background: rgba(79, 59, 246, 0.09); color: var(--accent);
}
:root[data-theme="dark"] .dz-empty-art { background: rgba(255, 255, 255, 0.1); color: var(--ink-2); }