/* ═══ $100B PREMIUM — Agent Performance (scoped to #performance) ═══
   Hero + glass cards + animated blue glow lines + premium tabs + hover lifts.
   Uses globally-defined @keyframes z100bCardGlow from z100b-social.
   Kills: red #FF5050 accent, gold #c9a84c/#FFD700/#FFB400, amber #f59e0b,
   pink/purple #a855f7, cyan #64C8FF, teal #00DCB4, orange #FF8C00,
   light-blue #4d94ff, all dark panels (#0d0f14/#080a0e),
   and all ghost-text tokens. Green (#10b981/#50C878) deepens to premium
   #059669 for GCI earned. Red kept ONLY as #dc2626 for money-spent signal. */

/* ── Base: force light page + dark text ── */
#performance { background: #f0f2f7 !important; color: #111827 !important; }
#performance, #performance * {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* ── Hero banner: dark red gradient → premium white glass + animated blue glow line ── */
#performance > div[style*="linear-gradient(135deg,#140808"],
#performance > div[style*="linear-gradient(135deg, #140808"] {
  background: linear-gradient(145deg, rgba(255,255,255,0.94), rgba(0,101,241,0.04)) !important;
  border: 0.5px solid rgba(0,101,241,0.18) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,101,241,0.05), 0 14px 40px rgba(0,101,241,0.08) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
#performance > div[style*="linear-gradient(135deg,#140808"]::before,
#performance > div[style*="linear-gradient(135deg, #140808"]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #0055d4, #0065f1, #2d7af8, #0065f1, #0055d4) !important;
  background-size: 200% 100% !important;
  animation: z100bCardGlow 4s ease-in-out infinite !important;
  z-index: 2 !important;
}
/* Red radial-glow in hero corner → ZOOM blue */
#performance [style*="radial-gradient(circle,rgba(255,80,80"],
#performance [style*="radial-gradient(circle, rgba(255,80,80"] {
  background: radial-gradient(circle, rgba(0,101,241,0.08) 0%, transparent 70%) !important;
}
/* Hero H1 "Agent Performance Dashboard" heading — dark */
#performance > div:first-child > div[style*="font-family:var(--font-display"] {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* ── #FF5050 red accent (text) → ZOOM blue ── */
#performance [style*="color:#FF5050"], #performance [style*="color: #FF5050"],
#performance [style*="color:#ff5050"], #performance [style*="color: #ff5050"] {
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
}
#performance [style*="background:#FF5050"], #performance [style*="background: #FF5050"],
#performance [style*="background:#ff5050"], #performance [style*="background: #ff5050"] {
  background: #0065f1 !important;
}
#performance [style*="rgba(255,80,80"], #performance [style*="rgba(255, 80, 80"] {
  border-color: rgba(0,101,241,0.22) !important;
}
#performance [style*="background:rgba(255,80,80"],
#performance [style*="background: rgba(255,80,80"] {
  background: rgba(0,101,241,0.06) !important;
}

/* ── Gold #c9a84c / #FFD700 / #FFB400 / #FF8C00 and amber #f59e0b → ZOOM blue ── */
#performance [style*="color:#c9a84c"], #performance [style*="color: #c9a84c"],
#performance [style*="color:#C9A84C"], #performance [style*="color: #C9A84C"],
#performance [style*="color:#FFD700"], #performance [style*="color: #FFD700"],
#performance [style*="color:#ffd700"], #performance [style*="color: #ffd700"],
#performance [style*="color:#FFB400"], #performance [style*="color: #FFB400"],
#performance [style*="color:#FF8C00"], #performance [style*="color: #FF8C00"],
#performance [style*="color:#f59e0b"], #performance [style*="color: #f59e0b"] {
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
}
#performance [style*="background:#FFD700"], #performance [style*="background: #FFD700"],
#performance [style*="background:#ffd700"], #performance [style*="background: #ffd700"],
#performance [style*="background:#FFB400"], #performance [style*="background: #FFB400"],
#performance [style*="background:#FF8C00"], #performance [style*="background: #FF8C00"] {
  background: #0065f1 !important;
}
#performance [style*="rgba(201,168,76"], #performance [style*="rgba(201, 168, 76"] {
  border-color: rgba(0,101,241,0.22) !important;
}
#performance [style*="background:rgba(201,168,76"],
#performance [style*="background: rgba(201,168,76"] {
  background: rgba(0,101,241,0.06) !important;
}
#performance [style*="rgba(245,158,11"], #performance [style*="rgba(245, 158, 11"] {
  border-color: rgba(0,101,241,0.18) !important;
}
#performance [style*="background:rgba(245,158,11"],
#performance [style*="background: rgba(245,158,11"] {
  background: rgba(0,101,241,0.05) !important;
}

