/* ============================================================
   AxionMesk — Experiência MOBILE (celular)
   ------------------------------------------------------------
   Melhorias aplicadas só em telas pequenas (<= 768px).
   Carregado DEPOIS de styles.css e css/auth.css, então
   sobrescreve o que for necessário.
   ============================================================ */

/* ---------- Regras gerais ---------- */
@media (max-width: 768px) {

  /* Rolagem suave e sem "pulos" */
  html, body { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }

  /* Botões com altura confortável para o dedo */
  .btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
  .btn--sm { min-height: 44px; }
  /* Nas tabelas do celular viram CARDS, então o botão deve ser grande
     e fácil de tocar (antes era 34px — pequeno demais para o dedo). */
  table .btn, table .btn--sm {
    min-height: 46px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 14px;
    font-weight: 700;
    width: 100%;
  }

  /* Inputs maiores e mais fáceis de tocar */
  input, select, textarea { min-height: 46px; font-size: 16px !important; }

  /* Evita que qualquer coisa estoure a largura */
  img, svg, video, table { max-width: 100%; }

  /* ---------- CABEÇALHO ---------- */
  /* Contém o menu rolável: ele rola sozinho, sem empurrar a página */
  .app-header { overflow: hidden; }

  /* Na home (index), a barra de navegação some no celular -> empurra os
     botões Entrar/Cadastre-se para a DIREITA */
  .header__inner { justify-content: space-between; }
  .header__actions { margin-left: auto; }

  /* ---------- OTIMIZAÇÃO DO CABEÇALHO (páginas internas) ----------
     Com o menu inferior ativo, os links do topo são redundantes.
     Escondemos os links de página e mantemos só avatar + Sair. */
  body.tem-bottom-nav .app-header__right > a.btn--link { display: none !important; }
  body.tem-bottom-nav .app-header__right { justify-content: flex-end; }
  /* A faixa do menu vira uma linha única compacta */
  body.tem-bottom-nav .app-header { flex-wrap: nowrap !important; align-items: center; }
  body.tem-bottom-nav .app-header__right { overflow: visible !important; }

  .app-header__right {
    scroll-snap-type: x proximity;
    -ms-overflow-style: none;
    overflow-x: auto;
    max-width: 100%;
  }
  .app-header__right > * { scroll-snap-align: start; }

  /* Esconde a barra de rolagem do menu */
  .app-header__right::-webkit-scrollbar { height: 0; display: none; }

  /* ---------- GRADE DE SALDOS (conta) ---------- */
  .balance-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }

  /* ---------- MERCADOS / TABELAS ---------- */
  /* Tabelas viram "cards" roláveis na horizontal sem quebrar o layout */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap::-webkit-scrollbar { height: 6px; }
  .table-wrap::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 3px; }
  table { min-width: 560px; }

  /* ---------- NEGOCIAR (gráfico e painéis) ---------- */
  /* Evita a rolagem horizontal: força as colunas a empilharem */
  .trade-layout, .trade-grid, .orderbook-layout { grid-template-columns: 1fr !important; }
  .chart-wrap, .trade-chart, canvas { max-width: 100% !important; }

  /* (sub-navegação do trade: ver bloco "NEGOCIAR" mais abaixo) */

  /* Barra do par: preço e estatísticas empilham */
  .pair-bar { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; }
  .pair-bar__left { flex-wrap: wrap !important; gap: 12px !important; }
  .pair-bar__price { width: 100% !important; text-align: left !important; }
  .pbp__value { font-size: 22px; }
  .pair-bar__stats {
    display: grid !important; grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px 16px !important; width: 100% !important;
  }
  .pbs { min-width: 0 !important; }
  .pbs__v, .pbs__value { font-size: 14px; word-break: break-word; }

  /* Área principal do trade e painéis ficam com 1 coluna e cabem na tela */
  .trade-main { grid-template-columns: 1fr !important; width: 100% !important; }
  .trade-main > * { min-width: 0 !important; width: 100% !important; }
  .chart-panel, .order-panel, .book-panel { width: 100% !important; min-width: 0 !important; }

  /* ---------- CARTÕES E PAINÉIS ---------- */
  .wallet-section { padding: 0 14px !important; }
  .withdraw-layout, .withdraw-panel { grid-template-columns: 1fr !important; }

  /* ---------- MODAIS ---------- */
  /* Modais ocupam a tela toda no celular, com rolagem */
  #kycModal > div, .modal > div, [id$="Modal"] > div {
    max-width: 100% !important; margin: 0 !important; border-radius: 14px !important;
  }

  /* ---------- FILTROS (mercados, NFT) ---------- */
  .filters, .filters__row, .nft-filters {
    flex-wrap: wrap !important; gap: 10px !important;
  }
  .filters__search, .search-box, .filters input[type="search"], .filters input[type="text"] {
    width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important;
  }
  /* Abas de ordenação rolam horizontalmente em vez de quebrar */
  .filters__top { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .filters__search { min-width: 0 !important; flex: 1 1 auto !important; width: 100% !important; }
  .filters__sort {
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important; max-width: 100%;
  }
  .filters__sort::-webkit-scrollbar { height: 0; display: none; }
  .filters__chips { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
  .filters__chips::-webkit-scrollbar { height: 0; display: none; }
  .sort-tab, .fchip, .chip { flex: none; }

  /* ---------- TICKER (barra de cotações) ---------- */
  /* Contém o transbordo do track animado */
  .ticker { overflow: hidden; }
  .ticker__track { max-width: none; }

  /* Itens do ticker NÃO podem encolher (senão o texto se sobrepõe) */
  .news-ticker { display: flex !important; overflow-x: auto !important; }
  .news-ticker .ntick { flex: 0 0 auto !important; white-space: nowrap !important; }
  .ticker__track > * { flex: 0 0 auto !important; }

  /* ---------- TIPOGRAFIA MOBILE (leitura confortável) ---------- */
  /* Legendas e textos de apoio um pouco maiores */
  .stat-label, .stat__label, .hero__stats small,
  .nft-stat small, .balance-card__coin, .wd-label,
  .filters__sort button, .sort-tab, .chip, .fchip {
    font-size: 12.5px !important;
  }
  /* Descrições não ficam minúsculas */
  .desc, .page-sub, .wallet-hero__sub, .hero__sub {
    font-size: 14px !important; line-height: 1.55 !important;
  }
  /* Valores e números em destaque */
  .balance-card__val, .stat__value, .nft-stat b { font-size: 17px !important; }

  /* ---------- ORNAMENTAÇÃO / ESPAÇAMENTO ---------- */
  /* Cards com respiro e sombra suave (profundidade) */
  .balance-card, .market-card, .wallet-section, .table-wrap {
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
  }
  /* Títulos de seção mais espaçados */
  .section-title { margin-top: 26px !important; }

  /* ---------- TOQUE: realce ao pressionar ---------- */
  .balance-card:active, .market-card:active { transform: scale(.985); transition: transform .1s; }

  /* ---------- Proteção geral contra rolagem horizontal ---------- */
  main, section, .container, .page-body { max-width: 100% !important; }
  * { min-width: 0; }

}

/* ---------- Telas muito estreitas (<= 420px) ---------- */
@media (max-width: 420px) {
  .balance-grid { grid-template-columns: 1fr !important; }
  .page-body { padding: 20px 14px 90px !important; }
  .page-title { font-size: 22px; }
}

/* ---------- Feedback de toque (interatividade) ---------- */
@media (hover: none) {
  .btn:active { transform: scale(.97); transition: transform .08s; }
  .wallet-tab:active, .auth-tab:active { opacity: .75; }
  .market-card:active, .coin-row:active { background: var(--bg-3); }
  .wd-asset:active, .logo-opt:active { transform: scale(.96); }
  a, button { -webkit-tap-highlight-color: rgba(56,107,255,.16); }
}

/* ============================================================
   POLIMENTO MOBILE — interatividade (leve, sem pesar no celular)
   ============================================================ */
@media (max-width: 768px) {

  /* (A animação "stagger" dos cards foi removida: muitas animações
     simultâneas deixavam o celular lento. A fluidez vem da entrada de página.) */

  /* Botões: resposta imediata ao toque */
  .btn, .wallet-tab, .auth-tab, .sort-tab, .chip, .wd-asset, .logo-opt {
    -webkit-tap-highlight-color: transparent;
    transition: transform .09s ease, background .15s ease, opacity .15s ease;
  }
  .btn:active { transform: scale(.96); }
  .wallet-tab:active, .auth-tab:active { transform: scale(.97); }
  .wd-asset:active, .logo-opt:active, .balance-card:active, .market-card:active { transform: scale(.97); }

  /* Barra de rolagem estilizada e discreta */
  ::-webkit-scrollbar { width: 5px; height: 5px; }
  ::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 3px; }

  /* Cabeçalho ganha sombra ao rolar (profundidade) */
  .app-header, .header { box-shadow: 0 1px 0 var(--border); }

  /* Cartões com leve elevação e transição */
  .balance-card, .market-card, .table-wrap, .wallet-section, .wd-card {
    transition: box-shadow .2s ease, transform .12s ease;
  }

  /* Botão principal com brilho sutil (destaque) */
  .btn--primary { box-shadow: 0 3px 14px rgba(56,107,255,.24); }

  /* Badges mais arredondados e legíveis */
  .badge { font-size: 10.5px; padding: 4px 10px; }

  /* Espaço extra no fim da página (não colar no rodapé/barra do navegador) */
  .page-body { padding-bottom: 60px; }
}

