/* ========================================================
   Kodara Whitelabel — Personal Trainer AI Mockup
   Design System: see DESIGN_SYSTEM.md
   ======================================================== */

/* --- CSS Custom Properties (from design system) --- */
:root {
  /* Base */
  --white: #ffffff;
  --black: #1a1a1a;

  /* Alpha Light (rgba 26,26,26) */
  --alpha-light-25: rgba(26, 26, 26, 0.04);
  --alpha-light-50: rgba(26, 26, 26, 0.06);
  --alpha-light-100: rgba(26, 26, 26, 0.09);
  --alpha-light-200: rgba(26, 26, 26, 0.20);
  --alpha-light-300: rgba(26, 26, 26, 0.28);
  --alpha-light-400: rgba(26, 26, 26, 0.36);
  --alpha-light-500: rgba(26, 26, 26, 0.48);
  --alpha-light-600: rgba(26, 26, 26, 0.60);
  --alpha-light-900: rgba(26, 26, 26, 0.80);

  /* Alpha Dark (rgba 255,255,255) */
  --alpha-dark-300: rgba(255, 255, 255, 0.28);
  --alpha-dark-600: rgba(255, 255, 255, 0.60);
  --alpha-dark-800: rgba(255, 255, 255, 0.75);
  --alpha-dark-900: rgba(255, 255, 255, 0.80);

  /* Brand — derived from --color-primary */
  --alpha-brand-50: color-mix(in srgb, var(--color-primary, #106844) 6%, transparent);
  --alpha-brand-100: color-mix(in srgb, var(--color-primary, #106844) 8%, transparent);
  --alpha-brand-950: var(--color-primary, #106844);

  /* Neutrals */
  --neutral-50: #fafafa;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-500: #737373;
  --neutral-700: #404040;

  /* Semantic */
  --red-600: #dc2626;
  --green-600: #106844;
  --amber-500: #f59e0b;

  /* Shadows */
  --shadow-card: 0px 22px 6px rgba(0,0,0,0), 0px 14px 6px rgba(0,0,0,0), 0px 8px 5px rgba(0,0,0,0.01), 0px 4px 4px rgba(0,0,0,0.02), 0px 1px 2px rgba(0,0,0,0.02);
  --shadow-modal: 0px 67px 19px rgba(0,0,0,0), 0px 43px 17px rgba(0,0,0,0.01), 0px 24px 15px rgba(0,0,0,0.02), 0px 11px 11px rgba(0,0,0,0.03), 0px 3px 6px rgba(0,0,0,0.04);
  --shadow-avatar: 0px 20px 6px rgba(12,48,70,0), 0px 13px 5px rgba(12,48,70,0.02), 0px 7px 4px rgba(12,48,70,0.07), 0px 3px 3px rgba(12,48,70,0.12), 0px 1px 2px rgba(12,48,70,0.14);
  --shadow-send-outer: 0px 2px 1px -1px rgba(0,0,0,0.08);
  --shadow-send-inset: inset 0px 0px 3px rgba(26,26,26,0.28);

  /* Spacing (4px grid) */
  --space-0: 0px;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;

  /* Border Radius */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-full: 999px;

  /* Typography — bridged from design-tokens.css */
  --font-primary: var(--font-family-body, 'Inter', sans-serif);
  --font-custom: var(--font-family-heading, 'Oswald', sans-serif);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 32px;
  --leading-xs: 16px;
  --leading-sm: 20px;
  --leading-base: 24px;
  --leading-lg: 28px;
  --leading-xl: 40px;

  /* Sidebar */
  --sidebar-width: 316px;
  --sidebar-tint: color-mix(in srgb, var(--color-primary, #00b4d4) 5%, transparent);
}

/* --- Reset & Base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: var(--font-family-body, 'Inter', system-ui, sans-serif);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  color: var(--alpha-light-600);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* --- App Frame --- */
.app-frame {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--white);
  color: var(--alpha-light-600);
  position: relative;
}

/* --- Sidebar --- */
.sidebar {
  width: var(--sidebar-width);
  background: var(--white);
  padding: 8px 0 8px 8px;
  flex-shrink: 0;
  display: flex;
}

.sidebar-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--sidebar-tint);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  min-height: 0;
}

.sidebar-header {
  padding: 12px 16px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 100ms ease-out;
}

.sidebar-user:hover {
  background: var(--alpha-light-50);
}

.sidebar-username {
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  flex: 1;
  color: var(--alpha-light-600);
}

.sidebar-user-chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--alpha-light-400);
  transition: transform 150ms ease-out;
}

.sidebar-user--open .sidebar-user-chevron {
  transform: rotate(180deg);
}

/* Demo Switcher Dropdown */
.demo-dropdown {
  position: absolute;
  top: 100%;
  left: 8px;
  right: 8px;
  z-index: 50;
  background: var(--white);
  border: 1px solid var(--alpha-light-100);
  border-radius: 16px;
  box-shadow: var(--shadow-modal);
  padding: 6px;
  animation: dropdownIn 150ms ease-out;
}

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

.demo-dropdown__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  padding: 6px 8px 4px;
}

.demo-dropdown__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.demo-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 100ms ease-out;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
}

.demo-dropdown__item:hover {
  background: var(--alpha-light-50);
}

.demo-dropdown__item:active {
  background: var(--alpha-light-100);
}

.demo-dropdown__item:focus-visible {
  outline: 2px solid var(--alpha-light-200);
  outline-offset: -2px;
}

.demo-dropdown__item--active {
  background: var(--alpha-brand-50);
}

.demo-dropdown__item--active:hover {
  background: var(--alpha-brand-100);
}

.demo-dropdown__item-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  flex-shrink: 0;
}

.demo-dropdown__item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.demo-dropdown__item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-dropdown__item-role {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-dropdown__item-check {
  margin-left: auto;
  width: 16px;
  height: 16px;
  color: var(--alpha-brand-950);
  flex-shrink: 0;
}

/* Sidebar Nav */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  flex: 1;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 8px 10px 8px 8px;
  margin: 0 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--alpha-light-600);
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background-color 100ms ease-out;
  position: relative;
}

.sidebar-item:hover {
  background: var(--alpha-light-50);
}

.sidebar-item:focus-visible {
  outline: 2px solid var(--color-primary, var(--alpha-light-200));
  outline-offset: -2px;
}

.sidebar-item--active {
  background: color-mix(in srgb, var(--color-primary, #106844) 8%, transparent);
}

.sidebar-item--active:hover {
  background: color-mix(in srgb, var(--color-primary, #106844) 8%, transparent);
}

.sidebar-item--active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-primary, #106844) 8%, transparent);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.sidebar-footer {
  padding: 8px 0 12px;
}

/* --- Icons --- */
.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* --- Avatar --- */
.avatar {
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar--sm {
  width: 20px;
  height: 20px;
}

.avatar--lg {
  width: 64px;
  height: 64px;
}

.avatar--chat {
  width: 24px;
  height: 24px;
}

.avatar-initials {
  background: linear-gradient(135deg, var(--color-primary, rgba(16, 104, 68, 0.92)), var(--color-primary-dark, rgba(16, 104, 68, 0.80)));
  color: var(--color-text-on-primary, var(--white));
  font-size: 12px;
  font-weight: 600;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
}

.avatar-initials--lg {
  font-size: 20px;
  letter-spacing: 1px;
  box-shadow: var(--shadow-avatar);
  border: 1px solid var(--alpha-light-50);
}

.avatar-glow {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary, #106844) 8%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

/* --- Main Content --- */
.main {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Background shapes */
.bg-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-ellipse {
  position: absolute;
  border-radius: 50%;
}

.bg-ellipse--1 {
  width: 1411px;
  height: 609px;
  bottom: -158px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, color-mix(in srgb, var(--color-primary, #106844) 3%, transparent) 0%, transparent 70%);
}

.bg-ellipse--2 {
  width: 1003px;
  height: 433px;
  bottom: -197px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, color-mix(in srgb, var(--color-primary, #106844) 4%, transparent) 0%, transparent 70%);
}

/* --- Top Bar --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--alpha-dark-800);
  backdrop-filter: blur(4px);
  padding: 24px 20px 0;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.topbar-label {
  font-weight: 500;
  font-size: 14px;
}

/* --- Views --- */
.view {
  position: relative;
  z-index: 1;
}

.view--dashboard {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.dashboard-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 704px;
  max-width: 100%;
}

/* Hero Greeting */
.hero-greeting {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.hero-heading {
  font-family: var(--font-family-heading, var(--font-family-body));
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.5px;
  font-weight: 400;
  color: var(--black);
  text-align: center;
}

/* --- Chat Input Card --- */
.chat-input-card {
  background: var(--white);
  border: 1px solid var(--alpha-light-100);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  width: 100%;
  padding: 12px 12px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: border-color 150ms ease-out;
}

.chat-input-card:focus-within {
  border-color: color-mix(in srgb, var(--color-primary, #106844) 30%, var(--alpha-light-200));
}

.chat-input-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-textarea {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  font-weight: 400;
  color: var(--alpha-light-900);
  background: transparent;
  min-height: 20px;
  max-height: 120px;
}

.chat-textarea::placeholder {
  color: var(--alpha-light-600);
}

.chat-input-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar-right {
  gap: 6px;
}

/* Button Group (dots + mic) */
.btn-group {
  display: flex;
  align-items: center;
  background: var(--neutral-50);
  border-radius: 999px;
  overflow: hidden;
}

/* --- Buttons --- */

/* Icon Button (Ghost) */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 24px;
  padding: 8px;
  background: transparent;
  color: var(--alpha-light-600);
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

.icon-btn:hover {
  background: var(--alpha-light-50);
}

.icon-btn:active {
  background: var(--alpha-light-100);
}

.icon-btn:focus-visible {
  outline: 2px solid var(--color-primary, var(--alpha-light-300));
  outline-offset: 2px;
}

.icon-btn--subtle {
  width: 24px;
  height: 24px;
  padding: 2px;
  border-radius: 6px;
}

/* Mic Button */
.icon-btn--mic {
  background: var(--white);
  border: 1px solid var(--alpha-light-100);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
}

.icon-btn--mic:hover {
  background: var(--neutral-50);
}

.icon-btn--mic:focus-visible {
  outline: 2px solid var(--color-primary, var(--alpha-light-300));
  outline-offset: 2px;
}

/* Send Button */
.send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: none;
  border-radius: 999px;
  background-image:
    linear-gradient(180deg, transparent 0%, var(--alpha-light-200) 100%),
    linear-gradient(90deg, #fff 0%, #fff 100%);
  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.08);
  cursor: pointer;
  position: relative;
  color: var(--alpha-light-600);
  transition: opacity 150ms ease-out;
}

.send-btn:hover {
  opacity: 0.85;
}

.send-btn:focus-visible {
  outline: 2px solid var(--color-primary, var(--alpha-light-300));
  outline-offset: 2px;
}

.send-btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.send-btn:disabled .send-btn-inset {
  box-shadow: none;
}

.send-btn-inset {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0px 0px 3px rgba(26,26,26,0.28);
  pointer-events: none;
}

/* Agent Chip */
.agent-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  background: color-mix(in srgb, var(--color-primary, #106844) 6%, transparent);
  border-radius: 24px;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--color-primary, var(--alpha-brand-950));
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

.agent-chip:hover {
  background: color-mix(in srgb, var(--color-primary, #106844) 10%, transparent);
}

.agent-chip:focus-visible {
  outline: 2px solid var(--color-primary, var(--alpha-brand-950));
  outline-offset: 2px;
}

.agent-chip-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.agent-chip-badge {
  background: var(--alpha-brand-50);
  border-radius: 4px;
  padding: 0 2px;
  font-size: 12px;
  min-width: 20px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Suggestion Cards --- */
.suggestions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.suggestions-label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--alpha-light-600);
  text-align: center;
}

.suggestions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}

.suggestion-card {
  background: var(--alpha-dark-300);
  border: 1px solid var(--alpha-light-50);
  border-radius: 16px;
  padding: 12px 16px;
  backdrop-filter: blur(4px);
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  font-weight: 500;
  color: var(--alpha-light-600);
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

.suggestion-card:hover {
  background: var(--alpha-dark-600);
  border-color: var(--alpha-light-100);
}

.suggestion-card:active {
  background: var(--alpha-dark-800);
}

.suggestion-card:focus-visible {
  outline: 2px solid var(--color-primary, var(--alpha-light-300));
  outline-offset: 2px;
}

.suggestion-card--highlighted {
  background: var(--alpha-dark-900);
}

/* --- Chat View --- */
.view--chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 704px;
  width: 100%;
  margin: 0 auto;
}

.chat-input-bottom {
  padding: 16px 20px 20px;
  max-width: 704px;
  width: 100%;
  margin: 0 auto;
}

/* --- Chat Messages --- */

/* User message */
.message-user {
  display: flex;
  justify-content: flex-end;
}

.message-user-bubble {
  background: var(--alpha-dark-300);
  border: 1px solid var(--alpha-light-50);
  border-radius: 16px;
  padding: 16px;
  backdrop-filter: blur(4px);
  max-width: 480px;
  font-weight: 500;
  color: var(--alpha-light-900);
}

/* AI message */
.message-ai {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  max-width: 600px;
}

.message-ai-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.message-ai-text {
  font-weight: 400;
  color: var(--alpha-light-900);
  line-height: 28px;
}

.message-ai-text--spaced {
  margin-bottom: 12px;
}

.message-ai-text p {
  margin-bottom: 12px;
}

.message-ai-text p:last-child {
  margin-bottom: 0;
}

.message-ai-text strong {
  font-weight: 600;
}

.message-ai-text ul, .message-ai-text ol {
  padding-left: 20px;
  margin-bottom: 12px;
}

.message-ai-text li {
  margin-bottom: 4px;
}

/* Action Chips (below AI response) */
.action-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.action-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--alpha-light-50);
  border: 1px solid var(--alpha-light-50);
  border-radius: 12px;
  padding: 8px 16px 8px 12px;
  backdrop-filter: blur(4px);
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
  cursor: pointer;
  width: fit-content;
  transition: background-color 150ms ease-out;
}

.action-chip:hover {
  background: var(--alpha-light-100);
  border-color: var(--alpha-light-100);
}

.action-chip:active {
  background: var(--alpha-light-200);
}

/* Loading / Thinking */
.message-loading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.loading-text {
  font-weight: 500;
  color: var(--alpha-light-900);
}

.loading-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}

.loading-dots span {
  width: 2px;
  height: 2px;
  background: var(--alpha-light-600);
  border-radius: 999px;
  animation: dotPulse 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.loading-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes dotPulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
  40% { opacity: 1; transform: scale(1.3); }
}

/* Error state */
.message-error {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--red-600);
  font-weight: 500;
}

.message-error .icon {
  color: var(--red-600);
}

/* --- Settings Modal --- */
.modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--alpha-dark-900);
  animation: backdropIn 200ms ease-out;
}

.modal-overlay.closing .modal-backdrop {
  animation: backdropOut 150ms ease-in forwards;
}

@keyframes backdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes backdropOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.settings-dialog {
  position: relative;
  width: 480px;
  background: var(--alpha-dark-600);
  backdrop-filter: blur(10px);
  border: 1px solid var(--alpha-light-100);
  border-radius: 16px;
  box-shadow: var(--shadow-modal);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: dialogIn 200ms ease-out;
}

.modal-overlay.closing .settings-dialog {
  animation: dialogOut 150ms ease-in forwards;
}

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

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

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings-title {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  color: var(--alpha-light-900);
  letter-spacing: 0;
}

/* Close Button */
.close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 4px;
  border: none;
  border-radius: 999px;
  background: var(--alpha-light-50);
  color: var(--alpha-light-600);
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

.close-btn:hover {
  background: var(--alpha-light-100);
}

.close-btn:active {
  background: var(--alpha-light-200);
}

.close-btn:focus-visible {
  outline: 2px solid var(--alpha-light-300);
  outline-offset: 2px;
}

/* Settings Sections */
.settings-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings-section-label {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.settings-edit-btn {
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--alpha-light-900);
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity 150ms;
}

.settings-edit-btn:hover {
  opacity: 0.7;
}

.settings-edit-btn:focus-visible {
  outline: 2px solid var(--alpha-light-300);
  outline-offset: 2px;
}

.settings-info-card {
  background: var(--alpha-light-25);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings-row--bordered {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--alpha-light-50);
}

.settings-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--alpha-light-600);
  font-weight: 500;
}

.settings-row-value {
  font-weight: 500;
  color: var(--alpha-light-900);
}

.password-dots {
  letter-spacing: 2px;
}

/* --- Primary Button --- */
.btn {
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-align: center;
  transition: opacity 150ms ease-out;
}

.btn--primary {
  background: linear-gradient(to bottom, var(--neutral-500), var(--neutral-700));
  color: var(--alpha-dark-900);
}

.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--white);
  border-radius: inherit;
  filter: blur(0.2px);
  pointer-events: none;
}

.btn--primary:hover {
  background: linear-gradient(to bottom, #808080, #505050);
}

.btn--primary:active {
  background: linear-gradient(to bottom, #606060, #303030);
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary, var(--alpha-brand-950));
  outline-offset: 2px;
}

.btn--full {
  width: 100%;
}

.btn--disabled {
  background: linear-gradient(to bottom, var(--neutral-200), var(--neutral-300));
  color: var(--alpha-light-400);
  cursor: not-allowed;
}

/* --- Utility --- */
::selection {
  background: color-mix(in srgb, var(--color-primary, #106844) 15%, transparent);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--alpha-light-200);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--alpha-light-300);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--alpha-light-200) transparent;
}

/* ========================================================
   CHAT RESPONSE COMPONENTS — Shared Card Base
   ======================================================== */

.chat-response-card {
  background: var(--white);
  border: 1px solid var(--alpha-light-100);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  width: 100%;
  max-width: 520px;
  animation: cardFadeIn 300ms ease-out;
}

@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-response-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--alpha-light-50);
}

.chat-response-card__title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
}

.chat-response-card__subtitle {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--alpha-light-500);
}

.chat-response-card__body {
  padding: 16px;
}

.chat-response-card__footer {
  padding: 12px 16px;
  border-top: 1px solid var(--alpha-light-50);
}

/* Toggle Pill (shared between components) */
.toggle-pill {
  display: inline-flex;
  background: var(--alpha-light-25);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}

.toggle-pill__btn {
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--alpha-light-500);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  transition: all 150ms ease-out;
}

.toggle-pill__btn--active {
  background: var(--white);
  color: var(--alpha-light-900);
  box-shadow: 0px 1px 2px rgba(0,0,0,0.06);
}

.toggle-pill__btn:hover:not(.toggle-pill__btn--active) {
  color: var(--alpha-light-600);
}

/* ========================================================
   1. CAL AI — Photo-to-Macros Scanner
   ======================================================== */

.cal-ai__scanning {
  position: relative;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.cal-ai__scan-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--alpha-brand-50);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scanPulse 1.5s ease-in-out infinite;
}

.cal-ai__scan-icon svg {
  width: 24px;
  height: 24px;
  color: var(--alpha-brand-950);
}

@keyframes scanPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.08); opacity: 1; }
}

.cal-ai__scan-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
}

.cal-ai__scan-bar {
  width: 120px;
  height: 4px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.cal-ai__scan-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--alpha-brand-950);
  border-radius: 999px;
  animation: scanBarFill 2s ease-out forwards;
}

@keyframes scanBarFill {
  0% { width: 0%; }
  100% { width: 100%; }
}

.cal-ai__photo {
  width: 100%;
  height: 140px;
  background: linear-gradient(135deg, rgba(26,26,26,0.03) 0%, rgba(16,104,68,0.03) 100%);
  border-bottom: 1px solid var(--alpha-light-50);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.cal-ai__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cal-ai__photo-placeholder {
  font-size: 32px;
  line-height: 1;
}

.cal-ai__photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(26,26,26,0.04) 100%);
  pointer-events: none;
}

.cal-ai__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.cal-ai__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--alpha-light-50);
}

.cal-ai__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cal-ai__item-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cal-ai__item-emoji {
  font-size: 16px;
  width: 24px;
  text-align: center;
}

.cal-ai__item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
}

.cal-ai__item-portion {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
}

.cal-ai__item-macros {
  display: flex;
  gap: 12px;
  align-items: center;
}

.cal-ai__macro {
  text-align: right;
  min-width: 36px;
}

.cal-ai__macro-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  display: block;
}

.cal-ai__macro-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  letter-spacing: -0.15px;
}

.cal-ai__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--alpha-light-25);
  border-top: 1px solid var(--alpha-light-50);
}

.cal-ai__total-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.cal-ai__total-cal {
  font-size: 16px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.cal-ai__total-cal span {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
}

.cal-ai__add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 16px;
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-brand-950);
  background: var(--alpha-brand-50);
  border: 1px solid color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms ease-out;
}

.cal-ai__add-btn:hover {
  background: var(--alpha-brand-100);
}

.cal-ai__add-btn:active {
  background: var(--alpha-brand-100);
}

.cal-ai__add-btn svg {
  width: 16px;
  height: 16px;
}

.cal-ai__added {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-brand-950);
  background: var(--alpha-brand-50);
  border-radius: 8px;
  animation: addedFade 300ms ease-out;
}

.cal-ai__added svg {
  width: 16px;
  height: 16px;
}

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

/* ========================================================
   2. HABIT TRACKER — Minimal Workout Calendar
   ======================================================== */

/* Stats row */
.habit-stats {
  display: flex;
  gap: 1px;
  background: var(--alpha-light-50);
  margin: 0 16px;
  border-radius: 12px;
  overflow: hidden;
}

.habit-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  background: var(--white);
}

.habit-stat--streak {
  position: relative;
}

.habit-stat__number {
  font-size: 20px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 1;
}

.habit-stat__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 16px;
}

/* This week strip */
.habit-week-strip {
  padding: 16px 16px 12px;
}

.habit-week-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  display: block;
  padding-bottom: 8px;
}

.habit-week-row {
  display: flex;
  gap: 6px;
}

.habit-week-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.habit-week-day {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  line-height: 16px;
}

.habit-dot {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--alpha-light-25);
  transition: all 150ms ease-out;
}

.habit-dot svg {
  width: 12px;
  height: 12px;
}

.habit-dot--done {
  background: var(--alpha-brand-100);
  color: var(--alpha-brand-950);
}

.habit-dot--today {
  background: transparent;
  outline: 2px solid var(--alpha-light-300);
  outline-offset: -2px;
}

.habit-dot--future {
  background: var(--alpha-light-25);
  opacity: 0.5;
}

.habit-dot--rest {
  background: var(--alpha-light-25);
}

/* Month heatmap */
.habit-month {
  padding: 0 16px 16px;
  border-top: 1px solid var(--alpha-light-50);
}

.habit-month-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 12px 0 6px;
}

.habit-month-header span {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  text-align: center;
  line-height: 16px;
}

.habit-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.habit-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--alpha-light-25);
  transition: background-color 150ms ease-out;
}

.habit-cell--done {
  background: var(--alpha-brand-100);
}

.habit-cell--today {
  outline: 2px solid var(--alpha-light-300);
  outline-offset: -1px;
}

.habit-cell--future {
  background: var(--alpha-light-25);
  opacity: 0.4;
}

/* Legend */
.habit-legend {
  display: flex;
  gap: 16px;
  padding-top: 8px;
  justify-content: flex-end;
}

.habit-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.habit-legend-item span {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  line-height: 16px;
}

.habit-legend-swatch {
  width: 12px;
  height: 12px;
}

/* ========================================================
   3. EXERCISE FORM ANALYZER
   ======================================================== */

.form-analyzer__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(180deg, rgba(26,26,26,0.02) 0%, rgba(26,26,26,0.04) 100%);
  overflow: hidden;
}

.form-analyzer__body-svg {
  width: 100%;
  height: 100%;
}

.form-analyzer__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.form-analyzer__overlay-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.form-analyzer__side-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.form-analyzer__annotation {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  pointer-events: none;
}

.form-analyzer__annotation-num {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-card);
}

.form-analyzer__annotation-num--good {
  background: var(--green-600);
  color: var(--white);
}

.form-analyzer__annotation-num--warning {
  background: var(--amber-500);
  color: var(--white);
}

.form-analyzer__annotation-num--fix {
  background: var(--red-600);
  color: var(--white);
}

.form-analyzer__annotation-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--white);
  background: rgba(26, 26, 26, 0.7);
  backdrop-filter: blur(4px);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.form-analyzer__feedback {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.form-analyzer__feedback-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.form-analyzer__severity {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 8px;
}

.form-analyzer__severity--good { background: var(--green-600); }
.form-analyzer__severity--warning { background: var(--amber-500); }
.form-analyzer__severity--fix { background: var(--red-600); }

.form-analyzer__feedback-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
  line-height: 20px;
}

.form-analyzer__feedback-detail {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 16px;
  margin-top: 2px;
}

.form-analyzer__compare {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--alpha-light-50);
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

.form-analyzer__compare:hover {
  background: var(--alpha-light-25);
}

.form-analyzer__compare-toggle {
  width: 36px;
  height: 20px;
  background: var(--alpha-light-200);
  border-radius: 999px;
  position: relative;
  flex-shrink: 0;
  transition: background-color 200ms ease-out;
}

.form-analyzer__compare-toggle--active {
  background: var(--alpha-brand-950);
}

.form-analyzer__compare-toggle::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--white);
  border-radius: 999px;
  top: 2px;
  left: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  transition: transform 200ms ease-out;
}

.form-analyzer__compare-toggle--active::after {
  transform: translateX(16px);
}

.form-analyzer__compare-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
}

.form-analyzer__side-by-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--alpha-light-50);
}

.form-analyzer__side-label {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  padding: 6px;
  letter-spacing: -0.15px;
}

.form-analyzer__side-label--yours {
  color: var(--alpha-light-600);
  background: var(--alpha-light-25);
}

.form-analyzer__side-label--ideal {
  color: var(--alpha-brand-950);
  background: var(--alpha-brand-50);
}

.form-analyzer__side-image {
  aspect-ratio: 3/4;
  background: var(--alpha-light-25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-analyzer__side-image--ideal {
  background: var(--alpha-brand-50);
}

.form-analyzer__score {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px 4px;
}

.form-analyzer__score-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.form-analyzer__score-max {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

.form-analyzer__score-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
}

/* ========================================================
   4. NUTRITION TRACKER — Daily/Weekly Macros Dashboard
   ======================================================== */

.nutrition__ring-section {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px;
}

.nutrition__ring-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

.nutrition__ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.nutrition__ring-bg {
  fill: none;
  stroke: var(--alpha-light-50);
  stroke-width: 8;
}

.nutrition__ring-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 600ms ease-out;
}

.nutrition__ring-fill--cal {
  stroke: var(--alpha-light-900);
}

.nutrition__ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.nutrition__ring-number {
  font-size: 20px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 1;
}

.nutrition__ring-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  margin-top: 2px;
}

.nutrition__macro-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

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

.nutrition__macro-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nutrition__macro-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
}

.nutrition__macro-values {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.nutrition__macro-values span {
  font-weight: 500;
  color: var(--alpha-light-400);
}

.nutrition__macro-bar {
  height: 4px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.nutrition__macro-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 600ms ease-out;
}

.nutrition__macro-bar-fill--protein { background: color-mix(in srgb, var(--color-primary) 70%, transparent); }
.nutrition__macro-bar-fill--carbs { background: rgba(26, 26, 26, 0.5); }
.nutrition__macro-bar-fill--fat { background: rgba(26, 26, 26, 0.25); }

.nutrition__meals {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 16px 16px;
}

.nutrition__meals-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  padding-bottom: 4px;
  letter-spacing: -0.15px;
}

.nutrition__meal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--alpha-light-25);
  border-radius: 8px;
  transition: background-color 150ms ease-out;
}

.nutrition__meal:hover {
  background: var(--alpha-light-50);
}

.nutrition__meal-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nutrition__meal-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.nutrition__meal-info {
  display: flex;
  flex-direction: column;
}

.nutrition__meal-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
}

.nutrition__meal-detail {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

.nutrition__meal-cal {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.nutrition__meal-cal span {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

.nutrition__meal-cal--empty {
  color: var(--alpha-light-400);
}

.nutrition__quick-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed var(--alpha-light-200);
  border-radius: 8px;
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-500);
  cursor: pointer;
  transition: all 150ms ease-out;
}

.nutrition__quick-add:hover {
  background: var(--alpha-light-25);
  border-color: var(--alpha-light-300);
  color: var(--alpha-light-600);
}

.nutrition__quick-add svg {
  width: 14px;
  height: 14px;
}

.nutrition__weekly-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
  height: 120px;
  padding: 16px 16px 0;
  position: relative;
}

.nutrition__chart-target-line {
  position: absolute;
  left: 16px;
  right: 16px;
  border-top: 1.5px dashed var(--alpha-light-300);
  z-index: 1;
}

