/* ═══════════════════════════════════════════════════════════════════
   Mightium Leads — Impeccable Design System (UI Token Standard)
   Font: Archivo (Sans / Display), IBM Plex Mono (Data / Mono)
   Palette: Warm Stone Neutrals (ink.*) & Ember Accent (brand.*)
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Fonts */
  --font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Ink Scale (Warm Stone Neutrals) */
  --ink-50:  #FAFAF9;
  --ink-100: #F5F5F4;
  --ink-200: #E7E5E4;
  --ink-300: #D6D3D1;
  --ink-400: #A8A29E;
  --ink-500: #78716C;
  --ink-600: #57534E;
  --ink-700: #44403C;
  --ink-800: #292524;
  --ink-900: #1C1917;
  --ink-950: #0C0A09;

  /* Brand Scale (Ember Accent) */
  --brand-50:  #FFF7ED;
  --brand-100: #FFEDD5;
  --brand-200: #FED7AA;
  --brand-400: #FB923C;
  --brand-500: #F97316;
  --brand-600: #EA580C;
  --brand-700: #C2410C;
  --brand-800: #9A3412;

  /* Semantic Colors */
  --emerald-50:  #ECFDF5;
  --emerald-200: #A7F3D0;
  --emerald-600: #059669;

  --amber-50:  #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-200: #FDE68A;
  --amber-600: #D97706;

  --rose-50:  #FFF1F2;
  --rose-200: #FECDD3;
  --rose-600: #E11D48;

  --sky-50:  #F0F9FF;
  --sky-200: #BAE6FD;
  --sky-600: #0284C7;

  /* Compatibility & Derived Aliases */
  --ink:        var(--ink-900);
  --slate:      var(--ink-800);
  --paper:      var(--ink-50);
  --graphite:   var(--ink-500);
  --ochre:      var(--brand-600);
  --verdigris:  var(--emerald-600);
  --rust:       var(--rose-600);

  --bg-deep:        var(--ink-50);
  --bg-surface:     #FFFFFF;
  --bg-elevated:    var(--ink-100);
  --bg-hover:       var(--ink-100);
  --border:         var(--ink-200);
  --border-color:   var(--ink-200);
  --border-light:   var(--ink-200);
  --surface-bg:     #FFFFFF;
  --surface-hover:  var(--ink-100);
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-muted:     var(--ink-400);
  --accent:         var(--brand-600);

  --score-perfect:  var(--emerald-600);
  --score-good:     var(--amber-600);
  --score-possible: var(--ink-500);
  --score-poor:     var(--rose-600);

  /* Radii */
  --radius-card: 1rem;       /* 16px rounded-2xl */
  --radius-control: 0.5rem;  /* 8px rounded-lg */
  --radius-pill: 9999px;     /* rounded-full */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(28, 25, 23, 0.06), 0 2px 4px -1px rgba(28, 25, 23, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(28, 25, 23, 0.08), 0 4px 6px -2px rgba(28, 25, 23, 0.04);
  --shadow-drawer: -10px 0 30px rgba(28, 25, 23, 0.12);

  /* Layout */
  --sidebar-w: 240px;
  --topbar-h:  56px;
  --hairline:  1px solid var(--ink-200);

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --duration-fast: 160ms;
  --duration-base: 250ms;
}

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

html, body {
  height: 100%;
  width: 100%;
  font-family: var(--font-sans);
  background-color: var(--ink-50);
  color: var(--ink-900);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

a {
  color: var(--brand-600);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.link-ember {
  color: var(--brand-600);
  font-weight: 600;
  text-decoration: underline;
}

.text-emerald { color: var(--emerald-600); }
.text-brand { color: var(--brand-600); }
.font-mono { font-family: var(--font-mono); }
.font-sm { font-size: 13px; }
.flex-align-center { display: flex; align-items: center; }
.gap-2 { gap: 8px; }
.ml-2 { margin-left: 8px; }

/* ── App Layout ───────────────────────────────────────────────────────────── */
.app-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
  background-color: var(--ink-50);
}

/* ── Nav Sidebar ──────────────────────────────────────────────────────────── */
.nav-sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  height: 100vh;
  background-color: #FFFFFF;
  border-right: 1px solid var(--ink-200);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 50;
  user-select: none;
}

