:root {
  color-scheme: dark;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0b0f11;
  color: #f4f7f8;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(180deg, rgba(11, 15, 17, 0.5), #101214 660px),
    linear-gradient(90deg, rgba(11, 15, 17, 0.88), rgba(11, 15, 17, 0.36) 54%, #101214 100%),
    url("/images/hero-background.png") top center / min(1774px, 126vw) auto no-repeat,
    #101214;
}

a {
  color: inherit;
}

.shell {
  width: min(1120px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 24px 0 36px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 54px;
  margin-bottom: 34px;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  max-width: min(300px, 58vw);
}

.brand-lockup img {
  display: block;
  width: 100%;
  height: auto;
}

.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.eyebrow {
  margin: 0 0 6px;
  color: #73d9c2;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  max-width: 760px;
  font-size: 4.4rem;
  line-height: 0.98;
  letter-spacing: 0;
}

h2 {
  font-size: 1.05rem;
  letter-spacing: 0;
}

.cta,
.secondary-cta,
.text-cta,
.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(115, 217, 194, 0.45);
  border-radius: 8px;
  background: #73d9c2;
  color: #101214;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    background 160ms ease;
}

.text-button {
  background: transparent;
  border-color: #4b595e;
  color: #dce5e8;
  cursor: pointer;
}

button:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.cta:hover,
.secondary-cta:hover,
.text-cta:hover,
.text-button:hover,
.cta:focus-visible,
.secondary-cta:focus-visible,
.text-cta:focus-visible,
.text-button:focus-visible {
  outline: none;
  border-color: rgba(115, 217, 194, 0.78);
  box-shadow: 0 0 0 3px rgba(115, 217, 194, 0.1), 0 0 22px rgba(115, 217, 194, 0.14);
  transform: translateY(-1px);
}

.secondary-cta:hover,
.secondary-cta:focus-visible {
  border-color: rgba(255, 209, 102, 0.82);
  box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.1), 0 0 24px rgba(255, 209, 102, 0.18);
}

.hero-panel {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  min-height: 274px;
  padding: 24px 0 26px;
}

.hero-copy p:not(.eyebrow) {
  max-width: 640px;
  margin-top: 14px;
  color: #c8d3d7;
  font-size: 1.08rem;
  line-height: 1.55;
}

.status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid #2b3235;
  border-radius: 8px;
  background: #2b3235;
  margin-bottom: 16px;
}

.status-strip > div {
  min-height: 72px;
  padding: 16px;
  background: #171b1e;
}

body.scan-updated .status-strip {
  animation: scanUpdated 1100ms ease;
}

.label {
  display: block;
  margin-bottom: 6px;
  color: #95a3a8;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

#data-status[data-state="fresh"] {
  color: #73d9c2;
}

#data-status[data-state="stale"],
#data-status[data-state="error"] {
  color: #ffd166;
}

.refresh-countdown {
  display: block;
  margin-top: 5px;
  color: #95a3a8;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.market-pulse {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.market-pulse article {
  min-height: 112px;
  padding: 14px;
  border: 1px solid #2b3235;
  border-radius: 8px;
  background: #171b1e;
  transition:
    border-color 160ms ease,
    transform 160ms ease,
    background 160ms ease;
}

.market-pulse article:hover {
  border-color: rgba(115, 217, 194, 0.36);
  transform: translateY(-1px);
}

.market-pulse article[data-tone="fresh"] {
  border-color: rgba(115, 217, 194, 0.5);
  background: linear-gradient(145deg, rgba(115, 217, 194, 0.1), rgba(23, 27, 30, 0.92));
}

.market-pulse article[data-tone="warning"] {
  border-color: rgba(255, 209, 102, 0.5);
  background: linear-gradient(145deg, rgba(255, 209, 102, 0.1), rgba(23, 27, 30, 0.92));
}

.market-pulse strong {
  display: block;
  margin-bottom: 8px;
  color: #f4f7f8;
  font-size: 1.3rem;
}

.market-pulse p {
  color: #b8c5ca;
  line-height: 1.45;
}

.radar-panel {
  overflow: hidden;
  border: 1px solid #2b3235;
  border-radius: 8px;
  background: #171b1e;
}

.spotlight-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) 126px minmax(260px, 0.8fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid #344044;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(115, 217, 194, 0.12), rgba(255, 209, 102, 0.08)),
    #171b1e;
}

.spotlight-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 8px;
}

.spotlight-title h2 {
  font-size: 2.2rem;
}

.spotlight-title strong {
  color: #ffd166;
  font-size: 2rem;
}

.spotlight-copy p:not(.eyebrow) {
  color: #c8d3d7;
  line-height: 1.5;
}

.fingerprint-feature {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #95a3a8;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.velocity-fingerprint {
  display: block;
  color: #73d9c2;
  animation: fingerprintEnter 720ms ease both;
}

.velocity-fingerprint line {
  stroke: rgba(115, 217, 194, 0.22);
  stroke-width: 1;
}

.fingerprint-ring {
  fill: none;
  stroke: rgba(115, 217, 194, 0.18);
  stroke-width: 1;
}

.fingerprint-ring.outer {
  stroke: rgba(115, 217, 194, 0.42);
}

.fingerprint-shape {
  fill: rgba(115, 217, 194, 0.18);
  stroke: #73d9c2;
  stroke-linejoin: round;
  stroke-width: 2;
  transform-origin: center;
  animation: fingerprintShape 820ms ease both;
}

.fingerprint-node,
.fingerprint-core {
  fill: #73d9c2;
  filter: drop-shadow(0 0 5px rgba(115, 217, 194, 0.65));
}

.fingerprint-risk {
  fill: #ffd166;
  filter: drop-shadow(0 0 7px rgba(255, 209, 102, 0.55));
}

