/* Tela do stake (src/stake.html): soma a src/site.css e usa as cores, as letras e as peças dela (bloco, selo, botão, endereço, nota).
   Aqui só o que é desta tela: a mesa de trabalho (a posição de quem conectou e os números de hoje), os campos, as listas de
   movimentos e a tabela dos dias. Sem estilo embutido na página: a política de conteúdo de /stake não aceita. */
.stk{--erro:#ffb3a1}
.stk [hidden]{display:none!important} /* o que o roteiro esconde fica escondido, mesmo quando a peça (botão, formulário) tem display próprio */
.stk-abertura{padding-block:clamp(28px,4vw,48px) 0}
.stk-abertura h1{font-size:clamp(2.75rem,10vw,4.5rem);line-height:var(--guia)}
.stk-abertura .lead{margin-top:14px}
.stk-ressalva{margin-top:14px;max-width:40em;font-size:1rem;line-height:1.55;font-weight:700;color:var(--amarelo)}
.stk-situacao{margin-top:20px;max-width:var(--medida);padding:14px 18px;border:1px solid var(--linha-forte);border-radius:16px;background:var(--laje);font-weight:700;line-height:1.45;color:var(--creme)}
.topo-nav>a[aria-current="page"]{color:var(--amarelo)}

/* ---- a mesa: sua posição e os números de hoje ---- */
.stk-mesa{padding-top:clamp(24px,4vw,36px)}
.stk-mesa-grade{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.stk-mesa .bloco{margin-top:0}
.stk-cabeca{margin-bottom:16px;font-family:var(--texto);font-weight:800;font-size:1.375rem;line-height:1.2;letter-spacing:0;text-transform:none}
.stk-sub{margin:28px 0 10px;font-family:var(--texto);font-weight:800;font-size:1.0625rem;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--creme)}
.stk-vazio{color:var(--fraco)}

/* carteiras encontradas no navegador: um botão para cada */
.stk-carteiras{display:flex;flex-direction:column;gap:10px}
.stk-carteiras button{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 20px 10px 12px;border:1.5px solid var(--linha-forte);border-radius:999px;background:var(--chao);color:var(--creme);font-weight:800;font-size:1.0625rem;line-height:1.2;text-align:left;cursor:pointer;transition:border-color .28s var(--mola),color .28s var(--mola),transform .28s var(--mola)}
.stk-carteiras button:hover{border-color:var(--amarelo);color:var(--amarelo);transform:translateY(-2px)}
.stk-carteiras button:active{transform:scale(.98)}
.stk-carteiras img{flex:none;width:34px;height:34px;border-radius:50%;background:var(--laje-2)}
.stk-sem{display:flex;flex-direction:column;gap:12px;color:var(--apoio)}
.stk-sem p:first-child{font-weight:700;color:var(--creme)}
.stk-sem [data-b22="sk-sem-celular"],.stk-sem [data-b22="sk-sem-computador"]{display:flex;flex-direction:column;align-items:stretch;gap:12px;font-size:.9375rem}
.stk-apps{display:flex;flex-direction:column;gap:10px}
.stk-apps .botao{width:100%;justify-content:space-between}
.stk-instalar{display:flex;flex-wrap:wrap;gap:8px 20px;font-weight:700}
.stk-instalar a{display:inline-flex;align-items:center;min-height:44px;color:var(--amarelo);text-decoration:underline;text-underline-offset:4px}
.stk-instalar a:hover{color:var(--amarelo-claro)}

/* rótulo e botão de sair na primeira linha; o endereço inteiro embaixo, em duas metades iguais */
.stk-conta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px}
.stk-conta>span{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fraco)}
.stk-conta code{grid-column:1/-1;grid-row:2}
.stk-sair{min-height:44px;padding:8px 18px;border:1.5px solid var(--linha-forte);border-radius:999px;background:none;color:var(--creme);font-weight:700;font-size:.875rem;line-height:1.2;cursor:pointer;transition:border-color .28s var(--mola),color .28s var(--mola)}
.stk-sair:hover{border-color:var(--amarelo);color:var(--amarelo)}
/* os quatro saldos: uma grade de fio fino (o fio é o fundo que aparece no vão de 1px) */
.stk-saldos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:16px;border:1px solid var(--linha);border-radius:16px;overflow:hidden;background:var(--linha)}
.stk-saldos>div{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:var(--chao)}
.stk-saldos dt{font-size:.6875rem;font-weight:700;letter-spacing:.1em;line-height:1.3;text-transform:uppercase;color:var(--fraco)}
.stk-saldos dd{font-weight:800;font-size:clamp(1.0625rem,4.6vw,1.375rem);line-height:1.2;font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere;color:var(--creme)}
.stk-saldos div:nth-child(3) dd{color:var(--amarelo)}

