@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');
  * { font-family: 'Montserrat', sans-serif; box-sizing: border-box; }

  /* ══════ BACKGROUND & BASE ══════ */
  body {
    background: #060b18;
    background-image:
      radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99,102,241,0.12), transparent),
      radial-gradient(ellipse 60% 40% at 80% 100%, rgba(212,168,67,0.08), transparent),
      radial-gradient(ellipse 40% 30% at 10% 60%, rgba(59,130,246,0.06), transparent);
    color: #e2e8f0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* ══════ SCROLLBARS ══════ */
  ::-webkit-scrollbar { width: 5px; height: 5px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.3); border-radius: 10px; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,0.5); }

  /* ══════ MANAGER TABLE — prominent yellow scrollbar ══════
     Scoped specifically so the rest of the app's subtle gray scrollbars
     stay untouched. Firefox uses scrollbar-color/width; Chromium/Safari
     use the ::-webkit-scrollbar pseudo-elements. */
  .mgr-table-scroll {
    scrollbar-color: #facc15 rgba(15,23,42,0.6);
    scrollbar-width: auto;
  }
  .mgr-table-scroll::-webkit-scrollbar { width: 14px; height: 14px; }
  .mgr-table-scroll::-webkit-scrollbar-track {
    background: rgba(15,23,42,0.6);
    border-radius: 8px;
  }
  .mgr-table-scroll::-webkit-scrollbar-thumb {
    background: #facc15;
    border-radius: 8px;
    border: 2px solid rgba(15,23,42,0.6);
  }
  .mgr-table-scroll::-webkit-scrollbar-thumb:hover {
    background: #fde047;
  }
  .mgr-table-scroll::-webkit-scrollbar-corner {
    background: rgba(15,23,42,0.6);
  }

  /* ══════ AD MANAGER WIDGET — chunky yellow scrollbar ══════
     Same yellow treatment as the manager table, just thicker so the user
     notices that the widget itself is the scroll container, not the page. */
  .am-scroll {
    scrollbar-color: #facc15 rgba(15,23,42,0.6);
    scrollbar-width: auto;
  }
  .am-scroll::-webkit-scrollbar { width: 18px; height: 18px; }
  .am-scroll::-webkit-scrollbar-track {
    background: rgba(15,23,42,0.6);
    border-radius: 10px;
  }
  .am-scroll::-webkit-scrollbar-thumb {
    background: #facc15;
    border-radius: 10px;
    border: 3px solid rgba(15,23,42,0.6);
  }
  .am-scroll::-webkit-scrollbar-thumb:hover {
    background: #fde047;
  }
  .am-scroll::-webkit-scrollbar-corner {
    background: rgba(15,23,42,0.6);
  }

  /* ══════ NEW CLIENT MODAL — Vercel/Linear settings-form aesthetic ══════ */
  /* Layer stack: modal gradient bg → card #1a2235 → input #0e1525 */
  .ncm-card {
    background: #1a2235;
    border: 1px solid #2a3548;
    border-radius: 12px;
    padding: 24px;
  }
  .ncm-input {
    width: 100%;
    background: #0e1525;
    color: #ffffff;
    border: 1px solid #2a3548;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 15px;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
    appearance: none;
    -webkit-appearance: none;
  }
  .ncm-input::placeholder { color: #64748b; }
  .ncm-input:hover { border-color: #3a455c; }
  .ncm-input:focus {
    border-color: #d4a843;
    box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.18);
  }
  .ncm-input:disabled { opacity: 0.5; cursor: not-allowed; }
  /* Date input arrow / select chevron stay visible */
  .ncm-input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
  select.ncm-input {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 38px;
  }

  /* ══════ AUTOFILL OVERRIDE — kills Chrome's yellow autofill bg ══════ */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus,
  textarea:-webkit-autofill {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px #0e1525 inset !important;
    box-shadow: 0 0 0 1000px #0e1525 inset !important;
    caret-color: #ffffff !important;
    transition: background-color 600000s ease-in-out 0s, color 600000s ease-in-out 0s;
  }

  /* ══════ GLASS MORPHISM ══════ */
  .glass {
    background: linear-gradient(135deg, rgba(15,23,42,0.8), rgba(30,41,59,0.6));
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid rgba(148,163,184,0.08);
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  }
  .glass:hover {
    border-color: rgba(148,163,184,0.15);
  }

  .glow { box-shadow: 0 0 30px rgba(212,168,67,0.12), 0 0 60px rgba(212,168,67,0.05); }

  /* ══════ KPI CARDS ══════ */
  .kpi-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }
  .kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212,168,67,0.4), transparent);
    opacity: 0;
    transition: opacity 0.3s;
  }
  .kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3), 0 0 0 1px rgba(212,168,67,0.1);
  }
  .kpi-card:hover::before { opacity: 1; }

  /* ══════ ANIMATIONS ══════ */
  .pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
  @keyframes trackerPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(212,168,67,0.4); } 50% { box-shadow: 0 0 0 8px rgba(212,168,67,0); } }
  .tracker-pulse { animation: trackerPulse 2s ease-in-out infinite; }

  .fade-in { animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

  .slide-in { animation: slideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
  @keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }

  .scale-in { animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
  @keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

  @keyframes progressPulse {
    0% { opacity: 0.4; transform: translateX(-60%); }
    50% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0.4; transform: translateX(60%); }
  }

  @keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  .shimmer-loading {
    background: linear-gradient(90deg, rgba(30,41,59,0.5) 25%, rgba(51,65,85,0.5) 50%, rgba(30,41,59,0.5) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }

  @keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(212,168,67,0.2); }
    50% { box-shadow: 0 0 20px rgba(212,168,67,0.4); }
  }

  /* Staggered card animations */
  .stagger-1 { animation-delay: 0.05s; }
  .stagger-2 { animation-delay: 0.1s; }
  .stagger-3 { animation-delay: 0.15s; }
  .stagger-4 { animation-delay: 0.2s; }
  .stagger-5 { animation-delay: 0.25s; }
  .stagger-6 { animation-delay: 0.3s; }
  .stagger-7 { animation-delay: 0.35s; }

  /* ══════ STATUS COLORS ══════ */
  .status-green { color: #34d399; }
  .status-red { color: #f87171; }
  .status-yellow { color: #fbbf24; }

  /* ══════ TABLES ══════ */
  .table-row { transition: background 0.2s, box-shadow 0.2s; }
  .table-row:hover { background: rgba(212,168,67,0.04); box-shadow: inset 3px 0 0 rgba(212,168,67,0.5); }

  /* ══════ SIDEBAR ══════ */
  .sidebar {
    width: 260px; min-width: 260px;
    background: linear-gradient(180deg, rgba(15,23,42,0.95), rgba(6,11,24,0.98));
    border-right: 1px solid rgba(148,163,184,0.06);
  }
  .nav-item { position: relative; transition: all 0.2s; border-radius: 10px; margin: 2px 8px; }
  .nav-item:hover { background: rgba(148,163,184,0.06); }
  .nav-item.active { background: rgba(212,168,67,0.08); }
  .nav-item.active::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 55%; background: linear-gradient(180deg, #d4a843, #e0bc5e);
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 10px rgba(212,168,67,0.3);
  }

  /* ══════ SELECT / FORM ══════ */
  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    transition: all 0.2s;
  }
  select:focus { outline: none; border-color: #d4a843; box-shadow: 0 0 0 3px rgba(212,168,67,0.12); }

  /* ══════ CHARTS ══════ */
  .chart-container {
    position: relative; height: 220px; border-radius: 12px;
    background: rgba(15,23,42,0.4);
    border: 1px solid rgba(148,163,184,0.05);
  }

  /* ══════ BADGES ══════ */
  .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; }
  .badge-green { background: rgba(34,197,94,0.12); color: #34d399; border: 1px solid rgba(34,197,94,0.15); }
  .badge-red { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.15); }
  .badge-yellow { background: rgba(234,179,8,0.12); color: #fbbf24; border: 1px solid rgba(234,179,8,0.15); }
  .badge-blue { background: rgba(59,130,246,0.12); color: #60a5fa; border: 1px solid rgba(59,130,246,0.15); }
  .badge-gray { background: rgba(148,163,184,0.1); color: #94a3b8; border: 1px solid rgba(148,163,184,0.1); }
  .badge-purple { background: rgba(168,85,247,0.12); color: #c084fc; border: 1px solid rgba(168,85,247,0.15); }
  .badge-orange { background: rgba(249,115,22,0.15); color: #f97316; border: 1px solid rgba(249,115,22,0.2); }

  /* ══════ METRICS ══════ */
  .metric-good { color: #34d399; }
  .metric-bad { color: #f87171; }
  .metric-warn { color: #fbbf24; }
  .metric-orange { color: #f97316; }
  .metric-neutral { color: #e2e8f0; }
  .lead-booked { color: #34d399; }
  .lead-client { color: #fbbf24; }
  .lead-cancelled { color: #f87171; }
  .lead-open { color: #e2e8f0; }

  .metric-cell-green { background: rgba(34,197,94,0.1); color: #34d399; border-radius: 4px; }
  .metric-cell-yellow { background: rgba(234,179,8,0.1); color: #fbbf24; border-radius: 4px; }
  .metric-cell-red { background: rgba(239,68,68,0.1); color: #f87171; border-radius: 4px; }

  /* ══════ FILTER BADGES ══════ */
  .filter-badge {
    display: inline-flex; align-items: center; padding: 5px 16px; border-radius: 9999px;
    font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1.5px solid transparent; user-select: none; letter-spacing: 0.01em;
  }
  .filter-badge:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
  .filter-badge.active { border-color: rgba(255,255,255,0.8); box-shadow: 0 0 16px rgba(255,255,255,0.15); }
  .filter-badge.fb-green { background: rgba(34,197,94,0.15); color: #34d399; }
  .filter-badge.fb-red { background: rgba(239,68,68,0.15); color: #f87171; }
  .filter-badge.fb-white { background: rgba(226,232,240,0.1); color: #e2e8f0; }
  .filter-badge.fb-yellow { background: rgba(251,191,36,0.15); color: #fbbf24; }
  .filter-badge.fb-blue { background: rgba(59,130,246,0.15); color: #60a5fa; }

  /* ══════ CYCLE ROWS ══════ */
  .cycle-row-clickable { cursor: pointer; transition: all 0.2s; }
  .cycle-row-clickable:hover { background: rgba(59,130,246,0.08) !important; box-shadow: inset 3px 0 0 rgba(59,130,246,0.4); }

  /* ══════ PACING BAR ══════ */
  .pacing-bar { height: 8px; border-radius: 4px; background: rgba(100,116,139,0.15); overflow: hidden; }
  .pacing-fill { height: 100%; border-radius: 4px; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }

  /* ══════ HEALTH RING ══════ */
  .health-ring {
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .health-ring:hover { transform: scale(1.1); }

  /* ══════ FUNNEL ══════ */
  .funnel-bar {
    height: 28px; border-radius: 6px; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; align-items: center; padding: 0 10px; font-size: 11px; font-weight: 600;
  }

  /* ══════ TABS ══════ */
  .tab-btn {
    padding: 7px 18px; border-radius: 10px; font-size: 13px; cursor: pointer;
    transition: all 0.25s; font-weight: 500;
  }
  .tab-btn.active { background: linear-gradient(135deg, rgba(212,168,67,0.15), rgba(212,168,67,0.08)); color: #e0bc5e; font-weight: 600; box-shadow: 0 0 0 1px rgba(212,168,67,0.2); }
  .tab-btn:not(.active) { color: #94a3b8; }
  .tab-btn:not(.active):hover { color: #e2e8f0; background: rgba(100,116,139,0.08); }

  /* ══════ META VIEW TOGGLES ══════ */
  .meta-view-toggle {
    min-width: 72px; min-height: 30px; font-size: 11px !important; font-weight: 500;
    transition: all 0.2s; border-radius: 8px;
  }
  .meta-view-toggle:hover { opacity: 0.85; transform: translateY(-1px); }
  .meta-view-toggle.active { font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }

  /* ══════ BACK BUTTON ══════ */
  .back-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
    border-radius: 10px; font-size: 13px; color: #94a3b8; font-weight: 500;
    transition: all 0.2s; border: 1px solid transparent;
  }
  .back-btn:hover { background: rgba(100,116,139,0.12); color: #e2e8f0; border-color: rgba(148,163,184,0.1); }

  /* ══════ SECTION DIVIDER ══════ */
  .section-divider {
    height: 1px; margin: 28px 0;
    background: linear-gradient(90deg, transparent, rgba(148,163,184,0.12), transparent);
  }

  /* ══════ HEALTH SCROLL ══════ */
  .health-scroll { max-height: 300px; overflow-y: auto; padding-right: 4px; }

  /* ══════ SMOOTH VIEW TRANSITIONS ══════ */
  .view-container { animation: viewEnter 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
  @keyframes viewEnter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

  /* ══════ CARD GROUP HOVER LIFT ══════ */
  .glass-lift { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  .glass-lift:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,0.25), 0 0 0 1px rgba(148,163,184,0.08); }

  /* ══════ METRIC NUMBER TRANSITIONS ══════ */
  .metric-value { transition: color 0.3s; }

  /* ══════ FOCUS RING FOR ACCESSIBILITY ══════ */
  button:focus-visible, select:focus-visible, .nav-item:focus-visible { outline: 2px solid rgba(212,168,67,0.5); outline-offset: 2px; border-radius: 8px; }

  /* ══════ LOADING SKELETON ══════ */
  .skeleton { background: linear-gradient(90deg, rgba(30,41,59,0.6) 0%, rgba(51,65,85,0.4) 50%, rgba(30,41,59,0.6) 100%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }

  /* ══════ SECTION HEADER ══════ */
  .section-title {
    font-size: 18px; font-weight: 700; color: #f1f5f9;
    display: flex; align-items: center; gap: 10px;
  }
  .section-title::before {
    content: '';
    width: 4px; height: 20px;
    background: linear-gradient(180deg, #d4a843, #e0bc5e);
    border-radius: 2px;
    flex-shrink: 0;
  }

  /* ══════ RESPONSIVE ══════ */
  @media (max-width: 1400px) { .kpi-grid-7 { grid-template-columns: repeat(4, 1fr) !important; } }
  @media (max-width: 1100px) { .kpi-grid-7 { grid-template-columns: repeat(3, 1fr) !important; } }
  @media (max-width: 900px) { .kpi-grid-7 { grid-template-columns: repeat(2, 1fr) !important; } }
  @media (max-width: 640px) { .kpi-grid-7 { grid-template-columns: repeat(2, 1fr) !important; } }

  /* ══════ SAFE AREA (notched devices) ══════ */
  @supports (padding: max(0px)) {
    body {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

  /* ══════ RESPONSIVE UTILITY CLASSES ══════ */
  .mobile-hide { }
  .mobile-only { display: none !important; }

  /* ══════ MOBILE ══════ */
  @media (max-width: 767px) {
    .sidebar {
      transform: translateX(-100%);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 200;
      width: 85vw; max-width: 300px; min-width: unset;
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 199; }
    .sidebar-overlay.active { display: block; }
    .main-content { margin-left: 0 !important; padding: 12px !important; padding-top: 68px !important; }
    .mobile-header { display: flex !important; }
    .chart-container { height: 170px; }
    .modal-inner { max-width: 100% !important; max-height: 92vh !important; margin: 6px; border-radius: 14px; }
    .section-title { font-size: 15px; }
    .section-title::before { width: 3px !important; height: 16px !important; }
    .section-divider { margin: 16px 0; }
    .health-ring { width: 38px; height: 38px; font-size: 11px; }
    .filter-badge { padding: 6px 10px; font-size: 11px; min-height: 40px; display: inline-flex; align-items: center; }
    .tab-btn { padding: 10px 14px; min-height: 44px; font-size: 12px; }
    .badge { font-size: 10px; padding: 2px 8px; }
    .back-btn { min-height: 44px; }
    .nav-item { min-height: 44px; display: flex; align-items: center; }
    .mobile-hide { display: none !important; }
    .mobile-only { display: revert !important; }

    /* Touch-friendly buttons and inputs */
    button, select, input, .nav-item a { min-height: 44px; }
    select { font-size: 16px !important; /* prevents iOS zoom on focus */ }
    input[type="text"], input[type="email"], input[type="search"], input[type="number"], textarea {
      font-size: 16px !important; min-height: 44px;
    }

    /* Table scroll hint */
    .table-scroll-hint { position: relative; }
    .table-scroll-hint::after {
      content: '';
      position: absolute; top: 0; right: 0; bottom: 0; width: 30px;
      background: linear-gradient(90deg, transparent, rgba(6,11,24,0.8));
      pointer-events: none; z-index: 5;
    }

    /* Glass cards reduce padding */
    .glass { padding: 12px; }

    /* KPI / metric cards */
    .kpi-grid-7 { gap: 8px !important; }

    /* Cycle comparison grid */
    #cycle-comp-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

    /* Funnel bar text */
    .funnel-bar { font-size: 10px; height: 24px; padding: 0 6px; }
  }

  /* ══════ VERY SMALL PHONES (≤374px) ══════ */
  @media (max-width: 374px) {
    .main-content { padding: 8px !important; padding-top: 64px !important; }
    .filter-badge { padding: 5px 8px; font-size: 10px; }
    .section-title { font-size: 13px; }
    .kpi-grid-7 { grid-template-columns: 1fr !important; }
    #cycle-comp-cards { grid-template-columns: 1fr !important; }
    .chart-container { height: 150px; }
    .tab-btn { padding: 8px 10px; font-size: 11px; }
    .glass { padding: 8px; }
  }

  /* ══════ SMALL PHONES (375-479px) ══════ */
  @media (min-width: 375px) and (max-width: 479px) {
    .kpi-grid-7 { grid-template-columns: repeat(2, 1fr) !important; }
  }

  /* ══════ LANDSCAPE MOBILE ══════ */
  @media (orientation: landscape) and (max-height: 500px) {
    .main-content { padding-top: 56px !important; }
    .chart-container { height: 140px; }
    .modal-inner { max-height: 95vh !important; }
    .health-scroll { max-height: 180px; }
    .mobile-header { padding-top: 4px !important; padding-bottom: 4px !important; }
  }

  /* ══════ TABLET (768-1023px) ══════ */
  @media (min-width: 768px) and (max-width: 1023px) {
    .kpi-grid-7 { grid-template-columns: repeat(3, 1fr) !important; }
  }

  @media (min-width: 768px) {
    .mobile-header { display: none !important; }
    .sidebar-overlay { display: none !important; }
  }

  /* ══════ FANCY BORDERS ══════ */
  .gradient-border {
    position: relative;
  }
  .gradient-border::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(212,168,67,0.2), transparent 40%, transparent 60%, rgba(59,130,246,0.15));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  /* ══════ TOOLTIP ══════ */
  .tooltip-container { position: relative; }
  .tooltip-container:hover .tooltip-text { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .tooltip-text {
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
    background: rgba(15,23,42,0.95); border: 1px solid rgba(148,163,184,0.15);
    padding: 6px 12px; border-radius: 8px; font-size: 11px; color: #e2e8f0;
    white-space: nowrap; pointer-events: none; opacity: 0; transition: all 0.2s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3); z-index: 50;
  }

  /* ══════ LOADING SPINNER ══════ */
  .spinner {
    width: 40px; height: 40px;
    border: 3px solid rgba(212,168,67,0.1);
    border-top-color: #d4a843;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }