/* v3.58 · Christina 2026-05-13 · audit Bug 2 Win #2 · Safari + Firefox
 * crawl. 26+ backdrop-filter: blur() rules in this theme. Safari composites
 * each blur into a separate offscreen surface and re-rasterizes whenever
 * any ancestor repaints — typing on the canvas burns 60-150ms per keystroke
 * on Safari. Strip ALL blurs when an inline boot script in app.js detects
 * Safari/Firefox and adds html.cep-no-blur. Chrome keeps them. */
html.cep-no-blur *,
html.cep-no-blur *::before,
html.cep-no-blur *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/**
 * LAOUTS · Dark Matcha Brand Theme (Level 1 overlay).
 *
 * Adds the LAOUTS brand identity — Fraunces serif, Inter sans, dark
 * matcha palette with acid green accent — as an ADDITIVE overlay on top
 * of the existing balayage/plaster engine UI. Functional UI (canvas,
 * form controls, dropdowns, sidebars) is preserved as-is.
 *
 * Components introduced:
 *   • .laoutsBrandTopbar — sticky top bar with LAOUTS wordmark
 *   • body padding adjustment so content doesn't hide behind the bar
 *
 * Color authority for the brand layer:
 *   docs/LAOUTS_LAYOUT_ENGINE_SPEC.html (header tokens — :root vars)
 *
 * Loaded AFTER ui/laouts-ui.css so it can layer on top.
 */

/* ──────────────── Brand fonts ────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,ital,wght@9..144,0,300;9..144,0,400;9..144,0,500;9..144,1,400&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* ──────────────── Brand tokens (scoped to body.laouts) ───────── */
body.laouts {
  --laouts-bg:        #0f0d0a;
  --laouts-bg-1:      #15120e;
  --laouts-bg-2:      #1c1812;
  --laouts-bone:      #f0ebde;
  --laouts-bone-soft: #c9c2b0;
  --laouts-muted:     #8a8273;
  --laouts-subtle:    #5a5447;
  --laouts-hairline:  #2a2418;
  --laouts-hairline-2:#3a3325;
  --laouts-acid:      #c8e87b;
  --laouts-acid-soft: #a8c75c;
  --laouts-acid-glow: rgba(200, 232, 123, 0.18);
  --laouts-rose:      #e89a8a;
  --laouts-gold:      #d4b467;
  --laouts-font-serif:"Fraunces", Georgia, serif;
  --laouts-font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --laouts-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --laouts-topbar-h:  56px;
}

/* ──────────────── Brand top bar ──────────────────────────────── */
body.laouts {
  /** Reserve space for the sticky top bar so the editor view doesn't
   *  hide behind it. The bar lives outside any modal/view container. */
  padding-top: var(--laouts-topbar-h);
}

.laoutsBrandTopbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--laouts-topbar-h);
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  background: rgba(15, 13, 10, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--laouts-hairline);
  font-family: var(--laouts-font-sans);
  color: var(--laouts-bone);
  user-select: none;
  -webkit-user-select: none;
  /** Acid wash radial highlight at the top — subtle premium signal. */
  background-image:
    radial-gradient(40% 120% at 18% 0%, rgba(200, 232, 123, 0.07), transparent 60%),
    linear-gradient(rgba(15, 13, 10, 0.94), rgba(15, 13, 10, 0.94));
}

.laoutsBrandTopbar__wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--laouts-font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--laouts-bone);
}

.laoutsBrandTopbar__glyph {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--laouts-acid), var(--laouts-acid-soft) 60%, transparent 75%);
  box-shadow: 0 0 12px var(--laouts-acid-glow);
  flex-shrink: 0;
}

.laoutsBrandTopbar__divider {
  width: 1px;
  height: 24px;
  background: var(--laouts-hairline-2);
  flex-shrink: 0;
}

.laoutsBrandTopbar__crumbs {
  font-family: var(--laouts-font-mono);
  font-size: 11px;
  color: var(--laouts-muted);
  letter-spacing: 0.06em;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.laoutsBrandTopbar__crumbs em {
  color: var(--laouts-bone);
  font-style: normal;
}

.laoutsBrandTopbar__right {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  flex-shrink: 0;
}

.laoutsBrandTopbar__link {
  font-family: var(--laouts-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laouts-bone-soft);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color 0.15s ease;
}
.laoutsBrandTopbar__link:hover {
  color: var(--laouts-bone);
}
.laoutsBrandTopbar__link--accent {
  color: var(--laouts-acid);
}
.laoutsBrandTopbar__link--accent:hover {
  color: var(--laouts-bone);
}

.laoutsBrandTopbar__version {
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--laouts-subtle);
  padding: 4px 10px;
  border: 1px solid var(--laouts-hairline-2);
  border-radius: 999px;
  white-space: nowrap;
}

.laoutsBrandTopbar__version em {
  color: var(--laouts-acid);
  font-style: normal;
}

/* ──────────────── Modal-mode hide ────────────────────────────── */
/** When the export experience modal opens, the brand topbar would
 *  collide with the modal's own topbar. Hide ours when the modal
 *  is visible. The modal has [hidden] removed when active. */
body.laouts:has(#cepOrderExperience:not([hidden])) .laoutsBrandTopbar {
  display: none;
}
body.laouts:has(#cepOrderExperience:not([hidden])) {
  padding-top: 0;
}

/* ──────────────── Mobile responsive ──────────────────────────── */
@media (max-width: 720px) {
  body.laouts {
    --laouts-topbar-h: 48px;
  }
  .laoutsBrandTopbar {
    gap: 12px;
    padding: 0 14px;
  }
  .laoutsBrandTopbar__crumbs {
    display: none;
  }
  .laoutsBrandTopbar__divider {
    display: none;
  }
  .laoutsBrandTopbar__version {
    display: none;
  }
  .laoutsBrandTopbar__wordmark {
    font-size: 11px;
  }
}

/* ──────────────── Print suppression ──────────────────────────── */
@media print {
  .laoutsBrandTopbar { display: none !important; }
  body.laouts { padding-top: 0 !important; }
}

/* ──────────────── Order experience (cepOrderExperience) — dark matcha overrides ─────────────── */
/** The order/checkout modal had its own beige aesthetic. We override with
 *  dark matcha tokens scoped to body.laouts so the brand is consistent
 *  end to end. Doesn't change DOM or interactions; pure paint changes. */

body.laouts #cepOrderExperience {
  background: var(--laouts-bg) !important;
  color: var(--laouts-bone) !important;
  font-family: var(--laouts-font-sans) !important;
  background-image:
    radial-gradient(50% 30% at 50% 0%, rgba(200, 232, 123, 0.06), transparent 60%) !important;
}

body.laouts .cepOrderExperience__topbar {
  background: rgba(15, 13, 10, 0.94) !important;
  border-bottom: 1px solid var(--laouts-hairline) !important;
  color: var(--laouts-bone) !important;
}

body.laouts .cepOrderBack,
body.laouts .cepOrderX {
  font-family: var(--laouts-font-mono) !important;
  background: transparent !important;
  border: 1px solid var(--laouts-hairline-2) !important;
  color: var(--laouts-bone-soft) !important;
  border-radius: 999px !important;
  letter-spacing: 0.06em !important;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease !important;
}
body.laouts .cepOrderBack:hover,
body.laouts .cepOrderX:hover {
  border-color: var(--laouts-acid) !important;
  color: var(--laouts-acid) !important;
}
body.laouts .cepOrderX {
  font-family: var(--laouts-font-serif) !important;
  font-size: 22px !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.laouts .cepOrderKicker {
  font-family: var(--laouts-font-mono) !important;
  color: var(--laouts-acid) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-size: 10.5px !important;
}

body.laouts .cepOrderExperience__topbarTitle h1,
body.laouts #cepOrderExperienceTitle {
  font-family: var(--laouts-font-serif) !important;
  font-weight: 300 !important;
  color: var(--laouts-bone) !important;
  letter-spacing: -0.02em !important;
}

body.laouts .cepOrderSubtitle,
body.laouts #cepOrderSubLead {
  color: var(--laouts-bone-soft) !important;
  font-family: var(--laouts-font-sans) !important;
}

body.laouts .cepOrderHeroFrame,
body.laouts .cepOrderBlockPanel,
body.laouts .cepOrderPackageCard,
body.laouts .cepOrderSticky,
body.laouts .cepOrderOutCard {
  background: var(--laouts-bg-1) !important;
  border: 1px solid var(--laouts-hairline-2) !important;
  border-radius: 14px !important;
  color: var(--laouts-bone) !important;
}

body.laouts .cepOrderPackageCard__title,
body.laouts .cepOrderOutCard h3 {
  font-family: var(--laouts-font-serif) !important;
  font-weight: 300 !important;
  color: var(--laouts-bone) !important;
  letter-spacing: -0.01em !important;
}
body.laouts .cepOrderPackageCard__price {
  font-family: var(--laouts-font-mono) !important;
  color: var(--laouts-acid) !important;
  font-weight: 500 !important;
}
body.laouts .cepOrderPackageCard__body,
body.laouts .cepOrderHeroMeta,
body.laouts .cepOrderOutCard p,
body.laouts .cepOrderSticky__meta {
  color: var(--laouts-bone-soft) !important;
  font-family: var(--laouts-font-sans) !important;
}
body.laouts .cepOrderSticky__meta b,
body.laouts .cepOrderOffer b {
  color: var(--laouts-bone) !important;
}

/** Highlighted/selected package — acid green border & glow. */
body.laouts .cepOrderPackageCard.is-selected,
body.laouts .cepOrderPackageCard:hover {
  border-color: var(--laouts-acid) !important;
  box-shadow: 0 0 24px var(--laouts-acid-glow) !important;
}

/** Promotion stripe — keep visible but in brand. */
body.laouts .cepOrderPromo,
body.laouts .cepOrderOffer {
  background: linear-gradient(165deg, var(--laouts-bg-2) 0%, var(--laouts-bg-1) 100%) !important;
  border: 1px solid var(--laouts-hairline-2) !important;
  color: var(--laouts-bone) !important;
}

/** Primary CTA buttons inside the order modal. */
body.laouts #cepOrderExperience .btn,
body.laouts #cepOrderExperience button[class*="cepOrder"]:not(.cepOrderBack):not(.cepOrderX) {
  font-family: var(--laouts-font-mono) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  padding: 16px 24px !important;
  border-radius: 999px !important;
  border: 1px solid var(--laouts-acid) !important;
  background: var(--laouts-acid) !important;
  color: var(--laouts-bg) !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  box-shadow: 0 0 24px var(--laouts-acid-glow) !important;
}
body.laouts #cepOrderExperience .btn:hover,
body.laouts #cepOrderExperience button[class*="cepOrder"]:not(.cepOrderBack):not(.cepOrderX):hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 0 36px rgba(200, 232, 123, 0.32) !important;
}

/** Product line / size selectors — keep functional, restyle visually. */
body.laouts #cepOrderExperience select,
body.laouts #cepOrderExperience input[type="text"],
body.laouts #cepOrderExperience input[type="email"],
body.laouts #cepOrderExperience input[type="number"] {
  background: var(--laouts-bg-2) !important;
  color: var(--laouts-bone) !important;
  border: 1px solid var(--laouts-hairline-2) !important;
  border-radius: 8px !important;
  font-family: var(--laouts-font-sans) !important;
  padding: 10px 14px !important;
}
body.laouts #cepOrderExperience select:focus,
body.laouts #cepOrderExperience input:focus {
  outline: none !important;
  border-color: var(--laouts-acid) !important;
  box-shadow: 0 0 0 3px var(--laouts-acid-glow) !important;
}

/** Hint / helper text inside the order modal. */
body.laouts #cepOrderExperience .hint {
  color: var(--laouts-muted) !important;
  font-family: var(--laouts-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
}

/** Hero canvas frame — give it a brand border so the spread preview
 *  feels intentional inside the dark surface. */
body.laouts .cepOrderHeroCanvas {
  border: 1px solid var(--laouts-hairline-2) !important;
  border-radius: 8px !important;
  background: #fff !important; /* keep canvas itself white for accurate preview */
}

/* ══════════════════════════════════════════════════════════════════ */
/*  VISION DASHBOARD PANEL                                          */
/*                                                                    */
/*  Slide-out panel pinned to the right edge of the viewport.         */
/*  Built by ui/laouts-vision-panel.js. Pure overlay — never        */
/*  modifies engine state. All classes prefixed `laoutsMvz`.          */
/* ══════════════════════════════════════════════════════════════════ */

/* Topbar trigger pill — sits in .laoutsBrandTopbar__right */
.laoutsBrandTopbar__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--laouts-bone);
  background: rgba(200, 232, 123, 0.06);
  border: 1px solid var(--laouts-hairline-2);
  border-radius: 999px;
  padding: 6px 12px 6px 10px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.laoutsBrandTopbar__pill:hover {
  border-color: var(--laouts-acid);
  background: rgba(200, 232, 123, 0.12);
  color: var(--laouts-acid);
}
.laoutsBrandTopbar__pillDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--laouts-acid);
  box-shadow: 0 0 8px var(--laouts-acid-glow);
  animation: laoutsMvzPulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes laoutsMvzPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1.00; transform: scale(1.35); }
}

/* Outer container (full viewport, but pointer-events route through) */
.laoutsMvz {
  position: fixed;
  inset: 0;
  z-index: 9500;
  pointer-events: none;
  font-family: var(--laouts-font-sans);
  color: var(--laouts-bone);
}

.laoutsMvz__scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 13, 10, 0.45);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.laoutsMvz--open .laoutsMvz__scrim {
  opacity: 1;
  pointer-events: auto;
}

.laoutsMvz__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 92vw);
  background: var(--laouts-bg-1);
  border-left: 1px solid var(--laouts-hairline);
  box-shadow: -32px 0 80px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: auto;
  background-image:
    radial-gradient(35% 30% at 100% 0%, rgba(200, 232, 123, 0.08), transparent 60%);
}
.laoutsMvz--open .laoutsMvz__panel {
  transform: translateX(0);
}

/* Header */
.laoutsMvz__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--laouts-hairline);
  flex-shrink: 0;
}
.laoutsMvz__headerLeft { display: flex; flex-direction: column; gap: 4px; }
.laoutsMvz__kicker {
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--laouts-acid);
}
.laoutsMvz__title {
  margin: 0;
  font-family: var(--laouts-font-serif);
  font-weight: 300;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--laouts-bone);
}
.laoutsMvz__close {
  font-family: var(--laouts-font-serif);
  font-size: 24px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--laouts-hairline-2);
  background: transparent;
  color: var(--laouts-bone-soft);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.laoutsMvz__close:hover {
  border-color: var(--laouts-acid);
  color: var(--laouts-acid);
}

/* Mode toggle */
.laoutsMvz__modeRow {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--laouts-hairline);
  flex-shrink: 0;
}
.laoutsMvz__modeLabel {
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--laouts-muted);
}
.laoutsMvz__modeToggle {
  display: inline-flex;
  background: var(--laouts-bg-2);
  border: 1px solid var(--laouts-hairline-2);
  border-radius: 999px;
  padding: 3px;
  width: fit-content;
}
.laoutsMvz__modeBtn {
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: none;
  background: transparent;
  color: var(--laouts-bone-soft);
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.laoutsMvz__modeBtn:hover { color: var(--laouts-bone); }
.laoutsMvz__modeBtn--active {
  background: var(--laouts-acid);
  color: #1a2008;
}
.laoutsMvz__modeBtn--active:hover { color: #1a2008; }
.laoutsMvz__modeMeta {
  grid-column: 1 / -1;
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  color: var(--laouts-muted);
  margin-top: -4px;
}
.laoutsMvz__modeStatus[data-kind="good"] {
  color: var(--laouts-acid);
}

/* Stats */
.laoutsMvz__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--laouts-hairline);
  flex-shrink: 0;
}
.laoutsMvz__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--laouts-bg-2);
  border: 1px solid var(--laouts-hairline);
  border-radius: 8px;
}
.laoutsMvz__statValue {
  font-family: var(--laouts-font-serif);
  font-weight: 400;
  font-size: 22px;
  color: var(--laouts-bone);
  line-height: 1;
}
.laoutsMvz__statLabel {
  font-family: var(--laouts-font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--laouts-muted);
}

/* Action row */
.laoutsMvz__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--laouts-hairline);
  flex-shrink: 0;
}
.laoutsMvz__action {
  position: relative;
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--laouts-bg-2);
  border: 1px solid var(--laouts-hairline-2);
  color: var(--laouts-bone-soft);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.laoutsMvz__action:hover {
  border-color: var(--laouts-acid);
  color: var(--laouts-acid);
}
.laoutsMvz__action--primary {
  background: var(--laouts-acid);
  border-color: var(--laouts-acid);
  color: #1a2008;
}
.laoutsMvz__action--primary:hover {
  background: var(--laouts-acid-soft);
  border-color: var(--laouts-acid-soft);
  color: #1a2008;
}
.laoutsMvz__action--danger:hover {
  border-color: var(--laouts-rose);
  color: var(--laouts-rose);
}
.laoutsMvz__action[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.laoutsMvz__actionPulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1a2008;
  display: inline-block;
}
.laoutsMvz__action--busy .laoutsMvz__actionPulse {
  animation: laoutsMvzPulse 0.7s ease-in-out infinite;
}

/* Live config block */
.laoutsMvz__configBlock {
  padding: 18px 24px;
  background: var(--laouts-bg-2);
  border-bottom: 1px solid var(--laouts-hairline);
  flex-shrink: 0;
}
.laoutsMvz__configTitle {
  margin: 0 0 12px;
  font-family: var(--laouts-font-serif);
  font-weight: 400;
  font-size: 16px;
  color: var(--laouts-bone);
}
.laoutsMvz__configRow {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.laoutsMvz__configLabel {
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--laouts-muted);
}
.laoutsMvz__configInput {
  font-family: var(--laouts-font-mono);
  font-size: 12px;
  background: var(--laouts-bg);
  color: var(--laouts-bone);
  border: 1px solid var(--laouts-hairline-2);
  border-radius: 6px;
  padding: 9px 11px;
  outline: none;
  transition: border-color 0.15s ease;
}
.laoutsMvz__configInput:focus {
  border-color: var(--laouts-acid);
}
.laoutsMvz__configActions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.laoutsMvz__configHint {
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--laouts-muted);
  line-height: 1.5;
}

/* List */
.laoutsMvz__listSection {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.laoutsMvz__listHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px 10px;
  flex-shrink: 0;
}
.laoutsMvz__listTitle {
  margin: 0;
  font-family: var(--laouts-font-serif);
  font-weight: 400;
  font-size: 16px;
  color: var(--laouts-bone);
}
.laoutsMvz__listFilter { display: inline-flex; gap: 4px; }
.laoutsMvz__filterBtn {
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid transparent;
  color: var(--laouts-muted);
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.laoutsMvz__filterBtn:hover { color: var(--laouts-bone); }
.laoutsMvz__filterBtn--active {
  color: var(--laouts-acid);
  border-color: var(--laouts-hairline-2);
}

.laoutsMvz__list {
  padding: 0 24px 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--laouts-hairline-2) transparent;
}
.laoutsMvz__list::-webkit-scrollbar { width: 8px; }
.laoutsMvz__list::-webkit-scrollbar-thumb {
  background: var(--laouts-hairline-2);
  border-radius: 999px;
}

.laoutsMvz__item {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  background: var(--laouts-bg-2);
  border: 1px solid var(--laouts-hairline);
  border-radius: 10px;
  padding: 8px;
  align-items: stretch;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.laoutsMvz__item:hover {
  border-color: var(--laouts-hairline-2);
  transform: translateY(-1px);
}
.laoutsMvz__item[data-quality="bad"]  { border-left: 3px solid var(--laouts-rose); }
.laoutsMvz__item[data-quality="ok"]   { border-left: 3px solid var(--laouts-gold); }
.laoutsMvz__item[data-quality="good"] { border-left: 3px solid var(--laouts-acid); }

.laoutsMvz__thumb {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 6px;
  background: var(--laouts-bg) center/cover no-repeat;
  border: 1px solid var(--laouts-hairline);
  overflow: hidden;
  flex-shrink: 0;
}
.laoutsMvz__swatch {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--laouts-bg-1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.laoutsMvz__faceBadge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-family: var(--laouts-font-mono);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(15, 13, 10, 0.82);
  color: var(--laouts-bone);
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid var(--laouts-hairline-2);
  white-space: nowrap;
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.laoutsMvz__itemBody {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  justify-content: center;
}
.laoutsMvz__itemRow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.laoutsMvz__itemRow--meta { color: var(--laouts-muted); }

.laoutsMvz__quality,
.laoutsMvz__aesthetic,
.laoutsMvz__aspect {
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--laouts-hairline-2);
  background: var(--laouts-bg);
  color: var(--laouts-bone-soft);
}
.laoutsMvz__quality--good { color: var(--laouts-acid); border-color: rgba(200, 232, 123, 0.32); }
.laoutsMvz__quality--ok   { color: var(--laouts-gold); border-color: rgba(212, 180, 103, 0.34); }
.laoutsMvz__quality--bad  { color: var(--laouts-rose); border-color: rgba(232, 154, 138, 0.34); }

.laoutsMvz__url {
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  color: var(--laouts-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.laoutsMvz__tagRow { display: flex; gap: 4px; flex-wrap: wrap; }
.laoutsMvz__tag {
  font-family: var(--laouts-font-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--laouts-muted);
  border: 1px solid var(--laouts-hairline);
  border-radius: 3px;
  padding: 2px 6px;
}

/* Empty state */
.laoutsMvz__emptyState {
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  color: var(--laouts-bone-soft);
}
.laoutsMvz__emptyGlyph {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%, rgba(200, 232, 123, 0.55), rgba(200, 232, 123, 0.05) 65%, transparent 75%);
  border: 1px solid var(--laouts-hairline-2);
  margin-bottom: 6px;
}
.laoutsMvz__emptyMsg {
  margin: 0;
  font-family: var(--laouts-font-serif);
  font-size: 16px;
  color: var(--laouts-bone);
}
.laoutsMvz__emptyHint {
  margin: 0;
  font-size: 12px;
  color: var(--laouts-muted);
  max-width: 24em;
  line-height: 1.55;
}
.laoutsMvz__emptyHint em {
  color: var(--laouts-acid);
  font-style: normal;
}

/* Toast */
.laoutsMvz__toast {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translate(-50%, 12px);
  font-family: var(--laouts-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  background: var(--laouts-bg);
  color: var(--laouts-bone);
  border: 1px solid var(--laouts-hairline-2);
  padding: 8px 14px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.laoutsMvz__toast--show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.laoutsMvz__toast[data-kind="good"] { border-color: var(--laouts-acid); color: var(--laouts-acid); }
.laoutsMvz__toast[data-kind="bad"]  { border-color: var(--laouts-rose); color: var(--laouts-rose); }

/* Hide brand topbar items that would crowd the panel on small viewports */
@media (max-width: 720px) {
  .laoutsMvz__panel {
    width: 100vw;
    border-left: none;
  }
  .laoutsMvz__stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .laoutsMvz__header {
    padding: 16px 18px 12px;
  }
  .laoutsMvz__modeRow,
  .laoutsMvz__actions,
  .laoutsMvz__listHeader,
  .laoutsMvz__list {
    padding-left: 18px;
    padding-right: 18px;
  }
  .laoutsMvz__title {
    font-size: 22px;
  }
}

@media print {
  .laoutsMvz { display: none !important; }
}

/* ──────────────────────── DETAIL OVERLAY ─────────────────────── */
/** Full-panel detail view — slides in from the right when an item
 *  is clicked. Sits on top of the existing panel content with a
 *  back button to return. */

.laoutsMvz__detail {
  position: absolute;
  inset: 0;
  background: var(--laouts-bg-1);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.30s cubic-bezier(0.22, 0.61, 0.36, 1);
  background-image:
    radial-gradient(40% 30% at 100% 0%, rgba(200, 232, 123, 0.10), transparent 60%);
}
.laoutsMvz__detail--open { transform: translateX(0); }

.laoutsMvz__detailHeader {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--laouts-hairline);
  flex-shrink: 0;
}
.laoutsMvz__detailBack {
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--laouts-hairline-2);
  color: var(--laouts-bone-soft);
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.laoutsMvz__detailBack:hover {
  border-color: var(--laouts-acid);
  color: var(--laouts-acid);
}
.laoutsMvz__detailKicker {
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--laouts-acid);
}

.laoutsMvz__detailBody {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--laouts-hairline-2) transparent;
}

/* Preview frame with SVG overlay */
.laoutsMvz__preview {
  position: relative;
  margin: 0;
  border: 1px solid var(--laouts-hairline-2);
  border-radius: 10px;
  background: var(--laouts-bg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.laoutsMvz__previewImg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.laoutsMvz__previewSvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.laoutsMvz__svgFace {
  fill: rgba(232, 154, 138, 0.10);
  stroke: var(--laouts-rose);
  stroke-width: 0.45;
  vector-effect: non-scaling-stroke;
}
.laoutsMvz__svgFaceLabel {
  font-family: var(--laouts-font-mono);
  font-size: 2.4px;
  fill: var(--laouts-rose);
  paint-order: stroke;
  stroke: rgba(15, 13, 10, 0.85);
  stroke-width: 0.6;
  font-weight: 500;
}
.laoutsMvz__svgSaliency {
  fill: rgba(212, 180, 103, 0.06);
  stroke: var(--laouts-gold);
  stroke-width: 0.4;
  stroke-dasharray: 1.6 1.2;
  vector-effect: non-scaling-stroke;
}
.laoutsMvz__svgSafe {
  fill: rgba(200, 232, 123, 0.06);
  stroke: var(--laouts-acid);
  stroke-width: 0.4;
  stroke-dasharray: 0.8 0.8;
  vector-effect: non-scaling-stroke;
}

.laoutsMvz__previewLegend {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  pointer-events: none;
}
.laoutsMvz__legendChip {
  font-family: var(--laouts-font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(15, 13, 10, 0.78);
  color: var(--laouts-bone);
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid var(--laouts-hairline-2);
}
.laoutsMvz__legendChip--face     { border-color: var(--laouts-rose); color: var(--laouts-rose); }
.laoutsMvz__legendChip--saliency { border-color: var(--laouts-gold); color: var(--laouts-gold); }
.laoutsMvz__legendChip--safe     { border-color: var(--laouts-acid); color: var(--laouts-acid); }

/* Metadata key/value grid */
.laoutsMvz__detailGrid {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--laouts-hairline);
  border-radius: 10px;
  overflow: hidden;
  background: var(--laouts-bg-2);
}
.laoutsMvz__dRow {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--laouts-hairline);
  align-items: center;
  font-size: 12.5px;
}
.laoutsMvz__dRow:last-child { border-bottom: none; }
.laoutsMvz__dRow dt {
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laouts-muted);
  margin: 0;
}
.laoutsMvz__dRow dd {
  margin: 0;
  font-family: var(--laouts-font-sans);
  color: var(--laouts-bone);
  word-break: break-word;
}
.laoutsMvz__dColor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--laouts-font-mono);
  font-size: 11.5px;
}
.laoutsMvz__dSwatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid var(--laouts-hairline-2);
}

/* Raw JSON dropdown */
.laoutsMvz__rawWrap {
  border: 1px solid var(--laouts-hairline);
  border-radius: 10px;
  background: var(--laouts-bg-2);
  overflow: hidden;
}
.laoutsMvz__rawWrap summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laouts-bone-soft);
  position: relative;
}
.laoutsMvz__rawWrap summary::-webkit-details-marker { display: none; }
.laoutsMvz__rawWrap summary::after {
  content: "+";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--laouts-acid);
  font-family: var(--laouts-font-serif);
  font-size: 14px;
}
.laoutsMvz__rawWrap[open] summary::after { content: "−"; }
.laoutsMvz__raw {
  margin: 0;
  padding: 14px;
  font-family: var(--laouts-font-mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--laouts-bone);
  background: var(--laouts-bg);
  border-top: 1px solid var(--laouts-hairline);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 280px;
  overflow-y: auto;
}

.laoutsMvz__detailActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* keyboard focus on items */
.laoutsMvz__item:focus-visible {
  outline: 2px solid var(--laouts-acid);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════ */
/*  ENGINE · SIGNATURE LOOK STRIP                                     */
/*                                                                    */
/*  Sub-bar pinned beneath the brand topbar that surfaces the active  */
/*  signature look. Built by laouts-engine-style-strip.js. Pure       */
/*  overlay — never touches engine logic.                             */
/* ══════════════════════════════════════════════════════════════════ */

body.laouts {
  --laouts-look-strip-h: 38px;
}

.laoutsLookStrip {
  position: fixed;
  top: var(--laouts-topbar-h);
  left: 0;
  right: 0;
  z-index: 8990;
  background:
    linear-gradient(rgba(15, 13, 10, 0.92), rgba(15, 13, 10, 0.92)),
    linear-gradient(90deg, rgba(200, 232, 123, 0.04), rgba(200, 232, 123, 0));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--laouts-hairline);
  height: var(--laouts-look-strip-h);
  display: flex;
  align-items: center;
  font-family: var(--laouts-font-sans);
  color: var(--laouts-bone);
  user-select: none;
  -webkit-user-select: none;
}

/** Push body content down only when the strip is active. */
body.laouts.laouts--lookStripActive {
  padding-top: calc(var(--laouts-topbar-h) + var(--laouts-look-strip-h));
}

/** Hide the strip when the order modal opens (same logic as topbar). */
body.laouts:has(#cepOrderExperience:not([hidden])) .laoutsLookStrip {
  display: none;
}
body.laouts:has(#cepOrderExperience:not([hidden])).laouts--lookStripActive {
  padding-top: 0;
}

.laoutsLookStrip__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.laoutsLookStrip__inner::-webkit-scrollbar { display: none; }

.laoutsLookStrip__lab {
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--laouts-acid);
  flex-shrink: 0;
}

.laoutsLookStrip__empty {
  font-size: 12px;
  color: var(--laouts-bone-soft);
  flex-shrink: 0;
}

.laoutsLookStrip__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laouts-acid);
  text-decoration: none;
  padding: 5px 12px;
  border: 1px solid rgba(200, 232, 123, 0.32);
  border-radius: 999px;
  transition: background 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}
.laoutsLookStrip__cta:hover {
  background: rgba(200, 232, 123, 0.08);
  border-color: var(--laouts-acid);
}

.laoutsLookStrip__ghost {
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  color: var(--laouts-bone-soft);
  text-decoration: none;
  flex-shrink: 0;
  transition: color 0.15s ease;
}
.laoutsLookStrip__ghost:hover {
  color: var(--laouts-acid);
}

.laoutsLookStrip__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--laouts-font-sans);
  font-size: 11.5px;
  color: var(--laouts-bone);
  background: var(--laouts-bg-2);
  border: 1px solid var(--laouts-hairline-2);
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  flex-shrink: 0;
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.laoutsLookStrip__chip em {
  font-family: var(--laouts-font-mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--laouts-muted);
  margin-right: 2px;
}
.laoutsLookStrip__chip--mood    em { color: var(--laouts-acid); }
.laoutsLookStrip__chip--prompt {
  font-style: italic;
  font-family: var(--laouts-font-serif);
  font-size: 12.5px;
  font-weight: 300;
}

.laoutsLookStrip__swatchRow {
  display: inline-flex;
  gap: 2px;
  margin-right: 4px;
  vertical-align: middle;
}
.laoutsLookStrip__swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  border: 1px solid var(--laouts-hairline-2);
  display: inline-block;
}

.laoutsLookStrip__source {
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--laouts-muted);
  margin-left: -4px;
  flex-shrink: 0;
}

.laoutsLookStrip__actions {
  margin-left: auto;
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
  padding-left: 14px;
  border-left: 1px solid var(--laouts-hairline);
}

.laoutsLookStrip__action {
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--laouts-bone-soft);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.laoutsLookStrip__action:hover {
  color: var(--laouts-acid);
  border-color: var(--laouts-hairline-2);
}

/* Toast */
.laoutsLookStrip__toast {
  position: fixed;
  top: calc(var(--laouts-topbar-h) + var(--laouts-look-strip-h) + 16px);
  left: 50%;
  transform: translate(-50%, -8px);
  background: var(--laouts-bg-1);
  border: 1px solid var(--laouts-hairline-2);
  color: var(--laouts-bone);
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--laouts-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  z-index: 9100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}
.laoutsLookStrip__toast--show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.laoutsLookStrip__toast[data-kind="good"] {
  border-color: var(--laouts-acid);
  color: var(--laouts-acid);
}

/* Responsive */
@media (max-width: 720px) {
  body.laouts {
    --laouts-look-strip-h: 44px;
  }
  .laoutsLookStrip__inner { gap: 10px; padding: 0 14px; }
  .laoutsLookStrip__chip { max-width: 18ch; font-size: 11px; }
  .laoutsLookStrip__source { display: none; }
  .laoutsLookStrip__actions { padding-left: 8px; }
  .laoutsLookStrip__action { padding: 4px 8px; font-size: 9px; }
}

