/* LabelStudio canvas editors (customer studio + admin designer). Shared components; brand colours come from
   the host tokens (--ink, --porcelain, --line, --stone, --font-serif on the storefront; --admin-primary in
   the admin) with neutral fallbacks, so the engine stays reusable across stores. */
.ls-studio {
  --ls-ink: var(--ink, #1d1c1a);
  --ls-line: var(--line, #e3dfd8);
  --ls-muted: var(--stone, #7b746a);
  --ls-paper: #ffffff;
  --ls-surface: var(--porcelain, #f6f4f0);
  --ls-stage: #ebe8e2;
  --ls-accent: var(--admin-primary, #1d1c1a);
  --ls-accent-soft: var(--admin-primary-soft, #f1efeb);
  --ls-on-accent: var(--admin-on-primary, #ffffff);
  --ls-select: #2563eb;
  --ls-danger: #a3352a;
  --ls-ok: #2f6a3f;
  --ls-warn: #8a6414;
  --ls-radius: 10px;
  color: var(--ls-ink);
  font-size: 14px;
}
.ls-studio *, .ls-studio *::before, .ls-studio *::after { box-sizing: border-box; }
.ls-studio [hidden] { display: none !important; }

/* ---------- bar ---------- */
.ls-studio-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 14px; background: var(--ls-paper); border: 1px solid var(--ls-line); border-radius: var(--ls-radius); box-shadow: 0 1px 2px rgba(0, 0, 0, .03); }
.ls-studio-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 260px; }
.ls-back { display: inline-flex; align-items: center; gap: 6px; color: var(--ls-muted); text-decoration: none; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ls-back span[aria-hidden] { font-size: 20px; line-height: 1; }
.ls-back:hover { color: var(--ls-ink); }
.ls-name-input { min-width: 0; flex: 1 1 auto; max-width: 340px; border: 1px solid transparent; border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 16px; font-family: var(--font-serif, Georgia, serif); background: transparent; color: inherit; }
.ls-name-input:hover { border-color: var(--ls-line); }
.ls-name-input:focus { outline: none; border-color: var(--ls-ink); background: #fff; }
.ls-save-status { font-size: 12px; color: var(--ls-muted); white-space: nowrap; }
.ls-save-status::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--ls-ok); vertical-align: 1px; }
.ls-save-status[data-kind="pending"]::before, .ls-save-status[data-kind="busy"]::before { background: var(--ls-warn); animation: ls-pulse 1s infinite alternate; }
.ls-save-status[data-kind="error"] { color: var(--ls-danger); }
.ls-save-status[data-kind="error"]::before { background: var(--ls-danger); }
@keyframes ls-pulse { to { opacity: .3; } }
.ls-studio-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ls-inline-form { display: inline; margin: 0; }

.ls-tabs { display: inline-flex; padding: 3px; background: var(--ls-surface); border: 1px solid var(--ls-line); border-radius: 999px; }
.ls-tab { appearance: none; border: 0; background: transparent; padding: 7px 16px; border-radius: 999px; font: inherit; font-size: 13px; color: var(--ls-muted); cursor: pointer; white-space: nowrap; }
.ls-tab[aria-selected="true"] { background: var(--ls-paper); color: var(--ls-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); font-weight: 600; }

/* ---------- buttons and inputs ---------- */
.ls-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 9px 16px; border: 1px solid var(--ls-ink); border-radius: 8px; background: var(--ls-ink); color: #fff; font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .02em; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.ls-btn:hover { background: #000; }
.ls-btn:disabled { opacity: .45; cursor: not-allowed; }
.ls-btn--primary { background: var(--ls-accent); border-color: var(--ls-accent); color: var(--ls-on-accent); }
.ls-btn--ghost { background: transparent; color: var(--ls-ink); border-color: var(--ls-line); }
.ls-btn--ghost:hover { background: var(--ls-surface); border-color: var(--ls-ink); }
.ls-btn--ghost.is-active { background: var(--ls-accent-soft); border-color: var(--ls-accent); }
.ls-btn--danger { background: transparent; color: var(--ls-danger); border-color: rgba(163, 53, 42, .35); }
.ls-btn--danger:hover { background: #fbefed; }
.ls-btn--sm { min-height: 32px; padding: 5px 11px; font-size: 12px; }
.ls-btn--block { width: 100%; }
.ls-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ls-ink); cursor: pointer; }
.ls-icon-button:hover:not(:disabled) { background: var(--ls-surface); border-color: var(--ls-line); }
.ls-icon-button:disabled { opacity: .3; cursor: default; }
.ls-icon-button.is-danger { color: var(--ls-danger); }
.ls-icon-button[aria-pressed="true"] { background: var(--ls-accent-soft); color: var(--ls-accent); }
.ls-icon { display: inline-flex; line-height: 0; }

.ls-input, .ls-select { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--ls-line); border-radius: 8px; background: #fff; color: inherit; font: inherit; font-size: 14px; line-height: 1.45; }
textarea.ls-input { resize: vertical; min-height: 64px; }
.ls-input:focus, .ls-select:focus { outline: none; border-color: var(--ls-ink); box-shadow: 0 0 0 3px rgba(0, 0, 0, .06); }
.ls-input--number { max-width: 110px; }
.ls-input--sm { min-height: 30px; padding: 4px 8px; font-size: 13px; }
.ls-input--title { font-weight: 600; border-color: transparent; padding-left: 6px; }
.ls-input--title:hover { border-color: var(--ls-line); }
.ls-input-group { display: inline-flex; align-items: stretch; }
.ls-input-group .ls-input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ls-input-suffix { display: inline-flex; align-items: center; padding: 0 8px; border: 1px solid var(--ls-line); border-left: 0; border-radius: 0 8px 8px 0; background: var(--ls-surface); color: var(--ls-muted); font-size: 12px; }
.ls-range { width: 100%; accent-color: var(--ls-ink); }
.ls-range--mini { width: 80px; }
.ls-color-input { width: 38px; height: 34px; padding: 2px; border: 1px solid var(--ls-line); border-radius: 8px; background: #fff; cursor: pointer; }
.ls-check { width: 18px; height: 18px; accent-color: var(--ls-ink); flex: 0 0 auto; }
.ls-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; user-select: none; }
.ls-toggle input { width: 16px; height: 16px; accent-color: var(--ls-ink); }
.ls-segmented { display: inline-flex; padding: 2px; border: 1px solid var(--ls-line); border-radius: 8px; background: var(--ls-surface); flex-wrap: wrap; }
.ls-segmented button { appearance: none; border: 0; background: transparent; min-height: 30px; min-width: 32px; padding: 4px 10px; border-radius: 6px; font: inherit; font-size: 12px; color: var(--ls-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ls-segmented button.is-active { background: #fff; color: var(--ls-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); font-weight: 600; }
.ls-swatch-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ls-swatch-button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); cursor: pointer; padding: 0; }
.ls-swatch-button.is-active { outline: 2px solid var(--ls-ink); outline-offset: 2px; }
.ls-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-size: 13px; cursor: pointer; background: none; border: 0; padding: 0; }

/* ---------- layout ---------- */
.ls-studio-body { display: grid; gap: 14px; margin-top: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.ls-studio-stage { position: relative; min-width: 0; background: var(--ls-stage); border: 1px solid var(--ls-line); border-radius: var(--ls-radius); padding: 14px; }
.ls-stage-view { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ls-canvas-wrap, .ls-canvas-scroll { display: flex; justify-content: center; align-items: center; min-height: 320px; overflow: auto; padding: 22px 12px 34px; }
.ls-canvas { display: block; width: 100%; max-width: 100%; height: auto; max-height: calc(100vh - 330px); min-height: 280px; overflow: visible; touch-action: none; user-select: none; -webkit-user-select: none; filter: drop-shadow(0 14px 30px rgba(28, 24, 18, .18)); outline: none; }
.ls-canvas--admin { max-height: calc(100vh - 300px); }
.ls-stage-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--ls-muted); }
.ls-readout { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ls-ink); }
.ls-tools { display: flex; gap: 8px; margin-bottom: 4px; }
.ls-tool { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--ls-line); border-radius: 999px; background: #fff; color: var(--ls-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ls-tool:hover { border-color: var(--ls-ink); }
.ls-context-bar { position: absolute; z-index: 3; top: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; padding: 4px; background: #fff; border: 1px solid var(--ls-line); border-radius: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }

/* ---------- canvas interaction (SVG) ---------- */
.ls-canvas .ls-hit { cursor: pointer; }
.ls-canvas .ls-hit.is-movable { cursor: move; }
.ls-canvas .ls-hit.is-locked { cursor: not-allowed; }
.ls-canvas .ls-selection { fill: none; stroke: var(--ls-select); vector-effect: non-scaling-stroke; stroke-width: 1.6px; }
.ls-canvas .ls-handle { fill: #fff; stroke: var(--ls-select); vector-effect: non-scaling-stroke; stroke-width: 1.4px; }
.ls-canvas .ls-handle-nw, .ls-canvas .ls-handle-se { cursor: nwse-resize; }
.ls-canvas .ls-handle-ne, .ls-canvas .ls-handle-sw { cursor: nesw-resize; }
.ls-canvas .ls-handle-n, .ls-canvas .ls-handle-s { cursor: ns-resize; }
.ls-canvas .ls-handle-e, .ls-canvas .ls-handle-w { cursor: ew-resize; }
.ls-canvas .ls-rotate-handle { cursor: grab; }
.ls-canvas .ls-rotate-stem { stroke: var(--ls-select); vector-effect: non-scaling-stroke; stroke-width: 1.4px; }
.ls-canvas .ls-move-grip { cursor: move; }
.ls-canvas .ls-move-grip circle { fill: #fff; stroke: var(--ls-select); vector-effect: non-scaling-stroke; }
.ls-canvas .ls-move-grip path { stroke: var(--ls-select); vector-effect: non-scaling-stroke; }
.ls-canvas .ls-snap-line { stroke: #e0368f; vector-effect: non-scaling-stroke; stroke-width: 1px; }
.ls-canvas .ls-snap-line.is-page { stroke: #7c3aed; stroke-dasharray: 4 3; }
.ls-canvas .ls-editable-hints rect { stroke: rgba(37, 99, 235, .55); stroke-width: 1px; stroke-dasharray: 3 3; animation: ls-hint 2.4s ease-in-out 2; }
@keyframes ls-hint { 50% { stroke: rgba(37, 99, 235, .15); } }

/* ---------- side panels ---------- */
.ls-studio-panel, .ls-side-card { background: var(--ls-paper); border: 1px solid var(--ls-line); border-radius: var(--ls-radius); }
.ls-studio-panel { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.ls-panel-head, .ls-props-head { display: flex; align-items: center; gap: 8px; }
.ls-panel-title { font-size: 15px; flex: 1; }
.ls-panel-heading { font-family: var(--font-serif, Georgia, serif); font-size: 20px; font-weight: 400; margin: 0 0 4px; }
.ls-panel-body { display: flex; flex-direction: column; gap: 14px; }
.ls-panel-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ls-muted); }
.ls-panel-hint { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ls-muted); }
.ls-prop { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ls-prop--inline { flex-direction: row; align-items: center; justify-content: space-between; }
.ls-prop-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ls-muted); }
.ls-prop-hint { font-size: 12px; color: var(--ls-muted); }
.ls-row { display: flex; align-items: center; gap: 10px; }
.ls-row > .ls-prop { flex: 1; }
.ls-row--wrap { flex-wrap: wrap; }
.ls-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
.ls-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.ls-field-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.ls-field-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--ls-line); border-radius: 10px; background: #fff; }
.ls-field-card:hover { border-color: #c9c3b9; }
.ls-field-card-title { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ls-ink); cursor: pointer; text-align: left; }
.ls-type-dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; background: #8f877b; }
.ls-type-text { background: #2563eb; }
.ls-type-image { background: #c2602f; }
.ls-type-shape { background: #4b5563; }
.ls-type-color { background: #7c3aed; }
.ls-text-field { display: flex; flex-direction: column; gap: 4px; }
.ls-text-meta { display: flex; justify-content: space-between; gap: 8px; min-height: 16px; }
.ls-counter { font-size: 11px; color: var(--ls-muted); font-variant-numeric: tabular-nums; margin-left: auto; }
.ls-fit-note, .ls-dpi-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ls-warn); }
.ls-dpi-note.is-error, .ls-fit-note { color: var(--ls-danger); }
.ls-actions-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 12px; border-top: 1px solid var(--ls-line); }
.ls-actions-row .ls-btn--danger { margin-left: auto; }

/* ---------- 3D ---------- */
.ls-stage-3d { gap: 12px; }
.ls-3d-stage { position: relative; height: min(64vh, 620px); min-height: 360px; border-radius: 8px; background: radial-gradient(ellipse at 50% 35%, #ffffff 0%, #ece8e1 55%, #dcd6cc 100%); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ls-3d-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; cursor: grab; touch-action: none; }
.ls-3d-stage canvas:active { cursor: grabbing; }
.ls-3d-controls { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end; padding: 12px 14px; background: #fff; border: 1px solid var(--ls-line); border-radius: 8px; }
.ls-3d-views { display: flex; gap: 6px; align-items: center; }
.ls-3d-error { color: var(--ls-muted); padding: 24px; text-align: center; }

/* ---------- proof dialog ---------- */
.ls-dialog { width: min(1080px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 0; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); color: var(--ls-ink); }
.ls-dialog::backdrop { background: rgba(20, 18, 15, .55); backdrop-filter: blur(2px); }
.ls-dialog-body { padding: 22px; }
.ls-proof-review, .ls-proof-layout { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
.ls-proof-visual { display: flex; flex-direction: column; gap: 10px; align-items: center; background: var(--ls-stage, #ebe8e2); border-radius: 10px; padding: 18px; }
.ls-proof-frame { position: relative; display: inline-block; line-height: 0; max-width: 100%; }
.ls-proof-image { max-width: 100%; max-height: 64vh; width: auto; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); }
.ls-proof-trim { position: absolute; border: 1px dashed rgba(20, 20, 20, .6); pointer-events: none; }
.ls-proof-side { display: flex; flex-direction: column; gap: 14px; }
.ls-proof-issues { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; }
.ls-proof-issues .is-error { color: var(--ls-danger, #a3352a); }
.ls-proof-issues .is-warning { color: var(--ls-warn, #8a6414); }
.ls-proof-failure { margin: 0; font-size: 13px; color: var(--ls-danger, #a3352a); }
.ls-proof-loading, .ls-proof-error { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 20px; text-align: center; }
.ls-approve { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--ls-line, #e3dfd8); border-radius: 10px; background: var(--ls-surface, #f6f4f0); }
.ls-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; cursor: pointer; }
.ls-approved { display: flex; flex-direction: column; gap: 12px; }
.ls-approved-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--ls-ok, #2f6a3f); font-weight: 600; }
.ls-cart-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.ls-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(0, 0, 0, .12); border-top-color: var(--ls-ink, #1d1c1a); animation: ls-spin .8s linear infinite; }
@keyframes ls-spin { to { transform: rotate(360deg); } }

/* ---------- toasts ---------- */
.ls-toasts { position: fixed; z-index: 1000; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.ls-toast { padding: 10px 14px; border-radius: 10px; background: #1d1c1a; color: #fff; font-size: 13px; box-shadow: 0 10px 24px rgba(0, 0, 0, .2); transition: opacity .4s, transform .4s; max-width: 360px; }
.ls-toast--error { background: #8a2b22; }
.ls-toast--ok { background: #2f5d3a; }
.ls-toast.is-leaving { opacity: 0; transform: translateY(6px); }

/* ---------- admin designer specifics ---------- */
.ls-studio--admin .ls-studio-body { grid-template-columns: minmax(0, 1fr); }
.ls-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 auto; }
.ls-toolbar-group { display: flex; align-items: center; gap: 2px; padding-right: 8px; margin-right: 2px; border-right: 1px solid var(--ls-line); }
.ls-toolbar-group:last-child { border-right: 0; margin-left: auto; gap: 8px; }
.ls-toolbar .ls-tool { padding: 6px 11px; border-radius: 8px; font-size: 12px; }
.ls-side-card { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ls-side-title { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ls-muted); }
.ls-layers { display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow: auto; }
.ls-layer { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 2px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; font-size: 13px; }
.ls-layer:hover { background: var(--ls-surface); }
.ls-layer.is-selected { background: var(--ls-accent-soft); border-color: var(--ls-accent); }
.ls-layer.is-hidden .ls-layer-name { opacity: .45; text-decoration: line-through; }
.ls-layer.is-dragging { opacity: .4; }
.ls-layer.is-drop { box-shadow: inset 0 2px 0 var(--ls-select); }
.ls-layer .ls-icon-button { width: 28px; height: 28px; }
.ls-layer-grip { color: #b8b1a6; cursor: grab; }
.ls-layer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-layer-badge { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ls-ok); background: #eaf4ec; border-radius: 4px; padding: 1px 5px; }
.ls-props { gap: 0; padding: 0; max-height: calc(100vh - 170px); overflow: auto; }
.ls-props-element, .ls-props-template { display: flex; flex-direction: column; }
.ls-props-head { padding: 12px 14px; border-bottom: 1px solid var(--ls-line); position: sticky; top: 0; background: #fff; z-index: 1; }
.ls-props-type { font-size: 11px; color: var(--ls-muted); white-space: nowrap; }
.ls-props-template > .ls-panel-heading, .ls-props-template > .ls-panel-note { padding: 0 14px; }
.ls-props-template > .ls-panel-heading { padding-top: 14px; }
.ls-prop-section { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-bottom: 1px solid var(--ls-line); }
.ls-prop-heading { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ls-ink); }
.ls-prop-details > summary { cursor: pointer; list-style: none; }
.ls-prop-details > summary::after { content: "+"; float: right; color: var(--ls-muted); }
.ls-prop-details[open] > summary::after { content: "–"; }
.ls-permission-list { display: grid; grid-template-columns: 1fr; gap: 6px; }
.ls-palette-editor { display: flex; flex-direction: column; gap: 6px; }
.ls-palette-row { display: flex; align-items: center; gap: 6px; }
.ls-file-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px dashed var(--ls-line); }
.ls-file-row:first-of-type { border-top: 0; }
.ls-file-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ls-file-status { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ls-muted); white-space: nowrap; }
.ls-file-status.is-ok { color: var(--ls-ok); }
.ls-file-status.is-error { color: var(--ls-danger); }
.ls-server-render { margin-top: 6px; padding: 12px; background: #fff; border: 1px solid var(--ls-line); border-radius: 8px; }
.ls-server-render-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ls-server-render-head .ls-icon-button { margin-left: auto; }
.ls-server-image { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.ls-lifecycle-card .btn { margin-top: 6px; }

@media (min-width: 1100px) {
  .ls-studio--customer .ls-studio-body { grid-template-columns: minmax(0, 1fr) 380px; }
  .ls-studio-panel { position: sticky; top: 110px; max-height: calc(100vh - 130px); overflow: auto; }
  .ls-studio--admin .ls-studio-body { grid-template-columns: 250px minmax(0, 1fr) 340px; }
  .ls-studio-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--admin-topbar-h, 56px) + 12px); }
  .ls-proof-review, .ls-proof-layout { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); align-items: start; }
}
@media (min-width: 760px) and (max-width: 1099.98px) {
  .ls-studio--admin .ls-studio-body { grid-template-columns: minmax(0, 1fr) 320px; }
  .ls-studio--admin .ls-studio-side--left { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; order: 3; }
}
@media (max-width: 759.98px) {
  .ls-studio-bar { padding: 8px 10px; }
  .ls-studio-actions { width: 100%; justify-content: space-between; }
  .ls-studio-actions .ls-btn--primary { flex: 1; }
  .ls-studio-stage { padding: 8px; }
  .ls-canvas-wrap, .ls-canvas-scroll { padding: 14px 4px 24px; min-height: 0; }
  .ls-canvas { max-height: 62vh; }
  .ls-studio-side { display: flex; flex-direction: column; gap: 12px; }
  .ls-toolbar-group { border-right: 0; }
  .ls-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-back-text { display: none; }
  .ls-dialog-body { padding: 14px; }
  .ls-context-bar { top: 6px; }
}

/* The admin designer's editing tools do nothing while the 3D view is showing. */
.ls-studio--admin.is-3d .ls-toolbar { display: none; }

/* 3D camera presets: the active view is highlighted. */
.ls-3d-views .ls-btn.is-active { background: #1d1c1a; border-color: #1d1c1a; color: #fff; }
.ls-3d-stage { background: linear-gradient(180deg, #fbfaf7 0%, #efebe4 55%, #ddd6cb 100%); }

/* ---------- direct editing (Napa-style): text typed on the label, floating toolbar, tool rail ---------- */
.ls-canvas .is-being-edited text { opacity: 0; }
.ls-inline-edit { position: absolute; z-index: 6; display: flex; align-items: center; box-shadow: 0 0 0 1.5px var(--ls-select), 0 0 0 5px rgba(37, 99, 235, .15); border-radius: 2px; transform-origin: center; }
.ls-studio .ls-inline-edit-input, .ls-inline-edit .ls-inline-edit-input { display: block; box-shadow: none; -webkit-appearance: none; appearance: none; width: 100%; border: 0 !important; margin: 0; padding: 0; background: transparent !important; resize: none; overflow: hidden; outline: none; caret-color: var(--ls-select); white-space: pre-wrap; }

.ls-context-bar { top: 14px; left: 50%; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 14px; border: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 10px 30px rgba(28, 24, 18, .18), 0 2px 6px rgba(28, 24, 18, .08); transition: left .12s ease, top .12s ease; white-space: nowrap; }
.ls-context-group { display: flex; align-items: center; gap: 2px; }
.ls-context-group + .ls-context-group { padding-left: 4px; margin-left: 2px; border-left: 1px solid var(--ls-line); }
.ls-context-button { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ls-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ls-context-button:hover { background: var(--ls-surface); }
.ls-context-select { width: auto; max-width: 180px; min-height: 36px; padding: 6px 28px 6px 10px; border-color: transparent; background-color: var(--ls-surface); font-size: 13px; }
.ls-context-bar .ls-icon-button { width: 36px; height: 36px; border-radius: 9px; }
.ls-colour-pick { position: relative; }
.ls-colour-dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.ls-colour-popover { position: absolute; z-index: 7; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); padding: 12px; background: #fff; border: 1px solid var(--ls-line); border-radius: 12px; box-shadow: 0 14px 34px rgba(28, 24, 18, .2); width: max-content; max-width: 280px; white-space: normal; }

.ls-studio--customer .ls-studio-stage { background: linear-gradient(180deg, #f3f0eb 0%, #e9e5de 100%); border-color: transparent; }
.ls-studio--customer .ls-canvas { max-height: calc(100vh - 290px); min-height: 360px; filter: drop-shadow(0 18px 36px rgba(28, 24, 18, .22)); }
.ls-studio--customer .ls-canvas-wrap { padding: 64px 12px 30px; }
.ls-tool { transition: border-color .15s, box-shadow .15s, transform .15s; }
.ls-tool:hover { box-shadow: 0 6px 16px rgba(28, 24, 18, .12); transform: translateY(-1px); }
.ls-tool--bottle { background: var(--ls-ink); color: #fff; border-color: var(--ls-ink); }
@media (min-width: 900px) {
  .ls-studio--customer .ls-tools { position: absolute; z-index: 4; left: 16px; top: 16px; flex-direction: column; gap: 10px; margin: 0; }
  .ls-studio--customer .ls-tool { flex-direction: column; justify-content: center; width: 74px; height: 70px; padding: 6px; gap: 5px; border-radius: 14px; font-size: 11px; letter-spacing: .02em; }
  .ls-studio--customer .ls-stage-view:not(.ls-stage-3d) { padding-left: 84px; }
}
.ls-studio--customer .ls-field-card { border-color: transparent; background: var(--ls-surface); }
.ls-studio--customer .ls-field-card:hover { border-color: var(--ls-line); }
.ls-studio--customer .ls-3d-stage { height: min(72vh, 720px); }