/* ==========================================================
   JT-LIQUID-GLASS.CSS — override de estilo iOS 26 Liquid Glass
   ----------------------------------------------------------
   Regra de ouro: SÓ CSS + micro-interacções de :active.
   Não altera HTML, IDs, classes existentes, JS, fluxo, bot,
   WebSocket Deriv. Carrega DEPOIS de styles.css na cascata.
   Ver: JeanusTrade-Brief-Liquid-Glass.md
   ========================================================== */

:root{
  /* B — glass mais transparente (fundo respira) */
  --jt-glass-bg: linear-gradient(155deg, rgba(255,255,255,.16) 0%, rgba(40,48,72,.24) 40%, rgba(12,16,32,.34) 100%);
  --jt-glass-blur: blur(32px) saturate(190%);
  --jt-glass-border: 0.5px solid rgba(255,255,255,.26);
  --jt-glass-shadow: 0 10px 32px rgba(0,0,0,.36), 0 0 0 0.5px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.34), inset 0 -0.5px 0 rgba(255,255,255,.05);
  --jt-specular: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  --jt-primary: #0a84ff;          /* azul sistema iOS — botões de formulário */
  --jt-win: #30d158;
  --jt-loss: #ff453a;
  --jt-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --jt-sheet-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

[data-theme="light"]{
  /* Em tema claro o material fica mais próximo do "vidro leitoso"
     do iOS claro — mantém legibilidade sobre fundos claros. */
  --jt-glass-bg: linear-gradient(165deg, rgba(255,255,255,.62), rgba(255,255,255,.40));
  --jt-glass-border: 0.5px solid rgba(13,14,43,.14);
  --jt-glass-shadow: 0 8px 24px rgba(13,14,43,.10), inset 0 1px 0 rgba(255,255,255,.55);
  --jt-specular: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
}

/* ----------------------------------------------------------
   1) HEADER — chrome fino em vidro
   ---------------------------------------------------------- */
.header{
  background: var(--jt-glass-bg);
  backdrop-filter: var(--jt-glass-blur);
  -webkit-backdrop-filter: var(--jt-glass-blur);
  border: var(--jt-glass-border);
  border-top: none;
  box-shadow: var(--jt-glass-shadow);
}

/* ----------------------------------------------------------
   2) CARD SALDO
   ---------------------------------------------------------- */
.saldo-card{
  background: var(--jt-glass-bg);
  backdrop-filter: var(--jt-glass-blur);
  -webkit-backdrop-filter: var(--jt-glass-blur);
  border: var(--jt-glass-border);
  border-radius: 20px;
  box-shadow: var(--jt-glass-shadow);
}
.saldo-card::before{
  height: 1px;
  left: 14%; right: 14%;
  background: var(--jt-specular);
}
.operacoes-row{
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 0.5px solid rgba(255,255,255,.12);
}

/* ----------------------------------------------------------
   3) FILA 2 COLUNAS — Estratégia | Conta
   ---------------------------------------------------------- */
.config-box,
.strategy-active-card,
.acc-card{
  background: var(--jt-glass-bg);
  backdrop-filter: var(--jt-glass-blur);
  -webkit-backdrop-filter: var(--jt-glass-blur);
  border: var(--jt-glass-border);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .15s var(--jt-spring), border-color .2s ease;
}
.config-box:active,
.strategy-active-card:active,
.acc-card:active{
  transform: scale(.97);
}

/* ----------------------------------------------------------
   4) CARD DÍGITOS
   ---------------------------------------------------------- */
.stats-section{
  background: var(--jt-glass-bg);
  backdrop-filter: var(--jt-glass-blur);
  -webkit-backdrop-filter: var(--jt-glass-blur);
  border: var(--jt-glass-border);
  border-radius: 20px;
  box-shadow: var(--jt-glass-shadow);
}
.stats-section::before{
  left: 14%; right: 14%;
  background: var(--jt-specular);
}

/* Barras em cápsula — sem poço escuro atrás, sem pip.
   Continua a ser só .bar/.bar.frio/.neutro/.quente (JS só toca
   em style.height + classes de banda, nada mudou aí). */