@media print {
  .laoutsLookStrip,
  .laoutsLookStrip__toast { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════ */
/*  ENGINE · PULSE WIDGET                                             */
/*                                                                    */
/*  Floating bottom-left telemetry panel built by                     */
/*  laouts-engine-pulse.js. Pure read-only overlay.                   */
/* ══════════════════════════════════════════════════════════════════ */

.laoutsPulse {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 8800;
  width: 280px;
  background: rgba(15, 13, 10, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--laouts-hairline-2);
  border-radius: 14px;
  font-family: var(--laouts-font-sans);
  color: var(--laouts-bone);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.laoutsPulse--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

.laoutsPulse--dragging {
  cursor: grabbing;
  transition: none;
  opacity: 0.96;
}

.laoutsPulse__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--laouts-hairline);
  cursor: grab;
}
.laoutsPulse--dragging .laoutsPulse__head { cursor: grabbing; }

.laoutsPulse__head:focus-visible {
  outline: 2px solid var(--laouts-acid);
  outline-offset: 2px;
}

.laoutsPulse__pulseDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--laouts-acid);
  box-shadow: 0 0 8px var(--laouts-acid-glow);
  flex-shrink: 0;
  position: relative;
}
.laoutsPulse__pulseDot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--laouts-acid);
  opacity: 0;
  pointer-events: none;
}
.laoutsPulse__pulseDot--flash::after {
  animation: laoutsPulseRipple 0.8s ease-out;
}
@keyframes laoutsPulseRipple {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.6); opacity: 0; }
}

.laoutsPulse__title {
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--laouts-bone);
  flex: 1;
  min-width: 0;
}

.laoutsPulse__uptime {
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--laouts-muted);
  flex-shrink: 0;
}

.laoutsPulse__collapse {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--laouts-hairline-2);
  background: transparent;
  color: var(--laouts-bone-soft);
  font-family: var(--laouts-font-serif);
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
  padding: 0;
}
.laoutsPulse__collapse:hover {
  border-color: var(--laouts-acid);
  color: var(--laouts-acid);
}
.laoutsPulse--collapsed .laoutsPulse__collapse span::before { content: "+"; }
.laoutsPulse--collapsed .laoutsPulse__collapse span { font-size: 0; }
.laoutsPulse--collapsed .laoutsPulse__collapse span::before { font-size: 16px; }

.laoutsPulse__body,
.laoutsPulse__hint {
  transition: max-height 0.22s ease, opacity 0.22s ease, padding 0.22s ease;
  overflow: hidden;
}
.laoutsPulse--collapsed .laoutsPulse__body,
.laoutsPulse--collapsed .laoutsPulse__hint {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border: none;
}

.laoutsPulse__projectRow {
  padding: 10px 14px;
  border-bottom: 1px solid var(--laouts-hairline);
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: linear-gradient(180deg, rgba(200, 232, 123, 0.04), transparent);
}
.laoutsPulse--collapsed .laoutsPulse__projectRow { display: none; }
.laoutsPulse__projectLab {
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--laouts-acid);
}
.laoutsPulse__projectName {
  font-family: var(--laouts-font-serif);
  font-weight: 400;
  font-size: 14.5px;
  color: var(--laouts-bone);
  line-height: 1.25;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.laoutsPulse__body {
  max-height: 600px;
  padding: 12px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.laoutsPulse__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: 12px;
}

.laoutsPulse__rowLab {
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--laouts-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.laoutsPulse__rowVal {
  font-family: var(--laouts-font-sans);
  color: var(--laouts-bone);
  font-size: 12.5px;
  text-align: right;
  letter-spacing: 0.01em;
}

.laoutsPulse__rowVal[data-mode="live"]  { color: var(--laouts-acid); }
.laoutsPulse__rowVal[data-mode="mock"]  { color: var(--laouts-bone-soft); }
.laoutsPulse__rowVal[data-mode="off"]   { color: var(--laouts-muted); }

.laoutsPulse__divider {
  height: 1px;
  background: var(--laouts-hairline);
  margin: 6px 0;
}

/* Vision dot — quietly pulses to indicate the integration is alive */
.laoutsPulse__mvzDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--laouts-acid-soft);
  animation: laoutsPulseMvzBeat 2.4s ease-in-out infinite;
}
@keyframes laoutsPulseMvzBeat {
  0%, 100% { opacity: 0.4; transform: scale(1);   }
  50%      { opacity: 1.0; transform: scale(1.3); }
}

/* Look row */
.laoutsPulse__lookRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  gap: 10px;
}
.laoutsPulse__lookVal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: 11.5px;
}
.laoutsPulse__lookMood {
  font-family: var(--laouts-font-serif);
  font-size: 14px;
  font-weight: 300;
  font-style: italic;
  color: var(--laouts-acid);
}
.laoutsPulse__lookPalette {
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--laouts-bone-soft);
  border: 1px solid var(--laouts-hairline-2);
  padding: 2px 6px;
  border-radius: 999px;
}
.laoutsPulse__lookVal--empty {
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--laouts-muted);
  font-style: italic;
}

/* Activity row */
.laoutsPulse__activity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 2px;
}
.laoutsPulse__activityVal {
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  color: var(--laouts-bone-soft);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.laoutsPulse__hint {
  padding: 8px 14px 12px;
  border-top: 1px solid var(--laouts-hairline);
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--laouts-muted);
  text-align: center;
}
.laoutsPulse__hint kbd {
  background: var(--laouts-bg-2);
  border: 1px solid var(--laouts-hairline-2);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  color: var(--laouts-bone);
  margin: 0 2px;
}

/* Hide pulse when export modal opens */
body.laouts:has(#cepOrderExperience:not([hidden])) .laoutsPulse {
  display: none;
}

/* Responsive — phones */
@media (max-width: 720px) {
  .laoutsPulse {
    width: calc(100vw - 24px);
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
}

@media print {
  .laoutsPulse { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════ */
/*  ENGINE · WELCOME OVERLAY                                          */
/*                                                                    */
/*  Gated first-visit modal built by laouts-engine-welcome.js.        */
/*  Three paths in (Upload / Inspiration / Cleanse) plus a skip.      */
/* ══════════════════════════════════════════════════════════════════ */

.laoutsWelcome {
  position: fixed;
  inset: 0;
  z-index: 9700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: var(--laouts-font-sans);
  color: var(--laouts-bone);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.laoutsWelcome--open {
  opacity: 1;
  pointer-events: auto;
}

.laoutsWelcome__scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 13, 10, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.laoutsWelcome__card {
  position: relative;
  z-index: 1;
  width: min(820px, 100%);
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  overflow-y: auto;
  background:
    radial-gradient(45% 30% at 100% 0%, rgba(200, 232, 123, 0.10), transparent 60%),
    var(--laouts-bg-1);
  border: 1px solid var(--laouts-hairline-2);
  border-radius: 22px;
  padding: 44px 48px 36px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.laoutsWelcome--open .laoutsWelcome__card {
  transform: translateY(0) scale(1);
}

.laoutsWelcome__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--laouts-hairline-2);
  background: transparent;
  color: var(--laouts-bone-soft);
  font-family: var(--laouts-font-serif);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.laoutsWelcome__close:hover {
  border-color: var(--laouts-acid);
  color: var(--laouts-acid);
}

.laoutsWelcome__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--laouts-acid);
  margin-bottom: 18px;
}
.laoutsWelcome__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--laouts-acid);
  box-shadow: 0 0 8px var(--laouts-acid-glow);
  animation: laoutsPulseRipple 2.6s ease-out infinite;
}

.laoutsWelcome__title {
  font-family: var(--laouts-font-serif);
  font-weight: 300;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--laouts-bone);
  margin-bottom: 12px;
}
.laoutsWelcome__title em {
  font-style: italic;
  color: var(--laouts-acid);
}

.laoutsWelcome__lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--laouts-bone-soft);
  max-width: 60ch;
  margin-bottom: 28px;
}

.laoutsWelcome__paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}

.laoutsWelcome__path {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 22px 26px;
  background: var(--laouts-bg-2);
  border: 1px solid var(--laouts-hairline);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, transform 0.15s ease, background 0.18s ease;
  overflow: hidden;
}
.laoutsWelcome__path::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(200, 232, 123, 0.08), rgba(200, 232, 123, 0));
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.laoutsWelcome__path:hover {
  border-color: var(--laouts-acid);
  transform: translateY(-3px);
}
.laoutsWelcome__path:hover::before {
  opacity: 1;
}
.laoutsWelcome__path:focus-visible {
  outline: 2px solid var(--laouts-acid);
  outline-offset: 2px;
}

.laoutsWelcome__pathNum {
  position: relative;
  z-index: 1;
  font-family: var(--laouts-font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--laouts-acid);
}

.laoutsWelcome__pathTitle {
  position: relative;
  z-index: 1;
  font-family: var(--laouts-font-serif);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.25;
  color: var(--laouts-bone);
  letter-spacing: -0.005em;
}
.laoutsWelcome__pathTitle em {
  font-style: italic;
  color: var(--laouts-acid);
}

.laoutsWelcome__pathBody {
  position: relative;
  z-index: 1;
  font-size: 13px;
  line-height: 1.55;
  color: var(--laouts-bone-soft);
  flex: 1;
}

.laoutsWelcome__pathArrow {
  position: absolute;
  bottom: 14px;
  right: 18px;
  font-family: var(--laouts-font-serif);
  font-size: 22px;
  line-height: 1;
  color: var(--laouts-bone-soft);
  transition: color 0.18s ease, transform 0.18s ease;
}
.laoutsWelcome__path:hover .laoutsWelcome__pathArrow {
  color: var(--laouts-acid);
  transform: translateX(4px);
}

.laoutsWelcome__sub {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--laouts-hairline);
  font-family: var(--laouts-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--laouts-muted);
}
.laoutsWelcome__quiet {
  color: var(--laouts-bone-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}
.laoutsWelcome__quiet:hover {
  color: var(--laouts-acid);
}
.laoutsWelcome__bullet { color: var(--laouts-subtle); }
.laoutsWelcome__skip {
  font-family: var(--laouts-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  background: transparent;
  border: none;
  color: var(--laouts-bone-soft);
  cursor: pointer;
  margin-left: auto;
  padding: 0;
  transition: color 0.15s ease;
}
.laoutsWelcome__skip:hover {
  color: var(--laouts-acid);
}

/* Hide pulse + look strip while welcome is open so the focus is the choice */
body.laouts.laouts--welcomeOpen .laoutsPulse,
body.laouts.laouts--welcomeOpen .laoutsLookStrip {
  opacity: 0.35;
  pointer-events: none;
}

@media (max-width: 720px) {
  .laoutsWelcome__card { padding: 32px 22px 24px; border-radius: 18px; }
  .laoutsWelcome__paths { gap: 10px; }
  .laoutsWelcome__path { padding: 18px 18px 30px; }
  .laoutsWelcome__sub { flex-wrap: wrap; }
  .laoutsWelcome__skip { margin-left: 0; }
}

@media print {
  .laoutsWelcome { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════ */
/*  ENGINE · KEYBOARD SHORTCUTS CHEATSHEET                            */
/*                                                                    */
/*  Press-? overlay built by laouts-engine-shortcuts.js. Pure docs;   */
/*  doesn't intercept actual engine shortcuts.                        */
/* ══════════════════════════════════════════════════════════════════ */

.laoutsShortcuts {
  position: fixed;
  inset: 0;
  z-index: 9650;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: var(--laouts-font-sans);
  color: var(--laouts-bone);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.laoutsShortcuts--open {
  opacity: 1;
  pointer-events: auto;
}

.laoutsShortcuts__scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 13, 10, 0.74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.laoutsShortcuts__card {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(35% 30% at 100% 0%, rgba(200, 232, 123, 0.10), transparent 60%),
    var(--laouts-bg-1);
  border: 1px solid var(--laouts-hairline-2);
  border-radius: 18px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.laoutsShortcuts--open .laoutsShortcuts__card {
  transform: translateY(0) scale(1);
}

.laoutsShortcuts__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 32px 18px;
  border-bottom: 1px solid var(--laouts-hairline);
  flex-shrink: 0;
}
.laoutsShortcuts__kicker {
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--laouts-acid);
  margin-bottom: 8px;
}
.laoutsShortcuts__title {
  font-family: var(--laouts-font-serif);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--laouts-bone);
  margin: 0;
}

.laoutsShortcuts__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--laouts-hairline-2);
  background: transparent;
  color: var(--laouts-bone-soft);
  font-family: var(--laouts-font-serif);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.laoutsShortcuts__close:hover {
  border-color: var(--laouts-acid);
  color: var(--laouts-acid);
}

.laoutsShortcuts__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px 32px 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px 36px;
  scrollbar-width: thin;
  scrollbar-color: var(--laouts-hairline-2) transparent;
}
.laoutsShortcuts__body::-webkit-scrollbar { width: 8px; }
.laoutsShortcuts__body::-webkit-scrollbar-thumb {
  background: var(--laouts-hairline-2);
  border-radius: 999px;
}

.laoutsShortcuts__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.laoutsShortcuts__groupKicker {
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--laouts-acid);
}
.laoutsShortcuts__groupTitle {
  font-family: var(--laouts-font-serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.25;
  color: var(--laouts-bone);
  margin: 0 0 6px;
}

.laoutsShortcuts__rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.laoutsShortcuts__row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--laouts-hairline);
  font-size: 12.5px;
}
.laoutsShortcuts__row:last-child { border-bottom: none; }

.laoutsShortcuts__keys {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.laoutsShortcuts__keys kbd {
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  background: var(--laouts-bg-2);
  border: 1px solid var(--laouts-hairline-2);
  color: var(--laouts-bone);
  padding: 3px 9px;
  border-radius: 5px;
  box-shadow: 0 1.5px 0 var(--laouts-hairline);
  min-width: 22px;
  text-align: center;
  display: inline-block;
}

.laoutsShortcuts__plus {
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  color: var(--laouts-muted);
  margin: 0 1px;
}
.laoutsShortcuts__or {
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--laouts-muted);
  margin: 0 4px;
}

.laoutsShortcuts__label {
  color: var(--laouts-bone-soft);
  font-size: 12.5px;
  line-height: 1.4;
}

.laoutsShortcuts__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 32px;
  border-top: 1px solid var(--laouts-hairline);
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  color: var(--laouts-muted);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.laoutsShortcuts__foot kbd {
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  background: var(--laouts-bg-2);
  border: 1px solid var(--laouts-hairline-2);
  color: var(--laouts-bone);
  padding: 1px 6px;
  border-radius: 4px;
  margin: 0 2px;
}
.laoutsShortcuts__footRight em {
  color: var(--laouts-acid);
  font-style: normal;
}

/* Topbar "Shortcuts ?" button */
.laoutsBrandTopbar__kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--laouts-hairline-2);
  border-radius: 4px;
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  color: var(--laouts-bone);
  background: var(--laouts-bg-2);
  line-height: 1;
}

/* Hide pulse + look-strip while shortcuts overlay is open so the focus is the docs */
body.laouts.laouts--shortcutsOpen .laoutsPulse,
body.laouts.laouts--shortcutsOpen .laoutsLookStrip {
  opacity: 0.35;
  pointer-events: none;
}

@media (max-width: 720px) {
  .laoutsShortcuts__head { padding: 20px 22px 14px; }
  .laoutsShortcuts__body { padding: 18px 22px 22px; gap: 20px; }
  .laoutsShortcuts__row {
    grid-template-columns: 110px 1fr;
    gap: 10px;
    font-size: 12px;
  }
  .laoutsShortcuts__title { font-size: 22px; }
  .laoutsShortcuts__foot { padding: 12px 22px; font-size: 9.5px; }
}

@media print {
  .laoutsShortcuts { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════ */
/*  ENGINE · SHELL · STEPPER + TOOL RAIL                              */
/*                                                                    */
/*  Structural surfaces from LAOUTS_IMPLEMENTATION_HANDOFF.md         */
/*  Screen 6 — Design Editor, rendered in dark matcha (not balayage). */
/*  Pure overlay; never resizes or pushes the engine canvas.          */
/* ══════════════════════════════════════════════════════════════════ */

/* ─────── PAGE STEPPER ────────────────────────────────────────────── */

body.laouts {
  --laouts-stepper-h: 48px;
}

.laoutsStepper {
  position: fixed;
  left: 0;
  right: 0;
  /** Sits below the brand topbar; the look strip floats below this. */
  top: var(--laouts-topbar-h);
  z-index: 8985;
  height: var(--laouts-stepper-h);
  background: rgba(15, 13, 10, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--laouts-hairline);
  display: flex;
  align-items: center;
  padding: 0 24px;
  font-family: var(--laouts-font-sans);
  user-select: none;
  -webkit-user-select: none;
}

/** Body padding adjusts whether or not the look strip is also visible. */
body.laouts {
  padding-top: calc(var(--laouts-topbar-h) + var(--laouts-stepper-h));
}
body.laouts.laouts--lookStripActive {
  padding-top: calc(var(--laouts-topbar-h) + var(--laouts-stepper-h) + var(--laouts-look-strip-h));
}
body.laouts.laouts--lookStripActive .laoutsLookStrip {
  top: calc(var(--laouts-topbar-h) + var(--laouts-stepper-h));
}

/** Hide stepper while the order modal is open. */
body.laouts:has(#cepOrderExperience:not([hidden])) .laoutsStepper {
  display: none;
}
body.laouts:has(#cepOrderExperience:not([hidden])) {
  padding-top: 0;
}

.laoutsStepper__inner {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.laoutsStepper__inner::-webkit-scrollbar { display: none; }

.laoutsStepper__step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  color: var(--laouts-bone-soft);
  padding: 6px 4px;
  transition: color 0.15s ease;
}
a.laoutsStepper__step:hover { color: var(--laouts-acid); }

.laoutsStepper__num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--laouts-hairline-2);
  color: var(--laouts-muted);
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.laoutsStepper__step--active .laoutsStepper__num {
  background: var(--laouts-acid);
  border-color: var(--laouts-acid);
  color: var(--laouts-bg);
  box-shadow: 0 0 0 4px rgba(200, 232, 123, 0.12);
}
.laoutsStepper__step--done .laoutsStepper__num {
  background: var(--laouts-bg-2);
  border-color: var(--laouts-acid-soft);
  color: var(--laouts-acid);
}
.laoutsStepper__check { font-size: 11px; }

.laoutsStepper__label {
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: inherit;
}
.laoutsStepper__step--active .laoutsStepper__label {
  color: var(--laouts-bone);
}

.laoutsStepper__connector {
  width: 26px;
  height: 1px;
  background: var(--laouts-hairline-2);
  margin: 0 12px;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  body.laouts {
    --laouts-stepper-h: 44px;
  }
  .laoutsStepper { padding: 0 14px; }
  .laoutsStepper__connector { width: 14px; margin: 0 6px; }
  .laoutsStepper__label { font-size: 9.5px; letter-spacing: 0.12em; }
}

@media print {
  .laoutsStepper { display: none !important; }
}

/* ─────── TOOL RAIL ──────────────────────────────────────────────── */

body.laouts {
  --laouts-tool-rail-w: 16px;
  --laouts-tool-rail-w-open: 88px;
}

.laoutsToolRail {
  position: fixed;
  /** Pinned below the topbar + stepper, sitting on the left edge. */
  top: calc(var(--laouts-topbar-h) + var(--laouts-stepper-h));
  bottom: 0;
  left: 0;
  z-index: 8970;
  width: var(--laouts-tool-rail-w);
  background: linear-gradient(90deg, rgba(15, 13, 10, 0.92), rgba(15, 13, 10, 0.62));
  border-right: 1px solid var(--laouts-hairline);
  display: flex;
  flex-direction: column;
  transition: width 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.22s ease;
  overflow: hidden;
  font-family: var(--laouts-font-sans);
}
body.laouts.laouts--lookStripActive .laoutsToolRail {
  top: calc(var(--laouts-topbar-h) + var(--laouts-stepper-h) + var(--laouts-look-strip-h));
}

/** Expand on hover, focus-within, or pinned. */
.laoutsToolRail:hover,
.laoutsToolRail:focus-within,
.laoutsToolRail--pinned {
  width: var(--laouts-tool-rail-w-open);
  background: rgba(15, 13, 10, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/** Edge teaser dots when collapsed, hint that it's interactive */
.laoutsToolRail::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 80px;
  background: repeating-linear-gradient(
    to bottom,
    var(--laouts-hairline-2) 0 4px,
    transparent 4px 8px
  );
  opacity: 1;
  transition: opacity 0.18s ease;
}
.laoutsToolRail:hover::before,
.laoutsToolRail:focus-within::before,
.laoutsToolRail--pinned::before {
  opacity: 0;
}

.laoutsToolRail__list {
  list-style: none;
  margin: 0;
  padding: 16px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  flex: 1 1 auto;
  scrollbar-width: thin;
  scrollbar-color: var(--laouts-hairline-2) transparent;
}
.laoutsToolRail__list::-webkit-scrollbar { width: 6px; }
.laoutsToolRail__list::-webkit-scrollbar-thumb {
  background: var(--laouts-hairline-2);
  border-radius: 999px;
}

.laoutsToolRail__item { margin: 0; padding: 0; }

.laoutsToolRail__btn {
  width: 100%;
  height: 60px;
  display: grid;
  grid-template-columns: 22px 26px 1fr;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  cursor: pointer;
  color: var(--laouts-bone-soft);
  font-family: inherit;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.laoutsToolRail__btn:hover {
  background: rgba(200, 232, 123, 0.05);
  color: var(--laouts-bone);
}
.laoutsToolRail__btn--active {
  background: rgba(200, 232, 123, 0.10);
  color: var(--laouts-acid);
  border-left-color: var(--laouts-acid);
}
.laoutsToolRail__btn:focus-visible {
  outline: 2px solid var(--laouts-acid);
  outline-offset: -2px;
}

.laoutsToolRail__num {
  font-family: var(--laouts-font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--laouts-muted);
  text-align: center;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.laoutsToolRail__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.laoutsToolRail__glyph svg {
  width: 22px;
  height: 22px;
}

.laoutsToolRail__label {
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.laoutsToolRail:hover .laoutsToolRail__num,
.laoutsToolRail:focus-within .laoutsToolRail__num,
.laoutsToolRail--pinned .laoutsToolRail__num,
.laoutsToolRail:hover .laoutsToolRail__label,
.laoutsToolRail:focus-within .laoutsToolRail__label,
.laoutsToolRail--pinned .laoutsToolRail__label {
  opacity: 1;
  transform: translateX(0);
}

.laoutsToolRail__foot {
  border-top: 1px solid var(--laouts-hairline);
  padding: 10px;
  display: flex;
  justify-content: center;
}
.laoutsToolRail__pin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--laouts-hairline-2);
  color: var(--laouts-bone-soft);
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  width: 100%;
  justify-content: center;
}
.laoutsToolRail__pin:hover {
  border-color: var(--laouts-acid);
  color: var(--laouts-acid);
}
.laoutsToolRail__pinLabel {
  opacity: 0;
  transition: opacity 0.18s ease;
}
.laoutsToolRail:hover .laoutsToolRail__pinLabel,
.laoutsToolRail:focus-within .laoutsToolRail__pinLabel,
.laoutsToolRail--pinned .laoutsToolRail__pinLabel {
  opacity: 1;
}
.laoutsToolRail--pinned .laoutsToolRail__pin {
  border-color: var(--laouts-acid);
  color: var(--laouts-acid);
}

/* Flyout — appears next to a hovered/focused tool button */
.laoutsToolFlyout {
  position: fixed;
  z-index: 8980;
  background: var(--laouts-bg-1);
  border: 1px solid var(--laouts-hairline-2);
  border-radius: 10px;
  padding: 12px 14px;
  width: 240px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  font-family: var(--laouts-font-sans);
  color: var(--laouts-bone);
  transform: translate(0, -50%) translateX(-4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.laoutsToolFlyout--open {
  opacity: 1;
  transform: translate(0, -50%);
}
.laoutsToolFlyout__title {
  font-family: var(--laouts-font-serif);
  font-weight: 400;
  font-size: 16px;
  color: var(--laouts-bone);
  margin-bottom: 4px;
}
.laoutsToolFlyout__hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--laouts-bone-soft);
  margin-bottom: 10px;
}
.laoutsToolFlyout__kbd {
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--laouts-muted);
}
.laoutsToolFlyout__kbd kbd {
  background: var(--laouts-bg-2);
  border: 1px solid var(--laouts-hairline-2);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--laouts-bone);
  margin: 0 2px;
}

/* Hide flyout while shortcuts/welcome overlays are open */
body.laouts.laouts--shortcutsOpen .laoutsToolFlyout,
body.laouts.laouts--welcomeOpen   .laoutsToolFlyout { display: none; }

/* Hide the rail while the order modal is open */
body.laouts:has(#cepOrderExperience:not([hidden])) .laoutsToolRail,
body.laouts:has(#cepOrderExperience:not([hidden])) .laoutsToolFlyout { display: none; }

@media (max-width: 720px) {
  /** On phones, the rail sits at the bottom as a horizontal bar. */
  .laoutsToolRail {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 56px;
    flex-direction: row;
    border-right: none;
    border-top: 1px solid var(--laouts-hairline);
    background: rgba(15, 13, 10, 0.94);
  }
  .laoutsToolRail::before { display: none; }
  .laoutsToolRail__list {
    flex-direction: row;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .laoutsToolRail__btn {
    height: 56px;
    width: 56px;
    grid-template-columns: 1fr;
    grid-template-rows: 26px 1fr;
    padding: 6px 0 4px;
    border-left: none;
    border-top: 2px solid transparent;
    text-align: center;
    gap: 0;
  }
  .laoutsToolRail__btn--active {
    border-top-color: var(--laouts-acid);
    border-left-color: transparent;
  }
  .laoutsToolRail__num { display: none; }
  .laoutsToolRail__label {
    opacity: 1;
    transform: none;
    font-size: 8.5px;
    letter-spacing: 0.06em;
  }
  .laoutsToolRail__foot { display: none; }
  .laoutsToolFlyout { display: none; }
  body.laouts {
    --laouts-tool-rail-w: 0px;
    --laouts-tool-rail-w-open: 0px;
  }
}

/* ══════════════════════════════════════════════════════════════════ */
/*  ENGINE · AI STUDIO PANEL                                          */
/*                                                                    */
/*  Slide-in right panel from LAOUTS_IMPLEMENTATION_HANDOFF.md        */
/*  Screen 6 — AI Design Assistant card, in dark matcha.              */
/*  Triggered by tool 5 in the tool rail or pressing "5".             */
/* ══════════════════════════════════════════════════════════════════ */

.laoutsAIStudio {
  position: fixed;
  inset: 0;
  z-index: 9300;
  pointer-events: none;
  font-family: var(--laouts-font-sans);
  color: var(--laouts-bone);
}

.laoutsAIStudio__scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 13, 10, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}
.laoutsAIStudio--open .laoutsAIStudio__scrim {
  opacity: 1;
  pointer-events: auto;
}

.laoutsAIStudio__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 92vw);
  background: var(--laouts-bg-1);
  border-left: 1px solid var(--laouts-hairline);
  box-shadow: -32px 0 80px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: auto;
  background-image:
    radial-gradient(35% 30% at 100% 0%, rgba(200, 232, 123, 0.10), transparent 60%);
}
.laoutsAIStudio--open .laoutsAIStudio__panel {
  transform: translateX(0);
}

/* Header */
.laoutsAIStudio__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--laouts-hairline);
  flex-shrink: 0;
}
.laoutsAIStudio__kicker {
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--laouts-acid);
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.laoutsAIStudio__sparkle {
  color: var(--laouts-acid);
  font-size: 14px;
  animation: laoutsPulseRipple 3.2s ease-in-out infinite;
}
.laoutsAIStudio__title {
  font-family: var(--laouts-font-serif);
  font-weight: 300;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--laouts-bone);
  margin: 0;
}

.laoutsAIStudio__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--laouts-hairline-2);
  background: transparent;
  color: var(--laouts-bone-soft);
  font-family: var(--laouts-font-serif);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.laoutsAIStudio__close:hover {
  border-color: var(--laouts-acid);
  color: var(--laouts-acid);
}

/* Stat row */
.laoutsAIStudio__statRow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--laouts-hairline);
  flex-shrink: 0;
}
.laoutsAIStudio__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--laouts-bg-2);
  border: 1px solid var(--laouts-hairline);
  border-radius: 8px;
}
.laoutsAIStudio__statVal {
  font-family: var(--laouts-font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--laouts-bone);
  line-height: 1;
}
.laoutsAIStudio__statLab {
  font-family: var(--laouts-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laouts-muted);
}

/* Sections */
.laoutsAIStudio__section {
  padding: 20px 24px;
  border-bottom: 1px solid var(--laouts-hairline);
}
.laoutsAIStudio__section:last-of-type { border-bottom: none; }

.laoutsAIStudio__sectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}
.laoutsAIStudio__sectionTitle {
  font-family: var(--laouts-font-serif);
  font-weight: 400;
  font-size: 16px;
  color: var(--laouts-bone);
  margin: 0;
  letter-spacing: -0.005em;
}
.laoutsAIStudio__sectionHint {
  font-size: 12px;
  color: var(--laouts-muted);
  font-style: italic;
  text-align: right;
  flex: 1;
  min-width: 0;
}

/* Style chips */
.laoutsAIStudio__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.laoutsAIStudio__chip {
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--laouts-bg-2);
  border: 1px solid var(--laouts-hairline-2);
  color: var(--laouts-bone-soft);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.laoutsAIStudio__chip:hover {
  color: var(--laouts-bone);
  border-color: var(--laouts-bone-soft);
}
.laoutsAIStudio__chip--active {
  background: var(--laouts-acid);
  border-color: var(--laouts-acid);
  color: var(--laouts-bg);
}
.laoutsAIStudio__chip--active:hover { color: var(--laouts-bg); }

/* Product card */
.laoutsAIStudio__product {
  padding: 14px 16px;
  background: var(--laouts-bg-2);
  border: 1px solid var(--laouts-hairline);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.laoutsAIStudio__productKicker {
  font-family: var(--laouts-font-serif);
  font-weight: 400;
  font-size: 16px;
  color: var(--laouts-bone);
}
.laoutsAIStudio__productSize {
  font-family: var(--laouts-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--laouts-bone-soft);
}
.laoutsAIStudio__productLink {
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laouts-acid);
  text-decoration: none;
  margin-top: 6px;
  align-self: flex-start;
  transition: color 0.15s ease;
}
.laoutsAIStudio__productLink:hover { color: var(--laouts-bone); }

/* Regenerate button */
.laoutsAIStudio__regen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--laouts-hairline-2);
  color: var(--laouts-bone-soft);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.laoutsAIStudio__regen:hover {
  border-color: var(--laouts-acid);
  color: var(--laouts-acid);
}
.laoutsAIStudio__regen svg { transition: transform 0.4s ease; }
.laoutsAIStudio__regen:hover svg { transform: rotate(180deg); }

