:root{
  --fundo:#050608; --cartao:#101217; --cartao-2:#161920; --borda:#22262f;
  --texto:#f2f4f8; --suave:#c3cad8; --fraco:#a3acbe; --amarelo:#ffc94d;
  --laranja:#f47b20; --laranja-2:#ff9a4a; --azul:#2f6bff; --azul-2:#5b8cff; --marinho:#0a1a3d;
  --dourado:#c9a66b; --verde:#2fbf7f; --vermelho:#ff5a5a;
  --raio:16px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fundo);color:var(--texto);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.4}
.pagina{max-width:1440px;margin:0 auto;padding:20px 24px 40px}

/* TOPO */
.topo{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.marcas{display:flex;align-items:center;gap:18px}
.agora{height:58px}
.divisor{width:1px;height:40px;background:var(--borda)}
.carmais{display:flex;align-items:center;gap:10px}
.cm-simbolo{width:34px;height:34px;overflow:hidden;position:relative;flex:none}
.cm-simbolo img{position:absolute;height:44px;left:-7.8px;top:-4.9px}
.cm-texto{line-height:1}
.cm-texto small{display:block;font-size:.62rem;letter-spacing:.18em;color:var(--suave);font-weight:600}
.cm-texto b{font-size:1.25rem;letter-spacing:.04em;font-weight:900}
.titulo h1{margin:0;font-size:1.55rem;font-weight:800}
.titulo p{margin:2px 0 0;color:var(--suave);font-size:.85rem}
.selo-exemplo{display:inline-block;background:rgba(244,123,32,.15);color:var(--laranja-2);border:1px solid rgba(244,123,32,.4);font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:99px;margin-left:8px;vertical-align:middle;letter-spacing:.05em}
.controles{display:flex;gap:10px;flex-wrap:wrap}
.pilulas{display:flex;background:var(--cartao);border:1px solid var(--borda);border-radius:99px;padding:4px}
.pilulas button{background:none;border:0;color:var(--suave);font:inherit;font-size:.85rem;font-weight:600;padding:7px 14px;border-radius:99px;cursor:pointer}
.pilulas button.ativo{background:var(--laranja);color:#fff}
.pilulas button:disabled{opacity:.35;cursor:not-allowed}

/* CARTÕES */
.cartao{min-width:0;background:linear-gradient(180deg,var(--cartao-2),var(--cartao));border:1px solid var(--borda);border-radius:var(--raio);padding:18px}
.cartao h2{margin:0 0 14px;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amarelo);font-weight:800}

/* NÚMEROS */
.numeros{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:14px}
.numero{position:relative;overflow:hidden}
.numero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--cor,var(--laranja))}
.numero .rotulo{display:flex;align-items:center;gap:8px;color:#fff;font-size:.85rem;font-weight:700}
.numero .icone{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--cor,var(--laranja)) 18%,transparent);font-size:1rem}
.numero .valor{font-size:2.1rem;font-weight:800;margin:10px 0 4px;letter-spacing:-.02em}
.var{font-size:.78rem;font-weight:700}
.var.sobe{color:var(--verde)} .var.desce{color:var(--vermelho)} .var.igual{color:var(--suave)}
.var span{color:var(--fraco);font-weight:500}

/* MEIO */
.meio{display:grid;grid-template-columns:1fr 340px;gap:14px;margin-bottom:14px}
.lado{display:grid;gap:14px;align-content:start}

/* TABELA */
.tabela-caixa{overflow-x:auto;overflow-y:hidden}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;color:#fff;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;padding:0 10px 10px;white-space:nowrap}
td{padding:9px 10px;border-top:1px solid var(--borda);white-space:nowrap}
td.num,th.num{text-align:right}
tr:hover td{background:rgba(255,255,255,.02)}
.pos{font-weight:800;color:var(--suave);width:44px;font-size:1rem}
.pos .seta{display:block;font-size:.72rem;margin-top:2px}
.pos.p1{color:var(--dourado)} .pos.p2{color:#c0c6d2} .pos.p3{color:#c27a4a}
.vend{display:flex;align-items:center;gap:10px}
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.78rem;background:#1e2430;color:#cfd6e4;flex:none}
.vend .nome{font-weight:700}
.vend .loja{display:flex;align-items:center;gap:5px;color:var(--suave);font-size:.75rem}
.logo-loja{width:18px;height:18px;border-radius:4px;object-fit:cover;flex:none}
.logo-loja.claro{background:#fff;object-fit:contain;padding:1px}
.barra-cel{display:flex;align-items:center;gap:8px;min-width:150px}
.barra-cel .trilho{flex:1;height:8px;background:#1b1f28;border-radius:99px;overflow:hidden}
.barra-cel .enchimento{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--laranja),var(--laranja-2))}
.barra-cel.azul .enchimento{background:linear-gradient(90deg,var(--azul),var(--azul-2))}
.barra-cel.verde{margin-top:5px}
.barra-cel.verde .trilho{height:6px}
.barra-cel.verde .enchimento{background:linear-gradient(90deg,#1f9d6b,#3ee39a)}
.barra-cel.verde b{color:#3ee39a;font-size:.8rem}
.barra-cel small{color:var(--suave);font-size:.66rem;min-width:40px}
.barra-cel b{min-width:30px;text-align:right}
.seta{font-weight:800;font-size:.8rem}
.seta.sobe{color:var(--verde)} .seta.desce{color:var(--vermelho)} .seta.igual{color:var(--fraco)}

/* PÓDIO */
.podio{background:linear-gradient(150deg,#ff8a2b 0%,#c4520c 45%,#0a1a3d 100%);border:0}
.podio h2{color:rgba(255,255,255,.85)}
.podio-lista{display:grid;gap:10px}
.podio-item{display:flex;align-items:center;gap:12px;background:rgba(0,0,0,.28);border-radius:12px;padding:10px 12px}
.medalha{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#111;flex:none}
.m1{background:linear-gradient(135deg,#f3d99b,var(--dourado))} .m2{background:linear-gradient(135deg,#f1f3f7,#aab2c0)} .m3{background:linear-gradient(135deg,#f0b48a,#b5683a)}
.podio-item .nome{font-weight:800}
.podio-item small{color:rgba(255,255,255,.75);font-size:.75rem}
.podio-item .pts{margin-left:auto;text-align:right;font-weight:900;font-size:1.25rem}
.podio-item .pts small{display:block;font-weight:600}

.campeoes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.campeao{background:#0b0d12;border:1px solid var(--borda);border-radius:12px;padding:12px}
.campeao .tipo{font-size:.72rem;color:var(--suave);font-weight:600}
.campeao .quem{font-weight:800;margin-top:6px;font-size:.92rem}
.campeao .quanto{color:var(--laranja-2);font-weight:800;font-size:1.1rem}

/* BAIXO */
.baixo{display:grid;grid-template-columns:1fr 1.15fr 1.35fr 1fr;gap:14px}
.barras{display:grid;gap:10px}
.barra-linha{display:grid;grid-template-columns:110px 1fr 28px;align-items:center;gap:10px;font-size:.85rem}
.barra-linha .rot{color:#cfd6e4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barra-linha .trilho{height:14px;background:#1b1f28;border-radius:6px;overflow:hidden}
.barra-linha .enchimento{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--azul),var(--azul-2))}
.barra-linha b{text-align:right}
.anuncio{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:8px 0;border-top:1px solid var(--borda);font-size:.85rem}
.anuncio:first-of-type{border-top:0;padding-top:0}
.anuncio .nome{font-weight:700}
.anuncio small{color:var(--suave);font-size:.72rem;grid-column:1}
.anuncio .qt{grid-row:1 / span 2;grid-column:2;align-self:center;font-weight:900;font-size:1.2rem;color:var(--laranja-2)}
.colunas{display:flex;align-items:flex-end;gap:14px;height:170px;padding-top:10px}
.coluna{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.coluna .pilar{width:100%;max-width:46px;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,var(--laranja-2),var(--laranja))}
.coluna .pilar.vazio{background:repeating-linear-gradient(45deg,#1b1f28 0 6px,#14171e 6px 12px);border:1px dashed #2c313c}
.coluna b{font-size:.85rem}
.coluna small{color:var(--suave);font-size:.75rem}
.lojas{display:grid;gap:10px}
.loja-linha{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;font-size:.85rem}
.loja-linha .logo-loja{width:28px;height:28px;border-radius:7px}
.loja-linha .trilho{height:8px;background:#1b1f28;border-radius:99px;overflow:hidden;margin-top:4px}
.loja-linha .enchimento{height:100%;background:var(--dourado);border-radius:99px}
.loja-linha b{font-size:1rem}

.rodape{margin-top:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--fraco);font-size:.75rem}
.regras span{display:inline-block;background:var(--cartao);border:1px solid var(--borda);border-radius:99px;padding:3px 10px;margin:0 4px 6px 0;color:var(--suave)}
.regras b{color:var(--laranja-2)}

/* PERÍODO */
.barra-periodo{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.barra-periodo .pilulas button{line-height:1.15;text-align:center}
.barra-periodo .pilulas button small{display:block;font-size:.68rem;font-weight:600;opacity:.85}
#mes button.ativo{background:var(--azul)}
.coluna.apagada{opacity:.4}
.funil{display:grid;gap:2px}
.degrau{display:grid;grid-template-columns:1fr 92px;align-items:center;gap:8px}
.degrau .faixa{width:var(--w);min-width:min(100%,200px);background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 55%,transparent));border-radius:8px;padding:6px 10px;display:flex;align-items:baseline;gap:8px;white-space:nowrap;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.degrau .faixa b{font-size:1.1rem}
.degrau .faixa span{font-size:.76rem;font-weight:700}
.degrau small{color:var(--suave);font-size:.74rem;text-align:right;white-space:nowrap}
.passagem{font-size:.72rem;color:var(--suave);padding:3px 0 3px 12px}
.passagem.pior{color:var(--vermelho);animation:neon-vermelho 1.8s ease-in-out infinite}
.mini{display:flex;align-items:flex-end;gap:4px;height:34px;margin-top:8px}
.mini div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:2px}
.mini i{display:block;width:100%;max-width:22px;border-radius:3px 3px 1px 1px;background:#a78bfa;opacity:.35}
.mini .sel i{opacity:1;box-shadow:0 0 8px rgba(167,139,250,.6)}
.mini small{font-size:.6rem;color:var(--suave);line-height:1}
.coluna small{text-align:center;line-height:1.2}
.razao{display:block;margin-top:2px;font-size:.8rem;font-weight:700;color:var(--suave)}

/* VISÃO DO GESTOR */
#perfil button.ativo[data-v="gestor"]{background:var(--dourado);color:#111}
.clicavel{cursor:pointer;transition:transform .15s,border-color .15s}
.clicavel:hover{transform:translateY(-2px);border-color:var(--amarelo)}
.ver-lista{display:none;margin-top:8px;font-size:.75rem;font-weight:800;color:var(--amarelo)}
.clicavel .ver-lista{display:block}
.clicavel-num{cursor:pointer;color:var(--amarelo);text-decoration:underline;text-underline-offset:3px}
.janela-fundo{position:fixed;inset:0;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:16px;z-index:20}
.janela-fundo[hidden]{display:none}
.janela{width:100%;max-width:1080px;max-height:88vh;display:flex;flex-direction:column;background:var(--cartao-2);border:1px solid var(--borda);border-radius:var(--raio);animation:entra .3s both}
.janela-topo{display:flex;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--borda)}
.janela-topo h3{margin:0;font-size:1.15rem;color:var(--amarelo)}
.janela-topo p{margin:4px 0 0;color:var(--suave);font-size:.85rem}
.fechar{background:#1e2430;border:0;color:#fff;width:36px;height:36px;border-radius:50%;font-size:1rem;cursor:pointer;flex:none}
.janela-corpo{overflow:auto;padding:6px 20px 10px}
.janela-corpo td{white-space:normal}
.janela-corpo .camp{font-size:.78rem;line-height:1.35}
.janela-corpo .camp span{color:var(--suave)}
.etiqueta{display:inline-block;font-size:.72rem;font-weight:800;padding:2px 8px;border-radius:99px}
.etiqueta.ok{background:rgba(47,191,127,.15);color:var(--verde)}
.etiqueta.neg{background:rgba(255,201,77,.15);color:var(--amarelo)}
.janela-aviso{margin:0;padding:12px 20px;border-top:1px solid var(--borda);color:var(--suave);font-size:.78rem}
.cliente-cartao{display:none}
@media (max-width:720px){
  .janela-corpo table{display:none}
  .cliente-cartao{display:block;border-top:1px solid var(--borda);padding:12px 0;font-size:.85rem}
  .cliente-cartao .nome{font-weight:800;font-size:.95rem}
  .cliente-cartao div{margin-top:3px}
  .cliente-cartao span{color:var(--suave)}
}

/* MOVIMENTO */
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes balanca{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(0)}}
@keyframes brilho{0%,100%{box-shadow:0 0 0 0 rgba(243,217,155,.0)}50%{box-shadow:0 0 0 6px rgba(243,217,155,.25)}}
@keyframes chama{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@keyframes foguete{0%,100%{transform:translate(0,0)}50%{transform:translate(2px,-3px)}}
.cartao{animation:entra .6s both}
#ranking tr{animation:entra .5s both}
.enchimento{transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.pilar{transition:height 1.2s cubic-bezier(.2,.8,.2,1)}
.anima{display:inline-block}
.balanca{animation:balanca 2.6s ease-in-out infinite;transform-origin:50% 90%}
.chama{animation:chama 1.2s ease-in-out infinite}
.foguete{animation:foguete 1.4s ease-in-out infinite}
.m1{animation:brilho 2s ease-in-out infinite}
@keyframes neon-verde{0%,100%{text-shadow:0 0 2px rgba(47,191,127,.4)}50%{text-shadow:0 0 6px #2fbf7f,0 0 14px #2fbf7f,0 0 22px rgba(47,191,127,.7)}}
@keyframes neon-vermelho{0%,100%{text-shadow:0 0 2px rgba(255,90,90,.4)}50%{text-shadow:0 0 6px #ff5a5a,0 0 14px #ff5a5a,0 0 22px rgba(255,90,90,.7)}}
.seta.sobe,.var.sobe{animation:neon-verde 1.8s ease-in-out infinite}
.seta.desce,.var.desce{animation:neon-vermelho 1.8s ease-in-out infinite}
.var span{text-shadow:none}

/* TELAS MENORES */
@media (max-width:1180px){
  .numeros{grid-template-columns:repeat(3,1fr)}
  .meio{grid-template-columns:1fr}
  .lado{grid-template-columns:1fr 1fr}
  .baixo{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .pagina{padding:14px 16px 30px}
  .topo{flex-direction:column;align-items:flex-start}
  .marcas{flex-wrap:wrap;gap:12px 14px}
  .marcas .divisor:nth-of-type(2){display:none}
  .titulo{flex-basis:100%}
  .longo{display:none}
  .barra-periodo .pilulas{width:100%}
  #periodo{display:grid;grid-template-columns:1fr 1fr;gap:4px;border-radius:16px;overflow:visible}
  #periodo button{border-radius:12px;padding:8px 6px}
  .agora{height:44px}
  .titulo h1{font-size:1.25rem}
  .controles{width:100%}
  .pilulas{width:100%;overflow-x:auto}
  .pilulas button{flex:1;padding:7px 10px}
  .numeros{grid-template-columns:1fr 1fr}
  .numeros .numero:last-child{grid-column:1 / -1}
  .numero .valor{font-size:1.7rem}
  .lado,.baixo{grid-template-columns:1fr}
  .col-extra{display:none}
  .barra-cel{min-width:90px}
  .barra-cel small{display:none}
  #ranking td:nth-child(2){white-space:normal}
  #ranking th{letter-spacing:.02em}
  .avatar{display:none}
  td,th{padding-left:6px;padding-right:6px}
  .cartao{padding:14px}
}

/* ACESSO (login, 2 etapas, troca de senha) */
[hidden]{display:none!important}
.acesso{min-height:100vh;display:grid;place-items:center;padding:16px;background:radial-gradient(circle at 30% 10%,#1a1408,var(--fundo) 60%)}
.acesso-caixa{width:100%;max-width:400px;background:linear-gradient(180deg,var(--cartao-2),var(--cartao));border:1px solid var(--borda);border-radius:20px;padding:28px 24px;text-align:center;animation:entra .5s both}
.acesso-caixa .marcas{justify-content:center;margin-bottom:18px}
.acesso-caixa h1{margin:0 0 4px;font-size:1.3rem}
.acesso-caixa p{margin:0 0 16px;color:var(--suave);font-size:.9rem}
.acesso-caixa form{display:grid;gap:10px;text-align:left}
.acesso-caixa label{font-size:.82rem;font-weight:700;color:var(--suave)}
.acesso-caixa input{width:100%;margin-top:4px;padding:12px;border-radius:10px;border:1.5px solid var(--borda);background:#0b0d12;color:#fff;font:inherit}
.acesso-caixa input:focus{outline:none;border-color:var(--laranja)}
.codigo{font-size:1.6rem!important;letter-spacing:.4em;text-align:center}
.botao{background:var(--laranja);color:#fff;border:0;border-radius:10px;padding:12px;font:inherit;font-weight:800;cursor:pointer}
.botao:disabled{opacity:.5;cursor:wait}
.botao.fantasma{background:none;border:1px solid var(--borda);color:var(--suave)}
.link{background:none;border:0;color:var(--amarelo);font:inherit;font-size:.85rem;cursor:pointer;text-decoration:underline;padding:4px}
.erro{color:#ff8a8a;font-size:.85rem;font-weight:700;min-height:1.2em;margin:0}
.ok-msg{color:var(--verde);font-size:.85rem;font-weight:700}
.qr{background:#fff;border-radius:12px;padding:10px;width:200px;height:200px;margin:4px auto 8px}
.qr img{width:100%;height:100%}
.passos{text-align:left;color:var(--suave);font-size:.85rem;margin:0 0 12px;padding-left:18px}
.passos li{margin-bottom:4px}

/* USUÁRIO NO TOPO */
.usuario{display:flex;align-items:center;gap:10px;background:var(--cartao);border:1px solid var(--borda);border-radius:99px;padding:4px 4px 4px 14px;font-size:.82rem}
.usuario b{display:block;font-size:.85rem}
.usuario small{color:var(--suave)}
.usuario button{background:#1e2430;border:0;color:#fff;border-radius:99px;padding:7px 12px;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}

/* ABAS DO RANKING E MÉTODO */
.cabeca-cartao{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.cabeca-cartao h2{margin:0}
.abas{display:flex;background:#0b0d12;border:1px solid var(--borda);border-radius:99px;padding:3px}
.abas button{background:none;border:0;color:var(--suave);font:inherit;font-size:.78rem;font-weight:700;padding:6px 12px;border-radius:99px;cursor:pointer}
.abas button.ativo{background:var(--amarelo);color:#111}
.nome-clicavel{cursor:pointer}
.nome-clicavel:hover .nome{color:var(--amarelo);text-decoration:underline;text-underline-offset:3px}
tr.eu td{background:rgba(255,201,77,.06)}
.voce{display:inline-block;font-size:.62rem;font-weight:800;background:var(--amarelo);color:#111;border-radius:99px;padding:1px 6px;margin-left:6px;vertical-align:middle}
.itens{list-style:none;margin:0;padding:6px 0}
.itens li{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;padding:9px 0;border-top:1px solid var(--borda);font-size:.9rem}
.itens li:first-child{border-top:0}
.itens .st{font-weight:800;font-size:.75rem;padding:2px 8px;border-radius:99px;white-space:nowrap}
.st.fez{background:rgba(47,191,127,.15);color:var(--verde)}
.st.parcial{background:rgba(255,201,77,.15);color:var(--amarelo)}
.st.naofez{background:rgba(255,90,90,.12);color:var(--vermelho)}
.st.na{background:#1e2430;color:var(--fraco)}
.vazio-msg{color:var(--suave);font-size:.9rem;padding:20px 0;text-align:center}
.carregando{min-height:60vh;display:grid;place-items:center;color:var(--suave)}
@media (max-width:720px){
  .usuario{width:100%;justify-content:space-between}
}

/* PESSOAS (só administrador) */
.form-pessoa{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;padding:12px 0;border-bottom:1px solid var(--borda)}
.form-pessoa label{font-size:.78rem;font-weight:700;color:var(--suave);display:grid;gap:4px}
.form-pessoa input,.form-pessoa select{padding:9px;border-radius:8px;border:1.5px solid var(--borda);background:#0b0d12;color:#fff;font:inherit}
.form-pessoa .lojas-escolha{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 14px;font-size:.85rem;color:var(--suave)}
.form-pessoa .lojas-escolha label{display:flex;flex-direction:row;align-items:center;gap:6px;font-weight:600}
.form-pessoa .acoes{grid-column:1/-1;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.senha-temp{background:#0b0d12;border:1px dashed var(--amarelo);border-radius:10px;padding:12px;margin:10px 0;font-size:.9rem}
.senha-temp code{font-size:1.2rem;color:var(--amarelo);letter-spacing:.06em;user-select:all}
.mini-botao{background:#1e2430;border:0;color:#fff;border-radius:8px;padding:5px 9px;font:inherit;font-size:.75rem;cursor:pointer;margin:2px}
.inativo td{opacity:.45}