/* LuxuryAI modules form/card styles. The sidebar nav lives in index.html;
   this file owns the look of the panels' content. */

.lxm-card {
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 24px 28px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.lxm-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin: 16px 0 6px;
  font-weight: 500;
}
.lxm-label:first-child,
.lxm-card > .lxm-label:first-of-type { margin-top: 0; }
.lxm-hint { color: var(--text-dim); font-size: 12px; margin-top: 6px; }
.lxm-hint-inline { color: var(--text-dim); font-weight: 400; font-size: 11.5px; }
.lxm-hint-sub { color: var(--text-dim); font-size: 11.5px; margin: 4px 0 0 24px; line-height: 1.45; }

.lxm-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 6px;
}
.lxm-label-row .lxm-label { margin: 0; }
.lxm-btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent-bright);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.lxm-btn-link:hover { text-decoration: underline; }

.lxm-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.lxm-checkbox input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer;
}

.lxm-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.lxm-input:hover { border-color: var(--border-2); }
.lxm-input:focus {
  border-color: var(--accent);
  background: var(--surface-1);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}
.lxm-input-mono {
  font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.55;
}
textarea.lxm-input { resize: vertical; }

.lxm-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 4px;
}

.lxm-btn {
  margin-top: 22px;
  padding: 12px 28px;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  color: #1a1a1a;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: filter 0.12s, transform 0.05s, box-shadow 0.15s;
  font-family: inherit;
}
.lxm-btn:hover:not(:disabled) {
  filter: brightness(0.96);
  box-shadow: 0 8px 24px -8px rgba(212, 175, 55, 0.45);
}
.lxm-btn:active:not(:disabled) { transform: translateY(1px); }
.lxm-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Secondary button: same shape/size as .lxm-btn but a quiet outlined fill so
   it can sit next to the primary gold CTA without competing for attention. */
.lxm-btn-secondary {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
}
.lxm-btn-secondary:hover:not(:disabled) {
  background: rgba(212, 175, 55, 0.08);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.55);
  filter: none;
}

/* Side-by-side row for primary + secondary actions. Primary keeps its
   natural top margin via .lxm-btn; secondary inherits the row's margin. */
.lxm-btn-row {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.lxm-btn-row .lxm-btn { margin-top: 0; flex: 1 1 0; }

/* Split variant: first item left, remaining items right (e.g. Delete left,
   Cancel + Save right). Each button keeps its natural width — no flex
   stretch — so the modal footer doesn't look balloon-y. */
.lxm-btn-row-split { justify-content: flex-end; }
.lxm-btn-row-split .lxm-btn { flex: 0 0 auto; padding: 10px 22px; }
.lxm-btn-row-split > .lxm-btn-danger:first-child { margin-right: auto; }

/* Destructive secondary (Delete). Same outline shape as
   .lxm-btn-secondary, recolored for a clear "this removes data" read. */
.lxm-btn-danger {
  color: #fca5a5;
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.35);
}
.lxm-btn-danger:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.08);
  color: #fecaca;
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.55);
}

.lxm-status {
  margin-top: 18px;
  padding: 11px 14px;
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.lxm-status::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: lxm-spin 0.9s linear infinite;
}
.lxm-status[hidden] { display: none; }
@keyframes lxm-spin { to { transform: rotate(360deg); } }

.lxm-error {
  margin-top: 18px;
  padding: 11px 14px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 10px;
  color: #fca5a5;
  font-size: 12.5px;
}
.lxm-error[hidden] { display: none; }

.lxm-result {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lxm-result[hidden] { display: none; }

.lxm-result-section {
  background: var(--surface-1);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 18px 22px;
}
.lxm-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.lxm-result-section h4 {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent-bright);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0;
}
.lxm-result-section .body {
  font-size: 13.5px;
  color: #c9c9d6;
  line-height: 1.65;
  word-wrap: break-word;
}