.stk-abas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-top:20px;padding:4px;border:1px solid var(--linha-forte);border-radius:26px;background:var(--chao)}
.stk-abas[data-so="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.stk-abas button{min-height:46px;padding:8px 6px;border:0;border-radius:22px;background:none;font-weight:800;font-size:.875rem;line-height:1.15;color:var(--apoio);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.stk-abas button:hover{color:var(--creme)}
.stk-abas button[aria-selected="true"]{background:var(--amarelo);color:var(--chao)}

.stk-form{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:18px}
.stk-form label,.stk-sim label{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fraco)}
/* o campo: a moldura é da caixa (o contorno de foco também), o que se digita fica sem moldura própria */
.stk-campo{display:flex;align-items:center;gap:8px;width:100%;max-width:28rem;padding:5px 5px 5px 20px;border:1.5px solid var(--linha-forte);border-radius:999px;background:var(--chao);transition:border-color .2s ease}
.stk-campo:focus-within{outline:2px solid var(--amarelo);outline-offset:2px}
.stk-campo input{flex:1;min-width:0;min-height:46px;padding:0;border:0;background:none;color:var(--creme);caret-color:var(--amarelo);font:800 1.25rem/1.2 var(--texto);font-variant-numeric:tabular-nums lining-nums;outline:0}
.stk-max{flex:none;min-height:46px;padding:8px 20px;border:0;border-radius:999px;background:var(--amarelo);color:var(--chao);font-weight:800;font-size:.875rem;line-height:1.2;cursor:pointer;transition:background-color .28s var(--mola)}
.stk-max:hover{background:var(--amarelo-claro)}
.stk-unidade{flex:none;padding-right:16px;font-weight:800;font-size:.9375rem;color:var(--fraco)}
.stk-form .botao{font-family:inherit;cursor:pointer}
.stk-form .botao[disabled]{opacity:.55;cursor:progress;transform:none;box-shadow:none}
.stk-erro{font-weight:700;font-size:.9375rem;line-height:1.45;color:var(--erro)}

/* o andamento de um depósito ou saque: uma caixa só, que muda de tom */
.stk-andamento{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:16px;padding:14px 18px;border:1px solid var(--linha-forte);border-radius:16px;background:var(--chao);font-weight:700;line-height:1.45;color:var(--creme)}
.stk-andamento[data-tom="espera"] p::before{content:'';display:inline-block;width:.55em;height:.55em;margin-right:.6em;border-radius:50%;background:var(--amarelo);animation:stk-pulso 1.2s ease-in-out infinite}
.stk-andamento[data-tom="ok"]{border-color:rgba(47,211,107,.55);color:var(--vivo)}
.stk-andamento[data-tom="erro"]{border-color:rgba(255,179,161,.5);color:var(--erro)}
.stk-andamento .botao{font-family:inherit;cursor:pointer}
@keyframes stk-pulso{50%{opacity:.25;transform:scale(.7)}}

/* cada movimento e cada recompra em duas linhas iguais no celular (o que é e quanto; situação e link) e numa linha só em tela larga */
.stk-movimentos li,.stk-recompras li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 16px;padding-block:12px;border-top:1px solid var(--linha);font-size:.9375rem;line-height:1.45;color:var(--apoio)}
.stk-movimentos li>a{justify-self:end}
.stk-recompras li>a{grid-column:1/-1;justify-self:start}
.stk-movimentos strong,.stk-recompras strong{font-weight:800;font-variant-numeric:tabular-nums lining-nums;color:var(--creme)}
.stk-movimentos a,.stk-recompras a{font-weight:800;padding-block:8px;margin-block:-8px}
.stk-estado{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--amarelo)}
.stk-estado[data-tom="ok"]{color:var(--vivo)}
.stk-estado[data-tom="erro"]{color:var(--erro)}

