:root {
  --echo-ink: var(--bg);
  --echo-panel: var(--surface);
  --echo-panel-2: var(--surface-2);
  --echo-line: var(--border);
  --echo-signal: var(--accent);
  --echo-signal-soft: var(--accent-dim);
  --echo-paper: var(--text);
  --echo-dim: var(--muted);
}

.echo-page {
  min-height: 100vh;
  overflow: hidden;
  background: var(--echo-ink);
  color: var(--echo-paper);
}

.echo-page button,
.echo-page input { font: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.echo-hero {
  display: grid;
  grid-template-columns: minmax(260px, .7fr) minmax(420px, 1.3fr);
  align-items: end;
  gap: clamp(32px, 6vw, 90px);
  padding: 38px clamp(28px, 5vw, 80px) 32px;
  border-bottom: 1px solid var(--echo-line);
  background: var(--bg-soft);
}

.echo-hero-copy { max-width: 430px; }

.echo-kicker,
.echo-section-label {
  color: var(--echo-dim);
  font: 600 10px/1.2 'SF Mono', Menlo, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.echo-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
}

.echo-kicker span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--echo-signal);
}

.echo-hero h1 {
  margin: 12px 0 4px;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.echo-hero-copy > p {
  color: var(--echo-dim);
  font-size: 14px;
}

.echo-search-wrap { min-width: 0; }

.echo-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  padding: 6px;
  border: 1px solid var(--echo-line);
  border-radius: 8px;
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}

.echo-search:focus-within {
  border-color: var(--echo-signal);
  box-shadow: 0 0 0 3px var(--echo-signal-soft);
}

.echo-search input {
  width: 100%;
  padding: 11px 12px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--echo-paper);
  font-size: 15px;
}

.echo-search input::placeholder { color: var(--muted-2); }

.echo-search button {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: var(--echo-signal);
  color: var(--bg);
  cursor: pointer;
  font-weight: 650;
}

.echo-search button:disabled { opacity: .45; cursor: wait; }

.echo-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  color: var(--muted-2);
  font: 11px 'SF Mono', Menlo, monospace;
}

.echo-suggestions button {
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--echo-dim);
  cursor: pointer;
}

.echo-suggestions button:hover {
  border-color: var(--echo-signal);
  color: var(--echo-signal);
}

.echo-loading,
.echo-empty {
  min-height: 260px;
  padding: 90px 6vw;
  background: var(--echo-ink);
  text-align: center;
}

.echo-loading span {
  display: block;
  width: 180px;
  height: 1px;
  margin: 0 auto 22px;
  background: linear-gradient(90deg, transparent, var(--echo-signal), transparent);
  animation: echo-scan 1.1s linear infinite;
}

@keyframes echo-scan {
  from { transform: translateX(-60px); opacity: .25; }
  50% { opacity: 1; }
  to { transform: translateX(60px); opacity: .25; }
}

.echo-loading p,
.echo-empty p { color: var(--echo-dim); }
.echo-empty > div { color: var(--echo-signal); font: 10px 'SF Mono', Menlo, monospace; letter-spacing: .16em; }
.echo-empty h2 { margin: 12px 0 8px; font-weight: 520; }

#echo-results {
  background: var(--echo-ink);
}

.echo-identity {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  padding: 56px clamp(28px, 5vw, 80px) 32px;
}

.echo-identity h2 {
  margin: 9px 0 8px;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 520;
  letter-spacing: -.045em;
}

.echo-company-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.echo-company-meta span {
  padding: 5px 8px;
  border: 1px solid var(--echo-line);
  color: var(--echo-dim);
  font: 10px 'SF Mono', Menlo, monospace;
}

.echo-verdict {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 220px;
  padding-bottom: 8px;
}

.echo-verdict-dot {
  width: 13px;
  height: 13px;
  border: 3px solid var(--echo-signal);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--echo-signal-soft);
}

