/* ---------- Nexus Connect — module-specific hero visual ----------
   Connector list panel. Generic chrome (.mock*) lives in module.css. */
.mco-list { display: flex; flex-direction: column; gap: 10px; }
.mco-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); transition: border-color .2s var(--ease-out), transform .2s var(--ease-out); }
.mco-row:hover { transform: translateX(2px); border-color: color-mix(in srgb, var(--nx-green) 32%, var(--border)); }
.mco-row .ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface-inset); border: 1px solid var(--border); color: var(--nx-green); }
.mco-row .ic svg { width: 18px; height: 18px; }
.mco-row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mco-row .nm { font-size: 13.5px; font-weight: 600; color: var(--fg-strong); }
.mco-row .sub { font-size: 11px; color: var(--fg-subtle); font-family: var(--font-mono); }
.mco-row .dir { font-family: var(--font-mono); font-size: 13px; color: var(--fg-subtle); }
.mco-sync { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--nx-green); font-family: var(--font-mono); }
.mco-sync .d { width: 7px; height: 7px; border-radius: 999px; background: var(--nx-green); }
@media (prefers-reduced-motion: no-preference){ .mco-sync .d { animation: mcoPulse 2.4s var(--ease-out) infinite; } }
@keyframes mcoPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nx-green) 55%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }