/* RENZO AI — Prose Renderer | .msg.bot .msg-body.rz-prose (0-4-0)
   !important only where style.css forces it. Dark default, light via [data-theme="light"]. */

:root {
  --rz-fg: #e2e8f0; --rz-fg-muted: #94a3b8; --rz-fg-heading: #f1f5f9;
  --rz-accent: #818cf8; --rz-accent-hover: #a5b4fc;
  --rz-surface: #1e293b; --rz-border: rgba(148,163,184,0.12);
  --rz-code-bg: #1e293b; --rz-inline-code-bg: rgba(99,102,241,0.08);
}
[data-theme="light"] {
  --rz-fg: #1e293b; --rz-fg-muted: #64748b; --rz-fg-heading: #0f172a;
  --rz-accent: #4f46e5; --rz-accent-hover: #6366f1;
  --rz-surface: #f8fafc; --rz-border: rgba(15,23,42,0.08);
  --rz-code-bg: #1e293b; --rz-inline-code-bg: rgba(99,102,241,0.06);
}

/* ── Base typography ── */
.msg.bot .msg-body.rz-prose {
  color: var(--rz-fg) !important; font-size: 15px !important;
  line-height: 1.65 !important; max-width: 720px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.msg.bot .msg-body.rz-prose > * + * { margin-top: 0.75em; }
.msg.bot .msg-body.rz-prose > :first-child { margin-top: 0 !important; }
.msg.bot .msg-body.rz-prose > :last-child { margin-bottom: 0 !important; }

/* ── Paragraphs ── */
.msg.bot .msg-body.rz-prose p { margin: 0 0 0.5em !important; line-height: 1.65 !important; font-size: 15px !important; }
.msg.bot .msg-body.rz-prose p:last-child { margin-bottom: 0 !important; }

/* ── Headings ── */
.msg.bot .msg-body.rz-prose h1 { font-size: 1.25em !important; font-weight: 700 !important; margin: 1.2em 0 0.4em !important; color: var(--rz-fg-heading) !important; }
.msg.bot .msg-body.rz-prose h2 { font-size: 1.15em !important; font-weight: 700 !important; margin: 1em 0 0.4em !important; color: var(--rz-fg-heading) !important; border: none !important; }
.msg.bot .msg-body.rz-prose h3 { font-size: 1.05em !important; font-weight: 650 !important; margin: 0.9em 0 0.3em !important; color: var(--rz-fg-heading) !important; border: none !important; background: none !important; padding: 0 !important; }
.msg.bot .msg-body.rz-prose h4 { font-size: 1em; font-weight: 600; color: var(--rz-fg-muted); margin: 0.8em 0 0.3em; }
.msg.bot .msg-body.rz-prose h1:first-child,
.msg.bot .msg-body.rz-prose h2:first-child,
.msg.bot .msg-body.rz-prose h3:first-child { margin-top: 0 !important; }

/* ── Links ── */
.msg.bot .msg-body.rz-prose a { color: var(--rz-accent); text-decoration: none; transition: color 0.15s; }
.msg.bot .msg-body.rz-prose a:hover { color: var(--rz-accent-hover); text-decoration: underline; }

/* ── Bold / Italic ── */
.msg.bot .msg-body.rz-prose strong { color: var(--rz-fg-heading) !important; font-weight: 600 !important; }
.msg.bot .msg-body.rz-prose em { color: var(--rz-fg-muted) !important; font-style: italic !important; }

/* ── Lists ── */
.msg.bot .msg-body.rz-prose ul, .msg.bot .msg-body.rz-prose ol { padding-left: 1.4em !important; margin: 0.6em 0 !important; }
.msg.bot .msg-body.rz-prose li { margin: 0.25em 0 !important; line-height: 1.65 !important; }
.msg.bot .msg-body.rz-prose li::marker { color: var(--rz-fg-muted) !important; }

/* ── Blockquotes ── */
.msg.bot .msg-body.rz-prose blockquote { border-left: 3px solid var(--rz-accent) !important; padding: 0.3em 0 0.3em 1em !important; margin: 0.75em 0; color: var(--rz-fg-muted); background: none !important; }

/* ── Inline code ── */
.msg.bot .msg-body.rz-prose code {
  font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace !important;
  background: var(--rz-inline-code-bg) !important; padding: 0.15em 0.4em !important;
  border-radius: 4px !important; font-size: 0.88em !important; color: var(--rz-fg) !important;
}
[data-theme="light"] .msg.bot .msg-body.rz-prose code { background: var(--rz-inline-code-bg) !important; color: #5b21b6 !important; }

/* ── Code blocks ── */
.msg.bot .msg-body.rz-prose .rz-code-block { position: relative; margin: 0.75em 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--rz-border); }
.msg.bot .msg-body.rz-prose .rz-code-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; background: rgba(15,23,42,0.95); font-size: 0.72em; color: var(--rz-fg-muted); }
.msg.bot .msg-body.rz-prose .rz-copy-btn { border: none; background: rgba(148,163,184,0.1); color: var(--rz-fg-muted); padding: 3px 10px; border-radius: 4px; cursor: pointer; font-size: 1em; font-family: inherit; }
.msg.bot .msg-body.rz-prose .rz-copy-btn:hover { background: rgba(99,102,241,0.15); color: #e2e8f0; }
.msg.bot .msg-body.rz-prose pre { background: var(--rz-code-bg) !important; color: #e2e8f0 !important; margin: 0; padding: 1em 1.2em; overflow-x: auto; border-radius: 0; border: none !important; }
.msg.bot .msg-body.rz-prose pre code { background: none !important; padding: 0 !important; display: block !important; font-size: 0.82em !important; line-height: 1.55 !important; color: #e2e8f0 !important; }
[data-theme="light"] .msg.bot .msg-body.rz-prose pre { background: #f8f9fc !important; color: #1e293b !important; }
[data-theme="light"] .msg.bot .msg-body.rz-prose pre code { color: #1e293b !important; }

/* ── Tables ── */
.msg.bot .msg-body.rz-prose table { width: 100%; border-collapse: collapse; margin: 0.75em 0; font-size: 0.88em; display: table; }
.msg.bot .msg-body.rz-prose th, .msg.bot .msg-body.rz-prose td { border: 1px solid var(--rz-border); padding: 0.45em 0.7em; text-align: left; }
.msg.bot .msg-body.rz-prose th { background: rgba(99,102,241,0.08); font-weight: 600; color: var(--rz-fg-heading) !important; }
.msg.bot .msg-body.rz-prose tr:nth-child(even) td { background: rgba(148,163,184,0.03); }
.msg.bot .msg-body.rz-prose tr:last-child td { border-bottom: none !important; }

/* ── HR ── */
.msg.bot .msg-body.rz-prose hr { border: none; border-top: 1px solid var(--rz-border); margin: 1.2em 0; }

/* ── Images ── */
.msg.bot .msg-body.rz-prose img { max-width: 100% !important; border-radius: 8px !important; margin: 0.75em 0 !important; }
.msg.bot .msg-body.rz-prose .rz-img-card { border-radius: 8px; overflow: hidden; border: 1px solid var(--rz-border); margin: 0.75em 0; }
.msg.bot .msg-body.rz-prose .rz-img-card img { display: block; width: 100%; margin: 0; border-radius: 0; }
.msg.bot .msg-body.rz-prose .rz-img-caption { padding: 6px 12px; font-size: 0.75em; color: var(--rz-fg-muted); background: var(--rz-surface); }

/* ── Message body overflow fix ── */
.msg.bot .msg-body.rz-prose { overflow-x: auto; min-width: 0; padding-bottom: 22px !important; }

/* ── Tables: scrollable inside messages ── */
.msg.bot .msg-body.rz-prose table { display: block; overflow-x: auto; max-width: 100%; }

/* ── Message actions (fade on hover) ── */
.msg.bot .msg-actions { opacity: 0 !important; transition: opacity 0.15s ease !important; }
.msg.bot:hover .msg-actions { opacity: 1 !important; }
.msg.bot .msg-actions:focus-within { opacity: 1 !important; }

/* ── Timestamp: inline at bottom, not absolute ── */
.msg.bot .msg-time { display: block; text-align: right; font-size: 11px !important; color: var(--rz-fg-muted); opacity: 0; transition: opacity 0.15s; margin-top: 8px; }
.msg.bot:hover .msg-time { opacity: 0.5; }

/* ── Message appear animation ── */
.msg.bot { animation: rzMsgIn 200ms ease-out forwards; }
@keyframes rzMsgIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ──────────────────────────────────────────────────────────────
   INSTRUCTIONAL LAYOUT — theme-safe step / callout / emphasis.
   Replaces the former hardcoded inline-style injection in app.js
   (Step cards #6366f1, prereq card #3b82f6, field-name #4338ca).
   Uses ONLY --rz-* tokens so dark + [data-theme="light"] both work.
   ────────────────────────────────────────────────────────────── */

/* Step number badge (rz-step-num span emitted by the Step→h3 regex) */
.msg.bot .msg-body.rz-prose .rz-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5em; height: 1.5em; margin-right: 0.5em;
  border-radius: 50%; flex-shrink: 0;
  font-size: 0.82em; font-weight: 700; line-height: 1;
  color: #fff; background: var(--rz-accent);
}

/* Step heading — subtle left accent, theme-aware (replaces inline purple card) */
.msg.bot .msg-body.rz-prose h3.rz-step {
  display: flex; align-items: center;
  padding: 0.35em 0 0.35em 0.7em !important;
  margin: 0.9em 0 0.4em !important;
  border-left: 3px solid var(--rz-accent) !important;
  background: var(--rz-inline-code-bg) !important;
  border-radius: 0 8px 8px 0 !important;
}

/* Prerequisite / requirement / info callout (replaces inline #3b82f6 card) */
.msg.bot .msg-body.rz-prose .rz-callout {
  margin: 0.75em 0; padding: 0.7em 0.9em;
  font-size: 0.92em; line-height: 1.6; color: var(--rz-fg);
  background: var(--rz-inline-code-bg);
  border: 1px solid var(--rz-border);
  border-left: 3px solid var(--rz-accent);
  border-radius: 0 8px 8px 0;
}
.msg.bot .msg-body.rz-prose .rz-callout-title {
  display: flex; align-items: center; gap: 0.4em;
  margin-bottom: 0.35em; font-weight: 600; color: var(--rz-fg-heading);
}
.msg.bot .msg-body.rz-prose .rz-callout > :last-child { margin-bottom: 0; }

/* Field-name emphasis — theme-safe accent (replaces inline color:#4338ca) */
.msg.bot .msg-body.rz-prose strong.rz-field {
  color: var(--rz-accent) !important;
  font-weight: 600 !important;
}

/* ──────────────────────────────────────────────────────────────
   POLISH — theme-aware code header, follow-up divider, meta row.
   CSS-only, token-based (dark + light). Added by render audit.
   ────────────────────────────────────────────────────────────── */

/* Code-block header: match the surface in both themes (was a fixed dark bar) */
.msg.bot .msg-body.rz-prose .rz-code-header {
  background: var(--rz-surface);
  color: var(--rz-fg-muted);
  border-bottom: 1px solid var(--rz-border);
}
[data-theme="light"] .msg.bot .msg-body.rz-prose .rz-code-header {
  background: #eef1f7;
  color: #475569;
}

/* Follow-up suggestions: clean separation from the answer */
.msg.bot .rz-next {
  margin-top: 1.25em;
  padding-top: 0.9em;
  border-top: 1px solid var(--rz-border);
}
.msg.bot .rz-next-label {
  color: var(--rz-fg-muted);
  letter-spacing: 0.4px;
}

/* Meta / confidence row: one calm definition */
.msg.bot .rz-meta {
  display: flex; align-items: center; gap: 12px;
  margin-top: 1em; padding-top: 0.6em;
  border-top: 1px solid var(--rz-border);
  font-size: 0.72em; color: var(--rz-fg-muted);
}
.msg.bot .rz-meta .rz-conf { font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   DESIGN PASS — 6-agent audit (welcome, message, chrome, theme,
   motion, a11y). CSS-only, token-based, dark + light. Loaded after
   style.css so these win the cascade. 2026-05-31.
   ══════════════════════════════════════════════════════════════ */

/* ── A11Y: one global, theme-aware focus ring covering ALL controls ── */
:root { --rz-focus: #a5b4fc; }
[data-theme="light"] { --rz-focus: #4f46e5; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible,
[tabindex]:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--rz-focus) !important;
  outline-offset: 2px !important;
  border-radius: 6px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rz-focus) 28%, transparent) !important;
}
/* The composer textareas focus the WRAPPER, not the field — no box-in-a-box.
   Remove the global ring on the inner inputs of both composers. */
.input-wrapper textarea:focus-visible,
.input-wrapper textarea:focus,
.welcome-input-area textarea:focus-visible,
.welcome-input-area textarea:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* ── CHROME: restore a real active-conversation indicator (was invisible) ── */
.sidebar .history-item.active,
.history-item.active {
  background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
  box-shadow: inset 3px 0 0 0 var(--primary) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}
[data-theme="light"] .sidebar .history-item.active,
[data-theme="light"] .history-item.active {
  background: color-mix(in srgb, var(--primary) 9%, #fff) !important;
}

/* ── CHROME: send button affordant again (was opacity:0.4 at rest) ── */
.send-btn { opacity: 1 !important; background: var(--primary); color: #fff; }
.send-btn:hover { transform: scale(1.06); box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 35%, transparent); }
.send-btn:disabled { opacity: 0.3 !important; box-shadow: none; transform: none; }

/* ── CHROME: de-risk the bug FAB (was loud destructive red) ── */
.bug-fab {
  width: 40px !important; height: 40px !important; border-radius: 12px !important;
  background: var(--bg-card) !important; color: var(--text-muted) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important; opacity: 0.7;
}
.bug-fab:hover {
  opacity: 1; color: var(--primary-light) !important;
  border-color: color-mix(in srgb, var(--primary) 30%, transparent) !important;
  background: color-mix(in srgb, var(--primary) 6%, var(--bg-card)) !important;
  transform: translateY(-2px) scale(1.04) !important;
}

/* ── CHROME: tame the topbar icon cluster (7 flat icons → hierarchy) ── */
.topbar-btn { border-radius: 8px; transition: opacity .15s, background .15s; }
.topbar-btn:hover { opacity: 1; background: color-mix(in srgb, var(--primary) 8%, transparent); }
#_b5 { opacity: 0.8; }

/* ── THEME: stronger user bubble in light (was near-invisible pale lavender) ── */
[data-theme="light"] .msg.user .msg-body {
  background: rgba(99,102,241,0.14) !important;
  border: 1px solid rgba(99,102,241,0.22) !important;
  color: #312e81 !important;
}

/* ── THEME: readable bot links + table headers in light ── */
[data-theme="light"] .msg.bot .msg-body a,
[data-theme="light"] .msg.bot .msg-body.rz-prose a { color: #4338ca !important; }
[data-theme="light"] .msg.bot .msg-body thead th,
[data-theme="light"] .msg.bot .msg-body.rz-prose th { color: #312e81 !important; background: rgba(99,102,241,0.10) !important; }

/* ── MESSAGE: lead paragraph breathes (slightly larger first line) ── */
.msg.bot .msg-body.rz-prose > p:first-child { font-size: 1.02em !important; }

/* ── WELCOME: solid greeting (retire low-contrast gradient text) ── */
.rz-w-greeting {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--text) !important;
  font-size: 2em !important;
}
.rz-w-sub { color: var(--text-muted) !important; }

/* ── MOTION: calm the welcome orb (4 loops → 1 slow breath) ── */
.rz-w-orb-inner { animation-duration: 6s !important; }
.rz-w-orb-glow { animation: none !important; opacity: 0.18 !important; }
.rz-w-orb-ring, .rz-w-ring-2 { animation: none !important; }

/* ── MOTION: hardened reduced-motion (covers idle loops + JS-driven UI) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; scroll-behavior: auto !important;
  }
  .rz-w-orb-inner, .rz-w-orb-glow, .rz-w-orb-ring, .rz-w-ring-2 { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   WELCOME LAYOUT TUNING — same identity, cleaner rhythm & hierarchy.
   Approved in preview. CSS-only, token-based, dark + light.
   Loaded after style.css so these win. 2026-05-31.
   ══════════════════════════════════════════════════════════════ */

/* Intentional vertical rhythm: orb → greeting → sub → (gap) → actions */
.rz-w { gap: 0 !important; }
.rz-w-orb-wrap { margin-bottom: 16px !important; }
.rz-w-greeting { margin-bottom: 4px !important; }
.rz-w-sub { margin: 0 0 26px !important; font-size: 1em !important; }

/* Chips = primary launchers: a tidy, slightly larger row */
.rz-w-chips { gap: 10px !important; margin-top: 0 !important; }
.rz-w-chip { font-size: 0.9em !important; padding: 10px 18px !important; }
.rz-w-chip .lucide { opacity: 1 !important; }

/* Suggested-for-you = clearly SECONDARY layer (was visually competing) */
.sg-cards { margin-top: 24px !important; gap: 8px !important; max-width: 560px !important; }
.sg-cards::before {
  content: "Suggested for you";
  display: block; text-align: left; padding-left: 4px; margin-bottom: 4px;
  font-size: 0.72em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--rz-fg-muted, #8b9dc3); opacity: 0.8;
}
.sg-card {
  border-radius: 12px !important; padding: 12px 16px !important; font-size: 14px !important;
  transition: transform .18s var(--rz-ease,cubic-bezier(.2,.7,.2,1)), border-color .18s, background .18s !important;
}
.sg-card:hover { transform: translateX(3px) !important; }
.sg-icon { opacity: 1 !important; }

/* ══════════════════════════════════════════════════════════════
   ONE COMPOSER ON WELCOME — fix the double-composer bug.
   GUARD-corrected: covers "display: none" AND "display:none", and
   only hides the bottom bar when a welcome composer actually exists
   (fail-safe: if .welcome-input-area is absent, bottom bar stays).
   Reacts to hideWelcome()/showWelcome() display toggles. No JS change.
   ══════════════════════════════════════════════════════════════ */
.main:has(#welcomeScreen:not([style*="display: none"]):not([style*="display:none"]) .welcome-input-area) #inputArea {
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Welcome composer cannot linger once chat starts (display:none on #welcomeScreen) */
#welcomeScreen[style*="display: none"] .welcome-input-area,
#welcomeScreen[style*="display:none"] .welcome-input-area { display: none !important; }

/* ── WELCOME RHYTHM — one clean 4/8 scale (GUARD: needs !important to beat
   visual-hierarchy-improvements.css loaded after). Identity tight, clear
   break before actions, actions grouped. Theme-agnostic (spacing only). ── */
.welcome .rz-w-orb-wrap { margin-bottom: 12px !important; }
.welcome .rz-w-greeting { margin: 0 0 4px !important; }
.welcome .rz-w-sub { margin: 0 0 32px !important; }
.welcome .rz-w-chips { margin: 0 0 16px !important; }
.welcome .welcome-input-area { margin-top: 16px !important; }
.welcome .sg-cards { margin-top: 16px !important; }

/* ══════════════════════════════════════════════════════════════
   COMPOSER POLISH — one clean shadow + focus, no box-in-a-box.
   Normalizes the several competing focus-within rules into a single
   tasteful state. Loaded last → wins. Both themes via tokens.
   ══════════════════════════════════════════════════════════════ */
.input-wrapper, .welcome-input-area .input-wrapper {
  box-shadow: 0 2px 10px rgba(15,23,42,0.06) !important;
  transition: border-color .18s ease, box-shadow .2s ease !important;
}
[data-theme="light"] .input-wrapper,
[data-theme="light"] .welcome-input-area .input-wrapper {
  box-shadow: 0 2px 12px rgba(30,41,90,0.07) !important;
}
/* Single, soft focus ring on the WRAPPER only */
.input-wrapper:focus-within,
.welcome-input-area .input-wrapper:focus-within {
  border-color: color-mix(in srgb, var(--primary, #6366f1) 45%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #6366f1) 14%, transparent),
              0 4px 16px rgba(15,23,42,0.08) !important;
  animation: none !important;
}
/* Kill the old animated gradient halo behind the welcome composer (visual noise) */
.welcome-input-area .input-wrapper::before { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   WELCOME LOOK — colored orb + text-only chips + gradient name.
   Approved layout. CSS-only (the name <span> is added in app.js).
   Loaded after style.css → wins. Both themes. 2026-05-31.
   ══════════════════════════════════════════════════════════════ */

/* 1 · Rainbow RING with white center (matches the approved look) */
.rz-w-orb-inner {
  background:
    radial-gradient(circle, #ffffff 0 56%, transparent 60%),
    conic-gradient(from 0deg,#6366f1,#8b5cf6,#ec4899,#f59e0b,#22d3ee,#6366f1) !important;
  animation: rzOrbSpin 8s linear infinite !important;
}
[data-theme="light"] .rz-w-orb-inner {
  background:
    radial-gradient(circle, #ffffff 0 56%, transparent 60%),
    conic-gradient(from 0deg,#6366f1,#8b5cf6,#ec4899,#f59e0b,#22d3ee,#6366f1) !important;
}
.rz-w-orb-glow {
  background: conic-gradient(from 0deg,#6366f1,#8b5cf6,#ec4899,#f59e0b,#22d3ee,#6366f1) !important;
  filter: blur(16px) !important; opacity: .55 !important;
  animation: rzOrbSpin 20s linear infinite !important;
}
@keyframes rzOrbSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .rz-w-orb-inner, .rz-w-orb-glow { animation: none !important; }
}

/* 2 · Chips: text only — hide the icon inside each chip */
.rz-w-chip .lucide { display: none !important; }

/* 3 · Greeting name accent (the <span class="rz-w-name"> is set by app.js) */
.rz-w-greeting .rz-w-name {
  background: linear-gradient(90deg,#6366f1,#a855f7,#ec4899);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ══════════════════════════════════════════════════════════════
   4 · SUGGESTED-FOR-YOU shadow fix (2026-06-01)
   micro-interactions.css applies `[class*="card"]:hover` with a heavy
   black shadow (0 4px 12px rgba(0,0,0,0.4)) — it accidentally matches
   .sg-card and makes the list items "float" / look detached, especially
   on the light welcome screen. We scope a soft, theme-aware hover that
   matches the chip language (subtle indigo lift, not a hard black drop).
   Loaded last → wins. Only .sg-card is touched; other cards unchanged.
   ══════════════════════════════════════════════════════════════ */
.sg-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.sg-card:hover {
  transform: translateX(3px) !important;
  border-color: rgba(99,102,241,0.30) !important;
  background: rgba(99,102,241,0.05) !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.12) !important;
}
.sg-card:active {
  transform: translateX(3px) scale(0.995) !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.10) !important;
}
/* Light theme: lighter surface, soft indigo lift (no black drop) */
[data-theme="light"] .sg-card {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .sg-card:hover {
  background: #fff !important;
  border-color: rgba(99,102,241,0.22) !important;
  box-shadow: 0 6px 18px rgba(99,102,241,0.10), 0 0 0 1px rgba(99,102,241,0.06) !important;
}