.echo-verdict small {
  display: block;
  color: var(--echo-dim);
  font: 9px 'SF Mono', Menlo, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.echo-verdict strong {
  color: var(--echo-signal);
  font-size: 19px;
  font-weight: 600;
}

.echo-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--echo-line);
  border-bottom: 1px solid var(--echo-line);
}

.echo-stats article {
  min-height: 158px;
  padding: 28px clamp(20px, 3vw, 42px);
  border-right: 1px solid var(--echo-line);
}
.echo-stats article:last-child { border-right: 0; }
.echo-stats span {
  color: var(--echo-dim);
  font: 10px 'SF Mono', Menlo, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.echo-stats strong {
  display: block;
  margin-top: 13px;
  font: 500 clamp(34px, 4vw, 56px)/1 'SF Mono', Menlo, monospace;
  letter-spacing: -.06em;
}
.echo-stats small {
  display: block;
  margin-top: 10px;
  color: var(--muted-2);
  font-size: 11px;
}
.echo-stats .echo-stat-signal strong { color: var(--echo-signal); }

.echo-panel {
  background: var(--echo-panel);
}

.echo-universe-panel {
  --universe-cyan: #69ddff;
  --universe-blue: #6b8cff;
  --universe-violet: #a98cff;
  --universe-ink: #050914;
  padding: 54px clamp(28px, 5vw, 80px) 38px;
  border-bottom: 1px solid var(--echo-line);
  background:
    radial-gradient(circle at 50% -20%, rgba(67, 111, 255, .16), transparent 44%),
    var(--universe-ink);
  color: #f2f7ff;
}

.echo-universe-head {
  align-items: flex-end;
}

.echo-universe-head .echo-section-label { color: rgba(151, 182, 216, .64); }
.echo-universe-head h3 {
  color: #f5f9ff;
  font-size: clamp(27px, 3vw, 38px);
  letter-spacing: -.04em;
}
.echo-universe-head p {
  max-width: 650px;
  color: rgba(187, 206, 229, .66);
}

.echo-universe-reset {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(125, 174, 225, .22);
  border-radius: 999px;
  background: rgba(13, 23, 42, .7);
  color: rgba(211, 230, 250, .82);
  cursor: pointer;
  font: 600 10px 'SF Mono', Menlo, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: border-color .2s, color .2s, background .2s;
}

.echo-universe-reset:hover {
  border-color: rgba(105, 221, 255, .68);
  background: rgba(20, 40, 69, .78);
  color: #fff;
}

.echo-universe-reset span {
  color: var(--universe-cyan);
  font-size: 17px;
  line-height: 1;
}

.echo-universe-shell {
  position: relative;
  height: clamp(540px, 64vw, 720px);
  min-height: 540px;
  margin-top: 30px;
  overflow: hidden;
  border: 1px solid rgba(125, 174, 225, .16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 48%, rgba(61, 100, 190, .12), transparent 22%),
    radial-gradient(circle at 12% 8%, rgba(77, 204, 255, .07), transparent 30%),
    radial-gradient(circle at 88% 92%, rgba(152, 103, 255, .07), transparent 32%),
    #030711;
  box-shadow:
    inset 0 0 80px rgba(20, 49, 88, .16),
    0 26px 80px rgba(0, 0, 0, .25);
  isolation: isolate;
}

.echo-universe-shell::before,
.echo-universe-shell::after {
  position: absolute;
  z-index: 2;
  content: "";
  pointer-events: none;
}

.echo-universe-shell::before {
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, transparent 48%, rgba(0, 2, 8, .52) 100%);
}

.echo-universe-shell::after {
  inset: 0;
  opacity: .22;
  background-image: linear-gradient(rgba(120, 180, 255, .025) 1px, transparent 1px);
  background-size: 100% 4px;
  mix-blend-mode: screen;
}

#echo-universe {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

#echo-universe.dragging { cursor: grabbing; }

