/* ============================================================================
   FanSpeak — Studio Console design system
   ----------------------------------------------------------------------------
   Aesthetic: dark, dense, signal-LED indicators, monospace numerics, hairline
   seams. Speaks to content creators familiar with OBS, Streamlabs, Premiere
   panels — not another Bootstrap admin.

   Loaded after Google Fonts (Bricolage Grotesque, Instrument Sans, JetBrains
   Mono). Replaces Tabler/Bootstrap entirely; nothing else depends on this file
   except templates and static/js/fanspeak.js.
   ========================================================================== */


/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Signal palette (kept from original brand) */
  --fs-teal:        #00C9A7;
  --fs-teal-dim:    rgba(0, 201, 167, 0.12);
  --fs-teal-glow:   rgba(0, 201, 167, 0.32);
  --fs-coral:       #FF6B6B;
  --fs-coral-dim:   rgba(255, 107, 107, 0.12);
  --fs-yellow:      #FFD166;
  --fs-yellow-dim:  rgba(255, 209, 102, 0.12);

  /* Console surfaces */
  --fs-bg:          #07090F;
  --fs-rail:        #05060B;
  --fs-surface-1:   #0B0E18;
  --fs-surface-2:   #11162A;
  --fs-surface-3:   #1A2042;

  /* Text */
  --fs-text:        #E2E8F0;
  --fs-text-muted:  #7A8BAA;
  --fs-text-dim:    #4A5568;

  /* Seams */
  --fs-hairline:    rgba(255, 255, 255, 0.06);
  --fs-hairline-2:  rgba(255, 255, 255, 0.10);
  --fs-hairline-3:  rgba(255, 255, 255, 0.16);

  /* Type */
  --fs-display: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  --fs-body:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --fs-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Spacing — 4px base */
  --fs-r-1: 4px;  --fs-r-2: 8px;   --fs-r-3: 12px;  --fs-r-4: 16px;
  --fs-r-5: 24px; --fs-r-6: 32px;  --fs-r-7: 48px;  --fs-r-8: 64px;

  /* Sizes */
  --fs-rail-w-collapsed: 60px;
  --fs-rail-w-expanded:  220px;
  --fs-header-h: 56px;

  /* Radii — sharp on panels, soft on chips */
  --fs-radius-0: 0;
  --fs-radius-1: 2px;
  --fs-radius-2: 4px;
  --fs-radius-3: 8px;
  --fs-radius-pill: 999px;

  /* Motion */
  --fs-ease:      cubic-bezier(.2, .7, .2, 1);
  --fs-ease-out:  cubic-bezier(.16, 1, .3, 1);
  --fs-dur-fast:  120ms;
  --fs-dur:       200ms;
  --fs-dur-slow:  360ms;

  /* Elevation — we use seams instead of shadows. A single shadow exists for
     overlays (modal, dropdown menu) only. */
  --fs-shadow-pop: 0 12px 32px -8px rgba(0, 0, 0, 0.6),
                    0 2px 0 0 var(--fs-hairline) inset;
}


/* ── Base reset ─────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html {
  background: var(--fs-bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--fs-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fs-text);
  background: var(--fs-bg);
  font-feature-settings: "ss01", "cv01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--fs-teal);
  text-decoration: none;
  transition: color var(--fs-dur-fast) var(--fs-ease);
}
/* Text-link hover only — never recolour buttons (their own rules own the
   hover state; otherwise teal text lands on a teal button = invisible). */
a:hover:not(.btn):not(.fs-btn) { color: #4ddbc0; }

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

img, svg, video { display: block; max-width: 100%; }

::selection { background: var(--fs-teal); color: var(--fs-bg); }


/* ── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6, .fs-display {
  font-family: var(--fs-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--fs-text);
  /* Bricolage variable optical sizing — tighter when set small, more open large */
  font-variation-settings: "opsz" 32;
}

h1 { font-size: clamp(32px, 4vw, 48px); font-variation-settings: "opsz" 48; }
h2 { font-size: clamp(24px, 2.5vw, 32px); font-variation-settings: "opsz" 32; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }

p { margin: 0 0 var(--fs-r-3); }

.fs-mono { font-family: var(--fs-mono); font-variant-numeric: tabular-nums; }
.fs-num  { font-family: var(--fs-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.fs-eyebrow {
  font-family: var(--fs-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fs-text-muted);
  font-weight: 500;
}

.fs-text-muted { color: var(--fs-text-muted); }
.fs-text-dim   { color: var(--fs-text-dim); }
.fs-text-teal  { color: var(--fs-teal); }
.fs-text-coral { color: var(--fs-coral); }
.fs-text-yellow{ color: var(--fs-yellow); }

.fs-small { font-size: 12px; }
.fs-xs    { font-size: 11px; }


/* ── Utility classes (kept names that JS depends on) ────────────────────── */
.d-none { display: none !important; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }
.d-block { display: block; }

.fs-stack    { display: flex; flex-direction: column; gap: var(--fs-r-3); }
.fs-stack-sm { display: flex; flex-direction: column; gap: var(--fs-r-2); }
.fs-stack-lg { display: flex; flex-direction: column; gap: var(--fs-r-5); }

.fs-row-flex { display: flex; align-items: center; gap: var(--fs-r-3); }
.fs-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--fs-r-3); }
.fs-row-end { display: flex; align-items: center; justify-content: flex-end; gap: var(--fs-r-2); }

.fs-spacer { flex: 1; }

.text-center { text-align: center; }
.text-right  { text-align: right; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--fs-r-1); }
.mb-2 { margin-bottom: var(--fs-r-2); }
.mb-3 { margin-bottom: var(--fs-r-3); }
.mb-4 { margin-bottom: var(--fs-r-4); }
.mb-5 { margin-bottom: var(--fs-r-5); }
.mt-1 { margin-top: var(--fs-r-1); }
.mt-2 { margin-top: var(--fs-r-2); }
.mt-3 { margin-top: var(--fs-r-3); }
.mt-4 { margin-top: var(--fs-r-4); }
.ms-auto { margin-left: auto; }


/* ── Layout: rail + page ────────────────────────────────────────────────── */
.fs-shell {
  display: grid;
  /* minmax(0, 1fr) — NOT plain 1fr — so the content column can shrink below
     its min-content. Without this a single wide/non-wrapping child (a table
     row, long mono string) blows the track past the viewport and the whole
     page renders squeezed into the left half on mobile. */
  grid-template-columns: var(--fs-rail-w-collapsed) minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns var(--fs-dur) var(--fs-ease);
}
.fs-shell.is-expanded { grid-template-columns: var(--fs-rail-w-expanded) minmax(0, 1fr); }

.fs-rail {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--fs-rail);
  border-right: 1px solid var(--fs-hairline);
  display: flex;
  flex-direction: column;
  /* overflow: visible — dropdown menus need to pop out past the rail. Internal
     clipping is handled on .fs-rail__head / __nav / __foot / __item. */
  overflow: visible;
  z-index: 50;
}

.fs-rail__head {
  display: flex;
  align-items: center;
  gap: var(--fs-r-3);
  padding: 14px 18px;
  border-bottom: 1px solid var(--fs-hairline);
  height: var(--fs-header-h);
  flex-shrink: 0;
  overflow: hidden;
}

.fs-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--fs-text);
}
.fs-brand__mark {
  width: 24px; height: 24px;
  flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--fs-teal-dim);
  border: 1px solid var(--fs-teal-glow);
  border-radius: var(--fs-radius-1);
  color: var(--fs-teal);
}
.fs-brand__name {
  font-family: var(--fs-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--fs-dur) var(--fs-ease);
}
.fs-shell.is-expanded .fs-brand__name { opacity: 1; }

.fs-rail__toggle {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--fs-text-muted);
  padding: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--fs-dur) var(--fs-ease), color var(--fs-dur-fast) var(--fs-ease);
}
.fs-shell.is-expanded .fs-rail__toggle { opacity: 1; }
.fs-rail__toggle:hover { color: var(--fs-text); }

.fs-rail__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--fs-r-3) var(--fs-r-2);
  gap: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  /* Hide scrollbar visual but keep functional */
  scrollbar-width: thin;
  scrollbar-color: var(--fs-hairline-2) transparent;
}
.fs-rail__nav::-webkit-scrollbar { width: 4px; }
.fs-rail__nav::-webkit-scrollbar-track { background: transparent; }
.fs-rail__nav::-webkit-scrollbar-thumb {
  background: var(--fs-hairline-2);
  border-radius: 2px;
}

.fs-rail__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  color: var(--fs-text-muted);
  text-decoration: none;
  border-radius: var(--fs-radius-1);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  transition: background var(--fs-dur-fast) var(--fs-ease), color var(--fs-dur-fast) var(--fs-ease);
  /* Reset native <button> defaults — language switcher uses a <button> here */
  background: transparent;
  border: none;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.fs-rail__item:hover { background: var(--fs-surface-2); color: var(--fs-text); }
.fs-rail__item.is-active {
  color: var(--fs-teal);
  background: var(--fs-teal-dim);
}
.fs-rail__item.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--fs-teal);
  border-radius: 1px;
}
.fs-rail__item svg {
  width: 18px; height: 18px;
  flex-shrink: 0;
  stroke-width: 1.6;
}
.fs-rail__item-label {
  opacity: 0;
  transition: opacity var(--fs-dur-fast) var(--fs-ease);
}
.fs-shell.is-expanded .fs-rail__item-label { opacity: 1; }

.fs-rail__count {
  margin-left: auto;
  font-family: var(--fs-mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--fs-radius-pill);
  background: var(--fs-coral);
  color: #fff;
  opacity: 0;
  transition: opacity var(--fs-dur-fast) var(--fs-ease);
}
.fs-shell.is-expanded .fs-rail__count { opacity: 1; }
.fs-rail__count--warn { background: var(--fs-yellow); color: #1a1a1a; }
.fs-rail__count--lang {
  background: transparent;
  color: var(--fs-text-muted);
  border: 1px solid var(--fs-hairline-2);
  font-weight: 600;
  letter-spacing: .06em;
  padding: 1px 6px;
}

.fs-rail__foot {
  border-top: 1px solid var(--fs-hairline);
  padding: var(--fs-r-3) var(--fs-r-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  /* overflow MUST stay visible so dropdown menus (left: calc(100% + 8px))
     can pop out to the right of the rail. Label overflow is clipped on
     individual buttons (.fs-rail__item, .fs-user-pill) instead. */
  overflow: visible;
}

.fs-user-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--fs-radius-1);
  width: 100%;
  cursor: pointer;
  color: var(--fs-text);
  text-align: left;
  overflow: hidden;
  transition: background var(--fs-dur-fast) var(--fs-ease);
}
.fs-user-pill:hover { background: var(--fs-surface-2); }
.fs-user-pill__avatar {
  width: 28px; height: 28px;
  border-radius: var(--fs-radius-pill);
  background: var(--fs-teal-dim);
  color: var(--fs-teal);
  display: grid; place-items: center;
  font-family: var(--fs-mono);
  font-weight: 600;
  font-size: 12px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--fs-teal-glow);
}
.fs-user-pill__avatar img { width: 100%; height: 100%; object-fit: cover; }
.fs-user-pill__name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--fs-dur-fast) var(--fs-ease);
  overflow: hidden;
  text-overflow: ellipsis;
}
.fs-shell.is-expanded .fs-user-pill__name { opacity: 1; }

