/* ═══════════════════════════════════════════════════════════
   FLOWPOINT DASHBOARD — Premium CSS v2.0
   Design System: #050810 bg · #2563EB accent · Outfit+Inter
   Compatible: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
   ═══════════════════════════════════════════════════════════ */

/* ── GOOGLE FONTS fallback (if HTML link fails) ── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

/* ── DESIGN TOKENS ── */
:root {
  --fp-map-placeholder-bg: rgba(10,14,27,0.95);
  --fp-bg-inset:      rgba(255,255,255,0.04);
  --fp-bg-subtle:     rgba(255,255,255,0.02);
  --fp-bg-row-hover:  rgba(255,255,255,0.04);
  /* Colors */
  --fp-bg:            #050810;
  --fp-bg-deep:       #030508;
  --fp-bg-card:       #0d1525;
  --fp-bg-card-hover: #121e3a;
  --fp-card:          #0d1525; /* alias — dropdowns, skeleton blocks */
  --fp-bg-sidebar:    rgba(13,21,37,0.97);
  --fp-bg-input:      rgba(255,255,255,0.04);
  --fp-bg-overlay:    rgba(5,8,16,0.75);
  --fp-card-bg:       #0d1525; /* solid modal/dialog background (dark) */

  --fp-accent:        #2563EB;
  --fp-accent-dark:   #1d4ed8;
  --fp-accent-light:  #3b82f6;
  --fp-accent-glow:   rgba(37,99,235,0.22);
  --fp-accent-subtle: rgba(37,99,235,0.12);
  --fp-accent-border: rgba(37,99,235,0.35);

  --fp-success:       #22c55e;
  --fp-success-bg:    rgba(34,197,94,0.12);
  --fp-warning:       #f59e0b;
  --fp-warning-bg:    rgba(245,158,11,0.12);
  --fp-danger:        #ef4444;
  --fp-danger-bg:     rgba(239,68,68,0.12);
  --fp-purple:        #8b5cf6;
  --fp-purple-bg:     rgba(139,92,246,0.12);
  --fp-cyan:          #06b6d4;

  --fp-text:          #f1f5ff;
  --fp-text-soft:     #c8d8f8;
  --fp-text-muted:    #94a3b8;
  --fp-text-faint:    #4b5e8a;

  --fp-border:        rgba(255,255,255,0.05);
  --fp-border-active: rgba(37,99,235,0.40);
  --fp-border-hover:  rgba(255,255,255,0.12);
  --fp-track:         rgba(255,255,255,0.09);

  /* Typography */
  --fp-font-head:     'Outfit', system-ui, sans-serif;
  --fp-font-body:     'Inter', system-ui, sans-serif;
  --fp-font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing */
  --fp-sidebar-w:     248px;
  --fp-topbar-h:      56px;
  --fp-radius-sm:     8px;
  --fp-radius-md:     12px;
  --fp-radius-lg:     16px;
  --fp-radius-xl:     20px;
  --fp-radius-full:   9999px;

  /* Transitions */
  --fp-ease:          cubic-bezier(0.16,1,0.3,1);
  --fp-ease-spring:   cubic-bezier(0.34,1.56,0.64,1);
  --fp-t-fast:        120ms var(--fp-ease);
  --fp-t-med:         200ms var(--fp-ease);
  --fp-t-slow:        320ms var(--fp-ease);

  /* Shadows */
  --fp-shadow-sm:     0 2px 8px rgba(0,0,0,0.3);
  --fp-shadow-md:     0 8px 24px rgba(0,0,0,0.4);
  --fp-shadow-lg:     0 16px 48px rgba(0,0,0,0.5);
  --fp-shadow-xl:     0 24px 80px rgba(0,0,0,0.6);
  --fp-shadow-glow:   0 8px 32px rgba(37,99,235,0.3);
}

/* Light theme */
[data-theme="light"] {
  --fp-bg:            #f8faff;
  --fp-bg-deep:       #eef2ff;
  --fp-bg-card:       #ffffff;
  --fp-bg-card-hover: #f0f4ff;
  --fp-card:          #ffffff;
  --fp-bg-sidebar:    rgba(255,255,255,0.97);
  --fp-bg-input:      rgba(0,0,0,0.04);
  --fp-bg-overlay:    rgba(248,250,255,0.75);
  --fp-card-bg:       #ffffff; /* solid modal/dialog background (light) */
  --fp-map-placeholder-bg: #eef2f9;
  --fp-bg-inset:      rgba(0,0,0,0.04);
  --fp-bg-subtle:     rgba(0,0,0,0.02);
  --fp-bg-row-hover:  rgba(37,99,235,0.03);
  --fp-text:          #0f172a;
  --fp-text-soft:     #1e293b;
  --fp-text-muted:    #64748b;
  --fp-text-faint:    #94a3b8;
  --fp-border:        rgba(0,0,0,0.08);
  --fp-border-hover:  rgba(0,0,0,0.15);
  --fp-bg-overlay:    rgba(0,0,0,0.5);
  --fp-track:         rgba(0,0,0,0.10);
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  color-scheme: dark;
  background: #050810;
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  font-family: var(--fp-font-body);
  background: var(--fp-bg);
  color: var(--fp-text);
  height: 100svh;
  overflow: hidden;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }

button { font-family: var(--fp-font-body); cursor: pointer; }
input, textarea, select { font-family: var(--fp-font-body); }
a { color: var(--fp-accent); text-decoration: none; }

/* ── BACKGROUND GRADIENT ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 600px at 5% 0%, rgba(37,99,235,0.18), transparent 55%),
    radial-gradient(800px 500px at 100% 10%, rgba(139,92,246,0.10), transparent 50%),
    linear-gradient(180deg, var(--fp-bg) 0%, #070d1e 50%, var(--fp-bg) 100%);
  pointer-events: none;
  /* no transition — prevents load flicker */
}
[data-theme="light"] body::before { display: none; }

/* ── LAYOUT ── */
.fp-layout {
  display: grid;
  grid-template-columns: var(--fp-sidebar-w) 1fr;
  min-height: 100vh;
}

/* ── SIDEBAR ── */
.fp-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
  border-right: 1px solid var(--fp-border);
  background: var(--fp-bg-sidebar);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  gap: 4px;
  z-index: 200;
}

.fp-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 18px;
  border-bottom: 1px solid var(--fp-border);
  margin-bottom: 6px;
}

.fp-brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--fp-accent), var(--fp-accent-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px var(--fp-accent-glow);
  flex-shrink: 0;
  transition: box-shadow var(--fp-t-med);
}
.fp-brand-logo:hover { box-shadow: 0 12px 32px rgba(37,99,235,0.45); }

.fp-brand-name {
  font-family: var(--fp-font-head);
  font-size: 17px;
  font-weight: 800;
  color: var(--fp-text);
  letter-spacing: -0.03em;
}

.fp-brand-sub {
  font-size: 10px;
  color: var(--fp-text-muted);
  margin-top: 1px;
}

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

.fp-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--fp-radius-md);
  border: 1px solid transparent;
  background: none;
  color: var(--fp-text-muted);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  transition: all var(--fp-t-fast);
  position: relative;
  width: 100%;
}

.fp-nav-item:hover {
  background: rgba(255,255,255,0.04);
  color: var(--fp-text);
}

.fp-nav-item.active {
  background: linear-gradient(135deg, rgba(37,99,235,0.25), rgba(37,99,235,0.15));
  border-color: rgba(37,99,235,0.3);
  color: var(--fp-text);
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(37,99,235,0.15);
}

.fp-nav-item.active .fp-nav-icon { color: var(--fp-accent); }

.fp-nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
}

.fp-nav-badge {
  margin-left: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fp-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fp-nav-ai {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--fp-radius-md);
  border: 1px solid rgba(139,92,246,0.2);
  background: rgba(139,92,246,0.06);
  color: var(--fp-purple);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  width: 100%;
  margin-top: 6px;
  transition: all var(--fp-t-fast);
}
.fp-nav-ai:hover { background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.35); }
.fp-nav-ai.active { background: rgba(139,92,246,0.2); border-color: rgba(139,92,246,0.4); }

.fp-badge-ai {
  margin-left: auto;
  background: rgba(37,99,235,0.18);
  border: 1px solid rgba(37,99,235,0.35);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 9px;
  color: #2563EB;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.fp-sidebar-footer {
  margin-top: auto;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border-radius: var(--fp-radius-md);
  border: 1px solid var(--fp-border);
}

.fp-status-dot-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.fp-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fp-success);
  flex-shrink: 0;
}
.fp-status-dot.down { background: var(--fp-danger); animation: pulse 1.5s infinite; }
.fp-status-dot.warn { background: var(--fp-warning); }

.fp-status-text { font-size: 11px; font-weight: 600; color: var(--fp-success); }
.fp-status-text.down { color: var(--fp-danger); }

.fp-usage-bars { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }


.fp-usage-bar-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
}
.fp-usage-bar-label { font-size: 10px; color: var(--fp-text-faint); }
.fp-usage-bar-val { font-size: 10px; color: var(--fp-text-muted); font-family: var(--fp-font-mono); }
.fp-usage-bar-track {
  height: 4px;
  border-radius: 999px;
  background: var(--fp-track);
  overflow: hidden;
}
.fp-usage-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--fp-accent);
  transition: width 0.8s var(--fp-ease);
}
.fp-usage-bar-fill.warn { background: var(--fp-danger); }

.fp-sidebar-user {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 10px;
  padding: 12px 4px 2px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.fp-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(37,99,235,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--fp-accent);
  font-size: 12px;
  flex-shrink: 0;
}
.fp-user-name { font-size: 11px; font-weight: 600; color: var(--fp-text); }
.fp-user-plan { font-size: 10px; color: var(--fp-text-muted); }

/* ── MAIN WRAPPER ── */
.fp-main-wrap {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* ── TOPBAR ── */
.fp-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--fp-topbar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 32px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: #050810;
  backdrop-filter: none;
}
[data-theme="light"] .fp-topbar { background: #f8faff; }
[data-theme="light"] .fp-card {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


.fp-search-trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--fp-bg-input);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  padding: 7px 12px;
  color: var(--fp-text-muted);
  font-size: 12px;
  flex: none;
  width: 180px;
  text-align: left;
  transition: border-color var(--fp-t-fast);
  white-space: nowrap;
}
.fp-search-trigger:hover { border-color: var(--fp-accent-border); }
.fp-search-trigger span { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.fp-topbar-spacer { flex: 1; }

.fp-topbar-status {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: 8px;
  padding: 6px 12px;
  color: var(--fp-success);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--fp-font-body);
  transition: all var(--fp-t-fast);
}
.fp-topbar-status:hover { background: rgba(34,197,94,0.08); }
.fp-topbar-status.down { border-color: rgba(239,68,68,0.3); color: var(--fp-danger); }

.fp-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--fp-radius-md);
  border: 1px solid var(--fp-border);
  background: var(--fp-bg-input);
  color: var(--fp-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--fp-t-fast);
  position: relative;
  flex-shrink: 0;
}
.fp-icon-btn:hover { border-color: var(--fp-accent-border); color: var(--fp-accent); }
.fp-icon-btn--ai { border-color: rgba(139,92,246,0.25); background: rgba(139,92,246,0.1); color: var(--fp-purple); }
.fp-icon-btn--ai:hover { background: rgba(139,92,246,0.18); }

/* ── PAGE CONTENT ── */
.fp-page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: clip;
  padding: 24px 28px 100px;
  -webkit-overflow-scrolling: touch;
}

/* ── SECTION HEADER ── */
.fp-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}
.fp-section-header h1 {
  font-family: var(--fp-font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--fp-text);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.fp-section-sub {
  font-size: 13px;
  color: var(--fp-text-muted);
  margin-top: 4px;
}
.fp-section-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}

/* ── CARDS ── */
.fp-card {
  background: var(--fp-bg-card);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  padding: 20px 24px;
  transition: border-color var(--fp-t-med), box-shadow var(--fp-t-med);
  position: relative;
}
.fp-card:hover {
  border-color: rgba(37,99,235,0.25);
  box-shadow: 0 4px 24px rgba(37,99,235,0.08);
}

.fp-card-sm { padding: 14px 18px; }
.fp-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fp-text);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── KPI CARDS ── */
.fp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.fp-kpi-card {
  background: var(--fp-bg-card);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  padding: 20px 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
  transition: all var(--fp-t-med);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.fp-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37,99,235,0.4), transparent);
  opacity: 0;
  transition: opacity var(--fp-t-med);
}
.fp-kpi-card:hover::before { opacity: 1; }
.fp-kpi-card:hover { border-color: rgba(37,99,235,0.3); box-shadow: 0 4px 20px rgba(37,99,235,0.1); }

.fp-kpi-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.fp-kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fp-kpi-value {
  font-family: var(--fp-font-head);
  font-size: 26px;
  font-weight: 800;
  color: var(--fp-text);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 4px;
}
.fp-kpi-label { font-size: 12px; color: var(--fp-text-muted); }
.fp-kpi-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
}
.fp-kpi-trend.up { color: var(--fp-success); }
.fp-kpi-trend.down { color: var(--fp-danger); }
.fp-kpi-sub { font-size: 11px; color: var(--fp-text-faint); }

/* Sparkline SVG */
.fp-sparkline { overflow: visible; display:block; }
.fp-sparkline polyline { transition: all var(--fp-t-med); }

/* Sparkline table cell */
.fp-sparkline-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fp-sparkline-delta {
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  font-family: var(--fp-font-mono);
}

/* SEO trend line chart */
.fp-trend-chart-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fp-trend-chart-svg {
  display: block;
  border-radius: 6px;
}
.fp-trend-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 0 4px;
}

/* Per-site sparkline cards in Analysis */
.fp-site-sparkline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.fp-site-sparkline-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--fp-radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fp-site-sparkline-url {
  font-size: 10px;
  color: var(--fp-text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--fp-font-mono);
}
.fp-site-sparkline-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}
.fp-site-sparkline-score {
  font-size: 22px;
  font-weight: 800;
  font-family: var(--fp-font-head);
  line-height: 1;
}
.fp-site-sparkline-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.fp-site-sparkline-change {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--fp-font-mono);
}
.fp-site-sparkline-label {
  font-size: 9px;
  color: var(--fp-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── BUTTONS ── */
.fp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--fp-radius-md);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--fp-font-body);
  border: 1px solid transparent;
  transition: all var(--fp-t-fast);
  white-space: nowrap;
  cursor: pointer;
}
.fp-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.fp-btn-primary {
  background: linear-gradient(135deg, var(--fp-accent), var(--fp-accent-dark));
  border-color: rgba(37,99,235,0.4);
  color: #fff;
  box-shadow: 0 4px 16px rgba(37,99,235,0.3);
}
.fp-btn-primary:hover { opacity: 0.88; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,99,235,0.35); }

.fp-btn-ghost {
  background: var(--fp-bg-input);
  border-color: var(--fp-border);
  color: var(--fp-text-soft);
}
.fp-btn-ghost:hover { border-color: var(--fp-border-hover); color: var(--fp-text); }

.fp-btn-danger {
  background: var(--fp-danger-bg);
  border-color: rgba(239,68,68,0.3);
  color: var(--fp-danger);
}
.fp-btn-danger:hover { background: rgba(239,68,68,0.2); }

.fp-btn-sm { padding: 6px 12px; font-size: 12px; }
.fp-btn-sm svg { width: 13px; height: 13px; }

/* ── BADGES ── */
.fp-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--fp-radius-full);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
  vertical-align: middle;
}

/* ── TOGGLE ── */
.fp-toggle {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  position: relative;
  cursor: pointer;
  border: none;
  flex-shrink: 0;
  transition: background var(--fp-t-med);
}
.fp-toggle.on { background: var(--fp-accent); }
.fp-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: transform var(--fp-t-med) var(--fp-ease-spring);
}
.fp-toggle.on::after { transform: translateX(20px); }

/* ── TABLES ── */
.fp-table-wrap {
  background: var(--fp-bg-card);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.fp-table {
  width: 100%;
  border-collapse: collapse;
}
.fp-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fp-text-faint);
  border-bottom: 1px solid var(--fp-border);
}
.fp-table td {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--fp-text-soft);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.fp-table tr:last-child td { border-bottom: none; }
.fp-table tbody tr {
  cursor: pointer;
  transition: background var(--fp-t-fast);
}
.fp-table tbody tr:hover { background: rgba(37,99,235,0.06); }

/* Score bar */
.fp-score-bar-wrap { display: flex; align-items: center; gap: 8px; }
.fp-score-bar-track {
  flex: 1;
  min-width: 40px;
  height: 6px;
  border-radius: 999px;
  background: var(--fp-track);
  overflow: hidden;
  flex-shrink: 0;
}
.fp-score-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.8s var(--fp-ease);
}
.fp-score-val {
  font-family: var(--fp-font-mono);
  font-size: 13px;
  font-weight: 700;
}

/* Progress bar */
.fp-progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--fp-track);
  overflow: hidden;
}
.fp-progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.8s var(--fp-ease);
}

/* ── COMMAND PALETTE ── */
.fp-cmd-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  background: rgba(5,8,16,0.70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fp-fade-in 0.15s var(--fp-ease);
}
.fp-cmd-overlay[hidden] { display: none; }
.fp-cmd-box {
  width: 100%;
  max-width: 560px;
  background: #0d1525;
  border: 1px solid rgba(37,99,235,0.3);
  border-radius: var(--fp-radius-lg);
  box-shadow: var(--fp-shadow-xl);
  overflow: hidden;
  animation: fp-scale-in 0.18s var(--fp-ease-spring);
}
.fp-cmd-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.fp-cmd-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--fp-text);
  font-size: 14px;
  font-family: var(--fp-font-body);
}
.fp-cmd-esc {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--fp-text-muted);
}
.fp-cmd-results { max-height: 380px; overflow-y: auto; padding: 8px 0; }
.fp-cmd-category {
  padding: 8px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fp-text-faint);
}
.fp-cmd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background var(--fp-t-fast);
}
.fp-cmd-item:hover, .fp-cmd-item.selected {
  background: rgba(37,99,235,0.15);
}
.fp-cmd-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--fp-text-muted);
}
.fp-cmd-item.selected .fp-cmd-item-icon, .fp-cmd-item:hover .fp-cmd-item-icon {
  background: rgba(37,99,235,0.2);
  color: var(--fp-accent);
}
.fp-cmd-item-label { flex: 1; font-size: 14px; color: var(--fp-text-soft); }
.fp-cmd-item.selected .fp-cmd-item-label, .fp-cmd-item:hover .fp-cmd-item-label { color: var(--fp-text); }
.fp-cmd-item-shortcut {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  color: var(--fp-text-faint);
}
.fp-cmd-footer {
  padding: 10px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--fp-text-faint);
}
.fp-cmd-empty { padding: 32px 16px; text-align: center; color: var(--fp-text-faint); font-size: 14px; }

/* ── CONTEXT MENU ── */
.fp-ctx-menu {
  position: fixed;
  z-index: 9998;
  background: #0d1525;
  border: 1px solid rgba(37,99,235,0.25);
  border-radius: var(--fp-radius-md);
  box-shadow: var(--fp-shadow-lg);
  min-width: 200px;
  overflow: hidden;
  animation: fp-scale-in 0.12s var(--fp-ease-spring);
}
.fp-ctx-menu[hidden] { display: none; }
.fp-ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--fp-text-soft);
  cursor: pointer;
  transition: background var(--fp-t-fast);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--fp-font-body);
}
.fp-ctx-item svg { width: 14px; height: 14px; color: var(--fp-text-muted); flex-shrink: 0; }
.fp-ctx-item:hover { background: rgba(37,99,235,0.12); }
.fp-ctx-item.danger { color: var(--fp-danger); }
.fp-ctx-item.danger svg { color: var(--fp-danger); }
.fp-ctx-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 4px 0; }

/* ── FLOATING PANEL ── */
.fp-float-panel-wrapper {
  position: fixed;
  inset: 0;
  z-index: 900;
}
.fp-float-panel-wrapper[hidden] { display: none; }
.fp-float-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5,8,16,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fp-fade-in 0.2s var(--fp-ease);
}
.fp-float-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 460px;
  background: #0a1020;
  border-left: 1px solid rgba(37,99,235,0.2);
  display: flex;
  flex-direction: column;
  box-shadow: -24px 0 80px rgba(0,0,0,0.4);
  animation: fp-slide-in-right 0.28s var(--fp-ease);
}
.fp-float-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.fp-float-panel-title {
  font-family: var(--fp-font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--fp-text);
}
.fp-float-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

/* ── TOAST SYSTEM ── */
#fp-toast-container {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}
.fp-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--fp-radius-md);
  color: var(--fp-text);
  font-size: 13px;
  max-width: 340px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  pointer-events: all;
  animation: fp-slide-in-left 0.2s var(--fp-ease-spring);
  border: 1px solid transparent;
}
.fp-toast svg { flex-shrink: 0; }
.fp-toast span { flex: 1; }
.fp-toast-close { background: none; border: none; color: var(--fp-text-muted); cursor: pointer; display: flex; padding: 0; }
.fp-toast.success { background: #14532d; border-color: rgba(34,197,94,0.4); }
.fp-toast.error   { background: #7f1d1d; border-color: rgba(239,68,68,0.4); }
.fp-toast.warning { background: #78350f; border-color: rgba(245,158,11,0.4); }
.fp-toast.info    { background: #1e3a5f; border-color: rgba(37,99,235,0.4); }

/* ── NOTIFICATION CENTER ── */
.fp-notif-wrap { position: relative; }
.fp-notif-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fp-danger);
  border: 2px solid var(--fp-bg);
}
.fp-notif-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 320px;
  background: var(--fp-bg-sidebar);
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: 14px;
  box-shadow: var(--fp-shadow-xl);
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 500;
  animation: fp-scale-in 0.15s var(--fp-ease-spring);
}
.fp-notif-dropdown[hidden] { display: none; }
.fp-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.fp-notif-title { font-size: 14px; font-weight: 700; color: var(--fp-text); }
.fp-notif-mark-all { background: none; border: none; font-size: 12px; color: var(--fp-accent); cursor: pointer; }
.fp-notif-item {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  transition: background var(--fp-t-fast);
}
.fp-notif-item:hover { background: rgba(37,99,235,0.06); }
.fp-notif-item.unread { background: rgba(37,99,235,0.06); }
.fp-notif-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.fp-notif-body { flex: 1; }
.fp-notif-item-title { font-size: 13px; font-weight: 600; color: var(--fp-text); }
.fp-notif-item-desc { font-size: 12px; color: var(--fp-text-muted); margin-top: 2px; }
.fp-notif-item-time { font-size: 11px; color: var(--fp-text-faint); margin-top: 4px; }

/* External notification widgets inherit the active dashboard palette as well. */
html:not([data-theme="light"]) [role="alert"],
html:not([data-theme="light"]) .notification,
html:not([data-theme="light"]) .toast,
html:not([data-theme="light"]) .fp-toast {
  color: var(--fp-text);
}

/* ── SHORTCUTS MODAL ── */
.fp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5,8,16,0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fp-fade-in 0.15s var(--fp-ease);
}
.fp-modal-overlay[hidden] { display: none; }
.fp-modal {
  background: #0d1525;
  border: 1px solid rgba(37,99,235,0.3);
  border-radius: var(--fp-radius-lg);
  padding: 24px;
  width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--fp-shadow-xl);
  animation: fp-scale-in 0.18s var(--fp-ease-spring);
}
.fp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.fp-modal-title {
  font-family: var(--fp-font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--fp-text);
}

/* ── DARK CONFIRMATION DIALOG ── */
.fp-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 5, 12, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fp-fade-in 0.15s var(--fp-ease);
}
.fp-confirm-dialog {
  width: min(420px, 100%);
  padding: 26px 28px;
  border: 1px solid rgba(37,99,235,0.34);
  border-radius: var(--fp-radius-lg);
  background: #0d1525;
  box-shadow: 0 24px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.03);
  animation: fp-scale-in 0.18s var(--fp-ease-spring);
}
.fp-confirm-title {
  margin: 0 0 10px;
  font-family: var(--fp-font-head);
  font-size: 17px;
  line-height: 1.25;
  color: var(--fp-text);
}
.fp-confirm-message {
  margin: 0 0 22px;
  color: var(--fp-text-muted);
  font-size: 13px;
  line-height: 1.65;
}
.fp-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.fp-confirm-danger { background: var(--fp-danger) !important; border-color: var(--fp-danger) !important; }
[data-theme="light"] .fp-confirm-overlay { background: rgba(15,23,42,0.52); }
[data-theme="light"] .fp-confirm-dialog {
  background: #ffffff;
  border-color: rgba(37,99,235,0.22);
  box-shadow: 0 24px 60px rgba(15,23,42,0.22);
}
@media (max-width: 480px) {
  .fp-confirm-dialog { padding: 22px 20px; }
  .fp-confirm-actions { flex-direction: column-reverse; }
  .fp-confirm-actions .fp-btn { width: 100%; }
}
.fp-shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.fp-shortcut-label { font-size: 13px; color: var(--fp-text-muted); }
.fp-shortcut-keys { display: flex; gap: 4px; }
.fp-shortcut-keys kbd {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
  color: var(--fp-text-soft);
  font-family: var(--fp-font-body);
}

/* ── FAB MENU (legacy block — overridden below) ── */
.fp-fab-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 190;
}

/* ── FILTER BAR ── */
.fp-filter-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.fp-search-input-wrap { flex: 1; position: relative; min-width: 200px; }
.fp-search-input-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fp-text-muted);
  pointer-events: none;
  width: 14px;
  height: 14px;
}
.fp-search-input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  background: var(--fp-bg-input);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-sm);
  color: var(--fp-text);
  font-size: 13px;
  outline: none;
  transition: border-color var(--fp-t-fast);
}
.fp-search-input:focus { border-color: var(--fp-accent-border); }
.fp-search-input::placeholder { color: var(--fp-text-muted); }

.fp-filter-tab {
  padding: 8px 14px;
  border-radius: var(--fp-radius-sm);
  background: var(--fp-bg-input);
  border: 1px solid var(--fp-border);
  color: var(--fp-text-muted);
  font-size: 12px;
  cursor: pointer;
  font-family: var(--fp-font-body);
  font-weight: 400;
  transition: all var(--fp-t-fast);
}
.fp-filter-tab.active {
  background: rgba(37,99,235,0.2);
  border-color: rgba(37,99,235,0.4);
  color: var(--fp-text);
  font-weight: 700;
}

.fp-select {
  background: var(--fp-bg-input);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-sm);
  padding: 8px 12px;
  color: var(--fp-text-muted);
  font-size: 13px;
  font-family: var(--fp-font-body);
  cursor: pointer;
  outline: none;
}
.fp-select option { background: #0d1525; color: var(--fp-text); }

/* ── GRID HELPERS ── */
.fp-grid { display: grid; }
.fp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.fp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.fp-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.fp-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.fp-mb-16 { margin-bottom: 16px; }
.fp-mb-20 { margin-bottom: 20px; }
.fp-mb-24 { margin-bottom: 24px; }

/* ── ACTIVITY FEED ── */
.fp-activity-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.fp-activity-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.fp-activity-title { font-size: 12px; font-weight: 600; color: var(--fp-text); line-height: 1.3; }
.fp-activity-desc { font-size: 11px; color: var(--fp-text-muted); margin-top: 1px; }
.fp-activity-time { font-size: 10px; color: var(--fp-text-faint); margin-top: 2px; }

/* ── MONITOR CARDS ── */
.fp-monitor-card {
  background: var(--fp-bg-card);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  padding: 18px 20px;
  cursor: pointer;
  transition: all var(--fp-t-med);
  position: relative;
  overflow: hidden;
}
.fp-monitor-card:hover { border-color: rgba(37,99,235,0.25); box-shadow: var(--fp-shadow-sm); }
.fp-monitor-card.down { border-color: rgba(239,68,68,0.25); }
.fp-monitor-status-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fp-monitor-name-wrap { display: flex; align-items: center; gap: 8px; }
.fp-monitor-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fp-monitor-pulse.up { background: var(--fp-success); animation: pulse-glow-green 2s infinite; }
.fp-monitor-pulse.down { background: var(--fp-danger); animation: pulse-glow-red 1.2s infinite; }
.fp-monitor-pulse.warn { background: var(--fp-warning); }
.fp-monitor-name { font-size: 13px; font-weight: 700; color: var(--fp-text); }
.fp-monitor-url { font-size: 11px; color: var(--fp-text-muted); font-family: var(--fp-font-mono); margin-bottom: 12px; }
.fp-monitor-stats { display: flex; gap: 16px; margin-bottom: 12px; }
.fp-monitor-stat-label { font-size: 11px; color: var(--fp-text-faint); }
.fp-monitor-stat-value { font-size: 15px; font-weight: 700; font-family: var(--fp-font-head); }
.fp-uptime-bars { display: flex; gap: 2px; }
.fp-uptime-bar {
  flex: 1;
  height: 20px;
  border-radius: 3px;
}

/* ── MISSION KANBAN ── */
.fp-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fp-kanban-empty-state {
  width: 100%;
  box-sizing: border-box;
  min-height: 70px;
  max-height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px dashed rgba(255,255,255,0.22);
  border-radius: var(--fp-radius-md);
  padding: 12px;
}
[data-theme="light"] .fp-kanban-empty-state { border-color: rgba(0,0,0,0.18); }

.fp-kanban-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.fp-kanban-col-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fp-kanban-col-title { font-size: 13px; font-weight: 700; color: var(--fp-text); }
.fp-kanban-col-count {
  margin-left: auto;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  color: var(--fp-text-muted);
}
.fp-kanban-cards { display: flex; flex-direction: column; gap: 10px; min-height: 100px; }
.fp-kanban-card {
  background: var(--fp-bg-card);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  padding: 14px;
  cursor: grab;
  transition: all var(--fp-t-fast);
}
.fp-kanban-card:hover { border-color: rgba(37,99,235,0.25); }
.fp-kanban-card:active { cursor: grabbing; }
.fp-kanban-card-title { font-size: 12px; color: var(--fp-text-soft); line-height: 1.4; margin-bottom: 8px; }

/* ── AI CHAT ── */
.fp-ai-wrap { display: flex; flex-direction: column; gap: 12px; background: var(--fp-bg-card); }
.fp-ai-message {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 2px;
}
.fp-ai-message.user { flex-direction: row-reverse; }
.fp-ai-avatar {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.fp-ai-bubble {
  width: fit-content;
  max-width: 72%;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  padding: 7px 11px;
  font-size: 12px;
  color: var(--fp-text-soft);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.fp-ai-message.user { justify-content: flex-start; }
.fp-ai-message.user .fp-ai-bubble { margin-left: auto; }
.fp-ai-message.ai .fp-ai-bubble { background: rgba(255,255,255,0.04); }
.fp-ai-message.user .fp-ai-bubble { background: rgba(37,99,235,0.12); border-color: rgba(37,99,235,0.2); }
.fp-ai-input-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  align-items: flex-end;
}
.fp-ai-input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: var(--fp-radius-md);
  padding: 10px 14px;
  color: var(--fp-text);
  font-size: 13px;
  outline: none;
  transition: border-color var(--fp-t-fast);
  resize: none;
  max-height: 120px;
  overflow-y: auto !important;
}
.fp-ai-input:focus { border-color: rgba(37,99,235,0.5); }
.fp-ai-send {
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(135deg, var(--fp-accent), var(--fp-accent-dark));
  border: none;
  border-radius: var(--fp-radius-md);
  padding: 0;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  flex-shrink: 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--fp-t-fast);
}
.fp-ai-send:hover { opacity: 0.85; }
.fp-ai-send:disabled { opacity: 0.4; cursor: not-allowed; }
.fp-ai-typing {
  display: flex;
  gap: 4px;
  align-items: center;
}
.fp-ai-typing-inline {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 4px;
}
.fp-ai-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fp-accent);
  animation: fp-typing 1.2s infinite ease-in-out;
}
.fp-ai-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.fp-ai-typing-dot:nth-child(3) { animation-delay: 0.3s; }
.fp-ai-quick-prompts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.fp-ai-quick {
  background: rgba(37,99,235,0.1);
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--fp-accent);
  cursor: pointer;
  font-family: var(--fp-font-body);
  transition: all var(--fp-t-fast);
}
.fp-ai-quick:hover { background: rgba(37,99,235,0.18); }

/* ── LOCAL SEO CIRCLE ── */
.fp-circle-chart { position: relative; display: inline-flex; flex-direction: column; align-items: center; }
.fp-circle-chart svg circle { transition: stroke-dasharray 1s var(--fp-ease); }
.fp-circle-value {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.fp-circle-num { font-family: var(--fp-font-head); font-size: 28px; font-weight: 800; color: var(--fp-text); }
.fp-circle-den { font-size: 10px; color: var(--fp-text-muted); }

/* ── CHECKLIST ── */
.fp-checklist { display: flex; flex-direction: column; gap: 8px; }
.fp-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.fp-check-box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--fp-t-fast);
}
.fp-check-box.checked { background: rgba(34,197,94,0.2); border-color: var(--fp-success); }
.fp-check-label { font-size: 12px; color: var(--fp-text-soft); }
.fp-check-label.done { text-decoration: line-through; color: var(--fp-text-muted); }

/* ── FORM ELEMENTS ── */
.fp-form-group { margin-bottom: 14px; }
.fp-form-label {
  display: block;
  font-size: 11px;
  color: var(--fp-text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.fp-input {
  width: 100%;
  background: var(--fp-bg-input);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-sm);
  padding: 8px 12px;
  color: var(--fp-text);
  font-size: 13px;
  font-family: var(--fp-font-body);
  outline: none;
  transition: border-color var(--fp-t-fast);
}
.fp-input:focus { border-color: var(--fp-accent-border); }
.fp-input::placeholder { color: var(--fp-text-muted); }

/* ── EMPTY STATE ── */
.fp-empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--fp-text-faint);
  font-size: 14px;
}

