.cryex-reach-network {
  display: block;
  min-width: 0;
  min-height: 176px;
  color: var(--cx-ink);
}

.cryex-reach-network[hidden] { display: none !important; }

.cryex-reach-network__card,
.cryex-reach-network__state {
  min-height: 176px;
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-dialog);
  background: var(--cx-surface);
  box-shadow: var(--cx-shadow-xs);
}

.cryex-reach-network__card {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) minmax(132px, auto);
  align-items: center;
  gap: 20px;
  padding: 18px;
  overflow: hidden;
  border-left: 4px solid var(--cryex-reach-accent, var(--cx-accent-strong));
}

.cryex-reach-network__media {
  display: grid;
  width: 160px;
  height: 112px;
  overflow: hidden;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--cryex-reach-accent, var(--cx-accent-strong)) 18%, var(--cx-surface)), var(--cx-surface-muted));
}

.cryex-reach-network__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cryex-reach-network__media span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: var(--cx-ink-muted);
  border-radius: 14px;
  background: color-mix(in srgb, var(--cx-surface) 76%, transparent);
}

.cryex-reach-network__media span[hidden] { display: none; }
.cryex-reach-network__media svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cryex-reach-network__copy { min-width: 0; }

.cryex-reach-network__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  color: var(--cx-ink-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.cryex-reach-network__meta b {
  padding: 5px 8px;
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-pill);
  background: var(--cx-surface);
  color: var(--cx-ink);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.cryex-reach-network__meta span {
  display: -webkit-box;
  overflow: hidden;
  font-weight: 750;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cryex-reach-network__copy h3 {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: inherit;
  font-size: clamp(1.05rem, 2vw, 1.32rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cryex-reach-network__copy p {
  display: -webkit-box;
  margin: 7px 0 0;
  overflow: hidden;
  color: var(--cx-ink-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cryex-reach-network__action { display: grid; min-width: 132px; gap: 8px; }

.cryex-reach-network__action button,
.cryex-reach-network__retry {
  min-width: 44px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius);
  background: var(--cx-surface);
  color: var(--cx-ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.cryex-reach-network__action button:hover:not(:disabled),
.cryex-reach-network__retry:hover { border-color: var(--cx-ink-faint); }
.cryex-reach-network__action button:disabled { cursor: not-allowed; opacity: 0.55; }
.cryex-reach-network__action small { min-height: 1.4em; color: var(--cx-ink-muted); font-size: 0.75rem; line-height: 1.4; }
.cryex-reach-network__action small.is-error { color: var(--cx-danger); }
.cryex-reach-network__action small.is-muted { color: var(--cx-ink-muted); }

.cryex-reach-network__state {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 22px;
}

.cryex-reach-network__state-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: var(--cx-ink-muted);
  border-radius: 14px;
  background: var(--cx-surface-muted);
}

.cryex-reach-network__state-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cryex-reach-network__state-copy { display: grid; gap: 5px; }
.cryex-reach-network__state-copy strong { font-size: 0.98rem; }
.cryex-reach-network__state-copy small { color: var(--cx-ink-muted); font-size: 0.84rem; line-height: 1.5; }

.cryex-reach-network[data-state="loading"] .cryex-reach-network__state-icon,
.cryex-reach-network[data-state="loading"] .cryex-reach-network__state-copy > * {
  color: transparent;
  background: linear-gradient(100deg, var(--cx-surface-muted) 25%, var(--cx-canvas) 45%, var(--cx-surface-muted) 65%);
  background-size: 240% 100%;
  animation: cryex-reach-loading 1.4s ease-in-out infinite;
}

.cryex-reach-network[data-state="loading"] .cryex-reach-network__state-copy strong { width: min(280px, 70%); border-radius: 6px; }
.cryex-reach-network[data-state="loading"] .cryex-reach-network__state-copy small { width: min(520px, 92%); border-radius: 6px; }

@keyframes cryex-reach-loading {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (max-width: 720px) {
  .cryex-reach-network,
  .cryex-reach-network__card,
  .cryex-reach-network__state { min-height: 220px; }
  .cryex-reach-network__card { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 15px; }
  .cryex-reach-network__media { width: 92px; height: 92px; }
  .cryex-reach-network__action { grid-column: 1 / -1; min-width: 0; }
  .cryex-reach-network__action button { width: 100%; }
}

@media (max-width: 430px) {
  .cryex-reach-network,
  .cryex-reach-network__card,
  .cryex-reach-network__state { min-height: 272px; }
  .cryex-reach-network__card { grid-template-columns: 76px minmax(0, 1fr); align-items: start; }
  .cryex-reach-network__media { width: 76px; height: 76px; }
  .cryex-reach-network__meta { align-items: flex-start; flex-direction: column; gap: 5px; }
  .cryex-reach-network__state { grid-template-columns: 44px minmax(0, 1fr); align-content: center; }
  .cryex-reach-network__state-icon { width: 44px; height: 44px; }
  .cryex-reach-network__retry { grid-column: 1 / -1; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cryex-reach-network * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}