/* ============================================================
   FOUNDERMATE DESIGN SYSTEM v3
   ~/Dropbox/FounderMate/shared/design-system.css

   Aesthetic: breathing room · hairline borders · soft shadows
   · frosted glass · generous rounded corners · pill inputs
   Systematic 50-900 shade scale per colour family.
   FM beige background. No gradients.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {

  /* ── Layout & Type ──────────────────────────────────────── */
  --fm-font: 'Plus Jakarta Sans', sans-serif;

  /* ── Border Radius ──────────────────────────────────────── */
  --fm-radius-xs:   6px;
  --fm-radius-sm:   10px;
  --fm-radius:      14px;
  --fm-radius-lg:   18px;
  --fm-radius-xl:   24px;
  --fm-radius-full: 999px;

  /* ── Spacing ────────────────────────────────────────────── */
  --fm-space-xs:   6px;
  --fm-space-sm:   12px;
  --fm-space-md:   20px;
  --fm-space-lg:   28px;
  --fm-space-xl:   40px;
  --fm-space-2xl:  56px;

  /* ══════════════════════════════════════════════════════════
     COLOUR PALETTE — Systematic 50-900 shade scale
  ══════════════════════════════════════════════════════════ */

  /* ── Neutral ────────────────────────────────────────────── */
  --fm-neutral-50:  #FDFCFA;
  --fm-neutral-100: #F5F0E8;
  --fm-neutral-200: #EDE8DE;
  --fm-neutral-300: #E0D9CC;
  --fm-neutral-400: #C4BAA8;
  --fm-neutral-500: #8A8278;
  --fm-neutral-600: #7A7568;
  --fm-neutral-700: #4A4640;
  --fm-neutral-800: #2C2820;
  --fm-neutral-900: #1A1714;

  /* ── Primary — Green ────────────────────────────────────── */
  --fm-primary-50:  #EDF5E8;
  --fm-primary-100: #D4EBC8;
  --fm-primary-200: #B8D9A8;
  --fm-primary-300: #8BC49A;
  --fm-primary-400: #4DC97A;
  --fm-primary-500: #1DB954;
  --fm-primary-600: #0A7A5A;
  --fm-primary-700: #053F33;
  --fm-primary-800: #032B22;
  --fm-primary-900: #021A15;

  /* ── Info — Blue ────────────────────────────────────────── */
  --fm-info-50:  #EBF1FF;
  --fm-info-100: #C8D8FF;
  --fm-info-200: #A8C0F0;
  --fm-info-300: #6B9BFF;
  --fm-info-400: #3D7BFF;
  --fm-info-500: #1A6BFF;
  --fm-info-600: #0F52CC;
  --fm-info-700: #083D99;
  --fm-info-800: #052B6B;
  --fm-info-900: #05334F;

  /* ── Warning — Amber/Gold ───────────────────────────────── */
  --fm-warning-50:  #FDF8E8;
  --fm-warning-100: #FDF4E0;
  --fm-warning-200: #F8E4A0;
  --fm-warning-300: #F0CC60;
  --fm-warning-400: #D4A820;
  --fm-warning-500: #CC8800;
  --fm-warning-600: #B8860B;
  --fm-warning-700: #F59860;
  --fm-warning-800: #C4682A;
  --fm-warning-900: #8A3A00;

  /* ── Destructive — Red ──────────────────────────────────── */
  --fm-destructive-50:  #FDECEA;
  --fm-destructive-100: #FAD8D6;
  --fm-destructive-200: #F0A8A0;
  --fm-destructive-300: #F07070;
  --fm-destructive-400: #EC4A42;
  --fm-destructive-500: #E8312A;
  --fm-destructive-600: #C02020;
  --fm-destructive-700: #8B1515;
  --fm-destructive-800: #6B0A0A;
  --fm-destructive-900: #3D0505;

  /* ── Pillar — Fears & Desires (Purple) ─────────────────── */
  --fm-pillar-fd-50:  #F8F4FE;
  --fm-pillar-fd-100: #F0EAFA;
  --fm-pillar-fd-200: #C4A8E8;
  --fm-pillar-fd-500: #7B35D4;
  --fm-pillar-fd-700: #5A1FA8;

  /* ══════════════════════════════════════════════════════════
     SEMANTIC ALIASES
  ══════════════════════════════════════════════════════════ */

  --fm-bg:           var(--fm-neutral-100);
  --fm-bg-subtle:    var(--fm-neutral-50);
  --fm-surface:      #ffffff;
  --fm-sidebar:      var(--fm-primary-700);
  --fm-text:         var(--fm-neutral-800);
  --fm-text-heading: var(--fm-neutral-900);
  --fm-muted:        var(--fm-neutral-600);
  --fm-muted2:       var(--fm-neutral-500);

  /* Hairline borders — almost invisible, shadow does the work */
  --fm-border:       rgba(0,0,0,0.08);
  --fm-border-light: rgba(0,0,0,0.05);

  /* Buttons */
  --fm-btn-light:     var(--fm-primary-500);
  --fm-btn-dark:      var(--fm-primary-400);
  --fm-btn-dark-icon: var(--fm-primary-700);

  /* Status */
  --fm-success:    var(--fm-primary-500);
  --fm-success-bg: var(--fm-primary-50);
  --fm-info:       var(--fm-info-500);
  --fm-info-bg:    var(--fm-info-50);
  --fm-warning:    var(--fm-warning-700);
  --fm-warning-bg: var(--fm-warning-100);
  --fm-error:      var(--fm-destructive-500);
  --fm-error-bg:   var(--fm-destructive-50);

  /* Pillars */
  --fm-pillar-fd-text:   var(--fm-pillar-fd-500);
  --fm-pillar-fd-bg:     var(--fm-pillar-fd-100);
  --fm-pillar-fd-border: var(--fm-pillar-fd-200);
  --fm-pillar-se-text:   var(--fm-warning-500);
  --fm-pillar-se-bg:     var(--fm-warning-100);
  --fm-pillar-se-border: var(--fm-warning-400);
  --fm-pillar-sp-text:   var(--fm-info-500);
  --fm-pillar-sp-bg:     var(--fm-info-50);
  --fm-pillar-sp-border: var(--fm-info-200);
  --fm-pillar-sv-text:   var(--fm-destructive-800);
  --fm-pillar-sv-bg:     var(--fm-destructive-50);
  --fm-pillar-sv-border: var(--fm-destructive-200);

  /* ══════════════════════════════════════════════════════════
     SHADOWS — soft, large, multi-layer
     Border is 0.5px hairline. Shadow defines the card.
  ══════════════════════════════════════════════════════════ */
  --fm-shadow-border: 0 0 0 0.5px rgba(0,0,0,0.08);
  --fm-shadow-sm:
    0 1px 2px rgba(0,0,0,0.03),
    0 4px 16px rgba(0,0,0,0.05);
  --fm-shadow-md:
    0 2px 4px rgba(0,0,0,0.03),
    0 8px 24px rgba(0,0,0,0.07);
  --fm-shadow-lg:
    0 4px 8px rgba(0,0,0,0.04),
    0 20px 48px rgba(0,0,0,0.09);
  --fm-shadow-xl:
    0 8px 16px rgba(0,0,0,0.04),
    0 40px 80px rgba(0,0,0,0.10);

  /* ══════════════════════════════════════════════════════════
     GLASS
  ══════════════════════════════════════════════════════════ */
  --fm-glass-bg:     rgba(255,255,255,0.72);
  --fm-glass-border: rgba(255,255,255,0.50);
  --fm-glass-blur:   blur(16px);
  --fm-glass-shadow:
    0 4px 6px rgba(0,0,0,0.04),
    0 12px 32px rgba(0,0,0,0.07),
    inset 0 1px 0 rgba(255,255,255,0.6);

  --fm-glass-subtle-bg:     rgba(255,255,255,0.60);
  --fm-glass-subtle-border: rgba(255,255,255,0.40);
  --fm-glass-subtle-blur:   blur(12px);

  /* ══════════════════════════════════════════════════════════
     GLOW — ACTIVE STATES
  ══════════════════════════════════════════════════════════ */
  --fm-active-tab-bg:     rgba(29,185,84,0.12);
  --fm-active-tab-border: rgba(29,185,84,0.35);
  --fm-active-tab-color:  #ffffff;
  --fm-active-tab-glow:   0 0 12px rgba(29,185,84,0.18), inset 0 0 8px rgba(29,185,84,0.06);
  --fm-btn-light-glow:    0 0 20px rgba(29,185,84,0.35), 0 4px 12px rgba(0,0,0,0.10);
  --fm-btn-dark-glow:     0 0 20px rgba(77,201,122,0.40), 0 4px 12px rgba(0,0,0,0.15);
}

/* ============================================================
   BASE RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--fm-font);
  background: var(--fm-bg);
  color: var(--fm-text);
  font-size: 13px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.fm-page-title    { font-size: 22px; font-weight: 800; color: var(--fm-text-heading); letter-spacing: -0.03em; }
.fm-section-title { font-size: 15px; font-weight: 700; color: var(--fm-text-heading); letter-spacing: -0.01em; }
.fm-body          { font-size: 13px; font-weight: 400; color: var(--fm-text); line-height: 1.65; }
.fm-label         { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--fm-muted); }
.fm-meta          { font-size: 12px; font-weight: 500; color: var(--fm-muted); }
.fm-tiny          { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }

/* ============================================================
   BUTTONS — pill shaped, breathing room
   ============================================================ */
.fm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--fm-radius-full);
  border: 0.5px solid rgba(0,0,0,0.10);
  background: var(--fm-surface);
  font-family: var(--fm-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--fm-text);
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: -0.01em;
  box-shadow: var(--fm-shadow-sm);
}
.fm-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.fm-btn:hover:not(:disabled) {
  border-color: rgba(0,0,0,0.14);
  box-shadow: var(--fm-shadow-md);
  transform: translateY(-1px);
}
.fm-btn-primary {
  background: var(--fm-btn-light);
  border-color: var(--fm-btn-light);
  color: #ffffff;
  box-shadow: var(--fm-btn-light-glow);
}
.fm-btn-primary:hover:not(:disabled) {
  background: var(--fm-primary-600);
  border-color: var(--fm-primary-600);
  transform: translateY(-1px);
}
.fm-btn-on-dark {
  background: var(--fm-btn-dark);
  border-color: transparent;
  color: var(--fm-btn-dark-icon);
  box-shadow: var(--fm-btn-dark-glow);
}
.fm-btn-ghost {
  color: var(--fm-muted);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.fm-btn-ghost:hover:not(:disabled) {
  color: var(--fm-text);
  background: rgba(0,0,0,0.04);
  box-shadow: none;
  transform: none;
}
.fm-btn-sm  { padding: 6px 14px; font-size: 12px; }
.fm-btn-lg  { padding: 12px 28px; font-size: 15px; }
.fm-btn-square { padding: 9px; border-radius: var(--fm-radius-sm); }

/* ============================================================
   CARDS — 18px radius, hairline border, soft shadow
   ============================================================ */
.fm-card {
  background: var(--fm-surface);
  border: 0.5px solid rgba(0,0,0,0.07);
  border-radius: var(--fm-radius-lg);
  padding: var(--fm-space-lg);
  box-shadow: var(--fm-shadow-md);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.fm-card:hover {
  box-shadow: var(--fm-shadow-lg);
  transform: translateY(-2px);
}
.fm-card-sm {
  padding: var(--fm-space-md);
  border-radius: var(--fm-radius);
}
.fm-card-flat {
  box-shadow: var(--fm-shadow-sm);
}
.fm-card-flat:hover {
  box-shadow: var(--fm-shadow-md);
  transform: translateY(-1px);
}

/* Glass card */
.fm-card-glass {
  background: var(--fm-glass-bg);
  backdrop-filter: var(--fm-glass-blur);
  -webkit-backdrop-filter: var(--fm-glass-blur);
  border: 0.5px solid var(--fm-glass-border);
  border-radius: var(--fm-radius-lg);
  padding: var(--fm-space-lg);
  box-shadow: var(--fm-glass-shadow);
}

/* Subtle glass */
.fm-card-glass-subtle {
  background: var(--fm-glass-subtle-bg);
  backdrop-filter: var(--fm-glass-subtle-blur);
  -webkit-backdrop-filter: var(--fm-glass-subtle-blur);
  border: 0.5px solid var(--fm-glass-subtle-border);
  border-radius: var(--fm-radius-lg);
  padding: var(--fm-space-lg);
  box-shadow: var(--fm-shadow-sm);
}

/* ============================================================
   INPUTS — pill shaped, spacious
   ============================================================ */
.fm-input, .fm-select, .fm-textarea {
  padding: 10px 16px;
  border: 0.5px solid rgba(0,0,0,0.12);
  border-radius: var(--fm-radius-full);
  background: var(--fm-surface);
  font-family: var(--fm-font);
  font-size: 13px;
  color: var(--fm-text);
  outline: none;
  transition: all 0.18s ease;
  width: 100%;
  box-shadow: var(--fm-shadow-sm);
}
.fm-input:focus, .fm-select:focus, .fm-textarea:focus {
  border-color: rgba(29,185,84,0.4);
  box-shadow: 0 0 0 3px rgba(29,185,84,0.10), var(--fm-shadow-sm);
}
.fm-input::placeholder, .fm-textarea::placeholder { color: var(--fm-muted2); }
.fm-select { cursor: pointer; }
.fm-textarea {
  resize: vertical;
  min-height: 110px;
  border-radius: var(--fm-radius-lg);
  line-height: 1.65;
}

/* ============================================================
   BADGES — pill shaped
   ============================================================ */
.fm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--fm-radius-full);
  font-size: 11px;
  font-weight: 600;
  border: 0.5px solid;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.fm-badge-green { background: var(--fm-primary-50);      color: var(--fm-primary-700);      border-color: var(--fm-primary-200); }
.fm-badge-blue  { background: var(--fm-info-50);         color: var(--fm-info-500);         border-color: var(--fm-info-200); }
.fm-badge-amber { background: var(--fm-warning-100);     color: var(--fm-warning-500);      border-color: var(--fm-warning-400); }
.fm-badge-red   { background: var(--fm-destructive-50);  color: var(--fm-destructive-500);  border-color: var(--fm-destructive-200); }
.fm-badge-grey  { background: var(--fm-bg);              color: var(--fm-muted);            border-color: rgba(0,0,0,0.08); }
.fm-badge-fd    { background: var(--fm-pillar-fd-bg);    color: var(--fm-pillar-fd-text);   border-color: var(--fm-pillar-fd-border); }
.fm-badge-se    { background: var(--fm-pillar-se-bg);    color: var(--fm-pillar-se-text);   border-color: var(--fm-pillar-se-border); }
.fm-badge-sp    { background: var(--fm-pillar-sp-bg);    color: var(--fm-pillar-sp-text);   border-color: var(--fm-pillar-sp-border); }
.fm-badge-sv    { background: var(--fm-pillar-sv-bg);    color: var(--fm-pillar-sv-text);   border-color: var(--fm-pillar-sv-border); }

/* ============================================================
   BANNERS
   ============================================================ */
.fm-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--fm-radius);
  border: 0.5px solid;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 16px;
  box-shadow: var(--fm-shadow-sm);
}
.fm-banner-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.fm-banner-green  { background: var(--fm-primary-50);      border-color: var(--fm-primary-200);      color: var(--fm-primary-700); }
.fm-banner-blue   { background: var(--fm-info-50);         border-color: var(--fm-info-200);         color: var(--fm-info-500); }
.fm-banner-amber  { background: var(--fm-warning-100);     border-color: var(--fm-warning-400);      color: var(--fm-warning-500); }
.fm-banner-red    { background: var(--fm-destructive-50);  border-color: var(--fm-destructive-200);  color: var(--fm-destructive-500); }

/* ============================================================
   SIDEBAR — Bench Green, spacious
   ============================================================ */
.fm-sidebar {
  width: 232px;
  min-height: 100vh;
  background: var(--fm-sidebar);
  color: #ffffff;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 2px;
}
.fm-sidebar-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,0.28);
  padding: 0 12px;
  margin: 16px 0 6px;
}
.fm-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--fm-radius);
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.58);
  cursor: pointer;
  transition: all 0.18s ease;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.fm-sidebar-item:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.88);
}
.fm-sidebar-item.active {
  background: var(--fm-active-tab-bg);
  border: 0.5px solid var(--fm-active-tab-border);
  box-shadow: var(--fm-active-tab-glow);
  color: #ffffff;
  font-weight: 700;
}
.fm-sidebar-divider {
  height: 0.5px;
  background: rgba(255,255,255,0.08);
  margin: 12px 0;
}

/* ============================================================
   TABLE — generous, hairline dividers
   ============================================================ */
.fm-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.fm-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fm-muted);
  padding: 10px 16px 12px;
  white-space: nowrap;
  border-bottom: 0.5px solid rgba(0,0,0,0.08);
}
.fm-table tbody tr { transition: background 0.12s; }
.fm-table tbody tr:hover { background: var(--fm-neutral-50); }
.fm-table tbody tr + tr td { border-top: 0.5px solid rgba(0,0,0,0.05); }
.fm-table td { padding: 14px 16px; vertical-align: middle; }

