.signal-core-host {
  position: relative;
  min-width: 0;
}

.signal-core-host > .phero-screen,
.signal-core-host > .phero-float,
.signal-core-host > .appwin {
  display: none;
}

.ct-signal-core {
  --sc-accent: 232, 192, 121;
  --sc-secondary: 91, 162, 224;
  --sc-output: 110, 217, 144;
  position: relative;
  width: 100%;
  min-height: 500px;
  isolation: isolate;
  overflow: hidden;
}

.ct-signal-core[data-product="ctstock"] {
  --sc-accent: 190, 155, 255;
  --sc-secondary: 101, 210, 208;
  --sc-output: 117, 229, 162;
}

.ct-signal-core::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 9% 7% 12%;
  background:
    radial-gradient(circle at 56% 48%, rgba(var(--sc-accent), 0.12), transparent 25%),
    radial-gradient(circle at 68% 62%, rgba(var(--sc-secondary), 0.09), transparent 30%);
  filter: blur(16px);
  pointer-events: none;
}

.sc-flow-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sc-source-list,
.sc-output-list {
  position: absolute;
  z-index: 3;
  display: grid;
}

.sc-source-list {
  top: 18%;
  left: 0;
  gap: 58px;
}

.sc-output-list {
  top: 29%;
  right: 0;
  gap: 92px;
}

.sc-source,
.sc-output {
  position: relative;
  min-width: 128px;
  color: rgba(217, 226, 238, 0.58);
  opacity: 0.72;
  transition: color 0.38s ease, opacity 0.38s ease, transform 0.38s ease;
}

.sc-source {
  padding-left: 19px;
}

.sc-output {
  padding-right: 19px;
  text-align: right;
}

.sc-source::before,
.sc-output::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #607086;
  box-shadow: 0 0 0 4px rgba(96, 112, 134, 0.08);
  transition: background 0.38s ease, box-shadow 0.38s ease;
}

.sc-source::before { left: 0; }
.sc-output::after { right: 0; }

.sc-source.is-active,
.sc-output.is-active {
  color: #fff;
  opacity: 1;
  transform: translateY(-2px);
}

.sc-source.is-active::before {
  background: rgb(var(--sc-secondary));
  box-shadow: 0 0 18px rgba(var(--sc-secondary), 0.88), 0 0 0 5px rgba(var(--sc-secondary), 0.11);
}

.sc-output.is-active::after {
  background: rgb(var(--sc-output));
  box-shadow: 0 0 18px rgba(var(--sc-output), 0.88), 0 0 0 5px rgba(var(--sc-output), 0.11);
}

.sc-kicker {
  color: #728399;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sc-name {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.sc-core {
  --sc-core-scale: 1;
  position: absolute;
  z-index: 5;
  top: 49%;
  left: 54%;
  width: 188px;
  height: 188px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) scale(var(--sc-core-scale));
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sc-core::before,
.sc-core::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.sc-core::before {
  inset: 0;
  border: 1px solid rgba(var(--sc-accent), 0.34);
  box-shadow: inset 0 0 44px rgba(var(--sc-accent), 0.08), 0 0 76px rgba(var(--sc-secondary), 0.08);
}

.sc-core::after {
  inset: 18px;
  border: 1px solid rgba(136, 164, 186, 0.2);
}

.sc-core-ticks {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 2deg, rgba(var(--sc-accent), 0.72) 0 1deg, transparent 1deg 12deg);
  -webkit-mask: radial-gradient(circle, transparent 0 76%, #000 77% 79%, transparent 80%);
  mask: radial-gradient(circle, transparent 0 76%, #000 77% 79%, transparent 80%);
  opacity: 0.48;
  transform: rotate(var(--sc-ring-angle, 0deg));
}

.sc-core-face {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
  border: 1px solid rgba(var(--sc-accent), 0.42);
  border-radius: 50%;
  background: radial-gradient(circle at 42% 34%, rgba(28, 49, 70, 0.99), rgba(7, 18, 33, 0.99) 68%);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4), 0 0 38px rgba(var(--sc-accent), 0.18);
  text-align: center;
}

.sc-core-name {
  color: rgb(var(--sc-accent));
  font-family: var(--display, Inter, sans-serif);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.ct-signal-core[data-product="ctstock"] .sc-core-name {
  font-size: 18px;
}

.sc-core-product {
  margin-top: 7px;
  color: #cad3de;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sc-core-state {
  position: absolute;
  z-index: 6;
  bottom: -28px;
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
  color: #8b9bad;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 9px;
  letter-spacing: 0.1em;
}

.sc-core-state strong {
  color: rgb(var(--sc-accent));
  font-weight: 650;
}

.sc-flow-status {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 3%;
  left: 3%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sc-flow-step {
  position: relative;
  padding-top: 13px;
  color: #5f6f83;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 8px;
  letter-spacing: 0.07em;
  transition: color 0.4s ease;
}

.sc-flow-step::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 0;
  height: 3px;
  background: rgb(var(--sc-accent));
  transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sc-flow-step.is-active { color: #dbe3ec; }
.sc-flow-step.is-active::before { width: 38%; }

[data-theme="light"] .ct-signal-core::before { opacity: 0.54; }
[data-theme="light"] .sc-source,
[data-theme="light"] .sc-output { color: rgba(36, 49, 68, 0.7); }
[data-theme="light"] .sc-source.is-active,
[data-theme="light"] .sc-output.is-active { color: #111827; }
[data-theme="light"] .sc-core-face { background: radial-gradient(circle at 42% 34%, #fff, #e7ebf1 72%); }
[data-theme="light"] .sc-core-product { color: #455166; }
[data-theme="light"] .sc-flow-status { border-top-color: rgba(12, 21, 37, 0.15); }
[data-theme="light"] .sc-flow-step.is-active { color: #273245; }

@media (max-width: 1024px) {
  .ct-signal-core {
    width: min(100%, 720px);
    min-height: 470px;
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  .ct-signal-core { min-height: 350px; }
  .sc-source-list { top: 17%; left: 1%; gap: 41px; }
  .sc-output-list { top: 27%; right: 1%; gap: 68px; }
  .sc-source, .sc-output { min-width: 86px; }
  .sc-kicker { display: none; }
  .sc-name { font-size: 9px; }
  .sc-core { left: 52%; width: 124px; height: 124px; }
  .sc-core-ticks { inset: -8px; }
  .sc-core-face { width: 72px; height: 72px; }
  .sc-core-name { font-size: 19px; }
  .ct-signal-core[data-product="ctstock"] .sc-core-name { font-size: 14px; }
  .sc-core-product { margin-top: 5px; font-size: 6px; }
  .sc-core-state { bottom: -22px; font-size: 7px; }
  .sc-flow-status { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-source,
  .sc-output,
  .sc-core,
  .sc-flow-step,
  .sc-flow-step::before { transition: none; }
}