/* ══════════════════════════════════════════════════════════════════
   Mockupidea — Smart Mockup Generator
   A three-column editor workspace: templates and layers on the left,
   the stage in the middle, artwork and product options on the right.
   Design system inherited from mockupidea.com.
   ══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:        #2563eb;
  --blue-dark:   #1d4ed8;
  --blue-light:  #eff6ff;
  --blue-mid:    #bfdbfe;
  --gray-50:     #f9fafb;
  --gray-100:    #f3f4f6;
  --gray-200:    #e5e7eb;
  --gray-300:    #d1d5db;
  --gray-400:    #9ca3af;
  --gray-500:    #6b7280;
  --gray-600:    #4b5563;
  --gray-700:    #374151;
  --gray-900:    #111827;
  --orange:      #f97316;
  --green:       #10b981;
  --red:         #ef4444;
  --radius-sm:   0.5rem;
  --radius:      0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.25rem;
  --radius-full: 9999px;
  --shadow-sm:   0 1px 2px rgba(0,0,0,.06);
  --shadow:      0 1px 6px rgba(0,0,0,.08);
  --shadow-md:   0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.12);
  --shadow-blue: 0 4px 20px rgba(37,99,235,.25);
  --transition:  0.2s ease;

  --topbar-h:    64px;
  --panel-w:     300px;
}

html, body { height: 100%; }

body {
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--gray-100);
  color: var(--gray-900);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

iconify-icon { display: inline-block; vertical-align: -0.125em; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ─── Top bar ──────────────────────────────────────────────────────── */

.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 .875rem;
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  position: relative;
  z-index: 40;
}

.topbar-left, .topbar-right { display: flex; align-items: center; gap: .5rem; }
.topbar-left  { min-width: 0; flex: 1 1 auto; }
.topbar-right { flex: 0 0 auto; }

.topbar-center {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex: 0 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity var(--transition);
}
.logo:hover { opacity: .85; }
.logo-icon {
  width: 32px;
  height: 32px;
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.logo-svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.logo-brand {
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .06em;
  color: var(--gray-900);
  display: inline-block;
}
.crumb-divider {
  width: 1px;
  height: 16px;
  background: var(--gray-200);
  margin: 0 .25rem;
  flex-shrink: 0;
}

.breadcrumb {
  display: flex; align-items: center; gap: .5rem;
  min-width: 0; font-size: 13px; font-weight: 600;
}
.crumb { color: var(--gray-500); white-space: nowrap; }
.crumb-root { font-weight: 700; color: var(--gray-700); }
.crumb-sep { color: var(--gray-300); }
.crumb-current {
  color: var(--gray-900); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 22ch;
}

.tb-btn, .tb-icon {
  display: inline-flex; align-items: center; gap: .375rem;
  height: 34px; padding: 0 .625rem;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--gray-600);
  background: transparent; border: none;
  border-radius: var(--radius-sm);
  cursor: pointer; transition: all var(--transition);
}
.tb-icon { padding: 0; width: 30px; justify-content: center; }
.tb-btn:hover:not(:disabled), .tb-icon:hover:not(:disabled) {
  background: var(--gray-100); color: var(--gray-900);
}
.tb-btn:disabled, .tb-icon:disabled { opacity: .38; cursor: default; }
.tb-btn iconify-icon, .tb-icon iconify-icon { font-size: 16px; }

.tb-divider {
  width: 1px; height: 22px; background: var(--gray-200); margin: 0 .375rem;
}

