/*! build:8936e5e76d7902f5 */
/*!
 * ezscreenshots — Copyright (c) 2026 Aryan Bhasin. All Rights Reserved.
 * Proprietary source. See LICENSE. https://ezscreenshots.com
 */
/* ── Tokens ─────────────────────────────────────────────────
   Two namespaces:
     --ui-*       fixed editor chrome (controls panel, header, buttons,
                  inputs). Stays neutral so the tool stays readable no
                  matter what background the user picks.
     --canvas-*   user-themable. Only affects what's INSIDE the canvas
                  (the thing that gets exported).
   The font/colour pickers in the right pane mutate the canvas tokens via
   JS; the UI chrome never changes. */
:root {
  /* UI chrome — NOT user-themable */
  --ui-bg:         #ffffff;
  --ui-bg-soft:    #f6f6f4;
  --ui-bg-deep:    #ececea;
  --ui-ink:        #1a1a1a;
  --ui-ink-soft:   #555555;
  --ui-ink-muted:  #888888;
  --ui-ink-faint:  #b5b5b5;
  --ui-rule:       #e5e5e0;
  --ui-accent:     #BE644A; /* used for selection rect, focus ring, hover. Mirrors canvas accent visually. */

  /* Canvas theme — user-themable. Soft cream default; every value flows
     through CSS vars so JS can swap them without touching markup. */
  --canvas-bg:        #F4EFE5;
  --canvas-ink:       #2A2621;
  --canvas-ink-soft:  rgba(42,38,33,0.72);
  --canvas-ink-muted: rgba(42,38,33,0.55);
  --canvas-ink-faint: rgba(42,38,33,0.35);
  --canvas-rule:      rgba(42,38,33,0.18);
  --accent:           #BE644A;

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:    "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* Visual scale of the canvas inside the editor preview. JS tweaks this
     per-preset so taller phones / iPad still fit a typical viewport. */
  --scale: 0.30;

  /* Canvas dimensions — JS swaps these on preset change. */
  --canvas-w: 1290px;
  --canvas-h: 2796px;

  /* Density tokens — set by JS from a base table * size ratio.
     Defaults below are the "comfy" density at 1290 width. */
  --pad-x:           60px;
  --pad-bottom:      60px;
  --caption-top:     110px;
  --screenshot-top:  380px;
  --bottom-cap-top:  100px;
  --caption-bot:     130px;
  --caption-fs:      100px;
  --subtitle-fs:     48px;
  --drop-big-fs:     80px;
  --drop-small-fs:   32px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ui-ink);
  background: var(--ui-bg);
  min-height: 100vh;
}

/* App grid: mobile-first single column; desktop two-column via min-width query. */
.app {
  display: grid;
  grid-template-rows: 52px auto auto 1fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "mobile-banner"
    "editor"
    "controls";
  min-height: 100vh;
}

/* ── Top bar ────────────────────────────────────────────── */
.topbar {
  grid-area: header;
  display: flex; align-items: center;
  gap: 18px;
  padding: 0 20px;
  border-bottom: 1px solid var(--ui-rule);
  background: var(--ui-bg);
}
.topbar .brand {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--ui-ink);
  text-decoration: none;
}
.topbar .brand .dot { color: var(--ui-accent); }
.aso-topbar-link {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ui-accent) 30%, transparent);
  border-radius: 999px;
  padding: 4px 9px;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  margin-left: 2px;
}
.aso-topbar-link:hover {
  background: color-mix(in srgb, var(--ui-accent) 18%, transparent);
}
.topbar .tagline {
  flex: 1;
  text-align: center;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ui-ink-soft);
  display: none;
}
.topbar .tagline em {
  font-style: italic;
  color: var(--ui-accent);
  font-weight: 600;
}
.topbar .top-feedback {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--ui-ink-soft);
  background: transparent;
  border: 1px solid var(--ui-rule);
  border-radius: 999px;
  padding: 5px 8px;
  cursor: pointer;
  text-decoration: none;
}
.topbar .top-feedback:hover {
  color: var(--ui-ink);
  border-color: var(--ui-ink-soft);
}

/* ── Mobile reminder banner ── */
.mobile-banner {
  grid-area: mobile-banner;
  display: none;
  position: relative;
  background: #f7f6f3;
  border-bottom: 1px solid var(--ui-rule);
  padding: 14px 20px;
  font-family: var(--sans);
}
.mobile-banner.visible { display: block; }
.mobile-banner .mb-text {
  font-size: 13px;
  color: var(--ui-ink-soft);
  margin-bottom: 10px;
  line-height: 1.4;
}
.mobile-banner .mb-text strong {
  color: var(--ui-ink);
  font-weight: 600;
}
.mobile-banner .mb-form {
  display: flex;
  gap: 8px;
}
.mobile-banner .mb-form input {
  flex: 1;
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--sans);
  border: 1.5px solid var(--ui-rule);
  border-radius: 8px;
  background: #fff;
  color: var(--ui-ink);
  outline: none;
}
.mobile-banner .mb-form input:focus {
  border-color: var(--ui-accent);
}
.mobile-banner .mb-form button {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--sans);
  background: var(--ui-ink);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.mobile-banner .mb-form button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.mobile-banner .mb-fine {
  font-size: 11px;
  color: var(--ui-ink-muted);
  margin-top: 8px;
}
.mobile-banner .mb-success {
  font-size: 13px;
  color: #2e7d32;
  font-weight: 500;
}
.mobile-banner .mb-dismiss {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 16px;
  color: var(--ui-ink-muted);
  cursor: pointer;
  line-height: 1;
}

.export-gauge {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ui-ink-soft);
  background: var(--ui-bg-soft);
  border: 1px solid var(--ui-rule);
  border-radius: 999px;
  padding: 5px 10px;
  cursor: pointer;
  margin-left: auto;
}
.export-gauge:hover {
  border-color: var(--ui-ink-soft);
}
.export-gauge.pro {
  background: var(--ui-accent);
  color: #fff;
  border-color: var(--ui-accent);
}
.export-gauge.cancelled {
  background: #f39c12;
  color: #fff;
  border-color: #f39c12;
}
.export-gauge.warning {
  color: #c0392b;
  border-color: #c0392b;
}

