:root{
  --bg0:#070A12;
  --bg1:#0B1020;
  --card: rgba(255,255,255,.08);
  --card2: rgba(255,255,255,.12);
  --stroke: rgba(255,255,255,.16);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);
  --accent: #50FFA0;
  --accent2:#16D98B;
  --good:#4ADE80;
  --warn:#FBBF24;
  --bad:#FB7185;
  --hold:#A78BFA;
  --dead:#94A3B8;
  --shadow: 0 20px 70px rgba(0,0,0,.45);
  --radius: 22px;
}

*{box-sizing:border-box}
html,body{height:100%}

/* Hide internal sync/cache metadata unless debug mode is enabled.
   Enable by visiting the dashboard with: ?debug=1 */
body:not(.debug) #syncStatus{ display:none; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% 10%, rgba(135,166,255,.18), transparent 60%),
              radial-gradient(1000px 700px at 80% 20%, rgba(102,240,255,.12), transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

.bg{
  position:fixed; inset:-30%;
  background:
    radial-gradient(circle at 30% 40%, rgba(135,166,255,.20), transparent 45%),
    radial-gradient(circle at 70% 30%, rgba(102,240,255,.14), transparent 45%),
    radial-gradient(circle at 60% 75%, rgba(167,139,250,.12), transparent 50%);
  filter: blur(40px) saturate(120%);
  transform: translateZ(0);
  pointer-events:none;
}

.topbar{
  position:sticky; top:0; z-index:10;
  padding:10px 16px 8px;
  display:flex;
  flex-direction: column;
  gap:8px;
  align-items:stretch;
  backdrop-filter: blur(18px);
  background: linear-gradient(180deg, rgba(10,14,28,.86), rgba(10,14,28,.55));
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* Row 1: micro header */
.microbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:56px;
}
.microLeft{ display:flex; align-items:center; gap:12px; min-width:0; }
.microMid{ display:flex; align-items:center; justify-content:center; flex: 1 1 auto; min-width:0; }
.microRight{ display:flex; align-items:center; justify-content:flex-end; gap:10px; min-width:0; }

/* Hours invested flip/split-flap style */
.hoursFlip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(57,255,20,.35);
  background: linear-gradient(135deg, rgba(57,255,20,.12), rgba(255,255,255,.03));
  box-shadow: 0 0 18px rgba(57,255,20,.18);
  color: rgba(210,255,210,.92);
  font-size: 12px;
  white-space: nowrap;
}
.hoursFlip .hoursLabel{
  color: rgba(180,255,180,.72);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11px;
}
.hoursFlip .hoursDigits{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(57,255,20,.28);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
  position:relative;
}
.hoursFlip .hoursDigits::before{
  content:"";
  position:absolute;
  left:6px;
  right:6px;
  top:50%;
  height:1px;
  background: rgba(57,255,20,.22);
  transform: translateY(-.5px);
}
/* subtle flap sheen */
.hoursFlip .hoursDigits::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 55%, rgba(0,0,0,.18));
  pointer-events:none;
  mix-blend-mode: screen;
}

/* Inline tabs (microbar) */
.tabsInline{
  width:100%;
  justify-content:center;
}

/* CITP wordmark + neon logo (no layout bloat) */
.citpWordmark{
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  /* sampled from citp_logo_neon.png core green */
  color: rgb(80,255,160); /* #50ffa0 */
  text-shadow:
    0 0 10px rgba(80,255,160,.28),
    0 0 18px rgba(80,255,160,.20),
    0 0 34px rgba(80,255,160,.14);
  opacity: .98;
}

@media (max-width: 980px){
  .citpWordmark{ display:none; }
}

.citpLogo{
  width: clamp(130px, 16vw, 210px);
  height: 58px;
  background: url('./citp_logo_neon.png') center / contain no-repeat;
  opacity: .98;
  /* brighter baseline glow */
  filter:
    drop-shadow(0 0 8px rgba(80,255,160,.22))
    drop-shadow(0 0 18px rgba(80,255,160,.26))
    drop-shadow(0 0 34px rgba(80,255,160,.16));
}

/* Always-on gentle pulse (premium, not distracting) */
.citpLogo{ animation: pulseGlowIdle 3.2s ease-in-out infinite; }

/* When working, pulse a bit stronger */
.citpLogo.working{ animation: pulseGlowWorking 2.4s ease-in-out infinite; }

.citpLogo.error{
  animation: none;
  filter:
    drop-shadow(0 0 10px rgba(255,59,59,.35))
    drop-shadow(0 0 22px rgba(255,59,59,.28));
}

@keyframes pulseGlowIdle{
  0%{   opacity:.92; filter: drop-shadow(0 0 8px rgba(57,255,20,.22)) drop-shadow(0 0 18px rgba(57,255,20,.24)) drop-shadow(0 0 34px rgba(57,255,20,.14)); }
  50%{  opacity:1;   filter: drop-shadow(0 0 10px rgba(57,255,20,.30)) drop-shadow(0 0 24px rgba(57,255,20,.28)) drop-shadow(0 0 44px rgba(57,255,20,.18)); }
  100%{ opacity:.92; filter: drop-shadow(0 0 8px rgba(57,255,20,.22)) drop-shadow(0 0 18px rgba(57,255,20,.24)) drop-shadow(0 0 34px rgba(57,255,20,.14)); }
}

@keyframes pulseGlowWorking{
  0%{   opacity:.90; filter: drop-shadow(0 0 10px rgba(57,255,20,.28)) drop-shadow(0 0 26px rgba(57,255,20,.30)) drop-shadow(0 0 52px rgba(57,255,20,.20)); }
  50%{  opacity:1;   filter: drop-shadow(0 0 14px rgba(57,255,20,.38)) drop-shadow(0 0 34px rgba(57,255,20,.34)) drop-shadow(0 0 70px rgba(57,255,20,.22)); }
  100%{ opacity:.90; filter: drop-shadow(0 0 10px rgba(57,255,20,.28)) drop-shadow(0 0 26px rgba(57,255,20,.30)) drop-shadow(0 0 52px rgba(57,255,20,.20)); }
}

/* Row 3: collapsible contextual filters */
.headerFilters{ display:block; }
.headerFilters[hidden]{ display:none !important; }

/* legacy topbar row removed in header rebuild */
.topbarRow{ display:none; }
.topbarMid{ display:none; }

/* Tabs are a dedicated row under the micro header */
.tabsRow{
  margin-top: 0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 6px;
}

/* tabsSplit removed in favor of tabsInline in micro header */

/* remove old watermark (logo now lives in .microMid) */
.topbar::before{ content:none; }

.topbarLeft{
  display:flex;
  gap:14px;
  align-items:center;
  justify-self:start;
  /* critical: allow this grid cell to shrink without bleeding under the center logo */
  min-width: 0;
}

.topbarRight{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  justify-self:end;
  /* critical: allow this grid cell to shrink without bleeding under the center logo */
  min-width: 0;
}

.topbarStatus{ font-size:12px; color: var(--muted); white-space:nowrap; }

/* Mid screens (small laptops / tablets): prevent logo+tabs collisions */
@media (max-width: 1180px){
  /* Tabs wrap and shrink a bit */
  .tabs{ max-width:100%; flex-wrap:wrap; overflow-x:visible; }
  .tab{ padding:8px 11px; font-size:12.5px; }
  /* allow tabs to wrap inside microbar */
  .tabsInline{ justify-content:flex-start; }
}

/* Phone / small tablet */
@media (max-width: 760px){
  .topbar{ padding:10px 12px 8px; }
  .microbar{ min-height:52px; }
  .microMid{ display:none; }
  .tabs{ width:100%; max-width:100%; flex-wrap:wrap; overflow-x:visible; }
  .pill.activityRange{ flex-wrap:wrap; white-space:normal; }
  .pill.activityRange input[type="date"]{ min-width: 140px; }
}


/* Tabs must NEVER overlap the center logo.
   Make them a scrollable lane that can shrink inside the left grid cell. */