.fs-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0; /* avoids grid overflow */
}

.fs-page__head {
  height: var(--fs-header-h);
  border-bottom: 1px solid var(--fs-hairline);
  background: var(--fs-bg);
  padding: 0 var(--fs-r-5);
  display: flex;
  align-items: center;
  gap: var(--fs-r-4);
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(8px);
  background: rgba(7, 9, 15, 0.85);
}

.fs-page__title {
  font-family: var(--fs-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.fs-page__crumb {
  font-family: var(--fs-mono);
  font-size: 11px;
  color: var(--fs-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fs-page__body {
  flex: 1;
  padding: var(--fs-r-5);
  min-width: 0;
}

.fs-container { max-width: 1480px; margin: 0 auto; }
.fs-container--narrow { max-width: 920px; margin: 0 auto; }


/* ── Panels (cards) ─────────────────────────────────────────────────────── */
.fs-panel {
  background: var(--fs-surface-1);
  border: 1px solid var(--fs-hairline);
  border-radius: var(--fs-radius-1);
  overflow: hidden;
  position: relative;
}
.fs-panel--inset {
  background: var(--fs-surface-2);
  border-color: var(--fs-hairline);
}

.fs-panel__head {
  display: flex;
  align-items: center;
  gap: var(--fs-r-3);
  padding: 14px var(--fs-r-4);
  border-bottom: 1px solid var(--fs-hairline);
}
.fs-panel__title {
  font-family: var(--fs-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fs-text-muted);
  font-weight: 500;
}
.fs-panel__body { padding: var(--fs-r-4); }
.fs-panel__body--tight { padding: 0; }
.fs-panel__foot {
  padding: 12px var(--fs-r-4);
  border-top: 1px solid var(--fs-hairline);
  display: flex;
  align-items: center;
  gap: var(--fs-r-3);
}


/* ── Stat panel (big number) ────────────────────────────────────────────── */
.fs-stat {
  position: relative;
  background: var(--fs-surface-1);
  border: 1px solid var(--fs-hairline);
  border-radius: var(--fs-radius-1);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 120px;
}
.fs-stat::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--fs-teal);
  opacity: 0.35;
}
.fs-stat--coral::before { background: var(--fs-coral); }
.fs-stat--yellow::before { background: var(--fs-yellow); }
.fs-stat--muted::before { background: var(--fs-hairline-3); }

.fs-stat__label {
  font-family: var(--fs-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fs-text-muted);
  font-weight: 500;
}
.fs-stat__value {
  font-family: var(--fs-mono);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  color: var(--fs-text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.fs-stat__value--teal   { color: var(--fs-teal); }
.fs-stat__value--coral  { color: var(--fs-coral); }
.fs-stat__value--yellow { color: var(--fs-yellow); }

.fs-stat__sub {
  font-size: 12px;
  color: var(--fs-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.fs-stat__sub a { color: var(--fs-yellow); }


/* ── Buttons ────────────────────────────────────────────────────────────── */
.fs-btn {
  --btn-bg: transparent;
  --btn-border: var(--fs-hairline-2);
  --btn-color: var(--fs-text);
  --btn-hover-bg: var(--fs-surface-2);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  font-family: var(--fs-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  background: var(--btn-bg);
  color: var(--btn-color);
  border: 1px solid var(--btn-border);
  border-radius: var(--fs-radius-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--fs-dur-fast) var(--fs-ease),
              border-color var(--fs-dur-fast) var(--fs-ease),
              color var(--fs-dur-fast) var(--fs-ease),
              transform var(--fs-dur-fast) var(--fs-ease);
  text-decoration: none;
}
.fs-btn:hover { background: var(--btn-hover-bg); border-color: var(--fs-hairline-3); }
.fs-btn:active { transform: translateY(1px); }
.fs-btn:disabled, .fs-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.fs-btn svg { width: 14px; height: 14px; stroke-width: 1.8; }

.fs-btn--primary {
  --btn-bg: var(--fs-teal);
  --btn-border: var(--fs-teal);
  --btn-color: var(--fs-bg);
  --btn-hover-bg: #4ddbc0;
  font-weight: 600;
}
.fs-btn--primary:hover { border-color: #4ddbc0; }

.fs-btn--ghost {
  --btn-bg: transparent;
  --btn-border: var(--fs-hairline);
  --btn-color: var(--fs-text-muted);
  --btn-hover-bg: var(--fs-surface-2);
}
.fs-btn--ghost:hover { color: var(--fs-text); }

.fs-btn--danger {
  --btn-bg: transparent;
  --btn-border: var(--fs-coral);
  --btn-color: var(--fs-coral);
  --btn-hover-bg: var(--fs-coral-dim);
}

.fs-btn--solid-danger {
  --btn-bg: var(--fs-coral);
  --btn-border: var(--fs-coral);
  --btn-color: #fff;
  --btn-hover-bg: #ff8585;
}

.fs-btn--link {
  background: transparent;
  border-color: transparent;
  color: var(--fs-text-muted);
  padding: 4px 6px;
}
.fs-btn--link:hover { color: var(--fs-text); background: transparent; }

.fs-btn--sm { padding: 6px 10px; font-size: 12px; }
.fs-btn--lg { padding: 12px 20px; font-size: 14px; }
.fs-btn--block { width: 100%; }
.fs-btn--icon { padding: 8px; width: 32px; height: 32px; }


/* ── Inputs ─────────────────────────────────────────────────────────────── */
.fs-field { display: flex; flex-direction: column; gap: 6px; }
.fs-label {
  font-family: var(--fs-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fs-text-muted);
  font-weight: 500;
}

.fs-input,
.fs-select,
.fs-textarea {
  appearance: none;
  background: var(--fs-surface-2);
  border: 1px solid var(--fs-hairline);
  border-radius: var(--fs-radius-2);
  color: var(--fs-text);
  font-family: var(--fs-body);
  font-size: 14px;
  padding: 10px 12px;
  outline: none;
  width: 100%;
  transition: border-color var(--fs-dur-fast) var(--fs-ease),
              background var(--fs-dur-fast) var(--fs-ease);
}
.fs-input:hover,
.fs-select:hover,
.fs-textarea:hover { border-color: var(--fs-hairline-2); }
.fs-input:focus,
.fs-select:focus,
.fs-textarea:focus {
  border-color: var(--fs-teal);
  background: var(--fs-surface-1);
}
.fs-input::placeholder,
.fs-textarea::placeholder { color: var(--fs-text-dim); }

.fs-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%237A8BAA' stroke-width='1.5'><path d='M3 5l3 3 3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 32px;
}

.fs-textarea {
  min-height: 80px;
  resize: vertical;
  line-height: 1.5;
}
.fs-textarea.has-ai {
  border-color: var(--fs-teal-glow);
  background: linear-gradient(180deg, rgba(0,201,167,0.04) 0%, var(--fs-surface-2) 24px);
}

/* Search input with leading icon */
.fs-search {
  position: relative;
}
.fs-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  stroke-width: 1.6;
  color: var(--fs-text-dim);
  pointer-events: none;
}
.fs-search .fs-input { padding-left: 36px; }

/* Checkbox / toggle */
.fs-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
}
.fs-check input[type="checkbox"] {
  appearance: none;
  width: 16px; height: 16px;
  border: 1px solid var(--fs-hairline-2);
  border-radius: 3px;
  background: var(--fs-surface-2);
  cursor: pointer;
  position: relative;
  transition: background var(--fs-dur-fast), border-color var(--fs-dur-fast);
}
.fs-check input[type="checkbox"]:checked {
  background: var(--fs-teal);
  border-color: var(--fs-teal);
}
.fs-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid var(--fs-bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.fs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
}
.fs-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.fs-toggle__track {
  width: 32px; height: 18px;
  background: var(--fs-surface-3);
  border: 1px solid var(--fs-hairline);
  border-radius: 999px;
  position: relative;
  transition: background var(--fs-dur-fast);
}
.fs-toggle__track::after {
  content: "";
  position: absolute;
  left: 2px; top: 2px;
  width: 12px; height: 12px;
  background: var(--fs-text-muted);
  border-radius: 50%;
  transition: left var(--fs-dur) var(--fs-ease), background var(--fs-dur);
}
.fs-toggle input:checked + .fs-toggle__track {
  background: var(--fs-teal);
}
.fs-toggle input:checked + .fs-toggle__track::after {
  left: 16px;
  background: var(--fs-bg);
}


/* ── LEDs (status chips) ────────────────────────────────────────────────── */
.fs-led {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 7px;
  font-family: var(--fs-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: var(--fs-radius-pill);
  background: var(--fs-surface-2);
  color: var(--fs-text-muted);
  border: 1px solid var(--fs-hairline);
  line-height: 1.2;
  white-space: nowrap;
}
.fs-led::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.fs-led--live    { color: var(--fs-teal);   background: var(--fs-teal-dim);   border-color: var(--fs-teal-glow); }
.fs-led--live::before { animation: fs-pulse 1.8s var(--fs-ease) infinite; }
.fs-led--pending { color: var(--fs-yellow); background: var(--fs-yellow-dim); border-color: rgba(255,209,102,0.32); }
.fs-led--replied { color: var(--fs-teal);   background: var(--fs-teal-dim);   border-color: var(--fs-teal-glow); }
.fs-led--skipped { color: var(--fs-text-dim); background: transparent; border-color: var(--fs-hairline); }
.fs-led--error   { color: var(--fs-coral);  background: var(--fs-coral-dim);  border-color: rgba(255,107,107,0.32); }
.fs-led--ai      { color: var(--fs-teal);   background: var(--fs-teal-dim);   border-color: var(--fs-teal-glow); }
.fs-led--ai::before { content: "✦"; background: transparent; width: auto; height: auto; }

/* Bare dot for inline status */
.fs-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fs-text-dim);
}
.fs-dot--live    { background: var(--fs-teal); animation: fs-pulse 1.8s var(--fs-ease) infinite; }
.fs-dot--paused  { background: var(--fs-yellow); }
.fs-dot--error   { background: var(--fs-coral); }
.fs-dot--off     { background: var(--fs-text-dim); }


/* ── Platform chip (small mono label with icon) ─────────────────────────── */
.fs-platform {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fs-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fs-text-muted);
}
.fs-platform__icon {
  width: 12px; height: 12px;
  stroke-width: 1.8;
}
.fs-platform--youtube   { color: #ff5252; }
.fs-platform--instagram { color: #e1306c; }
.fs-platform--facebook  { color: #4a8cff; }
.fs-platform--x         { color: var(--fs-text); }
.fs-platform--tiktok    { color: var(--fs-text); }
.fs-platform--onlyfans  { color: #00aff0; }
.fs-platform--fanvue    { color: #ff7a59; }
.fs-platform--fansly    { color: #5181ff; }
.fs-platform--wordpress { color: #21759b; }


/* ── Console row (dense data row) ───────────────────────────────────────── */
.fs-row {
  display: grid;
  grid-template-columns: 80px 28px 100px minmax(160px, 2.4fr) minmax(120px, 1fr) 70px auto;
  align-items: center;
  gap: var(--fs-r-3);
  padding: 11px 18px;
  border-bottom: 1px solid var(--fs-hairline);
  cursor: pointer;
  transition: background var(--fs-dur-fast) var(--fs-ease);
  min-width: 0;
}
.fs-row:hover { background: var(--fs-surface-2); }
.fs-row.is-active { background: var(--fs-surface-2); }
.fs-row__ts {
  font-family: var(--fs-mono);
  font-size: 11px;
  color: var(--fs-text-dim);
  font-variant-numeric: tabular-nums;
}
.fs-row__avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--fs-surface-3);
  color: var(--fs-text);
  display: grid; place-items: center;
  font-family: var(--fs-mono);
  font-weight: 600;
  font-size: 11px;
  overflow: hidden;
  flex-shrink: 0;
}
.fs-row__avatar img { width: 100%; height: 100%; object-fit: cover; }
.fs-row__from { font-size: 13px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-row__text {
  font-size: 13px;
  color: var(--fs-text-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fs-row__text.has-ai::before {
  content: "✦";
  color: var(--fs-teal);
  margin-right: 6px;
  font-size: 10px;
}
.fs-row__video {
  font-family: var(--fs-mono);
  font-size: 11px;
  color: var(--fs-text-dim);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fs-row__actions { display: flex; gap: 6px; justify-content: flex-end; }

@media (max-width: 1100px) {
  .fs-row { grid-template-columns: 70px 28px 1fr 70px auto; }
  .fs-row__from, .fs-row__video { display: none; }
}
@media (max-width: 720px) {
  .fs-row { grid-template-columns: 28px 1fr 70px; padding: 10px 14px; }
  .fs-row__ts, .fs-row__actions { display: none; }
}


/* ── Dropdown ───────────────────────────────────────────────────────────── */
.fs-dropdown { position: relative; display: block; }
.fs-dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--fs-surface-1);
  border: 1px solid var(--fs-hairline-2);
  border-radius: var(--fs-radius-2);
  padding: 4px;
  z-index: 100;
  display: none;
  box-shadow: var(--fs-shadow-pop);
  animation: fs-pop var(--fs-dur) var(--fs-ease-out);
}
.fs-dropdown.is-open .fs-dropdown__menu { display: block; }
.fs-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--fs-text);
  text-decoration: none;
  border-radius: var(--fs-radius-1);
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}
.fs-dropdown__item:hover { background: var(--fs-surface-2); }
.fs-dropdown__item.is-active { color: var(--fs-teal); }
.fs-dropdown__item svg { width: 14px; height: 14px; stroke-width: 1.6; color: var(--fs-text-muted); }
.fs-dropdown__divider { height: 1px; background: var(--fs-hairline); margin: 4px 0; }
.fs-dropdown__item--danger { color: var(--fs-coral); }
.fs-dropdown__item--danger svg { color: var(--fs-coral); }


/* ── Modal ──────────────────────────────────────────────────────────────── */
.fs-modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 12, 0.78);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--fs-r-5);
  z-index: 200;
  animation: fs-fade-in var(--fs-dur) var(--fs-ease);
}
.fs-modal.is-open { display: flex; }
.fs-modal__dialog {
  background: var(--fs-surface-1);
  border: 1px solid var(--fs-hairline-2);
  border-radius: var(--fs-radius-2);
  max-width: 520px;
  width: 100%;
  box-shadow: var(--fs-shadow-pop);
  animation: fs-pop var(--fs-dur-slow) var(--fs-ease-out);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.fs-modal__head { padding: var(--fs-r-4) var(--fs-r-5); border-bottom: 1px solid var(--fs-hairline); display: flex; align-items: center; justify-content: space-between; }
.fs-modal__title { font-family: var(--fs-display); font-size: 17px; font-weight: 600; }
.fs-modal__body { padding: var(--fs-r-5); }
.fs-modal__foot { padding: var(--fs-r-4) var(--fs-r-5); border-top: 1px solid var(--fs-hairline); display: flex; gap: 10px; justify-content: flex-end; }
.fs-modal__close {
  background: transparent;
  border: none;
  color: var(--fs-text-muted);
  padding: 4px;
  cursor: pointer;
  border-radius: var(--fs-radius-1);
  transition: color var(--fs-dur-fast), background var(--fs-dur-fast);
}
.fs-modal__close:hover { color: var(--fs-text); background: var(--fs-surface-2); }


/* ── Alerts (kept alias for inline JS) ──────────────────────────────────── */
.fs-alert, .alert {
  display: flex;
  align-items: flex-start;
  gap: var(--fs-r-3);
  padding: 12px 14px;
  border: 1px solid var(--fs-hairline);
  border-left-width: 2px;
  border-radius: var(--fs-radius-1);
  background: var(--fs-surface-1);
  font-size: 13px;
  color: var(--fs-text);
  position: relative;
}
.fs-alert--success, .alert-success {
  border-left-color: var(--fs-teal);
  background: var(--fs-teal-dim);
}
.fs-alert--warning, .alert-warning {
  border-left-color: var(--fs-yellow);
  background: var(--fs-yellow-dim);
}
.fs-alert--danger, .alert-danger {
  border-left-color: var(--fs-coral);
  background: var(--fs-coral-dim);
}
.alert-dismissible {
  padding-right: 36px;
}
.alert-dismissible .btn-close,
.fs-alert__close {
  position: absolute;
  right: 8px;
  top: 8px;
  background: transparent;
  border: none;
  color: var(--fs-text-muted);
  cursor: pointer;
  padding: 4px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: var(--fs-radius-1);
}
.alert-dismissible .btn-close::after,
.fs-alert__close::after {
  content: "✕";
  font-size: 12px;
}
.alert-dismissible .btn-close:hover,
.fs-alert__close:hover { color: var(--fs-text); background: rgba(255,255,255,0.04); }


/* ── Tables (when used) ─────────────────────────────────────────────────── */
.fs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.fs-table th {
  font-family: var(--fs-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fs-text-muted);
  font-weight: 500;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--fs-hairline);
}
.fs-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--fs-hairline);
  color: var(--fs-text);
}
.fs-table tbody tr { transition: background var(--fs-dur-fast); }
.fs-table tbody tr:hover { background: var(--fs-surface-2); }
.fs-table tbody tr:last-child td { border-bottom: none; }


/* ── Tabs ───────────────────────────────────────────────────────────────── */
.fs-tabs {
  display: inline-flex;
  background: var(--fs-surface-2);
  border: 1px solid var(--fs-hairline);
  border-radius: var(--fs-radius-2);
  padding: 3px;
  gap: 2px;
  /* Scroll within the strip on narrow viewports rather than overflowing the page. */
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.fs-tabs::-webkit-scrollbar { display: none; }
.fs-tab {
  background: transparent;
  border: none;
  color: var(--fs-text-muted);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--fs-radius-1);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--fs-dur-fast), color var(--fs-dur-fast);
}
.fs-tab:hover { color: var(--fs-text); }
.fs-tab.is-active {
  background: var(--fs-surface-1);
  color: var(--fs-teal);
  box-shadow: 0 0 0 1px var(--fs-hairline-2);
}


/* ── Progress ───────────────────────────────────────────────────────────── */
.fs-progress {
  height: 4px;
  background: var(--fs-surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.fs-progress__fill {
  height: 100%;
  background: var(--fs-teal);
  transition: width var(--fs-dur-slow) var(--fs-ease);
}


/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes fs-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.85); }
}

@keyframes fs-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fs-pop {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

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

@keyframes fs-shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

/* Staggered reveal: parent sets --fs-stagger via inline style or class */
.fs-stagger > * {
  opacity: 0;
  animation: fs-enter var(--fs-dur-slow) var(--fs-ease) forwards;
}
.fs-stagger > *:nth-child(1) { animation-delay: 40ms; }
.fs-stagger > *:nth-child(2) { animation-delay: 80ms; }
.fs-stagger > *:nth-child(3) { animation-delay: 120ms; }
.fs-stagger > *:nth-child(4) { animation-delay: 160ms; }
.fs-stagger > *:nth-child(5) { animation-delay: 200ms; }
.fs-stagger > *:nth-child(6) { animation-delay: 240ms; }
.fs-stagger > *:nth-child(7) { animation-delay: 280ms; }
.fs-stagger > *:nth-child(8) { animation-delay: 320ms; }
.fs-stagger > *:nth-child(n+9) { animation-delay: 360ms; }


/* ── Grid helpers ───────────────────────────────────────────────────────── */
.fs-grid { display: grid; gap: var(--fs-r-4); }
.fs-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fs-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fs-grid--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

@media (max-width: 1100px) {
  .fs-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .fs-grid--4, .fs-grid--3, .fs-grid--2 { grid-template-columns: 1fr; }
}


/* ── Avatar ─────────────────────────────────────────────────────────────── */
.fs-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--fs-surface-3);
  color: var(--fs-text);
  display: grid; place-items: center;
  font-family: var(--fs-mono);
  font-weight: 600;
  font-size: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.fs-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fs-avatar--sm { width: 22px; height: 22px; font-size: 10px; }
.fs-avatar--lg { width: 48px; height: 48px; font-size: 16px; }
.fs-avatar--teal { background: var(--fs-teal-dim); color: var(--fs-teal); border: 1px solid var(--fs-teal-glow); }


/* ── Mobile rail (drawer) ───────────────────────────────────────────────── */
@media (max-width: 880px) {
  .fs-shell { grid-template-columns: 0 minmax(0, 1fr); }
  .fs-shell.is-expanded { grid-template-columns: 0 minmax(0, 1fr); }
  .fs-rail {
    position: fixed;
    left: 0; top: 0;
    width: var(--fs-rail-w-expanded);
    transform: translateX(-100%);
    transition: transform var(--fs-dur) var(--fs-ease);
  }
  .fs-shell.is-drawer-open .fs-rail { transform: translateX(0); }
  .fs-rail .fs-brand__name,
  .fs-rail .fs-rail__item-label,
  .fs-rail .fs-user-pill__name,
  .fs-rail .fs-rail__count,
  .fs-rail .fs-rail__toggle { opacity: 1; }

  .fs-rail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    z-index: 49;
    display: none;
  }
  .fs-shell.is-drawer-open .fs-rail-overlay { display: block; }

  .fs-page__head { padding: 0 var(--fs-r-3); gap: var(--fs-r-3); }
  /* Crumb eats horizontal room next to the hamburger + actions — drop it. */
  .fs-page__head .fs-page__crumb { display: none; }
  .fs-page__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fs-page__body { padding: var(--fs-r-3); }
}