.nutrition__chart-target-label {
  position: absolute;
  right: 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  transform: translateY(-14px);
}

.nutrition__chart-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.nutrition__chart-bar {
  width: 100%;
  max-width: 32px;
  border-radius: 4px 4px 0 0;
  transition: height 600ms ease-out;
}

.nutrition__chart-bar--under { background: var(--alpha-light-200); }
.nutrition__chart-bar--over { background: color-mix(in srgb, var(--color-primary) 50%, transparent); }
.nutrition__chart-bar--today { background: var(--alpha-light-900); }

.nutrition__chart-day-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  padding-bottom: 8px;
}

.nutrition__chart-cal-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  padding-top: 2px;
}

.nutrition__weekly-wrapper {
  position: relative;
  padding-bottom: 16px;
}

.nutrition__weekly-stats {
  padding: 0 16px 16px;
}

.nutrition__weekly-stats-row {
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--alpha-light-50);
}

.nutrition__weekly-stat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
}

.nutrition__weekly-stat-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.nutrition__weekly-stat-unit {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

.nutrition__weekly-stat--right {
  text-align: right;
}

/* User message with image */
.message-user-image {
  width: 100%;
  max-width: 200px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
  background: var(--alpha-light-25);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4/3;
  font-size: 32px;
}

.message-user-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.message-user--with-image {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* ========================================================
   5. FACEBOOK ADS PERFORMANCE ANALYZER
   ======================================================== */

/* Connection / syncing states */
.fb-ads__status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
}

.fb-ads__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--green-600);
  animation: fbAdsPulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes fbAdsPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

.fb-ads__status-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
}

.fb-ads__sync-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 16px 16px;
}

.fb-ads__sync-item {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  display: flex;
  align-items: center;
  gap: 6px;
  animation: fbAdsSyncFade 400ms ease-out both;
}

.fb-ads__sync-item:nth-child(1) { animation-delay: 0ms; }
.fb-ads__sync-item:nth-child(2) { animation-delay: 600ms; }
.fb-ads__sync-item:nth-child(3) { animation-delay: 1200ms; }

.fb-ads__sync-check {
  width: 14px;
  height: 14px;
  color: var(--green-600);
  flex-shrink: 0;
}

@keyframes fbAdsSyncFade {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: translateX(0); }
}

.fb-ads__sync-bar {
  width: 100%;
  height: 4px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
  margin: 4px 16px 16px;
  max-width: calc(100% - 32px);
}

.fb-ads__sync-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--green-600);
  border-radius: 999px;
  animation: fbAdsSyncBarFill 3s ease-out forwards;
}

@keyframes fbAdsSyncBarFill {
  0% { width: 0%; }
  100% { width: 100%; }
}

/* Live badge */
.fb-ads__live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--green-600);
  line-height: 16px;
}

.fb-ads__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--green-600);
  animation: fbAdsPulse 2s ease-in-out infinite;
}

/* Campaign cards */
.fb-ads__campaigns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
}

.fb-ads__campaign {
  background: var(--alpha-light-25);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fb-ads__campaign-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.fb-ads__campaign-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.fb-ads__status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  flex-shrink: 0;
}

.fb-ads__status-pill--active {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--green-600);
}

.fb-ads__status-pill--paused {
  background: var(--alpha-light-50);
  color: var(--alpha-light-500);
}

.fb-ads__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.fb-ads__metric {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.fb-ads__metric-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 20px;
}

.fb-ads__metric-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  line-height: 16px;
  letter-spacing: -0.15px;
}

.fb-ads__metric-value--good { color: var(--green-600); }
.fb-ads__metric-value--avg { color: var(--amber-500); }
.fb-ads__metric-value--bad { color: var(--red-600); }

/* Mini trend bars */
.fb-ads__trend {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 24px;
  padding-top: 4px;
}

.fb-ads__trend-bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  min-width: 4px;
  transition: height 300ms ease-out;
}

.fb-ads__trend-bar--up { background: color-mix(in srgb, var(--color-primary) 28%, transparent); }
.fb-ads__trend-bar--down { background: rgba(220, 38, 38, 0.2); }
.fb-ads__trend-bar--flat { background: var(--alpha-light-200); }

/* Summary */
.fb-ads__summary {
  padding: 12px 16px;
  border-top: 1px solid var(--alpha-light-50);
  font-size: 14px;
  font-weight: 400;
  color: var(--alpha-light-900);
  line-height: 24px;
}

.fb-ads__summary strong {
  font-weight: 600;
}

/* ========================================================
   6. COMPETITOR AD LIBRARY BROWSER
   ======================================================== */

/* Search / scanning state */
.competitor__search-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
}

.competitor__search-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--alpha-light-25);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scanPulse 1.5s ease-in-out infinite;
}

.competitor__search-icon svg {
  width: 24px;
  height: 24px;
  color: var(--alpha-light-500);
}

.competitor__search-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
}

.competitor__search-bar {
  width: 120px;
  height: 4px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.competitor__search-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--alpha-light-900);
  border-radius: 999px;
  animation: scanBarFill 2.5s ease-out forwards;
}

/* Filter row */
.competitor__filters {
  padding: 12px 16px;
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--alpha-light-50);
  overflow-x: auto;
}

.competitor__filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  background: var(--alpha-light-25);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 150ms ease-out;
  line-height: 16px;
  letter-spacing: -0.15px;
}

.competitor__filter-btn--active {
  background: var(--white);
  border-color: var(--alpha-light-100);
  color: var(--alpha-light-900);
  box-shadow: 0px 1px 2px rgba(0,0,0,0.06);
}

.competitor__filter-btn:hover:not(.competitor__filter-btn--active) {
  color: var(--alpha-light-600);
  background: var(--alpha-light-50);
}

.competitor__filter-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-400);
}

/* Gallery grid */
.competitor__gallery {
  padding: 12px 16px;
}

.competitor__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.competitor__ad-card {
  background: var(--alpha-light-25);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

.competitor__ad-card:hover {
  background: var(--alpha-light-50);
}

.competitor__ad-thumb {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.competitor__ad-thumb--feed { aspect-ratio: 1/1; }
.competitor__ad-thumb--story { aspect-ratio: 9/16; max-height: 160px; }

.competitor__ad-thumb-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(26,26,26,0.03) 0%, rgba(26,26,26,0.06) 100%);
}

.competitor__ad-thumb-icon {
  width: 24px;
  height: 24px;
  color: var(--alpha-light-300);
}

.competitor__ad-thumb-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  text-align: center;
  line-height: 16px;
}

.competitor__ad-info {
  padding: 8px;
}

.competitor__ad-copy {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 16px;
  letter-spacing: -0.15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.competitor__ad-see-more {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  cursor: pointer;
}

.competitor__ad-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.competitor__format-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  background: var(--alpha-light-50);
  color: var(--alpha-light-500);
  line-height: 16px;
}

.competitor__ad-duration {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

/* Analysis section */
.competitor__analysis {
  padding: 16px;
  border-top: 1px solid var(--alpha-light-50);
}

.competitor__analysis-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
  margin-bottom: 8px;
}

.competitor__analysis-text {
  font-size: 14px;
  font-weight: 400;
  color: var(--alpha-light-600);
  line-height: 24px;
  margin-bottom: 12px;
}

.competitor__patterns-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  margin-bottom: 8px;
  letter-spacing: -0.15px;
}

.competitor__patterns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.competitor__pattern-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--alpha-light-25);
  border: 1px solid var(--alpha-light-50);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 16px;
  letter-spacing: -0.15px;
}

/* ========================================================
   7. AD CREATIVE GENERATOR
   ======================================================== */

/* Thinking / generating state */
.ad-gen__thinking {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
}

.ad-gen__thinking-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--alpha-brand-50);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scanPulse 1.5s ease-in-out infinite;
}

.ad-gen__thinking-icon svg {
  width: 24px;
  height: 24px;
  color: var(--alpha-brand-950);
}

.ad-gen__thinking-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
  text-align: center;
}

/* Tabs */
.ad-gen__tabs {
  display: flex;
  gap: 2px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--alpha-light-50);
}

.ad-gen__tab {
  flex: 1;
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  background: var(--alpha-light-25);
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  text-align: center;
  transition: all 150ms ease-out;
  line-height: 16px;
  letter-spacing: -0.15px;
}

.ad-gen__tab--active {
  background: var(--white);
  color: var(--alpha-light-900);
  box-shadow: 0px 1px 2px rgba(0,0,0,0.06);
}

.ad-gen__tab:hover:not(.ad-gen__tab--active) {
  color: var(--alpha-light-600);
}

/* Concept panel */
.ad-gen__concept {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ad-gen__strategy-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--alpha-brand-50);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-brand-950);
  width: fit-content;
  line-height: 16px;
}

/* Copy section */
.ad-gen__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ad-gen__copy-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ad-gen__copy-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-400);
  letter-spacing: -0.15px;
  line-height: 16px;
}

.ad-gen__copy-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
  line-height: 20px;
  letter-spacing: -0.15px;
}

.ad-gen__copy-value--body {
  line-height: 24px;
  color: var(--alpha-light-600);
}

/* Creative preview placeholder */
.ad-gen__preview {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--alpha-light-50);
}

.ad-gen__preview-frame {
  width: 100%;
  aspect-ratio: 1/1;
  background: linear-gradient(135deg, rgba(26,26,26,0.03) 0%, rgba(16,104,68,0.04) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
}

.ad-gen__preview-icon {
  width: 32px;
  height: 32px;
  color: var(--alpha-light-300);
}

.ad-gen__preview-desc {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  text-align: center;
  line-height: 20px;
  max-width: 280px;
  letter-spacing: -0.15px;
}

/* Format pills */
.ad-gen__formats {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ad-gen__formats-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  letter-spacing: -0.15px;
}

.ad-gen__format-pill {
  display: inline-flex;
  padding: 2px 8px;
  background: var(--alpha-light-25);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 16px;
}

/* Performance prediction */
.ad-gen__prediction {
  background: var(--alpha-light-25);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ad-gen__prediction-icon {
  width: 16px;
  height: 16px;
  color: var(--alpha-brand-950);
  flex-shrink: 0;
  margin-top: 1px;
}

.ad-gen__prediction-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
  letter-spacing: -0.15px;
}

.ad-gen__prediction-text strong {
  font-weight: 600;
  color: var(--alpha-light-900);
}

/* Action buttons row */
.ad-gen__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--alpha-light-50);
}

.ad-gen__btn {
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 150ms ease-out;
  border: none;
  line-height: 20px;
  letter-spacing: -0.15px;
}

.ad-gen__btn--primary {
  background: linear-gradient(to bottom, var(--neutral-500), var(--neutral-700));
  color: var(--alpha-dark-900);
  position: relative;
  overflow: hidden;
}

.ad-gen__btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--white);
  border-radius: inherit;
  filter: blur(0.2px);
  pointer-events: none;
}

.ad-gen__btn--primary:hover {
  background: linear-gradient(to bottom, #808080, #505050);
}

.ad-gen__btn--primary:active {
  background: linear-gradient(to bottom, #606060, #303030);
}

.ad-gen__btn--secondary {
  background: var(--alpha-light-50);
  color: var(--alpha-light-900);
}

.ad-gen__btn--secondary:hover {
  background: var(--alpha-light-100);
}

.ad-gen__btn--ghost {
  background: transparent;
  color: var(--alpha-light-600);
}

.ad-gen__btn--ghost:hover {
  background: var(--alpha-light-50);
}

/* ========================================================
   8. GENERATED CREATIVE PREVIEW
   ======================================================== */

/* Generation loading state */
.creative-preview__loading {
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.creative-preview__loading-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--alpha-light-25);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scanPulse 1.5s ease-in-out infinite;
}

.creative-preview__loading-icon svg {
  width: 24px;
  height: 24px;
  color: var(--alpha-light-500);
}

.creative-preview__loading-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
}

.creative-preview__progress {
  width: 160px;
  height: 4px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.creative-preview__progress-fill {
  height: 100%;
  width: 0%;
  background: var(--alpha-light-900);
  border-radius: 999px;
  animation: creativeProgressFill 3s ease-out forwards;
}

@keyframes creativeProgressFill {
  0% { width: 0%; }
  25% { width: 25%; }
  50% { width: 50%; }
  75% { width: 75%; }
  100% { width: 100%; }
}

.creative-preview__progress-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

/* Variation grid */
.creative-preview__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 16px;
}

.creative-preview__variation {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 150ms ease-out;
}

.creative-preview__variation:hover {
  border-color: var(--alpha-light-200);
}

.creative-preview__variation--selected {
  border-color: var(--alpha-brand-950);
}

.creative-preview__image {
  width: 100%;
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  position: relative;
}

.creative-preview__overlay-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  text-align: center;
  line-height: 20px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  position: relative;
  z-index: 1;
  letter-spacing: -0.15px;
}

.creative-preview__check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--alpha-brand-950);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: all 150ms ease-out;
  z-index: 2;
}

.creative-preview__variation--selected .creative-preview__check {
  opacity: 1;
  transform: scale(1);
}

.creative-preview__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  background: rgba(26,26,26,0.03);
}

.creative-preview__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  letter-spacing: -0.15px;
}

.creative-preview__format {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

/* Selection status */
.creative-preview__selection {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
  letter-spacing: -0.15px;
}

.creative-preview__selection strong {
  font-weight: 600;
  color: var(--alpha-light-900);
}

/* A/B test suggestion */
.creative-preview__ab-note {
  margin: 0 16px 12px;
  padding: 10px 12px;
  background: var(--alpha-brand-50);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
  letter-spacing: -0.15px;
}

.creative-preview__ab-note strong {
  font-weight: 600;
  color: var(--alpha-brand-950);
}

/* Actions */
.creative-preview__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--alpha-light-50);
}

/* ========================================================
   9. VIDEO DIAGNOSTIC — Thinking + Video Response
   ======================================================== */

.video-diagnostic__thinking {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 24px;
  text-align: center;
}

.video-diagnostic__thinking-icon {
  width: 40px;
  height: 40px;
  color: var(--alpha-light-500);
  animation: videoDiagPulse 2s ease-in-out infinite;
}

.video-diagnostic__thinking-icon svg {
  width: 100%;
  height: 100%;
}

@keyframes videoDiagPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

.video-diagnostic__thinking-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
}

.video-diagnostic__steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  max-width: 280px;
}

.video-diagnostic__step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

.video-diagnostic__step-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--alpha-light-300);
  flex-shrink: 0;
}

.video-diagnostic__step:nth-child(1) {
  animation: stepActivate 400ms ease-out 0.5s forwards;
}

.video-diagnostic__step:nth-child(2) {
  animation: stepActivate 400ms ease-out 3s forwards;
}

.video-diagnostic__step:nth-child(3) {
  animation: stepActivate 400ms ease-out 5.5s forwards;
}

.video-diagnostic__step:nth-child(1) .video-diagnostic__step-dot {
  animation: stepDotActivate 400ms ease-out 0.5s forwards;
}

.video-diagnostic__step:nth-child(2) .video-diagnostic__step-dot {
  animation: stepDotActivate 400ms ease-out 3s forwards;
}

.video-diagnostic__step:nth-child(3) .video-diagnostic__step-dot {
  animation: stepDotActivate 400ms ease-out 5.5s forwards;
}

@keyframes stepActivate {
  to { color: var(--alpha-light-900); }
}

@keyframes stepDotActivate {
  to { background: var(--alpha-brand-950); }
}

.video-diagnostic__progress {
  width: 100%;
  height: 4px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.video-diagnostic__progress-fill {
  height: 100%;
  background: var(--alpha-brand-950);
  border-radius: 999px;
  animation: videoDiagProgress 8s ease-in-out forwards;
}

@keyframes videoDiagProgress {
  0% { width: 0%; }
  30% { width: 35%; }
  60% { width: 65%; }
  85% { width: 88%; }
  100% { width: 100%; }
}

/* Video Response */
.video-diagnostic__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--alpha-light-25);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
}

.video-diagnostic__badge svg {
  width: 14px;
  height: 14px;
}

.video-diagnostic__wrap {
  position: relative;
  padding: 0;
  line-height: 0;
  border-radius: 16px;
  overflow: hidden;
  max-width: 520px;
}

.video-diagnostic__player {
  width: 100%;
  display: block;
  border-radius: 16px;
  outline: none;
  background: #000;
  cursor: pointer;
}

/* Volume control — visible on hover */
.video-diagnostic__volume {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.video-diagnostic__wrap:hover .video-diagnostic__volume {
  opacity: 1;
}

.video-diagnostic__volume-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 4px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: background 150ms ease-out;
}

.video-diagnostic__volume-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.video-diagnostic__volume-btn svg {
  width: 18px;
  height: 18px;
}

.video-diagnostic__volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 72px;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

.video-diagnostic__volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: var(--white);
  border-radius: 999px;
  border: none;
  cursor: pointer;
}

.video-diagnostic__volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--white);
  border-radius: 999px;
  border: none;
  cursor: pointer;
}

/* ========================================================
   BUSINESS COMPONENTS — Shared Connection Sequence
   ======================================================== */

.connect-seq {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.connect-seq__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
  opacity: 0;
  animation: connectItemIn 400ms ease-out forwards;
}

.connect-seq__item:nth-child(1) { animation-delay: 0ms; }
.connect-seq__item:nth-child(2) { animation-delay: 800ms; }
.connect-seq__item:nth-child(3) { animation-delay: 1600ms; }
.connect-seq__item:nth-child(4) { animation-delay: 2200ms; }

@keyframes connectItemIn {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}

.connect-seq__platform {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  flex-shrink: 0;
}

.connect-seq__check {
  width: 14px;
  height: 14px;
  color: var(--green-600);
  flex-shrink: 0;
  margin-left: auto;
}

.connect-seq__pulse {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-left: auto;
  flex-shrink: 0;
  animation: connectPulseAnim 1.2s ease-in-out infinite;
}

@keyframes connectPulseAnim {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

.connect-seq__synced {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  border-top: 1px solid var(--alpha-light-50);
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  opacity: 0;
  animation: connectItemIn 400ms ease-out forwards;
  animation-delay: 2400ms;
}

.connect-seq__synced-logos {
  display: flex;
  gap: 4px;
}

.connect-seq__synced-logo {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
}

.connect-seq__synced-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  margin-left: auto;
}

/* Shared source pill for platform badges */
.source-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: -0.15px;
}

.source-pill--monday { background: rgba(255, 61, 87, 0.08); color: rgba(255, 61, 87, 0.85); }
.source-pill--clickup { background: rgba(124, 58, 237, 0.08); color: rgba(124, 58, 237, 0.85); }
.source-pill--asana { background: rgba(246, 114, 80, 0.08); color: rgba(246, 114, 80, 0.85); }
.source-pill--quickbooks { background: color-mix(in srgb, var(--color-primary) 8%, transparent); color: var(--color-primary); }
.source-pill--gmail { background: rgba(220, 38, 38, 0.08); color: rgba(220, 38, 38, 0.85); }
.source-pill--calendar { background: var(--alpha-light-50); color: var(--alpha-light-900); }

/* Shared status pill */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}

.status-pill--on-track { background: color-mix(in srgb, var(--color-primary) 8%, transparent); color: var(--green-600); }
.status-pill--at-risk { background: rgba(245, 158, 11, 0.08); color: var(--amber-500); }
.status-pill--overdue { background: rgba(220, 38, 38, 0.08); color: var(--red-600); }
.status-pill--in-progress { background: rgba(59, 130, 246, 0.08); color: #3b82f6; }
.status-pill--pending { background: rgba(26, 26, 26, 0.04); color: rgba(26, 26, 26, 0.55); }

/* Shared action button styles (reused across business components) */
.biz-btn {
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 150ms ease-out;
  border: none;
  line-height: 20px;
  letter-spacing: -0.15px;
}

.biz-btn--primary {
  background: linear-gradient(to bottom, var(--neutral-500), var(--neutral-700));
  color: var(--alpha-dark-900);
  position: relative;
  overflow: hidden;
}

.biz-btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--white);
  border-radius: inherit;
  filter: blur(0.2px);
  pointer-events: none;
}

.biz-btn--primary:hover {
  background: linear-gradient(to bottom, #808080, #505050);
}

.biz-btn--secondary {
  background: var(--alpha-light-50);
  color: var(--alpha-light-900);
}

.biz-btn--secondary:hover {
  background: var(--alpha-light-100);
}

.biz-btn--ghost {
  background: transparent;
  color: var(--alpha-light-600);
}

.biz-btn--ghost:hover {
  background: var(--alpha-light-50);
}

.biz-btn:focus-visible {
  outline: 2px solid var(--alpha-brand-950);
  outline-offset: 2px;
}

/* Shared AI insight paragraph */
.ai-insight {
  padding: 12px 16px;
  border-top: 1px solid var(--alpha-light-50);
  font-size: 14px;
  font-weight: 400;
  color: var(--alpha-light-900);
  line-height: 24px;
}

.ai-insight strong {
  font-weight: 600;
}

/* ========================================================
   COMPONENT 1: Project Management Hub
   ======================================================== */

.pm-hub__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--alpha-light-50);
  margin: 0 16px;
  border-radius: 12px;
  overflow: hidden;
}

.pm-hub__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  background: var(--white);
}

.pm-hub__stat-number {
  font-size: 20px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 1;
}

.pm-hub__stat-number--warning {
  color: var(--red-600);
}

.pm-hub__stat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 16px;
  text-align: center;
}

.pm-hub__projects {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px 16px;
}

.pm-hub__projects-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
  padding-bottom: 8px;
}

.pm-hub__project {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--alpha-light-50);
}

.pm-hub__project:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pm-hub__project-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-hub__project-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.pm-hub__project-assignee {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  white-space: nowrap;
}

.pm-hub__project-due {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  white-space: nowrap;
}

/* Team Workload */
.pm-hub__workload {
  padding: 12px 16px;
  border-top: 1px solid var(--alpha-light-50);
}

.pm-hub__workload-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
  padding-bottom: 8px;
}

.pm-hub__workload-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pm-hub__workload-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-hub__workload-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  width: 72px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-hub__workload-bar {
  flex: 1;
  height: 6px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.pm-hub__workload-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 600ms ease-out;
}

.pm-hub__workload-bar-fill--normal { background: color-mix(in srgb, var(--color-primary) 40%, transparent); }
.pm-hub__workload-bar-fill--heavy { background: rgba(245, 158, 11, 0.6); }
.pm-hub__workload-bar-fill--overloaded { background: rgba(220, 38, 38, 0.5); }
.pm-hub__workload-bar-fill--light { background: rgba(26, 26, 26, 0.15); }

.pm-hub__workload-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-500);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* ========================================================
   COMPONENT 2: Financial Overview
   ======================================================== */

.fin__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--alpha-light-50);
  margin: 0 16px;
  border-radius: 12px;
  overflow: hidden;
}

.fin__stat-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 8px;
  background: var(--white);
  align-items: center;
}

.fin__stat-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 1.2;
}

.fin__stat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 16px;
  text-align: center;
}

.fin__stat-trend {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.fin__stat-trend--up { color: var(--green-600); }
.fin__stat-trend--down { color: var(--red-600); }

.fin__stat-trend svg {
  width: 12px;
  height: 12px;
}

/* Revenue vs Expenses Chart */
.fin__chart {
  padding: 16px;
  border-top: 1px solid var(--alpha-light-50);
}

.fin__chart-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
  padding-bottom: 12px;
}

.fin__chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 80px;
}

.fin__chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}

.fin__chart-bar-group {
  display: flex;
  gap: 2px;
  width: 100%;
  align-items: flex-end;
}

.fin__chart-bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  transition: height 600ms ease-out;
  min-height: 2px;
}

.fin__chart-bar--revenue { background: color-mix(in srgb, var(--color-primary) 50%, transparent); }
.fin__chart-bar--expense { background: rgba(26, 26, 26, 0.2); }

.fin__chart-month {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  line-height: 16px;
}

.fin__chart-legend {
  display: flex;
  gap: 16px;
  padding-top: 8px;
  justify-content: flex-end;
}

.fin__chart-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fin__chart-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
}

.fin__chart-legend-dot--revenue { background: color-mix(in srgb, var(--color-primary) 50%, transparent); }
.fin__chart-legend-dot--expense { background: rgba(26, 26, 26, 0.2); }

.fin__chart-legend-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

/* AR Aging */
.fin__ar {
  padding: 12px 16px;
  border-top: 1px solid var(--alpha-light-50);
}

.fin__ar-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
  padding-bottom: 8px;
}

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

.fin__ar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}

.fin__ar-row--total {
  border-top: 1px solid var(--alpha-light-50);
  padding-top: 8px;
  margin-top: 4px;
}

.fin__ar-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
}

.fin__ar-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.fin__ar-value--warning {
  color: var(--red-600);
}

.fin__ar-row--total .fin__ar-label {
  font-weight: 600;
  color: var(--alpha-light-900);
}

/* Transactions */
.fin__transactions {
  padding: 12px 16px;
  border-top: 1px solid var(--alpha-light-50);
}

.fin__transactions-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
  padding-bottom: 8px;
}

.fin__transaction {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--alpha-light-50);
}

.fin__transaction:last-child {
  border-bottom: none;
}

.fin__transaction-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fin__transaction-desc {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fin__transaction-meta {
  display: flex;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

.fin__transaction-amount {
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  margin-left: 12px;
}

.fin__transaction-amount--positive { color: var(--green-600); }
.fin__transaction-amount--negative { color: var(--alpha-light-900); }

/* ========================================================
   COMPONENT 3: Unified Data Chat
   ======================================================== */

.unified__thinking {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.unified__thinking-header {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
  padding-bottom: 4px;
}

.unified__thinking-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  opacity: 0;
  animation: connectItemIn 400ms ease-out forwards;
}

.unified__thinking-item:nth-child(2) { animation-delay: 600ms; }
.unified__thinking-item:nth-child(3) { animation-delay: 1200ms; }
.unified__thinking-item:nth-child(4) { animation-delay: 1800ms; }
.unified__thinking-item:nth-child(5) { animation-delay: 2400ms; }

.unified__thinking-check {
  width: 14px;
  height: 14px;
  color: var(--green-600);
  flex-shrink: 0;
}

/* Client Profitability Table */
.unified__table {
  padding: 12px 16px;
}

.unified__table-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
  padding-bottom: 8px;
}

.unified__table-header {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr 0.7fr 0.7fr 0.7fr;
  gap: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--alpha-light-100);
}

.unified__table-header span {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-400);
  letter-spacing: -0.15px;
}

.unified__table-row {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr 0.7fr 0.7fr 0.7fr;
  gap: 4px;
  padding: 8px 0;
  border-bottom: 1px solid var(--alpha-light-50);
  align-items: center;
}

.unified__table-row:last-child {
  border-bottom: none;
}

.unified__table-cell {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
}

.unified__table-cell--client {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unified__table-cell--muted {
  color: var(--alpha-light-500);
}

.unified__table-cell--highlight {
  font-weight: 600;
  color: var(--alpha-brand-950);
}

/* Churn Risk Flags */
.unified__churn {
  padding: 12px 16px;
  border-top: 1px solid var(--alpha-light-50);
}

.unified__churn-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
  padding-bottom: 8px;
}

.unified__churn-flag {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(245, 158, 11, 0.04);
  border: 1px solid rgba(245, 158, 11, 0.12);
  border-radius: 8px;
  margin-bottom: 8px;
}

.unified__churn-flag:last-child {
  margin-bottom: 0;
}

.unified__churn-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--amber-500);
  flex-shrink: 0;
  margin-top: 8px;
}

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

.unified__churn-client {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.unified__churn-detail {
  font-size: 12px;
  font-weight: 400;
  color: var(--alpha-light-600);
  line-height: 20px;
}

.unified__churn-sources {
  display: flex;
  gap: 4px;
  padding-top: 2px;
}

.unified__recommendation {
  padding: 12px 16px;
  border-top: 1px solid var(--alpha-light-50);
  font-size: 14px;
  font-weight: 400;
  color: var(--alpha-light-900);
  line-height: 24px;
}

.unified__recommendation strong {
  font-weight: 600;
}

.unified__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--alpha-light-50);
}

/* ========================================================
   COMPONENT 4: Accountability Watchdog
   ======================================================== */

.watchdog-card {
  background: var(--white);
  border: 1px solid var(--alpha-light-100);
  border-left: 3px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  width: 100%;
  max-width: 520px;
  animation: cardFadeIn 300ms ease-out;
}

.watchdog__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--alpha-light-50);
}

.watchdog__header-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.watchdog__header-icon svg {
  width: 18px;
  height: 18px;
  color: var(--alpha-brand-950);
}

.watchdog__header-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.watchdog__header-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
}

.watchdog__header-time {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

.watchdog__alerts {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.watchdog__alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--alpha-light-50);
  transition: background-color 150ms ease-out;
}