.tabs{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  gap:6px;
  flex-wrap: wrap;
  padding:6px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar{ display:none; }

.tab{
  padding:9px 12px;
  border-radius: 999px;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  text-decoration:none;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.tab:hover{
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}

.tab.active{
  color: rgba(7,10,18,.92);
  background: linear-gradient(135deg, rgba(80,255,160,.95), rgba(80,255,160,.55));
  border-color: rgba(80,255,160,.35);
  box-shadow: 0 0 0 3px rgba(80,255,160,.14), 0 10px 40px rgba(0,0,0,.25);
}

.view[hidden]{ display:none !important; }

.panel{ padding:18px; }
.panel h1{ margin:0 0 6px 0; font-size:18px; }

.brand{display:flex; gap:12px; align-items:center}
.mark{
  position: relative;
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  background-image: url('./lucky-mark.png?v=20260207a');
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: var(--shadow);
  font-weight:700;
}
.mark::after{
  /* subtle neon aura */
  content:"";
  position:absolute;
  width:42px;height:42px;
  border-radius:14px;
  box-shadow: 0 0 22px rgba(80,255,160,.35);
  pointer-events:none;
}
.title{font-size:14px; letter-spacing:.2px}
.subtitle{font-size:12px; color:var(--muted)}

.controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  /* make the filter row feel detachable from the header */
  padding:10px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 40px rgba(0,0,0,.18);
}

/* Activity date range pill */
.pill.activityRange{
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;        /* allow date inputs + quick buttons to wrap */
  white-space: normal;    /* avoid pushing into adjacent pill */
  max-width: 100%;
}

/* Laptop-friendly: force controls into 2 rows (pipeline tab) */
/* Controls under tabs: left = activity, right = search+filters */
.controlGroups{
  width: 100%;
  display:flex;
  gap:12px;
  row-gap:10px;
  align-items:flex-start;
  justify-content: space-between;
  flex-wrap: wrap; /* roll over instead of overlap */
}
.controlLeft,
.controlRight{
  display:flex;
  gap:10px;
  align-items:center;
  min-width: 0;
}
/* Left group must be allowed to shrink + wrap; otherwise it can overlap the right group on mid-width screens. */
.controlLeft{ justify-content:flex-start; flex: 1 1 520px; flex-wrap: wrap; min-width: 0; }
/* Right group can drop to its own row instead of overflowing off-screen */
.controlRight{ justify-content:flex-end; flex: 1 1 520px; flex-wrap:wrap; min-width: 0; }

/* Control bar: keep it simple + robust (flex-wrap).
   The previous grid layout caused overlaps when we added new controls (Quick view, Reset, etc.). */
@media (max-width: 2800px){
  .controlGroups{ align-items:flex-start; }
  .controlRight{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-items:center;
  }
  #workStatus{ display:flex; }
}

@media (max-width: 1600px){
  /* Small screens: collapsible neon pills (field name only, expands on click/focus).
     Keeps header height low + avoids overlaps. */
  .controls{ padding:8px; gap:8px; }

  /* Collapsed pill default */
  .controls .pill{
    padding:8px 12px;
    gap:8px;
    border-color: rgba(57,255,20,0.22);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.05),
      0 0 0 1px rgba(57,255,20,0.10),
      0 0 18px rgba(57,255,20,0.10);
  }
  .controls .pill label{ display:block; font-weight:900; color: rgba(220,255,232,0.90); }
  .controls .pill input,
  .controls .pill select,
  .controls .pill .sep,
  .controls .pill .quick{ display:none; }

  /* Expanded */
  .controls .pill.pillExpanded{
    background: rgba(0,0,0,0.22);
    border-color: rgba(57,255,20,0.35);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.06),
      0 0 0 1px rgba(57,255,20,0.16),
      0 0 26px rgba(57,255,20,0.16);
  }
  .controls .pill.pillExpanded input,
  .controls .pill.pillExpanded select{ display:block; min-width: 160px; font-size: 12.5px; }
  .controls .pill.activityRange.pillExpanded .sep{ display:inline; }
  .controls .pill.activityRange.pillExpanded .quick{ display:flex; }
  .controls .pill.activityRange.pillExpanded input[type="date"]{ min-width: 120px; }

  .workStatus{ min-width: 120px; }
  #resetAll, #openJson{ padding:8px 10px; }
}

@media (max-width: 980px){
  /* Force a clean 2-row control layout (activity row, then filters row) */
  .controlLeft{ flex: 1 1 100%; }
  .controlRight{ flex: 1 1 100%; width: 100%; justify-content: flex-start; }
}

@media (max-width: 900px){
  /* On very small screens, allow wrapping naturally */
  .controlGroups{ flex-direction:column; align-items:stretch; }
  .controlLeft, .controlRight{ flex-wrap:wrap; }
  .controlRight{ display:flex; }
  #workStatus{ display:flex; }
}
.pill.activityRange .quick{
  display:flex;
  gap:6px;
  align-items:center;
}
.qBtn{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.78);
  padding:6px 10px;
  border-radius: 999px;
  cursor:pointer;
  font-size: 12px;
}
.qBtn:hover{ background: rgba(255,255,255,.10); }
.pill.activityRange .sep{
  color: var(--muted);
  font-size: 12px;
}
.pill.activityRange input[type="date"]{
  min-width: 140px;
}

.workStatus{
  min-width: 160px;
  height: 38px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  color: rgba(240,245,255,0.78);
  font-size: 12px;
  letter-spacing: .2px;
  user-select:none;
}

/* Modal (follow-up picker) */
.modal{ position:fixed; inset:0; z-index:50; display:grid; place-items:center; }
.modal[hidden]{ display:none !important; }
.modalBackdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(10px); }
.modalPanel{ position:relative; width:min(560px, calc(100vw - 28px)); padding:16px; border-radius: 18px; }
.modalHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.modalTitle{ font-size:16px; font-weight:700; }
.modalSub{ font-size:12px; color: var(--muted); margin-top:3px; }
.iconBtn{ border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); border-radius: 12px; width:36px; height:36px; cursor:pointer; }
.iconBtn:hover{ background: rgba(255,255,255,.10); }
.modalBody{ margin-top:14px; display:grid; gap:10px; }
.modalLabel{ font-size:12px; color: rgba(255,255,255,.75); }
.modalInput{ width:100%; padding:12px 12px; border-radius: 14px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); color: rgba(255,255,255,.92); outline:none; }
.modalInput:focus{ border-color: rgba(80,255,160,.28); box-shadow: 0 0 0 3px rgba(80,255,160,.10); }
.modalHint{ font-size:12px; }
.modalActions{ margin-top:14px; display:flex; gap:10px; align-items:center; }

/* Clickable value link inside rows */
.vLink{
  all: unset;
  color: rgba(232,255,244,.92);
  cursor:pointer;
  text-align:right;
}
.vLink:hover{ text-decoration: underline; }

.workStatus .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(8px);
}

.workStatus .dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(138, 226, 255, 0.95);
  box-shadow: 0 0 0 4px rgba(138, 226, 255, 0.14);
  animation: pulse 1.2s ease-in-out infinite;
}

.workStatus .label{
  white-space: nowrap;
}

@keyframes pulse{
  0%{ transform: scale(0.95); opacity: .7; }
  50%{ transform: scale(1.15); opacity: 1; }
  100%{ transform: scale(0.95); opacity: .7; }
}
.pill{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: wrap;          /* keep content inside pill */
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  /* subtle neon green border */
  border: 1px solid rgba(80,255,160,.18);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 0 0 1px rgba(80,255,160,.06),
    0 0 18px rgba(80,255,160,.06);
  flex: 0 0 auto;           /* size to content; if it doesn't fit, wrap to next line */
  max-width: 100%;
}
.pill label{font-size:12px; color:var(--muted)}
.pill input,.pill select{
  font-size:13px;
  color:var(--text);
  background: transparent;
  border:none; outline:none;
  width: auto;
  min-width: 0;
}
.pill select{ min-width: 0; }
.pill input[type="date"]{ width: 140px; }