.echo-universe-coordinates {
  position: absolute;
  z-index: 4;
  top: 20px;
  right: 22px;
  left: 22px;
  display: flex;
  justify-content: space-between;
  color: rgba(142, 177, 214, .5);
  pointer-events: none;
  font: 600 8px 'SF Mono', Menlo, monospace;
  letter-spacing: .18em;
}

.echo-universe-tooltip {
  position: absolute;
  z-index: 7;
  min-width: 142px;
  padding: 10px 12px;
  border: 1px solid rgba(113, 202, 255, .3);
  border-radius: 10px;
  background: rgba(5, 12, 25, .9);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .42);
  backdrop-filter: blur(16px);
  pointer-events: none;
  color: rgba(216, 233, 250, .72);
  font: 9px/1.55 'SF Mono', Menlo, monospace;
}

.echo-universe-tooltip strong {
  display: block;
  margin-bottom: 3px;
  color: #fff;
  font-size: 12px;
}

.echo-universe-inspector {
  position: absolute;
  z-index: 6;
  bottom: 58px;
  left: 22px;
  width: min(270px, calc(100% - 44px));
  padding: 18px;
  border: 1px solid rgba(117, 178, 228, .22);
  border-radius: 15px;
  background: rgba(7, 15, 29, .78);
  box-shadow: 0 18px 52px rgba(0, 0, 0, .38);
  backdrop-filter: blur(22px) saturate(130%);
}

.echo-universe-inspector-kicker {
  margin-bottom: 9px;
  color: rgba(132, 177, 216, .58);
  font: 600 8px 'SF Mono', Menlo, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.echo-universe-inspector-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.echo-universe-inspector-title strong {
  color: #fff;
  font: 650 22px/1 'SF Mono', Menlo, monospace;
  letter-spacing: -.04em;
}

.echo-universe-inspector-title span {
  color: var(--universe-cyan);
  font: 9px 'SF Mono', Menlo, monospace;
}

.echo-universe-inspector-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 17px;
}

.echo-universe-inspector-stats div {
  padding: 10px;
  border: 1px solid rgba(115, 169, 219, .13);
  border-radius: 9px;
  background: rgba(31, 54, 86, .22);
}

.echo-universe-inspector-stats strong,
.echo-universe-inspector-stats span { display: block; }
.echo-universe-inspector-stats strong {
  color: #f8fbff;
  font: 600 18px 'SF Mono', Menlo, monospace;
}
.echo-universe-inspector-stats span {
  margin-top: 3px;
  color: rgba(160, 190, 220, .52);
  font: 8px 'SF Mono', Menlo, monospace;
  text-transform: uppercase;
}

.echo-universe-inspector > p {
  margin: 12px 0 14px;
  color: rgba(168, 198, 226, .62);
  font: 9px/1.5 'SF Mono', Menlo, monospace;
}

.echo-universe-inspector > button {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(105, 221, 255, .26);
  border-radius: 8px;
  background: rgba(68, 151, 201, .1);
  color: var(--universe-cyan);
  cursor: pointer;
  font: 600 9px 'SF Mono', Menlo, monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.echo-universe-inspector > button:hover {
  border-color: rgba(105, 221, 255, .62);
  background: rgba(68, 151, 201, .18);
}

.echo-universe-legend {
  position: absolute;
  z-index: 5;
  right: 22px;
  bottom: 19px;
  left: 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: rgba(150, 183, 216, .54);
  pointer-events: none;
  font: 8px 'SF Mono', Menlo, monospace;
  text-transform: uppercase;
}

.echo-universe-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.echo-universe-legend i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.echo-legend-core {
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(105, 221, 255, .7);
}
.echo-legend-node {
  border: 1px solid rgba(105, 221, 255, .78);
  background: rgba(105, 221, 255, .28);
}
.echo-legend-flow {
  background: var(--universe-cyan);
  box-shadow: 0 0 6px rgba(105, 221, 255, .8);
}
.echo-universe-legend small {
  margin-left: auto;
  color: rgba(141, 172, 202, .4);
  font: inherit;
}

.echo-chart-panel {
  padding: 58px clamp(28px, 5vw, 80px) 34px;
  border-bottom: 1px solid var(--echo-line);
}

.echo-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
}