.fingerprint-mini {
  width: 58px;
  height: 58px;
}

.fingerprint-large {
  width: 116px;
  height: 116px;
}

.fingerprint-detail {
  width: 164px;
  height: 164px;
}

.signal-map {
  display: grid;
  grid-template-columns: minmax(0, 0.56fr) minmax(420px, 1fr) minmax(190px, 0.4fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid #344044;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(115, 217, 194, 0.08), rgba(16, 20, 22, 0.92)),
    #171b1e;
}

.signal-map-copy p:not(.eyebrow),
.signal-map-legend {
  color: #b8c5ca;
  line-height: 1.5;
}

.signal-map-copy p:not(.eyebrow) {
  margin-top: 8px;
}

.quadrant-wrap {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid #2b3235;
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(149, 163, 168, 0.22) 50%, transparent 50.2%),
    linear-gradient(0deg, transparent 49.8%, rgba(149, 163, 168, 0.22) 50%, transparent 50.2%),
    radial-gradient(circle at 74% 24%, rgba(255, 209, 102, 0.14), transparent 30%),
    radial-gradient(circle at 28% 28%, rgba(115, 217, 194, 0.16), transparent 33%),
    #101416;
}

.quadrant-wrap::before {
  position: absolute;
  inset: 16px;
  border: 1px dashed rgba(115, 217, 194, 0.18);
  border-radius: 8px;
  content: "";
}

.zone-label,
.axis-label {
  position: absolute;
  z-index: 1;
  color: #95a3a8;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.zone-clean {
  left: 18px;
  top: 16px;
  color: #73d9c2;
}

.zone-pressure {
  right: 18px;
  top: 16px;
  color: #ffd166;
}

.zone-quiet {
  left: 18px;
  bottom: 30px;
}

.zone-thin {
  right: 18px;
  bottom: 30px;
  color: #ffb4a8;
}

.axis-y {
  left: 18px;
  top: 50%;
  transform: rotate(-90deg) translateX(-50%);
  transform-origin: left top;
}

.axis-x {
  right: 18px;
  bottom: 8px;
}

.map-token {
  position: absolute;
  left: var(--x);
  bottom: var(--y);
  z-index: var(--z, 2);
  min-width: 44px;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(115, 217, 194, 0.48);
  border-radius: 999px;
  background: rgba(16, 20, 22, 0.88);
  color: #f4f7f8;
  font-size: 0.72rem;
  font-weight: 900;
  transform: translate(-50%, 50%);
  cursor: pointer;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.map-token::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 999px;
  background: #73d9c2;
  box-shadow: 0 0 9px rgba(115, 217, 194, 0.8);
  content: "";
}

.map-token:hover,
.map-token:focus-visible {
  outline: none;
  border-color: #ffd166;
  box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.1), 0 0 20px rgba(255, 209, 102, 0.18);
  transform: translate(-50%, 50%) scale(1.04);
}

.map-token-locked span {
  filter: blur(2px);
}

.map-token-locked::before {
  background: #ffd166;
  box-shadow: 0 0 9px rgba(255, 209, 102, 0.7);
}

.signal-map-legend {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid #2b3235;
  border-radius: 8px;
  background: #101416;
}

.signal-map-legend strong {
  color: #f4f7f8;
}

.signal-map-legend span {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.signal-map-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #73d9c2;
}

.signal-map-legend i[data-tone="pressure"],
.signal-map-legend i[data-tone="locked"] {
  background: #ffd166;
}

.map-readout {
  display: grid;
  gap: 4px;
  margin-top: 4px;
  padding: 10px;
  border: 1px solid rgba(115, 217, 194, 0.26);
  border-radius: 8px;
  background: rgba(115, 217, 194, 0.06);
}

.map-readout small {
  color: #95a3a8;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.map-readout strong {
  color: #73d9c2;
}

.map-readout span {
  display: block;
  color: #dce5e8;
}

.radar-replay {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid #344044;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 209, 102, 0.06), rgba(16, 20, 22, 0.94)),
    #171b1e;
}

.replay-copy p:not(.eyebrow) {
  margin-top: 8px;
  color: #b8c5ca;
  line-height: 1.5;
}

.replay-controls {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}

.replay-controls .text-button {
  min-height: 36px;
  padding: 0 12px;
}

.replay-controls input {
  accent-color: #73d9c2;
}

.replay-controls span {
  color: #95a3a8;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.replay-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.replay-stats span {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #2b3235;
  border-radius: 8px;
  background: #101416;
  color: #95a3a8;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.replay-stats strong {
  color: #f4f7f8;
  font-size: 1rem;
  text-transform: none;
}

.replay-board {
  display: grid;
  gap: 8px;
}

.replay-lane {
  display: grid;
  grid-template-columns: 112px minmax(190px, 1fr) 96px;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 10px 12px;
  border: 1px solid #2b3235;
  border-radius: 8px;
  background: #101416;
  color: #dce5e8;
  text-align: left;
  cursor: pointer;
}

.replay-lane:hover,
.replay-lane:focus-visible {
  outline: none;
  border-color: rgba(115, 217, 194, 0.55);
  background: #151b1d;
}

.replay-token,
.replay-delta {
  display: grid;
  gap: 3px;
}

.replay-token small,
.replay-delta {
  color: #95a3a8;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.rank-replay {
  display: block;
  width: 100%;
  height: 58px;
}

.rank-replay line {
  stroke: rgba(149, 163, 168, 0.18);
  stroke-width: 1;
}

.rank-replay path {
  fill: none;
  stroke: #73d9c2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.rank-replay circle {
  fill: #ffd166;
  filter: drop-shadow(0 0 6px rgba(255, 209, 102, 0.55));
}

