.lessonCard{
background:white;
padding:30px;
border-radius:24px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
max-width:620px;
margin:auto;
animation:fade .4s ease;
}

@keyframes fade{
from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}

.lessonTitle{
font-size:26px;
font-weight:900;
margin-bottom:20px;
background:linear-gradient(90deg,#7b5cff,#5edfff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.lessonFormula{
background:#f3f0ff;
padding:14px;
border-radius:14px;
font-weight:700;
margin-bottom:15px;
}

.lessonExample{
background:#eef9ff;
padding:14px;
border-radius:14px;
margin-bottom:20px;
}

#userInput{
width:100%;
height:110px;
border-radius:16px;
border:2px solid #eee;
padding:14px;
font-size:15px;
outline:none;
transition:.25s;
}

#userInput:focus{
border-color:#7b5cff;
}

.lessonBtns{
display:flex;
gap:10px;
margin-top:18px;
}

.lessonBtns button{
flex:1;
border:none;
padding:14px;
border-radius:14px;
font-weight:700;
cursor:pointer;
background:linear-gradient(135deg,#7b5cff,#5edfff);
color:white;
transition:.25s;
}

.lessonBtns button:hover{
transform:scale(1.05);
}

#lessonResult{
margin-top:18px;
font-weight:700;
}
.lessonWrap{
display:flex;
flex-direction:column;
gap:28px;
}

.lessonStep{
animation:fade .4s ease;
}

.stepTitle{
font-size:22px;
font-weight:900;
margin-bottom:10px;
color:#6b6bff;
}

.card{
background:white;
padding:18px;
border-radius:18px;
box-shadow:0 6px 20px rgba(0,0,0,.07);
}

.formulaBox{
background:#f3f0ff;
padding:18px;
border-radius:18px;
font-weight:700;
line-height:1.8;
}

.levelTabs button{
margin-right:10px;
border:none;
padding:10px 16px;
border-radius:12px;
background:#eee;
cursor:pointer;
font-weight:700;
}

.levelTabs button:hover{
background:#7b5cff;
color:white;
}

.quizBox button{
display:block;
width:100%;
margin-top:10px;
padding:12px;
border:none;
border-radius:12px;
background:#f0f4ff;
cursor:pointer;
font-weight:600;
}

.quizBox button.correct{background:#c8ffd9}
.quizBox button.wrong{background:#ffd2d2}

textarea{
width:100%;
height:120px;
padding:14px;
border-radius:16px;
border:2px solid #eee;
margin-top:10px;
}

.btnRow{
display:flex;
gap:10px;
margin-top:12px;
}

.btnRow button{
flex:1;
padding:14px;
border:none;
border-radius:14px;
background:linear-gradient(135deg,#7b5cff,#5edfff);
color:white;
font-weight:700;
cursor:pointer;
}
.lessonHeader{
text-align:center;
margin-bottom:30px;
}
.lessonHeader span{
background:#eee;
padding:6px 14px;
border-radius:999px;
font-size:13px;
font-weight:700;
}
.lessonHeader h1{
margin:12px 0 6px;
font-size:32px;
background:linear-gradient(90deg,#7b5cff,#5edfff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.lessonHeader p{
opacity:.7;
font-weight:600;
}

.klist li{
margin:10px 0;
font-weight:700;
}
.klist span{
display:block;
font-weight:400;
opacity:.7;
margin-top:2px;
}

.exampleCard{
text-align:center;
}
.exampleQ{
font-size:24px;
font-weight:900;
margin-bottom:10px;
}
.exampleTag{
display:inline-block;
background:#7b5cff;
color:white;
padding:6px 14px;
border-radius:999px;
font-size:13px;
font-weight:700;
}

.playBtn{
margin-top:12px;
padding:10px 18px;
border:none;
border-radius:999px;
background:black;
color:white;
cursor:pointer;
}

.levelBox{
font-size:18px;
line-height:1.7;
}

.quizQ{
font-weight:900;
margin-bottom:10px;
}

.correct{background:#c8ffd9 !important}
.wrong{background:#ffd2d2 !important}

#resultBox{
margin-top:14px;
font-weight:800;
font-size:18px;
}
.levelSentence{
font-size:20px;
font-weight:800;
margin-bottom:8px;
}

.levelVi{
opacity:.7;
margin-bottom:14px;
}

.audioBtn{
background:linear-gradient(135deg,#7b5cff,#5edfff);
color:white;
border:none;
padding:10px 18px;
border-radius:999px;
cursor:pointer;
font-weight:700;
transition:.25s;
}

.audioBtn:hover{
transform:scale(1.05);
}