/* Global guard: nothing should make the document scroll sideways on mobile. */
@media (max-width: 880px) {
  html, body { overflow-x: hidden; }
}

.fs-rail-overlay { display: none; }

.fs-hamburger {
  background: transparent;
  border: 1px solid var(--fs-hairline);
  border-radius: var(--fs-radius-2);
  color: var(--fs-text-muted);
  width: 36px; height: 36px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.fs-hamburger:hover { color: var(--fs-text); }
@media (max-width: 880px) {
  .fs-hamburger { display: inline-flex; }
}


/* ── Pending invitations banner ─────────────────────────────────────────── */
.fs-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--fs-r-5);
  border-bottom: 1px solid var(--fs-hairline);
  font-size: 13px;
}
.fs-banner--warn {
  background: var(--fs-yellow-dim);
  border-bottom-color: rgba(255, 209, 102, 0.18);
  color: var(--fs-text);
}
.fs-banner svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--fs-yellow); stroke-width: 1.6; }
.fs-banner a { color: var(--fs-yellow); font-weight: 600; white-space: nowrap; }


/* ── Auth (login) layout ────────────────────────────────────────────────── */
.fs-auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  background:
    radial-gradient(60% 50% at 50% -10%, var(--fs-teal-dim), transparent 60%),
    var(--fs-bg);
  position: relative;
  overflow: hidden;
}
.fs-auth::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--fs-hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--fs-hairline) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
  opacity: 0.4;
  mask-image: radial-gradient(ellipse 60% 80% at 50% 30%, #000 30%, transparent 80%);
}
.fs-auth__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fs-r-7) var(--fs-r-4);
}
.fs-auth__box {
  width: 100%;
  max-width: 420px;
  background: var(--fs-surface-1);
  border: 1px solid var(--fs-hairline-2);
  border-radius: var(--fs-radius-2);
  padding: var(--fs-r-6);
  position: relative;
  animation: fs-enter var(--fs-dur-slow) var(--fs-ease-out);
}
.fs-auth__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--fs-r-5);
}
.fs-auth__title {
  font-family: var(--fs-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.fs-auth__sub {
  font-size: 13px;
  color: var(--fs-text-muted);
}


/* ── Landing-specific helpers ───────────────────────────────────────────── */
.fs-landing { background: var(--fs-bg); color: var(--fs-text); font-family: var(--fs-body); }
.fs-landing-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(7, 9, 15, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--fs-hairline);
}
.fs-landing-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--fs-r-5);
}
/* Interactive nav: a glowing pill slides behind the hovered / active-section
   link (magnetic, scroll-spy driven). See initNavPill() in fanspeak.js. */
