/* ============================================================================
   Chrishi Design System — Centralized Design Tokens & Components
   ============================================================================
   Version: 1.0.0
   Updated: 2026-04-06
   
   This file is the single source of truth for all design tokens, component
   classes, and visual patterns used across the Chrishi AI platform. Every
   page should consume this instead of writing ad-hoc inline styles.
   ============================================================================ */

/* ── 1. CSS Custom Properties (Design Tokens) ──────────────────────────────── */

:root {
  /* ── Brand Palette ── */
  --chr-primary:          #7c3aed;   /* Violet-600 (Chrishi brand) */
  --chr-primary-hover:    #6d28d9;   /* Violet-700 */
  --chr-primary-light:    #f5f3ff;   /* Violet-50  */
  --chr-primary-muted:    #c4b5fd;   /* Violet-300 */

  --chr-secondary:        #8b5cf6;   /* Violet-500 */
  --chr-secondary-hover:  #7c3aed;   /* Violet-600 */
  --chr-secondary-light:  #f5f3ff;   /* Violet-50  */

  --chr-success:          #10b981;   /* Emerald-500 */
  --chr-success-hover:    #059669;   /* Emerald-600 */
  --chr-success-light:    #ecfdf5;   /* Emerald-50  */

  --chr-danger:           #f43f5e;   /* Rose-500 */
  --chr-danger-hover:     #e11d48;   /* Rose-600 */
  --chr-danger-light:     #fff1f2;   /* Rose-50  */

  --chr-warning:          #f59e0b;   /* Amber-500 */
  --chr-warning-light:    #fffbeb;   /* Amber-50  */

  --chr-info:             #3b82f6;   /* Blue-500 */
  --chr-info-light:       #eff6ff;   /* Blue-50  */

  /* ── Neutral Palette ── */
  --chr-bg:               #f8fafc;   /* Slate-50  */
  --chr-bg-white:         #ffffff;
  --chr-bg-muted:         #f1f5f9;   /* Slate-100 */
  --chr-border:           #e2e8f0;   /* Slate-200 */
  --chr-border-strong:    #cbd5e1;   /* Slate-300 */
  --chr-text:             #0f172a;   /* Slate-900 */
  --chr-text-secondary:   #475569;   /* Slate-600 */
  --chr-text-muted:       #94a3b8;   /* Slate-400 */
  --chr-text-placeholder: #cbd5e1;   /* Slate-300 */

  /* ── Typography ── */
  --chr-font-family:      'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --chr-font-mono:        'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* ── Font Sizes ── */
  --chr-text-xs:          0.75rem;   /* 12px */
  --chr-text-sm:          0.875rem;  /* 14px */
  --chr-text-base:        1rem;      /* 16px */
  --chr-text-lg:          1.125rem;  /* 18px */
  --chr-text-xl:          1.25rem;   /* 20px */
  --chr-text-2xl:         1.5rem;    /* 24px */
  --chr-text-3xl:         1.875rem;  /* 30px */
  --chr-text-4xl:         2.25rem;   /* 36px */

  /* ── Spacing ── */
  --chr-space-0:          0;
  --chr-space-1:          0.25rem;   /* 4px  */
  --chr-space-2:          0.5rem;    /* 8px  */
  --chr-space-3:          0.75rem;   /* 12px */
  --chr-space-4:          1rem;      /* 16px */
  --chr-space-5:          1.25rem;   /* 20px */
  --chr-space-6:          1.5rem;    /* 24px */
  --chr-space-8:          2rem;      /* 32px */
  --chr-space-10:         2.5rem;    /* 40px */
  --chr-space-12:         3rem;      /* 48px */

  /* ── Border Radius ── */
  --chr-radius-sm:        0.375rem;  /* 6px  */
  --chr-radius-md:        0.5rem;    /* 8px  */
  --chr-radius-lg:        0.75rem;   /* 12px */
  --chr-radius-xl:        1rem;      /* 16px */
  --chr-radius-2xl:       1.25rem;   /* 20px */
  --chr-radius-full:      9999px;

  /* ── Shadows ── */
  --chr-shadow-xs:        0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --chr-shadow-sm:        0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
  --chr-shadow-md:        0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --chr-shadow-lg:        0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --chr-shadow-xl:        0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

  /* ── Transitions ── */
  --chr-transition-fast:  150ms cubic-bezier(0.4, 0, 0.2, 1);
  --chr-transition-base:  200ms cubic-bezier(0.4, 0, 0.2, 1);
  --chr-transition-slow:  300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Gradients ── */
  --chr-gradient-primary: linear-gradient(135deg, #7c3aed, #8b5cf6);
  --chr-gradient-cta:     linear-gradient(135deg, #7c3aed, #6d28d9);
  --chr-gradient-success: linear-gradient(135deg, #10b981, #34d399);
  --chr-gradient-danger:  linear-gradient(135deg, #f43f5e, #fb7185);
}


/* ── 2. Dark Mode Tokens (Creative Studio Context) ─────────────────────────── */

.studio-context {
  --chr-bg:               #0b1326;   /* Oracle base (was #0a0a0f charcoal — healed the studio's "second black") */
  --chr-bg-white:         #131b2e;
  --chr-bg-muted:         #1a2236;
  --chr-border:           rgba(124, 110, 168, 0.15);
  --chr-border-strong:    rgba(124, 110, 168, 0.28);
  --chr-text:             #dae2fd;
  --chr-text-secondary:   #aab3d4;
  --chr-text-muted:       #7c87ad;
  --chr-text-placeholder: #5a648a;

  --chr-shadow-sm:        0 2px 8px -2px rgba(124, 58, 237, 0.12);
  --chr-shadow-md:        0 8px 24px -6px rgba(124, 58, 237, 0.18);
  --chr-shadow-lg:        0 16px 40px -10px rgba(124, 58, 237, 0.26);
}


/* ── 2b. Predictive Oracle dark theme ──────────────────────────────────────
   Remaps the shared component tokens (.chr-card / .chr-btn / .chr-input / …)
   onto the tonal surface hierarchy so "cards" become layers (not white boxes)
   and 1px borders become ghost borders. Phase 1 applies `theme-oracle`
   (with `dark`) on the authenticated <html> to flip the app dark in one move.
   Additive: nothing wears this class yet, so Phase 0 changes nothing. ── */
.theme-oracle {
  --chr-bg:               #0b1326;
  --chr-bg-white:         #131b2e;
  --chr-bg-muted:         #1a2236;
  --chr-border:           rgba(124, 110, 168, 0.15);
  --chr-border-strong:    rgba(124, 110, 168, 0.28);
  --chr-text:             #dae2fd;
  --chr-text-secondary:   #aab3d4;
  --chr-text-muted:       #7c87ad;
  --chr-text-placeholder: #5a648a;
  --chr-primary-light:    rgba(124, 58, 237, 0.16);
  --chr-shadow-xs:        0 1px 2px rgba(8, 12, 28, 0.40);
  --chr-shadow-sm:        0 2px 8px -2px rgba(124, 58, 237, 0.12);
  --chr-shadow-md:        0 8px 24px -6px rgba(124, 58, 237, 0.18);
  --chr-shadow-lg:        0 16px 40px -10px rgba(124, 58, 237, 0.26);
  --chr-shadow-xl:        0 24px 56px -12px rgba(124, 58, 237, 0.32);
}


/* ── 2c. Dark Bridge ────────────────────────────────────────────────────────
   Retints the generic slate dark palette to the Oracle deep-blue hierarchy and
   carries the ~237 screens that have no explicit dark: variants, so the whole
   app reads as one cohesive Oracle surface. Scoped to .theme-oracle; removing
   the class (light-mode toggle) reverts everything to default slate.
   Backgrounds/borders ride the slate-scale vars (utilities are var-referenced
   in v4); text + white surfaces use targeted 2-class overrides so the dual-use
   slate scale (dark-bg vs dark-text) stays correct. ── */
.theme-oracle {
  --color-slate-950: #080f1f;
  --color-slate-900: #0b1326;
  --color-slate-800: #131b2e;
  --color-slate-700: #1a2236;
  --color-slate-600: #222a3d;
}
.theme-oracle .bg-white,
.theme-oracle .bg-slate-50,
.theme-oracle .bg-gray-50      { background-color: var(--surface-low); }
.theme-oracle .bg-slate-100,
.theme-oracle .bg-gray-100     { background-color: var(--surface-mid); }
.theme-oracle .text-slate-900,
.theme-oracle .text-gray-900,
.theme-oracle .text-slate-800,
.theme-oracle .text-gray-800   { color: #dae2fd; }
.theme-oracle .text-slate-700,
.theme-oracle .text-gray-700,
.theme-oracle .text-slate-600,
.theme-oracle .text-gray-600   { color: #aab3d4; }
.theme-oracle .text-slate-500,
.theme-oracle .text-slate-400,
.theme-oracle .text-gray-500,
.theme-oracle .text-gray-400   { color: #8b96bd; }
.theme-oracle .border-slate-200,
.theme-oracle .border-slate-100,
.theme-oracle .border-slate-300,
.theme-oracle .border-gray-200,
.theme-oracle .border-gray-100 { border-color: var(--ghost-border); }


/* ── 2d. Signature surfaces (glass + cursor glow) ───────────────────────────
   Opt-in classes for "floating" elements per DESIGN.md (20px blur glass) and a
   cursor-tracking brand glow rendered behind frosted glass — pair .chr-glow
   with data-controller="mouse-glow". Both are additive: nothing adopts them
   until a template asks for them. ── */
.chr-glass {
  background: color-mix(in oklab, var(--surface-bright) 55%, transparent);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid var(--ghost-border);
  box-shadow: var(--shadow-chrishi);
}
.chr-glow { position: relative; isolation: isolate; }
.chr-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--glow-x, 50%) var(--glow-y, -20%),
              rgba(124, 58, 237, 0.18), transparent 60%);
  opacity: var(--glow-opacity, 0);
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: -1;
}
@media (prefers-reduced-motion: reduce) {
  .chr-glow::before { transition: none; }
}


/* ── 2e. Signature "wow" surfaces (Phase 3) ─────────────────────────────────
   View Transitions for cinematic nav, big-number storytelling, the "neural"
   generation state, and theater-mode previews. All opt-in except the page
   transition, which is app-wide. ── */

/* Cinematic page navigation (Turbo 8 view transitions + native MPA fallback) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: chr-vt-out 0.22s ease both; }
::view-transition-new(root) { animation: chr-vt-in 0.30s ease both; }
@keyframes chr-vt-out { to   { opacity: 0; transform: translateY(-6px); } }
@keyframes chr-vt-in  { from { opacity: 0; transform: translateY(10px); } }

/* Big-number storytelling — pair a display metric with a label + narrative */
.chr-hero-metric { display: flex; flex-direction: column; gap: 0.4rem; }
.chr-hero-metric__value {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800; line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: var(--gradient-brand, linear-gradient(135deg, #d2bbff, #7c3aed));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.chr-hero-metric__label {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--chr-text-muted);
}
.chr-hero-metric__narrative { font-size: 0.9375rem; color: var(--chr-text-secondary); max-width: 40ch; }

/* Neural generation — "show the AI at work" instead of a flat spinner */
.chr-neural { display: flex; flex-direction: column; gap: 0.875rem; }
.chr-neural__track { height: 6px; border-radius: 999px; background: rgba(124, 58, 237, 0.12); overflow: hidden; }
.chr-neural__fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #7c3aed, #d2bbff, #7c3aed);
  background-size: 200% 100%; animation: chr-neural-stream 1.1s linear infinite;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes chr-neural-stream { to { background-position: 200% 0; } }
.chr-neural__stage { display: flex; align-items: center; gap: 0.625rem; font-size: 0.8125rem; color: var(--chr-text-muted); transition: color 0.3s; }
.chr-neural__stage::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: currentColor; flex-shrink: 0; transition: all 0.3s;
}
.chr-neural__stage.is-done { color: #34d399; }
.chr-neural__stage.is-active { color: #d2bbff; }
.chr-neural__stage.is-active::before {
  background: #7c3aed; box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18);
  animation: chr-pulse 1.4s infinite;
}

/* Theater mode — full-bleed cinematic preview overlay */
body.theater-open { overflow: hidden; }
body.theater-open::before {
  content: ""; position: fixed; inset: 0; z-index: 80;
  background: rgba(8, 12, 28, 0.72); backdrop-filter: blur(16px);
  animation: chr-fade-in 0.3s ease;
}
.is-theater {
  position: fixed !important; inset: 3vh 4vw; z-index: 90;
  margin: 0 !important; max-width: none !important; width: auto !important; height: auto !important;
  border-radius: 1rem; overflow: hidden;
  box-shadow: 0 24px 56px -12px rgba(124, 58, 237, 0.32);
}


/* ── 2f. Command palette (⌘K) ───────────────────────────────────────────── */
.cmdp-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 1rem 1rem;
  background: rgba(8, 12, 28, 0.72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  animation: chr-fade-in 0.18s ease;
}
.cmdp-panel {
  width: 100%; max-width: 36rem;
  background: var(--surface-high, #222a3d);
  border: 1px solid var(--ghost-border, rgba(124, 110, 168, 0.15));
  border-radius: 1rem;
  box-shadow: 0 24px 56px -12px rgba(124, 58, 237, 0.32);
  overflow: hidden;
}
.cmdp-search {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0 1rem; border-bottom: 1px solid var(--ghost-border, rgba(124, 110, 168, 0.15));
}
.cmdp-input {
  flex: 1; background: transparent; border: 0; outline: none;
  padding: 1rem 0; font-size: 0.9375rem; color: #dae2fd;
}
.cmdp-input::placeholder { color: #7c87ad; }
.cmdp-results { max-height: 52vh; overflow-y: auto; padding: 0.5rem 0; }
.cmdp-group-label {
  padding: 0.75rem 1rem 0.25rem; font-size: 0.625rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: #7c87ad;
}
.cmdp-item {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0 0.5rem; padding: 0.625rem 0.75rem;
  border-radius: 0.75rem; font-size: 0.875rem; color: #aab3d4;
  cursor: pointer; text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.cmdp-item:hover { background: rgba(124, 58, 237, 0.12); color: #e8edfb; }
.cmdp-item.is-active { background: rgba(124, 58, 237, 0.18); color: #f1ecff; }
.cmdp-item__icon { width: 1.1rem; height: 1.1rem; color: #8b7fd6; flex-shrink: 0; }
.cmdp-item__enter { margin-left: auto; opacity: 0; font-size: 0.8rem; color: #8b96bd; }
.cmdp-item.is-active .cmdp-item__enter { opacity: 1; }
.cmdp-empty { padding: 2.5rem 1rem; text-align: center; font-size: 0.875rem; color: #7c87ad; }
.cmdp-footer {
  display: flex; gap: 1rem; padding: 0.625rem 1rem;
  border-top: 1px solid var(--ghost-border, rgba(124, 110, 168, 0.15));
  font-size: 0.625rem; color: #7c87ad;
}
.cmdp-kbd {
  display: inline-flex; align-items: center; padding: 0.1rem 0.35rem;
  border-radius: 0.3rem; background: var(--surface-highest, #2b3450);
  border: 1px solid var(--ghost-border, rgba(124, 110, 168, 0.15));
  font-size: 0.625rem; color: #aab3d4;
}


/* ── 2b. Predictive Oracle dark theme ──────────────────────────────────────
   Remaps the shared component tokens (.chr-card / .chr-btn / .chr-input / …)
   onto the tonal surface hierarchy so "cards" become layers (not white boxes)
   and 1px borders become ghost borders. Phase 1 applies `theme-oracle`
   (with `dark`) on the authenticated <html> to flip the app dark in one move.
   Additive: nothing wears this class yet, so Phase 0 changes nothing. ── */
.theme-oracle {
  --chr-bg:               #0b1326;
  --chr-bg-white:         #131b2e;
  --chr-bg-muted:         #1a2236;
  --chr-border:           rgba(124, 110, 168, 0.15);
  --chr-border-strong:    rgba(124, 110, 168, 0.28);
  --chr-text:             #dae2fd;
  --chr-text-secondary:   #aab3d4;
  --chr-text-muted:       #7c87ad;
  --chr-text-placeholder: #5a648a;
  --chr-primary-light:    rgba(124, 58, 237, 0.16);
  --chr-shadow-xs:        0 1px 2px rgba(8, 12, 28, 0.40);
  --chr-shadow-sm:        0 2px 8px -2px rgba(124, 58, 237, 0.12);
  --chr-shadow-md:        0 8px 24px -6px rgba(124, 58, 237, 0.18);
  --chr-shadow-lg:        0 16px 40px -10px rgba(124, 58, 237, 0.26);
  --chr-shadow-xl:        0 24px 56px -12px rgba(124, 58, 237, 0.32);
}


/* ── 2c. Dark Bridge ────────────────────────────────────────────────────────
   Retints the generic slate dark palette to the Oracle deep-blue hierarchy and
   carries the ~237 screens that have no explicit dark: variants, so the whole
   app reads as one cohesive Oracle surface. Scoped to .theme-oracle; removing
   the class (light-mode toggle) reverts everything to default slate.
   Backgrounds/borders ride the slate-scale vars (utilities are var-referenced
   in v4); text + white surfaces use targeted 2-class overrides so the dual-use
   slate scale (dark-bg vs dark-text) stays correct. ── */
.theme-oracle {
  --color-slate-950: #080f1f;
  --color-slate-900: #0b1326;
  --color-slate-800: #131b2e;
  --color-slate-700: #1a2236;
  --color-slate-600: #222a3d;
}
.theme-oracle .bg-white,
.theme-oracle .bg-slate-50,
.theme-oracle .bg-gray-50      { background-color: var(--surface-low); }
.theme-oracle .bg-slate-100,
.theme-oracle .bg-gray-100     { background-color: var(--surface-mid); }
.theme-oracle .text-slate-900,
.theme-oracle .text-gray-900,
.theme-oracle .text-slate-800,
.theme-oracle .text-gray-800   { color: #dae2fd; }
.theme-oracle .text-slate-700,
.theme-oracle .text-gray-700,
.theme-oracle .text-slate-600,
.theme-oracle .text-gray-600   { color: #aab3d4; }
.theme-oracle .text-slate-500,
.theme-oracle .text-slate-400,
.theme-oracle .text-gray-500,
.theme-oracle .text-gray-400   { color: #8b96bd; }
.theme-oracle .border-slate-200,
.theme-oracle .border-slate-100,
.theme-oracle .border-slate-300,
.theme-oracle .border-gray-200,
.theme-oracle .border-gray-100 { border-color: var(--ghost-border); }


/* ── 2d. Signature surfaces (glass + cursor glow) ───────────────────────────
   Opt-in classes for "floating" elements per DESIGN.md (20px blur glass) and a
   cursor-tracking brand glow rendered behind frosted glass — pair .chr-glow
   with data-controller="mouse-glow". Both are additive: nothing adopts them
   until a template asks for them. ── */
.chr-glass {
  background: color-mix(in oklab, var(--surface-bright) 55%, transparent);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid var(--ghost-border);
  box-shadow: var(--shadow-chrishi);
}
.chr-glow { position: relative; isolation: isolate; }
.chr-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--glow-x, 50%) var(--glow-y, -20%),
              rgba(124, 58, 237, 0.18), transparent 60%);
  opacity: var(--glow-opacity, 0);
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: -1;
}
@media (prefers-reduced-motion: reduce) {
  .chr-glow::before { transition: none; }
}


/* ── 2e. Signature "wow" surfaces (Phase 3) ─────────────────────────────────
   View Transitions for cinematic nav, big-number storytelling, the "neural"
   generation state, and theater-mode previews. All opt-in except the page
   transition, which is app-wide. ── */

/* Cinematic page navigation (Turbo 8 view transitions + native MPA fallback) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: chr-vt-out 0.22s ease both; }
::view-transition-new(root) { animation: chr-vt-in 0.30s ease both; }
@keyframes chr-vt-out { to   { opacity: 0; transform: translateY(-6px); } }
@keyframes chr-vt-in  { from { opacity: 0; transform: translateY(10px); } }

/* Big-number storytelling — pair a display metric with a label + narrative */
.chr-hero-metric { display: flex; flex-direction: column; gap: 0.4rem; }
.chr-hero-metric__value {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800; line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: var(--gradient-brand, linear-gradient(135deg, #d2bbff, #7c3aed));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.chr-hero-metric__label {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--chr-text-muted);
}
.chr-hero-metric__narrative { font-size: 0.9375rem; color: var(--chr-text-secondary); max-width: 40ch; }

/* Neural generation — "show the AI at work" instead of a flat spinner */
.chr-neural { display: flex; flex-direction: column; gap: 0.875rem; }
.chr-neural__track { height: 6px; border-radius: 999px; background: rgba(124, 58, 237, 0.12); overflow: hidden; }
.chr-neural__fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #7c3aed, #d2bbff, #7c3aed);
  background-size: 200% 100%; animation: chr-neural-stream 1.1s linear infinite;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes chr-neural-stream { to { background-position: 200% 0; } }
.chr-neural__stage { display: flex; align-items: center; gap: 0.625rem; font-size: 0.8125rem; color: var(--chr-text-muted); transition: color 0.3s; }
.chr-neural__stage::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: currentColor; flex-shrink: 0; transition: all 0.3s;
}
.chr-neural__stage.is-done { color: #34d399; }
.chr-neural__stage.is-active { color: #d2bbff; }
.chr-neural__stage.is-active::before {
  background: #7c3aed; box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18);
  animation: chr-pulse 1.4s infinite;
}

/* Theater mode — full-bleed cinematic preview overlay */
body.theater-open { overflow: hidden; }
body.theater-open::before {
  content: ""; position: fixed; inset: 0; z-index: 80;
  background: rgba(8, 12, 28, 0.72); backdrop-filter: blur(16px);
  animation: chr-fade-in 0.3s ease;
}
.is-theater {
  position: fixed !important; inset: 3vh 4vw; z-index: 90;
  margin: 0 !important; max-width: none !important; width: auto !important; height: auto !important;
  border-radius: 1rem; overflow: hidden;
  box-shadow: 0 24px 56px -12px rgba(124, 58, 237, 0.32);
}


/* ── 2f. Command palette (⌘K) ───────────────────────────────────────────── */
.cmdp-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 1rem 1rem;
  background: rgba(8, 12, 28, 0.72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  animation: chr-fade-in 0.18s ease;
}
.cmdp-panel {
  width: 100%; max-width: 36rem;
  background: var(--surface-high, #222a3d);
  border: 1px solid var(--ghost-border, rgba(124, 110, 168, 0.15));
  border-radius: 1rem;
  box-shadow: 0 24px 56px -12px rgba(124, 58, 237, 0.32);
  overflow: hidden;
}
.cmdp-search {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0 1rem; border-bottom: 1px solid var(--ghost-border, rgba(124, 110, 168, 0.15));
}
.cmdp-input {
  flex: 1; background: transparent; border: 0; outline: none;
  padding: 1rem 0; font-size: 0.9375rem; color: #dae2fd;
}
.cmdp-input::placeholder { color: #7c87ad; }
.cmdp-results { max-height: 52vh; overflow-y: auto; padding: 0.5rem 0; }
.cmdp-group-label {
  padding: 0.75rem 1rem 0.25rem; font-size: 0.625rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: #7c87ad;
}
.cmdp-item {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0 0.5rem; padding: 0.625rem 0.75rem;
  border-radius: 0.75rem; font-size: 0.875rem; color: #aab3d4;
  cursor: pointer; text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.cmdp-item:hover { background: rgba(124, 58, 237, 0.12); color: #e8edfb; }
.cmdp-item.is-active { background: rgba(124, 58, 237, 0.18); color: #f1ecff; }
.cmdp-item__icon { width: 1.1rem; height: 1.1rem; color: #8b7fd6; flex-shrink: 0; }
.cmdp-item__enter { margin-left: auto; opacity: 0; font-size: 0.8rem; color: #8b96bd; }
.cmdp-item.is-active .cmdp-item__enter { opacity: 1; }
.cmdp-empty { padding: 2.5rem 1rem; text-align: center; font-size: 0.875rem; color: #7c87ad; }
.cmdp-footer {
  display: flex; gap: 1rem; padding: 0.625rem 1rem;
  border-top: 1px solid var(--ghost-border, rgba(124, 110, 168, 0.15));
  font-size: 0.625rem; color: #7c87ad;
}
.cmdp-kbd {
  display: inline-flex; align-items: center; padding: 0.1rem 0.35rem;
  border-radius: 0.3rem; background: var(--surface-highest, #2b3450);
  border: 1px solid var(--ghost-border, rgba(124, 110, 168, 0.15));
  font-size: 0.625rem; color: #aab3d4;
}
.cmdp-overlay.hidden,
.cmdp-item.hidden,
.cmdp-empty.hidden,
[data-cmdp-group].hidden { display: none; }


/* ============================================================================
   3. Component Classes
   ============================================================================ */

/* ── .chr-card — Standard content panel ────────────────────────────────────── */
.chr-card {
  background: var(--chr-bg-white);
  border: 1px solid var(--chr-border);
  border-radius: var(--chr-radius-xl);
  padding: var(--chr-space-6);
  box-shadow: var(--chr-shadow-sm);
  transition: box-shadow var(--chr-transition-base);
}

.chr-card:hover {
  box-shadow: var(--chr-shadow-md);
}

.chr-card-flat {
  background: var(--chr-bg-white);
  border: 1px solid var(--chr-border);
  border-radius: var(--chr-radius-xl);
  padding: var(--chr-space-6);
}

.chr-card-header {
  padding-bottom: var(--chr-space-4);
  margin-bottom: var(--chr-space-4);
  border-bottom: 1px solid var(--chr-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chr-card-title {
  font-size: var(--chr-text-base);
  font-weight: 600;
  color: var(--chr-text);
  letter-spacing: -0.01em;
}

.chr-card-subtitle {
  font-size: var(--chr-text-sm);
  color: var(--chr-text-muted);
  margin-top: 0.125rem;
}

/* Interactive variant — for clickable action cards */
.chr-card-interactive {
  background: var(--chr-bg-white);
  border: 1px solid var(--chr-border);
  border-radius: var(--chr-radius-xl);
  padding: var(--chr-space-6);
  box-shadow: var(--chr-shadow-sm);
  transition: all var(--chr-transition-base);
  cursor: pointer;
}

.chr-card-interactive:hover {
  box-shadow: var(--chr-shadow-lg);
  border-color: var(--chr-primary-muted);
  transform: translateY(-1px);
}


/* ── .chr-btn — Button system ──────────────────────────────────────────────── */

/* Base button reset */
.chr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--chr-font-family);
  font-size: var(--chr-text-sm);
  font-weight: 600;
  line-height: 1;
  padding: 0.625rem 1.25rem;
  border-radius: var(--chr-radius-lg);
  border: none;
  cursor: pointer;
  transition: all var(--chr-transition-fast);
  white-space: nowrap;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
}

.chr-btn:focus-visible {
  outline: 2px solid var(--chr-primary);
  outline-offset: 2px;
}

.chr-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — gradient CTA */
.chr-btn-primary {
  background: var(--chr-gradient-cta);
  color: #ffffff;
  box-shadow: 0 1px 3px 0 rgba(124, 58, 237, 0.3), 0 1px 2px -1px rgba(124, 58, 237, 0.2);
}

.chr-btn-primary:hover {
  box-shadow: 0 4px 12px 0 rgba(124, 58, 237, 0.4), 0 2px 4px -1px rgba(124, 58, 237, 0.25);
  transform: translateY(-1px);
}

.chr-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px 0 rgba(124, 58, 237, 0.3);
}

/* Ghost — transparent with border */
.chr-btn-ghost {
  background: transparent;
  color: var(--chr-text-secondary);
  border: 1px solid var(--chr-border);
}

.chr-btn-ghost:hover {
  background: var(--chr-bg-muted);
  border-color: var(--chr-border-strong);
  color: var(--chr-text);
}

/* Secondary — solid muted */
.chr-btn-secondary {
  background: var(--chr-bg-muted);
  color: var(--chr-text);
  border: 1px solid var(--chr-border);
}

.chr-btn-secondary:hover {
  background: var(--chr-border);
}

/* Danger */
.chr-btn-danger {
  background: var(--chr-danger);
  color: #ffffff;
}

.chr-btn-danger:hover {
  background: var(--chr-danger-hover);
  box-shadow: 0 4px 12px 0 rgba(244, 63, 94, 0.3);
}

/* Success */
.chr-btn-success {
  background: var(--chr-success);
  color: #ffffff;
}

.chr-btn-success:hover {
  background: var(--chr-success-hover);
  box-shadow: 0 4px 12px 0 rgba(16, 185, 129, 0.3);
}

/* Button sizes */
.chr-btn-xs {
  font-size: 0.6875rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--chr-radius-sm);
}

.chr-btn-sm {
  font-size: 0.8125rem;
  padding: 0.5rem 1rem;
}

.chr-btn-lg {
  font-size: 1rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--chr-radius-xl);
}

/* Icon-only button */
.chr-btn-icon {
  padding: 0.5rem;
  border-radius: var(--chr-radius-md);
  background: transparent;
  color: var(--chr-text-muted);
  border: none;
  cursor: pointer;
  transition: all var(--chr-transition-fast);
}

.chr-btn-icon:hover {
  background: var(--chr-bg-muted);
  color: var(--chr-text);
}


/* ── .chr-input — Form field system ────────────────────────────────────────── */

.chr-input {
  width: 100%;
  font-family: var(--chr-font-family);
  font-size: var(--chr-text-sm);
  font-weight: 400;
  color: var(--chr-text);
  background: var(--chr-bg-white);
  border: 1px solid var(--chr-border);
  border-radius: var(--chr-radius-lg);
  padding: 0.625rem 0.875rem;
  transition: border-color var(--chr-transition-fast), box-shadow var(--chr-transition-fast);
  outline: none;
}

.chr-input::placeholder {
  color: var(--chr-text-placeholder);
}

.chr-input:hover {
  border-color: var(--chr-border-strong);
}

.chr-input:focus {
  border-color: var(--chr-primary);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.10);
}

.chr-input:disabled {
  background: var(--chr-bg-muted);
  color: var(--chr-text-muted);
  cursor: not-allowed;
}

/* Textarea variant */
textarea.chr-input {
  min-height: 5rem;
  resize: vertical;
  line-height: 1.5;
}

/* Select variant */
select.chr-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem;
  padding-right: 2.5rem;
}

/* Input error state */
.chr-input-error {
  border-color: var(--chr-danger);
}

.chr-input-error:focus {
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.10);
}

/* Label */
.chr-label {
  display: block;
  font-size: var(--chr-text-sm);
  font-weight: 500;
  color: var(--chr-text);
  margin-bottom: 0.375rem;
}

/* Hint text */
.chr-hint {
  font-size: var(--chr-text-xs);
  color: var(--chr-text-muted);
  margin-top: 0.25rem;
}

/* Error text */
.chr-error {
  font-size: var(--chr-text-xs);
  color: var(--chr-danger);
  margin-top: 0.25rem;
}

/* Form group */
.chr-form-group {
  margin-bottom: var(--chr-space-5);
}


/* ── .chr-badge — Status indicators ────────────────────────────────────────── */

.chr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--chr-font-family);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.625rem;
  border-radius: var(--chr-radius-sm);
  white-space: nowrap;
  line-height: 1.3;
}

.chr-badge-primary {
  background: var(--chr-primary-light);
  color: var(--chr-primary);
}

.chr-badge-success {
  background: var(--chr-success-light);
  color: var(--chr-success);
}

.chr-badge-danger {
  background: var(--chr-danger-light);
  color: var(--chr-danger);
}

.chr-badge-warning {
  background: var(--chr-warning-light);
  color: var(--chr-warning);
}

.chr-badge-info {
  background: var(--chr-info-light);
  color: var(--chr-info);
}

.chr-badge-neutral {
  background: var(--chr-bg-muted);
  color: var(--chr-text-secondary);
}

/* Live pulse dot variant */
.chr-badge-live {
  background: var(--chr-success-light);
  color: var(--chr-success);
}

.chr-badge-live::before {
  content: '';
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--chr-success);
  animation: chr-pulse 2s infinite;
}


/* ── .chr-pill — Rounded indicator tags ────────────────────────────────────── */

.chr-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--chr-font-family);
  font-size: var(--chr-text-xs);
  font-weight: 500;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--chr-radius-full);
  white-space: nowrap;
  line-height: 1.3;
}

.chr-pill-primary {
  background: var(--chr-primary-light);
  color: var(--chr-primary);
  border: 1px solid rgba(124, 58, 237, 0.15);
}

.chr-pill-success {
  background: var(--chr-success-light);
  color: var(--chr-success);
  border: 1px solid rgba(16, 185, 129, 0.15);
}

.chr-pill-danger {
  background: var(--chr-danger-light);
  color: var(--chr-danger);
  border: 1px solid rgba(244, 63, 94, 0.15);
}

.chr-pill-warning {
  background: var(--chr-warning-light);
  color: var(--chr-warning);
  border: 1px solid rgba(245, 158, 11, 0.15);
}

.chr-pill-neutral {
  background: var(--chr-bg-muted);
  color: var(--chr-text-secondary);
  border: 1px solid var(--chr-border);
}

/* Score pill — used for Creative Score display */
.chr-pill-score {
  font-weight: 700;
  font-size: 0.6875rem;
  padding: 0.25rem 0.625rem;
  letter-spacing: 0.02em;
}

.chr-pill-score-elite {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.chr-pill-score-strong {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: #2563eb;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.chr-pill-score-average {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.chr-pill-score-weak {
  background: linear-gradient(135deg, #fff1f2, #ffe4e6);
  color: #e11d48;
  border: 1px solid rgba(244, 63, 94, 0.2);
}


/* ============================================================================
   4. Utility Animations
   ============================================================================ */

@keyframes chr-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

@keyframes chr-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes chr-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes chr-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.chr-animate-fade-in {
  animation: chr-fade-in 0.3s ease-out forwards;
}

.chr-animate-scale-in {
  animation: chr-scale-in 0.2s ease-out forwards;
}

.chr-animate-spin {
  animation: chr-spin 1s linear infinite;
}


/* ============================================================================
   5.5. Micro-Interactions — Card hover, staggered entrance, glow effects
   ============================================================================ */

/* Hover lift — subtle vertical translation + shadow increase */
.chr-hover-lift {
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.chr-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--chr-shadow-lg);
}

/* Hover glow — violet glow on hover */
.chr-hover-glow {
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.chr-hover-glow:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.12), var(--chr-shadow-md);
}

/* Staggered entrance — apply .chr-stagger-in to a parent grid/flex container */
.chr-stagger-in > * {
  opacity: 0;
  transform: translateY(8px);
  animation: chr-fade-in 0.3s ease-out forwards;
}
.chr-stagger-in > *:nth-child(1)  { animation-delay: 0ms; }
.chr-stagger-in > *:nth-child(2)  { animation-delay: 50ms; }
.chr-stagger-in > *:nth-child(3)  { animation-delay: 100ms; }
.chr-stagger-in > *:nth-child(4)  { animation-delay: 150ms; }
.chr-stagger-in > *:nth-child(5)  { animation-delay: 200ms; }
.chr-stagger-in > *:nth-child(6)  { animation-delay: 250ms; }
.chr-stagger-in > *:nth-child(7)  { animation-delay: 300ms; }
.chr-stagger-in > *:nth-child(8)  { animation-delay: 350ms; }
.chr-stagger-in > *:nth-child(n+9) { animation-delay: 400ms; }


/* ============================================================================
   5. Layout Utilities
   ============================================================================ */

/* Section spacing */
.chr-section {
  margin-bottom: var(--chr-space-8);
}

.chr-section-title {
  font-size: var(--chr-text-xl);
  font-weight: 700;
  color: var(--chr-text);
  letter-spacing: -0.02em;
  margin-bottom: var(--chr-space-1);
}

.chr-section-subtitle {
  font-size: var(--chr-text-sm);
  color: var(--chr-text-muted);
}

/* Divider */
.chr-divider {
  border: none;
  border-top: 1px solid var(--chr-border);
  margin: var(--chr-space-6) 0;
}

/* Page container */
.chr-page {
  max-width: 1440px;
  margin: 0 auto;
  font-family: var(--chr-font-family);
}

/* Empty state */
.chr-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--chr-space-12) var(--chr-space-6);
}

.chr-empty-state-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--chr-radius-xl);
  background: var(--chr-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--chr-space-4);
}

.chr-empty-state-title {
  font-size: var(--chr-text-base);
  font-weight: 600;
  color: var(--chr-text);
  margin-bottom: var(--chr-space-1);
}

.chr-empty-state-desc {
  font-size: var(--chr-text-sm);
  color: var(--chr-text-muted);
  max-width: 20rem;
  margin-bottom: var(--chr-space-5);
}


/* ============================================================================
   6. Data Table
   ============================================================================ */

.chr-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--chr-text-sm);
}

.chr-table th {
  text-align: left;
  font-weight: 500;
  font-size: var(--chr-text-xs);
  color: var(--chr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--chr-border);
  background: var(--chr-bg-muted);
}

.chr-table th:first-child { border-radius: var(--chr-radius-lg) 0 0 0; }
.chr-table th:last-child  { border-radius: 0 var(--chr-radius-lg) 0 0; }

.chr-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--chr-border);
  color: var(--chr-text);
  vertical-align: middle;
}

.chr-table tbody tr {
  transition: background var(--chr-transition-fast);
}

.chr-table tbody tr:hover {
  background: var(--chr-bg-muted);
}

.chr-table tbody tr:last-child td {
  border-bottom: none;
}


/* ============================================================================
   7. Skeleton Loader
   ============================================================================ */

.chr-skeleton {
  background: linear-gradient(90deg, var(--chr-bg-muted) 25%, var(--chr-border) 50%, var(--chr-bg-muted) 75%);
  background-size: 200% 100%;
  animation: chr-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--chr-radius-md);
}

@keyframes chr-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.chr-skeleton-line {
  height: 0.875rem;
  border-radius: var(--chr-radius-sm);
}

.chr-skeleton-circle {
  border-radius: 50%;
}

.chr-skeleton-card {
  height: 8rem;
  border-radius: var(--chr-radius-xl);
}


/* ============================================================================
   8. Turbo Frame — Loading Overlay
   ============================================================================ */

turbo-frame[busy] {
  position: relative;
  pointer-events: none;
  min-height: 4rem;
}

turbo-frame[busy]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
  border-radius: var(--chr-radius-xl);
  z-index: 10;
  animation: chr-fade-in 0.15s ease-out;
}

turbo-frame[busy]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.75rem 0 0 -0.75rem;
  border: 2px solid var(--chr-border);
  border-top-color: var(--chr-primary);
  border-radius: 50%;
  z-index: 11;
  animation: chr-spin 0.6s linear infinite;
}

/* ============================================================================
   NEW COMPONENTS — Added 2026-04-18
   Score Ring, Page Header, Stat Card, Platform Icons, Bento Grid, Score Hint
   ============================================================================ */

/* ── Score Ring (AdCreative.ai-style circular gauge) ────────────────────────── */
.chr-score-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chr-score-ring__svg {
  transform: rotate(-90deg);
  overflow: visible;
}
.chr-score-ring__track {
  opacity: 0.12;
  stroke: currentColor;
}
.chr-score-ring__fill {
  stroke-linecap: round;
  transition: stroke-dasharray 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.chr-score-ring__value {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: var(--chr-font-family);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Size variants */
.chr-score-ring--sm  { width: 48px;  height: 48px; }
.chr-score-ring--sm  .chr-score-ring__value { font-size: 0.875rem; }
.chr-score-ring--md  { width: 64px;  height: 64px; }
.chr-score-ring--md  .chr-score-ring__value { font-size: 1.125rem; }
.chr-score-ring--lg  { width: 80px;  height: 80px; }
.chr-score-ring--lg  .chr-score-ring__value { font-size: 1.375rem; }
.chr-score-ring--xl  { width: 100px; height: 100px; }
.chr-score-ring--xl  .chr-score-ring__value { font-size: 1.75rem; }

/* Tier colors */
.chr-score-ring--elite   { color: #059669; }
.chr-score-ring--elite   .chr-score-ring__fill { filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.5)); }
.chr-score-ring--strong  { color: #2563eb; }
.chr-score-ring--average { color: #d97706; }
.chr-score-ring--weak    { color: #e11d48; }

/* ── Page Header ─────────────────────────────────────────────────────────────── */
.chr-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.chr-page-header__icon {
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--chr-radius-lg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--chr-primary-light);
  color: var(--chr-primary);
}
.chr-page-header__info {
  display: flex; align-items: flex-start; gap: 0.875rem;
  min-width: 0; flex: 1;
}
.chr-page-header__text { min-width: 0; }
.chr-page-header__title {
  font-size: 1.5rem; font-weight: 700;
  color: var(--chr-text); letter-spacing: -0.025em; line-height: 1.2;
}
.chr-page-header__subtitle {
  font-size: var(--chr-text-sm); color: var(--chr-text-muted);
  margin-top: 0.1875rem; line-height: 1.4;
}
.chr-page-header__actions {
  display: flex; align-items: center; gap: 0.625rem;
  flex-shrink: 0; margin-top: 0.125rem;
}

/* ── Stat Card ────────────────────────────────────────────────────────────────── */
.chr-stat-card {
  background: var(--chr-bg-white);
  border: 1px solid var(--chr-border);
  border-radius: var(--chr-radius-xl);
  padding: 1rem 1.25rem;
  box-shadow: var(--chr-shadow-xs);
  transition: box-shadow var(--chr-transition-base), border-color var(--chr-transition-base), transform var(--chr-transition-base);
}
.chr-stat-card:hover {
  box-shadow: var(--chr-shadow-md);
  border-color: var(--chr-border-strong);
  transform: translateY(-1px);
}
.chr-stat-card__label {
  font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--chr-text-muted); margin-bottom: 0.375rem;
  display: flex; align-items: center; justify-content: space-between;
}
.chr-stat-card__value {
  font-size: 1.75rem; font-weight: 800;
  color: var(--chr-text); letter-spacing: -0.03em;
  line-height: 1; margin-bottom: 0.375rem;
  font-variant-numeric: tabular-nums;
}
.chr-stat-card__meta {
  font-size: 0.6875rem; color: var(--chr-text-muted); font-weight: 500;
}

/* ── Platform Icon ────────────────────────────────────────────────────────────── */
.chr-platform {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--chr-radius-md); flex-shrink: 0; overflow: hidden;
}
.chr-platform--sm  { width: 1.5rem; height: 1.5rem; }
.chr-platform--md  { width: 2rem;   height: 2rem;   }
.chr-platform--lg  { width: 2.5rem; height: 2.5rem; }
.chr-platform--meta,
.chr-platform--facebook  { background: #1877F2; }
.chr-platform--tiktok    { background: #010101; }
.chr-platform--google    { background: #ffffff; border: 1px solid #e2e8f0; }
.chr-platform--youtube   { background: #FF0000; }
.chr-platform--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.chr-platform--snapchat  { background: #FFFC00; }

/* ── Score Hint ("+X pts" improvement tag) ───────────────────────────────────── */
.chr-score-hint {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.6875rem; font-weight: 700;
  padding: 0.1875rem 0.5rem; border-radius: var(--chr-radius-sm);
  background: var(--chr-success-light); color: var(--chr-success);
  border: 1px solid rgba(16, 185, 129, 0.2);
}
.chr-score-hint::before {
  content: '+'; font-weight: 800;
}


/* ============================================================================
   6. Beauty Polish — Mesh backgrounds, shimmer text, premium cards, hero glow
   ============================================================================
   Visual enhancements applied on top of the existing design system to give the
   Command Center dashboard a richer, more cinematic feel without restructuring
   any components. All classes are additive — safe to drop in or remove.
   ============================================================================ */

/* ── Ambient mesh-gradient background for the main content area ───────────── */
.chr-mesh-bg {
  position: relative;
  isolation: isolate;
  background-color: #fafafc;
  background-image:
    radial-gradient(1100px 520px at 12% -4%,  rgba(124, 58, 237, 0.10), transparent 60%),
    radial-gradient(900px  460px at 92% 8%,   rgba(217, 70, 239, 0.08), transparent 60%),
    radial-gradient(720px  420px at 50% 100%, rgba(16, 185, 129, 0.05), transparent 60%);
}
.dark .chr-mesh-bg,
.chr-mesh-bg.dark {
  background-color: #0b1020;
  background-image:
    radial-gradient(1100px 520px at 12% -4%,  rgba(124, 58, 237, 0.24), transparent 60%),
    radial-gradient(900px  460px at 92% 8%,   rgba(217, 70, 239, 0.18), transparent 60%),
    radial-gradient(720px  420px at 50% 100%, rgba(16, 185, 129, 0.10), transparent 60%);
}

/* ── Subtle dotted overlay for texture (pairs with .chr-mesh-bg) ──────────── */
.chr-dots-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 85%);
}

/* ── Shimmer text — animated gradient sweep across a heading word ─────────── */
@keyframes chr-shimmer-sweep {
  0%   { background-position: -200% 50%; }
  100% { background-position:  200% 50%; }
}
.chr-shimmer-text {
  background-image: linear-gradient(
    100deg,
    rgba(255,255,255,0.95) 10%,
    rgba(255,255,255,0.50) 38%,
    #fef3c7 50%,           /* amber-100 */
    rgba(255,255,255,0.50) 62%,
    rgba(255,255,255,0.95) 90%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: chr-shimmer-sweep 6s linear infinite;
}

/* ── Hero glow — cinematic inner light for the welcome banner ─────────────── */
.chr-hero-glow {
  position: relative;
  overflow: hidden;
}
.chr-hero-glow::before,
.chr-hero-glow::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  will-change: transform, opacity;
}
.chr-hero-glow::before {
  top: -120px; right: -60px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(217, 70, 239, 0.55), transparent 70%);
  animation: chr-hero-drift 14s ease-in-out infinite alternate;
}
.chr-hero-glow::after {
  bottom: -140px; left: -80px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.35), transparent 70%);
  animation: chr-hero-drift 18s ease-in-out -3s infinite alternate;
}
@keyframes chr-hero-drift {
  from { transform: translate3d(0, 0, 0)       scale(1);   opacity: 0.85; }
  to   { transform: translate3d(30px, -20px, 0) scale(1.08); opacity: 1;    }
}

/* ── Premium card — softer multi-layered shadow with hairline border ──────── */
.chr-card-premium {
  background: var(--chr-bg-white);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: var(--chr-radius-2xl);
  box-shadow:
    0  1px  0  0    rgba(255, 255, 255, 0.9) inset,
    0  1px  2px 0   rgba(15, 23, 42, 0.04),
    0  8px 24px -12px rgba(124, 58, 237, 0.10),
    0 24px 48px -24px rgba(15, 23, 42, 0.10);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.chr-card-premium:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 58, 237, 0.18);
  box-shadow:
    0  1px  0  0    rgba(255, 255, 255, 1) inset,
    0  2px  4px 0   rgba(15, 23, 42, 0.05),
    0 16px 36px -16px rgba(124, 58, 237, 0.22),
    0 32px 64px -24px rgba(15, 23, 42, 0.14);
}

/* ── Live-pulse ring — decorative pulse around status dots ───────────────── */
@keyframes chr-pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(16, 185, 129, 0.55); }
  80%  { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(16, 185, 129, 0);    }
}
.chr-pulse-ring {
  position: relative;
  border-radius: 9999px;
  animation: chr-pulse-ring 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* ── Gradient rule — 1px divider with brand tint ──────────────────────────── */
.chr-divider-gradient {
  height: 1px;
  border: none;
  background: linear-gradient(
    to right,
    transparent,
    rgba(124, 58, 237, 0.18),
    rgba(217, 70, 239, 0.18),
    transparent
  );
}

/* ── CTA Pill — richer gradient for primary action buttons ────────────────── */
.chr-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.1rem;
  border-radius: 0.9rem;
  font-weight: 700;
  font-size: 0.8125rem;
  color: #ffffff;
  background-image: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 45%, #d946ef 100%);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.35) inset,
    0 6px 14px -6px rgba(124, 58, 237, 0.45),
    0 2px 4px 0 rgba(15, 23, 42, 0.08);
  transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 160ms cubic-bezier(0.4, 0, 0.2, 1),
              filter 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
.chr-cta-pill:hover {
  transform: translateY(-1px);
  filter: saturate(1.08) brightness(1.03);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.45) inset,
    0 10px 22px -8px rgba(124, 58, 237, 0.60),
    0 4px 8px 0 rgba(15, 23, 42, 0.10);
}
.chr-cta-pill:active {
  transform: translateY(0);
  filter: saturate(1) brightness(0.98);
}

/* ── Stat tile — glassmorphic card used inside the hero quick-stats ribbon ─ */
.chr-stat-tile {
  position: relative;
  border-radius: var(--chr-radius-xl);
  padding: 0.95rem 1rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  transition: background 200ms, border-color 200ms, transform 200ms;
}
.chr-stat-tile:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}
.chr-stat-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), transparent 40%);
}