/* Design directions grid */
.laoutsAIStudio__directions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.laoutsAIStudio__dir {
  position: relative;
  background: var(--laouts-bg-2);
  border: 1px solid var(--laouts-hairline);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 200 / 270;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.laoutsAIStudio__dir:hover {
  border-color: var(--laouts-bone-soft);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}
.laoutsAIStudio__dir--active {
  border-color: var(--laouts-acid);
  box-shadow: 0 0 0 3px rgba(200, 232, 123, 0.2);
}
.laoutsAIStudio__dirCover {
  display: block;
  width: 100%;
  height: 100%;
}
.laoutsAIStudio__dirCover svg { display: block; width: 100%; height: 100%; }
.laoutsAIStudio__dirNum {
  position: absolute;
  top: 4px;
  right: 6px;
  font-family: var(--laouts-font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  background: rgba(15, 13, 10, 0.75);
  color: var(--laouts-bone);
  padding: 1px 5px;
  border-radius: 3px;
}
.laoutsAIStudio__dir--active .laoutsAIStudio__dirNum {
  background: var(--laouts-acid);
  color: var(--laouts-bg);
}

/* Feature rows */
.laoutsAIStudio__features {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.laoutsAIStudio__feat {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--laouts-hairline);
}
.laoutsAIStudio__feat:last-child { border-bottom: none; }
.laoutsAIStudio__featGlyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--laouts-bg-2);
  color: var(--laouts-bone-soft);
}
.laoutsAIStudio__featBody {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.laoutsAIStudio__featLab {
  font-family: var(--laouts-font-sans);
  font-size: 13px;
  color: var(--laouts-bone);
}
.laoutsAIStudio__featCount {
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  background: var(--laouts-bg-2);
  border: 1px solid var(--laouts-hairline-2);
  color: var(--laouts-acid);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}
.laoutsAIStudio__featHint {
  font-size: 11.5px;
  color: var(--laouts-muted);
  line-height: 1.4;
}
.laoutsAIStudio__featBtn {
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--laouts-hairline-2);
  color: var(--laouts-bone-soft);
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.laoutsAIStudio__featBtn:hover {
  border-color: var(--laouts-acid);
  color: var(--laouts-acid);
}

/* Footer apply */
.laoutsAIStudio__foot {
  border-top: 1px solid var(--laouts-hairline);
  padding: 16px 24px;
  background: var(--laouts-bg-1);
  flex-shrink: 0;
}
.laoutsAIStudio__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--laouts-acid);
  color: var(--laouts-bg);
  border: 1px solid var(--laouts-acid);
  font-family: var(--laouts-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.laoutsAIStudio__btn:hover {
  background: var(--laouts-acid-soft);
  border-color: var(--laouts-acid-soft);
}

/* Toast */
.laoutsAIStudio__toast {
  position: absolute;
  bottom: 88px;
  left: 50%;
  transform: translate(-50%, 12px);
  background: var(--laouts-bg);
  border: 1px solid var(--laouts-hairline-2);
  color: var(--laouts-bone);
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--laouts-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
  z-index: 4;
}
.laoutsAIStudio__toast--show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* While AI Studio is open, dim the pulse + look strip slightly */
body.laouts.laouts--aiStudioOpen .laoutsPulse,
body.laouts.laouts--aiStudioOpen .laoutsLookStrip {
  opacity: 0.4;
  pointer-events: none;
}

/* Hide while order modal is open */
body.laouts:has(#cepOrderExperience:not([hidden])) .laoutsAIStudio { display: none; }

@media (max-width: 720px) {
  .laoutsAIStudio__panel {
    width: 100vw;
    border-left: none;
  }
  .laoutsAIStudio__directions {
    grid-template-columns: repeat(3, 1fr);
  }
  .laoutsAIStudio__statRow {
    grid-template-columns: repeat(3, 1fr);
  }
  .laoutsAIStudio__head { padding: 18px 18px 14px; }
  .laoutsAIStudio__section { padding: 16px 18px; }
  .laoutsAIStudio__title { font-size: 22px; }
}

@media print {
  .laoutsAIStudio { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════ */
/*  ENGINE · PHOTOS PANEL                                             */
/*                                                                    */
/*  Slide-in right panel — library + curate + drop, in dark matcha.   */
/*  Triggered by tool 3 in the tool rail or pressing "3".             */
/* ══════════════════════════════════════════════════════════════════ */

.laoutsPhotos {
  position: fixed;
  inset: 0;
  z-index: 9300;
  pointer-events: none;
  font-family: var(--laouts-font-sans);
  color: var(--laouts-bone);
}

.laoutsPhotos__scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 13, 10, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.laoutsPhotos--open .laoutsPhotos__scrim {
  opacity: 1;
  pointer-events: auto;
}

.laoutsPhotos__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(480px, 92vw);
  background: var(--laouts-bg-1);
  border-left: 1px solid var(--laouts-hairline);
  box-shadow: -32px 0 80px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: auto;
  background-image:
    radial-gradient(35% 30% at 100% 0%, rgba(200, 232, 123, 0.10), transparent 60%);
}
.laoutsPhotos--open .laoutsPhotos__panel {
  transform: translateX(0);
}

.laoutsPhotos__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--laouts-hairline);
  flex-shrink: 0;
}
.laoutsPhotos__kicker {
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--laouts-acid);
  margin-bottom: 6px;
}
.laoutsPhotos__title {
  font-family: var(--laouts-font-serif);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--laouts-bone);
  margin: 0;
}

.laoutsPhotos__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--laouts-hairline-2);
  background: transparent;
  color: var(--laouts-bone-soft);
  font-family: var(--laouts-font-serif);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.laoutsPhotos__close:hover {
  border-color: var(--laouts-acid);
  color: var(--laouts-acid);
}

/* Stats */
.laoutsPhotos__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--laouts-hairline);
  flex-shrink: 0;
}
.laoutsPhotos__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--laouts-bg-2);
  border: 1px solid var(--laouts-hairline);
  border-radius: 8px;
}
.laoutsPhotos__statVal {
  font-family: var(--laouts-font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--laouts-bone);
  line-height: 1;
}
.laoutsPhotos__statLab {
  font-family: var(--laouts-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laouts-muted);
}

/* Filter row */
.laoutsPhotos__filterRow {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 14px 24px;
  border-bottom: 1px solid var(--laouts-hairline);
  flex-shrink: 0;
}
.laoutsPhotos__filter {
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--laouts-hairline-2);
  color: var(--laouts-bone-soft);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.laoutsPhotos__filter:hover {
  border-color: var(--laouts-bone-soft);
  color: var(--laouts-bone);
}
.laoutsPhotos__filter--active {
  background: var(--laouts-acid);
  border-color: var(--laouts-acid);
  color: var(--laouts-bg);
}

/* Grid section */
.laoutsPhotos__listSection {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.laoutsPhotos__listHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px 10px;
  flex-shrink: 0;
}
.laoutsPhotos__listTitle {
  font-family: var(--laouts-font-serif);
  font-weight: 400;
  font-size: 16px;
  color: var(--laouts-bone);
  margin: 0;
}
.laoutsPhotos__bulkBtn {
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--laouts-hairline-2);
  color: var(--laouts-bone-soft);
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.laoutsPhotos__bulkBtn:hover {
  border-color: var(--laouts-acid);
  color: var(--laouts-acid);
}

.laoutsPhotos__grid {
  padding: 0 24px 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--laouts-hairline-2) transparent;
}
.laoutsPhotos__grid::-webkit-scrollbar { width: 8px; }
.laoutsPhotos__grid::-webkit-scrollbar-thumb {
  background: var(--laouts-hairline-2);
  border-radius: 999px;
}

.laoutsPhotos__tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--laouts-bg-2);
  border: 1px solid var(--laouts-hairline);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.laoutsPhotos__tile:hover {
  border-color: var(--laouts-bone-soft);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.laoutsPhotos__tile--selected {
  border-color: var(--laouts-acid);
  box-shadow: 0 0 0 3px rgba(200, 232, 123, 0.22);
}
.laoutsPhotos__tile:focus-visible {
  outline: 2px solid var(--laouts-acid);
  outline-offset: 2px;
}

.laoutsPhotos__tileImg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--laouts-bg);
}

.laoutsPhotos__tileBadges {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}
.laoutsPhotos__tileBook {
  font-family: var(--laouts-font-mono);
  font-size: 8.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: rgba(15, 13, 10, 0.82);
  color: var(--laouts-acid);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid rgba(200, 232, 123, 0.35);
}
.laoutsPhotos__tileFaces {
  font-family: var(--laouts-font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  background: rgba(232, 154, 138, 0.92);
  color: #1a1208;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
}

.laoutsPhotos__tileFoot {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  z-index: 2;
}
.laoutsPhotos__tileQ {
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  background: rgba(15, 13, 10, 0.82);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--laouts-hairline-2);
  color: var(--laouts-bone);
}
.laoutsPhotos__tileQ--good { color: var(--laouts-acid); border-color: rgba(200, 232, 123, 0.35); }
.laoutsPhotos__tileQ--ok   { color: var(--laouts-gold); border-color: rgba(212, 180, 103, 0.35); }
.laoutsPhotos__tileQ--bad  { color: var(--laouts-rose); border-color: rgba(232, 154, 138, 0.35); }

.laoutsPhotos__tileCheck {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  background: rgba(15, 13, 10, 0.45);
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.laoutsPhotos__tile--selected .laoutsPhotos__tileCheck {
  background: var(--laouts-acid);
  border-color: var(--laouts-acid);
}
.laoutsPhotos__tileCheck::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 4px;
  border-left: 1.6px solid var(--laouts-bg);
  border-bottom: 1.6px solid var(--laouts-bg);
  transform: translate(-55%, -65%) rotate(-45deg);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.laoutsPhotos__tile--selected .laoutsPhotos__tileCheck::after { opacity: 1; }

/* Empty state */
.laoutsPhotos__empty {
  padding: 40px 32px;
  text-align: center;
  color: var(--laouts-bone-soft);
}
.laoutsPhotos__emptyGlyph {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(200, 232, 123, 0.55), rgba(200, 232, 123, 0.05) 65%, transparent 75%);
  border: 1px solid var(--laouts-hairline-2);
  margin: 0 auto 12px;
}
.laoutsPhotos__emptyTitle {
  font-family: var(--laouts-font-serif);
  font-size: 16px;
  color: var(--laouts-bone);
  margin: 0 0 4px;
}
.laoutsPhotos__emptyHint {
  font-size: 12px;
  color: var(--laouts-muted);
  margin: 0;
  max-width: 32ch;
  margin-left: auto;
  margin-right: auto;
}

/* Drop zone */
.laoutsPhotos__dropzone {
  margin: 12px 24px;
  padding: 22px 18px 18px;
  border: 1.5px dashed var(--laouts-hairline-2);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(200, 232, 123, 0.04), transparent);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
  flex-shrink: 0;
}
.laoutsPhotos__dropzone:hover,
.laoutsPhotos__dropzone--over {
  border-color: var(--laouts-acid);
  background: linear-gradient(180deg, rgba(200, 232, 123, 0.10), rgba(200, 232, 123, 0.02));
}
.laoutsPhotos__dropzone:focus-visible {
  outline: 2px solid var(--laouts-acid);
  outline-offset: 2px;
}
.laoutsPhotos__dropTitle {
  font-family: var(--laouts-font-serif);
  font-weight: 400;
  font-size: 16px;
  color: var(--laouts-bone);
  margin-bottom: 4px;
}
.laoutsPhotos__dropSub {
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--laouts-muted);
  margin-bottom: 12px;
}
.laoutsPhotos__dropBtn {
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--laouts-hairline-2);
  color: var(--laouts-bone);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.laoutsPhotos__dropBtn:hover {
  border-color: var(--laouts-acid);
  color: var(--laouts-acid);
}

/* Footer */
.laoutsPhotos__foot {
  border-top: 1px solid var(--laouts-hairline);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.laoutsPhotos__footLink {
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--laouts-acid);
  text-decoration: none;
  transition: color 0.15s ease;
}
.laoutsPhotos__footLink:hover { color: var(--laouts-bone); }
.laoutsPhotos__footLink--ghost { color: var(--laouts-bone-soft); }

/* Toast */
.laoutsPhotos__toast {
  position: absolute;
  bottom: 88px;
  left: 50%;
  transform: translate(-50%, 12px);
  background: var(--laouts-bg);
  border: 1px solid var(--laouts-hairline-2);
  color: var(--laouts-bone);
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--laouts-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
  z-index: 4;
}
.laoutsPhotos__toast--show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.laoutsPhotos__toast[data-kind="good"] {
  border-color: var(--laouts-acid);
  color: var(--laouts-acid);
}

/* While Photos panel is open, dim the pulse + look strip slightly */
body.laouts.laouts--photosOpen .laoutsPulse,
body.laouts.laouts--photosOpen .laoutsLookStrip {
  opacity: 0.4;
  pointer-events: none;
}

body.laouts:has(#cepOrderExperience:not([hidden])) .laoutsPhotos { display: none; }

@media (max-width: 720px) {
  .laoutsPhotos__panel {
    width: 100vw;
    border-left: none;
  }
  .laoutsPhotos__stats { grid-template-columns: repeat(4, 1fr); }
  .laoutsPhotos__grid { grid-template-columns: repeat(3, 1fr); padding: 0 18px 16px; }
  .laoutsPhotos__head { padding: 18px 18px 14px; }
  .laoutsPhotos__title { font-size: 22px; }
}

@media print {
  .laoutsPhotos { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════ */
/*  ENGINE · TOOL PANELS (1, 2, 4, 6, 7, 8)                           */
/*                                                                    */
/*  Shared slide-in right panel for Pages / Layouts / Text /          */
/*  Elements / Backgrounds / Styles. Built by                         */
/*  laouts-engine-tool-panels.js. Pure overlay, dark matcha.          */
/* ══════════════════════════════════════════════════════════════════ */

.laoutsToolPanel {
  position: fixed;
  inset: 0;
  z-index: 9300;
  pointer-events: none;
  font-family: var(--laouts-font-sans);
  color: var(--laouts-bone);
}
.laoutsToolPanel__scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 13, 10, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.laoutsToolPanel--open .laoutsToolPanel__scrim {
  opacity: 1;
  pointer-events: auto;
}

.laoutsToolPanel__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 92vw);
  background: var(--laouts-bg-1);
  border-left: 1px solid var(--laouts-hairline);
  box-shadow: -32px 0 80px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: auto;
  background-image: radial-gradient(35% 30% at 100% 0%, rgba(200, 232, 123, 0.10), transparent 60%);
}
.laoutsToolPanel--open .laoutsToolPanel__panel {
  transform: translateX(0);
}

.laoutsToolPanel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--laouts-hairline);
  flex-shrink: 0;
}
.laoutsToolPanel__kicker {
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--laouts-acid);
  margin-bottom: 6px;
}
.laoutsToolPanel__title {
  font-family: var(--laouts-font-serif);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--laouts-bone);
  margin: 0;
}
.laoutsToolPanel__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--laouts-hairline-2);
  background: transparent;
  color: var(--laouts-bone-soft);
  font-family: var(--laouts-font-serif);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.laoutsToolPanel__close:hover {
  border-color: var(--laouts-acid);
  color: var(--laouts-acid);
}

.laoutsToolPanel__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 24px 32px;
  scrollbar-width: thin;
  scrollbar-color: var(--laouts-hairline-2) transparent;
}
.laoutsToolPanel__body::-webkit-scrollbar { width: 8px; }
.laoutsToolPanel__body::-webkit-scrollbar-thumb {
  background: var(--laouts-hairline-2);
  border-radius: 999px;
}

/* Sections — same rhythm as AI Studio */
.laoutsToolPanel__section {
  padding: 18px 0;
  border-bottom: 1px solid var(--laouts-hairline);
}
.laoutsToolPanel__section:last-of-type { border-bottom: none; }

.laoutsToolPanel__sectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}
.laoutsToolPanel__sectionTitle {
  font-family: var(--laouts-font-serif);
  font-weight: 400;
  font-size: 16px;
  color: var(--laouts-bone);
  margin: 0;
  letter-spacing: -0.005em;
}
.laoutsToolPanel__count {
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--laouts-muted);
  background: var(--laouts-bg-2);
  border: 1px solid var(--laouts-hairline);
  padding: 3px 8px;
  border-radius: 999px;
}

.laoutsToolPanel__regen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--laouts-hairline-2);
  color: var(--laouts-bone-soft);
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.laoutsToolPanel__regen:hover {
  border-color: var(--laouts-acid);
  color: var(--laouts-acid);
}

/* List rows */
.laoutsToolPanel__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.laoutsToolPanel__listRow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--laouts-bg-2);
  border: 1px solid var(--laouts-hairline);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.18s ease;
  font-family: inherit;
  color: inherit;
}
.laoutsToolPanel__listRow:hover {
  border-color: var(--laouts-bone-soft);
  background: rgba(200, 232, 123, 0.04);
}
.laoutsToolPanel__listRow--active {
  border-color: var(--laouts-acid);
  background: rgba(200, 232, 123, 0.10);
  color: var(--laouts-acid);
}
.laoutsToolPanel__listNum {
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--laouts-muted);
}
.laoutsToolPanel__listLab {
  font-size: 13px;
  color: var(--laouts-bone);
  letter-spacing: -0.005em;
}
.laoutsToolPanel__listLab--serif { font-family: var(--laouts-font-serif); font-size: 16px; }
.laoutsToolPanel__listLab--sans  { font-family: var(--laouts-font-sans); }
.laoutsToolPanel__listLab--mono  { font-family: var(--laouts-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.laoutsToolPanel__listMeta {
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  color: var(--laouts-muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.laoutsToolPanel__listScore {
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  color: var(--laouts-acid);
  letter-spacing: 0.04em;
}

/* Two-line layout row variant — title + sub-description */
.laoutsToolPanel__listBody {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.laoutsToolPanel__listSub {
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--laouts-muted);
}
.laoutsToolPanel__listRow--active .laoutsToolPanel__listSub {
  color: rgba(200, 232, 123, 0.78);
}

.laoutsToolPanel__empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--laouts-muted);
  font-size: 12.5px;
  background: var(--laouts-bg-2);
  border: 1px dashed var(--laouts-hairline-2);
  border-radius: 8px;
}

/* Buttons + filter chips */
.laoutsToolPanel__btnRow {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.laoutsToolPanel__btn {
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--laouts-acid);
  border: 1px solid var(--laouts-acid);
  color: var(--laouts-bg);
  padding: 11px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}
.laoutsToolPanel__btn:hover {
  background: var(--laouts-acid-soft);
  border-color: var(--laouts-acid-soft);
}
.laoutsToolPanel__btn--ghost {
  background: transparent;
  border-color: var(--laouts-hairline-2);
  color: var(--laouts-bone-soft);
}
.laoutsToolPanel__btn--ghost:hover {
  border-color: var(--laouts-acid);
  color: var(--laouts-acid);
  background: transparent;
}
.laoutsToolPanel__btn--danger {
  background: transparent;
  border-color: var(--laouts-hairline-2);
  color: var(--laouts-bone-soft);
}
.laoutsToolPanel__btn--danger:hover {
  border-color: var(--laouts-rose);
  color: var(--laouts-rose);
  background: transparent;
}

.laoutsToolPanel__filterRow {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.laoutsToolPanel__filter {
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--laouts-hairline-2);
  color: var(--laouts-bone-soft);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.laoutsToolPanel__filter:hover {
  border-color: var(--laouts-bone-soft);
  color: var(--laouts-bone);
}
.laoutsToolPanel__filter--active {
  background: var(--laouts-acid);
  border-color: var(--laouts-acid);
  color: var(--laouts-bg);
}

/* Active card (Layouts active row + Styles active card) */
.laoutsToolPanel__activeCard {
  background: var(--laouts-bg-2);
  border: 1px solid var(--laouts-acid);
  border-radius: 10px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.laoutsToolPanel__activeName {
  font-family: var(--laouts-font-serif);
  font-weight: 400;
  font-size: 18px;
  color: var(--laouts-bone);
  letter-spacing: -0.005em;
}
.laoutsToolPanel__activeScore {
  font-family: var(--laouts-font-mono);
  font-size: 10.5px;
  color: var(--laouts-acid);
  grid-column: 1 / -1;
  letter-spacing: 0.06em;
}
.laoutsToolPanel__lock {
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--laouts-hairline-2);
  color: var(--laouts-bone-soft);
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.laoutsToolPanel__lock:hover { border-color: var(--laouts-acid); color: var(--laouts-acid); }
.laoutsToolPanel__lock--on {
  background: var(--laouts-acid);
  border-color: var(--laouts-acid);
  color: var(--laouts-bg);
}

/* Toggle (Pages → numbering on/off) */
.laoutsToolPanel__toggle {
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--laouts-acid);
  border: 1px solid var(--laouts-acid);
  color: var(--laouts-bg);
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.laoutsToolPanel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--laouts-hairline);
}
.laoutsToolPanel__row:last-child { border-bottom: none; }
.laoutsToolPanel__rowLab {
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--laouts-muted);
}
.laoutsToolPanel__rowVal {
  font-family: var(--laouts-font-sans);
  font-size: 12.5px;
  color: var(--laouts-bone);
}

/* Slider */
.laoutsToolPanel__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--laouts-hairline-2);
  border-radius: 999px;
  outline: none;
}
.laoutsToolPanel__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--laouts-acid);
  cursor: pointer;
  border: 2px solid var(--laouts-bg);
}
.laoutsToolPanel__slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--laouts-acid);
  cursor: pointer;
  border: 2px solid var(--laouts-bg);
}

/* Color chip row */
.laoutsToolPanel__paletteRow {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.laoutsToolPanel__paletteChip {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--laouts-hairline-2);
  display: inline-block;
}
.laoutsToolPanel__colorChip {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px solid var(--laouts-hairline-2);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  padding: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.laoutsToolPanel__colorChip:hover {
  transform: scale(1.08);
  border-color: var(--laouts-bone-soft);
}
.laoutsToolPanel__colorChip--active {
  border-color: var(--laouts-acid);
  box-shadow: 0 0 0 3px rgba(200, 232, 123, 0.25);
}

/* Shape gallery (Elements) */
.laoutsToolPanel__shapes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.laoutsToolPanel__shapeTile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: var(--laouts-bg-2);
  border: 1px solid var(--laouts-hairline);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
  font-family: inherit;
  color: var(--laouts-bone-soft);
}
.laoutsToolPanel__shapeTile:hover {
  border-color: var(--laouts-acid);
  transform: translateY(-2px);
  color: var(--laouts-bone);
}
.laoutsToolPanel__shapeName {
  font-family: var(--laouts-font-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* Backgrounds tiles */
.laoutsToolPanel__bgGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.laoutsToolPanel__bgTile {
  position: relative;
  aspect-ratio: 1.5 / 1;
  border-radius: 10px;
  border: 1px solid var(--laouts-hairline-2);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
  padding: 0;
}
.laoutsToolPanel__bgTile:hover {
  border-color: var(--laouts-acid);
  transform: translateY(-2px);
}
.laoutsToolPanel__bgTileLabel {
  position: absolute;
  bottom: 6px;
  left: 8px;
  font-family: var(--laouts-font-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: rgba(15, 13, 10, 0.78);
  color: var(--laouts-bone);
  padding: 2px 6px;
  border-radius: 3px;
}

.laoutsToolPanel__washGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.laoutsToolPanel__washTile {
  aspect-ratio: 2 / 1;
  border-radius: 10px;
  border: 1px solid var(--laouts-hairline-2);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
  padding: 0;
}
.laoutsToolPanel__washTile:hover {
  border-color: var(--laouts-acid);
  transform: translateY(-2px);
}

/* Styles · palette grid */
.laoutsToolPanel__paletteGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.laoutsToolPanel__paletteTile {
  background: var(--laouts-bg-2);
  border: 1px solid var(--laouts-hairline);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s ease, transform 0.15s ease;
  font-family: inherit;
}
.laoutsToolPanel__paletteTile:hover {
  border-color: var(--laouts-bone-soft);
  transform: translateY(-2px);
}
.laoutsToolPanel__paletteTile--active {
  border-color: var(--laouts-acid);
  background: rgba(200, 232, 123, 0.06);
  box-shadow: 0 0 0 2px rgba(200, 232, 123, 0.18);
}
.laoutsToolPanel__paletteTile .laoutsToolPanel__paletteChip {
  width: 100%;
  height: 12px;
  border-radius: 3px;
}
.laoutsToolPanel__paletteName {
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--laouts-bone);
  text-align: center;
  margin-top: 2px;
}

/* Hint copy */
.laoutsToolPanel__hint {
  margin-top: 10px;
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  color: var(--laouts-muted);
  letter-spacing: 0.04em;
}

/* Toast */
.laoutsToolPanel__toast {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 12px);
  background: var(--laouts-bg);
  border: 1px solid var(--laouts-hairline-2);
  color: var(--laouts-bone);
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--laouts-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  z-index: 4;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.laoutsToolPanel__toast--show {
  opacity: 1;
  transform: translate(-50%, 0);
}

body.laouts.laouts--toolPanelOpen .laoutsPulse,
body.laouts.laouts--toolPanelOpen .laoutsLookStrip {
  opacity: 0.4;
  pointer-events: none;
}

body.laouts:has(#cepOrderExperience:not([hidden])) .laoutsToolPanel { display: none; }

@media (max-width: 720px) {
  .laoutsToolPanel__panel { width: 100vw; border-left: none; }
  .laoutsToolPanel__head { padding: 18px 18px 14px; }
  .laoutsToolPanel__body { padding: 0 18px 24px; }
  .laoutsToolPanel__title { font-size: 22px; }
  .laoutsToolPanel__shapes { grid-template-columns: repeat(4, 1fr); }
  .laoutsToolPanel__bgGrid { grid-template-columns: repeat(3, 1fr); }
  .laoutsToolPanel__washGrid { grid-template-columns: repeat(2, 1fr); }
  .laoutsToolPanel__paletteGrid { grid-template-columns: repeat(3, 1fr); }
}

@media print {
  .laoutsToolPanel { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════ */
/*  ENGINE · CORE CHROME RE-SKIN                                      */
/*                                                                    */
/*  Re-skins the existing engine surfaces (left library, right        */
/*  inspector, top toolbar, filmstrip, layout bar, action buttons)    */
/*  to dark matcha. Uses high-specificity overrides scoped to         */
/*  body.laouts so engine logic is untouched. The actual canvas       */
/*  pages remain white because they are previewing print output.      */
/* ══════════════════════════════════════════════════════════════════ */

/* Workbench background — the "stage" surround */
body.laouts .stageWorkArea,
body.laouts .stageWrap,
body.laouts .spreadStageView,
body.laouts .editorWorkbench,
body.laouts main {
  background: var(--laouts-bg) !important;
  color: var(--laouts-bone);
}

/* The pulled-in background ivory body becomes dark matcha */
body.laouts {
  background: var(--laouts-bg) !important;
  color: var(--laouts-bone);
}

/* ─────────── EDITOR TOPBAR (Share for Review · EXPORT · ZOOM · ↶ ↷) ─────────── */

body.laouts .editorTopBar,
body.laouts .editorTopbar,
body.laouts .editorTopBar__pack {
  background: rgba(15, 13, 10, 0.85) !important;
  border-bottom: 1px solid var(--laouts-hairline) !important;
  color: var(--laouts-bone) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.laouts .editorTbBtn {
  background: var(--laouts-bg-2) !important;
  border: 1px solid var(--laouts-hairline-2) !important;
  color: var(--laouts-bone) !important;
  font-family: var(--laouts-font-mono) !important;
  letter-spacing: 0.06em !important;
  border-radius: 999px !important;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease !important;
}
body.laouts .editorTbBtn:hover {
  background: rgba(200, 232, 123, 0.06) !important;
  border-color: var(--laouts-acid) !important;
  color: var(--laouts-acid) !important;
}

/* "Share for Review" — muted accent */
body.laouts .editorTbBtn--review,
body.laouts .editorTbBtn--primarySoft,
body.laouts .editorTbBtn--preview {
  background: rgba(200, 232, 123, 0.08) !important;
  border-color: rgba(200, 232, 123, 0.32) !important;
  color: var(--laouts-acid) !important;
}
body.laouts .editorTbBtn--review:hover,
body.laouts .editorTbBtn--primarySoft:hover,
body.laouts .editorTbBtn--preview:hover {
  background: rgba(200, 232, 123, 0.14) !important;
  border-color: var(--laouts-acid) !important;
  color: var(--laouts-acid) !important;
}

/* EXPORT — primary acid CTA */
body.laouts .editorTbBtn--export {
  background: var(--laouts-acid) !important;
  border-color: var(--laouts-acid) !important;
  color: var(--laouts-bg) !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}
body.laouts .editorTbBtn--export:hover {
  background: var(--laouts-acid-soft) !important;
  border-color: var(--laouts-acid-soft) !important;
  color: var(--laouts-bg) !important;
}

/* ─────────── LEFT LIBRARY (PHOTOS sidebar) ─────────── */

body.laouts .libraryColumn,
body.laouts .lightTableStrip {
  background: var(--rc-panel) !important;
  border-right: none !important;          /* killed — no gray seam between library and canvas */
  color: var(--rc-text) !important;
  padding: 14px !important;
  box-sizing: border-box !important;
}

/* Hide the noisy editor topbar entirely — its content (undo/redo, share,
 * export) has been relocated by laouts-engine-focus-mode.js. The center
 * zoom pill also moves into the canvas. */
body.laouts .editorTopBar { display: none !important; }
/* Reclaim the topbar's height in the workbench grid */
body.laouts .stageWorkArea,
body.laouts .stageWrap { padding-top: 0 !important; }

body.laouts .libraryTopBar {
  background: transparent !important;
  border-bottom: none !important;
  padding: 0 0 12px 0 !important;
}
body.laouts .libraryTopBar__row,
body.laouts .libraryTopBar__sel {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
}

body.laouts .libraryTopBar__label,
body.laouts .libraryTopBar__row span {
  color: var(--laouts-acid) !important;
  font-family: var(--laouts-font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}

body.laouts .libraryTopBar__row button,
body.laouts .libraryTopBar__sel button {
  background: var(--laouts-bg-2) !important;
  border: 1px solid var(--laouts-hairline-2) !important;
  color: var(--laouts-bone) !important;
  font-family: var(--laouts-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease !important;
}
body.laouts .libraryTopBar__row button:hover,
body.laouts .libraryTopBar__sel button:hover {
  border-color: var(--laouts-acid) !important;
  color: var(--laouts-acid) !important;
}

/* "Auto Layout Selected Photos" gets the primary acid */
body.laouts #libBtnAutoLayout,
body.laouts .libraryTopBar__sel button[data-action="auto-layout"] {
  background: var(--laouts-acid) !important;
  border-color: var(--laouts-acid) !important;
  color: var(--laouts-bg) !important;
}
body.laouts #libBtnAutoLayout:hover {
  background: var(--laouts-acid-soft) !important;
  border-color: var(--laouts-acid-soft) !important;
}

/* "28 selected" pill */
body.laouts .libraryTopBar__count,
body.laouts .libraryTopBar__sel span:first-child {
  font-family: var(--laouts-font-serif) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--laouts-bone) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Drag & drop zone */
body.laouts .libraryUploadZone {
  background: linear-gradient(180deg, rgba(200, 232, 123, 0.04), transparent) !important;
  border: 1.5px dashed var(--laouts-hairline-2) !important;
  border-radius: 12px !important;
  margin: 12px !important;
  padding: 20px 16px !important;
}
body.laouts .libraryUploadZone:hover,
body.laouts .libraryUploadZone.is-dragover,
body.laouts .libraryUploadZone--over {
  border-color: var(--laouts-acid) !important;
  background: linear-gradient(180deg, rgba(200, 232, 123, 0.10), rgba(200, 232, 123, 0.02)) !important;
}
body.laouts .libraryUploadZone__head,
body.laouts .libraryUploadZone__inner h3,
body.laouts .libraryUploadZone__inner p {
  color: var(--laouts-bone) !important;
  font-family: var(--laouts-font-serif) !important;
  font-weight: 400 !important;
}
body.laouts .libraryUploadZone__sub,
body.laouts .libraryUploadZone__inner small {
  color: var(--laouts-bone-soft) !important;
  font-family: var(--laouts-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
}
body.laouts .libraryUploadZone__art,
body.laouts .libraryUploadZone__art svg path {
  stroke: var(--laouts-acid) !important;
  color: var(--laouts-acid) !important;
}
body.laouts .libraryUploadZone a,
body.laouts .libraryUploadZone__inner a {
  color: var(--laouts-acid) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-color: rgba(200, 232, 123, 0.4) !important;
}

/* Photo tiles in the library grid */
body.laouts .libraryGrid,
body.laouts #libraryGrid {
  background: transparent !important;
}
body.laouts .libraryTile,
body.laouts .libTile,
body.laouts [class*="libTile"],
body.laouts [class*="library"] [class*="tile"] {
  background: var(--laouts-bg-2) !important;
  border: 1px solid var(--laouts-hairline) !important;
  border-radius: 6px !important;
}
body.laouts .libraryTile.is-selected,
body.laouts .libTile.is-selected,
body.laouts [class*="libTile"].is-selected,
body.laouts [class*="libTile"][aria-selected="true"] {
  border-color: var(--laouts-acid) !important;
  box-shadow: 0 0 0 2px rgba(200, 232, 123, 0.25) !important;
}

/* ─────────── SPREAD RAIL & FILMSTRIP ─────────── */

body.laouts .spreadRail {
  background: var(--rc-panel) !important;
  border: 1px solid var(--rc-divider) !important;
  border-radius: 14px !important;
  color: var(--rc-text) !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
  margin: 0 0 12px 0 !important;
  box-sizing: border-box !important;
}

body.laouts .spreadRail__header {
  background: transparent !important;
  border-bottom: 1px solid var(--rc-divider) !important;
  padding: 0 0 10px 0 !important;
  margin-bottom: 10px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px 12px !important;
}

/* Round nav buttons (‹ ›) — keep round, consistent 32px */
body.laouts .spreadRail__roundBtn {
  width: 32px !important;
  height: 32px !important;
  background: var(--rc-card) !important;
  border: 1px solid transparent !important;
  color: var(--rc-text) !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
body.laouts .spreadRail__roundBtn:hover {
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent) !important;
  background: var(--rc-card-hover) !important;
}

/* Spread label "Spread N / M" — Inter, sentence-case, no all-caps */
body.laouts .spreadRail__label,
body.laouts .spreadNavLabel,
body.laouts #bookSpreadLabel {
  font-family: var(--laouts-font-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--rc-text) !important;
  font-variant-numeric: tabular-nums !important;
  padding: 0 6px !important;
}

/* All action buttons in the rail — one consistent pill style. */
body.laouts .spreadRail__btn,
body.laouts .spreadRail__toggleStrip {
  height: 32px !important;
  min-height: 32px !important;
  background: var(--rc-card) !important;
  border: 1px solid transparent !important;
  color: var(--rc-text) !important;
  font-family: var(--laouts-font-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease !important;
}
body.laouts .spreadRail__btn:hover,
body.laouts .spreadRail__toggleStrip:hover {
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent) !important;
  background: var(--rc-card-hover) !important;
}

/* "+ Spread" gets a quiet primary treatment so it reads as the action */
body.laouts .spreadRail__btn#bookNavAdd {
  background: var(--rc-accent) !important;
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent-ink) !important;
  font-weight: 600 !important;
}
body.laouts .spreadRail__btn#bookNavAdd:hover {
  background: var(--rc-accent-hover) !important;
  border-color: var(--rc-accent-hover) !important;
  color: var(--rc-accent-ink) !important;
}

/* Round overflow icon (⋯) — match round nav size */
body.laouts .spreadRail__iconBtn {
  width: 32px !important;
  height: 32px !important;
  background: var(--rc-card) !important;
  border: 1px solid transparent !important;
  color: var(--rc-text) !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
body.laouts .spreadRail__iconBtn:hover {
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent) !important;
  background: var(--rc-card-hover) !important;
}

/* Group the action cluster on the right — consistent 8px gap */
body.laouts .spreadRail__actions {
  gap: 6px !important;
}
body.laouts .spreadRail__nav {
  gap: 6px !important;
}

body.laouts .spreadRail__stripWrap,
body.laouts .bookSpreadStripScroll {
  background: transparent !important;
  border-top: 1px solid var(--laouts-hairline) !important;
}

/* Book spread thumbnails — keep paper white but border them dark */
body.laouts .bookSpreadStrip__thumb,
body.laouts [class*="spreadThumb"],
body.laouts [class*="bookSpreadStrip"] [class*="thumb"] {
  border: 1px solid var(--laouts-hairline-2) !important;
  border-radius: 4px !important;
  background: #fafaf7 !important; /* keep page-like for accuracy */
}
body.laouts .bookSpreadStrip__thumb.is-active,
body.laouts [class*="spreadThumb"].is-active,
body.laouts [class*="spreadThumb"][aria-selected="true"] {
  border-color: var(--laouts-acid) !important;
  box-shadow: 0 0 0 2px rgba(200, 232, 123, 0.25) !important;
}
body.laouts .bookSpreadStrip__thumbLabel,
body.laouts [class*="spreadThumb"] [class*="label"] {
  color: var(--laouts-muted) !important;
  font-family: var(--laouts-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
}

/* ─────────── LAYOUT BAR (above canvas) ─────────── */

body.laouts .laoutsStageBar {
  background: rgba(200, 232, 123, 0.05) !important;
  border-top: 1px solid var(--laouts-hairline) !important;
  border-bottom: 1px solid var(--laouts-hairline) !important;
  color: var(--laouts-bone) !important;
}

/* Hide internal recipe ids (FIVE_PHOTO_01_LEFT_THREE_STRIPS_…),
 * the "captured" debug suffix, and the technical position counter
 * (1/1 · 1/1) — they're for the engine internals, not the user.
 * The engine still uses these names internally; we just don't render
 * them in the UI. Tooltips on hover preserve the data via title=. */
body.laouts .laoutsStageBar__name,
body.laouts .laoutsStageBar__src,
body.laouts .laoutsStageBar__pos,
body.laouts #laoutsStageName,
body.laouts #laoutsStageSource,
body.laouts #laoutsStagePos {
  display: none !important;
}

/* Hide orphan separators that surrounded the now-hidden technical spans */
body.laouts .laoutsStageBar__sep:has(+ .laoutsStageBar__name),
body.laouts .laoutsStageBar__sep:has(+ .laoutsStageBar__pos),
body.laouts .laoutsStageBar__sep:has(+ .laoutsStageBar__src) {
  display: none !important;
}

/* The remaining .laoutsStageBar__count gets a friendlier presentation */
body.laouts .laoutsStageBar__count {
  font-family: var(--laouts-font-serif) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  color: var(--laouts-bone) !important;
  letter-spacing: -0.005em !important;
  font-style: italic !important;
}

body.laouts .laoutsStageBar__inner {
  background: transparent !important;
  color: var(--laouts-bone) !important;
}

body.laouts .laoutsStageBar__nav {
  background: var(--laouts-bg-2) !important;
  border: 1px solid var(--laouts-hairline-2) !important;
  color: var(--laouts-bone) !important;
  font-family: var(--laouts-font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
}
body.laouts .laoutsStageBar__nav:hover {
  border-color: var(--laouts-acid) !important;
  color: var(--laouts-acid) !important;
  background: rgba(200, 232, 123, 0.06) !important;
}

body.laouts .laoutsStageBar__count,
body.laouts .laoutsStageBar__pos,
body.laouts .laoutsStageBar__src {
  font-family: var(--laouts-font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.06em !important;
  color: var(--laouts-bone-soft) !important;
}
body.laouts .laoutsStageBar__name {
  font-family: var(--laouts-font-mono) !important;
  color: var(--laouts-acid) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}
body.laouts .laoutsStageBar__sep {
  color: var(--laouts-subtle) !important;
}
body.laouts .laoutsStageBar--recipeActive .laoutsStageBar__inner {
  background: linear-gradient(90deg, rgba(200, 232, 123, 0.08), transparent 70%) !important;
}

/* ─────────── EDITOR BADGE ("0 / 0" indicator — hidden) ─────────── */
/* This badge shows the text editor's character / word count and is
 * only relevant when actively editing text. Keep it out of the way. */
body.laouts #editorBadge {
  display: none !important;
}

/* ─────────── RIGHT INSPECTOR (DOCUMENT · VIEW · LAYOUT TOOLS) ─────────── */

body.laouts .sidebar,
body.laouts #rightInspector {
  background: var(--laouts-bg-1) !important;
  border-left: 1px solid var(--laouts-hairline) !important;
  color: var(--laouts-bone) !important;
}

body.laouts .sidebar .card,
body.laouts #rightInspector .card {
  background: var(--laouts-bg-2) !important;
  border: 1px solid var(--laouts-hairline) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-bottom: 12px !important;
  box-shadow: none !important;
}

body.laouts .sidebar .card .title,
body.laouts #rightInspector .card .title,
body.laouts .sidebar .card h2,
body.laouts .sidebar .card h3 {
  font-family: var(--laouts-font-mono) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--laouts-acid) !important;
  margin-bottom: 12px !important;
  border-bottom: none !important;
}

body.laouts .sidebar .card .hint,
body.laouts .sidebar .card p,
body.laouts .sidebar .card .uxLabel {
  color: var(--laouts-bone-soft) !important;
  font-family: var(--laouts-font-sans) !important;
  font-size: 12px !important;
}
body.laouts #rightInspector .card .cardSub {
  font-family: var(--laouts-font-sans) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: color-mix(in srgb, var(--laouts-bone) 60%, transparent) !important;
  margin: 0 0 12px 0 !important;
  max-width: 48em;
}
body.laouts .sidebar .card .uxLabel {
  font-family: var(--laouts-font-mono) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--laouts-muted) !important;
  margin-top: 12px !important;
  margin-bottom: 6px !important;
}

