/* SkyDesign Studio — designer stylesheet
   Enterprise dark chrome: near-black rails and panels with a single
   confident blue accent, so the artwork — not the tool — holds focus.
   The canvas stage alone stays a light neutral so page colour reads true. */

:root {
  --st-bg: #0c0e13;
  --st-bg-raise: #181b22;
  --st-bg-panel: #181b22;
  --st-canvas-bg: #e7e9ee;
  --st-border: rgba(255,255,255,0.03);
  --st-border-lite: rgba(255,255,255,0.04);
  --st-text: #f2f4f8;
  --st-text-dim: #9aa1af;
  --st-text-faint: #656c79;
  --st-gold: #2455ff;
  --st-gold-soft: rgba(36,85,255,0.18);
  --st-danger: #ef5350;
  --st-ok: #34d399;
  --st-warn: #f5a524;
  --st-scroll: #7fb2ff;
  --st-scroll-hover: #a9ccff;
  --st-radius: 12px;
  --st-radius-lg: 18px;
  --st-shadow-pop: 0 24px 60px rgba(0,0,0,0.5);
  --st-glass: rgba(19,21,27,0.94);
  --st-glass-strong: rgba(23,26,33,0.98);
  --st-glass-shadow: 0 16px 40px rgba(0,0,0,0.35);
  --st-font: "Outfit", "Segoe UI", sans-serif;
  --st-font-display: "Fraunces", Georgia, serif;
}

/* The hidden attribute must always win over component display rules. */
.studio [hidden] { display: none !important; }

.studio-body {
  margin: 0;
  background: var(--st-bg);
  color: var(--st-text);
  font-family: var(--st-font);
  overflow: hidden;
}
.studio-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 88% -8%, rgba(36,85,255,0.16), transparent 42%),
    radial-gradient(circle at 4% 96%, rgba(66,215,255,0.1), transparent 38%);
}
.studio-body ::selection { background: var(--st-gold-soft); }

.studio {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  padding: 10px;
  gap: 8px;
}

/* ============================ TOP BAR ============================ */
.studio-topbar {
  /* backdrop-filter makes this a stacking context, so the export menu's own
     z-index is trapped inside it. The bar itself must outrank .studio-main
     or the menu paints behind the panels. Grid items take z-index without
     needing position. */
  z-index: 60;
  display: flex;
  justify-content: space-between;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0.75rem;
  border: 1px solid var(--st-border-lite);
  border-radius: 999px;
  background: var(--st-glass);
  box-shadow: var(--st-glass-shadow);
  /* No backdrop-filter: this bar now hosts the context rail, and a filtered
     element becomes the containing block for its position:fixed descendants —
     which shifted every popover by the studio's padding. The background is
     94% opaque anyway, so the blur was doing almost nothing. */
}
.topbar-left, .topbar-center, .topbar-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.studio-topbar { flex-wrap: nowrap; min-height: 64px; }
.topbar-left { flex: 0 1 auto; overflow: hidden; }
.topbar-center, .topbar-right { flex: 0 0 auto; }
.topbar-doc { max-width: none; }
.studio-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--st-text);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* The studio is injected into shop.html, so it inherits that page's
   stylesheets too — but the mark is sized here, in the studio's own sheet,
   so the topbar cannot blow out if that load order ever changes. */
.studio-brand-logo { width: 28px; height: 28px; flex: none; object-fit: cover; border-radius: 7px; }
.studio-brand svg { color: var(--st-text-dim); }
.studio-brand:hover svg { color: var(--st-gold); }
.studio-brand em {
  font-family: var(--st-font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--st-gold);
}
.topbar-doc {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-left: 0.9rem;
  border-left: 1px solid var(--st-border);
  line-height: 1.25;
}
.topbar-doc strong {
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-doc span { font-size: 0.72rem; color: var(--st-text-dim); white-space: nowrap; }

.tb-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: var(--st-text);
  cursor: pointer;
}
.tb-icon svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.tb-icon:hover:not(:disabled) { background: rgba(255,255,255,0.11); border-color: var(--st-border-lite); }
.tb-icon:disabled { color: var(--st-text-faint); cursor: default; }
.tb-sep { width: 1px; height: 22px; background: var(--st-border-lite); }
.tb-note { font-size: 0.72rem; color: var(--st-text-faint); white-space: nowrap; }

.tb-price {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--st-gold);
  white-space: nowrap;
}
.tb-btn {
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--st-border-lite);
  background: rgba(255,255,255,0.07);
  color: var(--st-text);
  font: 600 0.85rem var(--st-font);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09);
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease;
}
.tb-btn:hover { transform: translateY(-1px); border-color: rgba(36,85,255,0.52); background: rgba(255,255,255,0.11); }
.tb-btn.primary {
  background: linear-gradient(180deg, rgba(57,112,255,0.98), rgba(36,85,255,0.88));
  border-color: rgba(255,255,255,0.11);
  color: #fff;
  box-shadow: 0 14px 32px rgba(36,85,255,0.24), inset 0 1px 0 rgba(255,255,255,0.13);
}
.tb-btn.primary:hover { filter: brightness(1.08); }

.tb-menu-wrap { position: relative; }
.tb-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 230px;
  padding: 0.4rem;
  border: 1px solid var(--st-border-lite);
  border-radius: var(--st-radius-lg);
  background: var(--st-glass-strong);
  box-shadow: var(--st-shadow-pop);
  backdrop-filter: blur(26px) saturate(1.35);
  -webkit-backdrop-filter: blur(26px) saturate(1.35);
}
.tb-menu button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: var(--st-radius);
  background: transparent;
  color: var(--st-text);
  font: 600 0.85rem var(--st-font);
  text-align: left;
  cursor: pointer;
}
.tb-menu button:hover { background: var(--st-gold-soft); }
.tb-menu small { color: var(--st-text-dim); font-weight: 400; font-size: 0.72rem; }