/* ── What's New pill ── */
.whats-new-wrap {
  position: relative;
}
.whats-new-wrap[hidden] { display: none; }
@media (max-width: 600px) { .whats-new-wrap { display: none !important; } }
.whats-new-pill {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ui-accent);
  background: #fdf8f6;
  border: 1px solid var(--ui-accent);
  border-radius: 999px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.whats-new-pill:hover {
  background: var(--ui-accent);
  color: #fff;
}
.whats-new-popover {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 9000;
  background: var(--ui-bg);
  border: 1px solid var(--ui-rule);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 16px;
  width: 280px;
  text-align: left;
}
.whats-new-popover.visible { display: block; }
.whats-new-popover h4 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--ui-ink);
}
.whats-new-popover .wn-item {
  margin-bottom: 10px;
}
.whats-new-popover .wn-item:last-child { margin-bottom: 0; }
.whats-new-popover .wn-item-title {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ui-ink);
  margin-bottom: 2px;
}
.whats-new-popover .wn-item-desc {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ui-ink-soft);
  line-height: 1.4;
}
.whats-new-popover .wn-item-link {
  font-size: 11px;
  color: var(--ui-accent);
  text-decoration: none;
  font-weight: 600;
}
.whats-new-popover .wn-item-link:hover { text-decoration: underline; }
.whats-new-popover .wn-dismiss {
  display: block;
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ui-ink-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.whats-new-popover .wn-dismiss:hover { color: var(--ui-ink); }

/* ── Project switcher chip ── */
.project-switcher { position: relative; }
.ps-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ui-ink);
  background: transparent;
  border: 1px solid var(--ui-rule);
  border-radius: 999px;
  padding: 5px 10px;
  cursor: pointer;
  max-width: 220px;
}
.ps-chip:hover { border-color: var(--ui-ink-soft); }
.ps-chip[aria-expanded="true"] { border-color: var(--ui-ink-soft); background: rgba(0,0,0,0.03); }
.ps-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.ps-chevron { flex-shrink: 0; color: var(--ui-ink-muted); }
.ps-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 9000;
  background: var(--ui-bg);
  border: 1px solid var(--ui-rule);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 6px;
  width: 300px;
  text-align: left;
}
.ps-popover[hidden] { display: none; }
.ps-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.ps-row:hover { background: rgba(0,0,0,0.04); }
.ps-row.current { background: rgba(190,100,74,0.08); }
.ps-row-name {
  flex: 1;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ui-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-row.current .ps-row-name { color: var(--ui-accent); font-weight: 600; }
.ps-row-meta {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ui-ink-muted);
  flex-shrink: 0;
}
.ps-row-menu-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ui-ink-muted);
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.ps-row-menu-btn:hover { background: rgba(0,0,0,0.06); color: var(--ui-ink); }
.ps-rename-input {
  flex: 1;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ui-ink);
  border: 1px solid var(--ui-accent);
  border-radius: 4px;
  padding: 4px 6px;
  background: var(--ui-bg);
  outline: none;
}
.ps-row.confirming { background: #fdf8f6; }
.ps-confirm-text {
  flex: 1;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ui-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-confirm-yes, .ps-confirm-no {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.ps-confirm-yes { color: #c0392b; }
.ps-confirm-yes:hover { background: rgba(192,57,43,0.1); }
.ps-confirm-no { color: var(--ui-ink-muted); }
.ps-confirm-no:hover { color: var(--ui-ink); }
.ps-divider { height: 1px; background: var(--ui-rule); margin: 6px 4px; }
.ps-action {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ui-ink);
  text-align: left;
}
.ps-action:hover { background: rgba(0,0,0,0.04); }
.ps-action-icon {
  width: 14px;
  text-align: center;
  color: var(--ui-ink-muted);
  font-size: 14px;
  line-height: 1;
}
.ps-row-menu {
  background: var(--ui-bg);
  border: 1px solid var(--ui-rule);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  padding: 4px;
  min-width: 140px;
  z-index: 9500;
}
.ps-row-menu button {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  color: var(--ui-ink);
}
.ps-row-menu button:hover { background: rgba(0,0,0,0.06); }
.ps-row-menu button[data-action="delete"] { color: #c0392b; }
.ps-row-menu button[data-action="delete"]:hover { background: rgba(192,57,43,0.08); }

/* ── Theme presets row (sidebar) ── */
.presets-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.preset-select {
  flex: 1;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ui-ink);
  background: white;
  border: 1px solid var(--ui-rule);
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
}
.preset-save-btn {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ui-ink-soft);
  background: transparent;
  border: 1px solid var(--ui-rule);
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.25;
}
.preset-save-btn:hover { color: var(--ui-ink); border-color: var(--ui-ink-soft); }

/* ── Theme presets modal ── */
.presets-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.presets-overlay.visible { display: flex; }
.presets-modal {
  background: var(--ui-bg);
  border-radius: 16px;
  padding: 28px;
  max-width: 440px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.presets-modal h2 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--ui-ink);
}
.presets-modal .presets-sub {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ui-ink-soft);
  margin: 0 0 20px;
}
.presets-empty {
  text-align: center;
  padding: 24px 12px;
  color: var(--ui-ink-muted);
  font-family: var(--sans);
  font-size: 13px;
  border: 1px dashed var(--ui-rule);
  border-radius: 10px;
}
.preset-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--ui-rule);
  border-radius: 10px;
  margin-bottom: 8px;
}
.preset-item:last-child { margin-bottom: 0; }
.preset-swatches {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.preset-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.08);
}
.preset-info { flex: 1; min-width: 0; }
.preset-name {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preset-font {
  font-size: 12px;
  color: var(--ui-ink-muted);
  margin-top: 1px;
}
.preset-name-input {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-ink);
  border: 1px solid var(--ui-accent);
  border-radius: 4px;
  padding: 4px 6px;
  background: var(--ui-bg);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.preset-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.preset-action-btn {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ui-ink-soft);
  background: transparent;
  border: 1px solid var(--ui-rule);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.preset-action-btn:hover { color: var(--ui-ink); border-color: var(--ui-ink-soft); }
.preset-action-btn.apply { color: var(--ui-accent); border-color: var(--ui-accent); }
.preset-action-btn.apply:hover { background: var(--ui-accent); color: #fff; }
.preset-action-btn.delete { color: #c0392b; }
.preset-action-btn.delete:hover { border-color: #c0392b; }
.presets-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  gap: 12px;
}
.presets-modal .presets-save-current {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ui-accent);
  background: transparent;
  border: 1px solid var(--ui-accent);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
}
.presets-modal .presets-save-current:hover {
  background: var(--ui-accent);
  color: #fff;
}
.presets-modal .presets-close {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ui-ink-muted);
  background: none;
  border: none;
  cursor: pointer;
}
.presets-modal .presets-close:hover { color: var(--ui-ink); }

/* ── App toast (used for storage quota nudges) ── */
.app-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ui-ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 11000;
  max-width: calc(100% - 32px);
  display: flex;
  align-items: center;
  gap: 12px;
}
.app-toast[hidden] { display: none; }
.app-toast .toast-action {
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 6px;
  padding: 4px 10px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.app-toast .toast-action:hover { background: rgba(255,255,255,0.12); }
.app-toast .toast-dismiss {
  color: rgba(255,255,255,0.6);
  background: transparent;
  border: none;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.app-toast .toast-dismiss:hover { color: #fff; }

/* ── Paywall Modal ── */
.paywall-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.paywall-overlay.visible { display: flex; }
.paywall-modal {
  background: var(--ui-bg);
  border-radius: 16px;
  padding: 40px;
  max-width: 430px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.paywall-modal h2 {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.paywall-modal .paywall-sub {
  font-size: 14px;
  color: var(--ui-ink-soft);
  margin-bottom: 24px;
  line-height: 1.5;
}
.paywall-modal .pricing-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.paywall-modal .price-btn {
  display: block;
  padding: 14px 20px;
  border: 1px solid var(--ui-rule);
  border-radius: 10px;
  background: var(--ui-bg);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s;
}
.paywall-modal .price-btn:hover {
  border-color: var(--ui-accent);
}
.paywall-modal .price-btn .price-label {
  color: var(--ui-ink);
}
.paywall-modal .price-btn .price-detail {
  font-size: 12px;
  font-weight: 400;
  color: var(--ui-ink-muted);
  margin-top: 2px;
}
.paywall-modal .price-btn.featured {
  border-color: var(--ui-accent);
  background: #fdf8f6;
  position: relative;
}
.paywall-modal .price-badge {
  position: absolute;
  top: -9px;
  right: 12px;
  background: var(--ui-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}
.paywall-modal .pass-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--ui-ink-muted);
  background: var(--ui-bg-deep);
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}
.paywall-modal .paywall-close {
  font-size: 13px;
  color: var(--ui-ink-muted);
  background: none;
  border: none;
  cursor: pointer;
  margin-top: 8px;
}
.paywall-modal .paywall-close:hover { color: var(--ui-ink); }
.paywall-modal .paywall-sub-wrap {
  margin-bottom: 24px;
  line-height: 1.5;
  text-align: center;
}
.paywall-modal .paywall-sub-wrap .paywall-sub { margin-bottom: 0; }
.paywall-modal .paywall-preview-link {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ui-ink-muted);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin-top: 4px;
}
.paywall-modal .paywall-preview-link:hover { color: var(--ui-ink-soft); }
.paywall-modal .paywall-preview-link[hidden] { display: none; }
.ppp-note {
  font-size: 12px;
  color: var(--ui-ink-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ppp-note[hidden] { display: none; }
.ppp-toggle {
  font-size: 11px;
  color: var(--ui-accent);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  font-family: var(--sans);
}
.paywall-modal.showing-video { max-width: 680px; }
.paywall-modal .paywall-video-wrap {
  display: none;
  margin-bottom: 16px;
}
.paywall-modal .paywall-video-wrap.visible { display: block; }
.paywall-modal .paywall-video-wrap iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  border-radius: 8px;
}
.paywall-modal .paywall-video-back {
  display: block;
  text-align: left;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ui-ink-muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 12px;
}
.paywall-modal .paywall-video-back:hover { color: var(--ui-ink); }
.paywall-modal details {
  text-align: left;
  margin-top: 16px;
  font-size: 13px;
  color: var(--ui-ink-soft);
}
.paywall-modal details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ui-ink-muted);
  margin-bottom: 4px;
}
.paywall-modal details + details { margin-top: 8px; }
.paywall-modal .pro-features {
  list-style: none;
  padding: 0 8px 8px 0; /* added bottom padding */
  margin: 0 0 16px 0;
  text-align: left;
  display: grid;
  gap: 5px;
  /* Show ~4 rows, scroll for the rest. Each row is ~24px (12.5px font +
     5px gap + spacing); 4 rows ≈ 100px. The fade-bottom mask hints
     "there's more below" without an explicit scrollbar UI. */
  max-height: 108px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ui-rule) transparent;
  mask-image: linear-gradient(to bottom, black 0, black calc(100% - 18px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0, black calc(100% - 18px), transparent 100%);
}
.paywall-modal .pro-features::-webkit-scrollbar { width: 4px; }
.paywall-modal .pro-features::-webkit-scrollbar-thumb {
  background: var(--ui-rule);
  border-radius: 2px;
}
.paywall-modal .pro-features li:last-child {
  margin-bottom: 8px; /* added bottom margin */
}
.paywall-modal .pro-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ui-ink);
}
.paywall-modal .pro-features svg {
  flex-shrink: 0;
  color: var(--ui-accent);
}
.paywall-modal .pro-features li.context {
  color: var(--ui-accent);
  font-weight: 600;
}
.paywall-testimonial {
  margin: 8px 0 0 0;
  padding: 6px 10px;
  background: var(--ui-bg-deep);
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--ui-ink-soft);
  line-height: 1.4;
  text-align: left;
  font-style: italic;
}
.paywall-testimonial mark {
  background: none;
  color: var(--ui-accent);
  font-weight: 600;
}
.paywall-testimonial .testimonial-attr {
  display: inline;
  font-style: normal;
  font-size: 11.5px;
  color: var(--ui-ink-muted);
  text-decoration: none;
  white-space: nowrap;
}
.paywall-testimonial .testimonial-attr img {
  width: 11px;
  height: 11px;
  opacity: 0.6;
  filter: grayscale(1);
  vertical-align: -1px;
  margin-right: 3px;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-top: 8px;
}
.compare-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--ui-rule);
}
.compare-table tr:last-child td { border-bottom: none; }
.compare-table .price-col {
  text-align: right;
  color: var(--ui-ink-muted);
  font-variant-numeric: tabular-nums;
}
.compare-table .savings-col {
  text-align: right;
  color: var(--ui-accent);
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.compare-table tr.us td {
  font-weight: 700;
  color: var(--ui-ink);
}
.compare-table tr.us .price-col { color: var(--ui-ink); }
.compare-table .compare-link-col {
  text-align: right;
  white-space: nowrap;
  font-size: 11px;
}
.compare-table .compare-link-col a {
  color: var(--ui-ink-muted);
  text-decoration: none;
}
.compare-table .compare-link-col a:hover { color: var(--ui-accent); }
.multi-screen-illo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 8px 0 12px 0;
}
.multi-screen-illo .mini-phone {
  width: 16px;
  height: 30px;
  border-radius: 3px;
  background: var(--ui-bg);
  border: 1px solid var(--ui-rule);
  position: relative;
  flex-shrink: 0;
}
.multi-screen-illo .mini-phone::after {
  content: '';
  position: absolute;
  inset: 3px 2px;
  border-radius: 1.5px;
  background: linear-gradient(180deg, var(--ui-accent) 0%, transparent 70%);
  opacity: 0.4;
}
.multi-screen-illo .mini-phone:nth-child(2)::after { background: linear-gradient(180deg, #6b7c93 0%, transparent 70%); opacity: 0.35; }
.multi-screen-illo .mini-phone:nth-child(3)::after { background: linear-gradient(180deg, #d4a574 0%, transparent 70%); opacity: 0.45; }
.multi-screen-illo .mini-phone:nth-child(4)::after { background: linear-gradient(180deg, #5a8c7b 0%, transparent 70%); opacity: 0.4; }
.multi-screen-illo .mini-phone:nth-child(5)::after { background: linear-gradient(180deg, #b65d3c 0%, transparent 70%); opacity: 0.45; }
.multi-screen-illo .illo-arrow {
  color: var(--ui-ink-muted);
  font-size: 13px;
  margin: 0 4px;
}
.multi-screen-illo .illo-zip {
  width: 22px;
  height: 26px;
  border-radius: 2px;
  border: 1px solid var(--ui-rule);
  background: var(--ui-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 8px;
  font-weight: 700;
  color: var(--ui-ink-muted);
  letter-spacing: 0.3px;
}
.multi-screen-illo[hidden] { display: none; }
.export-cap-illo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 8px 0 12px 0;
  font-family: var(--sans);
}
.export-cap-illo .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ui-accent);
  flex-shrink: 0;
}
.export-cap-illo .dot.empty {
  background: transparent;
  border: 1.5px solid var(--ui-rule);
}
.export-cap-illo .illo-arrow {
  color: var(--ui-ink-muted);
  font-size: 13px;
  margin: 0 6px;
}
.export-cap-illo .infinity {
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
  color: var(--ui-accent);
  letter-spacing: -1px;
}
.export-cap-illo[hidden] { display: none; }
.aso-illo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 8px 0 12px 0;
  flex-wrap: wrap;
}
.aso-illo .aso-kw-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1d9d0;
  color: #a5553c;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--sans);
}
.aso-illo .illo-arrow {
  color: var(--ui-ink-muted);
  font-size: 13px;
  margin: 0 2px;
}
.aso-illo .aso-mini-apps {
  display: flex;
  gap: 4px;
}
.aso-illo .mini-app {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--ui-bg-deep);
  border: 1px solid var(--ui-rule);
}
.aso-illo .mini-app:nth-child(2) { background: #d4e8f0; }
.aso-illo .mini-app:nth-child(3) { background: #f0e0d4; }
.aso-illo[hidden] { display: none; }
.paywall-modal .pro-features .pro-feature-link,
.pro-benefits-list .pro-feature-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.paywall-modal .pro-features .pro-feature-link:hover,
.pro-benefits-list .pro-feature-link:hover {
  color: var(--ui-accent);
}
.lang-illo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 8px 0 12px 0;
  font-family: var(--sans);
}
.lang-illo .lang-pill {
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--ui-bg-deep);
  color: var(--ui-ink-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.lang-illo .lang-pill.more {
  background: var(--ui-accent);
  color: #fff;
}
.lang-illo[hidden] { display: none; }
.font-illo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 8px 0 12px 0;
}
.font-illo .glyph {
  font-size: 26px;
  line-height: 1;
  color: var(--ui-ink);
}
.font-illo .glyph.f1 { font-family: "Fraunces", Georgia, serif; font-weight: 500; }
.font-illo .glyph.f2 { font-family: "Outfit", system-ui, sans-serif; font-weight: 600; }
.font-illo .glyph.f3 { font-family: "DM Serif Display", Georgia, serif; font-style: italic; }
.font-illo .glyph.f4 { font-family: "JetBrains Mono", monospace; font-size: 22px; }
.font-illo[hidden] { display: none; }
.perspective-illo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 8px 0 12px 0;
}
.perspective-illo[hidden] { display: none; }
.perspective-illo .persp-phone {
  width: 20px;
  height: 36px;
  border-radius: 4px;
  border: 1.5px solid var(--ui-ink-muted);
  background: var(--ui-bg);
  position: relative;
}
.perspective-illo .persp-phone::after {
  content: '';
  position: absolute;
  inset: 3px 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--ui-accent) 0%, transparent 70%);
  opacity: 0.4;
}
.perspective-illo .persp-phone.tilted {
  transform: perspective(80px) rotateY(-12deg);
  border-color: var(--ui-accent);
}
.perspective-illo .persp-arrow {
  color: var(--ui-ink-muted);
  font-size: 13px;
}

@media (max-height: 700px), (max-width: 480px) {
  .paywall-overlay { padding: 12px; }
  .paywall-modal { padding: 24px 20px; max-height: calc(100vh - 24px); }
  .paywall-modal h2 { font-size: 17px; }
  .paywall-modal .paywall-sub { font-size: 12px; margin-bottom: 8px; }
  .paywall-modal .pro-features { gap: 3px; margin-bottom: 12px; }
  .paywall-modal .pro-features li { font-size: 12px; }
  .paywall-modal .pricing-options { gap: 8px; margin-bottom: 8px; }
  .paywall-modal .price-btn { padding: 12px 14px; }
  .paywall-testimonial { margin-top: 8px; padding: 6px 10px; font-size: 11px; }
  .multi-screen-illo { margin: 4px 0 8px; }
}

.post-purchase-check {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #27ae60;
  color: #fff;
  font-size: 24px;
  line-height: 48px;
  text-align: center;
  margin: 0 auto 16px;
}
.pro-benefits-list {
  list-style: none;
  padding: 0 8px 8px 0;
  margin: 12px 0 20px;
  text-align: left;
  display: grid;
  gap: 5px;
  max-height: 108px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ui-rule) transparent;
  mask-image: linear-gradient(to bottom, black 0, black calc(100% - 18px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0, black calc(100% - 18px), transparent 100%);
}
.pro-benefits-list::-webkit-scrollbar { width: 4px; }
.pro-benefits-list::-webkit-scrollbar-thumb { background: var(--ui-rule); border-radius: 2px; }
.pro-benefits-list li:last-child { margin-bottom: 8px; }
.pro-benefits-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ui-ink);
}
.pro-benefits-list svg { flex-shrink: 0; color: var(--ui-accent); }
.post-purchase-hint {
  font-size: 13px;
  color: var(--ui-ink-muted);
  margin-bottom: 16px;
}