/* Selects, inputs */
body.laouts .sidebar select,
body.laouts .sidebar input[type="text"],
body.laouts .sidebar input[type="number"],
body.laouts .sidebar input[type="search"],
body.laouts #rightInspector select,
body.laouts #rightInspector input[type="text"],
body.laouts #rightInspector input[type="number"] {
  background: var(--laouts-bg) !important;
  border: 1px solid var(--laouts-hairline-2) !important;
  color: var(--laouts-bone) !important;
  font-family: var(--laouts-font-mono) !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
  outline: none !important;
}
body.laouts .sidebar select:focus,
body.laouts .sidebar input:focus,
body.laouts #rightInspector select:focus,
body.laouts #rightInspector input:focus {
  border-color: var(--laouts-acid) !important;
}

/* Range sliders — thicker track + thumb (inspector readability) */
body.laouts .sidebar input[type="range"],
body.laouts #rightInspector input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 4px !important;
  background: var(--laouts-hairline-2) !important;
  border-radius: 999px !important;
  outline: none !important;
  padding: 0 !important;
  border: none !important;
}
body.laouts .sidebar input[type="range"]::-webkit-slider-thumb,
body.laouts #rightInspector input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: var(--laouts-acid) !important;
  border: 2px solid var(--laouts-bg) !important;
  cursor: pointer !important;
}
body.laouts .sidebar input[type="range"]::-moz-range-thumb,
body.laouts #rightInspector input[type="range"]::-moz-range-thumb {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: var(--laouts-acid) !important;
  border: 2px solid var(--laouts-bg) !important;
  cursor: pointer !important;
}

body.laouts #rightInspector .card input[type="checkbox"] {
  width: 40px !important;
  min-width: 40px !important;
  height: 22px !important;
  border-radius: 999px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: var(--laouts-hairline-2) !important;
  border: 1px solid var(--laouts-hairline) !important;
  position: relative !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  transition: background 0.15s ease !important;
}
body.laouts #rightInspector .card input[type="checkbox"]::after {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: var(--laouts-bone) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.15s ease !important;
}
body.laouts #rightInspector .card input[type="checkbox"]:checked {
  background: color-mix(in srgb, var(--laouts-acid) 72%, var(--laouts-bg)) !important;
  border-color: var(--laouts-acid) !important;
}
body.laouts #rightInspector .card input[type="checkbox"]:checked::after {
  transform: translateX(18px) !important;
}

/* Generic .btn used inside the inspector */
body.laouts .sidebar .btn,
body.laouts #rightInspector .btn,
body.laouts .sidebar button,
body.laouts #rightInspector button {
  background: var(--laouts-bg-2) !important;
  border: 1px solid var(--laouts-hairline-2) !important;
  color: var(--laouts-bone) !important;
  font-family: var(--laouts-font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease !important;
}
body.laouts .sidebar .btn:hover,
body.laouts #rightInspector .btn:hover,
body.laouts .sidebar button:hover,
body.laouts #rightInspector button:hover {
  border-color: var(--laouts-acid) !important;
  color: var(--laouts-acid) !important;
  background: rgba(200, 232, 123, 0.06) !important;
}

/* Active "ON" segmented control buttons (Touch / Small / Med / Large, etc.) */
body.laouts .sidebar .btn.is-active,
body.laouts .sidebar .btn[aria-pressed="true"],
body.laouts .sidebar [aria-current="true"],
body.laouts #rightInspector .btn.is-active,
body.laouts #rightInspector .btn[aria-pressed="true"] {
  background: var(--laouts-acid) !important;
  border-color: var(--laouts-acid) !important;
  color: var(--laouts-bg) !important;
}

/* RECIPE pill at the bottom of LAYOUT TOOLS */
body.laouts .recipePill,
body.laouts [class*="recipePill"],
body.laouts .laoutsRecipeChip,
body.laouts [class*="recipeChip"] {
  background: var(--laouts-acid) !important;
  color: var(--laouts-bg) !important;
  border-radius: 999px !important;
  font-family: var(--laouts-font-mono) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* ─────────── BOOK SIZE / PRINT PRODUCT EMPTY-STATE LABEL ─────────── */
body.laouts .sidebar option,
body.laouts #rightInspector option {
  background: var(--laouts-bg-1) !important;
  color: var(--laouts-bone) !important;
}

/* Soft text accents inside cards (e.g. "Viewing spread 3 of 7…") */
body.laouts .sidebar #documentBookSpreadLine,
body.laouts .sidebar [class*="meta"],
body.laouts .sidebar small {
  color: var(--laouts-muted) !important;
  font-family: var(--laouts-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
}

/* ─────────── HIDE old "Tour" until we re-skin it cleanly ─────────── */
/* (Just normalize its style if it's there.) */
body.laouts .libraryTopBar button[title*="tour" i],
body.laouts button#libBtnTour {
  background: transparent !important;
  border: 1px solid var(--laouts-hairline-2) !important;
  color: var(--laouts-bone-soft) !important;
}
body.laouts .libraryTopBar button[title*="tour" i]:hover {
  border-color: var(--laouts-acid) !important;
  color: var(--laouts-acid) !important;
}

/* ─────────── PINK SEAM → ACID-GREEN SEAM MARK ─────────── */
/* The center gutter guide — keep it visible but on-brand. */
body.laouts .seamLine,
body.laouts .stageSeam,
body.laouts [class*="seam"]:not([class*="text"]) {
  background: rgba(200, 232, 123, 0.55) !important;
}