.watchdog__alert:last-child {
  border-bottom: none;
}

.watchdog__alert:hover {
  background: var(--alpha-light-25);
}

.watchdog__severity-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 6px;
}

.watchdog__severity-dot--urgent { background: var(--red-600); }
.watchdog__severity-dot--warning { background: var(--amber-500); }
.watchdog__severity-dot--info { background: var(--alpha-light-400); }

.watchdog__alert-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.watchdog__alert-text {
  font-size: 14px;
  font-weight: 400;
  color: var(--alpha-light-900);
  line-height: 24px;
}

.watchdog__alert-sources {
  display: flex;
  gap: 4px;
}

.watchdog__alert-action {
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-brand-950);
  background: var(--alpha-brand-50);
  border: 1px solid color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 150ms ease-out;
  width: fit-content;
  line-height: 16px;
}

.watchdog__alert-action:hover {
  background: var(--alpha-brand-100);
}

.watchdog__alert-action:focus-visible {
  outline: 2px solid var(--alpha-brand-950);
  outline-offset: 2px;
}

.watchdog__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--alpha-light-50);
  background: var(--alpha-brand-50);
}

.watchdog__footer-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
}

.watchdog__footer-text strong {
  font-weight: 600;
  color: var(--alpha-light-900);
}

.watchdog__footer-actions {
  display: flex;
  gap: 8px;
}

.biz-btn--sm {
  font-size: 12px;
  padding: 4px 10px;
}

/* Transaction counting animation */
.fin__counting {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
}

.fin__counting-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
}

.fin__counting-number {
  font-size: 20px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

/* Live badge for financial */
.fin__live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--green-600);
  line-height: 16px;
}

.fin__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--green-600);
  animation: fbAdsPulse 2s ease-in-out infinite;
}

/* ========================================================
   MINDSET COACH COMPONENTS — Alex Rivera
   ======================================================== */

/* --- Shared Thinking State --- */
.mindset__thinking {
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.mindset__thinking-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scanPulse 1.5s ease-in-out infinite;
}

.mindset__thinking-icon svg {
  width: 24px;
  height: 24px;
  color: var(--alpha-brand-950);
}

.mindset__thinking-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
}

.mindset__thinking-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.mindset__thinking-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  animation: stepFadeIn 600ms ease-out both;
}

.mindset__thinking-step:nth-child(1) { animation-delay: 0ms; }
.mindset__thinking-step:nth-child(2) { animation-delay: 400ms; }
.mindset__thinking-step:nth-child(3) { animation-delay: 800ms; }
.mindset__thinking-step:nth-child(4) { animation-delay: 1200ms; }

@keyframes stepFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.mindset__thinking-step .connect-seq__check {
  width: 14px;
  height: 14px;
  color: var(--green-600);
  flex-shrink: 0;
  margin-left: 0;
}

.mindset__progress {
  width: 120px;
  height: 4px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.mindset__progress-fill {
  height: 100%;
  width: 0%;
  background: var(--green-600);
  border-radius: 999px;
  animation: scanBarFill 2.8s ease-out forwards;
}

/* ========================================================
   Personality Insights Dashboard
   ======================================================== */

.personality__types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--alpha-light-50);
  margin: 0;
}

.personality__type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px;
  background: var(--white);
  text-align: center;
}

.personality__type-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-400);
  letter-spacing: -0.15px;
}

.personality__type-badge {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  margin: 4px 0;
}

.personality__type-badge--disc {
  background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, transparent));
}

.personality__type-badge--enneagram {
  background: linear-gradient(to bottom, var(--neutral-500), var(--neutral-700));
}

.personality__type-badge--attachment {
  background: linear-gradient(135deg, #d97706, var(--amber-500));
}

.personality__type-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.personality__type-desc {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 16px;
}

/* Coaching implications */
.personality__coaching {
  padding: 16px;
}

.personality__coaching-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  margin-bottom: 12px;
}

.personality__coaching-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.personality__coaching-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.personality__coaching-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.personality__coaching-icon svg {
  width: 14px;
  height: 14px;
}

.personality__coaching-icon--strength {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--green-600);
}

.personality__coaching-icon--growth {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.personality__coaching-icon--approach {
  background: var(--alpha-light-50);
  color: var(--alpha-light-900);
}

.personality__coaching-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  margin-bottom: 2px;
}

.personality__coaching-text {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
}

/* Traits panel */
.personality__traits-section {
  padding: 16px;
}

.personality__traits-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  margin-bottom: 12px;
}

.personality__trait {
  margin-bottom: 10px;
}

.personality__trait:last-child {
  margin-bottom: 0;
}

.personality__trait-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.personality__trait-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-900);
}

.personality__trait-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-600);
}

.personality__trait-bar {
  height: 6px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.personality__trait-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 600ms ease-out;
}

.personality__traits-note {
  padding: 12px 16px;
  margin: 0 16px 16px;
  background: var(--alpha-brand-50);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
}

.personality__traits-note strong {
  color: var(--alpha-light-900);
}

/* ========================================================
   Session History & Client Journey
   ======================================================== */

.session__stats {
  display: flex;
  gap: 1px;
  background: var(--alpha-light-50);
}

.session__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  background: var(--white);
}

.session__stat-number {
  font-size: 20px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 1;
}

.session__stat-number--highlight {
  color: var(--green-600);
}

.session__stat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 16px;
  text-align: center;
}

/* Emotion chart */
.session__chart {
  padding: 16px;
  position: relative;
}

.session__chart-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  margin-bottom: 8px;
}

.session__chart-labels {
  position: absolute;
  right: 16px;
  top: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 80px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

.session__chart-svg {
  width: 100%;
  height: auto;
  display: block;
}

.session__chart-x-labels {
  display: flex;
  justify-content: space-between;
  padding: 4px 10px 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

/* Session timeline */
.session__timeline {
  padding: 0 16px 16px;
}

.session__timeline-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  margin-bottom: 12px;
}

.session__timeline-item {
  display: flex;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--alpha-light-50);
  position: relative;
}

.session__timeline-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.session__timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--alpha-light-200);
  flex-shrink: 0;
  margin-top: 4px;
}

.session__timeline-dot--breakthrough {
  background: var(--green-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.session__timeline-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.session__timeline-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.session__timeline-date {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

.session__mood-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
}

.session__mood-pill--positive {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--alpha-brand-950);
}

.session__mood-pill--neutral {
  background: var(--alpha-light-50);
  color: var(--alpha-light-600);
}

.session__mood-pill--negative {
  background: rgba(245, 158, 11, 0.1);
  color: var(--amber-500);
}

.session__timeline-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.session__timeline-summary {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 16px;
}

/* ========================================================
   Difficult Conversation Guide
   ======================================================== */

.convo__context {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  margin: 0;
  background: rgba(245, 158, 11, 0.06);
  border-bottom: 1px solid var(--alpha-light-50);
}

.convo__context-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--amber-500);
  margin-top: 1px;
}

.convo__context-icon svg {
  width: 16px;
  height: 16px;
}

.convo__context-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
}

.convo__context-text strong {
  color: var(--alpha-light-900);
}

/* Phase accordion */
.convo__phases {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.convo__phase {
  border: 1px solid var(--alpha-light-50);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 150ms ease-out;
}

.convo__phase--active {
  border-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.convo__phase-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color 100ms ease-out;
}

.convo__phase-header:hover {
  background: var(--alpha-light-25);
}

.convo__phase-num {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--alpha-light-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-600);
  flex-shrink: 0;
}

.convo__phase--active .convo__phase-num {
  background: var(--alpha-brand-100);
  color: var(--alpha-brand-950);
}

.convo__phase-title {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.convo__phase-subtitle {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
}

.convo__phase-body {
  display: none;
  padding: 0 12px 12px;
  flex-direction: column;
  gap: 10px;
}

.convo__phase--active .convo__phase-body {
  display: flex;
}

.convo__script {
  background: var(--alpha-brand-50);
  border-radius: 12px;
  padding: 10px 12px;
}

.convo__script-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-brand-950);
  margin-bottom: 4px;
}

.convo__script-text {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-900);
  line-height: 20px;
  font-style: italic;
}

.convo__reframe {
  background: var(--alpha-light-25);
  border-radius: 12px;
  padding: 10px 12px;
}

.convo__reframe-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-600);
  margin-bottom: 4px;
}

.convo__reframe-text {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
}

/* Pre-conversation checkin */
.convo__checkin {
  padding: 12px 16px;
  border-top: 1px solid var(--alpha-light-50);
}

.convo__checkin-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  margin-bottom: 10px;
}

.convo__checkin-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.convo__checkin-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
}

.convo__checkin-box {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--alpha-light-200);
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--green-600);
  margin-top: 1px;
}

/* ========================================================
   Burnout Assessment & Recovery
   ======================================================== */

.burnout__assessment {
  padding: 16px;
}

.burnout__score-section {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.burnout__score-ring {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.burnout__score-ring svg {
  width: 80px;
  height: 80px;
}

.burnout__score-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.burnout__score-value {
  font-size: 20px;
  font-weight: 600;
  color: #f59e0b;
}

.burnout__score-max {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

.burnout__score-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.burnout__score-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.burnout__score-desc {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
}

/* Burnout dimensions */
.burnout__dimensions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.burnout__dimension {
  display: flex;
  align-items: center;
  gap: 8px;
}

.burnout__dimension-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  width: 140px;
  flex-shrink: 0;
}

.burnout__dimension-bar {
  flex: 1;
  height: 6px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.burnout__dimension-fill {
  height: 100%;
  border-radius: 999px;
}

.burnout__dimension-fill--high {
  background: #dc2626;
}

.burnout__dimension-fill--mid {
  background: #f59e0b;
}

.burnout__dimension-fill--low {
  background: var(--green-600);
}

.burnout__dimension-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-500);
  width: 56px;
  text-align: right;
}

/* Energy chart */
.burnout__energy {
  padding: 0 16px 16px;
}

.burnout__energy-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  margin-bottom: 10px;
}

.burnout__energy-chart {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  height: 64px;
  padding-bottom: 16px;
}

.burnout__energy-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.burnout__energy-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  min-height: 4px;
}

.burnout__energy-bar--low {
  background: #dc2626;
}

.burnout__energy-bar--mid {
  background: #f59e0b;
}

.burnout__energy-bar--high {
  background: var(--green-600);
}

.burnout__energy-day {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

.burnout__energy-avg {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  padding-top: 8px;
  border-top: 1px solid var(--alpha-light-50);
}

.burnout__energy-avg strong {
  color: var(--alpha-light-900);
}

/* Recovery protocol */
.burnout__recovery {
  padding: 0 16px 16px;
}

.burnout__recovery-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  margin-bottom: 12px;
}

.burnout__phases {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.burnout__phase {
  border: 1px solid var(--alpha-light-50);
  border-radius: 12px;
  overflow: hidden;
}

.burnout__phase-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--alpha-light-25);
}

.burnout__phase-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-brand-950);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  padding: 2px 8px;
  border-radius: 999px;
}

.burnout__phase-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.burnout__phase-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
}

.burnout__phase-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.burnout__phase-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--alpha-light-300);
  margin-top: 1px;
}

.burnout__phase-item span {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
}

/* ========================================================
   MIKE AI — COPYWRITING COMPONENTS
   ======================================================== */

/* --- Shared Thinking State --- */
.mike__thinking {
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.mike__thinking-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scanPulse 1.5s ease-in-out infinite;
}

.mike__thinking-icon svg {
  width: 24px;
  height: 24px;
  color: #7C3AED;
}

.mike__thinking-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
}

.mike__thinking-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.mike__thinking-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  animation: stepFadeIn 600ms ease-out both;
}

.mike__thinking-step:nth-child(1) { animation-delay: 0ms; }
.mike__thinking-step:nth-child(2) { animation-delay: 400ms; }
.mike__thinking-step:nth-child(3) { animation-delay: 800ms; }
.mike__thinking-step:nth-child(4) { animation-delay: 1200ms; }
.mike__thinking-step:nth-child(5) { animation-delay: 1600ms; }

.mike__thinking-step .connect-seq__check {
  width: 14px;
  height: 14px;
  color: #7C3AED;
  flex-shrink: 0;
  margin-left: 0;
}

.mike__progress {
  width: 120px;
  height: 4px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.mike__progress-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #8B5CF6, #6D28D9);
  border-radius: 999px;
  animation: scanBarFill 3s ease-out forwards;
}

.mike__progress-fill--long {
  animation: scanBarFill 18.5s ease-in-out forwards;
}

/* Slower step stagger for 20s thinking states */
.mike__thinking--long .mike__thinking-step:nth-child(1) { animation-delay: 0ms; }
.mike__thinking--long .mike__thinking-step:nth-child(2) { animation-delay: 3000ms; }
.mike__thinking--long .mike__thinking-step:nth-child(3) { animation-delay: 7000ms; }
.mike__thinking--long .mike__thinking-step:nth-child(4) { animation-delay: 11000ms; }
.mike__thinking--long .mike__thinking-step:nth-child(5) { animation-delay: 15000ms; }

/* ========================================================
   COMPONENT 1: WEBINAR SCRIPT GENERATOR
   ======================================================== */

/* Section accordion */
.webinar__sections {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.webinar__section {
  border: 1px solid var(--alpha-light-50);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 150ms ease-out;
}

.webinar__section--active {
  border-color: rgba(139, 92, 246, 0.12);
}

.webinar__section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color 100ms ease-out;
}

.webinar__section-header:hover {
  background: var(--alpha-light-25);
}

.webinar__section-num {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--alpha-light-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-600);
  flex-shrink: 0;
}

.webinar__section--active .webinar__section-num {
  background: rgba(139, 92, 246, 0.10);
  color: #7C3AED;
}

.webinar__section-title {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.webinar__section-time {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
}

.webinar__section-body {
  display: none;
  padding: 0 12px 12px;
  flex-direction: column;
  gap: 10px;
}

.webinar__section--active .webinar__section-body {
  display: flex;
}

.webinar__section-direction {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
  margin: 0;
}

/* Key line — left border accent */
.webinar__key-line {
  border-left: 3px solid #7C3AED;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-900);
  line-height: 20px;
  font-style: italic;
  background: rgba(139, 92, 246, 0.04);
  border-radius: 0 8px 8px 0;
}

.webinar__section-transition {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 20px;
  margin: 0;
}

.webinar__section-transition strong {
  font-weight: 600;
  color: var(--alpha-light-600);
}

/* Offer stack */
.webinar__offer-stack {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--alpha-light-50);
  border-radius: 8px;
  overflow: hidden;
}

.webinar__offer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
}

.webinar__offer-row:nth-child(even) {
  background: var(--alpha-light-25);
}

.webinar__offer-item {
  flex: 1;
}

.webinar__offer-price {
  font-weight: 600;
  color: var(--alpha-light-500);
  white-space: nowrap;
  margin-left: 12px;
}

.webinar__offer-total {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  border-top: 1px solid var(--alpha-light-100);
  line-height: 20px;
}

.webinar__offer-actual {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
  color: #7C3AED;
  background: rgba(139, 92, 246, 0.06);
  line-height: 20px;
}

/* Objection handling */
.webinar__objections {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.webinar__objection {
  background: var(--alpha-light-25);
  border-radius: 8px;
  padding: 10px 12px;
}

.webinar__objection-q {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  margin-bottom: 4px;
  font-style: italic;
}

.webinar__objection-a {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
}

/* Framework note */
.webinar__framework-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--alpha-light-50);
}

.webinar__framework-note svg {
  width: 16px;
  height: 16px;
  color: var(--alpha-light-400);
  flex-shrink: 0;
  margin-top: 2px;
}

.webinar__framework-note span {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 20px;
}

.webinar__framework-note strong {
  font-weight: 600;
  color: var(--alpha-light-700);
}

/* Full script view */
.webinar__full-script {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.webinar__full-note {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  text-align: center;
}

.webinar__full-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.webinar__full-para {
  font-size: 13px;
  font-weight: 400;
  color: var(--alpha-light-700);
  line-height: 22px;
  margin: 0;
}

.webinar__full-continue {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  text-align: center;
  font-style: italic;
  margin: 0;
}

/* ========================================================
   COMPONENT 2: FUNNEL COPY + AD CAMPAIGN BUILDER
   ======================================================== */

.funnel__page-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.funnel__headline {
  font-size: 20px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 28px;
  letter-spacing: -0.3px;
}

.funnel__subheadline {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 22px;
}

.funnel__body-text {
  font-size: 13px;
  font-weight: 400;
  color: var(--alpha-light-700);
  line-height: 22px;
  margin: 0;
}

.funnel__body-text + .funnel__body-text {
  margin-top: 8px;
}

/* Pain points */
.funnel__pain-points {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.funnel__pain-point {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--alpha-light-700);
  line-height: 20px;
}

.funnel__pain-x {
  color: #ef4444;
  font-weight: 600;
  flex-shrink: 0;
}

/* Guarantee */
.funnel__guarantee {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: rgba(139, 92, 246, 0.04);
  border: 1px solid rgba(139, 92, 246, 0.10);
  border-radius: 12px;
}

.funnel__guarantee svg {
  width: 24px;
  height: 24px;
  color: #7C3AED;
  flex-shrink: 0;
  margin-top: 2px;
}

.funnel__guarantee strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--alpha-light-900);
  margin-bottom: 4px;
}

.funnel__guarantee span {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
}

/* FAQ accordion */
.funnel__faq {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.funnel__faq-item {
  border: 1px solid var(--alpha-light-50);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 150ms ease-out;
}

.funnel__faq-item--active {
  border-color: rgba(139, 92, 246, 0.10);
}

.funnel__faq-q {
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--alpha-light-900);
  cursor: pointer;
  transition: background-color 100ms ease-out;
}

.funnel__faq-q:hover {
  background: var(--alpha-light-25);
}

.funnel__faq-a {
  display: none;
  padding: 0 12px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
}

.funnel__faq-item--active .funnel__faq-a {
  display: block;
}

/* Ad cards */
.funnel__ads-grid {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.funnel__ad-card {
  border: 1px solid var(--alpha-light-50);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Platform headers */
.funnel__platform-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--alpha-light-50);
}

.funnel__platform-header--fb {
  border-top: 1px solid var(--alpha-light-50);
}

.funnel__platform-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.funnel__platform-icon svg {
  width: 18px;
  height: 18px;
}

.funnel__platform-icon--cf {
  background: rgba(139, 92, 246, 0.10);
  color: #7C3AED;
}

.funnel__platform-icon--fb {
  background: rgba(37, 99, 235, 0.10);
  color: #2563eb;
}

.funnel__platform-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--alpha-light-900);
  display: flex;
  align-items: center;
  gap: 6px;
}

.funnel__platform-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--alpha-light-500);
  background: var(--alpha-light-25);
  padding: 1px 6px;
  border-radius: 999px;
}

.funnel__platform-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  margin-top: 1px;
}

.funnel__platform-status .connect-seq__check {
  width: 12px;
  height: 12px;
  color: #22c55e;
  flex-shrink: 0;
}

.funnel__ad-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.funnel__ad-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

/* Angle pills */
.funnel__angle-pill {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
}

.funnel__angle-pill--pain {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
}

.funnel__angle-pill--curiosity {
  background: rgba(245, 158, 11, 0.08);
  color: #d97706;
}

.funnel__angle-pill--proof {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--alpha-brand-950);
}

.funnel__angle-pill--fomo {
  background: rgba(139, 92, 246, 0.08);
  color: #7C3AED;
}

.funnel__angle-pill--authority {
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
}

.funnel__angle-pill--benefit {
  background: rgba(6, 182, 212, 0.08);
  color: #0891b2;
}

.funnel__angle-pill--challenge {
  background: rgba(249, 115, 22, 0.08);
  color: #ea580c;
}

.funnel__angle-pill--story {
  background: rgba(168, 85, 247, 0.08);
  color: #9333ea;
}

.funnel__ad-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.funnel__roas-pill {
  font-size: 11px;
  font-weight: 600;
  color: var(--alpha-light-500);
  white-space: nowrap;
}

/* ========================================================
   COMPONENT 3: EMAIL WELCOME SEQUENCE
   ======================================================== */

/* Timeline */
.email-seq__timeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  position: relative;
}

.email-seq__timeline::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 40px;
  right: 40px;
  height: 2px;
  background: var(--alpha-light-50);
  transform: translateY(-4px);
}

.email-seq__timeline-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.email-seq__timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--alpha-light-100);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--alpha-light-50);
  transition: all 200ms ease-out;
}

.email-seq__timeline-point--active .email-seq__timeline-dot {
  background: #7C3AED;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.20);
}

.email-seq__timeline-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--alpha-light-400);
}

.email-seq__timeline-point--active .email-seq__timeline-label {
  color: #7C3AED;
}

/* Email accordion */
.email-seq__emails {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.email-seq__email {
  border: 1px solid var(--alpha-light-50);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 150ms ease-out;
}

.email-seq__email--active {
  border-color: rgba(139, 92, 246, 0.12);
}

.email-seq__email-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color 100ms ease-out;
}

.email-seq__email-header:hover {
  background: var(--alpha-light-25);
}

.email-seq__email-num {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--alpha-light-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-600);
  flex-shrink: 0;
}

.email-seq__email--active .email-seq__email-num {
  background: rgba(139, 92, 246, 0.10);
  color: #7C3AED;
}

.email-seq__email-title {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.email-seq__email-meta {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
}

.email-seq__email-body {
  display: none;
  padding: 0 12px 12px;
  flex-direction: column;
  gap: 10px;
}

.email-seq__email--active .email-seq__email-body {
  display: flex;
}

.email-seq__subject-line,
.email-seq__preview-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.email-seq__subject-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.email-seq__preview-value {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  font-style: italic;
}

.email-seq__email-content {
  background: var(--alpha-light-25);
  border-radius: 8px;
  padding: 12px;
}

.email-seq__email-content p {
  font-size: 12px;
  font-weight: 400;
  color: var(--alpha-light-700);
  line-height: 20px;
  margin: 0 0 8px 0;
}

.email-seq__email-content p:last-child {
  margin-bottom: 0;
}

.email-seq__email-content strong {
  font-weight: 600;
  color: var(--alpha-light-900);
}

.email-seq__email-content ul {
  margin: 4px 0 8px;
  padding-left: 16px;
}

.email-seq__email-content li {
  font-size: 12px;
  font-weight: 400;
  color: var(--alpha-light-700);
  line-height: 20px;
}

/* Stats row */
.email-seq__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--alpha-light-50);
  margin: 0 16px;
  border-radius: 12px;
  overflow: hidden;
}

.email-seq__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
  background: var(--white);
}

.email-seq__stat-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--alpha-light-900);
}

.email-seq__stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

/* ========================================================
   COMPONENT 4: AD HOOK GENERATOR
   ======================================================== */

.hook-gen__filters {
  padding: 12px 16px;
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--alpha-light-50);
  overflow-x: auto;
}

.hook-gen__cards {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hook-gen__card {
  border: 1px solid var(--alpha-light-50);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 150ms ease-out;
}

.hook-gen__card:hover {
  border-color: var(--alpha-light-100);
}

.hook-gen__card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hook-gen__num {
  font-size: 20px;
  font-weight: 600;
  color: var(--alpha-light-200);
  line-height: 1;
}

.hook-gen__text {
  font-size: 16px;
  font-weight: 500;
  color: var(--alpha-light-900);
  line-height: 24px;
  letter-spacing: -0.2px;
}

.hook-gen__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hook-gen__use {
  font-size: 11px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

.hook-gen__perf {
  font-size: 11px;
  font-weight: 500;
  color: var(--alpha-light-500);
}

/* Strategy section */
.hook-gen__strategy {
  padding: 12px 16px;
  border-top: 1px solid var(--alpha-light-50);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hook-gen__strategy-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.hook-gen__strategy-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hook-gen__strategy-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
  margin: 0;
}

.hook-gen__strategy-text strong {
  font-weight: 600;
  color: var(--alpha-light-900);
}


/* =============================================
   DEMOS 1-3: TRAINER, FB ADS, BUSINESS CONSULTANT
   ============================================= */
/* ================================================================
   BATCH 1 — CSS Styles
   Demo 1: Personal Trainer AI (trainer)
   Demo 2: Marketing Consultant AI - Facebook Ads Manager (fbads)
   Demo 3: General Business Consultant AI (bizconsult)
   ================================================================ */


/* ================================================================
   DEMO 1: PERSONAL TRAINER AI
   ================================================================ */

/* ========================================================
   1a. MEAL PLAN BUILDER
   ======================================================== */

.meal-plan__day-nav {
  display: flex;
  justify-content: center;
  padding: 12px 16px 0;
}

.meal-plan__day-nav .toggle-pill {
  flex-wrap: nowrap;
}

.meal-plan__panels {
  padding: 0;
}

.meal-plan__day-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px 16px 0;
  animation: cardFadeIn 200ms ease-out;
}

.meal-plan__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--alpha-light-50);
}

.meal-plan__row:last-of-type {
  border-bottom: none;
}

.meal-plan__row-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.meal-plan__meal-type {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-500);
  line-height: 16px;
  letter-spacing: -0.15px;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 100;
}

.meal-plan__food-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
  line-height: 20px;
  letter-spacing: -0.15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meal-plan__row-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: 12px;
}

.meal-plan__row-cal {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 20px;
}

.meal-plan__row-cal span {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

.meal-plan__row-protein {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 20px;
  min-width: 36px;
  text-align: right;
}

.meal-plan__totals {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  margin: 0 -16px;
  background: var(--alpha-light-25);
  border-top: 1px solid var(--alpha-light-50);
}

.meal-plan__totals-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.meal-plan__totals-values {
  display: flex;
  align-items: center;
  gap: 12px;
}

.meal-plan__totals-cal {
  font-size: 16px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.meal-plan__totals-cal span {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
}

.meal-plan__totals-protein {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}

.meal-plan__totals-protein span {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
}

.meal-plan__actions {
  display: flex;
  gap: 8px;
}

.meal-plan__action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms ease-out;
  border: none;
}

.meal-plan__action-btn svg {
  width: 16px;
  height: 16px;
}

.meal-plan__action-btn--secondary {
  color: var(--alpha-light-600);
  background: var(--alpha-light-25);
  border: 1px solid var(--alpha-light-100);
}

.meal-plan__action-btn--secondary:hover {
  background: var(--alpha-light-50);
}

.meal-plan__action-btn--primary {
  color: var(--alpha-brand-950);
  background: var(--alpha-brand-50);
  border: 1px solid color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.meal-plan__action-btn--primary:hover {
  background: var(--alpha-brand-100);
}


/* ========================================================
   1b. PHOTO-TO-MACROS SCANNER
   ======================================================== */

/* Scanning/thinking state */
.photo-macros__scanning {
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.photo-macros__scan-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--alpha-brand-50);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scanPulse 1.5s ease-in-out infinite;
}

.photo-macros__scan-icon svg {
  width: 24px;
  height: 24px;
  color: var(--alpha-brand-950);
}

.photo-macros__scan-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
}

.photo-macros__scan-bar {
  width: 120px;
  height: 4px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.photo-macros__scan-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--alpha-brand-950);
  border-radius: 999px;
  animation: scanBarFill 2s ease-out forwards;
}

/* Results */
.photo-macros__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.photo-macros__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--alpha-light-50);
}

.photo-macros__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.photo-macros__item-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.photo-macros__item-emoji {
  font-size: 16px;
  width: 24px;
  text-align: center;
}

.photo-macros__item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
}

.photo-macros__item-portion {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
}

.photo-macros__item-macros {
  display: flex;
  gap: 10px;
  align-items: center;
}

.photo-macros__macro {
  text-align: right;
  min-width: 32px;
}

.photo-macros__macro-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  display: block;
}

.photo-macros__macro-lbl {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  letter-spacing: -0.15px;
}

.photo-macros__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--alpha-light-25);
  border-top: 1px solid var(--alpha-light-50);
}

.photo-macros__total-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.photo-macros__total-macros {
  display: flex;
  align-items: center;
  gap: 6px;
}

.photo-macros__total-cal {
  font-size: 16px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.photo-macros__total-cal span {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
}

.photo-macros__total-sep {
  color: var(--alpha-light-300);
  font-size: 12px;
}

.photo-macros__total-macro {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-600);
}

.photo-macros__add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 16px;
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-brand-950);
  background: var(--alpha-brand-50);
  border: 1px solid color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms ease-out;
}

.photo-macros__add-btn:hover {
  background: var(--alpha-brand-100);
}

.photo-macros__add-btn svg {
  width: 16px;
  height: 16px;
}


/* ========================================================
   1c. WORKOUT PLAN
   ======================================================== */

.workout-plan__days {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
}

.workout-plan__day {
  background: var(--alpha-light-25);
  border-radius: 12px;
  overflow: hidden;
  transition: background-color 150ms ease-out;
}