/* ── Editor (left pane) ─────────────────────────────────── */
.editor {
  grid-area: editor;
  background: linear-gradient(180deg, #F0EFEB 0%, #DCDAD4 100%);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  max-height: 55vh; /* capped on mobile; removed on desktop */
  position: relative;
}

/* ── Mode toggle (Move / Select) ───────────────────────── */
.mode-toggle {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 500;
  display: flex; padding: 3px; gap: 2px;
  background: var(--ui-bg);
  border-radius: 8px;
  border: 1px solid var(--ui-rule);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.mode-toggle button {
  padding: 6px 12px;
  border: none; cursor: pointer;
  background: transparent; border-radius: 6px;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  color: var(--ui-ink-soft);
}
.mode-toggle button[aria-pressed="true"] {
  background: var(--ui-ink);
  color: white;
}

.callout-tooltip {
  position: fixed;
  z-index: 9999;
  background: var(--ui-ink);
  color: #fff;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 8px;
  max-width: 240px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.callout-tooltip.visible { opacity: 1; }

/* ── Expand button (mobile only) ────────────────────────── */
.expand-btn {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 500;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ui-bg);
  border: 1px solid var(--ui-rule);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  cursor: pointer;
  color: var(--ui-ink-soft);
}
.expand-btn:hover { border-color: var(--ui-accent); color: var(--ui-accent); }

/* Expanded state: editor takes full height, topbar hidden */
.app.expanded {
  grid-template-rows: 1fr;
  grid-template-areas: "editor" "controls";
}
.app.expanded .topbar { display: none; }
.app.expanded .mobile-banner { display: none !important; }
.app.expanded .editor {
  max-height: none;
  height: 100vh;
  padding: 12px;
}
.app.expanded .screens-strip { display: none; }
.app.expanded .pro-upsell-pill { display: none !important; }
.app.expanded .feedback-fab { display: none !important; }
@media (min-width: 900px) {
  .app.expanded {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 360px;
    grid-template-areas: "editor controls";
  }
  .app.expanded .editor { height: auto; }
}

/* The wrap reserves layout space at SCALE-down size; the canvas itself
   stays at full --canvas-w × --canvas-h inside, transform-scaled
   visually. This way html2canvas captures the unscaled box but the
   editor never overflows a sane viewport. */
.canvas-wrap {
  width: calc(var(--canvas-w) * var(--scale));
  height: calc(var(--canvas-h) * var(--scale));
  flex-shrink: 0;
}
.canvas {
  width: var(--canvas-w);
  height: var(--canvas-h);
  position: relative;
  overflow: hidden;
  transform: scale(var(--scale));
  transform-origin: top left;
  /* Flat fill — no gradient, no blend mode. Earlier versions stacked a
     radial vignette with `background-blend-mode: multiply` to add depth,
     but it (a) made the colour look much darker than the user's pick
     and (b) didn't survive html2canvas export, so the preview and PNG
     drifted apart. Flat is faithful and matches the export. */
  background-color: var(--canvas-bg);
  background-image: none;
}
.canvas.canvas-bg-transparent {
  --canvas-bg: transparent;
  background-color: #f0f0f0;
  background-image:
    linear-gradient(45deg, #ddd 25%, transparent 25%),
    linear-gradient(-45deg, #ddd 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ddd 75%),
    linear-gradient(-45deg, transparent 75%, #ddd 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}

/* ── Caption (top of canvas) ────────────────────────────── */
.caption-group {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 10;
}
.caption-group > * {
  pointer-events: auto;
}
.caption {
  position: absolute;
  top: var(--caption-top); bottom: auto;
  left: var(--pad-x); right: var(--pad-x);
  text-align: center;
  font-family: var(--display);
  font-weight: 400;
  color: var(--canvas-ink);
  font-size: var(--caption-fs);
  line-height: 1.08;
  text-wrap: balance;
}
body.caption-bottom .caption {
  top: auto;
  bottom: var(--caption-bot);
}
body.caption-bottom .screenshot-area {
  top: var(--bottom-cap-top);
  bottom: var(--bottom-cap-reserve, 380px);
}
.caption em {
  font-style: italic;
  color: var(--accent);
  font-family: var(--display);
}
.caption strong {
  font-weight: 700;
  color: var(--accent);
  font-family: var(--display);
  font-style: normal;
}
.caption strong em,
.caption em strong {
  font-weight: 700;
  font-style: italic;
  color: var(--accent);
  font-family: var(--display);
}
body.accent-invert .caption strong,
body.accent-invert .caption em,
body.accent-invert .caption strong em,
body.accent-invert .caption em strong {
  color: var(--canvas-bg-solid);
  background: var(--canvas-ink);
  border-radius: 0.14em;
  padding: 0.02em 0.16em 0.05em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
body.accent-invert .caption em,
body.accent-invert .caption strong em,
body.accent-invert .caption em strong {
  font-style: italic;
}
.caption.draggable {
  cursor: grab;
}
.caption.dragging-caption {
  cursor: grabbing;
}

.subtitle {
  position: absolute;
  left: var(--pad-x); right: var(--pad-x);
  text-align: center;
  font-family: var(--sans);
  font-weight: 600;
  color: var(--canvas-ink-soft);
  font-size: var(--subtitle-fs);
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-wrap: balance;
}
.subtitle:empty { display: none; }
.subtitle em {
  font-style: italic;
  color: var(--accent);
  text-transform: none;
}
.subtitle strong {
  font-weight: 700;
  color: var(--accent);
  text-transform: none;
}
.subtitle strong em,
.subtitle em strong {
  font-weight: 700;
  font-style: italic;
  color: var(--accent);
  text-transform: none;
}
body.accent-invert .subtitle strong,
body.accent-invert .subtitle em,
body.accent-invert .subtitle strong em,
body.accent-invert .subtitle em strong {
  color: var(--canvas-bg-solid);
  background: var(--canvas-ink);
  border-radius: 0.14em;
  padding: 0.02em 0.16em 0.05em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-transform: none;
}
body.accent-invert .subtitle em,
body.accent-invert .subtitle strong em,
body.accent-invert .subtitle em strong {
  font-style: italic;
}
.subtitle-above { bottom: auto; }
.subtitle-below { top: auto; }

/* ── Screenshot area ────────────────────────────────────── */
.screenshot-area {
  position: absolute;
  left: var(--screenshot-left, var(--pad-x)); right: var(--screenshot-right, var(--pad-x));
  top: var(--screenshot-top); bottom: var(--pad-bottom);
  display: flex; align-items: center; justify-content: center;
  transition: all 200ms ease;
}
.screenshot-area:not(.has-image) {
  border: 6px dashed var(--canvas-rule);
  border-radius: 60px;
}
.screenshot-area.dragover {
  border-color: var(--accent);
  background: rgba(190,100,74,0.06);
}
.screenshot-area img#screenshot {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.screenshot-screen {
  display: contents;
}
.screenshot-stage {
  display: contents;
}
.screenshot-area.has-image .screenshot-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
  transform: translate(var(--stage-tx, 0px), var(--stage-ty, 0px));
}
.screenshot-area.has-image .screenshot-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
}
.screenshot-area.perspective-on {
  perspective: 1200px;
}
.screenshot-area.perspective-on .screenshot-stage {
  transform: translate(var(--stage-tx, 0px), var(--stage-ty, 0px)) rotateY(var(--perspective-angle, 0deg));
  transform-style: preserve-3d;
}
.screenshot-area.has-image {
  overflow: visible;
}
body.frame-on .screenshot-area {
  transition: none;
}
/* Rounded screen mask; black shows only at corner bleed behind the bezel PNG. */
body.frame-on .screenshot-area.has-image .screenshot-screen {
  background-color: #000;
  border-radius: var(--frame-radius, 55px);
  overflow: hidden;
}
/* Fill the device cutout — crop if aspect differs (no side letterboxing). */
body.frame-on .screenshot-area.has-image img#screenshot {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
}
body.rounded-screenshot:not(.frame-on) .screenshot-area.has-image img#screenshot {
  border-radius: var(--screenshot-radius, 55px);
}
.screenshot-area img.upscaled {
  max-width: none;
  max-height: none;
}
.drop-hint {
  text-align: center;
  color: var(--canvas-ink-soft);
}
.drop-hint .big {
  font-family: var(--display);
  font-size: var(--drop-big-fs);
  font-style: italic;
  line-height: 1;
}
.drop-hint .small {
  margin-top: 28px;
  font-family: var(--mono);
  font-size: var(--drop-small-fs);
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--canvas-ink-muted);
}

/* ── Per-locale screenshot chip (above canvas) ───────────── */
.locale-img-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--ui-bg);
  color: var(--ui-ink);
  border: 1px solid var(--ui-rule);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
  white-space: nowrap;
}
.locale-img-chip:hover {
  border-color: var(--ui-accent);
  box-shadow: 0 3px 10px rgba(0,0,0,0.10);
}
.locale-img-chip.hidden { display: none; }
.locale-img-chip.has-image {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: white;
}
.locale-img-chip.has-image:hover {
  background: #a5553c;
  border-color: #a5553c;
}
.locale-img-revert {
  font-size: 13px;
  line-height: 1;
  opacity: 0.7;
  cursor: pointer;
}
.locale-img-revert:hover { opacity: 1; }
.locale-img-revert.hidden { display: none; }
.exporting .locale-img-chip { display: none; }

