/* Mobile-only surface refinement. Desktop receives no selectors from this file. */
@media (max-width: 760px) {
  .top-grid {
    grid-template-rows: minmax(398px, auto) 198px 230px !important;
    gap: 12px !important;
  }

  .lead-panel {
    min-height: 398px !important;
    padding: 16px !important;
    background:
      radial-gradient(circle at 96% 0%, rgba(241, 201, 40, 0.055), transparent 34%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.026), transparent 56%),
      #121617 !important;
  }

  .lead-action {
    grid-template-columns: 37px minmax(0, 1fr) 16px !important;
    min-height: 54px;
    width: 100%;
    margin-top: 13px;
    padding: 8px 12px !important;
    border: 1px solid rgba(107, 124, 117, 0.72) !important;
    border-radius: 12px !important;
    color: #f5f7f2 !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.045), transparent 52%),
      #101516 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.055),
      0 5px 0 rgba(4, 7, 8, 0.74),
      0 11px 19px rgba(0, 0, 0, 0.25) !important;
  }

  .lead-action.source-polymarket {
    border-color: rgba(53, 126, 231, 0.58) !important;
    box-shadow:
      inset 3px 0 0 #1d78e8,
      inset 0 1px 0 rgba(255, 255, 255, 0.055),
      0 5px 0 rgba(4, 7, 8, 0.74),
      0 11px 19px rgba(0, 0, 0, 0.25) !important;
  }

  .lead-action.source-kalshi {
    border-color: rgba(38, 220, 156, 0.56) !important;
    color: #f5f7f2 !important;
    background:
      linear-gradient(135deg, rgba(28, 214, 147, 0.095), transparent 52%),
      #101516 !important;
    box-shadow:
      inset 3px 0 0 #12d995,
      inset 0 1px 0 rgba(255, 255, 255, 0.055),
      0 5px 0 rgba(4, 7, 8, 0.74),
      0 11px 19px rgba(0, 0, 0, 0.25) !important;
  }

  .lead-action .lead-poly {
    width: 37px !important;
    height: 37px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: rgba(29, 120, 232, 0.18);
  }

  .lead-action.source-kalshi .lead-poly {
    background: rgba(18, 217, 149, 0.16);
  }

  .lead-action .lead-poly img {
    max-width: 20px !important;
    max-height: 20px !important;
  }

  .lead-action b {
    font-size: 12px !important;
    letter-spacing: -0.01em;
  }

  .lead-action small {
    margin-top: 2px !important;
    color: #aeb9b4 !important;
    font-size: 10px !important;
    opacity: 1 !important;
  }

  .lead-action i {
    color: #e8eee8;
    font-size: 16px;
  }

  .certain-panel,
  .asset-panel {
    border-color: rgba(116, 131, 125, 0.55) !important;
    border-radius: 16px !important;
    background:
      radial-gradient(circle at 98% 0%, rgba(241, 201, 40, 0.055), transparent 36%),
      linear-gradient(150deg, #171d1d, #101516 74%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.045),
      0 10px 22px rgba(0, 0, 0, 0.18);
  }

  .certain-panel {
    min-height: 198px !important;
  }

  .certain-panel .panel-title,
  .asset-panel .panel-title {
    min-height: 44px !important;
    padding: 0 13px !important;
    border-bottom-color: rgba(255, 255, 255, 0.105) !important;
    background: transparent !important;
  }

  .certain-panel .panel-title > span,
  .asset-panel .panel-title > span {
    font-size: 13px !important;
  }

  .certain-panel .panel-horizon,
  .asset-panel .panel-horizon {
    font-size: 9px !important;
    letter-spacing: 0.065em;
  }

  .certain-panel .intel-list {
    height: calc(100% - 44px) !important;
  }

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

  .certain-panel .intel-scroll-sequence {
    gap: 8px !important;
    padding: 8px 9px 11px !important;
  }

  .certain-panel .intel-scroll-sequence > .intel-row,
  .certain-panel .intel-scroll-track > .intel-row,
  .certain-panel .intel-scroll-track > .intel-row[aria-hidden="true"] {
    flex: 0 0 66px !important;
    min-height: 66px !important;
    grid-template-columns: minmax(0, 1fr) 84px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 11px !important;
    overflow: hidden !important;
    background:
      linear-gradient(90deg, #1b2222 0%, #181f20 69%, #0e1314 69%, #0e1314 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  }

  .certain-panel .intel-copy {
    align-self: stretch;
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
  }

  .certain-panel .intel-copy b {
    font-size: 12px !important;
    line-height: 1.22 !important;
  }

  .certain-panel .intel-value {
    align-self: stretch;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.075) !important;
    background: transparent !important;
  }

  .certain-panel .intel-value b {
    font-size: 18px !important;
    letter-spacing: -0.045em;
  }

  .asset-panel {
    min-height: 230px !important;
  }

  .asset-scroll,
  .asset-track {
    height: calc(100% - 44px) !important;
  }

  .asset-sequence {
    gap: 8px !important;
    padding: 8px 9px 11px !important;
  }

  .asset-scroll .asset-row,
  .asset-scroll .asset-row:nth-child(odd) {
    min-height: 50px !important;
    grid-template-columns: minmax(0, 1fr) 150px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 11px !important;
    overflow: hidden !important;
    background:
      linear-gradient(90deg, #1b2222 0%, #181f20 57%, #0e1314 57%, #0e1314 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  }

  .asset-scroll .asset-identity {
    justify-content: flex-start !important;
    padding: 0 12px !important;
  }

  .asset-scroll .asset-range-wrap {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 8px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.075) !important;
    background: transparent !important;
  }

  .asset-copy b,
  .asset-range {
    font-size: 13px !important;
  }

  .asset-copy em {
    font-size: 8px !important;
    margin-top: 1px;
  }

  .asset-range {
    text-align: center !important;
    white-space: nowrap;
  }
}

@media (max-width: 350px) {
  .asset-panel .panel-title {
    grid-template-columns: minmax(0, 1fr) 110px !important;
  }

  .asset-panel .panel-title > span {
    font-size: 12px !important;
  }

  .asset-panel .panel-horizon {
    font-size: 8px !important;
  }
}