/* MFT Photoshop · kids creative studio — light playful theme */
:root {
  --ps-bg: #f4f6ff;
  --ps-bg2: #eef1ff;
  --ps-card: #ffffff;
  --ps-text: #1e1b4b;
  --ps-muted: #6b7280;
  --ps-primary: #7c5cfc;
  --ps-primary-dark: #6344e8;
  --ps-primary-soft: #ede9fe;
  --ps-accent: #38bdf8;
  --ps-pink: #f472b6;
  --ps-border: #e5e7eb;
  --ps-radius: 16px;
  --ps-radius-sm: 12px;
  --ps-shadow: 0 10px 30px rgba(99, 102, 241, 0.12);
  --ps-stage-w: 1200px;
  --ps-stage-h: 780px;
  --ps-header-h: 64px;
  --ps-editor-chrome: 108px;
  --ps-font: var(--pe-font-ui, "Vazirmatn", "Tahoma", system-ui, sans-serif);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.ps-body {
  font-family: var(--ps-font);
  color: var(--ps-text);
  background: var(--ps-bg);
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
button, input, select { font: inherit; }

/* ===== Top bar (landing) ===== */
.ps-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ps-border);
  position: sticky; top: 0; z-index: 40;
}
.ps-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit; flex-shrink: 0;
}
.ps-brand img { border-radius: 10px; background: var(--ps-primary-soft); }
.ps-brand strong { display: block; font-size: .95rem; }
.ps-brand small { color: var(--ps-muted); font-size: 11px; }
.ps-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.ps-nav-link {
  text-decoration: none; color: var(--ps-muted); font-weight: 700; font-size: 13px;
  padding: 8px 12px; border-radius: 999px;
}
.ps-nav-link:hover { color: var(--ps-primary); background: var(--ps-primary-soft); }
.ps-nav-link.is-active {
  color: var(--ps-primary); background: var(--ps-primary-soft);
  box-shadow: inset 0 -2px 0 var(--ps-primary);
}
.ps-top-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Buttons */
.ps-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: 999px;
  padding: 10px 18px; font-weight: 800; font-size: 13px;
  cursor: pointer; text-decoration: none; color: inherit;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  background: #fff; border-color: var(--ps-border);
}
.ps-btn:hover { transform: translateY(-1px); }
.ps-btn:active { transform: translateY(0); }
.ps-btn-primary {
  background: linear-gradient(135deg, var(--ps-primary), #8b5cf6);
  color: #fff; border-color: transparent;
  box-shadow: 0 8px 20px rgba(124, 92, 252, .35);
}
.ps-btn-primary:hover { background: linear-gradient(135deg, var(--ps-primary-dark), #7c3aed); color: #fff; }
.ps-btn-soft { background: var(--ps-primary-soft); color: var(--ps-primary); border-color: transparent; }
.ps-btn-ghost { background: transparent; border-color: transparent; color: var(--ps-muted); }
.ps-btn-outline { background: #fff; border-color: #c4b5fd; color: var(--ps-primary); }
.ps-btn-lg { padding: 14px 28px; font-size: 15px; }
.ps-btn-sm { padding: 8px 14px; font-size: 12px; }
.ps-btn-block { width: 100%; margin-top: 8px; }
.ps-icon-btn {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--ps-border);
  background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--ps-text);
}
.ps-icon-btn:hover { background: var(--ps-primary-soft); border-color: #c4b5fd; color: var(--ps-primary); }

/* ===== Landing hero ===== */
.ps-landing {
  min-height: 100vh;
  background:
    radial-gradient(900px 500px at 10% 0%, #e0e7ff 0%, transparent 55%),
    radial-gradient(700px 400px at 90% 10%, #fce7f3 0%, transparent 50%),
    radial-gradient(600px 400px at 50% 100%, #dbeafe 0%, transparent 45%),
    var(--ps-bg);
}
.ps-hero {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 720px) 1fr;
  align-items: center;
  gap: 12px;
  padding: 2.5rem 1.25rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.ps-hero-main { grid-column: 2; }
.ps-hero-deco { display: flex; flex-direction: column; align-items: center; gap: 18px; opacity: .95; }
.ps-kicker {
  display: inline-block; margin: 0 0 .6rem;
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
  color: var(--ps-primary); background: var(--ps-primary-soft);
  padding: 6px 14px; border-radius: 999px;
}
.ps-hero h1 {
  margin: 0 0 .75rem;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.35; font-weight: 900;
  background: linear-gradient(120deg, #5b21b6, #7c5cfc 40%, #ec4899);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ps-sub {
  margin: 0 auto 1.25rem; max-width: 36rem;
  color: var(--ps-muted); font-size: 1.05rem; line-height: 1.7;
}
.ps-features {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.ps-features li {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--ps-border);
  border-radius: 999px; padding: 8px 14px;
  font-size: 13px; font-weight: 700; color: #374151;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
}
.ps-feat-ico { font-size: 15px; }
.ps-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ps-float {
  font-size: 2.4rem; display: inline-block;
  animation: ps-bob 3.2s ease-in-out infinite;
  filter: drop-shadow(0 8px 12px rgba(99,102,241,.2));
}
.ps-float-star { animation-delay: .4s; font-size: 1.5rem; }
.ps-float-pencil { animation-delay: .2s; }
.ps-float-paint { animation-delay: .7s; font-size: 1.8rem; }
.ps-float-kid { animation-delay: .5s; }
@keyframes ps-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.ps-value {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-width: 1100px; margin: 0 auto; padding: 1rem 1.25rem 3rem;
}
.ps-value-card {
  background: var(--ps-card); border: 1px solid var(--ps-border);
  border-radius: 20px; padding: 1.25rem 1.1rem; text-align: center;
  box-shadow: var(--ps-shadow);
}
.ps-value-ico { font-size: 1.6rem; }
.ps-value-card h3 { margin: .5rem 0 .35rem; font-size: .95rem; }
.ps-value-card p { margin: 0; color: var(--ps-muted); font-size: 13px; line-height: 1.55; }

/* ===== Page mock: continuous scroll ===== */
body.ps-page-mock {
  background:
    radial-gradient(900px 500px at 10% 0%, #e0e7ff 0%, transparent 55%),
    radial-gradient(700px 400px at 90% 10%, #fce7f3 0%, transparent 50%),
    radial-gradient(600px 400px at 50% 80%, #dbeafe 0%, transparent 45%),
    var(--ps-bg);
}
body.ps-page-mock .ps-landing {
  min-height: auto;
  background: transparent;
  padding-bottom: 0.5rem;
}
body.ps-page-mock .ps-editor-card {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--ps-border);
  background: #fff;
  box-shadow: none;
  overflow: hidden;
  min-height: calc(100vh - var(--ps-header-h));
  height: calc(100vh - var(--ps-header-h));
  display: flex;
  flex-direction: column;
}
body.ps-page-mock .ps-ed-body {
  flex: 1;
  height: auto;
  min-height: 0;
  /* Props | large canvas | ClipArt library */
  grid-template-columns: 240px minmax(0, 1fr) 300px;
}
body.ps-page-mock .ps-value {
  padding-bottom: 2.5rem;
}

/* ===== Editor shell ===== */
.ps-editor {
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: #f0f2fb;
}
.ps-editor.ps-editor-card {
  min-height: 0;
  background: #fff;
}
.ps-ed-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; padding: 8px 12px;
  background: #fff; border-bottom: 1px solid var(--ps-border);
  position: sticky; top: 0; z-index: 30;
}
.ps-ed-top-left, .ps-ed-top-center, .ps-ed-top-right {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ps-zoom {
  display: inline-flex; align-items: center; gap: 4px;
  background: #f8fafc; border: 1px solid var(--ps-border);
  border-radius: 999px; padding: 2px 6px; margin-inline-start: 6px;
}
.ps-zoom span { min-width: 48px; text-align: center; font-size: 12px; font-weight: 800; color: var(--ps-muted); }

.ps-ed-body {
  flex: 1; display: grid;
  /* fallback: tools+clip left, canvas, props — workspace-focus overrides */
  grid-template-columns: 56px 260px minmax(0, 1fr) 240px;
  min-height: 0;
  height: calc(100vh - var(--ps-header-h) - var(--ps-editor-chrome));
}

/* Tools rail — sits with library column (right in workspace-focus) */
.ps-tools {
  background: #fff; border-inline-end: 1px solid var(--ps-border);
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  padding: 8px 4px; overflow-y: auto;
}

/* Workspace layout: Left props · Center canvas · Right tools+ClipArt */
body.ps-workspace-focus .ps-ed-body {
  grid-template-columns: 250px minmax(0, 1fr) 56px 300px;
  grid-template-areas: "props stage tools lib";
}
body.ps-workspace-focus .ps-tools {
  grid-area: tools;
  border-inline-end: none;
  border-inline-start: 1px solid var(--ps-border);
  order: 3;
}
body.ps-workspace-focus .ps-panel-left {
  grid-area: lib;
  order: 4;
  border-inline-end: none;
  border-inline-start: 1px solid var(--ps-border);
}
body.ps-workspace-focus .ps-stage-wrap {
  grid-area: stage;
  order: 2;
}
body.ps-workspace-focus .ps-panel-right {
  grid-area: props;
  order: 1;
  border-inline-start: none;
  border-inline-end: 1px solid var(--ps-border);
  display: flex;
}
.ps-tool {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: none; background: transparent; border-radius: 12px;
  padding: 10px 4px; cursor: pointer; color: var(--ps-muted);
}
.ps-tool:hover { background: var(--ps-primary-soft); color: var(--ps-primary); }
.ps-tool.is-active {
  background: linear-gradient(180deg, #ede9fe, #e0e7ff);
  color: var(--ps-primary); font-weight: 800;
  box-shadow: inset 0 0 0 1px #c4b5fd;
}
.ps-tool-ico { font-size: 18px; line-height: 1; }
.ps-tool-label { font-size: 10px; font-weight: 800; }

/* Panels */
.ps-panel {
  background: #fff; overflow: auto;
  border-inline-end: 1px solid var(--ps-border);
  display: flex; flex-direction: column;
}
.ps-panel-right { border-inline-end: none; border-inline-start: 1px solid var(--ps-border); }
.ps-panel-head {
  padding: 14px 14px 8px; position: sticky; top: 0; background: #fff; z-index: 2;
  border-bottom: 1px solid #f1f5f9;
}
.ps-panel-head h2 { margin: 0; font-size: .95rem; font-weight: 900; }
.ps-panel-head-split { display: flex; align-items: center; justify-content: space-between; }
.ps-panel-section { padding: 12px 14px 18px; }
.ps-panel-hint { margin: 0 0 10px; font-size: 12px; color: var(--ps-muted); line-height: 1.55; }
.ps-input, .ps-select {
  width: 100%; min-height: 42px; border-radius: 12px;
  border: 1px solid var(--ps-border); background: #f8fafc;
  padding: 0 12px; color: var(--ps-text);
}
.ps-select { margin-bottom: 10px; font-weight: 700; cursor: pointer; }
.ps-input:focus, .ps-select:focus { outline: 2px solid #c4b5fd; border-color: var(--ps-primary); background: #fff; }
.ps-search-row { margin-bottom: 10px; }
.ps-field-with-lock { position: relative; }
.ps-field-with-lock .ps-num { padding-inline-end: 32px; }
.ps-lock-toggle, .ps-lock-hint {
  position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; cursor: pointer; font-size: 12px; padding: 2px;
  opacity: .7;
}
.ps-lock-toggle.is-on, .ps-lock-hint { opacity: 1; color: var(--ps-primary); }
.ps-lock-hint { cursor: default; }

.ps-cat-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
.ps-chip {
  border: 1px solid var(--ps-border); background: #f8fafc;
  border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700;
  cursor: pointer; color: #4b5563;
}
.ps-chip:hover { border-color: #c4b5fd; color: var(--ps-primary); }
.ps-chip.is-active {
  background: var(--ps-primary); color: #fff; border-color: transparent;
}

.ps-clip-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  min-height: 120px;
}
.ps-clip-card {
  aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--ps-border);
  background: #f8fafc; overflow: hidden; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease, box-shadow .12s ease;
}
.ps-clip-card:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 16px rgba(124,92,252,.2);
  border-color: #c4b5fd;
}
.ps-clip-card img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  background:
    linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
.ps-clip-empty, .ps-clip-err {
  grid-column: 1 / -1; text-align: center; color: var(--ps-muted);
  font-size: 13px; padding: 1rem .5rem;
}

/* shapes / colors / fx */
.ps-shape-grid, .ps-fx-grid, .ps-bg-grid {
  display: grid; gap: 8px; margin-bottom: 12px;
}
.ps-shape-grid { grid-template-columns: repeat(3, 1fr); }
.ps-shape-btn {
  aspect-ratio: 1; border-radius: 14px; border: 1px solid var(--ps-border);
  background: #f8fafc; font-size: 22px; cursor: pointer; color: var(--ps-primary);
}
.ps-shape-btn:hover { background: var(--ps-primary-soft); }
.ps-color-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ps-swatch {
  width: 32px; height: 32px; border-radius: 999px; border: 2px solid #fff;
  box-shadow: 0 0 0 1px #d1d5db; cursor: pointer; padding: 0;
}
.ps-swatch.is-active { box-shadow: 0 0 0 2px var(--ps-primary); }
.ps-fx-grid { grid-template-columns: repeat(2, 1fr); }
.ps-fx-btn {
  border: 1px solid var(--ps-border); background: #f8fafc; border-radius: 12px;
  padding: 12px 8px; font-weight: 800; font-size: 12px; cursor: pointer; color: #374151;
}
.ps-fx-btn:hover, .ps-fx-btn.is-active {
  background: var(--ps-primary-soft); color: var(--ps-primary); border-color: #c4b5fd;
}
.ps-bg-grid { grid-template-columns: repeat(3, 1fr); }
.ps-bg-swatch {
  aspect-ratio: 1.4; border-radius: 12px; border: 2px solid transparent;
  cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.ps-bg-swatch.is-active { border-color: var(--ps-primary); }
.ps-upload-box {
  display: flex; align-items: center; justify-content: center;
  min-height: 120px; border: 2px dashed #c4b5fd; border-radius: 16px;
  background: var(--ps-primary-soft); color: var(--ps-primary);
  font-weight: 800; cursor: pointer;
}
.ps-upload-box:hover { background: #ddd6fe; }
.ps-field-label { display: block; font-size: 12px; font-weight: 800; color: var(--ps-muted); margin: 8px 0 4px; }

/* Stage — large paint-like workspace */
.ps-stage-wrap {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background:
    radial-gradient(circle at 20% 20%, #e0e7ff 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, #fce7f3 0%, transparent 40%),
    #e8ecf8;
}
.ps-stage-scroll {
  flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center;
  padding: 20px 16px 12px;
  min-height: 0;
}
.ps-stage-outer {
  transform: none !important; /* zoom is Fabric viewport — CSS scale breaks drag */
  transform-origin: center center;
  flex-shrink: 0;
}
.ps-stage {
  position: relative;
  width: var(--ps-stage-w); height: var(--ps-stage-h);
  background: #fff; border-radius: 18px;
  box-shadow: 0 20px 50px rgba(99, 102, 241, .18), 0 0 0 1px rgba(0,0,0,.04);
  overflow: hidden; touch-action: none; user-select: none;
}
.ps-stage-fabric {
  /* Fabric owns the canvas; stage is a rounded clip frame */
  line-height: 0;
  width: var(--ps-stage-w);
  height: var(--ps-stage-h);
}
.ps-stage-fabric .canvas-container {
  margin: 0 !important;
  border-radius: 18px;
  overflow: hidden;
}
.ps-stage-fabric canvas {
  border-radius: 18px;
}
.ps-stage-fabric .ps-float-bar {
  z-index: 30;
}
.ps-layer {
  position: absolute; left: 0; top: 0;
  transform-origin: center center;
  cursor: grab; touch-action: none;
}
.ps-layer.is-selected { z-index: 5; }
.ps-layer.is-locked { cursor: not-allowed; outline: 1px dashed #f59e0b; }
.ps-layer:active { cursor: grabbing; }
.ps-layer.is-locked:active { cursor: not-allowed; }

/* Floating action bar above selection (mock) */
.ps-float-bar {
  position: absolute; z-index: 25;
  display: flex; gap: 4px; padding: 4px 6px;
  background: #fff; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(99,102,241,.22), 0 0 0 1px rgba(0,0,0,.06);
  pointer-events: auto;
}
.ps-float-bar[hidden] { display: none !important; }
.ps-float-btn {
  width: 40px; height: 40px; border: none; border-radius: 10px;
  background: transparent; cursor: pointer; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  touch-action: manipulation;
}
@media (max-width: 900px) {
  :root { --ps-stage-w: min(100vw - 24px, 720px); --ps-stage-h: 420px; }
  .ps-float-btn { width: 44px; height: 44px; }
  .ps-stage-scroll { padding: 12px 8px; }
}
.ps-float-btn:hover { background: var(--ps-primary-soft); }
.ps-layer img, .ps-layer .ps-shape-el, .ps-layer .ps-text-el {
  display: block; width: 100%; height: 100%; pointer-events: none;
  object-fit: contain;
}
.ps-layer .ps-shape-el {
  border-radius: 8px;
}
.ps-layer .ps-text-el {
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; text-align: center; line-height: 1.2;
  word-break: break-word; padding: 4px;
}

/* Selection box */
.ps-selection {
  position: absolute; border: 2px dashed var(--ps-primary);
  pointer-events: none; z-index: 20; box-sizing: border-box;
  border-radius: 4px;
}
.ps-selection:not([hidden]) { display: block; }
.ps-handle {
  position: absolute; width: 11px; height: 11px; background: #fff;
  border: 2px solid var(--ps-primary); border-radius: 3px;
  pointer-events: auto; cursor: nwse-resize;
}
.ps-handle.nw { top: -6px; left: -6px; cursor: nwse-resize; }
.ps-handle.ne { top: -6px; right: -6px; cursor: nesw-resize; }
.ps-handle.sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.ps-handle.se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.ps-handle.n { top: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.ps-handle.s { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.ps-handle.e { right: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.ps-handle.w { left: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.ps-handle.rot {
  top: -32px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 22px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; cursor: grab; background: var(--ps-primary); color: #fff; border: none;
}

/* Layer strip */
.ps-layer-strip {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 10px 16px 14px;
  background: rgba(255,255,255,.75);
  border-top: 1px solid var(--ps-border);
  min-height: 78px;
}
.ps-strip-item {
  flex: 0 0 auto; width: 64px; height: 56px;
  border-radius: 12px; border: 2px solid transparent;
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.06);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; padding: 4px; overflow: hidden;
}
.ps-strip-item.is-active { border-color: var(--ps-primary); box-shadow: 0 0 0 2px #ddd6fe; }
.ps-strip-item img { max-width: 100%; max-height: 32px; object-fit: contain; }
.ps-strip-item span {
  font-size: 9px; font-weight: 800; color: var(--ps-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  margin-top: 2px;
}
.ps-strip-item.is-bg { background: linear-gradient(135deg, #dbeafe, #fef3c7); }
.ps-strip-item.is-add {
  border-style: dashed; border-color: #c4b5fd; color: var(--ps-primary);
  font-size: 22px; font-weight: 900; background: var(--ps-primary-soft);
}
.ps-strip-item.is-locked::after {
  content: "🔒"; font-size: 9px; position: absolute; top: 2px; inset-inline-end: 2px;
}
.ps-strip-item { position: relative; }
.ps-project-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ps-project-card {
  display: flex; flex-direction: column; gap: 4px; text-align: start;
  padding: 12px; border-radius: 14px; border: 1px solid var(--ps-border);
  background: #f8fafc; cursor: pointer; font-weight: 700; font-size: 13px;
}
.ps-project-card:hover { border-color: #c4b5fd; background: var(--ps-primary-soft); }
.ps-project-card small { color: var(--ps-muted); font-weight: 600; font-size: 11px; }
.ps-project-actions { display: flex; gap: 6px; margin-top: 4px; }
.ps-project-actions button {
  flex: 1; border: 1px solid var(--ps-border); background: #fff; border-radius: 8px;
  padding: 6px; font-size: 11px; font-weight: 800; cursor: pointer;
}

/* Right props */
.ps-props { padding: 12px 14px 20px; }
.ps-fieldset {
  border: 1px solid var(--ps-border); border-radius: 14px;
  padding: 10px 12px 12px; margin: 0 0 12px;
}
.ps-fieldset legend {
  padding: 0 6px; font-size: 12px; font-weight: 900; color: var(--ps-primary);
}
.ps-field-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px;
}
.ps-field-grid label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; color: var(--ps-muted);
}
.ps-num {
  width: 100%; min-height: 36px; border-radius: 10px;
  border: 1px solid var(--ps-border); padding: 0 8px; background: #f8fafc;
}
.ps-slider-label {
  display: flex; justify-content: space-between; font-size: 12px; font-weight: 800;
  color: var(--ps-muted); margin-bottom: 4px;
}
input[type="range"] {
  width: 100%; accent-color: var(--ps-primary); margin-bottom: 8px;
}
.ps-order-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 6px; font-size: 12px; font-weight: 800; color: var(--ps-muted);
}
.ps-order-btns { display: flex; gap: 4px; }
.ps-fx-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ps-fx-mini-btn {
  border: 1px solid var(--ps-border); background: #f8fafc; border-radius: 10px;
  min-height: 40px; cursor: pointer; font-size: 14px;
}
.ps-fx-mini-btn:hover, .ps-fx-mini-btn.is-active {
  background: var(--ps-primary-soft); border-color: #c4b5fd;
}
.ps-empty-props {
  text-align: center; color: var(--ps-muted); font-size: 13px; padding: 1rem;
}
.ps-empty-props.is-hidden { display: none; }
.ps-layer-list { display: flex; flex-direction: column; gap: 6px; }
.ps-layer-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px; border-radius: 12px; border: 1px solid var(--ps-border);
  background: #f8fafc; cursor: pointer; font-size: 12px; font-weight: 700;
}
.ps-layer-row.is-active { border-color: var(--ps-primary); background: var(--ps-primary-soft); }
.ps-layer-row img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; background: #fff; }

/* Toast */
.ps-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #1e1b4b; color: #fff; padding: 12px 20px; border-radius: 999px;
  font-weight: 800; font-size: 13px; z-index: 100;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

/* Responsive */
@media (max-width: 1100px) {
  body.ps-workspace-focus .ps-ed-body,
  .ps-ed-body {
    grid-template-columns: 56px minmax(0, 1fr) 260px;
    grid-template-areas: none;
  }
  body.ps-workspace-focus .ps-tools,
  body.ps-workspace-focus .ps-panel-left,
  body.ps-workspace-focus .ps-stage-wrap,
  body.ps-workspace-focus .ps-panel-right {
    grid-area: auto;
    order: initial;
  }
  .ps-panel-right { display: none; }
  .ps-panel-right.is-open {
    display: flex; position: fixed; top: 54px; bottom: 0; inset-inline-end: 0;
    width: min(300px, 90vw); z-index: 40; box-shadow: -8px 0 30px rgba(0,0,0,.12);
  }
}
@media (max-width: 800px) {
  .ps-hero { grid-template-columns: 1fr; }
  .ps-hero-deco { display: none; }
  .ps-nav { display: none; }
  body.ps-page-mock .ps-editor-card {
    height: auto;
    min-height: 0;
  }
  body.ps-page-mock .ps-ed-body,
  .ps-ed-body {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 70vh;
  }
  .ps-tools {
    flex-direction: row; overflow-x: auto; border-inline-end: none;
    border-bottom: 1px solid var(--ps-border);
  }
  .ps-tool { min-width: 64px; }
  .ps-panel-left {
    max-height: 240px; border-inline-end: none; border-bottom: 1px solid var(--ps-border);
  }
  .ps-stage-wrap { min-height: 480px; }
  :root { --ps-stage-w: 1080px; --ps-stage-h: 720px; }
}
@media (min-width: 1400px) {
  body.ps-workspace-focus .ps-ed-body {
    grid-template-columns: 280px minmax(0, 1fr) 56px 320px;
  }
}
@media (max-width: 520px) {
  .ps-ed-top-center { order: 3; width: 100%; justify-content: center; }
  .ps-clip-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Completion wave v1 extras ===== */
.ps-top-sep {
  width: 1px; height: 22px; background: var(--ps-border); margin: 0 4px;
}
.ps-grid-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; color: var(--ps-muted);
  background: #f8fafc; border: 1px solid var(--ps-border);
  border-radius: 999px; padding: 6px 10px; cursor: pointer; user-select: none;
}
.ps-grid-toggle input { accent-color: var(--ps-primary); }
.ps-btn-ai {
  background: #f5f3ff; color: #6d28d9; border: 1px solid #c4b5fd;
  opacity: 1; cursor: pointer;
}
.ps-btn-ai:hover { background: #ede9fe; }
.ps-btn-ai:disabled { opacity: .55; cursor: not-allowed; }
.ps-ai-fieldset { background: #faf5ff; }
.ps-check-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800; color: #374151; margin: 8px 0;
}
.ps-check-row input { width: 16px; height: 16px; accent-color: var(--ps-primary); }

/* Transparent canvas checkerboard */
.ps-stage.is-transparent-bg {
  background:
    linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
    linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
    linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-color: #fff;
}
.ps-grid-overlay {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(124,92,252,.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(124,92,252,.12) 1px, transparent 1px);
  background-size: 24px 24px;
  border-radius: 18px;
}
.ps-grid-overlay[hidden] { display: none !important; }

/* Templates */
.ps-templates {
  max-width: 1200px; margin: 0 auto; padding: 0 1.25rem 1.5rem;
}
.ps-section-head { text-align: center; margin-bottom: 1rem; }
.ps-section-head h2 { margin: 0 0 .35rem; font-size: 1.25rem; font-weight: 900; }
.ps-section-head p { margin: 0; color: var(--ps-muted); font-size: 14px; }
.ps-template-grid, .ps-template-list {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.ps-template-list { grid-template-columns: 1fr; }
.ps-template-card {
  background: #fff; border: 1px solid var(--ps-border); border-radius: 18px;
  padding: 1rem .9rem; text-align: center;
  box-shadow: 0 8px 24px rgba(99,102,241,.08);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.ps-template-card h3 { margin: 0; font-size: .95rem; }
.ps-template-card p { margin: 0 0 6px; font-size: 12px; color: var(--ps-muted); line-height: 1.45; min-height: 2.6em; }
.ps-template-ico { font-size: 1.8rem; }

/* Layer bar */
.ps-layer-bar {
  border-top: 1px solid var(--ps-border);
  background: rgba(255,255,255,.92);
}
.ps-layer-bar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px 0; font-size: 12px;
}
.ps-layer-bar-head strong { font-weight: 900; color: var(--ps-primary); }
.ps-layer-bar-hint { color: var(--ps-muted); font-weight: 700; }
.ps-strip-item {
  width: auto; min-width: 72px; height: auto; min-height: 72px;
  padding: 6px 8px 8px;
}
.ps-strip-actions {
  display: flex; gap: 2px; margin-top: 4px;
}
.ps-strip-act {
  border: none; background: #f1f5f9; border-radius: 6px;
  width: 22px; height: 20px; font-size: 10px; cursor: pointer; padding: 0;
}
.ps-strip-act:hover { background: var(--ps-primary-soft); }
.ps-strip-item.is-hidden-layer { opacity: .45; }
.ps-strip-swatch {
  display: block; width: 28px; height: 18px; border-radius: 4px;
}
.ps-empty-props.is-hidden { display: none; }

/* Clip drag affordance */
.ps-clip-card[draggable="true"] { cursor: grab; }
.ps-clip-card[draggable="true"]:active { cursor: grabbing; }

@media (max-width: 800px) {
  .ps-template-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== UX polish wave ===== */
.ps-ed-top-float {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 12px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}
.ps-icon-toolbar {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff; border: 1px solid var(--ps-border);
  border-radius: 14px; padding: 4px 6px;
  box-shadow: 0 4px 14px rgba(99,102,241,.08);
}
.ps-zoom-bar span { min-width: 44px; text-align: center; font-size: 12px; font-weight: 800; color: var(--ps-muted); }
.ps-canvas-bg-select {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ps-canvas-bg-select .ps-field-label { margin: 0; white-space: nowrap; }
.ps-select-sm { min-height: 36px; width: auto; min-width: 140px; }
.ps-obj-toolbar {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 6px 10px; border-bottom: 1px solid var(--ps-border);
  background: #faf5ff;
}
.ps-obj-toolbar[hidden] { display: none !important; }

.ps-empty-canvas {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 24px;
  pointer-events: none;
  background: rgba(255,255,255,.55);
}
.ps-empty-canvas.hidden { display: none !important; }
.ps-empty-canvas p { margin: 0; font-weight: 900; color: var(--ps-primary); pointer-events: none; }
.ps-empty-canvas .ps-panel-hint { font-weight: 600; max-width: 280px; }
.ps-empty-canvas .ps-btn { pointer-events: auto; }

.ps-guides {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
}
.ps-guide-v, .ps-guide-h {
  position: absolute; background: #f472b6;
  box-shadow: 0 0 0 1px rgba(255,255,255,.8);
  opacity: 0; transition: opacity .08s ease;
}
.ps-guide-v { top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); }
.ps-guide-h { left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); }

.ps-clip-tabs, .ps-template-tabs {
  display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap;
}
.ps-clip-tab, .ps-tmpl-tab {
  border: 1px solid var(--ps-border); background: #f8fafc;
  border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 800;
  cursor: pointer; color: #4b5563;
}
.ps-clip-tab.is-active, .ps-tmpl-tab.is-active {
  background: var(--ps-primary); color: #fff; border-color: transparent;
}
.ps-clip-card-wrap { position: relative; }
.ps-fav-btn {
  position: absolute; top: 4px; inset-inline-end: 4px;
  width: 26px; height: 26px; border-radius: 999px; border: none;
  background: rgba(255,255,255,.92); color: #cbd5e1; font-size: 14px;
  cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.12); line-height: 1;
}
.ps-fav-btn.is-on { color: #f59e0b; }
.ps-clip-grid { align-items: start; }
.ps-project-preview {
  width: 100%; height: 72px; object-fit: cover; border-radius: 10px;
  background: #f1f5f9; margin-bottom: 4px;
}

@media (max-width: 900px) {
  .ps-ed-top-float { justify-content: center; }
  .ps-canvas-bg-select { width: 100%; justify-content: center; }
}

/* MFT Audio panel (Creative Studio integration) */
.ps-audio-list { display:flex; flex-direction:column; gap:0.4rem; max-height:280px; overflow:auto; margin:0.5rem 0; }
.ps-audio-row { display:flex; justify-content:space-between; gap:0.5rem; align-items:center; padding:0.45rem 0.5rem; border:1px solid rgba(148,163,184,.2); border-radius:10px; background:rgba(15,23,42,.35); }
.ps-audio-row strong { font-size:0.85rem; }
.ps-audio-row small { color:#94a3b8; font-size:0.72rem; }
.ps-audio-row-actions { display:flex; gap:0.25rem; flex:0 0 auto; }
.ps-audio-timeline { margin-top:0.75rem; padding-top:0.65rem; border-top:1px dashed rgba(148,163,184,.25); }
.ps-audio-layer { font-size:0.78rem; color:#cbd5e1; margin:0.2rem 0; }
.ps-audio-clips { list-style:none; margin:0.4rem 0 0; padding:0; display:flex; flex-direction:column; gap:0.3rem; }
.ps-audio-clips li { font-size:0.78rem; display:flex; flex-wrap:wrap; gap:0.35rem; align-items:center; padding:0.35rem 0.4rem; border-radius:8px; background:rgba(34,211,238,.08); }
.ps-audio-empty { color:#94a3b8; font-size:0.78rem; }


/* =========================================================
   CANVAS-FIRST LAYOUT (2026-08-02)
   Principle: canvas dominates; chrome is slim & secondary.
   ========================================================= */
body.ps-canvas-first {
  --ps-header-h: 48px;
  --ps-editor-chrome: 48px;
  --ps-stage-w: min(96vw, 1280px);
  --ps-stage-h: min(72vh, 820px);
  --ps-left-rail: 52px;
  --ps-left-lib: 220px;
  --ps-right-props: 200px;
}
body.ps-canvas-first .ps-top-compact {
  padding: 6px 12px;
  min-height: var(--ps-header-h);
  gap: 8px;
}
body.ps-canvas-first .ps-brand img { width: 32px; height: 32px; }
body.ps-canvas-first .ps-brand strong { font-size: 0.85rem; line-height: 1.2; }
body.ps-canvas-first .ps-brand small { font-size: 10px; }
body.ps-canvas-first .ps-nav-link { padding: 5px 10px; font-size: 12px; }
body.ps-canvas-first .ps-btn-sm { padding: 6px 12px; font-size: 12px; min-height: 32px; }

/* Hide marketing chrome */
body.ps-canvas-first .ps-landing-collapsed,
body.ps-canvas-first #ps-landing,
body.ps-canvas-first #ps-value { display: none !important; }

/* Template strip compact / collapsible */
body.ps-canvas-first .ps-templates-strip {
  max-width: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--ps-border);
  background: #fafbff;
}
body.ps-canvas-first .ps-templates-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 12px;
  min-height: 40px;
}
body.ps-canvas-first .ps-templates-hint {
  font-size: 11px;
  color: var(--ps-muted);
  font-weight: 700;
  margin-inline-start: auto;
}
body.ps-canvas-first .ps-templates-body {
  padding: 0 12px 8px;
  overflow-x: auto;
}
body.ps-canvas-first .ps-template-strip-grid {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  grid-template-columns: none !important;
}
body.ps-canvas-first .ps-template-strip-grid .ps-template-card {
  flex: 0 0 auto;
  width: 120px;
  min-height: 0;
  padding: 8px 6px;
  border-radius: 12px;
}
body.ps-canvas-first .ps-template-strip-grid .ps-template-card h3 { font-size: 0.78rem; }
body.ps-canvas-first .ps-template-strip-grid .ps-template-card p {
  display: none; /* less noise */
}
body.ps-canvas-first .ps-template-strip-grid .ps-template-ico { font-size: 1.25rem; }
body.ps-canvas-first .ps-templates-strip.is-collapsed .ps-templates-body { display: none !important; }

/* Editor fills remaining viewport */
body.ps-canvas-first.ps-page-mock .ps-editor-card,
body.ps-canvas-first .ps-editor-fill {
  min-height: calc(100vh - var(--ps-header-h) - 42px);
  height: calc(100vh - var(--ps-header-h) - 42px);
  max-height: calc(100vh - var(--ps-header-h) - 42px);
}
body.ps-canvas-first .ps-templates-strip:not(.is-collapsed) ~ .ps-editor-fill,
body.ps-canvas-first.ps-page-mock .ps-templates-strip:not(.is-collapsed) ~ .ps-editor-card {
  min-height: calc(100vh - var(--ps-header-h) - 120px);
  height: calc(100vh - var(--ps-header-h) - 120px);
  max-height: calc(100vh - var(--ps-header-h) - 120px);
}

/* Single compact toolbar */
body.ps-canvas-first .ps-ed-top-compact {
  flex-wrap: nowrap;
  gap: 6px;
  padding: 4px 8px;
  min-height: 44px;
  overflow-x: auto;
  background: #fff;
  border-bottom: 1px solid var(--ps-border);
}
body.ps-canvas-first .ps-icon-toolbar {
  padding: 2px 4px;
  border-radius: 10px;
  box-shadow: none;
  gap: 2px;
}
body.ps-canvas-first .ps-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 14px;
}
body.ps-canvas-first .ps-select-sm {
  min-height: 32px;
  min-width: 100px;
  font-size: 12px;
  padding: 0 8px;
}
body.ps-canvas-first .ps-compact-select .ps-field-label { display: none; }
body.ps-canvas-first .ps-grid-toggle-icon {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  margin: 0;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid var(--ps-border);
  background: #fff;
  cursor: pointer;
}
body.ps-canvas-first .ps-grid-toggle-icon span:not([aria-hidden]) { display: none; }
body.ps-canvas-first .ps-grid-toggle-icon input { margin: 0; }

/* More menu (AI secondary) */
body.ps-canvas-first .ps-more-menu { position: relative; }
body.ps-canvas-first .ps-more-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-end: 0;
  z-index: 50;
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--ps-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.ps-canvas-first .ps-more-dropdown[hidden] { display: none !important; }
body.ps-canvas-first .ps-more-item {
  border: 0;
  background: transparent;
  text-align: start;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ps-text);
}
body.ps-canvas-first .ps-more-item:hover { background: var(--ps-primary-soft); color: var(--ps-primary); }

/* Object toolbar merged into top — no second tall bar */
body.ps-canvas-first .ps-obj-toolbar:not(.ps-icon-toolbar) { display: none !important; }

/* Workspace grid: slim tools | dense clipart | DOMINANT canvas | slim props */
body.ps-canvas-first.ps-page-mock .ps-ed-body,
body.ps-canvas-first.ps-workspace-focus .ps-ed-body {
  grid-template-columns: var(--ps-right-props) minmax(0, 1fr) var(--ps-left-rail) var(--ps-left-lib) !important;
  grid-template-areas: "props stage tools lib" !important;
  height: 100%;
  min-height: 0;
}
body.ps-canvas-first .ps-tools {
  width: var(--ps-left-rail);
  padding: 4px 2px;
  gap: 1px;
}
body.ps-canvas-first .ps-tool {
  padding: 8px 2px;
  border-radius: 10px;
  min-height: 44px;
}
body.ps-canvas-first .ps-tool-ico { font-size: 16px; }
body.ps-canvas-first .ps-tool-label {
  font-size: 9px;
  max-width: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ClipArt denser */
body.ps-canvas-first .ps-panel-left {
  width: auto;
  max-width: var(--ps-left-lib);
}
body.ps-canvas-first .ps-panel-head {
  padding: 8px 10px 6px;
}
body.ps-canvas-first .ps-panel-head h2 { font-size: 0.8rem; }
body.ps-canvas-first .ps-panel-section { padding: 8px 10px 12px; }
body.ps-canvas-first .ps-panel-hint { font-size: 11px; margin-bottom: 6px; }
body.ps-canvas-first .ps-clip-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
}
body.ps-canvas-first .ps-clip-card {
  border-radius: 10px;
  padding: 4px;
}
body.ps-canvas-first .ps-clip-card img {
  aspect-ratio: 1;
  max-height: 72px;
  object-fit: contain;
}
body.ps-canvas-first .ps-cat-chips {
  max-height: 72px;
  overflow: auto;
  gap: 4px;
  margin-bottom: 6px;
}
body.ps-canvas-first .ps-input,
body.ps-canvas-first .ps-select {
  min-height: 36px;
  border-radius: 10px;
  font-size: 12px;
}

/* RIGHT props slim */
body.ps-canvas-first .ps-panel-right {
  max-width: var(--ps-right-props);
}
body.ps-canvas-first .ps-fieldset {
  margin: 0 0 8px;
  padding: 8px;
  border-radius: 10px;
}
body.ps-canvas-first .ps-fieldset legend { font-size: 11px; padding: 0 4px; }
body.ps-canvas-first .ps-field-grid { gap: 4px; }
body.ps-canvas-first .ps-num { min-height: 32px; font-size: 12px; }

/* CANVAS DOMINATES */
body.ps-canvas-first .ps-stage-wrap {
  background:
    radial-gradient(ellipse at 50% 40%, #f8fafc 0%, transparent 55%),
    linear-gradient(180deg, #eef2ff 0%, #e8ecf8 100%);
  min-height: 0;
}
body.ps-canvas-first .ps-stage-scroll {
  flex: 1 1 auto;
  padding: 16px 12px 8px;
  min-height: 0;
  align-items: center;
  justify-content: center;
}
body.ps-canvas-first .ps-stage,
body.ps-canvas-first .ps-stage-fabric {
  width: var(--ps-stage-w);
  height: var(--ps-stage-h);
  max-width: 100%;
  box-shadow:
    0 24px 60px rgba(79, 70, 229, 0.16),
    0 0 0 1px rgba(15, 23, 42, 0.06),
    0 0 0 10px rgba(255, 255, 255, 0.45);
}
body.ps-canvas-first .ps-layer-bar-compact {
  min-height: 56px;
  max-height: 72px;
}
body.ps-canvas-first .ps-layer-bar-head {
  padding: 4px 12px 0;
  font-size: 11px;
}
body.ps-canvas-first .ps-layer-bar-hint { display: none; }
body.ps-canvas-first .ps-strip-item {
  min-width: 56px;
  min-height: 56px;
}

/* Numeric sliders always LTR (left=min, right=max) */
body.ps-canvas-first input[type="range"].ps-range-ltr,
body.ps-canvas-first input[type="range"] {
  direction: ltr !important;
  writing-mode: horizontal-tb !important;
  width: 100%;
}

/* Tablet / touch */
@media (max-width: 1100px) {
  body.ps-canvas-first {
    --ps-left-lib: 200px;
    --ps-right-props: 180px;
    --ps-stage-h: min(62vh, 640px);
  }
}
@media (max-width: 900px) {
  body.ps-canvas-first {
    --ps-stage-w: min(100vw - 16px, 900px);
    --ps-stage-h: min(48vh, 480px);
  }
  body.ps-canvas-first.ps-workspace-focus .ps-ed-body,
  body.ps-canvas-first.ps-page-mock .ps-ed-body {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "stage"
      "tools"
      "lib"
      "props" !important;
    overflow: auto;
  }
  body.ps-canvas-first .ps-tools {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    border: none;
    border-bottom: 1px solid var(--ps-border);
  }
  body.ps-canvas-first .ps-panel-left,
  body.ps-canvas-first .ps-panel-right {
    max-width: none;
    max-height: 220px;
  }
  body.ps-canvas-first .ps-tool-label { display: none; }
  body.ps-canvas-first .ps-icon-btn { width: 40px; height: 40px; }
  body.ps-canvas-first.ps-page-mock .ps-editor-card,
  body.ps-canvas-first .ps-editor-fill {
    height: auto;
    max-height: none;
    min-height: calc(100vh - var(--ps-header-h) - 40px);
  }
}

/* Empty props calm */
body.ps-canvas-first .ps-empty-props {
  font-size: 12px;
  color: var(--ps-muted);
  text-align: center;
  padding: 12px 8px;
}


/* =========================================================
   MOBILE / TABLET APP SHELL — Creative Studio
   Breakpoints: mobile <768 | tablet 768-1199 | desktop >=1200
   ========================================================= */
.ps-mob-only { display: none !important; }
.ps-desk-only { display: inline-flex; }
.ps-mob-dock { display: none; }
.ps-mob-scrim {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}
.ps-mob-scrim[hidden] { display: none !important; }

/* LTR numeric ranges globally in studio */
body.ps-body input[type="range"] {
  direction: ltr !important;
  writing-mode: horizontal-tb !important;
}

/* ---- Tablet 768–1199 ---- */
@media (min-width: 768px) and (max-width: 1199.98px) {
  body.ps-canvas-first {
    --ps-left-lib: 200px;
    --ps-right-props: 180px;
    --ps-stage-h: min(58vh, 620px);
  }
  body.ps-canvas-first .ps-tool-label { font-size: 8px; }
  body.ps-canvas-first .ps-clip-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ---- Mobile <768 ---- */
@media (max-width: 767.98px) {
  body.ps-canvas-first {
    --ps-header-h: 48px;
    --ps-stage-w: min(100vw - 12px, 720px);
    --ps-stage-h: min(58dvh, 520px);
  }
  .ps-mob-only { display: inline-flex !important; }
  .ps-desk-only { display: none !important; }
  body.ps-canvas-first .ps-nav { display: none !important; }
  body.ps-canvas-first .ps-top-compact { padding: 6px 10px; }
  body.ps-canvas-first .ps-brand small { display: none; }

  /* Templates: tiny icon strip */
  body.ps-canvas-first .ps-templates-strip {
    position: relative;
    z-index: 5;
  }
  body.ps-canvas-first .ps-templates-bar {
    padding: 4px 8px;
    min-height: 36px;
    gap: 6px;
  }
  body.ps-canvas-first .ps-templates-hint { display: none; }
  body.ps-canvas-first .ps-template-tabs { display: none; }
  body.ps-canvas-first .ps-template-strip-grid .ps-template-card {
    width: 64px;
    padding: 6px 4px;
  }
  body.ps-canvas-first .ps-template-strip-grid .ps-template-card h3 {
    font-size: 0.62rem;
    line-height: 1.15;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  body.ps-canvas-first .ps-template-strip-grid .ps-template-ico { font-size: 1.1rem; }

  /* Hide desktop multi-toolbar on mobile; use dock */
  body.ps-canvas-first .ps-ed-top-compact {
    display: none !important;
  }
  body.ps-canvas-first .ps-layer-bar {
    display: none !important;
  }

  /* Editor fills phone; canvas center */
  body.ps-canvas-first.ps-page-mock .ps-editor-card,
  body.ps-canvas-first .ps-editor-fill {
    height: calc(100dvh - var(--ps-header-h) - 36px - 64px - env(safe-area-inset-bottom, 0px));
    min-height: 0;
    max-height: none;
  }
  body.ps-canvas-first .ps-templates-strip:not(.is-collapsed) ~ .ps-editor-fill,
  body.ps-canvas-first.ps-page-mock .ps-templates-strip:not(.is-collapsed) ~ .ps-editor-card {
    height: calc(100dvh - var(--ps-header-h) - 100px - 64px - env(safe-area-inset-bottom, 0px));
  }

  body.ps-canvas-first.ps-workspace-focus .ps-ed-body,
  body.ps-canvas-first.ps-page-mock .ps-ed-body {
    display: block !important;
    height: 100%;
    position: relative;
    overflow: hidden;
  }

  /* Canvas is only permanent pane */
  body.ps-canvas-first .ps-stage-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
    min-height: 0 !important;
  }
  body.ps-canvas-first .ps-stage-scroll {
    padding: 8px 6px;
    height: 100%;
  }
  body.ps-canvas-first .ps-stage,
  body.ps-canvas-first .ps-stage-fabric {
    width: var(--ps-stage-w);
    height: var(--ps-stage-h);
    max-height: calc(100% - 8px);
    border-radius: 14px;
  }

  /* Tools + panels as drawers — not permanent */
  body.ps-canvas-first .ps-tools {
    position: fixed;
    top: var(--ps-header-h);
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    inset-inline-start: 0;
    z-index: 60;
    width: 64px;
    flex-direction: column;
    transform: translateX(-110%);
    transition: transform .22s ease;
    border: none;
    box-shadow: 8px 0 28px rgba(0,0,0,.15);
    background: #fff;
  }
  body.ps-mob-lib-open .ps-tools {
    transform: translateX(0);
  }
  html[dir="rtl"] body.ps-canvas-first .ps-tools {
    transform: translateX(110%);
  }
  html[dir="rtl"] body.ps-mob-lib-open .ps-tools {
    transform: translateX(0);
  }

  body.ps-canvas-first .ps-panel-left {
    position: fixed;
    top: var(--ps-header-h);
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    inset-inline-start: 64px;
    z-index: 60;
    width: min(78vw, 300px);
    max-width: none;
    max-height: none;
    transform: translateX(-120%);
    transition: transform .22s ease;
    box-shadow: 8px 0 32px rgba(0,0,0,.18);
    border: none;
  }
  body.ps-mob-lib-open .ps-panel-left {
    transform: translateX(0);
  }
  html[dir="rtl"] body.ps-canvas-first .ps-panel-left {
    inset-inline-start: auto;
    inset-inline-end: 64px;
    transform: translateX(120%);
  }
  html[dir="rtl"] body.ps-mob-lib-open .ps-panel-left {
    transform: translateX(0);
  }

  /* Properties = bottom sheet */
  body.ps-canvas-first .ps-panel-right {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 62;
    width: 100% !important;
    max-width: none !important;
    max-height: min(48dvh, 380px);
    border-radius: 18px 18px 0 0;
    transform: translateY(110%);
    transition: transform .24s ease;
    box-shadow: 0 -12px 40px rgba(0,0,0,.2);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border: none;
  }
  body.ps-mob-props-open .ps-panel-right {
    transform: translateY(0);
  }
  body.ps-canvas-first .ps-panel-right .ps-panel-head h2 {
    font-size: 0.9rem;
  }

  /* Bottom dock */
  .ps-mob-dock {
    display: flex;
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 50;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.96);
    border-top: 1px solid var(--ps-border);
    backdrop-filter: blur(10px);
    justify-content: space-around;
    align-items: flex-start;
    gap: 2px;
  }
  .ps-mob-dock-btn {
    flex: 1;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: transparent;
    border-radius: 12px;
    font-size: 18px;
    cursor: pointer;
    color: #334155;
  }
  .ps-mob-dock-btn:active,
  .ps-mob-dock-btn:hover {
    background: var(--ps-primary-soft);
    color: var(--ps-primary);
  }

  /* Toast above dock */
  body.ps-canvas-first .ps-toast {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  /* Denser clipart */
  body.ps-canvas-first .ps-clip-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  body.ps-canvas-first .ps-tool-label { display: none; }
  body.ps-canvas-first .ps-tool { min-height: 48px; min-width: 48px; }
}

/* Desktop restore dock hidden */
@media (min-width: 768px) {
  .ps-mob-dock { display: none !important; }
  body.ps-canvas-first .ps-ed-top-compact { display: flex !important; }
}