/* ── Callouts (zoom-in overlays) ────────────────────────── */
.callout {
  position: absolute;
  cursor: grab;
  padding: 6px;
  border: 1px solid var(--canvas-rule);
  border-radius: 28px;
  background: var(--canvas-bg);
  box-shadow: none;
  user-select: none;
  z-index: 200;
}
.callout.dragging { cursor: grabbing; opacity: 0.95; }
.callout.active { border-color: var(--accent); }
.callout-clip {
  width: 100%; height: 100%;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  background: #fff;
}
.callout-clip img {
  position: absolute;
  max-width: none; max-height: none;
  pointer-events: none;
  user-select: none;
}
.screenshot-area.has-image img {
  cursor: grab;
}
.screenshot-area.has-image.mode-select img {
  cursor: crosshair;
}
.screenshot-area.has-image.dragging-screenshot img {
  cursor: grabbing;
}
.snap-axis {
  position: absolute;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  z-index: 300;
  transition: opacity 100ms ease;
}
.snap-axis.visible { opacity: 0.5; }
.snap-axis-x {
  left: 50%; top: 0; bottom: 0;
  width: 2px;
  transform: translateX(-50%);
}
.snap-axis-y {
  top: 50%; left: 0; right: 0;
  height: 2px;
  transform: translateY(-50%);
}
.selection {
  position: absolute;
  border: 4px solid var(--accent);
  background: rgba(190,100,74,0.15);
  pointer-events: none;
  z-index: 100;
  border-radius: 8px;
}
.retouch-rect {
  position: absolute;
  z-index: 40;
  pointer-events: none;
}
.retouch-rect.interactive {
  pointer-events: auto;
  cursor: pointer;
}
.retouch-selection {
  position: absolute;
  pointer-events: none;
  z-index: 100;
  opacity: 0.6;
}
.device-frame-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 50;
}
.device-frame-overlay img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.toggle-row label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ui-ink-soft);
  font-weight: 600;
  flex: 1;
}
.toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--ui-bg-deep);
  border: 1px solid var(--ui-rule);
  border-radius: 10px;
  cursor: pointer;
  transition: background 150ms ease;
  flex-shrink: 0;
}
.toggle-switch.on {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
}
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  transition: transform 150ms ease;
}
.toggle-switch.on::after {
  transform: translateX(16px);
}
.frame-group.unavailable {
  opacity: 0.4;
  pointer-events: none;
}

