/* ==========================================
  TEST OF ENGLISH AS FOREIGN LANGUAGE
  TOEFL ITP STYLE UI
========================================== */

:root{

--primary:#58cc02;
--primary-dark:#46a302;
--secondary:#1cb0f6;
--yellow:#ffd900;
--dark:#2d3436;
--white:#ffffff;
--glass:rgba(255,255,255,0.15);
--shadow:
0 8px 25px rgba(0,0,0,.15);
--radius:20px;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
scroll-behavior:smooth;
}

body{
background: linear-gradient(180deg, #87CEEB 0%, #b7e9ff 100%);
overflow-x:hidden;
color:var(--dark);
min-height:100vh;

}

/* ==========================================
   PARTICLES
========================================== */

#particles-js{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;

}

/* ==========================================
   NAVBAR
========================================== */

.navbar{

position:fixed;
top:0;
left:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 7%;
background: rgba(67, 56, 202, 0.45);
backdrop-filter:blur(12px);
z-index:1000;
box-shadow:var(--shadow);

}

.logo{
font-size:1.3rem;
font-weight:700;
color:#fff;
}
.navbar ul{
display:flex;
gap:25px;
list-style:none;

}
.navbar a{
text-decoration:none;
color:white;
font-weight:600;
transition:.3s;
}

.navbar a:hover{
color:var(--yellow);
}
.nav-buttons{
display:flex;
gap:10px;
}

/* ==========================================
   BUTTONS
========================================== */

button{

cursor:pointer;
border:none;
outline:none;
transition:.3s;
}

.green-btn{
background:var(--primary);
color:white;
padding:12px 25px;
border-radius:50px;
font-weight:700;

}
.green-btn:hover{
transform:translateY(-3px);
background:blue;
}

/* ==========================================
   HERO
========================================== */

.hero{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:120px 10%;
gap:50px;
}

.hero-content{
flex:1;
}

.hero-content h1{
font-size:4rem;
font-weight:800;
color:white;
line-height:1.1;
margin-bottom:20px;
}

.hero-content p{
font-size:1.2rem;
line-height:1.8;
color:white;
margin-bottom:30px;
max-width:650px;
}

.hero-image{
flex:1;
text-align:center;
}

.hero-image img{
width:100%;
max-width:450px;
animation:float 4s ease-in-out infinite;
}

/* ==========================================
   FLOAT ANIMATION
========================================== */

@keyframes float{
0%{
transform:translateY(0px);
}

50%{
transform:translateY(-20px);
}

100%{
transform:translateY(0px);
}

}

/* ==========================================
   SECTION
========================================== */

.section{
padding:100px 8%;
}

.section h2{
font-size:2.5rem;
text-align:center;
margin-bottom:50px;
}

/* ==========================================
   ABOUT
========================================== */

.about-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}

.card{
background:rgba(255,255,255,.75);
backdrop-filter:blur(10px);
border-radius:var(--radius);
padding:35px;
text-align:center;
box-shadow:var(--shadow);
transition:.3s;
font-size:2rem;
}

.card:hover{
transform:
translateY(-8px)
scale(1.03);
}

.card h3{
margin-top:15px;
font-size:1.3rem;
}

.card p{
margin-top:10px;
font-size:.95rem;
}

/* ==========================================
   DASHBOARD
========================================== */

.dashboard{
padding:100px 8%;
}

.dashboard h2{
text-align:center;
margin-bottom:40px;
}

.dashboard-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}

.stat-card{
background:white;
padding:30px;
border-radius:20px;
text-align:center;
font-size:2rem;
box-shadow:var(--shadow);
}

.stat-card h3{
font-size:2rem;
margin-top:10px;
}

.progress-container{
margin-top:40px;
height:25px;
background:#ddd;
border-radius:50px;
overflow:hidden;
}

#progressBar{
width:0%;
height:100%;
background:
linear-gradient(
90deg,
var(--primary),
#93f542
);
transition:1s;
}

/* ==========================================
   LEVELS
========================================== */

.levels-container{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.level-card{
background:white;
padding:30px;
border-radius:25px;
text-align:center;
box-shadow:var(--shadow);
transition:.3s;
}

.level-card:hover{
transform:
translateY(-8px);
}

.level-icon{
font-size:4rem;
margin-bottom:20px;
}

.level-card button{
margin-top:20px;
padding:10px 20px;
border-radius:50px;
background:var(--primary);
color:white;
font-weight:700;
}

.locked{
opacity:.55;
filter:grayscale(100%);
}

/* ==========================================
   QUIZ
========================================== */

.quiz-section{
padding:100px 8%;
}

#quizContainer{
background:#9932CC;
padding:40px;
border-radius:25px;
box-shadow:var(--shadow);
max-width:900px;
margin:auto;
}

.empty-state{
text-align:center;
font-size:1.1rem;
color:#888;
}

.quiz-question{
font-size:1.5rem;
font-weight:700;
color: white;
margin-bottom:25px;
}

.quiz-options{
display:grid;
gap:15px;
}

.quiz-option{
background:#f3f3f3;
padding:15px;
border-radius:15px;
cursor:pointer;
transition:.3s;
}

.quiz-option:hover{
background:#e5ffe5;
}

.correct{
background:#58cc02 !important;
color:white;
}

.wrong{
background:#ff5f5f !important;
color:white;
}
@keyframes pop{

0%{
transform:scale(.8);
}

100%{
transform:scale(1);
}

}
@keyframes shake{
0%{
transform:translateX(0);
}
25%{
transform:translateX(-5px);
}
50%{
transform:translateX(5px);
}
75%{
transform:translateX(-5px);
}
100%{
transform:translateX(0);
}

}
#logoutBtn{
background:#ff4d4d;
color:white;
padding:10px 20px;
border:none;
border-radius:30px;
font-weight:600;
cursor:pointer;
}