.zoom-group {
  display: flex; align-items: center;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.zoom-value {
  min-width: 52px; height: 30px;
  font: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--gray-700); background: transparent; border: none;
  border-radius: 6px; cursor: pointer;
}
.zoom-value:hover { background: #fff; }

/* ─── Buttons ──────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  height: 38px; padding: 0 .95rem;
  font: inherit; font-size: 13px; font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn iconify-icon { font-size: 16px; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); }
.btn-primary:hover:not(:disabled) { background: var(--blue-dark); }
.btn-primary:disabled { background: var(--gray-300); box-shadow: none; cursor: default; }
.btn-secondary {
  background: var(--gray-100);
  color: var(--gray-800);
  border: 1px solid var(--gray-200);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--gray-200);
  color: var(--gray-900);
  border-color: var(--gray-300);
}
.btn-secondary:disabled {
  opacity: .4;
  cursor: default;
}
.btn-ghost { background: #fff; color: var(--gray-700); border-color: var(--gray-200); }
.btn-ghost:hover { background: var(--gray-50); border-color: var(--gray-300); }
.btn-outline {
  background: #fff; color: var(--gray-700); border-color: var(--gray-200);
}
.btn-outline:hover { background: var(--gray-50); color: var(--gray-900); }
.btn-block { width: 100%; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  background: transparent; border: none; border-radius: 6px;
  color: var(--gray-400); cursor: pointer; transition: all var(--transition);
}
.icon-btn:hover { background: var(--gray-100); color: var(--gray-700); }

/* ─── Workspace shell ──────────────────────────────────────────────── */

.workspace {
  height: calc(100vh - var(--topbar-h));
  display: grid;
  grid-template-columns: var(--panel-w) 1fr var(--panel-w);
  gap: 0;
}

.panel {
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.panel-left  { border-right: 1px solid var(--gray-200); }
.panel-right { border-left: 1px solid var(--gray-200); }

.pane-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .875rem;
}
.pane-scroll::-webkit-scrollbar { width: 10px; }
.pane-scroll::-webkit-scrollbar-thumb {
  background: var(--gray-200); border-radius: 99px;
  border: 3px solid #fff;
}
.pane-scroll::-webkit-scrollbar-thumb:hover { background: var(--gray-300); }

/* ─── Left panel tabs ──────────────────────────────────────────────── */

.panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--gray-200);
  padding: 0 .375rem;
  flex-shrink: 0;
}
.panel-tab {
  flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  height: 44px; padding: 0 .25rem;
  font: inherit; font-size: 11.5px; font-weight: 700;
  color: var(--gray-500); background: none; border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer; transition: all var(--transition);
  white-space: nowrap;
}
.panel-tab iconify-icon { font-size: 15px; }
.panel-tab:hover { color: var(--gray-900); }
.panel-tab.active { color: var(--blue); border-bottom-color: var(--blue); }

.pane { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; }
.pane.active { display: flex; }

.pane-empty, .prop-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; text-align: center;
  padding: 3rem 1.25rem; color: var(--gray-400);
}
.pane-empty iconify-icon, .prop-empty iconify-icon {
  font-size: 30px; color: var(--gray-300);
}
.pane-empty p, .prop-empty p { font-size: 12.5px; line-height: 1.55; max-width: 22ch; }

/* ─── Search + categories ──────────────────────────────────────────── */

.field { margin-bottom: .75rem; }

.search { position: relative; }
.search iconify-icon {
  position: absolute; left: .625rem; top: 50%; transform: translateY(-50%);
  color: var(--gray-400); font-size: 15px; pointer-events: none;
}
.search input {
  width: 100%; height: 36px;
  padding: 0 .75rem 0 2.1rem;
  font: inherit; font-size: 13px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.search input:focus {
  outline: none; background: #fff;
  border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light);
}

.category-tabs {
  display: flex; flex-wrap: wrap; gap: .3rem;
  margin-bottom: .875rem;
}
/* An explicit display beats the browser's own [hidden] { display: none },
   so toggling the attribute alone did nothing here. */
.category-tabs[hidden] { display: none; }
.cat-tab {
  padding: .3rem .625rem;
  font: inherit; font-size: 11.5px; font-weight: 700;
  color: var(--gray-600); background: var(--gray-100);
  border: none; border-radius: var(--radius-full);
  cursor: pointer; transition: all var(--transition);
}
.cat-tab:hover { background: var(--gray-200); }
.cat-tab.active { background: var(--blue); color: #fff; }

/* ─── Template grid ────────────────────────────────────────────────── */

.tpl-toolbar { display: flex; gap: .4rem; margin-bottom: .625rem; }

/* A native <select> can only be styled as far as its border — the option
   list itself is drawn by the operating system, hence the mismatched blue
   highlight. This is a real menu so the whole control matches the app. */
.dd { position: relative; flex: 1 1 auto; min-width: 0; }

.dd-trigger {
  width: 100%; height: 38px;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: 0 .75rem;
  font: inherit; font-size: 13px; font-weight: 700;
  color: var(--gray-900);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}
.dd-trigger:hover { border-color: var(--gray-300); background: var(--gray-50); }
.dd-trigger.open {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-light);
  background: #fff;
}
.dd-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dd-caret {
  flex-shrink: 0;
  font-size: 16px; color: var(--gray-400);
  transition: transform var(--transition);
}
.dd-trigger.open .dd-caret { transform: rotate(180deg); color: var(--blue); }