.replay-empty {
  display: grid;
  min-height: 44px;
  place-items: center;
  border: 1px dashed #344044;
  border-radius: 8px;
  color: #95a3a8;
  font-size: 0.78rem;
}

.spotlight-bars,
.score-bars {
  display: grid;
  gap: 9px;
}

.score-bar {
  display: grid;
  grid-template-columns: 88px 52px minmax(100px, 1fr);
  align-items: center;
  gap: 10px;
  color: #b8c5ca;
  font-size: 0.86rem;
  font-weight: 700;
}

.score-bar strong {
  color: #f4f7f8;
  text-align: right;
}

.score-bar i,
.metric-with-bar i {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #263136;
}

.score-bar i::before,
.metric-with-bar i::before {
  display: block;
  width: var(--heat);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #73d9c2, #ffd166);
  content: "";
}

.table-head,
.token-row {
  display: grid;
  grid-template-columns: 72px 72px minmax(180px, 1.45fr) repeat(5, minmax(96px, 1fr));
  align-items: center;
  gap: 12px;
}

.table-head {
  min-height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid #2b3235;
  color: #95a3a8;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.token-list {
  min-height: 420px;
}

.token-row {
  position: relative;
  min-height: 70px;
  padding: 12px 16px;
  border-bottom: 1px solid #242b2e;
  color: #dce5e8;
  transition:
    background 150ms ease,
    box-shadow 150ms ease;
}

.token-row:last-child {
  border-bottom: 0;
}

.token-row[tabindex] {
  cursor: pointer;
}

.token-row[tabindex]:hover,
.token-row[tabindex]:focus-visible {
  outline: none;
  background: #1e2528;
  box-shadow: inset 3px 0 0 rgba(115, 217, 194, 0.55);
}

.archive-panel {
  overflow-x: auto;
}

.archive-table-head,
.archive-row {
  display: grid;
  grid-template-columns:
    minmax(112px, 0.8fr)
    minmax(150px, 1.1fr)
    minmax(86px, 0.65fr)
    minmax(160px, 1fr)
    repeat(3, minmax(130px, 1fr));
  align-items: center;
  gap: 16px;
}

.archive-table-head {
  min-width: 930px;
  min-height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid #2b3235;
  color: #95a3a8;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.archive-list {
  min-height: 220px;
}

.archive-row {
  min-width: 930px;
  min-height: 74px;
  padding: 14px 16px;
  border-bottom: 1px solid #242b2e;
  color: #dce5e8;
}

.archive-row:last-child {
  border-bottom: 0;
}

.archive-row > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.archive-date,
.archive-score {
  color: #73d9c2;
  font-weight: 900;
}

.archive-date {
  white-space: nowrap;
}

.archive-score {
  color: #ffd166;
}

.archive-leader {
  display: grid;
  gap: 3px;
}

.archive-leader small {
  color: #95a3a8;
}

.archive-empty {
  color: #95a3a8;
}

.locked-row > span:not(.rank):not(.locked-overlay) {
  filter: blur(3px);
  opacity: 0.72;
  user-select: none;
}

.locked-overlay {
  position: absolute;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255, 209, 102, 0.55);
  border-radius: 8px;
  background: #ffd166;
  color: #101214;
  font-size: 0.78rem;
  font-weight: 900;
}

.rank {
  color: #73d9c2;
  font-weight: 900;
}

.token-signal {
  display: flex;
  justify-content: center;
}

.token-name {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.token-name strong,
.token-name small {
  overflow-wrap: anywhere;
  white-space: normal;
}

.token-name small {
  color: #95a3a8;
}

.pin-button {
  justify-self: start;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(115, 217, 194, 0.3);
  border-radius: 999px;
  background: rgba(115, 217, 194, 0.08);
  color: #73d9c2;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.pin-button[aria-pressed="true"] {
  border-color: rgba(255, 209, 102, 0.55);
  color: #ffd166;
}

.score {
  color: #ffd166;
  font-weight: 900;
}

.metric-with-bar {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.metric-with-bar strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sparkline-mini,
.sparkline-large {
  display: block;
  width: 100%;
}

.sparkline-mini {
  height: 28px;
}

.sparkline-large {
  min-height: 120px;
  margin-top: 12px;
  border: 1px solid #2b3235;
  border-radius: 8px;
  background: #171b1e;
}

.sparkline-mini path,
.sparkline-large path {
  fill: none;
  stroke: #73d9c2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.sparkline-empty {
  display: grid;
  min-height: 42px;
  place-items: center;
  border: 1px dashed #344044;
  border-radius: 8px;
  color: #95a3a8;
  font-size: 0.78rem;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.badge-row.compact {
  margin-top: 4px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid rgba(115, 217, 194, 0.28);
  border-radius: 999px;
  background: rgba(115, 217, 194, 0.08);
  color: #73d9c2;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.error-row {
  color: #ffb4a8;
}

.conversion-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid #344044;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(115, 217, 194, 0.08), rgba(255, 209, 102, 0.08)),
    #20272a;
}

.gated-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.9fr) auto;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid #344044;
  border-radius: 8px;
  background: #171b1e;
}

.advanced-lockers,
.daily-recap,
.share-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 18px;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid #344044;
  border-radius: 8px;
  background: #171b1e;
}

.watchlist-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid #344044;
  border-radius: 8px;
  background: #171b1e;
}

.watchlist-items {
  display: grid;
  gap: 8px;
}

.watchlist-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #2b3235;
  border-radius: 8px;
  background: #101416;
}

.watchlist-item span {
  display: grid;
  gap: 3px;
}

.watchlist-item small {
  color: #95a3a8;
}

.advanced-lockers p,
.daily-recap p,
.share-panel p {
  margin-top: 6px;
  color: #b8c5ca;
  line-height: 1.5;
}