.fs-landing-header__nav {
  position: relative;
  display: flex;
  gap: 2px;
}
.fs-landing-header__nav a {
  position: relative;
  z-index: 1;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--fs-text-muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .25s var(--fs-ease), text-shadow .25s var(--fs-ease);
}
.fs-landing-header__nav a:hover,
.fs-landing-header__nav a.is-active {
  color: var(--fs-teal);
  text-shadow: 0 0 14px rgba(0, 201, 167, 0.45);
}
.fs-nav__pill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 34px;
  width: 0;
  transform: translateY(-50%);
  background: var(--fs-teal-dim);
  border: 1px solid var(--fs-teal-glow);
  border-radius: 999px;
  box-shadow: 0 0 22px -6px rgba(0, 201, 167, 0.6),
              inset 0 0 12px -8px rgba(0, 201, 167, 0.8);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: left .38s cubic-bezier(.34, 1.2, .4, 1),
              width .38s cubic-bezier(.34, 1.2, .4, 1),
              opacity .25s var(--fs-ease);
}
.fs-landing-header__nav.has-pill .fs-nav__pill { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .fs-nav__pill { transition: opacity .2s; }
}

/* Mobile burger + dropdown menu (desktop: hidden) */
.fs-landing-burger {
  display: none;
  background: transparent;
  border: 1px solid var(--fs-hairline);
  border-radius: var(--fs-radius-2);
  color: var(--fs-text);
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.fs-landing-burger:hover { border-color: var(--fs-hairline-2); }
.fs-landing-mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 0 var(--fs-r-5);
  max-height: 0;
  overflow: hidden;
  border-top: 1px solid transparent;
  transition: max-height var(--fs-dur) var(--fs-ease), padding var(--fs-dur) var(--fs-ease);
}
.fs-landing-header.is-menu-open .fs-landing-mobile {
  max-height: 460px;
  padding: 10px var(--fs-r-5) 18px;
  border-top-color: var(--fs-hairline);
}
.fs-landing-mobile__nav { display: flex; flex-direction: column; }
.fs-landing-mobile__nav a {
  color: var(--fs-text);
  font-size: 15px;
  font-weight: 500;
  padding: 12px 4px;
  border-bottom: 1px solid var(--fs-hairline);
}
.fs-landing-mobile__nav a:hover { color: var(--fs-teal); }
.fs-landing-mobile__lang { margin: 14px 0 4px; align-self: flex-start; }
.fs-landing-mobile__cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

