/* Network untangle diagram styles (dark theme). Used by all three concepts with the unchanged network-untangle.js. */
.nba { --orange:#d17f33; --orange-bright:#f2a548; --blue:#005dd9; --blue-soft:#3d8ed6; --blue-pale:#8fc2e8; --ease:cubic-bezier(.22,1,.36,1);
  font-family:"Montserrat",system-ui,sans-serif; --font-title:"Satoshi","Montserrat",system-ui,sans-serif; --font-body:"Montserrat",system-ui,sans-serif; }
.nba { position: relative; color: #fff; }
.nba button { font:inherit; background:none; border:0; cursor:pointer; }
@keyframes nbaFlow { to { stroke-dashoffset: -18; } }
@keyframes nbaPulse { 50% { transform: scale(1.08); opacity: 0.4; } }
@media (max-width: 760px) { .nba-range { width: 140px; } .nba-btn { padding: 8px 12px; font-size: 0.78rem; } .nba-controls { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .nba-flow, .nba-hub-ring { animation: none !important; } }
.nba-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.nba-toggle { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
.nba-btn { position: relative; z-index: 1; padding: 9px 18px; border-radius: 999px; font-size: 0.85rem; font-weight: 700; color: rgba(255, 255, 255, 0.65); transition: color 0.3s; white-space: nowrap; }
.nba-btn[aria-pressed="true"] { color: #fff; }
.nba-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #2a3550; transition: transform 0.5s var(--ease), background 0.5s; }
.nba.is-after .nba-pill { transform: translateX(100%); background: var(--orange); }
.nba-slider { display: flex; align-items: center; gap: 12px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.6); cursor: pointer; }
.nba-range { -webkit-appearance: none; appearance: none; width: 220px; height: 6px; margin: 0; border-radius: 99px; background: linear-gradient(90deg, var(--orange) var(--nba-p, 0%), rgba(255, 255, 255, 0.14) var(--nba-p, 0%)); cursor: pointer; }
.nba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--orange); }
.nba-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--orange); }
.nba-svg { width: 100%; height: auto; display: block; overflow: visible; }
.nba-line { fill: none; stroke-width: 2; stroke-linecap: round; }
.nba-flow { fill: none; stroke: var(--blue-pale); stroke-width: 2; stroke-dasharray: 4 14; animation: nbaFlow 1s linear infinite; }

.nba-packet { fill: var(--orange-bright); filter: url(#nba-glow); }
.nba-badge rect { fill: #1a2238; stroke: rgba(255, 255, 255, 0.25); stroke-width: 1; }
.nba-badge path { fill: none; stroke: #e9b07a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nba-badge text { fill: rgba(255, 255, 255, 0.8); font-family: var(--font-body); font-size: 10px; font-weight: 600; }
.nba-chip rect { fill: rgba(20, 10, 10, 0.65); stroke: rgba(242, 165, 72, 0.45); stroke-dasharray: 3 3; }
.nba-chip text { fill: #f2c79a; font-family: var(--font-body); font-size: 10.5px; font-weight: 600; }
.nba-partner circle { stroke-width: 2; }
.nba-partner text { fill: #fff; font-family: var(--font-title); font-weight: 700; font-size: 12px; text-anchor: middle; }
.nba-clinic-core { fill: var(--blue); }
.nba-clinic-ring { fill: none; stroke: var(--blue-soft); stroke-width: 1.5; stroke-dasharray: 3 6; }
.nba-clinic-label { fill: #fff; font-family: var(--font-title); font-weight: 900; font-size: 19px; text-anchor: middle; }
.nba-hub-halo { fill: #0b1736; stroke: rgba(242, 165, 72, 0.25); stroke-width: 1; }
.nba-hub-ring { fill: none; stroke: var(--orange-bright); stroke-width: 2; animation: nbaPulse 2.6s ease-in-out infinite; transform-origin: 0 0; }

.nba-hub-label { fill: #fff; font-family: var(--font-title); font-weight: 700; font-size: 15px; text-anchor: middle; }
@media (max-width: 480px) { .nba-toggle { max-width: 100%; } .nba-btn { padding: 8px 6px; font-size: 0.72rem; } .nba-slider span { display: none; } .nba-range { width: 100%; } .nba-slider { width: 100%; } }