/* ========================= CONTEXT BAR ========================= */
/* The context rail lives inside the header and takes whatever width is left
   between the document title and the actions. It may scroll horizontally —
   safe now only because the popovers are positioned against the viewport by
   placePopover() rather than being absolute children of this box. */
/* Its own row, and it WRAPS rather than scrolls. Hosting this inside the
   header forced horizontal scrolling, which quietly hid Fill / Border /
   Corners and half the arrange controls behind a scrollbar nobody finds.
   Wrapping keeps every control for the current selection on screen. */
.context-bar {
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--st-border-lite);
  border-radius: 999px;
  background: var(--st-glass);
  box-shadow: var(--st-glass-shadow);
  flex-wrap: wrap;
  row-gap: 0.3rem;
  overflow: visible;
  min-height: 54px;
}
/* Hide the divider when nothing is selected and the rail is empty. */
.studio-topbar > .context-bar[hidden] { display: none !important; }
/* The save-state note is the first thing to go when controls need the room. */
.studio-topbar:has(.context-bar:not([hidden])) .tb-note { display: none; }
.ctx-group { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }

.ctx-icon, .ctx-chip, .ctx-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: var(--st-text);
  font: 600 0.82rem var(--st-font);
  cursor: pointer;
  white-space: nowrap;
}
.ctx-icon { width: 34px; }
.ctx-chip, .ctx-select { padding: 0 0.65rem; }
.ctx-icon svg, .ctx-chip svg, .ctx-select svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.ctx-icon:hover, .ctx-chip:hover, .ctx-select:hover { background: rgba(255,255,255,0.11); border-color: var(--st-border-lite); }
.ctx-icon.is-on, .ctx-chip.is-on {
  background: rgba(36,85,255,0.2);
  border-color: var(--st-gold);
  color: var(--st-gold);
}
.ctx-icon.danger:hover { background: rgba(216, 96, 79, 0.15); color: var(--st-danger); }

.chip-swatch {
  width: 16px; height: 16px;
  border-radius: 4px;
  background: var(--st-gold);
  box-shadow: inset 0 0 0 1px rgba(10,9,8,0.2);
}
.chip-swatch.ring { background: transparent; box-shadow: inset 0 0 0 3px var(--st-text); border-radius: 50%; }

.ctx-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--st-text-dim);
  font: 600 0.78rem var(--st-font);
}
.ctx-inline input[type="color"] { width: 30px; height: 30px; margin: 0; padding: 2px; border-radius: 6px; border: 1px solid var(--st-border-lite); background: transparent; }
.ctx-inline input[type="range"] { width: 110px; margin: 0; }

