:root{--blue:#0b4f8a;--sky:#e9f7ff;--orange:#f59e0b;--red:#ef4444;--green:#22c55e;--greenDark:#15803d;--text:#16324f;--muted:#64748b;--white:#fff}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#dbf4ff,#fff3df);color:var(--text)}
#app{max-width:820px;margin:0 auto;padding:14px}
.top{text-align:center;padding:10px 0}
.logo{display:inline-block;background:#fff;border:3px solid #bce8ff;border-radius:30px;padding:10px 24px;font-size:32px;font-weight:900;color:var(--blue);box-shadow:0 9px 22px rgba(11,79,138,.14)}
.logo span{color:var(--orange)}.logo .plus{color:var(--red)}
.tag{font-size:13px;color:var(--muted);margin-top:5px}
.screen{animation:fade .25s ease}@keyframes fade{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.hide{display:none!important}
.card{background:#fff;border-radius:28px;padding:22px;margin:14px 0;box-shadow:0 14px 36px rgba(22,50,79,.16);border:1px solid rgba(11,79,138,.08)}
.welcome{text-align:center}
.mascot{font-size:44px;text-align:center}.mascot.big{font-size:64px;animation:float 2.3s ease-in-out infinite}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
h1{font-size:34px;text-align:center;margin:6px 0;color:var(--blue)}h2{color:var(--blue);margin:8px 0}.lead{text-align:center;font-size:17px;color:var(--muted)}
label{display:block;text-align:left;font-weight:900;margin:16px 0 7px}
input{width:100%;padding:16px;border:2px solid #d8e8f5;border-radius:18px;font-size:17px;outline:none}
input:focus{border-color:#0f76bd;box-shadow:0 0 0 4px #dff3ff}
button{width:100%;border:0;border-radius:18px;padding:16px 18px;font-size:17px;font-weight:900;cursor:pointer;margin-top:12px}
.primary{background:linear-gradient(180deg,var(--green),#16a34a);color:white;box-shadow:0 6px 0 var(--greenDark)}
.primary:active{transform:translateY(4px);box-shadow:0 2px 0 var(--greenDark)}
.secondary{background:#fff;color:var(--blue);border:2px solid var(--blue)}
.back{background:#fff;color:var(--blue);border:2px solid #b9ddf5;box-shadow:none;width:auto;padding:10px 14px;border-radius:14px}
.pulse{animation:pulse 1.6s infinite}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.section-title span{font-weight:900;background:#dcfce7;color:#15803d;padding:7px 12px;border-radius:999px}
.progress{height:14px;background:#e5eef6;border-radius:999px;overflow:hidden;margin:12px 0 18px}.progress div{height:100%;width:0;background:linear-gradient(90deg,var(--green),#0f76bd);transition:.35s}
.lesson-list{display:grid;gap:12px}.lesson-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:#f8fbff;border:2px solid #dbeafe;border-radius:22px;padding:14px;cursor:pointer}
.lesson-item.locked{opacity:.55}.lesson-emoji{font-size:34px}.lesson-title{font-weight:900;color:var(--blue)}.lesson-skill{font-size:13px;color:var(--muted);margin-top:3px}.badge{font-weight:900;border-radius:999px;padding:6px 10px;background:#fff4db;color:#9a5b00}.done{background:#dcfce7;color:#15803d}
.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}.review-card{border-radius:24px;padding:16px;background:#f8fbff;border:2px solid #dbeafe;text-align:center}.review-card:nth-child(1){background:#fff7e6;border-color:#fed7aa}.review-card h2{font-size:25px}.example{background:#fff;border-radius:14px;padding:9px;margin:8px 0;font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.quiz-top{display:flex;justify-content:space-between;align-items:center;color:var(--blue)}#quizPercent{background:#dcfce7;color:#15803d;padding:6px 12px;border-radius:999px;font-weight:900}
#questionText{text-align:center;font-size:24px;line-height:1.3}.choice{background:#f8fbff;color:var(--text);border:2px solid #dbeafe;text-align:left;box-shadow:0 5px 0 #cbd5e1}.choice:hover{border-color:#0f76bd;background:#eef8ff}.choice.correct{background:#dcfce7;border-color:var(--green);box-shadow:0 5px 0 #86efac}.choice.wrong{background:#fee2e2;border-color:var(--red);box-shadow:0 5px 0 #fecaca}
.feedback{border-radius:18px;padding:14px;margin-top:14px;font-weight:900;text-align:center}.feedback.good{background:#dcfce7;color:#166534}.feedback.bad{background:#fee2e2;color:#991b1b}
.result-card{text-align:center}.score-circle{width:116px;height:116px;border-radius:50%;background:#e9f7ff;border:7px solid var(--green);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900;color:var(--blue);margin:0 auto 10px}.confetti{font-size:32px;animation:pop .8s ease infinite alternate}@keyframes pop{from{transform:scale(.96)}to{transform:scale(1.04)}}.stars{font-size:36px;letter-spacing:4px;margin:10px 0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.stats div{background:#f8fbff;border-radius:20px;padding:14px}.stats b{display:block;font-size:24px;color:var(--blue)}.stats span{font-size:13px;color:var(--muted)}
.certificate{border:3px solid #bce8ff;border-radius:24px;padding:18px;margin:18px 0;background:linear-gradient(180deg,#fff,#f0fbff)}.certificate h2{font-size:22px}.certificate h3{font-size:25px;color:var(--blue);margin:8px 0}
.review-item{text-align:left;padding:12px;border-radius:16px;background:#f8fbff;border-left:6px solid #dbeafe;margin:10px 0;font-size:14px}.review-item.missed{background:#fff7f7;border-left-color:var(--red)}
@media(max-width:640px){#app{padding:10px}.card{padding:18px;border-radius:24px}.logo{font-size:26px}.review-grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr}.lesson-item{grid-template-columns:auto 1fr}.badge{grid-column:2}h1{font-size:30px}#questionText{font-size:22px}}
@media print{body{background:white}.top,#home,#lesson,#quiz,button,#review{display:none!important}.card{box-shadow:none;border:0}.certificate{break-inside:avoid}}