.native-chart-panel {
  width: min(100%, 1100px);
  margin: 16px auto 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(8, 15, 30, 0.72);
}

#swap-section .native-chart-panel {
  align-self: stretch;
}

.native-chart-heading,
.native-chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.native-chart-heading h3 {
  margin: 0;
  color: var(--text, #f4f7fb);
  font-size: 14px;
}

.native-chart-heading p,
.native-chart-stats {
  margin: 6px 0 0;
  color: var(--muted, #8899a6);
  font-size: 11px;
  line-height: 1.8;
}

.native-chart-section {
  margin-top: 14px;
}

.native-chart-toolbar {
  margin-bottom: 8px;
}

.native-chart-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.native-chart-intervals {
  display: flex;
  gap: 5px;
}

.chart-interval-btn {
  min-width: 42px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted, #8899a6);
  background: transparent;
  cursor: pointer;
}

.chart-interval-btn.active {
  color: #07131a;
  border-color: #7ae7c1;
  background: #7ae7c1;
}

.native-chart-stats {
  min-height: 24px;
  margin-bottom: 8px;
}

.chart-strategy-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 10px 0;
  color: var(--muted, #8899a6);
  font-size: 10px;
}

.chart-strategy-controls > span {
  color: var(--text, #f4f7fb);
  font-weight: 700;
}

.chart-strategy-controls label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.chart-strategy-controls input {
  accent-color: #7ae7c1;
}

.chart-signal-summary,
.copy-trading-heading,
.copy-trader-form,
.copy-trader-row,
.copy-trade-event {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.chart-signal-summary {
  min-height: 38px;
  margin-bottom: 8px;
  color: var(--muted, #8899a6);
  font-size: 11px;
}

.chart-signal-summary .buy {
  color: #67e2b7;
}

.chart-signal-summary .sell {
  color: #ff8598;
}

.chart-signal-summary button,
.copy-trader-form button,
.copy-trade-event button {
  flex: 0 0 auto;
}

.copy-trading-panel {
  margin-top: 15px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(6, 12, 24, 0.7);
}

.copy-trading-heading {
  align-items: flex-start;
}

.copy-trading-heading h4 {
  margin: 0;
  color: var(--text, #f4f7fb);
  font-size: 12px;
}

.copy-trading-heading p,
.copy-trading-disclaimer,
.chart-signal-disclaimer {
  margin: 5px 0 0;
  color: var(--muted, #8899a6);
  font-size: 10px;
  line-height: 1.8;
}

#copy-trading-status {
  flex: 0 0 auto;
  color: var(--muted, #8899a6);
  font-size: 10px;
}

#copy-trading-status.active {
  color: #67e2b7;
}

.copy-trader-form {
  justify-content: flex-start;
  margin-top: 12px;
}

.copy-trader-form label {
  display: grid;
  flex: 1;
  gap: 5px;
  color: var(--muted, #8899a6);
  font-size: 10px;
}

.copy-trader-form input {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text, #f4f7fb);
  background: rgba(255, 255, 255, 0.03);
}

.copy-trader-list,
.copy-trade-events {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.copy-trader-row,
.copy-trade-event {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  color: var(--muted, #8899a6);
  font-size: 10px;
}

.copy-trader-row address {
  overflow: hidden;
  color: var(--text, #f4f7fb);
  font-style: normal;
  text-overflow: ellipsis;
}

.copy-trader-row button {
  border: 0;
  color: #ff8598;
  background: transparent;
  cursor: pointer;
}

.copy-trade-event > span {
  min-width: 0;
}

.copy-trading-disclaimer,
.chart-signal-disclaimer {
  display: block;
}

.native-chart-canvas {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

#swap-chart-container {
  width: 100%;
  height: 300px;
}

.native-chart-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--muted, #8899a6);
  background: rgba(8, 15, 30, 0.72);
  font-size: 12px;
}

.native-chart-loading.hidden {
  display: none;
}

.chart-candle-inspector {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(98, 221, 234, 0.2);
  border-radius: 10px;
  background: rgba(12, 23, 40, 0.72);
}

.chart-candle-inspector-heading,
.chart-candle-trade-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.chart-candle-inspector-heading {
  color: var(--text, #f4f7fb);
  font-size: 11px;
}

.chart-candle-inspector-heading time {
  color: var(--muted, #8899a6);
  direction: ltr;
  text-align: left;
}

.chart-candle-values {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.chart-candle-values div {
  min-width: 0;
}

.chart-candle-values dt,
.chart-candle-inspector > small {
  color: var(--muted, #8899a6);
  font-size: 10px;
}

.chart-candle-values dd {
  overflow: hidden;
  margin: 4px 0 0;
  color: var(--text, #f4f7fb);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  direction: ltr;
  text-align: right;
}

.chart-candle-trade-actions {
  justify-content: flex-start;
}

.chart-candle-trade-actions button {
  min-height: 40px;
}

.chart-candle-buy {
  color: #07131a;
  background: #7ae7c1;
}

.chart-candle-sell {
  color: #fff;
  background: #bd455b;
}

.chart-candle-trade-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.chart-candle-inspector > small {
  display: block;
  margin-top: 8px;
  line-height: 1.7;
}

@media (max-width: 600px) {
  .native-chart-panel {
    padding: 12px;
  }

  .native-chart-heading,
  .native-chart-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .native-chart-actions,
  .chart-candle-trade-actions {
    width: 100%;
  }

  .native-chart-actions > button,
  .chart-candle-trade-actions > button {
    flex: 1;
    min-height: 44px;
  }

  .native-chart-intervals {
    width: 100%;
  }

  .chart-strategy-controls {
    gap: 9px 12px;
  }

  .chart-signal-summary,
  .copy-trading-heading,
  .copy-trader-form,
  .copy-trade-event {
    align-items: stretch;
    flex-direction: column;
  }

  .chart-candle-inspector-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .chart-candle-values {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .copy-trader-form button,
  .copy-trade-event button {
    width: 100%;
  }

  .chart-interval-btn {
    flex: 1;
  }

  .native-chart-canvas,
  #swap-chart-container {
    min-height: 240px;
    height: 240px;
  }
}