/* Steppers */
.stepper {
  display: inline-flex;
  align-items: center;
  height: 34px;
  border: 1px solid var(--st-border-lite);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.stepper button {
  width: 28px; height: 100%;
  border: 0; background: transparent;
  color: var(--st-text);
  font-size: 1rem;
  cursor: pointer;
}
.stepper button:hover { background: rgba(255,255,255,0.11); }
.stepper input {
  width: 46px; height: 100%;
  margin: 0; padding: 0;
  border: 0;
  background: transparent;
  color: var(--st-text);
  font: 600 0.85rem var(--st-font);
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.stepper input:focus { outline: none; }

/* Popovers */
.ctx-pop-wrap, .font-picker-wrap { position: relative; }
.ctx-pop {
  /* placePopover() switches these to fixed. width:max-content makes the box
     size from its content alone, so it measures the same before and after it
     is moved — with plain shrink-to-fit the width depends on how much room is
     left to the right of wherever it currently sits, and it also reflows once
     webfonts settle, so the clamp was computed against a stale width and the
     popover ended up hanging off the edge of the viewport. */
  width: max-content;
  max-width: min(340px, calc(100vw - 16px));
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 70;
  min-width: 230px;
  padding: 0.8rem;
  border: 1px solid var(--st-border-lite);
  border-radius: var(--st-radius-lg);
  background: var(--st-glass-strong);
  box-shadow: var(--st-shadow-pop);
  backdrop-filter: blur(26px) saturate(1.35);
  -webkit-backdrop-filter: blur(26px) saturate(1.35);
}
.ctx-pop label {
  display: block;
  margin: 0 0 0.55rem;
  color: var(--st-text-dim);
  font: 600 0.75rem var(--st-font);
}
.ctx-pop label output { float: right; color: var(--st-text); }
.ctx-pop input[type="range"] { width: 100%; margin: 0.3rem 0 0; }
.ctx-pop select {
  width: 100%;
  margin: 0.25rem 0 0;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--st-border-lite);
  border-radius: 6px;
  background: var(--st-bg-raise);
  color: var(--st-text);
  font: inherit;
}
.check-row { display: flex; align-items: center; gap: 0.5rem; }
.check-row input { width: auto; margin: 0; }
.pop-title {
  margin: 0.6rem 0 0.4rem;
  color: var(--st-text-faint);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pop-title:first-child { margin-top: 0; }
.custom-color {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.custom-color input[type="color"] {
  width: 40px; height: 28px;
  margin: 0; padding: 2px;
  border: 1px solid var(--st-border-lite);
  border-radius: 6px;
  background: transparent;
}
.custom-color.block { margin-top: 0.8rem; }

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.swatch-grid button {
  aspect-ratio: 1;
  border: 1px solid rgba(10,9,8,0.15);
  border-radius: 6px;
  background: var(--swatch, #fff);
  cursor: pointer;
  padding: 0;
}
.swatch-grid button:hover { transform: scale(1.12); border-color: var(--st-gold); }
.swatch-grid.big { grid-template-columns: repeat(6, 1fr); }
.swatch-grid.big button { border-radius: 8px; }

.pos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.pos-grid button {
  padding: 0.45rem 0.3rem;
  border: 1px solid var(--st-border-lite);
  border-radius: 6px;
  background: transparent;
  color: var(--st-text);
  font: 600 0.75rem var(--st-font);
  cursor: pointer;
}
.pos-grid button:hover { border-color: var(--st-gold); color: var(--st-gold); }
.pop-position { min-width: 260px; max-width: 340px; }

/* Font picker */
.font-current { border: 1px solid var(--st-border-lite); min-width: 150px; justify-content: space-between; }
.font-picker {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 80;
  width: 280px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--st-border-lite);
  border-radius: var(--st-radius-lg);
  background: var(--st-glass-strong);
  box-shadow: var(--st-shadow-pop);
  backdrop-filter: blur(26px) saturate(1.35);
  -webkit-backdrop-filter: blur(26px) saturate(1.35);
  overflow: hidden;
}
.font-picker input[type="search"] {
  margin: 0.6rem;
  padding: 0.5rem 0.7rem;
  width: calc(100% - 1.2rem);
  border: 1px solid var(--st-border-lite);
  border-radius: var(--st-radius);
  background: var(--st-bg-raise);
  color: var(--st-text);
  font: inherit;
}
.font-cats {
  display: flex;
  gap: 4px;
  padding: 0 0.6rem 0.55rem;
  flex-wrap: wrap;
}
.font-cats button {
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--st-border-lite);
  border-radius: 999px;
  background: transparent;
  color: var(--st-text-dim);
  font: 600 0.7rem var(--st-font);
  cursor: pointer;
}
.font-cats button.is-active { background: var(--st-gold); border-color: var(--st-gold); color: #fff; }
.font-list { overflow-y: auto; padding: 0 0.4rem 0.5rem; }
.font-list button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: var(--st-radius);
  background: transparent;
  color: var(--st-text);
  font-size: 1.05rem;
  text-align: left;
  cursor: pointer;
}
.font-list button small { color: var(--st-text-faint); font-family: var(--st-font); font-size: 0.65rem; }
.font-list button:hover { background: var(--st-gold-soft); }
.font-list button.is-active { color: var(--st-gold); }

/* Filters */
.pop-filters { min-width: 260px; }
.filter-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: 0.7rem;
}
.filter-presets button {
  padding: 0.45rem 0.3rem;
  border: 1px solid var(--st-border-lite);
  border-radius: 6px;
  background: transparent;
  color: var(--st-text);
  font: 600 0.72rem var(--st-font);
  cursor: pointer;
}
.filter-presets button:hover, .filter-presets button.is-active { border-color: var(--st-gold); color: var(--st-gold); }

/* =========================== WORKSPACE =========================== */
.studio-main {
  display: grid;
  grid-template-columns: 72px auto minmax(0, 1fr) 264px;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 28px;
  box-shadow: 0 28px 80px rgba(10,9,8,0.16);
}

/* Left rail */
.rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.65rem 0.45rem;
  background: var(--st-glass);
  border-right: 1px solid var(--st-border);
  overflow-y: auto;
}
.rail button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0.6rem 0.2rem;
  border: 0;
  min-height: 56px;
  border-radius: 18px;
  background: transparent;
  color: var(--st-text-dim);
  font: 600 0.64rem var(--st-font);
  letter-spacing: 0.02em;
  cursor: pointer;
}
.rail button svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.rail button:hover { color: var(--st-text); background: rgba(255,255,255,0.11); }
.rail [data-mobile-only] { display: none; }
.rail button.is-active { color: var(--st-gold); background: rgba(36,85,255,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.09); }

/* Flyout */
.flyout {
  position: relative;
  width: 316px;
  background: var(--st-bg-panel);
  border-right: 1px solid var(--st-border);
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: width 160ms ease, padding 160ms ease;
}
.flyout.is-collapsed { width: 0; border-right: 0; overflow: hidden; }
.panel { padding: 1rem 0.9rem 4rem; }
.panel h2 {
  margin: 0 0 0.3rem;
  font-family: var(--st-font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--st-text);
}
.panel h3 {
  margin: 1.1rem 0 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--st-text-faint);
}
.panel-sub, .panel-note { margin: 0 0 0.8rem; font-size: 0.76rem; color: var(--st-text-dim); line-height: 1.45; }
.panel-note { margin-top: 0.8rem; }
.panel-search {
  width: 100%;
  margin: 0 0 0.4rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--st-border-lite);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--st-text);
  font: inherit;
}
.panel-search::placeholder { color: var(--st-text-faint); }
.panel-btn {
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--st-border-lite);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--st-text);
  font: 600 0.82rem var(--st-font);
  cursor: pointer;
}
.panel-btn:hover { border-color: rgba(36,85,255,0.56); color: var(--st-gold); background: rgba(255,255,255,0.11); }

.flyout-collapse {
  position: sticky;
  bottom: 0.8rem;
  left: 100%;
  margin-right: 0.5rem;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border: 1px solid var(--st-border-lite);
  border-radius: 50%;
  background: var(--st-bg-raise);
  color: var(--st-text-dim);
  cursor: pointer;
}
.flyout-collapse svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.flyout-collapse:hover { color: var(--st-gold); border-color: var(--st-gold); }