.workout-plan__day--current {
  background: var(--alpha-brand-50);
  border: 1px solid color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.workout-plan__day--completed {
  opacity: 0.7;
}

.workout-plan__day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

.workout-plan__day-header:hover {
  background: var(--alpha-light-50);
}

.workout-plan__day--current .workout-plan__day-header:hover {
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.workout-plan__day-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.workout-plan__day-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.workout-plan__check {
  width: 16px;
  height: 16px;
  color: var(--green-600);
  flex-shrink: 0;
}

.workout-plan__day-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 20px;
  display: block;
}

.workout-plan__day-type {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 16px;
  display: block;
}

.workout-plan__today-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--green-600);
  line-height: 16px;
  margin-right: auto;
  margin-left: 8px;
}

.workout-plan__chevron {
  width: 16px;
  height: 16px;
  color: var(--alpha-light-400);
  flex-shrink: 0;
  transition: transform 200ms ease-out;
}

.workout-plan__day.workout-plan__day--expanded .workout-plan__chevron {
  transform: rotate(90deg);
}

.workout-plan__exercises {
  padding: 0 12px 12px;
  animation: cardFadeIn 200ms ease-out;
}

.workout-plan__exercises.hidden {
  display: none;
}

.workout-plan__exercises-header {
  display: grid;
  grid-template-columns: 1fr 80px 50px;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--alpha-light-50);
}

.workout-plan__exercises-header span {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-400);
  letter-spacing: -0.15px;
}

.workout-plan__exercise {
  display: grid;
  grid-template-columns: 1fr 80px 50px;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--alpha-light-50);
}

.workout-plan__exercise:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.workout-plan__exercise-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
  line-height: 20px;
}

.workout-plan__exercise-sets {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 20px;
}

.workout-plan__exercise-rest {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 20px;
}

.workout-plan__log {
  padding: 24px 16px;
}

.workout-plan__log.hidden {
  display: none;
}

.workout-plan__log-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.workout-plan__log-icon {
  width: 32px;
  height: 32px;
  color: var(--alpha-light-300);
}

.workout-plan__log-empty p {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 20px;
}

.workout-plan__start-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 16px;
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(to bottom, var(--neutral-500), var(--neutral-700));
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms ease-out;
  position: relative;
  overflow: hidden;
}

.workout-plan__start-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  filter: blur(0.2px);
  pointer-events: none;
}

.workout-plan__start-btn:hover {
  background: linear-gradient(to bottom, #808080, #525252);
}

.workout-plan__start-btn svg {
  width: 16px;
  height: 16px;
}


/* ========================================================
   1d. ACCOUNTABILITY CHECK-IN
   ======================================================== */

.checkin__streak {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(245, 158, 11, 0.1);
  border-radius: 999px;
  flex-shrink: 0;
}

.checkin__streak-icon {
  width: 14px;
  height: 14px;
  color: var(--amber-500);
}

.checkin__streak-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--amber-500);
  line-height: 16px;
}

.checkin__items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.checkin__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.checkin__item-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkin__item-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
}

.checkin__item-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
  flex: 1;
}

.checkin__item-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.checkin__item-value--complete {
  color: var(--green-600);
}

.checkin__bar {
  height: 4px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.checkin__bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--alpha-light-300);
  transition: width 600ms ease-out;
}

.checkin__bar-fill--complete {
  background: color-mix(in srgb, var(--color-primary) 70%, transparent);
}

.checkin__feedback {
  padding: 12px 16px;
  border-top: 1px solid var(--alpha-light-50);
}

.checkin__feedback-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
}

.checkin__feedback-header span {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
}

.checkin__feedback-icon {
  width: 14px;
  height: 14px;
  color: var(--alpha-brand-950);
}

.checkin__feedback-text {
  font-size: 14px;
  font-weight: 400;
  color: var(--alpha-light-900);
  line-height: 22px;
}


/* ================================================================
   DEMO 2: FACEBOOK ADS MANAGER
   ================================================================ */

/* ========================================================
   2a. CAMPAIGN DASHBOARD
   ======================================================== */

/* Thinking state extras */
.campaign-dash__loading-steps {
  padding: 0 16px 16px;
}

.campaign-dash__loading-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
}

.campaign-dash__loading-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--alpha-light-100);
  border-top-color: var(--green-600);
  border-radius: 999px;
  animation: dashLoadSpin 800ms linear infinite;
}

@keyframes dashLoadSpin {
  to { transform: rotate(360deg); }
}

/* Health score */
.campaign-dash__health {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-radius: 999px;
  flex-shrink: 0;
}

.campaign-dash__health-score {
  font-size: 16px;
  font-weight: 600;
  color: var(--green-600);
  line-height: 1;
}

.campaign-dash__health-label {
  font-size: 12px;
  font-weight: 500;
  color: color-mix(in srgb, var(--color-primary) 60%, transparent);
}

/* Top metrics row */
.campaign-dash__top-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--alpha-light-50);
  border-bottom: 1px solid var(--alpha-light-50);
}

.campaign-dash__top-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 8px;
  background: var(--white);
}

.campaign-dash__top-metric-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 1;
}

.campaign-dash__top-metric-value--accent {
  color: var(--green-600);
}

.campaign-dash__top-metric-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 16px;
}

/* Campaign table */
.campaign-dash__table-wrap {
  overflow-x: auto;
  padding: 0;
}

.campaign-dash__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.campaign-dash__thead-row {
  border-bottom: 1px solid var(--alpha-light-100);
}

.campaign-dash__th {
  padding: 10px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-500);
  text-align: left;
  white-space: nowrap;
  letter-spacing: -0.15px;
}

.campaign-dash__th:first-child {
  padding-left: 16px;
}

.campaign-dash__th:last-child {
  padding-right: 16px;
}

.campaign-dash__row {
  border-bottom: 1px solid var(--alpha-light-50);
  transition: background-color 150ms ease-out;
}

.campaign-dash__row:hover {
  background: var(--alpha-light-25);
}

.campaign-dash__row:last-child {
  border-bottom: none;
}

.campaign-dash__cell {
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--alpha-light-900);
  white-space: nowrap;
  line-height: 20px;
}

.campaign-dash__cell:first-child {
  padding-left: 16px;
}

.campaign-dash__cell:last-child {
  padding-right: 16px;
}

.campaign-dash__cell--name {
  font-weight: 600;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.campaign-dash__cell--good { color: var(--green-600); font-weight: 600; }
.campaign-dash__cell--avg { color: var(--amber-500); font-weight: 600; }
.campaign-dash__cell--bad { color: var(--red-600); font-weight: 600; }


/* ========================================================
   2b. PAUSE UNDERPERFORMERS
   ======================================================== */

.underperform__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
}

.underperform__item {
  background: var(--alpha-light-25);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.underperform__item-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.underperform__severity-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 6px;
}

.underperform__severity-dot--critical { background: var(--red-600); }
.underperform__severity-dot--warning { background: var(--amber-500); }

.underperform__item-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.underperform__item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
}

.underperform__item-spend {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
}

.underperform__reasons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 16px;
}

.underperform__reason {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
}

.underperform__reason svg {
  width: 14px;
  height: 14px;
  color: var(--alpha-light-400);
  flex-shrink: 0;
}

.underperform__pause-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 13px;
  font-weight: 500;
  color: var(--red-600);
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms ease-out;
  align-self: flex-start;
}

.underperform__pause-btn:hover {
  background: rgba(220, 38, 38, 0.1);
}

.underperform__pause-btn svg {
  width: 14px;
  height: 14px;
}

.underperform__summary {
  padding: 12px 16px;
  border-top: 1px solid var(--alpha-light-50);
  font-size: 14px;
  font-weight: 400;
  color: var(--alpha-light-900);
  line-height: 22px;
}

.underperform__summary strong {
  font-weight: 600;
}

.underperform__pause-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 16px;
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 14px;
  font-weight: 500;
  color: var(--red-600);
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms ease-out;
}

.underperform__pause-all-btn:hover {
  background: rgba(220, 38, 38, 0.1);
}

.underperform__pause-all-btn svg {
  width: 16px;
  height: 16px;
}


/* ========================================================
   2c. AD VARIATIONS
   ======================================================== */

.ad-vars__top-performer {
  padding: 12px 16px;
  background: var(--alpha-light-25);
  border-bottom: 1px solid var(--alpha-light-50);
}

.ad-vars__top-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-brand-950);
  padding-bottom: 6px;
}

.ad-vars__top-label svg {
  width: 14px;
  height: 14px;
}

.ad-vars__top-headline {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 20px;
  padding-bottom: 4px;
}

.ad-vars__top-body {
  font-size: 13px;
  font-weight: 400;
  color: var(--alpha-light-600);
  line-height: 20px;
  padding-bottom: 6px;
}

.ad-vars__top-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--green-600);
}

.ad-vars__top-stats-sep {
  color: var(--alpha-light-300);
  font-weight: 400;
}

.ad-vars__tabs {
  display: flex;
  justify-content: center;
  padding: 12px 16px 0;
}

.ad-vars__panels {
  padding: 0;
}

.ad-vars__panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  animation: cardFadeIn 200ms ease-out;
}

.ad-vars__variation {
  background: var(--alpha-light-25);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ad-vars__variation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ad-vars__variation-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-500);
  letter-spacing: -0.15px;
}

.ad-vars__predicted {
  font-size: 12px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  line-height: 16px;
}

.ad-vars__predicted--positive {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--green-600);
}

.ad-vars__variation-headline {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 20px;
}

.ad-vars__variation-body {
  font-size: 13px;
  font-weight: 400;
  color: var(--alpha-light-600);
  line-height: 20px;
}

.ad-vars__variation-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--alpha-brand-950);
  padding-top: 2px;
}


/* ========================================================
   2d. A/B TEST SUGGESTIONS
   ======================================================== */

.ab-test__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
}

.ab-test__item {
  background: var(--alpha-light-25);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ab-test__item-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ab-test__priority {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  flex-shrink: 0;
}

.ab-test__priority--high {
  background: rgba(220, 38, 38, 0.08);
  color: var(--red-600);
}

.ab-test__priority--medium {
  background: rgba(245, 158, 11, 0.1);
  color: var(--amber-500);
}

.ab-test__priority--low {
  background: var(--alpha-light-50);
  color: var(--alpha-light-500);
}

.ab-test__campaign {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ab-test__hypothesis {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ab-test__hypothesis-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-500);
  letter-spacing: -0.15px;
}

.ab-test__hypothesis p {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
  line-height: 20px;
  margin: 0;
}

.ab-test__details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ab-test__detail {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ab-test__detail-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-400);
  letter-spacing: -0.15px;
}

.ab-test__detail-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
}

.ab-test__detail-value--positive {
  color: var(--green-600);
}

.ab-test__launch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 13px;
  font-weight: 500;
  color: var(--alpha-brand-950);
  background: var(--alpha-brand-50);
  border: 1px solid color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms ease-out;
  align-self: flex-start;
}

.ab-test__launch-btn:hover {
  background: var(--alpha-brand-100);
}

.ab-test__launch-btn svg {
  width: 14px;
  height: 14px;
}


/* ================================================================
   DEMO 3: GENERAL BUSINESS CONSULTANT AI
   ================================================================ */

/* ========================================================
   3a. MULTI-PLATFORM DASHBOARD (shared loading)
   ======================================================== */

.biz-dash__loading {
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.biz-dash__loading-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--alpha-brand-50);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scanPulse 1.5s ease-in-out infinite;
}

.biz-dash__loading-icon svg {
  width: 24px;
  height: 24px;
  color: var(--alpha-brand-950);
  animation: dashLoadSpin 2s linear infinite;
}

.biz-dash__loading-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
  text-align: center;
}

.biz-dash__loading-bar {
  width: 160px;
  height: 4px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.biz-dash__loading-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--alpha-brand-950);
  border-radius: 999px;
  animation: scanBarFill 3s ease-out forwards;
}

/* Platform pills */
.biz-dash__platforms {
  display: flex;
  gap: 6px;
  padding: 12px 16px 0;
  flex-wrap: wrap;
}

.biz-dash__platform-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--alpha-light-25);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 16px;
}

.biz-dash__platform-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
}

.biz-dash__platform-dot--connected {
  background: var(--green-600);
}

.biz-dash__platform-dot--disconnected {
  background: var(--red-600);
}

/* Metrics row */
.biz-dash__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--alpha-light-50);
  margin: 12px 16px 0;
  border-radius: 12px;
  overflow: hidden;
}

.biz-dash__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 8px;
  background: var(--white);
}

.biz-dash__metric-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 1;
}

.biz-dash__metric-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 16px;
}

.biz-dash__metric-trend {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-400);
  line-height: 16px;
}

.biz-dash__metric-trend--up {
  color: var(--green-600);
}

.biz-dash__metric-trend--down {
  color: var(--red-600);
}

/* Activity feed */
.biz-dash__activity {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--alpha-light-50);
  margin-top: 12px;
}

.biz-dash__activity-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
  padding-bottom: 8px;
}

.biz-dash__activity-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--alpha-light-50);
}

.biz-dash__activity-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.biz-dash__activity-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.biz-dash__activity-content {
  flex: 1;
  min-width: 0;
}

.biz-dash__activity-action {
  font-size: 13px;
  font-weight: 500;
  color: var(--alpha-light-900);
  line-height: 20px;
}

.biz-dash__activity-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.biz-dash__activity-platform {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

.biz-dash__activity-time {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

.biz-dash__activity-amount {
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 1px;
}

.biz-dash__activity-amount--positive {
  color: var(--green-600);
}

.biz-dash__activity-amount--negative {
  color: var(--red-600);
}


/* ========================================================
   3b. PROJECT TRACKER
   ======================================================== */

.proj-tracker__filters {
  display: flex;
  justify-content: center;
  padding: 12px 16px 0;
}

.proj-tracker__projects {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
}

.proj-tracker__project {
  background: var(--alpha-light-25);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: opacity 200ms ease-out;
}

.proj-tracker__project--hidden {
  display: none;
}

.proj-tracker__project-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.proj-tracker__project-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.proj-tracker__project-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
}

.proj-tracker__project-client {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
}

.proj-tracker__status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  flex-shrink: 0;
}

.proj-tracker__status--on-track {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--green-600);
}

.proj-tracker__status--at-risk {
  background: rgba(245, 158, 11, 0.1);
  color: var(--amber-500);
}

.proj-tracker__status--overdue {
  background: rgba(220, 38, 38, 0.08);
  color: var(--red-600);
}

.proj-tracker__progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.proj-tracker__progress-bar {
  flex: 1;
  height: 4px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.proj-tracker__progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 600ms ease-out;
}

.proj-tracker__progress-fill--on-track {
  background: color-mix(in srgb, var(--color-primary) 60%, transparent);
}

.proj-tracker__progress-fill--at-risk {
  background: rgba(245, 158, 11, 0.6);
}

.proj-tracker__progress-fill--overdue {
  background: rgba(220, 38, 38, 0.5);
}

.proj-tracker__progress-pct {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  min-width: 30px;
  text-align: right;
}

.proj-tracker__milestones {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.proj-tracker__milestone {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  background: var(--alpha-light-50);
  color: var(--alpha-light-400);
}

.proj-tracker__milestone--done {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--green-600);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.proj-tracker__milestone--current {
  background: var(--alpha-light-100);
  color: var(--alpha-light-900);
  font-weight: 600;
}

.proj-tracker__due {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}


/* ========================================================
   3c. WEEKLY SUMMARY
   ======================================================== */

.weekly-summary__section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--alpha-light-50);
}

.weekly-summary__section:last-of-type {
  border-bottom: none;
}

.weekly-summary__section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 10px;
}

.weekly-summary__section-header svg {
  width: 16px;
  height: 16px;
  color: var(--alpha-light-600);
  flex-shrink: 0;
}

.weekly-summary__section-header span {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
}

/* Key metrics */
.weekly-summary__metrics {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.weekly-summary__metric-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--alpha-light-50);
}

.weekly-summary__metric-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.weekly-summary__metric-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--alpha-light-600);
  min-width: 130px;
  flex-shrink: 0;
}

.weekly-summary__metric-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  min-width: 60px;
}

.weekly-summary__metric-change {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  flex: 1;
}

.weekly-summary__metric-change--up {
  color: var(--green-600);
}

.weekly-summary__metric-change--down {
  color: var(--red-600);
}

/* Action items */
.weekly-summary__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.weekly-summary__action {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--alpha-light-900);
  line-height: 20px;
}

.weekly-summary__action-priority {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}

.weekly-summary__action-priority--high {
  background: rgba(220, 38, 38, 0.1);
  color: var(--red-600);
}

.weekly-summary__action-priority--medium {
  background: rgba(245, 158, 11, 0.1);
  color: var(--amber-500);
}

.weekly-summary__action-priority--low {
  background: var(--alpha-light-50);
  color: var(--alpha-light-400);
}

/* Risks */
.weekly-summary__risks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.weekly-summary__risk {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  color: var(--alpha-light-900);
  line-height: 20px;
}

.weekly-summary__risk strong {
  font-weight: 600;
}

.weekly-summary__risk-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 7px;
}

.weekly-summary__risk-dot--critical { background: var(--red-600); }
.weekly-summary__risk-dot--warning { background: var(--amber-500); }
.weekly-summary__risk-dot--info { background: var(--alpha-light-300); }

/* Footer actions */
.weekly-summary__footer-actions {
  display: flex;
  gap: 8px;
}

.weekly-summary__action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms ease-out;
  border: none;
}

.weekly-summary__action-btn svg {
  width: 16px;
  height: 16px;
}

.weekly-summary__action-btn--secondary {
  color: var(--alpha-light-600);
  background: var(--alpha-light-25);
  border: 1px solid var(--alpha-light-100);
}

.weekly-summary__action-btn--secondary:hover {
  background: var(--alpha-light-50);
}

.weekly-summary__action-btn--primary {
  color: var(--alpha-brand-950);
  background: var(--alpha-brand-50);
  border: 1px solid color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.weekly-summary__action-btn--primary:hover {
  background: var(--alpha-brand-100);
}


/* ========================================================
   3d. TEAM NOTIFICATIONS
   ======================================================== */

.notif__mark-all {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  background: var(--alpha-light-25);
  border: 1px solid var(--alpha-light-100);
  border-radius: 999px;
  cursor: pointer;
  transition: all 150ms ease-out;
  flex-shrink: 0;
}

.notif__mark-all:hover {
  background: var(--alpha-light-50);
}

.notif__groups {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.notif__group {
  padding: 0 16px;
  border-bottom: 1px solid var(--alpha-light-50);
}

.notif__group:last-child {
  border-bottom: none;
}

.notif__group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0 6px;
}

.notif__group-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.15px;
  line-height: 16px;
}

.notif__group--critical .notif__group-label { color: var(--red-600); }
.notif__group--important .notif__group-label { color: var(--amber-500); }
.notif__group--fyi .notif__group-label { color: var(--alpha-light-500); }

.notif__group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.notif__group--critical .notif__group-count {
  background: rgba(220, 38, 38, 0.1);
  color: var(--red-600);
}

.notif__group--important .notif__group-count {
  background: rgba(245, 158, 11, 0.1);
  color: var(--amber-500);
}

.notif__group--fyi .notif__group-count {
  background: var(--alpha-light-50);
  color: var(--alpha-light-500);
}

.notif__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--alpha-light-50);
}

.notif__item:last-child {
  border-bottom: none;
}

.notif__item-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.notif__item-content {
  flex: 1;
  min-width: 0;
}

.notif__item-message {
  font-size: 13px;
  font-weight: 500;
  color: var(--alpha-light-900);
  line-height: 20px;
  display: block;
}

.notif__item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.notif__item-platform {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

.notif__item-time {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

.notif__item-action {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-brand-950);
  background: var(--alpha-brand-50);
  border: 1px solid color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-radius: 6px;
  cursor: pointer;
  transition: all 150ms ease-out;
  flex-shrink: 0;
  margin-top: 1px;
  white-space: nowrap;
}

.notif__item-action:hover {
  background: var(--alpha-brand-100);
}

/* =============================================
   DEMOS 4-6: MINDSET COACH, SALES COACH, REAL ESTATE CMA
   ============================================= */
/* ========================================================
   BATCH 2 — CSS Styles
   Demo 4: Mindset / Relationship Coach (Onboarding, Memory, Plan, Check-In, Timeline)
   Demo 5: Sales Coach (Scorecard, Call History, Playbook)
   Demo 6: Real Estate (CMA Report, Comparables, Market Trends)
   ======================================================== */


/* ========================================================
   DEMO 4: MINDSET — Onboarding Flow
   ======================================================== */

.onboard__steps {
  padding: 20px 16px 0;
}

.onboard__step-indicators {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.onboard__step-dot {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--alpha-light-25);
  border: 1.5px solid var(--alpha-light-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-400);
  transition: all 200ms ease-out;
  flex-shrink: 0;
}

.onboard__step-dot--active {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
  color: var(--alpha-brand-950);
}

.onboard__step-dot--done {
  background: var(--alpha-brand-950);
  border-color: var(--alpha-brand-950);
  color: var(--alpha-dark-900);
}

.onboard__step-line {
  width: 32px;
  height: 2px;
  background: var(--alpha-light-100);
  flex-shrink: 0;
}

.onboard__step-labels {
  display: flex;
  justify-content: space-between;
  padding: 8px 0 0;
}

.onboard__step-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--alpha-light-400);
  text-align: center;
  flex: 1;
  letter-spacing: -0.15px;
  transition: color 150ms ease-out;
}

.onboard__step-label--active {
  color: var(--alpha-brand-950);
  font-weight: 600;
}

.onboard__body {
  padding: 20px 16px;
}

.onboard__section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 24px;
  margin-bottom: 4px;
}

.onboard__section-desc {
  font-size: 14px;
  font-weight: 400;
  color: var(--alpha-light-600);
  line-height: 20px;
  margin-bottom: 16px;
}

.onboard__field {
  margin-bottom: 16px;
}

.onboard__label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
  line-height: 20px;
  letter-spacing: -0.15px;
  margin-bottom: 6px;
}

.onboard__textarea {
  width: 100%;
  padding: 8px 12px;
  font-family: var(--font-primary);
  font-variation-settings: 'wdth' 100;
  font-size: 14px;
  font-weight: 400;
  color: var(--alpha-light-900);
  line-height: 20px;
  letter-spacing: -0.15px;
  background: var(--white);
  border: 1px solid var(--alpha-light-100);
  border-radius: 8px;
  resize: vertical;
  transition: border-color 150ms ease-out;
}

.onboard__textarea::placeholder {
  color: var(--alpha-light-500);
}

.onboard__textarea:focus {
  outline: none;
  border-color: var(--alpha-light-300);
  box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.06);
}

.onboard__hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--alpha-light-25);
  border-radius: 8px;
  margin-top: 4px;
}

.onboard__hint svg {
  width: 16px;
  height: 16px;
  color: var(--alpha-light-500);
  flex-shrink: 0;
  margin-top: 1px;
}

.onboard__hint span {
  font-size: 13px;
  font-weight: 400;
  color: var(--alpha-light-600);
  line-height: 18px;
}

.onboard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.onboard__progress-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
}

.onboard__next-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  font-family: var(--font-primary);
  font-variation-settings: 'wdth' 100;
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-dark-900);
  background: linear-gradient(to bottom, var(--neutral-500), var(--neutral-700));
  border: none;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 150ms ease-out;
}

.onboard__next-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.30);
  border-radius: 8px;
  pointer-events: none;
  filter: blur(0.2px);
}

.onboard__next-btn:hover {
  background: linear-gradient(to bottom, #808080, #525252);
}

.onboard__next-btn:active {
  background: linear-gradient(to bottom, #525252, #333333);
}

.onboard__next-btn svg {
  width: 14px;
  height: 14px;
}


/* ========================================================
   DEMO 4: MINDSET — AI Memory Display
   ======================================================== */

.memory__body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.memory__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.memory__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.memory__section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-600);
  letter-spacing: -0.15px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.memory__add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-family: var(--font-primary);
  font-variation-settings: 'wdth' 100;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-brand-950);
  background: var(--alpha-brand-50);
  border: 1px solid color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-radius: 999px;
  cursor: pointer;
  transition: all 150ms ease-out;
}

.memory__add-btn:hover {
  background: var(--alpha-brand-100);
}

.memory__add-btn svg {
  width: 10px;
  height: 10px;
}

.memory__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.memory__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--alpha-light-25);
  border: 1px solid var(--alpha-light-50);
  border-radius: 999px;
  transition: all 150ms ease-out;
}

.memory__tag-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--alpha-light-900);
  line-height: 18px;
  letter-spacing: -0.15px;
}

.memory__tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 150ms ease-out;
}

.memory__tag-remove:hover {
  opacity: 0.8;
}

.memory__tag-remove svg {
  width: 10px;
  height: 10px;
  color: var(--alpha-light-900);
}

.memory__footer {
  display: flex;
  align-items: center;
  gap: 12px;
}

.memory__edit-btn,
.memory__clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: var(--font-primary);
  font-variation-settings: 'wdth' 100;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--alpha-light-100);
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms ease-out;
}

.memory__edit-btn {
  color: var(--alpha-brand-950);
}

.memory__edit-btn:hover {
  background: var(--alpha-brand-50);
  border-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.memory__clear-btn {
  color: var(--alpha-light-500);
}

.memory__clear-btn:hover {
  color: var(--red-600);
  border-color: rgba(220, 38, 38, 0.15);
  background: rgba(220, 38, 38, 0.04);
}

.memory__edit-btn svg,
.memory__clear-btn svg {
  width: 14px;
  height: 14px;
}


/* ========================================================
   DEMO 4: MINDSET — 30/60/90 Day Coaching Plan
   ======================================================== */

.plan__timeline {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan__phase {
  border: 1px solid var(--alpha-light-50);
  border-radius: 12px;
  overflow: hidden;
  transition: all 200ms ease-out;
}

.plan__phase--active {
  border-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
  background: color-mix(in srgb, var(--color-primary) 2%, transparent);
}

.plan__phase-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.plan__phase-badge {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--alpha-light-600);
  background: var(--alpha-light-25);
  border-radius: 999px;
  white-space: nowrap;
}

.plan__phase-badge--active {
  color: var(--alpha-brand-950);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.plan__phase-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.plan__phase-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 20px;
  letter-spacing: -0.15px;
}

.plan__phase-range {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 16px;
}

.plan__phase-progress {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-brand-950);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-radius: 999px;
  white-space: nowrap;
}

.plan__progress-bar {
  height: 3px;
  margin: 0 16px;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-radius: 999px;
  overflow: hidden;
}

.plan__progress-bar-fill {
  height: 100%;
  background: var(--alpha-brand-950);
  border-radius: 999px;
  transition: width 600ms ease-out;
}

.plan__areas {
  padding: 8px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plan__area {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.plan__area--done .plan__area-text {
  color: var(--alpha-light-500);
  text-decoration: line-through;
}

.plan__area-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.plan__area-check svg {
  width: 14px;
  height: 14px;
}

.plan__area--done .plan__area-check svg {
  color: var(--green-600);
}

.plan__area:not(.plan__area--done) .plan__area-check svg {
  color: var(--alpha-light-300);
}

.plan__area-text {
  font-size: 13px;
  font-weight: 400;
  color: var(--alpha-light-900);
  line-height: 18px;
  letter-spacing: -0.15px;
}

.plan__milestone {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 12px;
  border-top: 1px solid var(--alpha-light-50);
}

.plan__milestone svg {
  width: 14px;
  height: 14px;
  color: var(--amber-500);
  flex-shrink: 0;
}

.plan__milestone span {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
  font-style: italic;
}


/* ========================================================
   DEMO 4: MINDSET — Daily Check-In
   ======================================================== */

.checkin__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.checkin__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkin__section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 20px;
  letter-spacing: -0.15px;
}

.checkin__mood-selector {
  display: flex;
  gap: 8px;
}

.checkin__mood-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  padding: 10px 4px;
  font-family: var(--font-primary);
  font-variation-settings: 'wdth' 100;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  background: var(--alpha-light-25);
  border: 1.5px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 150ms ease-out;
}

.checkin__mood-btn:hover {
  background: var(--alpha-light-50);
  color: var(--alpha-light-900);
}

.checkin__mood-btn--selected {
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
  color: var(--alpha-brand-950);
}

.checkin__mood-circle {
  width: 24px;
  height: 24px;
  border-radius: 999px;
}