.bars-wrap{
  background: transparent;
}
.bar{
  border-radius: 999px;
  max-width: 24px;
  margin: 0 auto;
  border: 0.5px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.bar.neutro{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.bar.quente{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 12px rgba(48,209,88,.35);
}
.bar.frio{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 10px rgba(255,68,68,.22);
}

/* ----------------------------------------------------------
   5) CONTROLOS — ⚙ / Run-Stop / stepper
   ---------------------------------------------------------- */
.btn-ctrl{
  background: var(--jt-glass-bg);
  backdrop-filter: var(--jt-glass-blur);
  -webkit-backdrop-filter: var(--jt-glass-blur);
  border-width: 0.5px;
  box-shadow: 0 4px 14px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .18s var(--jt-spring), box-shadow .2s ease, border-color .2s ease;
}
.btn-ctrl:active{
  transform: scale(0.9);
}
.btn-ctrl.play-c{ border-color: rgba(48,209,88,.55); color: var(--jt-win); }
.btn-ctrl.pause-c{ border-color: rgba(255,69,58,.55); color: var(--jt-loss); }

/* ----------------------------------------------------------
   6) TRADER / HISTÓRICO — mantém grelha de colunas
   ---------------------------------------------------------- */
.trader-section{
  background: var(--jt-glass-bg);
  backdrop-filter: var(--jt-glass-blur);
  -webkit-backdrop-filter: var(--jt-glass-blur);
  border: var(--jt-glass-border);
  border-radius: 20px;
  box-shadow: var(--jt-glass-shadow);
}
.table-row{
  transition: background-color .15s ease;
}
.table-row:active{
  background: rgba(255,255,255,.04);
}

/* ----------------------------------------------------------
   7) OVERLAYS — sheets / modal / scrim / acc-mini
   ---------------------------------------------------------- */
.sheet-overlay,
.modal-overlay{
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.sheet,
.modal,
.acc-mini{
  background: var(--jt-glass-bg);
  backdrop-filter: var(--jt-glass-blur);
  -webkit-backdrop-filter: var(--jt-glass-blur);
  border: var(--jt-glass-border);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), var(--jt-glass-shadow);
}
.sheet::before,
.modal::before{
  background: var(--jt-specular);
}
#avatarSheet .sheet{
  /* sidebar lateral — mantém o padrão já usado (não vira bottom-sheet) */
  border-radius: 24px 0 0 24px;
}
.scrim{
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.result-toast{
  background: var(--jt-glass-bg);
  backdrop-filter: var(--jt-glass-blur);
  -webkit-backdrop-filter: var(--jt-glass-blur);
  border: var(--jt-glass-border);
  box-shadow: 0 20px 50px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.acc-backdrop,
.auth-backdrop{
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* Sheet-close / botões secundários — leve vidro, spring no toque */
.sheet-close{
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: var(--jt-glass-border);
  border-radius: 14px;
  transition: transform .15s var(--jt-spring);
}
.sheet-close:active{
  transform: scale(.96);
}
.sheet-x{
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--jt-glass-border);
}
.sheet-x:active{
  transform: scale(.92);
}

/* ----------------------------------------------------------
   8) BOTÃO PRIMÁRIO (Salvar / Ligar / etc.) → azul sistema
   ---------------------------------------------------------- */
.modal-save,
.conn-btn.connect,
.lab-btn-primary{
  background: var(--jt-primary);
  box-shadow: 0 4px 16px rgba(10,132,255,.30);
  border: none;
  border-radius: 16px;
  transition: transform .15s var(--jt-spring);
}
.modal-save:active,
.conn-btn.connect:active,
.lab-btn-primary:active{
  transform: scale(.97);
}

/* ----------------------------------------------------------
   9) INPUTS (dentro de modal / sheets / lab / auth)
   ---------------------------------------------------------- */
.field input,
.field select,
.authpop .field input,
.lab-select{
  background: rgba(120,120,128,.22);
  border: 0.5px solid rgba(255,255,255,.15);
  color: #f5f5f7;
  border-radius: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus,
.field select:focus,
.authpop .field input:focus{
  border-color: rgba(10,132,255,.55);
  box-shadow: 0 0 0 3px rgba(10,132,255,.18);
}
[data-theme="light"] .field input,
[data-theme="light"] .field select,
[data-theme="light"] .authpop .field input,
[data-theme="light"] .lab-select{
  background: rgba(118,118,128,.12);
  color: var(--text);
}

/* ----------------------------------------------------------
   10) STEPPER — nós com leve vidro (só chrome, sem mudar lógica)
   ---------------------------------------------------------- */
.stepper-node{
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.2);
}

/* ----------------------------------------------------------
   11) Texto secundário — token de contraste sobre vidro
   ---------------------------------------------------------- */
.sheet-sub,
.modal-sub,
.saldo-label,
.config-label{
  color: rgba(235,235,245,.6);
}

/* ----------------------------------------------------------
   12) Micro-interacção genérica de press (spring) em chrome
   clicável que ainda não tenha :active definido acima.
   ---------------------------------------------------------- */
.header-logo,
.ia-btn,
.ativo-btn,
.avatar-btn,
.op-conn{
  transition: transform .15s var(--jt-spring);
}
.header-logo:active,
.ia-btn:active,
.ativo-btn:active,
.avatar-btn:active,
.op-conn:active{
  transform: scale(.95);
}

/* ----------------------------------------------------------
   13) MOTION LEVE — saldo (glow), histórico (entrada/resolve)
   Ver brief §13. Só eventos raros (settle, linha nova) — nunca
   a cada tick de dígito. JS só liga/desliga classes; toda a
   animação vive aqui.
   ---------------------------------------------------------- */
@property --jt-glow{
  syntax: '<color>';
  inherits: false;
  initial-value: transparent;
}
.saldo-card{
  transition: --jt-glow .55s ease, border-color .45s ease;
  box-shadow: var(--jt-glass-shadow), 0 0 28px var(--jt-glow);
}
.saldo-card.is-up{
  --jt-glow: rgba(48, 209, 88, .38);
  border-color: rgba(48, 209, 88, .45);
}
.saldo-card.is-down{
  --jt-glow: rgba(255, 69, 58, .32);
  border-color: rgba(255, 69, 58, .4);
}

/* Histórico — fluxo da trade: ENTRADA (linha "a maturar" desliza de cima) →
   RESULTADO (linha real assenta com um glow suave, verde/vermelho).
   Só transform + opacity: ambas animam no compositor (GPU), sem layout nem paint
   por frame e sem tocar na thread principal. will-change só enquanto a classe
   existe (jtAnimOnce() remove-a no fim) para a camada ser libertada logo a seguir.
   Nada de box-shadow/background/max-height animados. O glow é um box-shadow
   ESTÁTICO num ::after cuja opacity é que anima. */
.table-row.jt-enter{
  animation: jt-hist-in .42s var(--jt-sheet-ease) both;
  will-change: transform, opacity;
}
@keyframes jt-hist-in{
  from{ opacity:0; transform: translate3d(0,-14px,0) scale(.96); }
  to  { opacity:1; transform: translate3d(0,0,0) scale(1);       }
}
.table-row.jt-resolve-win,
.table-row.jt-resolve-loss{
  position: relative;
  animation: jt-hist-pop .6s var(--jt-sheet-ease) both;
  will-change: transform;
}
@keyframes jt-hist-pop{
  0%  { transform: scale(.985); }
  40% { transform: scale(1.015); }
  100%{ transform: scale(1); }
}
.table-row.jt-resolve-win::after,
.table-row.jt-resolve-loss::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; opacity:0;
  animation: jt-hist-glow .6s ease-out both;
  will-change: opacity;
}
.table-row.jt-resolve-win::after { box-shadow: 0 0 12px 1px var(--accent2); }
.table-row.jt-resolve-loss::after{ box-shadow: 0 0 12px 1px var(--danger); }
@keyframes jt-hist-glow{
  0%  { opacity:0; }
  30% { opacity:.7; }
  100%{ opacity:0; }
}

/* ----------------------------------------------------------
   14) TOAST — restyle do .mini-toast já existente (vidro +
   cápsula + posição/offset seguros no mobile). Reaproveita o
   componente existente (icon + msg, 1 de cada vez) — não cria
   um novo sistema de toast em paralelo. Ver brief §16.
   ---------------------------------------------------------- */
.mini-toast{
  border-radius: 999px;
  background: var(--jt-glass-bg);
  backdrop-filter: var(--jt-glass-blur);
  -webkit-backdrop-filter: var(--jt-glass-blur);
  border: var(--jt-glass-border);
  bottom: calc(-100px - env(safe-area-inset-bottom, 0px));
}
.mini-toast.show{
  /* offset alto de propósito — testado que ~8-12px fica invisível
     atrás da barra do sistema / editor mobile (Spck/Android). */
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}
.mini-toast::before{
  background: var(--jt-specular);
}

/* ----------------------------------------------------------
   15) prefers-reduced-motion — respeita preferência do sistema
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .btn-ctrl,
  .config-box, .strategy-active-card, .acc-card,
  .sheet-close, .sheet-x,
  .modal-save, .conn-btn.connect, .lab-btn-primary,
  .header-logo, .ia-btn, .ativo-btn, .avatar-btn, .op-conn{
    transition-duration: .01ms !important;
  }
  .saldo-card{ transition-duration: .01ms !important; }
  .table-row.jt-enter,
  .table-row.jt-resolve-win,
  .table-row.jt-resolve-loss,
  .table-row.jt-resolve-win::after,
  .table-row.jt-resolve-loss::after,
  .table-row.pending::before,
  .table-row.pending::after,
  .table-row.pending .pending-dots span{
    animation: none !important;
    will-change: auto;
  }
}

/* ==========================================================
   16) A — Fundo planeta aprovado + scrim leve
   Não remove bg-nebula/base64 do styles.css: só sobrescreve.
   ========================================================== */
body{
  background-color: #03030c;
  background-image:
    linear-gradient(180deg, rgba(3,3,12,.18) 0%, rgba(3,3,12,.32) 42%, rgba(3,3,12,.48) 100%),
    url('../img/jt-bg-liquid-aprovado.jpg');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ==========================================================
   17) E — Pill dock config/play + hide config no run
   Stepper permanece. Só config + mainBtn no grupo visual.
   ========================================================== */
.controles-row{
  gap: 10px;
}
/* Cápsula à volta de config+play (sem alterar HTML: pseudo via wrapper visual) */
.btn-ctrl.config-c,
.btn-ctrl.play-c,
.btn-ctrl.pause-c,
.btn-ctrl.stopping-c{
  border-radius: 50%;
  width: 42px;
  height: 42px;
  border-width: 0.5px;
  background: linear-gradient(155deg, rgba(255,255,255,.12), rgba(16,20,36,.4));
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 6px 20px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.22);
  transition: opacity .28s ease, transform .28s cubic-bezier(.34,1.4,.64,1),
    width .28s ease, margin .28s ease, border-color .2s, color .2s, box-shadow .2s;
}
.btn-ctrl.config-c.jt-cfg-gone{
  opacity: 0;
  transform: scale(.5);
  width: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border-width: 0;
  pointer-events: none;
  overflow: hidden;
}
.btn-ctrl.play-c{
  border-color: rgba(48,209,88,.5);
  color: var(--jt-win, #30d158);
}
.btn-ctrl.pause-c{
  border-color: rgba(255,69,58,.5);
  color: var(--jt-loss, #ff453a);
}
.btn-ctrl.stopping-c{
  border-color: rgba(0,176,255,.45);
  color: var(--accent3, #00b0ff);
  animation: jt-stop-pulse 1s ease-in-out infinite;
}
@keyframes jt-stop-pulse{
  50%{ transform: scale(.94); opacity: .75; }
}


/* ==========================================================
   18) B reforço + C OAuth card + D logout no popover
   ========================================================== */
.jt-legacy-hidden{display:none!important;}
.jt-oauth-card{
  background:rgba(0,176,255,.08);
  border:1px solid rgba(0,176,255,.28);
  border-radius:12px;
  padding:14px;
  text-align:center;
  margin-bottom:12px;
}
.jt-oauth-card-title{
  font-size:13px;color:var(--text,#eef0fa);margin-bottom:6px;
  display:flex;align-items:center;justify-content:center;gap:6px;font-weight:700;
}
.jt-oauth-card-sub{font-size:11px;color:var(--muted,#9aa0b8);line-height:1.45;}
.jt-oauth-card-sub b{color:var(--accent3,#00b0ff);font-weight:700;}

.acc-mini-foot{
  display:flex;flex-direction:column;gap:6px;margin-top:8px;
}
.acc-mini-foot .acc-foot-link,
.acc-mini-foot .acc-foot-logout{
  width:100%;text-align:center;padding:10px;border-radius:11px;
  font:700 12px inherit;cursor:pointer;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);color:var(--text,#eef0fa);
}
.acc-mini-foot .acc-foot-logout{
  border-color:rgba(255,69,58,.35);
  color:#ff6b6b;
  background:rgba(255,69,58,.08);
}
.acc-mini-foot .acc-foot-logout:active{transform:scale(.98);}


/* ==========================================================
   19) Chart chrome — TV legend/last price + plot mais sólido
       % rings e setChartTypeUI/setChartTimeframeUI intactos
   ========================================================== */
.chart-plot-wrap{
  background: rgba(8,10,22,.72);
  border: 0.5px solid rgba(255,255,255,.14);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  padding-top: 28px; /* espaço para legend + price tag */
}
.chart-legend{
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  font-size: 10px;
  font-weight: 700;
}
.chart-legend-sym{
  color: var(--text, #eef0fa);
  letter-spacing: .02em;
}
.chart-legend-type{
  color: var(--muted, #9aa0b8);
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 0.5px solid rgba(255,255,255,.12);
}
.chart-last-price{
  position: absolute;
  top: 8px;
  right: 40px; /* à esquerda do botão config */
  z-index: 4;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(0,176,255,.12);
  border: 0.5px solid rgba(0,176,255,.35);
  color: var(--accent3, #00b0ff);
  pointer-events: none;
  transition: color .15s, border-color .15s, background .15s;
}
.chart-last-price.up{
  color: var(--jt-win, #30d158);
  border-color: rgba(48,209,88,.4);
  background: rgba(48,209,88,.12);
}
.chart-last-price.down{
  color: var(--jt-loss, #ff453a);
  border-color: rgba(255,69,58,.4);
  background: rgba(255,69,58,.1);
}
.chart-config-overlay-btn{
  background: rgba(12,14,28,.55);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 0.5px solid rgba(255,255,255,.2);
  border-radius: 9px;
  color: var(--muted, #9aa0b8);
}
.chart-config-overlay-btn:active{
  color: var(--accent3, #00b0ff);
  border-color: rgba(0,176,255,.45);
}
/* Histórico de dígitos sob o plot — footer de ticks (estilo Deriv) */
.chart-digit-history{
  padding: 6px 4px 2px;
  gap: 5px;
  border-radius: 0 0 12px 12px;
}
.chart-hist-digit{
  opacity: .5;
  transition: opacity .2s;
}
.chart-hist-digit.last{
  opacity: 1;
  text-decoration: none;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(255,255,255,.08);
  border: 0.5px solid rgba(255,255,255,.12);
}
/* Rings: glass-light row */
.chart-digit-ring-row{
  padding: 2px 0 4px;
}


/* ==========================================================
   20) Dock Play/Stop (botão +espera)
   Substitui o par ⚙ + ▶/⏸ soltos. Estados geridos por jtSetMainBtn()
   em trade-engine.js: idle · run (config recolhe) · stopping (spinner).
   Sobrepõe o §17 (mesmos .btn-ctrl, especificidade maior).
   ========================================================== */
.controles-row .jt-dock{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  flex-shrink: 0;
  background: rgba(12,14,28,.55);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.3);
  transition: gap .4s cubic-bezier(.22,1,.36,1);
}
.controles-row .jt-dock.is-run,
.controles-row .jt-dock.is-stopping{ gap: 0; }

.jt-slot-cfg{
  display: grid;
  max-width: 42px;
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition: opacity .35s var(--jt-spring, cubic-bezier(.34,1.4,.64,1)),
              transform .45s var(--jt-spring, cubic-bezier(.34,1.4,.64,1)),
              max-width .4s cubic-bezier(.22,1,.36,1);
}
.jt-dock.is-run .jt-slot-cfg,
.jt-dock.is-stopping .jt-slot-cfg{
  opacity: 0;
  transform: scale(0) rotate(-40deg);
  max-width: 0;
  pointer-events: none;
}

.controles-row .jt-dock .btn-ctrl{
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 0;
  flex-shrink: 0;
  transition: color .25s, border-color .25s, box-shadow .25s,
              transform .35s var(--jt-spring, cubic-bezier(.34,1.4,.64,1)), opacity .25s;
}
.controles-row .jt-dock .btn-ctrl::before{
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  padding: 1px;
  pointer-events: none;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  background: linear-gradient(135deg, rgba(255,255,255,.3), transparent 55%);
}
.jt-dock .btn-ctrl .ico{ width: 19px; height: 19px; display: block; pointer-events: none; }

.controles-row .jt-dock .btn-ctrl.config-c{
  color: var(--accent3, #00b0ff);
  border-color: rgba(0,176,255,.45);
  box-shadow: 0 0 0 1px rgba(0,176,255,.12), 0 4px 14px rgba(0,176,255,.12);
}
.controles-row .jt-dock .btn-ctrl.config-c::before{ background: linear-gradient(135deg, rgba(0,176,255,.75), transparent 55%); }

.controles-row .jt-dock .btn-ctrl.play-c{
  color: var(--jt-win, #30d158);
  border-color: rgba(48,209,88,.5);
  box-shadow: 0 0 0 1px rgba(48,209,88,.12), 0 4px 16px rgba(48,209,88,.15);
}
.controles-row .jt-dock .btn-ctrl.play-c::before{ background: linear-gradient(135deg, rgba(48,209,88,.8), transparent 55%); }

.controles-row .jt-dock .btn-ctrl.pause-c{
  color: var(--jt-loss, #ff453a);
  border-color: rgba(255,69,58,.5);
  box-shadow: 0 0 0 1px rgba(255,69,58,.12), 0 4px 16px rgba(255,69,58,.12);
  transform: scale(1.06);
}
.controles-row .jt-dock .btn-ctrl.pause-c::before{ background: linear-gradient(135deg, rgba(255,69,58,.8), transparent 55%); }

/* "A parar…" — spinner (substitui o pulse do §17) até o contrato atual liquidar */
.controles-row .jt-dock .btn-ctrl.stopping-c{
  color: var(--muted, #8c8ea9);
  border-color: rgba(255,255,255,.22);
  box-shadow: none;
  animation: none;
  pointer-events: none;
  opacity: .9;
  transform: scale(1);
}
.controles-row .jt-dock .btn-ctrl.stopping-c::before{ background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 55%); }
.jt-dock .btn-ctrl.stopping-c .ico{ animation: jt-dock-spin .9s linear infinite; }
@keyframes jt-dock-spin{ to{ transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .jt-dock, .jt-slot-cfg, .jt-dock .btn-ctrl{ transition-duration: .01ms !important; }
}


/* ==========================================================
   21) FLEX PARTILHA — stats + trader (só altura/flex)
   ========================================================== */
#app > .stats-section{
  flex: 1 1 32vh;
  flex-shrink: 1;
  min-height: 0;
  max-height: 42vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#app > .stats-section.mode-digits{ max-height: 36vh; }
#app > .stats-section.mode-chart,
#app > .stats-section.showing-line{ max-height: 42vh; }
#app > .stats-section .swipe-viewport{
  flex: 1 1 auto;
  min-height: 100px;
  max-height: 100%;
}
#app > .trader-section{
  flex: 1 1 28vh;
  flex-shrink: 1;
  min-height: 140px;
  min-height: 26vh;
  display: flex;
  flex-direction: column;
}
#traderBody{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
@media (max-height: 740px){
  #app > .stats-section{ max-height: 38vh; }
  #app > .stats-section.mode-digits{ max-height: 32vh; }
  .controles-row{ padding-top: 6px; padding-bottom: 4px; }
}
@media (max-height: 640px){
  #app > .stats-section{ max-height: 34vh; }
  #app > .trader-section{ min-height: 22vh; }
}

/* ==========================================================
   HISTÓRICO MIX — V8 corpo + rim especular + V7 anel curto
   Aprovado na maquete 11-historico-v7-v8-mix-run.html
   (ver CHANGELOG-HISTORICO-MIX.md)
   ========================================================== */

/* --- Medidas da maquete (ambos os temas): colunas, padding, fonte, espaço --- */
.table-header,
.table-row{
  grid-template-columns: 48px 1fr 36px 44px 52px;
  column-gap: 4px;
}
.table-header{
  padding: 4px 22px 6px;            /* 10px margem da linha + 12px padding = alinha com o texto */
  font-size: 8px;
  letter-spacing: .04em;
}
.table-header span:last-child{ white-space: nowrap; }
.table-row{
  padding: 10px 12px;
  margin: 0 10px 7px;
  font-size: 11px;
  border-radius: 16px;
}
.jt-dg{ font-weight: 800; }
.pending-label{ font-size: 10px; white-space: nowrap; }

/* --- Tema claro: mantém o estilo actual (barra lateral colorida) --- */
[data-theme="light"] .table-row.win { border-left: 3px solid var(--accent2); }
[data-theme="light"] .table-row.loss{ border-left: 3px solid var(--danger); }
[data-theme="light"] .jt-dg.win { color: var(--accent2); }
[data-theme="light"] .jt-dg.loss{ color: var(--danger); }

/* --- Tema escuro: cápsulas Mix --- */
:root:not([data-theme="light"]) .table-row{
  --jt-row-bg: linear-gradient(165deg, rgba(255,255,255,.08), rgba(16,20,36,.34));
  border: 0.5px solid rgba(255,255,255,.16);
  backdrop-filter: blur(11px) saturate(168%);
  -webkit-backdrop-filter: blur(11px) saturate(168%);
  background: var(--jt-row-bg);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.36),
    inset 0 -0.5px 0 rgba(255,255,255,.06),
    0 6px 16px rgba(0,0,0,.2);
}
/* o :active global (background rgba) apagava o gradiente ao tocar */
:root:not([data-theme="light"]) .table-row:active{ background: var(--jt-row-bg); }

:root:not([data-theme="light"]) .table-row.win{
  --jt-row-bg: linear-gradient(165deg, rgba(61,255,122,.20) 0%, rgba(48,209,88,.10) 42%, rgba(16,20,36,.36) 100%);
  border-color: rgba(48,209,88,.32);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.42),
    inset 0 -0.5px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(48,209,88,.12),
    0 0 14px rgba(48,209,88,.22),
    0 6px 16px rgba(0,0,0,.2);
}
:root:not([data-theme="light"]) .table-row.loss{
  --jt-row-bg: linear-gradient(165deg, rgba(255,100,90,.18) 0%, rgba(255,69,58,.08) 42%, rgba(16,20,36,.36) 100%);
  border-color: rgba(255,69,58,.28);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.36),
    inset 0 -0.5px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(255,69,58,.10),
    0 0 12px rgba(255,69,58,.18),
    0 6px 16px rgba(0,0,0,.2);
}
:root:not([data-theme="light"]) .table-row .result-win,
:root:not([data-theme="light"]) .jt-dg.win { color: var(--jt-win, #30d158); }
:root:not([data-theme="light"]) .table-row .result-win{ text-shadow: none; }
:root:not([data-theme="light"]) .table-row .result-loss,
:root:not([data-theme="light"]) .jt-dg.loss{ color: var(--jt-loss, #ff453a); }

/* glow de resolução com as cores da maquete */
:root:not([data-theme="light"]) .table-row.jt-resolve-win::after { box-shadow: 0 0 12px 1px rgba(48,209,88,.9); }
:root:not([data-theme="light"]) .table-row.jt-resolve-loss::after{ box-shadow: 0 0 12px 1px rgba(255,69,58,.9); }

/* --- Linha "A maturar": cápsula azul-gelo com varrimento de luz + pontos em onda ---
   Só transform/opacity (compositor). O pulso roxo antigo (::before) fica desligado. */
:root:not([data-theme="light"]) .table-row.pending{
  --jt-row-bg: linear-gradient(165deg, rgba(0,176,255,.16) 0%, rgba(0,176,255,.06) 42%, rgba(16,20,36,.36) 100%);
  border: 0.5px dashed rgba(126,203,255,.5);
  overflow: hidden;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.34),
    inset 0 -0.5px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(0,176,255,.10),
    0 0 14px rgba(0,176,255,.18),
    0 6px 16px rgba(0,0,0,.2);
}
:root:not([data-theme="light"]) .table-row.pending::before{ display: none; }
:root:not([data-theme="light"]) .table-row.pending::after{
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 60%;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(160,220,255,.22) 50%, transparent 100%);
  transform: translate3d(-120%,0,0);
  animation: jt-pend-sweep 2.2s cubic-bezier(.45,0,.25,1) infinite;
  will-change: transform;
}
@keyframes jt-pend-sweep{
  0%  { transform: translate3d(-120%,0,0); }
  70%,100%{ transform: translate3d(190%,0,0); }
}
:root:not([data-theme="light"]) .table-row.pending .pending-dots span{
  background: #7ecbff;
  animation: jt-pend-dot 1.1s ease-in-out infinite;
}
:root:not([data-theme="light"]) .table-row.pending .pending-dots span:nth-child(2){ animation-delay: .15s; }
:root:not([data-theme="light"]) .table-row.pending .pending-dots span:nth-child(3){ animation-delay: .3s; }
@keyframes jt-pend-dot{
  0%,100%{ transform: translate3d(0,0,0);  opacity: .35; }
  40%    { transform: translate3d(0,-3px,0); opacity: 1;   }
}
:root:not([data-theme="light"]) .pending-label{ color: #7ecbff; }

/* ==========================================================
   POPOVER ATIVOS — maquete 01-popover-ativos.html
   Painel flutuante + scrim, pesquisa, lista única com grupos sticky.
   Escuro = valores da maquete; claro = variáveis de vidro do projecto.
   ========================================================== */
.ativo-btn.open{ border-color: rgba(0,176,255,.45); color: var(--accent3, #00b0ff); background: rgba(0,176,255,.1); }
.jt-ativo-scrim{
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.jt-ativo-scrim.open{ opacity: 1; pointer-events: auto; }
.jt-ativo-pop{
  --ap-text: var(--text); --ap-muted: var(--muted); --ap-cyan: var(--accent3, #00b0ff);
  --ap-lab-bg: rgba(255,255,255,.85);
  --ap-item-bg: rgba(13,14,43,.04); --ap-line: rgba(13,14,43,.10);
  --ap-input-bg: rgba(13,14,43,.05); --ap-input-b: rgba(13,14,43,.14);
  position: fixed; top: 72px; z-index: 310;
  left: max(16px, calc(50% - 210px)); right: max(16px, calc(50% - 210px));
  max-height: min(70dvh, 520px);
  display: none; flex-direction: column;
  border-radius: 18px; padding: 14px;
  background: var(--jt-glass-bg);
  backdrop-filter: var(--jt-glass-blur); -webkit-backdrop-filter: var(--jt-glass-blur);
  border: var(--jt-glass-border);
  box-shadow: var(--jt-glass-shadow);
  overflow: hidden; isolation: isolate;
  color: var(--ap-text);
}
.jt-ativo-pop.open{ display: flex; }
.jt-ativo-pop::before{
  content: ''; position: absolute; left: 8%; right: 8%; top: 0; height: 1px; z-index: 2; pointer-events: none;
  background: var(--jt-specular);
}
:root:not([data-theme="light"]) .jt-ativo-pop{
  --ap-text: #eef0fa; --ap-muted: #9aa0b8;
  --ap-lab-bg: rgba(14,15,30,.92);
  --ap-item-bg: rgba(255,255,255,.03); --ap-line: rgba(255,255,255,.08);
  --ap-input-bg: rgba(0,0,0,.25); --ap-input-b: rgba(255,255,255,.12);
  background: linear-gradient(155deg, rgba(255,255,255,.18) 0%, rgba(50,60,90,.22) 40%, rgba(10,14,28,.32) 100%);
  background-color: rgba(14,18,36,.28);
  backdrop-filter: blur(32px) saturate(200%); -webkit-backdrop-filter: blur(32px) saturate(200%);
  border: 0.5px solid rgba(255,255,255,.28);
  box-shadow: 0 10px 36px rgba(0,0,0,.4), 0 0 0 0.5px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.38);
}
.jt-ativo-title{ font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ap-muted); margin-bottom: 10px; }
.jt-ativo-search{
  width: 100%; padding: 10px 12px; border-radius: 12px; margin-bottom: 8px; outline: 0;
  border: 1px solid var(--ap-input-b); background: var(--ap-input-bg);
  color: var(--ap-text); font: 13px inherit; font-family: inherit;
}
.jt-ativo-scroll{ overflow-y: auto; flex: 1; min-height: 0; -webkit-overflow-scrolling: touch; }
.jt-ativo-glab{
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 8px 8px 6px; position: sticky; top: 0; z-index: 1;
  background: var(--ap-lab-bg); border-bottom: 0.5px solid var(--ap-line); margin-bottom: 4px;
}
.jt-ativo-glab.v{ color: #8ec8ff; }
.jt-ativo-glab.vs{ color: #7dffa8; }
.jt-ativo-glab.jump{ color: #ffc978; }
[data-theme="light"] .jt-ativo-glab.v{ color: #1769c2; }
[data-theme="light"] .jt-ativo-glab.vs{ color: #138a3d; }
[data-theme="light"] .jt-ativo-glab.jump{ color: #b86a00; }
.jt-ativo-item{
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 11px; margin-bottom: 2px;
  border-radius: 11px; border: 1px solid transparent; background: var(--ap-item-bg);
  color: var(--ap-text); font: 700 12px inherit; font-family: inherit; cursor: pointer; text-align: left;
}
.jt-ativo-item.active{ border-color: rgba(0,176,255,.4); background: rgba(0,176,255,.1); color: var(--ap-cyan); }
.jt-ativo-item span{ margin-left: auto; font-size: 10px; color: var(--ap-muted); font-weight: 600; }
.jt-ativo-empty{ padding: 18px 8px; text-align: center; font-size: 12px; color: var(--ap-muted); }

/* ==========================================================
   POPOVER BOTS — maquete 03-popover-bots.html
   Reutiliza o painel/scrim/título/scroll/cabeçalhos do popover Ativos.
   Linha: nome (esquerda) · lógica (direita) · (i) com dígitos win/loss.
   ========================================================== */
.jt-bot-pop{ max-height: min(65dvh, 480px); }
.jt-bot-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 2px; }
.jt-bot-item{
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 11px;
  border-radius: 11px; border: 1px solid transparent; background: var(--ap-item-bg);
  color: var(--ap-text); font: 700 12px inherit; font-family: inherit; cursor: pointer; text-align: left;
}
.jt-bot-item.active{ border-color: rgba(0,176,255,.4); background: rgba(0,176,255,.1); color: var(--ap-cyan); }
.jt-bot-item .bot-name{ font-weight: 800; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jt-bot-item .bot-logic{ margin-left: auto; padding-left: 8px; font-size: 10px; color: var(--ap-muted); font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.jt-bot-i{
  flex: 0 0 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ap-input-b);
  background: var(--ap-input-bg); color: var(--ap-muted);
  font: italic 800 12px Georgia, 'Times New Roman', serif; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.jt-bot-i.del{ font: 13px inherit; font-style: normal; }
.jt-bot-row.info-open .jt-bot-i{ border-color: rgba(0,176,255,.45); color: var(--ap-cyan); background: rgba(0,176,255,.1); }
.jt-bot-info{
  display: none; flex-basis: 100%; margin: 0 0 4px; padding: 9px 11px; border-radius: 11px;
  background: var(--ap-item-bg); border: 0.5px solid var(--ap-line);
  font-size: 11px; line-height: 1.45; color: var(--ap-muted);
}
.jt-bot-row.info-open .jt-bot-info{ display: block; }
.jt-bot-info-line{ display: flex; align-items: center; gap: 10px; }
.jt-bot-info-line + .jt-bot-info-line{ margin-top: 6px; }
.jt-bot-info-line b{ flex: 0 0 44px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.jt-bot-info-line b.w{ color: var(--jt-win, #30d158); }
.jt-bot-info-line b.l{ color: var(--jt-loss, #ff453a); }
.jt-bot-info-line span{ display: flex; flex-wrap: wrap; gap: 4px; }
.jt-bot-info-line i{
  width: 22px; height: 22px; border-radius: 7px; font-style: normal; font-weight: 800; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.jt-bot-info-line i.w{ background: rgba(48,209,88,.16); border: 0.5px solid rgba(48,209,88,.4); color: var(--jt-win, #30d158); }
.jt-bot-info-line i.l{ background: rgba(255,69,58,.14); border: 0.5px solid rgba(255,69,58,.38); color: var(--jt-loss, #ff453a); }

/* ==========================================================
   ESPAÇO DO GRÁFICO + HISTÓRICO DE TRADES
   - caixa de stats com altura própria (sem flex-grow): o que sobra é do histórico de trades
   - padding mais fino; bolinhas de swipe sobem para o topo, centradas (sem linha própria)
   - gráfico preenche a pane; rings 0-9 viram tira opcional (mini-quadrados) no fundo da caixa
   ========================================================== */
#app > .stats-section{
  flex: 0 1 auto;
  padding: 10px 12px 8px;
}
#app > .stats-section .stats-header{ margin-bottom: 6px; }
#app > .stats-section .swipe-viewport{
  flex: 0 1 auto;
  min-height: 100px;
  max-height: none;
}
/* barras preenchem o pane de dígitos (a altura deixa de ser fixa em 140px) */
#paneDigits .bars-wrap{ flex: 1 1 auto; height: auto; min-height: 40px; }
#paneDigits .digitrow{ flex-shrink: 0; }
#paneDigits .pctrow{ flex-shrink: 0; }

/* bolinhas de swipe: topo, centradas, fora do fluxo */
.stats-section .swipe-dots{
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); transition: top .28s var(--jt-sheet-ease);
  margin: 0; gap: 7px; z-index: 6; padding: 3px 7px; border-radius: 999px;
  background: rgba(8,10,20,.4);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.stats-section.showing-line .swipe-dots{ top: 28px; }   /* alinha com a legenda do gráfico */
.stats-section .swipe-dot{ position: relative; }
.stats-section .swipe-dot::after{ content: ''; position: absolute; inset: -9px -5px; } /* alvo de toque maior */

/* gráfico: ocupa a pane toda */
#paneLine{ padding: 0; gap: 4px; }
.chart-plot-wrap{ margin-top: 0; }
.chart-plot-container{ min-height: 0; }
.chart-last-price{ right: 74px; }               /* botão de dígitos entra entre o preço e o ⚙ */
.chart-digits-btn{ right: 40px; }
.chart-digits-btn.on{
  color: var(--accent3, #00b0ff);
  border-color: rgba(0,176,255,.5);
  background: rgba(0,176,255,.14);
}

/* tira de dígitos 0-9 — overlay em vidro no fundo da caixa do gráfico */
.chart-plot-wrap .chart-digit-ring-row{
  display: none;
  position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 4;
  padding: 5px 6px 6px; gap: 2px;
  border-radius: 12px;
  background: rgba(8,10,22,.62);
  backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 0.5px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 4px 12px rgba(0,0,0,.25);
}
[data-theme="light"] .chart-plot-wrap .chart-digit-ring-row{
  background: rgba(255,255,255,.7); border-color: rgba(13,14,43,.14);
}
.chart-plot-wrap.rings-on .chart-digit-ring-row{
  display: flex;
  animation: jt-digits-in .22s var(--jt-sheet-ease) both;
}
@keyframes jt-digits-in{
  from{ opacity: 0; transform: translate3d(0,8px,0); }
  to  { opacity: 1; transform: translate3d(0,0,0);   }
}
.chart-plot-wrap .chart-ring-item{ gap: 3px; }
.chart-plot-wrap .chart-ring-pct{ font-size: 8px; }
.chart-plot-wrap .chart-ring-circle{
  width: 20px; height: 20px; border-radius: 6px; border-width: 1.5px; font-size: 10px;
}
.chart-plot-wrap .chart-ring-circle.live{
  box-shadow: 0 0 0 1.5px var(--accent2), 0 0 8px rgba(0,230,118,.5);
}
@media (prefers-reduced-motion: reduce){
  .chart-plot-wrap.rings-on .chart-digit-ring-row{ animation: none; }
}