/* Templates */
.template-list { display: grid; gap: 0.7rem; }
.template-card {
  border: 1px solid var(--st-border-lite);
  border-radius: var(--st-radius-lg);
  background: rgba(255,255,255,0.07);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  padding: 0;
  box-shadow: 0 12px 30px rgba(10,9,8,0.08), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 130ms ease, border-color 130ms ease, box-shadow 130ms ease;
}
.template-card:hover { transform: translateY(-2px); border-color: var(--st-gold); box-shadow: 0 18px 42px rgba(10,9,8,0.12); }
.template-card.is-selected { border-color: var(--st-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-gold) 16%, transparent); }
.template-preview {
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}
.template-preview i {
  width: 22px; height: 22px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.template-preview.remote-template {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(36,85,255,0.14)),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: cover, 18px 18px, 18px 18px;
  background-position: center;
}
.template-preview.remote-template strong {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  background: rgba(255,255,255,0.09);
  color: var(--st-text-dim);
  letter-spacing: 0.08em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.13);
}
.template-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.7rem;
  border-top: 1px solid var(--st-border);
}
.template-meta strong { font-size: 0.82rem; color: var(--st-text); font-weight: 600; }
.template-meta span { font-size: 0.66rem; color: var(--st-text-faint); text-transform: uppercase; letter-spacing: 0.08em; }

/* Elements */
.line-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.line-grid button, .shape-grid button, .icon-grid button {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 15%;
  border: 1px solid transparent;
  border-radius: 18px;
  background: rgba(255,255,255,0.07);
  color: var(--st-text-dim);
  cursor: pointer;
  transition: transform 110ms ease;
}
.line-grid button:hover, .shape-grid button:hover, .icon-grid button:hover {
  transform: scale(1.08);
  border-color: var(--st-gold);
  color: var(--st-gold);
}
.line-grid svg { width: 100%; height: 100%; }
.shape-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.shape-grid button svg { width: 100%; height: 100%; }
.icon-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.icon-grid button { padding: 22%; }
.icon-grid button svg { width: 100%; height: 100%; }
.smart-row { display: grid; gap: 0.5rem; }
.qr-field { margin: 0; color: var(--st-text-dim); font: 600 0.75rem var(--st-font); }
.qr-field input {
  width: 100%;
  margin: 0.3rem 0 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--st-border-lite);
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  color: var(--st-text);
  font: 400 0.82rem var(--st-font);
}

/* Text panel */
.text-quick { display: grid; gap: 0.5rem; }
.text-quick button {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--st-border-lite);
  border-radius: 18px;
  background: rgba(255,255,255,0.07);
  color: var(--st-text);
  text-align: left;
  cursor: pointer;
}
.text-quick button:hover { border-color: var(--st-gold); }
.tq-heading { font-size: 1.3rem; font-weight: 700; }
.tq-sub { font-size: 1rem; font-weight: 600; }
.tq-body { font-size: 0.8rem; }
.text-style-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.text-style-list button {
  min-height: 64px;
  display: grid;
  place-items: center;
  padding: 0.5rem;
  border: 1px solid var(--st-border-lite);
  border-radius: 18px;
  background: rgba(255,255,255,0.07);
  color: var(--st-text);
  font-size: 1.05rem;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}
.text-style-list button:hover { border-color: var(--st-gold); transform: translateY(-1px); }

/* Photos & uploads */
.chip-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 0.7rem; }
.chip-row button {
  padding: 0.28rem 0.65rem;
  border: 1px solid var(--st-border-lite);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--st-text-dim);
  font: 600 0.72rem var(--st-font);
  cursor: pointer;
}
.chip-row button.is-active { background: rgba(36,85,255,0.9); border-color: rgba(255,255,255,0.09); color: #fff; }
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.photo-grid button {
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  background: var(--st-bg-raise);
}
.photo-grid button:hover { border-color: var(--st-gold); }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }

.upload-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.9rem;
  padding: 1.4rem 1rem;
  border: 1.5px dashed var(--st-border-lite);
  border-radius: var(--st-radius-lg);
  background: rgba(255,255,255,0.06);
  color: var(--st-text-dim);
  text-align: center;
  cursor: pointer;
  transition: border-color 130ms ease, background 130ms ease;
}
.upload-drop:hover, .upload-drop.is-over { border-color: var(--st-gold); background: var(--st-gold-soft); }
.upload-drop svg { width: 26px; height: 26px; fill: none; stroke: var(--st-gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.upload-drop strong { color: var(--st-text); font-size: 0.88rem; }
.upload-drop span { font-size: 0.7rem; }
.upload-drop input { display: none; }
.upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.upload-grid .up-item { position: relative; }
.upload-grid .up-item.is-cloud::after {
  content: "Account";
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 0.16rem 0.36rem;
  border-radius: 999px;
  background: rgba(10,9,8,0.62);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}
.upload-grid .up-item > button {
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid var(--st-border-lite);
  border-radius: var(--st-radius);
  overflow: hidden;
  cursor: pointer;
  background-color: var(--st-bg);
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.06) 75%),
    linear-gradient(45deg, rgba(255,255,255,0.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.06) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
}
.upload-grid .up-item > button:hover { border-color: var(--st-gold); }
.upload-grid img { width: 100%; height: 100%; object-fit: contain; display: block; }
.up-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 0.7rem;
  cursor: pointer;
  opacity: 0;
}
.up-item:hover .up-remove { opacity: 1; }

/* ============================= STAGE ============================= */
/* Flex, not grid: the page tab strip is display:none on single-page
   products, which removes it from a grid entirely and shifts every later
   child up a row — the canvas would take its content height and the zoom
   bar would absorb all the leftover space. Flex sizing does not care how
   many children are present. */
.stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--st-canvas-bg);
}
.stage > .page-tabs, .stage > .stage-bottom { flex: 0 0 auto; }
.stage > .stage-scroll { flex: 1 1 auto; min-height: 0; }
.page-tabs {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.7rem auto 0;
  padding: 0.35rem;
  width: fit-content;
  max-width: calc(100% - 1.4rem);
  border: 1px solid var(--st-border);
  border-radius: 999px;
  background: var(--st-glass);
  box-shadow: var(--st-glass-shadow);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  overflow: hidden;
}
.page-tab-strip {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  flex: 0 1 auto;
  min-width: 0;
}
.page-tabs .page-step {
  min-width: 32px;
  padding: 0;
  font-size: 1rem;
  flex: none;
}
.page-tabs .page-step:disabled { opacity: 0.35; cursor: default; }
.page-tabs .page-count {
  font: 700 0.72rem var(--st-font);
  color: var(--st-text-dim);
  padding: 0 0.3rem;
  white-space: nowrap;
  flex: none;
}
.page-tabs button {
  min-height: 32px;
  padding: 0 0.8rem;
  border: 1px solid var(--st-border-lite);
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  color: var(--st-text-dim);
  font: 700 0.78rem var(--st-font);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.page-tabs button:hover {
  border-color: rgba(36,85,255,0.55);
  color: var(--st-text);
}
.page-tabs button.is-active {
  background: linear-gradient(180deg, rgba(57,112,255,0.98), rgba(36,85,255,0.86));
  border-color: rgba(255,255,255,0.11);
  color: #fff;
}
/* Thumbnail pages drop the pill treatment — the artwork is the affordance. */
.page-tabs .page-thumb {
  min-height: 0;
  padding: 4px 5px 5px;
  display: grid;
  justify-items: center;
  gap: 4px;
  border-color: transparent;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}
.page-tabs .page-thumb:hover { border-color: transparent; background: rgba(255,255,255,0.05); }
.page-thumb-art {
  display: block;
  width: 44px;
  border: 1px solid var(--st-border-lite);
  border-radius: 3px;
  background: #fff center / cover no-repeat;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.page-thumb small {
  max-width: 74px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 0.6rem var(--st-font);
  color: var(--st-text-faint);
}
.page-tabs .page-thumb.is-active {
  background: rgba(36,85,255,0.14);
  border-color: transparent;
}
.page-thumb.is-active .page-thumb-art {
  border-color: var(--st-gold);
  box-shadow: 0 0 0 2px var(--st-gold-soft), 0 2px 8px rgba(0,0,0,0.45);
}
.page-thumb.is-active small { color: var(--st-text); }
.stage-scroll {
  overflow: auto;
  display: flex;
  padding: 44px;
  position: relative;
}
/* Sizer occupies the scaled canvas size in layout, so the scroll area is
   always exactly right; margin:auto centres it when it fits. */
.canvas-sizer {
  flex: 0 0 auto;
  margin: auto;
  position: relative;
}
.canvas-frame {
  /* Absolute + top/left 0: shrink-to-fit the canvas so the scaled frame
     always matches the sizer exactly instead of stretching to fill it. */
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(10, 9, 8, 0.08),
    0 22px 60px rgba(10, 9, 8, 0.25),
    0 4px 14px rgba(10, 9, 8, 0.14);
}
.stage-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0.9rem;
  background: var(--st-glass);
  border-top: 1px solid var(--st-border);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
}
.stage-status {
  margin: 0;
  font-size: 0.75rem;
  color: var(--st-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zoom-controls { display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0; }
.zoom-controls button {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--st-border-lite);
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  color: var(--st-text);
  font-size: 0.95rem;
  cursor: pointer;
}
.zoom-controls button:hover { border-color: var(--st-gold); }
.zoom-controls button.zoom-fit { width: auto; padding: 0 0.5rem; font: 600 0.72rem var(--st-font); }
.zoom-controls input[type="range"] { width: 120px; margin: 0; accent-color: var(--st-gold); }
.zoom-label { min-width: 40px; font-size: 0.75rem; color: var(--st-text-dim); text-align: right; }
.guide-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  color: var(--st-text-dim);
  font: 600 0.72rem var(--st-font);
  cursor: pointer;
}
.guide-toggle input { width: auto; margin: 0; accent-color: var(--st-gold); }

/* ============================= DOCK ============================= */
.dock {
  display: flex;
  flex-direction: column;
  background: var(--st-bg-panel);
  border-left: 1px solid var(--st-border);
  min-height: 0;
}
.dock-tabs { display: flex; gap: 0.25rem; padding: 0.45rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
.dock-tabs button {
  flex: 1;
  padding: 0.52rem 0.4rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: var(--st-text-dim);
  font: 600 0.78rem var(--st-font);
  cursor: pointer;
}
.dock-tabs button.is-active { color: #fff; background: rgba(36,85,255,0.8); }
.dock-body { flex: 1; overflow-y: auto; padding: 0.7rem; }
.dock-hint { margin: 0 0 0.6rem; font-size: 0.7rem; color: var(--st-text-faint); }

.layers-list { display: grid; gap: 4px; }
.layer-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 16px;
  background: rgba(255,255,255,0.07);
  color: var(--st-text);
  cursor: grab;
  user-select: none;
}
.layer-item:hover { border-color: var(--st-border-lite); }
.layer-item.is-active { border-color: var(--st-gold); background: var(--st-gold-soft); }
.layer-item.is-dragging { opacity: 0.4; }
.layer-item.is-dropover { border-top: 2px solid var(--st-gold); }
.layer-thumb {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--st-bg);
  color: var(--st-text-dim);
  font-size: 0.6rem;
  overflow: hidden;
}
.layer-thumb svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.layer-name {
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.layer-name input {
  width: 100%;
  margin: 0;
  padding: 0.1rem 0.25rem;
  border: 1px solid var(--st-gold);
  border-radius: 4px;
  background: var(--st-bg);
  color: var(--st-text);
  font: inherit;
}
.layer-btn {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--st-text-faint);
  cursor: pointer;
}
.layer-btn:hover { color: var(--st-gold); background: var(--st-bg); }
.layer-btn.is-on { color: var(--st-gold); }
.layer-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dock .empty-state { color: var(--st-text-faint); font-size: 0.78rem; text-align: center; padding: 1.4rem 0.5rem; }