.dd-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  z-index: 60;
  padding: .3rem;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  animation: pop-in .13s ease;
  max-height: 260px; overflow-y: auto;
}
.dd-menu[hidden] { display: none; }

.dd-option {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem .55rem;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--gray-700); text-align: left;
  background: none; border: none; border-radius: 6px;
  cursor: pointer; transition: all var(--transition);
}
.dd-option:hover { background: var(--gray-100); color: var(--gray-900); }
.dd-option.active { background: var(--blue-light); color: var(--blue); font-weight: 700; }
.dd-option iconify-icon { font-size: 15px; flex-shrink: 0; }

.tpl-filter-btn {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--gray-600);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer; transition: all var(--transition);
}
.tpl-filter-btn:hover { background: var(--gray-50); color: var(--gray-900); }
.tpl-filter-btn.active {
  background: var(--blue-light); color: var(--blue); border-color: var(--blue-mid);
}

/* Sections per category, each collapsing to a couple of rows plus a
   "View all". A flat grid works at four templates and stops working at forty. */
.template-grid { display: flex; flex-direction: column; gap: 1.1rem; }

.tpl-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: .5rem;
}
.tpl-section-head h4 {
  font-size: 12.5px; font-weight: 800; color: var(--gray-900);
  letter-spacing: -.01em;
}
.tpl-count {
  margin-left: .25rem;
  font-size: 10.5px; font-weight: 700; color: var(--gray-400);
}
.tpl-viewall {
  font: inherit; font-size: 11.5px; font-weight: 700;
  color: var(--blue); background: none; border: none;
  cursor: pointer; padding: 0;
}
.tpl-viewall:hover { text-decoration: underline; }

.tpl-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