/* ── Pink/purple #a855f7 & cyan #64C8FF & teal #00DCB4 & light-blue #4d94ff → ZOOM blue ── */
#performance [style*="color:#a855f7"], #performance [style*="color: #a855f7"],
#performance [style*="color:#A855F7"], #performance [style*="color: #A855F7"],
#performance [style*="color:#64C8FF"], #performance [style*="color: #64C8FF"],
#performance [style*="color:#64c8ff"], #performance [style*="color: #64c8ff"],
#performance [style*="color:#00DCB4"], #performance [style*="color: #00DCB4"],
#performance [style*="color:#00dcb4"], #performance [style*="color: #00dcb4"],
#performance [style*="color:#4d94ff"], #performance [style*="color: #4d94ff"] {
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
}

/* ── Green "GCI earned / money in" — deepen to premium #059669, keep 900 weight ── */
#performance [style*="color:#10b981"], #performance [style*="color: #10b981"],
#performance [style*="color:#50C878"], #performance [style*="color: #50C878"],
#performance [style*="color:#50c878"], #performance [style*="color: #50c878"] {
  color: #059669 !important;
  -webkit-text-fill-color: #059669 !important;
  font-weight: 900 !important;
}
#performance [style*="background:#50C878"], #performance [style*="background: #50C878"],
#performance [style*="background:#50c878"], #performance [style*="background: #50c878"],
#performance [style*="background:#10b981"], #performance [style*="background: #10b981"] {
  background: #059669 !important;
}

/* ── Red #ef4444 "money-spent" — deepen to premium #dc2626 (kept as semantic signal) ── */
#performance [style*="color:#ef4444"], #performance [style*="color: #ef4444"] {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
  font-weight: 900 !important;
}
#performance [style*="rgba(239,68,68"], #performance [style*="rgba(239, 68, 68"] {
  border-color: rgba(220,38,38,0.22) !important;
}
#performance [style*="background:rgba(239,68,68"],
#performance [style*="background: rgba(239,68,68"] {
  background: rgba(220,38,38,0.05) !important;
}

/* ── Ghost-text tokens → #6b7280 slate ── */
#performance [style*="color:#888"], #performance [style*="color: #888"],
#performance [style*="color:#999"], #performance [style*="color: #999"],
#performance [style*="color:#aaa"], #performance [style*="color: #aaa"],
#performance [style*="color:#555"], #performance [style*="color: #555"],
#performance [style*="color:#666"], #performance [style*="color: #666"],
#performance [style*="color:#6b7280"], #performance [style*="color: #6b7280"],
#performance [style*="color:#c8c8d0"], #performance [style*="color: #c8c8d0"],
#performance [style*="color:rgba(255,255,255,0.2)"], #performance [style*="color: rgba(255,255,255,0.2)"],
#performance [style*="color:rgba(255,255,255,0.25)"], #performance [style*="color: rgba(255,255,255,0.25)"],
#performance [style*="color:rgba(255,255,255,0.3)"], #performance [style*="color: rgba(255,255,255,0.3)"],
#performance [style*="color:rgba(255,255,255,0.4)"], #performance [style*="color: rgba(255,255,255,0.4)"],
#performance [style*="color:rgba(255,255,255,0.5)"], #performance [style*="color: rgba(255,255,255,0.5)"] {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
}

/* ── Near-white tokens → dark ── */
#performance [style*="color:#fff"], #performance [style*="color: #fff"],
#performance [style*="color:#FFF"], #performance [style*="color: #FFF"],
#performance [style*="color:#e8eaf0"], #performance [style*="color: #e8eaf0"],
#performance [style*="color:#E8EAF0"], #performance [style*="color: #E8EAF0"],
#performance [style*="color:#eee"], #performance [style*="color: #eee"] {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* ── Primary dark panels #0d0f14 → premium white glass + animated blue glow + hover lift ── */
#performance div[style*="background:#0d0f14"],
#performance div[style*="background: #0d0f14"] {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(0,101,241,0.03)) !important;
  border: 0.5px solid rgba(0,101,241,0.14) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,101,241,0.05), 0 8px 24px rgba(0,101,241,0.07) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