.print-size-card {
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.7rem;
  border: 1px solid var(--st-border-lite);
  border-radius: var(--st-radius);
  background: var(--st-bg-raise);
}
.print-size-card span { display: block; font-weight: 700; font-size: 0.85rem; color: var(--st-text); }
.print-size-card small { display: block; margin-top: 0.25rem; color: var(--st-text-faint); font-size: 0.68rem; line-height: 1.5; }
.dock .checklist { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.dock .checklist li {
  display: grid;
  grid-template-columns: 0.8rem 1fr;
  gap: 0.5rem;
  align-items: start;
  color: var(--st-text-dim);
  font-size: 0.78rem;
  line-height: 1.4;
}
.dock .checklist li span {
  width: 0.55rem; height: 0.55rem;
  margin-top: 0.28rem;
  border-radius: 999px;
  background: var(--st-border-lite);
}
.dock .checklist .is-ok span { background: var(--st-ok); }
.dock .checklist .is-warn span { background: var(--st-warn); box-shadow: 0 0 8px rgba(245,165,36,0.6); }

/* ---------------- form controls inside the studio ----------------
   The studio is injected into shop.html, and that page's stylesheet styles
   every input/select/textarea as a light, 46px-tall storefront field with
   !important. Left alone, the studio's compact dark controls render as
   oversized white boxes. Re-assert the dark theme, scoped to .studio so
   the storefront itself is untouched. */
.studio input, .studio select, .studio textarea {
  min-height: 0 !important;
  border-radius: 8px !important;
}
.studio input:not([type="color"]):not([type="range"]):not([type="checkbox"]),
.studio select,
.studio textarea {
  border: 1px solid var(--st-border-lite) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--st-text) !important;
}
.studio input[type="color"] {
  border: 1px solid var(--st-border-lite) !important;
  background: transparent !important;
}
/* The stepper draws its own frame, so its field must stay bare. */
.studio .stepper input { border: 0 !important; background: transparent !important; }

/* ======================== CONTEXT MENU ======================== */
.canvas-menu {
  position: fixed;
  z-index: 120;
  min-width: 200px;
  padding: 0.3rem;
  border: 1px solid var(--st-border-lite);
  border-radius: var(--st-radius-lg);
  background: var(--st-glass-strong);
  box-shadow: var(--st-shadow-pop);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
}
.canvas-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--st-text);
  font: 500 0.82rem var(--st-font);
  cursor: pointer;
}
.canvas-menu button:hover { background: var(--st-gold-soft); }
.canvas-menu button.danger:hover { background: rgba(216,96,79,0.15); color: var(--st-danger); }
.canvas-menu kbd {
  color: var(--st-text-faint);
  font: 500 0.68rem var(--st-font);
}
.canvas-menu hr { margin: 0.3rem 0.4rem; border: 0; border-top: 1px solid var(--st-border); }

