/* ==========================================================================
   AXIONMESK — CAMADA FINAL (substitui 9 folhas conflitantes)

   Este arquivo é a ÚNICA fonte de verdade para:
     • barra de mercados (Spot / Futuros / Margem)
     • cabeçalho do par (picker, preço, variação)
     • 5 métricas do par
     • altura do gráfico

   Carregado por último, com um "reset" das regras antigas.
   ========================================================================== */

/* ==========================================================================
   1) BARRA DE MERCADOS
   ========================================================================== */
.trade-subnav {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 12px !important;
  min-height: 58px !important;
  height: auto !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 65%),
    #0A0F17 !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

#marketTabs {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 2px !important;

  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-auto-flow: row !important;

  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 42px !important;

  padding: 3px !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .045) !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 4px 14px -8px rgba(0,0,0,.9) !important;
  overflow: visible !important;
  position: relative !important;
}

#marketTabs .mtab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  height: 34px !important;

  padding: 0 12px !important;
  box-sizing: border-box !important;

  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #8996AA !important;

  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;

  position: relative !important;
  z-index: 1 !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .18s ease, transform .12s ease !important;
}

#marketTabs .mtab.active { color: #386BFF !important; }
#marketTabs .mtab:active { transform: scale(.97) !important; }

#marketTabs .mtab .cm-mkt-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  opacity: .78;
}

#marketTabs .mtab .cm-mkt-ico svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

#marketTabs .mtab.active .cm-mkt-ico { opacity: 1; }

#marketTabs .mtab .cm-mkt-lbl {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* indicador deslizante */
#marketTabs .cm-mkt-indicator {
  position: absolute !important;
  top: 3px !important;
  left: 0 !important;
  height: 34px !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg, rgba(56,107,255,.20), rgba(56,107,255,.09)) !important;
  box-shadow: 0 0 0 1px rgba(56,107,255,.34) inset,
              0 4px 14px -6px rgba(56,107,255,.55) !important;
  opacity: 0;
  pointer-events: none !important;
  z-index: 0 !important;
  transition: transform .28s cubic-bezier(.22,1,.36,1),
              width .28s cubic-bezier(.22,1,.36,1) !important;
}

#marketTabs .cm-mkt-indicator.is-pronto { opacity: 1; }

/* par + AO VIVO */
.trade-subnav__pair {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: auto !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
  overflow: hidden !important;
}

#subSymbol {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 26px !important;
  padding: 0 8px !important;
  border-radius: 7px !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  color: #D5DAE1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

.cm-live {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 26px !important;
  padding: 0 8px !important;
  border-radius: 7px !important;
  background: rgba(14,203,129,.09) !important;
  border: 1px solid rgba(14,203,129,.22) !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

.cm-live__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #0ECB81;
  box-shadow: 0 0 0 2.5px rgba(14,203,129,.18);
  animation: cmLivePulse 2s ease-in-out infinite;
  flex: 0 0 5px;
}

.cm-live__txt { font-size: 8.5px; font-weight: 850; letter-spacing: .07em; color: #0ECB81; line-height: 1; }
.cm-live__time { font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 9.5px; font-weight: 700; color: rgba(14,203,129,.72); font-variant-numeric: tabular-nums; line-height: 1; }

@keyframes cmLivePulse { 0%,100% { opacity:.45; } 50% { opacity:1; } }

/* ==========================================================================
   2) CABEÇALHO DO PAR
   ========================================================================== */
.pair-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px 12px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 70%),
    #131F33 !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  box-sizing: border-box !important;
}

.pair-bar__left { display: contents !important; }

.pair-picker {
  order: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 11px !important;
  background: #182742 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #F5F7FA !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  cursor: pointer;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
}

.pair-picker::before { content: none !important; display: none !important; }

.pair-bar__price {
  order: 2 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  margin-left: auto !important;
  min-width: 0 !important;
}

.pair-bar__price .pbp__value {
  font-family: 'SF Mono', ui-monospace, Menlo, monospace !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  color: #0ECB81 !important;
}

