/* dex-controls-grouped-1: CEX-sized DEX segments share one frame; Default stays separate. */
.controls-panel .dex-ranking-area {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 256px !important;
  min-width: 256px !important;
  max-width: 256px !important;
  height: 88px !important;
  min-height: 88px !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  transform: none !important;
  pointer-events: auto !important;
  z-index: 80 !important;
}

body:not(.manual-layout-editor-mode) .controls-panel .dex-ranking-area {
  position: fixed !important;
  left: 1507px !important;
  top: 210px !important;
  right: auto !important;
  bottom: auto !important;
  width: 298px !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 44px !important;
  min-height: 0 !important;
  transform: scale(1) !important;
  transform-origin: left top !important;
}

.controls-panel .dex-source-controls {
  display: none !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
}

.controls-panel .dex-ranking-area.has-dex-controls {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  align-items: center !important;
}

.controls-panel .dex-ranking-area.has-dex-controls .dex-source-controls {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  align-items: center !important;
  width: calc(var(--dex-cex-button-width, 94px) * 2 + var(--dex-cex-border-width, 1px) * 2) !important;
  height: var(--dex-cex-group-height, 44px) !important;
  border: var(--dex-cex-border-width, 1px) solid rgba(74, 86, 101, 0.7) !important;
  border-radius: var(--dex-cex-radius, 7px) !important;
  box-sizing: border-box !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(105, 31, 43, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(15, 22, 33, 0.68), rgba(4, 8, 14, 0.72)) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.035) inset !important;
  overflow: hidden !important;
}

.controls-panel .dex-source-mode {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--dex-cex-gap, 3px) !important;
  min-width: 0 !important;
  flex: 0 0 var(--dex-cex-button-width, 94px) !important;
  width: var(--dex-cex-button-width, 94px) !important;
  height: var(--dex-cex-button-height, 42px) !important;
  padding: 0 var(--dex-cex-padding-inline, 10px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  color: rgba(184, 193, 203, 0.86) !important;
  font-family: inherit !important;
  font-size: var(--dex-cex-font-size, 10.5px) !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: color 140ms ease, background 140ms ease, box-shadow 140ms ease !important;
}

.controls-panel .dex-source-mode:first-child {
  border-right: var(--dex-cex-border-width, 1px) solid rgba(100, 114, 132, 0.82) !important;
}

.controls-panel .dex-source-mode[hidden] {
  display: none !important;
}

.controls-panel .dex-source-mode.active {
  background: linear-gradient(180deg, rgba(83, 18, 31, 0.72), rgba(35, 8, 16, 0.7)) !important;
  color: rgba(255, 77, 95, 0.97) !important;
}

.controls-panel .dex-source-mode:hover:not(:disabled):not(.active) {
  background: linear-gradient(180deg, rgba(26, 35, 48, 0.42), rgba(5, 10, 16, 0.44)) !important;
  color: rgba(215, 224, 232, 0.9) !important;
}

.controls-panel .dex-source-mode.is-disabled,
.controls-panel .dex-source-mode:disabled {
  color: rgba(155, 172, 181, 0.48) !important;
  opacity: 0.52 !important;
  cursor: not-allowed !important;
}

.controls-panel .dex-source-icon {
  display: block !important;
  width: var(--dex-cex-icon-width, 16px) !important;
  height: var(--dex-cex-icon-height, 14px) !important;
  flex: 0 0 var(--dex-cex-icon-width, 16px) !important;
  object-fit: contain !important;
  pointer-events: none !important;
}

.controls-panel .dex-source-label {
  display: block !important;
  min-width: 0 !important;
  pointer-events: none !important;
}

body .controls-panel .dex-ranking-area > .rank-sort {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 4px 6px !important;
  box-sizing: border-box !important;
}

body .controls-panel .dex-ranking-area.has-dex-controls > .rank-sort {
  border: 1px solid rgba(255, 73, 89, 0.72) !important;
  border-radius: 8px !important;
}

.controls-panel .rank-sort-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  min-width: 0 !important;
}

.controls-panel .dex-ranking-area.has-dex-controls .rank-sort-title {
  font-size: 10.5px !important;
  white-space: nowrap !important;
}

.controls-panel .dex-ranking-area.has-dex-controls .rank-sort-subtitle {
  font-size: 8px !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

.all-exchange-filter-option[hidden] {
  display: none !important;
}