/* Desktop density mode: compact sizing, but NEVER allow overlaps.
   We allow wrapping by default; on very wide screens the pills will naturally stay on one row anyway. */
@media (min-width: 1250px){
  .controlGroups{ flex-wrap: wrap; align-items:flex-start; }
  .controlRight{ flex-wrap: wrap; }
  .controls{ gap:8px; padding:8px; }
  .pill{ padding:8px 10px; gap:8px; }
  .pill label{ font-size:11px; }
  .pill input,.pill select{ font-size:12.5px; min-width: 140px; }
  .pill select{ min-width: 128px; }
  .pill.pillSearch input{ min-width: 220px; }
  .pill.activityRange{ padding:8px 10px; gap:8px; }
  .pill.activityRange input[type="date"]{ min-width: 132px; }
  .qBtn{ padding:5px 8px; font-size:11.5px; }
}

/* Ultra-wide: keep wrap enabled to avoid any overlap in dense filter views. */
@media (min-width: 1900px){
  .controlGroups{ flex-wrap: wrap; }
  .controlRight{ flex-wrap: wrap; }
}

.stageStrip{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
body.hasAlphaRail .stageStrip{ padding-left: 54px; }
.stagePill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(var(--stage-rgb) / .42);
  background: linear-gradient(135deg, rgba(var(--stage-rgb) / .18), rgba(255,255,255,.05));
  box-shadow: 0 0 26px rgba(var(--stage-rgb) / .12);
  font-size: 13px;
  color: rgba(255,255,255,.90);
}
.stagePill .name{ color: rgba(255,255,255,.82); }
.stagePill .count{ font-weight:800; }
.stagePill .money{ color: rgba(255,255,255,.76); font-variant-numeric: tabular-nums; }

.pipelineMini{
  margin-top: 14px;
}

/* Make the mini funnel feel like a centerpiece */
.pipelineMini .funnel{ max-width: 1040px; }
.funnelRow{ grid-template-columns: 180px 1fr 56px 104px; }
.funnelBar{ height: 16px; }

.funnel{
  margin-top: 8px;
  display:grid;
  gap:10px;
}

/* Two-column funnel layout (used in Pipeline summary panel for balance) */
.funnel.twoCol{
  grid-template-columns: 1fr 1fr;
  column-gap: 22px;
}
.funnel.twoCol .funnelRow{
  grid-template-columns: 120px 1fr 44px 84px;
}

/* Center the mini funnel within the left panel */
.pipelineMini .funnel{
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.funnelRow{
  display:grid;
  /* Make bars wider by shrinking the fixed columns */
  grid-template-columns: 128px 1fr 48px 96px;
  gap:10px;
  align-items:center;
}

.funnelLabel{ font-size:12px; color: rgba(255,255,255,.72); }
.funnelCount{ text-align:right; font-weight:700; }
.funnelMoney{ text-align:right; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.78); }

.funnelBar{
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}

/* Stage money stacked bars */
.moneyBars{ display:grid; gap:12px; }
.moneyBarRow{ display:grid; gap:8px; }
.moneyBarHead{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.moneyBarHead .label{ color: rgba(255,255,255,.78); font-size:12px; }
.moneyBarHead .total{ font-weight:900; font-variant-numeric: tabular-nums; }
.moneyBar{ height: 18px; border-radius: 999px; overflow:hidden; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); display:flex; }
.moneySeg{ height:100%; }
.moneyLegend{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 10px; }
.moneyKey{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color: rgba(255,255,255,.78); }
.moneySwatch{ width:10px; height:10px; border-radius:3px; }

.funnelFill{
  height:100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--stage-rgb) / .95), rgba(var(--stage-rgb) / .45));
  box-shadow: 0 0 18px rgba(var(--stage-rgb) / .18);
}

.reportsTabs{
  margin-top: 12px;
  display:flex;
  gap:8px;
  align-items:center;
}
.rTab{
  padding:10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.84);
  cursor:pointer;
}
.rTab:hover{ background: rgba(255,255,255,.10); }
.rTab.active{
  color: rgba(7,10,18,.92);
  background: linear-gradient(135deg, rgba(80,255,160,.95), rgba(80,255,160,.55));
  border-color: rgba(80,255,160,.35);
  box-shadow: 0 0 0 3px rgba(80,255,160,.14);
}

.reportView[hidden]{ display:none !important; }

.reportsGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

.reportBlock{
  grid-column: span 6;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}

/* Keep the 2-up report cards feeling balanced */
.reportView .reportsGrid{ align-items: stretch; }
#reportsFunnel{ min-height: 260px; }

.lineChart{
  width: 100%;
  min-height: 260px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  overflow: hidden;
}
.lineChart svg{ display:block; width:100%; height:280px; }
.lineLegend{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.lineKey{ display:flex; align-items:center; gap:8px; font-size:12px; color: rgba(255,255,255,.78); }
.lineSwatch{ width:10px; height:10px; border-radius:999px; background: rgba(255,255,255,.5); box-shadow: 0 0 14px rgba(255,255,255,.12); }

.riskChart{
  width: 100%;
  min-height: 260px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  overflow: hidden;
  padding: 14px;
}
.riskBar{ height: 18px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); overflow:hidden; }
.riskSeg{ height:100%; display:inline-block; }

.heatmap{
  width:100%;
  border-radius:16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  overflow:hidden;
  padding: 14px;
}
.heatGrid{ display:grid; grid-template-columns: 160px repeat(4, 1fr); gap: 8px; align-items:center; }
.heatHead{ font-size:12px; color: rgba(255,255,255,.65); }
.heatStage{ font-size:12px; color: rgba(255,255,255,.75); }
.heatCell{
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 10px;
  font-size:12px;
  color: rgba(255,255,255,.84);
}
.heatCell small{ color: rgba(255,255,255,.62); }

/* Let the first report block span full width when needed (Pipeline health). */
.reportBlock.wide{ grid-column: span 12; }

.reportBlock h2{ margin: 0 0 8px 0; font-size: 14px; }

@media (max-width: 920px){
  .funnelRow{ grid-template-columns: 120px 1fr 60px; }
  .reportBlock{ grid-column: span 12; }
}

.btn{
  padding:10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, rgba(135,166,255,.22), rgba(255,255,255,.06));
  color:var(--text);
  cursor:pointer;
}
.btn:hover{border-color: rgba(255,255,255,.28)}

/* Review sub-tab buttons: make active state neon green */
#reviewMode .btn:not(.ghost){
  border-color: rgba(57,255,20,0.40);
  background: linear-gradient(135deg, rgba(57,255,20,0.22), rgba(0,0,0,0.06));
  box-shadow:
    0 0 0 1px rgba(57,255,20,0.20),
    0 0 22px rgba(57,255,20,0.18),
    0 0 48px rgba(57,255,20,0.14);
  color: rgba(235,255,240,0.96);
}
#reviewMode .btn:not(.ghost):hover{
  border-color: rgba(57,255,20,0.55);
  box-shadow:
    0 0 0 1px rgba(57,255,20,0.26),
    0 0 30px rgba(57,255,20,0.26),
    0 0 70px rgba(57,255,20,0.18);
}

.wrap{max-width: 100%; margin:0 auto; padding:22px}

/* Alphabet rail (A–Z quick jump)
   NOTE: When visible, add left gutter so it doesn't overlap card titles. */
body.hasAlphaRail #cards{ padding-left: 54px; }
body.hasAlphaRail .footer{ padding-left: 54px; }
/* Keep header filter pills aligned with the card gutter when the alpha rail is visible */
body.hasAlphaRail .headerFilters{ padding-left: 54px; }

.alphaRail{
  position: fixed;
  left: 10px;
  top: calc(var(--header-bottom, 260px) + 10px); /* below header */
  z-index: 50;
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px 6px;
  border-radius: 12px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
}
.alphaRail button{
  width: 26px;
  height: 20px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.alphaRail button:hover{ background: rgba(57,255,20,.14); border-color: rgba(57,255,20,.35); }
.alphaRail button[disabled]{ opacity: .25; cursor: not-allowed; }

@media (max-width: 980px){
  .alphaRail{ display:none !important; }
}

/* Active filter chips */
.filterChips{
  width:100%;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.chip{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  font-size:12px;
}
.chip button{
  border:0;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.85);
  border-radius:999px;
  width:22px;
  height:22px;
  cursor:pointer;
}

/* Drawer */
.drawerScrim{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 80;
  display:none;
}
.drawer{
  position: fixed;
  right: 12px;
  top: 110px;
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100vh - 140px);
  overflow:auto;
  z-index: 90;
  display:none;
  border-radius: 16px;
  padding: 12px;
  background: rgba(12,16,32,.86);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}
.drawerHead{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.drawerTitle{ font-weight:700; }
@media (max-width: 980px){
  .drawer{ top: 90px; max-height: calc(100vh - 110px); }
}


.glass{
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.hero{
  padding:14px 16px;
  display:flex;
  gap:16px;
  align-items:flex-start;
  justify-content:space-between;
}

/* If the alphabet rail is visible (pipeline view), align the entire hero panel
   with the card gutter (so the pill edges line up with the cards/filters). */
body.hasAlphaRail .hero{
  margin-left: 54px;
  width: calc(100% - 54px);
}

/* Mission Control Office: hierarchy + micro-motion */

/* Mission Control polish: consistent tiles + tighter tables */
.mcTiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px;}
.mcTile{padding:10px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.14); box-shadow: 0 18px 60px rgba(0,0,0,.22);}
.mcTile .k{color:rgba(255,255,255,.72); font-size:12px; font-weight:800; letter-spacing:.2px;}
.mcTile .v{margin-top:6px; font-weight:950; font-size:18px; font-variant-numeric: tabular-nums;}
.mcTile .s{margin-top:6px; color:rgba(255,255,255,.62); font-size:12px;}

.view[data-view="mission"] .table th{position:sticky; top:0; background: rgba(6,10,18,.85); backdrop-filter: blur(8px);}
.view[data-view="mission"] .table td, .view[data-view="mission"] .table th{padding:10px 10px;}

.mcSprite.mcAnchor img{ width:62px !important; height:62px !important; }
.mcSprite.mcAnchor .mcHalo{ opacity:.30; }

@keyframes mcPulse { 0%,100%{ transform:scale(1); opacity:.28;} 50%{ transform:scale(1.04); opacity:.42;} }
@keyframes mcDots { 0%,100%{ transform:translateY(0); opacity:.25;} 50%{ transform:translateY(-3px); opacity:.65;} }

.mcSprite.isActive .mcHalo{ opacity:.55; animation: mcPulse 3.6s ease-in-out infinite; }
.mcSprite.isActive .mcTyping{ display:flex !important; }
.mcSprite.isActive .mcTyping span:nth-child(1){ animation: mcDots 1.1s ease-in-out infinite; }
.mcSprite.isActive .mcTyping span:nth-child(2){ animation: mcDots 1.1s ease-in-out infinite .18s; }
.mcSprite.isActive .mcTyping span:nth-child(3){ animation: mcDots 1.1s ease-in-out infinite .34s; }

.mcSprite.mcTeam{ opacity:.92; }

.mcZone{ transition: box-shadow .28s ease, border-color .28s ease, background .28s ease; }
.mcZone.isHot{
  border-color: rgba(80,255,160,.40) !important;
  background: rgba(80,255,160,.06) !important;
  box-shadow: 0 0 0 3px rgba(80,255,160,.10), 0 18px 55px rgba(0,0,0,.20);
}

/* Contacts view: prioritize legibility over staying on one row.
   Let the header wrap so the KPI pills can drop to the next line instead of
   squeezing/clipping the left-side explanatory text. */
.view[data-view="contacts"] .hero{ flex-wrap: wrap; }
.view[data-view="contacts"] .hero > div:first-child{ flex: 1 1 520px; min-width: 340px; }
.view[data-view="contacts"] #mktCounts.meta{
  flex: 1 1 100%;
  width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* Other views: allow wrap only on smaller screens so KPI pills
   can move to a second row instead of overflowing off-screen. */
@media (max-width: 1320px){
  .hero{ flex-wrap: wrap; }
  .hero > div:first-child{ flex: 1 1 360px; min-width: 260px; }
  .hero > .meta{ flex: 1 1 100%; width: 100%; justify-content: flex-start; }
}
.hero h1{margin:0 0 6px 0; font-size:18px}
.muted{color:var(--muted); font-size:13px; line-height:1.45}

/* KPI header: keep it as ONE horizontal row on large screens.
   Wrap cleanly (row 2+) on narrower screens. */
.meta{
  display:flex;
  flex-wrap: nowrap;
  gap:10px;
  align-items:stretch;
  min-width: 0;
}

/* If the viewport is narrower, allow KPI tiles to wrap to a second row. */
@media (max-width: 1400px){
  .meta{ flex-wrap: wrap; }
}

/* Contacts KPI row: always allow wrap (legibility > one-row aesthetic). */
.view[data-view="contacts"] #mktCounts.meta{ flex-wrap: wrap; }

/* Sponsorship (pipeline) KPI row: allow wrap on wide/4K screens too. */
.view[data-view="pipeline"] .hero .meta{ flex-wrap: wrap; }

.metric{
  min-width: 0;
  padding:10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height: 72px;
  position: relative;
  overflow: hidden;
}

/* Contacts KPI row: allow 2-line labels without clipping */
#mktCounts .metric{ min-height: 96px; }
#mktCounts .metric .k{ font-size: 11.5px; }
.metric .k{font-size:12px; line-height:1.1; color:var(--muted)}
.metric .v{font-size:20px; font-weight:850; margin-top:6px; line-height:1; font-variant-numeric: tabular-nums; }

/* Small corner logo mark for branded metrics */
.metricLogo{
  position:absolute;
  top:10px;
  right:10px;
  width:26px;
  height:26px;
  object-fit:contain;
  opacity:1;
  filter: saturate(1.1) contrast(1.1) drop-shadow(0 2px 10px rgba(0,0,0,0.35));
  pointer-events:none;
}

/* Mission Control Usage/Costs: small row logos */
.costLogo{
  width:18px;
  height:18px;
  border-radius: 6px;
  object-fit:contain;
  margin-right:8px;
  vertical-align: -3px;
  opacity:0.92;
  filter: saturate(1.05) contrast(1.05) drop-shadow(0 2px 10px rgba(0,0,0,0.28));
  pointer-events:none;
}

/* Ensure KPI label text never sits underneath the corner logo.
   Default behavior: allow up to 2 lines (clean wrap) so labels don't get chopped.
   On very narrow screens we fall back to single-line ellipsis. */