/* ============================================================================
   4. Chrome & Feedback Primitives
   ============================================================================
   The design system covers content (buttons, cards, badges, tables, forms) but
   not chrome or feedback. These fill that gap so shells and modals convert
   without ad-hoc overrides. Specced on the same tokens; named with the chr-
   prefix for consistency with the rest of this file.
   ============================================================================ */


/* ── .chr-toast — Floating, dismissible notification ──────────────────────────
   Toast = floating panel + 3px inset left rule in the semantic colour.
   Pair with .chr-toast--notice | --success | --warning | --error.
   Structure: .chr-toast__icon · .chr-toast__body (title + desc) · .chr-toast__dismiss */

.chr-toast {
  --chr-semantic: var(--studio-accent, var(--chr-primary));
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 24rem;
  padding: 0.875rem 0.875rem 0.875rem 1rem;
  background: var(--studio-panel, var(--chr-bg-white));
  border-radius: var(--chr-radius-xl);
  color: var(--studio-text, var(--chr-text));
  box-shadow:
    inset 3px 0 0 0 var(--chr-semantic),
    var(--shadow-chrishi, 0 8px 32px -4px rgba(124, 58, 237, 0.22));
  font-family: var(--chr-font-family);
}

.chr-toast__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--chr-radius-lg);
  background: color-mix(in srgb, var(--chr-semantic) 12%, transparent);
  color: var(--chr-semantic);
}