.advanced-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.advanced-card,
.advanced-signal {
  display: grid;
  gap: 8px;
  min-height: 132px;
  padding: 14px;
  border: 1px solid #2b3235;
  border-radius: 8px;
  background: #101416;
  color: #f4f7f8;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    transform 150ms ease;
}

.advanced-card:hover,
.advanced-card:focus-visible,
.advanced-signal:hover,
.advanced-signal:focus-visible {
  outline: none;
  border-color: rgba(255, 209, 102, 0.4);
  background: #151b1d;
  transform: translateY(-1px);
}

.advanced-card strong,
.advanced-signal strong {
  color: #ffd166;
  text-transform: capitalize;
}

.advanced-card p,
.advanced-signal small {
  color: #b8c5ca;
  line-height: 1.45;
}

.locked-card p,
.locked-card small {
  filter: blur(2px);
}

.recap-list,
.reason-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding-left: 20px;
  color: #dce5e8;
  line-height: 1.45;
}

.mover-list {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
  border: 1px solid #2b3235;
  border-radius: 8px;
  background: #101416;
}

.mover-list span:not(.label) {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #b8c5ca;
}

.gated-copy p,
.score-explainer p,
.detail-gate p {
  margin-top: 6px;
  color: #b8c5ca;
  line-height: 1.5;
}

.blurred-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  padding: 14px;
  border: 1px solid #2b3235;
  border-radius: 8px;
  background: #101416;
  color: #95a3a8;
  filter: blur(3px);
  user-select: none;
}

.blurred-metrics strong {
  color: #ffd166;
}

.blurred-metrics.compact {
  margin: 12px 0;
}

.conversion-band p {
  max-width: 760px;
  margin-top: 6px;
  color: #b8c5ca;
  line-height: 1.5;
}

.secondary-cta {
  background: #ffd166;
  border-color: rgba(255, 209, 102, 0.6);
}

.text-cta {
  background: transparent;
  border-color: #4b595e;
  color: #dce5e8;
}

.conversion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

footer {
  margin-top: 18px;
  color: #95a3a8;
  font-size: 0.82rem;
  line-height: 1.5;
}

.token-dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 28px));
  overflow: auto;
  padding: 22px;
  border: 1px solid #344044;
  border-radius: 8px;
  background: #171b1e;
  color: #f4f7f8;
}

.token-dialog::backdrop {
  background: rgba(0, 0, 0, 0.72);
}

.token-dialog form {
  display: flex;
  justify-content: flex-end;
}

.icon-button {
  width: 36px;
  height: 36px;
  border: 1px solid #344044;
  border-radius: 8px;
  background: #20272a;
  color: #f4f7f8;
  font-size: 1.25rem;
  cursor: pointer;
}

.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.detail-header h2 {
  font-size: 1.5rem;
}

.detail-header small {
  display: block;
  margin-top: 4px;
  color: #95a3a8;
  font-size: 0.9rem;
  font-weight: 500;
}

.detail-score {
  color: #ffd166;
  font-size: 2rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 0 0 16px;
  border: 1px solid #2b3235;
  border-radius: 8px;
  background: #2b3235;
}

.detail-grid div {
  padding: 14px;
  background: #101416;
}

.detail-grid dt {
  color: #95a3a8;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.detail-grid dd {
  margin: 5px 0 0;
  color: #f4f7f8;
  font-weight: 800;
}

.score-explainer,
.detail-gate,
.risk-panel,
.history-panel,
.checklist-panel,
.fingerprint-panel {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #2b3235;
  border-radius: 8px;
  background: #101416;
}