.checkin__mood-circle--struggling {
  background: linear-gradient(135deg, #dc2626, #f87171);
}

.checkin__mood-circle--low {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.checkin__mood-circle--neutral {
  background: linear-gradient(135deg, #a3a3a3, #d4d4d4);
}

.checkin__mood-circle--good {
  background: linear-gradient(135deg, #10b981, #34d399);
}

.checkin__mood-circle--great {
  background: linear-gradient(135deg, #059669, #10b981);
}

.checkin__textarea {
  width: 100%;
  padding: 8px 12px;
  font-family: var(--font-primary);
  font-variation-settings: 'wdth' 100;
  font-size: 14px;
  font-weight: 400;
  color: var(--alpha-light-900);
  line-height: 20px;
  background: var(--white);
  border: 1px solid var(--alpha-light-100);
  border-radius: 8px;
  resize: none;
  transition: border-color 150ms ease-out;
}

.checkin__textarea::placeholder {
  color: var(--alpha-light-500);
}

.checkin__textarea:focus {
  outline: none;
  border-color: var(--alpha-light-300);
  box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.06);
}

.checkin__slider-wrap {
  padding: 4px 0;
}

.checkin__slider {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--alpha-light-100);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

.checkin__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--white);
  border: 2px solid var(--alpha-brand-950);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.checkin__slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--white);
  border: 2px solid var(--alpha-brand-950);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.checkin__slider-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.checkin__slider-labels span {
  font-size: 11px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

.checkin__slider-value {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--alpha-brand-950) !important;
}

.checkin__sleep-rating {
  display: flex;
  gap: 6px;
}

.checkin__sleep-btn {
  flex: 1;
  padding: 6px 8px;
  font-family: var(--font-primary);
  font-variation-settings: 'wdth' 100;
  font-size: 13px;
  font-weight: 500;
  color: var(--alpha-light-500);
  background: var(--alpha-light-25);
  border: 1.5px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: all 150ms ease-out;
}

.checkin__sleep-btn:hover {
  background: var(--alpha-light-50);
  color: var(--alpha-light-900);
}

.checkin__sleep-btn--selected {
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
  color: var(--alpha-brand-950);
}

.checkin__footer {
  display: flex;
  justify-content: flex-end;
}

.checkin__submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  font-family: var(--font-primary);
  font-variation-settings: 'wdth' 100;
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-dark-900);
  background: linear-gradient(to bottom, var(--neutral-500), var(--neutral-700));
  border: none;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 150ms ease-out;
}

.checkin__submit-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.30);
  border-radius: 8px;
  pointer-events: none;
  filter: blur(0.2px);
}

.checkin__submit-btn:hover {
  background: linear-gradient(to bottom, #808080, #525252);
}

.checkin__submit-btn svg {
  width: 14px;
  height: 14px;
}

.checkin__previous {
  padding: 12px 16px;
  border-top: 1px solid var(--alpha-light-50);
  background: var(--alpha-light-25);
}

.checkin__previous-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-600);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.checkin__previous-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
}

.checkin__previous-row:not(:last-child) {
  border-bottom: 1px solid var(--alpha-light-50);
  padding-bottom: 6px;
  margin-bottom: 2px;
}

.checkin__previous-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-500);
  min-width: 52px;
}

.checkin__previous-value {
  font-size: 13px;
  font-weight: 400;
  color: var(--alpha-light-900);
  line-height: 18px;
}


/* ========================================================
   DEMO 4: MINDSET — Progress Timeline
   ======================================================== */

.progress-tl__streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--amber-500);
  background: rgba(245, 158, 11, 0.08);
  border-radius: 999px;
  white-space: nowrap;
}

.progress-tl__streak-badge svg {
  width: 14px;
  height: 14px;
}

.progress-tl__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--alpha-light-50);
  margin: 0 16px;
  border-radius: 12px;
  overflow: hidden;
}

.progress-tl__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  background: var(--white);
}

.progress-tl__stat-number {
  font-size: 18px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 24px;
}

.progress-tl__stat-number--highlight {
  color: var(--alpha-brand-950);
}

.progress-tl__stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--alpha-light-500);
  text-align: center;
}

.progress-tl__chart-wrap {
  display: flex;
  gap: 8px;
  padding: 16px 16px 4px;
}

.progress-tl__chart-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 0 4px;
}

.progress-tl__chart-y span {
  font-size: 10px;
  font-weight: 500;
  color: var(--alpha-light-400);
  white-space: nowrap;
}

.progress-tl__chart-container {
  flex: 1;
  position: relative;
  min-height: 110px;
}

.progress-tl__chart-svg {
  width: 100%;
  height: auto;
}

.progress-tl__milestones {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.progress-tl__milestone {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}

.progress-tl__milestone-line {
  width: 1px;
  height: 100%;
  background: rgba(245, 158, 11, 0.25);
  margin: 0 auto;
  min-height: 80px;
}

.progress-tl__milestone-label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--amber-500);
  background: rgba(245, 158, 11, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  margin-top: 4px;
  text-align: center;
}

.progress-tl__x-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 16px 12px;
  margin-left: 36px;
}

.progress-tl__x-labels span {
  font-size: 10px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

.progress-tl__legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 0 16px 12px;
}

.progress-tl__legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.progress-tl__legend-item span {
  font-size: 11px;
  font-weight: 500;
  color: var(--alpha-light-500);
}

.progress-tl__legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.progress-tl__legend-dot--mood {
  background: var(--color-primary);
}

.progress-tl__legend-dot--milestone {
  background: #f59e0b;
}

.progress-tl__legend-line {
  width: 16px;
  height: 2px;
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  border-radius: 999px;
}


/* ========================================================
   DEMO 5: SALES COACH — Call Scorecard
   ======================================================== */

.scorecard__overview {
  padding: 16px;
}

.scorecard__overall {
  display: flex;
  align-items: center;
  gap: 16px;
}

.scorecard__overall-ring {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.scorecard__overall-ring svg {
  width: 80px;
  height: 80px;
}

.scorecard__overall-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scorecard__overall-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--alpha-light-900);
  line-height: 1;
}

.scorecard__overall-max {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  margin-top: 2px;
}

.scorecard__overall-detail {
  flex: 1;
}

.scorecard__overall-grade {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  margin-bottom: 4px;
}

.scorecard__overall-desc {
  font-size: 13px;
  font-weight: 400;
  color: var(--alpha-light-600);
  line-height: 18px;
}

.scorecard__categories {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.scorecard__category {
  border: 1px solid var(--alpha-light-50);
  border-radius: 10px;
  overflow: hidden;
  transition: all 150ms ease-out;
}

.scorecard__category:hover {
  border-color: var(--alpha-light-100);
}

.scorecard__category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
}

.scorecard__category-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 160px;
}

.scorecard__category-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
}

.scorecard__category-grade {
  font-size: 12px;
  font-weight: 700;
}

.scorecard__category-score {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.scorecard__category-bar {
  flex: 1;
  height: 4px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.scorecard__category-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 600ms ease-out;
}

.scorecard__category-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--alpha-light-900);
  min-width: 24px;
  text-align: right;
}

.scorecard__category-chevron {
  width: 16px;
  height: 16px;
  color: var(--alpha-light-400);
  flex-shrink: 0;
  transition: transform 200ms ease-out;
}

.scorecard__category--open .scorecard__category-chevron {
  transform: rotate(180deg);
}

.scorecard__category-detail {
  display: none;
  padding: 0 12px 12px;
  flex-direction: column;
  gap: 8px;
}

.scorecard__category--open .scorecard__category-detail {
  display: flex;
}

.scorecard__quote {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background: var(--alpha-light-25);
  border-radius: 8px;
  border-left: 3px solid var(--alpha-light-200);
}

.scorecard__quote svg {
  width: 14px;
  height: 14px;
  color: var(--alpha-light-400);
  flex-shrink: 0;
  margin-top: 2px;
}

.scorecard__quote-text {
  display: block;
  font-size: 13px;
  font-weight: 400;
  font-style: italic;
  color: var(--alpha-light-900);
  line-height: 18px;
}

.scorecard__quote-time {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--alpha-light-400);
  margin-top: 4px;
}

.scorecard__tip {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--color-primary) 3%, transparent);
  border-radius: 8px;
  border-left: 3px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.scorecard__tip svg {
  width: 14px;
  height: 14px;
  color: var(--alpha-brand-950);
  flex-shrink: 0;
  margin-top: 2px;
}

.scorecard__tip span {
  font-size: 13px;
  font-weight: 400;
  color: var(--alpha-light-900);
  line-height: 18px;
}

.scorecard__transcript-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: var(--font-primary);
  font-variation-settings: 'wdth' 100;
  font-size: 13px;
  font-weight: 500;
  color: var(--alpha-light-600);
  background: transparent;
  border: 1px solid var(--alpha-light-100);
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms ease-out;
}

.scorecard__transcript-btn:hover {
  background: var(--alpha-light-25);
  color: var(--alpha-light-900);
}

.scorecard__transcript-btn svg {
  width: 14px;
  height: 14px;
}


/* ========================================================
   DEMO 5: SALES COACH — Call History
   ======================================================== */

.callhist__summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--alpha-light-50);
  margin: 0 16px;
  border-radius: 12px;
  overflow: hidden;
}

.callhist__summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  background: var(--white);
}

.callhist__summary-number {
  font-size: 16px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 22px;
}

.callhist__summary-number--up {
  color: var(--green-600);
}

.callhist__summary-number--down {
  color: var(--red-600);
}

.callhist__summary-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--alpha-light-500);
  text-align: center;
}

.callhist__filters {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
}

.callhist__filter {
  padding: 4px 14px;
  font-family: var(--font-primary);
  font-variation-settings: 'wdth' 100;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  background: var(--alpha-light-25);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: all 150ms ease-out;
}

.callhist__filter:hover {
  color: var(--alpha-light-900);
  background: var(--alpha-light-50);
}

.callhist__filter--active {
  color: var(--alpha-brand-950);
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.callhist__list {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.callhist__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background 150ms ease-out;
}

.callhist__item:hover {
  background: var(--alpha-light-25);
}

.callhist__item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.callhist__date {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  min-width: 48px;
}

.callhist__client-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.callhist__client {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
}

.callhist__type {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 999px;
}

.callhist__type--discovery {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.06);
}

.callhist__type--demo {
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.06);
}

.callhist__type--closing {
  color: #059669;
  background: rgba(5, 150, 105, 0.06);
}

.callhist__item-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.callhist__score {
  font-size: 16px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.callhist__trend {
  width: 12px;
  height: 12px;
}

.callhist__trend--up {
  color: var(--green-600);
}

.callhist__trend--down {
  color: var(--red-600);
}

.callhist__trend--same {
  color: var(--alpha-light-400);
}


/* ========================================================
   DEMO 5: SALES COACH — Sales Playbook
   ======================================================== */

.playbook__body {
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.playbook__section {
  border: 1px solid var(--alpha-light-50);
  border-radius: 10px;
  overflow: hidden;
  transition: all 150ms ease-out;
}

.playbook__section:hover {
  border-color: var(--alpha-light-100);
}

.playbook__section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
}

.playbook__section-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--alpha-light-25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.playbook__section-icon svg {
  width: 14px;
  height: 14px;
  color: var(--alpha-light-600);
}

.playbook__section-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
}

.playbook__section-chevron {
  width: 16px;
  height: 16px;
  color: var(--alpha-light-400);
  flex-shrink: 0;
  transition: transform 200ms ease-out;
}

.playbook__section--open .playbook__section-chevron {
  transform: rotate(180deg);
}

.playbook__section-body {
  display: none;
  padding: 0 12px 12px;
}

.playbook__section--open .playbook__section-body {
  display: block;
}

.playbook__list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.playbook__list-item {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  font-weight: 400;
  color: var(--alpha-light-900);
  line-height: 20px;
}

.playbook__list-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--alpha-light-300);
}

.playbook__tip {
  padding: 10px 12px;
  background: color-mix(in srgb, var(--color-primary) 3%, transparent);
  border-radius: 8px;
  border-left: 3px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.playbook__tip-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--alpha-brand-950);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.playbook__tip span {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--alpha-light-900);
  line-height: 18px;
}


/* ========================================================
   DEMO 6: REAL ESTATE — CMA Report
   ======================================================== */

.cma__subject {
  padding: 16px;
  border-bottom: 1px solid var(--alpha-light-50);
}

.cma__subject-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-600);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}

.cma__subject-details {
  display: flex;
  gap: 1px;
  background: var(--alpha-light-50);
  border-radius: 10px;
  overflow: hidden;
}

.cma__subject-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
  background: var(--white);
}

.cma__subject-stat-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 22px;
}

.cma__subject-stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--alpha-light-500);
}

.cma__estimate {
  padding: 16px;
  background: rgba(8, 145, 178, 0.03);
  border-bottom: 1px solid var(--alpha-light-50);
}

.cma__estimate-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-600);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}

.cma__estimate-range {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cma__estimate-low,
.cma__estimate-high {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  white-space: nowrap;
}

.cma__estimate-bar {
  flex: 1;
  height: 8px;
  background: rgba(8, 145, 178, 0.10);
  border-radius: 999px;
  position: relative;
  overflow: visible;
}

.cma__estimate-bar-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 145, 178, 0.20), rgba(8, 145, 178, 0.50));
  border-radius: 999px;
}

.cma__estimate-bar-marker {
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background: #0891b2;
  border: 2px solid var(--white);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.cma__estimate-bar-marker span {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  color: #0891b2;
  white-space: nowrap;
  background: var(--white);
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.cma__estimate-note {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--alpha-light-600);
  text-align: center;
}

.cma__estimate-note strong {
  color: #0891b2;
  font-weight: 700;
}

.cma__comps {
  padding: 16px;
}

.cma__comps-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-600);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}

.cma__comps-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--alpha-light-50);
  border-radius: 8px;
}

.cma__comps-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
}

.cma__comps-table thead {
  background: var(--alpha-light-25);
}

.cma__comps-table th {
  padding: 8px 10px;
  font-weight: 600;
  color: var(--alpha-light-600);
  text-align: left;
  border-bottom: 1px solid var(--alpha-light-50);
}

.cma__comp-row {
  transition: background 150ms ease-out;
}

.cma__comp-row:hover {
  background: var(--alpha-light-25);
}

.cma__comp-row:not(:last-child) {
  border-bottom: 1px solid var(--alpha-light-50);
}

.cma__comp-cell {
  padding: 8px 10px;
  font-weight: 500;
  color: var(--alpha-light-600);
}

.cma__comp-cell--address {
  font-weight: 600;
  color: var(--alpha-light-900);
}

.cma__comp-cell--price {
  font-weight: 600;
  color: var(--alpha-light-900);
}

.cma__comp-cell--adjusted {
  font-weight: 700;
  color: #0891b2;
}

.cma__adj-badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  background: var(--alpha-light-25);
  color: var(--alpha-light-900);
  margin-right: 4px;
}

.cma__adj-note {
  font-size: 10px;
  font-weight: 400;
  color: var(--alpha-light-400);
}

.cma__notes {
  padding: 12px 16px;
  border-top: 1px solid var(--alpha-light-50);
}

.cma__notes-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-600);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}

.cma__notes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cma__notes-list li {
  position: relative;
  padding-left: 14px;
  font-size: 12px;
  font-weight: 400;
  color: var(--alpha-light-600);
  line-height: 18px;
}

.cma__notes-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--alpha-light-300);
}

.cma__footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cma__export-btn,
.cma__share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: var(--font-primary);
  font-variation-settings: 'wdth' 100;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--alpha-light-100);
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms ease-out;
}

.cma__export-btn {
  color: #0891b2;
}

.cma__export-btn:hover {
  background: rgba(8, 145, 178, 0.04);
  border-color: rgba(8, 145, 178, 0.15);
}

.cma__share-btn {
  color: var(--alpha-light-600);
}

.cma__share-btn:hover {
  background: var(--alpha-light-25);
  color: var(--alpha-light-900);
}

.cma__export-btn svg,
.cma__share-btn svg {
  width: 14px;
  height: 14px;
}


/* ========================================================
   DEMO 6: REAL ESTATE — Comparable Properties
   ======================================================== */

.comp__filters {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
}

.comp__filter {
  padding: 4px 14px;
  font-family: var(--font-primary);
  font-variation-settings: 'wdth' 100;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  background: var(--alpha-light-25);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: all 150ms ease-out;
}

.comp__filter:hover {
  color: var(--alpha-light-900);
  background: var(--alpha-light-50);
}

.comp__filter--active {
  color: #0891b2;
  background: rgba(8, 145, 178, 0.06);
  border-color: rgba(8, 145, 178, 0.12);
}

.comp__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 16px 16px;
}

.comp__card {
  border: 1px solid var(--alpha-light-50);
  border-radius: 12px;
  padding: 12px;
  transition: all 150ms ease-out;
}

.comp__card:hover {
  border-color: var(--alpha-light-100);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02), 0px 1px 2px rgba(0, 0, 0, 0.02);
}

.comp__card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.comp__card-address {
  font-size: 13px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 18px;
  letter-spacing: -0.15px;
}

.comp__card-status {
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
}

.comp__card-status--sold {
  color: #059669;
  background: rgba(5, 150, 105, 0.08);
}

.comp__card-status--active {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.08);
}

.comp__card-status--pending {
  color: #d97706;
  background: rgba(217, 119, 6, 0.08);
}

.comp__card-stats {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.comp__card-stat-value {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-600);
}

.comp__card-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--alpha-light-50);
}

.comp__card-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--alpha-light-900);
}

.comp__card-ppsf {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  margin-left: 6px;
}

.comp__card-dom {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  white-space: nowrap;
}

.comp__card-features {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.comp__card-feature {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--alpha-light-600);
  background: var(--alpha-light-25);
  border-radius: 4px;
}


/* ========================================================
   DEMO 6: REAL ESTATE — Market Trends
   ======================================================== */

.market__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #059669;
  background: rgba(5, 150, 105, 0.08);
  border-radius: 999px;
  white-space: nowrap;
}

.market__badge svg {
  width: 12px;
  height: 12px;
}

.market__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--alpha-light-50);
  margin: 0 16px;
  border-radius: 12px;
  overflow: hidden;
}

.market__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  background: var(--white);
}

.market__metric-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--alpha-light-500);
  text-align: center;
}

.market__metric-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--alpha-light-900);
  line-height: 24px;
}

.market__metric-change {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
}

.market__metric-change--positive {
  color: #059669;
}

.market__metric-change--negative {
  color: var(--red-600);
}

.market__metric-arrow {
  width: 12px;
  height: 12px;
}

.market__metric-arrow--up {
  color: #059669;
}

.market__metric-arrow--down-good {
  color: #059669;
}

.market__table-section {
  padding: 16px;
}

.market__table-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-600);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}

.market__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--alpha-light-50);
  border-radius: 8px;
}

.market__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.market__table thead {
  background: var(--alpha-light-25);
}

.market__table th {
  padding: 8px 12px;
  font-weight: 600;
  color: var(--alpha-light-600);
  text-align: left;
  border-bottom: 1px solid var(--alpha-light-50);
}

.market__table-row {
  transition: background 150ms ease-out;
}

.market__table-row:hover {
  background: var(--alpha-light-25);
}

.market__table-row:not(:last-child) {
  border-bottom: 1px solid var(--alpha-light-50);
}

.market__table-cell {
  padding: 8px 12px;
  font-weight: 500;
  color: var(--alpha-light-900);
}

.market__table-cell:first-child {
  font-weight: 600;
  color: var(--alpha-light-600);
}

/* =============================================
   DEMOS 7-9: TX COORDINATOR, EXECUTIVE COACH, FINANCIAL COACH
   ============================================= */
/* ============================================================
   BATCH 3 CSS
   Demo 7: DealFlow AI (txcoord)
   Demo 8: LeadIQ AI (executive)
   Demo 9: WealthIQ AI (finance)
   ============================================================ */

/* ========================================================
   DEMO 7 — DealFlow AI: Transaction Coordinator
   ======================================================== */

/* --- Thinking State --- */
.txcoord__thinking {
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.txcoord__thinking-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(13, 148, 136, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scanPulse 1.5s ease-in-out infinite;
}

.txcoord__thinking-icon svg {
  width: 24px;
  height: 24px;
  color: #0d9488;
}

.txcoord__thinking-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
}

.txcoord__thinking-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.txcoord__thinking-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  animation: stepFadeIn 600ms ease-out both;
}

.txcoord__thinking-step:nth-child(1) { animation-delay: 0ms; }
.txcoord__thinking-step:nth-child(2) { animation-delay: 400ms; }
.txcoord__thinking-step:nth-child(3) { animation-delay: 800ms; }
.txcoord__thinking-step:nth-child(4) { animation-delay: 1200ms; }

.txcoord__thinking-step .connect-seq__check {
  width: 14px;
  height: 14px;
  color: #0d9488;
  flex-shrink: 0;
  margin-left: 0;
}

.txcoord__progress {
  width: 120px;
  height: 4px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.txcoord__progress-fill {
  height: 100%;
  width: 0%;
  background: #0d9488;
  border-radius: 999px;
  animation: scanBarFill 2.8s ease-out forwards;
}

/* --- Stats Row --- */
.txcoord__stats {
  display: flex;
  gap: 1px;
  background: var(--alpha-light-50);
  margin: 0;
}

.txcoord__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: var(--white);
  gap: 2px;
}

.txcoord__stat-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 24px;
}

.txcoord__stat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 16px;
}

/* --- Stage Legend --- */
.txcoord__stage-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--alpha-light-50);
}

.txcoord__stage-legend-item {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  letter-spacing: -0.15px;
}

.txcoord__stage-legend-sep {
  font-size: 12px;
  color: var(--alpha-light-300);
}

/* --- Transaction Rows --- */
.txcoord__transactions {
  display: flex;
  flex-direction: column;
  padding: 8px 16px;
}

.txcoord__transaction {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--alpha-light-50);
}

.txcoord__transaction:last-child {
  border-bottom: none;
}

.txcoord__transaction-row1 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.txcoord__transaction-row2 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.txcoord__transaction-main {
  min-width: 0;
  flex: 1;
}

.txcoord__transaction-address {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
}

.txcoord__transaction-parties {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 16px;
}

/* --- Stage Dots --- */
.txcoord__transaction-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 60px;
}

.txcoord__stage-dots {
  display: flex;
  gap: 4px;
}

.txcoord__stage-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--alpha-light-100);
}

.txcoord__stage-dot--done {
  background: #0d9488;
}

.txcoord__stage-dot--active {
  background: #2dd4bf;
  box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.2);
}

.txcoord__stage-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  letter-spacing: -0.15px;
}

/* --- Progress Bar --- */
.txcoord__transaction-progress {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.txcoord__progress-pct {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-600);
  min-width: 28px;
  text-align: right;
}

.txcoord__progress-bar {
  width: 100%;
  height: 4px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.txcoord__progress-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 600ms ease-out;
}

.txcoord__progress-bar-fill--on-track { background: #0d9488; }
.txcoord__progress-bar-fill--at-risk { background: var(--amber-500); }
.txcoord__progress-bar-fill--urgent { background: var(--red-600); }

/* --- Days to Close --- */
.txcoord__transaction-days {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-500);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ========================================================
   DealFlow AI — Deal Checklist
   ======================================================== */

/* --- Summary Bar --- */
.txcoord__checklist-summary {
  padding: 12px 16px;
  border-bottom: 1px solid var(--alpha-light-50);
}

.txcoord__checklist-summary-bar {
  width: 100%;
  height: 6px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}

.txcoord__checklist-summary-bar-fill {
  height: 100%;
  background: #0d9488;
  border-radius: 999px;
  transition: width 800ms ease-out;
}

.txcoord__checklist-summary-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
}

/* --- Checklist Stages --- */
.txcoord__checklist {
  padding: 8px 16px 16px;
}

.txcoord__checklist-stage {
  margin-bottom: 12px;
}

.txcoord__checklist-stage:last-child {
  margin-bottom: 0;
}

.txcoord__checklist-stage-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.txcoord__checklist-stage-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid var(--alpha-light-200);
  background: var(--white);
  flex-shrink: 0;
}

.txcoord__checklist-stage-dot--done {
  background: #0d9488;
  border-color: #0d9488;
}

.txcoord__checklist-stage-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
}

.txcoord__checklist-stage-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  margin-left: auto;
}

/* --- Checklist Items --- */
.txcoord__checklist-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 18px;
  border-left: 2px solid var(--alpha-light-50);
  margin-left: 4px;
}

.txcoord__checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background-color 150ms ease-out;
}

.txcoord__checklist-item:hover {
  background: var(--alpha-light-25);
}

.txcoord__checklist-item--completed {
  opacity: 0.7;
}

/* --- Check Icons --- */
.txcoord__check-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.txcoord__check-icon--done {
  color: #0d9488;
}

.txcoord__check-icon--progress {
  display: flex;
  align-items: center;
  justify-content: center;
}

.txcoord__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--alpha-light-100);
  border-top-color: #0d9488;
  border-radius: 999px;
  animation: txcoordSpin 0.8s linear infinite;
}

@keyframes txcoordSpin {
  to { transform: rotate(360deg); }
}

.txcoord__check-icon--overdue {
  color: var(--red-600);
}

.txcoord__check-icon--pending {
  width: 14px;
  height: 14px;
  border: 2px solid var(--alpha-light-200);
  border-radius: 999px;
}

/* --- Item Content --- */
.txcoord__checklist-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.txcoord__checklist-item-task {
  font-size: 13px;
  font-weight: 500;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
  flex: 1;
}

.txcoord__checklist-item--completed .txcoord__checklist-item-task {
  text-decoration: line-through;
  color: var(--alpha-light-500);
}

.txcoord__checklist-item-due {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  white-space: nowrap;
}

.txcoord__checklist-item-due--overdue {
  color: var(--red-600);
}

/* --- Document Icon --- */
.txcoord__doc-icon {
  width: 14px;
  height: 14px;
  color: var(--alpha-light-400);
  flex-shrink: 0;
}

/* ========================================================
   DealFlow AI — Deadline Alerts
   ======================================================== */

.txcoord__deadline-section {
  padding: 8px 16px 16px;
}

.txcoord__deadline-group {
  margin-bottom: 12px;
}

.txcoord__deadline-group:last-child {
  margin-bottom: 0;
}

.txcoord__deadline-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.15px;
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--alpha-light-50);
  margin-bottom: 4px;
}

.txcoord__deadline-group-header--today {
  color: var(--red-600);
}

.txcoord__deadline-group-header--tomorrow {
  color: var(--amber-500);
}

.txcoord__deadline-group-header--week {
  color: #0d9488;
}

.txcoord__deadline-group-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.txcoord__deadline-group-dot--today {
  background: var(--red-600);
}

.txcoord__deadline-group-dot--tomorrow {
  background: var(--amber-500);
}

.txcoord__deadline-group-dot--week {
  background: #0d9488;
}

.txcoord__deadline-group-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  margin-left: auto;
}

/* --- Deadline Items --- */
.txcoord__deadline-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--alpha-light-50);
}

.txcoord__deadline-item:last-child {
  border-bottom: none;
}

.txcoord__deadline-item-content {
  flex: 1;
  min-width: 0;
}

.txcoord__deadline-deal {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
  display: block;
}

.txcoord__deadline-task {
  font-size: 13px;
  font-weight: 500;
  color: var(--alpha-light-600);
  display: block;
  margin-top: 1px;
}

.txcoord__deadline-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.txcoord__deadline-time {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

.txcoord__deadline-sep {
  font-size: 12px;
  color: var(--alpha-light-300);
}

.txcoord__deadline-party {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

/* --- Send Reminder Button --- */
.txcoord__reminder-btn {
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 12px;
  font-weight: 500;
  color: #0d9488;
  background: rgba(13, 148, 136, 0.08);
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 150ms ease-out;
}

.txcoord__reminder-btn:hover {
  background: rgba(13, 148, 136, 0.14);
}

.txcoord__reminder-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ========================================================
   DEMO 8 — LeadIQ AI: Executive Leadership Coach
   ======================================================== */

/* --- Thinking State --- */
.exec__thinking {
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.exec__thinking-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(67, 56, 202, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scanPulse 1.5s ease-in-out infinite;
}

.exec__thinking-icon svg {
  width: 24px;
  height: 24px;
  color: #4338ca;
}

.exec__thinking-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
}

.exec__thinking-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.exec__thinking-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  animation: stepFadeIn 600ms ease-out both;
}

.exec__thinking-step:nth-child(1) { animation-delay: 0ms; }
.exec__thinking-step:nth-child(2) { animation-delay: 400ms; }
.exec__thinking-step:nth-child(3) { animation-delay: 800ms; }
.exec__thinking-step:nth-child(4) { animation-delay: 1200ms; }

.exec__thinking-step .connect-seq__check {
  width: 14px;
  height: 14px;
  color: #4338ca;
  flex-shrink: 0;
  margin-left: 0;
}

.exec__progress {
  width: 120px;
  height: 4px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.exec__progress-fill {
  height: 100%;
  width: 0%;
  background: #4338ca;
  border-radius: 999px;
  animation: scanBarFill 2.8s ease-out forwards;
}

/* --- Respondent Summary --- */
.exec__respondents {
  display: flex;
  gap: 1px;
  background: var(--alpha-light-50);
}

.exec__respondent {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: var(--white);
  gap: 2px;
}

.exec__respondent-count {
  font-size: 16px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 24px;
}

.exec__respondent-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 16px;
  text-align: center;
}

/* --- Overall Score --- */
.exec__overall {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  gap: 4px;
}

.exec__overall-score {
  display: flex;
  align-items: baseline;
}

.exec__overall-number {
  font-size: 32px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 40px;
  letter-spacing: -0.5px;
}

.exec__overall-max {
  font-size: 16px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

.exec__overall-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-500);
}

