/* CONNECTIONS — interconnect value surface (theme-aware) */
.cx{ background:var(--card); border:1px solid color-mix(in srgb,var(--neon) 26%,var(--line)); border-radius:var(--r-lg,16px); padding:18px; box-shadow:var(--sh-glow,0 24px 70px -34px rgba(34,224,200,.4)); }
.cx-top{ display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding-bottom:14px; border-bottom:1px solid var(--hair,var(--line)); }
.cx-gauge,.cx-unlockn{ text-align:center; line-height:1.05; }
.cx-gauge b,.cx-unlockn b{ display:block; font-family:var(--font-display,inherit); font-size:30px; color:var(--neon); }
.cx-unlockn b{ background:linear-gradient(120deg,var(--neon),var(--violet)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.cx-gauge span,.cx-unlockn span{ font-size:11px; color:var(--mut); text-transform:uppercase; letter-spacing:.5px; }
.cx-valline{ font-size:13.5px; color:var(--ink); line-height:1.45; }
.cx-valline b{ color:var(--neon); }

.cx-flow{ display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; margin:16px 0; }
@media(max-width:720px){ .cx-flow{ grid-template-columns:1fr; } .cx-brain{ order:-1; } }
.cx-col h5{ margin:0 0 9px; font-family:var(--font-display,inherit); font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--mut); }
.cx-src{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer; font:inherit; background:#0c0c18; border:1px solid var(--line); border-radius:11px; padding:9px 11px; margin-bottom:7px; color:var(--ink); transition:border-color .15s, transform .12s, opacity .15s; opacity:.5; }
.cx-src:hover{ transform:translateY(-1px); border-color:color-mix(in srgb,var(--neon) 40%,var(--line)); }
.cx-src.on{ opacity:1; border-color:color-mix(in srgb,var(--neon) 45%,var(--line)); background:color-mix(in srgb,var(--neon) 7%,#0c0c18); }
.cx-ic{ font-size:17px; flex:0 0 auto; }
.cx-meta{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.cx-meta b{ font-size:13px; } .cx-meta em{ font-style:normal; font-size:11px; color:var(--mut); }
.cx-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:var(--line); box-shadow:none; transition:background .15s; }
.cx-src.on .cx-dot{ background:var(--neon); box-shadow:0 0 0 3px color-mix(in srgb,var(--neon) 22%,transparent); }

.cx-brainbox{ display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; background:linear-gradient(150deg,color-mix(in srgb,var(--neon) 16%,#0c0c18),color-mix(in srgb,var(--violet) 16%,#0c0c18)); border:1px solid color-mix(in srgb,var(--neon) 40%,var(--line)); border-radius:14px; padding:14px 16px; min-width:120px; }
.cx-brain-ic{ font-size:24px; color:var(--neon); animation:cx-pulse 2.6s ease-in-out infinite; }
.cx-brainbox b{ font-size:14px; } .cx-brainbox em{ font-style:normal; font-size:10.5px; color:var(--mut); }
@keyframes cx-pulse{ 0%,100%{ opacity:.7; transform:scale(1) } 50%{ opacity:1; transform:scale(1.12) } }
.cx-surf{ display:flex; align-items:center; gap:8px; background:#0c0c18; border:1px solid var(--line); border-radius:11px; padding:9px 11px; margin-bottom:7px; font-size:13px; color:var(--ink); }

.cx-insights{ margin-top:6px; border-top:1px solid var(--hair,var(--line)); padding-top:14px; }
.cx-insights h5{ margin:0 0 11px; font-family:var(--font-display,inherit); font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--neon); }
.cx-ins{ border:1px solid var(--line); border-radius:12px; padding:11px 13px; margin-bottom:9px; }
.cx-ins.on{ border-color:color-mix(in srgb,var(--neon) 38%,var(--line)); background:color-mix(in srgb,var(--neon) 6%,transparent); animation:cx-rise .25s ease both; }
.cx-ins-h{ display:flex; align-items:flex-start; gap:8px; }
.cx-ins-h b{ font-size:14px; line-height:1.3; }
.cx-spark{ color:var(--neon); font-size:14px; } .cx-lock{ font-size:13px; filter:grayscale(1); opacity:.6; }
.cx-ins-f{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin:7px 0 8px 22px; }
.cx-val{ font-size:12.5px; font-weight:700; color:var(--ink); }
.cx-arrow{ font-size:12px; color:var(--mut); }
.cx-needs{ display:flex; flex-wrap:wrap; gap:5px; margin-left:22px; }
.cx-chip{ font-size:10.5px; border-radius:6px; padding:2px 7px; border:1px solid var(--line); color:var(--mut); }
.cx-chip.on{ border-color:color-mix(in srgb,var(--neon) 40%,var(--line)); color:var(--ink); background:color-mix(in srgb,var(--neon) 10%,transparent); }
.cx-locked{ margin-top:4px; opacity:.85; }
.cx-ins.off{ background:#0c0c18; }
.cx-ins.off .cx-ins-h b{ color:var(--mut); }
.cx-locknote{ font-size:11.5px; color:var(--mut); margin:6px 0 0 22px; display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.cx-empty{ font-size:13px; color:var(--mut); }
@keyframes cx-rise{ from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none} }