
/* ═══ $100B PREMIUM — Build My Empire (scoped to #empire) ═══
   Foundation already covered at line ~3477 (dark bg → white glass, white
   text → dark, rgba-dim → gray, gold-gradient buttons → ZOOM blue).
   This block adds: animated top-glow lines, hover lifts, premium tabs,
   unified colored accents, kanban/modal polish. Uses globally-defined
   @keyframes z100bCardGlow from z100b-social. */

/* ── Tabs (.inner-tab, 12 of them) — premium active/inactive ── */
#empire .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;
}
#empire .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;
}
#empire .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;
}
#empire .inner-tab.active * { color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* ── Hero stat cards (.stat-card) — premium glow + lift ── */
#empire .stat-card {
  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.12) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,101,241,0.05), 0 6px 20px rgba(0,101,241,0.06) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
#empire .stat-card::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: 1 !important;
}
#empire .stat-card: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;
  border-color: rgba(0,101,241,0.22) !important;
}

/* ── Gold → ZOOM blue (heavy usage across Empire) ── */
#empire [style*="color:var(--gold)"], #empire [style*="color: var(--gold)"],
#empire [style*="color:var(--z-gold)"], #empire [style*="color: var(--z-gold)"],
#empire [style*="color:#c9a84c"], #empire [style*="color: #c9a84c"],
#empire [style*="color:#C9A84C"], #empire [style*="color: #C9A84C"] {
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
}
#empire [style*="background:rgba(201,168,76"], #empire [style*="background: rgba(201,168,76"] {
  background: rgba(0,101,241,0.06) !important;
}
#empire [style*="border:1px solid rgba(201,168,76"],
#empire [style*="border: 1px solid rgba(201,168,76"],
#empire [style*="border:0.5px solid rgba(201,168,76"],
#empire [style*="border: 0.5px solid rgba(201,168,76"] {
  border-color: rgba(0,101,241,0.22) !important;
}
/* var(--accent) token used for gold emphasis */
#empire [style*="color:var(--accent"], #empire [style*="color: var(--accent"] {
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
}

/* ── Alt-blue #1A7FE8 / #4FA8FF / rgba(26,127,232,…) → ZOOM blue ── */
#empire [style*="color:#1A7FE8"], #empire [style*="color: #1A7FE8"],
#empire [style*="color:#4FA8FF"], #empire [style*="color: #4FA8FF"],
#empire [style*="color:#0F5BAD"], #empire [style*="color: #0F5BAD"] {
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
}
#empire [style*="background:rgba(26,127,232"], #empire [style*="background: rgba(26,127,232"] {
  background: rgba(0,101,241,0.08) !important;
}
#empire [style*="border:1px solid rgba(26,127,232"],
#empire [style*="border: 1px solid rgba(26,127,232"] {
  border-color: rgba(0,101,241,0.25) !important;
}
#empire [style*="linear-gradient(135deg,#1A7FE8"],
#empire [style*="linear-gradient(135deg, #1A7FE8"] {
  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.24) !important;
}
#empire [style*="linear-gradient(135deg,#1A7FE8"] * { color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* ── Pink (#ff64b4 / rgba(255,100,180,…)) → ZOOM blue ── */
#empire [style*="color:#ff64b4"], #empire [style*="color: #ff64b4"] {
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
}
#empire [style*="background:rgba(255,100,180"], #empire [style*="background: rgba(255,100,180"] {
  background: rgba(0,101,241,0.06) !important;
}
#empire [style*="border:1px solid rgba(255,100,180"],
#empire [style*="border: 1px solid rgba(255,100,180"] {
  border-color: rgba(0,101,241,0.22) !important;
}

/* ── Magenta (rgba(232,121,249,…)) on Training Tracker tab border → blue ── */
#empire [style*="border-color:rgba(232,121,249"],
#empire [style*="border-color: rgba(232,121,249"],
#empire [style*="border:1px solid rgba(232,121,249"],
#empire [style*="border: 1px solid rgba(232,121,249"] {
  border-color: rgba(0,101,241,0.30) !important;
}