/* ─────────── PHOTOS HEADER LABEL (top of left column) ─────────── */
body.laouts .libraryTopBar__row,
body.laouts .libraryTopBar__sel {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Push the engine's left/right rails away from our left tool rail */
body.laouts .libraryColumn,
body.laouts .lightTableStrip {
  margin-left: var(--laouts-tool-rail-w);
  transition: margin-left 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.laouts.laouts--toolRailPinned .libraryColumn,
body.laouts.laouts--toolRailPinned .lightTableStrip {
  margin-left: var(--laouts-tool-rail-w-open);
}

/* Phones — engine's responsive rules already collapse the rails;
 *  just make sure our shell strips (topbar + stepper + look strip)
 *  don't double-pad on narrow viewports. */
@media (max-width: 720px) {
  body.laouts .libraryColumn,
  body.laouts .lightTableStrip {
    margin-left: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════ */
/*  ENGINE · LAYOUT RECIPE CARD (Option B · Visual)                   */
/*                                                                    */
/*  Replaces the technical recipe sub-section inside #cardLayoutTools */
/*  with a visual card. Built by laouts-engine-recipe-card.js.        */
/* ══════════════════════════════════════════════════════════════════ */

body.laouts .laoutsRecipeCard {
  margin-top: 4px;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.laoutsRecipeCard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.laoutsRecipeCard__kicker {
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--laouts-acid);
}
.laoutsRecipeCard__pos {
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--laouts-muted);
  background: var(--laouts-bg);
  border: 1px solid var(--laouts-hairline-2);
  padding: 3px 8px;
  border-radius: 999px;
}

/* Preview frame */
.laoutsRecipeCard__preview {
  background: var(--laouts-bg);
  border: 1px solid var(--laouts-hairline-2);
  border-radius: 8px;
  padding: 6px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.laoutsRecipeCard__preview svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Pick row — name + lock button */
.laoutsRecipeCard__pickRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  background: var(--laouts-bg);
  border: 1px solid var(--laouts-acid);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 0 0 3px rgba(200, 232, 123, 0.12);
}
.laoutsRecipeCard__pickBody {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.laoutsRecipeCard__name {
  font-family: var(--laouts-font-serif) !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  color: var(--laouts-bone) !important;
  letter-spacing: -0.005em !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none !important;
}
.laoutsRecipeCard__sub {
  font-family: var(--laouts-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  color: var(--laouts-acid) !important;
  text-transform: lowercase !important;
}
.laoutsRecipeCard__lock {
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent !important;
  border: 1px solid var(--laouts-hairline-2) !important;
  color: var(--laouts-bone-soft) !important;
  padding: 6px 11px !important;
  border-radius: 999px !important;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}
.laoutsRecipeCard__lock:hover {
  border-color: var(--laouts-acid) !important;
  color: var(--laouts-acid) !important;
}
.laoutsRecipeCard__lock--on {
  background: var(--laouts-acid) !important;
  border-color: var(--laouts-acid) !important;
  color: var(--laouts-bg) !important;
}

/* Try-another nav row */
.laoutsRecipeCard__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.laoutsRecipeCard__arrow {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid var(--laouts-hairline-2) !important;
  background: transparent !important;
  color: var(--laouts-bone) !important;
  font-family: var(--laouts-font-serif) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.laoutsRecipeCard__arrow:hover {
  border-color: var(--laouts-acid) !important;
  color: var(--laouts-acid) !important;
  background: rgba(200, 232, 123, 0.06) !important;
}
.laoutsRecipeCard__try {
  flex: 1;
  font-family: var(--laouts-font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  background: var(--laouts-bg-2) !important;
  border: 1px solid var(--laouts-hairline-2) !important;
  color: var(--laouts-bone) !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.laoutsRecipeCard__try:hover {
  border-color: var(--laouts-acid) !important;
  color: var(--laouts-acid) !important;
}

/* "Album build mix & advanced options" disclosure — Christina: hide it.
 * These are dev-only options the end user shouldn't see. */
.laoutsRecipeCard__more,
.laoutsRecipeCard__moreBody {
  display: none !important;
}
/* Also hide the underlying engine elements (album build mode select + dev
 * checkboxes + story mode checkbox + their parent uxLabels) that the
 * recipe-card module would otherwise relocate into the disclosure. */
body.laouts #albumBuildMode,
body.laouts label:has(> #laoutsStoryMode),
body.laouts label:has(> #laoutsShowGenFallback),
body.laouts label:has(> #laoutsShowExperimentalLowQuality),
body.laouts label:has(> #laoutsShowRejectedLayouts) {
  display: none !important;
}
/* Hide the "Album auto-build mix" uxLabel that sits above the dropdown. */
body.laouts #cardLayoutTools .uxLabel:has(+ #albumBuildMode),
body.laouts #cardLayoutTools .uxLabel:has(+ select#albumBuildMode) {
  display: none !important;
}
/* Also hide the LAOUTS layout (recipe) row + the engine's prev/next layout
 * buttons in the inspector (we have spread arrows above the canvas). */
body.laouts #cardLayoutTools .uxLabel:has(> #laoutsRecipeKicker),
body.laouts #cardLayoutTools #laoutsRecipeKicker,
body.laouts #cardLayoutTools #laoutsLayoutPrev,
body.laouts #cardLayoutTools #laoutsLayoutNext,
body.laouts #cardLayoutTools #laoutsLayoutPos,
body.laouts #cardLayoutTools #laoutsLayoutName {
  display: none !important;
}
/* Hide the explanatory paragraph above the engine prev/next buttons. */
body.laouts #cardLayoutTools p.hint:has(+ div > #laoutsLayoutPrev) {
  display: none !important;
}
.laoutsRecipeCard__more:hover {
  color: var(--laouts-acid) !important;
}
.laoutsRecipeCard__moreCaret {
  color: var(--laouts-acid);
  font-family: var(--laouts-font-serif);
  font-size: 14px;
  transition: transform 0.18s ease;
}
.laoutsRecipeCard--moreOpen .laoutsRecipeCard__moreCaret {
  transform: rotate(180deg);
}

.laoutsRecipeCard__moreBody {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--laouts-bg);
  border: 1px solid var(--laouts-hairline);
  border-radius: 8px;
  padding: 12px;
  margin-top: 4px;
}
.laoutsRecipeCard__moreBody[hidden] { display: none; }

.laoutsRecipeCard__moreRow {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.laoutsRecipeCard__moreLab {
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--laouts-muted);
}
.laoutsRecipeCard__select {
  background: var(--laouts-bg-2) !important;
  color: var(--laouts-bone) !important;
  border: 1px solid var(--laouts-hairline-2) !important;
  border-radius: 6px !important;
  font-family: var(--laouts-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  padding: 7px 9px !important;
}
.laoutsRecipeCard__select:focus {
  outline: none !important;
  border-color: var(--laouts-acid) !important;
}

.laoutsRecipeCard__check {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--laouts-font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.04em !important;
  color: var(--laouts-bone-soft) !important;
  cursor: pointer;
}
.laoutsRecipeCard__check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--laouts-hairline-2);
  border-radius: 3px;
  background: var(--laouts-bg-2);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.laoutsRecipeCard__check input[type="checkbox"]:checked {
  background: var(--laouts-acid);
  border-color: var(--laouts-acid);
}
.laoutsRecipeCard__check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 1.5px; left: 4px;
  width: 4px; height: 8px;
  border-right: 1.5px solid var(--laouts-bg);
  border-bottom: 1.5px solid var(--laouts-bg);
  transform: rotate(45deg);
}

/* ══════════════════════════════════════════════════════════════════ */
/*  RECRAFT GRAMMAR · shared primitives                               */
/*                                                                    */
/*  Two-step dark depth, no hairlines, action-card pattern.           */
/*  Used by all engine tool panels for a consistent surface.          */
/*  Color discipline: black + 2 charcoals + white/gray + acid lime.   */
/* ══════════════════════════════════════════════════════════════════ */

body.laouts {
  /** Cool-gray engine palette · black + white + clearly stepped grays.
   *  No warmth, no brown, no neon — pure neutral cool grays so photos
   *  carry all the color in the room. White does every active job. */
  --rc-ground:        #0d0d0f;                /* near-black ground for high contrast */
  --rc-chrome:        #15151a;                /* topbar + tool rail surface */
  --rc-panel:         #26272c;                /* panel backdrop */
  --rc-card:          #3a3b40;                /* card — noticeably lighter so it pops */
  --rc-card-hover:    #45464c;                /* card hover — one more step */
  --rc-card-active:   #3a3b40;                /* same as card; the white outline does the talking */
  --rc-tile:          #54565c;                /* photo tile — lightest gray, most lifted */
  --rc-divider:       rgba(255, 255, 255, 0.08);
  --rc-text:          #ffffff;                /* clean white body text */
  --rc-text-soft:     #c2c4c8;                /* secondary text — cool mid */
  --rc-text-muted:    #8a8c92;                /* muted text */
  --rc-status:        #5dca7e;                /* universal "ready" dot — only color allowed */
  --rc-accent:        #ffffff;                /* WHITE = active state + primary CTA */
  --rc-accent-soft:   rgba(255, 255, 255, 0.18);
  --rc-accent-glow:   rgba(255, 255, 255, 0.30);
  --rc-accent-hover:  #f0f0f0;                /* slightly off-white on CTA hover */
  --rc-accent-bg:     rgba(255, 255, 255, 0.08);
  --rc-accent-ink:    #0d0d0f;                /* text color sitting ON the white pill */
}

/* ENGINE PAGE ONLY · override the warm-dark BRAND tokens to the cool-gray
 * engine palette. Marketing pages don't have #imageGalleryDock, so they
 * keep the warm matcha brand for site-wide identity. */
body.laouts:has(#imageGalleryDock),
body.laouts:has(#wrap.bookSpreadFrame) {
  --laouts-bg:         #0d0d0f;               /* engine ground */
  --laouts-bg-1:       #15151a;               /* engine chrome */
  --laouts-bg-2:       #26272c;               /* engine panel */
  --laouts-bg-3:       #3a3b40;               /* engine card */
  --laouts-bone:       #ffffff;               /* engine text — pure white */
  --laouts-bone-soft:  #c2c4c8;               /* engine secondary text */
  --laouts-muted:      #8a8c92;               /* engine muted text */
  --laouts-subtle:     #5a5c62;
  --laouts-hairline:   rgba(255, 255, 255, 0.06);
  --laouts-hairline-2: rgba(255, 255, 255, 0.12);
  /* --laouts-acid stays as the brand lime so the topbar glyph + look strip
   * keep their tiny brand identity — but most engine surfaces now use
   * --rc-accent (white) for active states + CTAs. */
}

/* Override hardcoded warm-dark backgrounds in engine page surfaces.
 * The brand topbar, look strip, etc. ship with literal rgba(15, 13, 10, …)
 * values that don't follow tokens — replace them on the engine. */
body.laouts:has(#imageGalleryDock) .laoutsBrandTopbar,
body.laouts:has(#wrap.bookSpreadFrame) .laoutsBrandTopbar {
  background: rgba(13, 13, 15, 0.94) !important;
  background-image: none !important;
  border-bottom-color: var(--laouts-hairline) !important;
}
body.laouts:has(#imageGalleryDock) .laoutsLookStrip,
body.laouts:has(#wrap.bookSpreadFrame) .laoutsLookStrip {
  background:
    linear-gradient(rgba(13, 13, 15, 0.92), rgba(13, 13, 15, 0.92)) !important;
  border-bottom-color: var(--laouts-hairline) !important;
}
body.laouts:has(#imageGalleryDock) .laoutsStepper,
body.laouts:has(#wrap.bookSpreadFrame) .laoutsStepper {
  background: rgba(13, 13, 15, 0.94) !important;
  border-bottom-color: var(--laouts-hairline) !important;
}
body.laouts:has(#imageGalleryDock) .laoutsToolRail,
body.laouts:has(#wrap.bookSpreadFrame) .laoutsToolRail {
  background: linear-gradient(90deg, rgba(13, 13, 15, 0.92), rgba(13, 13, 15, 0.62)) !important;
  border-right-color: var(--laouts-hairline) !important;
}
body.laouts:has(#imageGalleryDock) .laoutsToolRail:hover,
body.laouts:has(#imageGalleryDock) .laoutsToolRail:focus-within,
body.laouts:has(#imageGalleryDock) .laoutsToolRail--pinned,
body.laouts:has(#wrap.bookSpreadFrame) .laoutsToolRail:hover,
body.laouts:has(#wrap.bookSpreadFrame) .laoutsToolRail:focus-within,
body.laouts:has(#wrap.bookSpreadFrame) .laoutsToolRail--pinned {
  background: rgba(13, 13, 15, 0.94) !important;
}
/* Brand topbar pill (the "VISION" pulse pill) — make its surface match */
body.laouts:has(#imageGalleryDock) .laoutsBrandTopbar__pill,
body.laouts:has(#wrap.bookSpreadFrame) .laoutsBrandTopbar__pill {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--laouts-hairline-2) !important;
}
/* Pulse widget background */
body.laouts:has(#imageGalleryDock) .laoutsPulse,
body.laouts:has(#wrap.bookSpreadFrame) .laoutsPulse {
  background: rgba(13, 13, 15, 0.94) !important;
}
/* Photos panel and AI Studio panel hard backdrops */
body.laouts:has(#imageGalleryDock) .laoutsPhotos__panel,
body.laouts:has(#wrap.bookSpreadFrame) .laoutsPhotos__panel,
body.laouts:has(#imageGalleryDock) .laoutsAIStudio__panel,
body.laouts:has(#wrap.bookSpreadFrame) .laoutsAIStudio__panel,
body.laouts:has(#imageGalleryDock) .laoutsToolPanel__panel,
body.laouts:has(#wrap.bookSpreadFrame) .laoutsToolPanel__panel,
body.laouts:has(#imageGalleryDock) .laoutsMvz__panel,
body.laouts:has(#wrap.bookSpreadFrame) .laoutsMvz__panel {
  background: var(--rc-panel) !important;
  background-image: none !important;
}
/* Engine workbench background */
body.laouts:has(#imageGalleryDock) .stageWorkArea,
body.laouts:has(#imageGalleryDock) .stageWrap,
body.laouts:has(#imageGalleryDock) .spreadStageView {
  background: var(--rc-ground) !important;
}
body.laouts:has(#imageGalleryDock) .spreadStageView {
  background:
    radial-gradient(60% 70% at 50% 45%, rgba(255, 255, 255, 0.018), transparent 60%),
    var(--rc-ground) !important;
}
/* ──────────────────────── Engine page · cleanup pass ──────────────────────── */
/* Hide right-inspector cards that overlap with Vision / AI Studio territory.
 * The engine doesn't need its own bokeh / color correction / portrait retouch
 * controls because those features are owned by the AI Studio + Vision panels. */
body.laouts:has(#imageGalleryDock) #cardPhotoLook,
body.laouts:has(#imageGalleryDock) #cardPhotoEdit,
body.laouts:has(#imageGalleryDock) #cardColorCorrection,
body.laouts:has(#imageGalleryDock) #cardPortraitFace,
body.laouts:has(#imageGalleryDock) #cardPhotoFinish {
  display: none !important;
}

/* Hide the developer-y hint paragraphs that re-explain things users already
 * know from the labels and field names. */
body.laouts:has(#imageGalleryDock) #cardLayoutTools > .hint,
body.laouts:has(#imageGalleryDock) #cardLayoutTools p.hint {
  display: none !important;
}
/* Specifically the long "Subdivide a selected photo..." note inline with Split */
body.laouts:has(#imageGalleryDock) #cardLayoutTools > .hint:nth-of-type(2),
body.laouts:has(#imageGalleryDock) #cardDocument > p.hint:not(#documentBookSpreadLine) {
  display: none !important;
}

/* Bump readable text sizes inside the right inspector for less squinting */
body.laouts:has(#imageGalleryDock) .sidebar .card,
body.laouts:has(#imageGalleryDock) #rightInspector .card {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}
body.laouts:has(#imageGalleryDock) .sidebar .card .uxLabel,
body.laouts:has(#imageGalleryDock) #rightInspector .card .uxLabel {
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  margin-top: 14px !important;
  margin-bottom: 8px !important;
}
body.laouts:has(#imageGalleryDock) .sidebar .card select,
body.laouts:has(#imageGalleryDock) #rightInspector .card select,
body.laouts:has(#imageGalleryDock) .sidebar .card input[type="text"],
body.laouts:has(#imageGalleryDock) #rightInspector .card input[type="text"] {
  font-size: 13px !important;
  padding: 10px 12px !important;
}
body.laouts:has(#imageGalleryDock) .sidebar .card .btn,
body.laouts:has(#imageGalleryDock) #rightInspector .card .btn {
  font-size: 12.5px !important;
  padding: 9px 14px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
}
body.laouts:has(#imageGalleryDock) .sidebar .card #documentBookSpreadLine,
body.laouts:has(#imageGalleryDock) #rightInspector .card #documentBookSpreadLine {
  font-size: 13px !important;
  color: var(--rc-text-soft) !important;
}

/* Library upload zone — single tighter copy line. */
body.laouts:has(#imageGalleryDock) .libraryUploadZone__head {
  font-size: 15px !important;
}
body.laouts:has(#imageGalleryDock) .libraryUploadZone__sub {
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
}
body.laouts:has(#imageGalleryDock) .libraryUploadLink {
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  text-decoration: underline !important;
}

/* Look strip — drop the third "Or pick from inspiration" link in empty
 * state; one clean line is enough. */
body.laouts:has(#imageGalleryDock) .laoutsLookStrip__ghost {
  display: none !important;
}
body.laouts:has(#imageGalleryDock) .laoutsLookStrip__empty {
  font-size: 13px !important;
}

/* Spread rail label — bigger, friendlier */
body.laouts:has(#imageGalleryDock) .spreadRail__label,
body.laouts:has(#imageGalleryDock) #bookSpreadLabel {
  font-size: 14px !important;
}

/* Pulse widget — bump status text size */
body.laouts:has(#imageGalleryDock) .laoutsPulse__rowLab {
  font-size: 11px !important;
}
body.laouts:has(#imageGalleryDock) .laoutsPulse__rowVal {
  font-size: 13.5px !important;
}

/* ──────────────────────── Kill the gray line between library and canvas ──────────────────────── */
/* The visible vertical step happened because library column used --rc-panel
 * (`#26272c`) while the canvas surround used --rc-ground (`#0d0d0f`). Different
 * tones at the column boundary read as a line. Solve it by giving the library
 * the SAME background as the canvas — the library's contents are already
 * lifted on cards (drop zone, photo tiles, action area) so no visible
 * separation is lost. */
body.laouts:has(#imageGalleryDock) .libraryColumn,
body.laouts:has(#imageGalleryDock) .lightTableStrip {
  background: var(--rc-ground) !important;
  border-right: none !important;
  box-shadow: none !important;
}
/* Right inspector matched too — single ground tone across the workbench */
body.laouts:has(#imageGalleryDock) .sidebar,
body.laouts:has(#imageGalleryDock) #rightInspector {
  background: var(--rc-ground) !important;
  border-left: none !important;
}

/* ──────────────────────── Right inspector · further simplification ──────────────────────── */
/* Hide the View card too (its preview-eye + layout-view toggle is redundant
 * with the F-toggle Focus mode and the existing stage view). */
body.laouts:has(#imageGalleryDock) #cardView {
  display: none !important;
}
/* Show Block & Text only when a block is actually selected (engine adds the
 * .has-selection class on the body when there's a selected block). Otherwise
 * the card sits empty and feels like noise. */
body.laouts:has(#imageGalleryDock):not(.has-block-selection):not(.has-selection) #cardBlockText {
  display: none !important;
}

/* ──────────────────────── Share-for-review · book centered + never cut off ──────────────────────── */

.cepClientCanvasHost,
.cepClientReview__canvasCol {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  height: 100% !important;
}
.cepClientCanvasHost .bookSpreadFrame,
.cepClientCanvasHost #wrap {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  margin: auto !important;
}
.cepClientCanvasHost canvas {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* ──────────────────────── Share-for-review right menu · simplified ──────────────────────── */
/* The reviewer side panel has a lot of helper copy that's redundant with
 * the visible buttons. Trim long paragraphs and lengthy intro text. */
.cepClientReviewMenu .cepReviewIntro,
.cepClientReviewMenu .cepReviewHelpText,
.cepClientReviewMenu .cepClientReviewMenu__intro,
.cepClientReviewMenu p:first-of-type:not(.cepInboxEmpty) {
  /* Hide the wordy intro — buttons + counts speak for themselves */
  display: none !important;
}
.cepClientReviewMenu p {
  font-size: 13.5px;
  line-height: 1.5;
}
.cepClientReviewMenu h2,
.cepClientReviewMenu h3 {
  font-size: 16px !important;
  font-family: var(--laouts-font-serif) !important;
  font-weight: 400 !important;
  font-style: italic !important;
}

/* ──────────────────────── Layouts panel · big-library presentation ──────────────────────── */

.laoutsToolPanel__layoutHead {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.laoutsToolPanel__layoutTotal {
  font-family: var(--laouts-font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--rc-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.012em;
}
.laoutsToolPanel__layoutTotalSub {
  font-family: var(--laouts-font-sans);
  font-size: 11.5px;
  color: var(--rc-text-soft);
  letter-spacing: 0;
  text-transform: none;
}

/* Filter chips with counts */
.laoutsToolPanel__filter em {
  font-style: normal;
  margin-left: 4px;
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  opacity: 0.75;
}
.laoutsToolPanel__filter--active em { opacity: 1; }

/* Grid of mini layout cards — 2 columns of visual previews */
.laoutsToolPanel__layoutGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.laoutsToolPanel__layoutCard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 8px 10px;
  background: var(--rc-card);
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  font-family: var(--laouts-font-sans);
  color: inherit;
}
.laoutsToolPanel__layoutCard:hover {
  background: var(--rc-card-hover);
  border-color: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}
.laoutsToolPanel__layoutCard--active {
  border-color: var(--rc-accent);
  background: var(--rc-card);
  box-shadow: 0 0 0 2px var(--rc-accent-soft);
}
.laoutsToolPanel__layoutMini {
  display: block;
  width: 100%;
  aspect-ratio: 92 / 50;
  border-radius: 6px;
  overflow: hidden;
}
.laoutsToolPanel__layoutMini svg { display: block; width: 100%; height: 100%; }
.laoutsToolPanel__layoutBody {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 0 2px;
}
.laoutsToolPanel__layoutName {
  font-family: var(--laouts-font-serif);
  font-style: italic;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--rc-text);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.laoutsToolPanel__layoutSub {
  font-family: var(--laouts-font-sans);
  font-size: 10.5px;
  color: var(--rc-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.laoutsToolPanel__layoutCard--active .laoutsToolPanel__layoutSub {
  color: var(--rc-accent);
}

/* ──────────────────────── Auto-layout celebration ──────────────────────── */
/* When the user clicks Auto-layout (#libBtnAutoLayout), the button shows a
 * brief "thinking → revealing → done" sequence so the moment feels rewarding
 * instead of silent. JS toggles data-laouts-auto-state attribute. */

body.laouts #libBtnAutoLayout {
  position: relative !important;
  overflow: hidden !important;
}
body.laouts #libBtnAutoLayout[data-laouts-auto-state] {
  pointer-events: none !important;
}
body.laouts #libBtnAutoLayout[data-laouts-auto-state]::before {
  content: attr(data-laouts-auto-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rc-accent);
  color: var(--rc-accent-ink);
  font-family: var(--laouts-font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  animation: laoutsAutoPulse 2.4s ease-in-out;
}
body.laouts #libBtnAutoLayout[data-laouts-auto-state="done"]::before {
  animation: laoutsAutoDone 1.2s ease-out;
}
@keyframes laoutsAutoPulse {
  0%   { background: var(--rc-accent); transform: scale(1); }
  50%  { background: var(--rc-accent-hover); transform: scale(1.02); box-shadow: 0 12px 32px var(--rc-accent-soft); }
  100% { background: var(--rc-accent); transform: scale(1); }
}
@keyframes laoutsAutoDone {
  0%   { background: var(--rc-accent); }
  30%  { background: var(--rc-accent-hover); box-shadow: 0 0 0 6px var(--rc-accent-soft); }
  100% { background: var(--rc-accent); box-shadow: none; }
}

/* Success ripple after auto-layout — adds a subtle expanding ring */
body.laouts #libBtnAutoLayout[data-laouts-auto-state="done"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid var(--rc-accent);
  opacity: 0;
  animation: laoutsAutoRipple 1.2s ease-out;
}
@keyframes laoutsAutoRipple {
  0%   { transform: scale(0.85); opacity: 0.85; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Always-on Next Steps strip — match new palette */
body.laouts:has(#imageGalleryDock) .laoutsNextStepsStrip {
  background: var(--rc-panel) !important;
}

/* ──────────────────────── Library tools (stats bar + density + sticky) ──────────────────────── */

.laoutsLibTools {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 12px;
  background: var(--rc-card);
  border-radius: 10px;
  margin: 0 0 10px 0;
}
.laoutsLibTools__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.laoutsLibTools__row--stats {
  font-family: var(--laouts-font-sans);
  font-size: 12px;
  color: var(--rc-text-soft);
  gap: 8px;
}
.laoutsLibTools__row--issues { gap: 4px; }
.laoutsLibTools__row--filters { justify-content: flex-start; }
.laoutsLibTools__row--tools {
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
}
.laoutsLibTools__row--top {
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
}
.laoutsLibTools__countWrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.laoutsLibTools__filterWrap {
  position: relative;
  flex: 0 0 auto;
}
.laoutsLibTools__filterTrig {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(15, 13, 10, 0.6);
  color: var(--laouts-bone, #f0ebde);
  font-family: var(--laouts-font-sans, "Inter", system-ui, sans-serif);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.laoutsLibTools__filterTrig:hover {
  border-color: var(--laouts-acid, #c8e87b);
  color: var(--laouts-acid, #c8e87b);
}
.laoutsLibTools__filterTrigPre {
  color: var(--laouts-bone-soft, #c9c2b0);
  font-weight: 400;
}
.laoutsLibTools__filterTrigLab {
  font-weight: 600;
  color: var(--laouts-acid, #c8e87b);
}
.laoutsLibTools__filterTrigChev {
  font-size: 10px;
  opacity: 0.7;
  margin-left: 2px;
}
.laoutsLibTools__filterDrop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(28, 24, 18, 0.97);
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  z-index: 90;
  backdrop-filter: blur(8px);
}
.laoutsLibTools__filterOpt {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--laouts-bone-soft, #c9c2b0);
  font-family: var(--laouts-font-sans, "Inter", system-ui, sans-serif);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s ease, color 0.12s ease;
}
.laoutsLibTools__filterOpt:hover {
  background: rgba(200, 232, 123, 0.08);
  color: var(--laouts-bone, #f0ebde);
}
.laoutsLibTools__filterOpt--active {
  background: rgba(200, 232, 123, 0.14);
  color: var(--laouts-acid, #c8e87b);
}
.laoutsLibTools__filterOpt--empty {
  opacity: 0.45;
}
.laoutsLibTools__filterOptLab { flex: 1; }
.laoutsLibTools__filterOptN {
  font-family: var(--laouts-font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--laouts-bone-soft, #c9c2b0);
  font-feature-settings: "tnum";
}
.laoutsLibTools__filterDivider {
  height: 1px;
  background: rgba(148, 163, 184, 0.18);
  margin: 4px 4px;
}
/** Legacy class still used by the count span — keep it inert. */
.laoutsLibTools__stats {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--laouts-font-sans);
  font-size: 12px;
  color: var(--rc-text-soft);
  min-width: 0;
}
.laoutsLibTools__count {
  color: var(--rc-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.laoutsLibTools__sub {
  color: var(--rc-text-soft);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}
.laoutsLibTools__sep { color: var(--rc-text-muted); }

/* Sort group · Date / Name + asc/desc toggle */
.laoutsLibTools__sort {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--rc-tile);
  border-radius: 999px;
  padding: 2px;
  flex-shrink: 0;
  margin-right: 6px;
}
.laoutsLibTools__sortBtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px 0 7px;
  background: transparent;
  border: none;
  color: var(--rc-text-soft);
  border-radius: 999px;
  cursor: pointer;
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.15s ease, color 0.15s ease;
}
.laoutsLibTools__sortBtn:hover { color: var(--rc-text); }
.laoutsLibTools__sortBtn--active {
  background: var(--rc-accent);
  color: var(--rc-accent-ink);
}
.laoutsLibTools__sortLab { line-height: 1; }
.laoutsLibTools__sortDir {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--rc-text-soft);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  transition: background 0.15s ease, color 0.15s ease;
}
.laoutsLibTools__sortDir:hover {
  color: var(--rc-text);
  background: rgba(255,255,255,0.08);
}
.laoutsLibTools__sortDir svg { transition: transform 0.18s ease; }

.laoutsLibTools__density {
  display: inline-flex;
  align-items: center;
  background: var(--rc-tile);
  border-radius: 999px;
  padding: 2px;
  flex-shrink: 0;
}
.laoutsLibTools__densityBtn {
  width: 26px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--rc-text-soft);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.laoutsLibTools__densityBtn:hover { color: var(--rc-text); }
.laoutsLibTools__densityBtn--active {
  background: var(--rc-accent);
  color: var(--rc-accent-ink);
}

/* ──────────────────────── Library filter chips · All / Keepers / Duplicates / Heroes ──────────────────────── */
/* Lives between stats and sort. Pre-culls the gallery non-destructively so
 * users can pull straight from the category they want.                       */
.laoutsLibTools__filters {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  background: var(--rc-tile);
  border-radius: 999px;
  padding: 2px;
  flex-shrink: 0;
}
.laoutsLibTools__filterBtn {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  background: transparent;
  border: none;
  color: var(--rc-text-soft);
  border-radius: 999px;
  cursor: pointer;
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.laoutsLibTools__filterBtn:hover { color: var(--rc-text); }
.laoutsLibTools__filterBtn--active {
  background: var(--rc-accent);
  color: var(--rc-accent-ink);
}
/* "Duplicates" chip when active — uses a softer warning tint so users
 *  notice the gallery is now showing folded-away photos.                    */
.laoutsLibTools__filterBtn[data-filter="duplicates"].laoutsLibTools__filterBtn--active {
  background: #d97a4d;
  color: #1a0d05;
}
/* "Heroes" chip when active — gold tint to imply curated picks. */
.laoutsLibTools__filterBtn[data-filter="heroes"].laoutsLibTools__filterBtn--active {
  background: #d4a957;
  color: #1a1305;
}
/* The "0 dupes" stat: dim until there's actually something to fold. */
.laoutsLibTools__sub--dups { color: var(--rc-text-muted); }

/* Hide vestigial Signature Look strip (decorative only — not wired to
 * auto-layout. Investigated #161, queued for removal). */
.laoutsStyleStrip,
[id^="laoutsStyleStrip"],
[class*="laoutsStyleStrip"] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
 *  PASS 1 · SUBTRACTION
 *  Hides duplicated, dead, or decorative chrome so the photographer
 *  sees only the surfaces that actually do work. No function lost —
 *  every cut here exists in another (better) place.
 * ═══════════════════════════════════════════════════════════════════ */

/* ── Top header cleanup ─────────────────────────────────────── */
/* Build version label is internal info, not a user surface. */
body.laouts .laoutsBrandTopbar__version { display: none !important; }

/* ── Library column cleanup ─────────────────────────────────── */
/* Duplicated "Order book" + "Share for Review" CTAs at top of library
 * — exact same buttons live in the stage bar (#topBarExport and
 * #topBarShareReview). Killing the library duplicates removes a row
 * of competing primary CTAs, leaves BUILD MY BOOK as the unambiguous
 * primary action when you have photos. */
body.laouts .laoutsLibraryActions { display: none !important; }

/* "Photos" heading — the upload zone + library card already make it
 * obvious this column is photos. No label needed. */
body.laouts .libraryTopBar__label,
body.laouts .libraryTopBar__row .libraryTopBar__label { display: none !important; }

/* Tour button — never used, no actual tour content wired in. */
body.laouts #btnStartTour { display: none !important; }

/* Engine's "X selected · Auto layout selected · Clear" row at top of
 * library — replaced by the sticky bar at the bottom of the library
 * which shows the same info (filter-aware count) and the same actions. */
body.laouts #libSelectionBar { display: none !important; }

/* ── Right inspector cleanup ────────────────────────────────── */
/* VIEW card has only two toggles (overlays / outlines). Both are
 * available via Focus mode and don't need their own card. */
body.laouts #cardView { display: none !important; }

/* ── Bottom row cleanup ─────────────────────────────────────── */
/* Old engine page-nav row is replaced by the new floating chevrons
 * (page-flip module). Dead chrome. */
body.laouts #spreadPageNavRow { display: none !important; }

/* Old engine spread nav buttons that lived inline — dead since we
 * have the new chevrons. */
body.laouts #spreadNavPrev,
body.laouts #spreadNavNext { display: none !important; }

/* Straighten toggle is redundant — horizon-fix is always on now. */
body.laouts .laoutsLibTools__horizonBtn,
body.laouts [data-laouts-horizon] { display: none !important; }

/* "Next steps · always here when you need them" bottom strip — gets in
 * the way of the design. Step navigator at top already shows progress.  */
body #laoutsNextStepsStrip,
body .laoutsNextStepsStrip,
body .laoutsFocusNextSteps,
body .laoutsNextStepsSheet { display: none !important; }

/* "Define your signature look" link in the welcome overlay — feature is
 * decorative-only (vestigial) and was already killed from the strip. */
body .laoutsWelcome__quiet[href*="style.html"] { display: none !important; }

/* ─────── Smart Text CTA · floating button above spread ─────── */
.laoutsSmartTextBtn {
  position: fixed;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.20), rgba(139, 92, 246, 0.16));
  border: 1px solid rgba(167, 139, 250, 0.45);
  border-radius: 999px;
  color: #ffffff;
  cursor: pointer;
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.25);
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.laoutsSmartTextBtn:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.32), rgba(139, 92, 246, 0.26));
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(99, 102, 241, 0.40);
}
.laoutsSmartTextBtn--clear {
  background: linear-gradient(135deg, rgba(180, 100, 100, 0.20), rgba(180, 80, 80, 0.16));
  border-color: rgba(220, 130, 130, 0.45);
}
.laoutsSmartTextBtn--clear:hover {
  background: linear-gradient(135deg, rgba(180, 100, 100, 0.32), rgba(180, 80, 80, 0.26));
  box-shadow: 0 8px 22px rgba(220, 80, 80, 0.40);
}

/* ─────── Photo mover · drag photos within / between spreads ─────── */
.laoutsMover__ghost {
  position: fixed;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  pointer-events: none;
  z-index: 9999;
  box-shadow:
    0 0 0 2px #6366f1,
    0 12px 32px rgba(0, 0, 0, 0.45),
    0 0 32px rgba(99, 102, 241, 0.45);
  background: #1a1a1f;
  transform: rotate(-3deg);
  transition: none;
}
.laoutsMover__ghost img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Cursor + canvas signal during active drag. */
body.laoutsMover__active,
body.laoutsMover__active * { cursor: grabbing !important; }
body.laoutsMover__canvas--over #c {
  outline: 3px dashed rgba(99, 102, 241, 0.85);
  outline-offset: -4px;
}
/* Cross-spread filmstrip drop target (SLICE-CROSS-SPREAD-DRAG v1). */
.bookStripItem.laouts-cross-spread-drop-target {
  outline: 2px solid var(--laouts-coral, #F4A384);
  outline-offset: 3px;
  box-shadow:
    0 0 0 4px rgba(244, 163, 132, 0.28),
    0 4px 16px rgba(244, 163, 132, 0.38) !important;
  transform: scale(1.04) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, outline 0.12s ease !important;
}
/* Strip thumbnail drop target highlight (within-spread legacy). */
.bookStripItem.laoutsMover__strip--over {
  outline: 2px solid #fbbf24 !important;
  outline-offset: 1px !important;
  box-shadow:
    0 0 0 4px rgba(251, 191, 36, 0.30),
    0 4px 16px rgba(251, 191, 36, 0.45) !important;
  transform: scale(1.04) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, outline 0.12s ease !important;
}

/* ─────── Spread thumbnail strip · highlight ACTIVE spread ─────── */
/* Default engine styling uses cream/light tones that are invisible on
 * the dark matcha background. Override with brand-accent purple ring
 * so users can clearly see which spread they're on as they navigate. */
body.laouts .bookStripItem--active {
  border-color: #6366f1 !important;
  background: linear-gradient(
    180deg,
    rgba(99, 102, 241, 0.12) 0%,
    rgba(139, 92, 246, 0.08) 100%
  ) !important;
  box-shadow:
    0 0 0 2px #6366f1,
    0 0 0 4px rgba(99, 102, 241, 0.30),
    0 4px 16px rgba(99, 102, 241, 0.35) !important;
}
body.laouts .bookStripItem--active::after {
  background: linear-gradient(
    135deg,
    rgba(167, 139, 250, 0.18) 0%,
    transparent 45%
  ) !important;
}
/* Page number under the active spread also accent-tinted. */
body.laouts .bookStripItem--active .bookStripLabel,
body.laouts .bookStripItem--active .bookStripIndex {
  color: #a78bfa !important;
  font-weight: 700 !important;
}

/* "Lock" / "Locked ✓" toggle on the recipe card AND the layouts tool
 * panel — the toggle stores a flag but nothing actually reads it.
 * Inactive UI that confused Christina. Cut. */
body .laoutsRecipeCard__lock,
body [data-layout-action="lock"],
body .laoutsToolPanel__lock { display: none !important; }
/* ═══════════════════════════════════════════════════════════════════
 *  END PASS 1 · SUBTRACTION
 * ═══════════════════════════════════════════════════════════════════ */

/* ─────── PAGE FLIP · big chevrons + 3D book-page animation ─────── */
/* Two large chevron buttons positioned on either side of the spread
 * canvas. Click them to navigate to prev/next spread with a 3D page-
 * lift animation.                                                   */
/* Chevrons live at viewport edges so they appear in EVERY mode —
 * single spread, focus mode, organize-book overview. Invisible by
 * default; fade in on body hover so they never compete with design. */
.laoutsFlip__chev {
  position: fixed;
  top: 50%;
  transform: translateY(-50%) scale(0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 76px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: background 0.22s ease, transform 0.22s ease,
    color 0.22s ease, opacity 0.32s ease, box-shadow 0.22s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.20);
}
body:hover .laoutsFlip__chev,
.laoutsFlip__chev--peek {
  opacity: 0.55;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}
.laoutsFlip__chev:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.40);
  transform: translateY(-50%) scale(1.06);
}
.laoutsFlip__chev:active {
  transform: translateY(-50%) scale(0.98);
}
/* Position is JS-driven now (anchored to spread canvas bounding rect)
 * so no static left/right values here. */
.laoutsFlip__chev--disabled,
.laoutsFlip__chev:disabled {
  opacity: 0.32;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}
/* Light mode adjustment — when canvas frame is on a light background. */
@media (prefers-color-scheme: light) {
  .laoutsFlip__chev {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.7);
  }
  .laoutsFlip__chev:hover {
    background: rgba(0, 0, 0, 0.10);
    color: #000000;
  }
}

/* The flip overlay — captured canvas image that rotates like a page. */
.laoutsFlip__overlay {
  position: absolute;
  pointer-events: none;
  perspective: 1800px;
  perspective-origin: 50% 50%;
  z-index: 95;
}
.laoutsFlip__page {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  /** Slight depth shadow under the page as it lifts. */
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18));
  will-change: transform, opacity;
}
.laoutsFlip__page img {
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  backface-visibility: hidden;
}
/* NEXT direction: right edge lifts, page rotates from 0 to -180° around
 * its left edge so it folds left like a normal book page turning. */
.laoutsFlip__overlay--next .laoutsFlip__page {
  transform-origin: 0% 50%;
}
.laoutsFlip__overlay--next.laoutsFlip__overlay--anim .laoutsFlip__page {
  animation: laoutsFlipNext 1100ms cubic-bezier(0.42, 0.06, 0.42, 0.98) forwards;
}
@keyframes laoutsFlipNext {
  0%   { transform: rotateY(0deg); }
  45%  { transform: rotateY(-92deg); }
  46%  { opacity: 0; }
  100% { transform: rotateY(-180deg); opacity: 0; }
}
/* PREV direction: left edge lifts, page rotates from 0 to +180° around
 * its right edge so it folds right like flipping back. */
.laoutsFlip__overlay--prev .laoutsFlip__page {
  transform-origin: 100% 50%;
}
.laoutsFlip__overlay--prev.laoutsFlip__overlay--anim .laoutsFlip__page {
  animation: laoutsFlipPrev 1100ms cubic-bezier(0.42, 0.06, 0.42, 0.98) forwards;
}
@keyframes laoutsFlipPrev {
  0%   { transform: rotateY(0deg); }
  45%  { transform: rotateY(92deg); }
  46%  { opacity: 0; }
  100% { transform: rotateY(180deg); opacity: 0; }
}
/* Subtle highlight sweep across the page as it lifts — sells the 3D. */
.laoutsFlip__page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0) 65%,
    transparent 100%
  );
  opacity: 0;
}
.laoutsFlip__overlay--anim .laoutsFlip__page::after {
  animation: laoutsFlipSheen 1100ms ease-out forwards;
}
@keyframes laoutsFlipSheen {
  0%   { opacity: 0;   }
  35%  { opacity: 0.9; }
  100% { opacity: 0;   }
}

/* ─────── BUILD MY BOOK · primary library CTA ─────── */
/* Lives right after the unicorn / magic indicator. The most prominent
 * CTA in the library card — when scanning is done, this is the next
 * action a user takes.                                                 */
.laoutsLibTools__buildBtn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 11px 14px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border: 1px solid rgba(167, 139, 250, 0.55);
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.30),
    0 4px 14px rgba(99, 102, 241, 0.30);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.18s ease;
  margin: 4px 0 0 0;
}
.laoutsLibTools__buildBtn:hover {
  background: linear-gradient(135deg, #7376ff 0%, #9b6ef6 100%);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.40),
    0 6px 18px rgba(99, 102, 241, 0.45);
}
.laoutsLibTools__buildBtn:active {
  transform: translateY(0);
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.40),
    0 2px 8px rgba(99, 102, 241, 0.35);
}
.laoutsLibTools__buildBtnIcon {
  font-size: 14px;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.45));
}
.laoutsLibTools__buildBtnLab {
  flex: 1;
  text-align: left;
}
.laoutsLibTools__buildBtnHint {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}
/** "Working" pulse — a brief visual ack while the book builds. */
.laoutsLibTools__buildBtn--working {
  animation: laoutsBuildPulse 0.9s ease-in-out;
}
@keyframes laoutsBuildPulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px) scale(1.01); }
}

/* ─────── Filter dropdown · "Showing: Keepers ▾" ─────── */
/* The most underrated control in the engine — this is how users skip
 * past dupes/blurry/blinks and just work with their best photos.
 * Made bigger and more prominent so it can't be ignored.            */
.laoutsLibTools__filterMenu {
  position: relative;
  width: 100%;
}
.laoutsLibTools__filterTrigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  background: rgba(99, 102, 241, 0.10);
  border: 1px solid rgba(99, 102, 241, 0.30);
  border-radius: 10px;
  color: var(--rc-text);
  cursor: pointer;
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.18s ease, border-color 0.18s ease,
    box-shadow 0.18s ease, transform 0.12s ease;
}
.laoutsLibTools__filterTrigger:hover {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.50);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.18);
  transform: translateY(-1px);
}
.laoutsLibTools__filterTrigger:active {
  transform: translateY(0);
}
.laoutsLibTools__filterTriggerLab {
  color: var(--rc-text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 600;
}
.laoutsLibTools__filterTriggerVal {
  color: var(--rc-text);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
}
.laoutsLibTools__caret {
  margin-left: auto;
  color: var(--rc-text-soft);
  transition: transform 0.18s ease;
}
.laoutsLibTools.laoutsLibTools--menuOpen .laoutsLibTools__caret {
  transform: rotate(180deg);
}
/* Tint the trigger when in a "review issues" mode so it's obvious. */
.laoutsLibTools[data-filter-mode="duplicates"]   .laoutsLibTools__filterTriggerVal { color: #d97a4d; }
.laoutsLibTools[data-filter-mode="blurry"]       .laoutsLibTools__filterTriggerVal { color: #6ea6c9; }
.laoutsLibTools[data-filter-mode="closed-eyes"]  .laoutsLibTools__filterTriggerVal { color: #c97aa8; }

.laoutsLibTools__filterDrop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--rc-card);
  border: 1px solid var(--rc-line, rgba(255,255,255,0.08));
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  padding: 6px;
  z-index: 100;
}
.laoutsLibTools__filterDrop[hidden] { display: none; }
.laoutsLibTools__filterGroup {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.laoutsLibTools__filterDivLab {
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--rc-text-muted);
  padding: 8px 10px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--rc-line, rgba(255,255,255,0.06));
}
.laoutsLibTools__filterOpt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--rc-text);
  cursor: pointer;
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  font-size: 11.5px;
  text-align: left;
  transition: background 0.12s ease;
}
.laoutsLibTools__filterOpt:hover { background: rgba(255,255,255,0.05); }
.laoutsLibTools__filterOpt--active {
  background: var(--rc-accent);
  color: var(--rc-accent-ink);
}
.laoutsLibTools__filterOpt--active .laoutsLibTools__filterOptHint,
.laoutsLibTools__filterOpt--active .laoutsLibTools__filterOptCnt {
  color: var(--rc-accent-ink);
  opacity: 0.7;
}
.laoutsLibTools__filterOpt--empty {
  opacity: 0.36;
  pointer-events: none;
}
.laoutsLibTools__filterOptLab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  font-weight: 500;
}
.laoutsLibTools__filterOptHint {
  color: var(--rc-text-muted);
  font-weight: 400;
}
.laoutsLibTools__filterOptCnt {
  color: var(--rc-text-muted);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

/* ─────── Issue counters · LEGACY (no longer rendered) ─────── */
.laoutsLibTools__issues {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.laoutsLibTools__issueBtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  background: var(--rc-tile);
  border: none;
  color: var(--rc-text-soft);
  border-radius: 999px;
  cursor: pointer;
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.2s ease;
}
.laoutsLibTools__issueBtn:hover { color: var(--rc-text); }
.laoutsLibTools__issueBtn--empty {
  opacity: 0.32;
  cursor: default;
}
.laoutsLibTools__issueBtn--empty:hover { color: var(--rc-text-soft); }
.laoutsLibTools__issueDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.laoutsLibTools__issueDot--dup  { background: #d97a4d; }
.laoutsLibTools__issueDot--blur { background: #6ea6c9; }
.laoutsLibTools__issueDot--eye  { background: #c97aa8; }
.laoutsLibTools__issueBtn--active {
  background: var(--rc-text);
  color: var(--rc-tile);
}
.laoutsLibTools__issueBtn--active .laoutsLibTools__issueDot {
  background: var(--rc-tile);
}

/* ─────── Horizon "Straighten" toggle ─────── */
.laoutsLibTools__horizonBtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 10px;
  background: var(--rc-tile);
  border: none;
  color: var(--rc-text-soft);
  border-radius: 999px;
  cursor: pointer;
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.laoutsLibTools__horizonBtn:hover { color: var(--rc-text); }
.laoutsLibTools__horizonBtn--active {
  background: var(--rc-accent);
  color: var(--rc-accent-ink);
}

/* ─────── Filter rules: hide tiles by body mode + tile class ─────── */
/* These survive the engine's innerHTML re-renders because they're
 * CSS, not inline styles — JS just keeps the tile classes in sync.   */

/* Default + "keepers" mode: hide duplicates, blurry, AND closed eyes. */
body[data-laouts-lib-filter="keepers"] #userGallery .galleryItem.laouts-tile--duplicate,
body[data-laouts-lib-filter="keepers"] #userGallery .galleryItem.laouts-tile--blurry,
body[data-laouts-lib-filter="keepers"] #userGallery .galleryItem.laouts-tile--closed-eyes {
  display: none !important;
}
/* "heroes" mode: show ONLY hero-tier photos (which already passed all filters). */
body[data-laouts-lib-filter="heroes"] #userGallery .galleryItem:not(.laouts-tile--hero) {
  display: none !important;
}
/* "duplicates" mode: show ONLY duplicates. */
body[data-laouts-lib-filter="duplicates"] #userGallery .galleryItem:not(.laouts-tile--duplicate) {
  display: none !important;
}
/* "blurry" mode: show ONLY blurry photos. */
body[data-laouts-lib-filter="blurry"] #userGallery .galleryItem:not(.laouts-tile--blurry) {
  display: none !important;
}
/* "closed-eyes" mode: show ONLY photos where someone's eyes are closed. */
body[data-laouts-lib-filter="closed-eyes"] #userGallery .galleryItem:not(.laouts-tile--closed-eyes) {
  display: none !important;
}
/* "all" mode: no rule needed — every tile shows. */

/* ─────── Horizon-correction transform on placed cells ─────── */
/* Engine renders photos as <img> inside .cell elements. The horizon module
 * sets a CSS variable + class on the cell, and we compose a rotation into
 * the existing transform. The slight scale-up keeps rotated rect within
 * the cell rect (no diagonal blank corners).                              */
body.laouts-horizon-active .cell.laouts-horizon-on > img {
  transform-origin: 50% 50%;
  transform: rotate(var(--laouts-horizon-rot, 0deg)) scale(var(--laouts-horizon-scale, 1));
}

/* ─────── PHOTO ADJUST · per-photo inspector card ─────── */
/* Lives in #rightInspector. Auto-shown when a photo block is selected.
 * Subtle pop-in animation on appearance so user notices it.            */
#cardLaoutsPhotoAdjust { display: block !important; }
#cardLaoutsPhotoAdjust[hidden] { display: none !important; }
#cardLaoutsPhotoAdjust:not([hidden]) {
  animation: laoutsAdjPop 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes laoutsAdjPop {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.985); }
  60%  { opacity: 1; transform: translateY(1px) scale(1.005); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Override the engine's "dim untracked card" effect: this card is always
 * fully bright when shown, since it's only ever shown when relevant.   */
body[data-insp-ctx] #cardLaoutsPhotoAdjust.card.card--insp-dim {
  opacity: 1 !important;
  border-color: var(--rc-line, rgba(255,255,255,0.12)) !important;
  background: var(--rc-card) !important;
}
.laoutsAdj { display: block; }
.laoutsAdj .title {
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--rc-text-soft);
  text-transform: uppercase;
  margin: 0 0 8px 0;
}
.laoutsAdj__hint {
  margin: 0 0 12px 0;
  font-size: 11.5px;
  color: var(--rc-text-muted);
  line-height: 1.45;
}
.laoutsAdj__hintSub {
  margin: 4px 0 0 0;
  font-size: 11px;
  color: var(--rc-text-muted);
  line-height: 1.4;
}
/* CHRISTINA 2026-05-07 · launch-day fix · Photo Adjust rows
   were "hiding and acting strange" — the auto-detected pill was
   visually overlapping the reset icon (which itself had become an
   indistinct hairline gray dot, same regression as the sort arrow),
   and the slider/number/unit were collapsing because nothing
   guaranteed visibility past the engine's class-system display rules.
   Hardened all three: explicit display, no-wrap layout, coral-bordered
   reset button matching the brand. */
.laoutsAdj__group {
  display: block !important;
  margin: 0 0 14px 0;
  padding: 10px 0 0 0;
  border-top: 1px solid var(--rc-line, rgba(255,255,255,0.06));
}
.laoutsAdj__group:first-of-type { border-top: 0; padding-top: 0; }
.laoutsAdj__row {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: nowrap;
  min-height: 26px;
}
.laoutsAdj__lab {
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--rc-text);
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}
.laoutsAdj__detected {
  display: inline-flex !important;
  align-items: center;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--laouts-coral, #e8a585);
  font-variant-numeric: tabular-nums;
  background: rgba(232, 165, 133, 0.14);
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
}
.laoutsAdj__detected--zero {
  color: var(--rc-text-muted);
  background: var(--rc-tile);
}
.laoutsAdj__resetBtn {
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(232, 165, 133, 0.10) !important;
  border: 1px solid rgba(232, 165, 133, 0.55) !important;
  color: var(--laouts-coral, #e8a585) !important;
  border-radius: 999px !important;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
  padding: 0 !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.laoutsAdj__resetBtn:hover {
  background: rgba(232, 165, 133, 0.22) !important;
  color: #fff !important;
  border-color: var(--laouts-coral, #e8a585) !important;
}
.laoutsAdj__resetBtn:focus-visible {
  outline: 2px solid var(--laouts-coral, #e8a585);
  outline-offset: 2px;
}
.laoutsAdj__sliderRow {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.laoutsAdj__sliderRow input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
}
.laoutsAdj__num {
  width: 54px;
  height: 26px;
  padding: 0 6px;
  background: var(--rc-tile);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--rc-text);
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  flex-shrink: 0;
}
.laoutsAdj__num:focus {
  outline: none;
  border-color: var(--rc-accent);
}
.laoutsAdj__unit {
  color: var(--rc-text-muted);
  font-size: 11px;
  width: 14px;
  flex-shrink: 0;
}
/* Force the whole Photo Adjust card visible past any engine class
   system that might collapse it (the regression vector that hid
   it once before — task #149). */
#cardLaoutsPhotoAdjust .laoutsAdj__group,
#cardLaoutsPhotoAdjust .laoutsAdj__row,
#cardLaoutsPhotoAdjust .laoutsAdj__sliderRow {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Slider sizing override — beat the inspector-wide
   `aside#rightInspector .card input[type="text"] { width:100% !important }`
   rule (chrome.css ~3313) which was claiming 100% of the slider row for
   the tiny value display, leaving the actual <input type="range"> with
   zero width and therefore un-grabbable. Restores Horizon/Zoom drag.
   Also pins pointer-events:auto so nothing upstream can mute it. */
body.laouts aside#rightInspector .card .laoutsAdj__sliderRow input[type="range"],
body.laouts .sidebar#rightInspector .card .laoutsAdj__sliderRow input[type="range"],
#cardLaoutsPhotoAdjust .laoutsAdj__sliderRow input[type="range"] {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 80px !important;
  height: 24px !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 2;
}
body.laouts aside#rightInspector .card .laoutsAdj__sliderRow input.laoutsAdj__num,
body.laouts .sidebar#rightInspector .card .laoutsAdj__sliderRow input.laoutsAdj__num,
#cardLaoutsPhotoAdjust .laoutsAdj__sliderRow input.laoutsAdj__num {
  width: 54px !important;
  height: 26px !important;
  flex: 0 0 54px !important;
  padding: 0 6px !important;
}

/* Pan crosshair pad */
.laoutsAdj__panPad {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--rc-tile);
  border-radius: 8px;
  cursor: crosshair;
  overflow: hidden;
  margin: 4px 0 6px 0;
  touch-action: none;
}
.laoutsAdj__panGrid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,0.10) 1px, transparent 1px),
    linear-gradient(to right,  rgba(255,255,255,0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.10) 1px, transparent 1px);
  background-position: 33.33% 0, 66.66% 0, 0 33.33%, 0 66.66%;
  background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
  background-repeat: no-repeat;
}
.laoutsAdj__panDot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--rc-accent);
  border: 2px solid var(--rc-card);
  box-shadow: 0 0 0 1px var(--rc-accent);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: left 0.08s ease, top 0.08s ease;
}
.laoutsAdj__panLabels {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--rc-text-muted);
  font-variant-numeric: tabular-nums;
}
.laoutsAdj__toggleLabel {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--rc-text);
}
.laoutsAdj__toggleLabel input { accent-color: var(--rc-accent); }

.laoutsAdj__autoInfo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 5px 10px;
  font-size: 10.5px;
  color: var(--rc-accent);
  background: color-mix(in srgb, var(--rc-accent) 10%, transparent);
  border-radius: 999px;
}
.laoutsAdj__autoInfo[hidden] { display: none; }
.laoutsAdj__autoDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rc-accent);
}

/* ─────── Magic indicator · inline pill in the library card ─────── */
/* Lives right under the filter dropdown so the user sees progress in
 * context. Compact one-row layout with a unicorn and a sparkle.      */
.laoutsMagic {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: linear-gradient(135deg,
    rgba(99, 102, 241, 0.10) 0%,
    rgba(236, 72, 153, 0.08) 100%);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 10px;
  margin: 4px 0 0 0;
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  color: var(--rc-text);
  pointer-events: none;
  user-select: none;
  animation: laoutsMagicEnter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.laoutsMagic[hidden] { display: none !important; }
@keyframes laoutsMagicEnter {
  0%   { opacity: 0; transform: translateY(-4px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.laoutsMagic__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}
.laoutsMagic__unicorn {
  font-size: 26px;
  line-height: 1;
  display: inline-block;
  transform-origin: 50% 60%;
  /** Soft bobble — feels alive, not seizure-y. */
  animation: laoutsMagicBob 2.4s ease-in-out infinite;
  filter: drop-shadow(0 1px 3px rgba(99, 102, 241, 0.5));
}
@keyframes laoutsMagicBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-2px) rotate(3deg); }
}
.laoutsMagic__sparkle {
  position: absolute;
  top: -3px;
  right: -3px;
  font-size: 10px;
  color: #fbbf24;
  animation: laoutsMagicTwinkle 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6));
}
@keyframes laoutsMagicTwinkle {
  0%, 100% { opacity: 1;   transform: scale(1)    rotate(0deg);   }
  50%      { opacity: 0.4; transform: scale(0.6)  rotate(180deg); }
}
.laoutsMagic__body {
  flex: 1;
  min-width: 0;
}
.laoutsMagic__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.laoutsMagic__phase {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--rc-text);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.laoutsMagic__count {
  font-size: 10px;
  font-weight: 500;
  color: var(--rc-text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.laoutsMagic__bar {
  height: 2.5px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  overflow: hidden;
}
.laoutsMagic__fill {
  height: 100%;
  width: 4%;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  background-size: 200% 100%;
  animation: laoutsMagicShimmer 1.4s linear infinite;
}
@keyframes laoutsMagicShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
/** "Done" state — pretty fade out. */
.laoutsMagic--done {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.08) 100%);
  border-color: rgba(16, 185, 129, 0.35);
  animation: laoutsMagicExit 2.4s ease forwards;
  position: relative;
}

/* ─────── Magical celebration · ring pulse + sparkles ─────── */
/* When the unicorn finishes scanning, the inline pill itself springs
 * up bouncily, a soft golden halo ring expands outward across the
 * library card, and a handful of sparkle stars drift up and fade.
 * Premium, on-brand, photographer-friendly. No paper rectangles.     */
.laoutsMagic--celebrating .laoutsMagic__unicorn {
  animation: laoutsMagicSpring 1.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes laoutsMagicSpring {
  0%   { transform: scale(1)    rotate(0deg); }
  35%  { transform: scale(1.25) rotate(-6deg); }
  65%  { transform: scale(1.08) rotate(4deg); }
  100% { transform: scale(1)    rotate(0deg); }
}

.laoutsCelebration {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  overflow: visible;
}
/* Halo ripple — gentle, slow, accessible. No flash, no seizure risk.   */
.laoutsCelebration__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  border: 1.5px solid rgba(251, 191, 36, 0.32);
  box-shadow:
    0 0 16px rgba(251, 191, 36, 0.18),
    inset 0 0 16px rgba(251, 191, 36, 0.10);
  opacity: 0;
  animation: laoutsCelebRing 2.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes laoutsCelebRing {
  0%   { opacity: 0;    transform: scale(0.5); }
  30%  { opacity: 0.45; transform: scale(1.4); }
  100% { opacity: 0;    transform: scale(4.5); }
}

/* Drifting sparkle stars — a few only, hand-tuned. */
.laoutsCelebration__sparkle {
  position: absolute;
  display: inline-block;
  color: #fbbf24;
  text-shadow:
    0 0 8px rgba(251, 191, 36, 0.6),
    0 0 16px rgba(251, 191, 36, 0.35);
  pointer-events: none;
  opacity: 0;
  transform: translate(0, 0) rotate(0deg) scale(0.5);
  animation-name: laoutsCelebSparkle;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}
@keyframes laoutsCelebSparkle {
  0%   { opacity: 0;
         transform: translate(0, 0) rotate(0deg) scale(0.4); }
  20%  { opacity: 1;
         transform: translate(calc(var(--sp-drift, 0) * 0.3), calc(var(--sp-rise, -100px) * 0.25))
                    rotate(calc(var(--sp-rot, 0deg) * 0.4)) scale(1.1); }
  60%  { opacity: 0.9;
         transform: translate(calc(var(--sp-drift, 0) * 0.7), calc(var(--sp-rise, -100px) * 0.7))
                    rotate(calc(var(--sp-rot, 0deg) * 0.7)) scale(1); }
  100% { opacity: 0;
         transform: translate(var(--sp-drift, 0), var(--sp-rise, -100px))
                    rotate(var(--sp-rot, 0deg)) scale(0.8); }
}
.laoutsMagic--done .laoutsMagic__fill {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
  animation: none;
}
.laoutsMagic--done .laoutsMagic__unicorn,
.laoutsMagic--done .laoutsMagic__sparkle { animation: none; }
@keyframes laoutsMagicExit {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  60%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-2px) scale(0.98); max-height: 0; padding: 0; margin: 0; border-width: 0; }
}

/* ─────── Magic overlay (default) · full-screen dim + center card ─────── */
.laoutsMagicOverlay {
  position: fixed;
  inset: 0;
  z-index: 100002;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.laoutsMagicOverlay[hidden] {
  display: none !important;
}
.laoutsMagicBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 14, 22, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}
.laoutsMagic--center {
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: stretch;
  width: min(520px, calc(100vw - 48px));
  min-width: min(480px, calc(100vw - 48px));
  max-width: 540px;
  margin: 0 24px;
  padding: 32px;
  pointer-events: auto;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(99, 102, 241, 0.22);
}
.laoutsMagic--center .laoutsMagic__icon {
  align-self: center;
  margin-bottom: 14px;
  width: 56px;
  height: 56px;
}
.laoutsMagic--center .laoutsMagic__unicorn {
  font-size: 40px;
  line-height: 1;
}
.laoutsMagic__mainTitle {
  margin: 0 0 10px 0;
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--rc-text, #f1f5f9);
  letter-spacing: -0.02em;
}
.laoutsMagic--center .laoutsMagic__phaseRow {
  text-align: center;
  margin-bottom: 20px;
}
.laoutsMagic--center .laoutsMagic__phase {
  font-size: 14px;
  font-weight: 500;
  white-space: normal;
  text-align: center;
  color: var(--rc-text-muted, rgba(148, 163, 184, 0.95));
}
.laoutsMagic__statGrid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 20px 0;
}
.laoutsMagic__statRow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.laoutsMagic__statRow:last-of-type {
  border-bottom: none;
}
.laoutsMagic__statLab {
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--rc-text, #f1f5f9);
  line-height: 1.2;
}
.laoutsMagic__statNum {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--rc-text, #f8fafc);
}
.laoutsMagic__barRow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.laoutsMagic--center .laoutsMagic__bar {
  flex: 1;
  height: 6px;
}
.laoutsMagic__pct {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rc-text-muted);
  min-width: 2.5rem;
  text-align: right;
}

/* Stable cull summary · library column (Piece 1)
 *
 * Cohesion: routes through --laouts-font-sans / --laouts-font-mono so the
 * cull panel and right inspector share a single source of truth for type.
 * Any future font change propagates to both sides. */
.laoutsCullPanel {
  position: relative;
  z-index: 100050;
  margin: 0 10px 10px 10px;
  padding: 24px 20px 20px;
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.94) 0%, rgba(15, 23, 42, 0.97) 100%);
  border: 1px solid rgba(99, 102, 241, 0.25);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  font-family: var(--laouts-font-sans, "Inter", system-ui, sans-serif);
  color: var(--rc-text, #e2e8f0);
}
.laoutsCullPanel[hidden] {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
 * CURATE HERO BAND · full-width, sits above the workspace columns.
 * Replaces the old sidebar cull widget. Christina's spec: no tiny
 * text (everything 13px+), surface AI work as the hero, single
 * primary CTA, beautiful editorial typography in Fraunces.
 * ───────────────────────────────────────────────────────────────── */
.laoutsCullPanel--hero {
  display: block;
  margin: 0 0 18px 0;
  padding: 28px 32px 26px;
  border-radius: 0 0 18px 18px;
  background: #0f0d0a;
  background-image:
    radial-gradient(60% 35% at 50% 0%, rgba(200, 232, 123, 0.06), transparent 60%),
    radial-gradient(40% 25% at 18% 30%, rgba(200, 232, 123, 0.04), transparent 70%);
  border: 1px solid #2a2418;
  border-top: none;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  color: #f0ebde;
  font-family: var(--laouts-font-sans, "Inter", system-ui, sans-serif);
}
.laoutsCullPanel--hero[hidden] { display: none !important; }
.laoutsCurateHero__state { display: block; }
.laoutsCurateHero__state[hidden] { display: none !important; }

/* Lab strip — small uppercase status label at the top */
.laoutsCurateHero__lab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--laouts-font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c8e87b;
  margin-bottom: 14px;
}
.laoutsCurateHero__labDot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #c8e87b;
  box-shadow: 0 0 8px #c8e87b;
}
.laoutsCurateHero__labSep {
  color: #5a5447;
  font-weight: 400;
}
.laoutsCurateHero__labMuted {
  color: #8a8273;
  letter-spacing: 0.08em;
}
.laoutsCurateHero__dismiss {
  margin-left: auto;
  background: transparent;
  border: 1px solid #3a3325;
  color: #c9c2b0;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}
.laoutsCurateHero__dismiss:hover {
  border-color: #c9c2b0;
  color: #f0ebde;
}

/* Top row: editorial copy on the left, CTA stack on the right */
.laoutsCurateHero__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 32px;
  align-items: start;
}
.laoutsCurateHero__copy { min-width: 0; }
.laoutsCurateHero__title {
  font-family: var(--laouts-font-serif, "Fraunces", Georgia, serif);
  font-weight: 300;
  font-size: 38px;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: #f0ebde;
  margin: 0 0 12px;
}
.laoutsCurateHero__titleEm {
  font-style: italic;
  color: #c8e87b;
}
.laoutsCurateHero__sub {
  font-size: 15px;
  line-height: 1.55;
  color: #c9c2b0;
  max-width: 560px;
  margin: 0;
}

/* CTA stack */
.laoutsCurateHero__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: center;
}
.laoutsCurateHero__primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 18px 22px;
  background: #c8e87b;
  color: #0f0d0a;
  border: 1px solid #c8e87b;
  border-radius: 14px;
  font-family: var(--laouts-font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.12s ease;
}
.laoutsCurateHero__primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.laoutsCurateHero__primary:active { transform: translateY(0); }
.laoutsCurateHero__arrow {
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 0;
}
.laoutsCurateHero__secondaryRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.laoutsCurateHero__secondary {
  flex: 1;
  padding: 13px 14px;
  background: transparent;
  color: #c9c2b0;
  border: 1px solid #3a3325;
  border-radius: 12px;
  font-family: var(--laouts-font-sans, "Inter", system-ui, sans-serif);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.laoutsCurateHero__secondary:hover {
  border-color: #c8e87b;
  color: #f0ebde;
}

/* Stat tiles row · 5 across at full width */
.laoutsCurateHero__tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 22px;
}
.laoutsCurateHero__tile {
  position: relative;
  overflow: hidden;
  background: #15120e;
  border: 1px solid #2a2418;
  border-radius: 14px;
  padding: 18px 18px 16px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.laoutsCurateHero__tile:hover {
  border-color: #3a3325;
  background: #1c1812;
  transform: translateY(-1px);
}
.laoutsCurateHero__tile--good::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #c8e87b;
}
.laoutsCurateHero__tileNum {
  display: block;
  font-family: var(--laouts-font-serif, "Fraunces", Georgia, serif);
  font-weight: 300;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #f0ebde;
  margin-bottom: 8px;
}
.laoutsCurateHero__tileLab {
  display: block;
  font-family: var(--laouts-font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c8e87b;
}
.laoutsCurateHero__tile--warn .laoutsCurateHero__tileLab {
  color: #d4b467;
}
.laoutsCurateHero__tileSub {
  display: block;
  font-size: 13px;
  color: #8a8273;
  margin-top: 3px;
}

/* Wow strip · the brag line under the tiles */
.laoutsCurateHero__wow {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 13px 16px;
  background: #15120e;
  border: 1px solid #2a2418;
  border-radius: 12px;
  font-size: 13px;
  color: #c9c2b0;
}
.laoutsCurateHero__wowDot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #c8e87b;
  box-shadow: 0 0 6px #c8e87b;
  flex-shrink: 0;
}
.laoutsCurateHero__wowText strong {
  color: #f0ebde;
  font-family: var(--laouts-font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 13px;
  font-weight: 500;
}
.laoutsCurateHero__wowText em {
  font-style: normal;
  color: #c9c2b0;
}
.laoutsCurateHero__wowSep {
  color: #3a3325;
}

.laoutsCurateHero__helper {
  margin-top: 12px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: #c9c2b0;
  background: rgba(200, 232, 123, 0.06);
  border-left: 2px solid rgba(200, 232, 123, 0.4);
  border-radius: 0 6px 6px 0;
}
.laoutsCurateHero__helper [data-cull-leveled-helper-n] {
  color: #c8e87b;
  font-family: var(--laouts-font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-weight: 600;
}

/* Building state · rare, only during an active build */
.laoutsCurateHero__state--building {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
}
.laoutsCurateHero__state--building[hidden] { display: none !important; }
.laoutsCurateHero__buildSpin {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border: 2px solid rgba(200, 232, 123, 0.28);
  border-top-color: #c8e87b;
  border-radius: 50%;
  animation: laoutsCullSpin 0.8s linear infinite;
}
.laoutsCurateHero__buildText {
  color: #c8e87b;
  font-family: var(--laouts-font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 14px;
  letter-spacing: 0.06em;
}

/* Responsive · stack the columns at narrow widths */
@media (max-width: 960px) {
  .laoutsCullPanel--hero { padding: 22px 20px 20px; }
  .laoutsCurateHero__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .laoutsCurateHero__title { font-size: 30px; }
  .laoutsCurateHero__tiles { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .laoutsCurateHero__tiles { grid-template-columns: repeat(2, 1fr); }
  .laoutsCurateHero__title { font-size: 26px; }
}
.laoutsCullPanel__welcome,
.laoutsCullPanel__ready {
  margin: -4px 0 4px 0;
}
.laoutsCullPanel__welcomeTitle {
  font-family: var(--laouts-font-sans, "Inter", system-ui, sans-serif);
  font-size: 17px;
  font-weight: 650;
  margin-bottom: 8px;
}
.laoutsCullPanel__welcomeBody {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(226, 232, 240, 0.88);
  margin-bottom: 16px;
  max-width: 44ch;
}
.laoutsCullPanel__welcomeActions {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: stretch;
}
.laoutsCullPanel__welcomeActions .laoutsCullPanel__primaryBtn,
.laoutsCullPanel__welcomeActions .laoutsCullPanel__ghostBtn {
  width: 100%;
  text-align: center;
}
.laoutsCullPanel__textBtn {
  font-family: var(--laouts-font-sans, "Inter", system-ui, sans-serif);
  font-size: 13px;
  background: none;
  border: none;
  padding: 6px 0;
  margin: 0;
  color: var(--laouts-bone-soft, rgba(226, 232, 240, 0.75));
  text-decoration: underline;
  cursor: pointer;
  text-align: center;
  align-self: center;
}
.laoutsCullPanel__textBtn:hover {
  color: var(--laouts-acid, #c8e87b);
}
.laoutsCullPanel__optin {
  margin: -4px 0 4px 0;
}
.laoutsCullPanel__optinTitle {
  font-family: var(--laouts-font-sans, "Inter", system-ui, sans-serif);
  font-size: 17px;
  font-weight: 650;
  margin-bottom: 8px;
}
.laoutsCullPanel__optinBody {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(226, 232, 240, 0.88);
  margin-bottom: 16px;
  max-width: 42ch;
}
.laoutsCullPanel__optinActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.laoutsCullPanel__primaryBtn {
  font-family: var(--laouts-font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--laouts-acid, #c8e87b);
  background: var(--laouts-acid, #c8e87b);
  color: var(--laouts-bg, #0f172a);
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.12s ease;
}
.laoutsCullPanel__primaryBtn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.laoutsCullPanel__ghostBtn {
  font-family: var(--laouts-font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: transparent;
  color: rgba(226, 232, 240, 0.9);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.laoutsCullPanel__ghostBtn:hover {
  border-color: rgba(200, 232, 123, 0.5);
  color: var(--laouts-acid, #c8e87b);
}
.laoutsCullPanel__textBtn {
  background: none;
  border: none;
  padding: 8px 4px;
  font-family: var(--laouts-font-sans, "Inter", system-ui, sans-serif);
  font-size: 12.5px;
  color: var(--laouts-bone-soft, #c9c2b0);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  align-self: center;
  transition: color 0.15s ease;
}
.laoutsCullPanel__textBtn:hover {
  color: var(--laouts-bone, #f0ebde);
}
.laoutsCullPanel__helper {
  margin: 8px 0 0;
  padding: 8px 10px;
  font-family: var(--laouts-font-sans, "Inter", system-ui, sans-serif);
  font-size: 12px;
  line-height: 1.5;
  color: var(--laouts-bone-soft, #c9c2b0);
  background: rgba(200, 232, 123, 0.06);
  border-left: 2px solid rgba(200, 232, 123, 0.4);
  border-radius: 0 6px 6px 0;
}
.laoutsCullPanel__helper [data-cull-leveled-helper-n] {
  color: var(--laouts-acid, #c8e87b);
  font-family: var(--laouts-font-mono, ui-monospace, monospace);
  font-feature-settings: "tnum";
  font-weight: 600;
}
.laoutsCullPanel__building {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  margin: 4px 0;
  background: rgba(200, 232, 123, 0.08);
  border-radius: 12px;
  border: 1px solid rgba(200, 232, 123, 0.22);
}
.laoutsCullPanel__buildingSpin {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 2px solid rgba(200, 232, 123, 0.28);
  border-top-color: var(--laouts-acid, #c8e87b);
  border-radius: 50%;
  animation: laoutsCullSpin 0.8s linear infinite;
}
.laoutsCullPanel__buildingText {
  color: var(--laouts-acid, #c8e87b);
  font-family: var(--laouts-font-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.06em;
}
@keyframes laoutsCullSpin {
  to { transform: rotate(360deg); }
}
/** Hide sticky-bar Build button while welcome card owns the CTA. */
.laoutsLibSticky__build[data-welcome-owns-build="1"] {
  display: none !important;
}
.laoutsCullPanel__main {
  margin: 0;
}
.laoutsCullPanel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.laoutsCullPanel__titleRow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.laoutsCullPanel__title {
  font-family: var(--laouts-font-sans, "Inter", system-ui, sans-serif);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--rc-text, #f1f5f9);
}
.laoutsCullPanel__info {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--rc-text-muted, #94a3b8);
  font-size: 13px;
  line-height: 1;
  cursor: help;
}
.laoutsCullPanel__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.laoutsCullPanel__linkBtn {
  margin: 0;
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: #818cf8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.laoutsCullPanel__linkBtn:hover {
  color: #a5b4fc;
}
.laoutsCullPanel__x {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--rc-text-muted, #94a3b8);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.laoutsCullPanel__x:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}
.laoutsCullPanel__sectionWrap {
  margin: 6px 0 10px 0;
}
.laoutsCullPanel__sectionToggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: background 0.15s ease;
}
.laoutsCullPanel__sectionToggle:hover {
  background: rgba(255, 255, 255, 0.08);
}
.laoutsCullPanel__sectionToggle[aria-expanded="false"] .laoutsCullPanel__chev {
  transform: rotate(-90deg);
}
.laoutsCullPanel__section {
  /** Matches `.card .title` in the right inspector — mono + uppercase +
   *  accent color so the two sides of the engine speak the same visual
   *  language. Bumped from 11px to 12px for readability. */
  font-family: var(--laouts-font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rc-accent, #c084fc);
}
.laoutsCullPanel__chev {
  flex-shrink: 0;
  font-size: 10px;
  opacity: 0.75;
  transition: transform 0.2s ease;
}
.laoutsCullPanel__rows[hidden] {
  display: none !important;
}
.laoutsCullPanel__rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.laoutsCullPanel__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px 10px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.laoutsCullPanel__row:hover:not(.laoutsCullPanel__row--static) {
  background: rgba(99, 102, 241, 0.14);
}
.laoutsCullPanel__row--static {
  cursor: default;
  opacity: 0.92;
}
.laoutsCullPanel__row--child {
  padding-left: 22px;
}
.laoutsCullPanel__subDash {
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: rgba(148, 163, 184, 0.45);
  flex-shrink: 0;
}
.laoutsCullPanel__ico {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  width: 1.4em;
  text-align: center;
}
.laoutsCullPanel__lab {
  flex: 1;
  min-width: 0;
  font-family: var(--laouts-font-sans, "Inter", system-ui, sans-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--rc-text, #e2e8f0);
}
.laoutsCullPanel__num {
  font-family: var(--laouts-font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 2rem;
  text-align: right;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
  color: rgba(226, 232, 240, 0.85);
}
.laoutsCullPanel__row[data-cull-filter="all"] .laoutsCullPanel__num {
  background: rgba(99, 102, 241, 0.2);
  color: rgba(199, 210, 254, 0.95);
}
.laoutsCullPanel__row[data-cull-filter="keepers"] .laoutsCullPanel__num {
  background: rgba(52, 211, 153, 0.18);
  color: rgba(167, 243, 208, 0.95);
}
.laoutsCullPanel__row[data-cull-filter="blurry"] .laoutsCullPanel__num,
.laoutsCullPanel__row[data-cull-filter="closed-eyes"] .laoutsCullPanel__num {
  background: rgba(56, 189, 248, 0.14);
  color: rgba(186, 230, 253, 0.88);
}
.laoutsCullPanel__row[data-cull-filter="duplicates"] .laoutsCullPanel__num {
  background: rgba(251, 191, 36, 0.16);
  color: rgba(254, 243, 199, 0.9);
}
.laoutsCullPanel__row--static .laoutsCullPanel__num {
  background: rgba(244, 114, 182, 0.12);
  color: rgba(251, 207, 232, 0.85);
}

/* BUILD MY BOOK · first-time reveal (payoff after culling) */
.laoutsLibSticky__build--reveal {
  animation: laoutsBuildReveal 600ms cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
  transform-origin: center center;
  filter:
    drop-shadow(0 0 20px rgba(139, 92, 246, 0.65))
    drop-shadow(0 0 36px rgba(99, 102, 241, 0.4));
}
@keyframes laoutsBuildReveal {
  0% {
    transform: scale(0.7);
    opacity: 0.72;
  }
  55% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.laoutsLibSticky__inner {
  position: relative;
}
.laoutsBuildSparkle {
  position: absolute;
  left: 50%;
  bottom: 45%;
  font-size: 11px;
  color: #c4b5fd;
  pointer-events: none;
  opacity: 0;
  text-shadow: 0 0 10px rgba(167, 139, 250, 0.85);
  animation: laoutsBuildSparkleFloat 800ms ease-out forwards;
  animation-delay: var(--sp-delay, 0ms);
}
@keyframes laoutsBuildSparkleFloat {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.45); }
  22%  { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--sp-drift, 0px)), var(--sp-rise, -90px)) scale(0.75) rotate(22deg);
  }
}

/* BUILD MY BOOK · overwrite / append modal */
.laoutsBookBuildModal {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.laoutsBookBuildModal[hidden] {
  display: none !important;
}
.laoutsBookBuildModal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 18, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.laoutsBookBuildModal__card {
  position: relative;
  z-index: 1;
  max-width: 420px;
  width: 100%;
  border-radius: 16px;
  padding: 26px 24px 22px;
  background: linear-gradient(165deg, rgba(30, 34, 48, 0.98) 0%, rgba(22, 24, 32, 0.98) 100%);
  border: 1px solid rgba(99, 102, 241, 0.25);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
  color: #e2e8f0;
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
}
.laoutsBookBuildModal__title {
  margin: 0 0 10px 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  color: #f8fafc;
}
.laoutsBookBuildModal__lead {
  margin: 0 0 20px 0;
  font-size: 0.92rem;
  color: rgba(226, 232, 240, 0.75);
  line-height: 1.45;
}
.laoutsBookBuildModal__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.laoutsBookBuildModal__btn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #f1f5f9;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.laoutsBookBuildModal__btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.laoutsBookBuildModal__btn:active {
  transform: scale(0.99);
}
.laoutsBookBuildModal__btn--primary {
  border: 2px solid rgba(167, 139, 250, 0.9);
  background: linear-gradient(145deg, rgba(99, 102, 241, 0.52) 0%, rgba(139, 92, 246, 0.4) 50%, rgba(167, 139, 250, 0.32) 100%);
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.35) inset,
    0 10px 32px rgba(99, 102, 241, 0.35);
}
.laoutsBookBuildModal__btn--primary:hover {
  border-color: rgba(196, 181, 253, 0.95);
  background: linear-gradient(145deg, rgba(99, 102, 241, 0.62) 0%, rgba(139, 92, 246, 0.48) 50%, rgba(167, 139, 250, 0.4) 100%);
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.45) inset,
    0 12px 36px rgba(99, 102, 241, 0.45);
}
.laoutsBookBuildModal__safeBadge {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ede9fe;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(196, 181, 253, 0.45);
}
.laoutsBookBuildModal__btn--danger {
  border: 1px solid rgba(248, 113, 113, 0.5);
  background: transparent;
  opacity: 0.92;
  font-weight: 500;
}
.laoutsBookBuildModal__btn--danger:hover {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.72);
}
.laoutsBookBuildModal__btn--ghost {
  justify-content: center;
  border-color: transparent;
  color: rgba(226, 232, 240, 0.65);
  padding: 10px;
}
.laoutsBookBuildModal__btnIcon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}
.laoutsBookBuildModal__btnText {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
}
.laoutsBookBuildModal__btnText strong {
  font-weight: 650;
}
.laoutsBookBuildModal__sub {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.55);
  line-height: 1.35;
}

/* ─────── Photo Adjust · DRAGGABLE preview ─────── */
/* The preview at the top of the card displays the SAME crop the user is
 * about to print. Drag inside it to reposition the photo within its cell
 * on the working spread (live, 1:1).                                     */
.laoutsAdj__preview {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--rc-tile);
  border-radius: 10px;
  overflow: hidden;
  margin: 0 0 14px 0;
  border: 1px solid var(--rc-line, rgba(255,255,255,0.06));
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.laoutsAdj__preview--dragging {
  cursor: grabbing;
  border-color: var(--rc-accent);
}
.laoutsAdj__preview img {
  width: 100%;
  height: 100%;
  /* CONTAIN — show the WHOLE photo so user can see what they're working
   * with. The viewport rect below shows what crops to the cell. */
  object-fit: contain;
  display: block;
  transform-origin: 50% 50%;
  transition: transform 0.06s ease-out;
  pointer-events: none;
  background: #0a0a0c;
}
.laoutsAdj__preview--dragging img {
  transition: none;
}
/** Viewport rectangle: shows the EXACT crop area of the cell on the
 *  spread. Position + size set by JS based on cell aspect, photo
 *  aspect, zoom, and pan. The huge inset shadow dims everything OUTSIDE
 *  the rectangle so the user sees what's being clipped. */
.laoutsAdj__previewViewport {
  position: absolute;
  border: 2px solid #ffffff;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.55),
    0 0 0 1px #000000,
    inset 0 0 0 1px rgba(0, 0, 0, 0.50);
  pointer-events: none;
  border-radius: 2px;
}
.laoutsAdj__preview--dragging .laoutsAdj__previewViewport {
  border-color: #fbbf24;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.65),
    0 0 0 1px #000000,
    inset 0 0 0 1px rgba(0, 0, 0, 0.50),
    0 0 12px rgba(251, 191, 36, 0.55);
}
.laoutsAdj__previewThirds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,0.45) 1px, transparent 1px),
    linear-gradient(to right,  rgba(255,255,255,0.45) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.45) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.45) 1px, transparent 1px);
  background-position: 33.33% 0, 66.66% 0, 0 33.33%, 0 66.66%;
  background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.18s ease;
}
body.laouts-thirds-on .laoutsAdj__previewThirds { opacity: 1; }
.laoutsAdj__previewHint {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 9px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.laoutsAdj__preview:hover .laoutsAdj__previewHint { opacity: 1; }
.laoutsAdj__preview--dragging .laoutsAdj__previewHint { opacity: 0; }

/** Pan pad with the actual photo as background. */
.laoutsAdj__panPadImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  z-index: 0;
}
.laoutsAdj__panGrid { z-index: 1; }
.laoutsAdj__panDot  { z-index: 2; }
.laoutsAdj__hintInline {
  font-size: 10px;
  color: var(--rc-text-muted);
  letter-spacing: 0.02em;
}

/* Rule-of-thirds overlay drawn over the working canvas. Off by default. */
body.laouts-thirds-on #cep-canvas-wrap::after,
body.laouts-thirds-on .canvasFrame::after,
body.laouts-thirds-on #pageCanvas::after,
body.laouts-thirds-on canvas + .canvasOverlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,0.30) 1px, transparent 1px),
    linear-gradient(to right,  rgba(255,255,255,0.30) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.30) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.30) 1px, transparent 1px);
  background-position: 33.33% 0, 66.66% 0, 0 33.33%, 0 66.66%;
  background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
  background-repeat: no-repeat;
  z-index: 80;
  mix-blend-mode: difference;
}

/* ──────────────────────── Density rules — adjust the engine grid ──────────────────────── */
/* The engine renders photo tiles in a flexible grid. We hint min-width on the
 * grid template using body[data-laouts-lib-density]. Three sizes. */

body.laouts[data-laouts-lib-density="sm"]:has(#imageGalleryDock) .libraryGrid,
body.laouts[data-laouts-lib-density="sm"]:has(#imageGalleryDock) [class*="libraryGrid"],
body.laouts[data-laouts-lib-density="sm"]:has(#imageGalleryDock) [class*="lightTable"] {
  --laouts-lib-tile: 48px;
}
body.laouts[data-laouts-lib-density="md"]:has(#imageGalleryDock) .libraryGrid,
body.laouts[data-laouts-lib-density="md"]:has(#imageGalleryDock) [class*="libraryGrid"],
body.laouts[data-laouts-lib-density="md"]:has(#imageGalleryDock) [class*="lightTable"] {
  --laouts-lib-tile: 76px;
}
body.laouts[data-laouts-lib-density="lg"]:has(#imageGalleryDock) .libraryGrid,
body.laouts[data-laouts-lib-density="lg"]:has(#imageGalleryDock) [class*="libraryGrid"],
body.laouts[data-laouts-lib-density="lg"]:has(#imageGalleryDock) [class*="lightTable"] {
  --laouts-lib-tile: 120px;
}
body.laouts:has(#imageGalleryDock) .libraryGrid,
body.laouts:has(#imageGalleryDock) [class*="libraryGrid"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--laouts-lib-tile, 76px), 1fr)) !important;
  gap: 6px !important;
}

/* ──────────────────────── Dramatic selection state ──────────────────────── */

body.laouts:has(#imageGalleryDock) .libraryTile,
body.laouts:has(#imageGalleryDock) .libTile,
body.laouts:has(#imageGalleryDock) [class*="libTile"] {
  position: relative !important;
  background: var(--rc-tile) !important;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
  overflow: hidden !important;
}

/* Dim unselected tiles when ANY tile is selected, so the picked photos
 * jump out at a glance even in a 1000-thumb grid. */
body.laouts:has(#imageGalleryDock).has-selection .libraryTile:not(.is-selected),
body.laouts:has(#imageGalleryDock).has-selection .libTile:not(.is-selected),
body.laouts:has(#imageGalleryDock).has-selection [class*="libTile"]:not(.is-selected):not([aria-selected="true"]) {
  opacity: 0.34 !important;
}
body.laouts:has(#imageGalleryDock).has-selection .libraryTile:not(.is-selected):hover,
body.laouts:has(#imageGalleryDock).has-selection .libTile:not(.is-selected):hover,
body.laouts:has(#imageGalleryDock).has-selection [class*="libTile"]:not(.is-selected):not([aria-selected="true"]):hover {
  opacity: 0.85 !important;
}

/* Selected state · 3px white outline + soft white glow + bright white check */
body.laouts:has(#imageGalleryDock) .libraryTile.is-selected,
body.laouts:has(#imageGalleryDock) .libTile.is-selected,
body.laouts:has(#imageGalleryDock) [class*="libTile"].is-selected,
body.laouts:has(#imageGalleryDock) [class*="libTile"][aria-selected="true"] {
  border-color: var(--rc-accent) !important;
  box-shadow: 0 0 0 2px var(--rc-accent-soft), 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  transform: translateY(-1px) !important;
  opacity: 1 !important;
}

/* Numbered/check badge in the corner of every selected tile */
body.laouts:has(#imageGalleryDock) .libraryTile.is-selected::after,
body.laouts:has(#imageGalleryDock) .libTile.is-selected::after,
body.laouts:has(#imageGalleryDock) [class*="libTile"].is-selected::after,
body.laouts:has(#imageGalleryDock) [class*="libTile"][aria-selected="true"]::after {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rc-accent);
  color: var(--rc-accent-ink);
  font-family: var(--laouts-font-sans);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* ──────────────────────── Sticky "drag all" bar at bottom of library ──────────────────────── */

.laoutsLibSticky {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 12;
  margin: 12px -14px -14px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(13, 13, 15, 0.0), rgba(13, 13, 15, 0.85) 35%, rgba(13, 13, 15, 0.95));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.laoutsLibSticky[hidden] { display: none; }
.laoutsLibSticky__inner {
  display: flex;
  align-items: stretch;
  gap: 0;
}
/* BUILD MY BOOK · primary CTA, full-width, big purple gradient. */
.laoutsLibSticky__build {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 13px 16px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border: 1px solid rgba(167, 139, 250, 0.55);
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.30),
    0 6px 18px rgba(99, 102, 241, 0.32);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.18s ease;
}
.laoutsLibSticky__build:hover {
  background: linear-gradient(135deg, #7376ff 0%, #9b6ef6 100%);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.42),
    0 8px 22px rgba(99, 102, 241, 0.48);
}
.laoutsLibSticky__build:active {
  transform: translateY(0);
}
.laoutsLibSticky__buildIcon {
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.45));
}
.laoutsLibSticky__buildLab {
  flex: 1;
  text-align: left;
}
.laoutsLibSticky__buildHint {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.90;
  font-variant-numeric: tabular-nums;
}
/* Pulse on click. */
.laoutsLibSticky__build--working {
  animation: laoutsBuildPulse 0.9s ease-in-out;
}
/* LEGACY · old auto-layout pill styles kept for safety, hidden. */
.laoutsLibSticky__cta { display: none !important; }
.laoutsLibSticky__count, .laoutsLibSticky__hint { display: none !important; }

/* When density toggles change tile sizes, the photo tiles adapt */
body.laouts[data-laouts-lib-density="sm"]:has(#imageGalleryDock) .libraryTile.is-selected::after,
body.laouts[data-laouts-lib-density="sm"]:has(#imageGalleryDock) [class*="libTile"].is-selected::after {
  width: 16px; height: 16px; font-size: 10px;
  top: 3px; right: 3px;
}
body.laouts:has(#imageGalleryDock) .laoutsNextStepsStrip__card {
  background: var(--rc-card) !important;
}
body.laouts:has(#imageGalleryDock) .laoutsNextStepsStrip__card:hover {
  background: var(--rc-card-hover) !important;
  border-color: var(--rc-accent) !important;
}
body.laouts:has(#imageGalleryDock) .laoutsNextStepsStrip__icon {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--rc-text) !important;
}
body.laouts:has(#imageGalleryDock) .laoutsNextStepsStrip__cta {
  color: var(--rc-text) !important;
}

/* ─── Panel shell ─── */
.rcPanel {
  background: var(--rc-ground);
  color: var(--rc-text);
  font-family: var(--laouts-font-sans);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ─── Header (wordmark + tabs + close) ─── */
.rcPanel__head {
  padding: 18px 22px 0;
  flex-shrink: 0;
}
.rcPanel__headRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.rcPanel__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--laouts-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rc-text);
}
.rcPanel__brandGlyph {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--rc-accent);
  box-shadow: 0 0 0 4px var(--rc-accent-soft);
}
.rcPanel__close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--rc-text-soft);
  font-family: var(--laouts-font-serif);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.rcPanel__close:hover {
  background: var(--rc-card);
  color: var(--rc-text);
}

/* Tab row — Recraft uses a thin underline only */
.rcTabs {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--rc-divider);
}
.rcTabs__tab {
  font-family: var(--laouts-font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--rc-text-soft);
  background: transparent;
  border: none;
  padding: 10px 0 12px;
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease;
  letter-spacing: 0;
  text-transform: none;
}
.rcTabs__tab:hover { color: var(--rc-text); }
.rcTabs__tab--active { color: var(--rc-text); }
.rcTabs__tab--active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1.5px;
  background: var(--rc-text);
}

/* ─── Body (scrolling) ─── */
.rcPanel__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 22px 100px;
  scrollbar-width: thin;
  scrollbar-color: var(--rc-card) transparent;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rcPanel__body::-webkit-scrollbar { width: 6px; }
.rcPanel__body::-webkit-scrollbar-thumb {
  background: var(--rc-card);
  border-radius: 999px;
}

/* ─── Status row (• ready · 28 photos · 21 placed) ─── */
.rcStatus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--rc-card);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--rc-text);
  align-self: flex-start;
}
.rcStatus__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rc-status);
  box-shadow: 0 0 0 3px rgba(93, 202, 126, 0.16);
  flex-shrink: 0;
}
.rcStatus__lab {
  color: var(--rc-text);
  font-weight: 500;
}
.rcStatus__sub {
  color: var(--rc-text-soft);
  font-weight: 400;
}

/* ─── Pill-trio (top of input areas) ─── */
.rcPills {
  display: flex;
  gap: 6px;
}
.rcPill {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--rc-card);
  border: none;
  border-radius: 10px;
  font-family: var(--laouts-font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--rc-text);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.rcPill:hover { background: var(--rc-card-hover); }
.rcPill__glyph {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--rc-text-soft);
}
.rcPill__glyph svg {
  width: 14px;
  height: 14px;
  display: block;
}
.rcPill--active {
  background: var(--rc-card);
  outline: 1px solid var(--rc-accent);
  outline-offset: -1px;
  color: var(--rc-accent);
}
.rcPill--active .rcPill__glyph { color: var(--rc-accent); }

/* ─── Action card list ─── */
.rcCards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rcCard {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--rc-card);
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: var(--laouts-font-sans);
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.rcCard:hover {
  background: var(--rc-card-hover);
}
.rcCard--active {
  border-color: var(--rc-accent);
  background: var(--rc-card);
}
.rcCard:focus-visible {
  outline: 2px solid var(--rc-accent);
  outline-offset: 2px;
}
.rcCard__glyph {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rc-text);
  flex-shrink: 0;
}
.rcCard--active .rcCard__glyph {
  background: var(--rc-accent-bg);
  color: var(--rc-accent);
}
.rcCard__glyph svg {
  width: 18px;
  height: 18px;
  display: block;
}
.rcCard__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rcCard__title {
  font-family: var(--laouts-font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--rc-text);
  letter-spacing: -0.005em;
}
.rcCard__title--serif {
  font-family: var(--laouts-font-serif);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.rcCard__crown {
  display: inline-flex;
  margin-left: 6px;
  color: var(--rc-accent);
}
.rcCard__crown svg { width: 11px; height: 11px; }
.rcCard__sub {
  font-family: var(--laouts-font-sans);
  font-size: 12px;
  color: var(--rc-text-soft);
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rcCard__meta {
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--rc-text-muted);
  flex-shrink: 0;
}
.rcCard--active .rcCard__meta { color: var(--rc-accent); }

/* Section heading inside body */
.rcSection {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rcSection__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rcSection__title {
  font-family: var(--laouts-font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--rc-text-soft);
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
}
.rcSection__action {
  font-family: var(--laouts-font-sans);
  font-size: 12px;
  color: var(--rc-text-soft);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.rcSection__action:hover { color: var(--rc-accent); }

/* Footer — Generate / Auto-layout / Apply CTA */
.rcPanel__foot {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 4;
}
.rcCta {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--rc-accent);
  color: var(--rc-accent-ink);
  border: none;
  border-radius: 12px;
  font-family: var(--laouts-font-sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0;
  text-transform: none;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  box-shadow: 0 8px 24px var(--rc-accent-soft);
}
.rcCta:hover {
  background: var(--rc-accent-hover);
  box-shadow: 0 12px 30px var(--rc-accent-glow);
}
.rcCta:active { transform: translateY(1px); }
.rcCta__arrow {
  font-family: var(--laouts-font-serif);
  font-size: 16px;
  line-height: 1;
}

/* Scrim/Outer shell so .rcPanel can host inside any of the existing
 * slide-in panels we built (Photos, AI Studio, Tool panels). When a
 * panel uses .rcPanel internally, parent removes its old chrome. */
.laoutsPhotos--rcMode .laoutsPhotos__panel,
.laoutsAIStudio--rcMode .laoutsAIStudio__panel,
.laoutsToolPanel--rcMode .laoutsToolPanel__panel {
  background: var(--rc-ground);
  background-image: none;
  border-left: 1px solid var(--rc-divider);
}
.laoutsPhotos--rcMode .laoutsPhotos__head,
.laoutsAIStudio--rcMode .laoutsAIStudio__head,
.laoutsToolPanel--rcMode .laoutsToolPanel__head {
  display: none;
}
.laoutsPhotos--rcMode .laoutsPhotos__stats,
.laoutsAIStudio--rcMode .laoutsAIStudio__statRow {
  display: none;
}
/* Replace the old internal chrome — the rcPanel renders its own */

/* Photos panel · rcMode overrides for the existing grid/dropzone/toast */
.laoutsPhotos--rcMode .laoutsPhotos__filterRow,
.laoutsPhotos--rcMode .laoutsPhotos__listSection,
.laoutsPhotos--rcMode .laoutsPhotos__listHead,
.laoutsPhotos--rcMode .laoutsPhotos__bulkBtn,
.laoutsPhotos--rcMode .laoutsPhotos__foot {
  /** Sections we replaced in the rcPanel layout — hide the orphans. */
}

.laoutsPhotos--rcMode .laoutsPhotos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 6px;
  padding: 0;
  overflow: visible;
}

.laoutsPhotos--rcMode .laoutsPhotos__tile {
  background: var(--rc-tile);
  border: 1px solid transparent;
  border-radius: 10px;
  aspect-ratio: 1 / 1;
}
.laoutsPhotos--rcMode .laoutsPhotos__tile:hover {
  border-color: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
  box-shadow: none;
}
.laoutsPhotos--rcMode .laoutsPhotos__tile--selected {
  border-color: var(--rc-accent);
  box-shadow: 0 0 0 2px var(--rc-accent-soft);
}
.laoutsPhotos--rcMode .laoutsPhotos__tile--selected .laoutsPhotos__tileCheck {
  background: var(--rc-accent);
  border-color: var(--rc-accent);
}
.laoutsPhotos--rcMode .laoutsPhotos__tileBook {
  background: rgba(13, 13, 14, 0.85);
  color: var(--rc-accent);
  border-color: var(--rc-accent-soft);
}

.laoutsPhotos--rcMode .laoutsPhotos__dropzone {
  margin: 0;
  padding: 18px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1.5px dashed rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}
.laoutsPhotos--rcMode .laoutsPhotos__dropzone:hover,
.laoutsPhotos--rcMode .laoutsPhotos__dropzone--over {
  background: var(--rc-accent-bg);
  border-color: var(--rc-accent);
}
.laoutsPhotos--rcMode .laoutsPhotos__dropTitle {
  font-family: var(--laouts-font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--rc-text);
}
.laoutsPhotos--rcMode .laoutsPhotos__dropSub {
  margin-top: 4px;
  color: var(--rc-text-muted);
  font-size: 11px;
}
.laoutsPhotos--rcMode .laoutsPhotos__dropBtn { display: none; }

.laoutsPhotos--rcMode .laoutsPhotos__empty {
  padding: 28px 14px;
  background: var(--rc-card);
  border-radius: 12px;
  border: none;
  color: var(--rc-text-soft);
}
.laoutsPhotos--rcMode .laoutsPhotos__emptyTitle {
  font-family: var(--laouts-font-sans);
  font-size: 13.5px;
  color: var(--rc-text);
}
.laoutsPhotos--rcMode .laoutsPhotos__emptyHint { color: var(--rc-text-muted); }

.laoutsPhotos--rcMode .laoutsPhotos__toast {
  background: var(--rc-card);
  border: none;
  color: var(--rc-text);
  bottom: 96px;
}
.laoutsPhotos--rcMode .laoutsPhotos__toast[data-kind="good"] {
  background: var(--rc-accent-bg);
  color: var(--rc-accent);
  border: 1px solid var(--rc-accent-soft);
}

/* ══════════════════════════════════════════════════════════════════ */
/*  ENGINE · FOCUS MODE                                               */
/*                                                                    */
/*  Toggled by the "Focus mode F" pill in the brand topbar or by      */
/*  pressing F. Fades chrome, collapses panels, vignettes the canvas. */
/* ══════════════════════════════════════════════════════════════════ */

/* Focus toggle pill (lives in .laoutsBrandTopbar__right) */
.laoutsFocusToggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--rc-divider);
  color: var(--rc-text);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--laouts-font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.laoutsFocusToggle:hover {
  border-color: var(--rc-accent);
  color: var(--rc-accent);
}
.laoutsFocusToggle__lab { white-space: nowrap; }
.laoutsFocusToggle__kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 16px;
  background: var(--rc-card);
  border: 1px solid var(--rc-divider);
  border-radius: 4px;
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  color: var(--rc-text);
}
.laoutsFocusToggle--on {
  background: var(--rc-accent);
  border-color: var(--rc-accent);
  color: var(--rc-accent-ink);
}
.laoutsFocusToggle--on .laoutsFocusToggle__kbd {
  background: rgba(15, 13, 10, 0.4);
  color: var(--rc-text);
  border-color: transparent;
}

/* When focus mode is on, dim/hide chrome */
body.laouts.laouts--focusMode .laoutsBrandTopbar {
  background: rgba(15, 13, 10, 0.60) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: transparent !important;
}
body.laouts.laouts--focusMode .laoutsBrandTopbar__crumbs,
body.laouts.laouts--focusMode .laoutsBrandTopbar__divider,
body.laouts.laouts--focusMode .laoutsBrandTopbar__version,
body.laouts.laouts--focusMode .laoutsBrandTopbar__pill,
body.laouts.laouts--focusMode .laoutsBrandTopbar__link:not(#laoutsFocusModeBtn):not(.laoutsBrandTopbar__link--accent) {
  opacity: 0.55;
  transition: opacity 0.25s ease;
}

/* Hide stepper + look strip + pulse */
body.laouts.laouts--focusMode .laoutsStepper {
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
  border: none;
}
body.laouts.laouts--focusMode {
  padding-top: var(--laouts-topbar-h);
}
body.laouts.laouts--focusMode .laoutsLookStrip {
  display: none;
}
body.laouts.laouts--focusMode .laoutsPulse {
  /** Collapse pulse to a tiny bottom-left pill */
  width: auto !important;
  bottom: 16px !important;
  left: 16px !important;
  top: auto !important;
  right: auto !important;
}
body.laouts.laouts--focusMode .laoutsPulse__body,
body.laouts.laouts--focusMode .laoutsPulse__hint,
body.laouts.laouts--focusMode .laoutsPulse__projectRow,
body.laouts.laouts--focusMode .laoutsPulse__uptime,
body.laouts.laouts--focusMode .laoutsPulse__collapse {
  display: none !important;
}
body.laouts.laouts--focusMode .laoutsPulse__head {
  padding: 8px 14px !important;
  border-bottom: none !important;
}
body.laouts.laouts--focusMode .laoutsPulse__title {
  font-size: 9.5px !important;
  letter-spacing: 0.16em !important;
}

/* Tool rail collapses to dots only */
body.laouts.laouts--focusMode .laoutsToolRail {
  width: var(--laouts-tool-rail-w) !important;
  background: transparent !important;
  border-right: none !important;
}
body.laouts.laouts--focusMode .laoutsToolRail::before {
  display: none;
}
body.laouts.laouts--focusMode .laoutsToolRail:hover,
body.laouts.laouts--focusMode .laoutsToolRail:focus-within,
body.laouts.laouts--focusMode .laoutsToolRail--pinned {
  width: var(--laouts-tool-rail-w-open) !important;
  background: rgba(15, 13, 10, 0.92) !important;
}
body.laouts.laouts--focusMode .laoutsToolRail__btn {
  height: 36px !important;
  padding: 0 8px !important;
  background: transparent !important;
  border-left: none !important;
}
body.laouts.laouts--focusMode .laoutsToolRail__num,
body.laouts.laouts--focusMode .laoutsToolRail__label,
body.laouts.laouts--focusMode .laoutsToolRail__glyph svg {
  display: none;
}
body.laouts.laouts--focusMode .laoutsToolRail__glyph {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(240, 235, 222, 0.18);
  background: transparent;
}
body.laouts.laouts--focusMode .laoutsToolRail__btn--active .laoutsToolRail__glyph {
  background: var(--rc-accent);
  border-color: var(--rc-accent);
}
body.laouts.laouts--focusMode .laoutsToolRail__foot {
  display: none;
}

/* Slide off the engine's pinned columns */
body.laouts.laouts--focusMode .libraryColumn,
body.laouts.laouts--focusMode .lightTableStrip,
body.laouts.laouts--focusMode .sidebar,
body.laouts.laouts--focusMode #rightInspector {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.22s ease;
}
body.laouts.laouts--focusMode .sidebar,
body.laouts.laouts--focusMode #rightInspector {
  transform: translateX(100%);
}

/* Vignette removed per Christina — focus mode keeps the canvas clean */
body.laouts.laouts--focusMode .stageWorkArea::after,
body.laouts.laouts--focusMode .spreadStageView::after {
  content: none;
  display: none;
}

/* Hide the spread rail filmstrip in focus mode (canvas takes priority) */
body.laouts.laouts--focusMode .spreadRail {
  opacity: 0.22;
  transition: opacity 0.18s ease;
}
body.laouts.laouts--focusMode .spreadRail:hover {
  opacity: 1;
}

/* Next-steps floating pill (always-on upsell) */
.laoutsFocusNextSteps {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  z-index: 9050;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(28, 24, 18, 0.92);
  border: 1px solid var(--rc-divider);
  color: var(--rc-text);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--laouts-font-sans);
  font-size: 11.5px;
  font-weight: 500;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.18s ease;
}
.laoutsFocusNextSteps:hover {
  background: rgba(44, 38, 32, 0.95);
  border-color: var(--rc-accent);
  transform: translateX(-50%) translateY(-2px);
}
.laoutsFocusNextSteps__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--rc-accent);
  color: var(--rc-accent-ink);
  border-radius: 999px;
  font-family: var(--laouts-font-mono);
  font-size: 10px;
  font-weight: 600;
}
body.laouts.laouts--focusMode .laoutsFocusNextSteps {
  display: inline-flex;
}

/* Next-steps sheet (opens when the pill is clicked) */
.laoutsNextStepsSheet {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  bottom: 64px;
  z-index: 9060;
  width: min(720px, 92vw);
  background: var(--rc-panel);
  border: 1px solid var(--rc-divider);
  border-radius: 14px;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.laoutsNextStepsSheet--open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.laoutsNextStepsSheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.laoutsNextStepsSheet__head h3 {
  margin: 0;
  font-family: var(--laouts-font-serif);
  font-weight: 400;
  font-size: 17px;
  color: var(--rc-text);
}
.laoutsNextStepsSheet__close {
  background: transparent;
  border: none;
  color: var(--rc-text-soft);
  font-family: var(--laouts-font-serif);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: background 0.15s ease, color 0.15s ease;
}
.laoutsNextStepsSheet__close:hover {
  background: var(--rc-card);
  color: var(--rc-accent);
}
.laoutsNextStepsSheet__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.laoutsNextStepsSheet__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--rc-card);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 14px 16px;
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  font-family: var(--laouts-font-sans);
}
.laoutsNextStepsSheet__card:hover {
  background: var(--rc-card-hover);
  border-color: var(--rc-accent);
}
.laoutsNextStepsSheet__title {
  font-family: var(--laouts-font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--rc-text);
}
.laoutsNextStepsSheet__sub {
  font-size: 11.5px;
  color: var(--rc-text-soft);
  line-height: 1.4;
}
.laoutsNextStepsSheet__cta {
  font-family: var(--laouts-font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--rc-accent);
  margin-top: 4px;
}

/* Hide the persistent next-steps pill in daily mode (we rely on the
 * existing engine surfaces); show it only in focus. */
body.laouts:not(.laouts--focusMode) .laoutsFocusNextSteps {
  display: none;
}

/* Toast for focus toggle confirmation */
.laoutsFocusToast {
  position: fixed;
  left: 50%;
  top: 80px;
  transform: translate(-50%, -8px);
  z-index: 9100;
  background: var(--rc-card);
  color: var(--rc-text);
  border: 1px solid var(--rc-accent);
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--laouts-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.laoutsFocusToast--show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media print {
  .laoutsFocusToggle,
  .laoutsFocusNextSteps,
  .laoutsNextStepsSheet,
  .laoutsFocusToast,
  .laoutsNextStepsStrip { display: none !important; }
}

/* ──────────────────────── Always-on Next Steps strip (daily) ──────────────────────── */

.laoutsNextStepsStrip {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 8500;
  width: min(960px, calc(100vw - 32px));
  background: var(--rc-panel);
  border: 1px solid var(--rc-divider);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  font-family: var(--laouts-font-sans);
  color: var(--rc-text);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.laoutsNextStepsStrip--dismissed {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(20px);
}
/** Hide in focus mode — the floating pill takes over there */
body.laouts.laouts--focusMode .laoutsNextStepsStrip {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(20px);
}
/** Hide while the order export modal is open */
body.laouts:has(#cepOrderExperience:not([hidden])) .laoutsNextStepsStrip {
  display: none;
}

.laoutsNextStepsStrip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.laoutsNextStepsStrip__lab {
  font-family: var(--laouts-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rc-text-muted);
}
.laoutsNextStepsStrip__close {
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--rc-text-soft);
  font-family: var(--laouts-font-serif);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.laoutsNextStepsStrip__close:hover {
  background: var(--rc-card);
  color: var(--rc-accent);
}

.laoutsNextStepsStrip__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.laoutsNextStepsStrip__card {
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  row-gap: 2px;
  padding: 12px 14px;
  background: var(--rc-card);
  border: 1px solid transparent;
  border-radius: 10px;
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  font-family: var(--laouts-font-sans);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.laoutsNextStepsStrip__card:hover {
  background: var(--rc-card-hover);
  border-color: var(--rc-accent);
}
.laoutsNextStepsStrip__icon {
  grid-row: 1 / span 3;
  align-self: start;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(200, 232, 123, 0.08);
  border-radius: 8px;
  color: var(--rc-accent);
}
.laoutsNextStepsStrip__title {
  font-family: var(--laouts-font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--rc-text);
  letter-spacing: -0.005em;
}
.laoutsNextStepsStrip__sub {
  font-size: 11.5px;
  color: var(--rc-text-soft);
  line-height: 1.4;
}
.laoutsNextStepsStrip__cta {
  font-family: var(--laouts-font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--rc-accent);
  margin-top: 2px;
}

@media (max-width: 720px) {
  .laoutsNextStepsStrip {
    bottom: 8px;
    left: 8px;
    right: 8px;
    transform: none;
    width: auto;
  }
  .laoutsNextStepsStrip--dismissed { transform: translateY(20px); }
  body.laouts.laouts--focusMode .laoutsNextStepsStrip { transform: translateY(20px); }
  .laoutsNextStepsStrip__cards { grid-template-columns: 1fr; }
}

/* ──────────────────────── Engine library upload zone — cool gray + white ──────────────────────── */
/* CRITICAL: keep box-sizing border-box and zero horizontal margin so the
 * zone fits inside the column width — the original engine column is fluid
 * and we must not push past it. */

body.laouts .libraryUploadZone {
  width: 100% !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1.5px dashed rgba(255, 255, 255, 0.32) !important;
  border-radius: 14px !important;
  margin: 0 0 12px 0 !important;
  padding: 22px 16px !important;
  text-align: center !important;
  box-shadow: none !important;
}
body.laouts .libraryUploadZone:hover,
body.laouts .libraryUploadZone.is-dragover,
body.laouts .libraryUploadZone--active {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--rc-accent) !important;
  box-shadow: 0 0 0 3px var(--rc-accent-soft) !important;
}
body.laouts .libraryUploadZone__head {
  font-family: var(--laouts-font-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  color: var(--rc-text) !important;
  margin: 0 0 4px !important;
  letter-spacing: -0.005em !important;
}
body.laouts .libraryUploadZone__sub,
body.laouts .libraryUploadZone__inner small,
body.laouts .libraryUploadZone__inner p:not(.libraryUploadZone__head) {
  font-family: var(--laouts-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  color: var(--rc-text-soft) !important;
}
body.laouts .libraryUploadZone__art svg path,
body.laouts .libraryUploadZone__art svg circle,
body.laouts .libraryUploadZone__art {
  stroke: var(--rc-accent) !important;
  color: var(--rc-accent) !important;
}

/* The "Auto Layout Selected Photos" button — primary white pill */
body.laouts #libBtnAutoLayout {
  background: var(--rc-accent) !important;
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent-ink) !important;
  font-weight: 600 !important;
  font-family: var(--laouts-font-sans) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  box-shadow: 0 6px 18px rgba(255, 255, 255, 0.18) !important;
}
body.laouts #libBtnAutoLayout:hover {
  background: var(--rc-accent-hover) !important;
  border-color: var(--rc-accent-hover) !important;
  box-shadow: 0 10px 24px rgba(255, 255, 255, 0.28) !important;
}

/* "Order book" / Export — also acid pill in topbar */
body.laouts .editorTbBtn--export {
  background: var(--rc-accent) !important;
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent-ink) !important;
  font-weight: 600 !important;
  font-family: var(--laouts-font-sans) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.laouts .editorTbBtn--export:hover {
  background: var(--rc-accent-hover) !important;
  border-color: var(--rc-accent-hover) !important;
}

/* Photo tiles in the engine library — warm-dark with acid selected ring */
body.laouts .libraryTile,
body.laouts .libTile,
body.laouts [class*="libTile"],
body.laouts [class*="library"] [class*="tile"] {
  background: var(--rc-tile) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
}
body.laouts .libraryTile.is-selected,
body.laouts .libTile.is-selected,
body.laouts [class*="libTile"].is-selected,
body.laouts [class*="libTile"][aria-selected="true"] {
  border-color: var(--rc-accent) !important;
  box-shadow: 0 0 0 2px var(--rc-accent-soft) !important;
}

/* Right inspector cards — lift to --rc-card */
body.laouts .sidebar .card,
body.laouts #rightInspector .card {
  background: var(--rc-card) !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-bottom: 10px !important;
  box-shadow: none !important;
}
body.laouts .sidebar .card .title,
body.laouts #rightInspector .card .title {
  /** Same style as `.laoutsCullPanel__section` so the inspector's card
   *  titles and the cull panel's section header read as one type system. */
  color: var(--rc-accent) !important;
  font-family: var(--laouts-font-mono) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
}
body.laouts #rightInspector .card .cardSub {
  font-family: var(--laouts-font-sans) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  /** Bumped from 60% to 72% — Christina noted hint copy felt too light. */
  color: color-mix(in srgb, var(--rc-text) 72%, transparent) !important;
  margin: 0 0 14px 0 !important;
  max-width: 48em;
}
body.laouts #rightInspector .card .uxLabel {
  font-family: var(--laouts-font-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: var(--rc-text) !important;
  margin-bottom: 8px !important;
}
/** Body text inside cards (slider value labels, button labels, captions,
 *  inline spans). Up from default 12-13px to 14px so it reads at arm's
 *  length without squinting. */
body.laouts #rightInspector .card,
body.laouts .sidebar .card {
  font-family: var(--laouts-font-sans) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}
body.laouts .sidebar select,
body.laouts #rightInspector select,
body.laouts .sidebar input[type="text"],
body.laouts .sidebar input[type="number"],
body.laouts #rightInspector input[type="text"],
body.laouts #rightInspector input[type="number"] {
  background: var(--rc-tile) !important;
  border: 1px solid transparent !important;
  color: var(--rc-text) !important;
  border-radius: 8px !important;
  padding: 9px 11px !important;
}
body.laouts .sidebar input:focus,
body.laouts #rightInspector input:focus,
body.laouts .sidebar select:focus,
body.laouts #rightInspector select:focus {
  border-color: var(--rc-accent) !important;
  outline: none !important;
}

body.laouts .sidebar input[type="range"],
body.laouts #rightInspector input[type="range"] {
  height: 4px !important;
}
body.laouts .sidebar input[type="range"]::-webkit-slider-thumb,
body.laouts #rightInspector input[type="range"]::-webkit-slider-thumb {
  width: 16px !important;
  height: 16px !important;
  background: var(--rc-accent) !important;
  border-color: var(--rc-ground) !important;
}
body.laouts .sidebar input[type="range"]::-moz-range-thumb,
body.laouts #rightInspector input[type="range"]::-moz-range-thumb {
  width: 16px !important;
  height: 16px !important;
  background: var(--rc-accent) !important;
  border-color: var(--rc-ground) !important;
}

body.laouts .sidebar .btn.is-active,
body.laouts .sidebar .btn[aria-pressed="true"],
body.laouts #rightInspector .btn.is-active,
body.laouts #rightInspector .btn[aria-pressed="true"] {
  background: var(--rc-accent) !important;
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent-ink) !important;
}