/* ── EMPTY STATE — nice centered card ── */
.fp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  text-align: center;
}
.fp-empty-state-icon { font-size: 36px; margin-bottom: 12px; opacity: 0.5; }
.fp-empty-state h3 {
  font-size: 15px; font-weight: 700; color: var(--fp-text);
  margin: 0 0 6px;
}
.fp-empty-state p {
  font-size: 12px; color: var(--fp-text-muted); margin: 0 0 16px;
  line-height: 1.5;
}

/* ── VIEW TOGGLE ── */
.fp-view-toggle {
  display: flex;
  background: var(--fp-bg-input);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  overflow: hidden;
}
.fp-view-toggle-btn {
  padding: 6px 14px;
  background: none;
  border: none;
  color: var(--fp-text-muted);
  font-size: 12px;
  cursor: pointer;
  font-family: var(--fp-font-body);
  font-weight: 600;
  transition: all var(--fp-t-fast);
}
.fp-view-toggle-btn.active { background: rgba(37,99,235,0.3); color: var(--fp-text); }

/* ── INLINE QUICK-ADD ── */
.fp-quick-add {
  background: var(--fp-bg-card);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  padding: 14px 18px;
  margin-bottom: 20px;
}
.fp-quick-add-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--fp-text-muted);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.fp-quick-add-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── SCORE DONUT (local seo) ── */
.fp-score-ring { transform: rotate(-90deg); transform-origin: center; }

/* ── ONBOARDING ── */
.fp-onboarding {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5,8,16,0.85);
  backdrop-filter: blur(8px);
}
.fp-onboarding[hidden] { display: none; }
.fp-onboarding-card {
  background: #0d1525;
  border: 1px solid rgba(37,99,235,0.3);
  border-radius: var(--fp-radius-xl);
  padding: 36px;
  width: 480px;
  text-align: center;
  box-shadow: var(--fp-shadow-xl);
  animation: fp-scale-in 0.2s var(--fp-ease-spring);
}
.fp-onboarding-step { font-size: 11px; color: var(--fp-accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; }
.fp-onboarding-title { font-family: var(--fp-font-head); font-size: 22px; font-weight: 800; color: var(--fp-text); margin-bottom: 10px; }
.fp-onboarding-desc { font-size: 14px; color: var(--fp-text-muted); margin-bottom: 24px; line-height: 1.6; }
.fp-onboarding-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 24px; }
.fp-onboarding-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.1); transition: background var(--fp-t-fast); }
.fp-onboarding-dot.active { background: var(--fp-accent); }
.fp-onboarding-actions { display: flex; gap: 10px; justify-content: center; }

/* ── HOVER TOOLBAR ── */
.fp-hover-toolbar-wrap { position: relative; }
.fp-hover-toolbar {
  position: absolute;
  top: -40px;
  right: 0;
  display: flex;
  gap: 4px;
  background: #0d1525;
  border: 1px solid rgba(37,99,235,0.3);
  border-radius: 8px;
  padding: 4px 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity var(--fp-t-fast), transform var(--fp-t-fast);
}
.fp-hover-toolbar-wrap:hover .fp-hover-toolbar {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.fp-hover-toolbar-btn {
  background: none;
  border: none;
  color: var(--fp-text-muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  font-size: 11px;
  gap: 4px;
  transition: all var(--fp-t-fast);
}
.fp-hover-toolbar-btn:hover { background: rgba(37,99,235,0.15); color: var(--fp-accent); }

/* ── ANIMATIONS ── */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.92); }
}
@keyframes pulse-glow-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}
@keyframes pulse-glow-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
@keyframes fp-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fp-scale-in {
  from { opacity: 0; transform: scale(0.95) translateY(-10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fp-slide-in-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes fp-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes fp-slide-in-left {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fp-fab-item-in {
  from { opacity: 0; transform: translateY(20px) scale(0.8); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fp-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@keyframes fp-page-in { from { opacity:1; } to { opacity:1; } }
/* Content wrapper must never animate from opacity:0 — it causes the invisible-frame flash */
.fp-page-animated { animation: none !important; opacity: 1; }

/* ── RESPONSIVE MOBILE ── */
@media (max-width: 768px) {
  .fp-layout { grid-template-columns: 1fr; }
  .fp-sidebar {
    position: fixed;
    /* Fully off-screen: explicit width (auto width can exceed 260px and bleed
       onto the left edge) + cushion for border/box-shadow */
    width: var(--fp-sidebar-w);
    left: calc(-1 * var(--fp-sidebar-w) - 24px);
    overflow-x: hidden;
    top: var(--fp-topbar-h);
    bottom: 0;
    height: auto;
    z-index: 500;
    transition: left var(--fp-t-slow);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  }
  .fp-sidebar.mobile-open { left: 0; }
  .fp-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 499;
    background: rgba(5,8,16,0.6);
    backdrop-filter: blur(4px);
  }
  .fp-mobile-overlay.show { display: block; }
  .fp-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .fp-grid-2, .fp-grid-3, .fp-grid-4 { grid-template-columns: 1fr; }
  .fp-page { padding: 16px 16px 100px; }
  .fp-topbar {
    padding: env(safe-area-inset-top, 0px) 16px 0;
    height: auto;
    min-height: var(--fp-topbar-h);
  }
  .fp-float-panel { width: 100%; max-width: 100%; }
  .fp-kanban { grid-template-columns: 1fr; }
}

/* ── FAB BACKDROP ── */
.fp-fab-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 198;
  background: rgba(5,8,16,0.5);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.fp-fab-backdrop.show { display: block; }

/* ── MOBILE HAMBURGER ── */
.fp-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  border-radius: 8px;
}
.fp-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--fp-text-muted);
  border-radius: 2px;
  transition: all var(--fp-t-fast);
}
.fp-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fp-hamburger.open span:nth-child(2) { opacity: 0; }
.fp-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 768px) { .fp-hamburger { display: flex; } }

/* ── TABLE HOVER ACTIONS (hide by default, show on row hover) ── */
.fp-table tbody tr .fp-row-actions {
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity var(--fp-t-fast);
}
.fp-table tbody tr:hover .fp-row-actions { opacity: 1; }
.fp-table tbody tr:focus-within .fp-row-actions { opacity: 1; }

@media (hover: none), (pointer: coarse) {
  .fp-table tbody tr .fp-row-actions { opacity: 1; }
}


/* ── UTILITY ── */
.fp-text-accent { color: var(--fp-accent); }
.fp-text-success { color: var(--fp-success); }
.fp-text-danger { color: var(--fp-danger); }
.fp-text-warning { color: var(--fp-warning); }
.fp-text-muted { color: var(--fp-text-muted); }
.fp-mono { font-family: var(--fp-font-mono); }
.fp-head { font-family: var(--fp-font-head); }
.fp-hidden { display: none !important; }
.fp-gap-8 { gap: 8px; }
.fp-flex { display: flex; }
.fp-flex-center { display: flex; align-items: center; }
.fp-flex-between { display: flex; align-items: center; justify-content: space-between; }
.fp-link-btn { background: none; border: none; color: var(--fp-accent); font-size: 12px; cursor: pointer; font-family: var(--fp-font-body); }

/* ── KANBAN DRAG/DROP ── */
.fp-kanban-card.dragging { opacity: 0.4; transform: scale(0.97); }
.fp-kanban-col.drag-over { background: rgba(37,99,235,0.07); border: 1px dashed rgba(37,99,235,0.4); }

/* ── J/K ROW SELECTION ── */
.fp-row-selected { background: rgba(37,99,235,0.08) !important; outline: 1px solid rgba(37,99,235,0.3); }

/* ═══════════════════════════════════════════════════════════
   FLOWPOINT v3 — Sidebar Collapse · SubNav · AI Blocks
   New Pages · Command Palette · FAB Fix · Retention
   ═══════════════════════════════════════════════════════════ */

/* ── SIDEBAR COLLAPSE ── */
:root { --fp-sidebar-collapsed-w: 64px; }

.fp-sidebar {
  transition: width var(--fp-t-med), padding var(--fp-t-med);
}

.fp-layout {
  transition: grid-template-columns var(--fp-t-med);
}

.fp-sidebar.collapsed {
  width: var(--fp-sidebar-collapsed-w);
  padding: 16px 8px;
  overflow-x: hidden;
  overflow-y: auto;
}

.fp-layout.sidebar-collapsed {
  grid-template-columns: var(--fp-sidebar-collapsed-w) 1fr;
}

.fp-sidebar.collapsed .fp-brand-text,
.fp-sidebar.collapsed .fp-nav-section-label,
.fp-sidebar.collapsed .fp-nav-badge,
.fp-sidebar.collapsed .fp-nav-new,
.fp-sidebar.collapsed .fp-badge-ai,
.fp-sidebar.collapsed .fp-sidebar-footer .fp-status-text,
.fp-sidebar.collapsed .fp-sidebar-footer .fp-usage-bars,
.fp-sidebar.collapsed .fp-sidebar-footer .fp-streak-row,
.fp-sidebar.collapsed .fp-sidebar-footer .fp-sidebar-user,
.fp-sidebar.collapsed .fp-nav-item > span,
.fp-sidebar.collapsed .fp-nav-ai > span { display: none !important; }

.fp-sidebar.collapsed .fp-brand {
  justify-content: center;
  padding: 4px 0 16px;
  gap: 0;
}

.fp-sidebar.collapsed .fp-nav-item {
  justify-content: center;
  padding: 11px 0;
  gap: 0;
}

.fp-sidebar.collapsed .fp-nav-ai {
  justify-content: center;
  padding: 11px 0;
  gap: 0;
}

.fp-sidebar.collapsed .fp-status-dot-wrap { justify-content: center; }
.fp-sidebar.collapsed .fp-sidebar-footer { padding: 10px 4px; text-align: center; }

/* ── SIDEBAR COLLAPSE BUTTON ── */
.fp-sidebar-collapse-btn {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--fp-border);
  background: var(--fp-bg-input);
  color: var(--fp-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--fp-t-fast);
  opacity: 0.55;
}
.fp-sidebar-collapse-btn svg { transition: transform var(--fp-t-fast); }
.fp-sidebar:hover .fp-sidebar-collapse-btn { opacity: 1; }
.fp-sidebar.collapsed .fp-sidebar-collapse-btn { display: flex !important; margin: 0 auto; opacity: 1; }
.fp-sidebar.collapsed .fp-sidebar-collapse-btn svg { transform: scaleX(-1); }
.fp-sidebar-collapse-btn:hover {
  color: var(--fp-accent);
  background: var(--fp-accent-subtle);
  border-color: var(--fp-accent-border);
  opacity: 1;
}

/* ── NAV SECTION LABELS ── */
.fp-nav-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fp-text-faint);
  padding: 10px 14px 4px;
}

/* ── NAV NEW BADGE ── */
.fp-nav-new {
  margin-left: auto;
  background: linear-gradient(135deg, #2563EB, #8b5cf6);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #fff;
}

.fp-nav-badge--warn {
  background: var(--fp-warning) !important;
  color: #000 !important;
}

/* ── TOPBAR BREADCRUMB ── */
.fp-topbar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fp-text-muted);
  white-space: nowrap;
  margin-right: 8px;
}

.fp-topbar-brand {
  font-family: var(--fp-font-head);
  font-weight: 800;
  color: var(--fp-text);
  font-size: 14px;
}

.fp-topbar-page-name {
  color: var(--fp-text);
  font-weight: 600;
}

/* ── TOPBAR SCORE ── */
.fp-topbar-score {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(245,158,11,0.2);
  background: rgba(245,158,11,0.06);
  font-size: 12px;
  font-weight: 700;
  color: #f59e0b;
  white-space: nowrap;
  cursor: default;
}

/* ── STREAK ROW ── */
.fp-streak-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(245,158,11,0.06);
  border: 1px solid rgba(245,158,11,0.15);
}

.fp-streak-label {
  font-size: 11px;
  color: var(--fp-text-muted);
}

.fp-streak-label strong {
  color: #f59e0b;
  font-family: var(--fp-font-mono);
}

/* ── SUB-NAVIGATION TABS ── */
.fp-sub-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  margin: 0 0 28px;
  padding: 5px 6px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--fp-bg-input);
}

.fp-sub-nav::-webkit-scrollbar { display: none; }

/* ── Global: all inline overflow-x:auto divs get reliable iOS scroll ── */
div[style*="overflow-x:auto"],
div[style*="overflow-x: auto"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.fp-sub-nav-item {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fp-text-muted);
  background: none;
  border: none;
  border-radius: calc(var(--fp-radius-lg) - 4px);
  white-space: nowrap;
  transition: all var(--fp-t-fast);
  cursor: pointer;
  font-family: var(--fp-font-body);
}

.fp-sub-nav-item:hover { color: var(--fp-text); background: rgba(255,255,255,0.05); }

.fp-sub-nav-item.active {
  color: var(--fp-text);
  background: var(--fp-bg-card);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

/* ── AI BLOCK ── */
.fp-ai-block {
  background: rgba(37,99,235,0.04);
  border: 1px solid rgba(37,99,235,0.12);
  border-radius: var(--fp-radius-md);
  padding: 8px 12px;
  margin-bottom: 12px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.fp-ai-block-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--fp-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fp-ai-block-content { flex: 1; min-width: 0; }

.fp-ai-block-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fp-accent-light);
  margin-bottom: 4px;
}

.fp-ai-block-text {
  font-size: 13px;
  color: var(--fp-text-soft);
  line-height: 1.6;
}

.fp-ai-block-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.fp-ai-chip {
  padding: 4px 12px;
  border-radius: 100px;
  border: 1px solid rgba(37,99,235,0.25);
  background: rgba(37,99,235,0.08);
  color: var(--fp-accent-light);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--fp-t-fast);
  font-family: var(--fp-font-body);
}

.fp-ai-chip:hover {
  background: rgba(37,99,235,0.16);
  border-color: rgba(37,99,235,0.4);
}

/* ── STAT ROW ── */
.fp-stat-row {
  display: grid;
  /* auto-fit (not auto-fill): empty tracks collapse so cards always span 100% width */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
  width: 100%;
}

.fp-stat-card {
  background: var(--fp-bg-card);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color var(--fp-t-fast), background var(--fp-t-fast);
}

.fp-stat-card:hover {
  border-color: var(--fp-border-hover);
  background: var(--fp-bg-card-hover);
}

.fp-stat-card-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--fp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fp-stat-card-value {
  font-family: var(--fp-font-head);
  font-size: 28px;
  font-weight: 800;
  color: var(--fp-text);
  line-height: 1;
  margin: 4px 0;
}

.fp-stat-card-delta {
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.fp-stat-card-delta.up   { color: var(--fp-success); }
.fp-stat-card-delta.down { color: var(--fp-danger); }
.fp-stat-card-delta.neutral { color: var(--fp-text-muted); }

/* ── COMMAND PALETTE (redesigned — click-only) ── */
.fp-cmd-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgba(5,8,16,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding-top: 72px;
}

.fp-cmd-box {
  width: 100%;
  max-width: 640px;
  background: var(--fp-bg-sidebar);
  border: 1px solid var(--fp-border-hover);
  border-radius: var(--fp-radius-xl);
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(37,99,235,0.1);
  animation: cmd-in 0.18s var(--fp-ease-spring) both;
  max-height: calc(100vh - 144px);
  display: flex;
  flex-direction: column;
}

@keyframes cmd-in {
  from { opacity: 0; transform: scale(0.96) translateY(-10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.fp-cmd-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--fp-border);
  flex-shrink: 0;
}

.fp-cmd-input {
  flex: 1;
  background: none;
  border: none;
  font-size: 16px;
  font-weight: 500;
  color: var(--fp-text);
  outline: none;
  font-family: var(--fp-font-body);
}

.fp-cmd-input::placeholder { color: var(--fp-text-faint); }

.fp-cmd-results {
  overflow-y: auto;
  padding: 8px;
  flex: 1;
}

.fp-cmd-category {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fp-text-faint);
  padding: 10px 12px 4px;
}

.fp-cmd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--fp-t-fast);
}

.fp-cmd-item:hover,
.fp-cmd-item.selected { background: rgba(37,99,235,0.1); }

.fp-cmd-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--fp-bg-card);
  border: 1px solid var(--fp-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--fp-text-muted);
}

.fp-cmd-item-label {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--fp-text);
}

.fp-cmd-item-desc {
  font-size: 11px;
  color: var(--fp-text-faint);
}

.fp-cmd-item-shortcut { display: none; }

.fp-cmd-empty {
  padding: 48px 32px;
  text-align: center;
  color: var(--fp-text-faint);
  font-size: 14px;
}

.fp-cmd-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  border-top: 1px solid var(--fp-border);
  font-size: 11px;
  color: var(--fp-text-faint);
  flex-shrink: 0;
}

.fp-cmd-footer span { display: flex; align-items: center; gap: 4px; }
.fp-cmd-footer kbd {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: var(--fp-font-body);
}

.fp-cmd-esc {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--fp-text-faint);
  font-family: var(--fp-font-body);
}

/* ── FAB REDESIGN (vertical list, round) ── */
.fp-grid-2-wide {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 16px;
}
@media (max-width: 768px) {
  .fp-grid-2-wide { grid-template-columns: 1fr; }
}

.fp-fab-wrap {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

.fp-fab-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: 10px;
}

.fp-fab-action-item {
  display: flex;
  align-items: center;
  gap: 8px;
  animation: fab-item-in 0.16s var(--fp-ease-spring) both;
}

@keyframes fab-item-in {
  from { opacity: 0; transform: translateY(8px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.fp-fab-action-label {
  background: var(--fp-bg-sidebar);
  border: 1px solid var(--fp-border);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fp-text-soft);
  white-space: nowrap;
  box-shadow: var(--fp-shadow-md);
  pointer-events: none;
}

.fp-fab-action-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--fp-border);
  background: var(--fp-bg-sidebar);
  color: var(--fp-text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--fp-t-fast);
  box-shadow: var(--fp-shadow-md);
  flex-shrink: 0;
}

.fp-fab-action-btn:hover {
  background: var(--fp-accent);
  border-color: var(--fp-accent);
  color: white;
  transform: scale(1.08);
  box-shadow: var(--fp-shadow-glow);
}

.fp-fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--fp-accent);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(37,99,235,0.45);
  transition: all var(--fp-t-fast);
  flex-shrink: 0;
}

.fp-fab:hover {
  background: var(--fp-accent-dark);
  transform: scale(1.07);
  box-shadow: 0 10px 32px rgba(37,99,235,0.55);
}

.fp-fab-icon { transition: transform 0.2s var(--fp-ease-spring); }
.fp-fab.open .fp-fab-icon { transform: rotate(45deg); }

@keyframes fab-item-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(16px) scale(0.82); }
}
.fp-fab-action-item.closing {
  animation: fab-item-out 0.2s var(--fp-ease-spring) forwards !important;
}

/* ── SCROLL TO TOP ── */
#fp-scroll-top {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(14px);
  right: auto;
  z-index: 199;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--fp-bg-sidebar);
  border: 1px solid var(--fp-border);
  color: var(--fp-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--fp-shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
#fp-scroll-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
#fp-scroll-top:hover { background: var(--fp-accent); border-color: var(--fp-accent); color: #fff; }
@media (max-width: 768px) { #fp-scroll-top { bottom: 80px; left: 50%; right: auto; } }

/* ── UPSELL BANNER ── */
.fp-upsell-banner {
  background: linear-gradient(135deg, rgba(245,158,11,0.07), rgba(239,68,68,0.05));
  border: 1px solid rgba(245,158,11,0.22);
  border-radius: var(--fp-radius-lg);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.fp-upsell-text { font-size: 13px; color: var(--fp-text-soft); }
.fp-upsell-text strong { color: #f59e0b; }

/* ── TIMELINE ── */
.fp-timeline { display: flex; flex-direction: column; position: relative; }

.fp-timeline::before {
  display: none;
}

.fp-timeline-item {
  display: flex;
  gap: 16px;
  padding: 10px 0;
  position: relative;
}

.fp-timeline-dot {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  border: 1px solid var(--fp-border);
  background: var(--fp-bg);
}

.fp-timeline-body { flex: 1; padding-top: 5px; }
.fp-timeline-title { font-size: 13px; font-weight: 600; color: var(--fp-text); }
.fp-timeline-desc  { font-size: 12px; color: var(--fp-text-muted); margin-top: 2px; }
.fp-timeline-time  { font-size: 10px; color: var(--fp-text-faint); font-family: var(--fp-font-mono); margin-top: 4px; }

/* ── PROGRESS BAR ── */
.fp-progress-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 100px;
  overflow: hidden;
}

.fp-progress-fill {
  height: 100%;
  border-radius: 100px;
  background: var(--fp-accent);
  transition: width 0.8s var(--fp-ease);
}

/* ── DATA TABLE ── */
.fp-data-table {
  width: 100%;
  border-collapse: collapse;
}

.fp-data-table th,
.fp-data-table td {
  padding: 10px 14px;
  text-align: left;
  font-size: 12px;
  border-bottom: 1px solid var(--fp-border);
}

.fp-data-table th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fp-text-faint);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.fp-data-table th:hover { color: var(--fp-text); }
.fp-data-table td { color: var(--fp-text-soft); }
.fp-data-table tbody tr { cursor: pointer; }
.fp-data-table tbody tr:hover { background: var(--fp-bg-card-hover); }

/* ── ALERT ITEM ── */
.fp-alert-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--fp-radius-md);
  border: 1px solid var(--fp-border);
  background: var(--fp-bg-card);
  margin-bottom: 10px;
  transition: all var(--fp-t-fast);
}

.fp-alert-item:hover { border-color: var(--fp-border-hover); background: var(--fp-bg-card-hover); }
.fp-alert-item.critical { border-left: 3px solid var(--fp-danger); }
.fp-alert-item.warning  { border-left: 3px solid var(--fp-warning); }
.fp-alert-item.info     { border-left: 3px solid var(--fp-accent); }
.fp-alert-item.success  { border-left: 3px solid var(--fp-success); }

.fp-alert-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fp-alert-body { flex: 1; }
.fp-alert-title { font-size: 13px; font-weight: 600; color: var(--fp-text); }
.fp-alert-desc  { font-size: 12px; color: var(--fp-text-muted); margin-top: 2px; }
.fp-alert-time  { font-size: 10px; color: var(--fp-text-faint); margin-top: 4px; font-family: var(--fp-font-mono); }

/* ── ALERT RULE ROW ── */
.fp-alert-rule-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--fp-border);
  background: rgba(255,255,255,0.02);
  margin-bottom: 1px;
  transition: background var(--fp-t-fast), border-color var(--fp-t-fast);
}
.fp-alert-rule-row:hover { background: var(--fp-bg-card-hover); border-color: var(--fp-border-hover); }

/* ── DELTA CHIP ── */
.fp-delta-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
}

.fp-delta-chip.up      { background: rgba(34,197,94,0.12);  color: var(--fp-success); }
.fp-delta-chip.down    { background: rgba(239,68,68,0.12);  color: var(--fp-danger); }
.fp-delta-chip.neutral { background: rgba(148,163,184,0.1); color: var(--fp-text-muted); }

/* ── FUNNEL ── */
.fp-funnel { display: flex; flex-direction: column; gap: 8px; }

.fp-funnel-step { display: flex; align-items: center; gap: 14px; }

.fp-funnel-bar-wrap {
  flex: 1;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  position: relative;
}

.fp-funnel-bar-fill {
  height: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  transition: width 0.8s var(--fp-ease);
}

.fp-funnel-label {
  width: 140px;
  font-size: 12px;
  color: var(--fp-text-muted);
  text-align: right;
  flex-shrink: 0;
}

.fp-funnel-val {
  width: 60px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fp-text);
  text-align: right;
  font-family: var(--fp-font-mono);
  flex-shrink: 0;
}

/* ── OPPORTUNITY CARD ── */
.fp-opp-card {
  background: var(--fp-bg-card);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  transition: all var(--fp-t-fast);
}

.fp-opp-card:hover {
  border-color: var(--fp-accent-border);
  background: var(--fp-bg-card-hover);
  transform: translateX(2px);
}

.fp-opp-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fp-opp-body { flex: 1; }
.fp-opp-title  { font-size: 13px; font-weight: 600; color: var(--fp-text); }
.fp-opp-desc   { font-size: 12px; color: var(--fp-text-muted); margin-top: 2px; }
.fp-opp-impact { font-size: 11px; font-weight: 700; color: var(--fp-success); margin-top: 4px; }

/* ── BAR CHART ── */
.fp-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  overflow: hidden;
}

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

.fp-bar-chart-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--fp-accent);
  opacity: 0.65;
  transition: opacity var(--fp-t-fast);
  min-height: 4px;
}

.fp-bar-chart-bar:hover { opacity: 1; }

.fp-bar-chart-label {
  font-size: 9px;
  color: var(--fp-text-faint);
  font-family: var(--fp-font-mono);
}

/* ── CLIENT MODE ── */
.fp-client-header {
  text-align: center;
  padding: 32px;
  background: linear-gradient(135deg, var(--fp-bg-card), rgba(37,99,235,0.04));
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-xl);
  margin-bottom: 28px;
}

/* ── INSIGHT CARD ── */
.fp-insight-card {
  background: var(--fp-bg-card);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  padding: 18px 20px;
  transition: all var(--fp-t-fast);
  cursor: pointer;
}

.fp-insight-card:hover {
  border-color: var(--fp-border-hover);
  background: var(--fp-bg-card-hover);
  transform: translateY(-1px);
}

.fp-insight-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.fp-insight-type {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── SECTION BLOCK ── */
.fp-section-block { margin-bottom: 28px; }

.fp-section-block-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--fp-text);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── COMPETITOR ROW ── */
.fp-competitor-row {
  display: grid;
  grid-template-columns: 1fr 80px 100px auto;
  gap: 16px;
  align-items: center;
  background: var(--fp-bg-card);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  padding: 14px 18px;
  margin-bottom: 8px;
  transition: all var(--fp-t-fast);
}

.fp-competitor-row:hover {
  border-color: var(--fp-border-hover);
  background: var(--fp-bg-card-hover);
}

.fp-competitor-name { font-size: 13px; font-weight: 600; color: var(--fp-text); }
.fp-competitor-url  { font-size: 11px; color: var(--fp-text-faint); font-family: var(--fp-font-mono); }

/* ── TAG ── */
.fp-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--fp-border);
  background: var(--fp-bg-card);
  color: var(--fp-text-muted);
}

/* ── MESSAGES DROPDOWN ── */
.fp-msg-wrap { position: relative; }

.fp-msg-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: var(--fp-bg-sidebar);
  border: 1px solid var(--fp-border-hover);
  border-radius: var(--fp-radius-xl);
  box-shadow: var(--fp-shadow-xl);
  z-index: 500;
  overflow: hidden;
  animation: fp-dropdown-in 0.15s var(--fp-ease-spring) both;
}

@keyframes fp-dropdown-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.fp-msg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--fp-border);
}

.fp-msg-list { max-height: 260px; overflow-y: auto; padding: 6px 0; }

.fp-msg-item {
  display: flex;
  gap: 10px;
  padding: 9px 16px;
  transition: background var(--fp-t-fast);
  cursor: pointer;
}
.fp-msg-item:hover { background: var(--fp-bg-card-hover); }
.fp-msg-item.unread { background: rgba(37,99,235,0.04); }
.fp-msg-item.self { opacity: 0.7; }