.metric .k{
  padding-right: 38px;
  max-width: calc(100% - 38px);
  line-height: 1.15;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* Golden tile label is larger; give it a touch more room */
.metric.metricGolden .k{ padding-right: 44px; max-width: calc(100% - 44px); }

/* On narrow screens, give the logo a little more clearance so labels never collide
   and keep header height compact by using single-line ellipsis. */
@media (max-width: 600px){
  .metric .k{
    padding-right: 48px;
    max-width: calc(100% - 48px);
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .metricLogo{ right: 8px; top: 8px; }
}

/* Branded metric base */
.metric.metricBranded{
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}

/* Brand palettes (best-effort from public brand usage; can refine with official brand kits) */
.metric.metricCC{
  /* sampled from your reference screenshot */
  --c: 72,155,241;
  border-color: rgba(var(--c), 0.98);
  box-shadow:
    0 0 0 1px rgba(var(--c), 0.62) inset,
    0 18px 44px rgba(0,0,0,0.30),
    0 0 28px rgba(var(--c), 0.28);
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(var(--c), 0.38), rgba(255,255,255,0.06) 60%),
    linear-gradient(135deg, rgba(var(--c), 0.16), rgba(255,255,255,0.00) 55%),
    rgba(255,255,255,.06);
}
.metric.metricShopify{
  /* sampled from your reference screenshot */
  --c: 112,212,145;
  border-color: rgba(var(--c), 0.98);
  box-shadow:
    0 0 0 1px rgba(var(--c), 0.56) inset,
    0 18px 44px rgba(0,0,0,0.30),
    0 0 28px rgba(var(--c), 0.22);
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(var(--c), 0.34), rgba(255,255,255,0.06) 60%),
    linear-gradient(135deg, rgba(var(--c), 0.15), rgba(255,255,255,0.00) 55%),
    rgba(255,255,255,.06);
}
.metric.metricGivebutter{
  /* Givebutter orange */
  --c: 255, 90, 54;
  border-color: rgba(var(--c), 0.98);
  box-shadow:
    0 0 0 1px rgba(var(--c), 0.56) inset,
    0 18px 44px rgba(0,0,0,0.30),
    0 0 28px rgba(var(--c), 0.22);
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(var(--c), 0.34), rgba(255,255,255,0.06) 60%),
    linear-gradient(135deg, rgba(var(--c), 0.15), rgba(255,255,255,0.00) 55%),
    rgba(255,255,255,.06);
}
.metric.metricM365{
  /* sampled from your reference screenshot */
  --c: 59,167,252;
  border-color: rgba(var(--c), 0.98);
  box-shadow:
    0 0 0 1px rgba(var(--c), 0.56) inset,
    0 18px 44px rgba(0,0,0,0.30),
    0 0 28px rgba(var(--c), 0.22);
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(var(--c), 0.32), rgba(255,255,255,0.06) 60%),
    linear-gradient(135deg, rgba(var(--c), 0.14), rgba(255,255,255,0.00) 55%),
    rgba(255,255,255,.06);
}
.metric.metricFareharbor{
  /* sampled from your reference screenshot */
  --c: 103,220,244;
  border-color: rgba(var(--c), 0.98);
  box-shadow:
    0 0 0 1px rgba(var(--c), 0.52) inset,
    0 18px 44px rgba(0,0,0,0.30),
    0 0 28px rgba(var(--c), 0.20);
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(var(--c), 0.30), rgba(255,255,255,0.06) 60%),
    linear-gradient(135deg, rgba(var(--c), 0.12), rgba(255,255,255,0.00) 55%),
    rgba(255,255,255,.06);
}
.metric.metricZoomInfo{
  /* ZoomInfo: use brand red (more "intent"/alert) */
  --c: 255, 59, 59;
  border-color: rgba(var(--c), 0.98);
  box-shadow:
    0 0 0 1px rgba(var(--c), 0.52) inset,
    0 18px 44px rgba(0,0,0,0.30),
    0 0 28px rgba(var(--c), 0.20);
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(var(--c), 0.30), rgba(255,255,255,0.06) 60%),
    linear-gradient(135deg, rgba(var(--c), 0.12), rgba(255,255,255,0.00) 55%),
    rgba(255,255,255,.06);
}
.metric.metricGivebutter{
  /* givebutter: keep bold warm yellow */
  --c: 255, 200, 0;
  border-color: rgba(var(--c), 0.98);
  box-shadow:
    0 0 0 1px rgba(var(--c), 0.45) inset,
    0 18px 44px rgba(0,0,0,0.30),
    0 0 28px rgba(var(--c), 0.18);
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(var(--c), 0.24), rgba(255,255,255,0.06) 60%),
    linear-gradient(135deg, rgba(var(--c), 0.10), rgba(255,255,255,0.00) 55%),
    rgba(255,255,255,.06);
}

.metric.metricDonorDock{
  border-color: rgba(0, 160, 255, 0.95);
  box-shadow:
    0 0 0 1px rgba(0,160,255,0.40) inset,
    0 18px 44px rgba(0,0,0,0.30),
    0 0 26px rgba(0,160,255,0.18);
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(0,160,255,0.20), rgba(255,255,255,0.06) 60%),
    linear-gradient(135deg, rgba(0,160,255,0.10), rgba(255,255,255,0.00) 55%),
    rgba(255,255,255,.06);
}

.metric.metricProfitableMedia{
  border-color: rgba(120, 255, 40, 0.95);
  box-shadow:
    0 0 0 1px rgba(120,255,40,0.35) inset,
    0 18px 44px rgba(0,0,0,0.30),
    0 0 26px rgba(120,255,40,0.16);
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(120,255,40,0.18), rgba(255,255,255,0.06) 60%),
    linear-gradient(135deg, rgba(120,255,40,0.08), rgba(255,255,255,0.00) 55%),
    rgba(255,255,255,.06);
}

.metric.metricCITP{
  border-color: rgba(57,255,20, 0.95);
  box-shadow:
    0 0 0 1px rgba(57,255,20,0.55) inset,
    0 18px 44px rgba(0,0,0,0.30),
    0 0 28px rgba(57,255,20,0.18);
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(57,255,20,0.22), rgba(255,255,255,0.06) 60%),
    linear-gradient(135deg, rgba(57,255,20,0.10), rgba(255,255,255,0.00) 55%),
    rgba(255,255,255,.06);
}
.metric.metricCITP .metricLogo{
  filter: saturate(1.1) contrast(1.1) drop-shadow(0 0 10px rgba(57,255,20,0.28));
}

/* Total (Golden) highlight — shiny gold metallic fill + strong sheen */
.metric.metricGolden{
  border: 1px solid rgba(226, 188, 98, 0.72);
  box-shadow:
    0 0 0 1px rgba(255, 214, 132, 0.22) inset,
    0 18px 44px rgba(0,0,0,0.32),
    0 0 26px rgba(226,188,98,0.12);
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(255, 235, 170, 0.22), rgba(0,0,0,0.00) 62%),
    linear-gradient(180deg, rgba(255, 235, 170, 0.10), rgba(0,0,0,0.00)),
    linear-gradient(135deg, rgba(255, 210, 120, 0.14), rgba(255,255,255,0.00) 55%),
    rgba(255,255,255,.06);
}
.metric.metricGolden::before{
  content:"";
  position:absolute;
  inset:-60% -25% auto -25%;
  height:180%;
  transform: rotate(-15deg);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.10) 22%,
    rgba(255,255,255,0.34) 50%,
    rgba(255,255,255,0.10) 78%,
    rgba(255,255,255,0.00) 100%
  );
  opacity: 0.62;
  pointer-events:none;
  mix-blend-mode: screen;
}
.metric.metricGolden::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 18px;
  padding:1px;
  background: linear-gradient(135deg,
    rgba(255, 245, 205, 0.45),
    rgba(120, 80, 10, 0.10) 42%,
    rgba(255, 235, 170, 0.20) 72%,
    rgba(255, 245, 205, 0.34)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:1;
}
.metric.metricGolden .k{
  color: rgba(255, 230, 165, 0.95);
  font-size: 16px;
  letter-spacing: 0.25px;
}
.metric.metricGolden .v{
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
  font-size: 28px;
}
.metric.metricGolden .metricLogoTotal{
  /* make it feel 3D + metallic */
  filter:
    saturate(1.2)
    contrast(1.15)
    drop-shadow(0 1px 0 rgba(255,255,255,0.22))
    drop-shadow(0 10px 18px rgba(0,0,0,0.30))
    drop-shadow(0 0 14px rgba(226,188,98,0.18));
  opacity: 0.98;
}

/* Website highlight (holiday red/green + Blinky)
   Goal: make this KPI pill feel “brand-forward” and easy to spot.
*/
.metric.metricWebsite{
  /* Keep a simple base border for fallback, but let ::after do the real outline */
  border: 1px solid rgba(31,169,113,0.55);
  box-shadow:
    0 0 0 1px rgba(225,40,58,0.18) inset,
    0 18px 44px rgba(0,0,0,0.30),
    0 0 26px rgba(0,0,0,0.45);
  background:
    radial-gradient(120% 140% at 18% 0%, rgba(225,40,58,0.20), rgba(0,0,0,0.00) 62%),
    radial-gradient(120% 140% at 82% 12%, rgba(31,169,113,0.18), rgba(0,0,0,0.00) 62%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.00)),
    rgba(255,255,255,.06);
}