.fingerprint-panel {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.fingerprint-panel-art {
  display: grid;
  place-items: center;
  min-height: 184px;
  border: 1px solid rgba(115, 217, 194, 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at center, rgba(115, 217, 194, 0.12), transparent 62%),
    #171b1e;
}

.fingerprint-panel p:not(.eyebrow) {
  margin-top: 8px;
  color: #b8c5ca;
  line-height: 1.5;
}

.fingerprint-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.fingerprint-readout span {
  min-height: 26px;
  padding: 5px 8px;
  border: 1px solid rgba(115, 217, 194, 0.26);
  border-radius: 999px;
  background: rgba(115, 217, 194, 0.08);
  color: #dce5e8;
  font-size: 0.76rem;
  font-weight: 800;
}

.risk-panel {
  display: grid;
  gap: 10px;
}

.risk-panel p {
  color: #b8c5ca;
}

.history-panel p {
  margin-top: 10px;
  color: #b8c5ca;
}

.red-flag-checklist {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.check-item {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #344044;
  border-left: 4px solid #73d9c2;
  border-radius: 8px;
  background: #171b1e;
}

.check-item[data-state="watch"] {
  border-left-color: #ffd166;
}

.check-item span {
  color: #b8c5ca;
}

.risk-flag {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #344044;
  border-left: 4px solid #73d9c2;
  border-radius: 8px;
  background: #171b1e;
}

.risk-flag[data-level="medium"] {
  border-left-color: #ffd166;
}

.risk-flag[data-level="high"] {
  border-left-color: #ff8f70;
}

.risk-flag span {
  color: #b8c5ca;
}

.advanced-signal-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.advanced-signal {
  min-height: 116px;
}

.locked-modal-body {
  display: grid;
  gap: 14px;
}

.locked-modal-body p {
  color: #c8d3d7;
  line-height: 1.5;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

@keyframes fingerprintEnter {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fingerprintShape {
  from {
    opacity: 0;
    transform: scale(0.82);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scanUpdated {
  0% {
    box-shadow: 0 0 0 rgba(115, 217, 194, 0);
  }
  35% {
    box-shadow: 0 0 0 3px rgba(115, 217, 194, 0.15), 0 0 32px rgba(115, 217, 194, 0.18);
  }
  100% {
    box-shadow: 0 0 0 rgba(115, 217, 194, 0);
  }
}

@media (max-width: 820px) {
  body {
    background:
      linear-gradient(180deg, rgba(11, 15, 17, 0.42), #101214 620px),
      linear-gradient(90deg, rgba(11, 15, 17, 0.86), rgba(11, 15, 17, 0.42)),
      url("/images/mobile-hero-background.png") top right / min(900px, 148vw) auto no-repeat,
      #101214;
  }

  .topbar,
  .topbar-actions,
  .conversion-band,
  .gated-panel,
  .spotlight-panel,
  .signal-map,
  .radar-replay,
  .advanced-lockers,
  .daily-recap,
  .share-panel,
  .watchlist-panel {
    align-items: stretch;
    display: flex;
    flex-direction: column;
  }

  h1 {
    font-size: 2.6rem;
  }

  .brand-lockup {
    max-width: 230px;
  }

  .hero-panel {
    min-height: 296px;
    padding-top: 10px;
  }

  .hero-copy p:not(.eyebrow) {
    font-size: 1rem;
  }

  .status-strip {
    grid-template-columns: 1fr;
  }

  .market-pulse {
    grid-template-columns: 1fr;
  }

  .watchlist-item {
    grid-template-columns: 1fr;
  }

  .replay-stats,
  .replay-controls,
  .replay-lane {
    grid-template-columns: 1fr;
  }

  .radar-panel {
    overflow-x: auto;
  }

  .table-head,
  .token-row {
    min-width: 940px;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .quadrant-wrap {
    min-height: 280px;
  }

  .fingerprint-panel {
    grid-template-columns: 1fr;
  }

  .advanced-grid,
  .advanced-signal-list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

}

/* Redesign experiment: live scan control-room layer. */
:root {
  --bg-primary: #080b10;
  --bg-secondary: #0d1117;
  --bg-tertiary: #161b22;
  --surface-raised: rgba(18, 24, 32, 0.86);
  --border-color: rgba(112, 132, 152, 0.22);
  --border-strong: rgba(0, 255, 136, 0.36);
  --text-primary: #e6edf3;
  --text-secondary: #9ca8b5;
  --text-muted: #63707c;
  --accent-green: #00ff88;
  --accent-cyan: #5eead4;
  --accent-amber: #ffb800;
  --accent-red: #ff4455;
  --accent-purple: #a371f7;
  --accent-blue: #58a6ff;
  --glow-green: 0 0 20px rgba(0, 255, 136, 0.24);
  --glow-purple: 0 0 28px rgba(163, 113, 247, 0.24);
  --font-ui: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --radius: 8px;
  color-scheme: dark;
  font-family: var(--font-ui);
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  background:
    linear-gradient(180deg, rgba(8, 11, 16, 0.42), var(--bg-primary) 680px),
    linear-gradient(90deg, rgba(8, 11, 16, 0.94), rgba(8, 11, 16, 0.5) 52%, var(--bg-primary)),
    url("/images/hero-background.png") top center / min(1800px, 128vw) auto no-repeat,
    var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-ui);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(94, 234, 212, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 234, 212, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.86), transparent 78%);
  content: "";
}

.shell {
  width: min(1280px, calc(100vw - 32px));
  padding: 16px 0 42px;
}

.topbar {
  position: sticky;
  top: 12px;
  z-index: 100;
  min-height: 64px;
  margin-bottom: 24px;
  padding: 10px 12px;
  border: 1px solid rgba(112, 132, 152, 0.18);
  border-radius: var(--radius);
  background: rgba(8, 11, 16, 0.72);
  backdrop-filter: blur(18px);
}

.brand-lockup {
  max-width: min(280px, 48vw);
}

.topbar-actions {
  align-items: center;
}

.eyebrow,
.label,
.refresh-countdown,
.ticket-serial,
.token-posture,
.replay-controls span,
.replay-token small,
.replay-delta,
.badge,
.pin-button {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.eyebrow,
.label {
  color: var(--accent-cyan);
}

.cta,
.secondary-cta,
.text-cta,
.text-button {
  min-height: 42px;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0;
}

.cta {
  border-color: rgba(0, 255, 136, 0.54);
  background: linear-gradient(135deg, var(--accent-green), var(--accent-cyan));
  color: #05100b;
  box-shadow: var(--glow-green);
}

.secondary-cta {
  border-color: rgba(163, 113, 247, 0.6);
  background: linear-gradient(135deg, #6e40c9, var(--accent-purple));
  color: white;
  box-shadow: var(--glow-purple);
}

.text-cta,
.text-button {
  border-color: rgba(112, 132, 152, 0.38);
  background: rgba(13, 17, 23, 0.72);
  color: var(--text-primary);
}

.cta:hover,
.secondary-cta:hover,
.text-cta:hover,
.text-button:hover,
.cta:focus-visible,
.secondary-cta:focus-visible,
.text-cta:focus-visible,
.text-button:focus-visible {
  border-color: rgba(0, 255, 136, 0.7);
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1), var(--glow-green);
  transform: translateY(-1px);
}

.scan-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr);
  gap: 24px;
  align-items: end;
  min-height: clamp(420px, 55vh, 620px);
  padding: 34px 0 22px;
}

.hero-copy {
  display: grid;
  align-content: end;
  gap: 14px;
  max-width: 850px;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(0, 255, 136, 0.28);
  border-radius: 999px;
  background: rgba(0, 255, 136, 0.08);
  color: var(--text-secondary);
}

.live-pill strong {
  color: var(--accent-green);
}

.live-pill[data-state="stale"] {
  border-color: rgba(255, 184, 0, 0.34);
  background: rgba(255, 184, 0, 0.08);
}

.live-pill[data-state="stale"] strong {
  color: var(--accent-amber);
}

.live-pill[data-state="stale"] .live-dot {
  background: var(--accent-amber);
  box-shadow: 0 0 12px rgba(255, 184, 0, 0.75);
}

.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--accent-green);
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.85);
  animation: livePulse 1500ms ease-in-out infinite;
}

.scan-hero h1 {
  max-width: 840px;
  font-size: clamp(2.45rem, 6vw, 5.8rem);
  line-height: 0.96;
  text-wrap: balance;
}

.hero-copy p:not(.eyebrow) {
  max-width: 720px;
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
}

.hero-actions,
.ticket-actions,
.spotlight-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.signal-ticket {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  padding: 20px;
  border: 1px solid rgba(0, 255, 136, 0.26);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(163, 113, 247, 0.14)),
    rgba(13, 17, 23, 0.76);
  box-shadow: var(--glow-green);
}

.signal-ticket::before {
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(94, 234, 212, 0.2);
  border-radius: 6px;
  content: "";
  pointer-events: none;
}

.ticket-topline,
.token-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ticket-serial {
  color: var(--text-muted);
  font-size: 0.74rem;
}

.ticket-token {
  display: grid;
  gap: 4px;
  margin-top: 28px;
}

.ticket-token span,
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--accent-green);
  color: #06120d;
  font-family: var(--font-mono);
  font-weight: 800;
}