/* ===================== KEYBOARD SHORTCUTS MODAL ===================== */
.shortcuts-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.shortcuts-modal {
  width: min(680px, 100%);
  max-height: min(600px, 100%);
  overflow-y: auto;
  border: 1px solid var(--st-border-lite);
  border-radius: var(--st-radius-lg);
  background: var(--st-glass-strong);
  box-shadow: var(--st-shadow-pop);
}
.shortcuts-modal header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--st-border);
  background: var(--st-glass-strong);
}
.shortcuts-modal h2 {
  margin: 0;
  font-family: var(--st-font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--st-text);
}
.shortcuts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  padding: 1.2rem;
}
.shortcuts-grid h3 {
  margin: 0 0 0.6rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--st-gold);
}
.shortcuts-grid dl { margin: 0; display: grid; gap: 0.55rem; }
.shortcuts-grid dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.shortcuts-grid dt { margin: 0; font-size: 0.82rem; color: var(--st-text-dim); }
.shortcuts-grid dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--st-text);
  white-space: nowrap;
}
.shortcuts-grid kbd {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 0.35rem;
  border: 1px solid var(--st-border-lite);
  border-radius: 5px;
  background: rgba(255,255,255,0.05);
  color: var(--st-text);
  font: 700 0.68rem var(--st-font);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
@media (max-width: 640px) {
  .shortcuts-grid { grid-template-columns: 1fr; }
}

/* ========================= SCROLLBARS ========================= */
/* Light blue reads on both the dark chrome and the light canvas stage,
   where a neutral grey thumb disappeared into the paper. */
.studio { scrollbar-color: var(--st-scroll) transparent; }
.studio ::-webkit-scrollbar { width: 10px; height: 10px; }
.studio ::-webkit-scrollbar-track { background: transparent; }
.studio ::-webkit-scrollbar-thumb {
  background: var(--st-scroll);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.studio ::-webkit-scrollbar-thumb:hover { background-color: var(--st-scroll-hover); }

/* ========================= RESPONSIVE ========================= */
@media (max-width: 1100px) {
  .studio-main { grid-template-columns: 64px auto minmax(0, 1fr); }
  /* The dock becomes its own sheet, matching the asset sheet above so both
     read as the same surface arriving from the tab bar. */
  .rail [data-mobile-only] { display: flex; }
  .dock { display: none; }
  .dock.is-open {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 62px;
    z-index: 7;
    max-height: 68dvh;
    border-left: 0;
    border-top: 1px solid var(--st-border);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.45);
  }
  .tb-note { display: none; }
}
/* ================== MOBILE PORTRAIT (bottom tab bar) ==================
   Phones get an app-shell layout instead of a squeezed desktop one: the
   canvas owns the screen, the asset panels slide up as a bottom sheet, and
   the icon rail becomes the tab bar that drives them. No markup changes —
   the rail, flyout and stage are simply re-ordered with flexbox. */
@media (max-width: 820px) {
  .studio {
    height: 100dvh;
    grid-template-rows: auto auto minmax(0, 1fr);
    /* Keep the tab bar clear of the home indicator and the notch. env()
       resolves to 0 unless the page opts in with viewport-fit=cover, so this
       is inert today and correct the moment that is added. */
    padding: 6px calc(6px + env(safe-area-inset-right, 0px))
             calc(6px + env(safe-area-inset-bottom, 0px))
             calc(6px + env(safe-area-inset-left, 0px));
    gap: 6px;
  }
  /* Stops iOS double-tap-to-zoom firing on toolbar buttons. The canvas is
     excluded — fabric manages touch-action there itself. */
  .studio-topbar, .context-bar, .rail, .stage-bottom, .page-tabs,
  .flyout, .dock, .canvas-menu { touch-action: manipulation; }
  /* Comfortable hit targets for the long-press menu. */
  .canvas-menu button { padding: 0.7rem 0.75rem; font-size: 0.88rem; }
  .studio-topbar, .context-bar { border-radius: 16px; }
  .studio-topbar { min-height: 50px; padding: 0 0.4rem; gap: 0.35rem; flex-wrap: wrap; row-gap: 0.25rem; }
  .topbar-left { flex: 1 1 auto; min-width: 0; }
  .topbar-right { flex: 0 0 auto; gap: 0.3rem; }
  .topbar-doc, .topbar-center, .tb-note { display: none; }
  /* Just the back chevron and the mark, like a native app's home button. */
  .studio-brand span, .studio-brand em, .studio-brand small { display: none; }
  /* A keyboard shortcut sheet is meaningless on a touch device. */
  [data-shortcuts-toggle] { display: none; }
  .tb-price { font-size: 0.8rem; }
  .tb-btn { padding: 0.42rem 0.66rem; font-size: 0.74rem; }
  /* backdrop-filter must go: a filtered ancestor becomes the containing
     block for position:fixed descendants, which would anchor the sheets
     below to this bar instead of the viewport. The bar's background is
     already almost opaque, so nothing is lost visually. */
  .studio-topbar, .context-bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .context-bar {
    min-height: 42px;
    padding: 0 0.5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  /* Bigger touch targets than the 34px desktop controls. */
  .ctx-icon, .ctx-chip, .ctx-select { height: 40px; }
  .ctx-icon { width: 40px; }
  /* position:fixed lifts these out of the scrolling bar entirely, so they
     are never clipped, and a full-width sheet beats a 230px dropdown on a
     390px screen. Offset clears the bottom tab bar. */
  .ctx-pop, .font-picker, .tb-menu {
    position: fixed;
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 70px;
    width: auto;
    min-width: 0;
    max-height: 52dvh;
    overflow-y: auto;
    border-radius: 16px;
  }

  .studio-main {
    display: flex;
    flex-direction: column;
    border-radius: 18px;
  }
  .stage { order: 1; flex: 1 1 auto; min-height: 0; }
  .stage-scroll { padding: 14px; }
  .stage-bottom { padding: 0.3rem 0.55rem; }
  .stage-status, .guide-toggle { display: none; }
  .zoom-controls { width: 100%; justify-content: center; }
  .zoom-controls input[type="range"] { width: 96px; }
  .dock { display: none; }

  /* Asset panels become a bottom sheet that OVERLAYS the canvas rather than
     shrinking it, so the artwork never resizes as panels open and close.
     It is offset by exactly the tab bar's fixed height so the two meet. */
  .studio-main { position: relative; }
  .flyout {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 62px;
    z-index: 6;
    order: 2;
    width: auto;
    max-height: 68dvh;
    border-right: 0;
    border-top: 1px solid var(--st-border);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.45);
    transition: max-height 180ms ease;
  }
  /* Grab handle, the affordance that says "this sheet can be dismissed". */
  .flyout::before {
    content: "";
    display: block;
    width: 38px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: var(--st-border-lite);
  }
  .flyout.is-collapsed { max-height: 0; border-top: 0; box-shadow: none; }
  .panel { padding: 0.85rem 0.8rem 2rem; }

  /* The rail becomes the bottom tab bar. Its height is fixed so the sheet
     above can sit flush against it. */
  .rail {
    order: 3;
    flex: 0 0 62px;
    height: 62px;
    flex-direction: row;
    gap: 2px;
    padding: 0.28rem 0.25rem;
    border-right: 0;
    border-top: 1px solid var(--st-border);
    overflow-x: auto;
    overflow-y: hidden;
  }
  .rail button {
    /* Seven tabs must share the width, so they flex down rather than
       overflowing and pushing Layers off-screen where nobody finds it. */
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    gap: 2px;
    border-radius: 10px;
    padding: 0.25rem 0.15rem;
    background: transparent;
    font-size: 0.56rem;
  }
  /* content-box, or the global border-box reset makes this padding eat the
     18px glyph and the icon vanishes entirely. */
  /* flex:none, or the glyph is a shrinkable flex item in a short column and
     collapses to a few pixels. content-box, or the global border-box reset
     makes the pill padding eat the 18px glyph. */
  .rail button svg { flex: none; box-sizing: content-box; width: 18px; height: 18px; padding: 3px 11px; border-radius: 9px; }
  .rail button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* The drag handle and re-tapping the active tab both dismiss the sheet. */
  .flyout-collapse { display: none; }
  /* Active tab: a pill behind the glyph, matching how native tab bars read. */
  .rail button.is-active { background: transparent; box-shadow: none; }
  .rail button.is-active svg { background: var(--st-gold-soft); color: var(--st-gold); }
  .rail button.is-active span { color: var(--st-gold); font-weight: 800; }
}

/* ===================== PRO CONTROLS (x100 pack) ===================== */
.pop-effects { min-width: 250px; }
.effects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.effects-grid button {
  min-height: 52px;
  display: grid;
  place-items: center;
  padding: 0.3rem;
  border: 1px solid var(--st-border-lite);
  border-radius: var(--st-radius);
  background: rgba(255,255,255,0.07);
  color: var(--st-text);
  font: 700 0.9rem var(--st-font);
  cursor: pointer;
}
.effects-grid button:hover { border-color: var(--st-gold); }
.effects-grid button.is-active { border-color: var(--st-gold); background: var(--st-gold-soft); }
.effects-grid button small { display: block; font: 600 0.58rem var(--st-font); color: var(--st-text-faint); letter-spacing: 0.06em; text-transform: uppercase; }
.pop-note { margin: 0.4rem 0 0; font-size: 0.7rem; color: var(--st-text-faint); line-height: 1.4; }

.fill-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.fill-tools .panel-btn { padding: 0.35rem 0.6rem; font-size: 0.72rem; }
.gradient-builder {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 0.45rem;
}
.gradient-builder input[type="color"] {
  width: 34px; height: 28px;
  margin: 0; padding: 2px;
  border: 1px solid var(--st-border-lite);
  border-radius: 6px;
  background: transparent;
}
.gradient-builder input[type="range"] { width: 100%; margin: 0; }
.gradient-builder .panel-btn { padding: 0.35rem 0.6rem; font-size: 0.72rem; }

.pos-grid.two { grid-template-columns: 1fr 1fr; margin-top: 5px; }
.exact-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}
.exact-grid label {
  margin: 0;
  color: var(--st-text-faint);
  font: 700 0.62rem var(--st-font);
  text-transform: uppercase;
}
.exact-grid input {
  width: 100%;
  margin: 2px 0 0;
  padding: 0.3rem 0.3rem;
  border: 1px solid var(--st-border-lite);
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  color: var(--st-text);
  font: 600 0.78rem var(--st-font);
  -moz-appearance: textfield;
  appearance: textfield;
}
.exact-grid input::-webkit-outer-spin-button,
.exact-grid input::-webkit-inner-spin-button { -webkit-appearance: none; }

