/* LuxuryAI shell — CoinLytix-style sidebar + topbar + dashboard surfaces.
   All accents resolve to gold via the existing --accent / --accent-bright tokens
   defined in index.html. This file only adds; it does not redefine tokens. */

:root {
  --lx-sidebar-w: 224px;
  --lx-topbar-h: 60px;
  --lx-card-radius: 18px;
  --lx-row-radius: 12px;
  --lx-positive: #4ade80;
  --lx-negative: #fca5a5;
  --lx-live: #4ade80;
  --lx-sidebar-bg: #131313;
  --lx-page-pad: 16px;       /* outer page padding (sidebar/topbar from viewport) */
  --lx-card-gap: 22px;       /* gap between cards / between rows of cards */
  --lx-page-bg: #050505;
}

/* Body wash is intentionally transparent so the Remix theme's body::before
   (gold wave SVG, mix-blend-mode: screen) and body::after (radial gold blobs +
   vignette) can paint through. lx-theme-remix.css already sets html/body to
   var(--ink-0) — a solid wash here was hiding the glow layer entirely. */
body:has(> .lx-app) { background: transparent; }

/* ── App grid ─────────────────────────────────────────────────────────── */
.lx-app {
  display: grid;
  grid-template-columns: var(--lx-sidebar-w) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  min-height: 100vh;
}
/* Shell scroll architecture: the .lx-app grid is pinned at 100vh and the
   MAIN column is the scroll container. The sidebar can't scroll with the
   page because its grid container has no scroll context to begin with.
   PR #186 previously made the body the scroll container with `position:
   sticky` on the sidebar, but that approach was fragile — the source
   theme's `.sidebar { position: relative }` and `html, body { height:
   100% }` together meant sticky silently failed for some viewports and
   the sidebar scrolled away with content. Compound selectors hit equal
   specificity in lx-theme-remix.css; this architecture sidesteps the
   cascade fight entirely. */
.lx-app.app {
  height: 100vh;
  overflow: hidden;
}
.lx-main.main {
  height: 100vh;
  min-height: 0;        /* let the flex children shrink so overflow-y can scroll */
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── Sidebar (card) ───────────────────────────────────────────────────── */
.lx-sidebar {
  background: linear-gradient(180deg, oklch(0.10 0.004 60), oklch(0.13 0.005 60));
  /* Designer-flat: no border, no border-radius, no card shadow. Sidebar reads
     as a vertical column blending with the ambient page bg rather than a
     floating card. Banner.png at top picks up the brand. */
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  padding: 0 14px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 30;
  overflow: hidden;
  isolation: isolate;
}
/* Gold rim-light along the top edge of the sidebar — mirrors source .sidebar::before */
.lx-sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right,
    oklch(0.95 0.10 75 / 0.5) 0%,
    oklch(0.92 0.13 78 / 0.7) 30%,
    oklch(0.84 0.12 75 / 0.4) 60%,
    transparent 100%);
  z-index: 2;
  filter: blur(0.5px);
  pointer-events: none;
}
.lx-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 4px 8px 22px;
}
.lx-sidebar-brand .icon {
  width: 22px;
  height: 22px;
  color: var(--accent);
  fill: var(--accent);
  stroke: var(--accent);
}
.lx-sidebar-brand-img {
  height: 28px;
  width: auto;        /* preserve the logo's natural aspect ratio */
  display: block;
  flex-shrink: 0;
}

/* Brand banner — banner.png as a flat hero header bleeding to the sidebar's
   side edges. Sidebar is now flat (no card radius); banner just clears the
   horizontal padding so it spans the full column width. */
.lx-sidebar .brand-banner {
  display: block;
  margin: 0 -14px 14px;
  border: none;
  border-bottom: 1px solid var(--ink-3);
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  box-shadow: none;
  text-decoration: none;
  flex-shrink: 0;
}

/* Middle scroll region: contains menu + library navs. When the user has many
   projects/prompts and the sidebar would otherwise overflow, only this region
   scrolls — the brand banner (top) and footer (credits + user + log out)
   stay pinned. */
.lx-sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
}
.lx-sidebar-scroll::-webkit-scrollbar { width: 4px; }
.lx-sidebar-scroll::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
.lx-sidebar-footer { flex-shrink: 0; }
.lx-sidebar .brand-banner::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 10%; right: 10%; height: 1px;
  background: linear-gradient(to right, transparent, oklch(0.85 0.13 75 / 0.5), transparent);
  pointer-events: none;
}
.lx-sidebar .brand-banner img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  object-position: center;
}

/* Anchor-based sidebar buttons (.sidebar-cta and .user-row) need the default
   underline cleared — the source styles those as <button>/<div> with onClick
   in React. In our static HTML they're real <a> elements. */
.lx-sidebar .sidebar-cta,
.lx-sidebar .user-row {
  text-decoration: none;
}
.lx-sidebar-brand span {
  font-size: 17px;
  font-weight: 700;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.3px;
}
.lx-sidebar-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-dim);
  padding: 0 12px 8px;
}
.lx-sidebar-label + .lx-sidebar-nav + .lx-sidebar-label { padding-top: 16px; }
.lx-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
  scrollbar-width: thin;
}
/* Library navs (Projects, Prompt Library) sit at natural height directly
   under their label so multiple sections don't end up with empty space
   between them. If a section's sublist gets long, only that sublist
   scrolls — not the whole sidebar. Logout is pushed to the bottom via
   margin-top:auto on .lx-logout. */
.lx-sidebar-library {
  flex: 0 0 auto;
}
.lx-sidebar-library .lx-sidebar-sublist {
  max-height: 240px;
  overflow-y: auto;
}
.lx-sidebar-nav::-webkit-scrollbar { width: 4px; }
.lx-sidebar-nav::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
.lx-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: inherit;
  text-align: left;
  width: 100%;
  position: relative;
  transition: color 0.12s, background 0.12s;
}
.lx-nav-item .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: inherit;
}
/* Hover: subtle elevated dark pill (matches the active state's surface
   language). Previous gold-gradient hover collapsed icon strokes against
   the warm bg and made glyphs disappear — keep icons on a dark surface so
   the gold/white stroke stays visible. */
.lx-nav-item:hover {
  color: var(--text);
  background: #1a1a1a;
  font-weight: 600;
}
.lx-nav-item:hover .icon { color: var(--accent); }
.lx-nav-item:active { filter: brightness(0.96); transform: translateY(1px); }
/* Active state: clean elevated dark pill — definite "you're here" marker
   without the muddy white-tint. Icon picks up the gold accent so the row
   still reads brand-colored at a glance. */
.lx-nav-item.active {
  color: var(--text);
  background: #1f1f1f;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.lx-nav-item.active .icon { color: var(--accent); }
/* Hovering the active item: keep the active surface, just brighten slightly. */
.lx-nav-item.active:hover {
  background: #232323;
}
.lx-nav-item.active:hover .icon { color: var(--accent); }

.lx-logout {
  margin-top: auto;        /* pushed to the bottom of the sidebar column */
  border-top: 1px solid var(--border);
  padding-top: 18px;
  border-radius: 10px;
  color: var(--text-dim);
}
.lx-logout:hover { color: var(--accent); background: transparent; }
.lx-logout .icon { color: inherit; }

/* ── Topbar (card) ────────────────────────────────────────────────────── */
.lx-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Designer-flat: no card border/radius/shadow. Bleed out of .lx-main's
     horizontal padding so the topbar reaches the viewport right edge and
     the sidebar's right edge on the left. Margin-top stays 0 — .lx-main
     has no padding-top, so the topbar is already at viewport top. */
  margin: 0 calc(-1 * var(--lx-page-pad)) 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  height: var(--lx-topbar-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
}

/* Topbar anchor buttons (upgrade-btn, lx-cta-pill) are real <a> elements in
   our HTML; the source uses divs/buttons with onClick. Clear the default
   underline so the labels read as buttons. */
.lx-topbar .upgrade-btn,
.lx-topbar .lx-cta-pill { text-decoration: none; }
.lx-burger {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.lx-burger .icon { width: 18px; height: 18px; }
.lx-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 320px;
  max-width: 40vw;
  margin-left: auto;
  height: 40px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 12px 0 14px;
  color: var(--text);
  transition: border-color 0.12s;
}
.lx-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.08);
}
.lx-search .icon { width: 16px; height: 16px; color: var(--text-dim); flex-shrink: 0; }
.lx-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
}
.lx-search input::placeholder { color: var(--text-dim); }
/* Hide non-matching sidebar items while the topbar search is active. */
.lx-search-hidden { display: none !important; }
.lx-kbd {
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  color: #1a1a1a;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: inherit;
  flex-shrink: 0;
  letter-spacing: 0.2px;
}

.lx-topbar-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.lx-icon-btn {
  width: 38px;
  height: 38px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.lx-icon-btn:hover {
  background: var(--surface-elevated);
  color: var(--text);
  border-color: var(--border-2);
}
.lx-icon-btn .icon { width: 16px; height: 16px; }

.lx-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  color: #1a1a1a;
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: filter 0.12s, transform 0.12s;
  white-space: nowrap;
}
.lx-cta-pill:hover { filter: brightness(0.96); }
.lx-cta-pill:active { transform: translateY(1px); }
.lx-cta-pill .icon { width: 14px; height: 14px; color: #1a1a1a; }

/* Balance pill + topup-return toast live in /assets/css/credits.css so the
   public pricing page can include them without dragging in lx-shell. */

/* ── Main column + content surface ────────────────────────────────────── */
.lx-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* No gap between topbar and content — topbar bleeds out via negative
     margin, content sits flush under it. Internal panel spacing is
     handled by .lx-content's own gap. Padding-top is 0 for the same
     reason; padding around the other three sides gives the content
     area its breathing room from viewport edges + the sidebar. */
  gap: 0;
  padding: 0 var(--lx-page-pad) var(--lx-page-pad);
}
.lx-content {
  display: flex;
  flex-direction: column;
  gap: var(--lx-card-gap);
  padding: 20px 0 var(--lx-card-gap);
  min-width: 0;
}
.lx-content > .verify-banner { margin: 0; }
/* Each panel is its own flex column so the cards inside (hero, stat-grid,
   bottom-split, etc.) get the same `--lx-card-gap` between them. Without
   this, the .lx-content gap only applies between sibling panels and the
   cards inside collapse onto each other. */
.lx-content > .panel.active {
  display: flex;
  flex-direction: column;
  gap: var(--lx-card-gap);
}

/* ── Page title (replaces .page-header h1 in tool panels) ─────────────── */
.lx-page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.lx-page-sub {
  color: var(--text-muted);
  font-size: 13.5px;
  margin-top: 6px;
}
.lx-panel-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* ── Reusable card head ───────────────────────────────────────────────── */
.lx-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.lx-card-title-cluster {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.lx-card-title-cluster h2,
.lx-card-title-cluster h3 {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text);
}
.lx-card-title-cluster p {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}
.lx-icon-chip {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--accent);
  flex-shrink: 0;
}
.lx-icon-chip .icon { width: 16px; height: 16px; }
.lx-icon-btn.lx-ghost {
  background: transparent;
  border: 0;
  color: var(--text-dim);
}
.lx-icon-btn.lx-ghost:hover { color: var(--text); background: var(--surface-2); }

/* ── Hero card (Professional Highlights) ──────────────────────────────── */
.lx-hero-card {
  background: linear-gradient(180deg, #1d1d1d 0%, #181818 100%);
  border: 1px solid #2a2a2a;
  border-radius: var(--lx-card-radius);
  padding: 22px 28px 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 12px 32px -16px rgba(0, 0, 0, 0.6);
}
.lx-hero-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 32px;
  align-items: stretch;
}
.lx-hero-left { justify-content: space-between; min-height: 130px; }
.lx-hero-left { display: flex; flex-direction: column; gap: 10px; }
.lx-hero-sub {
  color: var(--text-muted);
  font-size: 12.5px;
}
.lx-hero-num {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--text);
  line-height: 1;
}
.lx-hero-deltas {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.lx-delta {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}
.lx-delta-pos {
  background: rgba(74, 222, 128, 0.12);
  color: var(--lx-positive);
}
.lx-delta-neg {
  background: rgba(252, 165, 165, 0.12);
  color: var(--lx-negative);
}
.lx-delta-secondary {
  font-size: 12px;
  color: var(--text-muted);
}
.lx-hero-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.lx-hero-chart {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  height: 90px;
  align-items: end;
}
.lx-bar {
  width: 100%;
  height: 100%;
  display: block;
  max-width: 56px;
  margin: 0 auto;
}
.lx-hero-months {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.lx-month {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: var(--text-dim);
}
.lx-month strong {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11.5px;
}

/* ── Section head (Top Assets) ────────────────────────────────────────── */
.lx-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px;
}
.lx-section-head h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.lx-section-head p {
  color: var(--text-muted);
  font-size: 12.5px;
  margin-top: 2px;
}
.lx-section-controls {
  display: flex;
  gap: 8px;
}

/* ── Stat cards row ───────────────────────────────────────────────────── */
.lx-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 110px;
  gap: var(--lx-card-gap);
}
.lx-stat-card {
  background: linear-gradient(180deg, #1d1d1d 0%, #181818 100%);
  border: 1px solid #2a2a2a;
  border-radius: var(--lx-card-radius);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 8px 20px -14px rgba(0, 0, 0, 0.55);
  min-width: 0;
}
.lx-stat-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lx-stat-titles { display: flex; flex-direction: column; min-width: 0; }
.lx-stat-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lx-stat-sub {
  font-size: 10.5px;
  color: var(--text-dim);
}
.lx-stat-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.lx-stat-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.5px;
}
.lx-pct-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(74, 222, 128, 0.12);
  color: var(--lx-positive);
}
.lx-pct-badge.is-neg {
  background: rgba(252, 165, 165, 0.12);
  color: var(--lx-negative);
}
.lx-stat-spark {
  position: relative;
  height: 56px;
  margin-top: 2px;
}
.lx-stat-spark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.lx-stat-spark-tag {
  position: absolute;
  top: 2px;
  left: 0;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
}

.lx-stat-add {
  background: transparent;
  border: 1px dashed var(--border-2);
  border-radius: var(--lx-card-radius);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: border-color 0.12s, color 0.12s;
}
.lx-stat-add .icon { width: 18px; height: 18px; }
.lx-stat-add:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Bottom split: Latest Generations + Latest Batches ────────────────── */
.lx-bottom-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: var(--lx-card-gap);
}
.lx-tx-card,
.lx-batch-card {
  background: linear-gradient(180deg, #1d1d1d 0%, #181818 100%);
  border: 1px solid #2a2a2a;
  border-radius: var(--lx-card-radius);
  padding: 22px 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 12px 28px -16px rgba(0, 0, 0, 0.6);
  min-width: 0;
}
.lx-card-head-stats {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lx-live-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
}
.lx-live-dot > span:first-child {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lx-live);
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5);
  animation: lxLivePulse 1.6s infinite;
}
@keyframes lxLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4); }
  70%  { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.lx-success-rate {
  font-size: 11.5px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
.lx-success-rate strong {
  color: var(--lx-positive);
  font-size: 14px;
  font-weight: 700;
}

.lx-tx-list,
.lx-batch-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lx-tx-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--lx-row-radius);
  font-size: 12.5px;
  flex-wrap: wrap;
}
.lx-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(74, 222, 128, 0.16);
  color: var(--lx-positive);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lx-check.is-pending {
  background: rgba(234, 179, 8, 0.18);
  color: #fde68a;
}
.lx-check.is-err {
  background: rgba(252, 165, 165, 0.18);
  color: var(--lx-negative);
}
.lx-check .icon { width: 12px; height: 12px; }
.lx-tx-type {
  color: var(--text);
  font-weight: 600;
  min-width: 0;
}
.lx-tx-meta {
  color: var(--text-muted);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lx-tx-meta strong {
  color: var(--text);
  font-weight: 600;
}
.lx-tx-time {
  color: var(--text-dim);
  font-size: 11.5px;
  margin-left: auto;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
}

.lx-batch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--lx-row-radius);
}
.lx-batch-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lx-batch-icon .icon { width: 14px; height: 14px; }
.lx-batch-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.lx-batch-main {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lx-batch-sub {
  font-size: 11px;
  color: var(--text-muted);
}
.lx-batch-meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.lx-batch-date {
  font-size: 10.5px;
  color: var(--text-dim);
}
.lx-batch-id {
  font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--text-muted);
}

/* ── Bottom-anchored prompt bar (Image Gen + Video Gen) ──────────────── */
/* Higgsfield-style: result content takes the full width on top, the prompt
   form is a single horizontal card sticky at the bottom of the viewport.
   align-items: stretch is critical — without it, the legacy
   `.tool-layout { align-items: start }` from the inline stylesheet leaves
   .tool-main and .tool-form at their natural (narrow) widths instead of
   filling the column. */
