/* Markets control rail: keep market, intervals, and performance in stable rows. */
.app-page[data-page="markets"] .market-control {
  display: grid !important;
  grid-template-columns: minmax(420px, 0.44fr) minmax(0, 1fr) !important;
  grid-template-areas:
    "picker metrics"
    "intervals intervals" !important;
  gap: 0 !important;
  align-items: stretch !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(137, 159, 181, 0.12) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(12, 25, 35, 0.5), rgba(5, 11, 17, 0.9)),
    #050b11 !important;
  overflow: visible !important;
}

.app-page[data-page="markets"] .market-left-controls {
  display: contents !important;
}

.app-page[data-page="markets"] .market-control .coin-picker {
  grid-area: picker !important;
  display: grid !important;
  align-items: center !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 92px !important;
  padding: 16px 24px !important;
  border-right: 1px solid rgba(137, 159, 181, 0.11) !important;
  background: rgba(8, 18, 27, 0.42) !important;
}

.app-page[data-page="markets"] .coin-dropdown-trigger {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) minmax(132px, auto) !important;
  grid-template-rows: auto auto !important;
  column-gap: 18px !important;
  row-gap: 5px !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 60px !important;
  height: 60px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app-page[data-page="markets"] .coin-dropdown-trigger .coin-option-main {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: end !important;
  min-width: 0 !important;
}

.app-page[data-page="markets"] .coin-dropdown-trigger .coin-option-main > span {
  min-width: 0 !important;
}