.echo-panel-head h3 {
  margin: 10px 0 5px;
  font-size: 25px;
  font-weight: 520;
  letter-spacing: -.025em;
}
.echo-panel-head p { color: var(--echo-dim); font-size: 13px; }

.echo-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.echo-segmented {
  display: flex;
  padding: 3px;
  border: 1px solid var(--echo-line);
  background: var(--echo-ink);
}
.echo-segmented button {
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--echo-dim);
  cursor: pointer;
  font: 9px 'SF Mono', Menlo, monospace;
  text-transform: uppercase;
}
.echo-segmented button.active {
  background: var(--echo-signal);
  color: var(--echo-ink);
}

.echo-chart-wrap {
  position: relative;
  height: 390px;
  margin-top: 34px;
}

#echo-chart {
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.echo-tooltip {
  position: absolute;
  z-index: 3;
  min-width: 146px;
  padding: 11px 12px;
  border: 1px solid var(--echo-line);
  background: var(--echo-ink);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .32);
  pointer-events: none;
  color: var(--echo-paper);
  font: 10px/1.6 'SF Mono', Menlo, monospace;
}
.echo-tooltip strong {
  display: block;
  margin-bottom: 3px;
  color: var(--echo-signal);
  font-size: 12px;
}

.echo-chart-foot {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--echo-line);
  color: var(--muted-2);
  font: 9px 'SF Mono', Menlo, monospace;
  text-transform: uppercase;
}
.echo-chart-foot span:first-child { color: var(--echo-dim); }
.echo-chart-foot i {
  display: inline-block;
  width: 18px;
  height: 1px;
  margin: 0 7px 3px 0;
  background: var(--echo-signal);
}

.echo-grid {
  display: grid;
  grid-template-columns: minmax(320px, .78fr) minmax(420px, 1.22fr);
}

.echo-grid > .echo-panel {
  padding: 52px clamp(24px, 4vw, 58px);
  border-bottom: 1px solid var(--echo-line);
}
.echo-grid > .echo-panel:first-child { border-right: 1px solid var(--echo-line); }

.echo-leaders { margin-top: 28px; }
.echo-leader {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  width: 100%;
  align-items: center;
  gap: 13px;
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--echo-line);
  background: transparent;
  color: inherit;
  cursor: default;
  text-align: left;
}
.echo-leader-rank {
  color: var(--muted-2);
  font: 10px 'SF Mono', Menlo, monospace;
}
.echo-leader-body { display: block; min-width: 0; }
.echo-leader-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  font: 600 13px 'SF Mono', Menlo, monospace;
}
.echo-leader-name small { color: var(--echo-dim); font-size: 9px; font-weight: 400; }
.echo-leader-track {
  display: block;
  height: 2px;
  background: var(--echo-line);
}
.echo-leader-track span {
  display: block;
  height: 100%;
  background: var(--echo-signal);
  transform-origin: left;
  animation: echo-grow .7s ease-out both;
}
@keyframes echo-grow { from { transform: scaleX(0); } }
.echo-leader-count {
  color: var(--echo-paper);
  font: 12px 'SF Mono', Menlo, monospace;
}

.echo-quotes { margin-top: 28px; }
.echo-quote {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--echo-line);
  color: inherit;
  text-decoration: none;
}
.echo-quote:hover { text-decoration: none; }
.echo-quote-meta {
  color: var(--echo-dim);
  font: 9px/1.7 'SF Mono', Menlo, monospace;
}
.echo-quote-meta strong {
  display: block;
  color: var(--echo-signal);
  font-size: 11px;
}
.echo-quote blockquote {
  margin: 0;
  color: var(--echo-dim);
  font-size: 14px;
  line-height: 1.65;
}
.echo-quote:hover blockquote { color: var(--echo-paper); }
.echo-quote mark {
  padding: 1px 3px;
  background: var(--echo-signal-soft);
  color: var(--echo-signal);
}

.echo-quote-open {
  display: block;
  margin-top: 9px;
  color: var(--echo-signal);
  font: 10px 'SF Mono', Menlo, monospace;
}

.echo-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--echo-line);
}

.echo-pagination button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--echo-line);
  border-radius: 6px;
  background: var(--echo-panel-2);
  color: var(--echo-paper);
  cursor: pointer;
  font-size: 11px;
}

.echo-pagination button:first-child { justify-self: start; }
.echo-pagination button:last-child { justify-self: end; }
.echo-pagination button:hover:not(:disabled) {
  border-color: var(--echo-signal);
  color: var(--echo-signal);
}
.echo-pagination button:disabled { opacity: .35; cursor: default; }
.echo-pagination span {
  color: var(--echo-dim);
  font: 10px 'SF Mono', Menlo, monospace;
}
.echo-quotes.loading { opacity: .45; }

.echo-method {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 26px;
  align-items: start;
  padding: 32px clamp(28px, 5vw, 80px);
  background: var(--echo-ink);
  color: var(--echo-dim);
  font-size: 11px;
}
.echo-method > span {
  color: var(--echo-signal);
  font: 9px 'SF Mono', Menlo, monospace;
  letter-spacing: .14em;
}
.echo-method p { max-width: 760px; }
.echo-method a {
  color: var(--echo-paper);
  font: 10px 'SF Mono', Menlo, monospace;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .echo-hero { grid-template-columns: 1fr; }
  .echo-stats { grid-template-columns: repeat(2, 1fr); }
  .echo-stats article:nth-child(2) { border-right: 0; }
  .echo-stats article:nth-child(-n+2) { border-bottom: 1px solid var(--echo-line); }
  .echo-grid { grid-template-columns: 1fr; }
  .echo-grid > .echo-panel:first-child { border-right: 0; }
  .echo-panel-head { display: block; }
  .echo-controls { justify-content: flex-start; margin-top: 22px; }
  .echo-universe-reset { margin-top: 20px; }
}

@media (max-width: 620px) {
  .echo-hero { padding: 30px 20px 24px; }
  .echo-hero h1 { font-size: 32px; }
  .echo-search button span:first-child { display: none; }
  .echo-identity { display: block; padding: 38px 20px 24px; }
  .echo-verdict { margin-top: 24px; }
  .echo-stats { grid-template-columns: 1fr 1fr; }
  .echo-stats article { min-height: 132px; padding: 22px 20px; }
  .echo-stats strong { font-size: 34px; }
  .echo-chart-panel { padding: 42px 20px 26px; }
  .echo-chart-wrap { height: 310px; }
  .echo-universe-panel { padding: 42px 20px 24px; }
  .echo-universe-shell {
    height: 540px;
    min-height: 540px;
    margin-top: 24px;
    border-radius: 16px;
  }
  .echo-universe-coordinates { top: 16px; right: 16px; left: 16px; }
  .echo-universe-legend {
    right: 16px;
    bottom: 15px;
    left: 16px;
    gap: 12px;
  }
  .echo-universe-legend span:nth-child(2) { display: none; }
  .echo-universe-legend small { display: none; }
  .echo-universe-inspector { bottom: 48px; left: 16px; }
  .echo-grid > .echo-panel { padding: 42px 20px; }
  .echo-quote { grid-template-columns: 68px minmax(0, 1fr); gap: 13px; }
  .echo-method { grid-template-columns: 1fr; padding: 28px 20px; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .echo-loading span,
  .echo-leader-track span { animation: none; }
  .echo-universe-shell::after { display: none; }
}