/* ════════════════════════════════════════════════════════════════════════════════
   ALPHAVAULT CRM ANALYTICS — crm-analytics.css v2.0
   ULTRA PRO / MINIMALIST — 100% aligné sur checkout.css (design tokens --an-*)
   ════════════════════════════════════════════════════════════════════════════════ */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

   *, *::before, *::after { box-sizing: border-box; }
   
   /* ════════════════════════════════════════════════════════════
      0. DESIGN TOKENS — IDENTIQUES AU CHECKOUT
   ════════════════════════════════════════════════════════════ */
   :root,
   body:not(.crm-dark-mode) {
       --an-ink:            #0a0a0a;
       --an-ink-soft:       #404040;
       --an-text:           #0a0a0a;
       --an-text-muted:     #737373;
       --an-text-faint:     #a3a3a3;
       --an-border:         #e5e5e5;
       --an-border-soft:    #f5f5f5;
       --an-bg:             #fafafa;
   
       --an-widget-bg:      #ffffff;
       --an-widget-border:  #e5e5e5;
       --an-widget-shadow:  0 1px 3px rgba(0,0,0,0.04);
   
       --an-surface:        #fafafa;
       --an-surface-hover:  #f5f5f5;
       --an-input-bg:       #f5f5f5;
   
       --an-success:        #16a34a;
       --an-success-bg:     #f0fdf4;
       --an-danger:         #dc2626;
       --an-danger-bg:      #fef2f2;
       --an-warning:        #0a0a0a; /* neutralisé — plus d'orange */
   
       /* Compat rétro — tout pointe vers l'encre (monochrome strict) */
       --an-primary:        #0a0a0a;
       --an-green:          #0a0a0a;
       --an-amber:          #0a0a0a;
       --an-red:            #dc2626; /* réservé aux alertes critiques uniquement */
       --an-purple:         #0a0a0a;
       --an-cyan:           #0a0a0a;
       --an-pink:           #0a0a0a;
       --an-orange:         #0a0a0a;
   
       --an-radius:         6px;
       --an-radius-lg:      10px;
       --an-radius-xl:      12px;
       --an-radius-full:    999px;
   
       --an-shadow-sm:      0 1px 3px rgba(0,0,0,0.04);
       --an-shadow-md:      0 4px 12px rgba(0,0,0,0.06);
       --an-shadow-lg:      0 12px 32px rgba(0,0,0,0.10);
       --an-shadow-dropdown:0 8px 24px rgba(0,0,0,0.08);
   
       --an-transition:     0.15s ease;
   }
   
   body.crm-dark-mode {
       --an-ink:            #fafafa;
       --an-ink-soft:       #d4d4d4;
       --an-text:           #fafafa;
       --an-text-muted:     #a3a3a3;
       --an-text-faint:     #737373;
       --an-border:         #262626;
       --an-border-soft:    #171717;
       --an-bg:             #0a0a0a;
   
       --an-widget-bg:      #0f0f0f;
       --an-widget-border:  #262626;
       --an-widget-shadow:  0 1px 3px rgba(0,0,0,0.3);
   
       --an-surface:        #141414;
       --an-surface-hover:  #1c1c1c;
       --an-input-bg:       #141414;
   
       --an-success-bg:     rgba(22,163,74,0.12);
       --an-danger-bg:      rgba(220,38,38,0.12);
   
       --an-primary: #fafafa; --an-green:#fafafa; --an-amber:#fafafa;
       --an-purple:#fafafa; --an-cyan:#fafafa; --an-pink:#fafafa; --an-orange:#fafafa;
       --an-red: #f87171;
   
       --an-shadow-sm:      0 1px 3px rgba(0,0,0,0.3);
       --an-shadow-md:      0 4px 12px rgba(0,0,0,0.5);
       --an-shadow-lg:      0 12px 32px rgba(0,0,0,0.6);
       --an-shadow-dropdown:0 8px 24px rgba(0,0,0,0.5);
   }
   
   /* ════════════════════════════════════════════════════════════
      1. LAYOUT — GRID & ROWS
   ════════════════════════════════════════════════════════════ */
   .analytics-row-2col {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 16px;
       margin-bottom: 16px;
   }
   
   .analytics-kpi-row {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
       gap: 12px;
       margin-bottom: 16px;
   }
   
   .analytics-ai-tabs-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 16px;
       margin-bottom: 16px;
   }
   
   /* ════════════════════════════════════════════════════════════
      2. WIDGET — BASE
   ════════════════════════════════════════════════════════════ */
   .analytics-widget {
       background: var(--an-widget-bg);
       border: 1px solid var(--an-widget-border);
       border-radius: var(--an-radius-lg);
       padding: 20px;
       margin-bottom: 16px;
       box-shadow: var(--an-widget-shadow);
       transition: border-color .15s ease;
   }
   .analytics-widget:hover { border-color: var(--an-ink-soft); }
   
   .analytics-widget-full { width: 100%; }
   .analytics-widget-mini { margin-bottom: 0; }
   
   .analytics-widget-ai {
       background: var(--an-surface);
       border: 1px solid var(--an-border);
   }
   .analytics-widget-global {
       background: var(--an-surface);
       border: 1px solid var(--an-border);
   }
   
   .analytics-widget--success {
       border-color: rgba(22,163,74,0.25);
       background: var(--an-success-bg);
   }
   
   .analytics-widget-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-bottom: 16px;
       flex-wrap: wrap;
       gap: 8px;
   }
   
   .analytics-widget-title {
       display: flex;
       align-items: center;
       gap: 7px;
       font-size: 13px;
       font-weight: 700;
       color: var(--an-text);
       min-width: 0;
       flex-shrink: 1;
   }
   .analytics-widget-title i { font-size: 12px; flex-shrink: 0; color: var(--an-text-muted) !important; }
   
   .analytics-widget-subtitle {
       font-size: 11px;
       color: var(--an-text-muted);
       font-weight: 500;
   }
   
   /* ════════════════════════════════════════════════════════════
      3. HERO METRICS BAR
   ════════════════════════════════════════════════════════════ */
   #analyticsHeroMetrics {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
       gap: 12px;
       margin-bottom: 20px;
   }
   
   .analytics-hero-metric {
       background: var(--an-widget-bg);
       border: 1px solid var(--an-widget-border);
       border-radius: var(--an-radius-lg);
       padding: 14px;
       display: flex;
       align-items: flex-start;
       gap: 10px;
       box-shadow: var(--an-widget-shadow);
       transition: border-color .15s ease;
   }
   .analytics-hero-metric:hover { border-color: var(--an-ink-soft); }
   
   .analytics-hero-metric-icon {
       width: 36px;
       height: 36px;
       border-radius: var(--an-radius);
       flex-shrink: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       background: var(--an-border-soft) !important;
       border: 1px solid var(--an-border);
   }
   .analytics-hero-metric-icon i { color: var(--an-text) !important; font-size: 14px; }
   
   .analytics-hero-metric-body { flex: 1; min-width: 0; }
   
   .analytics-hero-metric-label {
       font-size: 10px;
       color: var(--an-text-faint);
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       margin-bottom: 3px;
   }
   
   .analytics-hero-metric-value {
       font-size: 18px;
       font-weight: 700;
       color: var(--an-text);
       line-height: 1.1;
   }
   
   .analytics-hero-metric-sub {
       font-size: 10px;
       color: var(--an-text-faint);
       margin-top: 3px;
   }
   
   .analytics-hero-delta {
       font-size: 10px;
       font-weight: 700;
       margin-top: 4px;
       display: flex;
       align-items: center;
       gap: 3px;
       color: var(--an-text-muted);
   }
   .analytics-hero-delta i { font-size: 8px; }
   .analytics-hero-delta[data-good="true"]  { color: var(--an-success); }
   .analytics-hero-delta[data-good="false"] { color: var(--an-danger); }
   
   /* ════════════════════════════════════════════════════════════
      4. CONTROLS BAR & TIME RANGE SELECTOR
   ════════════════════════════════════════════════════════════ */
   .analytics-range-bar {
       display: flex;
       align-items: center;
       gap: 3px;
       background: var(--an-border-soft);
       border: 1px solid var(--an-border);
       border-radius: var(--an-radius);
       padding: 3px;
   }
   
   .analytics-range-btn {
       padding: 6px 12px;
       border-radius: var(--an-radius);
       font-size: 11px;
       font-weight: 600;
       color: var(--an-text-muted);
       border: 1px solid transparent;
       background: transparent;
       cursor: pointer;
       transition: var(--an-transition);
       font-family: inherit;
   }
   .analytics-range-btn:hover { background: var(--an-widget-bg); color: var(--an-text); }
   .analytics-range-btn.active {
       background: var(--an-ink);
       color: var(--an-bg);
       border-color: var(--an-ink);
   }
   
   .analytics-benchmark-label {
       font-size: 11px;
       color: var(--an-text-faint);
       font-weight: 500;
   }
   
   /* ════════════════════════════════════════════════════════════
      5. TAB NAVIGATION
   ════════════════════════════════════════════════════════════ */
   .analytics-tabs-bar {
       display: flex;
       align-items: center;
       gap: 4px;
       background: var(--an-widget-bg);
       border: 1px solid var(--an-widget-border);
       border-radius: var(--an-radius-lg);
       padding: 6px;
       margin-bottom: 20px;
       flex-wrap: wrap;
       box-shadow: var(--an-widget-shadow);
   }
   
   .analytics-tab-btn {
       display: flex;
       align-items: center;
       gap: 6px;
       padding: 8px 14px;
       border-radius: var(--an-radius);
       font-size: 12px;
       font-weight: 600;
       color: var(--an-text-muted);
       border: none;
       background: transparent;
       cursor: pointer;
       transition: var(--an-transition);
       white-space: nowrap;
       font-family: inherit;
   }
   .analytics-tab-btn i { font-size: 11px; }
   .analytics-tab-btn:hover { background: var(--an-border-soft); color: var(--an-text); }
   .analytics-tab-btn.active {
       background: var(--an-ink);
       color: var(--an-bg);
   }
   .analytics-tab-btn.active i { color: var(--an-bg) !important; }
   
   .analytics-tab-panel { display: none; }
   
   /* ════════════════════════════════════════════════════════════
      6. METRIC CARDS
   ════════════════════════════════════════════════════════════ */
   .analytics-metric-card {
       background: var(--an-widget-bg);
       border: 1px solid var(--an-widget-border);
       border-radius: var(--an-radius-lg);
       padding: 16px;
       position: relative;
       overflow: hidden;
       transition: border-color .15s ease;
       cursor: default;
   }
   .analytics-metric-card:hover { border-color: var(--an-ink-soft); }
   
   .analytics-metric-card--alert {
       border-color: rgba(220,38,38,0.3) !important;
       background: var(--an-danger-bg);
   }
   
   .analytics-metric-alert-dot {
       position: absolute;
       top: 10px;
       right: 10px;
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: var(--an-danger);
       animation: anPulse 1.5s ease-in-out infinite;
   }
   
   .analytics-metric-icon {
       width: 38px;
       height: 38px;
       border-radius: var(--an-radius);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 14px;
       margin-bottom: 10px;
       flex-shrink: 0;
       background: var(--an-border-soft) !important;
       border: 1px solid var(--an-border);
   }
   .analytics-metric-icon i { color: var(--an-text) !important; }
   
   .analytics-metric-value {
       font-size: 22px;
       font-weight: 700;
       color: var(--an-text);
       line-height: 1;
       margin-bottom: 4px;
   }
   
   .analytics-metric-label {
       font-size: 11px;
       font-weight: 700;
       color: var(--an-text);
       margin-bottom: 3px;
   }
   
   .analytics-metric-sub { font-size: 10px; color: var(--an-text-faint); }
   
   .analytics-metric-benchmark {
       font-size: 10px;
       color: var(--an-text-faint);
       margin-top: 6px;
       display: flex;
       align-items: center;
       gap: 4px;
   }
   
   .analytics-metric-delta {
       font-size: 10px;
       font-weight: 700;
       margin-top: 6px;
       display: flex;
       align-items: center;
       gap: 3px;
   }
   .analytics-metric-delta i { font-size: 8px; }
   
   /* ════════════════════════════════════════════════════════════
      7. DEAL FUNNEL BARS
   ════════════════════════════════════════════════════════════ */
   .analytics-funnel-wrap { padding: 4px 0; }
   
   .analytics-funnel-row {
       display: flex;
       align-items: center;
       gap: 16px;
       padding: 10px 6px;
       border-bottom: 1px solid var(--an-border-soft);
       transition: background 0.15s ease;
       border-radius: var(--an-radius);
   }
   .analytics-funnel-row:last-child { border-bottom: none; }
   .analytics-funnel-row:hover { background: var(--an-surface); }
   
   .analytics-funnel-stages {
       min-width: 210px;
       display: flex;
       align-items: center;
       gap: 0;
       font-size: 12px;
       font-weight: 700;
       flex-shrink: 0;
       color: var(--an-text);
   }
   
   .analytics-funnel-from,
   .analytics-funnel-to { font-weight: 700; font-size: 12px; color: var(--an-text); }
   
   .analytics-funnel-count {
       font-size: 10px;
       font-weight: 500;
       color: var(--an-text-faint);
       margin-left: 4px;
   }
   
   .analytics-funnel-bar-wrap {
       flex: 1;
       display: flex;
       align-items: center;
       gap: 12px;
       min-width: 0;
   }
   
   .analytics-funnel-bar-track {
       flex: 1;
       height: 10px;
       border-radius: var(--an-radius);
       background: var(--an-input-bg);
       position: relative;
       overflow: visible;
   }
   
   .analytics-funnel-bar-fill {
       height: 100%;
       border-radius: var(--an-radius);
       background: var(--an-ink);
       transition: width 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
       min-width: 4px;
   }
   
   .analytics-funnel-benchmark-line {
       position: absolute;
       top: -4px;
       width: 2px;
       height: 18px;
       background: var(--an-text-muted);
       border-radius: 1px;
       transform: translateX(-50%);
   }
   
   .analytics-funnel-rate-wrap {
       min-width: 130px;
       display: flex;
       align-items: center;
       gap: 8px;
       flex-shrink: 0;
   }
   
   .analytics-funnel-rate  { font-size: 13px; font-weight: 700; color: var(--an-text); }
   .analytics-funnel-delta { font-size: 10px; font-weight: 700; }
   .analytics-funnel-conv  { font-size: 10px; font-weight: 700; margin-left: auto; }
   
   /* ════════════════════════════════════════════════════════════
      8. LP CONVERSION FUNNEL
   ════════════════════════════════════════════════════════════ */
   .analytics-lp-funnel-wrap { padding: 4px 0; }
   .analytics-lp-funnel-grid { display: flex; flex-direction: column; gap: 10px; }
   
   .analytics-lp-funnel-stage {
       display: grid;
       grid-template-columns: 160px 1fr 130px;
       gap: 14px;
       align-items: center;
       padding: 6px 8px;
       border-radius: var(--an-radius);
       transition: background 0.15s ease;
   }
   .analytics-lp-funnel-stage:hover { background: var(--an-surface); }
   
   .analytics-lp-funnel-label { font-size: 11px; font-weight: 700; color: var(--an-text); }
   
   .analytics-lp-funnel-bar-track {
       height: 8px;
       border-radius: var(--an-radius);
       background: var(--an-input-bg);
       overflow: hidden;
   }
   
   .analytics-lp-funnel-bar-fill {
       height: 100%;
       border-radius: var(--an-radius);
       background: var(--an-ink);
       transition: width 0.6s ease;
       min-width: 2px;
   }
   
   .analytics-lp-funnel-meta { display: flex; align-items: center; gap: 8px; }
   .analytics-lp-funnel-count   { font-size: 13px; font-weight: 700; color: var(--an-text); }
   .analytics-lp-funnel-rate    { font-size: 10px; color: var(--an-text-faint); }
   .analytics-lp-funnel-dropoff { font-size: 10px; color: var(--an-danger); font-weight: 700; }
   
   /* ════════════════════════════════════════════════════════════
      9. LEGEND COMPONENT
   ════════════════════════════════════════════════════════════ */
   .analytics-legend-wrap {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       margin-top: 10px;
   }
   
   .analytics-legend-item {
       display: flex;
       align-items: center;
       gap: 6px;
       font-size: 10px;
       color: var(--an-text-muted);
   }
   
   .analytics-legend-dot {
       width: 8px;
       height: 8px;
       border-radius: 50%;
       flex-shrink: 0;
   }
   
   .analytics-legend-label { font-weight: 600; color: var(--an-text); }
   .analytics-legend-val   { color: var(--an-text-faint); }
   
   /* ════════════════════════════════════════════════════════════
      10. HOT PROSPECTS ALERT WIDGET
   ════════════════════════════════════════════════════════════ */
   .analytics-alert-widget {
       border-color: rgba(220,38,38,0.2) !important;
       background: var(--an-danger-bg) !important;
   }
   
   .analytics-hot-prospects-list { display: flex; flex-direction: column; gap: 8px; }
   
   .analytics-hot-prospect-row {
       display: flex;
       align-items: center;
       gap: 12px;
       flex-wrap: wrap;
       padding: 10px 12px;
       border-radius: var(--an-radius);
       background: var(--an-widget-bg);
       border: 1px solid var(--an-border);
       transition: var(--an-transition);
   }
   .analytics-hot-prospect-row:hover { border-color: var(--an-ink-soft); }
   
   .analytics-hot-prospect-name {
       font-size: 13px;
       font-weight: 700;
       color: var(--an-text);
       flex: 1;
   }
   
   .analytics-hot-prospect-days {
       font-size: 11px;
       color: var(--an-danger);
       font-weight: 700;
       white-space: nowrap;
   }
   
   .analytics-stage-pill {
       padding: 3px 10px;
       border-radius: var(--an-radius-full);
       font-size: 10px;
       font-weight: 700;
       white-space: nowrap;
       background: var(--an-border-soft);
       color: var(--an-text);
       border: 1px solid var(--an-border);
   }
   
   .analytics-action-link {
       font-size: 11px;
       font-weight: 700;
       color: var(--an-text);
       text-decoration: none;
       display: flex;
       align-items: center;
       gap: 4px;
       transition: var(--an-transition);
       white-space: nowrap;
   }
   .analytics-action-link:hover { opacity: 0.7; }
   
   /* ════════════════════════════════════════════════════════════
      11. CONTACTS TABLE
   ════════════════════════════════════════════════════════════ */
   .analytics-contacts-table { width: 100%; overflow-x: auto; }
   
   .analytics-table-header {
       display: grid;
       grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr 60px;
       gap: 8px;
       padding: 8px 12px;
       background: var(--an-border-soft);
       border-radius: var(--an-radius);
       margin-bottom: 4px;
       font-size: 10px;
       font-weight: 700;
       color: var(--an-text-faint);
       text-transform: uppercase;
       letter-spacing: 0.5px;
       min-width: 640px;
   }
   
   .analytics-table-row {
       display: grid;
       grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr 60px;
       gap: 8px;
       padding: 8px 12px;
       border-radius: var(--an-radius);
       transition: background 0.15s ease;
       align-items: center;
       min-width: 640px;
   }
   .analytics-table-row:hover { background: var(--an-surface); }
   
   .analytics-table-contact {
       display: flex;
       align-items: center;
       gap: 10px;
       min-width: 0;
   }
   
   .analytics-contact-avatar {
       width: 32px;
       height: 32px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 11px;
       font-weight: 700;
       color: var(--an-bg);
       background: var(--an-ink);
       flex-shrink: 0;
       position: relative;
   }
   
   .analytics-contact-health-dot {
       position: absolute;
       bottom: -1px;
       right: -1px;
       width: 9px;
       height: 9px;
       border-radius: 50%;
       border: 2px solid var(--an-widget-bg);
   }
   
   .analytics-contact-name {
       font-size: 12px;
       font-weight: 700;
       color: var(--an-text);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }
   
   .analytics-contact-title { font-size: 10px; color: var(--an-text-faint); }
   
   .analytics-table-cell { font-size: 12px; color: var(--an-text); }
   .analytics-date-cell  { font-size: 11px; color: var(--an-text-muted); }
   
   .analytics-table-action-btn {
       padding: 5px 8px;
       border-radius: var(--an-radius);
       border: 1px solid var(--an-border);
       background: transparent;
       color: var(--an-text-muted);
       cursor: pointer;
       transition: var(--an-transition);
       display: inline-flex;
       align-items: center;
       justify-content: center;
   }
   .analytics-table-action-btn:hover {
       background: var(--an-ink);
       border-color: var(--an-ink);
       color: var(--an-bg);
   }
   
   .analytics-health-badge {
       display: inline-flex;
       align-items: center;
       gap: 4px;
       padding: 3px 8px;
       border-radius: var(--an-radius-full);
       font-size: 10px;
       font-weight: 700;
       white-space: nowrap;
   }
   
   .analytics-interaction-count-wrap {
       display: flex;
       align-items: center;
       gap: 6px;
   }
   
   .analytics-interaction-bar {
       height: 4px;
       border-radius: var(--an-radius);
       background: var(--an-ink);
       transition: width 0.5s ease;
       max-width: 60px;
   }
   
   .analytics-interaction-count { font-size: 11px; font-weight: 700; color: var(--an-text); }
   
   /* ════════════════════════════════════════════════════════════
      12. DORMANT CONTACTS GRID
   ════════════════════════════════════════════════════════════ */
   .analytics-dormant-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
       gap: 10px;
   }
   
   .analytics-dormant-card {
       background: var(--an-widget-bg);
       border: 1px solid var(--an-widget-border);
       border-radius: var(--an-radius);
       padding: 14px;
       display: flex;
       align-items: center;
       gap: 10px;
       transition: border-color .15s ease;
       border-left: 3px solid var(--an-border);
   }
   .analytics-dormant-card:hover { border-color: var(--an-ink-soft); }
   
   .analytics-dormant-avatar {
       width: 36px;
       height: 36px;
       border-radius: 50%;
       flex-shrink: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 12px;
       font-weight: 700;
       color: var(--an-bg);
       background: var(--an-ink);
       position: relative;
   }
   
   .analytics-dormant-ice {
       position: absolute;
       bottom: -2px;
       right: -2px;
       width: 14px;
       height: 14px;
       border-radius: 50%;
       background: var(--an-widget-bg);
       display: flex;
       align-items: center;
       justify-content: center;
       border: 1px solid var(--an-widget-border);
   }
   
   .analytics-dormant-info { flex: 1; min-width: 0; }
   .analytics-dormant-name { font-size: 12px; font-weight: 700; color: var(--an-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .analytics-dormant-company { font-size: 10px; color: var(--an-text-faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .analytics-dormant-days { font-size: 10px; font-weight: 700; margin-top: 4px; display: flex; align-items: center; gap: 3px; color: var(--an-text-muted); }
   
   .analytics-dormant-actions { flex-shrink: 0; }
   
   .analytics-dormant-btn {
       padding: 5px 10px;
       border-radius: var(--an-radius);
       font-size: 10px;
       font-weight: 700;
       border: 1px solid var(--an-border);
       background: transparent;
       color: var(--an-text);
       cursor: pointer;
       transition: var(--an-transition);
       white-space: nowrap;
       font-family: inherit;
       display: inline-flex;
       align-items: center;
       gap: 4px;
   }
   .analytics-dormant-btn:hover { background: var(--an-ink); color: var(--an-bg); border-color: var(--an-ink); }
   
   /* ════════════════════════════════════════════════════════════
      13. HEALTH SCORE DISTRIBUTION PILLS
   ════════════════════════════════════════════════════════════ */
   .analytics-health-breakdown {
       display: flex;
       gap: 8px;
       flex-wrap: wrap;
       margin-top: 10px;
   }
   
   .analytics-health-pill {
       display: flex;
       align-items: center;
       gap: 6px;
       padding: 5px 10px;
       border-radius: var(--an-radius-full);
       font-size: 11px;
       font-weight: 700;
       background: var(--an-border-soft);
       border: 1px solid var(--an-border);
       color: var(--an-text);
   }
   
   .analytics-health-pill-count { font-size: 14px; font-weight: 700; }
   .analytics-health-pill-label { font-weight: 700; }
   .analytics-health-pill-pct   { font-size: 10px; opacity: 0.7; }
   
   /* ════════════════════════════════════════════════════════════
      14. TEAM COVERAGE LIST
   ════════════════════════════════════════════════════════════ */
   .analytics-coverage-list { display: flex; flex-direction: column; gap: 8px; }
   
   .analytics-coverage-row {
       display: grid;
       grid-template-columns: 200px 1fr 200px;
       gap: 16px;
       align-items: center;
       padding: 10px 12px;
       border-radius: var(--an-radius);
       background: var(--an-surface);
       border: 1px solid var(--an-widget-border);
       transition: var(--an-transition);
   }
   .analytics-coverage-row:hover { background: var(--an-surface-hover); }
   
   .analytics-coverage-member { display: flex; align-items: center; gap: 10px; min-width: 0; }
   
   .analytics-coverage-avatar {
       width: 36px;
       height: 36px;
       border-radius: 50%;
       flex-shrink: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 12px;
       font-weight: 700;
       color: var(--an-bg);
       background: var(--an-ink);
       position: relative;
   }
   
   .analytics-top-performer-crown { position: absolute; top: -4px; right: -4px; }
   
   .analytics-coverage-name {
       font-size: 12px;
       font-weight: 700;
       color: var(--an-text);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }
   
   .analytics-coverage-role-badge {
       display: inline-flex;
       align-items: center;
       gap: 4px;
       padding: 2px 7px;
       border-radius: var(--an-radius-full);
       font-size: 9px;
       font-weight: 700;
       margin-top: 3px;
       background: var(--an-border-soft);
       border: 1px solid var(--an-border);
       color: var(--an-text-muted);
   }
   
   .analytics-coverage-stats { display: flex; gap: 14px; flex-wrap: wrap; }
   
   .analytics-coverage-stat {
       display: flex;
       align-items: center;
       gap: 4px;
       font-size: 11px;
       color: var(--an-text-muted);
       white-space: nowrap;
   }
   
   .analytics-coverage-bar-wrap {
       display: flex;
       align-items: center;
       gap: 8px;
   }
   
   .analytics-coverage-bar-track {
       flex: 1;
       height: 6px;
       border-radius: var(--an-radius);
       background: var(--an-input-bg);
       overflow: hidden;
   }
   
   .analytics-coverage-bar-fill {
       height: 100%;
       border-radius: var(--an-radius);
       background: var(--an-ink);
       transition: width 0.6s ease;
       min-width: 2px;
   }
   
   .analytics-coverage-score {
       font-size: 11px;
       font-weight: 700;
       min-width: 24px;
       text-align: right;
       color: var(--an-text);
   }
   
   /* ════════════════════════════════════════════════════════════
      15. DEALS SOURCING TABLE
   ════════════════════════════════════════════════════════════ */
   .analytics-sourcing-table { width: 100%; }
   
   .analytics-sourcing-row {
       display: grid;
       grid-template-columns: 2fr 1.5fr 1.5fr 80px 100px;
       gap: 12px;
       align-items: center;
       padding: 10px 8px;
       border-radius: var(--an-radius);
       transition: background 0.15s ease;
   }
   .analytics-sourcing-row:hover { background: var(--an-surface); }
   
   .analytics-sourcing-member { display: flex; align-items: center; gap: 8px; min-width: 0; }
   
   .analytics-member-rank {
       font-size: 10px;
       font-weight: 700;
       color: var(--an-text-faint);
       min-width: 18px;
       flex-shrink: 0;
   }
   
   .analytics-sourcing-avatar {
       width: 30px;
       height: 30px;
       border-radius: 50%;
       flex-shrink: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 10px;
       font-weight: 700;
       color: var(--an-bg);
       background: var(--an-ink);
   }
   
   .analytics-sourcing-name {
       font-size: 12px;
       font-weight: 700;
       color: var(--an-text);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }
   
   .analytics-sourcing-bar-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
   
   .analytics-mini-bar-track {
       flex: 1;
       height: 5px;
       border-radius: var(--an-radius);
       background: var(--an-input-bg);
       overflow: hidden;
       min-width: 30px;
   }
   
   .analytics-mini-bar-fill {
       height: 100%;
       border-radius: var(--an-radius);
       background: var(--an-ink);
       transition: width 0.6s ease;
       min-width: 2px;
   }
   
   .analytics-sourcing-num { font-size: 11px; font-weight: 700; min-width: 40px; white-space: nowrap; color: var(--an-text); }
   .analytics-sourcing-cell { font-size: 12px; color: var(--an-text); }
   
   .analytics-winrate-pill {
       display: inline-block;
       padding: 3px 8px;
       border-radius: var(--an-radius-full);
       font-size: 10px;
       font-weight: 700;
       white-space: nowrap;
       background: var(--an-border-soft);
       color: var(--an-text);
       border: 1px solid var(--an-border);
   }
   
   /* ════════════════════════════════════════════════════════════
      16. ACTIVITY HEATMAP
   ════════════════════════════════════════════════════════════ */
   .analytics-heatmap-wrap {
       display: flex;
       gap: 8px;
       overflow-x: auto;
       padding-bottom: 4px;
   }
   
   .analytics-heatmap-days {
       display: flex;
       flex-direction: column;
       justify-content: space-around;
       font-size: 9px;
       color: var(--an-text-faint);
       font-weight: 700;
       padding-top: 20px;
       flex-shrink: 0;
   }
   
   .analytics-heatmap-day-label {
       height: 16px;
       display: flex;
       align-items: center;
       padding-right: 6px;
       white-space: nowrap;
   }
   
   .analytics-heatmap-grid-wrap { flex: 1; min-width: 0; }
   
   .analytics-heatmap-hours {
       display: flex;
       justify-content: space-between;
       font-size: 8px;
       color: var(--an-text-faint);
       margin-bottom: 3px;
   }
   .analytics-heatmap-hour-label { flex: 1; text-align: center; }
   
   .analytics-heatmap-grid {
       display: grid;
       grid-template-columns: repeat(24, 1fr);
       grid-template-rows: repeat(7, 16px);
       gap: 2px;
   }
   
   .analytics-heatmap-cell {
       border-radius: 3px;
       cursor: default;
       transition: opacity 0.15s ease;
       display: flex;
       align-items: center;
       justify-content: center;
       background: var(--an-border-soft);
   }
   .analytics-heatmap-cell:hover { opacity: 0.75; }
   
   .analytics-heatmap-count {
       font-size: 7px;
       font-weight: 700;
       color: var(--an-bg);
       pointer-events: none;
   }
   
   .analytics-heatmap-legend {
       display: flex;
       align-items: center;
       gap: 4px;
       margin-top: 10px;
       font-size: 9px;
       color: var(--an-text-faint);
   }
   
   .analytics-heatmap-legend-cell {
       width: 12px;
       height: 12px;
       border-radius: 3px;
       flex-shrink: 0;
   }
   
   /* ════════════════════════════════════════════════════════════
      17. BENCHMARK CARDS GRID
   ════════════════════════════════════════════════════════════ */
   .analytics-benchmark-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
       gap: 12px;
       margin-bottom: 4px;
   }
   
   .analytics-benchmark-card {
       border-radius: var(--an-radius);
       padding: 14px;
       transition: border-color .15s ease;
       background: var(--an-border-soft);
       border: 1px solid var(--an-border);
   }
   .analytics-benchmark-card:hover { border-color: var(--an-ink-soft); }
   
   .analytics-benchmark-card-label {
       font-size: 10px;
       font-weight: 700;
       color: var(--an-text-faint);
       text-transform: uppercase;
       letter-spacing: 0.5px;
       margin-bottom: 10px;
   }
   
   .analytics-benchmark-card-values {
       display: flex;
       align-items: center;
       gap: 8px;
       margin-bottom: 8px;
   }
   
   .analytics-benchmark-yours {
       font-size: 18px;
       font-weight: 700;
       line-height: 1;
       color: var(--an-text);
   }
   
   .analytics-benchmark-yours-label,
   .analytics-benchmark-industry-label {
       font-size: 9px;
       color: var(--an-text-faint);
       margin-top: 2px;
   }
   
   .analytics-benchmark-industry {
       font-size: 14px;
       font-weight: 700;
       color: var(--an-text-muted);
   }
   
   .analytics-benchmark-vs {
       font-size: 9px;
       color: var(--an-text-faint);
       font-weight: 600;
   }
   
   .analytics-benchmark-delta {
       display: inline-flex;
       align-items: center;
       gap: 4px;
       padding: 3px 8px;
       border-radius: var(--an-radius-full);
       font-size: 10px;
       font-weight: 700;
   }
   
   .analytics-benchmark-badge {
       display: inline-flex;
       align-items: center;
       gap: 3px;
       font-size: 10px;
       font-weight: 700;
       padding: 2px 7px;
       border-radius: var(--an-radius-full);
       white-space: nowrap;
       flex-shrink: 0;
   }
   
   /* ════════════════════════════════════════════════════════════
      18. EMPTY & SUCCESS STATES
   ════════════════════════════════════════════════════════════ */
   .analytics-empty {
       text-align: center;
       padding: 32px 20px;
       color: var(--an-text-faint);
       font-size: 12px;
       font-weight: 600;
   }
   .analytics-empty i { font-size: 28px; margin-bottom: 10px; display: block; opacity: 0.4; }
   
   .analytics-success-state {
       text-align: center;
       padding: 28px 20px;
       display: flex;
       flex-direction: column;
       align-items: center;
   }
   
   /* ════════════════════════════════════════════════════════════
      19. AI LOADING & THINKING STATE
   ════════════════════════════════════════════════════════════ */
   .analytics-ai-loading,
   .analytics-ai-thinking {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 16px 0;
       color: var(--an-text-faint);
   }
   
   .analytics-ai-thinking-text { font-size: 12px; font-weight: 600; color: var(--an-text-faint); }
   
   .analytics-ai-loading .crm-ai-thinking-dots,
   .analytics-ai-thinking .crm-ai-thinking-dots {
       display: inline-flex;
       gap: 5px;
       align-items: center;
       flex-shrink: 0;
   }
   .analytics-ai-loading .crm-ai-thinking-dots span,
   .analytics-ai-thinking .crm-ai-thinking-dots span {
       width: 7px; height: 7px; border-radius: 50%;
       background: var(--an-text-muted);
       animation: anPulse 0.8s ease-in-out infinite;
       display: inline-block;
   }
   .analytics-ai-loading .crm-ai-thinking-dots span:nth-child(2),
   .analytics-ai-thinking .crm-ai-thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
   .analytics-ai-loading .crm-ai-thinking-dots span:nth-child(3),
   .analytics-ai-thinking .crm-ai-thinking-dots span:nth-child(3) { animation-delay: 0.30s; }
   
   .analytics-ai-idle {
       display: flex; flex-direction: column; align-items: center; gap: 8px;
       padding: 24px; opacity: 0.7;
   }
   .analytics-ai-idle-text { font-size: 11px; color: var(--an-text-faint); font-weight: 600; text-align: center; }
   
   /* ════════════════════════════════════════════════════════════
      20. AI HEADER BANNER
   ════════════════════════════════════════════════════════════ */
   .analytics-ai-header-banner {
       background: var(--an-surface);
       border: 1px solid var(--an-border);
       border-radius: var(--an-radius-lg);
       padding: 20px 24px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 16px;
       flex-wrap: wrap;
       margin-bottom: 16px;
   }
   
   .analytics-ai-banner-left {
       display: flex;
       align-items: center;
       gap: 14px;
       flex: 1;
       min-width: 0;
   }
   
   .analytics-ai-banner-icon {
       width: 48px;
       height: 48px;
       border-radius: var(--an-radius-lg);
       flex-shrink: 0;
       background: var(--an-ink);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 20px;
       color: var(--an-bg);
       position: relative;
   }
   
   .analytics-ai-banner-pulse {
       position: absolute;
       inset: -3px;
       border-radius: 17px;
       border: 2px solid var(--an-border);
       animation: anGlow 2.5s ease-in-out infinite;
   }
   
   .analytics-ai-banner-title {
       font-size: 16px;
       font-weight: 700;
       color: var(--an-text);
       margin-bottom: 3px;
   }
   
   .analytics-ai-banner-sub {
       font-size: 11px;
       color: var(--an-text-muted);
       line-height: 1.5;
   }
   
   .analytics-ai-banner-actions {
       display: flex;
       align-items: center;
       gap: 10px;
       flex-shrink: 0;
   }
   
   .analytics-ai-refresh-btn {
       display: flex;
       align-items: center;
       gap: 6px;
       padding: 9px 18px;
       border-radius: var(--an-radius);
       font-size: 12px;
       font-weight: 700;
       background: var(--an-ink);
       color: var(--an-bg);
       border: none;
       cursor: pointer;
       transition: var(--an-transition);
       font-family: inherit;
   }
   .analytics-ai-refresh-btn:hover { opacity: 0.85; }
   .analytics-ai-refresh-btn i { font-size: 11px; }
   
   .analytics-ai-last-gen {
       font-size: 10px;
       color: var(--an-text-faint);
       font-weight: 500;
       white-space: nowrap;
   }
   
   .analytics-ai-single-refresh {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 6px 12px;
       border-radius: var(--an-radius);
       border: 1px solid var(--an-border);
       background: var(--an-border-soft);
       color: var(--an-text);
       cursor: pointer;
       font-size: 11px;
       font-weight: 700;
       white-space: nowrap;
       flex-shrink: 0;
       width: max-content;
       min-width: max-content;
       box-sizing: border-box;
       transition: var(--an-transition);
   }
   .analytics-ai-single-refresh:hover { border-color: var(--an-ink-soft); background: var(--an-widget-bg); }
   .analytics-ai-single-refresh i { font-size: 10px; }
   
   /* ════════════════════════════════════════════════════════════
      21. AI CONTENT AREA & NARRATIVE
   ════════════════════════════════════════════════════════════ */
   .analytics-ai-content { min-height: 60px; }
   
   .analytics-ai-narrative { font-size: 13px; line-height: 1.8; color: var(--an-text); }
   .analytics-ai-narrative--compact { font-size: 12px; line-height: 1.65; }
   
   .analytics-ai-h2 { font-size: 14px; font-weight: 700; color: var(--an-text); margin: 16px 0 6px; display: block; }
   .analytics-ai-h3 {
       font-size: 11px; font-weight: 700; color: var(--an-text);
       text-transform: uppercase; letter-spacing: 0.6px; margin: 12px 0 5px; display: block;
   }
   
   .analytics-ai-bullet { display: flex; align-items: flex-start; gap: 8px; margin: 5px 0; font-size: 12.5px; color: var(--an-text); }
   .analytics-ai-bullet-dot { color: var(--an-text-muted); font-size: 10px; margin-top: 4px; flex-shrink: 0; }
   
   .analytics-ai-numbered { display: flex; align-items: flex-start; gap: 8px; margin: 5px 0; font-size: 12.5px; color: var(--an-text); }
   .analytics-ai-num { color: var(--an-text); font-weight: 700; font-size: 11px; min-width: 16px; flex-shrink: 0; padding-top: 2px; }
   
   .analytics-ai-paragraph-break { height: 10px; display: block; }
   
   .analytics-ai-footer {
       margin-top: 14px;
       padding-top: 10px;
       border-top: 1px solid var(--an-border-soft);
       font-size: 10px;
       color: var(--an-text-faint);
       display: flex;
       align-items: center;
       gap: 5px;
   }
   
   .analytics-ai-error {
       padding: 12px 14px;
       border-radius: var(--an-radius);
       background: var(--an-danger-bg);
       border: 1px solid rgba(220,38,38,0.2);
       font-size: 12px;
       color: var(--an-danger);
       font-weight: 600;
       display: flex;
       align-items: center;
       gap: 8px;
   }
   
   /* ════════════════════════════════════════════════════════════
      22. DORMANT COUNT BADGE
   ════════════════════════════════════════════════════════════ */
   .analytics-dormant-badge {
       font-size: 10px;
       font-weight: 700;
       padding: 3px 10px;
       border-radius: var(--an-radius-full);
       background: var(--an-border-soft);
       color: var(--an-text-faint);
       border: 1px solid var(--an-border);
       white-space: nowrap;
       flex-shrink: 0;
   }
   .analytics-dormant-badge--alert {
       background: var(--an-danger-bg) !important;
       color: var(--an-danger) !important;
       border-color: rgba(220,38,38,0.2) !important;
       animation: anPulse 2s ease-in-out infinite;
   }
   
   /* ════════════════════════════════════════════════════════════
      23. CUSTOM DASHBOARD — Header
   ════════════════════════════════════════════════════════════ */
   .analytics-custom-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 16px;
       flex-wrap: wrap;
       background: var(--an-widget-bg);
       border: 1px solid var(--an-widget-border);
       border-radius: var(--an-radius-lg);
       padding: 20px;
       margin-bottom: 16px;
       box-shadow: var(--an-widget-shadow);
   }
   
   .analytics-custom-header-left { display: flex; align-items: center; gap: 12px; }
   
   .analytics-custom-header-icon {
       width: 44px;
       height: 44px;
       border-radius: var(--an-radius-lg);
       flex-shrink: 0;
       background: var(--an-ink);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 18px;
       color: var(--an-bg);
   }
   
   .analytics-custom-header-title { font-size: 15px; font-weight: 700; color: var(--an-text); margin-bottom: 3px; }
   .analytics-custom-header-sub { font-size: 11px; color: var(--an-text-muted); }
   .analytics-custom-header-actions { display: flex; gap: 8px; flex-shrink: 0; }
   
   .analytics-custom-btn {
       padding: 8px 16px;
       border-radius: var(--an-radius);
       font-size: 12px;
       font-weight: 700;
       cursor: pointer;
       transition: var(--an-transition);
       display: flex;
       align-items: center;
       gap: 6px;
       font-family: inherit;
       white-space: nowrap;
   }
   .analytics-custom-btn--primary {
       background: var(--an-ink);
       color: var(--an-bg);
       border: none;
   }
   .analytics-custom-btn--primary:hover { opacity: 0.85; }
   
   .analytics-custom-btn--secondary {
       background: transparent;
       border: 1px solid var(--an-border);
       color: var(--an-text-muted);
   }
   .analytics-custom-btn--secondary:hover { border-color: var(--an-ink); color: var(--an-text); }
   
   /* ════════════════════════════════════════════════════════════
      24. CUSTOM DASHBOARD — Widget Selector
   ════════════════════════════════════════════════════════════ */
   .analytics-custom-cat-section { margin-bottom: 22px; }
   .analytics-custom-cat-section:last-child { margin-bottom: 0; }
   
   .analytics-custom-cat-label {
       font-size: 11px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.8px;
       margin-bottom: 10px;
       display: flex;
       align-items: center;
       color: var(--an-text-muted);
   }
   
   .analytics-custom-widgets-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
       gap: 8px;
   }
   
   .analytics-custom-widget-card {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 10px 12px;
       border-radius: var(--an-radius);
       border: 1px solid var(--an-widget-border);
       background: var(--an-widget-bg);
       cursor: pointer;
       transition: var(--an-transition);
       user-select: none;
   }
   .analytics-custom-widget-card:hover { border-color: var(--an-ink-soft); }
   .analytics-custom-widget-card--active {
       border-color: var(--an-ink) !important;
       background: var(--an-border-soft);
   }
   
   .analytics-custom-widget-check {
       width: 16px;
       height: 16px;
       border-radius: 4px;
       border: 2px solid var(--an-border);
       flex-shrink: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: var(--an-transition);
   }
   
   .analytics-custom-widget-icon {
       width: 30px;
       height: 30px;
       border-radius: var(--an-radius);
       flex-shrink: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: var(--an-transition);
       background: var(--an-border-soft);
       border: 1px solid var(--an-border);
   }
   
   .analytics-custom-widget-label {
       font-size: 11px;
       font-weight: 700;
       color: var(--an-text);
       flex: 1;
       min-width: 0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }
   
   .analytics-custom-widget-tag {
       font-size: 9px;
       font-weight: 700;
       padding: 2px 6px;
       border-radius: 6px;
       white-space: nowrap;
       flex-shrink: 0;
       background: var(--an-border-soft);
       color: var(--an-text-muted);
   }
   
   /* ════════════════════════════════════════════════════════════
      25. CUSTOM DASHBOARD — Preview Grid (Drag & Drop)
   ════════════════════════════════════════════════════════════ */
   .analytics-custom-preview-grid { display: flex; flex-direction: column; gap: 6px; }
   
   .analytics-custom-preview-item {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 10px 14px;
       border-radius: var(--an-radius);
       background: var(--an-surface);
       border: 1px solid var(--an-widget-border);
       cursor: grab;
       transition: var(--an-transition);
       user-select: none;
   }
   .analytics-custom-preview-item:hover { border-color: var(--an-ink-soft); }
   .analytics-custom-preview-item:active { cursor: grabbing; }
   
   .analytics-custom-preview-drag { cursor: grab; flex-shrink: 0; opacity: 0.5; transition: opacity 0.15s; }
   .analytics-custom-preview-item:hover .analytics-custom-preview-drag { opacity: 1; }
   
   .analytics-custom-preview-icon {
       width: 28px;
       height: 28px;
       border-radius: var(--an-radius);
       flex-shrink: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       background: var(--an-border-soft);
       border: 1px solid var(--an-border);
   }
   
   .analytics-custom-preview-info { flex: 1; min-width: 0; }
   
   .analytics-custom-preview-name {
       font-size: 12px;
       font-weight: 700;
       color: var(--an-text);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }
   
   .analytics-custom-preview-cat { font-size: 10px; font-weight: 600; margin-top: 1px; color: var(--an-text-muted); }
   
   .analytics-custom-preview-order {
       font-size: 10px;
       font-weight: 700;
       color: var(--an-text-faint);
       min-width: 20px;
       text-align: center;
       flex-shrink: 0;
   }
   
   .analytics-custom-preview-remove {
       width: 22px;
       height: 22px;
       border-radius: var(--an-radius);
       flex-shrink: 0;
       border: 1px solid var(--an-border);
       background: transparent;
       color: var(--an-text-faint);
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: var(--an-transition);
       font-family: inherit;
   }
   .analytics-custom-preview-remove:hover {
       background: var(--an-danger-bg);
       border-color: rgba(220,38,38,0.2);
       color: var(--an-danger);
   }
   
   /* ════════════════════════════════════════════════════════════
      26. CUSTOM DASHBOARD — Live Widget Preview
   ════════════════════════════════════════════════════════════ */
   .analytics-custom-live-section { margin-top: 16px; }
   
   .analytics-custom-live-label {
       font-size: 12px;
       font-weight: 700;
       color: var(--an-text);
       margin-bottom: 12px;
       display: flex;
       align-items: center;
       gap: 6px;
   }
   
   .analytics-custom-live-content {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
       gap: 16px;
   }
   
   .analytics-custom-live-widget {
       background: var(--an-widget-bg);
       border: 1px solid var(--an-widget-border);
       border-radius: var(--an-radius-lg);
       padding: 16px;
       box-shadow: var(--an-widget-shadow);
       transition: border-color .15s ease;
   }
   .analytics-custom-live-widget:hover { border-color: var(--an-ink-soft); }
   
   .analytics-custom-metric-big { font-size: 28px; font-weight: 700; line-height: 1.1; margin-bottom: 4px; color: var(--an-text); }
   .analytics-custom-metric-sub { font-size: 11px; color: var(--an-text-muted); }
   
   .analytics-custom-mini-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 6px 0;
       border-bottom: 1px solid var(--an-border-soft);
       font-size: 12px;
       color: var(--an-text);
   }
   .analytics-custom-mini-row:last-child { border-bottom: none; }
   
   /* ════════════════════════════════════════════════════════════
      27. RESPONSIVE — TABLET (≤ 1200px)
   ════════════════════════════════════════════════════════════ */
   @media (max-width: 1200px) {
       .analytics-kpi-row { grid-template-columns: repeat(3, 1fr); }
       #analyticsHeroMetrics { grid-template-columns: repeat(3, 1fr); }
       .analytics-coverage-row { grid-template-columns: 1fr 1fr; }
       .analytics-coverage-bar-wrap { display: none; }
       .analytics-benchmark-grid { grid-template-columns: repeat(3, 1fr); }
       .analytics-ai-tabs-grid { grid-template-columns: 1fr 1fr; }
       .analytics-ai-banner-title { font-size: 14px; }
       .analytics-ai-banner-sub   { font-size: 10px; }
       .analytics-custom-widgets-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
       .analytics-custom-live-content { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
   }
   
   /* ════════════════════════════════════════════════════════════
      28. RESPONSIVE — MOBILE (≤ 768px)
   ════════════════════════════════════════════════════════════ */
   @media (max-width: 768px) {
       .analytics-row-2col      { grid-template-columns: 1fr; }
       .analytics-ai-tabs-grid  { grid-template-columns: 1fr; }
       .analytics-kpi-row       { grid-template-columns: repeat(2, 1fr); }
       #analyticsHeroMetrics    { grid-template-columns: repeat(2, 1fr); gap: 8px; }
   
       .analytics-widget { padding: 14px; }
       .analytics-metric-value { font-size: 18px; }
   
       .analytics-tabs-bar { gap: 2px; padding: 4px; }
       .analytics-tab-btn  { padding: 7px 10px; font-size: 11px; }
       .analytics-tab-btn span { display: none; }
   
       .analytics-funnel-stages { min-width: 140px; font-size: 11px; }
       .analytics-funnel-rate-wrap { min-width: 90px; }
   
       .analytics-lp-funnel-stage { grid-template-columns: 120px 1fr; }
       .analytics-lp-funnel-meta { display: none; }
   
       .analytics-table-header,
       .analytics-table-row { grid-template-columns: 1.5fr 1fr 60px; min-width: 0; }
       .analytics-table-header span:nth-child(2),
       .analytics-table-row .analytics-table-cell:nth-child(2),
       .analytics-table-header span:nth-child(4),
       .analytics-table-row .analytics-table-cell:nth-child(4),
       .analytics-table-header span:nth-child(5),
       .analytics-table-row .analytics-date-cell { display: none; }
   
       .analytics-dormant-grid { grid-template-columns: 1fr; }
   
       .analytics-coverage-row { grid-template-columns: 1fr; gap: 8px; }
       .analytics-coverage-stats { gap: 10px; }
   
       .analytics-sourcing-row { grid-template-columns: 1.5fr 1fr 80px; }
       .analytics-sourcing-row > div:nth-child(3),
       .analytics-sourcing-row > div:nth-child(4),
       .analytics-sourcing-row > div:nth-child(5) { display: none; }
   
       .analytics-benchmark-grid { grid-template-columns: repeat(2, 1fr); }
   
       .analytics-hero-metric { padding: 10px; }
       .analytics-hero-metric-value { font-size: 16px; }
       .analytics-hero-delta { display: none; }
   
       .analytics-range-btn { padding: 5px 8px; font-size: 10px; }
   
       .analytics-ai-header-banner { flex-direction: column; align-items: flex-start; padding: 16px; }
       .analytics-ai-banner-icon { width: 40px; height: 40px; font-size: 17px; }
       .analytics-ai-banner-title { font-size: 14px; }
       .analytics-ai-banner-actions { width: 100%; justify-content: space-between; }
       .analytics-ai-refresh-btn { flex: 1; justify-content: center; }
   
       .analytics-custom-header { flex-direction: column; align-items: flex-start; }
       .analytics-custom-header-actions { width: 100%; }
       .analytics-custom-btn { flex: 1; justify-content: center; }
       .analytics-custom-widgets-grid { grid-template-columns: repeat(2, 1fr); }
       .analytics-custom-widget-tag { display: none; }
       .analytics-custom-live-content { grid-template-columns: 1fr; }
       .analytics-custom-preview-item { padding: 8px 10px; }
       .analytics-custom-preview-order { display: none; }
   
       .analytics-dormant-badge { font-size: 9px; padding: 2px 8px; }
   
       .analytics-ai-narrative    { font-size: 12px; }
       .analytics-ai-h2           { font-size: 13px; }
       .analytics-ai-bullet,
       .analytics-ai-numbered     { font-size: 11.5px; }
   
       .analytics-heatmap-wrap    { overflow-x: scroll; }
       .analytics-heatmap-grid    { grid-template-rows: repeat(7, 14px); gap: 1px; }
       .analytics-heatmap-cell    { border-radius: 2px; }
       .analytics-heatmap-count   { display: none; }
       .analytics-heatmap-legend-cell { width: 10px; height: 10px; }
   
       .analytics-ai-single-refresh { width: 26px; height: 26px; }
       .analytics-hot-prospect-row { gap: 8px; }
       .analytics-hot-prospect-name { font-size: 12px; }
   }
   
   /* ════════════════════════════════════════════════════════════
      29. RESPONSIVE — SMALL MOBILE (≤ 480px)
   ════════════════════════════════════════════════════════════ */
   @media (max-width: 480px) {
       .analytics-kpi-row    { grid-template-columns: 1fr 1fr; gap: 8px; }
       #analyticsHeroMetrics { grid-template-columns: 1fr 1fr; }
       .analytics-benchmark-grid { grid-template-columns: 1fr; }
       .analytics-metric-value { font-size: 16px; }
       .analytics-hero-metric-value { font-size: 14px; }
       .analytics-tab-btn { padding: 6px 8px; font-size: 10px; gap: 4px; }
       .analytics-heatmap-wrap { min-width: 0; }
   
       .analytics-ai-banner-left    { gap: 10px; }
       .analytics-ai-banner-icon    { width: 36px; height: 36px; font-size: 15px; }
       .analytics-ai-banner-title   { font-size: 13px; }
       .analytics-ai-banner-sub     { display: none; }
       .analytics-custom-widgets-grid { grid-template-columns: 1fr; }
       .analytics-dormant-grid { grid-template-columns: 1fr; }
       .analytics-lp-funnel-stage { grid-template-columns: 100px 1fr; gap: 8px; }
       .analytics-custom-metric-big { font-size: 22px; }
       .analytics-coverage-stats { gap: 8px; }
       .analytics-coverage-stat  { font-size: 10px; }
       .analytics-heatmap-days { display: none; }
   }
   
   /* ════════════════════════════════════════════════════════════
      30. LANDSCAPE MOBILE
   ════════════════════════════════════════════════════════════ */
   @media (max-width: 768px) and (orientation: landscape) {
       .analytics-ai-header-banner { padding: 12px 16px; }
       .analytics-ai-banner-sub    { display: none; }
       .analytics-ai-tabs-grid     { grid-template-columns: 1fr 1fr; }
       .analytics-benchmark-grid   { grid-template-columns: repeat(3, 1fr); }
       .analytics-heatmap-grid     { grid-template-rows: repeat(7, 12px); }
   }
   
   /* ════════════════════════════════════════════════════════════
      31. SCROLLBARS
   ════════════════════════════════════════════════════════════ */
   .analytics-heatmap-wrap::-webkit-scrollbar { height: 4px; }
   .analytics-heatmap-wrap::-webkit-scrollbar-thumb { background: var(--an-border); border-radius: 4px; }
   .analytics-contacts-table::-webkit-scrollbar { height: 4px; }
   .analytics-contacts-table::-webkit-scrollbar-thumb { background: var(--an-border); border-radius: 4px; }
   
   /* ════════════════════════════════════════════════════════════
      32. ANIMATIONS
   ════════════════════════════════════════════════════════════ */
   @keyframes anPulse {
       0%, 100% { opacity: 1; transform: scale(1); }
       50%      { opacity: 0.5; transform: scale(0.85); }
   }
   
   @keyframes anCardIn {
       from { opacity: 0; transform: translateY(12px); }
       to   { opacity: 1; transform: translateY(0); }
   }
   
   .analytics-metric-card,
   .analytics-hero-metric { animation: anCardIn 0.3s ease forwards; }
   
   .analytics-kpi-row > *:nth-child(1) { animation-delay: 0ms;   }
   .analytics-kpi-row > *:nth-child(2) { animation-delay: 40ms;  }
   .analytics-kpi-row > *:nth-child(3) { animation-delay: 80ms;  }
   .analytics-kpi-row > *:nth-child(4) { animation-delay: 120ms; }
   .analytics-kpi-row > *:nth-child(5) { animation-delay: 160ms; }
   .analytics-kpi-row > *:nth-child(6) { animation-delay: 200ms; }
   
   #analyticsHeroMetrics > *:nth-child(1) { animation-delay: 0ms;   }
   #analyticsHeroMetrics > *:nth-child(2) { animation-delay: 50ms;  }
   #analyticsHeroMetrics > *:nth-child(3) { animation-delay: 100ms; }
   #analyticsHeroMetrics > *:nth-child(4) { animation-delay: 150ms; }
   #analyticsHeroMetrics > *:nth-child(5) { animation-delay: 200ms; }
   #analyticsHeroMetrics > *:nth-child(6) { animation-delay: 250ms; }
   
   @keyframes anWidgetIn {
       from { opacity: 0; transform: translateY(12px); }
       to   { opacity: 1; transform: translateY(0); }
   }
   .analytics-widget { animation: anWidgetIn 0.3s ease forwards; }
   .analytics-ai-header-banner { animation: anCardIn 0.35s ease forwards; }
   
   @keyframes anGlow {
       0%, 100% { opacity: 0.5; }
       50%      { opacity: 1; }
   }
   
   /* ════════════════════════════════════════════════════════════
      33. ACCESSIBILITY & PERFORMANCE
   ════════════════════════════════════════════════════════════ */
   .analytics-tab-btn:focus-visible,
   .analytics-range-btn:focus-visible,
   .analytics-custom-btn:focus-visible,
   .analytics-ai-refresh-btn:focus-visible,
   .analytics-dormant-btn:focus-visible {
       outline: 1px solid var(--an-ink);
       outline-offset: 2px;
   }
   
   @media (prefers-reduced-motion: reduce) {
       .analytics-metric-card,
       .analytics-hero-metric,
       .analytics-widget,
       .analytics-ai-header-banner { animation: none !important; }
   
       .analytics-funnel-bar-fill,
       .analytics-lp-funnel-bar-fill,
       .analytics-mini-bar-fill,
       .analytics-coverage-bar-fill { transition: none !important; }
   
       .analytics-dormant-badge--alert,
       .analytics-metric-alert-dot { animation: none !important; }
   
       .analytics-ai-banner-pulse { animation: none !important; }
   }
   
   .analytics-widget,
   .analytics-metric-card,
   .analytics-hero-metric,
   .analytics-dormant-card,
   .analytics-custom-widget-card,
   .analytics-custom-preview-item {
       will-change: transform;
       -webkit-backface-visibility: hidden;
       backface-visibility: hidden;
   }
   
   .analytics-heatmap-wrap,
   .analytics-contacts-table,
   .analytics-custom-live-content { -webkit-overflow-scrolling: touch; }
   
   @media (max-width: 768px) {
       .analytics-range-btn,
       .analytics-tab-btn,
       .analytics-custom-btn { font-size: 16px; }
       .analytics-range-btn:not(:focus),
       .analytics-tab-btn:not(:focus),
       .analytics-custom-btn:not(:focus) { font-size: 12px; }
   }
   
   .analytics-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .analytics-sr-only {
       position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
       overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
   }
   
   /* ════════════════════════════════════════════════════════════
      34. PRINT
   ════════════════════════════════════════════════════════════ */
   @media print {
       .analytics-tabs-bar, .analytics-ai-fab, #crmHeader, #crmSidebar,
       .analytics-range-bar, .analytics-ai-header-banner, .analytics-ai-refresh-btn,
       .analytics-ai-single-refresh, .analytics-custom-btn, .analytics-custom-header-actions,
       .analytics-dormant-btn, .analytics-table-action-btn, .analytics-action-link {
           display: none !important;
       }
       .analytics-widget { break-inside: avoid; box-shadow: none; border: 1px solid #e2e8f0; }
       .analytics-tab-panel { display: block !important; }
       #analyticsHeroMetrics { grid-template-columns: repeat(3, 1fr); }
       .analytics-ai-narrative { font-size: 11px; line-height: 1.6; }
       .analytics-widget-ai { background: #fafafa !important; border-color: #e5e5e5 !important; }
       .analytics-metric-card { break-inside: avoid; box-shadow: none !important; border: 1px solid #e2e8f0 !important; }
       .analytics-dormant-grid,
       .analytics-benchmark-grid,
       .analytics-kpi-row { grid-template-columns: repeat(3, 1fr) !important; }
       .analytics-ai-tabs-grid { grid-template-columns: 1fr 1fr !important; }
       .analytics-heatmap-count { display: flex !important; }
   }
   
   /* ══════════════════════════════════════════════════════════
      35. THINKING BLOCK — Style Claude minimaliste (monochrome)
   ══════════════════════════════════════════════════════════ */
   .aa-think {
       margin-bottom: 12px;
       border: 1px solid var(--an-border);
       border-radius: var(--an-radius-lg);
       background: var(--an-widget-bg);
       overflow: hidden;
       transition: border-color .25s ease, box-shadow .25s ease;
   }
   .aa-think.is-active { border-color: var(--an-ink-soft); box-shadow: var(--an-shadow-sm); }
   
   .aa-think-header {
       display: flex; align-items: center; gap: 10px; width: 100%;
       padding: 10px 14px; background: transparent; border: none;
       cursor: pointer; font-family: inherit; text-align: left;
   }
   .aa-think-header:hover { background: var(--an-border-soft); }
   
   .aa-think-icon { position: relative; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
   
   .aa-think-ring {
       position: absolute; inset: -3px; border-radius: 50%;
       border: 1.6px solid var(--an-border);
       border-top-color: var(--an-ink);
       animation: aaRingSpin 0.85s linear infinite;
       opacity: 1; transition: opacity .3s ease;
   }
   .aa-think:not(.is-active) .aa-think-ring { opacity: 0; }
   @keyframes aaRingSpin { to { transform: rotate(360deg); } }
   
   @property --think-radius { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
   @property --think-angle  { syntax: '<angle>';      inherits: false; initial-value: 0deg; }
   
   .aa-think-logo {
        width: 13px; height: 13px; object-fit: contain; display: block;
        opacity: 1; /* couleur native Claude conservée */
        transition: opacity .3s ease;
        --think-radius: 0%; --think-angle: 0deg;
        -webkit-mask-image: radial-gradient(circle, #000 62%, transparent 64%),
            conic-gradient(from -90deg, #000 var(--think-angle), transparent var(--think-angle));
        mask-image: radial-gradient(circle, #000 62%, transparent 64%),
            conic-gradient(from -90deg, #000 var(--think-angle), transparent var(--think-angle));
        -webkit-mask-size: var(--think-radius) var(--think-radius), 100% 100%;
        mask-size: var(--think-radius) var(--think-radius), 100% 100%;
        -webkit-mask-repeat: no-repeat, no-repeat;
        mask-repeat: no-repeat, no-repeat;
        -webkit-mask-position: center, center;
        mask-position: center, center;
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
    }
   .aa-think.is-active .aa-think-logo { animation: aaLogoReveal 1.6s cubic-bezier(.45,0,.55,1) infinite; }
   .aa-think:not(.is-active) .aa-think-logo { --think-radius: 160%; --think-angle: 360deg; opacity: 1; }
   
   @keyframes aaLogoReveal {
       0%   { --think-radius: 0%;   --think-angle: 0deg;   opacity: 0;    }
       12%  { opacity: 1; }
       55%  { --think-radius: 160%; --think-angle: 360deg; opacity: 1;    }
       78%  { --think-radius: 160%; --think-angle: 360deg; opacity: 1;    }
       100% { --think-radius: 160%; --think-angle: 360deg; opacity: 0.15; }
   }
   
   .aa-think-label {
       flex: 1; font-size: 12.5px; font-weight: 600; color: var(--an-text);
       letter-spacing: 0.1px; display: flex; align-items: center; gap: 2px;
   }
   
   .aa-think-dots { display: inline-flex; gap: 2px; margin-left: 2px; }
   .aa-think-dots i {
       width: 3px; height: 3px; border-radius: 50%;
       background: var(--an-text-faint);
       animation: aaThinkDot 1.1s ease-in-out infinite;
       display: inline-block;
   }
   .aa-think-dots i:nth-child(2) { animation-delay: .15s; }
   .aa-think-dots i:nth-child(3) { animation-delay: .3s; }
   .aa-think:not(.is-active) .aa-think-dots { display: none; }
   @keyframes aaThinkDot {
       0%, 80%, 100% { opacity: .25; transform: translateY(0); }
       40%           { opacity: 1;   transform: translateY(-1.5px); }
   }
   
   .aa-think-chev { font-size: 10px; color: var(--an-text-faint); transition: transform .25s ease; flex-shrink: 0; }
   .aa-think.is-open .aa-think-chev { transform: rotate(180deg); }
   
   .aa-think-body { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.4,0,.2,1); }
   .aa-think.is-open .aa-think-body { max-height: 260px; overflow-y: auto; }
   
   .aa-think-text {
       padding: 2px 14px 14px 42px;
       font-size: 12px; line-height: 1.65; color: var(--an-text-muted);
       font-style: italic; white-space: pre-wrap;
       border-top: 1px solid var(--an-border-soft);
       margin-top: 2px; padding-top: 10px;
   }
   
   /* ══════════════════════════════════════════════════════════
      END — crm-analytics.css v2.0 — ULTRA PRO / MINIMALIST
      © AlphaVault AI — All rights reserved
   ══════════════════════════════════════════════════════════ */