/* Brand Header */
.nav-brand {
  padding: 20px 20px 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-brand-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background-color: var(--brand-600);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(234, 88, 12, 0.2);
}

.nav-brand-text-wrap {
  display: flex;
  flex-direction: column;
}

.nav-brand-text {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 15px;
  color: var(--ink-900);
  line-height: 1.2;
}

.nav-brand-sub {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink-400);
  margin-top: 2px;
}

/* Nav Sections */
.nav-sections {
  flex: 1;
  padding: 8px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nav-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-section-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
  padding: 8px 12px 4px 12px;
}

.nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-600);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13.5px;
  cursor: pointer;
  text-align: left;
  transition: all var(--duration-fast) var(--ease-out);
}

.nav-item svg {
  color: var(--ink-400);
  transition: color var(--duration-fast) var(--ease-out);
}

.nav-item:hover {
  background-color: var(--ink-100);
  color: var(--ink-900);
}

.nav-item:hover svg {
  color: var(--ink-600);
}

.nav-item.active {
  background-color: #FFFFFF;
  border-color: var(--ink-200);
  color: var(--brand-600);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.nav-item.active svg {
  color: var(--brand-600);
}

.nav-item:active {
  transform: scale(0.98);
}

/* Credits Banner Footer */
.nav-credits {
  margin: 12px;
  padding: 12px 14px;
  background-color: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-credits-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-credits-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--emerald-600);
}

.nav-credits-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--emerald-600);

}

.nav-credits-sub {
  font-size: 11px;
  color: var(--ink-500);
  line-height: 1.35;
}

/* ── Main Content Area ────────────────────────────────────────────────────── */
.main-content {
  flex: 1;
  height: 100vh;
  overflow-y: auto;
  background-color: var(--ink-50);
  display: flex;
  flex-direction: column;
}

.view-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Sticky Top Bar ───────────────────────────────────────────────────────── */
.fl-topbar {
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  background-color: rgba(250, 250, 249, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ink-200);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 40;
}

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

.fl-page-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-900);
}

.fl-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fl-topbar-divider {
  width: 1px;
  height: 16px;
  background-color: var(--ink-200);
}

/* Live Chip */
.fl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
}

.fl-chip-live {
  background-color: var(--emerald-50);
  border: 1px solid var(--emerald-200);
  color: var(--emerald-600);
}

.fl-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--emerald-600);
}

/* Profile Info */
.fl-topbar-profile {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fl-topbar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F3E8FF;
  color: #7E22CE;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fl-topbar-userinfo {
  display: flex;
  flex-direction: column;
}

.fl-topbar-username {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ink-900);
  line-height: 1.2;
}

.fl-topbar-userrole {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--ink-400);
  text-transform: uppercase;
}

.fl-topbar-signout {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-control);
  background: transparent;
  border: 1px solid var(--ink-200);
  color: var(--ink-500);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.fl-topbar-signout:hover {
  background-color: var(--ink-100);
  color: var(--ink-900);
}

/* ── Content Layout Blocks ────────────────────────────────────────────────── */
.page-content-padding {
  padding: 24px 32px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-header-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-main-title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

.page-subtitle {
  font-size: 14px;
  color: var(--ink-500);
}

/* Generic UI Card */
.ui-card {
  background-color: #FFFFFF;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: 20px 24px;
}

/* ── View Specifics: Sequences ────────────────────────────────────────────── */
.sequences-empty-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

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

.status-pill-emerald {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background-color: var(--emerald-50);
  border: 1px solid var(--emerald-200);
  color: var(--emerald-600);
  font-size: 13px;
  font-weight: 600;
}

.btn-enroll-disabled {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-control);
  background-color: var(--brand-200);
  color: #FFFFFF;
  border: none;
  font-weight: 600;
  font-size: 13px;
  cursor: not-allowed;
  opacity: 0.85;
}

.sequences-card-message {
  font-size: 14px;
  color: var(--ink-600);
}

/* ── View Specifics: Analytics ────────────────────────────────────────────── */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.analytics-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.analytics-card-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-900);
}

.analytics-bar-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.analytics-bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 30px;
  align-items: center;
  gap: 12px;
}

.analytics-label {
  font-size: 13px;
  color: var(--ink-600);
}