.ctx-icon.painter-armed {
  background: var(--st-gold);
  color: #fff;
  border-color: var(--st-gold);
  animation: painterPulse 1.2s ease-in-out infinite;
}
@keyframes painterPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(36,85,255,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(36,85,255,0); }
}

/* Photo frame buttons: dashed look to signal they're frames */
.shape-grid .frame-btn svg { opacity: 0.5; }
.shape-grid .frame-btn { border: 1.5px dashed var(--st-border-lite); }
.shape-grid .frame-btn:hover { border-color: var(--st-gold); }

@media (max-width: 900px) and (orientation: landscape), (max-height: 560px) and (orientation: landscape) {
  .studio-body {
    overflow: hidden;
  }

  .studio {
    height: 100vh;
    height: 100svh;
    grid-template-rows: 52px 44px minmax(0, 1fr);
    padding: 6px;
    gap: 6px;
  }

  .studio-topbar,
  .context-bar {
    border-radius: 22px;
  }

  .studio-topbar {
    flex-wrap: nowrap;
    gap: 0.45rem;
    padding: 0 0.45rem;
  }

  .topbar-left,
  .topbar-right {
    width: auto;
    min-width: 0;
    justify-content: flex-start;
  }

  .topbar-left {
    flex: 1 1 auto;
  }

  .topbar-right {
    flex: 0 0 auto;
    gap: 0.32rem;
  }

  .topbar-center,
  .topbar-doc,
  .tb-note,
  .tb-btn.ghost {
    display: none;
  }

  .studio-brand {
    max-width: 138px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tb-price {
    font-size: 0.8rem;
  }

  .tb-btn {
    padding: 0.38rem 0.64rem;
    font-size: 0.74rem;
  }

  .ctx-icon,
  .ctx-chip,
  .ctx-select {
    height: 30px;
    font-size: 0.74rem;
  }

  .ctx-icon {
    width: 30px;
  }

  .studio-main {
    display: grid;
    grid-template-columns: 56px minmax(220px, 35vw) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    border-radius: 22px;
  }

  .rail {
    order: initial;
    flex-direction: column;
    padding: 0.4rem 0.32rem;
    border-top: 0;
    border-right: 1px solid rgba(255,255,255,0.07);
    overflow-y: auto;
    overflow-x: hidden;
  }

  .rail button {
    flex: initial;
    min-height: 46px;
    border-radius: 14px;
    font-size: 0.55rem;
  }

  .rail button svg {
    width: 18px;
    height: 18px;
  }

  .flyout {
    order: initial;
    width: auto;
    max-height: none;
  }

  .flyout.is-collapsed {
    width: 0;
    height: auto;
  }

  .panel {
    padding: 0.72rem 0.65rem 3rem;
  }

  .panel h2 {
    font-size: 1rem;
  }

  .stage {
    order: initial;
    min-height: 0;
  }

  .stage-scroll {
    padding: 14px;
  }

  .stage-bottom {
    padding: 0.28rem 0.55rem;
  }

  .stage-status {
    max-width: 38vw;
    font-size: 0.68rem;
  }

  .guide-toggle {
    display: none;
  }

  .zoom-controls {
    gap: 0.3rem;
  }

  .zoom-controls input[type="range"] {
    width: 82px;
  }
}

/* Admin template-edit mode banner (assets/js/editor.js applyAdminEditChrome) */
.tb-admin-edit-banner {
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--st-gold-soft);
  color: var(--st-gold);
  font: 700 0.72rem var(--st-font);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}