*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#f6f8f7;--card:#fff;--text:#18221d;--muted:#718078;--green:#16a36b;--green2:#0b8052;--line:#dfe8e3;--gold:#f2b632;--danger:#e45555}
body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
button{font:inherit;border:0;cursor:pointer}.app{max-width:760px;margin:auto;min-height:100vh;padding-bottom:86px}
.topbar{height:70px;background:var(--card);display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{font-size:21px;font-weight:900;color:var(--green2)}.brand span{margin-right:5px}.stats{display:flex;gap:14px;font-size:14px}.stats div{background:#f3f6f4;padding:8px 10px;border-radius:12px}
.screen{display:none;padding:28px 20px}.screen.active{display:block}
.hero{padding:28px 4px 22px}.badge{display:inline-block;background:#e4f6ee;color:var(--green2);font-size:11px;font-weight:900;letter-spacing:.8px;padding:7px 10px;border-radius:20px}
.hero h1{font-size:38px;line-height:1.08;margin:15px 0 12px}.hero h1 span{color:var(--green)}.hero p{color:var(--muted);line-height:1.6}
.overall-card{background:var(--card);padding:18px;border-radius:20px;border:1px solid var(--line);margin-bottom:28px}.row{display:flex;justify-content:space-between;margin-bottom:12px}.row span{color:var(--green2);font-weight:900}.bar{height:9px;background:#e7eeea;border-radius:20px;overflow:hidden}.bar div{height:100%;width:0;background:linear-gradient(90deg,var(--green),#6bd39f);border-radius:20px;transition:.35s}.overall-card small{display:block;color:var(--muted);margin-top:9px}
h2{font-size:22px;margin-bottom:15px}.level-map{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.level{background:var(--card);border:1px solid var(--line);border-radius:19px;padding:17px;position:relative;min-height:132px;transition:.2s}.level:not(.locked):hover{transform:translateY(-2px);box-shadow:0 8px 25px #163b2712}.level.locked{opacity:.55;cursor:pointer}.level .icon{font-size:27px}.level h3{font-size:16px;margin:8px 0 3px}.level p{font-size:12px;color:var(--muted)}.level .percent{position:absolute;right:13px;top:15px;font-size:12px;font-weight:900;color:var(--green2)}.level .mini{margin-top:11px;height:5px;background:#e8efeb;border-radius:10px;overflow:hidden}.level .mini div{height:100%;background:var(--green);width:0}.check{color:var(--green);font-weight:900}
.lesson-head{display:flex;align-items:center;gap:13px;margin-bottom:14px}.lesson-head h2{margin:2px 0 0}.lesson-head small{color:var(--muted);font-weight:800}.icon-btn{width:42px;height:42px;border-radius:13px;background:var(--card);border:1px solid var(--line);font-size:22px}.lesson-progress{margin-left:auto;font-weight:900}.question-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:22px;margin-top:22px}.question-type{font-size:11px;font-weight:900;color:var(--green2);letter-spacing:.8px}.question-card h3{font-size:23px;line-height:1.4;margin:13px 0 20px}.answers{display:grid;gap:11px}.answer{padding:15px;border:2px solid var(--line);border-radius:15px;background:#fff;text-align:left;line-height:1.45}.answer.selected{border-color:var(--green);background:#effaf5}.answer.correct{border-color:var(--green);background:#e7f8ef}.answer.wrong{border-color:var(--danger);background:#fff0f0}.feedback{min-height:46px;padding:12px 2px;font-size:14px;font-weight:800;line-height:1.45}.feedback:empty{min-height:12px}.primary-btn{width:100%;padding:15px;border-radius:15px;background:var(--green);color:#fff;font-weight:900;letter-spacing:.3px}.primary-btn:disabled{opacity:.45;cursor:not-allowed}
.result-card{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:38px 22px;margin-top:20px}.trophy{font-size:70px;margin-bottom:10px}.result-card h1{font-size:30px;margin:14px 0 8px}.result-card p{color:var(--muted);line-height:1.5}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:28px 0}.result-stats div{background:#f4f7f5;border-radius:16px;padding:14px 5px}.result-stats b{display:block;font-size:22px;color:var(--green2)}.result-stats span{font-size:11px;color:var(--muted)}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(760px,100%);height:70px;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-around;z-index:6}.bottom-nav button{background:transparent;color:#87928d;font-size:19px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.bottom-nav button span{font-size:10px}.bottom-nav button.active{color:var(--green2);font-weight:900}
.lock-message{position:fixed;left:50%;bottom:82px;transform:translate(-50%,20px);width:min(680px,calc(100% - 28px));background:#18221d;color:#fff;border-radius:16px;padding:13px 15px;display:flex;align-items:center;gap:11px;opacity:0;pointer-events:none;transition:.25s;z-index:10;box-shadow:0 12px 30px #0003}.lock-message.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}.lock-message span{font-size:23px}.lock-message div{flex:1}.lock-message b,.lock-message small{display:block}.lock-message small{color:#b9c7c0;margin-top:2px}.lock-message button{background:transparent;color:#fff;font-size:23px}
@media(max-width:520px){.hero h1{font-size:31px}.level-map{grid-template-columns:1fr 1fr}.screen{padding:22px 15px}.stats{gap:6px}.stats div{padding:7px 8px}}