.exporting .screenshot-area { border: none !important; }
.exporting .drop-hint { display: none; }
.exporting .snap-axis { display: none; }
.exporting .callout.active { border-color: var(--canvas-rule); }

/* ── Controls panel ─────────────────────────────────────── */
.controls {
  grid-area: controls;
  padding: 22px;
  border-top: 1px solid var(--ui-rule); /* becomes border-left on desktop */
  background: var(--ui-bg);
  display: flex; flex-direction: column;
  gap: 18px;
  overflow-y: visible; /* page scrolls on mobile; desktop overrides to auto */
}
.controls h1 {
  /* Pinned UI serif — see note above. */
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
  margin: 0 0 4px;
  color: var(--ui-ink);
}
.controls h1 .dot { color: var(--ui-accent); }
.controls .sub {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ui-ink-muted);
  font-weight: 700;
  margin-bottom: 6px;
}

.group {
  border-top: 1px solid var(--ui-rule);
  padding-top: 14px;
}
.group-title {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ui-ink-muted);
  font-weight: 700;
  margin-bottom: 8px;
}
.group-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.group-title-row .group-title {
  margin-bottom: 0;
}
.theme-override-link {
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: 0.2px;
  text-transform: none;
  white-space: nowrap;
}
.theme-override-link[aria-pressed="true"] {
  color: var(--ui-accent);
  font-weight: 600;
}
details.collapsible-group {
  border-top: 1px solid var(--ui-rule);
  padding-top: 14px;
  padding-bottom: 0px;
}
details.collapsible-group[open] {
  /* When open, the field content provides its own bottom spacing; no
     extra padding needed at the bottom of the details box. */
  padding-bottom: 0;
}
details.collapsible-group > summary.group-title {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
}
details.collapsible-group[open] > summary.group-title {
  margin-bottom: 8px;
}
details.collapsible-group > summary.group-title::after {
  content: '▸';
  font-size: 10px;
  transition: transform 0.15s;
}
details.collapsible-group[open] > summary.group-title::after {
  transform: rotate(90deg);
}
details.collapsible-group > .field:first-of-type {
  margin-top: 8px;
}
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.field:last-child { margin-bottom: 0; }
.field label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ui-ink-soft);
  font-weight: 600;
}
.field-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.field-label-row > label {
  margin: 0;
}
.accent-invert-btn {
  flex-shrink: 0;
  width: 24px;
  height: 16px;
  padding: 0;
  border: 1px solid var(--ui-rule);
  border-radius: 4px;
  background: var(--ui-bg-deep);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  color: var(--ui-ink-muted);
  letter-spacing: -0.2px;
  text-transform: none;
}
.accent-invert-btn.on {
  background: var(--canvas-ink);
  color: var(--canvas-bg-solid);
  border-color: transparent;
}
.accent-invert-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.field textarea, .field input[type="text"], .field input[type="number"], .field select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--ui-rule);
  border-radius: 8px;
  background: white;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.25;
  color: var(--ui-ink);
  outline: none;
  resize: vertical;
}
.field textarea {
  padding: 8px 10px;
}
.field input[type="range"] { width: 100%; }
.perspective-lock,
.pro-lock {
  display: inline-flex;
  color: var(--ui-accent);
  cursor: pointer;
}
.perspective-lock:hover,
.pro-lock:hover { opacity: 0.7; }
.perspective-lock.hidden,
.pro-lock.hidden { display: none; }
.beta-pill {
  font-family: var(--sans);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--ui-accent);
  color: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.4;
}
.subtitle-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.subtitle-input-row input[type="text"] {
  flex: 1;
  min-width: 0;
}
.subtitle-color-swatch {
  width: 30px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--ui-rule);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.subtitle-color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.subtitle-color-swatch::-webkit-color-swatch { border: none; border-radius: 4px; }
.subtitle-color-swatch::-moz-color-swatch { border: none; border-radius: 4px; }

/* ── Emoji overlay (rendered inside the canvas) ── */
.emoji-overlay {
  position: absolute;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  line-height: 1;
  user-select: none;
  cursor: grab;
  /* Above callouts (200) so stickers stay visible on zoom overlays. */
  z-index: 250;
  pointer-events: auto;
  /* No background; emoji sits flat over the screenshot like in the
     burger/thumbs-up reference. */
}
.emoji-overlay.dragging { cursor: grabbing; }
.emoji-overlay.active {
  outline: 2px dashed var(--ui-accent);
  outline-offset: 6px;
}

/* ── Emoji picker UI (right-rail controls) ── */
.emoji-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.emoji-input-row input { flex: 1; }
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  margin-top: 6px;
  max-height: 200px;
  overflow-y: auto;
  padding-right: 4px;
}
.emoji-grid button {
  font-size: 20px;
  line-height: 1;
  padding: 4px 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.emoji-grid button:hover {
  background: var(--ui-bg);
  border-color: var(--ui-rule);
}
.emoji-custom-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.field .emoji-custom-row input[type="text"] {
  width: 56px;
  flex: none;
  text-align: center;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  font-size: 16px;
  padding: 6px 8px;
}
.emoji-custom-row .emoji-custom-label {
  font-size: 11px;
  color: var(--ui-ink-muted);
  font-family: var(--mono);
  letter-spacing: 0.4px;
}
.emoji-custom-row input.invalid {
  border-color: #c44;
  animation: emoji-shake 0.25s ease-in-out;
}
@keyframes emoji-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}
.emoji-os-hint {
  margin-top: 6px;
  font-size: 11px;
}
.emoji-os-hint kbd {
  font-family: var(--mono);
  font-size: 10px;
  padding: 1px 4px;
  border: 1px solid var(--ui-rule);
  border-radius: 3px;
  background: var(--ui-bg);
}
.emoji-see-demo {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ui-accent);
  text-decoration: none;
}
.emoji-see-demo:hover { text-decoration: underline; }
.emoji-see-demo[hidden] { display: none; }

/* ── Badge overlay (rendered inside the canvas) ────────────── */
.badge {
  position: absolute;
  /* Use width: max-content so the badge sizes to its content and stays
     stable regardless of `left` position. Without this, the available
     space changes as the badge moves and `text-wrap: balance` inside
     .badge-main reflows differently — gap between laurels and text
     visibly grows when dragged toward the canvas edge. */
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Tight gap so laurels read as part of the badge (touching the text),
     matching App Store / award-style references. */
  gap: 4px;
  z-index: 10;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  /* Color cascades to text + laurels (via currentColor inside the SVG).
     Set inline per-badge in JS so each badge can be themed individually. */
  color: var(--canvas-ink);
  /* Font scaling: --b-scale carries the per-badge multiplier, applied
     against a canvas-size scale set by JS as --b-fs-base. */
  --b-fs-base: 96px;
  --b-scale: 1;
  font-size: calc(var(--b-fs-base) * var(--b-scale));
}
.badge.dragging { cursor: grabbing; }
.badge.active {
  outline: 2px dashed var(--ui-accent);
  outline-offset: 12px;
  outline-color: var(--ui-accent);
}

.badge-laurel {
  flex: none;
  /* Aspect ratio matches the laurel-1 source (40 × 66 ≈ 0.606). Width is
     pinned explicitly — the SVG was rendering at width:0 with just
     `width: auto` inside a flex parent. */
  height: calc(var(--b-fs-base) * var(--b-scale) * 1.6);
  width: calc(var(--b-fs-base) * var(--b-scale) * 1.6 * 0.606);
  color: inherit;
}
/* The right-side laurel mirrors itself inside the SVG (path transform
   set in makeLaurelSvg). We don't flip via CSS here because html2canvas
   silently drops CSS transforms applied to <svg> hosts on export — the
   live canvas would mirror but the exported PNG wouldn't. */

.badge-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.1;
  /* Follows the theme display font — same family the user picks for
     caption/subtitle, so badges feel like part of the screenshot's
     visual system rather than a separate award-medal block. */
  font-family: var(--display);
}
.badge--stat .badge-main {
  font-size: calc(var(--b-fs-base) * var(--b-scale) * 1.15);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
}
.badge--stat .badge-sub {
  font-size: calc(var(--b-fs-base) * var(--b-scale) * 0.45);
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.1;
  margin-top: 8px;
  opacity: 0.9;
}
.badge--quote .badge-main {
  font-size: calc(var(--b-fs-base) * var(--b-scale) * 0.85);
  font-style: italic;
  font-weight: 500;
  text-wrap: balance;
  max-width: 11ch;
  line-height: 1.15;
}
.badge--quote .badge-sub {
  font-size: calc(var(--b-fs-base) * var(--b-scale) * 0.42);
  font-weight: 500;
  letter-spacing: 0.3px;
  margin-top: 10px;
  opacity: 0.8;
}
.badge-stars {
  margin-top: 4px;
  line-height: 0;
}
.badge-stars svg {
  width: calc(var(--b-fs-base) * var(--b-scale) * 1.5);
  height: auto;
  color: inherit;
}
.badge-text .badge-sub:empty { display: none; }

