.psed-root,.psed-root *,.psed-root *::before,.psed-root *::after{box-sizing:border-box;margin:0;padding:0}
.psed-root{
  --accent:#1976d2;--border:#ddd;--muted:#999;
  --topbar-h:52px;--ctxbar-h:58px;--surfacebar-h:44px;
  --workspace-bg:#FDFCE8;
}

/* ── Full-screen layout ── */
.psed-root{
  height:100%;overflow:hidden;
  font-family:inherit;
  display:flex;flex-direction:column;
  background:#888;color:#222;
  /* Prevent double-tap zoom and pinch zoom on the entire editor */
  touch-action:manipulation;
  -webkit-text-size-adjust:100%;
}

/* ── Top bar ── */
.psed-root .topbar{
  height:var(--topbar-h);flex-shrink:0;
  background:#fff;border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 12px;gap:10px;
  position:relative;z-index:100;box-shadow:0 1px 6px rgba(0,0,0,.12);
}
.psed-root .tb-back{
  width:34px;height:34px;border-radius:50%;border:none;
  background:#f2f2f2;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  color:#555;
}
.psed-root .tb-back:hover{background:#e8e8e8}
.psed-root .tb-tools{display:none;align-items:center;gap:8px;flex:0 1 auto;min-width:0;margin-right:auto}
.psed-root .tb-tools.visible{display:flex}
.psed-root .tb-tool-btn,.psed-root .tb-color-btn{
  height:36px;padding:0 14px;border:1px solid var(--border);border-radius:8px;
  background:#fff;color:#333;font-size:13px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;gap:6px;flex:0 0 auto;
}
.psed-root .tb-tool-btn:hover,.psed-root .tb-color-btn:hover{background:#f6f6f6}
.psed-root .tb-tool-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.psed-root .tb-tool-btn.primary:hover{filter:brightness(.96)}
.psed-root .tb-font-wrap{position:relative;display:flex;align-items:center}
.psed-root .tb-font-trigger{
  height:36px;min-width:180px;max-width:240px;padding:0 12px;
  border:1px solid var(--border);border-radius:8px;background:#fff;color:#222;
  font-size:13px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.psed-root .tb-font-trigger:hover{background:#f6f6f6}
.psed-root .tb-font-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.psed-root .tb-font-caret{font-size:10px;color:#555;flex:0 0 auto}
.psed-root .tb-font-pop{
  display:none;position:absolute;top:44px;left:0;width:230px;max-height:360px;overflow:auto;
  background:#fff;border:1px solid var(--border);border-radius:12px;padding:8px;
  box-shadow:0 10px 26px rgba(0,0,0,.18);z-index:350;
}
.psed-root .tb-font-pop.open{display:block}
.psed-root .tb-font-item{
  width:100%;border:none;background:#fff;color:#222;text-align:left;
  padding:7px 10px;border-radius:8px;cursor:pointer;font-size:15px;line-height:1.3;
  display:flex;align-items:center;
}
.psed-root .tb-font-item:hover,.psed-root .tb-font-item.active{background:#eef5ff}
.psed-root .tb-font-sprite{
  width:180px;height:24px;display:block;flex:0 0 auto;
  background-repeat:no-repeat;
  background-position:0 0;
}
.psed-root .tb-font-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psed-root .tb-font-item.has-sprite .tb-font-name{display:none}
.psed-root .tb-size-wrap{display:flex;align-items:center;margin:0 4px}
.psed-root .tb-size-input{
  width:52px;height:32px;border:1px solid var(--border);border-radius:6px;
  text-align:center;font-size:14px;font-weight:600;padding:0 2px;
  outline:none;background:#fff;color:#333;
  -moz-appearance:textfield;
}
.psed-root .tb-size-input::-webkit-inner-spin-button{opacity:1;height:28px}
.psed-root .tb-color-wrap{position:relative;display:flex;align-items:center}
.psed-root .tb-color-btn{padding-right:12px}
.psed-root .tb-color-swatch{width:18px;height:18px;border-radius:4px;border:1px solid rgba(0,0,0,.15);display:inline-block}
.psed-root .tb-color-pop{
  display:none;position:absolute;top:44px;right:0;background:#fff;border:1px solid var(--border);
  border-radius:12px;padding:12px;box-shadow:0 10px 26px rgba(0,0,0,.18);z-index:350;
}
.psed-root .tb-color-pop.open{display:block}
.psed-root .tb-color-grid{
  display:grid;grid-template-columns:repeat(8, 24px);gap:6px;
}
.psed-root .tb-color-cell{
  width:24px;height:24px;border-radius:4px;border:1px solid rgba(0,0,0,.12);cursor:pointer;
}
.psed-root .tb-color-cell:hover{transform:translateY(-1px)}
.psed-root .surface-switch{display:none;align-items:center;justify-content:center;gap:6px;position:absolute;left:50%;transform:translateX(-50%);min-width:0;overflow:auto;max-width:min(52%,760px);padding:0 4px}.psed-root .surface-switch.open{display:flex}.psed-root .surface-btn{height:32px;padding:0 12px;border:1px solid var(--border);border-radius:999px;background:#fff;color:#333;font-size:12px;font-weight:700;cursor:pointer;flex:0 0 auto}.psed-root .surface-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.psed-root .surface-btn.locked{opacity:.75}.psed-root .surfacebar{display:none;align-items:center;gap:8px;padding:8px 12px;background:#f7f7f7;border-bottom:1px solid var(--border);overflow:auto;white-space:nowrap}.psed-root .surfacebar.open{display:flex}.psed-root .surface-tab{height:28px;padding:0 12px;border:1px solid var(--border);border-radius:999px;background:#fff;color:#333;font-size:12px;font-weight:700;cursor:pointer;flex:0 0 auto}.psed-root .surface-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}.psed-root .surface-tab.locked{opacity:.75}.psed-root .surface-badge{font-size:10px;font-weight:800;margin-left:4px;opacity:.8}
.psed-root .tb-mockup{
  height:36px;padding:0 14px;
  background:#f2f2f2;color:#333;
  border:1px solid var(--border);border-radius:8px;
  font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;gap:5px;margin-left:auto;
}
.psed-root .tb-mockup:hover{background:#e8e8e8}
.psed-root .tb-mockup.active{background:#e3f0fc;border-color:#90c4f0;color:var(--accent)}

/* ── Mockup panel (dropdown from topbar) ── */
.psed-root .mockup-panel{
  display:none;position:fixed;
  top:calc(var(--topbar-h) + 6px);right:12px;
  background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:14px;min-width:230px;
  box-shadow:0 6px 24px rgba(0,0,0,.18);
  z-index:300;flex-direction:column;gap:10px;
}
.psed-root .mockup-panel.open{display:flex}
.psed-root .mp-upload-btn{
  height:38px;width:100%;
  background:var(--accent);color:#fff;
  border:none;border-radius:8px;
  font-size:13px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.psed-root .mp-upload-btn:active{filter:brightness(.9)}
.psed-root .mp-sep{height:1px;background:var(--border);margin:2px 0}
.psed-root .mp-thumb-row{display:flex;align-items:center;gap:10px}
.psed-root .mp-thumb{
  width:52px;height:52px;object-fit:cover;border-radius:6px;
  border:1px solid var(--border);flex-shrink:0;
}
.psed-root .mp-info{flex:1;min-width:0}
.psed-root .mp-info-name{font-size:12px;font-weight:600;color:#222;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.psed-root .mp-pos-label{font-size:11px;color:var(--muted);margin-top:2px}
.psed-root .mp-pos-toggle{
  display:flex;border:1px solid var(--border);border-radius:7px;overflow:hidden;margin-top:6px;
}
.psed-root .mp-pos-btn{
  flex:1;height:30px;border:none;background:#f6f6f6;
  font-size:12px;font-weight:600;cursor:pointer;color:#555;
}
.psed-root .mp-pos-btn.sel{background:var(--accent);color:#fff}
.psed-root .mp-remove{
  height:30px;padding:0 12px;
  border:1px solid #e0e0e0;border-radius:7px;
  background:#fff;color:#d32f2f;font-size:12px;font-weight:600;
  cursor:pointer;width:100%;margin-top:2px;
}
.psed-root .mp-remove:hover{background:#ffeaea}

/* ── Workspace: clean white canvas environment ── */
.psed-root .workspace{
  flex:1 1 auto;min-height:0;
  overflow:visible;
  /* align-items:stretch (default) so workspace-body fills the workspace
     vertically. Was `flex-start` which left workspace-body sized only to
     its content height — meant canvas-stage inside had no vertical room
     to center into, and the workspace background only covered the upper
     portion of the mount on mobile. */
  display:flex;justify-content:center;
  padding:20px 12px 12px;
  position:relative;
  background:var(--workspace-bg,#FDFCE8);
}
.psed-root .workspace-body{
  width:min(100%, 1280px);
  min-height:100%;
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:0;
}
.psed-root .canvas-stage{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  /* Vertical centering: landscape / heart / short canvases sat at the top
     of the stage with a big empty gap below; CC centers the design inside
     its available space. `safe center` keeps the top visible when a tall
     portrait canvas is actually larger than the viewport (prevents the
     top edge getting cut off on mobile — Safari needs `safe`). Browsers
     that don't know `safe` fall back to plain `center`. */
  align-items:safe center;
  justify-content:center;
}
.psed-root .editor-side{
  flex:0 0 320px;
  min-width:280px;
  background:#fff;
  border-left:1px solid var(--border);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding:22px 16px;
  gap:0;
  overflow-y:auto;
}
.psed-root #textSideCardsWrap{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
}
.psed-root .text-side-card{
  width:100%;
  display:none;
  align-items:stretch;
  border:1px solid #ddd;
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  transition:border-color .15s;
  min-height:0;
}
.psed-root .text-side-card.active{display:flex}
.psed-root .text-side-card.selected{
  border-color:#999;
}
.psed-root .text-side-icon{
  width:36px;
  flex:0 0 36px;
  background:var(--accent,#1976d2);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:700;
}
.psed-root .text-side-content{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.psed-root .text-side-input{
  flex:1 1 auto;
  min-width:0;
  width:100%;
  border:none;
  outline:none;
  box-shadow:none;
  padding:6px 10px;
  font-size:16px; /* >= 16px prevents iOS auto-zoom on focus */
  line-height:1.3;
  resize:none;
  min-height:0;
  /* JS auto-grows height up to the layer's effective line cap, matching the
     content exactly — so no scrollbar is ever needed. `overflow-y: hidden`
     avoids a flashing scrollbar during typing / RAF-timing edge cases. */
  max-height:320px;
  overflow-y:hidden;
  overflow-x:hidden;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
  font-family:inherit;
  color:#222;
  background:#fff;
  margin:0;
}
.psed-root .text-side-input:focus{
  outline:none;
  box-shadow:none;
}
.psed-root .text-side-input::placeholder{
  white-space:pre-line;
  color:#b9b9b9;
  opacity:1;
}

/* ── Canvas wrap: shadow + overflow visible for handles ── */
.psed-root .canvas-wrap{
  position:relative;flex-shrink:0;
  box-shadow:0 4px 24px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.12);
  overflow:visible;
}
.psed-root #mainCanvas{
  display:block;width:100%;height:auto;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
/* SVG text overlay — stacked on top of the canvas, same CSS dimensions,
   no pointer events (canvas handles all input). Used for editable text
   layers (see embedded.js::renderTextLayerSVG) to bypass Android's Canvas
   text-spacing quirk. */
.psed-root #textSvgOverlay{
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  pointer-events:none;
  overflow:visible;
}
/* Prevent iOS zoom on any input/textarea focus */
.psed-root input,.psed-root textarea,.psed-root select{font-size:16px;touch-action:manipulation}

/* ── Legacy context bar container kept hidden; controls now render in top bar ── */
.psed-root .ctxbar{
  display:none !important;
}
.psed-root .ctxbar.visible{display:none !important}

/* Context bar — text controls */
.psed-root .ctx-font{
  height:34px;padding:0 8px;
  border:1px solid var(--border);border-radius:6px;
  font-size:12px;background:#fff;color:#333;
  max-width:130px;cursor:pointer;
}
.psed-root .ctx-font:focus{outline:none;border-color:var(--accent)}
.psed-root .ctx-text-input{
  height:36px;min-width:180px;flex:1;
  border:1px solid var(--border);border-radius:8px;
  padding:0 10px;font-size:13px;background:#fff;color:#222;
}
.psed-root .ctx-text-input:focus{outline:none;border-color:var(--accent)}
.psed-root .ctx-color-btn{
  height:34px;padding:0 10px;
  border:1px solid var(--border);border-radius:6px;
  background:#fff;cursor:pointer;
  display:flex;align-items:center;gap:5px;
  font-size:13px;font-weight:800;color:#222;
}
.psed-root .ctx-swatch{width:18px;height:18px;border-radius:3px;border:1px solid rgba(0,0,0,.15);flex-shrink:0}
.psed-root .ctx-sep{width:1px;height:26px;background:var(--border);flex-shrink:0}
.psed-root .ctx-label{font-size:12px;color:var(--muted)}

/* Context bar — image controls */
.psed-root .ctx-photo-btn{
  height:36px;padding:0 16px;
  background:var(--accent);color:#fff;
  border:none;border-radius:8px;
  font-size:13px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:6px;
}
.psed-root .ctx-photo-btn:active{filter:brightness(.9)}
.psed-root .ctx-hint{font-size:11px;color:var(--muted);line-height:1.4;text-align:center}

/* ── Inline text edit popup (CC-style: small popup at bottom of canvas) ── */
.psed-root .text-edit-popup{
  display:none;
  position:absolute;
  left:4px;right:4px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 2px 20px rgba(0,0,0,.2);
  padding:8px 10px;
  z-index:50;
}
.psed-root .text-edit-popup.open{display:block}
.psed-root .tep-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:6px;
}
.psed-root .tep-label{font-size:13px;font-weight:700;color:var(--accent)}
.psed-root .tep-done{
  width:32px;height:32px;
  background:var(--accent);color:#fff;border:none;border-radius:50%;
  font-size:16px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.psed-root .tep-done:active{filter:brightness(.85)}
.psed-root .tep-input{
  width:100%;
  border:2px solid var(--border);border-radius:8px;
  padding:8px 12px;
  font-size:16px;line-height:1.4;
  font-family:inherit;color:#222;background:#fff;
  outline:none;
  resize:none;
  min-height:40px;
  max-height:160px;
  overflow-y:auto;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
  box-sizing:border-box;
}
.psed-root .tep-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(25,118,210,.15)}

@media (max-width: 980px){
  .psed-root .workspace-body{
    flex-direction:column;
  }
  .psed-root .editor-side{
    width:100%;
    min-width:0;
    flex:0 0 auto;
    border-left:none;
    border-top:none;
    padding:4px 12px;
  }
  .psed-root .text-side-card{padding:0;gap:4px}
  .psed-root .text-side-input{font-size:13px;padding:4px 8px;max-height:260px;overflow-y:hidden}
}

/* ── Multi-placeholder horizontal strip ── */
.psed-root .ph-strip{
  display:flex;gap:8px;padding:8px 12px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.psed-root .ph-strip::-webkit-scrollbar{display:none}
.psed-root .ph-strip-card{
  flex:0 0 56px;width:56px;height:68px;border-radius:8px;
  border:2px solid #ddd;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;background:#fff;gap:2px;transition:border-color .15s;
}
.psed-root .ph-strip-card:hover{border-color:#999}
.psed-root .ph-strip-card.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(25,118,210,.2)}
.psed-root .ph-strip-card.has-img{border-color:#4caf50}
.psed-root .ph-strip-thumb{width:100%;height:44px;object-fit:cover;border-radius:4px}
.psed-root .ph-strip-plus{font-size:22px;color:#bbb;line-height:44px}
.psed-root .ph-strip-name{font-size:9px;color:#666;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52px;padding:0 2px}

/* ── Select-Photo overlays ── */
.psed-root .ph-overlay{
  position:absolute;display:flex;
  align-items:center;justify-content:center;
  cursor:pointer;z-index:15;
}
.psed-root .ph-overlay-btn{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0;
  background:#2196F3;
  color:#fff;padding:10px 16px;
  border:none;border-radius:10px;cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
  transition:background .15s;
  line-height:1.15;
}
.psed-root .ph-overlay:hover .ph-overlay-btn{background:#1976d2}
.psed-root .ph-cam{display:none}
.psed-root .ph-label{font-size:13px;font-weight:700;letter-spacing:.2px;text-align:center}
.psed-root .ph-name{display:none}

/* ── Free-text DOM layers ──
   One <div> per free-text PSD layer, sized to the layer bounds, positioned
   inside #canvasWrap above the canvas. CSS transform handles the drag —
   GPU-accelerated, so movement stays smooth on every device. The canvas
   skips drawing these layers while the DOM overlay exists; it only draws
   them back in for export (proof image + PDF). */
.psed-root .ps-free-text {
  position: absolute;
  z-index: 12;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  cursor: move;
  will-change: transform;
  transform-origin: 0 0;
  box-sizing: content-box;
  background: transparent;
}
.psed-root .ps-free-text img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
.psed-root .ps-free-text.is-active {
  outline: 1px dashed rgba(25,118,210,.85);
  outline-offset: 2px;
}

/* ── Selection overlay ──
   Positioned via CSS transform (translate + rotate) rather than left/top so
   updates on every drag/scale frame run on the compositor thread on iOS
   Safari — no layout reflow per RAF. will-change pins it to its own layer. */
.psed-root .ps-img-drag {
  position:absolute;
  left:0;
  top:0;
  overflow:hidden;
  pointer-events:none;
  z-index:9;
  will-change:transform;
  contain:layout paint style;
}
.psed-root .ps-img-drag img {
  position:absolute;
  left:0;
  top:0;
  display:block;
  max-width:none;
  max-height:none;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
  will-change:transform;
  transform-origin:0 0;
}
.psed-root #selOverlay{
  position:absolute;display:none;pointer-events:none;
  border:1px solid rgba(0,180,255,.6);box-sizing:border-box;z-index:10;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.psed-root #selOverlay.active{display:block}
.psed-root #selOverlay.active.text-mode{
  pointer-events:all;cursor:move;z-index:25;
}
/* Canvas textarea overlays removed — text editing uses inline popup + side panel */

/* ── Closed mode: photo upload + simple text input ── */
/* text-edit-popup allowed in closed mode for simple text editing */
/* Side panel: compact padding but still multi-line — the JS autogrow sets
   `rows` based on the layer's max line count, so forcing nowrap/overflow
   hidden here collapsed 2-line defaults to 1 visible row. */
.psed-root.ps-closed-mode .text-side-input {
  min-height: 0;
  padding: 8px 12px;
  resize: none;
}
.psed-root.ps-closed-mode .text-side-card { border-radius: 8px; }
.psed-root.ps-closed-mode .editor-side { padding: 8px 12px; }
/* Closed mode: all image interaction tools visible */
.psed-root .sel-handle{
  position:absolute;width:10px;height:10px;
  background:#fff;border:1.5px solid rgba(0,180,255,.7);
  pointer-events:all;cursor:pointer;border-radius:2px;
}
.psed-root .sel-handle.tl{top:0;left:0;transform:translate(-50%,-50%);cursor:nwse-resize}
.psed-root .sel-handle.tr{top:0;right:0;transform:translate(50%,-50%);cursor:nesw-resize}
.psed-root .sel-handle.bl{bottom:0;left:0;transform:translate(-50%,50%);cursor:nesw-resize}
.psed-root .sel-handle.br{bottom:0;right:0;transform:translate(50%,50%);cursor:nwse-resize}
.psed-root .sel-rotate-line{
  position:absolute;bottom:-34px;left:50%;
  width:1.5px;height:22px;transform:translateX(-50%);
  background:rgba(0,180,255,.5);pointer-events:none;
}
.psed-root .sel-rotate{
  position:absolute;bottom:-48px;left:50%;
  width:22px;height:22px;transform:translateX(-50%);
  border-radius:999px;background:#fff;border:1.5px solid rgba(0,180,255,.7);
  box-shadow:0 1px 6px rgba(0,0,0,.15);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:rgba(0,180,255,.9);
  pointer-events:all;cursor:grab;
}
.psed-root .sel-rotate:active{cursor:grabbing}

/* ── Loader ── */
.psed-root .loader{
  width:100%;
  min-height:400px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;color:var(--muted);font-size:15px;
}
.psed-root .spin{
  width:36px;height:36px;
  border:3px solid rgba(0,0,0,.1);border-top-color:var(--accent);
  border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── PDF progress ── */
.psed-root .pdf-progress{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.6);z-index:2000;
  align-items:center;justify-content:center;
  flex-direction:column;gap:14px;
  color:#fff;font-size:14px;font-weight:600;
}
.psed-root .pdf-progress.open{display:flex}
.psed-root .busy-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(255,255,255,.82);backdrop-filter:blur(2px);z-index:2010;
  align-items:center;justify-content:center;
  flex-direction:column;gap:12px;
  color:#17324f;font-size:15px;font-weight:700;
}
.psed-root .busy-overlay.open{display:flex}
.psed-root .busy-message{font-size:15px;font-weight:700}
.psed-root .busy-progress{width:min(280px,72vw);height:10px;border-radius:999px;background:#dce7f6;overflow:hidden}
.psed-root .busy-progress.hidden{display:none}
.psed-root .busy-progress-bar{height:100%;width:0;background:linear-gradient(90deg,#1976d2,#4ca7ff);transition:width .15s linear}

/* ── Export modal ── */
.psed-root .modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;align-items:flex-end;justify-content:center}
.psed-root .modal-bg.open{display:flex}
.psed-root .modal{background:#fff;border-radius:20px 20px 0 0;width:100%;max-width:520px;padding:20px;max-height:70vh;display:flex;flex-direction:column}
.psed-root .modal h2{font-size:15px;font-weight:700;margin-bottom:12px}
.psed-root .modal pre{flex:1;overflow:auto;background:#1a1a2e;color:#7effa0;padding:14px;border-radius:10px;font-size:11px;max-height:200px}
.psed-root .modal-row{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.psed-root .mbtn{flex:1;min-width:80px;height:40px;border-radius:10px;border:none;font-size:12px;font-weight:600;cursor:pointer}
.psed-root .mbt-ok{background:var(--accent);color:#fff}
.psed-root .mbt-sec{background:#f2f2f2;color:#333}
.psed-root .mbt-pdf{background:#d32f2f;color:#fff}

/* ── Toast ── */
.psed-root .toast{
  position:fixed;bottom:70px;left:50%;transform:translateX(-50%);
  background:#d32f2f;color:#fff;padding:10px 20px;border-radius:8px;
  font-size:13px;font-weight:600;z-index:500;
  opacity:0;transition:opacity .25s;pointer-events:none;
  max-width:92%;text-align:center;
}
.psed-root .toast.show{opacity:1}

.psed-root #fileInput,.psed-root #colorInput,.psed-root #mockupFile{display:none}

/* ── Text panel config classes ─────────────────────────────────────────────
   Applied by embedded.js from activeEditorConfig.ui.textPanel:
     showOnDesktop: false  → .ps-tp-hide-desktop
     showOnMobile:  false  → .ps-tp-hide-mobile
     mobilePosition: 'top' → .ps-tp-mobile-top  (default)
     mobilePosition: 'bottom' → .ps-tp-mobile-bottom
──────────────────────────────────────────────────────────────────────────── */

/* Hide on desktop (screens wider than breakpoint) */
.psed-root.ps-tp-hide-desktop .editor-side{display:none}
/* On mobile override: still show if showOnMobile is true */
@media (max-width:980px){
  .psed-root.ps-tp-hide-desktop .editor-side{display:flex}
}

/* Hide on mobile */
@media (max-width:980px){
  .psed-root.ps-tp-hide-mobile .editor-side{display:none!important}
}

/* Mobile position: top — text panel appears ABOVE the canvas */
@media (max-width:980px){
  .psed-root.ps-tp-mobile-top .workspace-body{flex-direction:column}
  .psed-root.ps-tp-mobile-top .editor-side{
    order:-1;
    border-top:none;
    border-bottom:0px solid var(--border);
    border-left:none;
  }
}

/* Mobile position: bottom (explicit) — text panel stays BELOW canvas (default browser order) */
@media (max-width:980px){
  .psed-root.ps-tp-mobile-bottom .workspace-body{flex-direction:column}
  .psed-root.ps-tp-mobile-bottom .editor-side{
    border-top:1px solid var(--border);
    border-left:none;
  }
}

/* ── Image Gallery Picker ── */
.psed-root .ps-gallery-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);
  z-index:9000;align-items:center;justify-content:center;
  overscroll-behavior:contain;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.psed-root .ps-gallery-overlay.open{display:flex}
.psed-root .ps-gallery-panel{
  width:min(580px, 94vw);max-height:80vh;background:#fff;
  border-radius:18px;padding:0;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 12px 50px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.1);
  animation:psGalleryFadeIn .22s ease-out;
}
@keyframes psGalleryFadeIn{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}
.psed-root .ps-gallery-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px 12px;border-bottom:1px solid #eee;flex-shrink:0;
}
.psed-root .ps-gallery-title{font-size:16px;font-weight:800;color:#111}
.psed-root .ps-gallery-close{
  width:32px;height:32px;border:none;background:#f2f2f2;border-radius:50%;
  font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#555;
  transition:background .15s;
}
.psed-root .ps-gallery-close:hover{background:#e0e0e0}
/* Upload New — prominent button */
.psed-root .ps-gallery-upload-bar{
  padding:12px 20px 8px;flex-shrink:0;
}
.psed-root .ps-gallery-upload-btn{
  width:100%;height:46px;border:none;border-radius:12px;cursor:pointer;
  background:linear-gradient(135deg, #1976d2, #1565c0);color:#fff;
  font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .15s, box-shadow .15s;
  box-shadow:0 4px 14px rgba(25,118,210,.35);
}
.psed-root .ps-gallery-upload-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(25,118,210,.45)}
.psed-root .ps-gallery-upload-btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(25,118,210,.3)}
.psed-root .ps-gallery-upload-btn svg{width:20px;height:20px;fill:currentColor}
/* Section label */
.psed-root .ps-gallery-label{
  padding:4px 20px 8px;font-size:11px;font-weight:700;color:#aaa;
  text-transform:uppercase;letter-spacing:.8px;flex-shrink:0;
}
/* Thumbnail grid — 4 columns on desktop */
.psed-root .ps-gallery-grid{
  display:grid;grid-template-columns:repeat(4, 1fr);gap:10px;
  padding:4px 20px 20px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.psed-root .ps-gallery-item{
  width:100%;padding-bottom:100%;position:relative;
  border-radius:10px;overflow:hidden;cursor:pointer;
  border:2px solid transparent;background:#f5f5f5;
  transition:border-color .15s, transform .15s, box-shadow .15s;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.psed-root .ps-gallery-item:hover{
  border-color:#1976d2;transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}
.psed-root .ps-gallery-item img{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;image-rendering:auto;
}
.psed-root .ps-gallery-loading{
  padding:40px;text-align:center;color:#999;font-size:13px;
}
/* Mobile: 3 columns, centered */
@media (max-width: 768px) {
  .psed-root .ps-gallery-panel{width:min(580px, 94vw);max-height:80vh}
  .psed-root .ps-gallery-grid{grid-template-columns:repeat(3, 1fr);gap:8px;padding:4px 16px 16px}
  .psed-root .ps-gallery-header{padding:14px 16px 10px}
  .psed-root .ps-gallery-upload-bar{padding:10px 16px 6px}
  .psed-root .ps-gallery-label{padding:4px 16px 6px}
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATION — max-width: 768px
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Root: fit viewport, allow scroll ── */
  .psed-root {
    min-height: 0;
    height: auto;
    overflow: visible;
    background: var(--workspace-bg, #FDFCE8); /* match workspace, no gray gap */
  }

  /* ── Top bar: compact, wrapping tools ── */
  .psed-root .topbar {
    height: auto;
    min-height: 44px;
    padding: 6px 8px;
    gap: 6px;
    flex-wrap: wrap;
  }
  .psed-root .tb-back { width: 30px; height: 30px; font-size: 14px; }
  .psed-root .tb-tools { gap: 4px; flex-wrap: wrap; }
  .psed-root .tb-tool-btn, .psed-root .tb-color-btn {
    height: 32px;
    padding: 0 8px;
    font-size: 12px;
  }
  .psed-root .tb-font-trigger {
    min-width: 110px;
    max-width: 150px;
    height: 32px;
    font-size: 12px;
    padding: 0 8px;
  }
  .psed-root .tb-font-pop {
    width: min(230px, 70vw);
    max-height: 55vh;
    -webkit-overflow-scrolling: touch;
  }
  .psed-root .tb-color-pop {
    max-width: min(260px, 92vw);
    max-height: 60vh;
    overflow-y: auto;
    padding: 10px;
  }
  .psed-root .tb-color-grid {
    grid-template-columns: repeat(7, 24px);
    gap: 4px;
  }
  .psed-root .tb-color-cell { width: 24px; height: 24px; }
  .psed-root .tb-size-wrap { display: none; }
  .psed-root .tb-mockup { height: 32px; padding: 0 8px; font-size: 12px; }

  /* ── Workspace: fill remaining mount height so canvas-stage's
       align-items: safe center can actually vertically centre the design
       in the visible area. Before this grow, workspace = content height →
       no room to centre → design sat at top with dead cream area below.
       History:
         v1 (original): flex: 0 0 auto → workspace = content → no vertical
           centring → short designs hugged top with dead space below.
         v2 (earlier today): flex: 1 1 auto → workspace filled iframe →
           safe-center centred canvas → some Android reports of a large
           gap above canvas on very-tall iframe layouts, but this is the
           intended "centre within available space" behaviour.
         v3 (brief): flex: 0 1 auto → no grow → NO centring. User flagged
           this as "design centering missing" — reverted.
         v4 (this rule): back to flex: 1 1 auto. Canvas is centred in
           workspace. On mobile, the selection-outline-on-rotated-text bug
           is handled separately in embedded.js::drawSelections (skipped
           entirely on mobile viewport), so there's no "tilted box bleeding
           across layers" symptom to re-introduce. ── */
  .psed-root .workspace {
    min-height: 0;
    flex: 1 1 auto;
    padding: 4px 2px 0;
    overflow: visible;
  }

  /* ── Canvas stage: full width ── */
  .psed-root .canvas-stage {
    width: 100%;
    justify-content: center;
  }

  /* ── Canvas wrap: auto width on mobile ── */
  .psed-root .canvas-wrap {
    max-width: 100%;
  }

  /* ── Side panel: compact below canvas ── */
  .psed-root .editor-side {
    flex: 0 0 auto;
    min-width: 0;
    padding: 8px 8px;
    max-height: none;
    background: var(--workspace-bg, #FDFCE8); /* seamless with workspace */
  }
  .psed-root .text-side-input {
    padding: 8px 10px;
    font-size: 16px; /* >= 16px prevents iOS auto-zoom on focus */
  }

  /* ── Selection handles: larger touch targets ── */
  .psed-root .sel-handle {
    width: 16px;
    height: 16px;
  }
  .psed-root .sel-rotate {
    width: 28px;
    height: 28px;
    bottom: -56px;
    font-size: 14px;
  }
  .psed-root .sel-rotate-line {
    bottom: -42px;
    height: 30px;
  }

  /* ── Photo overlay: compact tap target ── */
  .psed-root .ph-overlay-btn {
    padding: 8px 12px;
  }
  .psed-root .ph-label { font-size: 12px; font-weight: 700; }

  /* ── Mockup panel: full width bottom sheet on mobile ── */
  .psed-root .mockup-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 16px 16px 0 0;
    min-width: 0;
    max-height: 60vh;
    overflow-y: auto;
  }

  /* ── Modal: full-width on mobile ── */
  .psed-root .modal {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
  }
}

/* Canvas textarea overlays removed — no touch outline rules needed */