.analytics-track {
  height: 14px;
  background-color: var(--ink-100);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.analytics-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 400ms var(--ease-out);
}

.analytics-fill.bg-emerald { background-color: var(--emerald-600); }
.analytics-fill.bg-brand { background-color: var(--brand-600); }
.analytics-fill.bg-sky { background-color: var(--sky-600); }
.analytics-fill.bg-grey { background-color: var(--ink-300); }

.analytics-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-900);
  text-align: right;
}


/* ── Badge Chips (used across views) ─────────────────────────────────────── */

.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

.badge-chip.grey { background-color: var(--ink-100); color: var(--ink-600); }
.badge-chip.amber { background-color: var(--amber-100); color: var(--amber-600); }
.badge-chip.rose { background-color: var(--rose-50); color: var(--rose-600); }

.review-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.review-field-label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--ink-400);
}

.review-input {
  width: 100%;
  padding: 10px 14px;
  background-color: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-control);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-900);
}

.review-textarea {
  width: 100%;
  min-height: 80px;
  padding: 12px 14px;
  background-color: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-control);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-900);
  resize: vertical;
}

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

.btn-secondary-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background-color: #FFFFFF;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-control);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-700);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.btn-secondary-outline:hover:not(:disabled) {
  background-color: var(--ink-100);
  color: var(--ink-900);
}

.btn-brand-solid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background-color: var(--brand-600);
  border: 1px solid var(--brand-600);
  border-radius: var(--radius-control);
  font-weight: 600;
  font-size: 13px;
  color: #FFFFFF;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.btn-brand-solid:hover:not(:disabled) {
  background-color: var(--brand-700);
}

.btn-brand-muted {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background-color: var(--brand-200);
  border: none;
  border-radius: var(--radius-control);
  font-weight: 600;
  font-size: 13px;
  color: #FFFFFF;
  cursor: not-allowed;
}

/* ── View Specifics: Dashboard ────────────────────────────────────────────── */
.dashboard-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.dashboard-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stat-tile-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-icon-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-brand-light { background-color: var(--brand-50); color: var(--brand-600); }
.bg-emerald-light { background-color: var(--emerald-50); color: var(--emerald-600); }
.bg-sky-light { background-color: var(--sky-50); color: var(--sky-600); }
.bg-amber-light { background-color: var(--amber-100); color: var(--amber-600); }

.stat-number {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 28px;
  color: var(--ink-900);
  line-height: 1.1;
}

.stat-desc {
  font-size: 12.5px;
  color: var(--ink-500);
}

.dashboard-section-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dash-card-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-900);
}

.funnel-bars-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.funnel-row {
  display: grid;
  grid-template-columns: 140px 1fr 40px auto;
  align-items: center;
  gap: 12px;
}

.funnel-label {
  font-size: 13px;
  color: var(--ink-700);
  display: flex;
  align-items: center;
  gap: 4px;
}

.funnel-track {
  height: 22px;
  background-color: var(--ink-100);
  border-radius: 6px;
  overflow: hidden;
}

.funnel-fill {
  height: 100%;
  border-radius: 6px;
}

.funnel-fill.bg-brand { background-color: var(--brand-500); }
.funnel-fill.bg-grey-light { background-color: var(--ink-200); }

.funnel-val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-900);
}

.funnel-footer-note {
  font-size: 12px;
  color: var(--ink-400);
  line-height: 1.4;
  margin-top: 4px;
}

/* CRM Pipeline Bar Row */
.crm-pipeline-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.crm-pipe-col {
  padding: 12px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-control);
  background-color: var(--ink-50);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.crm-pipe-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  color: var(--ink-400);
}

.crm-pipe-count {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 22px;
  color: var(--ink-900);
}

.crm-pipe-bar {
  height: 3px;
  border-radius: 2px;
  margin-top: 4px;
}

.bg-grey-faint { background-color: var(--ink-200); }

/* Dashboard 2-Columns */
.dash-two-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.dash-half-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.dash-list-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dash-list-item {
  display: flex;
  align-items: center;
  gap: 12px;

}

