:root{
  --navy:#1b2038; --navy-deep:#12152a; --navy-card:#232a48;
  --cinza-1:#a3a3a1; --cinza-2:#8f8f8d; --cream:#f5f3ee; --texto:#20263f; --muted:#b9bccb;
  --ouro:#d9b25e; --ouro-claro:#f4e9a8; --lilas:#d1b3ff;
  --verde:#3ea86a; --amarelo:#e0a82e; --vermelho:#d9534f; --roxo:#9b7be0;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ min-height:100vh; font-family:"Nunito",Arial,sans-serif; background:var(--navy); color:#fff; }
button{ font-family:inherit; }

/* ---------------- TOPO ---------------- */
#topo{
  position:sticky; top:0; z-index:20;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
  padding:10px 24px;
  background:linear-gradient(180deg,#6d6d6d,#565656);
  box-shadow:0 4px 18px rgba(0,0,0,0.35);
}
#topo .logo{ width:46px; height:auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
.saudacao{ display:flex; flex-direction:column; align-items:center; line-height:1.15; }
.saudacao span{ font-size:0.72rem; letter-spacing:0.12em; color:#e7e7e7; }
.saudacao strong{ font-family:"Oswald",sans-serif; font-weight:600; font-size:1.25rem; letter-spacing:0.04em; }
.seletor{ display:flex; align-items:center; gap:8px; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:#eee; }
.seletor select{ background:#2b2f45; color:#fff; border:1px solid #777; border-radius:8px; padding:6px 10px; font:700 0.85rem "Nunito",sans-serif; }

/* ---------------- PALCO ---------------- */
#palco{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); min-height:calc(100vh - 66px); }

/* ---------------- MATERIAIS (lado cinza) ---------------- */
#materiais{
  position:relative; padding:28px 26px 40px;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,0.25), transparent 60%),
    linear-gradient(180deg,var(--cinza-1),var(--cinza-2));
  color:#2a2a2a;
}
.mat-cabeca{ position:relative; text-align:center; margin-bottom:22px; }
.eyebrow{ font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; opacity:0.85; }
#materiais .eyebrow{ color:#3a3a3a; }
#materiais h1{ margin:2px 0 0; font-family:"Oswald",sans-serif; font-weight:700; font-size:2rem; letter-spacing:0.05em; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,0.35); }
.anel-geral{ position:absolute; right:0; top:0; width:58px; height:58px; }
.anel-geral svg{ width:100%; height:100%; transform:rotate(-90deg); }
.anel-geral circle{ fill:none; stroke-width:4; }
.anel-geral .trilho{ stroke:rgba(255,255,255,0.35); }
.anel-geral .valor{ stroke:var(--ouro); stroke-linecap:round; stroke-dasharray:97.4; stroke-dashoffset:97.4; transition:stroke-dashoffset .8s cubic-bezier(.22,1,.36,1); }
.anel-geral span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:800 0.8rem "Nunito",sans-serif; color:#fff; }

.disc{ margin-bottom:26px; }
.disc.anima{ opacity:0; transform:translateY(14px); animation:entra .6s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes entra{ to{ opacity:1; transform:none; } }
.disc-rotulo{
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(180deg,#fbfaf7,#ecebe6); color:#2b2b2b;
  border-radius:4px; padding:7px 14px; box-shadow:0 4px 10px rgba(0,0,0,0.25);
  font-weight:800; font-size:0.9rem; letter-spacing:0.03em; text-transform:uppercase;
}
.disc-rotulo .num{ font-family:"Oswald",sans-serif; color:#a8853f; font-size:1.05rem; }
.disc-rotulo .tema{ font-weight:700; color:#555; text-transform:none; letter-spacing:0; }
.disc-rotulo .feito{ margin-left:auto; font-size:0.72rem; color:#777; white-space:nowrap; }
.disc-cards{ display:flex; gap:22px; padding:14px 6px 0; flex-wrap:wrap; }

.gcard{
  position:relative; width:104px; aspect-ratio:200/270; padding:0; border:none; background:none; cursor:pointer;
  perspective:600px; filter:drop-shadow(0 8px 10px rgba(0,0,0,0.35));
  transition:filter .25s;
}
.gcard .inner{ position:relative; width:100%; height:100%; border-radius:16px; overflow:hidden; transition:transform .25s cubic-bezier(.22,1,.36,1); transform-style:preserve-3d; }
.gcard .card-svg{ width:100%; height:100%; display:block; }
.gcard .brilho{
  position:absolute; inset:-30%; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.75) 50%, transparent 60%);
  transform:translateX(-80%); animation:brilho 6s ease-in-out infinite; animation-delay:var(--atraso,0s);
}
@keyframes brilho{ 0%,72%{ transform:translateX(-80%); } 88%,100%{ transform:translateX(80%); } }
.gcard:hover{ filter:drop-shadow(0 14px 18px rgba(0,0,0,0.45)) drop-shadow(0 0 14px rgba(244,233,168,0.55)); }
.gcard:hover .brilho{ animation:brilhoRapido .9s ease-out; }
@keyframes brilhoRapido{ from{ transform:translateX(-80%); } to{ transform:translateX(80%); } }
.gcard:active .inner{ transform:scale(0.96); }
.gcard .selo{
  position:absolute; right:-8px; top:-8px; width:30px; height:30px; border-radius:50%;
  background:var(--verde); color:#fff; font-weight:900; display:flex; align-items:center; justify-content:center;
  border:3px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,0.35); transform:scale(0); transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.gcard.visto .selo{ transform:scale(1); }
.gcard.vazio{ filter:grayscale(0.8) drop-shadow(0 6px 8px rgba(0,0,0,0.25)); opacity:0.6; }
.gcard .legenda{ display:block; margin-top:6px; font-size:0.68rem; font-weight:800; color:#333; text-align:center; letter-spacing:0.04em; }
.gcard .play{ transform-origin:7px 0; transition:transform .3s; }
.gcard:hover .play{ transform:scale(1.12); }
.gcard .linhas line{ stroke-dasharray:60; stroke-dashoffset:0; }
.gcard:hover .linhas line{ animation:escreve .7s ease-out both; }
.gcard:hover .linhas line:nth-child(2){ animation-delay:.08s; } .gcard:hover .linhas line:nth-child(3){ animation-delay:.16s; }
.gcard:hover .linhas line:nth-child(4){ animation-delay:.24s; } .gcard:hover .linhas line:nth-child(5){ animation-delay:.32s; }
@keyframes escreve{ from{ stroke-dashoffset:60; } to{ stroke-dashoffset:0; } }
.gcard .check{ stroke-dasharray:110; }
.gcard:hover .check{ animation:marca .6s ease-out both; }
@keyframes marca{ from{ stroke-dashoffset:110; } to{ stroke-dashoffset:0; } }
.dica{ margin:10px 4px 0; font-size:0.85rem; color:#2f2f2f; }

/* ---------------- SIMULADO (lado azul) ---------------- */
#simulado{ background:linear-gradient(180deg,var(--navy),var(--navy-deep)); }
.sim-cabeca{
  margin:0 0 0 auto; max-width:560px; width:100%;
  padding:16px 22px 18px;
  background:linear-gradient(180deg,rgba(109,109,109,0.92),rgba(80,80,80,0.95));
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
}
.sim-cabeca .eyebrow{ color:#eee; }
.sim-titulo{ font-family:"Oswald",sans-serif; font-weight:700; font-size:1.6rem; letter-spacing:0.03em; }
.sim-corpo{ max-width:560px; margin:0 auto; padding:26px 22px 60px; }
.view{ display:none; }
.view.active{ display:block; animation:surge .45s cubic-bezier(.22,1,.36,1); }
@keyframes surge{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

#homeView h2{ text-align:center; margin:0 0 4px; font-family:"Oswald",sans-serif; font-size:1.5rem; letter-spacing:0.05em; }
#progressSummary{ text-align:center; color:var(--muted); font-size:0.82rem; margin-bottom:22px; }
#disciplinasList{ display:flex; flex-direction:column; gap:13px; }
.disciplina-btn{
  position:relative; display:flex; align-items:center; gap:12px; width:100%; padding:14px 18px;
  background:var(--cream); color:var(--texto); border:none; border-radius:10px; cursor:pointer;
  font-weight:800; font-size:0.9rem; text-align:left; letter-spacing:0.01em;
  box-shadow:0 6px 14px rgba(0,0,0,0.28); transition:transform .15s, box-shadow .15s, background .15s;
}
.disciplina-btn:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,0.34); }
.disciplina-btn .ord{ flex:0 0 30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--ouro-claro),var(--ouro)); color:#3a2f1a; font-family:"Oswald",sans-serif; }
.disciplina-btn .nm{ flex:1; }
.disciplina-btn .nm small{ display:block; font-weight:600; color:#6a6f84; font-size:0.78rem; }
.disciplina-badge{ color:#fff; font-size:0.75rem; font-weight:800; padding:4px 10px; border-radius:999px; }
.btn-relatorio{
  display:block; width:100%; margin-top:26px; padding:15px; border:none; border-radius:10px;
  background:var(--verde); color:#fff; font-size:0.95rem; font-weight:800; letter-spacing:0.04em; cursor:pointer;
}
.btn-relatorio:disabled{ background:#39405e; color:#8790ab; cursor:not-allowed; }
.btn-relatorio:not(:disabled):hover{ filter:brightness(1.08); }
.regra{ text-align:center; color:var(--muted); font-size:0.8rem; margin-top:16px; }

/* quiz */
.quiz-topo{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.quiz-topo h3{ flex:1; margin:0; text-align:center; font-family:"Oswald",sans-serif; font-size:1.2rem; letter-spacing:0.03em; }
.voltar{ background:none; border:1px solid #3a4066; color:var(--muted); border-radius:8px; padding:6px 10px; cursor:pointer; }
.placar{ font-size:0.78rem; color:var(--muted); white-space:nowrap; }
.progress-wrap{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.progress-track{ flex:1; height:7px; background:#333a58; border-radius:10px; overflow:hidden; }
.progress-fill{ height:100%; width:0%; background:linear-gradient(90deg,#8fa4f0,var(--lilas)); border-radius:10px; transition:width .4s cubic-bezier(.22,1,.36,1); }
.progress-label{ font-size:0.82rem; color:var(--muted); white-space:nowrap; }
.flashcard{ perspective:1100px; margin-bottom:18px; }
.card{ position:relative; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.card.flipped{ transform:rotateY(180deg); }
.front,.back{
  backface-visibility:hidden; border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,0.35);
  padding:26px 22px; background:#fff; color:var(--texto); min-height:150px; font-size:1.08rem; line-height:1.5;
}
.front{ text-align:left; }
.qnum{ display:inline-block; margin-bottom:10px; padding:3px 10px; border-radius:999px; background:#eef0fa; color:#5560a0; font-size:0.72rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; }
.back{ position:absolute; inset:0; transform:rotateY(180deg); display:flex; flex-direction:column; justify-content:center; text-align:left; font-size:1rem; }
.card.flipped .back{ position:relative; }
.card.flipped .front{ position:absolute; inset:0; }
.card.green .back{ background:#dcf3e1; } .card.red .back{ background:#fbdcdb; } .card.purple .back{ background:#ece1fb; }
.back .veredito{ font-family:"Oswald",sans-serif; font-size:1.25rem; margin-bottom:8px; letter-spacing:0.03em; }
#optionsList{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.btn-answer{
  display:flex; align-items:center; justify-content:center; gap:10px; padding:15px 14px; border:none; border-radius:999px;
  font-weight:800; font-size:1rem; letter-spacing:0.04em; cursor:pointer; color:#16213e;
  background:linear-gradient(180deg,#9db8f2,#7c9bee); box-shadow:0 3px 8px rgba(0,0,0,0.25); transition:transform .12s, filter .12s;
}
.btn-answer:hover:not(:disabled){ transform:translateY(-2px); filter:brightness(1.06); }
.btn-answer .letra{ width:24px; height:24px; border-radius:50%; border:2px solid #16213e; display:flex; align-items:center; justify-content:center; font-size:0.78rem; }
.btn-answer.correct-highlight{ background:linear-gradient(180deg,#a9e6ab,#7fd583); }
.btn-answer.wrong-highlight{ background:linear-gradient(180deg,#f2a9a9,#ea7f7f); }
.btn-answer:disabled{ cursor:default; }
.btn-answer:disabled:not(.correct-highlight):not(.wrong-highlight){ opacity:0.5; }
.btn-skip{ grid-column:1 / -1; padding:12px; border:none; border-radius:999px; background:linear-gradient(180deg,#f9cf9f,#f3b877); color:#4a2e0a; font-weight:800; cursor:pointer; }
.btn-skip:disabled{ opacity:0.5; cursor:default; }
.btn-next{ display:none; width:100%; margin-top:16px; padding:14px; border:none; border-radius:999px; background:var(--lilas); color:#20263f; font-weight:900; font-size:0.95rem; cursor:pointer; }

/* resultado */
#resultTitulo{ text-align:center; font-family:"Oswald",sans-serif; font-size:1.35rem; margin:0 0 16px; }
.resultado-grade{ display:flex; align-items:center; justify-content:center; gap:28px; margin-bottom:24px; flex-wrap:wrap; }
.donut{ position:relative; width:160px; height:160px; }
.donut-centro{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.donut-centro b{ font-family:"Oswald",sans-serif; font-size:2rem; }
.donut-centro span{ font-size:0.75rem; color:var(--muted); }
.numeros div{ margin:6px 0; font-size:0.95rem; display:flex; align-items:center; gap:8px; }
.numeros b{ margin-left:auto; padding-left:16px; }
.ponto{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.ponto.verde{ background:var(--verde); } .ponto.vermelho{ background:var(--vermelho); } .ponto.roxo{ background:var(--roxo); }
.liquida{ border-top:1px solid #3a4066; padding-top:8px; font-weight:800; }
.tempo{ color:var(--muted); font-size:0.8rem !important; }
.result-actions{ display:flex; flex-direction:column; gap:11px; max-width:380px; margin:0 auto; }
.result-actions button{ padding:14px; border:none; border-radius:10px; font-weight:800; font-size:0.9rem; letter-spacing:0.02em; cursor:pointer; }
#cadernoBtn{ background:linear-gradient(180deg,#8fd6a6,#5fbb7e); color:#16351f; }
#reiniciarBtn{ background:var(--lilas); color:#2c2c2c; }
#voltarInicioBtn{ background:none; color:var(--muted); border:1px solid #3a4066; }

/* relatório */
#reportView h3{ text-align:center; font-family:"Oswald",sans-serif; font-size:1.35rem; margin:0 0 4px; }
.subtitle{ text-align:center; color:var(--muted); font-size:0.82rem; margin-bottom:16px; }
.legend{ display:flex; justify-content:center; gap:18px; font-size:0.78rem; color:var(--muted); margin-bottom:14px; }
.legend span{ display:flex; align-items:center; gap:6px; }
.swatch{ width:11px; height:11px; border-radius:3px; display:inline-block; }
.chart-panel{ background:#fff; border-radius:12px; padding:20px 14px 8px; }
#chartWrap{ position:relative; height:340px; }
.action-row{ display:flex; justify-content:center; gap:12px; margin-top:22px; flex-wrap:wrap; }
.action-row button{ padding:12px 20px; border-radius:8px; font-weight:800; font-size:0.85rem; cursor:pointer; }
#imprimirDesempenhoBtn{ background:var(--verde); color:#fff; border:1px solid var(--verde); }
#voltarInicioRelatorioBtn{ background:none; color:var(--muted); border:1px solid #3a4066; }

/* aviso */
#aviso{ position:fixed; left:50%; bottom:24px; transform:translate(-50%,30px); opacity:0; pointer-events:none;
  background:#2b2f45; color:#fff; padding:12px 20px; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,0.4);
  font-weight:700; transition:opacity .3s, transform .3s; z-index:50; }
#aviso.on{ opacity:1; transform:translate(-50%,0); }

.print-only{ display:none; }
@media print{
  .no-print{ display:none !important; }
  body{ background:#fff; color:#000; }
  #palco{ display:block; }
  #simulado{ background:#fff; }
  .sim-corpo{ max-width:none; padding:0; }
  .print-only{ display:block !important; }
  #reportView h3,.subtitle{ color:#000; }
}
@media (max-width:900px){
  #palco{ grid-template-columns:1fr; }
  .sim-cabeca{ max-width:none; }
  .disc-cards{ justify-content:center; }
}
@media (max-width:480px){
  #topo{ grid-template-columns:auto 1fr; padding:8px 14px; }
  .seletor{ grid-column:1 / -1; justify-content:center; }
  .gcard{ width:88px; }
  .disc-cards{ gap:14px; }
  #optionsList{ grid-template-columns:1fr 1fr; }
}