/* Nuvem Bot — Meus Padrões (montar gatilho, testar % de acerto, carteiras).
   Segue os tokens de style.css (fundo #03070d, azul, verde/amarelo/vermelho de resultado,
   cantos 14-16px, Manrope, rótulos em caixa alta). Classes prefixadas com pd- pra não
   colidir com o resto do app. */

#padroes-app { position: relative; }
.pd-corpo { display: flex; flex-direction: column; gap: 16px; }

/* cores de resultado — mesma paleta pedida pro projeto */
:root {
  --pd-cor-pos: #2ee06a;
  --pd-cor-warn: #ffd27a;
  --pd-cor-neg: #ff6b63;
  --pd-cor-neutro: #61748f;
}
.pd-pos { color: #2ee06a; }
.pd-warn { color: #ffd27a; }
.pd-neg { color: #ff6b63; }

/* ══ cartões ══════════════════════════════════════════════════════════════ */
.pd-card {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(58, 164, 255, 0.22);
  background: rgba(8, 16, 28, 0.55);
}
.pd-card-tit {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--azul-claro, #6fc0ff);
}
.pd-cols { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 14px; }
.pd-col { flex: 1 1 160px; min-width: 160px; }

/* ══ select / inputs ═════════════════════════════════════════════════════ */
.pd-select, .pd-mini {
  background: rgba(3, 7, 13, 0.7);
  border: 1px solid rgba(58, 164, 255, 0.28);
  color: var(--txt, #eaf2ff);
  border-radius: 10px;
  padding: 11px 13px;
  font: inherit; font-size: 14px; font-weight: 700;
  outline: none;
  width: 100%;
}
.pd-select { width: 100%; }
.pd-select:focus, .pd-mini:focus { border-color: var(--azul, #2b95ff); }

/* ══ histórico / trilha ao vivo ═════════════════════════════════════════ */
.pd-trailhead {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px; font-size: 12px; color: var(--txt-fraco, #61748f);
}
.pd-trailhead .pd-ult { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: var(--txt, #eaf2ff); }
.pd-trailhead .pd-live { display: inline-flex; align-items: center; gap: 6px; color: #2ee06a; font-weight: 800; }
.pd-trailhead .pd-live::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #2ee06a; box-shadow: 0 0 8px #2ee06a;
  animation: pd-piscar 1.5s ease-in-out infinite;
}
@keyframes pd-piscar { 50% { opacity: .35; } }
.pd-trailhead .pd-count { margin-left: auto; }

.pd-trail {
  display: flex; gap: 7px 6px; flex-wrap: nowrap;
  padding: 14px 10px 10px; min-height: 44px;
  background: rgba(3, 7, 13, 0.7);
  border: 1px solid rgba(58, 164, 255, 0.22);
  border-radius: 12px;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.pd-hint { font-size: 12px; color: var(--txt-fraco, #61748f); margin-top: 10px; line-height: 1.5; }

/* ══ bolinhas (beads) ════════════════════════════════════════════════════ */
.pd-bead {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 900; color: #0a0a0b;
  border: none; padding: 0;
  position: relative;
}
.pd-bead-clic { cursor: pointer; transition: transform .12s, opacity .15s, box-shadow .15s; }
.pd-bead-clic:hover { transform: scale(1.12); }
.pd-bead-clic:active { transform: scale(.94); }
.pd-bead-sm { width: 20px; height: 20px; font-size: 9px; }
.pd-skel-bead { background: rgba(58, 164, 255, 0.16); animation: pd-pulso 1.3s ease-in-out infinite; }

/* seleção / refinamento na bolinha do GATILHO (editor de bolinha) */
.pd-gatilho .pd-bead { cursor: pointer; }
.pd-bead.sel { outline: 2px solid var(--azul, #2b95ff); outline-offset: 2px; }
.pd-bead.hasnum { box-shadow: 0 0 0 2px rgba(43, 149, 255, 0.75); }
/* posição por MERCADO no gatilho (dúzia/coluna/alto-baixo/par-ímpar): chip azulado (não é cor de resultado) */
.pd-bead-mkt { background: #223a58; color: #dcebff; font-size: 10px; font-weight: 800; }
/* chip de mercado na paleta (adicionar posição de mercado ao gatilho) */
.pd-cbtn.pd-mkt {
  padding: 7px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
  border: 1px solid rgba(111, 176, 255, 0.28); background: rgba(111, 176, 255, 0.08); color: var(--txt, #eaf2ff);
}
.pd-cbtn.pd-mkt:hover { border-color: var(--azul, #2b95ff); }
/* seletor de NÚMEROS da roleta no editor de bolinha (escolhe em vez de digitar a "soma") */
.pd-ed-roleta { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.pd-rnum {
  min-width: 36px; padding: 8px 9px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(111, 176, 255, 0.25); background: rgba(111, 176, 255, 0.06);
  color: var(--txt, #eaf2ff); font: inherit; font-weight: 700; font-size: 12.5px; text-align: center;
}
.pd-rnum.on { border-color: var(--azul, #2b95ff); background: rgba(43, 149, 255, 0.20); }
.pd-rnum:hover { border-color: var(--azul, #2b95ff); }

/* marcação de ocorrências na TRILHA (histórico): bolinhas do gatilho acesas,
   o resto apagado, e o desfecho pintado como win/loss/empate */
.pd-dim { opacity: .25; }
.pd-mk-gat { outline: 2px solid var(--azul-claro, #6fc0ff); outline-offset: 1px; }
.pd-mk-win { box-shadow: 0 0 0 2px #2ee06a, 0 0 8px rgba(46, 224, 106, 0.5); }
.pd-mk-loss { box-shadow: 0 0 0 2px #ff6b63, 0 0 8px rgba(255, 107, 99, 0.5); }
.pd-tag {
  position: absolute; top: -8px; right: -8px; font-size: 8px; font-weight: 900;
  line-height: 1; padding: 1.5px 3px; border-radius: 6px; border: 1px solid #03070d; z-index: 2;
}
.pd-tag-win { background: #2ee06a; color: #04150e; }
.pd-tag-loss { background: #ff6b63; color: #fff; }

.pd-ph { color: var(--txt-fraco, #61748f); font-size: 13px; }
.pd-erro-inline { color: #ff6b63; font-size: 12.5px; }

/* ══ montagem do gatilho ═════════════════════════════════════════════════ */
.pd-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pd-cbtn {
  border: none; cursor: pointer; font: inherit; font-weight: 800; font-size: 13px;
  padding: 10px 16px; border-radius: 10px; color: #0a0a0b;
  display: inline-flex; align-items: center; gap: 7px;
  transition: transform .12s;
}
.pd-cbtn { justify-content: center; text-align: center; }
.pd-cbtn:hover { transform: translateY(-2px); }
.pd-cbtn.pd-ghost {
  background: transparent; border: 1px solid rgba(58, 164, 255, 0.28); color: var(--txt-suave, #9fb4cf);
}
.pd-cbtn.pd-ghost:hover { border-color: var(--azul, #2b95ff); color: var(--txt, #eaf2ff); }

.pd-gatilho {
  min-height: 46px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 10px 12px;
  background: rgba(3, 7, 13, 0.7);
  border: 1px dashed rgba(58, 164, 255, 0.4);
  border-radius: 12px;
}
.pd-arrow { color: var(--txt-fraco, #61748f); font-weight: 900; margin: 0 2px; }
.pd-prev { font-weight: 900; font-size: 14px; }

/* ══ editor de bolinha (refina uma posição do gatilho: número, dados, naipe) ═══ */
.pd-bead-ed {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding: 10px 12px; font-size: 13px;
  background: rgba(3, 7, 13, 0.7);
  border: 1px solid rgba(43, 149, 255, 0.4);
  border-radius: 12px;
}
.pd-ed-pos { font-weight: 800; color: var(--txt, #eaf2ff); flex: none; }
.pd-ed-num { width: 130px; flex: none; }
.pd-ed-dados, .pd-ed-naipes { display: flex; flex-basis: 100%; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
/* Os dois dados de cada lado agora moram numa linha propria. Soltos num flex-wrap eles
   quebravam em qualquer ponto e o rotulo do Player ia parar ao lado dos dados do Banker. */
.pd-ed-dados { flex-direction: column; align-items: stretch; gap: 6px; }
.pd-ddrow { display: flex; align-items: center; gap: 10px; }
.pd-ddpar { display: flex; gap: 8px; margin-left: auto; }
.pd-ed-naipes { flex-direction: column; gap: 6px; }
.pd-ed-hint { flex-basis: 100%; margin: 2px 0 0; }
.pd-dd { width: 54px; flex: none; text-align: center; }
.pd-ddlbl {
  font-weight: 800; font-size: 12px; color: var(--txt, #eaf2ff);
  display: inline-flex; align-items: center; gap: 5px; min-width: 90px;
}
.pd-nprow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pd-naipes { display: flex; gap: 6px; }
.pd-np {
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid rgba(58, 164, 255, 0.28);
  background: rgba(3, 7, 13, 0.7); color: var(--txt, #eaf2ff);
  font-size: 16px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.pd-np-vm { color: #ff6b63; }
.pd-np.on { border-color: var(--azul, #2b95ff); background: rgba(43, 149, 255, 0.2); box-shadow: 0 0 0 1px var(--azul, #2b95ff) inset; }

/* ══ toggles (lado / gale) ═══════════════════════════════════════════════ */
.pd-toggle { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-toggle button {
  border: 1px solid rgba(58, 164, 255, 0.28); background: transparent;
  color: var(--txt-suave, #9fb4cf); font: inherit; font-weight: 800; font-size: 13px;
  padding: 10px 16px; border-radius: 10px; cursor: pointer;
}
.pd-toggle.pd-gale button { min-width: 54px; text-align: center; }
.pd-toggle button.on {
  background: rgba(43, 149, 255, 0.22); border-color: var(--azul, #2b95ff); color: var(--txt, #eaf2ff);
}

/* ══ resultado (recalcula sozinho, sem botão) ═══════════════════════════ */
.pd-result { margin-top: 14px; }
.pd-result:empty { margin-top: 0; }
.pd-assert { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pd-pct { font-size: clamp(24px, 4vw, 30px); font-weight: 800; }
.pd-pct-gale { font-size: 13px; color: var(--txt-fraco, #61748f); font-weight: 700; }
.pd-bar {
  flex: 1; min-width: 160px; height: 12px; border-radius: 999px;
  background: rgba(3, 7, 13, 0.9); border: 1px solid rgba(58, 164, 255, 0.22); overflow: hidden;
}
.pd-bar span { display: block; height: 100%; border-radius: 999px; transition: width .3s ease; background: currentColor; }
.pd-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pd-chip {
  font-size: 11.5px; font-weight: 800; padding: 5px 11px; border-radius: 999px;
  border: 1px solid rgba(58, 164, 255, 0.22); color: var(--txt-suave, #9fb4cf);
}
.pd-chip.pd-ok { color: #2ee06a; border-color: rgba(46, 224, 106, 0.45); }
.pd-chip.pd-er { color: #ff6b63; border-color: rgba(255, 107, 99, 0.45); }
.pd-chip.pd-em { color: #ffd27a; border-color: rgba(255, 210, 122, 0.45); }

/* ══ salvar em carteira (mesma linha da frase de atualização automática) ═══ */
.pd-salvar-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.pd-auto-hint { flex: 1 1 240px; margin: 0; }
.pd-salvar-row .pd-select { flex: 1 1 180px; }
.pd-salvar-row .pd-mini { flex: 1 1 180px; }
.pd-btn-salvar {
  flex: none; padding: 11px 20px; border-radius: 10px; border: none; cursor: pointer;
  background: linear-gradient(120deg, var(--azul-forte, #0a6ff0), var(--azul-claro, #6fc0ff));
  color: #041022; font: inherit; font-weight: 800; font-size: 12.5px; letter-spacing: 0.08em;
}
.pd-msg { margin-top: 10px; font-size: 12.5px; padding: 10px 12px; border-radius: 10px; }
.pd-msg-ok { color: #2ee06a; background: rgba(46, 224, 106, 0.1); border: 1px solid rgba(46, 224, 106, 0.35); }
.pd-msg-erro { color: #ffada7; background: rgba(255, 107, 99, 0.1); border: 1px solid rgba(255, 107, 99, 0.35); }

/* ══ carteiras ═══════════════════════════════════════════════════════════ */
.pd-wallets { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pd-wallet {
  position: relative; overflow: hidden; cursor: pointer;
  padding: 16px; border-radius: 16px;
  border: 1px solid rgba(58, 164, 255, 0.22);
  background: linear-gradient(160deg, rgba(10, 20, 34, 0.9), rgba(6, 12, 22, 0.9));
}
.pd-wallet::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--pd-c, var(--pd-cor-neutro));
}
.pd-w-del {
  position: absolute; top: 10px; right: 10px; background: transparent; border: none;
  color: var(--txt-fraco, #61748f); cursor: pointer; font-size: 15px; padding: 4px;
}
.pd-w-del:hover { color: #ff6b63; }
.pd-w-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; padding-right: 22px; }
.pd-w-name { font-weight: 800; font-size: 15px; color: var(--txt, #eaf2ff); }
.pd-w-tag {
  font-size: 9.5px; font-weight: 900; letter-spacing: 0.08em; color: var(--txt-fraco, #61748f);
  border: 1px solid rgba(58, 164, 255, 0.22); padding: 3px 8px; border-radius: 999px;
}
.pd-w-mid { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.pd-w-info { min-width: 0; }
.pd-w-num { font-size: 12.5px; color: var(--txt-fraco, #61748f); }
.pd-w-num b { color: var(--txt, #eaf2ff); }

/* anel (donut) com a % no meio — mesma paleta pos/warn/neg do restante da tela */
.pd-ring {
  --pd-p: 0;
  width: 66px; height: 66px; flex: none; border-radius: 50%; position: relative;
  display: grid; place-items: center;
  color: var(--pd-cor-neutro);
  background: conic-gradient(currentColor calc(var(--pd-p) * 1%), rgba(3, 7, 13, 0.85) 0);
}
.pd-ring.pd-pos { color: #2ee06a; }
.pd-ring.pd-warn { color: #ffd27a; }
.pd-ring.pd-neg { color: #ff6b63; }
.pd-ring::before {
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  background: #0a1420;
}
.pd-ring b { position: relative; font-size: 14px; font-weight: 900; color: var(--txt, #eaf2ff); }

/* selo da carteira de melhor assertividade */
.pd-wallet.melhor { border-color: rgba(43, 149, 255, 0.55); box-shadow: 0 0 24px rgba(43, 149, 255, 0.16); }
.pd-w-best {
  margin-left: auto; font-size: 9px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
  color: #041022; background: linear-gradient(135deg, var(--azul, #2b95ff), var(--azul-claro, #6fc0ff));
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}

/* prévia compacta dos padrões da carteira, com "+N" quando não cabem todos */
.pd-w-beads { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.pd-w-chip {
  display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 8px;
  background: rgba(3, 7, 13, 0.7); border: 1px solid rgba(58, 164, 255, 0.22);
  font-size: 11px; font-weight: 800; color: var(--txt-suave, #9fb4cf);
}
.pd-w-chip-mais { color: var(--azul-claro, #6fc0ff); }

.pd-w-more {
  margin-top: 12px; text-align: center; font-size: 12px; font-weight: 800;
  color: var(--txt-fraco, #61748f); display: flex; align-items: center; justify-content: center; gap: 6px;
}
.pd-w-chev { display: inline-block; transition: transform .3s ease; }
.pd-wallet.open .pd-w-chev { transform: rotate(180deg); }
/* ABRIR/FECHAR SEM ALTURA MÁGICA. Isto era max-height 0 → 1400px com overflow hidden: o
   que passasse de 1400px de lista era CORTADO, sem barra e sem aviso — com 20 padrões
   sumiam vários. O truque de grid 0fr → 1fr anima igual e acompanha o conteúdo. */
.pd-w-expand { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.pd-wallet.open .pd-w-expand { grid-template-rows: 1fr; }
.pd-w-expand > * { min-height: 0; overflow: hidden; }

/* setas de página da lista de padrões */
.pd-pag {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(58, 164, 255, 0.16);
}
.pd-pag-b {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  cursor: pointer; font: inherit; font-size: 16px; line-height: 1;
  background: rgba(58, 164, 255, 0.08); border: 1px solid rgba(58, 164, 255, 0.22); color: var(--txt);
}
.pd-pag-b:hover:not(:disabled) { background: rgba(58, 164, 255, 0.16); }
.pd-pag-b:disabled { opacity: .3; cursor: default; }
.pd-pag-t { font-size: 11.5px; color: var(--txt-suave); font-variant-numeric: tabular-nums; }
.pd-w-plist {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(58, 164, 255, 0.14);
  display: flex; flex-direction: column; gap: 8px;
}
.pd-prow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 11px; background: rgba(3, 7, 13, 0.7);
  border: 1px solid rgba(58, 164, 255, 0.16); border-radius: 10px;
}
.pd-prow-seq { display: flex; align-items: center; gap: 4px; }
.pd-prow-gale {
  font-size: 9px; font-weight: 900; padding: 2px 7px; border-radius: 999px;
  background: rgba(43, 149, 255, 0.16); border: 1px solid rgba(43, 149, 255, 0.4); color: var(--azul-claro, #6fc0ff);
}
.pd-prow-assert { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pd-prow-assert b { font-size: 14px; font-weight: 900; min-width: 42px; text-align: right; }
.pd-minibar {
  width: 68px; height: 7px; border-radius: 999px; background: rgba(3, 7, 13, 0.9);
  border: 1px solid rgba(58, 164, 255, 0.22); overflow: hidden;
}
.pd-minibar span { display: block; height: 100%; border-radius: 999px; background: currentColor; }
.pd-prow-meta { font-size: 10.5px; color: var(--txt-fraco, #61748f); white-space: nowrap; }
.pd-pouca { color: #ffd27a; font-weight: 800; white-space: nowrap; }
.pd-prow-del { background: transparent; border: none; color: var(--txt-fraco, #61748f); cursor: pointer; font-size: 13px; }
.pd-prow-del:hover { color: #ff6b63; }

/* ══ estados vazio / erro ════════════════════════════════════════════════ */
.pd-vazio {
  padding: 22px 16px; text-align: center;
  font-size: 12.5px; line-height: 1.6; color: var(--txt-fraco, #61748f);
  border: 1px dashed rgba(58, 164, 255, 0.22); border-radius: 14px;
}
.pd-erro {
  padding: 14px; border-radius: 12px;
  background: rgba(255, 107, 99, 0.10); border: 1px solid rgba(255, 107, 99, 0.35);
  color: #ffada7; font-size: 12.5px; text-align: center;
}
.pd-retry {
  margin-top: 12px; padding: 11px 16px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(79, 178, 255, 0.5); background: rgba(13, 44, 78, 0.6);
  color: #dcecff; font: inherit; font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
}
.pd-retry:hover { background: rgba(20, 66, 116, 0.75); }

/* ══ esqueleto (loading) ═════════════════════════════════════════════════ */
@keyframes pd-pulso {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.75; }
}
.pd-skel-linha { background: rgba(58, 164, 255, 0.16); border-radius: 6px; animation: pd-pulso 1.3s ease-in-out infinite; }
.pd-skel-linha-tit { width: 40%; height: 12px; }
.pd-skel-linha-sub { width: 60%; height: 10px; margin-top: 10px; }
.pd-skel-wallet { padding: 16px; }

/* ══ responsivo ══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .pd-cols { gap: 14px; }
  .pd-salvar-row { flex-direction: column; align-items: stretch; }
  .pd-btn-salvar { width: 100%; }
  .pd-wallets { grid-template-columns: 1fr; }
  /* NO CELULAR: o Histórico de resultados (último card) sobe pra logo abaixo do Jogo —
     antes do "Monte o gatilho". Só no mobile (flex `order`); no desktop a ordem é a do DOM. */
  .pd-corpo > .pd-card { order: 3; }
  .pd-corpo > .pd-card:first-child { order: 1; }   /* 1 · Jogo */
  .pd-corpo > .pd-card:last-child { order: 2; }    /* Histórico de resultados */
}
@media (min-width: 1000px) {
  .pd-corpo { max-width: 1100px; margin: 0 auto; }
}

/* Correção de altura: dentro da linha de salvar, o select e o campo esticavam pra ocupar
   a altura toda da linha (esticamento padrão do grid) e viravam duas caixas enormes. */
.pd-salvar-row { align-items: center; }
.pd-salvar-row .pd-select,
.pd-salvar-row input,
.pd-salvar-row .pd-mini { height: 54px; min-height: 54px; align-self: center; }

/* ══ CELULAR: alvos maiores e nada espremido ═════════════════════════════════
   A tela é usada com o polegar, em pé. Bolinha pequena demais erra o toque, e
   controle apertado na borda é o que faz a tela parecer "quebrada" no celular. */
@media (max-width: 640px) {
  .pd-card { padding: 14px 12px; border-radius: 14px; }
  .pd-card-tit { font-size: 10.5px; }
  /* histórico: bolinha maior e rolagem com encaixe, pra parar sempre alinhada */
  .pd-trail { gap: 7px; padding: 10px 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .pd-trail .pd-bead { scroll-snap-align: end; }
  .pd-bead { width: 30px; height: 30px; font-size: 12.5px; }
  .pd-bead-sm { width: 22px; height: 22px; font-size: 10.5px; }
  /* Botões de cor em GRADE de dois virou um paredão de 5 blocos gigantes ocupando meia
     tela. As três cores ficam numa linha (é o que o dedo procura primeiro) e as duas ações
     em outra, mais discretas. */
  .pd-btns { display: flex; flex-wrap: wrap; gap: 8px; }
  /* as três cores dividem a primeira linha; "Banker" e "Player" são as palavras mais
     longas, então o texto encolhe junto pra não sair cortado como "Banke". */
  .pd-btns .pd-cbtn { flex: 1 1 0; min-width: 0; min-height: 44px; font-size: 12px; padding: 10px 2px; letter-spacing: 0; }
  /* ações ocupam a linha inteira, uma embaixo da outra */
  .pd-btns .pd-cbtn.pd-ghost { flex: 1 1 calc(50% - 4px); font-size: 12.5px; }
  /* ROLETA: a paleta tem cores + 10 chips de mercado. Aqui NÃO pode ser flex:1 (15 itens
     espremidos sobrepõem) — cada item fica do tamanho do conteúdo e quebra linha. */
  .pd-btns.roleta .pd-cbtn { flex: 0 0 auto; min-width: auto; }
  .pd-btns.roleta .pd-cbtn.pd-mkt { padding: 9px 12px; font-size: 12px; }
  .pd-btns.roleta .pd-cbtn.pd-ghost { flex: 1 1 calc(50% - 4px); }
  /* Previsão e gale empilhados. Era flex em coluna com os filhos esticando, e sobrava
     um vão enorme entre um bloco e outro; em bloco simples cada um fica do tamanho do
     próprio conteúdo. */
  .pd-cols { display: block; }
  .pd-col { width: 100%; }
  .pd-col + .pd-col { margin-top: 16px; }
  .pd-toggle, .pd-gale { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
  .pd-toggle button, .pd-gale button { min-height: 44px; }
  /* ROLETA: 12 alvos de previsão não cabem numa linha — quebra em grade de 3 colunas. */
  .pd-toggle.roleta { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; }
  .pd-toggle.roleta button { font-size: 12px; padding: 8px 4px; }
  /* resultado: número grande primeiro, barra embaixo, chips quebrando sozinhos */
  .pd-assert { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pd-bar { width: 100%; }
  .pd-chips { flex-wrap: wrap; gap: 6px; }
  /* salvar: tudo empilhado e do tamanho do dedo */
  .pd-salvar-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .pd-salvar-row .pd-select, .pd-salvar-row input, .pd-salvar-row .pd-mini { width: 100%; }
  .pd-btn-salvar { width: 100%; min-height: 50px; }
  /* editor de bolinha: campos de dado lado a lado sem estourar a linha */
  .pd-bead-ed { gap: 8px; }
  .pd-dd { width: 52px; }
  .pd-ddlbl { min-width: 0; }            /* no celular o rotulo nao precisa reservar 90px */
  .pd-ed-num { width: 100%; }            /* o campo da soma cabia so pela metade */
}

/* ══ MONITOR LARGO: usa a tela em vez de deixar faixa vazia ══════════════════ */
@media (min-width: 1280px) {
  .pd-wallets { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  .pd-trail { padding: 12px 10px; }
}

/* AS CORES DOS DADOS no botão de previsão. Banker joga vermelho+laranja, Player
   azul+laranja — a bolinha responde "qual é qual?" sem precisar de legenda.
   São <i> pintados, não emoji: emoji muda de desenho em cada sistema e quebra o
   alinhamento do botão. */
.pd-toggle button { display: inline-flex; align-items: center; gap: 8px; }
.pd-dados { display: inline-flex; gap: 3px; }
.pd-dado {
  width: 9px; height: 9px; border-radius: 50%; display: block;
  box-shadow: 0 0 6px currentColor;
}
.pd-dado-vermelho { background: #ff5a52; color: rgba(255, 90, 82, 0.5); }
.pd-dado-azul { background: #3aa3ff; color: rgba(58, 163, 255, 0.5); }
.pd-dado-laranja { background: #ffa63c; color: rgba(255, 166, 60, 0.5); }

/* CELULAR: a linha de salvar vira COLUNA, e aí o `flex: 1 1 180px` dos campos deixa de
   ser largura e vira ALTURA — o select e o nome da carteira esticavam pra ~180px cada,
   com um vazio enorme dentro. Em coluna eles devem ter a altura do próprio conteúdo. */
@media (max-width: 640px) {
  .pd-salvar-row .pd-select,
  .pd-salvar-row .pd-mini,
  .pd-auto-hint { flex: 0 0 auto; width: 100%; }
  .pd-salvar-row { gap: 8px; }
}

/* ── HISTÓRICO DE RESULTADOS (grade de cards, embaixo do Salvar) ──────────────
   Cada card = uma rodada: bolinha com o NÚMERO (soma vencedora), o nome do lado
   e o índice (1 = mais recente). Mesmo dado da trilha, em grade. */
.pd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
}
.pd-gcard {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(58, 164, 255, 0.16);
  background: rgba(3, 7, 13, 0.55);
}
.pd-gbead {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.pd-glabel { font-size: 12px; font-weight: 700; color: var(--txt, #eaf2ff); text-align: center; line-height: 1.15; }
.pd-gidx { font-size: 11px; color: var(--txt-fraco, #61748f); }

.pd-ghora { font-size: 10px; color: var(--txt-fraco, #61748f); letter-spacing: .2px; }
.pd-grid-mais {
  width: 100%; margin-top: 12px; padding: 12px;
  border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(58, 164, 255, 0.28);
  background: rgba(8, 16, 28, 0.6);
  color: var(--azul-claro, #6fc0ff);
  font-family: inherit; font-size: 14px; font-weight: 700;
  transition: background .15s, border-color .15s;
}
.pd-grid-mais:hover { background: rgba(43, 149, 255, 0.14); border-color: var(--azul, #2b95ff); }

/* MARCAÇÕES do histórico conforme o gatilho montado (backtest ao vivo) */
.pd-gcard { position: relative; transition: opacity .15s, border-color .15s, box-shadow .15s; }
.pd-gcard.dim { opacity: .32; }
.pd-gcard.mk-gat { border-color: rgba(58, 164, 255, 0.75); box-shadow: inset 0 0 0 1px rgba(58, 164, 255, 0.45); }
.pd-gcard.mk-win { border-color: rgba(46, 224, 106, 0.7); box-shadow: 0 0 16px rgba(46, 224, 106, 0.2); }
.pd-gcard.mk-loss { border-color: rgba(255, 107, 99, 0.7); box-shadow: 0 0 16px rgba(255, 107, 99, 0.18); }
.pd-gtag {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  font-size: 11px; font-weight: 800; letter-spacing: .3px;
  padding: 1px 7px; border-radius: 8px;
}
.pd-gtag.win { background: rgba(46, 224, 106, 0.92); color: #04140a; }
.pd-gtag.loss { background: rgba(255, 107, 99, 0.92); color: #1a0605; }

/* ── AVIATOR (crash): regra própria do jogo ─────────────────────────────── */
.pd-av-form { display: flex; flex-direction: column; gap: 14px; }
.pd-av-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; }
.pd-av-line > span { color: var(--txt, #1a2740); }
.pd-av-line .pd-mini { width: 130px; flex: 0 0 auto; }
.pd-av-cond { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-av-dir { flex: 0 0 auto; }
.pd-av-valor { width: 120px; }
.pd-av-x { opacity: .55; font-weight: 800; }
@media (max-width: 560px) {
  .pd-av-line { flex-wrap: wrap; }
  .pd-av-line .pd-mini, .pd-av-valor { width: 100%; }
  .pd-av-cond .pd-av-dir { width: 100%; }
}