.lx-content .tool-layout.lx-tool-bottom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  grid-template-columns: none;
  gap: var(--lx-card-gap);
  min-height: calc(100vh - var(--lx-topbar-h) - 4 * var(--lx-page-pad));
  width: 100%;
}
.lx-content .tool-layout.lx-tool-bottom .tool-main {
  order: 1;
  flex: 1;
  width: 100%;
}
.lx-content .tool-layout.lx-tool-bottom .tool-form {
  order: 2;
  position: sticky;
  top: auto;
  bottom: var(--lx-page-pad);
  z-index: 5;
  margin-top: auto;
  width: 100%;
}
.lx-prompt-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 14px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.lx-prompts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lx-prompt-row-main {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.lx-prompt-remove {
  flex-shrink: 0;
  align-self: stretch;
  width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.lx-prompt-remove:hover {
  background: var(--surface-3);
  border-color: var(--border-2);
  color: var(--text);
}
.lx-prompt-remove .icon {
  width: 14px;
  height: 14px;
}
.lx-prompt-input {
  flex: 1;
  min-width: 0;
  min-height: 50px;
  resize: none;
  padding: 12px 14px;
  font-size: 13.5px;
}
.lx-prompt-go {
  margin: 0 !important;
  padding: 8px 18px;
  align-self: stretch;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1.1;
}
/* Any Generate-style button whose innerHTML carries the two label+credits
   spans (set by labelWithCost in lx-modules.js) stacks them on two
   lines: action label on top, cost below in a smaller dimmer style. */
.lx-btn-label,
.lx-btn-credits { display: block; line-height: 1.15; }
.lx-btn-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.lx-btn-credits {
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.78;
  letter-spacing: 0.01em;
  margin-top: 2px;
}
.lxm-btn:has(> .lx-btn-credits) {
  padding-top: 9px;
  padding-bottom: 9px;
  line-height: 1.1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.lx-prompt-row-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
/* Compact chips inside the prompt bar — frees horizontal space for the
   prompt textarea so the floating clipboard tray doesn't collide. */
.lx-prompt-row-settings .lxm-chip {
  padding: 5px 10px;
  font-size: 11.5px;
}
.lx-prompt-row-settings .lxm-chip .icon {
  width: 12px;
  height: 12px;
}
.lx-prompt-row-settings .lx-prompt-model-badge {
  padding: 4px 9px;
  font-size: 11px;
}
/* Model picker chip — wider menu with grouped sections so the eight video
   models read as a coherent list rather than a flat dropdown. */
.lx-model-chip > .lxm-chip-menu {
  min-width: 220px;
  padding: 6px;
}
.lxm-chip-section {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-dim);
  font-weight: 700;
  padding: 8px 10px 4px;
}
.lxm-chip-section + .lxm-chip-section,
.lxm-chip-opt + .lxm-chip-section {
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
/* Always-visible mirror of the dropzone's current refs. Sits above the
   prompt input inside the same prompt card so the user always sees what
   they uploaded — the popover contents otherwise vanish on close. */
.lx-ref-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 8px;
}
.lx-ref-strip[hidden] { display: none; }
.lx-ref-strip-thumb {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-2, #3A3A3A);
  background: var(--surface-2, #181818);
  flex-shrink: 0;
}
.lx-ref-strip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lx-ref-strip-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lx-ref-strip-remove:hover { background: rgba(220, 38, 38, 0.85); }

/* Start/End slot badge — only used by the video ref-strip
   (#lxm-vid-ref-strip) because the image ref-strip has just one slot. */
.lx-ref-strip-badge {
  position: absolute;
  bottom: 3px;
  left: 3px;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  pointer-events: none;
}

/* Static "what model are we using" pill in the settings row. Image-Gen is
   the only consumer right now (Nano Banana Pro is hardcoded server-side);
   video-gen has its own <select> already. */
.lx-prompt-model-badge {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #1a1a1a;
  background: linear-gradient(90deg, var(--accent, #d4af37), var(--accent-bright, #f5e6a8));
}

/* Reference-image chip — popover hosts the dropzone */
.lx-ref-chip > .lxm-chip { gap: 5px; }
.lx-ref-chip > .lxm-chip .icon { width: 13px; height: 13px; color: var(--text-muted); }
.lx-ref-count {
  background: var(--accent);
  color: #1a1a1a;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 2px;
  letter-spacing: 0.2px;
}
.lx-prompt-row-settings .lxm-chip-menu {
  bottom: calc(100% + 6px);
  top: auto;
}
.lx-ref-menu {
  width: 320px;
  padding: 10px;
}
.lx-ref-menu .lxm-dropzone { margin-bottom: 0; }
.lx-ref-url-label {
  margin-top: 10px;
  display: block;
  font-size: 11px;
}
.lx-prompt-status,
.lx-prompt-error { margin-top: 0; }

/* ── History tab ──────────────────────────────────────────────────────── */
.lx-history-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 4px;
}
.lx-history-filter {
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.lx-history-filter:hover { border-color: var(--border-2); }
.lx-history-filter.active {
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  color: #1a1a1a;
  border-color: transparent;
  font-weight: 700;
}
.lx-toggle-chip {
  cursor: pointer;
  font-family: inherit;
}
.lx-toggle-chip.active {
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  color: #1a1a1a;
  border-color: transparent;
  font-weight: 700;
}
.lx-toggle-chip.active .lx-chip-meta {
  color: rgba(26, 26, 26, 0.75);
}
.lx-toggle-chip[aria-pressed="false"] {
  opacity: 0.85;
}
.lx-chip-meta {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 500;
}
.lx-history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lx-history-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  background: linear-gradient(180deg, #1d1d1d 0%, #181818 100%);
  border: 1px solid #2a2a2a;
  border-radius: var(--lx-card-radius);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 8px 18px -14px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.lx-history-card:hover { border-color: var(--border-2); }
.lx-history-card.is-expanded {
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 26px -16px rgba(212, 175, 55, 0.25);
}
.lx-history-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--accent);
  flex-shrink: 0;
}
.lx-history-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lx-history-thumb .icon { width: 22px; height: 22px; }
.lx-history-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.lx-history-title {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lx-history-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.lx-history-toggle {
  color: var(--text-dim);
  transition: transform 0.18s, color 0.12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}
.lx-history-toggle .icon { width: 16px; height: 16px; }
.lx-history-card:hover .lx-history-toggle { color: var(--text-muted); }
.lx-history-card.is-expanded .lx-history-toggle {
  transform: rotate(90deg);
  color: var(--accent);
}
.lx-history-expand {
  grid-column: 1 / -1;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  cursor: default;
}
.lx-history-expand img,
.lx-history-expand video {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 12px;
  display: block;
}
.lx-history-expand a {
  display: inline-block;
  margin-top: 10px;
}
.lx-history-empty {
  color: var(--text-dim);
  padding: 28px;
  text-align: center;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--lx-card-radius);
}

/* ── Tool-panel re-skin (cosmetic only — DOM stays unchanged) ─────────── */
.lx-content .lxm-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--lx-card-radius);
  padding: 22px 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.lx-content .tool-form {
  top: calc(var(--lx-topbar-h) + 16px);
  /* Sit below the sticky topbar (z-index 20) so the form column doesn't
     bleed over the search-bar card while the page scrolls. */
  z-index: 10;
}
.lx-content .tool-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
/* (Legacy .panel-narrow override removed — the activity panel no longer
   carries that class, and any other panel-narrow consumer would have
   forced display:flex over the .panel { display:none } base, breaking
   tab switching. Layout for the activity panel comes from the generic
   .lx-content > .panel.active rule.) */
/* Soften the inherited .page-header h1 (uppercase 34px) inside the new shell. */
.lx-content .page-header { margin-bottom: 0; padding: 0 4px; }
.lx-content .page-header h1 {
  font-size: 22px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.lx-content .page-header p {
  font-size: 13.5px;
  margin-top: 6px;
}

/* ── Activity panel re-skin ───────────────────────────────────────────── */
/* The lxm-activity render is dynamic markup from lx-modules.js — these
   selectors only kick in when it's mounted inside .lx-content so the
   Activity tab inherits the same card-on-page treatment as Overview. */
.lx-content .lxm-activity {
  display: flex;
  flex-direction: column;
  gap: var(--lx-card-gap);
}
.lx-content #lxm-act-stats {
  display: flex;
  flex-direction: column;
  gap: var(--lx-card-gap);
}
.lx-content .lxm-activity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lx-card-gap);
}
.lx-content .lxm-activity-stat {
  background: linear-gradient(180deg, #1d1d1d 0%, #181818 100%);
  border: 1px solid #2a2a2a;
  border-radius: var(--lx-card-radius);
  padding: 20px 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 8px 20px -14px rgba(0, 0, 0, 0.55);
}
.lx-content .lxm-activity-bars {
  background: linear-gradient(180deg, #1d1d1d 0%, #181818 100%);
  border: 1px solid #2a2a2a;
  border-radius: var(--lx-card-radius);
  padding: 22px 26px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 8px 20px -14px rgba(0, 0, 0, 0.55);
}
.lx-content .lxm-activity-h {
  margin: 0 4px;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  text-transform: none;
  letter-spacing: -0.2px;
}
.lx-content .lxm-recent {
  background: linear-gradient(180deg, #1d1d1d 0%, #181818 100%);
  border: 1px solid #2a2a2a;
  border-radius: var(--lx-card-radius);
  padding: 18px 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 12px 28px -16px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lx-content .lxm-recent .lxm-recent-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
}
.lx-content .lxm-recent .lxm-recent-card:hover {
  background: var(--surface-3);
  border-color: var(--border-2);
}
.lx-content .lxm-recent .lxm-recent-empty {
  background: transparent;
  border: 0;
  padding: 18px;
  color: var(--text-dim);
}
/* Recent-section wrapper inside tool panels: title + list. */
.lx-content .lxm-recent-section {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lx-content .lxm-recent-section .lxm-recent-h {
  margin: 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  text-transform: none;
  letter-spacing: -0.2px;
}

/* ── Mobile drawer ────────────────────────────────────────────────────── */
/* Drawer kicks in at iPad-Landscape (≤1024). Below that the sidebar is
   off-canvas and the burger toggles it via body.lx-drawer-open. */
@media (max-width: 1024px) {
  .lx-app { grid-template-columns: 1fr; }
  .lx-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 100;
  }
  body.lx-drawer-open .lx-sidebar { transform: translateX(0); }
  body.lx-drawer-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 90;
  }
  .lx-burger { display: inline-flex; }
  .lx-search { max-width: none; }
  .lx-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .lx-stat-add { grid-column: 1 / -1; min-height: 64px; flex-direction: row; }
  .lx-bottom-split { grid-template-columns: 1fr; }
  .lx-hero-body { grid-template-columns: 1fr; gap: 18px; }
}
@media (min-width: 1025px) { .lx-burger { display: none; } }
@media (max-width: 600px) {
  .lx-stat-grid { grid-template-columns: 1fr; }
  .lx-stat-add { grid-column: 1 / -1; }
  .lx-hero-num { font-size: 40px; letter-spacing: -1px; }
  .lx-content { padding: 16px; gap: 16px; }
  .lx-topbar { padding: 0 16px; gap: 10px; }
  .lx-tx-row { gap: 8px; }
  .lx-tx-time { margin-left: 0; }
  .lx-cta-pill span { display: none; }
  .lx-cta-pill { padding: 9px 12px; }
  .lx-icon-btn { width: 34px; height: 34px; }
}

/* ── Image lightbox ───────────────────────────────────────────────────── */
.lx-lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(8, 8, 8, 0.92);
  display: flex;
  padding: 32px 32px 32px;
}
.lx-lightbox[hidden] { display: none; }
.lx-lightbox-content {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: stretch;
}
.lx-lightbox-stage {
  min-width: 0; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.lx-lightbox-img,
.lx-lightbox-video {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.7);
  background: var(--surface-1);
}
.lx-lightbox-video[hidden],
.lx-lightbox-img[hidden] { display: none; }

/* Side panel — prompt + reference + meta + actions */
.lx-lightbox-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  overflow-y: auto;
  max-height: 100%;
}
.lx-lightbox-side::-webkit-scrollbar { width: 6px; }
.lx-lightbox-side::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }

.lx-lightbox-section { display: flex; flex-direction: column; gap: 8px; }
.lx-lightbox-section[hidden] { display: none; }
.lx-lightbox-section-h {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}
.lx-lightbox-prompt {
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}
.lx-lightbox-prompt::-webkit-scrollbar { width: 5px; }
.lx-lightbox-prompt::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
.lx-lightbox-prompt:empty::before {
  content: "—";
  color: var(--text-dim);
  font-size: 13px;
}

.lx-lightbox-ref {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 0.12s;
}
.lx-lightbox-ref:hover { border-color: var(--accent); }
.lx-lightbox-ref-thumb {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  background: var(--surface-2);
}

/* Multi-ref gallery — 2-column grid for compactness in the sidebar. Single
   ref renders full-width; 2+ refs share the row evenly. Each thumb is a
   clickable link that opens the full-size ref in a new tab. */
.lx-lightbox-ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 6px;
}
.lx-lightbox-ref-grid > a {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 0.12s;
}
.lx-lightbox-ref-grid > a:hover { border-color: var(--accent); }
.lx-lightbox-ref-grid img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 140px;
  object-fit: cover;
  background: var(--surface-2);
}
/* When only 1 ref, span full width so it's not awkwardly small. */
.lx-lightbox-ref-grid > a:only-child {
  grid-column: 1 / -1;
}
.lx-lightbox-ref-grid > a:only-child img {
  max-height: 200px;
  object-fit: contain;
}

/* Job ID pill — monospace, click-to-copy. Always visible (David explicitly
   asked for it on every preview regardless of media type). */
.lx-lightbox-job-id {
  display: inline-block;
  width: 100%;
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  word-break: break-all;
}
.lx-lightbox-job-id:hover {
  border-color: var(--accent);
  background: var(--surface-3);
}
.lx-lightbox-job-id.copied {
  color: var(--accent);
}

.lx-lightbox-meta {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.lx-lightbox-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
}
.lx-lightbox-meta-pill .icon { width: 12px; height: 12px; color: var(--text-muted); }

/* Action buttons — stacked vertical, cleaner than the old chip-pills */
.lx-lightbox-section-actions {
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}
.lx-lightbox-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.lx-lightbox-btn:hover {
  background: var(--surface-3);
  border-color: var(--border-2);
}
.lx-lightbox-btn .icon { width: 14px; height: 14px; }
.lx-lightbox-btn-primary {
  background: linear-gradient(180deg, var(--accent-bright) 0%, var(--accent) 100%);
  border-color: transparent;
  color: #1a1a1a;
  font-weight: 800;
  box-shadow: 0 4px 16px -8px rgba(212, 175, 55, 0.55), inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}
.lx-lightbox-btn-primary:hover {
  background: linear-gradient(180deg, var(--accent-bright) 0%, var(--accent) 100%);
  filter: brightness(1.04);
  border-color: transparent;
  color: #1a1a1a;
}
.lx-lightbox-btn-primary .icon { color: #1a1a1a; }

.lx-lightbox-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.lx-lightbox-close:hover { background: rgba(255, 255, 255, 0.15); }

@media (max-width: 900px) {
  .lx-lightbox { padding: 16px; }
  .lx-lightbox-content {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .lx-lightbox-side { max-height: 40vh; }
}

/* Generated-image card inside the result grid: image + action row.
   Replaces the old "<a target=_blank>" wrapper so users get a real
   preview before being sent off to the asset URL. */
.lx-img-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 10px;
}
.lx-img-card-thumb {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 8px; cursor: pointer;
  background: var(--surface-2);
}
/* Video thumbs render at their natural aspect ratio. Cards start at the
   UGC default (9:16) so first paint is correct for the vast majority of
   generations; the renderer overwrites `aspect-ratio` per element from
   the loaded video's intrinsic dimensions once metadata is available. */
.lx-vid-card-thumb {
  display: block;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  cursor: pointer;
  background: var(--surface-2);
}
.lx-img-card-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.lx-img-card-actions .lxm-pill-btn { font-size: 12px; padding: 5px 10px; }

/* Pending placeholder — shown immediately when the user clicks Generate.
   Skeleton thumb (animated shimmer) with a centered spinner overlay; the
   prompt text + optional reference thumb keep the card meaningful while
   the real image is rendered upstream. Replaced in-place by the finished
   card via element.replaceWith() once /image-status returns success. */
.lx-img-card-pending {
  position: relative;
}
.lx-img-card-pending .lx-img-card-skeleton {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
}
.lx-img-card-pending.lx-vid-card .lx-img-card-skeleton {
  aspect-ratio: 9 / 16;
}
.lx-img-card-skeleton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(212, 175, 55, 0.04) 35%,
    rgba(212, 175, 55, 0.10) 50%,
    rgba(212, 175, 55, 0.04) 65%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-position: 100% 0;
  animation: lx-shimmer 1.6s linear infinite;
}
@keyframes lx-shimmer {
  to { background-position: -100% 0; }
}
.lx-img-card-pending-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 16px;
  z-index: 1;
}
.lx-img-card-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid rgba(212, 175, 55, 0.18);
  border-top-color: var(--accent);
  animation: lx-spin 0.9s linear infinite;
}
@keyframes lx-spin {
  to { transform: rotate(360deg); }
}
.lx-img-card-pending-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.lx-img-card-pending-prompt {
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.lx-img-card-pending-ref {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 2px;
}
.lx-img-card-pending-meta {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
}

/* Error variant: the pending card flips to error styling when the upstream
   generation fails. Keeps the slot visible so the user knows the slot is
   theirs, but signals failure clearly. */
.lx-img-card-pending.lx-img-card-failed .lx-img-card-skeleton {
  background: var(--surface-2);
}
.lx-img-card-pending.lx-img-card-failed .lx-img-card-skeleton::before {
  animation: none;
  background: linear-gradient(135deg, rgba(220, 80, 80, 0.10) 0%, transparent 60%);
}
.lx-img-card-pending.lx-img-card-failed .lx-img-card-spinner {
  display: none;
}
.lx-img-card-pending.lx-img-card-failed .lx-img-card-pending-label {
  color: #fca5a5;
}

/* ── Brands panel ─────────────────────────────────────────────────────── */
.lx-brands-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.lx-brands-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.lx-brands-empty {
  grid-column: 1 / -1;
  padding: 32px 14px; text-align: center;
  color: var(--text-dim); font-size: 13px;
  border: 1px dashed var(--border); border-radius: 12px;
}
.lx-brand-card {
  display: flex; flex-direction: column;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
  cursor: pointer; transition: border-color 120ms, transform 120ms;
}
.lx-brand-card:hover { border-color: var(--border-2); transform: translateY(-1px); }
.lx-brand-card-thumb {
  aspect-ratio: 16 / 9; width: 100%;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
}
.lx-brand-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lx-brand-card-body { padding: 12px 14px; }
.lx-brand-card-name { font-weight: 600; font-size: 14px; }
.lx-brand-card-meta { color: var(--text-dim); font-size: 12px; margin-top: 4px; }

.lx-brand-detail-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
}
.lx-brand-section-h {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-muted); margin: 22px 0 10px; font-weight: 700;
}
.lx-brand-dropzone {
  border: 1px dashed var(--border-2); border-radius: 12px;
  padding: 28px 16px; text-align: center;
  background: var(--surface-1); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-muted);
  transition: border-color 120ms, background 120ms;
}
.lx-brand-dropzone:hover, .lx-brand-dropzone.is-dragover {
  border-color: var(--accent); background: rgba(212,175,55,0.05);
  color: var(--text);
}
.lx-brand-dropzone .icon-lg { color: var(--text-dim); }
.lx-brand-media-grid {
  display: grid; gap: 10px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.lx-brand-media-cell {
  position: relative; aspect-ratio: 1 / 1;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
}
.lx-brand-media-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lx-brand-media-cell-del {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,0.65); border: 1px solid rgba(255,255,255,0.15);
  color: var(--text); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 120ms;
}
.lx-brand-media-cell:hover .lx-brand-media-cell-del { opacity: 1; }
.lx-brand-media-cell-del:hover { background: rgba(220,38,38,0.85); }