.template-card {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden; cursor: pointer;
  transition: all var(--transition);
}
.template-card:hover {
  border-color: var(--blue-mid);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.template-card.selected {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-light);
}
.tc-thumb {
  aspect-ratio: 1;
  background: var(--gray-50);
  overflow: hidden;
}
.tc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.template-card-label {
  padding: .4rem .5rem .5rem;
  font-size: 11px; font-weight: 700; line-height: 1.3;
  color: var(--gray-700);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.selected-check {
  position: absolute; top: .4rem; right: .4rem;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: none; align-items: center; justify-content: center;
  font-size: 12px; box-shadow: var(--shadow);
}
.template-card.selected .selected-check { display: flex; }
.template-empty {
  padding: 2rem 1rem; text-align: center;
  font-size: 12.5px; color: var(--gray-400);
}

/* ─── My Uploads ───────────────────────────────────────────────────── */

.uploads-list { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.upload-chip {
  position: relative;
  border: 2px solid transparent; border-radius: var(--radius);
  background: var(--gray-50); overflow: hidden; cursor: pointer;
  transition: all var(--transition);
}
.upload-chip:hover { border-color: var(--blue-mid); }
.upload-chip.active { border-color: var(--blue); }
.upload-chip img {
  width: 100%; aspect-ratio: 1; object-fit: contain; display: block;
  background:
    linear-gradient(45deg, var(--gray-200) 25%, transparent 25%) 0 0/12px 12px,
    linear-gradient(-45deg, var(--gray-200) 25%, transparent 25%) 0 6px/12px 12px,
    #fff;
}
.upload-chip span {
  display: block; padding: .35rem .45rem;
  font-size: 10.5px; font-weight: 600; color: var(--gray-600);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── Layer tree ───────────────────────────────────────────────────── */

.layer-tree { display: flex; flex-direction: column; gap: .2rem; }

.layer-group { border-radius: var(--radius-sm); overflow: hidden; }

.layer-row {
  display: flex; align-items: center; gap: .45rem;
  padding: .45rem .5rem;
  border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 600; color: var(--gray-700);
  transition: background var(--transition);
}
.layer-row:hover { background: var(--gray-50); }
.layer-row.is-group { font-weight: 700; color: var(--gray-900); }
.layer-row.child { padding-left: 1.6rem; font-weight: 500; font-size: 12px; }
.layer-row.locked { color: var(--gray-400); }

.layer-row .layer-icon { font-size: 15px; color: var(--gray-400); flex-shrink: 0; }
.layer-row.is-group .layer-icon { color: var(--blue); }
.layer-name {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.layer-swatch {
  width: 13px; height: 13px; border-radius: 3px; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.14);
}
.layer-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0;
  background: none; border: none; border-radius: 5px;
  color: var(--gray-400); cursor: pointer; transition: all var(--transition);
}
.layer-toggle:hover { background: var(--gray-100); color: var(--gray-700); }
.layer-toggle.off { color: var(--gray-300); }
.layer-row.hidden-layer .layer-name { opacity: .45; text-decoration: line-through; }

/* ─── Stage ────────────────────────────────────────────────────────── */

.stage-wrap {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 0;
  padding: 1.5rem;
  background:
    radial-gradient(circle at 50% 0%, #fff 0%, var(--gray-100) 70%);
}

.stage-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  text-align: center; color: var(--gray-400);
}
.ph-icon {
  width: 64px; height: 64px; margin-bottom: .5rem;
  border-radius: var(--radius-lg);
  background: #fff; box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue); font-size: 26px;
}
.stage-placeholder h2 {
  font-size: 17px; font-weight: 800; color: var(--gray-700); letter-spacing: -.01em;
}
.stage-placeholder p { font-size: 13px; }

.stage {
  position: relative;
  display: none;
  width: 100%; height: 100%;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* The stage is sized in template pixels so the placement quad lands exactly,
   then scaled as a whole to fit. Because the layout box keeps its full
   unscaled size, centring comes from the transform rather than from flow —
   otherwise the scaled result drifts past the wrapper's clip. */
.interactive-preview {
  position: absolute;
  top: 50%; left: 50%;
  transform-origin: center center;
  overflow: visible;
  background: #fff;
  isolation: isolate;
}

.mockup-base-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill; pointer-events: none;
  z-index: 1;
}

/* Garment colours sit beneath the artwork, blending against the photograph
   so the fabric's own shading survives the recolour. */
.under-layers { display: contents; }
.under-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill; pointer-events: none;
  z-index: 2;
}

/* Clips the artwork to the printable region and multiplies it into the
   garment, so the fabric's folds show through the print. */
#secondary-slots-wrap { display: contents; }

.design-clip {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 5; pointer-events: none;
  mix-blend-mode: multiply;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

.design-container {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  transform-origin: 0 0;
  z-index: 5; pointer-events: none;
}

.design-transform-wrapper {
  position: absolute; top: 0; left: 0;
  pointer-events: auto; cursor: grab;
  overflow: hidden;
}
.design-transform-wrapper:active { cursor: grabbing; }

.design-img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}

/* Creases and highlights, lifted from the PSD's Fx group. `display: contents`
   is deliberate — a z-index here would make this a stacking context, and a
   stacking context forms an isolated group, so the layers would blend against
   transparency inside the wrapper and paint over the artwork as a flat image
   instead of burning into it. */
.fx-layers { display: contents; }
.fx-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill; pointer-events: none;
  z-index: 10;
}

.controls-overlay-wrapper {
  pointer-events: auto; background: transparent; overflow: visible !important;
}
.corner-anchor { position: absolute; width: 0; height: 0; }
.corner-anchor.tl { top: 0; left: 0; }
.corner-anchor.tr { top: 0; right: 0; }
.corner-anchor.bl { bottom: 0; left: 0; }
.corner-anchor.br { bottom: 0; right: 0; }