/* --- Category Scores --- */
.exec__categories {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--alpha-light-50);
}

.exec__categories-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.exec__categories-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
}

.exec__categories-legend {
  display: flex;
  gap: 12px;
}

.exec__legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
}

.exec__legend-dot {
  width: 8px;
  height: 4px;
  border-radius: 2px;
  background: #4338ca;
}

.exec__legend-dot--self {
  background: var(--alpha-light-200);
}

.exec__category {
  margin-bottom: 10px;
}

.exec__category:last-child {
  margin-bottom: 0;
}

.exec__category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.exec__category-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
}

.exec__category-score {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.exec__category-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.exec__category-bar {
  width: 100%;
  height: 6px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.exec__category-bar--self {
  height: 4px;
}

.exec__category-bar-fill {
  height: 100%;
  background: #4338ca;
  border-radius: 999px;
  transition: width 600ms ease-out;
}

.exec__category-bar-fill--self {
  background: var(--alpha-light-200);
}

.exec__category-gap {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
}

.exec__gap-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

.exec__gap-value {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.15px;
}

.exec__gap--positive {
  color: #059669;
}

.exec__gap--negative {
  color: var(--red-600);
}

/* --- Themes Section --- */
.exec__themes {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--alpha-light-50);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.exec__themes-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.exec__themes-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.15px;
}

.exec__themes-title--strengths {
  color: #059669;
}

.exec__themes-title--growth {
  color: var(--amber-500);
}

.exec__themes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.exec__theme-item {
  font-size: 13px;
  font-weight: 400;
  color: var(--alpha-light-600);
  line-height: 20px;
  padding-left: 16px;
  position: relative;
}

.exec__theme-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
}

.exec__theme-item--strength::before {
  background: #059669;
}

.exec__theme-item--growth::before {
  background: var(--amber-500);
}


/* ========================================================
   LeadIQ AI — Survey Builder
   ======================================================== */

.exec__survey-scale-info {
  padding: 12px 16px;
  border-bottom: 1px solid var(--alpha-light-50);
  display: flex;
  align-items: center;
  gap: 8px;
}

.exec__survey-scale-info-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-600);
  white-space: nowrap;
}

.exec__survey-scale-dots {
  display: flex;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  overflow-x: auto;
}

.exec__survey-categories {
  padding: 8px 16px;
}

.exec__survey-category {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--alpha-light-50);
}

.exec__survey-category:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.exec__survey-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.exec__survey-category-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
}

.exec__survey-category-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

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

.exec__survey-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--alpha-light-25);
}

.exec__survey-question-text {
  font-size: 13px;
  font-weight: 400;
  color: var(--alpha-light-600);
  line-height: 18px;
  flex: 1;
}

.exec__survey-scale {
  flex-shrink: 0;
}

.exec__survey-scale-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  white-space: nowrap;
}

.exec__survey-add-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 12px;
  font-weight: 500;
  color: #4338ca;
  background: none;
  border: 1px dashed rgba(67, 56, 202, 0.2);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 150ms ease-out;
}

.exec__survey-add-btn:hover {
  background: rgba(67, 56, 202, 0.04);
  border-color: rgba(67, 56, 202, 0.3);
}

.exec__survey-add-btn svg {
  width: 12px;
  height: 12px;
}

/* --- Distribution Section --- */
.exec__survey-distribution {
  padding: 12px 16px;
  border-top: 1px solid var(--alpha-light-50);
}

.exec__survey-dist-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
  display: block;
  margin-bottom: 8px;
}

.exec__survey-dist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--alpha-light-50);
}

.exec__survey-dist-row:last-child {
  border-bottom: none;
}

.exec__survey-dist-role {
  font-size: 13px;
  font-weight: 500;
  color: var(--alpha-light-600);
}

.exec__survey-dist-count {
  font-size: 13px;
  font-weight: 500;
  color: var(--alpha-light-900);
}

.exec__survey-dist-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 0;
  margin-top: 4px;
  border-top: 1px solid var(--alpha-light-100);
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
}


/* ========================================================
   LeadIQ AI — Development Plan
   ======================================================== */

.exec__plan-focuses {
  padding: 12px 16px;
}

.exec__plan-focus {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--alpha-light-50);
}

.exec__plan-focus:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.exec__plan-focus-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.exec__plan-focus-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
}

.exec__plan-focus-score {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  background: var(--alpha-light-25);
  padding: 2px 8px;
  border-radius: 999px;
}

.exec__plan-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.exec__plan-action {
  display: flex;
  gap: 10px;
}

.exec__plan-action-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #4338ca;
  flex-shrink: 0;
  margin-top: 6px;
}

.exec__plan-action-content {
  flex: 1;
}

.exec__plan-action-task {
  font-size: 13px;
  font-weight: 400;
  color: var(--alpha-light-900);
  line-height: 20px;
  display: block;
}

.exec__plan-action-timeline {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  display: block;
  margin-top: 1px;
}

/* --- Resources --- */
.exec__plan-resources {
  padding: 12px 16px;
  border-top: 1px solid var(--alpha-light-50);
}

.exec__plan-resources-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
  display: block;
  margin-bottom: 8px;
}

.exec__plan-resource {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--alpha-light-50);
}

.exec__plan-resource:last-child {
  border-bottom: none;
}

.exec__plan-resource-type {
  font-size: 12px;
  font-weight: 600;
  color: #4338ca;
  background: rgba(67, 56, 202, 0.08);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.exec__plan-resource-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--alpha-light-900);
  flex: 1;
  min-width: 0;
}

.exec__plan-resource-area {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  white-space: nowrap;
}

/* --- Milestones --- */
.exec__plan-milestones {
  padding: 12px 16px;
  border-top: 1px solid var(--alpha-light-50);
}

.exec__plan-milestones-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
  display: block;
  margin-bottom: 8px;
}

.exec__plan-milestone {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--alpha-light-50);
}

.exec__plan-milestone:last-child {
  border-bottom: none;
}

.exec__plan-milestone-day {
  font-size: 13px;
  font-weight: 600;
  color: #4338ca;
  white-space: nowrap;
  min-width: 56px;
}

.exec__plan-milestone-text {
  font-size: 13px;
  font-weight: 400;
  color: var(--alpha-light-600);
  line-height: 20px;
}


/* ========================================================
   DEMO 9 — WealthIQ AI: Financial Coach
   ======================================================== */

/* --- Thinking State --- */
.wealth__thinking {
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.wealth__thinking-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(5, 150, 105, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scanPulse 1.5s ease-in-out infinite;
}

.wealth__thinking-icon svg {
  width: 24px;
  height: 24px;
  color: #059669;
}

.wealth__thinking-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
}

.wealth__thinking-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.wealth__thinking-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  animation: stepFadeIn 600ms ease-out both;
}

.wealth__thinking-step:nth-child(1) { animation-delay: 0ms; }
.wealth__thinking-step:nth-child(2) { animation-delay: 400ms; }
.wealth__thinking-step:nth-child(3) { animation-delay: 800ms; }
.wealth__thinking-step:nth-child(4) { animation-delay: 1200ms; }

.wealth__thinking-step .connect-seq__check {
  width: 14px;
  height: 14px;
  color: #059669;
  flex-shrink: 0;
  margin-left: 0;
}

.wealth__progress {
  width: 120px;
  height: 4px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.wealth__progress-fill {
  height: 100%;
  width: 0%;
  background: #059669;
  border-radius: 999px;
  animation: scanBarFill 2.8s ease-out forwards;
}

/* ========================================================
   WealthIQ AI — Budget Tracker
   ======================================================== */

/* --- Income Bar --- */
.wealth__income-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--alpha-light-25);
  border-bottom: 1px solid var(--alpha-light-50);
}

.wealth__income-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
}

.wealth__income-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

/* --- Budget Sections --- */
.wealth__budget-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--alpha-light-50);
}

.wealth__budget-section:last-of-type {
  border-bottom: none;
}

.wealth__budget-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.wealth__budget-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
}

.wealth__budget-section-amount {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
}

/* --- Budget Lines --- */
.wealth__budget-line {
  margin-bottom: 8px;
}

.wealth__budget-line:last-child {
  margin-bottom: 0;
}

.wealth__budget-line-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.wealth__budget-line-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--alpha-light-600);
}

.wealth__budget-line-amounts {
  display: flex;
  align-items: center;
  gap: 2px;
}

.wealth__budget-line-spent {
  font-size: 13px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.wealth__budget-line-sep {
  font-size: 12px;
  color: var(--alpha-light-300);
}

.wealth__budget-line-budgeted {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

.wealth__budget-bar {
  width: 100%;
  height: 4px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.wealth__budget-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 600ms ease-out;
}

.wealth__budget-bar-fill--green { background: #059669; }
.wealth__budget-bar-fill--yellow { background: var(--amber-500); }
.wealth__budget-bar-fill--red { background: var(--red-600); }

.wealth__budget-line-remaining {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  display: block;
  margin-top: 2px;
}

.wealth__budget-line-remaining--over {
  color: var(--red-600);
}

/* --- Total --- */
.wealth__budget-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--alpha-light-25);
  border-top: 1px solid var(--alpha-light-50);
}

.wealth__budget-total-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.wealth__budget-total-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
}


/* ========================================================
   WealthIQ AI — Transaction Feed
   ======================================================== */

.wealth__tx-filters {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--alpha-light-50);
}

.wealth__tx-filter {
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  background: var(--alpha-light-25);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  transition: all 150ms ease-out;
  line-height: 16px;
}

.wealth__tx-filter--active {
  background: var(--white);
  border-color: var(--alpha-light-100);
  color: var(--alpha-light-900);
  box-shadow: 0px 1px 2px rgba(0,0,0,0.06);
}

.wealth__tx-filter:hover:not(.wealth__tx-filter--active) {
  color: var(--alpha-light-600);
  background: var(--alpha-light-50);
}

/* --- Transaction List --- */
.wealth__tx-list {
  padding: 0 16px;
}

.wealth__tx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--alpha-light-50);
}

.wealth__tx-row:last-child {
  border-bottom: none;
}

.wealth__tx-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.wealth__tx-date {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  min-width: 40px;
  white-space: nowrap;
}

.wealth__tx-details {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.wealth__tx-merchant {
  font-size: 13px;
  font-weight: 500;
  color: var(--alpha-light-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wealth__tx-category {
  display: inline-flex;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
  flex-shrink: 0;
}

.wealth__tx-category--needs {
  background: rgba(5, 150, 105, 0.08);
  color: #059669;
}

.wealth__tx-category--wants {
  background: rgba(67, 56, 202, 0.08);
  color: #4338ca;
}

.wealth__tx-category--income {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--green-600);
}

/* --- Transaction Right Side --- */
.wealth__tx-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.wealth__tx-amount {
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.wealth__tx-amount--positive {
  color: #059669;
}

.wealth__tx-amount--negative {
  color: var(--alpha-light-900);
}

.wealth__tx-balance {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

/* --- AI Insight Callout --- */
.wealth__tx-insight {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  margin: 8px 16px 16px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.12);
  border-radius: 12px;
}

.wealth__tx-insight-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--amber-500);
  margin-top: 2px;
}

.wealth__tx-insight-icon svg {
  width: 16px;
  height: 16px;
}

.wealth__tx-insight-text {
  font-size: 13px;
  font-weight: 400;
  color: var(--alpha-light-600);
  line-height: 20px;
}

.wealth__tx-insight-text strong {
  font-weight: 600;
  color: var(--alpha-light-900);
}


/* ========================================================
   WealthIQ AI — Savings Goals
   ======================================================== */

.wealth__goals {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wealth__goal {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--alpha-light-50);
}

.wealth__goal:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.wealth__goal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.wealth__goal-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
}

.wealth__goal-pct {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.wealth__goal-amounts {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 6px;
}

.wealth__goal-current {
  font-size: 16px;
  font-weight: 600;
  color: var(--alpha-light-900);
}

.wealth__goal-target {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

.wealth__goal-bar {
  width: 100%;
  height: 6px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}

.wealth__goal-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 800ms ease-out;
}

.wealth__goal-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wealth__goal-contribution {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
}

.wealth__goal-completion {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
}

/* --- Recommendation --- */
.wealth__goal-recommendation {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  margin: 0 16px 12px;
  background: rgba(5, 150, 105, 0.06);
  border: 1px solid rgba(5, 150, 105, 0.12);
  border-radius: 12px;
}

.wealth__goal-recommendation-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: #059669;
  margin-top: 2px;
}

.wealth__goal-recommendation-icon svg {
  width: 16px;
  height: 16px;
}

.wealth__goal-recommendation-text {
  font-size: 13px;
  font-weight: 400;
  color: var(--alpha-light-600);
  line-height: 20px;
}

.wealth__goal-recommendation-text strong {
  font-weight: 600;
  color: var(--alpha-light-900);
}


/* ========================================================
   WealthIQ AI — Financial Health Score
   ======================================================== */

/* --- Ring Section --- */
.wealth__health-ring-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 16px;
  gap: 8px;
}

.wealth__health-ring {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}

.wealth__health-ring-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.wealth__health-ring-progress {
  transition: stroke-dashoffset 1.2s ease-out;
}

.wealth__health-ring-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.wealth__health-ring-score {
  font-size: 32px;
  font-weight: 700;
  color: var(--alpha-light-900);
  line-height: 1;
  letter-spacing: -1px;
}

.wealth__health-ring-max {
  font-size: 13px;
  font-weight: 500;
  color: var(--alpha-light-400);
  margin-top: 2px;
}

.wealth__health-ring-status {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.15px;
}

/* --- Component Scores --- */
.wealth__health-components {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--alpha-light-50);
}

.wealth__health-components-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
  display: block;
  margin-bottom: 10px;
}

.wealth__health-component {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.wealth__health-component:last-child {
  margin-bottom: 0;
}

.wealth__health-component-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--alpha-light-600);
  min-width: 110px;
  flex-shrink: 0;
}

.wealth__health-component-bar {
  flex: 1;
  height: 4px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.wealth__health-component-bar-fill {
  height: 100%;
  background: #059669;
  border-radius: 999px;
  transition: width 600ms ease-out;
}

.wealth__health-component-score {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  min-width: 24px;
  text-align: right;
}

.wealth__health-component-trend {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
  min-width: 32px;
}

.wealth__health-component-trend--up {
  color: #059669;
}

.wealth__health-component-trend--down {
  color: var(--red-600);
}

.wealth__health-trend-icon {
  width: 12px;
  height: 12px;
}

.wealth__health-trend-icon--up {
  color: #059669;
}

.wealth__health-trend-icon--down {
  color: var(--red-600);
}

/* --- Recommendations --- */
.wealth__health-recs {
  padding: 12px 16px;
  border-top: 1px solid var(--alpha-light-50);
}

.wealth__health-recs-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  letter-spacing: -0.15px;
  display: block;
  margin-bottom: 8px;
}

.wealth__health-rec {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--alpha-light-50);
}

.wealth__health-rec:last-child {
  border-bottom: none;
}

.wealth__health-rec-num {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(5, 150, 105, 0.08);
  color: #059669;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.wealth__health-rec-text {
  font-size: 13px;
  font-weight: 400;
  color: var(--alpha-light-600);
  line-height: 20px;
}

/* --- Urgent status pill (extension of shared status-pill) --- */
.status-pill--urgent {
  background: rgba(220, 38, 38, 0.08);
  color: var(--red-600);
}

/* =============================================
   DEMOS 10-12: INFLUENCER, JOURNALING, PROGRESS REPORT
   ============================================= */
/* ========================================================
   BATCH 4 — DEMO 10: VIRALMIND AI (Influencer Coach)
              DEMO 11: REFLECT AI (Journaling Coach)
              DEMO 12: PULSE AI (Progress Reporter)
   ======================================================== */


/* ========================================================
   DEMO 10: VIRALMIND AI — Shared Thinking State
   ======================================================== */

.vm__thinking {
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.vm__thinking-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(225, 29, 72, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scanPulse 1.5s ease-in-out infinite;
}

.vm__thinking-icon svg {
  width: 24px;
  height: 24px;
  color: #e11d48;
}

.vm__thinking-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
}

.vm__thinking-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.vm__thinking-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  animation: stepFadeIn 600ms ease-out both;
}

.vm__thinking-step:nth-child(1) { animation-delay: 0ms; }
.vm__thinking-step:nth-child(2) { animation-delay: 400ms; }
.vm__thinking-step:nth-child(3) { animation-delay: 800ms; }

.vm__thinking-step .connect-seq__check {
  width: 14px;
  height: 14px;
  color: #e11d48;
  flex-shrink: 0;
  margin-left: 0;
}

.vm__progress {
  width: 120px;
  height: 4px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.vm__progress-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #e11d48, #fb7185);
  border-radius: 999px;
  animation: scanBarFill 3s ease-out forwards;
}


/* ========================================================
   REEL SCRIPTS
   ======================================================== */

.reel__panels {
  padding: 0;
}

.reel__panel {
  padding: 16px;
  animation: cardFadeIn 300ms ease-out;
}

.reel__section {
  padding: 12px;
  margin-bottom: 8px;
  background: var(--alpha-light-25);
  border-radius: 12px;
  border: 1px solid var(--alpha-light-50);
}

.reel__section--hook {
  background: rgba(225, 29, 72, 0.04);
  border-color: rgba(225, 29, 72, 0.08);
}

.reel__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.reel__section-badge {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: -0.15px;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--alpha-light-900);
  background: var(--alpha-light-50);
}

.reel__section-badge--hook {
  background: rgba(225, 29, 72, 0.10);
  color: #e11d48;
}

.reel__section-badge--body {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--alpha-brand-950);
}

.reel__section-badge--cta {
  background: rgba(59, 130, 246, 0.10);
  color: #2563eb;
}

.reel__section-time {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  line-height: 16px;
}

.reel__section-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
  line-height: 22px;
  letter-spacing: -0.15px;
}

.reel__section-text--hook {
  font-weight: 600;
  font-style: italic;
}

.reel__body-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reel__body-point {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
  letter-spacing: -0.15px;
  padding-left: 16px;
  position: relative;
}

.reel__body-point::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--alpha-light-300);
}

.reel__meta-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  margin-top: 4px;
  background: var(--alpha-light-25);
  border-radius: 12px;
  border: 1px solid var(--alpha-light-50);
}

.reel__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reel__meta-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-500);
  line-height: 16px;
  letter-spacing: -0.15px;
}

.reel__meta-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
  letter-spacing: -0.15px;
}

.reel__meta-value--highlight {
  color: var(--alpha-light-900);
  font-weight: 600;
}

.reel__copy-btn-wrap {
  padding-top: 12px;
  display: flex;
  justify-content: flex-end;
}


/* ========================================================
   TRENDING SUGGESTIONS
   ======================================================== */

.trend__categories {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.trend__category-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 16px;
  letter-spacing: -0.15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-bottom: 8px;
}

.trend__item {
  padding: 12px;
  background: var(--alpha-light-25);
  border: 1px solid var(--alpha-light-50);
  border-radius: 12px;
  margin-bottom: 8px;
}

.trend__item:last-child {
  margin-bottom: 0;
}

.trend__item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.trend__item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 20px;
  letter-spacing: -0.15px;
}

.trend__heat {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trend__heat-bar {
  width: 60px;
  height: 6px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.trend__heat-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #fb7185, #e11d48);
  transition: width 600ms ease-out;
}

.trend__heat-score {
  font-size: 12px;
  font-weight: 600;
  color: #e11d48;
  line-height: 16px;
  min-width: 20px;
  text-align: right;
}

.trend__item-desc {
  font-size: 14px;
  font-weight: 400;
  color: var(--alpha-light-600);
  line-height: 20px;
  letter-spacing: -0.15px;
  margin: 0 0 8px;
}

.trend__item-audio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 16px;
  margin-bottom: 10px;
}

.trend__item-audio svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.trend__use-btn {
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 12px;
  font-weight: 500;
  color: #e11d48;
  background: rgba(225, 29, 72, 0.06);
  border: 1px solid rgba(225, 29, 72, 0.10);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 150ms ease-out;
  line-height: 16px;
  letter-spacing: -0.15px;
}

.trend__use-btn:hover {
  background: rgba(225, 29, 72, 0.10);
}


/* ========================================================
   CONTENT CALENDAR
   ======================================================== */

.cal-content__days {
  display: flex;
  flex-direction: column;
}

.cal-content__day {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--alpha-light-50);
  transition: background-color 100ms ease-out;
}

.cal-content__day:last-child {
  border-bottom: none;
}

.cal-content__day:hover {
  background: var(--alpha-light-25);
}

.cal-content__day-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cal-content__day-info {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.cal-content__day-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 20px;
  letter-spacing: -0.15px;
}

.cal-content__day-date {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  line-height: 16px;
}

.cal-content__day-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.cal-content__type-pill {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
  letter-spacing: -0.15px;
}

.cal-content__type-pill--reel {
  background: rgba(225, 29, 72, 0.08);
  color: #e11d48;
}

.cal-content__type-pill--carousel {
  background: rgba(59, 130, 246, 0.08);
  color: #2563eb;
}

.cal-content__type-pill--story {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--alpha-brand-950);
}

.cal-content__topic {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
  letter-spacing: -0.15px;
}

.cal-content__time {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  line-height: 16px;
}

.cal-content__status {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: -0.15px;
}

.cal-content__status--scheduled {
  color: var(--alpha-brand-950);
}

.cal-content__status--draft {
  color: #f59e0b;
}

.cal-content__status--idea {
  color: var(--alpha-light-400);
}


/* ========================================================
   CONTENT PERFORMANCE
   ======================================================== */

.perf__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--alpha-light-50);
  margin: 0 16px;
  border-radius: 12px;
  overflow: hidden;
}

.perf__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  background: var(--white);
}

.perf__metric-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 1;
}

.perf__metric-value--positive {
  color: var(--alpha-brand-950);
}

.perf__metric-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 16px;
}

.perf__section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 16px;
  letter-spacing: -0.15px;
  padding: 16px 16px 8px;
}

.perf__posts {
  display: flex;
  flex-direction: column;
}

.perf__post {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--alpha-light-50);
  transition: background-color 100ms ease-out;
}

.perf__post:last-child {
  border-bottom: none;
}

.perf__post:hover {
  background: var(--alpha-light-25);
}

.perf__post-rank {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-400);
  line-height: 20px;
  min-width: 16px;
  flex-shrink: 0;
}

.perf__post-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--alpha-light-25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.perf__post-thumb svg {
  width: 16px;
  height: 16px;
  color: var(--alpha-light-400);
}

.perf__post-info {
  flex: 1;
  min-width: 0;
}

.perf__post-caption {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
  line-height: 20px;
  letter-spacing: -0.15px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.perf__post-stats {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}

.perf__stat-mini {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  line-height: 16px;
}

.perf__best-time {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(225, 29, 72, 0.04);
  border-top: 1px solid var(--alpha-light-50);
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
}

.perf__best-time svg {
  width: 16px;
  height: 16px;
  color: #e11d48;
  flex-shrink: 0;
}

.perf__best-time strong {
  font-weight: 600;
  color: var(--alpha-light-900);
}


/* ========================================================
   DEMO 11: REFLECT AI — Shared Thinking State
   ======================================================== */

.reflect__thinking {
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.reflect__thinking-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scanPulse 1.5s ease-in-out infinite;
}

.reflect__thinking-icon svg {
  width: 24px;
  height: 24px;
  color: #7c3aed;
}

.reflect__thinking-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
}

.reflect__thinking-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.reflect__thinking-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  animation: stepFadeIn 600ms ease-out both;
}

.reflect__thinking-step:nth-child(1) { animation-delay: 0ms; }
.reflect__thinking-step:nth-child(2) { animation-delay: 400ms; }
.reflect__thinking-step:nth-child(3) { animation-delay: 800ms; }

.reflect__thinking-step .connect-seq__check {
  width: 14px;
  height: 14px;
  color: #7c3aed;
  flex-shrink: 0;
  margin-left: 0;
}

.reflect__progress {
  width: 120px;
  height: 4px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.reflect__progress-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #c084fc);
  border-radius: 999px;
  animation: scanBarFill 3s ease-out forwards;
}


/* ========================================================
   JOURNAL PROMPT
   ======================================================== */

.journal__prompt-area {
  padding: 16px;
}

.journal__ai-prompt {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: rgba(124, 58, 237, 0.04);
  border: 1px solid rgba(124, 58, 237, 0.08);
  border-radius: 12px;
  margin-bottom: 12px;
}

.journal__ai-prompt svg {
  width: 16px;
  height: 16px;
  color: #7c3aed;
  flex-shrink: 0;
  margin-top: 2px;
}

.journal__ai-prompt p {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
  line-height: 22px;
  letter-spacing: -0.15px;
  margin: 0;
}

.journal__prev-prompt {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.journal__prev-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  line-height: 16px;
  flex-shrink: 0;
}

.journal__prev-text {
  font-size: 12px;
  font-weight: 400;
  color: var(--alpha-light-400);
  line-height: 16px;
  font-style: italic;
}

.journal__writing-area {
  position: relative;
}

.journal__textarea {
  width: 100%;
  min-height: 140px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--alpha-light-100);
  border-radius: 12px;
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 14px;
  font-weight: 400;
  color: var(--alpha-light-900);
  line-height: 24px;
  letter-spacing: -0.15px;
  resize: none;
  outline: none;
  box-sizing: border-box;
  transition: border-color 150ms ease-out;
}

.journal__textarea:focus {
  border-color: var(--alpha-light-300);
}

.journal__placeholder {
  color: var(--alpha-light-400);
  font-style: italic;
}

.journal__word-count {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-300);
  line-height: 16px;
}

.journal__mood-section {
  padding: 0 16px 12px;
}

.journal__mood-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 16px;
  display: block;
  margin-bottom: 8px;
}

.journal__mood-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.journal__mood-tag {
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  background: var(--alpha-light-25);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  transition: all 150ms ease-out;
  line-height: 16px;
  letter-spacing: -0.15px;
}

.journal__mood-tag--active {
  background: rgba(124, 58, 237, 0.08);
  color: #7c3aed;
  border-color: rgba(124, 58, 237, 0.12);
}

.journal__mood-tag:hover:not(.journal__mood-tag--active) {
  background: var(--alpha-light-50);
  color: var(--alpha-light-600);
}


/* ========================================================
   JOURNAL HISTORY
   ======================================================== */

.journal-hist__filters {
  padding: 12px 16px;
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--alpha-light-50);
  overflow-x: auto;
}

.journal-hist__entries {
  display: flex;
  flex-direction: column;
}

.journal-hist__entry {
  padding: 12px 16px;
  border-bottom: 1px solid var(--alpha-light-50);
  transition: background-color 100ms ease-out;
}

.journal-hist__entry:last-child {
  border-bottom: none;
}

.journal-hist__entry:hover {
  background: var(--alpha-light-25);
}

.journal-hist__entry-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.journal-hist__date {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 16px;
}

.journal-hist__mood {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: -0.15px;
}

.journal-hist__mood--calm {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--alpha-brand-950);
}

.journal-hist__mood--anxious {
  background: rgba(245, 158, 11, 0.10);
  color: #d97706;
}

.journal-hist__mood--grateful {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--alpha-brand-950);
}

.journal-hist__mood--frustrated {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}

.journal-hist__mood--hopeful {
  background: rgba(59, 130, 246, 0.08);
  color: #2563eb;
}

.journal-hist__mood--reflective {
  background: rgba(124, 58, 237, 0.08);
  color: #7c3aed;
}