.ticket-token strong {
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1;
}

.ticket-token small,
.signal-ticket p,
.unlock-sub,
.context-hook p,
.dashboard-header p {
  color: var(--text-secondary);
  line-height: 1.5;
}

.ticket-score {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 18px 0 10px;
}

.ticket-score strong {
  color: var(--accent-amber);
  font-family: var(--font-mono);
  font-size: 3rem;
  line-height: 1;
  text-shadow: 0 0 18px rgba(255, 184, 0, 0.26);
}

.ticket-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.ticket-tags span,
.read-state,
.boost-chip,
.legend-row span {
  border: 1px solid rgba(112, 132, 152, 0.28);
  border-radius: 999px;
  background: rgba(13, 17, 23, 0.62);
}

.ticket-tags span {
  padding: 6px 9px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
}

.potion-feature-list {
  display: grid;
  gap: 7px;
  margin: 14px 0 0;
  padding: 0;
  color: var(--text-secondary);
  list-style: none;
}

.potion-feature-list li {
  position: relative;
  padding-left: 18px;
  line-height: 1.45;
}

.potion-feature-list li::before {
  position: absolute;
  left: 0;
  color: var(--accent-green);
  content: "+";
}

.ticket-grid {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: grid;
  grid-template-columns: 1fr 0.74fr 0.52fr;
  gap: 8px;
  opacity: 0.24;
  pointer-events: none;
}

.ticket-grid span {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-green), var(--accent-purple));
}

.scan-console {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.status-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-color: var(--border-color);
  background: rgba(112, 132, 152, 0.18);
}

.status-strip > div,
.market-pulse article,
.context-hook,
.advanced-lockers,
.daily-recap,
.share-panel,
.watchlist-panel,
.gated-panel,
.conversion-band,
.radar-panel,
.spotlight-panel,
.signal-map,
.radar-replay {
  border-color: var(--border-color);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(94, 234, 212, 0.045), rgba(163, 113, 247, 0.035)),
    var(--surface-raised);
}

.status-strip > div {
  min-height: 78px;
}

.status-strip strong,
.market-pulse strong {
  font-family: var(--font-mono);
}

#data-status[data-state="fresh"] {
  color: var(--accent-green);
}

#data-status[data-state="stale"],
#data-status[data-state="error"] {
  color: var(--accent-amber);
}

.market-pulse {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.market-pulse article {
  min-height: 112px;
  padding: 14px;
}

.market-pulse article[data-tone="fresh"] {
  border-color: rgba(0, 255, 136, 0.38);
  background: linear-gradient(145deg, rgba(0, 255, 136, 0.1), rgba(13, 17, 23, 0.88));
}

.market-pulse article[data-tone="warning"] {
  border-color: rgba(255, 68, 85, 0.38);
  background: linear-gradient(145deg, rgba(255, 68, 85, 0.09), rgba(13, 17, 23, 0.88));
}

.market-pulse strong {
  color: var(--text-primary);
  font-size: 1.08rem;
}

.market-pulse p {
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.scan-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.38fr);
  gap: 14px;
  margin-bottom: 14px;
}

.spotlight-panel {
  grid-template-columns: minmax(0, 1fr) 132px minmax(270px, 0.74fr) auto;
  min-height: 230px;
  margin: 0;
  padding: 20px;
  border-color: rgba(0, 255, 136, 0.28);
}

.spotlight-title h2 {
  font-size: clamp(2.6rem, 5vw, 4rem);
}

.spotlight-title strong,
.velocity-read strong,
.detail-score {
  font-family: var(--font-mono);
}

.spotlight-title strong {
  color: var(--accent-green);
  text-shadow: var(--glow-green);
}

.read-state {
  display: grid;
  gap: 3px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: var(--radius);
}

.read-state[data-tone="clean"],
.token-posture[data-tone="clean"] {
  border-color: rgba(0, 255, 136, 0.4);
  color: var(--accent-green);
}

.read-state[data-tone="pressure"],
.token-posture[data-tone="pressure"] {
  border-color: rgba(255, 184, 0, 0.44);
  color: var(--accent-amber);
}

.read-state[data-tone="watch"],
.token-posture[data-tone="watch"] {
  border-color: rgba(255, 68, 85, 0.42);
  color: var(--accent-red);
}