/* ─── Selection affordances ────────────────────────────────────────── */

.ui-overlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 20;
  opacity: 0; transition: opacity .18s ease;
}
.stage:hover .ui-overlay, .ui-overlay.is-active { opacity: 1; }

.ui-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Handles carry a white ring so they stay legible on dark and light
   products alike — the artwork sits on a perspective quad, so they can land
   anywhere. */
.resize-handle, .rotate-handle {
  position: absolute;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  background: #fff;
  border: 2px solid var(--blue);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.9), var(--shadow);
  pointer-events: auto;
  transition: transform .12s ease;
}
.resize-handle:hover, .rotate-handle:hover { transform: scale(1.25); }
#handle-tl { cursor: nwse-resize; }
#handle-br { cursor: nwse-resize; }
#handle-tr { cursor: nesw-resize; }
#handle-bl { cursor: nesw-resize; }

.rotate-handle {
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%; cursor: grab;
  display: flex; align-items: center; justify-content: center;
  color: var(--blue); font-size: 13px;
}

/* ─── Stage floating tools ─────────────────────────────────────────── */

.stage-tools {
  position: absolute;
  left: 50%; bottom: 1rem;
  transform: translateX(-50%);
  display: none;
  gap: .15rem;
  padding: .3rem;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 30;
}
.stage-tools.visible { display: flex; }

.stage-tool {
  display: inline-flex; flex-direction: column; align-items: center; gap: .15rem;
  min-width: 62px; padding: .4rem .5rem;
  font: inherit; font-size: 10.5px; font-weight: 700;
  color: var(--gray-600);
  background: none; border: none; border-radius: var(--radius-sm);
  cursor: pointer; transition: all var(--transition);
}
.stage-tool iconify-icon { font-size: 17px; }
.stage-tool:hover { background: var(--gray-100); color: var(--gray-900); }
.stage-tool.active { background: var(--blue-light); color: var(--blue); }

.view-switcher {
  position: absolute; left: 50%; bottom: 4.5rem;
  transform: translateX(-50%);
  display: flex; gap: .15rem; padding: .25rem;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow); z-index: 30;
}
.view-switcher[hidden] { display: none; }

/* ─── Right panel ──────────────────────────────────────────────────── */

.prop-group { margin-bottom: 1.25rem; }
.prop-group:last-child { margin-bottom: 0; }

.prop-title {
  display: flex; align-items: center; gap: .35rem;
  margin-bottom: .625rem;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--gray-500);
}
.prop-title .hint { color: var(--gray-300); cursor: help; font-size: 13px; }
.prop-note {
  margin-top: .5rem;
  font-size: 11px; line-height: 1.5; color: var(--gray-400);
}

.prop-body[hidden], .prop-empty[hidden] { display: none; }

/* Dropzone */
.dropzone {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem 1rem;
  text-align: center;
  border: 2px dashed var(--blue-mid);
  border-radius: var(--radius);
  background: var(--blue-light);
  cursor: pointer;
  transition: all var(--transition);
}
.dropzone:hover, .dropzone.drag-over {
  border-color: var(--blue);
  background: #e6efff;
}
.dropzone input[type=file] { display: none; }
.dz-inner { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.dz-icon { font-size: 26px; color: var(--blue); margin-bottom: .15rem; }
.dz-inner strong { font-size: 13px; font-weight: 700; color: var(--blue-dark); }
.dz-inner span { font-size: 11px; color: var(--gray-500); }

.file-row {
  display: flex; align-items: center; gap: .55rem;
  margin-top: .5rem; padding: .45rem .55rem;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
}
.file-row[hidden] { display: none; }
.file-row img {
  width: 32px; height: 32px; object-fit: contain; flex-shrink: 0;
  border-radius: 5px; background: var(--gray-100);
}
.file-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.file-meta .fname {
  font-size: 12px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-meta .fsize { font-size: 10.5px; color: var(--gray-400); }
.file-ok { color: var(--green); font-size: 16px; flex-shrink: 0; }

/* Colour rows */
.color-row { margin-bottom: .875rem; }
.color-row:last-child { margin-bottom: 0; }

.color-row-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .4rem;
}
.color-row-label {
  font-size: 12px; font-weight: 700; color: var(--gray-700);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.color-reset {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: none; border: none; border-radius: 5px;
  color: var(--gray-400); cursor: pointer; font-size: 13px;
  transition: all var(--transition);
}
.color-reset:hover { background: var(--gray-100); color: var(--gray-700); }

.swatches { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.swatch {
  width: 24px; height: 24px; padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--gray-200) inset, var(--shadow-sm);
  cursor: pointer; transition: all var(--transition);
}
.swatch:hover { transform: scale(1.12); }
.swatch.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
}
.swatch-custom {
  position: relative; width: 24px; height: 24px;
  border-radius: 50%; overflow: hidden;
  border: 1px dashed var(--gray-300);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gray-500); cursor: pointer; font-size: 12px;
  background: #fff;
}
.swatch-custom input[type=color] {
  position: absolute; inset: 0;
  width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0;
}

