/*
 * Homepage surface pass kept separate from the legacy stylesheet so the current
 * visual contract always wins without changing the editorial/data pipeline.
 */
.certain-panel,
.asset-panel {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.lead-panel {
  border-color: rgba(241, 201, 40, 0.36);
  background:
    radial-gradient(circle at 94% 8%, rgba(241, 201, 40, 0.055), transparent 37%),
    linear-gradient(150deg, #111513 0%, #0d1010 62%, #090b0c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 12px 28px rgba(0, 0, 0, 0.16);
}

.lead-panel::after {
  display: none;
}

.lead-kicker,
.certain-panel .panel-title > span,
.asset-panel .panel-title > span {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 680;
  letter-spacing: -0.01em;
  text-transform: none;
}

.certain-panel .panel-title,
.asset-panel .panel-title {
  min-height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
}

.certain-panel .intel-list,
.asset-scroll {
  height: calc(100% - 38px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10px, #000 calc(100% - 10px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 10px, #000 calc(100% - 10px), transparent);
}

.certain-panel .intel-scroll-track,
.asset-rows {
  display: flex;
  height: auto;
  flex-direction: column;
  animation-play-state: running !important;
  will-change: transform;
}

.certain-panel .intel-scroll-track {
  animation: intel-scroll 32s linear infinite !important;
}

.asset-rows.is-scrolling {
  animation: asset-scroll var(--asset-duration, 32s) linear infinite !important;
}

.intel-scroll-sequence,
.asset-sequence {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0 12px;
}

.certain-panel .intel-scroll-sequence > .intel-row {
  display: grid;
  flex: 0 0 74px;
  min-height: 74px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.018), transparent 74%),
    rgba(17, 21, 23, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 5px 12px rgba(0, 0, 0, 0.1);
}

.asset-row,
.asset-row:nth-child(odd) {
  display: grid;
  min-height: 58px;
  flex: 0 0 58px;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 10px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.018), transparent 72%),
    rgba(17, 21, 23, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 5px 12px rgba(0, 0, 0, 0.1);
}

.certain-panel .intel-row:hover,
.asset-row:hover {
  border-color: rgba(241, 201, 40, 0.32);
  background:
    linear-gradient(145deg, rgba(241, 201, 40, 0.055), transparent 82%),
    rgba(28, 34, 37, 0.96);
}

.certain-panel .intel-copy b,
.asset-copy b,
.asset-range {
  font-size: 14px;
  font-weight: 620;
}

.certain-panel .intel-value b {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-bright);
  font-size: 14px;
}

.asset-rows {
  grid-template-columns: none;
  grid-auto-rows: auto;
}

@media (min-width: 1181px) {
  .top-grid {
    grid-template-rows: 308px;
  }

  .lead-panel {
    min-height: 308px;
  }

  .primary-window-grid .window-head {
    min-height: 50px;
  }

  .primary-window-grid .market-card {
    min-height: 180px;
    padding: 14px;
  }

  .primary-window-grid .card-title {
    min-height: 61px;
    font-size: 13px;
    line-height: 1.34;
    -webkit-line-clamp: 4;
  }

  .primary-window-grid .card-prob {
    font-size: 26px;
  }

  .primary-window-grid .card-meta,
  .primary-window-grid .card-timing {
    font-size: 10px;
  }

  .certain-panel .intel-scroll-sequence > .intel-row {
    flex-basis: 80px;
    min-height: 80px;
  }

  .asset-row,
  .asset-row:nth-child(odd) {
    min-height: 56px;
    flex-basis: 56px;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .certain-panel .intel-scroll-sequence > .intel-row {
    flex-basis: 58px;
    min-height: 58px;
    padding: 8px 10px;
  }

  .asset-row,
  .asset-row:nth-child(odd) {
    min-height: 52px;
    flex-basis: 52px;
    padding: 6px 10px;
  }
}

@media (max-width: 760px) {
  .certain-panel .intel-scroll-sequence > .intel-row {
    flex-basis: 62px;
    min-height: 62px;
    padding: 8px 10px;
  }

  .asset-row,
  .asset-row:nth-child(odd) {
    min-height: 52px;
    flex-basis: 52px;
    padding: 6px 10px;
  }
}