/* Spread filmstrip thumbs — warm dark with acid active border */
body.laouts .bookSpreadStrip__thumb,
body.laouts [class*="spreadThumb"] {
  background: var(--rc-tile) !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
}
body.laouts .bookSpreadStrip__thumb.is-active,
body.laouts [class*="spreadThumb"].is-active,
body.laouts [class*="spreadThumb"][aria-selected="true"] {
  border-color: var(--rc-accent) !important;
  box-shadow: 0 0 0 2px var(--rc-accent-soft) !important;
}

/* Layout bar's "RECIPE" pill (was lime, ensure fully acid) */
body.laouts .laoutsRecipeKicker,
body.laouts .recipePill,
body.laouts [class*="recipePill"] {
  background: var(--rc-accent) !important;
  color: var(--rc-accent-ink) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-family: var(--laouts-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* Pulse widget header — make sure it uses warm-dark + acid */
body.laouts .laoutsPulse {
  background: var(--rc-panel) !important;
  border-color: var(--rc-divider) !important;
}
body.laouts .laoutsPulse__head {
  border-bottom-color: var(--rc-divider) !important;
}
body.laouts .laoutsPulse__pulseDot {
  background: var(--rc-accent) !important;
  box-shadow: 0 0 8px var(--rc-accent-glow) !important;
}
body.laouts .laoutsPulse__pulseDot::after {
  border-color: var(--rc-accent) !important;
}

/* Look strip — same family */
body.laouts .laoutsLookStrip {
  background:
    linear-gradient(rgba(15, 13, 10, 0.92), rgba(15, 13, 10, 0.92)),
    linear-gradient(90deg, rgba(200, 232, 123, 0.04), rgba(200, 232, 123, 0)) !important;
  border-bottom-color: var(--rc-divider) !important;
}

/* ──────────────────────── Spread canvas frame + lift ──────────────────────── */
/* Float the white spread off the warm-dark ground with a soft shadow + a thin
 * warm hairline. Reads like a print sitting on a velvet lined drawer.       */

body.laouts .bookSpreadFrame,
body.laouts #wrap.bookSpreadFrame {
  border-radius: 6px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 24px rgba(0, 0, 0, 0.55),
    0 24px 60px rgba(0, 0, 0, 0.45) !important;
  outline: 1px solid rgba(240, 235, 222, 0.05);
  outline-offset: 0;
  transition: box-shadow 0.25s ease;
}
body.laouts .bookSpreadFrame:hover,
body.laouts #wrap.bookSpreadFrame:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 12px 30px rgba(0, 0, 0, 0.62),
    0 32px 80px rgba(0, 0, 0, 0.52) !important;
}