/* Segmented control */
.seg {
  display: flex; gap: 2px; padding: 3px;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  margin-bottom: .875rem;
}
.seg-btn {
  flex: 1 1 0; height: 30px;
  font: inherit; font-size: 12px; font-weight: 700;
  color: var(--gray-600); background: transparent;
  border: none; border-radius: 6px; cursor: pointer;
  transition: all var(--transition);
}
.seg-btn:hover { color: var(--gray-900); }
.seg-btn.active { background: #fff; color: var(--blue); box-shadow: var(--shadow-sm); }

/* Sliders */
.slider-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: .75rem 0 .3rem;
}
.slider-row label {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: 12px; font-weight: 600; color: var(--gray-600);
}
.slider-row label iconify-icon { font-size: 14px; color: var(--gray-400); }
.slider-row output { font-size: 12px; font-weight: 700; color: var(--gray-900); }

.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: var(--gray-200); border-radius: 99px;
  outline: none; cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--blue); border: 2.5px solid #fff;
  box-shadow: var(--shadow); cursor: grab;
}
.slider::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--blue); border: 2.5px solid #fff;
  box-shadow: var(--shadow); cursor: grab; border-color: #fff;
}

/* Text field */
.slot-row { margin-bottom: .625rem; }
.slot-row:last-child { margin-bottom: 0; }
.control-text {
  width: 100%; height: 34px;
  padding: 0 .6rem;
  font: inherit; font-size: 12.5px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.control-text:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-light);
}

/* ─── Loading + toasts ─────────────────────────────────────────────── */

.loading-overlay {
  position: fixed; inset: 0;
  display: none; align-items: center; justify-content: center;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(3px);
  z-index: 200;
}
.loading-card {
  display: flex; align-items: center; gap: .6rem;
  padding: .75rem 1.1rem;
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: 13px; font-weight: 600; color: var(--gray-700);
}
.loading-card iconify-icon { font-size: 18px; color: var(--blue); }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.toast-container {
  position: fixed; bottom: 1.25rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: .5rem;
  z-index: 300; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .9rem;
  background: var(--gray-900); color: #fff;
  border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: toast-in .25s ease;
}
.toast.success { background: var(--green); }
.toast.error { background: var(--red); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ─── Colour popover ───────────────────────────────────────────────── */

.color-pop {
  position: fixed;
  width: 264px;
  z-index: 250;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  animation: pop-in .14s ease;
}
.color-pop[hidden] { display: none; }
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.pop-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .45rem .5rem .75rem;
  border-bottom: 1px solid var(--gray-100);
}
.pop-title {
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: var(--gray-500);
}

.pop-body { padding: .7rem .75rem .55rem; }
.pop-group { margin-bottom: .7rem; }
.pop-group:last-child { margin-bottom: 0; }
.pop-group-label {
  display: block; margin-bottom: .35rem;
  font-size: 10px; font-weight: 700; color: var(--gray-400);
  text-transform: uppercase; letter-spacing: .07em;
}
.pop-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: .3rem; }

