*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter",sans-serif;
}
:root{
    --blue-color:#2563eb;
    --red-color:#dc3545;
    --green-color:#28a745;
    --orange-color:#ffc107;
    --white-color:#fff;

    --card-e:#ccc;
    --shadow:0 0 15px rgba(0, 0 , 0 , 0.05);
    --grey-e:#f5f6fa;
    --grey-x:#374151;
}

html{
  scroll-behavior: smooth;
}

body{
  width: 100%;
  height: auto;
  background: var(--card-e);
}


* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Segoe UI", Roboto, Arial, sans-serif; background-color: #f5f6fa; color: #333; line-height: 1.5; padding: 20px; }

header { max-width: 900px; margin: 0 auto 30px auto; }
header h1 { font-size: 2rem; text-align: center; margin-bottom: 15px; color: #2f3640; }
.estatisticas { display: flex; flex-wrap: wrap; gap: 20px; font-size: 1rem; justify-content: center; }
.estatisticas div { background: #fff; padding: 10px 15px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); }

.divfilteer { text-align: center; margin-bottom: 20px; }
.divfilteer select { padding: 6px 10px; font-size: 1rem; border-radius: 5px; border: 1px solid #ccc; }
.divfilteer select option { padding: 6px 10px; font-size: 1rem; border-radius: 5px;background: #fbfcff; color: #181b20;outline: none;}


.quizesFeitos { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }


.quizEspecifico { background: #fff; border-radius: 10px; padding: 15px 20px; box-shadow: 0 3px 8px rgba(0,0,0,0.05); transition: box-shadow 0.2s, transform 0.2s; }
.quizEspecifico:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.1); }


.quiz-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.quiz-header .disciplina { font-weight: 600; font-size: 1.1rem; }
.quiz-header .nota { font-weight: bold; }
.quiz-header .data { font-size: 0.9rem; color: #555; }
.btn-toggle-detalhes { background: none; border: none; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; transition: transform 0.2s;padding: 10px;}
.btn-toggle-detalhes .chevron { display: inline-block; transition: transform 0.3s; }

.quiz-tabela { margin-top: 15px; flex-direction: column; gap: 6px; display: flex; }
.quiz-tabela .linha { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #eee; }
.quiz-tabela .linha.cabecalho { font-weight: 600; color: #555; }
.quiz-tabela .linha div { flex: 1; text-align: center; }
.quiz-tabela .linha div:first-child { text-align: left; }

@media screen and (max-width:350px){
  .cabecalho{
    font-size: .6em;
    gap: 5px;
  }
}
.quiz-detalhes { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee; display: none; flex-direction: column; gap: 6px; }
.quiz-detalhes div { margin-bottom: 8px; }
.quiz-detalhes strong { display: block; margin-bottom: 4px; color: #2f3640; }


.pergunta-item { padding: 5px 10px; border-radius: 6px; margin-bottom: 4px; font-size: 0.95rem; }
.pergunta-item.certa { background-color: #d4edda; color: #155724; }
.pergunta-item.errada { background-color: #f8d7da; color: #721c24; }
.pergunta-item.nao-respondida { background-color: #fff3cd; color: #856404; }


.nota.verde { color: #09be6a; }
.nota.amarela { color: #ffb007; }
.nota.vermelha { color: #dc3545; }


@media(max-width:768px){
  .estatisticas { flex-direction: column; gap: 10px; }
  .quiz-header { flex-direction: column; align-items:flex-start; gap: 6px; }
  .quiz-tabela .linha div { font-size: 0.9rem; }
}
@media(max-width:480px){
  body { padding: 15px; }
  .quizEspecifico { padding: 12px 15px; }
  .estatisticas div { font-size: 0.8rem; }
   .lg {     font-size: 1.5em;
   }

}
.quizEspecifico{margin-bottom: 10px;}
.empty{
  text-align: center;
}

.emptytext{
  font-size: clamp(1.2em,2vw,3em);
}
.emptylink{
  color: #2563eb;
}

 .lg {     font-size: 2em;
    text-transform: uppercase;
     color: #2563eb;
    font-weight: 600; }
 .lg span {   
  color: var(--grey-x);
    font-weight: 400;
  }

    .hashtags {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hashtag {
  font-size: 0.75em;
  padding: 3px 6px;
  background: #f9fbff;
  color: #020202;
  border-radius: 6px;
}
.grupo-vazio{
  color: #555;
  font-family: "Inter",sans-serif;
  font-size: .8em;
}