.read-state span {
  color: var(--text-secondary);
}

.context-hook {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 20px;
}

.context-hook h2 {
  font-size: 1.28rem;
  line-height: 1.18;
}

.dashboard-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.dashboard-header h2 {
  max-width: 760px;
  font-size: clamp(1.35rem, 2.6vw, 2.2rem);
  line-height: 1.1;
}

.legend-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.legend-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 10px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
}

.legend-row i,
.signal-map-legend i {
  background: var(--accent-green);
}

.legend-row i[data-tone="pressure"] {
  background: var(--accent-amber);
}

.legend-row i[data-tone="watch"] {
  background: var(--accent-red);
}

.legend-row i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

.token-board-panel {
  padding: 18px;
  overflow: visible;
}

.token-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  min-height: auto;
}

.token-card {
  position: relative;
  display: grid;
  gap: 14px;
  min-height: 420px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(22, 27, 34, 0.94), rgba(8, 11, 16, 0.94)),
    var(--bg-secondary);
  color: var(--text-primary);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease,
    opacity 240ms ease;
}

.token-card:hover,
.token-card:focus-visible {
  outline: none;
  border-color: rgba(0, 255, 136, 0.45);
  box-shadow: var(--glow-green);
  transform: translateY(-2px);
}

.rank-one {
  border-color: rgba(0, 255, 136, 0.5);
  box-shadow: inset 0 0 0 1px rgba(163, 113, 247, 0.2), var(--glow-green);
}

.rank-badge-crown {
  background: var(--accent-amber);
}

.token-posture {
  min-height: 26px;
  padding: 5px 8px;
  border: 1px solid rgba(112, 132, 152, 0.28);
  border-radius: 999px;
  background: rgba(8, 11, 16, 0.52);
  color: var(--text-secondary);
  font-size: 0.68rem;
  font-weight: 800;
}

.token-card-main {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 68px;
  gap: 10px;
  align-items: center;
}

.token-orb {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(0, 255, 136, 0.38);
  border-radius: 999px;
  background: rgba(0, 255, 136, 0.1);
  color: var(--accent-green);
  font-family: var(--font-mono);
  font-weight: 800;
}

.token-card-name {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.token-card-name strong {
  color: var(--text-primary);
  font-size: 1.35rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
  white-space: normal;
}

.token-card-name small {
  color: var(--text-secondary);
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
}

.velocity-read {
  display: grid;
  gap: 2px;
}

.velocity-read strong {
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  line-height: 1;
}

.velocity-read span {
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
}

.score-high strong {
  color: var(--accent-green);
  text-shadow: var(--glow-green);
}

.score-mid strong {
  color: var(--accent-amber);
  text-shadow: 0 0 18px rgba(255, 184, 0, 0.22);
}

.score-low strong {
  color: var(--accent-red);
  text-shadow: 0 0 18px rgba(255, 68, 85, 0.22);
}

.token-card-bars,
.spotlight-bars,
.score-bars {
  gap: 8px;
}

.token-card .score-bar {
  grid-template-columns: 72px 44px minmax(80px, 1fr);
  font-size: 0.78rem;
}

.score-bar i,
.metric-with-bar i {
  height: 7px;
  background: rgba(99, 112, 124, 0.28);
}

.score-bar i::before,
.metric-with-bar i::before {
  width: var(--heat);
  background: linear-gradient(90deg, var(--accent-green), var(--accent-blue), var(--accent-purple));
  animation: barFill 700ms ease both;
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.metric-strip span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(112, 132, 152, 0.18);
  border-radius: 6px;
  background: rgba(8, 11, 16, 0.42);
}

.metric-strip small {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.metric-strip strong {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.22;
  overflow-wrap: anywhere;
  white-space: normal;
}

.token-card-footer,
.visible-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.token-card-footer {
  justify-content: space-between;
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.boost-chip {
  padding: 6px 8px;
  color: var(--accent-cyan);
  font-size: 0.76rem;
  font-weight: 800;
}

.boost-chip-watch {
  border-color: rgba(255, 184, 0, 0.5);
  color: var(--accent-amber);
}

.source-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 6px 8px;
  border: 1px solid rgba(112, 132, 152, 0.24);
  border-radius: 999px;
  background: rgba(8, 11, 16, 0.4);
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 800;
}

.source-chip-jupiter {
  border-color: rgba(115, 217, 194, 0.36);
  color: var(--accent-cyan);
}

.source-chip-limited {
  border-color: rgba(255, 209, 102, 0.38);
  color: var(--accent-amber);
}

.source-chip-fixture {
  border-color: rgba(163, 113, 247, 0.36);
  color: var(--accent-purple);
}

.visible-card-actions {
  margin-top: auto;
}

.visible-card-actions .text-button,
.visible-card-actions .text-cta,
.visible-card-actions .pin-button {
  flex: 1 1 auto;
}

.rank-locked {
  border-color: rgba(163, 113, 247, 0.34);
  box-shadow: var(--glow-purple);
}

.content-blur {
  display: grid;
  gap: 14px;
  filter: blur(6px);
  opacity: 0.72;
  pointer-events: none;
  user-select: none;
  transition: filter 220ms ease;
}

.rank-locked:hover .content-blur,
.rank-locked:focus-visible .content-blur {
  filter: blur(3px);
}

.unlock-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(8, 11, 16, 0.64), rgba(8, 11, 16, 0.88));
  text-align: center;
}

.lock-icon {
  display: inline-grid;
  min-height: 30px;
  place-items: center;
  padding: 0 10px;
  border: 1px solid rgba(163, 113, 247, 0.42);
  border-radius: 999px;
  color: var(--accent-purple);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
}

.unlock-headline {
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 800;
}

.unlock-sub {
  max-width: 260px;
  font-size: 0.88rem;
}

