: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}

.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}
}