.score-pill {
  min-width: 32px;
  height: 24px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.score-pill.emerald {
  background-color: var(--emerald-50);
  border: 1px solid var(--emerald-200);
  color: var(--emerald-600);
}

.user-avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-avatar-circle.purple { background-color: #F3E8FF; color: #7E22CE; }
.user-avatar-circle.sky { background-color: #E0F2FE; color: #0369A1; }
.user-avatar-circle.emerald { background-color: #D1FAE5; color: #047857; }
.user-avatar-circle.amber { background-color: #FEF3C7; color: #B45309; }

.company-avatar-square {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background-color: var(--ink-100);
  color: var(--ink-500);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dash-item-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

.dash-item-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-item-sub {
  font-size: 12px;
  color: var(--ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── View Specifics: Documentation ────────────────────────────────────────── */
.docs-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.docs-section-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink-900);
}

.docs-text {
  font-size: 14px;
  color: var(--ink-600);
  line-height: 1.5;
}

.docs-diagram-placeholder {
  background-color: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-control);
  padding: 16px;
}

/* ── Find Leads View Specifics ────────────────────────────────────────────── */
.fl-hero {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fl-hero-title {
  font-weight: 800;
  font-size: 24px;
  color: var(--ink-900);
}

.fl-hero-desc {
  font-size: 14px;
  color: var(--ink-500);
  max-width: 900px;
}

.fl-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}

.fl-step {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.5;
}

.fl-step.active {
  opacity: 1;
}

.fl-step-node {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--ink-200);
  color: var(--ink-600);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fl-step.active .fl-step-node {
  background-color: var(--brand-600);
  color: #FFFFFF;
}

.fl-step-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  color: var(--ink-800);
}

.fl-step-line {
  flex: 1;
  height: 1px;
  background-color: var(--ink-200);
  max-width: 40px;
}

.fl-inner-card {
  background-color: #FFFFFF;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fl-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--ink-200);
  padding-bottom: 12px;
}

.fl-tabs {
  display: flex;
  gap: 4px;
}

.fl-tab {
  padding: 6px 14px;
  border-radius: var(--radius-control);
  background: transparent;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink-500);
  cursor: pointer;

}

.fl-tab.active {
  background-color: var(--ink-100);
  color: var(--ink-900);
}

.fl-badge-credits {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background-color: var(--emerald-50);
  border: 1px solid var(--emerald-200);
  color: var(--emerald-600);
  font-size: 12px;
  font-weight: 600;
}

.fl-filter-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--ink-400);
}

.fl-prompt {
  width: 100%;
  min-height: 100px;
  padding: 14px;
  background-color: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-control);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-900);
  line-height: 1.5;
  resize: vertical;
}

.fl-prompt:focus {
  outline: none;
  border-color: var(--brand-500);
  background-color: #FFFFFF;
}

.fl-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fl-pill {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background-color: var(--ink-100);
  border: 1px solid var(--ink-200);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-700);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.fl-pill:hover, .fl-pill.active {
  background-color: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--brand-600);
}

.fl-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.fl-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-control);
  background-color: var(--brand-600);
  color: #FFFFFF;
  border: none;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(234, 88, 12, 0.25);
  transition: all var(--duration-fast) var(--ease-out);
}

.fl-btn-primary:hover {
  background-color: var(--brand-700);
}

.fl-btn-primary:active {
  transform: scale(0.97);
}

/* Filter Form Grid */
.fl-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.fl-filter-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fl-filter-full {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fl-filter-input {
  width: 100%;
  padding: 8px 12px;
  background-color: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-control);
  font-size: 13.5px;
}

/* ── Leads View & Master Database Styling ─────────────────────────────────── */
.leads-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.leads-title {
  font-weight: 800;
  font-size: 24px;
  color: var(--ink-900);
}

.leads-subtitle {
  font-size: 13.5px;
  color: var(--ink-500);
}

.leads-btn-newsearch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-control);
  background-color: var(--brand-600);
  color: #FFFFFF;
  border: none;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.leads-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: #FFFFFF;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);
}

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

.leads-credits-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background-color: var(--ink-100);
  border: 1px solid var(--ink-200);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-700);
}

.leads-freemode-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background-color: var(--amber-50);
  border: 1px solid var(--amber-200);
  font-size: 12px;
  font-weight: 600;
  color: var(--amber-600);
}

.leads-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background-color: #FFFFFF;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-control);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-700);
  cursor: pointer;
}