.chr-toast__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.chr-toast__body {
  flex: 1;
  min-width: 0;
  padding-top: 0.125rem;
}

.chr-toast__title {
  font-size: var(--chr-text-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--studio-text-strong, var(--chr-text));
}

.chr-toast__desc {
  margin-top: 0.125rem;
  font-size: var(--chr-text-xs);
  font-weight: 400;
  line-height: 1.45;
  color: var(--studio-text-3, var(--chr-text-secondary));
}

.chr-toast__dismiss {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.125rem -0.125rem 0 0;
  padding: 0;
  border: none;
  border-radius: var(--chr-radius-md);
  background: transparent;
  color: var(--studio-muted, var(--chr-text-muted));
  cursor: pointer;
  transition: color var(--chr-transition-fast), background var(--chr-transition-fast);
}

.chr-toast__dismiss:hover {
  color: var(--studio-text, var(--chr-text));
  background: var(--studio-control, var(--chr-bg-muted));
}

.chr-toast__dismiss svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Semantic variants — light defaults; studio tokens flip under .dark on <html> */
.chr-toast--notice  { --chr-semantic: var(--studio-accent, var(--chr-primary)); }
.chr-toast--success { --chr-semantic: var(--studio-success, #059669); }
.chr-toast--warning { --chr-semantic: var(--studio-warn, #b45309); }
.chr-toast--error   { --chr-semantic: var(--chr-danger); }

/* Explicit dark fallbacks when studio tokens are absent */
.dark .chr-toast {
  background: var(--studio-panel, var(--surface-low, #131b2e));
  color: var(--studio-text, #e8eaf2);
  box-shadow:
    inset 3px 0 0 0 var(--chr-semantic),
    var(--shadow-chrishi, 0 8px 32px -4px rgba(124, 58, 237, 0.22));
}

.dark .chr-toast--notice  { --chr-semantic: var(--studio-accent, #a78bfa); }
.dark .chr-toast--success { --chr-semantic: var(--studio-success, #6ee7b7); }
.dark .chr-toast--warning { --chr-semantic: var(--studio-warn, #fcd34d); }
.dark .chr-toast--error   { --chr-semantic: var(--chr-danger); }


/* ── .chr-alert — Inline banner (not floating) ────────────────────────────────
   Alert = full width of container + 10% tint of the semantic colour, no shadow.
   Structure: .chr-alert__icon · .chr-alert__message · .chr-alert__action · .chr-alert__dismiss */

.chr-alert {
  --chr-semantic: var(--studio-accent, var(--chr-primary));
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--chr-radius-lg);
  background: color-mix(in srgb, var(--chr-semantic) 10%, transparent);
  color: var(--studio-text, var(--chr-text));
  font-family: var(--chr-font-family);
  font-size: var(--chr-text-sm);
  line-height: 1.45;
  box-shadow: none;
}

.chr-alert__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--chr-semantic);
}

.chr-alert__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.chr-alert__message {
  flex: 1;
  min-width: 0;
  color: var(--studio-text, var(--chr-text));
}

.chr-alert__action {
  flex-shrink: 0;
  font-size: var(--chr-text-sm);
  font-weight: 600;
  color: var(--chr-semantic);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--chr-transition-fast);
}

.chr-alert__action:hover {
  opacity: 0.85;
  text-decoration: underline;
}

.chr-alert__dismiss {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 -0.25rem 0 0;
  padding: 0;
  border: none;
  border-radius: var(--chr-radius-md);
  background: transparent;
  color: var(--studio-muted, var(--chr-text-muted));
  cursor: pointer;
  transition: color var(--chr-transition-fast), background var(--chr-transition-fast);
}

.chr-alert__dismiss:hover {
  color: var(--studio-text, var(--chr-text));
  background: color-mix(in srgb, var(--chr-semantic) 12%, transparent);
}

.chr-alert__dismiss svg {
  width: 0.875rem;
  height: 0.875rem;
}

.chr-alert--notice  { --chr-semantic: var(--studio-accent, var(--chr-primary)); }
.chr-alert--success { --chr-semantic: var(--studio-success, #059669); }
.chr-alert--warning { --chr-semantic: var(--studio-warn, #b45309); }
.chr-alert--error   { --chr-semantic: var(--chr-danger); }

.dark .chr-alert {
  color: var(--studio-text, #e8eaf2);
}

.dark .chr-alert--notice  { --chr-semantic: var(--studio-accent, #a78bfa); }
.dark .chr-alert--success { --chr-semantic: var(--studio-success, #6ee7b7); }
.dark .chr-alert--warning { --chr-semantic: var(--studio-warn, #fcd34d); }
.dark .chr-alert--error   { --chr-semantic: var(--chr-danger); }


/* ── .chr-dropzone — File drop target ─────────────────────────────────────────
   States: .chr-dropzone--idle (default) · --active · --busy.
   Structure (idle/active): icon tile · primary line · constraints · browse link.
   Structure (busy): progress bar · filename/size · Cancel — swap via --busy. */

.chr-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 10rem;
  padding: 1.5rem 1.25rem;
  border-radius: var(--chr-radius-xl);
  border: 1.5px dashed var(--studio-track, var(--chr-border-strong));
  background: var(--studio-tile, var(--chr-bg-muted));
  text-align: center;
  font-family: var(--chr-font-family);
  transition:
    border-color var(--chr-transition-base),
    background var(--chr-transition-base),
    color var(--chr-transition-base);
}

.chr-dropzone__icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--chr-radius-lg);
  background: var(--studio-control, var(--chr-bg-white));
  color: var(--studio-muted, var(--chr-text-muted));
  transition: background var(--chr-transition-base), color var(--chr-transition-base);
}

.chr-dropzone__icon-tile svg {
  width: 1.25rem;
  height: 1.25rem;
}

.chr-dropzone__title {
  font-size: var(--chr-text-sm);
  font-weight: 600;
  color: var(--studio-text-strong, var(--chr-text));
  line-height: 1.35;
}

.chr-dropzone__hint {
  font-size: var(--chr-text-xs);
  font-weight: 400;
  color: var(--studio-muted-2, var(--chr-text-muted));
  line-height: 1.4;
}

.chr-dropzone__browse {
  font-size: var(--chr-text-sm);
  font-weight: 600;
  color: var(--studio-accent, var(--chr-primary));
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

.chr-dropzone__browse:hover {
  text-decoration: underline;
}

/* Idle content visible by default; busy block hidden until --busy */
.chr-dropzone__idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

.chr-dropzone__busy {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
  max-width: 20rem;
}

.chr-dropzone__progress {
  height: 6px;
  border-radius: 999px;
  background: var(--studio-track, var(--chr-bg-muted));
  overflow: hidden;
}

.chr-dropzone__progress-bar {
  height: 100%;
  width: var(--chr-dropzone-progress, 40%);
  border-radius: inherit;
  background: var(--chr-gradient-primary);
  transition: width var(--chr-transition-base);
}

.chr-dropzone__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: var(--chr-text-xs);
  color: var(--studio-muted-2, var(--chr-text-secondary));
}

.chr-dropzone__filename {
  font-weight: 500;
  color: var(--studio-text, var(--chr-text));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.chr-dropzone__cancel {
  flex-shrink: 0;
  font-size: var(--chr-text-xs);
  font-weight: 600;
  color: var(--studio-accent, var(--chr-primary));
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.chr-dropzone__cancel:hover {
  text-decoration: underline;
}

/* States */
.chr-dropzone--idle {
  /* default appearance above */
}

.chr-dropzone--active {
  border-color: var(--studio-accent, var(--chr-primary));
  background: color-mix(in srgb, var(--studio-accent, var(--chr-primary)) 8%, transparent);
  color: var(--studio-accent, var(--chr-primary));
}

.chr-dropzone--active .chr-dropzone__icon-tile {
  background: color-mix(in srgb, var(--studio-accent, var(--chr-primary)) 14%, transparent);
  color: var(--studio-accent, var(--chr-primary));
}

.chr-dropzone--active .chr-dropzone__title,
.chr-dropzone--active .chr-dropzone__hint {
  color: var(--studio-accent-soft, var(--chr-primary-hover));
}

.chr-dropzone--busy {
  border-style: solid;
  border-color: var(--studio-track, var(--chr-border));
  background: var(--studio-tile, var(--chr-bg-muted));
  min-height: 6.5rem;
}

.chr-dropzone--busy .chr-dropzone__idle {
  display: none;
}

.chr-dropzone--busy .chr-dropzone__busy {
  display: flex;
}

.dark .chr-dropzone {
  border-color: var(--studio-track, var(--surface-highest, #2b3450));
  background: var(--studio-tile, var(--surface-mid, #1a2236));
}

.dark .chr-dropzone--active {
  border-color: var(--studio-accent, #a78bfa);
  background: color-mix(in srgb, var(--studio-accent, #a78bfa) 10%, transparent);
}

.dark .chr-dropzone--busy {
  border-color: var(--studio-track, var(--surface-highest, #2b3450));
  background: var(--studio-tile, var(--surface-mid, #1a2236));
}


/* ── .chr-card-flush — Media bleeds to the edge; only the body pads ───────────
   Counterpart to .chr-card (which always pads). Use when the top of the card
   is an image/video that must sit edge-to-edge without an !p-0 override. */

.chr-card-flush {
  background: var(--studio-surface, var(--chr-bg-white));
  border-radius: var(--chr-radius-xl);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-chrishi-sm, var(--chr-shadow-sm));
  /* No 1px border — tonal delta only (panel sits above the page ground). */
}

.chr-card-flush__media {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
  overflow: hidden;
}

.chr-card-flush__media img,
.chr-card-flush__media video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.chr-card-flush__body {
  padding: var(--chr-space-6);
}

.dark .chr-card-flush {
  background: var(--studio-surface, var(--surface-low, #131b2e));
  box-shadow: var(--shadow-chrishi-sm, 0 4px 16px -2px rgba(124, 58, 237, 0.18));
}


/* ── App shell chrome — .chr-app-shell / sidebar / topbar / main ─────────────
   Layout primitives for the authenticated workspace. Sidebar = tonal surface
   (no border). Top bar encodes the flex rule so the workspace pill never
   overlaps search. Main is the single scroll surface — never nest independent
   scroll boxes per column. Editor shell uses minmax(440px, 1fr) floors. */

.chr-app-shell {
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--studio-bg, var(--chr-bg));
  color: var(--studio-text, var(--chr-text));
  font-family: var(--chr-font-family);
}

/* Sidebar — 260px, --surface, no border */
.chr-app-sidebar {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 260px;
  height: 100%;
  overflow: hidden;
  background: var(--studio-surface, var(--chr-bg-white));
  /* Sectioning is the tonal delta vs shell ground — no 1px border. */
}

.chr-app-sidebar__group-header {
  padding: 1rem 0.625rem 0.375rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--studio-muted-3, var(--chr-text-muted));
}

.chr-app-sidebar__group-header:first-child {
  padding-top: 0.625rem;
}

.chr-app-sidebar__item {
  display: flex;
  align-items: center;
  gap: 0.6875rem; /* 11px */
  padding: 9px 10px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--studio-muted, var(--chr-text-secondary));
  text-decoration: none;
  transition: background var(--chr-transition-fast), color var(--chr-transition-fast);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
}

.chr-app-sidebar__item:hover {
  background: var(--studio-control, var(--chr-bg-muted));
  color: var(--studio-text, var(--chr-text));
}

.chr-app-sidebar__item--active,
.chr-app-sidebar__item.is-active {
  /* Accent gradient wash — not a flat fill */
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.24), rgba(124, 58, 237, 0.07));
  color: var(--studio-text, var(--chr-text));
}

.chr-app-sidebar__item-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* Top bar — 56px, --panel; left group never shrinks; search is the only shrinkable child */
.chr-app-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  height: 56px;
  width: 100%;
  padding: 0 1rem;
  background: var(--studio-panel, var(--chr-bg-white));
  /* No 1px bottom border — tonal delta vs main. */
}

.chr-app-topbar__left {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0; /* Getting this wrong makes the workspace pill overlap search. */
  min-width: 0;
}

.chr-app-topbar__center,
.chr-app-topbar__right {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.chr-app-topbar__right {
  margin-left: auto;
  flex-shrink: 0;
}

/* Search is the ONLY shrinkable child in the top bar */
.chr-app-topbar__search {
  flex: 0 1 280px;
  min-width: 0;
  width: 280px;
  max-width: 280px;
}

/* Main region — ONE scroll surface; floor on the inner grid, not per-column scrollers */
.chr-app-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto; /* single scroll surface for the workspace */
  background: var(--studio-bg, var(--chr-bg));
}

.chr-app-main__inner {
  flex: 1 0 auto;
  min-width: 0;
  min-height: min(100%, 600px);
  /* Do not add overflow:auto here or on columns — the shell scrolls as one. */
}

/* Editor shell — 48px toolbar + rails + --stage canvas */
.chr-app-editor {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.chr-app-editor__toolbar {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 48px;
  padding: 0 0.75rem;
  background: var(--studio-panel, var(--chr-bg-white));
}

.chr-app-editor__grid {
  display: grid;
  /* Explicit floor on the canvas column — never minmax(0, 1fr) */
  grid-template-columns: 52px 236px minmax(440px, 1fr) 300px;
  flex: 1 0 auto;
  min-width: 1180px;
  min-height: 600px;
  /* Columns do not scroll independently; .chr-app-main is the scroll surface. */
}

.chr-app-editor__rail {
  background: var(--studio-sunken, var(--chr-bg-muted));
  min-width: 0;
}

.chr-app-editor__stage {
  background: var(--studio-stage, var(--chr-bg-muted));
  min-width: 440px;
  min-height: 0;
}

.dark .chr-app-shell {
  background: var(--studio-bg, var(--surface-base, #0b1326));
  color: var(--studio-text, #e8eaf2);
}

.dark .chr-app-sidebar {
  background: var(--studio-surface, var(--surface-low, #131b2e));
}

.dark .chr-app-topbar,
.dark .chr-app-editor__toolbar {
  background: var(--studio-panel, #101827);
}

.dark .chr-app-main {
  background: var(--studio-bg, var(--surface-base, #0b1326));
}

.dark .chr-app-editor__rail {
  background: var(--studio-sunken, #0f1626);
}

.dark .chr-app-editor__stage {
  background: var(--studio-stage, #080e1c);
}

.dark .chr-app-sidebar__item--active,
.dark .chr-app-sidebar__item.is-active {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.28), rgba(167, 139, 250, 0.08));
}