/* ══════════════════════════════════════════════════════════════
   ВИЗУАЛИЗАЦИИ
   ══════════════════════════════════════════════════════════════ */

/* ── NETWORK MAP ── */
.viz-netmap {
  position: relative; 
  width: 440px; 
  height: 400px; 
  flex-shrink: 0;
}

.viz-netmap-svg { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  overflow: visible; 
}

.viz-net-node {
  position: absolute; 
  transform: translate(-50%, -50%);
  display: flex; 
  align-items: center; 
  justify-content: center;
  cursor: pointer; 
  z-index: 2;
}

.viz-net-node .viz-net-inner {
  width: 44px; 
  height: 44px; 
  border-radius: 14px;
  background: var(--glass-bg-lg); 
  border: 1.5px solid var(--glass-border);
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: 18px; 
  transition: all .3s; 
  position: relative; 
  z-index: 1;
}

.viz-net-node[data-pct="94"] .viz-net-inner,
.viz-net-node[data-pct="88"] .viz-net-inner { 
  border-color: rgba(var(--accent3-rgb), 0.5); 
  box-shadow: 0 0 14px rgba(var(--accent3-rgb), 0.25); 
}

.viz-net-node[data-pct="81"] .viz-net-inner,
.viz-net-node[data-pct="76"] .viz-net-inner,
.viz-net-node[data-pct="71"] .viz-net-inner,
.viz-net-node[data-pct="62"] .viz-net-inner { 
  border-color: rgba(245,158,11,0.5); 
  box-shadow: 0 0 14px rgba(245,158,11,0.2); 
}

.viz-net-node[data-pct="47"] .viz-net-inner { 
  border-color: rgba(239,68,68,0.5); 
  box-shadow: 0 0 14px rgba(239,68,68,0.2); 
}

.viz-net-node:hover .viz-net-inner { 
  transform: scale(1.15); 
}

.viz-net-node:hover .viz-net-tooltip { 
  opacity: 1; 
  transform: translateX(-50%) translateY(-4px); 
}

.viz-net-hub .viz-net-inner {
  width: 56px; 
  height: 56px; 
  border-radius: 18px; 
  font-size: 22px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent2-rgb),  0.2));
  border-color: rgba(var(--accent-rgb), 0.6); 
  box-shadow: 0 0 28px rgba(var(--accent-rgb), 0.35);
}

.viz-net-ring {
  position: absolute; 
  width: 72px; 
  height: 72px; 
  border-radius: 50%;
  border: 1.5px solid rgba(var(--accent-rgb), 0.25); 
  animation: netRingPulse 2s ease-out infinite;
}

.viz-net-tooltip {
  position: absolute; 
  bottom: calc(100% + 6px); 
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(15,15,30,0.5); 
  border: 1px solid var(--glass-border);
  border-radius: 8px; 
  padding: 5px 10px; 
  font-size: 10px; 
  color: var(--white);
  white-space: nowrap; 
  opacity: 0; 
  transition: all .25s; 
  pointer-events: none;
  backdrop-filter: blur(8px); 
  z-index: 10;
}

.viz-net-legend {
  position: absolute; 
  bottom: 6px; 
  right: 8px;
  display: flex; 
  flex-direction: column; 
  gap: 4px;
}

.viz-net-legend-item { 
  display: flex; 
  align-items: center; 
  gap: 5px; 
  font-size: 9px; 
  color: var(--muted); 
}

.viz-net-legend-dot { 
  width: 7px; 
  height: 7px; 
  border-radius: 50%; 
  flex-shrink: 0; 
}

/* ── ECOSYSTEM VISUALIZATION ── */
.viz-eco {
  position: relative; 
  width: 400px; 
  height: 340px; 
  flex-shrink: 0;
}

.viz-eco-svg { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
}

.viz-eco-node {
  position: absolute; 
  display: flex; 
  flex-direction: column; 
  align-items: center;
  gap: 3px; 
  z-index: 2;
}

.viz-eco-node-icon {
  width: 60px; 
  height: 60px; 
  border-radius: 18px;
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: 26px; 
  border: 1px solid; 
  box-shadow: 0 0 24px var(--glow);
}

.viz-eco-node-label { 
  font-size: 13px; 
  font-weight: 800; 
}

.viz-eco-node-sub { 
  font-size: 10px; 
  color: var(--muted); 
  white-space: nowrap; 
}

/* ── B2B (bottom-left) ── */
.viz-eco-b2b { 
  left: 30px; 
  bottom: 18px; 
  --glow: rgba(var(--accent-rgb), 0.35); 
}

.viz-eco-b2b .viz-eco-node-icon { 
  background: rgba(var(--accent-rgb), 0.12); 
  border-color: rgba(var(--accent-rgb), 0.35); 
}

.viz-eco-b2b .viz-eco-node-label { 
  color: var(--accent-soft); 
}

/* ── B2C (bottom-right) ── */
.viz-eco-b2c { 
  right: 30px; 
  bottom: 18px; 
  --glow: rgba(var(--accent3-rgb), 0.35); 
}

.viz-eco-b2c .viz-eco-node-icon { 
  background: rgba(var(--accent3-rgb), 0.1); 
  border-color: rgba(var(--accent3-rgb), 0.35); 
}

.viz-eco-b2c .viz-eco-node-label { 
  color: var(--accent3); 
}

/* ── B2E (top-center) ── */
.viz-eco-b2e { 
  left: 50%; 
  transform: translateX(-50%); 
  top: 8px; 
  --glow: rgba(245,158,11,0.35); 
}

.viz-eco-b2e .viz-eco-node-icon { 
  background: rgba(245,158,11,0.1); 
  border-color: rgba(245,158,11,0.35); 
}

.viz-eco-b2e .viz-eco-node-label { 
  color: var(--warn); 
}

/* ── FLOW LABELS ── */
.viz-eco-flow {
  position: absolute; 
  font-size: 9.5px; 
  font-weight: 700;
  padding: 3px 8px; 
  border-radius: 20px; 
  backdrop-filter: blur(6px); 
  z-index: 3;
  white-space: nowrap;
}

.viz-eco-flow-bc { 
  bottom: 72px; 
  left: 50%; 
  transform: translateX(-50%); 
  background: rgba(var(--accent3-rgb), 0.12); 
  color: var(--accent3); 
}

.viz-eco-flow-ce { 
  right: 12px; 
  top: 48%; 
  transform: translateY(-50%); 
  background: rgba(var(--accent-rgb), 0.12); 
  color: var(--accent-soft); 
}

.viz-eco-flow-eb { 
  left: 12px; 
  top: 48%; 
  transform: translateY(-50%); 
  background: rgba(245,158,11,0.12); 
  color: var(--warn); 
}

/* ══════════════════════════════════════════════════════════════
   УЛУЧШЕННОЕ ВЫДЕЛЕНИЕ ДЛЯ ОБЕИХ ТЕМ
   ══════════════════════════════════════════════════════════════ */

/* Network map - акцентная рамка и свечение */
.viz-netmap {
  border-radius: 20px;
  padding: 20px;
  background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), 0.04) 0%, transparent 70%);
}

/* Ecosystem - акцентная рамка */
.viz-eco {
  border-radius: 20px;
  padding: 20px;
  background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), 0.03) 0%, transparent 70%);
}

/* Hub node - усиленное свечение */
.viz-net-hub .viz-net-inner {
  box-shadow: 
    0 0 28px rgba(var(--accent-rgb), 0.5),
    0 0 56px rgba(var(--accent2-rgb), 0.3);
}

/* ── Светлая тема ── */
html.light .viz-netmap,
html.light .viz-eco {
  background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), 0.05) 0%, transparent 70%);
}

html.light .viz-net-hub .viz-net-inner {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent2-rgb), 0.12));
  box-shadow: 
    0 0 0 3px rgba(var(--accent-rgb), 0.1),
    0 4px 16px rgba(var(--accent-rgb), 0.25);
}

html.light .viz-eco-node-icon {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}