@media (max-width: 880px) {
  .fs-landing-header__nav,
  .fs-landing-header__actions { display: none; }
  .fs-landing-burger { display: inline-flex; }
  .fs-landing-mobile { display: flex; }
}

.fs-landing-footer {
  border-top: 1px solid var(--fs-hairline);
  padding: var(--fs-r-7) var(--fs-r-5) var(--fs-r-6);
  color: var(--fs-text-muted);
  font-size: 13px;
}
.fs-landing-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--fs-r-7);
}
.fs-landing-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fs-r-5);
}
.fs-landing-footer__col h4 {
  font-family: var(--fs-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fs-text-dim);
  margin-bottom: 12px;
  font-weight: 500;
}
.fs-landing-footer__col a {
  display: block;
  color: var(--fs-text-muted);
  font-size: 13px;
  padding: 4px 0;
}
.fs-landing-footer__col a:hover { color: var(--fs-text); }
.fs-landing-footer__bottom {
  max-width: 1280px;
  margin: var(--fs-r-6) auto 0;
  padding-top: var(--fs-r-4);
  border-top: 1px solid var(--fs-hairline);
  display: flex;
  justify-content: space-between;
  gap: var(--fs-r-3);
  font-family: var(--fs-mono);
  font-size: 11px;
  color: var(--fs-text-dim);
}
@media (max-width: 720px) {
  .fs-landing-footer__inner { grid-template-columns: 1fr; gap: var(--fs-r-5); }
  .fs-landing-footer__nav { grid-template-columns: 1fr 1fr; }
}