.fm-table-wrap {
  background: var(--fm-surface);
  border: 0.5px solid rgba(0,0,0,0.07);
  border-radius: var(--fm-radius-lg);
  overflow: hidden;
  box-shadow: var(--fm-shadow-md);
}

/* ============================================================
   TOGGLE
   ============================================================ */
.fm-toggle {
  position: relative;
  width: 36px; height: 20px;
  background: var(--fm-neutral-300);
  border-radius: var(--fm-radius-full);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.fm-toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.18s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.fm-toggle.on { background: var(--fm-primary-500); }
.fm-toggle.on::after { left: 18px; }
.fm-toggle:disabled { opacity: 0.3; cursor: not-allowed; }

/* ============================================================
   ACTION BUTTON (floating round)
   ============================================================ */
.fm-action-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
  flex-shrink: 0;
}
.fm-action-btn-light {
  background: var(--fm-btn-light);
  color: #ffffff;
  box-shadow: var(--fm-btn-light-glow);
}
.fm-action-btn-dark {
  background: var(--fm-btn-dark);
  color: var(--fm-btn-dark-icon);
  box-shadow: var(--fm-btn-dark-glow);
}
.fm-action-btn:hover { transform: scale(1.08) translateY(-1px); }

/* ============================================================
   TOAST
   ============================================================ */