/* ── Dark hairline borders → blue-tint ── */
#empire [style*="border:1px solid #1e2028"],
#empire [style*="border: 1px solid #1e2028"],
#empire [style*="border:1px solid #2a2d38"],
#empire [style*="border: 1px solid #2a2d38"] {
  border-color: rgba(0,101,241,0.18) !important;
}

/* ── Muted text tokens that global rules may miss ── */
#empire [style*="color:#aaa"], #empire [style*="color: #aaa"],
#empire [style*="color:#888"], #empire [style*="color: #888"],
#empire [style*="color:#999"], #empire [style*="color: #999"],
#empire [style*="color:#ccc"], #empire [style*="color: #ccc"],
#empire [style*="color:#ddd"], #empire [style*="color: #ddd"],
#empire [style*="color:#eee"], #empire [style*="color: #eee"],
#empire [style*="color:var(--white-dim"], #empire [style*="color: var(--white-dim"] {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
}
/* var(--white) in Empire context = #111827 under our theme */
#empire [style*="color:var(--white)"], #empire [style*="color: var(--white)"] {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* ── RevShare projection banner (gold family, keep identity + animate) ── */
#empire #rp-revshare-impact {
  background: linear-gradient(135deg, rgba(0,101,241,0.06), rgba(0,101,241,0.02)) !important;
  border: 0.5px solid rgba(0,101,241,0.25) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,101,241,0.05), 0 6px 20px rgba(0,101,241,0.06) !important;
}
#empire #rp-revshare-impact::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;
}
/* Keep the green projected-delta tint but soften */
#empire #rp-impact-delta,
#empire [id="rp-impact-projected"] { color: #059669 !important; -webkit-text-fill-color: #059669 !important; }

/* ── Kanban board + pipeline stats ── */
#empire #rp-stats {
  position: relative !important;
}
#empire #rp-stats > div[style*="border-radius"] {
  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.12) !important;
  box-shadow: 0 1px 3px rgba(0,101,241,0.04), 0 4px 14px rgba(0,101,241,0.05) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
#empire #rp-stats > div[style*="border-radius"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,101,241,0.10), 0 10px 24px rgba(0,101,241,0.07) !important;
}
#empire #rp-stats > div[style*="border-radius"]::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;
}

/* Kanban columns */
#empire #rp-kanban-cols > div {
  background: rgba(255,255,255,0.96) !important;
  border: 0.5px solid rgba(0,101,241,0.14) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0,101,241,0.05), 0 6px 18px rgba(0,101,241,0.06) !important;
}
/* Kanban cards within columns — hover lift */
#empire #rp-kanban-cols div[style*="border-radius"][style*="cursor:pointer"],
#empire #rp-kanban-cols div[style*="border-radius"][style*="cursor: pointer"] {
  background: rgba(255,255,255,0.98) !important;
  border: 0.5px solid rgba(0,101,241,0.12) !important;
  box-shadow: 0 1px 2px rgba(0,101,241,0.04) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
#empire #rp-kanban-cols div[style*="border-radius"][style*="cursor:pointer"]:hover,
#empire #rp-kanban-cols div[style*="border-radius"][style*="cursor: pointer"]:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(0,101,241,0.28) !important;
  box-shadow: 0 4px 12px rgba(0,101,241,0.10), 0 10px 24px rgba(0,101,241,0.08) !important;
}

/* ── Pipeline/Detail modals ── */
#rp-add-modal[style*="rgba(0,0,0,0.85)"],
#rp-detail-modal[style*="rgba(0,0,0,0.85)"] {
  background: rgba(17,24,39,0.48) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