/* Landing hero */
.fs-hero {
  position: relative;
  padding: 96px var(--fs-r-5) 64px;
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden;
}
.fs-hero__grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--fs-hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--fs-hairline) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 50% at 50% 0%, #000 40%, transparent 80%);
  z-index: 0;
  pointer-events: none;
}
.fs-hero__content { position: relative; z-index: 1; max-width: 800px; }
.fs-hero h1 {
  font-size: clamp(40px, 6.5vw, 76px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin-bottom: var(--fs-r-5);
  font-variation-settings: "opsz" 96;
}
.fs-hero h1 .fs-hero__accent { color: var(--fs-teal); }
.fs-hero__sub {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.55;
  color: var(--fs-text-muted);
  max-width: 580px;
  margin-bottom: var(--fs-r-6);
}
.fs-hero__cta { display: flex; flex-wrap: wrap; gap: var(--fs-r-3); }

.fs-section { padding: var(--fs-r-8) var(--fs-r-5); max-width: 1280px; margin: 0 auto; }
.fs-section__head { text-align: center; margin-bottom: var(--fs-r-7); }
.fs-section h2 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin-bottom: var(--fs-r-3);
}
.fs-section__lead {
  font-size: 16px;
  color: var(--fs-text-muted);
  max-width: 640px;
  margin: 0 auto;
}


