:root{
  --bg:#08080A; --card:#101013; --card2:#16161A; --linha:#232329;
  --txt:#EAEAEC; --txt2:#9A9AA4; --txt3:#63636D;
  --ac:#C81010; --ac2:#F2453A;
  --gain:#26A75F; --loss:#E63329; --zero:#8A8A94;
  --mono:ui-monospace,"Roboto Mono","SF Mono",Consolas,monospace;
  --r:14px;
}
*{box-sizing:border-box}
/* precisa vencer os display:block/grid dos componentes abaixo */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt); min-height:100vh;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:var(--ac2);text-decoration:none}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.02em}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- topo ---------- */
.topo{
  display:flex;align-items:center;gap:16px;
  padding:14px 22px;border-bottom:1px solid var(--linha);
  background:rgba(8,8,10,.9);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:50;flex-wrap:wrap;
}
.marca{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.03em}
.marca .p{width:9px;height:9px;border-radius:50%;background:var(--ac);box-shadow:0 0 12px var(--ac)}
.topo .esp{flex:1}
.abas{display:flex;gap:4px;background:var(--card);padding:4px;border-radius:11px;border:1px solid var(--linha)}
.aba{
  padding:7px 15px;border-radius:8px;border:0;background:transparent;color:var(--txt2);
  font:inherit;font-size:14px;font-weight:550;cursor:pointer;transition:.15s;white-space:nowrap;
}
.aba:hover{color:var(--txt)}
.aba.on{background:var(--ac);color:#fff}
.quem{font-size:13px;color:var(--txt2)}

/* ---------- layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:26px 22px 80px}
.painel{display:none}
.painel.on{display:block;animation:sobe .25s ease}
@keyframes sobe{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.card{background:var(--card);border:1px solid var(--linha);border-radius:var(--r);padding:20px}
.card + .card{margin-top:16px}
.card h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--txt2);margin-bottom:14px;font-weight:600}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--linha);border-radius:var(--r);padding:15px 17px}
.kpi .rot{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--txt3);font-weight:600}
.kpi .val{font-family:var(--mono);font-size:26px;font-weight:600;margin-top:6px;letter-spacing:-.02em}
.kpi .sub{font-size:12px;color:var(--txt3);margin-top:2px}
.pos{color:var(--gain)} .neg{color:var(--loss)} .neu{color:var(--zero)}

/* ---------- formulário ---------- */
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo.full{grid-column:1/-1}
label{font-size:12px;font-weight:600;color:var(--txt2);letter-spacing:.01em}
label .op{color:var(--txt3);font-weight:400;text-transform:none;letter-spacing:0}
input,select,textarea{
  background:var(--card2);border:1px solid var(--linha);border-radius:9px;
  padding:10px 12px;color:var(--txt);font:inherit;font-size:14px;width:100%;transition:.15s;
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ac);background:#1A1A1F}
input[type=number]{font-family:var(--mono)}
textarea{resize:vertical;min-height:92px;line-height:1.55}
select{cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%239A9AA4' d='M6 8.5 2 4h8z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:11px;padding-right:30px}
.dica{font-size:11px;color:var(--txt3)}

/* campo de senha com o botão de olho */
.senha-caixa{position:relative;display:block}
.senha-caixa input{padding-right:44px}
.olho{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;padding:7px;display:grid;place-items:center;
  background:transparent;border:0;border-radius:8px;color:var(--txt3);
  cursor:pointer;transition:.15s;
}
.olho:hover{color:var(--txt)}
.olho:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}
.olho svg{width:100%;height:100%;display:block}