#rp-add-modal > div[style*="margin:40px auto"],
#rp-detail-modal > div[style*="margin:40px auto"] {
  background: rgba(255,255,255,0.98) !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 20px 60px rgba(0,101,241,0.12) !important;
  color: #111827 !important;
}
#rp-add-modal > div[style*="margin:40px auto"]::before,
#rp-detail-modal > div[style*="margin:40px auto"]::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: 1 !important;
}

/* ── Kit Generator input panel + result panel — premium glow ── */
#empire #bme-panel-kit > div[style*="background:#0d0f14"],
#empire #bme-panel-kit > div[style*="background: #0d0f14"] {
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,101,241,0.05), 0 6px 20px rgba(0,101,241,0.06) !important;
}
#empire #bme-panel-kit > div[style*="background:#0d0f14"]::before,
#empire #bme-panel-kit > div[style*="background: #0d0f14"]::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: 1 !important;
}

/* ── Primary gradient buttons in Empire ── */
#empire button[style*="linear-gradient(135deg,#0065f1"],
#empire button[style*="linear-gradient(135deg, #0065f1"],
#empire button[style*="linear-gradient(145deg,#0065f1"],
#empire button[style*="linear-gradient(145deg, #0065f1"],
#empire button[style*="linear-gradient(135deg,#0055d4"],
#empire button[style*="linear-gradient(135deg, #0055d4"] {
  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.24) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
#empire button[style*="linear-gradient(135deg,#0065f1"]:hover,
#empire button[style*="linear-gradient(145deg,#0065f1"]:hover,
#empire button[style*="linear-gradient(135deg,#0055d4"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0,101,241,0.32) !important;
}

/* ── Ghost "reset" / "cancel" buttons (transparent + dim text) ── */
#empire button[style*="background:transparent"][style*="color:#888"],
#empire button[style*="background:transparent"][style*="color:#ccc"] {
  background: rgba(0,101,241,0.05) !important;
  border: 0.5px solid rgba(0,101,241,0.18) !important;
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
  border-radius: 10px !important;
  transition: all 0.15s ease !important;
}
#empire button[style*="background:transparent"][style*="color:#888"]:hover,
#empire button[style*="background:transparent"][style*="color:#ccc"]:hover {
  background: rgba(0,101,241,0.08) !important;
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
}

/* ── Focus ring on all inputs/selects/textareas ── */
#empire input:focus, #empire select:focus, #empire textarea:focus {
  outline: none !important;
  border-color: #0065f1 !important;
  box-shadow: 0 0 0 3px rgba(0,101,241,0.10) !important;
}

/* Radio labels used in channel picker */
#empire label[style*="background:#080a0e"],
#empire label[style*="background: #080a0e"] {
  background: rgba(0,101,241,0.04) !important;
  border: 0.5px solid rgba(0,101,241,0.18) !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}
#empire label[style*="background:#080a0e"]:hover {
  background: rgba(0,101,241,0.08) !important;
  border-color: rgba(0,101,241,0.28) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ROUND 2 — Force-override remaining dark panels Dan screenshotted.
   The global rule at 3479 targets `#empire div[style*="background:#0"]`
   (specificity 1,1,1). These descendant-scoped rules (1,1,2) win and
   also set a premium glow line.
   ═══════════════════════════════════════════════════════════════ */

/* FORM LABELS — were gold/gray from global .form-group label
   (var(--text-tertiary) + !important). Force ZOOM blue everywhere in Empire. */
#empire .form-group label, #empire label {
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
/* Exception: inline labels used as RADIO-BUTTON wrappers (have inline
   background/flex — those aren't "labels" in the form-label sense) */
#empire label[style*="display:flex"],
#empire label[style*="display: flex"] {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
}