.journal-hist__preview {
  font-size: 14px;
  font-weight: 400;
  color: var(--alpha-light-600);
  line-height: 20px;
  letter-spacing: -0.15px;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.journal-hist__themes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.journal-hist__theme {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  background: var(--alpha-light-25);
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 16px;
  letter-spacing: -0.15px;
}

.journal-hist__view-btn {
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 12px;
  font-weight: 500;
  color: #7c3aed;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 16px;
  letter-spacing: -0.15px;
  transition: opacity 150ms ease-out;
}

.journal-hist__view-btn:hover {
  opacity: 0.7;
}


/* ========================================================
   PATTERN INSIGHTS
   ======================================================== */

.pattern__mood-trend {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(124, 58, 237, 0.04);
  border-bottom: 1px solid var(--alpha-light-50);
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
}

.pattern__mood-trend svg {
  width: 16px;
  height: 16px;
  color: #7c3aed;
  flex-shrink: 0;
}

.pattern__mood-trend strong {
  font-weight: 600;
  color: var(--alpha-light-900);
}

.pattern__items {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pattern__item {
  padding: 12px;
  background: var(--alpha-light-25);
  border: 1px solid var(--alpha-light-50);
  border-radius: 12px;
}

.pattern__item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 20px;
  letter-spacing: -0.15px;
  margin-bottom: 6px;
}

.pattern__item-observation {
  font-size: 14px;
  font-weight: 400;
  color: var(--alpha-light-600);
  line-height: 22px;
  letter-spacing: -0.15px;
  margin: 0 0 8px;
}

.pattern__item-quote {
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  color: var(--alpha-light-500);
  line-height: 20px;
  letter-spacing: -0.15px;
  padding-left: 12px;
  border-left: 2px solid rgba(124, 58, 237, 0.20);
}

.pattern__themes-section {
  padding: 0 16px 16px;
  border-top: 1px solid var(--alpha-light-50);
}

.pattern__themes-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 16px;
  letter-spacing: -0.15px;
  padding: 12px 0 8px;
}

.pattern__themes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pattern__theme-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pattern__theme-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
  min-width: 100px;
  flex-shrink: 0;
}

.pattern__theme-bar {
  flex: 1;
  height: 8px;
  background: var(--alpha-light-25);
  border-radius: 999px;
  overflow: hidden;
}

.pattern__theme-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #c084fc);
  border-radius: 999px;
  transition: width 600ms ease-out;
}

.pattern__theme-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 20px;
  min-width: 16px;
  text-align: right;
}


/* ========================================================
   JOURNAL STREAK
   ======================================================== */

.streak__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px;
  border-bottom: 1px solid var(--alpha-light-50);
}

.streak__current {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.streak__current-number {
  font-size: 48px;
  font-weight: 600;
  color: #7c3aed;
  line-height: 1;
}

.streak__current-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 20px;
}

.streak__best {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.streak__best-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  line-height: 16px;
}

.streak__best-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 20px;
}

.streak__heatmap-section {
  padding: 12px 16px 16px;
  border-bottom: 1px solid var(--alpha-light-50);
}

.streak__heatmap-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 16px;
  margin-bottom: 8px;
}

.streak__heatmap-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding-bottom: 6px;
}

.streak__heatmap-header span {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  text-align: center;
  line-height: 16px;
}

.streak__heatmap-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.streak__cell {
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--alpha-light-25);
  transition: background-color 150ms ease-out;
}

.streak__cell--done {
  background: rgba(124, 58, 237, 0.15);
}

.streak__cell--today {
  outline: 2px solid #7c3aed;
  outline-offset: -1px;
}

.streak__cell--future {
  background: var(--alpha-light-25);
  opacity: 0.4;
}

.streak__heatmap-legend {
  display: flex;
  gap: 16px;
  padding-top: 8px;
  justify-content: flex-end;
}

.streak__legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.streak__legend-item span {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  line-height: 16px;
}

.streak__legend-swatch {
  width: 12px;
  height: 12px;
}

.streak__stats-row {
  display: flex;
  gap: 1px;
  background: var(--alpha-light-50);
  margin: 0 16px;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 12px;
}

.streak__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  background: var(--white);
}

.streak__stat-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 1;
}

.streak__stat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 16px;
}

.streak__weekly-section {
  padding: 16px;
}

.streak__weekly-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 16px;
  margin-bottom: 10px;
}

.streak__week-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.streak__week-bar-row:last-child {
  margin-bottom: 0;
}

.streak__week-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 16px;
  min-width: 52px;
  flex-shrink: 0;
}

.streak__week-bar {
  flex: 1;
  height: 8px;
  background: var(--alpha-light-25);
  border-radius: 999px;
  overflow: hidden;
}

.streak__week-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #c084fc);
  border-radius: 999px;
  transition: width 600ms ease-out;
}

.streak__week-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 16px;
  min-width: 24px;
  text-align: right;
}

.streak__encouragement {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(124, 58, 237, 0.04);
  border-top: 1px solid var(--alpha-light-50);
  font-size: 14px;
  font-weight: 400;
  color: var(--alpha-light-600);
  line-height: 22px;
}

.streak__encouragement svg {
  width: 16px;
  height: 16px;
  color: #7c3aed;
  flex-shrink: 0;
  margin-top: 3px;
}


/* ========================================================
   DEMO 12: PULSE AI — Shared Thinking State
   ======================================================== */

.pulse__thinking {
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.pulse__thinking-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(30, 58, 95, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scanPulse 1.5s ease-in-out infinite;
}

.pulse__thinking-icon svg {
  width: 24px;
  height: 24px;
  color: #1e3a5f;
}

.pulse__thinking-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
}

.pulse__thinking-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 320px;
}

.pulse__thinking-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  animation: stepFadeIn 600ms ease-out both;
}

.pulse__thinking-step:nth-child(1) { animation-delay: 0ms; }
.pulse__thinking-step:nth-child(2) { animation-delay: 400ms; }
.pulse__thinking-step:nth-child(3) { animation-delay: 800ms; }
.pulse__thinking-step:nth-child(4) { animation-delay: 1200ms; }
.pulse__thinking-step:nth-child(5) { animation-delay: 1600ms; }

.pulse__thinking-step .connect-seq__check {
  width: 14px;
  height: 14px;
  color: #1e3a5f;
  flex-shrink: 0;
  margin-left: 0;
}

.pulse__progress {
  width: 120px;
  height: 4px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
}

.pulse__progress-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #1e3a5f, #60a5fa);
  border-radius: 999px;
  animation: scanBarFill 3s ease-out forwards;
}

.pulse__progress-fill--long {
  animation: scanBarFill 18.5s ease-in-out forwards;
}

.pulse__thinking--long .pulse__thinking-step:nth-child(1) { animation-delay: 0ms; }
.pulse__thinking--long .pulse__thinking-step:nth-child(2) { animation-delay: 3000ms; }
.pulse__thinking--long .pulse__thinking-step:nth-child(3) { animation-delay: 7000ms; }
.pulse__thinking--long .pulse__thinking-step:nth-child(4) { animation-delay: 11000ms; }
.pulse__thinking--long .pulse__thinking-step:nth-child(5) { animation-delay: 15000ms; }


/* ========================================================
   PROGRESS REPORT
   ======================================================== */

.report__section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--alpha-light-50);
}

.report__section:last-of-type {
  border-bottom: none;
}

.report__section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 16px;
  letter-spacing: -0.15px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.report__section-body {
  font-size: 14px;
  font-weight: 400;
  color: var(--alpha-light-600);
  line-height: 22px;
  letter-spacing: -0.15px;
  margin: 0;
}

.report__metrics {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.report__metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--alpha-light-25);
  border-radius: 8px;
}

.report__metric-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
  flex-shrink: 0;
}

.report__metric-values {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.report__metric-current {
  font-size: 16px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 20px;
}

.report__metric-comparison {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  line-height: 16px;
}

.report__metric-change {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.report__metric-change--positive {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--alpha-brand-950);
}

.report__metric-change--negative {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}

.report__goals {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.report__goal {
  padding: 0;
}

.report__goal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.report__goal-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
  line-height: 20px;
  letter-spacing: -0.15px;
}

.report__goal-status {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: -0.15px;
}

.report__goal-status--completed {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--alpha-brand-950);
}

.report__goal-status--on-track {
  background: rgba(59, 130, 246, 0.08);
  color: #2563eb;
}

.report__goal-status--in-progress {
  background: rgba(245, 158, 11, 0.10);
  color: #d97706;
}

.report__goal-bar {
  width: 100%;
  height: 6px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 4px;
}

.report__goal-fill {
  height: 100%;
  background: linear-gradient(90deg, #1e3a5f, #60a5fa);
  border-radius: 999px;
  transition: width 600ms ease-out;
}

.report__goal-pct {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-500);
  line-height: 16px;
}

.report__highlights,
.report__improvements,
.report__next-steps {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.report__highlights li,
.report__improvements li,
.report__next-steps li {
  font-size: 14px;
  font-weight: 400;
  color: var(--alpha-light-600);
  line-height: 22px;
  letter-spacing: -0.15px;
}


/* ========================================================
   ACTIVITY AGGREGATOR
   ======================================================== */

.activity__summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--alpha-light-50);
  margin: 0 16px;
  border-radius: 12px;
  overflow: hidden;
}

.activity__summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  background: var(--white);
}

.activity__summary-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 1;
}

.activity__summary-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 16px;
}

.activity__filters {
  padding: 12px 16px;
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--alpha-light-50);
  overflow-x: auto;
}

.activity__items {
  display: flex;
  flex-direction: column;
}

.activity__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--alpha-light-50);
  transition: background-color 100ms ease-out;
}

.activity__item:last-child {
  border-bottom: none;
}

.activity__item:hover {
  background: var(--alpha-light-25);
}

.activity__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.activity__icon svg {
  width: 16px;
  height: 16px;
}

.activity__icon--session {
  background: rgba(59, 130, 246, 0.08);
  color: #2563eb;
}

.activity__icon--assignment {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--alpha-brand-950);
}

.activity__icon--message {
  background: rgba(124, 58, 237, 0.08);
  color: #7c3aed;
}

.activity__icon--payment {
  background: rgba(245, 158, 11, 0.10);
  color: #d97706;
}

.activity__info {
  flex: 1;
  min-width: 0;
}

.activity__desc {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
  line-height: 20px;
  letter-spacing: -0.15px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity__date {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  line-height: 16px;
}

.activity__status {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  flex-shrink: 0;
  letter-spacing: -0.15px;
}

.activity__status--session {
  color: #2563eb;
}

.activity__status--assignment {
  color: var(--alpha-brand-950);
}

.activity__status--message {
  color: #7c3aed;
}

.activity__status--payment {
  color: #d97706;
}


/* ========================================================
   REPORT TEMPLATE
   ======================================================== */

.template__sections {
  padding: 16px;
  border-bottom: 1px solid var(--alpha-light-50);
}

.template__sections-label,
.template__branding-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 16px;
  letter-spacing: -0.15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.template__section-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--alpha-light-50);
}

.template__section-row:last-child {
  border-bottom: none;
}

.template__section-order {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-400);
  line-height: 16px;
  min-width: 16px;
  text-align: center;
}

.template__section-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
  line-height: 20px;
  letter-spacing: -0.15px;
  flex: 1;
}

.template__toggle {
  cursor: pointer;
  flex-shrink: 0;
}

.template__toggle-track {
  width: 36px;
  height: 20px;
  background: var(--alpha-light-200);
  border-radius: 999px;
  position: relative;
  transition: background-color 150ms ease-out;
}

.template__toggle--on .template__toggle-track {
  background: rgba(30, 58, 95, 0.80);
}

.template__toggle-thumb {
  width: 16px;
  height: 16px;
  background: var(--white);
  border-radius: 999px;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 150ms ease-out;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.08);
}

.template__toggle--on .template__toggle-thumb {
  transform: translateX(16px);
}

.template__branding {
  padding: 16px;
}

.template__brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--alpha-light-50);
}

.template__brand-row:last-child {
  border-bottom: none;
}

.template__brand-field-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
}

.template__brand-field-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
  line-height: 20px;
}

.template__logo-placeholder {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--alpha-light-25);
  border: 1px dashed var(--alpha-light-200);
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms ease-out;
}

.template__logo-placeholder:hover {
  background: var(--alpha-light-50);
}

.template__logo-placeholder svg {
  width: 16px;
  height: 16px;
  color: var(--alpha-light-400);
}

.template__logo-placeholder span {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-500);
  line-height: 16px;
}

.template__color-row {
  display: flex;
  gap: 8px;
}

.template__color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 150ms ease-out;
  border: 2px solid transparent;
}

.template__color-swatch--active {
  border-color: var(--alpha-light-900);
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--alpha-light-300);
}

.template__color-swatch:hover:not(.template__color-swatch--active) {
  transform: scale(1.15);
}


/* ========================================================
   REPORT SCHEDULER
   ======================================================== */

.scheduler__frequency {
  padding: 16px;
  border-bottom: 1px solid var(--alpha-light-50);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.scheduler__field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--alpha-light-900);
  line-height: 16px;
  letter-spacing: -0.15px;
}

.scheduler__timing {
  padding: 12px 16px;
  display: flex;
  gap: 16px;
  border-bottom: 1px solid var(--alpha-light-50);
}

.scheduler__timing-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.scheduler__field-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
  line-height: 20px;
  padding: 6px 10px;
  background: var(--alpha-light-25);
  border: 1px solid var(--alpha-light-100);
  border-radius: 8px;
}

.scheduler__recipients-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--alpha-light-50);
}

.scheduler__recipients-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.scheduler__add-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-variation-settings: 'wdth' 100;
  font-size: 12px;
  font-weight: 500;
  color: #1e3a5f;
  background: rgba(30, 58, 95, 0.06);
  border: 1px solid rgba(30, 58, 95, 0.10);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 150ms ease-out;
  line-height: 16px;
}

.scheduler__add-btn:hover {
  background: rgba(30, 58, 95, 0.10);
}

.scheduler__add-btn svg {
  width: 12px;
  height: 12px;
}

.scheduler__recipients {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scheduler__recipient {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--alpha-light-25);
  border-radius: 8px;
}

.scheduler__recipient-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.scheduler__recipient-email {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-900);
  line-height: 20px;
  letter-spacing: -0.15px;
}

.scheduler__recipient-role {
  font-size: 12px;
  font-weight: 500;
  color: var(--alpha-light-400);
  line-height: 16px;
  padding: 1px 6px;
  background: var(--alpha-light-50);
  border-radius: 4px;
}

.scheduler__remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: var(--alpha-light-400);
  transition: all 150ms ease-out;
  padding: 0;
}

.scheduler__remove-btn:hover {
  background: var(--alpha-light-50);
  color: var(--alpha-light-600);
}

.scheduler__remove-btn svg {
  width: 12px;
  height: 12px;
}

.scheduler__next-report {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(30, 58, 95, 0.04);
  border-bottom: 1px solid var(--alpha-light-50);
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
}

.scheduler__next-report svg {
  width: 16px;
  height: 16px;
  color: #1e3a5f;
  flex-shrink: 0;
}

.scheduler__next-report strong {
  font-weight: 600;
  color: var(--alpha-light-900);
}

.scheduler__history-section {
  padding: 12px 16px;
}

.scheduler__history {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.scheduler__history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--alpha-light-25);
  border-radius: 8px;
}

.scheduler__history-date {
  font-size: 14px;
  font-weight: 500;
  color: var(--alpha-light-600);
  line-height: 20px;
}

.scheduler__history-status {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: -0.15px;
}

.scheduler__history-status--delivered {
  background: var(--alpha-light-50);
  color: var(--alpha-light-500);
}

.scheduler__history-status--opened {
  background: rgba(59, 130, 246, 0.08);
  color: #2563eb;
}

.scheduler__history-status--clicked {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--alpha-brand-950);
}

/* =============================================
   FIXES: Minor missing classes (Demos 5-12)
   ============================================= */

/* Demo 5-6: Comparables card stat wrapper */
.comp__card-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Demo 7: TX Coordinator checklist item status variants */
.txcoord__checklist-item--in-progress .txcoord__checklist-icon {
  color: rgba(59, 130, 246, 0.8);
}
.txcoord__checklist-item--pending {
  opacity: 0.6;
}
.txcoord__checklist-item--overdue .txcoord__checklist-icon {
  color: rgba(220, 38, 38, 0.8);
}
.txcoord__checklist-item--overdue .txcoord__checklist-item-task {
  color: rgba(220, 38, 38, 0.88);
}

/* Demo 10: Trending category wrapper */
.trend__category {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.trend__category:last-child {
  margin-bottom: 0;
}

/* Demo 12: Activity item type modifiers (for filtering) */
.activity__item--session,
.activity__item--assignment,
.activity__item--message,
.activity__item--payment {
  /* Base styling handled by .activity__item; these exist for JS filtering */
}

/* =============================================
   FIX: Missing CSS for Demos 1-2 (Trainer, FB Ads)
   ============================================= */
/* ================================================================
   FIX-DEMOS12.CSS
   Missing CSS class definitions for Demo 1 (Personal Trainer)
   and Demo 2 (Facebook Ads Manager) builder functions in app.js
   ================================================================ */


/* ================================================================
   DEMO 1: PERSONAL TRAINER AI
   ================================================================ */

/* ========================================================
   1a. MEAL PLAN — trainer-meal__ classes
   ======================================================== */

/* Target rings row (ring + macro bars side by side) */
.trainer-meal__targets {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}

/* Circular progress ring */
.trainer-meal__target-ring {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.trainer-meal__target-ring svg {
  width: 80px;
  height: 80px;
  display: block;
}

.trainer-meal__target-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.trainer-meal__target-ring-val {
  font-size: 16px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  line-height: 1.1;
}

.trainer-meal__target-ring-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.48);
  line-height: 1.2;
}

/* Macro progress rows */
.trainer-meal__macro-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trainer-meal__macro-row + .trainer-meal__macro-row {
  margin-top: 8px;
}

.trainer-meal__macro-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.trainer-meal__macro-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.55);
  letter-spacing: -0.15px;
}

.trainer-meal__macro-val {
  font-size: 12px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.48);
}

.trainer-meal__macro-bar {
  height: 4px;
  background: rgba(26, 26, 26, 0.06);
  border-radius: 999px;
  overflow: hidden;
}

.trainer-meal__macro-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 600ms ease-out;
}

/* Meal slots container */
.trainer-meal__slots {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 16px;
}

/* Individual meal slot row */
.trainer-meal__slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}

.trainer-meal__slot:last-child {
  border-bottom: none;
}

.trainer-meal__slot-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.trainer-meal__slot-emoji {
  font-size: 16px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.trainer-meal__slot-time {
  font-size: 12px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.48);
  line-height: 16px;
  letter-spacing: -0.15px;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 100;
}

.trainer-meal__slot-name {
  font-size: 14px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.88);
  line-height: 20px;
  letter-spacing: -0.15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trainer-meal__slot-macros {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 12px;
}

.trainer-meal__slot-cal {
  font-size: 13px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  line-height: 20px;
  white-space: nowrap;
}

.trainer-meal__slot-macro {
  font-size: 12px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.48);
  white-space: nowrap;
}


/* ========================================================
   1b. WEEKLY NUTRITION — trainer-week__ classes
   ======================================================== */

/* Top row: ring + macro bars side by side */
.trainer-week__top-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}

.trainer-week__macro-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 7-day calorie bar chart */
.trainer-week__chart {
  position: relative;
  padding: 16px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}

.trainer-week__chart-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  letter-spacing: -0.15px;
  margin-bottom: 12px;
}

/* Target line overlay */
.trainer-week__chart-target {
  position: absolute;
  left: 16px;
  right: 16px;
  border-top: 1px dashed rgba(26, 26, 26, 0.15);
  pointer-events: none;
}

.trainer-week__chart-target span {
  position: absolute;
  top: -10px;
  right: 0;
  font-size: 10px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.35);
  background: #fff;
  padding: 0 4px;
}

/* Bar columns container */
.trainer-week__bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 100px;
}

.trainer-week__bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
}

.trainer-week__bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.trainer-week__bar {
  width: 100%;
  max-width: 28px;
  border-radius: 4px 4px 0 0;
  transition: height 600ms ease-out;
  min-height: 2px;
}

.trainer-week__bar--under {
  background: color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.trainer-week__bar--over {
  background: rgba(245, 158, 11, 0.35);
}

.trainer-week__bar--today {
  background: color-mix(in srgb, var(--color-primary) 60%, transparent);
}

.trainer-week__bar-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.48);
  line-height: 1;
}

/* Today's meals section */
.trainer-week__today-meals {
  padding: 12px 16px 16px;
}

.trainer-week__meals-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  letter-spacing: -0.15px;
  margin-bottom: 8px;
}

.trainer-week__meal-row {
  display: flex;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}

.trainer-week__meal-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.trainer-week__meal-name {
  font-size: 13px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.88);
  flex: 1;
}

.trainer-week__meal-time {
  font-size: 12px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.48);
  margin-right: 12px;
}

.trainer-week__meal-cal {
  font-size: 13px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  white-space: nowrap;
}


/* ========================================================
   1c. WORKOUT PLAN — trainer-workout__ classes
   ======================================================== */

.trainer-workout__plan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
}

.trainer-workout__day {
  background: rgba(26, 26, 26, 0.04);
  border-radius: 12px;
  overflow: hidden;
}

.trainer-workout__day--rest {
  background: rgba(26, 26, 26, 0.02);
  opacity: 0.75;
}

.trainer-workout__day-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}

.trainer-workout__day-name {
  font-size: 14px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  line-height: 20px;
}

.trainer-workout__day-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.55);
  line-height: 16px;
}

.trainer-workout__day-label--rest {
  color: rgba(26, 26, 26, 0.35);
  font-style: italic;
}

.trainer-workout__day-progress {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  margin-left: auto;
}

.trainer-workout__rest-text {
  font-size: 13px;
  font-weight: 400;
  color: rgba(26, 26, 26, 0.35);
  padding: 0 12px 10px;
  font-style: italic;
}

/* Exercise list */
.trainer-workout__exercises {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 12px 10px;
  border-top: 1px solid rgba(26, 26, 26, 0.06);
}

.trainer-workout__exercise {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}

.trainer-workout__exercise:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.trainer-workout__exercise--done {
  opacity: 0.55;
}

/* Checkbox */
.trainer-workout__check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid rgba(26, 26, 26, 0.2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trainer-workout__check--done {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
  color: var(--color-primary);
}

.trainer-workout__check--done svg {
  width: 12px;
  height: 12px;
}

.trainer-workout__ex-name {
  font-size: 13px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.88);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trainer-workout__ex-detail {
  font-size: 12px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.55);
  white-space: nowrap;
  flex-shrink: 0;
}

.trainer-workout__ex-weight {
  font-size: 12px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.48);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 48px;
  text-align: right;
}

/* Actions row beneath workout plan */
.trainer-workout__actions {
  display: flex;
  gap: 8px;
  padding: 0 16px 16px;
}


/* ========================================================
   1d. ACCOUNTABILITY CHECK-IN — trainer-checkin__ classes
   ======================================================== */

.trainer-checkin__questions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.trainer-checkin__q {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trainer-checkin__q-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  line-height: 20px;
}

/* Selectable pill-button options */
.trainer-checkin__q-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.trainer-checkin__opt {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-family: 'Instrument Sans', sans-serif;
  font-variation-settings: 'wdth' 100;
  font-size: 13px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.6);
  background: rgba(26, 26, 26, 0.04);
  border: 1px solid rgba(26, 26, 26, 0.09);
  border-radius: 999px;
  cursor: pointer;
  transition: all 150ms ease-out;
  white-space: nowrap;
}

.trainer-checkin__opt:hover {
  background: rgba(26, 26, 26, 0.06);
}

.trainer-checkin__opt.selected {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
  color: var(--color-primary);
  font-weight: 600;
}

/* Slider (water intake) */
.trainer-checkin__slider-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.trainer-checkin__slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(26, 26, 26, 0.09);
  border-radius: 999px;
  outline: none;
}

.trainer-checkin__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--color-primary);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.trainer-checkin__slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--color-primary);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.trainer-checkin__slider-val {
  font-size: 14px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  min-width: 70px;
  white-space: nowrap;
}

/* Submit button wrapper */
.trainer-checkin__submit-wrap {
  padding: 0 16px 16px;
}

/* Summary section (shown after submit) */
.trainer-checkin__summary {
  padding: 16px;
  border-top: 1px solid rgba(26, 26, 26, 0.06);
  animation: cardFadeIn 200ms ease-out;
}

.trainer-checkin__summary.hidden {
  display: none;
}

.trainer-checkin__summary-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  letter-spacing: -0.15px;
  margin-bottom: 8px;
}

.trainer-checkin__summary-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}


/* ========================================================
   1e. PHOTO MACROS — trainer-photo__ classes
   ======================================================== */

.trainer-photo__macro-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px 12px;
}

.trainer-photo__macro-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}


/* ================================================================
   DEMO 2: FACEBOOK ADS MANAGER
   ================================================================ */

/* ========================================================
   2a. CAMPAIGN HEALTH GAUGE — fbads-health__ classes
   ======================================================== */

.fbads-health {
  padding: 12px 16px;
  border-top: 1px solid rgba(26, 26, 26, 0.06);
}

.fbads-health__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.fbads-health__title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  letter-spacing: -0.15px;
}

.fbads-health__trend {
  font-size: 12px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.48);
}

.fbads-health__trend--up {
  color: var(--color-success);
}

.fbads-health__gauge {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fbads-health__gauge-bar {
  flex: 1;
  height: 6px;
  background: rgba(26, 26, 26, 0.06);
  border-radius: 999px;
  overflow: hidden;
}

.fbads-health__gauge-fill {
  height: 100%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 60%, transparent);
  transition: width 800ms ease-out;
}

.fbads-health__gauge-val {
  font-size: 13px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- FB Ads Loading Progress Bar --- */
.fbads__progress {
  width: 100%;
  height: 4px;
  background: var(--alpha-light-50);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}

.fbads__progress-fill {
  height: 100%;
  width: 0%;
  background: #1877f2;
  border-radius: 999px;
  animation: scanBarFill 2.8s ease-out forwards;
}


/* ========================================================
   2b. PAUSE UNDERPERFORMERS — fbads-pause__ classes
   ======================================================== */

.fbads-pause__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
}

.fbads-pause__ad {
  background: rgba(26, 26, 26, 0.04);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fbads-pause__ad-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.fbads-pause__ad-name {
  font-size: 14px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  letter-spacing: -0.15px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fbads-pause__reason {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(26, 26, 26, 0.6);
  line-height: 20px;
}

.fbads-pause__reason-icon {
  width: 16px;
  height: 16px;
  color: rgba(220, 38, 38, 0.6);
  flex-shrink: 0;
  margin-top: 2px;
}


/* ========================================================
   2c. AD VARIATIONS — fbads-var__ classes
   ======================================================== */

.fbads-var__original {
  padding: 12px 16px;
  background: rgba(26, 26, 26, 0.04);
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}

.fbads-var__original-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: -0.15px;
  margin-bottom: 8px;
}

.fbads-var__card {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fbads-var__card--original {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.fbads-var__card-angle {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(26, 26, 26, 0.06);
  font-size: 12px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.55);
  line-height: 16px;
  align-self: flex-start;
}

.fbads-var__card-headline {
  font-size: 14px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  line-height: 20px;
}

.fbads-var__card-text {
  font-size: 13px;
  font-weight: 400;
  color: rgba(26, 26, 26, 0.6);
  line-height: 20px;
}

.fbads-var__card-desc {
  font-size: 12px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.48);
  line-height: 16px;
  font-style: italic;
}

.fbads-var__generated {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fbads-var__generated-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.55);
  letter-spacing: -0.15px;
}


/* ========================================================
   2d. A/B TEST SUGGESTIONS — fbads-test__ classes
   ======================================================== */

.fbads-test__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
}

.fbads-test__card {
  background: rgba(26, 26, 26, 0.04);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fbads-test__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.fbads-test__type-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  flex-shrink: 0;
}

.fbads-test__impact {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.fbads-test__card-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  line-height: 20px;
  letter-spacing: -0.15px;
}

.fbads-test__hypothesis {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fbads-test__hypothesis-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.48);
  letter-spacing: -0.15px;
}

.fbads-test__hypothesis-text {
  font-size: 13px;
  font-weight: 400;
  color: rgba(26, 26, 26, 0.6);
  line-height: 20px;
}

.fbads-test__metric {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 16px;
}

.fbads-test__create-btn {
  align-self: flex-start;
}


/* ========================================================
   EXTRA: Missing status pill and source pill variants
   ======================================================== */

/* Learning status for Facebook Ads campaign */
.fb-ads__status-pill--learning {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

/* Slack source pill */
.source-pill--slack {
  background: rgba(74, 21, 75, 0.08);
  color: rgba(74, 21, 75, 0.85);
}

/* =============================================
   FIX: Missing CSS for Demos 3-4 (Biz Consultant, Mindset)
   ============================================= */
/* ========================================================
   FIX DEMOS 3 & 4 — Missing CSS Class Definitions
   Demo 3: Business Consultant (biz-* prefixed classes)
   Demo 4: Mindset Coach (sage-* prefixed classes)
   ======================================================== */


/* ========================================================
   DEMO 3: BUSINESS — Section Layout
   ======================================================== */

.biz-sections {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.biz-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.biz-section__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}

.biz-section__title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  letter-spacing: -0.15px;
}


/* ========================================================
   DEMO 3: BUSINESS — QuickBooks Financials
   ======================================================== */

