:root{
  --azul:#0F1E3D; --azul-2:#16284f; --azul-3:#1f3566; --linha:rgba(255,255,255,0.10);
  --ouro:#F5B700; --ouro-claro:#ffd35a; --branco:#ffffff; --off:#F4F1EA; --texto:#e7eaf3; --apagado:#9aa4bf;
  --verde:#2fbf71; --vermelho:#E63946;
  --gold:#F5B700; --prata:#C9CED8; --bronze:#CD7F32;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ min-height:100vh; background:var(--azul); color:var(--texto); font-family:"Nunito",system-ui,sans-serif; font-size:16px; }
a{ color:var(--ouro-claro); }
button{ font:inherit; cursor:pointer; }
.tela[hidden], .view{ display:none; }
.view.active{ display:block; }
.ouro{ color:var(--ouro); }
.verde{ color:var(--verde); } .vermelho{ color:var(--vermelho); }
.eyebrow{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--apagado); font-weight:800; }

/* ---------- login ---------- */
#telaLogin{ display:flex; min-height:100vh; align-items:center; justify-content:center; padding:24px 16px;
  background:radial-gradient(circle at 50% 0%, #20386b 0%, var(--azul) 60%); }
#telaLogin[hidden]{ display:none; }
.login-caixa{ text-align:center; max-width:460px; width:100%; }
.logo-grande{ width:72px; height:auto; display:block; margin:0 auto; }
.selo-concurso{ display:inline-block; margin:14px 0 6px; background:var(--ouro); color:var(--azul); font-weight:900; font-family:"Montserrat"; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; padding:8px 14px; border-radius:10px; }
.login-caixa h1{ font-family:"Montserrat"; font-weight:900; font-size:2.6rem; margin:10px 0 4px; color:var(--branco); letter-spacing:.02em; }
.sub{ color:var(--apagado); margin:0 0 24px; }
#botaoGoogle{ display:flex; justify-content:center; min-height:44px; }
[hidden]{ display:none !important; }
.dev{ margin-top:18px; display:flex; gap:6px; flex-wrap:wrap; justify-content:center; align-items:center; font-size:.85rem; color:var(--apagado); }
.dev input{ padding:8px 10px; border-radius:8px; border:1px solid var(--linha); background:var(--azul-2); color:#fff; }
.dev button{ padding:8px 12px; border-radius:8px; border:0; background:var(--ouro); color:var(--azul); font-weight:800; }
.erro{ color:#ff8a93; min-height:1.2em; white-space:pre-line; }
.legal{ font-size:.8rem; color:var(--apagado); margin-top:24px; }

/* ---------- topo ---------- */
#topo{ display:flex; align-items:center; gap:12px; padding:12px 20px; background:var(--azul-2); border-bottom:1px solid var(--linha); position:sticky; top:0; z-index:5; }
#topo .logo{ width:38px; }
.marca{ display:flex; flex-direction:column; line-height:1.05; }
.marca span{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--apagado); font-weight:800; }
.marca strong{ font-family:"Montserrat"; font-weight:900; font-size:1.25rem; color:#fff; }
.marca em{ font-style:normal; color:var(--ouro); }
.usuario{ margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.usuario button, .usuario a{ background:transparent; border:1px solid var(--linha); color:var(--texto); border-radius:8px; padding:6px 10px; font-size:.85rem; text-decoration:none; }
.apelido-btn{ font-weight:800; color:var(--ouro-claro) !important; }

main{ max-width:1080px; margin:0 auto; padding:22px 16px 60px; }
h3.sec{ font-family:"Montserrat"; margin:30px 0 12px; }

/* ---------- cartão da semana ---------- */
.cartao-semana{ background:linear-gradient(135deg, var(--azul-3), var(--azul-2)); border:1px solid rgba(245,183,0,.35); border-radius:18px; padding:22px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.cartao-semana .info{ flex:1 1 320px; }
.cartao-semana h2{ font-family:"Montserrat"; font-weight:900; margin:4px 0 6px; color:#fff; font-size:1.6rem; }
.cartao-semana p{ margin:0; color:var(--apagado); }
.btn-grande{ background:var(--ouro); color:var(--azul); border:0; border-radius:12px; padding:14px 22px; font-family:"Montserrat"; font-weight:900; font-size:1rem; letter-spacing:.03em; text-transform:uppercase; }
.btn-grande:hover{ filter:brightness(1.08); }
.btn-secundario{ background:transparent; color:var(--ouro-claro); border:1px solid var(--ouro); border-radius:12px; padding:12px 18px; font-weight:800; }
.nota-feita{ font-family:"Montserrat"; font-weight:900; font-size:1.4rem; color:var(--ouro); }

/* ---------- avisos ---------- */
.avisos{ margin-top:20px; background:var(--azul-2); border:1px solid var(--linha); border-radius:16px; padding:6px 20px 10px; }
.avisos h3{ font-family:"Montserrat"; }
.avisos ul{ margin:0 0 10px; padding-left:20px; line-height:1.6; }
.avisos li{ margin-bottom:6px; }

/* ---------- rankings ---------- */
.paineis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:18px; margin-top:22px; }
.painel{ background:var(--azul-2); border:1px solid var(--linha); border-radius:16px; padding:16px 18px; }
.painel h3{ font-family:"Montserrat"; margin:4px 0 2px; color:#fff; }
.painel-sub{ margin:0 0 12px; color:var(--apagado); font-size:.85rem; }
.ranking{ list-style:none; margin:0; padding:0; }
.ranking li{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; margin-bottom:4px; background:rgba(255,255,255,.03); }
.ranking .pos{ width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; font-weight:900; font-family:"Montserrat"; font-size:.85rem; background:var(--azul-3); color:var(--texto); }
.ranking .nome{ flex:1; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ranking .pts{ font-family:"Montserrat"; font-weight:900; }
.ranking li.p1{ background:linear-gradient(90deg, rgba(245,183,0,.30), rgba(245,183,0,.06)); border:1px solid rgba(245,183,0,.6); }
.ranking li.p1 .pos{ background:var(--gold); color:#3a2a00; }
.ranking li.p1 .nome, .ranking li.p1 .pts{ color:var(--ouro-claro); }
.ranking li.p2{ background:linear-gradient(90deg, rgba(201,206,216,.25), rgba(201,206,216,.05)); border:1px solid rgba(201,206,216,.55); }
.ranking li.p2 .pos{ background:var(--prata); color:#2a2f3a; }
.ranking li.p2 .nome, .ranking li.p2 .pts{ color:#e9edf3; }
.ranking li.p3{ background:linear-gradient(90deg, rgba(205,127,50,.28), rgba(205,127,50,.05)); border:1px solid rgba(205,127,50,.6); }
.ranking li.p3 .pos{ background:var(--bronze); color:#2b1600; }
.ranking li.p3 .nome, .ranking li.p3 .pts{ color:#f0b98a; }
.ranking li.eu{ outline:2px solid var(--ouro); }
.ranking .vazio{ color:var(--apagado); background:none; }
.minha-pos{ margin-top:10px; padding:10px 12px; border-radius:10px; background:rgba(245,183,0,.08); border:1px dashed rgba(245,183,0,.5); font-weight:700; }
.minha-pos:empty{ display:none; }

/* ---------- anteriores ---------- */
.item-sim{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 14px; border:1px solid var(--linha); border-radius:12px; margin-bottom:8px; background:var(--azul-2); }
.item-sim .t{ flex:1 1 220px; }
.item-sim .t small{ display:block; color:var(--apagado); }

/* ---------- prova ---------- */
#prova{ max-width:1180px; }
.prova-topo{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; position:sticky; top:62px; z-index:4; background:var(--azul); padding:10px 0 12px; border-bottom:1px solid var(--linha); }
.prova-tit{ flex:1 1 200px; display:flex; flex-direction:column; }
.prova-tit small{ color:var(--apagado); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.75rem; }
.prova-tit b{ font-family:"Montserrat"; font-size:1.1rem; color:#fff; }
.relogio{ font-family:"Montserrat"; font-weight:900; font-size:1.6rem; letter-spacing:.04em; color:#fff; background:var(--azul-3); padding:6px 14px; border-radius:10px; font-variant-numeric:tabular-nums; }
.relogio.alerta{ color:#fff; background:var(--vermelho); }
.btn-finalizar{ background:var(--ouro); color:var(--azul); border:0; border-radius:10px; padding:10px 18px; font-weight:900; font-family:"Montserrat"; text-transform:uppercase; }
.prova-corpo{ display:flex; flex-direction:column; gap:16px; margin-top:18px; max-width:900px; margin-left:auto; margin-right:auto; }
.questao{ background:var(--azul-2); border:1px solid var(--linha); border-radius:16px; padding:22px; }
.q-cab{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; color:var(--apagado); font-weight:800; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; }
.q-enun{ font-size:1.18rem; line-height:1.6; color:#fff; margin:16px 0 22px; white-space:pre-line; }
.q-opcoes{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.opc{ padding:16px; border-radius:12px; border:2px solid var(--linha); background:var(--azul-3); color:#fff; font-family:"Montserrat"; font-weight:900; font-size:1.05rem; letter-spacing:.05em; }
.opc.certo.sel{ background:var(--verde); border-color:var(--verde); }
.opc.errado.sel{ background:var(--vermelho); border-color:var(--vermelho); }
.limpar{ margin-top:10px; background:none; border:0; color:var(--apagado); text-decoration:underline; }
.q-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:18px; gap:10px; }
.q-nav button{ background:transparent; border:1px solid var(--linha); color:#fff; border-radius:10px; padding:10px 16px; font-weight:800; }
.q-nav button:disabled{ opacity:.35; cursor:default; }
.salvo{ font-size:.8rem; color:var(--apagado); text-align:center; }
.mapa{ background:var(--azul-2); border:1px solid var(--linha); border-radius:16px; padding:14px 16px; }
.mapa-cab{ margin-bottom:6px; font-weight:700; }
#mapa .grupo{ font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--apagado); margin:12px 0 6px; }
#mapa .grade{ display:grid; grid-template-columns:repeat(auto-fill, minmax(36px, 1fr)); gap:5px; }
.mq{ height:34px; border-radius:7px; border:1px solid var(--linha); background:transparent; color:var(--texto); font-size:.78rem; font-weight:800; padding:0; }
.mq.r{ background:var(--verde); border-color:var(--verde); color:#06210f; }
.mq.atual{ outline:2px solid var(--ouro); outline-offset:1px; }
.legenda{ display:flex; gap:8px; align-items:center; font-size:.78rem; color:var(--apagado); margin-top:12px; flex-wrap:wrap; }
.legenda .m{ width:13px; height:13px; border-radius:3px; border:1px solid var(--linha); display:inline-block; }
.legenda .m.r{ background:var(--verde); border-color:var(--verde); } .legenda .m.atual{ outline:2px solid var(--ouro); }

/* ---------- Instagram ---------- */
.ig{ width:18px; height:18px; flex:none; }
.insta-topo{ display:flex; align-items:center; gap:6px; color:#fff; text-decoration:none; font-weight:800; font-size:.85rem; padding:6px 10px; border-radius:20px;
  background:linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.insta-faixa{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; color:#fff; text-decoration:none; font-weight:700; padding:10px 16px; border-radius:24px;
  background:linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.insta-faixa.grande{ display:flex; justify-content:center; margin:28px auto 0; max-width:420px; font-size:1.05rem; }
.insta-faixa .ig{ width:22px; height:22px; }
.prof{ color:var(--ouro-claro); font-weight:800; letter-spacing:.06em; margin-bottom:8px; }

/* ---------- resultado ---------- */
.res-cab{ background:linear-gradient(135deg, var(--azul-3), var(--azul-2)); border:1px solid rgba(245,183,0,.35); border-radius:18px; padding:22px; }
.res-cab h2{ font-family:"Montserrat"; font-weight:900; color:#fff; margin:6px 0 14px; font-size:1.8rem; }
.res-cab h2 span{ color:var(--ouro); }
.res-numeros{ display:flex; gap:12px; flex-wrap:wrap; }
.res-numeros .n{ background:rgba(255,255,255,.05); border-radius:12px; padding:10px 16px; min-width:110px; text-align:center; color:var(--apagado); font-size:.85rem; }
.res-numeros .n b{ display:block; font-family:"Montserrat"; font-size:1.5rem; color:#fff; }
.res-numeros .n.verde b{ color:var(--verde); } .res-numeros .n.vermelho b{ color:var(--vermelho); }
.diagnostico, .gabarito{ margin-top:20px; background:var(--azul-2); border:1px solid var(--linha); border-radius:16px; padding:6px 20px 18px; }
.diagnostico h3, .gabarito h3{ font-family:"Montserrat"; }
.diag-box{ border-radius:12px; padding:12px 14px; margin-bottom:10px; line-height:1.55; }
.diag-box.alerta{ background:rgba(230,57,70,.12); border:1px solid rgba(230,57,70,.45); }
.diag-box.bom{ background:rgba(47,191,113,.12); border:1px solid rgba(47,191,113,.45); }
.diag-box.dica{ background:rgba(245,183,0,.10); border:1px solid rgba(245,183,0,.45); }
.barra-linha{ display:grid; grid-template-columns:minmax(120px, 260px) 1fr 120px; gap:10px; align-items:center; margin:8px 0; }
.barra-linha .rot{ font-weight:800; }
.barra-linha .rot small{ display:block; color:var(--apagado); font-weight:700; }
.barra{ height:14px; background:rgba(255,255,255,.07); border-radius:7px; overflow:hidden; }
.barra i{ display:block; height:100%; border-radius:7px; }
.barra-linha .val{ text-align:right; font-weight:800; font-size:.9rem; }
.gab-item{ border-top:1px solid var(--linha); padding:12px 0; }
.gab-item .tag{ display:inline-block; font-size:.72rem; font-weight:900; padding:2px 8px; border-radius:6px; margin-right:6px; }
.tag.ok{ background:var(--verde); color:#06210f; } .tag.no{ background:var(--vermelho); color:#fff; } .tag.br{ background:var(--azul-3); color:var(--texto); }
.gab-item p{ margin:6px 0; }
.gab-item .com{ color:var(--apagado); font-size:.92rem; }
.gab-grupo{ margin-top:16px; font-family:"Montserrat"; font-weight:800; color:var(--ouro-claro); }
.res-acoes{ margin-top:20px; }
.res-acoes button{ background:transparent; border:1px solid var(--linha); color:#fff; border-radius:10px; padding:10px 16px; font-weight:800; }

/* ---------- modal / aviso ---------- */
.modal{ position:fixed; inset:0; background:rgba(5,10,25,.75); display:grid; place-items:center; z-index:20; padding:16px; }
.modal[hidden]{ display:none; }
.modal-caixa{ background:var(--azul-2); border:1px solid var(--linha); border-radius:16px; padding:22px; max-width:440px; width:100%; }
.modal-caixa h3{ font-family:"Montserrat"; margin-top:0; color:#fff; }
.modal-caixa input{ width:100%; padding:12px; border-radius:10px; border:1px solid var(--linha); background:var(--azul); color:#fff; font-size:1rem; }
.modal-acoes{ display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }
.modal-acoes button{ border-radius:10px; padding:10px 16px; font-weight:800; border:1px solid var(--linha); background:transparent; color:#fff; }
.modal-acoes .principal{ background:var(--ouro); color:var(--azul); border:0; }
#aviso{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#fff; color:var(--azul); padding:12px 18px; border-radius:12px; font-weight:800; box-shadow:0 10px 30px rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .25s; z-index:30; max-width:90vw; text-align:center; }
#aviso.on{ opacity:1; }

.res-acoes{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.so-impressao{ display:none; }

/* ---------- impressão do caderno de prova ---------- */
@media print{
  @page{ size:A4; margin:14mm; }
  body{ background:#fff !important; color:#111 !important; font-size:11pt; }
  #topo, .res-acoes, #aviso, .modal, #telaLogin, .view:not(#resultado){ display:none !important; }
  .so-impressao{ display:block !important; border-bottom:2px solid #0F1E3D; padding-bottom:6px; margin-bottom:10px; color:#0F1E3D; }
  main{ padding:0 !important; max-width:none; }
  .res-cab, .diagnostico, .gabarito{ background:#fff !important; border:1px solid #ccc !important; color:#111 !important; break-inside:auto; }
  .res-cab h2, .res-cab h2 span, .res-numeros .n b, .diagnostico h3, .gabarito h3, .gab-grupo{ color:#0F1E3D !important; }
  .res-numeros .n{ background:#f3f3f3 !important; color:#333 !important; }
  .diag-box{ background:#fafafa !important; border:1px solid #bbb !important; color:#111 !important; }
  .barra{ background:#e5e5e5 !important; } .barra i{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .gab-item{ break-inside:avoid; border-top:1px solid #ddd; }
  .gab-item .com{ color:#333 !important; }
  .tag{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .eyebrow, .barra-linha .rot small{ color:#555 !important; }
}

@media (max-width: 820px){
  #topo{ padding:8px 12px; gap:8px; }
  #topo .logo{ width:30px; }
  .marca strong{ font-size:1rem; white-space:nowrap; }
  .marca span{ font-size:.58rem; letter-spacing:.08em; white-space:nowrap; }
  .insta-topo{ padding:6px; }
  .usuario{ gap:6px; flex-wrap:nowrap; }
  .usuario button, .usuario a{ padding:5px 8px; font-size:.75rem; }
  .apelido-btn{ max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .marca{ min-width:0; }
  .prova-topo{ gap:10px; }
  .prova-tit{ flex-basis:100%; }
  .insta-topo span{ display:none; }
  .prova-topo{ top:58px; }
  .relogio{ font-size:1.25rem; }
  .barra-linha{ grid-template-columns:1fr 90px; }
  .barra-linha .barra{ grid-column:1 / -1; grid-row:2; }

}