.leads-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.leads-search-wrap {
  flex: 1;
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background-color: #FFFFFF;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-control);
  color: var(--ink-400);
}

.leads-search {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--ink-900);
}

.leads-filter-select {
  padding: 6px 10px;
  background-color: #FFFFFF;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-control);
  font-size: 12.5px;
  color: var(--ink-700);
}

.leads-filter-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-500);
  margin-left: auto;
}

/* Database Stat Tiles Bar */
.db-stat-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.db-stat-tile {
  background-color: #FFFFFF;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.db-stat-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--ink-400);
}

.db-stat-val {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 24px;
  color: var(--ink-900);
}

.db-stat-sub {
  font-size: 11.5px;
  color: var(--ink-500);
}

/* Tables */
.leads-table-container {
  background-color: #FFFFFF;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.leads-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.leads-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}

.leads-table th {
  padding: 10px 14px;
  background-color: var(--ink-50);
  border-bottom: 1px solid var(--ink-200);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--ink-400);
}

.leads-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ink-100);
  vertical-align: middle;
}

.leads-table tr:hover td {
  background-color: var(--ink-50);
}

.leads-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
}

.leads-pagination-info {
  font-size: 13px;
  color: var(--ink-500);
}

.leads-pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.leads-pagination-perpage {
  padding: 4px 8px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-control);
  font-size: 12px;
}

.leads-page-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-control);
  border: 1px solid var(--ink-200);
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.leads-page-current {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-700);
}

/* ── CRM Board Styling ────────────────────────────────────────────────────── */
.crm-board {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  flex: 1;
  overflow-x: auto;
}

.crm-col {
  background-color: var(--ink-100);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  min-width: 200px;
}

.crm-col-header {
  padding: 12px;
  border-bottom: 1px solid var(--ink-200);
}

.crm-col-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  gap: 6px;
}

.crm-col-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  background-color: #FFFFFF;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-pill);
  padding: 1px 6px;
}

.crm-col-body {
  padding: 8px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.crm-col-empty {
  font-size: 12px;
  color: var(--ink-400);
  text-align: center;
  padding: 20px 0;
}

/* ── Lead Detail Drawer Overlay ───────────────────────────────────────────── */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(28, 25, 23, 0.4);
  backdrop-filter: blur(2px);
  z-index: 90;
  display: none;
}

.drawer-backdrop.active { display: block; }

.lead-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 480px;
  max-width: 100vw;
  height: 100vh;
  background-color: #FFFFFF;
  box-shadow: var(--shadow-drawer);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-out);
}

.lead-drawer.active {
  transform: translateX(0);
}

.drawer-header-row {
  padding: 20px;
  border-bottom: 1px solid var(--ink-200);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.drawer-header-left {
  display: flex;
  gap: 12px;
}

.drawer-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: #F3E8FF;
  color: #7E22CE;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drawer-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drawer-person-name {
  font-weight: 800;
  font-size: 17px;
  color: var(--ink-900);
}

.drawer-linkedin { color: #0A66C2; }

.drawer-person-title {
  font-size: 13px;
  color: var(--ink-600);
}

.drawer-enriched-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background-color: var(--emerald-50);
  border: 1px solid var(--emerald-200);
  color: var(--emerald-600);
  font-size: 11px;
  font-weight: 600;
  width: fit-content;
  margin-top: 4px;
}

.drawer-close-btn {
  background: transparent;
  border: none;
  color: var(--ink-400);
  cursor: pointer;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.drawer-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-section-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--ink-400);
}

.drawer-contact-value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink-900);
}

.drawer-fit-layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background-color: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-control);
}

.drawer-fit-breakdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fit-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.fit-dot { width: 6px; height: 6px; border-radius: 50%; }
.fit-label { font-weight: 600; color: var(--ink-800); }
.fit-plus { font-family: var(--font-mono); font-weight: 700; color: var(--emerald-600); }
.fit-desc { color: var(--ink-500); }

.drawer-fit-bigbadge {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: var(--emerald-50);
  border: 2px solid var(--emerald-200);
  color: var(--emerald-600);
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-company-card {
  padding: 12px;
  background-color: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-control);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.company-card-header {
  display: flex;
  gap: 10px;
  align-items: center;
}

.company-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background-color: var(--ink-200);
  color: var(--ink-600);
  display: flex;
  align-items: center;
  justify-content: center;
}