.fm-toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--fm-neutral-900);
  color: #fff;
  font-family: var(--fm-font);
  font-size: 13px;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: var(--fm-radius-full);
  box-shadow: var(--fm-shadow-xl);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.22s ease;
  z-index: 9999;
}
.fm-toast.show { opacity: 1; transform: translateY(0); }

/* ============================================================
   PAGE LAYOUT
   ============================================================ */
.fm-shell { display: flex; min-height: 100vh; }
.fm-main  { flex: 1; overflow-y: auto; padding: var(--fm-space-xl) var(--fm-space-2xl); }
.fm-main-sm { padding: var(--fm-space-lg) var(--fm-space-xl); }
.fm-section { margin-bottom: var(--fm-space-xl); }
.fm-stack    { display: flex; flex-direction: column; gap: var(--fm-space-sm); }
.fm-stack-lg { display: flex; flex-direction: column; gap: var(--fm-space-md); }
.fm-row      { display: flex; align-items: center; gap: var(--fm-space-sm); }

/* ============================================================
   UTILITIES
   ============================================================ */
.fm-text-muted  { color: var(--fm-muted); }
.fm-text-green  { color: var(--fm-primary-500); }
.fm-text-blue   { color: var(--fm-info-500); }
.fm-text-red    { color: var(--fm-error); }
.fm-text-orange { color: var(--fm-warning); }
.fm-bg-tint     { background: var(--fm-primary-50); }
.fm-truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-divider     { height: 0.5px; background: rgba(0,0,0,0.07); margin: var(--fm-space-md) 0; }

/* ============================================================
   SPINNER
   ============================================================ */