/* Respeita quem prefere menos animação (acessibilidade).
   Aplicado só às animações de entrada, preservando o feedback de toque. */
@media (prefers-reduced-motion: reduce) {
  body.pagina-entrando { animation: none !important; }
  .bottom-nav { animation: none !important; }
}

/* ============================================================
   MENU INFERIOR (mobile) — barra de navegação estilo app
   Aparece só no celular, em páginas internas (pós-login).
   ============================================================ */
@media (max-width: 768px) {

  .bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 2px;
    /* topo com espaço extra para o botão central elevado NÃO ser cortado */
    padding: 26px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    /* Fundo SÓLIDO (sem blur): o "backdrop-filter" e pesado no celular
       e causava engasgos ao rolar/trocar de pagina. */
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .35);
    animation: bxNavUp .3s ease both;
    overflow: visible;
  }

  @keyframes bxNavUp {
    from { transform: translateY(100%); opacity: .4; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  .bottom-nav__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 2px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-muted);
    position: relative;
    transition: color .18s ease, background .18s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;
    /* botões <button> do menu: remove aparência e foco padrão do navegador */
    background: transparent;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    outline: none;
  }
  .bottom-nav__item:focus, .bottom-nav__item:focus-visible { outline: none; background: transparent; }

  .bottom-nav__item:active { transform: scale(.94); }

  .bottom-nav__icon {
    display: grid; place-items: center;
    width: 26px; height: 26px;
    transition: transform .18s ease;
  }
  .bottom-nav__label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
  }

  /* Item ativo: cor de destaque + indicador superior */
  .bottom-nav__item.active {
    color: var(--yellow);
    background: color-mix(in srgb, var(--yellow) 10%, transparent);
  }
  .bottom-nav__item.active .bottom-nav__icon { transform: translateY(-1px) scale(1.06); }
  .bottom-nav__item.active::before {
    content: '';
    position: absolute;
    top: -6px; left: 50%;
    transform: translateX(-50%);
    width: 22px; height: 3px;
    border-radius: 0 0 4px 4px;
    background: var(--yellow);
    box-shadow: 0 0 10px color-mix(in srgb, var(--yellow) 70%, transparent);
  }

  /* Botão central "Depositar" — ação principal, bem CENTRADO */
  .bottom-nav__item--destaque {
    justify-content: flex-start;   /* rótulo alinha na base, igual aos vizinhos */
    padding-top: 0;
  }
  .bottom-nav__item--destaque .bottom-nav__icon {
    width: 48px; height: 48px;
    margin-top: -14px;          /* sobe o círculo, sem estourar o topo da barra */
    border-radius: 50%;
    background: linear-gradient(150deg, var(--yellow) 0%, #d9a400 100%);
    color: #131F33;
    box-shadow:
      0 6px 18px color-mix(in srgb, var(--yellow) 45%, transparent),
      0 0 0 4px color-mix(in srgb, var(--bg-2) 95%, transparent);
    border: none;
    transition: transform .18s ease, box-shadow .2s ease;
  }
  .bottom-nav__item--destaque .bottom-nav__icon svg {
    width: 26px; height: 26px;
    color: #131F33;
  }
  .bottom-nav__item--destaque .bottom-nav__label {
    margin-top: 2px;
    color: var(--yellow);
    font-weight: 700;
  }
  .bottom-nav__item--destaque:active .bottom-nav__icon {
    transform: scale(.92);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--yellow) 40%, transparent);
  }
  .bottom-nav__item--destaque.active::before { display: none; }

  /* ---------- Espaço para o conteúdo não ficar sob o menu ---------- */
  body.tem-bottom-nav .page-body { padding-bottom: 96px !important; }
  body.tem-bottom-nav main { padding-bottom: 96px; }
  /* Evita que o rodapé/fim de página fique escondido */
  body.tem-bottom-nav .footer { padding-bottom: 84px; }
}