.lx-brand-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
  z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 5vh 16px;
}
.lx-brand-modal-overlay[hidden] { display: none; }
.lx-brand-modal-card {
  background: var(--surface-1); border: 1px solid var(--border-2);
  border-radius: 12px; width: 100%; max-width: 480px;
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.7);
}
.lx-brand-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.lx-brand-modal-title { font-size: 15px; font-weight: 700; }
.lx-brand-modal-body { padding: 16px; }

/* ── Brand-media picker ───────────────────────────────────────────────── */
.lx-brand-picker-card { max-width: 640px; }
.lx-brand-picker-filter {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 8px 0 14px;
}
.lx-brand-picker-filter:empty { display: none; }
.lx-brand-picker-filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.lx-brand-picker-filter-chip:hover { border-color: var(--border-2); color: var(--text); }
.lx-brand-picker-filter-chip.active {
  background: var(--surface-elevated);
  border-color: var(--accent);
  color: var(--text);
}
.lx-brand-picker-filter-count {
  font-size: 10.5px; color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  padding: 1px 6px; border-radius: 999px;
}
.lx-brand-picker-filter-chip.active .lx-brand-picker-filter-count { color: var(--accent); }
.lx-brand-picker-meta { color: var(--text-muted); font-size: 12.5px; margin-bottom: 12px; }
.lx-brand-picker-groups { max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.lx-brand-picker-group + .lx-brand-picker-group { margin-top: 16px; }
.lx-brand-picker-group-h {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-muted); font-weight: 700; margin-bottom: 8px;
}
.lx-brand-picker-group-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.lx-brand-picker-item {
  position: relative; aspect-ratio: 1 / 1; cursor: pointer;
  background: var(--surface-2); border: 2px solid var(--border);
  border-radius: 10px; overflow: hidden;
  transition: border-color 120ms;
}
.lx-brand-picker-item:hover { border-color: var(--border-2); }
.lx-brand-picker-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lx-brand-picker-item.is-selected { border-color: var(--accent); }
.lx-brand-picker-check {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #1a1a1a;
  display: none; align-items: center; justify-content: center;
}
.lx-brand-picker-check .icon { width: 14px; height: 14px; }
.lx-brand-picker-item.is-selected .lx-brand-picker-check { display: flex; }
.lx-brand-picker-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}

/* ── Sidebar Library: dynamic project sub-list ────────────────────────── */
.lx-sidebar-sublist {
  display: flex; flex-direction: column; gap: 1px;
  margin: 2px 0 0 4px; padding-left: 4px;
  border-left: 1px solid var(--border);
}
.lx-sidebar-sublist:empty { display: none; }

/* Collapsible "All projects" sub-list. Toggle chevron lives at the right
   edge of the parent nav item; clicking it doesn't trigger the parent's
   navigation handler (handled in index.html script). */
.lx-nav-item-with-toggle { padding-right: 6px; }
.lx-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  margin-left: auto;
  color: var(--text-dim);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s, transform 0.18s;
}
.lx-nav-toggle .icon { width: 14px; height: 14px; }
.lx-nav-toggle:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.lx-nav-item-with-toggle:hover .lx-nav-toggle { color: #1a1a1a; }
.lx-nav-item-with-toggle:hover .lx-nav-toggle:hover { background: rgba(0,0,0,0.18); color: #1a1a1a; }
.lx-sidebar-library.is-collapsed .lx-nav-toggle { transform: rotate(-90deg); }
.lx-sidebar-library.is-collapsed .lx-sidebar-sublist { display: none; }

/* Library group — parent collapsible wrapper around All projects + All
   prompts. The group-head row toggles the whole body open/closed; the
   chevron rotates the same way as the per-list toggle. Children indent
   slightly so the nesting reads at a glance. */
.lx-sidebar-group { display: flex; flex-direction: column; gap: 1px; }
.lx-sidebar-group-head { cursor: pointer; }
.lx-sidebar-group-head .lx-nav-toggle { transition: transform 0.18s; }
.lx-sidebar-group.is-collapsed .lx-sidebar-group-head > .lx-nav-toggle { transform: rotate(-90deg); }
.lx-sidebar-group.is-collapsed .lx-sidebar-group-body { display: none; }
.lx-sidebar-group-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-left: 10px;
  padding-left: 6px;
  border-left: 1px solid var(--border);
}
.lx-nav-subitem {
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 10px;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  font-family: inherit;
  width: 100%;
  position: relative;
  transition: color 0.12s, background 0.12s;
}
.lx-nav-subitem .icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-dim); }
.lx-nav-subitem:hover {
  color: #1a1a1a;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  font-weight: 600;
}
.lx-nav-subitem:hover .icon { color: #1a1a1a; }
.lx-nav-subitem.active {
  color: var(--text);
  background: #1f1f1f;
  font-weight: 600;
}
.lx-nav-subitem.active .icon { color: var(--accent); }
.lx-nav-subitem-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}

/* ── Brand detail: sections (folders) ─────────────────────────────────── */
.lx-brand-sections-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 22px; margin-bottom: 10px;
}
.lx-brand-sections { display: flex; flex-direction: column; gap: 18px; }
.lx-brand-section-block {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px 16px;
}
.lx-brand-section-block.is-uncat {
  background: transparent; border-style: dashed;
}
.lx-brand-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.lx-brand-section-name {
  flex: 1; font-size: 14px; font-weight: 600;
  background: transparent; border: 1px solid transparent;
  border-radius: 6px; padding: 4px 6px; color: var(--text);
  font-family: inherit; outline: none; min-width: 0;
}
.lx-brand-section-name:focus,
.lx-brand-section-name:hover {
  border-color: var(--border-2);
  background: var(--surface-2);
}
.lx-brand-section-name[readonly] { cursor: default; }
.lx-brand-section-actions { display: flex; gap: 6px; }
.lx-brand-section-uncat-h {
  flex: 1; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-muted); padding: 4px 6px;
}
.lx-brand-section-dropzone {
  border: 1px dashed var(--border-2); border-radius: 10px;
  padding: 16px 12px; text-align: center;
  background: var(--surface-2); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--text-muted); font-size: 12px;
  transition: border-color 120ms, background 120ms;
}
.lx-brand-section-dropzone:hover,
.lx-brand-section-dropzone.is-dragover {
  border-color: var(--accent); background: rgba(212,175,55,0.05);
  color: var(--text);
}
.lx-brand-section-empty {
  color: var(--text-dim); font-size: 12px; font-style: italic;
  padding: 4px 0 6px;
}
.lx-brand-media-cell-move {
  position: absolute; bottom: 6px; left: 6px;
  background: rgba(0,0,0,0.65); color: var(--text);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px; padding: 3px 7px;
  font-size: 10.5px; cursor: pointer;
  opacity: 0; transition: opacity 120ms;
  font-family: inherit;
}
.lx-brand-media-cell:hover .lx-brand-media-cell-move { opacity: 1; }
.lx-brand-media-cell-move:hover { background: rgba(0,0,0,0.85); }

