*{box-sizing:border-box}
:root{--ink:#182338;--muted:#667389;--purple:#7b42e7;--pink:#ff5b88;--yellow:#ffd65a;--mint:#b9eee2;--bg:#eaf0f3}
body{margin:0;background:linear-gradient(145deg,#dff6f1,#f7e9ef);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.app{max-width:850px;margin:auto;min-height:100vh;padding:0 16px 24px}
.topbar{height:74px;background:#fff;display:flex;align-items:center;gap:14px;padding:0 18px;border-bottom:5px solid var(--yellow);box-shadow:0 5px 18px #26364a16;position:sticky;top:0;z-index:10}
.brand{font-weight:1000;letter-spacing:1.5px;color:var(--pink);font-size:19px}.top-title{font-size:18px;font-weight:850;flex:1}.sound-btn{border:0;background:#f1e9ff;border-radius:50%;width:46px;height:46px;font-size:21px;cursor:pointer}
.screen{display:none}.screen.active{display:block}
.home-hero{margin:22px 0 20px;padding:31px 25px;border-radius:30px;background:linear-gradient(135deg,#fff,#e9e6ff);box-shadow:0 12px 30px #24334c12}.hero-kicker{color:var(--purple);font-weight:900;font-size:12px;letter-spacing:1.5px}.home-hero h1{font-size:39px;line-height:1.08;margin:10px 0 8px;letter-spacing:-1.2px}.home-hero p{margin:0;color:var(--muted)}.hero-stats{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.hero-stats span{background:#fff;padding:8px 11px;border-radius:99px;font-size:12px;font-weight:800;box-shadow:0 4px 12px #00000009}
.section-title{padding:6px 4px 15px}.section-title span{font-size:11px;letter-spacing:1.5px;font-weight:900;color:var(--purple)}.section-title h2{margin:4px 0;font-size:27px}
.subjects{display:grid;grid-template-columns:1fr 1fr;gap:16px}.subject-btn{position:relative;text-align:left;border:0;border-radius:27px;padding:23px;min-height:245px;cursor:pointer;color:var(--ink);box-shadow:0 12px 30px #26364a13;transition:.18s}.subject-btn:hover{transform:translateY(-3px)}.english-card{background:linear-gradient(145deg,#fff,#eeeaff)}.bm-card{background:linear-gradient(145deg,#fff,#e8f8f1)}.subject-icon{font-size:49px}.subject-arrow{position:absolute;right:18px;top:18px;width:42px;height:42px;border-radius:13px;background:#fff;display:grid;place-items:center;font-size:22px}.subject-btn h3{font-size:30px;margin:20px 0 5px}.subject-btn p{font-size:14px;line-height:1.5;color:var(--muted);margin:0 0 19px}.subject-btn strong{font-size:12px;background:#fff;padding:8px 12px;border-radius:99px}
.back,.exit{border:0;background:#e7edf4;border-radius:13px;padding:11px 15px;font-weight:850;color:var(--ink);cursor:pointer;margin-top:22px}.subject-heading{font-size:31px;font-weight:950;margin:20px 2px 15px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.grid button{background:#fff;border:2px solid #dfe6ee;border-radius:20px;padding:19px;text-align:left;cursor:pointer;box-shadow:0 8px 20px #00000008}.grid b{display:block;font-size:18px}.grid small{display:block;margin-top:6px;color:var(--muted)}
.quiz-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:17px}.exit{margin:0;font-size:14px}.quiz-topic{justify-self:center;background:var(--pink);color:#fff;border-radius:99px;padding:10px 17px;font-weight:900}.counter{font-weight:900;font-size:14px}.progress{height:10px;background:#dce4ec;border-radius:99px;margin:17px 0}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--purple));border-radius:99px}
.question-card{background:#fff;border-radius:30px;padding:25px 20px 27px;margin-top:18px;box-shadow:0 12px 30px #25344a18;border:5px solid #fff}.topic-badge{display:inline-block;background:#fff4cf;border:3px solid var(--yellow);color:#a75a00;border-radius:99px;padding:7px 13px;font-size:12px;font-weight:950}.question-label{margin-top:20px;text-align:center;color:#a85400;font-weight:950;letter-spacing:.4px;font-size:14px;text-transform:uppercase}.question-card h2{margin:10px 0 0;text-align:center;font-size:36px;line-height:1.28;font-weight:1000;letter-spacing:-.5px;padding:22px 12px;background:#fff8e5;border:5px solid var(--yellow);border-radius:25px;box-shadow:inset 0 0 0 1px #fff}
.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:18px 0}.answer{min-height:82px;border:5px solid #dfe7ef;border-radius:22px;background:#fff;color:var(--ink);font-size:23px;font-weight:950;cursor:pointer;box-shadow:0 8px 0 #d7dfe8;transition:.12s}.answer:nth-child(1){background:#fff0f5;border-color:#ffabc4;box-shadow:0 8px 0 #f39ab6}.answer:nth-child(2){background:#f0eaff;border-color:#c9aaff;box-shadow:0 8px 0 #b797ef}.answer:nth-child(3){background:#fff8dc;border-color:#ffd96b;box-shadow:0 8px 0 #edc34e}.answer:nth-child(4){background:#e9f5ff;border-color:#a9d8f7;box-shadow:0 8px 0 #91c5e7}.answer:active{transform:translateY(4px);box-shadow:none}.answer.correct{background:#dff8eb!important;border-color:#39b879!important;box-shadow:0 8px 0 #239b62!important}.answer.wrong{background:#ffe3e3!important;border-color:#ed6868!important;box-shadow:0 8px 0 #d94e4e!important}.answer:disabled{cursor:default}
.feedback{min-height:38px;text-align:center;font-size:19px;font-weight:1000;padding:7px;visibility:hidden}.next-btn{display:block;width:100%;border:0;border-radius:18px;padding:16px;background:linear-gradient(90deg,var(--purple),#934cf1);color:#fff;font-size:16px;font-weight:950;cursor:pointer;box-shadow:0 8px 0 #6332bb}.next-btn:disabled{opacity:.4;box-shadow:none}
footer{text-align:center;color:#758195;font-size:12px;font-weight:700;padding:23px}
@media(max-width:650px){.app{padding:0 10px 20px}.topbar{padding:0 12px}.top-title{font-size:16px}.home-hero h1{font-size:32px}.subjects,.grid{grid-template-columns:1fr}.subject-btn{min-height:215px}.quiz-head{grid-template-columns:auto 1fr}.counter{grid-column:2;justify-self:end}.quiz-topic{grid-column:1/3;grid-row:1;justify-self:center}.question-card h2{font-size:31px}.answer-grid{gap:12px}.answer{min-height:76px;font-size:21px}}