/* Rendered-markdown elements inside a result body */
.lxm-result-section .body > *:first-child { margin-top: 0; }
.lxm-result-section .body > *:last-child { margin-bottom: 0; }
.lxm-result-section .body p { margin: 0 0 12px; }
.lxm-result-section .body strong { color: var(--text); font-weight: 600; }
.lxm-result-section .body em { color: var(--text); font-style: italic; }
.lxm-result-section .body h4 {
  font-size: 14px;
  color: var(--text);
  margin: 18px 0 8px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
.lxm-result-section .body h5 {
  font-size: 13px;
  color: var(--text-muted);
  margin: 14px 0 6px;
  font-weight: 600;
}
.lxm-result-section .body ul,
.lxm-result-section .body ol { margin: 0 0 12px; padding-left: 22px; }
.lxm-result-section .body li { margin: 3px 0; }
.lxm-result-section .body code {
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
}

/* Summary as definition list */
.lxm-summary-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 24px;
  margin: 0;
}
.lxm-summary-dl > div { display: contents; }
.lxm-summary-dl dt {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding-top: 2px;
  white-space: nowrap;
}
.lxm-summary-dl dd {
  color: var(--text);
  font-size: 13.5px;
  margin: 0;
  line-height: 1.55;
}
.lxm-summary-dl dd p { margin: 0; }
.lxm-summary-dl dd strong { color: var(--text); }

/* Copy button */
.lxm-copy-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.lxm-copy-btn:hover { color: var(--text); border-color: var(--border-2); background: var(--surface-2); }
.lxm-copy-btn-ok { color: var(--accent); border-color: rgba(212, 175, 55, 0.4); background: rgba(212, 175, 55, 0.08); }

/* "Copy all sections" — same look as per-section Copy but slightly more
   prominent (accent color) and right-aligned above the section blocks. */
.lx-an-result-actions {
  display: flex;
  justify-content: flex-end;
  margin: 4px 0 12px;
}
.lxm-copy-all-btn {
  color: var(--accent);
  border-color: rgba(212, 175, 55, 0.4);
  background: rgba(212, 175, 55, 0.06);
  padding: 6px 14px;
  font-size: 12px;
}

/* Success / warning banners shown above the result blocks */
.lxm-success {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--text);
  margin-bottom: 4px;
}
.lxm-success-icon { color: #4ade80; font-weight: 700; }
.lxm-success-meta { color: var(--text-dim); margin-left: auto; font-size: 11.5px; font-family: "SF Mono", "Fira Code", ui-monospace, monospace; }
.lxm-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 10px;
  font-size: 12.5px;
  color: #fbbf24;
  margin-bottom: 4px;
}

.lxm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 22px;
}
.lxm-grid img {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: block;
}