.lx-brand-move-menu {
  background: var(--surface-elevated);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 4px;
  display: flex; flex-direction: column;
  min-width: 160px;
  box-shadow: 0 12px 32px -12px rgba(0,0,0,0.6);
}
.lx-brand-move-menu button {
  background: transparent; border: 0;
  color: var(--text); font-family: inherit; font-size: 12.5px;
  padding: 7px 10px; text-align: left; border-radius: 6px;
  cursor: pointer;
}
.lx-brand-move-menu button:hover { background: rgba(255,255,255,0.05); }

/* ── Save-to-project modal ────────────────────────────────────────────── */
.lx-img-save-preview {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  max-height: 200px;
}
.lx-img-save-preview img {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  display: block;
}

/* ── Brand-picker: per-section sub-headers ────────────────────────────── */
.lx-brand-picker-section + .lx-brand-picker-section { margin-top: 10px; }
.lx-brand-picker-section-h {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-dim); font-weight: 600;
  margin: 6px 2px 6px;
}

/* ── Video Form Modern (lx-vfm) — Higgsfield-style vertical sidebar ─────
   Vertical stack on the right column for the Video panel: tab-bar,
   discover banner, upload card, prompt card, model card, settings pills,
   generate button. All accents resolve to the existing gold tokens. */

/* Switch the video panel layout from bottom-bar (lx-tool-bottom) to a
   right column form on desktop. The .tool-main keeps the result grid;
   .tool-form becomes a sticky right column. */
.lx-content .tool-layout.lx-tool-right {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: var(--lx-card-gap);
  align-items: start;
}
.lx-content .tool-layout.lx-tool-right .tool-main {
  min-width: 0;
  order: 2;
}
.lx-content .tool-layout.lx-tool-right .tool-form.lx-vfm {
  order: 1;
  position: sticky;
  top: calc(var(--lx-topbar-h) + var(--lx-card-gap));
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100vh - var(--lx-topbar-h) - var(--lx-card-gap) * 2);
  overflow-y: auto;
  padding-right: 4px;
}
.lx-content .tool-layout.lx-tool-right .tool-form.lx-vfm::-webkit-scrollbar {
  width: 6px;
}
.lx-content .tool-layout.lx-tool-right .tool-form.lx-vfm::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 4px;
}
@media (max-width: 980px) {
  .lx-content .tool-layout.lx-tool-right {
    grid-template-columns: 1fr;
  }
  .lx-content .tool-layout.lx-tool-right .tool-form.lx-vfm {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* Tabs at top of the form */
.lx-vfm-tabs {
  display: flex;
  gap: 22px;
  padding: 0 4px 0;
  border-bottom: 1px solid var(--border);
}
.lx-vfm-tab {
  background: transparent;
  border: 0;
  padding: 10px 0 12px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.lx-vfm-tab:hover:not(:disabled) { color: var(--text); }
.lx-vfm-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.lx-vfm-tab:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Discover Presets banner */
.lx-vfm-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px;
  border-radius: var(--lx-row-radius);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  min-height: 76px;
}
.lx-vfm-banner-art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 100% 50%, rgba(212, 175, 55, 0.12) 0%, transparent 60%),
    linear-gradient(110deg, #1a1408 0%, #0e0e0e 55%, #1a140880 100%);
  z-index: 0;
}
.lx-vfm-banner-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lx-vfm-banner-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-transform: uppercase;
  line-height: 1.05;
}
.lx-vfm-banner-sub {
  font-size: 13px;
  color: var(--text-muted);
}
.lx-vfm-banner-btn {
  position: relative;
  z-index: 1;
  background: #ffffff;
  color: #111;
  border: 0;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.12s, transform 0.06s;
}
.lx-vfm-banner-btn:hover { opacity: 0.92; }
.lx-vfm-banner-btn:active { transform: scale(0.97); }

/* Start + End frame cards live side-by-side in a 2-col grid; each reuses
   .lx-vfm-upload styling but slightly slimmer for the smaller footprint. */
.lx-vfm-frames {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.lx-vfm-frame-card {
  padding: 16px 12px;
}

/* Disabled frame card: applied when the active video model doesn't accept
   a start/end frame (Seedance, Motion Control). Greys out the card,
   blocks pointer events so the dropzone underneath ignores clicks/drops.
   Mirrors the same constraint enforced on the KV partner API
   (blueprints/partner_api.py rejects ref images for these models). */
.lx-vfm-frame-card-disabled {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(0.5);
}

/* Disabled setting (duration picker for Motion Control where duration is
   derived from the input motion video). Same visual treatment. */
.lx-vfm-setting-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Inline model note rendered under the settings row — surfaces gotchas
   like "Veo always returns 8s" or "Motion Control derives its duration".
   Set by applyModelConstraints() on every model change. */
.lx-vfm-model-note {
  margin-top: 8px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted, #999);
  background: var(--surface-2, #1a1a1a);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: var(--lx-row-radius, 8px);
}

/* Upload media card (dashed, with three round icons) */
.lx-vfm-upload {
  position: relative;
  border: 1.5px dashed #2a2a2a;
  border-radius: var(--lx-row-radius);
  padding: 18px 14px 16px;
  background: var(--surface-1);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.lx-vfm-upload:hover {
  border-color: var(--border-2);
  background: var(--surface-2);
}
.lx-vfm-upload-icons {
  display: inline-flex;
  align-items: center;
  gap: -4px;
  margin-bottom: 8px;
}
.lx-vfm-upload-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  margin: 0 -6px;
}
.lx-vfm-upload-icon:nth-child(2) { z-index: 1; transform: scale(1.05); }
.lx-vfm-upload-icon .icon { width: 16px; height: 16px; }
.lx-vfm-upload-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-top: 4px;
}
.lx-vfm-upload-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}
.lx-vfm-upload .lxm-dropzone-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  justify-content: center;
}
/* The inner .lxm-dropzone (which reuses the existing JS dropzone wiring)
   would otherwise render its own dashed border + 18px padding on top of
   the outer .lx-vfm-upload card. Flatten it inside the higgsfield-style
   container so we see exactly one bordered slot. */
.lx-vfm-upload .lxm-dropzone {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: inherit;
  margin: 0;
}
.lx-vfm-upload .lxm-dropzone:hover {
  border-color: transparent;
  background: transparent;
}
.lx-vfm-upload .lxm-dropzone.is-dragover {
  border-color: transparent;
  background: rgba(212, 175, 55, 0.04);
  border-radius: 10px;
}
/* Hide the empty subtree entirely — outer card already shows the icons
   and "Upload media" label, and the empty-state placeholder would only
   add visual noise. The slot collapses to zero height when no thumbs are
   loaded so it doesn't leave a gap before the next card. */
.lx-vfm-upload .lxm-dropzone:not(.has-files) .lxm-dropzone-thumbs { display: none; }
.lx-vfm-upload .lxm-dropzone-empty { display: none !important; }

