@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap";:root{--primary:#ff8ba7;--primary-dark:#ff5c8a;--secondary:#ffc6ff;--accent:#bdb2ff;--green:#9bf6ff;--green-dark:#28a745;--yellow:#fdffb6;--red:#ffadad;--red-dark:#dc3545;--text-dark:#2b2d42;--white:#fff;--bg-color:#f8f9fa}*{box-sizing:border-box;margin:0;padding:0;font-family:Nunito,sans-serif}body{background-color:var(--bg-color);color:var(--text-dark);background-image:radial-gradient(var(--secondary) 2px, transparent 2px);background-size:30px 30px;min-height:100vh}.modal-overlay{z-index:1000;background:#0009;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal-content{background:var(--white);text-align:center;border:5px solid var(--primary);border-radius:25px;width:90%;max-width:400px;padding:40px;box-shadow:0 15px 30px #0003}.modal-content h2{color:var(--primary-dark);margin-bottom:10px;font-size:30px}.modal-content input{border:3px solid var(--accent);text-align:center;border-radius:15px;outline:none;width:100%;margin:20px 0;padding:15px;font-size:20px}.modal-content button{background:var(--green-dark);color:#fff;cursor:pointer;border:none;border-radius:15px;padding:15px 30px;font-size:22px;font-weight:700;transition:all .2s;box-shadow:0 5px #1e7e34}.modal-content button:active{transform:translateY(5px);box-shadow:0 0 #1e7e34}.top-bar{background:var(--white);z-index:100;border-bottom:4px solid var(--primary);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:15px 30px;display:flex;position:sticky;top:0;box-shadow:0 4px 15px #0000000d}.logo{color:var(--primary-dark);text-shadow:2px 2px 0px var(--secondary);align-items:center;gap:10px;font-size:28px;font-weight:900;display:flex}.star-counter{color:#e65100;background:#fff3e0;border:2px solid #ffe0b2;border-radius:30px;align-items:center;gap:8px;padding:8px 20px;font-size:22px;font-weight:900;display:flex;box-shadow:0 4px #ffe0b2}.star-icon{font-size:26px;animation:2s infinite pulse}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.container{max-width:1000px;margin:30px auto;padding:0 20px}.nav-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:25px;display:grid}.nav-btn{background:var(--white);border:3px solid var(--accent);color:var(--accent);cursor:pointer;box-shadow:0 5px 0 var(--accent);border-radius:15px;justify-content:center;align-items:center;gap:8px;padding:12px 10px;font-size:15px;font-weight:800;transition:all .3s cubic-bezier(.175,.885,.32,1.275);display:flex}.nav-btn:hover:not(:disabled){box-shadow:0 7px 0 var(--accent);transform:translateY(-2px)}.nav-btn:active:not(:disabled){box-shadow:0 2px 0 var(--accent);transform:translateY(3px)}.nav-btn.active{background:var(--accent);color:var(--white);border-color:var(--accent)}.nav-btn:disabled{cursor:not-allowed;color:#a0aab2!important;background:#e0e1dd!important;border-color:#e0e1dd!important;transform:none!important;box-shadow:0 4px #d0d1cd!important}.nav-btn.math{color:#4ea8de;border-color:#4ea8de;box-shadow:0 5px #4ea8de}.nav-btn.math.active{color:var(--white);background:#4ea8de}.nav-btn.eng{border-color:var(--primary-dark);color:var(--primary-dark);box-shadow:0 5px 0 var(--primary-dark)}.nav-btn.eng.active{background:var(--primary-dark);color:var(--white)}.nav-btn.evs{color:#2d6a4f;border-color:#2d6a4f;box-shadow:0 5px #2d6a4f}.nav-btn.evs.active{color:var(--white);background:#2d6a4f}.nav-btn.spell{color:#f4a261;border-color:#f4a261;box-shadow:0 5px #f4a261}.nav-btn.spell.active{color:var(--white);background:#f4a261}.nav-btn.jumble{color:#9d4edd;border-color:#9d4edd;box-shadow:0 5px #9d4edd}.nav-btn.jumble.active{color:var(--white);background:#9d4edd}.subject-content{animation:.5s fadeIn;display:none}.subject-content.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.mode-toggle{flex-wrap:wrap;justify-content:center;gap:20px;margin-bottom:25px;display:flex}.mode-btn{cursor:pointer;color:#778da9;background:#e0e1dd;border:none;border-radius:30px;padding:10px 30px;font-size:20px;font-weight:800;transition:all .3s}.mode-btn.active{background:var(--yellow);color:#d4a373;box-shadow:0 4px #e9c46a}.learn-view{background:var(--white);border-radius:25px;gap:20px;padding:30px;display:grid;box-shadow:0 10px 30px #00000014}.tip-card{background:var(--green);border-left:8px solid var(--green-dark);border-radius:15px;padding:20px}.tip-card h3{color:var(--text-dark);margin-bottom:10px;font-size:22px}.tip-card p{font-size:18px;line-height:1.6}.tip-card .highlight{color:var(--primary-dark);background:#fff;border-radius:10px;padding:2px 8px;font-weight:900}.quiz-view{background:var(--white);text-align:center;border-radius:25px;min-height:400px;padding:40px;display:none;position:relative;box-shadow:0 10px 30px #00000014}.question-text{color:var(--text-dark);margin-bottom:30px;font-size:26px;font-weight:800;line-height:1.4}.options-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;display:grid}.option-btn{color:var(--text-dark);cursor:pointer;background:#f8f9fa;border:3px solid #dee2e6;border-radius:15px;justify-content:center;align-items:center;padding:20px;font-size:22px;font-weight:700;transition:all .2s;display:flex;box-shadow:0 4px #dee2e6}.option-btn:hover:not(:disabled){background:var(--green);border-color:var(--green-dark);box-shadow:0 4px 0 var(--green-dark);transform:translateY(-2px)}.option-btn:active:not(:disabled){box-shadow:0 0 0 var(--green-dark);transform:translateY(2px)}.option-btn.correct{animation:.5s bounce;background:var(--green)!important;border-color:var(--green-dark)!important;color:var(--green-dark)!important;box-shadow:0 4px 0 var(--green-dark)!important}.option-btn.wrong{animation:.5s shake;background:var(--red)!important;border-color:var(--red-dark)!important;color:var(--red-dark)!important;box-shadow:0 4px 0 var(--red-dark)!important}.option-btn:disabled{cursor:not-allowed}.jumbled-container{flex-direction:column;gap:30px;display:flex}.jumble-dropzone{background:#f8f9fa;border:3px dashed #bdb2ff;border-radius:15px;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;min-height:80px;padding:15px;display:flex}.jumble-bank{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.word-piece{background:var(--accent);color:#fff;cursor:pointer;border-radius:10px;padding:10px 20px;font-size:20px;font-weight:800;transition:all .2s;box-shadow:0 4px #9d4edd}.word-piece:hover{transform:translateY(-2px);box-shadow:0 6px #9d4edd}.word-piece:active{transform:translateY(2px);box-shadow:0 0 #9d4edd}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.feedback-msg{min-height:35px;margin-top:25px;font-size:24px;font-weight:900}.feedback-correct{color:var(--green-dark)}.feedback-wrong{color:var(--red-dark)}.loading-state{flex-direction:column;justify-content:center;align-items:center;height:300px;display:flex}.spinner{border:6px solid #f3f3f3;border-top:6px solid var(--primary);border-radius:50%;width:50px;height:50px;margin-bottom:20px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (width<=768px){.nav-grid{grid-template-columns:repeat(3,1fr)}}@media (width<=600px){.top-bar{text-align:center;justify-content:center;padding:10px 15px}.logo{justify-content:center;width:100%;margin-bottom:10px;font-size:22px}.star-counter{margin:0 auto;padding:6px 15px;font-size:18px}.star-icon{font-size:20px}.container{margin:15px auto;padding:0 10px}.nav-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:15px}.nav-btn{box-shadow:0 3px 0 var(--accent);border-width:2px;padding:10px 5px;font-size:13px}.nav-btn:hover:not(:disabled){box-shadow:0 4px 0 var(--accent)}.mode-toggle{gap:10px;margin-bottom:15px}.mode-btn{padding:8px 15px;font-size:16px}.learn-view,.quiz-view{border-radius:20px;padding:20px 15px}.tip-card{padding:15px}.tip-card h3{font-size:18px}.tip-card p{font-size:15px}.question-text{margin-bottom:20px;font-size:20px}.options-grid{grid-template-columns:1fr;gap:12px}.option-btn{border-width:2px;border-radius:12px;padding:15px;font-size:18px;box-shadow:0 3px #dee2e6}.word-piece{padding:8px 12px;font-size:16px}.jumble-dropzone{min-height:60px;padding:10px}.jumbled-container{gap:20px}.feedback-msg{min-height:28px;margin-top:15px;font-size:18px}.modal-content{padding:25px 20px}.modal-content h2{font-size:24px}.modal-content input{padding:12px;font-size:18px}.modal-content button{padding:12px 25px;font-size:18px}.responsive-table th,.responsive-table td{padding:10px 5px!important;font-size:13px!important}.responsive-table th{font-size:12px!important}.responsive-table a{padding:6px!important;font-size:11px!important}}