/* ── Badge picker (right rail) ── */
.badge-add-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.badge-add-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.badge-add-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ui-ink-muted);
  text-align: center;
}
.badge-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  background: var(--ui-bg);
  border: 1px solid var(--ui-rule);
  border-radius: 6px;
  cursor: pointer;
  color: var(--ui-ink);
  font-family: var(--sans);
}
.badge-add-btn:hover { border-color: var(--ui-ink-soft); }
.badge-add-laurel-mount {
  display: inline-flex;
  flex: none;
}
.badge-add-laurel-mount svg {
  /* laurel aspect ~0.606. Small icon-sized preview. */
  width: 18px;
  height: 30px;
  color: var(--ui-ink);
}
.badge-add-laurel-mount[data-side="right"] svg { transform: scaleX(-1); }
.badge-add-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  min-width: 0;
}
.badge-add-preview .badge-add-main {
  font-weight: 700;
  font-size: 14px;
}
.badge-add-preview .badge-add-sub {
  font-weight: 500;
  font-size: 8px;
  color: var(--ui-ink-muted);
  margin-top: 2px;
}
.badge-add-preview--quote .badge-add-main {
  font-style: italic;
  font-weight: 500;
  font-size: 11px;
  white-space: nowrap;
}
.badge-add-preview--quote .badge-add-sub {
  font-style: normal;
  font-size: 8px;
}

/* ── Badge editor (right rail) ── */
.badge-controls label {
  margin-top: 8px;
}
.badge-controls label:first-of-type {
  margin-top: 0;
}
.badge-controls .badge-hint {
  margin-top: 4px;
  margin-bottom: 0;
}
.badge-mini-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ui-ink-muted);
  font-weight: 700;
  display: block;
  margin-bottom: 4px !important;
}
.badge-row-split {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}
.badge-row-left, .badge-row-right {
  flex: 1;
  min-width: 0;
}
.badge-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.badge-color-row .swatch {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--ui-rule);
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
}
.badge-color-row .swatch-value {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ui-ink-muted);
}
.badge-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ui-ink);
  cursor: pointer;
  text-transform: none !important;
  letter-spacing: 0 !important;
  height: 28px;
}
.badge-toggle input[type="checkbox"] { margin: 0; cursor: pointer; }
.badge-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

/* ── Paywall illustration for badge feature ── */
.badge-illo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0;
  color: var(--ui-ink);
}
.badge-illo[hidden] { display: none; }
.badge-illo-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.badge-illo-laurel {
  /* laurel-1 viewBox 40 × 66 → aspect ~0.606. Sized for the paywall
     illustration row (must read at a glance, not dominate the modal). */
  width: 26px;
  height: 43px;
  color: inherit;
}
.badge-illo-laurel--right { transform: scaleX(-1); }
.badge-illo-laurel-mount { display: inline-flex; }
.badge-illo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.badge-illo-main {
  font-family: "Fraunces", Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.badge-illo-sub {
  font-family: var(--sans);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-top: 3px;
  opacity: 0.7;
}

/* ── Paywall illustration for emoji feature ── */
.emoji-illo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 4px;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.emoji-illo[hidden] { display: none; }
.emoji-illo-item {
  font-size: 36px;
  line-height: 1;
  display: inline-block;
  animation: emoji-float 2.4s ease-in-out infinite;
}
.emoji-illo-item.e1 { animation-delay: 0s; }
.emoji-illo-item.e2 { animation-delay: 0.15s; }
.emoji-illo-item.e3 { animation-delay: 0.3s; font-size: 44px; }
.emoji-illo-item.e4 { animation-delay: 0.45s; }
.emoji-illo-item.e5 { animation-delay: 0.6s; }
@keyframes emoji-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-6px) rotate(3deg); }
}
.subtitle-font-toggle {
  width: 28px;
  height: 28px;
  border: 1px solid var(--ui-rule);
  border-radius: 4px;
  background: var(--ui-bg);
  color: var(--ui-ink-soft);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  font-family: var(--sans);
  line-height: 1;
}
.subtitle-font-toggle:hover { border-color: var(--ui-ink-soft); }
.subtitle-font-toggle.display-mode {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
}
.font-select-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.font-select-row select { flex: 1; }
.remove-font-btn {
  display: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--ui-rule);
  border-radius: 4px;
  background: var(--ui-bg);
  color: var(--ui-ink-soft);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.remove-font-btn:hover {
  color: #c0392b;
  border-color: #c0392b;
}
.remove-font-btn.visible { display: block; }
.hint {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ui-ink-faint);
  letter-spacing: 0.4px;
  line-height: 1.5;
}
.file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px dashed var(--ui-rule);
  background: var(--ui-bg-soft);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.25;
  color: var(--ui-ink);
  text-align: left;
}
.file-btn:hover { background: var(--ui-bg-deep); }
.fmt-btn {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ui-rule);
  border-radius: 5px;
  background: white;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ui-ink);
  flex-shrink: 0;
}
.fmt-btn:hover { background: var(--ui-bg-deep); }

/* Discreet inline trigger for the gradient builder — sits below the bg
   image upload, intentionally low-emphasis since gradients are a less
   common pick than a flat colour or photo. */
.link-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--ui-ink-muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
}
.link-btn:hover { color: var(--ui-ink); }
.gradient-panel {
  margin-top: 6px;
  padding: 10px 12px 12px;
  background: var(--ui-bg-soft);
  border: 1px solid var(--ui-rule);
  border-radius: 8px;
}
.gradient-panel[hidden] { display: none; }
.gradient-panel .angle-val {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ui-ink-soft);
  margin-left: 6px;
  text-transform: none;
  letter-spacing: 0.3px;
}

.row { display: flex; gap: 8px; }
.row > * { flex: 1; }

/* Native colour picker, styled to a small swatch button so it doesn't
   look like a default browser blob. The native picker still opens on
   click; we just paint over its chrome. */
.swatch-row {
  display: flex; align-items: center; gap: 6px;
}
.swatch {
  width: 30px; height: 26px;
  padding: 0;
  border: 1px solid var(--ui-rule);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
}
.swatch::-webkit-color-swatch-wrapper { padding: 0; }
.swatch::-webkit-color-swatch         { border: none; border-radius: 4px; }
.swatch::-moz-color-swatch            { border: none; border-radius: 4px; }
.swatch-row .swatch-value {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ui-ink-soft);
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: 4px 5px !important;
  outline: none;
}
.bg-style-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.bg-style-row .file-btn {
  flex: 1;
  min-width: 120px;
  text-align: center;
}
.bg-style-row .bg-clear-btn {
  flex: 0 0 auto;
}
.bg-style-row .link-btn {
  margin-left: 0;
  margin-top: 0;
  flex-shrink: 0;
}
.bg-image-clear-btn[hidden] { display: none; }