/* Generic card label (used in prompt + model cards) */
.lx-vfm-card-label {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Prompt card */
.lx-vfm-prompt {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--lx-row-radius);
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lx-vfm-prompt-area {
  background: transparent;
  border: 0;
  outline: none;
  resize: none;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  padding: 0;
  min-height: 64px;
  max-height: 360px;
  overflow-y: auto;
  width: 100%;
}
.lx-vfm-prompt-area::placeholder { color: var(--text-dim); }
.lx-vfm-prompt-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.lx-vfm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.lx-vfm-pill:hover { background: var(--surface-elevated); border-color: var(--border-2); }
.lx-vfm-pill .icon { width: 14px; height: 14px; }
.lx-vfm-pill-glyph {
  font-size: 13px;
  font-weight: 700;
  opacity: 0.8;
}
.lx-vfm-pill-toggle.active {
  background: var(--surface-elevated);
  border-color: var(--accent);
  color: var(--text);
}
.lx-vfm-pill-toggle[aria-pressed="false"] {
  color: var(--text-dim);
}

/* Model selector card */
.lx-vfm-model {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--lx-row-radius);
  padding: 12px 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.12s, background 0.12s;
}
.lx-vfm-model:hover {
  border-color: var(--border-2);
  background: var(--surface-2);
}
.lx-vfm-model-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lx-vfm-model-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lx-vfm-model-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.lx-vfm-model-bars {
  width: 16px;
  height: 16px;
  color: var(--accent);
}
.lx-vfm-chevron {
  width: 18px;
  height: 18px;
  color: var(--text-dim);
  flex-shrink: 0;
}
.lx-vfm-model.is-locked {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
}
.lx-vfm-model.is-locked .lx-vfm-chevron { display: none; }

/* Multishot toggle — sits between model picker and settings */
.lx-vfm-multishot-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
}
.lx-vfm-multishot-toggle input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer;
}
.lx-vfm-multishot-toggle:hover { color: var(--text); }

/* Multishot section — per-row inputs that take over the form when active. */
.lx-vfm-multishot-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Catch-all: any element with a `data-vid-mode` toggle must respect the
   `hidden` attribute regardless of what other CSS sets `display` to.
   Without this, `display: flex/grid` rules on .lx-vfm-multishot-section,
   .lx-vfm-banner, .lx-vfm-upload, .lx-vfm-settings, .lxm-grid, etc. clobber
   `[hidden] { display: none }` and both single + multishot UI render at
   the same time (incident 2026-05-15). `!important` is appropriate here
   because the JS toggle (`initVideoMultishotToggle` in lx-modules.js)
   is the single source of truth for which mode is visible. */
[data-vid-mode][hidden] { display: none !important; }

/* Settings pill row (3 equal-width pills) */
.lx-vfm-settings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.lx-vfm-setting {
  position: relative;
}
.lx-vfm-setting > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--lx-row-radius);
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.lx-vfm-setting > summary::-webkit-details-marker { display: none; }
.lx-vfm-setting > summary:hover {
  border-color: var(--border-2);
  background: var(--surface-2);
}
.lx-vfm-setting[open] > summary {
  border-color: var(--accent);
  background: var(--surface-2);
}
.lx-vfm-setting > summary .icon {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}
.lx-vfm-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 -12px 32px -8px rgba(0, 0, 0, 0.5);
  max-height: 220px;
  overflow-y: auto;
}
.lx-vfm-setting[open] { z-index: 30; }
.lx-vfm-opt {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13px;
  text-align: center;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.lx-vfm-opt:hover { background: var(--surface-3); color: var(--text); }
.lx-vfm-opt.active {
  background: var(--surface-elevated);
  color: var(--text);
  font-weight: 700;
}

/* Generate button */
.lx-vfm-generate {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-radius: var(--lx-row-radius);
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  color: #1a1a1a;
  background: linear-gradient(180deg, var(--accent-bright) 0%, var(--accent) 100%);
  cursor: pointer;
  box-shadow: 0 6px 22px -10px rgba(212, 175, 55, 0.55), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  transition: filter 0.12s, transform 0.06s;
}
.lx-vfm-generate:hover { filter: brightness(1.04); }
.lx-vfm-generate:active { transform: scale(0.99); }
.lx-vfm-generate:disabled { opacity: 0.6; cursor: not-allowed; }
.lx-vfm-generate-spark { width: 18px; height: 18px; color: #1a1a1a; }
.lx-vfm-generate .lx-btn-credits {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.7;
  letter-spacing: 0.02em;
}

/* Model picker modal */
.lx-vfm-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lx-vfm-modal[hidden] { display: none; }
.lx-vfm-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.lx-vfm-modal-panel {
  position: relative;
  width: min(440px, calc(100vw - 32px));
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--lx-card-radius);
  padding: 14px;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6);
}
.lx-vfm-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.lx-vfm-modal-x {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
}
.lx-vfm-modal-x:hover { color: var(--text); }
.lx-vfm-modal-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 360px;
  overflow-y: auto;
}
.lx-vfm-modal-opt {
  background: transparent;
  border: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  padding: 12px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s;
}
.lx-vfm-modal-opt:hover { background: var(--surface-3); }
.lx-vfm-modal-opt.active {
  background: var(--surface-elevated);
  color: var(--accent);
  font-weight: 700;
}
.lx-vfm-modal-section {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  font-weight: 700;
  padding: 12px 12px 4px;
}

/* Higgsfield-style model picker card grid (inside the lx-vfm-modal) */
.lx-vfm-modal-panel-wide { width: min(640px, calc(100vw - 32px)); }
.lx-vfm-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: 460px;
  overflow-y: auto;
  padding: 4px 2px;
}
.lx-vfm-mcard {
  display: flex;
  align-items: stretch;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, background 0.12s, transform 0.06s;
}
.lx-vfm-mcard:hover {
  border-color: var(--border-2);
  background: var(--surface-3);
}
.lx-vfm-mcard:active { transform: scale(0.99); }
.lx-vfm-mcard.active {
  border-color: var(--accent);
  background: var(--surface-elevated);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 24px -12px rgba(212, 175, 55, 0.4);
}
.lx-vfm-mcard.active .lx-vfm-mcard-name { color: var(--accent); }
.lx-vfm-mcard-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.lx-vfm-mcard-thumb .icon { width: 22px; height: 22px; z-index: 1; }
.lx-vfm-mcard-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 30% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
}
.lx-vfm-mcard-thumb-kling    { background: linear-gradient(135deg, #1f1a0a 0%, #4a3a14 100%); }
.lx-vfm-mcard-thumb-omni     { background: linear-gradient(135deg, #2a1f0a 0%, #7a5a18 100%); }
.lx-vfm-mcard-thumb-motion   { background: linear-gradient(135deg, #0a1a2a 0%, #18467a 100%); }
.lx-vfm-mcard-thumb-seedance { background: linear-gradient(135deg, #1a0a2a 0%, #5a187a 100%); }
.lx-vfm-mcard-thumb-veo      { background: linear-gradient(135deg, #0a2a1a 0%, #187a5a 100%); }
.lx-vfm-mcard-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  justify-content: center;
}
.lx-vfm-mcard-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.lx-vfm-mcard-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.2;
}
.lx-vfm-mcard-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.lx-vfm-mcard-bars {
  width: 12px;
  height: 12px;
  color: var(--accent);
}
@media (max-width: 520px) {
  .lx-vfm-modal-grid { grid-template-columns: 1fr; }
}