/* Vibrant outline stroke + glow */
.metric.metricWebsite::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 18px;
  padding:2px;

  /* Festive neon outline: red → gold → green → cyan */
  background: linear-gradient(135deg,
    rgba(225,40,58,0.95) 0%,
    rgba(255,214,74,0.85) 32%,
    rgba(31,169,113,0.90) 64%,
    rgba(70,214,219,0.80) 100%
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  /* Glow that sits outside the pill */
  filter:
    drop-shadow(0 0 10px rgba(225,40,58,0.32))
    drop-shadow(0 0 12px rgba(31,169,113,0.28));

  pointer-events:none;
  opacity: 0.95;
}

/* Soft animated shimmer for extra pop (subtle) */
.metric.metricWebsite::before{
  content:"";
  position:absolute;
  inset:-70% -35% auto -35%;
  height:220%;
  transform: rotate(-18deg);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.10) 22%,
    rgba(255,255,255,0.24) 50%,
    rgba(255,255,255,0.10) 78%,
    rgba(255,255,255,0.00) 100%
  );
  opacity: 0.40;
  pointer-events:none;
  mix-blend-mode: screen;
}

.metric.metricWebsite .metricLogo{
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter:
    saturate(1.2)
    drop-shadow(0 2px 4px rgba(0,0,0,0.35))
    drop-shadow(0 0 10px rgba(255,214,74,0.20));
}

/* Blacklisted highlight (black metallic frame + subtle sheen) */
.metric.metricBlacklisted{
  /* Bright black metallic */
  border: 1px solid rgba(10, 10, 12, 0.98);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.14) inset,
    0 18px 44px rgba(0,0,0,0.38),
    0 0 26px rgba(0,0,0,0.65);
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(255,255,255,0.10), rgba(0,0,0,0.00) 62%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.00)),
    rgba(255,255,255,.06);
}
.metric.metricBlacklisted::before{
  content:"";
  position:absolute;
  inset:-60% -25% auto -25%;
  height:180%;
  transform: rotate(-15deg);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.10) 22%,
    rgba(255,255,255,0.26) 50%,
    rgba(255,255,255,0.10) 78%,
    rgba(255,255,255,0.00) 100%
  );
  opacity: 0.65;
  pointer-events:none;
  mix-blend-mode: screen;
}
.metric.metricBlacklisted::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 18px;
  padding:1px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.30),
    rgba(0,0,0,0.12) 42%,
    rgba(255,255,255,0.16) 72%,
    rgba(255,255,255,0.26)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:1;
}
.metric.metricBlacklisted .k{ color: rgba(245,245,248,0.92); }
.metric.metricBlacklisted .v{ text-shadow: 0 1px 0 rgba(0,0,0,0.55); }

/* Money row: slightly taller for hierarchy */
.metric:has(#mUnweighted),
.metric:has(#mWeighted),
.metric:has(#mWeightedPct){
  min-height: 84px;
}

.vizGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 980px){
  .vizGrid{ grid-template-columns: 1fr; }
}
.vizPanel{
  padding:16px;
}
.vizPanel h2{
  margin:0 0 4px 0;
  font-size:14px;
  letter-spacing: .2px;
}
.vizPanel .muted{ margin:0 0 10px 0; }
.chartWrap{
  min-height: 240px;
}

.grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:12px;
}

.card{
  grid-column: span 6;
  padding:16px;
  border-radius: var(--radius);
  position:relative;
}
@media (max-width: 920px){ .card{grid-column: span 12;} .pill input{min-width:140px} }

.card .head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.card h2{margin:0; font-size:16px}
.card .contact{font-size:12px; color:var(--muted); margin-top:4px}

.badges{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.badge{
  font-size:12px;
  padding:6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.badge.category{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
}


.badge.pri{
  border-color: rgba(80,255,160,.28);
  background: rgba(0,0,0,.18);
  color: rgba(232,255,244,.90);
  font-weight: 800;
}
/* Dynamic neon stage badge (driven by --stage-rgb from JS) */
.badge.stageDyn{
  border-color: rgba(var(--stage-rgb) / .55);
  background: linear-gradient(135deg, rgba(var(--stage-rgb) / .22), rgba(var(--stage-rgb) / .10));
  color: rgba(255,255,255,.92);
  box-shadow: 0 0 18px rgba(var(--stage-rgb) / .14);
}

/* Back-compat (older class-based badges) */
.badge.prospecting{border-color: rgba(102,240,255,.55); background: linear-gradient(135deg, rgba(102,240,255,.20), rgba(102,240,255,.08)); color: rgba(220,250,255,.95)}
.badge.inprogress{
border-color: rgba(135,166,255,.55); background: linear-gradient(135deg, rgba(135,166,255,.20), rgba(135,166,255,.08)); color: rgba(234,240,255,.95)}
.badge.due{border-color: rgba(251,191,36,.60); background: linear-gradient(135deg, rgba(251,191,36,.22), rgba(251,191,36,.10)); color: rgba(255,245,220,.95)}
.badge.meeting{border-color: rgba(0,229,255,.45); background: linear-gradient(135deg, rgba(0,229,255,.18), rgba(0,229,255,.08)); color: rgba(220,250,255,.95)}
.badge.hold{border-color: rgba(167,139,250,.65); background: linear-gradient(135deg, rgba(167,139,250,.22), rgba(167,139,250,.10)); color: rgba(243,236,255,.95)}
.badge.dead{border-color: rgba(148,163,184,.55); background: linear-gradient(135deg, rgba(148,163,184,.18), rgba(148,163,184,.08)); color: rgba(238,242,255,.88)}
.badge.closedwon{
  border-color: rgba(80,255,160,.55);
  background: linear-gradient(135deg, rgba(80,255,160,.22), rgba(80,255,160,.10));
  color: rgba(214,255,232,.98);
}
.badge.closedlost{border-color: rgba(255,80,160,.55); background: linear-gradient(135deg, rgba(255,80,160,.18), rgba(255,80,160,.08)); color: rgba(255,226,240,.95)}

/* Dynamic neon stage highlights (driven by --stage-rgb from JS) */
.card.stageDyn{
  border-color: rgba(var(--stage-rgb) / .18);
}
.card.stageDyn::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: var(--radius);
  background: radial-gradient(820px 260px at 12% 0%, rgba(var(--stage-rgb) / .16), transparent 60%);
  pointer-events:none;
}

/* Special-case: Closed Lost is BLACK — keep it readable, but not glowy */
.card[data-stage="closed_lost"]{ border-color: rgba(255,255,255,.10); }
.card[data-stage="closed_lost"]::before{ background: none; }
.badge.stageDyn[style*="--stage-rgb: 0 0 0"]{
  border-color: rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
  box-shadow: none;
  color: rgba(255,255,255,.88);
}

/* Back-compat (older class-based stage highlights) */
.card.stage-prospecting{
  border-color: rgba(102,240,255,.18);
}
.card.stage-prospecting::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: var(--radius);
  background: radial-gradient(820px 260px at 12% 0%, rgba(102,240,255,.16), transparent 60%);
  pointer-events:none;
}

.card.stage-sent{
  border-color: rgba(135,166,255,.18);
}
.card.stage-sent::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: var(--radius);
  background: radial-gradient(820px 260px at 12% 0%, rgba(135,166,255,.16), transparent 60%);
  pointer-events:none;
}

.card.stage-follow_up_due{
  border-color: rgba(251,191,36,.20);
}
.card.stage-follow_up_due::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: var(--radius);
  background: radial-gradient(820px 260px at 12% 0%, rgba(251,191,36,.16), transparent 60%);
  pointer-events:none;
}