.company-card-name { font-weight: 700; font-size: 14px; color: var(--ink-900); }
.company-card-domain { font-size: 12px; color: var(--ink-500); }

.company-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.company-grid-item {
  display: flex;
  flex-direction: column;
}

.grid-label { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-400); }
.grid-value { font-size: 12.5px; font-weight: 600; color: var(--ink-800); }

.drawer-stage-select {
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-control);
  border: 1px solid var(--ink-200);
}

.drawer-note-input {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.drawer-note-input input {
  flex: 1;
  padding: 6px 10px;
  border-radius: var(--radius-control);
  border: 1px solid var(--ink-200);
  font-size: 13px;
}

.drawer-draft-card {
  padding: 10px 12px;
  background-color: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-control);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.draft-title { font-size: 13px; font-weight: 600; color: var(--ink-800); }
.draft-pill {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background-color: var(--amber-100);
  color: var(--amber-600);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
}

/* ── Split-Screen Login Modal Overlay ─────────────────────────────────────── */
.login-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(28, 25, 23, 0.6);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-split {
  width: 960px;
  max-width: 100%;
  min-height: 560px;
  background-color: #FFFFFF;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.login-left {
  background-color: var(--ink-900);
  color: #FFFFFF;
  padding: 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.login-left-grid-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: radial-gradient(#FFFFFF 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events: none;
}

.login-left-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.login-logo-circle {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background-color: var(--brand-600);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-logo-text {
  font-weight: 800;
  font-size: 18px;
  color: #FFFFFF;
}

.login-hero {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 30px 0;
}

.login-overline {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--brand-400);
}

.login-pipe-arrow { color: var(--brand-500); }

.login-headline {
  font-weight: 800;
  font-size: 28px;
  line-height: 1.2;
  color: #FFFFFF;
}

.login-headline-accent {
  font-weight: 800;
  font-size: 28px;
  line-height: 1.2;
  color: var(--brand-400);
}

.login-description {
  font-size: 14px;
  color: var(--ink-300);
  line-height: 1.55;
  margin-top: 8px;
}

.login-pipeline-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-400);
}

.login-fab {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--brand-600);
  color: #FFFFFF;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(234, 88, 12, 0.4);
}

.login-right {
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-right-wrapper {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-signin-title {
  font-weight: 800;
  font-size: 24px;
  color: var(--ink-900);
}

.login-signin-subtitle {
  font-size: 13.5px;
  color: var(--ink-500);
  margin-top: -14px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--ink-400);
}

.login-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-control);
  font-size: 14px;
  background-color: var(--ink-50);
}

.login-submit-btn {
  width: 100%;
  padding: 10px;
  border-radius: var(--radius-control);
  background-color: var(--brand-600);
  color: #FFFFFF;
  border: none;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.login-demo-separator {
  margin-top: 10px;
  text-align: center;
  border-top: 1px solid var(--ink-200);
  position: relative;
}

.login-demo-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-400);
  background-color: #FFFFFF;
  padding: 0 8px;
  position: relative;
  top: -8px;
}

.login-demo-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-demo-card {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-control);
  background-color: var(--ink-50);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  transition: all var(--duration-fast) var(--ease-out);
}

.login-demo-card:hover {
  background-color: var(--brand-50);
  border-color: var(--brand-200);
}

.login-demo-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--ink-200);
  color: var(--ink-600);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-demo-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.login-demo-role { font-weight: 700; font-size: 13px; color: var(--ink-900); }
.login-demo-email { font-size: 11px; color: var(--brand-600); }
.login-demo-desc { font-size: 10.5px; color: var(--ink-500); }
.login-demo-arrow { color: var(--ink-400); }

/* Tab Content */
.fl-tab-content { display: none; }
.fl-tab-content.active { display: block; }