#performance div[style*="background:#0d0f14"]::before,
#performance div[style*="background: #0d0f14"]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #0055d4, #0065f1, #2d7af8, #0065f1, #0055d4) !important;
  background-size: 200% 100% !important;
  animation: z100bCardGlow 4s ease-in-out infinite !important;
  z-index: 1 !important;
}
#performance div[style*="background:#0d0f14"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,101,241,0.10), 0 12px 32px rgba(0,101,241,0.08) !important;
}

/* ── Nested dark panels #080a0e (insight sub-cards) → soft blue tint ── */
#performance div[style*="background:#080a0e"],
#performance div[style*="background: #080a0e"] {
  background: rgba(0,101,241,0.04) !important;
  border-color: rgba(0,101,241,0.14) !important;
}

/* ── Dark hairline borders → blue hairline ── */
#performance [style*="border:1px solid #1e2028"],
#performance [style*="border: 1px solid #1e2028"],
#performance [style*="border:1px solid #2a2d38"],
#performance [style*="border: 1px solid #2a2d38"],
#performance [style*="border:1px solid #333"],
#performance [style*="border: 1px solid #333"] {
  border-color: rgba(0,101,241,0.18) !important;
}
/* Progress bar TRACK (background:#1e2028) → soft blue */
#performance [style*="background:#1e2028"],
#performance [style*="background: #1e2028"] {
  background: rgba(0,101,241,0.14) !important;
}

/* ── ROI & Leaderboard outer cards (direct children) → premium white glass w/ animated glow ── */
#performance #perf-panel-roi > div,
#performance #perf-panel-leaderboard > div {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(0,101,241,0.035)) !important;
  border: 0.5px solid rgba(0,101,241,0.18) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,101,241,0.05), 0 8px 24px rgba(0,101,241,0.07) !important;
}
#performance #perf-panel-roi > div::before,
#performance #perf-panel-leaderboard > div::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #0055d4, #0065f1, #2d7af8, #0065f1, #0055d4) !important;
  background-size: 200% 100% !important;
  animation: z100bCardGlow 4s ease-in-out infinite !important;
  z-index: 1 !important;
}

/* ── Small stat tiles inside ROI — hover lift ── */
#performance #perf-panel-roi [style*="border-radius:14px"][style*="padding:16px"][style*="text-align:center"],
#performance #perf-panel-roi [style*="border-radius:14px"][style*="padding:16px;text-align:center"] {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
#performance #perf-panel-roi [style*="border-radius:14px"][style*="padding:16px"][style*="text-align:center"]:hover,
#performance #perf-panel-roi [style*="border-radius:14px"][style*="padding:16px;text-align:center"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0,101,241,0.10) !important;
}

/* ── Blue-gradient buttons (linear-gradient(145deg,#0065f1,#0052c7) etc) — white text, hover lift ── */
#performance button[style*="linear-gradient(145deg,#0065f1"],
#performance button[style*="linear-gradient(145deg, #0065f1"],
#performance button[style*="linear-gradient(135deg,#0055d4"],
#performance button[style*="linear-gradient(135deg, #0055d4"],
#performance button[style*="linear-gradient(135deg,#0065f1"],
#performance button[style*="linear-gradient(135deg, #0065f1"] {
  background: linear-gradient(135deg, #0055d4, #0065f1) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(0,101,241,0.26) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
#performance button[style*="linear-gradient(145deg,#0065f1"] *,
#performance button[style*="linear-gradient(145deg, #0065f1"] *,
#performance button[style*="linear-gradient(135deg,#0055d4"] *,
#performance button[style*="linear-gradient(135deg, #0055d4"] *,
#performance button[style*="linear-gradient(135deg,#0065f1"] *,
#performance button[style*="linear-gradient(135deg, #0065f1"] * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
#performance button[style*="linear-gradient(145deg,#0065f1"]:hover,
#performance button[style*="linear-gradient(135deg,#0055d4"]:hover,
#performance button[style*="linear-gradient(135deg,#0065f1"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0,101,241,0.34) !important;
}

/* ── .lb-period leaderboard period tabs — premium pill, active = blue gradient ── */
#performance .lb-period {
  background: rgba(255,255,255,0.72) !important;
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
  border: 0.5px solid rgba(0,101,241,0.14) !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}
#performance .lb-period:hover {
  background: rgba(0,101,241,0.06) !important;
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
  border-color: rgba(0,101,241,0.24) !important;
}
/* Active lb-period — JS sets bg to rgba(201,168,76,0.15); catch and promote to blue gradient */
#performance .lb-period[style*="rgba(201,168,76,0.15"],
#performance .lb-period[style*="rgba(201, 168, 76, 0.15"] {
  background: linear-gradient(135deg, #0055d4, #0065f1, #2d7af8) !important;
  background-size: 200% 100% !important;
  animation: z100bCardGlow 6s ease-in-out infinite !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0,101,241,0.30) !important;
}