/* ── Every dark div in Empire — force white glass (descendant, high specificity) ── */
#empire div[style*="background:#0d0f14"],
#empire div[style*="background: #0d0f14"],
#empire div[style*="background:#080a0e"],
#empire div[style*="background: #080a0e"],
#empire div[style*="background:#151820"],
#empire div[style*="background: #151820"],
#empire div[style*="background:#13161e"],
#empire div[style*="background: #13161e"] {
  background: rgba(255,255,255,0.96) !important;
  border-color: rgba(0,101,241,0.14) !important;
  color: #111827 !important;
}
/* Textareas / inputs / selects with dark inline bg — force white */
#empire textarea[style*="background:#0d0f14"],
#empire textarea[style*="background: #0d0f14"],
#empire textarea[style*="background:#080a0e"],
#empire textarea[style*="background: #080a0e"],
#empire input[style*="background:#0d0f14"],
#empire input[style*="background: #0d0f14"],
#empire input[style*="background:#080a0e"],
#empire input[style*="background: #080a0e"],
#empire select[style*="background:#0d0f14"],
#empire select[style*="background: #0d0f14"],
#empire select[style*="background:#080a0e"],
#empire select[style*="background: #080a0e"] {
  background: rgba(255,255,255,0.96) !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  border-color: rgba(0,101,241,0.18) !important;
}
#empire textarea[style*="color:#fff"], #empire input[style*="color:#fff"],
#empire textarea[style*="color:#ddd"], #empire div[style*="color:#ddd"] {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* ── THE Recruiting Kit Generator card — premium glow (matched via actual DOM path) ── */
#empire #bme-panel-kit div[style*="background:#0d0f14"][style*="border-radius:20px"] {
  background: rgba(255,255,255,0.98) !important;
  border: 0.5px solid rgba(0,101,241,0.14) !important;
  border-radius: 20px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,101,241,0.05), 0 10px 28px rgba(0,101,241,0.07) !important;
}
#empire #bme-panel-kit div[style*="background:#0d0f14"][style*="border-radius:20px"]::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: 1 !important;
}

/* Right-side result/numbered-steps panels — premium glow */
#empire #bme-panel-kit div[style*="background:#080a0e"][style*="border-radius:16px"],
#empire #bme-panel-kit div[style*="background:#0d0f14"][style*="border-radius:16px"] {
  background: rgba(255,255,255,0.96) !important;
  border: 0.5px solid rgba(0,101,241,0.14) !important;
  border-radius: 16px !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.06) !important;
}
#empire #bme-panel-kit div[style*="background:#080a0e"][style*="border-radius:16px"]::before,
#empire #bme-panel-kit div[style*="background:#0d0f14"][style*="border-radius:16px"]::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;
}

/* #bme-result output box (inside the right card) — subtle nested glass */
#empire #bme-result {
  background: rgba(0,101,241,0.03) !important;
  border: 0.5px solid rgba(0,101,241,0.12) !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* Objection handler textarea */
#empire #bme-obj-input {
  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;
}

/* Pipeline detail modal nested panels (inner boxes) */
#rp-detail-modal div[style*="background:#080a0e"],
#rp-detail-modal div[style*="background: #080a0e"],
#rp-detail-modal div[style*="background:#0d0f14"],
#rp-detail-modal div[style*="background: #0d0f14"] {
  background: rgba(0,101,241,0.04) !important;
  border-color: rgba(0,101,241,0.14) !important;
  color: #111827 !important;
}
#rp-detail-modal textarea[style*="background:#0d0f14"],
#rp-detail-modal select[style*="background:#0d0f14"],
#rp-add-modal textarea[style*="background:#080a0e"] {
  background: rgba(255,255,255,0.96) !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  border-color: rgba(0,101,241,0.18) !important;
}

/* Obsolete gold token: var(--gold) sometimes appears in gradient buttons
   as linear-gradient(135deg,var(--gold,#1A7FE8),var(--gold-dark,#0F5BAD)).
   Force to ZOOM blue. */
#empire button[style*="var(--gold"] {
  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.24) !important;
}
#empire button[style*="var(--gold"] * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ── Muted blue-gray label token (#8A96B8) → ZOOM blue ── */
#empire [style*="color:#8A96B8"], #empire [style*="color: #8A96B8"] {
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
  font-weight: 700 !important;
}