/* Em telas de desktop, garante que o menu nunca apareça */
@media (min-width: 769px) {
  .bottom-nav { display: none !important; }
}

/* ============================================================
   NEGOCIAR (mobile) — layout de trading compacto e fluido
   ============================================================ */
@media (max-width: 768px) {

  /* ---------- Faixa do par (subnav) ---------- */
  .trade-subnav {
    /* No celular ela rola junto com a página (sem sticky) para não
       sobrepor os campos do formulário */
    position: static !important;
    padding: 10px 14px !important;
    background: var(--bg-2) !important;
    border-bottom: 1px solid var(--border);
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px 10px !important;
  }
  /* Abas Spot/Futuros/Margem — segmentadas e compactas */
  .trade-subnav__tabs {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    background: var(--bg-3);
    border-radius: 10px;
    padding: 3px;
    gap: 2px !important;
    overflow: visible !important;
    max-width: 100%;
  }
  .trade-subnav__tabs .mtab {
    padding: 6px 12px !important;
    font-size: 12.5px !important;
    border-radius: 8px !important;
    white-space: nowrap;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }
  /* Par + preço à direita, numa linha */
  .trade-subnav__pair {
    display: flex !important; align-items: baseline; gap: 7px;
    font-size: 13px !important;
    white-space: nowrap;
    margin-left: auto;
    flex: 0 0 auto !important;
  }
  .trade-subnav__pair .tsp__sym { font-weight: 800; font-size: 14px; }
  .trade-subnav__pair .tsp__price { font-weight: 700; }
  .trade-subnav__badge { display: none !important; }

  /* ---------- ESCONDE a barra do par duplicada ---------- */
  /* As infos (máx/mín/vol) vão para uma faixa compacta rolável */
  .pair-bar {
    display: block !important;
    padding: 12px 14px !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
  }
  /* Some o seletor e o preço grande (já estão no topo) */
  .pair-bar__left { display: none !important; }
  /* Estatísticas viram "chips" roláveis na horizontal */
  .pair-bar__stats {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 8px !important;
    width: 100% !important;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .pair-bar__stats::-webkit-scrollbar { height: 0; display: none; }
  .pair-bar__stats .pbs {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 12px !important;
    gap: 2px !important;
  }
  .pair-bar__stats .pbs span { font-size: 11px !important; white-space: nowrap; }
  .pair-bar__stats .pbs b { font-size: 13px !important; white-space: nowrap; }

  /* ---------- Grade principal: 1 coluna, com o gráfico primeiro ---------- */
  .trade-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 14px !important;
  }
  /* Ordem visual no celular: gráfico -> ordem -> (book oculto) */
  .chart-panel { order: 1; }
  .order-panel { order: 2; }
  .book-panel  { display: none !important; }

  /* ---------- GRÁFICO ---------- */
  .chart-panel {
    padding: 10px !important;
    border-radius: 14px;
    overflow: hidden;
  }
  .chart-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 8px !important;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .chart-toolbar::-webkit-scrollbar { height: 0; display: none; }
  .chart-toolbar__left, .chart-toolbar__right { flex: 0 0 auto !important; }
  .chart-tf { padding: 6px 11px !important; font-size: 12.5px !important; }
  .chart-legend { font-size: 11px !important; white-space: nowrap; }
  /* Gráfico mais alto e largo no celular */
  .chart-panel canvas, #chart {
    width: 100% !important;
    height: 300px !important;
    max-width: 100% !important;
    display: block;
  }

  /* ---------- PAINEL DE ORDEM (compra/venda) ---------- */
  .order-panel {
    padding: 16px 14px !important;
    border-radius: 14px;
  }
  /* Compra/Vender em botões grandes e claros */
  .side-toggle { gap: 8px !important; margin-bottom: 14px; }
  .side-btn {
    padding: 13px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
  }
  .side-btn.buy.active { background: var(--green) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(14,203,129,.3); }
  .side-btn.sell.active { background: var(--red) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(246,70,93,.3); }

  /* Tipos de ordem */
  .order-types { gap: 6px !important; margin-bottom: 14px; }
  .otype { padding: 8px 10px !important; font-size: 13px !important; border-radius: 8px !important; }

  /* Campos grandes e confortáveis */
  .order-field { margin-bottom: 12px !important; }
  .order-field label { font-size: 13px !important; margin-bottom: 6px !important; }
  .order-field input[type="number"] {
    height: 48px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
  }
  .order-quick button, .order-quick .oq-btn, #quickPct button {
    padding: 9px 4px !important;
    font-size: 12.5px !important;
    border-radius: 8px !important;
  }
  .order-totals { margin: 14px 0 !important; }
  .order-total strong { font-size: 16px !important; }

  /* Botão principal grande e destacado */
  #submitOrder {
    height: 52px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
  }
  .order-balance { font-size: 12.5px !important; text-align: center; margin-top: 10px !important; }

  /* ---------- Abas de ordens (abertas / histórico / negociações) ---------- */
  .orders-tabs {
    display: flex !important; flex-wrap: nowrap !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 8px !important;
    padding-bottom: 4px;
  }
  .orders-tabs::-webkit-scrollbar { height: 0; display: none; }
  .orders-tabs .orders-tab {
    flex: 0 0 auto !important; white-space: nowrap;
    padding: 9px 14px !important; font-size: 13px !important;
    border-radius: 9px !important;
  }
  /* A tabela de ordens rola dentro do próprio card */
  .orders-panel, .open-orders { overflow: hidden; }
  .orders-panel .table-wrap { overflow-x: auto; }
  .orders-panel { padding: 14px 12px !important; }

  /* Ajusta o "espaço extra" já que o book some (página fica mais curta) */
  /* Espaço no fim para o menu inferior NÃO cobrir o último card/ordem */
  .trade-wrap { padding-bottom: 110px !important; }

  /* ---------- Toasts/avisos não ficam sob o menu inferior ---------- */
  .toast, .toastAdmin, .notify, #toast {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Em telas bem estreitas, afina mais ainda */