.bg-clear-btn {
  flex-shrink: 0;
  border: 1px solid var(--ui-rule);
  border-radius: 6px;
  background: repeating-conic-gradient(#ddd 0% 25%, #f5f5f5 0% 50%) 50% / 8px 8px;
  width: 30px;
  height: 26px;
  padding: 0;
  cursor: pointer;
  font-size: 0;
}
.bg-clear-btn:hover { border-color: var(--ui-ink-muted); }
.bg-clear-btn.active {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 1px var(--ui-accent);
}

.seg {
  display: flex; padding: 2px; gap: 2px;
  background: var(--ui-bg-deep); border-radius: 8px; border: 1px solid var(--ui-rule);
}
.seg button {
  flex: 1;
  padding: 6px 8px;
  border: none; cursor: pointer;
  background: transparent; border-radius: 6px;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  color: var(--ui-ink-soft);
}
.seg button[aria-pressed="true"] {
  background: white;
  color: var(--ui-ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.actions {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--ui-rule);
}
.btn {
  padding: 13px 16px;
  border-radius: 999px;
  border: none;
  background: var(--ui-ink); color: white;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 12px 28px -12px rgba(26,26,26,0.4);
  text-align: center;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.secondary {
  background: transparent; border: 1px solid var(--ui-rule); color: var(--ui-ink); box-shadow: none;
}
.btn.add {
  padding: 9px 14px; font-size: 12.5px; box-shadow: none;
  background: var(--ui-bg-soft); color: var(--ui-ink); border: 1px solid var(--ui-rule);
}

.export-wrap { position: relative; }
.export-wrap .btn { width: 100%; padding-right: 36px; }
.export-chevron {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.15); color: white;
  font-size: 14px; cursor: pointer; display: none;
  align-items: center; justify-content: center;
}
.export-wrap.has-options .export-chevron { display: flex; }
.export-chevron:hover { background: rgba(255,255,255,0.25); }
.export-menu {
  display: none;
  position: absolute; bottom: 100%; left: 0; right: 0;
  margin-bottom: 4px;
  background: var(--ui-bg);
  border: 1px solid var(--ui-rule);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  overflow: hidden;
  z-index: 10;
}
.export-menu.open { display: block; }
.export-menu button {
  display: block; width: 100%;
  padding: 10px 14px;
  border: none; background: none;
  font-family: var(--sans); font-size: 13px;
  text-align: left; cursor: pointer;
  color: var(--ui-ink);
}
.export-menu button:hover { background: var(--ui-bg-soft); }
.export-menu button:disabled { opacity: 0.4; cursor: not-allowed; }
.export-menu-sep {
  height: 1px;
  margin: 4px 0;
  background: var(--ui-rule);
}
.export-menu-sep[hidden] { display: none; }

.reset-wrap { position: relative; }
.reset-wrap .btn { width: 100%; }
.reset-menu {
  display: none;
  position: absolute; bottom: 100%; left: 0; right: 0;
  margin-bottom: 4px;
  background: var(--ui-bg);
  border: 1px solid var(--ui-rule);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  overflow: hidden;
  z-index: 10;
}
.reset-menu.open { display: block; }
.reset-menu button {
  display: block; width: 100%;
  padding: 10px 14px;
  border: none; background: none;
  font-family: var(--sans); font-size: 13px;
  text-align: left; cursor: pointer;
  color: var(--ui-ink);
}
.reset-menu button:hover { background: var(--ui-bg-soft); }
.reset-menu button[data-action="project"] { color: #c0392b; }

.status {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.6px;
  color: var(--ui-ink-faint); text-align: center;
}

.callout-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px;
  background: var(--ui-bg-soft); border: 1px solid var(--ui-rule);
  margin-bottom: 6px;
}
.callout-row .label {
  flex: 1; font-size: 12px; color: var(--ui-ink); font-family: var(--mono);
}
.callout-row button {
  padding: 4px 8px; border-radius: 6px; border: 1px solid var(--ui-rule);
  background: white; cursor: pointer; font-size: 11px;
}

/* ── Export overlay ────────────────────────────────────────
   During PNG export we have to drop the canvas's `transform: scale()`
   so html2canvas captures it at native resolution. That makes the
   on-screen canvas momentarily balloon to 1290×2796 (or larger),
   which looked like the page broke. Two-part fix:
     1. body.exporting parks the canvas off-screen via position:fixed
        (rule below). html2canvas still reads its layout, so the PNG
        renders at full size.
     2. .export-overlay covers the editor pane with a quiet spinner so
        the user sees a status, not an empty canvas-wrap. */
.export-overlay {
  position: fixed;
  top: 52px; left: 0; right: 0; bottom: 0;
  z-index: 1500;
  background: rgba(244, 242, 238, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--sans);
  color: var(--ui-ink);
  pointer-events: all; /* swallow clicks so the user can't tweak mid-render */
}
.export-overlay.visible { display: flex; }
.export-overlay .spinner {
  width: 30px; height: 30px;
  border: 3px solid var(--ui-rule);
  border-top-color: var(--ui-accent);
  border-radius: 50%;
  animation: ezspin 0.8s linear infinite;
}
.export-overlay .label    { font-size: 13px; font-weight: 600; }
.export-overlay .sub-label{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 1px;
  color: var(--ui-ink-muted);
}
.export-progress {
  width: 240px;
  height: 6px;
  background: var(--ui-bg-soft);
  border: 1px solid var(--ui-rule);
  border-radius: 3px;
  overflow: hidden;
}
.export-progress[hidden] { display: none; }
.export-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--ui-accent);
  transition: width 120ms linear;
}
.export-cancel {
  margin-top: 4px;
  padding: 6px 14px;
  border: 1px solid var(--ui-rule);
  border-radius: 999px;
  background: white;
  color: var(--ui-ink);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11.5px;
  cursor: pointer;
}
.export-cancel:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.export-cancel[hidden] { display: none; }
.export-cancel:disabled { opacity: 0.6; cursor: not-allowed; }
@keyframes ezspin { to { transform: rotate(360deg); } }

body.exporting #canvas {
  position: fixed !important;
  left: -100000px !important;
  top: 0 !important;
  transform: none !important;
}

/* ── Floating feedback FAB (bottom-left) ──────────────── */
.feedback-fab {
  position: fixed;
  bottom: 24px; left: 24px;
  z-index: 1000;
  padding: 12px 18px;
  border: 1px solid var(--ui-rule);
  border-radius: 999px;
  background: var(--ui-ink);
  color: white;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 14px 30px -12px rgba(26,26,26,0.45);
  display: none; /* hidden on mobile; shown on desktop via min-width query */
  align-items: center; gap: 8px;
  transition: transform 120ms ease;
  text-decoration: none;
}
.feedback-fab:hover { transform: translateY(-1px); }
.feedback-fab .pulse {
  width: 8px; height: 8px;
  background: var(--ui-accent);
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(190,100,74,0.7);
  animation: fab-pulse 1.8s infinite;
}
@keyframes fab-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(190,100,74,0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(190,100,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(190,100,74,0); }
}
.feedback-fab .tooltip {
  position: absolute;
  bottom: calc(100% + 10px); left: 0;
  background: var(--ui-ink);
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.feedback-fab:hover .tooltip { opacity: 0.95; }

/* Responsive scale: shrink the canvas preview a bit on shorter viewports.
   Real per-preset scaling happens in JS so taller phones / iPad still fit. */
@media (max-height: 1000px) { :root { --scale: 0.26; } }
@media (max-height: 800px)  { :root { --scale: 0.22; } }

.desktop-only { display: none; }

/* ── Keyboard hint (multi-screen, below strip) ── */
.expand-hint {
  display: none;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ui-ink-faint);
  letter-spacing: 0.3px;
  margin-top: -8px;
}
.expand-hint.visible { display: block; }

/* ── Screens strip (Pro feature) ─────────────────────────── */
.screens-strip {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  /* Small vertical padding gives the scrollbar (when present) air. */
  padding: 4px 2px;
}
.exporting .screens-strip { display: none; }

.screen-tile {
  flex: 0 0 auto;
  width: 52px; height: 76px;
  border: 2px solid transparent;
  border-radius: 6px;
  background: var(--ui-bg-soft);
  cursor: pointer;
  padding: 3px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-family: var(--sans);
  position: relative;
  transition: border-color 0.12s, background 0.12s;
}
.screen-tile:hover { border-color: var(--ui-rule); background: var(--ui-bg); }
.screen-tile[aria-pressed="true"] {
  border-color: var(--ui-accent);
  background: var(--ui-bg);
}
.screen-tile-thumb {
  flex: 1;
  border-radius: 3px;
  background: rgba(0,0,0,0.05) center / cover no-repeat;
  margin-bottom: 3px;
  min-height: 0;
}
.screen-tile-empty {
  flex: 1;
  border: 1px dashed var(--ui-ink-faint);
  border-radius: 3px;
  margin-bottom: 3px;
  display: flex;
  align-items: center; justify-content: center;
  font-size: 9px;
  color: var(--ui-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.screen-tile-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ui-ink-muted);
  text-align: center;
}
.screen-tile-style-dot {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 5px;
  height: 5px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--ui-accent);
  pointer-events: none;
}

.screen-tile-add {
  border: 2px dashed var(--ui-rule);
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  color: var(--ui-ink-muted);
  font-weight: 300;
}
.screen-tile-add:hover {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}

.screen-tile-delete, .screen-tile-dup {
  position: absolute;
  top: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 11px;
  line-height: 14px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s;
  user-select: none;
}
.screen-tile-delete { right: 2px; }
.screen-tile-dup { left: 2px; font-size: 10px; }
.screen-tile:hover .screen-tile-delete,
.screen-tile:hover .screen-tile-dup { opacity: 1; }

.screen-tile.dragging { opacity: 0.35; }
.screen-tile.drop-before { box-shadow: -3px 0 0 0 var(--ui-accent); }
.screen-tile.drop-after  { box-shadow:  3px 0 0 0 var(--ui-accent); }

/* ── Pro upsell pill (free users only) ────────────────────
   Sits below the canvas in normal flow, where the screens strip
   would be for Pro users. Clicking opens the paywall modal with
   multi-screen context copy. */
.pro-upsell-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--ui-bg);
  color: var(--ui-ink);
  border: 1px solid var(--ui-rule);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.pro-upsell-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
  border-color: var(--ui-accent);
}
.pro-upsell-pill svg { color: var(--ui-accent); }
.exporting .pro-upsell-pill { display: none; }

/* ── AI localization (Languages group + accordion) ───────── */
.lang-source-line {
  font-size: 11px;
  color: var(--ui-ink-muted);
  margin-bottom: 8px;
}
.lang-selected-summary {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 8px;
  min-height: 0;
}
.lang-selected-summary:empty { margin-bottom: 0; }
#langChipsToggle {
  margin-bottom: 4px;
}
#langChipsToggle.prominent {
  display: block;
  margin-top: 6px;
  padding: 8px 14px;
  background: var(--ui-bg-soft);
  border: 1px dashed var(--ui-rule);
  border-radius: 8px;
  color: var(--ui-ink-soft);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
#langChipsToggle.prominent:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.lang-selected-summary .lang-chip {
  padding: 4px 8px;
  font-size: 10.5px;
}
.lang-selected-summary .more-chip {
  padding: 4px 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ui-ink-muted);
  border: 1px solid var(--ui-rule);
  border-radius: 999px;
  background: white;
  cursor: pointer;
}
.lang-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
  margin-bottom: 10px;
  padding: 10px 12px 12px;
  background: var(--ui-bg-soft);
  border: 1px solid var(--ui-rule);
  border-radius: 8px;
}
.lang-chips[hidden] { display: none; }
.lang-dnt-field[hidden] { display: none; }
.lang-dnt-field {
  margin-top: 10px;
}
.lang-chip {
  padding: 6px 10px;
  border: 1px solid var(--ui-rule);
  border-radius: 999px;
  background: white;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ui-ink-soft);
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.lang-chip:hover { border-color: var(--ui-ink-faint); }
.lang-chip[aria-pressed="true"] {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: white;
}
.lang-chip .code {
  font-family: var(--mono);
  font-size: 9.5px;
  opacity: 0.7;
  letter-spacing: 0.5px;
}
.lang-chip .rtl-tag {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.5px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(0,0,0,0.06);
  color: var(--ui-ink-muted);
}
.lang-chip[aria-pressed="true"] .rtl-tag { background: rgba(255,255,255,0.18); color: white; }