.pair-bar__price .pbp__value[data-trend="down"] { color: #F6465D !important; }

.pair-bar__price .cm-arrow {
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.pair-bar__price .cm-pct,
.pair-bar__price #pairChange {
  display: inline-flex !important;
  align-items: center !important;
  height: 22px !important;
  padding: 0 8px !important;
  border-radius: 7px !important;
  font-family: Inter, -apple-system, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

.pair-bar__price .cm-pct[data-sign="pos"] {
  color: #0ECB81 !important;
  background: rgba(14,203,129,.13) !important;
  border: 1px solid rgba(14,203,129,.30) !important;
}

.pair-bar__price .cm-pct[data-sign="neg"] {
  color: #F6465D !important;
  background: rgba(246,70,93,.13) !important;
  border: 1px solid rgba(246,70,93,.30) !important;
}

/* ==========================================================================
   3) MÉTRICAS — 5 em uma linha
   ========================================================================== */
.pair-bar__stats {
  order: 3 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-template-rows: 46px !important;
  gap: 5px !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.pair-bar__stats > .pbs {
  grid-column: auto !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 2px !important;
  min-width: 0 !important;
  height: 46px !important;
  padding: 6px 7px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.pair-bar__stats > .pbs > span {
  display: block !important;
  font-size: 7px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #8996AA !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.pair-bar__stats > .pbs > b {
  display: block !important;
  font-family: 'SF Mono', ui-monospace, Menlo, monospace !important;
  font-size: 9.5px !important;
  line-height: 1.15 !important;
  font-weight: 750 !important;
  color: #F5F7FA !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* ==========================================================================
   4) GRÁFICO
   ========================================================================== */
@media (max-width: 900px) {
  .trade-main > .chart-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    width: calc(100% + 24px) !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    overflow: hidden !important;
  }

  .trade-main > .chart-panel .chart-toolbar {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    flex: 0 0 46px !important;
    padding: 0 10px !important;
  }

  .trade-main > .chart-panel > canvas {
    width: 100% !important;
    height: 168px !important;
    min-height: 168px !important;
    max-height: 168px !important;
    display: block !important;
    flex: 0 0 168px !important;
  }
}

/* ==========================================================================
   5) AJUSTES PARA TELAS ESTREITAS
   ========================================================================== */
@media (max-width: 380px) {
  #marketTabs .mtab { padding: 0 9px !important; gap: 5px !important; }
  #marketTabs .mtab .cm-mkt-lbl { font-size: 11.5px !important; }
  #marketTabs .mtab .cm-mkt-ico { width: 13px !important; height: 13px !important; flex-basis: 13px !important; }
  #marketTabs .mtab .cm-mkt-ico svg { width: 13px !important; height: 13px !important; }

  .cm-live__time { display: none !important; }

  .pair-bar__price .pbp__value { font-size: 23px !important; }
  .pair-picker { height: 36px !important; font-size: 13px !important; }

  .pair-bar__stats > .pbs { padding: 5px 6px !important; }
  .pair-bar__stats > .pbs > span { font-size: 6.5px !important; }
  .pair-bar__stats > .pbs > b { font-size: 9px !important; }

  .trade-main > .chart-panel > canvas { height: 150px !important; min-height: 150px !important; max-height: 150px !important; flex-basis: 150px !important; }
}

@media (max-width: 345px) {
  #marketTabs .mtab .cm-mkt-ico { display: none !important; }
  #marketTabs .mtab { padding: 0 8px !important; }
  .trade-subnav__pair { display: none !important; }
}

/* ==========================================================================
   6) ACESSIBILIDADE
   ========================================================================== */
#marketTabs .mtab:focus-visible,
.pair-picker:focus-visible {
  outline: 2px solid rgba(56,107,255,.7);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #marketTabs .cm-mkt-indicator,
  #marketTabs .mtab,
  .cm-live__dot { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   7) CORREÇÕES DA AUDITORIA (390×844)

   MEDIDO:
     .trade-subnav__pair  x=307 → right=530  (tela 390)  → vaza 140px
     .pbp__value          w=136, scrollW=138           → preço cortado
     .pair-bar__stats     5 cards, mas 2 linhas (179 e 245)
     .chart-panel         mostra "Velas", "BTC/USDT · 1m" e "Candle" (ruído)
   ========================================================================== */

/* ---------- 1) barra de mercados: nada vaza ---------- */
@media (max-width: 900px) {
  .trade-subnav {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  #marketTabs {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
  }

  /* o par encolhe e some antes de vazar */
  .trade-subnav__pair {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 96px !important;
    margin-left: auto !important;
    overflow: hidden !important;
  }

  #subSymbol {
    max-width: 96px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* 420px ou menos: par sai (já está grande no cabeçalho do par) */
@media (max-width: 420px) {
  .trade-subnav__pair { display: none !important; }
  #marketTabs { flex: 1 1 auto !important; justify-content: center !important; }
  #marketTabs .mtab { flex: 1 1 0 !important; min-width: 0 !important; justify-content: center !important; padding: 0 6px !important; }
}

/* ---------- 2) preço: nunca cortado ---------- */
@media (max-width: 900px) {
  .pair-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .pair-picker {
    flex: 0 0 auto !important;
    max-width: 46% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .pair-bar__price {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin-left: auto !important;
  }

  .pair-bar__price .pbp__value {
    font-size: 24px !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .pair-bar__price .cm-pct,
  .pair-bar__price #pairChange {
    flex: 0 0 auto !important;
    font-size: 10.5px !important;
    padding: 0 6px !important;
    height: 20px !important;
  }
}

@media (max-width: 380px) {
  .pair-bar__price .pbp__value { font-size: 21px !important; }
  .pair-picker { max-width: 44% !important; font-size: 12.5px !important; }
}

/* ---------- 3) métricas: as 5 na MESMA linha ---------- */
@media (max-width: 900px) {
  .pair-bar__stats {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: 46px !important;
    gap: 4px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .pair-bar__stats > .pbs,
  .pair-bar__stats > .pbs:nth-child(3),
  .pair-bar__stats > .pbs:nth-child(4),
  .pair-bar__stats > .pbs:nth-child(5) {
    grid-column: auto !important;
    grid-row: 1 !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 5px 6px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .pair-bar__stats > .pbs > span {
    font-size: 6.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .pair-bar__stats > .pbs > b {
    font-size: 9px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ---------- 4) gráfico: remove ruído do toolbar ---------- */
@media (max-width: 900px) {
  /* "Velas" e "BTC/USDT · 1m" repetem o que já está no cabeçalho */
  .chart-panel .chart-type,
  .chart-panel .chart-legend,
  .chart-panel .cm-chart-note { display: none !important; }

  /* timeframes ocupam a linha; Livro encostado à direita */
  .chart-panel .chart-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .chart-panel .chart-tfs {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: space-between !important;
  }

  .chart-panel .chart-tf {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 4px !important;
    font-size: 10.5px !important;
  }

  .chart-panel .cm-book-btn {
    flex: 0 0 auto !important;
    width: 74px !important;
    max-width: 74px !important;
    font-size: 10.5px !important;
  }
}

/* ==========================================================================
   8) PREÇO: linha própria ABAIXO do picker (sem alargar o picker)
   Medido: .pair-bar__price w=91 para texto de 136px → cortava "64.750,5".
   ========================================================================== */
@media (max-width: 900px) {
  .pair-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
  }

  /* picker: largura do conteúdo, NUNCA estica */
  .pair-bar .pair-picker {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: max-content !important;
    min-width: 0 !important;
    height: 36px !important;
  }

  /* bloco do preço: linha 2 inteira */
  .pair-bar .pair-bar__price {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .pair-bar__price .pbp__value {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    font-size: 28px !important;
    line-height: 1 !important;
  }

  .pair-bar__price .cm-pct,
  .pair-bar__price #pairChange {
    flex: 0 0 auto !important;
    font-size: 11px !important;
    height: 21px !important;
    padding: 0 7px !important;
    align-self: center !important;
  }

  /* métricas na linha 3 */
  .pair-bar .pair-bar__stats {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }
}

@media (max-width: 380px) {
  .pair-bar__price .pbp__value { font-size: 25px !important; }
}

/* ==========================================================================
   9) TOOLBAR DO GRÁFICO: remove ruído ("Velas", "BTC/USDT · 1m", "Candle")
   ========================================================================== */
.chart-panel .chart-type,
.chart-panel .chart-legend,
.chart-panel .cm-chart-note,
.chart-panel .chart-toolbar__right .chart-legend {
  display: none !important;
  visibility: hidden !important;
}

@media (max-width: 900px) {
  .chart-panel .chart-toolbar {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  .chart-panel .chart-toolbar__left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .chart-panel .chart-tfs {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 1px !important;
    padding: 2px !important;
    justify-content: space-between !important;
  }

  .chart-panel .chart-tf {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 2px !important;
    font-size: 10px !important;
  }

  .chart-panel .cm-book-btn {
    flex: 0 0 auto !important;
    width: 40px !important;
    max-width: 40px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }

  .chart-panel .cm-book-btn svg {
    width: 15px !important;
    height: 15px !important;
    margin: 0 auto !important;
  }
}

/* ==========================================================================
   10) SUB-NAV: a barra já tem os 3 botões; o bloco da direita (AO VIVO)
       precisa encolher/esconder em telas estreitas para não vazar.
   ========================================================================== */
@media (max-width: 900px) {
  .trade-subnav {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    min-height: 50px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #marketTabs {
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }

  #marketTabs .mtab {
    padding: 0 11px !important;
    gap: 5px !important;
    font-size: 12px !important;
  }

  /* bloco à direita (par / AO VIVO): some em telas pequenas */
  .trade-subnav__pair,
  .trade-subnav__right,
  .trade-subnav .cm-live,
  .trade-subnav .cm-mkt-live {
    display: none !important;
  }
}

@media (max-width: 380px) {
  #marketTabs .mtab { padding: 0 9px !important; }
  #marketTabs .mtab .cm-mkt-ico { width: 12px !important; height: 12px !important; flex-basis: 12px !important; }
}

/* ==========================================================================
   11) CAUSA RAIZ: .pair-bar__left estava com `display:flex`, então picker e
       preço ficavam lado a lado DENTRO dela (grid do pai não os alcançava).
       Forçando `display:contents`, os dois viram filhos diretos do grid.
   ========================================================================== */
@media (max-width: 900px) {
  .pair-bar > .pair-bar__left,
  .pair-bar .pair-bar__left {
    display: contents !important;
  }

  /* o preço é filho direto agora: linha 2 do grid */
  .pair-bar > .pair-bar__price {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: stretch !important;
    align-self: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .pair-bar > .pair-picker {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    width: auto !important;
    max-width: max-content !important;
  }

  .pair-bar > .pair-bar__stats {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }
}

/* ==========================================================================
   12) SETA ÚNICA: remove pseudo-elementos ▲/▼ do preço
   O DOM já tem 1 <span class="cm-arrow">; o ::after do CSS legado
   desenhava uma segunda seta ao lado.
   ========================================================================== */
.pair-bar__price .pbp__value::before,
.pair-bar__price .pbp__value::after,
.pair-bar__price .cm-pct::before,
.pair-bar__price .cm-pct::after,
.pair-bar__price #pairChange::before,
.pair-bar__price #pairChange::after {
  content: none !important;
  display: none !important;
}

/* a seta real fica encostada no preço */
.pair-bar__price .cm-arrow {
  display: inline-block !important;
  margin: 0 1px 0 4px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

/* ==========================================================================
   13) GRÁFICO: barra de preço acima do canvas (substitui "Velas/BTC/USDT")
   ========================================================================== */
@media (max-width: 900px) {
  /* o toolbar fica só com timeframes + Livro (já ocultamos o resto) */
  .chart-panel .chart-toolbar {
    justify-content: space-between !important;
  }

  /* Livro: só ícone, para caber */
  .chart-panel .cm-book-btn {
    width: 38px !important;
    max-width: 38px !important;
    min-width: 38px !important;
    height: 30px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .chart-panel .cm-book-btn svg {
    width: 15px !important;
    height: 15px !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* se o botão tiver texto, esconde (o ícone basta) */
  .chart-panel .cm-book-btn span,
  .chart-panel .cm-book-btn .lbl {
    display: none !important;
  }
}

/* ==========================================================================
   14) PAINEL DE ORDEM: "Preço / USDT" cortado no fim do card
   ========================================================================== */
@media (max-width: 900px) {
  .order-panel .order-field:first-of-type label,
  .order-panel .order-field:first-of-type .field-label {
    font-size: 10px !important;
    padding-bottom: 2px !important;
  }

  .order-panel .order-field {
    padding-bottom: 8px !important;
  }
}

/* ==========================================================================
   15) ACABAMENTO FINAL (vistos no print 390×844)

   a) O "$" do preço está minúsculo e desalinhado
   b) A seta ▲ está DENTRO do gradiente do número (parece parte dele)
   c) O toolbar do gráfico tem 44px de altura com timeframes apertados
   d) O livrinho virou só ícone (bom) mas sem tooltip visível
   ========================================================================== */
@media (max-width: 900px) {

  /* a) $ com peso e alinhamento coerentes */
  .pair-bar__price .pbp__value .pbp-sym,
  .pair-bar__price .pbp__value > span:first-child {
    font-size: .46em !important;
    font-weight: 700 !important;
    opacity: .55 !important;
    vertical-align: .42em !important;
    margin-right: 3px !important;
  }

  /* b) seta separada por espaço real, fora do gradiente */
  .pair-bar__price .cm-arrow {
    margin-left: 8px !important;
    font-size: 11px !important;
    color: #0ECB81 !important;
    align-self: center !important;
    transform: translateY(-2px) !important;
  }

  .pair-bar__price .cm-arrow.is-down { color: #F6465D !important; }

  /* a pílula de variação ganha mais respiro */
  .pair-bar__price .cm-pct,
  .pair-bar__price #pairChange {
    margin-left: 6px !important;
    align-self: center !important;
  }

  /* c) toolbar do gráfico: mais espaço para os timeframes */
  .chart-panel .chart-toolbar {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 8px !important;
    gap: 6px !important;
  }

  .chart-panel .chart-tfs {
    flex: 1 1 auto !important;
    height: 34px !important;
    padding: 3px !important;
    gap: 1px !important;
  }

  .chart-panel .chart-tf {
    flex: 1 1 0 !important;
    height: 28px !important;
    padding: 0 2px !important;
    font-size: 10.5px !important;
    min-width: 0 !important;
    border-radius: 6px !important;
  }

  /* d) o livrinho com ícone maior e área de toque confortável */
  .chart-panel .cm-book-btn {
    width: 44px !important;
    max-width: 44px !important;
    min-width: 44px !important;
    height: 34px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .chart-panel .cm-book-btn svg {
    width: 17px !important;
    height: 17px !important;
  }
}

/* ==========================================================================
   16) MÉTRICAS: respiro interno (as caixas estavam colando no texto)
   ========================================================================== */
@media (max-width: 900px) {
  .pair-bar__stats > .pbs {
    padding: 6px 8px !important;
    justify-content: center !important;
    gap: 3px !important;
  }

  .pair-bar__stats > .pbs > span {
    font-size: 6.8px !important;
    letter-spacing: .02em !important;
    opacity: .85 !important;
  }

  .pair-bar__stats > .pbs > b {
    font-size: 9.5px !important;
    letter-spacing: -.01em !important;
  }
}

@media (max-width: 380px) {
  .pair-bar__stats > .pbs { padding: 5px 6px !important; }
  .pair-bar__stats > .pbs > span { font-size: 6.2px !important; }
  .pair-bar__stats > .pbs > b { font-size: 8.8px !important; }
}

/* ==========================================================================
   17) MÉTRICAS: valores truncados ("$65.347,…") — fonte fluida até 380px
   ========================================================================== */
@media (max-width: 900px) {
  .pair-bar__stats > .pbs > b {
    font-size: clamp(8.2px, 2.45vw, 10px) !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -.035em !important;
  }

  .pair-bar__stats > .pbs {
    padding: 6px 6px !important;
  }

  /* a primeira e a segunda coluna (preços longos) ganham 1px extra */
  .pair-bar__stats > .pbs:nth-child(1),
  .pair-bar__stats > .pbs:nth-child(2) {
    padding: 6px 5px !important;
  }
}

@media (max-width: 380px) {
  .pair-bar__stats > .pbs > b { font-size: clamp(7.8px, 2.5vw, 9px) !important; }
  .pair-bar__stats > .pbs > span { font-size: 6px !important; }
}

/* ==========================================================================
   18) COERÊNCIA: a pílula "+2,34%" é de 24h, a linha é do candle.
   Sem rótulo parecem contraditórias. Aqui a pílula ganha o sufixo "24h".
   ========================================================================== */
.pair-bar__price .cm-pct::after,
.pair-bar__price #pairChange::after {
  content: " · 24h";
  font-size: .78em;
  font-weight: 650;
  opacity: .62;
  letter-spacing: 0;
}

/* ==========================================================================
   18b) A pílula de variação é reescrita pelo JS a cada ciclo — o ::after
   some. Aqui o rótulo é aplicado no elemento PAI, fora do nó de texto.
   ========================================================================== */
.pair-bar__price.cm-pct-24h::before {
  content: "24h";
  order: -1;
  align-self: center;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #6B7480;
  margin-right: -1px;
  margin-left: 5px;
  line-height: 1;
}

/* ==========================================================================
   19) GRÁFICO: canvas deslocado 10px e faixa morta no eixo direito

   MEDIDO: .chart-panel  x=10 w=356 (right=366)
           canvas       x=10 w=346 (right=356)  → 10px de faixa morta
   O canvas estava com largura fixa herdada e não acompanhava o painel.
   ========================================================================== */
@media (max-width: 900px) {
  .trade-main > .chart-panel {
    margin-left: -12px !important;
    margin-right: -12px !important;
    width: calc(100% + 24px) !important;
    max-width: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .trade-main > .chart-panel > canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    flex: 0 0 300px !important;
  }

  /* toolbar alinhada ao canvas, sem recuo lateral */
  .trade-main > .chart-panel .chart-toolbar {
    padding: 0 12px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* telas menores: gráfico um pouco mais baixo */
@media (max-width: 380px) {
  .trade-main > .chart-panel > canvas {
    height: 270px !important;
    min-height: 270px !important;
    max-height: 270px !important;
    flex: 0 0 270px !important;
  }
}

/* ==========================================================================
   20) REFINO FINAL DO MOBILE (medido no print 390×844)

   A) "BTC/USDT" cortado na barra de mercados  → reduz padding dos tabs
   B) OHLC do canvas colidindo com a toolbar    → toolbar com fundo sólido
   C) gráfico colado nas bordas                 → painel com cantos e respiro
   ========================================================================== */
@media (max-width: 900px) {

  /* ---- A) sobra espaço para o par à direita ---- */
  #marketTabs .mtab { padding: 0 10px !important; gap: 5px !important; }
  #marketTabs .mtab .cm-mkt-lbl { font-size: 11.5px !important; }
  #marketTabs .mtab .cm-mkt-ico { width: 13px !important; height: 13px !important; flex: 0 0 13px !important; }
  #marketTabs .mtab .cm-mkt-ico svg { width: 13px !important; height: 13px !important; }

  .trade-subnav { gap: 6px !important; padding: 9px 10px !important; }

  #subSymbol {
    padding: 0 7px !important;
    font-size: 10.5px !important;
    letter-spacing: -.01em !important;
    overflow: visible !important;
  }

  /* ---- B) toolbar sólida: nada do canvas por cima ---- */
  .trade-main > .chart-panel .chart-toolbar {
    position: relative !important;
    z-index: 5 !important;
    background: #0B1119 !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    flex: 0 0 50px !important;
  }

  /* ---- C) painel do gráfico: cartão com respiro e cantos ---- */
  .trade-main > .chart-panel {
    margin-left: -4px !important;
    margin-right: -4px !important;
    width: calc(100% + 8px) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-left: 1px solid rgba(255,255,255,.07) !important;
    border-right: 1px solid rgba(255,255,255,.07) !important;
    background: #0B1119 !important;
    box-shadow: 0 10px 30px -22px rgba(0,0,0,.95) !important;
  }

  .trade-main > .chart-panel > canvas {
    border-radius: 0 0 14px 14px !important;
    height: 288px !important;
    min-height: 288px !important;
    max-height: 288px !important;
    flex: 0 0 288px !important;
  }
}

@media (max-width: 380px) {
  #marketTabs .mtab { padding: 0 8px !important; }
  #marketTabs .mtab .cm-mkt-lbl { font-size: 11px !important; }
  .trade-main > .chart-panel > canvas {
    height: 262px !important; min-height: 262px !important; max-height: 262px !important;
    flex: 0 0 262px !important;
  }
}