: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;margin-top:62px;padding:64px 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);
}
.logo-cartao{
  position:absolute;top:-52px;left:50%;transform:translateX(-50%);
  width:104px;height:104px;border-radius:50%;display:block;
  box-shadow:0 12px 40px rgba(0,0,0,.62), 0 0 0 5px #101013, 0 0 0 6px rgba(255,255,255,.10);
}
.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:58px 24px 30px}
  .logo-cartao{width:88px;height:88px;top:-44px}
  .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)}

/* ==========================================================================
   ÁREA DE MEMBROS — carrossel de cursos, página do curso e player
   ========================================================================== */

/* Cada curso pinta a própria seção com a cor do seu tipo. O valor entra
   por style="--cc:#..." no elemento; o padrão é o vermelho técnico. */
.trilha-secao{margin-bottom:34px}
.trilha-cabeca{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.trilha-cabeca h2{font-size:19px;letter-spacing:-.025em}
.trilha-cabeca .conta{font-family:var(--mono);font-size:12px;color:var(--txt3)}
/* .esp so tinha regra dentro de .topo — aqui precisa da sua */
.trilha-cabeca .esp{flex:1}
/* a descrição do projeto, como na área de membros de hoje: é o que explica
   para quem ainda não comprou o que existe naquele carrossel */
.trilha-desc{
  margin:-8px 0 14px;color:var(--txt2);font-size:13.5px;line-height:1.55;max-width:80ch;
}

.trilha-caixa{position:relative}
.trilha{
  display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;padding:4px 2px 14px;
  scrollbar-width:thin;scrollbar-color:#2A2A32 transparent;
}
.trilha::-webkit-scrollbar{height:8px}
.trilha::-webkit-scrollbar-thumb{background:#2A2A32;border-radius:4px}
.trilha::-webkit-scrollbar-track{background:transparent}

/* setas: só aparecem quando existe conteúdo para aquele lado */
.seta{
  position:absolute;top:calc(50% - 34px);transform:translateY(-50%);z-index:6;
  width:40px;height:40px;display:none;place-items:center;
  border-radius:50%;border:1px solid var(--linha);background:rgba(16,16,19,.94);
  color:var(--txt);cursor:pointer;backdrop-filter:blur(8px);transition:.15s;
}
.seta.on{display:grid}
.seta:hover{background:var(--ac);border-color:var(--ac);color:#fff}
.seta.esq{left:-14px}
.seta.dir{right:-14px}
.seta svg{width:19px;height:19px;stroke-linecap:round;stroke-linejoin:round}

/* ---------- cartão do curso ----------
   O TÍTULO VIVE DENTRO DA ARTE — nas capas que o Filipe já tem e na capa
   gerada. Por isso o cartão não escreve título nenhum por cima: fazer os dois
   é texto sobre texto. O que fica fora da arte são só os selos, embaixo, onde
   não há como colidir com nada. */
.cartao-curso{
  --cc:var(--ac);
  flex:0 0 208px;scroll-snap-align:start;
  display:block;text-align:left;padding:0;border:0;background:transparent;
  color:inherit;font:inherit;cursor:pointer;
}
.cartao-curso .quadro{
  position:relative;aspect-ratio:708/1494;border-radius:14px;overflow:hidden;
  border:1px solid var(--linha);background:var(--card2);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cartao-curso:hover .quadro{
  transform:translateY(-4px);border-color:var(--cc);
  box-shadow:0 18px 44px rgba(0,0,0,.6);
}
.cartao-curso:focus-visible{outline:0}
.cartao-curso:focus-visible .quadro{outline:2px solid var(--cc);outline-offset:2px}
.cartao-curso .quadro > img,
.cartao-curso .quadro > svg{width:100%;height:100%;object-fit:cover;display:block}

/* selos abaixo da arte */
.cartao-curso .selos{
  display:flex;gap:5px;flex-wrap:wrap;align-items:center;
  margin-top:9px;min-height:20px;
}
.selo-curso{
  padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:650;
  letter-spacing:.03em;white-space:nowrap;
  background:var(--card2);border:1px solid var(--linha);color:var(--txt2);
}
/* --cc so existe dentro de um cartao/pagina de curso; fora disso cai no
   vermelho da casa em vez de virar fundo invalido (= transparente) */
.selo-curso.acento{background:var(--cc,var(--ac));border-color:transparent;color:#fff}
.selo-curso.vencendo{background:rgba(228,161,31,.9);border-color:transparent;color:#12100A}
.selo-curso.travado{background:var(--card2);color:var(--txt3)}
.selo-curso.rascunho{background:rgba(58,121,238,.9);border-color:transparent;color:#fff}

/* barra de progresso, colada no pé da arte */
.cartao-curso .prog{
  position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.14);
}
.cartao-curso .prog span{display:block;height:100%;background:var(--cc);transition:width .4s ease}

/* curso sem acesso: a capa esmaece e ganha o cadeado */
.cartao-curso.travado .quadro > img,
.cartao-curso.travado .quadro > svg{filter:grayscale(.7) brightness(.46)}
.cartao-curso .cadeado{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.cartao-curso .cadeado svg{width:34px;height:34px;color:var(--txt2);opacity:.92}

/* ---------- cartão deitado: "continuar de onde parou" ----------
   É o formato 260x146 da plataforma. Aqui o título vai FORA, embaixo, porque
   nesse tamanho não cabe texto legível dentro da arte. */
.cartao-curso.deitado{flex:0 0 268px}
.cartao-curso.deitado .quadro{aspect-ratio:260/146}
.cartao-curso.deitado .titulo-fora{
  margin-top:9px;font-size:13.5px;font-weight:600;line-height:1.32;letter-spacing:-.015em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cartao-curso.deitado .resta{
  margin-top:3px;font-family:var(--mono);font-size:11px;color:var(--txt3);
}

/* ---------- página do curso ---------- */
.curso-capa{
  --cc:var(--ac);
  position:relative;border-radius:var(--r);overflow:hidden;margin-bottom:20px;
  border:1px solid var(--linha);
  background:linear-gradient(120deg,color-mix(in srgb,var(--cc) 16%,var(--card)) 0%,var(--card) 62%);
}
.curso-capa .dentro{position:relative;z-index:2;padding:26px 28px}
.curso-capa .risco{
  position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cc);z-index:3;
}
.curso-capa h1{font-size:27px;letter-spacing:-.03em;line-height:1.18;max-width:26ch}
.curso-capa .sub{color:var(--txt2);font-size:15px;margin:9px 0 0;max-width:62ch;line-height:1.6}
.curso-capa .linha-selos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:13px}

.barra-prog{height:6px;border-radius:4px;background:var(--card2);overflow:hidden;margin-top:16px;max-width:420px}
.barra-prog span{display:block;height:100%;background:var(--cc);border-radius:4px;transition:width .45s ease}
.prog-texto{font-family:var(--mono);font-size:12px;color:var(--txt3);margin-top:7px}

/* ---------- player ---------- */
.palco{
  position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;
  border:1px solid var(--linha);
}
.palco iframe{width:100%;height:100%;border:0;display:block}
.palco .aviso-palco{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:28px;color:var(--txt2);font-size:14px;line-height:1.6;
}
.palco .aviso-palco b{display:block;color:var(--txt);font-size:16px;margin-bottom:7px;font-weight:600}

.aula-cabeca{display:flex;align-items:flex-start;gap:16px;margin:18px 0 0;flex-wrap:wrap}
.aula-cabeca > div:first-child{flex:1;min-width:240px}
.aula-cabeca h2{font-size:19px;letter-spacing:-.025em;line-height:1.3}
.aula-cabeca .desc{color:var(--txt2);font-size:14px;margin:8px 0 0;line-height:1.65}

/* ---------- grade de módulos e aulas ---------- */
.modulo{border:1px solid var(--linha);border-radius:var(--r);background:var(--card);margin-bottom:12px;overflow:hidden}
.modulo-cabeca{
  display:flex;align-items:center;gap:12px;width:100%;padding:14px 17px;
  background:transparent;border:0;color:inherit;font:inherit;cursor:pointer;text-align:left;
}
.modulo-cabeca:hover{background:var(--card2)}
.modulo-cabeca .n{
  font-family:var(--mono);font-size:11px;color:var(--txt3);
  min-width:22px;font-variant-numeric:tabular-nums;
}
.modulo-cabeca .t{flex:1;font-size:15px;font-weight:600;letter-spacing:-.015em}
.modulo-cabeca .c{font-family:var(--mono);font-size:11.5px;color:var(--txt3);white-space:nowrap}
.modulo-cabeca .seta-mod{width:15px;height:15px;color:var(--txt3);transition:transform .2s}
.modulo.aberto .seta-mod{transform:rotate(90deg)}
.modulo-corpo{display:none;border-top:1px solid var(--linha)}
.modulo.aberto .modulo-corpo{display:block}

.aula-linha{
  display:flex;align-items:center;gap:12px;width:100%;padding:11px 17px;
  background:transparent;border:0;border-bottom:1px solid #191920;
  color:inherit;font:inherit;cursor:pointer;text-align:left;transition:background .13s;
}
.aula-linha:last-child{border-bottom:0}
.aula-linha:hover{background:var(--card2)}
.aula-linha.atual{background:color-mix(in srgb,var(--cc,var(--ac)) 12%,var(--card2))}
.aula-linha.atual .tt{color:var(--txt);font-weight:600}
.aula-linha .bolha{
  width:19px;height:19px;flex-shrink:0;border-radius:50%;border:1.5px solid var(--linha);
  display:grid;place-items:center;color:transparent;transition:.15s;
}
.aula-linha .bolha.feita{background:var(--gain);border-color:var(--gain);color:#fff}
.aula-linha .bolha svg{width:11px;height:11px;stroke-width:3}
.aula-linha .tt{flex:1;font-size:14px;color:var(--txt2);line-height:1.4}
.aula-linha .dur{font-family:var(--mono);font-size:11.5px;color:var(--txt3);white-space:nowrap}
.aula-linha .tranca{width:14px;height:14px;color:var(--txt3);flex-shrink:0}
.aula-linha.bloqueada{cursor:not-allowed;opacity:.62}
.aula-linha.bloqueada:hover{background:transparent}

/* ---------- faixa de acesso vencido / sem matrícula ---------- */
.faixa-acesso{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:15px 18px;border-radius:var(--r);margin-bottom:18px;
  background:rgba(228,161,31,.08);border:1px solid rgba(228,161,31,.32);
}
.faixa-acesso.travada{background:rgba(230,51,41,.08);border-color:rgba(230,51,41,.3)}
.faixa-acesso .txt{flex:1;min-width:220px;font-size:14px;line-height:1.6;color:var(--txt2)}
.faixa-acesso .txt b{color:var(--txt);font-weight:600;display:block;margin-bottom:3px}

/* ---------- painel de cursos (admin) ---------- */
.linha-curso{
  display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--linha);
}
.linha-curso:last-child{border-bottom:0}
.linha-curso .mini-capa{
  width:44px;height:62px;border-radius:7px;object-fit:cover;flex-shrink:0;
  border:1px solid var(--linha);background:var(--card2);
}
.linha-curso .nome{flex:1;min-width:0}
.linha-curso .nome b{display:block;font-size:14.5px;letter-spacing:-.015em}
.linha-curso .nome .end{font-family:var(--mono);font-size:11.5px;color:var(--txt3);margin-top:2px}
.linha-curso .numeros{
  font-family:var(--mono);font-size:12px;color:var(--txt3);text-align:right;white-space:nowrap;
}

.arrasta{cursor:grab}
.arrasta:active{cursor:grabbing}
.arrastando{opacity:.4}

@media (max-width:640px){
  /* o título mora dentro da arte, então aqui é só encolher o cartão */
  .cartao-curso{flex:0 0 158px}
  .cartao-curso.deitado{flex:0 0 232px}
  .cartao-curso.deitado .titulo-fora{font-size:12.5px}
  .selo-curso{font-size:10px;padding:2px 7px}
  .seta{display:none !important}
  .curso-capa .dentro{padding:20px 18px}
  .curso-capa h1{font-size:22px}
  .trilha-cabeca h2{font-size:17px}
}

/* Excluir de item de lista: com 20 aulas na tela, 20 botões vermelhos viram
   uma parede e o vermelho perde o significado. Fica cinza até o mouse chegar. */
.btn.discreto{
  background:transparent;color:var(--txt3);border:1px solid transparent;
  padding:6px 11px;font-size:13px;border-radius:8px;
}
.btn.discreto:hover{color:var(--loss);border-color:rgba(230,51,41,.4);filter:none}

/* Dentro da página de um curso, o botão de ação segue a cor DAQUELE curso.
   Sem isto, o "marcar como assistida" saía vermelho num curso de psicologia
   (azul) e a página parecia de dois donos. */
.curso-grade .btn:not(.sec):not(.perigo):not(.discreto){
  background:var(--cc,var(--ac));
}
.curso-grade .aula-linha.atual{background:color-mix(in srgb,var(--cc,var(--ac)) 14%,var(--card2))}