/* --- Replicated UI Components --- */
.flex-align-center { display: flex; align-items: center; }
.flex-align-start { display: flex; align-items: flex-start; }
.flex-between { display: flex; justify-content: space-between; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mb-6 { margin-bottom: 24px !important; }
.mt-3 { margin-top: 12px !important; }
.mt-6 { margin-top: 24px !important; }
.block { display: block; }
.font-mono { font-family: 'IBM Plex Mono', monospace; }
.font-sm { font-size: 13px; }
.text-grey { color: var(--ink-500); }
.text-emerald { color: #059669; }
.text-brand { color: var(--brand-500); }

/* Settings */
.settings-card {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(28,25,23,0.04);
}
.settings-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 8px;
}
.settings-card-desc {
  font-size: 14px;
  color: var(--ink-500);
  margin-bottom: 24px;
  line-height: 1.5;
}
.settings-status-row {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}
.settings-status-separator {
  margin: 0 8px;
  color: var(--ink-300);
}
.settings-radio-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.settings-radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.settings-radio-label { color: var(--ink-900); }
.settings-radio-desc { color: var(--ink-500); }
.settings-active-provider {
  font-size: 14px;
  color: var(--ink-900);
}
.settings-warning-banner {
  background-color: var(--brand-50);
  border: 1px solid #FDE68A;
  color: #92400E;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Toggle Switch */
.toggle-switch {
  width: 44px;
  height: 24px;
  background-color: var(--ink-200);
  border-radius: 9999px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s;
}
.toggle-switch-knob {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Team */
.team-table th {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-500);
  border-bottom: 1px solid var(--ink-200);
  padding: 12px 16px;
  text-align: left;
}
.team-table td {
  padding: 16px;
  border-bottom: 1px solid var(--ink-100);
  vertical-align: middle;
}
.team-table tr:last-child td {
  border-bottom: none;
}
.team-member-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.team-member-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-900);
}
.team-member-email {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--ink-400);
}
.team-access-desc {
  font-size: 14px;
  color: var(--ink-600);
}
.team-date {
  font-size: 14px;
  color: var(--ink-400);
}

/* Select */
.select-styled {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23A8A29E" stroke-width="2" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><polyline points="6 9 12 15 18 9"></polyline></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* Badges */
.role-badge-outline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 9999px;
  border: 1px solid var(--ink-200);
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}
.role-badge-outline.amber {
  border-color: #FDE68A;
  color: #B45309;
  background-color: #FFFBEB;
}
.role-badge-outline.grey {
  border-color: var(--ink-200);
  color: var(--ink-600);
  background-color: #fff;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.status-dot.amber { background-color: var(--brand-400); }

.no-padding { padding: 0 !important; }
/* Suggested Prompts */
.fl-examples {
  margin-top: 12px;
  margin-bottom: 24px;
}
.fl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fl-chip-example {
  background: #ffffff;
  border: 1px solid var(--ink-200);
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--ink-600);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  text-align: left;
}
.fl-chip-example:hover {
  background-color: var(--ink-50);
  border-color: var(--ink-300);
  color: var(--ink-900);
}

/* Page content padding to align main sections */
.page-content-padding {
  padding: 32px 48px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ── ICP Review Card ── */
.icp-review-card {
  background: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin: 24px 0;
  box-shadow: var(--shadow-sm);
  animation: fadeIn 0.4s var(--ease-out);
}

.icp-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.icp-review-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--text-primary);
}

.icp-review-badges {
  display: flex;
  gap: 8px;
  align-items: center;
}

.icp-review-badge-parsed {
  font-size: 0.75rem;
  background: var(--ink-100);
  color: var(--ink-600);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-weight: 500;
}

.icp-review-badge-cost {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  background: var(--emerald-50);
  color: var(--emerald-600);
  border: 1px solid var(--emerald-200);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-weight: 600;
}

.icp-review-quote {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.5;
}

.icp-review-quote em {
  color: var(--text-primary);
  font-style: italic;
}

.icp-review-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.icp-chip-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.icp-chip-group-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.icp-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.icp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 0.8125rem;
  border-radius: var(--radius-pill);
  font-weight: 500;
  line-height: 1.4;
  transition: all var(--duration-fast) var(--ease-out);
}

.icp-chip-orange {
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  color: var(--brand-700);
}

.icp-chip-green {
  background: var(--emerald-50);
  border: 1px solid var(--emerald-200);
  color: var(--emerald-600);
}

.icp-chip-remove {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icp-chip-remove:hover {
  opacity: 1;
}

.icp-review-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
  margin-top: 24px;
}

