/* X Promotional Network Topology — investigation hero module */
.xnet { color: #fff; font-family: 'Inter', system-ui, sans-serif }
.xnet .eyebrow { color: #fca5a5; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase }
.xnet .h1 { color: #fff; font-weight: 800; font-size: 28px; line-height: 1.18; letter-spacing: -.01em }
.xnet .h2 { color: #fff; font-weight: 700; font-size: 16px; letter-spacing: -.005em }
.xnet .lead { color: #f1f5f9; font-size: 13.5px; line-height: 1.6 }
.xnet .pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4 }
.xnet .stat { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; padding: 14px 14px 12px; text-align: left }
.xnet .stat .lbl { color: #cbd5e1; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700 }
.xnet .stat .val { color: #fff; font-weight: 800; font-size: 22px; line-height: 1.05; margin: 4px 0 2px; font-variant-numeric: tabular-nums }
.xnet .stat .hint { color: #e2e8f0; font-size: 10.5px }
.xnet .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px }
@media (min-width: 700px) { .xnet .stat-grid { grid-template-columns: repeat(3, 1fr) } }
@media (min-width: 1024px) { .xnet .stat-grid { grid-template-columns: repeat(6, 1fr) } }

/* Filters */
.xnet .filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px }
.xnet .chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: .03em; cursor: pointer; transition: all .15s; user-select: none; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); color: #fff }
.xnet .chip:hover { border-color: rgba(34,211,238,.45); color: #fff; background: rgba(34,211,238,.06) }
.xnet .chip.on { color: #fff; background: rgba(34,211,238,.14); border-color: rgba(34,211,238,.55); box-shadow: 0 0 12px rgba(34,211,238,.12) }
.xnet .chip .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block }
.xnet .chip .ct { color: #cbd5e1; font-weight: 600; font-size: 10px }
.xnet .chip.on .ct { color: #fff }

/* Crew dot colors */
.dot-aevon{background:#fb7185}
.dot-gotm{background:#a78bfa}
.dot-basc{background:#fbbf24}
.dot-puffsterz{background:#10b981}
.dot-mob{background:#f97316}
.dot-nuddies{background:#ec4899}
.dot-sodead{background:#ef4444}
.dot-launchpad{background:#22d3ee}
.dot-mnk3ys{background:#84cc16}
.dot-promoter{background:#94a3b8}
.dot-crew_set{background:#64748b}
.dot-bot{background:#7f1d1d}

/* Topology stage */
.xnet .stage { position: relative; background: radial-gradient(ellipse at center, rgba(15,23,42,.7) 0%, rgba(2,6,23,.95) 70%), #020617; border: 1px solid rgba(239,68,68,.22); border-radius: 16px; box-shadow: 0 0 32px rgba(239,68,68,.05) inset, 0 4px 28px rgba(0,0,0,.35); overflow: hidden; min-height: 680px }
.xnet .stage svg { display: block; width: 100%; height: 680px; cursor: grab }
.xnet .stage svg:active { cursor: grabbing }
.xnet .grid-bg { fill: url(#xnet-grid) }
.xnet .legend { position: absolute; top: 12px; left: 12px; background: rgba(2,6,23,.72); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 8px 10px; font-size: 10px; color: #94a3b8; backdrop-filter: blur(8px); pointer-events: none; max-width: 240px }
.xnet .legend strong { color: #fff; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; display: block; margin-bottom: 5px }
.xnet .legend .row { display: flex; align-items: center; gap: 6px; line-height: 1.7; font-variant-numeric: tabular-nums }
.xnet .legend .row .dot { width: 8px; height: 8px; border-radius: 50% }

.xnet .controls { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; flex-direction: column }
.xnet .btn { background: rgba(2,6,23,.72); border: 1px solid rgba(255,255,255,.08); color: #cbd5e1; font-size: 10px; padding: 5px 10px; border-radius: 8px; cursor: pointer; backdrop-filter: blur(8px); font-family: 'JetBrains Mono', monospace; font-weight: 600 }
.xnet .btn:hover { color: #fff; border-color: rgba(34,211,238,.4) }

/* Tooltip */
.xnet .tip { position: absolute; pointer-events: none; background: rgba(2,6,23,.95); border: 1px solid rgba(34,211,238,.4); border-radius: 8px; padding: 8px 10px; font-size: 11px; color: #fff; max-width: 260px; box-shadow: 0 8px 28px rgba(0,0,0,.55); z-index: 5; opacity: 0; transition: opacity .12s; transform: translate(-50%, calc(-100% - 12px)) }
.xnet .tip.on { opacity: 1 }
.xnet .tip .h { font-weight: 800; font-size: 12.5px; color: #fff; margin-bottom: 3px }
.xnet .tip .b { color: #94a3b8; font-size: 10.5px; line-height: 1.45 }
.xnet .tip .meta { color: #fbbf24; font-size: 10px; margin-top: 3px; font-variant-numeric: tabular-nums }

/* Node visuals */
.xnet g.node { transition: filter .15s }
.xnet g.node circle { stroke: rgba(0,0,0,.65); stroke-width: 1.5; transition: stroke .12s, stroke-width .12s; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)) }
.xnet g.node.crew circle { filter: drop-shadow(0 0 8px var(--glow, rgba(251,191,36,.55))) drop-shadow(0 1px 2px rgba(0,0,0,.55)) }
.xnet g.node:hover circle { stroke: #22d3ee; stroke-width: 2.5 }
.xnet g.node.center circle { stroke: #ef4444; stroke-width: 3.5; filter: drop-shadow(0 0 18px rgba(239,68,68,.6)) drop-shadow(0 2px 4px rgba(0,0,0,.55)) }
.xnet g.node.center { animation: xnet-pulse 2.6s ease-out infinite }
@keyframes xnet-pulse { 0%,100% { filter: drop-shadow(0 0 14px rgba(239,68,68,.45)) } 50% { filter: drop-shadow(0 0 26px rgba(239,68,68,.85)) } }
.xnet g.labels text,
.xnet g.node text { fill: #fff !important; font-size: 11px; font-weight: 700; text-anchor: middle; pointer-events: none; paint-order: stroke fill; stroke: rgba(2,6,23,.92); stroke-width: 4px; stroke-linejoin: round; transition: opacity .18s; letter-spacing: .005em }
.xnet g.labels text { fill: #fff !important }
.xnet g.node.center text { font-size: 13px; fill: #fff !important }
.xnet g.node.crew text { fill: #fff !important }
.xnet line.edge { stroke: rgba(148,163,184,.18); stroke-width: 1.3; transition: stroke .12s, stroke-width .12s, opacity .15s; stroke-linecap: round }
.xnet line.edge.crew { stroke: rgba(251,191,36,.55); stroke-width: 1.7 }
.xnet line.edge.promoted { stroke: rgba(34,211,238,.50); stroke-width: 1.6; stroke-dasharray: 4 3 }
.xnet line.edge.retweets { stroke: rgba(167,139,250,.55); stroke-width: 1.6 }
.xnet line.edge.founded_by, .xnet line.edge.art_by, .xnet line.edge.operates, .xnet line.edge.employed_by { stroke: rgba(239,68,68,.78); stroke-width: 2.2 }
.xnet line.edge.faded { opacity: .07 }
.xnet g.node.faded { opacity: .14 }
.xnet g.node.faded text { opacity: 0 !important }

/* Side panel */
.xnet .side { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 14px; padding: 16px; min-height: 540px }
.xnet .side .ph { color: #e2e8f0; font-size: 12px; padding: 12px 0; line-height: 1.6 }
.xnet .side .pf { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px }
.xnet .side .pf img { width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); object-fit: cover }
.xnet .side .pf .h { color: #fff; font-weight: 800; font-size: 14px; line-height: 1.2 }
.xnet .side .pf .sub { color: #e2e8f0; font-size: 10.5px; margin-top: 1px }
.xnet .side .meta-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 8px }
.xnet .side .bio { color: #fff; font-size: 12px; line-height: 1.6; margin: 4px 0 10px; white-space: pre-wrap }
.xnet .side .reasoning { color: #e2e8f0; font-size: 11.5px; line-height: 1.6 }
.xnet .side .reasoning .lk { display: block; padding: 7px 9px; margin: 5px 0; background: rgba(0,0,0,.32); border-left: 2px solid rgba(239,68,68,.55); border-radius: 5px; color: #fff; font-size: 11px }
.xnet .side a.x-link { color: #67e8f9; text-decoration: none; font-weight: 700; font-size: 11px }
.xnet .side a.x-link:hover { color: #fff; text-decoration: underline }

/* Tweet gallery */
.xnet .tweet-grid { display: grid; grid-template-columns: 1fr; gap: 10px }
@media (min-width: 760px) { .xnet .tweet-grid { grid-template-columns: 1fr 1fr } }
@media (min-width: 1100px) { .xnet .tweet-grid { grid-template-columns: 1fr 1fr 1fr } }
.xnet .tw { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 12px; padding: 12px 14px; transition: border-color .15s, transform .15s }
.xnet .tw:hover { border-color: rgba(34,211,238,.45); transform: translateY(-1px); background: rgba(34,211,238,.04) }
.xnet .tw .author { display: flex; align-items: center; gap: 8px }
.xnet .tw .author .h { color: #fff; font-weight: 700; font-size: 12px }
.xnet .tw .author .ck { color: #67e8f9 }
.xnet .tw .body { color: #fff; font-size: 13px; line-height: 1.55; margin: 8px 0 6px }
.xnet .tw .metrics { display: flex; gap: 12px; color: #e2e8f0; font-size: 11px; font-variant-numeric: tabular-nums; margin-top: 6px }
.xnet .tw .metrics span strong { color: #fff; font-size: 11.5px }
.xnet .tw .crew-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px }
.xnet .tw .crew-tag { font-size: 9px; padding: 1.5px 6px; border-radius: 999px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(251,191,36,.12); color: #fcd34d; border: 1px solid rgba(251,191,36,.3) }
.xnet .tw a.tw-link { color: #22d3ee; font-size: 10.5px; text-decoration: none }
.xnet .tw a.tw-link:hover { text-decoration: underline }

/* Shared panel surface */
.xnet .panel-card { background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px 14px }
/* Reach bar */
.xnet .reach-bar { padding: 12px 14px }
.xnet .reach-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; gap: 8px; font-size: 11.5px }
.xnet .reach-row .h { color: #fff; font-weight: 700; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.xnet .reach-row .h .tag { font-size: 9px; padding: 1.5px 6px; border-radius: 999px; margin-left: 5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase }
.xnet .reach-row .v { color: #fde68a; font-variant-numeric: tabular-nums; font-weight: 700; font-family: 'JetBrains Mono', monospace; font-size: 11.5px }
.xnet .reach-row .bar { background: rgba(255,255,255,.06); height: 4px; border-radius: 2px; overflow: hidden; flex: 0 0 60px }
.xnet .reach-row .bar > div { background: linear-gradient(90deg, rgba(251,191,36,.4), rgba(251,191,36,.9)); height: 100% }

/* Tweet badges */
.xnet .tw .badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px }
.xnet .tw .bdg { font-size: 9px; padding: 2px 7px; border-radius: 999px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.4 }
.xnet .tw .bdg.badge-deleted { background: rgba(239,68,68,.18); color: #fca5a5; border: 1px solid rgba(239,68,68,.4) }
.xnet .tw .bdg.badge-bot { background: rgba(127,29,29,.35); color: #fecaca; border: 1px solid rgba(239,68,68,.4) }
.xnet .tw .bdg.badge-sus { background: rgba(251,191,36,.16); color: #fcd34d; border: 1px solid rgba(251,191,36,.4) }
.xnet .tw .bdg.badge-wash { background: rgba(167,139,250,.15); color: #c4b5fd; border: 1px solid rgba(167,139,250,.4) }
.xnet .tw .bdg.badge-crew { background: rgba(251,191,36,.10); color: #fde68a; border: 1px solid rgba(251,191,36,.3) }
.xnet .tw.is-deleted { border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.06) }
.xnet .tw .body.deleted { color: #fca5a5; font-style: italic }

/* Bot sample grid */
.xnet .bot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px }
.xnet .bot-card { display: block; background: rgba(127,29,29,.10); border: 1px solid rgba(239,68,68,.25); border-radius: 8px; padding: 10px 11px; text-decoration: none; color: inherit; transition: all .15s }
.xnet .bot-card:hover { background: rgba(127,29,29,.18); border-color: rgba(239,68,68,.45); transform: translateY(-1px) }
.xnet .bot-card .bh { color: #fff; font-weight: 700; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.xnet .bot-card .bm { color: #94a3b8; font-size: 9.5px; margin-top: 2px; font-variant-numeric: tabular-nums }
.xnet .bot-card .bv { color: #fca5a5; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-top: 5px }

/* Multi-crew overlap matrix */
.xnet .ov-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch }
.xnet .ov-table { width: 100%; border-collapse: collapse; font-size: 11px; min-width: 100% }
.xnet .ov-table th { text-align: center; padding: 6px 6px; color: #cbd5e1; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02) }
.xnet .ov-table th:first-child { text-align: left; padding-left: 10px }
.xnet .ov-table th .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle }
.xnet .ov-table th span:last-child { vertical-align: middle }
.xnet .ov-table td { padding: 6px 6px; border-bottom: 1px solid rgba(255,255,255,.04); text-align: center; font-variant-numeric: tabular-nums }
.xnet .ov-table td:first-child { text-align: left; padding-left: 10px }
.xnet .ov-table td a { color: #fff; text-decoration: none; font-weight: 600 }
.xnet .ov-table td a:hover { color: #22d3ee }
.xnet .ov-table td.on { color: #fbbf24; font-size: 14px; font-weight: 800 }
.xnet .ov-table td.off { color: rgba(255,255,255,.10); font-size: 14px }
.xnet .ov-table td.num { color: #fcd34d; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; text-align: right; padding-right: 10px }

/* Touch hint */
.xnet .stage::after { content: 'pinch · drag · tap'; position: absolute; bottom: 10px; right: 12px; color: rgba(148,163,184,.45); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; font-family: 'JetBrains Mono', monospace; font-weight: 600 }

/* Ultra-narrow + tablet responsive — uniform spacing scales down together */
@media (max-width: 1023px) {
  .xnet .stage { min-height: 600px }
  .xnet .stage svg { height: 600px }
  .xnet .side { min-height: auto }
}
@media (max-width: 760px) {
  .xnet .h1 { font-size: 22px }
  .xnet .h2 { font-size: 14px }
  .xnet .lead { font-size: 12px }
  .xnet .stage { min-height: 520px }
  .xnet .stage svg { height: 520px }
  .xnet .legend { font-size: 9px; padding: 6px 8px; max-width: 160px }
  .xnet .controls .btn { padding: 6px 10px; font-size: 11px; min-width: 36px; min-height: 32px }
  .xnet .side { padding: 12px }
  .xnet .stat .val { font-size: 18px }
  .xnet .stat .lbl { font-size: 9px }
  .xnet .stat { padding: 10px 11px 9px }
  .xnet .chip { font-size: 10.5px; padding: 5px 9px; min-height: 28px }
  .xnet .reach-row { font-size: 10.5px }
  .xnet g.labels text, .xnet g.node text { font-size: 10.5px }
}
@media (max-width: 480px) {
  .xnet .stage { min-height: 440px }
  .xnet .stage svg { height: 440px }
  .xnet .legend { font-size: 8.5px; padding: 5px 7px; max-width: 130px }
  .xnet .stat-grid { grid-template-columns: 1fr 1fr }
  .xnet .h1 { font-size: 19px }
  .xnet g.labels text, .xnet g.node text { font-size: 9.5px }
  .xnet g.node.center text { font-size: 11px }
  .xnet .filters { gap: 5px }
  .xnet .chip { font-size: 10px; padding: 5px 9px }
  .xnet .tw .body { font-size: 11.5px }
  .xnet .tw { padding: 10px 12px }
  .xnet .tw .author .h { font-size: 11.5px }
  .xnet .tw .metrics { gap: 8px; font-size: 10px }
  .xnet .stage::after { font-size: 8.5px; right: 8px; bottom: 8px }
}
@media (max-width: 360px) {
  .xnet .stage { min-height: 380px }
  .xnet .stage svg { height: 380px }
  .xnet .stat-grid { grid-template-columns: 1fr 1fr }
  .xnet .h1 { font-size: 17px; line-height: 1.2 }
  .xnet .h2 { font-size: 13px }
  .xnet .lead { font-size: 11.5px }
  .xnet g.labels text, .xnet g.node text { font-size: 9px }
  .xnet g.node.center text { font-size: 10.5px }
  .xnet .controls { right: 6px; top: 6px; gap: 4px }
  .xnet .controls .btn { padding: 5px 8px; font-size: 10.5px; min-width: 32px; min-height: 30px }
  .xnet .pill { font-size: 8.5px; padding: 2px 6px }
  .xnet .reach-bar, .xnet .side { padding: 12px }
  .xnet .reach-row .bar { flex: 0 0 40px }
  .xnet .reach-row .h .tag { display: none }
  .xnet .legend { display: none }
}
@media (max-width: 280px) {
  .xnet .stage { min-height: 320px }
  .xnet .stage svg { height: 320px }
  .xnet .legend, .xnet .stage::after { display: none }
  .xnet .controls { gap: 3px }
  .xnet .controls .btn { padding: 4px 7px; font-size: 10px; min-width: 28px; min-height: 28px }
  .xnet .stat-grid { grid-template-columns: 1fr 1fr; gap: 6px }
  .xnet .stat { padding: 8px 9px 7px }
  .xnet .stat .val { font-size: 16px }
  .xnet .h1 { font-size: 15px }
  .xnet .h2 { font-size: 12px }
  .xnet .lead { font-size: 11px }
  .xnet .filters { gap: 3px }
  .xnet .chip { font-size: 9.5px; padding: 4px 7px }
  .xnet .chip .ct { display: none }
  .xnet g.labels text, .xnet g.node text { font-size: 8.5px }
  .xnet .tw { padding: 8px 10px }
  .xnet .tw .body { font-size: 11px; line-height: 1.45 }
  .xnet .tw .metrics { font-size: 9.5px; gap: 6px }
}

/* Touch device hint — tap to inspect */
@media (hover: none) {
  .xnet .stage::after { content: 'pinch to zoom · tap a node' }
}

/* Loading skeleton */
.xnet[data-state="loading"] .stat .val,
.xnet[data-state="loading"] .stat .hint,
.xnet[data-state="loading"] .stat .lbl,
.xnet[data-state="loading"] .filters,
.xnet[data-state="loading"] .reach-bar,
.xnet[data-state="loading"] .overlap-matrix,
.xnet[data-state="loading"] .bot-sample,
.xnet[data-state="loading"] .tweet-grid,
.xnet[data-state="loading"] .side { opacity: .25; filter: blur(2px); pointer-events: none }
.xnet[data-state="loading"] .stage::before { content: 'LOADING NETWORK …'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: rgba(34,211,238,.7); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .25em; padding: 12px 20px; border: 1px solid rgba(34,211,238,.4); border-radius: 999px; background: rgba(2,6,23,.85); animation: xnet-load 1.4s ease-in-out infinite; z-index: 4 }
@keyframes xnet-load { 0%,100% { opacity: .5 } 50% { opacity: 1 } }
.xnet[data-state="ready"] .stat,
.xnet[data-state="ready"] .filters,
.xnet[data-state="ready"] .stage,
.xnet[data-state="ready"] .side,
.xnet[data-state="ready"] .reach-bar,
.xnet[data-state="ready"] .overlap-matrix,
.xnet[data-state="ready"] .bot-sample,
.xnet[data-state="ready"] .tweet-grid { animation: xnet-fadein .5s ease-out both }
@keyframes xnet-fadein { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
.xnet[data-state="error"] .stage::before { content: 'NETWORK FAILED TO LOAD — RETRY'; cursor: pointer }
.xnet[data-state="error"] .stage::before:hover { background: rgba(239,68,68,.2); color: #fff }