.card.stage-meeting{
  border-color: rgba(0,229,255,.18);
}
.card.stage-meeting::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: var(--radius);
  background: radial-gradient(820px 260px at 12% 0%, rgba(0,229,255,.14), transparent 60%);
  pointer-events:none;
}

.card.stage-on_hold{
  border-color: rgba(167,139,250,.20);
}
.card.stage-on_hold::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: var(--radius);
  background: radial-gradient(820px 260px at 12% 0%, rgba(167,139,250,.16), transparent 60%);
  pointer-events:none;
}

.card.stage-dead{
  border-color: rgba(148,163,184,.16);
}
.card.stage-dead::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: var(--radius);
  background: radial-gradient(820px 260px at 12% 0%, rgba(148,163,184,.12), transparent 60%);
  pointer-events:none;
}

.card.stage-closed_lost{
  border-color: rgba(255,80,160,.18);
}
.card.stage-closed_lost::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: var(--radius);
  background: radial-gradient(820px 260px at 12% 0%, rgba(255,80,160,.14), transparent 60%);
  pointer-events:none;
}

/* Celebrate wins: brand neon green gradient highlight */
.card.won{
  border-color: rgba(80,255,160,.26);
  box-shadow:
    0 0 0 1px rgba(80,255,160,.10),
    0 12px 34px rgba(0,0,0,.28);
}
.card.won::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: var(--radius);
  background:
    radial-gradient(820px 260px at 12% 0%, rgba(80,255,160,.22), transparent 58%),
    radial-gradient(780px 300px at 100% 22%, rgba(80,255,160,.14), transparent 62%);
  pointer-events:none;
}
.card.won .head h2{
  color: rgba(232,255,244,.98);
}
.card.won .contact{
  color: rgba(224,255,238,.76);
}

.actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn.small{
  padding:9px 12px;
  font-size:13px;
}

.btn.ghost{
  background: rgba(255,255,255,.04);
}

.btn.disabled{
  opacity:.45;
  cursor:not-allowed;
}

.btn.danger{
  border-color: rgba(255,85,85,.35);
  color: rgba(255,190,190,.92);
  background: rgba(255,85,85,.08);
}
.btn.danger:hover{ background: rgba(255,85,85,.14) }

.card .body{margin-top:12px; display:grid; gap:10px}
.row{display:flex; justify-content:space-between; gap:10px; font-size:13px}
.row .k{color:var(--muted)}
.row .v{color:var(--text)}

/* flag: raise ask */
[data-prev-for][data-flag="raise"]{
  color: rgba(251,191,36,.95);
}
[data-prev-for][data-flag="raise"]::after{
  content: "  ↑ min $5k";
  font-size: 12px;
  color: rgba(251,191,36,.85);
}

.userNotes{
  margin-top:10px;
  padding:12px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}

.userNotesSummary{
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin:0 0 10px 0;
  color: rgba(255,255,255,.78);
  font-size:13px;
}

.userNotesSummary::-webkit-details-marker{ display:none; }

.userNotes[open] .userNotesSummary{ margin-bottom:10px; }
.userNotes:not([open]) .noteComposer,
.userNotes:not([open]) .noteList{ display:none; }

.noteComposer{
  display:flex;
  gap:10px;
  align-items:center;
}

.noteInput{
  flex: 1;
  padding:10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.88);
  outline:none;
  font-size:13px;
  resize: vertical;
  min-height: 44px;
  max-height: 200px;
  line-height: 1.35;
}

.noteInput:focus{
  border-color: rgba(135,166,255,.45);
  box-shadow: 0 0 0 3px rgba(135,166,255,.12);
}

.noteList{
  margin-top:10px;
  display:grid;
  gap:8px;
}

.noteRow{
  padding:10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
}

.noteTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:4px;
}

.noteTs{
  font-size:12px;
  color: rgba(255,255,255,.55);
}

.noteDel{
  font-size:12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.75);
  padding:6px 10px;
  border-radius: 999px;
  cursor:pointer;
}

.noteDel:hover{ border-color: rgba(255,255,255,.22); }

.noteTag{
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.70);
  background: rgba(0,0,0,.14);
}
.noteKindBtn{
  border:none;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.74);
  padding:6px 8px;
  border-radius: 999px;
  cursor:pointer;
  font-size: 11px;
}
.noteKindBtn:hover{ background: rgba(255,255,255,.10); }

.noteKind{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.90);
  border-radius: 12px;
  padding: 8px 10px;
}

.noteText{
  font-size:13px;
  color: rgba(255,255,255,.84);
  white-space: pre-wrap;
}

.noteGallery{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.noteAsset{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  text-decoration:none;
}
.noteAsset.img{
  width: 120px;
  height: 90px;
}
.noteAsset.img img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.noteAsset.pdf{
  padding:10px 12px;
  max-width: 260px;
  color: rgba(255,255,255,.85);
  font-size:12px;
}
.noteAsset:hover{ border-color: rgba(80,255,160,.35); box-shadow: 0 0 0 3px rgba(80,255,160,.10); }

.editPanel{
  margin-top:10px;
  padding:12px;
  border-radius: 18px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.10);
}

/* Full-width row variant (e.g., Type segmented control) */
.rowFull{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
}
.rowFull .k{ width:100%; }

.editInput{
  width: min(650px, 82%);
  padding:9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.88);
  outline: none;
  font-size: 13px;
}

.editInput:focus{
  border-color: rgba(135,166,255,.45);
  box-shadow: 0 0 0 3px rgba(135,166,255,.10);
}

.editActions{
  margin-top:10px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  width: min(650px, 82%);
  justify-content:center;
  margin-left:auto;
  margin-right:auto;
}
.editActions button{
  flex: 1;
}

/* Category segmented control (Edit panel) */
.catSwitch{
  display:flex;
  gap:6px;
  padding:6px;
  border-radius: 999px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.10);
  width: min(650px, 82%);
  justify-content:center;
  margin-left:auto;
  margin-right:auto;
}
.catBtn{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.80);
  padding:8px 12px;
  border-radius: 999px;
  cursor:pointer;
  font-size: 12px;
  flex:1;
  text-align:center;
}
.catBtn:hover{ background: rgba(255,255,255,.10); }
.catBtn.active{
  background: rgba(80,255,160,.18);
  border-color: rgba(80,255,160,.32);
  color: rgba(232,255,244,.95);
}

.footer{margin:18px 2px 28px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}