@media (max-width: 380px) {
  .trade-subnav__tabs .mtab { padding: 6px 10px !important; font-size: 12px !important; }
  .trade-subnav__pair .tsp__sym { font-size: 13px; }
  .chart-panel canvas, #chart { height: 240px !important; }
}

/* ============================================================
   EMBELEZAMENTO — Cards de saldo, patrimônio e hierarquia visual
   ============================================================ */

/* ---------- Card principal de patrimônio (hero do saldo) ---------- */
.saldo-hero {
  grid-column: 1 / -1;   /* ocupa a largura toda */
  position: relative;
  overflow: hidden;
  padding: 22px 22px 20px;
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(56,107,255,.20) 0%, transparent 55%),
    linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);
  border: 1px solid var(--border);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
.saldo-hero::after {
  content: '';
  position: absolute; right: -30px; top: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(56,107,255,.24), transparent 70%);
  pointer-events: none;
}
.saldo-hero__label { font-size: 12.5px; color: var(--text-muted); font-weight: 600; letter-spacing: .02em; }
.saldo-hero__val {
  font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin-top: 6px;
  background: linear-gradient(92deg, var(--yellow) 0%, #ffd76a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.saldo-hero__sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.saldo-hero__actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.saldo-hero__actions .btn { min-height: 40px; border-radius: 10px; }

/* ---------- Cards de saldo bonitos ---------- */
.balance-card--nice {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; border-radius: 16px;
  background: linear-gradient(160deg, var(--bg-2) 0%, color-mix(in srgb, var(--bg-3) 70%, var(--bg-2)) 100%);
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  position: relative; overflow: hidden;
}
.balance-card--nice::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--yellow), transparent);
  opacity: .6;
}
.bc-top { display: flex; align-items: center; gap: 10px; }
.bc-name { font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.balance-card--nice .balance-card__val { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.bc-sub { font-size: 12px; color: var(--text-muted); }

/* ---------- Ajustes de hierarquia no celular ---------- */
@media (max-width: 768px) {
  .saldo-hero { padding: 20px 18px 18px; border-radius: 16px; }
  .saldo-hero__val { font-size: 27px; }
  .balance-grid { gap: 12px !important; }
  .balance-card--nice { padding: 14px; border-radius: 14px; }
  .balance-card--nice .balance-card__val { font-size: 17px; }

  /* Título da página ganha um destaque sutil */
  .page-title {
    font-size: 24px !important;
    background: linear-gradient(92deg, var(--text) 0%, var(--text-muted) 140%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }

  /* Seções com respiro */
  .section-title { position: relative; padding-left: 12px; }
  .section-title::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 18px; border-radius: 3px;
    background: linear-gradient(var(--yellow), color-mix(in srgb, var(--yellow) 30%, transparent));
  }
}

/* ============================================================
   MICRO-INTERAÇÕES — dar vida ao sistema no celular
   ============================================================ */
@media (max-width: 768px) and (hover: none) {

  /* Efeito "onda" (ripple) ao tocar em botões e itens */
  /* OBS: .bottom-nav__item fica FORA daqui, pois o overflow:hidden do ripple
     cortava o botão central elevado do menu inferior. */
  .btn, .wallet-tab, .wd-asset, .side-btn, .otype,
  .coin-row, .market-card, .nft-card {
    position: relative;
    overflow: hidden;
  }
  .btn::after, .bottom-nav__item::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 0; height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    transform: translate(-50%, -50%);
    transition: width .35s ease, height .35s ease, opacity .35s ease;
    opacity: 0;
    pointer-events: none;
  }
  .btn:active::after, .bottom-nav__item:active::after {
    width: 160%; height: 300%;
    opacity: 1;
    transition: width 0s, height 0s, opacity 0s;
  }

  /* Separador com gradiente (mais elegante que linha dura) */
  .store-sep, hr {
    border: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
  }

  /* Animações de "pulso" nos valores foram REMOVIDAS: somavam muitas
     animações simultâneas e deixavam o celular pesado/lento. */

  /* Cards de moeda: realce com brilho na borda ao tocar */
  .balance-card--nice:active,
  .balance-card:active {
    border-color: color-mix(in srgb, var(--yellow) 45%, var(--border));
    box-shadow: 0 6px 22px rgba(56,107,255,.16);
  }

  /* Inputs ganham foco visível e elegante */
  input:focus, select:focus, textarea:focus {
    border-color: var(--yellow) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 18%, transparent) !important;
    outline: none;
  }

  /* Scroll mais suave */
  html { scroll-behavior: smooth; }

  /* OBS: foi REMOVIDO o seletor ':has(input:focus)' que escondia o menu
     quando o teclado abria. Ele e muito custoso para o celular (o navegador
     reavalia a pagina inteira a cada foco) e causava travamentos. */
}