.fm-spinner {
  width: 16px; height: 16px;
  border: 1.5px solid rgba(0,0,0,0.10);
  border-top-color: var(--fm-primary-500);
  border-radius: 50%;
  animation: fm-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes fm-spin { to { transform: rotate(360deg); } }

/* ============================================================
   SCROLLBAR — minimal
   ============================================================ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   TRANSITIONS
   ============================================================ */
button, a, input, select, textarea { transition: all 0.18s ease; }

/* ============================================================
   FILTER TABS — pill shaped with count badge
   Usage: <div class="fm-tabs">
            <button class="fm-tab active">Reels <span class="fm-tab-count">18</span></button>
            <button class="fm-tab">Ads <span class="fm-tab-count">5</span></button>
          </div>
   ============================================================ */
.fm-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.fm-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--fm-radius-full);
  border: 0.5px solid transparent;
  background: transparent;
  font-family: var(--fm-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--fm-muted);
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.fm-tab:hover {
  background: rgba(0,0,0,0.04);
  color: var(--fm-text);
}
.fm-tab.active {
  background: var(--fm-primary-50);
  border-color: var(--fm-primary-200);
  color: var(--fm-primary-700);
  font-weight: 700;
}
.fm-tab-count {
  font-size: 12px;
  font-weight: 800;
  color: inherit;
  opacity: 0.9;
}
.fm-tab-icon {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

/* ============================================================
   SEGMENTED CONTROL — toggle button group
   Usage: <div class="fm-segment">
            <button class="fm-segment-btn active">Voice Over</button>
            <button class="fm-segment-btn">Overlay Text</button>
          </div>
   ============================================================ */
.fm-segment {
  display: flex;
  border: 0.5px solid rgba(0,0,0,0.10);
  border-radius: var(--fm-radius);
  background: var(--fm-surface);
  padding: 3px;
  gap: 2px;
  box-shadow: var(--fm-shadow-sm);
}
.fm-segment-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: calc(var(--fm-radius) - 3px);
  border: none;
  background: transparent;
  font-family: var(--fm-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--fm-muted);
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.fm-segment-btn:hover:not(.active) {
  background: rgba(0,0,0,0.03);
  color: var(--fm-text);
}
.fm-segment-btn.active {
  background: var(--fm-primary-50);
  color: var(--fm-primary-700);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Segmented — with border highlight on active (like Format: Reel) */
.fm-segment-outlined .fm-segment-btn.active {
  background: var(--fm-primary-50);
  color: var(--fm-primary-700);
  border: 1px solid var(--fm-primary-500);
  font-weight: 700;
}

/* ============================================================
   TABLE — enhanced with card wrap
   Matches the concept HTML pipeline table style
   ============================================================ */
.fm-table-card {
  background: var(--fm-surface);
  border: 0.5px solid rgba(0,0,0,0.07);
  border-radius: var(--fm-radius-lg);
  overflow: hidden;
  box-shadow: var(--fm-shadow-md);
}
.fm-table-card .fm-table th:first-child { padding-left: 20px; }
.fm-table-card .fm-table td:first-child { padding-left: 20px; }
.fm-table-card .fm-table th:last-child  { padding-right: 20px; }
.fm-table-card .fm-table td:last-child  { padding-right: 20px; }

/* Creator cell — avatar + name + handle */
.fm-creator-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fm-avatar {
  width: 32px; height: 32px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 0.5px solid rgba(0,0,0,0.06);
}
.fm-avatar-name  { font-size: 12.5px; font-weight: 700; color: var(--fm-text); }
.fm-avatar-sub   { font-size: 11px; color: var(--fm-muted); margin-top: 1px; }

/* Step pills — pipeline progress */
.fm-steps { display: flex; gap: 3px; }
.fm-step {
  width: 22px; height: 22px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fm-bg);
  color: var(--fm-muted);
  border: 0.5px solid rgba(0,0,0,0.08);
  flex-shrink: 0;
}
.fm-step-done   { background: var(--fm-primary-700); color: #fff; border-color: var(--fm-primary-700); }
.fm-step-active { background: var(--fm-warning-700); color: #fff; border-color: var(--fm-warning-700); }

/* Score pill */
.fm-score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--fm-radius-full);
  font-size: 11.5px;
  font-weight: 800;
}
.fm-score-high { background: var(--fm-primary-50);     color: var(--fm-primary-600); }
.fm-score-mid  { background: var(--fm-warning-50);     color: var(--fm-warning-500); }
.fm-score-low  { background: var(--fm-destructive-50); color: var(--fm-destructive-500); }