/* Make the spread stage's surround a touch warmer-darker so the float
 * has a perceptible lit-pool effect around the canvas. */
body.laouts .spreadStageView {
  background:
    radial-gradient(60% 70% at 50% 45%, rgba(200, 232, 123, 0.025), transparent 60%),
    var(--laouts-bg) !important;
}

/* Soften the seam dashed line a touch — currently very strong */
body.laouts .seamLine,
body.laouts .stageSeam {
  background: rgba(200, 232, 123, 0.40) !important;
}

/* ──────────────────────── Vision panel · warm-dark + acid ──────────────────────── */
/* The panel had its own dark matcha theme already; tighten and align tokens. */

body.laouts .laoutsMvz__panel {
  background: var(--rc-panel) !important;
  background-image:
    radial-gradient(35% 30% at 100% 0%, rgba(200, 232, 123, 0.08), transparent 60%) !important;
  border-left-color: var(--rc-divider) !important;
}
body.laouts .laoutsMvz__head {
  border-bottom-color: var(--rc-divider) !important;
}
body.laouts .laoutsMvz__kicker { color: var(--rc-accent) !important; }
body.laouts .laoutsMvz__title { color: var(--rc-text) !important; }
body.laouts .laoutsMvz__close {
  border-color: var(--rc-divider) !important;
  color: var(--rc-text-soft) !important;
}
body.laouts .laoutsMvz__close:hover {
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent) !important;
}
body.laouts .laoutsMvz__stat {
  background: var(--rc-card) !important;
  border-color: transparent !important;
  border-radius: 10px !important;
}
body.laouts .laoutsMvz__statValue { color: var(--rc-text) !important; }
body.laouts .laoutsMvz__statLabel { color: var(--rc-text-muted) !important; }
body.laouts .laoutsMvz__modeBtn--active {
  background: var(--rc-accent) !important;
  color: var(--rc-accent-ink) !important;
}
body.laouts .laoutsMvz__action {
  background: var(--rc-card) !important;
  border-color: transparent !important;
  color: var(--rc-text) !important;
  border-radius: 999px !important;
}
body.laouts .laoutsMvz__action:hover {
  background: var(--rc-card-hover) !important;
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent) !important;
}
body.laouts .laoutsMvz__action--primary {
  background: var(--rc-accent) !important;
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent-ink) !important;
  font-weight: 600 !important;
}
body.laouts .laoutsMvz__action--primary:hover {
  background: var(--rc-accent-hover) !important;
  border-color: var(--rc-accent-hover) !important;
  color: var(--rc-accent-ink) !important;
}
body.laouts .laoutsMvz__item {
  background: var(--rc-card) !important;
  border-color: transparent !important;
}
body.laouts .laoutsMvz__item:hover {
  background: var(--rc-card-hover) !important;
}
body.laouts .laoutsMvz__item[data-quality="good"] {
  border-left: 3px solid var(--rc-accent) !important;
}