/* ============================================================
   PAINEL "MAIS" (mobile) — todas as áreas em uma folha deslizante
   ============================================================ */
@media (max-width: 768px) {

  .mais-fundo {
    position: fixed; inset: 0;
    /* Fundo sólido (sem blur), por desempenho no celular */
    background: rgba(0,0,0,.6);
    opacity: 0; visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
    z-index: 70;
  }
  .mais-fundo.aberto { opacity: 1; visibility: visible; }

  .mais-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 71;
    background: var(--bg-2);
    border-radius: 22px 22px 0 0;
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 30px rgba(0,0,0,.5);
    padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateY(105%);
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
    max-height: 78vh;
    overflow-y: auto;
  }
  .mais-panel.aberto { transform: translateY(0); }

  .mais-panel__handle {
    width: 42px; height: 4px; border-radius: 3px;
    background: var(--bg-3); margin: 4px auto 14px;
  }
  .mais-panel__title {
    font-size: 13px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: 14px; text-align: center;
  }

  .mais-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  }
  .mais-item {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 16px 6px; border-radius: 14px;
    background: var(--bg-3); border: 1px solid var(--border);
    text-decoration: none; color: var(--text);
    font-size: 12.5px; font-weight: 600;
    transition: transform .1s ease, border-color .15s ease, background .15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mais-item:active { transform: scale(.95); }
  .mais-item.active {
    border-color: var(--yellow);
    background: color-mix(in srgb, var(--yellow) 10%, transparent);
  }
  .mais-item__icon {
    width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--yellow) 14%, transparent);
    color: var(--yellow);
  }
  .mais-item.active .mais-item__icon {
    background: var(--yellow); color: #131F33;
  }
}

