.card{

background:var(--surface-color);

border-radius:var(--radius-lg);

padding:25px;

box-shadow:var(--shadow-sm);

transition:var(--transition);

border:1px solid var(--border-color);

}



.card:hover{

transform:translateY(-5px);

box-shadow:var(--shadow-md);

}



.card-title{

font-size:22px;

font-weight:700;

color:var(--primary-dark);

}



.card-icon{

width:60px;

height:60px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:var(--primary-light);

color:var(--primary-color);

font-size:28px;

margin-bottom:20px;

}



/* Question Card */

.question-card{

background:white;

padding:25px;

border-radius:15px;

box-shadow:var(--shadow-sm);

margin-bottom:20px;

}



.question-title{

font-weight:700;

margin-bottom:15px;

}



.answer{

padding:12px;

border-radius:8px;

margin-top:10px;

}


.answer.correct{

background:#e8f7ee;

color:var(--success-color);

}


.answer.wrong{

background:#fdecec;

color:var(--danger-color);

}