.app-page[data-page="markets"] .coin-dropdown-trigger .coin-option-main strong {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.app-page[data-page="markets"] .coin-dropdown-trigger .coin-option-market {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  display: grid !important;
  align-content: center !important;
  justify-items: end !important;
  min-width: 132px !important;
  text-align: right !important;
}

.app-page[data-page="markets"] .coin-dropdown-trigger .coin-option-market strong {
  display: block !important;
  line-height: 0.95 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

.app-page[data-page="markets"] .coin-dropdown-trigger .coin-option-market small {
  display: block !important;
  justify-self: end !important;
  margin-top: 9px !important;
  color: #ff7d91 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-align: right !important;
  white-space: nowrap !important;
}

.app-page[data-page="markets"] .coin-dropdown-trigger .coin-option-market small.positive {
  color: #79e6ae !important;
}

.app-page[data-page="markets"] .coin-dropdown-trigger .trial-only-note {
  grid-column: 1 !important;
  grid-row: 2 !important;
  position: static !important;
  align-self: start !important;
  display: block !important;
  margin: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  color: #a8e8bf !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.2em !important;
  line-height: 1.15 !important;
  text-overflow: clip !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.app-page[data-page="markets"] .market-left-controls .chart-toolbar {
  grid-area: intervals !important;
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(137, 159, 181, 0.1) !important;
  border-radius: 0 !important;
  background: rgba(5, 11, 17, 0.88) !important;
  overflow: hidden !important;
}

.app-page[data-page="markets"] .market-left-controls .timeframe {
  display: grid !important;
  place-items: center !important;
  flex: initial !important;
  min-width: 0 !important;
  max-width: none !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-right: 1px solid rgba(137, 159, 181, 0.08) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #8996a3 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

.app-page[data-page="markets"] .market-left-controls .timeframe:last-child {
  border-right: 0 !important;
}

.app-page[data-page="markets"] .market-left-controls .timeframe:hover {
  color: #edf7f2 !important;
  background: rgba(139, 190, 169, 0.08) !important;
}

.app-page[data-page="markets"] .market-left-controls .timeframe.is-active {
  color: #edf7f2 !important;
  background: rgba(139, 190, 169, 0.16) !important;
}

.app-page[data-page="markets"] .market-control .performance-strip {
  grid-area: metrics !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 92px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.app-page[data-page="markets"] .market-control .performance-strip div {
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
  min-width: 0 !important;
  min-height: 92px !important;
  height: auto !important;
  padding: 0 clamp(14px, 1.45vw, 26px) !important;
  border: 0 !important;
  border-left: 1px solid rgba(137, 159, 181, 0.1) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}

.app-page[data-page="markets"] .market-control .performance-strip div::before,
.app-page[data-page="markets"] .market-control .performance-strip div::after {
  display: none !important;
}

.app-page[data-page="markets"] .market-control .performance-strip span,
.app-page[data-page="markets"] .market-control .performance-strip strong {
  display: block !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

.app-page[data-page="markets"] .market-control .performance-strip span {
  margin-bottom: 7px !important;
  color: #7d8d9d !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

.app-page[data-page="markets"] .market-control .performance-strip strong {
  color: #edf7f2 !important;
  font-size: clamp(15px, 0.95vw, 18px) !important;
  letter-spacing: 0.04em !important;
}

.app-page[data-page="markets"] .market-control .performance-strip strong.positive {
  color: #79e6ae !important;
}

.app-page[data-page="markets"] .market-control .performance-strip strong.negative {
  color: #ff7d91 !important;
}

.app-page[data-page="markets"] .chart-panel .chart-stage {
  height: clamp(552px, calc(85vh - 185px), 755px) !important;
  margin-top: 0 !important;
  border-top: 0 !important;
}

@media (max-width: 1180px) {
  .app-page[data-page="markets"] .market-control {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "picker"
      "intervals"
      "metrics" !important;
  }

  .app-page[data-page="markets"] .market-control .coin-picker {
    min-height: 84px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(137, 159, 181, 0.1) !important;
  }

  .app-page[data-page="markets"] .market-control .performance-strip {
    min-height: 78px !important;
    border-top: 1px solid rgba(137, 159, 181, 0.1) !important;
  }

  .app-page[data-page="markets"] .market-control .performance-strip div {
    min-height: 78px !important;
  }

  .app-page[data-page="markets"] .chart-panel .chart-stage {
    height: clamp(390px, 56vh, 520px) !important;
    min-height: 0 !important;
  }
}

@media (max-width: 720px) {
  .app-page[data-page="markets"] .market-control .coin-picker {
    min-height: 78px !important;
    padding: 12px 14px !important;
  }

  .app-page[data-page="markets"] .coin-dropdown-trigger {
    grid-template-columns: minmax(150px, 1fr) minmax(112px, auto) !important;
    column-gap: 12px !important;
    min-height: 54px !important;
    height: 54px !important;
  }

  .app-page[data-page="markets"] .coin-dropdown-trigger .coin-option-market {
    min-width: 112px !important;
  }

  .app-page[data-page="markets"] .coin-dropdown-trigger .coin-option-market small {
    margin-top: 7px !important;
    font-size: 12px !important;
  }

  .app-page[data-page="markets"] .coin-dropdown-trigger .trial-only-note {
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
  }

  .app-page[data-page="markets"] .market-left-controls .chart-toolbar {
    display: flex !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
  }

  .app-page[data-page="markets"] .market-left-controls .chart-toolbar::-webkit-scrollbar {
    display: none;
  }

  .app-page[data-page="markets"] .market-left-controls .timeframe {
    flex: 0 0 58px !important;
    width: 58px !important;
    height: 46px !important;
    min-height: 46px !important;
    font-size: 12px !important;
  }

  .app-page[data-page="markets"] .market-control .performance-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: 104px !important;
  }

  .app-page[data-page="markets"] .market-control .performance-strip div {
    min-height: 52px !important;
    padding: 0 14px !important;
    border-top: 1px solid rgba(137, 159, 181, 0.08) !important;
  }

  .app-page[data-page="markets"] .market-control .performance-strip div:nth-child(-n + 2) {
    border-top: 0 !important;
  }

  .app-page[data-page="markets"] .market-control .performance-strip div:nth-child(odd) {
    border-left: 0 !important;
  }

  .app-page[data-page="markets"] .chart-panel .chart-stage {
    height: 336px !important;
    min-height: 0 !important;
  }
}