/* ============================================================
   TRANSIÇÕES DE PÁGINA — navegação fluida (sensação de app)
   ============================================================ */
@media (max-width: 768px) {

  /* ENTRADA: a página surge com um fade leve e rápido.
     Simples de propósito: não trava o scroll nem pesa no celular. */
  body.pagina-entrando {
    animation: bxPaginaEntra .28s ease-out both;
  }
  @keyframes bxPaginaEntra {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* SAÍDA: removida (causava cliques perdidos na troca rápida entre abas). */

  /* Feedback imediato ao tocar num link do menu inferior */
  .bottom-nav__item:active {
    color: var(--yellow);
    transition: color .08s ease;
  }

  /* Respeita a preferência de menos animação */
  @media (prefers-reduced-motion: reduce) {
    body.pagina-entrando { animation: none !important; }
  }
}

/* ============================================================
   TABELAS -> CARDS (mobile)
   ------------------------------------------------------------
   Em telas pequenas, as tabelas de ordens/posições viram cards
   legíveis e compactos, sem precisar rolar para o lado.
   ============================================================ */
@media (max-width: 768px) {

  .orders-panel { padding: 14px 12px !important; }

  table.tabela-cards {
    min-width: 0 !important;
    width: 100% !important;
    display: block;
  }
  table.tabela-cards thead { display: none; }
  table.tabela-cards tbody { display: block; }

  /* Cada ordem vira um card compacto */
  table.tabela-cards tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px 12px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
  }

  /* Esconde as células "secundárias" (data, qtd) para ficar limpo;
     mostra só o essencial: Par, Lado, Preço, Total, Status, Ação */
  table.tabela-cards td {
    display: none;
    padding: 0 !important;
    border: none !important;
    font-size: 13.5px;
  }

  /* Par (título do card) — ocupa a esquerda */
  table.tabela-cards td:nth-child(2) {
    display: block;
    grid-column: 1;
    font-size: 16px;
    font-weight: 800;
    order: 1;
  }
  table.tabela-cards td:nth-child(2)::before { content: none; }

  /* Status — canto direito da primeira linha */
  table.tabela-cards td:nth-child(7) {
    display: block;
    grid-column: 2;
    justify-self: end;
    order: 2;
  }
  table.tabela-cards td:nth-child(7)::before { content: none; }

  /* Lado (Compra/Venda) — destaque */
  table.tabela-cards td:nth-child(3) {
    display: block;
    grid-column: 1 / -1;
    order: 3;
    font-size: 13px;
    font-weight: 700;
    margin-top: -2px;
  }
  table.tabela-cards td:nth-child(3)::before { content: none; }

  /* Preço e Total lado a lado, com rótulo pequeno em cima */
  table.tabela-cards td:nth-child(4),
  table.tabela-cards td:nth-child(6) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    order: 4;
    background: var(--bg-2);
    border-radius: 8px;
    padding: 8px 10px !important;
  }
  table.tabela-cards td:nth-child(4) { grid-column: 1; }
  table.tabela-cards td:nth-child(6) { grid-column: 2; align-items: flex-end; }
  table.tabela-cards td:nth-child(4)::before,
  table.tabela-cards td:nth-child(6)::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  table.tabela-cards td:nth-child(4) { font-weight: 700; }
  table.tabela-cards td:nth-child(6) { font-weight: 700; }

  /* Ação (botão) — largura toda no rodapé do card, bem visível */
  table.tabela-cards td:nth-child(8) {
    display: block;
    grid-column: 1 / -1;
    order: 5;
    margin-top: 6px;
  }
  table.tabela-cards td:nth-child(8) .btn {
    width: 100%;
    min-height: 44px;
    font-size: 14.5px;
    font-weight: 700;
    border-radius: 10px;
  }
  /* Botão Cancelar: vermelho SÓLIDO e bem visível (não apagado) */
  table.tabela-cards td:nth-child(8) .btn--danger {
    background: var(--red) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 3px 12px rgba(246, 70, 93, .3);
  }
  /* Preço/Total mais compactos */
  table.tabela-cards td:nth-child(4),
  table.tabela-cards td:nth-child(6) {
    padding: 6px 10px !important;
  }
  table.tabela-cards td:nth-child(4) { font-size: 15px; }
  table.tabela-cards td:nth-child(6) { font-size: 15px; }

  /* Cor da borda esquerda conforme o lado (compra/venda) */
  table.tabela-cards tr.ordem-compra { border-left-color: var(--green) !important; }
  table.tabela-cards tr.ordem-venda { border-left-color: var(--red) !important; }

  /* Linha de "nenhuma ordem" */
  table.tabela-cards td[colspan] {
    display: block !important;
    text-align: center;
    padding: 20px !important;
    color: var(--text-muted);
  }
  table.tabela-cards td[colspan]::before { content: none; }
  table.tabela-cards tr:has(td[colspan]) {
    display: block;
    border-left-color: var(--border);
  }
}