.reveal-on-scroll,
.token-card,
.spotlight-panel {
  opacity: 0;
  transform: translateY(18px);
}

.reveal-on-scroll.visible,
.token-card.visible,
.spotlight-panel.visible {
  opacity: 1;
  transform: translateY(0);
}

.signal-map {
  grid-template-columns: minmax(260px, 0.48fr) minmax(420px, 1fr) minmax(210px, 0.36fr);
  padding: 18px;
}

.quadrant-wrap {
  border-color: rgba(112, 132, 152, 0.22);
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(94, 234, 212, 0.2) 50%, transparent 50.2%),
    linear-gradient(0deg, transparent 49.8%, rgba(94, 234, 212, 0.2) 50%, transparent 50.2%),
    radial-gradient(circle at 26% 24%, rgba(0, 255, 136, 0.14), transparent 32%),
    radial-gradient(circle at 78% 22%, rgba(255, 184, 0, 0.14), transparent 32%),
    var(--bg-primary);
}

.map-token {
  border-color: rgba(0, 255, 136, 0.44);
  background: rgba(8, 11, 16, 0.9);
  font-family: var(--font-mono);
}

.map-token::before,
.fingerprint-node,
.fingerprint-core {
  background: var(--accent-green);
  fill: var(--accent-green);
}

.radar-replay,
.advanced-lockers,
.daily-recap,
.share-panel,
.watchlist-panel {
  padding: 18px;
}

.replay-lane,
.advanced-card,
.advanced-signal,
.mover-list,
.watchlist-item,
.detail-grid div,
.score-explainer,
.detail-gate,
.risk-panel,
.history-panel,
.checklist-panel,
.fingerprint-panel,
.map-readout,
.signal-map-legend {
  border-color: rgba(112, 132, 152, 0.2);
  background: rgba(8, 11, 16, 0.5);
}

.advanced-card,
.advanced-signal {
  min-height: 148px;
}

.locked-card p,
.locked-card small {
  filter: blur(1.8px);
}

.gated-panel {
  position: relative;
  grid-template-columns: minmax(0, 0.88fr) minmax(300px, 1fr) auto;
  overflow: hidden;
  border-color: rgba(163, 113, 247, 0.34);
  background:
    linear-gradient(135deg, rgba(163, 113, 247, 0.16), rgba(0, 255, 136, 0.06)),
    var(--surface-raised);
}

.blurred-metrics {
  border-color: rgba(163, 113, 247, 0.24);
  background:
    linear-gradient(135deg, rgba(163, 113, 247, 0.12), rgba(8, 11, 16, 0.7)),
    rgba(8, 11, 16, 0.6);
  filter: blur(3px);
}

.conversion-band {
  border-color: rgba(0, 255, 136, 0.24);
}

.token-dialog {
  border-color: rgba(0, 255, 136, 0.24);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(94, 234, 212, 0.05), rgba(163, 113, 247, 0.05)),
    var(--bg-secondary);
}

.token-dialog::backdrop {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
}

.icon-button {
  border-radius: 6px;
}

.fingerprint-shape {
  fill: rgba(0, 255, 136, 0.18);
  stroke: var(--accent-green);
}

.fingerprint-risk {
  fill: var(--accent-amber);
}

.sparkline-mini path,
.sparkline-large path,
.rank-replay path {
  stroke: var(--accent-green);
}

.rank-replay circle {
  fill: var(--accent-purple);
}

.error-row {
  min-height: 220px;
  color: var(--accent-red);
}

@keyframes livePulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes barFill {
  from {
    width: 0;
  }
  to {
    width: var(--heat);
  }
}

@media (max-width: 1180px) {
  .scan-console,
  .scan-story,
  .signal-map,
  .radar-replay,
  .advanced-lockers,
  .daily-recap,
  .share-panel,
  .watchlist-panel {
    grid-template-columns: 1fr;
  }

  .market-pulse {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .market-pulse .pulse-mood {
    grid-column: span 2;
  }

  .token-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .spotlight-panel {
    grid-template-columns: minmax(0, 1fr) 126px;
  }

  .spotlight-bars,
  .spotlight-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  body {
    background:
      linear-gradient(180deg, rgba(8, 11, 16, 0.5), var(--bg-primary) 620px),
      linear-gradient(90deg, rgba(8, 11, 16, 0.92), rgba(8, 11, 16, 0.58)),
      url("/images/mobile-hero-background.png") top right / min(900px, 148vw) auto no-repeat,
      var(--bg-primary);
  }

  .shell {
    width: min(100% - 24px, 1280px);
    padding-top: 10px;
  }

  .topbar {
    position: static;
  }

  .topbar-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .scan-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 24px 0 16px;
  }

  .signal-ticket {
    min-height: 280px;
  }

  .status-strip,
  .market-pulse,
  .metric-strip,
  .advanced-grid,
  .advanced-signal-list,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .market-pulse .pulse-mood {
    grid-column: auto;
  }

  .spotlight-panel,
  .gated-panel,
  .conversion-band,
  .dashboard-header {
    display: grid;
    grid-template-columns: 1fr;
  }

  .token-card-grid {
    grid-template-columns: 1fr;
  }

  .token-card {
    min-height: auto;
  }

  .token-card-main {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .token-card-main .velocity-fingerprint {
    display: none;
  }

  .hero-actions,
  .conversion-actions,
  .visible-card-actions,
  .ticket-actions,
  .spotlight-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions > *,
  .conversion-actions > *,
  .visible-card-actions > *,
  .ticket-actions > *,
  .spotlight-actions > * {
    width: 100%;
  }

  .radar-panel {
    overflow: visible;
  }

  .quadrant-wrap {
    min-height: 280px;
  }
}

.archive-panel {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}