.pop-swatch {
  aspect-ratio: 1; width: 100%; padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px rgba(0,0,0,.10) inset;
  cursor: pointer; transition: transform .12s ease, border-color .12s ease;
}
.pop-swatch:hover { transform: scale(1.18); }
.pop-swatch.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px rgba(0,0,0,.10) inset, 0 0 0 2px #fff inset;
}

.pop-foot {
  display: flex; align-items: center; gap: .4rem;
  padding: .5rem .75rem .7rem;
  border-top: 1px solid var(--gray-100);
}
.pop-hex {
  flex: 1 1 auto;
  display: flex; align-items: center; gap: .1rem;
  height: 32px; padding: 0 .55rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 600; color: var(--gray-400);
}
.pop-hex:focus-within { border-color: var(--blue); background: #fff; }
.pop-hex-input {
  flex: 1 1 auto; min-width: 0;
  border: none; background: none; outline: none;
  font: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--gray-900);
}
.pop-native-wrap {
  position: relative; flex: 0 0 auto;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  color: var(--gray-500); cursor: pointer;
}
.pop-native-wrap:hover { background: #fff; color: var(--gray-900); }
.pop-native {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: none; padding: 0;
}

/* The layer tree's swatch is a real control, not decoration. */
button.layer-swatch {
  width: 15px; height: 15px; padding: 0;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.16);
  cursor: pointer; transition: transform .12s ease;
}
button.layer-swatch:hover { transform: scale(1.2); }

/* ─── Responsive ───────────────────────────────────────────────────── */

.sheet-handle, .sheet-tabs { display: none; }

@media (max-width: 1180px) {
  :root { --panel-w: 262px; }
  .tb-btn span { display: none; }
  .tb-btn { padding: 0 .5rem; }
}

/* A phone gets the stage plus one sheet of controls, rather than three
   columns squeezed into a single narrow one. The templates panel becomes a
   tab within the same sheet, so the product picker stays one tap away. */
@media (max-width: 900px) {
  body { overflow: hidden; }

  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    height: calc(100vh - var(--topbar-h));
    height: calc(100dvh - var(--topbar-h));
  }

  .topbar { padding: 0 .5rem; gap: .35rem; }
  .topbar-center { display: none; }
  .breadcrumb .crumb-root, .breadcrumb .crumb-sep { display: none; }
  .crumb-current { max-width: 15ch; font-size: 13.5px; }
  #download-psd { display: none; }

  .stage-wrap { grid-row: 1; padding: .75rem; min-height: 0; }

  .panel {
    grid-row: 2;
    border: none;
    border-top: 1px solid var(--gray-200);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,.08);
    max-height: 48vh;
    transition: max-height .22s ease;
  }
  /* One sheet at a time; the tab bar swaps which panel is mounted. */
  .panel-left { display: none; }
  body.sheet-templates .panel-left { display: flex; }
  body.sheet-templates .panel-right { display: none; }

  /* Browsing needs room. At the shared height the toolbar and search ate
     most of the sheet and left about one row of products showing, which
     read as there being no way to pick one at all. The stage matters less
     while choosing a product, so the sheet takes the space instead. */
  body.sheet-templates .panel { max-height: 72vh; }
  .stage-wrap { min-height: 22vh; }

  /* Trim the chrome above the grid on a phone */
  .tpl-toolbar { margin-bottom: .45rem; }
  .tpl-toolbar .field { margin-bottom: .45rem; }
  .pane-scroll .field { margin-bottom: .5rem; }
  .tpl-section-head { margin-bottom: .35rem; }
  .template-grid { gap: .8rem; }

  .sheet-handle {
    display: block;
    width: 36px; height: 4px; margin: .5rem auto .15rem;
    background: var(--gray-300); border-radius: 99px; flex-shrink: 0;
  }

  .sheet-tabs {
    display: flex;
    border-bottom: 1px solid var(--gray-100);
    padding: 0 .25rem; flex-shrink: 0;
  }
  .sheet-tab {
    flex: 1 1 0;
    display: inline-flex; flex-direction: column; align-items: center; gap: .1rem;
    padding: .45rem .25rem;
    font: inherit; font-size: 10px; font-weight: 700;
    color: var(--gray-500); background: none; border: none;
    border-bottom: 2px solid transparent; cursor: pointer;
  }
  .sheet-tab iconify-icon { font-size: 17px; }
  .sheet-tab.active { color: var(--blue); border-bottom-color: var(--blue); }

  .panel-tabs { display: none; }
  .pane-scroll { padding: .75rem .875rem 1.25rem; }

  .stage-tools { bottom: .5rem; }
  .stage-tool { min-width: 56px; padding: .35rem .4rem; font-size: 10px; }

  .tpl-cards { grid-template-columns: repeat(3, 1fr); }
  .color-pop { width: min(300px, calc(100vw - 24px)); }
}