/* ── Legacy Bootstrap-class shims ───────────────────────────────────────────
   Inline JS across templates injects HTML strings that reference these.
   Keeping them here so we don't repeat in every template's extra_head.
   ────────────────────────────────────────────────────────────────────────── */
.spinner-border {
  display: inline-block;
  width: 12px; height: 12px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: fs-spin 0.7s linear infinite;
  vertical-align: -2px;
}
.spinner-border-sm { width: 10px; height: 10px; border-width: 1.4px; }
@keyframes fs-spin { to { transform: rotate(360deg); } }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--fs-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  line-height: 1.2;
  border: 1px solid var(--fs-hairline);
  background: var(--fs-surface-2);
  color: var(--fs-text-muted);
  white-space: nowrap;
}
.badge-pending  { color: var(--fs-yellow); background: var(--fs-yellow-dim); border-color: rgba(255,209,102,.32); }
.badge-replied  { color: var(--fs-teal);   background: var(--fs-teal-dim);   border-color: var(--fs-teal-glow); }
.badge-skipped  { color: var(--fs-text-dim); background: transparent; border-color: var(--fs-hairline); }
.badge-new      { color: var(--fs-coral);  background: var(--fs-coral-dim);  border-color: rgba(255,107,107,.32); }

.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--fs-surface-3);
  color: var(--fs-text);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fs-mono);
  font-weight: 600;
  font-size: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 22px; height: 22px; font-size: 10px; }
.avatar-lg { width: 40px; height: 40px; font-size: 14px; }
.rounded-circle { border-radius: 50% !important; }