/* hoje: a taxa (estimativa), o lote e quanto rende */
.stk-taxa{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.stk-taxa-rotulo{flex-basis:100%;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fraco)}
.stk-taxa strong{font-family:var(--titulo);font-weight:400;font-size:clamp(2.5rem,10vw,3.75rem);line-height:1;font-variant-numeric:lining-nums;overflow-wrap:anywhere;color:var(--amarelo)}
.stk-taxa strong[data-sem]{font-family:var(--texto);font-weight:700;font-size:1.0625rem;line-height:1.4;color:var(--apoio)}
.stk-por100{margin-top:12px;max-width:30em;font-weight:700;color:var(--creme)}
.stk-dados{margin-top:18px}
.stk-dados>div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 16px;padding-block:12px;border-top:1px solid var(--linha)}
.stk-dados dt{font-size:.9375rem;color:var(--apoio)}
.stk-dados dd{font-weight:800;font-variant-numeric:tabular-nums lining-nums;text-align:right;color:var(--creme)}
.stk-dados dd small{display:block;font-size:.8125rem;font-weight:500;color:var(--fraco)}
.stk-dados .stk-dados-titulo{border-top:0;padding-top:0}
.stk-dados-titulo dt{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fraco)}
.stk-hoje>.nota{margin-top:14px}
.stk-sim{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:24px;border-top:1px solid var(--linha)}
.stk-sim .stk-sub{margin-top:20px;margin-bottom:2px}
.stk-sim-saida{min-height:3.1em;font-weight:700;line-height:1.5;color:var(--creme)}

/* ---- as seções de leitura: título de um lado, conteúdo do outro ---- */
.stk-par{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,4vw,40px)}
.stk-par>h2{font-size:clamp(2.5rem,9vw,3.5rem)}
.stk-corpo{display:flex;flex-direction:column;gap:14px;min-width:0}
.stk-corpo>.stk-sub{margin:22px 0 0}
.stk-passos{display:flex;flex-direction:column;gap:12px;counter-reset:passo}
.stk-passos li{position:relative;padding:20px 22px 22px 72px;border:1px solid var(--linha);border-radius:20px;background:var(--laje)}
.stk-passos li::before{counter-increment:passo;content:counter(passo);position:absolute;left:22px;top:16px;width:36px;font-family:var(--titulo);font-size:2.5rem;line-height:1;color:var(--amarelo)}
.stk-passos h3{font-family:var(--texto);font-weight:800;font-size:1.1875rem;line-height:1.3;letter-spacing:0;text-transform:none}
.stk-passos p{margin-top:6px;max-width:62ch;color:var(--apoio)}
.stk-fases{display:flex;flex-direction:column;gap:8px;max-width:var(--medida)}
.stk-fases li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 16px;padding:14px 18px;border:1px solid var(--linha);border-radius:14px;background:var(--laje);font-weight:700;color:var(--apoio)}
.stk-fases li[data-atual]{border-color:var(--amarelo);color:var(--creme)}
.stk-fases strong{font-weight:800;font-variant-numeric:tabular-nums lining-nums;color:var(--creme)}
.stk-recompras{max-width:var(--medida)}
.stk-rolagem{max-width:var(--medida);overflow-x:auto;border:1px solid var(--linha);border-radius:16px;background:var(--laje);scrollbar-width:thin;scrollbar-color:var(--amarelo) transparent}
.stk-dias{width:100%;border-collapse:collapse;font-size:.9375rem;font-variant-numeric:tabular-nums lining-nums}
.stk-dias th,.stk-dias td{padding:12px 14px;text-align:right;white-space:nowrap}
.stk-dias th:first-child,.stk-dias td:first-child{text-align:left}
.stk-dias thead th{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fraco);border-bottom:1px solid var(--linha)}
.stk-dias tbody tr+tr td{border-top:1px solid var(--linha)}
.stk-dias td{font-weight:700;color:var(--creme)}
.stk-dias td small{font-size:.8125rem;font-weight:500;color:var(--fraco)}
.stk-dias .stk-vazio td{text-align:left;font-weight:400;color:var(--fraco)}

.stk-enderecos{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;max-width:var(--medida)}
.stk-balanco{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 40px;max-width:820px}
.stk-balanco .stk-dados{margin-top:0}
.stk-lista-riscos li{padding-block:14px;border-top:1px solid var(--linha);max-width:70ch;line-height:1.55;color:var(--apoio)}
.stk-lista-riscos li:first-child{font-weight:700;color:var(--creme)}

@media (min-width:640px){
  .stk-balanco{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stk-movimentos li{grid-template-columns:minmax(0,1fr) auto auto auto}
  .stk-recompras li{grid-template-columns:minmax(0,1fr) auto auto}
  .stk-recompras li>a{grid-column:auto}
  .stk-abas button{font-size:.9375rem}
}
@media (min-width:1024px){
  .stk-mesa-grade{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px;align-items:start}
  .stk-par{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,6vw,96px)}
  .stk-par>h2{position:sticky;top:calc(var(--barra) + 40px);align-self:start;font-size:clamp(2.5rem,3.9vw,3.5rem)}
}