#logoutBtn:hover{
opacity:.9;
}

#userDisplay:empty{
display:none;
}

#userDisplay:not(:empty){
display:inline-block;
padding:10px 18px;
background:#1e3a8a;
color:white;
font-weight:700;
font-size:14px;
border-radius:20px;
margin-right:10px;
border:none;
box-shadow:0 2px 6px rgba(0,0,0,0.15);
vertical-align:middle;
line-height:1.4;
}
/* ==========================================
   BADGES
========================================== */

.badges-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(200px,1fr));
gap:20px;

}

.badge-card{
background:white;
padding:25px;
border-radius:20px;
font-weight:700;
text-align:center;
box-shadow:var(--shadow);
transition:.3s;

}

.badge-card:hover{
transform:scale(1.05);
}

/* ==========================================
   CHART
========================================== */

.chart-container{
background:white;
padding:40px;
border-radius:25px;
box-shadow:var(--shadow);
max-width:900px;
margin:auto;

}

/* ==========================================
   LEADERBOARD
========================================== */

.leaderboard-table{
width:100%;
border-collapse:collapse;
background:white;
border-radius:20px;
overflow:hidden;
box-shadow:var(--shadow);

}

.leaderboard-table th{
background:var(--primary);
color:white;
padding:18px;
}

.leaderboard-table td{
padding:15px;
text-align:center;
border-bottom:1px solid #eee;
}

/* ==========================================
   CERTIFICATE
========================================== */

.certificate-box{
background:white;
padding:60px;
text-align:center;
border-radius:25px;
box-shadow:var(--shadow);
max-width:900px;
margin:auto;
}

.certificate-box h1{
font-size:2.5rem;
color:var(--primary);
margin-bottom:20px;
}

.certificate-box h2{
font-size:2rem;
margin:15px 0;
}

.certificate-box button{
margin-top:25px;
background:var(--primary);
color:white;
padding:12px 25px;
border-radius:50px;
}

/* ==========================================
   MODAL
========================================== */

.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:
rgba(0,0,0,.5);
justify-content:center;
align-items:center;
z-index:9999;
}

.modal-content{
background:white;
padding:35px;
width:90%;
max-width:450px;
border-radius:20px;
position:relative;
}

.modal-content h2{
margin-bottom:20px;
}
.modal-content input{
width:100%;
padding:14px;
margin-bottom:15px;
border:1px solid #ddd;
border-radius:12px;
}

.modal-content button{
width:100%;
background:var(--primary);
padding:14px;
color:white;
font-weight:700;
border-radius:12px;
}

.closeModal,
.closeRegister{
position:absolute;
top:15px;
right:20px;
font-size:1.8rem;
cursor:pointer;
}

/* ==========================================
   FOOTER
========================================== */

footer{
background:#1b1b1b;
color:white;
padding:50px;
text-align:center;
margin-top:80px;
}

.footer-content h3{
margin-bottom:15px;
}

/* ==========================================
   FLOATING LINGUISTIC ICONS
========================================== */

body::before{
content:"T O E F L  💬 📚 ✏️ 🌍";
position:fixed;
top:15%;
left:-100px;
font-size:40px;
opacity:.1;
animation:moveWords 25s linear infinite;
pointer-events:none;
}

@keyframes moveWords{
0%{
transform:translateX(-200px);
}
100%{
transform:translateX(calc(100vw + 300px));
}

}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:992px){

.hero{
flex-direction:column;

text-align:center;

}

.hero-content h1{
font-size:3rem;
}

}

@media(max-width:768px){

.navbar{
flex-direction:column;
gap:15px;

}

.navbar ul{
flex-wrap:wrap;
justify-content:center;
}

.hero-content h1{
font-size:2.3rem;
}

.section h2{
font-size:2rem;
}

.certificate-box{
padding:30px;
}

}

@media(max-width:480px){

.hero{
padding-top:180px;
}

.hero-content h1{
font-size:1.8rem;
}

.hero-content p{
font-size:1rem;
}

.level-card,
.stat-card,

.card{
padding:20px;
}

}
.certificate-box{
max-width:900px;
margin:auto;
padding:20px;
}

.certificate-border{
background:#fff;
border:12px solid #f4c542;
padding:50px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.certificate-header{
text-align:center;
}

.certificate-logo{
width:120px;
margin-bottom:10px;
}

.certificate-header h1{
font-size:42px;
color:#1d3557;
margin-bottom:10px;
}

.certificate-body{
text-align:center;
margin-top:30px;
}

#certificateName{
font-size:42px;
color:#e63946;
margin:20px 0;
}

.certificate-body h3{
font-size:28px;
color:#2a9d8f;
}

.certificate-info{
display:flex;
justify-content:space-around;
margin-top:35px;
flex-wrap:wrap;
gap:20px;
}

.certificate-info div{
background:#f8f9fa;
padding:15px 25px;
border-radius:12px;
}

.certificate-footer{
display:flex;
justify-content:space-between;
margin-top:50px;
align-items:center;
}

.signature h4{
font-family:cursive;
font-size:26px;
margin:0;
}

.certificate-btn{
padding:14px 30px;
font-size:18px;
font-weight:600;
border:none;
border-radius:10px;
cursor:pointer;
background:#4CAF50;
color:white;
transition:.3s;
}

.certificate-btn:hover{
transform:translateY(-2px);
background:blue;
}