.lxm-scene {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 10px;
}
.lxm-scene-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.lxm-scene-title { font-size: 13px; font-weight: 600; color: var(--accent-bright); }
.lxm-scene-jobid {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.lxm-scene-row-grid {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 1fr 1fr;
  gap: 10px;
  align-items: start;
}
.lxm-scene-prompt {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.4;
  max-height: 200px;
  overflow-y: auto;
  padding-right: 4px;
}
.lxm-scene-prompt-empty {
  color: var(--text-dim);
  font-style: normal;
}
.lxm-scene.lxm-scene-error {
  background: rgba(220, 38, 38, 0.05);
  border-color: rgba(220, 38, 38, 0.3);
}
.lxm-scene.lxm-scene-error .lxm-scene-title { color: #fca5a5; }
.lxm-scene-status {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.lxm-scene-frame {
  width: 100%;
  max-height: 200px;
  border-radius: 8px;
  background: #000;
  border: 1px solid var(--border);
  object-fit: contain;
  filter: brightness(0.9);
}
.lxm-scene video {
  width: 100%;
  max-height: 200px;
  border-radius: 8px;
  background: #000;
  border: 1px solid var(--border);
}
.lxm-scene-rendering .lxm-scene-frame { filter: brightness(0.7) saturate(0.85); }
.lxm-scene-pending .lxm-scene-title { color: var(--text-muted); }
.lxm-scene-frame-final { filter: none; }

/* Media figure: figcaption + media (img/video/placeholder) stacked. */
.lxm-scene-media-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lxm-scene-media-fig figcaption {
  font-size: 10.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.lxm-scene-frame-empty {
  width: 100%;
  height: 200px;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
  padding: 0 12px;
}
.lxm-scene-frame-empty-err {
  color: #fca5a5;
  border-color: rgba(220, 38, 38, 0.3);
  background: rgba(220, 38, 38, 0.05);
}
.lxm-recent-card-jobid {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: var(--text-dim);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 900px) {
  .lxm-scene-row-grid { grid-template-columns: 1fr; }
  .lxm-scene-prompt { max-height: 120px; }
}

/* ─── Script Runner — Manual (FT) rows ─────────────────────────────── */
.lxm-srft-rows-empty {
  padding: 24px 16px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}
.lxm-srft-row {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 16px 14px;
  margin-bottom: 12px;
  background: var(--surface);
}
.lxm-srft-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.lxm-srft-row-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.1px;
}
.lxm-srft-row-remove {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.lxm-srft-row-remove .icon { width: 16px; height: 16px; }
.lxm-srft-row-remove:hover { color: #f87171; background: rgba(248, 113, 113, 0.08); }

/* Per-shot footer pill row (duration + audio). Outlined pill style; the
   "on" variant picks up the gold accent so the active audio state reads
   at a glance, mirroring the screenshot's "🔊 On" treatment. */
.lxm-srft-row-foot {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.lxm-srft-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.lxm-srft-pill .icon { width: 12px; height: 12px; }
.lxm-srft-pill:hover { border-color: var(--accent); color: var(--text); }
.lxm-srft-pill.is-on {
  border-color: var(--accent);
  color: var(--accent-bright);
}

/* Dashed full-width "Add scene" button with inline counter. Mirrors the
   reference design: outlined dashed border, centered "+ Add scene N/MAX". */
.lxm-srft-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  margin-top: 8px;
}
.lxm-srft-add .icon { width: 14px; height: 14px; }
.lxm-srft-add:hover { border-color: var(--accent); color: var(--text); background: rgba(212, 175, 55, 0.04); }
.lxm-srft-add .lxm-srft-add-count {
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 400;
  margin-left: 6px;
}
.lxm-srft-frames {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.lxm-srft-frame { display: flex; flex-direction: column; }
.lxm-srft-drop {
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--surface);
  overflow: hidden;
  position: relative;
}
.lxm-srft-drop.drag-over { border-color: var(--accent); background: rgba(212, 175, 55, 0.04); }
.lxm-srft-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11px;
}
.lxm-srft-thumb-wrap { position: relative; max-height: 100%; }
.lxm-srft-thumb-wrap img {
  max-height: 150px;
  max-width: 100%;
  border-radius: 6px;
  display: block;
}
.lxm-srft-thumb-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
/* Shot textarea: blends into the row card (no inner border), min-height
   gives it the proportions in the reference. */
.lxm-srft-prompt {
  resize: vertical;
  min-height: 110px;
  border-color: transparent;
  background: transparent;
  padding: 0;
  font-size: 14px;
  line-height: 1.55;
}
.lxm-srft-prompt:hover, .lxm-srft-prompt:focus {
  border-color: transparent;
  box-shadow: none;
  background: transparent;
}
.lxm-srft-row-status {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  background: rgba(0, 0, 0, 0.18);
  color: var(--text-muted);
}
.lxm-srft-row-status-complete { color: #86efac; background: rgba(134, 239, 172, 0.08); }
.lxm-srft-row-status-error    { color: #fca5a5; background: rgba(252, 165, 165, 0.08); }
.lxm-srft-row-video {
  width: 100%;
  max-height: 360px;
  margin-top: 8px;
  border-radius: 8px;
  background: #000;
  border: 1px solid var(--border);
}
.lxm-srft-row-error { margin-top: 8px; }
.lxm-required { color: var(--accent); }

/* Completed multishot run tiles, rendered into the wide left main area
   (#lxm-srft-result) by srftRenderMainResults. Grid of video previews
   with a compact prompt-line header. */
.lx-vfm-srft-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.lx-vfm-srft-tile {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lx-vfm-srft-tile-meta {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.lx-vfm-srft-tile-video {
  width: 100%;
  border-radius: 8px;
  background: #000;
  aspect-ratio: 9 / 16;
  max-height: 480px;
  object-fit: contain;
}

/* ─── Recent / History ──────────────────────────────────────────────── */
.lxm-recent-section {
  margin-top: 28px;
}
.lxm-recent-h, .lxm-activity-h {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}
.lxm-recent {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lxm-recent-empty {
  color: var(--text-dim);
  font-size: 12.5px;
  padding: 14px 18px;
  background: var(--surface-1);
  border: 1px dashed var(--border);
  border-radius: 10px;
  text-align: center;
}
.lxm-recent-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  transition: border-color 0.12s, background 0.12s;
}
.lxm-recent-card:hover {
  border-color: var(--border-2);
  background: var(--surface-3);
}
.lxm-recent-card.active {
  border-color: var(--accent);
  background: rgba(212, 175, 55, 0.06);
}
.lxm-recent-card-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lxm-recent-card-meta {
  font-size: 11.5px;
  color: var(--text-muted);
}
.lxm-recent-card-sub { color: var(--text-dim); }
.lxm-recent-card-img {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
}
.lxm-recent-card-img img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.lxm-recent-card-noimg {
  width: 64px;
  height: 64px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--text-dim);
}

/* ─── Status badges ─────────────────────────────────────────────────── */
.lxm-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.lxm-badge-ok   { background: rgba(34, 197, 94, 0.12);  color: #4ade80; }
.lxm-badge-warn { background: rgba(245, 158, 11, 0.12); color: #fbbf24; }
.lxm-badge-err  { background: rgba(220, 38, 38, 0.12);  color: #fca5a5; }
.lxm-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  background: rgba(212, 175, 55, 0.08);
  color: var(--accent);
}

/* ─── Activity overview ─────────────────────────────────────────────── */
.lxm-activity { display: flex; flex-direction: column; gap: 24px; }
.lxm-activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.lxm-activity-stat {
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.lxm-activity-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.lxm-activity-stat-val {
  font-size: 30px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
}
.lxm-activity-stat-val-accent {
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.lxm-activity-bars {
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.lxm-activity-bar-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 12px;
  align-items: center;
  font-size: 12.5px;
}
.lxm-activity-bar-label { color: var(--text-muted); }
.lxm-activity-bar-track {
  height: 8px;
  background: var(--surface-1);
  border-radius: 4px;
  overflow: hidden;
}
.lxm-activity-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  border-radius: 4px;
  transition: width 0.3s ease;
}
.lxm-activity-bar-num { color: var(--text-dim); font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* Reference image drop-zone — used by Image Gen (multi) and Video Gen (single).
   Click anywhere opens the file picker; drag-over highlights with the gold accent. */
.lxm-dropzone {
  position: relative;
  border: 1px dashed var(--border-2);
  border-radius: 10px;
  background: var(--surface-1);
  padding: 18px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.lxm-dropzone:hover { border-color: var(--accent); }
.lxm-dropzone.is-dragover {
  border-color: var(--accent);
  background: rgba(212, 175, 55, 0.06);
}
.lxm-dropzone.is-disabled { opacity: 0.55; cursor: not-allowed; }
.lxm-dropzone-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  pointer-events: none;
}
.lxm-dropzone-empty .icon { width: 22px; height: 22px; opacity: 0.7; }
.lxm-dropzone-meta { color: var(--text-dim); font-size: 11.5px; }
.lxm-dropzone.has-files .lxm-dropzone-empty { display: none; }
.lxm-dropzone-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}
.lxm-dropzone:not(.has-files) .lxm-dropzone-thumbs { display: none; }
.lxm-dropzone-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.lxm-dropzone-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lxm-dropzone-thumb-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  pointer-events: auto;
}
.lxm-dropzone-thumb-remove:hover { background: rgba(0, 0, 0, 0.9); }
.lxm-dropzone-add {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  border: 1px dashed var(--border-2);
  color: var(--text-dim);
  font-size: 22px;
  cursor: pointer;
  background: transparent;
}
.lxm-dropzone-add:hover { border-color: var(--accent); color: var(--accent); }
.lxm-dropzone-error {
  color: #ff8a8a;
  font-size: 12px;
  margin-top: 6px;
}

/* ── Analyzer: collapsible sections + jump sidebar ────────────────────── */
.lx-an-result-wrap {
  /* Result body is now full-width. The Sections jump sidebar lives in the
     left form column (#lxm-an-jump-host), not next to the result. */
  display: block;
}
.lx-an-result-main {
  min-width: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.lx-an-jump-host:empty { display: none; }
.lx-an-jump-host .lx-an-jump { margin: 0; }

/* Stack the Ad-Analysis form column with consistent gaps between the
   Ad URL card, the Sections jump (when present), the how-to cards, and
   the user's analyses history. The form is taller here than on other
   panels (multiple stacked widgets), so disable position:sticky to
   avoid the column visually overlapping the topbar while scrolling. */
.panel[data-panel="analysis"] .tool-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: static;
  top: auto;
}
.panel[data-panel="analysis"] .tool-form .lxm-howto-grid { margin-top: 0; }
.panel[data-panel="analysis"] .tool-form .lxm-recent-section { margin-top: 0; }

/* Hide the 3-icon "Write Prompt / Pick Aspect / Get Images" empty-state once
   the user has at least one result. Covers both shapes: panels where the
   result grid is a direct child of the panel (images, videos) and panels
   where it's nested under .tool-main (analysis, voice, scriptrunner). */
.panel:has(> .lxm-grid > *) .tool-empty-state,
.panel:has(> .lxm-result:not(:empty):not([hidden])) .tool-empty-state,
.tool-main:has(> .lxm-grid > *) .tool-empty-state,
.tool-main:has(> .lxm-result:not(:empty):not([hidden])) .tool-empty-state {
  display: none;
}

/* Image-Generator panel — Remix designer alignment.
   Eyebrow above the page-header h1 (matches the JSX PageHeader `eyebrow` prop). */
.page-header .page-eyebrow {
font-family: var(--font-mono, 'Geist Mono', monospace);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 6px;
}

/* The image-card renderer outputs both .lx-img-card (legacy v2) AND .gen-tile
   (Remix designer) so existing JS hooks keep working. Without these overrides
   the legacy .lx-img-card rules (padding:10px, gap:8px) wrap the image in an
   inset frame, and .lx-img-card-thumb (border-radius:8px, aspect-ratio:1/1)
   double-rounds + squares the image. Neutralise the legacy rules so .gen-tile
   wins for layout: edge-to-edge thumb, no inner frame, 4/5 aspect from
   .gen-thumb, action strip flush against the bottom edge with the
   .gen-tile-meta border-top as the only divider. */
.gen-tile.lx-img-card {
  padding: 0;
  gap: 0;
  background: var(--ink-1);
}
.gen-tile .lx-img-card-thumb {
  border-radius: 0;
  aspect-ratio: auto;
  height: 100%;
  background: transparent;
}
.gen-tile-meta.lx-img-card-actions {
  /* Wrap (not nowrap) so on narrow tiles — the grid is minmax(200px, 1fr)
     and our 5-icon row + label needs ~230px to fit on one line — the
     actions row drops below the label instead of overflowing past the
     tile's right edge (the rounded clip was eating the rightmost icon). */
  flex-wrap: wrap;
  row-gap: 6px;
  padding: 8px 10px;
  gap: 8px;
}
/* Image tiles carry no label and video tiles only show one when they have a
   duration · resolution. With the label gone, the base .gen-tile-meta
   space-between would shove the action icons to the left edge — pin them flush
   right instead. */
.gen-tile-meta.is-labelless {
  justify-content: flex-end;
}
/* Keep the video duration · resolution label on a single line. Without this the
   designer's .gen-tile-label has no nowrap rule and wraps when the action row
   carries 5 icons (our v2 set) instead of the designer's 3, eating enough
   horizontal space to push the label. */
.gen-tile .gen-tile-label {
  white-space: nowrap;
  flex-shrink: 0;
}
/* Slightly smaller icon buttons + tighter inter-icon gap so the 5-icon row
   fits without crowding the label. Designer has 3 icons at 26px; we keep
   the same metric per-icon but tighten the row. */
.gen-tile .gen-tile-actions {
  gap: 2px;
  flex-shrink: 0;
}
.gen-tile .tile-icon-btn {
  width: 22px;
  height: 22px;
}
.gen-tile .tile-icon-btn .icon {
  width: 13px;
  height: 13px;
}

/* "Load more" row under the image / video galleries. The pagination code owns
   visibility via .is-hidden; the video grid's single/multishot mode toggle owns
   the [hidden] attribute — display:none on EITHER keeps them from fighting (a
   flex container would otherwise win over a bare `hidden` attribute). */
.lxm-loadmore {
  display: flex;
  justify-content: center;
  /* No top padding — the .lxm-btn child already carries margin-top:22px. */
  padding: 0 0 10px;
}
.lxm-loadmore.is-hidden,
.lxm-loadmore[hidden] {
  display: none;
}

/* Voiceover history cards: audio player + a footer with the prompt snippet and
   a download icon. Mirrors the dark surface of the gallery tiles. */
.lxm-vc-card {
  background: var(--ink-1);
  border: 1px solid var(--ink-3);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lxm-vc-card-audio { width: 100%; height: 34px; }
.lxm-vc-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.lxm-vc-card-text {
  font-size: 12px;
  color: var(--fg-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Override the legacy .lxm-pill-btn look when it's used as a tile action icon.
   .lxm-pill-btn (defined in /public/app/index.html inline <style>) gives a
   pill-shaped button with surface bg and 7px/14px padding — that's too chunky
   for the designer's icon-only action strip. Reset to a transparent square
   with the .tile-icon-btn metrics so the icon reads as a ghost glyph until
   hover. */
.gen-tile .tile-icon-btn.lxm-pill-btn {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  width: 24px;
  height: 24px;
  justify-content: center;        /* .lxm-pill-btn sets inline-flex + align-items:center but no justify; icon was hugging the left edge of the 24×24 box */
}
.gen-tile .tile-icon-btn.lxm-pill-btn:hover {
  background: var(--ink-3);
  color: var(--brass-1);
}

/* Favorite (star) tile button. Outline by default; filled gold when on.
   The .is-favorite class on the card carries the same gold tint so a
   user can spot favorites at a glance without hovering. */
.gen-tile .tile-icon-btn.lx-fav-btn.is-on,
.gen-tile .tile-icon-btn.lx-fav-btn.is-on:hover {
  color: var(--brass-1);
}
.gen-tile .tile-icon-btn.lx-fav-btn.is-on .icon {
  fill: currentColor;
  stroke: currentColor;
}
.gen-tile.is-favorite {
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35);
}

/* Favorites filter chip + count badge. Mirrors the per-shot pill
   language so it feels familiar. */
.lx-gen-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 12px;
}
.lx-fav-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.lx-fav-filter .icon { width: 13px; height: 13px; }
.lx-fav-filter:hover { border-color: var(--accent); color: var(--text); }
.lx-fav-filter.is-on {
  border-color: var(--accent);
  color: var(--accent-bright);
  background: rgba(212, 175, 55, 0.06);
}
.lx-fav-filter.is-on .icon { fill: currentColor; }
.lx-fav-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0 6px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
}
.lx-fav-filter.is-on .lx-fav-filter-count {
  background: rgba(212, 175, 55, 0.18);
  color: var(--accent-bright);
}

/* When the body carries the kind-specific filter class, hide non-favorite
   tiles in that kind's grid. Keep the toolbar + favorites themselves. */
body.lx-fav-only-images #lxm-img-result .gen-tile:not(.is-favorite),
body.lx-fav-only-videos #lxm-vid-result .gen-tile:not(.is-favorite) {
  display: none;
}

/* Multi-shot toggle bridge — the .switch + .dot styles from the source
   live in lx-theme-remix.css (.switch.on), but our markup uses a hidden
   <input type="checkbox"> as the state of truth (so JS hooks reading
   .checked stay intact). Apply the .on visuals via :has() when the
   wrapped checkbox is checked. */
label.multishot { cursor: pointer; }
label.multishot:has(#lxm-vid-multishot:checked) .switch {
  background: var(--brass-2);
  border-color: var(--brass-2);
}
label.multishot:has(#lxm-vid-multishot:checked) .switch .dot {
  left: 18px;
  background: oklch(0.18 0.01 60);
}

/* Voice Generation panel — 3 action cards in a row + Recent voiceovers panel.
   Mirrors the components-pages-2.jsx VoiceGenPage layout. */
.panel[data-panel="voice"] .action-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.panel[data-panel="voice"] .lxm-vc-recent-panel {
  margin-top: 18px;
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.025), oklch(1 0 0 / 0.005)),
    var(--ink-1);
  border: 1px solid var(--ink-3);
  border-radius: var(--r-lg);
  padding: 20px 22px;
}
.panel[data-panel="voice"] .lxm-vc-recent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding-top: 14px;
}
.panel[data-panel="voice"] .lxm-vc-recent-grid:empty::before {
  content: 'No voiceovers yet — generate one to see it here.';
  grid-column: 1 / -1;
font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 14px 0 6px;
}
@media (max-width: 900px) {
  .panel[data-panel="voice"] .action-card-grid,
  .panel[data-panel="voice"] .lxm-vc-recent-grid {
    grid-template-columns: 1fr;
  }
}

/* Composer attach-row wraps the ref-image tiles + caption above the textarea. */
.composer-attach-row { padding: 0 4px; }

/* Higgsfield-style inline ref-image tiles. The dropzone container is
   visually invisible (no border, no padding) so the two square tiles
   sit flush in the composer-attach-row. */
.lx-img-refs {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
}
.lx-img-refs:hover { border-color: transparent; }
.lx-img-refs.is-dragover {
  background: transparent;
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
  border-radius: 14px;
}
/* The factory's `.lxm-dropzone:not(.has-files) .lxm-dropzone-thumbs { display: none }`
   rule would hide the tile row when no images are uploaded, but our 2-tile UI
   IS its own empty state — so override with an equally-specific selector. */
.lxm-dropzone.lx-img-refs .lxm-dropzone-thumbs,
.lxm-dropzone.lx-img-refs:not(.has-files) .lxm-dropzone-thumbs {
  display: flex;
}
.lx-img-refs-tiles {
  display: flex;
  gap: 10px;
  padding: 6px 0 0;
}
.lx-img-ref-tile {
  position: relative;
  width: 64px;
  height: 64px;
  flex: none;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.lx-img-ref-tile:hover {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
}
.lx-img-ref-tile svg { width: 26px; height: 26px; }
.lx-img-ref-tile.is-filled {
  overflow: hidden;
  cursor: default;
  border-color: var(--border-2, var(--border));
  background: transparent;
}
.lx-img-ref-tile.is-filled img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.lx-img-ref-tile-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.lx-img-ref-tile-remove:hover { background: rgba(220, 38, 38, 0.85); }

/* The Add tile is always last and visually prominent so the user always
   sees the affordance to upload another image. Slightly larger plus
   stroke, dashed border, brass accent on hover. When the dropzone is at
   its max, .is-disabled greys it out without removing it from layout. */
.lx-img-ref-tile.lx-img-ref-add {
  border-style: dashed;
  border-color: var(--border-2, var(--border));
  color: var(--text-muted);
}
.lx-img-ref-tile.lx-img-ref-add svg {
  width: 32px;
  height: 32px;
  stroke-width: 2.25;
}
.lx-img-ref-tile.lx-img-ref-add:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(212, 175, 55, 0.06);
}
.lx-img-ref-tile.lx-img-ref-add.is-disabled,
.lx-img-ref-tile.lx-img-ref-add[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.lx-img-ref-tile.lx-img-ref-add.is-disabled:hover,
.lx-img-ref-tile.lx-img-ref-add[disabled]:hover {
  border-color: var(--border-2, var(--border));
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.025);
}
.lx-img-refs-caption {
  margin: 6px 0 4px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.3;
}

/* Bridge: the live composer uses .lxm-chip <details>/<summary> for chip
   popovers; the designer uses .tool-pill. Adding both classes lets the
   source styles.css .tool-pill rule (brass border on open/hover, mono font,
   compact padding) win over the legacy .lxm-chip background. */
.composer-row .lxm-chip.tool-pill {
  background: var(--ink-1);
}
.composer-row .lxm-chip.tool-pill[open],
.composer-row details[open] > .lxm-chip.tool-pill {
  border-color: var(--brass-3);
  color: var(--brass-1);
}
.composer-row .lxm-chip.tool-pill .lxm-chip-arrow {
  margin-left: 4px;
  opacity: 0.6;
}

/* Generate button picks up the brass-gradient .btn-generate look from the
   Remix theme. The labelWithCost helper writes two spans (.lx-btn-label,
   .lx-btn-credits) — restyle .lx-btn-credits inside .btn-generate to read
   as a tight cost pill (designer .cost), inline rather than stacked. */
.btn-generate.lx-prompt-go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-generate .lx-btn-label {
  display: inline-block;
  line-height: 1;
}
.btn-generate .lx-btn-credits {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: oklch(0 0 0 / 0.25);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  color: inherit;
  opacity: 0.85;
}

.lx-an-jump {
  position: sticky;
  top: 80px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 1px;
}
.lx-an-jump-h {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-muted); font-weight: 700; padding: 4px 8px 6px;
}
.lx-an-jump-btn {
  background: transparent; border: 0; color: var(--text-muted);
  font-family: inherit; font-size: 12.5px; text-align: left;
  padding: 7px 10px; border-radius: 6px; cursor: pointer;
  transition: background 120ms, color 120ms;
}
.lx-an-jump-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.lx-an-jump-foot {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
}
.lx-an-jump-toggle {
  background: transparent; border: 0; color: var(--text-dim);
  font-family: inherit; font-size: 11.5px; text-align: left;
  padding: 5px 10px; border-radius: 6px; cursor: pointer;
}
.lx-an-jump-toggle:hover { background: rgba(255,255,255,0.04); color: var(--text); }

@media (max-width: 900px) {
  .lx-an-result-wrap { grid-template-columns: 1fr; }
  .lx-an-jump { position: static; top: auto; }
}

/* ── Prompt Library ───────────────────────────────────────────────────── */
.lx-pl-toolbar {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
}
.lx-pl-cats {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
}
.lx-pl-cat {
  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: 12.5px; font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.lx-pl-cat:hover { border-color: var(--border-2); color: var(--text); }
.lx-pl-cat.active {
  background: var(--surface-elevated);
  border-color: var(--accent);
  color: var(--text);
}
.lx-pl-cat-count {
  font-size: 11px; color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  padding: 1px 6px; border-radius: 999px;
}
.lx-pl-cat.active .lx-pl-cat-count { color: var(--accent); }
.lx-pl-cat-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  font-size: 14px; line-height: 1;
  color: var(--text-dim);
  border-radius: 4px;
  margin-left: 2px;
}
.lx-pl-cat-x:hover { background: rgba(255,255,255,0.08); color: var(--text); }

.lx-pl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.lx-pl-empty {
  color: var(--text-dim); font-size: 13px;
  padding: 28px; text-align: center;
  background: var(--surface-1);
  border: 1px dashed var(--border);
  border-radius: 12px;
}
.lx-pl-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
}
.lx-pl-card:hover { border-color: var(--border-2); transform: translateY(-1px); }
.lx-pl-card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.lx-pl-card-title {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lx-pl-card-cat {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--accent);
  flex-shrink: 0;
}
.lx-pl-card-body {
  font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lx-pl-card-foot {
  display: flex; gap: 6px; margin-top: 2px;
}

/* Make the section a real <details> — kill the default disclosure marker
   and add our own rotating chevron. */
details.lxm-result-section > summary { list-style: none; cursor: pointer; user-select: none; }
details.lxm-result-section > summary::-webkit-details-marker { display: none; }
.lxm-result-chevron {
  flex-shrink: 0;
  width: 12px; height: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-dim);
  transition: transform 0.2s;
  font-size: 10px;
}
.lxm-result-chevron::before { content: "▶"; }
details.lxm-result-section[open] > summary .lxm-result-chevron { transform: rotate(90deg); }
details.lxm-result-section > summary h4 { flex: 1; }

/* ─── Voice preview modal ──────────────────────────────────────────────
   Triggered by the Discover Voices banner button (#lxm-vc-explore).
   Uses the shared .lx-vfm-modal infrastructure (backdrop, panel, head,
   close). The two model tabs (Turbo/v3) flip the MP3 src on every play
   button without re-fetching anything. Samples live at
   /assets/audio/voice-samples/<name>-<turbo|v3>.mp3.
*/
.lxm-vc-preview-controls {
  display: flex;
  justify-content: center;
  padding: 8px 4px 12px;
}
.lxm-vc-preview-models {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.lxm-vc-preview-model {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.lxm-vc-preview-model:hover { color: var(--text); }
.lxm-vc-preview-model.active {
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  color: #111;
}

.lxm-vc-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px 2px;
}

.lxm-vc-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: left;
  transition: border-color 0.12s, background 0.12s;
}
.lxm-vc-card:hover { border-color: var(--border-2); background: var(--surface-3); }
.lxm-vc-card.is-selected {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.06), transparent), var(--surface-2);
}

.lxm-vc-card-play {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent), var(--surface-3);
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.06s, background 0.12s, border-color 0.12s;
}
.lxm-vc-card-play:hover { border-color: var(--accent-soft); background: var(--surface-elevated); }
.lxm-vc-card-play:active { transform: scale(0.94); }
.lxm-vc-card-play.is-playing {
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  border-color: var(--accent-bright);
  color: #111;
}
.lxm-vc-card-play .icon { width: 14px; height: 14px; }

.lxm-vc-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lxm-vc-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.lxm-vc-card-meta {
  font-size: 11.5px;
  color: var(--text-dim);
}

.lxm-vc-card-use {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.lxm-vc-card-use:hover { border-color: var(--accent-soft); color: var(--accent); }

.lxm-vc-preview-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px 8px;
  color: var(--text-dim);
  font-size: 13px;
}