.lang-actions-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.lang-translate-btn {
  flex: 1;
  padding: 9px 14px;
  border: 1px solid var(--ui-rule);
  border-radius: 8px;
  background: var(--ui-ink);
  color: white;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.12s, opacity 0.12s;
  min-width: 160px;
}
.lang-translate-btn:hover:not(:disabled) { background: #000; }
.lang-translate-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.lang-quota {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--ui-ink-muted);
  flex: 0 0 auto;
}
.lang-quota.warning { color: var(--ui-accent); }

.lang-banner {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ui-accent);
  background: rgba(190,100,74,0.08);
  color: var(--ui-ink);
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.5;
}
.lang-banner.hidden { display: none; }

/* Free-user lock state */
.lang-locked {
  text-align: center;
  padding: 16px 12px;
  border: 1px dashed var(--ui-rule);
  border-radius: 10px;
  background: var(--ui-bg-soft);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.lang-locked:hover { border-color: var(--ui-accent); background: rgba(190,100,74,0.04); }
.lang-locked .lock-icon {
  display: inline-flex; vertical-align: middle; margin-right: 6px;
  color: var(--ui-accent);
}
.lang-locked .title {
  font-weight: 700; font-size: 12.5px; color: var(--ui-ink);
}
.lang-locked .sub {
  font-size: 11px; color: var(--ui-ink-muted); margin-top: 4px;
}

/* Inline translation accordion under the caption (step 5) */
.tx-accordion {
  margin-top: 10px;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.tx-accordion:empty { display: none; }
.tx-row {
  border: 1px solid var(--ui-rule);
  border-radius: 6px;
  background: white;
  padding: 5px 8px;
}
.tx-row-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 4px;
  margin-bottom: 3px;
}
.tx-row-head .meta {
  font-size: 10.5px; font-weight: 600; color: var(--ui-ink);
  display: inline-flex; align-items: center; gap: 4px;
}
.tx-row-head .meta .code {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ui-ink-muted);
  letter-spacing: 0.5px;
}
.tx-row-head .meta .resize-chip {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border: 1px solid var(--ui-rule);
  border-radius: 999px;
  background: white;
  cursor: pointer;
  color: var(--ui-ink-muted);
}
.tx-row-head .meta .resize-chip:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.tx-row-head .meta .resize-chip.active { background: var(--ui-ink); border-color: var(--ui-ink); color: white; }
.tx-row-head .pills { display: inline-flex; gap: 3px; }
.tx-pill {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  color: var(--ui-ink-muted);
  text-transform: uppercase;
}
.tx-pill.stale  { background: rgba(232, 184, 64, 0.18); color: #8a6500; }
.tx-pill.edited { background: rgba(40, 110, 200, 0.14); color: #1f4f9c; }
.tx-pill.empty  { background: rgba(0,0,0,0.04); color: var(--ui-ink-muted); }
.tx-row textarea {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--ui-rule);
  border-radius: 5px;
  background: var(--ui-bg-soft);
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.3;
  resize: none;
  min-height: 26px;
  color: var(--ui-ink);
}
.tx-row textarea[dir="rtl"] { text-align: right; }
.tx-row .size-row {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px;
  font-size: 10px;
  color: var(--ui-ink-muted);
}
.tx-row .size-row[hidden] { display: none; }
.tx-row .size-row input[type="range"] { flex: 1; height: 14px; }

/* Active-locale toggle in canvas top bar (step 7) */
.preview-locale {
  position: absolute;
  top: 12px; left: 52px;
  z-index: 500;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px;
  background: var(--ui-bg);
  border-radius: 8px;
  border: 1px solid var(--ui-rule);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.5px;
  color: var(--ui-ink-muted);
  text-transform: uppercase;
}
.preview-locale select {
  border: 1px solid var(--ui-rule);
  border-radius: 6px;
  background: white;
  padding: 3px 6px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ui-ink);
  cursor: pointer;
}
.preview-locale.hidden { display: none; }
.exporting .preview-locale { display: none; }

/* ── Desktop layout (≥ 900 px wide) ────────────────────────
   Restore the two-column editor + side-panel layout.
   Default (above) is mobile-first single-column. */
@media (min-width: 900px) {
  .app {
    grid-template-rows: 44px 1fr;
    grid-template-columns: 1fr 360px;
    grid-template-areas:
      "header  header"
      "editor  controls";
  }
  .mobile-banner { display: none !important; }
  .topbar .tagline { display: block; }
  .topbar .top-feedback { font-size: 12px; padding: 6px 12px; }
  .editor {
    max-height: none;
    padding: 14px 16px;
    overflow: auto;
    align-items: center;
    justify-content: flex-start;
  }
  .controls {
    border-top: none;
    border-left: 1px solid var(--ui-rule);
    max-height: calc(100vh - 52px);
    overflow-y: auto;
  }
  .export-overlay { right: 360px; }
  .feedback-fab   { display: inline-flex; }
  .desktop-only   { display: inline; }
}

/* ────────────────────────────────────────────────────────────
 * Copy Theme — tiny drop strip nested inside the Theme group,
 * sitting between the preset selector and the color swatches.
 * Deliberately understated so it doesn't get mistaken for the
 * main screenshot drop zone.
 * ──────────────────────────────────────────────────────────── */
.badge-new {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--ui-accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.7px;
  font-weight: 700;
  line-height: 1.4;
  vertical-align: middle;
}
.match-theme-field {
  margin-top: 8px;
  margin-bottom: 0;
  gap: 0;
}
.match-theme-field:not(.is-open) {
  padding-bottom: 10px;
}
.match-theme-field.is-open {
  padding-bottom: 0;
}
.match-theme-toggle {
  margin-top: 0;
  margin-bottom: 0;
  text-align: left;
  align-self: flex-start;
}
#matchThemePanel[hidden] { display: none; }
#matchThemePanel:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding-bottom: 0;
  margin-bottom: 0;
}
#matchThemePanel .match-theme-label-row {
  margin-bottom: 0;
}
.match-theme-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.match-theme-help {
  border: none;
  background: none;
  color: var(--ui-accent);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.7px;
  line-height: 1;
  padding: 0;
  text-transform: uppercase;
}
.match-theme-help:hover,
.match-theme-help:focus-visible {
  color: var(--ui-ink-soft);
  outline: none;
  text-decoration: underline;
}
.match-theme-drop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 7px;
  border: 1px dashed var(--ui-rule);
  border-radius: 6px;
  background: var(--ui-bg-soft);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
  overflow: hidden;
}
.match-theme-drop:hover,
.match-theme-drop:focus-visible {
  border-color: var(--ui-ink-muted);
  background: var(--ui-bg);
  outline: none;
}
.match-theme-drop.dragging {
  border-color: var(--ui-accent);
  border-style: solid;
  background: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-bg));
}
.match-theme-drop-text {
  font-size: 11px;
  color: var(--ui-ink-soft);
  line-height: 1.4;
}

.match-theme-status {
  margin-top: 0;
  font-size: 11px;
  color: var(--ui-ink-soft);
}
.match-theme-status[data-state="error"]   { color: #b3261e; }
.match-theme-status[data-state="success"] { color: #1b8a4b; }

.match-theme-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.match-theme-palettes {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.match-theme-palette {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.match-theme-palette-label,
.match-theme-arrow {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ui-ink-faint);
}
.match-theme-arrow {
  font-size: 9px;
  letter-spacing: 0;
}
.match-theme-chip {
  width: 14px;
  height: 14px;
  border: 1px solid var(--ui-rule);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}
.match-theme-undo {
  flex-shrink: 0;
  border: 1px solid var(--ui-rule);
  border-radius: 5px;
  background: var(--ui-bg);
  color: var(--ui-ink-soft);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 1;
  padding: 5px 7px;
  text-transform: uppercase;
}
.match-theme-undo:hover,
.match-theme-undo:focus-visible {
  border-color: var(--ui-ink-muted);
  color: var(--ui-ink);
  outline: none;
}

.match-theme-tip {
  margin: 0;
  padding: 0;
}
.match-theme-tip:empty {
  display: none;
}
.match-theme-tip:not(:empty) {
  margin-top: 2px;
  font-size: 10px;
  font-style: italic;
  color: var(--ui-ink-muted);
  line-height: 1.4;
}

/* Loading shimmer — a soft accent-tinted band that sweeps across the
 * drop strip while we await the LLM response. */
.match-theme-drop.loading {
  border-style: solid;
  border-color: color-mix(in srgb, var(--ui-accent) 30%, var(--ui-rule));
  cursor: progress;
}
.match-theme-drop.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 40%,
    color-mix(in srgb, var(--ui-accent) 18%, transparent) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: 300% 100%;
  animation: match-theme-shimmer 1400ms linear infinite;
  pointer-events: none;
}
@keyframes match-theme-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}
.match-theme-drop.success { border-color: #1b8a4b; }
.match-theme-drop.error   { border-color: #b3261e; }

/* ── Headless render surface (render.html) ── */
body.headless-render {
  margin: 0;
  overflow: hidden;
  background: #0f0f0f;
}
body.headless-render .headless-render-pane {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
body.headless-render .canvas-wrap {
  transform-origin: top center;
}
body.headless-render #render-stubs {
  display: none !important;
}