@media (max-width: 560px) {
  .btn span { display: none; }
  .btn { padding: 0 .75rem; }
  .panel { max-height: 54vh; }
  body.sheet-templates .panel { max-height: 74vh; }
  /* Three across fits a phone and roughly triples what is visible without
     scrolling; the label is what needs the room, not the thumbnail. */
  .tpl-cards { grid-template-columns: repeat(3, 1fr); gap: .4rem; }
  .template-card-label { padding: .3rem .35rem .4rem; font-size: 10px; }
  .slider-row label { font-size: 11.5px; }
  .swatch { width: 26px; height: 26px; }
}


/* ─── Multi-Slot Controls ─────────────────────────────────────────── */
.prop-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .6rem;
}
.prop-title-row .prop-title { margin-bottom: 0; }
.apply-all-btn {
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-light, #e6efff);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  transition: all var(--transition);
}
.apply-all-btn:hover {
  background: var(--blue);
  color: #fff;
}
.slot-tabs-wrap {
  margin-bottom: .75rem;
}
.slot-tabs-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gray-500);
  margin-bottom: .4rem;
}
.slot-tabs-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.slot-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .65rem;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gray-600);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition);
}
.slot-pill:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-light, #e6efff);
}
.slot-pill.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
}
.slot-pill .slot-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gray-300);
  transition: all var(--transition);
}
.slot-pill.has-art .slot-dot {
  background: #10b981;
}
.slot-pill.active .slot-dot {
  background: rgba(255, 255, 255, 0.6);
}
.slot-pill.active.has-art .slot-dot {
  background: #10b981;
  box-shadow: 0 0 0 1.5px #fff;
}
.slot-info-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .4rem .6rem;
  margin-bottom: .6rem;
  background: var(--gray-50);
  border: 1px dashed var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 11.5px;
}
.slot-info-name {
  font-weight: 800;
  color: var(--gray-800);
}
.slot-info-dims {
  font-weight: 600;
  color: var(--gray-500);
}
.template-badge-slots {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(17, 24, 39, 0.82);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .02em;
  z-index: 2;
}

/* ─── High-Res Preview Modal ───────────────────────────────────────── */

.modal-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(8px);
  z-index: 500;
  padding: 1.5rem;
  animation: modal-fade-in .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-overlay[hidden] { display: none; }
@keyframes modal-fade-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}
.modal-card {
  display: flex; flex-direction: column;
  background: #fff;
  width: 100%; max-width: 1100px;
  max-height: 92vh;
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gray-200);
  background: #fff;
  flex-shrink: 0;
}
.modal-title-group { display: flex; flex-direction: column; gap: 2px; }
.modal-title { font-size: 15px; font-weight: 800; color: var(--gray-900); }
.modal-subtitle { font-size: 11.5px; font-weight: 600; color: var(--gray-500); }
.modal-actions { display: flex; align-items: center; gap: .75rem; }
.btn-sm { height: 34px; padding: 0 .85rem; font-size: 12.5px; }
.modal-close-btn { font-size: 18px; width: 32px; height: 32px; }
.modal-body {
  flex: 1 1 auto;
  overflow: auto;
  display: flex; align-items: center; justify-content: center;
  background: #f1f5f9;
  padding: 1.5rem;
}
.modal-canvas-wrap {
  display: flex; align-items: center; justify-content: center;
  max-width: 100%; max-height: 100%;
}
.modal-canvas-wrap img {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 120px);
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.06);
}