/* Cross-document View Transitions — DISABLED.
   We previously used `@view-transition { navigation: auto; }` to crossfade
   between page loads. With the side-nav now server-injected and is-active
   baked into the first byte of every page, the nav already feels static
   without transition help — and the transition machinery was leaving the
   nav unclickable on certain pages (iframe-bearing /pipeline, rapid clicks
   on /automations) due to Chromium pseudo-element teardown quirks. Plain
   browser navigation is more reliable. Re-enable here if/when the API
   stabilizes:

     @view-transition { navigation: auto; }
     ::view-transition-old(root),
     ::view-transition-new(root) { animation-duration: 120ms; }
*/

/* Brand mark glyph — replaces the deprecated ◬ placeholder. Sized at 1em
   so it inherits whatever font-size the host container used for the old
   glyph (12px chip icons → 56px hero marks all scale correctly). */
.brand-mark-glyph {
  width: 1em;
  height: 1em;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}
/* Letter-initial avatar — fallback brand mark when a workspace/store has
   no logo or favicon (or it fails to load). Sized in em so it inherits
   the host's font-size (works in the compose brand chip + anywhere else). */
.brand-mark-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 5px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  flex-shrink: 0;
}
.brand-mark-initial-muted {
  background: var(--bg-soft);
  color: var(--text-faint);
}

:root {
  --bg: #fafafa;
  --bg-card: #ffffff;
  --bg-soft: #f4f4f5;
  --bg-elevated: #ffffff;
  --line: rgba(0, 0, 0, 0.08);
  --line-soft: rgba(0, 0, 0, 0.04);
  --border: #ececec;
  --border-strong: #e5e5e5;
  --text: #111;
  --text-soft: #666;
  --text-faint: #888;
  /* Ohoney brand — warm orange. Promoted from body.app-dark / body.app-light
     into :root since dark mode is shelved and there's no body class to
     hang the brand off anymore. Was indigo #6366f1; switch to the Ohoney
     palette so the whole app reads warm. */
  --brand: #ef7d2b;
  --brand-soft: #fff4eb;
  --brand-border: #fcd9b6;
  --brand-deep: #9c4612;
  --warm: #ef7d2b;
  --warm-soft: #fff4eb;
  --warm-border: #fcd9b6;
  --warm-deep: #9c4612;
  --pink: #ec4899;
  --violet: #a855f7;
  --good: #10b981;
  --good-soft: #ecfdf5;
  --good-border: #a7f3d0;
  --good-text: #047857;
  --bad: #ef4444;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }

/* ── Auth pages (login / bootstrap / accept-invite) ─────────────────────── */
body.auth-body {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%);
}
.auth-card {
  width: 100%; max-width: 420px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 36px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
}
.auth-logo { font-size: 22px; font-weight: 700; margin-bottom: 28px; text-align: center; }
.auth-logo span { color: var(--brand); }
.auth-title { font-size: 20px; font-weight: 600; margin: 0 0 6px; text-align: center; }
.auth-sub { font-size: 13px; color: var(--text-soft); margin: 0 0 24px; text-align: center; line-height: 1.5; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-soft); font-weight: 500; }
.auth-form input[type="email"], .auth-form input[type="text"] {
  height: 44px; border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 0 14px; font-size: 14px; font-family: inherit; outline: none;
  background: white; color: var(--text);
}
.auth-form input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); }
.auth-submit {
  height: 44px; border: none; border-radius: 10px;
  background: var(--text); color: white;
  font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: background 0.12s;
}
.auth-submit:hover { background: #000; }
.auth-decline {
  height: 44px; border: 1px solid var(--border-strong); border-radius: 10px;
  background: white; color: var(--text-soft);
  font-size: 14px; font-family: inherit; cursor: pointer;
}
.auth-decline:hover { background: var(--bg-soft); color: var(--text); }
.auth-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.auth-status { margin: 14px 0 0; font-size: 12px; color: var(--text-soft); text-align: center; min-height: 16px; }
.auth-status.ok { color: var(--good-text); font-weight: 600; }
.auth-status.err { color: var(--bad); font-weight: 600; }

/* ── Header workspace switcher pill (auth-dock.js) ──────────────────────── */
.auth-workspace-pill { position: relative; }
.auth-ws-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px; font-weight: 600; color: var(--text);
  cursor: pointer; font-family: inherit;
  max-width: 220px;
  transition: background 0.12s, border-color 0.12s;
}
.auth-ws-btn:hover { background: white; border-color: var(--brand-border); }
/* Brief "working" cue while a workspace switch is in flight — dims the pill
   and blocks double-clicks until the reload kicks in. */
.auth-workspace-pill.is-switching .auth-ws-btn { opacity: 0.55; pointer-events: none; }
.auth-ws-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); flex-shrink: 0;
}
/* Workspace mark — holds either the fallback dot or the brand's
   favicon/logo (swapped in by auth-dock.js applyBrandMark). */
.auth-ws-mark {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.auth-ws-logo {
  width: 18px; height: 18px;
  border-radius: 5px;
  object-fit: cover;
  display: block;
  background: var(--bg-soft);
}
.auth-ws-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-ws-caret { color: var(--text-faint); font-size: 11px; flex-shrink: 0; }
.auth-ws-pop {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  padding: 6px;
  min-width: 240px;
  z-index: 100;
}
.auth-ws-section-head {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint); font-weight: 700;
  padding: 8px 10px 4px;
}
.auth-ws-list { list-style: none; margin: 0; padding: 0; }
.auth-ws-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  border: none; background: transparent;
  font-size: 13px; color: var(--text); font-family: inherit;
  cursor: pointer; border-radius: 6px;
  text-align: left;
}
.auth-ws-item:hover { background: var(--bg-soft); }
.auth-ws-item.is-active { background: var(--brand-soft); color: var(--brand-deep); font-weight: 600; }
.auth-ws-current { color: var(--brand); font-weight: 700; }
.auth-ws-divider { height: 1px; background: var(--border); margin: 6px 0; }
.auth-ws-create, .auth-ws-settings {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none;
  padding: 8px 10px; font-size: 13px; color: var(--text-soft);
  cursor: pointer; border-radius: 6px; font-family: inherit;
}
.auth-ws-create:hover, .auth-ws-settings:hover { background: var(--bg-soft); color: var(--text); }

/* ── User menu (auth-dock.js) ───────────────────────────────────────────── */
.auth-user-menu { position: relative; }
.auth-user-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none; cursor: pointer;
  padding: 4px;
}
.auth-user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.auth-user-caret { color: var(--text-faint); font-size: 10px; }
.auth-user-pop {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  padding: 6px;
  min-width: 240px;
  z-index: 100;
}
.auth-user-head {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.auth-user-head strong { font-size: 13px; }
.auth-user-email { font-size: 11px; color: var(--text-soft); }
.auth-user-role {
  display: inline-block;
  align-self: flex-start;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-deep);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.auth-user-item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none;
  padding: 8px 12px; font-size: 13px; color: var(--text); font-family: inherit;
  cursor: pointer; border-radius: 6px;
}
.auth-user-item:hover { background: var(--bg-soft); }

/* ── Workspace settings page ────────────────────────────────────────────── */
.ws-settings-shell { max-width: 880px; margin: 32px auto; padding: 0 24px; }
.ws-settings-title { font-size: 22px; font-weight: 700; margin: 0 0 20px; }
.ws-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 20px;
}
.ws-card h3 { margin: 0 0 16px; font-size: 16px; font-weight: 600; }
.ws-sub { font-size: 12px; color: var(--text-soft); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; margin: 24px 0 8px; }
.ws-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 12px; color: var(--text-soft); font-weight: 500; }
.ws-field input {
  height: 38px; border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 0 12px; font-size: 14px; font-family: inherit; outline: none;
}
.ws-field input:focus { border-color: var(--brand); }
.ws-field input:disabled { background: var(--bg-soft); color: var(--text-faint); }
.ws-status { font-size: 12px; min-height: 16px; margin: 8px 0 0; color: var(--text-soft); }
.ws-status.ok { color: var(--good-text); font-weight: 600; }
.ws-status.err { color: var(--bad); font-weight: 600; }
.ws-members-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 8px; }
.ws-members-table th { text-align: left; padding: 8px; color: var(--text-faint);
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border); }
.ws-members-table td { padding: 10px 8px; border-bottom: 1px solid var(--border); }
.ws-members-table select {
  background: white; border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 4px 8px; font-size: 12px; font-family: inherit;
}
.ws-link-btn {
  background: transparent; border: none; padding: 4px 8px;
  cursor: pointer; font-size: 12px; color: var(--text-soft); font-family: inherit;
  border-radius: 6px;
}
.ws-link-btn:hover { background: var(--bg-soft); color: var(--text); }
.ws-link-btn.ws-danger:hover { color: var(--bad); background: #fef2f2; }
.ws-invite-form {
  display: flex; gap: 8px; margin-top: 16px;
  padding-top: 16px; border-top: 1px solid var(--border);
}
.ws-invite-form input {
  flex: 1; height: 38px; border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 0 12px; font-size: 14px; font-family: inherit; outline: none;
}
.ws-invite-form input:focus { border-color: var(--brand); }
.ws-invite-form select {
  height: 38px; border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 0 10px; font-size: 14px; font-family: inherit;
  background: white;
}

/* Header */
.app-header {
  background: white;
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  display: flex; align-items: center; gap: 20px;
  position: sticky; top: 0; z-index: 50;
}
/* Slim variant — used on pages that have the new sidebar. Removes the
   logo + nav block (those moved into the sidebar) and leaves just the
   right-side action buttons. Stays sticky at the top of the main area. */
.app-header-slim {
  padding: 10px 24px 10px;
  justify-content: flex-end;
  min-height: 56px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(6px);
}
.app-header-slim .header-right { margin-left: 0; }

/* ─── Left sidebar (ElevenLabs-style) ───────────────────────────────── */
/* When the sidebar is present, the document offsets right by its width
   via the body class set on pages that mount it. The sidebar itself is
   fixed so it doesn't scroll with the content. */
body:has(.side-nav) {
  padding-left: var(--side-nav-w, 240px);
  transition: padding-left 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.side-nav-collapsed { --side-nav-w: 64px; }
.side-nav {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--side-nav-w, 240px);
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 14px 12px 14px;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.side-nav-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px 12px;
}
.side-nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
.side-nav-logo-mark {
  flex-shrink: 0;
  color: var(--brand);
  font-size: 18px;
  width: 22px; text-align: center;
}
.side-nav-logo-text span { color: var(--brand); }
.side-nav-collapse {
  background: transparent;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.side-nav-collapse:hover { background: var(--bg-soft); color: var(--text); }

.side-nav-workspace { padding: 4px 6px 14px; }
/* When auth-dock mounts here, override its absolute-positioned popover. */
/* Sidebar uses overflow-x: hidden, which would clip the popover's right
   edge (and the active-workspace checkmark with it). Shrink the popover
   to the workspace cell's available width so nothing gets cut off. */
.side-nav-workspace .auth-ws-pop {
  left: 0;
  right: 0;
  min-width: 0;
  width: auto;
}
.side-nav-workspace .auth-ws-btn {
  width: 100%;
  justify-content: flex-start;
  background: var(--bg-soft);
  border-color: var(--border-strong);
  max-width: none;
}

.side-nav-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 14px;
  border: none;
}
.side-nav-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-weight: 700;
  padding: 4px 12px 6px;
}
.side-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: inherit;
  width: 100%;
  text-align: left;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
  position: relative;
}
.side-nav-item:hover { background: var(--bg-soft); color: var(--text); }
.side-nav-item.is-active {
  background: var(--bg-soft);
  color: var(--text);
  font-weight: 600;
}
.side-nav-icon {
  width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-soft);
}
.side-nav-item.is-active .side-nav-icon { color: var(--text); }
.side-nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.side-nav-badge {
  background: var(--bad);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  flex-shrink: 0;
}
.side-nav-item-button { cursor: pointer; }
.side-nav-item-quiet { color: var(--text-faint); font-size: 12px; }
.side-nav-item-quiet .side-nav-icon { color: var(--text-faint); }
/* Admin-only items start hidden via class (not the [hidden] attr — flex
   wins over [hidden]'s display: none in the cascade). side-nav.js
   removes this class once /api/admin/me confirms admin access. */
.side-nav-admin-only { display: none !important; }

/* Bottom stack — invite card, developers link, upgrade button. */
.side-nav-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
}
.side-nav-invite-card {
  position: relative;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 14px 12px;
  margin-bottom: 4px;
}
.side-nav-invite-close {
  position: absolute;
  top: 8px; right: 8px;
  background: transparent;
  border: none;
  font-size: 12px;
  color: var(--text-faint);
  cursor: pointer;
  width: 20px; height: 20px;
  border-radius: 4px;
}
.side-nav-invite-close:hover { background: var(--border); color: var(--text); }
.side-nav-invite-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: white;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
  margin-bottom: 8px;
}
.side-nav-invite-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.side-nav-invite-sub {
  font-size: 11px;
  color: var(--text-soft);
  line-height: 1.45;
  margin-bottom: 10px;
}
.side-nav-invite-cta {
  width: 100%;
  background: var(--text);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s;
}
.side-nav-invite-cta:hover { background: #000; }

.side-nav-upgrade {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--brand-border);
  background:
    repeating-linear-gradient(135deg,
      var(--brand-soft) 0,
      var(--brand-soft) 6px,
      white 6px,
      white 12px);
  color: var(--brand-deep);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.side-nav-upgrade:hover {
  background: white;
  border-color: var(--brand);
  transform: translateY(-1px);
}
.side-nav-upgrade-icon { color: var(--brand); }

/* ─── Collapsed state ──────────────────────────────────────────────── */
/* Hide all text + the workspace + the invite card; keep only icons in a
   narrow column. Each item becomes a centered icon button. */
body.side-nav-collapsed .side-nav-label,
body.side-nav-collapsed .side-nav-logo-text,
body.side-nav-collapsed .side-nav-section-label,
body.side-nav-collapsed .side-nav-workspace,
body.side-nav-collapsed .side-nav-invite-card,
body.side-nav-collapsed .side-nav-badge {
  display: none;
}
body.side-nav-collapsed .side-nav-top {
  flex-direction: column;
  gap: 6px;
  padding-bottom: 8px;
}
body.side-nav-collapsed .side-nav-item,
body.side-nav-collapsed .side-nav-upgrade {
  padding: 10px;
  justify-content: center;
}
body.side-nav-collapsed .side-nav-icon { width: 22px; }
body.side-nav-collapsed .side-nav-upgrade {
  padding: 10px;
}

/* ─── Developers page — ElevenLabs-style ───────────────────────────── */
.dev-page { max-width: 1100px; }

/* Title row + right-side external link buttons. */
.dev-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.dev-page-actions { display: flex; gap: 8px; }
.dev-page-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: white;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
}
.dev-page-action:hover { background: var(--bg-soft); border-color: var(--brand-border); }
.dev-page-action svg { color: var(--text-faint); }

/* Tabs — underlined active state. */
.dev-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.dev-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.dev-tab:hover:not([disabled]) { color: var(--text); }
.dev-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--text);
  font-weight: 600;
}

/* Scope display:flex to non-hidden panels so the `hidden` attribute on
   inactive tabs actually hides them (display:flex would otherwise win
   the cascade against the browser-default `[hidden] { display:none }`). */
.dev-tab-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dev-tab-panel[hidden] { display: none; }

/* Featured card — thumbnail / art block on the left, text in the
   middle, CTA on the right. Same rhythm as the ElevenLabs "Try Scribe
   Realtime v2" callout. Art is a CSS-only painterly composition (no
   image asset) to match the brand palette. */
.dev-feature-card {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 18px;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
}
.dev-feature-card-art {
  position: relative;
  width: 110px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  /* Warm-dark brand mesh (was slate-purple). Honey + pink blobs below
     read as an Ohoney mini-mesh, echoing the marketing surface. */
  background: linear-gradient(135deg, #1a1206 0%, #2a1d12 60%, #34222e 100%);
}
.dev-feature-card-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: rgba(255,255,255,0.85);
  z-index: 2;
}
.dev-feature-card-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  opacity: 0.6;
}
.dev-feature-card-blob-a {
  width: 80px; height: 80px;
  background: #f5b271;
  top: -30px; left: -20px;
}
.dev-feature-card-blob-b {
  width: 70px; height: 70px;
  background: var(--pink, #ec4899);
  bottom: -20px; right: -20px;
}
.dev-feature-card-text h3 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
}
.dev-feature-card-text p {
  margin: 0;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.5;
}
.dev-feature-card-cta {
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.dev-feature-card-cta:hover { background: var(--bg-soft); border-color: var(--brand-border); }

/* Quickstart — text on the left, dark code block on the right. */
.dev-quickstart {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 760px) {
  .dev-quickstart { grid-template-columns: 1fr; }
}
.dev-quickstart-text {
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
}
.dev-quickstart-text h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.dev-quickstart-text p {
  margin: 0;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.55;
}
.dev-quickstart-cta {
  display: inline-block;
  background: var(--text);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.12s;
}
.dev-quickstart-cta:hover { background: #000; }

/* Dark code block. Numbered lines on the left, copy button top-right,
   language pill bottom-right. Syntax tokens via tiny inline spans. */
.dev-code-card {
  position: relative;
  background: #0f0f14;
  color: #e7e7eb;
  padding: 24px 22px 44px 56px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  overflow-x: auto;
}
.dev-code-pre {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre;
  counter-reset: code-line;
}
/* Line numbers: rendered as a CSS counter increment so we don't have
   to encode them in the markup. Each \n bumps the counter. We fake
   per-line by splitting via display:block on each "row" — simpler:
   inject the counter into the gutter via a pseudo-element on the pre
   itself isn't possible; instead we use line-height alignment with
   absolute positioning. */
.dev-code-pre::before {
  content: "1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 10\A 11\A 12\A 13\A 14\A 15\A 16";
  position: absolute;
  top: 24px;
  left: 18px;
  width: 28px;
  color: #5e5d6b;
  text-align: right;
  white-space: pre;
  font-size: 11.5px;
  line-height: 1.7;
  user-select: none;
  pointer-events: none;
}
.dev-code-pre .kw  { color: #c792ea; }
.dev-code-pre .str { color: #c3e88d; }
.dev-code-pre .num { color: #f78c6c; }
.dev-code-pre .cmt { color: #6b7280; font-style: italic; }
.dev-code-pre .fn  { color: #82aaff; }
.dev-code-copy {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #cfcfd4;
  border-radius: 6px;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.dev-code-copy:hover { background: rgba(255,255,255,0.12); color: white; }
.dev-code-copy.is-copied { background: var(--good); color: white; border-color: var(--good); }
.dev-code-lang {
  position: absolute;
  bottom: 10px;
  right: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #cfcfd4;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* Bottom grid: Usage + Quick Links side by side. */
.dev-bottom-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 2fr;
  gap: 28px;
  margin-top: 8px;
}
@media (max-width: 760px) {
  .dev-bottom-grid { grid-template-columns: 1fr; }
}
.dev-bottom-col { display: flex; flex-direction: column; gap: 12px; }
.dev-section-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

/* Usage card. */
.dev-usage-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dev-usage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dev-usage-cell { display: flex; flex-direction: column; gap: 2px; }
.dev-usage-label { font-size: 11px; color: var(--text-soft); }
.dev-usage-value { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.dev-usage-trend {
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-soft);
}
.dev-usage-trend:hover { background: var(--bg-soft); color: var(--text); }
.dev-usage-foot {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.dev-usage-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s;
}
.dev-usage-btn:hover:not([disabled]) { background: var(--bg-soft); }
.dev-usage-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.dev-usage-btn-primary {
  background: var(--text);
  color: white;
  border-color: var(--text);
}
.dev-usage-btn-primary:hover:not([disabled]) { background: #000; }
.dev-usage-btn-icon {
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-soft);
}
.dev-usage-btn-icon:hover { background: var(--bg-soft); color: var(--text); }
.dev-usage-pill {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-soft);
  color: var(--text-faint);
  margin-left: 4px;
}

/* Quick Links — 2-column responsive grid of card buttons. */
.dev-quicklinks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (max-width: 560px) {
  .dev-quicklinks { grid-template-columns: 1fr; }
}
.dev-quicklink {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.dev-quicklink:hover:not([disabled]) {
  background: var(--bg-soft);
  border-color: var(--brand-border);
  transform: translateY(-1px);
}
.dev-quicklink[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.dev-quicklink-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-soft);
  border-radius: 8px;
  color: var(--text-soft);
}
.dev-quicklink-label { flex: 1; }

/* Generic panel card used by the secondary tabs. */
.dev-panel-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dev-panel-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dev-panel-card-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.dev-panel-card-sub {
  margin: 0;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.55;
}
.dev-panel-card-sub code {
  background: var(--bg-soft);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* API key masked display. */
.dev-key-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.dev-key-mask {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--text);
}
.dev-key-hint { font-size: 11px; color: var(--text-soft); }
.dev-key-hint code {
  background: white;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10.5px;
}

/* Stats grid for the Usage tab. */
.dev-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.dev-stat {
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dev-stat-label { font-size: 11px; color: var(--text-soft); }
.dev-stat-value { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }

/* Environment list. */
.dev-env-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dev-env-row {
  display: grid;
  grid-template-columns: 200px 140px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
}
.dev-env-row:hover { background: var(--bg-soft); }
.dev-env-name {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--text);
}
.dev-env-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: white;
  color: var(--text-soft);
  border: 1px solid var(--border);
  width: fit-content;
}
.dev-env-status-info {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.dev-env-status.is-set {
  background: var(--good-soft);
  color: var(--good-text);
  border-color: var(--good-border);
}
.dev-env-status.is-unset {
  background: #fff7ed;
  color: #b45309;
  border-color: #fed7aa;
}
.dev-env-desc { font-size: 12px; color: var(--text-soft); line-height: 1.5; }
.dev-env-desc code {
  background: var(--bg-soft);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10.5px;
}
@media (max-width: 640px) {
  .dev-env-row { grid-template-columns: 1fr; }
}

/* Carried-over rules from the original developers grid — still used by
   the Active models block in the Environment tab. */
.dev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 18px;
  margin-top: 12px;
}
.dev-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dev-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dev-card-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.dev-card-sub {
  margin: 0;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.55;
}
.dev-card-sub code {
  background: var(--bg-soft);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.dev-card-status {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text-soft);
  text-transform: uppercase;
}
.dev-card-status-ok {
  background: var(--good-soft);
  color: var(--good-text);
}
.dev-card-status-warn {
  background: #fff7ed;
  color: #b45309;
}
.dev-card-status-soon {
  background: #faf5ff;
  color: #9333ea;
}

.dev-endpoints {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.dev-endpoint-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dev-method {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.dev-method-get { background: var(--good-soft); color: var(--good-text); }
.dev-path {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--text);
  background: var(--bg-soft);
  padding: 3px 8px;
  border-radius: 6px;
}
.dev-endpoint-desc {
  margin: 4px 0 0 56px;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.55;
}
.dev-code {
  margin: 0;
  background: #0f0f14;
  color: #e7e7eb;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.dev-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dev-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-soft);
  border-radius: 8px;
  font-size: 13px;
}
.dev-list-name { font-weight: 500; color: var(--text); }
.dev-list-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: white;
  color: var(--text-soft);
  border: 1px solid var(--border);
}
.dev-list-status-ok {
  background: var(--good-soft);
  color: var(--good-text);
  border-color: var(--good-border);
}
.dev-list-status-warn {
  background: #fff7ed;
  color: #b45309;
  border-color: #fed7aa;
}
.dev-list-status-info {
  background: var(--brand-soft);
  color: var(--brand-deep);
  border-color: var(--brand-border);
}

.dev-models {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.dev-models-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}
.dev-models-label { color: var(--text-soft); font-weight: 500; }
.dev-models-value {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  background: var(--bg-soft);
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--text);
}

/* ─── Invite team modal ────────────────────────────────────────────── */
/* ElevenLabs-style: painterly hero banner at the top, form below. The
   hero is CSS-only (no image asset needed) — overlapping radial-gradient
   "blobs" + rounded squares in a warm palette, gently animated so the
   banner reads as alive rather than static. */
.invite-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 20, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  padding: 24px;
  animation: inviteOverlayIn 0.18s ease-out;
}
@keyframes inviteOverlayIn { from { opacity: 0; } to { opacity: 1; } }
.invite-modal {
  width: 100%;
  max-width: 500px;
  background: var(--bg-card);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.28);
  display: flex;
  flex-direction: column;
  animation: inviteModalIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes inviteModalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.invite-modal-hero {
  position: relative;
  height: 200px;
  background: linear-gradient(135deg, #f4d4a8 0%, #e9b07d 35%, #c89a8d 70%, #8c8ec0 100%);
  overflow: hidden;
  /* Subtle film grain via repeating gradient — gives the warm hero a
     painterly print-on-paper texture instead of glossy CSS gradient. */
}
.invite-modal-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.5;
  pointer-events: none;
}
.invite-modal-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(32px);
  opacity: 0.6;
  animation: inviteBlobDrift 14s ease-in-out infinite alternate;
}
.invite-modal-hero-blob-a {
  width: 220px; height: 220px;
  background: #f5b271;
  top: -60px; left: -40px;
}
.invite-modal-hero-blob-b {
  width: 200px; height: 200px;
  background: #d68d7e;
  top: 60px; right: -50px;
  animation-delay: -4s;
}
.invite-modal-hero-blob-c {
  width: 180px; height: 180px;
  background: #9aa0c9;
  bottom: -80px; left: 35%;
  animation-delay: -8s;
}
@keyframes inviteBlobDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(20px, -10px) scale(1.08); }
}
/* Rounded-square cutouts overlaying the gradient, evoking the layered
   shapes in the reference image. Slight rotation + drop-shadow gives
   the impression of stacked translucent paper. */
.invite-modal-hero-shape {
  position: absolute;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 22px;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.invite-modal-hero-shape-1 {
  width: 110px; height: 90px;
  top: 32px; left: 28%;
  transform: rotate(-6deg);
}
.invite-modal-hero-shape-2 {
  width: 96px; height: 110px;
  top: 56px; left: 48%;
  transform: rotate(3deg);
  background: rgba(255, 255, 255, 0.22);
}
.invite-modal-hero-shape-3 {
  width: 100px; height: 80px;
  top: 80px; left: 64%;
  transform: rotate(-2deg);
}
.invite-modal-body {
  padding: 22px 26px 6px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.invite-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.invite-modal-desc {
  margin: 0;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.55;
}
.invite-modal-desc strong { color: var(--text); font-weight: 600; }
.invite-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.invite-modal-field-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.invite-modal-field input[type="email"],
.invite-modal-field select {
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 0 14px;
  font-size: 14px;
  font-family: inherit;
  background: white;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.invite-modal-field input[type="email"]:focus,
.invite-modal-field select:focus {
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}
.invite-modal-note {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.55;
}
.invite-modal-note strong { color: var(--text-soft); font-weight: 600; }

/* Invite-link result — shown after "Create invite link" succeeds. */
.invite-modal-result { margin: 6px 0 0; }
.invite-modal-result-label {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--good-text, #047857);
}
.invite-modal-result-label strong { color: var(--text); }
.invite-modal-linkrow { display: flex; gap: 8px; align-items: stretch; }
.invite-modal-link-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--bg-soft);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--text);
}
.invite-modal-link-input:focus { outline: none; border-color: var(--brand); }
.invite-modal-result-hint {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.55;
}
.invite-modal-result-hint strong { color: var(--text-soft); font-weight: 600; }
.invite-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 26px 18px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.invite-modal .form-status {
  padding: 0 26px 16px;
  margin: 0;
  font-size: 12px;
  min-height: 16px;
}
/* Tooltip on hover when collapsed — uses CSS only via title attr fallback
   would be inconsistent, so we render a custom tooltip via ::after. The
   nav items each carry their label in text inside .side-nav-label which
   we promote to a tooltip via attr() — but since we hid it, render via
   a data-label set in JS. Skip for v1 — title attribute is enough. */
.app-logo {
  font-weight: 700; font-size: 18px; color: var(--text);
  white-space: nowrap;
}
.app-logo span { color: var(--brand); }
.nav { display: flex; gap: 4px; }
.nav a {
  padding: 6px 12px; border-radius: 7px;
  font-size: 13px; color: var(--text-soft); font-weight: 500;
}
.nav a.on { background: var(--bg-soft); color: var(--text); }
.nav a:hover { background: var(--bg-soft); }

.header-right {
  margin-left: auto;
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--text-soft);
}

/* Library search — sits in the header on /, never on /admin (no input there).
   Compact pill so it reads as a quick filter, not a co-equal compose input. */
.header-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  width: 280px;
  max-width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0 14px;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.header-search:focus-within {
  background: white;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.header-search-icon {
  font-size: 14px;
  color: var(--text-faint);
  flex-shrink: 0;
}
.header-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--text);
  outline: none;
  font-family: inherit;
}

/* Admin: library count chip in the header — small neutral pill so it never
   overpowers the Settings button next to it. */
.lib-meta-count {
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 500;
  white-space: nowrap;
}
.lib-meta-count:empty { display: none; }
.bg-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--good);
  animation: pulse 1.5s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.4 } }

/* Library search — single-purpose, always-on filter for the grid below */
/* Library search — compact pill in the .library-meta row above the grid.
   Visible at rest (filled bg + faint outline) so the user clocks it as a
   clickable affordance without it competing with the prompt box above.
   Border deepens on hover; expands + outlines on focus. */
.library-search {
  display: inline-flex;
  align-items: center;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 12px;
  height: 30px;
  width: 240px;
  max-width: 40vw;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, width 0.18s ease;
}
.library-search:hover {
  border-color: var(--border-strong);
}
.library-search:focus-within {
  background: white;
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
  width: 320px;
}
.library-search-icon {
  font-size: 13px;
  color: var(--text-faint);
  margin-right: 8px;
  line-height: 1;
}
.library-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--text);
  outline: none;
  font-family: inherit;
}
.library-search input::placeholder {
  color: var(--text-faint);
}

/* Search / compose */
.search-region {
  background: white;
  border-bottom: 1px solid var(--border);
  padding: 18px 24px;
  display: flex; align-items: center; gap: 16px;
}
.compose-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
  white-space: nowrap;
}
.brief-bar {
  border-color: var(--brand-border);
}
.brief-bar:focus-within {
  border-color: var(--brand);
}
.brief-icon {
  opacity: 0.7;
  font-size: 14px;
}
.search-bar {
  flex: 1;
  display: flex; align-items: center;
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0 8px 0 18px;
  height: 44px;
  max-width: 720px;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.search-bar:focus-within {
  background: white;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.search-bar .glass { opacity: 0.5; font-size: 16px; }
.search-bar input {
  flex: 1; border: none; background: transparent;
  font-size: 15px; color: var(--text);
  outline: none; font-family: inherit;
  padding: 0 12px;
}
.search-bar .camera {
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-soft); font-size: 16px;
}
.search-bar .camera:hover { background: var(--bg-soft); }

.search-bar-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  font-size: 16px;
  margin-right: 4px;
  transition: background 0.12s, color 0.12s;
}
.search-bar-icon-btn:hover {
  background: var(--bg-soft);
}
.search-bar-icon-btn.is-active {
  background: var(--brand-soft);
  color: var(--brand);
}

/* ── Compose region (Ideogram-style card with inline chip bar) ────────── */
.compose-region {
  background: var(--bg);
  /* Top padding trimmed — was 24px, which sat under .mode-tabs's 16px
     bottom margin and read as wasted real estate. */
  padding: 8px 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Edge-lit compose box — the hero input carries a luminous honey →
   pink → violet gradient border (oposhop.io's premium move, on Ohoney's
   palette). Calm at rest, then on focus the edge brightens, a soft glow
   blooms behind, and the gradient gently rotates — the box "comes alive"
   when you engage it. See BRAND.md § "Motion — the alive system." */
@property --compose-edge {
  syntax: "<angle>"; initial-value: 0deg; inherits: false;
}
@keyframes compose-edge-spin { to { --compose-edge: 360deg; } }

.compose-card {
  position: relative;
  background: white;
  border: 1px solid transparent; /* the gradient ::before is the visible edge */
  border-radius: 22px;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  transition: padding 0.15s;
}
/* Gradient edge (masked ring — only the 1.5px border shows). */
.compose-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--compose-edge, 130deg),
    var(--brand), var(--pink), var(--violet), var(--brand));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  opacity: 0.65;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Shimmer — a soft glint travels around the border ring. Masked to the
   1.5px edge (same as the base ring) so it's JUST the border, never an
   interior fill. Always on, subtle. */
@property --compose-shimmer {
  syntax: "<angle>"; initial-value: 0deg; inherits: false;
}
@keyframes compose-shimmer-spin { to { --compose-shimmer: 360deg; } }
.compose-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--compose-shimmer, 0deg),
    transparent 0deg, transparent 58deg,
    rgba(255, 255, 255, 0.85) 74deg,
    rgba(255, 240, 224, 0.35) 82deg,
    transparent 98deg, transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  z-index: 1;
  pointer-events: none;
  animation: compose-shimmer-spin 4s linear infinite;
}
/* Keep real content above the gradient ring + shimmer. */
.compose-card > * { position: relative; z-index: 2; }

.compose-card:focus-within,
.compose-card.is-expanded {
  padding: 14px 18px;
}
/* On focus the base edge brightens; the shimmer keeps traveling. */
.compose-card:focus-within::before,
.compose-card.is-expanded::before {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .compose-card::before,
  .compose-card::after { animation: none !important; }
}
.compose-input {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  padding: 6px 4px;
  min-height: 32px;
  height: 32px;
  /* No scrollbar when collapsed: the fixed 32px height is ~3px shorter
     than the single line's content box (22.5px line + 12px padding), and
     `overflow-y: auto` was painting a phantom scrollbar over that 3px gap
     even with the box empty. Hidden clips only the trailing padding, never
     the text. The expanded rule below re-enables scrolling past max-height
     for genuinely long prompts. */
  overflow-y: hidden;
  transition: min-height 0.15s, height 0.15s;
}
.compose-card.is-expanded .compose-input {
  min-height: 80px;
  height: auto;
  /* Long prompts scroll inside the card instead of growing it without
     bound. Scrollbar only appears once content actually exceeds 200px. */
  max-height: 200px;
  overflow-y: auto;
}
/* Hide the chip cluster when collapsed — Generate button stays visible. */
.compose-card:not(.is-expanded) .compose-chip-bar-chips {
  display: none;
}
.compose-chip-bar-chips {
  display: flex;
  align-items: center;
  /* row-gap larger than column-gap so wrapped rows don't visually
     collide. The chip bar has 8+ chips that wrap on narrow widths. */
  gap: 10px 8px;
  flex-wrap: wrap;
  /* Stop the .compose-chip-spacer from collapsing chips when narrow */
  min-height: 32px;
}
.compose-chip-bar-chips > .compose-chip-spacer { flex: 1; min-width: 0; }
.compose-input::placeholder { color: var(--text-faint); }

.compose-chip-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
  flex-wrap: wrap;
}
.compose-chip-spacer { flex: 1; }

/* Thin vertical separator between the primary chips (model, count, aspect)
   and the opt-in constraint chips (Brand, Text, Refs, Product). Reads as a
   subtle visual break without imposing a hard label. */
.compose-chip-divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border-strong);
  margin: 0 4px;
  opacity: 0.7;
}

.compose-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: white;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: background 0.12s, border-color 0.12s;
}
/* The class's `display: inline-flex` outranks the user-agent's
   `[hidden] { display: none }`, so toggling `chip.hidden = true` in JS
   leaves the chip visible. !important on the hidden state wins the
   specificity fight. (Same trap as the .notif-pop popover.) */
.compose-chip[hidden] { display: none !important; }
.compose-chip:hover {
  background: var(--bg-soft);
  border-color: var(--brand-border);
}
.compose-chip.is-active,
.compose-chip[aria-pressed="true"],
.compose-chip[aria-expanded="true"] {
  background: var(--brand-soft);
  border-color: var(--brand-border);
  color: var(--brand-deep);
}

/* Voice mode: when actively listening, override the brand-purple "pressed"
   look with a pulsing red so the user can't miss that the mic is hot. */
.compose-chip#voice-btn.is-recording,
.compose-chip#voice-btn.is-recording[aria-pressed="true"] {
  background: #fef2f2;
  border-color: var(--bad);
  color: var(--bad);
  animation: voicePulse 1.4s ease-in-out infinite;
}
@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

.compose-chip-icon {
  width: 32px;
  padding: 0;
  justify-content: center;
  font-size: 15px;
}
.compose-chip-icon-glyph {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1;
}
.compose-chip.is-active .compose-chip-icon-glyph,
.compose-chip:hover .compose-chip-icon-glyph {
  color: var(--brand);
}

/* Use-case chip — surfaced in the compose bar whenever a non-general
   use case is active, so silent overrides (mockup, logo) can't quietly
   reshape every generation. Override cases get a stronger orange
   accent so the operator notices. */
.compose-chip-use-case {
  background: white;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px 0 10px;
}
.compose-chip-use-case .compose-chip-icon-glyph {
  font-size: 11px;
  color: var(--text-soft);
}
.compose-chip-use-case .compose-chip-label {
  font-weight: 500;
}
/* .compose-chip-use-case.is-default styling lives in the unified empty/
   selected block below — General is a real picked state, painted in
   honey-soft, not greyed out. */
.compose-chip-use-case.is-override {
  background: rgba(248, 112, 96, 0.08);
  border-color: rgba(248, 112, 96, 0.35);
  color: #c45a48;
}
.compose-chip-use-case.is-override .compose-chip-icon-glyph {
  color: #f87060;
}
.compose-chip-use-case .compose-chip-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: transparent;
  color: var(--text-faint);
  font-size: 13px;
  line-height: 1;
  margin-left: 2px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.compose-chip-use-case .compose-chip-clear:hover {
  background: var(--bg-soft);
  color: var(--text);
}
.compose-chip-use-case.is-override .compose-chip-clear:hover {
  background: rgba(248, 112, 96, 0.2);
  color: #c45a48;
}

/* Native <select> rendered as chip — keep the select itself invisible-clickable
   (covering the chip), but show a fake label + caret. Click → OS dropdown. */
.compose-chip-select { padding-right: 14px; }
.compose-chip-select select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}
.compose-chip-select::after {
  content: "▾";
  font-size: 9px;
  color: var(--text-faint);
  margin-left: 2px;
}

/* Generate — rounded-square black button (was a circle). Pairs with the
   icon-only mic to its left as "dictate · go". */
.compose-go {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: var(--text);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background 0.12s, transform 0.12s;
  flex-shrink: 0;
}
.compose-go:hover { background: #000; transform: translateY(-1px); }
.compose-go:disabled { background: var(--text-faint); cursor: not-allowed; transform: none; }
.compose-go svg { display: block; }
/* Generating state — the button stays clickable and acts as Stop. Layered
   visuals: spinning ring (existing) + a center stop-square that reveals on
   hover. Hover also tints the whole button red to drive home "click to
   cancel". */
.compose-go.is-generating {
  background: var(--text-faint);
  position: relative;
  cursor: pointer;
}
.compose-go.is-generating:hover {
  background: var(--bad);
  transform: translateY(-1px);
}
.compose-go.is-generating .go-spinner {
  position: absolute;
  inset: 0;
  margin: auto;
}
.compose-go.is-generating:hover .go-spinner {
  opacity: 0.4;
}
.go-stop-square {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 2px;
  background: white;
  opacity: 0;
  transition: opacity 0.12s, transform 0.12s;
  z-index: 1;
}
.compose-go.is-generating:hover .go-stop-square {
  opacity: 1;
  transform: scale(1.1);
}
.go-spinner { animation: goSpin 0.85s linear infinite; transform-origin: center; }
@keyframes goSpin { to { transform: rotate(360deg); } }

/* Icon-only button (mic, etc.) — no border, just a hover background tint.
   Pulses red when dictating; brand-purple when otherwise toggled on. */
.compose-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.compose-icon-btn:hover { background: var(--bg-soft); color: var(--text); }
.compose-icon-btn[aria-pressed="true"] { color: var(--brand); background: var(--brand-soft); }
.compose-icon-btn.is-recording {
  color: var(--bad);
  background: #fef2f2;
  animation: voicePulse 1.4s ease-in-out infinite;
}

/* Plan toggle — label + iOS-style switch. Click the wrapper to flip. */
.compose-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 32px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  position: relative;
}
.compose-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.compose-toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background 0.16s;
}
.compose-toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: transform 0.16s;
}
.compose-toggle:hover .compose-toggle-switch { background: var(--text-faint); }
.compose-toggle input:checked ~ .compose-toggle-switch {
  background: var(--brand);
}
.compose-toggle input:checked ~ .compose-toggle-switch::after {
  transform: translateX(16px);
}
.compose-toggle:has(input:checked) .compose-toggle-label { color: var(--brand-deep); font-weight: 600; }

/* ⚙ More-options popover */
.compose-more-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Match the chip-bar's chip-to-chip gap so the General chip (injected
     here by syncUseCaseChip) and the ⚙ icon don't sit jammed together. */
  gap: 6px;
}

/* Unified empty/selected pill states across the compose bar.
   When a select-style chip carries no value, paint it like a +Add
   affordance (dashed border, faint text, no fill) so "empty" reads
   consistently. The .is-active state lights it orange.
   NOTE: .compose-chip-use-case is intentionally EXCLUDED — General
   is always a real selection (the default brief-writer mode), not
   an empty state, so it should read as picked. */
#chip-system-prompt:not(.is-active),
#chip-store:not(.is-active) {
  border-style: dashed;
  border-color: var(--border);
  background: transparent;
  color: var(--text-faint);
  opacity: 0.85;
}
#chip-system-prompt:not(.is-active):hover,
#chip-store:not(.is-active):hover {
  opacity: 1;
  background: var(--brand-soft);
  border-color: var(--brand-border);
  border-style: solid;
  color: var(--brand-deep);
}
#chip-system-prompt:not(.is-active) .compose-chip-icon-glyph,
#chip-store:not(.is-active) .compose-chip-icon-glyph {
  color: var(--text-faint);
}
/* Use-case chip — General gets a solid honey-tinted "selected" look,
   distinct from the dashed +Add empty-state. Override cases (mockup,
   logo) get the stronger orange via .is-override later in this file. */
.compose-chip-use-case.is-default {
  background: var(--brand-soft);
  border-color: var(--brand-border);
  color: var(--brand-deep);
  font-weight: 600;
}
.compose-chip-use-case.is-default .compose-chip-icon-glyph {
  color: var(--brand);
}
.compose-chip-use-case.is-default:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
}

.compose-more-pop {
  position: absolute;
  /* Opens DOWNWARD from below the chip — was bottom: calc(100% + 8px)
     which forced the popover upward and clipped at the viewport top
     when the compose bar sits near the top of the page. */
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 240px;
  z-index: 50;
  /* Cap height so very-long content scrolls instead of overflowing the
     viewport bottom. Internal .use-case-pills already has its own max-
     height + overflow-y for the list. */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.compose-more-pop[hidden] { display: none; }
.compose-more-pop .compose-opt {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.compose-more-pop .compose-opt-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.compose-more-pop select {
  height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 13px;
  font-family: inherit;
  background: white;
  outline: none;
}
.compose-more-pop .compose-opt-manage {
  font-size: 11px;
  color: var(--brand);
  text-decoration: none;
  align-self: flex-start;
}
.compose-more-pop .compose-opt-manage:hover { text-decoration: underline; }
.compose-options-toggle.is-open {
  background: var(--brand-soft);
  color: var(--brand);
}

/* Popover header — eyebrow + 1-line description. Gives context to
   what the user is about to pick. */
.compose-opt-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.compose-opt-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}
.compose-opt-sub {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.45;
  margin-top: 4px;
  font-style: italic;
}

/* Use-case quick-pick list — single column inside the compose-more-pop.
   Each row is a full-width clickable item with the name on the left
   and the aspect-ratio hint on the right. Click applies + closes the
   popover. The popover itself is widened to fit the longest label
   ("Print on demand", "Mock-ups") without wrapping. */
.compose-more-pop:has(.use-case-pills) {
  min-width: 280px;
  max-width: min(320px, calc(100vw - 32px));
}
.use-case-pills {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 360px;
  overflow-y: auto;
  margin: 0 -4px;
}
.use-case-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 140ms, color 140ms;
  text-align: left;
  white-space: nowrap;
}
.use-case-pill:hover {
  background: var(--brand-soft);
  color: var(--brand-deep);
}
.use-case-pill.is-active {
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-weight: 600;
}
.use-case-pill.is-active::before {
  content: "✓";
  color: var(--brand);
  font-weight: 700;
  margin-right: -4px;
}
.use-case-pill-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.use-case-pill-ratio {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  color: var(--text-faint);
  background: var(--bg-soft);
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.use-case-pill.is-active .use-case-pill-ratio {
  color: var(--brand-deep);
  background: rgba(255, 255, 255, 0.7);
}

.compose-options {
  flex-basis: 100%;
  margin-top: 12px;
  background: white;
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
.compose-options[hidden] { display: none; }

.compose-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
}
@media (max-width: 720px) {
  .compose-options-grid { grid-template-columns: 1fr; }
}

.compose-opt {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.compose-opt-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.compose-opt select {
  height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  font-family: inherit;
  background: white;
  color: var(--text);
  outline: none;
  cursor: pointer;
  appearance: auto;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.compose-opt select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.compose-opt-manage {
  font-size: 11px;
  color: var(--brand);
  text-decoration: none;
  align-self: flex-start;
}
.compose-opt-manage:hover { text-decoration: underline; }

.compose-opt-qty .qty-stepper {
  display: inline-flex;
  align-items: center;
  height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: white;
  width: fit-content;
}
.qty-stepper input {
  width: 56px;
  height: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  outline: none;
  -moz-appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.qty-step {
  width: 36px;
  height: 100%;
  border: none;
  background: transparent;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  font-family: inherit;
}
.qty-step:hover { background: var(--bg-soft); color: var(--text); }
.qty-step:first-child { border-right: 1px solid var(--border); }
.qty-step:last-child { border-left: 1px solid var(--border); }

.compose-add-row {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.compose-add-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-right: 4px;
}

.brand-input {
  width: 240px;
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0 18px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  background: white;
}
.brand-input:focus { border-color: var(--brand); }

/* Brand selector — replaces the free-text brand input. Shows the active
   selection (analyzed / custom / none) and opens a popover for picking. */
.brand-selector-wrap {
  position: relative;
}
.brand-selector {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 240px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: white;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-soft);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, background 0.12s, color 0.12s, box-shadow 0.12s;
}
.brand-selector:hover {
  border-color: var(--brand-border);
  background: var(--brand-soft);
}
.brand-selector[aria-expanded="true"] {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  background: white;
}
.brand-selector.has-brand {
  color: var(--text);
}
.brand-selector.is-analyzed {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-weight: 600;
}
.brand-selector.is-analyzed:hover {
  background: white;
}
.brand-selector-icon {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
  color: var(--text-faint);
}
.brand-selector.is-analyzed .brand-selector-icon {
  color: var(--brand);
}
.brand-selector-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-selector-arrow {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-faint);
}

/* Popover */
.brand-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 320px;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  padding: 12px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.brand-popover[hidden] { display: none; }
.brand-popover-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-soft);
  padding: 4px 4px 0;
}
.brand-popover-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.1s, border-color 0.1s;
}
.brand-popover-row:hover {
  background: var(--brand-soft);
  border-color: var(--brand-border);
}
.brand-popover-row.is-active {
  background: var(--brand-soft);
  border-color: var(--brand);
}
.brand-popover-icon {
  font-size: 16px;
  line-height: 1.2;
  color: var(--brand);
  flex-shrink: 0;
}
.brand-popover-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.brand-popover-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.brand-popover-sub {
  font-size: 11px;
  color: var(--text-soft);
  line-height: 1.3;
}
.brand-popover-empty {
  padding: 14px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.5;
}
.brand-popover-empty a {
  color: var(--brand-deep);
  text-decoration: underline;
}
.brand-popover-divider {
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}
.brand-popover-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 4px 0;
}
.brand-popover-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.brand-popover-connections {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.brand-popover-connections-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.brand-popover-connections-empty,
.brand-popover-connections-loading {
  font-size: 12px;
  color: var(--text-faint);
  padding: 4px 2px;
}
.brand-popover-connection {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
}
.brand-popover-connection .brand-popover-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.brand-popover-connection .brand-popover-name {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-popover-connection .brand-popover-sub {
  font-size: 11px;
  color: var(--text-faint);
}
.brand-popover-disconnect {
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  line-height: 1;
}
.brand-popover-disconnect:hover { color: var(--text); }
.brand-popover-connect-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.brand-popover-connect-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  background: white;
  font-size: 12px;
  color: var(--text-soft);
  cursor: pointer;
}
.brand-popover-connect-pill:hover {
  border-style: solid;
  color: var(--text);
}
.brand-popover-connect-pill::before {
  content: "+";
  margin-right: 2px;
  color: var(--text-faint);
}

.product-popover-head-hint {
  font-size: 11px;
  color: var(--text-faint);
  font-style: italic;
}
.brand-popover-custom-row {
  display: flex;
  gap: 6px;
}
.brand-popover-input {
  flex: 1;
  height: 34px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
.brand-popover-input:focus { border-color: var(--brand); }
.brand-popover-apply {
  background: var(--text);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0 14px;
  height: 34px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.brand-popover-apply:hover { background: #000; }
.brand-popover-clear {
  background: transparent;
  border: none;
  color: var(--text-soft);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  padding: 6px 4px;
  text-align: left;
  text-decoration: underline;
}
.brand-popover-clear:hover { color: #dc2626; }
.brand-popover-link {
  font-size: 12px;
  color: var(--brand-deep);
  padding: 6px 4px;
  text-decoration: none;
}
.brand-popover-link:hover { text-decoration: underline; }

.count-select {
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0 14px;
  font-size: 14px;
  font-family: inherit;
  background: white;
  color: var(--text);
  cursor: pointer;
  outline: none;
}
.count-select:focus { border-color: var(--brand); }

.go-btn {
  background: var(--text); color: white;
  border: none; border-radius: 999px;
  padding: 0 22px; height: 44px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.go-btn:disabled {
  background: var(--text-faint);
  cursor: not-allowed;
}
.go-btn:hover:not(:disabled) { background: #000; }
.go-btn.nudge { animation: goNudge 0.42s ease; }
@keyframes goNudge {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* Results bar */
/* Results header — editorial. Sits on the cream surface (no white bar),
   query renders as a serif title with the workspace as a quiet eyebrow,
   and the "working" pill is brand-honey (not green) so progress reads as
   the same "alive" honey language as the incubate/hatch motion. */
.results-bar {
  padding: 20px 24px 14px;
  background: transparent;
  border-bottom: 1px solid var(--conn-border, var(--border));
  display: flex; align-items: baseline; gap: 14px;
  flex-wrap: wrap;
}
.results-bar h2 {
  margin: 0;
  font-family: var(--font-heading, "Iowan Old Style", Georgia, serif);
  font-size: 24px; font-weight: 400; letter-spacing: -0.01em;
  color: var(--text);
}
.results-bar h2 small {
  font-family: var(--font-body, system-ui, sans-serif);
  color: var(--text-faint); font-weight: 400; font-size: 13px; margin-left: 8px;
}

.progress {
  display: flex; align-items: center; gap: 8px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  color: var(--brand-deep);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.progress .bg-dot { background: var(--brand); }
.progress.idle {
  background: var(--bg-soft);
  border-color: var(--border-strong);
  color: var(--text-soft);
}
.progress.idle .bg-dot { background: var(--text-faint); animation: none; }

.filter-strip {
  display: flex; gap: 6px;
  margin-left: auto;
}
.filter-pill {
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  color: #444;
  cursor: pointer;
  font-family: inherit;
}

/* Text-on-design constraint bar — pill button → input → badge state machine */
.constraint-bar {
  padding: 12px 24px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
}

/* Zone 3 — Constraints zone (Brand, Text, References, …) */
/* Use cases — Ideogram-style category cards. Each card pairs a label with
   an overlapping thumbnail collage of recent designs in that use case. The
   row scrolls horizontally on narrow viewports so cards keep their shape. */
.use-cases {
  padding: 14px 24px 0;
  background: white;
  display: flex;
  align-items: stretch;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.use-cases::-webkit-scrollbar { display: none; }

.use-case-card {
  flex: 1 1 180px;
  min-width: 180px;
  max-width: 280px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  font-family: inherit;
  text-align: left;
  color: var(--text);
  /* Hide thumbnail overflow so rotated tiles never bleed past the card edge */
  overflow: hidden;
  position: relative;
}
.use-case-card:hover {
  border-color: var(--text-faint);
  background: var(--bg);
}
.use-case-card.is-active {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.use-case-card.is-active .use-case-name {
  color: var(--brand-deep);
}

.use-case-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Two overlapping rotated thumbnails on the right side of the card.
   Hidden when the card has no preview data so "General" stays clean. */
.use-case-thumbs {
  flex-shrink: 0;
  position: relative;
  width: 56px;
  height: 48px;
  pointer-events: none;
}
.use-case-thumbs img {
  position: absolute;
  width: 36px;
  height: 44px;
  object-fit: cover;
  border-radius: 5px;
  background: var(--bg-soft);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.use-case-thumbs img:nth-child(1) {
  right: 18px;
  top: 2px;
  transform: rotate(-8deg);
}
.use-case-thumbs img:nth-child(2) {
  right: 0;
  top: 2px;
  transform: rotate(8deg);
}

.constraints-zone {
  padding: 10px 24px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: white;
}
.constraints-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-right: 4px;
  white-space: nowrap;
}
.constraint-slot {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.constraint-more {
  background: transparent;
  border: none;
  color: var(--text-faint);
  font-size: 16px;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  transition: background 0.12s, color 0.12s;
}
.constraint-more:hover { background: var(--bg-soft); color: var(--brand); }

/* Inside the constraints zone the brand selector becomes a chip-button: auto-
   width, dashed-empty / filled-active, harmonized with the other constraint
   chips so the row reads as one consistent vocabulary. */
.constraint-slot-brand .brand-selector {
  width: auto;
  height: auto;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  border-style: dashed;
  gap: 6px;
}
.constraint-slot-brand .brand-selector:hover {
  border-style: solid;
}
.constraint-slot-brand .brand-selector.has-brand,
.constraint-slot-brand .brand-selector.is-analyzed {
  border-style: solid;
  background: var(--brand-soft);
  border-color: var(--brand-border);
  color: var(--brand-deep);
}
.constraint-slot-brand .brand-selector-icon {
  font-size: 13px;
}
.constraint-add {
  /* Empty "+ add" affordance — not contributing to the request. Reads as
     clearly secondary next to the always-filled select chips so the user
     can scan the bar and tell what's active without thinking. */
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-faint);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.75;
  transition: background 0.12s, border-color 0.12s, color 0.12s, opacity 0.12s;
}
.constraint-add:hover { opacity: 1; }
.constraint-add:hover {
  background: var(--brand-soft);
  border-color: var(--brand-border);
  border-style: solid;
  color: var(--brand-deep);
}
.constraint-plus {
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

.constraint-edit {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 600px;
}
.constraint-edit[hidden] { display: none; }
.constraint-edit input {
  flex: 1;
  height: 36px;
  border: 1px solid var(--brand);
  border-radius: 999px;
  padding: 0 16px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  background: white;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
/* Multi-line textarea variant — same orange-pill look but auto-grows.
   border-radius pulls back from 999px so wrapped lines don't get
   chopped by the pill curvature; min-height matches the single-line
   pill so short scripts still look identical. */
.constraint-textarea {
  flex: 1;
  min-height: 36px;
  max-height: 200px;
  border: 1px solid var(--brand);
  border-radius: 18px;
  padding: 8px 16px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.4;
  outline: none;
  background: white;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  resize: none; /* JS auto-grow handles size; user-drag would fight it */
  width: 100%;
  display: block;
}
.constraint-textarea-wide {
  /* Script chip — UGC monologues are usually longer than image-on-design
     text, so give the input more breathing room before it has to wrap. */
  min-width: 340px;
}
.constraint-cancel {
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--text-soft);
  cursor: pointer;
  font-family: inherit;
}
.constraint-cancel:hover { background: var(--bg-soft); color: var(--text); }

.constraint-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  color: var(--brand-deep);
  border-radius: 999px;
  padding: 6px 6px 6px 14px;
  font-size: 13px;
  cursor: pointer;
  max-width: 100%;
  transition: background 0.12s, border-color 0.12s;
}
.constraint-badge[hidden] { display: none; }
.constraint-badge:hover {
  background: #f3e8ff;
  border-color: var(--brand);
}
.constraint-badge-label {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--brand);
}
.constraint-badge-value {
  font-style: italic;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 480px;
}
.constraint-remove {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(76, 29, 149, 0.15);
  color: var(--brand-deep);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.constraint-remove:hover {
  background: var(--bad);
  color: white;
}

/* Reference image chip strip */
.ref-strip {
  display: none;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 24px 0;
  background: white;
}
.ref-strip.is-active { display: flex; }

/* Inline variant — when the strip is mounted inside the compose card
   (above the textarea), drop the white banding + outer padding so the
   refs read as attachments to the prompt instead of a separate row
   under it. Smaller chips so they don't dominate the card's height. */
.ref-strip-inline {
  padding: 8px 4px 4px;
  background: transparent;
  gap: 8px;
}
.ref-strip-inline .ref-chip-small {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}
.ref-strip-inline .ref-mode-pill {
  font-size: 8.5px;
  padding: 1px 5px;
  bottom: 3px;
  left: 3px;
  letter-spacing: 0.03em;
}
.ref-error-flash {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 500;
  animation: refErrFade 3.5s ease;
}
@keyframes refErrFade {
  0%, 80% { opacity: 1; }
  100% { opacity: 0; }
}
.ref-chip {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.ref-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  border-color: var(--brand-border);
}
.ref-chip-small { width: 56px; height: 56px; }
.ref-chip-large { width: 96px; height: 96px; }
.ref-chip img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ref-mode-pill {
  position: absolute;
  bottom: 4px;
  left: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  backdrop-filter: blur(4px);
}
.ref-chip-large .ref-mode-pill {
  font-size: 10px;
  padding: 3px 8px;
  bottom: 6px; left: 6px;
}
.ref-mode-pill.ref-mode-style { color: var(--brand-deep); background: var(--brand-soft); }
.ref-mode-pill.ref-mode-subject { color: var(--good-text); background: var(--good-soft); }
.ref-mode-pill.ref-mode-embed { color: #b45309; background: #fffbeb; }
.ref-mode-pill:hover { filter: brightness(0.96); }

.ref-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}
.ref-chip:hover .ref-remove { opacity: 1; }
.ref-remove:hover { background: var(--bad); }

/* Drop overlay (full-page when dragging files) */
.ref-drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(99, 102, 241, 0.08);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.ref-drop-overlay.is-active { display: flex; }
.ref-drop-card {
  background: white;
  border: 2px dashed var(--brand);
  border-radius: 16px;
  padding: 40px 56px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(99, 102, 241, 0.18);
}
.ref-drop-icon {
  font-size: 32px;
  color: var(--brand);
  margin-bottom: 8px;
}
.ref-drop-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.ref-drop-sub {
  font-size: 12px;
  color: var(--text-soft);
}

/* Action picker — shown when references are present */
.prompt-actions {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  margin-top: 8px;
}
.prompt-actions.is-active { display: flex; }
.prompt-actions-label {
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 500;
}
.prompt-actions-pills {
  display: flex;
  gap: 6px;
}
.action-pill {
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.action-pill:hover {
  background: var(--bg-soft);
  border-color: var(--brand-border);
}
.action-pill.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}
.action-pill.is-active:hover {
  background: var(--brand);
  filter: brightness(1.05);
}

/* Prompt-panel mirror (larger thumbs + caption next to each) */
#prompt-refs-field { display: none; }
#prompt-refs-field.is-active { display: flex; }
.prompt-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.prompt-refs .ref-chip-large {
  display: flex;
}
.prompt-refs .ref-caption {
  display: none; /* the chip is inline; caption shows in title tooltip */
}

/* Tiny info icon inside each preset pill — the only thing that triggers the
   hover popover, so casually mousing across pills doesn't flash a wall of
   prompt text. */
.preset-pill-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  font-size: 13px;
  line-height: 1;
  color: var(--text-faint);
  opacity: 0.55;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.preset-pill:hover .preset-pill-info { opacity: 0.85; }
.preset-pill-info:hover {
  opacity: 1;
  color: var(--brand);
  background: var(--brand-soft);
}
.preset-pill.is-active .preset-pill-info { color: rgba(255,255,255,0.85); }
.preset-pill.is-active .preset-pill-info:hover {
  background: rgba(255,255,255,0.18);
  color: white;
}

/* Hover-to-preview popover for preset pills */
.preset-hover {
  position: absolute;
  z-index: 200;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.10);
  padding: 16px 18px;
  width: min(520px, calc(100vw - 32px));
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 0.12s, transform 0.12s;
}
.preset-hover.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.preset-hover-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}
.preset-hover-desc {
  font-size: 12px;
  color: var(--text-soft);
  margin-bottom: 12px;
  line-height: 1.4;
}
.preset-hover-section {
  margin-top: 10px;
}
.preset-hover-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  font-weight: 700;
  margin-bottom: 4px;
}
.preset-hover-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  margin: 0;
  color: #374151;
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}

/* Prompt preview/edit panel — hidden by default, opened by the chip above */
.prompt-panel {
  display: none;
  margin: 4px 24px 0;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.prompt-panel.is-open { display: block; }
.prompt-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
}
.prompt-hint { color: #9ca3af; font-size: 12px; }
.prompt-hint.edited { color: var(--brand); font-weight: 500; }
.prompt-reset {
  margin-left: auto;
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  color: #6b7280;
}
.prompt-reset:hover { background: #f9fafb; color: #111827; }
.prompt-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}
.prompt-field { display: flex; flex-direction: column; gap: 4px; }
.prompt-field-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}
.prompt-field textarea {
  width: 100%;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fafafa;
  color: #111827;
  box-sizing: border-box;
}
.prompt-field textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: #fff;
}
.prompt-foot { margin: 0; color: #6b7280; }
.prompt-foot a { color: var(--brand); }

/* Grid */
.grid-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.grid-empty {
  grid-column: 1 / -1;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-soft);
  font-size: 14px;
}
/* Meta strip above the library grid — holds the compact search pill on
   the left and the count on the right. Same horizontal padding as the
   grid below so they vertically align. */
.library-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px 8px;
  flex-wrap: wrap;
}
.library-count {
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.library-count:empty { display: none; }

/* Library scope toggle — Mine / Public / All. Segmented pill matching the
   compose chip-bar's pill language. Default selection is Mine (the active
   workspace's own designs). */
.library-scope {
  display: inline-flex;
  gap: 2px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
}
.library-scope-btn {
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms, color 140ms;
}
.library-scope-btn:hover { color: var(--text); }
.library-scope-btn.is-active {
  background: var(--bg-card, #fff);
  color: var(--brand-deep);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.scroll-sentinel {
  height: 80px;
  width: 100%;
}
.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  padding: 20px 24px;
}
@media (max-width: 1200px) { .grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .grid { grid-template-columns: repeat(2, 1fr); } }

.library-shelf { padding-top: 12px; }
.library-shelf .grid { padding-top: 8px; }
.shelf-title {
  margin: 0;
  padding: 18px 24px 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  border-top: 1px solid #e5e7eb;
}

.tile {
  aspect-ratio: 1;
  /* Uniform white tile in the gallery — transparency is visible in the
     detail/edit modals where it actually matters for print-ready review. */
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.tile img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 4px;
  display: block;
}
.tile .tile-cap {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 18px 10px 8px;
  opacity: 0;
  transition: opacity 0.15s;
}
.tile:hover .tile-cap { opacity: 1; }

/* Hover-revealed edit affordance — top-right pencil. Same visual language as
   the × on reference chips: small white circle, soft shadow, brand accent. */
.tile-action {
  position: absolute;
  top: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: white;
  color: var(--brand);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.12s, transform 0.12s, background 0.12s, border-color 0.12s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  z-index: 2;
}
.tile:hover .tile-action {
  opacity: 1;
  transform: translateY(0);
}
.tile-action:hover {
  background: var(--brand-soft);
  border-color: var(--brand-border);
}

/* Tile action menu — single ⋯ trigger pinned top-right; action buttons
   drop BELOW the trigger as a vertical icon+label list ONLY when the
   trigger itself is hovered (or focused). Vertical layout scales to
   many items without squishing — each row is icon + label. */
.tile-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
}
.tile-actions .tile-actions-trigger {
  position: static;
  top: auto;
  right: auto;
  transform: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  color: var(--text, #1a1a1a);
  border: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  backdrop-filter: saturate(150%) blur(10px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.04);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.14s ease, transform 0.14s ease, background-color 0.14s ease, color 0.14s ease;
}
.tile-actions .tile-actions-trigger svg {
  width: 17px;
  height: 17px;
  display: block;
}
.tile-actions .tile-actions-trigger:hover {
  background: rgba(255, 255, 255, 1);
  color: var(--brand, #e8893c);
}
.tile:hover .tile-actions-trigger,
.tile-actions:focus-within .tile-actions-trigger {
  opacity: 1;
  transform: translateY(0);
}
/* Invisible hover bridge — extends the trigger's hit area DOWNWARD so
   the mouse can travel from trigger into the menu without crossing a
   dead gap that would collapse the menu mid-transit. */
.tile-actions-trigger::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 10px;
}
.tile-actions-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 178px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.05);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.16s ease, transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.tile-actions-trigger:hover ~ .tile-actions-menu,
.tile-actions-menu:hover,
.tile-actions:focus-within .tile-actions-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
/* Menu rows: icon + label, full-width hit target, left-aligned. */
.tile-actions-menu .tile-action {
  position: static;
  top: auto;
  right: auto;
  transform: none;
  opacity: 1;
  width: 100%;
  height: auto;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--text, #1a1a1a);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
  box-shadow: none;
}
.tile-actions-menu .tile-action:hover {
  background: var(--brand-soft, rgba(232, 137, 60, 0.10));
  color: var(--brand, #e8893c);
}
.tile-actions-menu .tile-action:active {
  transform: scale(0.985);
}
.tile-actions-menu .tile-action-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: inherit;
}
.tile-actions-menu .tile-action-icon svg {
  width: 17px;
  height: 17px;
  display: block;
}
.tile-actions-menu .tile-action-label {
  flex: 1 1 auto;
  white-space: nowrap;
}
/* Destructive row reads red on hover. Default state stays neutral so it
   doesn't draw the eye until the user actually looks for it. */
.tile-actions-menu .tile-action--danger:hover {
  background: rgba(239, 68, 68, 0.10);
  color: #b91c1c;
}
.tile-action.is-busy {
  opacity: 1;
  pointer-events: none;
  background: var(--brand-soft);
  animation: tile-action-busy 0.9s ease-in-out infinite;
}
.tile-action.is-failed {
  background: #fff1f0;
  border-color: #f3b8b3;
  color: #c4322a;
}
@keyframes tile-action-busy {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.88); }
}
/* Brief highlight on a freshly-forked tile so the user spots where it landed
   after we prepend it to the grid. */
.tile.just-duplicated {
  box-shadow: 0 0 0 3px var(--brand), 0 8px 20px rgba(0, 0, 0, 0.12);
  animation: tile-duplicated-flash 1.4s ease-out;
}
@keyframes tile-duplicated-flash {
  0%   { box-shadow: 0 0 0 3px var(--brand), 0 0 0 0 var(--brand); }
  60%  { box-shadow: 0 0 0 3px var(--brand), 0 0 0 12px rgba(0, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Modal CTA — the "Make more like this" button inside the design modal. */
.modal-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 18px;
  padding: 10px 18px;
  background: var(--brand);
  color: white;
  border: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: filter 0.12s, transform 0.06s;
}
.modal-cta:hover { filter: brightness(1.08); }
.modal-cta:active { transform: scale(0.98); }
.modal-cta-icon { font-size: 14px; line-height: 1; }

/* Brief pulse on the ref strip after a "make more like this" click,
   so the action visibly registers even though the new chip might be
   off-screen on small viewports. */
@keyframes ref-strip-pulse {
  0%   { background: var(--brand-soft); }
  60%  { background: var(--brand-soft); }
  100% { background: transparent; }
}
.ref-strip.just-added {
  animation: ref-strip-pulse 1.2s ease-out;
}

/* ── Settings: Brand intelligence (prototype) ────────────────────────── */
.settings-divider {
  height: 1px;
  background: var(--border);
  margin: 28px 0;
}
.settings-pill.brand-beta {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #c2410c;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.brand-section {
  display: flex;
  flex-direction: column;
}
.brand-analyzer {
  margin-top: 4px;
}

/* URL input row + Analyze button */
.brand-url-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.brand-url-input {
  flex: 1;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0 18px;
  height: 44px;
  font-family: inherit;
  font-size: 14px;
  background: white;
}
.brand-url-input:focus {
  outline: none;
  border-color: var(--brand);
}
.brand-analyze-btn {
  flex-shrink: 0;
  height: 44px;
}
.brand-url-hint {
  margin: 8px 4px 0;
  font-size: 11px;
  color: var(--text-faint);
}

/* Analyzing state with animated step list */
.brand-analyzing {
  padding: 18px 20px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.brand-analyzing-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text-soft);
  margin-bottom: 12px;
  word-break: break-all;
}
.brand-analyzing-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.brand-analyzing-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-faint);
  transition: color 0.2s;
}
.brand-analyzing-steps li.active {
  color: var(--text);
}
.brand-analyzing-steps li.done {
  color: var(--text-soft);
}
.brand-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  flex-shrink: 0;
  transition: background 0.2s, box-shadow 0.2s;
}
.brand-analyzing-steps li.active .brand-step-dot {
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
  animation: brand-step-pulse 1s ease-in-out infinite;
}
.brand-analyzing-steps li.done .brand-step-dot {
  background: #22c55e;
}
@keyframes brand-step-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.3); }
}

/* Analyzed state — header row + 4-card grid + themes + top performers */
.brand-analysis {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.brand-analyzed-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  font-size: 13px;
}
.brand-connected-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  flex-shrink: 0;
}
.brand-analyzed-summary {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.brand-analyzed-summary strong {
  color: var(--text);
}
.brand-analyzed-meta {
  font-size: 11px;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-disconnect-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-soft);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  flex-shrink: 0;
}
.brand-disconnect-btn:hover {
  color: var(--text);
  text-decoration: none;
  border-color: var(--border-strong);
  background: white;
}

/* Brand summary cards — 2x2 grid of voice/audience/style/customer */
.brand-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.brand-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.brand-card-icon {
  font-size: 18px;
  line-height: 1;
  margin-bottom: 2px;
}
.brand-card-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-soft);
}
.brand-card-body {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}
.brand-card-list {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}
.brand-card-list li {
  margin-bottom: 4px;
}
.brand-card-list li:last-child { margin-bottom: 0; }

/* Themes row */
.brand-themes-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
}
.brand-themes-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-soft);
  margin-right: 4px;
}
.brand-theme-chip {
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  color: var(--brand-deep);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
}

/* Top performers grid (reused from prior version, slight tightening) */
.brand-top-perf-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-soft);
}
.brand-top-perf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.brand-top-perf-card {
  position: relative;
  aspect-ratio: 1;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.brand-top-perf-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.brand-top-perf-card.brand-top-perf-skel {
  background: linear-gradient(
    90deg,
    var(--bg-soft) 0%,
    #f5f5f5 50%,
    var(--bg-soft) 100%
  );
  background-size: 200% 100%;
  animation: brand-skel-shimmer 1.4s linear infinite;
}
@keyframes brand-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.brand-top-perf-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 4px 6px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
  color: white;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.brand-top-perf-sales,
.brand-top-perf-cvr {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.brand-proto-note {
  margin-top: 4px;
  font-style: italic;
  color: var(--text-faint);
}

/* Level 2 CTA — "Connect your store for live data" */
.brand-level-up {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--brand-soft);
  border: 1px dashed var(--brand-border);
  border-radius: 12px;
  margin-top: 6px;
}
.brand-level-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.brand-level-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.brand-level-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-deep);
}
.brand-level-sub {
  font-size: 11px;
  color: var(--text-soft);
  line-height: 1.4;
}
.brand-level-btn {
  background: white;
  border: 1px solid var(--brand-border);
  color: var(--brand-deep);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: not-allowed;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.7;
}

/* Extra brand sources — collapsible textarea + file dropzone */
.brand-extra-sources {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
}
.brand-extra-sources[open] {
  border-color: var(--brand-border);
  background: var(--brand-soft);
}
.brand-extra-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.brand-extra-summary::-webkit-details-marker { display: none; }
.brand-extra-chevron {
  font-size: 11px;
  color: var(--text-faint);
  width: 12px;
  display: inline-block;
  transition: transform 0.15s;
}
.brand-extra-sources[open] .brand-extra-chevron { transform: rotate(90deg); }
.brand-extra-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.brand-extra-hint {
  font-size: 11px;
  color: var(--text-faint);
  margin-left: auto;
}
.brand-extra-hint.is-active {
  color: var(--brand-deep);
  font-weight: 600;
}
.brand-extra-body {
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.brand-extra-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.brand-extra-field-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-soft);
}
.brand-extra-field textarea {
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  min-height: 90px;
  background: white;
}
.brand-extra-field textarea:focus {
  outline: none;
  border-color: var(--brand);
}

/* File picker zone */
.brand-files-zone {
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  padding: 12px;
  background: white;
  transition: border-color 0.12s, background 0.12s;
}
.brand-files-zone.is-dropping {
  border-color: var(--brand);
  background: var(--brand-soft);
  border-style: solid;
}
.brand-files-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s, border-color 0.1s;
}
.brand-files-pick:hover {
  background: var(--brand-soft);
  border-color: var(--brand-border);
}
.brand-files-pick-icon { font-size: 14px; line-height: 1; }
.brand-files-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.brand-files-list:empty { display: none; }
.brand-file-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  font-size: 12px;
}
.brand-file-name {
  flex: 1;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-file-size {
  color: var(--text-soft);
  font-size: 11px;
  flex-shrink: 0;
}
.brand-file-remove {
  background: transparent;
  border: none;
  color: var(--text-soft);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  line-height: 1;
}
.brand-file-remove:hover { color: #dc2626; }
.brand-file-error {
  font-size: 11px;
  padding: 6px 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #b91c1c;
}
.brand-files-hint { margin: 6px 4px 0; }

/* Error state when fetch / analysis fails */
.brand-error {
  padding: 18px 20px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.brand-error-title {
  font-size: 13px;
  font-weight: 600;
  color: #b91c1c;
}
.brand-error-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--text-soft);
  word-break: break-all;
}
.brand-error-msg {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}
.brand-error .go-btn-secondary {
  align-self: flex-start;
  margin-top: 4px;
}

/* Edit modal — same backdrop/chrome family as the existing tag modal but a
   2-column split: images on the left growing horizontally as edits accrue,
   prompt form on the right. */
/* ─── Edit Thread modal — chat-style multi-turn editor ─────────────────
   Each turn is a user message bubble (right-aligned) + an assistant image
   card (left-aligned). Composer pins to the bottom. The modal is fixed
   height so the body scrolls independently and the composer stays in view. */
.edit-thread-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  height: min(720px, 88vh);
  background: white;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}
.edit-thread-modal .modal-close {
  position: absolute;
  top: 12px; right: 14px;
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--text-faint);
  cursor: pointer;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  z-index: 5;
}
.edit-thread-modal .modal-close:hover { color: var(--text); background: var(--bg-soft); }

.edit-thread-head {
  padding: 18px 56px 14px 22px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.edit-thread-head-text { flex: 1; min-width: 0; }
.edit-thread-recolor-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.edit-thread-recolor-btn:hover {
  background: white;
  border-color: var(--brand);
}
.edit-thread-recolor-btn:active { transform: scale(0.97); }
.edit-thread-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.edit-thread-sub {
  margin: 0;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.5;
}
.edit-thread-sub-note {
  display: inline-block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-faint);
  font-style: italic;
}

.edit-thread-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(180deg, #fbfbfd 0%, #f7f7fa 100%);
}
.edit-thread-loading {
  margin: auto;
  font-size: 13px;
  color: var(--text-faint);
}

.edit-thread-user {
  display: flex;
  justify-content: flex-end;
}
.edit-thread-user-bubble {
  max-width: 78%;
  background: var(--text);
  color: white;
  padding: 9px 14px;
  border-radius: 18px 18px 4px 18px;
  font-size: 13px;
  line-height: 1.45;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.edit-thread-assistant {
  display: flex;
  justify-content: flex-start;
  margin-top: 2px;
}
.edit-thread-assistant-meta {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin: 4px 0 -4px;
}
.edit-thread-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
  max-width: 78%;
  position: relative;
}
.edit-thread-card img {
  display: block;
  width: 100%;
  max-width: 380px;
  aspect-ratio: auto;
  height: auto;
  border-radius: 12px;
  object-fit: contain;
  background: var(--bg-soft);
}
.edit-thread-card-loading {
  width: 320px;
  height: 320px;
  overflow: hidden;
  display: flex;
  align-items: center; justify-content: center;
  flex-direction: column;
}
.edit-thread-card-shimmer {
  position: absolute;
  inset: 6px;
  border-radius: 12px;
  background: linear-gradient(
    100deg,
    var(--bg-soft) 30%,
    #f0eef6 50%,
    var(--bg-soft) 70%
  );
  background-size: 200% 100%;
  animation: editThreadShimmer 1.4s linear infinite;
}
.edit-thread-card-label {
  position: relative;
  z-index: 1;
  font-size: 12px;
  color: var(--text-faint);
  font-weight: 500;
}
/* Recolor-batch placeholder: shimmer + a visible target-color disc so the
   user can see WHICH color is rendering, not just "Generating…". */
.edit-thread-card-recolor {
  flex-direction: column;
  gap: 10px;
}
.edit-thread-card-recolor-swatch {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  position: relative;
  z-index: 1;
}
/* Recolor batch — render the whole batch as one block: user bubble on the
   right (already styled above), then a wider assistant slot below holding
   a grid of uniform tiles. The grid makes the batch read as a "sheet of
   variants" rather than a chat scroll. Tiles are square so colors are
   directly comparable at a glance. */
.edit-thread-assistant-wide {
  width: 100%;
  display: block; /* override the flex from .edit-thread-assistant */
}
.edit-thread-recolor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  width: 100%;
}
.edit-thread-recolor-tile {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  /* Pop-in animation — each tile fades + scales up when it lands so the
     user sees the magic of the batch arriving. */
  animation: recolorTileIn 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transition: transform 0.12s, box-shadow 0.12s;
}
.edit-thread-recolor-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.edit-thread-recolor-tile-art {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.edit-thread-recolor-tile-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.edit-thread-recolor-tile.is-loading .edit-thread-recolor-tile-art {
  /* Position the swatch above the shimmer */
  position: relative;
}
.edit-thread-recolor-tile.is-loading .edit-thread-recolor-tile-art .edit-thread-card-recolor-swatch {
  width: 38px;
  height: 38px;
  position: relative;
  z-index: 1;
}
.edit-thread-recolor-tile.is-failed .edit-thread-recolor-tile-art {
  background: #fef2f2;
  border-bottom: 1px solid #fecaca;
}
.edit-thread-recolor-tile.is-failed .edit-thread-card-recolor-swatch {
  width: 32px;
  height: 32px;
  opacity: 0.5;
}
.edit-thread-recolor-tile-fail {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  color: var(--bad);
  background: rgba(255,255,255,0.92);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.edit-thread-recolor-tile-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  background: white;
}
.edit-thread-recolor-tile-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  flex-shrink: 0;
}
.edit-thread-recolor-tile-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes recolorTileIn {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Failed turn — visible error card with the swatch (if any) + reason.
   Red-bordered so it's instantly readable as a failure, but compact so
   it doesn't dominate the thread. */
.edit-thread-card-failed {
  border-color: var(--bad);
  background: #fef2f2;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  max-width: 78%;
}
.edit-thread-card-fail-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--bad);
}
.edit-thread-card-fail-reason {
  font-size: 11px;
  color: #991b1b;
  line-height: 1.5;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: white;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #fecaca;
  word-break: break-word;
  white-space: pre-wrap;
}
@keyframes editThreadShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.edit-thread-composer {
  flex-shrink: 0;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border);
  background: white;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.edit-thread-composer textarea {
  flex: 1;
  resize: none;
  min-height: 44px;
  max-height: 140px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.edit-thread-composer textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
/* Wider send chip with a "Send" label so it reads as a real CTA, not a
   tiny icon. Min-width keeps the button comfortable to hit on touch and
   on narrow viewports where a 40px square felt cramped. */
.edit-thread-send {
  min-width: 96px;
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--text);
  color: white;
  border: none;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  transition: background 0.12s, transform 0.1s;
}
.edit-thread-send-label { white-space: nowrap; }
.edit-thread-send:hover:not([disabled]) { background: #000; }
.edit-thread-send:active:not([disabled]) { transform: scale(0.97); }
.edit-thread-send[disabled] {
  background: var(--bg-soft);
  color: var(--text-faint);
  cursor: not-allowed;
}
.edit-thread-status {
  margin: 0;
  padding: 0 16px 10px;
  font-size: 11px;
  color: var(--text-soft);
  min-height: 14px;
  background: white;
  flex-shrink: 0;
}
.edit-thread-status.ok { color: var(--good-text); font-weight: 600; }
.edit-thread-status.err { color: var(--bad); font-weight: 600; }

/* Legacy two-column edit modal (still wired in case .edit-modal is referenced
   elsewhere — the new flow uses .edit-thread-modal). */
.edit-modal {
  display: flex;
  flex-direction: row;
  max-width: 960px;
  width: 90vw;
  max-height: 80vh;
  overflow: hidden;
}
.edit-pane {
  display: flex;
  flex-direction: column;
}
.edit-pane-images {
  flex: 1.4;
  background: var(--bg-soft);
  padding: 24px;
  gap: 14px;
  overflow-y: auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
}
.edit-thumb {
  margin: 0;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.edit-thumb img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  /* Checker pattern reveals transparency at the moment the user is reviewing
     a generated edit — same cue as the detail modal. */
  background:
    linear-gradient(45deg, var(--bg-soft) 25%, transparent 25%),
    linear-gradient(-45deg, var(--bg-soft) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--bg-soft) 75%),
    linear-gradient(-45deg, transparent 75%, var(--bg-soft) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  background-color: white;
  border: 1px solid var(--border-strong);
}
.edit-thumb figcaption {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  font-weight: 600;
  text-align: center;
}

/* Loading skeleton — shimmer band sweeps across while the edit generates */
.edit-thumb-loading .edit-thumb-shimmer {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  background:
    linear-gradient(
      90deg,
      var(--bg-soft) 0%,
      #ffffff 50%,
      var(--bg-soft) 100%
    );
  background-size: 200% 100%;
  animation: editShimmer 1.4s ease-in-out infinite;
  border: 1px solid var(--border-strong);
}
.edit-thumb-loading figcaption {
  color: var(--brand);
}
@keyframes editShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Arrival pulse — brand-purple ring expands and fades when a new edit lands */
.edit-thumb-arrived img {
  animation: editArrive 1.2s ease-out;
}
@keyframes editArrive {
  0% {
    transform: scale(0.96);
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.55);
  }
  40% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(99, 102, 241, 0.18);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
  }
}
.edit-pane-form {
  flex: 1;
  padding: 28px;
  gap: 14px;
  border-left: 1px solid var(--border);
  background: white;
  min-width: 320px;
}
.edit-pane-form h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
}
.edit-pane-form textarea {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--bg-soft);
  color: var(--text);
  box-sizing: border-box;
  outline: none;
}
.edit-pane-form textarea:focus {
  background: white;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.edit-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.edit-go {
  background: var(--brand);
}
.edit-go:hover:not(:disabled) {
  background: var(--brand);
  filter: brightness(1.05);
}
.edit-status {
  font-size: 12px;
  color: var(--text-soft);
}
.edit-status.ok { color: var(--good-text); font-weight: 600; }
.edit-status.err { color: var(--bad); font-weight: 600; }
.tile.skeleton {
  background:
    linear-gradient(110deg,
      var(--bg-soft) 8%,
      var(--border) 18%,
      var(--bg-soft) 33%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  border-style: dashed;
  border-color: var(--border-strong);
  cursor: default;
}
.tile.skeleton:hover { transform: none; box-shadow: none; }

/* Populated skeleton — once the briefs land, each skeleton gets a brief
   card (title + excerpt) that holds for a beat then fades out, leaving
   the shimmer + the streaming-text pill behind. The "magic skeleton
   flashing" the user wanted is just the .skeleton-shimmer layer becoming
   fully visible again once the brief card finishes fading. */
.tile.skeleton.skeleton-populated {
  background: white;
  border-style: solid;
  border-color: var(--border);
  position: relative;
  overflow: hidden;
  /* Subtle pulse-in so each populated tile lands rather than appears. */
  animation: skeletonPulseIn 0.4s ease-out;
}
.skeleton-shimmer {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg,
      var(--bg-soft) 8%,
      var(--border) 18%,
      var(--bg-soft) 33%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  pointer-events: none;
  /* Full opacity — the brief card sits on top and dims it; after that
     card fades, the shimmer reads at full strength. */
  opacity: 1;
}
/* Brief card — the title + excerpt over a cream wash so text reads
   cleanly against the moving shimmer. Auto-fades after ~5s so the tile
   returns to the pure shimmer-and-pill state the user wanted. The fade
   is CSS-only so we don't have to schedule a JS timeout per tile. */
.skeleton-brief-card {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 14px 16px 48px; /* bottom padding clears the status pill */
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.82) 70%,
    rgba(255,255,255,0.95) 100%
  );
  backdrop-filter: blur(2px);
  animation: skeletonBriefFade 5.5s ease forwards;
  pointer-events: none;
}
@keyframes skeletonBriefFade {
  0%, 55%   { opacity: 1; }
  100%      { opacity: 0; visibility: hidden; }
}
.skeleton-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.skeleton-excerpt {
  flex: 1;
  font-size: 11px;
  color: var(--text-soft);
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
/* Status pill — pinned bottom-left of the tile so it stays after the
   brief card fades. Sits above both the shimmer and the brief card via
   z-index so it's never occluded. */
.skeleton-status {
  position: absolute;
  bottom: 12px;
  left: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--good-text);
  font-weight: 600;
  padding: 6px 10px;
  background: var(--good-soft);
  border: 1px solid var(--good-border);
  border-radius: 999px;
  width: fit-content;
  max-width: calc(100% - 28px);
}
.skeleton-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--good);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
  /* Gentle pulse so the dot reads as a live heartbeat. */
  animation: skeletonDotPulse 1.4s ease-in-out infinite;
}
.skeleton-status-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Stable container so the pill width doesn't pop as characters appear.
     Set a min-width via ch units — wider than most phrases so the pill
     doesn't grow visibly during the typewriter reveal. */
  min-width: 18ch;
  display: inline-flex;
  align-items: center;
}
.skeleton-caret {
  display: inline-block;
  width: 1px;
  margin-left: 1px;
  font-weight: 400;
  color: var(--good);
  animation: skeletonCaretBlink 1s steps(2, end) infinite;
  /* The glyph itself is what creates the visual; let it inherit font-size. */
}
@keyframes skeletonCaretBlink {
  50% { opacity: 0; }
}
@keyframes skeletonPulseIn {
  0%   { opacity: 0; transform: scale(0.985); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes skeletonDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.55); transform: scale(1); }
  50%      { box-shadow: 0 0 0 5px rgba(99, 102, 241, 0); transform: scale(1.12); }
}
.tile.failed {
  background: #fef2f2;
  border: 1px dashed var(--bad);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 11px; color: var(--bad);
  text-align: center; padding: 14px;
  cursor: default;
  position: relative;
  gap: 4px;
}
.tile.failed .failed-msg { font-weight: 600; }
.tile.failed .failed-sub { font-size: 10px; opacity: 0.75; }
.tile.failed .tile-retry {
  position: absolute;
  top: 8px; right: 8px;
  width: 26px; height: 26px;
  background: white;
  color: var(--bad);
  border: 1px solid var(--bad);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  font-family: inherit;
}
.tile.failed .tile-retry:hover { background: var(--bad); color: white; }
.tile.failed .tile-retry:disabled {
  opacity: 0.5; cursor: not-allowed;
}
.tile.failed.retrying {
  background:
    linear-gradient(110deg, #fef2f2 8%, #fecaca 18%, #fef2f2 33%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}
.tile.failed.retrying .tile-retry { animation: spin 1s linear infinite; }
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Modal */
.modal-back {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 24px;
}
.modal {
  background: white;
  border-radius: 14px;
  max-width: 920px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.modal-image {
  flex: 1.2;
  background:
    linear-gradient(45deg, var(--bg-soft) 25%, transparent 25%),
    linear-gradient(-45deg, var(--bg-soft) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--bg-soft) 75%),
    linear-gradient(-45deg, transparent 75%, var(--bg-soft) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-color: white;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.modal-meta {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  border-left: 1px solid var(--border);
}
.modal-meta h3 { margin: 0 0 4px; font-size: 17px; }
.modal-meta .small-text { color: var(--text-faint); font-size: 12px; line-height: 1.5; }
.modal-meta .tag-block { margin-top: 16px; }
.modal-meta .tag-label {
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin-bottom: 4px;
}
.modal-meta .tag-value {
  font-size: 13px;
  color: var(--text);
}
.tag-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tag-chip {
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  color: #444;
}
.color-chips { display: flex; gap: 4px; }
.color-chip {
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
}
.modal-close {
  position: absolute;
  top: 12px; right: 12px;
  background: white; color: var(--text);
  border: 1px solid var(--border-strong);
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.modal-back-to-run {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 6px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.modal-back-to-run:hover {
  background: white;
  border-color: var(--brand);
  color: var(--brand);
}

/* Schedule modal reuses the search-page .prompt-presets pill row but
   doesn't want the search-page's outer padding/margin (it's already
   inside a .schedule-field with its own spacing). */
.schedule-prompt-presets {
  padding: 0;
  margin-top: 6px;
}

/* Image-provider picker — same pill row as Style, but locked providers
   (no key configured) show a 🔒 icon and a warning chip. Active state
   inherits the brand-coloured highlight from .preset-pill.is-active. */
.image-providers { margin-top: 6px; }
.image-provider-pill.needs-key {
  background: #fff8f1;
  border-color: #f0c990;
  color: #92400e;
}
.image-provider-pill.needs-key:hover {
  background: #fef3c7;
  border-color: #d97706;
}
.image-provider-pill.needs-key.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}
.image-provider-pill .preset-pill-info {
  font-size: 12px;
  color: #d97706;
}
.image-provider-pill.is-active .preset-pill-info { color: white; }

/* "Change engine" / "Done" link next to the engine pill. Quiet link
   styling, not a button — so the eye lands on the engine itself, not
   the toggle. */
.image-provider-change {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0 8px;
  color: var(--text-faint);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.12s;
}
.image-provider-change:hover { color: var(--text); }

/* API key paste overlay — used by the search picker when a user picks a
   provider without a saved key. Same look as other modals in the app. */
.provider-key-modal {
  max-width: 480px;
  width: 92vw;
  flex-direction: column;
  padding: 28px;
  gap: 14px;
}
.provider-key-modal h3 { margin: 0; }
.provider-key-sub {
  margin: 0;
  font-size: 12px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.provider-key-help {
  margin: 0;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.5;
}
.provider-key-modal input[type="password"] {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg-soft);
  outline: none;
}
.provider-key-modal input[type="password"]:focus {
  border-color: var(--brand);
  background: white;
}
.provider-key-error {
  font-size: 13px;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 8px 10px;
}
.provider-key-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

/* Admin layout */
.admin-shell { display: flex; min-height: calc(100vh - 60px); }
.admin-side {
  width: 260px;
  background: white;
  border-right: 1px solid var(--border);
  padding: 20px;
  overflow-y: auto;
}
.admin-side h4 {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin: 0 0 8px;
}
.admin-side .facet-group { margin-bottom: 20px; }
.admin-side .facet {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  color: #444;
}
.admin-side .facet:hover { background: var(--bg-soft); }
.admin-side .facet.on {
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-weight: 600;
}
.admin-side .facet small { color: var(--text-faint); font-weight: 400; }
.admin-side .facet.on small { color: var(--brand); }
.admin-side .clear-btn {
  background: transparent; border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-soft);
  cursor: pointer;
  margin-top: 4px;
}

.admin-main { flex: 1; }
.admin-search {
  padding: 16px 24px;
  background: white;
  border-bottom: 1px solid var(--border);
  display: flex; gap: 12px;
}
.admin-search input {
  flex: 1;
  height: 38px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0 18px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.admin-search input:focus { border-color: var(--brand); }

.admin-grid-meta {
  padding: 14px 24px;
  font-size: 13px;
  color: var(--text-soft);
  background: var(--bg);
}

.admin-tile-wrap {
  display: flex; flex-direction: column;
  position: relative;
}
.admin-tile-wrap.selected .tile {
  outline: 3px solid var(--brand);
  outline-offset: -2px;
  border-radius: 6px;
}
.tile-check {
  position: absolute;
  top: 8px; left: 8px;
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 2px solid #fff;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 13px; font-weight: 700;
  line-height: 18px; text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 80ms ease;
  z-index: 2;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.admin-tile-wrap:hover .tile-check,
.admin-tile-wrap.selected .tile-check {
  opacity: 1;
}
.admin-tile-wrap.selected .tile-check {
  background: var(--brand);
  border-color: #fff;
}

.selection-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex; align-items: center; gap: 10px;
  margin: 0 24px 12px;
  padding: 10px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.selection-bar .sel-count {
  font-size: 13px; font-weight: 600;
  color: var(--text);
  margin-right: auto;
}
.selection-bar .sel-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12px; font-weight: 500;
  cursor: pointer;
}
.selection-bar .sel-btn:hover { border-color: var(--brand); color: var(--brand); }
.selection-bar .sel-btn.danger {
  background: #c43f3f;
  border-color: #c43f3f;
  color: #fff;
}
.selection-bar .sel-btn.danger:hover { background: #b13434; border-color: #b13434; }
.admin-tile-tags {
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 6px;
  line-height: 1.4;
  display: flex; flex-wrap: wrap; gap: 4px;
}
.admin-tile-tags .ttag {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
}

.empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--text-faint);
}
.empty h3 { color: var(--text); font-weight: 600; margin: 0 0 4px; }

/* Settings button in header */
.settings-btn {
  display: flex; align-items: center; gap: 7px;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 5px 12px 5px 9px;
  font-size: 12px;
  color: var(--text-soft);
  cursor: pointer;
  font-family: inherit;
}
.settings-btn:hover { background: var(--bg-soft); }

/* Plans button — opens recent-threads popover. Same pill pattern as
   Settings; warm-orange-tinted badge when in-progress plans exist. */
.plans-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 5px 12px 5px 10px;
  font-size: 12px;
  color: var(--text-soft);
  cursor: pointer;
  font-family: inherit;
  position: relative;
}
.plans-btn:hover { background: var(--bg-soft); }
.plans-btn-icon { font-size: 13px; line-height: 1; }
.plans-btn-label { font-weight: 500; }
.plans-btn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #f87060;
  color: white;
  font-size: 10px;
  font-weight: 700;
  margin-left: 2px;
}

.plans-popover {
  position: fixed;
  top: 64px;
  right: 24px;
  width: min(380px, calc(100vw - 48px));
  max-height: 70vh;
  background: white;
  border: 1px solid #ece8e0;
  border-radius: 14px;
  box-shadow: 0 24px 48px -12px rgba(15, 17, 26, 0.25),
              0 8px 16px -4px rgba(15, 17, 26, 0.12);
  z-index: 95;
  display: flex;
  flex-direction: column;
  animation: planJobsPanelIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.plans-popover-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #ece8e0;
}
.plans-popover-title {
  font-size: 13px;
  font-weight: 700;
  color: #0a0a0a;
  letter-spacing: -0.005em;
}
.plans-popover-close {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #ece8e0;
  background: white;
  color: #6b6660;
  cursor: pointer;
  font-size: 12px;
}
.plans-popover-close:hover { background: #faf8f3; color: #0a0a0a; }
.plans-popover-body {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.plans-popover-empty {
  padding: 28px 18px;
  font-size: 13px;
  color: #8a8580;
  text-align: center;
  line-height: 1.5;
}
.plans-row {
  text-align: left;
  background: white;
  border: none;
  border-bottom: 1px solid #f4f1ea;
  padding: 12px 16px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  transition: background 0.12s;
}
.plans-row:last-child { border-bottom: none; }
.plans-row:hover { background: #faf8f3; }
.plans-row-query {
  font-size: 13px;
  font-weight: 500;
  color: #0a0a0a;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.plans-row-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}
.plans-row-status {
  font-weight: 500;
  color: #8a8580;
}
.plans-row-status-shipped { color: #16a34a; }
.plans-row-status-locked { color: #f87060; }
.plans-row-status-ready { color: #0a0a0a; }
.plans-row-status-clarifying { color: #f87060; }
.plans-row-status-discovering { color: #f87060; }
.plans-row-status-failed { color: #dc2626; }
.plans-row-status-cancelled { color: #8a8580; text-decoration: line-through; }
.plans-row-ago {
  color: #b8b3ac;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-faint);
}
.status-dot.ok { background: var(--good); }
.status-dot.missing {
  background: #f59e0b;
  animation: pulse 1.5s infinite;
}

/* Banner */
.key-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 24px;
  background: #fef3c7;
  border-bottom: 1px solid #fcd34d;
  color: #92400e;
  font-size: 13px;
  font-weight: 500;
}
.banner-btn {
  background: #92400e;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.banner-btn:hover { background: #78350f; }

/* Settings modal */
.settings-modal { display: flex; }
.settings-body {
  padding: 28px;
  width: 100%;
}
.settings-body h3 { margin: 0 0 4px; font-size: 17px; }
.settings-body code {
  background: var(--bg-soft);
  padding: 1px 5px; border-radius: 4px;
  font-size: 12px; color: var(--brand-deep);
}
.settings-input {
  width: 100%;
  margin-top: 14px;
  height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0 14px;
  font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  outline: none;
}
.settings-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
.settings-actions {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px;
}
.settings-actions .go-btn { height: 38px; padding: 0 16px; font-size: 13px; }
.settings-status { font-size: 12px; color: var(--text-soft); }
.settings-status.ok { color: var(--good-text); }
.settings-status.err { color: var(--bad); }
.settings-section { padding-top: 4px; }
.settings-section + .settings-section {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.settings-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
  font-size: 14px;
}
.settings-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text-soft);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.settings-pill.ok { background: rgba(34,197,94,0.12); color: var(--good-text); }
.settings-pill.missing { background: rgba(220,38,38,0.10); color: var(--bad); }

/* Import UI */
.import-btn {
  height: 38px;
  padding: 0 14px;
  background: white;
  color: var(--brand-deep);
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.import-btn:hover { background: var(--brand-soft); }

.opts {
  margin-top: 14px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.opt-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 8px;
}
.opt-row:hover { background: var(--bg-soft); }
.opt-row input[type=checkbox] {
  margin-top: 2px;
  width: 16px; height: 16px;
  accent-color: var(--brand);
}
.opt-row span { line-height: 1.45; }

.import-help {
  margin-top: 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-soft);
}
.import-help summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
}
.import-help ol { padding-left: 20px; margin: 8px 0 4px; }
.import-help li { margin-bottom: 4px; }
.import-help code {
  background: white;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--brand-deep);
}

.ip-bar {
  height: 6px;
  background: var(--bg-soft);
  border-radius: 999px;
  overflow: hidden;
}
.ip-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 999px;
  width: 0%;
  transition: width 0.3s ease-out;
}
.ip-meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-soft);
}

/* "Tag untagged" admin button + inline progress */
.tag-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
#tag-untagged-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.tag-progress {
  margin: 8px 0 14px;
  padding: 12px 14px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* The Loom panel */
.loom-panel {
  margin: 14px 0 18px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.loom-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
  border-bottom: 1px solid var(--border);
}
.loom-title { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.loom-title strong { font-size: 15px; }
.loom-state { color: var(--text-soft); font-size: 12px; }
.loom-actions { display: flex; align-items: center; gap: 14px; }
.loom-spend { font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.loom-btn {
  background: var(--text); color: white;
  border: none; border-radius: 8px;
  padding: 0 16px; height: 34px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.loom-btn:hover:not(:disabled) { background: #000; }
.loom-btn:disabled { background: var(--text-faint); cursor: not-allowed; }

.loom-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--text-faint);
}
.loom-dot.idle      { background: var(--text-faint); }
.loom-dot.running   { background: var(--good); animation: pulse 1.4s infinite; }
.loom-dot.sleeping  { background: #fb923c; }
.loom-dot.stopped   { background: var(--text-faint); }
.loom-dot.failed    { background: var(--bad); }

.loom-body {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 0;
}
.loom-topics, .loom-feed { padding: 14px 18px; }
.loom-topics { border-right: 1px solid var(--border); }
.loom-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  font-size: 12px; font-weight: 600; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.loom-add {
  background: var(--brand-soft); color: var(--brand-deep);
  border: 1px solid var(--brand-border); border-radius: 6px;
  padding: 3px 10px; font-size: 11px; font-weight: 600;
  cursor: pointer;
}
.loom-add:hover { background: white; }

/* Scrollable container so the topics list stays a fixed height regardless
   of how many topics the loom is tracking. Header stays sticky on top. */
.loom-topics-scroll {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
}
.loom-topics-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.loom-topics-table th {
  text-align: left; padding: 8px;
  color: var(--text-faint); font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}
.loom-topics-table td {
  padding: 8px; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.loom-topics-table tr.paused .t-q-label { color: var(--text-faint); text-decoration: line-through; }
.t-q-label { font-weight: 500; }
.t-q-pause { font-size: 11px; color: var(--bad); margin-top: 2px; }
.t-prog { width: 36%; }
.t-prog-bar {
  height: 6px; background: var(--bg-soft); border-radius: 999px; overflow: hidden;
}
.t-prog-fill { height: 100%; background: var(--brand); border-radius: 999px; transition: width 0.3s; }
.t-prog-meta { font-size: 11px; color: var(--text-soft); margin-top: 4px; font-variant-numeric: tabular-nums; }
.t-pri { width: 60px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.t-actions { white-space: nowrap; text-align: right; }
.t-btn {
  background: transparent; border: 1px solid var(--border-strong);
  color: var(--text-soft); border-radius: 6px;
  padding: 3px 8px; font-size: 11px; cursor: pointer;
  margin-left: 4px;
}
.t-btn:hover { background: var(--bg-soft); color: var(--text); }
.t-del:hover { background: #fef2f2; color: var(--bad); border-color: #fecaca; }

.loom-empty { color: var(--text-faint); font-size: 13px; padding: 12px 0; }

.loom-feed-list {
  max-height: 200px;
  overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  padding: 8px 10px;
}
.loom-feed-empty { color: var(--text-faint); padding: 8px 0; }
.loom-feed-item {
  display: flex; gap: 10px; align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border);
}
.loom-feed-item:last-child { border-bottom: none; }
.loom-feed-time { color: var(--text-faint); font-size: 11px; flex-shrink: 0; }
.loom-feed-text { color: var(--text); word-break: break-word; }
.loom-feed-item.kind-kept .loom-feed-text { color: var(--good-text); }
.loom-feed-item.kind-judge .loom-feed-text { color: #b45309; }
.loom-feed-item.kind-dedupe .loom-feed-text { color: var(--text-soft); }
.loom-feed-item.kind-error .loom-feed-text { color: var(--bad); }
.loom-feed-item.kind-state .loom-feed-text { color: var(--brand-deep); font-weight: 500; }

@media (max-width: 900px) {
  .loom-body { grid-template-columns: 1fr; }
  .loom-topics { border-right: none; border-bottom: 1px solid var(--border); }
}

/* Live "Latest from the loom" strip */
.loom-strip {
  margin: 6px 0 14px;
  padding: 10px 14px 14px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.loom-strip-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px; font-weight: 600; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.loom-strip-count { font-weight: 500; color: var(--text-faint); }
.loom-strip-row {
  display: flex; gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: thin;
}
.loom-strip-tile {
  flex: 0 0 auto;
  width: 132px;
  margin: 0;
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  overflow: hidden;
  cursor: default;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.loom-strip-tile:hover {
  transform: translateY(-1px);
  border-color: var(--brand-border);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
.loom-strip-img {
  width: 100%; aspect-ratio: 1;
  background:
    repeating-conic-gradient(#f5f5f5 0% 25%, transparent 0% 50%) 50% / 16px 16px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.loom-strip-img img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.loom-strip-tile figcaption {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 8px;
  background: white;
  font-size: 11px;
}
.loom-strip-niche {
  color: var(--text); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.loom-strip-score {
  color: var(--good-text); font-weight: 700;
  font-variant-numeric: tabular-nums; margin-left: 6px;
  flex-shrink: 0;
}
@keyframes loomStripFresh {
  0%   { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5); border-color: var(--brand); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); border-color: var(--border-strong); }
}
.loom-strip-tile.loom-strip-fresh {
  animation: loomStripFresh 1.2s ease-out;
}

/* Inline thumbnail in the live feed */
.loom-feed-thumb {
  width: 28px; height: 28px;
  object-fit: contain;
  background:
    repeating-conic-gradient(#f5f5f5 0% 25%, transparent 0% 50%) 50% / 6px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  flex-shrink: 0;
}
.loom-feed-item { align-items: center; }

/* In-flight skeleton + rejected variants for the strip */
@keyframes loomShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.loom-skel {
  width: 100%; height: 100%;
  background:
    linear-gradient(90deg,
      var(--bg-soft) 0%,
      #ececec 20%,
      var(--bg-soft) 40%,
      var(--bg-soft) 100%
    );
  background-size: 200% 100%;
  animation: loomShimmer 1.4s linear infinite;
}
.loom-strip-tile.loom-tile-pending {
  border-style: dashed;
  border-color: var(--border-strong);
}
.loom-strip-tile.loom-tile-judge,
.loom-strip-tile.loom-tile-dedupe,
.loom-strip-tile.loom-tile-error { opacity: 0.85; }
.loom-strip-tile.loom-tile-judge   { border-color: #fed7aa; }
.loom-strip-tile.loom-tile-dedupe  { border-color: var(--border-strong); }
.loom-strip-tile.loom-tile-error   { border-color: #fecaca; }
.loom-strip-tile.loom-tile-kept    { border-color: var(--good-border); }

.loom-strip-rej {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft);
  color: var(--text-soft);
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 22px; font-weight: 700;
}
.loom-strip-rej.err { background: #fef2f2; color: var(--bad); }

.loom-strip-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap;
}
.loom-strip-badge.bad     { background: #fff7ed; color: #b45309; }
.loom-strip-badge.dupe    { background: var(--bg-soft); color: var(--text-soft); }
.loom-strip-badge.pending { background: var(--bg-soft); color: var(--text-faint); }
.loom-strip-kept {
  font-size: 14px; font-weight: 700; color: var(--good-text);
}

/* Zip drop zone */
.zip-drop {
  margin-top: 14px;
  padding: 28px 16px;
  border: 2px dashed var(--brand-border);
  background: var(--brand-soft);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.zip-drop:hover { background: #f3e8ff; border-color: var(--brand); }
.zip-drop.over {
  background: #ede9fe;
  border-color: var(--brand);
  border-style: solid;
}
.zip-drop-icon {
  font-size: 32px;
  color: var(--brand);
  line-height: 1;
}
.zip-drop-title {
  margin-top: 6px;
  font-weight: 600;
  color: var(--brand-deep);
  font-size: 14px;
}
.zip-drop-title code {
  background: white;
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--brand-deep);
  font-size: 13px;
}
.zip-drop-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-soft);
}

.or-divider {
  margin: 16px 0 8px;
  text-align: center;
  position: relative;
  color: var(--text-faint);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.or-divider::before,
.or-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: var(--border);
}
.or-divider::before { left: 0; }
.or-divider::after { right: 0; }
.or-divider span { background: white; padding: 0 8px; position: relative; }

/* Prompt editor */
.prompts-btn {
  height: 38px;
  padding: 0 14px;
  background: white;
  color: var(--text-soft);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.prompts-btn:hover { background: var(--bg-soft); }

.prompt-block { margin-top: 16px; }
.prompt-block textarea {
  width: 100%;
  min-height: 140px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  outline: none;
  resize: vertical;
  line-height: 1.5;
}
.prompt-block textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.prompt-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.prompt-row .lbl {
  font-size: 12px; font-weight: 600; color: var(--text);
}
.prompt-row .reset {
  background: transparent;
  border: none;
  color: var(--text-soft);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.prompt-help {
  font-size: 11px;
  color: var(--text-faint);
  margin: 4px 0 6px;
  line-height: 1.4;
}

/* ── Prompt presets — search-page picker row ─────────────────────────── */
.prompt-presets {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.prompt-presets-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.prompt-presets-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.preset-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.preset-pill:hover {
  background: var(--bg-soft);
  border-color: var(--brand-border);
}
.preset-pill.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}
.preset-pill.is-active .preset-pill-icon {
  color: white;
}
.preset-pill-icon {
  color: var(--brand);
  font-size: 11px;
  line-height: 1;
}
.preset-manage-btn {
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  width: 36px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-soft);
  font-size: 14px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.preset-manage-btn:hover {
  background: var(--bg-soft);
  border-color: var(--brand-border);
  color: var(--brand);
}

/* "+ Add custom prompt" inline pill — appended after the last preset
   so the create-new affordance always sits at the end of the System
   Prompt row. Dashed border distinguishes it from real preset pills. */
.preset-add-pill {
  border-style: dashed !important;
  color: var(--text-soft);
}
.preset-add-pill:hover {
  border-style: solid !important;
  border-color: var(--brand) !important;
  color: var(--brand) !important;
  background: white !important;
}
.preset-add-pill .preset-pill-icon {
  font-size: 13px;
  font-weight: 400;
}

/* ── Custom prompts management modal ─────────────────────────────────── */
.presets-modal {
  max-width: 640px;
  width: 92vw;
  max-height: 86vh;
  overflow-y: auto;
  flex-direction: column;
  padding: 28px;
  gap: 0;
}
.presets-header {
  margin-bottom: 16px;
}
.presets-header h3 {
  margin: 0 0 4px;
  font-size: 18px;
}
.presets-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--text-soft);
}
.presets-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.presets-meta-text {
  font-size: 12px;
  color: var(--text-soft);
}
.presets-counter {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 2px 10px;
  border-radius: 999px;
}
.presets-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.presets-divider {
  display: flex;
  align-items: center;
  margin: 12px 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-faint);
  gap: 8px;
}
.presets-divider::before,
.presets-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.presets-empty {
  font-size: 13px;
  color: var(--text-faint);
  padding: 16px;
  text-align: center;
  background: var(--bg-soft);
  border-radius: 8px;
}
.preset-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  transition: border-color 0.12s;
}
.preset-card:hover {
  border-color: var(--brand-border);
}
.preset-card.editing {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  border-color: var(--brand-border);
  background: var(--brand-soft);
}
.preset-card-reorder {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.preset-card-body {
  flex: 1;
  min-width: 0;
}
.preset-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.preset-card-desc {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.preset-card-controls {
  display: flex;
  gap: 4px;
}
.preset-card-icon {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-soft);
  font-size: 12px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.preset-card-icon:hover:not(:disabled) {
  background: var(--bg-soft);
  border-color: var(--border-strong);
  color: var(--text);
}
.preset-card-icon:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.preset-card-icon.danger:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}
.preset-card-input {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  background: white;
}
.preset-card-input:focus {
  outline: none;
  border-color: var(--brand);
}
.preset-card-textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  background: white;
  resize: vertical;
  min-height: 200px;
}
.preset-card-textarea:focus {
  outline: none;
  border-color: var(--brand);
}
.preset-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.go-btn-secondary {
  background: white;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0 18px;
  height: 36px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.go-btn-secondary:hover { background: var(--bg-soft); }
.presets-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: white;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  font-family: inherit;
  margin-top: 4px;
  align-self: flex-start;
}
.presets-add-btn:hover {
  background: var(--brand-soft);
  border-color: var(--brand-border);
  color: var(--brand-deep);
}
.presets-add-icon {
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}
.presets-cap-msg {
  font-size: 12px;
  color: var(--text-faint);
  margin: 8px 0 0;
  text-align: center;
  font-style: italic;
}
.presets-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ── Admin tabs (Library / Research) ─────────────────────────────────── */
.admin-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 24px 0;
  border-bottom: 1px solid var(--border);
  background: white;
}
.admin-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
  margin-bottom: -1px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.admin-tab:hover { color: var(--text); }
.admin-tab.is-active {
  color: var(--brand-deep);
  border-bottom-color: var(--brand);
}
/* `<a class="admin-tab admin-tab-link">` — anchor styled to match the
   button tabs above. Cancels the default anchor underline and color so
   the link reads as part of the tab strip. */
.admin-tab-link,
.admin-tab-link:hover,
.admin-tab-link:visited {
  text-decoration: none;
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
}
.admin-tab-link:hover { color: var(--text); }
/* Hidden until admin.js confirms allowlist via /api/admin/me. Class-based
   hide (not [hidden] attribute) so the flex display on .admin-tabs doesn't
   override it. */
.admin-tab-admin-only { display: none !important; }

/* ── Research panel ──────────────────────────────────────────────────── */
.research-panel { padding: 18px 24px; background: white; }
.research-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; flex-wrap: wrap; gap: 10px;
}
.research-title strong { font-size: 15px; color: var(--text); }
.research-sub {
  display: block; font-size: 12px; color: var(--text-soft); margin-top: 2px;
}
.research-creds-state {
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-soft);
}
.research-creds-state.ok {
  background: #f0fdf4; border-color: #bbf7d0; color: #166534;
}
.research-creds-state.missing {
  background: #fef3c7; border-color: #fde68a; color: #92400e;
}
.research-controls {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 14px;
}
.research-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.research-row-actions { grid-template-columns: 1fr auto; align-items: center; }
.research-field { display: flex; flex-direction: column; gap: 4px; }
.research-field-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-faint);
}
.research-field input,
.research-field select {
  height: 36px; border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 0 10px; font-family: inherit; font-size: 13px;
  background: white; outline: none;
}
.research-field input:focus,
.research-field select:focus { border-color: var(--brand); }
.research-meta { font-size: 12px; color: var(--text-soft); }
.research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.research-loading,
.research-empty,
.research-error {
  grid-column: 1 / -1;
  padding: 32px 16px; text-align: center;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px;
  font-size: 13px; color: var(--text-soft);
}
.research-error { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.research-card {
  background: white; border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.research-card:hover {
  border-color: var(--brand-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.research-thumb {
  aspect-ratio: 1; background: var(--bg-soft); overflow: hidden; position: relative;
}
.research-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.research-thumb-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); font-size: 11px; font-style: italic;
}
.research-card-body {
  padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.research-card-title {
  font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 32px;
}
.research-card-shop {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 10px; color: var(--text-soft);
}
.research-card-cat {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px;
}
.research-card-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  padding: 6px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px;
}
.research-stat { display: flex; flex-direction: column; align-items: center; }
.research-stat-num { font-size: 13px; font-weight: 700; color: var(--text); }
.research-stat-label {
  font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--text-faint);
}
.research-stat.is-up .research-stat-num { color: #16a34a; }
.research-stat.is-down .research-stat-num { color: #dc2626; }
.research-card-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-top: auto;
}
.research-card-link { font-size: 10px; color: var(--text-soft); text-decoration: underline; }
.research-card-link:hover { color: var(--text); }
.research-card-make {
  background: var(--brand); color: white; border: none; border-radius: 999px;
  padding: 6px 12px; font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: filter 0.1s, transform 0.06s;
}
.research-card-make:hover:not(:disabled) { filter: brightness(1.08); }
.research-card-make:active { transform: scale(0.97); }
.research-card-make:disabled { background: var(--text-faint); cursor: not-allowed; opacity: 0.6; }
.research-pagination {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
}
.research-page-btn {
  background: white; border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 6px 14px; font-size: 12px; font-weight: 500;
  cursor: pointer; font-family: inherit;
}
.research-page-btn:hover:not(:disabled) {
  background: var(--bg-soft); border-color: var(--brand-border);
}
.research-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.research-page-state { font-size: 12px; color: var(--text-soft); }

/* ── Mining panel (auto-variations from keywords) ───────────────────── */
.mining-panel {
  padding: 18px 24px 0; background: white;
  border-bottom: 1px solid var(--border); margin-bottom: 18px;
}
.mining-head { margin-bottom: 14px; }
.mining-title strong { font-size: 15px; color: var(--text); }
.mining-title .mining-sub {
  display: block; font-size: 12px; color: var(--text-soft);
  margin-top: 4px; line-height: 1.5; max-width: 720px;
}
.mining-title code {
  font-size: 11px; background: var(--bg-soft);
  padding: 1px 6px; border-radius: 4px;
}
.mining-form {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px;
  margin-bottom: 14px;
}
.mining-field { display: flex; flex-direction: column; gap: 4px; }
.mining-field-label,
.mining-knob-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-faint);
}
.mining-field-seeds textarea {
  border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit; font-size: 13px; line-height: 1.5;
  resize: vertical; background: white; outline: none;
}
.mining-field-seeds textarea:focus { border-color: var(--brand); }
.mining-knob-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end;
}
.mining-knob { display: flex; flex-direction: column; gap: 4px; }
.mining-knob input,
.mining-knob select {
  height: 36px; border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 0 10px; font-family: inherit; font-size: 13px;
  background: white; outline: none;
}
.mining-knob input:focus,
.mining-knob select:focus { border-color: var(--brand); }
.mining-estimate {
  grid-column: 1 / 3;
  font-size: 12px; color: var(--text);
  background: white; border: 1px solid var(--brand-border); border-radius: 999px;
  padding: 8px 14px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; min-height: 36px;
}
.mining-estimate.is-empty {
  color: var(--text-faint); border-color: var(--border); font-style: italic;
}
.mining-estimate-cost {
  font-weight: 700; color: var(--brand-deep); flex-shrink: 0;
}
.mining-actions { display: flex; gap: 8px; justify-content: flex-end; }
.mining-progress {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  background: white; border: 1px solid var(--border); border-radius: 12px;
  margin-bottom: 18px;
}
.mining-progress-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.mining-progress-status {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; padding: 4px 10px; border-radius: 999px;
  background: var(--bg-soft); color: var(--text-soft); border: 1px solid var(--border);
}
.mining-progress-status.status-running {
  background: var(--good-soft); border-color: var(--good-border); color: var(--good-text);
  animation: mining-pulse 1.5s ease-in-out infinite;
}
.mining-progress-status.status-cancelled {
  background: #fff7ed; border-color: #fed7aa; color: #c2410c;
}
.mining-progress-status.status-done {
  background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8;
}
@keyframes mining-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.55 } }
.mining-progress-counts { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.mining-progress-cost { font-size: 12px; color: var(--text-soft); }
.mining-progress-bar {
  height: 6px; background: var(--bg-soft); border-radius: 999px; overflow: hidden;
}
.mining-progress-fill {
  height: 100%; width: 0; background: var(--brand); border-radius: 999px;
  transition: width 0.4s ease-out;
}
.mining-feed-head,
.mining-strip-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-soft); margin-top: 8px;
}
.mining-feed {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 280px; overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px;
}
.mining-feed-row { display: flex; gap: 10px; align-items: flex-start; }
.mining-feed-time { color: var(--text-faint); flex-shrink: 0; }
.mining-feed-text { color: var(--text); }
.mining-feed-row.kind-ok .mining-feed-text { color: var(--good-text); }
.mining-feed-row.kind-err .mining-feed-text { color: #b91c1c; }
.mining-feed-row.kind-warn .mining-feed-text { color: #c2410c; }
.mining-strip { display: flex; gap: 6px; overflow-x: auto; padding: 6px 2px; }
.mining-strip-tile {
  flex: 0 0 auto; width: 80px; height: 80px;
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border); display: block;
}
.mining-strip-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mining-strip-tile:hover { border-color: var(--brand); }

/* ── Background activity status pill (header, all pages) ─────────────── */
.bg-status {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bg-status[hidden] { display: none; }
.bg-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--good-soft);
  border: 1px solid var(--good-border);
  border-radius: 999px;
  padding: 4px 10px 4px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--good-text);
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.12s, border-color 0.12s;
}
.bg-status-pill:hover { filter: brightness(1.05); border-color: var(--good-text); }
.bg-status-pill.kind-loom {
  background: var(--brand-soft);
  border-color: var(--brand-border);
  color: var(--brand-deep);
}
.bg-status-pill.kind-loom:hover { border-color: var(--brand); }
.bg-status-pill.kind-loom-paused {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}
.bg-status-pill.kind-loom-paused .bg-status-active-dot { animation: none; }
.bg-status-pill.kind-loom-paused:hover { border-color: #c2410c; }

/* Plan-jobs pill — warm orange palette to match plan-mode aesthetic.
   Rendered as a button (not anchor) so click opens an inline popover
   with per-direction progress instead of navigating away. */
.bg-status-pill.kind-plan-jobs {
  background: rgba(248, 112, 96, 0.08);
  border-color: rgba(248, 112, 96, 0.35);
  color: #c45a48;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.bg-status-pill.kind-plan-jobs:hover {
  border-color: #f87060;
  filter: none;
}
.bg-status-pill.kind-plan-jobs .bg-status-bar {
  background: rgba(248, 112, 96, 0.18);
}
.bg-status-pill.kind-plan-jobs .bg-status-bar-fill {
  background: #f87060;
}

/* Plan-jobs popover panel — opens below the header pill on click.
   Shows per-direction progress as horizontal bars. Polls update via
   the existing /api/status interval. */
.plan-jobs-panel {
  position: fixed;
  top: 64px;
  right: 24px;
  width: min(420px, calc(100vw - 48px));
  max-height: 70vh;
  background: white;
  border: 1px solid #ece8e0;
  border-radius: 14px;
  box-shadow: 0 24px 48px -12px rgba(15, 17, 26, 0.25),
              0 8px 16px -4px rgba(15, 17, 26, 0.12);
  z-index: 95;
  display: flex;
  flex-direction: column;
  animation: planJobsPanelIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
@keyframes planJobsPanelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.plan-jobs-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #ece8e0;
}
.plan-jobs-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: #0a0a0a;
}
.plan-jobs-panel-sub {
  font-size: 12px;
  color: #6b6660;
  margin-top: 2px;
  line-height: 1.4;
}
.plan-jobs-panel-close {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #ece8e0;
  background: white;
  color: #6b6660;
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
}
.plan-jobs-panel-close:hover { background: #faf8f3; color: #0a0a0a; }
.plan-jobs-panel-rows {
  display: flex;
  flex-direction: column;
  padding: 8px 16px 16px;
  overflow-y: auto;
}
.plan-jobs-row {
  display: grid;
  grid-template-columns: 24px 1fr 70px;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f4f1ea;
}
.plan-jobs-row:last-child { border-bottom: none; }
.plan-jobs-row-num {
  font-size: 12px;
  color: #6b6660;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.plan-jobs-row-bar {
  height: 6px;
  background: #f4f1ea;
  border-radius: 999px;
  overflow: hidden;
}
.plan-jobs-row-bar-fill {
  height: 100%;
  background: #f87060;
  transition: width 0.4s ease-out;
}
.plan-jobs-row-status {
  font-size: 11px;
  color: #6b6660;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: right;
}
.plan-jobs-row-done .plan-jobs-row-bar-fill { background: #16a34a; }
.plan-jobs-row-done .plan-jobs-row-status { color: #16a34a; }
.plan-jobs-row-failed .plan-jobs-row-bar-fill { background: #dc2626; }
.plan-jobs-row-failed .plan-jobs-row-status { color: #dc2626; }
.bg-status-active-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: bg-status-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes bg-status-pulse {
  0%, 100% { opacity: 1 }
  50%      { opacity: 0.45 }
}
.bg-status-icon {
  font-size: 12px;
  line-height: 1;
}
.bg-status-label {
  font-variant-numeric: tabular-nums;
}
.bg-status-bar {
  display: inline-block;
  width: 60px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  overflow: hidden;
  margin-left: 4px;
}
.bg-status-bar-fill {
  display: block;
  height: 100%;
  background: currentColor;
  border-radius: 999px;
  transition: width 0.4s ease-out;
}

/* ── Mining: auto-seed discovery panel ───────────────────────────────── */
.mining-discover {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  background: white;
  border: 1px dashed var(--brand-border);
  border-radius: 10px;
}
.mining-discover-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.mining-discover-hint {
  font-size: 11px; color: var(--text-faint); font-style: italic;
}
.mining-discover-controls { display: flex; gap: 8px; align-items: stretch; }
.mining-discover-controls input {
  flex: 1;
  height: 36px;
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 0 14px;
  font-family: inherit; font-size: 13px;
  outline: none; background: white;
}
.mining-discover-controls input:focus { border-color: var(--brand); }
.mining-discover-controls .go-btn-secondary { height: 36px; flex-shrink: 0; }
.mining-discover-results { margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.mining-discover-loading,
.mining-discover-error,
.mining-discover-success {
  font-size: 12px; padding: 8px 12px; border-radius: 8px;
}
.mining-discover-loading {
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-soft);
}
.mining-discover-error {
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
}
.mining-discover-success {
  background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
}
.mining-discover-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 4px 16px;
  font-size: 11px;
  margin-top: 4px;
}
.mining-seed-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--bg-soft);
}
.mining-seed-kw {
  font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mining-seed-stats {
  color: var(--text-soft); white-space: nowrap; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.mining-seed-stat-sep { color: var(--text-faint); margin: 0 2px; }

/* ── Mining schedules (autonomous cron) ──────────────────────────────── */
.schedules-panel {
  padding: 18px 24px 0;
  background: white;
  margin-bottom: 18px;
}
.schedules-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 14px; flex-wrap: wrap;
}
.schedules-title { flex: 1; min-width: 280px; }
.schedules-title strong { font-size: 15px; color: var(--text); }
.schedules-title .schedules-sub {
  display: block; font-size: 12px; color: var(--text-soft);
  margin-top: 4px; line-height: 1.5; max-width: 720px;
}
.schedules-title .schedules-sub strong {
  font-size: inherit; font-weight: 700; color: var(--brand-deep);
}
.schedules-head .go-btn { flex-shrink: 0; }
.schedules-list { display: flex; flex-direction: column; gap: 8px; }
.schedules-empty {
  padding: 28px 16px; text-align: center;
  font-size: 13px; color: var(--text-soft); font-style: italic;
  background: var(--bg-soft); border: 1px dashed var(--border-strong);
  border-radius: 12px;
}
.schedule-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.schedule-card:hover { border-color: var(--brand-border); box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.schedule-card.is-disabled {
  background: var(--bg-soft);
  opacity: 0.7;
}
.schedule-card-toggle {
  display: flex; align-items: center;
}
.schedule-toggle {
  width: 38px; height: 22px;
  background: var(--border-strong);
  border: none; border-radius: 999px;
  cursor: pointer; padding: 0; position: relative;
  transition: background 0.15s;
}
.schedule-toggle.is-on { background: var(--good); }
.schedule-toggle-pill {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%; background: white;
  transition: transform 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.schedule-toggle.is-on .schedule-toggle-pill { transform: translateX(16px); }

.schedule-card-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.schedule-card-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.schedule-card-row strong { font-size: 14px; color: var(--text); }
.schedule-due {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  background: var(--good-soft); color: var(--good-text);
  border: 1px solid var(--good-border);
  border-radius: 999px; padding: 2px 8px;
  animation: schedule-due-pulse 1.4s ease-in-out infinite;
}
@keyframes schedule-due-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.55 } }
.schedule-mode {
  font-size: 10px; font-weight: 600;
  border-radius: 999px; padding: 2px 8px;
  background: var(--bg-soft); border: 1px solid var(--border);
  color: var(--text-soft);
}
.schedule-mode.mode-auto-discover {
  background: var(--brand-soft); border-color: var(--brand-border); color: var(--brand-deep);
}
.schedule-card-meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-size: 11px; color: var(--text-soft);
}
.schedule-meta-item { white-space: nowrap; }
.schedule-meta-item .status-running { color: var(--good-text); font-weight: 600; }
.schedule-meta-item .status-done { color: var(--brand-deep); }
.schedule-meta-item .status-other { color: var(--text-faint); font-style: italic; }

.schedule-card-controls { display: flex; gap: 4px; }
.schedule-icon-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-soft);
  font-size: 14px; line-height: 1;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.schedule-icon-btn:hover {
  background: var(--bg-soft); border-color: var(--border-strong); color: var(--text);
}
.schedule-icon-btn.danger:hover {
  background: #fef2f2; border-color: #fecaca; color: #dc2626;
}

/* Schedule modal */
.schedule-modal {
  max-width: 640px; width: 92vw; max-height: 88vh; overflow-y: auto;
  flex-direction: column; padding: 28px; gap: 12px;
}
.schedule-modal h3 { margin: 0; }
.schedule-modal .small-text { margin: 0 0 8px; }
.schedule-field { display: flex; flex-direction: column; gap: 4px; }
.schedule-field-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-soft);
}
.schedule-field input,
.schedule-field select,
.schedule-field textarea {
  height: 38px;
  border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 0 12px;
  font-family: inherit; font-size: 13px;
  background: white; outline: none;
}
.schedule-field textarea {
  height: auto; padding: 10px 12px; resize: vertical; min-height: 70px;
  line-height: 1.4;
}
.schedule-field input:focus,
.schedule-field select:focus,
.schedule-field textarea:focus { border-color: var(--brand); }
.schedule-field-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.schedule-knobs { grid-template-columns: repeat(4, 1fr); }
.schedule-modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--border);
}

/* Critical: !important wins over .schedule-field's display:flex. The HTML
   `hidden` attribute alone gets overridden because flex/grid > the user
   agent's [hidden] { display:none } default. Class-based toggle is the fix. */
.is-hidden { display: none !important; }

/* Modal restructure — sectioned layout with steps, helper text, and clear
   required/optional markers. */
.schedule-modal-intro {
  font-size: 13px; line-height: 1.5;
  color: var(--text-soft);
  margin: 0 0 4px;
}
.schedule-section {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.schedule-section-head {
  display: flex; align-items: center; gap: 10px;
}
.schedule-step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: white;
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.schedule-section-title {
  font-size: 13px; font-weight: 700; color: var(--text);
}
.schedule-field-help {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.4;
  font-style: italic;
}
.schedule-field-label .req,
.schedule-field-label .opt {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
  text-transform: lowercase;
}
.schedule-field-label .req {
  background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca;
}
.schedule-field-label .opt {
  background: var(--bg-soft); color: var(--text-faint); border: 1px solid var(--border);
}

/* Run-edit form: Automatic toggle that gates the schedule subform */
.schedule-automatic-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--bg-soft);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.schedule-automatic-toggle:hover {
  background: white;
  border-color: var(--brand-border);
}
.schedule-automatic-toggle input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  flex-shrink: 0;
}
.schedule-automatic-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.schedule-automatic-label strong {
  font-size: 13px;
  color: var(--text);
}
.schedule-automatic-label .schedule-field-help {
  font-size: 11px;
}
#sch-schedule-fields.is-hidden { display: none; }

.schedule-field-label .schedule-tz {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  color: var(--brand-deep);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Mode picker — two cards instead of a dropdown */
.schedule-mode-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.schedule-mode-card {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  background: white;
  border: 2px solid var(--border-strong);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  /* Card is now a <button> — reset the browser defaults so it lays out
     like a regular block. */
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  width: 100%;
}
.schedule-mode-card:hover {
  border-color: var(--brand-border);
  background: var(--brand-soft);
}
.schedule-mode-card.is-selected {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.schedule-mode-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.schedule-mode-card-icon {
  font-size: 20px;
  line-height: 1;
}
.schedule-mode-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.schedule-mode-card.is-selected .schedule-mode-card-name {
  color: var(--brand-deep);
}
.schedule-mode-card-desc {
  font-size: 11px;
  color: var(--text-soft);
  line-height: 1.4;
}
.schedule-mode-extras {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 4px;
}

/* Advanced collapse */
.schedule-advanced {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
}
.schedule-advanced[open] { border-color: var(--brand-border); }
.schedule-advanced-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.schedule-advanced-summary::-webkit-details-marker { display: none; }
.schedule-advanced-chevron {
  font-size: 11px;
  color: var(--text-faint);
  transition: transform 0.15s;
  width: 12px;
}
.schedule-advanced[open] .schedule-advanced-chevron { transform: rotate(90deg); }
.schedule-advanced-summary > span:nth-child(2) {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.schedule-advanced-hint {
  font-size: 11px; color: var(--text-faint); font-style: italic;
  margin-left: auto;
}
.schedule-advanced-body {
  padding: 0 14px 14px;
  display: flex; flex-direction: column; gap: 10px;
}

/* "Save & run now" button gets a brand color so it pops as the action-y
   choice for users who want to see it work right away. */
.schedule-save-run {
  background: var(--brand);
  color: white;
}
.schedule-save-run:hover { filter: brightness(1.08); }

/* A schedule card with results becomes clickable. The body has an obvious
   hover state so users know they can drill in. */
.schedule-card.is-clickable { cursor: pointer; }
.schedule-card.is-clickable:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.schedule-card.is-clickable:hover .schedule-card-body strong {
  color: var(--brand-deep);
}

/* Running state — green pulsing border + tinted background so it's visually
   obvious that work is happening even before counters tick. */
.schedule-card.is-running {
  border-color: var(--good);
  background: var(--good-soft);
  animation: schedule-running-pulse 1.8s ease-in-out infinite;
}
.schedule-card.is-running:hover {
  background: var(--good-soft);
  border-color: var(--good);
}
@keyframes schedule-running-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.30); }
  50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.05); }
}
.schedule-running-badge {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  background: var(--good); color: white;
  border-radius: 999px; padding: 2px 8px;
}

/* Live progress block — bar + count + spinner */
.schedule-progress {
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px 0 2px;
}
.schedule-progress-bar {
  height: 6px;
  background: rgba(16, 185, 129, 0.15);
  border-radius: 999px;
  overflow: hidden;
}
.schedule-progress-fill {
  height: 100%;
  background: var(--good);
  border-radius: 999px;
  transition: width 0.4s ease-out;
  min-width: 4px;
}
.schedule-progress-fill.schedule-progress-indeterminate {
  width: 35% !important;
  animation: schedule-indeterminate 1.4s ease-in-out infinite;
}
@keyframes schedule-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
.schedule-progress-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; font-size: 11px; color: var(--text-soft);
  flex-wrap: wrap;
}
.schedule-progress-counts {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--good-text);
  font-weight: 600;
}
.schedule-progress-counts strong { font-weight: 700; color: var(--text); font-size: 13px; }
.schedule-progress-spinner {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(16, 185, 129, 0.25);
  border-top-color: var(--good);
  animation: schedule-spinner 0.8s linear infinite;
}
@keyframes schedule-spinner { to { transform: rotate(360deg); } }
.schedule-progress-cost { color: var(--text-soft); }
.schedule-progress-seeds {
  font-size: 11px;
  color: var(--good-text);
  background: rgba(16, 185, 129, 0.1);
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 600;
}
.schedule-progress-seeds em {
  font-style: normal;
  font-weight: 700;
  color: var(--text);
}

/* Idle-state scale hint — "8 seeds × 3 = up to 24 designs/run" */
.schedule-meta-scale {
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  padding: 2px 10px;
  color: var(--brand-deep);
}
.schedule-meta-scale strong { color: var(--text); font-weight: 700; }
.schedule-meta-scale em {
  font-style: normal;
  color: var(--text-faint);
  font-size: 10px;
}

/* "Interrupted" status — a server restart killed an in-flight run; the
   schedule's status is now stale until the next cron tick re-fires it. */
.status-interrupted { color: #c2410c; font-style: italic; }

.schedule-designs-link {
  background: transparent;
  border: none;
  color: var(--brand-deep);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.schedule-designs-link:hover { color: var(--brand); }

/* Run-designs modal — full-bleed grid of designs from a single run */
.run-modal {
  max-width: 1100px; width: 96vw; max-height: 90vh; overflow-y: auto;
  flex-direction: column; padding: 24px; gap: 14px;
}
.run-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.run-modal-head h3 { margin: 0; display: flex; align-items: center; gap: 10px; }
.run-modal-status {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--bg-soft); color: var(--text-soft);
  border: 1px solid var(--border);
}
.run-modal-status.status-running {
  background: var(--good-soft); color: var(--good-text); border-color: var(--good-border);
  animation: bg-status-pulse 1.4s ease-in-out infinite;
}
.run-modal-status.status-done {
  background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe;
}
.run-modal-status.status-cancelled {
  background: #fff7ed; color: #c2410c; border-color: #fed7aa;
}
.run-modal-sub {
  margin: 4px 0 0; font-size: 12px; color: var(--text-soft);
}
.run-modal-message {
  font-size: 12px; padding: 10px 14px;
  background: var(--brand-soft); border: 1px solid var(--brand-border);
  border-radius: 8px; color: var(--brand-deep);
}
.run-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.run-modal-loading,
.run-modal-empty,
.run-modal-error {
  grid-column: 1 / -1;
  padding: 32px 16px; text-align: center;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px;
  font-size: 13px; color: var(--text-soft); line-height: 1.6;
}
.run-modal-error { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.run-modal-tile {
  display: flex; flex-direction: column;
  background: white; border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color 0.12s, transform 0.06s;
}
.run-modal-tile:hover { border-color: var(--brand); }
.run-modal-tile:active { transform: scale(0.98); }
.run-modal-tile img {
  aspect-ratio: 1; width: 100%; height: auto; object-fit: cover;
  display: block; background: var(--bg-soft);
}
.run-modal-tile-cap {
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.run-modal-tile-title {
  font-size: 12px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.run-modal-tile-query {
  font-size: 10px; color: var(--text-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Seeds strip — at the top of the run modal, jump-links to each group */
.run-modal-seeds {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
}
.run-modal-seeds-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--brand-deep);
}
.run-modal-seeds-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.run-modal-seed-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: white;
  border: 1px solid var(--brand-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-deep);
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
}
.run-modal-seed-pill:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
}
.run-modal-seed-pill.is-pending {
  opacity: 0.6;
  font-style: italic;
}
.run-modal-seed-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--brand);
  color: white;
  font-size: 10px;
  font-weight: 700;
}
.run-modal-seed-pill.is-pending .run-modal-seed-count {
  background: var(--text-faint);
}

/* Per-seed groups — listings as a thin reference strip, designs as a
   dense grid below. Compact layout so a 4-seed run fits on one screen. */
.run-modal-grouped {
  display: flex; flex-direction: column; gap: 14px;
}
.run-modal-seed-group {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  scroll-margin-top: 16px;
}
.run-modal-seed-head {
  display: flex; align-items: baseline; gap: 10px;
}
.run-modal-seed-head strong {
  font-size: 13px;
  color: var(--text);
}
.run-modal-seed-status {
  font-size: 11px;
  color: var(--text-soft);
}
.run-modal-section-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: 0;
  text-transform: none;
}
.run-modal-pending {
  font-size: 11px;
  color: var(--text-faint);
  font-style: italic;
  padding: 6px;
}

/* Per-keyword chip row — shows the live pipeline state for each expanded
   keyword inside a seed group. Color reflects fetch status. */
.run-modal-keyword-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 4px 0 8px;
}
.run-modal-niche-tag {
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: none;
  letter-spacing: 0;
}

/* ── Plan mode ────────────────────────────────────────────────────── */
/* Plan toggle button next to Generate — same height as Generate, but
   visually secondary (white-with-border vs filled). 🧠 icon + text. */
.plan-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  height: 48px;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.plan-btn:hover {
  background: var(--bg-soft);
  border-color: var(--brand);
  color: var(--brand);
}
.plan-btn-icon { font-size: 16px; line-height: 1; }

/* Plan modal — backdrop + centered card overlay. The card (.plan-thread)
   is fixed-positioned and centered; the backdrop is a sibling that
   handles click-outside-to-close. Both toggle via .is-open. */
body.plan-modal-open {
  overflow: hidden;
}

.plan-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 26, 0.55);
  backdrop-filter: blur(2px);
  z-index: 90;
  animation: planBackdropFadeIn 0.18s ease-out;
}
.plan-modal-backdrop.is-open { display: block; }
@keyframes planBackdropFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Base44-style palette — warm orange brand, cream backgrounds, near-black
   for primary CTAs. Scoped to .plan-thread so it doesn't leak into the
   rest of the app. */
.plan-thread {
  --b44-orange: #f87060;
  --b44-orange-soft: rgba(248, 112, 96, 0.08);
  --b44-cream: #faf8f3;
  --b44-card: #ffffff;
  --b44-text: #0a0a0a;
  --b44-text-soft: #4f4f4f;
  --b44-text-faint: #8a8580;
  --b44-border: #ece8e0;
  --b44-border-strong: #d9d4ca;
  --b44-cta: #0a0a0a;
  display: none;
}
.plan-thread.is-open {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(960px, 92vw);
  height: min(880px, 92vh);
  max-height: 92vh;
  border: none;
  border-radius: 20px;
  background: var(--b44-cream);
  box-shadow: 0 32px 80px -16px rgba(15, 17, 26, 0.45),
              0 12px 24px -6px rgba(15, 17, 26, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 100;
  animation: planModalIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes planModalIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(0.985); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.plan-thread-footer[hidden] { display: none; }

/* Modal footer — Base44-style: composer floats on cream background,
   pill-shaped, soft drop shadow. Approve disappears here when there's
   no plan yet (the plan-summary card has its own prominent CTA). */
.plan-thread-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 48px 24px;
  background: transparent;
  border-top: none;
  flex-shrink: 0;
}
.plan-thread-reply {
  display: flex;
  align-items: end;
  gap: 4px;
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--b44-border);
  border-radius: 22px;
  background: white;
  box-shadow: 0 4px 12px -4px rgba(15, 17, 26, 0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.plan-thread-reply:focus-within {
  border-color: var(--b44-orange);
  box-shadow: 0 0 0 3px var(--b44-orange-soft),
              0 4px 12px -4px rgba(15, 17, 26, 0.06);
}
.plan-thread-reply textarea {
  flex: 1;
  resize: none;
  min-height: 28px;
  max-height: 140px;
  padding: 8px 4px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--b44-text);
  outline: none;
}
.plan-thread-reply textarea::placeholder { color: var(--b44-text-faint); }
.plan-thread-attach,
.plan-thread-mic {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--b44-text-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.plan-thread-attach:hover:not(:disabled),
.plan-thread-mic:hover:not(:disabled) {
  background: var(--b44-cream);
  color: var(--b44-text);
}
.plan-thread-attach:disabled,
.plan-thread-mic:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.plan-thread-send-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--b44-cta);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.06s;
}
.plan-thread-send-btn:hover { background: #000; }
.plan-thread-send-btn:active { transform: scale(0.95); }

/* Footer Approve — hidden when no plan yet. The plan-summary card has
   its own prominent CTA; this is just a fallback affordance for power
   users who prefer a sticky button. */
.plan-thread-approve-wrap {
  display: none;
}
.plan-thread-approve {
  padding: 9px 18px;
  border: none;
  border-radius: 999px;
  background: var(--b44-cta);
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s, transform 0.06s;
}
.plan-thread-approve:hover:not(:disabled) { background: #000; }
.plan-thread-approve:active:not(:disabled) { transform: scale(0.985); }
.plan-thread-approve:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.plan-thread-approve-hint {
  font-size: 11px;
  color: var(--b44-text-faint);
}

/* Plan-approved overlay — replaces the body for ~700ms after the
   operator clicks Start Generating. Centered black checkmark + title +
   sub. Reads as the commitment moment landing. */
.plan-approved-overlay {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 24px;
  text-align: center;
  animation: planApprovedIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes planApprovedIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.plan-approved-check svg {
  animation: planApprovedCheck 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both;
}
@keyframes planApprovedCheck {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}
.plan-approved-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--b44-text);
  letter-spacing: -0.01em;
}
.plan-approved-sub {
  font-size: 14px;
  color: var(--b44-text-soft);
}

/* Bottom-of-screen toast that lands after the modal closes — a thin,
   warm pill with the orange status dot. Auto-dismisses after ~4.5s. */
.plan-shipped-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 110;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: white;
  border: 1px solid var(--b44-border, #ece8e0);
  border-radius: 999px;
  box-shadow: 0 12px 28px -8px rgba(15, 17, 26, 0.18);
  font-size: 13px;
  color: #0a0a0a;
  max-width: min(540px, calc(100vw - 32px));
  animation: planToastIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.plan-shipped-toast.is-leaving {
  animation: planToastOut 0.22s ease-in forwards;
}
.plan-shipped-toast-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f87060;
  animation: planStatusPulse 1.3s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes planToastIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes planToastOut {
  to { opacity: 0; transform: translate(-50%, 8px); }
}

/* Designs view — shown when the operator reopens a shipped plan from
   the threads popover. They want to see the output, not the chat. */
.plan-designs-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: planFadeIn 0.22s ease-out;
}
.plan-designs-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
  border-bottom: 1px solid var(--b44-border);
  padding-bottom: 14px;
}
.plan-designs-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--b44-text);
  letter-spacing: -0.01em;
}
.plan-designs-sub {
  font-size: 13px;
  color: var(--b44-text-soft);
}
.plan-designs-count {
  font-size: 12px;
  color: var(--b44-text-faint);
  margin-top: 2px;
}
.plan-designs-loading,
.plan-designs-empty {
  padding: 28px 0;
  text-align: center;
  font-size: 13px;
  color: var(--b44-text-faint);
}
.plan-designs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.plan-designs-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--b44-cream);
  border: 1px solid var(--b44-border);
  transition: transform 0.15s, box-shadow 0.15s;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.plan-designs-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -6px rgba(15, 17, 26, 0.18);
}
.plan-designs-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Brief preview — shown after the operator approves the plan. Each
   direction renders as a card with the actual prompt text that will be
   sent to the brief writer. Cards stagger-fade in (animation-delay set
   inline) so it reads as "writing the briefs." */
.plan-brief-preview {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: planFadeIn 0.22s ease-out;
}
.plan-brief-preview-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}
.plan-brief-preview-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--b44-text);
  letter-spacing: -0.01em;
}
.plan-brief-preview-sub {
  font-size: 13px;
  color: var(--b44-text-soft);
}
.plan-brief-preview-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plan-brief-card {
  background: white;
  border: 1px solid var(--b44-border);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: planBriefIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
@keyframes planBriefIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.plan-brief-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.plan-brief-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--b44-text);
}
.plan-brief-card-qty {
  font-size: 12px;
  color: var(--b44-text-faint);
  flex-shrink: 0;
}
.plan-brief-card-body {
  margin: 0;
  padding: 12px 14px;
  background: var(--b44-cream);
  border: 1px solid var(--b44-border);
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.55;
  color: var(--b44-text-soft);
  white-space: pre-wrap;
  max-height: 220px;
  overflow-y: auto;
}

/* In-card primary CTA at the bottom of the directions section —
   Base44-style centered black pill button + small helper line beneath. */
.plan-card-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 0 4px;
}
.plan-card-cta-btn {
  padding: 13px 32px;
  border: none;
  border-radius: 999px;
  background: var(--b44-cta);
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.06s, opacity 0.15s;
  min-width: 220px;
}
.plan-card-cta-btn:hover:not(:disabled) {
  background: #000;
  transform: translateY(-1px);
}
.plan-card-cta-btn:active:not(:disabled) {
  transform: scale(0.985);
}
.plan-card-cta-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.plan-card-cta-hint {
  font-size: 12px;
  color: var(--b44-text-faint);
}

/* Plan summary card — tighter Base44-style commitment moment. Sits at
   the top of the directions section showing Intent & Goal / Audience /
   Voice / Gaps as labeled rows. Long values are clamped with Read more. */
.plan-summary-card {
  margin: 0 0 16px;
  padding: 22px 24px 20px;
  border: 1px solid var(--b44-border);
  border-radius: 16px;
  background: white;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.plan-summary-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--b44-text);
  letter-spacing: -0.01em;
}
.plan-summary-section-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--b44-text);
  margin-bottom: 4px;
  text-transform: none;
  letter-spacing: normal;
}
.plan-summary-section-value {
  font-size: 14px;
  color: var(--b44-text-soft);
  line-height: 1.6;
}
.plan-summary-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.plan-thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  background: transparent;
  border-bottom: none;
  flex-shrink: 0;
}
.plan-thread-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--b44-text);
}
.plan-thread-title strong { font-weight: 600; }
.plan-thread-icon {
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
}
.plan-thread-status {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--b44-text-faint);
  letter-spacing: 0.06em;
  padding: 3px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--b44-border);
  border-radius: 999px;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.plan-thread-status.is-running {
  background: var(--b44-orange-soft);
  color: var(--b44-orange);
  border-color: rgba(248, 112, 96, 0.25);
}
.plan-thread-status.is-running::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--b44-orange);
  animation: planStatusPulse 1.3s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes planStatusPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.7);
  }
}
.plan-thread-close {
  background: transparent;
  border: 1px solid var(--b44-border);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 13px;
  color: var(--b44-text-soft);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  flex-shrink: 0;
}
.plan-thread-close:hover {
  background: white;
  color: var(--b44-text);
  border-color: var(--b44-border-strong);
}

.plan-thread-body {
  flex: 1;
  padding: 24px 48px 32px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--b44-cream);
}
.plan-thread-body::-webkit-scrollbar { width: 8px; }
.plan-thread-body::-webkit-scrollbar-thumb {
  background: var(--b44-border-strong);
  border-radius: 4px;
}
.plan-thread-body::-webkit-scrollbar-track { background: transparent; }

/* Chat-stream messages — minimal Base44-style. AI is just a small orange
   dot to the left of the body; user messages are pill bubbles aligned
   right. No giant avatar chrome. */
.plan-msg {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  animation: planFadeIn 0.22s ease-out;
}
.plan-msg-ai { justify-content: flex-start; }
.plan-msg-user { justify-content: flex-end; }
.plan-msg-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
}
.plan-msg-avatar-ai {
  width: 22px;
  height: 22px;
  margin-top: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbb785 0%, var(--b44-orange) 100%);
  font-size: 0;
}
.plan-msg-avatar-user {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--b44-border);
  color: var(--b44-text-soft);
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
}
.plan-msg-body {
  flex: 1;
  min-width: 0;
  max-width: calc(100% - 34px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-msg-bubble {
  background: white;
  border: 1px solid var(--b44-border);
  border-radius: 18px;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--b44-text);
  max-width: 75%;
}
.plan-msg-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--b44-text);
  padding: 4px 0;
}
.plan-msg-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
}

/* Override the brainstorm card and other section blocks now that they
   live inside chat messages — no more outer borders/margins, and lose
   the section-style top border. */
.plan-msg-body .plan-section {
  border-top: none;
  padding: 0;
}
.plan-msg-body .plan-section-brainstorm {
  background: white;
  border: 1px solid var(--b44-border);
  border-radius: 14px;
  padding: 16px 18px;
}
.plan-msg-body .plan-research-log {
  margin: 0;
}
.plan-msg-body .plan-summary-card {
  margin: 0;
}
.plan-msg-body .plan-section-directions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plan-msg-body .plan-section-directions .plan-section-head {
  margin-bottom: 0;
  padding: 4px 2px 0;
}
.plan-msg-body .plan-thinking-shimmer {
  margin: 0;
}

/* Answered question rendered inside the chat stream — shows the
   strategist's question with the operator's pick stamped under it. */
.plan-answered-question {
  background: white;
  border: 1px solid var(--b44-border);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan-answered-question-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--b44-text);
  line-height: 1.45;
}
.plan-answered-question-why {
  font-size: 11px;
  color: var(--b44-text-faint);
  font-style: italic;
}
.plan-answered-question-answer {
  font-size: 13px;
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
}
.plan-thread-footer {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}
.plan-thread-footer textarea {
  flex: 1;
  resize: vertical;
  min-height: 44px;
  max-height: 160px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  background: white;
}

.plan-turn {
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 10px;
  max-width: 720px;
}
.plan-turn-user {
  background: var(--brand);
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 2px;
}
.plan-turn-thinking {
  color: var(--text-faint);
  font-style: italic;
  font-size: 12px;
}
.plan-turn-tool-call {
  font-size: 12px;
  color: var(--text-soft);
  background: var(--bg-soft);
  border: 1px dashed var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 4px 10px;
}
.plan-turn-tool-result {
  font-size: 12px;
  color: var(--text);
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 4px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.plan-turn-question {
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
}
.plan-turn-question-text { font-weight: 500; }
.plan-turn-question-why {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
  font-style: italic;
}
.plan-turn-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}
.plan-turn-system {
  color: var(--text-faint);
  font-style: italic;
  font-size: 12px;
  text-align: center;
}

/* The plan card — the big artifact at the end of the thread. */
.plan-card {
  margin-top: 8px;
  border: 2px solid var(--brand);
  border-radius: 12px;
  background: white;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plan-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.plan-card-head strong { font-size: 15px; }
.plan-card-total {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  background: var(--brand);
  color: white;
  border-radius: 999px;
}
.plan-card-row {
  display: flex;
  gap: 8px;
  font-size: 12px;
  align-items: baseline;
}
.plan-card-label {
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
  width: 80px;
  flex-shrink: 0;
}
.plan-directions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.plan-direction {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--bg-soft);
}
.plan-direction-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.plan-direction-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--brand);
  color: white;
  font-size: 11px;
  font-weight: 600;
}
.plan-direction-title { font-size: 13px; flex: 1; }
.plan-direction-lane {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-soft);
  background: white;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.plan-direction-qty {
  font-size: 11px;
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.plan-direction-qty input {
  width: 44px;
  padding: 2px 4px;
  font-size: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  text-align: center;
}
.plan-direction-remove {
  background: white;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-faint);
  line-height: 1;
}
.plan-direction-remove:hover { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.plan-direction-concept { font-size: 12px; line-height: 1.5; color: var(--text); margin-bottom: 6px; }
.plan-direction-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.plan-direction-meta-chip {
  font-size: 10px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--text-soft);
}
.plan-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* New three-section plan-thread layout. Replaces the old chronological
   .plan-turn-* bubbles with a checklist-style surface. */
.plan-section {
  border-top: 1px solid var(--border);
  padding: 12px 16px;
}
.plan-section:first-child { border-top: none; }

.plan-section-brainstorm {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.04) 0%, transparent 100%);
}
.plan-brainstorm-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  align-items: start;
  padding: 6px 0;
}
.plan-brainstorm-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  padding-top: 4px;
}
.plan-brainstorm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.plan-brainstorm-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--b44-cream);
  border: 1px solid var(--b44-border);
  font-size: 12px;
  color: var(--b44-text);
  line-height: 1.4;
}

/* Rich brainstorm — themes, motifs, sample quotes, references, audiences.
   Renders as the strategist's full mental map, not a sparse bullet list. */
.plan-bs-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px;
}
.plan-bs-block-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--b44-text-faint);
}
.plan-bs-themes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-bs-theme {
  padding: 12px 14px;
  background: var(--b44-cream);
  border: 1px solid var(--b44-border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan-bs-theme-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.plan-bs-theme-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--b44-text);
}
.plan-bs-theme-ref {
  font-size: 12px;
  color: var(--b44-text-faint);
  font-style: italic;
}
.plan-bs-theme-why {
  font-size: 13px;
  color: var(--b44-text-soft);
  line-height: 1.5;
}
.plan-bs-theme-motifs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 2px;
}
.plan-bs-motif-groups {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plan-bs-motif-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plan-bs-motif-group .plan-brainstorm-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--b44-text-soft);
  text-transform: capitalize;
  letter-spacing: 0;
}
.plan-bs-quotes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.plan-bs-quote {
  font-size: 13px;
  line-height: 1.5;
  color: var(--b44-text);
  padding: 6px 0;
  border-bottom: 1px dashed var(--b44-border);
}
.plan-bs-quote:last-child { border-bottom: none; }
.plan-bs-ref-chip {
  background: white;
  border-style: dashed;
}
.plan-bs-audiences {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plan-bs-audience {
  padding: 10px 12px;
  background: white;
  border: 1px solid var(--b44-border);
  border-radius: 10px;
}
.plan-bs-audience-slice {
  font-size: 13px;
  font-weight: 600;
  color: var(--b44-text);
  margin-bottom: 2px;
}
.plan-bs-audience-occasion {
  font-size: 12px;
  color: var(--b44-text-soft);
  line-height: 1.45;
}
.plan-bs-audience-quote {
  font-size: 12px;
  color: var(--b44-text-faint);
  font-style: italic;
  margin-top: 4px;
}
.plan-brainstorm-legacy {
  font-size: 12px;
  color: var(--b44-text-faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.plan-brainstorm-briefs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plan-brainstorm-brief {
  font-size: 12px;
  color: var(--text);
  padding: 4px 0;
  line-height: 1.45;
}
.plan-brainstorm-brief::before {
  content: "•";
  margin-right: 6px;
  color: var(--brand);
}
.plan-section-head {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.plan-section-head-meta {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.plan-research-log {
  margin: 12px 16px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-soft);
  padding: 8px 12px;
}
.plan-research-summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-soft);
  list-style: none;
}
.plan-research-summary::-webkit-details-marker { display: none; }
.plan-research-summary::before {
  content: "▸ ";
  display: inline-block;
  width: 14px;
  transition: transform 0.15s;
}
.plan-research-log[open] .plan-research-summary::before {
  transform: rotate(90deg);
}
.plan-research-lines {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plan-research-line {
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-soft);
  padding: 3px 8px;
}
.plan-research-thinking {
  color: var(--text-faint);
  font-style: italic;
  font-family: inherit;
}
.plan-research-tool-result {
  color: var(--text);
}

.plan-open-question {
  border-top: 1px solid var(--border);
  padding: 10px 16px;
}
.plan-open-question:first-child { border-top: none; padding-top: 4px; }
.plan-open-question-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.plan-checkbox {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-faint);
  font-size: 14px;
  line-height: 1.5;
  width: 22px;
  flex-shrink: 0;
}
.plan-checkbox-blocking { color: var(--brand); font-weight: 700; }
.plan-checkbox-checked { color: var(--good); }
.plan-open-question-text {
  font-size: 13px;
  color: var(--text);
  flex: 1;
  line-height: 1.4;
  font-weight: 500;
}
.plan-open-question-why {
  font-size: 11px;
  color: var(--text-faint);
  margin: 2px 0 8px 30px;
  font-style: italic;
}
.plan-open-question-answer {
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 500;
}
.plan-open-question-hint {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
  margin-left: 30px;
}

.plan-option-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 0 30px;
}
.plan-option-chip {
  text-align: left;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.plan-option-chip:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.plan-option-label { font-weight: 600; color: var(--text); }
.plan-option-example { font-size: 11px; color: var(--text-faint); }
.plan-option-chip-other { border-style: dashed; }
.plan-option-other-input {
  display: flex;
  gap: 6px;
  margin: 6px 0 0 30px;
}
.plan-option-other-input input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
}

/* Wizard view — replaces the entire body when a question is open. One
   question per screen, radio options stacked, Skip + Next at the bottom. */
.plan-wizard {
  margin: 8px 0;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: white;
  border: 1px solid var(--b44-border);
  border-radius: 16px;
  animation: planFadeIn 0.22s ease-out;
}
.plan-wizard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.plan-wizard-text {
  font-size: 19px;
  line-height: 1.35;
  color: var(--b44-text);
  font-weight: 600;
  letter-spacing: -0.01em;
  flex: 1;
}
.plan-wizard-counter {
  font-size: 12px;
  color: var(--b44-text-faint);
  font-weight: 500;
  flex-shrink: 0;
  padding-top: 6px;
}
.plan-wizard-why {
  font-size: 12px;
  color: var(--b44-text-faint);
  margin-top: -8px;
}
.plan-wizard-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plan-wizard-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--b44-border);
  border-radius: 12px;
  background: white;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.plan-wizard-option:hover {
  border-color: var(--b44-border-strong);
  background: var(--b44-cream);
}
.plan-wizard-option:has(input[type="radio"]:checked) {
  border-color: var(--b44-orange);
  background: var(--b44-orange-soft);
  box-shadow: 0 0 0 3px rgba(248, 112, 96, 0.06);
}
.plan-wizard-option input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--b44-orange);
  flex-shrink: 0;
}
.plan-wizard-option-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.plan-wizard-option-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--b44-text);
  line-height: 1.35;
}
.plan-wizard-option-example {
  font-size: 12px;
  color: var(--b44-text-faint);
  line-height: 1.4;
}
.plan-wizard-option-other {
  /* "Something else" — radio + inline text input on the same row. */
}
.plan-wizard-other-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  outline: none;
  padding: 0;
}
.plan-wizard-other-input::placeholder { color: var(--b44-text-faint); }
.plan-wizard-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}
.plan-wizard-skip {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--b44-text-soft);
  cursor: pointer;
  padding: 8px 4px;
}
.plan-wizard-skip:hover { color: var(--b44-text); }
.plan-wizard-next {
  padding: 10px 22px;
  border: none;
  border-radius: 999px;
  background: var(--b44-cta);
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s, transform 0.06s;
}
.plan-wizard-next:hover:not(:disabled) { background: #000; }
.plan-wizard-next:active:not(:disabled) { transform: scale(0.985); }
.plan-wizard-next:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.plan-wizard-legacy-hint {
  font-size: 13px;
  color: var(--b44-text-soft);
  padding: 12px 16px;
  background: var(--b44-cream);
  border-radius: 8px;
}

.plan-section-directions { padding-top: 8px; }
.plan-directions-list {
  display: flex;
  flex-direction: column;
}
.plan-direction-row {
  display: grid;
  grid-template-columns: 28px 22px 1fr auto 28px;
  gap: 8px;
  align-items: start;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
}
.plan-direction-row:not(.is-included) {
  opacity: 0.55;
}
.plan-direction-checkbox {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  color: var(--brand);
  padding: 0;
}
.plan-direction-num { font-size: 13px; color: var(--text-soft); }
.plan-direction-main { display: flex; flex-direction: column; gap: 4px; }
.plan-direction-detail-summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--text-faint);
  list-style: none;
}
.plan-direction-detail-summary::-webkit-details-marker { display: none; }
.plan-direction-qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.plan-direction-qty input {
  width: 44px;
  padding: 2px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  text-align: center;
}

/* Streaming / liveness affordances. Shown while the planner is
   actively working on the next turn — gives the user a visible signal
   that something is happening between request and response. */
.plan-thinking-shimmer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 16px;
  padding: 12px 16px;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    var(--bg-soft) 0%,
    var(--brand-soft) 40%,
    var(--bg-soft) 80%
  );
  background-size: 220% 100%;
  animation: planShimmer 1.8s ease-in-out infinite;
  font-size: 12px;
  color: var(--brand);
  font-weight: 500;
}
@keyframes planShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}
.plan-thinking-shimmer-label {
  transition: opacity 0.18s ease-out;
}
.plan-thinking-shimmer-label.is-fading {
  opacity: 0;
}
.plan-thinking-shimmer-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.plan-thinking-shimmer-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  animation: planDotBounce 1.1s ease-in-out infinite;
}
.plan-thinking-shimmer-dots span:nth-child(2) { animation-delay: 0.16s; }
.plan-thinking-shimmer-dots span:nth-child(3) { animation-delay: 0.32s; }
@keyframes planDotBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-3px); opacity: 1; }
}

/* Soft slide-up fade-in for newly-rendered sections. Re-renders the
   whole body each tick so all sections animate; the duration is short
   enough that re-renders don't look jittery. */
.plan-section,
.plan-research-log,
.plan-thinking-shimmer {
  animation: planFadeIn 0.22s ease-out;
}
@keyframes planFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Option chips lean in on hover and snap back when clicked, for a
   snappier feel than a flat hover. */
.plan-option-chip:active {
  transform: scale(0.985);
  transition: transform 0.06s;
}

/* Smooth the include/exclude toggle on direction rows instead of the
   instant opacity swap. */
.plan-direction-row {
  transition: opacity 0.18s ease;
}

/* "view N briefs" pill — appears next to the in-flight progress chip
   on the search page when a job's brief expansion completes. Lets the
   operator click through to see the prompts the image model is about
   to render. */
.brief-viewer-btn {
  margin-left: auto; /* anchor right, where the old Style/Color/More sat */
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.1s;
}
.brief-viewer-btn:hover {
  background: #fff;
  border-color: var(--brand);
  color: var(--brand-deep);
}
.brief-viewer-btn:active { transform: scale(0.97); }

/* Brief viewer modal — list of title + monospace prompt blocks. */
.brief-viewer-modal {
  max-width: 720px;
  width: 92vw;
  max-height: 86vh;
  overflow-y: auto;
  flex-direction: column;
  padding: 28px;
  gap: 14px;
}
.brief-viewer-modal h3 { margin: 0; }
.brief-viewer-sub {
  margin: 0;
  font-size: 12px;
  color: var(--text-faint);
}
.brief-viewer-list {
  display: flex; flex-direction: column; gap: 10px;
}
.brief-viewer-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--bg-soft);
}
.brief-viewer-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.brief-viewer-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--brand);
  color: white;
  font-size: 11px;
  font-weight: 600;
}
.brief-viewer-title {
  font-weight: 600;
  font-size: 13px;
}
.brief-viewer-prompt {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}
.run-modal-kw-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid var(--border);
  background: white;
  color: var(--text-soft);
  transition: background 0.15s, border-color 0.15s;
}
.run-modal-kw-chip .run-modal-kw-name {
  font-weight: 500;
  color: var(--text);
}
.run-modal-kw-chip .run-modal-kw-detail {
  font-size: 10px;
  color: var(--text-faint);
}
.run-modal-kw-chip.kw-pending { opacity: 0.65; }
.run-modal-kw-chip.kw-fetching {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
  animation: kw-pulse 1.2s ease-in-out infinite;
}
.run-modal-kw-chip.kw-fetching .run-modal-kw-name { color: #78350f; }
.run-modal-kw-chip.kw-done {
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.run-modal-kw-chip.kw-done .run-modal-kw-name { color: #065f46; }
.run-modal-kw-chip.kw-failed {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
.run-modal-kw-chip.is-current {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
@keyframes kw-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Highlight the seed group that's actively being processed. */
.run-modal-seed-group.is-current-seed {
  border-left: 3px solid var(--brand);
  padding-left: 9px;
  margin-left: -12px;
}

/* Reference listings — compact thin strip above the designs */
.run-modal-listings {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: var(--bg-soft);
  border-radius: 6px;
  flex-wrap: wrap;
}
.run-modal-listings .run-modal-section-label { flex-shrink: 0; }
.run-modal-listings-row {
  display: flex; gap: 4px; flex-wrap: wrap; flex: 1;
}
.run-modal-listing-card {
  display: flex; align-items: center; gap: 6px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px 3px 3px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s;
  max-width: 220px;
}
.run-modal-listing-card:hover { border-color: var(--brand); }
.run-modal-listing-card img {
  width: 28px; height: 28px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.run-modal-listing-thumb-empty {
  width: 28px; height: 28px;
  border-radius: 4px;
  background: var(--border);
  flex-shrink: 0;
}
.run-modal-listing-cap {
  display: flex; flex-direction: column; gap: 0;
  min-width: 0;
}
.run-modal-listing-title {
  font-size: 11px; font-weight: 500; color: var(--text);
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 160px;
}
.run-modal-listing-shop {
  font-size: 10px; color: var(--text-soft);
  line-height: 1.1;
}

/* Design tile inside the run modal — corner badge linking back to source */
.run-modal-tile {
  position: relative;
}
.run-modal-tile-source {
  position: absolute;
  top: 6px; right: 6px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--brand-border);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  z-index: 2;
  transition: background 0.12s, transform 0.06s;
}
.run-modal-tile-source:hover { background: white; transform: scale(1.05); }
.run-modal-tile-source-title {
  font-size: 10px; color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Library design modal — "Generated from" source card */
.modal-source {
  margin: 8px 0 14px;
  padding: 12px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
}

/* References used — strip of source ref thumbnails attached to a design. */
.modal-refs {
  margin: 8px 0 14px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.modal-refs-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #64748b;
  margin-bottom: 8px;
}
.modal-refs-empty-text {
  font-size: 13px;
  color: #64748b;
  font-style: italic;
}
.modal-refs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}
.modal-ref-chip {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
}
.modal-ref-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.modal-ref-mode {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
}
.modal-source-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--brand-deep);
  margin-bottom: 8px;
}
.modal-source-card {
  display: flex; gap: 12px;
  background: white;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s;
}
.modal-source-card:hover { border-color: var(--brand); }
.modal-source-card img {
  width: 80px; height: 80px;
  object-fit: cover; flex-shrink: 0;
  display: block; background: var(--bg-soft);
}
.modal-source-thumb-empty {
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft);
  font-size: 10px; color: var(--text-faint);
  font-style: italic;
  flex-shrink: 0;
}
.modal-source-meta {
  flex: 1; min-width: 0;
  padding: 8px 10px 8px 0;
  display: flex; flex-direction: column; gap: 2px;
}
.modal-source-title {
  font-size: 13px; font-weight: 600; color: var(--text);
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.modal-source-shop {
  font-size: 11px; color: var(--text-soft);
}
.modal-source-link {
  font-size: 11px;
  color: var(--brand);
  margin-top: 2px;
}
.modal-source-seed {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-soft);
}
.modal-source-seed strong { color: var(--text); }

/* ── Hygiene panel ───────────────────────────────────────────────────── */
.hyg-panel {
  padding: 22px 24px 80px;
  background: var(--bg);
  min-height: calc(100vh - 120px);
}
.hyg-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.hyg-title {
  font-size: 18px; font-weight: 700; color: var(--text);
  margin: 0 0 4px;
}
.hyg-sub {
  font-size: 13px; color: var(--text-soft); margin: 0;
  max-width: 640px; line-height: 1.5;
}
.hyg-mu { color: var(--text-soft); }
.hyg-warn { color: #b45309; font-weight: 600; }

.hyg-refresh {
  background: white; border: 1px solid var(--border-strong);
  border-radius: 8px; width: 36px; height: 36px;
  font-size: 16px; cursor: pointer; color: var(--text-soft);
  transition: color .12s, border-color .12s;
}
.hyg-refresh:hover { color: var(--text); border-color: var(--brand-border); }

.hyg-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 10px; margin-bottom: 14px;
}
.hyg-stat {
  background: white; border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
}
.hyg-stat.hyg-ok    { border-color: var(--good-border); background: var(--good-soft); }
.hyg-stat.hyg-pending { border-color: var(--brand-border); background: var(--brand-soft); }
.hyg-stat.hyg-fail  { border-color: #fecaca; background: #fef2f2; }
.hyg-num {
  font-size: 26px; font-weight: 700; color: var(--text);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.hyg-stat.hyg-ok .hyg-num { color: var(--good-text); }
.hyg-stat.hyg-pending .hyg-num { color: var(--brand-deep); }
.hyg-stat.hyg-fail .hyg-num { color: #b91c1c; }
.hyg-lbl {
  font-size: 11px; font-weight: 600; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: .04em; margin-top: 8px;
}

.hyg-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 14px 16px; flex-wrap: wrap;
  background: white; border: 1px solid var(--border);
  border-radius: 12px; margin-bottom: 10px;
  font-size: 13px; color: var(--text-soft);
}
.hyg-row strong {
  color: var(--text); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hyg-spend, .hyg-est { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.hyg-toggle-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; background: white;
  border: 1px solid var(--border); border-radius: 12px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.hyg-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none; flex-shrink: 0;
}
.hyg-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.hyg-toggle-track {
  position: relative;
  width: 38px; height: 22px;
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  transition: background .15s, border-color .15s;
}
.hyg-toggle-track::after {
  content: ''; position: absolute; left: 2px; top: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-faint);
  transition: transform .15s, background .15s;
}
.hyg-toggle input:checked + .hyg-toggle-track {
  background: var(--brand-soft); border-color: var(--brand);
}
.hyg-toggle input:checked + .hyg-toggle-track::after {
  transform: translateX(16px); background: var(--brand);
}
.hyg-toggle-lbl {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.hyg-toggle-help { font-size: 12px; flex: 1; min-width: 220px; }

.hyg-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 18px;
}
.hyg-card {
  background: white; border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px;
}
.hyg-card-head {
  font-size: 13px; font-weight: 700; color: var(--text);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 4px;
}
.hyg-card-sub {
  font-size: 13px; color: var(--text-soft); margin: 0 0 12px;
  line-height: 1.5;
}

.hyg-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.hyg-btn {
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0 16px; height: 36px;
  font-size: 13px; font-weight: 600;
  color: var(--text); cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  font-family: inherit;
}
.hyg-btn:hover { background: var(--bg-soft); border-color: var(--text-soft); }
.hyg-btn-primary {
  background: var(--text); color: white;
  border-color: var(--text);
}
.hyg-btn-primary:hover { background: #000; border-color: #000; }
.hyg-btn:disabled { opacity: .5; cursor: not-allowed; }

.hyg-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.hyg-table thead th {
  text-align: left; padding: 8px 10px;
  color: var(--text-soft); font-weight: 600;
  border-bottom: 1px solid var(--border);
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
}
.hyg-table tbody td {
  padding: 10px; border-bottom: 1px solid var(--border);
  color: var(--text); vertical-align: middle;
}
.hyg-table tbody tr:last-child td { border-bottom: none; }
.hyg-table td.err {
  color: #b91c1c; font-family: ui-monospace, "SF Mono", monospace;
  font-size: 12px; max-width: 480px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hyg-retry {
  background: white; border: 1px solid var(--border-strong);
  border-radius: 6px; padding: 4px 10px;
  font-size: 12px; cursor: pointer; color: var(--text);
  font-family: inherit;
}
.hyg-retry:hover { background: var(--bg-soft); }

/* Before / after preview thumbs in the failed-designs table */
.hyg-table td.hyg-thumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  white-space: nowrap;
}
.hyg-thumb {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background:
    linear-gradient(45deg, var(--bg-soft) 25%, transparent 25%),
    linear-gradient(-45deg, var(--bg-soft) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--bg-soft) 75%),
    linear-gradient(-45deg, transparent 75%, var(--bg-soft) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  background-color: white;
  flex-shrink: 0;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.hyg-thumb:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  border-color: var(--brand-border);
}
.hyg-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
  display: block;
}
.hyg-thumb-label {
  position: absolute;
  bottom: 2px;
  left: 2px;
  background: rgba(0,0,0,0.7);
  color: white;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 999px;
  pointer-events: none;
}
.hyg-thumb.is-missing img { display: none; }
.hyg-thumb.is-missing::after {
  content: "—";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 16px;
}
.hyg-thumb-arrow {
  color: var(--text-faint);
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.hyg-table td.hyg-filename {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 11.5px;
  color: var(--text-soft);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rich live-feed rows — orig → now thumbs alongside each event line */
.hyg-feed li.hyg-feed-rich {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.hyg-feed li.hyg-feed-rich:last-child { border-bottom: none; }
.hyg-feed-time {
  color: var(--text-faint);
  font-size: 11px;
  flex-shrink: 0;
  min-width: 76px;
}
.hyg-feed-thumbs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.hyg-thumb.hyg-feed-thumb {
  width: 88px;
  height: 88px;
  border-radius: 8px;
}
.hyg-feed-thumbs .hyg-thumb-arrow { font-size: 14px; }
.hyg-feed li.hyg-feed-rich { padding: 10px 10px; }
.hyg-feed-filename {
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.hyg-feed-status {
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hyg-feed-status-text {
  font-weight: 500;
  font-size: 11px;
  color: var(--text-soft);
}
.hyg-feed-rich-start { background: rgba(99, 102, 241, 0.04); }
.hyg-feed-rich-start .hyg-feed-status { color: var(--brand); }
.hyg-feed-rich-ok .hyg-feed-status { color: var(--good-text); }
.hyg-feed-rich-err { background: rgba(239, 68, 68, 0.04); }
.hyg-feed-rich-err .hyg-feed-status { color: var(--bad); }
.hyg-feed-err-msg {
  font-weight: 400;
  font-size: 11px;
  color: var(--bad);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hyg-feed-spinner {
  width: 10px;
  height: 10px;
  border: 2px solid rgba(99, 102, 241, 0.25);
  border-top-color: var(--brand);
  border-radius: 50%;
  display: inline-block;
  animation: hygSpin 0.8s linear infinite;
}
@keyframes hygSpin {
  to { transform: rotate(360deg); }
}

.hyg-feed {
  list-style: none; padding: 0; margin: 0;
  max-height: 320px; overflow-y: auto;
  font-family: ui-monospace, "SF Mono", monospace; font-size: 12px;
}
.hyg-feed li {
  padding: 6px 10px; border-bottom: 1px solid var(--border);
  color: var(--text-soft);
}
.hyg-feed li:last-child { border-bottom: none; }
.hyg-feed li.ok { color: var(--good-text); }
.hyg-feed li.err { color: #b91c1c; }
.hyg-feed:empty::before {
  content: 'Waiting for activity…';
  display: block; padding: 6px 10px;
  color: var(--text-faint); font-style: italic;
}

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

/* ── Hygiene additions: keys form, stage tabs, per-stage panels ───────── */
.hyg-grid-stage { grid-template-columns: repeat(4, 1fr); }
.hyg-toggle-row-inline {
  margin: 0; padding: 0; border: none; background: transparent;
}

.hyg-keys-card {
  background: #fff8e6;
  border-color: #f5d77a;
}
.hyg-keys-card .hyg-card-head {
  color: #8a5b00;
}
.hyg-keys-form {
  display: flex; flex-direction: column; gap: 10px; margin-top: 4px;
}
.hyg-key-row {
  display: flex; flex-direction: column; gap: 4px;
}
.hyg-key-lbl {
  font-size: 12px; font-weight: 600; color: var(--text);
  display: flex; gap: 8px; align-items: center;
}
.hyg-key-status {
  font-size: 11px; font-weight: 500; color: var(--text-faint);
  background: white; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--border);
}
.hyg-key-status.is-set { color: var(--good-text); border-color: var(--good-border); background: var(--good-soft); }
.hyg-keys-form input {
  height: 36px; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: 8px;
  font-size: 13px; font-family: ui-monospace, "SF Mono", monospace;
  background: white;
}
.hyg-keys-form input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }

.hyg-stages {
  display: flex; align-items: stretch; gap: 6px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.hyg-stage-tab {
  flex: 1; min-width: 200px;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  gap: 2px 12px; align-items: center;
  padding: 12px 14px; text-align: left;
  background: white; border: 1px solid var(--border);
  border-radius: 12px; cursor: pointer;
  font-family: inherit; color: var(--text);
  transition: border-color .12s, background .12s, transform .12s;
}
.hyg-stage-tab:hover { border-color: var(--brand-border); }
.hyg-stage-tab.is-active {
  border-color: var(--brand); background: var(--brand-soft);
}
.hyg-stage-num {
  grid-row: 1 / 3; align-self: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-soft); border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--text-soft);
}
.hyg-stage-tab.is-active .hyg-stage-num {
  background: var(--brand); border-color: var(--brand); color: white;
}
.hyg-stage-name {
  font-size: 14px; font-weight: 700; color: var(--text);
}
.hyg-stage-meta {
  font-size: 11px; color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.hyg-stage-arrow {
  align-self: center; font-size: 14px; color: var(--text-faint);
  flex-shrink: 0;
}

.hyg-stage-panels { margin-bottom: 14px; }
.hyg-stage-panel { display: none; }
.hyg-stage-panel.is-active { display: block; }

.hyg-card-head .hyg-cost {
  margin-left: 10px; font-size: 11px; font-weight: 500;
  color: var(--text-soft); text-transform: none; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.hyg-est-line {
  margin: 12px 0; font-size: 13px; color: var(--text-soft);
}
.hyg-est-line strong {
  color: var(--text); font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .hyg-grid-stage { grid-template-columns: repeat(2, 1fr); }
  .hyg-stages { flex-direction: column; }
  .hyg-stage-arrow { display: none; }
}

/* Reference product chip — three states (empty / open popover / pinned),
   matching the existing constraint-slot pattern. The popover overlays the
   page below the chip; pinned products render as small thumb chips inline
   in the constraints row. */
.constraint-slot-product { position: relative; }

.constraint-pinned-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.constraint-pinned-list[hidden] { display: none; }

.pinned-product-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: white;
  font-size: 12px;
}
.pinned-product-chip-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-soft);
  flex-shrink: 0;
}
.pinned-product-chip-title {
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.pinned-product-chip-remove {
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
}
.pinned-product-chip-remove:hover { color: var(--text); }

.product-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: min(820px, calc(100vw - 48px));
  height: min(680px, calc(100vh - 160px));
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}
.product-popover[hidden] { display: none; }

.product-popover-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}

.product-popover-stores {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.product-popover-store-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: white;
  font-size: 12px;
  cursor: pointer;
}
.product-popover-store-badge.is-active {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand) inset;
}
.product-popover-store-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}
.product-popover-store-dot.channel-etsy { background: #F1641E; }
.product-popover-store-dot.channel-shopify { background: #95BF47; }
.product-popover-store-dot.channel-everbee { background: #5B47E0; }
.product-popover-store-dot.channel-amazon { background: #FF9900; }

.product-popover-connect { position: relative; }
.product-connect-btn {
  background: white;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.product-connect-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
  z-index: 5;
  min-width: 140px;
  overflow: hidden;
}
.product-connect-menu[hidden] { display: none; }
.product-connect-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.product-connect-menu-item:hover { background: var(--bg-soft); }

.product-popover-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.product-sort-label {
  font-size: 12px;
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.product-sort-label select {
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  background: white;
}
.product-popover-hint { font-size: 12px; color: var(--text-faint); }

.product-popover-grid {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 12px;
}

.product-card {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: white;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.12s, box-shadow 0.12s;
}
.product-card:hover {
  border-color: var(--brand);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.product-card.is-pinned {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand) inset;
}
.product-card-thumb {
  position: relative;
  width: 100%;
  height: 160px;
  background: var(--bg-soft);
  overflow: hidden;
  flex-shrink: 0;
}
.product-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-card-perf {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.72);
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
}
.product-card-body {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.product-card-title {
  font-size: 12px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card-meta {
  font-size: 11px;
  color: var(--text-faint);
}

.product-popover-foot {
  display: flex;
  justify-content: flex-end;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}
.product-popover-close {
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}

/* Floating hover preview — anchored next to product cards, pinned chips,
   and reference chips so the operator can see a full-size thumbnail
   without clicking. pointer-events:none keeps it from intercepting hover. */
.hover-image-preview {
  position: fixed;
  z-index: 9999;
  width: 320px;
  height: 320px;
  border-radius: 12px;
  overflow: hidden;
  background: #f5f5f5;
  border: 1px solid var(--border-strong);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  animation: hoverPreviewFade 0.12s ease-out;
}
.hover-image-preview[hidden] { display: none; }
.hover-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #f5f5f5;
}
@keyframes hoverPreviewFade {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════
   Stores + Brand Kit pages (/stores, /stores/<id>)
   ─ List view, detail view, kit sections (identity / logos / palette / imagery)
   ─ Shared visual language: warm neutrals, soft cards, generous whitespace.
   ═══════════════════════════════════════════════════════════════════════ */

.page {
  max-width: 980px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}
.page-back {
  display: inline-block;
  font-size: 13px;
  color: var(--text-soft);
  margin-bottom: 18px;
}
.page-back:hover { color: var(--text); }
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.page-title {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.page-sub {
  margin: 0;
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.5;
  max-width: 60ch;
}

/* ── Store grid (list page) ────────────────────────────────────────── */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.store-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.store-card:hover {
  border-color: var(--brand-border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
  transform: translateY(-1px);
}
.store-card-art {
  height: 140px;
  background: linear-gradient(135deg, #faf5ff 0%, #f4f4f5 100%);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--border);
}
.store-card-art img {
  max-width: 80%; max-height: 80%;
  object-fit: contain;
}
.store-card-glyph {
  font-size: 56px;
  color: var(--brand);
  opacity: 0.6;
}
.store-card-body {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.store-card-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.store-card-name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.store-card-desc {
  margin: 0;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.store-card-foot {
  margin-top: auto;
  padding-top: 12px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--border);
}
.store-card-swatches { display: flex; gap: 4px; }
.store-card-swatch {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.08);
}
.store-card-foot-faint, .store-card-foot-meta {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 500;
}

/* Channel pill — color-coded subtly per channel for at-a-glance grouping. */
.channel-badge {
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text-soft);
  flex-shrink: 0;
}
.channel-oposhop   { background: #fff1e5; color: #c2410c; }
.channel-etsy      { background: #fff3eb; color: #b15a16; }
.channel-shopify   { background: #ecfdf5; color: var(--good-text); }
.channel-tiktok    { background: #f4f4f5; color: #161823; }
.channel-fb        { background: #eff6ff; color: #1d4ed8; }
.channel-pinterest { background: #fef2f2; color: #b91c1c; }
.channel-amazon    { background: #fff7ed; color: #b45309; }
.channel-other     { background: var(--bg-soft); color: var(--text-soft); }

/* ── Empty state ─────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 80px 24px 60px;
  background: var(--bg-card);
  border: 1px dashed var(--border-strong);
  border-radius: 20px;
}
.empty-icon {
  font-size: 48px;
  color: var(--brand);
  opacity: 0.5;
  margin-bottom: 12px;
}
.empty-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
}
.empty-sub {
  margin: 0 auto 20px;
  font-size: 14px;
  color: var(--text-soft);
  max-width: 50ch;
  line-height: 1.55;
}

/* ── Store detail header ─────────────────────────────────────────────── */
.store-head { align-items: center; }
.store-head-art {
  width: 72px; height: 72px;
  border-radius: 16px;
  background: linear-gradient(135deg, #faf5ff 0%, #f4f4f5 100%);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -0.02em;
}
.store-head-art img { max-width: 80%; max-height: 80%; object-fit: contain; }
.store-head-text { flex: 1; min-width: 0; }
.store-head-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Tabs ────────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}
.tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.tab:hover:not([disabled]) { color: var(--text); }
.tab.on {
  color: var(--text);
  border-bottom-color: var(--brand);
  font-weight: 600;
}
.tab[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ── Kit sections ────────────────────────────────────────────────────── */
.kit-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 18px;
  overflow: hidden;
}
.kit-section-head {
  padding: 18px 22px 4px;
}
.kit-section-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.kit-section-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-faint);
}
.kit-section-body {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Form primitives ─────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-soft); font-weight: 500; }
.field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 700; }
.field-hint { text-transform: none; letter-spacing: 0; color: var(--text-faint); font-weight: 400; margin-left: 4px; }
.field input[type="text"], .field input[type="url"], .field input[type="email"],
.field select, .field textarea {
  height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  background: white;
  color: var(--text);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.field textarea { height: auto; padding: 12px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--text);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.12s;
}
.btn-primary:hover { background: #000; }
.btn-secondary {
  background: white;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}
.btn-secondary:hover { background: var(--bg-soft); }
.btn-ghost {
  background: transparent;
  color: var(--text-soft);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  align-self: flex-start;
}
.btn-ghost:hover { color: var(--text); background: var(--bg-soft); }
.btn-danger-ghost {
  background: transparent;
  color: var(--bad);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}
.btn-danger-ghost:hover { background: #fef2f2; }
.kit-save { margin-top: 4px; }

.form-status { font-size: 12px; color: var(--text-soft); min-height: 16px; }
.form-status.ok { color: var(--good-text); font-weight: 600; }
.form-status.err { color: var(--bad); font-weight: 600; }

/* ── Modal (new store) ───────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 15, 20, 0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 24px;
}
.modal-backdrop[hidden] { display: none; }
.modal-card {
  background: var(--bg-card);
  border-radius: 18px;
  width: 100%; max-width: 480px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.modal-close {
  background: transparent; border: none;
  font-size: 18px; color: var(--text-faint);
  cursor: pointer; line-height: 1;
}
.modal-close:hover { color: var(--text); }
.modal-body {
  padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.modal-foot {
  display: flex; gap: 8px; justify-content: flex-end;
  padding-top: 8px; margin-top: 4px;
}

/* ── Logo grid ───────────────────────────────────────────────────────── */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.logo-slot { display: flex; flex-direction: column; gap: 6px; }
.logo-slot-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.logo-slot-zone {
  position: relative;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  background: var(--bg-soft);
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.logo-slot-zone:hover, .logo-slot-zone.is-dragover {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.logo-slot-zone[data-empty] .logo-slot-thumb { display: none; }
.logo-slot-zone:not([data-empty]) {
  border-style: solid;
  background: white;
}
.logo-slot-zone:not([data-empty]) .logo-slot-cta {
  position: absolute;
  bottom: 8px;
  left: 8px; right: 8px;
  text-align: center;
  background: rgba(255,255,255,0.92);
  border-radius: 6px;
  padding: 4px;
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.12s;
}
.logo-slot-zone:not([data-empty]):hover .logo-slot-cta {
  opacity: 1;
}
.logo-slot-thumb {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.logo-slot-thumb img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.logo-slot-cta {
  font-size: 12px;
  color: var(--text-soft);
}
.logo-slot-remove {
  background: transparent;
  border: none;
  color: var(--text-faint);
  font-size: 11px;
  cursor: pointer;
  align-self: flex-start;
  padding: 0;
}
.logo-slot-remove:hover { color: var(--bad); }

/* ── Palette ─────────────────────────────────────────────────────────── */
.palette-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.palette-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.palette-color {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  cursor: pointer;
  flex-shrink: 0;
}
.palette-color input[type="color"] {
  position: absolute; inset: 0;
  opacity: 0;
  cursor: pointer;
  border: none;
  background: none;
}
.palette-meta {
  flex: 1;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.palette-hex, .palette-name {
  height: 28px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 0 8px;
  font-size: 12px;
  font-family: inherit;
  background: white;
  outline: none;
  width: 100%;
}
.palette-hex { font-family: ui-monospace, "SF Mono", Menlo, monospace; text-transform: lowercase; }
.palette-hex:focus, .palette-name:focus { border-color: var(--brand); }
.palette-remove {
  background: transparent; border: none;
  color: var(--text-faint);
  font-size: 16px;
  cursor: pointer;
  width: 24px; height: 24px;
  border-radius: 6px;
  flex-shrink: 0;
}
.palette-remove:hover { color: var(--bad); background: var(--bg-soft); }
.palette-add { margin-top: 4px; }
.palette-actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.palette-actions .btn-ghost[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ── Imagery grid ────────────────────────────────────────────────────── */
.imagery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.imagery-grid:empty { display: none; }
.imagery-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-soft);
}
.imagery-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.imagery-remove {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(15,15,20,0.7);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.imagery-remove:hover { background: var(--bad); }
.imagery-drop {
  margin-top: 4px;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  padding: 22px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.imagery-drop:hover, .imagery-drop.is-dragover {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.imagery-drop.is-full { opacity: 0.5; pointer-events: none; }
.imagery-drop-label { font-size: 13px; font-weight: 600; color: var(--text); }
.imagery-drop-sub { font-size: 12px; color: var(--text-faint); }

/* ── Preset peek (ⓘ next to the prompt-preset chip) ──────────────── */
/* Retired: the standalone ⓘ "preview prompts" button was folded into the
   chip itself so clicking the chip opens the rich preset picker. Kept the
   class for any legacy page that still renders it. */
.preset-peek-btn {
  width: 22px; height: 22px;
  margin-left: 4px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--text-faint);
  font-size: 13px; line-height: 1;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.preset-peek-btn:hover {
  background: var(--bg-soft);
  color: var(--brand);
  border-color: var(--border-strong);
}

/* Button-style chip — same chip chrome, but click opens a custom popover
   (preset-peek) instead of a native <select>. Caret apes the .compose-
   chip-select::after look so the affordance is consistent across the
   chip row. */
.compose-chip-button {
  appearance: none;
  font-family: inherit;
  /* Matches .compose-chip-select padding-right so the caret has the same
     breathing room as a native-dropdown chip. */
  padding-right: 14px;
}
.compose-chip-caret {
  font-size: 9px;
  color: var(--text-faint);
  margin-left: 2px;
  transition: transform 120ms ease;
}
.compose-chip-button[aria-expanded="true"] .compose-chip-caret {
  transform: rotate(180deg);
  color: var(--brand);
}
.preset-peek {
  position: absolute;
  z-index: 200;
  width: 380px;
  max-height: 70vh;
  overflow: hidden;
  display: none;
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.02),
    0 16px 40px -12px rgba(15, 23, 42, 0.18),
    0 4px 12px -4px rgba(15, 23, 42, 0.08);
  transform-origin: top left;
  animation: preset-peek-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes preset-peek-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .preset-peek { animation: none; }
}
.preset-peek.is-visible { display: flex; flex-direction: column; }
.preset-peek-head {
  padding: 10px 14px;
  font-size: 10.5px; font-weight: 700;
  color: var(--text-soft);
  text-transform: uppercase; letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.preset-peek-list {
  overflow-y: auto;
  padding: 6px 6px;
}
/* Each row is a 3-column grid: check · meta (name + 2-line desc) · info.
   The description gets to wrap to two lines so the prompt's intent is
   actually legible without hovering. */
.preset-peek-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  align-items: start;
  width: calc(100% - 0px);
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
  font-family: inherit;
}
.preset-peek-row + .preset-peek-row { margin-top: 1px; }
.preset-peek-row:hover {
  background: var(--bg-soft);
}
.preset-peek-row.is-active {
  background: var(--brand-soft);
}
.preset-peek-row.is-active .preset-peek-row-name { color: var(--brand-deep); }
.preset-peek-check {
  flex-shrink: 0;
  font-size: 12px; font-weight: 700;
  color: var(--good-text);
  margin-top: 2px;
  text-align: center;
}
.preset-peek-row.is-active .preset-peek-check { color: var(--brand); }
.preset-peek-row-meta {
  min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.preset-peek-row-name {
  font-size: 13px; font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.preset-peek-row-desc {
  font-size: 11.5px;
  color: var(--text-soft);
  line-height: 1.4;
  /* Two-line clamp — keeps row heights bounded but lets the intent show */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The per-row ⓘ is the affordance for "show me the full system + user
   prompt." Sized as a real hover target (20×20) so it isn't fiddly to
   land on, kept muted by default so the description text underneath
   remains the primary read. Lights up on hover for a clear "this thing
   does something" signal. */
.preset-peek-row-info {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--text-faint);
  font-size: 13px;
  line-height: 1;
  align-self: start;
  margin-top: 1px;
  background: transparent;
  border: 1px solid transparent;
  cursor: help;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.preset-peek-row-info:hover {
  color: var(--brand);
  background: var(--brand-soft);
  border-color: var(--brand-border);
}

/* Inline ⓘ inside the header — visual cue that lines up with the per-row
   icons so "hover ⓘ" reads as a concrete instruction, not abstract jargon. */
.preset-peek-head-icon {
  display: inline-block;
  font-size: 11px;
  color: var(--brand);
  margin: 0 2px;
  vertical-align: 1px;
  text-transform: none;
  letter-spacing: 0;
}
.preset-peek-add {
  border-top: 1px dashed var(--border);
  margin-top: 6px;
  padding-top: 12px;
}
.preset-peek-add .preset-peek-row-name { color: var(--brand-deep); }
.preset-peek-add .preset-peek-check { color: var(--brand); }

/* ── Tags & metadata collapsible inside the design modal ──────────── */
.meta-block {
  margin-top: 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.meta-summary {
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  padding: 12px 14px;
  font-size: 13px;
  user-select: none;
}
.meta-summary::-webkit-details-marker { display: none; }
.meta-label { font-weight: 600; color: var(--text); flex-shrink: 0; }
.meta-summary-preview {
  flex: 1; min-width: 0;
  color: var(--text-soft);
  font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.meta-toggle { color: var(--text-faint); font-size: 11px; flex-shrink: 0; }
.meta-block[open] .meta-toggle { display: none; }
.meta-block[open] .meta-summary-preview { display: none; }
.meta-body {
  padding: 4px 14px 14px;
  background: white;
  border-top: 1px solid var(--border);
}
.meta-block .tag-block { margin-top: 12px; }
.meta-block .tag-block:first-child { margin-top: 8px; }

/* ── EverBee market-data panel inside the design modal ─────────────── */
.everbee-block {
  margin-top: 18px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.everbee-summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  padding: 12px 14px;
  font-size: 13px;
  user-select: none;
}
.everbee-summary::-webkit-details-marker { display: none; }
.everbee-label { font-weight: 600; color: var(--text); }
.everbee-toggle { color: var(--text-faint); font-size: 11px; }
.everbee-block[open] .everbee-toggle { display: none; }
.everbee-body { padding: 4px 14px 14px; }
.everbee-skeleton { padding: 18px 0; color: var(--text-faint); font-size: 13px; }
.everbee-error {
  padding: 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  color: #b45309;
  font-size: 12px;
}
.everbee-detail { color: var(--text-soft); }

.everbee-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  margin: 4px 0 14px;
}
.everbee-stat {
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.everbee-stat-hero {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--good-soft) 0%, white 100%);
  border-color: var(--good-border);
}
.everbee-stat-num {
  font-size: 22px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.everbee-stat-hero .everbee-stat-num { font-size: 28px; color: var(--good-text); }
.everbee-stat-label {
  font-size: 10px; color: var(--text-soft); margin-top: 4px;
  line-height: 1.4; text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 600;
}
.everbee-stat-label span { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-faint); }

.everbee-section-head {
  margin: 14px 0 8px;
  font-size: 11px; font-weight: 600; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: 0.05em;
}

.everbee-keywords { display: flex; flex-direction: column; gap: 6px; }
.everbee-kw {
  background: white; border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 10px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px;
}
.everbee-kw-name { font-weight: 500; }
.everbee-kw-stats {
  display: flex; gap: 10px; color: var(--text-soft);
  font-variant-numeric: tabular-nums; font-size: 11px;
}
.everbee-kw-comp { color: var(--text-faint); }

.everbee-listings { display: flex; flex-direction: column; gap: 6px; }
.everbee-listing {
  display: flex; gap: 10px; align-items: center;
  background: white; border: 1px solid var(--border);
  border-radius: 8px; padding: 8px;
  text-decoration: none; color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.everbee-listing:hover { border-color: var(--brand-border); transform: translateY(-1px); }
.everbee-listing img,
.everbee-listing-noimg {
  width: 48px; height: 48px; border-radius: 6px;
  object-fit: cover; background: var(--bg-soft);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--text-faint);
}
.everbee-listing-meta { flex: 1; min-width: 0; }
.everbee-listing-title {
  font-size: 12px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.everbee-listing-stats {
  display: flex; gap: 10px; margin-top: 3px;
  font-size: 11px; color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.everbee-listing-stats strong { color: var(--good-text); }
.everbee-listing-shop { color: var(--text-faint); }

.everbee-empty { color: var(--text-faint); font-size: 12px; padding: 8px 0; }

.everbee-foot {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 11px; color: var(--text-faint);
  display: flex; justify-content: space-between; align-items: center;
}
.everbee-refresh {
  background: transparent; border: 1px solid var(--border-strong);
  color: var(--text-soft); border-radius: 999px;
  padding: 2px 10px; font-size: 11px; cursor: pointer;
}
.everbee-refresh:hover { background: white; color: var(--text); }

/* ── Misc ────────────────────────────────────────────────────────────── */
.error-text { color: var(--bad); padding: 12px; background: #fef2f2; border-radius: 8px; }

/* ── Template dialog (Save-as-template + recolor flow) ─────────────────── */
.template-dialog-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 15, 20, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  padding: 24px;
}
.template-dialog {
  background: var(--bg-card);
  border-radius: 18px;
  width: 100%; max-width: 520px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.template-dialog-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.template-dialog-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.template-dialog-body {
  padding: 18px 22px;
  display: flex; flex-direction: column; gap: 14px;
  max-height: 60vh;
  overflow-y: auto;
}
.template-dialog-hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.5;
}
.template-dialog-empty {
  padding: 18px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  text-align: center;
  font-size: 13px;
  color: var(--text-soft);
}
.template-dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
}

/* Recolor swatch grid — multi-select with checkbox state */
.recolor-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.recolor-swatch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.recolor-swatch:hover {
  border-color: var(--brand-border);
}
.recolor-swatch:has(input:checked) {
  background: var(--brand-soft);
  border-color: var(--brand);
}
.recolor-swatch input[type="checkbox"] {
  accent-color: var(--brand);
  cursor: pointer;
}
.recolor-swatch-color {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  flex-shrink: 0;
}
.recolor-swatch-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.recolor-swatch-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recolor-swatch-hex {
  font-size: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--text-faint);
}

/* Secondary modal CTA — for "Save as template" sitting below the primary
   ✨ Make more like this. Same shape, neutral fill so the primary action
   stays the primary. */
.modal-cta-secondary {
  background: white;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.modal-cta-secondary:hover {
  background: var(--bg-soft);
  border-color: var(--brand-border);
}

/* ── Mockup template cards (store detail page) ─────────────────────────── */
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

/* Workspace-wide templates page (/templates). Same card shape as the
   per-store templates section, but wrapped in a page-level grid + an
   empty/error state styled to match the rest of the app. */
.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.templates-loading,
.templates-error {
  grid-column: 1 / -1;
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-soft);
  background: var(--bg-soft);
  border-radius: 12px;
}
.templates-error { color: var(--bad); background: #fef2f2; }
.templates-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 32px;
  background: var(--bg-card);
  border: 1px dashed var(--border-strong);
  border-radius: 20px;
}
.templates-empty-icon {
  font-size: 56px;
  color: var(--brand);
  opacity: 0.55;
  margin-bottom: 10px;
}
.templates-empty-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
}
.templates-empty-sub {
  margin: 0 auto;
  max-width: 52ch;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.55;
}
.template-card-store {
  margin: 0;
  font-size: 11px;
  color: var(--text-faint);
}
.template-card-store a {
  color: var(--text-soft);
  font-weight: 500;
  text-decoration: none;
}
.template-card-store a:hover {
  color: var(--text);
  text-decoration: underline;
}
.template-card-store-faint { color: var(--text-faint); }
.template-card {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.template-card:hover {
  border-color: var(--brand-border);
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}
.template-card-thumb {
  aspect-ratio: 1 / 1;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.template-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.template-card-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.template-card-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.template-card-target {
  margin: 0;
  font-size: 11px;
  color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.template-card-actions {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.template-card-recolor {
  padding: 6px 12px;
  font-size: 12px;
  flex: 1;
  align-self: stretch;
}
.template-empty {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-soft);
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  line-height: 1.5;
}
.template-empty strong { color: var(--text); }

/* ── Download dialog (modal) ───────────────────────────────────────────── */
.download-dialog {
  background: var(--bg-card);
  border-radius: 18px;
  width: 100%; max-width: 720px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.download-dialog-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  padding: 22px 24px;
  align-items: start;
}
@media (max-width: 720px) {
  .download-dialog-body { grid-template-columns: 1fr; }
  .download-preview { max-width: 240px; margin: 0 auto; }
}
.download-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.download-preview img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  background-image: linear-gradient(45deg, #e5e5e5 25%, transparent 25%),
                    linear-gradient(-45deg, #e5e5e5 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #e5e5e5 75%),
                    linear-gradient(-45deg, transparent 75%, #e5e5e5 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.download-preview-meta {
  font-size: 11px;
  color: var(--text-faint);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.download-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.download-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.download-field-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 700;
}
.download-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.download-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 12px;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  transition: background 0.12s, border-color 0.12s;
  min-width: 100px;
  text-align: left;
}
.download-pill:hover {
  background: var(--bg-soft);
  border-color: var(--brand-border);
}
.download-pill.is-on {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-deep);
}
.download-pill-name {
  font-size: 13px;
  font-weight: 600;
}
.download-pill-hint {
  font-size: 10px;
  color: var(--text-faint);
  font-weight: 500;
}
.download-pill.is-on .download-pill-hint { color: var(--brand-deep); opacity: 0.7; }
.download-note {
  margin: 0;
  padding: 10px 12px;
  background: var(--bg-soft);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.5;
}
.download-note strong { color: var(--text); }
.download-pill-row.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}


/* ── Modal: edit-mode image area + magical processing overlay ─────────── */
.modal-image-edit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* checker preserved from .modal-image; just override background-color
     so transparent designs show the checker through the image clearly. */
  overflow: hidden;
}
.modal-image-edit .modal-img-now {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.modal-image-edit .modal-img-now.is-fading {
  opacity: 0;
  transform: scale(0.985);
}

/* Processing overlay: shimmer + dim + spinner. Hidden by default; the
   .is-processing class on the parent edit area triggers it. */
.modal-img-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-image-edit.is-processing .modal-img-overlay {
  opacity: 1;
}
/* Dim wash so the image reads as "in progress". */
.modal-img-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(0.5px);
  -webkit-backdrop-filter: blur(0.5px);
}
/* Animated shimmer band — diagonal sweep across the image area. */
.modal-img-overlay-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 35%,
    rgba(99, 102, 241, 0.18) 50%,
    transparent 65%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-position: 100% 0;
  animation: modal-shimmer 1.4s linear infinite;
}
@keyframes modal-shimmer {
  from { background-position: 120% 0; }
  to   { background-position: -20% 0; }
}
.modal-img-overlay-text {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(17, 17, 17, 0.86);
  color: white;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.modal-img-overlay-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  animation: modal-overlay-spin 0.7s linear infinite;
}
@keyframes modal-overlay-spin {
  to { transform: rotate(360deg); }
}
/* Brief flash on completion: green glow ring on success, red on fail. */
.modal-img-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  border-radius: inherit;
}
.modal-image-edit.flash-ok .modal-img-flash {
  background: radial-gradient(
    closest-side,
    rgba(16, 185, 129, 0.0),
    rgba(16, 185, 129, 0.0) 60%,
    rgba(16, 185, 129, 0.18) 100%
  );
  box-shadow: inset 0 0 0 3px rgba(16, 185, 129, 0.55);
  animation: modal-flash 0.85s ease-out;
}
.modal-image-edit.flash-fail .modal-img-flash {
  background: radial-gradient(
    closest-side,
    rgba(239, 68, 68, 0.0),
    rgba(239, 68, 68, 0.0) 60%,
    rgba(239, 68, 68, 0.18) 100%
  );
  box-shadow: inset 0 0 0 3px rgba(239, 68, 68, 0.55);
  animation: modal-flash 0.85s ease-out;
}
@keyframes modal-flash {
  0%   { opacity: 0; transform: scale(1.04); }
  20%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* Hygiene controls in the modal-meta column */
.modal-hyg {
  margin-top: 18px;
  padding: 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  position: relative;
}
.modal-hyg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  margin-bottom: 10px;
}
.modal-hyg-undo {
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 3px 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  letter-spacing: 0;
  text-transform: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.modal-hyg-undo:hover:not(:disabled) {
  background: var(--bg-soft);
  border-color: var(--text-soft);
}
.modal-hyg-undo:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.modal-hyg-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.modal-hyg-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s;
}
.modal-hyg-btn:hover:not(:disabled) {
  background: var(--brand-soft);
  border-color: var(--brand-border);
}
.modal-hyg-btn:active:not(:disabled) {
  transform: scale(0.98);
}
.modal-hyg-btn:disabled {
  cursor: not-allowed;
}
.modal-hyg-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-soft);
}
.modal-hyg-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.modal-hyg-status:empty {
  display: none;
}
.modal-hyg-btn.is-pending {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-deep);
}
.modal-hyg-btn.is-pending .modal-hyg-num {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
  position: relative;
}
.modal-hyg-btn.is-pending .modal-hyg-num::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--brand-border);
  border-top-color: var(--brand);
  animation: modal-hyg-spin 0.8s linear infinite;
}
.modal-hyg-btn.is-done {
  background: var(--good-soft);
  border-color: var(--good-border);
}
.modal-hyg-btn.is-done .modal-hyg-num {
  background: var(--good);
  color: white;
  border-color: var(--good);
}
.modal-hyg-btn.is-fail {
  background: #fef2f2;
  border-color: #fecaca;
}
.modal-hyg-btn.is-fail .modal-hyg-num {
  background: #b91c1c;
  color: white;
  border-color: #b91c1c;
}
@keyframes modal-hyg-spin {
  to { transform: rotate(360deg); }
}
.modal-hyg-hint {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-soft);
  line-height: 1.5;
}
.modal-hyg-toast {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translate(-50%, -100%);
  background: rgba(17, 17, 17, 0.92);
  color: white;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 10;
  animation: modal-hyg-toast-in 0.18s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
@keyframes modal-hyg-toast-in {
  from { opacity: 0; transform: translate(-50%, calc(-100% - 4px)); }
  to   { opacity: 1; transform: translate(-50%, -100%); }
}

/* On narrow viewports stack the before/after vertically. */
@media (max-width: 720px) {
  .modal-image-split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .modal-img-pane[data-pane="orig"] { border-right: none; border-bottom: 1px solid var(--border); }
}

/* "Hold to compare" — peek at the preserved original */
.modal-img-compare {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 5px 11px 5px 9px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  z-index: 4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
  touch-action: none;
}
.modal-img-compare:hover {
  background: white;
  border-color: var(--brand-border);
}
.modal-img-compare:active,
.modal-image-edit.is-comparing .modal-img-compare {
  cursor: grabbing;
  background: var(--brand);
  border-color: var(--brand);
  color: white;
  transform: scale(0.97);
}
.modal-img-compare-icon {
  font-size: 12px;
  line-height: 1;
}
/* When comparing, show a small "ORIGINAL" badge over the image so the
   operator knows which version they're looking at. */
.modal-image-edit.is-comparing::after {
  content: "ORIGINAL";
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(17, 17, 17, 0.82);
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 4;
  pointer-events: none;
  animation: modal-orig-badge-in 0.16s ease;
}
@keyframes modal-orig-badge-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Inline recolor picker (overlays the edit-thread modal) ────────────── */
.edit-recolor-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 15, 20, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  z-index: 300;
}
.edit-recolor-dialog {
  width: 100%; max-width: 560px;
  background: var(--bg-card);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  overflow: hidden;
}
.edit-recolor-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.edit-recolor-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.edit-recolor-body {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
.edit-recolor-body .small-text {
  margin: 0;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.5;
}
.edit-recolor-empty p { margin: 0 0 8px; }
.edit-recolor-store-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-soft);
  padding: 8px 10px;
  background: var(--bg-soft);
  border-radius: 8px;
}
.edit-recolor-store-pick select {
  flex: 1;
  height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0 8px;
  font-size: 12px;
  font-family: inherit;
  background: white;
}
.edit-recolor-store-static strong { color: var(--text); }
.edit-recolor-store-none {
  color: var(--text-faint);
  font-style: italic;
}
.edit-recolor-store-none a {
  color: var(--brand);
  text-decoration: none;
}
.edit-recolor-store-none a:hover { text-decoration: underline; }
.edit-recolor-body .field input[type="text"] {
  height: 38px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.edit-recolor-body .field input[type="text"]:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.edit-recolor-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
}

/* Custom color row inside the recolor picker — small "new" pill on the
   swatch + an inline X to remove. Visually distinct from saved colors so
   the user can see at a glance what they just added vs. what's persistent. */
.recolor-swatch-new { position: relative; }
.recolor-swatch-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--brand);
  color: white;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: 1px;
}
.recolor-swatch-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(15,15,20,0.5);
  color: white;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s;
}
.recolor-swatch-new:hover .recolor-swatch-remove { opacity: 1; }
.recolor-swatch-remove:hover { background: var(--bad); }
.recolor-swatch-empty {
  grid-column: 1 / -1;
  padding: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
  background: var(--bg-soft);
  border-radius: 8px;
}

/* Inline add-color row — color picker + name + add button. The color
   input is hidden behind a square colored swatch so it's clickable but
   not styled-by-OS-defaults. */
.edit-recolor-add {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}
.edit-recolor-add-color {
  position: relative;
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  cursor: pointer;
  overflow: hidden;
}
.edit-recolor-add-swatch {
  position: absolute; inset: 0;
  display: block;
}
.edit-recolor-add-color input[type="color"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none; padding: 0; background: none;
}
#rc-add-name {
  flex: 1;
  height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
#rc-add-name:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.edit-recolor-add-btn {
  height: 36px;
  padding: 0 14px;
  background: white;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.edit-recolor-add-btn:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-deep);
}

/* "Save N new colors to {store}" toggle — sits below the swatch grid +
   add row, only appears when the user has added at least one. */
.edit-recolor-save-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  font-size: 12px;
  color: var(--brand-deep);
  margin-top: 6px;
  cursor: pointer;
}
.edit-recolor-save-toggle input[type="checkbox"] {
  accent-color: var(--brand);
  flex-shrink: 0;
}
.edit-recolor-save-toggle strong { font-weight: 600; }

/* ── Inspire tab ───────────────────────────────────────────────────────── */
.insp-panel {
  padding: 22px 24px 80px;
  background: var(--bg);
  min-height: calc(100vh - 120px);
}
.insp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.insp-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}
.insp-sub {
  font-size: 13px;
  color: var(--text-soft);
  margin: 0;
  max-width: 720px;
  line-height: 1.5;
}
.insp-refresh {
  background: var(--text);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 0 18px;
  height: 38px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}
.insp-refresh:hover { background: #000; }

.insp-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.insp-chip {
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.insp-chip:hover { background: var(--bg-soft); }
.insp-chip.is-active {
  background: var(--text);
  border-color: var(--text);
  color: white;
}

.insp-notes {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.insp-note {
  background: #fff8e6;
  border: 1px solid #f5d77a;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: #8a5b00;
}

.insp-loading,
.insp-empty {
  padding: 36px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-soft);
  font-style: italic;
  background: var(--bg-soft);
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
}

.insp-feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 12px;
}
.insp-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.insp-card:hover {
  border-color: var(--brand-border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
.insp-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.insp-card-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--insp-color, var(--text-soft));
}
.insp-card-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}
.insp-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.35;
}
.insp-card-reason {
  font-size: 13px;
  color: var(--text-soft);
  margin: 0;
  line-height: 1.5;
}
.insp-angle {
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--brand-deep);
  line-height: 1.5;
}
.insp-angle-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  margin-right: 6px;
}
.insp-seeds {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.insp-seed {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  color: var(--text-soft);
  font-family: ui-monospace, "SF Mono", monospace;
}
.insp-card-config {
  font-size: 11px;
  color: var(--text-faint);
  padding-top: 8px;
  border-top: 1px solid var(--border);
  line-height: 1.6;
  font-family: ui-monospace, "SF Mono", monospace;
}
.insp-card-config strong {
  color: var(--text);
  font-weight: 600;
}
.insp-card-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 2px;
}
.insp-btn {
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.insp-btn:hover:not(:disabled) {
  background: var(--bg-soft);
  border-color: var(--text-soft);
}
.insp-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.insp-btn-primary {
  background: var(--text);
  border-color: var(--text);
  color: white;
}
.insp-btn-primary:hover:not(:disabled) { background: #000; }
.insp-btn-dismiss {
  color: var(--text-faint);
}
.insp-btn-dismiss:hover { color: var(--bad); }

@media (max-width: 760px) {
  .insp-feed { grid-template-columns: 1fr; }
}

/* ── Templates page (Krea/ElevenLabs-style explore + detail modal) ───── */
/* Templates lives at /templates with its own page shell, but reuses the
   side-nav and slim header from the rest of the app. Layout: page header
   with title + actions, tabs, search/category toolbar, grid of cards.
   Clicking a card opens a focused two-pane detail modal: left form,
   right output preview. */

.tpl-page {
  padding: 40px 56px 80px;
  max-width: 1280px;
  margin: 0 auto;
  margin-left: var(--side-nav-w, 240px);
}
.tpl-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.tpl-page-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tpl-page-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}
.tpl-page-beta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff1e4 0%, #ffe6f1 100%);
  color: #b14a1b;
  border: 1px solid #f3d6c2;
}
.tpl-page-lede {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.55;
  max-width: 64ch;
}
.tpl-new-btn {
  background: var(--text);
  color: white;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, opacity 0.12s;
}
.tpl-new-btn:hover:not(:disabled) { background: #000; }
.tpl-new-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.tpl-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.tpl-tab {
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
  padding: 10px 0 12px;
  margin-bottom: -1px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s;
}
.tpl-tab:hover { color: var(--text); }
.tpl-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--text);
}

.tpl-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.tpl-search {
  position: relative;
  width: 100%;
}
.tpl-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  font-size: 16px;
}
.tpl-search input {
  width: 100%;
  height: 44px;
  padding: 0 16px 0 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: white;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.tpl-search input:focus {
  border-color: var(--brand-border);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.tpl-cat-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tpl-cat-chip {
  background: white;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tpl-cat-chip:hover { border-color: var(--text-soft); color: var(--text); }
.tpl-cat-chip.is-active {
  background: var(--text);
  border-color: var(--text);
  color: white;
}

.tpl-section-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 16px 0 12px;
}
.tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.tpl-empty {
  padding: 60px 0;
  text-align: center;
  color: var(--text-soft);
  font-size: 14px;
}

.tpl-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.tpl-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.18);
  border-color: var(--text-soft);
}
.tpl-card-thumb {
  aspect-ratio: 4 / 3;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tpl-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tpl-card-placeholder {
  color: var(--text-faint);
}
.tpl-card-meta {
  padding: 14px 16px 18px;
}
.tpl-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.tpl-card-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.tpl-card-cat {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text-soft);
  white-space: nowrap;
}
.tpl-card-desc {
  margin: 0;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.4;
}

/* ── Templates detail modal ──────────────────────────────────────────── */

.tpl-modal-back {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 20, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.tpl-modal {
  width: min(1100px, 100%);
  max-height: calc(100vh - 48px);
  background: white;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}
.tpl-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.04);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  z-index: 2;
  transition: background 0.12s;
}
.tpl-modal-close:hover { background: rgba(0, 0, 0, 0.1); }

.tpl-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}
.tpl-modal-form {
  padding: 28px 28px 24px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tpl-modal-form-head { display: flex; flex-direction: column; gap: 4px; }
.tpl-modal-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}
.tpl-modal-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--text-soft);
}

.tpl-field { display: flex; flex-direction: column; gap: 6px; }
.tpl-field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.tpl-field-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--bg-soft);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 600;
}
.tpl-field-help {
  font-size: 12px;
  color: var(--text-soft);
}

/* ── Source picker (Upload / Library / Products) ──────────────────
   Replaces the bare dropzone. Same visual rhythm: dashed-bordered
   default panel, swap to grids when picking from library/products. */
.tpl-source { display: flex; flex-direction: column; gap: 10px; }

.tpl-source-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 4px;
}
.tpl-source-tab {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  padding: 6px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.tpl-source-tab.is-active {
  background: white;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.tpl-source-tab:disabled { opacity: 0.4; cursor: not-allowed; }

.tpl-source-panel { display: flex; flex-direction: column; gap: 8px; }
.tpl-source-panel[hidden] { display: none; }

.tpl-source-selected {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--brand-border, var(--border-strong));
  background: var(--brand-soft, var(--bg-soft));
  border-radius: 12px;
}
.tpl-source-selected[hidden] { display: none; }
.tpl-source-selected img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg-soft);
  flex-shrink: 0;
}
.tpl-source-selected-meta { flex: 1; min-width: 0; }
.tpl-source-selected-kind {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-faint);
}
.tpl-source-selected-title {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tpl-source-selected-clear {
  background: none;
  border: none;
  color: var(--text-soft);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.tpl-source-selected-clear:hover { background: rgba(0,0,0,0.05); color: var(--text); }

.tpl-source-search {
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-size: 13px;
  outline: none;
}
.tpl-source-search:focus { border-color: var(--brand); }

.tpl-source-stores {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tpl-source-store-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: white;
  font-size: 12px;
  cursor: pointer;
}
.tpl-source-store-tab.is-active {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand) inset;
}
.tpl-source-store-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tpl-source-store-dot.channel-etsy { background: #F1641E; }
.tpl-source-store-dot.channel-shopify { background: #95BF47; }
.tpl-source-store-dot.channel-everbee { background: #5B47E0; }
.tpl-source-store-dot.channel-amazon { background: #FF9900; }

.tpl-source-sort {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-soft);
}
.tpl-source-sort select {
  margin-left: 4px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  background: white;
}

.tpl-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}
.tpl-source-hint {
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
  padding: 16px 8px;
  grid-column: 1 / -1;
}

.tpl-source-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
  text-align: left;
}
.tpl-source-card:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.tpl-source-card img {
  width: 100%;
  height: 110px;
  /* Belt-and-suspenders: aspect-ratio alone collapses to 0×0 when the
     image lazy-loads before the parent grid cell's 1fr width has been
     resolved, which leaves the card as a thin title-only line. A fixed
     height locks the slot regardless of layout timing; object-fit: cover
     keeps the artwork looking right at any aspect ratio. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--bg-soft);
  display: block;
}
.tpl-source-card-title {
  font-size: 11px;
  line-height: 1.3;
  padding: 6px 8px 0;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tpl-source-card-perf {
  font-size: 10px;
  color: var(--text-faint);
  padding: 2px 8px 6px;
}

.tpl-dropzone {
  display: block;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  background: white;
  cursor: pointer;
  padding: 24px 16px;
  transition: background 0.12s, border-color 0.12s;
  text-align: center;
}
.tpl-dropzone:hover { background: var(--bg-soft); border-color: var(--text-soft); }
.tpl-dropzone.is-drag {
  background: var(--brand-soft);
  border-color: var(--brand-border);
}
.tpl-dropzone-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
}
/* Author CSS (display:flex / inline-block) overrides the [hidden]
   attribute's display:none, so both states render at once. Force
   hidden back to display:none for the dropzone state elements. */
.tpl-dropzone-empty[hidden],
.tpl-dropzone-preview[hidden] {
  display: none !important;
}
.tpl-dropzone-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--text-soft);
}
.tpl-dropzone-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.tpl-dropzone-preview {
  position: relative;
  display: inline-block;
}
.tpl-dropzone-preview img {
  max-width: 100%;
  max-height: 180px;
  border-radius: 8px;
  display: block;
}
.tpl-dropzone-clear {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.tpl-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: white;
  outline: none;
  resize: vertical;
  min-height: 72px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.tpl-textarea:focus {
  border-color: var(--brand-border);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.tpl-use-example {
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-soft);
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  color: var(--text-soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background 0.12s;
}
.tpl-use-example:hover { background: var(--brand-soft); color: var(--brand-deep); }
.tpl-use-example-text {
  color: var(--text);
  font-size: 12px;
}

.tpl-generate-btn {
  background: var(--text);
  color: white;
  border: 0;
  border-radius: 12px;
  padding: 14px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.12s, opacity 0.12s;
}
.tpl-generate-btn:hover:not(:disabled) { background: #000; }
.tpl-generate-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tpl-generate-btn.is-running { opacity: 0.85; cursor: progress; }
.tpl-generate-foot {
  margin: 0;
  font-size: 12px;
  color: var(--text-soft);
  text-align: center;
  min-height: 16px;
}

.tpl-modal-output {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.tpl-modal-output-tabs {
  padding: 16px 24px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 18px;
}
.tpl-modal-output-tab {
  font-size: 13px;
  font-weight: 500;
  padding-bottom: 10px;
  border-bottom: 2px solid transparent;
}
.tpl-modal-output-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--text);
}
.tpl-modal-output-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
}
.tpl-output-empty {
  /* Plain block flow — flex column above was forcing every inline
     child onto its own row, breaking "Upload an image and hit
     Generate to see the result here." across three lines. */
  text-align: center;
  color: var(--text-soft);
  font-size: 13px;
  max-width: 320px;
  line-height: 1.5;
}
.tpl-output-loading,
.tpl-output-error {
  text-align: center;
  color: var(--text-soft);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.tpl-output-spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--text);
  animation: tplSpin 0.8s linear infinite;
}
@keyframes tplSpin {
  to { transform: rotate(360deg); }
}
.tpl-output-error-title {
  font-weight: 600;
  color: var(--bad);
}
.tpl-output-error-msg {
  max-width: 320px;
  font-size: 12px;
}
.tpl-output-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.tpl-output-result img {
  max-width: 100%;
  max-height: 460px;
  border-radius: 10px;
  box-shadow: 0 10px 28px -16px rgba(0, 0, 0, 0.25);
}
.tpl-output-actions {
  display: flex;
  gap: 10px;
}
.tpl-output-action {
  background: var(--text);
  color: white;
  text-decoration: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.12s;
}
.tpl-output-action:hover { background: #000; }
.tpl-output-action-quiet {
  background: white;
  color: var(--text);
  border: 1px solid var(--border);
}
.tpl-output-action-quiet:hover {
  background: var(--bg-soft);
  border-color: var(--text-soft);
}

@media (max-width: 920px) {
  .tpl-modal-grid { grid-template-columns: 1fr; }
  .tpl-modal-form { border-right: 0; border-bottom: 1px solid var(--border); }
  .tpl-page { padding: 24px; margin-left: 0; }
}

/* ── Templates page polish ──────────────────────────────────────────── */

/* Category-grouped section blocks. Used when "All" is the active filter
   so the page reads as Mockups / Product Shots rows rather than one
   undifferentiated grid. */
.tpl-section {
  margin-bottom: 32px;
}
.tpl-section-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.tpl-grid-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.tpl-grid-row-promo {
  margin-top: 8px;
}

/* Card thumbnail gets a subtle category-tag overlay in the corner —
   matches the Krea reference where the category pill sits over the
   image bottom-right, not beside the title. Frees up the meta row for
   a cleaner title + description. */
.tpl-card { position: relative; }
.tpl-card-thumb { position: relative; }
.tpl-card-cat-overlay {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  letter-spacing: 0;
}
/* Hide the old in-row category badge (single source of truth now). */
.tpl-card-cat { display: none; }
.tpl-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tpl-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

/* "Create your own template" promo card — neutral dashed surface that
   reads as an action affordance, not a content card. */
.tpl-promo-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-radius: 14px;
  background: var(--bg-soft);
  border: 1px dashed var(--border-strong);
  color: var(--text);
  cursor: not-allowed;
  opacity: 0.85;
  grid-column: 1 / -1;
  min-height: 80px;
}
.tpl-promo-card-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tpl-promo-card-title {
  font-weight: 600;
  font-size: 14px;
}
.tpl-promo-card-sub {
  font-size: 13px;
  color: var(--text-soft);
}
.tpl-promo-card-cta {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--text);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════════════
   Curated Home page (/) — greeting, resume card, stores rail, recent
   designs rail, quick-actions grid. Visual mission: feel personal +
   curated, not "tool that's idling waiting for input". The actual
   compose UI moved to /create.
   ═══════════════════════════════════════════════════════════════════════ */
.home-page { max-width: 1100px; }

/* Hero — two-column: text on the left, painterly CSS-only art on the
   right. Reads as a brand moment, not "loading state". */
.home-hero {
  display: grid;
  /* Narrower text column + wider right column so the CTA card has
     real estate to spread the headline on one line instead of three. */
  grid-template-columns: 1fr 1.15fr;
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px 28px;
  background: linear-gradient(140deg, #fff6ed 0%, #f7eef9 60%, #ecedf8 100%);
  border: 1px solid var(--border);
  border-radius: 20px;
}
@media (max-width: 860px) {
  .home-hero { grid-template-columns: 1fr; padding: 18px; gap: 16px; }
}
.home-hero-text { display: flex; flex-direction: column; gap: 6px; }
.home-hero-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.home-hero-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.home-hero-sub {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--text-soft);
  max-width: 48ch;
  line-height: 1.5;
}
.home-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.home-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--text);
  color: white;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s, transform 0.08s;
}
.home-hero-cta:hover { background: #000; transform: translateY(-1px); }
.home-hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  background: white;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
}
.home-hero-cta-secondary:hover {
  background: var(--bg-soft);
  border-color: var(--brand-border);
}

/* CSS-only painterly hero art — three blurred radial blobs floating
   inside a rounded frame, with the brand mark centered. No image asset. */
.home-hero-art {
  position: relative;
  height: 200px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #f4d4a8 0%, #e9b07d 35%, #c89a8d 70%, #8c8ec0 100%);
}
.home-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.45;
  pointer-events: none;
}
.home-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(34px);
  opacity: 0.55;
  animation: homeHeroDrift 16s ease-in-out infinite alternate;
}
.home-hero-blob-a { width: 200px; height: 200px; background: #f5b271; top: -60px; left: -40px; }
.home-hero-blob-b { width: 180px; height: 180px; background: #d68d7e; top: 50px; right: -40px; animation-delay: -5s; }
.home-hero-blob-c { width: 160px; height: 160px; background: #9aa0c9; bottom: -70px; left: 35%; animation-delay: -10s; }
@keyframes homeHeroDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(18px, -8px) scale(1.06); }
}
.home-hero-mark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 56px;
  color: rgba(255,255,255,0.92);
  font-weight: 700;
  text-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Sections shared shell. */
.home-section { margin-bottom: 32px; }
.home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.home-section-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.home-section-link {
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 600;
  text-decoration: none;
}
.home-section-link:hover { color: var(--text); }

/* Resume card — full-width card that surfaces the most recent edit
   thread so the user can pick up exactly where they left off. */
.home-resume-card {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 18px;
  align-items: center;
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.home-resume-card:hover {
  border-color: var(--brand-border);
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}
.home-resume-thumb {
  width: 96px; height: 96px;
  background: var(--bg-soft);
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.home-resume-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.home-resume-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-resume-eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
}
.home-resume-title {
  margin: 2px 0;
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-resume-sub {
  margin: 0;
  font-size: 12px;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-resume-cta {
  align-self: center;
  padding: 9px 16px;
  background: var(--text);
  color: white;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.home-resume-cta:hover { background: #000; }

/* Stores rail — horizontal cards. The first store + an "add" card at
   the end. Scrolls horizontally on narrow viewports. */
.home-stores-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.home-stores-empty,
.home-recent-empty {
  font-size: 13px;
  color: var(--text-soft);
  padding: 18px 22px;
  background: var(--bg-soft);
  border-radius: 12px;
}
.home-stores-empty-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  background: var(--brand-soft);
  border: 1px dashed var(--brand-border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--text);
  min-width: 260px;
}
.home-stores-empty-icon {
  font-size: 24px;
  color: var(--brand);
}
.home-stores-empty-title { font-size: 14px; font-weight: 600; }
.home-stores-empty-sub { font-size: 12px; color: var(--text-soft); line-height: 1.5; }

.home-store-card {
  flex: 0 0 220px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.08s;
}
.home-store-card:hover {
  border-color: var(--brand-border);
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
  transform: translateY(-1px);
}
.home-store-card-art {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, #faf5ff 0%, #f4f4f5 100%);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.home-store-card-art img { max-width: 80%; max-height: 80%; object-fit: contain; }
.home-store-card-mark {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand);
}
.home-store-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.home-store-card-name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-store-card-channel {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 600;
}
.home-store-card-palette {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}
.home-store-card-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.08);
}
.home-store-card-empty { font-size: 10px; color: var(--text-faint); }
.home-store-card-add {
  flex: 0 0 140px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-style: dashed;
  color: var(--text-soft);
}
.home-store-card-add-icon { font-size: 22px; color: var(--brand); }
.home-store-card-add-label { font-size: 12px; font-weight: 600; }

/* Recent designs rail — horizontal strip of thumbnails. The last tile
   is a "browse all" affordance showing the library count. */
.home-recent-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.home-recent-tile {
  flex: 0 0 140px;
  height: 140px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  display: block;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.home-recent-tile:hover {
  transform: translateY(-2px);
  border-color: var(--brand-border);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.home-recent-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.home-recent-tile-more {
  background: var(--brand-soft);
  border: 1px dashed var(--brand-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--brand-deep);
  gap: 4px;
}
.home-recent-tile-more-num {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.home-recent-tile-more-label {
  font-size: 11px;
  font-weight: 600;
}

/* Quick actions — 4-up responsive grid of "next-step" cards. */
.home-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.home-action-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  text-align: left;
  padding: 18px 20px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.08s;
}
.home-action-card:hover {
  border-color: var(--brand-border);
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  transform: translateY(-1px);
}
.home-action-icon {
  width: 34px; height: 34px;
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 2px;
}
.home-action-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.home-action-sub {
  margin: 0;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.5;
}

/* ── Connections page (phase 1) ──────────────────────────────────────────── */
.conn-category { margin-block: 32px; }
.conn-category:first-of-type { margin-top: 8px; }
.conn-category-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: var(--text-soft);
  margin: 0 0 12px;
  font-weight: 600;
}
.conn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.conn-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.conn-card:hover {
  border-color: var(--brand-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transform: translateY(-1px);
}
.conn-card-head { display: flex; justify-content: space-between; align-items: center; }
.conn-card-logo {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-weight: 700;
  font-size: 14px;
}
.conn-card-state {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #c6c6c6;
}
.conn-card-state.ok  { background: var(--good); }
.conn-card-state.err { background: var(--bad); }
.conn-card-state.off { background: #c6c6c6; }
.conn-card-name   { font-weight: 600; font-size: 14px; }
.conn-card-handle { font-size: 12px; color: var(--text-soft); }

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.catalog-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.catalog-tile:hover:not(.is-disabled) {
  border-color: var(--brand);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.08);
}
.catalog-tile.is-disabled { opacity: 0.55; cursor: not-allowed; }

/* Brand Kit tile — warm amber treatment, matches the "core organ" nodes
   in the connections graph. Reads as inherent-to-the-workspace rather
   than an external integration. */
.catalog-tile.is-brand {
  background: linear-gradient(160deg, #fff7ee 0%, #fde7d0 100%);
  border-color: #f0c896;
}
.catalog-tile.is-brand:hover {
  border-color: #e8a663;
  box-shadow: 0 6px 18px rgba(244, 160, 90, 0.22);
}
.catalog-tile.is-brand .catalog-tile-logo {
  background: linear-gradient(135deg, #f5b271, #d99858);
  color: #fff;
  font-size: 18px;
}

.catalog-tile-logo {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 13px;
}
.catalog-tile-label { font-weight: 600; font-size: 13px; }
.catalog-tile-desc  { font-size: 11px; color: var(--text-soft); line-height: 1.4; }
.badge {
  align-self: flex-end;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.badge.available { background: var(--brand-soft); color: var(--brand-deep); }
.badge.soon      { background: var(--bg-soft); color: var(--text-soft); }

.modal-card-wide { max-width: 720px; width: 90vw; }

.migration-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text);
}
.migration-banner button {
  background: none; border: 0; cursor: pointer;
  font-size: 16px; color: var(--text-soft);
  padding: 4px 8px;
}
.migration-banner button:hover { color: var(--text); }

.back-link {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-soft);
}
.back-link:hover { color: var(--text); }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-block: 16px;
}
.card h3 {
  margin: 0 0 12px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
}
.card.danger { border-color: rgba(239, 68, 68, 0.25); }
.card.danger h3 { color: var(--bad); }
.btn-danger {
  background: var(--bad);
  border-color: var(--bad);
}
.btn-danger:hover { background: #dc2626; }

.kv {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 16px;
  margin: 0;
}
.kv dt {
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 500;
}
.kv dd { margin: 0; font-size: 13px; }

/* ── Video tile + template modal ───────────────────────────────────── */
/* Video tiles render <video> the same way image tiles render <img>:
   constrained to the tile box, object-fit contain so the design's
   composition isn't cropped. Mute/play-on-hover is wired in JS. */
.tile video {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 4px;
  display: block;
  background: white;
}
.tile-video-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: white;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 4px;
  pointer-events: none;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* Save-to-brand-kit overlay. Floats over the design modal to pick a
   store + slot. Quiet white card, soft radio rows. */
.brand-save-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 1100;
}
.brand-save-card {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 26px 26px 22px;
  width: 460px; max-width: calc(100vw - 32px);
  position: relative;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
.brand-save-card h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.brand-save-sub { margin: 0 0 16px; font-size: 13px; color: var(--text-soft); }
.brand-save-empty { margin: 0 0 4px; font-size: 13px; color: var(--text-soft); line-height: 1.55; }
.brand-save-empty a { color: var(--text); font-weight: 600; }
.brand-save-close {
  position: absolute; top: 12px; right: 12px;
  background: transparent; border: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  color: var(--text-soft); cursor: pointer;
  font-size: 14px;
}
.brand-save-close:hover { background: var(--bg-soft); color: var(--text); }
.brand-save-field { margin-bottom: 16px; }
.brand-save-label {
  display: block;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.brand-save-select {
  appearance: none;
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px; font-family: inherit; color: var(--text);
}
.brand-save-select:focus {
  outline: none; background: var(--bg-card); border-color: var(--text);
}
.brand-save-slots { display: flex; flex-direction: column; gap: 6px; }
.brand-save-slot {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-soft);
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.brand-save-slot:hover { border-color: var(--border-strong); }
.brand-save-slot input[type="radio"] { margin-top: 2px; accent-color: var(--text); }
.brand-save-slot:has(input:checked) {
  background: var(--bg-card);
  border-color: var(--text);
}
.brand-save-slot-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.brand-save-slot-label { font-size: 13px; font-weight: 600; color: var(--text); }
.brand-save-slot-hint  { font-size: 11px; color: var(--text-soft); line-height: 1.4; }

/* "Save to all" — warm amber treatment to read as the recommended path */
.brand-save-slot.is-all {
  background: linear-gradient(160deg, #fff7ee 0%, #fde7d0 100%);
  border-color: #f0c896;
  margin-bottom: 6px;
  padding-bottom: 12px;
  padding-top: 12px;
}
.brand-save-slot.is-all:hover {
  border-color: #e8a663;
  box-shadow: 0 4px 12px rgba(244, 160, 90, 0.18);
}
.brand-save-slot.is-all:has(input:checked) {
  border-color: #c8924d;
  background: linear-gradient(160deg, #fff3e2 0%, #fad9b8 100%);
}
.brand-save-slot.is-all .brand-save-slot-label { font-size: 14px; }
.brand-save-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.brand-save-cancel {
  appearance: none;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px; font-weight: 500; font-family: inherit;
  color: var(--text); cursor: pointer;
}
.brand-save-cancel:hover { background: var(--bg-soft); }
.brand-save-go {
  appearance: none;
  background: var(--text); color: white;
  border: 0;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer;
}
.brand-save-go:hover:not(:disabled) { background: #000; }
.brand-save-go:disabled { opacity: 0.6; cursor: not-allowed; }
/* When the primary action is an <a> instead of a <button> (e.g. "Create
   your brand kit →" navigates rather than submits), keep the same chip
   visual but suppress link decoration and inherit white text. */
.brand-save-go-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand-save-go-link:hover { background: #000; color: white; }
.brand-save-status {
  margin: 10px 0 0;
  font-size: 12px; color: var(--text-soft); min-height: 16px;
}
.brand-save-status.ok  { color: var(--good-text); }
.brand-save-status.err { color: #b91c1c; }

/* Private-design lock badge on tiles. Top-left so it doesn't fight with
   the bottom-right duration badge or the right-edge action buttons. */
.tile-visibility-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 50%;
  pointer-events: none;
  backdrop-filter: blur(4px);
  z-index: 2;
}
/* Text-pill variant — marks designs from the shared public library when
   browsing the mixed "All" view, so they're distinct from this
   workspace's own creations. */
.tile-visibility-badge.is-public {
  width: auto;
  height: auto;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.66);
}
.tile-video {
  /* Position next to ✨ / ✎ / ⎘ — image tiles get this fourth action.
     Same chip styling, just a different glyph. */
}

/* Video template modal — Kittl-style: hero header, provider switcher,
   3-up template grid. Big tap targets, generous whitespace, no chrome. */
.video-tpl-modal {
  width: 720px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}
.video-tpl-head {
  padding: 22px 28px 12px;
  border-bottom: 1px solid var(--border);
}
.video-tpl-head h3 {
  margin: 0 0 6px;
  font-size: 20px;
}
.video-tpl-sub {
  margin: 0;
  color: var(--muted, #6b6b6b);
  font-size: 14px;
  line-height: 1.5;
}
.video-tpl-body {
  padding: 16px 28px 24px;
}
.video-tpl-loading,
.video-tpl-error {
  padding: 32px 0;
  text-align: center;
  color: var(--muted, #6b6b6b);
}
.video-tpl-error {
  color: #b00020;
}
.video-tpl-provider-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 0 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.video-tpl-provider-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #6b6b6b);
  margin-right: 4px;
}
.video-tpl-provider-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  text-align: left;
}
.video-tpl-provider-btn:hover:not(:disabled) {
  border-color: #111;
}
.video-tpl-provider-btn.is-active {
  border-color: #111;
  background: #111;
  color: white;
}
.video-tpl-provider-btn.is-active .video-tpl-provider-cost {
  color: rgba(255,255,255,0.7);
}
.video-tpl-provider-btn.is-unconfigured {
  opacity: 0.5;
  cursor: not-allowed;
}
.video-tpl-provider-name {
  font-size: 13px;
  font-weight: 600;
}
.video-tpl-provider-cost {
  font-size: 11px;
  color: var(--muted, #6b6b6b);
  margin-top: 2px;
}

.video-tpl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 600px) {
  .video-tpl-grid { grid-template-columns: 1fr; }
}
.video-tpl-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.video-tpl-card:hover {
  transform: translateY(-2px);
  border-color: #111;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
.video-tpl-card-preview {
  aspect-ratio: 9 / 16;
  background: #fafafa;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-tpl-card-preview img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}
.video-tpl-card-body {
  padding: 12px 14px 14px;
}
.video-tpl-card-name {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
}
.video-tpl-card-blurb {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted, #6b6b6b);
}
.video-tpl-card-meta {
  margin: 0;
  font-size: 11px;
  color: var(--muted, #6b6b6b);
  font-variant-numeric: tabular-nums;
}

/* Progress state — replaces the grid once the job fires. Spinner +
   message + reminder that closing the modal doesn't kill the job. */
.video-tpl-progress {
  padding: 40px 16px;
  text-align: center;
}
.video-tpl-progress-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: #111;
  border-radius: 50%;
  margin: 0 auto 18px;
  animation: video-tpl-spin 0.9s linear infinite;
}
@keyframes video-tpl-spin {
  to { transform: rotate(360deg); }
}
.video-tpl-progress-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
}
.video-tpl-progress-sub {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--muted, #6b6b6b);
}
.video-tpl-progress-bg {
  margin: 0;
  font-size: 12px;
  color: var(--muted, #6b6b6b);
  font-style: italic;
}

/* ─── Notifications (top-right bell + inbox + toast stack) ─────────────
   Bell sits fixed in the top-right corner; the panel anchors directly
   underneath it. The toast stack rises out from above the bell so a fresh
   notification visibly emerges from the icon. Loaded on every page via
   /notifications.js.
*/
.ntf-host {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 1000;
  pointer-events: none;
}
.ntf-host > * { pointer-events: auto; }

/* Inline variant: the bell lives inside the existing slim top header
   (#header-meta) next to Plans + Settings. Drop the fixed positioning
   and let flexbox lay it out alongside its siblings; the panel + toast
   stack still anchor to the bell via the host's relative coords. */
.ntf-host-inline {
  position: relative;
  top: auto;
  right: auto;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  pointer-events: auto;
}
.ntf-host-inline .ntf-bell { width: 30px; height: 30px; }
.ntf-host-inline .ntf-bell svg { width: 16px; height: 16px; }
.ntf-host-inline .ntf-panel { top: 40px; }
.ntf-host-inline .ntf-toast-stack { top: 46px; }

/* Class-based hide. The HTML [hidden] attribute is unreliable here
   because .ntf-panel and .ntf-badge both use display: flex, which
   overrides the user-agent [hidden] rule. */
.ntf-panel.is-closed { display: none !important; }
.ntf-badge.is-hidden { display: none !important; }

.ntf-bell {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: white;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.ntf-bell:hover {
  background: var(--brand-soft);
  border-color: var(--brand-border);
}
.ntf-bell:active { transform: scale(0.94); }
.ntf-bell.has-unread { color: var(--brand); }

.ntf-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--bad);
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  letter-spacing: -0.02em;
}

.ntf-panel {
  position: absolute;
  top: 46px;
  right: 0;
  width: 360px;
  max-height: 70vh;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ntf-panel-in 0.14s ease-out;
}
@keyframes ntf-panel-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ntf-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.ntf-panel-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.ntf-mark-all {
  background: none;
  border: none;
  color: var(--brand);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.12s;
}
.ntf-mark-all:hover { background: var(--brand-soft); }

.ntf-panel-body {
  overflow-y: auto;
  flex: 1;
}
.ntf-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}

.ntf-item {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px 14px 12px 18px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.ntf-item:last-child { border-bottom: none; }
.ntf-item:hover { background: var(--bg-soft); }
.ntf-item-stripe {
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--border-strong);
}
.ntf-item.is-info .ntf-item-stripe { background: var(--text-faint); }
.ntf-item.is-success .ntf-item-stripe { background: var(--good); }
.ntf-item.is-error .ntf-item-stripe { background: var(--bad); }
.ntf-item.is-critical .ntf-item-stripe { background: #b91c1c; }
.ntf-item.is-critical { background: #fff5f5; }

.ntf-item-body {
  flex: 1;
  min-width: 0;
}
.ntf-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.ntf-item.is-unread .ntf-item-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  margin-right: 6px;
  vertical-align: middle;
  transform: translateY(-1px);
}
.ntf-item-text {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.4;
  word-break: break-word;
  margin-bottom: 4px;
}
.ntf-item-time {
  font-size: 11px;
  color: var(--text-faint);
}
.ntf-item-x {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  align-self: flex-start;
  border-radius: 4px;
  transition: background 0.12s, color 0.12s;
}
.ntf-item-x:hover {
  background: var(--bg-soft);
  color: var(--text);
}

.ntf-toast-stack {
  position: absolute;
  top: 54px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  pointer-events: none;
}
.ntf-toast {
  position: relative;
  width: 320px;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  padding: 10px 32px 10px 16px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.22s ease-out, transform 0.22s ease-out;
  pointer-events: auto;
  cursor: pointer;
}
.ntf-toast.is-in { opacity: 1; transform: translateX(0); }
.ntf-toast.is-out { opacity: 0; transform: translateX(20px); }
.ntf-toast-stripe {
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--text-faint);
}
.ntf-toast.is-info .ntf-toast-stripe { background: var(--text-faint); }
.ntf-toast.is-success .ntf-toast-stripe { background: var(--good); }
.ntf-toast.is-error .ntf-toast-stripe { background: var(--bad); }
.ntf-toast.is-critical .ntf-toast-stripe { background: #b91c1c; }
.ntf-toast.is-critical { background: #fff5f5; }
.ntf-toast-body { padding-left: 6px; }
.ntf-toast-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.ntf-toast-text {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.4;
  word-break: break-word;
}
.ntf-toast-x {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background 0.12s, color 0.12s;
}
.ntf-toast-x:hover {
  background: var(--bg-soft);
  color: var(--text);
}

@media (max-width: 600px) {
  .ntf-panel { width: calc(100vw - 32px); max-width: 360px; }
  .ntf-toast { width: calc(100vw - 32px); max-width: 320px; }
}


/* ── Workspace settings: Danger zone ─────────────────────────────────────── */
.ws-danger-zone { border-color: rgba(239, 68, 68, 0.25); }
.ws-danger-zone h3 { color: var(--bad); }
.ws-danger-blurb {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.5;
}
.ws-delete-btn {
  background: var(--bad);
  border-color: var(--bad);
  color: white;
}
.ws-delete-btn:hover:not(:disabled) { background: #dc2626; }
.ws-delete-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Workspace switch smoothness ─────────────────────────────────────────
   Two pieces:
   1. Optimistic feedback while the switch request is in flight — the
      page dims and the cursor becomes "progress" so the click feels
      instant.
   2. @view-transition lets Chromium browsers cross-fade between the old
      and new document automatically when location.replace() navigates
      to the same URL post-switch. Falls back gracefully to a normal
      reload on browsers without support. */
html.ws-switching { cursor: progress; }
html.ws-switching body {
  opacity: 0.55;
  transition: opacity 120ms ease-out;
  pointer-events: none;
}

@view-transition {
  navigation: auto;
}

/* Fine-tune the default cross-fade: a touch faster than the 250ms default
   so the swap feels snappy rather than draggy. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: ease-out;
}

/* Add subtle "active" emphasis on the dropdown row so the optimistic
   checkmark move is visible during the switch. */
.auth-ws-item.is-active {
  background: var(--brand-soft);
  color: var(--brand-deep);
}

/* ─── Connections constellation ─────────────────────────────────────────
   A glowing core orb surrounded by orbiting integration cards. Connected
   cards have bright curved arcs to the core; available cards have soft
   lines; coming-soon cards sit dim. Inspired by the EverBee Brain layout. */
.conn-page {
  padding: 24px 32px 64px;
  max-width: 1200px;
  margin: 0 auto;
}
.conn-page-head {
  text-align: center;
  margin: 8px 0 24px;
}
.conn-page-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.conn-page-lede {
  margin: 6px auto 0;
  max-width: 560px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
}

/* ─── /create overrides on the conn-page chassis ─────────────────────────
   /create reuses the editorial cream surface (.conn-page) so it reads as
   a sibling of /connections, but it's a TOOL page — the compose card IS
   the reason for the page existing. Three deviations from the editorial
   default:

   1. Hero is left-aligned, not centered. Centered headings float free of
      the action below; left-aligned anchors the H1 on the same vertical
      axis as the compose card's left edge, so the user's eye lands on a
      single column ("what should we generate?" → typing area).

   2. Top padding is tightened. The editorial pages give the H1 lots of
      breathing room because they're meant to be read top-down. /create
      is meant to be ACTED on; pushing the textarea below the fold
      because of decorative whitespace fails the "above-fold rule."

   3. The compose region (which lives as a sibling of <main>, not inside
      it) inherits the same max-width + horizontal centering as the
      .conn-page container so the H1 and the compose card share a column.
      Without this, the H1 was capped at 1200px while the compose card
      ran full width — two different visual systems on one screen. */
.create-page {
  padding-top: 16px;
  padding-bottom: 32px;
}
.create-page .conn-page-head {
  text-align: left;
  margin: 0;
}
/* body:has() catches the compose-region + library grid that sit as
   siblings of <main.create-page>. Constrains them to the same 1200px
   container so the page reads as one column instead of three competing
   widths (hero · compose · library). */
body:has(.create-page) .compose-region,
body:has(.create-page) .grid-wrap,
body:has(.create-page) .mode-tabs {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}
body:has(.create-page) .compose-region {
  padding-top: 0;
  padding-bottom: 16px;
  /* Kill the default grey (var(--bg) = #fafafa) fill — on the editorial
     cream surface it read as a funky off-color band behind the compose
     card. Let the cream page show through instead. */
  background: transparent;
}

.conn-board {
  position: relative;
  width: 100%;
  /* 4:3-ish aspect locks the geometry across viewport widths so the
     orbit positions read the same on every screen. */
  aspect-ratio: 4 / 3;
  max-height: 720px;
  margin-top: 12px;
  /* Subtle radial halo behind the whole thing — gives the board a sense
     of depth without making it feel like a chart. */
  background:
    radial-gradient(ellipse at center,
      color-mix(in srgb, var(--brand) 9%, transparent) 0%,
      transparent 55%),
    radial-gradient(ellipse at center,
      color-mix(in srgb, var(--brand) 4%, transparent) 0%,
      transparent 80%);
  border-radius: 24px;
  overflow: visible;
}

/* Lines live in an SVG with a 100×100 viewBox stretched to the board's
   bounding rect. preserveAspectRatio: none makes percent coords match. */
.conn-board-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.conn-board-line {
  fill: none;
  stroke: color-mix(in srgb, var(--text-faint) 35%, transparent);
  stroke-width: 1.4;
  stroke-linecap: round;
  transition: stroke 0.2s, stroke-width 0.2s, opacity 0.2s;
}
.conn-board-line.is-available { opacity: 0.45; }
.conn-board-line.is-soon { opacity: 0.18; stroke-dasharray: 2 3; }
.conn-board-line.is-connected {
  stroke: var(--brand);
  stroke-width: 2.4;
  opacity: 1;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--brand) 55%, transparent));
}
.conn-board-line.is-hot {
  stroke: var(--brand);
  stroke-width: 2.6;
  opacity: 1;
}

/* Core orb — the workspace identity. Pulses gently to feel alive. */
.conn-board-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
  pointer-events: none;
  text-align: center;
}
.conn-board-core-orb {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%,
      color-mix(in srgb, white 60%, var(--brand)) 0%,
      var(--brand) 38%,
      color-mix(in srgb, var(--brand) 65%, #1a103a) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent),
    0 0 32px color-mix(in srgb, var(--brand) 55%, transparent),
    0 0 80px color-mix(in srgb, var(--brand) 35%, transparent),
    inset 0 0 24px color-mix(in srgb, white 28%, transparent);
  animation: conn-core-pulse 4.5s ease-in-out infinite;
}
@keyframes conn-core-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent),
      0 0 32px color-mix(in srgb, var(--brand) 55%, transparent),
      0 0 80px color-mix(in srgb, var(--brand) 35%, transparent),
      inset 0 0 24px color-mix(in srgb, white 28%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 6px color-mix(in srgb, var(--brand) 28%, transparent),
      0 0 48px color-mix(in srgb, var(--brand) 70%, transparent),
      0 0 110px color-mix(in srgb, var(--brand) 50%, transparent),
      inset 0 0 30px color-mix(in srgb, white 36%, transparent);
  }
}
.conn-board-core-label {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}
.conn-board-core-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Orbit cards — absolutely positioned via inline left/top percentages.
   Each card translates itself to be centered on its anchor point. */
.conn-board-orbits {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.conn-orbit {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 14px 12px;
  width: 116px;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 17, 26, 0.05);
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  pointer-events: auto;
  z-index: 2;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s, background 0.18s;
}
.conn-orbit:hover,
.conn-orbit.is-hot {
  transform: translate(-50%, calc(-50% - 3px));
  border-color: color-mix(in srgb, var(--brand) 35%, var(--border-strong));
  box-shadow: 0 12px 28px rgba(99, 102, 241, 0.15);
}
.conn-orbit:disabled {
  cursor: not-allowed;
}
.conn-orbit-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  color: var(--text-soft);
  transition: background 0.18s, color 0.18s;
}
.conn-orbit-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Connected: brand-tinted icon chip, soft halo, green status dot. */
.conn-orbit.is-connected {
  border-color: color-mix(in srgb, var(--brand) 30%, var(--border-strong));
  box-shadow:
    0 6px 18px rgba(99, 102, 241, 0.12),
    0 0 0 4px color-mix(in srgb, var(--brand) 8%, transparent);
}
.conn-orbit.is-connected .conn-orbit-icon {
  background: var(--brand-soft);
  color: var(--brand);
}
.conn-orbit-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 3px white, 0 0 8px color-mix(in srgb, var(--good) 60%, transparent);
}

.conn-orbit.is-available .conn-orbit-icon {
  background: var(--bg-soft);
  color: var(--text);
}

/* Coming-soon: muted, no cursor pointer, "soon" tag. */
.conn-orbit.is-soon {
  opacity: 0.55;
  cursor: not-allowed;
}
.conn-orbit.is-soon .conn-orbit-icon {
  background: var(--bg-soft);
  color: var(--text-faint);
}
.conn-orbit-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--bg-soft);
  padding: 2px 6px;
  border-radius: 999px;
}

.conn-board-hint {
  margin: 16px auto 0;
  max-width: 540px;
  text-align: center;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 13px;
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--border);
}
.conn-board-hint.is-ok {
  background: var(--good-soft);
  border-color: var(--good-border);
  color: var(--good-text);
}
.conn-board-hint.is-err {
  background: #fff1f0;
  border-color: #f3b8b3;
  color: #c4322a;
}

/* Narrow viewports: stack cards in a grid as a graceful fallback. The
   constellation needs room to breathe; on phone width it can't. */
@media (max-width: 760px) {
  .conn-board {
    aspect-ratio: auto;
    height: auto;
    background: none;
    border-radius: 0;
  }
  .conn-board-lines { display: none; }
  .conn-board-core { position: static; transform: none; margin: 16px auto 24px; }
  .conn-board-orbits {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }
  .conn-orbit {
    position: static;
    transform: none;
    width: auto;
  }
  .conn-orbit:hover,
  .conn-orbit.is-hot {
    transform: translateY(-2px);
  }
}

/* ── Brand kits page — workspace-default editor ───────────────────────── */
.brand-kits-page { padding: 28px 32px 48px; }
.brand-kits-page .page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.brand-kits-page .page-title { margin: 0 0 4px; font-size: 24px; }
.brand-kits-page .page-sub { margin: 0; color: var(--muted, #6b6b6b); font-size: 14px; max-width: 640px; }

.bk-page-status {
  font-size: 13px;
  color: var(--muted, #6b6b6b);
  min-height: 20px;
}
.bk-page-status.saving { color: #6b6b6b; }
.bk-page-status.saved { color: #1f7a3a; }
.bk-page-status.err { color: #b00020; }

.bk-loading {
  padding: 40px 0;
  text-align: center;
  color: var(--muted, #6b6b6b);
}

/* Workspace card — single editable panel */
.bk-workspace-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: white;
  padding: 22px 24px;
  margin-bottom: 32px;
}
.bk-workspace-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.bk-workspace-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #6b6b6b);
  font-weight: 600;
}
.bk-workspace-name { margin: 4px 0 0; font-size: 18px; }

/* ─── Claimed-state header ─────────────────────────────────────────────
   Renders once the kit carries real signal. Pulls the workspace identity
   forward with a palette ring around the initial and a chip-strip of
   what we know. The URL re-analyze affordance moves to a small secondary
   button so the page reads as "this is your brand" instead of "give me
   another URL." */
.bk-workspace-card.is-claimed {
  background: linear-gradient(180deg, #fffaf4 0%, #fff 100%);
  border-color: #f0c896;
}
.bk-workspace-head.is-claimed {
  align-items: center;
}
.bk-claimed-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.bk-claimed-ring {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-shadow: 0 6px 18px rgba(244, 160, 90, 0.22);
}
.bk-claimed-ring-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--text, #111);
  letter-spacing: 0;
  overflow: hidden;
}
/* When the workspace has a brand mark (logo / favicon), the inner circle
   becomes its frame. object-fit:contain leaves a touch of breathing room
   around square / non-square marks instead of cropping them. */
.bk-claimed-ring-mark {
  width: 88%;
  height: 88%;
  object-fit: contain;
  display: block;
}
.bk-claimed-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bk-workspace-head.is-claimed .bk-workspace-name {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
}
.bk-summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.bk-summary-chip {
  display: inline-flex;
  align-items: center;
  background: #f4f0ea;
  border: 1px solid #e7ddc9;
  color: var(--text-soft, #5b4936);
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-summary-chip.is-tagline {
  background: #fffaf2;
  border-color: #f0c896;
  color: #6b4a1f;
  font-style: italic;
  max-width: 360px;
}
.bk-claimed-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.bk-reanalyze-btn { white-space: nowrap; }

/* Tighter responsive: stack identity above actions on narrow widths */
@media (max-width: 720px) {
  .bk-workspace-head.is-claimed {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .bk-claimed-actions { width: 100%; justify-content: flex-end; }
}

.bk-workspace-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}
@media (max-width: 760px) {
  .bk-workspace-grid { grid-template-columns: 1fr; }
}
.bk-field { display: flex; flex-direction: column; }
.bk-field-full { grid-column: 1 / -1; }

/* Asset locker — visual marketing-asset slots inside the brand kit page.
   Filled tiles show a real thumbnail; empty tiles show a soft instruction.
   Imagery sits in its own horizontally-scrolling strip below the three
   single-asset slots. */
.bk-assets-field { margin-top: 8px; }
.bk-asset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 760px) {
  .bk-asset-grid { grid-template-columns: 1fr 1fr; }
}
.bk-asset-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border, #ececec);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bk-asset-tile.is-filled {
  border-color: #f0c896;
  background: linear-gradient(160deg, #fffaf4 0%, #fff 60%);
}
.bk-asset-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border, #ececec);
}
.bk-asset-tile-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #111);
  letter-spacing: 0.01em;
}
.bk-asset-clear {
  appearance: none;
  border: 0;
  background: transparent;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-soft, #666);
  cursor: pointer;
  border-radius: 50%;
}
.bk-asset-clear:hover {
  background: rgba(0,0,0,0.06);
  color: var(--text, #111);
}
.bk-asset-tile-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(45deg, #f4f4f5 25%, transparent 25%),
    linear-gradient(-45deg, #f4f4f5 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f4f4f5 75%),
    linear-gradient(-45deg, transparent 75%, #f4f4f5 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0px;
}
.bk-asset-tile.is-filled .bk-asset-tile-thumb { background: #fff; }
.bk-asset-tile-thumb img {
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
}
.bk-asset-tile-empty {
  color: var(--text-soft, #888);
  font-size: 11.5px;
  text-align: center;
  padding: 12px 14px;
  line-height: 1.4;
}

/* Imagery strip — separate section below the three logo/favicon tiles */
.bk-asset-imagery {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--border, #ececec);
  border-radius: 12px;
  background: #fafafa;
}
.bk-asset-imagery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.bk-imagery-count {
  font-size: 11px;
  color: var(--text-soft, #6b6b6b);
}
.bk-imagery-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.bk-imagery-thumb {
  position: relative;
  flex: 0 0 96px;
  height: 96px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border, #ececec);
}
.bk-imagery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bk-imagery-x {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  width: 20px;
  height: 20px;
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.bk-imagery-thumb:hover .bk-imagery-x { opacity: 1; }
.bk-imagery-x:hover { background: rgba(0, 0, 0, 0.75); color: #fff; }
.bk-field-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b6b6b;
  margin-bottom: 6px;
}
.bk-field-hint {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--muted, #999);
}
.bk-input, .bk-textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  background: white;
  transition: border-color 0.12s;
  box-sizing: border-box;
}
.bk-input:focus, .bk-textarea:focus { outline: none; border-color: #111; }
.bk-textarea { resize: vertical; min-height: 72px; }

/* Swatch editor rows */
.bk-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bk-swatch-edit {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 6px 4px 4px;
  background: white;
}
.bk-swatch-color {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0;
  background: white;
  cursor: pointer;
}
.bk-swatch-name {
  border: none;
  outline: none;
  font-size: 13px;
  padding: 4px 4px;
  width: 100px;
  background: transparent;
}
.bk-swatch-x {
  background: transparent;
  border: none;
  color: #999;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 6px;
}
.bk-swatch-x:hover { color: #b00020; }
.bk-swatch-add {
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--muted, #6b6b6b);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.bk-swatch-add:hover { border-color: #111; color: #111; }

/* Store overrides section */
.bk-stores-section { margin-top: 8px; }
.bk-stores-title { font-size: 16px; margin: 0 0 4px; }
.bk-stores-sub {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--muted, #6b6b6b);
  max-width: 640px;
}
.bk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.bk-store-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: white;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
}
.bk-store-card:hover {
  border-color: #111;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}
.bk-store-name { font-size: 14px; font-weight: 600; }
.bk-store-channel {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted, #999);
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.bk-store-cta {
  margin-top: 10px;
  font-size: 12px;
  color: #111;
  font-weight: 600;
}

/* ── Mode tabs + Generate Video panel ─────────────────────────────────── */
.mode-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-soft);
  border-radius: 10px;
  width: fit-content;
  /* Tight bottom margin so the prompt sits right under the mode switch.
     Was 16px which, combined with .compose-region's 24px top padding,
     created ~40px of dead space. */
  margin: 0 auto 4px;
}
.mode-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.mode-tab:hover { color: var(--text); }
.mode-tab.is-active {
  background: var(--bg-card);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
/* "Soon" badge sits inside a mode-tab to flag a flow that's mid-rebuild.
   Warm orange pill that matches the brand instead of generic gray, so the
   eye treats it as info, not error. */
.mode-tab-soon {
  display: inline-flex; align-items: center;
  margin-left: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b3a1f;
  background: #fff4e8;
  border: 1px solid #f4d8c8;
  line-height: 1.2;
}

/* Mode-gated chips. The compose chip bar serves both Image and Video;
   chips that only make sense in one mode hide in the other. Body class
   is set by the mode-tab handler in app.js. */
body.mode-image .video-only-chip { display: none !important; }
body.mode-video .image-only-chip { display: none !important; }
body.mode-ugc .compose-region { display: none !important; }

/* Audio chip muted/active states. Same chip element, different glyph +
   subdued styling when muted. */
.compose-chip#chip-audio.is-muted {
  color: var(--text-soft, #666);
}
.compose-chip#chip-audio:not(.is-muted) {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

.video-panel { margin: 0 auto 24px; max-width: 880px; }
.vp-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vp-frames {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vp-frame {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  border: 1.5px dashed var(--border-strong);
  background: var(--bg-soft);
  color: var(--text-soft);
  font: inherit;
  font-size: 11px;
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  padding: 0;
}
.vp-frame:hover { border-color: var(--brand); color: var(--brand-deep); }
.vp-frame img { width: 100%; height: 100%; object-fit: cover; }
.vp-frame-label { padding: 4px 6px; text-align: center; line-height: 1.2; }
.vp-frame-clear {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 11px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.vp-frame-swap {
  background: transparent;
  border: 0;
  color: var(--text-soft);
  font-size: 18px;
  cursor: pointer;
}
.vp-frame-swap:hover { color: var(--text); }
.vp-prompt {
  width: 100%;
  resize: vertical;
  min-height: 72px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
}
.vp-prompt:focus { outline: none; border-color: var(--brand); }
.vp-prompt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.vp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.vp-chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.vp-chip:hover { border-color: var(--brand); color: var(--brand-deep); }
.vp-enhance {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 18px;
  padding: 4px 6px;
}
.vp-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.vp-footer-left { display: flex; gap: 8px; align-items: center; }
.vp-footer select {
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  font: inherit;
  font-size: 12px;
}
.vp-mute {
  background: transparent;
  border: 0;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
}
.vp-generate {
  padding: 8px 18px;
  border-radius: 10px;
  border: 0;
  background: var(--text);
  color: var(--bg-card);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.vp-generate:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.vp-progress {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 13px;
}

/* Design picker modal */
.dp-backdrop { z-index: 1100; }
.dp-search {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  margin-bottom: 12px;
  font: inherit;
}
.dp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
}
.dp-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  font: inherit;
}
.dp-tile:hover { border-color: var(--brand); }
.dp-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; }
/* Multi-pick state on the design picker. ✓ pip rides in the top-right
   and the tile gets a thick brand border + slight scale-down so picks
   read as "selected" without obscuring the image. */
.dp-tile { position: relative; }
.dp-tile-check {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--border);
  color: transparent;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: 700;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.dp-tile.is-picked {
  border-color: var(--brand, #ef7d2b);
  border-width: 2px;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
}
.dp-tile.is-picked .dp-tile-check {
  background: var(--brand, #ef7d2b);
  border-color: var(--brand, #ef7d2b);
  color: white;
}
.dp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-top: 1px solid var(--border, #ececec);
  gap: 12px;
}
.dp-foot-count {
  font-size: 12.5px;
  color: var(--text-soft, #666);
}
.dp-foot-actions { display: flex; gap: 8px; }
.dp-foot-btn {
  appearance: none;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border-strong, #d4d4d4);
  background: white;
  color: var(--text, #111);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.dp-foot-btn:hover { background: var(--bg-soft, #f4f4f5); }
.dp-foot-btn.dp-foot-confirm {
  background: var(--text, #111);
  color: white;
  border-color: var(--text, #111);
  font-weight: 600;
}
.dp-foot-btn.dp-foot-confirm:hover { background: #000; border-color: #000; }
.dp-foot-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Paperclip popover (📎 → Upload | Library). Small floating menu
   anchored under the chip. Two large hit-targets so the user knows
   they're not still in chip-bar muscle memory. */
.ref-source-popover {
  background: white;
  border: 1px solid var(--border, #ececec);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  padding: 6px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ref-source-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--text, #111);
}
.ref-source-option:hover { background: var(--bg-soft, #f4f4f5); }
.ref-source-icon {
  font-size: 22px;
  width: 32px;
  display: inline-flex;
  justify-content: center;
}
.ref-source-text { display: flex; flex-direction: column; gap: 2px; }
.ref-source-text strong { font-size: 13px; font-weight: 600; }
.ref-source-text small { font-size: 11.5px; color: var(--text-soft, #666); }
.dp-tile-title {
  font-size: 11px;
  padding: 4px 6px;
  text-align: left;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dp-loading, .dp-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-soft);
  font-size: 13px;
}


/* ─────────────────────────────────────────────────────────────────────
   Image editor — polished UX layer.
   ───────────────────────────────────────────────────────────────────── */

.modal.modal-editor-mode {
  width: min(94vw, 1480px);
  height: min(94vh, 1040px);
  max-width: 94vw;
  max-height: 94vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  border-radius: 22px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 30px 80px rgba(0, 0, 0, 0.20),
    0 8px 24px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  opacity: 0;
  transform: scale(0.97) translateY(8px);
  transition: opacity 280ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.modal.modal-editor-mode.modal-editor-mode-on {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.editor-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: #fafafb;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: #1a1a1a;
}

/* ── Top toolbar ───────────────────────────────────────────────────── */
.editor-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 24px;
  min-height: 68px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: #ffffff;
  position: relative;
}
.editor-topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(15, 23, 42, 0.04), transparent);
}
.editor-toolbar-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.editor-toolbar-wrap::-webkit-scrollbar { display: none; }
.editor-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: #f4f4f7;
  border: 1px solid rgba(15, 23, 42, 0.04);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) inset;
}
.editor-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.editor-toolbar-divider {
  width: 1px;
  height: 24px;
  background: rgba(15, 23, 42, 0.08);
  margin: 0 6px;
}
.editor-tool,
.editor-oneshot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: #1f1f24;
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition:
    background 180ms cubic-bezier(0.16, 1, 0.3, 1),
    color 180ms ease,
    transform 120ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 180ms ease;
  white-space: nowrap;
  position: relative;
}
.editor-tool:hover,
.editor-oneshot:hover {
  background: rgba(15, 23, 42, 0.04);
  color: #0f172a;
}
.editor-tool:active,
.editor-oneshot:active {
  transform: scale(0.97);
}
.editor-tool[aria-pressed="true"] {
  background: #ffffff;
  color: #1f1f24;
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.04),
    0 1px 3px rgba(15, 23, 42, 0.10),
    0 0 0 1px rgba(15, 23, 42, 0.06);
  transform: translateY(-0.5px);
}
.editor-tool[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ed-accent), var(--ed-accent-2));
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(244, 122, 32, 0.45);
}
.editor-tool:disabled,
.editor-oneshot:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.editor-oneshot {
  /* Visually distinguish processing ops from interactive modal tools. */
  color: #8b4515;
  background: linear-gradient(180deg, rgba(255, 178, 110, 0.16), rgba(244, 122, 32, 0.10));
}
.editor-oneshot:hover {
  background: linear-gradient(180deg, rgba(255, 178, 110, 0.28), rgba(244, 122, 32, 0.18));
  color: #6e3008;
}
.editor-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.editor-btn-label { line-height: 1; }
.editor-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #4a4a4a;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.editor-iconbtn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
  color: #1a1a1a;
}
.editor-iconbtn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.editor-iconbtn--xs {
  padding: 4px;
  border-radius: 5px;
  color: #888;
}

/* ── Sub-bar (tool options) ──────────────────────────────────────────
   FLOATING overlay — never push the canvas. Pinned to the bottom of the
   canvas stage with a generous shadow so it reads as a transient tool
   strip. Older versions of this rule had it as an in-flow block which
   squeezed the canvas every time a tool opened; that pattern is banned.
   The `!important` flags override the legacy `.editor-side-panel`
   width/flex rules that the same element still carries. */
.editor-subbar {
  position: absolute !important;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: auto !important;
  flex-shrink: 1 !important;
  display: inline-flex;
  flex-direction: row !important;
  align-items: center;
  gap: 18px;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  min-height: 60px;
  max-width: calc(100% - 32px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.04);
  z-index: 6;
  animation: editorSubbarSlide 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.editor-subbar[hidden] { display: none; }
@keyframes editorSubbarSlide {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.editor-subbar[data-tool="adjust"] {
  align-items: flex-start;
  flex-wrap: wrap;
}
.editor-subbar-group {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.editor-subbar-group--grow { flex: 1; min-width: 280px; }
.editor-subbar-grouplabel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  font-weight: 600;
}
.editor-subbar-chiprow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.editor-subbar-spacer { flex: 1; }
.editor-subbar-hint {
  font-size: 12px;
  color: #777;
  flex: 1;
  text-align: center;
  font-style: italic;
}
.editor-subbar-readout {
  font-size: 12px;
  color: #555;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
}
.editor-subbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.editor-subbar-actions--vertical {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 180px;
}
.editor-subbar-actions--vertical button {
  width: 100%;
  justify-content: center;
}

/* Chips (aspect, flip directions, quick rotates) */
.editor-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease, box-shadow 130ms ease;
}
.editor-chip:hover {
  background: #faf7ef;
  border-color: rgba(0, 0, 0, 0.18);
}
.editor-chip[aria-pressed="true"] {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}
.editor-chip--icon { padding: 7px 10px; }

/* Range slider — custom across browsers */
.editor-slider-cell {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}
.editor-slider-cell--ticks {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.editor-range {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  width: 100%;
  background: linear-gradient(to right, #e8e5dc, #e8e5dc);
  border-radius: 6px;
  outline: none;
  cursor: pointer;
}
.editor-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1a1a1a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  cursor: grab;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.editor-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.editor-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.08); }
.editor-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1a1a1a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  cursor: grab;
}
.editor-range--bidirectional {
  /* Subtle center mark for ±sliders */
  background-image: linear-gradient(to right, #e8e5dc, #e8e5dc);
}
.editor-range-ticks {
  position: relative;
  height: 14px;
  width: 100%;
  margin-top: 2px;
}
.editor-range-ticks span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 10px;
  color: #999;
  font-variant-numeric: tabular-nums;
}
.editor-slider-readout {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  font-variant-numeric: tabular-nums;
  min-width: 44px;
  text-align: right;
}
.editor-slider-readout small { color: #999; font-weight: 500; margin-left: 1px; }
.editor-slider-readout--lg { font-size: 22px; min-width: 70px; }

/* Adjust panel — vertical card grid */
.editor-adjust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
  flex: 1;
  min-width: 0;
}
.editor-adjust-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.editor-adjust-row[data-active="true"] .editor-adjust-value { color: var(--ed-accent); }
.editor-adjust-rowhead {
  display: flex;
  align-items: center;
  gap: 8px;
}
.editor-adjust-label {
  font-size: 12px;
  font-weight: 600;
  color: #1a1a1a;
  flex: 1;
}
.editor-adjust-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #555;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}

/* ── Canvas stage ──────────────────────────────────────────────────── */
.editor-canvas-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  background:
    radial-gradient(ellipse at 50% 30%, #ffffff 0%, #f4f4f7 60%, #ecedf2 100%);
  /* Smoothly reflow when the Edit Image panel opens/closes. */
  transition: padding-left 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* When the Edit Image popover is open, push the canvas content right so
   the design centers in the visible area and never sits behind the
   panel. The panel is 360px wide + 16px left gap + 16px breathing room. */
.editor-canvas-stage:has(.editor-canva-edit-panel:not([hidden])) {
  padding-left: 392px;
}
.editor-canvas-frame {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
}
/* Subtle dot grid gives the stage a sense of "infinite canvas" without the
   harsh transparency checker that read as scary chrome. */
.editor-canvas-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 11px 11px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 90%);
  mask-image: radial-gradient(ellipse at center, black 35%, transparent 90%);
}
.editor-canvas {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  /* Transparency-checker now lives ON the canvas itself, so it only appears
     where the PNG is actually transparent — no harsh checker filling the
     surrounding stage. */
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, rgba(15, 23, 42, 0.045) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(15, 23, 42, 0.045) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(15, 23, 42, 0.045) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(15, 23, 42, 0.045) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0px;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.06),
    0 2px 10px rgba(15, 23, 42, 0.06),
    0 18px 50px rgba(15, 23, 42, 0.14);
  border-radius: 10px;
  transition: filter 80ms ease, box-shadow 220ms ease;
}
.editor-canvas--brush-cursor { cursor: none; }
/* Position tool: drop the transparent-checker pattern so dragging the
   design off-center doesn't reveal a busy grid behind the artwork. The
   canvas just reads as a flat white "page" — the dashed bbox overlay
   inside the canvas still shows the user where the design sits. */
.editor-canvas--positioning {
  background-image: none !important;
}

.editor-overlay-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.editor-overlay-layer > * { pointer-events: auto; }

.editor-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(239, 236, 228, 0.7);
  backdrop-filter: blur(2px);
  z-index: 5;
}
.editor-loading[hidden] { display: none; }
.editor-loading-spinner { color: #555; }
.editor-loading-text { font-size: 13px; color: #555; }

/* ── Crop overlay ──────────────────────────────────────────────────── */
.editor-crop-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Dim everything OUTSIDE the crop rect, but only within the visible
     canvas area. Computed via CSS vars set by the JS. */
  background:
    /* Top band */
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)) var(--vx) var(--vy) / var(--vw) calc(var(--cy) - var(--vy)) no-repeat,
    /* Bottom band */
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)) var(--vx) calc(var(--cy) + var(--ch)) / var(--vw) calc(var(--vy) + var(--vh) - var(--cy) - var(--ch)) no-repeat,
    /* Left band */
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)) var(--vx) var(--cy) / calc(var(--cx) - var(--vx)) var(--ch) no-repeat,
    /* Right band */
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)) calc(var(--cx) + var(--cw)) var(--cy) / calc(var(--vx) + var(--vw) - var(--cx) - var(--cw)) var(--ch) no-repeat;
}

.editor-crop-rect {
  position: absolute;
  pointer-events: auto;
  cursor: move;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.editor-crop-rect::before,
.editor-crop-rect::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1.5px dashed #fff;
  animation: editorMarchAnts 1.2s linear infinite;
}
.editor-crop-rect::after {
  border-color: rgba(0, 0, 0, 0.8);
  animation-direction: reverse;
  animation-duration: 1.2s;
}
@keyframes editorMarchAnts {
  to { background-position: 8px 0; }
}
.editor-crop-rect.is-dragging .editor-crop-thirds { opacity: 1; }
.editor-crop-thirds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease;
}
.editor-crop-thirds span {
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
}
.editor-crop-thirds span:nth-child(1) { left: 33.333%; top: 0; bottom: 0; width: 1px; }
.editor-crop-thirds span:nth-child(2) { left: 66.666%; top: 0; bottom: 0; width: 1px; }
.editor-crop-thirds span:nth-child(3) { top: 33.333%; left: 0; right: 0; height: 1px; }
.editor-crop-thirds span:nth-child(4) { top: 66.666%; left: 0; right: 0; height: 1px; }

.editor-crop-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 1.5px solid #1a1a1a;
  border-radius: 2px;
  pointer-events: auto;
  transition: transform 120ms ease, background 120ms ease;
}
.editor-crop-handle:hover { background: var(--ed-accent); transform: scale(1.15); }
.editor-crop-handle-nw { left: -7px; top: -7px; cursor: nwse-resize; }
.editor-crop-handle-n { left: 50%; top: -7px; margin-left: -7px; cursor: ns-resize; }
.editor-crop-handle-ne { right: -7px; top: -7px; cursor: nesw-resize; }
.editor-crop-handle-e { right: -7px; top: 50%; margin-top: -7px; cursor: ew-resize; }
.editor-crop-handle-se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.editor-crop-handle-s { left: 50%; bottom: -7px; margin-left: -7px; cursor: ns-resize; }
.editor-crop-handle-sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.editor-crop-handle-w { left: -7px; top: 50%; margin-top: -7px; cursor: ew-resize; }
/* Edge handles get a wider grip area */
.editor-crop-handle-n,
.editor-crop-handle-s { width: 28px; }
.editor-crop-handle-e,
.editor-crop-handle-w { height: 28px; }
.editor-crop-handle-n,
.editor-crop-handle-s { margin-left: -14px; }
.editor-crop-handle-e,
.editor-crop-handle-w { margin-top: -14px; }

/* ── Brush cursor (eraser) ─────────────────────────────────────────── */
.editor-brush-cursor {
  position: absolute;
  width: calc(var(--brush-radius, 20px) * 2);
  height: calc(var(--brush-radius, 20px) * 2);
  transform: translate(-50%, -50%);
  pointer-events: none !important;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(244, 122, 32, 0) 0%,
    rgba(244, 122, 32, 0) var(--brush-hardness, 80%),
    rgba(244, 122, 32, 0.10) 90%,
    rgba(244, 122, 32, 0.18) 100%
  );
  border: 1.5px solid rgba(244, 122, 32, 0.9);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.8),
    0 0 12px rgba(244, 122, 32, 0.25);
  transition: width 80ms ease, height 80ms ease;
  z-index: 10;
}
.editor-brush-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  background: rgba(244, 122, 32, 1);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
  /* pointer-events doesn't cascade — the brush container has none but
     this child would otherwise default to auto and silently swallow
     pointerdowns that land exactly on the brush center. */
  pointer-events: none;
}

/* ── Action bar ────────────────────────────────────────────────────── */
.editor-actionbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(to top, #ffffff, #fcfaf3);
}
.editor-actionbar-left,
.editor-actionbar-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.editor-actionbar-left { flex: 1; }
.editor-status-pill {
  margin-left: 8px;
  padding: 4px 10px;
  font-size: 12px;
  color: #888;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
  font-weight: 500;
  transition: background 160ms ease, color 160ms ease;
}
.editor-status-pill[data-dirty] {
  background: rgba(244, 122, 32, 0.12);
  color: #b85a14;
}
.editor-undo-btn,
.editor-redo-btn { padding: 8px; }

.editor-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  background: #1a1a1a;
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, transform 100ms ease, box-shadow 140ms ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
}
.editor-btn-primary:hover:not(:disabled) {
  background: #000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.editor-btn-primary:active:not(:disabled) { transform: scale(0.97); }
.editor-btn-primary:disabled {
  background: #c8c8c8;
  cursor: not-allowed;
  box-shadow: none;
}
.editor-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: #fff;
  color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.editor-btn-secondary:hover:not(:disabled) {
  background: #faf7ef;
  border-color: rgba(0, 0, 0, 0.2);
}
.editor-btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  background: transparent;
  color: #555;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 130ms ease, color 130ms ease;
}
.editor-btn-ghost:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1a1a1a;
}
.editor-btn-danger {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: #c82828;
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease;
}
.editor-btn-danger:hover { background: #b01e1e; }

.is-loading .editor-btn-icon .editor-spin {
  animation: editorSpin 0.8s linear infinite;
}
@keyframes editorSpin {
  to { transform: rotate(360deg); }
}

/* ── Toasts ────────────────────────────────────────────────────────── */
.editor-toasts {
  position: absolute;
  bottom: 84px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 100;
  pointer-events: none;
}
.editor-toast {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  padding: 12px 36px 12px 14px;
  min-width: 240px;
  max-width: 360px;
  background: #1a1a1a;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  font-size: 13px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.editor-toast.is-shown { opacity: 1; transform: translateY(0); }
.editor-toast.is-leaving { opacity: 0; transform: translateY(8px); }
.editor-toast--success { background: #1d6c3a; }
.editor-toast--error { background: #b21e1e; }
.editor-toast-title { font-weight: 600; }
.editor-toast-body { font-size: 12px; opacity: 0.85; line-height: 1.4; }
.editor-toast-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  border-radius: 6px;
}
.editor-toast-close:hover { background: rgba(255, 255, 255, 0.12); opacity: 1; }

/* ── Discard confirm modal ────────────────────────────────────────── */
.editor-confirm {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.32);
  z-index: 200;
  opacity: 0;
  transition: opacity 150ms ease;
}
.editor-confirm[hidden] { display: none; }
.editor-confirm.is-shown { opacity: 1; }
.editor-confirm-card {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
  max-width: 380px;
  width: calc(100% - 48px);
  transform: scale(0.96);
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.editor-confirm.is-shown .editor-confirm-card { transform: scale(1); }
.editor-confirm-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
}
.editor-confirm-body {
  margin: 0 0 18px;
  font-size: 13px;
  color: #555;
  line-height: 1.5;
}
.editor-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}


/* ═════════════════════════════════════════════════════════════════════
   Editor — Canva-feel polish layer.
   Single source of polish atop the structural v1 styles above. Tuned
   for warmth, soft borders, generous radii, micro-motion. Overrides
   work via source-order on specificity ties.
   ═════════════════════════════════════════════════════════════════════ */

:root {
  --ed-font: "Inter", "InterVariable", -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, sans-serif;
  --ed-bg-page: #fbf7ee;
  --ed-bg-surface: #ffffff;
  --ed-bg-soft: #faf6ed;
  --ed-bg-warmer: #fff4e2;
  /* Editor accent must track the brand honey, not a bespoke near-orange.
     Reference the canonical tokens so they can never drift again. */
  --ed-accent: var(--brand, #ef7d2b);
  --ed-accent-2: #ff9a52; /* lighter honey tint for gradient highlights */
  --ed-accent-deep: var(--brand-deep, #9c4612);
  --ed-text: #1f1611;
  --ed-text-soft: #6b4a26;
  --ed-text-faint: #b5a081;
  --ed-border: rgba(60, 24, 0, 0.07);
  --ed-border-strong: rgba(60, 24, 0, 0.12);
  --ed-shadow-sm: 0 1px 2px rgba(50, 30, 10, 0.05);
  --ed-shadow-md: 0 4px 14px rgba(50, 30, 10, 0.10), 0 1px 3px rgba(50, 30, 10, 0.05);
  --ed-shadow-lg: 0 24px 60px rgba(50, 30, 10, 0.16), 0 4px 14px rgba(50, 30, 10, 0.08);
  --ed-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ed-easing: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Modal shell ───────────────────────────────────────────────────── */
.modal.modal-editor-mode {
  border-radius: 24px;
  background: var(--ed-bg-page);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 36px 90px rgba(30, 16, 4, 0.22),
    0 12px 30px rgba(30, 16, 4, 0.10),
    0 0 0 1px rgba(0, 0, 0, 0.03);
}

.editor-shell {
  font-family: var(--ed-font);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  background: var(--ed-bg-page);
  color: var(--ed-text);
}

/* ── Topbar ────────────────────────────────────────────────────────── */
.editor-topbar {
  padding: 24px 24px;
  min-height: 72px;
  background: var(--ed-bg-surface);
  border-bottom: 1px solid var(--ed-border);
}
.editor-topbar::after {
  background: linear-gradient(to right, transparent 0%, rgba(60, 24, 0, 0.05) 50%, transparent 100%);
}

.editor-toolbar {
  gap: 4px;
  padding: 5px;
  background: var(--ed-bg-soft);
  border: 1px solid var(--ed-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(60, 24, 0, 0.025) inset;
}
.editor-toolbar-divider {
  width: 1px;
  height: 22px;
  background: var(--ed-border-strong);
  margin: 0 6px;
}

/* ── Tools (modal) + one-shot ops ──────────────────────────────────── */
.editor-tool,
.editor-oneshot {
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ed-text);
  background: transparent;
  letter-spacing: -0.005em;
  transition:
    background 200ms var(--ed-easing),
    color 200ms ease,
    transform 200ms var(--ed-spring),
    box-shadow 220ms ease;
}
.editor-tool:hover:not(:disabled),
.editor-oneshot:hover:not(:disabled) {
  background: rgba(244, 122, 32, 0.08);
  transform: translateY(-1px);
  color: var(--ed-accent-deep);
}
.editor-tool:active:not(:disabled),
.editor-oneshot:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
}

/* Active tool — warm pill, no harsh ring */
.editor-tool[aria-pressed="true"] {
  background: linear-gradient(180deg, #fff 0%, #fff8ec 100%);
  color: var(--ed-accent-deep);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 1px 3px rgba(244, 122, 32, 0.18),
    0 0 0 1px rgba(244, 122, 32, 0.22);
  transform: translateY(-1px);
}
.editor-tool[aria-pressed="true"]::after {
  display: none; /* drop the structural v1 ring */
}
.editor-tool[aria-pressed="true"] .editor-btn-icon { color: var(--ed-accent); }

/* One-shot ops read as ambient processing actions, not interactive states. */
.editor-oneshot {
  color: var(--ed-text-soft);
  background: transparent;
}
.editor-oneshot:hover:not(:disabled) {
  background: rgba(244, 122, 32, 0.12);
  color: var(--ed-accent-deep);
}

/* Toolbar entry stagger — buttons cascade in on open */
.editor-toolbar .editor-tool,
.editor-toolbar .editor-oneshot {
  animation: edToolFadeIn 360ms var(--ed-easing) backwards;
}
.editor-toolbar-group:first-child .editor-tool:nth-child(1) { animation-delay: 40ms; }
.editor-toolbar-group:first-child .editor-tool:nth-child(2) { animation-delay: 80ms; }
.editor-toolbar-group:first-child .editor-tool:nth-child(3) { animation-delay: 120ms; }
.editor-toolbar-group:first-child .editor-tool:nth-child(4) { animation-delay: 160ms; }
.editor-toolbar-group:first-child .editor-tool:nth-child(5) { animation-delay: 200ms; }
.editor-toolbar-group:last-child .editor-oneshot:nth-child(1) { animation-delay: 240ms; }
.editor-toolbar-group:last-child .editor-oneshot:nth-child(2) { animation-delay: 280ms; }
.editor-toolbar-group:last-child .editor-oneshot:nth-child(3) { animation-delay: 320ms; }
@keyframes edToolFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Iconbtns (back / close / undo / redo) */
.editor-iconbtn {
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--ed-text-soft);
  transition: background 200ms var(--ed-easing), color 200ms ease, transform 160ms var(--ed-spring);
}
.editor-iconbtn:hover:not(:disabled) {
  background: rgba(60, 24, 0, 0.05);
  color: var(--ed-text);
  transform: translateY(-1px);
}
.editor-iconbtn:active:not(:disabled) { transform: translateY(0) scale(0.94); }

/* ── Sub-bar (cream theme override) — keeps the overlay positioning from
       the base rule; only restyles surface/border to match the theme. */
.editor-subbar {
  padding: 14px 20px;
  background: var(--ed-bg-surface);
  border: 1px solid var(--ed-border);
  border-bottom: 1px solid var(--ed-border);
  animation: edSubbarIn 360ms var(--ed-easing);
}
@keyframes edSubbarIn {
  0%   { opacity: 0; transform: translateY(-10px); }
  60%  { opacity: 1; transform: translateY(1px); }
  100% { opacity: 1; transform: translateY(0); }
}
.editor-subbar-grouplabel {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ed-text-faint);
  font-weight: 600;
}
.editor-subbar-hint {
  color: var(--ed-text-faint);
  font-style: normal;
  font-size: 12px;
}
.editor-subbar-readout {
  font-size: 11px;
  font-weight: 600;
  color: var(--ed-text-soft);
  background: var(--ed-bg-soft);
  border: 1px solid var(--ed-border);
  padding: 5px 12px;
  border-radius: 8px;
}

/* ── Chips ─────────────────────────────────────────────────────────── */
.editor-chip {
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--ed-border-strong);
  background: #fff;
  color: var(--ed-text);
  font-weight: 500;
  letter-spacing: -0.005em;
  transition:
    background 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    transform 180ms var(--ed-spring),
    box-shadow 200ms ease;
}
.editor-chip:hover:not([aria-pressed="true"]) {
  background: #fffaf2;
  border-color: var(--ed-accent);
  color: var(--ed-accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(244, 122, 32, 0.12);
}
.editor-chip[aria-pressed="true"] {
  background: linear-gradient(180deg, #2c241e 0%, #1a130e 100%);
  border-color: #1a130e;
  color: #fff;
  box-shadow: 0 2px 8px rgba(31, 22, 17, 0.22);
}

/* ── Range sliders ─────────────────────────────────────────────────── */
.editor-range {
  background: rgba(60, 24, 0, 0.10);
  transition: background 200ms ease;
}
.editor-range:hover { background: rgba(60, 24, 0, 0.14); }
.editor-range::-webkit-slider-thumb {
  background: #fff;
  border: 2px solid var(--ed-text);
  box-shadow:
    0 1px 4px rgba(60, 24, 0, 0.2),
    0 0 0 0 rgba(244, 122, 32, 0);
  transition: transform 200ms var(--ed-spring), box-shadow 240ms ease;
}
.editor-range:hover::-webkit-slider-thumb {
  box-shadow:
    0 1px 4px rgba(60, 24, 0, 0.2),
    0 0 0 6px rgba(244, 122, 32, 0.12);
}
.editor-range:active::-webkit-slider-thumb {
  box-shadow:
    0 1px 4px rgba(60, 24, 0, 0.2),
    0 0 0 8px rgba(244, 122, 32, 0.22);
  transform: scale(1.18);
}
.editor-range::-moz-range-thumb {
  background: #fff;
  border: 2px solid var(--ed-text);
  box-shadow: 0 1px 4px rgba(60, 24, 0, 0.2);
}
.editor-range-ticks span { color: var(--ed-text-faint); font-size: 10px; }
.editor-slider-readout {
  color: var(--ed-text);
  font-feature-settings: "tnum";
}
.editor-slider-readout small { color: var(--ed-text-faint); }

/* ── Canvas stage — Canva-friendly ambient ────────────────────────── */
.editor-canvas-stage {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255, 230, 200, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 100%, rgba(255, 220, 230, 0.35) 0%, transparent 55%),
    linear-gradient(180deg, #fbf5ea 0%, #f6efe1 100%);
}
.editor-canvas-frame {
  padding: 40px;
}
/* Subtle dot pattern in the stage — "transparent pixels live here" without
   the harsh checker. The checker proper now sits ON the canvas itself. */
.editor-canvas-frame::before {
  background-image: radial-gradient(rgba(60, 24, 0, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 11px 11px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 90%);
  mask-image: radial-gradient(ellipse at center, black 35%, transparent 90%);
  opacity: 0.6;
}
.editor-canvas {
  border-radius: 10px;
  background-color: #ffffff;
  /* Soft checker visible ONLY through transparent PNG pixels. */
  background-image:
    linear-gradient(45deg, rgba(60, 24, 0, 0.045) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(60, 24, 0, 0.045) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(60, 24, 0, 0.045) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(60, 24, 0, 0.045) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0px;
  box-shadow:
    0 0 0 1px rgba(60, 24, 0, 0.06),
    0 2px 10px rgba(60, 24, 0, 0.06),
    0 24px 60px -10px rgba(60, 24, 0, 0.22);
  transition: filter 80ms ease, box-shadow 240ms ease;
  animation: edCanvasIn 540ms var(--ed-easing) backwards;
}
@keyframes edCanvasIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Crop overlay ──────────────────────────────────────────────────── */
.editor-crop-rect::before { border-color: rgba(255, 255, 255, 0.95); }
.editor-crop-rect::after { border-color: rgba(31, 22, 17, 0.7); }
.editor-crop-handle {
  background: #fff;
  border: 1.5px solid var(--ed-text);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(60, 24, 0, 0.2);
}
.editor-crop-handle:hover {
  background: var(--ed-accent);
  border-color: var(--ed-accent);
  transform: scale(1.22);
  box-shadow: 0 2px 8px rgba(244, 122, 32, 0.35);
}

/* ── Brush cursor — gentle breathing ───────────────────────────────── */
.editor-brush-cursor {
  border-color: rgba(244, 122, 32, 0.85);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.9),
    0 0 14px rgba(244, 122, 32, 0.28);
  animation: edBrushBreath 2.4s ease-in-out infinite;
}
@keyframes edBrushBreath {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.9),
      0 0 12px rgba(244, 122, 32, 0.22);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.9),
      0 0 22px rgba(244, 122, 32, 0.40);
  }
}
.editor-brush-dot {
  background: var(--ed-accent);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.95);
}

/* ── Action bar ────────────────────────────────────────────────────── */
.editor-actionbar {
  padding: 16px 22px;
  background: var(--ed-bg-surface);
  border-top: 1px solid var(--ed-border);
}
.editor-status-pill {
  margin-left: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ed-text-faint);
  background: var(--ed-bg-soft);
  transition: background 240ms ease, color 240ms ease, box-shadow 240ms ease;
}
.editor-status-pill[data-dirty] {
  color: var(--ed-accent-deep);
  background: var(--ed-bg-warmer);
  box-shadow: 0 0 0 1px rgba(244, 122, 32, 0.28);
  animation: edStatusPulse 2.2s ease-in-out infinite;
}
@keyframes edStatusPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(244, 122, 32, 0.28); }
  50%      { box-shadow: 0 0 0 4px rgba(244, 122, 32, 0.16); }
}

/* Primary Save — strong dark, warm glow when actionable */
.editor-btn-primary {
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  background: linear-gradient(180deg, #2c241e 0%, #1a130e 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 1px 2px rgba(0, 0, 0, 0.20),
    0 4px 16px rgba(0, 0, 0, 0.10);
  transition:
    transform 200ms var(--ed-spring),
    box-shadow 280ms ease,
    background 220ms ease;
}
.editor-btn-primary:not(:disabled) {
  animation: edSaveGlow 3.6s ease-in-out infinite;
}
.editor-btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #3a2e25 0%, #251a13 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 6px 22px rgba(244, 122, 32, 0.30),
    0 10px 26px rgba(0, 0, 0, 0.14);
}
.editor-btn-primary:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}
.editor-btn-primary:disabled {
  background: #ece7da;
  color: var(--ed-text-faint);
  box-shadow: none;
  animation: none;
}
@keyframes edSaveGlow {
  0%, 100% {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.10) inset,
      0 1px 2px rgba(0, 0, 0, 0.20),
      0 4px 16px rgba(0, 0, 0, 0.10),
      0 0 0 0 rgba(244, 122, 32, 0);
  }
  50% {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.10) inset,
      0 1px 2px rgba(0, 0, 0, 0.20),
      0 4px 16px rgba(0, 0, 0, 0.10),
      0 0 0 6px rgba(244, 122, 32, 0.14);
  }
}

.editor-btn-secondary {
  padding: 11px 18px;
  border-radius: 12px;
  border-color: var(--ed-border-strong);
  background: #fff;
  transition: transform 180ms var(--ed-spring), background 200ms ease, border-color 200ms ease;
}
.editor-btn-secondary:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #fffaf2;
  border-color: var(--ed-accent);
  color: var(--ed-accent-deep);
}
.editor-btn-ghost {
  padding: 11px 16px;
  border-radius: 10px;
  color: var(--ed-text-soft);
  font-weight: 500;
  transition: background 180ms ease, color 180ms ease, transform 160ms var(--ed-spring);
}
.editor-btn-ghost:hover {
  background: rgba(60, 24, 0, 0.05);
  color: var(--ed-text);
}
.editor-btn-danger {
  border-radius: 12px;
  background: linear-gradient(180deg, #d33636 0%, #b01e1e 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 2px 6px rgba(176, 30, 30, 0.32);
}
.editor-btn-danger:hover {
  background: linear-gradient(180deg, #c82e2e 0%, #951818 100%);
}

/* ── Adjust panel — slider cards ───────────────────────────────────── */
.editor-adjust-row {
  padding: 12px 14px;
  background: var(--ed-bg-soft);
  border: 1px solid var(--ed-border);
  border-radius: 14px;
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.editor-adjust-row[data-active="true"] {
  background: var(--ed-bg-warmer);
  border-color: rgba(244, 122, 32, 0.30);
  box-shadow: 0 0 0 4px rgba(244, 122, 32, 0.08);
}
.editor-adjust-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ed-text);
  letter-spacing: -0.003em;
}
.editor-adjust-value { color: var(--ed-text-soft); }
.editor-adjust-row[data-active="true"] .editor-adjust-value { color: var(--ed-accent-deep); }
.editor-iconbtn--xs { color: var(--ed-text-faint); padding: 4px; }
.editor-iconbtn--xs:hover { background: var(--ed-bg-warmer); color: var(--ed-accent-deep); }

/* ── Loading overlay ───────────────────────────────────────────────── */
.editor-loading {
  background: rgba(251, 247, 238, 0.85);
  backdrop-filter: blur(6px);
}
.editor-loading-text {
  color: var(--ed-text-soft);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ── Toasts ────────────────────────────────────────────────────────── */
.editor-toast {
  border-radius: 14px;
  font-weight: 500;
  letter-spacing: -0.003em;
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.editor-toast--success { background: linear-gradient(180deg, #1f7a42 0%, #155b30 100%); }
.editor-toast--error   { background: linear-gradient(180deg, #c63030 0%, #9a1818 100%); }
.editor-toast-title { font-weight: 700; }

/* ── Discard confirm modal ─────────────────────────────────────────── */
.editor-confirm {
  background: rgba(30, 16, 4, 0.42);
  backdrop-filter: blur(4px);
}
.editor-confirm-card {
  padding: 26px 24px 20px;
  border-radius: 18px;
  background: var(--ed-bg-page);
  box-shadow:
    0 24px 64px rgba(30, 16, 4, 0.32),
    0 0 0 1px rgba(60, 24, 0, 0.06) inset;
}
.editor-confirm-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ed-text);
}
.editor-confirm-body { color: var(--ed-text-soft); }

/* Brush cursor — destructive Erase mode gets a red tint so users know
   they're nuking pixels vs. healing them. */
.editor-brush-cursor[data-mode="erase"] {
  border-color: rgba(212, 60, 60, 0.9);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.9),
    0 0 14px rgba(212, 60, 60, 0.32);
  background: radial-gradient(
    circle at center,
    rgba(212, 60, 60, 0) 0%,
    rgba(212, 60, 60, 0) var(--brush-hardness, 80%),
    rgba(212, 60, 60, 0.12) 90%,
    rgba(212, 60, 60, 0.20) 100%
  );
  animation: editorBrushBreathErase 2.4s ease-in-out infinite;
}
.editor-brush-cursor[data-mode="erase"] .editor-brush-dot {
  background: rgba(212, 60, 60, 1);
}
@keyframes editorBrushBreathErase {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 12px rgba(212, 60, 60, 0.26); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 22px rgba(212, 60, 60, 0.44); }
}

/* ── Eraser mode variants — heal feels healing (warm green), erase
   stays orange/warm as today.  ─────────────────────────────────────── */
.editor-brush-cursor[data-mode="heal"] {
  border-color: rgba(40, 167, 110, 0.92);
  background: radial-gradient(
    circle at center,
    rgba(40, 167, 110, 0) 0%,
    rgba(40, 167, 110, 0) var(--brush-hardness, 40%),
    rgba(40, 167, 110, 0.10) 90%,
    rgba(40, 167, 110, 0.20) 100%
  );
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.9),
    0 0 14px rgba(40, 167, 110, 0.32);
  animation: editorBrushBreathHeal 2.4s ease-in-out infinite;
}
.editor-brush-cursor[data-mode="heal"] .editor-brush-dot {
  background: rgba(40, 167, 110, 1);
}
@keyframes editorBrushBreathHeal {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 12px rgba(40, 167, 110, 0.25); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 22px rgba(40, 167, 110, 0.46); }
}

/* Mode-chip active state tints to match cursor */
.editor-chip[data-mode="heal"][aria-pressed="true"] {
  background: linear-gradient(180deg, #1d8b5b 0%, #156c45 100%);
  border-color: #156c45;
  box-shadow: 0 2px 8px rgba(40, 167, 110, 0.28);
}
.editor-chip[data-mode="erase"][aria-pressed="true"] {
  background: linear-gradient(180deg, #2c241e 0%, #1a130e 100%);
  border-color: #1f1611;
  box-shadow: 0 2px 8px rgba(31, 22, 17, 0.22);
}

/* ─────────────────────────────────────────────────────────────────────
   Image editor — zoom + pan
   ───────────────────────────────────────────────────────────────────── */

/* Hide the brush cursor while pan is engaged so users see grab/grabbing only */
.editor-canvas-stage.is-pan-ready .editor-brush-cursor,
.editor-canvas-stage.is-panning .editor-brush-cursor { display: none !important; }

/* Stage-level pan affordances */
.editor-canvas-stage.is-pan-ready { cursor: grab; }
.editor-canvas-stage.is-panning   { cursor: grabbing; }
.editor-canvas-stage.is-pan-ready .editor-canvas { cursor: grab; }
.editor-canvas-stage.is-panning .editor-canvas   { cursor: grabbing; }

/* Floating zoom cluster — bottom-right of the canvas stage */
.editor-zoom-controls {
  position: absolute;
  right: 16px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: #ffffff;
  border: 1px solid rgba(60, 24, 0, 0.06);
  border-radius: 12px;
  box-shadow:
    0 2px 6px rgba(60, 24, 0, 0.08),
    0 8px 24px rgba(60, 24, 0, 0.12);
  z-index: 6;
  animation: editorZoomIn 360ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: 480ms;
}
@keyframes editorZoomIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.editor-zoom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #5c4733;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 100ms ease;
}
.editor-zoom-btn:hover:not(:disabled) {
  background: rgba(244, 122, 32, 0.10);
  color: var(--ed-accent-deep);
}
.editor-zoom-btn:active { transform: scale(0.92); }
.editor-zoom-pill {
  min-width: 56px;
  padding: 0 10px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #1f1611;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 160ms ease;
}
.editor-zoom-pill:hover { background: rgba(60, 24, 0, 0.05); }
.editor-zoom-fit { margin-left: 4px; border-left: 1px solid rgba(60, 24, 0, 0.06); border-radius: 0 8px 8px 0; padding-left: 6px; }

/* ── Zoom + pan ──────────────────────────────────────────────────── */
.editor-canvas-viewport {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  will-change: transform;
  pointer-events: none; /* clicks go through to canvas */
}
.editor-canvas-viewport > .editor-canvas { pointer-events: auto; }

/* When zoomed in past 2x, render pixels crisp so users can see them */
.editor-canvas--pixelated {
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Space-held → grab cursor on the stage; mid-pan → grabbing */
.editor-canvas-stage.is-pan-ready { cursor: grab; }
.editor-canvas-stage.is-pan-ready .editor-canvas { cursor: grab; }
.editor-canvas-stage.is-panning,
.editor-canvas-stage.is-panning .editor-canvas { cursor: grabbing !important; }

/* Floating zoom controls — bottom-right of the canvas stage */
.editor-zoom-controls {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(60, 24, 0, 0.06);
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(60, 24, 0, 0.08),
    0 6px 22px rgba(60, 24, 0, 0.14);
  z-index: 8;
  animation: editorZoomIn 320ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: 360ms;
}
@keyframes editorZoomIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.editor-zoom-btn,
.editor-zoom-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border: 0;
  background: transparent;
  color: #5c4733;
  cursor: pointer;
  border-radius: 8px;
  transition: background 160ms ease, color 160ms ease, transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.editor-zoom-btn { width: 32px; padding: 0; }
.editor-zoom-pill {
  min-width: 60px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: #1f1611;
}
.editor-zoom-btn:hover,
.editor-zoom-pill:hover {
  background: rgba(244, 122, 32, 0.10);
  color: var(--ed-accent-deep);
}
.editor-zoom-btn:active,
.editor-zoom-pill:active { transform: scale(0.92); }
.editor-zoom-fit {
  margin-left: 2px;
  border-left: 1px solid rgba(60, 24, 0, 0.08);
  border-radius: 0 8px 8px 0;
  padding-left: 4px;
}

/* Implicit pan affordance — when zoomed in with no tool active, the
   cursor reads as grab to invite click-drag panning. */
.editor-canvas-stage.is-grabbable { cursor: grab; }
.editor-canvas-stage.is-grabbable .editor-canvas { cursor: grab; }
.editor-canvas-stage.is-grabbable.is-panning,
.editor-canvas-stage.is-grabbable.is-panning .editor-canvas { cursor: grabbing !important; }

/* Implicit grab cursor — when zoomed in and no tool is active, anywhere
   on the stage shows a grab cursor inviting the user to drag-pan. */
.editor-canvas-stage.is-grabbable,
.editor-canvas-stage.is-grabbable .editor-canvas {
  cursor: grab;
}
.editor-canvas-stage.is-grabbable.is-panning,
.editor-canvas-stage.is-grabbable.is-panning .editor-canvas {
  cursor: grabbing !important;
}

/* Crop center crosshair — always-on horizontal + vertical centerline so
   the user can see the center of the crop rect at a glance. Lighter than
   the thirds gridlines (which only show during drag). */
.editor-crop-center {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.editor-crop-center span {
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.3);
}
.editor-crop-center span:nth-child(1) {
  left: 50%; top: 0; bottom: 0; width: 1px;
}
.editor-crop-center span:nth-child(2) {
  top: 50%; left: 0; right: 0; height: 1px;
}
/* Center dot */
.editor-crop-rect::before,
.editor-crop-rect::after { } /* placeholder so the next rule doesn't bleed */
.editor-crop-center::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(31, 22, 17, 0.7);
}

/* Crop center crosshair — shows during drag alongside rule-of-thirds so
   users can keep things centered. Inherits opacity timing from .is-dragging. */
.editor-crop-center {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease;
}
.editor-crop-rect.is-dragging .editor-crop-center { opacity: 1; }
.editor-crop-center span {
  position: absolute;
  background: rgba(244, 122, 32, 0.75);
}
.editor-crop-center span:nth-child(1) {
  /* vertical center line */
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25);
}
.editor-crop-center span:nth-child(2) {
  /* horizontal center line */
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  margin-top: -0.5px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25);
}


/* ─── Editor: Text tool (Canva-style) ──────────────────────────────────
   Overlay layer rides inside the editor viewport so it shares the
   zoom/pan transform with the canvas. Each text box is a contenteditable
   div positioned in canvas-pixel coords. On tool deactivate, every box
   rasterizes onto the working canvas in one undo step. */
.text-tool-layer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  /* Parent viewport sets pointer-events: none so design-canvas clicks
     pass through; re-enable here so the text layer + its boxes get
     mousedown/click events. */
  pointer-events: auto;
}
.text-tool-box { pointer-events: auto; }
.text-tool-box {
  position: absolute;
  min-width: 60px;
  padding: 6px 10px;
  border: 1.5px dashed transparent;
  border-radius: 4px;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  /* Default cursor when neither selected nor editing — pointer signals
     it's interactive. Switches to `move` when selected, `text` when
     editing (overrides below). */
  cursor: pointer;
  user-select: none;
  line-height: 1.15;
  transform-origin: top left;
  transition: border-color 0.1s, box-shadow 0.1s;
}
.text-tool-box:hover { border-color: color-mix(in srgb, var(--brand, #ef7d2b) 50%, transparent); }
.text-tool-box.is-selected {
  border-color: var(--brand);
  border-style: solid;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand, #ef7d2b) 25%, transparent),
              0 0 0 6px color-mix(in srgb, var(--brand, #ef7d2b) 8%, transparent);
  cursor: move;
}
/* When dragging, lock the move cursor + bump z-index above siblings. */
.text-tool-box.is-dragging { cursor: move; z-index: 10; opacity: 0.92; }
/* When actively editing, switch to text cursor and let the contenteditable
   handle selection / caret placement. */
.text-tool-box.is-editing {
  cursor: text;
  user-select: text;
}
.text-tool-box.is-editing.is-selected {
  /* Subtle visual difference between selected (drag-ready) and editing
     (caret-active) — editing gets a softer, no-glow border. */
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand, #ef7d2b) 45%, transparent);
}

.text-tool {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  width: 100%;
  padding: 4px 2px;
}
.text-tool::-webkit-scrollbar { height: 6px; }
.text-tool::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

.text-tool-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: var(--brand);
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, transform 0.1s;
  white-space: nowrap;
  flex-shrink: 0;
}
.text-tool-add:hover { background: var(--brand-deep); }
.text-tool-add:active { transform: scale(0.97); }
.text-tool-add-icon { font-size: 16px; line-height: 1; font-weight: 400; margin-top: -1px; }

.text-tool-sep {
  flex-shrink: 0;
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 2px;
}

.text-tool-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.text-tool-font {
  height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0 28px 0 12px;
  font-size: 13px;
  font-weight: 500;
  background: white
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round'><path d='M2.5 4l2.5 2.5L7.5 4'/></svg>")
    no-repeat right 10px center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  min-width: 160px;
  color: var(--text);
}
.text-tool-font:hover { border-color: var(--brand); }

.text-tool-size {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: white;
  overflow: hidden;
  height: 30px;
  flex-shrink: 0;
}
.text-tool-step {
  width: 28px;
  height: 30px;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s;
}
.text-tool-step:hover { background: var(--bg-soft); }
.text-tool-size-input {
  width: 48px;
  height: 30px;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: white;
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  color: var(--text);
  outline: none;
  -moz-appearance: textfield;
}
.text-tool-size-input::-webkit-outer-spin-button,
.text-tool-size-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.text-tool-swatches {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.text-tool-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--sw, white);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform 0.1s, box-shadow 0.12s;
}
.text-tool-swatch:hover { transform: scale(1.12); }
.text-tool-swatch.is-active {
  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--brand);
  border-color: transparent;
}
.text-tool-swatch-custom {
  background:
    conic-gradient(from 0deg, #e5484d, #f76808, #ffb224, #46a758, #0091ff, #3e63dd, #8e4ec6, #e93d82, #e5484d);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.text-tool-swatch-custom input[type="color"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  border: none;
  background: transparent;
}

.text-tool-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: white;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.text-tool-btn:hover {
  background: var(--bg-soft);
  border-color: var(--brand-border);
}
.text-tool-btn.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}

.text-tool-style { display: inline-flex; gap: 4px; }
.text-tool-align {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
}
.text-tool-align .text-tool-btn {
  border: none;
  border-radius: 0;
  width: 30px;
  height: 30px;
}
.text-tool-align .text-tool-btn + .text-tool-btn {
  border-left: 1px solid var(--border);
}

.text-tool-spacer { flex: 1; min-width: 4px; }

.text-tool-icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: white;
  color: var(--text-soft);
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.text-tool-icon-btn:hover:not(:disabled) {
  background: #fff1f0;
  border-color: #f3b8b3;
  color: var(--bad);
}
.text-tool-icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Corner resize handles — visible only when the box is SELECTED (not
   editing). Each handle is a small white square with brand border that
   sits half-on/half-off the corner. Mousedown on a handle starts a
   uniform-scale resize via the diagonal-distance algorithm in text.js. */
.text-tool-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: white;
  border: 1.5px solid var(--brand);
  border-radius: 3px;
  display: none;
  z-index: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: transform 0.08s ease, box-shadow 0.12s ease;
}
.text-tool-handle:hover {
  transform: scale(1.2);
  box-shadow: 0 2px 6px rgba(239, 125, 43, 0.35);
}
/* Side handles (e/w) read as "stretch" affordance — wider rectangles
   instead of squares, matching the Canva visual cue. */
.text-tool-handle-e,
.text-tool-handle-w {
  width: 6px;
  height: 20px;
  border-radius: 3px;
}
.text-tool-handle-e:hover,
.text-tool-handle-w:hover {
  transform: scaleY(1.1);
}
.text-tool-box.is-selected .text-tool-handle { display: block; }
.text-tool-box.is-editing .text-tool-handle { display: none; }
.text-tool-handle-nw { top: -5px; left: -5px; cursor: nwse-resize; }
.text-tool-handle-ne { top: -5px; right: -5px; cursor: nesw-resize; }
.text-tool-handle-sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.text-tool-handle-se { bottom: -5px; right: -5px; cursor: nwse-resize; }
.text-tool-box.is-resizing { user-select: none; }

/* Subbar is a bottom-centered floating pill (canonical pattern, see
   the rule near line 15328). Older versions of this stanza stretched
   it across the top of the canvas-stage — that left `top/left/right`
   values lying around that conflicted with the floating layout and
   produced the "subbar is behind everything" bug. The new rules only
   keep `.editor-canvas-stage { position: relative }` (needed so the
   subbar's `position: absolute` resolves against the stage) and the
   `[hidden]` toggle; the rest is owned by the floating-pill rule. */
.editor-canvas-stage { position: relative; }
.editor-subbar[hidden] { display: none; }

/* Modal scroll containment — wheel inside the popover doesn't leak to
   the page underneath. */
.modal.modal-editor-mode { overscroll-behavior: contain; }
.editor-shell, .editor-canvas-stage { overscroll-behavior: contain; }

/* Custom font picker — a button that shows the current font in its OWN
   face + a popover listing fonts rendered in their faces. Replaces the
   native <select> because Chrome ignores font-family on <option>. */
.text-tool-font-picker {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.text-tool-font-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 28px 0 12px;
  background: white
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round'><path d='M2.5 4l2.5 2.5L7.5 4'/></svg>")
    no-repeat right 10px center;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  min-width: 170px;
  text-align: left;
  color: var(--text);
}
.text-tool-font-trigger:hover { border-color: var(--brand); }
.text-tool-font-pop {
  position: absolute;
  top: 36px;
  left: 0;
  width: 280px;
  max-height: 360px;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 17, 26, 0.12);
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.text-tool-font-pop[hidden] { display: none; }
.text-tool-font-search {
  margin: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.text-tool-font-search:focus { border-color: var(--brand); }
.text-tool-font-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 4px 8px;
}
.text-tool-font-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 10px 12px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 6px;
  color: var(--text);
}
.text-tool-font-item:hover { background: var(--bg-soft); }
.text-tool-font-item.is-active { background: var(--brand-soft); color: var(--brand-deep); }

/* Transparency slider — alpha control for selected text. */
.text-tool-opacity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.text-tool-opacity input[type="range"] {
  width: 80px;
  accent-color: var(--brand);
}
.text-tool-opacity-val {
  font-size: 11px;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  text-align: right;
}

.text-tool-handle-e { top: 50%; right: -5px; margin-top: -10px; cursor: ew-resize; }
.text-tool-handle-w { top: 50%; left: -5px; margin-top: -10px; cursor: ew-resize; }

.text-tool-font-section {
  padding: 8px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.text-tool-style-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 12px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 6px;
  color: var(--text);
}
.text-tool-style-item:hover { background: var(--bg-soft); }
.text-tool-font-empty {
  padding: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
}

.text-tool-font-section {
  padding: 8px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.text-tool-style-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 12px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 6px;
  color: var(--text);
}
.text-tool-style-item:hover { background: var(--bg-soft); }
.text-tool-font-empty {
  padding: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
}

.text-tool-font-section {
  padding: 8px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.text-tool-style-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 12px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 6px;
  color: var(--text);
}
.text-tool-style-item:hover { background: var(--bg-soft); }
.text-tool-font-empty {
  padding: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
}

/* ─── Side panel layout (Canva-style) ─────────────────────────────────
   The editor body is a horizontal row: the subbar becomes a fixed-width
   left side panel, the canvas stage takes the rest. Replaces the floating
   top subbar that got cut off with too many controls. */
.editor-body {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
  position: relative;
}
.editor-side-panel {
  width: 320px;
  flex-shrink: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 16px;
  border-right: 1px solid var(--border, #ececec);
  border-bottom: none;
  background: #fff;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Override the previous min-height: 60px from .editor-subbar so the
     panel can fill the full height of the body. */
  min-height: 0 !important;
  animation: none;
}
.editor-side-panel[hidden] { display: none; }
.editor-canvas-stage {
  flex: 1;
  min-width: 0;
  /* Cancel the float-subbar padding-top from earlier. */
  padding-top: 0;
}
/* Cancel the absolute-position subbar overlay so the side panel sits
   in the flex row normally. */
.editor-canvas-stage:has(.editor-subbar:not([hidden])) {
  padding-top: 0;
}
/* Legacy "force the subbar back to in-flow" override removed — it
   pinned z-index to auto, which dropped the floating subbar pill
   behind the Edit popover. The canonical floating-pill rule near
   line 15328 now owns positioning + stacking entirely. */

/* Text tool in the side panel — stack controls vertically and let
   horizontal flex rows wrap inside. */
.editor-side-panel .text-tool {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  overflow: visible;
}
.editor-side-panel .text-tool-add {
  width: 100%;
  justify-content: center;
  height: 40px;
  font-size: 14px;
}
.editor-side-panel .text-tool-font-picker { width: 100%; }
.editor-side-panel .text-tool-font-trigger {
  width: 100%;
  min-width: 0;
  height: 38px;
}
.editor-side-panel .text-tool-font-pop {
  width: 100%;
  max-height: 280px;
}
.editor-side-panel .text-tool-size {
  width: 100%;
}
.editor-side-panel .text-tool-size-input {
  flex: 1;
  width: auto;
}
.editor-side-panel .text-tool-swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  width: 100%;
}
.editor-side-panel .text-tool-swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
}
.editor-side-panel .text-tool-sep {
  width: 100%;
  height: 1px;
  background: var(--border, #ececec);
  margin: 2px 0;
}
.editor-side-panel .text-tool-align {
  width: 100%;
  display: flex;
}
.editor-side-panel .text-tool-align .text-tool-btn { flex: 1; }
.editor-side-panel .text-tool-opacity {
  width: 100%;
  justify-content: space-between;
}
.editor-side-panel .text-tool-opacity input[type="range"] { flex: 1; width: auto; }
.editor-side-panel .text-tool-spacer { display: none; }
.editor-side-panel .text-tool-trash {
  width: 100%;
  height: 40px;
}

/* Other tools (adjust, crop, etc.) keep their existing horizontal flex
   but wrap inside the narrower panel. */
.editor-side-panel[data-tool="adjust"],
.editor-side-panel[data-tool="crop"],
.editor-side-panel[data-tool="rotate"],
.editor-side-panel[data-tool="eraser"],
.editor-side-panel[data-tool="flip"] {
  flex-wrap: wrap;
}

/* ─── Position tool ───────────────────────────────────────────────────
   Drag-to-move the entire bitmap inside the canvas frame. The 3x3
   alignment grid mirrors Canva's "align to canvas" widget — each cell
   anchors the content bbox to one of nine canvas positions. */
.editor-side-panel[data-tool="position"] {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.editor-side-panel[data-tool="position"] .editor-side-panel-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.editor-side-panel[data-tool="position"] .editor-subbar-chiprow {
  width: 100%;
  display: flex;
  gap: 6px;
}
.editor-side-panel[data-tool="position"] .editor-subbar-chiprow .editor-chip {
  flex: 1;
  justify-content: center;
}

.position-align-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 4px;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 140px;
  padding: 4px;
  border: 1px solid var(--ed-border, #ececec);
  border-radius: 10px;
  background: var(--ed-bg-soft, #faf6f0);
}
.position-align-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--ed-border, #ececec);
  border-radius: 6px;
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 140ms var(--ed-spring, ease);
}
.position-align-cell:hover {
  background: #fffaf2;
  border-color: var(--ed-accent, #ef7d2b);
  transform: translateY(-1px);
}
.position-align-cell:active {
  transform: translateY(0);
}
.position-align-dot {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--ed-text, #1a130e);
  position: absolute;
}
.position-align-dot[data-h="left"]   { left: 4px; }
.position-align-dot[data-h="center"] { left: 50%; transform: translateX(-50%); }
.position-align-dot[data-h="right"]  { right: 4px; }
.position-align-dot[data-v="top"]    { top: 4px; }
.position-align-dot[data-v="center"] { top: 50%; }
.position-align-dot[data-v="bottom"] { bottom: 4px; }
.position-align-dot[data-h="center"][data-v="center"] {
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--ed-accent, #ef7d2b);
}

.position-offset-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
/* Position tool inside the bottom subbar — compact single-row layout so
   nothing wraps awkwardly (the offset Reset button used to wrap UNDER
   the Y input, and the Center "H" chip was getting clipped). */
.editor-subbar[data-tool="position"] {
  gap: 14px;
  padding: 10px 16px;
}
.editor-subbar[data-tool="position"] .editor-subbar-hint {
  font-size: 11.5px;
  max-width: 200px;
  text-align: left;
  line-height: 1.35;
  font-style: normal;
}
.editor-subbar[data-tool="position"] .position-align-grid {
  width: 78px;
  max-width: 78px;
  padding: 3px;
  gap: 3px;
}
.editor-subbar[data-tool="position"] .editor-subbar-chiprow {
  gap: 6px;
}
.editor-subbar[data-tool="position"] .editor-subbar-chiprow .editor-chip {
  padding: 6px 9px;
  font-size: 12.5px;
  white-space: nowrap;
}
.editor-subbar[data-tool="position"] .position-offset-row {
  flex-wrap: nowrap;
  gap: 6px;
}
.editor-subbar[data-tool="position"] .position-offset-field {
  flex: 0 0 auto;
  min-width: 0;
  width: 96px;
  padding: 5px 8px;
}
.editor-subbar[data-tool="position"] .position-offset-field input {
  width: 44px;
}
.editor-subbar[data-tool="position"] [data-position-reset] {
  padding: 6px 9px;
  font-size: 12px;
}
.position-offset-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ed-text-soft, #4a3a30);
  background: #fff;
  border: 1px solid var(--ed-border-strong, #d8cfc4);
  border-radius: 8px;
  padding: 4px 8px;
  flex: 1;
  min-width: 90px;
}
.position-offset-field > span {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ed-text-faint, #8a7a6e);
}
.position-offset-field input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font: inherit;
  color: var(--ed-text, #1a130e);
  text-align: right;
}

/* Detected content bbox indicator — sits on the overlay layer above the
   canvas while the Position tool is active. Faint enough not to obscure
   the design, distinct enough to verify the centering algorithm picked
   the right rectangle. */
.position-bbox-overlay {
  position: absolute;
  pointer-events: none;
  border: 1.5px dashed rgba(244, 122, 32, 0.75);
  border-radius: 3px;
  background: rgba(244, 122, 32, 0.04);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
  transition: left 90ms ease, top 90ms ease, width 90ms ease, height 90ms ease;
}
/* Corner handles — only the handles are interactive (overlay itself is
   pointer-events: none so canvas drag still works on empty space). */
.position-bbox-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 1.5px solid var(--brand, #ef7d2b);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  pointer-events: auto;
  z-index: 2;
  transition: transform 0.08s ease, box-shadow 0.12s ease;
}
.position-bbox-handle:hover {
  transform: scale(1.18);
  box-shadow: 0 2px 8px rgba(239, 125, 43, 0.4);
}
.position-bbox-handle-nw { top: -7px;    left: -7px;    cursor: nwse-resize; }
.position-bbox-handle-ne { top: -7px;    right: -7px;   cursor: nesw-resize; }
.position-bbox-handle-sw { bottom: -7px; left: -7px;    cursor: nesw-resize; }
.position-bbox-handle-se { bottom: -7px; right: -7px;   cursor: nwse-resize; }

/* ─── Editor left rail (Canva-style tool strip) ───────────────────────
   Vertical strip of tool icons on the far left. Each button shows the
   icon big + a small label below. Adjacent .editor-side-panel renders
   the active tool's controls. */
.editor-topbar-slim {
  padding: 8px 16px;
  gap: 12px;
  min-height: 48px;
}
.editor-topbar-spacer { flex: 1; }

.editor-left-rail {
  width: 72px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 10px 6px;
  background: var(--bg-card, #fff);
  border-right: 1px solid var(--border, #ececec);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.editor-left-rail-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.editor-left-rail-divider {
  height: 1px;
  background: var(--border, #ececec);
  margin: 8px 4px;
}
.editor-rail-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text, #111);
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  text-align: center;
}
.editor-rail-btn:hover {
  background: var(--bg-soft, #f4f4f5);
}
.editor-rail-btn[aria-pressed="true"] {
  background: var(--brand-soft, #f3f0ff);
  border-color: color-mix(in srgb, var(--brand, #ef7d2b) 35%, transparent);
  color: var(--brand-deep, #4c1d95);
}
.editor-rail-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
}
.editor-rail-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
}
.editor-rail-btn-oneshot { color: var(--text-soft, #555); }
.editor-rail-btn-oneshot:hover { color: var(--text, #111); }

.editor-topbar-slim {
  padding: 8px 16px;
  gap: 12px;
  min-height: 48px;
}
.editor-topbar-spacer { flex: 1; }
.editor-left-rail {
  width: 72px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 10px 6px;
  background: var(--bg-card, #fff);
  border-right: 1px solid var(--border, #ececec);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.editor-left-rail-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.editor-left-rail-divider {
  height: 1px;
  background: var(--border, #ececec);
  margin: 8px 4px;
}
.editor-rail-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text, #111);
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  text-align: center;
}
.editor-rail-btn:hover { background: var(--bg-soft, #f4f4f5); }
.editor-rail-btn[aria-pressed="true"] {
  background: var(--brand-soft, #f3f0ff);
  border-color: color-mix(in srgb, var(--brand, #ef7d2b) 35%, transparent);
  color: var(--brand-deep, #4c1d95);
}
.editor-rail-icon { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; }
.editor-rail-label { font-size: 10px; font-weight: 500; line-height: 1; }
.editor-rail-btn-oneshot { color: var(--text-soft, #555); }

/* ─── Connections — view toggle + graph view ────────────────────────────── */

.page-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.view-toggle {
  display: inline-flex;
  background: var(--bg-soft, #f4f4f5);
  border: 1px solid var(--border, #ececec);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.view-toggle-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-soft, #666);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.view-toggle-btn:hover { color: var(--text, #111); }
.view-toggle-btn.is-active {
  background: #fff;
  color: var(--text, #111);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.connections-graph {
  position: relative;
  margin-top: 16px;
  background: linear-gradient(180deg, #fafaf7 0%, #f5f3ef 100%);
  border: 1px solid var(--border, #ececec);
  border-radius: 16px;
  overflow: hidden;
  height: calc(100vh - 220px);
  min-height: 520px;
}
.connections-graph[hidden] { display: none; }

#connections-svg {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}
#connections-svg:active { cursor: grabbing; }

.connections-graph::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 55%);
  pointer-events: none;
}

.graph-link {
  stroke: rgba(99, 102, 241, 0.25);
  stroke-opacity: 0.85;
  transition: stroke 0.15s ease, stroke-width 0.15s ease;
}
.graph-link.highlight {
  stroke: var(--brand, #ef7d2b);
  stroke-width: 2.5;
}

.graph-node .graph-circle {
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.12));
}
.graph-node:not(.is-center):hover .graph-circle {
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.18));
}

.graph-node.is-center .graph-halo {
  fill: var(--brand, #ef7d2b);
  opacity: 0.18;
  transform-box: fill-box;
  transform-origin: center;
  animation: center-breathe 7s ease-in-out infinite;
}
@keyframes center-breathe {
  0%, 100% { transform: scale(1); opacity: 0.18; }
  50%      { transform: scale(1.14); opacity: 0.28; }
}

/* The center circle itself pulses subtly on the same beat — slow heart */
.graph-node.is-center .graph-circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: center-core-pulse 7s ease-in-out infinite;
}
@keyframes center-core-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 4px 14px rgba(99,102,241,0.35)); }
  50%      { transform: scale(1.03); filter: drop-shadow(0 6px 22px rgba(99,102,241,0.5)); }
}

/* Connected (real) outer nodes breathe slowly. Core nodes get a marginally
   faster cycle — they're the always-on organs — but still on a blood-pump
   cadence, not a flicker. */
.graph-node:not(.is-center):not(.is-ghost):not(.is-core) .graph-circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: node-alive 6s ease-in-out infinite;
}
.graph-node.is-core .graph-circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: node-alive 5s ease-in-out infinite;
  filter: drop-shadow(0 3px 12px rgba(244, 160, 90, 0.4));
}
.graph-node.is-core:hover .graph-circle {
  filter: drop-shadow(0 6px 20px rgba(244, 160, 90, 0.7));
}
.graph-node.is-core .graph-label { font-weight: 700; }
@keyframes node-alive {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* Ghost nodes barely breathe — they're dormant but not dead */
.graph-node.is-ghost .graph-circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: ghost-breath 9s ease-in-out infinite;
}
@keyframes ghost-breath {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* Particles — already glowing via SVG filter; nothing extra needed but a
   transition smooths the fade between frames. */
.graph-particle { pointer-events: none; }
.graph-particle.is-ghost { mix-blend-mode: multiply; }

/* Radial pulse rings emanate from center — no extra CSS needed; the d3
   transition handles it. Just make sure the layer doesn't intercept clicks. */
.pulses { pointer-events: none; }
.particles { pointer-events: none; }
.graph-pulse-ring { pointer-events: none; }

.graph-label {
  fill: var(--text, #111);
  font-weight: 600;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(250, 250, 247, 0.95);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.graph-sublabel {
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(250, 250, 247, 0.95);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.graph-initial { pointer-events: none; }

.graph-controls {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.graph-controls button {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border, #ececec);
  color: var(--text, #111);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  backdrop-filter: blur(6px);
}
.graph-controls button:hover { background: #fff; }

.graph-legend {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: flex;
  gap: 14px;
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border, #ececec);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 11px;
  color: var(--text-soft, #666);
  backdrop-filter: blur(6px);
}
.legend-row { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Intelligence meter under the page title — gentle gamification */
.graph-intel {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-soft, #666);
  letter-spacing: 0.01em;
}
.graph-intel .intel-num {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  font-weight: 700;
  color: var(--brand, #ef7d2b);
  font-size: 16px;
  padding: 1px 8px;
  background: var(--brand-soft, #f3f0ff);
  border: 1px solid var(--brand-border, #e0e0fb);
  border-radius: 999px;
  margin-right: 4px;
}
.graph-intel em { font-style: normal; color: var(--text-soft, #666); }
.graph-intel strong { color: var(--text, #111); font-weight: 600; }

/* Ghost (un-connected catalog) nodes — dashed, dim, inviting */
.graph-link.is-ghost {
  stroke: rgba(120, 120, 130, 0.22);
  stroke-dasharray: 4 4;
}
.graph-node.is-ghost .graph-circle {
  filter: none;
  transition: filter 0.18s ease;
}
.graph-node.is-ghost:hover .graph-circle {
  filter: drop-shadow(0 4px 14px rgba(99, 102, 241, 0.35));
}
.graph-node.is-ghost:hover .graph-label,
.graph-node.is-ghost:hover .graph-sublabel {
  fill: var(--brand, #ef7d2b);
}
.graph-label.is-ghost-label { fill: var(--text-soft, #666); }

/* When a ghost is clicked, pulse the matching catalog tile */
@keyframes catalog-tile-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.55); }
  60%  { box-shadow: 0 0 0 14px rgba(99, 102, 241, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}
.catalog-tile.pulse {
  animation: catalog-tile-pulse 1.4s ease-out;
  border-color: var(--brand, #ef7d2b) !important;
}

/* ── Canva-style left rail ───────────────────────────────────────────
   Vertical column on the left with every tool visible — icon + label
   so the user can scan the whole set at a glance. Edit tools at top,
   AI magic tools (Remove BG / Upscale / Auto-crop / Eraser) below the
   "AI tools" label with gradient pill treatments. The shine sweep lives
   BEHIND the icon/label via z-index, so hover text stays fully readable
   (no mix-blend-mode washout — that was the previous bug). */
.editor-left-rail.editor-left-rail-canva {
  width: 108px;
  flex-shrink: 0;
  padding: 14px 8px;
  background: linear-gradient(180deg, #fafafb 0%, #f4f4f6 100%);
  border-right: 1px solid rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.editor-left-rail-canva .editor-left-rail-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.editor-left-rail-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8b8b94;
  padding: 14px 10px 6px;
}
.editor-left-rail-canva .editor-rail-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #1a1a1f;
  border-radius: 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  overflow: hidden;
  transition:
    background 0.14s ease,
    transform 0.14s cubic-bezier(.16,1,.3,1),
    box-shadow 0.18s ease,
    border-color 0.14s ease;
}
.editor-left-rail-canva .editor-rail-btn:hover {
  background: rgba(0,0,0,0.05);
  transform: translateX(1px);
}
.editor-left-rail-canva .editor-rail-btn[aria-pressed="true"] {
  background: #111;
  color: #fff;
  border-color: #111;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}
.editor-left-rail-canva .editor-rail-btn[aria-pressed="true"] .editor-rail-icon svg {
  stroke: #fff;
  color: #fff;
}
.editor-left-rail-canva .editor-rail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  position: relative;
  z-index: 2;
}
.editor-left-rail-canva .editor-rail-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
}
.editor-left-rail-canva .editor-rail-label {
  font-feature-settings: "ss01" on;
  text-align: center;
  line-height: 1.2;
  position: relative;
  z-index: 2;
}
.editor-left-rail-canva .editor-rail-btn.is-magic {
  color: #fff;
  background: linear-gradient(135deg, var(--brand, #ef7d2b) 0%, #fbbf24 60%, #f97316 100%);
  background-size: 180% 180%;
  background-position: 0% 50%;
  border-color: transparent;
  box-shadow:
    0 6px 14px rgba(239, 125, 43, 0.22),
    0 2px 4px rgba(251, 191, 36, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.25);
  transition:
    background-position 0.6s cubic-bezier(.16,1,.3,1),
    transform 0.18s cubic-bezier(.16,1,.3,1),
    box-shadow 0.2s ease;
}
.editor-left-rail-canva .editor-rail-btn.is-magic .editor-rail-icon svg {
  stroke: #fff;
}
.editor-left-rail-canva .editor-rail-btn.is-magic:hover {
  background-position: 100% 50%;
  transform: translateX(2px) translateY(-1px);
  box-shadow:
    0 12px 26px rgba(124, 58, 237, 0.30),
    0 4px 10px rgba(236, 72, 153, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.4);
}
.editor-left-rail-canva .editor-rail-btn.is-magic[aria-pressed="true"] {
  background: linear-gradient(135deg, #5b21b6, #be185d, #c2410c);
  color: #fff;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.55),
    0 12px 26px rgba(124, 58, 237, 0.35);
}
.editor-rail-shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255,255,255,0.30) 50%,
    transparent 70%
  );
  background-size: 220% 100%;
  background-position: -120% 0;
  animation: editor-magic-shine 5s ease-in-out infinite;
  border-radius: inherit;
}
.editor-left-rail-canva .editor-rail-btn.is-magic:hover .editor-rail-shine {
  animation-duration: 1.6s;
}
@keyframes editor-magic-shine {
  0%   { background-position: -120% 0; }
  60%  { background-position:  220% 0; }
  100% { background-position:  220% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .editor-rail-shine { animation: none; opacity: 0.18; }
  .editor-left-rail-canva .editor-rail-btn { transition: none; }
}

/* ── Old horizontal top-toolbar — kept inert as no-op fallback ─────── */
.editor-toptools {
  flex-shrink: 0;
  padding: 12px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,248,250,0.96) 100%);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.editor-toptools-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: 0 auto;
}
.editor-toptools-divider {
  width: 1px;
  height: 22px;
  background: rgba(0,0,0,0.08);
  margin: 0 6px;
  flex-shrink: 0;
}
.editor-toptool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1f;
  cursor: pointer;
  transition: background 0.14s ease, transform 0.14s cubic-bezier(.16,1,.3,1), box-shadow 0.18s ease, border-color 0.14s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.editor-toptool:hover {
  background: rgba(0,0,0,0.04);
  transform: translateY(-1px);
}
.editor-toptool:active { transform: translateY(0); }
.editor-toptool[aria-pressed="true"],
.editor-toptool.is-active {
  background: #111;
  color: #fff;
  border-color: #111;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.editor-toptool[aria-pressed="true"] .editor-toptool-icon svg,
.editor-toptool.is-active .editor-toptool-icon svg {
  stroke: #fff;
  color: #fff;
}
.editor-toptool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.editor-toptool-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}
.editor-toptool-label {
  font-feature-settings: "ss01" on;
  letter-spacing: -0.005em;
}
/* Magic-tool pill — AI tools and Eraser. Gradient bg, gentle drift on
   hover, and a shine sweep that runs once on hover. */
.editor-toptool.is-magic,
.editor-toptool-magic {
  color: #fff;
  background: linear-gradient(135deg, var(--brand, #ef7d2b) 0%, #fbbf24 60%, #f97316 100%);
  background-size: 180% 180%;
  background-position: 0% 50%;
  border-color: transparent;
  box-shadow:
    0 6px 14px rgba(239, 125, 43, 0.22),
    0 2px 4px rgba(251, 191, 36, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.25);
  transition:
    background-position 0.6s cubic-bezier(.16,1,.3,1),
    transform 0.18s cubic-bezier(.16,1,.3,1),
    box-shadow 0.2s ease;
}
.editor-toptool.is-magic .editor-toptool-icon svg,
.editor-toptool-magic .editor-toptool-icon svg {
  stroke: #fff;
}
.editor-toptool.is-magic:hover,
.editor-toptool-magic:hover {
  background-position: 100% 50%;
  background-color: transparent;
  transform: translateY(-1.5px) scale(1.02);
  box-shadow:
    0 12px 28px rgba(124, 58, 237, 0.28),
    0 4px 10px rgba(236, 72, 153, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.4);
}
.editor-toptool.is-magic[aria-pressed="true"],
.editor-toptool-magic[aria-pressed="true"] {
  background: linear-gradient(135deg, #5b21b6, #be185d, #c2410c);
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.55),
    0 12px 28px rgba(124, 58, 237, 0.35);
}
/* Animated shine sweep on the magic pills — runs continuously on idle,
   speeds up on hover. The pseudo-element rides on top of the gradient. */
.editor-toptool-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255,255,255,0.45) 50%,
    transparent 70%
  );
  background-size: 220% 100%;
  background-position: -120% 0;
  animation: editor-magic-shine 4.5s ease-in-out infinite;
  mix-blend-mode: overlay;
  border-radius: inherit;
}
.editor-toptool-magic:hover .editor-toptool-shine {
  animation-duration: 1.4s;
}
@keyframes editor-magic-shine {
  0%   { background-position: -120% 0; }
  60%  { background-position:  220% 0; }
  100% { background-position:  220% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .editor-toptool-shine { animation: none; opacity: 0.2; }
  .editor-toptool { transition: none; }
}
/* The slim view-rail (Hand tool only) — narrower than the old full rail. */
.editor-left-rail-slim {
  width: 60px;
  padding: 12px 0;
}
.editor-left-rail-slim .editor-rail-btn {
  width: 48px;
}
@media (max-width: 720px) {
  .editor-toptools {
    padding: 10px 12px;
    overflow-x: auto;
  }
  .editor-toptools-row {
    flex-wrap: nowrap;
  }
}

/* ── Canva-literal editor surface ───────────────────────────────────────
   Mirrors the Canva editor screenshot 1:1 in vocabulary + layout:
     1. Left sidebar — vertical icon+label tabs (Templates / Elements /
        Text / Brand / Canva AI / Uploads / Tools / Projects / Apps)
     2. Floating top contextual pill toolbar — Edit · BG Remover · Eraser
        · color circles · stroke · corner · crop · Flip · transparency ·
        Animate · Position · paint
     3. "Edit image" panel that opens when Edit is pressed — Select area
        pills, Tools grid (card thumbnails with crown / New badges),
        Style Match strip */
.editor-canva-rail {
  width: 80px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #e5e7eb;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.editor-canva-rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  color: #18181b;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background 0.14s ease, transform 0.12s ease;
  position: relative;
}
.editor-canva-rail-item:hover {
  background: #f4f4f5;
}
.editor-canva-rail-item.is-active {
  background: #0b0b0e;
  color: #fff;
}
.editor-canva-rail-item.is-active .editor-canva-rail-icon svg {
  stroke: #fff;
}
.editor-canva-rail-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.editor-canva-rail-icon svg {
  stroke: currentColor;
}
.editor-canva-rail-crown {
  position: absolute;
  top: -4px;
  right: -8px;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.editor-canva-rail-crown svg {
  width: 9px;
  height: 9px;
  fill: #fff;
  stroke: none;
}
.editor-canva-rail-label {
  text-align: center;
  line-height: 1.1;
}

/* ── Top contextual pill toolbar — Canva-compact layout ──────────────────
   Sized to match Canva's floating selection toolbar pixel-for-pixel:
   ~44px tall, tight padding, small radius, light shadow. Visual `|`
   dividers between groups instead of large gaps. The stage's
   padding-top reserves just enough room so the bar doesn't overlap
   the artwork. */
.editor-canva-toptools {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  box-sizing: content-box;
  height: 44px;
  min-height: 44px;
  padding: 0 6px;
  background: #fff;
  border: none;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  z-index: 5;
  max-width: calc(100% - 32px);
  flex-wrap: nowrap;
  overflow: visible;
}
@media (max-width: 899px) {
  .editor-canva-toptools { padding: 4px; }
}
/* Stage padding-top reserves room for the floating toolbar (top: 12px +
   ~44px height = 56px) with a small visual gap below it. The canvas
   centers vertically in the remaining stage so removing the Add-page
   row below gives the canvas back its full original size. */
.editor-canvas-stage { padding-top: 16px; }
/* `[hidden]` defeat: every interactive control class below sets an
   explicit `display:` value, which silently overrides the HTML `hidden`
   attribute. Force `display:none` back when `hidden` is present so the
   parked buttons / separators / sections actually disappear. See
   feedback_html_hidden_attribute.md. */
.editor-canva-tool[hidden],
.editor-canva-tool-sep[hidden],
.editor-obj-icon[hidden],
.editor-obj-sep[hidden],
.editor-canva-edit-section[hidden] {
  display: none !important;
}
.editor-canva-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: #0d1216;
  cursor: pointer;
  transition: background 0.12s ease;
  white-space: nowrap;
  letter-spacing: -0.01em;
  position: relative;
  line-height: 1.2;
  height: 32px;
}
.editor-canva-tool:hover {
  background: #f4f4f7;
}
.editor-canva-tool.is-active {
  background: color-mix(in srgb, var(--brand, #ef7d2b) 14%, #fff);
  color: var(--brand-deep, #9c4612);
}
.editor-canva-tool-edit {
  font-weight: 500;
}
.editor-canva-tool-edit.is-active {
  background: color-mix(in srgb, var(--brand, #ef7d2b) 14%, #fff);
  color: var(--brand-deep, #9c4612);
}
.editor-canva-tool-style {
  padding-left: 10px;
  padding-right: 12px;
  gap: 6px;
}
.editor-canva-style-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #fbbf7a, var(--brand, #ef7d2b));
  color: #fff;
}
.editor-canva-style-mark > svg { width: 14px; height: 14px; stroke: #fff; }
.editor-canva-style-spark {
  position: absolute;
  top: -3px;
  right: -3px;
  display: inline-flex;
  width: 10px;
  height: 10px;
  color: #fbbf24;
}
.editor-canva-style-spark svg { width: 10px; height: 10px; stroke: #fbbf24; stroke-width: 2.4; }
.editor-canva-tool-premium {
  /* Crown stays inline, no premium colors needed since Canva keeps the
     pill text neutral and just adds the gold crown next to the label. */
}
.editor-canva-crown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border-radius: 50%;
  flex-shrink: 0;
}
.editor-canva-crown svg {
  width: 8px;
  height: 8px;
  fill: #fff;
}
.editor-canva-tool-icon { padding: 6px 8px; }
.editor-canva-tool-icon svg { width: 18px; height: 18px; stroke: #0d1216; stroke-width: 1.8; fill: none; }
.editor-canva-tool-sep {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: #d9dee3;
  margin: 0 4px;
  flex-shrink: 0;
}
.editor-canva-tool-sep-tall {
  height: 26px;
  margin: 0 6px;
}
.editor-canva-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  box-shadow: none;
  background: var(--c, #1f2740);
  cursor: pointer;
  transition: transform 0.12s ease;
  flex-shrink: 0;
  margin: 0 2px;
}
.editor-canva-swatch:hover {
  transform: scale(1.10);
}
/* When a recolor swatch is the active picker, ring it in indigo so the
   user knows the next canvas click will recolor using THIS color. */
.editor-canva-swatch.is-active {
  box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px var(--brand, #ef7d2b);
  transform: scale(1.12);
}

/* Custom-color "+" picker — looks like a swatch, but is a <label>
   wrapping a hidden native <input type="color"> for cross-browser
   native picker UI. */
.editor-canva-swatch-picker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.editor-canva-swatch-picker .editor-canva-swatch-plus {
  position: relative;
  z-index: 1;
  pointer-events: none;
  /* Auto-contrast: white "+" sits over dark colors, dark "+" otherwise.
     Subtle text-shadow ensures legibility against any chosen color. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.editor-canva-swatch-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}

/* Crosshair cursor while click-to-recolor is armed — covers the whole
   canvas frame so users get the affordance even before they hover the
   visible canvas itself. */
.editor-frame.is-recoloring,
[data-editor-frame].is-recoloring {
  cursor: crosshair;
}

/* ── Edit image panel — Canva's "Edit image" sheet ─────────────────── */
.editor-canva-edit-panel {
  position: absolute;
  top: 78px;
  left: 16px;
  width: 360px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 100px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.06);
  z-index: 4;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: edit-panel-in 0.22s cubic-bezier(.16,1,.3,1);
}
.editor-canva-edit-panel[hidden] { display: none; }
@keyframes edit-panel-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.editor-canva-edit-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 18px 20px 10px;
}
.editor-canva-edit-head h3 {
  margin: 0;
  flex: 1;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0d1216;
}
.editor-canva-edit-head[data-view="tool"] h3 {
  font-size: 15px;
}
.editor-canva-edit-back {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  cursor: pointer;
  color: #18181b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -4px;
  transition: background 0.12s ease;
}
.editor-canva-edit-back[hidden] { display: none; }
.editor-canva-edit-back:hover { background: #f4f4f5; }
.editor-canva-edit-close {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  cursor: pointer;
  color: #71717a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.editor-canva-edit-close:hover {
  background: #f4f4f5;
  color: #18181b;
}
/* Inline tool view inside the popover — used by Adjust so it doesn't open
   a side subbar that squeezes the canvas. */
.editor-canva-edit-toolbody {
  padding: 4px 18px 18px;
  /* No scroll — eraser/brush controls are small and should never need
     a scrollbar inside the panel. If a future inline tool grows past
     the panel height, switch back to overflow-y: auto and consider
     trimming that tool's UI instead. */
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.editor-canva-edit-toolbody[hidden] { display: none; }
.editor-canva-edit-toolbody .editor-subbar-actions {
  margin-top: 4px;
}
/* Area context strip — sits under the All/Click/Brush pills and shows a
   mode-specific hint or controls (e.g. brush size). */
.editor-canva-area-context {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid #eef2f6;
  border-radius: 10px;
}
.editor-canva-area-context[hidden] { display: none; }
.editor-canva-area-hint {
  margin: 0;
  font-size: 12.5px;
  color: #4b5563;
  letter-spacing: -0.005em;
}
.editor-canva-area-loading {
  padding: 6px 0;
  font-size: 12.5px;
  color: var(--text-soft);
  text-align: center;
}
/* ── Inline Text panel — Adjust-style sectioned layout ─────────────────
   When Text mounts inside the Edit panel's toolbody, it emits
   `.text-tool--inline` (a stacked, sectioned UI) instead of the legacy
   horizontal rail. Each section is a labeled row with a full-width
   control — labels are left-aligned, controls span the panel, heights
   are standardized (36px controls, 40px CTA) for a gridded feel. */
.text-tool--inline {
  /* Override legacy `.text-tool { align-items:center; overflow-x:auto }` */
  align-items: stretch;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow: visible;
  gap: 18px;
  padding: 4px 0 4px;
}
.text-tool-inline-add {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 0 16px;
  background: var(--brand, #ef7d2b);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.12s, transform 0.06s, box-shadow 0.12s;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03), 0 2px 6px rgba(239, 125, 43, 0.18);
}
.text-tool-inline-add:hover {
  background: var(--brand-deep, #9c4612);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03), 0 4px 10px rgba(239, 125, 43, 0.24);
}
.text-tool-inline-add:active { transform: translateY(1px); }
.text-tool-inline-add .text-tool-add-icon {
  font-size: 15px;
  line-height: 1;
  font-weight: 400;
  opacity: 0.95;
}
.text-tool-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.text-tool-section-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-height: 14px;
}
.text-tool-section-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-align: left;
}
.text-tool-section-readout {
  font-size: 11.5px;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
/* Font picker — full-width trigger button rendered in the font's own face. */
.text-tool-font-picker--inline {
  position: relative;
  width: 100%;
}
.text-tool-font-trigger--inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
  text-align: left;
}
.text-tool-font-trigger--inline:hover {
  border-color: var(--text-soft);
}
.text-tool-font-trigger--inline:focus-visible {
  outline: none;
  border-color: var(--brand, #ef7d2b);
  box-shadow: 0 0 0 3px rgba(239, 125, 43, 0.16);
}
.text-tool-font-trigger--inline .text-tool-font-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-tool-font-trigger-caret {
  font-size: 10px;
  color: var(--text-soft);
  flex-shrink: 0;
}
.text-tool-font-pop--inline {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  padding: 8px;
  max-height: 320px;
  display: flex;
  flex-direction: column;
}
/* Size stepper row — full-width pill with -/+ flanking a number input. */
.text-tool-size--inline {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  height: 36px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.text-tool-size--inline:focus-within {
  border-color: var(--brand, #ef7d2b);
  box-shadow: 0 0 0 3px rgba(239, 125, 43, 0.16);
}
.text-tool-size--inline .text-tool-step {
  background: transparent;
  border: none;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-soft);
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
  padding: 0;
}
.text-tool-size--inline .text-tool-step:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text);
}
.text-tool-size--inline .text-tool-size-input {
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  outline: none;
  -moz-appearance: textfield;
  padding: 0;
}
.text-tool-size--inline .text-tool-size-input::-webkit-inner-spin-button,
.text-tool-size--inline .text-tool-size-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Segmented control — style (B/I/U/S) and align (L/C/R) share the same
   pill-of-pills look. Buttons have no internal divider; active state
   uses a soft inset chip to read as "selected" without screaming. */
.text-tool-segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: 36px;
  background: var(--bg-soft, #f6f7f9);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.text-tool-segmented .text-tool-btn {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 0;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
  min-width: 0;
}
.text-tool-segmented .text-tool-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}
.text-tool-segmented .text-tool-btn.is-active {
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
/* Color swatches — auto-fill grid so the row reads even with brand-kit
   colors added at runtime. Larger swatches (~32px) for click comfort. */
.text-tool-swatches--inline {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  gap: 8px;
}
.text-tool-swatches--inline .text-tool-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border);
  background: var(--sw);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.12s;
  padding: 0;
}
.text-tool-swatches--inline .text-tool-swatch:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 1px var(--text-soft), 0 2px 6px rgba(0, 0, 0, 0.1);
}
.text-tool-swatches--inline .text-tool-swatch.is-active {
  box-shadow: 0 0 0 2px var(--brand, #ef7d2b);
  transform: scale(1.04);
}
.text-tool-swatches--inline .text-tool-swatch-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}
.text-tool-swatches--inline .text-tool-swatch-custom {
  background: conic-gradient(
    from 0deg,
    #ef4444, #f59e0b, #eab308, #22c55e,
    #06b6d4, #3b82f6, #a855f7, #ec4899, #ef4444
  );
  position: relative;
  overflow: hidden;
}
.text-tool-swatches--inline .text-tool-swatch-custom::after {
  content: "";
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
}
.text-tool-swatches--inline .text-tool-swatch-custom input[type="color"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
/* Opacity slider — full width inside the section. The shared
   `.editor-range` class handles thumb/track styling. */
.text-tool--inline .editor-range {
  width: 100%;
  margin: 4px 0 0;
}
/* Delete button — hidden when disabled (no permanent dead button in the
   panel), tinted danger only when there's a selected box to delete. */
.text-tool-inline-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 36px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.text-tool-inline-delete[disabled] { display: none; }
.text-tool-inline-delete:not(:disabled):hover {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}
/* When the Brush pill mounts the eraser UI inline into this strip,
   tighten the legacy eraser subbar spacing so its Mode toggle, sliders,
   and instruction text fit cleanly in a compact context strip — same
   visual weight as the Click pill's tolerance row. */
.editor-canva-area-context > .editor-eraser-mode,
.editor-canva-area-context > .editor-adjust-grid {
  margin: 0;
}
.editor-canva-area-context .editor-subbar-actions {
  margin-top: 6px;
}
.editor-canva-brush-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}
.editor-canva-brush-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #18181b;
}
.editor-canva-brush-readout {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: #6b7280;
  min-width: 26px;
  text-align: right;
}
/* Cursor cues for the canvas frame based on the active select-area mode.
   Keep it minimal — just a cursor change. No overlay, no pulse, no chip.
   The user clicks → the canvas reacts. */
.editor-shell[data-edit-area="click"] [data-editor-frame] {
  cursor: crosshair;
}
/* Brush mode: hide the OS cursor inside the frame and let the JS-driven
   follower circle do the affordance work. The circle is sized via
   --canva-brush-size which the slider keeps live. */
.editor-shell[data-edit-area="brush"] [data-editor-frame] {
  cursor: none;
}
.canva-brush-cursor {
  position: fixed;
  top: 0; left: 0;
  width: var(--canva-brush-size, 40px);
  height: var(--canva-brush-size, 40px);
  border: 2px solid #ffffff;
  background: transparent;
  border-radius: 50%;
  pointer-events: none;
  transform: translate3d(-9999px, -9999px, 0);
  opacity: 0;
  transition: opacity 80ms ease, background 80ms ease, border-color 80ms ease, transform 0ms;
  /* Was z-index: 50 — got swallowed by the editor modal-back (z-index 100).
     Bumped above every editor surface so the follower is always visible. */
  z-index: 10000;
  /* Thin dark ring outside the white border so the cursor reads on
     light and dark backgrounds alike — same trick Canva uses. */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.canva-brush-cursor.is-visible { opacity: 1; }
.canva-brush-cursor.is-pressed {
  background: rgba(255, 255, 255, 0.18);
  border-color: #ffffff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}
[data-editor-frame] { position: relative; }

/* ── Adjust inline render — keep buttons inside the popover ────────────
   When the Adjust tool renders inside the Edit popover (instead of the
   floating subbar), the `.editor-subbar-actions--vertical` block was
   inheriting the subbar's flex-row sizing and overflowing the popover
   horizontally. Force a clean vertical column stack pinned to the bottom
   of the tool body. */
[data-canva-edit-toolbody] .editor-subbar-actions,
[data-canva-edit-toolbody] .editor-subbar-actions--vertical {
  width: 100%;
  min-width: 0;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-canva-edit-toolbody] .editor-subbar-actions button,
[data-canva-edit-toolbody] .editor-subbar-actions--vertical button {
  width: 100%;
  justify-content: center;
}
[data-canva-edit-toolbody] .editor-adjust-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.editor-canva-edit-body {
  padding: 6px 20px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* `display: flex` above wins over [hidden]'s `display: none` — without
   this override, the home view stays visible while an inline tool
   (Adjust / Eraser) renders in the toolbody slot, producing the
   overlap that "Eraser is broken UI" was hitting. */
.editor-canva-edit-body[hidden] { display: none !important; }
.editor-canva-edit-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* When a section's "See all" expands, drop the max-height cap on the
   inner grid so every tool / style thumbnail shows. */
.editor-canva-edit-section.is-expanded .editor-canva-tool-grid,
.editor-canva-edit-section.is-expanded .editor-canva-style-strip {
  max-height: none;
}
/* Visual treatment for top-toolbar buttons that aren't wired yet. They
   stay clickable (the toast explains the state) but fade so the user
   doesn't expect them to do anything live. */
.editor-canva-tool.is-coming-soon {
  opacity: 0.6;
}
.editor-canva-tool.is-coming-soon:hover {
  opacity: 0.9;
}
.editor-canva-edit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.editor-canva-edit-h {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0d1216;
  letter-spacing: -0.005em;
}
.editor-canva-edit-seeall {
  font-size: 13px;
  color: #0d1216;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: -0.005em;
}
.editor-canva-edit-seeall:hover { text-decoration: underline; }

/* Select-area pills (All / Click / Brush / Foreground / Background / Text) */
.editor-canva-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* When the pill row exceeds the panel width, swap to a horizontal scroll
   strip with hidden scrollbar (matches Canva's overflow behavior). */
.editor-canva-pills--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
  margin: 0 -4px;
  padding-left: 4px;
  padding-right: 36px;          /* leave room for the right chevron */
  scroll-behavior: smooth;
}
.editor-canva-pills--scroll::-webkit-scrollbar { display: none; }
.editor-canva-pills--scroll .editor-canva-pill { flex: 0 0 auto; }

/* Wrap around the scroll row so we can pin the "show more" chevron to
   the right edge AND fade the pills out toward the chevron so it reads
   as scrollable. */
.editor-canva-pills-wrap {
  position: relative;
}
.editor-canva-pills-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 28px;
  width: 24px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff 70%);
}
.editor-canva-pills-next {
  position: absolute;
  top: 50%;
  right: -2px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px #dadde2, 0 2px 6px rgba(0,0,0,0.06);
  color: #0d1216;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.editor-canva-pills-next:hover {
  background: #f4f4f7;
  box-shadow: 0 0 0 1px #c5c8ce, 0 3px 8px rgba(0,0,0,0.08);
}
.editor-canva-pills-next svg { stroke: currentColor; }
.editor-canva-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid #dadde2;
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #0d1216;
  cursor: pointer;
  transition: all 0.14s ease;
  letter-spacing: -0.005em;
}
.editor-canva-pill:hover {
  background: #f4f4f7;
  border-color: #c5c8ce;
}
.editor-canva-pill.is-active {
  border-color: color-mix(in srgb, var(--brand, #ef7d2b) 60%, transparent);
  background: color-mix(in srgb, var(--brand, #ef7d2b) 10%, #fff);
  color: var(--brand-deep, #9c4612);
}
.editor-canva-pill.is-active .editor-canva-pill-icon {
  color: var(--brand, #ef7d2b);
}
.editor-canva-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.editor-canva-pill-icon svg { stroke: currentColor; }

/* Tools grid — 4 columns of circular cards with ring + crown + badge */
.editor-canva-tool-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 8px;
  padding: 8px 0 2px;
  justify-items: center;
}
.editor-canva-tcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 2px 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #0d1216;
  text-align: center;
  letter-spacing: -0.005em;
  transition: transform 0.14s ease;
  position: relative;
}
.editor-canva-tcard:hover {
  transform: translateY(-1px);
}
.editor-canva-tcard:hover .editor-canva-tcard-thumb {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3.5px var(--brand, #ef7d2b),
    0 10px 26px rgba(239, 125, 43, 0.28),
    0 0 24px rgba(239, 125, 43, 0.18);
  animation: tcardHoverWobble 1.6s ease-in-out infinite;
}
.editor-canva-tcard:hover .editor-canva-tcard-thumb > svg {
  transform: scale(1.06);
}
/* Ambient idle breath — extremely subtle so the panel feels alive
   without anyone consciously noticing motion. The hover wobble takes
   over cleanly because the keyframes start at scale(1). */
@keyframes tcardIdleBreath {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-1px) scale(1.012); }
}
.editor-canva-tcard-thumb { animation: tcardIdleBreath 5.2s ease-in-out infinite; }
.editor-canva-tcard:nth-child(2n)   .editor-canva-tcard-thumb { animation-delay: -1.2s; }
.editor-canva-tcard:nth-child(3n)   .editor-canva-tcard-thumb { animation-delay: -2.4s; }
.editor-canva-tcard:nth-child(4n+1) .editor-canva-tcard-thumb { animation-delay: -3.6s; }
@keyframes tcardHoverWobble {
  0%, 100% { transform: translateY(-1px) rotate(-1.2deg); }
  50%      { transform: translateY(-3px) rotate(1.2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .editor-canva-tcard-thumb,
  .editor-canva-tcard:hover .editor-canva-tcard-thumb,
  .editor-canva-tcard:hover .editor-canva-tcard-thumb > svg {
    animation: none !important;
    transform: none !important;
  }
}
/* Engaged tool — clear ring + label color so the user always sees which
   tool is active. Click the same tool again to disengage (JS sets/clears
   .is-active). Outer ring uses the brand orange so it reads as "live"
   rather than the lavender hover preview. */
.editor-canva-tcard.is-active {
  transform: translateY(-1px);
}
.editor-canva-tcard.is-active .editor-canva-tcard-thumb {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--brand, #ef7d2b),
    0 6px 16px rgba(239, 125, 43, 0.18);
}
.editor-canva-tcard.is-active .editor-canva-tcard-label {
  color: var(--brand-deep, #9c4612);
  font-weight: 700;
}
.editor-canva-tcard-thumb {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  /* The double box-shadow draws the Canva-style "gap + thin ring":
     a 2px white inner ring (creates a gap from the thumbnail color)
     followed by a warm-neutral outer ring. The thumbnail color fill
     comes from the inline background on the element. */
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #f3eee8, 0 2px 6px rgba(0,0,0,0.04);
  transition: box-shadow 0.16s ease;
}
.editor-canva-tcard-thumb > svg {
  display: block;
  /* Mask SVG to circle so big illustrations don't poke past the ring. */
  border-radius: 50%;
  transition: transform 0.2s ease;
  transform-origin: center;
}
/* Transparency popover — anchored under the top-toolbar Transparency pill.
   Compact glass card with a single slider; matches the other floating
   editor popovers (zoom, share). */
.editor-transparency-pop {
  position: absolute;
  width: 240px;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
  padding: 12px 14px;
  z-index: 60;
  animation: editor-tp-pop-in 0.12s ease-out;
}
@keyframes editor-tp-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.editor-transparency-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.editor-transparency-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft, #6b7280);
}
.editor-transparency-readout {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text, #0d1216);
  font-weight: 600;
}
.editor-transparency-slider {
  width: 100%;
  margin: 0 0 6px;
}
.editor-transparency-hint {
  font-size: 11px;
  color: var(--text-soft, #6b7280);
  margin: 0 0 10px;
  letter-spacing: -0.005em;
}
.editor-transparency-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.editor-transparency-cancel,
.editor-transparency-apply {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.editor-transparency-cancel {
  background: transparent;
  border-color: var(--border, #e5e7eb);
  color: var(--text-soft, #6b7280);
}
.editor-transparency-cancel:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text, #0d1216);
}
.editor-transparency-apply {
  background: var(--brand, #ef7d2b);
  color: #fff;
  border-color: var(--brand, #ef7d2b);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 2px 6px rgba(239, 125, 43, 0.18);
}
.editor-transparency-apply:hover {
  background: var(--brand-deep, #9c4612);
  border-color: var(--brand-deep, #9c4612);
}
.editor-canva-tcard-crown {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: 1.5px solid #fff;
  border-radius: 50%;
  z-index: 2;
}
.editor-canva-tcard-crown svg {
  width: 8px;
  height: 8px;
  fill: #fff;
}
.editor-canva-tcard-badge {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand, #ef7d2b);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: capitalize;
  z-index: 2;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.editor-canva-tcard-label {
  line-height: 1.25;
  max-width: 74px;
}

/* Style Match / Filters horizontal strip — square rounded thumbnails
   with label below; scrolls horizontally to expose the rest. */
.editor-canva-style-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0 6px;
  margin: 0 -4px;
  padding-left: 4px;
  padding-right: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.editor-canva-style-strip::-webkit-scrollbar { display: none; }
.editor-canva-style { flex: 0 0 auto; }
.editor-canva-style {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #0d1216;
  letter-spacing: -0.005em;
  flex: 0 0 auto;
  width: 64px;
}
.editor-canva-style-thumb {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: #e5e7eb;
  border: 2px solid transparent;
}
.editor-canva-style.is-active .editor-canva-style-thumb {
  border-color: var(--brand, #ef7d2b);
  box-shadow: 0 0 0 3px var(--brand-soft, #fff4eb);
}
.editor-canva-style-thumb-none {
  background: #fff;
  border: 2px dashed #cbd5e1;
}

/* The canvas stage needs to be position:relative so the floating top
   toolbar + edit panel anchor against it. */
.editor-canvas-stage { position: relative; }

@media (max-width: 880px) {
  .editor-canva-rail {
    width: 60px;
  }
  .editor-canva-rail-label {
    display: none;
  }
  .editor-canva-toptools {
    flex-wrap: wrap;
    max-width: calc(100% - 16px);
  }
  .editor-canva-edit-panel {
    width: calc(100% - 24px);
  }
}

/* ── Canva-literal left-nav rebuilt as the Tools panel ───────────────
   The left rail now BECOMES the Edit-image panel — same header, Select
   area pills, Tools grid (cards with crown/New badge), Style Match strip.
   The floating .editor-canva-edit-panel still exists as a fallback for
   the "Edit" pill but visually the rail does the heavy lifting. */
/* Permanent left rail HIDDEN — the floating "Edit" pill in the top
   contextual toolbar opens the same Edit panel as a popover. Having both
   on screen at once duplicates every control (you'd see All/Click/Brush,
   Tools, Style Match twice). Single entry point now. */
.editor-canva-leftnav {
  display: none !important;
}
.editor-canva-leftnav-head {
  padding: 16px 18px 8px;
  border-bottom: 1px solid transparent;
}
.editor-canva-leftnav-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #18181b;
}
/* Back button shown when a tool (Eraser, etc.) takes over the
   left-nav in-place. Sits above the panel title, clears to the title. */
.editor-canva-leftnav-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 6px;
  padding: 4px 8px 4px 4px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  color: var(--text-soft, #6b6b6b);
  cursor: pointer;
}
.editor-canva-leftnav-back:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text, #111);
}
/* Host element the tool renders into when it replaces the leftnav body.
   Inherits the leftnav body's gap rhythm. */
.editor-canva-leftnav-tool {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.editor-canva-leftnav-body {
  padding: 4px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  flex: 1;
}
/* The Tools grid inside the leftnav needs to be 4 cols at 280px width.
   Override the inline-panel sizing if it gets cramped. */
.editor-canva-leftnav .editor-canva-tool-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 6px;
}
.editor-canva-leftnav .editor-canva-tcard-thumb {
  width: 60px;
  height: 60px;
}
.editor-canva-leftnav .editor-canva-tcard-thumb svg {
  width: 34px;
  height: 34px;
}
.editor-canva-leftnav .editor-canva-style-strip {
  gap: 8px;
}
.editor-canva-leftnav .editor-canva-style-thumb {
  width: 52px;
  height: 52px;
}

@media (max-width: 880px) {
  .editor-canva-leftnav {
    width: 240px;
  }
}

/* ─── EBDC sandbox: per-listing context strip ─────────────────────────────
   Rendered above the compose card on /create when ?etsy_listing_id=<id>
   is present. All sandbox styles are scoped under .ebdc- / #ebdc-. */
#ebdc-context-strip {
  margin: 16px 0;
  padding: 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#ebdc-context-strip.is-collapsed .ebdc-context-body { display: none; }
.ebdc-context-loading,
.ebdc-context-unavailable {
  color: rgba(0, 0, 0, 0.6);
  font-size: 13px;
}
.ebdc-context-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ebdc-context-thumb {
  width: 56px; height: 56px;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 56px;
}
.ebdc-context-title-block { flex: 1 1 auto; min-width: 0; }
.ebdc-context-title {
  font-size: 15px; font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ebdc-context-sub {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  margin-top: 2px;
}
.ebdc-context-shop { font-weight: 500; color: rgba(0, 0, 0, 0.75); }
.ebdc-context-toggle {
  border: none; background: transparent; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 4px 8px;
  color: rgba(0, 0, 0, 0.5);
}
.ebdc-context-toggle:hover { color: #000; }
.ebdc-context-body { margin-top: 14px; }

.ebdc-badge-row {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.ebdc-badge {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 8px;
  background: #f4f4f5;
  font-size: 11px;
  line-height: 1.2;
}
.ebdc-badge-label {
  color: rgba(0, 0, 0, 0.55);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.ebdc-badge-value {
  color: #111;
  font-weight: 700;
  font-size: 13px;
  margin-top: 2px;
}
.ebdc-badge-positive { background: #dcfce7; }
.ebdc-badge-positive .ebdc-badge-value { color: #166534; }
.ebdc-badge-negative { background: #fee2e2; }
.ebdc-badge-negative .ebdc-badge-value { color: #991b1b; }
.ebdc-badge-neutral { background: #f4f4f5; }

.ebdc-spark-row {
  margin-top: 14px;
  display: flex; align-items: center; gap: 12px;
}
.ebdc-spark-label {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.55);
  font-weight: 500;
  width: 70px;
  flex: 0 0 auto;
}
.ebdc-spark-svg { flex: 0 0 auto; }
.ebdc-spark-meta {
  display: flex; gap: 10px;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.55);
}
.ebdc-spark-empty {
  font-size: 11px; color: rgba(0, 0, 0, 0.4);
}

.ebdc-tags-row { margin-top: 14px; }
.ebdc-tags-label {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.55);
  font-weight: 500;
  margin-bottom: 6px;
}
.ebdc-tag-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ebdc-tag-chip {
  padding: 4px 10px;
  border-radius: 9999px;
  background: #eef2ff;
  color: #1e293b;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 100ms ease, transform 80ms ease;
}
.ebdc-tag-chip:hover { background: #e0e7ff; }
.ebdc-tag-chip:active { transform: translateY(1px); }
.ebdc-tag-chip.is-added {
  background: #166534;
  color: #fff;
  cursor: default;
}

.ebdc-shop-row {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.65);
}
.ebdc-shop-name { font-weight: 600; color: #111; }

/* ── Canva-style magic overlay ────────────────────────────────────────
   Pastel gradient mesh that washes over the canvas during any AI op
   (BG Remove, Upscale, Auto-crop, Magic Edit, Magic Layers, BG Generator).
   Mirrors the reference screenshot: lavender → cool blue → mint mesh
   with a slow drift + faint aurora shaft + 14 randomly-placed twinkling
   sparkles. The image underneath bleeds through at ~30-40% opacity so
   the user can tell what's being processed. */
.editor-magic-overlay {
  /* top/left/width/height/border-radius set in JS to match the canvas's
     exact bounding box. Using absolute positioning + explicit metrics
     instead of `inset: 0` so the wash only covers the actual image, not
     the surrounding letterbox/stage. */
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.42s cubic-bezier(.16,1,.3,1);
  z-index: 4;
  overflow: hidden;
}
.editor-magic-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}
/* Layer 1: the soft pastel gradient mesh. Multi-stop conic with a
   filter-blur smooths the seams into a dreamy wash. */
.editor-magic-mesh {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(58% 70% at 22% 22%, rgba(255, 213, 165, 0.88) 0%, transparent 60%),
    radial-gradient(64% 70% at 78% 28%, rgba(254, 215, 170, 0.78) 0%, transparent 60%),
    radial-gradient(60% 60% at 30% 78%, rgba(253, 230, 138, 0.65) 0%, transparent 60%),
    radial-gradient(70% 70% at 78% 78%, rgba(251, 191, 36, 0.55) 0%, transparent 60%),
    linear-gradient(135deg, rgba(255, 222, 184, 0.88), rgba(254, 215, 170, 0.82) 50%, rgba(253, 230, 138, 0.72));
  background-size: 200% 200%;
  background-position: 0% 0%;
  filter: blur(8px) saturate(1.05);
  mix-blend-mode: normal;
  animation: editor-magic-mesh-drift 9s ease-in-out infinite alternate;
}
@keyframes editor-magic-mesh-drift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}
/* Layer 2: the faint vertical aurora shaft — a brighter, slightly
   teal-tinted streak that drifts left↔right. Captures the highlight
   visible in the user's screenshot. */
.editor-magic-aurora {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 28%,
    rgba(255, 255, 255, 0.18) 45%,
    rgba(167, 243, 208, 0.22) 50%,
    rgba(255, 255, 255, 0.18) 55%,
    transparent 72%
  );
  background-size: 220% 100%;
  background-position: -140% 0;
  animation: editor-magic-aurora-sweep 4.5s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes editor-magic-aurora-sweep {
  0%   { background-position: -140% 0; }
  60%  { background-position:  140% 0; }
  100% { background-position:  140% 0; }
}
/* Layer 3: randomly-placed twinkling sparkles. Each starts at a random
   position with a randomized delay so the field never repeats. Pseudo
   draws a 4-point star via two crossed gradients. */
.editor-magic-sparkles {
  position: absolute;
  inset: 0;
}
.editor-magic-sparkle {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 12px;
  height: 12px;
  background:
    radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 60%);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.5);
  animation: editor-magic-twinkle 2.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.editor-magic-sparkle::before,
.editor-magic-sparkle::after {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(transparent 45%, rgba(255,255,255,0.85) 50%, transparent 55%);
  border-radius: inherit;
}
.editor-magic-sparkle::after {
  transform: rotate(90deg);
}
@keyframes editor-magic-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  40%, 60% { opacity: 0.95; transform: scale(1); }
}
/* Caption that floats over the center of the overlay so the user knows
   exactly what magic is happening (Removing background / Upscaling / etc). */
.editor-magic-caption {
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  padding: 8px 18px;
  background: rgba(15, 12, 30, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.18);
}
.editor-magic-caption::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  vertical-align: 1px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand, #ef7d2b), #fbbf24);
  box-shadow: 0 0 8px rgba(239, 125, 43, 0.8);
  animation: editor-magic-caption-pulse 1.4s ease-in-out infinite;
}
@keyframes editor-magic-caption-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .editor-magic-mesh,
  .editor-magic-aurora,
  .editor-magic-sparkle,
  .editor-magic-caption::before { animation: none; }
}

.ebdc-context-footer {
  margin-top: 14px;
  padding-top: 8px;
  font-size: 10.5px;
  color: rgba(0, 0, 0, 0.35);
  letter-spacing: 0.01em;
  text-align: right;
}
.ebdc-context-footer a {
  color: rgba(0, 0, 0, 0.55);
  text-decoration: none;
  font-weight: 600;
}
.ebdc-context-footer a:hover { color: #d97706; text-decoration: underline; }


/* ─── Notification bell ──────────────────────────────────────────────────
   Lives in the slim header next to Plans/Settings/avatar. Matches the
   in-app workspace language (light, flat, brand-honey accent). Each item
   is a 3-column grid: severity dot · title+body · relative time, so the
   panel scans top-down without the title running into the body. */
.notif-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.notif-bell {
  appearance: none;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-soft);
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.notif-bell:hover {
  background: var(--bg-soft);
  border-color: var(--text);
  color: var(--text);
}
.notif-bell:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.notif-dot {
  position: absolute;
  top: 3px; right: 3px;
  width: 9px; height: 9px;
  background: var(--brand);
  border: 2px solid white;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(239, 125, 43, 0.5);
  animation: notif-dot-pulse 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes notif-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 125, 43, 0.45); }
  50%      { box-shadow: 0 0 0 5px rgba(239, 125, 43, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .notif-dot { animation: none; }
}
.notif-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 380px;
  max-height: 480px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.02),
    0 16px 40px -12px rgba(15, 23, 42, 0.18),
    0 4px 12px -4px rgba(15, 23, 42, 0.08);
  z-index: 60;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform-origin: top right;
  animation: notif-pop-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes notif-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .notif-pop { animation: none; }
}
/* Intentionally NOT using display: flex here — the HTML `hidden` attribute
   on this element toggles visibility, and any author CSS that sets
   `display: flex/grid` on `.notif-pop` would beat the attribute's default
   `display: none`, leaving the popover stuck open on page load. Override
   with !important on the hidden state to win against the flex display. */
.notif-pop[hidden] {
  display: none !important;
}
.notif-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}
.notif-mark-all {
  background: transparent;
  border: 0;
  color: var(--text-soft);
  font-family: inherit; font-size: 11px; font-weight: 500;
  cursor: pointer;
  padding: 4px 8px; border-radius: 999px;
  transition: color 120ms ease, background 120ms ease;
}
.notif-mark-all:hover {
  color: var(--brand-deep);
  background: var(--brand-soft);
}
.notif-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  flex: 1 1 auto;
  /* Slim, brand-tinted scrollbar — matches the in-app surface */
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
}
.notif-list::-webkit-scrollbar { width: 6px; }
.notif-list::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.16);
  border-radius: 99px;
}
.notif-list::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.28); }

.notif-item {
  padding: 0;
  margin: 0 6px;
  border-radius: 10px;
  position: relative;
  transition: background 140ms ease;
}
.notif-item + .notif-item { margin-top: 2px; }
.notif-item:hover { background: var(--bg-soft); }
.notif-item.is-unread { background: var(--brand-soft); }
.notif-item.is-unread:hover { background: #ffe9d4; }

.notif-link {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 11px 12px;
  text-decoration: none;
  color: var(--text);
  border-radius: inherit;
}
.notif-link:hover,
.notif-link:focus-visible { text-decoration: none; color: var(--text); }
.notif-link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

/* ── Visual tile (thumb OR icon-only fallback) ─────────────────────────
   44px square. When meta carries a designId, renders the actual design
   thumb (a real preview the operator recognizes) with a small kind-icon
   badge in the corner so the action ("edit" vs "fresh generation") is
   still legible at a glance. No-design events (failures, etc.) render an
   icon tile tinted in the kind's tone instead — same footprint so item
   heights don't jump between rows. */
.notif-visual {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 9px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.notif-visual--thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.notif-visual--thumb.is-broken img { display: none; }
.notif-visual--thumb.is-broken::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--bg-soft), var(--border));
}

/* Tone tints — icon-tile bg + corner-badge bg. Generate = brand orange,
   edit = neutral graphite (a tool action, not a new design), recolor =
   pink (matches the swatch-fan aesthetic), error = red, info = brand. */
.notif-visual--icon { color: white; }
.notif-visual--icon[data-tone="generate"] {
  background: linear-gradient(135deg, var(--brand), #f59e44);
}
.notif-visual--icon[data-tone="edit"] {
  background: linear-gradient(135deg, #475569, #334155);
}
.notif-visual--icon[data-tone="recolor"] {
  background: linear-gradient(135deg, #ec4899, #db2777);
}
.notif-visual--icon[data-tone="error"] {
  background: linear-gradient(135deg, var(--bad), #dc2626);
}
.notif-visual--icon[data-tone="info"] {
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
}

.notif-kind-badge {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white;
  border: 2px solid white;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15);
}
.notif-kind-badge[data-tone="generate"] { background: var(--brand); }
.notif-kind-badge[data-tone="edit"]     { background: #334155; }
.notif-kind-badge[data-tone="recolor"]  { background: #db2777; }
.notif-kind-badge[data-tone="error"]    { background: var(--bad); }
.notif-kind-badge[data-tone="info"]     { background: var(--brand); }

.notif-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.notif-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
/* Tiny kind chip — uppercase, tracked, tone-colored. Tells the operator
   the category before they read the title. Cheaper than re-reading
   "Edit landed" / "Generated 5 of 5" to figure out which row is which. */
.notif-kind {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-soft);
  line-height: 1;
  white-space: nowrap;
}
.notif-item:has(.notif-kind-badge[data-tone="generate"]) .notif-kind,
.notif-item:has(.notif-visual--icon[data-tone="generate"]) .notif-kind {
  color: var(--brand-deep);
  background: var(--brand-soft);
}
.notif-item:has(.notif-kind-badge[data-tone="recolor"]) .notif-kind,
.notif-item:has(.notif-visual--icon[data-tone="recolor"]) .notif-kind {
  color: #be185d;
  background: #fce7f3;
}
.notif-item:has(.notif-visual--icon[data-tone="error"]) .notif-kind {
  color: #b91c1c;
  background: #fee2e2;
}
.notif-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  /* Single line — long titles ellipsize. Body carries the detail. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-msg {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.4;
  /* Clamp to two lines so a long prompt body doesn't blow out the item
     height. Full body is available via the title attr (tooltip). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-time {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-faint);
  white-space: nowrap;
  margin-top: 2px;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.notif-empty {
  color: var(--text-soft);
  text-align: center;
  padding: 36px 18px 32px;
  font-size: 12.5px;
  list-style: none;
}

/* ─── Discover hero CTA — three states (brand-kit / connections / web) ── */
.disc-hero-cta {
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.hero-cta-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  /* Was 220px — reduced so the hero section sits higher above the fold
     and matches the height of the trimmed text column. */
  min-height: 150px;
  padding: 16px 20px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,0.65) 0%, rgba(255,247,238,0.75) 60%, rgba(244,225,212,0.7) 100%);
  border: 1px solid rgba(0,0,0,0.06);
  text-decoration: none;
  color: var(--text, #111);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
}
.hero-cta-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);
  border-color: rgba(0,0,0,0.10);
}
.hero-cta-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-cta-art .home-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(36px);
  opacity: 0.55;
  animation: hero-blob-drift 18s ease-in-out infinite;
}
.hero-cta-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Cancels parent padding so the gradient veil hugs the card edge. */
  margin: -16px -20px -16px -20px;
  /* Less top air above the eyebrow — was 100px, now ~50px — so the
     painterly blobs show through but the text doesn't sit so far down. */
  padding: 50px 20px 16px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0.85) 100%);
  border-radius: 0 0 18px 18px;
}
.hero-cta-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft, #6b6b6b);
}
.hero-cta-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}
.hero-cta-sub {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-soft, #555);
  margin-bottom: 2px;
}
.hero-cta-action {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 7px 13px;
  background: #111;
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.15s ease, transform 0.15s ease;
}
.hero-cta-card:hover .hero-cta-action {
  background: var(--brand-deep, #4c1d95);
  transform: translateX(2px);
}
@keyframes hero-blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(8px, -6px) scale(1.05); }
}

/* ─── Brand kit: inline URL analyzer + keyword chips ─────────────────── */
.bk-url-row {
  margin-bottom: 18px;
  padding: 14px 16px;
  background: rgba(217, 119, 6, 0.04);
  border: 1px solid rgba(217, 119, 6, 0.16);
  border-radius: 10px;
}
.bk-url-field { display: flex; flex-direction: column; gap: 8px; }
.bk-url-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.bk-url-input-row .bk-input { flex: 1 1 auto; }
.bk-url-input-row .btn-primary { flex: 0 0 auto; padding: 0 18px; }
.bk-url-status {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  min-height: 16px;
}
.bk-url-status.ok { color: #166534; }
.bk-url-status.err { color: #991b1b; }

.bk-kw-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bk-kw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  min-height: 44px;
  align-items: center;
}
.bk-kw-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  background: #eef2ff;
  border-radius: 9999px;
  font-size: 12px;
  color: #1e293b;
  font-weight: 500;
  line-height: 1.2;
}
.bk-kw-chip-text { white-space: nowrap; }
.bk-kw-chip-x {
  width: 18px;
  height: 18px;
  border: none;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 50%;
  color: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bk-kw-chip-x:hover { background: rgba(0, 0, 0, 0.12); color: #000; }
.bk-kw-add-wrap { flex: 1 1 140px; min-width: 120px; }
.bk-kw-add-input {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  padding: 4px 6px;
  font-size: 12px;
  outline: none;
  color: #111;
}
.bk-kw-add-input::placeholder { color: rgba(0, 0, 0, 0.35); }
.bk-kw-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bk-kw-expand {
  padding: 6px 14px;
  font-size: 12px;
}
.bk-kw-expand:disabled { opacity: 0.5; cursor: not-allowed; }
.bk-kw-status {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.5);
  min-height: 14px;
}
.bk-kw-status.ok { color: #166534; }
.bk-kw-status.err { color: #991b1b; }

/* Brand kit: URL row in "done" state — confirmation chip with redo link. */
.bk-url-row.is-done {
  padding: 10px 14px;
  background: rgba(22, 101, 52, 0.06);
  border-color: rgba(22, 101, 52, 0.2);
}
.bk-url-done {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.72);
}
.bk-url-done-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #166534;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}
.bk-url-done-text { flex: 1 1 auto; }
.bk-url-done-text strong { color: #111; }
.bk-url-redo {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: #d97706;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
}
.bk-url-redo:hover { text-decoration: underline; }

/* Brand kit: keyword upload button. */
.bk-kw-upload-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease;
}
.bk-kw-upload-btn:hover {
  background: #fafafa;
  border-color: rgba(0, 0, 0, 0.25);
  color: #111;
}

/* ─── Brand kit: sayings section ────────────────────────────────────── */
.bk-say-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bk-say-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  min-height: 60px;
  max-height: 380px;
  overflow-y: auto;
}
.bk-say-empty {
  color: rgba(0, 0, 0, 0.4);
  font-size: 12px;
  padding: 6px 4px;
}
.bk-say-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 12px;
  background: #fef3c7;
  border-radius: 8px;
  font-size: 13px;
  color: #4a2e0a;
  line-height: 1.3;
}
.bk-say-chip-text {
  flex: 1 1 auto;
  word-break: break-word;
}
.bk-say-chip-x {
  width: 20px;
  height: 20px;
  border: none;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 50%;
  color: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.bk-say-chip-x:hover { background: rgba(0, 0, 0, 0.14); color: #000; }
.bk-say-add-row .bk-say-add-input { width: 100%; }
.bk-say-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bk-say-generate {
  padding: 6px 14px;
  font-size: 12px;
}
.bk-say-generate:disabled { opacity: 0.5; cursor: not-allowed; }
.bk-say-status {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.5);
  min-height: 14px;
}
.bk-say-status.ok { color: #166534; }
.bk-say-status.err { color: #991b1b; }

/* EverBee keyword pull button — branded warm-orange hover */
.bk-kw-everbee {
  padding: 6px 14px;
  font-size: 12px;
}
.bk-kw-everbee:not(:disabled):hover {
  border-color: rgba(217, 119, 6, 0.6);
  color: #d97706;
}
.bk-kw-everbee:disabled { opacity: 0.5; cursor: not-allowed; }

:root {
  --warm:       #ef7d2b;
  --warm-soft:  #fff4eb;
  --warm-border:#fcd9b6;
  --warm-deep:  #9c4612;
  --cream:      #fdfbf5;
  --slate:      #475569;
}

/* ── Marketing (landing, /pricing, /teams) layout ───────────────────── */

.marketing-body {
  background: var(--cream);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.marketing-body * { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }

.marketing-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px;
  background: rgba(253, 251, 245, 0.86);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.marketing-logo {
  font-size: 22px; font-weight: 700; letter-spacing: -0.5px;
  color: var(--text); text-decoration: none;
}
.marketing-logo span { color: var(--warm); }

.marketing-nav { display: flex; align-items: center; gap: 28px; }
.marketing-nav a {
  color: var(--text-soft); font-size: 14px; font-weight: 500; text-decoration: none;
  transition: color 0.12s;
}
.marketing-nav a:hover { color: var(--text); }
.marketing-nav a.is-active { color: var(--text); }
.marketing-nav-cta {
  background: var(--text); color: white !important;
  padding: 8px 16px; border-radius: 999px;
  font-weight: 600 !important;
}
.marketing-nav-cta:hover { background: #000; }

.marketing-main {
  flex: 1; width: 100%;
  max-width: 1200px; margin: 0 auto;
  padding: 64px 32px 96px;
}

.marketing-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: 32px;
  background: var(--cream);
}
.marketing-footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.marketing-footer-nav { display: flex; gap: 20px; }
.marketing-footer-nav a { color: var(--text-soft); font-size: 13px; text-decoration: none; }
.marketing-footer-nav a:hover { color: var(--text); }
.marketing-footer-mark { color: var(--text-faint); font-size: 13px; margin: 0; }

/* ── Hero ──────────────────────────────────────────────────────────── */

.hero {
  text-align: center;
  padding: 32px 0 56px;
}
.hero-eyebrow {
  display: inline-block;
  background: var(--warm-soft); color: var(--warm-deep);
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 24px;
}
.hero-title {
  font-size: clamp(40px, 6.5vw, 72px);
  line-height: 1.05; letter-spacing: -0.02em;
  font-weight: 800; margin: 0 0 24px;
  color: var(--text);
}
.hero-sub {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 640px; margin: 0 auto 36px;
}
.hero-ctas {
  display: flex; gap: 12px; justify-content: center;
  margin-bottom: 24px; flex-wrap: wrap;
}
.hero-cta {
  display: inline-flex; align-items: center;
  height: 50px; padding: 0 26px;
  border-radius: 999px;
  font-size: 15px; font-weight: 600;
  text-decoration: none;
  transition: all 0.14s;
  border: 1px solid transparent;
  cursor: pointer; font-family: inherit;
}
.hero-cta-primary {
  background: var(--text); color: white;
}
.hero-cta-primary:hover { background: #000; transform: translateY(-1px); }
.hero-cta-secondary {
  background: white; color: var(--text);
  border-color: rgba(0, 0, 0, 0.1);
}
.hero-cta-secondary:hover { border-color: rgba(0, 0, 0, 0.2); transform: translateY(-1px); }
.hero-trust {
  font-size: 13px; color: var(--text-faint);
  display: inline-flex; align-items: center; gap: 8px;
}
.hero-trust-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--good); flex-shrink: 0;
}

/* ── Hero product mock ─────────────────────────────────────────────── */

.hero-product { padding: 24px 0 80px; }
.hero-product-frame {
  max-width: 960px; margin: 0 auto;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff4eb 0%, #fdfbf5 100%);
  padding: 24px;
  box-shadow: 0 24px 80px rgba(239, 125, 43, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
}
.hero-product-window {
  background: white; border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.hero-product-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: #f9f9f7;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.hero-product-dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: #e0e0dc;
}
.hero-product-dot:nth-child(1) { background: #ff6157; }
.hero-product-dot:nth-child(2) { background: #ffbd2e; }
.hero-product-dot:nth-child(3) { background: #28c941; }
.hero-product-url {
  margin-left: 12px; color: var(--text-faint);
  font-size: 12px;
}
.hero-product-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  padding: 20px;
}
.hero-product-tile {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: linear-gradient(135deg,
    hsl(var(--hue) 70% 65%) 0%,
    hsl(var(--hue) 60% 50%) 100%);
  position: relative; overflow: hidden;
}
.hero-product-tile::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4) 0%, transparent 50%);
}

/* ── Value props ───────────────────────────────────────────────────── */

.value-props {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-bottom: 96px;
}
.value-prop {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  padding: 28px;
  transition: all 0.16s;
}
.value-prop:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.04); }
.value-prop-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--warm-soft); color: var(--warm-deep);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.value-prop h3 {
  font-size: 17px; font-weight: 600;
  margin: 0 0 8px; color: var(--text);
  letter-spacing: -0.01em;
}
.value-prop p {
  color: var(--text-soft); font-size: 14px; line-height: 1.55;
  margin: 0;
}

/* ── Bands ─────────────────────────────────────────────────────────── */

.band {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 24px;
  padding: 64px 48px;
  text-align: center;
}
.band-stack { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.band-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700; letter-spacing: -0.015em;
  margin: 0; color: var(--text); line-height: 1.1;
}
.band-sub {
  color: var(--text-soft); font-size: 16px; line-height: 1.55;
  max-width: 560px; margin: 0;
}
.band-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ── Pricing page head ─────────────────────────────────────────────── */

.pricing-head { text-align: center; margin-bottom: 56px; }
.pricing-eyebrow {
  display: inline-block;
  background: var(--warm-soft); color: var(--warm-deep);
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 20px;
}
.pricing-title {
  font-size: clamp(34px, 5vw, 54px); line-height: 1.08; letter-spacing: -0.02em;
  font-weight: 800; margin: 0 0 16px;
}
.pricing-sub {
  font-size: 17px; color: var(--text-soft);
  max-width: 580px; margin: 0 auto 32px; line-height: 1.55;
}

.pricing-toggle {
  display: inline-flex; padding: 4px;
  background: white; border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.pricing-toggle-opt {
  background: none; border: none;
  font-size: 13px; font-weight: 600; font-family: inherit;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer; color: var(--text-soft);
  display: inline-flex; align-items: center; gap: 8px;
}
.pricing-toggle-opt.is-active {
  background: var(--text); color: white;
}
.pricing-toggle-save {
  background: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.95);
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.pricing-toggle-opt:not(.is-active) .pricing-toggle-save {
  background: var(--warm-soft); color: var(--warm-deep);
}

.team-controls {
  display: flex; align-items: center; justify-content: center; gap: 32px;
  flex-wrap: wrap; margin-top: 28px;
}
.team-editors {
  display: inline-flex; align-items: center; gap: 12px;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  padding: 6px 16px 6px 14px;
}
.team-editors-label {
  font-size: 12px; font-weight: 600; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.04em;
}
.team-editors input[type="range"] {
  width: 140px;
  accent-color: var(--warm);
}
.team-editors-value {
  font-size: 14px; font-weight: 700; color: var(--text);
  min-width: 18px; text-align: center;
}

/* ── Tier grid + tier card ─────────────────────────────────────────── */

.tier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 96px;
}
.tier-grid-team {
  grid-template-columns: repeat(3, 1fr);
}

.tier-card {
  position: relative;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex; flex-direction: column;
  transition: all 0.18s;
}
.tier-card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.05); }
.tier-card.variant-warm {
  border-color: var(--warm-border);
  background: linear-gradient(180deg, var(--warm-soft) 0%, white 35%);
  box-shadow: 0 8px 24px rgba(239, 125, 43, 0.08);
}
.tier-card.variant-deep {
  background: linear-gradient(180deg, #f5f3ff 0%, white 40%);
  border-color: #e0d7fe;
}
.tier-card.variant-slate {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.tier-card.is-current {
  outline: 2px solid var(--good);
  outline-offset: -2px;
}

.tier-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--warm); color: white;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(239, 125, 43, 0.3);
}
.tier-card.variant-deep .tier-badge { background: var(--violet); box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3); }

.tier-head { margin-bottom: 16px; }
.tier-name {
  font-size: 18px; font-weight: 700;
  margin: 0 0 4px; color: var(--text);
}
.tier-tagline {
  font-size: 13px; color: var(--text-soft);
  margin: 0; line-height: 1.4;
}

.tier-price {
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.tier-price-currency {
  font-size: 18px; font-weight: 600; color: var(--text);
  align-self: flex-start; margin-top: 4px;
}
.tier-price-value {
  font-size: 44px; font-weight: 800; color: var(--text);
  letter-spacing: -0.025em; line-height: 1;
}
.tier-price-value-custom { font-size: 32px; }
.tier-price-cents { font-size: 20px; font-weight: 600; color: var(--text); }
.tier-price-unit {
  font-size: 13px; color: var(--text-soft);
  font-weight: 500;
}
.tier-price-total {
  font-size: 11px; color: var(--text-faint); margin-left: 4px;
}
.tier-promo {
  font-size: 12px; font-weight: 600; color: var(--warm-deep);
  margin-bottom: 16px;
}

.tier-cta {
  height: 42px;
  border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.1);
  background: white; color: var(--text);
  font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer; margin: 14px 0 20px;
  transition: all 0.12s;
}
.tier-cta:hover { background: var(--text); color: white; }
.tier-cta.is-warm {
  background: var(--warm); color: white; border-color: var(--warm);
}
.tier-cta.is-warm:hover { background: var(--warm-deep); border-color: var(--warm-deep); }
.tier-cta.is-deep {
  background: var(--violet); color: white; border-color: var(--violet);
}
.tier-cta.is-deep:hover { background: #7e22ce; border-color: #7e22ce; }
.tier-cta.is-slate {
  background: var(--slate); color: white; border-color: var(--slate);
}
.tier-cta.is-slate:hover { background: #1e293b; border-color: #1e293b; }
.tier-cta.is-current {
  background: var(--good-soft); color: var(--good-text); border-color: var(--good-border);
  cursor: default;
}
.tier-cta.is-current:hover { background: var(--good-soft); color: var(--good-text); }
.tier-cta[disabled] { opacity: 1; }

.tier-features {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.tier-features li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--text-soft); line-height: 1.4;
}
.tier-features svg {
  color: var(--warm); flex-shrink: 0; margin-top: 2px;
}
.tier-card.variant-deep .tier-features svg { color: var(--violet); }
.tier-card.variant-slate .tier-features svg { color: var(--slate); }

@media (max-width: 900px) {
  .tier-grid, .tier-grid-team { grid-template-columns: 1fr; }
  .value-props { grid-template-columns: 1fr; }
}

/* ── Pricing pivot / FAQ ───────────────────────────────────────────── */

.pricing-pivot {
  background: white; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 20px;
  padding: 48px; text-align: center;
  margin-bottom: 64px;
}
.pricing-pivot-title { font-size: 26px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.015em; }
.pricing-pivot-sub { color: var(--text-soft); margin: 0 0 20px; font-size: 15px; line-height: 1.5; }

.pricing-faq { padding: 32px 0; }
.pricing-faq-title { font-size: 24px; font-weight: 700; text-align: center; margin: 0 0 32px; letter-spacing: -0.015em; }
.pricing-faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.pricing-faq h4 { font-size: 15px; font-weight: 600; margin: 0 0 8px; color: var(--text); }
.pricing-faq p { color: var(--text-soft); font-size: 14px; line-height: 1.55; margin: 0; }
@media (max-width: 720px) {
  .pricing-faq-grid { grid-template-columns: 1fr; }
}

/* ── Team license band ─────────────────────────────────────────────── */

.team-license {
  background: white; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 20px;
  padding: 40px 48px; margin-bottom: 64px;
}
.team-license-title { font-size: 22px; font-weight: 700; margin: 0 0 24px; text-align: center; letter-spacing: -0.015em; }
.team-license-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.team-license h4 { font-size: 14px; font-weight: 700; margin: 0 0 8px; color: var(--text); }
.team-license p { color: var(--text-soft); font-size: 13px; line-height: 1.5; margin: 0; }
@media (max-width: 800px) { .team-license-grid { grid-template-columns: 1fr; } }

/* ── Teams page on the dark marketing surface ──────────────────────────
   /teams shares the landing-dark chrome with / and /pricing. Its content
   classes (pricing-toggle, team-editors, team-license, pricing-pivot)
   default to the light app surface, so override the white fills to match
   the dark toggle/cards used on the sibling marketing pages. */
body.landing-dark .pricing-toggle {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
body.landing-dark .pricing-toggle-opt { color: #a1a1aa; }
body.landing-dark .pricing-toggle-opt:hover { color: #f5f5f7; }
body.landing-dark .pricing-toggle-opt.is-active { background: #f5f5f7; color: #07070b; }
body.landing-dark .pricing-toggle-save { background: rgba(7, 7, 11, 0.18); color: rgba(7, 7, 11, 0.85); }
body.landing-dark .pricing-toggle-opt:not(.is-active) .pricing-toggle-save {
  background: rgba(249, 115, 22, 0.15); color: #f97316;
}
body.landing-dark .team-editors {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
body.landing-dark .team-editors-label { color: #a1a1aa; }
body.landing-dark .team-editors-value { color: #f5f5f7; }
body.landing-dark .team-license,
body.landing-dark .pricing-pivot {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ── Credit modal ──────────────────────────────────────────────────── */

body.credit-modal-open { overflow: hidden; }

.credit-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 15, 18, 0.45);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.16s ease;
}
.credit-modal-overlay.is-open { opacity: 1; }
.credit-modal-overlay.is-closing { opacity: 0; }

.credit-modal {
  background: white; border-radius: 16px;
  width: 100%;
  max-height: 90vh; overflow: auto;
  display: flex; flex-direction: column;
  transform: translateY(8px); opacity: 0;
  transition: transform 0.16s ease, opacity 0.16s ease;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
}
.credit-modal-overlay.is-open .credit-modal { transform: none; opacity: 1; }

.credit-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.credit-modal-title { font-size: 18px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.credit-modal-close {
  background: none; border: none; padding: 6px; border-radius: 8px;
  color: var(--text-soft); cursor: pointer;
}
.credit-modal-close:hover { background: var(--bg-soft); color: var(--text); }

.credit-modal-body { padding: 24px; flex: 1; }
.credit-modal-foot {
  padding: 16px 24px; border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex; justify-content: flex-end; gap: 8px;
}

/* ── Plans modal grid (in-app upgrade) ─────────────────────────────── */

.plans-modal-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.plans-modal-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.plans-modal-toggle-row .pricing-toggle { background: var(--bg-soft); }
@media (max-width: 900px) { .plans-modal-grid { grid-template-columns: 1fr; } }

/* ── Balance pill (sidebar mount) ──────────────────────────────────── */

.balance-pill {
  margin: 12px 12px 0;
  padding: 12px 14px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 12px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer;
  transition: border-color 0.12s;
}
.balance-pill:hover { border-color: var(--border-strong); }

.balance-pill-head {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; color: var(--text-soft);
  text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em;
}
.balance-pill-tier {
  background: var(--bg-soft); color: var(--text); border-radius: 4px;
  padding: 2px 6px; font-size: 10px; font-weight: 700;
}
.balance-pill-bar {
  height: 6px; border-radius: 999px; background: var(--bg-soft);
  overflow: hidden; position: relative;
}
.balance-pill-bar-fill {
  height: 100%; background: var(--warm);
  border-radius: 999px;
  transition: width 0.24s ease;
}
.balance-pill-bar-fill.is-low { background: var(--bad); }
.balance-pill-bar-fill.is-warn { background: #d97706; }
.balance-pill-numbers {
  display: flex; justify-content: space-between;
  color: var(--text); font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 600;
}
.balance-pill-numbers .balance-pill-divider { color: var(--text-faint); }
.balance-pill-meta {
  color: var(--text-faint); font-size: 11px;
  display: flex; justify-content: space-between;
}
.balance-pill-slow {
  font-size: 11px; color: var(--good-text);
  font-weight: 600;
}

/* Compact mode for collapsed sidebar */
body.side-nav-collapsed .balance-pill {
  padding: 8px; gap: 4px;
}
body.side-nav-collapsed .balance-pill .balance-pill-head .balance-pill-label,
body.side-nav-collapsed .balance-pill .balance-pill-meta,
body.side-nav-collapsed .balance-pill .balance-pill-slow {
  display: none;
}

/* ── In-app /billing page ──────────────────────────────────────────── */

.billing-page {
  padding: 32px 40px 64px;
  max-width: 1080px; margin: 0 auto;
}
.billing-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 32px; gap: 16px; flex-wrap: wrap;
}
.billing-head h1 {
  font-size: 28px; font-weight: 700; margin: 0;
  letter-spacing: -0.015em;
}
.billing-head p { color: var(--text-soft); font-size: 14px; margin: 4px 0 0; }
.billing-head .change-plan-btn {
  background: var(--warm); color: white; border: none;
  height: 40px; padding: 0 20px;
  border-radius: 10px;
  font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer;
}
.billing-head .change-plan-btn:hover { background: var(--warm-deep); }

.billing-grid {
  display: grid; grid-template-columns: 2fr 1fr; gap: 20px;
  margin-bottom: 32px;
}
@media (max-width: 900px) { .billing-grid { grid-template-columns: 1fr; } }

.billing-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
}
.billing-card h3 {
  font-size: 14px; font-weight: 600; color: var(--text-soft);
  margin: 0 0 16px; text-transform: uppercase; letter-spacing: 0.04em;
}
.billing-plan-name {
  font-size: 26px; font-weight: 700; margin: 0;
  letter-spacing: -0.015em;
}
.billing-plan-price {
  color: var(--text-soft); font-size: 14px; margin: 4px 0 16px;
}
.billing-plan-cycle {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  font-size: 13px; color: var(--text-soft);
  display: flex; justify-content: space-between;
}

.billing-balance-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px dashed var(--border);
}
.billing-balance-row:last-child { border-bottom: none; }
.billing-balance-row .label { color: var(--text-soft); }
.billing-balance-row .value { font-weight: 600; font-variant-numeric: tabular-nums; }

.billing-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 16px;
}
.billing-actions button {
  background: white; color: var(--text);
  border: 1px solid var(--border-strong);
  height: 36px; padding: 0 16px;
  border-radius: 8px;
  font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer;
}
.billing-actions button:hover { background: var(--bg-soft); }
.billing-actions button.is-danger { color: var(--bad); border-color: var(--bad); }
.billing-actions button.is-danger:hover { background: var(--bad); color: white; }

.billing-history {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.billing-history-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.billing-history-head h3 {
  font-size: 14px; font-weight: 600; color: var(--text-soft);
  margin: 0; text-transform: uppercase; letter-spacing: 0.04em;
}
.billing-history table {
  width: 100%; border-collapse: collapse;
}
.billing-history th, .billing-history td {
  text-align: left;
  padding: 12px 20px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.billing-history th { color: var(--text-soft); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.billing-history tr:last-child td { border-bottom: none; }
.billing-history-source {
  display: inline-block;
  padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.billing-history-source.subscription { background: var(--brand-soft); color: var(--brand-deep); }
.billing-history-source.pack { background: var(--warm-soft); color: var(--warm-deep); }
.billing-history-source.overage { background: #fef2f2; color: #991b1b; }
.billing-history-empty { padding: 32px; text-align: center; color: var(--text-faint); font-size: 13px; }

.billing-packs {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  margin-top: 20px;
}
.billing-packs h3 {
  font-size: 14px; font-weight: 600; color: var(--text-soft);
  margin: 0 0 4px; text-transform: uppercase; letter-spacing: 0.04em;
}
.billing-packs .billing-packs-sub {
  font-size: 13px; color: var(--text-soft); margin: 0 0 16px;
}
.pack-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
@media (max-width: 900px) { .pack-grid { grid-template-columns: repeat(2, 1fr); } }
.pack-card {
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.12s;
}
.pack-card:hover { border-color: var(--warm); transform: translateY(-1px); }
.pack-card-credits {
  font-size: 18px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pack-card-price {
  font-size: 13px; color: var(--text-soft);
  margin: 2px 0 0;
}
.pack-card-label {
  font-size: 11px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
  margin: 4px 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   LANDING — DARK / TECHY / AI
   Scoped to body.landing-dark so /pricing and /teams stay on cream.
   ═══════════════════════════════════════════════════════════════════════ */

body.landing-dark {
  --bg:        #0a0a0f;
  --bg-soft:   #14141c;
  --bg-card:   rgba(255, 255, 255, 0.03);
  --line:      rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.04);
  --text:      #f5f5f7;
  --text-soft: #a1a1aa;
  --text-faint:#71717a;
  --warm:      #ef7d2b;
  --warm-deep: #f97316;
  --pink:      #ec4899;
  --violet:    #a855f7;
  --cyan:      #22d3ee;
  --green:     #34d399;

  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  font-feature-settings: "ss01", "cv11";
}
body.landing-dark a { color: inherit; }
body.landing-dark * { box-sizing: border-box; }

/* ── Grain overlay ──────────────────────────────────────────────── */
.landing-grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.16;
  mix-blend-mode: overlay;
}

/* ── Mesh gradient background ────────────────────────────────────── */
.landing-mesh {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}
.mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.55;
  mix-blend-mode: screen;
  will-change: transform;
}
.mesh-blob-a { background: var(--warm);   width: 620px; height: 620px; top: -120px; left: -120px;  animation: blob-a 22s ease-in-out infinite; }
.mesh-blob-b { background: var(--violet); width: 540px; height: 540px; top: 240px;  right: -160px; animation: blob-b 26s ease-in-out infinite; }
.mesh-blob-c { background: var(--cyan);   width: 480px; height: 480px; top: 640px;  left: 28%;     animation: blob-c 30s ease-in-out infinite; opacity: 0.4; }
.mesh-blob-d { background: var(--pink);   width: 420px; height: 420px; top: 1200px; right: 20%;    animation: blob-d 28s ease-in-out infinite; opacity: 0.45; }

@keyframes blob-a {
  0%, 100% { transform: translate3d(0, 0, 0)         scale(1); }
  50%      { transform: translate3d(80px, 60px, 0)   scale(1.15); }
}
@keyframes blob-b {
  0%, 100% { transform: translate3d(0, 0, 0)          scale(1); }
  50%      { transform: translate3d(-60px, 80px, 0)   scale(1.1); }
}
@keyframes blob-c {
  0%, 100% { transform: translate3d(0, 0, 0)         scale(1); }
  50%      { transform: translate3d(40px, -60px, 0)  scale(1.2); }
}
@keyframes blob-d {
  0%, 100% { transform: translate3d(0, 0, 0)          scale(1); }
  50%      { transform: translate3d(-80px, -40px, 0)  scale(1.1); }
}

/* Cursor-following glow */
.landing-cursor {
  position: fixed; top: 0; left: 0; z-index: 2; pointer-events: none;
  width: 480px; height: 480px;
  margin: -240px 0 0 -240px;
  background: radial-gradient(circle, rgba(239, 125, 43, 0.18) 0%, transparent 60%);
  border-radius: 50%;
  transform: translate3d(50vw, 50vh, 0);
  transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1);
  mix-blend-mode: screen;
  opacity: 0;
  will-change: transform;
}
body.landing-dark.has-cursor .landing-cursor { opacity: 1; }
@media (hover: none) { .landing-cursor { display: none; } }

/* ── Header ─────────────────────────────────────────────────────── */
.landing-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px;
  background: rgba(10, 10, 15, 0.72);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid var(--line-soft);
}
.landing-logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text); text-decoration: none;
}
.landing-logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--warm) 0%, var(--pink) 100%);
  color: #fff;
  box-shadow: 0 0 24px rgba(239, 125, 43, 0.45);
  font-size: 14px;
}
.landing-logo-text i {
  font-style: normal;
  background: linear-gradient(135deg, var(--warm) 0%, var(--pink) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.landing-nav { display: flex; align-items: center; gap: 24px; }
.landing-nav a {
  color: var(--text-soft); font-size: 14px; font-weight: 500;
  text-decoration: none; transition: color 0.14s;
}
.landing-nav a:hover { color: var(--text); }
.landing-nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  color: #0a0a0f !important;
  background: #fff;
  padding: 9px 14px 9px 16px;
  border-radius: 999px;
  font-weight: 600 !important;
  transition: transform 0.14s, box-shadow 0.14s;
}
.landing-nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(255, 255, 255, 0.16);
}

/* ── Hero ──────────────────────────────────────────────────────── */
.landing-main { position: relative; z-index: 3; }

.landing-hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 32px 40px;
  text-align: center;
  position: relative;
}

.hero-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px; color: var(--text-soft);
  margin-bottom: 28px;
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  font-feature-settings: "tnum";
}
.hero-pill-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 12px var(--green);
  animation: pulse-dot 1.8s ease-in-out infinite;
}
.hero-pill-counter { color: var(--text); font-weight: 600; }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(1.4); }
}

.landing-h1 {
  font-size: clamp(44px, 7vw, 88px);
  line-height: 1.04; letter-spacing: -0.035em;
  font-weight: 800;
  margin: 0 auto 24px;
  max-width: 900px;
  display: flex; flex-direction: column; gap: 4px;
}
.hero-h1-grad {
  background: linear-gradient(135deg, var(--warm) 0%, var(--pink) 45%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 200%;
  animation: grad-shift 8s ease-in-out infinite;
}
@keyframes grad-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.landing-sub {
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55;
  color: var(--text-soft);
  max-width: 620px; margin: 0 auto 36px;
}

.landing-ctas {
  display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 24px;
}
.landing-cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 26px;
  border-radius: 999px;
  font-size: 15px; font-weight: 600;
  text-decoration: none;
  transition: transform 0.14s, box-shadow 0.14s;
  border: 1px solid transparent;
  cursor: pointer; font-family: inherit;
}
.landing-cta.primary {
  background: linear-gradient(135deg, var(--warm) 0%, var(--pink) 100%);
  color: #fff;
  box-shadow: 0 8px 32px rgba(236, 72, 153, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  animation: cta-glow 4s ease-in-out infinite;
}
.landing-cta.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(236, 72, 153, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 8px 32px rgba(236, 72, 153, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.06) inset; }
  50%      { box-shadow: 0 8px 48px rgba(239, 125, 43, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; }
}
.landing-cta.ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-color: var(--line);
  backdrop-filter: blur(8px);
}
.landing-cta.ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

.landing-trust {
  font-size: 13px; color: var(--text-faint);
  display: inline-flex; align-items: center; gap: 8px;
}
.dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }
.dot-good { background: var(--green); box-shadow: 0 0 10px var(--green); }
.dot-cyan { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

/* ── Hero product mock ─────────────────────────────────────────── */
.hero-product { padding: 56px 0 32px; }
.hero-product-frame {
  position: relative;
  max-width: 980px; margin: 0 auto;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(239, 125, 43, 0.4) 0%, rgba(236, 72, 153, 0.3) 50%, rgba(168, 85, 247, 0.4) 100%);
}
.hero-product-glow {
  position: absolute; inset: -40px;
  background: radial-gradient(ellipse at center, rgba(239, 125, 43, 0.25) 0%, transparent 60%);
  z-index: -1;
  filter: blur(60px);
}
.hero-product-window {
  background: rgba(20, 20, 28, 0.92);
  backdrop-filter: blur(20px);
  border-radius: 21px;
  overflow: hidden;
}
.hero-product-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--line);
}
.hero-product-dot { width: 10px; height: 10px; border-radius: 999px; background: #2a2a35; }
.hero-product-search {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: 16px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-soft);
  font-size: 12px;
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  min-width: 280px;
}
.hero-product-cursor {
  display: inline-block; width: 7px; height: 13px; background: var(--warm);
  animation: cursor-blink 1s steps(2) infinite;
}
@keyframes cursor-blink { 50% { opacity: 0; } }
.hero-product-meta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hero-product-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.3);
  border-radius: 999px;
  font-size: 11px; color: var(--cyan);
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
}

.hero-product-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  padding: 20px;
}
@media (max-width: 720px) {
  .hero-product-grid { grid-template-columns: repeat(3, 1fr); }
}
.hero-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  transition: opacity 0.4s ease;
}
.hero-tile.state-pending {
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.04) 8%, rgba(255, 255, 255, 0.08) 18%, rgba(255, 255, 255, 0.04) 33%);
  background-size: 200% 100%;
  animation: skel-sweep 1.4s linear infinite;
}
.hero-tile.state-generating {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(239, 125, 43, 0.35);
}
.hero-tile.state-generating::before {
  content: ""; position: absolute; inset: 0;
  background: conic-gradient(from 0deg, transparent 70%, rgba(239, 125, 43, 0.5) 100%);
  animation: spin 1.4s linear infinite;
}
.hero-tile.state-generating::after {
  content: ""; position: absolute; inset: 3px;
  background: rgba(20, 20, 28, 1);
  border-radius: 6px;
}
.hero-tile.state-done {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4) 0%, transparent 50%),
    linear-gradient(135deg, hsl(var(--hue) 70% 60%) 0%, hsl(var(--hue) 60% 45%) 100%);
  animation: tile-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes skel-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes tile-pop {
  0%   { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1);    opacity: 1; }
}

/* ── Reveals ──────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: reveal-up 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.reveal[data-delay="0"]   { animation-delay: 80ms; }
.reveal[data-delay="80"]  { animation-delay: 200ms; }
.reveal[data-delay="240"] { animation-delay: 360ms; }
.reveal[data-delay="360"] { animation-delay: 480ms; }
.reveal[data-delay="480"] { animation-delay: 600ms; }
.reveal[data-delay="640"] { animation-delay: 760ms; }
@keyframes reveal-up {
  to { opacity: 1; transform: none; }
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal-on-scroll[data-stagger="120"] { transition-delay: 0.12s; }
.reveal-on-scroll[data-stagger="240"] { transition-delay: 0.24s; }
.reveal-on-scroll[data-stagger="80"]  { transition-delay: 0.08s; }
.reveal-on-scroll[data-stagger="160"] { transition-delay: 0.16s; }
.reveal-on-scroll.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-on-scroll { opacity: 1; transform: none; animation: none; transition: none; }
  .mesh-blob, .hero-pill-dot, .hero-h1-grad, .landing-cta.primary { animation: none; }
  .hero-tile.state-pending, .hero-tile.state-generating::before { animation: none; }
}

/* ── Niche marquee ────────────────────────────────────────────── */
.landing-marquee {
  position: relative;
  margin: 24px 0 80px;
  padding: 18px 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
}
.marquee-track {
  display: inline-flex; gap: 12px; white-space: nowrap;
  animation: marquee 50s linear infinite;
  will-change: transform;
}
.marquee-track span {
  display: inline-flex; align-items: center;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-soft);
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
}
.marquee-track span::before {
  content: "→ "; color: var(--warm); margin-right: 6px; font-weight: 700;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ── Sections ─────────────────────────────────────────────────── */
.landing-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 32px;
}
.section-head {
  text-align: center;
  margin-bottom: 56px;
}
.section-eyebrow {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(239, 125, 43, 0.1);
  border: 1px solid rgba(239, 125, 43, 0.3);
  color: var(--warm);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  border-radius: 999px;
  margin-bottom: 18px;
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
}
.section-title {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1; letter-spacing: -0.025em;
  font-weight: 700; margin: 0 0 12px;
  color: var(--text);
}
.section-sub {
  color: var(--text-soft); font-size: 16px; line-height: 1.55;
  max-width: 560px; margin: 0 auto;
}

/* ── Steps ────────────────────────────────────────────────────── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.step-card {
  position: relative;
  padding: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.step-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(239, 125, 43, 0.5) 50%, transparent 100%);
}
.step-num {
  display: inline-block;
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  font-size: 12px; font-weight: 700;
  color: var(--warm);
  background: rgba(239, 125, 43, 0.12);
  border: 1px solid rgba(239, 125, 43, 0.3);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.step-card h3 {
  font-size: 19px; font-weight: 600; margin: 0 0 10px;
  letter-spacing: -0.015em;
}
.step-card p {
  font-size: 14px; color: var(--text-soft); line-height: 1.6; margin: 0 0 20px;
}

.step-mock {
  position: relative;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.3);
  padding: 14px;
  min-height: 80px;
}
.step-mock-search {
  display: flex; align-items: center; gap: 8px;
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  font-size: 12px;
}
.step-search-text { color: var(--warm); }
.step-search-bar { display: inline-block; width: 7px; height: 13px; background: var(--warm); animation: cursor-blink 1s steps(2) infinite; }
.step-mock-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.step-mock-tiles span {
  aspect-ratio: 1; border-radius: 6px;
  background: linear-gradient(135deg, hsl(var(--hue) 70% 60%), hsl(var(--hue) 60% 45%));
  opacity: 0;
  animation: tile-fill 4s var(--d) infinite;
}
@keyframes tile-fill {
  0%, 20%   { opacity: 0; transform: scale(0.7); }
  30%, 80%  { opacity: 1; transform: scale(1); }
  90%, 100% { opacity: 0.6; transform: scale(1); }
}
.step-mock-pipes {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.pipe-chip {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px; color: var(--text);
  font-weight: 500;
}

@media (max-width: 900px) {
  .steps-grid { grid-template-columns: 1fr; }
}

/* ── Models grid ──────────────────────────────────────────────── */
.models-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.model-chip {
  position: relative;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  display: flex; flex-direction: column; gap: 6px;
  transition: all 0.2s;
  overflow: hidden;
}
.model-chip:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
  border-color: rgba(239, 125, 43, 0.4);
}
.model-chip::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
}
.model-chip[data-cat="image"]::after { background: var(--warm); }
.model-chip[data-cat="video"]::after { background: var(--pink); }
.model-chip[data-cat="slow"]::after  { background: var(--cyan); }
.model-chip[data-cat="util"]::after  { background: var(--violet); }
.model-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  letter-spacing: -0.005em;
}
.model-tag {
  font-size: 11px; color: var(--text-faint);
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  text-transform: lowercase;
}
@media (max-width: 900px) { .models-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Built for ────────────────────────────────────────────────── */
.builtfor-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.builtfor-card {
  padding: 28px 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: all 0.2s;
}
.builtfor-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}
.builtfor-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(239, 125, 43, 0.2) 0%, rgba(236, 72, 153, 0.2) 100%);
  border: 1px solid rgba(239, 125, 43, 0.3);
  border-radius: 12px;
  font-size: 20px;
  margin-bottom: 16px;
}
.builtfor-card h4 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.builtfor-card p { font-size: 13px; color: var(--text-soft); margin: 0; line-height: 1.55; }
@media (max-width: 900px) { .builtfor-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .builtfor-grid { grid-template-columns: 1fr; } }

/* ── Closing CTA band ────────────────────────────────────────── */
.landing-cta-band {
  position: relative;
  max-width: 1100px;
  margin: 40px auto 96px;
  padding: 80px 32px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  overflow: hidden;
}
.cta-band-glow {
  position: absolute; left: 50%; top: 0; width: 600px; height: 600px;
  transform: translate(-50%, -60%);
  background: radial-gradient(circle, rgba(239, 125, 43, 0.3) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.landing-cta-band h2 {
  font-size: clamp(28px, 4vw, 44px);
  margin: 0 0 12px; letter-spacing: -0.025em;
}
.landing-cta-band p {
  color: var(--text-soft); font-size: 16px; margin: 0 0 28px;
  max-width: 480px; margin-left: auto; margin-right: auto;
}

/* ── Footer ──────────────────────────────────────────────────── */
.landing-footer {
  border-top: 1px solid var(--line-soft);
  padding: 32px;
  position: relative; z-index: 3;
}
.landing-footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.landing-footer-nav { display: flex; gap: 20px; }
.landing-footer-nav a {
  color: var(--text-soft); font-size: 13px;
  text-decoration: none; transition: color 0.14s;
}
.landing-footer-nav a:hover { color: var(--text); }
.landing-footer-mark { color: var(--text-faint); font-size: 13px; margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.landing-footer-mark .landing-footer-bee {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  opacity: 0.85;
}

@media (max-width: 720px) {
  .landing-header { padding: 14px 18px; }
  .landing-hero { padding: 56px 18px 24px; }
  .landing-section { padding: 56px 18px; }
  .landing-cta-band { margin: 24px 18px 64px; padding: 56px 24px; }
  .landing-nav a:not(.landing-nav-cta) { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PRICING — DARK (body.landing-dark on /pricing + /teams)
   Re-themes tier-card components for the dark surface + adds
   pricing-specific sections (head, toggle, FAQ, pivot, margin strip).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Pricing head ─────────────────────────────────────────────────── */

body.landing-dark .pricing-dark-head {
  text-align: center;
  padding: 88px 0 56px;
  position: relative;
}
body.landing-dark .pricing-dark-eyebrow {
  display: inline-block;
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.32);
  color: #f97316;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 22px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
body.landing-dark .pricing-dark-title {
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 22px;
  color: #f5f5f7;
}
body.landing-dark .pricing-dark-sub {
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.55;
  color: #a1a1aa;
  max-width: 600px;
  margin: 0 auto 36px;
}

/* ── Dark toggle ──────────────────────────────────────────────────── */

body.landing-dark .pricing-dark-toggle {
  display: inline-flex;
  padding: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
body.landing-dark .pricing-dark-toggle-opt {
  background: none; border: none;
  font-size: 13px; font-weight: 600; font-family: inherit;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer; color: #a1a1aa;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.18s;
}
body.landing-dark .pricing-dark-toggle-opt:hover {
  color: #f5f5f7;
}
body.landing-dark .pricing-dark-toggle-opt.is-active {
  background: #f5f5f7; color: #07070b;
}
body.landing-dark .pricing-dark-toggle-save {
  background: rgba(7, 7, 11, 0.18); color: rgba(7, 7, 11, 0.85);
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
body.landing-dark .pricing-dark-toggle-opt:not(.is-active) .pricing-dark-toggle-save {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
}

/* ── Tier cards — dark override ───────────────────────────────────── */

body.landing-dark .tier-grid {
  display: grid;
  /* 3 cols matches the 3 Solo tiers in tier-data.js (Free/Creator/Pro).
     The 4-tier shape from the original canonical spec was trimmed when
     Starter was dropped; this grid was never updated, leaving a phantom
     4th column that cut Free off the left edge at narrow viewports. */
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 96px;
  padding: 0;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
body.landing-dark .tier-grid.tier-grid-team {
  grid-template-columns: repeat(3, 1fr);
}

body.landing-dark .tier-card {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 28px 24px;
  display: flex; flex-direction: column;
  transition: all 0.22s cubic-bezier(.16,1,.3,1);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  /* overflow: visible so the .tier-badge (absolutely positioned at top:-10px)
     pokes out above the card. The only other absolute child is ::before
     (top:0, height:1px), which sits inside the card and won't visibly leak. */
  overflow: visible;
}
body.landing-dark .tier-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  opacity: 0; transition: opacity 0.4s;
  pointer-events: none;
}
body.landing-dark .tier-card:hover::before { opacity: 1; }
body.landing-dark .tier-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}

/* Variant: warm (Creator / Studio) — gradient halo + popping badge */
body.landing-dark .tier-card.variant-warm {
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(249, 115, 22, 0.22), transparent 50%),
    rgba(255, 255, 255, 0.03);
  border-color: rgba(249, 115, 22, 0.35);
  box-shadow:
    0 0 0 1px rgba(249, 115, 22, 0.2) inset,
    0 24px 60px rgba(249, 115, 22, 0.12);
}
body.landing-dark .tier-card.variant-warm:hover {
  box-shadow:
    0 0 0 1px rgba(249, 115, 22, 0.32) inset,
    0 30px 80px rgba(249, 115, 22, 0.22);
}

/* Variant: deep (Pro / Business) — violet halo */
body.landing-dark .tier-card.variant-deep {
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(168, 85, 247, 0.22), transparent 50%),
    rgba(255, 255, 255, 0.03);
  border-color: rgba(168, 85, 247, 0.32);
  box-shadow: 0 24px 60px rgba(168, 85, 247, 0.1);
}
body.landing-dark .tier-card.variant-deep:hover {
  border-color: rgba(168, 85, 247, 0.48);
  box-shadow: 0 30px 80px rgba(168, 85, 247, 0.2);
}

/* Variant: slate (Enterprise) — cool blue/slate halo */
body.landing-dark .tier-card.variant-slate {
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(34, 211, 238, 0.14), transparent 50%),
    rgba(255, 255, 255, 0.03);
  border-color: rgba(148, 163, 184, 0.22);
}
body.landing-dark .tier-card.variant-slate:hover {
  border-color: rgba(148, 163, 184, 0.38);
}

body.landing-dark .tier-card.is-current {
  outline: 2px solid #4ade80;
  outline-offset: -2px;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.16);
}

/* Badge — warm gradient pill that sits on the top edge */
body.landing-dark .tier-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #f97316, #ec4899);
  color: white;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.45);
  z-index: 2;
}
body.landing-dark .tier-card.variant-deep .tier-badge {
  background: linear-gradient(135deg, #a855f7, #ec4899);
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.45);
}
body.landing-dark .tier-card.variant-slate .tier-badge {
  background: linear-gradient(135deg, #475569, #1e293b);
}

/* Head: name + tagline */
body.landing-dark .tier-card .tier-head { margin-bottom: 16px; }
body.landing-dark .tier-card .tier-name {
  font-size: 18px; font-weight: 700;
  margin: 0 0 4px;
  color: #f5f5f7;
  letter-spacing: -0.01em;
}
body.landing-dark .tier-card .tier-tagline {
  font-size: 13px; color: #a1a1aa;
  margin: 0; line-height: 1.45;
}

/* Price */
body.landing-dark .tier-card .tier-price {
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
  color: #f5f5f7;
}
body.landing-dark .tier-card .tier-price-currency {
  font-size: 18px; font-weight: 600;
  align-self: flex-start; margin-top: 4px;
  color: #d4d4d8;
}
body.landing-dark .tier-card .tier-price-value {
  font-size: 48px; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1;
  color: #f5f5f7;
}
body.landing-dark .tier-card.variant-warm .tier-price-value,
body.landing-dark .tier-card.variant-deep .tier-price-value {
  background: linear-gradient(135deg, #f97316, #ec4899, #a855f7);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
body.landing-dark .tier-card .tier-price-value-custom { font-size: 32px; }
body.landing-dark .tier-card .tier-price-cents {
  font-size: 22px; font-weight: 600;
  color: #d4d4d8;
}
body.landing-dark .tier-card .tier-price-unit {
  font-size: 13px; color: #a1a1aa;
  font-weight: 500;
}
body.landing-dark .tier-card .tier-price-total {
  font-size: 11px; color: #71717a;
  margin-left: 4px;
}
body.landing-dark .tier-card .tier-promo {
  font-size: 12px; font-weight: 600;
  color: #f97316;
  margin-bottom: 16px;
  font-family: ui-monospace, "SF Mono", monospace;
  letter-spacing: 0.02em;
}

/* CTA */
body.landing-dark .tier-card .tier-cta {
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #f5f5f7;
  font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer; margin: 14px 0 20px;
  transition: all 0.16s cubic-bezier(.16,1,.3,1);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
body.landing-dark .tier-card .tier-cta:hover {
  background: #f5f5f7;
  color: #07070b;
  border-color: #f5f5f7;
  transform: translateY(-1px);
}
body.landing-dark .tier-card .tier-cta.is-warm {
  background: linear-gradient(135deg, #f97316, #ec4899);
  border-color: transparent;
  color: white;
  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.32);
}
body.landing-dark .tier-card .tier-cta.is-warm:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(236, 72, 153, 0.55);
  background: linear-gradient(135deg, #f97316, #ec4899);
  color: white;
}
body.landing-dark .tier-card .tier-cta.is-deep {
  background: linear-gradient(135deg, #a855f7, #ec4899);
  border-color: transparent;
  color: white;
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.32);
}
body.landing-dark .tier-card .tier-cta.is-deep:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(168, 85, 247, 0.55);
  color: white;
}
body.landing-dark .tier-card .tier-cta.is-slate {
  background: linear-gradient(135deg, #475569, #1e293b);
  border-color: transparent;
  color: white;
}
body.landing-dark .tier-card .tier-cta.is-slate:hover {
  background: linear-gradient(135deg, #64748b, #334155);
  color: white;
}
body.landing-dark .tier-card .tier-cta.is-current {
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.4);
  cursor: default;
}
body.landing-dark .tier-card .tier-cta.is-current:hover {
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
  transform: none;
  border-color: rgba(74, 222, 128, 0.4);
}

/* Feature list */
body.landing-dark .tier-card .tier-features {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
body.landing-dark .tier-card .tier-features li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: #a1a1aa; line-height: 1.45;
}
body.landing-dark .tier-card .tier-features svg {
  color: #f97316; flex-shrink: 0; margin-top: 2px;
}
body.landing-dark .tier-card.variant-deep .tier-features svg { color: #a855f7; }
body.landing-dark .tier-card.variant-slate .tier-features svg { color: #22d3ee; }

/* ── Margin guarantee strip ───────────────────────────────────────── */

body.landing-dark .pricing-dark-margin {
  display: flex; align-items: center; gap: 16px;
  background: rgba(74, 222, 128, 0.04);
  border: 1px solid rgba(74, 222, 128, 0.18);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 80px;
  font-size: 14px;
  color: #d4d4d8;
}
body.landing-dark .pricing-dark-margin-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(74, 222, 128, 0.16);
  color: #4ade80;
  display: flex; align-items: center; justify-content: center;
}
body.landing-dark .pricing-dark-margin-text { line-height: 1.55; }
body.landing-dark .pricing-dark-margin-pill {
  display: inline-block;
  background: rgba(74, 222, 128, 0.16);
  color: #4ade80;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 5px;
  margin-right: 6px;
}
body.landing-dark .pricing-dark-margin-text a {
  color: #f5f5f7;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 2px;
}

/* ── Pivot panel ──────────────────────────────────────────────────── */

body.landing-dark .pricing-dark-pivot {
  position: relative;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 64px 32px;
  margin-bottom: 96px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}
body.landing-dark .pricing-dark-pivot-bg {
  position: absolute; inset: -40%;
  z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(168, 85, 247, 0.18) 0%,
    rgba(34, 211, 238, 0.10) 30%,
    transparent 60%);
  filter: blur(20px);
  animation: ctaPulse 6s ease-in-out infinite alternate;
}
body.landing-dark .pricing-dark-pivot > *:not(.pricing-dark-pivot-bg) { position: relative; z-index: 1; }
body.landing-dark .pricing-dark-pivot-title {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: #f5f5f7;
}
body.landing-dark .pricing-dark-pivot-sub {
  color: #a1a1aa;
  font-size: 16px;
  line-height: 1.55;
  max-width: 480px;
  margin: 0 auto 24px;
}

/* ── FAQ ──────────────────────────────────────────────────────────── */

body.landing-dark .pricing-dark-faq {
  margin-bottom: 96px;
}
body.landing-dark .pricing-dark-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 880px;
  margin: 0 auto;
}
body.landing-dark .faq-item {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 18px 20px;
  transition: all 0.18s;
}
body.landing-dark .faq-item:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.14);
}
body.landing-dark .faq-item[open] {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(249, 115, 22, 0.3);
}
body.landing-dark .faq-item summary {
  font-size: 15px;
  font-weight: 600;
  color: #f5f5f7;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 28px;
  letter-spacing: -0.005em;
}
body.landing-dark .faq-item summary::-webkit-details-marker { display: none; }
body.landing-dark .faq-item summary::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 8px; height: 8px;
  border-right: 1.5px solid #71717a;
  border-bottom: 1.5px solid #71717a;
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.2s;
}
body.landing-dark .faq-item[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
  border-color: #f97316;
}
body.landing-dark .faq-item p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #a1a1aa;
}

@media (max-width: 760px) {
  body.landing-dark .pricing-dark-faq-grid { grid-template-columns: 1fr; }
}

/* ── Tier grid responsive ─────────────────────────────────────────── */

@media (max-width: 1080px) {
  body.landing-dark .tier-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  body.landing-dark .tier-grid,
  body.landing-dark .tier-grid.tier-grid-team {
    grid-template-columns: 1fr;
  }
}



/* ═══════════════════════════════════════════════════════════════════════
   OHONEY IN-APP DARK THEME
   Applied to every in-app page via <body class="app-dark">. Marketing
   pages keep their own body.landing-dark with mesh/grain decorations.
   The in-app dark surface is solid (no glass), high-contrast, calm.
   ═══════════════════════════════════════════════════════════════════════ */
body.app-dark {
  /* Surface tokens — flip the entire app to dark by redefining the same
     variables the existing 18k-line stylesheet already consumes. */
  --bg:           #0a0a0f;
  --bg-soft:      #14141c;
  --bg-card:      #14141c;
  --bg-elevated:  #1a1a24;
  --line:         rgba(255, 255, 255, 0.10);
  --line-soft:    rgba(255, 255, 255, 0.05);
  --border:       rgba(255, 255, 255, 0.10);
  --border-strong:rgba(255, 255, 255, 0.18);
  --text:         #f5f5f7;
  --text-soft:    #a1a1aa;
  --text-faint:   #71717a;
  /* Brand palette: indigo → warm orange (gradient stops kept available
     for components that want the full Ohoney gradient). */
  --brand:        #ef7d2b;
  --brand-soft:   rgba(239, 125, 43, 0.10);
  --brand-border: rgba(239, 125, 43, 0.32);
  --brand-deep:   #f97316;
  --warm:         #ef7d2b;
  --warm-soft:    rgba(239, 125, 43, 0.10);
  --warm-border:  rgba(239, 125, 43, 0.32);
  --warm-deep:    #f97316;
  --pink:         #ec4899;
  --violet:       #a855f7;

  background: var(--bg);
  color: var(--text);
}

/* ── Universal hardcoded-light overrides ─────────────────────────────── */
/* The existing stylesheet has ~300 places with `background: #fff` or
   `white`. These bulk overrides catch the most common patterns. Specific
   components below get their own dialed-in rules. */
body.app-dark input,
body.app-dark textarea,
body.app-dark select {
  background: var(--bg-elevated);
  color: var(--text);
  border-color: var(--border);
}
body.app-dark input::placeholder,
body.app-dark textarea::placeholder {
  color: var(--text-faint);
}
body.app-dark input:focus,
body.app-dark textarea:focus,
body.app-dark select:focus {
  border-color: var(--warm);
  outline: none;
  box-shadow: 0 0 0 3px rgba(239, 125, 43, 0.15);
}
body.app-dark hr {
  border-color: var(--line);
}

/* ── App chrome: page-content surfaces ───────────────────────────────── */
body.app-dark .page-content,
body.app-dark .app-page,
body.app-dark main.page,
body.app-dark main.page-content {
  background: var(--bg);
  color: var(--text);
}

/* ── Header / slim top bar ───────────────────────────────────────────── */
body.app-dark .app-header,
body.app-dark .app-header-slim {
  background: rgba(10, 10, 15, 0.85);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}

/* ── Side-nav ────────────────────────────────────────────────────────── */
body.app-dark .side-nav {
  background: #0d0d13;
  border-right: 1px solid var(--line);
}
body.app-dark .side-nav-logo-text { color: var(--text); }
body.app-dark .side-nav-logo-text span { color: var(--warm); }
body.app-dark .side-nav-item { color: var(--text-soft); }
body.app-dark .side-nav-item:hover {
  background: var(--bg-elevated);
  color: var(--text);
}
body.app-dark .side-nav-item.is-active {
  background: rgba(239, 125, 43, 0.08);
  color: var(--warm);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
body.app-dark .btn-primary,
body.app-dark button.btn-primary {
  background: linear-gradient(135deg, #f97316 0%, #ec4899 100%);
  color: #fff;
  border: none;
}
body.app-dark .btn-primary:hover {
  filter: brightness(1.08);
}
body.app-dark .btn-secondary,
body.app-dark button.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
}
body.app-dark .btn-secondary:hover {
  background: #20202c;
  border-color: var(--border-strong);
}

/* ── Cards / panels / modals ─────────────────────────────────────────── */
body.app-dark .bk-workspace-card,
body.app-dark .bk-store-card,
body.app-dark .compose-card,
body.app-dark #compose-card,
body.app-dark .modal,
body.app-dark .modal-content,
body.app-dark .research-table-wrap,
body.app-dark .opportunity-card,
body.app-dark .research-tile,
body.app-dark .listing-tile,
body.app-dark .design-tile,
body.app-dark .card,
body.app-dark .panel {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--line);
}
body.app-dark .modal-back {
  background: rgba(0, 0, 0, 0.6);
}

/* ── Brand-kit page specifics ────────────────────────────────────────── */
body.app-dark .bk-workspace-eyebrow {
  color: var(--text-faint);
}
body.app-dark .bk-workspace-name { color: var(--text); }
body.app-dark .bk-field-label { color: var(--text-soft); }
body.app-dark .bk-field-hint { color: var(--text-faint); }
body.app-dark .bk-input,
body.app-dark .bk-textarea {
  background: var(--bg-elevated);
  color: var(--text);
  border-color: var(--border);
}
body.app-dark .bk-input:focus,
body.app-dark .bk-textarea:focus {
  border-color: var(--warm);
}
body.app-dark .bk-swatch-edit {
  background: var(--bg-elevated);
  border-color: var(--border);
}
body.app-dark .bk-swatch-add {
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--text-soft);
}
body.app-dark .bk-swatch-add:hover {
  border-color: var(--warm);
  color: var(--warm);
}
body.app-dark .bk-url-row {
  background: rgba(239, 125, 43, 0.06);
  border-color: rgba(239, 125, 43, 0.22);
}
body.app-dark .bk-url-row.is-done {
  background: rgba(52, 211, 153, 0.06);
  border-color: rgba(52, 211, 153, 0.22);
}
body.app-dark .bk-url-done-text { color: var(--text); }
body.app-dark .bk-url-done-text strong { color: var(--text); }
body.app-dark .bk-url-status,
body.app-dark .bk-kw-status,
body.app-dark .bk-say-status { color: var(--text-faint); }
body.app-dark .bk-url-status.ok,
body.app-dark .bk-kw-status.ok,
body.app-dark .bk-say-status.ok { color: #34d399; }
body.app-dark .bk-url-status.err,
body.app-dark .bk-kw-status.err,
body.app-dark .bk-say-status.err { color: #fb7185; }

/* Keyword chips */
body.app-dark .bk-kw-chips {
  background: var(--bg-elevated);
  border-color: var(--border);
}
body.app-dark .bk-kw-chip {
  background: rgba(168, 85, 247, 0.16);
  color: #e9d5ff;
}
body.app-dark .bk-kw-chip-x {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.65);
}
body.app-dark .bk-kw-chip-x:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
body.app-dark .bk-kw-add-input { color: var(--text); }
body.app-dark .bk-kw-add-input::placeholder { color: var(--text-faint); }
body.app-dark .bk-kw-upload-btn {
  background: var(--bg-elevated);
  color: var(--text-soft);
  border-color: var(--border);
}
body.app-dark .bk-kw-upload-btn:hover {
  background: #20202c;
  color: var(--text);
  border-color: var(--border-strong);
}

/* Sayings chips */
body.app-dark .bk-say-chips {
  background: var(--bg-elevated);
  border-color: var(--border);
}
body.app-dark .bk-say-empty { color: var(--text-faint); }
body.app-dark .bk-say-chip {
  background: rgba(239, 125, 43, 0.14);
  color: #fed7aa;
}
body.app-dark .bk-say-chip-x {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.65);
}
body.app-dark .bk-say-add-input,
body.app-dark .bk-say-add-row .bk-say-add-input {
  background: var(--bg-elevated);
  color: var(--text);
  border-color: var(--border);
}

/* ── EBDC per-listing context strip (Phase A) ───────────────────────── */
body.app-dark #ebdc-context-strip {
  background: var(--bg-card);
  border-color: var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02), 0 6px 18px rgba(0, 0, 0, 0.3);
}
body.app-dark .ebdc-context-loading,
body.app-dark .ebdc-context-unavailable { color: var(--text-soft); }
body.app-dark .ebdc-context-title { color: var(--text); }
body.app-dark .ebdc-context-sub { color: var(--text-soft); }
body.app-dark .ebdc-context-shop { color: var(--text); }
body.app-dark .ebdc-context-toggle { color: var(--text-faint); }
body.app-dark .ebdc-context-toggle:hover { color: var(--text); }
body.app-dark .ebdc-badge { background: var(--bg-elevated); }
body.app-dark .ebdc-badge-label { color: var(--text-faint); }
body.app-dark .ebdc-badge-value { color: var(--text); }
body.app-dark .ebdc-badge-positive {
  background: rgba(52, 211, 153, 0.16);
}
body.app-dark .ebdc-badge-positive .ebdc-badge-value { color: #6ee7b7; }
body.app-dark .ebdc-badge-negative {
  background: rgba(251, 113, 133, 0.16);
}
body.app-dark .ebdc-badge-negative .ebdc-badge-value { color: #fda4af; }
body.app-dark .ebdc-spark-label { color: var(--text-soft); }
body.app-dark .ebdc-spark-meta { color: var(--text-faint); }
body.app-dark .ebdc-spark-svg polyline { stroke: var(--text); }
body.app-dark .ebdc-tags-label { color: var(--text-soft); }
body.app-dark .ebdc-tag-chip {
  background: rgba(34, 211, 238, 0.14);
  color: #a5f3fc;
  border-color: transparent;
}
body.app-dark .ebdc-tag-chip:hover {
  background: rgba(34, 211, 238, 0.22);
}
body.app-dark .ebdc-tag-chip.is-added {
  background: #166534;
  color: #fff;
}
body.app-dark .ebdc-shop-row {
  border-top-color: var(--line);
  color: var(--text-soft);
}
body.app-dark .ebdc-shop-name { color: var(--text); }
body.app-dark .ebdc-context-footer {
  color: var(--text-faint);
}
body.app-dark .ebdc-context-footer a {
  color: var(--text-soft);
}
body.app-dark .ebdc-context-footer a:hover {
  color: var(--warm);
}

/* ── Headings + links inside the app surface ─────────────────────────── */
body.app-dark h1,
body.app-dark h2,
body.app-dark h3,
body.app-dark h4,
body.app-dark h5 { color: var(--text); }
body.app-dark a { color: var(--warm); }
body.app-dark a:hover { color: #fb923c; }

/* ── Auth dock / settings popovers ───────────────────────────────────── */
body.app-dark .auth-dock {
  background: var(--bg-card);
  border-color: var(--line);
}
body.app-dark .auth-ws-current,
body.app-dark .auth-user-current { color: var(--text); }
body.app-dark .auth-user-sub,
body.app-dark .auth-ws-sub { color: var(--text-soft); }

/* ═══════════════════════════════════════════════════════════════════════
   THEME FIXES + LIGHT MODE
   1. Override the widespread `background: var(--text)` button pattern
      that goes invisible in dark mode (light bg + white text).
   2. Explicit body.app-light theme tokens (mirrors :root defaults).
   3. Theme toggle button styling.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Primary-action buttons that hardcoded `background: var(--text)` ─── */
body.app-dark .auth-submit,
body.app-dark .compose-go,
body.app-dark .side-nav-invite-cta,
body.app-dark .dev-quickstart-cta,
body.app-dark .dev-usage-btn-primary,
body.app-dark .brand-popover-apply,
body.app-dark .go-btn,
body.app-dark .auto-btn-primary,
body.app-dark .save-btn,
body.app-dark button[data-primary] {
  background: linear-gradient(135deg, #f97316 0%, #ec4899 100%);
  color: #fff;
  border-color: transparent;
}
body.app-dark .auth-submit:hover,
body.app-dark .compose-go:hover,
body.app-dark .side-nav-invite-cta:hover,
body.app-dark .dev-quickstart-cta:hover,
body.app-dark .dev-usage-btn-primary:hover,
body.app-dark .brand-popover-apply:hover,
body.app-dark .go-btn:hover,
body.app-dark .auto-btn-primary:hover {
  background: linear-gradient(135deg, #f97316 0%, #ec4899 100%);
  filter: brightness(1.1);
  border-color: transparent;
}

/* Disabled state — gradient too loud for "can't click", revert to neutral. */
body.app-dark .auth-submit:disabled,
body.app-dark .compose-go:disabled,
body.app-dark .go-btn:disabled {
  background: var(--bg-elevated);
  color: var(--text-faint);
  filter: none;
}

/* ── Explicit light theme (body.app-light) ──────────────────────────────
   This is mostly a no-op since :root already holds the light tokens.
   Defined for parity with body.app-dark so the toggle has a symmetric
   on/off, and so any future light-only overrides have a home. */
body.app-light {
  --bg:           #fafafa;
  --bg-soft:      #f4f4f5;
  --bg-card:      #ffffff;
  --bg-elevated:  #ffffff;
  --line:         rgba(0, 0, 0, 0.08);
  --line-soft:    rgba(0, 0, 0, 0.04);
  --border:       rgba(0, 0, 0, 0.12);
  --border-strong:rgba(0, 0, 0, 0.18);
  --text:         #0a0a0f;
  --text-soft:    #525252;
  --text-faint:   #737373;
  /* Brand stays warm-orange in light mode too — consistent Ohoney identity. */
  --brand:        #ef7d2b;
  --brand-soft:   #fff4eb;
  --brand-border: #fcd9b6;
  --brand-deep:   #9c4612;
  --warm:         #ef7d2b;
  --warm-soft:    #fff4eb;
  --warm-border:  #fcd9b6;
  --warm-deep:    #9c4612;

  background: var(--bg);
  color: var(--text);
}

/* Theme toggle is shelved — hide any leftover instance (stale browser
   cache, third-party copy, etc.) so it can never render. The old rules
   used to live here. */
.theme-toggle,
#theme-toggle,
.theme-toggle-icon,
.theme-toggle-label,
.theme-toggle-sun,
.theme-toggle-moon { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   LATEST MARKETING-PAGE CSS — synced from credit-ledger worktree
   2026-05-17
   .landing-hero-split, .hero-h1-line1/line2, .hero-design-word,
   .hero-tile state-done, hero-product-* variants, etc.
   ═══════════════════════════════════════════════════════════════════════ */
/* Two-column hero variant — copy on the left, product mock on the right
   so the generating-tile animation lives above the fold beside the
   headline. Drops back to single-column below ~880px. */
.landing-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  /* Top-align both columns so the pill on the left starts at the same
     baseline as the product-window chrome on the right. `align-items:
     center` was floating both columns down to the vertical midpoint of
     the row, which left a 150-280px void above the content. Top-align +
     tighter top padding pulls the headline back up to the fold. */
  align-items: start;
  text-align: left;
  padding-top: 28px;
  padding-bottom: 48px;
  max-width: 1240px;
}
.landing-hero-split .landing-hero-copy {
  min-width: 0;
}
.landing-hero-split .landing-hero-mock {
  min-width: 0;
}
.landing-hero-split .landing-h1 {
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.02;
  margin: 0 0 22px;
  max-width: none;
  align-items: flex-start;
}
.landing-hero-split .landing-sub {
  margin: 0 0 28px;
  max-width: 540px;
}
.landing-hero-split .hero-pill {
  margin-bottom: 22px;
}
.landing-hero-split .landing-ctas {
  justify-content: flex-start;
}
.landing-hero-split .landing-trust {
  justify-content: flex-start;
}
.landing-hero-split .hero-product {
  margin-top: 0;
  max-width: 100%;
}
/* Inside the side panel the grid is portrait (3×4) — feels like a search
   results page, plays nicely beside the headline column. */
.landing-hero-split .hero-product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 14px;
}
/* In the narrower side panel the chrome of the mock has to compress
   without breaking the bar layout. Shrink the search bar's min-width so
   it doesn't push the "12 generating" pill off-screen. */
.landing-hero-split .hero-product-search {
  min-width: 0;
  flex: 1 1 auto;
  margin-left: 10px;
  font-size: 11px;
  overflow: hidden;
}
.landing-hero-split .hero-product-search-text {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landing-hero-split .hero-product-bar {
  padding: 12px 14px;
}
.landing-hero-split .hero-product-meta {
  flex-shrink: 0;
}
.landing-hero-split .hero-product-pill {
  font-size: 11px;
  white-space: nowrap;
}

/* The animated "Design" word — gradient flows continuously across the
   letters; on initial load it inherits the parent reveal's fade-up so
   it doesn't feel disconnected from the rest of the H1. */
.hero-h1-line1 {
  display: block;
}
.hero-h1-line2 {
  display: block;
}
.hero-design-word {
  display: inline-block;
  background: linear-gradient(
    90deg,
    #fbbf24 0%, #f97316 22%, #ec4899 44%,
    #a855f7 66%, #38bdf8 78%, #f97316 92%, #fbbf24 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: design-word-flow 7s linear infinite;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.hero-design-rest {
  /* Keeps "like" visually subordinate to "Design" so the eye lands on
     the animated word first. */
  color: #f5f5f7;
  font-weight: 800;
}
@keyframes design-word-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-design-word { animation: none; }
}

@media (max-width: 880px) {
  .landing-hero-split {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 32px;
    padding-top: 48px;
  }
  .landing-hero-split .landing-sub {
    margin-left: auto;
    margin-right: auto;
  }
  .landing-hero-split .landing-ctas,
  .landing-hero-split .landing-trust {
    justify-content: center;
  }
  .landing-hero-split .hero-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .landing-hero-split .hero-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

  /* Cream tile under the real design so transparent-PNG designs read on
     the dark hero. The library's designs are art on transparent ground;
     they expect a light surface to live on. */
  background: #f6efe2;
  border: 1px solid rgba(255, 255, 255, 0.06);
.hero-tile.state-done > img {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
/* Soft top-left highlight reads as a glossy print — kept subtle so it
   doesn't fight the underlying design. */
.hero-tile.state-done::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.35) 0%, transparent 50%);
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: soft-light;
}
/* ── Tile composition templates ──────────────────────────────────────
   Each .heroT-* template is a distinct layout. Tiles get assigned a
   shuffled template per cycle so no two tiles repeat in one render. */
.heroT-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 9%;
  text-align: center;
  overflow: hidden;
}
.heroT-svg { width: 100%; height: 100%; flex: 1 1 auto; min-height: 0; }

/* Typography families */
.heroT-serif   { font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-weight: 700; letter-spacing: -.005em; }
.heroT-script  { font-family: "Caveat", "Allura", "Brush Script MT", cursive; font-weight: 600; }
.heroT-display { font-family: "Bebas Neue", "Oswald", "Impact", system-ui, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.heroT-sans    { font-family: "Inter", system-ui, -apple-system, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.heroT-sm { font-size: clamp(8px,  1.0vw, 11px); line-height: 1.05; }
.heroT-lg { font-size: clamp(10px, 1.4vw, 17px); line-height: 1.0;  }
.heroT-xl { font-size: clamp(16px, 2.6vw, 36px); line-height: .96; }
.heroT-sub { font-size: clamp(6px, 0.78vw, 9px); font-family: "Inter", system-ui, sans-serif; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.heroT-tag { font-size: clamp(6px, 0.78vw, 9px); font-family: "Inter", system-ui, sans-serif; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.heroT-block { display: block; word-break: break-word; }

/* Template 0 — classic stack */
.heroT-stack { gap: 5%; }
.heroT-stack > .heroT-svg { max-height: 54%; }

/* Template 1 — vintage circle badge */
.heroT-badge { padding: 4%; }
.heroT-badge .heroT-svg { width: 100%; height: 100%; }

/* Template 2 — gigantic typography hero */
.heroT-hero { padding: 12% 8%; justify-content: center; }

/* Template 3 — icon monolith with tiny labels */
.heroT-monolith { gap: 4%; }
.heroT-monolith .heroT-svg { max-height: 64%; }

/* Template 4 — double frame */
.heroT-frame { padding: 9%; }
.heroT-frame-inner {
  width: 100%; height: 100%;
  border: 1.5px solid;
  padding: 5%;
  display: flex; align-items: center; justify-content: center;
}
.heroT-frame-outer {
  width: 100%; height: 100%;
  border: 1px solid;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6%; padding: 4%;
}

/* Template 5 — stacked quote with hairline rule */
.heroT-stackedQuote { gap: 7%; }
.heroT-rule { width: 36%; height: 1.5px; display: block; opacity: .7; }

/* Template 6 — icon-flanked center text */
.heroT-flank {
  flex-direction: row;
  gap: 4%;
  align-items: center;
}
.heroT-flank-icon { width: 22%; height: 80%; display: flex; align-items: center; }
.heroT-flank-icon .heroT-svg { width: 100%; height: 100%; }
.heroT-flank-text { flex: 1 1 auto; line-height: 1; }

/* Template 7 — banner ribbon */
.heroT-banner { gap: 6%; }
.heroT-banner .heroT-svg { max-height: 50%; }
.heroT-ribbon {
  display: inline-block;
  padding: 4% 10%;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: clamp(9px, 1.3vw, 14px);
  clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%, 8% 50%);
}

/* Template 8 — sun rays */
.heroT-rays { gap: 4%; }
.heroT-rays .heroT-svg { max-height: 64%; }

/* Template 9 — EST. label with horizontal rules */
.heroT-est { gap: 6%; }
.heroT-est-rule { display: flex; align-items: center; gap: 4%; width: 88%; }
.heroT-est-line { flex: 1 1 auto; height: 1.3px; opacity: .7; }
.heroT-est-text {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(6px, .78vw, 9px);
  font-weight: 800;
  letter-spacing: .2em;
}

/* Template 10 — half / half background */
.heroT-half { padding: 0 !important; gap: 0; }
.heroT-half-top, .heroT-half-bot { flex: 1 1 50%; width: 100%; display: flex; align-items: center; justify-content: center; padding: 8%; }
.heroT-half-bot { padding-top: 4%; }

/* Template 11 — polaroid-style framed icon */
.heroT-polaroid { gap: 4%; padding: 8%; }
.heroT-polaroid-frame {
  width: 60%;
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.heroT-polaroid-frame .heroT-svg { width: 80%; height: 80%; }

/* Curved text on the badge — text-anchor middle handles centering */
.heroT-curve { font-weight: 700; }
/* Three solo tiers now — constrain width so cards don't spill viewport
   edges. `minmax(0, 1fr)` lets the columns shrink past their content's
   intrinsic min-width (long feature lines were forcing horizontal
   overflow on narrower laptops). Outer page padding is set further down
   on .landing-main / .pricing-dark-* sections. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0 auto 96px;
  max-width: 1100px;
  padding: 0 32px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
@media (max-width: 900px) {
  body.landing-dark .tier-grid,
  body.landing-dark .tier-grid.tier-grid-team {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
}
/* Center the pricing head + the post-grid bits so the whole flow lines
   up with the (now max-width-constrained) tier grid. */
body.landing-dark .pricing-dark-head,
body.landing-dark .pricing-dark-runout,
body.landing-dark .pricing-dark-pivot,
body.landing-dark .pricing-dark-faq {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}

/* The MOST PICKED badge sits absolutely-positioned above the card; the
   tier grid needs a touch of top padding so the badge doesn't kiss the
   element above it. */
body.landing-dark .tier-grid { padding-top: 18px; }

  /* `overflow: visible` so the MOST PICKED badge (absolutely positioned
     at top:-10px) isn't clipped. The ::before highlight at top:0 / h:1px
     can't escape regardless. */
  overflow: visible;
/* One-line reassurance under the tier grid. Replaces the heavier margin
   strip that used to live here. Quiet, centered, no chrome. */
body.landing-dark .pricing-dark-runout {
  text-align: center;
  margin: 32px auto 72px;
  max-width: 640px;
  color: #a3a3aa;
  font-size: 14px;
  line-height: 1.55;
}
body.landing-dark .pricing-dark-runout strong {
  color: #f5f5f7;
  font-weight: 600;
}


/* ── Pricing comparison table ───────────────────────────────────────────
   Kittl-style detailed matrix that sits below the tier cards. Tier cards
   sell the pitch; this table answers the "but what do I actually get"
   question for the buyer who scrolls. */
body.landing-dark .pricing-compare {
  max-width: 1100px;
  margin: 40px auto 96px;
  padding: 0 32px;
  box-sizing: border-box;
}
body.landing-dark .pricing-compare-head {
  text-align: center;
  margin-bottom: 28px;
}
body.landing-dark .pricing-compare-wrap {
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
body.landing-dark .pricing-compare-table {
  width: 100%;
  border-collapse: collapse;
  color: #d4d4d8;
  font-size: 14px;
  min-width: 720px;
}
body.landing-dark .pricing-compare-table th,
body.landing-dark .pricing-compare-table td {
  padding: 14px 18px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.landing-dark .pricing-compare-table thead th {
  position: sticky;
  top: 0;
  background: rgba(20, 20, 28, 0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 22px 18px 18px;
  z-index: 2;
}
body.landing-dark .pricing-compare-table .pc-feature-col,
body.landing-dark .pricing-compare-table tbody th[scope="row"] {
  text-align: left;
  color: #f5f5f7;
  font-weight: 500;
  width: 38%;
}
body.landing-dark .pricing-compare-table .pc-th-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #f5f5f7;
  letter-spacing: -0.01em;
}
body.landing-dark .pricing-compare-table .pc-th-price {
  display: block;
  font-size: 12px;
  color: #a1a1aa;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
body.landing-dark .pricing-compare-table .pc-th-pop {
  background: linear-gradient(180deg, rgba(249, 115, 22, 0.10), transparent 70%);
  border-left: 1px solid rgba(249, 115, 22, 0.18);
  border-right: 1px solid rgba(249, 115, 22, 0.18);
  position: relative;
}
body.landing-dark .pricing-compare-table .pc-th-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: white;
  background: linear-gradient(135deg, #f97316, #ec4899);
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 6px;
  box-shadow: 0 6px 16px rgba(236, 72, 153, 0.35);
}
body.landing-dark .pricing-compare-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}
body.landing-dark .pricing-compare-table .pc-section td {
  text-align: left;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #a1a1aa;
  background: rgba(255, 255, 255, 0.025);
  padding: 16px 18px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
body.landing-dark .pricing-compare-table td[data-tick] {
  color: #f97316;
  font-size: 16px;
  font-weight: 700;
}
body.landing-dark .pricing-compare-table tbody td {
  font-variant-numeric: tabular-nums;
  color: #d4d4d8;
}
body.landing-dark .pricing-compare-table tbody td:empty::after,
body.landing-dark .pricing-compare-table tbody td:not([data-tick]):is(:empty) {
  content: "—";
  color: rgba(255, 255, 255, 0.25);
}
body.landing-dark .pricing-compare-table tfoot td {
  padding: 22px 18px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: none;
}
body.landing-dark .pricing-compare-table .pc-cta {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}
body.landing-dark .pricing-compare-foot {
  text-align: center;
  margin: 22px 0 0;
  color: #a1a1aa;
  font-size: 14px;
}
body.landing-dark .pricing-compare-foot a {
  color: #f5f5f7;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 3px;
}
body.landing-dark .pricing-compare-foot a:hover {
  text-decoration-color: #f97316;
  color: #f97316;
}

/* Visually-hidden helper for screen reader-only labels. Standard pattern. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Hero scene system ──────────────────────────────────────────────
   Container hosts 4 absolutely-positioned scenes; only the .is-active
   scene fades into view. The body matches the original product-grid
   visual footprint so swapping scenes doesn't shift hero height. */
.hero-product-body {
  position: relative;
  min-height: 480px;
}
.hero-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
  padding: 22px 22px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* Center content vertically — connect/research/edit have fewer items
     than the 12-tile grid so they'd otherwise hug the top of the body
     and leave 200px of dead space at the bottom. */
  justify-content: center;
  gap: 14px;
}
.hero-scene.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.hero-scene-generate { padding: 0; }
.hero-scene-generate.is-active { padding: 0; }

/* Scene heads (eyebrow + title) used by Connect / Research / Edit.
   Fade in once their scene activates so the headline doesn't pop
   before the body content. */
.hero-scene-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s ease 0.05s, transform 0.4s ease 0.05s;
}
.hero-scene.is-active .hero-scene-head {
  opacity: 1;
  transform: none;
}
.hero-scene-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #f97316;
}
.hero-scene-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f5f5f7;
}

/* Meta-pill dot variants used by the orchestrator */
body.landing-dark .dot.dot-warm   { background: #f97316; box-shadow: 0 0 8px rgba(249, 115, 22, 0.6); }
body.landing-dark .dot.dot-purple { background: #a855f7; box-shadow: 0 0 8px rgba(168, 85, 247, 0.6); }
body.landing-dark .dot.dot-good   { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.6); }

/* ── Scene 1: Connect ─────────────────────────────────────────────── */
.hero-connect-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-connect-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.hero-connect-row.is-visible {
  opacity: 1;
  transform: none;
}
.hero-connect-row.is-done {
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.06);
}
.hero-connect-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  color: white;
  font-weight: 700;
  font-size: 14px;
}
.hero-connect-name {
  color: #f5f5f7;
  font-weight: 600;
  font-size: 14px;
}
.hero-connect-status {
  font-size: 12px;
  color: #a1a1aa;
  font-variant-numeric: tabular-nums;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}
.hero-connect-row.is-done .hero-connect-status {
  color: #34d399;
}

/* ── Scene 2: Research ────────────────────────────────────────────── */
.hero-research-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero-research-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 4px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.hero-research-card.is-visible { opacity: 1; transform: none; }
.hero-research-name {
  color: #f5f5f7;
  font-weight: 600;
  font-size: 13px;
}
.hero-research-stat {
  color: #34d399;
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.hero-research-bar {
  grid-column: 1 / -1;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.hero-research-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #f97316, #ec4899);
  border-radius: inherit;
  transition: width 0.7s cubic-bezier(.16,1,.3,1) 0.15s;
}
.hero-research-card.is-visible .hero-research-fill {
  width: var(--w, 50%);
}
.hero-research-lib {
  grid-column: 2;
  grid-row: 1;
  color: #71717a;
  font-size: 11px;
  align-self: end;
}
.hero-research-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 10px 12px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(168, 85, 247, 0.06);
  font-size: 12px;
  color: #d4d4d8;
}
.hero-research-foot-icon { font-size: 14px; }

/* ── Scene 4: Edit ────────────────────────────────────────────────── */
.hero-edit-stage {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 14px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.hero-edit-preview {
  background: #f6efe2;
  border-radius: 14px;
  padding: 8%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  position: relative;
  /* Sheen overlay reads as a glossy print, ties the cream tile to the
     dark scene without losing the design's contrast. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 10px 30px rgba(0, 0, 0, 0.25);
}
.hero-edit-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.35) 0%, transparent 55%);
  mix-blend-mode: soft-light;
  pointer-events: none;
  border-radius: inherit;
}
.hero-edit-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.hero-edit-tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
.hero-edit-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: #f5f5f7;
  cursor: default;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.hero-edit-chip.is-visible { opacity: 1; transform: none; }
.hero-edit-chip.is-active {
  border-color: rgba(249, 115, 22, 0.6);
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.18), rgba(236, 72, 153, 0.12));
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.25);
}
.hero-edit-swatches {
  display: flex;
  gap: 6px;
  padding-top: 6px;
}
.hero-edit-swatch {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(.34, 1.56, .64, 1);
}
.hero-edit-swatch.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ── Scene 5: Recolor (t-shirt grid + swatch column) ──────────────────
   Showcases the recolor pipeline — same mockup, every color you sell.
   Layout: 3×2 grid of tee thumbnails on the left, vertical swatch chip
   column on the right that maps color → tile. Each cell pops in with a
   slight scale + the chip's dot animates from the swatch column toward
   the tile (cell border picks up the swatch color when active). */
.hero-recolor-stage {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 14px;
  flex: 1;
  min-height: 0;
}
.hero-recolor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 8px;
}
.hero-recolor-cell {
  position: relative;
  background: #f6efe2;
  border-radius: 10px;
  border: 2px solid var(--swatch, transparent);
  overflow: hidden;
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.32s ease, transform 0.36s cubic-bezier(.34, 1.56, .64, 1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.hero-recolor-cell.is-visible {
  opacity: 1;
  transform: scale(1);
}
.hero-recolor-cell img {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  object-fit: contain;
  display: block;
}
.hero-recolor-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.28) 0%, transparent 55%);
  mix-blend-mode: soft-light;
  pointer-events: none;
  border-radius: inherit;
}
.hero-recolor-dot {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  z-index: 2;
}

.hero-recolor-swatchcol {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.hero-recolor-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: #d4d4d8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.005em;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.hero-recolor-chip.is-visible {
  opacity: 1;
  transform: none;
}
.hero-recolor-chip-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex: 0 0 auto;
}
.hero-recolor-chip-name {
  white-space: nowrap;
}

/* ── Pricing: All plans include strip ────────────────────────────────
   Kittl-style platform-wide value row. Soft-bg card containing a title
   plus a 4-column grid of icon + 2-line text blurbs. The whole strip
   sits between the tier cards / runout line and the heavier comparison
   matrix so the visitor reads "here's what you always get" first. */
body.landing-dark .pricing-allinclude {
  max-width: 1100px;
  margin: 40px auto 56px;
  padding: 22px 26px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-sizing: border-box;
}
body.landing-dark .pricing-allinclude-title {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a1a1aa;
}
body.landing-dark .pricing-allinclude-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 28px;
}
@media (max-width: 900px) {
  body.landing-dark .pricing-allinclude-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  body.landing-dark .pricing-allinclude-grid {
    grid-template-columns: 1fr;
  }
}
body.landing-dark .pai-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
}
body.landing-dark .pai-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(249, 115, 22, 0.10);
  color: #f97316;
  border: 1px solid rgba(249, 115, 22, 0.22);
  flex: 0 0 auto;
}
body.landing-dark .pai-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
body.landing-dark .pai-text strong {
  color: #f5f5f7;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
body.landing-dark .pai-text span {
  color: #a1a1aa;
  font-size: 12.5px;
  line-height: 1.45;
}

/* ── Pricing: How credits work panel ────────────────────────────────
   Honest credit-cost breakdown. Sits between the tier cards and the
   promise section. Reads more like documentation than marketing — the
   point is to defuse "how many designs do I actually get?" before the
   visitor has to ask. Big credit numbers anchor each row so the math
   is unambiguous. */
body.landing-dark .credits-howto {
  max-width: 1100px;
  margin: 16px auto 48px;
  padding: 26px 30px 22px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-sizing: border-box;
}
body.landing-dark .credits-howto-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}
body.landing-dark .credits-howto-eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--brand-deep);
}
body.landing-dark .credits-howto-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: #f5f5f7;
  letter-spacing: -0.015em;
}
body.landing-dark .credits-howto-em {
  color: var(--brand);
}
body.landing-dark .credits-howto-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #a1a1aa;
  max-width: 720px;
}
body.landing-dark .credits-howto-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 18px;
  margin-bottom: 14px;
}
@media (max-width: 900px) {
  body.landing-dark .credits-howto-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  body.landing-dark .credits-howto-grid {
    grid-template-columns: 1fr;
  }
}
body.landing-dark .credits-howto-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}
body.landing-dark .credits-howto-cost {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(249, 115, 22, 0.10);
  border: 1px solid rgba(249, 115, 22, 0.22);
  color: var(--brand-deep);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
body.landing-dark .credits-howto-unit {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
  margin-left: 1px;
}
body.landing-dark .credits-howto-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
body.landing-dark .credits-howto-text strong {
  color: #f5f5f7;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
body.landing-dark .credits-howto-text span {
  color: #a1a1aa;
  font-size: 12.5px;
  line-height: 1.45;
}
body.landing-dark .credits-howto-foot {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: #a1a1aa;
  text-align: center;
}
body.landing-dark .credits-howto-foot strong {
  color: #f5f5f7;
  font-weight: 600;
}

/* ── Problem section: Old way vs Ohoney way comparison ──────────────────
   Two columns stacked at small breakpoints. Left column reads chaotic
   (per-row mark, tab counter, red-tinted border). Right column reads
   resolved (green checks, brighter card surface). Items animate in via
   staggered slide. */
.landing-problem .problem-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 36px;
}
@media (max-width: 880px) {
  .landing-problem .problem-compare { grid-template-columns: 1fr; }
}
.landing-problem .problem-col {
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  display: flex; flex-direction: column; gap: 18px;
  position: relative; overflow: hidden;
}
.landing-problem .problem-col-old {
  border-color: rgba(239, 68, 68, 0.22);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(239, 68, 68, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
}
.landing-problem .problem-col-new {
  border-color: rgba(124, 58, 237, 0.32);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(124, 58, 237, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.06), 0 20px 60px -30px rgba(124, 58, 237, 0.4);
}
.landing-problem .problem-col-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
.landing-problem .problem-col-label {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-soft);
}
.landing-problem .problem-col-new .problem-col-label { color: #c4b5fd; }
.landing-problem .problem-col-cost {
  font-size: 18px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(239, 68, 68, 0.85);
}
.landing-problem .problem-col-new .problem-col-cost { color: #a7f3d0; }
.landing-problem .problem-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.landing-problem .problem-list li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  opacity: 0;
  transform: translateY(6px);
  animation: problem-row-in 0.5s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 100ms + 200ms);
}
.landing-problem .problem-col-old .problem-list li:nth-child(1) { --i: 0; }
.landing-problem .problem-col-old .problem-list li:nth-child(2) { --i: 1; }
.landing-problem .problem-col-old .problem-list li:nth-child(3) { --i: 2; }
.landing-problem .problem-col-old .problem-list li:nth-child(4) { --i: 3; }
.landing-problem .problem-col-old .problem-list li:nth-child(5) { --i: 4; }
.landing-problem .problem-col-new .problem-list li:nth-child(1) { --i: 5; }
.landing-problem .problem-col-new .problem-list li:nth-child(2) { --i: 6; }
.landing-problem .problem-col-new .problem-list li:nth-child(3) { --i: 7; }
.landing-problem .problem-col-new .problem-list li:nth-child(4) { --i: 8; }
.landing-problem .problem-col-new .problem-list li:nth-child(5) { --i: 9; }
@keyframes problem-row-in {
  to { opacity: 1; transform: translateY(0); }
}
.landing-problem .problem-list-mark {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.14);
  color: rgba(248, 113, 113, 0.9);
  font-size: 12px;
  font-weight: 700;
}
.landing-problem .problem-list-check {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: rgba(124, 58, 237, 0.2);
  color: #c4b5fd;
  font-size: 13px;
  font-weight: 700;
}
.landing-problem .problem-list-text {
  font-size: 14px; color: var(--text); line-height: 1.45;
}
.landing-problem .problem-list-meta {
  font-size: 11px;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.landing-problem .problem-col-foot {
  margin: 0; padding-top: 4px;
  font-size: 13px; line-height: 1.5;
  color: var(--text-soft);
}
.landing-problem .problem-col-new .problem-col-foot {
  color: #ddd6fe; font-weight: 500;
}

/* ── Built-for cards: per-segment animated mocks ───────────────────────
   Each segment card gets a unique mini-visual at the bottom — listings
   grid, product card, vertical video, brand kit. All CSS-only. They
   loop subtly to give the section motion without distracting from copy. */
.builtfor-card-rich {
  display: flex;
  flex-direction: column;
}
.builtfor-card-rich p {
  flex: 1;
}
.builtfor-mock {
  margin-top: 18px;
  height: 84px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px;
  position: relative;
  overflow: hidden;
}

/* Listings mock — 3x3 tile fill */
.builtfor-mock-listings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
}
.builtfor-mock-listings span {
  border-radius: 4px;
  background: linear-gradient(135deg, #f97316, #fb923c);
  opacity: 0;
  animation: bfmock-listing-pulse 4s var(--d, 0s) infinite ease-in-out;
}
.builtfor-mock-listings span:nth-child(2) { background: linear-gradient(135deg, #ec4899, #f472b6); }
.builtfor-mock-listings span:nth-child(3) { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.builtfor-mock-listings span:nth-child(4) { background: linear-gradient(135deg, #14b8a6, #2dd4bf); }
.builtfor-mock-listings span:nth-child(5) { background: linear-gradient(135deg, #0ea5e9, #38bdf8); }
.builtfor-mock-listings span:nth-child(6) { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.builtfor-mock-listings span:nth-child(7) { background: linear-gradient(135deg, #ef4444, #f87171); }
.builtfor-mock-listings span:nth-child(8) { background: linear-gradient(135deg, #84cc16, #a3e635); }
.builtfor-mock-listings span:nth-child(9) { background: linear-gradient(135deg, #a855f7, #c084fc); }
@keyframes bfmock-listing-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.96); }
  50%      { opacity: 1; transform: scale(1); }
}

/* Storefront mock — product card silhouette */
.builtfor-mock-storefront {
  display: flex; flex-direction: column; gap: 6px;
  justify-content: center;
}
.builtfor-mock-storefront .bfmock-img {
  height: 36px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.4), rgba(236, 72, 153, 0.3));
  position: relative;
  overflow: hidden;
}
.builtfor-mock-storefront .bfmock-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  animation: bfmock-shimmer 2.4s infinite;
}
.builtfor-mock-storefront .bfmock-row {
  height: 6px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.18);
}
.builtfor-mock-storefront .bfmock-row-wide { width: 86%; }
.builtfor-mock-storefront .bfmock-row-mid  { width: 56%; background: rgba(255, 255, 255, 0.1); }
.builtfor-mock-storefront .bfmock-price {
  position: absolute; right: 12px; bottom: 10px;
  font-size: 11px; font-weight: 700;
  color: #d8b4fe; letter-spacing: 0.02em;
}
@keyframes bfmock-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Video mock — vertical 9:16 frame with pulsing play button */
.builtfor-mock-video {
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.builtfor-mock-video .bfmock-vidframe {
  width: 38px; height: 62px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(236, 72, 153, 0.55), rgba(124, 58, 237, 0.5));
  position: relative;
  overflow: hidden;
}
.builtfor-mock-video .bfmock-vidplay {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 0; height: 0;
  border-left: 10px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 2px;
  animation: bfmock-vid-pulse 1.8s infinite ease-in-out;
}
.builtfor-mock-video .bfmock-vidbar {
  position: absolute; left: 6px; right: 6px; bottom: 6px;
  height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.builtfor-mock-video .bfmock-vidbar::after {
  content: ""; display: block; height: 100%;
  width: 40%;
  background: #fff;
  animation: bfmock-vid-progress 3.2s infinite linear;
}
.builtfor-mock-video .bfmock-vidtag {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em;
  color: #f9a8d4;
  font-variant-numeric: tabular-nums;
}
@keyframes bfmock-vid-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.85; }
  50%      { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}
@keyframes bfmock-vid-progress {
  0%   { width: 8%; }
  100% { width: 92%; }
}

/* Brand-kit mock — color swatches + type stub */
.builtfor-mock-brandkit {
  display: flex; align-items: center; gap: 8px;
  justify-content: flex-start;
  padding-left: 14px;
}
.builtfor-mock-brandkit .bfmock-sw {
  width: 36px; height: 50px;
  border-radius: 6px;
  background: var(--c);
  opacity: 0;
  transform: translateY(8px);
  animation: bfmock-sw-drop 3.4s var(--d, 0s) infinite ease-in-out;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.4);
}
.builtfor-mock-brandkit .bfmock-type {
  margin-left: 10px;
  font-size: 28px;
  font-weight: 700;
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: -0.02em;
  font-family: Georgia, serif;
  opacity: 0;
  animation: bfmock-type-in 3.4s 0.4s infinite ease-in-out;
}
@keyframes bfmock-sw-drop {
  0%, 5%   { opacity: 0; transform: translateY(8px); }
  20%, 80% { opacity: 1; transform: translateY(0); }
  95%, 100%{ opacity: 0.5; transform: translateY(0); }
}
@keyframes bfmock-type-in {
  0%, 15%  { opacity: 0; transform: translateX(-4px); }
  30%, 80% { opacity: 0.95; transform: translateX(0); }
  95%, 100%{ opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .builtfor-mock-listings span,
  .builtfor-mock-video .bfmock-vidplay,
  .builtfor-mock-video .bfmock-vidbar::after,
  .builtfor-mock-storefront .bfmock-img::after,
  .builtfor-mock-brandkit .bfmock-sw,
  .builtfor-mock-brandkit .bfmock-type,
  .landing-problem .problem-list li {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Built-for mocks v2 — richer, top-anchored, more visual density ──
   Replaces the v1 mocks (which lived at the bottom of each card). The
   .builtfor-mock-top modifier flips them above the icon/copy so the
   visual leads. Mock height bumped 84px → 132px to give animations room
   to breathe. */
.builtfor-card-rich {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.builtfor-card-rich .builtfor-icon { margin-top: 0; }
.builtfor-mock-top {
  margin-top: 0;
  margin-bottom: 4px;
  height: 132px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.18) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px;
  position: relative;
  overflow: hidden;
}

/* Shared badge style — used on listings ("✓ 15 listed") and brand kit
   ("✓ Brand-locked"). Floats top-right with a pop-in animation. */
.bfmock-badge {
  position: absolute;
  top: 10px; right: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 8px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-4px);
  animation: bfmock-badge-pop 4s 1.2s infinite ease-out;
  z-index: 2;
  backdrop-filter: blur(6px);
}
.bfmock-badge-listed   { background: rgba(16, 185, 129, 0.22); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.4); }
.bfmock-badge-approved { background: rgba(124, 58, 237, 0.22); color: #c4b5fd; border: 1px solid rgba(124, 58, 237, 0.4); }
@keyframes bfmock-badge-pop {
  0%, 20%  { opacity: 0; transform: translateY(-6px) scale(0.9); }
  30%, 80% { opacity: 1; transform: translateY(0) scale(1); }
  95%, 100%{ opacity: 0.55; }
}

/* ── Listings mock v2 — 5x3 grid of vivid product tiles ────────────── */
.builtfor-mock-listings .bfmock-listings-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
  height: 100%;
}
.builtfor-mock-listings .bfmock-listings-grid span {
  border-radius: 4px;
  opacity: 0;
  animation: bfmock-listing-pulse 4s var(--d, 0s) infinite ease-in-out;
}
.builtfor-mock-listings .bfmock-listings-grid span:nth-child(15n+1)  { background: linear-gradient(135deg, #f97316, #fb923c); }
.builtfor-mock-listings .bfmock-listings-grid span:nth-child(15n+2)  { background: linear-gradient(135deg, #ec4899, #f472b6); }
.builtfor-mock-listings .bfmock-listings-grid span:nth-child(15n+3)  { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.builtfor-mock-listings .bfmock-listings-grid span:nth-child(15n+4)  { background: linear-gradient(135deg, #14b8a6, #2dd4bf); }
.builtfor-mock-listings .bfmock-listings-grid span:nth-child(15n+5)  { background: linear-gradient(135deg, #0ea5e9, #38bdf8); }
.builtfor-mock-listings .bfmock-listings-grid span:nth-child(15n+6)  { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.builtfor-mock-listings .bfmock-listings-grid span:nth-child(15n+7)  { background: linear-gradient(135deg, #ef4444, #f87171); }
.builtfor-mock-listings .bfmock-listings-grid span:nth-child(15n+8)  { background: linear-gradient(135deg, #84cc16, #a3e635); }
.builtfor-mock-listings .bfmock-listings-grid span:nth-child(15n+9)  { background: linear-gradient(135deg, #a855f7, #c084fc); }
.builtfor-mock-listings .bfmock-listings-grid span:nth-child(15n+10) { background: linear-gradient(135deg, #d946ef, #e879f9); }
.builtfor-mock-listings .bfmock-listings-grid span:nth-child(15n+11) { background: linear-gradient(135deg, #06b6d4, #22d3ee); }
.builtfor-mock-listings .bfmock-listings-grid span:nth-child(15n+12) { background: linear-gradient(135deg, #facc15, #fde047); }
.builtfor-mock-listings .bfmock-listings-grid span:nth-child(15n+13) { background: linear-gradient(135deg, #be185d, #db2777); }
.builtfor-mock-listings .bfmock-listings-grid span:nth-child(15n+14) { background: linear-gradient(135deg, #059669, #10b981); }
.builtfor-mock-listings .bfmock-listings-grid span:nth-child(15n+15) { background: linear-gradient(135deg, #7c3aed, #a78bfa); }

/* ── Storefront mock v2 — full product card with brand swatches, stars, CTA ── */
.builtfor-mock-storefront {
  display: flex; flex-direction: column; gap: 8px;
}
.builtfor-mock-storefront .bfmock-store-head {
  display: flex; align-items: center; gap: 6px;
}
.builtfor-mock-storefront .bfmock-store-dot {
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--c);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.builtfor-mock-storefront .bfmock-store-name {
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  margin-left: 4px;
}
.builtfor-mock-storefront .bfmock-store-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 10px;
  align-items: center;
  flex: 1;
}
.builtfor-mock-storefront .bfmock-img {
  width: 48px; height: 48px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.55), rgba(236, 72, 153, 0.4));
  position: relative;
  overflow: hidden;
}
.builtfor-mock-storefront .bfmock-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  animation: bfmock-shimmer 2.6s infinite;
}
.builtfor-mock-storefront .bfmock-store-meta {
  display: flex; flex-direction: column; gap: 4px;
}
.builtfor-mock-storefront .bfmock-row-wide {
  height: 7px; border-radius: 3px; width: 86%;
  background: rgba(255, 255, 255, 0.22);
}
.builtfor-mock-storefront .bfmock-store-stars {
  font-size: 11px;
  color: #facc15;
  letter-spacing: 1px;
}
.builtfor-mock-storefront .bfmock-store-bottom {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 2px;
}
.builtfor-mock-storefront .bfmock-price {
  position: static;
  font-size: 13px; font-weight: 700;
  color: #d8b4fe;
}
.builtfor-mock-storefront .bfmock-cta {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff;
  animation: bfmock-cta-glow 2.4s infinite ease-in-out;
}
@keyframes bfmock-cta-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18); }
}

/* ── Video mock v2 — TikTok-style frame + side rail with counters ────── */
.builtfor-mock-video {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: stretch;
  padding: 8px 12px;
}
.builtfor-mock-video .bfmock-vidframe {
  width: 100%;
  max-width: 70px;
  margin: 0 auto;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(236, 72, 153, 0.65), rgba(124, 58, 237, 0.55));
  position: relative;
  overflow: hidden;
}
.builtfor-mock-video .bfmock-vidplay {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 0; height: 0;
  border-left: 12px solid #fff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left: 2px;
  animation: bfmock-vid-pulse 1.8s infinite ease-in-out;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.builtfor-mock-video .bfmock-vidbar {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.builtfor-mock-video .bfmock-vidbar::after {
  content: ""; display: block; height: 100%;
  width: 40%;
  background: #fff;
  animation: bfmock-vid-progress 3.2s infinite linear;
}
.builtfor-mock-video .bfmock-vidoverlay {
  position: absolute;
  left: 8px; right: 8px; bottom: 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.builtfor-mock-video .bfmock-vidcaption {
  height: 4px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.6);
  width: 80%;
}
.builtfor-mock-video .bfmock-vidcaption-short { width: 50%; }
.builtfor-mock-video .bfmock-vidrail {
  display: flex; flex-direction: column; gap: 8px;
  justify-content: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
}
.builtfor-mock-video .bfmock-vidrail-item {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px;
  color: #f9a8d4;
  font-weight: 600;
}
.builtfor-mock-video .bfmock-vidrail-item em {
  font-style: normal;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.builtfor-mock-video .bfmock-vidrail-item:nth-child(1) { animation: bfmock-rail-pulse 2.2s 0s infinite ease-out; }
.builtfor-mock-video .bfmock-vidrail-item:nth-child(2) { animation: bfmock-rail-pulse 2.2s 0.4s infinite ease-out; }
.builtfor-mock-video .bfmock-vidrail-item:nth-child(3) { animation: bfmock-rail-pulse 2.2s 0.8s infinite ease-out; }
@keyframes bfmock-rail-pulse {
  0%, 80%  { transform: scale(1); }
  85%      { transform: scale(1.18); }
  100%     { transform: scale(1); }
}

/* ── Brand-kit mock v2 — swatches + type pair + approved stamp ───────── */
.builtfor-mock-brandkit {
  display: flex; flex-direction: column; gap: 10px;
  justify-content: center;
}
.builtfor-mock-brandkit .bfmock-kit-swatches {
  display: flex; gap: 6px;
}
.builtfor-mock-brandkit .bfmock-sw {
  width: 28px; height: 36px;
  border-radius: 5px;
  background: var(--c);
  opacity: 0;
  transform: translateY(8px);
  animation: bfmock-sw-drop 3.4s var(--d, 0s) infinite ease-in-out;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.4);
}
.builtfor-mock-brandkit .bfmock-kit-type {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
}
.builtfor-mock-brandkit .bfmock-kit-Aa {
  font-size: 28px;
  font-weight: 700;
  font-style: italic;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.02em;
  font-family: Georgia, serif;
  line-height: 1;
  opacity: 0;
  animation: bfmock-type-in 3.4s 0.4s infinite ease-in-out;
}
.builtfor-mock-brandkit .bfmock-kit-stack {
  display: flex; flex-direction: column; gap: 3px;
  opacity: 0;
  animation: bfmock-type-in 3.4s 0.6s infinite ease-in-out;
}
.builtfor-mock-brandkit .bfmock-kit-h {
  font-family: Georgia, serif;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}
.builtfor-mock-brandkit .bfmock-kit-b {
  font-size: 9.5px;
  color: var(--text-soft);
  letter-spacing: 0.02em;
}

/* Reduced-motion fallback v2 — stop all the new animations gracefully */
@media (prefers-reduced-motion: reduce) {
  .builtfor-mock-top *,
  .bfmock-badge {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Click-mode marquee — drag-rectangle selection. Sits inside the
   viewport (same transform as the canvas) so it tracks pan/zoom. */
.canva-marquee {
  position: absolute;
  border: 1.5px dashed rgba(239, 125, 43, 0.95);
  background: rgba(239, 125, 43, 0.08);
  pointer-events: none;
  z-index: 65;
  /* Marching ants — staggered drift on the dashes so the border reads
     as an active selection, not a static box. */
  animation: canvaMarqueeDrift 900ms linear infinite;
}
@keyframes canvaMarqueeDrift {
  from { background-position: 0 0; }
  to   { background-position: 12px 0; }
}

/* Click context: tolerance slider + selection-clear pill. Pure layout
   helpers — colors come from the existing range / pill primitives. */
.editor-canva-tolerance-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.editor-canva-tolerance-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft, #6b6b6b);
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.editor-canva-tolerance-row .editor-range { flex: 1; }
.editor-canva-tolerance-readout {
  font-size: 11px;
  color: var(--text, #111);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 18px;
  text-align: right;
}
.editor-canva-selection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--brand-soft, #fff4eb);
  border: 1px solid var(--brand-border, #fcd9b6);
  border-radius: 999px;
}
.editor-canva-selection-row[hidden] { display: none; }
.editor-canva-selection-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-deep, #9c4612);
}
.editor-canva-selection-clear {
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-deep, #9c4612);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 999px;
}
.editor-canva-selection-clear:hover {
  background: rgba(156, 70, 18, 0.1);
}

/* Click-mode transient ring: a soft pulse marking where the user clicked
   so the affordance feels alive even before segmentation is wired. */
.canva-click-ring {
  position: absolute;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  margin-top: -14px;
  border: 2px solid rgba(239, 125, 43, 0.95);
  background: rgba(239, 125, 43, 0.18);
  border-radius: 50%;
  pointer-events: none;
  z-index: 60;
  animation: canvaClickRing 900ms ease-out forwards;
}
@keyframes canvaClickRing {
  0%   { transform: scale(0.4); opacity: 0;   }
  20%  { transform: scale(1);   opacity: 1;   }
  100% { transform: scale(2.2); opacity: 0;   }
}

/* ─── Click mode: pointer-finger cursor ──────────────────────────────
   Custom SVG cursor — pointing hand with crisp white outline so it
   reads on any background. Hotspot is at the fingertip (top of icon)
   so the click point is honest. Falls back to the OS pointer if the
   browser can't load inline-SVG cursors. */
.editor-shell[data-edit-area="click"] [data-editor-frame] {
  cursor:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><path d="M11.5 2.2c0-1 .8-1.7 1.8-1.7s1.8.7 1.8 1.7v9.3l1-1.2c.6-.7 1.7-.8 2.4-.2.4.3.7.8.7 1.4 0 .1 0 .3-.1.4l.6-.3c.7-.4 1.6-.2 2 .5.2.3.3.6.3 1l.8-.2c.9-.2 1.7.4 1.9 1.3v.3l-.4 6.4c-.2 3-2.7 5.3-5.7 5.3h-3.2c-1.6 0-3.1-.7-4.1-1.9l-4.7-5.5c-.7-.8-.6-2 .2-2.7.7-.6 1.7-.6 2.4 0l2.3 2V2.2Z" fill="white" stroke="%231a1a1f" stroke-width="1.6" stroke-linejoin="round"/></svg>') 13 1,
    pointer;
}

/* ─── Recolor mode: paint-dropper cursor while a swatch is active ──── */
[data-editor-frame].is-recoloring {
  cursor:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><defs><linearGradient id="d" x1="0" y1="0" x2="0" y2="1"><stop offset="0%25" stop-color="%23ef7d2b"/><stop offset="100%25" stop-color="%23d97706"/></linearGradient></defs><path d="M16 4 C12 10 7 14 7 19 C7 24 11 27 16 27 C21 27 25 24 25 19 C25 14 20 10 16 4 Z" fill="url(%23d)" stroke="white" stroke-width="1.4"/><circle cx="16" cy="20" r="3" fill="rgba(255,255,255,0.45)"/></svg>') 16 27,
    crosshair !important;
}

/* ─── Shape highlight — gradient fill masked to the flood-filled
   element's actual shape. Sits over the visible canvas, under the
   pixel-precise border outline. */
.canva-shape-highlight {
  position: absolute;
  pointer-events: none;
  z-index: 64;
  mix-blend-mode: screen;
  animation: canvaHighlightIn 220ms cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.35));
  image-rendering: -webkit-optimize-contrast;
}

/* ─── Shape outline — 1-px edge of the union mask painted onto a
   canvas, then enlarged by the visible-canvas scale. CSS drop-shadows
   add the dark contrast halo + colored glow so the line reads on any
   background (Canva's trick). Sits above the gradient fill. */
.canva-shape-outline {
  position: absolute;
  pointer-events: none;
  z-index: 66;
  animation: canvaHighlightIn 220ms cubic-bezier(0.16, 1, 0.3, 1);
  filter:
    drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.95))
    drop-shadow(0 0 2px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 4px rgba(168, 85, 247, 0.55));
  image-rendering: pixelated;
}

@keyframes canvaHighlightIn {
  0%   { opacity: 0; transform: scale(0.985); }
  100% { opacity: 1; transform: scale(1);     }
}

/* ── Built-for mocks v3 — segment-specific demos ─────────────────────
   Each segment now has a mock that demonstrates what the product
   literally does for that segment, not a generic visual.
   - POD: recolor fan-out
   - Marketplace: search-feed ranking
   - DTC: multi-channel publish
   - Marketers/teams/creators: variant matrix */

/* ── 1. POD recolor mock ───────────────────────────────────────────── */
.builtfor-mock-pod {
  display: flex; flex-direction: column; gap: 10px;
  justify-content: center;
}
.builtfor-mock-pod .bfmock-pod-swatches {
  display: flex; gap: 5px;
  padding-left: 2px;
}
.builtfor-mock-pod .bfmock-pod-swatches span {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--c);
  opacity: 0;
  transform: scale(0.6);
  animation: bfmock-pod-swatch-in 4s var(--d, 0s) infinite ease-out;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.builtfor-mock-pod .bfmock-pod-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  flex: 1;
}
.builtfor-mock-pod .bfmock-pod-tee {
  position: relative;
  background: var(--c);
  border-radius: 6px;
  opacity: 0;
  transform: translateY(6px) scale(0.92);
  animation: bfmock-pod-tee-fan 4s var(--d, 0s) infinite ease-out;
  /* T-shirt silhouette via clip-path — sleeves at top, body below. */
  clip-path: polygon(
    0% 22%, 20% 8%, 32% 0%, 68% 0%, 80% 8%, 100% 22%,
    100% 35%, 82% 35%, 82% 100%, 18% 100%, 18% 35%, 0% 35%
  );
}
.builtfor-mock-pod .bfmock-pod-tee::after {
  content: ""; position: absolute;
  top: 30%; left: 50%; transform: translateX(-50%);
  width: 50%; height: 30%;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
}
@keyframes bfmock-pod-swatch-in {
  0%, 5%   { opacity: 0; transform: scale(0.6); }
  15%, 85% { opacity: 1; transform: scale(1); }
  95%, 100%{ opacity: 0.55; transform: scale(1); }
}
@keyframes bfmock-pod-tee-fan {
  0%, 10%  { opacity: 0; transform: translateY(8px) scale(0.88); }
  25%, 85% { opacity: 1; transform: translateY(0) scale(1); }
  95%, 100%{ opacity: 0.6; }
}

/* ── 2. Marketplace search-feed mock ──────────────────────────────── */
.builtfor-mock-marketplace {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
}
.builtfor-mock-marketplace .bfmock-mkt-row {
  display: grid;
  grid-template-columns: 22px 28px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.04);
  opacity: 0;
  transform: translateY(4px);
  animation: bfmock-mkt-row-in 4s infinite ease-out;
}
.builtfor-mock-marketplace .bfmock-mkt-row:nth-child(1) { animation-delay: 0s; }
.builtfor-mock-marketplace .bfmock-mkt-row:nth-child(2) { animation-delay: 0.15s; }
.builtfor-mock-marketplace .bfmock-mkt-row:nth-child(3) { animation-delay: 0.3s; }
.builtfor-mock-marketplace .bfmock-mkt-row-active {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.18), rgba(124, 58, 237, 0.04));
  border-color: rgba(124, 58, 237, 0.36);
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.18), 0 10px 28px -16px rgba(124, 58, 237, 0.6);
}
.builtfor-mock-marketplace .bfmock-mkt-rank {
  font-size: 10.5px; font-weight: 700;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.builtfor-mock-marketplace .bfmock-mkt-row-active .bfmock-mkt-rank {
  color: #c4b5fd;
}
.builtfor-mock-marketplace .bfmock-mkt-thumb {
  width: 26px; height: 26px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
}
.builtfor-mock-marketplace .bfmock-mkt-thumb-hero {
  background: linear-gradient(135deg, #f97316 0%, #ec4899 60%, #7c3aed 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  animation: bfmock-mkt-thumb-glow 2.4s infinite ease-in-out;
}
.builtfor-mock-marketplace .bfmock-mkt-thumb-gray {
  background: linear-gradient(135deg, #4b5563, #6b7280);
}
.builtfor-mock-marketplace .bfmock-mkt-meta {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.builtfor-mock-marketplace .bfmock-mkt-title {
  height: 6px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.18);
  width: 80%;
}
.builtfor-mock-marketplace .bfmock-mkt-row-active .bfmock-mkt-title {
  background: rgba(255, 255, 255, 0.42);
  width: 90%;
}
.builtfor-mock-marketplace .bfmock-mkt-stars {
  font-size: 9px;
  color: #facc15;
  letter-spacing: 1px;
}
.builtfor-mock-marketplace .bfmock-mkt-price {
  font-size: 11px; font-weight: 700;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.builtfor-mock-marketplace .bfmock-mkt-row-active .bfmock-mkt-price {
  color: #d8b4fe;
}
@keyframes bfmock-mkt-row-in {
  0%, 5%   { opacity: 0; transform: translateY(4px); }
  15%, 90% { opacity: 1; transform: translateY(0); }
  95%, 100%{ opacity: 0.7; }
}
@keyframes bfmock-mkt-thumb-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 0 rgba(124, 58, 237, 0); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 0 6px rgba(124, 58, 237, 0.18); }
}

/* ── 3. Storefront channel-row (replaces old store-head with brand swatches) ── */
.builtfor-mock-storefront .bfmock-channel-row {
  display: flex; gap: 5px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.builtfor-mock-storefront .bfmock-channel {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-soft);
  border: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
  transition: all 0.2s;
  animation: bfmock-channel-cycle 6s infinite ease-in-out;
}
.builtfor-mock-storefront .bfmock-channel:nth-child(1) { animation-delay: 0s; }
.builtfor-mock-storefront .bfmock-channel:nth-child(2) { animation-delay: 1.5s; }
.builtfor-mock-storefront .bfmock-channel:nth-child(3) { animation-delay: 3s; }
.builtfor-mock-storefront .bfmock-channel:nth-child(4) { animation-delay: 4.5s; }
@keyframes bfmock-channel-cycle {
  0%, 22%, 100% {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-soft);
    border-color: rgba(255, 255, 255, 0.06);
  }
  5%, 17% {
    background: rgba(124, 58, 237, 0.22);
    color: #c4b5fd;
    border-color: rgba(124, 58, 237, 0.4);
  }
}

/* ── 4. Variants matrix mock ───────────────────────────────────────── */
.builtfor-mock-variants {
  display: grid;
  grid-template-columns: 38px 14px 1fr;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
}
.builtfor-mock-variants .bfmock-var-source {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.builtfor-mock-variants .bfmock-var-source-thumb {
  width: 36px; height: 36px;
  border-radius: 6px;
  background: linear-gradient(135deg, #f97316, #ec4899);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 0 3px rgba(124, 58, 237, 0.18);
  position: relative;
}
.builtfor-mock-variants .bfmock-var-source-thumb::after {
  content: ""; position: absolute;
  top: 4px; right: 4px;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(20, 20, 28, 1);
}
.builtfor-mock-variants .bfmock-var-source-label {
  font-size: 9px; font-weight: 700;
  color: #6ee7b7;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.builtfor-mock-variants .bfmock-var-arrow {
  font-size: 18px;
  color: var(--text-soft);
  text-align: center;
  line-height: 1;
  animation: bfmock-var-arrow-pulse 1.6s infinite ease-in-out;
}
.builtfor-mock-variants .bfmock-var-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 4px;
  height: 100%;
}
.builtfor-mock-variants .bfmock-var-out {
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.32), rgba(236, 72, 153, 0.22));
  border: 1px solid rgba(124, 58, 237, 0.4);
  border-radius: 5px;
  opacity: 0;
  transform: scale(0.7);
  animation: bfmock-var-out-fan 4s var(--d, 0s) infinite ease-out;
}
@keyframes bfmock-var-arrow-pulse {
  0%, 100% { transform: translateX(0); opacity: 0.65; }
  50%      { transform: translateX(2px); opacity: 1; }
}
@keyframes bfmock-var-out-fan {
  0%, 5%   { opacity: 0; transform: scale(0.7); }
  20%, 85% { opacity: 1; transform: scale(1); }
  95%, 100%{ opacity: 0.7; transform: scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
  .builtfor-mock-pod *,
  .builtfor-mock-marketplace *,
  .builtfor-mock-variants *,
  .builtfor-mock-storefront .bfmock-channel {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Hero tile rendering fix v3 ─────────────────────────────────────────
   Earlier fix (setting --hue per tile) only worked for transparent-bg
   PNGs. Many assets have white backgrounds (photo-style designs), which
   then dominate the colorful gradient and look like blinding white
   squares against the dark page.
   New approach: a uniform warm-cream "design card" background for all
   state-done tiles. Transparent PNGs float on the cream; white-bg PNGs
   blend into it. Either way, the tile reads as a polished product
   preview card, not a raw asset dump. */
.hero-product-grid .hero-tile.state-done {
  background:
    linear-gradient(155deg, #f7f3e9 0%, #ece5d3 100%);
  box-shadow:
    0 4px 14px -4px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.hero-product-grid .hero-tile.state-done::before {
  background: radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.32) 0%, transparent 55%);
  mix-blend-mode: normal;
  opacity: 0.6;
}
.hero-product-grid .hero-tile.state-done > img {
  inset: 10%;
  width: 80%;
  height: 80%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
}

/* ── Built-for grid responsive update for 5 tiles ────────────────────
   Original CSS hardcoded 4 columns. Now uses auto-fit so 5 cards
   reflow gracefully: 5-across on wide desktops, 4 or 3 on smaller,
   2 on tablet, 1 on mobile. */
.landing-builtfor .builtfor-grid {
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
@media (max-width: 1180px) {
  .landing-builtfor .builtfor-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 900px) {
  .landing-builtfor .builtfor-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .landing-builtfor .builtfor-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Platform badges (Etsy, TikTok Shop, OpoShop, Shopify, etc.) ───
   Letter-mark + name chip, sits between the icon/title and the body
   copy on each Built-for card. Style mirrors the hero Connect scene's
   row marks so visitors recognize the visual language. */
.builtfor-platforms {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 4px 0 2px;
}
.bfmock-platform {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 9px 4px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  letter-spacing: 0.01em;
}
.bfmock-platform-mark {
  width: 16px; height: 16px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
  background: var(--c, #888);
  letter-spacing: 0;
}
/* Real-logo overlay variant. .has-logo turns the chip into a logo
   container — the letter inside becomes invisible, the platform's
   actual logo overlays at 72% size. Files live in
   /assets/brand-logos/. The brand color stays as the background so
   monochrome logos still read with brand recognition. */
.bfmock-platform-mark.has-logo {
  background-color: var(--c, #888);
  background-size: 72% 72%;
  background-position: center;
  background-repeat: no-repeat;
  /* font-size: 0 is the bulletproof letter-hide — color: transparent
     alone can still bleed with anti-aliasing or selection state. */
  font-size: 0;
  color: transparent;
}
/* Background colors picked per-logo so each mark stays readable.
   Multi-color logos (Printful, Etsy wordmark) need a white bg.
   The OpoShop icon reads on its brand-purple bg. The EverBee bee
   is brand-orange — needs a light bg so it doesn't disappear. */
.bfmock-platform-mark.has-logo-printful { background-image: url("/assets/brand-logos/printful.svg"); background-color: #fff; background-size: 82% 82%; border: 1px solid rgba(255, 255, 255, 0.5); }
.bfmock-platform-mark.has-logo-etsy     { background-image: url("/assets/brand-logos/etsy-logo.svg"); background-color: #fff; background-size: 86% 86%; border: 1px solid rgba(255, 255, 255, 0.5); }
.bfmock-platform-mark.has-logo-oposhop  { background-image: url("/assets/brand-logos/oposhop-icon.png"); background-size: 80% 80%; }
.bfmock-platform-mark.has-logo-everbee  { background-image: url("/assets/brand-logos/everbee-bee.svg"); background-color: #fff4eb; background-size: 78% 78%; border: 1px solid rgba(252, 217, 182, 0.6); }

/* ── 5. Digital product sellers mock ───────────────────────────────
   File-stack visual: 3 file thumbnails with type labels (PNG, SVG, PDF)
   stack/cascade in. "12 files · Instant download" footer. Communicates
   "digital download bundle" without explicit explanation. */
.builtfor-mock-digital {
  display: flex; flex-direction: column; gap: 10px;
  justify-content: center;
  padding: 10px 12px;
}
.builtfor-mock-digital .bfmock-dig-stack {
  display: flex; gap: 6px;
  align-items: flex-end;
  justify-content: center;
}
.builtfor-mock-digital .bfmock-dig-file {
  position: relative;
  width: 38px; height: 50px;
  border-radius: 5px;
  background: linear-gradient(180deg, #f7f3e9 0%, #ece5d3 100%);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  opacity: 0;
  transform: translateY(8px) scale(0.92);
  animation: bfmock-dig-file-in 4s var(--d, 0s) infinite ease-out;
  overflow: hidden;
}
.builtfor-mock-digital .bfmock-dig-file:nth-child(1) { --d: 0s; }
.builtfor-mock-digital .bfmock-dig-file:nth-child(2) { --d: 0.15s; }
.builtfor-mock-digital .bfmock-dig-file:nth-child(3) { --d: 0.3s; }
.builtfor-mock-digital .bfmock-dig-file::before {
  /* corner fold to suggest "file" */
  content: ""; position: absolute;
  top: 0; right: 0;
  width: 9px; height: 9px;
  background: linear-gradient(225deg, transparent 50%, rgba(0,0,0,0.12) 50%);
  border-bottom-left-radius: 2px;
}
.builtfor-mock-digital .bfmock-dig-thumb {
  position: absolute;
  top: 8px; left: 6px; right: 6px;
  height: 22px;
  border-radius: 3px;
  background: linear-gradient(135deg, #7c3aed 0%, #ec4899 60%, #f97316 100%);
}
.builtfor-mock-digital .bfmock-dig-type {
  position: absolute;
  bottom: 6px; left: 6px; right: 6px;
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #6b5f3f;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.builtfor-mock-digital .bfmock-dig-info {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px;
}
.builtfor-mock-digital .bfmock-dig-pack {
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.builtfor-mock-digital .bfmock-dig-instant {
  color: #6ee7b7;
  font-weight: 700;
  letter-spacing: 0.02em;
  animation: bfmock-dig-pulse 2.4s infinite ease-in-out;
}
@keyframes bfmock-dig-file-in {
  0%, 8%   { opacity: 0; transform: translateY(8px) scale(0.92); }
  20%, 85% { opacity: 1; transform: translateY(0) scale(1); }
  95%, 100%{ opacity: 0.6; }
}
@keyframes bfmock-dig-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .builtfor-mock-digital *,
  .builtfor-platforms * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Hero generate grid v2 ──────────────────────────────────────────
   Tile count dropped 12 → 6 in JS. Grid forced to 3×2 at all sizes so
   each tile gets meaningful presence (raw-asset quality is more
   forgivable at small thumbnail size, but the better fix is uniform
   "design card" framing + fewer tiles in view at once). */
.hero-product-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  padding: 18px !important;
}
.hero-product-grid .hero-tile {
  aspect-ratio: 1 / 1;
}

/* ─── Resize tool ─────────────────────────────────────────────────────
   Subbar with preset chips (each shows an aspect-ratio thumbnail),
   custom W×H inputs, and a Fit / Fill toggle. Live preview overlay
   floats on top of the visible canvas showing the new aspect frame
   and how the existing image will sit inside it. */
.editor-resize-presets .editor-resize-chiprow {
  flex-wrap: wrap;
  gap: 8px;
  max-width: 520px;
}
.editor-resize-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 9px;
  min-height: 38px;
  line-height: 1.1;
}
.editor-resize-chip .editor-resize-chip-thumb {
  display: inline-block;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.85), rgba(236, 72, 153, 0.85) 55%, rgba(249, 115, 22, 0.85));
  border-radius: 2px;
  flex: 0 0 auto;
}
/* Each preset thumbnail sizes itself to mirror its aspect ratio so
   the chip telegraphs "what shape is this". Widths/heights are tuned
   to fit inside the chip's row height without inflating it. */
.editor-resize-chip-thumb-1x1   { width: 16px; height: 16px; }
.editor-resize-chip-thumb-16x9  { width: 22px; height: 12.4px; }
.editor-resize-chip-thumb-16x6  { width: 24px; height: 9px;  }
.editor-resize-chip-thumb-4x5   { width: 12px; height: 15px; }
.editor-resize-chip-thumb-9x16  { width: 9px;  height: 16px; }
.editor-resize-chip-thumb-3x4   { width: 12px; height: 16px; }
.editor-resize-chip-thumb-21x9  { width: 26px; height: 11.1px; }
.editor-resize-chip-label {
  font-weight: 600;
  font-size: 12.5px;
}
.editor-resize-chip-sub {
  font-size: 11px;
  opacity: 0.6;
  margin-left: 2px;
}
.editor-resize-chip[aria-pressed="true"] .editor-resize-chip-sub {
  opacity: 0.85;
}

.editor-resize-custom { min-width: 0; }
.editor-resize-dim-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.editor-resize-dim {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: inherit;
}
.editor-resize-dim span {
  font-weight: 600;
  opacity: 0.7;
}
.editor-resize-dim input {
  width: 64px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  background: var(--bg-card, #fff);
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.editor-resize-dim input:focus {
  outline: 2px solid rgba(168, 85, 247, 0.5);
  outline-offset: 0;
  border-color: rgba(168, 85, 247, 0.7);
}
body.app-dark .editor-resize-dim input {
  border-color: rgba(255, 255, 255, 0.14);
}
.editor-resize-dim-x {
  opacity: 0.55;
  font-weight: 500;
  padding: 0 2px;
}

/* Live preview overlay — pinned to the canvas frame; the ghost frame
   moves with the visible canvas's letterbox rect. Pointer events stay
   off so the user can still interact with anything beneath. */
.editor-resize-preview {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.editor-resize-preview-frame {
  position: absolute;
  border: 1.6px dashed rgba(255, 255, 255, 0.95);
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(168, 85, 247, 0.35);
  background: rgba(20, 14, 36, 0.18);
  overflow: hidden;
  animation: editorResizeFrameIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.editor-resize-preview-image {
  position: absolute;
  background-repeat: no-repeat;
  background-position: top left;
  /* The image sits inside the ghost frame at the same Fit/Fill
     placement we'll use at apply-time. A subtle ring helps it read
     against the dimmed frame background. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
@keyframes editorResizeFrameIn {
  0%   { opacity: 0; transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1);    }
}

/* ═══════════════════════════════════════════════════════════════════════
   /edit page — full-page editor shell that replaces the modal popover
   architecture. Hosts editor.js with mode="page" so the Tools panel
   renders as a permanent left sidebar instead of a floating popover.
   Z-index sandwiches, click-outside complexity, popover open/close state
   coordination — all eliminated by hosting it as a page.
   ═══════════════════════════════════════════════════════════════════════ */

/* Page container: fills the viewport to the right of the side-nav. The
   side-nav is the standard 240px column; .app-header-slim above is a
   thin top bar that mirrors other pages (just the workspace dock). */
.edit-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: #fafafa;
  /* Side-nav offset — same width the rest of the app uses. The app-
     header is hidden in /edit (the gradient editor top bar replaces
     it), so no padding-top is needed. The Canva-clone bar sits at
     y=0 above everything else. */
  padding-left: 240px;
  padding-top: 0;
  transition: padding-left 180ms ease;
}
body.side-nav-collapsed .edit-page { padding-left: 72px; }

.edit-page-host {
  flex: 1;
  min-height: 0;
  position: relative;
}

.edit-page-loading,
.edit-page-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--text-soft, #666);
  font-size: 14px;
  background: #fafafa;
  z-index: 1;
}
/* `display: flex` above wins over the user-agent [hidden] { display: none }
   rule, so the panels render even when the attribute is set. Restore the
   expected toggle behavior — without this the error panel sits over the
   editor permanently the moment /edit loads. */
.edit-page-loading[hidden],
.edit-page-error[hidden] { display: none !important; }
.edit-page-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(0,0,0,0.08);
  border-top-color: var(--brand, #ef7d2b);
  animation: editPageSpin 800ms linear infinite;
}
@keyframes editPageSpin { to { transform: rotate(360deg); } }
.edit-page-error h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text, #111);
  margin: 0;
}
.edit-page-error p { margin: 0; max-width: 44ch; text-align: center; }

/* Host class added to the page mount when openEditor runs with
   mode="page". Lets editor-shell--page below scope its overrides. */
.editor-page-host { width: 100%; height: 100%; }

/* ── Page-mode editor shell ─────────────────────────────────────────────
   Same DOM as modal mode but laid out as a full-page work surface. The
   floating Edit Image popover becomes a persistent left sidebar; the
   canvas stage occupies everything else; no modal scaffolding. */
.editor-shell--page {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: transparent;
  border-radius: 0;
  overflow: hidden;
}
/* The Canva-clone top bar (.editor-topbar-canva) IS the page chrome
   now, so don't hide it in page mode. We still want it gone in modal
   mode if it's the old slim variant — keep that rule scoped to the
   slim flavor only. */
.editor-shell--page .editor-topbar.editor-topbar-slim {
  display: none !important;
}
/* Body row: sidebar + canvas-stage. The sub-bar (floating bottom tool
   strip) still pins to the canvas-stage; it floats over the canvas. */
.editor-shell--page .editor-body {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;
  /* Positioning context for the absolute Edit-panel overlay so it
     anchors to the body, not the document. */
  position: relative;
}
/* Page-mode Edit panel is an OVERLAY on top of the canvas-stage, not
   an in-flow flex column. That way the stage takes the full width
   left of the side-nav and the image centers in the viewport
   independent of panel state. Panel covers the left edge of the stage
   while open; click-off-canvas (or the Edit pill) hides it, image
   never reflows. */
.editor-shell--page .editor-canva-edit-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  max-width: 320px;
  max-height: none;
  height: 100%;
  flex-shrink: 0;
  border-radius: 0;
  border: 0;
  border-right: 1px solid var(--border, #ececec);
  box-shadow: 4px 0 16px rgba(0,0,0,0.04);
  z-index: 4;
  animation: none;
}
/* Page-mode panel: the column space is ALWAYS reserved so toggling the
   panel doesn't make the canvas reflow and the image jump. When the
   panel is "closed" (Edit pill toggled off, OR click-off-canvas), we
   hide it via visibility/pointer-events instead of display:none — the
   layout column stays, the image keeps its position. */
.editor-shell--page .editor-canva-edit-panel[hidden],
.editor-shell--page[data-edit-mode="off"] .editor-canva-edit-panel {
  /* Force the in-flow column to stay despite the [hidden] HTML attr,
     which would otherwise resolve to display:none and reflow the row. */
  display: flex !important;
  visibility: hidden;
  pointer-events: none;
}

/* Modal mode keeps the original behavior — popover disappears outright
   on click-off, since there's no reserved column in that layout. */
.editor-shell:not(.editor-shell--page)[data-edit-mode="off"] .editor-canva-edit-panel {
  display: none !important;
}
.editor-shell[data-edit-mode="off"] .editor-canva-toptools,
.editor-shell[data-edit-mode="off"] .editor-obj-menu {
  display: none !important;
}

/* Selection ring on the canvas — appears when edit mode is on
   (something is "selected"). Click off the canvas and the shell flips
   to data-edit-mode="off", the ring drops, and the canvas reads as
   unselected. Same visual cue popular design tools use. */
.editor-shell[data-edit-mode="on"] .editor-canvas {
  box-shadow:
    0 0 0 2px var(--brand, #7c3aed),
    0 2px 10px rgba(15, 23, 42, 0.06),
    0 18px 50px rgba(15, 23, 42, 0.14);
}

/* Canvas + Add-page wrapper: a column inside the canvas-stage flex
   row. Canvas frame takes flex:1 vertically, Add-page sits beneath
   it at natural height. Replaces the previous "absolute over the
   stage" hack which kept landing on top of the canvas. */
.editor-canvas-column {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.editor-canvas-column > .editor-canvas-frame {
  flex: 1;
  min-height: 0;
}
.editor-addpage-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  width: min(260px, calc(100% - 80px));
  margin: 12px auto 14px;
  padding: 0;
  flex-shrink: 0;
}
.editor-addpage {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #18181b;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.editor-addpage:hover {
  background: #fafafa;
  border-color: #d4d4d8;
}
.editor-addpage:active { transform: scale(0.997); }
.editor-addpage-plus {
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: #18181b;
  opacity: 0.85;
}
.editor-addpage-chevron {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  color: #18181b;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.editor-addpage-chevron:hover {
  background: #fafafa;
  border-color: #d4d4d8;
}
.editor-shell[data-edit-mode="off"] .editor-addpage-row {
  /* Match the empty-state minimalism — keep Add page visible whether
     or not something is selected, matching standard design-tool
     convention. */
}
body.app-dark .editor-addpage,
body.app-dark .editor-addpage-chevron {
  background: var(--bg-card, #1a1a22);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--text, #f4f4f5);
}
body.app-dark .editor-addpage:hover,
body.app-dark .editor-addpage-chevron:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
}
/* The "X" close button on the sidebar is hidden in page mode (you don't
   close a sidebar), set by JS but reinforced here for cache safety. */
.editor-shell--page .editor-canva-edit-close { display: none !important; }
/* The Edit pill stays visible in page mode now that the leftnav sidebar
   is hidden. It's the only way to reopen the Edit popover after the
   user dismisses it (click-off-canvas or the close button). */
/* Canvas stage fills the rest. No left padding hack — the sidebar is
   in-flow so the stage naturally takes the remaining width. */
.editor-shell--page .editor-canvas-stage {
  flex: 1;
  min-width: 0;
  padding-left: 0;
}
.editor-shell--page .editor-canvas-stage:has(.editor-canva-edit-panel:not([hidden])) {
  padding-left: 0; /* override modal-mode padding rule */
}
/* On narrow screens, collapse the sidebar to nothing so the canvas
   isn't crowded. Operator can scroll horizontally to access tools — a
   real overlay sidebar at <860px ships in a follow-up if needed. */
@media (max-width: 1080px) {
  .editor-shell--page .editor-canva-edit-panel { width: 296px; max-width: 296px; }
}
@media (max-width: 860px) {
  .editor-shell--page .editor-canva-edit-panel { width: 272px; max-width: 272px; }
}
@media (max-width: 720px) {
  .editor-shell--page .editor-canva-edit-panel {
    position: absolute;
    width: 280px;
    height: 100%;
    z-index: 5;
    box-shadow: 4px 0 12px rgba(0,0,0,0.06);
  }
}

/* ── Share dialog ──────────────────────────────────────────────────────
   Lightweight modal layered on top of the design grid. Two paths:
   "Copy link" copies the direct image URL; "Export…" closes this dialog
   and hands off to the existing openDownloadDialog() so we never
   duplicate the format/size picker. */
.share-dialog {
  background: var(--bg-card);
  border-radius: 18px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.share-dialog-body {
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.share-preview {
  display: flex;
  justify-content: center;
}
.share-preview img {
  width: 100%;
  max-width: 240px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 12px;
  background: var(--bg-soft, #f5f5f7);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.share-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.share-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.share-field-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft, #6b7280);
}
.share-link-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.share-link-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  background: var(--bg-soft, #f7f7f9);
  color: var(--text, #1a1a1a);
  font: inherit;
  font-size: 13px;
}
.share-link-input:focus {
  outline: 2px solid var(--brand-soft, rgba(232, 137, 60, 0.35));
  outline-offset: 0;
  border-color: var(--brand, #e8893c);
}
.share-link-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 0 14px;
  flex: 0 0 auto;
}
.share-link-copy-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}
.share-link-copy.is-copied {
  background: #16a34a;
  border-color: #16a34a;
}
.share-field-hint {
  margin: 0;
  font-size: 12px;
  color: var(--text-soft, #6b7280);
  line-height: 1.5;
}
.share-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-soft, #6b7280);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.share-divider::before,
.share-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border, rgba(0, 0, 0, 0.08));
}
.share-export-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.10));
  background: var(--bg-soft, #f7f7f9);
  color: var(--text, #1a1a1a);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.share-export-cta:hover {
  background: var(--brand-soft, rgba(232, 137, 60, 0.10));
  border-color: var(--brand-border, rgba(232, 137, 60, 0.45));
}
.share-export-cta:active { transform: scale(0.995); }
.share-export-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--brand-soft, rgba(232, 137, 60, 0.15));
  color: var(--brand, #e8893c);
}
.share-export-icon svg { width: 18px; height: 18px; display: block; }
.share-export-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.share-export-title {
  font-size: 14px;
  font-weight: 600;
}
.share-export-sub {
  font-size: 12px;
  color: var(--text-soft, #6b7280);
}

@media (max-width: 520px) {
  .share-link-row { flex-direction: column; }
  .share-link-copy { width: 100%; justify-content: center; }
}

/* Brand kit color swatches inside the Edit popover. The row reuses
   .editor-canva-swatch so the recolor flow is one code path; this
   wrapper just lays them out as a wrapping flex grid that matches the
   Style Match strip below it. */
.editor-canva-brand-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 0;
}
.editor-canva-brand-swatches .editor-canva-swatch--brand {
  width: 28px;
  height: 28px;
}
.editor-canva-edit-section[hidden] { display: none; }

/* ── Preview / Coming-Soon nav badge ───────────────────────────────── */
.nav-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--brand);
  color: var(--brand);
  background: #fff7ed;
  margin-left: auto;
  line-height: 1.4;
}
.side-nav-collapsed .nav-badge { display: none; }

/* ── Ad Studio page ────────────────────────────────────────────────── */
.ad-studio-page {
  margin-left: var(--side-nav-width, 240px);
  padding: 32px 40px;
  min-height: 100vh;
  background: var(--bg, #fdfbf7);
}
.side-nav-collapsed .ad-studio-page,
.side-nav-collapsed .ad-composer-page {
  margin-left: var(--side-nav-collapsed-width, 72px);
}
.ad-studio-header {
  max-width: 980px;
  margin-bottom: 28px;
}
.ad-studio-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ad-studio-title-row h1 {
  font-size: 28px;
  margin: 0;
}
.ad-studio-title-row .nav-badge { margin-left: 0; }
.ad-studio-sub {
  color: var(--text-muted, #6b6358);
  max-width: 60ch;
  margin: 8px 0 18px;
}
.ad-studio-actions {
  display: flex;
  gap: 10px;
}
.ad-studio-empty,
.ad-studio-loading,
.ad-studio-error {
  padding: 28px;
  border: 1px dashed #d8d0c4;
  border-radius: 12px;
  text-align: center;
  max-width: 540px;
  margin: 24px 0;
  background: #fff;
}
.ad-studio-error { border-style: solid; border-color: #e9b6a1; }
.ad-studio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  max-width: 1200px;
}
.ad-angle-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  background: #fff;
  border: 1px solid #ece4d5;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ad-angle-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
.ad-angle-archetype {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand);
  font-weight: 700;
}
.ad-angle-title {
  font-size: 17px;
  margin: 0;
  line-height: 1.3;
}
.ad-angle-hook {
  font-style: italic;
  color: #2c2620;
  margin: 0;
}
.ad-angle-why {
  font-size: 13px;
  color: var(--text-muted, #6b6358);
  margin: 0;
}
.ad-angle-avatar {
  margin-top: auto;
  font-size: 12px;
  color: #8c8276;
}

/* ── Ad Composer ───────────────────────────────────────────────────── */
.ad-composer-page {
  margin-left: var(--side-nav-width, 240px);
  padding: 28px 40px;
  min-height: 100vh;
  background: var(--bg, #fdfbf7);
}
.ad-composer-header { max-width: 1100px; margin-bottom: 24px; }
.ad-composer-back {
  display: inline-block;
  color: var(--text-muted, #6b6358);
  text-decoration: none;
  margin-bottom: 10px;
  font-size: 13px;
}
.ad-composer-back:hover { color: var(--brand); }
.ad-composer-title-row { display: flex; align-items: center; gap: 12px; }
.ad-composer-title-row h1 { font-size: 24px; margin: 0; }
.ad-composer-sub {
  color: var(--text-muted, #6b6358);
  max-width: 70ch;
  margin: 8px 0 0;
}
.ad-composer-error {
  padding: 16px;
  border: 1px solid #e9b6a1;
  border-radius: 10px;
  background: #fff5f0;
  max-width: 720px;
  margin-bottom: 18px;
}
.ad-composer-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1fr);
  gap: 24px;
  max-width: 1300px;
}
.ad-composer-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #6b6358);
  font-weight: 600;
  margin: 14px 0 6px;
}
.ad-composer-label:first-child { margin-top: 0; }
#ad-composer-script {
  width: 100%;
  border: 1px solid #ddd4c2;
  border-radius: 10px;
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  background: #fff;
}
.ad-composer-aspect {
  display: flex;
  gap: 16px;
  font-size: 13px;
}
.ad-composer-avatars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ad-avatar-tile {
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 14px 12px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: inherit;
}
.ad-avatar-tile.is-selected {
  border-color: #1a1a1a;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}
.ad-avatar-name { font-weight: 700; }
.ad-avatar-blurb { font-size: 11px; opacity: 0.9; }
.ad-composer-preview {
  background: #fff;
  border: 1px solid #ece4d5;
  border-radius: 12px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  gap: 12px;
}
.ad-composer-preview-placeholder {
  color: var(--text-muted, #6b6358);
  font-size: 13px;
  text-align: center;
}
.ad-composer-stub-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}
.ad-composer-stub-badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff7ed;
  border: 1px solid var(--brand);
  color: var(--brand);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ad-composer-stub-detail { font-size: 13px; color: var(--text-muted, #6b6358); margin: 0; }
.ad-composer-video {
  max-width: 100%;
  max-height: 360px;
  border-radius: 8px;
}

/* ── Editor: page header above canvas ────────────────────────────────
   Sits between the floating toolbar and the canvas frame. Left side is
   the page title (bold prefix + gray placeholder). Right side is the
   per-page action toolbar. Matches the Canva reference exactly. */
.editor-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  padding: 14px 4px 8px;
  gap: 16px;
  margin: 0 auto;
}
.editor-page-header-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #0d1216;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.editor-page-header-title strong {
  font-weight: 600;
  color: #0d1216;
}
.editor-page-header-dash {
  color: #9aa0a6;
  margin: 0 2px;
}
.editor-page-header-placeholder {
  color: #9aa0a6;
  font-weight: 400;
}
.editor-page-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.editor-page-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #3c4043;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  padding: 0;
}
.editor-page-icon:hover {
  background: #f0f1f4;
  color: #0d1216;
}
.editor-page-icon-add { color: #0d1216; }

/* ── Editor: floating object action menu ────────────────────────────
   Pill that floats above the currently-selected canvas element. Left
   pip is the "Ask Canva" entry (gradient sparkle + label); the rest
   are 16px outline icons separated by a hairline divider. */
.editor-obj-menu {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  height: 36px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  z-index: 6;
  pointer-events: auto;
}
.editor-obj-menu[hidden] { display: none; }
/* While the user is actively in a click-driven tool (eraser, text,
   position, adjust, etc.), suppress the floating object menu so it
   doesn't sit on top of the canvas and silently swallow pointerdowns
   meant for the tool. We keep it visible-but-translucent (and
   pointer-events: none) instead of hiding it so the user still has a
   spatial anchor for where it lives. */
[data-editor-shell][data-active-tool] .editor-obj-menu {
  pointer-events: none;
  opacity: 0.25;
  transition: opacity 120ms ease;
}
.editor-obj-ask {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #0d1216;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: -0.005em;
}
.editor-obj-ask:hover { background: #f4f4f7; }
.editor-obj-ask-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--brand, #ef7d2b);
}
.editor-obj-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: #d9dee3;
  margin: 0 4px;
}
.editor-obj-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #3c4043;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  padding: 0;
}
.editor-obj-icon:hover {
  background: #f0f1f4;
  color: #0d1216;
}
.editor-obj-icon svg { stroke: currentColor; }

/* Make the canvas frame the positioning context for the floating menu
   while keeping any pre-existing transforms intact. */
.editor-canvas-frame { position: relative; }

/* ── Editor: selection bounding box ─────────────────────────────────
   Brand-honey stroke around the selected element with circular corner
   handles + pill-shaped edge midpoint handles. (Was Canva purple; the
   selection chrome must read as Ohoney, not Canva.) */
.editor-canvas-frame[data-has-selection="true"] .editor-canvas-viewport {
  outline: 2px solid var(--brand, #ef7d2b);
  outline-offset: 0;
  border-radius: 4px;
}
.editor-canvas-frame[data-has-selection="true"]::before,
.editor-canvas-frame[data-has-selection="true"]::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand, #ef7d2b);
  z-index: 7;
  pointer-events: none;
}
.editor-canvas-frame[data-has-selection="true"]::before {
  top: -6px; left: -6px;
  box-shadow:
    /* top-right */ calc(100% + 12px) 0 0 -2px #fff, calc(100% + 12px) 0 0 0 var(--brand, #ef7d2b),
    /* bottom-left */ 0 calc(100% + 12px) 0 -2px #fff, 0 calc(100% + 12px) 0 0 var(--brand, #ef7d2b),
    /* bottom-right */ calc(100% + 12px) calc(100% + 12px) 0 -2px #fff, calc(100% + 12px) calc(100% + 12px) 0 0 var(--brand, #ef7d2b);
}
.editor-canvas-frame[data-has-selection="true"]::after {
  /* edge-midpoint pill handles (rendered via box-shadow trick) */
  display: none;
}

/* ── Editor: Canva-style bottom bar ───────────────────────────────────
   Replaces the old big "Discard / Save edit" action bar. Notes + Timer
   on the left, undo/redo + zoom + pages + grid/fullscreen/help on the
   right. Save & Discard moved to a floating cluster in the top-right
   of the canvas-stage (.editor-share-cluster). */
.editor-bottombar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 44px;
  padding: 0 16px;
  border-top: 1px solid #ececec;
  background: #fff;
  flex-shrink: 0;
}
.editor-bottombar-left,
.editor-bottombar-right {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.editor-bottombar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #0d1216;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.12s ease;
}
.editor-bottombar-btn:hover { background: #f4f4f7; }
.editor-bottombar-btn > span:first-child {
  display: inline-flex;
  color: #3c4043;
}
.editor-bottombar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #3c4043;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  padding: 0;
}
.editor-bottombar-icon:hover {
  background: #f4f4f7;
  color: #0d1216;
}
.editor-bottombar-icon:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.editor-bottombar-icon svg { stroke: currentColor; }
.editor-bottombar-sep {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: #e4e7ec;
  margin: 0 6px;
}
.editor-bottombar-pages {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #0d1216;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease;
}
.editor-bottombar-pages:hover { background: #f4f4f7; }
.editor-bottombar-pages > span:first-child { color: #3c4043; }
.editor-bottombar-pagecount {
  color: #6b6f76;
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
}

/* Zoom controls live inside the bottombar now. Override the old
   absolute positioning that pinned them to the canvas-stage corner. */
.editor-bottombar .editor-zoom-controls {
  position: static;
  margin: 0;
  bottom: auto;
  right: auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* ── Editor: floating Save / Discard cluster (top-right) ──────────────
   Mirrors Canva's Share-button placement. Anchored to the top-right of
   the canvas-stage so it floats over the canvas chrome without taking
   layout space. */
.editor-share-cluster {
  position: absolute;
  top: 16px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 6;
}
.editor-share-discard {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #3c4043;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 0 0 1px #e4e7ec;
  transition: color 0.12s ease, background 0.12s ease;
}
.editor-share-discard:hover {
  color: #0d1216;
  background: #f4f4f7;
}
.editor-share-discard svg { width: 16px; height: 16px; stroke: currentColor; }
.editor-share-save {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #0d1216;
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  transition: background 0.12s ease, transform 0.12s ease;
}
.editor-share-save:hover { background: #1a1f25; }
.editor-share-save:active { transform: scale(0.98); }
.editor-share-save:disabled {
  background: #d4d4d8;
  color: #fff;
  cursor: not-allowed;
  box-shadow: 0 0 0 1px #e4e7ec;
}

/* ── Editor: Canva-clone top bar ──────────────────────────────────────
   Teal→purple horizontal gradient strip across the top of the editor.
   Left cluster: home, File, Resize, Editing pill, undo/redo, save
   indicator. Right cluster: Title, avatar, analytics, comments, Share
   pill. Wired to the existing data-editor-* hooks. */
.editor-topbar.editor-topbar-canva {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  padding: 0 16px;
  background: var(--bg-card, #ffffff);
  color: var(--text, #0d1216);
  flex-shrink: 0;
  border-bottom: 1px solid var(--border, #ececec);
  position: relative;
  z-index: 6;
}
.editor-topbar-canva .editor-topbar-left,
.editor-topbar-canva .editor-topbar-right {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.editor-topbar-canva .editor-topbar-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--text, #0d1216);
  text-decoration: none;
  margin-right: 4px;
  transition: background 0.12s ease;
}
.editor-topbar-canva .editor-topbar-home:hover { background: var(--brand-soft, #fff4eb); color: var(--brand-deep, #9c4612); }
.editor-topbar-canva .editor-topbar-home svg { stroke: currentColor; }
.editor-topbar-canva .editor-topbar-btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text, #0d1216);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.12s ease;
}
.editor-topbar-canva .editor-topbar-btn:hover { background: #f4f4f7; }
.editor-topbar-canva .editor-topbar-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: 999px;
  background: var(--brand-soft, #fff4eb);
  color: var(--brand-deep, #9c4612);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.12s ease;
}
.editor-topbar-canva .editor-topbar-pill:hover { background: #ffe6d0; }
.editor-topbar-canva .editor-topbar-pill svg { stroke: currentColor; }
.editor-topbar-canva .editor-topbar-pill svg:first-child { color: var(--brand, #ef7d2b); }
.editor-topbar-canva .editor-topbar-divider {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: var(--border, #ececec);
  margin: 0 8px;
}
.editor-topbar-canva .editor-topbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #3c4043;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}
.editor-topbar-canva .editor-topbar-icon:hover { background: #f4f4f7; color: #0d1216; }
.editor-topbar-canva .editor-topbar-icon:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.editor-topbar-canva .editor-topbar-icon svg { stroke: currentColor; }
.editor-topbar-canva .editor-topbar-saved {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #9aa0a6;
  opacity: 0.9;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.editor-topbar-canva .editor-topbar-saved[data-saved="false"] {
  color: var(--brand, #ef7d2b);
  opacity: 1;
}
.editor-topbar-canva .editor-topbar-saved svg { stroke: currentColor; }
.editor-topbar-canva .editor-topbar-title {
  color: var(--text, #0d1216);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-right: 12px;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 6px 10px;
  border-radius: 8px;
  width: 200px;
  max-width: 240px;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.editor-topbar-canva .editor-topbar-title::placeholder {
  color: #9aa0a6;
}
.editor-topbar-canva .editor-topbar-title:hover {
  background: #f4f4f7;
}
.editor-topbar-canva .editor-topbar-title:focus {
  background: #fff;
  box-shadow: 0 0 0 2px var(--brand-soft, #fff4eb), 0 0 0 3px var(--brand, #ef7d2b);
}
.editor-topbar-canva .editor-topbar-icon-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #3c4043;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease;
  margin-left: 4px;
}
.editor-topbar-canva .editor-topbar-icon-soft:hover {
  background: #f4f4f7;
  color: #0d1216;
}
.editor-topbar-canva .editor-topbar-icon-soft svg { stroke: currentColor; }
.editor-topbar-canva .editor-topbar-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand, #ef7d2b), var(--brand-deep, #9c4612));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.editor-topbar-canva .editor-topbar-share {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--brand, #ef7d2b);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  margin-left: 6px;
  box-shadow: 0 1px 3px rgba(239,125,43,0.25);
  transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.editor-topbar-canva .editor-topbar-share:hover {
  background: var(--brand-deep, #9c4612);
  box-shadow: 0 2px 8px rgba(239,125,43,0.30);
}
.editor-topbar-canva .editor-topbar-share:active { transform: scale(0.98); }
.editor-topbar-canva .editor-topbar-share:disabled {
  background: #d4d4d8;
  color: #fff;
  cursor: not-allowed;
  box-shadow: none;
}

/* Pills row chevron-LEFT — mirrors the chevron-right. Hidden by default,
   shown by JS once the row has scrolled past 0. */
.editor-canva-pills-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  width: 24px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to left, rgba(255,255,255,0), #fff 70%);
  opacity: 0;
  transition: opacity 0.12s ease;
}
.editor-canva-pills-wrap:has(.editor-canva-pills-prev:not([hidden]))::before {
  opacity: 1;
}
.editor-canva-pills-prev {
  position: absolute;
  top: 50%;
  left: -2px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px #dadde2, 0 2px 6px rgba(0,0,0,0.06);
  color: #0d1216;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.editor-canva-pills-prev[hidden] { display: none; }
.editor-canva-pills-prev:hover {
  background: #f4f4f7;
  box-shadow: 0 0 0 1px #c5c8ce, 0 3px 8px rgba(0,0,0,0.08);
}
.editor-canva-pills-prev svg { stroke: currentColor; }
.editor-canva-pills-next[hidden] { display: none; }

/* When the row is scrolled past the start, pad-left so the leftmost
   pill doesn't sit under the chevron. */
.editor-canva-pills-wrap:has(.editor-canva-pills-prev:not([hidden])) .editor-canva-pills--scroll {
  padding-left: 36px;
}

/* Standalone floating Discard button (Save moved up to the top bar). */
.editor-share-discard {
  position: absolute;
  top: 16px;
  right: 24px;
  z-index: 6;
}

/* Page-mode app-header is now hidden — the editor's own gradient top
   bar fully replaces it so we don't get a double-strip. */
body:has(.editor-shell--page) .app-header { display: none !important; }

/* ── Chat Edit magical cast ─────────────────────────────────────────
   The floating "Chat Edit" pill above the canvas fires a brief
   magical animation on click before handing off to the chat thread:
   the pill itself pops + glows, the sparkle icon spins and flares,
   a soft halo ripples out from the pill across the canvas, and 8
   tiny sparkle particles burst outward in a radial pattern. After
   ~460ms the normal chat-edit dispatch fires (window.open to /create
   ?action=chat-edit), so the destination is unchanged — only the
   transition is more delightful. */
.editor-obj-ask {
  transition: background 0.12s ease, box-shadow 0.18s ease, transform 0.18s ease;
  position: relative;
  overflow: visible;
}
.editor-obj-ask.is-casting {
  animation: editor-chat-edit-pop 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
  background: linear-gradient(135deg, #fff4eb 0%, #ffe3c7 100%);
  box-shadow:
    0 0 0 1px rgba(239, 125, 43, 0.4),
    0 6px 20px rgba(239, 125, 43, 0.32),
    0 0 24px rgba(247, 165, 94, 0.55);
  color: #7a360e;
}
@keyframes editor-chat-edit-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.07); }
  70%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}
.editor-obj-ask.is-casting .editor-obj-ask-icon {
  animation: editor-chat-edit-spark 620ms ease-in-out;
  color: #c2530f;
}
@keyframes editor-chat-edit-spark {
  0%   { transform: rotate(0)      scale(1);   filter: drop-shadow(0 0 0 rgba(247, 165, 94, 0)); }
  40%  { transform: rotate(180deg) scale(1.55); filter: drop-shadow(0 0 8px rgba(247, 165, 94, 0.95)); }
  100% { transform: rotate(360deg) scale(1);   filter: drop-shadow(0 0 0 rgba(247, 165, 94, 0)); }
}

/* Burst container is positioned at the same anchor as the obj-menu
   (top: 60px, centered) so sparkles fly out from the pill itself. */
.editor-chat-edit-burst {
  position: absolute;
  top: 78px;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 7;
}
.editor-chat-edit-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(247, 165, 94, 0.55) 0%,
    rgba(247, 165, 94, 0.28) 35%,
    transparent 70%);
  filter: blur(2px);
  opacity: 0;
  animation: editor-chat-edit-halo 620ms ease-out forwards;
}
@keyframes editor-chat-edit-halo {
  0%   { opacity: 0; transform: scale(0.4); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: scale(3.4); }
}
.editor-chat-edit-sparkle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #fcd9b6 55%, transparent 75%);
  box-shadow:
    0 0 6px #f7a55e,
    0 0 14px rgba(247, 165, 94, 0.55);
  opacity: 0;
  transform: rotate(var(--ang, 0deg)) translateY(0) scale(0.6);
  animation: editor-chat-edit-fly 720ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes editor-chat-edit-fly {
  0%   { opacity: 0; transform: rotate(var(--ang, 0deg)) translateY(0)                            scale(0.6); }
  18%  { opacity: 1; transform: rotate(var(--ang, 0deg)) translateY(calc(var(--dist, 80px) * -0.18)) scale(1.1); }
  100% { opacity: 0; transform: rotate(var(--ang, 0deg)) translateY(calc(var(--dist, 80px) * -1))    scale(0.2); }
}

/* While the cast is running, give the canvas a faint purple wash so
   the magic feels like it's affecting the artwork, not just the pill. */
.editor-shell[data-chat-edit-casting="true"] .editor-canvas {
  transition: box-shadow 0.18s ease, filter 0.18s ease;
  box-shadow:
    0 0 0 2px rgba(239, 125, 43, 0.85),
    0 0 0 8px rgba(247, 165, 94, 0.18),
    0 8px 30px rgba(239, 125, 43, 0.18),
    0 18px 50px rgba(15, 23, 42, 0.14);
}

/* Honor reduced-motion: drop the cast animation entirely. */
@media (prefers-reduced-motion: reduce) {
  .editor-obj-ask.is-casting,
  .editor-obj-ask.is-casting .editor-obj-ask-icon,
  .editor-chat-edit-halo,
  .editor-chat-edit-sparkle {
    animation: none !important;
  }
  .editor-chat-edit-burst { display: none; }
}

/* ── In-place Chat Edit overlay ─────────────────────────────────────
   Mounts on top of the editor shell so the editor stays as the visible
   background (dimmed + blurred) and the chat card lands in front. The
   magical cast on the floating "Chat Edit" pill flows directly into
   this overlay's scale-in entrance — the burst peaks just as the card
   materializes. Closing fades back to the editor unchanged. */
.editor-chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.editor-chat-overlay-dim {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(6px) saturate(0.85);
  -webkit-backdrop-filter: blur(6px) saturate(0.85);
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: auto;
}
.editor-chat-overlay.is-open .editor-chat-overlay-dim { opacity: 1; }
.editor-chat-overlay.is-closing .editor-chat-overlay-dim { opacity: 0; }

.editor-chat-overlay-card {
  position: relative;
  /* Widened from 640 → 760 and bumped height cap so the preview, the
     suggestion chips, and the prompt input all fit on a laptop without
     scrolling. Pairs with the preview shrink below. */
  width: min(760px, calc(100% - 48px));
  max-height: min(88vh, 820px);
  background: #fff;
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(239, 125, 43, 0.18),
    0 24px 80px rgba(15, 23, 42, 0.32),
    0 0 80px rgba(247, 165, 94, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
  transform: translateY(28px) scale(0.92);
  opacity: 0;
  transition:
    transform 320ms cubic-bezier(0.22, 1.18, 0.32, 1),
    opacity 240ms ease,
    box-shadow 320ms ease;
}
.editor-chat-overlay.is-open .editor-chat-overlay-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.editor-chat-overlay.is-closing .editor-chat-overlay-card {
  transform: translateY(12px) scale(0.96);
  opacity: 0;
  transition: transform 220ms ease-in, opacity 200ms ease;
}

.editor-chat-overlay-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.editor-chat-overlay-close:hover { background: #f3f4f6; color: #0d1216; }

.editor-chat-overlay-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 20px 24px 14px;
  border-bottom: 1px solid #f1f1f4;
}
.editor-chat-overlay-head-spark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff4eb, #ffe3c7);
  color: #c2530f;
  box-shadow: 0 0 0 1px rgba(239, 125, 43, 0.18), 0 6px 16px rgba(239, 125, 43, 0.18);
}
.editor-chat-overlay-head-text { min-width: 0; }
.editor-chat-overlay-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #0d1216;
  letter-spacing: -0.01em;
}
.editor-chat-overlay-sub {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #4b5563;
}

.editor-chat-overlay-thread {
  flex: 1 1 auto;
  min-height: 120px;
  max-height: 100%;
  overflow-y: auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.editor-chat-overlay-empty {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 0;
}
.editor-chat-overlay-empty em {
  font-style: normal;
  background: #f4f4f7;
  padding: 1px 6px;
  border-radius: 6px;
  color: #0d1216;
  margin: 0 2px;
}

.editor-chat-overlay-turn { display: flex; }
.editor-chat-overlay-turn--user { justify-content: flex-end; }
.editor-chat-overlay-turn--assistant { justify-content: flex-start; }
.editor-chat-overlay-bubble {
  max-width: 75%;
  padding: 8px 12px;
  border-radius: 14px;
  background: #c2530f;
  color: #fff;
  font-size: 13.5px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.editor-chat-overlay-turn--assistant .editor-chat-overlay-bubble {
  background: #f4f4f7;
  color: #0d1216;
}
.editor-chat-overlay-result {
  max-width: 75%;
  border-radius: 14px;
  overflow: hidden;
  background: #f4f4f7;
  border: 1px solid #ececef;
}
.editor-chat-overlay-result img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  background: #fff;
}
.editor-chat-overlay-error {
  max-width: 75%;
  padding: 8px 12px;
  border-radius: 14px;
  background: #fef2f2;
  color: #991b1b;
  font-size: 13px;
  border: 1px solid #fecaca;
}
.editor-chat-overlay-thinking {
  display: inline-flex;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #f4f4f7;
}
.editor-chat-overlay-thinking span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9ca3af;
  animation: editor-chat-overlay-dot 1s ease-in-out infinite;
}
.editor-chat-overlay-thinking span:nth-child(2) { animation-delay: 0.15s; }
.editor-chat-overlay-thinking span:nth-child(3) { animation-delay: 0.3s; }
@keyframes editor-chat-overlay-dot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-3px); opacity: 1; }
}

.editor-chat-overlay-composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px 16px 16px;
  border-top: 1px solid #f1f1f4;
  background: #fafafa;
}
.editor-chat-overlay-input {
  flex: 1;
  min-height: 44px;
  max-height: 140px;
  resize: none;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  background: #fff;
  color: #0d1216;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.editor-chat-overlay-input:focus {
  border-color: #ef7d2b;
  box-shadow: 0 0 0 3px rgba(239, 125, 43, 0.2);
}
.editor-chat-overlay-send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: #0d1216;
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease, opacity 0.12s ease;
}
.editor-chat-overlay-send:hover { background: #1f2937; }
.editor-chat-overlay-send:active { transform: scale(0.98); }
.editor-chat-overlay-send:disabled { opacity: 0.55; cursor: progress; }
.editor-chat-overlay-status {
  margin: 0;
  padding: 0 16px 12px;
  font-size: 12px;
  color: #6b7280;
  min-height: 16px;
  background: #fafafa;
}

/* When the chat overlay is open, gently push the editor underneath so
   the dimmed background feels intentional (subtle scale + blur). The
   overlay itself supplies the dark wash; the editor just sits back. */
.editor-shell[data-chat-edit-open="true"] .editor-canvas-stage {
  transition: filter 240ms ease, transform 240ms ease;
  filter: saturate(0.85);
}

@media (prefers-reduced-motion: reduce) {
  .editor-chat-overlay-dim,
  .editor-chat-overlay-card { transition: none !important; }
}

/* Chat Edit overlay — header reshuffle to match the legacy modal:
   title left + Recolor pill right (no inline sparkle icon). The empty
   state now front-loads the design preview so the user sees what
   they're editing the moment the card lands. */
.editor-chat-overlay-head {
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}
.editor-chat-overlay-head-text { flex: 1 1 auto; }
.editor-chat-overlay-recolor {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #fed7aa;
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  color: #9a3412;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.editor-chat-overlay-recolor:hover {
  background: linear-gradient(135deg, #ffedd5, #fed7aa);
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.18);
}
.editor-chat-overlay-recolor:active { transform: scale(0.98); }

/* "Starting from this image" preview occupies the empty thread until
   the user sends the first turn. Matches the legacy modal's framed
   thumbnail with the small uppercase label above. */
.editor-chat-overlay-empty {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  padding: 12px 0 8px;
}
.editor-chat-overlay-empty-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
  align-self: flex-start;
}
.editor-chat-overlay-empty-thumb {
  width: 100%;
  /* Shrunk 360 → 240 so the preview no longer eats the full vertical
     room on laptop screens. The wider modal + smaller preview means
     the suggestion chips + prompt input land above the fold. */
  max-width: 240px;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  background: #f4f4f7;
  border: 1px solid #ececef;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.editor-chat-overlay-empty-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.editor-chat-overlay-empty-fallback {
  color: #9ca3af;
  font-size: 12px;
}

/* "Starting image" anchor — what the empty-state thumb becomes after
   the first prompt fires. Persists at the top of the thread as a
   compact, captioned framed thumb so the conversation reads as a
   continuous timeline from "what you started with" → variations. */
.editor-chat-overlay-turn--anchor {
  justify-content: center;
}
.editor-chat-overlay-anchor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  width: 100%;
  max-width: 220px;
}
.editor-chat-overlay-anchor-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
}
.editor-chat-overlay-anchor-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: #f4f4f7;
  border: 1px solid #ececef;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05);
}
.editor-chat-overlay-anchor-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

/* ── Chat overlay: body wrapper ─────────────────────────────────────
   `data-overlay-body` wraps the thread so we can swap the entire body
   for the inline recolor panel without disturbing header/composer. */
.editor-chat-overlay-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.editor-chat-overlay-body > .editor-chat-overlay-thread {
  flex: 1 1 auto;
}

/* ── Suggestion pills row above the composer ────────────────────────
   Tap-targets for canned prompts + the Recolor feature entry. Scrolls
   horizontally on tight viewports. */
.editor-chat-overlay-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px 4px;
  background: #fafafa;
  border-top: 1px solid #f1f1f4;
}
.editor-chat-overlay-suggestions[hidden] { display: none; }
/* All pills share one shape: thin border, white bg, icon + label.
   No "feature" highlight on Recolor — it sits in the lineup as just
   another inspiration pill so nothing reads as pre-selected. */
.editor-chat-overlay-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e5e7eb;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease, opacity 0.22s ease, box-shadow 0.18s ease;
}
.editor-chat-overlay-pill:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #0d1216;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.editor-chat-overlay-pill:active { transform: scale(0.98); }
.editor-chat-overlay-pill--feature {
  /* Same shape as the others now — kept as a hook in case a future
     change wants to re-emphasize it (e.g. a left-aligned anchor). */
}
.editor-chat-overlay-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 13px;
  line-height: 1;
  color: #6b7280;
  flex-shrink: 0;
}
.editor-chat-overlay-pill-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.12);
}
/* Rotating pills crossfade on swap so new suggestions blink in
   gracefully instead of pop-swapping in place. */
.editor-chat-overlay-pill--rotating { opacity: 1; }
.editor-chat-overlay-pill--rotating.is-swapping {
  opacity: 0;
  transform: translateY(-2px);
}

/* ── Inline recolor panel (replaces thread body in place) ──────────── */
.editor-chat-overlay-recolor-panel {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 20px 14px;
  border-top: 1px solid #f1f1f4;
  background: #fafafa;
}

/* Class-based hide used during the recolor flow. `[hidden]` loses to
   `display: flex` set on these elements in author CSS, so we toggle a
   class instead. */
.editor-chat-overlay-hidden { display: none !important; }

/* When the recolor picker is open, keep the original stacked layout
   (image up top, picker below) but trim the image down a bit and
   tighten the panel so everything fits without scrolling. */
.editor-chat-overlay-body.is-picking {
  overflow-y: auto;
}
.editor-chat-overlay-body.is-picking > .editor-chat-overlay-thread {
  flex: 0 0 auto;
  overflow-y: visible;
  max-height: none;
  padding: 12px 24px 4px;
  gap: 8px;
}
.editor-chat-overlay-body.is-picking .editor-chat-overlay-empty {
  gap: 6px;
  padding: 0;
}
.editor-chat-overlay-body.is-picking .editor-chat-overlay-empty-thumb {
  max-width: 260px;
  width: 260px;
  margin: 0 auto;
  border-radius: 12px;
}
.editor-chat-overlay-body.is-picking .editor-chat-overlay-recolor-head h4 {
  font-size: 15px;
  margin: 0;
}
.editor-chat-overlay-body.is-picking .editor-chat-overlay-recolor-head p {
  font-size: 12.5px;
  margin: 2px 0 0;
}
.editor-chat-overlay-body.is-picking .editor-chat-overlay-recolor-target {
  gap: 4px;
}
.editor-chat-overlay-body.is-picking .editor-chat-overlay-recolor-target input {
  padding: 8px 10px;
  font-size: 13px;
}
.editor-chat-overlay-body.is-picking .editor-chat-overlay-recolor-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 6px;
  padding: 2px 1px 6px;
  scrollbar-width: thin;
  grid-template-columns: none;
}
.editor-chat-overlay-body.is-picking .editor-chat-overlay-swatch {
  flex: 0 0 auto;
  padding: 5px 10px 5px 6px;
  gap: 6px;
  min-width: 0;
}
.editor-chat-overlay-body.is-picking .editor-chat-overlay-swatch-color {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.12);
}
.editor-chat-overlay-body.is-picking .editor-chat-overlay-swatch-name {
  font-size: 12.5px;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Kit-sourced swatches get a clear visual treatment: faint purple
   pill background + a small star badge on the color circle so the
   user instantly knows "this is one of mine, saved." Custom swatches
   stay plain. */
.editor-chat-overlay-body.is-picking .editor-chat-overlay-swatch.is-kit {
  background: rgba(247, 165, 94, 0.08);
  border-color: rgba(247, 165, 94, 0.45);
}
.editor-chat-overlay-body.is-picking .editor-chat-overlay-swatch.is-kit.is-selected {
  background: rgba(247, 165, 94, 0.18);
  border-color: #c2530f;
}
.editor-chat-overlay-body.is-picking .editor-chat-overlay-swatch .editor-chat-overlay-swatch-color {
  position: relative;
}
.editor-chat-overlay-swatch-kit-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #c2530f;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* Pin the + Add button to the left of the row even when the colors
   row scrolls horizontally — sticky positioning + matching background
   so it doesn't get scrolled out of reach. */
.editor-chat-overlay-body.is-picking .editor-chat-overlay-swatch-add {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fafafa;
  box-shadow: 6px 0 6px -6px rgba(15, 23, 42, 0.08);
}

/* Save-to-kit toggle inside the inline add form. */
.editor-chat-overlay-recolor-add-save {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.editor-chat-overlay-recolor-add-save[hidden] { display: none; }
.editor-chat-overlay-recolor-add-save:has(input:checked) {
  background: rgba(247, 165, 94, 0.12);
  border-color: rgba(247, 165, 94, 0.55);
  color: #5b21b6;
}
.editor-chat-overlay-recolor-add-save input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.editor-chat-overlay-recolor-add-save-icon {
  display: inline-flex;
  align-items: center;
  color: #9ca3af;
}
.editor-chat-overlay-recolor-add-save:has(input:checked) .editor-chat-overlay-recolor-add-save-icon {
  color: #c2530f;
}
.editor-chat-overlay-recolor-sub {
  font-size: 12.5px;
  font-weight: 400;
  color: #6b7280;
  margin-left: 2px;
}

/* Source-row sits ABOVE the swatches with a small contextual label
   on the left and a "Save to brand kit" button on the right. The
   label updates as colors move in/out of the kit; the button hides
   itself once every color is saved. */
.editor-chat-overlay-recolor-source-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 22px;
}
.editor-chat-overlay-recolor-source-text {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.01em;
}
.editor-chat-overlay-recolor-save-kit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(247, 165, 94, 0.55);
  background: rgba(247, 165, 94, 0.10);
  color: #5b21b6;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.editor-chat-overlay-recolor-save-kit:hover {
  background: rgba(247, 165, 94, 0.18);
  border-color: rgba(239, 125, 43, 0.7);
}
.editor-chat-overlay-recolor-save-kit:active { transform: scale(0.98); }
.editor-chat-overlay-recolor-save-kit[hidden] { display: none; }
.editor-chat-overlay-recolor-save-kit-icon {
  display: inline-flex;
  align-items: center;
  color: #c2530f;
}

/* Inline confirmation prompt that appears below the swatch row when
   the user clicks Save to brand kit. Same surface for both paths
   (save vs. connect a store) so the affordance stays consistent. */
.editor-chat-overlay-recolor-save-prompt {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff7f0;
  border: 1px solid rgba(247, 165, 94, 0.35);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.editor-chat-overlay-recolor-save-prompt[hidden] { display: none; }
.editor-chat-overlay-recolor-save-prompt-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #0d1216;
}
.editor-chat-overlay-recolor-save-prompt-text strong {
  font-weight: 600;
}
.editor-chat-overlay-recolor-save-prompt-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.editor-chat-overlay-recolor-save-prompt-cancel,
.editor-chat-overlay-recolor-save-prompt-confirm {
  padding: 6px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #0d1216;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.editor-chat-overlay-recolor-save-prompt-cancel:hover {
  background: #f4f4f7;
}
.editor-chat-overlay-recolor-save-prompt-confirm {
  background: #c2530f;
  border-color: #c2530f;
  color: #fff;
}
.editor-chat-overlay-recolor-save-prompt-confirm:hover {
  background: #5b21b6;
  border-color: #5b21b6;
}
.editor-chat-overlay-recolor-save-prompt-confirm:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* Star button on every swatch — outline by default ("save"), filled
   purple when the color is already in the kit ("saved"). Click toggles. */
.editor-chat-overlay-swatch-star {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #c4c4c8;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease, transform 0.12s ease;
  margin-left: 2px;
}
.editor-chat-overlay-swatch-star:hover:not(:disabled) {
  color: #c2530f;
  background: rgba(247, 165, 94, 0.12);
}
.editor-chat-overlay-swatch-star.is-saved {
  color: #c2530f;
}
.editor-chat-overlay-swatch-star.is-saved:hover:not(:disabled) {
  color: #5b21b6;
}
.editor-chat-overlay-swatch-star:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.editor-chat-overlay-swatch-star:active:not(:disabled) {
  transform: scale(0.9);
}

.editor-chat-overlay-swatch-add {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  align-self: center;
  padding: 0;
  border-radius: 50%;
  border: 1px dashed #c4c4c8;
  background: #fff;
  color: #6b7280;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.editor-chat-overlay-swatch-add:hover {
  background: #f4f4f7;
  border-color: #9ca3af;
  color: #0d1216;
}

/* Inline "Add color" form revealed when "+" is clicked. */
.editor-chat-overlay-recolor-add-form {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px;
  background: #fff;
  border: 1px solid #ececef;
  border-radius: 10px;
}
.editor-chat-overlay-recolor-add-form[hidden] { display: none; }
.editor-chat-overlay-recolor-add-color {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.12);
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
}
.editor-chat-overlay-recolor-add-color-swatch {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.editor-chat-overlay-recolor-add-color input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
}
.editor-chat-overlay-recolor-add-form input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
.editor-chat-overlay-recolor-add-form input[type="text"]:focus {
  border-color: #ef7d2b;
  box-shadow: 0 0 0 3px rgba(247, 165, 94, 0.18);
}
.editor-chat-overlay-recolor-add-commit {
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: #0d1216;
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.editor-chat-overlay-recolor-add-cancel {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #6b7280;
  font-size: 16px;
  cursor: pointer;
}
.editor-chat-overlay-recolor-add-cancel:hover { background: #f4f4f7; color: #0d1216; }
.editor-chat-overlay-body.is-picking .editor-chat-overlay-recolor-back {
  font-size: 12px;
  padding: 2px 6px;
}
.editor-chat-overlay-body.is-picking .editor-chat-overlay-recolor-cancel,
.editor-chat-overlay-body.is-picking .editor-chat-overlay-recolor-fire {
  padding: 8px 14px;
  font-size: 13px;
}
.editor-chat-overlay-recolor-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: #4b5563;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.editor-chat-overlay-recolor-back:hover { background: #f3f4f6; color: #0d1216; }
.editor-chat-overlay-recolor-head h4 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: #0d1216;
}
.editor-chat-overlay-recolor-head p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #4b5563;
}
.editor-chat-overlay-recolor-target {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.editor-chat-overlay-recolor-target span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
}
.editor-chat-overlay-recolor-target input {
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.editor-chat-overlay-recolor-target input:focus {
  border-color: #ef7d2b;
  box-shadow: 0 0 0 3px rgba(247, 165, 94, 0.2);
}
.editor-chat-overlay-recolor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.editor-chat-overlay-swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.editor-chat-overlay-swatch input { display: none; }
.editor-chat-overlay-swatch.is-selected {
  border-color: #c2530f;
  background: #fff7f0;
  box-shadow: 0 0 0 2px rgba(239, 125, 43, 0.18);
}
.editor-chat-overlay-swatch-color {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  flex-shrink: 0;
}
.editor-chat-overlay-swatch-name {
  font-size: 13px;
  font-weight: 500;
  color: #0d1216;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.editor-chat-overlay-recolor-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.editor-chat-overlay-recolor-cancel {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.editor-chat-overlay-recolor-cancel:hover { background: #f4f4f7; }
.editor-chat-overlay-recolor-fire {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(234, 88, 12, 0.32);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
.editor-chat-overlay-recolor-fire:hover { transform: translateY(-1px); }
.editor-chat-overlay-recolor-fire:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.editor-chat-overlay-recolor-status {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
  min-height: 16px;
}
.editor-chat-overlay-recolor-status.is-error { color: #b91c1c; }

/* ── Recolor results grid inside the chat thread ──────────────────── */
.editor-chat-overlay-recolor-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  padding: 4px 0;
}
.editor-chat-overlay-recolor-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #f4f4f7;
  border: 1px solid #ececef;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1.15;
  min-height: 160px;
}
.editor-chat-overlay-recolor-tile.is-pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fafafa;
}
.editor-chat-overlay-recolor-tile.is-pending .editor-chat-overlay-recolor-tile-swatch {
  position: static;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.editor-chat-overlay-recolor-tile-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(15, 23, 42, 0.12);
  border-top-color: #7c3aed;
  animation: editor-chat-overlay-spin 0.9s linear infinite;
}
@keyframes editor-chat-overlay-spin {
  to { transform: rotate(360deg); }
}
.editor-chat-overlay-recolor-tile.is-done {
  background: #fff;
}
.editor-chat-overlay-recolor-tile-img {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: cover;
  display: block;
}
.editor-chat-overlay-recolor-tile.is-done .editor-chat-overlay-recolor-tile-swatch {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.editor-chat-overlay-recolor-tile-name {
  padding: 6px 10px 8px;
  font-size: 12px;
  font-weight: 500;
  color: #0d1216;
  background: #fff;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.editor-chat-overlay-recolor-tile.is-pending .editor-chat-overlay-recolor-tile-name {
  background: transparent;
  color: #4b5563;
}
.editor-chat-overlay-recolor-tile.is-failed {
  background: #fef2f2;
  border-color: #fecaca;
  align-items: center;
  justify-content: center;
  gap: 6px;
  display: flex;
  flex-direction: column;
}
.editor-chat-overlay-recolor-tile-error {
  font-size: 12px;
  color: #991b1b;
  font-weight: 600;
}

/* ── Result-image hover menu ────────────────────────────────────────
   Tiny kebab trigger sits in the top-right corner of every result
   image in the chat thread (single-prompt result OR recolor tile).
   Hidden by default; faded in on hover of the parent image. Click the
   trigger to reveal a dropdown with Edit. Click Edit to open that
   design in its own /edit tab. */
.editor-chat-overlay-img-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.editor-chat-overlay-result,
.editor-chat-overlay-recolor-tile {
  position: relative;
}
.editor-chat-overlay-result:hover .editor-chat-overlay-img-actions,
.editor-chat-overlay-recolor-tile:hover .editor-chat-overlay-img-actions,
.editor-chat-overlay-img-actions.is-open,
.editor-chat-overlay-img-actions:focus-within {
  opacity: 1;
}
.editor-chat-overlay-img-actions-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: #0d1216;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: background 0.12s ease, transform 0.12s ease;
}
.editor-chat-overlay-img-actions-trigger:hover {
  background: #fff;
}
.editor-chat-overlay-img-actions-trigger:active { transform: scale(0.96); }
.editor-chat-overlay-img-actions-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 140px;
  padding: 4px;
  background: #fff;
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.06),
    0 10px 32px rgba(15, 23, 42, 0.18);
  display: none;
  z-index: 3;
}
.editor-chat-overlay-img-actions.is-open .editor-chat-overlay-img-actions-menu {
  display: block;
}
.editor-chat-overlay-img-action {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: #0d1216;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s ease;
}
.editor-chat-overlay-img-action:hover { background: #f4f4f7; }
.editor-chat-overlay-img-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #6b7280;
  flex-shrink: 0;
}

/* Topbar status text (sits next to the saved cloud icon). Stays out
   of the way until there's a real change to communicate. */
.editor-topbar-canva .editor-topbar-status {
  font-size: 12.5px;
  font-weight: 500;
  color: #6b6f76;
  letter-spacing: -0.005em;
  margin-left: 2px;
}
.editor-topbar-canva .editor-topbar-status[data-dirty="true"] {
  color: var(--brand, #ef7d2b);
  font-weight: 600;
}
.editor-topbar-canva .editor-topbar-status:empty { display: none; }

/* ── Editor share dialog ─────────────────────────────────────────────
   Mirrors the library's openShareDialog styling so the editor's
   Share button feels native. */
.editor-share-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13,18,22,0.36);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
  animation: editor-share-fade 0.16s ease;
}
@keyframes editor-share-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.editor-share-dialog {
  background: #fff;
  border-radius: 16px;
  max-width: 560px;
  width: 100%;
  box-shadow: 0 24px 80px rgba(0,0,0,0.20), 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  animation: editor-share-pop 0.20s cubic-bezier(.16,1,.3,1);
}
@keyframes editor-share-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.editor-share-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
}
.editor-share-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0d1216;
}
.editor-share-close {
  border: 0;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-size: 20px;
  color: #6b6f76;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.editor-share-close:hover { background: #f4f4f7; color: #0d1216; }
.editor-share-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 20px 20px;
}
.editor-share-preview {
  width: 100%;
  background: #f4f4f7;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.editor-share-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.editor-share-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.editor-share-field { display: block; }
.editor-share-field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #0d1216;
  margin-bottom: 8px;
}
.editor-share-link-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.editor-share-link-input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 13px;
  padding: 10px 12px;
  border: 1px solid var(--border, #ececec);
  border-radius: 8px;
  background: #fafafa;
  color: #0d1216;
  outline: 0;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.editor-share-link-input:focus {
  background: #fff;
  border-color: var(--brand, #ef7d2b);
}
.editor-share-copy {
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--brand, #ef7d2b);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease;
}
.editor-share-copy:hover { background: var(--brand-deep, #9c4612); }
.editor-share-copy.is-copied { background: #16a34a; }
.editor-share-field-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: #6b6f76;
}
.editor-share-divider {
  position: relative;
  text-align: center;
  margin: 4px 0;
}
.editor-share-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: var(--border, #ececec);
}
.editor-share-divider span {
  position: relative;
  background: #fff;
  padding: 0 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b6f76;
  font-weight: 600;
}
.editor-share-export-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border, #ececec);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.editor-share-export-cta:hover {
  border-color: var(--brand, #ef7d2b);
  background: var(--brand-soft, #fff4eb);
}
.editor-share-export-cta:active { transform: scale(0.99); }
.editor-share-export-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.editor-share-export-title {
  font-size: 14px;
  font-weight: 600;
  color: #0d1216;
}
.editor-share-export-sub {
  font-size: 12px;
  color: #6b6f76;
}
.editor-share-export-cta svg { color: var(--brand, #ef7d2b); flex-shrink: 0; }

/* Editing pill is a non-interactive status label, not a menu. */
.editor-topbar-canva .editor-topbar-pill--static {
  cursor: default;
  user-select: none;
}
.editor-topbar-canva .editor-topbar-pill--static:hover {
  background: var(--brand-soft, #fff4eb);
}

/* ── Design detail modal — cleanup pass ─────────────────────────────
   Replaces the wall-of-prompt body with a tight meta header (inline
   tag chips + optional description), a primary CTA, and a compact
   icon strip for secondary actions. Keeps existing element IDs so
   event wiring (modal-edit-image, modal-make-more, etc.) is intact. */

/* Inline meta-chip row sits right under the title. Reads as a quick
   identity scan ("Niche: dogs · Style: minimal · Mood: playful"). */
.modal-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 10px;
}
.modal-meta-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 9px;
  background: #f4f4f7;
  border: 1px solid #ececef;
  border-radius: 999px;
  font-size: 12px;
  color: #0d1216;
  line-height: 1.3;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal-meta-chip-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}

/* Optional description paragraph (uses the Q2'26 vivid-recap field). */
.modal-meta-desc {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #4b5563;
}

/* Primary CTA — Make more like this, sits prominently on its own row.
   Existing .modal-cta provides the orange treatment; this is just a
   thin override to ensure consistent spacing in the new layout. */
.modal-cta.modal-cta-primary {
  width: 100%;
  margin-top: 12px;
}

/* Compact icon-button strip — Edit / Brand kit / Template / Visibility
   / Download. Replaces a vertical stack of 5 ~44px-tall buttons with a
   single ~64px-tall row. Buttons grow to fill width equally. */
.modal-cta-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 10px 0 6px;
}
.modal-cta-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  color: #0d1216;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.modal-cta-icon-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.modal-cta-icon-btn:active { transform: scale(0.97); }
.modal-cta-icon-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: #fafafa;
}
.modal-cta-icon-glyph {
  font-size: 16px;
  line-height: 1;
  color: #4b5563;
}
.modal-cta-icon-label {
  font-size: 11px;
  font-weight: 500;
  color: #374151;
  text-align: center;
  white-space: nowrap;
}

/* On narrow viewports keep the strip readable: drop to a horizontal
   scroll strip rather than cramming 5 columns into a tiny width. */
@media (max-width: 540px) {
  .modal-cta-strip {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(72px, 1fr);
    overflow-x: auto;
    scrollbar-width: thin;
  }
}

/* Brand-color swatches appended after the standard neutrals are split
   off by a thin divider so the user can tell which swatches are
   "brand" vs default neutrals. */
.text-tool-swatch-divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border-strong, #d4d4d8);
  margin: 0 4px;
  flex-shrink: 0;
}
.text-tool-swatch--brand {
  /* Slight ring to read as "brand kit" without being noisy. */
  box-shadow: 0 0 0 1.5px var(--brand, #ef7d2b) inset;
}

/* ── /build marketing page styles ────────────────────────────────────
   Reuses landing-* base classes; adds code-card + MCP + pricing tease
   specifics. Code-forward dark aesthetic for the technical audience. */

.build-hero { align-items: flex-start; }
.build-hero .landing-h1 { font-size: clamp(36px, 5.2vw, 64px); }

/* Code card — used for the hero snippet and the MCP config card. */
.build-code-card {
  background: linear-gradient(180deg, rgba(15, 15, 23, 0.85) 0%, rgba(20, 20, 28, 0.65) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(124, 58, 237, 0.06);
}
.build-code-tabs {
  display: flex; gap: 4px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
}
.build-code-tab {
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--text-soft);
  cursor: default;
  letter-spacing: 0.01em;
}
.build-code-tab.is-active {
  background: rgba(124, 58, 237, 0.18);
  color: #c4b5fd;
  border: 1px solid rgba(124, 58, 237, 0.34);
}
.build-code-pre {
  margin: 0;
  padding: 18px 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.65;
  color: #e5e5ea;
  background: transparent;
  overflow-x: auto;
  white-space: pre;
}
.build-code-pre .kw  { color: #c4b5fd; }
.build-code-pre .str { color: #6ee7b7; }
.build-code-pre .num { color: #fbbf24; }
.build-code-pre .cmt { color: #6b7280; font-style: italic; }
.build-code-pre .fn  { color: #93c5fd; }
.build-code-foot {
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.015);
  font-size: 11.5px;
  color: var(--text-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.build-code-foot code {
  font-family: inherit;
  background: rgba(124, 58, 237, 0.12);
  padding: 1px 5px;
  border-radius: 3px;
  color: #c4b5fd;
}

/* ── MCP section ────────────────────────────────────────────────── */
.build-mcp-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  margin-top: 36px;
}
@media (max-width: 980px) {
  .build-mcp-grid { grid-template-columns: 1fr; }
}
.build-code-card-wide { width: 100%; }

.build-mcp-tools {
  padding: 28px 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
.build-mcp-tools h4 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.build-mcp-toolslist {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.build-mcp-toolslist li {
  display: grid;
  grid-template-columns: minmax(160px, auto) 1fr;
  gap: 14px;
  align-items: baseline;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.build-mcp-toolslist li:last-child { border-bottom: none; padding-bottom: 0; }
.build-mcp-toolslist code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: #c4b5fd;
  background: rgba(124, 58, 237, 0.12);
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
.build-mcp-toolslist span {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.5;
}

/* Inline code in card body copy */
.builtfor-card-rich p code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #c4b5fd;
  background: rgba(124, 58, 237, 0.12);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ── Pricing tease row ───────────────────────────────────────────── */
.build-pricing-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 36px;
}
@media (max-width: 820px) {
  .build-pricing-row { grid-template-columns: 1fr; }
}
.build-pricing-card {
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  display: flex; flex-direction: column; gap: 8px;
  align-items: flex-start;
}
.build-pricing-card-hero {
  border-color: rgba(168, 85, 247, 0.36);
  background:
    radial-gradient(140% 100% at 100% 0%, rgba(168, 85, 247, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
  box-shadow: 0 20px 60px -30px rgba(168, 85, 247, 0.5);
}
.build-pricing-tier {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.build-pricing-card-hero .build-pricing-tier { color: #c4b5fd; }
.build-pricing-amt {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.build-pricing-amt small {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: 0;
}
.build-pricing-meta {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.5;
}

/* Hero code card sizing on mobile — stack under copy */
@media (max-width: 980px) {
  .build-hero .build-hero-code { margin-top: 28px; }
}

/* ── /build upgrades v2 — announcement banner, larger hero, compat
   strip, honey-trail SVG, anchor-deep-linkable models ──────────────── */

/* 1. Thin announcement banner at top of body */
.build-announce {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 34px;
  padding: 6px 44px;
  background: linear-gradient(90deg, rgba(208, 155, 13, 0.18) 0%, rgba(245, 158, 11, 0.22) 50%, rgba(208, 155, 13, 0.18) 100%);
  border-bottom: 1px solid rgba(245, 158, 11, 0.28);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: #fde68a;
  z-index: 100;
}
.build-announce-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: inherit;
  text-decoration: none;
  text-align: center;
}
.build-announce-link:hover { color: #fef3c7; }
.build-announce-pixel {
  display: inline-block;
  width: 8px; height: 8px;
  background: #fbbf24;
  box-shadow:
    -6px 0 0 #d09b0d,
    6px 0 0 #d09b0d,
    0 -6px 0 #fde68a;
  animation: build-announce-pixel-shimmer 2.4s infinite ease-in-out;
}
@keyframes build-announce-pixel-shimmer {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
.build-announce-arrow {
  font-size: 14px;
  color: #fbbf24;
  transition: transform 0.2s;
}
.build-announce-link:hover .build-announce-arrow { transform: translateX(2px); }
.build-announce-dismiss {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #fde68a;
  font-size: 18px;
  width: 24px; height: 24px;
  border-radius: 4px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.build-announce-dismiss:hover { background: rgba(255, 255, 255, 0.08); }
@media (max-width: 640px) {
  .build-announce { font-size: 12px; padding: 6px 36px; }
}

/* 2. Bigger build hero H1 — fal.ai-scale display type */
.build-h1 {
  font-size: clamp(40px, 7.2vw, 88px) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.04em !important;
}
.build-h1 .hero-h1-line2 {
  display: block;
}

/* 3. Compatible-with strip */
.build-compat {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 18px;
}
.build-compat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.build-compat-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.build-compat-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 11px 5px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  letter-spacing: 0.005em;
  transition: all 0.18s;
}
.build-compat-chip:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}
.build-compat-mark {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--c, #888);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* 4. Honey-trail decorative SVG behind hero */
.build-honey-trail {
  position: absolute;
  top: 0; right: 0;
  width: 65%; max-width: 720px;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  filter: blur(0.4px) drop-shadow(0 0 18px rgba(208, 155, 13, 0.18));
}
.build-honey-line {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: build-honey-draw 2.4s ease-out forwards;
}
.build-honey-line-1 { animation-delay: 0.4s; }
.build-honey-line-2 { animation-delay: 0.9s; }
.build-honey-line-3 { animation-delay: 1.3s; }
@keyframes build-honey-draw {
  to { stroke-dashoffset: 0; }
}
/* Make sure copy + code sit above the decorative trail */
.build-hero .landing-hero-copy,
.build-hero .build-hero-code {
  position: relative;
  z-index: 1;
}
@media (max-width: 980px) {
  .build-honey-trail { opacity: 0.3; width: 90%; }
}

/* 5. Anchor-target offset for #models — keeps section header below the
   sticky nav when deep-linked or in-page jumped. */
#models { scroll-margin-top: 80px; }

@media (prefers-reduced-motion: reduce) {
  .build-announce-pixel,
  .build-honey-line {
    animation: none !important;
  }
  .build-honey-line {
    stroke-dashoffset: 0 !important;
  }
}

/* ── /build v2 fixes — scroll-lag mitigation + visibility safety ───
   The earlier honey-trail used filter+drop-shadow which is expensive
   to repaint on every scroll frame. Drop the filter; keep the SVG
   strokes themselves. Also kill the infinite shimmer in the
   announcement banner — once-played reveal is enough; infinite
   animation was forcing constant repaints. */

.build-honey-trail {
  filter: none;
}

.build-announce-pixel {
  /* Static — was animating infinitely, causing scroll-time repaints. */
  animation: none;
  opacity: 0.85;
}

/* Safety net: even if the inline JS for reveal-on-scroll fails to run
   (e.g., CSP blocks it), force elements visible after 2s. CSS-only
   fallback so the page never stays broken. */
.reveal-on-scroll {
  animation: build-reveal-fallback 0.8s 2s forwards;
}
@keyframes build-reveal-fallback {
  to { opacity: 1; transform: none; }
}

/* Disable the heavy landing mesh blobs on /build — they're decorative
   on landing.html but unnecessary on this developer-focused page and
   contribute to scroll-time blur compositing. */
.landing-dark:has(.build-announce) .landing-mesh,
.landing-dark:has(.build-honey-trail) .landing-mesh {
  display: none;
}