.btn{
  background:var(--ac);color:#fff;border:0;border-radius:10px;padding:11px 22px;
  font:inherit;font-weight:600;cursor:pointer;transition:.15s;
}
.btn:hover{filter:brightness(1.15)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sec{background:var(--card2);color:var(--txt);border:1px solid var(--linha)}
.btn.peq{padding:6px 13px;font-size:13px;border-radius:8px}
.btn.perigo{background:transparent;color:var(--loss);border:1px solid var(--loss)}
.acoes{display:flex;gap:10px;align-items:center;margin-top:20px;flex-wrap:wrap}

/* ---------- upload ---------- */
.solta{
  border:1.5px dashed var(--linha);border-radius:12px;padding:22px;text-align:center;
  cursor:pointer;transition:.15s;color:var(--txt2);font-size:14px;background:var(--card2);
}
.solta:hover,.solta.ativa{border-color:var(--ac);color:var(--txt);background:#1A1416}
.solta input{display:none}
.previa{margin-top:12px;position:relative;display:none}
.previa img{width:100%;max-height:340px;object-fit:contain;border-radius:10px;border:1px solid var(--linha);background:#000}
.previa .x{position:absolute;top:8px;right:8px}

/* ---------- filtros ---------- */
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.filtros .campo{min-width:132px}
.filtros label{font-size:11px}

/* ---------- tabela ---------- */
.rolagem{overflow-x:auto;margin:0 -20px;padding:0 20px}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:820px}
th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--txt3);
  font-weight:600;padding:0 12px 9px;border-bottom:1px solid var(--linha);white-space:nowrap;
}
td{padding:11px 12px;border-bottom:1px solid #191920;vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#141419}
td.num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

.tag{
  display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600;
  border:1px solid transparent;white-space:nowrap;
}
.tag.gain{color:var(--gain);background:rgba(38,167,95,.12);border-color:rgba(38,167,95,.3)}
.tag.loss{color:var(--loss);background:rgba(230,51,41,.12);border-color:rgba(230,51,41,.3)}
.tag.zero{color:var(--zero);background:rgba(138,138,148,.12);border-color:rgba(138,138,148,.28)}
.tag.n{color:var(--txt2);background:var(--card2);border-color:var(--linha);font-weight:500}
.tag.real{color:#F2C94C;background:rgba(242,201,76,.11);border-color:rgba(242,201,76,.32)}
.tag.demo{color:#7FA8F5;background:rgba(58,121,238,.12);border-color:rgba(58,121,238,.32)}

.mini{width:46px;height:34px;object-fit:cover;border-radius:6px;border:1px solid var(--linha);cursor:pointer;display:block;background:#000}
.vazio{text-align:center;padding:52px 20px;color:var(--txt3)}
.vazio b{display:block;color:var(--txt2);font-size:16px;margin-bottom:6px;font-weight:600}

/* ---------- barras ---------- */
.barras{display:flex;flex-direction:column;gap:9px}
.barra{display:grid;grid-template-columns:132px 1fr 92px;gap:12px;align-items:center;font-size:13px}
.barra .nm{color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barra .tr{display:block;height:8px;background:var(--card2);border-radius:5px;overflow:hidden;position:relative}
.barra .pr{display:block;height:100%;min-width:3px;border-radius:5px;transition:width .4s ease}
.barra .vl{font-family:var(--mono);text-align:right;font-size:12.5px}

/* ---------- foto do aluno ---------- */
.avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid var(--linha)}
.avatarG{
  width:132px;height:132px;border-radius:14px;object-fit:cover;
  border:1px solid var(--linha);background:var(--card2);display:block;
}
.vazioFoto{
  display:grid;place-items:center;color:var(--txt3);font-size:12px;
  text-transform:uppercase;letter-spacing:.07em;
}
.perfil{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.perfil > div:first-child{width:132px}

/* ---------- análise por IA ---------- */
.texto{margin:0;line-height:1.65;color:var(--txt);font-size:14.5px}
.ponto{
  padding:13px 0 13px 15px;border-left:2px solid var(--linha);margin-bottom:12px;
}
.ponto:last-child{margin-bottom:0}
.ponto.bom{border-left-color:var(--gain)}
.ponto.ruim{border-left-color:var(--loss)}
.ponto b{display:block;font-size:14.5px;margin-bottom:5px;letter-spacing:-.01em}
.ponto p{margin:0;font-size:14px;line-height:1.6;color:var(--txt2)}
.ponto .acao{margin-top:7px;color:var(--txt);font-weight:550}
.card.foco{border-color:rgba(200,16,16,.45);background:linear-gradient(180deg,#150708,var(--card))}

/* ---------- avisos ---------- */
.aviso{padding:11px 15px;border-radius:10px;font-size:13.5px;margin-bottom:14px;display:none;border:1px solid transparent}
.aviso.on{display:block}
.aviso.err{background:rgba(230,51,41,.1);color:#FF8078;border-color:rgba(230,51,41,.3)}
.aviso.ok{background:rgba(38,167,95,.1);color:#5DD694;border-color:rgba(38,167,95,.3)}
.aviso.info{background:rgba(58,121,238,.1);color:#7FA8F5;border-color:rgba(58,121,238,.3)}

/* ---------- entrada ---------- */
.entrada{min-height:100vh;display:grid;place-items:center;padding:26px}
.caixa{width:100%;max-width:412px}
.caixa .card{padding:30px}
.tit{text-align:center;margin-bottom:26px}
.tit .logo{display:inline-flex;align-items:center;gap:9px;font-size:21px;font-weight:700;letter-spacing:-.03em}
.tit .logo .p{width:10px;height:10px;border-radius:50%;background:var(--ac);box-shadow:0 0 14px var(--ac)}
.tit p{color:var(--txt2);font-size:14px;margin:9px 0 0}
.troca{text-align:center;margin-top:18px;font-size:13.5px;color:var(--txt2)}
.troca button{background:0;border:0;color:var(--ac2);font:inherit;font-weight:600;cursor:pointer;padding:0}

/* ---------- tela de login: velas ao fundo + cartão com a logo ---------- */
.tela-entrada{position:relative;min-height:100vh;overflow-x:hidden}
.fundo-velas{
  position:fixed;inset:0;width:100%;height:100%;opacity:.62;pointer-events:none;z-index:0;
}
.fundo-brilho{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(46% 52% at 50% 46%, rgba(8,8,10,.90) 0%, rgba(8,8,10,.70) 46%, rgba(8,8,10,.34) 100%),
    linear-gradient(180deg, rgba(8,8,10,.92) 0%, rgba(8,8,10,.20) 26%, rgba(8,8,10,.22) 74%, rgba(8,8,10,.95) 100%);
}
.tela-entrada .entrada{position:relative;z-index:2}

.topo-entrada{
  position:absolute;top:0;left:0;right:0;z-index:3;padding:24px 40px;
  display:flex;align-items:center;justify-content:space-between;
}
.topo-entrada .marca{display:flex;align-items:center;gap:11px;font-size:19px;font-weight:700;letter-spacing:-.03em}
.topo-entrada .marca .p{width:10px;height:10px;border-radius:50%;background:var(--ac);box-shadow:0 0 16px var(--ac)}
.topo-entrada .selo{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--txt3);text-transform:uppercase;
}

/* precisa vencer `.caixa .card{padding:30px}`, senão a logo cobre o título */
.caixa .card.cartao-entrada{
  position:relative;padding:38px 34px 34px;border-radius:20px;
  background:rgba(16,16,19,.86);border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 90px rgba(0,0,0,.75);backdrop-filter:blur(20px);
}
.tit-entrada{font-size:26px;font-weight:650;letter-spacing:-.03em;text-align:center}
.sub-entrada{text-align:center;color:var(--txt2);font-size:14.5px;margin:10px 0 26px;line-height:1.55}
.cartao-entrada .btn{box-shadow:0 8px 26px rgba(200,16,16,.34)}

.tira-entrada{
  position:absolute;bottom:0;left:0;right:0;z-index:3;padding:16px 40px;
  border-top:1px solid var(--linha);background:rgba(8,8,10,.88);
  display:flex;gap:40px;justify-content:center;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;color:var(--txt3);letter-spacing:.05em;
}
.tira-entrada b{color:var(--txt2);font-weight:500}

@media(max-width:700px){
  .topo-entrada{padding:18px 20px}
  .topo-entrada .selo{display:none}
  .tela-entrada .entrada{padding:92px 18px 96px}
  .caixa .card.cartao-entrada{padding:32px 24px 30px}
  .tira-entrada{gap:6px 20px;padding:12px 18px;font-size:10.5px}
}

/* senha temporária mostrada ao admin, uma única vez */
.senha-gerada{
  margin:14px 0;padding:16px 18px;border-radius:12px;text-align:center;
  background:var(--card2);border:1px dashed var(--ac);
  font-size:22px;letter-spacing:.04em;color:var(--txt);user-select:all;
}

/* ---------- modal ---------- */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.82);display:none;place-items:center;z-index:100;padding:22px;
  backdrop-filter:blur(3px);
}
.modal.on{display:grid}
.modal img{max-width:96vw;max-height:90vh;border-radius:10px}
.modal .fechar{position:absolute;top:18px;right:22px;font-size:28px;color:#fff;background:0;border:0;cursor:pointer;line-height:1}

@media(max-width:640px){
  .wrap{padding:18px 14px 70px}
  .topo{padding:12px 14px}
  .abas{width:100%;order:3}
  .aba{flex:1;padding:8px 10px;font-size:13px}
  .kpi .val{font-size:22px}
  .barra{grid-template-columns:96px 1fr 78px}
}

/* botão que parece link, usado em "esqueci minha senha" */
.link{
  background:0;border:0;padding:0;cursor:pointer;font:inherit;font-size:13.5px;
  color:var(--txt2);text-decoration:underline;text-underline-offset:3px;
}
.link:hover{color:var(--txt)}

/* ---------- páginas de texto (termos, privacidade) ---------- */
.doc{max-width:760px;margin:0 auto;padding:38px 22px 70px;font-size:15px}
.doc h1{font-size:30px;letter-spacing:-.03em}
.doc h2{
  font-size:15px;margin:34px 0 10px;padding-top:22px;
  border-top:1px solid var(--linha);letter-spacing:-.01em;
}
.doc p{margin:0 0 12px;color:var(--txt2);line-height:1.68}
.doc b{color:var(--txt);font-weight:600}
.doc ul{margin:0 0 14px;padding-left:20px;color:var(--txt2);line-height:1.68}
.doc li{margin-bottom:7px}
.doc-data{font-family:var(--mono);font-size:12px;color:var(--txt3);margin-bottom:26px}
.doc-aviso{
  background:var(--card);border:1px solid var(--linha);border-left:3px solid var(--ac);
  border-radius:var(--r);padding:16px 18px;color:var(--txt2);line-height:1.65;margin-bottom:8px;
}
.doc-tabela{margin:4px 0 18px;font-size:13.5px;border-top:1px solid var(--linha)}
.doc-linha{
  display:grid;grid-template-columns:170px 150px 1fr;gap:0 14px;
  padding:11px 0;border-bottom:1px solid var(--linha);
  color:var(--txt2);line-height:1.55;
}
.doc-linha span:first-child{color:var(--txt);font-weight:550}
.doc-linha span[data-rot]::before{display:none}
.doc-cabec{
  font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--txt3);font-weight:600;padding:8px 0;
}
.doc-cabec span:first-child{color:var(--txt3);font-weight:600}
.doc-fim{margin-top:30px;padding-top:22px;border-top:1px solid var(--linha);font-size:14px}
/* fora da tela de entrada a tira volta a ser rodape normal: la ela e
   absolute no fim da tela e cobriria o texto da pagina */
body:not(.tela-entrada) .tira-entrada{position:static;margin-top:40px}
.tira-entrada a{color:var(--txt2)}
.tira-entrada a:hover{color:var(--ac2)}

/* no celular cada linha vira cartao: rolagem lateral em texto legal e desistencia certa */
@media (max-width:640px){
  .doc-tabela{border-top:0}
  .doc-tabela .doc-cabec{display:none}
  .doc-linha{
    display:block;background:var(--card);border:1px solid var(--linha);
    border-radius:12px;padding:13px 15px;margin-bottom:10px;
  }
  .doc-linha span{display:block}
  .doc-linha span + span{margin-top:10px}
  .doc-linha span:first-child{font-size:14.5px}
  .doc-linha span[data-rot]::before{
    content:attr(data-rot);display:block;
    font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
    color:var(--txt3);font-weight:600;margin-bottom:2px;
  }
}
@media (max-width:640px){
  .doc{padding:26px 18px 60px}
  .doc h1{font-size:24px}
}

/* ---------- aba Mercado ---------- */
.card.sem-borda{padding:0;border:0;background:transparent;overflow:hidden}
.grade-mercado{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.caixa-widget{border-radius:10px;overflow:hidden;background:var(--card2)}
.caixa-widget.alto{height:520px}

.chip{
  padding:7px 14px;border-radius:999px;border:1px solid var(--linha);
  background:var(--card2);color:var(--txt2);font:inherit;font-size:13px;
  font-weight:550;cursor:pointer;transition:.15s;
}
.chip:hover{color:var(--txt);border-color:#33333b}
.chip.on{background:var(--ac);border-color:var(--ac);color:#fff}

.noticia{
  position:relative;padding:16px 18px 14px 30px;border-bottom:1px solid var(--linha);
  transition:background .15s;
}
.noticia:last-child{border-bottom:0}
.noticia:hover{background:var(--card2)}
/* o ponto marca o item sem precisar de lista com marcador */
.noticia::before{
  content:'';position:absolute;left:14px;top:23px;
  width:6px;height:6px;border-radius:50%;background:var(--txt3);transition:.15s;
}
.noticia:hover::before{background:var(--ac)}
.noticia.salva::before{background:var(--ac);box-shadow:0 0 8px var(--ac)}

.n-cabeca{display:flex;align-items:flex-start;gap:14px}
.n-cabeca .manchete{
  flex:1;font-size:15px;font-weight:600;line-height:1.4;color:var(--txt);
  letter-spacing:-.01em;transition:color .15s;
}
.n-cabeca .manchete:hover{color:var(--ac2)}
/* neutro de proposito: com 40 manchetes na tela, um selo colorido em cada uma
   vira ruido e rouba o vermelho de quem precisa dele */
.n-fonte{
  flex-shrink:0;padding:4px 11px;border-radius:999px;
  background:var(--card2);border:1px solid var(--linha);
  color:var(--txt2);font-size:11px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
}
.noticia:hover .n-fonte{border-color:#33333b;color:var(--txt)}
.n-resumo{margin:7px 0 0;color:var(--txt2);font-size:13.5px;line-height:1.6}

.n-pe{display:flex;align-items:center;gap:12px;margin-top:11px}
.n-pe .esp{flex:1}
.n-tag{
  padding:3px 9px;border-radius:6px;background:var(--card2);border:1px solid var(--linha);
  color:var(--txt3);font-size:11px;font-weight:600;
}
.n-hora{font-family:var(--mono);font-size:11px;color:var(--txt3)}

.n-acoes{display:flex;gap:4px;opacity:.45;transition:opacity .15s}
.noticia:hover .n-acoes{opacity:1}
.n-btn{
  display:grid;place-items:center;width:30px;height:30px;padding:0;
  border:1px solid transparent;border-radius:8px;background:transparent;
  color:var(--txt2);cursor:pointer;transition:.15s;
}
.n-btn:hover{background:var(--card);border-color:var(--linha);color:var(--txt)}
.n-btn svg{width:16px;height:16px;stroke-linecap:round;stroke-linejoin:round}
.n-btn.feito{color:var(--gain)}
.noticia.salva .marcador{color:var(--ac2);opacity:1}
.noticia.salva .marcador svg{fill:currentColor}

/* no toque não existe hover: os botões ficam sempre visíveis */
@media (hover:none){
  .n-acoes{opacity:1}
}

@media (max-width:900px){
  .grade-mercado{grid-template-columns:1fr}
  .caixa-widget.alto{height:420px}
}

/* ---------- MEP x MEN ---------- */
.recados{margin:4px 0 18px}
.recados p{
  margin:0 0 10px;padding:12px 15px;border-left:3px solid var(--linha);
  background:var(--card2);border-radius:0 10px 10px 0;
  color:var(--txt2);font-size:13.5px;line-height:1.6;
}
.recados p:last-child{margin-bottom:0}
.recados b{color:var(--txt);font-weight:600}
.sub-titulo{
  font-size:12px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--txt3);font-weight:600;margin:6px 0 10px;
}

/* ---------- aba Panorama ---------- */
.cabeca-painel{display:flex;align-items:flex-start;gap:20px;margin-bottom:18px;flex-wrap:wrap}
.cabeca-painel > div{flex:1;min-width:260px}
.titulo-painel{font-size:19px;font-weight:650;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.selo-teste{
  padding:3px 9px;border-radius:6px;background:rgba(228,161,31,.14);
  border:1px solid rgba(228,161,31,.35);color:#e4a11f;
  font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
}

.vies-painel{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:16px}
.vies-cartao{
  background:var(--card);border:1px solid var(--linha);border-radius:var(--r);
  padding:18px 20px;border-left-width:3px;
}
.vies-cartao.forte-alta{border-left-color:var(--gain)}
.vies-cartao.alta{border-left-color:#1f8a4d}
.vies-cartao.neutro{border-left-color:var(--zero)}
.vies-cartao.baixa{border-left-color:#a8332c}
.vies-cartao.forte-baixa{border-left-color:var(--loss)}
.vies-cartao.janela{border-left-color:var(--ac)}
.vies-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.vies-topo h4{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--txt2);font-weight:600}
.vies-texto{margin:0;color:var(--txt2);font-size:13.5px;line-height:1.6}

.selo-vies{
  padding:5px 12px;border-radius:999px;font-size:12px;font-weight:650;white-space:nowrap;
  background:var(--card2);border:1px solid var(--linha);color:var(--txt);
}
.forte-alta .selo-vies{background:rgba(38,167,95,.16);border-color:rgba(38,167,95,.4);color:#3fce7f}
.alta .selo-vies{background:rgba(38,167,95,.1);border-color:rgba(38,167,95,.28);color:#3fce7f}
.baixa .selo-vies{background:rgba(230,51,41,.1);border-color:rgba(230,51,41,.28);color:#f2665e}
.forte-baixa .selo-vies{background:rgba(230,51,41,.16);border-color:rgba(230,51,41,.4);color:#f2665e}
.selo-hora{font-size:11px;color:var(--txt3)}

.peso-linha{display:grid;grid-template-columns:1fr 200px 76px;gap:12px;align-items:center;padding:7px 0}
.peso-nome{font-size:13.5px;color:var(--txt2)}
.peso-barra{height:7px;border-radius:4px;background:var(--card2);overflow:hidden;display:block}
.peso-fill{display:block;height:100%;border-radius:4px;background:var(--zero)}
.peso-fill.pos{background:var(--gain)}
.peso-fill.neg{background:var(--loss)}
.peso-var{font-size:12.5px;text-align:right}

.grade-cotacoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px 28px}
.bloco-cot{padding:4px 0 10px}
.cot{display:grid;grid-template-columns:1fr auto 86px;gap:12px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--linha)}
.cot:last-child{border-bottom:0}
.cot-nome{font-size:13.5px;color:var(--txt2)}
.cot-preco{font-size:13px;color:var(--txt)}
.cot-var{font-size:12.5px;text-align:right}

@media (max-width:640px){
  .peso-linha{grid-template-columns:1fr 90px 66px;gap:8px}
  .grade-cotacoes{grid-template-columns:1fr}
}
.vies-cartao.fechado{border-left-color:var(--txt3);background:var(--card2)}
.etq-pos{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;
  background:var(--card2);border:1px solid var(--linha);
  color:var(--txt3);font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  vertical-align:middle;
}
.cot-dia{display:block;font-size:10.5px;opacity:.7;margin-top:1px}

/* síntese do panorama */
.card.sintese{border-left:3px solid var(--ac);margin-bottom:16px}
.sintese-texto{margin:0;font-size:15px;line-height:1.65;color:var(--txt)}
.sintese-evolucao{
  margin:12px 0 0;padding-top:12px;border-top:1px solid var(--linha);
  font-size:13px;color:var(--txt2);line-height:1.55;
}
.sintese-evolucao b{color:var(--txt2);text-transform:uppercase;font-size:11px;letter-spacing:.06em}
.sintese-evolucao.mudou b{color:var(--ac2)}
.sintese-evolucao.reforcou b{color:var(--gain)}

/* fases da variação: fechamento, after e agora */
.cot.com-fases{grid-template-areas:'nome preco var' 'fases fases fases';row-gap:3px}
.cot.com-fases .cot-nome{grid-area:nome}
.cot.com-fases .cot-preco{grid-area:preco}
.cot.com-fases .cot-var{grid-area:var}
.cot-fases{grid-area:fases;display:flex;gap:14px;font-size:10.5px;opacity:.75;padding-bottom:2px}
.cot-fases .fase{display:flex;gap:4px;align-items:baseline}
.cot-fases .fase i{font-style:normal;color:var(--txt3);text-transform:uppercase;letter-spacing:.04em}
.cot-fases .fase b{font-weight:600}

/* leitura escrita e segurança */
.sub-titulo{
  font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--txt3);
  font-weight:600;margin:18px 0 7px;
}
.sub-titulo:first-child{margin-top:0}
.texto-analise{margin:0;color:var(--txt2);font-size:13.5px;line-height:1.65}
.lista-atencao{margin:0;padding-left:18px;color:var(--txt2);font-size:13px;line-height:1.6}
.lista-atencao li{margin-bottom:5px}
.setores{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid var(--linha)}
.setores span{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.setores i{font-style:normal;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--txt3);font-weight:600}
.setores b{font-size:12.5px;font-weight:600}

.selo-risco{
  display:inline-block;padding:7px 16px;border-radius:999px;
  font-size:13px;font-weight:700;letter-spacing:.06em;margin-bottom:14px;
  background:var(--card2);border:1px solid var(--linha);color:var(--txt2);
}
.selo-risco.risk-on{background:rgba(38,167,95,.14);border-color:rgba(38,167,95,.4);color:#3fce7f}
.selo-risco.risk-off{background:rgba(230,51,41,.14);border-color:rgba(230,51,41,.4);color:#f2665e}
.selo-risco.dividido{background:rgba(228,161,31,.12);border-color:rgba(228,161,31,.35);color:#e4a11f}

.vix-caixa{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.vix-rot{font-size:12px;color:var(--txt2)}
.vix-val{font-size:24px;font-weight:600;letter-spacing:-.02em}

.pracas{display:flex;flex-wrap:wrap;gap:7px}
.praca{
  display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;
  background:var(--card2);border:1px solid var(--linha);color:var(--txt3);font-size:12px;
}
.praca.on{color:var(--txt);border-color:rgba(38,167,95,.35)}
.praca i{font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.05em;opacity:.7}
.praca.on i{color:var(--gain);opacity:1}
.atualizacao{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.atualizacao .dica{white-space:nowrap}
.atualizacao b{color:var(--txt2);font-weight:600}
/* o cartão de segurança não deve esticar para acompanhar a altura da análise */
.grade-mercado{align-items:start}

/* prazo de acesso no painel de alunos */
.prazo{display:flex;flex-direction:column;gap:5px;min-width:132px}
.prazo .data-exp{padding:5px 8px;font-size:12.5px;width:100%}
.prazo .atalhos{display:flex;gap:3px}
.prazo .mini{
  flex:1;padding:3px 0;border-radius:6px;border:1px solid var(--linha);
  background:var(--card2);color:var(--txt2);font:inherit;font-size:11px;
  font-weight:600;cursor:pointer;transition:.15s;
}
.prazo .mini:hover{background:var(--ac);border-color:var(--ac);color:#fff}
.prazo .dica,.prazo .tag{align-self:flex-start}

/* ---------- faixa do diário de demonstração ----------
   Não herda de .aviso de propósito: aquela classe tem display:none e só
   aparece com .on, e um elemento novo que usasse o nome nunca pintaria. */
.faixa-demo{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(90deg,rgba(200,16,16,.14),rgba(200,16,16,.04));
  border:1px solid rgba(242,69,58,.32);border-radius:var(--r);
  padding:14px 18px;margin-bottom:16px;
}
.faixa-demo[hidden]{display:none}
.faixa-demo > div{flex:1;min-width:240px;font-size:13.5px;line-height:1.55}
.faixa-demo b{display:block;color:var(--txt);font-weight:650;margin-bottom:2px}
.faixa-demo span{color:var(--txt2)}

/* ---------- aba Forex ---------- */
.sub-abas{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.sub-abas .esp{flex:1}
.sub-aba{
  padding:9px 16px;border-radius:10px;border:1px solid var(--linha);background:var(--card);
  color:var(--txt2);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:.15s;
}
.sub-aba:hover{color:var(--txt)}
.sub-aba.on{background:var(--ac);border-color:var(--ac);color:#fff}

.chaveiro{display:flex;gap:4px;background:var(--card);padding:4px;border-radius:10px;border:1px solid var(--linha)}
.chip{
  padding:6px 13px;border-radius:7px;border:0;background:transparent;color:var(--txt2);
  font:inherit;font-size:13px;font-weight:550;cursor:pointer;transition:.15s;white-space:nowrap;
}
.chip:hover{color:var(--txt)}
.chip.on{background:var(--card2);color:var(--txt)}

.grade-pares{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.par-cel{background:var(--card2);border:1px solid var(--linha);border-radius:12px;overflow:hidden;min-height:180px}

.linha-topo{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.linha-topo .esp{flex:1}

.grade-analise{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.grade-analise{grid-template-columns:1fr}}

/* barra de duas pontas: a força de uma moeda contra a outra */
.cabo{display:flex;height:10px;border-radius:6px;overflow:hidden;background:var(--card2);margin:10px 0 8px}
.cabo i{display:block;height:100%}
.cabo-topo{display:flex;justify-content:space-between;font-weight:650;font-size:14px}
.cabo-pe{display:flex;justify-content:space-between;font-size:11.5px;color:var(--txt3)}
.cabo-vered{margin-top:12px;font-size:13.5px;color:var(--txt2)}
.cabo-vered b{color:var(--txt)}

/* medidor de força, escala de -100 a 100 */
.medidor{margin-top:6px}
.medidor-trilho{
  position:relative;height:8px;border-radius:5px;margin:14px 0 6px;
  background:linear-gradient(90deg,var(--loss),#3A3A44 50%,var(--gain));
}
.medidor-pino{
  position:absolute;top:-5px;width:3px;height:18px;border-radius:2px;background:var(--txt);
  box-shadow:0 0 0 2px var(--card);
}
.medidor-num{font-family:var(--mono);font-size:30px;font-weight:600;letter-spacing:-.03em}
.medidor-pe{display:flex;justify-content:space-between;font-size:11px;color:var(--txt3)}

.selos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.selo-f{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:6px;letter-spacing:.03em}
.selo-f.compra{background:rgba(38,167,95,.16);color:var(--gain)}
.selo-f.venda{background:rgba(230,51,41,.16);color:var(--loss)}
.selo-f.neutro{background:var(--card2);color:var(--txt2)}

/* indicador com faixa (RSI, estocástico) */
.faixa{margin-bottom:14px}
.faixa-topo{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
.faixa-topo b{font-family:var(--mono);font-weight:600}
.faixa-trilho{position:relative;height:7px;border-radius:4px;background:var(--card2);overflow:hidden}
.faixa-zona{position:absolute;top:0;bottom:0}
.faixa-zona.baixa{left:0;background:rgba(38,167,95,.22)}
.faixa-zona.alta{right:0;background:rgba(230,51,41,.22)}
.faixa-pino{position:absolute;top:-3px;width:3px;height:13px;border-radius:2px;background:var(--txt)}
.faixa-pe{display:flex;justify-content:space-between;font-size:11px;color:var(--txt3);margin-top:5px}

/* níveis operacionais */
.niveis{display:grid;gap:9px;font-family:var(--mono);font-size:14px}
.nivel{display:flex;align-items:center;gap:12px}
.nivel .marca{width:22px;font-weight:700}
.nivel .valor{flex:1;font-weight:600}
.nivel .dist{color:var(--txt3);font-size:12.5px}
.nivel.r .marca{color:var(--gain)}
.nivel.s .marca{color:var(--loss)}
.nivel.p .marca{color:var(--txt2)}

.trava-cnpi{
  border:1px dashed var(--linha);border-radius:10px;padding:14px 16px;
  background:var(--card2);font-size:13px;color:var(--txt2);line-height:1.55;
}
.trava-cnpi b{color:var(--txt)}

/* ---------- aba Vídeos ---------- */
.grade-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}

.video{
  display:block;text-align:left;padding:0;border:1px solid var(--linha);border-radius:12px;
  background:var(--card2);color:inherit;font:inherit;cursor:pointer;overflow:hidden;transition:.15s;
}
.video:hover{border-color:#3A3A44;transform:translateY(-2px)}
.video:hover .play{background:var(--ac);transform:scale(1.06)}

.video-capa{
  position:relative;aspect-ratio:16/9;background:#0B0B0E center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;
}
.video-capa::after{content:"";position:absolute;inset:0;background:rgba(8,8,10,.28)}
.play,.cadeado{
  position:relative;z-index:1;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.play{background:rgba(8,8,10,.72);border:1px solid rgba(255,255,255,.18);color:#fff}
.play svg{width:22px;height:22px;margin-left:2px}
.cadeado{background:var(--card);border:1px solid var(--linha);color:var(--txt3)}
.cadeado svg{width:20px;height:20px}

.dur,.etiqueta-anual,.etiqueta-rascunho{
  position:absolute;z-index:1;font-size:10.5px;font-weight:650;padding:3px 7px;border-radius:5px;
}
.dur{right:7px;bottom:7px;background:rgba(8,8,10,.82);color:var(--txt2)}
.etiqueta-anual{left:7px;top:7px;background:var(--ac);color:#fff;letter-spacing:.03em}
.etiqueta-rascunho{right:7px;top:7px;background:var(--card);color:var(--txt3);border:1px solid var(--linha)}

.video-pe{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px}
.video-pe b{font-size:14.5px;font-weight:620;line-height:1.35;letter-spacing:-.01em}
.video-pe .dica{font-size:12.5px;line-height:1.45}

.video.trancado{cursor:default}
.video.trancado:hover{transform:none;border-color:var(--linha)}
.video.trancado .video-capa{background:repeating-linear-gradient(
  45deg,#0D0D10,#0D0D10 10px,#101014 10px,#101014 20px)}

.faixa-anual{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(90deg,rgba(200,16,16,.14),rgba(200,16,16,.03));
  border:1px solid rgba(242,69,58,.3);border-radius:var(--r);
  padding:14px 18px;margin-bottom:16px;
}
.faixa-anual > div{flex:1;min-width:240px;font-size:13.5px;line-height:1.55}
.faixa-anual b{display:block;color:var(--txt);font-weight:650;margin-bottom:2px}
.faixa-anual span{color:var(--txt2)}

/* player */
.caixa-video{width:100%;max-width:900px}
.proporcao-video{
  position:relative;aspect-ratio:16/9;width:100%;
  background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--linha);
}
.proporcao-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.caixa-video h3{margin:16px 0 4px;font-size:18px;text-transform:none;letter-spacing:-.02em;color:var(--txt)}

/* ---------- cadastrar ativo/técnica do próprio aluno ---------- */
.link-mini{
  border:0;background:transparent;padding:0;margin-left:8px;cursor:pointer;
  font:inherit;font-size:11.5px;font-weight:600;color:var(--ac2);
  text-transform:none;letter-spacing:0;
}
.link-mini:hover{text-decoration:underline}
#modalItem .card h3{text-transform:none;letter-spacing:-.02em;font-size:18px;color:var(--txt)}

/* ---------- aviso de cadastro repetido no painel ---------- */
.tag.aviso-forte{background:rgba(230,51,41,.16);color:var(--loss);border:1px solid rgba(230,51,41,.3)}
.tag.aviso-fraco{background:var(--card2);color:var(--txt3);border:1px solid var(--linha)}

/* ---------- boletim de mercado ---------- */
/* Peça de leitura, não painel de números: coluna estreita, linha alta e um
   corpo maior que o resto do app. Quem chega de manhã vem ler, não conferir. */
.boletim{border-left:3px solid var(--ac)}
.titulo-boletim{font-size:24px;line-height:1.2;margin:2px 0 8px;max-width:34em}
.chamada-boletim{color:var(--txt2);font-size:16px;margin:0 0 22px;max-width:38em}
.bloco-boletim{margin-bottom:20px;max-width:40em}
.bloco-boletim h4{
  font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ac2);margin:0 0 6px;font-weight:650;
}
.bloco-boletim p{margin:0;line-height:1.62}
.lista-boletim{margin:0;padding-left:18px}
.lista-boletim li{margin-bottom:6px;line-height:1.55}
.aviso-boletim{
  font-size:12px;color:#e4a11f;background:rgba(228,161,31,.1);
  border:1px solid rgba(228,161,31,.3);border-radius:9px;
  padding:8px 11px;margin:0 0 16px;
}
/* O aviso de conteúdo educacional não pode ficar na cor de nota de rodapé:
   ele é exigência de compliance e precisa ser lido, não adivinhado. */
.rodape-boletim{
  font-size:12px;color:var(--txt2);line-height:1.5;
  border-top:1px solid var(--linha);padding-top:12px;margin:22px 0 0;max-width:40em;
}
/* O conceito do dia tem cara própria de propósito: ali é a escola falando,
   não o resumo de mercado. */
.conceito-boletim{
  background:var(--card2);border:1px solid var(--linha);border-left:3px solid var(--ac);
  border-radius:11px;padding:15px 17px;margin-top:24px;max-width:40em;
}
.conceito-boletim h4{
  font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ac2);margin:0 0 7px;font-weight:650;
}
.conceito-boletim p{margin:0;line-height:1.62;color:var(--txt)}
/* O resumo da aba Mercado é texto inteiro, não recorte: nada de degradê de
   "continua lá dentro". Quem lê só isto tem que sair sabendo o essencial. */
.previa-boletim{margin:0 0 16px;line-height:1.62;max-width:40em}

/* ---------- selo do teste ---------- */
/* Discreto enquanto sobra prazo, vermelho quando aperta. Fica no cabeçalho
   porque o aluno precisa ver sem procurar. */
.selo-trial{
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 9px;border-radius:7px;white-space:nowrap;
  background:var(--card2);border:1px solid var(--linha);color:var(--txt2);
}
.selo-trial.acabando{
  background:rgba(200,16,16,.14);border-color:rgba(242,69,58,.45);color:#f2665e;
}

/* ---------- fim do teste ---------- */
/* Não é tela de erro: é convite. Por isso o vermelho fica só na borda e o
   corpo mantém o tom do resto do app. */
.fim-teste{border-left:3px solid var(--ac);max-width:46em}
.fim-teste h2{font-size:22px;margin-bottom:10px}
.fim-teste p{margin:0;line-height:1.6}
.fim-teste-botoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}