.icp-review-footer-left,
.icp-review-footer-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icp-pull-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.icp-pull-select {
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
  background-color: var(--surface-bg);
  font-size: 0.875rem;
  color: var(--text-primary);
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%2357534E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.icp-pull-select:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px var(--brand-100);
}

.icp-btn-edit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  background: var(--surface-bg);
  color: var(--text-primary);
  border-radius: var(--radius-control);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.icp-btn-edit:hover {
  background: var(--bg-hover);
}

.icp-btn-find {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--brand-600);
  color: white;
  border: none;
  border-radius: var(--radius-control);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--duration-fast) var(--ease-out);
}
.icp-btn-find:hover {
  background: var(--brand-700);
  box-shadow: var(--shadow-md);
}

/* ═══════════════════════════════════════════════════════════════════
   PRICING PAGE
   ═══════════════════════════════════════════════════════════════════ */
.pricing-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}

/* Header */
.pricing-header {
  text-align: center;
  margin-bottom: 32px;
}
.pricing-title {
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 800;
  color: var(--ink-900);
  letter-spacing: -0.5px;
  margin: 0 0 12px;
}
.pricing-subtitle {
  font-size: 16px;
  color: var(--ink-500);
  margin: 0;
}

/* Toggle */
.pricing-toggle-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}
.pricing-toggle {
  display: inline-flex;
  background: var(--ink-200);
  border-radius: 999px;
  padding: 4px;
  gap: 0;
}
.pricing-toggle-btn {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 28px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  color: var(--ink-600);
  transition: all 200ms var(--ease-out);
}
.pricing-toggle-btn.active {
  background: var(--brand-600);
  color: #fff;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.3);
}
.pricing-toggle-btn:not(.active):hover {
  color: var(--ink-900);
}
.pricing-save-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-500);
  margin: 0;
  animation: pricing-fade-in 300ms var(--ease-out);
}
@keyframes pricing-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Cards Grid */
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .pricing-cards {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }
}

/* Card */
.pricing-card {
  background: var(--bg-surface);
  border: 1px solid var(--ink-200);
  border-radius: 1rem;
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.04);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(28, 25, 23, 0.08);
}
.pricing-card-featured {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 1px var(--brand-200), 0 8px 24px rgba(249, 115, 22, 0.12);
  position: relative;
}
.pricing-card-featured:hover {
  box-shadow: 0 0 0 1px var(--brand-400), 0 16px 40px rgba(249, 115, 22, 0.18);
}

/* Plan name */
.pricing-plan-name {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 16px;
  font-style: italic;
}

/* Price */
.pricing-price-row {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 2px;
}
.pricing-dollar {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-900);
  margin-top: 8px;
}
.pricing-amount {
  font-family: var(--font-sans);
  font-size: 56px;
  font-weight: 900;
  color: var(--ink-900);
  line-height: 1;
  letter-spacing: -2px;
  transition: all 200ms var(--ease-out);
}
.pricing-period {
  font-size: 14px;
  color: var(--ink-400);
  margin: 0 0 12px;
}
.pricing-tagline {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-700);
  margin: 0 0 20px;
}

/* Select Button */
.pricing-select-btn {
  width: 100%;
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--brand-600);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 180ms var(--ease-out);
  margin-bottom: 24px;
}
.pricing-select-btn:hover {
  background: var(--brand-700);
  box-shadow: 0 4px 16px rgba(234, 88, 12, 0.25);
}
.pricing-select-btn:active {
  transform: scale(0.97);
}

/* Feature List */
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pricing-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
}
.pricing-feature.included {
  color: var(--ink-800);
}
.pricing-feature.included svg {
  color: var(--emerald-600);
  flex-shrink: 0;
}
.pricing-feature.excluded {
  color: var(--ink-400);
}
.pricing-feature.excluded svg {
  color: var(--rose-600);
  flex-shrink: 0;
}

/* ── Cached Leads Card ───────────────────────────────────────────────────── */
.cached-leads-card {
  background: linear-gradient(135deg, var(--brand-50), var(--emerald-50));
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  margin: 8px 0;
}

.cached-leads-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-800);
}

.cached-leads-header svg {
  color: var(--brand-500);
  flex-shrink: 0;
}

.cached-leads-note {
  font-size: 12px;
  color: var(--ink-500);
  margin-top: 6px;
  padding-left: 28px;
}