.biz-qb__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(26, 26, 26, 0.06);
  border-radius: 12px;
  overflow: hidden;
}

.biz-qb__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  background: var(--white);
}

.biz-qb__stat-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.55);
  text-align: center;
}

.biz-qb__stat-val {
  font-size: 16px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  line-height: 22px;
}

.biz-qb__stat-val--good {
  color: var(--green-600);
}

.biz-qb__chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 80px;
  padding: 4px 0;
}

.biz-qb__bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}

.biz-qb__bar-col span {
  font-size: 10px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.35);
}

.biz-qb__bar {
  width: 100%;
  max-width: 32px;
  border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  transition: height 400ms ease-out;
}


/* ========================================================
   DEMO 3: BUSINESS — ClickUp Tasks
   ======================================================== */

.biz-tasks__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.biz-tasks__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.biz-tasks__count {
  font-size: 18px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  line-height: 24px;
}

.biz-tasks__label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.55);
  text-align: center;
}

.biz-tasks__bar {
  width: 100%;
  height: 4px;
  background: rgba(26, 26, 26, 0.06);
  border-radius: 999px;
  overflow: hidden;
}

.biz-tasks__bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 600ms ease-out;
}


/* ========================================================
   DEMO 3: BUSINESS — Activity Feed
   ======================================================== */

.biz-feed {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.biz-feed__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(26, 26, 26, 0.04);
}

.biz-feed__item:last-child {
  border-bottom: none;
}

.biz-feed__avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(26, 26, 26, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.55);
  flex-shrink: 0;
}

.biz-feed__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.biz-feed__text {
  font-size: 13px;
  font-weight: 400;
  color: rgba(26, 26, 26, 0.88);
  line-height: 18px;
  letter-spacing: -0.15px;
}

.biz-feed__text strong {
  font-weight: 600;
}

.biz-feed__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.biz-feed__time {
  font-size: 12px;
  font-weight: 400;
  color: rgba(26, 26, 26, 0.35);
}


/* ========================================================
   DEMO 3: BUSINESS — Project Tracker
   ======================================================== */

.biz-project__list {
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.biz-project__card {
  border: 1px solid rgba(26, 26, 26, 0.06);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 150ms ease-out;
}

.biz-project__card:hover {
  border-color: rgba(26, 26, 26, 0.09);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.02);
}

.biz-project__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.biz-project__card-name {
  font-size: 14px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  letter-spacing: -0.15px;
}

.biz-project__card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(26, 26, 26, 0.55);
}

.biz-project__progress-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.biz-project__progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(26, 26, 26, 0.06);
  border-radius: 999px;
  overflow: hidden;
}

.biz-project__progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 600ms ease-out;
}

.biz-project__progress-fill--on-track {
  background: var(--green-600);
}

.biz-project__progress-fill--at-risk {
  background: var(--amber-500);
}

.biz-project__progress-fill--overdue {
  background: var(--red-600);
}

.biz-project__progress-pct {
  font-size: 12px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  min-width: 30px;
  text-align: right;
}

.biz-project__milestones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid rgba(26, 26, 26, 0.04);
}

.biz-project__milestone {
  display: flex;
  align-items: center;
  gap: 4px;
}

.biz-project__milestone--done .biz-project__milestone-dot {
  background: var(--green-600);
  border-color: var(--green-600);
}

.biz-project__milestone--done .biz-project__milestone-label {
  color: rgba(26, 26, 26, 0.4);
  text-decoration: line-through;
}

.biz-project__milestone-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(26, 26, 26, 0.09);
  border: 1.5px solid rgba(26, 26, 26, 0.20);
  flex-shrink: 0;
}

.biz-project__milestone-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.55);
  white-space: nowrap;
}


/* ========================================================
   DEMO 3: BUSINESS — Weekly Summary
   ======================================================== */

.biz-summary__section {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.04);
}

.biz-summary__section:last-of-type {
  border-bottom: none;
}

.biz-summary__section-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.15px;
  margin-bottom: 8px;
}

.biz-summary__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.biz-summary__list li {
  font-size: 13px;
  font-weight: 400;
  color: rgba(26, 26, 26, 0.88);
  line-height: 18px;
  letter-spacing: -0.15px;
  padding-left: 16px;
  position: relative;
}

.biz-summary__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(26, 26, 26, 0.28);
}

.biz-summary__list li strong {
  font-weight: 600;
}

.biz-summary__checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.biz-summary__check-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(26, 26, 26, 0.88);
  line-height: 18px;
  letter-spacing: -0.15px;
  cursor: pointer;
  transition: color 150ms ease-out;
}

.biz-summary__check-item:hover {
  color: rgba(26, 26, 26, 0.60);
}

.biz-summary__checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--green-600);
  cursor: pointer;
}


/* ========================================================
   DEMO 3: BUSINESS — Delegated Tasks
   ======================================================== */

.biz-delegated__summary {
  display: flex;
  gap: 1px;
  background: rgba(26, 26, 26, 0.04);
}

.biz-delegated__summary-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  background: var(--white);
}

.biz-delegated__summary-num {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.biz-delegated__summary-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.55);
}

.biz-delegated__list {
  padding: 8px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.biz-delegated__item {
  padding: 12px;
  background: rgba(26, 26, 26, 0.02);
  border: 1px solid rgba(26, 26, 26, 0.04);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 150ms ease-out;
}

.biz-delegated__item:hover {
  border-color: rgba(26, 26, 26, 0.09);
}

.biz-delegated__item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.biz-delegated__assignee {
  display: flex;
  align-items: center;
  gap: 8px;
}

.biz-delegated__avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(26, 26, 26, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.55);
  flex-shrink: 0;
}

.biz-delegated__assignee-info {
  display: flex;
  flex-direction: column;
}

.biz-delegated__assignee-name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  letter-spacing: -0.15px;
  line-height: 16px;
}

.biz-delegated__project {
  font-size: 12px;
  font-weight: 400;
  color: rgba(26, 26, 26, 0.45);
  line-height: 16px;
}

.biz-delegated__task-text {
  font-size: 14px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.88);
  line-height: 20px;
  letter-spacing: -0.15px;
}

.biz-delegated__item-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.biz-delegated__due {
  font-size: 12px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.55);
}

.biz-delegated__due--overdue {
  color: #ef4444;
  font-weight: 600;
}

.biz-delegated__update {
  font-size: 12px;
  font-weight: 400;
  color: rgba(26, 26, 26, 0.35);
}

.biz-delegated__followup-btn {
  margin-left: auto;
  padding: 4px 12px;
  font-family: 'Instrument Sans', sans-serif;
  font-variation-settings: 'wdth' 100;
  font-size: 12px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.7);
  background: rgba(26, 26, 26, 0.04);
  border: 1px solid rgba(26, 26, 26, 0.09);
  border-radius: 6px;
  cursor: pointer;
  transition: all 150ms ease-out;
}

.biz-delegated__followup-btn:hover {
  background: rgba(26, 26, 26, 0.08);
  color: rgba(26, 26, 26, 0.88);
}


/* ========================================================
   DEMO 4: MINDSET — Onboarding Flow (sage-onboard__)
   ======================================================== */

.sage-onboard__steps {
  padding: 20px 16px 0;
}

.sage-onboard__step-indicators {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.sage-onboard__step-dot {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(26, 26, 26, 0.04);
  border: 1.5px solid rgba(26, 26, 26, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.36);
  transition: all 200ms ease-out;
  flex-shrink: 0;
}

.sage-onboard__step-dot--active {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
  color: var(--color-primary);
}

.sage-onboard__step-dot--done {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: rgba(255, 255, 255, 0.80);
}

.sage-onboard__step-line {
  width: 32px;
  height: 2px;
  background: rgba(26, 26, 26, 0.09);
  flex-shrink: 0;
}

.sage-onboard__panels {
  padding: 20px 16px;
}

.sage-onboard__panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sage-onboard__panel-title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  line-height: 24px;
}

.sage-onboard__panel-desc {
  font-size: 14px;
  font-weight: 400;
  color: rgba(26, 26, 26, 0.60);
  line-height: 20px;
  margin-bottom: 4px;
}

.sage-onboard__textarea {
  width: 100%;
  padding: 8px 12px;
  font-family: 'Instrument Sans', sans-serif;
  font-variation-settings: 'wdth' 100;
  font-size: 14px;
  font-weight: 400;
  color: rgba(26, 26, 26, 0.88);
  line-height: 20px;
  letter-spacing: -0.15px;
  background: var(--white);
  border: 1px solid rgba(26, 26, 26, 0.09);
  border-radius: 8px;
  resize: vertical;
  transition: border-color 150ms ease-out;
}

.sage-onboard__textarea::placeholder {
  color: rgba(26, 26, 26, 0.48);
}

.sage-onboard__textarea:focus {
  outline: none;
  border-color: rgba(26, 26, 26, 0.28);
  box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.06);
}

.sage-onboard__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sage-onboard__chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-family: 'Instrument Sans', sans-serif;
  font-variation-settings: 'wdth' 100;
  font-size: 13px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.55);
  background: rgba(26, 26, 26, 0.04);
  border: 1.5px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: all 150ms ease-out;
}

.sage-onboard__chip:hover {
  color: rgba(26, 26, 26, 0.88);
  background: rgba(26, 26, 26, 0.06);
}

.sage-onboard__chip--selected {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.sage-onboard__radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sage-onboard__radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.88);
  line-height: 18px;
  letter-spacing: -0.15px;
  background: rgba(26, 26, 26, 0.02);
  border: 1px solid rgba(26, 26, 26, 0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms ease-out;
}

.sage-onboard__radio:hover {
  background: rgba(26, 26, 26, 0.04);
  border-color: rgba(26, 26, 26, 0.09);
}

.sage-onboard__radio input[type="radio"] {
  accent-color: var(--green-600);
  margin: 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.sage-onboard__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 16px 16px;
}

.sage-onboard__back-btn {
  /* Inherits from ad-gen__btn--secondary; positional override */
}


/* ========================================================
   DEMO 4: MINDSET — AI Memory Display (sage-memory__)
   ======================================================== */

.sage-memory__sections {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sage-memory__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sage-memory__section-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sage-memory__section-icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1;
}

.sage-memory__section-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.60);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.sage-memory__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sage-memory__list-item {
  font-size: 13px;
  font-weight: 400;
  color: rgba(26, 26, 26, 0.88);
  line-height: 18px;
  letter-spacing: -0.15px;
  padding: 4px 10px;
  background: rgba(26, 26, 26, 0.02);
  border: 1px solid rgba(26, 26, 26, 0.04);
  border-radius: 8px;
}

.sage-memory__footer {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid rgba(26, 26, 26, 0.06);
}

.sage-memory__footer-text {
  font-size: 12px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.48);
}


/* ========================================================
   DEMO 4: MINDSET — 30/60/90 Day Plan (sage-plan__)
   ======================================================== */

.sage-plan__phases {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sage-plan__phase {
  border: 1px solid rgba(26, 26, 26, 0.06);
  border-radius: 12px;
  overflow: hidden;
  transition: all 200ms ease-out;
}

.sage-plan__phase--active {
  border-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
  background: color-mix(in srgb, var(--color-primary) 2%, transparent);
}

.sage-plan__phase-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 150ms ease-out;
}

.sage-plan__phase-header:hover {
  background: rgba(26, 26, 26, 0.02);
}

.sage-plan__phase-label {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
}

.sage-plan__phase-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  line-height: 20px;
  letter-spacing: -0.15px;
}

.sage-plan__phase-chevron {
  width: 16px;
  height: 16px;
  color: rgba(26, 26, 26, 0.36);
  flex-shrink: 0;
  transition: transform 200ms ease-out;
}

.sage-plan__phase--active .sage-plan__phase-chevron {
  transform: rotate(180deg);
}

.sage-plan__phase-body {
  display: none;
  padding: 0 16px 12px;
  flex-direction: column;
  gap: 8px;
}

.sage-plan__phase--active .sage-plan__phase-body {
  display: flex;
}

.sage-plan__items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sage-plan__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(26, 26, 26, 0.88);
  line-height: 18px;
  letter-spacing: -0.15px;
  cursor: pointer;
  transition: color 150ms ease-out;
}

.sage-plan__item span {
  flex: 1;
}

.sage-plan__checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--green-600);
  cursor: pointer;
}

.sage-plan__checkbox:checked + span {
  color: rgba(26, 26, 26, 0.48);
  text-decoration: line-through;
}

.sage-plan__milestone {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  margin-top: 4px;
}

.sage-plan__milestone span {
  font-size: 12px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.60);
  line-height: 16px;
  font-style: italic;
}


/* ========================================================
   DEMO 4: MINDSET — Daily Check-In (sage-checkin__)
   ======================================================== */

.sage-checkin__questions {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sage-checkin__q {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sage-checkin__q-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  line-height: 20px;
  letter-spacing: -0.15px;
}

.sage-checkin__q-options {
  display: flex;
  gap: 8px;
}

.sage-checkin__slider-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}

.sage-checkin__slider {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(26, 26, 26, 0.09);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

.sage-checkin__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--white);
  border: 2px solid var(--color-primary);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.sage-checkin__slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--white);
  border: 2px solid var(--color-primary);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.sage-checkin__slider-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
  min-width: 42px;
  text-align: right;
}

.sage-checkin__followup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: rgba(26, 26, 26, 0.02);
  border: 1px solid rgba(26, 26, 26, 0.06);
  border-radius: 8px;
}


/* ========================================================
   DEMO 4: MINDSET — Progress Timeline (sage-timeline__)
   ======================================================== */

.sage-timeline__trend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(26, 26, 26, 0.06);
  margin: 0 16px;
  border-radius: 12px;
  overflow: hidden;
}

.sage-timeline__trend-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  background: var(--white);
}

.sage-timeline__trend-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.48);
  text-align: center;
}

.sage-timeline__trend-val {
  font-size: 16px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  line-height: 22px;
}

.sage-timeline__trend-val--up {
  color: var(--green-600);
}

.sage-timeline__entries {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sage-timeline__entry {
  display: flex;
  align-items: stretch;
  gap: 12px;
  min-height: 56px;
}

.sage-timeline__entry--breakthrough .sage-timeline__content {
  background: color-mix(in srgb, var(--color-primary) 3%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.sage-timeline__line-segment {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 16px;
  flex-shrink: 0;
}

.sage-timeline__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 12px;
}

.sage-timeline__connector {
  width: 2px;
  flex: 1;
  background: rgba(26, 26, 26, 0.09);
  margin-top: 4px;
}

.sage-timeline__content {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid rgba(26, 26, 26, 0.06);
  border-radius: 8px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 150ms ease-out;
}

.sage-timeline__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sage-timeline__week {
  font-size: 13px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  letter-spacing: -0.15px;
}

.sage-timeline__date {
  font-size: 12px;
  font-weight: 400;
  color: rgba(26, 26, 26, 0.48);
}

.sage-timeline__mood {
  font-size: 12px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.55);
}

.sage-timeline__badge {
  display: inline-flex;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-radius: 999px;
  white-space: nowrap;
}

.sage-timeline__note {
  font-size: 13px;
  font-weight: 400;
  color: rgba(26, 26, 26, 0.88);
  line-height: 18px;
  letter-spacing: -0.15px;
}


/* ========================================================
   SHARED — Trainer Check-In Options (used by Demo 1 & 4)
   ======================================================== */

.trainer-checkin__questions {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.trainer-checkin__q {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trainer-checkin__q-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.88);
  line-height: 20px;
  letter-spacing: -0.15px;
}

.trainer-checkin__q-options {
  display: flex;
  gap: 8px;
}

.trainer-checkin__opt {
  flex: 1;
  padding: 8px 12px;
  font-family: 'Instrument Sans', sans-serif;
  font-variation-settings: 'wdth' 100;
  font-size: 13px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.55);
  background: rgba(26, 26, 26, 0.04);
  border: 1.5px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: all 150ms ease-out;
}

.trainer-checkin__opt:hover {
  color: rgba(26, 26, 26, 0.88);
  background: rgba(26, 26, 26, 0.06);
}

.trainer-checkin__opt--active {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.trainer-checkin__slider-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}

.trainer-checkin__slider {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(26, 26, 26, 0.09);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

.trainer-checkin__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--white);
  border: 2px solid var(--color-primary);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.trainer-checkin__slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--white);
  border: 2px solid var(--color-primary);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.trainer-checkin__slider-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
  min-width: 60px;
  text-align: right;
}

.trainer-checkin__submit-wrap {
  display: flex;
  justify-content: flex-end;
  padding: 0 16px 16px;
}

.trainer-checkin__summary {
  padding: 12px 16px;
  border-top: 1px solid rgba(26, 26, 26, 0.06);
  background: rgba(26, 26, 26, 0.02);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trainer-checkin__summary-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.55);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.trainer-checkin__summary-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trainer-checkin__summary-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(26, 26, 26, 0.88);
  line-height: 18px;
}

/* ========================================================
   RESPONSIVE — Mobile & Tablet
   ======================================================== */

/* --- Base styles for mobile elements (hidden on desktop) --- */
.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: var(--radius-8);
  color: var(--alpha-light-600);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.hamburger-btn:hover {
  background: var(--alpha-light-25);
  color: var(--alpha-light-900);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 90;
  opacity: 0;
  transition: opacity 200ms ease;
}
.sidebar-overlay--visible {
  display: block;
  opacity: 1;
}

/* --- Dark mode body background for specific demos --- */
body:has(.app-frame[data-demo="salescoach"]),
body:has(.app-frame[data-demo="influencer"]) {
  background: #0f0f0f;
  color-scheme: dark;
}

/* Dark mode scrollbar overrides */
.app-frame[data-demo="salescoach"] ::-webkit-scrollbar-thumb,
.app-frame[data-demo="influencer"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}
.app-frame[data-demo="salescoach"] ::-webkit-scrollbar-thumb:hover,
.app-frame[data-demo="influencer"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Dark mode: send button (hardcoded #fff gradient → dark surface) */
.app-frame[data-demo="salescoach"] .send-btn,
.app-frame[data-demo="influencer"] .send-btn {
  background-image:
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.08) 100%),
    linear-gradient(90deg, var(--neutral-50) 0%, var(--neutral-50) 100%);
  color: rgba(255, 255, 255, 0.60);
}
.app-frame[data-demo="salescoach"] .send-btn-inset,
.app-frame[data-demo="influencer"] .send-btn-inset {
  box-shadow: inset 0px 0px 3px rgba(255,255,255,0.12);
}

/* Dark mode: highlighted suggestion card — match the others */
.app-frame[data-demo="salescoach"] .suggestion-card--highlighted,
.app-frame[data-demo="influencer"] .suggestion-card--highlighted {
  background: var(--alpha-dark-300);
}

/* Dark mode: demo dropdown avatar text stays white */
.app-frame[data-demo="salescoach"] .demo-dropdown__item-avatar,
.app-frame[data-demo="influencer"] .demo-dropdown__item-avatar {
  color: #ffffff;
}

/* --- Tablet: max-width 1024px --- */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: 260px;
  }

  .dashboard-content {
    width: 600px;
  }

  .settings-dialog {
    max-width: calc(100vw - 40px);
  }

  .bg-ellipse {
    transform: scale(0.7);
  }

  /* 4-col grids → 2 columns */
  .pm-hub__stats,
  .fin__stats,
  .email-seq__stats,
  .campaign-dash__top-metrics,
  .progress-tl__stats,
  .callhist__summary,
  .market__metrics,
  .perf__metrics,
  .activity__summary,
  .biz-tasks__row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Mobile: max-width 768px --- */
@media (max-width: 768px) {

  /* Show hamburger */
  .hamburger-btn {
    display: flex;
  }

  /* Sidebar off-canvas drawer */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 250ms ease;
    box-shadow: none;
  }
  .sidebar--open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
  }

  /* Main takes full width */
  .main {
    width: 100%;
  }

  /* Dashboard/chat full width */
  .dashboard-content {
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
  }
  .chat-messages {
    max-width: 100%;
    padding: 16px 12px;
  }
  .chat-input-bottom {
    max-width: 100%;
    padding: 12px;
  }

  /* Hero heading scale down */
  .hero-heading {
    font-size: 24px;
    line-height: 32px;
  }

  /* Suggestions grid → 1 column */
  .suggestions-grid {
    grid-template-columns: 1fr;
  }

  /* Message bubbles responsive width */
  .message-user-bubble {
    max-width: 85%;
  }
  .message-ai {
    max-width: 100%;
  }

  /* Chat response cards full width */
  .chat-response-card {
    max-width: 100%;
  }

  /* Settings dialog near full-width with scroll */
  .settings-dialog {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    max-height: 85vh;
    overflow-y: auto;
  }

  /* Hide background ellipses */
  .bg-ellipse {
    display: none;
  }

  /* --- Grid collapses at 768px --- */

  /* 4-col grids → 2 columns */
  .pm-hub__stats,
  .fin__stats,
  .email-seq__stats,
  .campaign-dash__top-metrics,
  .progress-tl__stats,
  .callhist__summary,
  .market__metrics,
  .perf__metrics,
  .activity__summary,
  .biz-tasks__row {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 3-col grids → 1 column */
  .fb-ads__metrics,
  .personality__types,
  .biz-dash__metrics,
  .biz-qb__stats,
  .sage-timeline__trend {
    grid-template-columns: 1fr;
  }

  /* 2-col grids → 1 column */
  .form-analyzer__side-by-side,
  .competitor__grid,
  .creative-preview__grid,
  .comp__grid {
    grid-template-columns: 1fr;
  }

  /* 7-col grids (calendars) — shrink gaps */
  .habit-month-header,
  .habit-month-grid,
  .streak__heatmap-header,
  .streak__heatmap-grid {
    gap: 2px;
  }

  /* 5-col tables — horizontal scroll */
  .unified__table-header,
  .unified__table-row {
    min-width: 520px;
  }

  /* 3-col exercise tables — compact */
  .workout-plan__exercises-header,
  .workout-plan__exercise {
    grid-template-columns: 1fr 60px 40px;
  }

  /* --- Component-specific mobile tweaks --- */

  /* Toggle pills allow wrapping */
  .toggle-pill {
    flex-wrap: wrap;
  }

  /* Card padding reduction */
  .chat-response-card__body {
    padding: 12px;
  }
  .chat-response-card__header {
    padding: 12px 12px 10px;
  }
  .chat-response-card__footer {
    padding: 10px 12px;
  }

  /* Demo dropdown scroll */
  .demo-dropdown__list {
    max-height: 60vh;
    overflow-y: auto;
  }

  /* Agent chip label hidden on mobile */
  .agent-chip span:not(.agent-chip-badge) {
    display: none;
  }

  /* Topbar inner spacing */
  .topbar-inner {
    gap: 8px;
  }
}

/* --- Small phone: max-width 480px --- */
@media (max-width: 480px) {

  /* 2-col stat grids → 1 column */
  .pm-hub__stats,
  .fin__stats,
  .email-seq__stats,
  .campaign-dash__top-metrics,
  .progress-tl__stats,
  .callhist__summary,
  .market__metrics,
  .perf__metrics,
  .activity__summary,
  .biz-tasks__row {
    grid-template-columns: 1fr;
  }

  /* Hero heading smaller */
  .hero-heading {
    font-size: 20px;
    line-height: 28px;
  }

  /* Sidebar narrower */
  .sidebar {
    width: 280px;
  }

  /* Calendar gaps minimized */
  .habit-month-header,
  .habit-month-grid,
  .streak__heatmap-header,
  .streak__heatmap-grid {
    gap: 1px;
  }

  /* Further reduce chat padding */
  .chat-messages {
    padding: 12px 8px;
  }
  .chat-input-bottom {
    padding: 8px;
  }

  /* Dashboard tighter */
  .dashboard-content {
    padding: 0 12px;
  }
}

/* ============================================================
   SaaS Animation System
   Entrance, micro-interaction, and data animations
   ============================================================ */

/* --- Keyframes --- */

@keyframes saas-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes saas-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes saas-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes saas-avatar-glow-pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

@keyframes saas-view-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes saas-number-pop {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(4px);
  }
  60% {
    transform: scale(1.04) translateY(-1px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* --- Dashboard entrance animations --- */

.dashboard-content.is-animated .hero-greeting {
  animation: saas-fade-in-up 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.dashboard-content.is-animated .chat-input-card {
  animation: saas-scale-in 600ms cubic-bezier(0.16, 1, 0.3, 1) 150ms both;
}

.dashboard-content.is-animated .suggestions {
  animation: saas-fade-in-up 600ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both;
}

.dashboard-content.is-animated .suggestions-grid .suggestion-card:nth-child(1) {
  animation: saas-fade-in-up 500ms cubic-bezier(0.16, 1, 0.3, 1) 400ms both;
}
.dashboard-content.is-animated .suggestions-grid .suggestion-card:nth-child(2) {
  animation: saas-fade-in-up 500ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;
}
.dashboard-content.is-animated .suggestions-grid .suggestion-card:nth-child(3) {
  animation: saas-fade-in-up 500ms cubic-bezier(0.16, 1, 0.3, 1) 600ms both;
}
.dashboard-content.is-animated .suggestions-grid .suggestion-card:nth-child(4) {
  animation: saas-fade-in-up 500ms cubic-bezier(0.16, 1, 0.3, 1) 700ms both;
}

/* Avatar glow subtle pulse on dashboard */
.dashboard-content.is-animated .avatar-glow {
  animation: saas-avatar-glow-pulse 3s ease-in-out infinite;
}

/* --- Micro-interactions: Buttons --- */

.send-btn {
  transition: opacity 150ms ease-out, transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.send-btn:hover {
  transform: scale(1.02);
}
.send-btn:active {
  transform: scale(0.96);
}

.icon-btn {
  transition: background-color 150ms ease-out, transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.icon-btn:active {
  transform: scale(0.94);
}

/* --- Micro-interactions: Suggestion cards --- */

.suggestion-card {
  transition: background-color 150ms ease-out, border-color 150ms ease-out, transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease-out;
}
.suggestion-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.suggestion-card:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}

/* --- Micro-interactions: Action chips --- */

.action-chip {
  transition: background-color 150ms ease-out, transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.action-chip:active {
  transform: scale(0.97);
}

/* --- Micro-interactions: Agent chip --- */

.agent-chip {
  transition: background-color 150ms ease-out, transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.agent-chip:active {
  transform: scale(0.97);
}

/* --- Chat input focus glow --- */

.chat-input-card:focus-within {
  box-shadow: var(--shadow-card), 0 0 0 3px color-mix(in srgb, var(--color-primary, #106844) 10%, transparent);
}

/* --- Chat message entrance animations --- */

.message-user.is-animated {
  animation: saas-slide-in-right 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.message-ai.is-animated {
  animation: saas-slide-in-left 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.message-loading.is-animated {
  animation: saas-fade-in-up 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* --- Rich component staggered entrance --- */

.chat-response-card.is-animated {
  animation: saas-scale-in 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.chat-response-card.is-animated .chat-response-card__header {
  animation: saas-fade-in-up 400ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both;
}

.chat-response-card.is-animated .chat-response-card__body {
  animation: saas-fade-in-up 400ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both;
}

.chat-response-card.is-animated .chat-response-card__footer {
  animation: saas-fade-in-up 400ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both;
}

/* --- View transitions --- */

.view--dashboard.is-view-enter {
  animation: saas-view-fade-in 300ms ease-out both;
}

.view--chat.is-view-enter {
  animation: saas-view-fade-in 300ms ease-out both;
}

/* --- Settings modal improvements --- */

.settings-dialog {
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.settings-section {
  animation: saas-fade-in-up 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.settings-section:nth-child(2) {
  animation-delay: 60ms;
}
.settings-section:nth-child(3) {
  animation-delay: 120ms;
}

/* --- Demo switcher dropdown enhancement --- */

.demo-dropdown__item {
  transition: background-color 100ms ease-out, transform 100ms ease-out;
}
.demo-dropdown__item:active {
  transform: scale(0.98);
}

/* --- Sidebar item enhancement --- */

.sidebar-item {
  transition: background-color 100ms ease-out, transform 100ms ease-out;
}
.sidebar-item:active {
  transform: scale(0.98);
}

/* --- Number/stat pop animation class --- */

.stat-animate {
  animation: saas-number-pop 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.stat-animate:nth-child(2) { animation-delay: 50ms; }
.stat-animate:nth-child(3) { animation-delay: 100ms; }
.stat-animate:nth-child(4) { animation-delay: 150ms; }

/* --- Close button --- */

.close-btn {
  transition: background-color 150ms ease-out, transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.close-btn:active {
  transform: scale(0.92);
}

/* --- Settings edit button --- */

.settings-edit-btn {
  transition: opacity 150ms, transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.settings-edit-btn:active {
  transform: scale(0.95);
}

/* prefers-reduced-motion — disabled for demo site.
   Animations are the core product being showcased. */