/* ═══════════════════════════════════════════════════════════════════
   ZN Agent Network — v8 CSS
   Performance: transform-only node layout, will-change, contain
   Visual: SVG spokes, rank borders, hover glow, ghost ring
   ═══════════════════════════════════════════════════════════════════ */


/**
 * ZN Agent Network — Design Tokens
 * Depends on: zn-design-tokens.css (loaded first)
 * Module-scoped tokens resolve to shared --zn-* vars.
 */
.zn-network-wrap {
  --color-bg:            var(--zn-bg-subtle,          #F9FAFB);
  --color-surface:       var(--zn-bg,                 #FFFFFF);
  --color-border:        var(--zn-border,             #E1E3E5);
  --color-text:          var(--zn-text,               #374151);
  --color-muted:         var(--zn-text-muted,         #6B7280);
  --color-primary:       var(--zn-agent-accent,       #4F46E5);
  --color-primary-lt:    var(--zn-agent-accent-light, #A5B4FC);
  --color-success:       var(--zn-success,            #22C55E);
  --color-warning:       var(--zn-warning,            #F59E0B);
  --color-error:         var(--zn-error,              #EF4444);
  --profile-node-size:   72px;
  --minimized-node-size: 40px;
  --transition-speed:    var(--zn-transition-slow,    0.55s);
  --bounce-bezier:       var(--zn-transition-bounce,  cubic-bezier(0.34, 1.56, 0.64, 1));
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Main panel — aggressive WordPress/BuddyBoss override ─────────── */
.zn-network-wrap,
div.zn-network-wrap,
#zn-agent-network-viz .zn-network-wrap,
.zn-network-wrap.zn-network-wrap {
  position:         relative !important;
  background-color: #FFFFFF !important;
  background-image:
    linear-gradient(to right,  rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px) !important;
  background-size:  20px 20px !important;
  border:           1px solid #E1E3E5 !important;
  border-radius:    16px !important;
  box-shadow:       0 8px 24px rgba(0,0,0,0.07) !important;
  padding:          18px 14px !important;
  width:            100% !important;
  box-sizing:       border-box !important;
  overflow:         visible !important;
  color:            #374151 !important;
  /* contain:layout prevents the widget from forcing full-page reflow */
  contain:          layout style;
}
.zn-network-wrap * { box-sizing: border-box; }
/* Global button reset — prevents BuddyBoss from styling internal buttons.
   Only resets visual properties; layout is handled per-component. */
.zn-network-wrap button,
div.zn-network-wrap button {
  background: transparent !important; background-color: transparent !important;
  border: none !important; box-shadow: none !important;
  font-family: inherit !important; color: inherit !important;
  text-transform: none !important; letter-spacing: normal !important;
  -webkit-appearance: none !important; appearance: none !important;
  cursor: pointer !important;
}
/* Specific button types re-apply their intended styles below */

/* ── Controls bar ────────────────────────────────────────────────── */
.zn-ctrl-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 14px;
}
.zn-ctrl-left {
  display: flex; align-items: center; gap: 7px;
  flex: 1 1 0; min-width: 0; overflow: visible;
}
.zn-ctrl-live {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22C55E; display: inline-block; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.22);
  animation: znpl 2.4s ease-in-out infinite;
}
@keyframes znpl {
  0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.22); }
  50%      { box-shadow: 0 0 0 6px rgba(34,197,94,0.06); }
}
/* Title area — plain at root, breadcrumb path when drilled */
#zn-bc,
.zn-network-wrap #zn-bc,
div.zn-network-wrap #zn-bc {
  display: flex !important; align-items: center !important; gap: 3px !important;
  overflow-x: auto !important; overflow-y: hidden !important;
  flex: 1 1 0 !important; min-width: 0 !important; flex-wrap: nowrap !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  mask-image: linear-gradient(to right, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
}
#zn-bc::-webkit-scrollbar { display: none !important; }

/* .zn-ctrl-label-text no longer rendered at root */

/* ── Breadcrumb — using span[role=button] to bypass BuddyBoss entirely ── */
/* BuddyBoss !important button styles beat our !important overrides at runtime.
   Solution: render crumbs as <span role="button"> which BuddyBoss ignores.
   Must be inline-block (not inline) to work correctly as flex children. */
.zn-network-wrap .zn-crumb,
#zn-bc .zn-crumb {
  display: inline-block !important;
  font-size: 11px !important; font-weight: 400 !important; color: #9ca3af !important;
  background: none !important; background-color: transparent !important;
  border: none !important; border-radius: 0 !important;
  cursor: pointer !important;
  font-family: inherit !important; padding: 0 !important; margin: 0 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  text-transform: none !important; text-decoration: none !important;
  line-height: 1.4 !important;
  min-width: auto !important; min-height: auto !important;
  width: auto !important; height: auto !important;
  float: none !important;
  letter-spacing: normal !important;
  text-align: left !important;
  flex-shrink: 0 !important;
  outline: none !important;
  vertical-align: middle !important;
}
.zn-network-wrap .zn-crumb:hover,
#zn-bc .zn-crumb:hover { color: var(--color-primary) !important; }
#zn-bc .zn-crumb:focus-visible { outline: 2px solid var(--color-primary) !important; border-radius: 2px !important; }

/* Root crumb (first item) */
.zn-bc-root,
#zn-bc .zn-bc-root { }  /* inherits from .zn-crumb above */

.zn-bc-sep { color: #d1d5db !important; font-size: 11px !important; flex-shrink: 0 !important; padding: 0 1px !important; white-space: nowrap !important; }
.zn-bc-current {
  font-size: 11px !important; font-weight: 700 !important; color: var(--color-primary) !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 120px !important;
  flex-shrink: 0 !important;
}
.zn-ctrl-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* .zn-ctrl-tag removed — no longer rendered */
/* Back button — now inside ctrl-bar right */
.zn-btn-back,
.zn-network-wrap .zn-btn-back,
.zn-network-wrap button.zn-btn-back,
div.zn-network-wrap button.zn-btn-back {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  padding: 4px 10px !important;
  background: #FFFFFF !important; background-color: #FFFFFF !important;
  border: 1px solid #E1E3E5 !important;
  color: #6B7280 !important; font-size: 11px !important; font-weight: 600 !important;
  font-family: inherit !important; border-radius: 8px !important; cursor: pointer !important;
  transition: background 0.15s !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  text-decoration: none !important; white-space: nowrap !important;
  text-transform: none !important; letter-spacing: normal !important;
  min-width: auto !important; min-height: auto !important;
  width: auto !important; height: auto !important;
  -webkit-appearance: none !important; appearance: none !important;
  line-height: 1.4 !important; float: none !important;
}
.zn-network-wrap .zn-btn-back:hover,
.zn-network-wrap button.zn-btn-back:hover { background: #f3f4f6 !important; color: #374151 !important; }
.zn-network-wrap .zn-btn-back:disabled,
.zn-network-wrap button.zn-btn-back:disabled { opacity: 0.35 !important; cursor: not-allowed !important; pointer-events: none !important; }

/* ── Live stats — 2×2 symmetric pill grid ───────────────────────── */
/*
 * Layout: 2 columns × 2 rows (4 pills), Earned spans full width below.
 * Each pill: [icon] [bold value] [small label] — flex row, left-aligned.
 * Maximum specificity to beat BuddyBoss/theme overrides.
 */
.zn-network-wrap #zn-live-stats,
.zn-network-wrap .zn-live-stats,
div.zn-network-wrap div.zn-live-stats,
#zn-agent-network-viz .zn-network-wrap .zn-live-stats {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-auto-rows: auto !important;
  gap: 8px !important;
  margin-bottom: 28px !important;
  position: relative !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
}
/* Depth chip */
.zn-network-wrap .zn-live-stats.is-deep::after {
  content: attr(data-depth);
  grid-column: 1 / -1;
  display: block;
  font-size: 9px; font-weight: 600; color: var(--color-primary);
  text-align: center; letter-spacing: 0.04em;
  padding: 0 0 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zn-network-wrap .zn-live-stats.is-deep { margin-bottom: 18px !important; }

/* Individual pill — max specificity */
.zn-network-wrap .zn-live-stats .zn-ls-pill,
div.zn-network-wrap div.zn-live-stats div.zn-ls-pill {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 7px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 50px !important;
  padding: 7px 11px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  width: auto !important;
  float: none !important;
}

/* Icon */
.zn-network-wrap .zn-live-stats .zn-ls-icon {
  font-size: 15px !important; flex-shrink: 0 !important; line-height: 1 !important;
}

/* Value + label wrapper */
.zn-network-wrap .zn-live-stats .zn-ls-text {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 4px !important;
  min-width: 0 !important;
}

/* Value */
.zn-network-wrap .zn-live-stats .zn-ls-val {
  font-size: 13px !important; font-weight: 800 !important;
  color: #111827 !important; line-height: 1 !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap !important; transition: color 0.3s ease;
  flex-shrink: 0 !important;
}

/* Label */
.zn-network-wrap .zn-live-stats .zn-ls-lbl {
  font-size: 10px !important; font-weight: 600 !important;
  color: #6b7280 !important; white-space: nowrap !important;
  overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important;
}

/* Legacy */
.zn-ls-div { display: none !important; }
.zn-ls-item { display: none !important; }

/* ── History bar ─────────────────────────────────────────────────── */
.zn-history-bar {
  background: rgba(255,255,255,0.5); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border-radius: 14px; margin-bottom: 0; display: flex; gap: 6px;
  align-items: center; min-height: 0; max-height: 0; overflow: hidden;
  padding: 0 10px;
  transition: max-height 0.3s ease, padding 0.3s ease, margin-bottom 0.3s ease;
}
.zn-history-bar.has-history {
  max-height: 84px; overflow-x: auto; overflow-y: hidden;
  padding: 6px 10px; margin-bottom: 8px; scrollbar-width: none;
}
.zn-history-bar::-webkit-scrollbar { display: none; }
.zn-mini-node {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  cursor: pointer; padding: 5px 6px; border-radius: 10px;
  background: rgba(255,255,255,0.7); box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  transition: background 0.2s, transform 0.2s; flex-shrink: 0;
}
.zn-mini-node:hover { background: rgba(0,0,0,0.07); transform: translateY(-2px); }
.zn-mini-level { font-size: 9px; color: #6b7280; white-space: nowrap; }
.zn-mini-img-wrap {
  width: var(--minimized-node-size); height: var(--minimized-node-size);
  border-radius: 50%; overflow: hidden; background: #e5e7eb;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.zn-mini-img  { width: 100%; height: 100%; object-fit: cover; }
.zn-mini-init { font-size: 13px; font-weight: 700; color: #6B7280; }
.zn-mini-name { font-size: 9px; font-weight: 600; color: #374151; max-width: 48px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Circle area ─────────────────────────────────────────────────── */
.zn-circle-area {
  position: relative; margin: 0 auto;
  background-color: #fff !important;
  background-image: none !important;
  touch-action: none;       /* tells browser: we own gestures here */
  overflow: visible !important;
  box-sizing: border-box;
  /* contain:strict would be ideal but breaks overflow:visible for card pop-ups */
}

/* ── Circle container ────────────────────────────────────────────── */
.zn-circle-container {
  position: relative; background: transparent !important;
  background-image: none !important;
}

/* ── Ghost outer ring (depth hint) ──────────────────────────────── */
.zn-ghost-ring {
  position: absolute; border-radius: 50%;
  border: 1px dashed rgba(79,70,229,0.13);
  pointer-events: none; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  transition: opacity 0.6s ease;
}

/* ── Dashed orbital guide ────────────────────────────────────────── */
.zn-dashed-guide {
  position: absolute; border-radius: 50%;
  border: 1.5px dashed rgba(100,100,200,0.28);
  pointer-events: none; left: 50%; top: 50%;
  transform: translate(-50%,-50%); z-index: 1;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ── SVG spokes ──────────────────────────────────────────────────── */
.zn-svg-spokes {
  position: absolute; top: 0; left: 0; pointer-events: none;
  overflow: visible; z-index: 1;
}
.zn-spoke {
  transition: stroke-dashoffset 0.55s ease;
}

/* ── Profile ring ────────────────────────────────────────────────── */
.zn-profile-ring {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: transparent !important; pointer-events: none !important;
}

/* ── Profile node ────────────────────────────────────────────────── */
/*
 * IMPORTANT: left:50%!important; top:50%!important; are fixed anchors.
 * All positioning is via transform:translate(X,Y) set by JS.
 * This eliminates layout reflow during drag (transform is compositor-only).
 */
.zn-profile-node {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  border-radius: 50%;
  overflow: visible !important;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(79,70,229,0.08);
  will-change: transform;
  /* Smooth pop-in and drag */
  transition:
    transform var(--transition-speed) var(--bounce-bezier),
    opacity   var(--transition-speed) ease,
    filter    0.18s ease;
  z-index: 2;
}
/* Hover: scale up + rank glow */
.zn-profile-node:hover {
  filter: drop-shadow(0 0 8px rgba(79,70,229,0.5));
  z-index: 6;
}
/* Collapsed: spiral to center */
.zn-circle-container.collapsed .zn-profile-node {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(0) !important;
  pointer-events: none !important;
}
.zn-circle-container.collapsed .zn-dashed-guide {
  opacity: 0 !important;
  transform: translate(-50%,-50%) scale(0.5) !important;
}
.zn-circle-container.collapsed .zn-ghost-ring { opacity: 0 !important; }
.zn-circle-container.collapsed .zn-spoke { stroke-dashoffset: 300 !important; }

/* ── Node inner elements ─────────────────────────────────────────── */
.zn-node-img-wrap {
  border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #d1d5db; flex-shrink: 0; position: relative;
  pointer-events: none;
  /* rank border applied inline by JS */
}
.zn-node-img  { width: 100%; height: 100%; object-fit: cover; display: block; }
.zn-node-init { font-weight: 700; color: #6B7280; text-align: center; }
.zn-node-name {
  pointer-events: none !important; position: absolute;
  text-align: center; white-space: nowrap;
  color: #374151 !important; font-weight: 600;
}
.zn-node-irc  {
  pointer-events: none !important; position: absolute;
  font-size: 8px; color: #6b7280 !important; white-space: nowrap;
}
.zn-level-badge {
  display: none !important; /* removed from per-node — shown once on the guide ring */
}
/* ── Ring label — single "Circle 1" on the orbital guide ────────── */
.zn-ring-label {
  pointer-events: none;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #818cf8;
  background: rgba(255,255,255,0.90);
  border-radius: 4px;
  padding: 1px 7px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.zn-status-point {
  position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e; border: 1.5px solid #fff; flex-shrink: 0;
}
.zn-status-point.suspended { background: #ef4444; }
.zn-status-point.inactive  { background: #f59e0b; }
/* ── Network depth label — below avatar, only when agent has sub-agents ── */
.zn-node-sub-lbl {
  display: block;
  font-size: 8px; font-weight: 700;
  color: var(--color-primary);
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 20px;
  padding: 1px 5px;
  margin-top: 2px;
  white-space: nowrap;
  text-align: center;
  letter-spacing: 0.02em;
  line-height: 1.4;
  pointer-events: none;
}

/* ── Info button ─────────────────────────────────────────────────── */
.zn-node-info-btn {
  border-radius: 50%; font-family: inherit;
  transition: transform 0.15s ease, background 0.15s ease;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.zn-node-info-btn.has-sub {
  /* Gold ring when showing sub-count — signals "drill in" */
  background: rgba(212,168,67,0.92) !important;
  border-color: #fff !important;
}
.zn-ib-count {
  font-size: 9px; font-weight: 800; line-height: 1;
  color: #fff; letter-spacing: -0.02em;
}
.zn-node-info-btn:hover { transform: scale(1.18) !important; }

/* ── Merged Earned + RAR pill ────────────────────────────────────── */
.zn-ls-earn-rar {
  grid-column: 1 / -1 !important;
  justify-content: flex-start !important;
  gap: 6px !important;
}
.zn-ls-earn-left { margin-right: 2px; }
.zn-ls-earn-divider {
  color: #d1d5db; font-size: 16px; font-weight: 300;
  align-self: center; flex-shrink: 0; padding: 0 2px;
}

/* ── Center circle ───────────────────────────────────────────────── */
.zn-circle-center {
  pointer-events: auto !important; touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(79,70,229,0.08);
  will-change: transform;
  transition: box-shadow 0.2s ease;
}
.zn-circle-center.can-collapse  { cursor: pointer !important; }
.zn-circle-center.can-collapse:hover { box-shadow: 0 4px 20px rgba(79,70,229,0.22) !important; }
.zn-circle-face   { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10%; text-align: center; }
.zn-circle-back   { background: linear-gradient(135deg,var(--color-primary),#7c3aed); opacity: 0 !important; }
.flip-reward .zn-circle-back  { opacity: 1 !important; }
.flip-reward .zn-circle-front { opacity: 0 !important; }

/* Center content */










.zn-center-tap-hint { font-size: 7px; color: #9ca3af !important; letter-spacing: 0.04em; opacity: 0.7; transition: opacity 0.2s; }
.zn-circle-center.can-collapse:hover .zn-center-tap-hint { opacity: 1; color: var(--color-primary) !important; }



/* ── Network Insight Panel (replaces legend) ─────────────────────── */
.zn-legend-bar {
  margin-top: 10px;
}
.zn-insight-panel {
  background: linear-gradient(135deg, #f8faff, #f0f4ff);
  border: 1px solid #e0e7ff;
  border-radius: 14px;
  padding: 12px 14px 10px;
  display: flex; flex-direction: column; gap: 9px;
}
/* Stats row */
.zn-ins-row {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between;
}
.zn-ins-stat {
  display: flex; flex-direction: column; align-items: center;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 5px 10px; flex: 1 1 0; min-width: 52px;
}
.zn-ins-val {
  font-size: 13px; font-weight: 800; line-height: 1.2;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.zn-ins-lbl {
  font-size: 9px; font-weight: 600; color: #9ca3af;
  text-transform: uppercase; letter-spacing: 0.04em; margin-top: 1px; white-space: nowrap;
}
/* Health bar row */
.zn-ins-health {
  display: flex; align-items: center; gap: 7px;
}
.zn-ins-health-lbl {
  font-size: 9px; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; flex-shrink: 0;
}
.zn-ins-bar-wrap {
  flex: 1; height: 5px; background: #e5e7eb; border-radius: 99px; overflow: hidden;
}
.zn-ins-bar-fill {
  height: 100%; border-radius: 99px;
  transition: width 0.7s ease;
}
.zn-ins-health-pct {
  font-size: 10px; font-weight: 700; color: #374151; flex-shrink: 0;
}
/* Tip row */
.zn-ins-tip {
  display: flex; align-items: flex-start; gap: 7px;
  background: rgba(255,255,255,0.7); border-radius: 9px;
  padding: 7px 9px; font-size: 10px; color: #374151; line-height: 1.5;
  border: 1px solid rgba(99,102,241,0.12);
}
.zn-ins-tip-icon { font-size: 13px; flex-shrink: 0; margin-top: 0px; }

/* ── Profile card ────────────────────────────────────────────────── */
#zn-profile-card {
  position: absolute; z-index: 9995; width: 260px;
  background: #FFFFFF !important; border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid #e5e7eb;
  opacity: 0; transform: scale(0.95) translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none; overflow: hidden;
}
#zn-profile-card.visible {
  opacity: 1; transform: scale(1) translateY(0);
  pointer-events: auto;
}
.zn-pc-cover {
  position: relative; height: 70px; overflow: hidden;
  border-radius: 16px 16px 0 0;
}
.zn-pc-cover-bg  { position: absolute; inset: 0; background-size: cover; background-position: center; }
.zn-pc-close {
  position: absolute; top: 7px; right: 7px; width: 22px; height: 22px;
  background: rgba(0,0,0,0.35) !important; color: #fff !important; border: none !important; border-radius: 50% !important;
  cursor: pointer; font-size: 11px; line-height: 1;
  display: flex !important; align-items: center; justify-content: center;
  transition: background 0.15s; z-index: 2;
}
.zn-pc-close:hover { background: rgba(0,0,0,0.55) !important; }
.zn-pc-av-wrap {
  position: absolute; bottom: -20px; left: 14px; width: 44px; height: 44px; z-index: 2;
}
.zn-pc-av {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.14); display: block;
}
.zn-pc-av-init {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: rgba(0,0,0,0.45);
  border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.14);
}
.zn-pc-status {
  position: absolute; bottom: 3px; right: 3px; width: 12px; height: 12px;
  border-radius: 50%; border: 2px solid #fff;
}
.zn-pc-body  { padding: 28px 14px 14px; background: #FFFFFF !important; }
.zn-pc-rank-pill {
  float: right; display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 20px; font-size: 9px; font-weight: 700;
  margin-top: -16px; white-space: nowrap;
}
.zn-pc-name   { display: block; font-size: 15px; font-weight: 700; color: #374151 !important; margin-bottom: 1px; }
.zn-pc-handle { display: block; font-size: 11px; color: #9ca3af !important; margin-bottom: 8px; }
.zn-pc-bio    { font-size: 11px; color: #6B7280 !important; line-height: 1.5; margin-bottom: 8px; font-style: italic; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zn-pc-bio.empty { color: #d1d5db !important; font-style: normal; }
.zn-pc-stats  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; margin-bottom: 10px; }
.zn-pc-stat   { background: #f9fafb; border: 1px solid #f1f5f9; border-radius: 9px; padding: 5px 4px; text-align: center; }
.zn-pc-sv     { display: block; font-size: 12px; font-weight: 700; color: #374151 !important; line-height: 1.1; font-family: monospace; }
.zn-pc-sl     { display: block; font-size: 9px; color: #9ca3af !important; margin-top: 2px; }
.zn-pc-irc    { display: flex; align-items: center; gap: 6px; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 8px; padding: 5px 9px; font-size: 10px; color: var(--color-primary) !important; font-weight: 600; margin-bottom: 10px; }
.zn-pc-actions { display: flex; flex-direction: column; gap: 6px; }
.zn-pc-btn {
  display: flex !important; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 14px !important; border-radius: 10px !important;
  font-size: 12px !important; font-weight: 700; font-family: inherit;
  cursor: pointer; text-decoration: none !important; border: none !important;
  transition: all 0.15s; width: 100%; box-sizing: border-box;
}
.zn-pc-btn-enter {
  background: linear-gradient(135deg,var(--color-primary),#7c3aed) !important;
  color: #fff !important; box-shadow: 0 2px 10px rgba(79,70,229,0.35);
  font-size: 13px !important; padding: 10px 14px !important;
}
.zn-pc-btn-enter:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(79,70,229,0.4); }
.zn-pc-btn-connect { background: #f0fdf4 !important; color: #166534 !important; border: 1px solid #bbf7d0 !important; }
.zn-pc-btn-connect:hover { background: #dcfce7 !important; }
.zn-pc-btn-connect.is-pending   { background: #fffbeb !important; color: #92400e !important; border-color: #fcd34d !important; cursor: default; }
.zn-pc-btn-connect.is-connected { background: #f0fdf4 !important; color: #166534 !important; border-color: #86efac !important; cursor: default; }
.zn-pc-btn-row    { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.zn-pc-btn-msg    { background: var(--color-primary) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(79,70,229,0.28); }
.zn-pc-btn-msg:hover { opacity: 0.9; }
.zn-pc-btn-profile { background: #FFFFFF !important; color: #6B7280 !important; border: 1px solid #E1E3E5 !important; }
.zn-pc-btn-profile:hover { background: #f3f4f6 !important; color: #374151 !important; }
.zn-pc-joined { text-align: center; font-size: 9px; color: #9ca3af !important; margin-top: 10px; display: block; }

/* ── Backdrop ────────────────────────────────────────────────────── */
#zn-card-backdrop {
  position: absolute; inset: 0; z-index: 9990;
  display: none; background: transparent;
}
#zn-card-backdrop.active { display: block; }

/* ── Inviter pill ────────────────────────────────────────────────── */
.zn-sponsor-pill,
.zn-network-wrap .zn-sponsor-pill,
div.zn-network-wrap .zn-sponsor-pill {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  background: rgba(255,255,255,0.95) !important; background-color: rgba(255,255,255,0.95) !important;
  border: 1px solid #bae6fd !important;
  border-radius: 24px !important; padding: 5px 12px 5px 6px !important; font-size: 11px !important;
  font-weight: 600 !important; color: #0284c7 !important; cursor: pointer !important;
  transition: all 0.15s !important; box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
  white-space: nowrap !important; margin: 0 auto 6px !important; text-decoration: none !important;
  text-transform: none !important; letter-spacing: normal !important;
  min-width: auto !important; min-height: auto !important;
  width: auto !important; height: auto !important;
  line-height: 1.4 !important;
}
.zn-sponsor-pill:hover { background: #f0f9ff !important; }
.zn-sponsor-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* ── Center tap hint ─────────────────────────────────────────────── */
.zn-center-tap-hint {
  font-size: 8px; color: #9ca3af; letter-spacing: 0.04em;
  margin-top: 2px; text-transform: lowercase; opacity: 0.8; transition: opacity 0.2s;
}
.zn-circle-center.can-collapse:hover .zn-center-tap-hint { opacity: 1; color: var(--color-primary); }

/* ── Empty circle prompt ─────────────────────────────────────────── */
.zn-empty-connect-prompt {
  background: linear-gradient(135deg, #f0f9ff, #eef2ff);
  border: 1px solid #bae6fd; border-radius: 16px; padding: 20px 16px;
  margin-top: 12px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  animation: znFadeIn 0.35s ease;
}
@keyframes znFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.zn-ec-icon   { font-size: 32px; }
.zn-ec-title  { font-size: 14px; font-weight: 700; color: #374151 !important; }
.zn-ec-desc   { font-size: 12px; color: #6B7280 !important; line-height: 1.5; margin: 0; max-width: 280px; }
.zn-ec-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 260px; }
.zn-ec-tip    { font-size: 10px; color: var(--color-primary); background: #eef2ff; border-radius: 8px; padding: 6px 10px; line-height: 1.5; }
.zn-empty-action {
  display: flex !important; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px !important; border-radius: 10px !important;
  font-size: 12px !important; font-weight: 700; font-family: inherit;
  cursor: pointer; text-decoration: none !important; border: none !important;
  transition: all 0.15s; width: 100%; box-sizing: border-box;
}
.zn-empty-msg  { background: var(--color-primary) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(79,70,229,0.3); }
.zn-empty-msg:hover { opacity: 0.9; }
.zn-empty-prof { background: #fff !important; color: #6B7280 !important; border: 1px solid #E1E3E5 !important; }
.zn-empty-prof:hover { background: #f3f4f6 !important; }
.zn-ec-actions .zn-pc-btn-connect { width: 100%; padding: 10px 16px; font-size: 12px; border-radius: 10px; }

/* ── Loader ──────────────────────────────────────────────────────── */
.zn-loader {
  position: absolute; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.85); backdrop-filter: blur(4px); border-radius: 16px;
}
.zn-spinner {
  width: 32px; height: 32px; border: 3px solid #e5e7eb;
  border-top-color: var(--color-primary); border-radius: 50%;
  animation: znspin 0.7s linear infinite;
}
@keyframes znspin { to { transform: rotate(360deg); } }

/* ── Empty state ─────────────────────────────────────────────────── */
.zn-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 40px 20px; color: #9ca3af; text-align: center; width: 100%;
}
.zn-empty-icon { font-size: 40px; opacity: 0.35; }
.zn-empty-state p { font-size: 13px; line-height: 1.5; }

/* ── Pointer-event hardening ─────────────────────────────────────── */
.zn-profile-ring   { pointer-events: none !important; }
.zn-profile-node   { pointer-events: auto !important; touch-action: manipulation; }
.zn-node-info-btn  { pointer-events: auto !important; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.zn-node-name, .zn-node-irc, .zn-level-badge { pointer-events: none !important; }
.zn-circle-center  { pointer-events: auto !important; touch-action: manipulation; }

/* ── Drag cursor states ──────────────────────────────────────────── */
.ring-draggable { cursor: grab; }
.ring-dragging  { cursor: grabbing !important; }
.ring-dragging .zn-profile-node { transition: none !important; }  /* no spring during drag */

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #zn-profile-card { width: 230px; }
  .zn-pc-stats     { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   CENTER CIRCLE — v9 redesign
   Avatar fills circle, RAR badge above, DRC label below
   ═══════════════════════════════════════════════════════════════════ */

/* ── Center circle avatar ────────────────────────────────────────── */
.zn-center-av-wrap {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #e5e7eb;
}
.zn-center-av-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.zn-center-av-init {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1rem, 4vmin, 1.8rem);
  font-weight: 800;
  border-radius: 50%;
}

/* ── Count badge (top-right of circle) ───────────────────────────── */
/* ── Rank pill (bottom inside circle) ───────────────────────────── */
.zn-center-rank-pill {
  /* sized + positioned by JS */
  position: absolute;
  white-space: nowrap;
  font-weight: 700;
  border-radius: 20px;
  pointer-events: none;
}

/* ── Tap hint ────────────────────────────────────────────────────── */
.zn-circle-center.can-collapse .zn-center-tap-hint {
  opacity: 0;
  transition: opacity 0.2s;
}
.zn-circle-center.can-collapse:hover .zn-center-tap-hint {
  opacity: 0.7;
}

/* ── Empty state nudge ───────────────────────────────────────────── */
.zn-center-empty-hint {
  position: absolute;
  bottom: 8%;
  left: 50%; transform: translateX(-50%);
  font-size: clamp(0.5rem, 1.4vmin, 0.62rem);
  color: #9ca3af;
  white-space: nowrap;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   RAR BADGE — above center circle (mirrors "Circle 1" on ring nodes)
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   DRC LABEL — below center circle (mirrors "IRC: 21%" on ring nodes)
   ═══════════════════════════════════════════════════════════════════ */
.zn-center-drc-label {
  /* positioned by JS */
  color: #6b7280 !important;
  font-size: 10px;
  text-align: center;
  white-space: nowrap;
  animation: znFadeIn 0.4s ease;
}
.zn-center-drc-label strong {
  color: #374151 !important;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════
   SPILLOVER VISUALIZATION
   ═══════════════════════════════════════════════════════════════════ */

/* Spillover badge on nodes */
.zn-spillover-badge {
  position: absolute;
  top: -2px; left: -2px;
  width: 18px; height: 18px;
  font-size: 10px; line-height: 18px;
  text-align: center;
  background: #eef2ff;
  border: 1.5px solid #6366f1;
  border-radius: 50%;
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(99,102,241,0.3);
}

/* Spillover node outer glow on hover */
.zn-profile-node.zn-spillover-node:hover {
  box-shadow: 0 0 0 3px rgba(99,102,241,0.18), 0 4px 16px rgba(0,0,0,0.12) !important;
}

/* Fill-rate ring pulse animation for full circles */
@keyframes znFillPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 0.08; transform: scale(1.06); }
}

/* Inviter pill — matrix parent indicator */
.zn-pill-sep {
  color: #bae6fd;
  margin: 0 2px;
}
.zn-pill-matrix {
  color: #6366f1 !important;
  font-size: 10px;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════
   MULTISITE ADDITIONS — Triangular IR unlock + Liberation Arc
   ═══════════════════════════════════════════════════════════════════ */

/* ── Triangular circle unlock pill ──────────────────────────────── */
/* Spans full width below the main stats grid */
.zn-ls-pill.zn-ls-triangle {
  grid-column: 1 / -1 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px !important;
  padding: 8px 11px 7px !important;
}
.zn-ls-triangle .zn-ls-tri-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.zn-ls-triangle .zn-ls-tri-icon { font-size: 12px; flex-shrink: 0; }
.zn-ls-triangle .zn-ls-tri-label {
  font-size: 10px !important; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.06em; flex: 1;
}
.zn-ls-triangle .zn-ls-tri-count {
  font-size: 12px !important; font-weight: 800; color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
/* The triangle strip: 10 small triangle SVGs */
.zn-tri-strip {
  display: flex;
  gap: 3px;
  align-items: center;
  width: 100%;
}
.zn-tri-unit {
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid #e5e7eb; /* default: locked */
  transition: border-bottom-color 0.4s ease;
  flex-shrink: 0;
}
.zn-tri-unit.unlocked { border-bottom-color: var(--color-primary); }
.zn-tri-unit.unlocked:nth-child(1)  { border-bottom-color: #818cf8; }
.zn-tri-unit.unlocked:nth-child(2)  { border-bottom-color: #6366f1; }
.zn-tri-unit.unlocked:nth-child(3)  { border-bottom-color: var(--color-primary); }
.zn-tri-unit.unlocked:nth-child(4)  { border-bottom-color: #3730a3; }
.zn-tri-unit.unlocked:nth-child(5)  { border-bottom-color: #22c55e; }
.zn-tri-unit.unlocked:nth-child(6)  { border-bottom-color: #16a34a; }
.zn-tri-unit.unlocked:nth-child(7)  { border-bottom-color: #15803d; }
.zn-tri-unit.unlocked:nth-child(8)  { border-bottom-color: #d4a843; }
.zn-tri-unit.unlocked:nth-child(9)  { border-bottom-color: #b45309; }
.zn-tri-unit.unlocked:nth-child(10) { border-bottom-color: #92400e; }
/* Ghost ring circle-2 badge */
.zn-ghost-c2-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  font-weight: 700;
  color: rgba(79,70,229,0.5);
  white-space: nowrap;
  pointer-events: none;
  background: rgba(255,255,255,0.88);
  border-radius: 20px;
  padding: 1px 6px;
  border: 1px dashed rgba(79,70,229,0.2);
}

/* ── PS chip in profile card ─────────────────────────────────────── */
.zn-pc-ps {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 10px;
  color: #5b21b6;
  font-weight: 600;
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   BUDDYBOSS INTEGRATION — Phase 2: Pill Tab Bar
   Scoped entirely to .zn-bb-context so standalone WooCommerce
   My Account pages are completely unaffected.
   ═══════════════════════════════════════════════════════════════════ */

/* ── BB CSS variable bridge ───────────────────────────────────────── */
.zn-bb-context {
    --zn-primary:        var(--bb-primary-color,    var(--bb-theme-color, #00B8D9));
    --zn-primary-dark:   var(--bb-secondary-color,  #007fa0);
    --zn-font:           var(--bb-font-family,       var(--bb-body-font, inherit));
    --zn-radius:         var(--bb-border-radius,     10px);
    --zn-border:         var(--bb-border-color,      #e2e8f0);
    --zn-card-bg:        var(--bb-card-background-color, #ffffff);
    --zn-text:           var(--bb-text-color,        #1e293b);
    --zn-muted:          var(--bb-muted-color,       #64748b);
    --zn-input-bg:       var(--bb-input-background-color, #ffffff);
    --zn-input-border:   var(--bb-input-border-color, #e2e8f0);
    font-family:         var(--zn-font);
}

/* ── #12: bridge viz token to BB primary ─────────────────────────── */
/* The network visualization uses --color-primary internally.
   When rendered inside BB, pull it from the BB theme token so the
   node borders, breadcrumb links, and circle-back glow all match. */
.zn-bb-context .zn-network-wrap {
    --color-primary:    var(--zn-primary);
    --color-primary-lt: var(--zn-primary, #A5B4FC);
}

/* ── Tab bar: scrollable pill row, no JS overflow needed ─────────── */
.zn-bb-context .zn-dash-tabs-wrap {
    overflow-x:                 auto;
    overflow-y:                 hidden;
    scrollbar-width:            none;         /* Firefox */
    -webkit-overflow-scrolling: touch;
    margin-bottom:              20px;
    /* Fade edges so truncated pills hint at scrollability */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-image:         linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.zn-bb-context .zn-dash-tabs-wrap::-webkit-scrollbar {
    display: none;                            /* Chrome / Safari */
}

/* ── Pill container: single horizontal row, never wraps ───────────── */
.zn-bb-context .zn-dash-tabs {
    display:    inline-flex;
    align-items: center;
    flex-wrap:  nowrap;
    gap:        6px;
    min-width:  100%;
    padding:    4px 2px;                      /* room for focus rings */
}

/* ── Individual pill tab ──────────────────────────────────────────── */
.zn-bb-context .zn-dash-tab {
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             5px !important;
    padding:         7px 16px !important;
    border:          1.5px solid var(--zn-border) !important;
    border-radius:   50px !important;
    background:      var(--zn-card-bg) !important;
    color:           var(--zn-muted) !important;
    font-size:       13px !important;
    font-weight:     600 !important;
    font-family:     var(--zn-font) !important;
    white-space:     nowrap !important;
    flex-shrink:     0 !important;
    cursor:          pointer !important;
    text-decoration: none !important;
    transition:      background 0.15s, border-color 0.15s, color 0.15s;
    margin:          0 !important;
    line-height:     1.2 !important;
    box-shadow:      none !important;
    /* Reset any BB grid/list styles that might interfere */
    width:           auto !important;
    height:          auto !important;
    min-height:      0 !important;
}
.zn-bb-context .zn-dash-tab:hover:not(.zn-tab-active) {
    border-color: var(--zn-primary) !important;
    color:        var(--zn-primary) !important;
    background:   var(--zn-card-bg) !important;
}
.zn-bb-context .zn-dash-tab.zn-tab-active {
    background:   var(--zn-primary) !important;
    border-color: var(--zn-primary) !important;
    color:        #ffffff !important;
}

/* ── Tab icon + label ─────────────────────────────────────────────── */
.zn-bb-context .zn-tab-icon {
    font-size:  14px;
    line-height: 1;
    flex-shrink: 0;
}
.zn-bb-context .zn-tab-label { line-height: 1.2; }
.zn-bb-context .zn-tab-ext   { font-size: 11px; opacity: 0.7; }

/* ── Mobile ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .zn-bb-context .zn-dash-tab {
        padding:  5px 12px !important;
        font-size: 12px !important;
        gap:       4px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   BUDDYBOSS INTEGRATION — Phase 3: Hero Card + Cards via BB Variables
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero card defaults (non-BB) ─────────────────────────────────── */
.zn-agent-hero {
    background:    linear-gradient(135deg, #1F4E79, #00B8D9);
    border-radius: 10px;
}

/* ── Hero card in BB: use theme primary color + theme radius ─────── */
.zn-bb-context .zn-agent-hero {
    background:    linear-gradient(135deg,
                       color-mix(in srgb, var(--zn-primary) 40%, #0a0a2e),
                       var(--zn-primary)
                   ) !important;
    border-radius: var(--zn-radius) !important;
}
/* Fallback for browsers without color-mix (Safari < 16.2, FF < 113) */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .zn-bb-context .zn-agent-hero {
        background: linear-gradient(135deg,
                        var(--zn-primary-dark, #1F4E79),
                        var(--zn-primary, #00B8D9)
                    ) !important;
    }
}

/* ── Stat cards (default + BB) ───────────────────────────────────── */
.zn-stat-card {
    background:    #ffffff;
    border:        1px solid #e0e0e0;
    border-radius: 6px;
}
.zn-stat-label {
    font-size: 12px;
    color:     #666;
}
.zn-bb-context .zn-stat-grid {
    /* Let BB control the grid width — no max-width constraint */
    width: 100%;
}
.zn-bb-context .zn-stat-card {
    background:    var(--zn-card-bg) !important;
    border-color:  var(--zn-border) !important;
    border-radius: var(--zn-radius) !important;
}
.zn-bb-context .zn-stat-label {
    color: var(--zn-muted) !important;
}
/* Legacy selector kept for any old markup in cache */
.zn-bb-context .zn-stat-card > div:last-child {
    color: var(--zn-muted) !important;
}

/* ── Participation Score widget (default + BB) ───────────────────── */
.zn-ps-widget {
    background:    #ffffff;
    border:        1px solid #e0e0e0;
    border-radius: 8px;
}
.zn-bb-context .zn-ps-widget {
    background:    var(--zn-card-bg) !important;
    border:        1px solid var(--zn-border) !important;
    border-radius: var(--zn-radius) !important;
}

/* ── Digital Job widget outer shell (default + BB) ───────────────── */
.zn-digital-job-widget {
    background:    #ffffff;
    border:        1px solid #e5e7eb;
    border-radius: 10px;
}
.zn-bb-context .zn-digital-job-widget {
    background:    var(--zn-card-bg) !important;
    border:        1px solid var(--zn-border) !important;
    border-radius: var(--zn-radius) !important;
}
/* Digital Job header — handled by .zn-djw-header class rule below */

/* ── Generic panel heading (h4 in tab panels) ────────────────────── */
.zn-bb-context .zn-dash-panel h4 {
    font-size:     16px;
    font-weight:   700;
    color:         var(--zn-text);
    font-family:   var(--zn-font);
    margin:        0 0 14px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--zn-border);
}

/* ── Pool & network info cards (#11 — material color tiles) ─────── */
/* Replace fixed Material green/orange/purple tile backgrounds with   */
/* BB card tokens so they fit any theme instead of clashing.          */
.zn-bb-context .zn-dash-panel [style*="background:#e8f5e9"],
.zn-bb-context .zn-dash-panel [style*="background:#fff3e0"],
.zn-bb-context .zn-dash-panel [style*="background:#f3e5f5"] {
    background: var(--zn-card-bg) !important;
    border:     1px solid var(--zn-border) !important;
}
/* Value numbers inside the tiles use hardcoded Material accent colors.
   Remap to theme primary / success / muted so dark BB themes don't
   get invisible dark-on-dark text. */
.zn-bb-context .zn-dash-panel [style*="color:#388E3C"] {
    color: var(--zn-primary) !important;
}
.zn-bb-context .zn-dash-panel [style*="color:#E65100"] {
    color: var(--zn-primary) !important;
}
.zn-bb-context .zn-dash-panel [style*="color:#7B1FA2"] {
    color: var(--zn-primary) !important;
}
/* Tile sub-labels (#555, #999) — lift to theme muted */
.zn-bb-context .zn-dash-panel [style*="background:#e8f5e9"] [style*="color:#555"],
.zn-bb-context .zn-dash-panel [style*="background:#fff3e0"] [style*="color:#555"],
.zn-bb-context .zn-dash-panel [style*="background:#f3e5f5"] [style*="color:#555"],
.zn-bb-context .zn-dash-panel [style*="background:#e8f5e9"] [style*="color:#999"],
.zn-bb-context .zn-dash-panel [style*="background:#fff3e0"] [style*="color:#999"],
.zn-bb-context .zn-dash-panel [style*="background:#f3e5f5"] [style*="color:#999"] {
    color: var(--zn-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   #17  My Network tab — cancel BB .bb-single-wrap inner padding
   BuddyBoss wraps bp_template_content in .bb-single-wrap which adds
   ~20 px of padding on all sides. Our wrapper div must pull back by
   the same amount so the dashboard content controls its own breathing
   room and panels don't appear double-indented.
   ═══════════════════════════════════════════════════════════════════ */
.bb-single-wrap    .zn-bb-tab-flush,
.bp-wrap           .zn-bb-tab-flush,
.bb-tab-panel      .zn-bb-tab-flush,
.bb-tab-panel-inner > .zn-bb-tab-flush {
    /* Cancel BB's own .bb-single-wrap side padding so we don't double-indent,
       but give back 16px on each side so content never touches screen edges. */
    margin:  -20px -20px 0;
    padding: 16px 16px 0;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════
   #15 / #16  Dashboard table cells — lift color & spacing into CSS
   Removes the need for inline color:#666 / padding:8px on every <td>.
   Inline styles still win for font-weight / text-align / font-size;
   only the repeated color and padding are overridden here.
   ═══════════════════════════════════════════════════════════════════ */
.zn-bb-context .zn-dash-panel table {
    width:           100%;
    border-collapse: collapse;
    font-size:       13px;
    max-width:       560px;
    font-family:     var(--zn-font);
}
.zn-bb-context .zn-dash-panel thead tr {
    background: var(--zn-input-bg, #f9fafb);
}
.zn-bb-context .zn-dash-panel th,
.zn-bb-context .zn-dash-panel td {
    padding:    8px 10px;
    color:      var(--zn-text);
    border-bottom: 1px solid var(--zn-border);
    vertical-align: middle;
}
.zn-bb-context .zn-dash-panel th {
    font-weight: 600;
    font-size:   12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color:       var(--zn-muted);
}
/* label column in key-value tables (.zn-kv first td) */
.zn-bb-context .zn-dash-panel tr td:first-child:not([colspan]) {
    color: var(--zn-muted);
}
/* muted date / secondary text cells still use their inline color;
   only strip the naked color:#666 and color:#888 overrides */
.zn-bb-context .zn-dash-panel td[style*="color:#666"],
.zn-bb-context .zn-dash-panel td[style*="color:#888"] {
    color: var(--zn-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   #10  Digital Job widget header — class-based primary-color gradient
   The inline style keeps non-BB default colors. .zn-djw-header
   selects the header div via a class so we don't rely on :first-child
   specificity games, and the BB override is applied cleanly.
   ═══════════════════════════════════════════════════════════════════ */
.zn-bb-context .zn-djw-header {
    background: linear-gradient(
                    135deg,
                    var(--zn-primary),
                    var(--zn-primary-dark)
                ) !important;
    border-radius: calc(var(--zn-radius) - 1px)
                   calc(var(--zn-radius) - 1px)
                   0 0 !important;
}
/* Fallback sentinel — fires only if .zn-djw-header class is absent */
.zn-bb-context .zn-digital-job-widget > div:first-child:not(.zn-djw-header) {
    background: linear-gradient(135deg,
                    var(--zn-primary-dark, #0f172a),
                    var(--zn-primary, #1e3a5f)
                ) !important;
}

/* Apply / Re-Apply buttons — use theme primary instead of hardcoded #0f172a */
.zn-bb-context .zn-dj-apply-btn {
    background: linear-gradient(135deg,
                    var(--zn-primary),
                    var(--zn-primary-dark)
                ) !important;
    color: #fff !important;
}

/* Stat number text inside DJ apply panel — lift #0f172a to theme text color */
.zn-bb-context .zn-digital-job-widget [style*="color:#0f172a"] {
    color: var(--zn-text) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   #14  Dark mode — .buddyboss-dark + [data-color-scheme="dark"]
   Covers all dashboard panels, tables, hero, stat cards, widgets,
   the network viz, and form inputs. No PHP changes — CSS only.
   Trigger: BuddyBoss adds .buddyboss-dark to <body> when dark mode
   is active. [data-color-scheme="dark"] catches the HTML attribute
   variant used by some child themes and the media query covers OS-
   level dark preference when BB has "Follow system" selected.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Dark token overrides ─────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .zn-bb-context { --zn-is-dark: 1; }
}
.buddyboss-dark          .zn-bb-context,
[data-color-scheme="dark"] .zn-bb-context {
    --zn-is-dark: 1;
}

/* Shared dark surface tokens — used by every rule below */
.buddyboss-dark          .zn-bb-context,
[data-color-scheme="dark"] .zn-bb-context,
@media (prefers-color-scheme: dark) {
    /* intentionally empty — tokens set per-selector below */
}

/* ── Dashboard wrapper ───────────────────────────────────────────── */
.buddyboss-dark           .zn-bb-context.zn-agent-area,
[data-color-scheme="dark"] .zn-bb-context.zn-agent-area,
@media (prefers-color-scheme: dark) {
    .zn-bb-context.zn-agent-area {
        background: var(--bb-body-background-color-dark, #0f172a);
        color:      var(--bb-text-color-dark, #e2e8f0);
    }
}

/* ── Tab pills ───────────────────────────────────────────────────── */
.buddyboss-dark           .zn-bb-context .zn-dash-tab,
[data-color-scheme="dark"] .zn-bb-context .zn-dash-tab {
    background: var(--bb-card-background-color-dark, #1e293b) !important;
    color:      var(--bb-text-color-dark, #cbd5e1) !important;
    border-color: var(--bb-border-color-dark, #334155) !important;
}
.buddyboss-dark           .zn-bb-context .zn-dash-tab.zn-tab-active,
[data-color-scheme="dark"] .zn-bb-context .zn-dash-tab.zn-tab-active {
    background:   var(--zn-primary) !important;
    color:        #fff !important;
    border-color: var(--zn-primary) !important;
}
@media (prefers-color-scheme: dark) {
    .zn-bb-context .zn-dash-tab {
        background:   var(--bb-card-background-color-dark, #1e293b) !important;
        color:        var(--bb-text-color-dark, #cbd5e1) !important;
        border-color: var(--bb-border-color-dark, #334155) !important;
    }
    .zn-bb-context .zn-dash-tab.zn-tab-active {
        background:   var(--zn-primary) !important;
        color:        #fff !important;
    }
}

/* ── Panel body ──────────────────────────────────────────────────── */
.buddyboss-dark           .zn-bb-context .zn-dash-panel,
[data-color-scheme="dark"] .zn-bb-context .zn-dash-panel {
    color: var(--bb-text-color-dark, #e2e8f0);
}
@media (prefers-color-scheme: dark) {
    .zn-bb-context .zn-dash-panel { color: var(--bb-text-color-dark, #e2e8f0); }
}

/* ── Panel h4 headings ───────────────────────────────────────────── */
.buddyboss-dark           .zn-bb-context .zn-dash-panel h4,
[data-color-scheme="dark"] .zn-bb-context .zn-dash-panel h4 {
    color:        var(--bb-text-color-dark, #f1f5f9);
    border-color: var(--bb-border-color-dark, #334155);
}
@media (prefers-color-scheme: dark) {
    .zn-bb-context .zn-dash-panel h4 {
        color:        var(--bb-text-color-dark, #f1f5f9);
        border-color: var(--bb-border-color-dark, #334155);
    }
}

/* ── Tables ──────────────────────────────────────────────────────── */
.buddyboss-dark           .zn-bb-context .zn-dash-panel th,
.buddyboss-dark           .zn-bb-context .zn-dash-panel td,
[data-color-scheme="dark"] .zn-bb-context .zn-dash-panel th,
[data-color-scheme="dark"] .zn-bb-context .zn-dash-panel td {
    color:        var(--bb-text-color-dark, #e2e8f0);
    border-color: var(--bb-border-color-dark, #334155);
}
.buddyboss-dark           .zn-bb-context .zn-dash-panel thead tr,
[data-color-scheme="dark"] .zn-bb-context .zn-dash-panel thead tr {
    background: rgba(255,255,255,0.05);
}
.buddyboss-dark           .zn-bb-context .zn-dash-panel tr td:first-child:not([colspan]),
.buddyboss-dark           .zn-bb-context .zn-dash-panel td[style*="color:#666"],
.buddyboss-dark           .zn-bb-context .zn-dash-panel td[style*="color:#888"],
[data-color-scheme="dark"] .zn-bb-context .zn-dash-panel tr td:first-child:not([colspan]),
[data-color-scheme="dark"] .zn-bb-context .zn-dash-panel td[style*="color:#666"],
[data-color-scheme="dark"] .zn-bb-context .zn-dash-panel td[style*="color:#888"] {
    color: var(--bb-muted-color-dark, #94a3b8) !important;
}
@media (prefers-color-scheme: dark) {
    .zn-bb-context .zn-dash-panel th,
    .zn-bb-context .zn-dash-panel td           { color: var(--bb-text-color-dark, #e2e8f0); border-color: var(--bb-border-color-dark, #334155); }
    .zn-bb-context .zn-dash-panel thead tr     { background: rgba(255,255,255,0.05); }
    .zn-bb-context .zn-dash-panel tr td:first-child:not([colspan]),
    .zn-bb-context .zn-dash-panel td[style*="color:#666"],
    .zn-bb-context .zn-dash-panel td[style*="color:#888"] { color: var(--bb-muted-color-dark, #94a3b8) !important; }
}

/* ── Stat cards ──────────────────────────────────────────────────── */
.buddyboss-dark           .zn-bb-context .zn-stat-card,
[data-color-scheme="dark"] .zn-bb-context .zn-stat-card {
    background:   var(--bb-card-background-color-dark, #1e293b) !important;
    border-color: var(--bb-border-color-dark, #334155) !important;
}
.buddyboss-dark           .zn-bb-context .zn-stat-label,
[data-color-scheme="dark"] .zn-bb-context .zn-stat-label {
    color: var(--bb-muted-color-dark, #94a3b8) !important;
}
@media (prefers-color-scheme: dark) {
    .zn-bb-context .zn-stat-card  { background: var(--bb-card-background-color-dark, #1e293b) !important; border-color: var(--bb-border-color-dark, #334155) !important; }
    .zn-bb-context .zn-stat-label { color: var(--bb-muted-color-dark, #94a3b8) !important; }
}

/* ── Participation Score widget ──────────────────────────────────── */
.buddyboss-dark           .zn-bb-context .zn-ps-widget,
[data-color-scheme="dark"] .zn-bb-context .zn-ps-widget {
    background:   var(--bb-card-background-color-dark, #1e293b) !important;
    border-color: var(--bb-border-color-dark, #334155) !important;
    color:        var(--bb-text-color-dark, #e2e8f0) !important;
}
@media (prefers-color-scheme: dark) {
    .zn-bb-context .zn-ps-widget { background: var(--bb-card-background-color-dark, #1e293b) !important; border-color: var(--bb-border-color-dark, #334155) !important; color: var(--bb-text-color-dark, #e2e8f0) !important; }
}

/* ── Digital Job widget ──────────────────────────────────────────── */
.buddyboss-dark           .zn-bb-context .zn-digital-job-widget,
[data-color-scheme="dark"] .zn-bb-context .zn-digital-job-widget {
    background:   var(--bb-card-background-color-dark, #1e293b) !important;
    border-color: var(--bb-border-color-dark, #334155) !important;
}
@media (prefers-color-scheme: dark) {
    .zn-bb-context .zn-digital-job-widget { background: var(--bb-card-background-color-dark, #1e293b) !important; border-color: var(--bb-border-color-dark, #334155) !important; }
}

/* ── Pool tiles (in dark: card-bg + border, no colored BGs) ─────── */
.buddyboss-dark           .zn-bb-context .zn-dash-panel [style*="background:#e8f5e9"],
.buddyboss-dark           .zn-bb-context .zn-dash-panel [style*="background:#fff3e0"],
.buddyboss-dark           .zn-bb-context .zn-dash-panel [style*="background:#f3e5f5"],
[data-color-scheme="dark"] .zn-bb-context .zn-dash-panel [style*="background:#e8f5e9"],
[data-color-scheme="dark"] .zn-bb-context .zn-dash-panel [style*="background:#fff3e0"],
[data-color-scheme="dark"] .zn-bb-context .zn-dash-panel [style*="background:#f3e5f5"] {
    background: var(--bb-card-background-color-dark, #1e293b) !important;
    border:     1px solid var(--bb-border-color-dark, #334155) !important;
}
/* Tile value text — already using var(--zn-primary), which adjusts with theme */
/* Tile sub-labels */
.buddyboss-dark           .zn-bb-context .zn-dash-panel [style*="color:#555"],
.buddyboss-dark           .zn-bb-context .zn-dash-panel [style*="color:#999"],
[data-color-scheme="dark"] .zn-bb-context .zn-dash-panel [style*="color:#555"],
[data-color-scheme="dark"] .zn-bb-context .zn-dash-panel [style*="color:#999"] {
    color: var(--bb-muted-color-dark, #94a3b8) !important;
}
@media (prefers-color-scheme: dark) {
    .zn-bb-context .zn-dash-panel [style*="background:#e8f5e9"],
    .zn-bb-context .zn-dash-panel [style*="background:#fff3e0"],
    .zn-bb-context .zn-dash-panel [style*="background:#f3e5f5"] { background: var(--bb-card-background-color-dark, #1e293b) !important; border: 1px solid var(--bb-border-color-dark, #334155) !important; }
    .zn-bb-context .zn-dash-panel [style*="color:#555"],
    .zn-bb-context .zn-dash-panel [style*="color:#999"]          { color: var(--bb-muted-color-dark, #94a3b8) !important; }
}

/* ── Network viz canvas ──────────────────────────────────────────── */
.buddyboss-dark           .zn-bb-context .zn-network-wrap,
[data-color-scheme="dark"] .zn-bb-context .zn-network-wrap {
    --color-bg:      #0f172a;
    --color-surface: #1e293b;
    --color-border:  #334155;
    --color-text:    #e2e8f0;
    --color-muted:   #94a3b8;
    background-color: #1e293b !important;
    border-color:     #334155 !important;
    color:            #e2e8f0 !important;
}
@media (prefers-color-scheme: dark) {
    .zn-bb-context .zn-network-wrap {
        --color-bg:      #0f172a;
        --color-surface: #1e293b;
        --color-border:  #334155;
        --color-text:    #e2e8f0;
        --color-muted:   #94a3b8;
        background-color: #1e293b !important;
        border-color:     #334155 !important;
        color:            #e2e8f0 !important;
    }
}

/* ── Profile card popup ──────────────────────────────────────────── */
.buddyboss-dark           .zn-profile-card,
[data-color-scheme="dark"] .zn-profile-card {
    background:   #1e293b !important;
    border-color: #334155 !important;
    color:        #e2e8f0 !important;
}
@media (prefers-color-scheme: dark) {
    .zn-profile-card { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
}

/* ── Referral link input ─────────────────────────────────────────── */
.buddyboss-dark           .zn-bb-context #zn-referral-link-input,
[data-color-scheme="dark"] .zn-bb-context #zn-referral-link-input {
    background:   var(--bb-input-background-color-dark, #1e293b) !important;
    border-color: var(--bb-border-color-dark, #334155) !important;
    color:        var(--bb-text-color-dark, #e2e8f0) !important;
}
@media (prefers-color-scheme: dark) {
    .zn-bb-context #zn-referral-link-input { background: var(--bb-input-background-color-dark, #1e293b) !important; border-color: var(--bb-border-color-dark, #334155) !important; color: var(--bb-text-color-dark, #e2e8f0) !important; }
}

/* ── Copy feedback text ──────────────────────────────────────────── */
.buddyboss-dark           .zn-bb-context #zn-copy-feedback,
[data-color-scheme="dark"] .zn-bb-context #zn-copy-feedback {
    color: #4ade80 !important; /* keep green but lighter for dark bg */
}

/* ── Partner Badge (unconditional — renders on all BB profile pages) ─────── */
/* Moved here from zn-partner-store.css per Phase 0 fix: badge CSS must load  */
/* even when visiting another user's profile (where partner-store.css is not  */
/* enqueued). The --zn-partner-shadow-gold fallback is provided inline.        */
.zn-badge--partner {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    box-shadow: var(--zn-partner-shadow-gold, 0 2px 10px rgba(245,158,11,.35));
    white-space: nowrap;
}
.zn-badge--partner:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-1px);
}