/* ──────────────────────── AI Studio · rcMode integration ──────────────────────── */
/* When the AI Studio panel is in rcMode, lift its surfaces to warm-dark + acid */

.laoutsAIStudio--rcMode .laoutsAIStudio__panel {
  background: var(--rc-panel) !important;
  background-image:
    radial-gradient(35% 30% at 100% 0%, rgba(200, 232, 123, 0.08), transparent 60%) !important;
  border-left-color: var(--rc-divider) !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__head {
  border-bottom-color: var(--rc-divider) !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__kicker { color: var(--rc-accent) !important; }
.laoutsAIStudio--rcMode .laoutsAIStudio__title { color: var(--rc-text) !important; }
.laoutsAIStudio--rcMode .laoutsAIStudio__sparkle { color: var(--rc-accent) !important; }
.laoutsAIStudio--rcMode .laoutsAIStudio__close {
  border-color: var(--rc-divider) !important;
  color: var(--rc-text-soft) !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__close:hover {
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent) !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__statRow {
  border-bottom-color: var(--rc-divider) !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__stat {
  background: var(--rc-card) !important;
  border-color: transparent !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__statVal { color: var(--rc-text) !important; }
.laoutsAIStudio--rcMode .laoutsAIStudio__statLab { color: var(--rc-text-muted) !important; }
.laoutsAIStudio--rcMode .laoutsAIStudio__section {
  border-bottom-color: var(--rc-divider) !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__sectionTitle { color: var(--rc-text) !important; }
.laoutsAIStudio--rcMode .laoutsAIStudio__chip {
  background: var(--rc-card) !important;
  border-color: transparent !important;
  color: var(--rc-text) !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__chip:hover {
  background: var(--rc-card-hover) !important;
  color: var(--rc-text) !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__chip--active {
  background: var(--rc-accent) !important;
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent-ink) !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__product {
  background: var(--rc-card) !important;
  border-color: transparent !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__productKicker { color: var(--rc-text) !important; }
.laoutsAIStudio--rcMode .laoutsAIStudio__productSize { color: var(--rc-text-soft) !important; }
.laoutsAIStudio--rcMode .laoutsAIStudio__productLink { color: var(--rc-accent) !important; }
.laoutsAIStudio--rcMode .laoutsAIStudio__regen {
  background: var(--rc-card) !important;
  border-color: transparent !important;
  color: var(--rc-text-soft) !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__regen:hover {
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent) !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__dir {
  background: var(--rc-card) !important;
  border-color: transparent !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__dir:hover {
  background: var(--rc-card-hover) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__dir--active {
  border-color: var(--rc-accent) !important;
  box-shadow: 0 0 0 2px var(--rc-accent-soft) !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__dirNum {
  background: rgba(15, 13, 10, 0.85) !important;
  color: var(--rc-text) !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__dir--active .laoutsAIStudio__dirNum {
  background: var(--rc-accent) !important;
  color: var(--rc-accent-ink) !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__feat {
  border-bottom-color: var(--rc-divider) !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__featGlyph {
  background: var(--rc-card) !important;
  color: var(--rc-text-soft) !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__featLab { color: var(--rc-text) !important; }
.laoutsAIStudio--rcMode .laoutsAIStudio__featCount {
  background: var(--rc-card) !important;
  border-color: transparent !important;
  color: var(--rc-accent) !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__featHint { color: var(--rc-text-soft) !important; }
.laoutsAIStudio--rcMode .laoutsAIStudio__featBtn {
  background: var(--rc-card) !important;
  border-color: transparent !important;
  color: var(--rc-text-soft) !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__featBtn:hover {
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent) !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__foot {
  border-top-color: var(--rc-divider) !important;
  background: var(--rc-panel) !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__btn {
  background: var(--rc-accent) !important;
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent-ink) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 14px 20px !important;
  border-radius: 12px !important;
  font-size: 13.5px !important;
  box-shadow: 0 8px 24px var(--rc-accent-soft) !important;
}
.laoutsAIStudio--rcMode .laoutsAIStudio__btn:hover {
  background: var(--rc-accent-hover) !important;
  border-color: var(--rc-accent-hover) !important;
}

/* ──────────────────────── Tool Panel (1, 2, 4, 6, 7, 8) · rcMode integration ──────────────────────── */

.laoutsToolPanel--rcMode .laoutsToolPanel__panel {
  background: var(--rc-panel) !important;
  background-image:
    radial-gradient(35% 30% at 100% 0%, rgba(200, 232, 123, 0.08), transparent 60%) !important;
  border-left-color: var(--rc-divider) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__head {
  border-bottom-color: var(--rc-divider) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__kicker { color: var(--rc-accent) !important; }
.laoutsToolPanel--rcMode .laoutsToolPanel__title { color: var(--rc-text) !important; }
.laoutsToolPanel--rcMode .laoutsToolPanel__close {
  border-color: var(--rc-divider) !important;
  color: var(--rc-text-soft) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__close:hover {
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__section {
  border-bottom-color: var(--rc-divider) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__sectionTitle { color: var(--rc-text) !important; }
.laoutsToolPanel--rcMode .laoutsToolPanel__count {
  background: var(--rc-card) !important;
  border-color: transparent !important;
  color: var(--rc-text-muted) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__regen {
  background: var(--rc-card) !important;
  border-color: transparent !important;
  color: var(--rc-text-soft) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__regen:hover {
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__listRow {
  background: var(--rc-card) !important;
  border-color: transparent !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__listRow:hover {
  background: var(--rc-card-hover) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__listRow--active {
  border-color: var(--rc-accent) !important;
  background: var(--rc-card) !important;
  color: var(--rc-text) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__listLab { color: var(--rc-text) !important; }
.laoutsToolPanel--rcMode .laoutsToolPanel__listSub { color: var(--rc-text-soft) !important; }
.laoutsToolPanel--rcMode .laoutsToolPanel__listMeta { color: var(--rc-text-muted) !important; }
.laoutsToolPanel--rcMode .laoutsToolPanel__listScore { color: var(--rc-accent) !important; }
.laoutsToolPanel--rcMode .laoutsToolPanel__empty {
  background: var(--rc-card) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--rc-text-soft) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__btn {
  background: var(--rc-accent) !important;
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent-ink) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 13px 18px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__btn:hover {
  background: var(--rc-accent-hover) !important;
  border-color: var(--rc-accent-hover) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__btn--ghost {
  background: var(--rc-card) !important;
  border-color: transparent !important;
  color: var(--rc-text-soft) !important;
  font-weight: 500 !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__btn--ghost:hover {
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent) !important;
  background: var(--rc-card-hover) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__btn--danger {
  background: var(--rc-card) !important;
  border-color: transparent !important;
  color: var(--rc-text-soft) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__btn--danger:hover {
  border-color: var(--laouts-rose) !important;
  color: var(--laouts-rose) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__filter {
  background: var(--rc-card) !important;
  border-color: transparent !important;
  color: var(--rc-text-soft) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__filter:hover {
  background: var(--rc-card-hover) !important;
  color: var(--rc-text) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__filter--active {
  background: var(--rc-accent) !important;
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent-ink) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__row {
  border-bottom-color: var(--rc-divider) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__rowLab { color: var(--rc-text-muted) !important; }
.laoutsToolPanel--rcMode .laoutsToolPanel__rowVal { color: var(--rc-text) !important; }
.laoutsToolPanel--rcMode .laoutsToolPanel__activeCard {
  background: var(--rc-card) !important;
  border-color: var(--rc-accent) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__activeName { color: var(--rc-text) !important; }
.laoutsToolPanel--rcMode .laoutsToolPanel__activeScore { color: var(--rc-accent) !important; }
.laoutsToolPanel--rcMode .laoutsToolPanel__lock {
  background: var(--rc-card) !important;
  border-color: transparent !important;
  color: var(--rc-text-soft) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__lock:hover {
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__lock--on {
  background: var(--rc-accent) !important;
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent-ink) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__toggle {
  background: var(--rc-accent) !important;
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent-ink) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__shapeTile,
.laoutsToolPanel--rcMode .laoutsToolPanel__bgTile,
.laoutsToolPanel--rcMode .laoutsToolPanel__washTile,
.laoutsToolPanel--rcMode .laoutsToolPanel__paletteTile {
  background: var(--rc-card) !important;
  border-color: transparent !important;
  color: var(--rc-text-soft) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__shapeTile:hover,
.laoutsToolPanel--rcMode .laoutsToolPanel__bgTile:hover,
.laoutsToolPanel--rcMode .laoutsToolPanel__washTile:hover,
.laoutsToolPanel--rcMode .laoutsToolPanel__paletteTile:hover {
  border-color: var(--rc-accent) !important;
  color: var(--rc-text) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__paletteTile--active {
  border-color: var(--rc-accent) !important;
  background: var(--rc-card-hover) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__shapeName,
.laoutsToolPanel--rcMode .laoutsToolPanel__paletteName,
.laoutsToolPanel--rcMode .laoutsToolPanel__bgTileLabel { color: var(--rc-text) !important; }
.laoutsToolPanel--rcMode .laoutsToolPanel__hint { color: var(--rc-text-muted) !important; }
.laoutsToolPanel--rcMode .laoutsToolPanel__slider {
  background: var(--rc-divider) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__slider::-webkit-slider-thumb {
  background: var(--rc-accent) !important;
  border-color: var(--rc-ground) !important;
}
.laoutsToolPanel--rcMode .laoutsToolPanel__colorChip--active {
  border-color: var(--rc-accent) !important;
  box-shadow: 0 0 0 3px var(--rc-accent-soft) !important;
}

/* Recipe card (Option B) — confirm warm-dark + acid */
body.laouts .laoutsRecipeCard__activeName { color: var(--rc-text) !important; }
body.laouts .laoutsRecipeCard__sub { color: var(--rc-accent) !important; }
body.laouts .laoutsRecipeCard__lock--on {
  background: var(--rc-accent) !important;
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent-ink) !important;
}

/* ──────────────────────── Right inspector polish ──────────────────────── */
/* PAGE BACKGROUND color picker swatch — make the swatch a tidy round chip
 * with a hairline so it reads as a swatch, not a stranded white box. */
body.laouts .sidebar input[type="color"],
body.laouts #rightInspector input[type="color"] {
  width: 40px !important;
  height: 28px !important;
  padding: 2px !important;
  border-radius: 8px !important;
  border: 1px solid var(--rc-divider) !important;
  background: var(--rc-tile) !important;
  cursor: pointer !important;
}
body.laouts .sidebar input[type="color"]::-webkit-color-swatch-wrapper { padding: 0 !important; }
body.laouts .sidebar input[type="color"]::-webkit-color-swatch {
  border: none !important;
  border-radius: 6px !important;
}

/* RESET pill on the PAGE BACKGROUND row — make it a small ghost pill */
body.laouts .sidebar #cardDocument button,
body.laouts #rightInspector #cardDocument button {
  background: var(--rc-card) !important;
  border: 1px solid transparent !important;
  color: var(--rc-text-soft) !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  font-family: var(--laouts-font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}
body.laouts .sidebar #cardDocument button:hover,
body.laouts #rightInspector #cardDocument button:hover {
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent) !important;
  background: var(--rc-card-hover) !important;
}

/* Range slider track filled portion — give the GRID SPACING slider a visible
 * acid fill so the value position reads quickly. (Webkit-only filled region
 * works via background-size on the input.) */
body.laouts .sidebar input[type="range"],
body.laouts #rightInspector input[type="range"] {
  height: 4px !important;
  background: var(--rc-divider) !important;
  background-image: linear-gradient(var(--rc-accent), var(--rc-accent)) !important;
  background-repeat: no-repeat !important;
  background-size: 50% 100% !important;
}
/* Fallback: if no JS sets bg-size from value, this keeps a reasonable acid wash. */
body.laouts .sidebar input[type="range"]:focus,
body.laouts #rightInspector input[type="range"]:focus {
  outline: none !important;
}

/* Card shadows tightened in inspector — cards live on warm panel */
body.laouts .sidebar .card,
body.laouts #rightInspector .card {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset !important;
}

/* ──────────────────────── Floating zoom pill (relocated to canvas) ──────────────────────── */
/* The Zoom controls move out of the top toolbar and float as a small control
 * in the bottom-right of the spread stage area — out of the way until needed. */

body.laouts .editorTopBar__zoomPill.laoutsZoomFloat {
  position: absolute !important;
  right: 16px !important;
  bottom: 16px !important;
  z-index: 60 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 6px 4px 10px !important;
  background: rgba(15, 13, 10, 0.78) !important;
  border: 1px solid var(--rc-divider) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
  font-family: var(--laouts-font-sans);
  font-size: 11.5px;
  color: var(--rc-text);
}
body.laouts .editorTopBar__zoomPill.laoutsZoomFloat .editorTbLabel {
  font-family: var(--laouts-font-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--rc-text-muted) !important;
  margin: 0 6px 0 2px !important;
}
body.laouts .editorTopBar__zoomPill.laoutsZoomFloat .editorTbBtn {
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--rc-text) !important;
  font-family: var(--laouts-font-sans) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.laouts .editorTopBar__zoomPill.laoutsZoomFloat .editorTbBtn:hover {
  background: var(--rc-card-hover) !important;
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent) !important;
}
body.laouts .editorTopBar__zoomPill.laoutsZoomFloat #topBarZoomFit {
  width: auto !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  background: var(--rc-card) !important;
  margin-left: 4px !important;
}
body.laouts .editorTopBar__zoomPill.laoutsZoomFloat #topBarZoomFit:hover {
  background: var(--rc-card-hover) !important;
}
body.laouts .editorTopBar__zoomPill.laoutsZoomFloat .editorTbZoomPct {
  font-family: var(--laouts-font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--rc-text) !important;
  font-variant-numeric: tabular-nums !important;
  min-width: 38px !important;
  text-align: center !important;
  padding: 0 4px !important;
}
/** When the pill has moved out, kill the empty center cell */
body.laouts .editorTopBar__cell--center:has(.laoutsZoomFloat) {
  display: none !important;
}

/* ──────────────────────── Floating Undo/Redo (top-left of canvas) ──────────────────────── */

body.laouts .laoutsHistoryFloat {
  position: absolute !important;
  left: 16px !important;
  top: 16px !important;
  z-index: 60 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px !important;
  background: rgba(15, 13, 10, 0.78) !important;
  border: 1px solid var(--rc-divider) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
body.laouts .laoutsHistoryFloat .editorTbBtn {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--rc-text) !important;
  font-family: var(--laouts-font-sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: 0 !important;
}
body.laouts .laoutsHistoryFloat .editorTbBtn:hover {
  background: var(--rc-card-hover) !important;
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent) !important;
}
body.laouts .laoutsHistoryFloat .editorTbBtn:disabled {
  opacity: 0.35 !important;
  cursor: default !important;
}

/* ──────────────────────── Library actions bar (Order book + Share for Review) ──────────────────────── */
/* Sits at the very top of the library column. Order book is the primary
 * acid CTA; Share for Review is a quiet ghost pill below it. */

body.laouts .laoutsLibraryActions {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
}
body.laouts .laoutsLibraryActions #topBarExport,
body.laouts .laoutsLibraryActions .editorTbBtn--export {
  width: 100% !important;
  height: 44px !important;
  padding: 0 18px !important;
  background: var(--rc-accent) !important;
  border: 1px solid var(--rc-accent) !important;
  color: var(--rc-accent-ink) !important;
  font-family: var(--laouts-font-sans) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px var(--rc-accent-soft) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}
body.laouts .laoutsLibraryActions #topBarExport::before,
body.laouts .laoutsLibraryActions .editorTbBtn--export::before {
  content: "Order book →";
  /* Replace the engine's text with the friendlier copy */
}
body.laouts .laoutsLibraryActions #topBarExport {
  font-size: 0 !important;             /* hide native "Export" text */
}
body.laouts .laoutsLibraryActions #topBarExport::before {
  font-size: 13.5px !important;
}
body.laouts .laoutsLibraryActions #topBarExport:hover,
body.laouts .laoutsLibraryActions .editorTbBtn--export:hover {
  background: var(--rc-accent-hover) !important;
  border-color: var(--rc-accent-hover) !important;
}

body.laouts .laoutsLibraryActions #topBarShareReview,
body.laouts .laoutsLibraryActions .editorTbBtn--review {
  width: 100% !important;
  height: 36px !important;
  padding: 0 14px !important;
  background: var(--rc-card) !important;
  border: 1px solid transparent !important;
  color: var(--rc-text) !important;
  font-family: var(--laouts-font-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
body.laouts .laoutsLibraryActions #topBarShareReview:hover,
body.laouts .laoutsLibraryActions .editorTbBtn--review:hover {
  background: var(--rc-card-hover) !important;
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent) !important;
}

/* ──────────────────────── Share for Review · compact ghost ──────────────────────── */
body.laouts .editorTbBtn--review {
  background: transparent !important;
  border: 1px solid var(--rc-divider) !important;
  color: var(--rc-text-soft) !important;
  font-family: var(--laouts-font-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  height: 28px !important;
  min-height: 28px !important;
}
body.laouts .editorTbBtn--review:hover {
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent) !important;
  background: var(--rc-card-hover) !important;
}

/* Tighten Export to match the new height */
body.laouts .editorTbBtn--export {
  padding: 6px 16px !important;
  height: 28px !important;
  min-height: 28px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Undo/redo buttons in the topbar — small ghost circles */
body.laouts #topBarUndo,
body.laouts #topBarRedo {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  background: transparent !important;
  border: 1px solid var(--rc-divider) !important;
  color: var(--rc-text-soft) !important;
}
body.laouts #topBarUndo:hover,
body.laouts #topBarRedo:hover {
  border-color: var(--rc-accent) !important;
  color: var(--rc-accent) !important;
  background: var(--rc-card-hover) !important;
}

/* ──────────────────────── Library upload zone · compact ──────────────────────── */
/* Single tighter card — less padding, smaller icon, single line of copy. */

body.laouts .libraryUploadZone {
  min-height: 0 !important;
  padding: 14px 14px !important;
}
body.laouts .libraryUploadZone__inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 !important;
}
body.laouts .libraryUploadZone__art {
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
}
body.laouts .libraryUploadZone__head {
  font-family: var(--laouts-font-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: var(--rc-text) !important;
  margin: 0 !important;
  letter-spacing: -0.005em !important;
  line-height: 1.2 !important;
}
body.laouts .libraryUploadZone__sub {
  font-family: var(--laouts-font-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--rc-text-muted) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
body.laouts .libraryUploadLink {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-family: var(--laouts-font-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--rc-text) !important;
  cursor: pointer !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
body.laouts .libraryUploadLink:hover {
  color: var(--rc-text-soft) !important;
}

/* ──────────────────────── Tool Rail · active state acid ──────────────────────── */
body.laouts .laoutsToolRail__btn--active {
  background: rgba(200, 232, 123, 0.12) !important;
  color: var(--rc-accent) !important;
  border-left-color: var(--rc-accent) !important;
}

/* ──────────────────────── Welcome overlay · final palette align ──────────────────────── */
body.laouts .laoutsWelcome__card {
  background:
    radial-gradient(45% 30% at 100% 0%, rgba(200, 232, 123, 0.10), transparent 60%),
    var(--rc-panel) !important;
  border-color: var(--rc-divider) !important;
}
body.laouts .laoutsWelcome__path {
  background: var(--rc-card) !important;
  border-color: transparent !important;
}
body.laouts .laoutsWelcome__path:hover {
  background: var(--rc-card-hover) !important;
  border-color: var(--rc-accent) !important;
}

/* ──────────────────────── Shortcuts cheatsheet · final palette align ──────────────────────── */
body.laouts .laoutsShortcuts__card {
  background:
    radial-gradient(35% 30% at 100% 0%, rgba(200, 232, 123, 0.10), transparent 60%),
    var(--rc-panel) !important;
  border-color: var(--rc-divider) !important;
}
body.laouts .laoutsShortcuts__group { background: var(--rc-card); border-radius: 10px; padding: 14px; }
body.laouts .laoutsShortcuts__row { border-bottom-color: var(--rc-divider) !important; }
body.laouts .laoutsShortcuts__keys kbd {
  background: var(--rc-tile) !important;
  border-color: transparent !important;
  color: var(--rc-text) !important;
}

/* ──────────────────────── Spread variety arrows · 3 chevron pairs ──────────────────────── */
/** Three small ‹ › chevron pairs pinned above the spread, positioned over
 *  the LEFT page, the CENTER seam, and the RIGHT page. Each pair toggles a
 *  different scope of the layout. */
body.laouts .laoutsSpreadArrows {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  gap: 0;
  margin: 6px auto 8px auto;
  padding: 0 4px;
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: 6;
  pointer-events: auto;
  user-select: none;
}
body.laouts .laoutsSpreadArrows__pair {
  display: inline-flex;
  gap: 4px;
  background: rgba(13, 13, 15, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 2px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.laouts .laoutsSpreadArrows__arrow {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--rc-text, #fff);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 0;
  opacity: 0.78;
  transition: background 140ms ease, color 140ms ease, opacity 140ms ease, transform 100ms ease;
}
body.laouts .laoutsSpreadArrows__arrow:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.10);
}
body.laouts .laoutsSpreadArrows__arrow:active,
body.laouts .laoutsSpreadArrows__arrow--pressed {
  transform: scale(0.9);
  background: rgba(255, 255, 255, 0.16);
}
body.laouts .laoutsSpreadArrows__arrow:focus-visible {
  outline: 2px solid var(--rc-accent, #fff);
  outline-offset: 1px;
}
body.laouts .laoutsSpreadArrows__arrow span {
  display: inline-block;
  transform: translateY(-1px);
}
/** Center pair: subtle accent so users know it reshuffles the whole spread. */
body.laouts .laoutsSpreadArrows__pair[data-scope="mid"] {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.14);
}
body.laouts .laoutsSpreadArrows__pair[data-scope="mid"] .laoutsSpreadArrows__arrow {
  opacity: 0.92;
}

/** Pulse ring on the half of the spread that was changed.
 *  We can't easily mask just one half of a canvas, so we use an overlay
 *  ::before / ::after on the bookSpreadFrame that rings the appropriate side. */
body.laouts #wrap.bookSpreadFrame { position: relative; }
body.laouts #wrap.bookSpreadFrame::before,
body.laouts #wrap.bookSpreadFrame::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  pointer-events: none;
  border-radius: 4px;
  opacity: 0;
  box-shadow: 0 0 0 0 rgba(255,255,255,0) inset;
  transition: none;
}
body.laouts #wrap.bookSpreadFrame::before { left: 0; }
body.laouts #wrap.bookSpreadFrame::after  { right: 0; }
@keyframes laoutsArrowPulseRing {
  0%   { opacity: 0.0; box-shadow: inset 0 0 0 0px   rgba(255,255,255,0.00), inset 0 0 26px 6px rgba(255,255,255,0.00); }
  18%  { opacity: 1.0; box-shadow: inset 0 0 0 2.5px rgba(255,255,255,0.55), inset 0 0 32px 6px rgba(255,255,255,0.16); }
  100% { opacity: 0.0; box-shadow: inset 0 0 0 1px  rgba(255,255,255,0.00), inset 0 0 0 0px rgba(255,255,255,0.00); }
}
body.laouts #wrap.bookSpreadFrame.laouts-arrow-pulse-left::before {
  animation: laoutsArrowPulseRing 700ms ease-out;
}
body.laouts #wrap.bookSpreadFrame.laouts-arrow-pulse-right::after {
  animation: laoutsArrowPulseRing 700ms ease-out;
}
body.laouts #wrap.bookSpreadFrame.laouts-arrow-pulse-both::before,
body.laouts #wrap.bookSpreadFrame.laouts-arrow-pulse-both::after {
  animation: laoutsArrowPulseRing 700ms ease-out;
}

/** When in focus mode, recenter the arrows tighter to the canvas. */
body.laouts.laouts--focusMode .laoutsSpreadArrows {
  margin-top: 4px;
  margin-bottom: 6px;
}

/** Compact at narrow widths · arrows shrink. */
@media (max-width: 920px) {
  body.laouts .laoutsSpreadArrows { padding: 0 2px; }
  body.laouts .laoutsSpreadArrows__arrow { width: 20px; height: 20px; font-size: 13px; }
}

/* ──────────────────────── Hide bottom-left engine pulse widget ──────────────────────── */
/** Christina: "I don't like the engine pulse on the bottom left, it's un-necessary." */
body.laouts .laoutsPulse,
body.laouts #laoutsPulse,
body.laouts [class*="laoutsPulse"]:not([class*="laoutsSpreadArrows"]) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ──────────────────────── Library tiles · square-lock + dark theme ──────────────────────── */
/** Force every photo tile in the library to render as a proper square.
 *  Without this, tiles can collapse into thin pills when the column
 *  gets narrow or when an image preview hasn't loaded yet. Engine still
 *  controls the grid layout — we just lock per-tile dimensions. */
/** Library column needs to be a flex column and let the photo grid expand
 *  to fill remaining space, then scroll when there are more photos than fit. */
body.laouts #imageGalleryDock {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.laouts #imageGalleryDock .libraryUploadZone,
body.laouts #imageGalleryDock .libraryTopBar,
body.laouts #imageGalleryDock .laoutsLibTools {
  flex: 0 0 auto !important;
}
body.laouts #imageGalleryDock .userGallery {
  /* Tiles are FIXED size (not flexible). With explicit columns AND explicit
   * row size, the grid CANNOT compress photos vertically to fit them all
   * in the visible area — instead the gallery overflows and scrolls. */
  --laouts-tile-px: 80px;
  grid-template-columns: repeat(auto-fill, var(--laouts-tile-px)) !important;
  grid-auto-rows: var(--laouts-tile-px) !important;
  gap: 6px !important;
  padding: 0 0 16px 0 !important;
  justify-content: center !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  /* Hard fallback if flex math doesn't resolve to a constrained height —
   * cap to viewport minus the chrome above (topbar + upload zone + stats). */
  max-height: calc(100vh - 240px) !important; max-height: calc(100dvh - 240px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}
/** Each tile is now sized by the grid track — full width AND height of
 *  the auto-row (the variable). aspect-ratio 1:1 is naturally enforced. */
body.laouts #imageGalleryDock .userGallery .galleryItem {
  width: var(--laouts-tile-px, 80px) !important;
  height: var(--laouts-tile-px, 80px) !important;
  /** Kill any default button styling that could create a top edge line
   *  on portrait/vertical photos. */
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border-top-color: transparent !important;
}
/** Hide the caption (engine sets display:none but force it gone). It can
 *  briefly render as a 1px-tall gray strip on top of a vertical photo
 *  before the engine's display:none kicks in. */
body.laouts #imageGalleryDock .userGallery .galleryItem .galleryItemCaption {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
/** Suppress any pseudo-elements on the thumb / item that might paint a
 *  line at the top edge of a tile. */
body.laouts #imageGalleryDock .userGallery .galleryItem::before,
body.laouts #imageGalleryDock .userGallery .galleryItem::after,
body.laouts #imageGalleryDock .userGallery .galleryItem .galleryThumb::before,
body.laouts #imageGalleryDock .userGallery .galleryItem .galleryThumb::after {
  display: none !important;
}
/** Selected state ::before from the engine *is* allowed since it draws a
 *  decorative purple wash; we override it to use the engine's white ring
 *  via box-shadow on the host instead, then suppress here. */
body.laouts #imageGalleryDock .userGallery .galleryItem.selected::before {
  display: none !important;
}
/** Density override — small / medium / large thumbs (driven by the
 *  stats card's density buttons via body[data-laouts-lib-density]). */
body.laouts[data-laouts-lib-density="sm"] #imageGalleryDock .userGallery {
  --laouts-tile-px: 56px;
  gap: 4px !important;
}
body.laouts[data-laouts-lib-density="md"] #imageGalleryDock .userGallery {
  --laouts-tile-px: 80px;
  gap: 6px !important;
}
body.laouts[data-laouts-lib-density="lg"] #imageGalleryDock .userGallery {
  --laouts-tile-px: 110px;
  gap: 8px !important;
}
/** Custom scrollbar so users see they CAN scroll. */
body.laouts #imageGalleryDock .userGallery::-webkit-scrollbar { width: 8px; }
body.laouts #imageGalleryDock .userGallery::-webkit-scrollbar-track { background: transparent; }
body.laouts #imageGalleryDock .userGallery::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.16);
  border-radius: 999px;
}
body.laouts #imageGalleryDock .userGallery::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.28);
}
body.laouts #imageGalleryDock .userGallery .galleryItem {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  background: var(--rc-tile, #54565c) !important;
  /** No border — the 6px grid gap separates tiles cleanly. A border was
   *  reading as a "gray line" at the top of portrait photos (because the
   *  white border contrasted against bright sky/light tops). */
  border: 0 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.30) !important;
  /** Full opacity always — every photo stays clearly visible. */
  opacity: 1 !important;
}
body.laouts #imageGalleryDock .userGallery .galleryItem .galleryThumb {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: var(--rc-tile, #54565c) !important;
}
/** Photos must FILL the square thumbnail. We absolutely-position the image
 *  to inset:0 so it physically covers every pixel of the tile — no inline
 *  white-space, no descender gap, no flex/grid layout slop, no chance of
 *  a gray sliver appearing at any edge. */
body.laouts #imageGalleryDock .userGallery .galleryItem .galleryThumb img,
body.laouts #imageGalleryDock .userGallery .galleryItem .galleryThumbImg {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  vertical-align: top !important;
  border: 0 !important;
}
body.laouts #imageGalleryDock .userGallery .galleryItem .galleryThumb {
  position: relative !important;
}
body.laouts #imageGalleryDock .userGallery .galleryItem.selected {
  border-color: var(--rc-accent, #fff) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.18), 0 6px 16px rgba(0,0,0,0.42) !important;
}
/** Don't dim any tile — every photo stays fully visible so the user can
 *  see, scroll, and select freely. The selected state is communicated via
 *  the white border ring instead. */
body.laouts.has-selection #imageGalleryDock .userGallery .galleryItem:not(.selected) {
  opacity: 1 !important;
}

/* Empty userGallery: when state.userLibrary has 0 entries, the engine
 * leaves #userGallery as an empty div. Make sure no stray ::before /
 * ::after pseudo-elements paint pills when it's empty. */
body.laouts #userGallery:empty::before,
body.laouts #userGallery:empty::after {
  content: none !important;
  display: none !important;
}