/* Stage + Tree views */
.stageCalendar{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
@media (max-width: 980px){ .stageCalendar{ grid-template-columns: 1fr; } }
.stageMonth{ padding:12px; border:1px solid rgba(255,255,255,.10); border-radius:16px; background: rgba(255,255,255,.03); }
.stageMonth h3{ margin:0 0 10px; font-size:14px; color: rgba(255,255,255,.86); }
.stageGrid{ display:grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap:8px; }
.stageDow{ font-size:11px; color: rgba(255,255,255,.55); text-align:center; }
.stageDay{ border-radius:12px; padding:8px; min-height:74px; border:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.10); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.stageDay .d{ font-size:12px; color: rgba(255,255,255,.8); display:flex; justify-content:space-between; }
.stageDay.selected{ border-color: rgba(80,255,160,.42); box-shadow: 0 0 0 1px rgba(80,255,160,.18), 0 10px 24px rgba(0,0,0,.25); transform: translateY(-1px); }
.stageDay.eventDay.dense-light{ background: linear-gradient(180deg, rgba(0,229,255,.06), rgba(0,0,0,.14)); }
.stageDay.eventDay.dense-medium{ background: linear-gradient(180deg, rgba(0,229,255,.10), rgba(0,200,83,.08)); }
.stageDay.eventDay.dense-heavy{ background: linear-gradient(180deg, rgba(0,229,255,.16), rgba(0,200,83,.12)); }
.stageSlots{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.slotDot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
  display:inline-block;
  padding:0;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}
.slotDot:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.35); }
.slotDot.booked{ background: rgba(0,229,255,.75); border-color: rgba(0,229,255,.9); box-shadow: 0 0 10px rgba(0,229,255,.35); }
.slotDot.booked:hover{ filter: brightness(1.05); }
.slotMeter{ height:6px; border-radius:999px; background: rgba(255,255,255,.08); margin-top:6px; overflow:hidden; }
.slotMeter > div{ height:100%; background: linear-gradient(90deg, rgba(0,229,255,.85), rgba(0,200,83,.85)); width:0%; }
.treeFilters{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

.eventsOpsGrid, .eventsMainGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:14px; }
.eventsMainGrid{ grid-template-columns: minmax(0,1.1fr) minmax(340px,.9fr); align-items:start; }
@media (max-width: 1080px){ .eventsOpsGrid, .eventsMainGrid{ grid-template-columns: 1fr; } }
.eventsPanelHead, .eventsTableHead, .eventsDayHeader{ display:flex; justify-content:space-between; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.eventsTableControls{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.eventsTableControls input, .eventsTableControls select{ min-height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.18); color:var(--text); padding:8px 10px; }
.eventsTableControls input{ min-width:280px; }
.eventMiniCard, .eventDetailCard{ border:1px solid rgba(255,255,255,.10); border-radius:16px; background:rgba(255,255,255,.04); padding:14px; }
.eventMiniCard + .eventMiniCard{ margin-top:10px; }
.eventMiniTop, .eventDetailTop{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.eventMiniTitle{ font-weight:800; font-size:15px; }
.eventMiniMeta, .eventReasonRow, .eventDetailBadges, .eventDetailActions, .eventMiniActions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.eventStatusBadge, .eventThemeBadge, .eventReasonBadge{ display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 9px; font-size:11px; font-weight:800; border:1px solid rgba(255,255,255,.14); }
.eventThemeBadge{ background:rgba(255,255,255,.06); color:rgba(255,255,255,.92); }
.eventReasonBadge{ background:rgba(255,184,77,.12); border-color:rgba(255,184,77,.26); color:rgba(255,214,153,.95); }
.eventStatus-planned{ background:rgba(0,229,255,.12); border-color:rgba(0,229,255,.30); color:rgba(190,248,255,.95); }
.eventStatus-draft{ background:rgba(148,163,184,.14); border-color:rgba(148,163,184,.28); color:rgba(226,232,240,.95); }
.eventStatus-confirmed{ background:rgba(56,189,248,.14); border-color:rgba(56,189,248,.28); color:rgba(224,242,254,.95); }
.eventStatus-activated{ background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.28); color:rgba(220,252,231,.95); }
.eventStatus-completed{ background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.24); color:rgba(209,250,229,.95); }
.eventStatus-cancelled{ background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.24); color:rgba(254,226,226,.95); }
.eventDetailCard h2{ margin:0; font-size:20px; }
.eventDetailTime{ color:rgba(255,255,255,.72); margin-top:6px; }
.eventDetailMetaGrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
@media (max-width: 720px){ .eventDetailMetaGrid{ grid-template-columns:1fr; } }
.eventNotes{ margin-top:12px; padding:12px; border-radius:12px; background:rgba(0,0,0,.18); color:rgba(255,255,255,.82); }
.eventsPipeline{ display:flex; gap:8px; flex-wrap:wrap; margin:14px 0; }
.eventStagePill{ border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:var(--text); border-radius:14px; padding:10px 12px; display:flex; gap:8px; align-items:center; cursor:pointer; }
.eventStagePill strong{ font-size:16px; }
.eventsTable{ margin-top:12px; display:grid; gap:8px; }
.eventsTableRow{ display:grid; grid-template-columns: 130px 1.2fr .8fr .8fr 1fr 1fr 240px; gap:10px; align-items:center; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); border-radius:14px; padding:12px; }
.eventsTableRow.head{ font-size:12px; font-weight:800; color:rgba(255,255,255,.62); background:transparent; border:none; padding:0 12px 4px; }
.eventsTableActions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width: 1200px){ .eventsTableRow{ grid-template-columns: 110px 1fr .8fr .8fr 1fr 1fr 190px; } }
@media (max-width: 900px){ .eventsTableRow, .eventsTableRow.head{ grid-template-columns: 1fr; } .eventsTableActions{ justify-content:flex-start; } }

code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size:12px; color: rgba(255,255,255,.78)}

/* Donors: Sync button spinner (Lucky head) */
.syncSpinner{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: none;
  margin-right: 8px;
  background-image: url('./lucky-mark-42.png?v=20260207a');
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 14px rgba(80,255,160,.22);
}

#donorRegenerate.syncing .syncSpinner{ display: inline-block; animation: luckySpin 0.85s linear infinite; }

@keyframes luckySpin{
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---- Tree map tooling ---- */
.treeModeBar{ display:flex; gap:10px; flex-wrap:wrap; }
.tTab{ border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.22); color:var(--text); padding:8px 12px; border-radius:999px; cursor:pointer; }
.tTab.active{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); }
.treeToolView{ margin-top:10px; }
.treeAlignControls{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.treeMapGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:12px; }
@media (max-width: 980px){ .treeMapGrid{ grid-template-columns: 1fr; } }
.treeMapPane{ border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:12px; background:rgba(0,0,0,.18); }
.treeMapTitle{ font-weight:600; margin-bottom:8px; }
.treeMapStage{ position:relative; width:100%; height:min(520px, 65vh); overflow:hidden; border-radius:12px; background:rgba(0,0,0,.28); }
.treeMapTransform{ position:absolute; inset:0; transform-origin:50% 50%; z-index:1; }
.treeMapImg{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none; z-index:1; }
.treeMapCanvas{ position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
.treeOverlay{ pointer-events:none; opacity:.45; mix-blend-mode:normal; z-index:2; }

/* Tron-style map stage */
#treeTronStage{
  background:#05060A;
  border:1px solid rgba(57,255,20,0.18);
  box-shadow: 0 0 0 1px rgba(57,255,20,0.08), 0 0 30px rgba(57,255,20,0.06) inset;
}

.treeAnchorRow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.treeAnchor{ padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.18); cursor:pointer; }
.treeAnchor.active{ border-color:rgba(0,229,255,.65); box-shadow:0 0 0 2px rgba(0,229,255,.18) inset; }
.treeAnchor.done{ border-color:rgba(0,200,83,.65); }

/* -------------------------
   Reports: Engagement–Value matrix
   ------------------------- */
.matrixWrap{
  display:grid;
  grid-template-columns: 130px repeat(4, minmax(0, 1fr));
  gap:10px;
  align-items:stretch;
}
.matrixHead{
  font-size:12px;
  font-weight:900;
  color: rgba(255,255,255,0.72);
  padding: 0 4px;
}
.matrixRowLabel{
  font-size:12px;
  font-weight:900;
  color: rgba(255,255,255,0.72);
  padding: 10px 4px;
  align-self:center;
}
.matrixCell{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 10px 12px;
  text-align:left;
  color: rgba(255,255,255,0.92);
  cursor:pointer;
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}
.matrixCell:hover{
  transform: translateY(-1px);
  border-color: rgba(102,240,255,0.22);
  box-shadow: 0 0 0 1px rgba(102,240,255,0.10), 0 10px 30px rgba(0,0,0,0.35);
}
.matrixCell .k{ font-size:12px; font-weight:900; opacity: .9; }
.matrixCell .v{ font-size:22px; font-weight:950; margin-top:4px; }
.matrixCell .m{ font-size:12px; font-weight:800; margin-top:2px; opacity: .9; }

@keyframes pulseHalo {
  0% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.pulse-halo {
  transform-origin: center;
  animation: pulseHalo 1.5s infinite cubic-bezier(0.2, 0.8, 0.2, 1);
}

.marker-collision::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 10px 4px rgba(239, 68, 68, 0.8);
  border: 3px solid #ef4444;
  animation: pulseHaloCSS 1.5s infinite cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
@keyframes pulseHaloCSS {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}