:root{--bg:#07111f;--bg2:#101a34;--bg3:#172445;--card:rgba(255,255,255,0.065);--cardBorder:rgba(255,255,255,0.07);--text:#eef4ff;--muted:rgba(238,244,255,0.72);--blue1:#4fdcff;--blue2:#4f8cff;--cyan:#7defff;--green:#5dd39e;--red:#ff7c90;--orange:#ffb36a;--radius:32px}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{width:100%;min-height:100%;overflow-x:hidden;scroll-behavior:smooth}body{width:100%;min-height:100vh;overflow-x:hidden;background:radial-gradient(circle at top left,rgba(79,140,255,.18),transparent 28%),radial-gradient(circle at top right,rgba(125,239,255,.1),transparent 30%),radial-gradient(circle at bottom left,rgba(79,220,255,.08),transparent 32%),radial-gradient(circle at center,rgba(255,255,255,.025),transparent 42%),linear-gradient(180deg,var(--bg) 0,var(--bg2) 55%,var(--bg3) 100%);color:var(--text);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overscroll-behavior:none}#app{width:100%;min-height:100vh}.page{display:none;width:100%;min-height:100vh;padding:max(20px,env(safe-area-inset-top)) 16px max(120px,env(safe-area-inset-bottom));animation:.28s fadePage}.page.active{display:block}@keyframes fadePage{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.centerCard{width:100%;max-width:520px;margin:4vh auto 0;position:relative;isolation:isolate;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.045));border:1px solid rgba(255,255,255,.06);border-radius:42px;padding:42px 34px;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);box-shadow:0 18px 60px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden}.centerCard::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at top,rgba(125,239,255,.1),transparent 42%);pointer-events:none;z-index:-1}.logo{width:138px;height:138px;margin:0 auto 26px;border-radius:38px;background:radial-gradient(circle at top,rgba(125,239,255,.24),rgba(79,140,255,.12));display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.07);box-shadow:0 18px 60px rgba(79,220,255,.18),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);position:relative}.logo img{width:88%;height:88%;object-fit:contain;filter:drop-shadow(
      0 0 20px rgba(79,220,255,.18)
    ) drop-shadow(
      0 0 40px rgba(79,140,255,.12)
    );transform:translateY(1px)}h1{font-size:clamp(
      2rem,
      6vw,
      3rem
    );font-weight:900;line-height:1.08;text-align:center;letter-spacing:-.03em}.subtitle{margin-top:16px;text-align:center;color:var(--muted);line-height:2;margin-bottom:30px;font-size:1rem}input{width:100%;border:1px solid transparent;outline:0;background:rgba(255,255,255,.07);color:var(--text);border-radius:22px;padding:20px;margin-bottom:16px;font-size:1rem;transition:.18s ease-out}input:focus{border-color:rgba(79,220,255,.28);background:rgba(255,255,255,.09)}input::placeholder{color:rgba(238,244,255,.42)}button{border:none;outline:0;cursor:pointer;transition:.18s ease-out;user-select:none}button:active{transform:scale(.98)}button:disabled{opacity:.55;cursor:not-allowed}#loginBtn{width:100%;border-radius:22px;padding:20px;font-size:1rem;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--blue1),var(--blue2));box-shadow:0 14px 40px rgba(79,140,255,.24)}#loginError{margin-top:16px;text-align:center;color:#ff8d9f;min-height:20px}.topBar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:26px;padding:10px 0;backdrop-filter:blur(18px)}.topBar h2{flex:1;text-align:center;font-size:1.12rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topButton{background:rgba(255,255,255,.08);color:#fff;border-radius:18px;padding:12px 16px;font-size:.92rem}.cardGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}.card{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.045));border:1px solid rgba(255,255,255,.06);border-radius:30px;padding:30px 18px;text-align:center;min-height:130px;display:flex;align-items:center;justify-content:center;flex-direction:column;backdrop-filter:blur(18px);transition:.18s ease-out;box-shadow:0 10px 30px rgba(0,0,0,.14)}.card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.04),transparent);pointer-events:none}.card:hover{transform:translateY(-3px);border-color:rgba(125,239,255,.18)}.cardTitle{font-size:1.08rem;font-weight:800;line-height:1.7}.card.locked{opacity:.5}.lockIcon{margin-top:10px;font-size:1.2rem}.quizContainer{width:100%;max-width:780px;margin:0 auto}#questionCard{margin-bottom:22px}#questionText{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.045));border:1px solid rgba(255,255,255,.06);border-radius:34px;padding:30px;line-height:2.15;font-size:1.18rem;font-weight:550;letter-spacing:.01em;margin-bottom:24px;box-shadow:0 10px 30px rgba(0,0,0,.18);color:#f4f8ff;max-width:760px;margin-inline:auto}#optionsContainer{display:flex;flex-direction:column;gap:16px}.optionBtn{width:100%;text-align:left;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.045));color:#eef4ff;border:1px solid rgba(255,255,255,.06);border-radius:24px;padding:20px;line-height:2;font-size:1.04rem;font-weight:550;transition:.18s ease-out;backdrop-filter:blur(18px)}.optionBtn:hover{transform:translateY(-2px);background:rgba(255,255,255,.1);border-color:rgba(125,239,255,.22)}.optionBtn.correct{background:rgba(93,211,158,.18);border-color:rgba(93,211,158,.42)}.optionBtn.wrong{background:rgba(255,124,144,.18);border-color:rgba(255,124,144,.42)}#answerResult{margin-top:24px;font-size:1.14rem;font-weight:800;min-height:28px}#explanationBox,#lectureBox{margin-top:22px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.045));border:1px solid rgba(255,255,255,.06);border-radius:32px;padding:28px;line-height:2.15;display:none;color:rgba(244,248,255,.92);box-shadow:0 10px 30px rgba(0,0,0,.18);max-width:760px;margin-inline:auto}#lectureContainer{margin-top:22px}#lectureToggle{width:100%;background:rgba(255,255,255,.08);color:#fff;border-radius:22px;padding:18px;font-weight:800}#questionImageWrap{display:none;margin-top:18px;width:100%}#questionImage{width:100%;max-width:560px;margin:0 auto;display:block;border-radius:32px;object-fit:contain;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);box-shadow:0 14px 40px rgba(0,0,0,.22);transition:.3s}#nextQuestionBtn{position:fixed;right:18px;bottom:max(20px,env(safe-area-inset-bottom));border-radius:999px;padding:18px 28px;font-size:1rem;font-weight:800;background:linear-gradient(135deg,var(--blue1),var(--blue2));color:#fff;box-shadow:0 14px 40px rgba(79,140,255,.28);display:none;z-index:99999;min-width:130px;backdrop-filter:blur(18px)}.scoreIcon{font-size:4rem;text-align:center;margin-bottom:18px}#finalScore{margin-top:22px;font-size:3.2rem;font-weight:900;text-align:center}#scoreMessage{margin-top:18px;text-align:center;line-height:2;color:var(--muted);margin-bottom:28px}#backToQuizPageBtn,#retakeBtn{width:100%;padding:18px;border-radius:22px;color:#fff;font-weight:800;margin-bottom:14px}#retakeBtn{background:linear-gradient(135deg,var(--orange),var(--red))}#backToQuizPageBtn{background:rgba(255,255,255,.08)}#installBtn{position:fixed;right:18px;bottom:max(18px,env(safe-area-inset-bottom));z-index:999999;border-radius:999px;padding:16px 24px;background:linear-gradient(135deg,var(--blue1),var(--blue2));color:#fff;font-size:.95rem;font-weight:800;box-shadow:0 14px 40px rgba(79,140,255,.28);backdrop-filter:blur(16px);transition:.18s ease-out;opacity:0;visibility:hidden;transform:translateY(20px)}#installBtn.showInstall{opacity:1;visibility:visible;transform:translateY(0)}#appSplash{position:fixed;inset:0;background:linear-gradient(180deg,#eef6ff,#fff);z-index:999999;display:flex;align-items:center;justify-content:center;transition:opacity .45s,visibility .45s}#appSplash img{width:110px;height:110px;object-fit:contain;animation:1.6s infinite splashPulse}#appSplash.hideSplash{opacity:0;visibility:hidden}@keyframes splashPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}.lectureParagraph{margin-bottom:22px;line-height:2.2;font-size:1rem;color:rgba(244,248,255,.92);letter-spacing:.01em}.lectureParagraph:last-child{margin-bottom:0}button,div,p,span{text-shadow:0 0 1px rgba(255,255,255,.02)}#explanationBox,#lectureBox,#questionText,.optionBtn{will-change:transform}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px}@media (max-width:640px){.page{padding:max(16px,env(safe-area-inset-top)) 14px max(120px,env(safe-area-inset-bottom))}.centerCard{margin-top:3vh;border-radius:32px;padding:28px 22px}.logo{width:92px;height:92px}h1{font-size:1.8rem}#questionText{font-size:1.08rem;line-height:2.1;padding:24px}.optionBtn{font-size:1rem;padding:18px}.card{min-height:115px}#questionImage{border-radius:24px}#nextQuestionBtn{right:14px;bottom:max(14px,env(safe-area-inset-bottom));min-width:110px}}body,html{overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}