/* XAUUSD / XAGUSD 合约页：K线周期 + 杠杆 + 配额滑块 + 走势图 */
html.gate-ui .contract.gs-metal-contract .contract-body-top {
  padding: 0.625rem 0.9375rem !important;
}

html.gate-ui .contract.gs-metal-contract .contract-body-top-left-cell .input-box,
html.gate-ui .contract.gs-metal-contract .contract-body-top-left-cell .button-box {
  height: 2rem !important;
  min-height: 2rem !important;
}

html.gate-ui .contract.gs-metal-contract .contract-body-top-left-cell .trade-button {
  height: 1.25rem !important;
}

html.gate-ui .contract.gs-metal-contract .contract-body-top-left-cell .down-box {
  height: 1.5rem !important;
}

html.gate-ui .contract.gs-metal-contract .contract-body-top-left-cell .tag-box {
  height: 1.375rem !important;
  padding: 0 0.375rem !important;
}

html.gate-ui .contract.gs-metal-contract .contract-body-top-left-cell .number-group-top-item {
  height: 1.375rem !important;
}

/* K线周期选择 */
html.gate-ui .contract.gs-metal-contract .contract-body-kline {
  min-height: 300px !important;
  flex: 0 0 auto !important;
  background: var(--background-primary, #171a26) !important;
  border-bottom: 1px solid var(--border-strength-100, #2b3140) !important;
}

/* All contract charts: Gate height / toolbar alignment */
html.gate-ui .contract .contract-body-kline,
html.gate-ui .newContract .contract-body-kline {
  background: var(--background-primary, #171a26) !important;
}
html.gate-ui .contract #kline,
html.gate-ui .newContract #kline {
  min-height: 245px !important;
}
html.gate-ui .contract .gs-kline-intervals,
html.gate-ui .contract .kline-tab,
html.gate-ui .contract .kline-tabs {
  border-bottom: 1px solid var(--border-strength-100, #2b3140) !important;
}

html.gate-ui .contract.gs-metal-contract .gs-metal-chart {
  width: 100% !important;
  height: 260px !important;
  min-height: 260px !important;
  position: relative;
  z-index: 2;
}

html.gate-ui .contract.gs-metal-contract.gs-metal-chart-open #kline {
  visibility: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

html.gate-ui .contract.gs-metal-contract #kline {
  width: 100% !important;
  height: 245px !important;
  min-height: 245px !important;
}

/* Spot + contract unified candle charts (ref: grey pill + MA) */
html.gate-ui .trade.gs-gate-chart #gs-spot-chart,
html.gate-ui .trade .gs-spot-chart {
  width: 100% !important;
  height: 260px !important;
  min-height: 260px !important;
  position: relative;
  z-index: 2;
  background: transparent !important;
}
html.gate-ui .trade #kline.gs-native-kline-hidden {
  visibility: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

html.gate-ui .trade .gs-candle-toolbar,
html.gate-ui .contract .gs-candle-toolbar {
  width: 100%;
  padding: 4px 0 2px;
  border-bottom: 1px solid var(--border-strength-100, #2b3140);
  background: var(--background-primary, #171a26);
}

html.gate-ui .trade .gs-kline-intervals,
html.gate-ui .contract .gs-kline-intervals,
html.gate-ui .trade .gs-candle-intervals,
html.gate-ui .contract .gs-candle-intervals {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  overflow-x: auto !important;
  padding: 6px 10px 4px !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
html.gate-ui .trade .gs-kline-intervals::-webkit-scrollbar,
html.gate-ui .contract .gs-kline-intervals::-webkit-scrollbar {
  display: none;
}

html.gate-ui .trade .gs-kline-intervals button,
html.gate-ui .contract .gs-kline-intervals button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #8b93a7;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
}
/* 第一张图：灰色胶囊选中态 */
html.gate-ui .trade .gs-kline-intervals button.active,
html.gate-ui .contract .gs-kline-intervals button.active {
  color: #eaecef !important;
  font-weight: 600;
  background: #2f3545 !important;
}

html.gate-ui .trade .gs-ma-legend,
html.gate-ui .contract .gs-ma-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 2px 12px 6px;
  font-size: 11px;
  line-height: 1.3;
}
html.gate-ui .trade .gs-ma-legend i,
html.gate-ui .contract .gs-ma-legend i {
  font-style: normal;
  font-weight: 600;
}
html.gate-ui .trade .gs-ma-legend .ma5,
html.gate-ui .contract .gs-ma-legend .ma5 { color: #f0a030 !important; }
html.gate-ui .trade .gs-ma-legend .ma10,
html.gate-ui .contract .gs-ma-legend .ma10 { color: #26c6a8 !important; }
html.gate-ui .trade .gs-ma-legend .ma30,
html.gate-ui .contract .gs-ma-legend .ma30 { color: #e6c84a !important; }

html.gate-ui[data-theme="dark"] .trade #kline,
html.gate-ui[data-theme="dark"] .contract #kline,
html.gate-ui[data-theme="dark"] .contract-body-kline {
  background: transparent !important;
}

/* Full kline page: grey pill intervals */
html.gate-ui .kline .time-box .item {
  border-radius: 999px !important;
  padding: 4px 10px !important;
  color: #8b93a7 !important;
}
html.gate-ui .kline .time-box .item.active {
  background: #2f3545 !important;
  color: #eaecef !important;
  font-weight: 600 !important;
}

/* 杠杆选择：所有合约币种 — 倍数旁倒三角，点击展开选项；删除多余 100X */
html.gate-ui .contract .gs-contract-lever-tag,
html.gate-ui .contract .gs-metal-lever-tag {
  pointer-events: auto !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
}
html.gate-ui .contract .gs-contract-lever-tag .gs-contract-lever-caret,
html.gate-ui .contract .gs-metal-lever-tag img {
  width: 10px !important;
  height: 10px !important;
  margin-left: 2px !important;
  flex-shrink: 0 !important;
  opacity: 0.85;
}
html.gate-ui .contract .gs-contract-lever-bar,
html.gate-ui .contract .gs-metal-lever-bar {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 8px;
  margin: 6px 0 0;
  border-radius: 8px;
  background: var(--background-secondary, rgba(128,128,128,.08));
  border: 1px solid var(--border-strength-100, rgba(128,128,128,.15));
  width: 100%;
  box-sizing: border-box;
}
html.gate-ui .contract .gs-contract-lever-label,
html.gate-ui .contract .gs-metal-lever-label {
  font-size: 12px;
  color: var(--content-secondary, #888);
}
html.gate-ui .contract .gs-contract-lever-label .gs-contract-lever-side,
html.gate-ui .contract .gs-metal-lever-label .gs-metal-lever-side {
  color: var(--color-primary, #2354e6);
  font-weight: 700;
  margin-left: 4px;
}
html.gate-ui .contract .gs-contract-lever-opts,
html.gate-ui .contract .gs-metal-lever-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
html.gate-ui .contract .gs-contract-lever-bar button,
html.gate-ui .contract .gs-metal-lever-bar button {
  flex: 0 0 auto;
  border: 1px solid var(--border-strength-100, rgba(128,128,128,.2));
  background: var(--background-primary, rgba(0,0,0,.04));
  color: var(--content-primary, #ddd);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
html.gate-ui .contract .gs-contract-lever-bar button.active,
html.gate-ui .contract .gs-metal-lever-bar button.active {
  color: #fff;
  border-color: var(--color-primary, #2354e6);
  background: var(--color-primary, #2354e6);
  font-weight: 600;
}

/* 配额滑块 */
html.gate-ui .contract.gs-metal-contract .slider-box .slider-box-top {
  height: 1.25rem !important;
}

html.gate-ui .contract.gs-metal-contract .slider-box .slider-points {
  pointer-events: none !important;
}

html.gate-ui .contract.gs-metal-contract .slider-box .slider-points .points {
  pointer-events: auto !important;
  cursor: pointer !important;
  width: 0.5rem !important;
  height: 0.6875rem !important;
}

html.gate-ui .contract.gs-metal-contract .slider-box .slider-box-bottom {
  margin-top: 0.125rem !important;
}

html.gate-ui .contract.gs-metal-contract .slider-box .slider-box-bottom .font-10,
html.gate-ui .contract.gs-metal-contract .slider-box .slider-box-bottom span,
html.gate-ui .contract.gs-metal-contract .slider-box .slider-box-bottom uni-text {
  font-size: 10px !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  padding: 2px 0 !important;
}

html.gate-ui .contract.gs-metal-contract .uni-slider-thumb {
  width: 0.4375rem !important;
  height: 0.5625rem !important;
  margin-top: -0.4375rem !important;
}

html.gate-ui .contract.gs-metal-contract [class*="uni-slider-handle-wrapper"] {
  height: 0.1875rem !important;
}

html.gate-ui .contract.gs-metal-contract.gs-metal-chart-open .contract-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}