.fp-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fp-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fp-msg-body { flex: 1; min-width: 0; }
.fp-msg-from { font-size: 12px; font-weight: 600; color: var(--fp-text); }
.fp-msg-text { font-size: 12px; color: var(--fp-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.fp-msg-time { font-size: 10px; color: var(--fp-text-faint); margin-top: 2px; }

.fp-msg-compose {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--fp-border);
}

/* ── RESPONSIVE FOR NEW ELEMENTS ── */
@media (max-width: 1100px) {
  .fp-stat-row { grid-template-columns: repeat(2, 1fr); }
  .fp-competitor-row { grid-template-columns: 1fr 80px; }
}

@media (max-width: 900px) {
  .fp-topbar-breadcrumb { display: none; }
}

@media (max-width: 600px) {
  .fp-stat-row { grid-template-columns: 1fr; }
  .fp-topbar-score { display: none; }
  .fp-fab-wrap { bottom: 16px; right: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — FULL PARITY v3.0 (Resend-level premium)
   ═══════════════════════════════════════════════════════════ */

/* -- Sidebar -- */
[data-theme="light"] .fp-sidebar {
  background: #ffffff;
  border-right: 1px solid rgba(0,0,0,0.08);
  box-shadow: none;
}
[data-theme="light"] .fp-brand { border-bottom: 1px solid rgba(0,0,0,0.07); }
[data-theme="light"] .fp-sidebar-footer { border-top: 1px solid rgba(0,0,0,0.07); }
[data-theme="light"] .fp-nav-section-label { color: #94a3b8; }
[data-theme="light"] .fp-nav-item { color: #64748b; }
[data-theme="light"] .fp-nav-item:hover { background: rgba(0,0,0,0.04); color: #0f172a; }
[data-theme="light"] .fp-nav-item.active {
  background: rgba(37,99,235,0.07);
  border-color: rgba(37,99,235,0.18);
  color: var(--fp-accent);
  box-shadow: 0 2px 8px rgba(37,99,235,0.06);
}
[data-theme="light"] .fp-nav-ai { background: rgba(139,92,246,0.05); border-color: rgba(139,92,246,0.15); }
[data-theme="light"] .fp-nav-ai:hover { background: rgba(139,92,246,0.09); }
[data-theme="light"] .fp-sidebar-user { background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.07); }
[data-theme="light"] .fp-user-name { color: #0f172a; }
[data-theme="light"] .fp-user-plan { color: #64748b; }

/* -- Topbar -- */
[data-theme="light"] .fp-topbar {
  background: rgba(255,255,255,0.97) !important;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  box-shadow: none;
}
[data-theme="light"] .fp-search-trigger {
  background: #f1f5f9;
  border-color: rgba(0,0,0,0.09);
  color: #64748b;
}
[data-theme="light"] .fp-search-trigger:hover { background: #e8eef5; border-color: rgba(37,99,235,0.25); }
[data-theme="light"] .fp-topbar-breadcrumb { color: #475569; }
[data-theme="light"] .fp-icon-btn {
  background: #f8fafc;
  border-color: rgba(0,0,0,0.09);
  color: #475569;
}
[data-theme="light"] .fp-icon-btn:hover { background: #f1f5f9; border-color: rgba(37,99,235,0.25); color: var(--fp-accent); }
[data-theme="light"] .fp-icon-btn--ai { background: rgba(139,92,246,0.07); border-color: rgba(139,92,246,0.2); }
[data-theme="light"] .fp-topbar-status { background: rgba(34,197,94,0.07); border-color: rgba(34,197,94,0.25); color: #15803d; }
[data-theme="light"] .fp-topbar-score { background: rgba(37,99,235,0.06); border: 1px solid rgba(37,99,235,0.16); }

/* -- Cards -- */
[data-theme="light"] .fp-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: none;
}
[data-theme="light"] .fp-card:hover {
  border-color: rgba(37,99,235,0.2);
  box-shadow: none;
}
[data-theme="light"] .fp-kpi-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: none;
}
[data-theme="light"] .fp-kpi-card:hover { border-color: rgba(37,99,235,0.25); box-shadow: 0 4px 20px rgba(37,99,235,0.08); }
[data-theme="light"] .fp-card-title { color: #0f172a; }

/* -- Tables -- */
[data-theme="light"] .fp-table-wrap {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: none;
}
[data-theme="light"] .fp-table th {
  background: #f8fafc;
  color: #475569;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
[data-theme="light"] .fp-table td { border-bottom: 1px solid rgba(0,0,0,0.04); color: #334155; }
[data-theme="light"] .fp-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.025); }
[data-theme="light"] .fp-table tbody tr:hover { background: #eff6ff; }

/* -- Sub nav -- */
[data-theme="light"] .fp-sub-nav { background: #f1f5f9; border: 1px solid rgba(0,0,0,0.07); }
[data-theme="light"] .fp-sub-nav-item { color: #475569; }
[data-theme="light"] .fp-sub-nav-item:hover { background: rgba(0,0,0,0.04); color: #0f172a; }
[data-theme="light"] .fp-sub-nav-item.active { background: #ffffff; color: #0f172a; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }

/* -- Dropdowns -- */
[data-theme="light"] .fp-notif-dropdown,
[data-theme="light"] .fp-msg-dropdown {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.09);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06);
}
[data-theme="light"] .fp-notif-header,
[data-theme="light"] .fp-msg-header { border-bottom: 1px solid rgba(0,0,0,0.07); }
[data-theme="light"] .fp-notif-item:hover { background: #f8fafc; }
[data-theme="light"] .fp-notif-item.unread { background: rgba(37,99,235,0.04); }
[data-theme="light"] .fp-msg-channels { border-bottom: 1px solid rgba(0,0,0,0.07); background: #fafafa; }
[data-theme="light"] .fp-msg-channel-btn { color: #64748b; }
[data-theme="light"] .fp-msg-channel-btn:hover { background: rgba(0,0,0,0.04); color: #0f172a; }
[data-theme="light"] .fp-msg-channel-btn.active { background: rgba(37,99,235,0.07); color: var(--fp-accent); }
[data-theme="light"] .fp-msg-item:hover { background: #f8fafc; }
[data-theme="light"] .fp-msg-item.unread { background: rgba(37,99,235,0.03); }
[data-theme="light"] .fp-msg-compose { background: #f8fafc; border-top: 1px solid rgba(0,0,0,0.07); }
[data-theme="light"] .fp-msg-upload-btn { border-color: rgba(0,0,0,0.09); color: #64748b; }
[data-theme="light"] .fp-msg-upload-btn:hover { background: #e8eef5; border-color: rgba(37,99,235,0.2); color: var(--fp-accent); }
[data-theme="light"] .fp-msg-attachment { background: #f1f5f9; border-color: rgba(0,0,0,0.08); }

/* -- Command Palette -- */
[data-theme="light"] .fp-cmd-box { background: #ffffff; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 20px 60px rgba(0,0,0,0.12); }
[data-theme="light"] .fp-cmd-input { background: transparent; color: #0f172a; border-bottom: 1px solid rgba(0,0,0,0.07); }
[data-theme="light"] .fp-cmd-input::placeholder { color: #94a3b8; }
[data-theme="light"] .fp-cmd-section-label { color: #94a3b8; }
[data-theme="light"] .fp-cmd-item:hover,
[data-theme="light"] .fp-cmd-item.selected { background: #f1f5f9; }
[data-theme="light"] .fp-cmd-item-label { color: #0f172a; }
[data-theme="light"] .fp-cmd-item-desc { color: #64748b; }

/* -- Float Panel -- */
[data-theme="light"] .fp-float-panel { background: #ffffff; border-left: 1px solid rgba(0,0,0,0.08); box-shadow: -4px 0 32px rgba(0,0,0,0.08); }
[data-theme="light"] .fp-float-panel-header { background: #f8fafc; border-bottom: 1px solid rgba(0,0,0,0.07); }
[data-theme="light"] .fp-float-panel-title { color: #0f172a; }

/* -- AI blocks -- */
[data-theme="light"] .fp-ai-block { background: rgba(37,99,235,0.03); border: 1px solid rgba(37,99,235,0.1); }
[data-theme="light"] .fp-ai-quick { background: rgba(37,99,235,0.05); border: 1px solid rgba(37,99,235,0.13); color: #1d4ed8; }
[data-theme="light"] .fp-ai-quick:hover { background: rgba(37,99,235,0.09); }

/* -- Toasts -- */
[data-theme="light"] .fp-toast.success { background: #f0fdf4; border-color: rgba(34,197,94,0.35); color: #15803d; }
[data-theme="light"] .fp-toast.error { background: #fef2f2; border-color: rgba(239,68,68,0.35); color: #b91c1c; }
[data-theme="light"] .fp-toast.warning { background: #fffbeb; border-color: rgba(245,158,11,0.35); color: #92400e; }
[data-theme="light"] .fp-toast.info { background: #eff6ff; border-color: rgba(37,99,235,0.35); color: #1d4ed8; }

/* -- Section headers -- */
[data-theme="light"] h1 { color: #0f172a; }
[data-theme="light"] .fp-section-sub { color: #64748b; }
[data-theme="light"] .fp-section-header { border-bottom: 1px solid rgba(0,0,0,0.06); }

/* -- Progress -- */
[data-theme="light"] .fp-progress-track { background: rgba(0,0,0,0.06); }

/* -- Inputs -- */
[data-theme="light"] .fp-input { background: #f8fafc; border-color: rgba(0,0,0,0.1); color: #0f172a; }
[data-theme="light"] .fp-input:focus { border-color: var(--fp-accent); background: #ffffff; }
[data-theme="light"] .fp-input::placeholder { color: #94a3b8; }

/* -- Modal -- */
[data-theme="light"] .fp-modal-overlay { background: rgba(15,23,42,0.4); }
[data-theme="light"] .fp-modal { background: #ffffff; border: 1px solid rgba(0,0,0,0.09); box-shadow: 0 20px 60px rgba(0,0,0,0.15); }

/* -- FAB -- */
[data-theme="light"] .fp-fab { box-shadow: 0 2px 8px rgba(37,99,235,0.18); }
[data-theme="light"] .fp-fab-item { background: #ffffff; border: 1px solid rgba(0,0,0,0.09); box-shadow: 0 4px 16px rgba(0,0,0,0.08); color: #0f172a; }
[data-theme="light"] .fp-fab-item:hover { background: #f8fafc; }
[data-theme="light"] .fp-fab-label { background: #1e293b; color: #f1f5f9; }

/* -- Checklist -- */
[data-theme="light"] .fp-check-item { border-bottom: 1px solid rgba(0,0,0,0.05); }
[data-theme="light"] .fp-check-box { border-color: rgba(0,0,0,0.18); }
[data-theme="light"] .fp-check-box.checked { border-color: #22c55e; background: rgba(34,197,94,0.1); }

/* -- Onboarding -- */
[data-theme="light"] .fp-onboarding { background: rgba(255,255,255,0.6); }
[data-theme="light"] .fp-onboarding-card { background: #ffffff; border-color: rgba(0,0,0,0.09); box-shadow: 0 20px 60px rgba(0,0,0,0.15); color: #0f172a; }

/* ── Onboarding modal bêta (fp-ob-*) ─────────────────────────────────────── */
.fp-ob-backdrop {
  position: absolute; inset: 0;
  background: transparent; /* overlay handled by .fp-onboarding parent */
  cursor: default;
}
.fp-ob-dialog {
  position: relative; z-index: 1;
  background: var(--fp-card-bg, #0d1525);
  border: 1px solid rgba(37,99,235,0.28);
  border-radius: var(--fp-radius-xl, 16px);
  box-shadow: 0 24px 72px rgba(0,0,0,0.55);
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  animation: fp-scale-in 0.22s var(--fp-ease-spring, cubic-bezier(0.34,1.56,0.64,1));
}
.fp-ob-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 0;
}
.fp-ob-welcome {
  font-size: 12px; font-weight: 700; color: var(--fp-accent, #2563EB);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.fp-ob-progress {
  font-size: 12px; color: var(--fp-text-faint, #64748b); font-weight: 600;
}
.fp-ob-media {
  padding: 16px 24px 0;
}
.fp-ob-video-placeholder {
  width: 100%; aspect-ratio: 16/9;
  border-radius: 10px;
  background: var(--fp-inner-card, rgba(255,255,255,0.04));
  border: 1px dashed var(--fp-border, rgba(255,255,255,0.08));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: var(--fp-text-faint, #64748b);
}
.fp-ob-video-icon { opacity: 0.45; }
.fp-ob-video-label { font-size: 13px; font-weight: 500; }
.fp-ob-body { padding: 20px 24px 24px; }
.fp-ob-title {
  font-family: var(--fp-font-head, inherit);
  font-size: 20px; font-weight: 800; color: var(--fp-text);
  margin-bottom: 8px; line-height: 1.3;
}
.fp-ob-desc {
  font-size: 13px; color: var(--fp-text-muted); line-height: 1.65;
  margin-bottom: 20px;
}
.fp-ob-dots {
  display: flex; gap: 8px; justify-content: flex-start; margin-bottom: 24px;
}
.fp-ob-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: none; cursor: pointer;
  padding: 0; transition: background 0.2s, transform 0.15s;
}
.fp-ob-dot.active { background: var(--fp-accent, #2563EB); transform: scale(1.3); }
.fp-ob-dot:hover:not(.active) { background: rgba(255,255,255,0.28); }
.fp-ob-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.fp-ob-skip { color: var(--fp-text-faint) !important; font-size: 12px !important; }
.fp-ob-next { min-width: 160px; }

/* Light mode overrides */
[data-theme="light"] .fp-ob-dialog {
  background: #ffffff;
  border-color: rgba(37,99,235,0.18);
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}
[data-theme="light"] .fp-ob-dot { background: rgba(0,0,0,0.12); }
[data-theme="light"] .fp-ob-dot:hover:not(.active) { background: rgba(0,0,0,0.22); }
[data-theme="light"] .fp-ob-video-placeholder {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.12);
}

/* Mobile */
@media (max-width: 600px) {
  .fp-ob-dialog { border-radius: 14px 14px 0 0; align-self: flex-end; width: 100vw; max-width: 100vw; }
  .fp-onboarding { align-items: flex-end; }
  .fp-ob-header { padding: 16px 16px 0; }
  .fp-ob-media { padding: 12px 16px 0; }
  .fp-ob-body { padding: 16px; }
  .fp-ob-title { font-size: 17px; }
  .fp-ob-actions { flex-wrap: wrap; gap: 8px; }
  .fp-ob-next { min-width: auto; flex: 1; }
}

/* -- Context menu -- */
[data-theme="light"] .fp-ctx-menu { background: #ffffff; border-color: rgba(0,0,0,0.1); box-shadow: 0 8px 28px rgba(0,0,0,0.12); }
[data-theme="light"] .fp-ctx-item { color: #334155; }
[data-theme="light"] .fp-ctx-item:hover { background: #f1f5f9; color: #0f172a; }
[data-theme="light"] .fp-ctx-separator { border-top-color: rgba(0,0,0,0.07); }

/* -- Select options (dark dropdown) -- */
[data-theme="light"] .fp-select option { background: #ffffff; color: #0f172a; }
[data-theme="light"] select option { background: #ffffff; color: #0f172a; }

/* -- Inline dark sub-containers (rgba(0,0,0,0.2) areas) -- */
[data-theme="light"] .fp-sites-scroll { background: rgba(0,0,0,0.04) !important; }

/* -- Activity item hover — visible in light -- */
[data-theme="light"] .fp-activity-item { border-bottom: 1px solid rgba(0,0,0,0.07); }
[data-theme="light"] .fp-activity-item:last-child { border-bottom: none; }
[data-theme="light"] .fp-activity-item:hover { background: rgba(0,0,0,0.025); }

/* -- Competitor row — explicit white bg -- */
[data-theme="light"] .fp-competitor-row { background: #ffffff; border-color: rgba(0,0,0,0.07); box-shadow: none; }
[data-theme="light"] .fp-competitor-row:hover { background: rgba(37,99,235,0.025); border-color: rgba(37,99,235,0.18); }


/* ═══════════════════════════════════════════════════════════
   NAV ICON ANIMATIONS — Resend-style
   ═══════════════════════════════════════════════════════════ */
.fp-nav-icon {
  transition: transform 0.18s var(--fp-ease-spring), color 0.15s var(--fp-ease) !important;
}
.fp-nav-item:hover .fp-nav-icon { transform: scale(1.18) translateX(2px); }
.fp-nav-item.active .fp-nav-icon { transform: scale(1.1); }
.fp-nav-ai .fp-nav-icon { transition: transform 0.18s var(--fp-ease-spring) !important; }
.fp-nav-ai:hover .fp-nav-icon { transform: scale(1.18) rotate(-8deg); }

/* ═══════════════════════════════════════════════════════════
   NOTIFICATION & MSG BADGE — Blue + proper position
   ═══════════════════════════════════════════════════════════ */
.fp-notif-badge {
  background: var(--fp-accent) !important;
  top: -3px !important;
  right: -3px !important;
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 2px var(--fp-bg);
}
#fp-msg-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--fp-accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--fp-bg);
  box-shadow: 0 2px 6px rgba(37,99,235,0.4);
}
#fp-msg-badge[hidden] { display: none !important; }
#fp-msg-wrap { position: relative; }

/* ═══════════════════════════════════════════════════════════
   MESSAGES PANEL — Channels + File Upload
   ═══════════════════════════════════════════════════════════ */
.fp-msg-dropdown[hidden] { display: none !important; }
.fp-msg-dropdown:not([hidden]) {
  min-height: 380px;
  display: flex;
  flex-direction: column;
}
.fp-msg-header { padding: 12px 16px; border-bottom: 1px solid var(--fp-border); display: flex; align-items: center; justify-content: space-between; }
.fp-msg-channels {
  display: flex;
  gap: 2px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--fp-border);
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(255,255,255,0.02);
}
.fp-msg-channels::-webkit-scrollbar { display: none; }
.fp-msg-channel-btn {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fp-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: all var(--fp-t-fast);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}
.fp-msg-channel-btn:hover { background: var(--fp-bg-card-hover); color: var(--fp-text); }
.fp-msg-channel-btn.active { background: var(--fp-accent-subtle); color: var(--fp-accent); }
.fp-msg-list { flex: 1; max-height: 220px; overflow-y: auto; padding: 4px 0; }
.fp-msg-item { padding: 7px 14px; gap: 9px; }
.fp-msg-text { white-space: normal; line-height: 1.4; overflow: visible; padding: 7px 11px; }
.fp-msg-compose {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--fp-border);
  background: rgba(255,255,255,0.02);
}
.fp-msg-upload-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: none;
  border: 1px solid var(--fp-border);
  color: var(--fp-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--fp-t-fast);
}
.fp-msg-upload-btn:hover { background: var(--fp-bg-card-hover); border-color: var(--fp-accent-border); color: var(--fp-accent); }
.fp-msg-attachment {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: var(--fp-bg-card);
  border-top: 1px solid var(--fp-border);
  font-size: 11px;
  color: var(--fp-text-muted);
}
.fp-msg-attachment-remove { background: none; border: none; cursor: pointer; color: var(--fp-text-faint); padding: 0; display: flex; margin-left: auto; }

/* ═══════════════════════════════════════════════════════════
   GOOGLE MAPS — Local SEO
   ═══════════════════════════════════════════════════════════ */
#fp-gmap {
  width: 100%;
  height: 400px;
  border-radius: var(--fp-radius-md);
  overflow: hidden;
  border: 1px solid var(--fp-border);
}
.fp-map-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.fp-map-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--fp-text-muted);
}
.fp-map-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  flex-shrink: 0;
}
.fp-map-competitor-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--fp-border);
  font-size: 12px;
}
.fp-map-competitor-row:last-child { border-bottom: none; }
.fp-map-comp-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.4); }
[data-theme="light"] #fp-gmap { border-color: rgba(0,0,0,0.08); box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
[data-theme="light"] .fp-map-dot { border-color: rgba(0,0,0,0.2); }

/* ═══════════════════════════════════════════════════════════
   ADD-ONS — Premium Cards
   ═══════════════════════════════════════════════════════════ */
.fp-addon-card {
  background: var(--fp-bg-card);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  padding: 16px;
  transition: all var(--fp-t-med);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fp-addon-card:hover { border-color: rgba(37,99,235,0.2); box-shadow: 0 4px 16px rgba(37,99,235,0.07); }
.fp-addon-card.active { border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.03); }
.fp-addon-header { display: flex; align-items: flex-start; gap: 10px; }
.fp-addon-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fp-addon-name { font-size: 13px; font-weight: 700; color: var(--fp-text); margin-bottom: 2px; }
.fp-addon-desc { font-size: 11px; color: var(--fp-text-muted); line-height: 1.5; }
.fp-addon-impact { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; display: inline-flex; align-items: center; gap: 3px; }
.fp-addon-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; border-top: 1px solid var(--fp-border); }
.fp-addon-price { font-size: 13px; font-weight: 700; font-family: var(--fp-font-mono); color: var(--fp-text); }
[data-theme="light"] .fp-addon-card { background: #ffffff; border-color: rgba(0,0,0,0.08); box-shadow: none; }
[data-theme="light"] .fp-addon-card:hover { box-shadow: 0 4px 16px rgba(37,99,235,0.08); }
[data-theme="light"] .fp-addon-footer { border-top-color: rgba(0,0,0,0.06); }

/* ═══════════════════════════════════════════════════════════
   PLAN COMPARISON TABLE
   ═══════════════════════════════════════════════════════════ */
.fp-plan-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 20px; }
.fp-plan-card {
  background: var(--fp-bg-card);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  padding: 20px;
  position: relative;
  transition: all var(--fp-t-med);
}
.fp-plan-card.current { border-color: rgba(37,99,235,0.4); background: rgba(37,99,235,0.05); }
.fp-plan-card.popular { border-color: rgba(139,92,246,0.35); }
.fp-plan-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.fp-plan-name { font-size: 15px; font-weight: 800; font-family: var(--fp-font-head); color: var(--fp-text); }
.fp-plan-price { font-size: 26px; font-weight: 800; color: var(--fp-text); font-family: var(--fp-font-head); margin: 8px 0 12px; line-height: 1; }
.fp-plan-price span { font-size: 13px; font-weight: 500; color: var(--fp-text-muted); }
.fp-plan-feature { font-size: 12px; color: var(--fp-text-muted); padding: 4px 0; display: flex; align-items: center; gap: 6px; }
.fp-plan-feature.included { color: var(--fp-text-soft); }
.fp-plan-feature.locked { color: var(--fp-text-faint); }
[data-theme="light"] .fp-plan-card { background: #ffffff; border-color: rgba(0,0,0,0.08); box-shadow: none; }
[data-theme="light"] .fp-plan-card.current { background: rgba(37,99,235,0.04); }

/* -- Locked feature banners -- */
.fp-locked-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: linear-gradient(90deg, rgba(139,92,246,0.07), rgba(37,99,235,0.07));
  border: 1px solid rgba(139,92,246,0.18);
  border-radius: var(--fp-radius-md);
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--fp-text-muted);
}
.fp-locked-banner strong { color: var(--fp-text); }
[data-theme="light"] .fp-locked-banner { background: linear-gradient(90deg, rgba(139,92,246,0.04), rgba(37,99,235,0.04)); border-color: rgba(139,92,246,0.13); }

/* ═══════════════════════════════════════════════════════════
   MISSION STEPS & LIBRARY
   ═══════════════════════════════════════════════════════════ */
.fp-mission-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--fp-border);
  transition: background var(--fp-t-fast);
}
.fp-mission-step:last-child { border-bottom: none; }
.fp-mission-step:hover { background: var(--fp-bg-card-hover); }
.fp-mission-step-check {
  width: 17px; height: 17px;
  accent-color: var(--fp-accent);
  cursor: pointer;
  margin-top: 1px;
  flex-shrink: 0;
  border-radius: 5px;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--fp-border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  position: relative;
}
.fp-mission-step-check:checked {
  background: var(--fp-accent);
  border-color: var(--fp-accent);
}
.fp-mission-step-check:checked::after {
  content: '';
  position: absolute;
  width: 9px; height: 9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.fp-mission-step-text {
  font-size: 13px;
  color: var(--fp-text-soft);
  line-height: 1.45;
  flex: 1;
}
.fp-mission-step-text.done {
  text-decoration: line-through;
  color: var(--fp-text-faint);
}
.fp-mission-step-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--fp-accent-subtle);
  color: var(--fp-accent);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.fp-mission-progress {
  height: 4px;
  background: var(--fp-border);
  border-radius: 4px;
  margin: 0 0 14px;
  overflow: hidden;
}
.fp-mission-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--fp-accent), #22c55e);
  border-radius: 4px;
  transition: width 0.3s ease;
}
.fp-lib-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 10px;
  align-items: stretch;
}
.fp-lib-card {
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  padding: 14px 16px;
  cursor: pointer;
  transition: all var(--fp-t-fast);
  background: var(--fp-bg-card);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.fp-lib-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fp-accent);
  opacity: 0;
  transition: opacity var(--fp-t-fast);
}
.fp-lib-card:hover { border-color: var(--fp-accent-border); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(37,99,235,0.12); }
.fp-lib-card:hover::before { opacity: 0.025; }
.fp-lib-card-title { font-size: 13px; font-weight: 600; color: var(--fp-text); margin-bottom: 6px; line-height: 1.35; }
.fp-lib-card-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fp-lib-impact { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px; }
.fp-lib-impact.high { background: rgba(239,68,68,0.1); color: #ef4444; }
.fp-lib-impact.medium { background: rgba(245,158,11,0.1); color: #f59e0b; }
.fp-lib-impact.low { background: rgba(148,163,184,0.1); color: #94a3b8; }
.fp-lib-effort { font-size: 11px; color: var(--fp-text-faint); }
.fp-lib-add-btn {
  position: absolute;
  top: 12px; right: 12px;
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 1px solid var(--fp-border);
  background: var(--fp-bg-input);
  color: var(--fp-text-muted);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: all var(--fp-t-fast);
}
.fp-lib-card:hover .fp-lib-add-btn { opacity: 1; background: var(--fp-accent); border-color: var(--fp-accent); color: #fff; }
.fp-lib-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 10px;
}
.fp-lib-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fp-text-muted);
}
.fp-lib-section-count {
  font-size: 11px;
  color: var(--fp-text-faint);
}
.fp-mission-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.fp-mission-detail-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--fp-accent-subtle);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fp-mission-detail-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fp-text);
  line-height: 1.35;
  margin-bottom: 6px;
}
/* Micro interactions */
.fp-card { transition: box-shadow var(--fp-t-fast); }
.fp-kpi-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.fp-btn { transition: all var(--fp-t-fast) !important; }
.fp-btn:active { transform: scale(0.97); }
.fp-nav-item { transition: all var(--fp-t-fast); }
select.fp-select { cursor: pointer; }
/* Light mode overrides */
[data-theme="light"] .fp-lib-card { background: #fff; }
[data-theme="light"] .fp-mission-step:hover { background: rgba(0,0,0,0.02); }

/* ═══════════════════════════════════════════════════════════
   APPLE CALENDAR STYLE
   ═══════════════════════════════════════════════════════════ */
.fp-apple-cal {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  background: var(--fp-bg-card);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-xl);
  overflow: hidden;
}
.fp-apple-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--fp-border);
}
.fp-apple-cal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--fp-text);
  font-family: var(--fp-font-head);
  text-transform: capitalize;
}
.fp-apple-cal-nav { display: flex; gap: 4px; align-items: center; }
.fp-apple-cal-nav-btn {
  min-width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--fp-border);
  background: var(--fp-bg-input);
  color: var(--fp-text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--fp-t-fast);
  padding: 0 8px;
  font-size: 11px; font-weight: 600;
  font-family: var(--fp-font-body);
}
.fp-apple-cal-nav-btn:hover { background: var(--fp-accent); color: #fff; border-color: var(--fp-accent); }
.fp-apple-cal-days-header {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--fp-border);
  background: var(--fp-bg-deep);
}
.fp-apple-cal-day-name {
  text-align: center;
  font-size: 11px; font-weight: 600;
  color: var(--fp-text-faint);
  padding: 7px 0;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.fp-apple-cal-day-name.weekend { color: rgba(239,68,68,0.5); }
.fp-apple-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.fp-apple-cal-cell {
  min-height: 80px;
  padding: 7px 4px;
  border-right: 1px solid var(--fp-border);
  border-bottom: 1px solid var(--fp-border);
  transition: background var(--fp-t-fast);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.fp-apple-cal-cell:nth-child(7n) { border-right: none; }
.fp-apple-cal-cell:hover { background: var(--fp-bg-card-hover); }
.fp-apple-cal-cell.other-month { background: var(--fp-bg-deep); opacity: 0.65; }
.fp-apple-cal-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 13px; font-weight: 500;
  color: var(--fp-text-muted);
  margin-bottom: 3px;
  transition: all var(--fp-t-fast);
}
.fp-apple-cal-cell.today .fp-apple-cal-num {
  background: #ef4444; color: #fff !important; font-weight: 700;
}
.fp-apple-cal-cell.weekend .fp-apple-cal-num { color: rgba(239,68,68,0.55); }
.fp-apple-cal-cell.today.weekend .fp-apple-cal-num { color: #fff !important; }
.fp-apple-cal-cell.fp-cal-selected {
  background: rgba(139,92,246,0.1);
  outline: 2px solid rgba(139,92,246,0.45);
  outline-offset: -2px;
}
.fp-apple-cal-cell.fp-cal-selected .fp-apple-cal-num {
  background: rgba(139,92,246,0.85);
  color: #fff;
  font-weight: 700;
}
.fp-daily-agenda {
  animation: fp-agenda-slide-in 0.18s ease;
}
@keyframes fp-agenda-slide-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.fp-apple-cal-events { display: flex; flex-direction: column; gap: 2px; }
.fp-apple-cal-event {
  font-size: 10px; font-weight: 500;
  padding: 1px 5px; border-radius: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.6;
}
.fp-apple-cal-event.todo { background: rgba(37,99,235,0.18); color: #93c5fd; }
.fp-apple-cal-event.inprogress { background: rgba(245,158,11,0.18); color: #fbbf24; }
.fp-apple-cal-event.done { background: rgba(34,197,94,0.14); color: #4ade80; }
.fp-apple-cal-event-more { font-size: 10px; color: var(--fp-text-faint); padding: 1px 4px; }

/* ── INTERACTIVE CALENDAR — RDV events ── */
.fp-cal-rdv {
  background: rgba(139,92,246,0.18) !important;
  color: #c4b5fd !important;
  cursor: grab !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding-right: 2px !important;
  user-select: none;
  position: relative;
}
.fp-cal-rdv:active { cursor: grabbing !important; }
.fp-cal-rdv-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-cal-rdv-time { font-weight: 600; opacity: 0.85; flex-shrink: 0; }
.fp-cal-event-del {
  flex-shrink: 0;
  width: 14px; height: 14px;
  border: none; background: transparent;
  cursor: pointer; color: inherit; opacity: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; padding: 0;
  border-radius: 3px;
  transition: opacity var(--fp-t-fast), background var(--fp-t-fast);
  font-family: var(--fp-font-body);
}
.fp-cal-rdv:hover .fp-cal-event-del { opacity: 0.8; }
.fp-cal-event-del:hover { opacity: 1 !important; background: rgba(239,68,68,0.25); color: #f87171; }
.fp-cal-dragging { opacity: 0.4 !important; }
.fp-cal-drag-over {
  background: rgba(139,92,246,0.08) !important;
  outline: 2px dashed rgba(139,92,246,0.4);
  outline-offset: -2px;
}
.fp-cal-add-btn {
  position: absolute;
  bottom: 4px; right: 4px;
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1px solid var(--fp-border);
  background: var(--fp-bg-input);
  color: var(--fp-text-muted);
  font-size: 14px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: all var(--fp-t-fast);
  padding: 0;
  font-family: var(--fp-font-body);
  z-index: 1;
}
.fp-apple-cal-cell:not(.other-month):hover .fp-cal-add-btn { opacity: 1; pointer-events: auto; }
.fp-cal-add-btn:hover { background: var(--fp-accent); border-color: var(--fp-accent); color: #fff; }
.fp-cal-event-del { z-index: 2; }

[data-theme="light"] .fp-cal-rdv { background: rgba(139,92,246,0.1) !important; color: #7c3aed !important; }
[data-theme="light"] .fp-cal-drag-over { background: rgba(139,92,246,0.05) !important; }

.fp-apple-cal-footer {
  padding: 10px 18px;
  border-top: 1px solid var(--fp-border);
  display: flex; gap: 16px; align-items: center;
  font-size: 11px; color: var(--fp-text-faint);
}
.fp-apple-cal-legend { display: flex; align-items: center; gap: 5px; }
.fp-apple-cal-dot { width: 8px; height: 8px; border-radius: 50%; }

/* ── LIBRARY GRID RESPONSIVE ── */
@media (max-width: 1100px) { .fp-lib-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .fp-lib-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — DEPTH & BORDERS
   ═══════════════════════════════════════════════════════════ */
[data-theme="light"] .fp-card {
  box-shadow: none;
}
[data-theme="light"] .fp-kpi-card {
  box-shadow: none;
}
[data-theme="light"] .fp-stat-card {
  box-shadow: none;
}
[data-theme="light"] .fp-table-wrap {
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  border-radius: 10px;
  overflow-x: auto;
  border: 1px solid rgba(0,0,0,0.07);
}
[data-theme="light"] .fp-data-table th {
  background: rgba(0,0,0,0.025);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
[data-theme="light"] .fp-data-table td { border-bottom-color: rgba(0,0,0,0.05); }
[data-theme="light"] .fp-data-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.025); }
[data-theme="light"] .fp-data-table tbody tr:hover { background: rgba(37,99,235,0.06) !important; }
[data-theme="light"] .fp-section-header {
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding-bottom: 12px; margin-bottom: 20px;
}
[data-theme="light"] .fp-filter-bar {
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  padding: 6px;
}
[data-theme="light"] .fp-mission-row { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .fp-mission-row:hover { background: rgba(37,99,235,0.02); }
[data-theme="light"] .fp-kanban-col { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.07); }
[data-theme="light"] .fp-lib-card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.07);
  background: #fff;
}
[data-theme="light"] .fp-apple-cal { box-shadow: 0 2px 14px rgba(0,0,0,0.06); }
[data-theme="light"] .fp-apple-cal-event.todo { background: rgba(37,99,235,0.1); color: #1d4ed8; }
[data-theme="light"] .fp-apple-cal-event.inprogress { background: rgba(245,158,11,0.1); color: #d97706; }
[data-theme="light"] .fp-apple-cal-event.done { background: rgba(34,197,94,0.1); color: #15803d; }
[data-theme="light"] .fp-topbar { box-shadow: none; }
[data-theme="light"] .fp-addon-card { box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
[data-theme="light"] .fp-opp-card {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.07);
}
[data-theme="light"] .fp-kanban-card { box-shadow: 0 1px 4px rgba(0,0,0,0.07); background: #fff; }
[data-theme="light"] .fp-quick-add { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .fp-monitor-item { border-color: rgba(0,0,0,0.07); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
[data-theme="light"] .fp-alert-item { border-color: rgba(0,0,0,0.07); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }

/* ── HERO COMMAND CENTER (light mode) ── */
[data-theme="light"] .fp-hero-cmd {
  background: linear-gradient(135deg, #eef2ff 0%, #dde8ff 100%) !important;
  border-color: rgba(37,99,235,0.15) !important;
}
[data-theme="light"] .fp-hero-cmd::before,
[data-theme="light"] .fp-hero-cmd > div[style*="radial-gradient"] { opacity: 0.4; }

/* ── GAUGE CARDS (light mode) ── */
[data-theme="light"] .fp-gauge-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: none !important;
}
[data-theme="light"] .fp-gauge-card:hover {
  border-color: rgba(37,99,235,0.22) !important;
  box-shadow: none !important;
}

/* ── HOVER TOOLBAR – eye/download/... popup (light mode) ── */
[data-theme="light"] .fp-hover-toolbar {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06);
}
[data-theme="light"] .fp-hover-toolbar-btn { color: #475569; }
[data-theme="light"] .fp-hover-toolbar-btn:hover { background: rgba(37,99,235,0.08); color: #1d4ed8; }

/* ── VIEW TOGGLE (light mode) ── */
[data-theme="light"] .fp-view-toggle { background: #f1f5f9; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .fp-view-toggle-btn { color: #64748b; }
[data-theme="light"] .fp-view-toggle-btn:hover { color: #0f172a; background: rgba(0,0,0,0.04); }
[data-theme="light"] .fp-view-toggle-btn.active { background: #2563EB; color: #ffffff; border-radius: 6px; }

/* ── SELECT DROPDOWNS (light mode) ── */
[data-theme="light"] .fp-select {
  background: #f8fafc;
  border-color: rgba(0,0,0,0.09);
  color: #0f172a;
}
[data-theme="light"] .fp-select:focus { border-color: #2563EB; background: #ffffff; }
[data-theme="light"] select { background: #f8fafc; color: #0f172a; border-color: rgba(0,0,0,0.1); }

/* ── STAT CARD (light mode) ── */
[data-theme="light"] .fp-stat-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
[data-theme="light"] .fp-stat-card-label { color: #64748b; }
[data-theme="light"] .fp-stat-card-value { color: #0f172a; }
[data-theme="light"] .fp-stat-card-delta { color: #475569; }

/* ── SCORE BAR TRACK (light mode) ── */
[data-theme="light"] .fp-score-bar-track { background: rgba(0,0,0,0.07); }

/* ── TABLE (light mode) shared ── */
[data-theme="light"] .fp-table td { border-bottom-color: rgba(0,0,0,0.05); }

/* ── INLINE DARK-BG CARDS in light mode: generic inset sections ── */
[data-theme="light"] .fp-card > div[style*="rgba(255,255,255,0.03)"],
[data-theme="light"] .fp-card > div[style*="rgba(255,255,255,0.04)"],
[data-theme="light"] .fp-card > div[style*="rgba(255,255,255,0.02)"] {
  background: rgba(0,0,0,0.02) !important;
  border-color: rgba(0,0,0,0.06) !important;
}

/* ── AI CHIP (light mode) ── */
[data-theme="light"] .fp-ai-chip {
  background: rgba(37,99,235,0.07);
  border-color: rgba(37,99,235,0.18);
  color: #1d4ed8;
}
[data-theme="light"] .fp-ai-chip:hover { background: rgba(37,99,235,0.12); }

/* ── LIVE COMMAND CENTER inline card overrides (light) ── */
[data-theme="light"] .fp-hero-cmd .fp-gauge-card {
  background: #ffffff !important;
  border-color: rgba(37,99,235,0.1) !important;
}

/* ── TOPBAR ICON BTN — force light in light mode ── */
[data-theme="light"] .fp-icon-btn {
  background: #f8fafc !important;
  border-color: rgba(0,0,0,0.09) !important;
  color: #475569 !important;
}
[data-theme="light"] .fp-icon-btn:hover {
  background: #f1f5f9 !important;
  border-color: rgba(37,99,235,0.22) !important;
  color: #2563EB !important;
}

/* ── SWITCH / TOGGLE (light mode) ── */
[data-theme="light"] input[type="checkbox"].fp-toggle:not(:checked) { background: rgba(0,0,0,0.12); }

/* ── INLINE SECTIONS with dark-rgba backgrounds that need light inversion ── */
[data-theme="light"] div[style*="background:rgba(255,255,255,0.04)"] { background: rgba(0,0,0,0.025) !important; }
[data-theme="light"] div[style*="background:rgba(255,255,255,0.03)"] { background: rgba(0,0,0,0.02) !important; }
[data-theme="light"] div[style*="border:1px solid rgba(255,255,255,0.07)"] { border-color: rgba(0,0,0,0.07) !important; }
[data-theme="light"] div[style*="border:1px solid rgba(255,255,255,0.08)"] { border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] div[style*="border:1px solid rgba(255,255,255,0.06)"] { border-color: rgba(0,0,0,0.06) !important; }

/* ═══════════════════════════════════════════════════════════
   AI PAGE — CONSTRAINED WIDTH
   ═══════════════════════════════════════════════════════════ */
.fp-ai-page-wrap {
  max-width: 700px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════
   UPGRADE BUTTON & BANNER
   ═══════════════════════════════════════════════════════════ */
.fp-upgrade-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 6px;
  font-size: 11px; font-weight: 700;
  background: linear-gradient(135deg, #2563EB 0%, #1d4ed8 100%);
  color: #fff; border: none; cursor: pointer;
  transition: all var(--fp-t-fast);
  font-family: var(--fp-font-body);
  white-space: nowrap;
}
.fp-upgrade-btn:hover { transform: scale(1.04); box-shadow: 0 4px 14px rgba(37,99,235,0.4); }
.fp-upgrade-btn.ultra {
  background: linear-gradient(135deg, #2563EB 0%, #1e40af 100%);
}
.fp-upgrade-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--fp-radius-lg);
  background: linear-gradient(135deg, rgba(37,99,235,0.07), rgba(29,78,216,0.04));
  border: 1px solid rgba(37,99,235,0.2);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.fp-upgrade-banner-text { font-size: 12px; color: var(--fp-text-soft); }
.fp-upgrade-banner-text strong { color: var(--fp-accent-light); }
.fp-upgrade-banner.ultra {
  background: linear-gradient(135deg, rgba(37,99,235,0.07), rgba(29,78,216,0.04));
  border-color: rgba(37,99,235,0.2);
}
.fp-upgrade-banner.ultra .fp-upgrade-banner-text strong { color: var(--fp-accent-light); }

/* ═══════════════════════════════════════════════════════════
   LOCAL SEO OPP CARD — fix overflow
   ═══════════════════════════════════════════════════════════ */
.fp-opp-card {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  overflow: visible;
}
.fp-opp-body { flex: 1; min-width: 0; }
.fp-opp-card > .fp-btn { flex-shrink: 0; }

/* ── CHART TOOLTIPS ── */
.fp-chart-tooltip {
  position: fixed;
  z-index: 9500;
  pointer-events: none;
  background: #0d1526;
  border: 1px solid rgba(37,99,235,0.40);
  border-radius: var(--fp-radius-md);
  padding: 8px 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(37,99,235,0.12);
  font-family: var(--fp-font-body);
  color: var(--fp-text);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 100ms ease, transform 100ms ease;
  min-width: 100px;
}
.fp-chart-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}
[data-theme="light"] .fp-chart-tooltip {
  background: #fff;
  border-color: rgba(37,99,235,0.30);
  box-shadow: 0 8px 28px rgba(0,0,0,0.18), 0 0 0 1px rgba(37,99,235,0.10);
}
.fp-chart-tooltip-label {
  font-size: 10px;
  color: var(--fp-text-muted);
  margin-bottom: 3px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fp-chart-tooltip-value {
  font-family: var(--fp-font-mono);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
.fp-chart-tooltip-value span {
  font-size: 10px;
  font-weight: 400;
  color: var(--fp-text-muted);
}
.fp-chart-tooltip-date {
  font-size: 10px;
  color: var(--fp-text-muted);
  margin-top: 3px;
}

/* Hit areas */
.fp-spark-hit {
  cursor: crosshair;
  transition: fill 80ms ease;
}
.fp-spark-hit:hover { fill: rgba(255,255,255,0.15); }
[data-theme="light"] .fp-spark-hit:hover { fill: rgba(0,0,0,0.08); }
.fp-trend-hit {
  cursor: crosshair;
  transition: fill 80ms ease;
}
.fp-trend-hit:hover { fill: rgba(255,255,255,0.10); }
[data-theme="light"] .fp-trend-hit:hover { fill: rgba(0,0,0,0.06); }

/* Crosshair line */
.fp-xhair-line { pointer-events: none; }
[data-theme="light"] .fp-xhair-line { stroke: rgba(0,0,0,0.18); }

/* Monitor latency sparkline strip */
.fp-monitor-uptime30 {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--fp-border-subtle, rgba(255,255,255,0.05));
}
.fp-monitor-uptime30 svg { width: 100%; height: 22px; display: block; }

.fp-monitor-latency-spark {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--fp-border-subtle, rgba(255,255,255,0.05));
}
.fp-monitor-latency-spark .fp-sparkline {
  flex: 1;
}

/* Calendar RDV pill — pointer cursor + subtle click effect */
.fp-cal-rdv {
  cursor: pointer;
}
.fp-cal-rdv:active {
  opacity: 0.75;
  transform: scale(0.97);
}

/* ── AUDIT SCHEDULE TOGGLE ── */
.fp-audit-sched-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fp-toggle-wrap {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
  /* Containing block for the visually-hidden absolute checkbox below —
     without this the checkbox escapes scroll containers (e.g. the Audits
     table wrap) and stretches the page width on mobile (iOS zoom-out). */
  position: relative;
}
.fp-toggle-wrap input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.fp-toggle-track {
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.12);
  position: relative;
  transition: background var(--fp-t-fast), border-color var(--fp-t-fast);
}
.fp-toggle-wrap input:checked ~ .fp-toggle-track {
  background: var(--fp-accent);
  border-color: var(--fp-accent);
}
.fp-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: transform var(--fp-t-fast), background var(--fp-t-fast);
}
.fp-toggle-wrap input:checked ~ .fp-toggle-track .fp-toggle-thumb {
  transform: translateX(14px);
  background: #fff;
}
[data-theme="light"] .fp-toggle-track {
  background: rgba(0,0,0,0.1);
  border-color: rgba(0,0,0,0.15);
}

/* ── BULK ACTION BAR ── */
.fp-bulk-bar {
  position: fixed;
  bottom: 0;
  left: var(--fp-sidebar-w);
  right: 0;
  z-index: 400;
  background: rgba(8,14,32,0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(37,99,235,0.35);
  padding: 12px 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
}
.fp-bulk-bar.fp-bulk-visible { transform: translateY(0); }
.fp-bulk-bar:not(.fp-bulk-visible) { box-shadow: none; }
@media (max-width: 768px) {
  /* Sidebar is off-canvas on mobile: anchoring the bar at left:248px pushes its
     min-content width past the viewport and makes iOS shrink the whole page
     (Audits appeared zoomed-out at ~60%). Pin to the full viewport instead. */
  .fp-bulk-bar {
    left: 0 !important;
    right: 0 !important;
    max-width: 100vw;
    flex-wrap: wrap;
    padding: 10px 14px;
    box-sizing: border-box;
  }
}
[data-theme="light"] .fp-bulk-bar { background: rgba(248,250,255,0.97); border-top-color: rgba(37,99,235,0.25); }

.fp-bulk-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--fp-accent);
  padding: 4px 12px;
  background: rgba(37,99,235,0.12);
  border: 1px solid rgba(37,99,235,0.3);
  border-radius: 999px;
  white-space: nowrap;
}
.fp-bulk-sep {
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.fp-bulk-progress-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fp-bulk-progress {
  width: 100px;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.fp-bulk-progress-fill {
  height: 100%;
  background: var(--fp-accent);
  border-radius: 999px;
  transition: width 0.25s ease;
}

/* Checkbox column in audit table */
.fp-cb-col { width: 36px; padding: 12px 4px 12px 16px !important; }
.fp-audit-row-cb {
  width: 15px;
  height: 15px;
  accent-color: #2563EB;
  cursor: pointer;
  opacity: 0;
  transition: opacity 100ms ease;
  display: block;
}
tr:hover .fp-audit-row-cb,
tr.fp-row-sel .fp-audit-row-cb,
.fp-audit-row-cb:checked { opacity: 1; }
tr.fp-row-sel { background: rgba(37,99,235,0.07) !important; }
tr.fp-row-sel:hover { background: rgba(37,99,235,0.11) !important; }

/* Checkbox on monitor cards */
.fp-monitor-cb-wrap {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  opacity: 0;
  transition: opacity 100ms ease;
  line-height: 0;
}
.fp-monitor-card:hover .fp-monitor-cb-wrap,
.fp-monitor-card.fp-card-sel .fp-monitor-cb-wrap { opacity: 1; }
.fp-monitor-cb {
  width: 16px;
  height: 16px;
  accent-color: #2563EB;
  cursor: pointer;
}
.fp-monitor-card.fp-card-sel {
  border-color: rgba(37,99,235,0.4) !important;
  background: rgba(37,99,235,0.06) !important;
}

/* ── ACTIVITY FEED PANEL ── */
.fp-activity-overlay {
  position: fixed;
  inset: 0;
  z-index: 299;
  background: var(--fp-bg-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fp-t-med);
}
.fp-activity-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.fp-activity-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  max-width: 100vw;
  z-index: 300;
  display: flex;
  flex-direction: column;
  background: var(--fp-bg-sidebar);
  border-left: 1px solid var(--fp-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--fp-shadow-xl);
  transform: translateX(100%);
  transition: transform var(--fp-t-slow);
}
.fp-activity-panel.visible {
  transform: translateX(0);
}
.fp-activity-panel[hidden] { display: flex !important; box-shadow: none !important; }

.fp-activity-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--fp-border);
  flex-shrink: 0;
}
.fp-activity-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--fp-text);
  font-family: var(--fp-font-head);
}

.fp-activity-filters {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--fp-border);
  flex-wrap: wrap;
  flex-shrink: 0;
}
.fp-activity-filter {
  padding: 4px 11px;
  border-radius: var(--fp-radius-full);
  border: 1px solid var(--fp-border);
  background: transparent;
  color: var(--fp-text-muted);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--fp-font-body);
  cursor: pointer;
  transition: all var(--fp-t-fast);
}
.fp-activity-filter:hover { border-color: var(--fp-accent-border); color: var(--fp-text); }
.fp-activity-filter.active {
  background: var(--fp-accent);
  border-color: var(--fp-accent);
  color: #fff;
}

.fp-activity-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.fp-activity-loading {
  padding: 32px 20px;
  text-align: center;
  color: var(--fp-text-muted);
  font-size: 13px;
}

.fp-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--fp-border);
  transition: background var(--fp-t-fast);
}
.fp-activity-item:last-child { border-bottom: none; }
.fp-activity-item:hover { background: rgba(255,255,255,0.03); }
.fp-activity-item.fp-activity-new {
  background: rgba(37,99,235,0.06);
  animation: fp-activity-flash 1.5s ease forwards;
}
@keyframes fp-activity-flash {
  0%   { background: rgba(37,99,235,0.15); }
  100% { background: transparent; }
}

.fp-activity-avatar {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.fp-activity-body { flex: 1; min-width: 0; }
.fp-activity-panel-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fp-text);
  line-height: 1.4;
  word-break: break-word;
}
.fp-activity-panel-label strong { font-weight: 700; color: var(--fp-text); }
.fp-activity-details {
  margin-top: 7px;
  padding: 8px 10px;
  border-radius: 7px;
  background: var(--fp-bg-input);
  color: var(--fp-text-muted);
  font-size: 11px;
  line-height: 1.5;
  word-break: break-word;
}
.fp-activity-expand {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fp-accent);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.fp-activity-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.fp-activity-user-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--fp-text-muted);
}
.fp-activity-time-rel {
  font-size: 11px;
  color: var(--fp-text-faint);
}
.fp-activity-type-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.fp-activity-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--fp-text-muted);
  font-size: 13px;
}
.fp-activity-empty svg { margin: 0 auto 12px; display: block; opacity: 0.4; }

/* Badge animation when new events arrive */
.fp-notif-badge.fp-badge-pulse {
  animation: fp-badge-bounce 0.4s var(--fp-ease-spring);
}
@keyframes fp-badge-bounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ── PUSH NOTIFICATION TOGGLE BUTTON ── */
.fp-push-toggle {
  color: var(--fp-text-faint);
  border-color: var(--fp-border);
  transition: all var(--fp-t-fast);
}
.fp-push-toggle:hover {
  color: var(--fp-accent);
  border-color: var(--fp-accent-border);
}
.fp-push-toggle.fp-push-toggle-active {
  color: var(--fp-accent);
  border-color: var(--fp-accent-border);
  background: var(--fp-accent-subtle);
}
.fp-push-toggle.fp-push-toggle-active svg {
  stroke: var(--fp-accent);
}

/* ═══════════════════════════════════════════════════════════
   MOBILE FIXES v2 — overflow + sidebar-collapsed layout bug
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── FIX 1: sidebar-collapsed must NOT shrink the content column on mobile.
     The sidebar is position:fixed on mobile so it doesn't occupy grid space,
     but the 64px column declaration still eats into viewport width. ── */
  .fp-layout.sidebar-collapsed {
    grid-template-columns: 1fr !important;
  }

  /* ── FIX 2: collapsed sidebar on mobile = fully hidden, same as closed ── */
  .fp-sidebar.collapsed {
    left: calc(-1 * var(--fp-sidebar-w) - 24px) !important;
    width: var(--fp-sidebar-w) !important;
    padding: 20px 0 16px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* ── FIX 3: main wrap must never exceed viewport ── */
  .fp-main-wrap {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    min-width: 0;
  }

  /* ── FIX 4: page content box-sizing & padding ── */
  .fp-page {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 14px 100px;
    overflow-x: hidden;
  }

  /* ── FIX 5: topbar tighter on small screens ── */
  .fp-topbar {
    padding: 0 12px;
    gap: 8px;
  }

  /* ── FIX 6: search bar flexible, won't push other items off screen ── */
  .fp-search-trigger {
    width: auto;
    flex: 1;
    min-width: 0;
    max-width: 140px;
    padding: 6px 10px;
  }

  /* ── FIX 7: status badge smaller ── */
  .fp-topbar-status {
    font-size: 10px;
    padding: 5px 8px;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ── FIX 8: section header wraps on small screens ── */
  .fp-section-header {
    flex-wrap: wrap;
  }
  .fp-section-actions {
    flex-wrap: wrap;
    width: 100%;
  }

  /* ── FIX 9: cards must never overflow their container ── */
  .fp-card,
  .fp-card-sm,
  .fp-opp-card,
  .fp-alert-item,
  .fp-insight-card {
    min-width: 0;
    box-sizing: border-box;
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* ── FIX 9b: inline 4-column stat card grids → 2 columns ── */
  div:has(> .fp-card.fp-card-sm) {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── FIX 9b2: generic 4-col stat grids (zone maps etc.) → 2 columns ── */
  .fp-grid-4cols {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── FIX 9c: hide secondary columns in keyword table ── */
  .fp-col-hide-sm {
    display: none !important;
  }

  /* ── FIX 9d: sticky first column in scrollable tables ── */
  .fp-data-table th:first-child[style*="position:sticky"],
  .fp-data-table td:first-child[style*="position:sticky"] {
    box-shadow: 2px 0 4px rgba(0,0,0,0.08);
  }

  /* ── FIX 10: sub-nav items a bit smaller ── */
  .fp-sub-nav-item {
    padding: 9px 12px;
    font-size: 12px;
  }

  /* ── FIX 11: stat row always 2 columns on phone ── */
  .fp-stat-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── FIX 12: data tables scroll horizontally ── */
  .fp-data-table,
  .fp-data-table-wrap {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .fp-data-table th,
  .fp-data-table td {
    white-space: nowrap;
  }

  /* ── FIX 12b: fp-table expands past wrapper so horizontal scroll triggers ── */
  .fp-table-wrap .fp-table {
    width: auto;
    min-width: 660px;
  }
  .fp-table-wrap .fp-table th,
  .fp-table-wrap .fp-table td {
    white-space: nowrap;
  }

  /* ── FIX 13: AI block full-width ── */
  .fp-ai-block {
    box-sizing: border-box;
    max-width: 100%;
  }

  /* ── FIX 14: opportunity cards wrap ── */
  .fp-opp-card {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ── FIX 15: float panel → bottom sheet on mobile ── */
  .fp-float-panel {
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88vh;
    border-radius: 20px 20px 0 0 !important;
    border-left: none !important;
    border-top: 1px solid rgba(37,99,235,0.22);
    animation: fp-slide-up 0.3s var(--fp-ease) !important;
  }
  .fp-notif-panel {
    width: calc(100vw - 32px) !important;
    right: 16px !important;
    left: auto !important;
  }
  .fp-cmd-palette {
    width: calc(100vw - 24px) !important;
    left: 12px !important;
    right: 12px !important;
  }

  /* ── FIX 16: funnel bars readable on mobile ── */
  .fp-funnel-label {
    font-size: 11px;
    min-width: 80px;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── FIX 17: upgrade/CTA buttons don't overflow ── */
  .fp-upgrade-btn,
  .fp-btn {
    flex-shrink: 0;
  }

  /* ── FIX 18: topbar breadcrumb hidden on mobile (already partially handled) ── */
  .fp-topbar-breadcrumb,
  .fp-topbar-brand,
  .fp-topbar-score { display: none !important; }

  /* ── FIX 19: sidebar-collapse button hidden on mobile (not needed) ── */
  .fp-sidebar-collapse-btn { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   FIXES BATCH 3 — User feedback (checkboxes · badges · AI ·
   mobile search · calendrier · logo · fond page)
   ═══════════════════════════════════════════════════════════ */

/* 1. Checkboxes — couleur accent partout */
input[type="checkbox"] {
  accent-color: var(--fp-accent);
  cursor: pointer;
}

/* 2. AI block — texte plus petit (demandé 3×) */
.fp-ai-block {
  padding: 6px 10px !important;
  margin-bottom: 8px !important;
  gap: 8px !important;
}
.fp-ai-block-icon {
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
}
.fp-ai-block-label {
  font-size: 9px !important;
  margin-bottom: 2px !important;
}
.fp-ai-block-text {
  font-size: 11px !important;
  line-height: 1.45 !important;
}
.fp-ai-block-actions {
  margin-top: 7px !important;
  gap: 6px !important;
}
.fp-ai-chip {
  padding: 3px 9px !important;
  font-size: 10px !important;
}

/* 3. Bouton IA topbar — bleu au lieu de mauve */
.fp-icon-btn--ai {
  border-color: rgba(37,99,235,0.28) !important;
  background: rgba(37,99,235,0.10) !important;
  color: var(--fp-accent) !important;
}
.fp-icon-btn--ai:hover {
  background: rgba(37,99,235,0.18) !important;
  border-color: rgba(37,99,235,0.45) !important;
  color: var(--fp-accent) !important;
}

/* 4. Nav AI — bleu au lieu de mauve */
.fp-nav-ai {
  border-color: rgba(37,99,235,0.22) !important;
  background: rgba(37,99,235,0.07) !important;
  color: var(--fp-accent) !important;
}
.fp-nav-ai:hover {
  background: rgba(37,99,235,0.13) !important;
  border-color: rgba(37,99,235,0.38) !important;
}
.fp-nav-ai.active {
  background: rgba(37,99,235,0.20) !important;
  border-color: rgba(37,99,235,0.42) !important;
}
[data-theme="light"] .fp-nav-ai {
  background: rgba(37,99,235,0.05) !important;
  border-color: rgba(37,99,235,0.15) !important;
}
[data-theme="light"] .fp-nav-ai:hover {
  background: rgba(37,99,235,0.10) !important;
}

/* 5. TOUS les badges de notif — style numéroté identique au badge messages */
.fp-notif-badge {
  position: absolute !important;
  top: -5px !important;
  right: -5px !important;
  min-width: 16px !important;
  width: auto !important;
  height: 16px !important;
  padding: 0 3px !important;
  border-radius: 8px !important;
  background: var(--fp-accent) !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid var(--fp-bg) !important;
  box-shadow: 0 2px 6px rgba(37,99,235,0.45) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}
.fp-notif-badge[hidden] { display: none !important; }
/* On fixe aussi le positionnement du wrap activity (pas de fp-notif-wrap class) */
#fp-activity-btn { position: relative; }

/* 6. Fond bas de page — html hérite du thème (supprime barre noire en bas) */
html {
  background: var(--fp-bg) !important;
}

/* 7. Mobile — barre de recherche topbar : icône uniquement */
@media (max-width: 768px) {
  .fp-search-trigger {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    flex: none !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 9px !important;
  }
  .fp-search-trigger span { display: none !important; }

  /* Barre de recherche interne aux pages — masquée sur mobile */
  .fp-cal-search-bar { display: none !important; }
}

/* 8. Calendrier — panneau de journée SOUS le calendrier (centré) */
.fp-cal-outer-wrap {
  flex-direction: column !important;
}
.fp-daily-agenda {
  width: 100% !important;
  min-width: 0 !important;
  max-height: 340px !important;
  border-left: none !important;
  border-top: 1px solid var(--fp-border) !important;
}

/* 9. Sidebar — espace entre logo et bouton collapse en mode réduit */
.fp-sidebar.collapsed .fp-brand {
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding-bottom: 14px !important;
}
.fp-sidebar.collapsed .fp-sidebar-collapse-btn {
  margin-left: 0 !important;
}
/* Mode normal : plus d'espace entre logo et bouton collapse */
.fp-brand { gap: 10px; }
.fp-sidebar-collapse-btn { margin-left: auto; }

/* 10. Logo topbar — taille ajustée pour meilleur alignement */
.fp-topbar-breadcrumb > svg:first-child {
  width: 18px !important;
  height: 18px !important;
  border-radius: 5px;
  flex-shrink: 0;
}

/* 11. Light mode — éléments encore en couleurs sombres */
[data-theme="light"] .fp-ai-block {
  background: rgba(37,99,235,0.04) !important;
  border-color: rgba(37,99,235,0.12) !important;
}
[data-theme="light"] .fp-notif-badge {
  border-color: #f8faff !important;
}

/* 12. Fix section-header groupes En cours / Terminé en light mode */
[data-theme="light"] .fp-kanban-group-label {
  color: var(--fp-text) !important;
}

/* 13. Supprimer l'espace inutile des filtres-barre de mission sur mobile */
@media (max-width: 768px) {
  .fp-mission-filter-row {
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .fp-mission-filter-row .fp-input[placeholder="Rechercher..."],
  .fp-mission-filter-row input[placeholder*="echercher"] {
    display: none !important;
  }
}

/* 14. Mobile — cache barre de recherche dans les filtres de missions */
@media (max-width: 768px) {
  .fp-filter-bar .fp-search-input-wrap { display: none !important; }
  .fp-filter-bar select { min-width: 110px !important; font-size: 11px !important; }
}

/* ══════════════════════════════════════════════════════
   BATCH 4 FIXES — d'après retours utilisateur (photos)
   ══════════════════════════════════════════════════════ */

/* 1. SIDEBAR COLLAPSE BTN — aligned with nav items in collapsed mode */
.fp-sidebar.collapsed .fp-sidebar-collapse-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  margin: 2px auto 6px !important;
  opacity: 1 !important;
}

/* 2. DOWN status button — RED in light mode */
[data-theme="light"] .fp-topbar-status.down {
  background: rgba(239,68,68,0.07) !important;
  border-color: rgba(239,68,68,0.30) !important;
  color: #dc2626 !important;
}
[data-theme="light"] .fp-topbar-status.down .fp-status-dot {
  background: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.18) !important;
}

/* 3. CHECKBOXES — visible in both themes */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1.5px solid var(--fp-border-strong, #475569);
  background: var(--fp-bg-input);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.12s;
  vertical-align: middle;
  position: relative;
}
input[type="checkbox"]:checked {
  background: #2563EB;
  border-color: #2563EB;
}
input[type="checkbox"]:checked::after {
  content: '';
  display: block;
  width: 4px;
  height: 7px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
}
input[type="checkbox"]:hover:not(:checked) {
  border-color: #2563EB;
}
[data-theme="light"] input[type="checkbox"] {
  border-color: #cbd5e1;
  background: #ffffff;
}
[data-theme="light"] input[type="checkbox"]:checked {
  background: #2563EB;
  border-color: #2563EB;
}

/* 4. UPSELL BANNER — blue variant */
.fp-upsell-banner--blue {
  background: linear-gradient(135deg, rgba(37,99,235,0.07), rgba(37,99,235,0.04)) !important;
  border-color: rgba(37,99,235,0.22) !important;
}
.fp-upsell-banner--blue .fp-upsell-text strong {
  color: #2563EB !important;
}

/* 5. OPP-CARD — no overlap, always flex-column gap */
.fp-opp-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 0 !important;
}
[data-theme="light"] .fp-opp-icon {
  background: rgba(37,99,235,0.10) !important;
  border: 1px solid rgba(37,99,235,0.20) !important;
}

/* 6. CALENDAR — full-width row layout (calendar + agenda side-by-side) */
.fp-cal-outer-wrap {
  display: flex !important;
  flex-direction: row !important;
  gap: 0 !important;
  align-items: stretch !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: none !important;
}
.fp-apple-cal {
  flex: 1 !important;
  min-width: 0 !important;
}
.fp-cal-agenda-panel {
  width: 280px !important;
  flex-shrink: 0 !important;
}

/* 7. Light mode — quick fix any remaining dark bg on checkboxes */
[data-theme="light"] .mission-check,
[data-theme="light"] input[type="checkbox"].mission-check {
  border-color: #94a3b8 !important;
  background: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════
   BATCH 6 FIXES — Photos feedback : IA margin, sub-nav pills,
   mobile overscroll noir, topbar logout, sidebar auto-close,
   dégradé bas, alignement topbar/content, centrage mobile
   ═══════════════════════════════════════════════════════════ */

/* 1. AI block — margin-top ciblé uniquement via wrappers inline dans le JS */

/* 2. Body + html background — fond cohérent avec le thème + overscroll invisible sur mobile */
html {
  background: var(--fp-bg) !important;
  color-scheme: dark;
  overscroll-behavior: none;
}

/* ── STATUS BAR FILL — colore la zone derrière la status bar iOS ── */
#fp-bar-fill {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  z-index: 99999;
  background: #050810;
  pointer-events: none;
}
[data-theme="light"] #fp-bar-fill {
  background: #f8faff;
}


body {
  background: var(--fp-bg) !important;
  color-scheme: dark;
  overscroll-behavior: none;
}
html[data-theme="light"] { background: #f8faff !important; color-scheme: light; }
[data-theme="light"] body {
  background: #f8faff !important;
  color-scheme: light;
}

/* 2c. Scroll containers — pas de rubber-band iOS */
.fp-main-wrap,
.fp-page,
.fp-sidebar {
  overscroll-behavior: contain;
}

/* 2b. Bouton Rechercher — masqué sur mobile (≤480px) */
@media (max-width: 480px) {
  .fp-search-trigger {
    display: none !important;
  }
}

/* 3. Topbar — aligner left-padding avec fp-page (28px) */
.fp-topbar {
  padding-left: 28px !important;
  padding-right: 28px !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  height: auto !important;
  min-height: var(--fp-topbar-h) !important;
}

/* ── MOBILE EXCLUSIF ─────────────────────────────────────── */
@media (max-width: 768px) {

  /* 4. Overscroll noir — empêcher le fond sombre d'apparaître */
  html, body {
    overscroll-behavior-y: contain !important;
    background: var(--fp-bg) !important;
  }
  html[data-theme="light"],
  [data-theme="light"] body {
    background: #f8faff !important;
  }

  /* 5. Padding-bottom suffisant pour éviter que le FAB ne cache le contenu */
  .fp-page {
    padding-bottom: 100px !important;
  }

  /* 6. Sub-nav — style pilules avec coins arrondis */
  .fp-sub-nav {
    background: var(--fp-bg-card) !important;
    border: 1px solid var(--fp-border) !important;
    border-bottom: 1px solid var(--fp-border) !important;
    border-radius: 12px !important;
    padding: 4px !important;
    gap: 2px !important;
    margin-bottom: 20px !important;
  }
  .fp-sub-nav-item {
    border-radius: 8px !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: 0 !important;
    padding: 7px 11px !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
  }
  .fp-sub-nav-item.active {
    background: var(--fp-accent) !important;
    color: #fff !important;
    border-bottom-color: transparent !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(37,99,235,0.3) !important;
  }
  [data-theme="light"] .fp-sub-nav {
    background: #f1f5f9 !important;
    border-color: rgba(0,0,0,0.07) !important;
  }
  [data-theme="light"] .fp-sub-nav-item.active {
    background: var(--fp-accent) !important;
    color: #fff !important;
  }

  /* 7. Topbar mobile — cacher bouton activité (clock) pour libérer de la place
        et assurer que logout soit visible */
  #fp-activity-btn {
    display: none !important;
  }
  .fp-topbar {
    padding: env(safe-area-inset-top, 0px) 10px 0 !important;
    gap: 4px !important;
    overflow: hidden !important;
  }
  .fp-topbar-spacer {
    min-width: 2px !important;
    flex: 1 0 0 !important;
  }
  /* Assurer que tous les icon-btn restent à leur taille minimum */
  .fp-topbar .fp-icon-btn {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
  }
  .fp-topbar .fp-topbar-status {
    padding: 4px 7px !important;
    font-size: 10px !important;
  }
  /* Recherche — icône uniquement, visible */
  .fp-topbar .fp-search-trigger {
    display: flex !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex: none !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  /* 8. Centrage mobile — max-width et margin auto pour contenu */
  .fp-page {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .fp-card,
  .fp-stat-row,
  .fp-grid-2,
  .fp-grid-3 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 9. Section-header centré sur mobile */
  .fp-section-header h1 {
    font-size: 16px !important;
  }
  .fp-section-sub {
    font-size: 11px !important;
  }

  /* 10. Supprimer tout pseudo-élément dégradé éventuel */
  .fp-page::after,
  .fp-page::before {
    display: none !important;
    content: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   BATCH 5 — Mobile fixes (alertes, monitoring title, concurrent,
   focus/compact modules, sidebar user card)
   ═══════════════════════════════════════════════════════════ */

/* Alert rules : stack sur mobile */
@media (max-width: 768px) {
  .fp-alert-rule-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .fp-alert-rule-row > div:first-child {
    width: 100%;
    min-width: 0;
  }
  .fp-alert-rule-row > div:last-child {
    flex-wrap: wrap;
    width: 100%;
  }

  /* fp-flex-between : wraps sur mobile → évite le titre réduit à 0px */
  .fp-flex-between {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* fp-card-title dans flex-between : ne jamais se briser lettre par lettre */
  .fp-card-title {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    min-width: 0;
    flex: 1;
  }

  /* Concurrent stats : masqués sur très petit écran pour éviter l'overlap */
  .fp-lseo-comp-stats {
    display: none !important;
  }
}

/* Compact mode */
body.fp-compact .fp-card,
body.fp-compact .fp-card-sm { padding: 10px 14px !important; }
body.fp-compact .fp-stat-card { padding: 10px 12px !important; }
body.fp-compact .fp-page { padding: 14px 20px 80px !important; }
body.fp-compact h1 { font-size: 18px !important; }
body.fp-compact .fp-stat-val { font-size: 20px !important; }
body.fp-compact .fp-mb-16 { margin-bottom: 10px !important; }
body.fp-compact .fp-mb-20 { margin-bottom: 12px !important; }
body.fp-compact .fp-ai-block { display: none !important; }

/* Focus mode */
body.fp-focus-mode .fp-section-sub { display: none !important; }
body.fp-focus-mode .fp-insight-card { opacity: 0.4; pointer-events: none; }
body.fp-focus-mode .fp-opp-card:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   BATCH 6 — Mobile fixes (data table headers, radar, funnel)
   ═══════════════════════════════════════════════════════════ */

/* Data table headers : word-break inherited from fp-card overrides white-space:nowrap in some
   browsers → force word-break:normal to prevent vertical character stacking */
@media (max-width: 768px) {
  .fp-data-table th {
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: nowrap !important;
  }

  /* Radar de positionnement stat cards : labels must not wrap in auto-fit cells */
  .fp-stat-card {
    min-width: 0;
    word-break: normal;
    white-space: normal;
  }

  /* Funnel bar fill : no text overflow outside the bar */
  .fp-funnel-bar-fill {
    overflow: hidden;
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════════════════════
   BATCH 7 — Photos IMG_0042–IMG_0048 : calendar, bar-chart,
   audit-table, activity-grid, plans-scroll, 2FA, settings
   ═══════════════════════════════════════════════════════════ */

/* 1. CALENDAR — cells shrink properly on narrow grids (mobile) */
@media (max-width: 768px) {
  .fp-apple-cal-cell { min-height: 56px !important; padding: 4px 3px !important; }
  .fp-apple-cal-num  { width: 22px !important; height: 22px !important; font-size: 11px !important; }
  .fp-apple-cal-day-name { font-size: 9px !important; padding: 5px 0 !important; letter-spacing: 0 !important; }
  .fp-apple-cal-event { font-size: 9px !important; padding: 1px 3px !important; }
}

/* 2. BAR CHART — label width should not force overflow */
@media (max-width: 768px) {
  .fp-bar-chart-label { width: auto !important; max-width: 100% !important; }
}

/* 3. AUDIT HISTORY TABLE — reduce padding so headers fit without wrapping */
@media (max-width: 768px) {
  .fp-table th {
    padding: 8px 6px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 70px !important;
  }
  .fp-table td {
    padding: 8px 6px !important;
    font-size: 11px !important;
  }
  /* Score bar : keep full width on mobile */
  .fp-score-bar-wrap { gap: 6px; }
  .fp-score-bar-track { min-width: 30px; }
}

/* 4. TEAM ACTIVITY GRID — single column on mobile */
@media (max-width: 768px) {
  .fp-team-activity-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 5. PLAN COMPARISON GRID — horizontal snap-scroll on mobile */
@media (max-width: 768px) {
  .fp-plan-grid {
    grid-template-columns: repeat(3, 78vw) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 6px !important;
    /* prevent clipping inside the billing card */
    margin-left: -4px !important;
    margin-right: -4px !important;
    padding-left: 4px !important;
  }
  .fp-plan-card {
    scroll-snap-align: start !important;
  }
}

/* 6. 2FA BUTTONS — stack vertically on mobile */
@media (max-width: 768px) {
  .fp-2fa-btns {
    grid-template-columns: 1fr !important;
  }
}

/* 7. SETTINGS PAGE — sub-nav must not cause horizontal overflow */
@media (max-width: 768px) {
  .fp-sub-nav {
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  /* Ensure settings grid columns don't push the page wider */
  .fp-page > .fp-grid-2,
  .fp-page > div > .fp-grid-2 {
    max-width: 100%;
    overflow: hidden;
  }
}

/* ═══════════════════════════════════════════════════
   GROWTH PAGE — Command Center v3.0
   ═══════════════════════════════════════════════════ */

/* HERO */
.fp-growth-hero {
  position: relative;
  border-radius: var(--fp-radius-xl);
  padding: 26px 28px 24px;
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid rgba(37,99,235,0.28);
}
.fp-growth-hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(37,99,235,0.11) 0%, rgba(139,92,246,0.07) 55%, rgba(6,182,212,0.05) 100%);
  z-index: 0;
}
.fp-growth-hero-bg::before {
  content: '';
  position: absolute; top: -70px; right: -70px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.fp-growth-hero-inner { position: relative; z-index: 1; }
.fp-growth-hero-top {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 16px;
  margin-bottom: 22px; flex-wrap: wrap;
}
.fp-growth-hero-label {
  font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--fp-text-faint); margin-bottom: 4px;
}
.fp-growth-hero-score {
  font-size: 54px; font-weight: 900;
  color: #f1f5ff; font-family: var(--fp-font-head); line-height: 1;
}
.fp-growth-hero-score span { font-size: 22px; font-weight: 600; color: var(--fp-text-muted); }
.fp-growth-hero-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.fp-growth-chip {
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 99px; white-space: nowrap;
}
.fp-growth-chip.up  { background: rgba(34,197,94,0.12);  color: #22c55e; border: 1px solid rgba(34,197,94,0.22); }
.fp-growth-chip.ai  { background: rgba(139,92,246,0.13); color: #8b5cf6; border: 1px solid rgba(139,92,246,0.22); }
.fp-growth-comparison {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 12px 16px;
  min-width: 190px; backdrop-filter: blur(8px);
}
.fp-growth-cmp-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0; font-size: 12px; color: var(--fp-text-muted);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.fp-growth-cmp-row:last-child { border-bottom: none; }
.fp-growth-cmp-row .val.up { font-weight: 700; color: #22c55e; }
.fp-growth-cmp-row .val.ai { font-weight: 700; color: #8b5cf6; }
.fp-growth-rings {
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
}
.fp-growth-ring-item { display: flex; flex-direction: column; align-items: center; }

/* REVENUE GRID */
.fp-growth-revenue-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 20px;
}
.fp-growth-revenue-card {
  background: var(--fp-bg-card);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md); padding: 16px;
  transition: border-color .2s, box-shadow .2s;
}
.fp-growth-revenue-card:hover {
  border-color: var(--fp-border-hover);
  box-shadow: 0 4px 20px rgba(0,0,0,0.22);
}
.fp-growth-rev-bar {
  height: 2px; background: rgba(255,255,255,0.06);
  border-radius: 2px; margin-top: 10px; overflow: hidden;
}

/* AI INTELLIGENCE */
.fp-growth-ai-header {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 16px;
  flex-wrap: wrap; gap: 10px;
}
.fp-growth-ai-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(37,99,235,0.3), rgba(139,92,246,0.2));
  border: 1px solid rgba(37,99,235,0.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--fp-accent); flex-shrink: 0;
}
.fp-growth-ai-live {
  font-size: 10px; font-weight: 700;
  padding: 3px 9px; border-radius: 99px;
  background: rgba(34,197,94,0.12); color: #22c55e;
  border: 1px solid rgba(34,197,94,0.22);
  animation: fpGrowthBlink 2s ease-in-out infinite;
}
@keyframes fpGrowthBlink {
  0%, 100% { opacity: 1; } 50% { opacity: 0.6; }
}
.fp-growth-ai-insights {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.fp-growth-insight {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.065);
  border-radius: 10px; padding: 12px;
  display: flex; flex-direction: column; gap: 7px;
  transition: border-color .2s, background .2s;
}
.fp-growth-insight:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.11);
}
.fp-growth-insight-cat {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.fp-growth-insight-text {
  font-size: 12px; color: var(--fp-text-soft); line-height: 1.55; flex: 1;
}

/* QUICK WINS */
.fp-growth-wins-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.fp-growth-win-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.065);
  border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
[data-theme="light"] .fp-growth-win-card {
  background: #fff;
  border-color: rgba(0,0,0,0.09);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
[data-theme="light"] .fp-growth-win-card:hover {
  border-color: rgba(37,99,235,0.35);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.fp-growth-win-card:hover {
  border-color: rgba(37,99,235,0.35);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}
.fp-growth-win-hd { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.fp-growth-win-diff {
  font-size: 9.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 99px; white-space: nowrap;
}
.fp-growth-win-title {
  font-size: 12.5px; font-weight: 600;
  color: var(--fp-text); line-height: 1.4;
}
.fp-growth-win-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.fp-growth-win-meta span { font-size: 10.5px; color: var(--fp-text-muted); }
.fp-growth-win-prog {
  height: 4px; background: rgba(255,255,255,0.06);
  border-radius: 2px; overflow: hidden;
}

/* ROADMAP */
.fp-growth-roadmap { display: flex; flex-direction: column; gap: 0; }
.fp-growth-phase {
  display: grid; grid-template-columns: 20px 1fr;
  gap: 12px; position: relative; padding-bottom: 20px;
}
.fp-growth-phase:last-child { padding-bottom: 0; }
.fp-growth-phase-line {
  position: absolute; left: 9px; top: 22px; bottom: 0;
  width: 2px; background: rgba(255,255,255,0.06);
}
.fp-growth-phase:last-child .fp-growth-phase-line { display: none; }
.fp-growth-phase-dot {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative; z-index: 1; margin-top: 2px;
}
.fp-growth-phase-content { min-width: 0; }
.fp-growth-phase-hd {
  display: flex; align-items: center; gap: 7px;
  flex-wrap: wrap; margin-bottom: 7px;
}
.fp-growth-phase-num {
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
}
.fp-growth-phase-name { font-size: 13px; font-weight: 700; color: var(--fp-text); }
.fp-growth-phase-items {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.fp-growth-phase-items li {
  font-size: 11px; color: var(--fp-text-muted);
  padding-left: 12px; position: relative;
}
.fp-growth-phase-items li::before { content: '›'; position: absolute; left: 0; color: var(--fp-text-faint); }
.fp-growth-phase.done .fp-growth-phase-items li { color: rgba(34,197,94,0.75); }
.fp-growth-phase.planned .fp-growth-phase-items li { color: var(--fp-text-faint); }

/* FORECAST */
.fp-growth-fcast-stats {
  display: flex; gap: 0;
  border: 1px solid var(--fp-border);
  border-radius: 10px; overflow: hidden;
}
.fp-growth-fcast-stat {
  flex: 1; padding: 12px 14px;
  border-right: 1px solid var(--fp-border); text-align: center;
}
.fp-growth-fcast-stat:last-child { border-right: none; }

/* COMPETITIVE */
.fp-growth-comp-inner {
  display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
}
.fp-growth-radar-wrap {
  flex-shrink: 0; display: flex;
  flex-direction: column; align-items: center;
}
.fp-growth-mbar {
  display: inline-block; width: 60px; height: 4px;
  background: var(--fp-track);
  border-radius: 2px; overflow: hidden; vertical-align: middle;
}

/* LOCAL */
.fp-growth-city-row {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
}
.fp-growth-content-opp {
  padding: 10px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  transition: border-color .2s;
}
.fp-growth-content-opp:hover { border-color: rgba(255,255,255,0.09); }

/* CONVERSION LEAKS */
.fp-growth-leak {
  display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-radius: 10px; flex-wrap: wrap;
}

/* GAMIFICATION */
.fp-growth-gamification {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.fp-growth-level-badge {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, var(--fp-accent), #8b5cf6);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 4px 16px rgba(37,99,235,0.35);
}
.fp-growth-streaks {
  display: flex; gap: 0;
  border: 1px solid var(--fp-border); border-radius: 10px; overflow: hidden;
}
.fp-growth-streak-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; padding: 10px 6px; gap: 2px;
  border-right: 1px solid var(--fp-border);
}
.fp-growth-streak-item:last-child { border-right: none; }
.fp-growth-badges-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.fp-growth-badge-item {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 6px; border-radius: 10px; gap: 4px;
  cursor: default; transition: all .2s;
}
.fp-growth-badge-item.earned {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
}
.fp-growth-badge-item.locked {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  opacity: 0.38; filter: grayscale(0.85);
}

/* AI STRATEGY BLOCK */
.fp-growth-strategy-block {
  background: linear-gradient(135deg, rgba(13,21,37,0.97) 0%, rgba(20,30,60,0.92) 100%);
  border: 1px solid rgba(37,99,235,0.32);
  border-radius: var(--fp-radius-xl);
  padding: 24px; position: relative;
  overflow: hidden; margin-bottom: 16px;
}
.fp-growth-strategy-block-bg {
  position: absolute; bottom: -50px; right: -50px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.fp-growth-strategy-hd {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 18px;
  flex-wrap: wrap; gap: 10px;
}
.fp-growth-strategy-avatar {
  width: 42px; height: 42px; border-radius: 14px;
  background: linear-gradient(135deg, var(--fp-accent), #8b5cf6);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 4px 16px rgba(37,99,235,0.4);
}
.fp-growth-strategy-live {
  font-size: 11px; font-weight: 600; color: #22c55e;
  animation: fpGrowthBlink 2s ease-in-out infinite;
}
.fp-growth-strategy-msgs {
  display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px;
}
.fp-growth-strategy-msg {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px; padding: 11px 14px;
  animation: fpSlideInUp .4s ease both;
}
@keyframes fpSlideInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fp-growth-strategy-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── MOBILE ── */
@media (max-width: 768px) {
  .fp-growth-hero { padding: 16px; }
  .fp-growth-hero-score { font-size: 38px; }
  .fp-growth-hero-top { flex-direction: column; }
  .fp-growth-comparison { min-width: 0; width: 100%; }
  .fp-growth-rings { gap: 10px; }
  .fp-growth-revenue-grid { grid-template-columns: 1fr 1fr !important; }
  .fp-growth-ai-insights { grid-template-columns: 1fr !important; }
  .fp-growth-wins-grid { grid-template-columns: 1fr !important; }
  .fp-growth-comp-inner { flex-direction: column; }
  .fp-growth-radar-wrap { width: 100%; align-items: center; }
  .fp-growth-gamification { grid-template-columns: 1fr !important; }
  .fp-growth-fcast-stats { flex-direction: column; }
  .fp-growth-fcast-stat { border-right: none !important; border-bottom: 1px solid var(--fp-border); }
  .fp-growth-fcast-stat:last-child { border-bottom: none; }
  .fp-growth-strategy-actions { flex-direction: column; }
  .fp-growth-strategy-actions .fp-btn { width: 100%; justify-content: center; }
  .fp-growth-leak { flex-direction: column; align-items: flex-start; }
  .fp-growth-leak .fp-btn { width: 100%; }
}

/* ── Objective summary strip ───────────────────────────────────────── */
.fp-growth-obj-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--fp-border);
  border-radius: 12px;
  margin-bottom: 16px;
}
.fp-growth-obj-sum-item {
  flex: 1;
  min-width: 80px;
}

/* ── Plan Switcher Widget ───────────────────────────────────────────── */
.fp-plan-switcher { position: relative; }
.fp-plan-pill { display: flex; align-items: center; gap: 5px; background: rgba(37,99,235,0.12); border: 1px solid rgba(37,99,235,0.28); border-radius: 20px; padding: 4px 10px 4px 8px; cursor: pointer; font-size: 11.5px; font-weight: 700; color: var(--fp-accent); transition: all .15s; white-space: nowrap; }
.fp-plan-pill:hover { background: rgba(37,99,235,0.22); border-color: rgba(37,99,235,0.5); }
.fp-ps-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.fp-plan-dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: var(--fp-card); border: 1px solid var(--fp-border); border-radius: 12px; min-width: 220px; z-index: 9999; box-shadow: 0 12px 40px rgba(0,0,0,0.5); overflow: hidden; animation: fp-fade-in .12s ease; }
.fp-plan-dropdown-item { padding: 10px 14px; cursor: pointer; transition: background .1s; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fp-plan-dropdown-item:hover { background: rgba(255,255,255,0.05); }
.fp-plan-dropdown-item.active { background: rgba(37,99,235,0.1); }
.fp-plan-di-left { display: flex; align-items: center; gap: 9px; }
.fp-plan-di-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fp-plan-di-name { font-size: 12.5px; font-weight: 700; color: var(--fp-text); }
.fp-plan-di-price { font-size: 11px; color: var(--fp-text-muted); }
.fp-plan-di-check { color: var(--fp-accent); font-size: 13px; font-weight: 800; }

/* ── Audit Detail Panel upgrades ────────────────────────────────────── */
.fp-audit-issue-card { border-radius: 10px; overflow: hidden; transition: opacity .25s; }
.fp-audit-fix-box { background: rgba(37,99,235,0.07); border-left: 2px solid #2563EB; padding: 7px 9px; border-radius: 0 6px 6px 0; }
.fp-audit-meta-chip { font-size: 10px; color: var(--fp-text-faint); background: rgba(255,255,255,0.05); border-radius: 4px; padding: 2px 6px; }

/* ── Audit Compare upgrades ──────────────────────────────────────────── */
.fp-cmp-score-block { flex: 1; text-align: center; padding: 20px 14px; border-radius: 12px; background: var(--fp-bg-subtle); border: 1px solid var(--fp-border); transition: border-color .2s; }
.fp-cmp-score-num { font-size: 52px; font-weight: 800; font-family: var(--fp-font-head); line-height: 1; }
.fp-cmp-winner-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; background: rgba(34,197,94,0.15); color: #22c55e; border: 1px solid rgba(34,197,94,0.3); border-radius: 12px; padding: 2px 8px; margin-top: 7px; }
.fp-cmp-cat-row { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--fp-border); }
.fp-cmp-cat-name { flex: 0 0 105px; font-size: 11px; color: var(--fp-text-soft); }
.fp-cmp-cat-bar { flex: 1; height: 5px; background: var(--fp-bg-track, rgba(127,127,127,0.15)); border-radius: 3px; overflow: hidden; }
.fp-cmp-cat-fill { height: 100%; border-radius: 3px; transition: width .6s ease; }
.fp-cmp-cat-val { min-width: 28px; text-align: right; font-size: 11.5px; font-weight: 700; }
.fp-cmp-drift-alert { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; background: rgba(239,68,68,0.07); border: 1px solid rgba(239,68,68,0.2); border-radius: 8px; margin-bottom: 8px; font-size: 11.5px; color: var(--fp-text-soft); line-height: 1.5; }

/* ── Audit Opportunities ─────────────────────────────────────────────── */
.fp-opp-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--fp-bg-subtle); border: 1px solid var(--fp-border); border-radius: 10px; transition: border-color .15s; }
.fp-opp-card:hover { border-color: rgba(37,99,235,0.35); }
.fp-opp-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.fp-opp-title { font-size: 12.5px; font-weight: 700; color: var(--fp-text); margin-bottom: 3px; }
.fp-opp-desc { font-size: 11px; color: var(--fp-text-muted); line-height: 1.5; }
.fp-opp-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.fp-opp-chip { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 5px; }

/* ── Quota bar ────────────────────────────────────────────────────────── */
.fp-quota-bar { display: flex; align-items: center; gap: 16px; padding: 10px 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--fp-border); border-radius: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.fp-quota-item { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 110px; }
.fp-quota-label { font-size: 10px; color: var(--fp-text-faint); text-transform: uppercase; letter-spacing: 0.07em; }
.fp-quota-track { height: 4px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; }
.fp-quota-fill { height: 100%; border-radius: 2px; transition: width .5s ease; }
.fp-quota-val { font-size: 11px; font-weight: 700; color: var(--fp-text-soft); }

/* ── Objective card left-border accent ─────────────────────────────── */
.fp-growth-obj-card {
  border-left-width: 3px !important;
  border-left-style: solid;
}

/* ── Competitive table: hide Part Marché on mobile ─────────────────── */
@media (max-width: 768px) {
  .fp-g-pm { display: none !important; }
  /* Revenue grid value — prevent wrap on small phones */
  .fp-growth-rev-value { font-size: 17px !important; white-space: nowrap; }
  /* Objective summary stacks */
  .fp-growth-obj-summary { gap: 8px; }
  .fp-growth-obj-sum-item { min-width: 60px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MONITORS — Premium Enterprise Platform CSS
   ═════════════════════════════════════════════════════════════════ */

/* ── Live pulse animation ───────────────────────────────────────── */
@keyframes fp-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(1.3); }
}

/* ── Monitor KPI cards (5-column row) ──────────────────────────── */
.fp-monitor-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .fp-monitor-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .fp-monitor-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Activity timeline items ────────────────────────────────────── */
.fp-timeline-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.fp-timeline-item:last-child { border-bottom: none; }
.fp-timeline-dot {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  margin-top: 1px;
}

/* ── Dependency card ────────────────────────────────────────────── */
.fp-dep-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  border: 1px solid transparent;
  transition: border-color .2s;
}
.fp-dep-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── CWV mini progress bars ─────────────────────────────────────── */
.fp-cwv-bar {
  height: 2px;
  background: rgba(255,255,255,0.07);
  border-radius: 1px;
  width: 44px;
  margin: 3px auto 0;
  overflow: hidden;
}
.fp-cwv-bar-fill {
  height: 100%;
  border-radius: 1px;
  transition: width .6s ease;
}

/* ── AI Performance Intelligence block ──────────────────────────── */
.fp-perf-ai-card {
  background: linear-gradient(135deg, rgba(37,99,235,0.06) 0%, rgba(139,92,246,0.04) 100%);
  border-color: rgba(37,99,235,0.18) !important;
}
.fp-perf-ai-insight {
  padding: 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  border-left: 2px solid transparent;
}

/* ── Incident card accent border ────────────────────────────────── */
.fp-incident-card {
  border-left: 3px solid var(--fp-danger);
}
.fp-incident-card.warning { border-left-color: var(--fp-warning); }
.fp-incident-card.info    { border-left-color: #94a3b8; }

/* ── Incident mini-timeline ─────────────────────────────────────── */
.fp-inc-timeline {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  padding: 10px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  overflow-x: auto;
  margin-bottom: 14px;
}
.fp-inc-step {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.fp-inc-step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 auto 4px;
}
.fp-inc-connector {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.1);
  min-width: 20px;
  margin: 0 4px;
  margin-top: -18px;
}

/* ── Monitor Config presets grid ────────────────────────────────── */
.fp-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 640px) {
  .fp-preset-grid { grid-template-columns: 1fr; }
}
.fp-preset-card {
  padding: 14px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.fp-preset-card:hover {
  background: rgba(255,255,255,0.05);
}

/* ── Alert channel grid (3-col) ─────────────────────────────────── */
.fp-channel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 760px) {
  .fp-channel-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .fp-channel-grid { grid-template-columns: 1fr; }
}
.fp-channel-card {
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  border: 1px solid var(--fp-border);
  transition: border-color .2s;
}
.fp-channel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: box-shadow .2s;
}

/* ── Maintenance window rows ────────────────────────────────────── */
.fp-maint-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  flex-wrap: wrap;
}

/* ── SLA bar chart ──────────────────────────────────────────────── */
.fp-sla-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 90px;
  margin-bottom: 8px;
}
.fp-sla-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
}
.fp-sla-bar-inner {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
}
.fp-sla-bar-fill {
  width: 100%;
  border-radius: 4px 4px 0 0;
  transition: height .5s ease;
}

/* ── SLA Risk bars ──────────────────────────────────────────────── */
.fp-sla-risk-bar {
  height: 5px;
  background: rgba(255,255,255,0.07);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.fp-sla-risk-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .6s ease;
}

/* ── Business Impact KPI row ────────────────────────────────────── */
.fp-biz-kpi-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
}

/* ── Synthetic Journey cards ────────────────────────────────────── */
.fp-journey-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 640px) {
  .fp-journey-grid { grid-template-columns: 1fr; }
}
.fp-journey-card {
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 9px;
  border: 1px solid var(--fp-border);
  transition: border-color .2s;
}
.fp-journey-card.ok   { border-color: rgba(34,197,94,0.2); }
.fp-journey-card.fail { border-color: rgba(239,68,68,0.2); }

/* ── Regional perf bars ─────────────────────────────────────────── */
.fp-region-bar {
  height: 5px;
  background: rgba(255,255,255,0.07);
  border-radius: 3px;
  overflow: hidden;
  flex: 1;
}
.fp-region-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .6s ease;
}

/* ── Mobile vs Desktop mini bars ────────────────────────────────── */
.fp-mob-desktop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

/* ── Geographic timeline dots ───────────────────────────────────── */
.fp-geo-timeline {
  position: relative;
  padding: 0 10px;
}
.fp-geo-timeline-line {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  height: 2px;
  background: rgba(255,255,255,0.07);
  border-radius: 1px;
}
.fp-geo-timeline-nodes {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.fp-geo-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 80px;
}
.fp-geo-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--fp-bg);
}

/* ── Responsive: monitors page on mobile ────────────────────────── */
@media (max-width: 640px) {
  .fp-monitor-kpi-grid { grid-template-columns: 1fr 1fr; }
  .fp-channel-grid     { grid-template-columns: 1fr 1fr; }
  .fp-journey-grid     { grid-template-columns: 1fr; }
  .fp-preset-grid      { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   OVERVIEW PAGE — Layout & Alignment Fixes v4
   ═══════════════════════════════════════════════════════════════ */

/* Health gauge 8-card grid — auto-fill so cards never overflow or leave gaps */
.fp-health-gauge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* Forecast 4-card grid */
.fp-forecast-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* Quick actions 8-button grid */
.fp-quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* Workspace intelligence map 3-col grid */
.fp-ws-map-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Activity item — ensure text doesn't overflow */
.fp-activity-item .fp-activity-title,
.fp-activity-item .fp-activity-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Stat card value — prevent overflow on small screens */
.fp-stat-card-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Tablet (≤1024px): tighten forecast + health grids to 2 cols ── */
@media (max-width: 1024px) {
  .fp-forecast-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Mobile (≤768px): all overview grids collapse properly ── */
@media (max-width: 768px) {
  /* 8-card health gauge → 2 columns */
  .fp-health-gauge-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Forecast → 2 columns */
  .fp-forecast-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Quick actions → 2 columns */
  .fp-quick-actions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Workspace map → 2 columns (3 too tight on mobile) */
  .fp-ws-map-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Stat row → always 2 cols */
  .fp-stat-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Health gauge card label — prevent cut-off */
  .fp-health-gauge-grid > div > div > div[style*="text-transform:uppercase"] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 9px !important;
  }

  /* Activity text can wrap on mobile */
  .fp-activity-item .fp-activity-title,
  .fp-activity-item .fp-activity-desc {
    white-space: normal;
  }

  /* Opportunity card ROI text — no overflow */
  .fp-opp-card {
    align-items: flex-start !important;
  }

  /* Business opp score column — shrink gracefully */
  .fp-opp-card > div[style*="text-align:right"] {
    min-width: 42px;
    flex-shrink: 0;
  }

  /* Quick action buttons — allow text to wrap */
  .fp-quick-actions-grid button div {
    white-space: normal;
    font-size: 10px !important;
  }

  /* Executive hero padding tighter on mobile */
  .fp-health-gauge-grid {
    gap: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CROISSANCE + MISSIONS — Layout Fixes v5
   ═══════════════════════════════════════════════════════════════ */

/* ── Calendar: fill full width inside its card wrapper ── */
.fp-cal-outer-wrap {
  width: 100%;
}
.fp-apple-cal {
  /* override standalone border/radius when nested in fp-card */
  max-width: 100%;
}

/* ── Growth page: Croissance mobile fixes ── */
@media (max-width: 768px) {
  /* Growth 4-col forecast grid → 2 cols on mobile */
  .fp-growth-forecast-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Growth hero stats overflow prevention */
  .fp-growth-hero-stats {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* Expansion Locale + Contenu buttons — keep same size on mobile */
  .fp-btn.fp-btn-primary.fp-btn-sm[onclick*="local-seo"],
  .fp-btn.fp-btn-primary.fp-btn-sm[onclick*="content"] {
    padding: 8px 14px !important;
    font-size: 12px !important;
    height: auto !important;
  }
}

/* ── Missions Kanban: column min-height so empty state is visible ── */
.fp-kanban-cards {
  min-height: 120px;
}

/* ── Kanban col header: friendlier font ── */
.fp-kanban-col-title {
  font-size: 13px;
}

/* ── Daily agenda empty state: proper flex centering ── */
.fp-daily-agenda > div[style*="flex:1"] {
  display: flex;
  flex-direction: column;
}

/* ── Mobile: calendar stacks below header instead of side-panel ── */
@media (max-width: 768px) {
  .fp-cal-outer-wrap {
    flex-direction: column !important;
  }
  .fp-daily-agenda {
    width: 100% !important;
    min-width: unset !important;
    border-left: none !important;
    border-top: 1px solid var(--fp-border) !important;
  }
  .fp-apple-cal-cell {
    min-height: 56px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   BATCH 8 — Light/Dark mode parity pass (photos feedback)
   ═══════════════════════════════════════════════════════════════ */

/* ── A. DARK MODE : ring track invisible (trop clair) ──────────── */
/* On garde le track sombre — aucun changement requis en dark        */

/* ── B. LIGHT MODE : ring track stroke trop light → remplacer ──── */
/* Le SVG inline utilise rgba(255,255,255,0.06) comme track.         */
/* En light mode on ne peut pas surcharger l'attr SVG via CSS pur.   */
/* On contourne via l'opacité du container :                         */
[data-theme="light"] .fp-growth-ring-item svg circle:first-child {
  stroke: rgba(0,0,0,0.10) !important;
}

/* ── C. LIGHT MODE : valeurs dans les rings (color:#f1f5ff) ─────── */
[data-theme="light"] span[style*="color:#f1f5ff"],
[data-theme="light"] div[style*="color:#f1f5ff"],
[data-theme="light"] b[style*="color:#f1f5ff"] {
  color: #0f172a !important;
}

/* ── D. LIGHT MODE : fp-growth-hero-score (hardcodé #f1f5ff) ────── */
[data-theme="light"] .fp-growth-hero-score {
  color: #0f172a !important;
}
[data-theme="light"] .fp-growth-hero-score span {
  color: #64748b !important;
}
[data-theme="light"] .fp-growth-hero-label {
  color: #64748b !important;
}

/* ── E. LIGHT MODE : fond du hero growth (conserver léger) ───────── */
[data-theme="light"] .fp-growth-hero {
  background: #ffffff;
  border-color: rgba(37,99,235,0.15);
}
[data-theme="light"] .fp-growth-hero-bg {
  background: linear-gradient(135deg, rgba(37,99,235,0.04) 0%, rgba(139,92,246,0.02) 55%, rgba(6,182,212,0.01) 100%) !important;
  opacity: 0.8;
}
[data-theme="light"] .fp-growth-hero-bg::before {
  opacity: 0.3;
}

/* ── F. LIGHT MODE : fp-growth-cmp-row ──────────────────────────── */
[data-theme="light"] .fp-growth-cmp-row {
  color: #334155;
  border-bottom-color: rgba(0,0,0,0.05);
}

/* ── G. LIGHT MODE : fp-growth-revenue-card track bar ───────────── */
[data-theme="light"] .fp-growth-rev-bar {
  background: rgba(0,0,0,0.07) !important;
}

/* ── H. LIGHT MODE : AI Priority Engine card (dark gradient) ────── */
[data-theme="light"] .fp-card[style*="rgba(5,8,16"] {
  background: #ffffff !important;
  border-color: rgba(139,92,246,0.15) !important;
}

/* ── I. LIGHT MODE : Stratège IA block (fond sombre) ────────────── */
[data-theme="light"] .fp-growth-strategy-block {
  background: #ffffff !important;
  border-color: rgba(37,99,235,0.13) !important;
}
[data-theme="light"] .fp-growth-strategy-block-bg {
  display: none !important;
}
[data-theme="light"] .fp-growth-strategy-msg {
  background: rgba(0,0,0,0.025) !important;
  border-color: rgba(0,0,0,0.07) !important;
}
[data-theme="light"] .fp-growth-strategy-msg * {
  color: #334155 !important;
}

/* ── J. LIGHT MODE : growth insight cards ────────────────────────── */
[data-theme="light"] .fp-growth-insight {
  background: rgba(0,0,0,0.025) !important;
  border-color: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .fp-growth-insight-cat { color: #64748b !important; }
[data-theme="light"] .fp-growth-insight-text { color: #334155 !important; }

/* ── K. LIGHT MODE : growth ai-icon header ───────────────────────── */
[data-theme="light"] .fp-growth-ai-icon {
  background: rgba(37,99,235,0.08) !important;
  border-color: rgba(37,99,235,0.18) !important;
}

/* ── L. LIGHT MODE : fp-perf-ai-card / insight-card ─────────────── */
[data-theme="light"] .fp-perf-ai-card {
  background: linear-gradient(135deg, rgba(37,99,235,0.04), rgba(139,92,246,0.02)) !important;
  border-color: rgba(37,99,235,0.10) !important;
}
[data-theme="light"] .fp-perf-ai-insight {
  background: rgba(0,0,0,0.025) !important;
}
[data-theme="light"] .fp-insight-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .fp-insight-card-head { color: #0f172a !important; }

/* ── M. DARK MODE : fp-card avec background #fff / blanc ─────────── */
html:not([data-theme="light"]) .fp-card[style*="background:#ffffff"],
html:not([data-theme="light"]) .fp-card[style*="background: #ffffff"],
html:not([data-theme="light"]) .fp-card[style*="background:#fff"],
html:not([data-theme="light"]) .fp-card[style*="background: #fff"] {
  background: var(--fp-bg-card) !important;
}

/* ── N. DARK MODE : bandes/sections avec fond blanc inline ───────── */
html:not([data-theme="light"]) div[style*="background:#f8fafc"],
html:not([data-theme="light"]) div[style*="background: #f8fafc"],
html:not([data-theme="light"]) div[style*="background:#f1f5f9"],
html:not([data-theme="light"]) div[style*="background: #f1f5f9"],
html:not([data-theme="light"]) div[style*="background:#f8faff"],
html:not([data-theme="light"]) div[style*="background: #f8faff"] {
  background: var(--fp-bg-card) !important;
}

/* ── O. DARK MODE : texte trop clair (var faint sur fond sombre) ─── */
/* On garde les variables système — si bandes visibles c'est inline   */
html:not([data-theme="light"]) div[style*="color:#94a3b8"],
html:not([data-theme="light"]) span[style*="color:#94a3b8"] {
  color: var(--fp-text-muted) !important;
}

/* ── P. LIGHT MODE : bordures trop claires (rgba white) ─────────── */
[data-theme="light"] div[style*="border:1px solid rgba(255,255,255,0.1)"],
[data-theme="light"] div[style*="border-bottom:1px solid rgba(255,255,255,0.1)"] {
  border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] div[style*="border-bottom:1px solid rgba(255,255,255,0.06)"],
[data-theme="light"] div[style*="border:1px solid rgba(255,255,255,0.05)"] {
  border-color: rgba(0,0,0,0.06) !important;
}

/* ── Q. LIGHT MODE : fp-growth-comparison block ─────────────────── */
[data-theme="light"] .fp-growth-comparison {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.07);
}

/* ── R. LIGHT MODE : inline dark bg inside fp-card children ──────── */
[data-theme="light"] .fp-card > div[style*="rgba(5,8,16"],
[data-theme="light"] .fp-card > div[style*="rgba(13,21,37"],
[data-theme="light"] .fp-card > div[style*="rgba(17,24,60"] {
  background: transparent !important;
}

/* ── S. LIGHT MODE : inline text colors too light on white ───────── */
[data-theme="light"] span[style*="color:var(--fp-text-faint)"],
[data-theme="light"] div[style*="color:var(--fp-text-faint)"] {
  color: #94a3b8 !important;
}
[data-theme="light"] span[style*="color:var(--fp-text-muted)"],
[data-theme="light"] div[style*="color:var(--fp-text-muted)"] {
  color: #64748b !important;
}

/* ── T. LIGHT MODE : fp-growth-hero-chips ────────────────────────── */
[data-theme="light"] .fp-growth-chip {
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .fp-growth-chip.up {
  background: rgba(34,197,94,0.08);
  border-color: rgba(34,197,94,0.20);
}
[data-theme="light"] .fp-growth-chip.ai {
  background: rgba(139,92,246,0.07);
  border-color: rgba(139,92,246,0.18);
}

/* ── U. LIGHT MODE : URL chips / badge--ghost ────────────────────── */
.fp-badge--ghost {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--fp-text-muted);
  border-radius: var(--fp-radius-full);
}
[data-theme="light"] .fp-badge--ghost {
  background: rgba(37,99,235,0.06) !important;
  border-color: rgba(37,99,235,0.2) !important;
  color: #2563EB !important;
}
[data-theme="light"] .fp-badge--ghost:hover {
  background: rgba(37,99,235,0.12) !important;
  border-color: rgba(37,99,235,0.35) !important;
}

/* ── V. LIGHT MODE : progress tracks and count badges ───────────── */
[data-theme="light"] .fp-growth-win-prog { background: rgba(0,0,0,0.07) !important; }
[data-theme="light"] .fp-mission-progress { background: rgba(0,0,0,0.07) !important; }
[data-theme="light"] .fp-kanban-col-count {
  background: rgba(0,0,0,0.05) !important;
  color: #64748b !important;
}

/* ── W. LIGHT MODE : dark semi-transparent bg on CSS-class elements  */
[data-theme="light"] .fp-ai-usage-item,
[data-theme="light"] .fp-sub-nav-item:hover { background: rgba(0,0,0,0.04) !important; }

/* ── X. LIGHT MODE : inline rgba-white backgrounds on spans/divs ─── */
[data-theme="light"] span[style*="background:rgba(255,255,255,0.07)"],
[data-theme="light"] span[style*="background:rgba(255,255,255,0.08)"],
[data-theme="light"] span[style*="background:rgba(255,255,255,0.1)"],
[data-theme="light"] span[style*="background:rgba(255,255,255,0.06)"] {
  background: rgba(0,0,0,0.05) !important;
}
[data-theme="light"] div[style*="background:rgba(255,255,255,0.07)"],
[data-theme="light"] div[style*="background:rgba(255,255,255,0.1)"] {
  background: rgba(0,0,0,0.04) !important;
}

/* ── Y. LIGHT MODE : geo grid table thead border ────────────────── */
[data-theme="light"] table[style*="border-collapse"] thead tr {
  border-bottom-color: rgba(0,0,0,0.1) !important;
}

/* ── Z. LIGHT MODE : SVG score ring tracks (tous les cercles donut) ─
   Les tracks utilisent stroke="rgba(255,255,255,0.05/0.06/0.08)" —
   invisible sur fond blanc. On les remplace par un gris léger.       */
[data-theme="light"] svg circle[fill="none"][stroke*="rgba(255,255,255"] {
  stroke: rgba(0,0,0,0.10) !important;
}
/* Idem pour les growthRing SVG inline (string concat, même attribut) */
[data-theme="light"] .fp-growth-ring-item svg circle[fill="none"] {
  stroke: rgba(0,0,0,0.10) !important;
}

/* ── AI Chat Panel ──────────────────────────────────────────────────────────── */
.fp-ai-chat-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(3px);
  z-index: 1199; animation: fpFadeIn 0.2s ease forwards;
}
.fp-ai-chat-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 520px;
  background: var(--fp-bg-card); border-left: 1px solid var(--fp-border);
  z-index: 1200; display: flex; flex-direction: column;
  animation: fpSlideInRight 0.25s cubic-bezier(0.16,1,0.3,1);
  box-shadow: -8px 0 32px rgba(0,0,0,0.3);
}
.fp-ai-chat-panel[hidden],
.fp-ai-chat-overlay[hidden] { display: none !important; }
@keyframes fpSlideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
.fp-ai-chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--fp-border); gap: 12px; flex-shrink: 0;
}
.fp-ai-chat-header-left { display: flex; align-items: center; gap: 10px; }
.fp-ai-avatar {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--fp-accent) 0%, #8b5cf6 100%);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  color: white; flex-shrink: 0;
}
.fp-ai-chat-title { font-size: 14px; font-weight: 600; color: var(--fp-text); }
.fp-ai-chat-subtitle { font-size: 11px; color: var(--fp-text-faint); }
.fp-ai-chat-messages {
  flex: 1; min-height: 0; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth;
}
.fp-ai-chat-welcome { text-align: center; padding: 24px 16px; }
.fp-ai-chat-welcome-icon {
  width: 64px; height: 64px;
  background: linear-gradient(135deg,rgba(37,99,235,0.12),rgba(139,92,246,0.12));
  border-radius: 20px; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; color: var(--fp-accent);
}
.fp-ai-chat-welcome p { font-size: 13px; color: var(--fp-text-muted); line-height: 1.7; margin-bottom: 16px; }
.fp-ai-chat-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.fp-ai-quick-chip {
  padding: 6px 12px; border-radius: 20px; border: 1px solid var(--fp-border);
  background: var(--fp-bg-card); color: var(--fp-text-muted); font-size: 11px;
  cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.fp-ai-quick-chip:hover { border-color: var(--fp-accent); color: var(--fp-accent); background: rgba(37,99,235,0.08); }
.fp-ai-msg { display: flex; gap: 10px; animation: fpFadeIn 0.2s ease; }
.fp-ai-msg--user { flex-direction: row-reverse; }
.fp-ai-msg-avatar {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0; color: white;
}
.fp-ai-msg--user .fp-ai-msg-avatar { background: var(--fp-accent); }
.fp-ai-msg--assistant .fp-ai-msg-avatar { background: linear-gradient(135deg,#2563eb,#8b5cf6); }
.fp-ai-msg-bubble { max-width: 86%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.65; }
.fp-ai-msg--user .fp-ai-msg-bubble { background: var(--fp-accent); color: white; border-bottom-right-radius: 4px; }
.fp-ai-msg--assistant .fp-ai-msg-bubble { background: var(--fp-bg-card); border: 1px solid var(--fp-border); color: var(--fp-text); border-bottom-left-radius: 4px; }
.fp-ai-msg-bubble strong { font-weight: 700; }
.fp-ai-msg-bubble code { font-family: 'JetBrains Mono', monospace; background: rgba(0,0,0,0.2); padding: 2px 5px; border-radius: 4px; font-size: 11px; }
.fp-ai-chat-typing { display: flex; align-items: center; gap: 5px; padding: 4px 20px 8px; }
.fp-ai-typing-dot { width: 7px; height: 7px; background: var(--fp-accent); border-radius: 50%; animation: fpTyping 1.2s ease infinite; }
.fp-ai-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.fp-ai-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes fpTyping { 0%,60%,100% { opacity: 0.2; transform: scale(0.75); } 30% { opacity: 1; transform: scale(1); } }
.fp-ai-chat-footer { border-top: 1px solid var(--fp-border); padding: 12px 16px; background: var(--fp-bg-card); flex-shrink: 0; }
.fp-ai-chat-input-wrap { display: flex; gap: 8px; align-items: flex-end; }
.fp-ai-chat-input {
  flex: 1; background: var(--fp-bg-body); border: 1px solid var(--fp-border);
  border-radius: 10px; padding: 10px 18px 10px 14px; color: var(--fp-text);
  font-size: 13px; resize: none; max-height: 120px; min-height: 42px;
  /* JS toggles this to auto only after content exceeds max-height:120px. */
  overflow-y: hidden; line-height: 1.5; outline: none; font-family: inherit;
  transition: border-color 0.15s; display: block; width: 100%;
  -webkit-overflow-scrolling: touch;   /* smooth scroll on iOS Safari */
}
.fp-ai-chat-input:focus { border-color: var(--fp-accent); }
/* Always-visible 5px scrollbar — -webkit-appearance:none forces it visible on
   macOS Safari (otherwise hidden until hover by default). */
#fp-ai-chat-input::-webkit-scrollbar { width: 5px; -webkit-appearance: none; }
#fp-ai-chat-input::-webkit-scrollbar-track { background: transparent; border-radius: 4px; margin: 4px 0; }
#fp-ai-chat-input::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.45); border-radius: 4px; min-height: 28px; }
#fp-ai-chat-input::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,0.75); }
html[data-theme="dark"] #fp-ai-chat-input::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.5); }
html[data-theme="dark"] #fp-ai-chat-input::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.65); }
.fp-ai-chat-send {
  width: 40px; height: 40px; background: var(--fp-accent); border: none;
  border-radius: 10px; color: white; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: opacity 0.15s, transform 0.1s;
}
.fp-ai-chat-send:disabled { opacity: 0.35; cursor: not-allowed; }
.fp-ai-chat-send:not(:disabled):hover { opacity: 0.88; transform: scale(1.05); }
.fp-ai-chat-credits { font-size: 10px; color: var(--fp-text-faint); margin-top: 6px; text-align: right; }
@media (max-width: 768px) { .fp-ai-chat-panel { width: 100vw; } }

/* Unified chat sizing: all composers scroll after 120px and their message panes
   consume only the available flex space. */
.fp-card:has(#ai-messages),
#fp-ai-chat-panel,
.fp-float-panel:has(#ai-panel-input) {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.fp-card:has(#ai-messages) { overflow: visible !important; }
#ai-messages,
.fp-ai-chat-messages,
.fp-float-panel-body:has(#ai-panel-input) {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.fp-ai-input-row,
.fp-ai-chat-input-wrap {
  display: flex;
  min-height: 0;
}
#ai-input,
#ai-panel-input,
#fp-ai-chat-input {
  max-height: 120px;
  overflow-y: auto !important;
  min-width: 0;
}

@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
  }
  body,
  .fp-layout,
  .fp-main-wrap,
  .fp-ai-chat-panel,
  .fp-float-panel {
    height: 100dvh;
    max-height: 100dvh;
  }
  .fp-ai-chat-panel,
  .fp-float-panel {
    top: 0;
    bottom: auto;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .fp-ai-chat-panel {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  body.fp-ai-open .fp-main-wrap {
    padding-right: 0 !important;
  }
  body.fp-ai-open::after {
    display: none;
  }
  .fp-ai-chat-footer,
  .fp-float-panel-body:has(#ai-panel-input) {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}

.fp-ranking-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.fp-ranking-history-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .fp-ranking-history-header {
    align-items: stretch;
    flex-direction: column;
  }
  .fp-ranking-history-actions {
    justify-content: space-between;
    width: 100%;
  }
  .fp-ranking-history-actions .fp-btn {
    min-width: 0;
    white-space: normal;
  }
}

/* ── PageSpeed / Performance ────────────────────────────────────────────────── */
.fp-psi-url-bar {
  display: flex; gap: 10px; align-items: center;
  background: var(--fp-bg-card); border: 1px solid var(--fp-border);
  border-radius: 12px; padding: 10px 16px;
}
.fp-psi-url-input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--fp-text); font-size: 14px; font-family: 'JetBrains Mono', monospace;
}
.fp-psi-url-input::placeholder { color: var(--fp-text-faint); }
.fp-psi-score-ring { position: relative; width: 88px; height: 88px; display: inline-block; }
.fp-psi-score-ring svg { width: 88px; height: 88px; transform: rotate(-90deg); }
.fp-psi-score-ring circle { fill: none; stroke-linecap: round; }
.fp-psi-score-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: var(--fp-text);
}
.fp-psi-score-card {
  background: var(--fp-bg-card); border: 1px solid var(--fp-border);
  border-radius: 14px; padding: 20px; display: flex; flex-direction: column;
  align-items: center; gap: 8px; text-align: center; transition: border-color 0.15s;
}
.fp-psi-score-card:hover { border-color: var(--fp-accent); }
.fp-psi-score-label { font-size: 12px; color: var(--fp-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.fp-psi-device-tab { display: flex; gap: 8px; margin-bottom: 20px; }
.fp-cwv-card {
  background: var(--fp-bg-card); border: 1px solid var(--fp-border);
  border-radius: 12px; padding: 18px; position: relative; overflow: hidden;
}
.fp-cwv-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
}
.fp-cwv-badge--good { background: rgba(16,185,129,0.13); color: #10b981; }
.fp-cwv-badge--needs-improvement { background: rgba(245,158,11,0.13); color: #f59e0b; }
.fp-cwv-badge--poor { background: rgba(239,68,68,0.13); color: #ef4444; }
.fp-cwv-value { font-size: 28px; font-weight: 800; color: var(--fp-text); line-height: 1; }
.fp-cwv-unit { font-size: 13px; color: var(--fp-text-muted); margin-left: 3px; }
.fp-cwv-threshold-bar {
  height: 6px; border-radius: 3px; width: 100%;
  background: linear-gradient(to right, #10b981 0%,#10b981 40%,#f59e0b 40%,#f59e0b 70%,#ef4444 70%);
  margin-top: 12px; position: relative;
}
.fp-cwv-threshold-marker {
  position: absolute; top: -4px; width: 14px; height: 14px;
  border-radius: 50%; border: 2px solid var(--fp-bg-panel);
  transform: translateX(-50%); transition: left 0.3s ease;
}
.fp-psi-opportunity {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--fp-bg-card); border: 1px solid var(--fp-border);
  border-radius: 10px; transition: border-color 0.15s; cursor: default;
}
.fp-psi-opportunity:hover { border-color: rgba(37,99,235,0.4); }
.fp-psi-opp-icon {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px;
}
.fp-psi-savings { font-size: 12px; color: #10b981; font-weight: 700; white-space: nowrap; }
.fp-psi-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 60px 20px;
}
.fp-psi-loading--inline {
  display: none;
  flex-direction: row;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-top: 10px;
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  background: var(--fp-inner-card);
}
.fp-psi-loading--inline.is-active { display: flex; }
.fp-psi-spinner {
  width: 48px; height: 48px; border-radius: 50%;
  border: 3px solid var(--fp-border); border-top-color: var(--fp-accent);
  animation: fpSpin 1s linear infinite;
  -webkit-animation: fpSpin 1s linear infinite;
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transition: none;
}
.fp-psi-spinner--inline { width: 20px; height: 20px; border-width: 2px; flex: 0 0 auto; }
/* Linear (non-circular) PSI loading indicator */
.fp-psi-linear-track {
  width: 100%; height: 4px; border-radius: 2px; overflow: hidden;
  background: var(--fp-border);
  position: relative;
}
.fp-psi-linear-bar {
  position: absolute; top: 0; left: 0; height: 100%; width: 40%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--fp-accent, #2563EB), #818cf8);
  animation: fpPsiLinear 1.4s ease-in-out infinite;
  will-change: transform;
}
@keyframes fpPsiLinear {
  0% { transform: translateX(-100%); }
  60% { transform: translateX(180%); }
  100% { transform: translateX(260%); }
}
@-webkit-keyframes fpPsiLinear {
  0% { -webkit-transform: translateX(-100%); }
  60% { -webkit-transform: translateX(180%); }
  100% { -webkit-transform: translateX(260%); }
}
@-webkit-keyframes fpSpin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes fpSpin { to { transform: rotate(360deg); } }
/* Alias used by inline SVG spinners (animation:spin) — must live in CSS, not JS-injected */
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Page-transition loading bar (top of screen) */
.fp-nav-loading {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 9999;
  background: linear-gradient(90deg, var(--fp-accent, #2563EB), #818cf8);
  -webkit-animation: fpNavLoad 0.5s ease-out forwards;
  animation: fpNavLoad 0.5s ease-out forwards;
}
@-webkit-keyframes fpNavLoad { from { width: 0; opacity: 1; } 80% { width: 90%; opacity: 1; } to { width: 100%; opacity: 0; } }
@keyframes fpNavLoad { from { width: 0; opacity: 1; } 80% { width: 90%; opacity: 1; } to { width: 100%; opacity: 0; } }
.fp-psi-sparkline { display: inline-block; vertical-align: middle; }
.fp-psi-history-chart { width: 100%; height: 120px; }

/* ═══════════════════════════════════════════════════════════════════════════
   GITHUB INTEGRATION — Pages & Components
   ═══════════════════════════════════════════════════════════════════════════ */
.fp-gh-connect-card {
  background: linear-gradient(135deg, rgba(36,41,46,0.6), rgba(13,17,23,0.8));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--fp-radius-xl);
  padding: 40px 32px;
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.fp-gh-connect-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(37,99,235,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.fp-gh-logo { width: 64px; height: 64px; color: var(--fp-text-muted); margin-bottom: 20px; }
.fp-gh-feature-list {
  display: flex; flex-direction: column; gap: 10px;
  text-align: left; margin-bottom: 28px;
}
.fp-gh-feature-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.06);
}
.fp-gh-feature-icon { font-size: 20px; width: 28px; text-align: center; flex-shrink: 0; }
.fp-gh-repo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.fp-gh-repo-card {
  padding: 16px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
  cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.fp-gh-repo-card:hover {
  border-color: rgba(37,99,235,0.4);
  background: rgba(37,99,235,0.04);
}
.fp-gh-health-ring { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
.fp-gh-health-score {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.fp-issue-card {
  padding: 14px; border-radius: 10px; border-left: 3px solid transparent;
  background: rgba(255,255,255,0.02);
}
.fp-issue-card--error   { border-left-color: #ef4444; background: rgba(239,68,68,0.06); }
.fp-issue-card--warning { border-left-color: #f59e0b; background: rgba(245,158,11,0.06); }
.fp-issue-card--info    { border-left-color: #3b82f6; background: rgba(59,130,246,0.06); }
.fp-issue-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: 20px; flex-shrink: 0;
}
.fp-issue-fix {
  background: rgba(255,255,255,0.04); border-radius: 8px;
  padding: 10px 12px; margin-top: 8px;
  font-size: 11px; font-family: var(--fp-font-mono, monospace);
  color: var(--fp-text-soft); white-space: pre-wrap; word-break: break-all;
}
.fp-deploy-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.02); border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
}
.fp-deploy-row:hover { background: rgba(255,255,255,0.04); }
.fp-deploy-status {
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fp-health-breakdown {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 6px; margin-bottom: 10px;
}
.fp-health-dimension { text-align: center; }
.fp-health-dimension-bar {
  height: 3px; background: rgba(255,255,255,0.06);
  border-radius: 2px; margin-top: 3px; overflow: hidden;
}
.fp-health-dimension-fill { height: 100%; border-radius: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   BILLING — Pricing grid, usage bars, invoices table, trial banner
   ═══════════════════════════════════════════════════════════════════════════ */
.fp-pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-bottom: 24px;
}
.fp-pricing-card {
  border-radius: 18px; border: 2px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
  padding: 24px 20px; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 0.2s, background 0.2s;
}
.fp-pricing-card--current {
  border-color: var(--fp-accent);
  background: rgba(37,99,235,0.06);
}
.fp-pricing-card--popular::before {
  content: 'Recommandé';
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  color: #fff; padding: 4px 16px;
  border-radius: 0 0 12px 12px;
}
.fp-pricing-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 4px;
}
.fp-pricing-name {
  font-size: 22px; font-weight: 900; color: var(--fp-text);
  font-family: var(--fp-font-head); margin-bottom: 2px;
}
.fp-pricing-tagline { font-size: 11px; color: var(--fp-text-muted); margin-bottom: 16px; }
.fp-pricing-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 16px; }
.fp-pricing-amount { font-size: 38px; font-weight: 900; font-family: var(--fp-font-head); }
.fp-pricing-period { font-size: 12px; color: var(--fp-text-faint); }
.fp-pricing-save {
  font-size: 10px; font-weight: 700; color: #22c55e;
  background: rgba(34,197,94,0.12); padding: 2px 8px;
  border-radius: 20px; margin-left: 4px; align-self: center;
}
.fp-pricing-features { display: flex; flex-direction: column; gap: 6px; flex: 1; margin-bottom: 18px; }
.fp-pricing-feature {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 11px; color: var(--fp-text-soft);
}
.fp-pricing-feature--locked { color: var(--fp-text-faint); }
.fp-pricing-feature-icon { flex-shrink: 0; margin-top: 1px; }
.fp-comparison-table { width: 100%; border-collapse: collapse; }
.fp-comparison-table th {
  text-align: center; padding: 10px 14px;
  font-size: 12px; font-weight: 800;
  border-bottom: 1px solid var(--fp-border);
}
.fp-comparison-table td {
  padding: 8px 14px;
  font-size: 11px;
  border-top: 1px solid var(--fp-border);
}
.fp-comparison-table tr:nth-child(even) td { background: var(--fp-bg-subtle); }
.fp-comparison-group td {
  padding: 8px 14px 4px;
  font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--fp-text-faint);
  background: var(--fp-bg-subtle);
}
.fp-billing-toggle {
  display: flex; align-items: center; gap: 10px;
  background: var(--fp-bg-inset);
  border-radius: 12px; padding: 6px 12px;
  font-size: 12px;
}
.fp-billing-toggle__slider {
  width: 36px; height: 20px; border-radius: 10px;
  background: rgba(127,127,127,0.25);
  position: relative; cursor: pointer; transition: background 0.2s;
}
.fp-billing-toggle__slider--on { background: var(--fp-accent); }
.fp-billing-toggle__knob {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform 0.2s;
}
.fp-billing-toggle__slider--on .fp-billing-toggle__knob { transform: translateX(16px); }
.fp-usage-bar { position: relative; height: 8px; border-radius: 4px; background: var(--fp-bg-track, rgba(127,127,127,0.15)); overflow: hidden; }
.fp-usage-bar__fill { height: 100%; border-radius: 4px; transition: width 0.6s cubic-bezier(.16,1,.3,1); }
.fp-usage-bar__fill--warning { background: #f59e0b; }
.fp-usage-bar__fill--danger  { background: #ef4444; }
.fp-usage-bar__fill--ok      { background: var(--fp-accent); }
.fp-trial-banner {
  background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(124,58,237,0.08));
  border: 1px solid rgba(37,99,235,0.3);
  border-radius: var(--fp-radius-lg); padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px;
}
.fp-trial-days {
  font-size: 32px; font-weight: 900; color: var(--fp-accent);
  font-family: var(--fp-font-head); line-height: 1;
}
.fp-payment-failed-banner {
  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.35);
  border-radius: var(--fp-radius-lg); padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px;
}
.fp-invoices-table { width: 100%; border-collapse: collapse; }
.fp-invoices-table th {
  text-align: left; padding: 8px 12px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--fp-text-faint);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.fp-invoices-table td { padding: 10px 12px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.04); }
.fp-invoices-table tr:hover td { background: rgba(255,255,255,0.02); }
.fp-addon-card {
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; transition: border-color 0.2s;
}
.fp-addon-card:hover { border-color: rgba(37,99,235,0.35); }
.fp-addon-icon { font-size: 24px; flex-shrink: 0; }
.fp-addon-info { flex: 1; min-width: 0; }
.fp-addon-name { font-size: 13px; font-weight: 700; color: var(--fp-text); }
.fp-addon-desc { font-size: 11px; color: var(--fp-text-muted); margin-top: 2px; }
.fp-addon-price { text-align: right; flex-shrink: 0; }
.fp-addon-amount { font-size: 16px; font-weight: 900; color: var(--fp-accent); }
.fp-addon-unit { font-size: 10px; color: var(--fp-text-faint); }
.fp-mrr-chart { height: 120px; position: relative; display: flex; align-items: flex-end; gap: 6px; }
.fp-mrr-bar { flex: 1; border-radius: 4px 4px 0 0; transition: height 0.4s; background: rgba(37,99,235,0.5); min-height: 4px; }
.fp-mrr-bar:hover { background: rgba(37,99,235,0.8); }
.fp-coupon-input {
  display: flex; gap: 8px; align-items: center;
  background: rgba(255,255,255,0.04); border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1); padding: 8px 12px;
}
.fp-coupon-input input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--fp-text); font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
}
.fp-coupon-input input::placeholder { color: var(--fp-text-faint); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Billing sub-route: invoices */
.fp-invoice-status {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
}
.fp-invoice-status--paid   { background: rgba(34,197,94,0.15); color: #22c55e; }
.fp-invoice-status--open   { background: rgba(245,158,11,0.15); color: #f59e0b; }
.fp-invoice-status--failed { background: rgba(239,68,68,0.15); color: #ef4444; }

/* ═══════════════════════════════════════════════════════════════════
   GOOGLE SEARCH CONSOLE STYLES
   ═══════════════════════════════════════════════════════════════════ */

.fp-gsc-connect-card {
  max-width: 520px;
  margin: 40px auto;
  background: var(--fp-surface-1);
  border: 1px solid rgba(66, 133, 244, 0.25);
  border-radius: var(--fp-radius-xl);
  padding: 40px 36px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(66, 133, 244, 0.08);
}
.fp-gsc-connect-icon {
  width: 80px; height: 80px;
  margin: 0 auto 20px;
  background: rgba(66, 133, 244, 0.08);
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
}
.fp-gsc-connect-title {
  font-size: 20px; font-weight: 800;
  color: var(--fp-text); margin-bottom: 10px;
  font-family: var(--fp-font-head);
}
.fp-gsc-connect-desc {
  font-size: 13px; color: var(--fp-text-muted);
  line-height: 1.6; margin-bottom: 24px;
}
.fp-gsc-connect-features {
  text-align: left;
  display: flex; flex-direction: column; gap: 8px;
  margin: 0 auto; max-width: 340px;
}
.fp-gsc-connect-feature {
  font-size: 12px; color: var(--fp-text-soft);
  display: flex; align-items: center; gap: 8px;
}

.fp-gsc-site-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.fp-gsc-chart {
  width: 100%; min-height: 160px;
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  padding: 8px;
  overflow: hidden;
}

.fp-gsc-kw-table {
  display: flex; flex-direction: column; gap: 0;
}
.fp-gsc-table-header {
  display: grid;
  grid-template-columns: 1fr 80px 80px 70px 70px;
  gap: 8px;
  padding: 6px 10px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--fp-text-faint);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.fp-gsc-table-row {
  display: grid;
  grid-template-columns: 1fr 80px 80px 70px 70px;
  gap: 8px;
  padding: 7px 10px;
  border-top: 1px solid rgba(255,255,255,0.03);
  font-size: 12px;
  transition: background 0.15s;
}
.fp-gsc-table-row:hover { background: rgba(255,255,255,0.03); }
.fp-gsc-table-header span:not(:first-child),
.fp-gsc-table-row span:not(:first-child) {
  text-align: right;
}

/* Integration status cards in settings */
.fp-integration-card {
  padding: 16px 18px;
  border-radius: var(--fp-radius-lg);
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--fp-bg-card);
  display: flex; align-items: center; gap: 14px;
  transition: border-color 0.2s, background-color 0.2s;
}
.fp-integration-card:hover { border-color: rgba(255,255,255,0.15); background: var(--fp-bg-card-hover); }
.fp-integration-card.connected { border-color: rgba(34,197,94,0.25); background: rgba(34,197,94,0.03); }
.fp-integration-card.error    { border-color: rgba(239,68,68,0.25); background: rgba(239,68,68,0.03); }
.fp-integration-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.fp-integration-info { flex: 1; min-width: 0; }
.fp-integration-name {
  font-size: 13px; font-weight: 700; color: var(--fp-text); margin-bottom: 2px;
}
.fp-integration-status {
  font-size: 11px; color: var(--fp-text-muted);
}
.fp-integration-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
}
.fp-integration-badge.ok      { background: rgba(34,197,94,0.15); color: #22c55e; }
.fp-integration-badge.pending { background: rgba(245,158,11,0.15); color: #f59e0b; }
.fp-integration-badge.off     { background: rgba(100,116,139,0.15); color: #94a3b8; }

/* GSC position badge colors */
.fp-gsc-pos-1  { color: #22c55e; }
.fp-gsc-pos-10 { color: #4ade80; }
.fp-gsc-pos-20 { color: #f59e0b; }
.fp-gsc-pos-50 { color: #ef4444; }

/* Light theme overrides */
[data-theme="light"] .fp-gsc-connect-card { background: #fff; border-color: rgba(66,133,244,0.3); box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
[data-theme="light"] .fp-gsc-connect-icon { background: rgba(66,133,244,0.06); }
[data-theme="light"] .fp-gsc-chart { background: rgba(0,0,0,0.02); }
[data-theme="light"] .fp-gsc-table-row:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] .fp-integration-card { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .fp-integration-card.connected { background: rgba(34,197,94,0.03); }

/* ════════════════════════════════════════════════════════════════════
   FLOWPOINT — AI PANEL LAYOUT SHIFT & RESPONSIVE FIXES v2.1
   Appended — do not edit above this line
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Main wrap transition when AI panel opens ───────────────────── */
.fp-main-wrap {
  transition: padding-right 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
body.fp-ai-open .fp-main-wrap {
  padding-right: 420px;
}

/* ── 2. Grid adaptations when AI panel open ────────────────────────── */
/* Health gauge: stay 4 cols on wide, drop to 2 on narrow */
body.fp-ai-open .fp-health-gauge-grid {
  grid-template-columns: repeat(4, 1fr);
}
/* Stat row: keep 4 cols if room */
body.fp-ai-open .fp-stat-row {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1400px) {
  body.fp-ai-open .fp-health-gauge-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  body.fp-ai-open .fp-forecast-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 1200px) {
  /* Force 4→2 col for health gauges when AI panel uses viewport space */
  body.fp-ai-open .fp-health-gauge-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  body.fp-ai-open .fp-grid-2 {
    grid-template-columns: 1fr !important;
  }
  body.fp-ai-open .fp-grid-3 {
    grid-template-columns: 1fr 1fr !important;
  }
  body.fp-ai-open .fp-stat-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  body.fp-ai-open .fp-quick-actions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  body.fp-ai-open .fp-ws-map-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 900px) {
  body.fp-ai-open .fp-ws-map-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 3. Hero card — make it more visible against page background ──── */
.fp-hero-cmd {
  border-color: rgba(37, 99, 235, 0.3) !important;
  box-shadow: 0 4px 32px rgba(37, 99, 235, 0.08), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ── 4. Gauge card minimum sizing ───────────────────────────────────── */
.fp-gauge-card {
  min-width: 0;
  overflow: hidden;
}
.fp-gauge-card svg {
  width: 100%;
  max-width: 62px;
}

/* ── 5. AI panel backdrop when open ─────────────────────────────────── */
body.fp-ai-open::after {
  content: '';
  position: fixed;
  inset: 0;
  right: 420px;
  background: transparent;
  pointer-events: none;
  z-index: 1199;
}

/* ── 6. Stat card: prevent overflow on any viewport ─────────────────── */
.fp-stat-card {
  min-width: 0;
}
.fp-stat-card-value {
  font-size: clamp(18px, 2.2vw, 28px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fp-stat-card-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 7. Fix fp-grid-2 on medium screens without AI panel ────────────── */
@media (max-width: 1100px) {
  .fp-grid-2 { grid-template-columns: 1fr; }
  .fp-health-gauge-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .fp-health-gauge-grid { grid-template-columns: repeat(2, 1fr); }
  .fp-ws-map-grid       { grid-template-columns: repeat(2, 1fr); }
  .fp-quick-actions-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ── 8. Light theme overrides for hero card ─────────────────────────── */
[data-theme="light"] .fp-hero-cmd {
  background: linear-gradient(135deg, rgba(248,250,255,0.98), rgba(237,242,255,0.95)) !important;
  border-color: rgba(37,99,235,0.25) !important;
}
[data-theme="light"] .fp-gauge-card {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.07) !important;
}

/* ── 9. Overview section headers ────────────────────────────────────── */
.fp-section-kpi {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fp-text-faint);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--fp-border);
}

/* ── 10. Skeleton loader ─────────────────────────────────────────────── */
/* Subtle pulse keyframe — no horizontal wave, just a slow opacity breath */
@keyframes fpSkeleton {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 0.65; }
}
.fp-skeleton {
  background: rgba(255,255,255,0.06);
  animation: fpSkeleton 2.8s ease-in-out infinite;
  border-radius: 6px;
}
[data-theme="light"] .fp-skeleton {
  background: rgba(0,0,0,0.07);
  animation: fpSkeleton 2.8s ease-in-out infinite;
}
.fp-skeleton-text  { height: 12px; margin-bottom: 8px; }
.fp-skeleton-title { height: 20px; width: 60%; margin-bottom: 12px; }
.fp-skeleton-card  { height: 100px; border-radius: var(--fp-radius-lg); }

/* ── 11. Reconnect / stale data banner ──────────────────────────────── */
.fp-stale-banner {
  display: flex; align-items: center; gap: 10px;
  background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.25);
  border-radius: var(--fp-radius-md); padding: 8px 14px;
  font-size: 12px; color: var(--fp-warning); margin-bottom: 14px;
}
.fp-offline-banner {
  display: flex; align-items: center; gap: 10px;
  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25);
  border-radius: var(--fp-radius-md); padding: 8px 14px;
  font-size: 12px; color: var(--fp-danger); margin-bottom: 14px;
}

/* ── 12. Quota progress bar enhancement ─────────────────────────────── */
.fp-quota-bar-track {
  height: 6px; border-radius: 99px;
  background: var(--fp-track); overflow: hidden;
}
.fp-quota-bar-fill {
  height: 100%; border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.16,1,0.3,1);
}
.fp-quota-bar-fill.warn   { background: var(--fp-warning); }
.fp-quota-bar-fill.danger { background: var(--fp-danger); }
.fp-quota-bar-fill.ok     { background: var(--fp-success); }

/* ── 13. Fix AI chat panel z-index stacking ─────────────────────────── */
.fp-ai-chat-panel { z-index: 1300; }
.fp-topbar        { z-index: 1200; }
.fp-sidebar       { z-index: 1100; }
.fp-float-panel   { z-index: 1400; }


/* ════════════════════════════════════════════════════════════════════
   VISIBILITY BOOST v2.2 — Render les cartes visibles en dark mode
   Les backgrounds rgba(255,255,255,0.028) sont quasi-invisibles sur #050810
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero card : gradient plus contrasté (dark mode only) ────────── */
[data-theme="dark"] .fp-hero-cmd {
  background: linear-gradient(135deg, #0c1428 0%, #101c3a 100%) !important;
  border: 1px solid rgba(37, 99, 235, 0.4) !important;
  box-shadow: 0 8px 40px rgba(37, 99, 235, 0.12), 0 1px 0 rgba(255,255,255,0.06) inset !important;
}

/* ── Gauge cards inside hero (dark mode only) ────────────────────── */
[data-theme="dark"] .fp-gauge-card {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .fp-gauge-card:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
}

/* ── Standard cards (dark mode only) ────────────────────────────── */
[data-theme="dark"] .fp-card {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .fp-card:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* ── Stat cards (dark mode only) ─────────────────────────────────── */
[data-theme="dark"] .fp-stat-card {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .fp-stat-card:hover {
  background: rgba(255, 255, 255, 0.10) !important;
}

/* ── Table rows & inline cards ───────────────────────────────────── */
.fp-table-row:hover { background: rgba(255,255,255,0.04) !important; }

/* ── Light theme overrides ───────────────────────────────────────── */
[data-theme="light"] .fp-hero-cmd {
  background: linear-gradient(135deg, #eef3ff 0%, #e4ecff 100%) !important;
  border-color: rgba(37,99,235,0.22) !important;
  box-shadow: 0 4px 24px rgba(37,99,235,0.06) !important;
}
[data-theme="light"] .fp-gauge-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .fp-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .fp-stat-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* ── AI Panel: padding-right on main wrap — override ─────────────── */
/* Ensure padding-right is applied even if body class races */
.fp-main-wrap {
  will-change: padding-right;
}


/* ════════════════════════════════════════════════════════════════════
   LIGHT MODE FIX v3.0 — Bordures, contours et fonds visibles
   Corrige tous les rgba(255,255,255,…) invisibles sur fond clair
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Variables renforcées ──────────────────────────────────────── */
[data-theme="light"] {
  --fp-border:        rgba(0,0,0,0.13);
  --fp-border-hover:  rgba(0,0,0,0.22);
  --fp-border-active: rgba(37,99,235,0.45);
  --fp-border-subtle: rgba(0,0,0,0.08);
  --fp-bg-track:      rgba(0,0,0,0.08);
  --fp-bg-inset:      rgba(0,0,0,0.05);
  --fp-bg-subtle:     rgba(0,0,0,0.03);
  --fp-bg-row-hover:  rgba(37,99,235,0.05);
  --fp-bg-input:      rgba(0,0,0,0.04);
  --fp-shadow-sm:     0 2px 8px rgba(0,0,0,0.1);
  --fp-shadow-md:     0 8px 24px rgba(0,0,0,0.14);
  --fp-shadow-lg:     0 16px 48px rgba(0,0,0,0.18);
}

/* ── 2. Layout — sidebar, topbar, séparateurs ────────────────────── */
[data-theme="light"] .fp-sidebar {
  border-right: 1px solid rgba(0,0,0,0.12);
  box-shadow: 2px 0 12px rgba(0,0,0,0.06);
}
[data-theme="light"] .fp-sidebar-footer {
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.10);
}
[data-theme="light"] .fp-sidebar-user {
  border-top: 1px solid rgba(0,0,0,0.10);
}
[data-theme="light"] .fp-topbar {
  border-bottom: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
[data-theme="light"] .fp-topbar-status {
  background: rgba(34,197,94,0.08);
  border-color: rgba(34,197,94,0.35);
}
[data-theme="light"] .fp-topbar-status.down {
  background: rgba(239,68,68,0.07);
  border-color: rgba(239,68,68,0.35);
}

/* ── 3. Navigation ───────────────────────────────────────────────── */
[data-theme="light"] .fp-nav-item:hover {
  background: rgba(0,0,0,0.05);
}
[data-theme="light"] .fp-nav-item.active {
  background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(37,99,235,0.07));
  border-color: rgba(37,99,235,0.35);
  box-shadow: 0 2px 8px rgba(37,99,235,0.10);
}

/* ── 4. Barres de progression et tracks ──────────────────────────── */
[data-theme="light"] .fp-usage-bar-track,
[data-theme="light"] .fp-score-bar-track,
[data-theme="light"] .fp-progress-track,
[data-theme="light"] .fp-quota-bar-track {
  background: rgba(0,0,0,0.10);
}
[data-theme="light"] .fp-funnel-bar-wrap {
  background: rgba(0,0,0,0.08) !important;
}

/* ── 5. Tables ───────────────────────────────────────────────────── */
[data-theme="light"] .fp-table td {
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
[data-theme="light"] .fp-table th {
  border-bottom: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.02);
}
[data-theme="light"] .fp-table tbody tr:hover {
  background: rgba(37,99,235,0.05);
}
[data-theme="light"] .fp-table-wrap {
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* ── 6. Cards & Gauge cards ──────────────────────────────────────── */
[data-theme="light"] .fp-card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}
[data-theme="light"] .fp-card:hover {
  border-color: rgba(37,99,235,0.30) !important;
  box-shadow: 0 4px 16px rgba(37,99,235,0.10);
}
[data-theme="light"] .fp-kpi-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}
[data-theme="light"] .fp-kpi-card:hover {
  border-color: rgba(37,99,235,0.30);
  box-shadow: 0 4px 16px rgba(37,99,235,0.10);
}
[data-theme="light"] .fp-gauge-card {
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
[data-theme="light"] .fp-gauge-card:hover {
  border-color: rgba(37,99,235,0.28) !important;
}
[data-theme="light"] .fp-monitor-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}
[data-theme="light"] .fp-monitor-card:hover {
  border-color: rgba(37,99,235,0.30);
}
[data-theme="light"] .fp-monitor-card.down {
  border-color: rgba(239,68,68,0.35);
}
[data-theme="light"] .fp-kanban-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
[data-theme="light"] .fp-kanban-card:hover {
  border-color: rgba(37,99,235,0.30);
}
[data-theme="light"] .fp-site-sparkline-card {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.12);
}

/* ── 7. Kanban col count pill ─────────────────────────────────────── */
[data-theme="light"] .fp-kanban-col-count {
  background: rgba(0,0,0,0.07);
  color: #475569;
}

/* ── 8. Hero card ────────────────────────────────────────────────── */
[data-theme="light"] .fp-hero-cmd {
  background: linear-gradient(135deg, #eef3ff 0%, #e4ecff 100%) !important;
  border: 1px solid rgba(37,99,235,0.22) !important;
  box-shadow: 0 4px 24px rgba(37,99,235,0.08) !important;
}

/* ── 9. Commande Palette ─────────────────────────────────────────── */
[data-theme="light"] .fp-cmd-overlay {
  background: rgba(15,23,42,0.45);
}
[data-theme="light"] .fp-cmd-box {
  background: #ffffff;
  border: 1px solid rgba(37,99,235,0.25);
  box-shadow: 0 24px 80px rgba(0,0,0,0.20);
}
[data-theme="light"] .fp-cmd-input {
  color: #0f172a;
}
[data-theme="light"] .fp-cmd-input-wrap {
  border-bottom: 1px solid rgba(0,0,0,0.10);
}
[data-theme="light"] .fp-cmd-esc {
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.14);
  color: #64748b;
}
[data-theme="light"] .fp-cmd-item-icon {
  background: rgba(0,0,0,0.05);
}
[data-theme="light"] .fp-cmd-item.selected .fp-cmd-item-icon,
[data-theme="light"] .fp-cmd-item:hover .fp-cmd-item-icon {
  background: rgba(37,99,235,0.12);
}
[data-theme="light"] .fp-cmd-item-shortcut {
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.12);
  color: #64748b;
}
[data-theme="light"] .fp-cmd-footer {
  border-top: 1px solid rgba(0,0,0,0.10);
}
[data-theme="light"] .fp-cmd-item:hover,
[data-theme="light"] .fp-cmd-item.selected {
  background: rgba(37,99,235,0.07);
}

/* ── 10. Context Menu ────────────────────────────────────────────── */
[data-theme="light"] .fp-ctx-menu {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.14);
  box-shadow: 0 8px 32px rgba(0,0,0,0.16);
}
[data-theme="light"] .fp-ctx-divider {
  background: rgba(0,0,0,0.10);
}
[data-theme="light"] .fp-ctx-item:hover {
  background: rgba(37,99,235,0.07);
}

/* ── 11. Floating Panel (détails audits, monitors…) ──────────────── */
[data-theme="light"] .fp-float-panel {
  background: #f8faff;
  border-left: 1px solid rgba(0,0,0,0.14);
  box-shadow: -8px 0 40px rgba(0,0,0,0.14);
}
[data-theme="light"] .fp-float-panel-header {
  border-bottom: 1px solid rgba(0,0,0,0.10);
  background: #ffffff;
}

/* ── 12. Notifications dropdown ──────────────────────────────────── */
[data-theme="light"] .fp-notif-dropdown {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.13);
  box-shadow: 0 16px 48px rgba(0,0,0,0.16);
}
[data-theme="light"] .fp-notif-header {
  border-bottom: 1px solid rgba(0,0,0,0.10);
}
[data-theme="light"] .fp-notif-item {
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
[data-theme="light"] .fp-notif-item:hover {
  background: rgba(37,99,235,0.05);
}
[data-theme="light"] .fp-notif-item.unread {
  background: rgba(37,99,235,0.04);
}

/* ── 13. Modal ───────────────────────────────────────────────────── */
[data-theme="light"] .fp-modal {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.14);
  box-shadow: 0 24px 80px rgba(0,0,0,0.20);
}
[data-theme="light"] .fp-shortcut-row {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
[data-theme="light"] .fp-shortcut-keys kbd {
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.15);
  color: #334155;
}

/* ── 14. AI Chat ─────────────────────────────────────────────────── */
[data-theme="light"] .fp-ai-input-row {
  border-top: 1px solid rgba(0,0,0,0.10);
}
[data-theme="light"] .fp-ai-input {
  background: #f8faff;
  border: 1px solid rgba(37,99,235,0.25);
  color: #0f172a;
}
[data-theme="light"] .fp-ai-input:focus {
  border-color: rgba(37,99,235,0.50);
}
[data-theme="light"] .fp-ai-message.ai .fp-ai-bubble {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.10);
}
[data-theme="light"] .fp-ai-message.user .fp-ai-bubble {
  background: rgba(37,99,235,0.08);
  border-color: rgba(37,99,235,0.22);
}

/* ── 15. Checklist ───────────────────────────────────────────────── */
[data-theme="light"] .fp-check-box {
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.18);
}
[data-theme="light"] .fp-check-box.checked {
  background: rgba(34,197,94,0.12);
  border-color: var(--fp-success);
}

/* ── 16. Toggle (off state) ──────────────────────────────────────── */
[data-theme="light"] .fp-toggle {
  background: rgba(0,0,0,0.16);
}

/* ── 17. Boutons ghost ───────────────────────────────────────────── */
[data-theme="light"] .fp-btn-ghost {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.14);
  color: #334155;
}
[data-theme="light"] .fp-btn-ghost:hover {
  border-color: rgba(0,0,0,0.25);
  background: rgba(0,0,0,0.07);
  color: #0f172a;
}
[data-theme="light"] .fp-icon-btn {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.13);
}
[data-theme="light"] .fp-icon-btn:hover {
  border-color: rgba(37,99,235,0.40);
}

/* ── 18. Filter tabs & selects ───────────────────────────────────── */
[data-theme="light"] .fp-filter-tab {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.12);
  color: #475569;
}
[data-theme="light"] .fp-filter-tab:hover {
  background: rgba(0,0,0,0.07);
  border-color: rgba(0,0,0,0.20);
  color: #0f172a;
}
[data-theme="light"] .fp-filter-tab.active {
  background: rgba(37,99,235,0.10);
  border-color: rgba(37,99,235,0.40);
  color: #1e40af;
}
[data-theme="light"] .fp-select {
  background: #ffffff;
  border-color: rgba(0,0,0,0.14);
  color: #0f172a;
}
[data-theme="light"] .fp-select option {
  background: #ffffff;
  color: #0f172a;
}
[data-theme="light"] .fp-search-input {
  background: #ffffff;
  border-color: rgba(0,0,0,0.14);
  color: #0f172a;
}
[data-theme="light"] .fp-search-trigger {
  background: #ffffff;
  border-color: rgba(0,0,0,0.14);
}

/* ── 19. Inputs formulaires ──────────────────────────────────────── */
[data-theme="light"] .fp-input {
  background: #ffffff;
  border-color: rgba(0,0,0,0.16);
  color: #0f172a;
}
[data-theme="light"] .fp-input:focus {
  border-color: rgba(37,99,235,0.50);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.10);
}

/* ── 20. Stat cards (sections performance) ───────────────────────── */
[data-theme="light"] .fp-stat-card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}

/* ── 21. Séparateurs inline (border-subtle) ──────────────────────── */
[data-theme="light"] [style*="border-top:1px solid rgba(255,255,255,0.05)"],
[data-theme="light"] [style*="border-top: 1px solid rgba(255,255,255,0.05)"] {
  border-top-color: rgba(0,0,0,0.10) !important;
}
[data-theme="light"] [style*="border-bottom:1px solid rgba(255,255,255,0.05)"],
[data-theme="light"] [style*="border-bottom: 1px solid rgba(255,255,255,0.05)"] {
  border-bottom-color: rgba(0,0,0,0.10) !important;
}

/* ── 22. Inline styles générés par JS ────────────────────────────── */
[data-theme="light"] div[style*="background:rgba(255,255,255,0.04)"],
[data-theme="light"] div[style*="background: rgba(255,255,255,0.04)"],
[data-theme="light"] span[style*="background:rgba(255,255,255,0.04)"],
[data-theme="light"] span[style*="background: rgba(255,255,255,0.04)"] {
  background: rgba(0,0,0,0.04) !important;
}
[data-theme="light"] div[style*="background:rgba(255,255,255,0.03)"],
[data-theme="light"] div[style*="background: rgba(255,255,255,0.03)"] {
  background: rgba(0,0,0,0.03) !important;
}
[data-theme="light"] div[style*="background:rgba(255,255,255,0.06)"],
[data-theme="light"] div[style*="background: rgba(255,255,255,0.06)"] {
  background: rgba(0,0,0,0.05) !important;
}
[data-theme="light"] div[style*="background:rgba(255,255,255,0.08)"],
[data-theme="light"] div[style*="background: rgba(255,255,255,0.08)"] {
  background: rgba(0,0,0,0.07) !important;
}
[data-theme="light"] div[style*="background:rgba(255,255,255,0.05)"],
[data-theme="light"] div[style*="background: rgba(255,255,255,0.05)"] {
  background: rgba(0,0,0,0.04) !important;
}
[data-theme="light"] div[style*="border:1px solid rgba(255,255,255,0.1)"],
[data-theme="light"] div[style*="border: 1px solid rgba(255,255,255,0.1)"],
[data-theme="light"] div[style*="border:1px solid rgba(255,255,255,0.12)"],
[data-theme="light"] div[style*="border: 1px solid rgba(255,255,255,0.12)"] {
  border-color: rgba(0,0,0,0.13) !important;
}

/* ── 22b. Séparateurs border-bottom 0.04 (lignes manquantes) ─────── */
[data-theme="light"] [style*="border-bottom:1px solid rgba(255,255,255,0.04)"],
[data-theme="light"] [style*="border-bottom: 1px solid rgba(255,255,255,0.04)"] {
  border-bottom-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] [style*="border-bottom:1px solid rgba(255,255,255,.04)"],
[data-theme="light"] [style*="border-bottom: 1px solid rgba(255,255,255,.04)"] {
  border-bottom-color: rgba(0,0,0,0.08) !important;
}
[data-theme="light"] [style*="border-bottom:1px solid rgba(255,255,255,0.07)"],
[data-theme="light"] [style*="border-bottom: 1px solid rgba(255,255,255,0.07)"] {
  border-bottom-color: rgba(0,0,0,0.09) !important;
}
[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.08)"],
[data-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.08)"] {
  border-color: rgba(0,0,0,0.10) !important;
}
[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.07)"],
[data-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.07)"] {
  border-color: rgba(0,0,0,0.09) !important;
}
[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.04)"],
[data-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.04)"] {
  border-color: rgba(0,0,0,0.09) !important;
}

/* ── 22c. Éléments grisés (arrondis + bordures) en mode clair ─────── */
[data-theme="light"] .fp-growth-city-row {
  background: rgba(0,0,0,0.025) !important;
  border-color: rgba(0,0,0,0.09) !important;
}
[data-theme="light"] .fp-card,
[data-theme="light"] .fp-card-sm,
[data-theme="light"] .fp-kpi-card,
[data-theme="light"] .fp-stat-card {
  border-radius: var(--fp-radius-lg) !important;
}
[data-theme="light"] div[style*="background:rgba(255,255,255,0.04)"],
[data-theme="light"] div[style*="background: rgba(255,255,255,0.04)"] {
  border-radius: 10px;
}
[data-theme="light"] div[style*="background:rgba(255,255,255,0.02)"],
[data-theme="light"] div[style*="background: rgba(255,255,255,0.02)"] {
  background: rgba(0,0,0,0.025) !important;
  border-radius: 8px;
}

/* ── 23. Scrollbar en mode clair ─────────────────────────────────── */
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.28);
}
[data-theme="light"] .fp-sidebar {
  scrollbar-color: rgba(0,0,0,0.18) transparent;
}

/* ── 24. Toast en mode clair ─────────────────────────────────────── */
[data-theme="light"] .fp-toast.success { background: #dcfce7; border-color: rgba(34,197,94,0.45); color: #14532d; }
[data-theme="light"] .fp-toast.error   { background: #fee2e2; border-color: rgba(239,68,68,0.45); color: #7f1d1d; }
[data-theme="light"] .fp-toast.warning { background: #fef9c3; border-color: rgba(245,158,11,0.45); color: #78350f; }
[data-theme="light"] .fp-toast.info    { background: #dbeafe; border-color: rgba(37,99,235,0.45); color: #1e3a5f; }

/* ── 25. Section header séparateurs ──────────────────────────────── */
[data-theme="light"] .fp-section-divider,
[data-theme="light"] hr {
  border-color: rgba(0,0,0,0.10);
}

/* ── 26. Code / mono blocs ───────────────────────────────────────── */
[data-theme="light"] code,
[data-theme="light"] pre {
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.10);
  color: #1e293b;
}

/* ── 27. Badge AI ────────────────────────────────────────────────── */
[data-theme="light"] .fp-badge-ai {
  background: rgba(37,99,235,0.10);
  border-color: rgba(37,99,235,0.30);
}

/* ── 28. Sub-nav active border ───────────────────────────────────── */
[data-theme="light"] .fp-sub-nav-item.active {
  background: #ffffff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.10);
  color: #1e40af;
  font-weight: 700;
}


/* ── EMOJI PICKER ───────────────────────────────────────────────── */
#fp-emoji-picker {
  position: fixed;
  z-index: 9999;
  background: var(--fp-bg-card);
  border: 1px solid var(--fp-border);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  width: 330px;
  max-height: 360px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: fpFadeIn 0.12s ease;
}
#fp-emoji-search {
  width: 100%;
  background: var(--fp-bg);
  border: 1px solid var(--fp-border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--fp-text);
  outline: none;
  box-sizing: border-box;
}
.fp-emoji-cats {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.fp-emoji-cats::-webkit-scrollbar { display: none; }
.fp-emoji-cat-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 3px 7px;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.1s;
}
.fp-emoji-cat-btn:hover,
.fp-emoji-cat-btn.active { background: rgba(255,255,255,0.08); border-color: var(--fp-border); }
.fp-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  overflow-y: auto;
  max-height: 240px;
  scrollbar-width: thin;
  scrollbar-color: var(--fp-border) transparent;
}
.fp-emoji-item {
  font-size: 20px;
  text-align: center;
  padding: 4px 2px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.08s;
  line-height: 1.3;
  user-select: none;
}
.fp-emoji-item:hover { background: rgba(255,255,255,0.1); }
[data-theme="light"] #fp-emoji-picker { box-shadow: 0 8px 32px rgba(0,0,0,0.18); }
[data-theme="light"] #fp-emoji-search { background: #f8fafc; color: #1e293b; }
[data-theme="light"] .fp-emoji-cat-btn:hover,
[data-theme="light"] .fp-emoji-cat-btn.active { background: rgba(0,0,0,0.06); }
[data-theme="light"] .fp-emoji-item:hover { background: rgba(0,0,0,0.07); }

/* ── LIVE COMMAND CENTER — uses fp-card background (light/dark handled by theme) ── */
.fp-live-cc {
  border: 1px solid rgba(37,99,235,0.18);
}
[data-theme="light"] .fp-live-cc {
  box-shadow: none !important;
}
[data-theme="light"] .fp-hero-cmd {
  box-shadow: 0 2px 12px rgba(37,99,235,0.08) !important;
}

/* ── LIGHT MODE FIXES — Multiple sections ────────────────────────── */

/* 1. Quick Actions Hub — bordures visibles en clair */
[data-theme="light"] .fp-quick-actions-grid button {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.10) !important;
}
[data-theme="light"] .fp-quick-actions-grid button:hover {
  background: rgba(37,99,235,0.04) !important;
  border-color: rgba(37,99,235,0.25) !important;
}

/* 2. Achievements — bordures visibles en clair */
[data-theme="light"] .fp-growth-badge-item.earned {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
[data-theme="light"] .fp-growth-badge-item.locked {
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06) !important;
}

/* 3. Kanban — supprimer les rectangles grisés derrière les colonnes */
[data-theme="light"] .fp-kanban-col {
  background: transparent !important;
  border: none !important;
}
.fp-kanban-col {
  background: transparent !important;
  border: none !important;
  display: flex;
  flex-direction: column;
}
.fp-kanban-col .fp-kanban-cards { flex: 1; }
.fp-kanban-col .fp-kanban-empty-state { align-self: stretch; min-height: unset; width: 100%; box-sizing: border-box; }

/* 4. Quick Wins impact items — bordures visibles en clair */
[data-theme="light"] .fp-qw-item {
  background: rgba(37,99,235,0.03) !important;
  border-color: rgba(0,0,0,0.09) !important;
}

/* 5. Bilan Q1 items — bordures visibles en clair */
[data-theme="light"] .fp-bilan-item {
  background: rgba(0,0,0,0.025) !important;
  border: 1px solid rgba(0,0,0,0.09) !important;
}

/* ── LATENCE TEMPS RÉEL — ms badge + DOWN badge ─────────────────── */
.fp-funnel-bar-wrap {
  position: relative;
}
.fp-lat-badge {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: var(--fp-bg-card);
  pointer-events: none;
  white-space: nowrap;
}
.fp-lat-down {
  color: #dc2626 !important;
  border-color: rgba(220,38,38,0.35) !important;
  background: rgba(239,68,68,0.08) !important;
}

/* ── ÉVOLUTION 30J — separateurs visibles en mode clair ─────────── */
[data-theme="light"] .fp-trend-chart-wrap {
  background: rgba(0,0,0,0.01);
  border-radius: 8px;
}

/* ── CODE BADGES — border-radius global ─────────────────────────── */
code {
  border-radius: 5px;
  padding: 1px 6px;
  display: inline-block;
  line-height: 1.5;
}
[data-theme="light"] code {
  border-radius: 5px !important;
}

/* ── FAB — animation ouvre de bas en haut ───────────────────────── */
@keyframes fab-item-in {
  from { opacity: 0; transform: translateY(14px) scale(0.88); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── TIMELINE — séparateurs entre items (mode clair) ────────────── */
[data-theme="light"] .fp-timeline-item {
  border-bottom: 1px solid rgba(0,0,0,0.07);
  padding-bottom: 14px;
  margin-bottom: 2px;
}
[data-theme="light"] .fp-timeline-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* ── CARTE DOMINATION — wireframe SVG lisible en clair ──────────── */
[data-theme="light"] .fp-domination-map-legend span {
  color: rgba(0,0,0,0.5) !important;
}

/* ── HEATMAP FRICTION SVG — textes lisibles en clair ───────────── */
[data-theme="light"] .fp-friction-heatmap-label {
  color: var(--fp-text-muted);
}

/* ── ACTIVITÉ ÉQUIPE — séparateurs entre items (dark + light) ───── */
.fp-timeline-item {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.fp-timeline-item:last-child {
  border-bottom: none;
}
[data-theme="light"] .fp-timeline-item {
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
[data-theme="light"] .fp-timeline-item:last-child {
  border-bottom: none;
}

/* ── PERMISSION MATRIX — ✗ visible en mode clair ────────────────── */
[data-theme="light"] .fp-perm-cross line {
  stroke: rgba(239,68,68,0.6);
}

/* ── CHAT BUBBLES — texte lisible sur fond bleu en mode clair ───── */
[data-theme="light"] .fp-chat-bubble-me {
  background: rgba(37,99,235,0.75) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ── CHECK BUTTON (remplace toggle dans apparence) ───────────────── */
.fp-check-btn {
  outline: none;
  transition: background 0.15s, border-color 0.15s;
}
.fp-check-btn:hover {
  border-color: #2563EB !important;
  opacity: 0.85;
}
[data-theme="light"] .fp-check-btn {
  border-color: rgba(0,0,0,0.2) !important;
  background: transparent !important;
}
[data-theme="light"] .fp-check-btn.on {
  background: #2563EB !important;
  border-color: #2563EB !important;
}

/* ── TOGGLE ON — bleu visible en mode clair ──────────────────────── */
[data-theme="light"] .fp-toggle.on {
  background: #2563EB !important;
}

/* ── PLAN CARDS — bordure visible en mode clair ─────────────────── */
[data-theme="light"] .fp-plan-border-alt {
  border-color: rgba(0,0,0,0.12) !important;
}

/* ── WORKSPACE HEALTH CARDS — fond visible en mode clair ────────── */
[data-theme="light"] .fp-health-sub-card {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.09) !important;
}

/* ── LAYOUT EDIT MODE ────────────────────────────────────────────── */
.fp-layout-edit .fp-card {
  outline: 2px dashed rgba(37,99,235,0.45) !important;
  outline-offset: 2px;
  cursor: default;
}
.fp-card-edit-toolbar {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 3px;
  z-index: 50;
  background: rgba(10,15,35,0.94);
  border: 1px solid rgba(37,99,235,0.5);
  border-radius: 9px;
  padding: 4px 5px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
[data-theme="light"] .fp-card-edit-toolbar {
  background: rgba(255,255,255,0.97);
  border-color: rgba(37,99,235,0.35);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.fp-cedit-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(37,99,235,0.3);
  background: rgba(37,99,235,0.08);
  color: #60a5fa;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
  line-height: 1;
}
.fp-cedit-btn:hover { background: rgba(37,99,235,0.22); color: #fff; }
[data-theme="light"] .fp-cedit-btn { color: #2563EB; background: rgba(37,99,235,0.07); }
[data-theme="light"] .fp-cedit-btn:hover { background: #2563EB; color: #fff; }
.fp-cedit-wide { border-color: rgba(6,182,212,0.4); color: #22d3ee; background: rgba(6,182,212,0.08); }
.fp-cedit-wide:hover { background: rgba(6,182,212,0.22); color: #fff; }
[data-theme="light"] .fp-cedit-wide { color: #0891b2; }
[data-theme="light"] .fp-cedit-wide:hover { background: #0891b2; color: #fff; }

/* BANNER */
.fp-layout-edit-banner {
  position: fixed;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(37,99,235,0.95);
  color: #fff;
  padding: 7px 18px;
  border-radius: 24px;
  font-size: 12px;
  font-weight: 600;
  z-index: 9999;
  display: none;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 24px rgba(37,99,235,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  white-space: nowrap;
  pointer-events: auto;
}
.fp-cedit-done {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 14px;
  padding: 3px 12px;
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  transition: background 0.12s;
}
.fp-cedit-done:hover { background: rgba(255,255,255,0.32); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE FIXES — Round 3 (phone layout corrections)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 1. Sparklines Executive Forecasting — scale to fit, no overflow */
.fp-forecast-grid .fp-sparkline {
  width: 100% !important;
  height: auto;
  display: block;
}

/* 2. Streak dots — wrap on small screens */
.fp-streak-dots {
  flex-wrap: wrap;
}

/* 3. Float panel header sticky on mobile so close button always reachable */
@media (max-width: 768px) {
  .fp-float-panel {
    display: flex;
    flex-direction: column;
    top: 0;
    bottom: 0;
  }
  .fp-float-panel-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #0a1020;
    flex-shrink: 0;
    padding: 16px 20px;
  }
  [data-theme="light"] .fp-float-panel-header {
    background: #f8fafc;
  }
  .fp-float-panel-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 4. Missions KPI grid — 2×2 on mobile */
  .fp-mission-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .fp-mission-kpi-grid .fp-card {
    padding: 10px 12px !important;
  }

  /* 5. Missions list — horizontal scroll */
  .fp-mission-list-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 6. Streak dots smaller on mobile */
  .fp-streak-dots > div {
    width: 8px !important;
    height: 8px !important;
  }

  /* 7. Executive Forecasting title — don't overflow header */
  .fp-forecast-grid {
    gap: 8px !important;
  }
  .fp-forecast-grid > div {
    padding: 10px !important;
  }

  /* 8. Live Command Center — compact on mobile */
  .fp-live-cc .fp-card-title {
    font-size: 13px;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE FIXES BATCH — v20260612
   All rules scoped to ≤640px unless noted
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Workspace Intelligence Map — "Voir plus" button hidden on desktop ── */
.fp-ws-see-more { display: none; }

@media (max-width: 640px) {
  /* Show "Voir plus" button, hide extra cards initially */
  .fp-ws-see-more { display: block !important; }
  .fp-ws-extra    { display: none; }

  /* ── 2. Addon grid → 2 cols on mobile ── */
  .fp-addon-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* Addon card — reduce padding so content fits */
  .fp-addon-grid > div {
    padding: 12px !important;
  }
  /* Addon card footer row: price + buttons.
     On narrow screens (≤640px) the price label and the button group
     can't sit side-by-side without overflow. Stack them vertically so
     neither "Ajouter +1" nor "Désactiver" is cut off. */
  .fp-addon-grid > div > div:last-child {
    flex-wrap: wrap !important;
    gap: 6px !important;
    row-gap: 8px !important;
  }
  /* Button group inside active quantity add-on card */
  .fp-addon-grid > div > div:last-child > div[style*="display:flex"] {
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .fp-addon-grid > div > div:last-child .fp-btn {
    flex: 1 1 auto;
    max-width: 100% !important;
    white-space: nowrap;
    min-height: 32px;
    touch-action: manipulation;
  }

  /* ── 3. Insights IA cards — action button moves inside content on mobile ── */
  .fp-insight-row-btn-desk { display: none !important; }
  .fp-insight-row-btn      { display: inline-flex !important; }

  /* ── 4. Payment methods — wrap buttons below card info on mobile ── */
  .fp-payment-row {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .fp-payment-info { min-width: calc(100% - 56px - 12px); }
  .fp-payment-btns {
    width: 100%;
    justify-content: flex-end;
  }

  /* ── 5. Score SEO Global — stack site blocks vertically ── */
  .fp-cmp-score-block {
    flex: 1 1 calc(50% - 7px);
    min-width: 0;
  }
  /* The container row already has gap:14px; stacking handled by flex-wrap */
  .fp-cmp-score-num { font-size: 36px !important; }

  /* ── 6. AI Credits plans — horizontal scroll on mobile ── */
  .fp-credit-plans-grid {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .fp-credit-plans-grid::-webkit-scrollbar { display: none; }
  .fp-credit-plans-grid > div {
    flex: 0 0 140px;
    min-width: 140px;
  }

  /* ── 7. Domination Concurrentielle — hide radar, ensure table scroll ── */
  .fp-growth-radar-wrap { display: none !important; }
  .fp-growth-comp-inner > div:first-child {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── 8. Geo zone table — headers don't wrap ── */
  .fp-geo-zone-table th,
  .fp-geo-zone-table td { white-space: nowrap; }

  /* Generic: any table inside overflow-x:auto → headers nowrap */
  div[style*="overflow-x:auto"] th,
  div[style*="overflow-x: auto"] th { white-space: nowrap; }

  /* ── 9. Float panel — full-screen overlay on mobile ── */
  .fp-float-panel-wrapper:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: flex-end;
  }
  .fp-float-panel {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .fp-float-panel-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
  }

  /* ── 10. Competitor table in Domination section — min-width so it scrolls ── */
  .fp-growth-comp-inner table { min-width: 420px; }

  /* ── 10c. Équipe members row — no overflow ── */
  .fp-team-member-row { min-width: 0; overflow: hidden; }
  .fp-team-member-row > div:first-child + div { min-width: 0; overflow: hidden; }
  .fp-team-member-row > div:first-child + div > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fp-grid-2-wide { overflow-x: hidden; }

  /* ── 11. Score comparison container — allow wrapping ── */
  div.fp-card > div[style*="display:flex;gap:14px"] {
    flex-wrap: wrap;
  }

  /* ── 12. Billing invoice table — horizontal scroll ── */
  div[style*="overflow-x:auto"] > .fp-data-table { min-width: 560px; }

  /* ── 13. General: buttons inside cards shouldn't overflow card edge ── */
  .fp-card .fp-btn { max-width: 100%; box-sizing: border-box; }

  /* ── 15. fp-opp-card icons centred vertically on mobile ── */
  .fp-opp-card { align-items: center; }

  /* ── 16. iOS Safari: explicit width + momentum scroll + scroll containment ── */
  .fp-table-wrap,
  div[style*="overflow-x:auto"],
  div[style*="overflow-x: auto"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* ── 17. Audit stat cards: keep 3 columns (compact) instead of stacking ── */
  .fp-stat-trio {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .fp-stat-trio .fp-card {
    padding: 10px 8px !important;
  }

  /* ── 18. fp-table inside fp-table-wrap: force min-width so horizontal scroll triggers ── */
  .fp-table-wrap .fp-table { min-width: 660px; }

  /* ── 19. fp-data-table inside scrollable divs: wider min-width for 8+ column tables ── */
  div[style*="overflow-x:auto"] > .fp-data-table,
  div[style*="overflow-x: auto"] > .fp-data-table { min-width: 680px; }

  /* ── 20. fp-sub-nav: enable smooth scroll on iOS Safari ── */
  .fp-sub-nav { -webkit-overflow-scrolling: touch !important; }

  /* ── 14. Category filter chips — wrap and smaller ── */
  div[style*="flex-wrap:wrap"] .fp-btn-ghost[style*="border-radius:20px"] {
    font-size: 10px !important;
    padding: 4px 9px !important;
  }
}

/* Desktop: insight row mobile button hidden */
@media (min-width: 641px) {
  .fp-insight-row-btn { display: none !important; }
  .fp-insight-row-btn-desk { display: inline-flex !important; }
}

/* ══ LIGHT MODE — Rounded corners for grey boxes ══════════════════
   Ensures all card-like containers show visible rounded corners
   in light mode regardless of base variable values.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="light"] .fp-card,
[data-theme="light"] .fp-card-sm,
[data-theme="light"] .fp-kpi-card,
[data-theme="light"] .fp-insight-card,
[data-theme="light"] .fp-alert-item,
[data-theme="light"] .fp-opp-card,
[data-theme="light"] .fp-table-wrap {
  border-radius: 12px;
}

[data-theme="light"] .fp-quota-bar {
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
}

[data-theme="light"] .fp-quota-track {
  background: rgba(0,0,0,0.07);
}

/* ══ ÉQUIPE PAGE — Mobile overflow fixes ══════════════════════════
   1. fp-grid-2-wide children must have min-width:0 so iOS Safari
      respects the 1fr grid cell width instead of intrinsic sizing.
   2. Chat header controls wrap on narrow screens.
   3. Permission matrix has its own scroll container (already in JS).
   ═══════════════════════════════════════════════════════════════ */
.fp-grid-2-wide > * {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Chat card inner flex column must also be constrained */
.fp-grid-2-wide > div {
  min-width: 0;
}

/* On mobile, chat header select + button wrap below the title */
@media (max-width: 768px) {
  .fp-grid-2-wide > * > .fp-card,
  .fp-grid-2-wide > * > .fp-table-wrap {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  /* Let the permission matrix scroll container work */
  .fp-grid-2-wide .fp-card [style*="overflow-x:auto"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ══ GLOBAL — Supprimer le bouton FAB bleu (mobile + desktop) ══════
   Le FAB est remplacé par les actions contextuelles dans les pages.
   ═══════════════════════════════════════════════════════════════ */
.fp-fab-wrap { display: none !important; }

/* ══ MOBILE — Corriger les panneaux Notifications + Messages ════════
   Position absolue → déborde à gauche sur viewport < 380px.
   On repasse en position fixed ancré sous la topbar.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Remonter le clock (activité) masqué par fix précédent */
  #fp-activity-btn { display: flex !important; }

  /* Dropdown notifications */
  .fp-notif-dropdown:not([hidden]) {
    position: fixed !important;
    top: 56px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 72px) !important;
    overflow-y: auto !important;
    z-index: 900 !important;
  }

  /* Dropdown messages */
  .fp-msg-dropdown:not([hidden]) {
    position: fixed !important;
    top: 56px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 72px) !important;
    overflow-y: auto !important;
    z-index: 900 !important;
  }
}

/* ══ ASSISTANT IA — Cases qui dépassent ══════════════════════════
   Boutons "Suggestions rapides" : wrapping activé via auto-fit
   dans le JS. Garantie CSS de sécurité.
   ═══════════════════════════════════════════════════════════════ */
.fp-btn { white-space: normal; }

/* ══ MOBILE — Voir plus / Voir moins (Prompt lib + Ctx workspace) =
   - fp-collapsible-m  : section pliable, masquée par défaut mobile
   - fp-expanded-m     : état déplié après clic
   - fp-show-more-mobile : bouton visible uniquement mobile
   ═══════════════════════════════════════════════════════════════ */
.fp-show-more-mobile {
  display: none;
}

@media (max-width: 768px) {
  /* Bibliothèque de prompts — collapsible */
  #fp-prompt-lib-body.fp-collapsible-m {
    max-height: 330px;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  #fp-prompt-lib-body.fp-collapsible-m.fp-expanded-m {
    max-height: 2000px;
  }

  /* Contexte workspace — collapsible (montre 2 rangées ≈ 4 items) */
  #fp-ctx-body.fp-collapsible-m {
    max-height: 116px;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  #fp-ctx-body.fp-collapsible-m.fp-expanded-m {
    max-height: 600px;
  }

  /* Bouton voir plus — visible sur mobile */
  .fp-show-more-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid var(--fp-border);
    background: transparent;
    color: var(--fp-accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
  }
  .fp-show-more-mobile:hover { background: rgba(37,99,235,0.08); }
}

/* ══ LIGHT MODE — Live Command Center rows lisibles ══════════════
   Les items ont background rgba(255,255,255,0.015) invisible sur
   fond clair. On leur donne un fond gris subtil + bordure visible.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="light"] .fp-live-ev {
  background: rgba(0,0,0,0.028) !important;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  border-left-width: 2px !important;
  filter: none;
}
[data-theme="light"] .fp-live-ev:last-child {
  border-bottom: none;
}

/* ══ LIGHT MODE — Arrondis complets sur tous les cadres gris ═════
   Complète le fix précédent avec les classes encore manquantes.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="light"] .fp-stat-card,
[data-theme="light"] .fp-activity-item,
[data-theme="light"] .fp-lib-card,
[data-theme="light"] .fp-lib-cat,
[data-theme="light"] .fp-notif-dropdown,
[data-theme="light"] .fp-msg-dropdown,
[data-theme="light"] .fp-plan-dropdown,
[data-theme="light"] .fp-opp-item,
[data-theme="light"] .fp-benchmark-row,
[data-theme="light"] .fp-audit-row,
[data-theme="light"] .fp-monitor-row,
[data-theme="light"] .fp-client-card,
[data-theme="light"] .fp-report-card,
[data-theme="light"] .fp-ws-module,
[data-theme="light"] .fp-perf-card,
[data-theme="light"] .fp-team-member-row {
  border-radius: 12px;
}

/* Éléments inline-styled qui utilisent border-radius explicite :
   on s'assure qu'aucun parent en light mode ne les écrase à 0 */
[data-theme="light"] .fp-card > div[style*="border-radius"],
[data-theme="light"] .fp-card-sm > div[style*="border-radius"],
[data-theme="light"] .fp-table-wrap > div[style*="border-radius"] {
  border-radius: inherit;
}

/* ══════════════════════════════════════════════════════════════════
   SCROLL TABLES — CORRECTIF DÉFINITIF (écrase tous les batchs précédents)

   PROBLÈME RACINE :
   1. Batch mobile @media 640px remet .fp-page { overflow-x: hidden }
      → iOS Safari voit un scroll container ancêtre et bloque les
        enfants overflow-x:auto → les tableaux ne défilent plus.
   2. FIX 12 applique display:block + overflow-x:auto à <table>
      → casse le rendu table + crée un double scroll container.
   3. Les div[overflow-x:auto] inline n'ont pas -webkit-overflow-scrolling.

   CORRECTIFS :
   A. .fp-page → overflow-x: clip sur TOUS les breakpoints (clip ne
      crée pas de scroll container, donc les enfants peuvent défiler)
   B. fp-data-table → display:table, min-width pour forcer le scroll
      sur le parent div, PAS sur la table elle-même
   C. Tous les wrappers inline overflow-x:auto → touch scrolling iOS
   D. .fp-card et .fp-card-sm → overflow:visible (ne bloquent pas
      les scroll containers enfants)
   ══════════════════════════════════════════════════════════════════ */

/* ── A. fp-page : clip sur tous les breakpoints ── */
.fp-page {
  overflow-x: clip !important;
}

/* ── B. fp-data-table : remettre display:table, forcer min-width ── */
@media (max-width: 768px) {
  .fp-data-table {
    display: table !important;      /* annule le display:block de FIX 12 */
    overflow-x: visible !important; /* le parent div est le scroll container */
    white-space: normal !important; /* ne pas mettre nowrap sur la table entière */
    min-width: 540px;               /* force le scroll sur le parent div */
    width: auto !important;         /* ne pas coller au container */
  }
  /* Cellules nowrap individuellement */
  .fp-data-table th,
  .fp-data-table td {
    white-space: nowrap !important;
  }

  /* ── C. Tous les conteneurs scroll inline ── */
  .fp-card > div,
  .fp-card-sm > div,
  .fp-card > div > div {
    /* héritage du scroll iOS : appliqué seulement si overflow-x actif */
    -webkit-overflow-scrolling: touch;
  }

  /* ── D. Cards ne doivent pas bloquer les scroll containers enfants ── */
  .fp-card,
  .fp-card-sm {
    overflow: visible !important;
  }

  /* Scroll wrapper sur tous les div overflow-x:auto à l'intérieur de fp-page */
  .fp-page div[style*="overflow-x:auto"],
  .fp-page div[style*="overflow-x: auto"] {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain;
  }

  /* fp-table-wrap : également clip-safe sur mobile */
  .fp-table-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .fp-table-wrap .fp-table {
    width: auto !important;
    min-width: 600px !important;
  }
}

/* ══ Supprimer le bouton Plan (Pro) dans la topbar — mobile + desktop ══ */
#fp-plan-switcher { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   CORRECTIF COINS ARRONDIS — DÉFINITIF

   Le fix précédent avait ajouté overflow:visible!important sur
   .fp-card/.fp-card-sm pour "ne pas bloquer les scroll enfants".
   C'était une erreur : overflow:visible supprime le clipping du
   border-radius → les enfants (thead gris, lignes alternées) montrent
   leurs coins carrés à l'intérieur de la carte.

   VÉRITÉ :
   - overflow:hidden sur le parent clippe les enfants aux coins ronds
   - Les enfants div[overflow-x:auto] créent leur PROPRE scroll context
     et défilent normalement à l'intérieur de l'espace clippé
   - overflow:visible sur le parent ne sert donc à rien pour le scroll

   CORRECTIF : overflow:hidden sur toutes les variantes de carte,
   partout (mobile + desktop, dark + light).
   ══════════════════════════════════════════════════════════════════ */

/* Global — toutes tailles d'écran */
.fp-card,
.fp-card-sm,
.fp-table-wrap,
.fp-kpi-card,
.fp-stat-card,
.fp-insight-card,
.fp-opp-card,
.fp-alert-item {
  overflow: hidden !important;
}

/* Écrase spécifiquement le overflow:visible!important ajouté
   dans le batch mobile précédent */
@media (max-width: 768px) {
  .fp-card,
  .fp-card-sm {
    overflow: hidden !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   CORRECTIF FINAL — COINS ARRONDIS VISIBLES + fp-table-wrap scroll

   PROBLÈME 1 : Fond page #f8faff ≈ fond carte rgba(255,255,255,0.9)
   → pas de contraste → coins arrondis invisibles même quand le CSS
     est correct. Solution : fond page plus gris, cartes blanches.

   PROBLÈME 2 : overflow:hidden!important sur fp-table-wrap bloque
   le scroll horizontal. Solution : overflow-x:auto + overflow-y:hidden.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Fond de page light mode : gris distinct pour que les cartes
        blanches se détachent et que les coins ronds soient évidents ── */
[data-theme="light"] body,
[data-theme="light"] .fp-main-wrap,
[data-theme="light"] .fp-page {
  background: #dce3ef !important;
}
[data-theme="light"] .fp-sidebar {
  background: #f0f4fb !important;
}

/* ── 2. Cartes : fond blanc pur + ombre nette + border-radius 20px ── */
[data-theme="light"] .fp-card,
[data-theme="light"] .fp-card-sm,
[data-theme="light"] .fp-kpi-card,
[data-theme="light"] .fp-stat-card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.09), 0 0 0 1px rgba(0,0,0,0.04) !important;
}

/* ── 3. fp-table-wrap : scroll X ok, clip Y pour border-radius ── */
.fp-table-wrap {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border-radius: 20px !important;
}
[data-theme="light"] .fp-table-wrap {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.09) !important;
}

/* ── 4. Topbar et sidebar : s'adapte au nouveau fond ── */
[data-theme="light"] .fp-topbar {
  background: #f0f4fb !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

/* ══ Remettre le bouton FAB (mobile + desktop) ══ */
.fp-fab-wrap { display: flex !important; }

/* ══ FAB — Animation fermeture avec décalage par item ══════════════
   Le !important de la règle .closing écrase animation-delay inline.
   Correctif : utiliser la variable CSS --fab-close-delay qui échappe
   au conflit de cascade, + durée identique à l'ouverture (0.25s).
   ════════════════════════════════════════════════════════════════ */
#fp-fab-wrap .fp-fab-action-item.closing {
  animation: fab-item-out 0.25s cubic-bezier(0.4, 0, 0.6, 1) var(--fab-close-delay, 0s) both !important;
}

/* ══════════════════════════════════════════════════════════════════
   CORRECTIF SPÉCIFICITÉ — inline <style> dans HTML a html[data-theme]
   avec spécificité (0,2,1) supérieure à notre CSS externe (0,1,1).
   On matche la même spécificité pour écraser les règles qui réduisent
   le box-shadow et cachent la forme arrondie des cartes.
   ══════════════════════════════════════════════════════════════════ */

html[data-theme="light"] .fp-card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.11) !important;
  border-radius: 20px !important;
  box-shadow: 0 3px 20px rgba(0,0,0,0.13), 0 0 0 1px rgba(0,0,0,0.05) !important;
  overflow: hidden !important;
}
html[data-theme="light"] .fp-card:hover {
  box-shadow: 0 6px 28px rgba(37,99,235,0.16), 0 0 0 1px rgba(37,99,235,0.12) !important;
  border-color: rgba(37,99,235,0.25) !important;
}
html[data-theme="light"] .fp-card-sm {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.11) !important;
  border-radius: 20px !important;
  box-shadow: 0 3px 20px rgba(0,0,0,0.13) !important;
  overflow: hidden !important;
}
html[data-theme="light"] .fp-kpi-card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.11) !important;
  border-radius: 20px !important;
  box-shadow: 0 3px 20px rgba(0,0,0,0.13) !important;
  overflow: hidden !important;
}
html[data-theme="light"] .fp-table-wrap {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.11) !important;
  border-radius: 20px !important;
  box-shadow: 0 3px 20px rgba(0,0,0,0.13) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
/* fp-layout : fond gris distinct (sinon fp-layout blanc efface le contraste) */
html[data-theme="light"] .fp-layout {
  background: #dce3ef !important;
}

/* ══ Fond page light mode : gris très neutre (pas bleu) ══════════
   #dce3ef était trop bleuté sur mobile. On passe à #f0f2f5 (gris
   quasi-blanc, neutre) — assez distinct pour voir les coins arrondis
   grâce à l'ombre des cartes, sans teinte bleue visible.
   ══════════════════════════════════════════════════════════════ */
html[data-theme="light"] body,
html[data-theme="light"] .fp-main-wrap,
html[data-theme="light"] .fp-layout,
html[data-theme="light"] .fp-page {
  background: #f0f2f5 !important;
}

/* ══ Intensité IA — cartes d'option égales en taille ═══════════════
   fp-ai-int-opt : toutes les mêmes dimensions, bordure visible en
   light mode (rgba(255,255,255,0.06) = invisible sur fond blanc).
   ══════════════════════════════════════════════════════════════ */
.fp-ai-int-opt {
  padding: 14px;
  border-radius: 11px;
  border: 2px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 90px;
}
.fp-ai-int-opt--active {
  border-color: rgba(37,99,235,0.4) !important;
  background: rgba(37,99,235,0.07) !important;
}

/* Light mode : les cartes non-sélectionnées doivent avoir une bordure
   visible — rgba(255,255,255,0.07) est invisible sur fond blanc */
html[data-theme="light"] .fp-ai-int-opt {
  border: 2px solid rgba(0,0,0,0.10) !important;
  background: rgba(0,0,0,0.02) !important;
}
html[data-theme="light"] .fp-ai-int-opt--active {
  border-color: rgba(37,99,235,0.45) !important;
  background: rgba(37,99,235,0.07) !important;
}

/* ══ MOBILE — Correctifs layout AI page ══════════════════════════

   1. Quick prompts : pleine largeur sur mobile (empilés verticalement)
   2. Prompt library : max-height augmentée pour 2 rangées complètes
   3. Contexte workspace : hauteur propre (2 rangées exactes = 4 items)
   ══════════════════════════════════════════════════════════════ */

/* 1. Quick prompts — colonne pleine largeur sur mobile */
@media (max-width: 768px) {
  .fp-ai-quick-prompts {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 12px;
  }
  .fp-ai-quick-prompts .fp-ai-quick {
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    font-size: 13px;
    border-radius: 10px;
    justify-content: flex-start;
  }
}

/* 2. Prompt library — montrer 2 rangées complètes sans couper */
@media (max-width: 768px) {
  #fp-prompt-lib-body.fp-collapsible-m {
    max-height: 360px !important;
    overflow: hidden;
  }
  #fp-prompt-lib-body.fp-collapsible-m.fp-expanded-m {
    max-height: 2000px !important;
  }
}

/* 3. Contexte workspace — 2 rangées exactes (≈4 items), pas de coupure */
@media (max-width: 768px) {
  #fp-ctx-body.fp-collapsible-m {
    max-height: 102px !important;
    overflow: hidden;
  }
  #fp-ctx-body.fp-collapsible-m.fp-expanded-m {
    max-height: 600px !important;
  }
}

/* Light mode : puces quick prompts lisibles */
html[data-theme="light"] .fp-ai-quick-prompts .fp-ai-quick {
  background: rgba(37,99,235,0.05) !important;
  border: 1px solid rgba(37,99,235,0.18) !important;
  color: #1d4ed8 !important;
}

/* ══ Variable --fp-inner-card : fond des sous-cartes ════════════
   Dark mode  : rgba(255,255,255,0.02) = quasi-transparent (effet
               glassmorphism sur fond sombre)
   Light mode : #ffffff = blanc pur, se distingue du fond #f0f2f5
   ══════════════════════════════════════════════════════════════ */
:root {
  --fp-inner-card: rgb(13,19,40); /* opaque : les sous-cartes gardent leur fond au hover du parent */
}
html[data-theme="light"] {
  --fp-inner-card: #eef2ff;
}

/* Bordures des sous-cartes : rgba(255,255,255,0.06) invisible en
   light mode → on les rend visibles via une variable CSS */
:root {
  --fp-inner-border: rgba(255,255,255,0.06);
}
html[data-theme="light"] {
  --fp-inner-border: rgba(0,0,0,0.08);
}

/* ══ Bibliothèque prompts mobile — cacher cartes 3 & 4 par défaut ═
   Sur mobile fp-grid-2 = 1 colonne → 4 cartes empilées.
   On masque les enfants 3 et 4, visibles seulement après "Voir plus".
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #fp-prompt-lib-body.fp-collapsible-m {
    max-height: none !important;
    overflow: visible !important;
  }
  #fp-prompt-lib-body.fp-collapsible-m > *:nth-child(n+3) {
    display: none !important;
  }
  #fp-prompt-lib-body.fp-collapsible-m.fp-expanded-m > *:nth-child(n+3) {
    display: block !important;
  }
}

/* ══ Sous-cartes colorées (wsModules, opportunities, etc.) ═════════
   En dark mode : légers fonds colorés (ok=vert 4%, down=rouge 7%...)
   En light mode : blanc pur + bordure gris subtil — sinon la couleur
   à 4-7% d'opacité est INVISIBLE sur fond #f0f2f5 (même gris).
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .fp-ws-module-card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.09) !important;
}
html[data-theme="light"] .fp-ws-module-card:hover {
  border-color: rgba(37,99,235,0.25) !important;
  box-shadow: 0 2px 10px rgba(37,99,235,0.10) !important;
}

/* Gauge cards (Health metrics grid) : bordures invisibles en light */
html[data-theme="light"] .fp-gauge-card {
  border: 1px solid rgba(0,0,0,0.09) !important;
}

/* Suggestions IA dans la palette de recherche */
.fp-cmd-item [style*="flex-shrink:0"] {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(37,99,235,0.08);
  color: #2563EB;
}

/* ══ Sliding shimmer keyframe — consistent left-to-right sweep ═══════
   Used by fp-skel-shimmer and fp-skel-block::after.
   2.2 s ease-in-out: slow enough to read, no vibration/jitter.
   ═══════════════════════════════════════════════════════════════════ */
@keyframes fpSlide {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ══ Skeleton shimmer loader (fp-skel-shimmer) ══════════════════════
   Usage: <div style="position:relative;overflow:hidden">
            <div class="fp-skel-shimmer" style="position:absolute;inset:0"></div>
          </div>
   ═══════════════════════════════════════════════════════════════════ */
.fp-skel-shimmer {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.11) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: fpSlide 2.2s ease-in-out infinite;
  border-radius: inherit;
}
html[data-theme="light"] .fp-skel-shimmer {
  background: linear-gradient(90deg,
    rgba(0,0,0,0.05) 25%,
    rgba(0,0,0,0.13) 50%,
    rgba(0,0,0,0.05) 75%
  );
  background-size: 200% 100%;
  animation: fpSlide 2.2s ease-in-out infinite;
}

/* ══ Section-level skeleton page ═════════════════════════════════════
   Legacy container kept for safety (no JS emits it anymore since the
   renderPageSkeleton() unification). The spinner ring ::before was
   REMOVED on purpose — loading states must always be the Overview-style
   structured shimmer skeleton, never a lone spinning circle. */
.fp-skeleton-page {
  min-height: 320px;
  padding: 24px;
}
.fp-skel-block {
  border-radius: var(--fp-radius-lg);
  background: var(--fp-card, rgba(255,255,255,0.04));
  position: relative;
  overflow: hidden;
}
.fp-skel-block::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.11) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: fpSlide 2.2s ease-in-out infinite;
}
html[data-theme="light"] .fp-skel-block::after {
  background: linear-gradient(90deg,
    rgba(0,0,0,0.04) 25%,
    rgba(0,0,0,0.11) 50%,
    rgba(0,0,0,0.04) 75%
  );
  background-size: 200% 100%;
  animation: fpSlide 2.2s ease-in-out infinite;
}

/* ── FIX: Cards inside inline-styled modal overlays need an opaque background ──
 * Dynamic modals in dashboard.js use position:fixed + z-index overlay divs
 * whose child .fp-card inherits --fp-bg-card = rgba(255,255,255,0.028) in dark
 * mode — virtually invisible against the dark overlay.  Force an opaque panel
 * background for any .fp-card that is a direct child of such an overlay.
 * Uses z-index attribute values that match dashboard.js modal patterns.
 * v20260701b
 */
[data-theme="dark"] [style*="z-index:1000"] > .fp-card,
[data-theme="dark"] [style*="z-index:2000"] > .fp-card,
[data-theme="dark"] [style*="z-index:9999"] > .fp-card {
  background: #0b1120 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(255,255,255,0.1) !important;
}
[data-theme="light"] [style*="z-index:1000"] > .fp-card,
[data-theme="light"] [style*="z-index:2000"] > .fp-card,
[data-theme="light"] [style*="z-index:9999"] > .fp-card {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(0,0,0,0.09) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE HOTFIXES — 2026-07-31
   ══════════════════════════════════════════════════════════════ */

/* 1. iOS Safari blue focus ring on scrollable containers → hide */
.fp-page,
.fp-main-wrap,
.fp-sidebar {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* 2. Forecast bottom row: each half must not overflow into the other */
@media (max-width: 640px) {
  .fp-forecast-grid > div > div:last-child {
    gap: 4px !important;
  }
  /* Left bar from sidebar border-right bleed fix */
  .fp-sidebar {
    border-right: none !important;
  }
}

/* ── V. DARK MODE : enforce card bg regardless of inline styles ──── */
/* Fixes white-card regression on desktop dark mode                   */
html:not([data-theme="light"]) .fp-card,
html:not([data-theme="light"]) .fp-stat-card,
html:not([data-theme="light"]) .fp-kpi-card,
html:not([data-theme="light"]) .fp-gauge-card {
  background: var(--fp-bg-card) !important;
  border-color: var(--fp-border) !important;
  color: var(--fp-text) !important;
}
html:not([data-theme="light"]) .fp-card:hover,
html:not([data-theme="light"]) .fp-stat-card:hover,
html:not([data-theme="light"]) .fp-kpi-card:hover {
  background: var(--fp-bg-card-hover) !important;
  border-color: var(--fp-border-hover) !important;
}

/* ── AI Agents Phase 1 : flash visuel d'ancre après navigation IA ────────── */
[data-fp-anchor].fp-anchor-flash {
  animation: fpAnchorFlash 2.6s ease;
  border-radius: 12px;
}
@keyframes fpAnchorFlash {
  0%, 55% { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.55); background-color: rgba(37, 99, 235, 0.08); }
  100%    { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

/* ══════════════════════════════════════════════════════════════════
   POLISH FIXES — card hover transparency + rankings frame + badges
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. CARD HOVER TRANSPARENCY FIX ─────────────────────────────────
   Dark theme uses rgba(255,255,255,0.07/0.10) backgrounds which are
   semi-transparent and can look "see-through" on hover.
   Override all hover rules to use solid computed equivalents:
     rgba(255,255,255,0.07) on #050810 ≈ #16191f
     rgba(255,255,255,0.10) on #050810 ≈ #1c1f29
   Light theme: keep solid white.
   ─────────────────────────────────────────────────────────────────── */

/* Dark mode — solid hover backgrounds, no transparency */
html:not([data-theme="light"]) .fp-card:hover,
html:not([data-theme="light"]) .fp-card:hover {
  background: #1c1f29 !important;
  border-color: rgba(37, 99, 235, 0.28) !important;
  box-shadow: 0 4px 24px rgba(37, 99, 235, 0.10) !important;
}
html:not([data-theme="light"]) .fp-stat-card:hover,
html:not([data-theme="light"]) .fp-stat-card:hover {
  background: #1c1f29 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
html:not([data-theme="light"]) .fp-kpi-card:hover,
html:not([data-theme="light"]) .fp-kpi-card:hover {
  background: #1c1f29 !important;
  border-color: rgba(37, 99, 235, 0.30) !important;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.12) !important;
}
html:not([data-theme="light"]) .fp-gauge-card:hover,
html:not([data-theme="light"]) .fp-gauge-card:hover {
  background: #1c1f29 !important;
  border-color: rgba(37, 99, 235, 0.30) !important;
}

/* Also fix the base dark card bg to be solid (plugs the underlying rgba) */
html:not([data-theme="light"]) .fp-card,
html:not([data-theme="light"]) .fp-card,
html:not([data-theme="light"]) .fp-stat-card,
html:not([data-theme="light"]) .fp-stat-card,
html:not([data-theme="light"]) .fp-kpi-card,
html:not([data-theme="light"]) .fp-kpi-card,
html:not([data-theme="light"]) .fp-gauge-card,
html:not([data-theme="light"]) .fp-gauge-card {
  background: #16191f !important;
}

/* Light theme — solid white on hover (never transparent) */
html[data-theme="light"] .fp-card:hover,
[data-theme="light"] .fp-card:hover {
  background: #ffffff !important;
  border-color: rgba(37, 99, 235, 0.28) !important;
  box-shadow: 0 6px 28px rgba(37, 99, 235, 0.14), 0 0 0 1px rgba(37, 99, 235, 0.10) !important;
}
html[data-theme="light"] .fp-kpi-card:hover,
[data-theme="light"] .fp-kpi-card:hover {
  background: #ffffff !important;
  border-color: rgba(37, 99, 235, 0.30) !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.10) !important;
}
html[data-theme="light"] .fp-gauge-card:hover,
[data-theme="light"] .fp-gauge-card:hover {
  background: #ffffff !important;
  border-color: rgba(37, 99, 235, 0.28) !important;
}
html[data-theme="light"] .fp-stat-card:hover,
[data-theme="light"] .fp-stat-card:hover {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

/* Also catch generic [class*=card]:hover that might set rgba backgrounds */
html:not([data-theme="light"]) .fp-monitor-card:hover,
html:not([data-theme="light"]) .fp-monitor-card:hover {
  background: #1c1f29 !important;
}
html:not([data-theme="light"]) .fp-kanban-card:hover,
html:not([data-theme="light"]) .fp-kanban-card:hover {
  background: #1c1f29 !important;
}

/* ── 3. ALERT COMMAND CENTER 8-SCORE GAUGES — badge vertical alignment ──
   The gauge cards are flex-columns. We pin the label to a min-height
   of 2 lines (~2.4em) so the badge always sits at the same baseline.
   The outer card container is targeted by the fp-ti-score-badge sibling
   approach: label gets min-height; badge wrapper gets margin-top:auto.
   ─────────────────────────────────────────────────────────────────── */

/* Give each gauge card a consistent min-height so all badges align */
.fp-ti-score-card {
  min-height: 170px;
}

.fp-ti-score-label {
  min-height: 2.4em;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  width: 100%;
}
.fp-ti-score-badge {
  margin-top: auto;
}

/* ── GLOBAL CIRCULAR NAV SPINNER ── */
/* ── Page-content fade transition (replaces unstable circular spinner) ────────
   Applied by fpShowNavSpinner(), removed by fpHideNavSpinner() after render.
   Deterministic: no animation loop, no timeout dependency, no flicker.        */
#fp-page.fp-page-transitioning {
  opacity: 0.55;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
#fp-page {
  transition: opacity 0.12s ease;
}

/* ── WORKSPACE HEALTH RING ANIMATION ──
   JS animates stroke-dashoffset from full circle to target value.
   The .fp-workspace-health-ring class marks the element for JS to target;
   the initial (hidden) state is set so the ring appears to draw itself in. */
.fp-workspace-health-ring {
  transition: stroke-dashoffset 1.1s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease;
}
.fp-score-ring-fill {
  transition: stroke-dashoffset 1.1s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
  .fp-workspace-health-ring, .fp-score-ring-fill {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE UNIVERSAL FIX — toutes les surfaces carte-like
   Étend la protection !important à TOUTES les classes de cartes.
   Doit rester EN FIN DE FICHIER pour maximiser la cascade.
   ══════════════════════════════════════════════════════════════════ */

html:not([data-theme="light"]) .fp-monitor-card,
html:not([data-theme="light"]) .fp-addon-card,
html:not([data-theme="light"]) .fp-plan-card,
html:not([data-theme="light"]) .fp-competitor-row,
html:not([data-theme="light"]) .fp-opp-card,
html:not([data-theme="light"]) .fp-site-sparkline-card,
html:not([data-theme="light"]) .fp-growth-win-card,
html:not([data-theme="light"]) .fp-integration-card,
html:not([data-theme="light"]) .fp-lib-card,
html:not([data-theme="light"]) .fp-kanban-card,
html:not([data-theme="light"]) .fp-table-wrap,
html:not([data-theme="light"]) .fp-alert-item,
html:not([data-theme="light"]) .fp-monitor-item,
html:not([data-theme="light"]) .fp-quick-add,
html:not([data-theme="light"]) .fp-cwv-card,
html:not([data-theme="light"]) .fp-audit-issue-card,
html:not([data-theme="light"]) .fp-alert-rule-row,
html:not([data-theme="light"]) .fp-bilan-item {
  background: var(--fp-bg-card) !important;
  color: var(--fp-text) !important;
}

/* Restaurer la teinte de statut sur les états spéciaux */
html:not([data-theme="light"]) .fp-addon-card.active {
  background: rgba(34, 197, 94, 0.06) !important;
  border-color: rgba(34, 197, 94, 0.25) !important;
}
html:not([data-theme="light"]) .fp-plan-card.current {
  background: rgba(37, 99, 235, 0.07) !important;
  border-color: rgba(37, 99, 235, 0.35) !important;
}
html:not([data-theme="light"]) .fp-integration-card.connected {
  background: rgba(34, 197, 94, 0.05) !important;
  border-color: rgba(34, 197, 94, 0.22) !important;
}
html:not([data-theme="light"]) .fp-integration-card.error {
  background: rgba(239, 68, 68, 0.05) !important;
  border-color: rgba(239, 68, 68, 0.22) !important;
}
html:not([data-theme="light"]) .fp-monitor-card.down {
  border-color: rgba(239, 68, 68, 0.30) !important;
}

/* Hover sur les nouvelles classes */
html:not([data-theme="light"]) .fp-monitor-card:hover,
html:not([data-theme="light"]) .fp-addon-card:hover,
html:not([data-theme="light"]) .fp-opp-card:hover,
html:not([data-theme="light"]) .fp-competitor-row:hover,
html:not([data-theme="light"]) .fp-integration-card:hover,
html:not([data-theme="light"]) .fp-kanban-card:hover,
html:not([data-theme="light"]) .fp-growth-win-card:hover {
  background: var(--fp-bg-card-hover) !important;
}

/* Catch-all : backgrounds blancs/gris clairs inline sur les divs
   (JS génère parfois des inline style="background:#ffffff")        */
html:not([data-theme="light"]) div[style*="background:#ffffff"],
html:not([data-theme="light"]) div[style*="background: #ffffff"],
html:not([data-theme="light"]) div[style*="background-color:#ffffff"],
html:not([data-theme="light"]) div[style*="background-color: #ffffff"],
html:not([data-theme="light"]) section[style*="background:#ffffff"],
html:not([data-theme="light"]) section[style*="background: #ffffff"] {
  background: var(--fp-bg-card) !important;
}

/* Gris clairs inline (f8fafc, f1f5f9, f8faff, eef2ff) */
html:not([data-theme="light"]) div[style*="background:#f8fafc"],
html:not([data-theme="light"]) div[style*="background: #f8fafc"],
html:not([data-theme="light"]) div[style*="background:#f1f5f9"],
html:not([data-theme="light"]) div[style*="background: #f1f5f9"],
html:not([data-theme="light"]) div[style*="background:#f8faff"],
html:not([data-theme="light"]) div[style*="background: #f8faff"],
html:not([data-theme="light"]) div[style*="background:#eef2ff"],
html:not([data-theme="light"]) div[style*="background: #eef2ff"] {
  background: var(--fp-bg-inset) !important;
}

/* ══ MOBILE FIXES — passe finalisation ══════════════════════════════════════ */

/* 1. CWV / PSI URL bar — flex-wrap on small screens */
@media (max-width: 640px) {
  .fp-psi-url-bar {
    flex-wrap: wrap;
  }
  .fp-psi-url-input {
    min-width: 0;
    flex: 1 1 100%;
    order: 1;
  }
  .fp-psi-url-bar > button {
    flex: 1 1 100%;
    order: 2;
    justify-content: center;
  }
  .fp-psi-analyze-label { display: inline; }
}

/* 2. Filter tabs — gap between buttons */
.fp-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 3. PSI opportunity cards — prevent letter-by-letter on narrow grids */
.fp-psi-opportunity {
  min-width: 0;
}
.fp-psi-opportunity > div[style*="flex:1"] {
  overflow: hidden;
}

/* 4. Audit category cards — font-size already fixed in JS; ensure word-break */
@media (max-width: 480px) {
  .fp-audit-cat-grid .fp-card {
    word-break: break-word;
  }
}

/* 5. Permissions table — guaranteed horizontal scroll on mobile */
@media (max-width: 768px) {
  .fp-data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}