/* ── Inner tabs (Dashboard / ROI / Leaderboard) — premium active/inactive ── */
#performance .inner-tab {
  background: rgba(255,255,255,0.72) !important;
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
  border: 0.5px solid rgba(0,101,241,0.10) !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}
#performance .inner-tab:hover {
  background: rgba(0,101,241,0.06) !important;
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
  border-color: rgba(0,101,241,0.22) !important;
}
#performance .inner-tab.active {
  background: linear-gradient(135deg, #0055d4, #0065f1, #2d7af8) !important;
  background-size: 200% 100% !important;
  animation: z100bCardGlow 6s ease-in-out infinite !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0,101,241,0.30) !important;
}
#performance .inner-tab.active * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ── Form labels → ZOOM blue uppercase ── */
#performance .form-group label, #performance label {
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ── Inputs / selects — white + blue focus ring ── */
#performance input, #performance select, #performance textarea {
  background: rgba(255,255,255,0.96) !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  border: 0.5px solid rgba(0,101,241,0.18) !important;
}
#performance input::placeholder, #performance textarea::placeholder {
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
}
#performance input:focus, #performance select:focus, #performance textarea:focus {
  outline: none !important;
  border-color: #0065f1 !important;
  box-shadow: 0 0 0 3px rgba(0,101,241,0.10) !important;
}
/* Opt-in checkbox gold accent → blue */
#performance input[type="checkbox"][style*="accent-color:#c9a84c"],
#performance input[type="checkbox"][style*="accent-color: #c9a84c"] {
  accent-color: #0065f1 !important;
}

/* ── ROI table — dark text, blue header ── */
#performance table { color: #111827 !important; border-collapse: collapse !important; }
#performance th {
  background: rgba(0,101,241,0.06) !important;
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
  border-bottom-color: rgba(0,101,241,0.18) !important;
}
#performance td {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}
#performance tr[style*="rgba(255,255,255,0.04)"] {
  border-bottom-color: rgba(0,101,241,0.08) !important;
}

/* ── #lb-rankings list rows (JS generates inline `rgba(255,255,255,0.04)` top border) ── */
#performance #lb-rankings > div[style*="border-top:0.5px solid rgba(255,255,255,0.04)"],
#performance #lb-rankings > div[style*="border-top: 0.5px solid rgba(255,255,255,0.04)"] {
  border-top-color: rgba(0,101,241,0.08) !important;
}
/* You row highlight keeps blue bg */
#performance #lb-rankings > div[style*="background:rgba(0,101,241,0.08"] {
  background: rgba(0,101,241,0.08) !important;
  border-radius: 10px !important;
}

/* ── #lb-your-position card — keep blue, add glass + subtle glow top line ── */
#performance #lb-your-position {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(0,101,241,0.05)) !important;
  border: 0.5px solid rgba(0,101,241,0.22) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,101,241,0.05), 0 8px 24px rgba(0,101,241,0.08) !important;
}
#performance #lb-your-position::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #0055d4, #0065f1, #2d7af8, #0065f1, #0055d4) !important;
  background-size: 200% 100% !important;
  animation: z100bCardGlow 4s ease-in-out infinite !important;
  z-index: 1 !important;
}

/* ── Section background gradients using linear-gradient(145deg,rgba(0,101,241,0.08)...) and
     linear-gradient(145deg,rgba(201,168,76,0.08)...) → white glass (handled by outer panel rule above,
     but also catch standalone usage). ── */
#performance [style*="linear-gradient(145deg,rgba(201,168,76"],
#performance [style*="linear-gradient(145deg, rgba(201,168,76"],
#performance [style*="linear-gradient(145deg,rgba(201, 168, 76"],
#performance [style*="linear-gradient(145deg, rgba(201, 168, 76"] {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(0,101,241,0.035)) !important;
}

/* ── Dark hairline dividers (rgba(255,255,255,0.04) / 0.06) on white glass → subtle blue hairline ── */
#performance [style*="border-top:0.5px solid rgba(255,255,255,0.06)"],
#performance [style*="border-top: 0.5px solid rgba(255,255,255,0.06)"] {
  border-top-color: rgba(0,101,241,0.12) !important;
}
#performance [style*="border-bottom:0.5px solid rgba(255,255,255,0.04)"],
#performance [style*="border-bottom: 0.5px solid rgba(255,255,255,0.04)"] {
  border-bottom-color: rgba(0,101,241,0.08) !important;
}